/* Arcade — "Marquee"
   ===========================================================================
   Direction, and why.

   An arcade is a dark room full of dark cabinets, and the only thing that
   tells you which machine is worth walking to is the lit panel above its
   screen. So the portal is a dark violet-ink room, and light is the entire
   design language: a warm marquee lamp that belongs to whichever game you are
   pointing at, and nothing else. Hover a card and its marquee switches on.
   Move away and it goes dark again. That is the signature, and it is the only
   place any boldness is spent — everything around it stays quiet.

   Deliberately NOT the near-black page with one acid-green accent that every
   games site (and every AI design tool asked for a games site) produces. The
   ground is violet-leaning ink rather than black, and the accent is a warm
   incandescent amber, because a real arcade is lit by bulbs, not by LEDs.
   The cool blue appears exactly twice — a NEW badge and the live/playing
   state — so that when it does appear it means something.

   TYPE CARRIES A RULE:
     System sans = the portal speaking. Titles, taglines, descriptions, buttons.
     System mono = the cabinet's own readout. Scores, play counts, ratings,
                   category labels, key bindings, badges, ad slot sizes.
   Mono is not decoration: it marks everything the machine reports about
   itself, the way a high-score strip does. Both faces are the reader's own
   system faces — nothing is downloaded, which keeps a page of thumbnails
   fast, and a scoreboard set in the machine's own mono is the honest form
   anyway.

   Zero dependencies, zero build step. One stylesheet, served by Caddy.
   =========================================================================== */

:root {
  /* The room */
  --room:      #121017;   /* violet-leaning ink, not black */
  --room-2:    #17141F;   /* the band a rail sits in */
  --panel:     #1B1724;   /* a cabinet body */
  --panel-2:   #241F30;   /* raised: inputs, chips */
  --hair:      #2E2839;
  --hair-soft: #241F2D;

  /* Light spilling off it */
  --text:      #F3EFE9;   /* warm white — lit paper, not #FFF */
  --quiet:     #9E95AC;
  --quieter:   #6F6781;

  /* The marquee lamp. The one accent. */
  --lamp:      #FFB43D;
  --lamp-hot:  #FF8A3D;
  --lamp-dim:  #6B4A16;
  --glow:      rgba(255, 180, 61, .28);

  /* Cool light. Used ONLY for "new" and for "this is running". */
  --cool:      #7FD4FF;
  --cool-dim:  #1B3C4E;

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --max: 92rem;
  --pad: clamp(1rem, 3.2vw, 2.25rem);
  --gap: clamp(.6rem, 1.3vw, 1rem);
  --radius: 12px;
  --radius-sm: 8px;

  /* Everything that reacts to a pointer uses this. Fast enough that the light
     feels like a switch, not an animation. */
  --snap: 110ms cubic-bezier(.2, .7, .3, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--room);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* A faint warm wash at the very top of the page: the room is lit from
     above by the marquees, before you have touched anything. */
  background-image: radial-gradient(120% 40rem at 50% -14rem, rgba(255, 180, 61, .10), transparent 70%);
  background-repeat: no-repeat;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--lamp);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lamp); color: #1A1206; padding: .7rem 1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The machine's readout ────────────────────────────────────────────────
   Every use of mono on this site goes through .readout or one of the classes
   below it. If a new label is not something the machine reports about
   itself, it should be sans. */
.readout {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--quiet);
}
.readout--tight { letter-spacing: .04em; text-transform: none; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(18, 16, 23, .88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair-soft);
}
.topbar__row {
  display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.4rem);
  /* padding-BLOCK, not the shorthand: these elements also carry .wrap, whose
     horizontal gutter a `padding: x 0` would silently reset to zero. That bug
     shipped once and pushed the logo, the chips and the whole footer flush
     against the left edge of the window. */
  padding-block: .7rem;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem; }
.brand__mk {
  width: 30px; height: 30px; border-radius: 7px; flex: none;
  background: var(--panel-2); border: 1px solid var(--hair);
  position: relative; overflow: hidden;
}
/* The logo is a cabinet seen head-on: dark box, lit marquee across the top. */
.brand__mk::before {
  content: ''; position: absolute; inset: 3px 3px auto 3px; height: 5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lamp-hot), var(--lamp));
}
.brand__mk::after {
  content: ''; position: absolute; inset: 12px 6px 5px 6px; border-radius: 2px;
  background: var(--room);
}
.brand b { font-weight: 700; }
/* .brand__word, never `.brand span` — the logo mark is a span too, and a
   blanket rule here once hid the mark along with the word. */
