/* ═══════════════════════════════════════════════════
   QUANTUM DRIFT — UI System
   ARCADE LAB © 2025
═══════════════════════════════════════════════════ */

:root {
  --void:   #050510;
  --cyan:   #00F5FF;
  --purple: #7A5CFF;
  --pink:   #FF2DA6;
  --lime:   #C7FF4D;
  --silver: #8888AA;
  --text:   #F0F0FF;
  --orb: 'Orbitron', monospace;
  --mono: 'Space Mono', monospace;
}

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

html, body {
  width:100%; height:100%;
  overflow:hidden;
  touch-action: none;
  overscroll-behavior: none;
  background:var(--void);
  cursor:none;
  user-select:none;
  -webkit-user-select:none;
}

#c {
  display:block;
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
}

/* ── In-game cursor (v2.4) ────────────────────────
   The game owns its cursor: neon dot + lagging ring in the current
   quantum state's colour, growing over buttons, rippling on click.
   Hidden on touch devices, where there is no cursor to show. */
#qd-cursor-dot, #qd-cursor-ring {
  position:fixed; top:0; left:0; pointer-events:none; z-index:2147483647;
}
#qd-cursor-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan), 0 0 24px var(--cyan);
}
#qd-cursor-ring {
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--cyan); opacity:0.7;
  transition:width .18s, height .18s, opacity .18s;
}
#qd-cursor-ring.hot { width:62px; height:62px; opacity:1; }
.qd-ripple {
  position:fixed; width:44px; height:44px; border-radius:50%;
  border:2px solid var(--cyan); pointer-events:none; z-index:2147483647;
  animation:qd-rip .5s ease-out forwards;
}
@keyframes qd-rip { from { transform:scale(.4); opacity:.9; } to { transform:scale(1.9); opacity:0; } }
@media (pointer:coarse) {
  #qd-cursor-dot, #qd-cursor-ring { display:none; }
}

/* ── UI Overlay ─────────────────────────────────── */
#ui {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
}

.screen {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
.screen.hidden { display:none; }

/* ── Atmosphere ─────────────────────────────────── */
.scanlines {
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,245,255,0.012) 2px, rgba(0,245,255,0.012) 4px
  );
}
.grain {
  position:fixed; inset:0; pointer-events:none; z-index:49; opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ── HUD ────────────────────────────────────────── */
#hud {
  flex-direction:column;
  justify-content:space-between;
  padding:18px 22px 14px;
  pointer-events:none;
}

.hud-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  width:100%;
}

.hud-panel {
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  padding:8px 18px;
  min-width:130px;
}
.hud-panel.right { text-align:right; }

.hud-label {
  font-family:var(--orb);
  font-size:9px;
  letter-spacing:3px;
  color:rgba(255,255,255,0.28);
  text-transform:uppercase;
}

.hud-val {
  font-family:var(--orb);
  font-size:24px;
  font-weight:700;
  color:var(--text);
  letter-spacing:2px;
  margin-top:3px;
}

.hud-center-col {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.hidden{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#q-pips {
  display:flex;
  gap:10px;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:28px;
  padding:8px 18px;
}

.q-pip {
  font-family:var(--orb);
  font-size:18px;
  font-weight:900;
  color:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  width:42px; height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.18s ease;
}

#sector-badge {
  font-family:var(--orb);
  font-size:10px;
  letter-spacing:3px;
  color:rgba(255,255,255,0.35);
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:4px 14px;
}
#sector-badge #h-sector {
  color:var(--text);
  font-weight:700;
}

.hud-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  width:100%;
  gap:14px;
}

.bar-group {
  flex:1;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  padding:8px 14px;
}
.bar-group.r { text-align:right; }

.bar-lbl {
  font-family:var(--orb);
  font-size:9px;
  letter-spacing:3px;
  color:rgba(255,255,255,0.28);
  margin-bottom:7px;
}

.bar-track {
  height:7px;
  background:rgba(255,255,255,0.05);
  border-radius:4px;
  overflow:hidden;
}
.bar-fill {
  height:100%;
  border-radius:4px;
  transition:width 0.12s, background 0.3s;
  background:linear-gradient(90deg,var(--cyan),var(--cyan));
}
.bar-fill.charge {
  background:linear-gradient(90deg,var(--purple),var(--purple));
}

#speed-box {
  text-align:center;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  padding:8px 22px;
  min-width:110px;
}
#speed-num {
  font-family:var(--orb);
  font-size:34px;
  font-weight:900;
  color:var(--cyan);
  letter-spacing:5px;
  text-shadow:0 0 20px var(--cyan);
  line-height:1;
}

