@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#142e32; --paper:#eee7d8; --red:#bd3e2e; --gold:#cf9f45; --line:rgba(20,46,50,.22); --page:min(1120px,calc(100% - 32px)); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 92% 4%,#d7c8ae 0 2px,transparent 3px) 0 0/16px 16px,var(--paper); font-family:"Space Grotesk",Arial,sans-serif; }
button { font:inherit; } button:focus-visible, canvas:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.app-shell { width:var(--page); min-height:calc(100vh - 62px); margin:0 auto; padding-bottom:46px; }
.site-header { min-height:88px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); gap:20px; }
.brand { display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none; font-size:15px; font-weight:700; letter-spacing:.16em; }
.brand span { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--ink); font-family:"DM Mono",monospace; font-size:12px; letter-spacing:0; }
.site-header p,.eyebrow,.control-hint,small,.ranking-head { margin:0; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.12em; }
.site-header p { opacity:.65; }
.screen { padding:64px 0 20px; }
.start-screen { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,9vw,130px); align-items:end; min-height:calc(100vh - 150px); }
.eyebrow { color:var(--red); font-weight:500; text-transform:uppercase; }
h1,h2 { margin:15px 0 0; font-weight:700; font-size:clamp(52px,8vw,104px); letter-spacing:-.085em; line-height:.82; }
.intro-copy { max-width:390px; margin:28px 0 0; font-size:16px; line-height:1.6; }
.rule-line { display:flex; gap:15px; flex-wrap:wrap; margin-top:34px; font:11px "DM Mono",monospace; letter-spacing:.08em; }
.rule-line span { padding:7px 8px; border:1px solid var(--line); }
.country-panel { padding:26px; background:#f7f1e6; border:1px solid var(--line); box-shadow:10px 10px 0 rgba(20,46,50,.12); }
.country-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:17px 0 22px; }
.country-choice { min-height:42px; padding:8px 9px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; text-align:left; font:10px "DM Mono",monospace; letter-spacing:.04em; }
.flag { flex:0 0 24px; width:24px; height:15px; display:block; object-fit:fill; border:1px solid rgba(20,46,50,.2); box-shadow:0 1px 1px rgba(0,0,0,.14); }
.country-choice:hover,.country-choice[aria-checked="true"] { color:#fff; background:var(--ink); border-color:var(--ink); }
.primary-button { width:100%; min-height:52px; padding:12px 17px; border:0; background:var(--red); color:#fff; cursor:pointer; font:600 11px "DM Mono",monospace; letter-spacing:.1em; text-align:left; }
.primary-button:hover { background:#a53025; }.primary-button b { float:right; font-size:18px; line-height:10px; }.primary-button:disabled { background:#aaa397; cursor:not-allowed; }
.race-screen { padding-top:34px; }.race-topbar { display:grid; grid-template-columns:110px 1fr 110px; align-items:center; min-height:58px; border:1px solid var(--line); background:#f7f1e6; }.race-topbar>div { padding:8px 15px; }.race-topbar>div:last-child { text-align:right; border-left:1px solid var(--line); }.race-topbar small { display:block; opacity:.55; }.race-topbar strong { display:block; margin-top:2px; font:500 22px "DM Mono",monospace; }.race-title { text-align:center; font:600 11px "DM Mono",monospace; letter-spacing:.12em; }.race-title span { color:var(--red); }
.canvas-frame { position:relative; margin-top:14px; overflow:hidden; border:4px solid var(--ink); background:#77b8c1; }.canvas-frame canvas { display:block; width:100%; height:auto; image-rendering:pixelated; touch-action:manipulation; cursor:pointer; }.race-message { position:absolute; top:18px; left:50%; transform:translateX(-50%); color:#fff4d6; font:700 24px "DM Mono",monospace; letter-spacing:.1em; text-shadow:3px 3px 0 #142e32; pointer-events:none; opacity:0; transition:opacity .15s; }.race-message.show { opacity:1; }.control-hint { margin:14px 0 0; text-align:center; opacity:.7; }.control-hint span { color:var(--red); }
.field-results { position:absolute; z-index:5; top:50%; right:14px; width:min(390px,calc(100% - 28px)); transform:translateY(-50%); padding:19px; color:#fff0ce; background:rgba(12,29,32,.97); border:3px solid #f0dfb9; box-shadow:10px 10px 0 rgba(10,21,23,.45); font-family:"DM Mono",monospace; }
.field-eyebrow { margin:0; color:#d96752; font-size:10px; letter-spacing:.15em; }.field-results h3 { margin:4px 0 8px; font-size:26px; letter-spacing:.04em; }.field-result-summary { min-height:16px; margin:0 0 10px; color:#e6c778; font-size:11px; }.field-ranking-list { margin:0; padding:0; list-style:none; border-top:1px solid rgba(240,223,185,.35); }.field-ranking-list li { display:grid; grid-template-columns:35px 1fr 68px; align-items:center; min-height:29px; padding:4px 7px; border-bottom:1px solid rgba(240,223,185,.18); font-size:10px; }.field-ranking-list li.player { background:#bd3e2e; }.field-ranking-list time { text-align:right; }.field-next { width:100%; margin-top:13px; padding:11px 13px; color:#fff; background:#bd3e2e; border:0; cursor:pointer; text-align:left; font:700 11px "DM Mono",monospace; letter-spacing:.09em; }.field-next b { float:right; }
.field-ceremony { width:100%; margin-top:13px; padding:11px 13px; color:#17262b; background:#e5bd52; border:0; cursor:pointer; text-align:left; font:700 11px "DM Mono",monospace; letter-spacing:.09em; }.field-ceremony b { float:right; font-size:14px; }
.medal { position:relative; display:inline-block; width:16px; height:19px; margin-left:7px; vertical-align:middle; filter:drop-shadow(1px 2px 0 rgba(0,0,0,.35)); }.medal::before,.medal::after { content:""; position:absolute; top:0; width:6px; height:10px; background:#315b8f; }.medal::before { left:2px; transform:skewX(12deg); }.medal::after { right:2px; transform:skewX(-12deg); background:#bd3e2e; }.medal i { position:absolute; z-index:1; left:2px; bottom:0; width:12px; height:12px; border:2px solid rgba(255,244,218,.75); border-radius:50%; background:#d5a52f; box-shadow:inset -2px -2px 0 rgba(85,50,18,.3); }.medal-2 i { background:#bdc5c5; }.medal-3 i { background:#b66d38; }
.ceremony { position:absolute; z-index:8; inset:0; overflow:hidden; background:#12272b; }.ceremony canvas { display:block; width:100%; height:100%; image-rendering:auto; }.ceremony-controls { position:absolute; right:18px; bottom:15px; display:flex; gap:8px; }.ceremony-controls button { padding:9px 11px; color:#fff0ce; border:1px solid #f0dfb9; background:#102126; cursor:pointer; font:700 9px "DM Mono",monospace; letter-spacing:.06em; }.ceremony-controls button:first-child { color:#192b2f; background:#e5bd52; }
.ceremony-flags { position:absolute; inset:0; pointer-events:none; }.ceremony-flag { position:absolute; left:var(--x); top:var(--y); width:70px; height:39px; }.ceremony-flag img { display:block; width:70px; height:39px; object-fit:fill; box-shadow:2px 3px 3px rgba(10,20,22,.3); }
.pause-button { position:absolute; z-index:4; right:10px; bottom:8px; min-width:82px; padding:6px 9px; color:#fff0ce; background:rgba(14,31,34,.94); border:1px solid rgba(240,223,185,.55); cursor:pointer; font:700 9px "DM Mono",monospace; letter-spacing:.08em; }.pause-button[aria-pressed="true"] { color:#17262b; background:#f0dfb9; }
.results-screen { width:min(700px,100%); margin:0 auto; padding-top:50px; }.results-heading { text-align:center; }.results-heading h2 { font-size:clamp(58px,9vw,92px); }.result-summary { display:flex; align-items:baseline; justify-content:center; gap:11px; margin-top:27px; }.result-summary span { padding:7px; background:var(--red); color:#fff; font:500 12px "DM Mono",monospace; }.result-summary strong { font:500 clamp(36px,6vw,52px) "DM Mono",monospace; letter-spacing:-.09em; }.result-summary small { color:var(--red); }.personal-best { min-height:20px; margin:9px 0 25px; font:11px "DM Mono",monospace; color:var(--red); }.ranking-panel { border:1px solid var(--line); background:#f7f1e6; }.ranking-head,.ranking-list li { display:grid; grid-template-columns:70px 1fr 100px; align-items:center; }.ranking-head { padding:10px 14px; color:rgba(20,46,50,.58); border-bottom:1px solid var(--line); }.ranking-head span:last-child { text-align:right; }.ranking-list { margin:0; padding:0; list-style:none; }.ranking-list li { min-height:38px; padding:7px 14px; border-bottom:1px solid var(--line); font:12px "DM Mono",monospace; }.ranking-list li:last-child { border-bottom:0; }.ranking-list li.player { background:var(--ink); color:#fff; }.ranking-list time { text-align:right; }.results-screen .primary-button { width:260px; display:block; margin:25px auto 0; }
footer { width:var(--page); margin:0 auto; padding:21px 0; border-top:1px solid var(--line); color:rgba(20,46,50,.65); font:10px "DM Mono",monospace; letter-spacing:.08em; text-align:center; } footer span { color:var(--red); padding:0 5px; }
@media (max-width:680px) { .site-header { min-height:70px; }.site-header p { display:none; }.screen { padding-top:38px; }.start-screen { display:block; min-height:0; }.country-panel { margin-top:46px; padding:18px; }.intro-copy { font-size:15px; }.race-topbar { grid-template-columns:78px 1fr 64px; }.race-topbar>div { padding:8px; }.race-topbar strong { font-size:16px; }.race-title { font-size:9px; }.canvas-frame { margin-inline:-16px; border-inline:0; }.field-results { padding:12px; }.field-results h3 { font-size:19px; }.field-ranking-list li { min-height:24px; font-size:9px; }.field-next { margin-top:8px; padding:8px 10px; }.ranking-head,.ranking-list li { grid-template-columns:56px 1fr 88px; }.ranking-list li { font-size:11px; }.app-shell { min-height:calc(100vh - 48px); } }