@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/baloo2-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --moon-grey: #b9b9c4;
  --moon-dark: #6f6f7c;
  --hazard: #ff7a1a;
  --tesla: #39d7ff;
  --space: #05060a;
  --suit-blue: #2f6bff;
  --suit-yellow: #ffd23f;
  --font: 'Baloo 2', 'Arial Rounded MT Bold', 'Helvetica Rounded', ui-rounded, system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--space); }
body { font-family: var(--font); color: var(--moon-grey); -webkit-user-select: none; user-select: none; }

#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

#hud-top-left { position: absolute; top: 14px; left: 16px; width: min(300px, 42vw); }
.bar-label { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--moon-grey); text-shadow: 0 2px 6px #000; margin-bottom: 3px; }
.rage-label { margin-top: 8px; color: var(--hazard); }
.rage-label #rage-hint { color: var(--moon-dark); font-weight: 600; letter-spacing: 0; }
.bar {
  position: relative; height: 18px; border-radius: 9px;
  background: rgba(10,12,20,.72); border: 2px solid rgba(185,185,196,.35);
  overflow: hidden;
}
.bar > div { height: 100%; border-radius: 6px; transition: width .12s ease-out; }
#health-fill { width: 100%; background: linear-gradient(90deg, #37d67a, #9fe870); }
#health-fill.hurt { background: linear-gradient(90deg, #ff7a1a, #ffb13f); }
#health-fill.critical { background: linear-gradient(90deg, #ff3b30, #ff7a1a); }
#rage-fill { width: 0%; background: linear-gradient(90deg, #ff7a1a, #ff3b6f); }
#rage-bar.full { box-shadow: 0 0 14px var(--hazard); border-color: var(--hazard); animation: ragepulse .6s infinite alternate; }
@keyframes ragepulse { from { box-shadow: 0 0 8px var(--hazard); } to { box-shadow: 0 0 22px var(--hazard); } }
#health-num { position: absolute; inset: 0; text-align: center; font-size: 12px; font-weight: 800; line-height: 15px; color: #fff; text-shadow: 0 1px 3px #000; }

#hud-top-right { position: absolute; top: 14px; right: 16px; text-align: right; }
#score { font-size: 34px; font-weight: 800; color: var(--tesla); text-shadow: 0 0 18px rgba(57,215,255,.5), 0 2px 4px #000; }
#wave-label { font-size: 15px; font-weight: 800; letter-spacing: .1em; color: var(--moon-grey); text-shadow: 0 2px 4px #000; }
#enemies-left { font-size: 12px; color: var(--moon-dark); font-weight: 700; }

#ability-tray { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
.ability {
  position: relative; width: 62px; height: 62px; border-radius: 16px;
  background: rgba(10,12,20,.72); border: 2px solid rgba(185,185,196,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.ability .ab-icon { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 3px #000); }
.ability .ab-key { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--moon-grey); margin-top: 3px; }
.ability .cd { position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background: rgba(57,215,255,.25); }
.ability.ready { border-color: var(--tesla); box-shadow: 0 0 12px rgba(57,215,255,.35); }
.ability.rage-ready { border-color: var(--hazard); box-shadow: 0 0 14px rgba(255,122,26,.6); animation: ragepulse .6s infinite alternate; }

#reticle {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 2px solid var(--tesla); border-radius: 50%;
  box-shadow: 0 0 10px rgba(57,215,255,.6), inset 0 0 8px rgba(57,215,255,.3);
  pointer-events: none;
}
#reticle-dot { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: var(--tesla); border-radius: 50%; }

#banner {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  font-size: clamp(28px, 6vw, 54px); font-weight: 800; letter-spacing: .06em;
  color: var(--suit-yellow); text-shadow: 0 0 24px rgba(255,210,63,.5), 0 4px 8px #000;
  text-align: center; white-space: nowrap;
}
#banner.banner-pop { animation: bannerpop 2.4s ease-out forwards; }
@keyframes bannerpop {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  20% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.04); }
}

