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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --cyan:    #00f5ff;
  --magenta: #ff00aa;
  --purple:  #7b2fff;
  --red:     #ff3860;
  --gold:    #f5c400;
  --dark:    #010108;
  --glass:   rgba(0,0,20,0.78);
  --border:  rgba(0,245,255,0.2);
}

html,body { width:100%;height:100%;overflow:hidden;background:var(--dark);font-family:'Inter',sans-serif;color:#fff; }

/* ── CANVASES ── */
#gameCanvas  { position:absolute;top:0;left:0;width:100%;height:100%;display:block; }
#handCanvas  { position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.75; }
#webcam      { position:absolute;top:-9999px;left:-9999px;width:1px;height:1px; }

/* ── OVERLAY SCREENS ── */
.screen {
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:100;
}
.screen.active { opacity:1;pointer-events:all; }
.screen-backdrop {
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,10,.88);backdrop-filter:blur(10px);
}
.screen-content {
  position:relative;z-index:1;width:min(520px,90vw);text-align:center;
  animation:fadeUp .4s ease forwards;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

/* ── LOADING ── */
#loadingScreen { background:var(--dark); }
.logo-title {
  font-family:'Orbitron',sans-serif;font-size:clamp(2.2rem,7vw,4.5rem);font-weight:900;
  letter-spacing:.08em;color:var(--cyan);
  text-shadow:0 0 25px var(--cyan),0 0 55px var(--cyan);
  animation:pulse 1.6s ease-in-out infinite;
}
.logo-sub {
  margin-top:6px;font-family:'Orbitron',sans-serif;font-size:.75rem;
  letter-spacing:.35em;color:rgba(0,245,255,.45);
}
.loading-bar-wrap {
  margin:36px auto 0;width:220px;height:3px;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
.loading-bar {
  height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  box-shadow:0 0 8px var(--cyan);
  animation:load 2.2s ease forwards;
}
@keyframes load { to{width:100%} }
.loading-status {
  margin-top:18px;font-family:'Orbitron',sans-serif;
  font-size:.65rem;letter-spacing:.2em;color:rgba(255,255,255,.25);
}

/* ── START ── */
.game-title {
  font-family:'Orbitron',sans-serif;font-size:clamp(2.8rem,8vw,5.5rem);font-weight:900;
  letter-spacing:.06em;line-height:1;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 18px rgba(0,245,255,.4));
}
.game-tagline {
  margin-top:8px;font-family:'Orbitron',sans-serif;font-size:.68rem;
  letter-spacing:.35em;color:rgba(0,245,255,.45);
}

/* ── CAR SELECT ── */
.car-select-panel {
  margin:28px auto;padding:22px 28px;background:var(--glass);
  border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(10px);
}
.csp-header {
  font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.3em;
  color:rgba(255,255,255,.35);margin-bottom:16px;
}
.car-carousel { display:flex;align-items:center;gap:14px;justify-content:center; }
.car-info { flex:1;min-width:200px; }
.car-name {
  font-family:'Orbitron',sans-serif;font-size:1.6rem;font-weight:700;
  color:var(--cyan);transition:color .3s;
}
.car-subtitle {
  font-size:.75rem;color:rgba(255,255,255,.38);margin-bottom:16px;
  font-family:'Orbitron',sans-serif;letter-spacing:.1em;
}
.car-stats { display:flex;flex-direction:column;gap:8px;text-align:left; }
.stat-row  { display:flex;align-items:center;gap:8px; }
.stat-lbl  { font-size:.6rem;color:rgba(255,255,255,.45);width:54px;font-family:'Orbitron',sans-serif; }
.stat-bg   { flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden; }
.stat-fill { height:100%;border-radius:2px;background:var(--cyan);transition:width .4s ease; }
.btn-arrow {
  width:42px;height:42px;border:1px solid rgba(0,245,255,.28);
  background:rgba(0,245,255,.05);border-radius:50%;color:var(--cyan);
  font-size:1.3rem;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
}
.btn-arrow:hover { background:rgba(0,245,255,.15);box-shadow:0 0 14px rgba(0,245,255,.3); }

.hand-hint {
  font-family:'Orbitron',sans-serif;font-size:.68rem;letter-spacing:.15em;
  color:rgba(255,255,255,.35);margin-bottom:18px;
}
.hint-small { margin-top:12px;font-size:.62rem;color:rgba(255,255,255,.2);font-family:'Orbitron',sans-serif; }

/* ── BUTTONS ── */
.btn-primary {
  padding:13px 46px;border:none;border-radius:50px;cursor:pointer;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  font-family:'Orbitron',sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:.2em;color:#fff;transition:all .2s;
  box-shadow:0 0 18px rgba(0,245,255,.28),0 0 36px rgba(123,47,255,.18);
  position:relative;overflow:hidden;
}
.btn-primary::before {
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .38s;
}
.btn-primary:hover::before { left:100%; }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 0 28px rgba(0,245,255,.45); }
.btn-primary:active { transform:none; }

