:root {
  --night: #0a1428;
  --night2: #122448;
  --cyan: #7fe3ff;
  --ice: #bfefff;
  --teal: #37e6c8;
  --violet: #b48cff;
  --white: #f4f9ff;
  --danger: #ff6b81;
  --font: "Avenir Next", "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--night); font-family: var(--font); }
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font-family: var(--font); cursor: pointer; }

/* ---------- crosshair ---------- */
#crosshair {
  position: absolute; width: 22px; height: 22px; left: 0; top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 20; display: none;
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: var(--cyan); opacity: .9;
}
#crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }
#crosshair::after { left: 0; top: 10px; width: 22px; height: 2px; }
body.playing #crosshair { display: block; }
body.playing { cursor: none; }

/* ---------- frost vignette ---------- */
#frost-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 15; opacity: 0;
  transition: opacity .4s;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(127, 227, 255, .18) 68%, rgba(220, 245, 255, .55) 100%);
}
#frost-vignette::before, #frost-vignette::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(230,250,255,.5) 0 6px, transparent 60px),
    radial-gradient(circle at 88% 8%, rgba(230,250,255,.45) 0 5px, transparent 55px),
    radial-gradient(circle at 5% 85%, rgba(230,250,255,.5) 0 7px, transparent 65px),
    radial-gradient(circle at 92% 90%, rgba(230,250,255,.45) 0 6px, transparent 60px),
    radial-gradient(circle at 20% 2%, rgba(230,250,255,.35) 0 4px, transparent 45px),
    radial-gradient(circle at 75% 97%, rgba(230,250,255,.4) 0 5px, transparent 50px);
  filter: blur(1px);
  animation: frostcreep 5s ease-in-out infinite alternate;
}
#frost-vignette::after {
  animation-duration: 7s; animation-direction: alternate-reverse; opacity: .7;
  transform: scale(1.06);
}
@keyframes frostcreep {
  from { transform: scale(1); opacity: .55; }
  to   { transform: scale(1.12); opacity: 1; }
}

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#wave-banner {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  font-size: clamp(18px, 3.4vw, 34px); font-weight: 700; letter-spacing: .18em;
  color: var(--white); text-shadow: 0 0 18px var(--cyan), 0 2px 6px rgba(0,0,0,.6);
  text-align: center; white-space: nowrap;
}
#score-box {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 14px; text-align: right;
  color: var(--white);
}
#score-label { font-size: 11px; letter-spacing: .3em; color: var(--cyan); }
#score-value { font-size: clamp(20px, 3vw, 32px); font-weight: 800; text-shadow: 0 0 12px rgba(127,227,255,.7); }
#combo-feed { font-size: 13px; font-weight: 700; color: var(--teal); min-height: 60px; }
#combo-feed div { animation: popfade 1.6s forwards; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
@keyframes popfade {
  0% { transform: scale(1.35); opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
#status-box {
  position: absolute; left: 14px; bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}
#health-wrap { display: flex; align-items: center; gap: 8px; }
#health-label { color: var(--white); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-shadow: 0 1px 4px #000; }
#health-bar {
  width: min(240px, 38vw); height: 14px; border-radius: 8px;
  background: rgba(10, 20, 40, .7); border: 1px solid rgba(127,227,255,.5);
  overflow: hidden;
}
#health-fill {
  height: 100%; width: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  transition: width .18s ease-out;
}
#health-fill.hurt { background: linear-gradient(90deg, var(--danger), #ffb1bd); }
#abilities { display: flex; gap: 8px; }
.ability {
  position: relative; width: 58px; height: 58px; border-radius: 12px;
  background: rgba(14, 28, 54, .78); border: 1px solid rgba(127,227,255,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--white); overflow: hidden;
}
.ability .key { font-size: 13px; font-weight: 800; color: var(--cyan); }
.ability .name { font-size: 9px; letter-spacing: .08em; opacity: .85; }
.ability .cooldown {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
  background: rgba(127, 227, 255, .28); pointer-events: none;
}
.ability.ult { border-color: rgba(180, 140, 255, .7); }
.ability.ult.ready { box-shadow: 0 0 16px rgba(180,140,255,.8); animation: ultpulse 1.2s infinite; }
.ability.active { border-color: var(--teal); box-shadow: 0 0 12px rgba(55,230,200,.8); }
@keyframes ultpulse { 50% { box-shadow: 0 0 26px rgba(180,140,255,1); } }
#hint-line {
  position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  color: var(--ice); font-size: 14px; font-weight: 600; letter-spacing: .05em;
  text-shadow: 0 1px 6px #000; text-align: center;
}

