/* Snake's interface, in the pravar.design system (/vendor/tokens.css and
   /vendor/components.css, identical to pravar.design/system v0.1).

   Rules this file keeps:
   - Grounds are Black 100; edges are White 20 hairlines; secondary text is
     White 80. Nothing else is grey.
   - IBM Plex Sans for everything; IBM Plex Mono only for the B3c labels
     (lowercase, 8% tracking), which name things: "score", "room", "bots".
   - The pill (50px, radius 25) is the only button. Green Light fill is "go"
     (the one main action on a screen); Black with a hairline is secondary;
     Cyan Bright, the game's own colour, marks you (your worm, your rank,
     the room you're in) and joining.
   - Big numbers use the light H1/H2 weights; the 32px-radius hairline card
     and the stat grid hold groups.
   - Hues mean things: Green points, Pink a cut-off, Yellow a Star, Red an
     Ember or danger, Orange a Comet. */

:root {
  --accent: var(--cyan-bright);
  --go: var(--green-light);
  --danger: var(--red-light);
  --line: var(--white-20);
  --muted: var(--white-80);
  --sheet: rgb(0 0 0 / .9);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --gut: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0;
  font: var(--t-b2); font-family: var(--font-sans);
  background: var(--black-100); color: var(--white-100);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
button, input, output { font: inherit; color: inherit; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── the stage ─────────────────────────────────────────── */
#game-container { position: absolute; inset: 0; }
#view-split-wrapper { position: absolute; inset: 0; display: flex; }
.split-pane { position: relative; min-width: 0; }
#viewport-3d-pane { flex: 1 1 auto; height: 100%; }
#game-canvas, #touch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#touch-canvas { pointer-events: none; }

/* ── type helpers ──────────────────────────────────────── */
.lbl { font: var(--t-b3c); letter-spacing: var(--ls-caps); color: var(--muted); }
.lbl--accent { color: var(--accent); }
.lbl--danger { color: var(--danger); }
.muted { color: var(--muted); }
.hint { font: var(--t-b3); color: var(--muted); }
.hint:empty, .status:empty { display: none; }
.status { font: var(--t-b3); color: var(--danger); }
.center { text-align: center; }

/* ── buttons: components.css's pill, plus the game's variants ── */
.btn { justify-content: center; }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--black-100); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn:disabled::after { opacity: 0; }
.btn:focus-visible, .field:focus-within, .tile:focus-visible, .level:focus-visible, .textlink:focus-visible, .row-toggle:focus-visible, .split button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
/* The hero pill: the one thing to press on a screen. Two lines and a round end. */
.btn--hero { height: 64px; border-radius: 32px; padding: 0 8px 0 24px; justify-content: space-between; text-align: left; }
.btn__stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.btn__title { font: var(--t-b1a); }
.btn__sub { font: var(--t-b3c); letter-spacing: var(--ls-caps); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn__end { flex: none; width: 48px; height: 48px; border-radius: 24px; display: grid; place-items: center; background: var(--black-100); color: var(--btn-bg); }
.btn__end .icon { width: 20px; height: 20px; }
.btn--secondary .btn__end { background: var(--white-10); color: var(--white-100); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.textlink { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: var(--t-b3c); letter-spacing: var(--ls-caps); color: var(--muted); text-decoration: none; transition: color .2s; }
.textlink:hover { color: var(--white-100); }
.textlink .icon { width: 20px; height: 20px; }
.textlink--danger { color: var(--danger); }

/* ── fields: the pill, outlined ────────────────────────── */
.field { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 6px 0 18px; border-radius: 25px;
  background: var(--black-100); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.field:focus-within { box-shadow: inset 0 0 0 1px var(--accent); outline: 0; }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: var(--t-b2a);
  user-select: text; -webkit-user-select: text; }
.field input::placeholder { color: var(--white-20); }
.field .btn { height: 38px; padding: 0 16px; flex: none; }
.field .btn .icon { width: 18px; height: 18px; }
.field--code input { font: var(--fw-regular) 20px/1 var(--font-mono); letter-spacing: .4em; text-transform: uppercase; }
.swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--c, var(--accent)); box-shadow: 0 0 12px var(--c, var(--accent)); }

/* ── chips (28px pills) ────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 14px; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line); font: var(--t-b3c); letter-spacing: var(--ls-caps); color: var(--muted); }
.chip--go { background: var(--go); color: var(--black-100); box-shadow: none; }
.chip--accent { background: var(--accent); color: var(--black-100); box-shadow: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, var(--accent)); }
.dot--glow { box-shadow: 0 0 10px var(--c, var(--accent)); }

/* ── segmented control (controls: auto / touch / mouse / keys) ── */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1px; gap: 1px; border-radius: 25px; overflow: hidden; background: var(--line); }
.tile { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 0; background: var(--black-100); cursor: pointer;
  font: var(--t-b3a); color: var(--muted); transition: color .15s, background .15s; }