.btn-secondary {
  padding:11px 34px;background:transparent;border:1px solid rgba(0,245,255,.35);
  border-radius:50px;color:var(--cyan);font-family:'Orbitron',sans-serif;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;cursor:pointer;transition:all .2s;
}
.btn-secondary:hover { background:rgba(0,245,255,.08);box-shadow:0 0 14px rgba(0,245,255,.22); }

.btn-stack { display:flex;flex-direction:column;gap:14px;align-items:center;margin-top:32px; }
.btn-row   { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }

/* ── OVERLAY TITLES ── */
.overlay-title {
  font-family:'Orbitron',sans-serif;font-size:clamp(2rem,6vw,3rem);font-weight:900;
  letter-spacing:.05em;
}
.overlay-sub {
  font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:.3em;
  color:rgba(255,255,255,.35);margin-bottom:12px;
}
.gameover-glow { color:var(--red);text-shadow:0 0 20px var(--red),0 0 40px var(--red);animation:glitch 4s infinite; }
@keyframes glitch {
  0%,88%,100%{transform:none}
  90%{transform:translateX(-3px);filter:hue-rotate(80deg)}
  92%{transform:translateX(3px)}
  94%{transform:none}
}

/* ── SCORE PANEL ── */
.score-panel {
  margin:24px auto;padding:22px 28px;background:var(--glass);
  border:1px solid rgba(255,56,96,.25);border-radius:16px;backdrop-filter:blur(10px);
}
.score-row {
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.score-row:last-child { border:none;margin-top:6px;padding-top:14px; }
.score-lbl { font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:.2em;color:rgba(255,255,255,.4); }
.score-val { font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:700; }
.score-val.highlight { color:var(--cyan);text-shadow:0 0 10px var(--cyan); }
.score-val.gold { color:var(--gold);text-shadow:0 0 10px var(--gold); }

/* ── PERSISTENT UI ── */
#btnMute,#btnPause {
  position:absolute;top:18px;z-index:200;width:42px;height:42px;
  background:rgba(0,0,20,.72);border:1px solid rgba(0,245,255,.2);
  border-radius:50%;color:#fff;font-size:1rem;cursor:pointer;
  transition:all .2s;display:flex;align-items:center;justify-content:center;
}
#btnMute  { right:18px; }
#btnPause { right:68px;display:none; }
#btnPause.show { display:flex; }
#btnMute:hover,#btnPause:hover { border-color:var(--cyan);box-shadow:0 0 10px rgba(0,245,255,.3); }

#keyboardHint {
  position:absolute;bottom:46px;left:50%;transform:translateX(-50%);
  z-index:200;display:none;background:rgba(0,0,20,.82);
  border:1px solid rgba(255,200,0,.25);border-radius:10px;
  padding:9px 20px;font-family:'Orbitron',sans-serif;font-size:.62rem;
  letter-spacing:.12em;color:rgba(255,200,0,.65);text-align:center;
}

/* ── START: control mode ── */
.control-mode-panel {
  margin:18px auto 0;padding:16px 20px;background:var(--glass);
  border:1px solid var(--border);border-radius:14px;backdrop-filter:blur(10px);
  width:100%;max-width:min(520px,90vw);
}
.control-mode-row { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; }
.control-mode-hint { margin-top:10px !important; }
.btn-mode {
  flex:1;min-width:120px;padding:10px 16px;border-radius:10px;cursor:pointer;
  font-family:'Orbitron',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.12em;
  background:rgba(0,245,255,.06);border:1px solid rgba(0,245,255,.28);color:rgba(255,255,255,.85);
  transition:background .2s,border-color .2s,box-shadow .2s,color .2s;
}
.btn-mode:hover {
  background:rgba(0,245,255,.12);border-color:rgba(0,245,255,.5);
  box-shadow:0 0 14px rgba(0,245,255,.2);
}
.btn-mode.selected {
  background:linear-gradient(135deg,rgba(0,245,255,.22),rgba(123,47,255,.18));
  border-color:var(--cyan);color:#fff;box-shadow:0 0 16px rgba(0,245,255,.35);
}

/* ── Camera preview (corner, above gameplay) ── */
.tracking-preview {
  position:absolute;top:72px;left:12px;z-index:150;
  width:min(44vw,200px);max-width:200px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(0,245,255,.35);
  box-shadow:0 4px 20px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.4);
  background:rgba(0,0,16,.92);
}
.tracking-preview.visible { opacity:1; }
.tracking-preview.no-hands {
  border-color:rgba(255,160,80,.55);
  box-shadow:0 4px 20px rgba(0,0,0,.45),0 0 12px rgba(255,120,60,.2);
}
.tracking-preview canvas {
  display:block;width:100%;height:auto;vertical-align:top;
  aspect-ratio:160/120;
}
.tracking-preview-label {
  font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:.14em;
  padding:6px 8px;text-align:center;
  background:rgba(0,0,25,.88);color:rgba(0,245,255,.75);
  border-top:1px solid rgba(0,245,255,.15);
}
.tracking-preview.no-hands .tracking-preview-label {
  color:rgba(255,180,120,.9);
}

@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.55} }