/* Shared finish: warm paper, deep racing green and restrained brass accents. */
:root{--paper:#f7f6ef;--racing:#214e43;--brass:#b58b43;--line:#cdd5c9}
.vehicle-stats{display:block;font-size:8px;font-variant-numeric:tabular-nums;color:#617657;margin-top:4px;white-space:nowrap}
#lobby .vehicle:disabled{cursor:not-allowed;background:#e9ece3;border:1px dashed #b5beaa;box-shadow:none}
#lobby .vehicle:disabled img{opacity:.46;filter:grayscale(.8)}
.vehicle-lock{position:absolute;top:5px;right:5px;font-size:8px;padding:2px 5px;border-radius:4px;background:#d6ddcc;color:#5e7053}
.cloud-screen{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 30% 40%,#f7faffed,transparent 70%),radial-gradient(ellipse at 70% 55%,#e7f0fff2,transparent 80%);transition:opacity .25s}
.is-clouded .cloud-screen{opacity:.95}.is-water .hit-flash{background:radial-gradient(ellipse,transparent 35%,#82d7f7b5)}
.ufo-indicator{position:absolute;left:50%;top:25%;transform:translateX(-50%);display:none;font-size:12px;background:#43367bde;border:1px solid #c6c5f2;border-radius:8px;padding:9px 16px;white-space:nowrap}.is-ufo .ufo-indicator{display:block}
@media(max-width:899px){.vehicle-stats{font-size:6px;margin-top:3px}.vehicle-lock{font-size:6px;top:3px;right:3px;padding:2px 3px}}
button{touch-action:manipulation}
#lobby{background:linear-gradient(90deg,transparent 0%,#f2f2e80a 32%,#f2f2e8ee 41%,#f2f2e8 48%)}
#lobby header{background:#f7f6efed;border-bottom-color:#b9c6b966;box-shadow:0 2px 16px #193d2d08}
#lobby .brand{letter-spacing:-.7px}
#lobby .brand em{letter-spacing:2px;text-transform:uppercase}
#lobby header button{background:#fffdf5;border-color:#d0d7c9;border-radius:8px;color:#3c5147}
#lobby header button:hover{border-color:#6b8975;background:#e9efe4}
#lobby .config{column-gap:22px}
#lobby .config h2{display:flex;align-items:center;gap:7px;letter-spacing:.2px;color:#233f35}
.section-number{font-size:9px;font-style:normal;font-weight:600;letter-spacing:1px;color:#879585;font-variant-numeric:tabular-nums}
#lobby .section-heading>small{color:#65755f}
#lobby .dog,#lobby .vehicle,#lobby .choices button,#lobby .track{border-color:#cbd4c4;background:#fffdf6;box-shadow:0 2px 5px #27422c05;border-radius:10px}
#lobby :is(.dog,.vehicle,.choices button,.track):not(.locked):hover{background:#f3f6e9;border-color:#7f9a7b;box-shadow:0 3px 10px #23472d12}
#lobby :is(.dog,.vehicle,.choices button,.track).active{border-color:#35664f;background:#e7efdf;box-shadow:inset 0 0 0 1px #fff8,0 2px 6px #29492d0d}
#lobby .dog,#lobby .vehicle,#lobby .choices button{position:relative}
#lobby :is(.dog,.vehicle,.choices button).active::after{content:'✓';position:absolute;right:5px;top:5px;width:14px;height:14px;border-radius:50%;background:#35664f;color:#fffce9;font-size:9px;line-height:14px;text-align:center;font-weight:700;box-shadow:0 1px 3px #24492c20}
#lobby .dog img{border:2px solid #fffdf5;box-shadow:0 2px 7px #173d291c}
#lobby .dog span{color:#4e7252}
#lobby .vehicle img{filter:drop-shadow(0 5px 2px #233f2915)}
#lobby .choices svg{fill:#688d70}
#lobby .choices .active svg{fill:#35664f}
#lobby .track img{filter:saturate(1.12)}
#lobby .track .difficulty{background:#fffbeeef;border:1px solid #fff8;border-radius:4px;color:#465b42;letter-spacing:.2px}
#lobby .track.locked{background:repeating-linear-gradient(135deg,#e7ebe1 0 12px,#e4e8de 12px 24px);border-color:#b7c2ad}
#lobby .track.locked small{color:#6f7e66}
#championship-meter{display:inline-flex;gap:3px;margin-left:3px;align-items:center}
#championship-meter i{width:12px;height:4px;border-radius:3px;background:#cbd3c2}
#championship-meter .open{background:#94ac80}#championship-meter .won{background:#bb944b}
#lobby .start-row{border-color:#bdcbb7}
#lobby #summary{color:#2e503e}
#lobby #start{background:#245442;border:1px solid #194534;border-radius:9px;box-shadow:0 3px 0 #163c2b,0 5px 15px #28553720;letter-spacing:1px}
#lobby #start:hover{background:#32684e;box-shadow:0 3px 0 #163c2b,0 6px 18px #28553730}
#lobby #start:active{box-shadow:0 1px 0 #163c2b}
#lobby .preview-caption{background:#f9f7eadc;padding:7px 10px;border:1px solid #fff7;border-radius:6px;color:#2c4d39;box-shadow:0 3px 12px #12391c0a}
#lobby .garage-dot{background:#5c8b5e;border-color:#dbe8c9}
.preview-ground{position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(transparent,#172c28b3);pointer-events:none}
#lobby .showcase-label{bottom:7%;text-shadow:0 2px 8px #10291ee6}
#lobby #model-name{font-size:32px;letter-spacing:4px}
#lobby #vehicle-name{font-size:11px;line-height:1.6;letter-spacing:.2px}
#lobby .showcase-label p{font-size:10px;color:#f0efdfb8}
#lobby footer{color:#677e64;font-size:9px;text-shadow:none}
#lobby footer a{border-bottom:1px solid #9dae9380;padding-bottom:2px}
.race-toolbar{top:12px;left:18px;right:18px;gap:12px}
.race-toolbar button{border-radius:8px;background:#153a36e8;border:1px solid #d2e5cc50;box-shadow:0 2px 8px #12312920;padding:9px 13px;font-size:11px;color:#f7f6e8}
.race-toolbar button:hover{background:#315f4f}
#track-name{background:#153a36c4;padding:8px 15px;border:1px solid #d2e5cc30;border-radius:7px;font-size:10px;letter-spacing:.4px;text-align:center}
.hud .rank,.hud .lap,.hud .speed,.hud .item,.hud .map{background:#173d38df;border:1px solid #d7e6c747;border-radius:12px;box-shadow:0 5px 18px #102e2520;backdrop-filter:blur(6px)}
.hud .rank{left:22px;top:8px;padding:10px 15px;min-width:120px;border-left:3px solid #d6bc77}
.rank em{display:block;font-size:8px;font-style:normal;letter-spacing:2px;color:#c1d6be;margin-bottom:4px}
.hud .rank b{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;color:#ffedb5}
.hud .rank small{font-size:10px;color:#e8eedb;margin-top:4px}
.hud .lap{top:8px;right:22px;padding:12px 15px;min-width:126px}
.hud .lap b{font-size:15px;letter-spacing:1px;color:#f2f3de}
.hud .lap span{font-size:14px;color:#c8d9c1;letter-spacing:1px}
.hud .map{top:117px;right:22px;border-style:solid;opacity:.94}
.hud .item,.split .hud .item{top:130px;left:22px;min-height:102px;width:225px;border-color:#d7e6c747;background:#173d38df;padding:12px;gap:12px}
.hud .item.has-item{border:2px solid var(--item-color);background:#1d4940f0}
.item .item-icon{width:48px;height:48px;min-width:48px;flex-shrink:0;background:#edf3df14;border-radius:11px;padding:4px}
.item.has-item .item-icon{padding:4px;border-radius:11px;box-shadow:0 2px 8px #072b2220}
.hud .item em{font-size:8px;letter-spacing:1.5px;margin-bottom:4px}
.hud .item b{font-size:14px;letter-spacing:.5px}
.hud .item small{font-size:9px;margin-top:4px;line-height:1.5}
.hud .item kbd,.speed kbd{font:9px 'Microsoft YaHei',sans-serif;border:1px solid #d5e4b340;border-bottom-width:2px;border-radius:4px;background:#fff8db0d;color:#ecedc6;padding:3px 6px;display:inline-block;margin-top:7px}
.hud .speed{bottom:24px;left:22px;min-width:166px;padding:10px 16px;border-bottom:2px solid #b8d59b}
.hud .speed b{font-size:44px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.hud .speed small{margin-top:5px;letter-spacing:2px}.speed kbd{margin-top:6px}
.hud .energy{bottom:34px;left:210px;max-width:210px;width:calc(100% - 240px)}
.hud .energy span{font-size:10px;letter-spacing:.5px;color:#f4f2d4}
.hud .energy>div{height:9px;border:1px solid #deefb933;background:#18392cdc;box-shadow:0 2px 9px #0d2d2420}
.hud .energy i{background:linear-gradient(90deg,#8cc797,#e6ec9a)}
.hud .message{border:1px solid #f3edba40;border-radius:8px;background:#163f36e8;font-size:12px;box-shadow:0 4px 15px #153d2520}
.hud .route-label{color:#edf3da}
#overlay{background:#102d28a3;backdrop-filter:blur(8px)}
.modal{border-radius:18px;background:#f7f6ed;border-color:#ffffe8;box-shadow:0 25px 90px #061c2655;padding:27px}
.modal>small{color:#7d896d;letter-spacing:2px}
.modal h2{font-size:29px;color:#294d3c;letter-spacing:1px}
.modal button{border:1px solid #cbd5c1;border-radius:8px;background:#e8ecdf;font-size:12px;font-weight:600;transition:background .15s}
.modal button:hover{background:#dce5d1}.modal .primary{background:#27563f;border-color:#27563f}.modal .primary:hover{background:#386b50}
.results-view .modal{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;padding:22px 26px}
.results-view .modal>:is(small,h2,#modal-content,#next-stage){grid-column:1/-1}
.results-view .modal #again,.results-view .modal #garage{margin-top:13px}
.results-view #modal-title.placement-title{font-size:clamp(44px,6vw,66px);letter-spacing:6px;margin:6px 0 10px;color:#a87926;text-shadow:0 2px 0 #fff4b6}
.results-view .stage-result{margin:0 0 12px;padding:10px 12px;border:1px solid #c4d5ae;background:#e5edd7;font-size:13px;letter-spacing:.3px;color:#3f603d}
.results-view .podium-grid{gap:10px;margin-bottom:10px}
.results-view .podium-player{padding:12px 10px;border-radius:10px;gap:4px}
.results-view .podium-player strong{font-size:32px}.results-view .podium-player small{font-size:11px}
.results-view .result{padding:7px 9px;gap:10px;border-bottom:1px solid #d8dfce;font-size:11px;text-align:left}
.results-view .result:nth-of-type(even){background:#e9edde70}
.results-view .result img{width:27px;height:27px;border:1px solid #fff}
.results-view .result>b{color:#7c815c;font-size:11px!important}
.results-view .result span:last-child{font-variant-numeric:tabular-nums;font-size:10px;color:#75816c;white-space:nowrap}
.results-view #modal-content>p{margin:9px 0 0;font-size:10px}
.results-view .podium-player:not(.place-1):not(.place-2):not(.place-3){background:#e8ecdf;border-color:#c7d0bb}
.results-view .podium-player:not(.place-1):not(.place-2):not(.place-3) strong{color:#6f7d64}
@media(min-height:521px) and (max-height:800px){
 .results-view .modal{padding:18px 22px}
 .results-view #modal-title.placement-title{font-size:46px;margin:4px 0 8px}
 .results-view .stage-result{padding:7px 10px;margin-bottom:8px;font-size:12px}
 .results-view .podium-grid{margin-bottom:8px}
 .results-view .podium-player{padding:8px;gap:3px}.results-view .podium-player strong{font-size:27px}
 .results-view .result{padding:4px 7px}.results-view .result img{width:24px;height:24px}
 .results-view #modal-content>p{margin:6px 0 0;line-height:1.5}
 .results-view .modal button{padding:10px}.results-view .modal #again,.results-view .modal #garage{margin-top:8px}
}
dialog{border-radius:16px;background:#f7f6ed;border:1px solid #ffffe8;box-shadow:0 20px 75px #12352940;padding:26px;max-height:90dvh;overflow:auto}
dialog h2{color:#2b513e;letter-spacing:1px;margin-top:12px}
dialog p{color:#66795e;line-height:1.9}dialog p b{color:#315841}
dialog>button{border:1px solid #cbd6be;border-radius:6px;background:#e8ecdd}
#music-list{background:#fffdf6;border-color:#bcccb1;padding:12px}
#touch{gap:7px}#touch button{border-radius:10px;background:#173e36dd;box-shadow:0 2px 0 #0c302bbb;border:1px solid #e3edcb66}
.two-player #touch{display:none}
@media(max-width:1100px) and (min-width:900px){#lobby .config{column-gap:12px}#lobby .config h2{gap:5px}.section-number{font-size:8px}}
@media(max-width:899px){
 #lobby{background:linear-gradient(180deg,transparent 0 175px,#f2f2e8 196px)}
 #lobby header button{padding:7px 6px}#lobby .config{column-gap:8px}
 #lobby .config h2{gap:4px;font-size:12px}.section-number{font-size:8px;letter-spacing:0}
 #lobby #championship-meter{gap:2px;margin-left:0}#championship-meter i{width:8px;height:3px}
 #lobby .preview-ground{display:none}#lobby .showcase-label{bottom:15px;box-shadow:0 2px 10px #23452a10;text-shadow:none}
 #lobby #model-name{font-size:21px;letter-spacing:2px}#lobby #vehicle-name{font-size:9px}
 #lobby :is(.dog,.vehicle,.choices button).active::after{width:11px;height:11px;line-height:11px;font-size:7px;top:3px;right:3px}
 #lobby footer{font-size:8px}
 .race-toolbar{left:10px;right:10px;top:10px;gap:6px}.race-toolbar button{padding:8px 9px;font-size:10px}
 .hud .rank{left:10px;min-width:90px;padding:8px 11px}.hud .rank b{font-size:30px}.rank em{font-size:7px;letter-spacing:1px}
 .hud .lap{right:10px;min-width:100px;padding:9px 11px}.hud .lap b{font-size:12px}.hud .lap span{font-size:12px}
 .hud .item,.split .hud .item{left:10px;top:117px;width:190px;gap:8px;padding:9px;min-height:94px}
 .hud .item .item-icon{width:38px;height:38px;min-width:38px}.hud .item b{font-size:12px}.hud .item small{font-size:8px}
 .hud .map{right:10px;top:117px;width:105px;height:95px}
 .hud .speed{left:10px;bottom:20px;min-width:120px;padding:9px 12px}.hud .speed b{font-size:35px}
 .hud .energy{left:147px;bottom:30px;width:calc(100% - 170px);max-width:195px}.hud .energy span{font-size:8px}
 .split .hud .item{width:calc(100% - 20px)}.split .hud .energy{left:10px;bottom:142px;width:calc(100% - 20px)}
 .split .hud .rank{min-width:70px;padding:8px}.split .hud .lap{top:8px;right:10px;min-width:80px;padding:9px 7px}
 .split .hud .lap b,.split .hud .lap span{font-size:10px}.split .hud .rank small{font-size:8px}
 .split .hud .speed{min-width:100px}.split .hud .item small{display:none}
}
@media(max-width:899px) and (max-height:740px){#lobby{background:linear-gradient(180deg,transparent 0 135px,#f2f2e8 157px)}#lobby .showcase-label{bottom:10px}}
@media(max-height:520px) and (min-width:600px){
 #lobby{background:linear-gradient(90deg,transparent 0 24%,#f2f2e8 30%)}#lobby .showcase-label{bottom:14px}
 #lobby #model-name{font-size:22px}#lobby .config h2{font-size:10px;gap:4px}.section-number{font-size:7px}
 #lobby :is(.dog,.vehicle,.choices button).active::after{width:10px;height:10px;line-height:10px;font-size:7px}
 .hud .item,.split .hud .item{top:101px;min-height:78px;padding:6px;width:180px}.hud .item small{display:none}
 .hud .map{top:101px;width:100px;height:82px}.hud .speed{bottom:12px}.hud .energy{bottom:26px}
 .split .hud .energy{bottom:30px;left:142px;width:calc(100% - 165px)}
 .modal{padding:18px}.modal h2{font-size:23px;margin:10px 0}.modal button{padding:9px;margin-top:7px}
 .results-view .modal{padding:16px 20px;max-height:94dvh}.results-view .podium-player{padding:8px}.results-view .podium-player strong{font-size:25px}
}
@media(max-width:430px){
 #lobby .config h2{font-size:11px;gap:3px}#lobby .player-row{gap:4px}#lobby .section-heading>small{font-size:7px}
 #lobby .brand{font-size:15px}#lobby .brand svg{width:19px;height:19px}
 .results-view .modal{padding:18px 15px}.results-view .result{gap:6px;padding:7px 2px;font-size:10px}.results-view .result>b{min-width:35px}
 .results-view .podium-player strong{font-size:27px}
}
@media(prefers-reduced-motion:reduce){button{transition:none!important}.item.has-item,.victory-sparkles{animation:none!important}}