/* Ecru Games — portal
   ------------------------------------------------------------------
   Rewritten Ağu 2026. The old sheet was a dark, generously spaced studio
   portfolio: good design, wrong job. A games portal has one task, getting
   someone into a game, and a second one nobody was serving at all — a
   returning player wants their own farm, not an introduction to it.

   The palette comes out of the game rather than a swatch generator: olive of
   the field, cream of the cotton boll, gold of the harvest. The signature is
   the stitch — a dashed gold seam closing the nav and opening the footer.
   These are textile games; it is structure, not ornament, and it is the one
   flourish the page is allowed. */

:root {
  /* field: signage, nav, panels */
  --field-900: #1b2617;
  --field-800: #24321f;
  --field-700: #33452b;
  --field-600: #46603a;
  --field-400: #6f8a5e;

  /* cotton: page and cards */
  --cream-50:  #fbf7ec;
  --cream-100: #f3ecda;
  --cream-200: #e7dcc2;
  --cream-300: #d6c8a6;

  /* harvest: the one loud colour, spent on actions only */
  --gold-300: #f7d271;
  --gold-500: #eeb01e;
  --gold-600: #cf9410;
  --rust-500: #c1492a;

  --ink-900: #1c2718;
  --ink-700: #3c4a36;
  --ink-500: #6b7663;

  --radius: 18px;
  --radius-sm: 12px;

  /* The old soy scale stays: the account card and hub panel are built on it
     and they are deliberately dark, which still reads correctly floating over
     a cream page. Removing these would mean restyling a working sign-in flow
     for no gain. */
  --soy-50: #f6f1dc;
  --soy-100: #e6ddb4;
  --soy-200: #c5be9a;
  --soy-300: #a9a384;
  --soy-400: #908a6f;
  --soy-500: #78735d;
  --soy-600: #625e4b;
  --soy-700: #504d3d;
  --soy-800: #38362a;
  --soy-900: #1f1e16;
  --soy-950: #12110b;
  --ink: #242219;
  --ink-deep: #191812;
  --surface: #302e24;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 84% 8%, rgba(238, 176, 30, .11), transparent 28rem),
    radial-gradient(circle at 8% 42%, rgba(111, 138, 94, .1), transparent 32rem),
    var(--cream-50);
  color: var(--ink-900);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }

.shell {
  width: min(1340px, calc(100% - 40px));
  margin-inline: auto;
}

/* ---------- the stitch: this page's one flourish ----------
   A dashed seam, the way two panels of fabric are joined. It closes the nav
   and opens the footer, and appears nowhere else — a page of seams would be
   a quilt. */
.stitch {
  height: 3px;
  background-image: repeating-linear-gradient(
    90deg, var(--gold-500) 0 14px, transparent 14px 26px);
  opacity: .85;
}

/* ---------- nav ---------- */
.topbar {
  background: rgba(27, 38, 23, .96);
  color: var(--cream-100);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 10px 30px rgba(17, 26, 14, .13);
  backdrop-filter: blur(16px);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 76px;
  padding: 9px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.brand img {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  object-fit: cover;
  background: var(--cream-50);
}

.brandWord { display: block; }

/* No wordmark file exists, so the wordmark is typographic: the display face
   doing the job a logotype would. Two lines, because "ECRU" is the name and
   "GAMES" is what it makes. */
.brand b {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--cream-50);
  line-height: .95;
  display: block;
}

.brand small {
  display: block;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gold-500);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}

.navLinks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  flex: 1 1 auto;
}

.navPrimary,
.navActions {
  display: flex;
  align-items: center;
}

.navPrimary {
  gap: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream-200);
}

.navActions { gap: 10px; }

.navPrimary > a { padding: 7px 0; border-bottom: 2px solid transparent; }
.navPrimary > a:hover { color: #fff; border-bottom-color: var(--gold-500); }
.navPrimary > a[aria-current="page"] { color: var(--gold-500); border-bottom-color: var(--gold-500); }

.navCta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 19px;
  border-radius: 999px;
  background: var(--gold-500);
  color: var(--field-900);
  font-weight: 800;
  border-bottom: 0 !important;
  box-shadow: 0 3px 0 var(--gold-600);
  transition: transform .12s, box-shadow .12s, background .12s;
}

.navCta:hover { background: var(--gold-300); color: var(--field-900); transform: translateY(-1px); box-shadow: 0 4px 0 var(--gold-600); }

/* Chat lights up only when the room actually has someone in it. An always-on
   badge over an empty room is a lie people fall for exactly once. */
.navHub { display: inline-flex; align-items: center; gap: 7px; }
.navHub i { width: 7px; height: 7px; border-radius: 50%; background: var(--field-400); }
.navHub.live i { background: #6ede7a; box-shadow: 0 0 0 3px rgba(110, 222, 122, .22); }
.navHub b { font-weight: 700; color: var(--gold-500); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 28px 0 8px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 7% -4% 2%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(238, 176, 30, .14);
  filter: blur(70px);
  pointer-events: none;
}

.heroStage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--field-800);
  border: 1px solid rgba(238, 176, 30, .46);
  box-shadow: 0 26px 65px rgba(27, 38, 23, .24), 0 2px 0 rgba(255, 255, 255, .55) inset;
  min-height: 545px;
  display: flex;
  align-items: stretch;
}

.heroStage::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid rgba(255, 249, 237, .2);
  border-radius: calc(var(--radius) - 7px);
  pointer-events: none;
}

.heroMedia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 50%;
  transform: scale(1.015);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.heroStage:hover .heroMedia { transform: scale(1.04); }

/* The panel sits on the art, not beside it, so the game is the page rather
   than an illustration next to it. The gradient keeps type legible over
   whatever frame the video happens to be on. */
.heroPanel {
  position: relative;
  z-index: 2;
  width: min(660px, 100%);
  padding: 44px 52px 48px;
  background: linear-gradient(100deg,
    rgba(20, 29, 17, .78) 0%,
    rgba(20, 29, 17, .64) 58%,
    rgba(20, 29, 17, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 17px;
  color: var(--cream-50);
}

.heroKicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid rgba(246, 241, 220, .22);
  border-radius: 999px;
  background: rgba(246, 241, 220, .09);
  color: var(--gold-300);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.heroKicker i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #73dd7d;
  box-shadow: 0 0 0 4px rgba(115, 221, 125, .17);
}

.heroLogo {
  width: min(400px, 80%);
  display: block;
  filter: drop-shadow(0 8px 10px rgba(8, 14, 7, .28));
}

.heroMark { margin: 0; line-height: 0; }

.heroTitle {
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 46px);
  line-height: 1.03;
  margin: 0;
  color: #fff;
}

.heroText {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--cream-50);
  max-width: 34ch;
  text-shadow: 0 2px 8px rgba(8, 14, 7, .5);
}

.heroActions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.btnPlay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 27px;
  border-radius: 999px;
  background: var(--gold-500);
  color: var(--field-900);
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  box-shadow: 0 7px 0 var(--gold-600);
  transition: transform .12s, box-shadow .12s, background .12s;
  position: relative;
  overflow: hidden;
}

.btnPlay::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -34%;
  width: 24%;
  height: 180%;
  transform: rotate(18deg);
  background: rgba(255, 255, 255, .42);
  transition: left .5s ease;
}

.btnPlay:hover::after { left: 116%; }

.btnPlay:hover { background: var(--gold-300); transform: translateY(-2px); box-shadow: 0 9px 0 var(--gold-600); }
.btnPlay:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--gold-600); }

.btnGhost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 21px;
  border-radius: 999px;
  border: 1.5px solid rgba(246, 241, 220, .38);
  color: var(--cream-100);
  font-weight: 700;
  font-family: inherit;
  font-size: inherit;
  background: rgba(20, 29, 17, .18);
  cursor: pointer;
}

.btnGhost:hover { border-color: var(--cream-100); background: rgba(246, 241, 220, .08); }

/* ---------- trailer ---------- */
.trailerDialog {
  width: min(1000px, calc(100% - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid rgba(231, 220, 194, .28);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--field-900);
  color: var(--cream-50);
  box-shadow: 0 30px 90px rgba(8, 14, 7, .55);
}

.trailerDialog::backdrop {
  background: rgba(10, 16, 9, .78);
  backdrop-filter: blur(8px);
}

.trailerFrame { display: flex; flex-direction: column; }

.trailerHead {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 14px 10px 20px;
}

.trailerHead strong { font-family: var(--display); font-size: 17px; }

.trailerHead button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(246, 241, 220, .22);
  border-radius: 50%;
  background: rgba(246, 241, 220, .08);
  color: var(--cream-50);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.trailerHead button:hover { background: rgba(246, 241, 220, .16); }

.trailerDialog video {
  display: block;
  width: 100%;
  max-height: calc(100vh - 130px);
  background: #080b07;
}

.tags { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--cream-100);
  border: 1px solid var(--cream-300);
  box-shadow: 0 3px 10px rgba(8, 14, 7, .18);
  font-size: 13px;
  font-weight: 700;
  color: var(--field-800);
}

