/* freigeist.fun – Spaßseite. Mobile-first, reine CSS-Animationen, kein Backend. */

:root {
  /* ---- Justierbar ---- */
  --zoom: 1.25;          /* Skalierung des YouTube-iframes (1.15-1.3): schneidet Balken/Titelleiste ab */
  --shift-y: 0%;         /* iframe vertikal verschieben (z.B. -4% = Bild nach oben) */
  --beat: 0.469s;        /* Puls-Takt: 128 BPM = 60/128 s */
  --neon: #ff3df2;
  --neon2: #3dfcff;

  /* Bühne: auf dem Handy quadratisch, ab 800px breiter (4:3-ähnlich) */
  /* Platz für Titel + Regler + großen Spiel-Button (ca. 300px) abziehen, damit alles ohne Scrollen passt */
  --sh: min(max(170px, calc(100vh - 310px)), 94vw);
  --sw: var(--sh);
}
@supports (height: 100svh) { :root { --sh: min(max(170px, calc(100svh - 310px)), 94vw); } }
@media (min-width: 800px) {
  :root { --sh: min(max(170px, calc(100vh - 310px)), 640px); --sw: min(calc(var(--sh) * 1.5), 94vw); }
}
@media (min-width: 800px) {
  @supports (height: 100svh) { :root { --sh: min(max(170px, calc(100svh - 310px)), 640px); } }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #14002e;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Hintergrund ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.bg-rainbow {
  position: absolute; inset: -20%;
  background: linear-gradient(115deg,
    #ff0080, #ff8c00, #ffe600, #00ff9d, #00b3ff, #8a2be2, #ff0080, #ff8c00);
  background-size: 300% 300%;
  opacity: .55;
  animation: flow 22s linear infinite, hue 30s linear infinite;
}
.bg-pulse {
  position: absolute; left: 50%; top: 46%;
  width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax;
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,61,242,.18) 22%, transparent 55%);
  animation: beat var(--beat) ease-in-out infinite alternate;
}
.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,0,46,0) 35%, rgba(20,0,46,.75) 100%);
}
@keyframes flow { to { background-position: 300% 150%; } }
@keyframes hue  { to { filter: hue-rotate(360deg); } }
@keyframes beat { from { transform: scale(.92); opacity: .55; } to { transform: scale(1.05); opacity: 1; } }

.floaters { position: absolute; inset: 0; }
.floater {
  position: absolute; bottom: -12vh; left: var(--x, 50%);
  font-size: var(--s, 28px); opacity: 0;
  animation: rise var(--d, 14s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: .75; }
  50%  { transform: translate3d(var(--dx, 30px), -60vh, 0) rotate(calc(var(--r, 40deg) * .5)); }
  90%  { opacity: .75; }
  100% { transform: translate3d(calc(var(--dx, 30px) * -1), -118vh, 0) rotate(var(--r, 40deg)); opacity: 0; }
}

