/* DRIFT — HUD & screens */
:root {
  --navy: #05070f;
  --ink: #0c0e24;
  --teal: #37f5e0;
  --magenta: #ff4fd0;
  --gold: #ffc961;
  --text: #cfe3ee;
  --display: "Futura", "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;             /* no pull-to-refresh / rubber-band */
  background: var(--navy);
  color: var(--text);
  font-family: var(--display);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#scene {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair;
  touch-action: none;                    /* no scroll/zoom gestures over the play surface */
}

/* on-screen virtual joystick (touch only) */
#touch-stick { position: fixed; z-index: 6; width: 0; height: 0; pointer-events: none; display: none; }
#touch-stick.on { display: block; }
#touch-base {
  position: absolute; left: 0; top: 0;
  width: calc(var(--r, 130px) * 2); height: calc(var(--r, 130px) * 2);
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid rgba(55, 245, 224, 0.26);
  background: radial-gradient(circle, rgba(55, 245, 224, 0.07), rgba(55, 245, 224, 0) 70%);
}
#touch-nub {
  position: absolute; left: 0; top: 0;
  width: 62px; height: 62px;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid rgba(55, 245, 224, 0.7);
  background: rgba(55, 245, 224, 0.16);
  box-shadow: 0 0 18px rgba(55, 245, 224, 0.4);
}

.hidden { display: none !important; }

/* atmosphere overlays */
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(3, 4, 12, 0.55) 100%);
}
#flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse at center, rgba(255, 79, 208, 0.28), rgba(255, 40, 90, 0.42));
  opacity: 0; transition: opacity 0.6s ease-out;
}
#flash.on { opacity: 1; transition: opacity 0.03s; }

/* ============ HUD ============ */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 4; }

.hud-corner { position: absolute; }
.hud-tl { top: calc(22px + env(safe-area-inset-top)); left: calc(26px + env(safe-area-inset-left)); }
.hud-tr { top: calc(22px + env(safe-area-inset-top)); right: calc(26px + env(safe-area-inset-right)); text-align: right; }
.hud-bl { bottom: calc(24px + env(safe-area-inset-bottom)); left: calc(26px + env(safe-area-inset-left)); }

.hud-label {
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(207, 227, 238, 0.55); margin-bottom: 4px;
}
.hud-big {
  font-family: var(--mono); font-size: 30px; font-weight: 600;
  color: var(--text); text-shadow: 0 0 14px rgba(55, 245, 224, 0.35);
  font-variant-numeric: tabular-nums;
}
.hud-tr .hud-big { color: var(--gold); text-shadow: 0 0 14px rgba(255, 201, 97, 0.3); }

/* shield pips */
#hud-shield { display: flex; gap: 9px; padding-top: 4px; }
.pip {
  width: 13px; height: 13px; transform: rotate(45deg);
  background: var(--teal); box-shadow: 0 0 10px rgba(55, 245, 224, 0.7);
  transition: background 0.25s, box-shadow 0.25s, opacity 0.25s;
}
.pip.off { background: rgba(207, 227, 238, 0.12); box-shadow: none; }

/* boost bar */
#hud-boost {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: min(260px, 40vw); text-align: center;
}
.boost-track {
  height: 6px; border: 1px solid rgba(55, 245, 224, 0.35);
  background: rgba(10, 14, 34, 0.6); overflow: hidden;
  transform: skewX(-18deg);
}
#boost-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--teal), var(--magenta));
  box-shadow: 0 0 12px rgba(55, 245, 224, 0.6);
  transform-origin: left; transform: scaleX(1);
}

/* score popups */
#popups { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.popup {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  letter-spacing: 0.14em; white-space: nowrap;
  animation: pop 0.9s ease-out forwards;
}
.popup.teal { color: var(--teal); text-shadow: 0 0 10px rgba(55, 245, 224, 0.8); }
.popup.gold { color: var(--gold); text-shadow: 0 0 10px rgba(255, 201, 97, 0.8); }
.popup.magenta { color: var(--magenta); text-shadow: 0 0 10px rgba(255, 79, 208, 0.8); }
@keyframes pop {
  0%   { opacity: 0; margin-top: 0; scale: 0.6; }
  12%  { opacity: 1; scale: 1.15; }
  25%  { scale: 1; }
  100% { opacity: 0; margin-top: -70px; }
}

