@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#0a0e17;
  --ink:#eaf3f2;
  --muted:#9db3ae;
  --accent:#00e5c7;
  --gold:#ffd54a;
  --danger:#ff5468;
  --panel:rgba(10,14,23,.72);
  --border:rgba(255,255,255,.10);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow:hidden; overscroll-behavior:none;
  touch-action:none;
}
#scene{ position:fixed; inset:0; width:100%; height:100%; display:block; }

/* ---------- boot screen ---------- */
#boot{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 20%, #0f1626 0%, #05070c 70%);
}
#boot-inner{ width:min(420px, 86vw); text-align:center; }
.boot-logo{
  font-family:'Sora',sans-serif; font-weight:800; font-size:44px; letter-spacing:.12em;
  background:linear-gradient(120deg,var(--accent),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.boot-sub{ color:var(--muted); font-size:13px; margin-top:6px; letter-spacing:.02em; }
#boot-log{ margin-top:22px; height:64px; font-size:12px; color:var(--muted); line-height:1.7; overflow:hidden; }
#boot-log div{ animation:fadein .25s ease; }
.boot-bar{ margin-top:14px; height:4px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
#boot-bar-fill{ height:100%; width:2%; background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width .25s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* ---------- crash flash ---------- */
#crash-flash{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  background:var(--danger); opacity:0; transition:opacity .08s ease;
}
#crash-flash.hit{ opacity:.55; transition:opacity 0s; }

/* ---------- HUD ---------- */
#hud{ position:fixed; inset:0; z-index:40; pointer-events:none; font-family:'Inter',sans-serif; }
#hud-top{
  position:absolute; top:calc(10px + var(--safe-t)); left:50%; transform:translateX(-50%);
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:min(94vw, 720px);
}
.hud-pill{
  background:var(--panel); border:1px solid var(--border); backdrop-filter:blur(8px);
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; color:var(--ink);
  white-space:nowrap;
}
#hud-score{ color:var(--gold); }
#hud-compass{
  position:absolute; top:calc(56px + var(--safe-t)); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none;
}
#hud-compass-arrow{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(10,14,23,.55) 0%, rgba(10,14,23,.15) 60%, transparent 100%);
  filter:drop-shadow(0 0 6px rgba(255,213,74,.55));
  transition:transform .12s linear;
  will-change:transform;
}
#hud-compass-arrow svg{ display:block; }
#hud-compass-label{
  font-size:11px; font-weight:600; color:var(--ink);
  background:var(--panel); padding:3px 10px; border-radius:999px; border:1px solid var(--border);
  max-width:70vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#hud-compass-label .dist{ color:var(--gold); margin-left:6px; font-variant-numeric:tabular-nums; }
#hud-bottom-left{
  position:absolute; bottom:calc(96px + var(--safe-b)); left:calc(14px + var(--safe-l));
  display:flex; gap:8px;
}
.gauge{
  background:var(--panel); border:1px solid var(--border); backdrop-filter:blur(8px);
  border-radius:10px; padding:6px 10px; font-size:11px; color:var(--muted); text-align:center; min-width:56px;
}
.gauge span{ display:block; font-size:9px; letter-spacing:.08em; }
.gauge b{ display:block; font-size:16px; color:var(--ink); font-family:'Sora',sans-serif; }
#hud-toast{
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%);
  font-family:'Sora',sans-serif; font-weight:700; font-size:22px; color:var(--gold);
  text-shadow:0 2px 14px rgba(0,0,0,.6); opacity:0; pointer-events:none;
}
#hud-toast.show{ animation:toast 1.4s ease forwards; }
@keyframes toast{
  0%{ opacity:0; transform:translate(-50%,-40%) scale(.9); }
  15%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-60%) scale(1.05); }
}

/* ---------- search bar ---------- */
#search-bar{
  position:fixed; z-index:45; top:calc(10px + var(--safe-t)); right:calc(10px + var(--safe-r));
  display:flex; gap:6px; pointer-events:auto;
}
#city-input{
  background:var(--panel); border:1px solid var(--border); color:var(--ink);
  border-radius:999px; padding:8px 14px; font-size:12px; width:150px; backdrop-filter:blur(8px);
}
#city-input::placeholder{ color:var(--muted); }
#city-go, #tilt-btn{
  background:var(--accent); color:#04201c; border:none; border-radius:999px;
  padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer;
}
#tilt-btn{ background:transparent; border:1px solid var(--border); color:var(--muted); display:none; }
#tilt-btn.active{ background:var(--gold); color:#241a00; border-color:var(--gold); }
#mute-btn{ background:transparent; border:1px solid var(--border); color:var(--ink); padding:8px 11px; font-size:13px; }