.tile .icon { width: 18px; height: 18px; }
.tile:hover { color: var(--white-100); }
.tile.active { background: #0a201c; color: var(--white-100); }
.tile.active .icon { color: var(--accent); }
.tile:first-child { border-radius: 24px 0 0 24px; }
.tile:last-child { border-radius: 0 24px 24px 0; }
@media (max-width: 380px) { .tile span { display: none; } }

/* ── switch row (sound) ────────────────────────────────── */
.row-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; padding: 0 16px 0 20px;
  border: 0; border-radius: 32px; background: var(--black-100); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; text-align: left; }
.row-toggle > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.row-toggle b { font: var(--t-b2a); }
.switch { position: relative; width: 48px; height: 28px; border-radius: 14px; flex: none; background: var(--white-20); transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white-100); transition: transform .3s var(--ease-spring); }
.row-toggle[aria-checked="true"] .switch { background: var(--accent); }
.row-toggle[aria-checked="true"] .switch::after { transform: translateX(20px); background: var(--black-100); }

/* ── overlays ───────────────────────────────────────────
   Two kinds. A page (home, lobby, guide, TV home) is the whole screen,
   one column, scrolling if it has to. A sheet (menu, paused, results,
   offline) is a hairline card over the blurred game. */
.overlay { position: absolute; inset: 0; z-index: 10; display: flex; justify-content: center; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); touch-action: pan-y; }
.overlay.on { opacity: 1; pointer-events: auto; }
.overlay--page { background: var(--black-100); }
.overlay--lobby { background: rgb(0 0 0 / .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.overlay--sheet { align-items: center; padding: max(16px, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l));
  background: rgb(0 0 0 / .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.page { position: relative; width: 100%; max-width: 440px; min-height: 100%; display: flex; flex-direction: column; gap: 24px;
  padding: calc(var(--safe-t) + 28px) max(var(--gut), var(--safe-r)) calc(var(--safe-b) + 20px) max(var(--gut), var(--safe-l));
  transform: translateY(10px); transition: transform .5s var(--ease-out); }
.overlay.on .page { transform: none; }
.page__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; box-shadow: 0 -1px 0 var(--line); }
.sec { display: flex; flex-direction: column; gap: 12px; }
.sec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sec__head h2 { font: var(--t-h4); }
.sec__head h2 .muted { font-weight: var(--fw-regular); }

.sheet { width: min(100%, 400px); margin: auto; display: flex; flex-direction: column; gap: 20px; padding: 28px 24px 24px;
  background: var(--sheet); border-radius: 32px; box-shadow: inset 0 0 0 1px var(--line), 0 40px 120px -40px rgb(0 0 0 / .9);
  transform: translateY(12px) scale(.98); transition: transform .45s var(--ease-out); }
.overlay.on .sheet { transform: none; }
.sheet__head { display: flex; flex-direction: column; gap: 8px; }
.sheet__head h2 { font: var(--t-h3); text-wrap: balance; }
.links { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ── home ──────────────────────────────────────────────── */
.home__glow { position: absolute; inset: -40px -80px auto; height: 400px; pointer-events: none;
  background: radial-gradient(50% 50% at 60% 40%, rgb(75 255 225 / .14), rgb(0 0 0 / 0) 70%); }
.hero { position: relative; display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.hero__worm { display: flex; align-items: flex-end; height: 34px; }
.hero__worm i { flex: none; border-radius: 50%; background: var(--accent); margin-left: -6px; animation: wriggle 2.4s ease-in-out infinite; }
.hero__worm i:first-child { margin-left: 0; }
.hero__worm i:nth-child(1) { width: 30px; height: 30px; animation-delay: 0s; }
.hero__worm i:nth-child(2) { width: 28px; height: 28px; opacity: .86; animation-delay: -.15s; }
.hero__worm i:nth-child(3) { width: 25px; height: 25px; opacity: .78; animation-delay: -.3s; }
.hero__worm i:nth-child(4) { width: 23px; height: 23px; opacity: .7; animation-delay: -.45s; }
.hero__worm i:nth-child(5) { width: 21px; height: 21px; opacity: .62; animation-delay: -.6s; }
.hero__worm i:nth-child(6) { width: 18px; height: 18px; opacity: .54; animation-delay: -.75s; }
.hero__worm i:nth-child(7) { width: 16px; height: 16px; opacity: .46; animation-delay: -.9s; }
.hero__worm i:nth-child(8) { width: 14px; height: 14px; opacity: .38; animation-delay: -1.05s; }
.hero__worm i:nth-child(9) { width: 12px; height: 12px; opacity: .3; animation-delay: -1.2s; }
@keyframes wriggle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero__title { font: var(--t-h1); line-height: .95; }
.hero__lede { max-width: 320px; font: var(--t-b2); color: var(--muted); }
@media (max-height: 700px) { .hero { margin-top: 0; } .hero__title { font-size: 64px; } .hero__lede { display: none; } }

/* ── lobby ─────────────────────────────────────────────── */
.lobby__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lobby__room { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.room-code { font: var(--fw-medium) 28px/1.2 var(--font-mono); letter-spacing: .3em; margin-right: -.3em; color: var(--accent); }

/* Bots: one split pill, [−] 5 bots [+]. */
.split { display: inline-flex; align-items: center; height: 40px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.split button { width: 40px; height: 40px; border: 0; border-radius: 20px; background: none; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.split button:hover:not(:disabled) { background: var(--white-10); }
.split button:disabled { opacity: .3; cursor: default; }
.split button .icon { width: 18px; height: 18px; }
.split output { padding: 0 12px; font: var(--t-b3a); white-space: nowrap; }
.split__div { width: 1px; height: 20px; background: var(--line); }

/* Players: one chip each, wrapping. You're outlined in your colour; the host wears the crown. */
.crew { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crew li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 20px; min-width: 0;
  box-shadow: inset 0 0 0 1px var(--line); font: var(--t-b3a); animation: cellIn .4s var(--ease-out) both; }
.crew li .dot { width: 10px; height: 10px; box-shadow: 0 0 10px var(--c); }
.crew li .lbl { font-size: 12px; }
.crew li.me { box-shadow: inset 0 0 0 1px var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.crew li .crown { width: 14px; height: 14px; color: var(--yellow-light); }
.crew li.off { opacity: .45; }
@keyframes cellIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Levels: cards that scroll sideways and snap, running off both edges of the screen. */
.sec--bleed { margin-inline: calc(-1 * max(var(--gut), var(--safe-l))) calc(-1 * max(var(--gut), var(--safe-r))); }
.sec--bleed > .sec__head { padding-inline: max(var(--gut), var(--safe-l)) max(var(--gut), var(--safe-r)); }
.levels { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 2px max(var(--gut), var(--safe-r)) 6px max(var(--gut), var(--safe-l)); scroll-padding-inline: max(var(--gut), var(--safe-l)); touch-action: pan-x pan-y; }
.levels::-webkit-scrollbar { display: none; }
.level { position: relative; flex: none; width: min(260px, 72vw); display: flex; flex-direction: column; border: 0; border-radius: 32px; overflow: hidden;
  background: var(--black-100); color: var(--white-100); text-align: left; cursor: pointer; scroll-snap-align: start; transition: transform .4s var(--ease-spring); }
/* The edge sits over everything inside, the picture included, so the chosen ring is never covered. */
.level::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; transition: box-shadow .2s; }
.level[aria-checked="true"]::after { box-shadow: inset 0 0 0 2px var(--accent); }
.level:hover:not(:disabled) { transform: translateY(-2px); }
.level:disabled { cursor: default; }
.level__art { position: relative; height: 104px; flex: none; overflow: hidden; background: #0d0d0d center / cover no-repeat; box-shadow: inset 0 -1px 0 var(--line); }
.level__check { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center;
  background: var(--accent); color: var(--black-100); transform: scale(0); transition: transform .35s var(--ease-spring); }
.level__check .icon { width: 18px; height: 18px; }
.level[aria-checked="true"] .level__check { transform: scale(1); }
.level__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 16px; }
.level__name { font: var(--t-b2a); }
.level__blurb { font: var(--t-b3); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.level__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.level__badge { position: absolute; top: 12px; left: 12px; }
/* Classic levels: the rock drawn in CSS. Terrain levels: a picture of the map. */
.level__art::before { content: ""; position: absolute; left: 50%; top: 56%; width: 64%; height: 54%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(60% 60% at 40% 35%, #5c5a66, #2a2930 60%, #121116); box-shadow: 0 8px 0 #050507; }
.level[data-terrain] .level__art::before { display: none; }
.level[data-id="crumble"] .level__art::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 22% 62%, var(--red-light) 0 3px, transparent 4px), radial-gradient(circle at 74% 70%, var(--red-light) 0 3px, transparent 4px), radial-gradient(circle at 62% 30%, var(--orange-light) 0 2px, transparent 3px); }
.level[data-id="gatehouse"] .level__art::after { content: ""; position: absolute; left: 50%; top: 56%; width: 30%; height: 26%; transform: translate(-50%, -50%);
  box-shadow: inset 2px 2px 0 var(--red-light), inset -2px -2px 0 var(--blue-light); }
.level[data-id="wind"] .level__art::after { content: ""; position: absolute; left: 50%; top: 56%; width: 46%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px dashed var(--yellow-light); opacity: .8; }
.level[data-id="caldera-final"] .level__art { background-image: url(/img/levels/caldera-final.jpg); }
.level[data-id="aqueduct-final"] .level__art { background-image: url(/img/levels/aqueduct-final.jpg); }
.level[data-id="rift-final"] .level__art { background-image: url(/img/levels/rift-final.jpg); }
.level[data-id="ziggurat-final"] .level__art { background-image: url(/img/levels/ziggurat-final.jpg); }
.level[data-id="cascade"] .level__art { background-image: url(/img/levels/cascade.jpg); }
.level[data-id="steps"] .level__art { background-image: url(/img/levels/steps.jpg); }
.lobby__go { position: sticky; bottom: 0; margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 8px;
  background: linear-gradient(to top, rgb(0 0 0 / .95) 70%, rgb(0 0 0 / 0)); }
.wait b { color: var(--white-100); font-weight: var(--fw-semibold); }

/* ── HUD ─────────────────────────────────────────────────
   Only what changes your next move: score and place (top left), time
   (top centre), pause and radar (top right), boost (bottom right). No
   panels behind them: light text with a soft shadow over the game. */
#hud { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none;
  padding: calc(var(--safe-t) + 14px) max(14px, var(--safe-r)) 0 max(16px, var(--safe-l)); text-shadow: 0 1px 12px rgb(0 0 0 / .7); }
#hud > * { pointer-events: auto; }
#hud-left { display: flex; flex-direction: column; gap: 6px; }
#hud-score { font: var(--fw-regular) 44px/1 var(--font-sans); font-variant-numeric: tabular-nums; display: inline-block; transform-origin: left center; }
#hud-score.bump { animation: bump .35s var(--ease-spring); }
#hud-score.drop { animation: drop .45s ease; }
@keyframes bump { 40% { transform: scale(1.12); color: var(--go); } }
@keyframes drop { 30% { transform: translateX(-4px); color: var(--danger); } 60% { transform: translateX(3px); } }
#meta { display: flex; align-items: center; gap: 8px; text-shadow: none; }
#meta .chip { height: 24px; padding: 0 9px; border-radius: 12px; font-size: 13px; }
#hud-gap { font-size: 13px; text-shadow: 0 1px 8px rgb(0 0 0 / .8); }
#hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.roundBtn { width: 44px; height: 44px; border: 0; border-radius: 22px; display: grid; place-items: center; cursor: pointer; flex: none;
  background: rgb(0 0 0 / .6); box-shadow: inset 0 0 0 1px var(--line); color: var(--white-100); transition: transform .4s var(--ease-spring), background .2s; }
.roundBtn:hover { transform: scale(1.05); background: rgb(30 30 30 / .9); }
.roundBtn:active { transform: scale(.94); }
.roundBtn .icon { width: 20px; height: 20px; }
.roundBtn--s { width: 40px; height: 40px; }
.radar-module { position: relative; width: 136px; height: 136px; border-radius: 50%; background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px var(--line); }
#minimap-canvas { width: 100%; height: 100%; display: block; border-radius: 50%; opacity: .92; }

#round-chip { position: absolute; z-index: 5; top: calc(var(--safe-t) + 22px); left: 50%; transform: translateX(-50%); pointer-events: none;
  font: var(--t-b1a); font-variant-numeric: tabular-nums; text-shadow: 0 1px 12px rgb(0 0 0 / .8); }
#round-time.low { color: var(--danger); }

/* Boost: a round button for the right thumb. The ring is your stamina. */
#btn-boost { position: absolute; z-index: 5; right: max(18px, var(--safe-r)); bottom: calc(var(--safe-b) + 26px);
  width: 84px; height: 84px; padding: 3px; border: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(var(--ring, var(--accent)) calc(var(--st, 1) * 360deg), var(--white-10) 0);
  transition: transform .2s var(--ease-spring); touch-action: none; }
#btn-boost > span { width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgb(0 0 0 / .75); }
#btn-boost .icon { width: 22px; height: 22px; color: var(--ring, var(--accent)); }
#btn-boost .lbl { font-size: 12px; }
#btn-boost.held { transform: scale(.92); }
#btn-boost.held > span { background: #071a17; }
#btn-boost.exhausted { --ring: var(--danger); }
#btn-boost.surge { --ring: var(--orange-light); }
@media (pointer: fine) { #btn-boost { display: none; } }
@media (min-width: 900px) {
  #hud { padding-inline: max(32px, var(--safe-l)) max(32px, var(--safe-r)); padding-top: calc(var(--safe-t) + 24px); }
  #round-chip { top: calc(var(--safe-t) + 32px); }
  .radar-module { width: 200px; height: 200px; }
  #hud-score { font-size: 56px; }
}
@media (max-height: 560px) { .radar-module { width: 104px; height: 104px; } }

/* ── in-game feedback ──────────────────────────────────── */
#tags { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; transform: translate(-50%, -100%); white-space: nowrap;
  font: var(--t-b3c); font-size: 12px; letter-spacing: var(--ls-caps); color: var(--c); text-shadow: 0 0 8px rgb(0 0 0 / .95), 0 0 2px #000; }
.tag__arrow { display: none; width: 0; height: 0; border-left: 9px solid var(--c); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: rotate(var(--rot, 0rad)); }
.tag--edge { padding: 4px 10px; border-radius: 14px; background: rgb(0 0 0 / .8); box-shadow: inset 0 0 0 1px var(--line); text-shadow: none; }
.tag--edge .tag__arrow { display: block; }
body.tv .tag { font-size: clamp(12px, 1.1vw, 20px); }

#pops { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: var(--t-b3c); letter-spacing: var(--ls-caps);
  color: var(--c, var(--white-100)); text-shadow: 0 0 12px var(--c, transparent); animation: pop 1s var(--ease-out) forwards; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -260%); } }

/* Toast: what just happened to you, as a pill above your thumbs. */
#toast { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--safe-b) + 140px); max-width: calc(100vw - 32px); transform: translate(-50%, 10px) scale(.96);
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 20px; border-radius: 25px; text-align: center;
  background: rgb(0 0 0 / .9); box-shadow: inset 0 0 0 1px var(--line); font: var(--t-b3a); line-height: 1.35;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease-spring); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast b { color: var(--c, var(--accent)); font-weight: var(--fw-semibold); }
@media (pointer: fine) { #toast { bottom: calc(var(--safe-b) + 32px); } }

/* Kill feed: under the clock. */
/* Kill feed: bottom left, across from boost (the top is busy: you, the clock, the radar). Newest at the bottom. */
#killfeed { position: absolute; z-index: 5; left: max(16px, var(--safe-l)); bottom: calc(var(--safe-b) + 28px); max-width: calc(100vw - 160px); list-style: none;
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; pointer-events: none; }
#killfeed li { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; white-space: nowrap;
  background: rgb(0 0 0 / .8); box-shadow: inset 0 0 0 1px var(--line); font: var(--t-b3); font-size: 13px; color: var(--muted);
  animation: feedIn .35s var(--ease-out) both; transition: opacity .4s, transform .4s; }