.brand__word { color: var(--quiet); font-weight: 600; }
@media (max-width: 22rem) { .brand__word { display: none; } }

/* Capped, or at 1440 the field is a thousand pixels of empty box and reads as
   the most important thing on the page. It is not — the games are. */
.search { flex: 1 1 auto; min-width: 0; max-width: 30rem; position: relative; display: flex; }
.search input {
  width: 100%; font: inherit; font-size: .93rem; color: var(--text);
  background: var(--panel); border: 1px solid var(--hair); border-radius: 999px;
  padding: .55rem 1rem .55rem 2.3rem;
  transition: border-color var(--snap), background var(--snap);
}
.search input::placeholder { color: var(--quieter); }
.search input:focus { outline: none; border-color: var(--lamp); background: var(--panel-2); }
.search input:focus-visible { outline: none; }
.search__icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--quieter); pointer-events: none; }
.search button { position: absolute; right: 0; top: 0; opacity: 0; width: 1px; height: 1px; }

/* Category nav: a scrolling row of chips. Real links, so it works with JS
   off and the browser can find them. */
.catnav { border-bottom: 1px solid var(--hair-soft); }
.catnav__row {
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  padding-block: .5rem .6rem;
}
.catnav__row::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--quiet); background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: .34rem .8rem; white-space: nowrap;
  transition: color var(--snap), background var(--snap), border-color var(--snap);
}
.chip:hover { color: var(--text); background: var(--panel); border-color: var(--hair); }
.chip[aria-current='page'] { color: #1A1206; background: var(--lamp); border-color: var(--lamp); font-weight: 700; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 650; font-size: .95rem; cursor: pointer;
  padding: .7rem 1.25rem; border-radius: 999px; border: 1px solid var(--hair);
  background: var(--panel-2); color: var(--text);
  transition: transform var(--snap), background var(--snap), border-color var(--snap), box-shadow var(--snap);
}
.btn:hover { background: var(--panel); border-color: var(--quieter); }
.btn:active { transform: translateY(1px); }
.btn--play {
  background: linear-gradient(180deg, var(--lamp), var(--lamp-hot));
  color: #1A1206; border-color: transparent; font-weight: 800; letter-spacing: -.01em;
  padding: .85rem 1.7rem; font-size: 1.02rem;
  box-shadow: 0 0 0 0 var(--glow);
}
.btn--play:hover { background: linear-gradient(180deg, #FFC868, var(--lamp)); box-shadow: 0 6px 30px -6px var(--glow); }
.btn--icon { padding: .55rem .8rem; font-size: .85rem; }
/* Sits at the far right of the header. An arcade should let you walk up to a
   machine you did not choose. */
/* An inline SVG die, not the ⚄ character: U+2684 is missing from plenty of
   system fonts and renders as tofu, which is worse than no icon at all. */
.btn--random { flex: none; margin-left: auto; gap: .45rem; }
.btn--random:hover { color: var(--lamp); border-color: var(--lamp-dim); }

/* ── Section heads ───────────────────────────────────────────────────────── */
.sechead { display: flex; align-items: baseline; gap: .9rem; margin: 0 0 .85rem; }
.sechead h2 {
  font-size: clamp(1.05rem, 2.1vw, 1.35rem); font-weight: 700; letter-spacing: -.02em;
  margin: 0; line-height: 1.2;
}
.sechead p { margin: 0; color: var(--quieter); font-size: .88rem; }
.sechead__tail { margin-left: auto; flex: none; display: flex; align-items: center; gap: .8rem; }
.sechead__more { flex: none; }
.sechead__more a { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }
.sechead__more a:hover { color: var(--lamp); }

section.band { padding: clamp(1.5rem, 3.4vw, 2.6rem) 0 0; }
section.band:last-of-type { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* ── The card. A cabinet in a dark room. ─────────────────────────────────── */
.card { display: block; position: relative; }

.card__art {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hair);
  transition: border-color var(--snap), transform var(--snap), box-shadow var(--snap);
}
.card__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 220ms cubic-bezier(.2, .7, .3, 1), filter var(--snap);
  filter: saturate(.88) brightness(.86);
}

/* THE MARQUEE. Dark until the pointer arrives, then the lamp above the
   screen switches on and spills a little light down over the art. */
.card__art::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--lamp-hot), var(--lamp), var(--lamp-hot));
  opacity: 0; transition: opacity var(--snap);
}
.card__art::after {
  content: ''; position: absolute; left: -20%; right: -20%; top: -60%; height: 120%; z-index: 1;
  background: radial-gradient(60% 100% at 50% 100%, var(--glow), transparent 70%);
  opacity: 0; transition: opacity var(--snap);
  pointer-events: none;
}
.card:hover .card__art,
.card:focus-visible .card__art {
  border-color: var(--lamp-dim);
  transform: translateY(-2px);
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, .9), 0 0 26px -12px var(--glow);
}
.card:hover .card__art::before,
.card:focus-visible .card__art::before,
.card:hover .card__art::after,
.card:focus-visible .card__art::after { opacity: 1; }
.card:hover .card__art img,
.card:focus-visible .card__art img { transform: scale(1.045); filter: saturate(1) brightness(1); }