#hint-strip {
  position:absolute;
  bottom:72px;
  right:22px;
  display:flex;
  flex-direction:column;
  gap:5px;
  opacity:0.28;
  text-align:right;
  pointer-events:none;
}
#hint-strip span {
  font-family:var(--mono);
  font-size:10px;
  color:rgba(255,255,255,0.5);
}
.ks { color:var(--cyan); margin-right:5px; }

/* ── Panel (menus) ──────────────────────────────── */
.panel {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:linear-gradient(160deg, rgba(10,10,38,0.94), rgba(5,5,20,0.92) 60%, rgba(20,5,28,0.94));
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(0,245,255,0.16);
  border-radius:24px;
  padding:46px 54px;
  max-width:580px;
  width:90%;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset, 0 24px 80px rgba(0,0,0,0.6), 0 0 60px rgba(0,245,255,0.06);
}
.panel::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(135deg,rgba(0,245,255,0.2),transparent 50%,rgba(255,45,166,0.12));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.panel.sm { padding:38px 48px; }

/* ── Logo ────────────────────────────────────────── */
.eyebrow {
  font-family:var(--orb);
  font-size:10px;
  letter-spacing:4px;
  color:rgba(0,245,255,0.4);
  margin-bottom:22px;
}
.eyebrow.pink { color:rgba(255,45,166,0.5); }

.logo { margin-bottom:26px; }
.logo-top {
  font-family:var(--orb);
  font-size:52px;
  font-weight:900;
  letter-spacing:14px;
  color:var(--text);
  line-height:1;
  text-shadow:0 0 40px rgba(0,245,255,0.35);
}
.logo-bot {
  font-family:var(--orb);
  font-size:74px;
  font-weight:900;
  letter-spacing:10px;
  line-height:1;
  background:linear-gradient(135deg,var(--cyan) 20%,var(--purple) 55%,var(--pink));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 24px rgba(0,245,255,0.5));
  animation:logoshine 5s ease-in-out infinite;
}
@keyframes logoshine {
  0%,100% { filter:drop-shadow(0 0 24px rgba(0,245,255,0.5)); }
  50% { filter:drop-shadow(0 0 44px rgba(255,45,166,0.55)); }
}
.logo-ver {
  font-family:var(--mono);
  font-size:10px;
  color:rgba(255,255,255,0.18);
  letter-spacing:3px;
  margin-top:8px;
}

.flavor {
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,0.38);
  line-height:1.8;
  font-style:italic;
  margin-bottom:26px;
}

.ctrl-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px;
  margin-bottom:18px;
  width:100%;
}
.ci {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:10px;
  color:rgba(255,255,255,0.36);
  text-align:left;
}
.kb {
  font-family:var(--orb);
  font-size:8px;
  color:var(--cyan);
  border:1px solid rgba(0,245,255,0.3);
  border-radius:4px;
  padding:2px 7px;
  white-space:nowrap;
  background:rgba(0,245,255,0.05);
  flex-shrink:0;
}

.tip-box {
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,0.28);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  padding:10px 16px;
  background:rgba(255,255,255,0.02);
  margin-bottom:26px;
  width:100%;
}
.col-c { color:var(--cyan); }
.col-g { color:rgba(122,92,255,0.6); }

/* ── Difficulty / Mode selectors (v2.3) ────────── */
.seg-label {
  font-family:var(--orb);
  font-size:9px;
  letter-spacing:3px;
  color:rgba(255,255,255,0.28);
  align-self:flex-start;
  margin:4px 0 8px;
}
.seg-row { display:flex; gap:8px; width:100%; margin-bottom:6px; }
.seg {
  flex:1;
  font-family:var(--orb);
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  padding:10px 6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.45);
  cursor:pointer;
  transition:all 0.15s ease;
}
.seg:hover { border-color:rgba(0,245,255,0.4); color:var(--cyan); }
.seg.sel {
  border-color:rgba(0,245,255,0.6);
  background:rgba(0,245,255,0.12);
  color:var(--cyan);
  box-shadow:0 0 16px rgba(0,245,255,0.15);
}
.seg-desc {
  font-family:var(--mono);
  font-size:10px;
  color:rgba(255,255,255,0.32);
  margin-bottom:14px;
  min-height:14px;
}

