@charset "UTF-8";
/* =============================================================================
   Show-Werkzeuge (AUSBAU.md, A5 und A8): Glücksrad-Ebene (show-wheel.js) und Bühnen-Skins
   (skins.js) auf Bühne und Spieler-Lobby. Nur One-UI-Tokens, kein Glow; Bewegung aus bei
   „weniger Bewegung".
   ========================================================================== */

/* ---------------------------------------------------------------- Glücksrad */
.sw-layer {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--ou-black) 72%, transparent);
  animation: gh-rise var(--ou-dur) var(--ou-ease) both;
  transition: opacity 400ms var(--ou-ease);
}
.sw-layer.is-out { opacity: 0; }
.sw-box { display: grid; justify-items: center; gap: 14px; width: min(100%, 460px); padding: 20px; border: 1px solid var(--ou-line-strong); border-top: 3px solid var(--ou-primary); border-radius: var(--ou-radius); background: var(--ou-surface); color: var(--ou-text); }
.sw-kicker { color: var(--ou-muted); font: 600 .75rem/1.3 var(--ou-font-body); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.sw-wheel { position: relative; width: min(78vw, 380px); aspect-ratio: 1; }
.sw-canvas { display: block; width: 100%; height: 100%; }
.sw-pointer { position: absolute; top: -8px; left: 50%; z-index: 1; width: 0; height: 0; border-top: 26px solid var(--ou-text); border-right: 14px solid transparent; border-left: 14px solid transparent; translate: -50% 0; }
.sw-result { min-height: 1.1em; font: 400 clamp(2rem, 7vw, 3rem)/1 var(--ou-font-display); letter-spacing: .02em; text-align: center; text-transform: uppercase; opacity: 0; }
.sw-result.is-on { opacity: 1; }
/* Handy: Tippen irgendwo schließt (show-wheel.js) */
.sw-layer.is-tap { cursor: pointer; }
/* Cockpit: kleine Karte unten rechts, blockiert nichts */
.sw-layer.is-mini { inset: auto 16px 16px auto; padding: 0; background: none; pointer-events: none; }
.sw-layer.is-mini .sw-box { width: 240px; gap: 8px; padding: 14px; box-shadow: var(--ou-drop); }
.sw-layer.is-mini .sw-wheel { width: 170px; }
.sw-layer.is-mini .sw-pointer { top: -6px; border-top-width: 18px; border-right-width: 10px; border-left-width: 10px; }
.sw-layer.is-mini .sw-result { font-size: 1.6rem; }
/* Bühne: groß in der Mitte, ohne Abdunkeln der ganzen Fläche */
.sw-layer.is-stage { background: color-mix(in srgb, var(--ou-black) 55%, transparent); }
.sw-layer.is-stage .sw-box { width: min(92vw, 720px); padding: 28px; }
.sw-layer.is-stage .sw-wheel { width: min(60vh, 560px); }
.sw-layer.is-stage .sw-result { font-size: clamp(3rem, 6vw, 5rem); }

/* ---------------------------------------------------------------- Bühnen-Skins */
.skin-deco { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.skin-deco.is-page { position: fixed; z-index: 3; }
.skin-garland { position: absolute; top: 0; right: 0; left: 0; height: 22px; background: radial-gradient(circle at 50% 30%, var(--_a) 0 6px, transparent 7px) 0 0 / 36px 22px, radial-gradient(circle at 50% 30%, var(--_b) 0 6px, transparent 7px) 18px 0 / 36px 22px, linear-gradient(var(--_line) 0 3px, transparent 3px); }
.skin-flags { position: absolute; top: 0; right: 0; left: 0; height: 30px; background: conic-gradient(from 150deg at 50% 0, var(--ou-red) 0 60deg, transparent 0) 0 0 / 40px 30px, conic-gradient(from 150deg at 50% 0, var(--ou-yellow) 0 60deg, transparent 0) 10px 0 / 40px 30px, conic-gradient(from 150deg at 50% 0, var(--ou-green) 0 60deg, transparent 0) 20px 0 / 40px 30px, conic-gradient(from 150deg at 50% 0, var(--ou-blue) 0 60deg, transparent 0) 30px 0 / 40px 30px; }
.skin-sticker { position: absolute; top: 26px; right: 18px; padding: .45em .9em .5em; background: var(--_st, var(--ou-yellow)); color: var(--ou-black); font: 400 1.05rem/1 var(--ou-font-hand); text-transform: uppercase; transform: rotate(4deg); clip-path: polygon(1% 4%, 30% 0, 62% 4%, 99% 0, 100% 52%, 98% 100%, 58% 96%, 22% 100%, 0 95%, 2% 48%); }
.skin-deco.is-page .skin-sticker { top: 34px; right: 28px; font-size: 1.35rem; }
.skin-bit { position: absolute; top: -12px; width: 8px; height: 8px; border-radius: 2px; background: var(--_c); opacity: .85; animation: skin-fall linear infinite; }
.skin-bit.is-snow { width: 6px; height: 6px; border-radius: 50%; background: var(--ou-cream); opacity: .7; }
.skin-bit.is-egg { width: 10px; height: 13px; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; }
@keyframes skin-fall { to { transform: translateY(110vh) rotate(360deg); } }

[data-skin="karneval"] { --_a: var(--ou-red); --_b: var(--ou-yellow); --_line: var(--ou-green); --_st: var(--ou-yellow); }
[data-skin="ostern"] { --_a: var(--ou-yellow); --_b: var(--ou-green); --_line: var(--ou-green); --_st: var(--ou-green); }
[data-skin="halloween"] { --_a: var(--ou-yellow); --_b: var(--ou-black); --_line: var(--ou-black); --_st: var(--ou-yellow); }
[data-skin="advent"] { --_a: var(--ou-red); --_b: var(--ou-yellow); --_line: var(--ou-green); --_st: var(--ou-cream); }
[data-skin="weihnachten"] { --_a: var(--ou-red); --_b: var(--ou-yellow); --_line: var(--ou-green); --_st: var(--ou-red); }
[data-skin="silvester"] { --_a: var(--ou-yellow); --_b: var(--ou-cream); --_line: var(--ou-yellow); --_st: var(--ou-yellow); }
[data-skin="geburtstag"] { --_st: var(--ou-red); }
[data-skin="weihnachten"] .skin-sticker, [data-skin="geburtstag"] .skin-sticker { color: var(--ou-cream); }
@media (prefers-reduced-motion: reduce) { .skin-bit { display: none; } }