/* ---------- time travel ---------- */
#time-travel{
  position:fixed; z-index:45; top:calc(52px + var(--safe-t)); right:calc(10px + var(--safe-r));
  display:flex; gap:5px; pointer-events:auto; max-width:60vw; overflow-x:auto;
}
.year-chip{
  background:var(--panel); border:1px solid var(--border); color:var(--muted);
  backdrop-filter:blur(8px); border-radius:999px; padding:6px 11px; font-size:11px; font-weight:600;
  cursor:pointer; white-space:nowrap; flex:none; position:relative;
}
.year-chip.locked{ color:rgba(157,179,174,.55); }
.year-chip.locked::after{ content:"🔒"; font-size:9px; margin-left:4px; }
.year-chip.active{ background:linear-gradient(120deg,var(--accent),var(--gold)); color:#0a1512; border-color:transparent; }

/* sepia cue while viewing a real past snapshot */
body.era-past #scene{ filter:sepia(.32) saturate(.8) contrast(1.06) brightness(.97); }
body.era-past #hud-city{ color:var(--gold); }

@media (max-width:640px){
  /* mobile: keep the entire bottom half of the screen clear for the joystick + boost.
     Everything text/pill-shaped lives up top, stacked in fixed lanes, so nothing overlaps. */
  #hud-top{ top:calc(6px + var(--safe-t)); gap:6px; max-width:calc(100vw - 20px); }
  .hud-pill{ font-size:10.5px; padding:5px 9px; }
  #hud-compass{ top:calc(48px + var(--safe-t)); }
  #hud-compass-arrow{ font-size:14px; }
  #hud-compass-label{ font-size:9.5px; padding:2px 7px; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  #search-bar{
    top:calc(140px + var(--safe-t));
    right:calc(8px + var(--safe-r)); left:calc(8px + var(--safe-l));
    display:flex; gap:6px; align-items:center;
  }
  #city-input{ flex:1; min-width:0; width:auto; font-size:12px; padding:7px 12px; }
  #city-go{ padding:7px 12px; font-size:11.5px; }
  #tilt-btn, #mute-btn{ padding:7px 10px; font-size:11.5px; }

  #time-travel{
    top:calc(184px + var(--safe-t));
    right:calc(8px + var(--safe-r)); left:calc(8px + var(--safe-l));
    max-width:none; justify-content:flex-start;
  }

  /* small gauges tucked below the year chips, out of the touch zone entirely */
  #hud-bottom-left{
    top:calc(228px + var(--safe-t));
    left:calc(8px + var(--safe-l));
    bottom:auto;
    flex-direction:row; gap:6px;
  }
  .gauge{ padding:4px 8px; min-width:48px; }
  .gauge b{ font-size:14px; }

  #joystick-zone{ width:120px; height:120px; left:calc(14px + var(--safe-l)); bottom:calc(20px + var(--safe-b)); }
  #boost-btn{ width:78px; height:78px; right:calc(18px + var(--safe-r)); bottom:calc(26px + var(--safe-b)); }
}

/* ---------- touch controls ---------- */
#touch-controls{ display:none; position:fixed; inset:0; z-index:42; pointer-events:none; }
body.is-touch #touch-controls{ display:block; }
body.is-touch #tilt-btn{ display:inline-block; }
#joystick-zone{
  position:absolute; left:calc(18px + var(--safe-l)); bottom:calc(20px + var(--safe-b));
  width:132px; height:132px; pointer-events:auto;
}
#joystick-base{
  width:100%; height:100%; border-radius:50%;
  background:var(--panel); border:1px solid var(--border); backdrop-filter:blur(6px);
  position:relative;
}
#joystick-knob{
  position:absolute; width:56px; height:56px; border-radius:50%;
  left:50%; top:50%; transform:translate(-50%,-50%);
  background:linear-gradient(160deg,var(--accent),#00b8a0); box-shadow:0 4px 14px rgba(0,229,199,.4);
}
#boost-btn{
  position:absolute; right:calc(22px + var(--safe-r)); bottom:calc(30px + var(--safe-b));
  width:84px; height:84px; border-radius:50%; pointer-events:auto;
  background:linear-gradient(160deg,var(--gold),#c98f00); border:none; color:#241a00;
  font-family:'Sora',sans-serif; font-weight:800; font-size:12px; letter-spacing:.04em;
  box-shadow:0 6px 18px rgba(255,213,74,.35);
}
#boost-btn:active{ filter:brightness(.9); transform:scale(.96); }

/* ---------- parachute / street view ---------- */
#bail-btn, #landed-respawn{
  position:fixed; z-index:44; pointer-events:auto;
  padding:9px 16px; border-radius:999px; border:1px solid var(--border);
  font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.03em;
  cursor:pointer; white-space:nowrap;
}
#bail-btn{
  top:calc(56px + var(--safe-t)); left:calc(14px + var(--safe-l));
  background:linear-gradient(160deg,#ff5468,#c22333); color:#fff;
  box-shadow:0 4px 14px rgba(255,84,104,.35);
}
#landed-respawn{
  /* Only appears in landed state — sits BELOW the Look Around button so they never stack.
     Kept smaller than the primary action, matching visual hierarchy. */
  top:calc(102px + var(--safe-t)); left:calc(14px + var(--safe-l));
  background:linear-gradient(160deg,var(--accent),#00b8a0); color:#04201c;
  padding:7px 13px; font-size:11.5px;
  box-shadow:0 3px 10px rgba(0,229,199,.3);
}
#bail-btn.hidden, #landed-respawn.hidden, #street-overlay.hidden, #street-img.hidden, #street-empty.hidden, #street-loading.hidden{ display:none; }
@media (max-width:640px){
  /* Mobile: parachute buttons live top-LEFT, ALT/SPD gauges live top-RIGHT of them, so nothing
     overlaps in any mode. Nothing at bottom-center: joystick + boost own that space. */
  #bail-btn{ top:calc(174px + var(--safe-t)); left:calc(8px + var(--safe-l)); }
  #landed-respawn{ top:calc(214px + var(--safe-t)); left:calc(8px + var(--safe-l)); }
  #hud-bottom-left{ top:calc(174px + var(--safe-t)); left:auto; right:calc(8px + var(--safe-r)); }
}

#street-overlay{
  position:fixed; inset:0; z-index:95;
  background:rgba(4,7,12,.94); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#street-inner{
  width:min(1100px, 96vw); max-height:92vh; display:flex; flex-direction:column; gap:10px;
  position:relative;
}
#street-close{
  position:absolute; top:-6px; right:-6px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background:var(--panel); color:var(--ink); font-size:16px; cursor:pointer;
}
#street-stage{
  flex:1; min-height:300px; max-height:74vh; display:flex; align-items:center; justify-content:center;
  background:#0a0e17; border-radius:14px; overflow:hidden; border:1px solid var(--border);
}
#street-img{ max-width:100%; max-height:74vh; object-fit:contain; }
#street-loading{ color:var(--muted); font-size:13px; }
#street-empty{ color:var(--ink); font-size:14px; text-align:center; padding:0 20px; }
#street-caption{
  font-size:12px; color:var(--muted); text-align:center; line-height:1.5;
}
#street-caption a{ color:var(--accent); text-decoration:none; }
#street-respawn{
  align-self:center; padding:10px 22px; border-radius:999px; border:none;
  background:linear-gradient(120deg,var(--accent),var(--gold)); color:#08130f;
  font-family:'Sora',sans-serif; font-weight:800; font-size:13px; cursor:pointer;
}
@media (max-width:640px){
  #street-inner{ width:100%; max-height:100vh; }
  #street-stage{ max-height:60vh; min-height:200px; }
  #street-close{ top:6px; right:6px; }
  #street-img{ max-height:60vh; }
  #street-caption{ font-size:11px; padding:0 8px; }
}

/* ---------- help overlay ---------- */
#help-overlay{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(5,7,12,.82); backdrop-filter:blur(6px); padding:20px;
}
#help-overlay.hidden{ display:none; }
#help-card{
  width:min(520px,92vw); background:#0f1524; border:1px solid var(--border); border-radius:18px;
  padding:26px 24px; text-align:center;
}
#help-card h1{
  font-family:'Sora',sans-serif; font-weight:800; letter-spacing:.1em; font-size:30px; margin:0 0 10px;
  background:linear-gradient(120deg,var(--accent),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#help-card p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 14px; }
.help-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; margin:16px 0; }
.help-grid h3{ font-size:12px; color:var(--gold); margin:0 0 4px; letter-spacing:.06em; }
.help-grid p{ font-size:12px; margin:0; color:var(--ink); }
.help-goal{ color:var(--ink) !important; }
#help-start{
  margin-top:6px; background:linear-gradient(120deg,var(--accent),var(--gold)); border:none;
  color:#08130f; font-family:'Sora',sans-serif; font-weight:800; font-size:14px;
  padding:12px 28px; border-radius:999px; cursor:pointer;
}