/* ---------- Layout ---------- */
.page {
  position: relative; z-index: 2;
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(env(safe-area-inset-top), 14px) 14px max(env(safe-area-inset-bottom), 12px);
}
.head { text-align: center; }
.title {
  margin: 0; font-size: clamp(34px, 9vw, 72px); font-weight: 900; letter-spacing: .02em;
  text-shadow: 0 0 6px #fff, 0 0 18px var(--neon), 0 0 38px var(--neon);
  animation: glow calc(var(--beat) * 2) ease-in-out infinite alternate;
}
.title span { color: var(--neon2); text-shadow: 0 0 6px #fff, 0 0 18px var(--neon2), 0 0 38px var(--neon2); }
@keyframes glow { from { filter: brightness(.9); } to { filter: brightness(1.25); } }
.sub { margin: 4px 0 0; font-size: clamp(14px, 3.6vw, 20px); opacity: .92; }
.sub small { opacity: .75; font-size: .8em; }

/* ---------- Bühne + Greenscreen ---------- */
.stage {
  position: relative; flex: 0 0 auto;
  width: var(--sw); height: var(--sh);
  overflow: hidden;                 /* Wrapper schneidet das überdimensionierte iframe ab */
  pointer-events: none;             /* Interaktion macht nur Overlay/Sound-Button */
  border-radius: 24px;
}
.keywrap { position: absolute; inset: 0; isolation: isolate; }
/* iframe: 16:9, so groß dass es die Bühne mit Faktor --zoom überdeckt, zentriert */
.stage iframe, .stage #player {
  position: absolute; left: 50%; top: 50%;
  --ih: max(calc(var(--sh) * var(--zoom)), calc(var(--sw) * var(--zoom) * .5625));
  height: var(--ih); width: calc(var(--ih) * 1.7778);
  transform: translate(-50%, calc(-50% + var(--shift-y)));
  border: 0; pointer-events: none;  /* keine YouTube-UI, keine Klicks */
  /* HAUPTVARIANTE: SVG-Chroma-Key (Grün -> Alpha), Parameter siehe app.js CONFIG */
  filter: url(#chroma);
}

/* FALLBACK ?mode=blend (falls filter:url() auf iframes nicht greift, z.B. manche Safari-Versionen):
   Grüne Ebene mit difference -> Grün wird schwarz, dann screen auf den Hintergrund -> Schwarz verschwindet.
   Achtung: Katzenfarben werden dabei verfälscht (Grünkanal invertiert) – nur Notlösung. */
.keyer { display: none; }
body.no-chroma .stage iframe, body.no-chroma .stage #player { filter: none; }  /* ?chroma=0: Video ohne Greenscreen unverändert zeigen */
body.mode-blend .stage iframe, body.mode-blend .stage #player { filter: none; }
body.mode-blend .keyer {
  display: block; position: absolute; inset: 0; background: #00ff00; mix-blend-mode: difference; pointer-events: none;
}
body.mode-blend .keywrap { mix-blend-mode: screen; }

/* ---------- Lautstärke-Regler (unter der Bühne, außerhalb des iframes) ---------- */
.volume {
  display: flex; align-items: center; gap: 10px; width: min(420px, 94vw);
  padding: 6px 12px; border-radius: 99px;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px);
}
.vol-label { font-size: 12px; opacity: .85; }
.vol-out { min-width: 3.2em; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.vol-range {
  flex: 1 1 auto; min-width: 0; height: 44px; margin: 0;   /* 44px hohe Touch-Fläche */
  background: transparent; cursor: pointer; touch-action: pan-y; -webkit-appearance: none; appearance: none;
}
.vol-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--neon), var(--neon2)); }
.vol-range::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--neon), var(--neon2)); }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 10px var(--neon); }
.vol-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 10px var(--neon); }
.vol-range:focus-visible { outline: 2px solid var(--neon2); outline-offset: 2px; border-radius: 8px; }

/* Großer Spiel-Button: unter Regler, außerhalb der Bühne (überlappt das iframe nie). */
.foot { width: min(440px, 94vw); text-align: center; }
.game {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 60px; padding: 12px 18px; border-radius: 16px;
  color: #1a0033; text-decoration: none; font-weight: 900; font-size: clamp(15px, 4.4vw, 22px); letter-spacing: 0;
  background: linear-gradient(100deg, #ffe600, #ff9d00 55%, #ff3df2);
  border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 6px 22px rgba(255,61,242,.55);
  animation: gamebeat calc(var(--beat) * 2) ease-in-out infinite alternate;
}
@keyframes gamebeat { from { transform: scale(1); } to { transform: scale(1.03); } }
.game:active { transform: scale(.97); }
.game:hover, .game:focus-visible { border-color: var(--neon2); filter: brightness(1.1); outline: none; }

/* ---------- Sound-Knopf ---------- */
.sound {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.3); color: #fff; font-size: 22px; cursor: pointer;
}

