:root{font-family:ui-rounded,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;color:#edf8ff;background:#07111f; font-weight:750}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at top,#173d60 0,#0a1525 55%,#08111c 100%);padding:20px 15px}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
.shell{max-width:1280px;margin:0 auto}
.topline{display:flex;gap:20px;align-items:end;justify-content:space-between;padding:5px 6px 18px}
.titlebox .overline{font-size:11px;letter-spacing:.18em;color:#94e8e5;font-weight:900}
.topline h1{font-size:clamp(22px,3vw,38px);letter-spacing:-.03em;margin:5px 0 0}
.topline h1 span{color:#fff2a6}
.tag{border:1px solid #5ab4c0;color:#b4f0ee;border-radius:999px;font-size:12px;white-space:nowrap;padding:9px 17px;background:#12384b}
.game{position:relative;width:100%;aspect-ratio:16/9;min-height:280px;max-height:calc(100dvh - 126px);overflow:hidden;border-radius:20px;border:1px solid #48728b;box-shadow:0 30px 75px #000b;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{display:block;width:100%;height:100%;touch-action:none}
.hud{position:absolute;top:max(13px,env(safe-area-inset-top));left:max(15px,env(safe-area-inset-left));right:max(15px,env(safe-area-inset-right));z-index:2;display:flex;gap:9px;pointer-events:none;justify-content:center}
.hud-item{min-width:108px;padding:9px 16px;border:1px solid #ffffff54;border-radius:12px;background:#07172ddc;backdrop-filter:blur(7px);box-shadow:inset 0 0 15px #6cb9ff14}
.hud-item small{font-size:9px;letter-spacing:.12em;color:#a7c4d7;display:block;margin-bottom:1px}
.hud-item strong{display:block;font-weight:950;line-height:1.15;white-space:nowrap;font-size:clamp(17px,2.2vw,29px);font-variant-numeric:tabular-nums}
.hud-item strong em{font-size:14px;color:#89a6b6;font-style:normal}
.hud-item.position strong{color:#ffe098}
.hud-item.next strong{color:#8ef4e2}
.hud-item.clock{min-width:230px}
.hud-item.overtake{min-width:110px}
.bar{height:5px;background:#ffffff26;border-radius:5px;margin-top:7px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5af2cf,#ffdb75);transition:width .5s linear}
.danger{position:absolute;top:86px;left:50%;transform:translateX(-50%);z-index:2;background:#ad264ccc;border:1px solid #ffd9d9;border-radius:12px;color:white;padding:9px 21px;text-align:center;box-shadow:0 3px 23px #0008;font-size:clamp(12px,1.6vw,20px);max-width:85%;pointer-events:none;opacity:0;transition:opacity .25s}
.danger.visible{opacity:1}
.sound{position:absolute;z-index:3;right:16px;top:100px;background:#092f46d9;color:white;border:1px solid #cdf9ff77;border-radius:12px;padding:9px 13px;font-size:17px}
.side-lights{position:absolute;bottom:14px;left:12px;right:12px;display:flex;justify-content:space-between;z-index:2;pointer-events:none;color:#e7f6f7;text-shadow:0 2px 5px #000b;font-family:ui-monospace,monospace;font-weight:900;letter-spacing:.11em;font-size:11px}
.touch-controls{position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:0 15px 35px;pointer-events:none}
.touch-controls button{pointer-events:auto;display:flex;align-items:center;gap:9px;background:#08223cab;color:white;border:1px solid #8ed7ecb0;min-height:62px;min-width:110px;border-radius:16px;padding:0 18px;font-size:22px;box-shadow:0 3px 18px #0006}
.touch-controls button small{font-size:11px}
.touch-controls button:active{background:#2388a8}
.overlay{position:absolute;inset:0;z-index:4;background:linear-gradient(120deg,#061324ea 0,#07192dc9 65%,#092440ad);display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;backdrop-filter:blur(4px)}
.overlay[hidden]{display:none}
.overlay-card{width:min(620px,100%);text-align:center;border:1px solid #a8e6f27a;border-radius:22px;padding:clamp(16px,2vw,28px);background:linear-gradient(160deg,#162f4cf0,#061525f2);box-shadow:0 15px 60px #000a}
.eyebrow{font-size:11px;color:#94e8e5;letter-spacing:.2em;font-weight:950}
.overlay-card h2{font-size:clamp(23px,3vw,35px);color:#fff1b4;margin:9px 0}
.overlay-text{font-size:clamp(12px,1.5vw,16px);line-height:1.8;color:#e4f4ff;margin:7px auto 16px;max-width:510px}
.buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:170px;padding:10px 20px;border-radius:13px;border:0;font-size:15px;font-weight:900;cursor:pointer}
.btn.primary{color:#08182a;background:linear-gradient(105deg,#ffe09b,#fff5c6);box-shadow:0 5px 19px #bd80352c}
.btn.primary:disabled{color:#a8b3ba;background:#455f69;cursor:not-allowed}
.btn.youtube{background:#f44352;color:white}
.hint{margin:15px 0 0;font-size:11px;line-height:1.6;color:#a8c8d9}
.pit-countdown{padding:12px;margin:8px auto 16px;border-radius:16px;background:#122e3d;max-width:250px;border:1px solid #6fe6cf}
.pit-countdown small{display:block;color:#b8fff1}
.pit-countdown strong{display:block;font-size:38px;color:#ffe6a4;font-variant-numeric:tabular-nums}
.victory{display:block;width:min(250px,50%);height:auto;border-radius:14px;border:2px solid #e7ca72;margin:10px auto;box-shadow:0 5px 30px #fbbd4733}
.victory[hidden],.pit-countdown[hidden],.btn[hidden]{display:none}
.footer{display:flex;justify-content:space-between;gap:12px;padding:14px 6px;font-size:11px;color:#9aabbf;flex-wrap:wrap}
@media  (max-width:720px), (max-height:520px) and (max-width:1100px){body{padding:0;background:#050f1b}
.shell{max-width:none}
.topline,.footer{display:none}
.game{width:100vw;height:100dvh;aspect-ratio:auto;max-height:none;min-height:0;border:none;border-radius:0}
.hud{justify-content:space-between;gap:4px;left:max(5px,env(safe-area-inset-left));right:max(5px,env(safe-area-inset-right));top:max(5px,env(safe-area-inset-top))}
.hud-item{padding:7px 7px;min-width:0;flex:1;border-radius:8px}
.hud-item small{font-size:8px}
.hud-item strong{font-size:clamp(13px,3.1vw,18px)}
.hud-item strong em{font-size:10px}
.hud-item.clock{flex:1.55;min-width:0}
.hud-item.next{flex:1.15}
.hud-item.overtake{flex:.7}
.danger{top:65px;padding:6px 12px}
.sound{right:7px;top:75px;padding:5px 9px}
.overlay{padding:10px}
.overlay-card{padding:15px}
.overlay-card h2{margin:5px 0}
.overlay-text{margin:4px 0 10px}
.touch-controls{padding:0 7px max(23px,env(safe-area-inset-bottom))}
.touch-controls button{min-width:84px;min-height:51px;padding:0 14px}
.hint{margin:8px 0 0}
.victory{width:min(130px,27%)}}
@media  (orientation:portrait) and (max-width:720px){.overlay-card{max-height:92dvh;overflow:auto}
.touch-controls{padding-bottom:max(20px,env(safe-area-inset-bottom))}}
@media  (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media  (max-height:520px){.overlay-card{max-height:96dvh;overflow:auto}
.overlay-card h2{font-size:22px}
.overlay-text{font-size:12px;line-height:1.5}
.hint{font-size:9px;line-height:1.4}
.victory{width:min(110px,23%)}
.btn{min-height:40px;padding:7px 12px}
.hud-item strong{font-size:15px}}
.hud-item.fuel{min-width:160px;flex:0 1 168px}
.hud-item.fuel strong{color:#ffe07f}
.fuelPickups{float:right;font-size:9px;color:#e3e9ab;font-weight:800;letter-spacing:0}
.fuel-meter{height:8px;margin-top:5px;border:1px solid #9caeab5a}
.fuel-meter i{background:linear-gradient(90deg,#5ee6cc,#bfea7a,#ffe065);transition:width .2s linear}
.fuel-meter i.low{background:linear-gradient(90deg,#ef565b,#ffb051)}
.fuelHint{margin-top:4px;color:#a3c6d4!important;white-space:nowrap;letter-spacing:0!important;font-size:9px!important}
@media  (max-width:720px),(max-height:520px) and (max-width:1100px){.hud-item.fuel{min-width:0;flex:1.08}
.hud-item.fuel strong{font-size:clamp(12px,3vw,18px)}
.fuelHint{display:none!important}
.fuelPickups{font-size:7px}
.hud-item.overtake{flex:.57}}
@media  (max-width:380px){.hud-item{padding:5px 3px}
.hud-item small{font-size:7px}
.hud-item.clock{flex:1.3}}
@media  (max-width:720px),(max-height:520px) and (max-width:1100px){.fuelPickups{display:none}
.hud-item.fuel small{white-space:nowrap}}
.sound.music{right:76px;min-width:42px;background:#1f3c59df;color:#fff4b2}
.time-chip{position:absolute;top:102px;left:17px;z-index:2;padding:8px 13px;border:1px solid #ffffff69;border-radius:999px;background:#07162ab9;backdrop-filter:blur(7px);box-shadow:0 4px 14px #0005;color:#ffeab3;pointer-events:none;font-weight:900;font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
@media  (max-width:720px),(max-height:520px) and (max-width:1100px){.sound.music{right:49px;top:75px;padding:5px 8px;min-width:32px}
.time-chip{top:79px;left:8px;font-size:10px;padding:6px 9px}}
.touch-controls{align-items:end}
.speed-chip{position:absolute;top:155px;left:17px;z-index:2;background:#061322ba;color:#ffebbb;border:1px solid #ffffff50;border-radius:9px;padding:7px 12px;font:900 16px ui-monospace,monospace;pointer-events:none}
.quiz-panel{position:absolute;z-index:3;left:50%;top:28%;transform:translateX(-50%);width:min(470px,80%);padding:13px 17px;border:2px solid #ffb8dd;border-radius:16px;background:linear-gradient(140deg,#42133ef5,#09182cf5);color:white;box-shadow:0 7px 35px #000b;text-align:center}
.quiz-panel[hidden]{display:none}
.quiz-panel .quiz-title{color:#ffb7d3;font-size:15px;font-weight:950}
.quiz-panel img{position:absolute;left:-33px;top:-28px;width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 4px 7px #0008)}
.quiz-question{font-size:15px;font-weight:900;line-height:1.5;margin:12px 0}
.quiz-choices{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.quiz-choice{background:#f8dce9;color:#281329;border:0;border-radius:9px;padding:9px;min-width:105px;font-size:12px;font-weight:900}
.quiz-status{font-size:12px;margin:8px 0 1px;color:#ffeba5}
@media  (max-width:720px),(max-height:520px) and (max-width:1100px){.speed-chip{left:8px;top:115px;font-size:12px;padding:5px 7px}
.quiz-panel{top:22%;width:86%;padding:8px 9px}
.quiz-panel img{width:57px;height:57px;left:-16px;top:-25px}
.quiz-question{font-size:12px;margin:6px 0}
.quiz-choice{font-size:10px;padding:6px;min-width:75px}
.quiz-status{font-size:10px}}
@media  (max-width:350px){.touch-controls button{min-width:75px}}
.quiz-panel{border:3px solid #ff97d2;background:linear-gradient(120deg,#fff6fcf5,#f0def9f5);color:#1d2146;box-shadow:0 9px 31px #061126ba,0 0 0 4px #ff84c944;min-height:125px;padding-left:100px}
.quiz-panel .quiz-title{color:#e72f84;font-size:18px;text-shadow:0 1px 0 white}
.quiz-panel img{left:-12px;top:50%;transform:translateY(-50%);width:117px;height:145px;border-radius:13px;object-fit:cover;object-position:center top;border:3px solid white;box-shadow:0 5px 20px #0006;filter:none}
.quiz-question{color:#1b2854;font-size:16px}
.quiz-choice{background:#fff;border:2px solid #f59cca;color:#22305a;box-shadow:0 3px 0 #ef9ac3}
.quiz-choice:active{transform:translateY(2px)}
.quiz-status{color:#b52073;font-weight:850}
@media  (max-width:720px),(max-height:520px) and (max-width:1100px){.quiz-panel{padding-left:68px;top:25%;min-height:100px}
.quiz-panel img{left:-9px;width:75px;height:101px}
.quiz-panel .quiz-title{font-size:13px}}
.quiz-skip[hidden]{display:none!important}
.quiz-panel{z-index:6;top:50%;transform:translate(-50%,-50%);width:min(580px,90%);padding:22px 21px 18px 130px;background:linear-gradient(135deg,#fff8fc,#ffe4f3);border-color:#f9a0d7}
.quiz-panel img{left:0;top:50%;transform:translateY(-50%);height:100%;max-height:260px;width:122px;border-radius:11px 0 0 11px;object-fit:cover;object-position:center top}
.quiz-question{font-size:clamp(16px,1.9vw,22px);line-height:1.45;margin:14px 0}
.quiz-choices{flex-direction:column;align-items:stretch;gap:9px}
.quiz-choice{font-size:clamp(13px,1.5vw,16px);text-align:left;padding:12px 14px;min-width:unset}
.quiz-skip{margin-top:12px;border-radius:9px;border:1px solid #aa5387;background:#fcf6ff;color:#76345a;font-size:12px;padding:7px 11px}
.quiz-status{line-height:1.55;margin-top:12px}
@media (max-width:720px),(max-height:520px) and (max-width:1100px){.quiz-panel{width:93%;padding:10px 10px 12px 80px;max-height:78dvh;overflow:auto}
.quiz-panel img{width:75px;height:100%;max-height:260px;left:0;top:0;transform:none;object-position:center top}
.quiz-question{font-size:clamp(12px,2.9vw,17px);margin:7px 0}
.quiz-choice{font-size:12px;padding:8px 9px}
.quiz-status{font-size:11px;margin-top:8px}
.quiz-skip{margin-top:6px;padding:5px 7px;font-size:10px}}
.touch-controls{gap:20px;justify-content:space-between}
.touch-controls button{flex:0 1 180px;justify-content:center}
@media (max-width:720px){.touch-controls{padding-bottom:20px}
.touch-controls button{flex:0 1 120px}}
.quiz-panel{padding-left:155px}
.quiz-panel img{left:10px;top:50%;width:128px;height:166px;transform:translateY(-50%);object-fit:cover;object-position:center 16%;border-radius:12px}
.overlay-card.won .victory{display:block;width:min(510px,98%);height:auto;max-height:45dvh;object-fit:contain}
.overlay-card.won .victory[hidden]{display:none}
@media  (max-width:720px),(max-height:520px) and (max-width:1100px){.quiz-panel{padding-left:100px}
.quiz-panel img{left:7px;top:50%;width:84px;height:121px;max-height:121px;transform:translateY(-50%);object-fit:cover;object-position:center 18%;border-radius:10px}
.overlay-card.won .victory{max-height:34dvh}}
.start-sequence[hidden]{display:none!important}
.start-sequence{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(120deg,#061424e8,#0a183bd8 60%,#08152ad0);backdrop-filter:blur(2px);pointer-events:none}
.start-stage{width:min(660px,94%);text-align:center;padding:clamp(20px,4vw,40px) clamp(12px,4vw,35px);border-radius:24px;border:2px solid #80b4d4bb;box-shadow:0 20px 70px #000d;background:linear-gradient(155deg,#06162fef,#15375aef)}
.start-stage-top{letter-spacing:.19em;font-size:clamp(11px,1.3vw,15px);color:#b5e9ff;font-weight:950}
.start-stage h2{font-size:clamp(20px,3.5vw,32px);color:white;line-height:1.35;margin:12px auto 27px}
.start-lamps{display:flex;gap:clamp(7px,2vw,23px);justify-content:center;background:#050c16;border:3px solid #5b6b77;border-radius:19px;padding:18px 12px;box-shadow:inset 0 5px 15px #0009,0 8px 24px #0008}
.start-lamp{width:clamp(24px,7vw,65px);height:clamp(24px,7vw,65px);border-radius:50%;background:#271b27;border:4px solid #434752;box-shadow:inset 0 3px 12px #0009;transition:background .1s,box-shadow .1s}
.start-lamp.on{background:#ff2641;border-color:#ff9d9f;box-shadow:inset 0 -4px 9px #af0928,0 0 26px #ff163baa,0 0 11px #ff9d9f}
.start-caption{font-size:clamp(20px,4vw,33px);font-weight:1000;color:#f9d4d4;margin:18px auto 8px;min-height:1.5em}
.start-instruction{font-size:12px;color:#b8d1de;margin:8px 0 0}
.start-sequence.go{background:#07162770;backdrop-filter:none}
.start-sequence.go .start-stage{border:none;box-shadow:none;background:none;padding:8px}
.start-sequence.go .start-stage-top,.start-sequence.go .start-stage h2,.start-sequence.go .start-lamps,.start-sequence.go .start-instruction{display:none}
.start-sequence.go .start-caption{font-size:clamp(90px,16vw,170px);font-style:italic;font-weight:1000;color:#89f7c7;text-shadow:0 9px 0 #0c3140,0 0 40px #00ffaa,0 2px 22px #04172b}
.pause-signal{font-size:11px;color:#5c3c06;background:#fff0b1;margin:0 auto 7px;padding:5px 9px;border-radius:9px;font-weight:950;width:fit-content;max-width:100%}
.pause-signal span{color:#e5ad18;letter-spacing:.05em;text-shadow:0 0 8px #fbd357}
.pit-signal{display:none;color:#ffdb65;letter-spacing:.06em;font-weight:900;margin:5px auto 9px;text-shadow:0 0 12px #f3b645}
.pit-signal small{letter-spacing:0;color:#f9e3a6;margin-left:8px}
.overlay-card.pit .pit-signal{display:block}
@media (max-width:720px){.start-stage h2{margin:8px auto 14px}
.start-lamps{padding:12px 6px}
.start-caption{margin-top:12px}
.pause-signal{font-size:10px}}
.fanfare-replay{background:linear-gradient(135deg,#f6dc7b,#f7ae3b);color:#2d1b07;border:1px solid #fbe9ae;font-weight:900}
.fanfare-replay:hover{filter:brightness(1.06)}