:root{
  --sand:#FDF3E2;
  --ocean:#00AEC0;
  --ocean-deep:#016E82;
  --flamingo:#FF6F91;
  --flamingo-deep:#E14D72;
  --sunset:#FF8C42;
  --sunshine:#FFD23F;
  --dusk:#16324A;
  --dusk-soft:#274A63;
  --paper:#FFF8EC;
  --good:#00AEC0;
  --perfect:#FFD23F;
  --miss:#8A94A0;
  --accent-red:#E63946;
  --panel-navy:#0B2A4A;
  --panel-navy-light:#0F3A63;
  --arcade-bg:linear-gradient(180deg,#04162c 0%, #0b3866 55%, #1478c4 100%);
  --font-display:'Bungee', cursive;
  --font-body:'Baloo 2', sans-serif;
  --font-pixel:'Press Start 2P', monospace;
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  font-family:var(--font-body);
  background:var(--dusk);
  color:var(--dusk);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
#app{
  position:relative; width:100%; height:100%; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#123047 0%, #0d2135 100%);
}
.screen{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  width:100%; height:100%;
}
.screen.active{ display:flex; }
.hidden{ display:none !important; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-display); font-size:15px; letter-spacing:0.5px;
  color:var(--paper); background:var(--accent-red);
  border:3px solid var(--dusk); border-radius:999px; padding:14px 28px;
  cursor:pointer; box-shadow:0 5px 0 var(--dusk);
  transition:transform .08s ease, box-shadow .08s ease; user-select:none;
}
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--dusk); }
.btn:focus-visible{ outline:3px solid var(--sunshine); outline-offset:3px; }
.btn.secondary{ background:var(--ocean); }
.btn.tertiary{ background:var(--sunshine); color:var(--dusk); }
.btn.small{ font-size:12px; padding:10px 18px; box-shadow:0 4px 0 var(--dusk); }
.btn.small:active{ box-shadow:0 1px 0 var(--dusk); }
.icon-btn{
  width:38px; height:38px; border-radius:50%; background:rgba(22,50,74,0.85);
  color:var(--paper); border:none; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 0 rgba(0,0,0,0.3);
}
.icon-btn:active{ transform:translateY(2px); box-shadow:none; }
.icon-btn.top-right{ position:absolute; top:16px; right:16px; }

