/* TELLS — Anti-Prediction Duel v1 */
@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: #05070d;
  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, Read-Level oben mittig — beide außerhalb des Rings, verdecken nichts */
#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: 42vw; 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); }
#hudStreak { 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; }
#hudStreak.pop { transform: scale(1.4); }
#hudLives { margin-top: 2px; letter-spacing: .25em; font-size: 1.05rem; filter: drop-shadow(0 0 7px rgba(232,68,68,.7)); }
#hudRound { margin-top: 3px; font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: #64748b; }

#readWrap { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
#readLabel { font-size: .62rem; font-weight: 700; letter-spacing: .28em; color: #64748b; }
#readBar { width: min(220px, 46vw); height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 4px rgba(0,0,0,.6); }
#readBar i { display: block; height: 100%; width: 20%; border-radius: 99px; background: linear-gradient(90deg, #34d399, #fbbf24, #ef4444); transition: width .3s ease; }

#toast {
  position: fixed; top: 24vh; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none; text-align: center;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: clamp(.78rem, 3vw, 1.05rem);
  color: #eef2ff; text-shadow: 0 0 24px rgba(34,211,238,.9);
  opacity: 0; transition: opacity .25s, transform .25s;
  max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) scale(1.05); }

#runLegend {
  position: fixed; bottom: 10vh; 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: .74rem; letter-spacing: .02em;
  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: .84rem; line-height: 1.6; margin-bottom: .65rem; 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.3rem, 9.5vw, 3.6rem); font-weight: 700; letter-spacing: .16em; }
h1 .tl { background: linear-gradient(100deg, #22d3ee, #e879f9 50%, #fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(232,121,249,.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, #e879f9 60%, #fbbf24);
  border: none; box-shadow: 0 12px 38px -10px rgba(232,121,249,.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; }
#sparkChart { width: 100%; height: 70px; margin: .7rem 0 .2rem; border-radius: .6rem; background: rgba(255,255,255,.04); }

.menuRow2 { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.menuRow2 button { margin: .45rem 0; }
#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; }

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

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

#readWhat { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); text-align:center; margin-top:3px; min-height:12px; }