:root{--butter: #f6c945;--jam: #c62f3e;--milk: #f7f3ec;--wood: #6b4526;--ink: #2c1f14}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#1a120a;font-family:Trebuchet MS,Segoe UI,Verdana,sans-serif;user-select:none;-webkit-user-select:none}#app,#app canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#app canvas{display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--milk);z-index:10;pointer-events:none}.overlay.interactive{pointer-events:auto}.overlay.hidden{display:none}.overlay.scrim{background:#2b234073}.panel{background:#1e1309e0;border:3px solid var(--butter);border-radius:18px;padding:32px 48px;text-align:center;box-shadow:0 12px 48px #00000080}.title-big{font-size:clamp(42px,8vw,88px);font-weight:900;letter-spacing:2px;color:var(--butter);text-shadow:4px 4px 0 var(--jam),8px 8px 24px rgba(0,0,0,.6);font-style:italic}.title-time{font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--milk);opacity:.85;margin:-18px 0 22px;font-variant-numeric:tabular-nums}.title-sub{font-size:clamp(18px,3vw,30px);color:var(--milk);letter-spacing:8px;text-transform:uppercase;margin-top:4px;margin-bottom:28px}.btn{display:block;width:280px;margin:10px auto;padding:13px 20px;font-size:20px;font-weight:700;font-family:inherit;color:var(--ink);background:var(--butter);border:none;border-radius:12px;cursor:pointer;transition:transform .08s ease,background .12s ease}.btn:hover{background:#ffde6a;transform:scale(1.04)}.btn:active{transform:scale(.97)}.btn.secondary{background:transparent;color:var(--milk);border:2px solid rgba(247,243,236,.5)}.btn.secondary:hover{border-color:var(--milk);background:#f7f3ec14}.hint{margin-top:18px;font-size:14px;opacity:.65;line-height:1.7}.checkline{margin:10px 0 4px;font-size:16px;cursor:pointer}.checkline input{transform:scale(1.3);margin-right:8px;accent-color:var(--butter);cursor:pointer}#countdown{font-size:160px;font-weight:900;font-style:italic;color:var(--butter);text-shadow:5px 5px 0 var(--jam),0 0 60px rgba(246,201,69,.4);animation:none}#countdown.pop{animation:cd-pop .9s ease-out}@keyframes cd-pop{0%{transform:scale(2.4);opacity:0}25%{transform:scale(1);opacity:1}85%{opacity:1}to{transform:scale(.9);opacity:0}}#hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;color:var(--milk)}.hud-corner{position:absolute;background:#1e1309a6;border-radius:12px;padding:8px 16px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.7)}#hud-lap{top:44px;left:16px;font-size:24px}#hud-pos{top:16px;right:16px;font-size:30px;color:var(--butter)}#hud-time{bottom:16px;left:16px;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.5}#hud-p2{top:62px;right:16px;font-size:22px;color:#4fd1c5}#hud-wrongway{position:absolute;top:18%;left:50%;transform:translate(-50%);font-size:36px;font-weight:900;color:var(--jam);background:#f7f3ece6;padding:6px 26px;border-radius:10px;animation:ww-flash .5s infinite alternate}@keyframes ww-flash{0%{opacity:1}to{opacity:.45}}#hud-offtrack{position:absolute;top:18%;left:50%;transform:translate(-50%);font-size:24px;font-weight:900;color:#2c1f14;background:#f6c945d9;padding:4px 20px;border-radius:10px;animation:ww-flash .5s infinite alternate}.car-badge{position:absolute;transform:translate(-50%,-100%);font-size:13px;font-weight:800;padding:2px 8px;border-radius:8px;color:#fff;background:#1e1309bf;white-space:nowrap;transition:background .2s}.car-badge.flash{background:var(--butter);color:var(--ink)}#hud-toast{position:absolute;top:28%;left:50%;transform:translate(-50%);font-size:26px;font-weight:800;color:var(--butter);text-shadow:2px 2px 0 rgba(0,0,0,.6);opacity:0;transition:opacity .3s}#hud-toast.show{opacity:1}.results-row{display:flex;justify-content:space-between;gap:26px;font-size:21px;padding:8px 14px;margin:5px 0;border-radius:10px;background:#f7f3ec12;opacity:0;transform:translate(-40px);animation:row-in .4s ease-out forwards}.results-row.me{background:#f6c9452e;border:1px solid rgba(246,201,69,.5)}.results-row .pos{font-weight:900;color:var(--butter);width:44px;text-align:left}.results-row .nm{flex:1;text-align:left;font-weight:700}.results-row .tm{font-variant-numeric:tabular-nums;opacity:.85}@keyframes row-in{to{opacity:1;transform:translate(0)}}.results-stats{margin-top:14px;font-size:16px;opacity:.8;line-height:1.7}.medal{display:inline-block;flex:none;position:relative;width:18px;height:18px;border-radius:50%;vertical-align:middle;box-shadow:inset 0 0 0 2px var(--rim),0 1px 2px #00000073;background:radial-gradient(circle at 34% 30%,var(--hi) 0 18%,var(--base) 55%,var(--rim) 100%)}.medal:after{content:"";position:absolute;top:22%;right:22%;bottom:22%;left:22%;border-radius:50%;border:1.5px solid rgba(255,255,255,.45)}.medal.gold{--hi: #fff6c8;--base: #f6c945;--rim: #a87512}.medal.silver{--hi: #ffffff;--base: #c9ced6;--rim: #6f7783}.medal.bronze{--hi: #ffe0bf;--base: #cd8a4f;--rim: #7a4520}.medal.none{background:none;box-shadow:inset 0 0 0 2px #f7f3ec59}.medal.none:after{border-style:dashed;border-color:#f7f3ec40}.medal.big{width:46px;height:46px}.medal.big:after{border-width:2.5px}.star{width:16px;height:16px;vertical-align:middle;flex:none}.star path{fill:none;stroke:#f7f3ec73;stroke-width:1.8;stroke-linejoin:round}.star.on path{fill:var(--butter);stroke:#a87512}.star.big{width:30px;height:30px}.title-record{display:flex;align-items:center;gap:8px;margin:-12px 0 20px;padding:5px 14px;font-size:14px;color:var(--milk);background:#1e13098c;border-radius:999px;font-variant-numeric:tabular-nums}.title-record[hidden],.btn[hidden]{display:none}.title-record .sep{opacity:.45}.title-record b{color:var(--butter)}.results-panel{position:relative;overflow:hidden}.res-callout{display:inline-block;margin:-6px 0 12px;padding:5px 16px;font-size:17px;font-weight:900;letter-spacing:.5px;color:var(--ink);background:var(--butter);border-radius:999px;box-shadow:0 0 0 3px #f6c94540;animation:callout-pop .5s .25s cubic-bezier(.3,1.6,.5,1) both}.res-callout[hidden]{display:none}@keyframes callout-pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.res-medal{display:flex;align-items:center;gap:14px;margin-top:14px;padding:10px 14px;border-radius:12px;background:#f7f3ec12;text-align:left}.res-medal[hidden]{display:none}.res-medal-text{flex:1;line-height:1.4}.res-medal-name{font-size:19px;font-weight:800}.res-medal-lap,.res-medal-next{font-size:14px;opacity:.8;font-variant-numeric:tabular-nums}.res-medal-next b,.res-medal-lap b{color:var(--butter)}.res-medal .pb{font-size:12px;font-weight:800;color:var(--ink);background:var(--butter);border-radius:6px;padding:0 6px}.res-star{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;opacity:.85;min-width:64px}.res-star.new{opacity:1;color:var(--butter);font-weight:800}.results-panel.shine{animation:gold-flash 1.4s ease-out .15s both}.results-panel.shine:before{content:"";position:absolute;top:-20%;right:-60%;bottom:-20%;left:-60%;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,240,170,.38) 50%,transparent 58%);transform:translate(-100%);animation:shine-sweep 1.1s ease-in-out .3s both}@keyframes gold-flash{0%{box-shadow:0 12px 48px #00000080;border-color:var(--butter)}18%{box-shadow:0 0 0 6px #fff0aabf,0 0 70px #f6c945d9;border-color:#fff4c4}to{box-shadow:0 0 0 2px #f6c94559,0 0 34px #f6c94559,0 12px 48px #00000080;border-color:var(--butter)}}@keyframes shine-sweep{to{transform:translate(100%)}}.vol-row{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:16px}.vol-row input[type=range]{flex:1;accent-color:var(--butter)}.vol-row>span:first-child{min-width:58px;text-align:left}.vol-row .vol-hint{font-size:12px;opacity:.6;min-width:58px}body.reduce-motion :is(#countdown.pop,.results-row,#hud-wrongway,#hud-offtrack,.res-callout){animation:none;opacity:1;transform:none}body.reduce-motion .results-panel.shine{animation:none;box-shadow:0 0 0 2px #f6c94559,0 0 34px #f6c94559,0 12px 48px #00000080}body.reduce-motion .results-panel.shine:before{display:none}body.reduce-motion .btn{transition:none}body.reduce-motion .btn:hover,body.reduce-motion .btn:active{transform:none}.btn:focus-visible,.overlay input:focus-visible,.seg-btn:focus-visible{outline:3px solid var(--milk);outline-offset:3px}.settings-overlay{z-index:12}.settings{width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;padding:26px 34px 22px;text-align:left}.settings-title{font-size:34px;font-weight:900;color:var(--butter);margin-bottom:4px;text-align:center}.set-section{margin:16px 0 2px;padding-bottom:4px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;opacity:.7;border-bottom:1px solid rgba(247,243,236,.18)}.set-row{margin:6px -10px;padding:6px 10px;border-radius:10px}.set-row:focus-within{background:#f7f3ec12}.settings .vol-row.set-row{margin:6px -10px}.settings .vol-row>span:first-child{min-width:100px}.settings .checkline{margin:0;display:inline-block}.settings .checkline.mute{white-space:nowrap}.settings .vol-row .vol-hint,.settings .checkline.mute{min-width:64px;text-align:left}.set-hint{display:block;font-size:12px;opacity:.6;margin-top:3px}.set-check .set-hint{margin-left:30px}.set-seg-row{margin:0}.set-seg-row+.set-hint{margin-left:112px}.seg{display:flex;flex:1;gap:4px;padding:3px;border-radius:10px;background:#f7f3ec14}.seg-btn{flex:1;padding:6px 4px;font-size:14px;font-weight:700;font-family:inherit;color:var(--milk);background:transparent;border:none;border-radius:8px;cursor:pointer}.seg-btn:hover{background:#f7f3ec1f}.seg-btn.on{background:var(--butter);color:var(--ink)}.settings-done{margin:18px auto 0}@media(max-width:520px){.settings{padding:20px 18px}.set-seg-row+.set-hint{margin-left:0}}#fps{position:fixed;top:10px;left:16px;z-index:50;font:600 12px ui-monospace,SF Mono,Menlo,monospace;font-variant-numeric:tabular-nums;background:#2b2340b8;color:#fff;padding:3px 8px;border-radius:6px;pointer-events:none}.controls{margin:22px auto 0;padding:14px 18px 12px;max-width:min(520px,calc(100vw - 32px));background:#2b23408c;border-radius:14px;color:var(--milk);font-size:14px}.controls table{border-collapse:collapse;width:100%}.controls th,.controls td{padding:5px 8px;text-align:left;white-space:nowrap}.controls thead th{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;opacity:.7;font-weight:700}.controls tbody th{font-weight:600;opacity:.85}.key{display:inline-block;min-width:26px;padding:2px 7px;font:700 13px ui-monospace,SF Mono,Menlo,monospace;text-align:center;color:var(--ink);background:var(--milk);border-radius:6px;box-shadow:0 2px #00000059}.controls-general{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-top:10px;padding-top:10px;border-top:1px solid rgba(247,243,236,.18)}@media(max-width:520px){.controls th,.controls td{padding:4px;white-space:normal}}.controls-tip{margin-top:8px;font-size:13px;opacity:.9;line-height:1.5;text-align:center}.spark.mini{color:#ffd23f}.spark.super{color:#ff6a3d}#hud-showdown{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:5px;background:#2b2340b8;padding:6px 12px;border-radius:999px}#hud-showdown i{display:block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 -2px #00000040}#hud-showdown .sd-label{font-size:13px;font-weight:700;color:var(--milk);padding:0 4px}.btn.small{width:auto;padding:8px 18px;font-size:15px;margin:14px auto 0}.controls-wrap[hidden]{display:none}.carsel{z-index:11;padding:16px}.carsel-title{font-size:clamp(30px,5vw,48px);font-weight:900;font-style:italic;color:var(--butter);text-shadow:3px 3px 0 var(--jam),6px 6px 18px rgba(0,0,0,.5);margin-bottom:18px}.carsel-row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,210px));gap:14px;max-width:calc(100vw - 32px)}.carsel-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.car-card{position:relative;display:flex;flex-direction:column;padding:10px 14px 14px;background:#1e1309e0;border:3px solid rgba(247,243,236,.18);border-radius:16px;box-shadow:0 10px 34px #00000073;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}.car-card:before{content:"";position:absolute;left:10px;right:10px;top:36px;height:128px;border-radius:12px;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--car) 34%,#fff4e0),color-mix(in srgb,var(--car) 18%,#efb97e) 70%);opacity:.9}.car-card.sel-p1{border-color:var(--butter);box-shadow:0 0 0 3px #f6c94540,0 10px 34px #00000073}.carsel.duo .car-card.sel-p2{border-color:#4fd1c5;box-shadow:0 0 0 3px #4fd1c540,0 10px 34px #00000073}.carsel.duo .car-card.sel-p1.sel-p2{border-color:var(--butter);box-shadow:0 0 0 4px #4fd1c5,0 10px 34px #00000073}.car-tags{display:flex;gap:6px;justify-content:center;height:24px;position:relative}.car-tag{font-size:13px;font-weight:900;letter-spacing:.5px;padding:2px 10px;border-radius:999px;color:var(--ink);background:var(--butter)}.car-tag.p2{background:#4fd1c5}.car-tag:not(.ready){background:transparent;color:var(--butter);box-shadow:inset 0 0 0 2px var(--butter)}.car-tag.p2:not(.ready){color:#4fd1c5;box-shadow:inset 0 0 0 2px #4fd1c5}.car-stage{position:relative;height:128px;margin:2px -4px 8px}.car-name{position:relative;font-size:20px;font-weight:900;color:var(--car);text-align:center;filter:brightness(1.15)}.car-card[data-type="3"] .car-name{filter:brightness(1.7)}.car-tagline{position:relative;font-size:13px;opacity:.8;text-align:center;min-height:34px;margin:2px 0 10px;line-height:1.3}.car-bars{position:relative;display:grid;gap:5px}.car-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.car-bar-label{opacity:.85;white-space:nowrap}.car-meter{display:flex;gap:3px}.car-meter i{display:block;width:14px;height:9px;border-radius:3px;background:#f7f3ec29}.car-meter i.on{background:var(--butter)}.carsel-status{margin-top:16px;min-height:28px;font-size:20px;font-weight:800}.carsel-status.ready{color:var(--butter);font-size:26px;animation:callout-pop .35s cubic-bezier(.3,1.6,.5,1) both}.carsel-hints{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin-top:8px;font-size:14px;opacity:.85}.carsel-hints .p1{color:var(--butter)}.carsel-hints .p2{color:#4fd1c5}.carsel-btns{display:flex;gap:12px;justify-content:center}.carsel-btns .btn.small{margin:14px 0 0;min-width:120px}@media(max-width:920px){.carsel-row{grid-template-columns:repeat(2,minmax(0,210px))}.car-stage{height:96px}.car-card:before{height:96px}.carsel-title{margin-bottom:10px}}body.reduce-motion .car-card{transition:none}body.reduce-motion .carsel-status.ready{animation:none}.online-overlay{z-index:10;padding:16px}.online-title{font-size:clamp(30px,5vw,44px);font-weight:900;font-style:italic;color:var(--butter);text-shadow:3px 3px 0 var(--jam);margin-bottom:16px}.online-panel,.online-menu{width:min(440px,calc(100vw - 32px));padding:26px 34px 22px}.online-panel .btn,.online-menu .btn{width:100%}.online-panel input[type=text],.lobby-panel select{font-family:inherit;font-size:18px;font-weight:700;color:var(--ink);background:var(--milk);border:2px solid transparent;border-radius:10px;padding:10px 14px}.online-panel input[type=text]{user-select:text;-webkit-user-select:text}.online-panel input[type=text]:focus-visible,.lobby-panel select:focus-visible{outline:3px solid var(--butter);outline-offset:2px}.online-field{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:left;margin-bottom:6px}.online-field label,.lobby-label{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;opacity:.7}.online-or{display:flex;align-items:center;gap:12px;margin:14px 0 10px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;opacity:.65}.online-or:before,.online-or:after{content:"";flex:1;border-top:1px solid rgba(247,243,236,.25)}.online-join{display:flex;gap:10px;align-items:center}.online-join input{flex:1;min-width:0;letter-spacing:3px;font-variant-numeric:tabular-nums}.online-panel .online-join .btn{width:auto;min-width:96px;margin:0}.online-error{min-height:26px;margin-top:12px;font-size:16px;font-weight:700;color:#ff9a8a}.online-error.busy{color:var(--milk);opacity:.85;font-weight:600}.online-panel .btn.small{width:auto}.btn:disabled,.btn:disabled:hover{cursor:default;transform:none;background:#f7f3ec1a;color:#f7f3ecbf}.btn.secondary:disabled,.btn.secondary:disabled:hover{background:transparent;border-color:#f7f3ec59}.lobby-panel{width:min(620px,calc(100vw - 32px));padding:24px 30px 20px}.lobby-top{display:flex;gap:22px;align-items:flex-start;justify-content:space-between;text-align:left}.lobby-codebox{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.lobby-code{font-size:clamp(44px,9vw,64px);font-weight:900;letter-spacing:6px;line-height:1.05;color:var(--butter);text-shadow:3px 3px 0 var(--jam);font-variant-numeric:tabular-nums;user-select:text;-webkit-user-select:text;cursor:text}.lobby-codebox .btn.small{margin:6px 0 0}.lobby-tablebox{display:flex;flex-direction:column;gap:6px;padding-top:6px;min-width:0}.lobby-panel select{font-size:16px;padding:8px 12px;cursor:pointer;max-width:260px}.lobby-table-ro{font-size:18px;font-weight:700;padding:8px 0}.lobby-table-ro[hidden],.lobby-panel select[hidden]{display:none}.lobby-rows{display:grid;gap:6px;margin:18px 0 8px}.lobby-row{display:flex;align-items:center;gap:14px;padding:4px 14px 4px 6px;border-radius:12px;background:#f7f3ec12;text-align:left}.lobby-row.me{background:#f6c94529;box-shadow:inset 0 0 0 1px #f6c94580}.lobby-thumb{flex:none;width:96px;height:60px;border-radius:9px;overflow:hidden;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--car) 30%,#fff4e0),color-mix(in srgb,var(--car) 16%,#efb97e) 75%)}.lobby-thumb img{display:block;width:100%;height:100%;object-fit:contain}.lobby-thumb img:not([src]){visibility:hidden}.lobby-name{font-size:20px;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-row.ai .lobby-name{font-weight:600;opacity:.7;font-style:italic}.lobby-tag:not(:empty){font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:999px;color:var(--ink);background:var(--butter)}.lobby-car{font-size:16px;font-weight:800;color:var(--car);filter:brightness(1.25);white-space:nowrap}.lobby-row .lobby-car{color:color-mix(in srgb,var(--car) 70%,var(--milk));filter:none}.lobby-error{margin:6px 0;font-size:15px;font-weight:700;color:#ff9a8a}.lobby-error[hidden]{display:none}.lobby-btns{display:flex;gap:12px;justify-content:center;margin-top:10px}.lobby-btns .btn{width:auto;flex:1;max-width:260px;margin:0}.lobby-leave{margin-top:14px}@media(max-width:560px){.lobby-top{flex-direction:column;gap:10px}.lobby-thumb{width:72px;height:45px}}.online-results .online-res-title{font-size:36px;font-weight:900;color:var(--butter);margin-bottom:16px}.results-row .res-tie{align-self:center;font-size:12px;font-weight:900;letter-spacing:.5px;white-space:nowrap;padding:2px 10px;border-radius:999px;color:var(--ink);background:var(--butter)}.online-res-btns{display:flex;gap:12px;justify-content:center;margin-top:20px}.online-res-btns .btn{width:auto;min-width:180px;margin:0}.online-results{width:min(480px,calc(100vw - 32px));padding:28px 30px 22px}@media(max-width:520px){.online-results{padding:20px 16px}.online-results .results-row{gap:10px;font-size:18px;padding:8px 10px}.online-res-btns .btn{min-width:0;flex:1}}