/* ---------- Loading ---------- */
#screen-loading{ background:var(--arcade-bg); }
.loading-box{ text-align:center; color:var(--paper); }
.loading-title{ font-family:var(--font-pixel); font-size:28px; letter-spacing:3px; text-shadow:3px 3px 0 #041220; }
.loading-spinner{
  width:44px; height:44px; margin:18px auto; border-radius:50%;
  border:6px solid rgba(255,255,255,0.2); border-top-color:var(--sunshine);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-sub{ font-size:13px; opacity:0.85; font-family:var(--font-body); }

/* ---------- Menu ---------- */
#screen-menu{
  background:#0a2a4a;
}
.menu-bg{
  position:relative;
  width:100%; max-width:calc(100vh * 16 / 9);
  aspect-ratio:16/9;
  background-image:url('assets/ui/home-background.png');
  background-size:cover; background-position:center;
  margin:0 auto;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.menu-content{
  position:absolute; left:28%; right:28%; top:54%; height:24%;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  text-align:center;
}
.menu-content p.blurb{
  margin:0; font-size:clamp(9px, 1.15vw, 14px); color:var(--dusk-soft);
  line-height:1.4; font-family:var(--font-body); font-weight:600;
}
.title-actions{ display:flex; gap:clamp(8px,1.4vw,16px); justify-content:center; flex-wrap:wrap; }
.title-actions .btn{ font-size:clamp(10px,1.3vw,15px); padding:clamp(8px,1.3vw,14px) clamp(14px,2.4vw,26px); }
.best-line{
  margin-top:2px; font-family:var(--font-pixel); font-size:clamp(7px,0.85vw,11px); letter-spacing:1px;
  color:var(--ocean-deep);
}
.best-line:not(:empty)::before{ content:"★ "; color:var(--accent-red); }
.best-line:not(:empty)::after{ content:" ★"; color:var(--accent-red); }

/* ---------- How to play ---------- */
#screen-howto{ background:var(--arcade-bg); }
.panel-card{
  background:var(--panel-navy); border:4px solid var(--sunshine); border-radius:14px;
  padding:26px 30px; max-width:440px; width:90%; box-shadow:0 10px 0 rgba(0,0,0,0.4);
}
.panel-card h2{ font-family:var(--font-pixel); font-size:20px; color:var(--sunshine); margin-top:0;
  text-shadow:2px 2px 0 #041220; }
.howto-list{ font-size:14px; line-height:1.8; color:var(--paper); padding-left:20px; }
.howto-list b{ color:var(--sunshine); }
.panel-card .btn{ margin-top:6px; }

/* ---------- Vehicle select ---------- */
#screen-select{ background:var(--arcade-bg); }
.select-wrap{ text-align:center; color:var(--paper); padding:20px; max-width:1080px; width:100%; }
.select-wrap h2{
  font-family:var(--font-pixel); color:var(--sunshine); font-size:clamp(16px,3vw,26px); margin-bottom:6px;
  text-shadow:2px 2px 0 #041220;
}
.select-wrap p{ color:#BFE0F5; font-size:12px; margin-top:0; margin-bottom:16px; font-family:var(--font-body); }
.vehicle-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px; max-height:56vh; overflow-y:auto; padding:8px;
}
.vehicle-card{
  position:relative;
  background:var(--panel-navy-light); border:3px solid #1E5A8C; border-radius:12px; padding:12px;
  cursor:pointer; text-align:left; box-shadow:0 5px 0 rgba(0,0,0,0.35);
  transition:transform .1s ease, border-color .1s ease, box-shadow .1s ease; color:var(--paper);
}
.vehicle-card:hover{ transform:translateY(-3px); border-color:var(--ocean); }
.vehicle-card.selected{
  border-color:var(--sunshine); box-shadow:0 0 0 3px rgba(255,210,63,0.35), 0 5px 0 var(--sunshine);
}
.vehicle-card.selected::before{
  content:"✓ SELECTED"; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--sunshine); color:#041220; font-family:var(--font-pixel); font-size:8px;
  padding:3px 8px; border-radius:6px; white-space:nowrap;
}
.vehicle-thumb{
  height:110px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, #1a5a95 0%, #0c3760 100%); border-radius:10px; margin-bottom:10px;
  border:2px solid #0a2c4d;
}
.vehicle-thumb img{ max-width:92%; max-height:92%; filter:drop-shadow(0 4px 4px rgba(0,0,0,0.4)); }
.vehicle-name{ font-family:var(--font-pixel); font-size:11px; color:var(--sunshine); margin-bottom:8px; line-height:1.4; }
.vehicle-stats{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.stat-row{ display:flex; align-items:center; gap:6px; font-size:10px; color:#BFE0F5; font-family:var(--font-body); font-weight:700; }
.stat-row span{ width:38px; flex-shrink:0; }
.stat-track{ flex:1; height:6px; background:#0a2c4d; border-radius:4px; overflow:hidden; }
.stat-fill{ height:100%; background:linear-gradient(90deg,var(--ocean),var(--sunshine)); }
.vehicle-ability{ font-size:10px; color:var(--accent-red); font-weight:700; font-family:var(--font-body); }
.vehicle-ability.muted{ color:#5A7A9A; font-weight:400; }
.select-actions{ margin-top:18px; display:flex; gap:12px; justify-content:center; }
#btn-launch{ font-size:16px; padding:16px 36px; animation:launchPulse 1.6s ease-in-out infinite; }
@keyframes launchPulse{ 0%,100%{ box-shadow:0 5px 0 var(--dusk); } 50%{ box-shadow:0 5px 0 var(--dusk), 0 0 18px 4px rgba(255,210,63,0.55); } }

/* ---------- Play screen ---------- */
#screen-play{ background:#0f2438; }
#game-wrap{
  position:relative; width:100%; max-width:1280px; aspect-ratio:1280/720; margin:0 auto;
}
#gameCanvas{ width:100%; height:100%; display:block; border-radius:10px; box-shadow:0 0 0 4px var(--dusk); touch-action:none; }

#hud{
  position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between;
  align-items:flex-start; pointer-events:none;
}
#hud .icon-btn{ pointer-events:auto; }
.hud-corner{ display:flex; flex-direction:column; gap:2px; pointer-events:none; }
.hud-right{ align-items:flex-end; text-align:right; }
.pixel-outline{
  font-family:var(--font-pixel);
  color:#fff;
  text-shadow:
    2px 2px 0 #0b1b28, -2px 2px 0 #0b1b28, 2px -2px 0 #0b1b28, -2px -2px 0 #0b1b28,
    2px 0 0 #0b1b28, -2px 0 0 #0b1b28, 0 2px 0 #0b1b28, 0 -2px 0 #0b1b28;
}
.hud-big{ font-family:var(--font-pixel); font-size:clamp(18px,3vw,26px); color:#fff;
  text-shadow:3px 3px 0 #0b1b28, -1px -1px 0 #0b1b28, 1px -1px 0 #0b1b28, -1px 1px 0 #0b1b28; }
.hud-tag{ font-family:var(--font-pixel); font-size:9px; color:var(--sunshine);
  text-shadow:2px 2px 0 #0b1b28, -1px -1px 0 #0b1b28, 1px -1px 0 #0b1b28, -1px 1px 0 #0b1b28; margin-top:2px; }
.hud-mid{ font-family:var(--font-pixel); font-size:14px; color:#fff;
  text-shadow:2px 2px 0 #0b1b28, -1px -1px 0 #0b1b28, 1px -1px 0 #0b1b28, -1px 1px 0 #0b1b28; }
.hud-cans-row{ font-size:20px; display:flex; align-items:center; gap:6px; }
.hud-cans-row .hud-mid{ font-size:16px; }
#hud-combo-badge{
  align-self:center; font-family:var(--font-pixel); font-size:11px; color:var(--sunshine);
  background:rgba(11,27,40,0.75); padding:5px 10px; border-radius:6px; margin-top:2px;
  text-shadow:1px 1px 0 #000;
}
#hud-combo-badge.hot{ color:var(--accent-red); animation:comboPulse 0.5s ease infinite alternate; }
@keyframes comboPulse{ from{ transform:scale(1); } to{ transform:scale(1.12); } }

#countdown-text{
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-pixel); font-size:56px; color:var(--paper);
  text-shadow:3px 3px 0 #0b1b28, -2px -2px 0 #0b1b28, 2px -2px 0 #0b1b28, -2px 2px 0 #0b1b28;
  display:none;
}
#countdown-text.pop{ animation:popIn 0.5s ease; }
@keyframes popIn{ 0%{ transform:translate(-50%,-50%) scale(0.4); opacity:0; } 60%{ transform:translate(-50%,-50%) scale(1.15); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1); } }

#launch-meter-ui, #boost-meter-ui{
  position:absolute; left:50%; transform:translateX(-50%); bottom:56px; width:70%; max-width:520px;
  text-align:center;
}
#boost-meter-ui{ bottom:20px; width:60%; max-width:420px; }
.meter-title{ font-family:var(--font-pixel); color:var(--paper); font-size:11px; margin-bottom:8px; text-shadow:2px 2px 0 #0b1b28; }
.meter-hint{ font-family:var(--font-pixel); color:var(--paper); font-size:9px; margin-top:8px; opacity:0.9; text-shadow:1px 1px 0 #0b1b28; }
.meter-track{
  position:relative; height:20px; background:rgba(22,50,74,0.6); border:2px solid var(--dusk);
  border-radius:10px; overflow:visible;
}
.meter-track.small{ height:14px; }
.meter-zone{ position:absolute; top:0; bottom:0; border-radius:6px; }
.meter-zone.good-zone{ background:rgba(0,174,192,0.55); }
.meter-zone.perfect-zone{
  background:rgba(255,210,63,0.9); box-shadow:0 0 10px 2px rgba(255,210,63,0.7);
  animation:perfectGlow 0.9s ease-in-out infinite;
}
@keyframes perfectGlow{
  0%,100%{ box-shadow:0 0 6px 1px rgba(255,210,63,0.6); }
  50%{ box-shadow:0 0 16px 5px rgba(255,210,63,0.95); }
}
.meter-fill{ position:absolute; top:0; bottom:0; left:0; width:0%; background:rgba(230,57,70,0.4); border-radius:10px; }
.meter-marker{
  position:absolute; top:-6px; width:6px; height:32px; background:var(--paper);
  border:2px solid var(--dusk); border-radius:3px; transform:translateX(-50%);
}
.meter-marker.thin{ height:24px; top:-5px; width:4px; }

.feedback{
  position:absolute; top:26%; left:50%; transform:translate(-50%,-40%);
  font-family:var(--font-pixel); font-size:20px; opacity:0; pointer-events:none;
  text-shadow:2px 2px 0 #0b1b28, -1px -1px 0 #0b1b28, 1px -1px 0 #0b1b28, -1px 1px 0 #0b1b28;
  transition:opacity .15s ease;
}
.feedback.show{ opacity:1; }
.feedback.perfect{ color:var(--perfect); }
.feedback.good{ color:var(--good); }
.feedback.miss{ color:var(--miss); }

#mobile-boost-btn{
  position:absolute; right:16px; bottom:16px; width:84px; height:84px; border-radius:50%;
  background:var(--accent-red); color:var(--paper); border:4px solid var(--dusk);
  font-family:var(--font-display); font-size:13px; box-shadow:0 5px 0 var(--dusk);
  display:none;
}
#mobile-boost-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--dusk); }
@media (pointer:coarse){ #mobile-boost-btn{ display:block; } }

/* ---------- Results modal ---------- */
.modal-backdrop{
  position:absolute; inset:0; background:rgba(4,16,30,0.82);
  display:flex; align-items:center; justify-content:center; z-index:20; border-radius:10px;
}
.modal-box{
  background:var(--panel-navy); border:4px solid var(--sunshine); border-radius:14px; padding:24px 26px;
  text-align:center; max-width:380px; width:88%; box-shadow:0 10px 0 rgba(0,0,0,0.5);
}
.modal-box h3{
  font-family:var(--font-pixel); color:var(--sunshine); font-size:16px; margin:0 0 14px 0;
  text-shadow:2px 2px 0 #041220; line-height:1.6;
}
.record-badge{
  display:inline-block; background:var(--accent-red); color:var(--paper); font-size:9px;
  font-family:var(--font-pixel); padding:4px 8px; border-radius:6px; vertical-align:middle; margin-left:4px;
}
.results-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.result-stat{ background:var(--panel-navy-light); border:2px solid #1E5A8C; border-radius:10px; padding:9px; }
.result-stat span{ display:block; font-size:9px; color:#8FC4E8; text-transform:uppercase; font-family:var(--font-body); font-weight:700; }
.result-stat b{ font-family:var(--font-pixel); font-size:14px; color:var(--paper); }
.score-line-big{ font-size:10px; color:#8FC4E8; letter-spacing:1px; margin:14px 0 10px 0; font-family:var(--font-body); font-weight:700; }
.score-line-big b{ font-family:var(--font-pixel); font-size:26px; color:var(--sunshine); display:block; margin-top:6px; text-shadow:2px 2px 0 #041220; }
.modal-box .best-line{ font-size:10px; color:#8FC4E8; margin-bottom:14px; }
.modal-box .best-line:not(:empty)::before{ content:"★ "; color:var(--sunshine); }
.modal-box .best-line:not(:empty)::after{ content:" ★"; color:var(--sunshine); }
.modal-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- Debug panel ---------- */
#debug-panel{
  position:absolute; top:8px; right:8px; width:220px; max-height:88%; overflow-y:auto;
  background:rgba(10,20,30,0.92); border:2px solid var(--sunshine); border-radius:12px;
  padding:10px 12px; z-index:30; color:var(--paper); font-size:11px;
}
.debug-title{ font-family:var(--font-display); font-size:11px; color:var(--sunshine); margin-bottom:8px; }
.debug-row{ margin-bottom:8px; }
.debug-row label{ display:flex; justify-content:space-between; margin-bottom:2px; }
.debug-val{ color:var(--sunshine); }
.debug-row input[type="range"]{ width:100%; }

@media (max-width:640px){
  #launch-meter-ui, #boost-meter-ui{ width:88%; }
}