.card__meta { padding: .5rem .15rem 0; }
.card__title {
  font-size: .93rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.25;
  margin: 0; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--snap);
}
.card:hover .card__title { color: var(--lamp); }
.card__sub {
  display: flex; align-items: center; gap: .45rem; margin-top: .15rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--quieter);
  overflow: hidden; white-space: nowrap;
}
.card__sub .dot { opacity: .5; }

/* Badges sit on the art. Only three exist, and each means one thing. */
.badge {
  position: absolute; z-index: 3; top: .45rem; left: .45rem;
  font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 5px; backdrop-filter: blur(6px);
}
.badge--new  { background: var(--cool-dim); color: var(--cool); box-shadow: inset 0 0 0 1px rgba(127, 212, 255, .35); }
.badge--hot  { background: rgba(107, 74, 22, .8); color: var(--lamp); box-shadow: inset 0 0 0 1px rgba(255, 180, 61, .35); }
.badge--soon { background: rgba(30, 26, 38, .85); color: var(--quiet); box-shadow: inset 0 0 0 1px var(--hair); }

/* A game that cannot be played yet reads as an unlit cabinet. */
.card--soon .card__art img { filter: saturate(.25) brightness(.55); }
.card--soon:hover .card__art img { filter: saturate(.4) brightness(.7); transform: none; }

/* ── Rails: a row of cabinets you walk past ──────────────────────────────── */
.rail { position: relative; }
.rail__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(9.5rem, 20vw, 14.5rem);
  gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: var(--pad);
  scrollbar-width: none;
  /* Bleed to the viewport edge so the row reads as continuing past the frame,
     then pad it back to the content gutter. */
  margin: 0 calc(var(--pad) * -1); padding: .35rem var(--pad) .9rem;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }

/* Arrows only where there is a pointer that cannot swipe. On touch, dragging
   the row is the gesture and a pair of buttons is clutter. */
.rail__nav { display: none; gap: .3rem; }
@media (hover: hover) and (min-width: 60rem) { .rail__nav { display: flex; } }
.rail__btn {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--hair); color: var(--quiet); cursor: pointer;
  font-size: .8rem; transition: color var(--snap), border-color var(--snap), background var(--snap);
}
.rail__btn:hover:not(:disabled) { color: var(--lamp); border-color: var(--lamp-dim); background: var(--panel-2); }
.rail__btn:disabled { opacity: .3; cursor: default; }

/* ── Grid ────────────────────────────────────────────────────────────────── */
.grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(clamp(8.5rem, 15vw, 13rem), 1fr));
}

/* ── Hero: the featured cabinet, lit ─────────────────────────────────────── */
.hero {
  position: relative; margin-top: clamp(1rem, 2.4vw, 1.8rem);
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--panel);
  isolation: isolate;
}
.hero__art { position: absolute; inset: 0; z-index: -2; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.72); }
.hero::before {
  /* The marquee light bar. On the hero it is always on — this is the machine
     that is already running its attract mode. */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--lamp-hot), var(--lamp) 40%, var(--lamp) 60%, var(--lamp-hot));
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(75% 120% at 12% 0%, var(--glow), transparent 58%),
    linear-gradient(100deg, rgba(18, 16, 23, .95) 0%, rgba(18, 16, 23, .82) 42%, rgba(18, 16, 23, .18) 100%);
}
.hero__body {
  position: relative; z-index: 2;
  padding: clamp(1.5rem, 4vw, 3.4rem) clamp(1.1rem, 3.5vw, 3rem);
  max-width: 40rem;
}
.hero__eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; }
.hero h1 {
  font-size: clamp(1.9rem, 5.2vw, 3.1rem); line-height: 1.02; letter-spacing: -.04em;
  font-weight: 800; margin: 0 0 .55rem; text-wrap: balance;
}
.hero__tag { font-size: clamp(1rem, 1.9vw, 1.18rem); color: var(--quiet); margin: 0 0 1.25rem; text-wrap: balance; }
.hero__cta { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }

