/* ============================================================================
   ARCADE — midnight-navy 8-bit, with the rainbow from the logo as its voice.

   Where the colour comes from: the logo is a black hood in a rainbow flame,
   so the page is a quiet midnight blue and the rainbow is the only loud thing
   on it. It turns up as stripes, as banded title text, and as one colour per
   stat. Nothing else is allowed to be bright.

   Where the shape comes from: every panel, button and input is drawn the way
   an NES UI draws them — a 4px outline with the corner pixels left out, which
   is what box-shadow gives you for free: four hard shadows, one per side, and
   no corner. Nothing here has a border-radius.

   Two fonts, one job each:
     Press Start 2P  headings, buttons, the big numbers. It is only sharp at
                     multiples of 8px, so it is only ever set at 16, 24, 32.
     VT323           everything you actually read. A terminal font with the
                     same pixel grid, readable at a body size where Press Start
                     is not. It is small for its size, hence 22px as the base.

   Both are OFL and live in /fonts with their licences.
   ============================================================================ */

@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("fonts/VT323-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg:      #0a0e1f;
  --panel:   #141b3a;
  --panel-2: #1b2550;
  --well:    #070a18;
  --edge:    #2c3a73;
  --edge-hi: #4a5cad;

  --ink:  #f4f1e8;
  --dim:  #9aa6d1;   /* 6:1 on the panel; the lowest this is allowed to go for text */
  --mute: #7582b4;   /* fine print and placeholders; 4.5:1 on the page and the input well */

  /* the rainbow, in the order it runs */
  --red:    #ff4d5e;
  --orange: #ff8a2a;
  --yellow: #ffd23f;
  --green:  #4cf07a;
  --cyan:   #35d8ff;
  --blue:   #4d7cff;
  --purple: #a06bff;
  --pink:   #ff5fcf;

  --px: 4px;
  --stripe: 24px;
  --side: 300px;
  --display: "Press Start 2P", ui-monospace, monospace;
  --body: "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* six hard bands, no blending: this is what makes a gradient read as 8-bit */
  --bands: linear-gradient(180deg,
    var(--red)    0 16.66%,
    var(--orange) 0 33.33%,
    var(--yellow) 0 50%,
    var(--green)  0 66.66%,
    var(--cyan)   0 83.33%,
    var(--purple) 0 100%);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  padding-top: var(--stripe);   /* the stripe is fixed; this is the room it takes */
  color: var(--ink);
  font: 22px/1.3 var(--body);
  background:
    radial-gradient(circle at 12% 0%,   rgba(77, 124, 255, .16), transparent 42%),
    radial-gradient(circle at 92% 28%,  rgba(255, 95, 207, .09), transparent 40%),
    var(--bg);
  -webkit-font-smoothing: none;     /* pixel fonts want their edges hard */
  -moz-osx-font-smoothing: grayscale;
}

/* a few fixed stars, so the dark isn't flat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(2px 2px at 24px 38px,  #fff, transparent),
    radial-gradient(2px 2px at 112px 92px, var(--cyan), transparent),
    radial-gradient(2px 2px at 188px 24px, #fff, transparent),
    radial-gradient(2px 2px at 70px 150px, var(--pink), transparent),
    radial-gradient(2px 2px at 220px 170px, #fff, transparent);
  background-size: 240px 200px;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--cyan); }
img { image-rendering: pixelated; }

/* scrollbars: a navy well and a square, bevelled thumb, like everything else here.
   Chrome, Edge and Safari take the ::-webkit- rules; Firefox only knows colours. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--well); box-shadow: inset 2px 0 0 var(--edge); }
::-webkit-scrollbar-thumb {
  background: var(--edge-hi);
  border: 2px solid var(--well);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .28), inset -2px -2px 0 rgba(0, 0, 0, .35);
}
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }
::-webkit-scrollbar-thumb:active { background: var(--pink); }
::-webkit-scrollbar-corner { background: var(--well); }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--edge-hi) var(--well); }
}
[hidden] { display: none !important; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ── the pieces everything is made of ──────────────────────── */

/* one outline recipe: four shadows, one per side, corners left out */
.box, .input, .chip, .btn, .navlink {
  --e: var(--edge);
  --lift: 0 0 0 0 transparent;
  --bevel: 0 0 0 0 transparent;
  margin: var(--px);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--e),
    0 var(--px) 0 0 var(--e),
    calc(var(--px) * -1) 0 0 0 var(--e),
    var(--px) 0 0 0 var(--e),
    var(--lift),
    var(--bevel);
}

.box {
  position: relative;
  background: var(--panel);
  padding: 28px;
  --lift: 8px 8px 0 0 rgba(0, 0, 0, .45);
}

.stripe {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: var(--stripe);
  background: var(--bands);
  /* six bands in 24px = 4px each: one pixel of the screen's own grid */
}

