* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0e1a;
  --neon: #39e6ff;
  --accent: #ff4fd8;
  --warn: #ffd23f;
  --text: #e8f6ff;
}

html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none; }

#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px;
  background: rgba(10, 14, 26, 0.82); text-align: center; z-index: 10; }
.screen.hidden { display: none; }

.logo { font-size: clamp(2.6rem, 10vw, 5rem); letter-spacing: 0.12em; color: var(--neon);
  text-shadow: 0 0 18px var(--neon), 0 0 60px rgba(57, 230, 255, 0.4); }
.logo span { color: var(--accent); text-shadow: 0 0 18px var(--accent); }

.tagline { opacity: 0.85; max-width: 30em; }
.best { color: var(--warn); }
.hint { font-size: 0.8rem; opacity: 0.6; margin-top: 12px; }

.btn { font: inherit; font-size: 1.15rem; font-weight: 700; padding: 14px 34px;
  min-width: min(78vw, 300px); border: 2px solid var(--neon); border-radius: 12px;
  background: transparent; color: var(--neon); cursor: pointer;
  text-shadow: 0 0 8px currentColor; }
.btn.primary { background: var(--neon); color: var(--bg); text-shadow: none;
  box-shadow: 0 0 24px rgba(57, 230, 255, 0.5); }
.btn.small { font-size: 0.9rem; padding: 8px 18px; min-width: 0; opacity: 0.8; }
.btn:active { transform: scale(0.96); }
.btn:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }

.result { font-size: 1.4rem; }
.result strong { color: var(--accent); font-size: 1.8rem; }

#form-name { display: flex; flex-direction: column; gap: 10px; align-items: center; }
#input-name { font: inherit; font-size: 1.2rem; text-align: center; padding: 12px;
  width: min(78vw, 300px); border-radius: 12px; border: 2px solid var(--neon);
  background: rgba(57, 230, 255, 0.08); color: var(--text); }
.status { min-height: 1.4em; color: var(--warn); }

.scores { list-style: none; width: min(88vw, 420px); max-height: 30vh; overflow-y: auto;
  border: 1px solid rgba(57, 230, 255, 0.3); border-radius: 12px; padding: 8px 14px; }
.scores li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px;
  border-bottom: 1px dashed rgba(57, 230, 255, 0.15); font-variant-numeric: tabular-nums; }
.scores li:last-child { border-bottom: none; }
.scores .pts { color: var(--warn); font-weight: 700; }
.scores .meta { opacity: 0.6; font-size: 0.8rem; }
.scores .empty { justify-content: center; opacity: 0.6; }

h2 { color: var(--neon); } h3 { color: var(--accent); font-size: 1rem; }

#screen-start { background: linear-gradient(rgba(10, 14, 26, 0.78), rgba(10, 14, 26, 0.78)),
  url("assets/hero.jpg") center/cover no-repeat; }
#screen-over, #screen-board { background: linear-gradient(rgba(10, 14, 26, 0.88), rgba(10, 14, 26, 0.88)),
  url("assets/bg-deepzone.jpg") center/cover no-repeat; }

.badge { height: 2.2em; vertical-align: middle; margin-right: 0.4em; }

#vega-toast { position: fixed; left: 16px; bottom: 16px; display: flex; gap: 10px;
  align-items: center; max-width: min(80vw, 380px); padding: 10px 14px; z-index: 20;
  background: rgba(10, 14, 26, 0.9); border: 1px solid var(--neon); border-radius: 12px; }
#vega-toast.hidden { display: none; }
#vega-toast img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
#vega-toast p { font-size: 0.9rem; text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .logo, .btn { text-shadow: none; box-shadow: none; }
}

/* Ton-Toggle waehrend des Spiels (ueber dem Canvas, unter den Screens) */
.sound-game { position: fixed; top: 46px; right: 12px; z-index: 5;
  font-size: 1.15rem; padding: 8px 12px; border: 2px solid var(--neon);
  border-radius: 10px; background: rgba(10, 14, 26, 0.7); color: var(--neon);
  cursor: pointer; }
.sound-game.hidden { display: none; }
.sound-game:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }