:root{
  --background:rgb(23 23 23);--foreground:rgb(250 250 250);--card:rgb(35 35 35);--secondary:rgb(38 38 38);
  --muted:rgb(163 163 163);--border:rgb(55 55 55);--primary:rgb(34 211 238);--primary-dark:rgb(8 145 178);
  --ink:rgb(10 10 10);--paper:rgb(236 240 230);--redline:rgb(220 38 38);--construction:rgb(250 204 21);
  --shadow:rgb(0 0 0 / .45);--glow:rgb(34 211 238 / .08);--success:rgb(86 216 153);--danger:rgb(240 82 82);
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* It's a game: no text selection, iOS callouts or magnifier on tap/hold. The claim message stays copyable. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#claim-text{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.viewport,.controls,.hud,.track{touch-action:none}
body{margin:0;min-height:100svh;background:var(--background);color:var(--foreground);font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
button:disabled{opacity:.5;cursor:wait}
[hidden]{display:none!important}
.ambient{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 15%,var(--glow),transparent 60%);pointer-events:none}
.eyebrow{font:600 10px/1.5 var(--mono);letter-spacing:1.6px;color:var(--primary);margin:0 0 10px}

/* header / footer */
.top{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.brand{display:flex;align-items:center;gap:4px;text-decoration:none}
.brand img{width:54px;height:27px;object-fit:contain}
.brand span{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--muted);margin-top:6px}
.edition{margin-left:auto;font:600 8px var(--mono);letter-spacing:1px;color:var(--muted);display:flex;align-items:center;gap:6px}
.edition i{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary)}
.icon-button{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:16px;display:grid;place-items:center}
.icon-button[aria-pressed=true]{color:var(--primary);border-color:var(--primary)}
.bottom{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding:16px 16px calc(16px + env(safe-area-inset-bottom));font:600 8px var(--mono);letter-spacing:.8px;color:var(--muted)}
body[data-screen=play] .bottom,body[data-screen=play] .top .edition{display:none}