/* ============ screens ============ */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(6, 8, 20, 0.25), rgba(4, 5, 14, 0.78));
  backdrop-filter: blur(2px);
}
.panel { text-align: center; padding: 40px; animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.logo {
  font-size: clamp(64px, 16vw, 148px); font-weight: 700;
  letter-spacing: 0.28em; margin-right: -0.28em; line-height: 1;
  background: linear-gradient(100deg, var(--teal) 15%, #9de8ff 40%, var(--magenta) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(55, 245, 224, 0.35));
}
.tagline {
  margin: 10px 0 34px; font-size: 14px; letter-spacing: 0.5em; margin-right: -0.5em;
  text-transform: uppercase; color: rgba(207, 227, 238, 0.75);
}

.btn {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: 0.4em; padding: 15px 44px 15px 54px;
  color: var(--navy); background: var(--teal); border: none; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: 0 0 30px rgba(55, 245, 224, 0.45);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn:hover { transform: scale(1.06); background: #8ffff1; box-shadow: 0 0 44px rgba(55, 245, 224, 0.7); }
.btn:active { transform: scale(0.98); }

.controls-grid {
  display: grid; grid-template-columns: auto auto; gap: 7px 20px;
  justify-content: center; margin-top: 36px; font-size: 12px;
}
.controls-grid span {
  text-align: right; text-transform: uppercase; letter-spacing: 0.3em;
  color: rgba(207, 227, 238, 0.45);
}
.controls-grid b { text-align: left; color: var(--text); font-weight: 600; letter-spacing: 0.06em; }

.fineprint { margin-top: 22px; font-size: 12px; letter-spacing: 0.16em; color: rgba(207, 227, 238, 0.6); }
.fineprint.dim { font-size: 11px; color: rgba(207, 227, 238, 0.4); }
.fineprint b { color: var(--teal); }
.mono { font-family: var(--mono); }

.over-title {
  font-size: clamp(30px, 6vw, 52px); font-weight: 700;
  letter-spacing: 0.34em; margin-right: -0.34em; color: var(--magenta);
  text-shadow: 0 0 30px rgba(255, 79, 208, 0.5); margin-bottom: 26px;
}
.over-score {
  font-family: var(--mono); font-size: clamp(44px, 9vw, 76px); font-weight: 700;
  color: var(--gold); text-shadow: 0 0 26px rgba(255, 201, 97, 0.4);
  margin-bottom: 6px;
}
.record {
  display: inline-block; margin: 12px 0 4px; padding: 5px 16px;
  font-size: 12px; letter-spacing: 0.4em; color: var(--navy);
  background: var(--gold); box-shadow: 0 0 22px rgba(255, 201, 97, 0.6);
  animation: blink-rec 0.9s steps(2) infinite;
}
@keyframes blink-rec { 50% { opacity: 0.55; } }
#screen-over .btn { margin-top: 24px; }
#over-seed { color: var(--gold); font-family: var(--mono); }

.panel.small .over-title { color: var(--teal); text-shadow: 0 0 30px rgba(55, 245, 224, 0.4); }

/* ============ phase 3: drone indicators, ion storm ============ */
#drone-arrows { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.darrow {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  display: none; will-change: transform;
}
.darrow.on { display: block; }
.darrow svg { width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(255, 47, 77, 0.9)); }
.darrow-label {
  position: absolute; top: 36px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: #ff2f4d; white-space: nowrap;
}
@keyframes darrow-pulse { 50% { opacity: 0.45; } }
.darrow.on svg { animation: darrow-pulse 0.7s ease-in-out infinite; }

/* ============ phase 2: combat / combo / power-ups / hangar ============ */

/* heat bar (stacked under boost) */
.heat-label { margin-top: 7px; }
.heat-track { border-color: rgba(255, 201, 97, 0.35); }
#heat-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold), #ff5a3c);
  box-shadow: 0 0 12px rgba(255, 120, 60, 0.55);
  transform-origin: left; transform: scaleX(0);
}
.heat-track.hot { animation: hot-blink 0.35s steps(2) infinite; border-color: #ff5a3c; }
@keyframes hot-blink { 50% { box-shadow: 0 0 16px rgba(255, 90, 60, 0.9); } }

/* combo multiplier, center-bottom above the bars */
#hud-combo {
  position: absolute; bottom: calc(86px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  text-align: center; opacity: 0; transition: opacity 0.25s;
}
#hud-combo.on { opacity: 1; }
#combo-mult {
  font-family: var(--mono); font-size: 30px; font-weight: 700;
  color: var(--teal); text-shadow: 0 0 16px rgba(55, 245, 224, 0.6);
}
#hud-combo.high #combo-mult { color: var(--magenta); text-shadow: 0 0 20px rgba(255, 79, 208, 0.8); }
.combo-track {
  width: 90px; height: 3px; margin: 4px auto 0;
  background: rgba(207, 227, 238, 0.14);
}
#combo-fill {
  height: 100%; background: currentColor; color: var(--teal);
  transform-origin: left;
}
#hud-combo.high #combo-fill { color: var(--magenta); }

/* screen-edge glow that swells with the combo */
#combo-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
  box-shadow: inset 0 0 120px rgba(55, 245, 224, 0.55), inset 0 0 40px rgba(255, 79, 208, 0.3);
  transition: opacity 0.4s;
}

