:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #040612; color: #f8fbff; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 13% 12%, rgba(0,222,255,.17), transparent 29rem), radial-gradient(circle at 88% 18%, rgba(184,37,255,.18), transparent 30rem), linear-gradient(155deg,#050916,#090c1d 58%,#040611); }
button { font: inherit; }
.hidden { display: none !important; }
.game-shell { width: min(1100px,100%); margin: 0 auto; padding: clamp(15px,3vw,32px); }
.game-header,.score-strip,footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-lockup img { width: 54px; height: 54px; object-fit: contain; }
.brand-lockup h1 { margin: -2px 0 0; font-size: clamp(1.3rem,4vw,2.05rem); letter-spacing: .11em; font-style: italic; }
.eyebrow,.panel-tag { color: #82ebff; font-size: .68rem; font-weight: 900; letter-spacing: .2em; }
.small-button,.primary-button,.action-button { border: 1px solid rgba(112,224,255,.38); border-radius: 10px; color: #f8fbff; background: rgba(13,19,39,.85); font-weight: 900; cursor: pointer; }
.small-button { padding: 10px 14px; font-size: .76rem; letter-spacing: .08em; }
.small-button[aria-pressed="false"] { color: #8992a7; border-color: rgba(137,146,167,.25); }
.score-strip { margin: 22px 0 13px; padding: 13px clamp(12px,3vw,28px); border: 1px solid rgba(130,235,255,.17); border-radius: 14px; background: rgba(7,12,28,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.score-strip div { display: grid; min-width: 82px; text-align: center; }
.score-strip span { color: #8791a8; font-size: .63rem; font-weight: 800; letter-spacing: .15em; }
.score-strip strong { margin-top: 2px; font-size: clamp(1.25rem,4vw,1.9rem); font-variant-numeric: tabular-nums; }

.garage { position: relative; display: grid; min-height: min(650px,calc(100vh - 220px)); isolation:isolate; place-items: center; overflow: hidden; border: 1px solid rgba(79,212,255,.27); border-radius: 24px; background: radial-gradient(ellipse at 50% 75%,rgba(42,218,244,.09),transparent 43%),linear-gradient(180deg,#101521 0%,#080c14 56%,#03050a 100%); box-shadow: 0 28px 90px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.025); }
.garage-scene { position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none; }
.garage-roof { position:absolute;top:0;right:-5%;left:-5%;height:93px;transform:perspective(620px) rotateX(-37deg);transform-origin:top;background:repeating-linear-gradient(90deg,#0c111a 0 64px,#1c2632 65px 69px),linear-gradient(#202a35,#0a0e16);border-bottom:2px solid rgba(109,225,239,.2);box-shadow:0 14px 40px rgba(0,0,0,.8); }
.garage-roof i { position:absolute;top:28px;width:16%;height:13px;background:#d4faff;box-shadow:0 0 25px rgba(137,233,255,.75);opacity:.75 }.garage-roof i:nth-child(1){left:7%}.garage-roof i:nth-child(2){left:30%}.garage-roof i:nth-child(3){right:30%}.garage-roof i:nth-child(4){right:7%}
.pit-board { position:absolute;top:87px;left:50%;display:grid;width:min(440px,54%);height:62px;place-items:center;transform:translateX(-50%);border:1px solid rgba(112,227,244,.25);background:linear-gradient(100deg,#111b29,#1c1640 48%,#111b29);box-shadow:0 13px 34px rgba(0,0,0,.52),inset 0 -3px 0 #50deed; }
.pit-board span { color:#fff;font-size:clamp(.8rem,2vw,1.35rem);font-weight:1000;font-style:italic;letter-spacing:.2em }.pit-board b { color:#6eeeff;font-size:.42rem;letter-spacing:.22em }
.tool-wall { position:absolute;top:112px;bottom:18%;width:15%;border:1px solid rgba(130,151,178,.14);background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(136,166,197,.055) 20px),linear-gradient(90deg,#080c13,#151b25);box-shadow:inset 0 0 30px rgba(0,0,0,.55); }.tool-left{left:0}.tool-right{right:0;transform:scaleX(-1)}
.tool-wall i { position:absolute;left:22%;width:56%;height:9px;border-radius:3px;background:linear-gradient(90deg,#1e3247,#5adce8,#1e3247);box-shadow:0 0 10px rgba(77,218,233,.23) }.tool-wall i:nth-child(1){top:17%}.tool-wall i:nth-child(2){top:35%;width:38%}.tool-wall i:nth-child(3){top:62%;height:28px;background:linear-gradient(90deg,#a92e8e,#3c4f77)}.tool-wall i:nth-child(4){top:79%;width:45%}
.timing-tower { position:absolute;right:2.5%;top:29%;display:grid;width:96px;padding:8px;border:1px solid rgba(102,224,239,.17);background:#050910;box-shadow:0 8px 30px rgba(0,0,0,.6) }.timing-tower span{color:#68798d;font-size:.42rem;font-weight:900;letter-spacing:.15em}.timing-tower strong{margin-top:3px;color:#7affd4;font:800 .9rem ui-monospace,monospace;text-shadow:0 0 10px rgba(86,255,207,.4)}
.garage-floor { position:absolute;left:-12%;right:-12%;bottom:-24%;height:59%;transform:perspective(500px) rotateX(61deg);transform-origin:center bottom;background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(87,219,230,.08) 120px 122px),repeating-linear-gradient(0deg,transparent 0 59px,rgba(87,219,230,.06) 60px 62px),linear-gradient(#171d25,#05070b);border-top:1px solid rgba(105,225,239,.17);box-shadow:0 -25px 55px rgba(0,0,0,.5)}
.garage-floor span{position:absolute;left:49%;top:-5%;width:4%;height:105%;background:linear-gradient(90deg,transparent,#54dbe8,transparent);opacity:.3;box-shadow:0 0 18px rgba(69,222,236,.35)}
.pit-lights { position:absolute;top:157px;left:50%;display:flex;gap:7px;transform:translateX(-50%);padding:5px 8px;border-radius:4px;background:#05070d;box-shadow:0 5px 14px rgba(0,0,0,.65) }.pit-lights i{width:9px;height:9px;border-radius:50%;background:#39121c;border:1px solid #6e2838}.pit-lights i:last-child{background:#70f1ca;border-color:#a2ffe2;box-shadow:0 0 12px #5ff1c5}
.overlay-panel,.work-card { position: relative; z-index: 2; width: min(780px,calc(100% - 38px)); padding: clamp(27px,5vw,50px); border: 1px solid rgba(115,227,255,.28); border-radius: 12px; background: linear-gradient(145deg,rgba(10,17,31,.96),rgba(4,8,18,.97)); box-shadow: 0 26px 80px rgba(0,0,0,.7),0 0 0 6px rgba(2,5,11,.58), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.overlay-panel { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); text-align: center; }
.overlay-panel h2 { margin: 11px 0; font-size: clamp(1.75rem,5vw,2.9rem); line-height: 1.07; }
.overlay-panel > p { max-width: 570px; margin: 0 auto 24px; color: #b7c1d7; line-height: 1.55; }
.keyboard-hint { display: block; margin-top: 14px; color: #6f7b94; font-size: .7rem; }
.primary-button { padding: 14px 22px; border: 0; color: #030711; background: linear-gradient(110deg,#81f653,#55edcf 44%,#55d6ff); box-shadow: 0 10px 30px rgba(75,226,211,.23); font-size: .76rem; letter-spacing: .08em; }
.primary-button:hover,.primary-button:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }

.work-card { text-align: center; }
.work-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.job-tag { padding: 6px 9px; border-radius: 6px; color: #06101b; background: #82efd8; font-size: .63rem; font-weight: 950; letter-spacing: .13em; }
.job-number { color: #7f8aa2; font-size: .67rem; font-weight: 850; letter-spacing: .12em; }
.work-card > h2 { margin: 17px 0 5px; font-size: clamp(1.5rem,4vw,2.25rem); }
.work-card > p { margin: 0 0 17px; color: #9da9c0; }
.task-area { min-height: 250px; }
.tyre-order,.repair-sequence { display: flex; justify-content: center; gap: 8px; margin: 5px 0 13px; }
.tyre-order span,.repair-sequence span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(119,231,235,.25); border-radius: 8px; color: #8bf3e1; background: rgba(76,224,214,.07); font-size: .78rem; font-weight: 950; }
.tyre-order span.done,.repair-sequence span.done { color: #08131b; border-color: #7cf0c9; background: #7cf0c9; }
.car-plan { position: relative; width: min(430px,100%); height: 185px; margin: auto; }
.car-body { position: absolute; inset: 15px 76px; border: 2px solid rgba(112,235,244,.63); clip-path:polygon(37% 0,63% 0,76% 17%,85% 55%,100% 77%,92% 100%,8% 100%,0 77%,15% 55%,24% 17%); background:linear-gradient(90deg,#263044 0 12%,#0b1421 13% 34%,#5edfec 35% 38%,#20214a 39% 61%,#d847b7 62% 65%,#0b1421 66% 87%,#263044 88%);box-shadow:inset 0 0 38px rgba(46,219,227,.15),0 0 20px rgba(42,217,233,.13); }
.car-body::before { content: ""; position: absolute; top:19px;left:50%;width:46%;height:55%;transform:translateX(-50%);clip-path:polygon(27% 0,73% 0,100% 100%,0 100%);background:linear-gradient(150deg,#6cb0c2,#101c2a 48%,#08101b);border-top:2px solid #9ef5ff; }
.car-body::after { content:"";position:absolute;right:9%;bottom:14%;left:9%;height:8px;background:repeating-linear-gradient(90deg,#eafcff 0 9%,#1b2836 9% 18%);box-shadow:0 0 11px rgba(114,235,244,.28) }
.car-body .car-cockpit { position:absolute;z-index:2;left:50%;top:16%;width:23%;height:34%;transform:translateX(-50%);border:1px solid #76ddea;border-radius:50% 50% 25% 25%;background:linear-gradient(140deg,#6e9baa,#09121f 55%);box-shadow:inset 0 0 13px #09101a }
.car-body .car-spine { position:absolute;z-index:3;left:50%;top:46%;bottom:18%;width:5px;transform:translateX(-50%);background:linear-gradient(#fff,#5ae4ed);box-shadow:0 0 11px #5ae4ed }
.car-body .car-number { position:absolute;z-index:4;left:50%;bottom:20%;width:auto;height:auto;transform:translateX(-50%);color:white;background:none;box-shadow:none;font-size:1.35rem;font-style:italic;font-weight:1000;text-shadow:0 0 9px #4ddde9 }
.car-body .car-wing { position:absolute;z-index:4;left:50%;bottom:3px;width:78%;height:9px;transform:translateX(-50%);border-radius:1px;background:linear-gradient(90deg,#151d2a,#61e4ec 48%,#cf44b9);box-shadow:0 0 14px rgba(82,224,235,.34) }
.wheel { position: absolute; display: grid; width: 62px; height: 62px; place-items: center; border: 2px solid #59637a; border-radius: 50%; color: #cfd7e8; background: radial-gradient(circle,#1b2336 0 30%,#080c16 31% 58%,#30384c 59%); cursor: pointer; }
.wheel:hover,.wheel:focus-visible { border-color: #87efe5; outline: none; transform: scale(1.05); }
.wheel.active { color: #06101a; border-color: #fff06e; background: #fff06e; box-shadow: 0 0 23px rgba(255,239,101,.42); }
.wheel.done { border-color: #67eac9; opacity: .55; }
.wheel-one { left: 35px; top: 18px; }.wheel-two { right: 35px; top: 18px; }.wheel-three { left: 35px; bottom: 10px; }.wheel-four { right: 35px; bottom: 10px; }

.fuel-task { display: grid; align-content: center; gap: 18px; width: min(560px,100%); margin: auto; }
.fuel-gauge { position: relative; height: 58px; overflow: hidden; border: 2px solid #39445b; border-radius: 12px; background: repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 9%,transparent 9% 10%); }
.fuel-gauge i { position: absolute; z-index: 1; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg,#54daf8,#65f0c7,#ffe960); box-shadow: 0 0 22px rgba(94,234,215,.24); }
.target-zone { position: absolute; z-index: 2; top: 0; bottom: 0; left: 72%; width: 16%; border: 2px solid #7cf3c8; background: rgba(94,243,198,.13); box-shadow: inset 0 0 16px rgba(95,240,200,.16); }
.action-button { padding: 16px; font-size: .72rem; letter-spacing: .11em; }
.action-button.held { color: #06101a; border-color: #6ef0d0; background: #6ef0d0; }
.fuel-task > span { color: #77849c; font-size: .68rem; }

.repair-task { display: grid; align-content: center; gap: 25px; }
.repair-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-width: 510px; margin: auto; }
.repair-buttons button { display: grid; min-height: 100px; place-items: center; border: 1px solid rgba(122,153,198,.3); border-radius: 14px; color: #d9e3f4; background: rgba(20,28,53,.8); cursor: pointer; }
.repair-buttons button:hover,.repair-buttons button:focus-visible { border-color: #76ebe5; background: rgba(36,59,83,.9); outline: none; }
.repair-buttons b { font-size: 1.5rem; }.repair-buttons span { color: #727e96; font-size: .63rem; }

.job-progress { height: 5px; margin-top: 13px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.job-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#72f1c9,#64ddff); transform-origin: left; }
.feedback { min-height: 1.3em; margin: 14px 0 0 !important; color: #8ef4d5 !important; font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.feedback.penalty { color: #ff829e !important; }
.callout { position: absolute; z-index: 5; left: 50%; top: 15%; transform: translate(-50%,-8px); opacity: 0; color: #fff; font-size: clamp(1.2rem,4vw,2rem); font-weight: 1000; font-style: italic; letter-spacing: .08em; text-shadow: 0 0 18px #16e5ff,0 4px 0 rgba(0,0,0,.35); pointer-events: none; transition: opacity .15s ease,transform .18s ease; }
.callout.show { opacity: 1; transform: translate(-50%,0); }

.result-badge { display: grid; width: 62px; height: 62px; margin: 12px auto 0; place-items: center; border: 1px solid rgba(116,240,232,.4); border-radius: 50%; background: rgba(62,224,206,.1); box-shadow: 0 0 30px rgba(69,226,218,.15); color: #a6fff3; font-size: .72rem; font-weight: 950; letter-spacing: .06em; }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 auto 24px; }
.result-grid div { display: grid; gap: 3px; padding: 12px 7px; border-radius: 10px; background: rgba(255,255,255,.035); }
.result-grid strong { color: #8bf2dd; font-size: 1.25rem; }.result-grid span { color: #78849c; font-size: .54rem; font-weight: 900; letter-spacing: .1em; }
footer { padding: 14px 3px 0; color: #7f8aa2; font-size: .76rem; } footer p { margin: 0; } footer strong { color: #cbd5e8; }

@media (max-width:620px) {
  .game-shell { padding: 12px; }.brand-lockup img { width: 43px; height: 43px; }.brand-lockup h1 { font-size: 1.03rem; letter-spacing: .07em; }.eyebrow { font-size: .56rem; }.small-button { padding: 8px 9px; font-size: .57rem; }
  .score-strip { gap: 4px; margin-top: 15px; }.score-strip div { min-width: 0; }.score-strip span { font-size: .49rem; letter-spacing: .07em; }.score-strip strong { font-size: 1.14rem; }
  .garage { min-height: 630px; border-radius: 18px; }.overlay-panel,.work-card { width: calc(100% - 18px); padding: 20px 13px; border-radius: 10px; }.overlay-panel h2 { font-size: 1.6rem; }.overlay-panel > p { margin-bottom: 14px; font-size: .78rem; line-height: 1.4; }.primary-button { padding: 11px 14px; font-size: .65rem; }.keyboard-hint { margin-top: 8px; font-size: .54rem; }
  .pit-board{width:68%;}.tool-wall{width:12%;}.timing-tower{display:none}.garage-roof{height:75px}.pit-board{top:69px}.pit-lights{top:134px}
  .work-card > h2 { margin-top: 12px; font-size: 1.35rem; }.work-card > p { margin-bottom: 10px; font-size: .73rem; }.task-area { min-height: 285px; }.car-plan { height: 210px; }.car-body { inset: 30px 58px; }.wheel { width: 58px; height: 58px; }.wheel-one,.wheel-three { left: 12px; }.wheel-two,.wheel-four { right: 12px; }
  .repair-buttons button { min-height: 90px; }.fuel-task { padding-top: 55px; }.result-badge { width: 45px; height: 45px; margin-top: 6px; font-size: 1.15rem; }.result-grid { margin-bottom: 12px; }.result-grid div { padding: 7px 4px; }
  footer { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }