/* Friendly Imposter – bunt, gross, gut lesbar. */
:root {
  --bg1: #2b1659; --bg2: #5b2a9c; --ink: #fff; --ink-dim: #d9c9ff;
  --card: rgba(34, 15, 74, .92); --card-line: rgba(255, 255, 255, .18);
  --pink: #ff4fa3; --cyan: #29d3ff; --green: #3ddc84; --yellow: #ffd23f; --red: #ff5a5a; --orange: #ff9a3d;
  --radius: 22px; --shadow: 0 10px 0 rgba(0, 0, 0, .25);
  --font: "Poppins", "Baloo 2", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg1); color: var(--ink); font-family: var(--font); font-weight: 700; font-size: 18px; }
body.community-page { overflow: auto; background: radial-gradient(circle at 50% 0, var(--bg2), var(--bg1)); }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; line-height: 1.1; }
.sr { position: absolute; left: -9999px; }

#frame { position: relative; width: 100vw; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, var(--bg2) 0%, var(--bg1) 70%); }
body.frame-169 { background: #000; }
body.frame-169 #frame { width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16)); top: 50%; transform: translateY(-50%); }
#stage { position: absolute; inset: 0; }
.scene-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ---------- Topbar ---------- */
#topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; pointer-events: none; }
#topbar > * { pointer-events: auto; }
.brand, .top-mid, .top-right { display: flex; align-items: center; gap: 8px; flex: 1; }
.top-mid { justify-content: center; } .top-right { justify-content: flex-end; }
.logo-mark { display: inline-grid; place-items: center; background: var(--pink); color: #fff; border-radius: 14px; padding: 2px 10px; font-weight: 900; font-size: 22px; transform: rotate(-4deg); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.pill { background: rgba(0,0,0,.35); padding: 4px 14px; border-radius: 999px; font-size: 18px; }
.pill.code { letter-spacing: .15em; background: var(--yellow); color: #3a2200; }
.icon-btn { border: 0; background: rgba(0,0,0,.35); border-radius: 14px; min-width: 46px; height: 46px; font-size: 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; }
.icon-btn b { background: var(--pink); border-radius: 999px; padding: 0 8px; font-size: 15px; }
.icon-btn:hover { background: rgba(0,0,0,.5); }

/* ---------- Karten / Buttons ---------- */
.card { background: var(--card); border: 2px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.btn { appearance: none; border: 0; border-radius: 16px; padding: 10px 18px; min-height: 46px; background: #fff; color: #2b1659; font-weight: 900; font-size: 18px; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.28); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.big { min-height: 58px; font-size: 22px; padding: 12px 26px; border-radius: 20px; }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: 16px; border-radius: 12px; }
.btn.pink { background: var(--pink); color: #fff; } .btn.cyan { background: var(--cyan); color: #06304a; } .btn.green { background: var(--green); color: #05361b; }
.btn.ghost { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; } .btn.danger { color: #ffb0b0; }
.link { background: none; border: 0; color: var(--cyan); text-decoration: underline; cursor: pointer; font-size: 16px; padding: 8px; }
a.link { display: block; text-align: center; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); border-radius: 999px; padding: 4px 12px; font-size: 16px; }
.chip.warn { background: var(--orange); color: #331a00; }
.chip svg { width: 30px; height: 30px; flex: none; }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: rgba(0,0,0,.3); border-radius: 14px; padding: 3px; gap: 3px; }
.seg button { white-space: nowrap; border: 0; background: transparent; border-radius: 11px; padding: 6px 16px; min-width: 48px; cursor: pointer; font-weight: 900; }
.seg button.on { background: var(--cyan); color: #06304a; } .seg button:disabled { opacity: .35; cursor: not-allowed; }
.note { padding: 6px 12px; border-radius: 12px; font-size: 16px; margin: 4px 0 8px; }
.note.good { background: rgba(61,220,132,.2); color: #aaffd0; } .note.bad { background: rgba(255,90,90,.2); color: #ffc0c0; }
.hint, .hint-inline, .tagline, .peek-note { color: var(--ink-dim); font-weight: 600; font-size: 16px; }
.hint-inline { margin-left: 8px; font-style: normal; }
.lbl { color: var(--ink-dim); font-size: 15px; text-transform: uppercase; letter-spacing: .06em; } .lbl.big { font-size: 22px; color: #fff; text-transform: none; } .lbl.danger { color: var(--red); }

/* ---------- Landing ---------- */
#overlay { position: absolute; inset: 0; z-index: 20; overflow-y: auto; display: flex; padding: 70px 14px 24px; pointer-events: none; }
#overlay > * { pointer-events: auto; margin: auto; }
.landing { width: min(560px, 100%); }
.logo { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 4px; } .logo h1 { font-size: 34px; }
.tagline { text-align: center; margin: 4px 0 14px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(0,0,0,.3); padding: 4px; border-radius: 18px; margin-bottom: 14px; }
.tab { border: 0; background: transparent; padding: 10px; border-radius: 14px; cursor: pointer; font-weight: 900; font-size: 18px; }
.tab.on { background: var(--pink); }
.field { display: block; margin-bottom: 12px; } .field > span { display: block; margin-bottom: 4px; color: var(--ink-dim); font-size: 15px; }
input[type=text], input:not([type]), textarea, .field input { width: 100%; background: rgba(255,255,255,.95); color: #2b1659; border: 3px solid transparent; border-radius: 14px; padding: 10px 14px; font-weight: 800; font-size: 20px; outline: none; }
input:focus, textarea:focus { border-color: var(--cyan); }
.code-input { text-align: center; letter-spacing: .4em; text-transform: uppercase; font-size: 30px !important; }
.landing .btn.big { width: 100%; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.pick { border: 3px solid transparent; background: rgba(255,255,255,.1); border-radius: 16px; padding: 6px 4px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-size: 13px; color: #fff; }
.pick svg { width: 56px; height: 56px; } .pick.on { border-color: var(--yellow); background: rgba(255,210,63,.22); }
.pick:disabled { opacity: .3; cursor: not-allowed; }

/* ---------- Panel (unten) ---------- */
#panel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(760px, 100%); z-index: 25; padding: 0 12px max(12px, env(safe-area-inset-bottom)); pointer-events: none; max-height: 62%; display: flex; flex-direction: column; justify-content: flex-end; }
#panel > * { pointer-events: auto; background: var(--card); border: 2px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; overflow-y: auto; max-height: 100%; }
#panel:empty { display: none; }
body[data-phase=lobby] #panel { max-height: 78%; }
.lobby, .answering, .discuss, .reveal { display: flex; flex-direction: column; gap: 12px; }
.lobby-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.code-box { background: var(--yellow); color: #3a2200; border-radius: 18px; padding: 4px 18px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.code-box .lbl { color: #7a5200; font-size: 12px; } .code-box .code { font-size: 46px; letter-spacing: .22em; padding-left: .22em; }
.count { margin-left: auto; font-size: 20px; }
.roster { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.player { background: rgba(255,255,255,.16); padding: 4px 12px 4px 4px; } .chip.player.off { opacity: .45; } .chip.player.big svg { width: 44px; height: 44px; }
.chip .x { border: 0; background: rgba(0,0,0,.35); color: #fff; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; line-height: 1; }
.settings { display: grid; gap: 8px; } .setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .settings.readonly { display: flex; flex-wrap: wrap; gap: 8px; }
.mychar summary { cursor: pointer; padding: 6px 0; } .mychar .picker { margin-top: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .actions .btn.big { flex: 1; min-width: 200px; }
.waiting { text-align: center; padding: 10px; background: rgba(255,255,255,.1); border-radius: 16px; font-size: 20px; flex: 1; } .waiting.ok { background: rgba(61,220,132,.22); }
.progress { margin-left: 8px; opacity: .85; }

/* Antworten */
.secret-card { background: linear-gradient(135deg, #7c3aed, #4f46e5); border-radius: 18px; padding: 14px 16px; } .secret-card.imposter { background: linear-gradient(135deg, #be123c, #7e22ce); }
.secret-card .q { font-size: clamp(22px, 4.5vw, 34px); line-height: 1.15; margin-top: 4px; }
.opts { margin: 8px 0 0; padding-left: 28px; display: grid; gap: 6px; font-size: clamp(18px, 3.6vw, 26px); }
.answer-form { display: flex; gap: 10px; } .answer-form input { flex: 1; min-width: 0; font-size: 28px; text-align: center; }
.secret-blur { filter: blur(12px); transition: filter .15s; user-select: none; cursor: pointer; } .secret-blur.peek { filter: none; }
.peek-note { margin-top: 6px; font-size: 14px; }

/* Diskussion */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-target { border: 3px solid transparent; cursor: pointer; font-size: 18px; } .pick-target.on { border-color: var(--yellow); background: rgba(255,210,63,.25); } .pick-target:disabled { opacity: .6; cursor: default; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.opt { display: flex; gap: 10px; align-items: center; text-align: left; border: 3px solid transparent; background: rgba(255,255,255,.14); border-radius: 14px; padding: 8px 12px; cursor: pointer; font-size: 18px; }
.opt b { background: var(--pink); border-radius: 10px; min-width: 32px; text-align: center; } .opt.on { border-color: var(--yellow); background: rgba(255,210,63,.25); }
.opts-compact summary { cursor: pointer; } .q.mini { margin-top: 6px; font-size: 20px; }

/* Aufloesung */
.winner-banner { background: linear-gradient(90deg, var(--yellow), var(--orange)); color: #3a1c00; text-align: center; font-size: 28px; padding: 10px; border-radius: 18px; animation: pop .6s; }
.reveal-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .imp-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.real .q { font-size: 22px; margin-top: 4px; }
.guess { padding: 6px 12px; border-radius: 12px; background: rgba(255,255,255,.1); } .guess.right { background: rgba(61,220,132,.22); } .guess.wrong { background: rgba(255,90,90,.22); }
.scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; } .score-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border-radius: 14px; padding: 4px 12px 4px 6px; }
.score-row svg { width: 38px; height: 38px; } .score-row b { flex: 1; } .score-row em { color: var(--green); font-style: normal; } .score-row.winner { background: rgba(255,210,63,.3); }

/* Namensschilder ueber den Koepfen */
.tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; will-change: transform; white-space: nowrap; }
.plate { display: flex; align-items: center; gap: 6px; background: rgba(20,8,48,.82); border: 2px solid rgba(255,255,255,.3); border-radius: 999px; padding: 2px 12px; font-size: 17px; }
.tag .sc { background: var(--yellow); color: #3a2200; border-radius: 999px; padding: 0 8px; font-size: 15px; }
.tag .you { color: var(--cyan); font-size: 13px; } .tag.is-me .plate { border-color: var(--cyan); }
.tag.is-selected .plate { border-color: var(--yellow); background: #6d3b00; }
.tag.is-imposter .plate { border-color: var(--red); background: #6b0b24; } .tag.is-winner .plate { border-color: var(--yellow); }
.tag.is-offline { opacity: .5; }
.bubble { background: #fff; color: #2b1659; border-radius: 16px; padding: 2px 14px; font-size: 24px; font-weight: 900; box-shadow: 0 4px 0 rgba(0,0,0,.25); animation: pop .35s; }
.extras { display: flex; gap: 6px; font-size: 18px; } .delta { color: var(--green); font-size: 22px; }

/* Banner, Toast, Verbindung, Modal */
#banner { position: absolute; left: 50%; top: 18%; z-index: 40; transform: translate(-50%, -20px) scale(.8); opacity: 0; pointer-events: none; font-size: clamp(34px, 7vw, 72px); font-weight: 900; text-align: center; text-shadow: 0 5px 0 rgba(0,0,0,.35), 0 0 30px var(--pink); max-width: 92%; }
#banner.show { animation: banner 2.1s ease both; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px) scale(1); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
#toast { position: absolute; left: 50%; top: 66px; z-index: 60; transform: translate(-50%, -10px); background: #fff; color: #2b1659; padding: 10px 18px; border-radius: 16px; opacity: 0; pointer-events: none; transition: .2s; max-width: 90%; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
#toast.show { opacity: 1; transform: translate(-50%, 0); } #toast.error { background: var(--red); color: #fff; }
#conn { position: absolute; z-index: 70; left: 50%; top: 10px; transform: translateX(-50%); background: var(--red); padding: 6px 16px; border-radius: 999px; }
#modal { position: absolute; inset: 0; z-index: 80; background: rgba(10,4,30,.7); display: grid; place-items: center; padding: 14px; }
.modal-card { background: #2a1260; border: 2px solid var(--card-line); border-radius: var(--radius); padding: 20px; width: min(520px, 100%); max-height: 90%; overflow-y: auto; display: grid; gap: 12px; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .menu-row small { display: block; color: var(--ink-dim); font-weight: 600; font-size: 14px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .qitem { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.1); border-radius: 14px; padding: 8px 12px; } .qtext { flex: 1; } .qtext small { display: block; color: var(--ink-dim); } .qbtns { display: flex; gap: 6px; } .empty { color: var(--ink-dim); text-align: center; padding: 14px; }
.fatal { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; text-align: center; background: var(--bg1); padding: 20px; gap: 10px; }

/* Streamer-Modus: nichts Geheimes auf dem Bildschirm */
body.stream .secret-blur { filter: blur(14px); }

/* ---------- 2D-Ausweichansicht ---------- */
.fb-scene { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, #b98a5c 0%, #8a5a37 55%, #3a2217 100%); }
.fb-table { position: absolute; left: 50%; top: 45%; width: 62%; height: 44%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #b86a2b, #7a3f14); border: 8px solid #5b2d0c; box-shadow: 0 14px 0 rgba(0,0,0,.25); display: grid; place-items: center; }
.fb-question { font-size: 64px; opacity: .35; }
.fb-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; } .fb-lines line { stroke: var(--yellow); stroke-width: 5; stroke-dasharray: 10 8; stroke-linecap: round; }
.fb-char { position: absolute; left: 0; top: 0; border: 0; background: none; padding: 0; cursor: pointer; transition: transform .25s; } .fb-char svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 0 rgba(0,0,0,.25)); }
.fb-char.is-me svg { filter: drop-shadow(0 0 10px var(--cyan)); } .fb-char.is-selected svg { filter: drop-shadow(0 0 12px var(--yellow)); }
.fb-char.is-offline { opacity: .45; } .fb-char[data-pose=cheer] { animation: hop .5s infinite alternate; } .fb-char[data-pose=sad] { filter: grayscale(.6); }
@keyframes hop { to { margin-top: -14px; } }

@media (max-width: 560px) { .brand .chip, .pill:not(.code) { display: none; } .brand, .top-mid, .top-right { flex: none; } #topbar { justify-content: space-between; } .plate { font-size: 14px; padding: 1px 8px; } .bubble { font-size: 20px; } body { font-size: 16px; } .code-box .code { font-size: 36px; } .logo h1 { font-size: 26px; } #panel { max-height: 70%; } .landing { padding: 14px; } }
/* Bewegung reduzieren: Animationen sind nur sehr kurz, werden aber NICHT abgeschaltet. Sonst bleiben Elemente, die per Animation eingeblendet werden (z. B. die Aufloesung), unsichtbar. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* =================================================================
   Politur: Effekte, Fragekarten, Enthuellung, Titelbildschirm
   ================================================================= */
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }
#cine { position: absolute; inset: 0; z-index: 85; overflow: hidden; cursor: pointer; animation: fadeIn .3s both; }
#cine.out { animation: fadeOut .35s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,63,.0); } 50% { box-shadow: 0 0 28px 6px rgba(255,210,63,.7); } }

/* Hintergrund: langsam wandernder Farbverlauf */
#frame { background: linear-gradient(135deg, #2b1659, #5b2a9c 40%, #7a2f9e 60%, #2b1659); background-size: 300% 300%; animation: bgmove 24s ease-in-out infinite; }
@keyframes bgmove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Panel: gleitet hoch, Knoepfe federn */
#panel > * { animation: slideUp .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.btn.big:not(:disabled):not(.ghost) { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.btn:active:not(:disabled) { animation: none; }

/* Titelbildschirm */
.landing .logo-mark { animation: wiggle 2.6s ease-in-out infinite; font-size: 30px; padding: 4px 14px; }
.landing { animation: slideUp .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.char-tag { text-align: center; margin-top: 8px; color: var(--ink-dim); font-size: 16px; min-height: 24px; } .char-tag b { color: var(--yellow); }
#overlay > .parade { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; display: flex; justify-content: center; gap: 4px; pointer-events: none; padding: 0 8px; }
.parade span { width: min(8vw, 86px); flex: 1 1 0; max-width: 86px; animation: bounce 1.3s ease-in-out infinite; transform-origin: bottom center; }
.parade svg { width: 100%; display: block; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
@keyframes bounce { 0%, 100% { transform: translateY(14px) scale(1, .96); } 50% { transform: translateY(-6px) scale(.98, 1.04); } }
@media (max-height: 640px), (max-width: 560px) { #overlay > .parade { display: none; } }
#overlay > .landing { position: relative; z-index: 2; }
#overlay > .parade { z-index: 1; }
.mychar summary em { color: var(--ink-dim); font-style: normal; font-weight: 600; font-size: 14px; }

/* Fragekarten A-D (auf dem Tisch) */
#options { position: absolute; z-index: 22; pointer-events: none; font-size: 15px; left: 10px; top: 66px; width: clamp(230px, 25vw, 320px); max-height: calc(100% - 66px - var(--panel-h, 0px) - 14px); display: flex; flex-direction: column; }
.board { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.board-head { align-self: flex-start; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 900; color: #fff; background: var(--card); border: 2px solid var(--card-line); border-radius: 999px; padding: 6px 14px; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.board-head i { font-style: normal; transition: transform .2s; } .board.collapsed .board-head i { transform: rotate(-90deg); }
.board.collapsed .opts-bar { display: none; }
.board .opts-bar { overflow-y: auto; padding: 4px 10px 12px 4px; scrollbar-width: thin; min-height: 0; }
#options:empty { display: none; }
.opts-bar { display: flex; flex-direction: column; gap: 9px; }
.oc { position: relative; display: flex; align-items: center; gap: 8px; text-align: left; border: 3px solid rgba(0,0,0,.25); border-radius: 16px; padding: 7px 10px; color: #20103a; font-weight: 800; line-height: 1.12; box-shadow: 0 5px 0 rgba(0,0,0,.28); animation: cardIn .45s cubic-bezier(.2, .9, .3, 1.3) both; min-height: 3.2em; pointer-events: auto; }
.oc:nth-child(2) { animation-delay: .07s; } .oc:nth-child(3) { animation-delay: .14s; } .oc:nth-child(4) { animation-delay: .21s; } .oc:nth-child(5) { animation-delay: .28s; }
@keyframes cardIn { from { transform: translateY(24px) rotate(-6deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.oc b { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(32,16,58,.85); color: #fff; font-size: 1em; }
.oc span { flex: 1; font-size: 1em; overflow-wrap: anywhere; }
.oc.c0 { background: #ff8cc4; } .oc.c1 { background: #7fe3ff; } .oc.c2 { background: #ffe27a; } .oc.c3 { background: #8ff0b4; } .oc.c4 { background: #ffb36b; }
.opts-bar.interactive .oc { pointer-events: auto; cursor: pointer; transition: transform .12s; font: inherit; font-weight: 800; }
.opts-bar.interactive .oc:hover { transform: translateY(-3px) scale(1.03); }
.oc.on { border-color: #20103a; transform: translateY(-4px) scale(1.05); animation: none; box-shadow: 0 0 0 4px #fff, 0 8px 0 rgba(0,0,0,.3); }
.oc .mine { position: absolute; top: -12px; right: -8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: #3a2200; font-style: normal; font-size: 17px; box-shadow: 0 3px 0 rgba(0,0,0,.3); animation: wiggle 1.4s infinite; pointer-events: auto; }
.oc.real { border-color: #fff; animation: glow 1.2s infinite; } .oc.dim { opacity: .45; filter: saturate(.6); }
.oc em { position: absolute; top: -12px; left: -8px; background: #3ddc84; color: #04361a; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-style: normal; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
@media (max-width: 759px) { #options { left: 8px; right: 64px; width: auto; top: 58px; max-height: 40%; } .board .opts-bar { gap: 5px; } .oc { padding: 5px 8px; min-height: 2.4em; border-width: 2px; box-shadow: 0 3px 0 rgba(0,0,0,.28); font-size: 13.5px; line-height: 1.12; align-items: flex-start; } .oc b { width: 1.6em; height: 1.6em; } }

/* Fortschritt "4/5" */
.meter { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; margin-left: 8px; }
.meter-bar { display: inline-block; width: 90px; height: 12px; background: rgba(0,0,0,.35); border-radius: 99px; overflow: hidden; }
.meter-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 99px; transition: width .4s cubic-bezier(.2, .9, .3, 1.4); }
.discuss-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pick-line, .votes-meter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.votes-meter { margin-left: auto; }
.secret-card .q.small { font-size: 18px; font-weight: 700; }
#panel > * { padding: 12px 14px; }
.lobby, .answering, .discuss, .reveal { gap: 10px; }

/* Namensschilder: am Tisch anklickbar */
body[data-phase=discussion] .tag { pointer-events: auto; cursor: pointer; }
body[data-phase=discussion] .tag:not(.is-me):hover .plate { transform: scale(1.12); border-color: var(--yellow); }
.plate { transition: transform .15s, border-color .15s, background .15s; }
body[data-phase=discussion] .tag:not(.is-me) .plate::after { content: '👆'; font-size: 14px; opacity: 0; transition: opacity .2s; }
body[data-phase=discussion] .tag:not(.is-me):hover .plate::after { opacity: 1; }
.tag.is-selected .plate { transform: scale(1.18); background: #7a3f00; border-color: var(--yellow); box-shadow: 0 0 20px 4px rgba(255,210,63,.65); }
.tag .state { animation: pop .3s; }

/* Enthuellung */
.cine-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(60,20,120,.88), rgba(14,5,38,.96)); backdrop-filter: blur(6px); }
.cine-a, .cine-b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; }
.cine-a { animation: cineIn .45s cubic-bezier(.2, .9, .3, 1.2) both, cineOut .4s ease-in forwards; }
.cine-b { opacity: 0; animation: cineIn .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes cineIn { from { opacity: 0; transform: scale(.85) translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cineOut { to { opacity: 0; transform: scale(1.1); } }
.cine-title { font-size: clamp(30px, 6vw, 64px); text-shadow: 0 5px 0 rgba(0,0,0,.35), 0 0 30px var(--pink); text-align: center; }
.suspects { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1000px; }
.suspect { width: clamp(100px, 16vw, 160px); background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.25); border-radius: 22px; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: slideUp .5s both; }
.suspect svg { width: 70%; } .suspect b { font-size: 20px; }
.suspect.top { animation: slideUp .5s both, topPulse .8s ease-in-out infinite; animation-delay: 0s, var(--hl); }
@keyframes topPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); border-color: var(--yellow); background: rgba(255,210,63,.25); } }
.vchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 34px; }
.vchip { width: 32px; height: 32px; opacity: 0; animation: chipIn .5s cubic-bezier(.2, .9, .3, 1.5) forwards; background: rgba(255,255,255,.2); border-radius: 50%; overflow: hidden; }
.vchip svg { width: 100%; height: 100%; }
@keyframes chipIn { from { opacity: 0; transform: translateY(-80px) scale(2) rotate(-40deg); } to { opacity: 1; transform: none; } }
.cine-majority { opacity: 0; font-size: clamp(22px, 4vw, 40px); animation: cineIn .5s both; text-shadow: 0 4px 0 rgba(0,0,0,.35); text-align: center; color: var(--yellow); }
.flip-row { display: flex; gap: 24px; perspective: 900px; }
.flip { width: clamp(150px, 22vw, 230px); aspect-ratio: .8; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flipOver .9s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: var(--d); }
@keyframes flipOver { 0% { transform: rotateY(0) scale(1); } 40% { transform: rotateY(90deg) scale(1.15); } 100% { transform: rotateY(180deg) scale(1); } }
.flip-front, .flip-back { position: absolute; inset: 0; border-radius: 26px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 10px 0 rgba(0,0,0,.35); }
.flip-front { background: linear-gradient(135deg, #7c3aed, #ff4fa3); font-size: clamp(70px, 14vw, 130px); font-weight: 900; }
.flip-back { transform: rotateY(180deg); background: linear-gradient(160deg, #be123c, #7e22ce); gap: 4px; }
.flip-back svg { width: 72%; } .flip-back b { font-size: clamp(22px, 3.4vw, 34px); } .flip-back .mask { position: absolute; top: -18px; right: -14px; font-size: 56px; transform: rotate(14deg); filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.cine-reveal { opacity: 0; font-size: clamp(28px, 5.5vw, 58px); text-align: center; text-shadow: 0 5px 0 rgba(0,0,0,.35); animation: cineIn .5s both; }
.cine-outcome { opacity: 0; font-size: clamp(24px, 4.4vw, 44px); padding: 6px 28px; border-radius: 99px; animation: cineIn .5s both; }
.cine-outcome.good { background: var(--green); color: #04361a; } .cine-outcome.bad { background: var(--orange); color: #3a1c00; }
.cine-guesses { opacity: 0; animation: cineIn .5s both; text-align: center; display: grid; gap: 6px; max-width: 760px; }
.cine-guess { font-size: 20px; padding: 4px 14px; border-radius: 99px; background: rgba(255,255,255,.12); } .cine-guess.right { background: rgba(61,220,132,.3); } .cine-guess.wrong { background: rgba(255,90,90,.3); }
.cine-real { font-size: clamp(18px, 2.6vw, 26px); color: var(--ink-dim); }
.cine-skip { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: var(--ink-dim); font-size: 14px; opacity: .7; }
body.cine #topbar, body.cine #labels { visibility: hidden; }

.answer-form input { flex: 1 1 0; min-width: 0; }
.answer-form .btn { flex: none; }
@media (max-width: 480px) { .answer-form .btn.big { padding: 10px 14px; font-size: 18px; } .answer-form input { font-size: 22px; } }
@media (min-width: 700px) { .settings:not(.readonly) { grid-template-columns: 1fr 1fr; gap: 8px 22px; } .roster { max-height: 96px; overflow-y: auto; } }

/* Nachbarn links/rechts */
.nbs { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; }
.nb { background: rgba(255,255,255,.12); padding: 4px 12px; border-radius: 99px; }
.nb.l { border-left: 5px solid var(--cyan); } .nb.r { border-right: 5px solid var(--pink); }
.tag.nb-left .plate { border-color: var(--cyan); box-shadow: 0 0 14px rgba(41,211,255,.7); }
.tag.nb-right .plate { border-color: var(--pink); box-shadow: 0 0 14px rgba(255,79,163,.7); }
.tag.nb-left .plate::before { content: '◀'; color: var(--cyan); font-size: 13px; }
.tag.nb-right .plate::after { content: '▶'; color: var(--pink); font-size: 13px; }
body[data-phase=discussion] .tag.nb-right:not(.is-me) .plate::after { content: '▶'; opacity: 1; }

/* ---- Brand / Logo ---- */
@font-face { font-family: 'Poppins'; font-weight: 700 900; font-display: swap; src: url('/fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400 600; font-display: swap; src: url('/fonts/Poppins-Medium.ttf') format('truetype'); }
.logo-img { width: min(440px, 86vw); height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation: logoBob 4s ease-in-out infinite; }
.logo-img.sm { width: min(260px, 70vw); }
.brand-icon { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.25); transform: rotate(-4deg); }
h1.vt { text-align: center; font-size: 24px; margin: 4px 0 10px; }
@keyframes logoBob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }

/* ---- Timer, Reaktionen, Einladung, Sprachraster, Podium, Anleitung ---- */
#timer { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 31; width: 58px; height: 58px; display: grid; place-items: center; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.3)); }
#timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#timer .bg { fill: rgba(34,15,74,.92); stroke: rgba(255,255,255,.18); stroke-width: 4; }
#timer .fg { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--frac, 1) * 100); transition: stroke-dashoffset .3s linear; }
#timer b { position: relative; font-size: 22px; line-height: 1; }
#timer.urgent .fg { stroke: var(--red); } #timer.urgent b { color: var(--red); animation: timerPulse .5s ease-in-out infinite; }
@keyframes timerPulse { 50% { transform: scale(1.25); } }
body.timing .top-mid { visibility: hidden; }

#floats { position: absolute; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.react-float { position: absolute; font-size: 44px; transform: translate(-50%, -50%); animation: reactUp 2.2s cubic-bezier(.2,.7,.3,1) forwards; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
@keyframes reactUp { 0% { opacity: 0; transform: translate(-50%, 0) scale(.3); } 12% { opacity: 1; transform: translate(-50%, -20px) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -150px) scale(1); } }
#reactions { position: absolute; right: 10px; top: 76px; z-index: 33; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.react-toggle { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--card-line); background: var(--card); font-size: 26px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.3); line-height: 1; transition: transform .15s; }
.react-toggle:hover, .react-toggle.on { transform: scale(1.1); border-color: var(--yellow); }
.react-bar { display: none; flex-direction: column; gap: 4px; background: var(--card); border: 2px solid var(--card-line); border-radius: 24px; padding: 6px; }
.react-bar.open { display: grid; grid-template-columns: repeat(2, auto); animation: pop .25s; }
.react-bar button { width: 42px; height: 42px; border: 0; background: transparent; border-radius: 50%; font-size: 26px; cursor: pointer; line-height: 1; transition: transform .12s, background .12s; }
.react-bar button:hover { background: rgba(255,255,255,.15); transform: scale(1.25); } .react-bar button:active { transform: scale(.9); }

.qr-box { background: #fff; color: #1b0f3a; border-radius: 14px; padding: 6px 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; line-height: 1; }
.qr-box .qr { width: 96px; height: 96px; display: block; } .qr-box span { font-weight: 900; }
.invite-btns { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 560px) { .qr-box { display: none; } .invite-btns { flex-direction: row; flex-wrap: wrap; } #timer { width: 50px; height: 50px; } #timer b { font-size: 19px; } }

.lang-grid { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; }
#langs.lang-grid { justify-content: center; margin: 4px 0 10px; }
.lang-grid button { border: 2px solid transparent; background: rgba(0,0,0,.3); border-radius: 12px; padding: 4px 11px; cursor: pointer; font-weight: 800; font-size: 15px; }
.lang-grid button:hover { background: rgba(255,255,255,.14); } .lang-grid button.on { background: var(--cyan); color: #06304a; }
.setting.wide { grid-column: 1 / -1; align-items: flex-start; flex-direction: column; }
.menu-row.col { flex-direction: column; align-items: flex-start; }

.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 6px 0 2px; padding-top: 52px; min-height: 196px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(30%, 150px); animation: podIn .7s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc((3 - var(--i)) * .35s); }
.pod-who { display: flex; flex-direction: column; align-items: center; position: relative; } .pod-who svg { width: 62px; height: 62px; } .pod1 .pod-who svg { width: 84px; height: 84px; }
.pod-who b { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crown { position: absolute; top: -26px; font-style: normal; font-size: 30px; animation: wiggle 1.6s infinite; }
.pod-step { width: 100%; border-radius: 14px 14px 4px 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.pod1 .pod-step { height: 96px; background: linear-gradient(var(--yellow), var(--orange)); color: #3a1c00; }
.pod2 .pod-step { height: 70px; background: linear-gradient(#e8ecf7, #aab3d1); color: #232a45; }
.pod3 .pod-step { height: 52px; background: linear-gradient(#f0b27a, #c97b3e); color: #3a1c00; }
.pod-rank { font-size: 28px; line-height: 1; } .pod-pts { font-size: 13px; } .pod-pts em { color: #0b7a3a; font-style: normal; }
@keyframes podIn { from { opacity: 0; transform: translateY(60px) scale(.7); } to { opacity: 1; transform: none; } }

.howto h2 { text-align: center; font-size: 28px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: s; }
.how-steps li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.09); border-radius: 16px; padding: 8px 12px; font-size: 17px; line-height: 1.25; animation: cineIn .4s both; animation-delay: calc(var(--i) * .08s); }
.how-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--pink); font-size: 24px; }
.how-steps li:nth-child(2) .how-ico { background: var(--red); } .how-steps li:nth-child(3) .how-ico { background: var(--cyan); } .how-steps li:nth-child(4) .how-ico { background: var(--green); } .how-steps li:nth-child(5) .how-ico { background: var(--orange); }
/* CJK und Kyrillisch brauchen Systemschriften als Fallback */
:lang(zh), :lang(ja), :lang(ko) { font-family: var(--font), "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR", "Microsoft YaHei", "Yu Gothic", "Malgun Gothic", sans-serif; }
.lang-select { background: rgba(0,0,0,.35); color: var(--ink); border: 2px solid var(--card-line); border-radius: 12px; padding: 7px 12px; font-weight: 800; font-size: 16px; cursor: pointer; min-width: 150px; }
.lang-select:focus { outline: none; border-color: var(--cyan); } .lang-select option { color: #1b0f3a; background: #fff; }
#timer.long b { font-size: 16px; }
@media (max-width: 759px) { #reactions { top: 62px; } .nbs { font-size: 14px; } }

/* ---- Chat (rechte Spalte) ---- */
.icon-btn.on { background: rgba(255,255,255,.28); }
#chat { position: absolute; z-index: 36; right: 10px; top: 66px; width: clamp(240px, 22vw, 320px); bottom: 14px; display: flex; flex-direction: column; background: rgb(36, 17, 70); border: 2px solid var(--card-line); border-radius: 20px; box-shadow: 0 6px 0 rgba(0,0,0,.3); overflow: hidden; animation: pop .22s; }
#chat[hidden] { display: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 2px solid var(--card-line); }
.chat-close { border: 0; background: rgba(255,255,255,.14); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; scrollbar-width: thin; }
.chat-empty { opacity: .7; text-align: center; margin-top: 16px; }
.chat-msg { background: rgba(255,255,255,.1); border-radius: 14px 14px 14px 4px; padding: 6px 10px; line-height: 1.25; overflow-wrap: anywhere; align-self: flex-start; max-width: 92%; }
.chat-msg.mine { background: rgba(255,120,190,.3); border-radius: 14px 14px 4px 14px; align-self: flex-end; }
.chat-msg b { display: block; font-size: .78em; opacity: .75; }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 2px solid var(--card-line); }
.chat-form input { flex: 1; min-width: 0; font: inherit; border: 2px solid var(--card-line); border-radius: 12px; padding: 8px 10px; background: rgba(0,0,0,.25); color: #fff; }
.chat-form .btn { padding: 8px 12px; }
body.chat-open #reactions { right: calc(clamp(240px, 22vw, 320px) + 22px); }
@media (max-width: 759px) {
  #chat { left: 8px; right: 8px; width: auto; top: 60px; bottom: 10px; z-index: 60; }
  body.chat-open #reactions { right: 10px; display: none; }
}

#camreset { position: absolute; z-index: 30; right: 10px; bottom: calc(var(--panel-h, 0px) + 14px); width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--card-line); background: var(--card); font-size: 22px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
#camreset[hidden] { display: none; }
body.chat-open #camreset { right: calc(clamp(240px, 22vw, 320px) + 22px); }
@media (max-width: 759px) { body.chat-open #camreset { display: none; } }
body:not(.in-room) #camreset { display: none; }

/* 2D-Ansicht: Themes */
.fb-scene[data-theme=moon] { background: radial-gradient(ellipse at 50% 0%, #1b2a5a 0%, #05060f 70%); }
.fb-scene[data-theme=moon] .fb-table { background: radial-gradient(ellipse at 50% 40%, #3a4d66, #1b2736); border-color: #6fe9ff; }
.fb-scene[data-theme=forest] { background: radial-gradient(ellipse at 50% 50%, #2b3a22 0%, #0b150f 70%); }
.fb-scene[data-theme=forest] .fb-table { background: radial-gradient(ellipse at 50% 50%, #ff9a45 0%, #6d6a63 22%, #57544e); border-color: #3f3d3a; }
.seat-hint { margin: 2px 0 6px; font-size: 14px; }
.lobby .actions { position: sticky; bottom: 0; padding: 8px 0 2px; background: linear-gradient(to top, rgba(34,15,74,.98) 70%, rgba(34,15,74,0)); z-index: 2; }
.lobby > * { flex-shrink: 0; }
.linkbtn { background: none; border: 0; color: var(--cyan); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.trash-list { list-style: none; margin: 8px 0; padding: 0 4px 0 0; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.trash-list > li { display: flex; gap: 10px; } .trash-list > li > b { color: var(--yellow); min-width: 2.2em; }
.trash-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 15px; font-weight: 600; }
.trash-list li.real { color: var(--yellow); }

.skipvote { margin-top: 8px; } .skipvote.on { background: var(--cyan); color: #06304a; }
.react-toggle.kiss, .react-toggle.move { margin-top: 6px; }
.react-toggle.kiss.on { background: #ff4f8b; border-color: #fff; animation: pop .25s; }

#panel, .lobby, .settings, .setting { min-width: 0; max-width: 100%; }
#panel { overflow-x: hidden; }
.seg button { padding-left: 12px; padding-right: 12px; }

/* Eigenes Fragenpaket */
.packrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.packrow .invite-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.modal-card.pack { max-height: 88vh; overflow: auto; }
.modal-card.pack h2 small { font-size: .6em; opacity: .7; font-weight: 500; }
.pack-list { max-height: 34vh; overflow: auto; list-style: none; padding: 0; margin: 10px 0; }
.pack-list li { display: flex; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pack-list .pk-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pack-list .pk-text em { opacity: .6; font-size: .85em; }
.pack-add textarea { width: 100%; box-sizing: border-box; }
.pack-add .seg { margin: 8px 0 4px; flex-wrap: wrap; }

.nb i { font-style: normal; font-weight: 800; font-size: .72em; letter-spacing: .08em; opacity: .85; }
.nb { background: rgba(20,10,50,.72); }
.nb b { text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.react-toggle.shock { margin-top: 6px; }
.react-toggle.shock.on { background: #ffd84a; border-color: #fff; animation: pop .25s; }
.react-float.shock { font-size: 54px; display: flex; flex-direction: column; align-items: center; margin-left: -30px; }
.react-float.shock small { font-size: 13px; font-weight: 800; background: rgba(0,0,0,.65); color: #fff; border-radius: 99px; padding: 1px 8px; }

.pack-search { width: 100%; box-sizing: border-box; margin-top: 8px; }
.pack-list .pk-n { opacity: .45; font-size: .8em; min-width: 2.2em; text-align: right; }
.pack-list li[hidden] { display: none; }

.fb-scene[data-theme=beach] { background: linear-gradient(180deg, #7fd0ff 0%, #bfe8ff 45%, #1eb0dc 46%, #efd49a 70%); }
.fb-scene[data-theme=beach] .fb-table { background: radial-gradient(ellipse at 50% 50%, #fff7e6, #c99a62); border-color: #3bb4ff; }
.fb-scene[data-theme=lego] { background: linear-gradient(180deg, #8fd0ff 0%, #d6efff 55%, #3fae49 56%); }
.fb-scene[data-theme=lego] .fb-table { background: radial-gradient(ellipse at 50% 50%, #ff5a4a, #e3342f); border-color: #ffc933; }
.fb-scene[data-theme=xmas] { background: radial-gradient(ellipse at 50% 50%, #5b2e1c 0%, #1a0f14 75%); }
.fb-scene[data-theme=xmas] .fb-table { background: radial-gradient(ellipse at 50% 50%, #c4323a, #7a1d24); border-color: #2f9e58; }
.fb-scene[data-theme=train] { background: linear-gradient(180deg, #ffb27a 0%, #ffe3b0 50%, #3f7a3f 51%); }
.fb-scene[data-theme=train] .fb-table { background: radial-gradient(ellipse at 50% 50%, #faf4e6, #7a4a28); border-color: #d9b45a; }

.fb-scene[data-theme=london] { background: linear-gradient(180deg, #9aa7b5 0%, #cfd6dc 50%, #6b7580 51%, #5a6068 100%); }
.fb-scene[data-theme=london] .fb-table { background: radial-gradient(ellipse at 50% 50%, #8a5a38, #4a2f1c); border-color: #b3202a; }
.fb-scene[data-theme=paris] { background: linear-gradient(180deg, #2f3f8a 0%, #a56fa8 35%, #ff9a7a 60%, #cdbfa6 61%); }
.fb-scene[data-theme=paris] .fb-table { background: radial-gradient(ellipse at 50% 50%, #fff2d8, #c9a77a); border-color: #8b1e3a; }
.fb-scene[data-theme=dino] { background: linear-gradient(180deg, #ffb070 0%, #ff7a4a 40%, #3f7a3a 41%, #2a5a2a 100%); }
.fb-scene[data-theme=dino] .fb-table { background: radial-gradient(ellipse at 50% 50%, #9a8a74, #5a4e40); border-color: #ff5a1a; }
.fb-scene[data-theme=rome] { background: linear-gradient(180deg, #5a4a8a 0%, #e8805a 35%, #ffd290 60%, #d8c7a2 61%); }
.fb-scene[data-theme=rome] .fb-table { background: radial-gradient(ellipse at 50% 50%, #f7f3ea, #cbb98f); border-color: #e6b030; }

.fb-scene[data-theme=ocean] { background: linear-gradient(180deg, #0d4a78 0%, #1b7fa8 55%, #d9c593 100%); }
.fb-scene[data-theme=ocean] .fb-table { background: radial-gradient(ellipse at 50% 50%, #7fd6f0, #2c6c86); border-color: #c9973f; }

img.face.photo { border-radius: 50%; object-fit: cover; aspect-ratio: 1; background: #fff; border: 2px solid rgba(255,255,255,.7); }
.chip img.face { width: 30px; height: 30px; flex: none; }
.chip.player.big img.face { width: 44px; height: 44px; }
.vchip img.face { width: 100%; height: 100%; }
.suspect img.face { width: 70%; } .flip-back img.face { width: 72%; }
.photo-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.photo-row img.face { width: 48px; height: 48px; }

body.panel-min #panel > * { display: none; }
body.panel-min #options { display: none; }

/* iOS Safari: Scrollen im Overlay/Panel zuverlässig machen */
#frame { height: 100vh; height: -webkit-fill-available; height: 100dvh; }
#overlay { pointer-events: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: max(90px, calc(env(safe-area-inset-bottom) + 70px)); align-items: flex-start; }
#overlay:empty { pointer-events: none; padding: 0; }
#overlay > * { margin: auto; }
#overlay > .landing { margin-top: 0; margin-bottom: 0; }
#panel > * { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
#topbar { z-index: 40; }
.react-float.shock { animation: reactUp 2.8s cubic-bezier(.2,.7,.3,1) forwards; }
@media (prefers-reduced-motion: reduce) { .react-float { animation-duration: 2.8s !important; } }

/* v27: Foto-Schild ueber dem Namen, Fragekarten, Handy-Bedienung */
.tag-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.3); pointer-events: none; }
.tag.is-me .tag-photo { border-color: var(--cyan); }
.tag.is-selected .tag-photo { border-color: var(--yellow); }
.tag.is-imposter .tag-photo { border-color: var(--red); }
@media (max-width: 759px) { .tag-photo { width: 48px; height: 48px; border-width: 2px; } }
.oc { flex-shrink: 0; }
.oc span { min-width: 0; word-break: break-word; }
.bubble { max-width: 160px; overflow-wrap: anywhere; white-space: normal; text-align: center; line-height: 1.1; }
body.panel-min #options, body.panel-min #reactions { display: none; }
.settings-fold { background: rgba(255,255,255,.08); border-radius: 14px; padding: 6px 10px; }
.settings-fold > summary { cursor: pointer; font-weight: 900; padding: 4px 0; }
.settings-fold[open] > summary { margin-bottom: 8px; }

/* v28: Namen/Fotos liegen UNTER Menue, Fragen und Panel; Handy-Layout ohne Scrollen */
#labels { z-index: 15; }
@media (max-width: 759px) {
  #options { max-height: none; top: 52px; left: 6px; right: 60px; }
  .board .opts-bar { overflow: visible; padding: 2px 4px 4px 2px; gap: 4px; }
  .board-head { padding: 3px 10px; font-size: 13px; }
  .oc { padding: 3px 7px; min-height: 0; font-size: 12px; line-height: 1.1; border-width: 2px; border-radius: 12px; box-shadow: 0 2px 0 rgba(0,0,0,.28); gap: 6px; }
  .oc b { width: 1.5em; height: 1.5em; font-size: .95em; }
  .discuss { gap: 6px; } .discuss-row { gap: 6px; }
  .votes-meter .lbl { display: none; }
  #panel > * { padding: 8px 10px; }
  .btn.big { padding-top: 8px; padding-bottom: 8px; font-size: 20px; }
  .tag-photo { width: 44px; height: 44px; }
  .plate { font-size: 13px; }
  .tag { gap: 2px; }
}
#options, .board .opts-bar { max-height: none !important; overflow: visible !important; }
@media (max-width: 759px) { .oc { font-size: 1em; } }
.best-via { text-align: center; margin: 12px 0 0; font-size: 14px; color: var(--ink-dim); font-weight: 700; }
.pack-tabs { margin: 8px 0; } .pack-tabs .lbl { margin-bottom: 4px; }
.chip.pack-tab { border: 2px solid transparent; cursor: pointer; font: inherit; color: inherit; } .chip.pack-tab.on { border-color: var(--yellow); background: rgba(255,210,63,.25); }
@media (min-width: 760px) { #options { width: clamp(280px, 30vw, 420px); } }
.enjoying { text-align: center; margin: 0; font-size: 17px; color: var(--ink-dim); }
:lang(th) { font-family: var(--font), "Noto Sans Thai", "Leelawadee UI", "Tahoma", sans-serif; }

/* v36 */
.chip .x.photo-x, .chip .x[data-act="photo-remove"] { width: auto; height: auto; border-radius: 999px; padding: 3px 10px; font-size: 13px; background: #b3262d; font-weight: 800; white-space: nowrap; }
.photo-row .btn.ghost[data-act="photo-remove"] { background: #b3262d; border-color: #ff8a8a; color: #fff; }
#camreset { right: auto; left: 10px; bottom: min(calc(var(--panel-h, 0px) + 14px), 50%); z-index: 38; }
body.chat-open #camreset { left: 10px; right: auto; }
.vchips { gap: 6px; min-height: 0; }
.vchip { width: auto; height: auto; border-radius: 14px; padding: 3px 8px 3px 3px; display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.22); overflow: visible; }
.vchip svg, .vchip img.face { width: 30px; height: 30px; flex: none; }
.vchip i { font-style: normal; font-size: 14px; font-weight: 800; }
.vlabel { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.suspect { width: clamp(130px, 18vw, 200px); }
.history h3 { margin: 10px 0 4px; font-size: 15px; color: var(--ink-dim); }
.history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.history li { background: rgba(255,255,255,.1); border-radius: 12px; padding: 5px 10px; font-size: 15px; }
.history li.real { background: rgba(255,210,63,.3); }
.history .hist-a li { display: flex; justify-content: space-between; gap: 10px; } .history .hist-a li span { font-size: 18px; color: var(--yellow); }
.history li.imp { background: rgba(255,90,90,.25); }
.history { max-height: 88vh; overflow-y: auto; }
/* Aufloesung am PC: Panel rechts statt unten, damit die Antworten am Tisch sichtbar bleiben */
@media (min-width: 900px) {
  body[data-phase=reveal] #panel { left: auto; right: 0; bottom: 0; top: 64px; transform: none; width: min(380px, 34vw); max-height: none; justify-content: flex-start; }
  body[data-phase=reveal] #panel > * { max-height: 100%; }
}

/* ---------- v38: Auszeichnungen am Spielende ---------- */
.awards { max-width: 520px; width: min(94vw, 520px); text-align: center; overflow: hidden; }
.awards h2 { margin: 0 0 10px; font-size: 26px; letter-spacing: .5px; background: linear-gradient(90deg,#ffd23b,#ff7fd0,#6fe9ff,#ffd23b); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: awShine 4s linear infinite; }
.aw-list { display: grid; gap: 10px; max-height: min(66vh, 560px); overflow: auto; padding: 4px 2px; }
.award { --c1: #ffd23b; --c2: #ff7fd0; position: relative; display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 16px; border-radius: 20px; border: 2px solid color-mix(in srgb, var(--c1) 70%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 26%, #1b1033), color-mix(in srgb, var(--c2) 22%, #1b1033)); box-shadow: 0 0 22px color-mix(in srgb, var(--c1) 35%, transparent), inset 0 0 18px rgba(255,255,255,.06); opacity: 0; transform: translateX(60px) scale(.8) rotate(2deg); animation: awIn .7s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(var(--i) * 1.1s + .3s); overflow: hidden; }
.award::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); animation: awSweep 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 1.1s + 1s); pointer-events: none; }
.a-liar { --c1: #ff4fa0; --c2: #8a3bff; }
.a-spy { --c1: #6fe9ff; --c2: #3b6bff; }
.a-sus { --c1: #ff6a3b; --c2: #ff2f55; }
.a-mind { --c1: #b78bff; --c2: #ff7fd0; }
.a-gull { --c1: #8be36f; --c2: #3bd6a8; }
.aw-icon { font-size: 52px; line-height: 1; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c1) 80%, transparent)); animation: awBob 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
.aw-body { min-width: 0; flex: 1; }
.aw-title { font-weight: 900; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--c1); text-shadow: 0 0 10px color-mix(in srgb, var(--c1) 60%, transparent); }
.aw-names { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0; font-size: 21px; }
.aw-who { display: inline-flex; align-items: center; gap: 6px; }
.aw-who svg, .aw-who img { width: 30px; height: 30px; }
.aw-desc { font-size: 14px; color: var(--ink-dim); }
.awards .modal-actions { opacity: 0; animation: awIn .5s ease forwards; animation-delay: calc(var(--i) * 1.1s + .5s); }
@keyframes awIn { to { opacity: 1; transform: none; } }
@keyframes awSweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes awBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes awShine { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .award, .awards .modal-actions { animation-duration: .01s; animation-delay: 0s; } .award::after, .aw-icon, .awards h2 { animation: none; } }

.fb-scene[data-theme=west] { background: linear-gradient(180deg, #2a1a4a 0%, #e0604a 38%, #ffb060 58%, #d8a468 59%); }
.fb-scene[data-theme=west] .fb-table { background: radial-gradient(ellipse at 50% 50%, #2f8a5a, #1f6a45); border-color: #5a3a22; }
.fb-scene[data-theme=tokyo] { background: linear-gradient(180deg, #070418 0%, #3a1f7a 40%, #ff6ab8 62%, #26262e 63%); }
.fb-scene[data-theme=tokyo] .fb-table { background: radial-gradient(ellipse at 50% 50%, #2a2030, #17121a); border-color: #c01830; }

/* ---------- v39: Runden-Highlight + Jubel ---------- */
.highlight { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-radius: 18px; border: 2px solid rgba(255,210,63,.6); background: linear-gradient(120deg, rgba(255,210,63,.18), rgba(255,79,163,.18)); animation: hlIn .6s cubic-bezier(.2,1.4,.4,1); }
.hl-bluff { border-color: rgba(255,79,163,.7); } .hl-crowd { border-color: rgba(41,211,255,.7); }
.hl-icon { font-size: 36px; line-height: 1; animation: awBob 2s ease-in-out infinite; }
.hl-main { flex: 1; min-width: 120px; text-align: left; }
.hl-title { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--yellow); }
.hl-text { font-size: 17px; }
.hl-cheer { display: flex; gap: 4px; }
.hl-cheer button { border: 0; background: rgba(255,255,255,.14); border-radius: 14px; font-size: 24px; width: 44px; height: 44px; cursor: pointer; transition: transform .1s; }
.hl-cheer button:active { transform: scale(1.35); }
@keyframes hlIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

.daily { margin: 8px 0 0; padding: 8px 14px; border-radius: 16px; background: rgba(255,210,63,.12); border: 1px dashed rgba(255,210,63,.5); font-size: 15px; line-height: 1.35; text-align: left; }
.daily b { color: var(--yellow); }

/* ---------- v41: Frage des Tages als schraege Karte links vom Startmenue ---------- */
.landing { position: relative; }
.daily-note { position: absolute; right: calc(100% + 34px); top: 70px; width: 290px; padding: 26px 22px 20px; border-radius: 26px; transform: rotate(-6deg); text-align: left;
  background: linear-gradient(150deg, #ffe066 0%, #ff9ad0 62%, #b78bff 100%); color: #2b1659; border: 3px solid #fff;
  box-shadow: 0 14px 0 rgba(0,0,0,.28), 0 0 50px rgba(255,210,63,.45); animation: dnIn .8s cubic-bezier(.2,1.4,.4,1) .25s both, dnFloat 5s ease-in-out 1.1s infinite; }
.dn-tape { position: absolute; left: 50%; top: -14px; width: 96px; height: 28px; margin-left: -48px; background: rgba(255,255,255,.7); border-radius: 4px; transform: rotate(3deg); box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.dn-label { display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; background: #2b1659; color: #ffe066; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.dn-q { font-size: 23px; font-weight: 900; line-height: 1.22; }
.dn-spark { position: absolute; right: 14px; bottom: 8px; font-size: 26px; color: #fff; animation: awBob 2s ease-in-out infinite; text-shadow: 0 0 12px #fff; }
@keyframes dnIn { from { opacity: 0; transform: translateX(-120px) rotate(-22deg) scale(.6); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes dnFloat { 0%,100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-8px); } }
@media (max-width: 1240px) {
  .daily-note { position: relative; right: auto; top: auto; width: auto; margin: 16px 6px 0; padding: 20px 16px 14px; transform: rotate(-1.5deg); animation: none; box-shadow: 0 8px 0 rgba(0,0,0,.25); }
  .dn-q { font-size: 18px; }
}
.dn-label { font-size: 11px; letter-spacing: .9px; line-height: 1.3; border-radius: 14px; }

.fb-scene[data-theme=egypt] { background: linear-gradient(180deg, #05061a 0%, #2a2a6a 45%, #ff9a4a 62%, #c9a068 63%); }
.fb-scene[data-theme=egypt] .fb-table { background: radial-gradient(ellipse at 50% 50%, #f4d36a, #b8862a); border-color: #2a4a8a; }
.fb-scene[data-theme=cinema] { background: linear-gradient(180deg, #14060c 0%, #3a0c1c 55%, #5a1426 62%, #2a0a12 63%); }
.fb-scene[data-theme=cinema] .fb-table { background: radial-gradient(ellipse at 50% 50%, #5a2a1c, #2a1410); border-color: #ffd24a; }
.fb-scene[data-theme=halloween] { background: linear-gradient(180deg, #06040f 0%, #2a1a4a 55%, #4a2a6a 62%, #1d2a1f 63%); }
.fb-scene[data-theme=halloween] .fb-table { background: radial-gradient(ellipse at 50% 50%, #3a2450, #241530); border-color: #ff8a1e; }

/* v49: Kamera-Reset sitzt fest in der Knopfleiste, direkt unter "Do my move" */
#camreset, body.chat-open #camreset { position: static; right: auto; left: auto; bottom: auto; margin-top: 6px; width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; line-height: 1; padding: 0; opacity: 1; transition: opacity .2s, transform .15s; }
#camreset.idle { opacity: .5; }
#camreset:hover { transform: scale(1.1); border-color: var(--yellow); opacity: 1; }
body:not(.in-room) #camreset, body:not(.in-room).chat-open #camreset { display: none; }
/* v49: schmale Handys - Kopfleiste kompakter, damit nichts abgeschnitten wird und der Timer keine Knoepfe ueberdeckt */
@media (max-width: 480px) {
  #topbar { padding-left: 8px; padding-right: 8px; gap: 4px; }
  .top-right { gap: 5px; }
  .icon-btn { min-width: 36px; height: 36px; font-size: 18px; border-radius: 12px; }
  .icon-btn b { font-size: 12px; padding: 0 6px; }
  #timer { width: 42px; height: 42px; top: 4px; left: calc(50% - 66px); }
  #timer b { font-size: 16px; }
  #timer.long b { font-size: 13px; }
}

/* v50: Rundenverlauf mit Reitern, Foto-Hinweis */
.hist-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.hist-tab { border: 2px solid var(--card-line); background: rgba(255,255,255,.1); color: var(--ink); border-radius: 999px; padding: 3px 14px; font-weight: 800; font-size: 15px; cursor: pointer; }
.hist-tab.on { background: var(--yellow); color: #3a2200; border-color: #fff; }
.photo-note { margin: 4px 0 0; font-size: 13px; opacity: .85; }

/* ---- Enthuellungs-Varianten */
.flip { position: relative; }
.fx-emoji { position: absolute; z-index: 3; left: 50%; top: -6%; font-size: clamp(44px, 9vw, 96px); opacity: 0; transform: translateX(-50%); pointer-events: none; animation: fxEmoji 1.6s ease-out both; animation-delay: calc(var(--d) + .5s); }
@keyframes fxEmoji { 0% { opacity: 0; transform: translateX(-50%) scale(.3); } 25% { opacity: 1; transform: translateX(-50%) scale(1.3); } 100% { opacity: 0; transform: translateX(-50%) translateY(-70px) scale(1); } }
.fx-drop .flip-in { animation-name: flipDrop; }
@keyframes flipDrop { 0% { transform: translateY(-120vh) rotateY(180deg); } 60% { transform: translateY(0) rotateY(180deg); } 72% { transform: translateY(-40px) rotateY(180deg); } 84%, 100% { transform: translateY(0) rotateY(180deg); } }
.fx-spin .flip-in { animation-name: flipSpin; animation-duration: 1.3s; }
@keyframes flipSpin { 0% { transform: rotateY(0) scale(.6); } 100% { transform: rotateY(900deg) scale(1); } }
.fx-smoke .flip-in { animation-name: flipSmoke; }
@keyframes flipSmoke { 0% { transform: rotateY(0); } 40% { transform: rotateY(90deg); } 70% { transform: rotateY(180deg) scale(1.12); } 100% { transform: rotateY(180deg) scale(1); } }
.fx-runaway .flip-in { animation-name: flipRun; }
@keyframes flipRun { 0% { transform: rotateY(0); } 45% { transform: rotateY(180deg); } 65% { transform: rotateY(180deg) translateX(0) rotate(0); } 80% { transform: rotateY(180deg) translateX(40px) rotate(-8deg); } 100% { transform: rotateY(180deg) translateX(-18px) rotate(4deg); } }
.fx-laugh .flip-in { animation-name: flipLaugh; }
@keyframes flipLaugh { 0% { transform: rotateY(0); } 45% { transform: rotateY(180deg); } 55% { transform: rotateY(180deg) rotate(-6deg); } 65% { transform: rotateY(180deg) rotate(6deg); } 75% { transform: rotateY(180deg) rotate(-6deg); } 85%, 100% { transform: rotateY(180deg) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .fx-emoji { display: none; } }

/* ---- Abstimmung: lustigste / schockierendste Antwort */
.vote-box { background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.18); border-radius: 16px; padding: 8px 12px; }
.vote-box summary { cursor: pointer; font-weight: 800; }
.vote-box .hint { margin: 4px 0 8px; opacity: .8; font-size: 13px; }
.vote-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.vote-row svg, .vote-row img { width: 30px; height: 30px; flex: none; }
.vote-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.vote-ans { font-variant-numeric: tabular-nums; opacity: .85; min-width: 3ch; text-align: right; }
.vote-btns { display: flex; gap: 6px; }
.vote-btn { border: 2px solid transparent; background: rgba(255,255,255,.14); border-radius: 14px; font-size: 20px; min-width: 52px; height: 40px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: inherit; transition: transform .1s; }
.vote-btn b { font-size: 13px; }
.vote-btn:active { transform: scale(1.25); }
.vote-btn.on { border-color: var(--yellow); background: rgba(255,210,63,.3); }

/* ---- Enthuellung: Umstehende, Handschellen, Aergernis */
.cine-stage { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 28px); width: 100%; }
.cine-side { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: center; max-width: 30vw; }
.cine-cheer, .cine-miss { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; animation: ccIn .5s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: var(--d); }
.cine-cheer svg, .cine-cheer img, .cine-miss svg, .cine-miss img { width: clamp(38px, 7vw, 64px); height: clamp(38px, 7vw, 64px); }
.cine-cheer b, .cine-miss b { font-size: clamp(11px, 1.6vw, 15px); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cine-cheer { animation: ccIn .5s cubic-bezier(.2, 1.5, .4, 1) both, ccHop .7s ease-in-out infinite; animation-delay: var(--d), calc(var(--d) + .5s); }
@keyframes ccIn { from { opacity: 0; transform: translateY(40px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ccHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.cc-emoji, .cm-emoji { position: absolute; top: -14px; right: -8px; font-size: clamp(18px, 3vw, 28px); z-index: 2; }
.cine-misses { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; max-width: 94vw; }
.cine-miss { animation: ccIn .5s cubic-bezier(.2, 1.5, .4, 1) both, ccShake .35s linear 3; animation-delay: var(--d), calc(var(--d) + .4s); filter: saturate(.7); }
@keyframes ccShake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-4deg); } 75% { transform: translateX(5px) rotate(4deg); } }
.cm-pick { display: inline-flex; align-items: center; gap: 3px; font-size: clamp(10px, 1.5vw, 13px); opacity: .9; background: rgba(0,0,0,.28); border-radius: 99px; padding: 1px 8px 1px 4px; }
.cm-pick svg, .cm-pick img { width: 20px !important; height: 20px !important; }
.cm-pick i { font-style: normal; max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cine-misses.big .cine-miss svg, .cine-misses.big .cine-miss img { width: clamp(44px, 8vw, 72px); height: clamp(44px, 8vw, 72px); }
.cine-cuffs { position: absolute; z-index: 4; left: 50%; top: 96%; font-size: clamp(40px, 7vw, 84px); opacity: 0; transform: translate(-50%, -50%); animation: cuffSlam .6s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--d); filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)); pointer-events: none; }
@keyframes cuffSlam { from { opacity: 0; transform: translate(-50%, -300%) scale(2.4) rotate(-30deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
.cine-siren { position: absolute; z-index: 4; right: -14px; top: -26px; font-size: clamp(30px, 5vw, 52px); opacity: 0; animation: sirenBlink .4s steps(2) 6; animation-delay: var(--d); pointer-events: none; }
@keyframes sirenBlink { 0% { opacity: 1; filter: hue-rotate(0); } 50% { opacity: 1; filter: hue-rotate(200deg); } 100% { opacity: 0; } }
@media (max-width: 560px) { .cine-side { max-width: 26vw; gap: 4px; } .cine-stage { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .cine-cheer, .cine-miss { animation-name: ccIn; } .cine-siren { display: none; } }
.flip-row { position: relative; }

/* ---- Abstimmung ueber den Koepfen */
.tag .vbar { display: none; gap: 4px; pointer-events: none; }
body[data-phase=reveal] .tag .vbar:not([hidden]) { display: flex; }
.tag .vb { pointer-events: none; border: 2px solid rgba(255,255,255,.35); background: rgba(20,10,50,.78); color: #fff; border-radius: 999px; min-width: 38px; height: 34px; padding: 0 6px; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; transition: transform .1s; }
.tag .vb b { font-size: 12px; }
.tag .vb:active { transform: scale(1.3); }
.tag .vb.on { border-color: var(--yellow); background: rgba(255,210,63,.45); }
.tag .vb:disabled { pointer-events: none; opacity: .65; }
.vote-hint { margin: 0; font-size: 13px; opacity: .8; text-align: center; }
/* ---- Reveal-Menue kompakt */
.reveal .scoreboard { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.reveal .scoreboard .score-row { padding: 2px 10px 2px 4px; gap: 6px; font-size: 13px; border-radius: 999px; min-height: 0; }
.reveal .scoreboard .score-row svg, .reveal .scoreboard .score-row img { width: 24px; height: 24px; }
.reveal .actions { position: sticky; bottom: 0; padding: 8px 0 2px; background: linear-gradient(0deg, rgba(20,10,50,.96) 70%, rgba(20,10,50,0)); z-index: 5; }

/* ---- Imposter hinter Gittern / haut ab */
.cine-bars { position: absolute; inset: -4px; z-index: 4; display: flex; justify-content: space-around; pointer-events: none; }
.cine-bars i { display: block; width: 9px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #5a5f6a, #d8dde6 45%, #5a5f6a); box-shadow: 0 0 6px rgba(0,0,0,.6); opacity: 0; transform: translateY(-120%); animation: barDrop .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.cine-bars i:nth-child(1) { animation-delay: var(--d); } .cine-bars i:nth-child(2) { animation-delay: calc(var(--d) + .07s); } .cine-bars i:nth-child(3) { animation-delay: calc(var(--d) + .14s); } .cine-bars i:nth-child(4) { animation-delay: calc(var(--d) + .21s); } .cine-bars i:nth-child(5) { animation-delay: calc(var(--d) + .28s); }
.cine-bars i { height: 100%; }
@keyframes barDrop { from { opacity: 0; transform: translateY(-120%); } 12% { opacity: 1; } to { opacity: 1; transform: none; } }
.cine-bars::before, .cine-bars::after { content: ''; position: absolute; left: 0; right: 0; height: 9px; background: linear-gradient(180deg, #d8dde6, #5a5f6a); border-radius: 5px; opacity: 0; animation: fadeIn .2s both; animation-delay: calc(var(--d) + .4s); }
.cine-bars::before { top: 26%; } .cine-bars::after { top: 68%; }
.cine-lock { position: absolute; z-index: 5; left: 50%; top: 50%; font-size: clamp(36px, 6vw, 64px); opacity: 0; transform: translate(-50%, -50%); animation: lockPop .5s cubic-bezier(.2, 1.8, .4, 1) both; animation-delay: var(--d); filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)); pointer-events: none; }
@keyframes lockPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.fx-dash .flip, .fx-smoke .flip { animation-delay: calc(var(--d) + 1.5s); animation-fill-mode: both; }
.fx-dash .flip { animation-name: dashAway; animation-duration: .8s; animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
@keyframes dashAway { 0% { transform: none; } 22% { transform: translateX(-26px) scale(1.06) rotate(-4deg); } 100% { transform: translateX(150vw) skewX(-24deg) rotate(6deg); } }
.fx-smoke .flip { animation-name: poof; animation-duration: .6s; }
@keyframes poof { 0% { transform: none; opacity: 1; } 60% { transform: scale(1.2) rotate(8deg); opacity: 1; } 100% { transform: scale(0) rotate(540deg); opacity: 0; } }
.cine-puff { position: absolute; left: 50%; top: 50%; z-index: 5; font-size: clamp(70px, 14vw, 150px); opacity: 0; transform: translate(-50%, -50%); animation: puffOut 1.4s ease-out both; animation-delay: var(--d); pointer-events: none; }
@keyframes puffOut { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1.8); } }
.cine-misses.shake .cm-emoji { animation: headShake .5s ease-in-out 4; animation-delay: calc(var(--d) + .5s); transform-origin: 50% 80%; }
@keyframes headShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } }
.cine-cuffs { display: none; }
@media (max-height: 720px) { .flip { width: clamp(100px, 19vh, 170px); } .cine-a, .cine-b { gap: 8px; } }

.tag .vbar { display: none; }
body[data-phase=reveal] .tag .vbar:not([hidden]) { display: flex; }
.tag .vb { min-width: 0; height: 28px; font-size: 16px; padding: 0 6px; }
.tag .dissolve { position: absolute; left: 50%; bottom: -18px; font-size: 34px; pointer-events: none; animation: dissolveUp 1.4s ease-out both; }
@keyframes dissolveUp { 0% { transform: translate(-50%, 30px) scale(.4); opacity: 0; } 20% { opacity: 1; transform: translate(calc(-50% + var(--dx)), 0) scale(1.4); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), 40px) scale(.2); filter: blur(4px); } }
/* ---- Emote-Ablage nach der Runde (ziehen oder antippen) */
#votetray { position: fixed; left: 8px; top: 34%; z-index: 60; display: none; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; max-width: 94vw; }
body[data-phase=reveal] #votetray.on { display: flex; }
body.cine #votetray { display: none !important; }
#votetray .vt-row { display: flex; flex-direction: column; gap: 14px; pointer-events: auto; background: rgba(20,10,50,.82); border: 2px solid rgba(255,255,255,.25); border-radius: 26px; padding: 12px 8px; }
#votetray .vt-hint { max-width: 112px; font-size: 11px; opacity: .85; text-align: center; background: rgba(20,10,50,.6); border-radius: 99px; padding: 2px 10px; }
.vt-tok { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(255,255,255,.5); background: rgba(255,255,255,.14); font-size: 28px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; position: relative; }
.vt-tok i { position: absolute; bottom: -7px; font-style: normal; font-size: 10px; background: #000a; border-radius: 99px; padding: 0 5px; white-space: nowrap; }
.vt-tok.armed { border-color: var(--yellow); box-shadow: 0 0 14px 3px rgba(255,210,63,.7); transform: scale(1.1); }
.vt-tok.used { opacity: .55; }
.vt-ghost { position: fixed; z-index: 400; font-size: 44px; pointer-events: none; transform: translate(-50%, -50%); transition: transform .35s ease-in, opacity .35s; }
body.vt-drag .tag { outline: 2px dashed rgba(255,255,255,.0); }
.tag.vt-over .plate { border-color: var(--yellow); box-shadow: 0 0 18px 4px rgba(255,210,63,.7); transform: scale(1.15); }
@media (max-width: 480px) { .vt-tok { width: 44px; height: 44px; font-size: 22px; } #votetray { top: 22%; } #votetray .vt-hint { max-width: 90px; font-size: 10px; } }

body[data-phase=reveal] .tag { pointer-events: auto; cursor: pointer; }

.cine-bars { inset: -4px; }
.cine-label { opacity: 0; font-size: clamp(13px, 2vw, 18px); font-weight: 800; padding: 2px 14px; border-radius: 99px; animation: cineIn .4s both; white-space: nowrap; }
.cine-label.right { background: rgba(60, 220, 120, .25); color: #9dffc4; }
.cine-label.wrong { background: rgba(255, 140, 60, .25); color: #ffc08a; }
.cine-winner { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); z-index: 6; opacity: 0; white-space: nowrap; font-size: clamp(20px, 4.4vw, 46px); font-weight: 900; color: #3a2200; background: linear-gradient(90deg, #ffd23f, #ffb02e); padding: 8px 28px; border-radius: 99px; box-shadow: 0 8px 0 rgba(0,0,0,.35); animation: winnerPop .7s cubic-bezier(.2, 1.6, .4, 1) both; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
@keyframes winnerPop { from { opacity: 0; transform: translateX(-50%) scale(.3); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

.cine-side { flex-direction: column; flex-wrap: nowrap; align-items: center; }
.cine-side .cine-label { margin-bottom: 4px; }
.cine-side { align-content: center; }
.cine-winner-wrap { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(circle at 50% 45%, rgba(60,30,110,.94), rgba(10,5,30,.97)); opacity: 0; animation: fadeIn .6s both; text-align: center; padding: 16px; }
.cw-trophy { font-size: clamp(80px, 18vw, 170px); animation: cwBob 1.2s ease-in-out infinite; filter: drop-shadow(0 10px 0 rgba(0,0,0,.35)); }
@keyframes cwBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
.cw-names { font-size: clamp(32px, 8vw, 84px); font-weight: 900; color: var(--yellow); text-shadow: 0 6px 0 rgba(0,0,0,.4); max-width: 94vw; overflow-wrap: anywhere; }
.cw-text { font-size: clamp(20px, 4vw, 42px); font-weight: 800; }

/* Emote-Ablage: horizontal, unten links (Desktop) bzw. oben mittig (Handy) */
#votetray { left: 12px; top: auto; bottom: 12px; align-items: flex-start; }
#votetray .vt-row { flex-direction: row; gap: 12px; padding: 8px 14px; border-radius: 999px; }
#votetray .vt-hint { max-width: 300px; font-size: 12px; text-align: left; }
@media (max-width: 760px) { #votetray { left: 50%; transform: translateX(-50%); top: auto; bottom: 280px; align-items: center; } #votetray .vt-hint { max-width: 86vw; font-size: 10px; text-align: center; } #votetray .vt-row { padding: 4px 10px; gap: 8px; } .vt-tok { width: 40px; height: 40px; font-size: 20px; } }
@media (max-width: 760px) { body[data-phase=reveal] #options { display: none; } }

/* Emote-Ablage mittig */
#votetray { left: 50%; top: 44%; bottom: auto !important; transform: translate(-50%, -50%); align-items: center; }
#votetray .vt-hint { max-width: 90vw; font-size: clamp(14px, 1.7vw, 19px); font-weight: 800; text-align: center; background: rgba(20,10,50,.82); padding: 6px 16px; }
#votetray .vt-row { padding: 10px 18px; gap: 18px; }
.vt-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vt-cap { font-size: 11px; font-weight: 700; max-width: 90px; text-align: center; line-height: 1.1; }
.vt-tok { width: 62px; height: 62px; font-size: 32px; }
@media (max-width: 760px) { #votetray { top: auto; left: 50%; transform: translateX(-50%); } .vt-tok { width: 48px; height: 48px; font-size: 24px; } #votetray .vt-row { gap: 12px; padding: 6px 12px; } }

/* Twitch-Zettel rechts neben dem Startmenue (Gegenstueck zur Tagesfrage) */
.twitch-note { position: absolute; left: calc(100% + 34px); top: 90px; width: 270px; padding: 26px 22px 20px; border-radius: 26px; transform: rotate(5deg); text-align: left; background: linear-gradient(150deg, #9146ff, #6a2fd6); color: #fff; box-shadow: 0 12px 0 rgba(0,0,0,.3); }
.twitch-note .dn-label { background: #fff; color: #6a2fd6; }
.twitch-note .dn-q { font-size: 19px; }
.support { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; margin: 8px 0; }
.support .enjoying { margin: 0; font-weight: 800; }
.support-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.support-btns a { text-decoration: none; }
.made-by { margin: 0; font-size: 13px; opacity: .85; max-width: 46ch; }
@media (max-width: 1240px) { .twitch-note { position: relative; left: auto; top: auto; width: auto; margin: 12px 6px 0; padding: 18px 16px 14px; transform: rotate(1.5deg); box-shadow: 0 8px 0 rgba(0,0,0,.25); } .twitch-note .dn-q { font-size: 16px; } }

.inspired-line { margin: 6px 0 0; text-align: center; font-size: 12px; opacity: .7; }
.made-by.inspired { font-size: 12px; opacity: .7; }

/* Danke / Ersteller-Zettel links und rechts vom Startmenue (nur dort, verschwindet mit dem Spielstart) */
.thanks-note, .made-note { position: absolute; width: 270px; padding: 16px 20px; border-radius: 22px; background: rgba(30, 16, 70, .88); border: 2px solid rgba(255,255,255,.22); box-shadow: 0 10px 0 rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.thanks-note { right: calc(100% + 40px); top: 400px; transform: rotate(3deg); }
.made-note { left: calc(100% + 40px); top: 400px; transform: rotate(-3deg); }
.tn-title { font-size: 20px; font-weight: 900; color: var(--yellow); }
.tn-text { font-size: 15px; font-weight: 700; line-height: 1.3; }
.tn-insp { font-size: 12px; opacity: .75; }
.thanks-note a, .made-note a { text-decoration: none; }
@media (max-width: 1240px) { .thanks-note, .made-note { position: relative; left: auto; right: auto; top: auto; width: auto; margin: 12px 6px 0; transform: none; align-items: center; text-align: center; } }

#corners[hidden], #inspired[hidden] { display: none; }
#corners .sn { position: fixed; top: 84px; width: 250px; display: flex; flex-direction: column; gap: 26px; z-index: 20; pointer-events: auto; }
#corners .sn.left { left: 14px; }
#corners .sn.right { right: 74px; }
#corners .sn aside { position: static; width: auto; transform: rotate(-2deg); animation: none; margin: 0; }
#corners .sn.right aside { transform: rotate(2deg); }
#corners .daily-note, #corners .twitch-note { padding: 22px 18px 16px; } 
#corners .dn-q { font-size: 17px; }
#corners a { text-decoration: none; }
@media (max-width: 1379px) { #corners { display: none !important; } }
#inspired { position: fixed; right: 10px; bottom: 8px; z-index: 30; font-size: 12px; font-weight: 700; opacity: .75; background: rgba(20,10,50,.6); border-radius: 12px; padding: 4px 10px; pointer-events: none; }
@media (max-width: 760px) { #inspired { display: none; } }
#demonote { position: fixed; left: 10px; bottom: 8px; z-index: 30; max-width: 300px; font-size: 12px; font-weight: 700; line-height: 1.35; opacity: .8; background: rgba(20,10,50,.6); border-radius: 12px; padding: 5px 10px; pointer-events: none; }
#demonote b { font-weight: 800; color: #ffd86b; }
#demonote[hidden] { display: none; }
@media (max-width: 760px) { #demonote { display: none; } }

/* Paket-Kacheln in der Lobby */
.pack-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.ptile { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 2px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(0,0,0,.28); color: inherit; font-weight: 900; cursor: pointer; opacity: .65; }
.ptile .pi { font-size: 1.15em; }
.ptile.on { opacity: 1; background: var(--cyan); border-color: var(--cyan); color: #06304a; }
.ptile[data-value="spicy"].on { background: #ff5d7a; border-color: #ff5d7a; color: #fff; }
.ptile.own .pi { filter: none; }
.ptile.add { opacity: .9; border-style: dashed; background: transparent; }
.pack-tiles + .packrow { margin-top: 8px; }

.fb-scene[data-theme=streamer] { background: linear-gradient(180deg, #0a0714 0%, #1a1040 55%, #2a1a6a 62%, #0c0a1c 63%); }
.fb-scene[data-theme=streamer] .fb-table { background: radial-gradient(ellipse at 50% 50%, #241a4a, #14102a); border-color: #ff4fa3; box-shadow: 0 0 22px #7a5cff; }

.seg button.locked { opacity: .55; }
.seg button.locked.on { opacity: 1; }
.theme-seg { flex-wrap: wrap; }
.credit-line { display: block; margin-top: 6px; opacity: .85; font-weight: 700; }

.ptile-wrap { display: inline-flex; align-items: stretch; gap: 2px; }
.ptile-wrap .ptile { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.ptile-mini { border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; border-radius: 6px; padding: 0 8px; cursor: pointer; font-size: .95em; }
.ptile-mini:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.ptile-mini:hover { background: var(--cyan); color: #06304a; }

/* Fragekarten: bei wenig Hoehe zwei Spalten statt winziger Schrift */
@media (min-width: 760px) {
  #options.two-col { width: clamp(520px, 52vw, 760px); }
  #options.two-col .opts-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
}

.twitch-note.dlc-note { background: linear-gradient(150deg, #ff7ac8, #ffb13d); color: #2a1040; }
.twitch-note.dlc-note .dn-label { background: #2a1040; color: #ffd23f; }

.fb-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.tn-gift { font-size: 13px; font-weight: 700; opacity: .85; line-height: 1.25; }

#corners .dn-tape { display: none; } /* das halbtransparente Klebeband-Rechteck stoerte auf den Zetteln links und rechts */
@media (max-width: 759px) { .dn-tape { display: none; } } /* Handy: das Klebeband-Rechteck sieht dort nur wie ein halbtransparenter Streifen aus */

/* Demo: Vorteile der Vollversion gross und deutlich */
/* Demo: Werbung fuer die Vollversion. Fokus auf eigene Fragen, darunter 6 Vorteile im Raster, Steam-Knopf */
.demo-promo { margin: 14px 0 4px; padding: 16px; border-radius: 22px; text-align: left; color: #2a1040; background: linear-gradient(140deg, #ffd23f, #ff9a3d 55%, #ff6fb1); border: 3px solid #fff; box-shadow: 0 8px 0 rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 12px; }
.demo-promo .dp-title { font-weight: 900; font-size: 22px; line-height: 1.15; text-align: center; }
.demo-promo .dp-hero { display: flex; gap: 12px; align-items: center; background: #2a1040; color: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 0 0 3px rgba(255,255,255,.65); }
.demo-promo .dp-hero-ic { font-size: 34px; flex: none; }
.demo-promo .dp-hero b { display: block; color: #ffd23f; font-size: 19px; line-height: 1.15; margin-bottom: 3px; }
.demo-promo .dp-hero span { display: block; font-size: 14px; line-height: 1.35; opacity: .95; }
.demo-promo .dp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-promo .dp-grid li { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.55); border-radius: 12px; padding: 7px 9px; font-weight: 800; font-size: 14px; line-height: 1.2; min-width: 0; }
.demo-promo .dp-grid li i { font-style: normal; font-size: 20px; flex: none; }
.demo-promo .dp-grid li.love { background: #2a1040; color: #ffb3dd; }
.demo-promo .dp-btn { display: block; text-align: center; background: #1b2838; color: #fff; font-weight: 900; font-size: 18px; border-radius: 14px; padding: 11px 14px; text-decoration: none; box-shadow: 0 5px 0 rgba(0,0,0,.35); border: 2px solid #66c0f4; }
.demo-promo .dp-btn.soon { opacity: .9; }
a.dp-btn:hover { filter: brightness(1.15); }
.demo-promo.compact { margin: 0 0 10px; padding: 12px; gap: 9px; }
.demo-promo.compact .dp-title { font-size: 18px; }
.demo-promo.compact .dp-hero { padding: 9px 12px; }
.demo-promo.compact .dp-hero b { font-size: 16px; }
.demo-promo.compact .dp-hero span { font-size: 13px; }
.demo-promo.compact .dp-grid li { font-size: 13px; padding: 5px 8px; }
.demo-promo.compact .dp-btn { font-size: 16px; padding: 8px 12px; }
@media (max-width: 560px) {
  .demo-promo .dp-grid { grid-template-columns: 1fr 1fr; }
  .demo-promo .dp-title { font-size: 18px; }
  .demo-promo .dp-hero-ic { font-size: 26px; }
  .demo-promo .dp-grid li { font-size: 12.5px; padding: 6px 7px; gap: 6px; overflow-wrap: normal; hyphens: manual; }
  .demo-promo .dp-grid li i { font-size: 17px; }
}

/* v106: Vorhang beim Themewechsel (deckt Aufbau/Texturen-Upload ab) */
.theme-curtain { position: absolute; inset: 0; z-index: 6; pointer-events: none; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, #2a1a3a 0%, #0a0610 80%); opacity: 0; transition: opacity .22s ease; }
.theme-curtain.on { opacity: 1; }
.theme-curtain .tc-ring { grid-area: 1/1; width: 84px; height: 84px; border-radius: 50%; border: 8px solid rgba(255,255,255,.16); border-top-color: #ffd23f; animation: tcspin .9s linear infinite; will-change: transform; }
.theme-curtain .tc-ic { grid-area: 1/1; font-size: 32px; animation: tcpulse 1.1s ease-in-out infinite; will-change: transform; }
@keyframes tcspin { to { transform: rotate(360deg); } }
@keyframes tcpulse { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.12); } }

/* v124/v136: Griff zum Runter-/Hochwischen des unteren Fensters (Handy und PC) + schmale Leiste nach der Runde */
#panelgrip { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--panel-h, 0px) + max(12px, env(safe-area-inset-bottom)) + 4px); z-index: 27; width: 150px; height: 30px; border-radius: 16px 16px 0 0; background: rgba(24,12,60,.72); border: 1px solid rgba(255,255,255,.28); border-bottom: 0; backdrop-filter: blur(4px); gap: 8px; align-items: center; justify-content: center; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
#panelgrip:hover { background: rgba(60,30,130,.85); }
#panelgrip::before, #panelgrip::after { content: '⌄'; color: rgba(255,255,255,.9); font-size: 16px; line-height: 1; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#panelgrip.min::before, #panelgrip.min::after { content: '⌃'; color: var(--yellow); }
body.in-room:not(.cine) #panelgrip { display: flex; }
body.in-room #panel:empty ~ #panelgrip { display: none; }
#panelgrip span { width: 46px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.85); box-shadow: 0 1px 4px rgba(0,0,0,.7); }
#panelgrip.min span { background: var(--yellow); width: 64px; }
@media (max-width: 759px) {
  body.in-room:not(.cine) #panelgrip { display: flex; }
  body.in-room #panel:empty ~ #panelgrip { display: none; }
  body.panel-min[data-phase=reveal] #panel > * { display: block; }
  body.panel-min[data-phase=reveal] #panel .reveal > :not(.actions) { display: none; }
  body.panel-min[data-phase=reveal] #panel .reveal .actions { position: static; background: none; padding: 0; }
}
@media (max-width: 560px) { .cine-side .cine-label { white-space: normal; text-align: center; font-size: 11px; padding: 2px 8px; line-height: 1.15; } }
/* v126: Handy-Kopfzeile: Menue (⚙) darf nie aus dem Bild rutschen */
@media (max-width: 560px) {
  body.in-room .brand { display: none; }
  .top-right { flex: 0 1 auto; min-width: 0; gap: 4px; }
  .icon-btn { min-width: 34px; padding: 0 6px; }
  #topbar { padding-left: 6px; padding-right: 6px; }
}
/* v126: Fragekarten am Handy etwas durchsichtig, solange man sie nur liest */
@media (max-width: 759px) { .opts-bar:not(.interactive) { opacity: .9; } }
/* v128: viele/lange Fragen am Handy: Liste scrollbar statt hinter dem Panel verschwinden */
@media (max-width: 759px) { #options.opts-scroll .board .opts-bar { max-height: var(--opts-max, 40vh) !important; overflow-y: auto !important; pointer-events: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } }
/* v128: Handy im Querformat (niedriger Bildschirm, aber breit): kompakter, Griff und Peek-Leiste wie im Hochformat */
@media (max-height: 500px) and (min-width: 760px) {
  #topbar { padding-top: 6px; padding-bottom: 4px; gap: 4px; }
  .icon-btn { min-width: 36px; height: 36px; font-size: 18px; border-radius: 12px; }
  .icon-btn b { font-size: 12px; padding: 0 6px; }
  .brand-icon { width: 30px; height: 30px; }
  #panel { max-height: 58%; }
  #panel > * { padding: 8px 12px; }
  .btn.big { padding-top: 8px; padding-bottom: 8px; font-size: 20px; }
  #options { top: 50px; left: 6px; width: 240px; }
  .board .opts-bar { gap: 4px; }
  .board-head { padding: 3px 10px; font-size: 13px; }
  .oc { padding: 3px 7px; min-height: 0; font-size: 12px; line-height: 1.1; border-width: 2px; border-radius: 12px; box-shadow: 0 2px 0 rgba(0,0,0,.28); gap: 6px; }
  .oc b { width: 1.5em; height: 1.5em; font-size: .95em; }
  .opts-bar:not(.interactive) { opacity: .9; }
  #options.opts-scroll .board .opts-bar { max-height: var(--opts-max, 40vh) !important; overflow-y: auto !important; pointer-events: auto; touch-action: pan-y; }
  body.in-room:not(.cine) #panelgrip { display: flex; }
  body.in-room #panel:empty ~ #panelgrip { display: none; }
  body.panel-min[data-phase=reveal] #panel > * { display: block; }
  body.panel-min[data-phase=reveal] #panel .reveal > :not(.actions) { display: none; }
  body.panel-min[data-phase=reveal] #panel .reveal .actions { position: static; background: none; padding: 0; }
}
/* v137: Ziel-Paket-Auswahl im Zuschauer-Postfach */
.qtarget { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-weight: 800; }
.qtarget select { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 10px; }

/* v141: Handy: Antwortbereich kompakter */
@media (max-width: 759px) {
  .answering { gap: 6px; }
  .secret-card { padding: 8px 12px; border-radius: 14px; }
  .secret-card .q { font-size: clamp(17px, 5vw, 24px); margin-top: 2px; }
  .secret-card .q.small { font-size: 14px; }
  .answer-form { gap: 8px; }
  .answer-form input { font-size: 22px; padding-top: 6px; padding-bottom: 6px; }
  .answering .btn.big { min-height: 44px; }
  .answering .nbs { font-size: 13px; }
}

/* v143/v150: voller Tisch: kleinere Namensschilder NUR am Handy (am PC bleibt alles wie vorher) */
@media (max-width: 759px) {
  body[data-crowd=l] .plate { font-size: 12px; padding: 0 7px; } body[data-crowd=l] .tag-photo { width: 40px; height: 40px; }
  body[data-crowd=xl] .plate { font-size: 10.5px; padding: 0 6px; } body[data-crowd=xl] .tag .sc { font-size: 10px; } body[data-crowd=xl] .tag-photo { width: 32px; height: 32px; }
}

/* v144: Fragekarten wieder weniger durchsichtig (es gibt jetzt den Griff zum Wegklappen) */
@media (max-width: 759px) { .opts-bar:not(.interactive) { opacity: .92; } }

/* v146: beim Ziehen eines Emotes (Naughty usw.) verschwinden Panel und Fragen kurz, damit man frei auf einen Spieler zielen kann */
#panel, #options, #panelgrip { transition: opacity .15s; }
body.vt-dragging #panel, body.vt-dragging #options, body.vt-dragging #panelgrip { opacity: 0 !important; visibility: hidden !important; } /* visibility: unsichtbare Kinder mit pointer-events:auto fangen sonst weiter Beruehrungen ab */

/* v148: Handy: Panel unten wegziehen blendet NUR das Panel aus, die Fragekarten bleiben (die haben ihren eigenen Einklapper) */
@media (max-width: 759px), (max-height: 500px) and (min-width: 760px) {
  body.panel-min #options { display: block; }
}
/* Beim Ziehen eines Emotes verschwindet auch die Emote-Leiste samt Ueberschrift (nur sichtbar machen, was man gerade zieht) */
body.vt-dragging #votetray { opacity: 0 !important; }

/* v155: Herz-/Schock-Modus (naechster Klick trifft einen Spieler): Panel, Fragen, Griff und Emote-Leiste verschwinden, bis geklickt wurde */
body.pick-mode #panel, body.pick-mode #options, body.pick-mode #panelgrip, body.pick-mode #votetray { opacity: 0 !important; visibility: hidden !important; }

/* App-installieren-Button im Startmenue (nur Handy) */
.install-btn { display: block; margin: 10px auto 0; background: linear-gradient(180deg, #ffd23f, #ffb300); color: #3a2200; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.install-btn[hidden] { display: none; }
@media (min-width: 760px) { .install-btn { display: none; } }

/* Menue-Knoepfe am Handy: eine Spalte, alle gleich breit */
@media (max-width: 759px) {
  .menu-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .menu-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .menu-actions .btn:last-child { grid-column: 1 / -1; }
}

.landing.no-anim { animation: none; }

/* Fragen speichern/laden: aufgeraeumtes Untermenue, alle Knoepfe gleich gross */
.pk-transfer { margin-top: 6px; }
.pk-transfer[open] { padding-bottom: 4px; }
.pk-group { margin-top: 10px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.1); }
.pk-lbl { font-weight: 900; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.pk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pk-btns.one { grid-template-columns: 1fr; }
.pk-transfer .btn { width: 100%; min-height: 48px; margin: 0; padding: 8px 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; line-height: 1.15; white-space: normal; }
.pk-token { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; align-items: stretch; }
.pk-token input { min-width: 0; min-height: 48px; box-sizing: border-box; border-radius: 14px; padding: 0 12px; font-size: 15px; }
.pk-token .btn { width: auto; white-space: nowrap; }
@media (max-width: 420px) { .pk-btns { grid-template-columns: 1fr; } .pk-token { grid-template-columns: 1fr; } .pk-token .btn { width: 100%; } }

/* Lobby-Einstellungen: Gruppen, Spielregeln als Kacheln, Raum-Theme einklappbar */
.sgroups { display: grid; gap: 10px; }
@media (min-width: 700px) { .settings.sgroups:not(.readonly) { grid-template-columns: 1fr; gap: 10px; } }
.sgroup { background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.09); border-radius: 16px; padding: 10px 12px; min-width: 0; }
.sgroup > h4 { margin: 0 0 8px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); font-weight: 900; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rule { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rule > span { font-weight: 800; font-size: 14px; }
.rule .seg { display: flex; width: 100%; }
.rule .seg button { flex: 1 1 0; text-align: center; justify-content: center; }
.rule.wide { grid-column: 1 / -1; }
.rule.inline { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.theme-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-weight: 900; padding: 4px 0; }
.theme-fold > summary .cur-theme { font-weight: 800; font-size: 14px; color: var(--ink-dim); text-align: right; }
.theme-fold[open] > summary { margin-bottom: 8px; }
.theme-fold[open] > summary .cur-theme { display: none; }
@media (max-width: 420px) { .rules { grid-template-columns: 1fr; } }

/* App-installieren-Knopf in der Spielerklaerung: auch am PC-Fenster sichtbar, wenn der Browser die Installation anbietet */
.how-install { display: block; }
@media (min-width: 760px) { .how-install { display: block; } }
.howto .modal-actions { flex-direction: column; align-items: stretch; }
.howto .modal-actions .btn { width: 100%; margin: 0; }
.howto .how-install { padding: 9px 14px; font-size: 17px; }
.howto .modal-actions { gap: 8px; }
.howto .modal-actions .btn.green { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 759px) { .howto .how-steps { gap: 6px; } .howto .how-steps li { font-size: 15px; padding: 6px 10px; gap: 10px; } .howto .how-ico { width: 36px; height: 36px; font-size: 20px; border-radius: 11px; } }

/* Menue-Knoepfe (alle Geraete): gleich grosse Knoepfe in zwei Spalten, Schliessen volle Breite; Version klein unten */
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-content: stretch; }
.menu-actions .btn { width: 100%; justify-content: center; text-align: center; margin: 0; }
.menu-actions .btn:last-child { grid-column: 1 / -1; }
.app-ver { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-dim); opacity: .7; letter-spacing: .04em; }
@media (max-width: 759px) { .menu-actions { grid-template-columns: 1fr; } }
.menu-row:not(.col) .seg { flex-wrap: nowrap; flex-shrink: 0; }
.dn-tape { display: none !important; } /* v182: Klebestreifen ueberall weg (Desktop-Startmenue hatte sie noch) */
.music-btn.off { opacity: .6; }

.btn.danger.armed { background: #ff3d5a; color: #fff; border-color: #ff3d5a; animation: none; }

/* v184: Handy – Menue und Lobby-Einstellungen kompakter (weniger Scrollen, Timer-Knoepfe passen) */
@media (max-width: 759px) {
  .modal-card { padding: 14px; gap: 9px; }
  .modal-card h2 { font-size: 22px; margin: 0; }
  .menu-row small { font-size: 12px; }
  .menu-row .seg button { padding: 5px 11px; font-size: 14px; min-width: 40px; }
  .pack-tiles { gap: 5px; }
  .ptile { padding: 6px 9px; font-size: 13px; border-radius: 12px; }
  .sgroups { gap: 8px; }
  .sgroup { padding: 8px 10px; }
  .sgroup > h4 { margin-bottom: 6px; font-size: 12px; }
  .rule .seg button { padding: 6px 4px; font-size: 13px; min-width: 0; }
  .rule > span { font-size: 13px; }
}
@media (max-width: 759px) { .rules { grid-template-columns: 1fr 1fr; } .rule .seg { flex-wrap: nowrap; } }
.pick.alien { outline: 2px dashed rgba(121,216,111,.7); outline-offset: -3px; }

/* v192: Lobby-Einstellungen – Pakete als volle Zeilen (Anzahl immer dabei), Themes in zwei Spalten, gut lesbar */
.sgroup .pack-tiles { display: grid; grid-template-columns: 1fr; gap: 6px; }
.sgroup .pack-tiles > * { min-width: 0; }
.sgroup .ptile { width: 100%; justify-content: flex-start; padding: 7px 12px; font-size: 15px; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgroup .ptile .pi { font-size: 1.2em; width: 1.4em; text-align: center; }
.sgroup .ptile .pc { margin-left: auto; font-size: 13px; font-weight: 800; background: rgba(0,0,0,.22); border-radius: 999px; padding: 1px 9px; opacity: .9; }
.sgroup .ptile.on .pc { background: rgba(6,48,74,.2); }
.sgroup .ptile.add { justify-content: center; }
.sgroup .ptile-wrap { display: flex; }
.sgroup .ptile-wrap .ptile { flex: 1; min-width: 0; }
.sgroup .theme-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.sgroup .theme-seg button { padding: 7px 8px; font-size: 13.5px; min-width: 0; border-radius: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
@media (min-width: 760px) { .sgroup .theme-seg { grid-template-columns: repeat(3, 1fr); } }
.rules-fold > summary .cur-theme { white-space: nowrap; }
.rule-hint { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel.no-anim > * { animation: none; }

/* v197: Auswahl einer Fragekarte blendet die Karten nicht neu ein */
#options.no-anim .oc { animation: none; }
#options.no-anim .oc.real { animation: glow 1.2s infinite; }
.oc:focus, .oc:focus-visible { outline: none; }

/* v198: Desktop - Pakete in 2 Spalten, Themes 3 Spalten, groessere und kraeftigere Schrift */
@media (min-width: 760px) {
  .sgroup .pack-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sgroup .ptile { padding: 10px 14px; font-size: 18px; font-weight: 900; gap: 10px; }
  .sgroup .ptile .pi { font-size: 1.25em; }
  .sgroup .ptile .pc { font-size: 15px; padding: 2px 11px; }
  .sgroup .ptile.add, .sgroup .ptile-wrap { grid-column: auto; }
  .sgroup .theme-seg { gap: 6px; padding: 6px; }
  .sgroup .theme-seg button { padding: 10px 12px; font-size: 16.5px; font-weight: 900; border-radius: 12px; }
}

/* v199: Handy - Timer links oben neben dem Logo, damit Bestaetigungs-Fenster nicht darueber aufgehen */
@media (max-width: 760px) { #timer { left: 56px; top: 4px; transform: none; } }

/* v202: Fragekarten sanfter einblenden; Auswahl-Rahmen am Handy nicht mehr abgeschnitten */
@keyframes cardIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.oc { animation: cardIn .6s cubic-bezier(.22, .8, .3, 1) both; }
.oc:nth-child(2) { animation-delay: .05s; } .oc:nth-child(3) { animation-delay: .1s; } .oc:nth-child(4) { animation-delay: .15s; } .oc:nth-child(5) { animation-delay: .2s; }
.oc.on { animation: none; }
.oc.real { animation: glow 1.2s infinite; }
#options.no-anim .oc { animation: none; }
#options.no-anim .oc.real { animation: glow 1.2s infinite; }
@media (max-width: 759px) {
  .oc.on { transform: none; box-shadow: inset 0 0 0 3px #fff, 0 3px 0 rgba(0,0,0,.3); border-color: #20103a; }
  .opts-bar.interactive .oc:hover { transform: none; }
  #options .opts-bar { padding: 12px 10px 4px; }
}

/* v203: Zuschauer-Fragen akzeptieren - Text bricht um, Buttons unter dem Text, kein Seitwaerts-Scrollen */
.modal-card { overflow-x: hidden; min-width: 0; box-sizing: border-box; }
.qlist, .qitem, .qtext { min-width: 0; }
.qtext { overflow-wrap: anywhere; word-break: break-word; line-height: 1.3; font-weight: 700; }
.qtarget { flex-wrap: wrap; }
@media (max-width: 759px) {
  .qitem { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .qtext { font-size: 17px; }
  .qbtns { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
  .qbtns .btn { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
}

/* v204: Touch-Geraete - Dauer-Animationen im Hintergrund aus (weniger GPU-Last, weniger Waerme) */
@media (pointer: coarse) {
  #frame { animation: none; }
  .btn.big:not(:disabled):not(.ghost) { animation: none; }
  .landing .logo-mark, .logo-img { animation: none; }
}

/* v208: Zuschauer-Fragen auch am PC: Text oben ueber die ganze Breite, Knoepfe darunter */
.qitem { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
.qtext { font-size: 18px; }
.qbtns { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.qbtns .btn { white-space: nowrap; }

/* v210: Grafik-Auswahl (3 Stufen) immer in einer Zeile */
.seg[data-setting=quality] { display: flex; width: 100%; }
.seg[data-setting=quality] button { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 4px; padding-right: 4px; font-size: 15px; }
@media (max-width: 400px) { .seg[data-setting=quality] button { font-size: 13.5px; } }

/* v212 Figuren-Pakete */
.packtabs { display: flex; gap: 6px; margin-bottom: 8px; }
.packtab { flex: 1; border: 2px solid transparent; background: rgba(255,255,255,.1); color: #fff; border-radius: 14px; padding: 9px 8px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; min-height: 44px; }
.packtab.on { border-color: var(--yellow); background: rgba(255,210,63,.22); }
.packtab { display: flex; align-items: center; justify-content: center; gap: 8px; }
.packtab .pe { display: inline-flex; align-items: center; font-size: 22px; line-height: 1; }
.packtab .pe svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.packtab .pe svg + svg { margin-left: -10px; }
.packtab .pl { font-size: 16px; }
.packs .picker[hidden] { display: none; }
.parade { transition: opacity .22s ease; } .parade.swap { opacity: 0; }

/* ---------------------------------------------------------------- Twitch */
.tag.hot .plate { border-color: rgb(255, calc(255 - 200 * var(--heat, 0)), calc(255 - 200 * var(--heat, 0))); background: color-mix(in srgb, #c8102e calc(var(--heat, 0) * 85%), rgba(20,8,48,.82)); box-shadow: 0 0 calc(var(--heat, 0) * 26px) rgba(255,40,60,.85); }
.tag.hot .plate { animation: heatPulse calc(1.6s - var(--heat, 0) * 1s) ease-in-out infinite; }
@keyframes heatPulse { 50% { box-shadow: 0 0 calc(var(--heat, 0) * 40px) rgba(255,40,60,1); } }

#twitchbar { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 34; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; max-width: min(520px, 94vw); }
#twitchbar[hidden] { display: none; }
.tw-pill { background: rgba(100, 65, 165, .92); border: 2px solid #b48cff; color: #fff; border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 16px; box-shadow: 0 4px 0 rgba(0,0,0,.3); white-space: nowrap; }
.tw-pill.right { background: rgba(30, 140, 70, .94); border-color: #8bffb0; }
.tw-pill.wrong { background: rgba(150, 30, 50, .94); border-color: #ff9aa8; }
.tw-pill.next { background: rgba(145, 70, 255, .95); border-color: #fff; font-size: 18px; }
.tw-vote { background: rgba(28, 12, 60, .94); border: 2px solid #9146ff; border-radius: 20px; padding: 12px 14px; width: min(580px, 94vw); box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 30px rgba(145,70,255,.45); }
.tw-title { font-weight: 800; font-size: 15px; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; }
.tw-left { color: var(--yellow); font-variant-numeric: tabular-nums; }
.tw-opt { position: relative; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 6px 10px; margin-top: 5px; overflow: hidden; font-weight: 700; }
.tw-opt i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(145,70,255,.75), rgba(255,95,176,.55)); transition: width .5s ease; z-index: 0; }
.tw-opt > * { position: relative; z-index: 1; }
.tw-opt .n { background: #fff; color: #2a0f5c; border-radius: 8px; width: 28px; height: 28px; display: grid; place-items: center; font-size: 18px; flex: none; }
.tw-opt .l { flex: 1; }
.tw-opt .c { font-variant-numeric: tabular-nums; }

#emoterain { position: absolute; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; }
#emoterain .emote { position: absolute; height: 42px; width: auto; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
#emoterain .combo { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; animation: comboPop 2.6s ease both; }
#emoterain .combo img { height: 112px; width: auto; filter: drop-shadow(0 6px 4px rgba(0,0,0,.45)); }
#emoterain .combo b { font-size: 64px; font-weight: 900; color: #fff; text-shadow: 0 5px 0 rgba(0,0,0,.35), 0 0 24px #9146ff; }
@keyframes comboPop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -70%) scale(1); opacity: 0; } }

.tw-menu { gap: 8px; }
.tw-connect { display: flex; gap: 8px; width: 100%; }
.tw-connect input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 12px; border-radius: 12px; border: 2px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff; }
.tw-connect input:disabled { opacity: .7; }
.tw-status { font-weight: 700; }
.tw-status.live { color: #8bffb0 !important; }
.tw-status.connecting { color: var(--yellow) !important; }
.tw-status.error { color: #ff9aa8 !important; }
@media (max-width: 560px) { #twitchbar { top: 84px; } .tw-pill { font-size: 14px; } }
@media (min-width: 761px) { #twitchbar.at-bottom { top: auto; bottom: 46px; flex-direction: column-reverse; } }
.tw-part { animation: pop .3s; display: flex; justify-content: center; }
@media (max-width: 760px) {
  #twitchbar:not(.at-bottom) { top: 58px; left: auto; right: 74px; transform: none; align-items: flex-end; max-width: calc(100vw - 200px); }
  #twitchbar:not(.at-bottom) .tw-pill { font-size: 12px; padding: 4px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------------------------------------------------------------- Demo-Sperren */
.pick.locked { opacity: .55; filter: grayscale(.6); cursor: not-allowed; }
.pick-locked-note { grid-column: 1 / -1; text-align: center; font-weight: 800; color: var(--yellow); padding: 6px 4px 2px; }
.ptile.locked { opacity: .6; }

/* Twitch-Knopf oben und eigenes Twitch-Menue */
.icon-btn.twitch-btn { background: #9146ff; border-color: #b48cff; position: relative; }
.icon-btn.twitch-btn img { height: 22px; width: auto; display: block; margin: 0 auto; }
.icon-btn.twitch-btn.live::after { content: ""; position: absolute; right: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #3dff7a; box-shadow: 0 0 6px #3dff7a; }
.tw-card { border: 2px solid #9146ff; }
.tw-head { display: flex; align-items: center; gap: 10px; }
.tw-head .tw-glitch { height: 34px; width: auto; }
.tw-intro { color: var(--ink-dim); margin: 0 0 10px; }
.tw-locked { font-weight: 800; color: var(--yellow); }
.tw-feats { margin: 6px 0 10px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.tw-feats li { background: rgba(145,70,255,.18); border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.btn.twitch { background: #9146ff; color: #fff; }
.tw-lobby { display: flex; align-items: center; gap: 10px; background: #9146ff; color: #fff; border: 2px solid #b48cff; border-radius: 16px; padding: 8px 14px; font: inherit; cursor: pointer; text-align: left; box-shadow: 0 4px 0 rgba(0,0,0,.3); flex: 1; min-width: 170px; max-width: 280px; align-self: stretch; }
.tw-lobby img { height: 34px; width: auto; flex: none; }
.tw-lobby span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.tw-lobby b { font-size: 18px; }
.tw-lobby small { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-lobby.live { border-color: #3dff7a; box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 0 14px rgba(61,255,122,.5); }
.tw-lobby.locked { opacity: .8; }
.tw-lobby:hover { filter: brightness(1.08); }
@media (max-width: 560px) { .tw-lobby { flex: 1 1 100%; max-width: none; min-width: 0; padding: 6px 12px; } .tw-lobby img { height: 26px; } .tw-lobby b { font-size: 15px; } }
@media (min-width: 561px) {
  .lobby-head:has(.tw-lobby) { flex-wrap: nowrap; }
  .lobby-head .tw-lobby { flex: 1 1 auto; min-width: 64px; max-width: 260px; }
  .lobby-head .count { flex: none; }
  .lobby-head .code-box, .lobby-head .qr-box, .lobby-head .invite-btns { flex: none; }
}
.tw-lobby b { white-space: nowrap; }
.roster .roster-count { margin-left: auto; align-self: center; font-size: 18px; font-weight: 800; }

/* SUS-Holzschild: steckt an einem Stiel neben dem Namensschild, springt hoch, wackelt, kippt nach 10 s um */
.sus-sign { position: absolute; left: 50%; top: calc(100% - 4px); display: flex; flex-direction: column; align-items: center; pointer-events: none; transform-origin: 50% 100%; animation: susUp .55s cubic-bezier(.3, 1.7, .5, 1) both, susDance 5s .55s linear infinite; }
.sus-sign .plank { animation: susWobble 1.2s ease-in-out infinite; }
/* Der Teufel tanzt einmal rund um die Figur: vorne groesser, hinten kleiner und blasser */
@keyframes susDance {
  0%   { transform: translate(calc(-50% + 100px), 26px) scale(1); opacity: 1; }
  12%  { transform: translate(calc(-50% + 70px), 48px) scale(1.08); }
  25%  { transform: translate(-50%, 58px) scale(1.14); opacity: 1; }
  38%  { transform: translate(calc(-50% - 70px), 48px) scale(1.08); }
  50%  { transform: translate(calc(-50% - 100px), 26px) scale(1); }
  62%  { transform: translate(calc(-50% - 70px), 6px) scale(.9); opacity: .85; }
  75%  { transform: translate(-50%, -2px) scale(.82); opacity: .7; }
  88%  { transform: translate(calc(-50% + 70px), 6px) scale(.9); opacity: .85; }
  100% { transform: translate(calc(-50% + 100px), 26px) scale(1); opacity: 1; }
}
.sus-sign .devil { animation: devilHop .25s ease-in-out infinite alternate, devilFace 5s .55s steps(1) infinite; }
@keyframes devilFace { 0%, 50% { scale: -1 1; } 50.01%, 100% { scale: 1 1; } }
.sus-sign .stick { width: 7px; height: 22px; margin-top: -3px; position: relative; z-index: 1; background: linear-gradient(90deg, #6b4220, #a8743f 50%, #6b4220); border: 2px solid #3a1f08; border-top: 0; border-radius: 0 0 3px 3px; }
.sus-sign .plank { position: relative; display: flex; align-items: baseline; gap: 2px; padding: 4px 16px 5px; border-radius: 7px 9px 6px 10px; transform: rotate(-4deg);
  background:
    repeating-linear-gradient(176deg, rgba(0,0,0,0) 0 7px, rgba(70,35,10,.25) 7px 8px, rgba(0,0,0,0) 8px 15px),
    linear-gradient(180deg, #d4945a, #a8692f 55%, #8c5424);
  border: 3px solid #4a2a10; box-shadow: inset 0 2px 0 rgba(255,220,170,.45), inset 0 -3px 0 rgba(60,25,5,.4), 0 5px 0 rgba(0,0,0,.35), 0 0 20px rgba(255,40,40,.55); }
.sus-sign .plank b { font-size: 23px; font-weight: 900; letter-spacing: .08em; color: #ff3b2f; -webkit-text-stroke: 2px #3a1a06; text-shadow: 0 2px 0 #3a1a06; line-height: 1; }
.sus-sign .plank em { font-style: normal; font-size: 18px; font-weight: 900; color: #ffe25a; -webkit-text-stroke: 1.5px #3a1a06; transform: rotate(10deg); display: inline-block; animation: susBlink .9s steps(2) infinite; }
.sus-sign .nail { position: absolute; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #eee, #777 60%, #333); }
.sus-sign .nail.a { left: 5px; } .sus-sign .nail.b { right: 5px; }
.sus-sign.out { animation: susFall .6s ease-in forwards; }
@keyframes susUp { 0% { transform: translate(calc(-50% + 100px), 70px) scale(.3); opacity: 0; } 100% { transform: translate(calc(-50% + 100px), 26px) scale(1); opacity: 1; } }
@keyframes susWobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes susFall { 0% { opacity: 1; } 100% { transform: translate(-50%, 60px) rotate(95deg); opacity: 0; } }
@keyframes susBlink { 50% { opacity: .35; } }
@media (max-width: 560px) { .sus-sign .plank b { font-size: 19px; } .sus-sign .plank em { font-size: 15px; } .sus-sign .plank { padding: 3px 11px 4px; border-width: 2px; } .sus-sign .stick { height: 20px; width: 5px; } }
.tw-vote .tw-title { font-size: 18px; }
.tw-vote .tw-opt { padding: 8px 12px; font-size: 19px; margin-top: 7px; }
.tw-vote .tw-opt .n { width: 32px; height: 32px; font-size: 20px; }
.sus-sign .devil { width: 74px; height: auto; margin-top: -14px; position: relative; z-index: 2; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.sus-sign .devil .tail { transform-box: fill-box; transform-origin: 0% 80%; animation: devilTail .35s ease-in-out infinite alternate; }
@keyframes devilHop { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
@keyframes devilTail { 0% { transform: rotate(-12deg); } 100% { transform: rotate(14deg); } }
@media (max-width: 560px) { .sus-sign .devil { width: 50px; margin-top: -10px; } .sus-sign .stick { height: 15px; } }

/* ---------------------------------------------------------------- Lobby-Kopf neu angeordnet:
   [ CODE ] [ QR ] [ Einladungs-Link / Zuschauer-Link ] ........ [ Twitch ] , alles gleich hoch */
.lobby-head { align-items: stretch; gap: 10px; }
.lobby-head .code-box { justify-content: center; padding: 6px 22px; min-height: 76px; }
.lobby-head .invite-btns { justify-content: center; gap: 8px; }
.lobby-head .invite-btns .btn { width: 100%; justify-content: center; }
.lobby-head .tw-lobby { flex: none; max-width: none; min-width: 0; width: auto; aspect-ratio: 1; margin-left: auto; padding: 0; display: grid; place-items: center; position: relative; border-radius: 18px; min-height: 76px; }
.lobby-head .tw-lobby img { height: 44px; width: auto; }
.lobby-head .tw-lobby .dot { position: absolute; right: 7px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.lobby-head .tw-lobby.connecting .dot { background: var(--yellow); animation: susBlink .8s steps(2) infinite; }
.lobby-head .tw-lobby.live .dot { background: #3dff7a; box-shadow: 0 0 8px #3dff7a; }
.lobby-head .tw-lobby .lock { position: absolute; right: 4px; bottom: 2px; font-style: normal; font-size: 15px; }
.lobby-head .count { align-self: center; }
@media (max-width: 560px) {
  .lobby-head { display: grid; grid-template-columns: 1fr auto; }
  .lobby-head .code-box { min-height: 64px; }
  .lobby-head .tw-lobby { min-height: 64px; height: 64px; flex: none; grid-column: 2; grid-row: 1; margin-left: 0; }
  .lobby-head .code-box { grid-column: 1; grid-row: 1; }
  .lobby-head .tw-lobby img { height: 36px; }
  .lobby-head .invite-btns { grid-column: 1 / -1; flex-direction: row; }
  .lobby-head .invite-btns .btn { flex: 1; width: auto; }
  .lobby-head .count { grid-column: 1 / -1; justify-self: end; }
}
@media (min-width: 561px) {
  .lobby-head .tw-lobby { width: 78px; aspect-ratio: auto; }
  .lobby-head .invite-btns { flex: 1 1 auto; min-width: 0; max-width: 300px; }
  .lobby-head .invite-btns .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lobby-head .code-box { padding: 6px 16px; }
}
@media (min-width: 561px) {
  .lobby-head .code-box .code { font-size: 44px; letter-spacing: .12em; padding-left: .12em; }
  .lobby-head .invite-btns .btn { white-space: normal; line-height: 1.15; font-size: 15px; padding-top: 8px; padding-bottom: 8px; flex: 1; display: flex; align-items: center; }
}
@media (max-width: 560px) {
  /* Am Handy: Twitch links neben dem Code (rechts liegen die Reaktions-Knoepfe) */
  .lobby-head { grid-template-columns: auto 1fr; }
  .lobby-head .tw-lobby { grid-column: 1; grid-row: 1; width: 64px; }
  .lobby-head .code-box { grid-column: 2; grid-row: 1; }
}
/* Figuren-Tabs: immer genau halb/halb, buendig mit dem Raster darunter */
.packtabs { width: 100%; }
.packtab { flex: 1 1 0; min-width: 0; }
.packtab .pl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .packtab { flex-direction: column; gap: 2px; padding: 6px 4px; }
  .packtab .pe svg { width: 28px; height: 28px; }
  .packtab .pl { font-size: 14px; }
}

/* Aktionsleiste (Emotes, Kuss, Schock, Aktion, Kamera): am Handy eingeklappt, nur ein Knopf */
.rail-toggle { display: none; }
@media (max-width: 760px) {
  #reactions .rail-toggle { display: grid; place-items: center; }
  body:not(.rail-open):not(.pick-mode) #reactions > :not(.rail-toggle) { display: none !important; }
  .rail-toggle.on { border-color: var(--yellow); }
}
@media (min-width: 561px) {
  /* Twitch-Knopf so gross wie der QR-Code */
  .lobby-head .tw-lobby { width: 112px; }
  .lobby-head .tw-lobby img { height: 62px; }
}
.invite-btns .btn.locked { opacity: .6; }
.approved-line { margin-top: 8px; }
.approved-line .chip { font-weight: 700; }

/* Vollversion: Hinweis auf die Gratis-Demo (fuer Stream-Zuschauer gut sichtbar, unten links) */
#freedemo { position: fixed; left: 10px; bottom: 8px; z-index: 31; display: flex; align-items: center; gap: 7px; background: rgba(20,10,50,.82); border: 2px solid rgba(255,210,63,.6); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; pointer-events: none; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
#freedemo[hidden] { display: none; }
#freedemo .fd-name { opacity: .85; }
#freedemo b { background: var(--yellow); color: #2a1040; border-radius: 6px; padding: 0 6px; font-size: 12px; letter-spacing: .04em; }
#freedemo .fd-url { color: var(--cyan); }
@media (max-width: 760px) { #freedemo { display: none !important; } }
#freedemo .fd-logo { height: 46px; width: auto; display: block; margin: -8px 0; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
/* Gratis-Demo-Karte fuer Handy-Spieler (am PC gibt es das Schild unten links) */
.freedemo-card { display: none; }
@media (max-width: 760px) {
  .freedemo-card { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border-radius: 16px; background: rgba(20,10,50,.6); border: 2px solid rgba(255,210,63,.6); color: #fff; text-decoration: none; }
  .freedemo-card img { height: 44px; width: auto; flex: none; }
  .freedemo-card span { display: block; font-weight: 800; font-size: 14px; line-height: 1.3; }
  .freedemo-card small { display: block; font-weight: 700; opacity: .85; font-size: 12px; }
  .freedemo-card b { background: var(--yellow); color: #2a1040; border-radius: 6px; padding: 0 6px; font-size: 12px; }
  .freedemo-card u { color: var(--cyan); text-decoration: none; }
}
.demo-promo .dp-grid li i img { height: 20px; width: auto; display: block; }
/* Steam-Wunschliste und "inspiriert von Among Us": deutlicher sichtbar */
#demonote { opacity: 1; font-size: 14px; max-width: 340px; background: rgba(23,26,33,.9); border: 2px solid #66c0f4; border-radius: 14px; padding: 7px 12px 7px 12px; color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
#demonote::before { content: "🎮 Steam"; display: block; color: #66c0f4; font-size: 12px; font-weight: 900; letter-spacing: .06em; margin-bottom: 2px; }
#inspired { opacity: 1; font-size: 14px; background: rgba(40,14,70,.9); border: 2px solid #ff4f7a; border-radius: 14px; padding: 6px 12px; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
/* Spielende: Engel (danke) und Teufel (Steam) */
.outro { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 6px 0 10px; }
.outro-side { display: flex; align-items: flex-end; gap: 6px; flex: 1; min-width: 0; }
.devil-side { justify-content: flex-end; }
.outro .say { position: relative; background: #fff; color: #2a1040; font-weight: 900; font-size: 15px; line-height: 1.25; border-radius: 16px; padding: 8px 12px; box-shadow: 0 4px 0 rgba(0,0,0,.25); margin-bottom: 30px; }
.angel-side .say::before, .devil-side .say::after { content: ""; position: absolute; bottom: -8px; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); }
.angel-side .say::before { left: 10px; }
.devil-side .say::after { right: 10px; }
.devil-side .say { background: #ffe1e1; }
.devil-side .say::after { background: #ffe1e1; }
.outro .say .btn { margin-top: 6px; }
.outro .angel { width: 92px; height: auto; flex: none; overflow: visible; animation: angelFloat 2.2s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.outro .angel .wing { transform-box: fill-box; animation: wingFlap .5s ease-in-out infinite alternate; }
.outro .angel .wing.l { transform-origin: 100% 40%; } .outro .angel .wing.r { transform-origin: 0% 40%; animation-direction: alternate-reverse; }
.outro .devil { width: 78px; height: auto; flex: none; overflow: visible; animation: devilHop .3s ease-in-out infinite alternate; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.outro .devil .tail { transform-box: fill-box; transform-origin: 0% 80%; animation: devilTail .35s ease-in-out infinite alternate; }
@keyframes angelFloat { 50% { transform: translateY(-6px); } }
@keyframes wingFlap { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@media (max-width: 560px) { .outro .say { font-size: 13px; padding: 7px 9px; line-height: 1.35; } .outro .angel { width: 66px; } .outro .devil { width: 56px; } }
.pool-line { display: block; margin-top: 8px; opacity: .85; font-weight: 700; }
/* Paket-Etikett: klein auf dem oberen Kartenrand, nimmt keinen Platz weg */
.oc .oc-pack { position: absolute; top: -8px; right: 12px; background: #2a1040; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); white-space: nowrap; pointer-events: none; z-index: 2; }
.oc:has(.mine) .oc-pack { right: 30px; }
@media (max-width: 759px) { .oc .oc-pack { font-size: 9.5px; padding: 2px 6px; top: -7px; } }

/* Nachbarn links/rechts: bunt, Name gut lesbar, aber dezent */
.nbs { gap: 10px; }
.nb { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; border-radius: 999px; background: rgba(20,10,50,.6); border: 2px solid transparent; font-size: 1.05em; }
.nb.l { border-left-width: 2px; border-color: rgba(59,224,255,.65); }
.nb.r { border-right-width: 2px; border-color: rgba(255,95,176,.65); padding: 3px 6px 3px 12px; }
.nb i { background: rgba(255,255,255,.14); border-radius: 999px; padding: 2px 7px; font-size: .68em; opacity: .9; }
.nb.l i { color: #9ff0ff; } .nb.r i { color: #ffb3d9; }
.nb b { font-size: 1.12em; font-weight: 900; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
@media (max-width: 759px) { .oc .oc-pack span { display: none; } .oc .oc-pack { padding: 1px 4px; font-size: 11px; right: 8px; } }
.pk-emoji { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 10px; }
.pk-emoji .pk-lbl { font-weight: 800; margin-right: 6px; }
.pk-emoji button { font-size: 20px; width: 36px; height: 36px; border-radius: 10px; border: 2px solid transparent; background: rgba(255,255,255,.08); cursor: pointer; }
.pk-emoji button.on { border-color: var(--yellow); background: rgba(255,210,63,.22); }
/* Handy: Paket-Symbol links neben der Frage statt darueber, Zeilen etwas enger */
@media (max-width: 759px) {
  .oc { line-height: 1.04; }
  .oc .oc-pack { position: static; order: -1; background: none; border: 0; padding: 0; font-size: 14px; line-height: 1; flex: none; align-self: center; }
}
@media (max-width: 760px) {
  /* Timer ganz links (Logo in der Runde ausgeblendet), damit er nicht in die Knoepfe rutscht */
  body.in-room .brand-icon { visibility: hidden; }
  #timer { left: 6px; }
  /* Stern "deine Frage": kleiner, rechts neben der Karte statt im Text */
  .oc .mine { width: 20px; height: 20px; font-size: 12px; top: 50%; margin-top: -10px; right: 4px; }
  .oc:has(.mine) { padding-right: 28px; }
}
@media (max-width: 760px) {
  /* Fragen naeher an den "Fragen"-Knopf und insgesamt etwas hoeher */
  #options { top: 50px; }
  .board { gap: 4px; }
  .board-head { padding: 2px 10px; font-size: 13px; }
  /* Eingabefeld: Platzhalter kleiner, damit "Deine Zahl" ganz sichtbar bleibt */
  .answer-form input::placeholder { font-size: 15px; }
}
@media (max-width: 760px) { .board .opts-bar { padding-top: 2px !important; } }
/* Emote-Ablage nach der Runde: wegklickbar */
#votetray .vt-hint { display: flex; align-items: center; gap: 8px; justify-content: center; pointer-events: auto; }
.vt-close { pointer-events: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; font-weight: 900; font-size: 13px; line-height: 1; cursor: pointer; }
/* Handy: Aufloesung kompakter, damit der Punktestand sichtbar bleibt */
@media (max-width: 760px) {
  .reveal { gap: 8px; }
  .reveal-top { gap: 6px; grid-template-columns: 1fr; }
  .reveal .lbl { font-size: 11px; }
  .reveal .imp-list { margin-top: 2px; }
  .real .q { font-size: 15px; line-height: 1.25; margin-top: 2px; }
  .reveal .highlight { padding: 5px 10px; gap: 8px; }
  .reveal .hl-icon { font-size: 24px; }
  .reveal .hl-text { font-size: 14px; }
  .reveal .hl-cheer button { width: 34px; height: 34px; font-size: 18px; }
  .reveal .actions { padding: 6px 0 0; }
  .reveal .actions .btn.big { font-size: 17px; padding: 9px 14px; }
  .reveal .actions .btn { font-size: 14px; }
  #votetray .vt-hint { font-size: 11px !important; }
}