@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Nunito:wght@600;700;800;900;1000&display=swap');

:root{
  font-family:Nunito,Arial,sans-serif;color:#173657;font-weight:800;color-scheme:light;
  /* The chrome is themed per mode alongside the canvas, so the UI and the city
     change together rather than the board going dark under a daytime HUD. */
  --panel:#fff;--ink:#173657;--muted:#53809c;--accent:#1c66b4;--bottom:#edfaff;
  --bottom2:#f1fbff;--edge:#fff;--glow:#10599166;
}
body[data-mode=rush]{--accent:#c2410c;--muted:#9a5a3c;--bottom:#fff1e4;--bottom2:#fff7ef;--glow:#7a2c0a55}
body[data-mode=gridlock]{--panel:#eef2ff;--accent:#3b2f80;--muted:#5b5a86;--bottom:#e7e9ff;--bottom2:#f1f2ff;--glow:#0a0a3f88}

*{box-sizing:border-box}
button{font:inherit;cursor:pointer;border:0;color:var(--ink);touch-action:manipulation;transition:transform .12s,filter .12s,background .25s}
button:hover{filter:brightness(1.07);transform:translateY(-2px)}
button:active{transform:translateY(2px) scale(.96)}
button:focus-visible,canvas:focus-visible{outline:4px solid #fff;outline-offset:3px}
button:disabled{opacity:.4;cursor:default}

body{
  margin:0;min-height:100dvh;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 20%,#99e7ff,#2a9ce0 65%,#207aca);
  transition:background .6s ease;
}
body[data-mode=rush]{background:radial-gradient(ellipse at 50% 20%,#ffd9a0,#f08a3c 62%,#c2410c)}
body[data-mode=gridlock]{background:radial-gradient(ellipse at 50% 20%,#3a4a8f,#17204d 62%,#080c24)}

#game{
  position:relative;width:min(100vw,820px);height:min(100dvh,1100px);min-height:650px;
  overflow:hidden;isolation:isolate;box-shadow:0 0 90px var(--glow);background:#71d8fc;
}
body[data-mode=rush] #game{background:#ffb877}
body[data-mode=gridlock] #game{background:#101a3c}
canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;touch-action:none;outline:0}

header{position:absolute;top:17px;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.logo{
  font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(30px,5.2vw,48px);font-weight:900;
  line-height:.86;color:white;letter-spacing:.8px;transform:rotate(-5deg);
  -webkit-text-stroke:1px #194570;paint-order:stroke fill;text-shadow:0 4px 0 #194570,2px 5px 0 #194570;
}
.logo span{display:block;color:#ffe14b;font-size:1.14em}
.topbuttons{display:flex;gap:10px;pointer-events:auto}
.topbuttons button{width:43px;height:43px;background:#fff;border-radius:13px;font-size:25px;box-shadow:0 4px 0 #2475b3;line-height:1;display:grid;place-items:center}
/* The mode button carries an inline SVG rather than ☀/⏱/☾: those three code
   points fall back to whatever the system has, and ☀ lands as a bare asterisk
   on a stock Windows font stack. */
.topbuttons #modebtn svg{width:24px;height:24px;display:block}
.topbuttons button.on{background:#ffe25a}
body[data-mode=rush] #modebtn{background:#ff9a3c;color:#4a1c00}
body[data-mode=gridlock] #modebtn{background:#2b2f6b;color:#ffe25a}

/* One flow column for the whole top of the screen. The HUD, the clock, the
   banner and the streak badge used to be four absolutely-positioned elements
   with hand-tuned `top` values repeated across three media queries, and they
   overlapped the moment the HUD grew a score line and a clock appeared under
   it. Stacked in a flex column they cannot: each one pushes the next down. */
.stack{position:absolute;top:116px;left:0;right:0;display:flex;flex-direction:column;gap:9px;pointer-events:none;z-index:2}
.hud{margin:0 6%;display:flex;align-items:stretch;gap:9px;pointer-events:auto;filter:drop-shadow(0 5px 0 #1b6ca44a)}
.hud>div,.hud>button{background:var(--panel);border-radius:15px;text-align:center;padding:10px 16px;transition:background .3s}
.hud span{font-size:11px;letter-spacing:.7px;display:block;white-space:nowrap}
.hud strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:39px;line-height:1}
.hud #choose{background:var(--accent);color:white;min-width:90px}
.hud .goal{flex:1}
.goal>span{color:var(--muted)}
.goal strong{font-size:29px;display:block;margin-top:5px}
.goal b{color:#ff5258}
.hud .budget{background:#ffdc43;min-width:100px}
.hud .budget.low{animation:lowmoves .7s ease-in-out infinite}
@keyframes lowmoves{0%,100%{background:#ffdc43}50%{background:#ff8f7a}}

/* Mode name + running score, tucked under the goal so the HUD keeps its shape. */
.scoreline{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:4px;font-size:11px;letter-spacing:.6px}
.scoreline em{font-style:normal;color:var(--accent);font-weight:900}
.scorebox{color:var(--muted)}
.scorebox strong{font-family:Nunito,Arial,sans-serif;font-size:14px;display:inline-block;color:var(--ink)}
#score.bump{animation:bump .28s cubic-bezier(.3,1.6,.4,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45);color:#ff8a00}100%{transform:scale(1)}}

/* ── the clock ───────────────────────────────────────────────────────────── */
#clock{margin:0 6%}
.clockbar{height:14px;border-radius:9px;background:#0e2d4b55;border:2px solid #ffffffcc;overflow:hidden;box-shadow:0 3px 0 #1b6ca43a}
.clockbar i{display:block;height:100%;width:100%;transform-origin:left center;background:#33d17a;transition:background .3s}
.clockrow{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:3px;text-shadow:0 2px 0 #0f3f6a}
.clockrow span{font-size:10px;letter-spacing:1.4px;color:#fff}
.clockrow strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:30px;line-height:1;color:#fff}
#clock[data-level=warn] .clockrow strong{color:#ffd166}
#clock[data-level=critical] .clockrow strong{color:#ff6b6b}
#clock.beat .clockrow strong{animation:beat .34s cubic-bezier(.3,1.7,.4,1)}
@keyframes beat{0%{transform:scale(1)}30%{transform:scale(1.4)}100%{transform:scale(1)}}

#banner{
  margin:0 10%;text-align:center;font-size:14px;line-height:1.4;
  color:#123d63;background:#ffffffde;padding:8px 14px;border-radius:12px;box-shadow:0 3px 0 #37749922;
}

#streak{
  align-self:center;
  background:linear-gradient(#ffd63b,#ff9f0a);color:#4a2400;padding:5px 15px;border-radius:999px;
  font-size:13px;letter-spacing:1px;border:3px solid #fff;box-shadow:0 4px 0 #b4600066;pointer-events:none;white-space:nowrap;
}
#streak.bump{animation:bump .32s cubic-bezier(.3,1.7,.4,1)}

.side-tools{position:absolute;right:13px;top:38%;display:flex;flex-direction:column;gap:14px}
.side-tools button{width:48px;background:#fff9;border:2px solid #fff;border-radius:14px;font-size:28px;box-shadow:0 4px 0 #24618644;padding:5px}
.side-tools small{display:block;font-size:11px;line-height:1.3}

.bottom{
  position:absolute;bottom:0;left:0;right:0;padding:15px 25px 12px;
  background:linear-gradient(var(--bottom),var(--bottom2));border-top:3px solid white;
  border-radius:24px 24px 0 0;box-shadow:0 -10px 30px #18375122;transition:background .5s;
}
.selection{display:flex;align-items:center;justify-content:space-between;gap:8px}
.caption{font-size:10px;letter-spacing:1px;display:block;color:var(--muted)}
.selection strong{font-size:16px}
.selection #ram{background:#ffede0;border:2px solid #ffb27c;border-bottom-width:5px;border-radius:12px;padding:10px;color:#a7461c;font-size:22px;line-height:1}
.selection #ram span{font-size:12px;vertical-align:middle}
.selection #ram[aria-pressed=true]{background:#ff7450;color:white;border-color:#c64523;animation:armed .8s ease-in-out infinite}
@keyframes armed{0%,100%{box-shadow:0 0 0 0 #ff745099}50%{box-shadow:0 0 0 9px #ff745000}}

.inputs{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px}
#vehicles{display:flex;gap:7px;flex-wrap:wrap}
#vehicles button{width:36px;height:37px;border-radius:11px;border:3px solid #fff;box-shadow:0 3px 0 #315e7a44;font-size:21px;color:white;text-shadow:0 1px 3px #0009}
#vehicles button[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:1px;transform:translateY(-3px)}
.arrows{display:flex;align-items:center;gap:4px}
.arrows>div{display:flex;flex-direction:column;gap:3px}
.arrows button{background:#2b8bd4;color:white;border-radius:9px;width:42px;height:33px;box-shadow:0 3px 0 #1866aa;font-size:24px;line-height:1}
body[data-mode=rush] .arrows button{background:#f2711c;box-shadow:0 3px 0 #b74e08}
body[data-mode=gridlock] .arrows button{background:#4a45a8;box-shadow:0 3px 0 #2a2673}
.tip{font-size:9px;letter-spacing:.6px;text-align:center;color:var(--muted);margin:9px 0 0}
.tip span{padding:0 7px}

.overlay{position:absolute;inset:0;background:#124f9a75;backdrop-filter:blur(6px);display:grid;place-items:center;z-index:5}
body[data-mode=gridlock] .overlay{background:#060a2ba8}
.overlay article{
  width:85%;max-width:440px;text-align:center;background:#fff9e9;border:5px solid white;border-radius:30px;
  padding:32px 25px;box-shadow:0 12px 0 #10529b66;animation:slam .42s cubic-bezier(.2,1.5,.4,1);
}
@keyframes slam{0%{transform:scale(.6) rotate(-4deg);opacity:0}70%{transform:scale(1.05) rotate(1deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.overlay h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:52px;line-height:1;margin:15px 0;color:#1e69b7}
.overlay p{font-size:16px;line-height:1.7;color:#557487}
.overlay button{display:block;margin:13px auto;padding:12px 18px;border-radius:13px;background:#dff0fa}

#badge{font-size:45px;color:#ffbf16;text-shadow:0 3px 0 #e27f23;letter-spacing:4px}
#badge.win{animation:starpop .6s .15s backwards cubic-bezier(.2,1.7,.4,1)}
#badge.lose{color:#e2603a}
@keyframes starpop{0%{transform:scale(2.4);opacity:0}60%{transform:scale(.88)}100%{transform:scale(1);opacity:1}}

#resultscore{margin:10px auto 4px}
#resultscore strong{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:46px;line-height:1;color:#e08600}
#resultscore em{font-style:normal;font-size:11px;letter-spacing:1.2px;color:#8aa2b3}

.primary{background:#ffd63b!important;border:2px solid #f5b222!important;border-bottom:6px solid #e3a015!important;padding:15px 22px!important;border-radius:15px;font-weight:1000;font-size:17px;color:#553f14!important}

dialog{border:5px solid white;border-radius:24px;padding:28px;background:#f1fbff;color:#214769;max-width:500px;width:calc(100% - 25px);max-height:90dvh;box-shadow:0 12px 0 #1766b455}
dialog::backdrop{background:#07539abf;backdrop-filter:blur(7px)}
dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:42px;line-height:1;margin:18px 0}
dialog p{font-size:15px;line-height:1.65;font-weight:600}
dialog b{font-weight:900}
.close{float:right;font-size:28px;background:transparent}
.kicker{font-size:12px;color:#4095c4;letter-spacing:1px}

#levelbuttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#levelbuttons button{border-radius:12px;padding:14px;background:#d9edf9;border-bottom:4px solid #9dcee9}
#levelbuttons button.current{background:#ffda3e;border-color:#dcaa17}

/* ── mode picker ─────────────────────────────────────────────────────────── */
#modelist{display:grid;gap:11px;margin:4px 0 14px}
#modelist button{text-align:left;padding:14px 16px;border-radius:16px;background:#dff0fa;border-bottom:5px solid #a9d5ee;display:block;width:100%}
#modelist button strong{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:27px;line-height:1}
#modelist button em{display:block;font-style:normal;font-size:12px;letter-spacing:.6px;color:#2d7ab0;margin:3px 0 5px}
#modelist button span{display:block;font-size:13px;font-weight:600;line-height:1.5;color:#55748a}
#modelist button[data-mode=rush]{background:#ffe9d5;border-bottom-color:#f0a469}
#modelist button[data-mode=rush] em{color:#c2410c}
#modelist button[data-mode=gridlock]{background:#e3e4ff;border-bottom-color:#9d9ae0}
#modelist button[data-mode=gridlock] em{color:#4a45a8}
#modelist button[aria-pressed=true]{outline:4px solid #ffc83d;outline-offset:2px}

[hidden]{display:none!important}

@media(min-width:900px){
  body{padding:15px}
  #game{height:calc(100dvh - 30px);border:5px solid #ffffff8c;border-radius:30px;max-width:760px}
  .logo{font-size:39px}
  .stack{top:108px}
}

@media(max-width:480px){
  #game{min-height:600px}
  header{top:17px;left:17px;right:17px}
  .logo{font-size:32px}
  .topbuttons{gap:7px}
  .topbuttons button{width:35px;height:35px;font-size:21px;border-radius:11px}
  .stack{top:98px;gap:7px}
  .hud{margin:0 3%;gap:6px}
  .hud>div,.hud>button{padding:8px}
  .hud #choose{min-width:70px}
  .hud .budget{min-width:74px}
  .hud span{font-size:9px}
  .hud strong{font-size:34px}
  .goal strong{font-size:23px}
  .scoreline{font-size:9px;gap:6px}
  #clock{margin:0 4%}
  .clockrow strong{font-size:25px}
  #banner{margin:0 5%;font-size:12px;padding:7px}
  #streak{font-size:11px;padding:4px 12px}
  .side-tools{right:6px;gap:9px}
  .side-tools button{width:36px;font-size:22px;padding:4px}
  .side-tools small{font-size:9px}
  .bottom{padding:12px 14px 9px}
  .selection strong{font-size:13px}
  .selection #ram{padding:8px;font-size:20px}
  .selection #ram span{font-size:10px}
  #vehicles{gap:5px}
  #vehicles button{width:28px;height:32px;border-width:2px;border-radius:8px;font-size:17px}
  .arrows button{width:33px;height:28px;font-size:21px}
  .tip{font-size:8px;letter-spacing:0}
  .inputs{margin-top:8px}
  #modelist button span{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}