/* Live count. Drawn only when someone is genuinely playing — the element
   stays hidden otherwise rather than showing a zero. */
.livePlayers {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--cream-200);
}

.livePlayers.on { display: inline-flex; }
.livePlayers i { width: 8px; height: 8px; border-radius: 50%; background: #6ede7a; box-shadow: 0 0 0 4px rgba(110, 222, 122, .2); }
.livePlayers b { color: #fff; }

/* ---------- resume strip ----------
   The page's real signature. A visitor with an account does not need a pitch;
   they need the farm they left. Hidden until /api/me answers, so it never
   flashes at someone who has no save. */
.resume {
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--cream-100);
  border: 1px solid var(--cream-300);
  box-shadow: 0 6px 18px rgba(27, 38, 23, .09);
}

.resume.on { display: grid; }

.resumeLabel {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -3px -2px 1px;
  padding: 0 2px 11px;
  border-bottom: 1px solid var(--cream-300);
  color: var(--field-700);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
}

.resumeLabel > span { color: var(--field-600); }

/* Pull a returning player's save into the cover. It becomes part of the hero
   hierarchy instead of looking like an unrelated notification below it. */
.hero .resume.on {
  position: relative;
  z-index: 4;
  margin: -76px 28px 0;
  padding: 17px 20px;
  background: rgba(251, 247, 236, .96);
  box-shadow: 0 12px 30px rgba(27, 38, 23, .2);
  backdrop-filter: blur(8px);
}

.resumeIcon {
  width: 52px; height: 52px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--cream-300);
  flex: 0 0 auto;
}

.resumeBody { flex: 1 1 auto; min-width: 0; }

.resumeBody strong {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  color: var(--ink-900);
}

.resumeBody span { font-size: 14px; color: var(--ink-500); }

.resumeGo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--field-700);
  color: var(--cream-50);
  font-weight: 700;
}

.resumeGo:hover { background: var(--field-600); }

/* ---------- section heads ---------- */
.band {
  position: relative;
  z-index: 0;
  padding: 72px 0 70px;
  margin-top: 44px;
}

.band::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background:
    radial-gradient(circle at 12% 12%, rgba(238, 176, 30, .13), transparent 28rem),
    radial-gradient(circle at 88% 76%, rgba(111, 138, 94, .18), transparent 32rem),
    var(--field-900);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}

.bandHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.sectionKicker,
.studioKicker {
  display: block;
  margin-bottom: 7px;
  color: var(--gold-500);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.bandHead h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--cream-50);
}

.bandHead p { margin: 0; color: var(--cream-300); font-size: 15px; }

/* ---------- game cards ---------- */
.gameGrid {
  display: grid;
  /* There are four games. Let that fact shape the shelf instead of asking
     auto-fill to invent a three-plus-one layout at ordinary desktop widths. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.gameCard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(243, 236, 218, .92);
  border: 1px solid var(--cream-300);
  box-shadow: 0 8px 24px rgba(27, 38, 23, .07);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  position: relative;
  animation: card-rise .7s both;
}

.gameCard:nth-child(2) { animation-delay: .07s; }
.gameCard:nth-child(3) { animation-delay: .14s; }
.gameCard:nth-child(4) { animation-delay: .21s; }

@keyframes card-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.gameCard:hover {
  transform: translateY(-8px);
  border-color: var(--gold-500);
  box-shadow: 0 22px 42px rgba(27, 38, 23, .2);
}

.gameArt { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--field-700); }
.gameArt::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(transparent, rgba(18, 27, 15, .2));
  pointer-events: none;
}
.gameArt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.gameCard:hover .gameArt img { transform: scale(1.045); }

.kind {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 29, 17, .82);
  color: var(--cream-100);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.kind.arcade { background: rgba(193, 73, 42, .9); }

.gameBody { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }

.gameBody h3 { margin: 0; font-size: 21px; color: var(--ink-900); }

.gameBody p { margin: 0; font-size: 15px; color: var(--ink-700); flex: 1 1 auto; }

/* How long a session takes is the thing a visitor most needs and least gets
   told. One of these is a minute, one is a month. */
.playtime {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
}

.playtime::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}

.gameGo {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--field-700);
  color: var(--cream-50);
  font-weight: 700;
  font-size: 15px;
  transition: background .16s, color .16s;
}

.gameCard:hover .gameGo { background: var(--gold-500); color: var(--field-900); }

/* ---------- studio band ---------- */
.studio {
  position: relative;
  overflow: hidden;
  margin: 62px 0 0;
  padding: 48px 50px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 0 100%, rgba(238, 176, 30, .17), transparent 24rem),
    var(--cream-100);
  color: var(--ink-700);
  border: 1px solid rgba(238, 176, 30, .45);
  box-shadow: 0 22px 55px rgba(7, 12, 6, .3);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 34px;
  align-items: center;
}