/* ---------- Intro: "Under construction" + Geheimnis-Dialog ---------- */
.intro {
  position: fixed; inset: 0; z-index: 10; color: #ddd;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #262626 repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  transition: opacity 1.4s ease, visibility 1.4s;
}
.intro.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.stripes { position: absolute; left: 0; right: 0; height: 22px;
  background: repeating-linear-gradient(-45deg, #f2c200 0 18px, #1a1a1a 18px 36px); opacity: .85; }
.stripes-top { top: 0; } .stripes-bottom { bottom: 0; }
.uc { position: absolute; top: 44px; margin: 0; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; opacity: .45; }
.dialog { width: min(340px, 88vw); min-height: 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.dlg-text { font-size: clamp(17px, 4.6vw, 21px); line-height: 1.45; min-height: 3.2em; white-space: pre-line; color: #f2f2f2; }
.dlg-text.typing::after { content: "▌"; margin-left: 2px; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.dlg-btn {
  align-self: flex-start; font: inherit; font-size: 15px; color: #f2f2f2; cursor: pointer;
  padding: 11px 18px; min-height: 44px; background: transparent; border: 1px solid #888; border-radius: 4px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease, background .2s, visibility .5s;
}
.dlg-btn.show { opacity: 1; visibility: visible; transform: none; }
.dlg-btn:hover, .dlg-btn:focus-visible { background: rgba(255,255,255,.12); border-color: #fff; outline: none; }
.dlg-btn[disabled] { cursor: default; }

/* Unterschrift */
.sign { align-self: stretch; display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.sign.show { opacity: 1; visibility: visible; }
.sign:not(.show) { pointer-events: none; }
.sign-line { position: relative; display: flex; align-items: flex-end; height: 52px; border-bottom: 2px solid #bbb; }
.sign-x { font-size: 20px; line-height: 1; padding: 0 8px 4px 2px; color: #bbb; }
.scribble { position: absolute; left: 24px; bottom: 2px; width: calc(100% - 30px); height: 46px; overflow: visible; }
.scribble path { fill: none; stroke: #7fd0ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.signed .scribble path { animation: draw .8s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.stamp { position: absolute; right: 4px; bottom: 8px; padding: 2px 8px; font-weight: 900; letter-spacing: .12em; color: #ff5d5d;
  border: 3px solid #ff5d5d; border-radius: 4px; opacity: 0; transform: rotate(-12deg) scale(2.2); }
.signed .stamp { animation: stamp .35s .7s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes stamp { to { opacity: .9; transform: rotate(-12deg) scale(1); } }

/* Vor der Unterschrift: nur die leere Seite. Danach Überraschung: Regenbogen/Bühne blenden ein. */
.page, .bg { opacity: 0; transition: opacity 1.6s ease; }
body.show .page, body.show .bg { opacity: 1; }
.stage { transition: transform 1.4s cubic-bezier(.2,1.3,.4,1); }
body:not(.show) .stage { transform: scale(.8); }
body:not(.show) .page { pointer-events: none; }
.foot { transition: opacity 1s ease 1.2s; }
body:not(.show) .foot { opacity: 0; }

/* ---------- Debug-Regler (?tune=1) ---------- */
.tune {
  position: fixed; left: 8px; top: 8px; z-index: 20; width: min(300px, 90vw);
  padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.82); font-size: 12px; line-height: 1.3;
}
.tune[hidden] { display: none; }
.tune label { display: grid; grid-template-columns: 74px 1fr 40px; gap: 6px; align-items: center; margin: 3px 0; }
.tune input[type=range] { width: 100%; }
.tune output { text-align: right; font-variant-numeric: tabular-nums; }
.tune code { display: block; margin-top: 6px; word-break: break-all; color: #7dffb0; }
.tune button { margin-top: 6px; font-size: 12px; }
.noscript { position: fixed; z-index: 30; bottom: 60px; left: 0; right: 0; text-align: center; }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-rainbow, .bg-pulse, .title, .game { animation: none; }
  .floater { animation: none; opacity: .5; bottom: auto; top: var(--y, 50%); }
  .intro, .dlg-btn, .sign, .page, .bg, .stage, .foot { transition: none; }
  .signed .scribble path { animation: none; stroke-dashoffset: 0; }
  .signed .stamp { animation: none; opacity: .9; transform: rotate(-12deg); }
  .dlg-text.typing::after { animation: none; }
}

/* Niedrige Fenster (Handy quer o. ä.): Untertitel weg, Titel kleiner, damit nichts scrollt */
@media (max-height: 560px) {
  .sub { display: none; }
  .title { font-size: 28px; }
  :root { --sh: min(max(120px, calc(100vh - 230px)), 94vw); }
}