/* KARTEL: one token sheet. A motorsport broadcast package over the live arena: solid night tiles (no glass over the canvas),
   slanted ends, a violet edge on what is yours or active, a fine chequered band on the head of the important panels.
   Russo One for display, Figtree for text, Azeret Mono for every number. One accent (violet); mint only on money; red-orange
   only for damage and the last ten seconds. */
@font-face { font-family: 'Russo One'; src: url(/fonts/RussoOne.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonts/Figtree.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Azeret Mono'; src: url(/fonts/AzeretMono.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --night: #0d0b1a; --n1: #131027; --n2: #1a1634; --n3: #231e45; --n4: #2e2759;
  --ink: #f4f2ff; --ink-2: #bdb6e2; --ink-3: #7f78ab;
  --line: rgba(190, 178, 255, 0.14); --line-2: rgba(190, 178, 255, 0.3);
  --vio: #7b5cff; --vio-l: #a590ff; --vio-d: #5b3fe6;
  --hot: #ff4b3e; --mint: #14f195; --gold: #ffcf3f;
  --r1: 2px; --r2: 4px; --r3: 8px;
  --f-d: 'Russo One', 'Arial Black', Impact, sans-serif; --f-t: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-m: 'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --skew: -12deg; --tile: rgba(13, 11, 26, 0.92);
  --w-mg: #3ee08c; --w-rocket: #ff7a2e; --w-triple: #ffd23f; --w-cannon: #b9bfd6; --w-mine: #ff3d5a; --w-nuke: #b6ff3b; --w-sticky: #ff5fd2; --w-decoy: #ffbe3a; --w-spikes: #d7dcec; --w-star: #fff07a;
}
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html, body) { margin: 0; height: 100%; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(input) { font: inherit; }
:where(a) { color: inherit; text-decoration: none; }
:where(ol, ul) { margin: 0; padding: 0; list-style: none; }
:where(h1, h2, p) { margin: 0; }
body { background: var(--night); color: var(--ink); font: 500 15px/1.4 var(--f-t); overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
input { user-select: text; -webkit-user-select: text; }
.num { font-family: var(--f-m); font-variant-numeric: tabular-nums; }
.is-hidden { display: none !important; }
kbd { display: inline-block; min-width: 22px; padding: 3px 6px 2px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--r1); font: 600 11px/1 var(--f-m); color: var(--ink-2); text-align: center; background: rgba(255, 255, 255, 0.04); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(20, 241, 149, 0.18); }
.chequer { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.06) 75%), linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.06) 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; }
.link { color: var(--vio-l); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(165, 144, 255, 0.4); text-underline-offset: 3px; }
.link:hover { color: #fff; }
.lab { font: 600 11px/1 var(--f-m); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------------------------------------------------------------- the canvas and the overlays */
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; outline: none; }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0; background: #fff; }
.flash.is-on { animation: flash 0.32s ease-out; }
@keyframes flash { from { opacity: 0.28; } to { opacity: 0; } }
.vig { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; box-shadow: inset 0 0 140px 40px rgba(255, 60, 40, 0.75); transition: opacity 0.4s; }
.vig.is-hit { opacity: 1; transition: none; }
.vig.is-low { opacity: 0.45; }
.nogl { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 520px; padding: 22px 26px; background: var(--n2); border: 1px solid var(--line-2); z-index: 50; font-size: 16px; }

/* ---------------------------------------------------------------- the top bar */
.bar { position: fixed; left: 0; right: 0; top: 0; height: 56px; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 0 22px; background: var(--tile); border-bottom: 1px solid var(--line); }
.mark { display: flex; align-items: center; gap: 11px; height: 40px; flex: none; }
.mark-svg, .mark-img { width: 38px; height: 38px; display: block; border-radius: 50%; }
.word { font: 400 24px/1 var(--f-d); letter-spacing: 0.06em; color: #fff; }
.nav { display: flex; gap: 4px; margin-left: 10px; }
.nav-a { height: 34px; padding: 0 12px; display: flex; align-items: center; font: 700 14px/1 var(--f-t); color: var(--ink-2); border-radius: var(--r1); }
.nav-a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.ticker { height: 30px; padding: 0 12px; display: flex; align-items: center; font: 400 14px/1 var(--f-d); letter-spacing: 0.05em; color: #fff; background: var(--vio); transform: skewX(var(--skew)); margin-left: auto; }
.xlink { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r1); color: var(--ink-2); }
.xlink svg { width: 17px; height: 17px; fill: currentColor; }
.xlink:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.live { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--f-t); color: var(--ink-2); white-space: nowrap; }
.live b { color: #fff; font-size: 15px; }
/* the coin address slot (the launch kit's, in this game's dress) */
.ca-pill { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 5px 0 12px; background: var(--n2); border: 1px solid var(--line); max-width: 560px; min-width: 0; }
.ca-pill.is-live { border-color: var(--mint); }
.ca-lab { font: 400 13px/1 var(--f-d); letter-spacing: 0.05em; color: var(--vio-l); white-space: nowrap; }
.ca-addr { display: flex; align-items: center; gap: 8px; min-width: 0; height: 26px; padding: 0 2px; font: 600 12px/1 var(--f-m); color: var(--ink); cursor: copy; user-select: text; -webkit-user-select: text; }
.ca-addr:disabled { cursor: default; color: var(--ink-3); font: 600 12px/1 var(--f-t); }
.ca-addr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copy { flex: none; font: 800 11px/1 var(--f-t); font-style: normal; padding: 6px 10px; background: var(--vio); color: #fff; min-width: 54px; text-align: center; }
.ca-link { flex: none; font: 800 11px/1 var(--f-t); padding: 7px 9px; background: var(--n4); color: var(--ink); white-space: nowrap; }
.ca-link:hover { background: var(--vio-d); }

/* ---------------------------------------------------------------- the title: tower, hero, crawl */
.title { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.title > * { pointer-events: auto; }
.title[hidden] { display: none; }
.tower { position: absolute; left: 22px; top: 76px; width: 312px; background: var(--tile); border-left: 3px solid var(--vio); }
.tw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.tw-arena { font: 400 14px/1.1 var(--f-d); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-clock { font: 700 22px/1 var(--f-m); color: #fff; }
.tw-clock.is-hot { color: var(--hot); }
.tw-rows { padding: 4px 0; }
.tw-row, .ht-row { display: grid; grid-template-columns: 30px 5px 1fr auto; align-items: center; gap: 9px; height: 34px; padding: 0 12px 0 0; }
.tw-row + .tw-row { border-top: 1px solid var(--line); }
.tw-pos, .ht-pos { height: 100%; display: grid; place-items: center; font: 400 15px/1 var(--f-d); color: var(--ink-2); background: var(--n2); }
.tw-row:nth-child(-n+3) .tw-pos { color: #fff; background: var(--vio-d); }
.tw-paint, .ht-paint { width: 5px; height: 20px; }
.tw-name, .ht-name { font: 700 15px/1 var(--f-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.tw-k { display: flex; align-items: baseline; gap: 8px; }
.tw-sol { font: 600 11px/1 var(--f-m); color: var(--mint); }
.tw-kills { font: 700 18px/1 var(--f-m); color: #fff; min-width: 26px; text-align: right; }
.tw-foot { padding: 10px 14px 12px; border-top: 1px solid var(--line); font: 600 12px/1.35 var(--f-t); color: var(--ink-3); }
.tw-foot b { color: var(--ink-2); }
.tw-foot .pz { color: var(--mint); font-family: var(--f-m); }

.title::before { content: ''; position: absolute; right: 0; bottom: 0; width: 62vw; height: 82vh; pointer-events: none; background: radial-gradient(ellipse at 78% 78%, rgba(9, 7, 20, 0.78) 0%, rgba(9, 7, 20, 0.5) 38%, rgba(9, 7, 20, 0) 70%); }
.hero { position: absolute; right: max(32px, 4vw); bottom: 78px; width: min(780px, 48vw); }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 700 12px/1 var(--f-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.headline { font: 400 44px/1.04 var(--f-d); letter-spacing: 0.01em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.headline em { display: block; font-style: normal; color: var(--vio-l); }
.lede { margin: 16px 0 20px; max-width: 640px; font: 500 17px/1.48 var(--f-t); color: var(--ink); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
.plate { background: var(--tile); border-left: 3px solid var(--vio); }
.plate-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 38px; padding: 0 16px; border-bottom: 1px solid var(--line); font: 400 13px/1 var(--f-d); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.plate-pays { font: 600 12px/1 var(--f-m); letter-spacing: 0; text-transform: none; color: var(--mint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate-body { display: grid; grid-template-columns: 1fr 1.55fr; gap: 12px 14px; padding: 16px 16px 14px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span { font: 700 11px/1 var(--f-m); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.field em { font-style: normal; color: var(--vio-l); text-transform: none; letter-spacing: 0; }
.field input { height: 44px; padding: 0 12px; background: var(--n1); border: 1px solid var(--line-2); border-radius: var(--r1); color: var(--ink); font: 600 15px/1 var(--f-t); outline: none; min-width: 0; }
.field input:focus { border-color: var(--vio); box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.25); }
.field-addr input { font: 500 13px/1 var(--f-m); }
.paints { display: flex; gap: 7px; align-items: center; }
.paint { width: 26px; height: 26px; transform: skewX(var(--skew)); border: 2px solid transparent; outline: none; }
.paint.is-on { border-color: #fff; box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--vio); }
.play { position: relative; height: 54px; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--vio); color: #fff; transform: skewX(var(--skew)); box-shadow: 0 6px 30px rgba(123, 92, 255, 0.45); }
.play > * { transform: skewX(12deg); }
.play span { font: 400 26px/1 var(--f-d); letter-spacing: 0.08em; }
.play kbd { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); }
.play:hover { background: var(--vio-l); }
.play:disabled { background: var(--n4); box-shadow: none; cursor: wait; }
.plate-foot { padding: 0 16px 14px; font: 600 13px/1.6 var(--f-t); color: var(--ink-3); }
.plate-foot .sep { margin: 0 4px; }

.crawl { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: center; gap: 16px; padding: 0 22px 0 0; background: var(--tile); border-top: 1px solid var(--line); }
.crawl-lab { height: 100%; display: flex; align-items: center; padding: 0 18px 0 22px; font: 400 13px/1 var(--f-d); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--vio); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.crawl-win { flex: 1; min-width: 0; overflow: hidden; height: 100%; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.crawl-run { display: flex; gap: 34px; white-space: nowrap; animation: crawl 60s linear infinite; }
.crawl-item { display: flex; align-items: center; gap: 9px; font: 600 14px/1 var(--f-t); color: var(--ink-2); }
.crawl-item b { color: #fff; }
.crawl-item .num { color: var(--mint); font-size: 13px; }
.crawl-item .ar { font: 600 11px/1 var(--f-m); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.crawl-sum { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-size: 13px; }
.crawl-sum b { color: var(--mint); font-size: 15px; }

/* ---------------------------------------------------------------- in the match */
.hud { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.hud[hidden] { display: none; }
.hud > * { pointer-events: none; }
.h-clockbox { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.h-arena { font: 400 12px/1 var(--f-d); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.h-clock { min-width: 150px; padding: 8px 22px 7px; font: 700 40px/1 var(--f-m); color: #fff; text-align: center; background: var(--tile); border-bottom: 3px solid var(--vio); transform: skewX(var(--skew)); }
.h-clock.is-hot { color: var(--hot); border-color: var(--hot); }
.h-prize { padding: 5px 10px; font: 600 12px/1 var(--f-m); color: var(--mint); background: var(--tile); white-space: nowrap; }
.h-prize.is-free { color: var(--ink-2); }
.h-tower { position: absolute; left: 14px; top: 14px; width: 254px; background: var(--tile); border-left: 3px solid var(--vio); padding: 3px 0; }
.ht-row { grid-template-columns: 26px 4px 1fr auto auto; height: 27px; gap: 7px; padding-right: 10px; }
.ht-row + .ht-row { border-top: 1px solid var(--line); }
.ht-pos { font-size: 13px; }
.ht-row.is-me { background: rgba(123, 92, 255, 0.28); }
.ht-row.is-me .ht-pos { background: var(--vio); color: #fff; }
.ht-row.is-dead .ht-name { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(255, 75, 62, 0.7); }
.ht-paint { height: 16px; width: 4px; }
.ht-name { font-size: 13px; }
.ht-kd { font: 700 14px/1 var(--f-m); color: #fff; min-width: 20px; text-align: right; }
.ht-d { font: 500 11px/1 var(--f-m); color: var(--ink-3); min-width: 20px; text-align: right; }
.h-right { position: absolute; right: 14px; top: 58px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.feed { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-height: 0; }
.feed li { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; background: var(--tile); transform: skewX(var(--skew)); font: 700 13px/1 var(--f-t); white-space: nowrap; animation: feedin 0.25s ease-out; }
.feed li > * { transform: skewX(12deg); }
.feed li.is-me { box-shadow: inset 3px 0 0 var(--vio); }
.feed li.is-out { opacity: 0; transition: opacity 0.4s; }
.feed .fw { width: 18px; height: 18px; display: block; }
.feed .fx { color: var(--ink-3); font: 600 11px/1 var(--f-m); text-transform: uppercase; }
@keyframes feedin { from { opacity: 0; transform: skewX(var(--skew)) translateX(20px); } }
.h-map { width: 176px; height: 176px; background: var(--tile); border: 1px solid var(--line); }
.h-me { position: absolute; left: 14px; bottom: 16px; width: 320px; display: flex; flex-direction: column; gap: 8px; }
.h-meline { display: flex; align-items: baseline; gap: 12px; }
.h-pl { font: 400 40px/1 var(--f-d); color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.h-kd { font: 700 17px/1 var(--f-m); color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.h-streak { font: 400 13px/1 var(--f-d); color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
.h-hp { position: relative; height: 22px; background: var(--tile); transform: skewX(var(--skew)); overflow: hidden; border: 1px solid var(--line-2); }
.h-hpfill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #3ee08c, #9cf06a); transform-origin: left; transition: transform 0.15s; }
.h-hp.is-low .h-hpfill { background: var(--hot); }
.h-hpn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) skewX(12deg); font: 700 13px/1 var(--f-m); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.dial { position: absolute; right: 22px; bottom: 18px; width: 220px; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: auto; }
.dial canvas { width: 168px; height: 168px; display: block; }
.dial-name { font: 400 14px/1 var(--f-d); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); white-space: nowrap; }
.dial-key { margin-top: 2px; }
.banner { position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; text-align: center; }
.banner.is-on { animation: banner 2.2s ease-out forwards; }
.banner b { font: 400 54px/1 var(--f-d); letter-spacing: 0.03em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7), 0 0 40px rgba(123, 92, 255, 0.7); }
.banner span { font: 700 17px/1.2 var(--f-t); color: var(--ink); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
.banner.is-gold b { color: var(--gold); }
.banner.is-bad b { color: var(--hot); }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -54%); } }
.count { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font: 400 150px/1 var(--f-d); color: #fff; text-shadow: 0 6px 50px rgba(0, 0, 0, 0.6); opacity: 0; }
.count.is-on { animation: count 0.9s ease-out forwards; }
.count.is-hot { color: var(--hot); font-size: 110px; top: 22%; }
@keyframes count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.killcam, .waitcard { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 14px; padding: 12px 22px; background: var(--tile); border-left: 3px solid var(--hot); white-space: nowrap; }
.waitcard { border-left-color: var(--vio); }
.killcam[hidden], .waitcard[hidden] { display: none; }
.kc-lab { font: 700 12px/1 var(--f-m); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.killcam b, .waitcard b { font: 400 26px/1 var(--f-d); color: #fff; letter-spacing: 0.02em; }
.kc-back { font: 600 14px/1 var(--f-m); color: var(--ink-2); }
.hitmark { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0; background: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%); mask: radial-gradient(circle, transparent 6px, #000 7px); -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px); }
.hitmark.is-on { animation: hit 0.3s ease-out; }
.hitdir { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; opacity: 0; pointer-events: none; background: conic-gradient(from -28deg, transparent 0deg, rgba(255, 75, 62, 0.55) 28deg, transparent 56deg); mask: radial-gradient(circle, transparent 118px, #000 122px, #000 150px, transparent 156px); -webkit-mask: radial-gradient(circle, transparent 118px, #000 122px, #000 150px, transparent 156px); }
.hitdir.is-on { animation: hitdir 0.7s ease-out; }
@keyframes hitdir { 0% { opacity: 1; transform: rotate(var(--hd)) scale(0.92); } 100% { opacity: 0; transform: rotate(var(--hd)) scale(1.08); } }
.streaks { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.25s; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0deg 7deg, rgba(255, 255, 255, 0.09) 7.5deg 8deg); mask: radial-gradient(ellipse at 50% 50%, transparent 32%, #000 78%); -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 32%, #000 78%); }
.streaks.is-on { opacity: 1; animation: streak 0.35s linear infinite; }
@keyframes streak { from { transform: rotate(0deg); } to { transform: rotate(7.5deg); } }
.h-pl.is-pop { animation: pop 0.45s ease-out; }
@keyframes pop { 0% { transform: scale(1.35); color: var(--mint); } 100% { transform: scale(1); } }
.hitmark.is-kill { background: linear-gradient(45deg, transparent 42%, var(--hot) 42%, var(--hot) 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--hot) 42%, var(--hot) 58%, transparent 58%); }
@keyframes hit { from { opacity: 1; transform: scale(1.3); } to { opacity: 0; transform: scale(1); } }
.h-esc { position: absolute; right: 14px; top: 14px; height: 34px; padding: 0 12px; display: flex; align-items: center; gap: 8px; background: var(--tile); font: 700 13px/1 var(--f-t); color: var(--ink-2); pointer-events: auto; }
.keys { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 600 13px/1 var(--f-t); color: var(--ink-2); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); white-space: nowrap; }
.keys kbd { margin-right: 2px; }
.specbug { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px; background: var(--tile); border-left: 3px solid var(--vio); font: 700 14px/1 var(--f-t); white-space: nowrap; }
.specbug[hidden] { display: none; }
.specbug b { color: #fff; }
.touch { display: none; }
.k-touch { display: none; }
.only-narrow { display: none; }

/* ---------------------------------------------------------------- sheets */
.sheet { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(5, 4, 12, 0.58); padding: 20px; }
.sheet[hidden] { display: none; }
.card { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--n1); border-left: 3px solid var(--vio); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.card > *:not(.card-head) { margin-left: 22px; margin-right: 22px; }
.card-result { width: min(620px, 100%); }
.card-how { width: min(600px, 100%); }
.card-rooms { width: min(640px, 100%); }
.card-head { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 22px; border-bottom: 1px solid var(--line); font: 400 13px/1 var(--f-d); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.sheet-title { font: 400 40px/1.05 var(--f-d); text-transform: uppercase; color: #fff; }
.sheet-sub { margin-top: 8px; margin-bottom: 16px; font: 500 15px/1.45 var(--f-t); color: var(--ink-2); }
.hint { margin: 8px 0 14px; font: 500 13px/1.4 var(--f-t); color: var(--ink-3); }
.hint.is-bad { color: var(--hot); }
.sheet-go { display: flex; align-items: center; gap: 10px; padding: 16px 0 20px; }
.btn { height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 10px; background: var(--n3); color: var(--ink); font: 400 15px/1 var(--f-d); letter-spacing: 0.05em; text-transform: uppercase; transform: skewX(var(--skew)); }
.btn > * { transform: skewX(12deg); }
.btn:hover { background: var(--n4); }
.btn-main { background: var(--vio); color: #fff; }
.btn-main:hover { background: var(--vio-l); }
.btn-main kbd { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.m-acct { margin: 6px 0 12px; font: 600 13px/1.6 var(--f-t); color: var(--ink-3); }
.m-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.m-opt { display: flex; gap: 10px; align-items: center; font: 600 14px/1 var(--f-t); color: var(--ink-2); }
.m-opt input[type=range] { accent-color: var(--vio); }
.how { display: flex; flex-direction: column; gap: 14px; margin-bottom: 6px; }
.how li { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; }
.how-n { grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; font: 400 20px/1 var(--f-d); font-style: normal; background: var(--vio); color: #fff; transform: skewX(var(--skew)); }
.how b { font: 400 18px/1.1 var(--f-d); text-transform: uppercase; color: #fff; }
.how span { font: 500 14px/1.45 var(--f-t); color: var(--ink-2); }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 6px 22px 14px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pod-name { font: 700 14px/1.1 var(--f-t); color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-kills { font: 600 12px/1 var(--f-m); color: var(--ink-2); }
.pod-step { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding-top: 10px; background: var(--n3); border-top: 3px solid var(--line-2); }
.pod-step b { font: 400 30px/1 var(--f-d); color: #fff; }
.pod-step .num { font-size: 12px; color: var(--mint); }
.pod-1 .pod-step { height: 104px; border-top-color: var(--gold); background: var(--n4); }
.pod-2 .pod-step { height: 82px; border-top-color: #cfd3e6; }
.pod-3 .pod-step { height: 66px; border-top-color: #e08a4a; }
.pod.is-me .pod-name { color: var(--vio-l); }
.r-rows { display: flex; flex-direction: column; margin-bottom: 8px; }
.r-row { display: grid; grid-template-columns: 34px 6px 1fr 58px 58px; gap: 10px; align-items: center; height: 28px; font: 600 14px/1 var(--f-t); color: var(--ink-2); }
.r-row + .r-row { border-top: 1px solid var(--line); }
.r-row.is-me { color: #fff; background: rgba(123, 92, 255, 0.22); }
.r-row .num { text-align: right; }
.r-pay { margin: 8px 22px 0; padding: 12px 14px; background: var(--n2); border-left: 3px solid var(--mint); }
.steps { display: flex; gap: 6px; margin-bottom: 8px; }
.step { flex: 1; height: 30px; display: grid; place-items: center; font: 700 12px/1 var(--f-m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); background: var(--n3); transform: skewX(var(--skew)); }
.step.is-on { color: var(--night); background: var(--mint); }
.step.is-bad { color: #fff; background: var(--hot); }
.r-in { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.ro-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 300px; overflow: auto; }
.ro-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; height: 44px; padding: 0 6px 0 12px; background: var(--n2); font: 600 14px/1 var(--f-t); }
.ro-row .lab { font-size: 10px; }
.ro-code { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 4px; }
.ro-code .field { width: 130px; }
.ro-code input { text-transform: uppercase; font: 700 18px/1 var(--f-m); letter-spacing: 0.2em; }
.toast { position: fixed; left: 50%; top: 124px; transform: translateX(-50%); z-index: 40; max-width: min(620px, 92vw); padding: 12px 18px; background: var(--n2); border-left: 3px solid var(--vio); font: 600 15px/1.35 var(--f-t); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.toast.is-bad { border-color: var(--hot); }
.toast.is-good { border-color: var(--mint); }
.toast b { color: #fff; }

/* the states of the page */
body.is-stage > *:not(#game) { display: none !important; }
body.is-playing .bar, body.is-playing .title, body.is-spec .title { display: none; }
body.is-spec .bar { display: none; }
body.is-spec .h-me, body.is-spec .dial, body.is-spec .keys, body.is-spec .h-esc { display: none; }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1280px) { .headline { font-size: 36px; } .hero { width: min(640px, 54vw); } .ca-pill { max-width: 360px; } }
@media (max-width: 1100px) { .nav { display: none; } .tower { width: 270px; } }
@media (max-width: 820px), (max-height: 520px) {
  .bar { height: 50px; padding: 0 12px; gap: 10px; }
  .word { font-size: 20px; } .mark-svg, .mark-img { width: 32px; height: 32px; }
  .live span { display: none; }
  .ca-pill { position: fixed; left: 8px; right: 8px; top: 56px; max-width: none; height: 32px; }
  .ca-addr { flex: 1; font-size: 11px; } .ca-link { padding: 6px 7px; font-size: 10.5px; }
  .tower { display: none; }
  .hero { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .headline { font-size: 25px; } .lede { display: none; } .eyebrow { margin-bottom: 8px; font-size: 10px; }
  .plate-body { grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  .paints { gap: 6px; } .paint { width: 22px; height: 22px; }
  .crawl { display: none; }
  .h-tower, .h-map, .keys, .h-prize, .dial-name, .dial-key { display: none; }
  .h-clockbox { top: 8px; } .h-arena { font-size: 10px; }
  .h-clock { font-size: 24px; min-width: 92px; padding: 5px 12px; }
  .h-esc { top: 8px; right: 8px; height: 30px; padding: 0 10px; font-size: 12px; } .h-esc kbd { display: none; }
  .h-right { top: 46px; right: 8px; } .feed li { height: 22px; font-size: 10.5px; padding: 0 8px; } .feed li:nth-child(n+4) { display: none; } .feed .fw { width: 14px; height: 14px; }
  .h-me { left: 8px; top: 8px; bottom: auto; width: 128px; gap: 5px; } .h-meline { gap: 6px; } .h-pl { font-size: 22px; } .h-kd { font-size: 12px; } .h-streak { display: none; }
  .h-hp { height: 12px; } .h-hpn { font-size: 9px; right: 6px; }
  .dial { right: 12px; bottom: 18px; width: 128px; }
  .dial canvas { width: 118px; height: 118px; }
  .touch { display: block; position: absolute; left: 0; bottom: 0; width: 55%; height: 55%; pointer-events: auto; touch-action: none; }
  .stick { position: absolute; left: 22px; bottom: 26px; width: 140px; height: 140px; border-radius: 50%; background: rgba(13, 11, 26, 0.55); border: 2px solid var(--line-2); }
  .stick i { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--vio); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); }
  .title::before { width: 100vw; height: 70vh; background: linear-gradient(0deg, rgba(9, 7, 20, 0.85) 30%, rgba(9, 7, 20, 0) 100%); }
  .banner b { font-size: 34px; } .count { font-size: 96px; }
  .sheet { padding: 10px; } .sheet-title { font-size: 30px; }
  .killcam, .waitcard { bottom: auto; top: 30%; }
  .k-desk, .sheet-go kbd, .play kbd { display: none; } .k-touch { display: inline; }
  .toast { top: auto; bottom: 190px; max-width: 86vw; padding: 9px 12px; font-size: 13px; }
  .only-narrow { display: inline; }
}