/* HALO DRIFT — Neon-Void v2 */
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('fonts/SpaceGrotesk-500-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('fonts/SpaceGrotesk-700-normal-latin.woff2') format('woff2'); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: #04060d;
  color: #eef2ff;
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#game { position: fixed; inset: 0; display: block; }

/* Vignette über allem Canvas, unter UI */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 95% at 50% 42%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* HUD */
#hud { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 5; }
#hudScore { font-size: clamp(1.7rem, 5.5vw, 2.6rem); font-weight: 700; letter-spacing: .05em; text-shadow: 0 0 24px rgba(34,211,238,.6), 0 2px 0 rgba(0,0,0,.4); font-variant-numeric: tabular-nums; transition: transform .1s; }
#hudScore.pop { transform: scale(1.08); }
#hudScore.pb { color: #fbbf24; text-shadow: 0 0 26px rgba(251,191,36,.8), 0 2px 0 rgba(0,0,0,.4); }
#hudCombo { min-height: 1.35em; font-weight: 700; font-size: 1.05rem; color: #e879f9; text-shadow: 0 0 16px rgba(232,121,249,.7); transition: transform .12s; letter-spacing: .08em; }
#hudCombo.pop { transform: scale(1.4); }
#hudShields { margin-top: 2px; letter-spacing: .3em; font-size: 1rem; filter: drop-shadow(0 0 7px rgba(34,211,238,.8)); }
#hudOverdrive { width: min(230px, 52vw); height: 5px; margin-top: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 4px rgba(0,0,0,.6); }
#hudOverdrive i { display: block; height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #22d3ee, #a855f7, #e879f9); transition: width .15s; box-shadow: 0 0 14px rgba(168,85,247,.8); }
#hudOverdrive.full i { animation: odPulse .5s ease-in-out infinite alternate; }
@keyframes odPulse { to { filter: brightness(1.6); } }

/* Event-Toast (Wellen-Ansagen, Meilensteine) */
#toast {
  position: fixed; top: 22vh; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none; text-align: center;
  font-weight: 700; letter-spacing: .35em; text-transform: uppercase; font-size: clamp(.9rem, 3.4vw, 1.25rem);
  color: #eef2ff; text-shadow: 0 0 24px rgba(34,211,238,.9);
  opacity: 0; transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translateX(-50%) scale(1.06); }

/* Spielfeld-Legende (erste Sekunden jedes Runs) */
#runLegend {
  position: fixed; bottom: 11vh; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none; max-width: calc(100vw - 2rem); text-align: center;
  color: #64748b; font-weight: 500; font-size: .78rem; letter-spacing: .04em;
  background: rgba(8,12,26,.6); border: 1px solid rgba(148,163,200,.12);
  border-radius: 99px; padding: .45rem 1.1rem; backdrop-filter: blur(8px);
}
#runLegend b { color: #94a3c8; }