/* A bulb that pulses like the lamp warming up. One animation on the whole
   site, on the one element that is meant to be attracting you. */
.bulb {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lamp);
  box-shadow: 0 0 0 0 var(--glow); animation: bulb 2.6s ease-in-out infinite;
}
@keyframes bulb {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 180, 61, .45); opacity: .8; }
  50%      { box-shadow: 0 0 0 6px rgba(255, 180, 61, 0); opacity: 1; }
}

/* ── Game page ───────────────────────────────────────────────────────────── */
.play { padding-top: clamp(.8rem, 2vw, 1.4rem); display: grid; gap: var(--gap); }

/* Frame + the tower ad beside it. One column until there is genuinely room
   for a 300px tower without squeezing the game. */
.play__stage { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 68rem) { .play__stage { grid-template-columns: minmax(0, 1fr) 300px; } }

.frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--hair); background: #000;
  aspect-ratio: 16 / 9;
}
.frame--portrait { aspect-ratio: 9 / 16; max-width: 30rem; margin-inline: auto; }
.frame--any { aspect-ratio: 4 / 3; }
.frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.frame::before { /* the lit marquee over the running game */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--lamp-hot), var(--lamp), var(--lamp-hot));
}
/* Fullscreen has no aspect-ratio box — the game gets the whole screen. */
.frame:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; max-width: none; border-radius: 0; border: 0; }
.frame:fullscreen::before { display: none; }

/* The cover that sits on the frame until the player asks for the game. Games
   are only loaded on click: it keeps the page fast, it stops six iframes of
   audio starting at once, and it gives the pre-roll a natural home. */
.frame__cover {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center;
  gap: 1rem; text-align: center; padding: 1.5rem;
  background: var(--panel);
  background-size: cover; background-position: center;
}
.frame__cover::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 50% 40%, rgba(18, 16, 23, .55), rgba(18, 16, 23, .92));
}
.frame__cover > * { position: relative; z-index: 1; }

.frame__bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem .2rem 0;
}
.frame__bar .spacer { margin-left: auto; }

/* ── Ad slots ────────────────────────────────────────────────────────────
   Rendered as an honest empty frame in development so the layout is judged
   with the ads present, not without them. The label is mono because the size
   is something the slot reports about itself. Real tags go in later; see
   portal/sdk/README.md. */
.adslot {
  /* align-content, not just place-items: without it the two labels are pushed
     to the quarter marks of a 600px tower instead of sitting together. */
  display: grid; place-items: center; align-content: center; gap: .3rem;
  border: 1px dashed var(--hair); border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255, 255, 255, .012) 9px 18px), var(--room-2);
  color: var(--quieter); text-align: center; padding: .75rem;
  min-height: 60px;
}
.adslot[data-size='leaderboard'] { min-height: 92px; }
.adslot[data-size='tower'] { min-height: 250px; }
@media (min-width: 68rem) { .adslot[data-size='tower'] { min-height: 600px; position: sticky; top: 5.5rem; } }
.adslot__label { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }

