:root {
  --bg: #080a10;
  --panel: #10131c;
  --panel-2: #151925;
  --line: #2b3040;
  --ink: #f8f9fd;
  --muted: #8d93a5;
  --yellow: #ffe84d;
  --cyan: #72e6ff;
  --red: #ff6f86;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  padding-top: 64px !important;
  background: radial-gradient(circle at 15% 10%, rgba(255,232,77,.09), transparent 28rem), radial-gradient(circle at 90% 30%, rgba(114,230,255,.07), transparent 28rem), var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
.skip-link { position: fixed; z-index: 100200; top: -60px; left: 12px; padding: 10px 14px; border-radius: 8px; background: #fff; color: #111; }
.skip-link:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-shell { width: min(100% - 28px, 820px); margin: auto; padding: 34px 0 80px; }
.game-card, .about-card { border: 1px solid rgba(255,255,255,.09); border-radius: 28px; background: linear-gradient(145deg, rgba(20,24,35,.98), rgba(10,12,19,.98)); box-shadow: 0 34px 100px rgba(0,0,0,.45); }
.game-card { position: relative; overflow: hidden; padding: 28px clamp(16px,5vw,44px) 34px; }
.game-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--yellow), #fff08b, var(--cyan)); }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { color: var(--yellow); font-size: .61rem; font-weight: 800; letter-spacing: .17em; }
.game-header h1 { margin: 6px 0 0; font: 700 clamp(2rem,7vw,3rem)/1 "Space Grotesk", sans-serif; letter-spacing: -.07em; }
.game-header h1 span { color: var(--yellow); }
.header-actions { display: flex; gap: 7px; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); color: var(--muted); font-weight: 800; cursor: pointer; }
.icon-button:hover, .icon-button:focus-visible { color: #fff; border-color: #626b83; }
.icon-button[aria-pressed="true"] { color: var(--yellow); border-color: rgba(255,232,77,.45); }
.icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.score-strip { display: grid; grid-template-columns: repeat(4,1fr); margin: 24px 0 15px; border: 1px solid var(--line); border-radius: 14px; background: #0a0d14; }
.score-strip > div { padding: 10px 8px; border-right: 1px solid var(--line); text-align: center; }
.score-strip > div:last-child { border: 0; }
.score-strip span, .score-strip strong { display: block; }
.score-strip span { color: #666d7f; font-size: .5rem; font-weight: 800; letter-spacing: .13em; }
.score-strip strong { margin-top: 3px; font: 700 .88rem "Space Grotesk", sans-serif; }

.arena { position: relative; width: 100%; height: 330px; display: grid; place-items: center; align-content: center; overflow: hidden; padding: 24px; border: 1px solid #353b4c; border-radius: 23px; background: #111620; color: #fff; cursor: pointer; isolation: isolate; transition: background .12s, color .12s, transform .08s, border-color .12s; touch-action: manipulation; }
.arena:active { transform: scale(.995); }
.arena:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.arena-grid { position: absolute; z-index: -2; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle, #000, transparent 76%); }
.state-chip { min-width: 75px; padding: 6px 10px; border: 1px solid #4a5163; border-radius: 999px; color: #aeb4c3; font-size: .53rem; font-weight: 800; letter-spacing: .16em; }
.arena strong { margin-top: 17px; font: 700 clamp(2rem,8vw,3.4rem)/1 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.arena > span:not(.arena-grid,.state-chip,.pulse-rings) { margin-top: 10px; color: #9ba2b2; font-size: .78rem; }
.pulse-rings { position: absolute; z-index: -1; width: 190px; height: 190px; }
.pulse-rings i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.pulse-rings i:nth-child(2) { inset: 24px; }
.pulse-rings i:nth-child(3) { inset: 48px; }
.arena.waiting { background: radial-gradient(circle, #1b202c, #0e1119 70%); }
.arena.waiting .pulse-rings i { animation: breathe 1.4s ease-in-out infinite alternate; }
.arena.waiting .pulse-rings i:nth-child(2) { animation-delay: .2s; }
.arena.waiting .pulse-rings i:nth-child(3) { animation-delay: .4s; }
.arena.ready.colour-0 { border-color: #e3ce39; background: var(--yellow); color: #0a0b0d; }
.arena.ready.colour-1 { border-color: #171b26; background: #050608; color: var(--yellow); }
.arena.ready .state-chip { border-color: currentColor; color: inherit; }
.arena.ready > span:not(.arena-grid,.state-chip,.pulse-rings) { color: inherit; opacity: .72; }
.arena.ready .pulse-rings i { border-color: currentColor; opacity: .12; animation: signal .65s ease-out infinite; }
.arena.over { border-color: rgba(255,111,134,.45); background: radial-gradient(circle, rgba(255,111,134,.1), #10131b 70%); }
@keyframes breathe { to { transform: scale(1.13); opacity: .2; } }
@keyframes signal { to { transform: scale(1.25); opacity: 0; } }

.budget { margin-top: 17px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 15px; background: #0a0d14; }
.budget-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.budget-head span { color: var(--yellow); font-size: .51rem; font-weight: 800; letter-spacing: .14em; }
.budget-head h2 { margin: 4px 0 0; font-size: .88rem; }
.budget-head > strong { font: 700 .76rem "Space Grotesk", sans-serif; }
.budget-track { height: 11px; overflow: hidden; margin-top: 14px; border: 1px solid #33394a; border-radius: 999px; background: #171b25; }
.budget-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--yellow) 65%, var(--red)); transition: width .05s linear; }
.budget-labels { display: flex; justify-content: space-between; margin-top: 6px; color: #555c6d; font-size: .45rem; font-weight: 800; letter-spacing: .12em; }
.tip-row { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.025); }
.tip-icon { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border: 1px solid #42495a; border-radius: 50%; color: var(--yellow); font-weight: 800; }
.tip-row p { margin: 0; color: var(--muted); font-size: .69rem; line-height: 1.45; }
.tip-row strong { color: #d8dbe4; }
.ad-card { height: 90px; display: grid; place-items: center; margin: 20px auto; border: 1px dashed #292e3c; border-radius: 15px; color: #4d5363; font-size: .52rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.about-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; padding: 30px; }
.about-card h2 { margin: 7px 0 0; font: 700 1.45rem/1.12 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.about-card p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.65; }

.dialog { width: min(calc(100% - 28px), 520px); padding: 30px; border: 1px solid #373d4d; border-radius: 24px; background: linear-gradient(145deg, #1a1e2a, #0e1119); color: var(--ink); box-shadow: 0 32px 100px #000; }
.dialog::backdrop { background: rgba(4,5,9,.82); backdrop-filter: blur(8px); }
.dialog h2 { margin: 8px 0 20px; font: 700 1.7rem/1.12 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.dialog-close { position: absolute; right: 15px; top: 12px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 1.8rem; cursor: pointer; }
.steps { padding: 0; margin: 0 0 20px; list-style: none; }
.steps li { display: flex; gap: 13px; padding: 11px 0; border-top: 1px solid var(--line); }
.steps li > span { color: var(--yellow); font-size: .63rem; font-weight: 800; }
.steps strong { font-size: .8rem; }
.steps p { margin: 3px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.primary-button { width: 100%; min-height: 49px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--yellow), #fff39b 55%, var(--cyan)); color: #090a0d; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(255,232,77,.12); }
.primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary-button span { margin-left: 8px; }
.result-dialog { text-align: center; }
.result-mark { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 19px; background: linear-gradient(135deg, var(--yellow), var(--cyan)); color: #08090c; font-size: 1.65rem; }
.result-mark.false-start { background: #313746; color: var(--red); }
.result-dialog > p { color: var(--muted); font-size: .78rem; }
.result-score { padding: 16px; margin: 16px 0; border: 1px solid var(--line); border-radius: 13px; background: #090c12; }
.result-score span, .result-score strong, .result-score em { display: block; }
.result-score span { color: var(--muted); font-size: .5rem; font-weight: 800; letter-spacing: .14em; }
.result-score strong { margin-top: 4px; font: 700 2.5rem "Space Grotesk", sans-serif; }
.result-score em { margin-top: 5px; color: var(--yellow); font-size: .53rem; font-style: normal; font-weight: 800; letter-spacing: .12em; }
.result-grid, .record-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 14px 0; }
.result-grid div, .record-grid div { padding: 13px 5px; border-radius: 10px; background: #090c12; }
.result-grid strong, .result-grid span, .record-grid strong, .record-grid span { display: block; }
.result-grid strong, .record-grid strong { font: 700 1.02rem "Space Grotesk", sans-serif; }
.result-grid span, .record-grid span { margin-top: 3px; color: var(--muted); font-size: .49rem; font-weight: 800; }
.privacy-note { margin: 12px 0 0 !important; color: #626879 !important; font-size: .61rem !important; }
.record-grid { grid-template-columns: repeat(2,1fr); margin-top: 22px; }
.record-grid div { padding: 18px 5px; }
.record-grid strong { font-size: 1.35rem; }

@media (max-width: 759px) { body { padding-top: 58px !important; } }
@media (max-width: 600px) {
  .page-shell { width: min(100% - 16px,820px); padding-top: 22px; }
  .game-card { padding: 20px 14px 27px; border-radius: 21px; }
  .header-actions { gap: 5px; }
  .icon-button { width: 37px; height: 37px; }
  .score-strip { margin-top: 18px; }
  .score-strip > div { padding: 9px 4px; }
  .score-strip strong { font-size: .78rem; }
  .arena { height: 285px; }
  .about-card { grid-template-columns: 1fr; gap: 11px; padding: 23px; }
  .dialog { padding: 26px 19px; }
}
@media (max-height: 740px) and (max-width: 600px) { .arena { height: 235px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }