:root {
  --bg: #0a0d11;
  --panel: #12171d;
  --panel-2: #1a2129;
  --steel: #7d8b99;
  --cyan: #5ad8ff;
  --violet: #b98bff;
  --orange: #ff9d3f;
  --red: #ff4d6d;
  --white: #eef6fa;
  --text-dim: #8fa3b0;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--white);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chamberWrap {
  position: relative;
  height: 100%;
  aspect-ratio: 480 / 800;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

@media (min-aspect-ratio: 480/800) {
  #chamberWrap { height: 100%; }
}
@media (max-aspect-ratio: 480/800) {
  #chamberWrap { width: 100%; height: auto; }
}

canvas#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: calc(8px + var(--safe-top)) 10px 4px;
  pointer-events: none;
  z-index: 10;
}
.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hud-score {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(90,216,255,0.5);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hud-combo {
  font-size: 13px;
  color: var(--orange);
  font-weight: 700;
}
.hud-charges { display: flex; gap: 4px; }
.hud-charges .charge {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(90,216,255,0.6);
}
.hud-charges .charge.lost { background: rgba(255,255,255,0.12); box-shadow: none; }
.hud-objective {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  text-transform: uppercase;
  text-align: center;
}
.hud-boss { margin-top: 6px; }
.hud-boss-label { font-size: 10px; letter-spacing: 1px; color: var(--violet); text-align: center; text-transform: uppercase; }
.hud-boss-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-top: 2px; }
.hud-boss-fill { height: 100%; background: linear-gradient(90deg, var(--violet), var(--red)); width: 0%; transition: width 0.3s; }

.icon-btn {
  pointer-events: auto;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(20,26,32,0.7);
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
}

/* ---------- Tutorial ---------- */
.tutorial-prompt {
  position: absolute;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  background: rgba(10,14,18,0.9);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: center;
  z-index: 20;
  max-width: 80%;
  pointer-events: none;
}

/* ---------- Routing panel ---------- */
.routing-panel {
  position: absolute;
  bottom: calc(74px + var(--safe-bottom));
  left: 8px; right: 8px;
  display: flex;
  gap: 6px;
  z-index: 10;
}
.channel-meter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(15,20,26,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px 4px;
  color: var(--white);
  font-family: inherit;
  cursor: pointer;
  min-height: 52px;
}
.channel-meter.selected {
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(90,216,255,0.35);
}
.channel-meter[data-channel="orb"].selected { border-color: var(--orange); box-shadow: 0 0 10px rgba(255,157,63,0.35); }
.channel-meter[data-channel="reactorControl"].selected { border-color: var(--violet); box-shadow: 0 0 10px rgba(185,139,255,0.35); }
.channel-icon { font-size: 14px; }
.channel-name { font-size: 8px; letter-spacing: 0.5px; color: var(--text-dim); }
.channel-bar { width: 90%; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.channel-fill { display: block; height: 100%; width: 0%; background: var(--cyan); transition: width 0.2s; }
.channel-meter[data-channel="orb"] .channel-fill { background: var(--orange); }
.channel-meter[data-channel="reactorControl"] .channel-fill { background: var(--violet); }
.channel-tier { font-size: 8px; color: var(--text-dim); }
.channel-meter.ready { animation: pulseReady 1.2s infinite; }
@keyframes pulseReady { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }

/* ---------- Mobile controls ---------- */
.mobile-controls {
  position: absolute;
  bottom: calc(10px + var(--safe-bottom));
  left: 8px; right: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  z-index: 10;
}
.mobile-btn {
  pointer-events: auto;
  flex: 1;
  max-width: 140px;
  padding: 14px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(20,26,32,0.75);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 13px;
}
.mobile-btn.primary {
  background: linear-gradient(180deg, rgba(90,216,255,0.35), rgba(90,216,255,0.1));
  border-color: var(--cyan);
}
@media (min-width: 820px) {
  .mobile-controls { display: none !important; }
}

/* ---------- Screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 20%, #131a21 0%, #05070a 100%);
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  overflow-y: auto;
}
.screen.overlay { background: #05070a; }

.logo-block { text-align: center; margin-bottom: 24px; }
.logo-block h1 {
  font-size: 30px;
  letter-spacing: 4px;
  margin: 0;
  color: var(--white);
  text-shadow: 0 0 20px rgba(90,216,255,0.5);
}
.tagline { color: var(--cyan); font-size: 12px; letter-spacing: 2px; margin-top: 6px; text-transform: uppercase; }

.loading-bar { width: 220px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; margin-top: 20px; }
.loading-bar-fill { height: 100%; width: 40%; background: var(--cyan); animation: loadSlide 1.1s infinite ease-in-out; }
@keyframes loadSlide { 0% { transform: translateX(-100%);} 100% { transform: translateX(350%);} }

.menu-list { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; }
.menu-list button, .primary-btn {
  pointer-events: auto;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(20,26,32,0.8);
  color: var(--white);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
}
.menu-list button:hover, .primary-btn:hover { border-color: var(--cyan); }
.primary-btn { background: linear-gradient(180deg, rgba(90,216,255,0.3), rgba(90,216,255,0.08)); border-color: var(--cyan); width: 100%; max-width: 280px; margin-top: 12px; }
.footer-note { margin-top: 26px; font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }

.screen-header { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; margin-bottom: 14px; }
.back-btn { pointer-events: auto; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--white); border-radius: 6px; padding: 6px 12px; font-size: 16px; cursor: pointer; }
.screen-header h2 { margin: 0; font-size: 18px; letter-spacing: 1px; }

.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 640px;
}
.stage-card {
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stage-card.locked { opacity: 0.4; cursor: not-allowed; }
.stage-card.boss { border-color: var(--violet); }
.stage-card .num { font-size: 11px; color: var(--text-dim); }
.stage-card .name { font-size: 13px; font-weight: 700; }
.stage-card .rank { font-size: 12px; color: var(--cyan); }
.stage-card .medals { display: flex; gap: 4px; margin-top: auto; }
.stage-card .medal { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.stage-card .medal.earned { background: var(--orange); }

.intro-card, .menu-card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 22px;
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.intro-num { color: var(--text-dim); font-size: 12px; letter-spacing: 2px; }
.intro-subtitle { color: var(--text-dim); font-size: 12px; margin-top: -4px; }
.intro-objective { margin-top: 14px; font-size: 13px; text-align: left; }
.intro-secondary { text-align: left; font-size: 12px; color: var(--text-dim); padding-left: 18px; }

.help-content, .settings-content, .stats-content {
  width: 100%; max-width: 460px;
  font-size: 13px;
  line-height: 1.6;
}
.help-content ul { padding-left: 18px; }
.help-content .keys { list-style: none; padding: 0; }
.help-content .keys li { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
kbd { background: var(--panel-2); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 2px 6px; font-size: 11px; }

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  pointer-events: auto;
}
.toggle-row input, .toggle-row select { pointer-events: auto; }

.stats-content .stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }

.rank-display { font-size: 46px; font-weight: 900; color: var(--cyan); text-shadow: 0 0 16px rgba(90,216,255,0.6); margin: 8px 0; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 12px; text-align: left; margin: 12px 0; }
.result-grid .label { color: var(--text-dim); }
.medal-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }
.medal-row .medal-badge { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.medal-row .medal-badge.earned { background: var(--orange); color: #2a1500; }

@media (prefers-reduced-motion: reduce) {
  .loading-bar-fill { animation: none; }
  .channel-meter.ready { animation: none; }
}