/* Hilfe-Panel */
#help { text-align: left; }
#help h2 { text-align: center; }
.helpBody { margin-top: .8rem; }
.helpBody p { color: #94a3c8; font-size: .86rem; line-height: 1.6; margin-bottom: .7rem; font-weight: 500; }
.helpBody b { color: #eef2ff; }
.helpBody kbd { font-family: ui-monospace, Menlo, monospace; font-size: .74rem; border: 1px solid rgba(148,163,200,.3); border-radius: .3rem; padding: 0 .3rem; color: #eef2ff; }

/* Gesten-Hinweis (nur allererster Run) */
#gestureHint {
  position: fixed; bottom: 18vh; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none; display: flex; gap: .8rem; align-items: center;
  color: #94a3c8; font-weight: 700; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(34,211,238,.5);
  animation: hintFloat 1.6s ease-in-out infinite alternate;
}
#gestureHint span { color: #22d3ee; font-size: 1.3rem; animation: hintArrow 1.1s ease-in-out infinite alternate; }
#gestureHint span:last-child { animation-delay: .55s; }
@keyframes hintFloat { to { transform: translateX(-50%) translateY(-6px); } }
@keyframes hintArrow { from { opacity: .3; } to { opacity: 1; } }

/* Panels */
.panel {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(30rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 3rem); overflow-y: auto;
  text-align: center; z-index: 10;
  background: rgba(8, 12, 26, .78);
  border: 1px solid rgba(148,163,200,.16);
  border-radius: 1.5rem; padding: 2rem 1.6rem;
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 30px 90px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(34,211,238,.07), 0 0 80px -30px rgba(168,85,247,.35);
  animation: panelIn .4s cubic-bezier(.2,.95,.3,1.15);
}
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }
.hidden { display: none !important; }

h1 { font-size: clamp(2.3rem, 9.5vw, 3.6rem); font-weight: 700; letter-spacing: .14em; }
h1 .halo { background: linear-gradient(100deg, #22d3ee, #3b82f6 50%, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(59,130,246,.5)); }
h2 { font-size: 1.45rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: .04em; }
.tag { color: #94a3c8; margin: .7rem 0 1.5rem; line-height: 1.55; font-weight: 500; }
.hint { color: #64748b; font-size: .76rem; margin-top: 1rem; line-height: 1.55; font-weight: 500; }

button {
  display: block; width: 100%; margin: .45rem 0; padding: .85rem 1.2rem;
  font: inherit; font-weight: 700; letter-spacing: .04em; color: #eef2ff; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,200,.24);
  border-radius: 1rem; transition: transform .12s, border-color .2s, box-shadow .2s;
}
button:hover, button:focus-visible { border-color: #22d3ee; box-shadow: 0 0 28px -8px rgba(34,211,238,.9); transform: translateY(-1px); }
button.big {
  font-size: 1.18rem; padding: 1.05rem 1.2rem; color: #04060d;
  background: linear-gradient(100deg, #22d3ee, #3b82f6 60%, #a855f7);
  border: none; box-shadow: 0 12px 38px -10px rgba(59,130,246,.85), inset 0 1px 0 rgba(255,255,255,.35);
}
button.big:hover { filter: brightness(1.12); }

#menuStats, #goStats { color: #94a3c8; font-size: .84rem; margin-top: 1rem; line-height: 1.75; font-weight: 500; }
#menuStats b, #goStats b { color: #eef2ff; }
#goScore { font-size: clamp(2.6rem, 11vw, 4rem); font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(34,211,238,.7); letter-spacing: .03em; }
#goDelta { font-weight: 700; margin: .3rem 0 1rem; min-height: 1.4em; }
#goDelta.pb { color: #fbbf24; text-shadow: 0 0 20px rgba(251,191,36,.8); animation: pbGlow 1s ease-in-out infinite alternate; }
@keyframes pbGlow { to { text-shadow: 0 0 36px rgba(251,191,36,1); } }
#goDelta.close { color: #e879f9; }

/* Relics */
#relicChoices { display: grid; gap: .6rem; margin-top: .9rem; }
.relic { text-align: left; display: flex; gap: .85rem; align-items: center; }
.relic b { display: block; font-size: 1rem; letter-spacing: .02em; }
.relic span { display: block; color: #94a3c8; font-size: .8rem; line-height: 1.4; font-weight: 500; }
.relic .ico { font-size: 1.7rem; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(34,211,238,.7)); }
.relic:hover .ico { filter: drop-shadow(0 0 16px rgba(232,121,249,.9)); }

/* Menü-Zweitreihe + Trophäen + Statistik */
.menuRow2 { display: grid; grid-template-columns: 1fr 1fr auto; gap: .45rem; }
.menuRow2 button { margin: .45rem 0; }
#trophyGrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .8rem 0; max-height: 46vh; overflow-y: auto; }
.trophy { border: 1px solid rgba(148,163,200,.14); border-radius: .8rem; padding: .6rem .5rem; opacity: .38; }
.trophy.got { opacity: 1; border-color: rgba(251,191,36,.4); box-shadow: 0 0 18px -8px rgba(251,191,36,.6); }
.trophy .ti { font-size: 1.4rem; display: block; }
.trophy b { display: block; font-size: .78rem; margin: .2rem 0 .1rem; }
.trophy span:last-child { display: block; color: #64748b; font-size: .66rem; line-height: 1.3; font-weight: 500; }
#statRows div { display: flex; justify-content: space-between; padding: .35rem .2rem; border-bottom: 1px solid rgba(148,163,200,.08); font-size: .85rem; color: #94a3c8; }
#statRows b { color: #eef2ff; }

/* Modus-Karten */
#modeRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin: .2rem 0 .7rem; }
.modeCard {
  margin: 0; padding: .55rem .3rem .5rem; border-radius: .8rem; font-size: .68rem; font-weight: 700;
  display: flex; flex-direction: column; gap: .15rem; align-items: center; line-height: 1.25;
}
.modeCard .mi { font-size: 1.25rem; filter: drop-shadow(0 0 8px rgba(34,211,238,.6)); }
.modeCard .mpb { color: #64748b; font-weight: 500; font-size: .62rem; }
.modeCard.sel { border-color: #22d3ee; box-shadow: 0 0 20px -6px rgba(34,211,238,.8); background: rgba(34,211,238,.08); }
.modeCard.locked { opacity: .45; }
.modeCard.locked .mi { filter: grayscale(1); }

/* Settings */
.setRow { text-align: left; margin: .9rem 0 .3rem; }
.setRow label { display: block; color: #94a3c8; font-size: .85rem; font-weight: 500; margin-bottom: .4rem; }
.setRow b { color: #eef2ff; }
input[type=range] { width: 100%; accent-color: #22d3ee; }
.setToggle { display: flex; gap: .6rem; align-items: center; text-align: left; color: #94a3c8; font-size: .88rem; font-weight: 500; margin: .55rem 0; cursor: pointer; }
.setToggle input { width: 1.05rem; height: 1.05rem; accent-color: #22d3ee; }

/* Pause-Button im Run */
#btnPause {
  position: fixed; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 7;
  width: 2.6rem; height: 2.6rem; margin: 0; padding: 0; border-radius: 50%;
  font-size: 1rem; display: grid; place-items: center;
  background: rgba(8,12,26,.6); border: 1px solid rgba(148,163,200,.2);
}

footer {
  position: fixed; bottom: max(6px, env(safe-area-inset-bottom)); left: 0; right: 0;
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  color: #475569; font-size: .67rem; z-index: 4; pointer-events: none; font-weight: 500;
}
footer #soundToggle { pointer-events: auto; cursor: pointer; }
footer #soundToggle:hover { color: #94a3c8; }