/* The web player (/g/<game>, player.js): the app's feed on one card
   (FeedView in ios/App/Sources/MaimbrainApp.swift), measurements and all.
   Its layout loads only this file and fonts.css, so it has its own copy of
   the arcade palette; everything is under body.player, since the site's
   other pages load every stylesheet. */
body.player {
  --ink: #0b0c18; --arcade: #14162b; --panel: #22264a; --panel-hi: #2e3366; --empty: #2a2e55;
  --text: #f4f1de; --muted: #8d91b8; --yellow: #ffd447; --red: #ff5c7a; --pink: #f892b2;
  --silver: #c9d3e6; --bronze: #c8794a;
  --pixel: "Maimbrain Pixel", ui-monospace, monospace;
  --top: max(calc(env(safe-area-inset-top) - 10px), 12px);
  /* The card's corners and scale in browse (FeedView: 26pt, 0.94). */
  --radius: 26px; --browse-scale: 0.94;
  margin: 0; background: #000; color: #fff; overflow: hidden; overscroll-behavior: none; line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
body.player * { box-sizing: border-box; }
body.player [hidden] { display: none !important; }
body.player button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
body.player a { color: inherit; }
body.player .pixel { font-family: var(--pixel); text-transform: uppercase; font-weight: 400; }
body.player svg { width: 1em; height: 1em; display: block; }
/* The page's icon sheet (<symbol>s for <use>): out of the layout. */
body.player svg.icons { position: absolute; }
.player-root { position: fixed; inset: 0; background: #000; transition: background .3s; }
.player-root[data-mode=browse] { background: #0f0f0f; }

/* The game: full-bleed in play; in browse a rounded card, a little smaller, with a shadow. */
.player-root canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; clip-path: inset(0 round 0);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.05), clip-path .35s cubic-bezier(.2, .9, .3, 1.05); }
.player-root .card-shadow { position: fixed; border-radius: var(--radius); box-shadow: 0 8px 20px #0000008c; opacity: 0; transform-origin: 50% 50%; transition: opacity .3s, transform .35s; }
.player-root[data-mode=browse] canvas { transform: scale(var(--browse-scale)); clip-path: inset(var(--card-inset, 0) round var(--radius)); }
.player-root[data-mode=browse] .card-shadow { opacity: 1; transform: scale(var(--browse-scale)); }

/* Until the first frame: the icon, spinning. */
.player-root .poster {
  position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px;
  background: radial-gradient(circle at 50% 40%, #241640, #000 70%); transition: opacity .3s;
}
.player-root .poster img { width: 112px; height: 112px; border-radius: 26px; image-rendering: pixelated; box-shadow: 0 10px 40px #0008; }
.player-root .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff3; border-top-color: #fff; animation: mb-spin .8s linear infinite; }
@keyframes mb-spin { to { transform: rotate(1turn); } }
.player-root:not([data-state=loading]) .poster .spinner { display: none; }
.player-root[data-state=ready] .poster { opacity: 0; pointer-events: none; }

/* Darkened edges behind the browse controls, so they read over any game. */
.player-root .scrims i { position: fixed; pointer-events: none; }
.player-root .scrims .top { left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top) + 120px); background: linear-gradient(#000000a6, #0000); }
.player-root .scrims .bottom { left: 0; right: 0; bottom: 0; height: calc(env(safe-area-inset-bottom) + 300px); background: linear-gradient(#0000, #000000bf); }
.player-root .scrims .right { top: 0; bottom: 0; right: 0; width: 110px; background: linear-gradient(90deg, #0000, #00000066); }

/* In browse, taps land here (not on the game) and start play. */
.player-root .catcher { position: fixed; inset: 0; cursor: pointer; outline: none; }
.player-root[data-mode=play] .catcher, .player-root:not([data-state=ready]) .catcher { pointer-events: none; }

/* What only browse shows. */
.player-root :is(.scrims, .browse-bar, .overlay, .result) { transition: opacity .2s, visibility .2s; }
.player-root[data-mode=play] :is(.scrims, .browse-bar, .overlay, .result) { opacity: 0; visibility: hidden; }
.player-root:is([data-state=failed], [data-state=unavailable]) :is(.rail, .first-hint, .result, .scrims) { display: none; }

/* A paused round: dimmed, with a play button (the tap resumes it). */
.player-root .veil {
  position: fixed; inset: 0; display: none; place-content: center; justify-items: center; gap: 10px; pointer-events: none;
  background: #00000073; font-size: 15px; font-weight: 700;
}
.player-root.paused[data-mode=browse] .veil { display: grid; }
.player-root .play-disc { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: #ffffff2e; -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }

/* Top left: the mute button (both modes) and, in play, the pause pill. */
.player-root .corner { position: fixed; top: var(--top); left: 14px; height: 34px; display: flex; align-items: center; gap: 6px; z-index: 6; }
.player-root .glass {
  height: 30px; min-width: 30px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #fff;
  background: #3c3c4399; -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px #ffffff40;
}
.player-root .mute svg { font-size: 15px; }
.player-root .mute .off, .player-root.muted .mute .on { display: none; }
.player-root.muted .mute .off { display: block; }
.player-root .pill { display: none; min-width: 44px; padding: 0 15px; font-size: 13px; font-weight: 700; }
.player-root .pill svg { font-size: 13px; }
.player-root .pill span { display: none; white-space: nowrap; }
.player-root[data-mode=play] .pill { display: inline-flex; }
.player-root .pill.announce { padding: 0 12px; }
.player-root .pill.announce span { display: inline; animation: mb-in .25s ease-out; }
@keyframes mb-in { from { opacity: 0; transform: translateX(-6px); } }

/* Top while browsing: the brand where the app has its feed tabs, the app where it has your avatar. */
.player-root .browse-bar { position: fixed; top: var(--top); left: 14px; right: 14px; height: 34px; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; }
.player-root .wordmark { font-family: var(--pixel); font-size: 16px; text-transform: uppercase; text-decoration: none; color: #fff; text-shadow: 2px 2px 0 var(--ink); pointer-events: auto; }
.player-root .get-app { position: absolute; right: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; pointer-events: auto; box-shadow: 0 0 4px #0008; }
.player-root .get-app img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }

/* Bottom: title and creator, and the rail (FeedView's overlayLayer). */
.player-root .overlay {
  position: fixed; left: 24px; right: 24px; bottom: var(--overlay-bottom, 26px); z-index: 4; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.player-root .info { min-width: 0; text-shadow: 0 0 4px #000a; }
.player-root .info h1 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.player-root .info .by { margin: 0; display: flex; align-items: center; }
.player-root .info .by a { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 15px; font-weight: 600; color: #ffffffd9; text-decoration: none; pointer-events: auto; }
.player-root .info .by .face { width: 24px; height: 24px; font-size: 12px; box-shadow: 0 0 4px #000a; }
.player-root .rail { display: flex; flex-direction: column; align-items: center; gap: 18px; pointer-events: auto; }
.player-root .rail button { width: 44px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; filter: drop-shadow(0 0 3px #0009); }
.player-root .rail svg { font-size: 26px; }
.player-root .rail span { font-size: 11px; font-weight: 700; }
/* A phone held sideways: the rail fits under the top bar. */
@media (orientation: landscape) and (max-height: 500px) {
  .player-root .rail { gap: 4px; }
}

/* The card's "…". */
.player-root .menu {
  position: fixed; right: 20px; bottom: calc(var(--overlay-bottom, 26px) + 54px); z-index: 9; min-width: 230px; overflow: hidden;
  border-radius: 14px; background: #28283af2; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 10px 40px #0009;
}
.player-root .menu > * { display: block; width: 100%; padding: 12px 16px; text-align: left; font-size: 16px; color: #fff; text-decoration: none; border-bottom: .5px solid #ffffff1f; }
.player-root .menu > *:last-child { border-bottom: 0; }
.player-root .menu > *:active { background: #ffffff1a; }
/* A test's Report is a form (button_to): its button looks like the menu's others. */
.player-root .menu > form.menu-form { padding: 0; }
.player-root .menu > form.menu-form button { display: block; width: 100%; padding: 12px 16px; text-align: left; font: inherit; font-size: 16px; color: #ff8a9e; }
/* A test's build, from its link (TestPagesController). */
.player-root .info .test-tag { display: inline-block; margin: 0 0 6px; padding: 3px 7px; font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
  color: #0b0c18; background: #ff8ad8; text-shadow: none; }

/* Until the first play: how it works, in the title strip (which games keep clear) beside the creator. */
.player-root .first-hint {
  display: inline-block; margin-left: 10px; vertical-align: 1px; padding: 5px 10px; border-radius: 999px;
  background: #0000008c; font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; text-shadow: none;
}
.player-root.played .first-hint, .player-root:not([data-state=ready]) .first-hint { display: none; }

/* A landscape game on a phone held upright: "Turn your phone", then Ready (player.js showTurn). */
.player-root .turn {
  position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 24px 28px; text-align: center; background: #000000d9; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.player-root .turn h2 { margin: 18px 0 0; font-size: 20px; color: var(--yellow); text-shadow: 2px 2px 0 var(--ink); }
.player-root .turn p { margin: 0 0 12px; color: var(--muted); max-width: 300px; line-height: 1.45; }
.player-root .turn .button { min-width: 180px; }
.player-root .turn .link { padding: 10px 16px; }
.player-root .turn-phone { display: grid; place-items: center; width: 96px; height: 96px; }
.player-root .turn-phone i {
  display: block; width: 44px; height: 76px; border-radius: 9px; border: 4px solid var(--text);
  box-shadow: inset 0 -9px 0 -5px var(--text); animation: mb-turn 2.4s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes mb-turn { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
.player-root.turning :is(.corner, .browse-bar, .overlay, .result, .veil) { visibility: hidden; }

/* A run left mid-round: Resume or New run, then (after the fast-forward) Continue, over the card. */
.player-root .run {
  position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 24px 28px; text-align: center; background: #000000a6;
}
.player-root .run h2 { margin: 0; font-size: 20px; color: var(--yellow); text-shadow: 2px 2px 0 var(--ink); }
.player-root .run p { margin: 0 0 12px; color: var(--text); text-shadow: 0 0 4px #000; }
.player-root .run p:empty { display: none; }
.player-root .run .button { min-width: 200px; }
.player-root .run .link { padding: 10px 16px; color: var(--text); }
.player-root .run:not([data-step=choose]) :is(.resume, .new),
.player-root .run:not([data-step=loading]) .spinner,
.player-root .run:not([data-step=continue]) .continue { display: none; }
.player-root .run[data-step=continue] { cursor: pointer; }
.player-root.choosing :is(.overlay, .result, .veil) { visibility: hidden; }

/* After a round: the score (an arcade moment when it's your best) and the leaderboard. */
.player-root .result {
  position: fixed; left: 72px; right: 72px; bottom: calc(env(safe-area-inset-bottom) + 208px); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; pointer-events: none;
}
.player-root .result > * { pointer-events: auto; }
.player-root .hiscore {
  display: grid; gap: 10px; justify-items: center; padding: 12px 14px; background: #14162beb; color: var(--text);
  box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 6px 6px 0 var(--ink), 3px 6px 0 var(--ink), 6px 3px 0 var(--ink);
}
.player-root .hiscore span { color: var(--yellow); font-size: 16px; }
/* As big as fits between the rails (the screen less 2 × 72px, less the panel's padding; a character is at most .75em),
   in whole pixels of the font where round() works. */
.player-root .hiscore strong {
  font-size: min(32px, calc((100vw - 172px) / var(--chars, 1) / .75));
  font-size: round(down, min(32px, calc((100vw - 172px) / var(--chars, 1) / .75)), 8px);
  text-shadow: 3px 3px 0 var(--ink);
}
.player-root .blink { animation: mb-blink .8s ease-in-out infinite alternate; }
@keyframes mb-blink { from { opacity: .4; } }
.player-root .short { margin: 0; padding: 10px 16px; border-radius: 22px; background: #0000008c; font-size: 20px; font-weight: 700; }
.player-root .leaderboard { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #00000073; font-size: 15px; font-weight: 700; }

/* A short message under the top bar (a copied link). */
.player-root .toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 60px); transform: translate(-50%, -8px); z-index: 8;
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 700; white-space: nowrap;
  background: #3c3c43cc; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.player-root .toast.shown { opacity: 1; transform: translate(-50%, 0); }

/* Can't play here (no WebGPU, keyboard-only, it crashed): say so, offer the app. */
.player-root .notice {
  position: fixed; z-index: 7; inset: 0; display: none; place-content: center; justify-items: center; gap: 14px;
  padding: 24px 28px; text-align: center; background: radial-gradient(circle at 50% 35%, #241640, #000 75%);
}
.player-root:is([data-state=failed], [data-state=unavailable]) .notice { display: grid; }
/* The cat's canvas isn't the game's: none of .player-root canvas (fixed, full screen, scaled). */
.player-root .notice .belly-cat { position: static; inset: auto; width: 144px; height: 144px; transform: none; clip-path: none; }
.player-root .notice h2 { margin: 6px 0 0; font-size: 22px; }
.player-root .notice p { margin: 0 0 8px; color: var(--muted); max-width: 320px; line-height: 1.45; }
.player-root .notice p:empty { display: none; }

/* Buttons in the arcade look (sheets, the notice). */
body.player .button, body.player input[type=submit] {
  display: inline-block; padding: 13px 18px; border: 0; border-radius: 0; background: var(--yellow); color: var(--ink); cursor: pointer;
  font-family: var(--pixel); font-size: 16px; line-height: 1; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 6px 6px 0 var(--ink), 3px 6px 0 var(--ink), 6px 3px 0 var(--ink);
}
body.player .button:active, body.player input[type=submit]:active { transform: translate(3px, 3px); box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink); }
body.player button.link { color: var(--muted); font-size: 16px; }

/* Sheets: the beta waitlist and the leaderboard, in the arcade colors. */
.player-root .backdrop { position: fixed; inset: 0; z-index: 10; background: #0009; opacity: 0; pointer-events: none; transition: opacity .25s; }
.player-root.sheet-open .backdrop { opacity: 1; pointer-events: auto; }
.player-root .sheet {
  position: fixed; z-index: 11; left: 50%; bottom: 0; width: min(100%, 460px); max-height: 92%; overflow-y: auto;
  transform: translate(-50%, 100%); transition: transform .3s cubic-bezier(.2, .9, .3, 1);
  padding: 10px 22px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
  background: var(--arcade); color: var(--text); text-align: center; -webkit-user-select: text; user-select: text;
  box-shadow: 0 -3px 0 var(--empty);
}
.player-root .sheet.shown { transform: translate(-50%, 0); }
/* The drag handle: a strip across the top, the grabber drawn in its middle. */
.player-root .grabber { display: block; position: relative; height: 26px; margin: -10px -22px 4px; touch-action: none; cursor: grab; }
.player-root .grabber::after { content: ""; position: absolute; left: 50%; top: 10px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: #ffffff4d; }
.player-root .sheet.arcade header { touch-action: none; }
.player-root .sheet h2 { margin: 6px 0 10px; font-size: 16px; color: var(--yellow); text-shadow: 2px 2px 0 var(--ink); }
.player-root .sheet .why, .player-root .sheet .joined p { color: var(--muted); margin: 0 0 18px; line-height: 1.45; }
.player-root .sheet .joined strong { color: var(--text); }
.player-root .sheet-brain { width: 98px; height: auto; image-rendering: pixelated; margin-top: 4px; }
.player-root .sheet .error { margin: 0 0 12px; color: var(--red); }
.player-root .sheet .close { display: block; margin: 16px auto 0; padding: 8px 16px; }
.player-root .sheet > .button { width: 100%; margin-top: 18px; }

/* The leaderboard: LeaderboardView's rows. */
.player-root .sheet.arcade { text-align: left; padding-top: 0; }
.player-root .sheet.arcade header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 10px; background: var(--arcade); }
.player-root .sheet.arcade header h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); text-shadow: none; }
.player-root .sheet.arcade header .close { margin: 0; padding: 0; color: var(--yellow); font-weight: 600; }
body.player ol.top-scores { list-style: none; margin: 0; padding: 0; }
.player-root .top-scores li, .player-root .mine { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--empty); }
.player-root .rank { width: 36px; flex: none; font-size: 24px; color: var(--text); text-shadow: 2px 2px 0 var(--ink); }
.player-root .place-1 .rank { color: var(--yellow); } .player-root .place-2 .rank { color: var(--silver); } .player-root .place-3 .rank { color: var(--bronze); }
.player-root .face { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--panel-hi); color: var(--yellow); font-size: 16px; }
.player-root .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.player-root .who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The game's creator on its own leaderboard (LeaderboardView's CREATOR tag): only the name is clipped, never the tag. */
.player-root .who .name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.player-root .who .creator { flex: none; padding: 2px 4px; border: 1px solid var(--yellow); background: var(--panel-hi); color: var(--yellow); font-size: 9px; }
.player-root .who a, .player-root .who small { color: var(--muted); font-size: 12px; text-decoration: none; }
.player-root .top-scores strong, .player-root .mine strong { font-size: 24px; text-shadow: 2px 2px 0 var(--ink); }
.player-root .mine { margin: 12px -22px 0; padding: 10px 22px; background: var(--panel-hi); border-top: 2px solid var(--yellow); border-bottom: 0; }
.player-root .mine b, .player-root .mine strong { color: var(--yellow); }
/* Scores past 8 characters (millions): under the name, beside the handle, so the name keeps the line (LeaderboardView). */
.player-root .long-scores :is(.top-scores li, .mine) { display: grid; grid-template-columns: 36px 32px minmax(0, 1fr) auto; gap: 2px 10px; }
.player-root .long-scores :is(.rank, .face) { grid-row: 1 / 3; }
.player-root .long-scores .who { display: contents; }
.player-root .long-scores .who > :first-child { grid-column: 3 / 5; grid-row: 1; min-width: 0; }
.player-root .long-scores .who > :last-child { grid-column: 3; grid-row: 2; align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-root .long-scores :is(.top-scores, .mine) strong { grid-column: 4; grid-row: 2; font-size: 16px; }
.player-root .sheet .empty { color: var(--muted); }

/* The title and description line open About this game. */
.player-root .info h1 button { font: inherit; text-align: left; pointer-events: auto; }
.player-root .info .caption {
  display: block; max-width: 100%; margin: 0 0 2px; font-size: 13px; font-weight: 500; opacity: .75; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto;
}
.player-root .about-head { display: flex; gap: 14px; align-items: center; margin: 4px 0 16px; }
.player-root .about-head img { width: 64px; height: 64px; image-rendering: pixelated; clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)); }
.player-root .about-head div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.player-root .about-head strong { font-size: 22px; }
.player-root .about-head a { color: var(--muted); font-weight: 600; text-decoration: none; }
.player-root .about-head a.by { display: flex; align-items: center; gap: 6px; }
.player-root .about-head .face { width: 20px; height: 20px; clip-path: none; font-size: 11px; }
.player-root .about-head span { color: var(--muted); font-size: 16px; }
.player-root .about .description { margin: 0 0 18px; font-weight: 500; line-height: 1.45; white-space: pre-line; }
.player-root .about h3 { margin: 18px 0 10px; font-size: 16px; color: var(--yellow); }
.player-root .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.player-root .chip {
  padding: 8px 10px; font-size: 15px; font-weight: 700; background: var(--panel-hi); color: var(--text);
  box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
}
.player-root .chip.needed { background: var(--yellow); color: var(--ink); }
.player-root .made {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 8px 12px; background: var(--panel-hi);
  box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
}
.player-root .made .logo { flex: none; }
.player-root .made span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.player-root .made b { font-size: 15px; }
.player-root .made small { color: var(--muted); font-size: 13px; font-weight: 600; }

/* The waitlist form (also on /beta). */
.beta-form { text-align: left; }
.beta-form input[type=email] {
  width: 100%; padding: 12px 13px; margin: 0 0 16px; border: 0; border-radius: 0; background: var(--ink, #0b0c18); color: var(--text, #f4f1de); font: inherit; font-size: 16px; /* no zoom on iOS */
  box-shadow: 0 -3px 0 var(--empty, #2a2e55), 0 3px 0 var(--empty, #2a2e55), -3px 0 0 var(--empty, #2a2e55), 3px 0 0 var(--empty, #2a2e55);
}
.beta-form input[type=email]:focus { outline: none; box-shadow: 0 -3px 0 #ffd447, 0 3px 0 #ffd447, -3px 0 0 #ffd447, 3px 0 0 #ffd447; }
.beta-form input[type=submit] { width: 100%; }
.beta-form .fine { margin: 14px 0 0; color: var(--muted, #8d91b8); font-size: 0.82rem; text-align: center; }
.beta-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .player-root canvas, .player-root .card-shadow, .player-root .sheet, .player-root .toast { transition: none; }
  .player-root .spinner, .player-root .blink, .player-root .turn-phone i { animation: none; }
  .player-root .turn-phone i { transform: rotate(-90deg); }
}
.player-root .pixelated { image-rendering: pixelated; }