/* Prank-O-Mat – Spielautomat im Retro-Gameshow-Stil.
   Maße in rem: 1rem = 16px bei 1920x1080, skaliert mit dem Fenster. Farben nur über Variablen (assets/theme.css). */
html { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); }   /* exakt 16px bei 1920x1080 (Facecam-Bildschirm = 480x270) */
body.tp { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* ---------- Kopfzeile ---------- */
.topbar { display: flex; align-items: center; gap: 1.6rem; padding: .6rem 2.4rem .3rem; position: relative; z-index: 5; }
.topbar .btn { min-height: 2.8rem; padding: .45rem 1.1rem; font-size: .95rem; }
.topbar .btn .ic { width: 1.4rem; height: 1.4rem; }

/* ---------- Bühne ---------- */
.floor { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; gap: 2.2rem; padding: 0 1.6rem 1.2rem; }
.rig { display: flex; align-items: center; flex: none; margin-bottom: 2rem; }   /* Platz für die Tastatur-Legende */

/* ---------- Gehäuse ---------- */
.cabinet {
  position: relative; width: 65rem; padding: 1.3rem 2.1rem 1.7rem; display: flex; flex-direction: column; gap: 1rem; flex: none;
  background:
    linear-gradient(90deg, transparent 0 4%, var(--glass-soft) 4% 8%, transparent 8% 9.5%, var(--glass-soft) 9.5% 10.5%, transparent 10.5%),
    var(--cab);
  border: .5rem solid var(--ink); border-radius: 2.8rem 2.8rem 1.1rem 1.1rem;
  box-shadow: 1rem 1rem 0 var(--ink);
  will-change: transform;
}
.cabinet::before {
  content: ""; position: absolute; inset: .55rem; pointer-events: none; border: .16rem solid var(--ink); border-radius: 2.2rem 2.2rem .6rem .6rem;
  box-shadow: inset 0 0 0 .2rem var(--chrome-hi), inset 0 0 0 .38rem var(--chrome-3), inset 0 0 0 .55rem var(--chrome-1), inset 0 0 0 .7rem var(--ink);
}
.cabinet > * { position: relative; z-index: 1; }
.cabinet > .screw { position: absolute; z-index: 2; }

/* Giebelschild */
.marquee {
  height: 6.1rem; display: flex; align-items: center; justify-content: center; gap: 1.6rem;
  background: var(--sign); border: .35rem solid var(--ink); box-shadow: .35rem .35rem 0 var(--ink);
}
.marquee .bulbs { inset: .55rem; }
.marquee h1 {
  margin: 0; font: 400 3.1rem/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--cream);
  text-shadow: .1rem .1rem 0 var(--ink), .2rem .2rem 0 var(--ink), .3rem .3rem 0 var(--ink), .4rem .4rem 0 var(--red-deep);
}
.marquee .star { width: 2.4rem; height: 2.4rem; flex: none; }

/* ---------- Walzen ---------- */
.reel { position: relative; border: .3rem solid var(--ink); background: var(--cream); }
.reel-win { position: relative; overflow: hidden; background: var(--cream); }
.reel-win::before { content: ""; position: absolute; z-index: 0; inset: 0; background: url("../../assets/noise.svg"); opacity: .55; pointer-events: none; }
.slot { position: absolute; left: 0; right: 0; will-change: transform, opacity; backface-visibility: hidden; }
.slot-in { height: 100%; display: flex; align-items: center; justify-content: center; gap: 1.4rem; padding: 0 1rem; border-top: .14rem solid var(--ink-a15); border-bottom: .14rem solid var(--ink-a15); color: var(--ink); }
.reel-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--shade-hard) 0, var(--shade-mid) 15%, var(--shade-none) 34%, var(--shade-none) 66%, var(--shade-mid) 85%, var(--shade-hard) 100%); }
.reel-glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 0 13%, var(--glass) 13% 19%, transparent 19% 22%, var(--glass-soft) 22% 24.5%, transparent 24.5%),
    linear-gradient(180deg, var(--glass) 0 .5rem, transparent .5rem);
}
.r-icon { width: 5.2rem; height: 5.2rem; flex: none; }
.r-name { font-family: var(--font-display); text-transform: uppercase; white-space: nowrap; line-height: 1; }
.r-name.idle { opacity: .55; }
.r-word, .r-joker { display: block; hyphens: none; overflow-wrap: normal; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.02; letter-spacing: .01em; }
.reel-word .slot-in { padding: 0 2.3rem 0 1.3rem; }   /* Platz für Zeiger links (Dreieck) und rechts (Zunge) */
.reel-joker .slot-in { padding: 0 2.4rem 0 1.5rem; }
.r-joker { letter-spacing: .03em; }

