@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600&family=JetBrains+Mono:wght@200;300;400&display=swap');

/* === BASE === */
:root {
  --bg: #030308;
  --gold: #8eaac8;
  --gold-dim: rgba(142,170,200,0.4);
  --gold-glow: rgba(142,170,200,0.15);
  --text: rgba(215,225,245,0.96);
  --text-dim: rgba(184,198,222,0.8);
  --text-faint: rgba(158,172,198,0.66);
  --cold-bright: rgba(168,214,255,0.95);
  --cold-glow: rgba(110,190,255,0.3);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

/* === TITLE SCREEN === */
#title-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: auto; transition: opacity 0.8s ease;
}
#title-screen.hidden { opacity: 0; pointer-events: none; }

.title-main {
  font-family: 'Chakra Petch', sans-serif; font-weight: 300;
  font-size: clamp(32px, 5.5vw, 68px); letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(216,230,252,0.98);
  text-shadow: 0 0 60px rgba(140,190,240,0.28), 0 0 140px rgba(110,170,235,0.14);
  margin-bottom: 6px; text-align: center;
}
.title-sub {
  font-family: 'JetBrains Mono', monospace; font-weight: 200;
  font-size: clamp(10px, 1.2vw, 14px); letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(188,210,236,0.82); margin-bottom: 60px;
}
.title-btn {
  font-family: 'Chakra Petch', sans-serif; font-weight: 400;
  font-size: clamp(13px, 1.5vw, 17px); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); background: none; border: none;
  padding: 14px 48px; cursor: pointer; position: relative;
  transition: all 0.4s ease; margin: 8px 0;
}
.title-btn::before, .title-btn::after {
  content: ''; position: absolute; transition: all 0.4s ease;
}
.title-btn::before {
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.title-btn:hover { color: rgba(220,200,150,1); }
.title-btn:hover::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.title-instruct {
  font-family: 'JetBrains Mono', monospace; font-weight: 200;
  font-size: 11px; letter-spacing: 0.3em; color: rgba(165,188,216,0.8);
  margin-top: 50px; text-align: center; line-height: 2;
}

/* === RECORDS PANEL === */
#records-panel {
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,3,8,0.92); backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
#records-panel.visible { opacity: 1; pointer-events: auto; }
.records-inner { text-align: center; max-width: 560px; width: 90%; }
.records-title {
  font-family: 'Chakra Petch', sans-serif; font-weight: 300;
  font-size: 28px; color: var(--gold); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 30px;
}
.records-table {
  width: 100%; border-collapse: collapse; margin-bottom: 30px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 300;
}
.records-table th {
  color: var(--gold-dim); letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 300; padding: 8px 6px; border-bottom: 1px solid rgba(200,164,78,0.15);
  font-size: 10px;
}
.records-table td {
  color: var(--text-dim); padding: 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.records-table .rank { color: var(--gold); }
.records-table .outcome-escaped { color: rgba(80,200,180,0.8); }
.records-table .outcome-collision { color: rgba(255,120,80,0.7); }
.records-table .outcome-destabilized { color: rgba(160,140,200,0.7); }
.records-empty {
  font-family: 'Chakra Petch', sans-serif;
  color: var(--text-faint); font-size: 14px; letter-spacing: 0.15em; margin: 40px 0;
}
.records-actions { display: flex; gap: 20px; justify-content: center; }

/* === HUD === */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud.hidden { display: none; }
#hud-time {
  position: absolute; top: 28px; left: 32px;
  font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 200;
  color: var(--cold-bright); letter-spacing: 0.1em;
  text-shadow: 0 0 24px var(--cold-glow), 0 0 80px rgba(100,160,240,0.15);
}
#hud-speed {
  position: absolute; top: 30px; right: 32px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 300;
  color: rgba(182,198,226,0.9); letter-spacing: 0.08em;
}
#hud-instructions {
  position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 200;
  color: rgba(204,226,255,0.94); letter-spacing: 0.24em; text-transform: uppercase;
  text-shadow: 0 0 18px rgba(95,160,230,0.28);
  white-space: nowrap; transition: opacity 1s ease;
}