#killfeed li.out { opacity: 0; transform: translateY(-6px); }
#killfeed b { color: var(--c); font-weight: var(--fw-semibold); }
#killfeed svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { #killfeed li { font-size: 12px; } }
#killfeed li { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Who you are, during the countdown. */
#you-chip { position: absolute; z-index: 8; left: 50%; bottom: calc(var(--safe-b) + 32px); transform: translateX(-50%); pointer-events: none;
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 14px; border-radius: 20px;
  background: rgb(0 0 0 / .8); box-shadow: inset 0 0 0 1px var(--line); font: var(--t-b3a); }
#you-chip .dot { width: 12px; height: 12px; box-shadow: 0 0 12px var(--c); }

/* Countdown: one light number, the level under it. */
#countdown { position: absolute; z-index: 8; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; }
#countdown-n { font: var(--fw-regular) min(44vw, 40vh)/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--white-100);
  text-shadow: 0 0 60px rgb(0 0 0 / .6); animation: tick 1s var(--ease-out) infinite; }
#countdown.go #countdown-n { color: var(--go); animation: go .7s var(--ease-out) both; }
@keyframes tick { 0% { transform: scale(1.3); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(.92); opacity: 0; } }
@keyframes go { 0% { transform: scale(.6); opacity: 0; } 25% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* Crashed: a small sheet in the middle. */
.card { position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 32px; text-align: center;
  background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
#death-card { pointer-events: none; animation: cardIn .45s var(--ease-out) both; }
#death-card.hidden { animation: none; }
#death-card .title { font: var(--t-h4); text-wrap: balance; }
#death-card .title b { color: var(--c); font-weight: var(--fw-medium); }
.death-bar { height: 2px; border-radius: 1px; background: var(--white-10); overflow: hidden; }
.death-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, -42%) scale(.95); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ── results ───────────────────────────────────────────── */
.ranking { list-style: none; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ranking li { display: grid; grid-template-columns: 30px 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; height: 52px; padding: 0 18px;
  box-shadow: inset 0 -1px 0 var(--line); animation: cellIn .5s var(--ease-out) both; }
.ranking li:last-child { box-shadow: none; }
.ranking li:nth-child(2) { animation-delay: .06s; } .ranking li:nth-child(3) { animation-delay: .12s; } .ranking li:nth-child(n+4) { animation-delay: .18s; }
.ranking .pos { font: var(--t-b3c); color: var(--muted); }
.ranking li:first-child .pos { color: var(--go); }
.ranking .dot { width: 10px; height: 10px; box-shadow: 0 0 10px var(--c); }
.ranking .n { font: var(--t-b2a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .k { font: var(--t-b3c); color: var(--muted); }
.ranking .s { font: var(--t-h4); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.ranking li.me { background: rgb(75 255 225 / .1); }
.ranking li.me .n { color: var(--accent); }

/* ── guide ─────────────────────────────────────────────── */
.guide__title { font: var(--t-h3); text-wrap: balance; }
.howlist { list-style: none; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.howlist li { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; font: var(--t-b3); color: var(--muted); box-shadow: inset 0 -1px 0 var(--line); }
.howlist li:last-child { box-shadow: none; }
.howlist b { font: var(--t-b3a); color: var(--white-100); }
.items { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; border-radius: 24px; overflow: hidden; background: var(--line); }
.items li { display: flex; gap: 12px; padding: 14px 16px; background: var(--black-100); }
.items span { display: flex; flex-direction: column; gap: 2px; font: var(--t-b3); color: var(--muted); }
.items b { font: var(--t-b3a); color: var(--white-100); }
.ico { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: var(--c); filter: drop-shadow(0 0 6px var(--c)); }

/* ── TV / big screen ───────────────────────────────────── */
body.tv { --side: clamp(280px, 26vw, 460px); cursor: none; }
body.tv .overlay { cursor: auto; }
body.tv #viewport-3d-pane { margin-right: var(--side); }
#side { position: absolute; z-index: 5; inset: 0 0 0 auto; width: var(--side); display: flex; flex-direction: column; gap: 2.4vh;
  padding: 3.2vh 2vw; background: var(--black-100); box-shadow: inset 1px 0 0 var(--line); overflow: hidden; }
.side__title { font: var(--t-h2); font-size: clamp(32px, 3.2vw, 64px); line-height: 1; }
.side__join { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 2.4vh 1.2vw; border-radius: 32px; box-shadow: inset 0 0 0 1px var(--line); }
.side__url { font: var(--t-b2a); font-size: clamp(14px, 1.2vw, 22px); word-break: break-all; }
.side__code { font: var(--fw-medium) clamp(36px, 4.2vw, 80px)/1.05 var(--font-mono); letter-spacing: .2em; margin-right: -.2em; color: var(--accent); }
#qr { margin-top: 6px; }
#qr img { display: block; width: clamp(96px, 10vw, 190px) !important; height: auto !important; padding: 8px; background: #fff; border-radius: 16px; image-rendering: pixelated; }
.side__timer { font: var(--t-h2); font-size: clamp(36px, 3.6vw, 72px); font-variant-numeric: tabular-nums; text-align: center; }
.side__timer.low { color: var(--danger); }
.side__timer:empty { display: none; }
.board--big { margin-top: 0; flex: 1; background: none; }
.board--big li { height: auto; padding: 1.1vh 1vw; font: var(--t-b2); font-size: clamp(14px, 1.3vw, 24px); }
.board--big b { font-size: inherit; }
.board--big .dot { width: .6em; height: .6em; }
.card--tv { left: calc((100vw - var(--side)) / 2); width: min(calc(100vw - var(--side) - 48px), 760px); padding: 3.2vh 2.8vw; gap: 1.4vh; }
.card--tv .title { font: var(--t-h3); font-size: clamp(24px, 2.6vw, 48px); }
.card--tv .lbl { font-size: clamp(13px, 1vw, 18px); }
.card--tv .hint { font-size: clamp(14px, 1.2vw, 22px); }
.roster--tv { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1vh .8vw; }
.roster--tv li { display: inline-flex; align-items: center; gap: .5em; padding: .45em 1em .45em .8em; border-radius: 2em; box-shadow: inset 0 0 0 1px var(--line); font: var(--t-b2a); font-size: clamp(14px, 1.3vw, 24px); }
.roster--tv li .dot { width: .6em; height: .6em; box-shadow: 0 0 10px var(--c); }
.roster--tv li.off { opacity: .45; }
.roster--tv .crown, .roster--tv .lbl { display: none; }
body.tv #results-overlay { right: var(--side); }
body.tv #results-overlay .sheet { width: min(100%, 640px); }
body.tv #toast { left: calc((100vw - var(--side)) / 2); bottom: 4vh; }
body.tv #killfeed { top: 3vh; bottom: auto; left: calc((100vw - var(--side)) / 2); transform: translateX(-50%); flex-direction: column; align-items: center; }
body.tv #killfeed li { height: auto; padding: .5em 1.1em; border-radius: 2em; font-size: clamp(13px, 1.1vw, 22px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The lobby fits one phone screen: tighter rhythm than the other pages. */
#lobby .page { gap: 18px; padding-top: calc(var(--safe-t) + 20px); }
#lobby .links { margin-top: -4px; }
@media (max-height: 760px) { #lobby .level__blurb { display: none; } #lobby .level__art { height: 88px; } }

/* ── home ──────────────────────────────────────────────── */
.page--home .hero { margin-top: 8vh; }
.home__actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.btn--tall { height: 56px; border-radius: 28px; }
.page--home .page__foot { margin-top: 0; }

/* ── sheets: a title bar with a close button ───────────── */
.sheet__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet__bar h2 { font: var(--t-h3); }
.sheet__bar h2 .lbl { font-size: 14px; margin-left: 6px; }
.or { display: flex; align-items: center; gap: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── the four orbs (and a cut-off) ─────────────────────────
   Shape and colour say what each does: a green dot is plenty, a yellow
   star is rare, an orange comet is fast, red spikes hurt. The number is
   the biggest thing in each row. */
.orbs { list-style: none; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.orbs li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 18px 12px 14px; box-shadow: inset 0 -1px 0 var(--line); }
.orbs li:last-child { box-shadow: none; }
.orb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #000); }
.orb .ico { width: 22px; height: 22px; margin: 0; }
.orb .ico--stroke { fill: none; stroke: var(--c); }
.orbs .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.orbs .t b { font: var(--t-b2a); }
.orbs .t span { font: var(--t-b3); color: var(--muted); line-height: 1.3; }
.orbs .v { font: var(--fw-regular) 28px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--c); }
.orbs li.bad .t b { color: var(--danger); }

.orbstrip { list-style: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.orbstrip li { display: inline-flex; align-items: center; gap: 6px; font: var(--t-b3c); letter-spacing: 0; color: var(--white-100); }
.orbstrip .ico { width: 16px; height: 16px; margin: 0; }
.orbstrip .ico--stroke { fill: none; stroke: var(--c); }

.rule { display: flex; gap: 12px; align-items: flex-start; font: var(--t-b3); color: var(--muted); }
.rule b { color: var(--white-100); font-weight: var(--fw-semibold); }
.rule__ico { flex: none; width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; background: var(--white-10); color: var(--white-100); }
.rule__ico .icon { width: 18px; height: 18px; }
.rule--danger .rule__ico { background: rgb(255 71 58 / .16); color: var(--danger); }
.sheet--rules { gap: 16px; }
.sheet--rules .sheet__head h2 { font: var(--t-h4); }

/* The lobby's score card: the strip, and a way into the full rules. */
.scorecard { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 14px 16px 12px; border: 0; border-radius: 24px; cursor: pointer;
  background: none; box-shadow: inset 0 0 0 1px var(--line); transition: background .2s; }
.scorecard:hover { background: var(--white-5); }
.scorecard > .lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.scorecard .icon { width: 14px; height: 14px; }

/* Countdown: the goal and the points, once more, while you wait. */
.countdown__goal { font: var(--t-h4); text-shadow: 0 2px 20px rgb(0 0 0 / .8); }
#countdown .orbstrip { padding: 10px 16px; border-radius: 20px; background: rgb(0 0 0 / .7); box-shadow: inset 0 0 0 1px var(--line); }
.orbstrip--tv { justify-content: space-between; padding: 1.4vh 1vw; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line); }
.orbstrip--tv li { font-size: clamp(13px, 1.1vw, 20px); }

/* Death: smaller, and below the middle, so you can still see what happened. */
#death-card { top: 64%; width: min(300px, calc(100vw - 48px)); padding: 18px 20px; gap: 10px; }
#death-card .title { font: var(--t-b1a); }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, -40%) scale(.95); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Toast: just above the thumbs, centred. */
#toast { bottom: calc(var(--safe-b) + 128px); }

/* Scoreboard rows (the TV's side panel). */
.board { list-style: none; }
.board li { display: flex; align-items: center; gap: 10px; box-shadow: inset 0 -1px 0 var(--line); }
.board li.me { background: rgb(75 255 225 / .12); }
.board li.off { opacity: .45; }
.board .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board b { font: var(--t-b3c); font-size: inherit; font-variant-numeric: tabular-nums; }
.board .k { font: var(--t-b3c); font-size: .8em; color: var(--muted); }

/* Sheets always sit above pages (the rules over the lobby, the menu over the game). */
.overlay--sheet { z-index: 12; }
#rules-overlay, #friends-overlay { z-index: 13; }