/* THREAD — Neon-Void v1 (gleiche Bildsprache wie HALO DRIFT/POLARITY/GRAVITAS) */
@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; }

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 95% at 50% 46%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* HUD oben links: Score + Timer + Ketten-Qualität. Bewusst nicht mittig, damit nichts
   die Ring-Spielfläche (mittig, viewport-neutral) verdeckt. */
#hud { position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: flex-start; max-width: 50vw; pointer-events: none; z-index: 5; }
#hudScore { font-size: clamp(1.3rem, 4.2vw, 2.1rem); 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); }
#hudChain { min-height: 1.35em; font-weight: 700; font-size: 1.02rem; letter-spacing: .06em; transition: transform .12s; }
#hudChain.pop { transform: scale(1.3); }
#hudQuality { width: min(140px, 34vw); height: 5px; margin-top: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 4px rgba(0,0,0,.6); }
#hudQuality i { display: block; height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #ef4444, #fbbf24, #4ade80); transition: width .1s; }

/* Timer oben rechts (eigene Ecke, gegenüber HUD — beide bewusst außerhalb des Rings) */
#hudTime { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 5; font-weight: 700; font-size: clamp(1.1rem, 3.6vw, 1.7rem); font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(148,163,200,.5); pointer-events: none; }
#hudTime.low { color: #f87171; text-shadow: 0 0 22px rgba(248,113,113,.8); animation: timeLow .5s ease-in-out infinite alternate; }
@keyframes timeLow { to { transform: scale(1.12); } }

#toast {
  position: fixed; top: 20vh; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none; text-align: center;
  font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: clamp(.85rem, 3.2vw, 1.15rem);
  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); }

#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: .76rem; letter-spacing: .03em;
  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; }

#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; }

.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.2rem, 9vw, 3.4rem); font-weight: 700; letter-spacing: .12em; }
h1 .accent { background: linear-gradient(100deg, #22d3ee, #a78bfa 55%, #e879f9); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(167,139,250,.5)); }
h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: .04em; }
.tag { color: #94a3c8; margin: .7rem 0 1.4rem; 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.15rem; padding: 1.05rem 1.2rem; color: #04060d;
  background: linear-gradient(100deg, #22d3ee, #a78bfa 55%, #e879f9);
  border: none; box-shadow: 0 12px 38px -10px rgba(167,139,250,.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.5rem, 10.5vw, 3.8rem); 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; }

.menuRow2 { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.menuRow2 button { margin: .45rem 0; }

/* Pause-Button + Overlay */
#btnPause {
  position: fixed; top: max(58px, calc(env(safe-area-inset-top) + 48px)); right: 12px; z-index: 7;
  width: 2.4rem; height: 2.4rem; margin: 0; padding: 0; border-radius: 50%;
  font-size: .95rem; display: grid; place-items: center;
  background: rgba(8,12,26,.6); border: 1px solid rgba(148,163,200,.2);
}
#autoPause { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(4,6,13,.7); backdrop-filter: blur(6px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 1rem; color: #94a3c8; }

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 a, footer #soundToggle { pointer-events: auto; color: #64748b; text-decoration: none; cursor: pointer; }
footer a:hover, footer #soundToggle:hover { color: #94a3c8; }