/* === MUSIC TOGGLE === */
#music-toggle {
  position: fixed; bottom: 24px; right: 28px; z-index: 300;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint); background: none; border: none;
  cursor: pointer; padding: 6px 10px; transition: color 0.3s;
}
#music-toggle:hover { color: var(--text-dim); }
#music-toggle.active { color: var(--gold-dim); }

/* === CONTROL MODE TOGGLE === */
#control-toggle {
  position: fixed; bottom: 24px; left: 28px; z-index: 340;
  pointer-events: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint); background: none; border: none;
  cursor: pointer; padding: 6px 10px; transition: color 0.3s;
  display: none;
}
#control-toggle:hover { color: var(--text-dim); }
#control-toggle.active { color: var(--gold-dim); }

/* === VIRTUAL JOYSTICK === */
#virtual-joystick {
  position: fixed;
  left: 22px;
  bottom: 64px;
  width: 132px;
  height: 132px;
  z-index: 220;
  pointer-events: none; /* Allow clicks to pass through */
  user-select: none;
  touch-action: none;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#virtual-joystick.visible {
  display: block;
}
#virtual-joystick.active {
  opacity: 1;
}

/* keep the joystick visually minimal: no ring, just arrow */
.vj-base {
  display: none;
}


.vj-arrow {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform-origin: center center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 200;
  color: #00ff88; /* Sci-fi Green */
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.4);
  display: none;
  pointer-events: none;
  letter-spacing: 1px;
}

.vj-arrow-unit {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  line-height: 1;
  user-select: none;
}

#virtual-joystick.active .vj-arrow {
  display: block;
}

  width: 48px;
  height: 48px;
  left: 42px;
  top: 42px;
  border-radius: 50%;
  border: 1px solid rgba(146,206,255,0.55);
  background:
    radial-gradient(circle at 36% 34%, rgba(220,244,255,0.45), rgba(116,180,236,0.2) 40%, rgba(20,48,80,0.42) 78%);
  box-shadow:
    inset 0 0 16px rgba(110,176,235,0.3),
    0 0 16px rgba(96,164,226,0.35);
  transition: transform 0.06s linear;
}

/* === GAME OVER === */
#gameover {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,3,8,0.75); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
}
#gameover.visible { opacity: 1; pointer-events: auto; }
.go-inner { text-align: center; }
.go-title {
  font-family: 'Chakra Petch', sans-serif; font-weight: 300;
  font-size: clamp(28px, 5vw, 56px); letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 12px;
}
.go-title.collision { color: rgba(255,140,80,0.9);
  text-shadow: 0 0 40px rgba(255,100,40,0.3), 0 0 80px rgba(255,60,20,0.15); }
.go-title.escaped { color: rgba(80,210,200,0.9);
  text-shadow: 0 0 40px rgba(50,200,180,0.3), 0 0 80px rgba(30,180,160,0.15); }
.go-title.destabilized { color: rgba(170,150,210,0.9);
  text-shadow: 0 0 40px rgba(140,120,200,0.3); }
.go-stats {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 300;
  color: var(--text-dim); line-height: 2; letter-spacing: 0.08em;
  margin-bottom: 36px;
}
.go-actions { display: flex; gap: 16px; justify-content: center; }

/* === MOBILE ADAPTATION === */
@media (max-width: 900px) {
  .title-main { letter-spacing: 0.14em; }
  .title-sub { letter-spacing: 0.32em; margin-bottom: 42px; }
  .title-instruct { letter-spacing: 0.16em; line-height: 1.8; padding: 0 18px; }

  #hud-time {
    top: 18px;
    left: 14px;
    font-size: 19px;
  }
  #hud-speed {
    top: 21px;
    right: 14px;
    font-size: 11px;
  }
  #hud-instructions {
    bottom: 116px;
    font-size: 9px;
    letter-spacing: 0.12em;
    white-space: normal;
    width: min(92vw, 620px);
    text-align: center;
    line-height: 1.65;
  }

  #music-toggle,
  #control-toggle {
    font-size: 10px;
    letter-spacing: 0.14em;
    bottom: 16px;
  }
  #music-toggle { right: 12px; }
  #control-toggle { left: 12px; }

  #virtual-joystick {
    width: 124px;
    height: 124px;
    left: 10px;
    bottom: 52px;
  }
}