/* ================================================================ Modus „Gaming“: Retro-Arcade & Synthwave
   Gilt für Host (body.host) und Handy (body.play), sobald body:is([data-mode="gaming"], [data-mode="battle"]) gesetzt ist. */

body:is([data-mode="gaming"], [data-mode="battle"]) {
  --ink: #0e0726;
  --ink-soft: #3a2a6b;
  --bg1: #07041a;
  --bg2: #150a38;
  --paper: #f5f3ff;
  --paper-2: #e4ddff;
  --pink: #ff2e88;
  --blue: #2f80ff;
  --yellow: #ffd23f;
  --green: #1fcf6b;
  --orange: #ff8a3d;
  --teal: #22d3ee;
  --purple: #8b5cf6;
  --red: #ff3860;
  --gold: #ffd23f;
  --cyan: #22d3ee;
  --opt-0: #ff3860;
  --opt-1: #2f80ff;
  --opt-2: #ffae00;
  --opt-3: #19c563;
  --radius: 12px;
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 3px 0 rgba(0, 0, 0, 0.6);
  --font-head: 'Jersey 15', 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-synthesis-weight: none;
  --font-pixel: 'Press Start 2P', 'Jersey 15', monospace;
  --glow-c: 0 0 12px rgba(34, 211, 238, 0.65);
  --glow-p: 0 0 14px rgba(255, 46, 136, 0.7);
}

/* ------------------------------------------------------------ Hintergrund: Sternenhimmel, Sonne, Neon-Gitter */
body:is([data-mode="gaming"], [data-mode="battle"]) .bg {
  background:
    radial-gradient(ellipse 70% 22% at 50% 64%, rgba(255, 46, 136, 0.55), transparent 72%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(34, 211, 238, 0.18), transparent 70%),
    linear-gradient(180deg, #03010f 0%, #0d0630 34%, #25094d 56%, #4d0f66 63.6%, #0a0423 64%, #07041a 100%);
}
body:is([data-mode="gaming"], [data-mode="battle"]) .bg::before {
  inset: 0 0 36% 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 22 22' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Cpath d='M3 2h1v1H3zM7 2h1v1H7zM4 3h3v1H4zM3 4h5v1H3zM2 5h2v1H2zM5 5h1v1H5zM7 5h2v1H7zM2 6h7v1H2zM2 7h1v1H2zM4 7h3v1H4zM8 7h1v1H8zM3 8h1v1H3zM7 8h1v1H7z'/%3E%3Cpath d='M14 13h2v1h-2zM17 13h2v1h-2zM13 14h7v2h-7zM14 16h5v1h-5zM15 17h3v1h-3zM16 18h1v1h-1z'/%3E%3Cpath d='M16 3h2v1h-2zM15 4h1v3h-1zM18 4h1v3h-1zM16 7h2v1h-2z'/%3E%3Cpath d='M3 15h1v1H3zM2 16h3v1H2zM3 17h1v1H3z'/%3E%3C/g%3E%3C/svg%3E");
  animation: bgdrift 90s linear infinite;
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}
body:is([data-mode="gaming"], [data-mode="battle"]) .bg::after {
  content: '';
  position: absolute;
  left: -60%;
  right: -60%;
  top: 64%;
  height: 70%;
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.55) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 46, 136, 0.45) 2px, transparent 2px);
  background-size: 90px 90px;
  background-position: center 0;
  transform-origin: top center;
  transform: perspective(28vh) rotateX(60deg);
  animation: gridRun 1.8s linear infinite;
  -webkit-mask-image: linear-gradient(transparent, #000 22%);
  mask-image: linear-gradient(transparent, #000 22%);
}
@keyframes gridRun { to { background-position: center 90px; } }
body:is([data-mode="gaming"], [data-mode="battle"]) .bg .blob { filter: none; animation: none; border-radius: 50%; }
/* Synthwave-Sonne am Horizont */
body:is([data-mode="gaming"], [data-mode="battle"]) .bg .blob.b1 {
  width: 36vmin;
  height: 36vmin;
  left: calc(50% - 18vmin);
  top: calc(64% - 28vmin);
  opacity: 0.42;
  background: linear-gradient(180deg, #ffe45c 0%, #ff9a3d 42%, #ff2e88 80%);
  -webkit-mask-image: linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 68%, #000 68% 74%, transparent 74% 80%, #000 80% 85%, transparent 85% 91%, #000 91%);
  mask-image: linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 68%, #000 68% 74%, transparent 74% 80%, #000 80% 85%, transparent 85% 91%, #000 91%);
}
body:is([data-mode="gaming"], [data-mode="battle"]) .bg.tinted .blob.b1 { background: linear-gradient(180deg, #ffe45c 0%, color-mix(in srgb, var(--accent) 70%, #ff9a3d) 45%, #ff2e88 85%); }
/* Sterne */
body:is([data-mode="gaming"], [data-mode="battle"]) .bg .blob.b2 {
  width: 3px;
  height: 3px;
  left: 0;
  top: 0;
  right: auto;
  opacity: 1;
  border-radius: 0;
  background: transparent;
  box-shadow:
    8vw 6vh #fff, 17vw 14vh #9ef, 29vw 5vh #fff, 41vw 19vh #fce, 52vw 8vh #fff, 63vw 16vh #9ef, 74vw 4vh #fff, 86vw 12vh #fce, 95vw 22vh #fff,
    4vw 28vh #fce, 23vw 33vh #fff, 36vw 27vh #9ef, 58vw 30vh #fff, 69vw 38vh #fce, 81vw 31vh #fff, 91vw 42vh #9ef, 12vw 45vh #fff, 47vw 44vh #fce,
    33vw 51vh #fff, 77vw 50vh #9ef, 2vw 55vh #fff, 60vw 56vh #fff, 98vw 58vh #fce, 20vw 60vh #9ef;
  animation: twinkle 3.2s steps(2) infinite;
}
body:is([data-mode="gaming"], [data-mode="battle"]) .bg .blob.b3 { display: none; }
@keyframes twinkle { 50% { opacity: 0.45; } }

/* Leichte Bildröhren-Scanlines über allem */
body:is([data-mode="gaming"], [data-mode="battle"])::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3000;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 4px);
}
body.play:is([data-mode="gaming"], [data-mode="battle"])::after { background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px); }

/* ------------------------------------------------------------ Bausteine */
body:is([data-mode="gaming"], [data-mode="battle"]) .card { border-width: 3px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .btn { border-radius: 12px; letter-spacing: 0.04em; }
body:is([data-mode="gaming"], [data-mode="battle"]) .btn.big { border-radius: 14px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .chip { border-radius: 8px; }
body:is([data-mode="gaming"], [data-mode="battle"]) h1, body:is([data-mode="gaming"], [data-mode="battle"]) h2, body:is([data-mode="gaming"], [data-mode="battle"]) h3 { letter-spacing: 0.03em; }
body:is([data-mode="gaming"], [data-mode="battle"]) .avatar { border-radius: 30%; }
body:is([data-mode="gaming"], [data-mode="battle"]) .toast { border-radius: 10px; font-family: var(--font-head); }
body:is([data-mode="gaming"], [data-mode="battle"]) .timer-ring .track { fill: #120a30; stroke: #000; }
body:is([data-mode="gaming"], [data-mode="battle"]) .timer-ring .num { color: #fff; font-family: var(--font-pixel); font-size: calc(var(--size) * 0.28); text-shadow: 0 0 8px var(--tc); }
body:is([data-mode="gaming"], [data-mode="battle"]) .timer-ring .bar { filter: drop-shadow(0 0 6px var(--tc)); }
body:is([data-mode="gaming"], [data-mode="battle"]) .timer-bar { border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
body:is([data-mode="gaming"], [data-mode="battle"]) .timer-bar > i { border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: var(--glow-c); }
body:is([data-mode="gaming"], [data-mode="battle"]) .timer-bar.urgent > i { background: var(--red); }
body:is([data-mode="gaming"], [data-mode="battle"]) .pixel-frame { border-radius: 10px; background: #05020f; }

/* Logo & Schriftzüge */
body:is([data-mode="gaming"], [data-mode="battle"]) .logo {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.05em var(--ink);
  text-shadow: 0 0.07em 0 var(--ink), 0 0 0.35em rgba(255, 46, 136, 0.75);
}
body:is([data-mode="gaming"], [data-mode="battle"]) .logo span:nth-child(odd) { color: var(--cyan); }
body:is([data-mode="gaming"], [data-mode="battle"]) .logo span:nth-child(even) { color: #fff; }
body:is([data-mode="gaming"], [data-mode="battle"]) .logo span { animation-timing-function: steps(4); }
body:is([data-mode="gaming"], [data-mode="battle"]) .logo-sub { font-family: var(--font-pixel); font-size: 1rem; letter-spacing: 0.18em; color: var(--yellow); text-shadow: 0 0 10px rgba(255, 210, 63, 0.7); }

/* Antwort-Symbole wie auf dem Controller: △ ✕ ○ □ */
body:is([data-mode="gaming"], [data-mode="battle"]) .shape svg { overflow: visible; }

/* ------------------------------------------------------------ Quizzly mit Headset */
body:is([data-mode="gaming"], [data-mode="battle"]) .quizzly .qz-headset { display: inline; }
body:is([data-mode="gaming"], [data-mode="battle"]) .quizzly .qz-cap { display: none; }
body:is([data-mode="gaming"], [data-mode="battle"]) .quizzly .qz-bow path:not([stroke-opacity]) { fill: var(--cyan); }
body:is([data-mode="gaming"], [data-mode="battle"]) .quizzly .qz-bow rect { fill: #7ee8f7; }
body:is([data-mode="gaming"], [data-mode="battle"]) .quizzly rect.qz-rgb { animation: rgbFill 4s steps(12) infinite; }
body:is([data-mode="gaming"], [data-mode="battle"]) .quizzly path.qz-rgb { animation: rgbStroke 4s steps(12) infinite; }
body:is([data-mode="gaming"], [data-mode="battle"]) .quizzly .qz-rgb-dot { animation: rgbFill 4s steps(12) infinite reverse; }
@keyframes rgbFill { 0%, 100% { fill: #22d3ee; } 33% { fill: #ff2e88; } 66% { fill: #ffd23f; } }
@keyframes rgbStroke { 0%, 100% { stroke: #22d3ee; } 33% { stroke: #ff2e88; } 66% { stroke: #ffd23f; } }
.quizzly.shades .qz-shades { display: inline; animation: shadesDrop 0.7s steps(7) both; }
@keyframes shadesDrop { from { transform: translateY(-120px); } to { transform: none; } }

/* ------------------------------------------------------------ Host: Splash & Lobby */
body.host:is([data-mode="gaming"], [data-mode="battle"]) .splash .hint, body.host:is([data-mode="gaming"], [data-mode="battle"]) .lobby :is(.setgrp, .xrow) > label { color: #cfc6ff; }
body:is([data-mode="gaming"], [data-mode="battle"]) .lobby .joincard { transform: none; border-color: var(--ink); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(34, 211, 238, 0.35), 0 0 40px rgba(34, 211, 238, 0.25); }
body:is([data-mode="gaming"], [data-mode="battle"]) .joincard .code span { border-radius: 8px; font-family: var(--font-pixel); font-size: 6.4cqw; }
body:is([data-mode="gaming"], [data-mode="battle"]) .joincard .url { font-family: var(--font-head); }
body:is([data-mode="gaming"], [data-mode="battle"]) .lobby .brand { position: relative; }
.editionbadge { display: none; }
body:is([data-mode="gaming"], [data-mode="battle"]) .editionbadge {
  display: inline-block;
  position: absolute;
  left: calc(6.5rem + 1rem);
  bottom: -0.9rem;
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-sm), 0 0 18px rgba(255, 210, 63, 0.6);
  animation: stamp 0.5s var(--ease-back) both;
}
body:is([data-mode="gaming"], [data-mode="battle"]) .pgrid .pl .name { border-radius: 6px; background: rgba(8, 3, 30, 0.7); border: 1px solid rgba(34, 211, 238, 0.4); }
body:is([data-mode="gaming"], [data-mode="battle"]) .pgrid .empty { font-family: var(--font-head); }
body:is([data-mode="gaming"], [data-mode="battle"]) .insertcoin { display: block; color: #e0156f; text-shadow: 0 2px 0 rgba(255, 210, 63, 0.85); }
.insertcoin { display: none; font-family: var(--font-pixel); font-size: 0.95rem; letter-spacing: 0.15em; color: var(--yellow); text-align: center; margin-top: 1.2rem; animation: blink 1.1s steps(2) infinite; text-shadow: 0 0 10px rgba(255, 210, 63, 0.7); }
@keyframes blink { 50% { opacity: 0; } }
body:is([data-mode="gaming"], [data-mode="battle"]) .seg { border-radius: 10px; background: rgba(8, 3, 30, 0.7); border-color: rgba(34, 211, 238, 0.35); }
body:is([data-mode="gaming"], [data-mode="battle"]) .seg button { border-radius: 8px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .seg button.on { background: var(--cyan); color: var(--ink); box-shadow: var(--glow-c); }
body:is([data-mode="gaming"], [data-mode="battle"]) .btn.start { font-family: var(--font-pixel); font-size: 1.15em; padding: 0.95em 1.4em; letter-spacing: 0.08em; --c: var(--pink); box-shadow: var(--shadow), 0 0 22px rgba(255, 46, 136, 0.65); }
body:is([data-mode="gaming"], [data-mode="battle"]) .btn.start:not(:disabled) { animation: pulse 0.55s steps(2) infinite alternate; }

/* ------------------------------------------------------------ Host: Level-Intro */
body:is([data-mode="gaming"], [data-mode="battle"]) .intro::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.18) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 2px, transparent 2px);
  background-size: 48px 48px;
  animation: wipe 0.8s steps(8) forwards;
}
body:is([data-mode="gaming"], [data-mode="battle"]) .intro .rnum { font-family: var(--font-pixel); font-size: 1.2rem; letter-spacing: 0.2em; background: rgba(8, 3, 30, 0.75); border-radius: 6px; border: 2px solid rgba(255, 255, 255, 0.5); }
body:is([data-mode="gaming"], [data-mode="battle"]) .intro .rname { font-weight: 700; -webkit-text-stroke: 0.05em var(--ink); text-shadow: 0 0.08em 0 var(--ink), 0 0 0.4em rgba(255, 255, 255, 0.35); }
body:is([data-mode="gaming"], [data-mode="battle"]) .intro .rname span { animation-timing-function: steps(5); }
body:is([data-mode="gaming"], [data-mode="battle"]) .intro .rsub { border-radius: 8px; }
body[data-mode="gaming"] .ri-how li i { border-radius: 8px; font-family: var(--font-pixel); font-size: 0.75em; }
body:is([data-mode="gaming"], [data-mode="battle"]) .intro .progress i { background: linear-gradient(90deg, var(--cyan), var(--pink)); }
body:is([data-mode="gaming"], [data-mode="battle"]) .intro .ready-go { display: block; }
.intro .ready-go { display: none; position: absolute; right: 3rem; bottom: 2.2rem; font-family: var(--font-pixel); font-size: 1.3rem; color: #fff; text-shadow: 0 3px 0 var(--ink); animation: blink 0.9s steps(2) infinite; }
.pixwipe { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(9, 1fr); pointer-events: none; z-index: 5; }
.pixwipe i { background: #07041a; animation: pixOut 0.35s steps(3) both; }
@keyframes pixOut { to { opacity: 0; transform: scale(0.2); } }
body:is([data-mode="gaming"], [data-mode="battle"]) .intro.final::before { background: radial-gradient(circle, #ff5a5a, #a3123a 60%, #3a0620); background-image: linear-gradient(rgba(0, 0, 0, 0.2) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 2px, transparent 2px), radial-gradient(circle, #ff5a5a, #a3123a 60%, #3a0620); background-size: 48px 48px, 48px 48px, auto; }
body:is([data-mode="gaming"], [data-mode="battle"]) .intro.final .rname { color: #ff5a7a; }

/* ------------------------------------------------------------ Host: Fragen */
body:is([data-mode="gaming"], [data-mode="battle"]) { --chip-r: 10px; --chip-bg: rgba(8, 3, 30, 0.72); --chip-bd: rgba(34, 211, 238, 0.35); }
body:is([data-mode="gaming"], [data-mode="battle"]) .qhead .rbadge .ic { border-radius: 8px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .qhead .qcount { font-family: var(--font-head); }
body:is([data-mode="gaming"], [data-mode="battle"]) .qhead .qcount .dots i { border-radius: 2px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .qcard { font-weight: 600; }
body:is([data-mode="gaming"], [data-mode="battle"]) .opt { border-radius: 14px; box-shadow: inset 0 -0.35rem 0 rgba(0, 0, 0, 0.22), inset 0 0.3rem 0 rgba(255, 255, 255, 0.22), var(--shadow); }
body:is([data-mode="gaming"], [data-mode="battle"]) .opts.revealed .opt.right { box-shadow: 0 0 0 6px #fff, 0 0 40px 12px color-mix(in srgb, var(--oc) 70%, transparent), var(--shadow); }
body:is([data-mode="gaming"], [data-mode="battle"]) .opt .tick { border-radius: 10px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .factcard { border-radius: 12px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .answerbig, body:is([data-mode="gaming"], [data-mode="battle"]) .stampmark { border-radius: 10px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .clue, body:is([data-mode="gaming"], [data-mode="battle"]) .sitem, body:is([data-mode="gaming"], [data-mode="battle"]) .mbar, body:is([data-mode="gaming"], [data-mode="battle"]) .bopt { border-radius: 12px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .sitem .n, body:is([data-mode="gaming"], [data-mode="battle"]) .clue .cn { border-radius: 8px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .solvedcol { border-radius: 12px; background: rgba(8, 3, 30, 0.6); }

/* Spielerleiste */
body:is([data-mode="gaming"], [data-mode="battle"]) #strip .sp .nm { border-radius: 6px; background: rgba(8, 3, 30, 0.8); }
body:is([data-mode="gaming"], [data-mode="battle"]) #strip .sp .pts { border-radius: 6px; font-family: var(--font-head); }
body:is([data-mode="gaming"], [data-mode="battle"]) #strip .sp .ok { border-radius: 6px; }

/* ------------------------------------------------------------ Host: Highscore */
body:is([data-mode="gaming"], [data-mode="battle"]) .scores h1, body:is([data-mode="gaming"], [data-mode="battle"]) .podium h1 {
  font-family: var(--font-pixel);
  font-size: clamp(1.8rem, 3.2vw, 3.6rem);
  color: var(--yellow);
  -webkit-text-stroke: 0;
  text-shadow: 0 0.12em 0 var(--ink), 0 0 0.5em rgba(255, 210, 63, 0.6);
  letter-spacing: 0.06em;
  margin-bottom: 1.4rem;
}
body:is([data-mode="gaming"], [data-mode="battle"]) .scores .sub { font-family: var(--font-head); color: var(--cyan); opacity: 1; }
body:is([data-mode="gaming"], [data-mode="battle"]) .brow { background: rgba(10, 4, 34, 0.88); color: #fff; border: 2px solid color-mix(in srgb, var(--pc) 70%, #fff); border-radius: 10px; box-shadow: 0 0 14px color-mix(in srgb, var(--pc) 40%, transparent); }
body:is([data-mode="gaming"], [data-mode="battle"]) .brow .bar { opacity: 0.35; }
body:is([data-mode="gaming"], [data-mode="battle"]) .brow .rk { font-family: var(--font-pixel); font-size: 1.2rem; color: var(--yellow); }
body:is([data-mode="gaming"], [data-mode="battle"]) .brow .sc { font-family: var(--font-pixel); font-size: 1.35rem; letter-spacing: 0.04em; }
body:is([data-mode="gaming"], [data-mode="battle"]) .brow.first { background: rgba(60, 40, 0, 0.9); border-color: var(--yellow); box-shadow: 0 0 22px rgba(255, 210, 63, 0.6); }
body:is([data-mode="gaming"], [data-mode="battle"]) .brow .delta { border-radius: 6px; background: rgba(31, 207, 107, 0.2); color: #6dffae; }
body:is([data-mode="gaming"], [data-mode="battle"]) .brow .delta.neg { background: rgba(255, 56, 96, 0.2); color: #ff8aa1; }

/* ------------------------------------------------------------ Host: Hall of Fame */
body:is([data-mode="gaming"], [data-mode="battle"]) .pcol .ped {
  border-radius: 4px 4px 0 0;
  color: rgba(14, 7, 38, 0.8);
  font-family: var(--font-pixel);
  background-image:
    radial-gradient(circle at 0.8rem 0.8rem, rgba(14, 7, 38, 0.55) 0.22rem, transparent 0.26rem),
    radial-gradient(circle at calc(100% - 0.8rem) 0.8rem, rgba(14, 7, 38, 0.55) 0.22rem, transparent 0.26rem),
    linear-gradient(rgba(255, 255, 255, 0.35) 0.3rem, transparent 0.3rem);
}
body:is([data-mode="gaming"], [data-mode="battle"]) .pcol.p1 .ped { background-color: #ffc93c; }
body:is([data-mode="gaming"], [data-mode="battle"]) .pcol.p2 .ped { background-color: #c9d3e6; }
body:is([data-mode="gaming"], [data-mode="battle"]) .pcol.p3 .ped { background-color: #e0955a; }
body:is([data-mode="gaming"], [data-mode="battle"]) .pcol .who .nm { font-family: var(--font-head); }
body:is([data-mode="gaming"], [data-mode="battle"]) .award { border-radius: 12px; }
body:is([data-mode="gaming"], [data-mode="battle"]) .award .at { font-family: var(--font-head); }

/* ------------------------------------------------------------ Handy */
body.play:is([data-mode="gaming"], [data-mode="battle"]) .phead { background: rgba(5, 2, 20, 0.85); border-bottom: 2px solid rgba(34, 211, 238, 0.35); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .phead .score { border-radius: 6px; font-family: var(--font-pixel); font-size: 13px; padding: 5px 9px; background: #0e0726; color: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 10px rgba(255, 210, 63, 0.45); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .phead .score::before { content: '1UP '; color: var(--pink); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .reactbar { background: rgba(5, 2, 20, 0.85); border-top-color: rgba(34, 211, 238, 0.3); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .reactbar button { border-radius: 8px; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .abtn { border-radius: 14px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.22), inset 0 4px 0 rgba(255, 255, 255, 0.2), var(--shadow); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .sortbtn, body.play:is([data-mode="gaming"], [data-mode="battle"]) .keypad button, body.play:is([data-mode="gaming"], [data-mode="battle"]) .input { border-radius: 10px; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .introv { background-image: linear-gradient(rgba(0, 0, 0, 0.16) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, 0.16) 2px, transparent 2px); background-size: 32px 32px; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .introv .num { font-family: var(--font-pixel); font-size: 12px; letter-spacing: 0.15em; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .introv .rule b { border-radius: 6px; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .readyv .count { font-family: var(--font-pixel); font-size: 13px; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .readyv .spin { animation: jelly 0.8s steps(4) infinite; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .resultv .pts { font-family: var(--font-pixel); font-size: 34px; -webkit-text-stroke: 0; text-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(255, 255, 255, 0.4); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .resultv .bonus { border-radius: 6px; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .resultv .rank { font-family: var(--font-head); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .waitv h2, body.play:is([data-mode="gaming"], [data-mode="battle"]) .lobbyv h1 { font-family: var(--font-head); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .progressdots i { border-radius: 2px; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .lobbyv .gamingnote { display: block; }
.lobbyv .gamingnote { display: none; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.12em; color: var(--yellow); animation: blink 1.1s steps(2) infinite; }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .podv .pts { font-family: var(--font-pixel) !important; font-size: 26px !important; color: var(--yellow); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .bg::after { animation: none; }

/* Moduswechsel: kurzer „Einschalt“-Effekt wie bei einem Röhrenfernseher */
.modeflash { position: fixed; inset: 0; z-index: 2500; pointer-events: none; background: #fff; animation: crtOn 0.7s ease-out forwards; }
@keyframes crtOn {
  0% { opacity: 1; clip-path: inset(49.5% 0 49.5% 0); }
  35% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
body:is([data-mode="gaming"], [data-mode="battle"]) .mbar .shape svg g g:last-child { stroke: var(--oc); }
body:is([data-mode="gaming"], [data-mode="battle"]) .mbar .shape svg g g:first-child { stroke: rgba(0, 0, 0, 0.35); }
body.play:is([data-mode="gaming"], [data-mode="battle"]) .bg .blob.b1 { opacity: 0.3; }

/* ================================================================ Titel eintippen (Bild-/Clip-Detektiv) – Gaming & Film
   Grundlayout gilt für beide Modi; das Medium steht groß links, rechts Frage, Buchstaben-Tipp und wer es schon hat. */
.gswrap { flex: 1; display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 1.4rem; min-height: 0; }
.gswrap .gsmedia { min-height: 0; display: flex; align-items: center; justify-content: center; }
.gswrap .gsmedia .frame { width: 100%; height: 100%; min-height: 0; animation: popIn 0.5s var(--ease-back) both; }
.gswrap .gsmedia .clipbox { max-height: 100%; }
.gswrap .side { display: flex; flex-direction: column; gap: 0.9rem; min-height: 0; }
.gswrap .qcard { font-size: clamp(1.2rem, 1.7vw, 2.1rem); padding: 0.7rem 1.1rem; }
.gswrap .gshint { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 1rem; animation: slideLeft 0.5s var(--ease-back) both; }
.gswrap .gshint.hidden { display: none; }
.gswrap .gshint small { font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; font-size: 0.85rem; }
.gswrap .gshint .hint { gap: 0.45rem 0.9rem; }
.gswrap .gshint .hint .hl { width: clamp(1.1rem, 1.5vw, 1.8rem); height: clamp(1.6rem, 2.2vw, 2.5rem); font-size: clamp(0.95rem, 1.35vw, 1.6rem); }
.gswrap .gshint .hint .hl.l { background: rgba(0, 0, 0, 0.12); border-bottom-color: currentColor; }
.gswrap .solvedcol { flex: 1; }
.gswrap .side { overflow: hidden; }
.gswrap.revealed .solvedcol { flex: none; padding: 0.6rem 1rem; gap: 0.4rem; }
.gswrap.revealed .solvedcol h3 { display: none; }
.gswrap.revealed .solvedcol .none { margin-top: 0; }
.gswrap .solvedcol .sv .svt { margin-left: auto; opacity: 0.7; font-size: 0.9rem; }
.gswrap .answerbig { font-size: clamp(1.6rem, 2.6vw, 3.4rem); align-self: stretch; }
.gswrap .fails .fl { font-size: 0.95rem; }
.gswrap .factcard { font-size: clamp(0.9rem, 1.05vw, 1.25rem); padding: 0.6rem 0.9rem; }
.gswrap.audio .gsmedia .clipbox { width: 100%; }
.gswrap .frame .caption { position: absolute; left: 0.8rem; top: 0.8rem; z-index: 3; background: var(--paper); color: var(--ink); border: var(--outline); border-radius: 10px; padding: 0.3rem 0.9rem; font-family: var(--font-head); font-size: clamp(1.1rem, 1.6vw, 2rem); box-shadow: var(--shadow-sm); animation: stamp 0.5s 0.4s var(--ease-back) both; }
/* Bild fehlt (reveal.js) */
.pixel-frame .imgfail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; font-size: 3rem; color: #fff; background: rgba(5, 2, 15, 0.85); z-index: 2; }
.pixel-frame .imgfail small { font-size: 1rem; opacity: 0.8; }
/* Combo-Meister: Trefferzahl je Spieler, Absenden am Handy */
.crow .chits { margin-left: auto; font-family: var(--font-head); font-size: 1.3rem; opacity: 0.85; }
.combov .combobtns { width: 100%; gap: 10px; }
/* „Clip hier ansehen“ am Handy: bei Pause/Ende abdecken (keine YouTube-Vorschläge) */
.clipdock.covered::after { content: '⏸'; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #140a33; color: #fff; font-size: 34px; }

/* Gaming-Look: Arcade-Highscore-Eingabe */
body:is([data-mode="gaming"], [data-mode="battle"]) .gswrap .gshint { background: #0b0628; color: #ffd23f; border-color: #22d3ee; box-shadow: 0 0 14px rgba(34, 211, 238, 0.45), var(--shadow-sm); }
body:is([data-mode="gaming"], [data-mode="battle"]) .gswrap .gshint small { color: #22d3ee; font-family: var(--font-pixel); font-size: 0.7rem; letter-spacing: 0.08em; }
body:is([data-mode="gaming"], [data-mode="battle"]) .gswrap .gshint .hint .hl { font-family: var(--font-pixel); font-size: clamp(0.8rem, 1.1vw, 1.3rem); }
body:is([data-mode="gaming"], [data-mode="battle"]) .gswrap .gshint .hint .hl.l { background: rgba(34, 211, 238, 0.12); border-bottom: 0.2rem solid #22d3ee; border-radius: 0; }
body:is([data-mode="gaming"], [data-mode="battle"]) .gswrap .gshint .hint .hl.l.on { background: #ffd23f; color: #0e0726; animation: blink 0.3s steps(2) 2; }
body:is([data-mode="gaming"], [data-mode="battle"]) .gswrap .gsmedia .frame { border-radius: 6px; box-shadow: 0 0 0 4px #0e0726, 0 0 0 7px #22d3ee, 0 0 30px rgba(34, 211, 238, 0.5); }
body:is([data-mode="gaming"], [data-mode="battle"]) .gswrap .answerbig { font-family: var(--font-pixel); font-size: clamp(1rem, 1.7vw, 2.2rem); line-height: 1.4; border-radius: 6px; }

/* Lobby: Spielplan in Neon */
body:is([data-mode="gaming"], [data-mode="battle"]) :is(.lobby, .votescreen) { --lacc: var(--cyan); --lacc-ink: var(--ink); --lpanel: rgba(8, 3, 30, 0.62); --lline: rgba(34, 211, 238, 0.25); }
/* Auflösung: Lösung steht groß da – der Buchstaben-Tipp entfällt, falsche Tipps geben Platz ab, die Wissenskarte bleibt ganz */
.gswrap.revealed .gshint { display: none; }
.gswrap.revealed .fails { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.gswrap .side > .factcard { flex: none; }

/* ------------------------------------------------ Rundenintro: Requisit (intro-props.js) */
/* Gaming: Handheld mit LCD */
.rp-gb { width: 36em; height: 58em; transform: rotate(-5deg); }
.rp-gb .body { position: absolute; inset: 0; background: linear-gradient(160deg, #dcd8ec, #b2abcf); border: 0.5em solid var(--ink); border-radius: 2.4em 2.4em 9em 2.4em; box-shadow: 0 1.3em 0 rgba(0, 0, 0, 0.55); }
.rp-gb .bezel { position: absolute; left: 3em; right: 3em; top: 3em; height: 30em; padding: 2.6em 3.2em 4em; background: #3d3757; border-radius: 1.4em 1.4em 5em 1.4em; }
.rp-gb .bezel::before { content: ''; position: absolute; left: 1.1em; top: 11em; width: 1.2em; height: 1.2em; border-radius: 50%; background: #ff3860; box-shadow: 0 0 1em #ff3860; }
.rp-gb .lcd { height: 100%; display: grid; align-content: center; justify-items: center; gap: 1.3em; background: #9bbc0f; background-image: linear-gradient(rgba(15, 56, 15, 0.07) 0.12em, transparent 0.12em), linear-gradient(90deg, rgba(15, 56, 15, 0.07) 0.12em, transparent 0.12em); background-size: 0.7em 0.7em; border: 0.3em solid #2a2640; box-shadow: inset 0 0 2em rgba(15, 56, 15, 0.35); font-family: var(--font-pixel); color: #0f380f; }
.rp-gb .lcd small { font-size: 2.2em; }
.rp-gb .lcd b { font-size: 8em; line-height: 1; font-weight: 400; }
.rp-gb .lcd .hp { font-size: 2em; letter-spacing: 0.3em; }
.rp-gb .lcd .press { font-size: 1.5em; animation: rpBlink 1s steps(1) infinite; }
.rp-gb .brand { position: absolute; left: 3.6em; top: 34.4em; }
.rp-gb .brand span { font-family: var(--font-head); font-style: italic; font-size: 3em; color: #2b2b8c; }
.rp-gb .dpad { position: absolute; left: 4em; top: 41em; width: 10em; height: 10em; }
.rp-gb .dpad::before, .rp-gb .dpad::after { content: ''; position: absolute; background: #2a2640; border-radius: 0.6em; box-shadow: 0 0.4em 0 rgba(0, 0, 0, 0.35); }
.rp-gb .dpad::before { left: 0; right: 0; top: 3.3em; height: 3.4em; }
.rp-gb .dpad::after { top: 0; bottom: 0; left: 3.3em; width: 3.4em; }
.rp-gb .ab { position: absolute; right: 3.4em; top: 40em; display: flex; gap: 1.6em; transform: rotate(-25deg); }
.rp-gb .ab i { width: 5.4em; height: 5.4em; border-radius: 50%; background: var(--pink); border: 0.35em solid var(--ink); box-shadow: 0 0.4em 0 rgba(0, 0, 0, 0.4); }
.rp-gb .ss { position: absolute; left: 12em; top: 52.5em; display: flex; gap: 2em; transform: rotate(-25deg); }
.rp-gb .ss i { width: 4.4em; height: 1.4em; border-radius: 1em; background: #6b6488; }
.rp-gb .rp-ic { right: -6em; top: -4em; transform: rotate(12deg); }
.final .rp-gb .lcd { background-color: #e8b04a; color: #4a1208; }