:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #f8fbff;
  background: #050a0f;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 280px; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: radial-gradient(circle at 52% -15%, #213d50 0, #0b1824 40%, #04080d 82%); }
button, select { font: inherit; }
.game-shell { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; min-height: 300px; isolation: isolate; }
.game-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; background-image: linear-gradient(30deg, transparent 47%, rgba(255,185,56,.18) 48%, transparent 49%), linear-gradient(150deg, transparent 47%, rgba(79,195,247,.12) 48%, transparent 49%); background-size: 72px 72px; }

.hud { display: grid; grid-template-columns: minmax(12rem, auto) minmax(16rem, 1fr) auto; align-items: center; gap: clamp(.4rem, 2vw, 1.1rem); padding: max(.42rem, env(safe-area-inset-top)) max(.55rem, env(safe-area-inset-right)) .48rem max(.55rem, env(safe-area-inset-left)); border-bottom: 1px solid rgba(250,204,21,.24); background: linear-gradient(180deg, rgba(26,38,48,.97), rgba(7,15,23,.94)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 12px 35px rgba(0,0,0,.38); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: .65rem; min-width: 0; color: inherit; text-decoration: none; transition: filter .15s ease, transform .15s ease; }
.brand:hover { filter: brightness(1.12); transform: translateY(-1px); }
.brand img { display: block; width: clamp(7.5rem, 16vw, 10.3rem); height: auto; filter: drop-shadow(0 3px 4px #000) drop-shadow(0 0 6px rgba(250,204,21,.25)); }
.brand span { min-width: 0; padding-left: .65rem; border-left: 1px solid rgba(250,204,21,.28); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: clamp(.76rem, 2vw, 1.02rem); }
.brand small { color: #fbbf24; font-size: clamp(.5rem, 1.1vw, .66rem); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(3rem, 4.8rem)); justify-content: end; gap: clamp(.24rem, 1vw, .55rem); }
.stats > span { display: grid; min-width: 3rem; padding: .3rem .42rem; border: 1px solid rgba(148,163,184,.2); border-radius: .7rem; background: linear-gradient(150deg, rgba(45,62,75,.92), rgba(9,18,27,.9)); box-shadow: inset 0 1px rgba(255,255,255,.12), inset 0 -3px rgba(0,0,0,.25), 0 5px 12px rgba(0,0,0,.2); text-align: center; }
.stats small { color: #fbbf24; font-size: clamp(.46rem, 1vw, .57rem); text-transform: uppercase; letter-spacing: .08em; }
.stats strong { font-size: clamp(.7rem, 1.7vw, .92rem); font-variant-numeric: tabular-nums; }
.controls { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.icon-button, .restart, .language select, .start-card button, .result-card button { min-height: 2.65rem; border: 1px solid rgba(251,191,36,.42); border-radius: .72rem; color: #fff; background: linear-gradient(145deg, #f59e0b, #b45309); box-shadow: inset 0 1px rgba(255,255,255,.28), 0 7px 20px rgba(245,158,11,.18); font-weight: 850; cursor: pointer; transition: transform .14s ease, filter .14s ease; }
.icon-button { display: grid; place-items: center; width: 2.65rem; padding: .58rem; color: #ffe9a6; background: linear-gradient(145deg, #364a59, #101b25); }
.icon-button svg { width: 1.22rem; height: 1.22rem; fill: currentColor; }
.sound-off { display: none; }
.icon-button[aria-pressed="false"] .sound-on { display: none; }
.icon-button[aria-pressed="false"] .sound-off { display: block; }
.restart { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .5rem .72rem; font-size: .75rem; }
.language select { appearance: none; min-width: 3rem; padding: .48rem 1.42rem .48rem .55rem; color: #fff4cd; background: linear-gradient(45deg, transparent 50%, #fbbf24 50%) calc(100% - .58rem) 52%/.32rem .32rem no-repeat, linear-gradient(145deg, #364a59, #101b25); font-size: .7rem; }
.language option { color: #111827; background: #f8fafc; }
button:hover { filter: brightness(1.1); transform: translateY(-1px); }
button:focus-visible, select:focus-visible, .brand:focus-visible, canvas:focus-visible { outline: 3px solid #fde68a; outline-offset: 2px; }

.stage { position: relative; min-height: 0; overflow: hidden; }
#game-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.start-card, .result-card { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(92%, 29rem); max-height: calc(100% - 1rem); overflow: auto; padding: clamp(1rem, 3vw, 1.55rem); transform: translate(-50%, -50%); border: 1px solid rgba(186,230,253,.48); border-radius: 1.45rem; background: radial-gradient(circle at 50% 2%, rgba(56,189,248,.2), transparent 39%), linear-gradient(158deg, rgba(35,56,68,.99), rgba(7,18,28,.995) 61%, rgba(3,10,16,.995)); box-shadow: inset 0 2px rgba(255,255,255,.17), inset 0 -12px 28px rgba(0,0,0,.36), 0 12px 0 rgba(2,8,14,.78), 0 38px 90px rgba(0,0,0,.68), 0 0 52px rgba(34,211,238,.12), 0 0 30px rgba(245,158,11,.1); text-align: center; }
.start-card::before, .result-card::before { content: ""; position: absolute; inset: 1px; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.14), transparent 25%, transparent 68%, rgba(251,191,36,.1)); }
.start-card::after { content: ""; position: absolute; left: 0; right: 0; top: 6.35rem; height: 3.6rem; pointer-events: none; opacity: .38; background: linear-gradient(150deg, transparent 0 15%, rgba(51,92,103,.9) 15.5% 25%, transparent 25.5% 33%, rgba(38,75,83,.9) 33.5% 48%, transparent 48.5% 58%, rgba(46,82,88,.75) 58.5% 75%, transparent 75.5%), linear-gradient(180deg, transparent 0 45%, rgba(2,8,12,.8) 46% 100%); mask-image: linear-gradient(90deg,transparent,#000 12% 88%,transparent); }
.start-card > *, .result-card > * { position: relative; z-index: 1; }
.truck-mark { display: block; width: min(13.75rem, 61vw); height: auto; margin: -.35rem auto -.18rem; overflow: visible; filter: drop-shadow(0 12px 10px rgba(0,0,0,.5)); animation: truck-idle 3.2s ease-in-out infinite; }
.truck-mark__lamp { animation: truck-lamp 1.8s ease-in-out infinite; }
.truck-mark__beam { animation: truck-beam 1.8s ease-in-out infinite; transform-origin: 17px 50px; }
.eyebrow { margin: .25rem 0; color: #fbbf24 !important; font-size: .68rem !important; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.start-card h1, .result-card h2 { margin: .18rem 0 .55rem; font-size: clamp(1.55rem, 5vw, 2.45rem); line-height: 1; }
.start-card p, .result-card p { margin: 0 auto .95rem; max-width: 31rem; color: #cbd5e1; font-size: clamp(.73rem, 2vw, .9rem); line-height: 1.48; }
.start-card button, .result-card button { position: relative; min-width: 12rem; padding: .78rem 1.35rem; overflow: hidden; background: linear-gradient(145deg,#facc15,#f59e0b 48%,#b45309); border-color: rgba(255,247,199,.75); box-shadow: inset 0 1px rgba(255,255,255,.55), inset 0 -4px rgba(120,53,15,.34), 0 8px 24px rgba(245,158,11,.28), 0 0 18px rgba(250,204,21,.16); text-shadow: 0 2px 2px rgba(69,26,3,.42); }
.start-card button::after, .result-card button::after { content:""; position:absolute; inset:-100% -35%; transform:translateX(-55%) rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:button-sweep 2.8s ease-in-out infinite; }
.start-card small { display: block; margin-top: .68rem; color: #94a3b8; font-size: .62rem; }
.result-card[hidden] { display: none; }
.result-icon { display: block; font-size: 2.6rem; filter: drop-shadow(0 0 14px rgba(250,204,21,.42)); }
.event-banner { position: absolute; z-index: 4; top: 13%; left: 50%; display: grid; min-width: min(78%, 24rem); padding: .75rem 1.25rem .9rem; transform: translate(-50%,-22px) scale(.86); opacity: 0; overflow: hidden; border: 1px solid rgba(254,240,138,.8); border-radius: 1rem; background: linear-gradient(120deg,#b45309,#f59e0b 45%,#dc2626); box-shadow: inset 0 2px rgba(255,255,255,.28), 0 9px 0 rgba(69,26,3,.72), 0 28px 55px rgba(0,0,0,.5), 0 0 40px rgba(245,158,11,.35); text-align: center; transition: opacity .2s ease, transform .34s cubic-bezier(.2,.86,.2,1.18); }
.event-banner::after { content: ""; position: absolute; inset: -60% -20%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); animation: shine 1.25s ease-in-out infinite; }
.event-banner[hidden] { display: none; }.event-banner.visible { opacity: 1; transform: translate(-50%,0) scale(1); }
.event-banner strong, .event-banner span { position: relative; z-index: 1; }.event-banner strong { font-size: clamp(1rem,3vw,1.4rem); }.event-banner span { color: #fff7d6; font-size: .75rem; font-weight: 800; }
.help { margin: 0; padding: .38rem max(.7rem,env(safe-area-inset-right)) max(.38rem,env(safe-area-inset-bottom)) max(.7rem,env(safe-area-inset-left)); border-top: 1px solid rgba(251,191,36,.15); color: #a8b4bf; background: rgba(5,11,17,.86); font-size: clamp(.54rem,1.35vw,.68rem); text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes truck-idle { 0%,100%{transform:translateY(0) rotate(-.45deg)} 50%{transform:translateY(-4px) rotate(.35deg)} }
@keyframes truck-lamp { 0%,100%{opacity:.35} 50%{opacity:.82} }
@keyframes truck-beam { 0%,100%{opacity:.09;transform:scaleX(.88)} 50%{opacity:.24;transform:scaleX(1.08)} }
@keyframes button-sweep { 0%,38%{transform:translateX(-60%) rotate(18deg)} 68%,100%{transform:translateX(65%) rotate(18deg)} }
@keyframes shine { from{transform:translateX(-70%) rotate(18deg)} to{transform:translateX(70%) rotate(18deg)} }

@media (max-width: 850px) {
  .hud { grid-template-columns: minmax(0,1fr) auto; gap: .38rem .5rem; }
  .stats { grid-column: 1/-1; grid-row: 2; grid-template-columns: repeat(4,minmax(0,1fr)); justify-content: stretch; }
  .brand small { display: none; }
}
@media (max-width: 520px) {
  .hud { padding-top: max(.28rem,env(safe-area-inset-top)); }
  .brand span { display: none; }.brand img { width: clamp(6rem,30vw,7.2rem); }
  .stats { gap: .16rem; }.stats > span { min-width:0; padding:.24rem .12rem; border-radius:.5rem; }.stats small{font-size:clamp(.38rem,2vw,.48rem);letter-spacing:.03em}.stats strong{font-size:clamp(.63rem,3vw,.78rem)}
  .controls{gap:.22rem}.icon-button,.restart,.language select{min-height:2.75rem}.icon-button{width:2.75rem}.restart{min-width:2.75rem;padding-inline:.55rem}.restart span:last-child{display:none}.language select{min-width:2.9rem;padding-left:.48rem}
  .start-card,.result-card{width:min(94%,24rem);padding:.85rem;border-radius:1rem}.truck-mark{width:min(11.5rem,58vw);margin-top:-.35rem;margin-bottom:-.15rem}.start-card::after{top:5.25rem;height:3rem}.start-card h1,.result-card h2{font-size:clamp(1.35rem,8vw,1.9rem)}.start-card p,.result-card p{margin-bottom:.65rem;line-height:1.35}.start-card button,.result-card button{min-height:2.7rem}.help{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-height: 520px) and (orientation: landscape) {
  .game-shell{grid-template-rows:auto minmax(0,1fr)}.hud{grid-template-columns:auto minmax(14rem,1fr) auto;padding:max(.22rem,env(safe-area-inset-top)) max(.32rem,env(safe-area-inset-right)) .22rem max(.32rem,env(safe-area-inset-left));gap:.3rem}.brand img{width:5.5rem}.brand span{display:none}.stats{grid-column:auto;grid-row:auto;gap:.14rem}.stats>span{padding-block:.18rem}.stats small{font-size:.39rem}.stats strong{font-size:.64rem}.icon-button,.restart,.language select{min-height:2.65rem}.icon-button{width:2.65rem}.restart{min-width:2.65rem}.restart span:last-child{display:none}.help{display:none}.start-card,.result-card{width:min(88%,23rem);padding:.65rem}.truck-mark{display:none}.start-card h1,.result-card h2{font-size:1.4rem}.start-card p,.result-card p{margin-bottom:.5rem;font-size:.68rem}.start-card small{margin-top:.3rem}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }