/* KOE Games — one stylesheet for the whole site.
   Dark, gold, and out of the way. The games are pixel art; the site around them should read
   as a quiet frame rather than compete with them.

   Parallax is driven by a single --scroll custom property that site.js writes once a frame.
   Each layer reads it at its own multiplier, so the browser composites transforms instead of
   running eight separate scroll handlers. */

:root {
  --ink: #0b0d10;
  --ink-2: #12151a;
  --ink-3: #191d24;
  --line: #262b34;
  --text: #e8e6e1;
  --text-dim: #9aa1ac;
  --gold: #f5cd1b;
  --gold-dim: #b8981a;
  --sea: #2a7a96;
  --sea-deep: #0e2f3e;
  --green: #6fc46f;
  --red: #e2765f;
  --radius: 10px;
  --wrap: 1080px;
  --scroll: 0px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 16px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }

/* ---------------------------------------------------------------- header */

header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 13, 16, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
html.scrolled header.site { background: rgba(11, 13, 16, 0.94); border-bottom-color: var(--line); }

header.site .wrap { display: flex; align-items: center; gap: 26px; height: 66px; }

.brand { display: flex; align-items: center; flex: none; }
.brand:hover { text-decoration: none; }
.brand img {
  /* 30px, not 34: the badge is a landscape mark with a heavy keyline, so it carries more
     visual weight per pixel of height than the old wordmark did. */
  height: 30px; width: auto; display: block;
  transition: opacity .2s, filter .2s;
  filter: drop-shadow(0 0 10px rgba(245, 205, 27, .12));
}
.brand:hover img { filter: drop-shadow(0 0 14px rgba(245, 205, 27, .35)); }

/* the mark, front and centre on the landing page */
.hero.centred { text-align: center; }
.hero.centred h1 { font-size: clamp(26px, 3.6vw, 38px); color: var(--text-dim); font-weight: 700; }
.hero.centred h1 span { color: var(--gold); }
.hero.centred .lede { margin-left: auto; margin-right: auto; }
.hero.centred .cta { justify-content: center; }
.logo-hero {
  display: block; margin: 0 auto 30px; width: min(560px, 88vw); height: auto;
  /* Lifts white-on-dark off the background without touching the artwork itself. */
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 60px rgba(245, 205, 27, .10));
}
/* The studio badge is a chunky landscape mark with its own black keyline, so it neither
   needs the white-on-dark glow the old wordmark did nor wants the wordmark's full width —
   at 560px the gamepad reads as furniture rather than a logo. */
.logo-hero.badge {
  width: min(420px, 76vw);
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55));
}

/* The game's sign is a square painting rather than a wordmark, so it wants less width. */
.logo-hero.game {
  width: min(400px, 74vw); margin-bottom: 26px;
  image-rendering: pixelated;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .55));
}

nav.site { display: flex; gap: 8px; margin-left: auto; align-items: center; }
nav.site > a, .games > button {
  color: var(--text-dim); font: inherit; font-size: 14px; font-weight: 600;
  background: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 8px;
}
nav.site > a:hover, .games > button:hover { color: var(--text); text-decoration: none; background: var(--ink-3); }
nav.site > a.on { color: var(--gold); }

/* the games dropdown */
.games { position: relative; }
.games > button::after {
  content: "▾"; margin-left: 6px; font-size: 11px; display: inline-block; transition: transform .2s;
}
.games > button[aria-expanded="true"]::after { transform: rotate(180deg); }
.games-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 7px; box-shadow: 0 18px 40px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.games-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.games-menu a, .games-menu span.soon {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 11px; border-radius: 8px; color: var(--text); font-size: 14px;
}
.games-menu a:hover { background: var(--ink-3); text-decoration: none; }
.games-menu .ico { font-size: 19px; line-height: 1.2; }
.games-menu img.ico { width: 30px; height: 30px; border-radius: 7px;
  image-rendering: pixelated; flex: none; }
.games-menu .t { font-weight: 700; display: block; }
.games-menu .d { color: var(--text-dim); font-size: 12.5px; display: block; }
.games-menu span.soon { color: var(--text-dim); }
.games-menu span.soon .t { color: var(--text-dim); }
.games-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }

.discord {
  background: #5865f2; color: #fff !important; padding: 9px 15px; border-radius: 8px;
  font-size: 14px; font-weight: 700; margin-left: 6px;
}
.discord:hover { background: #4a56d6; text-decoration: none !important; }

/* ---------------------------------------------------------------- parallax stage */

.stage { position: relative; overflow: hidden; isolation: isolate; }
.stage > .layer { position: absolute; inset: -10% -5% -20%; pointer-events: none; z-index: 0; }

/* KOE landing: a deep field with drifting gold motes. */
.stage.studio { background:
  radial-gradient(1200px 600px at 70% -10%, #1d2430 0%, transparent 70%),
  radial-gradient(900px 500px at 10% 20%, #171b24 0%, transparent 70%),
  var(--ink);
}
.layer.motes {
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(245,205,27,.55) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 12%, rgba(245,205,27,.35) 50%, transparent 51%),
    radial-gradient(3px 3px at 42% 66%, rgba(245,205,27,.25) 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 74%, rgba(245,205,27,.40) 50%, transparent 51%),
    radial-gradient(2px 2px at 26% 88%, rgba(245,205,27,.30) 50%, transparent 51%),
    radial-gradient(2px 2px at 62% 38%, rgba(255,255,255,.18) 50%, transparent 51%),
    radial-gradient(2px 2px at 6% 54%, rgba(255,255,255,.14) 50%, transparent 51%);
  transform: translate3d(0, calc(var(--scroll) * -.18), 0);
}
.layer.glow {
  background: radial-gradient(700px 340px at 50% 32%, rgba(245,205,27,.10), transparent 68%);
  transform: translate3d(0, calc(var(--scroll) * -.30), 0);
}
.layer.grid {
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(720px 420px at 50% 30%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(720px 420px at 50% 30%, #000 0%, transparent 76%);
  transform: translate3d(0, calc(var(--scroll) * -.08), 0);
}

/* Hook & Harbor: sky, sun, distant islands, and two bands of sea. */
.stage.sea { background: linear-gradient(#0d2634 0%, #123a4c 42%, var(--sea-deep) 100%); }
.layer.clouds {
  background-image:
    radial-gradient(46px 13px at 14% 18%, rgba(255,255,255,.09) 60%, transparent 61%),
    radial-gradient(70px 16px at 62% 12%, rgba(255,255,255,.07) 60%, transparent 61%),
    radial-gradient(52px 14px at 86% 26%, rgba(255,255,255,.06) 60%, transparent 61%),
    radial-gradient(40px 11px at 34% 32%, rgba(255,255,255,.05) 60%, transparent 61%);
  transform: translate3d(calc(var(--scroll) * .06), calc(var(--scroll) * -.12), 0);
}
.layer.sun {
  background: radial-gradient(320px 320px at 78% 14%, rgba(245,205,27,.16), transparent 66%);
  transform: translate3d(0, calc(var(--scroll) * -.22), 0);
}
.layer.islands {
  background-image:
    radial-gradient(150px 42px at 18% 62%, rgba(20,52,44,.85) 60%, transparent 61%),
    radial-gradient(220px 54px at 74% 66%, rgba(18,46,40,.8) 60%, transparent 61%),
    radial-gradient(96px 30px at 46% 60%, rgba(22,56,48,.7) 60%, transparent 61%);
  transform: translate3d(0, calc(var(--scroll) * -.34), 0);
}
/* Two wave bands, offset, so the water reads as having depth rather than as a gradient. */
.layer.waves {
  top: auto; bottom: -12%; height: 62%;
  /* Horizontal crests, dashed along their length. A 90deg repeating gradient on its own
     draws vertical stripes, which is what this was doing — it read as a picket fence in the
     water. The 0deg gradient makes the lines lie flat; the 90deg one cuts them into dashes. */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 17px);
  background-position: 0 0, 0 9px;
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 40%);
  -webkit-mask-image: linear-gradient(transparent, #000 40%);
  transform: translate3d(0, calc(var(--scroll) * -.5), 0);
}

/* ---------------------------------------------------------------- hero */

.hero { padding: 110px 0 92px; position: relative; }
.hero .eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 999px;
  padding: 5px 13px; margin-bottom: 20px;
}
.hero h1 { margin: 0 0 16px; font-weight: 800; font-size: clamp(40px, 7.5vw, 74px); line-height: 1.02; letter-spacing: -.02em; }
.hero h1 span { color: var(--gold); }
.hero p.lede { margin: 0 0 32px; max-width: 56ch; color: var(--text-dim); font-size: 18px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 13px 24px; border-radius: 9px; font-weight: 700;
  font-size: 15px; border: 1px solid var(--line); color: var(--text);
  transition: transform .15s, border-color .15s, background .15s;
}
.btn:hover { border-color: var(--gold); text-decoration: none; transform: translateY(-2px); }
.btn.primary { background: var(--gold); color: #17140a; border-color: var(--gold); }
.btn.primary:hover { background: #ffd93a; }

/* ---------------------------------------------------------------- sections */

section { padding: 76px 0; position: relative; }
section.ruled { border-top: 1px solid var(--line); }
section > .wrap > h2 {
  margin: 0 0 8px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
section > .wrap > .lede { margin: 0 0 30px; color: var(--text-dim); max-width: 62ch; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; transition: transform .18s, border-color .18s;
}
.card:hover { transform: translateY(-3px); border-color: #333a46; }
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { margin: 0; color: var(--text-dim); font-size: 15px; }

/* the big game card on the landing page */
.game-card {
  display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: center;
  background: linear-gradient(120deg, #10222c, var(--ink-2) 62%);
  border: 1px solid var(--line); border-radius: 16px; padding: 26px; overflow: hidden;
}
.game-card:hover { text-decoration: none; }
.game-card .art {
  height: 168px; border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(#123a4c, #0e2f3e);
  display: grid; place-items: center; padding: 12px;
}
.game-card .art img {
  max-width: 100%; max-height: 100%; width: auto; position: relative; z-index: 1;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
  transition: transform .2s;
}
.game-card:hover .art img { transform: scale(1.04); }
.game-card .art::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 10px, transparent 10px 28px);
}
.game-card h3 { margin: 0 0 6px; font-size: 24px; color: var(--text); }
.game-card p { margin: 0 0 14px; color: var(--text-dim); }
.game-card .tags { display: flex; gap: 7px; flex-wrap: wrap; }
.game-card .tags span {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--ink-3); border: 1px solid var(--line); color: var(--text-dim);
}

/* Reveal on scroll.
   Gated behind html.js-reveal, which site.js sets the moment it runs. Content is VISIBLE by
   default and only hidden once the script that will show it again is known to be alive — the
   other way round, any failure (blocked script, a throw earlier in the file, a browser that
   throttles transitions in a background tab) leaves a blank page. */
html.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
html.js-reveal [data-reveal].in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- wiki */

.wiki { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.panel { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); }
.panel .head { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel .body { padding: 18px; }

#search {
  width: 100%; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--ink-3); color: var(--text); font: inherit; font-size: 15px;
}
#search:focus { outline: none; border-color: var(--gold); }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: none;
  color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.chip:hover { color: var(--text); }
.chip.on { background: var(--gold); border-color: var(--gold); color: #17140a; }

#list { max-height: 62vh; overflow-y: auto; }
.row {
  display: flex; align-items: baseline; gap: 9px; width: 100%; padding: 9px 16px;
  border: 0; border-left: 3px solid transparent; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.row:hover { background: var(--ink-3); }
.row.on { background: var(--ink-3); border-left-color: var(--gold); }
.row .tag { margin-left: auto; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.row.dim .name { color: var(--text-dim); }

.group { padding: 14px 16px 5px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dim); }

#detail h2 { margin: 0 0 4px; font-size: 26px; }
.sub { color: var(--text-dim); font-size: 14px; margin: 0 0 20px; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.stat { background: var(--ink-3); border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; font-size: 13px; }
.stat b { display: block; font-size: 17px; color: var(--gold); font-weight: 700; }

h4.sec { margin: 24px 0 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.source {
  background: var(--ink-3); border: 1px solid var(--line); border-left: 3px solid var(--sea);
  border-radius: 6px; padding: 11px 14px; margin-bottom: 8px;
}
.source.warn { border-left-color: var(--red); }
.source b { font-weight: 700; }
.source span { display: block; color: var(--text-dim); font-size: 14px; }

.tree { list-style: none; margin: 0; padding: 0; }
.tree ul { list-style: none; margin: 0; padding-left: 22px; border-left: 1px solid var(--line); }
.tree li { margin: 3px 0; }
.node {
  border: 0; background: none; color: var(--text); font: inherit; font-size: 14.5px;
  cursor: pointer; padding: 4px 7px; border-radius: 6px; text-align: left;
}
.node:hover { background: var(--ink-3); color: var(--gold); }
.node .qty { color: var(--gold); font-weight: 700; }
.node .raw { color: var(--text-dim); font-size: 12.5px; }
.node .leaf { color: var(--green); font-size: 12.5px; }

.chain { color: var(--text-dim); font-size: 14px; margin: 0 0 14px; }
.chain b { color: var(--text); }

footer.site { border-top: 1px solid var(--line); padding: 38px 0; color: var(--text-dim); font-size: 14px; background: var(--ink); position: relative; z-index: 2; }
.note { border: 1px dashed var(--gold-dim); border-radius: 8px; padding: 12px 15px; color: var(--text-dim); font-size: 14px; margin: 20px 0 0; }
.note b { color: var(--gold); }

@media (max-width: 900px) {
  .game-card { grid-template-columns: 1fr; }
  .wiki { grid-template-columns: 1fr; }
  #list { max-height: 44vh; }
  nav.site > a.hide-sm { display: none; }
  .hero { padding: 74px 0 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage > .layer { transform: none !important; }
  html.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card:hover, .btn:hover { transform: none; }
}

/* ---------------------------------------------------------------- the Almanac
   A shelf of what there is to find. Sprites are the page — every one is the game's own
   texture, exported by tools/export_sprites.py — so the layout gets out of their way and
   the only chrome is what tells you which shelf you are looking at. */

.shelf-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.shelf-nav button {
  background: var(--ink-3); border: 1px solid var(--line); color: var(--text-dim);
  padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: 14px;
  font-family: inherit; transition: border-color .12s ease, color .12s ease;
}
.shelf-nav button:hover { color: var(--text); border-color: #333a46; }
.shelf-nav button.on { background: var(--gold); border-color: var(--gold); color: #17140a; }
.shelf-nav .n { opacity: .65; margin-left: 6px; font-variant-numeric: tabular-nums; }

.shelf { margin: 0 0 40px; }
.shelf > h3 {
  margin: 0 0 4px; font-size: 15px; color: var(--gold);
  display: flex; align-items: baseline; gap: 10px;
}
.shelf > h3 .of { color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.shelf > p.blurb { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; max-width: 62ch; }

.finds {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.find {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 8px 10px; text-align: center; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.find:hover { transform: translateY(-2px); border-color: #333a46; }
.find img {
  width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 8px;
  image-rendering: pixelated;
}
.find .nm {
  display: block; font-size: 12px; line-height: 1.35; color: var(--text);
  overflow-wrap: anywhere;
}
.find .val {
  display: block; margin-top: 4px; font-size: 11px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* No sprite in the atlases — say so rather than leaving a hole that reads as a broken image. */
.find .gap {
  width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 8px;
  border: 1px dashed var(--line); display: grid; place-items: center;
  color: var(--text-dim); font-size: 18px;
}

/* The game's own rarity colours, so a rare here is the rare you saw in the water. */
.find.r-junk      { border-color: #4a4a3f; }
.find.r-common    { border-color: #17414a; }
.find.r-uncommon  { border-color: #2f5730; }
.find.r-rare      { border-color: #6a6230; }
.find.r-legendary { border-color: #7a2244; background: linear-gradient(180deg,#231018,var(--ink-2)); }

.find .rar {
  display: inline-block; margin-top: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #0d0f12;
}
.rar.junk { background: #9c9c82; }
.rar.common { background: #12adc2; }
.rar.uncommon { background: #5cb361; }
.rar.rare { background: #f8e375; }
.rar.legendary { background: #c92463; color: #fff; }

.unreachable { opacity: .45; }
.shelf-note {
  border-left: 3px solid var(--red); background: rgba(226,118,95,.07);
  padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 0 0 22px;
  color: var(--text-dim); font-size: 14px;
}

/* ================================================================ 2026 rework
   The complaint was fair: every page was <section><wrap><h2><p>, so they all read the same
   whatever they were about. What follows gives a page a SHAPE — a masthead that states what
   this page is, a sub-nav that shows where you are inside a game, and section types that
   look different because they do different jobs. */

/* ---------------------------------------------------------------- game sub-nav
   The game's own UI icons, at the top of every page belonging to that game. Sticky, because
   the Almanac and the guide are long and getting back should never mean scrolling up. */

.gamebar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11,13,16,.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.gamebar .wrap { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-block: 8px; }
.gamebar .wrap::-webkit-scrollbar { display: none; }

.gamebar .title {
  font-size: 13px; color: var(--text); white-space: nowrap;
  padding-right: 14px; margin-right: 6px; border-right: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.gamebar .title img { width: 20px; height: 20px; image-rendering: pixelated; }

.gamebar a {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 13px; border-radius: 999px; font-size: 13px;
  color: var(--text-dim); text-decoration: none; border: 1px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.gamebar a img { width: 18px; height: 18px; image-rendering: pixelated; opacity: .8; }
.gamebar a:hover { color: var(--text); background: var(--ink-3); text-decoration: none; }
.gamebar a:hover img { opacity: 1; }
.gamebar a.on { color: var(--gold); border-color: #3a3524; background: rgba(245,205,27,.08); }
.gamebar a.on img { opacity: 1; }

@media (max-width: 640px) {
  .gamebar .title { display: none; }
  .gamebar a span { display: none; }
  .gamebar a { padding: 9px 11px; }
  .gamebar a img { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------- page masthead
   States what a page IS before its content starts. The eyebrow, the size of the title and
   the rule underneath are what stop six pages reading as one. */

.masthead { padding: 54px 0 34px; border-bottom: 1px solid var(--line); position: relative; }
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent 55%);
}
.masthead .eyebrow {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 12px;
}
.masthead h1 {
  margin: 0 0 14px; font-size: clamp(30px, 5vw, 46px); line-height: 1.08;
  letter-spacing: -.02em; text-wrap: balance;
}
.masthead p { margin: 0; color: var(--text-dim); font-size: 17px; max-width: 62ch; }
.masthead .meta {
  margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px;
  color: var(--text-dim); font-size: 13px;
}
.masthead .meta b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- stat strip */

.stats {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); margin: 0 0 40px;
}
.stats div { background: var(--ink-2); padding: 18px 16px; }
.stats .k {
  display: block; font-size: 26px; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.stats .l { font-size: 12px; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; }

/* ---------------------------------------------------------------- feature rows
   Alternating text/art, so the hub is not six identical cards in a row. */

.feature { display: grid; gap: 34px; align-items: center; grid-template-columns: 1fr 1fr; padding: 30px 0; }
.feature:nth-child(even) .feature-art { order: -1; }
.feature h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--text-dim); }
.feature .tradetag {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.feature .tradetag img { width: 16px; height: 16px; image-rendering: pixelated; }
.feature-art {
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line); border-radius: 14px; min-height: 190px;
  display: grid; place-items: center; padding: 22px; position: relative; overflow: hidden;
}
.feature-art .sprites { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.feature-art img.s { width: 46px; height: 46px; image-rendering: pixelated; object-fit: contain; }
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: 20px; }
  .feature:nth-child(even) .feature-art { order: 0; }
}

/* ---------------------------------------------------------------- logos in the masthead
   The badge in the header is navigation; THIS is the game's own mark, at a size that says
   which product you are looking at. Pixel-rendered, because it is pixel art and a browser's
   smooth scaling turns it to mush. */

.masthead .wrap.withlogo {
  display: grid; gap: 34px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
}
.masthead .logo {
  width: 100%; max-width: 300px; height: auto; display: block;
  image-rendering: pixelated; justify-self: end;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.5));
}
/* The studio's actual logo is the controller badge — smooth art, so no pixelated
   sampling, and it carries a black outline of its own so the drop shadow can be softer. */
.masthead .logo.badge { image-rendering: auto; max-width: 280px;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); }

@media (max-width: 820px) {
  .masthead .wrap.withlogo { grid-template-columns: 1fr; gap: 24px; }
  .masthead .logo { justify-self: start; max-width: 210px; order: -1; }
}

/* ---------------------------------------------------------------- studio home
   The same masthead language as a game page, then a shelf of games rather than a wall of
   prose. One game today; the row shape is what makes the second one arrive without a
   redesign. */

.gamerow {
  display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 26px; align-items: center;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  text-decoration: none; color: inherit; margin: 0 0 16px;
  transition: transform .14s ease, border-color .14s ease;
}
.gamerow:hover { transform: translateY(-3px); border-color: var(--gold-dim); text-decoration: none; }
.gamerow img.cover {
  width: 152px; height: 152px; border-radius: 14px; image-rendering: pixelated;
  border: 1px solid var(--line); display: block;
}
.gamerow h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.01em; }
.gamerow p { margin: 0 0 14px; color: var(--text-dim); }
.gamerow .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gamerow .chip {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim);
}
.gamerow .chip.live { border-color: var(--gold-dim); color: var(--gold); }
@media (max-width: 640px) {
  .gamerow { grid-template-columns: 1fr; }
  .gamerow img.cover { width: 116px; height: 116px; }
}


/* The App Store badge in the masthead. Apple's own artwork at Apple's minimum size,
   with clear space per their guidelines; the drop shadow matches the logo's. */
.cta-row { margin-top: 18px; }
.store-badge img { height: 54px; width: auto; display: inline-block;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.4)); }
@media (max-width: 820px) { .store-badge img { height: 48px; } }