/* ================================================================ Modus „Der Preis ist heiß“: 80er/90er-TV-Studio
   Rosa-violettes Studio mit Glitzer-Sonnenstrahlen, Glühbirnen, gelben Preisschildern und LED-Pulten.
   Gilt für Host (body.host) und Handy (body.play), sobald body[data-mode="price"] gesetzt ist. */

body[data-mode="price"] {
  --ink: #2a0845;
  --ink-soft: #6b2c7a;
  --bg1: #1f0536;
  --bg2: #4a0b5c;
  --paper: #fffaf2;
  --paper-2: #ffeef8;
  --pink: #ff2e88;
  --hot: #ff2e88;
  --gold: #ffd23f;
  --yellow: #ffd23f;
  --orange: #ff8a1f;
  --red: #ef233c;
  --green: #22c55e;
  --blue: #2f7df6;
  --purple: #8b3dff;
  --cyan: #22d3ee;
  --opt-0: #ff2e88;
  --opt-1: #2f7df6;
  --opt-2: #ff8a1f;
  --opt-3: #16b364;
  --tag: #ffd23f;
  --tag-ink: #d7102f;
  --led: #ff3b30;
  --radius: 20px;
  --shadow: 0 6px 0 rgba(30, 2, 45, 0.55);
  --shadow-sm: 0 3px 0 rgba(30, 2, 45, 0.55);
  --font-head: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-show: 'Shrikhand', 'Fredoka', serif;
  --font-led: 'Bebas Neue', 'Oswald', 'Fredoka', sans-serif;
}

/* ------------------------------------------------------------ Hintergrund: Studio mit Sonnenstrahlen */
body[data-mode="price"] .bg {
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 90, 170, 0.55), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 110%, rgba(255, 138, 31, 0.35), transparent 70%),
    linear-gradient(180deg, #3b0a52 0%, #26063d 60%, #16031f 100%);
}
body[data-mode="price"] .bg::before {
  inset: -60%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 210, 63, 0.16) 0deg 7deg, rgba(255, 46, 136, 0.1) 7deg 14deg, transparent 14deg 22.5deg);
  animation: priceRays 80s linear infinite;
  opacity: 0.85;
}
@keyframes priceRays { to { transform: rotate(360deg); } }
/* Glühbirnen-Leiste oben und unten */
body[data-mode="price"] .bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, #fff6c8 0 3px, rgba(255, 210, 63, 0.7) 4px, transparent 7px) 0 6px / 34px 34px repeat-x,
    radial-gradient(circle, #fff6c8 0 3px, rgba(255, 210, 63, 0.7) 4px, transparent 7px) 17px calc(100% - 6px) / 34px 34px repeat-x;
  animation: bulbs 1.2s steps(2) infinite;
}
@keyframes bulbs { 50% { filter: brightness(0.55) hue-rotate(-20deg); } }
body[data-mode="price"] .bg .blob { opacity: 0.45; }
body[data-mode="price"] .bg .blob.b1 { background: #ff2e88; }
body[data-mode="price"] .bg .blob.b2 { background: #ffd23f; }
body[data-mode="price"] .bg .blob.b3 { background: #8b3dff; }

/* Logo & Überschriften im Show-Stil */
body[data-mode="price"] .logo { font-family: var(--font-show); letter-spacing: 0.01em; }
body[data-mode="price"] .logo span:nth-child(odd) { color: var(--gold); }
body[data-mode="price"] .logo span:nth-child(even) { color: #fff; }
body[data-mode="price"] .logo-sub, body[data-mode="price"] .editionbadge { font-family: var(--font-show); letter-spacing: 0.04em; text-transform: none; color: var(--gold); text-shadow: 0 3px 0 var(--pink), 0 5px 0 var(--ink); }
/* Startbildschirm: der Showtitel ist hier die Hauptsache */
body[data-mode="price"] .splash .logo-sub { font-size: clamp(1.8rem, min(3.4vw, 6vh), 3.6rem); opacity: 1; transform: rotate(-3deg); margin-top: -0.3em; animation: stamp 0.6s 0.3s var(--ease-back) both; }
body[data-mode="price"] .intro .rname, body[data-mode="price"] .scores h1, body[data-mode="price"] .podium h1 { font-family: var(--font-show); letter-spacing: 0.01em; }
body[data-mode="price"] .card { border-width: 3px; }
body[data-mode="price"] .btn { font-family: var(--font-head); }

/* Quizzly als Showmaster: Stabmikro, Preisschild am Ohr, goldene Fliege */
body[data-mode="price"] .quizzly .qz-mic, body[data-mode="price"] .quizzly .qz-pricetag { display: inline; }
body[data-mode="price"] .quizzly .qz-cap { display: none; }
body[data-mode="price"] .quizzly .qz-bow path:not([stroke-opacity]) { fill: #ffd23f; }
body[data-mode="price"] .quizzly .qz-bow rect { fill: #fff1a8; }
body[data-mode="price"] .quizzly .qz-pricetag g { transform-origin: 40px 90px; animation: tagSwing 2.6s ease-in-out infinite; }
@keyframes tagSwing { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(-4deg); } }

/* Lobby: Showtitel unter dem Logo, Reiter & Beitrittskarte im Show-Stil */
body[data-mode="price"] .editionbadge { display: inline-block; position: absolute; left: calc(6.5rem + 1.6rem); bottom: -1.3rem; font-size: 1.75rem; line-height: 1; white-space: nowrap; transform: rotate(-4deg); animation: stamp 0.5s var(--ease-back) both; pointer-events: none; }
body[data-mode="price"] .insertcoin { display: block; font-family: var(--font-show); font-size: 1.25rem; line-height: 1.15; color: #e0156f; text-shadow: 0 2px 0 #ffd23f; margin-top: 0.9rem; animation: showHint 1.1s ease-in-out infinite alternate; }
@keyframes showHint { from { transform: rotate(-1.5deg) scale(1); } to { transform: rotate(1deg) scale(1.04); } }
.shopsel .livest { text-transform: none; letter-spacing: 0; font-weight: 700; opacity: 0.9; }
.shopsel .livest.busy { animation: pulse 0.9s ease-in-out infinite alternate; display: inline-block; }
.lobbyv .pricenote { display: none; font-family: var(--font-show); color: var(--gold); font-size: 20px; text-shadow: 0 2px 0 var(--pink), 0 4px 0 var(--ink); }
body.play[data-mode="price"] .lobbyv .pricenote { display: block; }
body.play[data-mode="price"] .lobbyv .gamingnote, body.play[data-mode="price"] .lobbyv .filmnote, body.play[data-mode="price"] .lobbyv .musicnote { display: none; }

/* Rundenintro: Strahlen + großes Preisschild */

/* ================================================================ Bausteine (Host + Handy) */

/* Preisschild: gelb, mit Kerbe, Loch und Schnur */
.ptag {
  --tagc: var(--tag, #ffd23f);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5em;
  padding: 0.25em 0.9em 0.25em 1.35em;
  background: var(--tagc);
  color: var(--tag-ink, #d7102f);
  font-family: var(--font-led);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  line-height: 1.05;
  clip-path: polygon(0.8em 0, 100% 0, 100% 100%, 0.8em 100%, 0 50%);
  filter: drop-shadow(0 3px 0 var(--ink, #2a0845));
  white-space: nowrap;
  transform-style: preserve-3d;
}
.ptag::before { content: ''; position: absolute; left: 0.55em; top: 50%; width: 0.36em; height: 0.36em; margin-top: -0.18em; border-radius: 50%; background: var(--ink, #2a0845); }
.ptag .pt { position: relative; }
.ptag.hidden-price .pt { opacity: 0.55; }
.pcard > .ptag.hidden-price:not(.flip) { animation: tagDangle 2.8s ease-in-out infinite; transform-origin: 0.7em 50%; }
@keyframes tagDangle { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(2deg); } }
.ptag.flip { animation: tagFlip 0.5s ease both; }
.ptag.shown .pt { opacity: 1; }
.ptag.big { font-size: 3.2rem; }
@keyframes tagFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

/* Produktkarte */
.pcard { position: relative; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); overflow: visible; animation: popIn 0.5s var(--ease-back) both; }
.pcard .pimg { position: relative; background: #fff; border-radius: calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0 0; display: grid; place-items: center; overflow: hidden; height: 11rem; }
.pcard .pimg img { max-width: 92%; max-height: 92%; object-fit: contain; display: block; }
.pcard .pimgfb { display: none; font-size: 4rem; text-align: center; line-height: 1.1; }
.pcard .pimg.noimg .pimgfb { display: block; }
.pimgfb small { display: block; font-size: 0.8rem; font-weight: 800; opacity: 0.55; letter-spacing: 0.04em; }
.pcard .pinfo { padding: 0.6rem 0.9rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; }
.pcard .pname { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .psub { font-size: 0.9rem; opacity: 0.7; line-height: 1.25; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .pshop { align-self: flex-start; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; background: var(--paper-2); border: 2px solid rgba(42, 8, 69, 0.2); border-radius: 99px; padding: 0.05rem 0.6rem; }
.pcard > .ptag { position: absolute; top: -0.9rem; right: -1rem; transform: rotate(8deg); z-index: 3; }
.pcard.big .pimg { height: min(calc(38 * var(--vq)), 26rem); }
.pcard.big .pname { font-size: clamp(1.5rem, 2.1vw, 2.6rem); }
.pcard.big .psub { font-size: 1.1rem; }
.pcard.big > .ptag { font-size: 2.6rem; top: -1.3rem; right: -1.4rem; }
.pstamp { margin: 0 0.9rem 0.7rem; align-self: flex-start; font-size: 0.85rem; font-weight: 800; background: #e9fbe9; color: #125c2b; border: 2px solid #22c55e; border-radius: 99px; padding: 0.1rem 0.7rem; animation: popIn 0.4s var(--ease-back) both; }

.pready { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; }
.pready .prtitle { font-family: var(--font-show); font-size: clamp(1.8rem, 3vw, 3.6rem); color: var(--gold); text-shadow: 0 3px 0 var(--pink), 0 6px 0 var(--ink); animation: slideDown 0.5s var(--ease-out) both; text-align: center; }
.pready .pcard { width: min(34rem, 60vw); }

/* LED-Pult (Ratepult & Superpreis). Alles am Pult bemisst sich an seiner Breite --lw (1em = --lw / 11): das
   Ratepult rechnet --lw aus dem freien Platz und der Spielerzahl aus (fitLecterns), sonst gelten die Vorgaben. */
.lecterns { --lw: 11rem; display: flex; flex-wrap: wrap; gap: calc(var(--lw) * 0.08); justify-content: center; align-content: flex-start; }
.lectern { position: relative; width: var(--lw); font-size: calc(var(--lw) / 11); display: flex; flex-direction: column; align-items: center; animation: slideUp 0.45s var(--ease-back) both; }
.lectern .avatar { --size: calc(var(--lw) * 0.3) !important; }
.lectern .led { width: 100%; background: #140211; color: var(--led); border: 3px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; font-family: var(--font-led); font-size: 2.1em; text-align: center; padding: 0.07em 0.15em; text-shadow: 0 0 10px rgba(255, 59, 48, 0.9); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; }
.lectern.empty .led { color: rgba(255, 59, 48, 0.3); text-shadow: none; }
.lectern.struck .led { text-decoration: line-through; color: rgba(255, 255, 255, 0.35); text-shadow: none; }
.lectern.lit .led { animation: ledOn 0.5s ease; }
@keyframes ledOn { 0%, 40% { color: #fff; text-shadow: 0 0 20px #fff; } }
.lectern .lbody { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 0.5em 0.4em 0.6em; background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 60%, #000)); border: 3px solid var(--ink); border-radius: 0 0 16px 16px; clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.2); }
.lectern .lnm { font-family: var(--font-head); font-size: max(0.75rem, 1em); font-weight: 600; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lectern.over { filter: grayscale(0.7) brightness(0.7); }
.lectern.win { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(255, 210, 63, 0.9)); z-index: 2; }
.lectern.win .led { color: #ffe066; text-shadow: 0 0 14px rgba(255, 224, 102, 0.9); }
.lectern .lstamp { position: absolute; top: 38%; left: 50%; transform: translateX(-50%) rotate(-10deg); font-family: var(--font-head); font-weight: 700; font-size: max(0.8rem, 1.1em); padding: 0.1rem 0.6rem; border: 3px solid currentColor; border-radius: 8px; background: rgba(255, 255, 255, 0.95); white-space: nowrap; animation: stamp 0.45s var(--ease-back) both; }
.lectern .lstamp.over { color: #d7102f; }
.lectern .lstamp.win { color: #0f7a36; }
.lectern.secret .led { color: #7dffa8; text-shadow: 0 0 10px rgba(125, 255, 168, 0.8); font-size: 1.6em; }
.lectern .lpts { position: absolute; bottom: -0.6em; left: 50%; transform: translateX(-50%); font-family: var(--font-head); font-weight: 700; font-size: max(0.8rem, 1em); color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 99px; padding: 0 0.6rem; white-space: nowrap; animation: popIn 0.4s var(--ease-back) both; }

/* ================================================================ Host: Ratepult */
/* Produkt links füllt seine Spalte (Bild nimmt, was der Text übrig lässt), rechts füllen die Pulte den Rest */
.bidwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(18rem, 38%) 1fr; grid-template-rows: minmax(0, 1fr); gap: 2.2rem; padding-top: 1rem; }
.bidleft { min-height: 0; display: flex; flex-direction: column; }
.bidleft .pcard { width: 100%; max-height: 100%; min-height: 0; }
.bidleft .pcard.big .pimg { height: auto; flex: 1 1 26rem; min-height: 7rem; max-height: 26rem; }
.bidright { min-height: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.bidright .lecterns { flex: 1; min-height: 0; padding: 0 0.8rem 0.8rem; }
.rule-banner { align-self: center; font-family: var(--font-show); font-size: clamp(1.6rem, 2.6vw, 3rem); color: var(--gold); text-shadow: 0 3px 0 var(--pink), 0 6px 0 var(--ink); text-align: center; animation: slideDown 0.5s var(--ease-out) both; }
.rule-banner.alarm { color: #fff; text-shadow: 0 3px 0 var(--red), 0 6px 0 var(--ink); animation: shake 0.5s; }

/* Teurer oder billiger */
.hilowrap { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; gap: 2.4rem; align-items: center; padding: 1rem 2rem 0; }
.hilowrap .pcard .pimg { height: min(calc(34 * var(--vq)), 22rem); }
.hilowrap .pcard .pname { font-size: clamp(1.3rem, 1.8vw, 2.2rem); }
.hilowrap .pcard > .ptag { font-size: 2.4rem; }
.hlmid { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hlvs { font-family: var(--font-show); font-size: 4rem; color: var(--gold); text-shadow: 0 4px 0 var(--ink); }
.hlarrow { position: relative; display: flex; flex-direction: column; align-items: center; font-size: 3.2rem; line-height: 1; padding: 0.6rem 1.2rem; border-radius: 18px; border: 3px solid var(--ink); background: rgba(255, 255, 255, 0.12); min-width: 9rem; transition: all 0.3s var(--ease-back); }
.hlarrow small { font-family: var(--font-head); font-size: 1.1rem; letter-spacing: 0.12em; }
.hlarrow.up { color: #7dffa8; }
.hlarrow.down { color: #ff9aa8; }
.hlarrow .who { display: flex; flex-wrap: wrap; gap: 0.2rem; justify-content: center; margin-top: 0.4rem; max-width: 12rem; }
.hlarrow .who .avatar { --size: 2.4rem !important; }
.hlarrow.right { background: var(--green); color: #fff; transform: scale(1.12); box-shadow: 0 0 22px rgba(34, 197, 94, 0.8); }
.hlarrow.wrong { opacity: 0.35; transform: scale(0.9); }
.hilowrap.readying .hlmid { opacity: 0.4; }

/* Mehr oder weniger */
.clockwrap { flex: 1; display: grid; grid-template-columns: minmax(18rem, 36%) 1fr; gap: 2rem; align-items: start; padding-top: 1rem; }
.clright { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.stopwatch { width: 10rem; height: 10rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #ffe7f3); border: 5px solid var(--ink); box-shadow: var(--shadow), inset 0 0 0 6px var(--gold); position: relative; }
.stopwatch::before { content: ''; position: absolute; top: -1.2rem; left: 50%; width: 1.6rem; height: 1rem; margin-left: -0.8rem; background: var(--gold); border: 4px solid var(--ink); border-radius: 6px; }
.swface { position: absolute; inset: 0; display: grid; place-items: center; }
.swface .hand { position: absolute; left: 50%; top: 12%; width: 0.35rem; height: 38%; margin-left: -0.175rem; background: var(--red); border-radius: 4px; transform-origin: 50% 100%; }
.swface .swnum { font-family: var(--font-led); font-size: 3rem; color: var(--ink); margin-top: 3.4rem; }
.cllanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.6rem; width: 100%; }
.clane { display: flex; align-items: center; gap: 0.6rem; background: rgba(20, 2, 30, 0.45); border: 2px solid rgba(255, 255, 255, 0.18); border-radius: 99px; padding: 0.3rem 0.9rem 0.3rem 0.3rem; animation: slideLeft 0.4s var(--ease-back) both; }
.clane .lnm { font-family: var(--font-head); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clane .cnt { font-size: 0.85rem; opacity: 0.7; font-weight: 800; white-space: nowrap; }
.clane .dir { font-family: var(--font-led); font-size: 1.5rem; min-width: 6rem; text-align: right; white-space: nowrap; }
.clane .dir.more { color: #7dffa8; }
.clane .dir.less { color: #ff9aa8; }
.clane .dir.hit { color: var(--gold); }
.clane .dir small { font-family: var(--font-head); font-size: 0.85rem; opacity: 0.85; }
.clane.solved { background: rgba(34, 197, 94, 0.35); border-color: var(--green); }

/* Absturz */
.cliffwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(16rem, 30%) 1fr; gap: 1.6rem; align-items: start; padding-top: 0.6rem; }
.cfcount { font-family: var(--font-show); font-size: 1.6rem; color: var(--gold); text-shadow: 0 3px 0 var(--ink); margin-bottom: 0.8rem; }
.cfleft .pcard .pimg { height: min(calc(30 * var(--vq)), 20rem); }
.mtbox { position: relative; width: 100%; aspect-ratio: 1000 / 560; max-height: calc(62 * var(--vq)); }
.mountain { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35)); }
.mountain .stepdot { fill: #fff; stroke: #1b2a1a; stroke-width: 2; }
.mountain .steplbl { font: 700 20px 'Fredoka', sans-serif; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #1b2a1a; stroke-width: 4px; }
.mountain .cliffsign { font: 700 30px 'Fredoka', sans-serif; fill: #ffd23f; paint-order: stroke; stroke: #2a0845; stroke-width: 6px; }
.climbers { position: absolute; inset: 0; }
.climber { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; transition: left 2.4s cubic-bezier(.4, 0, .3, 1), top 2.4s cubic-bezier(.4, 0, .3, 1); z-index: 2; }
.climber .hat { font-size: 1.4rem; margin-bottom: -0.7rem; z-index: 2; filter: drop-shadow(0 2px 0 #000); }
.climber.moving .avatar { animation: climbBob 0.35s ease-in-out infinite alternate; }
@keyframes climbBob { to { transform: translateY(-5px) rotate(6deg); } }
.climber .cbid { position: absolute; top: 100%; margin-top: 0.1rem; font-size: 0.8rem; font-weight: 900; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 0 0.4rem; white-space: nowrap; }
.climber.falling { transition: none; animation: cliffFall 1.4s cubic-bezier(.5, 0, 1, 1) forwards; }
@keyframes cliffFall { 0% { transform: translate(-50%, -100%) rotate(0); } 20% { transform: translate(-20%, -110%) rotate(60deg); } 100% { transform: translate(40%, 420%) rotate(720deg); opacity: 0; } }
.climber.gone { display: none; }

/* Stopp-Preis */
.rangewrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(18rem, 36%) 1fr; gap: 2rem; align-items: start; padding-top: 1rem; }
.rgright { display: flex; gap: 1.4rem; align-items: stretch; height: min(calc(56 * var(--vq)), 36rem); }
.scale { position: relative; width: min(32rem, 70%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)); border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); margin-left: 6rem; }
.scale .tick { position: absolute; left: -0.2rem; right: 0; border-top: 2px dashed rgba(255, 255, 255, 0.3); }
.scale .tick span { position: absolute; right: 100%; transform: translateY(-50%); margin-right: 0.7rem; font-family: var(--font-led); font-size: 1.4rem; white-space: nowrap; }
.rwin { position: absolute; left: 6%; right: 6%; bottom: 0; background: rgba(255, 210, 63, 0.35); border: 4px solid var(--gold); border-radius: 12px; box-shadow: 0 0 24px rgba(255, 210, 63, 0.7), inset 0 0 18px rgba(255, 255, 255, 0.4); }
.rwin.dim { opacity: 0.2; }
.stopcols { position: absolute; inset: 0; }
.scol { position: absolute; background: color-mix(in srgb, var(--pc) 70%, transparent); border: 3px solid var(--ink); border-radius: 10px; animation: popIn 0.4s var(--ease-back) both; }
.scol .scav { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.2rem; }
.scol.hit { box-shadow: 0 0 0 3px #fff, 0 0 20px var(--green); }
.scol.miss { opacity: 0.35; filter: grayscale(0.8); }
.pline { position: absolute; left: -1rem; right: -1rem; height: 0; border-top: 5px solid var(--red); transition: bottom 1.6s cubic-bezier(.3, .8, .4, 1); z-index: 3; }
.pline span { position: absolute; right: -0.5rem; top: -1.3rem; transform: translateX(100%); background: var(--red); color: #fff; font-family: var(--font-led); font-size: 1.5rem; padding: 0 0.5rem; border-radius: 6px; border: 2px solid var(--ink); }
.stopped { display: flex; flex-direction: column; gap: 0.4rem; flex-wrap: wrap; align-content: flex-start; }
.stopchip { display: flex; align-items: center; gap: 0.4rem; background: rgba(20, 2, 30, 0.5); border-radius: 99px; padding: 0.2rem 0.8rem 0.2rem 0.3rem; font-weight: 800; }

/* Der Preis fällt! */
.dropwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(18rem, 36%) 1fr; gap: 2rem; align-items: start; padding-top: 1rem; }
.drright { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }
.ledbox { background: #140211; border: 5px solid var(--ink); border-radius: 22px; padding: 0.6rem 2.2rem 0.9rem; text-align: center; box-shadow: var(--shadow), inset 0 0 30px rgba(255, 59, 48, 0.25); position: relative; }
.ledbox small { font-family: var(--font-head); letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }
.bigled { font-family: var(--font-led); font-size: clamp(4rem, 8vw, 9rem); color: var(--led); text-shadow: 0 0 22px rgba(255, 59, 48, 0.9); line-height: 1; min-width: 5ch; font-variant-numeric: tabular-nums; }
.ledarrow { position: absolute; right: -2.4rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; color: var(--led); animation: bounce 0.6s ease-in-out infinite; }
.drstrikes { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; max-width: 60rem; }
.strike { position: relative; display: flex; align-items: center; gap: 0.5rem; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-left: 10px solid var(--pc); border-radius: 14px; padding: 0.3rem 0.9rem 0.3rem 0.5rem; box-shadow: var(--shadow-sm); font-weight: 800; }
.strike .sv { font-family: var(--font-led); font-size: 1.6rem; color: var(--tag-ink); }
.strike .sres { font-size: 0.85rem; font-weight: 900; margin-left: 0.3rem; }
.strike.ok .sres { color: #0f7a36; }
.strike.late { opacity: 0.55; }
.strike.late .sres { color: #d7102f; }
.strike.best { transform: scale(1.1); box-shadow: 0 0 0 4px var(--gold), 0 0 22px rgba(255, 210, 63, 0.8); }

/* Zu teuer! */
.tmwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(18rem, 34%) 1fr; gap: 2rem; align-items: start; padding-top: 0.6rem; }
.tmright { display: flex; gap: 1.2rem; align-items: flex-start; justify-content: center; min-width: 0; }
.tmboard { flex: 1; max-width: 48rem; background: linear-gradient(180deg, #2b0f55, #1a0736); border: 5px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow), inset 0 0 0 4px rgba(255, 210, 63, 0.5); padding: 0.3rem 1rem 0.8rem; }
.tmtitle { font-family: var(--font-show); font-size: clamp(1.5rem, 2.2vw, 2.4rem); color: var(--gold); text-shadow: 0 3px 0 var(--pink), 0 5px 0 var(--ink); display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 0.3rem; }
.tmtitle .bulbs { width: 4rem; height: 1rem; background: radial-gradient(circle, #fff6c8 0 3px, #ffd23f 4px, transparent 6px) 0 0 / 1rem 1rem repeat-x; animation: bulbs 0.8s steps(2) infinite; }
.tmrows { position: relative; display: flex; flex-direction: column-reverse; gap: 0.3rem; }
.tmrow { position: relative; display: flex; align-items: center; gap: 0.8rem; height: min(calc(5.6 * var(--vq)), 3.3rem); padding: 0 0.5rem; border-radius: 12px; transition: background 0.3s; }
.tmrow .tmno { flex: none; width: 1.6rem; text-align: right; font-family: var(--font-led); font-size: 1.3rem; color: rgba(255, 255, 255, 0.45); }
.tmrow .ptag { flex: none; font-size: clamp(1.3rem, 2vw, 2rem); min-width: 6.4em; transition: transform 0.3s var(--ease-back); }
.tmrow:not(.open) .ptag { --tagc: #4b2a6e; color: rgba(255, 255, 255, 0.35); }
.tmrow.cur { background: rgba(255, 210, 63, 0.16); }
.tmrow.cur .ptag { transform: scale(1.08) translateX(0.3rem); filter: drop-shadow(0 0 12px rgba(255, 210, 63, 0.9)) drop-shadow(0 3px 0 var(--ink)); }
.tmrow.ok .ptag { --tagc: #b9f5c9; color: #0f5a2a; }
.tmrow.over .ptag { --tagc: #ffb3bd; color: #8a0a1d; }
.tmrow.first { background: rgba(239, 35, 60, 0.28); }
.tmrow.first::after { content: 'ZU TEUER!'; position: absolute; right: 1rem; top: 0.1rem; transform: rotate(-4deg); font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; line-height: 1.3; color: #d7102f; background: #fff; border: 3px solid #d7102f; border-radius: 8px; padding: 0 0.5rem; animation: stamp 0.45s var(--ease-back) both; }
.tmrow .tmwho { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 0.25rem; align-items: center; padding-right: 9.5rem; }
.tmrow .tmwho.tight .tmav b { display: none; }
.tmrow .tmwho.tight .tmav { padding: 0.05rem; }
.tmprice { position: absolute; left: -0.4rem; right: -0.4rem; height: 0; border-top: 4px dashed var(--red); z-index: 3; transform-origin: left; animation: barGrow 0.6s var(--ease-out) both; }
.tmprice .ptag { position: absolute; right: 0.4rem; top: 0; transform: translateY(-50%) rotate(-3deg); font-size: 1.4rem; min-width: 0; --tagc: #fff; color: var(--red); animation: popIn 0.45s 0.3s var(--ease-back) both; }
.tmprice .ptag small { display: block; font-family: var(--font-head); font-weight: 900; font-size: 0.42em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.tmav { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.05rem 0.6rem 0.05rem 0.1rem; border-radius: 99px; border: 2px solid var(--ink); font-weight: 800; font-size: 0.9rem; animation: popIn 0.4s var(--ease-back) both; }
.tmav b { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmav .avatar { --size: 1.7rem !important; }
.tmav.hit { background: var(--green); color: #fff; box-shadow: 0 0 14px rgba(34, 197, 94, 0.8); }
.tmav.near { background: var(--gold); color: var(--ink); }
.tmav.miss { background: var(--red); color: #fff; }
.tmwrap.many .tmav b { display: none; }
.tmwrap.many .tmav { padding: 0.12rem; }
.tmwrap.many .tmav .avatar { --size: 1.6rem !important; }
.tmwrap.many .tmav + .tmav { margin-left: -0.45rem; }
.tmstopped { flex: none; width: 13rem; }
/* „Nicht gedrückt“: Avatare umbrechen und überlappen statt über den Rand zu laufen */
.stopchip.nopress { flex-wrap: wrap; border-radius: 16px; max-width: 100%; }
.stopchip.nopress .avs { display: flex; flex-wrap: wrap; }
.stopchip.nopress .avs .avatar + .avatar { margin-left: -0.4rem; }

/* Lauf & Tausch */
.racewrap { flex: 1; display: flex; flex-direction: column; gap: 0.9rem; padding-top: 0.2rem; }
.raceitems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.ritem { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.ritem .pcard { width: 100%; }
.ritem .pcard .pimg { height: min(calc(19 * var(--vq)), 12rem); }
.ritem .pcard .pinfo { padding: 0.45rem 0.8rem 0.6rem; }
.ritem .pcard .pname { font-size: 1.1rem; }
.ritem .pcard .psub { -webkit-line-clamp: 1; }
.rslot { min-height: 2.8rem; min-width: 8rem; display: grid; place-items: center; border: 3px dashed rgba(255, 255, 255, 0.45); border-radius: 12px; font-family: var(--font-led); font-size: 1.8rem; color: rgba(255, 255, 255, 0.5); }
.rslot.filled { border: 0; animation: popIn 0.4s var(--ease-back) both; }
.rslot .ptag { font-size: 2rem; }
.racetags { display: flex; gap: 1.6rem; justify-content: center; }
.rtag { transition: opacity 0.3s, transform 0.3s; }
.rtag .ptag { font-size: 2rem; }
.rtag.used { opacity: 0.2; transform: scale(0.8); }
.racelanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.4rem; padding-left: 7rem; }
.rlane .avatar { --size: 1.9rem !important; }
.rlane { display: flex; align-items: center; gap: 0.5rem; background: rgba(20, 2, 30, 0.45); border-radius: 99px; padding: 0.25rem 0.9rem 0.25rem 0.3rem; font-weight: 800; }
.rlane .lnm { flex: 1; font-family: var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlane .lights { display: flex; gap: 0.25rem; }
.rlane .lights i, .prres .lights i { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 2px solid rgba(0, 0, 0, 0.4); display: inline-block; }
.rlane .lights i.on, .prres .lights i.on { background: #7dffa8; box-shadow: 0 0 8px #7dffa8; }
.rlane .pulls { font-size: 0.8rem; opacity: 0.7; white-space: nowrap; }
.rlane.solved { background: rgba(34, 197, 94, 0.4); }

/* Einkaufen */
.cartwrap { flex: 1; display: flex; flex-direction: column; gap: 1.2rem; padding-top: 0.4rem; }
.cartgoal { align-self: center; font-family: var(--font-head); font-size: clamp(1.4rem, 2vw, 2.4rem); background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 99px; padding: 0.3rem 1.6rem; box-shadow: var(--shadow); }
.cartgoal b { color: var(--tag-ink); }
.shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; padding: 1.4rem 1rem 1.2rem; background: linear-gradient(180deg, transparent 82%, #b7784a 82%, #8a532c 100%); border-radius: 12px; }
.shelf .pcard .pimg { height: min(calc(20 * var(--vq)), 13rem); }
.shelf .pcard .pname { font-size: 1.05rem; }
.carts { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding-top: 1.6rem; }
.cartzone { position: absolute; top: 0; bottom: 0; background: rgba(34, 197, 94, 0.28); border-left: 3px dashed var(--green); border-right: 3px dashed var(--green); }
.cartzone span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-weight: 900; color: #7dffa8; font-size: 0.9rem; }
.cbar { position: relative; display: flex; align-items: center; gap: 0.5rem; width: max(var(--w), 22rem); max-width: 100%; background: linear-gradient(90deg, rgba(47, 125, 246, 0.8), rgba(47, 125, 246, 0.5)); border: 2px solid var(--ink); border-radius: 0 99px 99px 0; padding: 0.15rem 0.8rem 0.15rem 0.3rem; font-weight: 800; animation: barGrow 0.8s var(--ease-out) both; transform-origin: left; }
.cbar.hit { background: linear-gradient(90deg, rgba(34, 197, 94, 0.95), rgba(34, 197, 94, 0.6)); }
.cbar.over { background: linear-gradient(90deg, rgba(239, 35, 60, 0.9), rgba(239, 35, 60, 0.55)); }
.cbar .lnm { font-family: var(--font-head); white-space: nowrap; }
.cbar .qty { flex: 1; font-size: 0.8rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbar b { font-family: var(--font-led); font-size: 1.5rem; white-space: nowrap; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: none; } }

/* Panzerknacker */
.safewrap { flex: 1; display: grid; grid-template-columns: minmax(18rem, 36%) 1fr; gap: 2.4rem; align-items: center; padding: 1rem 2rem 0; }
.vault { position: relative; justify-self: center; width: min(36rem, 100%); aspect-ratio: 1.15; perspective: 1400px; }
.vdoor { position: absolute; inset: 0; background: linear-gradient(135deg, #b8c0cc, #6c7686 55%, #4a5361); border: 6px solid var(--ink); border-radius: 26px; box-shadow: var(--shadow), inset 0 0 0 10px rgba(255, 255, 255, 0.15), inset 0 0 40px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; transform-origin: left center; transition: transform 1.2s cubic-bezier(.5, 0, .2, 1); }
.vwheel { width: 7rem; height: 7rem; border-radius: 50%; border: 8px solid #3b414b; background: repeating-conic-gradient(#d7dbe2 0 10deg, #9aa2ad 10deg 20deg); box-shadow: 0 0 0 5px var(--ink); animation: spin 10s linear infinite; }
.vdigits { display: flex; align-items: baseline; gap: 0.4rem; background: #140211; border: 4px solid var(--ink); border-radius: 14px; padding: 0.3rem 1rem; }
.vdigits .dial { font-family: var(--font-led); font-size: 4rem; color: #7dffa8; text-shadow: 0 0 12px rgba(125, 255, 168, 0.8); min-width: 0.7em; text-align: center; transition: color 0.3s; }
.vdigits .dial.set { color: var(--gold); text-shadow: 0 0 14px rgba(255, 210, 63, 0.9); animation: pop 0.35s var(--ease-back); }
.vdigits .eur { font-family: var(--font-led); font-size: 3rem; color: #7dffa8; }
.vlabel { font-weight: 800; color: #fff; text-shadow: 0 2px 0 #000; text-align: center; padding: 0 1rem; display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.vault.open .vdoor { transform: rotateY(-28deg); }
.vault::before { content: '💰💶💰'; position: absolute; inset: 8%; display: grid; place-items: center; font-size: 4rem; background: radial-gradient(circle, #ffd23f, #b8860b); border: 6px solid var(--ink); border-radius: 18px; }

/* Die verflixte Sieben */
.sevenwrap { flex: 1; display: grid; grid-template-columns: minmax(18rem, 34%) 1fr; gap: 2rem; align-items: start; padding-top: 1rem; }
.svright { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }
.svdigits { display: flex; align-items: baseline; gap: 0.5rem; background: #140211; border: 5px solid var(--ink); border-radius: 20px; padding: 0.4rem 1.6rem; box-shadow: var(--shadow); }
.svdigits .sd { font-family: var(--font-led); font-size: clamp(4rem, 7vw, 7.5rem); color: rgba(255, 59, 48, 0.35); min-width: 0.65em; text-align: center; line-height: 1; }
.svdigits .sd.known { color: var(--led); text-shadow: 0 0 18px rgba(255, 59, 48, 0.9); }
.svdigits .sd.cur { color: var(--gold); animation: pulse 0.6s ease-in-out infinite alternate; }
.svdigits .dot, .svdigits .eur { font-family: var(--font-led); font-size: 4rem; color: var(--led); }
.svlanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.5rem; width: 100%; }
.svlane { display: flex; align-items: center; gap: 0.5rem; background: rgba(20, 2, 30, 0.45); border-radius: 99px; padding: 0.25rem 0.9rem 0.25rem 0.3rem; font-weight: 800; }
.svlane .lnm { flex: 1; font-family: var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svlane .notes { display: flex; gap: 0.05rem; font-size: 1.3rem; }
.svlane .notes i { font-style: normal; transition: all 0.5s; }
.svlane .notes i.gone { opacity: 0.12; transform: translateY(-6px) rotate(-20deg) scale(0.8); filter: grayscale(1); }
.svlane .ok { display: none; color: #7dffa8; font-weight: 900; }
.svlane.done .ok { display: inline; }
.svlane.broke { opacity: 0.5; }

/* Preis-Bluff: Produkt statt Frage */
.qcard.pbq { padding: 0; background: none; border: 0; box-shadow: none; animation: none; }
.pbhead { display: flex; justify-content: center; align-items: center; gap: 1.6rem; }
.pbquest { font-family: var(--font-show); color: var(--gold); text-shadow: 0 3px 0 var(--ink); font-size: 1.1em; }
.qcard.pbq.small .pbhead .pcard .pimg { height: 6rem; width: 8rem; }
.pbhead .pcard { flex-direction: row; align-items: center; max-width: 46rem; }
.pbhead .pcard .pimg { width: 12rem; height: 9rem; border-radius: calc(var(--radius) - 4px) 0 0 calc(var(--radius) - 4px); flex: none; }

/* Möbel-Schwedisch */
.qcard.swed { display: flex; align-items: center; justify-content: center; gap: 2.4rem; position: relative; }
.qcard.swed .swtxt { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.qcard.swed small { font-size: 0.5em; opacity: 0.7; }
.qcard.swed .swname { font-family: var(--font-show); font-size: 1.8em; color: #0058a3; letter-spacing: 0.04em; text-shadow: 0 3px 0 #ffdb00; }
.qcard.swed .flag { position: absolute; right: 1rem; top: 0.6rem; font-size: 0.8em; }
.swreveal { display: flex; justify-content: center; font-size: 1rem; font-family: var(--font-body); text-align: left; }
.swreveal .pcard { flex-direction: row; align-items: center; max-width: 30rem; }
.swreveal .pcard .pimg { width: 8rem; height: 6.5rem; flex: none; border-radius: calc(var(--radius) - 4px) 0 0 calc(var(--radius) - 4px); }
.swreveal .pcard > .ptag { font-size: 1.6rem; }

.screen.noring .qtimer { display: none; }
.vlabel small { width: 100%; opacity: 0.75; font-size: 0.85em; }

/* ================================================================ Der Superpreis-Showdown (Finale) */
/* Stufe 1: die Preisleiter – Sprossen oben, Produkt links, Pulte rechts, darunter das Publikum */
.sdwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: min(0.9rem, calc(1.3 * var(--vq))); }
.sdtop { flex: none; display: flex; justify-content: center; }
.sdrungs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45em; font-size: clamp(0.8rem, calc(1.9 * var(--vq)), 1.25rem); }
.sdrung { display: flex; align-items: center; gap: 0.4em; padding: 0.2em 0.9em 0.2em 0.45em; border-radius: 99px; background: rgba(20, 2, 17, 0.55); border: 3px solid rgba(255, 210, 63, 0.35); color: rgba(255, 255, 255, 0.7); white-space: nowrap; transition: all 0.4s; }
.sdrung .ri { font-size: 1.35em; line-height: 1; }
.sdrung b { font-family: var(--font-head); font-weight: 600; }
.sdrung small { font-weight: 800; opacity: 0.7; font-size: max(0.62rem, 0.78em); }
.sdrung.done { opacity: 0.45; }
.sdrung.cur { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 3px var(--pink), 0 0 24px rgba(255, 210, 63, 0.7); transform: scale(1.06); }
.sdrung.top { border-style: dashed; color: var(--gold); }
.sdarrow { font-style: normal; color: var(--gold); opacity: 0.55; font-size: max(0.62rem, 0.75em); }
.pready .sdrungs { font-size: clamp(0.85rem, calc(2.1 * var(--vq)), 1.35rem); animation: slideDown 0.5s var(--ease-out) both; }
.sdlad .bidwrap { padding-top: 0; }
.sdbanner { font-size: clamp(1.3rem, calc(4.2 * var(--vq)), 2.8rem); }
.sdbanner b { color: #fff; }
.lecterns.sd { padding: 0.6rem 0.8rem 0.8rem; }
/* Freifahrtschein am Pult: baumelt, bis er eingelöst wird */
.lectern .sdpass { position: absolute; top: -0.45em; right: -0.35em; z-index: 3; font-size: max(1.1rem, 2.2em); line-height: 1; filter: drop-shadow(0 2px 0 var(--ink)); transform-origin: 30% 10%; animation: tagDangle 2.8s ease-in-out infinite; }
.lectern .sdpass.used { animation: sdPassUse 0.9s var(--ease-back) forwards; }
@keyframes sdPassUse { 40% { transform: scale(1.9) rotate(-12deg); } 100% { transform: scale(0.9); opacity: 0.35; filter: grayscale(1); } }
.lectern .lstamp.pass { color: #7a22e0; }
.lectern .lstamp small { display: block; font-size: 0.7em; text-align: center; }
.lectern.sdout { opacity: 0.6; }
/* Publikum: kleine Avatare in einer Reihe, ✓ wer schon getippt hat */
.sdcrowd { flex: none; align-self: center; max-width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.9rem 0.25rem 0.6rem; border-radius: 99px; background: rgba(20, 2, 17, 0.5); border: 2px dashed rgba(255, 210, 63, 0.45); }
.sdclbl { font-family: var(--font-head); font-weight: 600; color: var(--gold); white-space: nowrap; font-size: clamp(0.85rem, calc(1.8 * var(--vq)), 1.15rem); }
.sdcwho { display: flex; flex-wrap: wrap; gap: 0.15rem; min-width: 0; }
.sdcp { position: relative; opacity: 0.5; transition: opacity 0.3s; }
.sdcp.done { opacity: 1; }
.sdcp.done::after { content: '✓'; position: absolute; right: -0.25rem; bottom: -0.25rem; width: 1rem; height: 1rem; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; border: 2px solid var(--ink); font-size: 0.6rem; font-weight: 900; }
.sdcp.new { opacity: 1; animation: popIn 0.5s var(--ease-back) both; }

/* Nach der letzten Sprosse: „Das Finale – A VS B“ */
.qbody:has(> .sdduel) { position: relative; }
.sdduel { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: 1rem; background: radial-gradient(ellipse at 50% 40%, rgba(255, 46, 136, 0.35), rgba(20, 2, 30, 0.86) 70%); animation: fadeIn 0.4s both; }
.sdbox, .sdsuper .spcurtain .sdvs { position: relative; }
.sdbox { display: flex; flex-direction: column; align-items: center; gap: min(1rem, calc(1.6 * var(--vq))); padding: min(1.4rem, calc(2.2 * var(--vq))) 2.6rem; border-radius: 28px; background: rgba(20, 2, 17, 0.75); border: 4px solid var(--gold); box-shadow: 0 0 0 6px var(--ink), 0 0 40px rgba(255, 210, 63, 0.45); text-align: center; animation: popIn 0.5s var(--ease-back) both; }
/* Glühbirnen rund um den Rahmen */
.sdbox::before, .sptotal.final::before { content: ''; position: absolute; inset: -0.55rem; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle, #fff6c8 0 2.5px, rgba(255, 210, 63, 0.8) 3.5px, transparent 6px) 0 0 / 24px 24px repeat-x,
    radial-gradient(circle, #fff6c8 0 2.5px, rgba(255, 210, 63, 0.8) 3.5px, transparent 6px) 12px 100% / 24px 24px repeat-x;
  animation: bulbs 0.9s steps(2) infinite; }
.sdlbl { font-family: var(--font-show); font-size: clamp(2rem, calc(7.5 * var(--vq)), 5rem); line-height: 1.05; color: var(--gold); text-shadow: 0 4px 0 var(--pink), 0 8px 0 var(--ink); animation: stamp 0.6s var(--ease-back) both; }
.sdvs { display: flex; align-items: center; justify-content: center; gap: clamp(0.8rem, calc(3 * var(--vq)), 2.2rem); }
.sdfin { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; animation: popIn 0.6s var(--ease-back) both; }
.sdfin:nth-child(3) { animation-delay: 0.35s; }
.sdfin b { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, calc(3.2 * var(--vq)), 2.1rem); color: #fff; text-shadow: 0 2px 0 var(--ink); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdvs .vs { font-family: var(--font-show); font-size: clamp(1.6rem, calc(6 * var(--vq)), 4rem); color: var(--pink); text-shadow: 0 3px 0 #fff, 0 6px 0 var(--ink); animation: pulse 0.7s ease-in-out infinite alternate; }
.sdsub { font-weight: 800; font-size: clamp(1rem, calc(2.4 * var(--vq)), 1.5rem); color: #fff; }
.spcurtain .sdvs.small { margin-top: 0.4rem; }
.spcurtain .sdvs.small .sdfin b { font-size: clamp(1rem, calc(2.4 * var(--vq)), 1.5rem); }

/* Stufe 2: die Superpreis-Vitrine, darunter die Finalist*innen am Pult unter Scheinwerfern */
.superwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: min(0.9rem, calc(1.2 * var(--vq))); padding-top: 0.2rem; }
.spcurtain { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(1rem, calc(1.5 * var(--vq))); }
.spcurtain .spbig { font-size: clamp(4rem, calc(16 * var(--vq)), 9rem); line-height: 1; animation: bounce 1s ease-in-out infinite; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.4)); }
.spcurtain .sptitle, .sphead b { font-family: var(--font-show); color: var(--gold); text-shadow: 0 4px 0 var(--pink), 0 8px 0 var(--ink); }
.spcurtain .sptitle { font-size: clamp(2.6rem, calc(10 * var(--vq)), 6.5rem); line-height: 1.05; }
.sphead { flex: none; display: flex; align-items: center; gap: 1.2rem; justify-content: center; animation: slideDown 0.5s var(--ease-out) both; }
.sphead .spicon { font-size: clamp(2rem, calc(6 * var(--vq)), 4.2rem); line-height: 1; }
.sphead small { display: block; font-family: var(--font-head); letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.8; }
.sphead b { display: block; font-size: clamp(1.6rem, calc(5.4 * var(--vq)), 4rem); line-height: 1.05; }
.spintro { flex: none; text-align: center; font-size: clamp(1rem, calc(2.2 * var(--vq)), 1.45rem); font-weight: 800; }
.spitems { flex: 0 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: min(1.4rem, calc(2 * var(--vq))); padding: 0.9rem 1.1rem 0; }
.spitem { opacity: 0; transform: translateY(40px) scale(0.8); transition: all 0.6s var(--ease-back); }
.spitem.in { opacity: 1; transform: none; }
.spitem .pcard { animation: none; }
.spitem .pcard .pimg { height: clamp(4.5rem, calc(17 * var(--vq)), 13rem); }
.spitem .pcard .pinfo { padding: 0.4rem 0.8rem 0.55rem; }
.spitem .pcard .pname { font-size: clamp(0.95rem, calc(2 * var(--vq)), 1.25rem); -webkit-line-clamp: 1; }
.spitem .pcard .psub, .spitem .pcard .pshop { display: none; }
.superwrap.revealing .sphead .spicon { font-size: clamp(1.6rem, calc(4 * var(--vq)), 2.6rem); }
.superwrap.revealing .sphead b { font-size: clamp(1.3rem, calc(3.8 * var(--vq)), 3rem); }
.superwrap.revealing .spitem .pcard .pimg { height: clamp(3.5rem, calc(12 * var(--vq)), 9rem); }
.superwrap.revealing .spitem .pcard > .ptag { font-size: clamp(1.1rem, calc(2.6 * var(--vq)), 1.6rem); }
.sdstage { flex: none; height: clamp(7.5rem, calc(23 * var(--vq)), 17rem); display: flex; align-items: stretch; justify-content: center; gap: clamp(1rem, calc(3 * var(--vq)), 3rem); padding: 0 1rem; }
.sdstage .lecterns { flex: 1 1 0; min-width: 0; height: 100%; padding: 1.2rem 0.6rem 0.9rem; align-content: flex-end; }
.lecterns.sd.duo { position: relative; flex-wrap: nowrap; column-gap: calc(var(--lw) * 0.75); }
.lecterns.sd.duo::after { content: 'VS'; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-6deg); font-family: var(--font-show); font-size: calc(var(--lw) * 0.3); color: var(--gold); text-shadow: 0 3px 0 var(--pink), 0 6px 0 var(--ink); pointer-events: none; transition: opacity 0.4s; }
.superwrap.counting .lecterns.sd.duo::after { opacity: 0.25; }
/* Scheinwerferkegel von oben auf jedes Pult */
.lecterns.sd.fins .lectern { isolation: isolate; }
.lecterns.sd.fins .lectern::before { content: ''; position: absolute; z-index: -1; left: -35%; right: -35%; top: -70%; bottom: 10%; background: linear-gradient(180deg, rgba(255, 246, 200, 0), rgba(255, 246, 200, 0.2)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); pointer-events: none; transition: background 0.5s; }
.lecterns.sd.fins .lectern.win::before { background: linear-gradient(180deg, rgba(255, 224, 102, 0), rgba(255, 224, 102, 0.55)); }
.lecterns.sd.fins .lectern.over::before { background: none; }
.lecterns.sd.fins .led { font-size: 2.3em; }
.lecterns.sd.fins .lectern.secret .led { font-size: 1.7em; }
.superwrap.won .lectern:not(.win) { filter: grayscale(0.6) brightness(0.75); }
/* Differenz zum Gesamtwert (über dem Pult) und Publikumstipps (darunter) */
.lectern .sddiff { position: absolute; top: -1.6em; left: 50%; transform: translateX(-50%); font-family: var(--font-led); font-size: max(1rem, 1.7em); white-space: nowrap; padding: 0 0.5em; background: var(--gold); color: var(--tag-ink); border: 3px solid var(--ink); border-radius: 10px; animation: popIn 0.45s var(--ease-back) both; }
.lectern .sdtips { position: absolute; bottom: -0.7em; left: 0; font-weight: 900; font-size: max(0.75rem, 0.9em); white-space: nowrap; padding: 0 0.5em; background: var(--purple); color: #fff; border: 2px solid var(--ink); border-radius: 99px; animation: popIn 0.4s var(--ease-back) both; }
/* Gesamtwert: LED-Anzeige, am Ende mit Glühbirnen-Rahmen */
.sptotal { position: relative; flex: none; align-self: center; text-align: center; background: #140211; border: 5px solid var(--ink); border-radius: 20px; padding: 0.3rem 1.6rem 0.5rem; box-shadow: var(--shadow); animation: popIn 0.5s var(--ease-back) both; }
.sptotal small { font-family: var(--font-head); letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.6); }
.sptotal .tv { display: block; font-family: var(--font-led); font-size: clamp(2.2rem, calc(8 * var(--vq)), 5.5rem); color: var(--led); text-shadow: 0 0 18px rgba(255, 59, 48, 0.9); line-height: 1; white-space: nowrap; }
.sptotal .tv.final { color: var(--gold); text-shadow: 0 0 22px rgba(255, 210, 63, 0.9); animation: pop 0.5s var(--ease-back); }
.sptotal.final { border-color: var(--gold); box-shadow: 0 0 0 4px var(--ink), 0 0 36px rgba(255, 210, 63, 0.6); }
.superwrap .sdcrowd { margin-top: -0.2rem; }

/* Schlusszeremonie im Studio-Look: Glühbirnen-Rahmen, Showschrift, Punkte als Preisschild */
body[data-mode="price"] .fin-ceremony { background: radial-gradient(ellipse at 50% 30%, rgba(255, 46, 136, 0.35), rgba(20, 2, 30, 0.88) 70%); }
body[data-mode="price"] .fin-ceremony .fc-box { position: relative; padding: 1rem 1.4rem 1.2rem; border-radius: 26px; background: rgba(20, 2, 17, 0.72); border: 4px solid var(--gold); box-shadow: 0 0 0 6px var(--ink), 0 0 40px rgba(255, 210, 63, 0.4); }
body[data-mode="price"] .fin-ceremony .fc-box::before { content: ''; position: absolute; inset: -0.55rem; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle, #fff6c8 0 2.5px, rgba(255, 210, 63, 0.8) 3.5px, transparent 6px) 0 0 / 24px 24px repeat-x,
    radial-gradient(circle, #fff6c8 0 2.5px, rgba(255, 210, 63, 0.8) 3.5px, transparent 6px) 12px 100% / 24px 24px repeat-x;
  animation: bulbs 0.9s steps(2) infinite; }
body[data-mode="price"] .fin-ceremony .fc-head { font-family: var(--font-show); -webkit-text-stroke: 0; text-shadow: 0 3px 0 var(--pink), 0 6px 0 var(--ink); }
body[data-mode="price"] .fin-ceremony .fc-pts { font-family: var(--font-led); font-size: 1.7rem; color: var(--tag-ink); background: var(--tag); padding: 0.05em 0.6em 0.05em 1.1em; clip-path: polygon(0.7em 0, 100% 0, 100% 100%, 0.7em 100%, 0 50%); filter: drop-shadow(0 3px 0 var(--ink)); }
body[data-mode="price"] .fin-ceremony .fc-row.top { background: linear-gradient(135deg, #fff3c4, var(--gold) 60%, #ff9ccc); }

/* ================================================================ Handy */
body.play .pmini { position: relative; display: flex; align-items: center; gap: 12px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; padding: 8px 12px 8px 8px; box-shadow: var(--shadow-sm); }
body.play .pmini .pimg { width: 84px; height: 84px; flex: none; background: #fff; border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
/* Niedrige Handys: Produkt kompakter, damit Tastatur und „Gebot abgeben“ ohne Scrollen passen */
@media (max-height: 760px) { body.play .pmini { padding: 6px 10px 6px 6px; } body.play .pmini .pimg { width: 62px; height: 62px; } }
body.play .pmini .pimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
body.play .pmini .pimgfb { display: none; font-size: 36px; text-align: center; line-height: 1.1; }
body.play .pmini .pimgfb small { display: block; font-size: 9px; -webkit-line-clamp: unset; }
body.play .pmini .pimg.noimg .pimgfb { display: block; }
body.play .pmini .pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
body.play .pmini b { font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.play .pmini small { font-size: 12px; opacity: 0.7; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.play .pmini em { font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.6; }
body.play .pmini > .ptag { position: absolute; right: -6px; top: -12px; font-size: 20px; transform: rotate(6deg); }
body.play .ptag { font-size: 22px; }
body.play .pbrule { text-align: center; font-weight: 800; font-size: 15px; line-height: 1.35; }
body.play .pkeyp { display: flex; flex-direction: column; gap: 10px; }
@media (max-height: 760px) { body.play .pkeyp { gap: 8px; } }
body.play .pkhint { text-align: center; font-size: 12px; opacity: 0.75; font-weight: 700; margin-top: -4px; }
body.play .pnum.shake { animation: shake 0.45s; }
#main .view .pkeyp .keypad { grid-template-rows: repeat(4, minmax(40px, 52px)); }
body.play .pblist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
body.play .pblist small { width: 100%; text-align: center; opacity: 0.7; font-weight: 800; font-size: 12px; }
body.play .pbchip { background: #140211; color: var(--led, #ff3b30); font-family: var(--font-led); font-size: 20px; padding: 2px 10px; border-radius: 8px; border: 2px solid var(--ink); }
body.play .pbchip.me { color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
body.play .pbchip.struck { text-decoration: line-through; opacity: 0.6; }
body.play .pbmine { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
body.play .pbmine small { font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
body.play .pbmine b { font-family: var(--font-led); font-size: 54px; color: var(--tag-ink, #d7102f); line-height: 1; }
body.play .pbmine span { font-weight: 800; opacity: 0.8; }

/* Handy: Teurer oder billiger */
body.play .philov .phvs { text-align: center; font-family: var(--font-show); font-size: 20px; color: var(--gold); }
body.play .phbtns { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; flex: 1; min-height: 190px; }
body.play .phbtns .abtn { font-size: 30px; }
body.play .phbtns .abtn.up { --oc: var(--green); }
body.play .phbtns .abtn.down { --oc: var(--red); }
body.play .phbtns.chosen .abtn { opacity: 0.35; }
body.play .phbtns.chosen .abtn.sel { opacity: 1; box-shadow: 0 0 0 4px #fff, var(--shadow); }

/* Handy: Mehr oder weniger */
body.play .clfb { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-family: var(--font-head); font-size: 20px; min-height: 64px; }
body.play .clfb .arrow { font-size: 36px; width: 40px; text-align: center; }
body.play .clfb.more { background: #dcffe8; color: #0f7a36; }
body.play .clfb.less { background: #ffe0e5; color: #b1102a; }
body.play .clfb.hit { background: var(--gold); }
body.play .clhist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
body.play .cltips { text-align: center; font-weight: 800; font-size: 13px; opacity: 0.85; }
body.play .cltips span { letter-spacing: 2px; color: var(--gold); }
body.play .clhist span { font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
body.play .clhist .more { color: #7dffa8; }
body.play .clhist .less { color: #ff9aa8; }
body.play .clhist .hit { color: var(--gold); }

/* Handy: Stopp-Preis */
body.play .prg { display: flex; gap: 14px; align-items: stretch; flex: 1; min-height: 280px; }
body.play .pscale { position: relative; flex: 1; border: 3px solid var(--ink); border-radius: 14px; background: rgba(255, 255, 255, 0.08); margin-left: 58px; }
body.play .pscale > span { position: absolute; right: 100%; transform: translateY(50%); margin-right: 6px; font-family: var(--font-led); font-size: 15px; white-space: nowrap; }
body.play .pwin { position: absolute; left: 6%; right: 6%; background: rgba(255, 210, 63, 0.35); border: 3px solid var(--gold); border-radius: 10px; display: grid; place-items: center; }
body.play .pwin b { font-family: var(--font-led); font-size: 15px; color: #fff; text-shadow: 0 1px 0 #000; white-space: nowrap; }
body.play .pwin.stopped { background: rgba(255, 46, 136, 0.5); border-color: #fff; }
body.play .bigstop { width: 42%; border: 4px solid var(--ink); border-radius: 22px; background: radial-gradient(circle at 40% 35%, #ff6b6b, #d7102f); color: #fff; font-family: var(--font-head); font-size: 28px; font-weight: 700; box-shadow: 0 8px 0 #6b0616; touch-action: manipulation; }
body.play .bigstop:active { transform: translateY(6px); box-shadow: 0 2px 0 #6b0616; }
body.play .bigstop:disabled { filter: grayscale(0.6); }

/* Handy: Der Preis fällt! */
body.play .pled { text-align: center; padding: 8px; background: #140211; color: #fff; }
body.play .pled small { display: block; letter-spacing: 0.2em; opacity: 0.6; font-size: 11px; font-weight: 800; text-transform: uppercase; }
body.play .pled b { font-family: var(--font-led); font-size: 54px; color: var(--led); text-shadow: 0 0 14px rgba(255, 59, 48, 0.9); font-variant-numeric: tabular-nums; }
body.play .bigstrike { flex: 1; min-height: 150px; border: 4px solid var(--ink); border-radius: 26px; background: radial-gradient(circle at 40% 30%, #ffe680, #ff8a1f); color: var(--ink); font-family: var(--font-head); font-size: 34px; font-weight: 700; box-shadow: 0 9px 0 #8a3b00; touch-action: manipulation; line-height: 1.15; }
body.play .bigstrike:active { transform: translateY(6px); box-shadow: 0 3px 0 #8a3b00; }
body.play .bigstrike.done { background: #e9e2f5; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); font-size: 20px; }
body.play .bigstrike.done b { font-family: var(--font-led); font-size: 40px; color: var(--tag-ink); }
body.play .pstrikes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
body.play .pstrikes span { font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
body.play .pstrikes .me { background: var(--gold); color: var(--ink); }

/* Handy: Zu teuer! */
body.play .ptmnow { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 14px; background: #1a0736; color: #fff; }
body.play .ptmnow small { font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; font-size: 11px; }
body.play .ptmnow small b { font-family: var(--font-led); font-size: 17px; color: var(--gold); letter-spacing: 0.04em; }
body.play .ptmtag .ptag { font-size: 44px; }
body.play .ptmtag .ptag.wait { --tagc: #4b2a6e; color: rgba(255, 255, 255, 0.4); }
body.play .ptmhist { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; min-height: 22px; }
body.play .ptmhist span { font-family: var(--font-led); font-size: 15px; padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); }
body.play .ptmhist span.cur { background: var(--gold); color: var(--ink); }
body.play .ptmhist span.me { background: var(--red); color: #fff; box-shadow: 0 0 0 2px #fff; }
body.play .bigtoomuch { align-self: center; width: min(64vw, 240px); aspect-ratio: 1; flex: none; border: 5px solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 40% 32%, #ff7a7a, #d7102f 70%); color: #fff; font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 1.1; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 10px 0 #6b0616, 0 0 0 8px rgba(255, 210, 63, 0.35); touch-action: manipulation; }
body.play .bigtoomuch:active { transform: translateY(7px); box-shadow: 0 3px 0 #6b0616, 0 0 0 8px rgba(255, 210, 63, 0.35); }
body.play .bigtoomuch:disabled:not(.done) { filter: grayscale(0.7) brightness(0.8); }
body.play .bigtoomuch.done { background: #e9e2f5; color: var(--ink); text-shadow: none; font-size: 18px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
body.play .bigtoomuch.done b { font-family: var(--font-led); font-size: 38px; color: var(--tag-ink); }
body.play .ptmrule { font-size: 13px; opacity: 0.85; }
body.play .ptmres { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; padding: 2px 4px 4px; }
body.play .ptmres span { font-family: var(--font-led); font-size: 15px; padding: 1px 6px; border-radius: 6px; }
body.play .ptmres span.ok { background: #dcffe8; color: #0f7a36; }
body.play .ptmres span.over { background: #ffe0e5; color: #b1102a; }
body.play .ptmres span.me { box-shadow: 0 0 0 3px var(--ink); }
body.play .ptmres i { font-style: normal; font-weight: 900; font-size: 12px; color: #fff; background: var(--red); border-radius: 99px; padding: 1px 7px; }

/* Handy: Lauf & Tausch */
body.play .prtags { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
body.play .prtag { border: 3px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, 0.08); padding: 8px 4px; display: grid; place-items: center; touch-action: manipulation; }
body.play .prtag.sel { border-color: #fff; background: rgba(255, 255, 255, 0.25); transform: scale(1.04); }
body.play .prtag.used { opacity: 0.35; }
body.play .pritems { display: flex; flex-direction: column; gap: 8px; }
body.play .pritem { display: flex; align-items: center; gap: 10px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px 6px 6px; text-align: left; touch-action: manipulation; }
body.play .pritem .pimg { width: 54px; height: 54px; flex: none; background: #fff; border-radius: 8px; display: grid; place-items: center; overflow: hidden; font-size: 28px; }
body.play .pritem .pimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
body.play .pritem .nm { flex: 1; font-family: var(--font-head); font-size: 14px; font-weight: 600; line-height: 1.15; }
body.play .pritem .slot { flex: none; min-width: 86px; text-align: center; }
body.play .pritem .slot i { display: inline-block; font-style: normal; border: 2px dashed rgba(42, 8, 69, 0.4); border-radius: 8px; padding: 2px 14px; font-weight: 900; opacity: 0.6; }
body.play .pritem .ptag { font-size: 17px; }
body.play .prres { padding: 10px 14px; text-align: center; font-weight: 800; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* Handy: Einkaufen */
body.play .pcgoal { padding: 10px 14px; text-align: center; font-family: var(--font-head); font-size: 18px; }
body.play .pcgoal b { color: var(--tag-ink); }
body.play .pcitems { display: flex; flex-direction: column; gap: 8px; }
body.play .pcitem { display: flex; align-items: center; gap: 10px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 8px 6px 6px; transition: background 0.2s; }
body.play .pcitem.on { background: #fff2b8; }
body.play .pcitem .pimg { width: 54px; height: 54px; flex: none; background: #fff; border-radius: 8px; display: grid; place-items: center; overflow: hidden; font-size: 28px; }
body.play .pcitem .pimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
body.play .pcitem .nm { flex: 1; font-family: var(--font-head); font-size: 14px; font-weight: 600; line-height: 1.15; min-width: 0; }
body.play .pcitem .nm small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-body); font-size: 11px; opacity: 0.65; }
body.play .pcitem .step { display: flex; align-items: center; gap: 6px; }
body.play .pcitem .step button { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: var(--gold); color: var(--ink); font-size: 22px; font-weight: 900; line-height: 1; touch-action: manipulation; }
body.play .pcitem .step b { font-family: var(--font-led); font-size: 26px; min-width: 20px; text-align: center; }
body.play .pcsum { text-align: center; font-weight: 800; opacity: 0.85; }

/* Handy: Panzerknacker */
body.play .pslots { display: flex; justify-content: center; align-items: baseline; gap: 6px; padding: 12px; background: #140211; }
body.play .dslot { width: 54px; height: 70px; border-radius: 10px; border: 3px dashed rgba(125, 255, 168, 0.5); background: transparent; color: #7dffa8; font-family: var(--font-led); font-size: 46px; }
body.play .dslot.full { border-style: solid; text-shadow: 0 0 10px rgba(125, 255, 168, 0.8); }
body.play .pslots .eur { font-family: var(--font-led); font-size: 40px; color: #7dffa8; }
body.play .pdig { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
body.play .dbtn { width: 64px; height: 64px; border-radius: 16px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-led); font-size: 40px; box-shadow: var(--shadow-sm); touch-action: manipulation; }
body.play .dbtn.used { opacity: 0.25; }

/* Handy: Die verflixte Sieben */
body.play .psvd { display: flex; justify-content: center; align-items: baseline; gap: 4px; padding: 10px; background: #140211; }
body.play .psvd span { font-family: var(--font-led); font-size: 50px; color: rgba(255, 59, 48, 0.35); min-width: 28px; text-align: center; }
body.play .psvd span.known { color: var(--led); text-shadow: 0 0 10px rgba(255, 59, 48, 0.9); }
body.play .psvd span.cur { color: var(--gold); animation: pulse 0.6s ease-in-out infinite alternate; }
body.play .pnotes { display: flex; justify-content: center; gap: 4px; font-size: 30px; }
body.play .pnotes i { font-style: normal; transition: all 0.5s; }
body.play .pnotes i.gone { opacity: 0.15; filter: grayscale(1); transform: rotate(-20deg) scale(0.8); }
body.play .pdigits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
body.play .pdigits button { height: 58px; border-radius: 14px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-led); font-size: 34px; box-shadow: var(--shadow-sm); touch-action: manipulation; }
body.play .pdigits button.sel { background: var(--gold); transform: scale(1.08); }
body.play .psvres { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
body.play .psvres b { font-family: var(--font-led); font-size: 70px; line-height: 1; color: var(--tag-ink); }
body.play .psvres span { font-weight: 800; }

/* Handy: Superpreis */
body.play .pshead { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
body.play .pshead span { font-size: 40px; }
body.play .pshead small { display: block; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; font-size: 11px; }
body.play .pshead b { font-family: var(--font-show); font-size: 22px; color: var(--tag-ink); }
body.play .psitems { display: flex; flex-direction: column; gap: 10px; }
body.play .psitem .pstext { font-size: 13px; font-weight: 700; opacity: 0.85; margin: 4px 6px 0; font-style: italic; }
body.play .psgrid { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
body.play .pssum { padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 700; }
body.play .pssum div { display: flex; justify-content: space-between; gap: 10px; }
body.play .pssum div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body.play .pssum div b { flex: none; }
body.play .pssum .cur { color: var(--tag-ink, #d7102f); }
body.play .pssum .tot { border-top: 2px dashed currentColor; margin-top: 4px; padding-top: 4px; font-size: 15px; font-weight: 900; }
body.play .psgrid .pimg { width: 62px; height: 62px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; display: grid; place-items: center; overflow: hidden; font-size: 30px; }
body.play .psgrid .pimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Handy: Superpreis-Showdown – Leiter, Freifahrtschein, Publikumstipp */
body.play .psdrungs { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 26px; line-height: 1; }
body.play .psdrungs span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(20, 2, 17, 0.45); border: 3px solid rgba(255, 210, 63, 0.35); }
body.play .psdrungs span.done { opacity: 0.45; }
body.play .psdrungs span.cur { background: var(--gold); border-color: var(--ink); box-shadow: 0 0 0 3px var(--pink); transform: scale(1.12); }
body.play .psdrungs span.top { border-style: dashed; }
body.play .psdrungs i { font-style: normal; font-size: 16px; color: var(--gold); opacity: 0.7; }
/* Niedrige Handys: Sprossen und Erklärzeile weichen, damit Ziffernblock und Abschicken ohne Scrollen passen */
@media (max-height: 700px) {
  body.play .psdv .psdrungs, body.play .psdv .pbrule small { display: none; }
  body.play .psdv .psdpass { font-size: 12px; padding: 4px 10px; }
}
body.play .psdpass { text-align: center; font-weight: 800; font-size: 14px; padding: 6px 12px; border-radius: 14px; background: linear-gradient(135deg, #f3e8ff, #e0c8ff); color: var(--ink); border: 3px solid var(--ink); }
body.play .psdtips { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
body.play .psdtip { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 18px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); font: inherit; touch-action: manipulation; min-width: 0; }
body.play .psdtip b { font-family: var(--font-head); font-size: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.play .psdtip.sel { background: var(--gold); transform: scale(1.05); }
body.play .psdtip:disabled:not(.sel) { opacity: 0.5; }

/* Handy: Möbel-Schwedisch */
body.play .qtxt.swed { display: flex; flex-direction: column; align-items: center; gap: 2px; }
body.play .qtxt.swed small { font-size: 14px; opacity: 0.7; }
body.play .qtxt.swed b { font-family: var(--font-show); font-size: 34px; color: #0058a3; text-shadow: 0 2px 0 #ffdb00; letter-spacing: 0.03em; overflow-wrap: anywhere; }

/* Handy: Ergebnis mit Artikel und Preis */
body.play .presult { padding: 8px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
body.play .presult .pmini { border: 0; box-shadow: none; padding: 0; }
body.play .presult .prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 0 4px 2px; }
body.play .presult .prow .ptag { font-size: 30px; transform: rotate(-3deg); }
body.play .presult .pstamp { margin: 0; font-size: 11px; }
body.play .receipt { width: 100%; padding: 12px 14px; font-family: 'Courier New', monospace; font-weight: 700; font-size: 13px; background: #fffef6; border-style: dashed; display: flex; flex-direction: column; gap: 3px; }
body.play .receipt .rh { text-align: center; font-weight: 900; letter-spacing: 0.2em; margin-bottom: 4px; }
body.play .receipt div { display: flex; justify-content: space-between; gap: 8px; }
body.play .receipt .rt { border-top: 2px dashed var(--ink); margin-top: 4px; padding-top: 4px; font-size: 16px; }
body.play .receipt .rz { justify-content: center; opacity: 0.7; font-size: 12px; }
body.play .receipt .rp { font-size: 11px; opacity: 0.7; }
body.play .receipt .rp span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.host[data-mode="price"] .btn.start { font-size: 1.35em; padding: 0.6em 1.1em; }
.podium .pricetotal { align-self: center; margin-top: 0.2rem; font-weight: 800; font-size: 1.2rem; background: rgba(20, 2, 30, 0.5); border: 2px solid rgba(255, 210, 63, 0.6); border-radius: 99px; padding: 0.2rem 1.2rem; animation: slideDown 0.6s 0.4s var(--ease-out) both; }
.podium .pricetotal b { font-family: var(--font-led); font-size: 1.6rem; color: var(--gold); letter-spacing: 0.03em; }
/* Einkaufen: kompakter, damit nichts unter die Spielerleiste rutscht */
.cartwrap.revealing { gap: 0.6rem; }
.cartwrap.revealing .cartgoal { font-size: 1.3rem; padding: 0.2rem 1.2rem; }
.cartwrap.revealing .shelf { padding: 1rem 1rem 0.8rem; gap: 0.9rem; }
.cartwrap.revealing .shelf .pcard .pimg { height: min(calc(11 * var(--vq)), 7rem); }
.cartwrap.revealing .shelf .pcard .psub, .cartwrap.revealing .shelf .pcard .pshop { display: none; }
.cartwrap.revealing .shelf .pcard .pname { font-size: 0.95rem; -webkit-line-clamp: 1; }
.cartwrap.revealing .shelf .pcard > .ptag { font-size: 1.4rem; }
.cartwrap.revealing .carts { gap: 0.25rem; padding-top: 1.3rem; }
.cartwrap.revealing .cbar { padding: 0.05rem 0.7rem 0.05rem 0.25rem; }
.cartwrap.revealing .cbar .avatar { --size: 1.7rem !important; }
.cartwrap.revealing .cbar b { font-size: 1.25rem; }
/* Viele Spieler: kleinere Pulte und Leisten */
.lecterns.many { --lw: 7.6rem; }
.cllanes.many { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.35rem; }
.cllanes.many .clane { padding: 0.15rem 0.6rem 0.15rem 0.2rem; gap: 0.4rem; }
.cllanes.many .clane .avatar { --size: 1.8rem !important; }
.cllanes.many .clane .cnt { display: none; }
.cllanes.many .clane .dir { font-size: 1.2rem; min-width: 4.5rem; }
.racewrap.many .ritem .pcard .pimg { height: min(calc(14 * var(--vq)), 8rem); }
.racewrap.many .ritem .pcard .psub, .racewrap.many .ritem .pcard .pshop { display: none; }
.racewrap.many .racelanes { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.3rem; padding-left: 7rem; }
.racewrap.many .rlane { padding: 0.1rem 0.6rem 0.1rem 0.2rem; font-size: 0.85rem; }
.racewrap.many .rlane .lights i { width: 0.7rem; height: 0.7rem; }
.svlanes.many { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.35rem; }
.svlanes.many .svlane { padding: 0.1rem 0.6rem 0.1rem 0.2rem; font-size: 0.85rem; }
.svlanes.many .svlane .avatar { --size: 1.8rem !important; }
/* Viele Spieler: zwei Zeilen je Bahn – oben der Name in voller Breite, darunter Scheine bzw. Ampeln */
.svlanes.many .svlane, .racewrap.many .rlane { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'av nm nm' 'av xx ok'; gap: 0 0.4rem; border-radius: 14px; }
.svlanes.many .svlane .avatar, .racewrap.many .rlane .avatar { grid-area: av; }
.svlanes.many .svlane .lnm, .racewrap.many .rlane .lnm { grid-area: nm; line-height: 1.15; }
.svlanes.many .svlane .notes { grid-area: xx; font-size: 1rem; }
.svlanes.many .svlane .ok { grid-area: ok; }
.racewrap.many .rlane .lights { grid-area: xx; }
.racewrap.many .rlane .pulls { grid-area: ok; }
.svlanes.many .svlane .notes { font-size: 1rem; }
.stopped.many { flex-direction: row; flex-wrap: wrap; max-width: 14rem; }
.stopped.many .stopchip { padding: 0.1rem 0.5rem 0.1rem 0.2rem; font-size: 0.8rem; }

/* Lobby: Spielplan im Show-Studio */
body[data-mode="price"] :is(.lobby, .votescreen) { --lacc: #ffb13d; --lacc-ink: #2a0845; --lpanel: rgba(42, 8, 69, 0.62); --lline: rgba(255, 210, 63, 0.25); }

/* ------------------------------------------------ Rundenintro: Requisit (intro-props.js) */
/* Der Preis ist heiß: Preisschild an der Schnur */
.rp-tag { width: 44em; height: 28em; transform: rotate(-9deg); margin-top: 6em; }
.rp-tag .body { position: absolute; inset: 0; background: #ffd23f; border: 0.5em solid var(--ink); clip-path: polygon(0 50%, 16% 0, 100% 0, 100% 100%, 16% 100%); box-shadow: inset 0 -1em 0 rgba(0, 0, 0, 0.08); }
.rp-tag .edge { position: absolute; inset: -0.5em; background: var(--ink); clip-path: polygon(0 50%, 16% 0, 100% 0, 100% 100%, 16% 100%); z-index: -1; transform: translateY(1.2em); opacity: 0.45; }
.rp-tag .hole { position: absolute; left: 7em; top: 50%; width: 3.4em; height: 3.4em; margin-top: -1.7em; border-radius: 50%; background: var(--ink); }
.rp-tag .str { position: absolute; left: 8.5em; bottom: 50%; width: 0.35em; height: 22em; background: #fff; transform-origin: bottom; transform: rotate(-30deg); border-radius: 1em; }
.rp-tag .txt { position: absolute; left: 13em; right: 2em; top: 0; bottom: 0; display: grid; align-content: center; color: #d62839; font-family: var(--font-show, var(--font-head)); line-height: 0.95; }
.rp-tag .txt small { font-size: 3em; color: var(--ink); letter-spacing: 0.1em; font-family: var(--font-head); }
.rp-tag .txt b { font-size: 9em; font-weight: 400; white-space: nowrap; }
.rp-tag .txt span { font-size: 3em; color: var(--ink); font-family: var(--font-head); }
.rp-tag .rp-ic { right: -3em; top: -9em; transform: rotate(14deg); }