:root{--ink:#edf5f4;--muted:#9eb0b2;--bg:#071013;--panel:rgba(8,18,21,.88);--cyan:#15e3c2;--cyan2:#38f4d5;--line:rgba(255,255,255,.13);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#071013}button{font:inherit;color:inherit}button:focus-visible{outline:3px solid #fff;outline-offset:3px}#game-shell,#game{position:fixed;inset:0;width:100%;height:100%}#game{display:block;background:#10191a}.hidden{display:none!important}
.brand{position:fixed;left:clamp(18px,3vw,48px);top:clamp(16px,3vw,38px);z-index:10;display:flex;align-items:center;gap:11px}.brand-home{display:block;padding:0;border:0;background:transparent;cursor:pointer}.brand-home:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}.brand-mark{display:grid;place-items:center;width:52px;height:38px;border:1px solid rgba(255,255,255,.55);font-weight:950;font-size:22px;letter-spacing:-2px;transform:skew(-8deg);background:rgba(5,13,15,.55);backdrop-filter:blur(8px)}.brand-subes-logo{display:block;width:96px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));pointer-events:none}.brand-copy{display:flex;flex-direction:column;line-height:1;pointer-events:none}.brand-copy b{font-size:14px;letter-spacing:.17em}.brand-copy small{margin-top:5px;color:var(--cyan);font-size:7px;letter-spacing:.24em}
.screen{position:fixed;inset:0;z-index:8;background:radial-gradient(circle at 72% 47%,rgba(22,227,194,.12),transparent 31%),linear-gradient(90deg,rgba(5,13,15,.98) 0%,rgba(5,13,15,.95) 46%,rgba(5,13,15,.4) 74%,rgba(5,13,15,.8) 100%)}.start-screen{isolation:isolate}.start-screen:before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(4,12,14,.96) 0%,rgba(4,12,14,.78) 42%,rgba(4,12,14,.18) 78%),url('assets/grand-trip-heroes-lwie-serce.webp?v=13.1');background-repeat:no-repeat;background-position:center,72% center;background-size:100% 100%,auto 100%;opacity:.58;filter:saturate(.88) contrast(1.06)}.start-screen:after{content:"";position:absolute;z-index:0;inset:0;opacity:.18;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(90deg,#000,transparent 80%)}
.hero-panel{position:absolute;z-index:2;left:clamp(24px,6vw,96px);top:50%;transform:translateY(-47%);width:min(700px,55vw)}.eyebrow{margin:0 0 12px;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.27em}.hero-panel h1{font-size:clamp(40px,5.3vw,82px);line-height:.89;letter-spacing:-.055em;margin:0;max-width:800px;font-weight:950}.hero-panel h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.78)}.lead{max-width:550px;margin:16px 0 18px;color:#b8c5c5;font-size:clamp(13px,1.1vw,17px);line-height:1.5}
.setup-row{display:flex;gap:8px;margin-bottom:12px}.choice{flex:1;max-width:260px;text-align:left;padding:12px 16px;border:1px solid var(--line);background:rgba(255,255,255,.035);cursor:pointer;transition:.2s}.choice span,.choice small{display:block}.choice span{font-weight:900;font-size:13px;letter-spacing:.1em}.choice small{color:var(--muted);font-size:10px;margin-top:4px}.choice.active{border-color:var(--cyan);background:rgba(21,227,194,.1);box-shadow:inset 3px 0 var(--cyan)}
.tracks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.track-card{position:relative;min-height:88px;padding:12px 13px;text-align:left;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.035);cursor:pointer;transition:.2s}.track-card:hover,.track-card.active{transform:translateY(-2px);border-color:rgba(21,227,194,.8);background:rgba(21,227,194,.09)}.track-card.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cyan)}.track-card b,.track-card small,.track-card i{display:block}.track-card b{margin-top:18px;font-size:11px;letter-spacing:.055em}.track-card small{margin-top:3px;color:var(--muted);font-size:8px}.track-card i{position:absolute;right:9px;bottom:8px;color:var(--cyan);font-size:7px;font-style:normal;letter-spacing:.08em}.track-no{position:absolute;top:8px;left:9px;color:rgba(255,255,255,.28);font-size:9px}.track-icon{position:absolute;right:11px;top:5px;color:rgba(255,255,255,.16);font-size:32px;line-height:1}
.picker-label{margin:12px 0 7px;color:#859698;font-size:8px;font-weight:900;letter-spacing:.17em}.car-colors{display:flex;gap:7px}.color-choice{display:flex;align-items:center;gap:8px;min-height:38px;padding:5px 11px;border:1px solid var(--line);background:rgba(255,255,255,.035);cursor:pointer}.color-choice b{font-size:8px;letter-spacing:.09em;white-space:nowrap}.color-choice.active{border-color:var(--cyan);background:rgba(21,227,194,.1)}.color-choice[data-color="sand-camo"]{border-color:rgba(244,210,145,.58);background:rgba(203,164,98,.2)}.color-choice[data-color="sand-camo"] b{color:#ffe2aa;text-shadow:0 1px 5px #000}.color-choice[data-color="sand-camo"].active{border-color:#ffe0a0;background:rgba(215,177,111,.34);box-shadow:inset 3px 0 #ffe0a0}.paint{display:block;width:22px;height:22px;border:1px solid rgba(255,255,255,.3);border-radius:50%;box-shadow:inset 0 0 7px rgba(255,255,255,.3)}.paint.white{background:#f4f4ef}.paint.black{background:radial-gradient(circle at 32% 28%,#464949,#090b0b 48%,#020303 100%)}.paint.black-matt{border-color:#4a5151;background:linear-gradient(145deg,#1d2020,#050606);box-shadow:inset 0 0 2px rgba(255,255,255,.12)}.paint.gray{background:#9ca5a6}.paint.camo{border-color:#ffe0a0;background:radial-gradient(circle at 28% 30%,#8b6b45 0 20%,transparent 21%),radial-gradient(circle at 72% 68%,#745638 0 24%,transparent 25%),#e7c98d;box-shadow:0 0 8px rgba(255,218,146,.35),inset 0 0 5px rgba(255,255,255,.5)}
.hero-picker-label{margin-top:10px}.hero-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.hero-choice{display:flex;align-items:center;gap:8px;min-width:0;min-height:58px;padding:4px;border:1px solid var(--line);background:rgba(255,255,255,.035);text-align:left;cursor:pointer}.hero-choice:hover,.hero-choice:focus-visible,.hero-choice.active{border-color:var(--cyan);background:rgba(21,227,194,.1)}.hero-choice:focus-visible{outline:2px solid rgba(21,227,194,.4);outline-offset:2px}.hero-photo,.driver-avatar{flex:none;width:50px;height:50px;background-image:url('assets/grand-trip-heroes-lwie-serce.webp?v=13.1');background-repeat:no-repeat;background-size:220px 220px;background-color:#1b1713}.hero-friend{background-position:-11px -72px}.hero-brain{background-position:-89px -77px}.hero-captain{background-position:-142px -77px}.hero-choice>span:last-child{min-width:0}.hero-choice b,.hero-choice small{display:block}.hero-choice b{font-size:8px;line-height:1.15;letter-spacing:.06em}.hero-choice small{margin-top:4px;color:#91a0a0;font-size:7px;line-height:1.2}.hero-required{min-height:13px;margin:6px 0 0;color:#ffbd66;font-size:7px;font-weight:900;letter-spacing:.1em}.hero-required.ready{color:var(--cyan)}.hero-required.attention{animation:required-pulse .38s ease-in-out 2}@keyframes required-pulse{50%{color:#fff;transform:translateX(3px)}}
.primary,.secondary{border:0;min-height:50px;padding:0 24px;font-weight:950;font-size:13px;letter-spacing:.14em;cursor:pointer}.primary{margin-top:15px;min-width:220px;color:#06100f;background:var(--cyan);box-shadow:0 10px 34px rgba(21,227,194,.2)}.primary:hover{background:var(--cyan2)}.primary:disabled{color:#667374;background:#243133;box-shadow:none;cursor:not-allowed;opacity:.72}.primary span{padding-left:18px;font-size:20px}.secondary{background:transparent;border:1px solid var(--line)}.start-actions{display:flex;align-items:stretch;gap:8px;margin-top:15px}.start-actions .primary{margin-top:0}.stats-tab{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 18px;border:1px solid rgba(21,227,194,.45);color:#dffcf7;background:rgba(7,22,24,.72);text-decoration:none;font-size:10px;font-weight:950;letter-spacing:.12em}.stats-tab:hover,.stats-tab:focus-visible{border-color:var(--cyan);color:#06100f;background:var(--cyan)}.stats-tab span{padding-left:10px;font-size:15px}.controls-hint{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:13px;color:#718184;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.controls-hint kbd{padding:3px 6px;color:#b9c7c7;border:1px solid rgba(255,255,255,.2);border-radius:3px;background:rgba(255,255,255,.05);font:700 9px inherit}.car-showcase{position:absolute;z-index:1;right:3vw;top:50%;transform:translateY(-50%) rotate(8deg);width:min(31vw,430px);filter:drop-shadow(0 30px 40px rgba(0,0,0,.65))}.car-showcase img{position:relative;z-index:2;display:block;width:100%;animation:float 4s ease-in-out infinite}.car-showcase img.matte{filter:brightness(.68) saturate(.72) contrast(.9)}.car-showcase img.sand-camo{filter:brightness(1.17) saturate(1.22) contrast(1.08) drop-shadow(0 0 12px rgba(255,222,159,.24))}.showcase-roof{position:absolute;z-index:3;left:34%;top:64%;width:32%;height:13%;pointer-events:none;border:1px solid rgba(255,255,255,.13);border-radius:18% 18% 28% 28%;box-shadow:inset 0 3px 7px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.45)}.showcase-roof.color-black-matt{background:#080a0a}.showcase-roof.color-black{background:radial-gradient(circle at 35% 22%,#343838,#070909 58%,#020303)}.showcase-roof.color-white{background:linear-gradient(145deg,#f1f2ed,#c9cfcd)}.showcase-roof.color-gray{background:linear-gradient(145deg,#aab3b4,#747f81)}.showcase-roof.color-sand-camo{background:radial-gradient(circle at 28% 35%,#82684d 0 18%,transparent 19%),radial-gradient(circle at 72% 66%,#6b5743 0 22%,transparent 23%),#c4a875}.orbit{position:absolute;z-index:0;left:50%;top:50%;width:125%;aspect-ratio:1;border:1px solid rgba(21,227,194,.2);border-radius:50%;transform:translate(-50%,-50%)}.orbit:after{content:"";position:absolute;inset:12%;border:1px dashed rgba(255,255,255,.12);border-radius:50%}@keyframes float{50%{transform:translateY(-8px)}}
.hud{position:fixed;z-index:6;left:50%;top:20px;transform:translateX(-50%);display:flex;align-items:flex-start;gap:1px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));pointer-events:none}.hud-block{min-width:108px;padding:10px 16px;text-align:center;background:rgba(5,13,15,.8);border-top:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px)}.hud-block small,.hud-block strong{display:block}.hud-block small{font-size:8px;color:#8da0a1;letter-spacing:.16em}.hud-block strong{margin-top:3px;font-size:17px;font-variant-numeric:tabular-nums}.hud-time{min-width:150px;border-top-color:var(--cyan)}.speed{position:fixed;right:28px;bottom:28px;width:104px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.13);border-top-color:var(--cyan);border-radius:50%;background:rgba(5,13,15,.68);backdrop-filter:blur(8px)}.speed span{font-size:34px;font-weight:950;line-height:1;font-variant-numeric:tabular-nums}.speed small{font-size:8px;color:var(--cyan);letter-spacing:.18em}.surface-warning{position:fixed;left:50%;top:139px;transform:translateX(-50%);padding:7px 13px;color:#111;background:#ffc94d;font-size:9px;font-weight:950;letter-spacing:.12em;opacity:0;transition:opacity .15s}.surface-warning.show{opacity:1}
.race-progress{position:fixed;left:50%;top:84px;transform:translateX(-50%);display:grid;grid-template-columns:auto minmax(230px,520px) auto;align-items:center;gap:9px;width:min(650px,64vw);padding:7px 11px;border:1px solid rgba(255,255,255,.13);background:rgba(5,13,15,.78);backdrop-filter:blur(10px)}.progress-caption{color:#8fa1a2;font-size:7px;font-weight:900;letter-spacing:.13em}.progress-finish{color:#fff}.progress-track{position:relative;height:30px}.progress-track:before{content:"";position:absolute;left:0;right:0;top:14px;height:2px;background:rgba(255,255,255,.2)}.progress-track:after{content:"";position:absolute;right:-1px;top:7px;width:8px;height:16px;background:conic-gradient(#fff 25%,#1b2527 0 50%,#fff 0 75%,#1b2527 0) 0 0/8px 8px}.progress-fill{position:absolute;z-index:1;left:0;top:14px;width:0;height:2px;background:var(--cyan);transition:width .12s linear}.lap-tick{position:absolute;z-index:1;top:11px;width:1px;height:8px;background:rgba(255,255,255,.42)}.lap-tick-one{left:33.333%}.lap-tick-two{left:66.666%}.racer-marker{position:absolute;z-index:3;left:0;top:50%;width:31px;height:31px;overflow:hidden;border:2px solid rgba(255,255,255,.72);border-radius:50%;background:#111a1c;box-shadow:0 3px 9px rgba(0,0,0,.58);transform:translate(-50%,-50%);transition:left .12s linear}.ai-marker:nth-of-type(5){margin-top:-5px}.ai-marker:nth-of-type(6){margin-top:5px}.character-marker{background-image:url('assets/grand-trip-heroes-lwie-serce.webp?v=10.1');background-repeat:no-repeat;background-size:136px 136px;background-color:#1b1713;filter:saturate(.92) contrast(1.04)}.character-marker.hero-friend{background-position:-7px -45px}.character-marker.hero-brain{background-position:-55px -48px}.character-marker.hero-captain{background-position:-88px -48px}.helmet-marker{z-index:5;border-color:#fff;background:#172124}.helmet-marker:before{content:"";position:absolute;left:6px;top:5px;width:15px;height:14px;border-radius:9px 9px 4px 4px;background:#fff}.helmet-marker:after{content:"";position:absolute;left:5px;top:14px;width:18px;height:8px;border:3px solid #fff;border-top:0;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#172124 0 65%,#fff 66%)}.mystery-marker{border-style:double;border-width:3px}
.driver-chip{position:fixed;left:24px;top:92px;display:flex;align-items:center;gap:8px;padding:4px 11px 4px 4px;border:1px solid rgba(255,255,255,.16);background:rgba(5,13,15,.74);backdrop-filter:blur(8px)}.driver-avatar{display:block;width:42px;height:42px;background-size:185px 185px}.driver-avatar.hero-friend{background-position:-9px -61px}.driver-avatar.hero-brain{background-position:-75px -65px}.driver-avatar.hero-captain{background-position:-120px -65px}.driver-chip span:last-child{text-align:left}.driver-chip small,.driver-chip b{display:block}.driver-chip small{color:var(--cyan);font-size:6px;letter-spacing:.14em}.driver-chip b{margin-top:3px;font-size:8px;letter-spacing:.08em}
.countdown{position:fixed;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);font-size:min(26vw,260px);font-weight:950;line-height:1;color:#fff;text-shadow:0 0 50px rgba(21,227,194,.7);font-style:italic;pointer-events:none}.countdown.go{font-size:min(16vw,160px);color:var(--cyan)}
.engine-toggle,.music-toggle{position:fixed;z-index:12;top:clamp(12px,2.5vw,30px);display:flex;align-items:center;gap:10px;height:54px;border:1px solid rgba(255,255,255,.2);border-radius:28px;background:rgba(4,11,13,.78);backdrop-filter:blur(10px);cursor:pointer}.engine-toggle{right:clamp(12px,2.5vw,34px);padding:4px 13px 4px 4px}.engine-toggle img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff}.engine-toggle span,.music-toggle span:last-child{text-align:left}.engine-toggle b,.engine-toggle small,.music-toggle b,.music-toggle small{display:block}.engine-toggle b,.music-toggle b{font-size:9px;letter-spacing:.12em}.engine-toggle small,.music-toggle small{margin-top:3px;color:var(--cyan);font-size:7px;letter-spacing:.11em}.engine-toggle.muted,.music-toggle.muted{opacity:.65}.engine-toggle.muted small,.music-toggle.muted small{color:#9aa5a5}.music-toggle{right:clamp(202px,13vw,224px);padding:4px 13px 4px 5px}.music-icon{display:grid!important;place-items:center;width:42px;height:42px;flex:none;border:1px solid rgba(21,227,194,.55);border-radius:50%;color:#071013;background:var(--cyan);font-size:24px;font-weight:900}.music-toggle.finished .music-icon{color:#dce8e7;background:#263335;border-color:#617071}
.front-credit{position:absolute;z-index:3;left:clamp(24px,6vw,96px);bottom:10px;display:flex;align-items:center;gap:9px;color:#718184;font-size:7px;letter-spacing:.16em;white-space:nowrap}.front-credit img{display:block;width:82px;height:auto}.credit-for b{color:#a8b8b9;font-weight:900;letter-spacing:.11em}.privacy-link{margin-left:7px;padding-left:15px;border-left:1px solid rgba(255,255,255,.16);color:#91a3a5;text-decoration:none;font-weight:800;letter-spacing:.11em}.privacy-link:hover,.privacy-link:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.finish-screen{display:grid;place-items:center;background:rgba(3,10,12,.72);backdrop-filter:blur(9px)}.finish-card{width:min(650px,calc(100vw - 32px));max-height:calc(100vh - 24px);overflow:auto;padding:clamp(24px,5vw,56px);text-align:center;border:1px solid rgba(255,255,255,.16);background:linear-gradient(145deg,rgba(9,22,25,.98),rgba(5,12,14,.98));box-shadow:0 25px 100px rgba(0,0,0,.5)}.finish-card h2{margin:0 0 28px;font-size:clamp(52px,9vw,100px);line-height:.9;letter-spacing:-.06em}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}.result-grid div{padding:20px 10px}.result-grid div+div{border-left:1px solid var(--line)}.result-grid small,.result-grid strong{display:block}.result-grid small{min-height:24px;color:#87999b;font-size:8px;letter-spacing:.12em}.result-grid strong{margin-top:8px;font-size:19px;font-variant-numeric:tabular-nums}.new-record{display:inline-block;margin:18px 0 0;padding:6px 10px;color:#07100f;background:var(--cyan);font-size:9px;font-weight:950;letter-spacing:.13em}.record-form{margin:13px auto 0;padding:13px;border:1px solid rgba(21,227,194,.45);background:rgba(21,227,194,.06)}.record-form label{display:block;margin-bottom:8px;color:var(--cyan);font-size:8px;font-weight:900;letter-spacing:.13em}.record-entry{display:flex;gap:7px}.record-entry input{min-width:0;flex:1;padding:11px 12px;color:#fff;border:1px solid var(--line);background:#071013}.record-entry button{padding:0 18px;border:0;color:#06100f;background:var(--cyan);font-size:9px;font-weight:950;letter-spacing:.1em;cursor:pointer}.record-entry button:disabled{opacity:.5;cursor:default}.record-form p{min-height:14px;margin:7px 0 0;color:#aababa;font-size:8px;letter-spacing:.06em}.finish-actions{display:flex;justify-content:center;gap:9px;margin-top:22px}.finish-actions .primary{margin:0}
.touch-controls{position:fixed;z-index:6;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));pointer-events:none}.touch-controls>div{display:flex;gap:12px}.touch-controls button{pointer-events:auto;width:76px;height:76px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(3,10,12,.64);box-shadow:0 9px 28px rgba(0,0,0,.35);backdrop-filter:blur(7px);font-size:34px;font-weight:900;touch-action:none;user-select:none;-webkit-user-select:none}.touch-controls .touch-pedals{flex-direction:column;align-items:center;gap:8px}.touch-controls .touch-pedals button{font-size:8px;letter-spacing:.08em}.touch-controls .touch-pedals button:not(.gas){width:60px;height:52px}.touch-controls button.gas{width:88px;height:88px;border-color:var(--cyan);background:rgba(21,227,194,.27)}.touch-controls button.is-pressed{transform:scale(.92);background:rgba(21,227,194,.48);border-color:#fff}
@media (hover:none),(pointer:coarse){.touch-controls:not(.hidden){display:flex}.speed{right:18px;bottom:122px;width:82px;height:82px}.speed span{font-size:27px}.controls-hint{display:none}}
@media (max-width:860px){.screen{overflow:auto;background:linear-gradient(180deg,rgba(5,13,15,.82),rgba(5,13,15,.94))}.hero-panel{position:relative;left:auto;top:auto;transform:none;width:auto;padding:84px 18px 38px}.hero-panel h1{font-size:46px}.hero-panel .eyebrow,.hero-panel h1,.lead{text-shadow:0 3px 16px rgba(0,0,0,.92)}.car-showcase{right:-7vw;top:18px;transform:rotate(13deg);width:170px;opacity:.72;filter:brightness(1.3) saturate(1.08) contrast(1.05) drop-shadow(0 18px 26px rgba(0,0,0,.78))}.tracks{grid-template-columns:repeat(2,1fr)}.track-card{min-height:78px}.track-card b{margin-top:12px}.setup-row .choice{padding:10px}.car-colors{display:grid;grid-template-columns:repeat(2,1fr)}.color-choice{justify-content:flex-start}.hud{top:10px}.hud-block{min-width:88px;padding:8px}.hud-time{min-width:125px}.hud-block strong{font-size:14px}.race-progress{top:82px;width:min(520px,calc(100vw - 116px));grid-template-columns:auto minmax(120px,1fr) auto;padding:5px 8px}.racer-marker{width:27px;height:27px}.brand{top:12px;left:14px}.brand-copy{display:none}.engine-toggle,.music-toggle{top:8px;width:48px;height:48px;padding:3px}.engine-toggle{right:8px}.music-toggle{right:62px}.engine-toggle img{width:40px;height:40px}.music-icon{width:40px;height:40px}.engine-toggle span,.music-toggle span:last-child{display:none}.front-credit{position:relative;left:auto;bottom:auto;margin:0 18px 24px;padding-top:13px;border-top:1px solid rgba(255,255,255,.11)}.front-credit img{width:72px}.result-grid{grid-template-columns:1fr}.result-grid div+div{border-left:0;border-top:1px solid var(--line)}.result-grid div{padding:12px}.finish-actions{flex-direction:column}.finish-actions button{width:100%}}
@media (max-width:480px){.hero-panel h1{font-size:39px}.lead{margin:15px 0}.setup-row{flex-direction:column}.setup-row .choice{max-width:none}.hud-block{min-width:75px;padding:7px 5px}.hud-time{min-width:114px}.hud-block small{font-size:6px}.hud-block strong{font-size:12px}.brand-subes-logo{width:78px}.race-progress{top:80px;width:calc(100vw - 90px);gap:5px}.progress-caption{font-size:6px}.surface-warning{top:128px}.brand-mark{width:42px;height:32px}.finish-card{padding:25px 18px}.touch-controls button{width:68px;height:68px}.touch-controls .touch-pedals button:not(.gas){width:54px;height:46px}.touch-controls button.gas{width:80px;height:80px}}
@media (max-height:780px) and (min-width:861px){.hero-panel{transform:translateY(-48%) scale(.87);transform-origin:left center}.car-showcase{width:min(27vw,360px)}}
@media (max-width:860px){.hero-choices{grid-template-columns:1fr}.hero-choice{min-height:55px}.brand-subes-logo{width:88px}.driver-chip{left:10px;top:122px;padding:3px}.driver-chip span:last-child{display:none}.driver-avatar{width:38px;height:38px;background-size:168px 168px}.driver-avatar.hero-friend{background-position:-8px -55px}.driver-avatar.hero-brain{background-position:-68px -59px}.driver-avatar.hero-captain{background-position:-109px -59px}}
@media (max-width:480px){.brand-subes-logo{width:78px}}
@media (min-width:481px) and (max-width:650px){.race-progress{top:82px}.driver-chip{top:122px}}
@media (min-width:861px) and (max-width:1200px){.hero-panel{left:32px;width:min(720px,66vw)}.hero-panel h1{font-size:clamp(44px,5.4vw,68px)}.car-showcase{right:1vw;width:min(27vw,350px)}}
@media (max-width:860px){.start-screen{--mobile-poster-top:250px;--mobile-poster-size:min(100vw,620px)}.start-screen:before{position:absolute;inset:0 0 auto;height:calc(var(--mobile-poster-top) + var(--mobile-poster-size) + 54px);background-image:linear-gradient(180deg,rgba(4,12,14,0) 0%,rgba(4,12,14,.04) 72%,#071013 100%),linear-gradient(90deg,rgba(4,12,14,.28) 0%,rgba(4,12,14,.14) 48%,rgba(4,12,14,.04) 100%),url('assets/grand-trip-heroes-lwie-serce.webp?v=13.1');background-position:center,center,center var(--mobile-poster-top);background-size:100% 100%,100% 100%,var(--mobile-poster-size) auto;opacity:.9;filter:brightness(1.1) saturate(1.04) contrast(1.04)}.hero-panel{padding:clamp(82px,15vw,108px) clamp(14px,4vw,28px) 38px}.hero-panel h1{font-size:clamp(36px,10vw,52px)}.lead{max-width:620px;font-size:clamp(13px,3.5vw,17px)}.lead:after{content:"";display:block;width:100%;height:calc(var(--mobile-poster-size) - 28px);margin:28px 0 30px;border:0;background:none;box-shadow:none;pointer-events:none}.tracks{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}.car-colors{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}}
@media (max-width:380px){.hero-panel{padding-inline:12px}.lead:after{height:280px}.tracks{grid-template-columns:repeat(2,minmax(0,1fr))}.track-card{padding:11px}.front-credit{flex-wrap:wrap;white-space:normal;row-gap:6px}.front-credit .credit-for{width:100%}}
@media (max-width:860px) and (orientation:landscape){.start-screen{--mobile-poster-top:205px;--mobile-poster-size:min(72vw,560px)}.hero-panel{padding-top:76px}.lead:after{width:min(72vw,560px)}.tracks{grid-template-columns:repeat(4,minmax(0,1fr))}.hero-choices{grid-template-columns:repeat(3,1fr)}}
.hero-photo.hero-friend,.driver-avatar.hero-friend,.character-marker.hero-friend{background-image:url('assets/hero-przyjaciel-adhd-bright.webp');background-position:center 42%;background-size:cover;background-repeat:no-repeat}
@media (min-width:861px){.start-screen:before{inset:-35px;background-color:#071013;background-image:linear-gradient(90deg,rgba(4,12,14,.93) 0%,rgba(4,12,14,.72) 27%,rgba(4,12,14,.24) 49%,rgba(4,12,14,.22) 100%),url('assets/grand-trip-heroes-lwie-serce.webp?v=13.1');background-position:center,center;background-size:100% 100%,cover;opacity:.35;filter:blur(24px) brightness(.78) saturate(.82);-webkit-mask-image:none;mask-image:none}.start-screen:after{inset:10px 16vw 10px 28vw;opacity:.4;background-image:url('assets/grand-trip-heroes-lwie-serce.webp?v=13.1');background-position:center;background-size:contain;background-repeat:no-repeat;filter:brightness(1.04) saturate(1.02);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}}
@media (prefers-reduced-motion:reduce){.car-showcase img{animation:none}*{scroll-behavior:auto!important}}
@media (max-width:860px){html,body,#game-shell{width:100%;max-width:100%;overscroll-behavior-x:none}.start-screen{width:100%;max-width:100%;overflow-x:hidden!important;overflow-y:auto;overscroll-behavior-x:none;touch-action:pan-y}.hero-panel{width:100%;max-width:100%;min-width:0;overflow-x:clip}.setup-row,.tracks,.car-colors,.hero-choices,.controls-hint{width:100%;max-width:100%;min-width:0}.choice,.track-card,.color-choice,.hero-choice{min-width:0;max-width:100%}.car-showcase{right:0;max-width:42vw}.front-credit{max-width:calc(100% - 36px);white-space:normal}}
@media (max-width:860px){.car-showcase{top:68px}.setup-row{margin-top:88px}}
@media (max-width:480px){.setup-row{flex-direction:row}.setup-row .choice{width:calc(50% - 4px);max-width:calc(50% - 4px);padding:10px 11px}.setup-row .choice span{font-size:12px}.setup-row .choice small{font-size:8px}}
@media (max-width:860px){.start-screen{--mobile-poster-top:250px}}
@media (max-width:860px) and (orientation:landscape){.start-screen{--mobile-poster-top:175px}}
.checkpoint-progress{display:none;position:absolute;inset:0;pointer-events:none}.checkpoint-progress.show{display:block}.checkpoint-progress i{position:absolute;left:calc(var(--cp)*100%);top:22px;width:6px;height:6px;border:1px solid rgba(255,255,255,.62);border-radius:50%;background:#172124;transform:translateX(-50%);transition:background .16s,box-shadow .16s,transform .16s}.checkpoint-progress i:after{content:attr(data-label);position:absolute;left:50%;top:6px;color:#8fa1a2;font:800 5px/1 system-ui;transform:translateX(-50%);white-space:nowrap}.checkpoint-progress i.collected{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 9px rgba(21,227,194,.9);transform:translateX(-50%) scale(1.25)}.checkpoint-progress i.collected:after{color:var(--cyan)}.hero-photo,.driver-avatar,.character-marker{background-image:url('assets/grand-trip-heroes-lwie-serce.webp?v=15.9')}
@media (max-width:480px){.record-entry{flex-direction:column}.record-entry button{min-height:40px}.start-actions{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.start-actions .primary,.stats-tab{min-width:0;padding-inline:10px}.stats-tab{font-size:8px}.checkpoint-progress i:after{display:none}}
.brand-home{display:flex;flex-direction:column;align-items:center;gap:3px}.game-version{color:var(--cyan);font-size:6px;font-weight:900;line-height:1;letter-spacing:.12em;white-space:nowrap}.track-picker-label{margin-top:12px}
@media (min-width:861px){.hero-panel{width:min(490px,42vw)}.setup-row .choice{max-width:none}.car-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.color-choice{justify-content:center;min-width:0;gap:5px;padding-inline:5px}.color-choice b{font-size:7px}.color-choice .paint{width:20px;height:20px}.hero-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-choice{gap:5px}.hero-photo{width:44px;height:50px}.tracks{grid-template-columns:repeat(3,minmax(0,1fr))}.track-card{min-height:66px;padding-inline:9px}.track-card b{font-size:10px}}