/* Gewinnlinie */
.win-line { position: absolute; left: 0; right: 0; top: 50%; height: .5rem; margin-top: -.25rem; pointer-events: none; }
.win-line i { position: absolute; top: 50%; width: 1.5rem; height: 2.3rem; margin-top: -1.15rem; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.win-line i::after { content: ""; position: absolute; left: .18rem; top: .42rem; bottom: .42rem; right: .42rem; background: var(--red); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.win-line i.l { left: 0; }
.win-line i.r { right: 0; transform: scaleX(-1); }
.win-band { position: absolute; left: 0; right: 0; top: 50%; height: var(--band, 44%); transform: translateY(-50%); background: transparent; }
.reel-main { --band: 44.4%; } .reel-word { --band: 43.5%; } .reel-joker { --band: 50%; }
.reel.lit .win-band { background: var(--yellow-light); border-top: .22rem solid var(--ink); border-bottom: .22rem solid var(--ink); }
.reel.lit .win-line i::after { background: var(--yellow); }
.reel-word .win-line i { width: .95rem; height: 1.5rem; margin-top: -.75rem; }
.reel-word .win-line i::after { left: .12rem; top: .28rem; bottom: .28rem; right: .26rem; }
.reel-joker .win-line i { width: 1rem; height: 1.6rem; margin-top: -.8rem; }
.reel-joker .win-line i::after { left: .12rem; top: .3rem; bottom: .3rem; right: .28rem; }

/* Rattern-Zunge */
.tongue { position: absolute; right: -.9rem; top: 50%; width: 3.6rem; height: 1.45rem; margin-top: -.725rem; transform-origin: 94% 50%; z-index: 4; overflow: visible; pointer-events: none; }
.tongue path { fill: var(--chrome-2); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.tongue .hi { fill: none; stroke: var(--chrome-hi); stroke-width: 2.4; stroke-linecap: round; }

/* Hauptwalze */
.main-frame { position: relative; padding: 1.55rem; border: .35rem solid var(--ink); box-shadow: .35rem .35rem 0 var(--ink); }
.main-frame .bulbs { inset: .72rem; }
.main-frame .tongue { right: 0; }
.main-frame .reel-win { height: 13.8rem; }
.reel-main .slot-in { font-size: 1rem; }

/* Wortwalzen */
.words { display: grid; grid-template-columns: repeat(5, 1fr); gap: .95rem; }
.word-unit { display: flex; flex-direction: column; align-items: center; gap: .7rem; min-width: 0; }
.word-frame { position: relative; width: 100%; padding: .6rem; border: .3rem solid var(--ink); box-shadow: .3rem .3rem 0 var(--ink); }
.word-frame .reel-win { height: 10.6rem; }
.word-frame .tongue { right: .15rem; width: 2.6rem; height: 1.1rem; margin-top: -.55rem; }
.plate {
  min-width: 2.6rem; text-align: center; padding: .12rem .8rem; background: var(--ink); color: var(--yellow);
  font: 400 1rem/1.3 var(--font-display); border: .15rem solid var(--chrome-2); box-shadow: .2rem .2rem 0 var(--ink);
}

/* Bedienreihe */
.controls { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; padding: 1.1rem 1.3rem; background: var(--sign); border: .35rem solid var(--ink); box-shadow: .35rem .35rem 0 var(--ink); }
.joker-unit { display: flex; align-items: center; gap: 1rem; }
.joker-frame { position: relative; width: 18.4rem; padding: .55rem; border: .3rem solid var(--ink); box-shadow: .3rem .3rem 0 var(--ink); overflow: hidden; }
.joker-frame .reel-win { height: 5.8rem; }
.joker-frame .tongue { right: .1rem; width: 2.4rem; height: 1rem; margin-top: -.5rem; }
.shutter {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; border-bottom: .3rem solid var(--ink);
  background: repeating-linear-gradient(180deg, var(--chrome-1) 0 .75rem, var(--chrome-3) .75rem .9rem);
  transition: transform .45s cubic-bezier(.6, 0, .25, 1);
}
.shutter span { padding: .3rem 1rem; background: var(--ink); color: var(--cream); font: 400 1rem/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.shutter.open { transform: translateY(-104%); }

/* Kippschalter */
.toggle { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .55rem; touch-action: manipulation; }
.toggle-label { padding: .1rem .7rem; background: var(--ink); color: var(--cream); font: 400 .95rem/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.toggle-plate {
  --sh: .3rem .3rem 0 var(--ink);
  position: relative; width: 8.4rem; height: 4.8rem; border: .26rem solid var(--ink); box-shadow: var(--sh);
  background: linear-gradient(180deg, var(--chrome-hi) 0 10%, var(--chrome-1) 10% 46%, var(--chrome-3) 46% 52%, var(--chrome-2) 52%);
}
.toggle:focus-visible .toggle-plate { box-shadow: var(--sh), 0 0 0 .22rem var(--ink), 0 0 0 .5rem var(--yellow), 0 0 0 .72rem var(--ink); }
/* Beschriftung außen links/rechts, der Hebel schwenkt nur im mittleren Bereich */
.toggle-pos { position: absolute; top: 50%; transform: translateY(-50%); font: 400 .85rem/1 var(--font-display); text-transform: uppercase; color: var(--ink-a30); }
.toggle-pos.off { left: .75rem; } .toggle-pos.on { right: 1rem; }
.toggle[aria-checked="true"] .toggle-pos.on { color: var(--ink); }
.toggle[aria-checked="false"] .toggle-pos.off { color: var(--ink); }
.toggle-plate::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.7rem; height: 1.7rem; margin: -.85rem 0 0 -.85rem; border-radius: 50%; background: var(--chrome-3); border: .2rem solid var(--ink); }
.toggle-lever {
  position: absolute; left: 50%; bottom: 50%; width: 1.1rem; height: 1.6rem; margin-left: -.55rem;
  transform-origin: 50% 100%; transform: rotate(-48deg);
  background: linear-gradient(90deg, var(--chrome-hi) 0 25%, var(--chrome-2) 25% 65%, var(--chrome-3) 65%); border: .2rem solid var(--ink);
  transition: transform .14s cubic-bezier(.3, 1.7, .5, 1);
}
.toggle-lever::after { content: ""; position: absolute; left: 50%; top: -1.15rem; width: 1.5rem; height: 1.5rem; margin-left: -.75rem; border-radius: 50%; border: .2rem solid var(--ink); background: var(--red); box-shadow: inset .25rem .25rem 0 var(--red-light); }
.toggle[aria-checked="true"] .toggle-lever { transform: rotate(48deg); }
.toggle[aria-checked="true"] .toggle-lever::after { background: var(--yellow); box-shadow: inset .25rem .25rem 0 var(--yellow-light); }

/* Buzzer */
.buzzer {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 9.8rem; height: 9.8rem; padding: 0; cursor: pointer; border-radius: 50%;
  --sh: .5rem .5rem 0 var(--ink);
  border: .38rem solid var(--ink); box-shadow: var(--sh); touch-action: manipulation;
  background: radial-gradient(circle at 50% 50%, transparent 0 56%, var(--chrome-3) 56% 60%, var(--chrome-1) 60% 80%, var(--chrome-2) 80%);
}
.buzzer .cap {
  position: absolute; inset: 1rem; display: grid; place-items: center; border-radius: 50%; border: .34rem solid var(--ink);
  background: var(--red); box-shadow: inset .55rem .55rem 0 var(--red-light), inset -.55rem -.55rem 0 var(--red-deep), 0 .5rem 0 var(--red-deep), 0 .5rem 0 .34rem var(--ink);
  color: var(--cream); font: 400 1.45rem/1.25 var(--font-display); text-transform: uppercase; text-align: center; letter-spacing: .03em;
  text-shadow: .1rem .1rem 0 var(--ink);
  transform: translateY(-.35rem); transition: transform .06s, box-shadow .06s;
}
.buzzer:active .cap, .buzzer.busy .cap { transform: translateY(.15rem); box-shadow: inset .35rem .35rem 0 var(--red-light), inset -.35rem -.35rem 0 var(--red-deep), 0 .1rem 0 var(--red-deep), 0 .1rem 0 .34rem var(--ink); }
.buzzer.busy { cursor: default; }

/* Lautstärke-Fader (Mischpult) */
.fader {
  --v: .6; --track: 6.6rem;
  position: relative; flex: none; width: 3.8rem; height: 9.6rem; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none;
  border: .25rem solid var(--ink); box-shadow: .3rem .3rem 0 var(--ink);
  background: linear-gradient(90deg, var(--chrome-hi) 0 8%, var(--chrome-1) 8% 50%, var(--chrome-2) 50%);
}
.fader-scale { position: absolute; left: .35rem; right: .35rem; top: .9rem; height: var(--track); border-bottom: .13rem solid var(--ink); background: repeating-linear-gradient(180deg, var(--ink) 0 .13rem, transparent .13rem 25%); }
.fader-slot { position: absolute; left: 50%; top: .9rem; height: var(--track); width: .7rem; margin-left: -.35rem; background: var(--ink); border-radius: .35rem; }
.fader-cap {
  position: absolute; left: 50%; width: 2.9rem; height: 1.6rem; margin-left: -1.45rem; top: calc(.9rem + (1 - var(--v)) * var(--track) - .8rem);
  background: linear-gradient(180deg, var(--chrome-hi) 0 14%, var(--chrome-1) 14% 44%, var(--chrome-3) 44% 52%, var(--chrome-2) 52%);
  border: .2rem solid var(--ink); box-shadow: .18rem .18rem 0 var(--ink);
}
.fader-cap::after { content: ""; position: absolute; left: .2rem; right: .2rem; top: 50%; height: .2rem; margin-top: -.1rem; background: var(--red); }
.fader:focus-visible .fader-cap { background: var(--yellow-light); }
.fader-label { position: absolute; left: 0; right: 0; bottom: .35rem; text-align: center; font: 400 .8rem/1 var(--font-display); text-transform: uppercase; }

/* Tasten-Spalte */
.keys { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; width: 11.4rem; }
.keys .btn { width: 100%; font-size: .95rem; padding: .6rem .5rem; }
.rocker {
  --sh: .3rem .3rem 0 var(--ink);
  appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: .6rem; height: 3.4rem; padding: 0 .6rem; cursor: pointer;
  border: .25rem solid var(--ink); box-shadow: var(--sh); touch-action: manipulation;
  background: linear-gradient(180deg, var(--chrome-hi) 0 10%, var(--chrome-1) 10% 46%, var(--chrome-3) 46% 52%, var(--chrome-2) 52%);
}
.rocker .ic { width: 2.2rem; height: 2.2rem; flex: none; }
.rocker .rk { position: relative; margin-left: auto; width: 4.4rem; height: 2.1rem; border: .2rem solid var(--ink); background: var(--red); transition: background-color .1s; }
.rocker .rk::after { content: ""; position: absolute; top: .15rem; bottom: .15rem; left: .15rem; width: 1.7rem; background: var(--cream); border: .18rem solid var(--ink); transition: transform .12s cubic-bezier(.3, 1.6, .5, 1); }
.rocker[aria-checked="true"] .rk { background: var(--petrol-light); }
.rocker[aria-checked="true"] .rk::after { transform: translateX(2.15rem); }

/* ---------- Hebel ---------- */
.side { display: flex; flex-direction: column; align-items: center; align-self: center; margin-left: -.8rem; gap: 1.6rem; }
.lever { position: relative; width: 13rem; height: 26rem; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.lever.grab { cursor: grabbing; }
.lever svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lever .lv-slot-o { fill: none; stroke: var(--ink); stroke-width: 20; stroke-linecap: round; }
.lever .lv-slot-i { fill: none; stroke: var(--chrome-4); stroke-width: 9; stroke-linecap: round; }
.lever .lv-plate { fill: var(--chrome-2); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.lever .lv-screw { fill: var(--chrome-hi); stroke: var(--ink); stroke-width: 2.5; }
.lever .lv-arm { fill: var(--chrome-1); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.lever .lv-arm-hi { fill: none; stroke: var(--chrome-hi); stroke-width: 3; stroke-linecap: round; }
.lever .lv-cup { fill: var(--red); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.lever .lv-grip { fill: var(--ink); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.lever .lv-band { fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; }
.lever .lv-cord-o { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.lever .lv-cord-i { fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lever .lv-bolt { fill: var(--chrome-1); stroke: var(--ink); stroke-width: 3; }
.lever .lv-bolt-dot { fill: var(--ink); }
.lever-label {
  position: absolute; left: .2rem; bottom: -.9rem; padding: .15rem .7rem; background: var(--yellow); color: var(--ink); border: .2rem solid var(--ink); box-shadow: .22rem .22rem 0 var(--ink);
  font: 400 1rem/1.3 var(--font-display); text-transform: uppercase; transform: rotate(-4deg); pointer-events: none;
}
.lever.busy { cursor: default; }

/* ---------- Hardcore: Schutzkappe + Gefahr-Schalter ---------- */
.hc { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-left: .8rem; }
.hc-label { padding: .1rem .9rem; background: var(--red); color: var(--cream); border: .22rem solid var(--ink); box-shadow: .22rem .22rem 0 var(--ink); font: 400 1rem/1.3 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.hc-box { position: relative; width: 7rem; height: 8.6rem; padding: .8rem; border: .3rem solid var(--ink); box-shadow: .3rem .3rem 0 var(--ink); background: repeating-linear-gradient(135deg, var(--yellow) 0 .75rem, var(--ink) .75rem 1.5rem); perspective: 40rem; }
.hc-sw {
  --sh: .0rem .0rem 0 transparent;
  appearance: none; -webkit-appearance: none; position: relative; display: block; width: 100%; height: 100%; padding: 0; cursor: pointer; border: .22rem solid var(--ink); box-shadow: var(--sh);
  background: linear-gradient(90deg, var(--chrome-hi) 0 8%, var(--chrome-1) 8% 48%, var(--chrome-2) 48%);
}
.hc-sw:disabled { cursor: default; }
.hc-pos { position: absolute; left: 0; right: 0; text-align: center; font: 400 .65rem/1 var(--font-display); text-transform: uppercase; color: var(--ink-a30); }
.hc-pos.on { top: .25rem; } .hc-pos.off { bottom: .25rem; }
.hc-sw[aria-checked="true"] .hc-pos.on { color: var(--ink); } .hc-sw[aria-checked="false"] .hc-pos.off { color: var(--ink); }
.hc-bat { position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1.2rem; margin-left: -.55rem; transform-origin: 50% 0; transform: rotate(0deg); background: linear-gradient(90deg, var(--chrome-hi) 0 25%, var(--chrome-2) 25% 65%, var(--chrome-3) 65%); border: .2rem solid var(--ink); transition: transform .14s cubic-bezier(.3, 1.7, .5, 1); }
.hc-bat::after { content: ""; position: absolute; left: 50%; bottom: -.8rem; width: 1.5rem; height: 1.5rem; margin-left: -.75rem; border-radius: 50%; border: .2rem solid var(--ink); background: var(--red); box-shadow: inset .25rem .25rem 0 var(--red-light); }
.hc-sw[aria-checked="true"] .hc-bat { transform: rotate(180deg); }
.hc-cap {
  --sh: .25rem .25rem 0 var(--ink);
  appearance: none; -webkit-appearance: none; position: absolute; left: .45rem; right: .45rem; top: .45rem; bottom: .45rem; z-index: 2; padding: 0; cursor: pointer;
  display: grid; place-items: center; border: .25rem solid var(--ink); box-shadow: var(--sh);
  background: repeating-linear-gradient(90deg, var(--red-light) 0 .5rem, var(--red) .5rem 1rem);
  color: var(--cream); font: 400 .75rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .05em; text-shadow: .08rem .08rem 0 var(--ink);
  transform-origin: 50% 0; transition: transform .5s cubic-bezier(.3, 1.35, .5, 1);
}
.hc-cap.open { transform: rotateX(-112deg); }
.hc.on .hc-cap { cursor: default; }

/* Plakette im Schild */
.hc-badge {
  position: absolute; right: 1.3rem; top: -1.1rem; z-index: 3; padding: .2rem .9rem; background: var(--red); color: var(--cream); border: .25rem solid var(--ink); box-shadow: .25rem .25rem 0 var(--ink);
  font: 400 1.1rem/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; transform: rotate(5deg) scale(0); opacity: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 .6rem, var(--glass-soft) .6rem 1.2rem); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), opacity .2s;
}
body.hardcore .hc-badge { transform: rotate(5deg) scale(1); opacity: 1; }

/* ---------- Seitenleiste ---------- */
.panel { width: 34rem; flex: none; display: flex; flex-direction: column; gap: 1.05rem; align-self: center; padding-top: .8rem; }

/* Einblendung "ANRUF BEI" */
.banner {
  position: relative; padding: 1.6rem 1.3rem .9rem; background: var(--red); color: var(--cream);
  border: .35rem solid var(--ink); box-shadow: .6rem .6rem 0 var(--ink); transform: rotate(-1.4deg); min-height: 9.6rem;
}
.banner::before { content: ""; position: absolute; inset: .45rem; border: .14rem dashed var(--cream); opacity: .55; pointer-events: none; }
.banner-tag {
  position: absolute; top: -1.35rem; left: 1.1rem; padding: .2rem 1rem; background: var(--yellow); color: var(--ink); border: .28rem solid var(--ink); box-shadow: .25rem .25rem 0 var(--ink);
  font: 400 1.2rem/1.2 var(--font-display); text-transform: uppercase; transform: rotate(-2.5deg);
}
.banner-body { display: flex; align-items: center; gap: 1.1rem; }
.banner-icon { flex: none; width: 5.4rem; height: 5.4rem; padding: .4rem; background: var(--cream); border: .28rem solid var(--ink); box-shadow: .25rem .25rem 0 var(--ink); transform: rotate(3deg); }
.banner-icon .ic { width: 100%; height: 100%; }
.banner-text { min-width: 0; flex: 1; }
.banner-name { font: 400 2.2rem/1.05 var(--font-display); text-transform: uppercase; text-shadow: .1rem .1rem 0 var(--ink), .2rem .2rem 0 var(--ink), .3rem .3rem 0 var(--ink); overflow-wrap: anywhere; }
.banner-sub { margin-top: .5rem; font: 600 1.2rem/1.15 var(--font-body); letter-spacing: .05em; text-transform: uppercase; opacity: .95; min-height: 1.2rem; }
.banner-tip { margin-top: .75rem; padding: .35rem .8rem; background: var(--ink); color: var(--yellow-light); font: 700 1.2rem/1.15 var(--font-body); letter-spacing: .02em; }
.banner.idle { background: var(--cream); color: var(--ink); }
.banner.idle::before { border-color: var(--ink); }
.banner.idle .banner-name { text-shadow: none; font-size: 1.9rem; }
.banner.idle .banner-icon { background: var(--yellow); }
.banner.waiting .banner-name { animation: blink .5s steps(2) infinite; }
.banner.pop { animation: pop-in .55s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes pop-in { 0% { transform: translateX(-3rem) rotate(-6deg) scale(.7); opacity: 0; } 100% { transform: rotate(-1.4deg); opacity: 1; } }
@keyframes blink { 50% { opacity: .3; } }

/* Notizzettel */
.notes-head { display: flex; align-items: center; justify-content: space-between; margin: 0 .2rem .6rem; }
.notes-head h2 { margin: 0; padding: .15rem .9rem; background: var(--cream); color: var(--ink); border: .22rem solid var(--ink); box-shadow: .22rem .22rem 0 var(--ink); font: 400 1.05rem/1.3 var(--font-display); text-transform: uppercase; transform: rotate(-1deg); }
.counter { padding: .2rem .9rem; background: var(--ink); color: var(--yellow); border: .18rem solid var(--cream); font: 400 1.1rem/1.3 var(--font-display); text-transform: uppercase; }
.counter b { font-weight: 400; color: var(--cream); }
.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.note-slot { position: relative; height: 3.6rem; border: .2rem dashed var(--ink-a30); background: var(--ink-a15); display: flex; align-items: center; padding-left: 1rem; }
.slot-n { font: 400 1.4rem var(--font-display); color: var(--cream); opacity: .45; }
.note {
  --sh: .3rem .3rem 0 var(--ink);
  appearance: none; -webkit-appearance: none; position: relative; width: 100%; height: 100%; display: flex; align-items: center; gap: 1rem; padding: .2rem 1.1rem .2rem .8rem; text-align: left; cursor: pointer;
  background: var(--note); color: var(--ink); border: .22rem solid var(--ink); box-shadow: var(--sh); transform: rotate(var(--rot, 0deg));
  touch-action: manipulation; transition: transform .1s;
}
.note-slot:has(.note) { border: 0; background: none; padding: 0; }
.note:hover { transform: rotate(var(--rot, 0deg)) translateY(-.15rem); }
.note::before { content: ""; position: absolute; top: -.75rem; left: 50%; width: 4.6rem; height: 1.3rem; margin-left: -2.3rem; background: var(--cream-deep); border: .12rem solid var(--ink-a30); transform: rotate(-3deg); }
.note-n { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; background: var(--red); color: var(--cream); border: .16rem solid var(--ink); font: 400 1rem/1 var(--font-display); }
.note-txt { flex: 1; min-width: 0; font-family: var(--font-hand); line-height: 1.1; }
.strike { position: absolute; left: 2.8rem; width: calc(100% - 3.4rem); top: 50%; height: 2rem; margin-top: -1rem; overflow: visible; pointer-events: none; }
.strike path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.strike path.b { stroke-width: 5; }
.note.done .strike path { stroke-dashoffset: 0; transition: stroke-dashoffset .22s ease-out; }
.note.done .strike path.b { transition-delay: .2s; }
.note.done { background: var(--cream-deep); }
.note.slap { animation: slap .4s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes slap { 0% { transform: rotate(var(--rot)) translateY(-2.2rem) scale(1.18); opacity: 0; } 100% { transform: rotate(var(--rot)); opacity: 1; } }

/* Joker-Einblendung */
.joker-card {
  position: relative; display: flex; align-items: center; gap: 1rem; padding: .65rem 1.1rem; color: var(--ink);
  background: repeating-linear-gradient(100deg, var(--gold-1) 0 .9rem, var(--gold-2) .9rem 1.15rem);
  border: .35rem solid var(--ink); box-shadow: .5rem .5rem 0 var(--ink); transform: rotate(1deg);
}
.joker-card .ic { width: 3.9rem; height: 3.9rem; flex: none; }
.joker-tag { display: inline-block; padding: .05rem .7rem; background: var(--ink); color: var(--gold-1); font: 400 1.05rem/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.joker-text { margin-top: .35rem; font-family: var(--font-display); text-transform: uppercase; line-height: 1.1; }
.joker-card.pop { animation: joker-in .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes joker-in { 0% { transform: translateX(4rem) rotate(8deg) scale(.7); opacity: 0; } 100% { transform: rotate(1deg); opacity: 1; } }

/* ---------- Gewinn ---------- */
.win { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; display: grid; place-items: center; }
.win-burst { position: relative; width: 42rem; height: 42rem; display: grid; place-items: center; }
.win.go .win-burst { animation: burst-in .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.win-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.win-burst polygon { fill: var(--yellow); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.win.go .win-burst svg { animation: spin-slow 9s linear infinite; }
.win-text { position: relative; text-align: center; font: 400 5.2rem/.95 var(--font-display); text-transform: uppercase; color: var(--red); transform: rotate(-5deg);
  text-shadow: .12rem .12rem 0 var(--ink), .24rem .24rem 0 var(--ink), .36rem .36rem 0 var(--ink), .48rem .48rem 0 var(--ink), -.1rem -.1rem 0 var(--cream); }
@keyframes burst-in { 0% { transform: scale(.1) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.conf { position: absolute; top: -3rem; border: .12rem solid var(--ink); animation: fall linear both; transform: translateX(0); }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--dx), 115vh) rotate(var(--rt)); } }

/* ---------- Ergebnis-Tasten ---------- */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.res {
  --sh: .32rem .32rem 0 var(--ink); --bg: var(--cream); --fg: var(--ink); --hi: var(--yellow-light);
  appearance: none; -webkit-appearance: none; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 3.5rem; padding: .4rem .5rem; background: var(--bg); color: var(--fg); border: .25rem solid var(--ink); border-radius: .35rem; box-shadow: var(--sh);
  font: 400 .98rem/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform .06s, box-shadow .06s, filter .1s;
}
.res .ic { width: 1.6rem; height: 1.6rem; flex: none; }
.res-ok { --bg: var(--petrol); --fg: var(--cream); --hi: var(--petrol-light); }
.res-hang { --bg: var(--red); --fg: var(--cream); --hi: var(--red-light); }
.res-seen { --bg: var(--yellow); --fg: var(--ink); --hi: var(--yellow-light); }
.res:hover:not(:disabled) { background: var(--hi); }
.res:active:not(:disabled), .res.chosen { --sh: .06rem .06rem 0 var(--ink); transform: translate(.26rem, .26rem); }
.res.chosen { box-shadow: var(--sh), inset 0 0 0 .22rem var(--cream), inset 0 0 0 .4rem var(--ink); }
.res:disabled {
  cursor: not-allowed; color: var(--ink-a30); --sh: .12rem .12rem 0 var(--ink-a30); border-color: var(--ink-a30);
  background: repeating-linear-gradient(135deg, var(--cream-deep) 0 .5rem, var(--cream) .5rem 1rem);
}
.res:disabled .ic { opacity: .35; filter: grayscale(1); }
.results:has(.chosen) .res:not(.chosen):not(:disabled) { filter: saturate(.55) brightness(.92); }
.results.ready .res { animation: res-wake .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.results.ready .res:nth-child(2) { animation-delay: .07s; } .results.ready .res:nth-child(3) { animation-delay: .14s; }
@keyframes res-wake { 0% { transform: translateY(.6rem) scale(.9); } 100% { transform: none; } }

/* ---------- Gummistempel über dem Automaten ---------- */
.cabinet > .stamp { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; }
.stamp-svg { width: 44rem; height: auto; overflow: visible; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, -11deg)); }
.stamp { --sc: var(--stamp-ok); }
.stamp.hang { --sc: var(--stamp-hang); } .stamp.seen { --sc: var(--stamp-seen); }
.st-paper { fill: var(--stamp-paper); }
.st-ink { fill: none; stroke: var(--sc); }
.st-o { stroke-width: 14; } .st-i { stroke-width: 5; }
.st-line { stroke-width: 4; }
.st-ink text { stroke: none; fill: var(--sc); text-anchor: middle; text-transform: uppercase; }
.st-top { font: 400 26px var(--font-display); letter-spacing: 4px; }
.st-word { font: 400 96px var(--font-display); letter-spacing: 2px; }
.st-sub { font: 700 34px var(--font-body); letter-spacing: 7px; }
.st-star { fill: var(--sc); stroke: none; }
.stamp.hit .stamp-svg { animation: stamp-hit .42s cubic-bezier(.5, 0, .75, .4) both; }
.stamp.hit::after {                                       /* kurzer Schatten/Staub beim Aufprall */
  content: ""; position: absolute; inset: 22% 4%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--ink-a30), transparent); opacity: 0; animation: stamp-dust .6s ease-out .18s both;
}
@keyframes stamp-hit {
  0%   { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) - 9deg)) scale(2.5); opacity: 0; }
  45%  { opacity: .9; }
  46%  { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.94); opacity: 1; animation-timing-function: cubic-bezier(.2, 1.6, .4, 1); }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 1; }
}
@keyframes stamp-dust { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.25); } }

/* ---------- Kreidetafel / Strichliste ---------- */
.board {
  position: relative; padding: 1.05rem 1.2rem .9rem; color: var(--chalk);
  background:
    radial-gradient(ellipse at 30% 20%, var(--glass-soft), transparent 60%),
    radial-gradient(ellipse at 75% 85%, var(--glass-soft), transparent 55%),
    var(--board);
  border: .6rem solid var(--board-frame); outline: .25rem solid var(--ink); outline-offset: 0;
  box-shadow: inset 0 0 0 .22rem var(--ink), .5rem .5rem 0 var(--ink), inset 0 0 2.2rem rgba(0, 0, 0, .35);
  border-image: repeating-linear-gradient(90deg, var(--board-frame) 0 2.2rem, var(--wood-3) 2.2rem 2.35rem, var(--board-frame) 2.35rem 3.4rem) 8;
}
.board::before { content: ""; position: absolute; inset: 0; background: url("../../assets/noise.svg"); opacity: .25; mix-blend-mode: screen; pointer-events: none; }
.chalk-tray { position: absolute; left: 18%; bottom: -.95rem; width: 3rem; height: .55rem; background: var(--chalk); border: .12rem solid var(--ink); border-radius: .2rem; transform: rotate(-4deg); }
.tally-grid { position: relative; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.6rem; }
.tally-row { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.tally-row dt { font: 400 1.1rem/1.1 var(--font-hand); letter-spacing: .02em; opacity: .92; }
.tally-row dd { margin: 0; display: flex; align-items: center; gap: .6rem; min-height: 2.3rem; }
.tally-row[data-k="calls"] dt { color: var(--chalk-hi); }
.tally { flex: 1; min-width: 0; height: 2.1rem; display: flex; align-items: center; gap: .3rem; overflow: hidden; filter: url(#f-chalk); }
.tg { flex: 0 1 2.5rem; min-width: .9rem; height: 100%; overflow: visible; }
.tg path { fill: none; stroke: var(--chalk); stroke-width: 3.2; stroke-linecap: round; }
.tg path.fresh { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chalk-draw .35s ease-out .15s forwards; }
@keyframes chalk-draw { to { stroke-dashoffset: 0; } }
.tally-more { font: 400 1.3rem/1 var(--font-hand); opacity: .8; }
.tally-n { flex: none; min-width: 2.2rem; text-align: right; font: 400 1.75rem/1 var(--font-hand); color: var(--chalk-hi); }
.tally-n.bump { animation: bump .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 0% { transform: scale(1.7) rotate(-8deg); } 100% { transform: none; } }
.board.wipe .tally-grid { animation: wipe .5s ease-out; }
@keyframes wipe { 0% { opacity: .1; filter: blur(.3rem); } 100% { opacity: 1; filter: none; } }

/* Löschen-Taste als Tafelschwamm-Plakette am Rahmen */
.board-reset { position: absolute; right: 1rem; top: -1.45rem; z-index: 3; display: flex; align-items: center; gap: .4rem; }
.eraser {
  --sh: .2rem .2rem 0 var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .65rem .18rem .5rem;
  background: linear-gradient(180deg, var(--cream) 0 55%, var(--wood-2) 55% 62%, var(--wood-1) 62%); color: var(--ink);
  border: .2rem solid var(--ink); border-radius: .3rem; box-shadow: var(--sh); font: 400 .75rem/1.25 var(--font-display); letter-spacing: .05em; text-transform: uppercase;
  touch-action: manipulation; transition: transform .06s, box-shadow .06s;
}
.eraser::before { content: ""; width: .7rem; height: .7rem; border: .16rem solid var(--ink); background: var(--chalk-hi); border-radius: .1rem; transform: rotate(12deg); }
.eraser:hover { background: linear-gradient(180deg, var(--yellow-light) 0 55%, var(--wood-2) 55% 62%, var(--wood-1) 62%); }
.eraser:active { --sh: .04rem .04rem 0 var(--ink); transform: translate(.16rem, .16rem); }
.confirm { display: flex; align-items: center; gap: .4rem; }
.confirm-q { padding: .12rem .55rem; background: var(--ink); color: var(--yellow); font: 400 .75rem/1.3 var(--font-display); text-transform: uppercase; border: .16rem solid var(--yellow); }
.eraser.yes { background: var(--red); color: var(--cream); }
.eraser.yes::before, .eraser.no::before { display: none; }
.eraser.yes:hover { background: var(--red-light); }
.eraser.no { background: var(--cream); }

/* ---------- Streamer-Modus (Desktop) ---------- */
/* Gegenstück zur Handy-Abfrage unten (gleiche Bedingung wie DESKTOP in assets/stream-frame.js) */
@media (min-width: 900.02px) and (min-aspect-ratio: 10001/10000) {
  /* Bühne 120 x 67,5 rem (assets/stream-frame.css). Links Automat + Hebel, rechts die Spalte am Fernseher. */
  .sf-on .topbar .back { display: none; }
  .sf-on .topbar { height: 3.25rem; padding: 0; }
  .sf-on .floor { justify-content: flex-start; gap: 1.2rem; padding: 0 0 .6rem .8rem; }
  /* rechte Spalte fest im Raster: Ansage über dem Fernseher, .sf-slot hält seinen Platz frei, darunter Wörter, Joker, Ergebnis */
  .sf-on .panel { position: absolute; left: var(--sf-col-x); top: 3.25rem; width: var(--sf-col-w); gap: .75rem; padding-top: .375rem; }
  .sf-on .banner { height: 8.4rem; min-height: 0; padding: 1.15rem 1.1rem .5rem; box-shadow: .45rem .45rem 0 var(--ink); }
  .sf-on .banner-tag { top: -1.15rem; font-size: 1rem; }
  .sf-on .banner-body { gap: .9rem; }
  .sf-on .banner-icon { width: 4.2rem; height: 4.2rem; padding: .3rem; }
  .sf-on .banner-name { font-size: 1.9rem; }
  .sf-on .banner.idle .banner-name { font-size: 1.6rem; }
  .sf-on .banner-sub { margin-top: .25rem; font-size: 1rem; }
  .sf-on .banner-tip { position: absolute; left: 1.1rem; right: 1.1rem; bottom: .5rem; margin: 0; padding: .15rem .6rem; font-size: .95rem; }
  .sf-on .banner:has(.banner-tip:not([hidden])) .banner-body { margin-top: -.35rem; }
  .sf-on .notes-head { margin-bottom: .35rem; }
  .sf-on .notes-head h2 { font-size: .9rem; }
  .sf-on .counter { font-size: .95rem; padding: .1rem .7rem; }
  .sf-on .notes { gap: .42rem; }
  .sf-on .note-slot { height: 2.75rem; }
  .sf-on .note { padding: .1rem 1rem .1rem .6rem; gap: .8rem; }
  .sf-on .note::before { width: 3.4rem; height: 1rem; top: -.55rem; margin-left: -1.7rem; }
  .sf-on .note-n { width: 1.6rem; height: 1.6rem; font-size: .85rem; }
  .sf-on .strike { left: 2.4rem; width: calc(100% - 3rem); }
  .sf-on .joker-card { padding: .4rem .9rem; gap: .8rem; box-shadow: .4rem .4rem 0 var(--ink); }
  .sf-on .joker-card .ic { width: 2.7rem; height: 2.7rem; }
  .sf-on .joker-tag { font-size: .85rem; }
  .sf-on .joker-text { margin-top: .15rem; }
  .sf-on .res { min-height: 3.2rem; }
  /* kompakte Tafel in der Hebel-Spalte */
  .sf-on .side { gap: 1.4rem; }
  .sf-on .side .board-slot { width: 13.4rem; margin: .4rem 0 0 .6rem; }
  .sf-on .side .board { padding: .85rem .75rem .6rem; border-width: .5rem; }
  .sf-on .side .tally-grid { grid-template-columns: 1fr; gap: .2rem; }
  .sf-on .side .tally-row dt { font-size: .95rem; }
  .sf-on .side .tally-row dd { min-height: 1.9rem; gap: .4rem; }
  .sf-on .side .tally { height: 1.75rem; gap: .2rem; }
  .sf-on .side .tally-n { font-size: 1.4rem; min-width: 1.8rem; }
  .sf-on .side .board-reset { right: .5rem; top: -1.3rem; }
  .sf-on .side .confirm { gap: .25rem; }
  .sf-on .side .confirm-q { font-size: .62rem; padding: .1rem .35rem; }
  .sf-on .side .confirm .eraser { padding: .15rem .45rem; }
  .sf-on .side .chalk-tray { bottom: -.85rem; }
}

/* ---------- Handy / Hochformat ---------- */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  html { font-size: 2.5vw; overflow-x: hidden; }
  body.tp { height: auto; overflow-x: hidden; overflow-y: auto; }
  .topbar { padding: .8rem 1rem .2rem; }
  .floor { flex-direction: column; align-items: center; padding: .6rem 0 3rem; gap: 2.6rem; }
  .rig { width: 39rem; align-items: flex-start; }
  .cabinet { width: 32.4rem; padding: 1rem 1.2rem 1.4rem; gap: .9rem; border-radius: 1.8rem 1.8rem .8rem .8rem; box-shadow: .6rem .6rem 0 var(--ink); }
  .marquee { height: 4.8rem; gap: .8rem; }
  .marquee h1 { font-size: 2rem; }
  .marquee .star { display: none; }
  .main-frame { padding: 1.1rem; }
  .main-frame .bulbs { inset: .5rem; }
  .main-frame .reel-win { height: 10rem; }
  .r-icon { width: 3.6rem; height: 3.6rem; }
  .words { grid-template-columns: 1fr; gap: .6rem; }
  .word-unit { flex-direction: row; gap: .6rem; }
  .word-unit .plate { order: -1; min-width: 1.8rem; padding: .1rem .3rem; }
  .word-frame .reel-win { height: 4.8rem; }
  .controls { flex-wrap: wrap; justify-content: center; gap: .8rem 1rem; padding: .8rem; }
  .joker-unit { width: 100%; justify-content: center; }
  .joker-frame { width: 17rem; }
  .buzzer { width: 7.6rem; height: 7.6rem; } .buzzer .cap { inset: .8rem; font-size: 1.15rem; }
  .keys { width: 11rem; }
  .side { margin-left: -.6rem; margin-top: 3rem; gap: .6rem; }
  .lever { width: 6.4rem; height: 14.6rem; margin-left: 0; margin-top: 0; }
  .hc { margin-left: 0; transform: scale(.62); transform-origin: top center; margin-bottom: -3.2rem; }
  .fader { height: 8rem; --track: 5.2rem; }
  .lever-label { display: none; }
  .panel { width: 36rem; }
  .win-burst { width: 30rem; height: 30rem; } .win-text { font-size: 3.6rem; }
  .stamp-svg { width: 30rem; }
}

@media (prefers-reduced-motion: reduce) {
  .banner.waiting .banner-name { animation: none; }
  .win.go .win-burst svg { animation: none; }
  .shutter, .toggle-lever, .rocker .rk::after { transition: none; }
  .stamp.hit .stamp-svg { animation-duration: .01s; }
  .stamp.hit::after, .results.ready .res, .tally-n.bump { animation: none; }
  .tg path.fresh { animation-duration: .01s; animation-delay: 0s; }
}