.studio::after {
  content: "✣";
  position: absolute;
  left: -18px;
  bottom: -74px;
  color: rgba(238, 176, 30, .12);
  font-size: 220px;
  line-height: 1;
  pointer-events: none;
}

.studio > * { position: relative; z-index: 1; }
.studio h2 { margin: 0 0 12px; font-size: clamp(24px, 2.8vw, 34px); color: var(--field-900); }
.studio p { margin: 0 0 14px; color: var(--ink-700); font-size: 16px; }
.studio p:last-child { margin-bottom: 0; }

.studioLinks { display: flex; flex-direction: column; gap: 10px; }

.studioLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--field-800);
  border: 1px solid var(--field-700);
  font-weight: 700;
  color: var(--cream-50);
}

.studioLink:hover { background: var(--field-700); border-color: var(--gold-500); transform: translateX(4px); }
.studioLink span { color: var(--gold-500); }

/* ---------- footer ---------- */
.footer {
  margin-top: 18px;
  padding: 54px 0 42px;
  color: var(--ink-700);
  font-size: 14px;
}

.footerTop {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) repeat(3, minmax(120px, auto));
  gap: 34px 40px;
  align-items: start;
}

.footerBrand p { margin: 12px 0 0; max-width: 32ch; color: var(--ink-500); line-height: 1.55; }

.footer img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.footerCol h3 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 800;
}

.footerCol a { display: block; padding: 5px 0; color: var(--ink-700); }
.footerCol a:hover { color: var(--ink-900); text-decoration: underline; }

.footerBase {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  align-items: center;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--cream-200);
  color: var(--ink-500);
  font-size: 13px;
}

.footerBase p { margin: 0; }
.footerBase a:hover { text-decoration: underline; }

.consentSettings {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.consentSettings:hover { text-decoration: underline; }

.langSwitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid rgba(247,210,113,.42);
  border-radius: 10px;
  color: var(--gold-300);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.langSwitch:hover { background: rgba(247,210,113,.1); border-color: var(--gold-500); }

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  /* Two balanced rows read as a deliberate library; three cards followed by
     one lonely card reads as an unfinished grid. */
  .gameGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .nav { gap: 18px; }
  .navPrimary { gap: 18px; }
  .navLinks { gap: 18px; }
  .navPrimary > a { font-size: 14px; }
  .heroStage { display: block; min-height: 0; }
  .heroMedia { position: relative; height: 260px; }
  .heroPanel {
    width: 100%;
    padding: 26px 24px 28px;
    background: var(--field-800);
  }
  .heroLogo { width: min(340px, 78%); }
  .hero .resume.on { margin: 14px 0 0; }
  .studio { grid-template-columns: 1fr; padding: 34px 30px; }
}

@media (max-width: 760px) {
  .footerTop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
  .footerBrand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 26px, 1240px); }

  /* Links wrap onto their own row instead of disappearing. The old sheet hid
     every link except the CTA below this width, which left phones — and
     Google's mobile-first crawler — looking at a site with no navigation. */
  .nav { flex-wrap: wrap; gap: 7px 14px; padding-block: 8px 10px; }
  .brand img { width: 40px; height: 40px; }
  .navLinks {
    order: 3;
    width: 100%;
    display: contents;
  }
  .navPrimary {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 2px;
  }
  .navPrimary > a { font-size: 12.5px; padding: 4px 0; }
  .navActions { margin-left: auto; gap: 7px; }
  .navCta { padding: 8px 12px; font-size: 13px; }
  .navAuth { max-width: 94px; padding: 8px 11px; font-size: 12px; }
  .brand b { font-size: 17px; }

  .hero { padding-top: 16px; }
  .heroMedia { height: clamp(190px, 54vw, 240px); object-position: 57% 50%; }
  .heroPanel { padding: 22px 18px 24px; gap: 14px; }
  .heroLogo { width: min(250px, 74%); }
  .heroTitle { font-size: 29px; }
  .heroText { font-size: 16px; text-shadow: none; }
  .heroActions { gap: 10px; }
  .btnPlay { padding: 13px 22px; font-size: 16px; }
  .btnGhost { padding: 12px 18px; font-size: 14px; }
  .tag { padding: 5px 11px; font-size: 12px; }
  .resume { grid-template-columns: auto minmax(0, 1fr); }
  .resumeGo { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .band { padding-top: 34px; }
  .bandHead { gap: 4px; margin-bottom: 14px; }
  .bandHead p { font-size: 13px; }
  .gameGrid { grid-template-columns: 1fr; gap: 16px; }
  .gameBody { padding: 16px 17px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Keyboard focus has to stay visible on both the dark bar and the cream page. */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- account: nav button, menu, sign-in card ----------
   Kept verbatim from the previous sheet. It is built entirely on the soy
   scale above and works unchanged on a cream page: a dark card floating
   over light is the right read for a modal.

   [hidden] must beat the flex/grid rules below: the page hides account UI with
   the attribute, and without this the sign-in card renders on every load. */
[hidden] {
  display: none !important;
}

.navAccount {
  position: relative;
}

.navAuth {
  max-width: 190px;
  overflow: hidden;
  padding: 11px 18px;
  border: 1px solid var(--soy-600);
  border-radius: 999px;
  background: transparent;
  color: var(--soy-200);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.navAuth:hover {
  border-color: var(--soy-400);
  color: var(--soy-50);
}

.navAuth.signedIn {
  border-color: rgba(230, 221, 180, 0.28);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.authMenu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid rgba(230, 221, 180, 0.14);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 22px 48px rgba(10, 10, 6, 0.5);
}

.authMenuHead {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(230, 221, 180, 0.1);
  margin-bottom: 6px;
}

.authMenuHead strong {
  font-size: 13px;
}

.authMenuHead small {
  color: var(--soy-400);
  font-size: 11px;
  word-break: break-all;
}

.authMenu a,
.authMenu button {
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--soy-200);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.authMenu a:hover,
.authMenu button:hover {
  background: rgba(230, 221, 180, 0.08);
  color: var(--soy-50);
}

.authMenu button {
  color: var(--soy-400);
}

.authOverlay {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 11, 7, 0.72);
  backdrop-filter: blur(6px);
}

.authCard {
  position: relative;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  padding: 34px 30px 26px;
  border: 1px solid rgba(230, 221, 180, 0.14);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(10, 10, 6, 0.55);
}

.authClose {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: transparent;
  color: var(--soy-500);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.authClose:hover {
  color: var(--soy-50);
}

.authCard h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.authSub {
  margin: 8px 0 22px;
  color: var(--soy-400);
  font-size: 13px;
  line-height: 1.6;
}

.authGoogle,
.authApple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px;
  border-radius: 12px;
  background: var(--soy-50);
  color: var(--soy-950);
  font-size: 14px;
  font-weight: 700;
}

.authApple { margin-top: 9px; background: #000; color: #fff; }

.authGoogle span,
.authApple span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--soy-950);
  color: var(--soy-50);
  font-size: 12px;
  font-weight: 800;
}

.authApple span { background: transparent; color: inherit; font: 20px/1 -apple-system, BlinkMacSystemFont, sans-serif; }

.authOr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--soy-600);
  font-size: 11px;
}

.authOr::before,
.authOr::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(230, 221, 180, 0.12);
}

#authForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#authForm input {
  padding: 13px 15px;
  border: 1px solid rgba(230, 221, 180, 0.16);
  border-radius: 12px;
  background: rgba(18, 17, 11, 0.45);
  color: var(--soy-50);
  font: inherit;
  font-size: 14px;
}

#authForm input::placeholder {
  color: var(--soy-600);
}

#authForm input:focus {
  outline: 0;
  border-color: var(--soy-400);
}

.authErr {
  margin: 2px 0 0;
  color: #d98b7a;
  font-size: 12px;
}

.authPrimary {
  margin-top: 4px;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--soy-100);
  color: var(--soy-950);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 180ms ease;
}

.authPrimary:hover {
  background: var(--soy-50);
}

.authPrimary:disabled {
  opacity: 0.6;
  cursor: progress;
}

.authSwap {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 0;
  color: var(--soy-500);
  font-size: 13px;
}

.authSwap button {
  border: 0;
  background: transparent;
  color: var(--soy-100);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.authNote {
  margin: 14px 0 0;
  color: var(--soy-600);
  font-size: 11px;
  text-align: center;
}
.authConsent { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 4px; padding: 10px 12px; border: 1px solid #dce8dc; border-radius: 12px; background: #f5f9f3; text-align: left; font-size: 11px; line-height: 1.45; color: #5d6961; }
.authConsent input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: #3f9a4c; cursor: pointer; }
.authConsent a { color: #317d3d; font-weight: 750; text-decoration: none; }
.authConsent a:hover { text-decoration: underline; }
.authProviderLegal { margin: -2px 0 2px; color: #87918a; font-size: 10px; line-height: 1.35; text-align: center; }