/* ==========================================================================
   Billboard / Show-Screen — Vollbild, das Rad dreht HIER (vom Handy ausgelöst)
   Light theme (bytebased brand, electric-blue accent)
   ========================================================================== */

:root {
  --navy-0:#f4f7fc; --navy-1:#eef3fb; --navy-2:#f9fbff; --line:#e3e9f4;
  --text:#16223f; --muted:#5c6a88; --blue:#2f6fe0; --blue-2:#1e5bd6;
  --cyan:#24b3ff; --glow:rgba(47,111,224,0.22); --gold:#b26a00; --green:#16a34a; --violet:#4a90ff;
  --font:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
.bb-body {
  font-family:var(--font); color:var(--text); min-height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2vh 2vw;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(74,144,255,0.12), transparent 55%),
    radial-gradient(90% 80% at 50% 110%, rgba(36,179,255,0.08), transparent 55%),
    linear-gradient(180deg, var(--navy-2), var(--navy-0));
}
canvas,svg,img { display:block; }

/* Ecke: Brand + Join-QR */
.bb-corner { position:fixed; top:3vh; right:3vw; display:flex; flex-direction:column; align-items:flex-end; gap:1rem; z-index:5; animation:bb-fadeup .32s ease .2s both; }
.bb-corner__brand { display:inline-flex; align-items:center; gap:0.5rem; font-weight:800; font-size:clamp(1rem,1.6vw,1.4rem); }
.bb-corner__logo { width:1.7rem; height:1.7rem; border-radius:7px; display:grid; place-items:center; color:#fff; font-weight:900; background:linear-gradient(140deg,var(--blue),var(--violet)); }
.bb-corner__tag { font-size:0.6rem; font-weight:800; letter-spacing:0.16em; color:var(--cyan); border:1px solid rgba(36,179,255,0.4); border-radius:999px; padding:0.15rem 0.5rem; }
.bb-join { background:#fff; border-radius:16px; padding:0.9rem; text-align:center; box-shadow:0 12px 34px -16px rgba(23,42,80,0.16), 0 0 50px -18px var(--glow); transition:opacity .4s ease, transform .4s ease; animation:bb-fade .3s ease .28s backwards; }
.bb-join__qr { width:clamp(120px,11vw,190px); height:auto; }
.bb-join__label { display:block; margin-top:0.4rem; font-size:0.8rem; font-weight:700; color:#16223f; }

/* Bühne */
.bb-stage { display:flex; flex-direction:column; align-items:center; gap:clamp(0.6rem,2vh,1.6rem); width:100%; }
.bb-heading { font-size:clamp(2rem,5vw,4.5rem); font-weight:900; letter-spacing:-0.02em; line-height:1.05; text-transform:uppercase; animation:bb-popin .3s ease .05s both; }
.bb-heading .hl { background:linear-gradient(100deg,#2f6fe0,#24b3ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bb-subheading { font-size:clamp(1rem,2vw,1.6rem); color:var(--muted); max-width:40ch; animation:bb-fadeup .3s ease .12s both; }

.bb-wheelwrap { position:relative; width:min(58vh,44vw,560px); aspect-ratio:1; }
.bb-wheel { width:100%; height:100%; border-radius:50%; box-shadow:0 0 0 10px var(--navy-1), 0 0 0 14px var(--line), 0 0 90px -10px var(--glow); }
.bb-wheel__pointer { position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:24px solid transparent; border-right:24px solid transparent; border-top:40px solid var(--blue); z-index:6; filter:drop-shadow(0 3px 10px var(--glow)); }

.bb-badge {
  position:absolute; inset:auto 0 -1.2rem 0; margin:auto; width:max-content; max-width:90%;
  transform:translateY(100%);
  background:linear-gradient(180deg,var(--blue),var(--blue-2)); color:#fff; font-weight:800;
  padding:0.6rem 1.4rem; border-radius:999px; font-size:clamp(1rem,2vw,1.5rem);
  box-shadow:0 10px 30px -8px var(--glow); white-space:nowrap;
  animation:bb-slideup-badge .3s ease both;
}

/* Ergebnis-Overlay */
.bb-result { display:flex; flex-direction:column; align-items:center; gap:0.4rem; animation:pop .5s ease both; }
@keyframes pop { from { opacity:0; transform:scale(0.8); } to { opacity:1; transform:scale(1); } }
.bb-result__eyebrow { font-size:clamp(0.8rem,1.4vw,1.1rem); letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); font-weight:800; }
.bb-result__prize { font-size:clamp(2.4rem,6vw,5.5rem); font-weight:900; line-height:1; color:var(--text); }
.bb-result__player { font-size:clamp(1rem,2vw,1.6rem); color:var(--muted); }

/* Live */
.bb-live { position:fixed; bottom:3vh; left:3vw; display:inline-flex; align-items:center; gap:0.5rem; font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:700; z-index:5; }
.bb-live__dot { width:0.6rem; height:0.6rem; border-radius:50%; background:#ef4444; box-shadow:0 0 10px 1px #ef4444; animation:blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity:0.3; } }
.bb-body[data-state="idle"] .bb-live { opacity:0.5; }

/* Zustände: was sichtbar ist */
.bb-body[data-state="idle"]     .bb-badge,
.bb-body[data-state="idle"]     .bb-result { display:none !important; }
.bb-body[data-state="result"]   .bb-wheelwrap { display:none; }
.bb-body[data-state="result"]   .bb-join { opacity:0.25; }
.bb-body[data-state="spinning"] .bb-join { transform:scale(0.9); opacity:0.6; }

/* dezente Attract-Rotation im Idle */
.bb-body[data-state="idle"] .bb-wheel { animation:idlespin 22s linear infinite; }
@keyframes idlespin { to { transform:rotate(360deg); } }

/* Entrance-Animationen (transform/opacity only) */
@keyframes bb-fadeup { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes bb-popin { from { transform:scale(0.9); } to { transform:scale(1); } }
@keyframes bb-fade { from { opacity:0; } to { opacity:1; } }
@keyframes bb-slideup-badge { from { opacity:0; transform:translateY(150%); } to { opacity:1; transform:translateY(100%); } }

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important } }