:root{color-scheme:dark;--ink:#11212b;--paper:#f3f7ef;--muted:#b8ccd0;--lime:#dfff65;--coral:#ff795c;--line:#e6f1ea48;--mono:'Cascadia Mono',Consolas,monospace;--display:Impact,'Arial Black','Segoe UI',sans-serif;font:15px 'Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper)}[hidden]{display:none!important}button,input{font:inherit}button:not(:disabled){cursor:pointer}button:disabled{opacity:.45}button:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
#app{height:100svh;min-height:560px;position:relative;isolation:isolate;overflow:hidden;background:#9cdfe0}
#track-view,.shade,.race{position:absolute;inset:0}#track-view canvas{width:100%;height:100%;display:block}.shade{pointer-events:none;background:linear-gradient(0deg,#10232c99,transparent 20%,transparent 84%,#10232c75),linear-gradient(90deg,#10202a 0%,#10202aee 20%,#10202a51 56%,transparent 82%)}
#app[data-view="race"] .shade,#app[data-view="results"] .shade{background:linear-gradient(0deg,#0a202987,transparent 24%,transparent 81%,#0a202973)}
.top,.footer{position:absolute;z-index:4;left:clamp(14px,4vw,56px);right:clamp(14px,4vw,56px);display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono)}
.top{top:0;height:68px;border-bottom:1px solid var(--line)}.footer{bottom:0;height:46px;border-top:1px solid var(--line);font-size:9px;letter-spacing:.10em;color:#dce9df;text-shadow:0 1px 6px #11212b}
.brand,.top-controls{display:flex;align-items:center;gap:11px}.brand{font-weight:800;font-size:14px;letter-spacing:.06em;line-height:1}.brand small{display:block;margin-top:5px;color:#d1e5df;font-size:8px;letter-spacing:.22em}.network,.quiet{font:700 10px var(--mono);letter-spacing:.10em}.network::before,.footer i{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:var(--coral)}.network[data-online=true]::before,.footer i{background:var(--lime);box-shadow:0 0 8px #dfff6580}.quiet{padding:7px 9px;border:1px solid var(--line);border-radius:4px;background:#10212b99;color:var(--paper)}.quiet:hover,.secondary:hover{border-color:var(--lime);color:var(--lime)}
.panel{position:absolute;left:clamp(18px,6vw,86px);top:50%;transform:translateY(-45%);width:min(390px,calc(100% - 36px));z-index:3}.eyebrow,label,.invite span,.course-label,.notice,.roster,.item,.race-info,.countdown,.race-message,.speed,.touch{font-family:var(--mono)}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--lime);font-size:10px;font-weight:700;letter-spacing:.17em}.eyebrow i{width:9px;height:9px;background:currentColor;transform:skew(-16deg)}.eyebrow span{color:#d7e5e0;border-left:1px solid var(--line);padding-left:10px}
h1,h2{font:400 clamp(72px,10.7vw,151px)/.79 var(--display);letter-spacing:-.018em;transform:skewX(-7deg);transform-origin:left center;margin:15px 0 14px;text-shadow:0 6px 28px #07182250}h1>span{display:block;color:var(--lime)}h1 .period,h2 span{color:var(--coral)}h2{font-size:clamp(54px,7vw,86px);line-height:.86}
.panel p{color:#d6e4e0;max-width:37ch;font-size:14px;line-height:1.45;margin:0 0 15px}.panel label{display:block;color:var(--muted);font-size:10px;letter-spacing:.14em;margin:0 0 5px}.panel input{width:100%;min-width:0;height:39px;border:1px solid #c5ded15c;border-radius:4px;background:#142934d9;color:var(--paper);padding:0 11px}.panel input::placeholder{color:#9bb1b6}.duo,.join{display:flex;gap:8px;margin-top:8px}.duo button{flex:1}.primary,.secondary{min-height:40px;padding:0 11px;white-space:nowrap;border:1px solid transparent;border-radius:4px;font:800 11px var(--mono);letter-spacing:.045em}.primary{background:var(--lime);color:#15232a}.primary:hover{background:#f0ffb7}.primary b{margin-left:6px;font-size:15px}.secondary{background:#152735d9;color:var(--paper);border-color:#c5ded164}.join input{text-transform:uppercase;font:700 12px var(--mono);letter-spacing:.13em;height:40px}.panel .notice,.notice{min-height:1.3em;margin:9px 0 0;color:#ffd1b3;font-size:11px;line-height:1.4}
.invite{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;border:1px solid #dfff6569;border-radius:5px;background:#16282fbd}.invite span{color:var(--muted);font-size:9px;letter-spacing:.15em;display:block}.invite strong{font:800 24px var(--mono);letter-spacing:.22em;color:var(--lime)}#invite-link{margin-top:6px}
.roster{list-style:none;padding:0;margin:10px 0;color:var(--paper);display:grid;gap:4px}.roster li{min-height:29px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:7px;padding:4px 8px;border:1px solid #c5ded13d;border-radius:4px;background:#112632ab;font-size:11px}.roster li span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roster .dot{height:12px;width:12px;border-radius:3px;display:inline-block}.roster em{font-style:normal;color:var(--muted);font-size:10px;white-space:nowrap}
.course-label{position:absolute;z-index:2;display:flex;gap:11px;align-items:center;right:clamp(17px,4vw,56px);bottom:64px;padding:7px 10px 7px 7px;background:#112733e6;border:1px solid #eef8df6b;border-radius:5px;font-weight:800;font-size:11px;letter-spacing:.06em}.course-label>b{font:400 23px var(--display);padding:1px 7px;background:var(--coral);color:#15222a;border-radius:3px}.course-label small{display:block;font-size:8px;color:#c1d3d1;margin-top:3px}
.footer kbd{border:1px solid var(--line);font:inherit;letter-spacing:0;color:#fff;padding:3px 4px}.touch-hint,.touch{display:none}
.race{pointer-events:none;z-index:2;text-shadow:0 2px 7px #0c2024a8}.race-info{position:absolute;top:83px;left:clamp(14px,4vw,56px);display:flex;gap:12px;align-items:center}.place{color:var(--lime);font:400 68px/.92 var(--display);font-style:italic}.place sup{font-size:23px}.lap-time{display:grid;gap:5px;padding:7px 10px;border-left:2px solid var(--lime);background:#142631a8;font-size:10px;color:#c8dad7}.lap-time b{color:var(--paper)}
.minimap{position:absolute;top:84px;right:clamp(14px,4vw,56px);background:#112631b7;border:1px solid var(--line);border-radius:6px;padding:3px}.minimap canvas{width:126px;height:auto;display:block}
.item,.speed{position:absolute;bottom:65px;display:flex;align-items:center;gap:8px;min-height:48px;padding:5px 10px;background:#122631ce;border:1px solid var(--line);border-radius:5px}.item{left:clamp(14px,4vw,56px)}.speed{right:clamp(14px,4vw,56px)}.item>div:first-child{display:grid;place-items:center;font:400 29px/1 var(--display);width:36px;height:36px;border-radius:5px;background:#ffffff1d;color:var(--item-color,#c1d3d3)}.item b,.item small{display:block;font-size:11px}.item small,.speed span{font-size:8px;color:#c2d7d5;margin-top:3px;letter-spacing:.07em}.speed b{font:400 33px/1 var(--display);color:var(--lime)}
.race-message,.countdown{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}.race-message{top:19%;color:var(--lime);font-size:clamp(10px,1.6vw,15px);font-weight:800;letter-spacing:.12em}.race-message[data-bad=true]{color:#ffd2b6}.countdown{top:34%;font:400 clamp(85px,16vw,180px)/1 var(--display);font-style:italic;color:var(--lime);-webkit-text-stroke:1px #17302c;text-shadow:0 7px 18px #10212bc9}
.tag{position:absolute;transform:translate(-50%,-50%);font:700 10px var(--mono);background:#10222dd9;color:var(--paper);padding:4px 6px;border-radius:4px;border-left:3px solid var(--kart);white-space:nowrap}
.race-message{max-width:85%;white-space:normal}
.corner-guide,.drift-guide{position:absolute;left:50%;transform:translateX(-50%);padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:#112631e6;color:#d6f7f0;text-align:center;white-space:nowrap;font:800 11px var(--mono);letter-spacing:.09em}
.corner-guide{top:calc(19% + 29px);border-left:3px solid #89eeff}
.corner-guide[data-brake=true]{color:#ffd36f;border-left-color:#ffd36f}
.drift-guide{bottom:71px;color:#89eeff;min-width:146px}
.drift-guide[data-ready=true]{color:#ffd36f}
.drift-track{margin-top:6px;height:3px;background:#abcdd643}
#drift-fill{height:100%;background:currentColor;box-shadow:0 0 8px currentColor}
@media(pointer:coarse){.drift-guide{bottom:159px}}
@media(max-width:620px){.corner-guide{top:calc(23% + 23px)}.corner-guide,.drift-guide{font-size:9px}}
.results{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#0e2029a6;padding:18px}.result-card{width:min(440px,100%);background:#11242ef5;border:1px solid var(--line);border-top:2px solid var(--lime);border-radius:7px;padding:clamp(15px,3vw,28px)}.result-card h2{font-size:clamp(46px,7vw,62px)}
.graphics-error{position:absolute;z-index:5;left:clamp(14px,4vw,56px);right:clamp(14px,4vw,56px);bottom:50px;padding:8px 12px;background:#152735;color:#ffd1b3;border:1px solid var(--line);font-size:12px}
@media(pointer:coarse){.keys{display:none}.touch-hint{display:inline}.touch{display:flex;justify-content:space-between;position:absolute;bottom:52px;left:10px;right:10px;gap:4px}.touch>div{display:flex;gap:4px}.touch button{pointer-events:auto;touch-action:none;min-width:41px;height:45px;padding:0 5px;color:#eff8dc;background:#142935db;border:1px solid #dfeddf90;border-radius:6px;font-size:10px;font-weight:700}.touch button[data-control=gas],.touch button.is-held{background:var(--lime);color:var(--ink)}.item,.speed{bottom:105px}}
@media(max-width:620px){.top{height:52px}.footer{height:38px;font-size:8px;letter-spacing:0}.keys{font-size:7px}.panel{transform:translateY(-43%)}.panel p{font-size:12px}.course-label{display:none}.network{font-size:8px}.top-controls{gap:6px}.race-info,.minimap{top:63px}.place{font-size:49px}.place sup{font-size:17px}.minimap canvas{width:83px}.race-message{top:23%}}
@media(max-height:710px){h1{font-size:clamp(64px,12vh,109px)}.panel{transform:translateY(-44%)}.panel p{margin-bottom:10px}}

@media (max-width: 380px) {
  .top-controls { gap: 4px; }
  .quiet { padding-inline: 6px; }
  .network { font-size: 0; }
  .network::before { margin-right: 0; }
}
@media (max-height: 560px) {
  #app { min-height: 0; }
  .top { height: 46px; }
  .footer { height: 32px; }
  .panel { top: 50px; bottom: 34px; transform: none; overflow-y: auto; padding: 8px 4px; }
  .panel h1, .panel h2 { font-size: clamp(38px, 11vh, 60px); margin-block: 9px; }
  .panel h1 > span { display: inline; margin-left: .12em; }
  .course-label { display: none; }
  .race-info, .minimap { top: 53px; }
  .minimap canvas { width: 74px; }
  .place { font-size: 48px; }
  .place sup { font-size: 17px; }
  .countdown { font-size: clamp(64px, 27vh, 150px); }
  .item, .speed { bottom: 39px; min-height: 38px; padding-block: 3px; }
  .item > div:first-child { width: 30px; height: 30px; }
  .results { padding-block: 48px 36px; overflow-y: auto; place-items: safe center; }
}
@media (pointer: coarse) and (max-height: 560px) {
  .touch { bottom: 36px; }
  .item, .speed { bottom: 85px; }
  .drift-guide { bottom: 86px; }
}