#combo-feed { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); text-align: center; }
.combo-line {
  font-size: clamp(18px, 3.4vw, 30px); font-weight: 800; color: var(--tesla);
  text-shadow: 0 0 16px rgba(57,215,255,.55), 0 3px 6px #000;
  animation: combofloat 1.3s ease-out forwards;
}
.combo-line.orange { color: var(--hazard); text-shadow: 0 0 16px rgba(255,122,26,.6), 0 3px 6px #000; }
@keyframes combofloat { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 30% { transform: scale(1); } 100% { opacity: 0; transform: translateY(-34px); } }

#mute-btn {
  position: absolute; bottom: 16px; right: 16px; pointer-events: auto; cursor: pointer;
  width: 44px; height: 44px; border-radius: 12px; font-size: 20px;
  background: rgba(10,12,20,.72); border: 2px solid rgba(185,185,196,.35);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Touch UI ---------- */
#touch-ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
#joystick {
  position: absolute; bottom: 90px; left: 26px; width: 128px; height: 128px;
  border-radius: 50%; background: rgba(10,12,20,.5); border: 2px solid rgba(185,185,196,.4);
  pointer-events: auto; touch-action: none;
}
#joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px;
  border-radius: 50%; background: rgba(57,215,255,.35); border: 2px solid var(--tesla);
}
#touch-buttons { position: absolute; bottom: 90px; right: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; pointer-events: auto; }
.tbtn {
  width: 76px; height: 60px; border-radius: 16px; border: 2px solid rgba(185,185,196,.45);
  background: rgba(10,12,20,.66); color: var(--moon-grey); font-family: var(--font);
  font-size: 15px; font-weight: 800; letter-spacing: .06em; touch-action: none;
}
.tbtn:active { background: rgba(57,215,255,.3); border-color: var(--tesla); }
#tb-rage { border-color: rgba(255,122,26,.6); color: var(--hazard); }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(5,6,10,.25), rgba(5,6,10,.82) 78%);
  padding: 18px;
}
#title-screen { justify-content: flex-start; padding-left: 4vw; }
@media (max-width: 900px) { #title-screen { justify-content: center; padding-left: 18px; } }
.title-card {
  text-align: center; max-width: 620px; width: 100%;
  background: rgba(8,10,18,.78); border: 2px solid rgba(57,215,255,.28);
  border-radius: 28px; padding: clamp(18px, 4vh, 40px) clamp(16px, 4vw, 44px);
  box-shadow: 0 0 60px rgba(57,215,255,.12), 0 20px 60px rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  max-height: 94vh; overflow-y: auto;
}
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .28em; color: var(--tesla); margin-bottom: 8px; }
h1 { font-size: clamp(44px, 9vw, 84px); font-weight: 800; color: #fff; line-height: .95; letter-spacing: .02em; text-shadow: 0 0 30px rgba(57,215,255,.45); }
h2 { font-size: clamp(20px, 4vw, 34px); font-weight: 800; letter-spacing: .3em; color: var(--suit-yellow); margin: 6px 0 12px; text-shadow: 0 0 18px rgba(255,210,63,.4); }
.go-title { color: var(--hazard); text-shadow: 0 0 30px rgba(255,122,26,.5); font-size: clamp(34px, 7vw, 64px); }
.win-title { color: #37d67a; text-shadow: 0 0 30px rgba(55,214,122,.5); font-size: clamp(34px, 7vw, 64px); }
.tagline { font-size: clamp(14px, 2.2vw, 17px); color: var(--moon-grey); margin-bottom: 18px; font-weight: 600; }
.tagline em { color: var(--hazard); font-style: normal; }

.controls-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 auto 20px; max-width: 520px;
}
.controls-grid > div {
  background: rgba(185,185,196,.07); border: 1px solid rgba(185,185,196,.18);
  border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; gap: 2px;
}
.controls-grid b { color: var(--tesla); font-size: 12px; letter-spacing: .04em; }
.controls-grid span { color: var(--moon-dark); font-size: 11px; font-weight: 700; }

.big-btn {
  font-family: var(--font); font-size: clamp(17px, 2.6vw, 22px); font-weight: 800; letter-spacing: .1em;
  color: #081018; background: linear-gradient(180deg, var(--suit-yellow), #f0a500);
  border: none; border-radius: 999px; padding: 14px 42px; cursor: pointer;
  box-shadow: 0 6px 0 #a86e00, 0 12px 30px rgba(255,210,63,.35);
  transition: transform .08s ease, box-shadow .08s ease;
}
.big-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #a86e00, 0 16px 34px rgba(255,210,63,.45); }
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #a86e00, 0 6px 16px rgba(255,210,63,.3); }

.footnote { margin-top: 14px; font-size: 12px; color: var(--moon-dark); font-weight: 600; }

.final-stats { display: flex; justify-content: center; gap: 26px; margin-bottom: 22px; flex-wrap: wrap; }
.final-stats div { font-size: 13px; color: var(--moon-dark); font-weight: 800; letter-spacing: .08em; }
.final-stats b { display: block; font-size: 30px; color: var(--tesla); text-shadow: 0 0 14px rgba(57,215,255,.4); }

.loading-text { font-size: 18px; font-weight: 800; letter-spacing: .2em; color: var(--tesla); animation: loadpulse 1s infinite alternate; }
@keyframes loadpulse { from { opacity: .4; } to { opacity: 1; } }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .controls-grid { grid-template-columns: repeat(2, 1fr); }
  #ability-tray { bottom: 12px; left: 50%; gap: 8px; }
  .ability { width: 52px; height: 52px; border-radius: 13px; }
  #score { font-size: 26px; }
  #hud-top-left { width: 46vw; }
  #combo-feed { top: 28%; }
  #banner { top: 16%; }
}
@media (max-height: 500px) {
  .title-card { padding: 14px 18px; }
  h1 { font-size: 40px; }
  h2 { font-size: 16px; margin: 4px 0 8px; }
  .tagline { margin-bottom: 10px; }
  .controls-grid { margin-bottom: 12px; }
}