/* ---------- touch UI ---------- */
#touch-ui { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
#stick-zone { position: absolute; left: 0; bottom: 0; width: 45%; height: 55%; pointer-events: auto; }
#stick-base {
  position: absolute; left: 70px; bottom: 110px; width: 110px; height: 110px;
  border-radius: 50%; background: rgba(14,28,54,.4); border: 2px solid rgba(127,227,255,.4);
  transform: translate(-50%, 0);
}
#stick-nub {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(127,227,255,.55); transform: translate(-50%, -50%);
}
#touch-buttons {
  position: absolute; right: 10px; bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; pointer-events: auto;
}
.tbtn {
  width: 74px; height: 46px; border-radius: 12px; border: 1px solid rgba(127,227,255,.55);
  background: rgba(14,28,54,.72); color: var(--white); font-weight: 800; font-size: 11px;
  letter-spacing: .06em;
}
.tbtn:active { background: rgba(127,227,255,.4); }
.tbtn.ult { border-color: rgba(180,140,255,.8); }

/* ---------- title / end screens ---------- */
#title-screen, #end-screen {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  overflow: auto;
}
.aurora-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 45% at 20% 0%, rgba(55, 230, 200, .20), transparent 60%),
    radial-gradient(ellipse 80% 40% at 75% 5%, rgba(180, 140, 255, .18), transparent 60%),
    linear-gradient(180deg, rgba(10, 20, 40, .82) 0%, rgba(10, 20, 40, .55) 45%, rgba(10, 20, 40, .88) 100%);
  animation: aurorashift 12s ease-in-out infinite alternate;
}
@keyframes aurorashift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 60px 10px, -50px -8px, 0 0; }
}
.title-inner {
  position: relative; text-align: center; color: var(--white);
  max-width: 640px; padding: 24px 20px; margin: auto;
}
#title-eyebrow { font-size: 12px; letter-spacing: .42em; color: var(--teal); margin-bottom: 10px; }
#game-title {
  font-size: clamp(30px, 6vw, 58px); font-weight: 900; letter-spacing: .06em; line-height: 1.05;
  background: linear-gradient(180deg, #ffffff, var(--ice) 55%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 34px rgba(127, 227, 255, .25);
}
#title-colon { color: var(--violet); -webkit-text-fill-color: var(--violet); }
#title-tag { margin-top: 8px; font-size: clamp(14px, 2vw, 18px); font-style: italic; color: var(--ice); }
#title-brief { margin: 18px auto 0; font-size: 14px; line-height: 1.55; color: #cfe3f5; max-width: 540px; }
#controls-grid {
  margin: 20px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px; max-width: 460px; text-align: left;
}
#controls-grid div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; border-bottom: 1px dashed rgba(127,227,255,.25); padding-bottom: 3px; }
#controls-grid b { color: var(--cyan); font-weight: 700; white-space: nowrap; }
#controls-grid i { color: #a9c4de; font-style: normal; }
#start-button, #restart-button {
  margin-top: 24px; padding: 14px 44px; font-size: 17px; font-weight: 900; letter-spacing: .16em;
  color: var(--night); background: linear-gradient(180deg, var(--ice), var(--cyan));
  border: none; border-radius: 999px;
  box-shadow: 0 0 26px rgba(127, 227, 255, .5), 0 4px 0 rgba(60, 130, 160, .8);
  transition: transform .12s, box-shadow .12s;
}
#start-button:hover, #restart-button:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 40px rgba(127,227,255,.8), 0 6px 0 rgba(60,130,160,.8); }
#start-button:active, #restart-button:active { transform: translateY(2px); }
#title-foot, #end-foot { margin-top: 16px; font-size: 11px; letter-spacing: .2em; color: #7d9bbd; }
#end-title { font-size: clamp(34px, 7vw, 64px); font-weight: 900; letter-spacing: .1em; }
#end-title.win { color: var(--teal); text-shadow: 0 0 30px rgba(55,230,200,.6); }
#end-title.lose { color: var(--danger); text-shadow: 0 0 30px rgba(255,107,129,.5); }
#end-quote { margin-top: 8px; font-style: italic; color: var(--ice); font-size: clamp(14px, 2vw, 18px); }
#end-stats {
  margin: 20px auto 0; display: inline-block; text-align: left; font-size: 14px; line-height: 1.8;
  color: #cfe3f5; background: rgba(14,28,54,.6); border: 1px solid rgba(127,227,255,.3);
  border-radius: 14px; padding: 14px 26px;
}
#end-stats b { color: var(--cyan); float: right; margin-left: 34px; }

#fatal {
  position: absolute; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center;
  color: var(--white); background: var(--night); font-size: 16px; text-align: center; padding: 20px;
}

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  #controls-grid { grid-template-columns: 1fr; }
  #score-box { right: 8px; }
  #title-brief { font-size: 13px; }
  /* keep status readouts top-left on touch, clear of the joystick */
  #status-box { left: 8px; right: 8px; bottom: auto; top: max(44px, env(safe-area-inset-top)); flex-direction: row; align-items: center; justify-content: space-between; }
  #health-bar { width: 30vw; }
  #abilities { gap: 5px; }
  .ability { width: 42px; height: 42px; border-radius: 10px; }
  .ability .key { font-size: 11px; }
  .ability .name { font-size: 8px; }
}
body.touch #hint-line { display: none; }
body.touch #crosshair { display: none !important; }