main{max-width:1000px;margin:0 auto;padding:6px 16px 24px}
.screen{animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* welcome */
h1{font-size:clamp(40px,11vw,64px);line-height:1;letter-spacing:-2px;font-weight:700;margin:0}
h1 span{color:var(--primary)}
.lead{color:var(--foreground);font-size:16px;line-height:1.55;margin:16px 0 22px}
.lead em{color:var(--muted);font-style:normal;font-size:14px}
.modes{display:grid;gap:12px;grid-template-columns:1fr}
.mode-card{text-align:left;display:grid;gap:6px;padding:18px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(160deg,var(--card),var(--background));box-shadow:0 10px 30px var(--shadow);min-height:48px;transition:transform .15s,border-color .15s}
.mode-card:hover,.mode-card:focus-visible{border-color:var(--primary)}
.mode-card:active{transform:scale(.985)}
.mode-tag{justify-self:start;font:700 10px var(--mono);letter-spacing:2px;color:var(--ink);background:var(--primary);padding:4px 8px;border-radius:6px}
.mode-card b{font-size:22px;letter-spacing:-.5px}
.mode-copy{color:var(--muted);font-size:14px;line-height:1.5}
.mode-meta{font:600 9px var(--mono);letter-spacing:1px;color:var(--muted);margin-top:4px}
.mode-meta i{font-style:normal;color:var(--construction)}
.fine{font-size:12px;color:var(--muted);text-align:center;margin:14px 0}
.text-button{display:block;margin:10px auto 0;background:none;border:0;color:var(--muted);font-size:12px;padding:12px;min-height:44px;text-decoration:underline;text-underline-offset:4px}


/* gameplay */
body[data-screen=play] main{padding-top:0}
.hud{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;padding:4px 0 8px}
.hud-mode{font:700 9px var(--mono);letter-spacing:1.2px;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-score,.hud-ft{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.hud small{font:600 7px var(--mono);letter-spacing:1px;color:var(--muted)}
.hud b{font:700 16px var(--mono);font-variant-numeric:tabular-nums}
.hud-ft b{font-size:13px;color:var(--primary)}
.track{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.track progress{flex:1;height:4px;border:0;border-radius:2px;appearance:none;-webkit-appearance:none;background:var(--border);overflow:hidden}
.track progress::-webkit-progress-bar{background:var(--border)}
.track progress::-webkit-progress-value{background:var(--primary)}
.track progress::-moz-progress-bar{background:var(--primary)}
.pips{display:flex;gap:4px}
.pips i{width:9px;height:9px;border-radius:50%;border:1px solid var(--muted)}
.pips i.ok{background:var(--success);border-color:var(--success)}
.pips i.miss{background:var(--danger);border-color:var(--danger)}
.hud-extra{font:600 8px var(--mono);letter-spacing:.6px;color:var(--muted);white-space:nowrap}
.viewport{position:relative;height:min(58svh,560px);min-height:300px;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:var(--card);box-shadow:0 14px 40px var(--shadow)}
.viewport canvas#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.cutaway{position:absolute;right:10px;top:10px;width:150px;height:84px;border-radius:10px;border:1px solid var(--border);pointer-events:none}
.tutorial{position:absolute;left:10px;right:10px;bottom:10px;padding:10px 12px;border-radius:12px;background:rgb(23 23 23 / .85);border:1px solid var(--primary);font-size:13px;line-height:1.45;text-align:center;pointer-events:none}
.tutorial b{color:var(--primary)}
body[data-mode=plow] .tutorial{top:auto}
.toast{position:absolute;left:10px;right:10px;top:10px;padding:10px 12px;border-radius:12px;background:var(--background);border:1px solid var(--border);font-size:13px;line-height:1.4;text-align:center;opacity:0;transform:translateY(-8px);transition:.2s;pointer-events:none}
body[data-mode=plow] .toast{right:170px}
.toast.show{opacity:1;transform:none}
.toast.good{border-color:var(--success)}
.toast.bad{border-color:var(--danger);background:rgb(60 20 20 / .95)}
.flash{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px var(--danger);opacity:0;transition:opacity .12s}
.flash.active{opacity:.7}.flash.big{box-shadow:inset 0 0 120px var(--danger);opacity:1}
.popups{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);font:800 18px var(--mono);text-shadow:0 2px 6px var(--ink);animation:pop 1.1s ease-out forwards}
.pop.good{color:var(--primary)}.pop.bad{color:var(--danger)}
@keyframes pop{from{opacity:1;transform:translate(-50%,-50%) scale(.8)}20%{transform:translate(-50%,-90%) scale(1.15)}to{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.stop-card,.pause-menu,.fallback{position:absolute;inset:auto 10px 10px 10px;padding:16px;border-radius:16px;background:rgb(23 23 23 / .95);border:1px solid var(--construction);box-shadow:0 10px 30px var(--shadow)}
.stop-card .eyebrow{color:var(--construction)}
.stop-card h2{margin:0;font-size:19px;letter-spacing:-.3px}
.stop-card blockquote{margin:8px 0 12px;color:var(--muted);font-size:14px;line-height:1.45}
.stop-actions{display:grid;gap:8px}
.stop-reply{margin:10px 0 0;color:var(--danger);font-size:13px}
.choice-button{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--muted);background:var(--secondary);font-size:15px;text-align:left}
.choice-button:active{background:var(--primary);color:var(--ink)}
kbd{font:600 10px var(--mono);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.primary-button kbd{color:var(--ink);border-color:var(--primary-dark)}
.pause-menu{inset:10px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:10px;border-color:var(--primary)}
.pause-menu .eyebrow{text-align:center}
.fallback{inset:10px;display:grid;place-items:center;text-align:center;border-color:var(--border)}
.controls{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:10px}
.steer{min-height:64px;border-radius:16px;border:1px solid var(--muted);background:var(--secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 4px 0 var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.steer .arrow{font-size:22px;line-height:1}
.steer small{font:700 9px var(--mono);letter-spacing:1.4px;color:var(--muted)}
.steer.held,.steer:active{background:var(--primary);color:var(--ink);transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.steer.held small{color:var(--ink)}
.control-hint{text-align:center;display:flex;flex-direction:column;gap:3px;max-width:120px}
.control-hint b{font:700 9px var(--mono);color:var(--primary)}
.control-hint span{font-size:11px;color:var(--muted);line-height:1.35}

/* buttons */
.primary-button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:380px;min-height:52px;margin:0 auto;padding:14px 18px;border:0;border-radius:12px;background:var(--primary);color:var(--ink);font-size:15px;font-weight:750;text-decoration:none;box-shadow:0 4px 0 var(--primary-dark)}
.primary-button:active{transform:translateY(2px);box-shadow:0 2px 0 var(--primary-dark)}
.ghost-button{display:block;width:100%;max-width:380px;min-height:48px;margin:10px auto 0;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--card);font-size:14px}

/* closeout + scorecard */
.screen-title{font-size:30px;letter-spacing:-1px;margin:0}
.sub{color:var(--muted);font-size:14px;line-height:1.5;margin:8px 0 16px}
.sheet-wrap{border-radius:12px;overflow:hidden;box-shadow:0 14px 40px var(--shadow);margin-bottom:18px;background:var(--paper)}
#redline{display:block;width:100%}
#scorecard{text-align:center}
.score-big{margin:14px 0 10px}
.score-big b{font:800 64px/1 var(--mono);color:var(--primary);letter-spacing:-3px}
.score-big span{display:block;font:600 10px var(--mono);letter-spacing:1.5px;color:var(--muted);margin-top:6px}
.stats{max-width:380px;margin:0 auto 12px;padding:0;border-top:1px dashed var(--border)}
.stats div{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px dashed var(--border);font-size:14px}
.stats dt{color:var(--muted)}.stats dd{margin:0;font:700 13px var(--mono)}
.best{font:600 10px var(--mono);letter-spacing:1px;color:var(--construction);margin:0 0 16px}

/* gift */
.gift-panel{max-width:470px;margin:0 auto;text-align:center;padding-top:6px}
.gift-panel .eyebrow{color:var(--success)}
.gift-panel h1{font-size:clamp(42px,12vw,56px)}
.win-joke{color:var(--muted);font-size:15px;line-height:1.6;margin:16px 0 0}
.win-joke b{color:var(--foreground)}
.gift-card{margin:26px auto 0;padding:20px 23px;border-radius:20px;max-width:330px;text-align:left;background:linear-gradient(130deg,var(--primary),var(--primary-dark));color:var(--ink);box-shadow:0 12px 0 var(--ink),0 25px 65px var(--shadow);transform:perspective(800px) rotateY(-9deg) rotateX(7deg) rotateZ(-3deg);animation:card-entry .8s cubic-bezier(.2,.8,.2,1) both}
.gift-card-top{display:flex;justify-content:space-between;font:600 9px var(--mono);letter-spacing:1.3px}
.gift-card-top>span:last-child{font-size:24px}
.amount{font-size:92px;font-weight:700;line-height:1.25;letter-spacing:-6px;display:flex;align-items:baseline}
.amount small{font-size:40px;letter-spacing:-2px;align-self:center}
.amount>span{font:600 11px var(--mono);letter-spacing:2px;margin-left:12px}
.gift-card-bottom{display:flex;justify-content:space-between;align-items:center;font:600 9px/1.8 var(--mono)}
.gift-symbol{font-size:44px}
.gift-amount{font-size:84px;letter-spacing:0;gap:6px}
.gift-amount>span{font-size:13px}
@keyframes card-entry{from{opacity:0;transform:perspective(800px) rotateY(-60deg) rotateX(15deg) translateY(30px)}to{opacity:1;transform:perspective(800px) rotateY(-9deg) rotateX(7deg) rotateZ(-3deg)}}
.receipt{max-width:330px;margin:28px auto 20px;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);padding:12px 0}
.receipt span{display:flex;justify-content:space-between;gap:10px;font:600 8px/2.4 var(--mono);color:var(--muted)}
.receipt b{color:var(--foreground);font-weight:600}
.gift-copy{color:var(--muted);font-size:14px;line-height:1.8}
.gift-copy strong{color:var(--foreground)}
.claim-button{margin-top:22px}
.claim-note{font-size:11px;line-height:1.6;color:var(--muted);max-width:330px;margin:12px auto}
#claim-options{border:1px solid var(--border);padding:16px;border-radius:15px;margin:18px auto 0;max-width:380px}
#claim-options p,#claim-options blockquote{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 12px}
#claim-options blockquote{color:var(--foreground)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}

/* full-screen utility incidents */
.incident{position:fixed;inset:0;z-index:15;display:grid;place-items:center;padding:16px;overflow:hidden}
.incident-fx,.incident-fx>*{position:absolute;inset:0;pointer-events:none}
.incident-fx>*{opacity:0}
.incident-card{position:relative;width:100%;max-width:400px;padding:22px 20px 14px;border-radius:20px;background:rgb(10 10 10 / .82);border:2px solid var(--foreground);text-align:center;box-shadow:0 20px 60px var(--shadow);animation:slam .35s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slam{from{transform:scale(1.6);opacity:0}to{transform:none;opacity:1}}
.incident-icon{font-size:66px;line-height:1;margin-bottom:8px}
.incident-card h2{font-size:28px;letter-spacing:-.8px;margin:0 0 8px}
.incident-card p{font-size:15px;line-height:1.5;margin:0 0 14px}
.incident-card .eyebrow{font-size:11px;margin-bottom:6px}
.incident-count{font:800 44px var(--mono);color:var(--danger)}
/* gas: yellow fog that pulses, fire truck races by */
.incident.gas{background:rgb(250 204 21 / .55);animation:gasfog 1.2s ease-in-out infinite alternate}
.incident.gas .incident-card{border-color:var(--construction)}
.incident.gas .eyebrow{color:var(--construction)}
@keyframes gasfog{from{background:rgb(250 204 21 / .45)}to{background:rgb(250 220 60 / .78)}}
.incident.gas .truck{opacity:1;inset:auto;bottom:6%;left:0;font-size:84px;animation:truck 2.6s linear .6s both}
@keyframes truck{from{transform:translateX(110vw) scaleX(1)}to{transform:translateX(-140px) scaleX(1)}}
/* explosion: white flash, fireball, shake, then smoky shutdown */
.incident.boom{background:rgb(40 18 10 / .92)}
.incident.boom .fireball{opacity:1;background:radial-gradient(circle at 50% 55%,rgb(255 255 230) 0,rgb(255 214 80) 14%,rgb(249 115 22) 30%,rgb(185 28 28) 46%,rgb(40 18 10 / 0) 70%);animation:fireball 1.8s ease-out both}
@keyframes fireball{0%{transform:scale(.1);opacity:1}25%{transform:scale(1.6);opacity:1}100%{transform:scale(2.4);opacity:0}}
.incident.boom .incident-card{border-color:var(--danger)}
.incident.boom .eyebrow{color:var(--danger)}
body.shake main{animation:shake .6s linear 2}
@keyframes shake{10%,50%,90%{transform:translate(-8px,4px)}30%,70%{transform:translate(8px,-5px)}}
/* water: the whole screen floods */
.incident.water{background:transparent}
.incident.water .water-body{opacity:1;inset:auto 0 0 0;height:115%;background:linear-gradient(rgb(59 130 246 / .82),rgb(30 64 175 / .95));transform:translateY(100%);animation:flood 1.4s cubic-bezier(.3,.7,.4,1) forwards}
.incident.water .wave{position:absolute;left:0;top:-38px;width:200%;height:40px;fill:rgb(59 130 246 / .82);animation:wave 1.6s linear infinite}
@keyframes flood{to{transform:translateY(0)}}
@keyframes wave{to{transform:translateX(-50%)}}
.incident.water .bubbles{opacity:1;background-image:radial-gradient(circle,rgb(255 255 255 / .5) 0 4px,transparent 5px),radial-gradient(circle,rgb(255 255 255 / .35) 0 7px,transparent 8px),radial-gradient(circle,rgb(255 255 255 / .4) 0 3px,transparent 4px);background-size:90px 130px,160px 210px,60px 90px;background-position:10px 0,50px 40px,30px 20px;animation:bubbles 2.4s linear infinite}
@keyframes bubbles{to{background-position:10px -260px,50px -420px,30px -180px}}
.incident.water .incident-card{border-color:rgb(147 197 253)}
.incident.water .eyebrow{color:rgb(147 197 253)}
.incident.water.drain .water-body{animation:drain .8s ease-in forwards}
@keyframes drain{from{transform:translateY(0)}to{transform:translateY(100%)}}
/* electric: lights-out flicker */
.incident.electric{animation:flicker .9s steps(1) 2}
@keyframes flicker{0%,100%{background:rgb(10 10 20 / .92)}10%,40%,70%{background:rgb(220 235 255 / .85)}20%,55%{background:rgb(10 10 20 / .96)}}
.incident.electric .incident-card{border-color:var(--danger)}
/* telecom: orange glitch */
.incident.telecom{background:repeating-linear-gradient(0deg,rgb(249 115 22 / .5) 0 3px,rgb(10 10 10 / .6) 3px 7px)}
.incident.telecom .incident-card{border-color:rgb(249 115 22)}
/* sewer: nobody is happy */
.incident.sewer{background:rgb(77 92 40 / .9)}
.incident.sewer .incident-card{border-color:var(--success)}

/* sound gate */
.sound-gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgb(10 10 10 / .88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gate-card{width:100%;max-width:400px;padding:26px 20px 14px;border-radius:22px;border:1px solid var(--primary);background:var(--card);box-shadow:0 20px 60px var(--shadow);text-align:center}
.gate-icon{font-size:64px;line-height:1;margin-bottom:12px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
.gate-card h2{font-size:30px;letter-spacing:-1px;margin:0 0 16px}
.gate-steps{text-align:left;margin:0 0 20px;padding-left:22px;display:grid;gap:10px;font-size:16px;line-height:1.45}
.gate-steps li::marker{color:var(--primary);font-weight:800}
.gate-steps span{color:var(--muted);font-size:14px}
.gate-go{min-height:60px;font-size:18px}
.gate-heard{margin:14px 0 0;font-size:15px}
.gate-heard .text-button{display:inline;margin:0;padding:6px;min-height:0}
.sound-gate:not(.ios) .ios-only{display:none}

@media(min-width:760px){
  .modes{grid-template-columns:1fr 1fr}
  .viewport{height:min(62vh,600px)}
  .lead{font-size:18px}
  .control-hint{max-width:220px}
  .steer{min-height:56px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}