.rainbow {
  background: var(--bands);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(4px 4px 0 #000);
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .rainbow { color: var(--yellow); background: none; }
}
@media (forced-colors: active) {
  .rainbow { background: none; color: CanvasText; filter: none; }
}

.label {
  font: 20px/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── buttons ──────────────────────────────────────────────── */

.btn {
  --e: #000;
  --lift: 0 8px 0 0 rgba(0, 0, 0, .55);
  --bevel: inset -4px -4px 0 0 rgba(0, 0, 0, .25), inset 4px 4px 0 0 rgba(255, 255, 255, .24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 16px 24px;
  border: 0;
  cursor: pointer;
  font: 16px/1 var(--display);
  text-transform: uppercase;
  text-decoration: none;
  color: #0a0e24;
  background: var(--orange);
}
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:active:not(:disabled) {
  --lift: 0 0 0 0 transparent;
  transform: translateY(var(--px));
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--cyan  { background: var(--cyan); }
.btn--green { background: var(--green); }
.btn--ghost {
  --e: var(--edge-hi);
  color: var(--ink);
  background: var(--panel-2);
}
.btn--small { min-height: 44px; padding: 10px 14px; font-size: 16px; }

/* keyboard focus: a dashed outline stands apart from the pixel edges */
.btn:focus-visible, .chip:focus-visible, .input:focus-visible, .navlink:focus-visible,
summary:focus-visible, .link:focus-visible, a.tool:focus-visible {
  outline: var(--px) dashed var(--cyan);
  outline-offset: 8px;
}

.link {
  font: inherit;
  color: var(--cyan);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── the shell: a sidebar, and the stage beside it ─────────── */

.app {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  min-height: calc(100vh - var(--stripe));
}

.side {
  position: sticky;
  top: var(--stripe);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: calc(100vh - var(--stripe));
  padding: 20px 16px;
  overflow-y: auto;
  background: var(--panel);
  border-right: var(--px) solid var(--edge);
}

.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand img { width: 48px; height: 62px; flex: none; }   /* exactly 1x: every pixel is one pixel */
.brand .name { display: block; font: 16px/1.3 var(--display); }
.brand .tag { display: block; margin-top: 6px; font-size: 20px; line-height: 1.1; color: var(--dim); }

.nav { display: flex; flex-direction: column; gap: 6px; }

.navlink {
  --e: var(--edge-hi);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  white-space: nowrap;
  color: var(--ink);
  background: var(--panel-2);
  font: 16px/1.2 var(--display);
  text-transform: uppercase;
  text-decoration: none;
}
.navlink:hover { background: #26336a; }
/* Godspark opens its own full page; same size as every other entry, gold spark icon. */
.navlink--spark .icon { color: #ffc94a; }
/* Amberlake, the fishing game, likewise: an amber fish. */
.navlink--lake .icon { color: #f0a03c; }
.navlink[aria-current="page"] { --e: var(--cyan); color: #06102a; background: var(--cyan); }
/* the one you're on is dark text on a bright fill, so it differs in brightness as well as hue */

.icon { flex: none; shape-rendering: crispEdges; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.side-foot .btn { width: 100%; justify-content: flex-start; min-height: 44px; padding: 8px 12px; }

/* short screens (a laptop with the bookmarks bar out): tighter still */
@media (min-width: 901px) and (max-height: 760px) {
  .side { gap: 14px; padding-top: 14px; padding-bottom: 14px; }
  .brand .tag { display: none; }
  .nav { gap: 4px; }
  .navlink, .side-foot .btn { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
}

.stage { display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - var(--stripe)); }
/* the stage is often wider than the column, so centre it: without the auto
   margins the whole column hugged the sidebar and all the slack piled up on
   the right. The widths are unchanged, so nothing else moves. */
.main { flex: 1; width: 100%; max-width: 1080px; margin-inline: auto; padding: 36px 44px 24px; }
h1:focus { outline: none; }   /* focus lands here on a tab change, for screen readers; it isn't a control */

/* ── home ─────────────────────────────────────────────────── */

.home-hero {
  display: grid;
  /* two content-width tracks, centred in the box. The text was 1fr, so it
     stretched to the right edge and the whole pair hugged the left. */
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 36px;
  align-items: center;
  padding: 36px;
}
.home-hero .art img { display: block; width: 192px; height: 248px; animation: bob 1.2s steps(2) infinite; }   /* 4x */
.home-hero .big { margin-top: 14px; font: 32px/1.2 var(--display); overflow-wrap: anywhere; }
.home-hero .blurb { margin-top: 20px; max-width: 30ch; font-size: 30px; line-height: 1.15; color: var(--dim); }

.section-title { margin: 48px 4px 20px; font: 16px/1.4 var(--display); text-transform: uppercase; }
.section-title::before { content: "\25B6\00a0"; color: var(--yellow); }

.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.tool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  color: inherit;
  text-decoration: none;
  --lift: 8px 8px 0 0 rgba(0, 0, 0, .45);
}
.tool h3 { font: 16px/1.4 var(--display); text-transform: uppercase; }
.tool p { font-size: 26px; line-height: 1.15; color: var(--dim); }
.tool .icon--lg { width: 48px; height: 48px; color: var(--cyan); }
.tool .btn { margin-top: auto; }
a.tool:hover { --e: var(--cyan); }
a.tool:hover .btn { filter: brightness(1.12); }
.tool.locked { opacity: .7; }
.tool.locked .icon--lg { color: var(--mute); }

/* ── the start screen ─────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}
.hero h1 { font: 24px/1.5 var(--display); }
.hero .blurb { margin-top: 16px; max-width: 34ch; font-size: 28px; line-height: 1.15; color: var(--dim); }
.hero .art img { display: block; width: 144px; height: 186px; animation: bob 1.2s steps(2) infinite; }   /* 3x */

.hero.is-compact { grid-template-columns: 1fr; }
.hero.is-compact .intro, .hero.is-compact .art { display: none; }

.form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; align-items: flex-end; }
.form .field { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }

.input {
  --e: var(--edge-hi);
  width: calc(100% - var(--px) * 2);
  min-height: 56px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: var(--well);
  font: 28px/1 var(--body);
}
.input::placeholder { color: var(--mute); }
.input:focus { --e: var(--cyan); outline: none; }
.input:focus-visible { outline: none; --e: var(--cyan); }

.help { margin-top: 20px; color: var(--dim); }
.help summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: 4px; }
.help ol { margin: 12px 0 0; padding-left: 28px; line-height: 1.35; }
.help li + li { margin-top: 4px; }

.msg {
  margin-top: 20px;
  padding: 14px 16px;
  color: var(--ink);
  background: #3a1220;
  --e: var(--red);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--red),
    0 var(--px) 0 0 var(--red),
    calc(var(--px) * -1) 0 0 0 var(--red),
    var(--px) 0 0 0 var(--red);
  margin-left: var(--px);
  margin-right: var(--px);
}
.msg b { font: 16px/1.4 var(--display); display: block; margin-bottom: 8px; color: var(--red); }

.loading { margin-top: 24px; font: 16px/1 var(--display); color: var(--yellow); }
.loading::after { content: ""; animation: dots 1s steps(1) infinite; }

/* ── the player and their numbers ─────────────────────────── */

.player { display: flex; align-items: center; gap: 16px; margin: 40px 0 8px; }
.player img { width: 64px; height: 64px; flex: none; border: var(--px) solid var(--edge-hi); image-rendering: auto; }
.player .who { font: 16px/1.5 var(--display); }
.player .sub { font-size: 22px; color: var(--dim); margin-top: 4px; }
.player .demo-flag {
  font: 16px/1 var(--display);
  padding: 8px 12px;
  color: #0a0e24;
  background: var(--yellow);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.stat {
  --c: var(--green);
  position: relative;
  padding: 28px 16px 18px;
  background: var(--panel);
  --lift: 8px 8px 0 0 rgba(0, 0, 0, .45);
  min-width: 0;
}
.stat::before {         /* each stat gets one colour off the rainbow */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--c);
}
.stat .v { font: 24px/1.1 var(--display); color: var(--c); margin-top: 12px; overflow-wrap: anywhere; }
.stat .s { margin-top: 10px; color: var(--dim); font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat.games  { --c: var(--green); }
.stat.never  { --c: var(--pink); }
.stat.hours  { --c: var(--cyan); }
.stat.most   { --c: var(--yellow); }
.stat.most .v {
  /* a game's name, not a number: the readable font, wrapping between words
     rather than through the middle of one */
  font: 30px/1.05 var(--body);
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.meter-row { margin-top: 24px; }
.meter-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 var(--px) 12px; }
.meter-head .rank { font: 16px/1.4 var(--display); color: var(--yellow); }
.meter {
  --block: 18px;
  --gap: 4px;
  --fill: var(--pink);
  height: 28px;
  margin: 0 var(--px);
  background: repeating-linear-gradient(90deg, var(--panel-2) 0 var(--block), transparent var(--block) calc(var(--block) + var(--gap)));
}
.meter > i {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background: repeating-linear-gradient(90deg, var(--fill) 0 var(--block), transparent var(--block) calc(var(--block) + var(--gap)));
}

/* ── the machine ──────────────────────────────────────────── */

.machine { --e: var(--edge-hi); padding: 0; margin-top: 40px; }
.machine .head { padding: 24px 28px 8px; }
.machine h2 { font: 24px/1.4 var(--display); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  --e: var(--edge-hi);
  padding: 8px 16px;
  min-height: 44px;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  background: var(--panel-2);
  font: 24px/1 var(--body);
  text-transform: uppercase;
}
.chip:hover:not(:disabled) { background: #26336a; }
.chip[aria-pressed="true"] { --e: var(--cyan); color: #06102a; background: var(--cyan); }
.chip[aria-pressed="true"]::before { content: "\25B6\00a0"; }   /* ▶: a cue that isn't only colour */
.chip:disabled { opacity: .4; cursor: not-allowed; }

.bulbs { display: flex; gap: 12px; padding: 20px 28px 4px; }
.bulbs i { width: 12px; height: 12px; background: var(--c, var(--yellow)); animation: bulb 1s steps(1) infinite; }
.bulbs i:nth-child(even) { animation-delay: .5s; }
.bulbs i:nth-child(6n+1) { --c: var(--red); }
.bulbs i:nth-child(6n+2) { --c: var(--orange); }
.bulbs i:nth-child(6n+3) { --c: var(--yellow); }
.bulbs i:nth-child(6n+4) { --c: var(--green); }
.bulbs i:nth-child(6n+5) { --c: var(--cyan); }
.bulbs i:nth-child(6n)   { --c: var(--purple); }

.screen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  margin: 16px 28px 0;
  padding: 28px;
  background: var(--well);
  box-shadow: inset 0 0 0 var(--px) #000, inset 0 0 70px rgba(53, 216, 255, .09);
  overflow: hidden;
}
/* scanlines, on the screen only: across text they cost legibility, and the
   screen is the one place where that is the point */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 4px);
}

.idle { text-align: center; }
.idle .go { font: 24px/1.4 var(--display); color: var(--yellow); animation: blink 1s steps(1) infinite; }
.idle .pool { margin-top: 16px; color: var(--dim); font-size: 26px; }

.reel {
  width: 100%;
  text-align: center;
  font: 52px/1.05 var(--body);
  text-transform: uppercase;
  color: var(--yellow);
  overflow-wrap: anywhere;
}

.result { width: 100%; display: grid; gap: 14px; justify-items: center; }
.cover {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 460 / 215;
  background: #000;
  box-shadow: 0 0 0 var(--px) var(--edge-hi), 8px 8px 0 var(--px) rgba(0, 0, 0, .6);
  margin: 4px 0 8px;
}
.cover canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.cover .nocover {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font: 24px/1.3 var(--display);
  color: var(--edge-hi);
  background: repeating-linear-gradient(45deg, var(--well) 0 12px, var(--panel) 12px 24px);
}
.gname { font: 44px/1 var(--body); text-transform: uppercase; text-align: center; color: var(--ink); overflow-wrap: anywhere; }
.gmeta { font-size: 28px; color: var(--dim); text-align: center; }
.gmeta b { color: var(--pink); font-weight: normal; }

.controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 28px; }

.note { margin: 0 28px 24px; color: var(--dim); text-align: center; min-height: 1.3em; }

/* ── share ────────────────────────────────────────────────── */

.share { margin-top: 40px; }
.share h2 { font: 24px/1.4 var(--display); }
.share .copy { margin-top: 12px; max-width: 46ch; color: var(--dim); font-size: 26px; line-height: 1.15; }
.share canvas { display: block; width: 100%; max-width: 640px; height: auto; margin: 24px 0 8px; background: var(--well); }
.share .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.share .linkbox { flex: 1 1 280px; }

/* ── footer ───────────────────────────────────────────────── */


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

/* ── stream radar ─────────────────────────────────────────── */

.radar-intro h1 { font: 24px/1.4 var(--display); }
.radar-intro .blurb { margin-top: 16px; max-width: 62ch; font-size: 26px; line-height: 1.15; color: var(--dim); }

.radar-top { position: relative; margin-top: 24px; padding: 28px 28px 24px; --c: var(--green); }
.radar-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--c); }
.radar-top-name { margin-top: 12px; font: 32px/1.05 var(--body); text-transform: uppercase; color: var(--green); overflow-wrap: anywhere; }
.radar-top-sub { margin-top: 10px; color: var(--dim); font-size: 26px; }

.radar-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 28px; margin-top: 24px; }
.radar-group { display: flex; flex-direction: column; gap: 10px; }
.radar-group .chips { margin-top: 0; }
.radar-controls .btn { margin-left: auto; }

.radar-list { margin-top: 24px; padding: 0; overflow-x: auto; }
.radar-table { width: 100%; border-collapse: collapse; }
.radar-table th { padding: 20px 20px 12px; font: 16px/1.4 var(--display); text-align: left; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.radar-table td { padding: 14px 20px; border-top: var(--px) solid var(--edge); vertical-align: middle; }
.radar-table th:nth-child(3), .radar-table th:nth-child(4), .radar-table th:nth-child(5),
.radar-table td:nth-child(3), .radar-table td:nth-child(4), .radar-table td:nth-child(5) { text-align: right; }
.radar-table tbody tr:hover { background: var(--panel-2); }
.radar-rank { width: 1%; font: 16px/1 var(--display); color: var(--dim); }
.radar-game { min-width: 200px; }
.radar-name { display: block; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.radar-split { display: block; margin-top: 4px; color: var(--mute); font-size: 20px; letter-spacing: .04em; }
/* each platform keeps its brand colour, so TW and KK read apart at a glance */
.radar-plat--twitch { color: var(--purple); }
.radar-plat--kick   { color: var(--green); }
.radar-num { font-size: 26px; color: var(--ink); white-space: nowrap; }
.radar-ratio { font: 16px/1 var(--display); color: var(--yellow); white-space: nowrap; }

#radarStatus { margin-top: 8px; }
#radarNote { margin: 16px 4px 0; min-height: 0; text-align: left; font-size: 22px; color: var(--mute); }

/* the game name is a button now, so it has to look like the text it replaced.
   font-family: inherit is the important one: a button does not inherit the
   page's font, so without it the name fell back to Arial. */
button.radar-name {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
button.radar-name:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 4px; }
button.radar-name[aria-expanded="true"] { color: var(--cyan); }
button.radar-name[aria-expanded="true"]::after { content: " \25B2"; font-size: 14px; }
button.radar-name:focus-visible { outline: var(--px) dashed var(--cyan); outline-offset: 6px; }

/* ── who's live on a game (grows open under its row) ──────── */

.radar-detail-row > td { padding: 0; border-top: 0; }
.radar-detail {
  display: grid;
  grid-template-rows: 0fr;   /* closed; the open rule below grows it */
  transition: grid-template-rows .22s ease-out;
  background: var(--panel-2);
  box-shadow: inset 0 var(--px) 0 0 var(--cyan), inset 0 calc(var(--px) * -1) 0 0 var(--cyan);
}
.radar-detail.is-open { grid-template-rows: 1fr; }
.radar-detail-clip { overflow: hidden; min-height: 0; }
.radar-detail-body { padding: 24px 20px 28px; }
.radar-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.radar-detail-title { font: 16px/1.4 var(--display); text-transform: uppercase; }
.radar-detail-sub { margin-top: 12px; font-size: 24px; color: var(--dim); }
/* a full game can be 25 channels; scroll them rather than push the board down */
.radar-streams { max-height: 400px; overflow-y: auto; }
.radar-table--streams { margin-top: 16px; }
.radar-channel { min-width: 150px; }
.radar-channel a.radar-name { font-size: 26px; color: var(--cyan); }
.radar-channel a.radar-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.radar-title { max-width: 380px; font-size: 22px; color: var(--dim); }
.radar-on { font: 16px/1 var(--display); white-space: nowrap; }
.radar-on[data-platform="twitch"] { color: var(--purple); }
.radar-on[data-platform="kick"]   { color: var(--green); }

/* ── overlay studio ───────────────────────────────────────── */

.ov-intro h1 { font: 24px/1.4 var(--display); }
.ov-intro .blurb { margin-top: 16px; max-width: 62ch; font-size: 26px; line-height: 1.15; color: var(--dim); }

.ov-make { margin-top: 24px; }
.ov-prompt { width: 100%; min-height: 120px; resize: vertical; font-size: 26px; line-height: 1.2; }
.ov-make .section-title { margin-top: 28px; }
.ov-status { font-size: 24px; color: var(--dim); align-self: center; }
.ov-status[data-bad] { color: var(--red, #ff6b6b); }

.ov-hint { margin: 10px 4px 0; font-size: 22px; color: var(--mute); }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ov-field { display: flex; flex-direction: column; gap: 8px; }
.ov-field .label { font-size: 20px; }
.ov-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
select.input { appearance: none; font-size: 24px; }
.ov-empty { padding: 8px 4px 0; }

/* ── the editor: preview on the left, settings on the right ── */

/* The overlay tab gets a wider column than the rest of the site: the
   preview is the point, and squeezing it into 1080px next to a panel
   made it far too small to judge. The settings go underneath instead. */
body[data-view="overlay"] .main,

.ov-editor { margin-top: 24px; }
.ov-preview-col { min-width: 0; }
.ov-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, var(--well) 0 16px, var(--panel) 16px 32px);
  box-shadow: inset 0 0 0 var(--px) var(--edge-hi);
}
/* full screen, to see it at something like the size OBS will show it */
.ov-preview.is-full {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  background: #05070f;
  box-shadow: none;
}
/* the iframe is a real 1920x1080 page, scaled to fit — so the preview
   is the output, not an approximation of it */
iframe.ov-frame {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px;
  border: 0; background: transparent;
  transform-origin: top left;
}
.ov-sim { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* an empty stage is a transparent rectangle, which looks broken; this
   says what to do instead, in the space the overlay would occupy */
.ov-preview-empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  font: 16px/1.7 var(--display); text-transform: uppercase;
  color: var(--dim); background: rgba(7, 10, 24, .65);
}

.ov-panel { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; align-items: start; }
.ov-widget {
  background: var(--panel);
  box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge);
}
.ov-widget-head { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; cursor: pointer; }
.ov-widget-type { font: 16px/1 var(--display); text-transform: uppercase; color: var(--cyan); }
.ov-widget-name { flex: 1; font-size: 24px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-widget-body { padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.ov-widget-body .input { font-size: 24px; min-height: 48px; }
.ov-num { max-width: 160px; }
.ov-color { display: flex; gap: 10px; align-items: stretch; }
.ov-color input[type="color"] { width: 56px; min-height: 48px; padding: 2px; border: 0; background: var(--well); cursor: pointer; }
.ov-add { margin-top: 4px; }

/* ── export ── */

.ov-export { margin-top: 32px; }
.ov-export h2 { font: 24px/1.4 var(--display); }
.ov-export .copy { margin-top: 12px; max-width: 60ch; color: var(--dim); font-size: 26px; line-height: 1.15; }
.ov-export-row { margin-top: 24px; }
.ov-url { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.ov-url .input { flex: 1 1 320px; font-size: 22px; }

/* ── compare ──────────────────────────────────────────────── */

.cmp-form, .cmp-players, .cmp-pick { margin-top: 24px; }
.cmp-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.cmp-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cmp-player b { display: block; font: 18px/1.3 var(--display); color: var(--cyan); overflow-wrap: anywhere; }
.cmp-player span { font-size: 26px; color: var(--dim); }
.cmp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-top: 24px; }
.cmp-stat { background: var(--panel); padding: 18px 20px; box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge); }
.cmp-stat b { display: block; font: 26px/1.2 var(--display); color: var(--yellow); }
.cmp-stat span { font-size: 22px; color: var(--dim); overflow-wrap: anywhere; }
.cmp-kicker { font: 14px/1.4 var(--display); color: var(--yellow); }
.cmp-big { margin-top: 12px; font: 24px/1.4 var(--display); overflow-wrap: anywhere; }
.cmp-sub, .cmp-more { margin-top: 10px; font-size: 26px; color: var(--dim); }
.cmp-list { margin-top: 12px; }
.cmp-list summary { cursor: pointer; font: 16px/1.5 var(--display); padding: 10px 0; }
.cmp-rows { max-height: 420px; overflow: auto; padding-right: 8px; }
.cmp-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 2px solid var(--edge); font-size: 26px; }
.cmp-gname { overflow-wrap: anywhere; }
.cmp-hrs { color: var(--dim); white-space: nowrap; }

.cmp-share { margin-top: 24px; }
.cmp-mutual { margin-top: 24px; }
.cmp-tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin-top: 20px; }
.cmp-card { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; background: var(--panel-2);
  box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge); }
.cmp-card:hover { background: #26336a; }
.cmp-card:focus-visible { outline: var(--px) dashed var(--cyan); outline-offset: 6px; }
.cmp-card .pic-fallback { aspect-ratio: 460 / 215; }
.cmp-card img { display: block; width: 100%; height: auto; aspect-ratio: 460 / 215; object-fit: cover; background: var(--well); }
.cmp-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.cmp-card-body b { font: 14px/1.5 var(--display); overflow-wrap: anywhere; }
.cmp-card-body span { font-size: 22px; color: var(--dim); overflow-wrap: anywhere; }
@media (max-width: 760px) { .cmp-tools { grid-template-columns: minmax(0, 1fr); } }

/* ── free games ───────────────────────────────────────────── */

.free-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.free-card { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; background: var(--panel-2);
  box-shadow: 0 -4px 0 0 var(--edge-hi), 0 4px 0 0 var(--edge-hi), -4px 0 0 0 var(--edge-hi), 4px 0 0 0 var(--edge-hi); }
.free-card:hover { background: #26336a; }
.free-card:focus-visible { outline: var(--px) dashed var(--cyan); outline-offset: 6px; }
.pic-fallback { display: grid; place-items: center; width: 100%; font: 28px/1 var(--display); letter-spacing: .05em;
  color: hsl(var(--h) 80% 82%); background: linear-gradient(135deg, hsl(var(--h) 45% 24%), hsl(var(--h) 55% 14%)); }
.free-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--well); }
.free-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.free-store { font: 13px/1 var(--display); color: var(--cyan); text-transform: uppercase; }
.free-title { font: 15px/1.5 var(--display); overflow-wrap: anywhere; }
.free-price { font-size: 28px; }
.free-price s { color: var(--mute); }
.free-price strong { color: var(--green); font: 18px/1 var(--display); }
.deal-sale { color: var(--green); font: 18px/1 var(--display); }
.deal-off { color: var(--yellow); font: 14px/1 var(--display); }
.free-when { font-size: 24px; color: var(--yellow); }

/* ── is it dead ───────────────────────────────────────────── */

.dead-list { display: grid; gap: 20px; margin-top: 24px; }
.dead-card { display: grid; grid-template-columns: 231px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; background: var(--panel);
  box-shadow: 0 -4px 0 0 var(--edge), 0 4px 0 0 var(--edge), -4px 0 0 0 var(--edge), 4px 0 0 0 var(--edge); }
.dead-pic { width: 231px; max-width: 100%; height: auto; display: block; aspect-ratio: 231 / 87; object-fit: cover; background: var(--well); }
.dead-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.dead-name { font: 16px/1.5 var(--display); overflow-wrap: anywhere; }
.dead-count { font-size: 28px; }
.dead-count strong { font: 24px/1 var(--display); color: var(--cyan); }
.dead-chip { font: 13px/1 var(--display); padding: 8px 10px 6px; color: #06102a; background: var(--yellow); }
.dead-chip[data-tone="green"] { background: var(--green); }
.dead-chip[data-tone="red"] { background: var(--red); }
.dead-sub { font-size: 24px; color: var(--dim); }
.dead-link { font-size: 24px; color: var(--cyan); }
@media (max-width: 760px) { .dead-card { grid-template-columns: minmax(0, 1fr); } .dead-pic { width: 100%; } }

.dead-boards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.dead-rank { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dead-row { display: grid; grid-template-columns: 32px 150px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 10px 14px 10px 10px;
  color: var(--ink); text-align: left; cursor: pointer; border: 0; background: var(--panel-2); font-family: var(--body);   /* a button: it doesn't inherit the page font */
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge); }
.dead-row:hover { background: #26336a; }
.dead-row:focus-visible { outline: var(--px) dashed var(--cyan); outline-offset: 4px; }
.dead-pos { font: 14px/1 var(--display); color: var(--yellow); text-align: center; }
.dead-row img, .dead-row .pic-fallback { width: 150px; height: auto; aspect-ratio: 184 / 86; object-fit: cover; background: var(--well); font-size: 18px; }
.dead-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dead-mid b { font: 13px/1.5 var(--display); overflow-wrap: anywhere; }
.dead-mid small { font-size: 22px; line-height: 1.1; color: var(--dim); }
.dead-num { font: 15px/1.3 var(--display); color: var(--cyan); text-align: right; }
@media (max-width: 560px) {
  .dead-row { grid-template-columns: 26px 96px minmax(0, 1fr); gap: 10px; padding: 8px; }
  .dead-row img, .dead-row .pic-fallback { width: 96px; font-size: 14px; }
  .dead-num { grid-column: 3; text-align: left; }
}

/* ── closed for now: construction tape ────────────────────── */

a[data-closed] { position: relative; overflow: hidden; cursor: not-allowed; }
a[data-closed] > * { opacity: .55; }
/* two strips crossing over the button, like tape across a door */
a[data-closed]::before, a[data-closed]::after {
  content: ""; position: absolute; left: -20%; right: -20%; top: 50%; height: 16px; margin-top: -8px; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(-45deg, #ffd23f 0 12px, #111 12px 24px);
  box-shadow: 0 0 0 2px #000;
}
a[data-closed]::before { transform: rotate(14deg); }
a[data-closed]::after { transform: rotate(-14deg); }
a.box[data-closed]::before, a.box[data-closed]::after { height: 26px; margin-top: -13px; }
a.navlink[data-closed]::before, a.navlink[data-closed]::after { height: 10px; margin-top: -5px; }
a[data-closed]:hover { background: inherit; }

.tape-banner {
  margin: 20px -28px 8px; overflow: hidden; transform: rotate(-1.2deg);
  background: repeating-linear-gradient(-45deg, #ffd23f 0 14px, #111 14px 28px);
  padding: 10px 0; box-shadow: 0 0 0 3px #000;
}
.tape-banner span {
  display: block; white-space: nowrap; padding: 6px 0 2px; background: #ffd23f; color: #111;
  font: 16px/1.4 var(--display); letter-spacing: .06em; margin: 0 -2px;
}
[inert] { opacity: .35; filter: grayscale(.7); user-select: none; }

/* ── motion ───────────────────────────────────────────────── */

@keyframes blink { 50% { opacity: 0; } }
@keyframes bob   { 50% { transform: translateY(-6px); } }
@keyframes bulb  { 50% { opacity: .2; } }
@keyframes dots  { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

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

/* ── narrow ───────────────────────────────────────────────── */

@media (max-width: 760px) {
  body { font-size: 22px; }
  .wrap { padding: 0 16px; }
  .box { padding: 20px; }
  .hero { grid-template-columns: 1fr; }
  .hero .art { order: -1; }
  .hero h1 { font-size: 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .machine .head, .controls { padding-left: 16px; padding-right: 16px; }
  .screen { margin-left: 16px; margin-right: 16px; min-height: 300px; padding: 20px; }
  .reel { font-size: 40px; }
  .gname { font-size: 36px; }
  .meter { --block: 12px; }
  .btn { padding: 14px 16px; }
  .controls .btn { flex: 1 1 100%; }
  .radar-controls .btn { margin-left: 0; }
  .radar-table th, .radar-table td { padding: 10px; }
  .radar-name { font-size: 24px; }
  .ov-panel { grid-template-columns: minmax(0, 1fr); }
}

/* the sidebar folds up into a header: brand and sound on one row, the tabs under it */
@media (max-width: 900px) {
  :root { --stripe: 12px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    height: auto;
    padding: 16px;
    overflow: visible;
    border-right: 0;
    border-bottom: var(--px) solid var(--edge);
  }
  .brand .tag { display: none; }
  .side-foot { order: 2; margin: 0 0 0 auto; flex-direction: row; gap: 8px; }
  .side-foot .btn { width: auto; min-height: 44px; padding: 8px 10px; gap: 8px; }
  .brand { gap: 10px; }
  .side-foot .lbl { display: none; }   /* just the icon and ON / OFF, so it shares the brand's row */
  /* the tabs: one strip you swipe sideways, so the page itself never gets wider than the phone */
  .nav { order: 3; flex: 1 1 100%; min-width: 0; flex-direction: row; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 6px 12px; margin: 0 -6px; }
  .navlink { flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 6px; min-height: 72px; padding: 8px 14px; text-align: center; scroll-snap-align: start; }
  .main { padding: 24px 16px 16px; }
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px; }
  .home-hero .art img { width: 144px; height: 186px; }   /* 3x */
  .home-hero .big { font-size: 24px; }   /* 32px orphaned the last letter on a phone */
}

/* ── games ────────────────────────────────────────────────── */
.games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 24px; margin-top: 24px; }
.game-card { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 24px; align-items: start; background: var(--panel); }
.game-art { background: #070b16; line-height: 0; box-shadow: 0 0 0 4px var(--edge); }
.game-art svg { width: 100%; height: auto; display: block; }
.game-body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.game-body h2 { font: 24px/1.3 var(--display); color: var(--cyan); }
.game-body p { color: var(--dim); }
@media (max-width: 760px) { .game-card { grid-template-columns: minmax(0, 1fr); } }

.game-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.game-frame { margin-top: 20px; background: #000; box-shadow: 0 0 0 4px var(--edge); height: calc(100vh - var(--stripe) - 150px); min-height: 420px; }
/* playing: drop the intro so the bar is at the top and the whole game fits on screen */
#view-games.is-playing > .ov-intro { display: none; }
#view-games.is-playing .game-bar { margin-top: 0; }
.game-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.game-frame:fullscreen { height: 100%; }
.tag18 { font: 10px/1 var(--display); padding: 4px 6px; background: var(--red); color: #fff; vertical-align: middle; margin-left: 6px; }

.game-scores { margin-top: 24px; }
.score-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.score-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "pos name pts" ". sub sub"; gap: 2px 14px; align-items: baseline; padding: 10px 14px; background: var(--panel-2); }
.score-pos { grid-area: pos; font: 14px/1 var(--display); color: var(--yellow); text-align: center; }
.score-name { grid-area: name; font: 16px/1.4 var(--display); overflow-wrap: anywhere; }
.score-pts { grid-area: pts; font: 16px/1 var(--display); color: var(--cyan); }
.score-sub { grid-area: sub; font-size: 22px; color: var(--dim); }
.score-row:nth-child(1) .score-pos { color: var(--yellow); }
.score-row:nth-child(1) .score-name { color: var(--yellow); }

/* Downloadable programs live alongside the browser tools. */
.tool--revv .icon, #view-programs h1 { color: var(--green); }
.program-catalog { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.program-card { padding: 30px; max-width: 740px; }
.program-heading { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.program-mark { color: var(--green); flex-shrink: 0; }
.program-heading h2 { font: 24px/1.6 var(--display); margin: 12px 0 0; }
.program-heading h2 a { color: var(--green); text-decoration: none; }
.program-card > p { color: var(--dim); line-height: 1.5; }
.program-meta { font-size: 21px; margin-top: 20px; }
.program-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
@media (max-width: 600px) { .program-card { padding: 24px; } .program-actions .btn { width: 100%; font-size: 12px; } }