/* ── Leaderboard (v2.3) ────────────────────────── */
.board-title {
  font-family:var(--orb);
  font-size:10px;
  letter-spacing:3px;
  color:rgba(199,255,77,0.6);
  margin:16px 0 8px;
}
.board { width:100%; }
.board-empty {
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,0.3);
  padding:6px 0;
}
.board-row {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.board-rank { color:var(--lime); font-weight:700; width:26px; text-align:center; }
.board-name { color:var(--text); font-weight:700; letter-spacing:1px; }
.board-tag {
  font-family:var(--orb); font-size:8px; letter-spacing:1px;
  border:1px solid rgba(255,255,255,0.15); border-radius:8px; padding:2px 6px;
  color:rgba(255,255,255,0.45);
}
.board-row.you { background:rgba(0,245,255,0.07); border-radius:8px; padding-left:6px; padding-right:6px; }
.board-row.you .board-tag { color:var(--cyan); border-color:rgba(0,245,255,0.4); }
.board-row.podium-1 { background:linear-gradient(90deg, rgba(255,215,0,0.12), transparent); }
.board-row.podium-2 { background:linear-gradient(90deg, rgba(192,192,192,0.10), transparent); }
.board-row.podium-3 { background:linear-gradient(90deg, rgba(205,127,50,0.12), transparent); }
.board-meta { color:rgba(255,255,255,0.3); font-size:9px; flex:1; text-align:left; }
.board-score { color:var(--cyan); font-weight:700; }
.board-note {
  font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.3);
  margin-bottom:8px; line-height:1.6;
}

/* ── HUD rival + sector progress (v2.4) ────────── */
.hud-pill.rival { color:var(--lime); border-color:rgba(199,255,77,0.25); }
.sector-prog {
  width:100%; height:3px; background:rgba(255,255,255,0.08);
  border-radius:2px; overflow:hidden; margin-top:6px;
}
#h-sector-prog { height:100%; width:0%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); transition:width .3s; }
.pause-hint {
  font-family:var(--mono); font-size:11px; color:rgba(255,255,255,0.35);
  margin-bottom:22px;
}

/* ── Game-over extras (v2.3) ───────────────────── */
.rank-badge {
  font-family:var(--orb);
  font-size:12px;
  letter-spacing:3px;
  color:var(--lime);
  border:1px solid rgba(199,255,77,0.3);
  border-radius:22px;
  padding:8px 20px;
  margin-bottom:10px;
}
.go-meta {
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,0.4);
  margin-bottom:18px;
}
.save-row { display:flex; gap:10px; width:100%; margin-bottom:16px; align-items:stretch; }
.save-row input {
  flex:1;
  font-family:var(--orb);
  font-size:12px;
  letter-spacing:2px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(0,245,255,0.3);
  background:rgba(0,0,0,0.5);
  color:var(--text);
  text-transform:uppercase;
  outline:none;
  min-width:0;
}
.btn.small { width:auto; padding:12px 20px; margin-bottom:0; flex-shrink:0; }

/* ── HUD extras (v2.3) ─────────────────────────── */
.hud-sub {
  font-family:var(--mono);
  font-size:10px;
  color:rgba(199,255,77,0.7);
  letter-spacing:1px;
  margin-top:4px;
}
.hud-pill {
  font-family:var(--orb);
  font-size:10px;
  letter-spacing:3px;
  color:rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:4px 14px;
}

/* ── Touch controls (v2.3) ───────────────────────
   Hidden on mouse/keyboard setups; shown on touch devices,
   where the old game offered no way to shift state, shield
   or pause at all. */
#touch-bar {
  display:none;
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  gap:8px;
  pointer-events:auto;
  z-index:30;
}
@media (pointer:coarse) {
  #touch-bar { display:flex; }
  #hint-strip { display:none; }
  .hud-bottom { padding-bottom:64px; }
}
.tb {
  font-family:var(--orb);
  font-size:14px;
  font-weight:700;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(0,245,255,0.4);
  background:rgba(0,0,0,0.6);
  color:var(--cyan);
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.tb.state { border-color:rgba(122,92,255,0.5); color:var(--purple); }
.tb.shield { width:auto; padding:0 14px; border-radius:24px; font-size:10px; letter-spacing:1px; color:var(--lime); border-color:rgba(199,255,77,0.4); }
.tb:active { background:rgba(0,245,255,0.25); transform:scale(0.92); }

/* ── Buttons ────────────────────────────────────── */
.btn {
  font-family:var(--orb);
  font-size:12px;
  font-weight:700;
  letter-spacing:4px;
  border:none;
  border-radius:10px;
  padding:16px 36px;
  cursor:pointer;
  transition:all 0.2s ease;
  width:100%;
  margin-bottom:12px;
}
.btn.primary {
  background:linear-gradient(135deg,rgba(0,245,255,0.18),rgba(122,92,255,0.18));
  border:1px solid rgba(0,245,255,0.4);
  color:var(--cyan);
}
.btn.primary:hover {
  background:linear-gradient(135deg,rgba(0,245,255,0.28),rgba(122,92,255,0.28));
  box-shadow:0 0 28px rgba(0,245,255,0.2);
  transform:translateY(-2px);
}
.btn.secondary {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.38);
  margin-bottom:0;
}
.btn.secondary:hover {
  border-color:rgba(255,45,166,0.3);
  color:rgba(255,45,166,0.7);
}
.btn-col { display:flex; flex-direction:column; gap:10px; width:100%; }

.best-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
  font-family:var(--orb);
  font-size:11px;
}
#best-disp { color:var(--lime); font-weight:700; font-size:15px; }

.wallet-bar {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:8px 18px;
  border:1px solid rgba(122,92,255,0.15);
  border-radius:22px;
  background:rgba(122,92,255,0.05);
  font-family:var(--mono);
  font-size:10px;
  color:rgba(122,92,255,0.45);
}
.w-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 8px var(--purple);
  animation:wdot 2s infinite;
}
@keyframes wdot {
  0%,100% { opacity:1; }
  50%  { opacity:0.35; }
}

/* ── Game Over ───────────────────────────────────── */
.big-title {
  font-family:var(--orb);
  font-size:46px;
  font-weight:900;
  color:var(--text);
  line-height:1.1;
  letter-spacing:4px;
  text-shadow:0 0 30px rgba(255,45,166,0.4);
  margin-bottom:30px;
}
.big-title.sm { font-size:52px; }

.score-row {
  display:flex;
  gap:36px;
  justify-content:center;
  margin-bottom:22px;
}
.score-val {
  font-family:var(--orb);
  font-size:38px;
  font-weight:900;
}
.score-val.c { color:var(--cyan); text-shadow:0 0 20px var(--cyan); }
.score-val.p { color:var(--purple); text-shadow:0 0 20px var(--purple); }

.record {
  font-family:var(--orb);
  font-size:13px;
  letter-spacing:3px;
  color:var(--lime);
  text-shadow:0 0 14px var(--lime);
  padding:8px 20px;
  border:1px solid rgba(199,255,77,0.3);
  border-radius:22px;
  background:rgba(199,255,77,0.05);
  margin-bottom:22px;
  animation:rpulse 1.2s ease-in-out infinite;
}
.record.hidden {display:none }
@keyframes rpulse {
  0%,100% { box-shadow:0 0 10px rgba(199,255,77,0.2); }
  50%  { box-shadow:0 0 28px rgba(199,255,77,0.45); }
}

/* ── Sector Flash ────────────────────────────────── */
#sf {
  position:fixed; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(5px);
  z-index:40;
  transition: opacity 0.25s ease;
  pointer-events:none;
}
#sf:not(.hidden) { animation:sfshow 2.6s ease forwards; }
@keyframes sfshow {
  0%   { opacity:0; }
  12%  { opacity:1; }
  78%  { opacity:1; }
  100% { opacity:0; }
}
.sf-inner { text-align:center; }
#sf-lbl {
  font-family:var(--orb);
  font-size:11px;
  letter-spacing:8px;
  color:rgba(0,245,255,0.5);
  margin-bottom:8px;
}
#sf-num {
  font-family:var(--orb);
  font-size:120px;
  font-weight:900;
  color:var(--text);
  line-height:1;
  letter-spacing:20px;
  text-shadow:0 0 60px rgba(0,245,255,0.55);
}
#sf-sub {
  font-family:var(--mono);
  font-size:13px;
  color:rgba(0,245,255,0.45);
  letter-spacing:3px;
  margin-top:14px;
}

/* ── Overload Banner ─────────────────────────────── */
#overload {
  position:fixed; inset:0;
  display:flex; align-items:center; 
  justify-content:center;
  transition: opacity 0.25s ease;
  pointer-events:none; z-index:41;
}
#overload:not(.hidden) { animation:olshow 0.6s ease; }
@keyframes olshow {
  0%,100% { opacity:0; }
  40%,60% { opacity:1; }
}
.ol-inner {
  font-family:var(--orb);
  font-size:26px;
  font-weight:900;
  letter-spacing:6px;
  color:var(--lime);
  text-shadow:0 0 40px var(--lime);
}

/* ── Floating Texts ──────────────────────────────── */
#floats {
  position:fixed; inset:0;
  pointer-events:none; z-index:20;
}
.ft {
  position:absolute;
  font-family:var(--orb);
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  text-shadow:0 0 10px currentColor;
  transform:translateX(-50%);
  white-space:nowrap;
  pointer-events:none;
}

/* ── Flash Overlay ───────────────────────────────── */
#flash {
  position:fixed; inset:0;
  pointer-events:none; z-index:30;
  opacity:0;
}

/* ── Animations ──────────────────────────────────── */
@keyframes blink {
  0%,100% { opacity:1; }
  50%  { opacity:0.2; }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width:580px) {
  .logo-top { font-size:34px; letter-spacing:8px; }
  .logo-bot  { font-size:52px; letter-spacing:6px; }
  .ctrl-grid { grid-template-columns:1fr; }
  .panel { padding:30px 22px; }
  .hud-val { font-size:18px; }
  #speed-num { font-size:26px; }
  .q-pip { width:34px; height:34px; font-size:15px; }
  #sf-num { font-size:80px; }
}