/* ── Game detail ─────────────────────────────────────────────────────────── */
.detail { margin-top: clamp(1.2rem, 3vw, 2rem); display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
@media (min-width: 60rem) { .detail { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.detail h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.035em; font-weight: 800; margin: 0 0 .3rem; line-height: 1.08; }
.detail__tag { color: var(--quiet); margin: 0 0 1rem; font-size: 1.02rem; }
.detail p.body { color: #CFC7DA; max-width: 40rem; margin: 0 0 1rem; }

.stats { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.stats div { display: flex; flex-direction: column; }
.stats dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--quieter); }
.stats dd { margin: 0; font-family: var(--mono); font-size: .95rem; font-weight: 600; color: var(--text); }

.taglist { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; list-style: none; }
.tag {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .05em;
  color: var(--quiet); background: var(--panel); border: 1px solid var(--hair);
  border-radius: 5px; padding: .2rem .5rem;
  transition: color var(--snap), border-color var(--snap);
}
a.tag:hover { color: var(--lamp); border-color: var(--lamp-dim); }

/* Controls: a key legend, set in mono because the keys are the machine's. */
.controls { display: grid; gap: .55rem; }
.controls__row { display: grid; grid-template-columns: 4.6rem 1fr; gap: .7rem; align-items: start; }
.controls__row dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--quieter); padding-top: .2rem; }
.controls__row dd { margin: 0; font-family: var(--mono); font-size: .82rem; color: #CFC7DA; line-height: 1.5; }

.panel {
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: clamp(.9rem, 2vw, 1.25rem);
}
.panel h2 { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .7rem; }
.panel + .panel { margin-top: var(--gap); }

.notice {
  border: 1px solid var(--hair); border-left: 3px solid var(--lamp); border-radius: var(--radius-sm);
  background: var(--room-2); padding: .8rem 1rem; color: var(--quiet); font-size: .9rem;
}
.notice strong { color: var(--text); }

/* ── Search page ─────────────────────────────────────────────────────────── */
.searchbig { margin: clamp(1.2rem, 3vw, 2rem) 0 1.4rem; max-width: 34rem; }
.searchbig input {
  width: 100%; font: inherit; font-size: 1.1rem; color: var(--text);
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: .85rem 1.05rem;
}
.searchbig input:focus { outline: none; border-color: var(--lamp); }

.empty { text-align: center; padding: clamp(2.5rem, 8vw, 5rem) 1rem; color: var(--quiet); }
.empty h2 { font-size: 1.15rem; margin: 0 0 .4rem; color: var(--text); letter-spacing: -.02em; }
.empty p { margin: 0 auto; max-width: 28rem; font-size: .93rem; }

.pagehead { padding-block: clamp(1.4rem, 3.6vw, 2.4rem) .4rem; }
.pagehead h1 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); letter-spacing: -.04em; font-weight: 800; margin: .3rem 0 .3rem; }
.pagehead p { color: var(--quiet); margin: 0; max-width: 34rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--hair-soft); margin-top: clamp(2rem, 5vw, 3.5rem); background: var(--room-2); }
.foot__row { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; padding-block: clamp(1.6rem, 3.5vw, 2.4rem); }
.foot__col { min-width: 9rem; }
.foot h3 { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--quieter); margin: 0 0 .55rem; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.foot a { font-size: .88rem; color: var(--quiet); }
.foot a:hover { color: var(--lamp); }
.foot__legal { border-top: 1px solid var(--hair-soft); padding-block: .9rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.foot__legal p { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--quieter); }

/* ── Ad break overlay (dev/house adapter). Lives here so the portal and a
      game loaded standalone both look the same during a break. ──────────── */
.arcade-ad-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; gap: 1rem;
  background: rgba(10, 9, 13, .93);
  color: var(--text, #F3EFE9); font-family: var(--sans, system-ui, sans-serif);
  text-align: center; padding: 1.5rem;
}
.arcade-ad-overlay__box {
  border: 1px dashed rgba(255, 180, 61, .45); border-radius: 12px;
  padding: clamp(1.5rem, 5vw, 3rem); max-width: 30rem; width: 100%;
  background: rgba(27, 23, 36, .9);
}
.arcade-ad-overlay__kind {
  font-family: var(--mono, monospace); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lamp, #FFB43D); margin: 0 0 .8rem;
}
.arcade-ad-overlay__count { font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 .5rem; font-variant-numeric: tabular-nums; }
.arcade-ad-overlay__note { color: var(--quiet, #9E95AC); font-size: .88rem; margin: 0; }
.arcade-ad-overlay__actions { margin-top: 1.1rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ── 375px ───────────────────────────────────────────────────────────────
   The grid drops to two columns and the search moves under the logo, so the
   brand and the search field never fight for the same 200px. */
@media (max-width: 34rem) {
  .topbar__row { flex-wrap: wrap; row-gap: .55rem; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .btn--random span { display: none; }   /* the die alone still reads as a die */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail__track { grid-auto-columns: 9.5rem; }
  .stats { gap: .35rem 1.1rem; }
  /* The shelf blurb is a nice-to-have that wraps to three lines here and
     shoves the "all N" link out of alignment. The shelf name is enough. */
  .sechead p { display: none; }
  /* Frame controls: the readout takes its own line so Fullscreen and Restart
     stay on one row together instead of stacking. */
  .frame__bar .readout { flex-basis: 100%; }
}