/* CIPHER — Memory Arcade 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: #07060f;
  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% 46%, transparent 55%, rgba(0,0,0,.52) 100%);
}

/* HUD oben links: die gesamte Ring-Fläche ist spielrelevant (Knoten stehen bis fast an den
   Rand), daher HUD bewusst schmal und weit oben links, nie über der Ring-Geometrie. */
#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: 46vw; 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(167,139,250,.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); }
#hudRound { min-height: 1.35em; font-weight: 700; font-size: 1.05rem; color: #f0abfc; text-shadow: 0 0 16px rgba(240,171,252,.7); transition: transform .12s; letter-spacing: .08em; }
#hudRound.pop { transform: scale(1.3); }
#hudShields { margin-top: 2px; letter-spacing: .3em; font-size: 1rem; filter: drop-shadow(0 0 7px rgba(34,211,238,.8)); color: #22d3ee; }

/* Event-Toast (Meilensteine, Warnungen) */
#toast {
  position: fixed; top: 22vh; 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(.82rem, 3.1vw, 1.15rem);
  color: #eef2ff; text-shadow: 0 0 24px rgba(167,139,250,.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: 9vh; 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(10,8,22,.6); border: 1px solid rgba(148,163,200,.12);
  border-radius: 99px; padding: .45rem 1.1rem; backdrop-filter: blur(8px);
}

/* Gesten-Hinweis (nur allererster Run) */
#gestureHint {
  position: fixed; bottom: 16vh; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none;
  color: #94a3c8; font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(167,139,250,.5);
  animation: hintFloat 1.6s ease-in-out infinite alternate;
}
@keyframes hintFloat { to { transform: translateX(-50%) translateY(-6px); } }

/* 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(10, 8, 22, .8);
  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(167,139,250,.07), 0 0 80px -30px rgba(240,171,252,.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 .ci { background: linear-gradient(100deg, #22d3ee, #a78bfa 50%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(167,139,250,.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: #a78bfa; box-shadow: 0 0 28px -8px rgba(167,139,250,.9); transform: translateY(-1px); }
button.big {
  font-size: 1.18rem; padding: 1.05rem 1.2rem; color: #07060f;
  background: linear-gradient(100deg, #22d3ee, #a78bfa 60%, #f0abfc);
  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.6rem, 11vw, 4rem); font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(167,139,250,.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: #f0abfc; }
#goShare { letter-spacing: .12em; font-size: 1.3rem; margin: .5rem 0; }

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

.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: #a78bfa; }

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