/* active power-up chips, under the velocity readout */
#chips { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.chip {
  font-size: 10px; letter-spacing: 0.28em; padding: 3px 8px 4px;
  border: 1px solid; background: rgba(10, 14, 34, 0.65); position: relative; overflow: hidden;
}
.chip .chip-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; }
.chip.teal { color: var(--teal); border-color: rgba(55, 245, 224, 0.5); }
.chip.blue { color: #7ab8ff; border-color: rgba(122, 184, 255, 0.5); }
.chip.gold { color: var(--gold); border-color: rgba(255, 201, 97, 0.5); }
.chip.magenta { color: var(--magenta); border-color: rgba(255, 79, 208, 0.5); }
.popup.blue { color: #7ab8ff; text-shadow: 0 0 10px rgba(122, 184, 255, 0.8); }

/* title buttons + shards */
.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-alt {
  background: transparent; color: var(--teal);
  border: 1px solid rgba(55, 245, 224, 0.55); box-shadow: none;
}
.btn-alt:hover { background: rgba(55, 245, 224, 0.12); box-shadow: 0 0 22px rgba(55, 245, 224, 0.3); }
.shards { color: var(--gold); }
.shards::before { content: '◆ '; }
.mode-tag {
  display: inline-block; margin-bottom: 18px; padding: 4px 14px;
  font-size: 11px; letter-spacing: 0.4em; color: var(--navy);
  background: #7ab8ff; box-shadow: 0 0 18px rgba(122, 184, 255, 0.5);
}

/* hangar */
.hangar {
  position: absolute; right: max(3vw, 18px); top: 50%; transform: translateY(-50%);
  width: min(330px, 92vw); max-height: 86vh; overflow-y: auto;
  background: rgba(7, 10, 26, 0.92); border: 1px solid rgba(55, 245, 224, 0.3);
  padding: 18px 20px 16px; text-align: left;
  animation: rise 0.4s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.hangar-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.hangar-title { font-size: 16px; font-weight: 700; letter-spacing: 0.4em; color: var(--teal); }
.hangar-head .shards { margin-left: auto; font-size: 13px; }
.hangar-close {
  background: none; border: none; color: rgba(207, 227, 238, 0.6);
  font-size: 15px; cursor: pointer; padding: 2px 6px;
}
.hangar-close:hover { color: var(--text); }
.upg { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(207, 227, 238, 0.08); }
.upg-info { flex: 1; min-width: 0; }
.upg-name { font-size: 12px; letter-spacing: 0.22em; }
.upg-desc { font-size: 10px; color: rgba(207, 227, 238, 0.5); letter-spacing: 0.08em; margin-top: 2px; }
.upg-tiers { display: flex; gap: 4px; margin-top: 4px; }
.tier { width: 16px; height: 5px; background: rgba(207, 227, 238, 0.14); }
.tier.own { background: var(--teal); box-shadow: 0 0 6px rgba(55, 245, 224, 0.6); }
.upg-buy {
  font-family: var(--mono); font-size: 11px; padding: 6px 10px; cursor: pointer;
  color: var(--gold); background: rgba(255, 201, 97, 0.08);
  border: 1px solid rgba(255, 201, 97, 0.45); white-space: nowrap;
}
.upg-buy:hover:not(:disabled) { background: rgba(255, 201, 97, 0.2); }
.upg-buy:disabled { opacity: 0.35; cursor: default; }
.upg-buy.maxed { color: var(--teal); border-color: rgba(55, 245, 224, 0.4); background: none; }
.hangar-sub { font-size: 11px; letter-spacing: 0.34em; color: rgba(207, 227, 238, 0.5); margin: 14px 0 8px; }
#hangar-schemes { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 58px; padding: 6px 0 5px; cursor: pointer; text-align: center;
  background: rgba(10, 14, 34, 0.6); border: 1px solid rgba(207, 227, 238, 0.15);
}
.swatch .sw-colors { display: flex; height: 14px; margin: 0 8px 5px; }
.swatch .sw-colors i { flex: 1; }
.swatch .sw-name { font-size: 8.5px; letter-spacing: 0.18em; color: rgba(207, 227, 238, 0.7); }
.swatch .sw-cost { font-family: var(--mono); font-size: 9px; color: var(--gold); }
.swatch.sel { border-color: var(--teal); box-shadow: 0 0 12px rgba(55, 245, 224, 0.4); }
.swatch:hover { border-color: rgba(207, 227, 238, 0.5); }

@media (max-width: 900px) {
  .hangar { right: 50%; transform: translate(50%, -50%); }
}
@media (max-width: 640px) {
  .hud-big { font-size: 22px; }
  .hud-tl { top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); }
  .hud-tr { top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); }
  .hud-bl { bottom: calc(16px + env(safe-area-inset-bottom)); left: calc(14px + env(safe-area-inset-left)); }
  #hud-boost { bottom: calc(16px + env(safe-area-inset-bottom)); }
  #hud-combo { bottom: calc(92px + env(safe-area-inset-bottom)); }
}