/* ==========================================================================
   Game-Ted – Spiel-Oberflächen (ergänzt app.css)
   ========================================================================== */
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 200; }

/* ---------------------------------------------------------------- Präsentation */
.sound-pill { position: absolute; right: 1.6vw; bottom: 13vh; z-index: 40; display: inline-flex; align-items: center; gap: .8vh; padding: 1vh 1.8vh; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.6); color: #fff; font: inherit; font-weight: 800; font-size: clamp(12px, 1.7vh, 18px); cursor: pointer; backdrop-filter: blur(6px); animation: pulse 2s infinite; }
.sound-pill .i { width: 2.2vh; height: 2.2vh; }
.present-body.embed .sound-pill { display: none; }

.status-pill.reveal { color: #22c55e; border-color: rgba(34,197,94,.5); }
.slide .qno { display: flex; align-items: center; gap: 1.2vw; }
.pts-badge { font-size: .85em; letter-spacing: .06em; padding: .3vh 1vh; border-radius: 999px; background: color-mix(in srgb, var(--p-accent) 22%, transparent); color: var(--p-text); }
.pts-badge.muted { background: var(--p-surface); color: var(--p-muted); }

/* Spielkarten A/B/C/D */
.options-preview.game { grid-template-columns: repeat(2, 1fr); }
.options-preview.game.n1, .options-preview.game.n2 { grid-template-columns: repeat(2, 1fr); }
.options-preview.game.n3 { grid-template-columns: repeat(3, 1fr); }
.options-preview.game .op { position: relative; overflow: hidden; border: 0; background: color-mix(in srgb, var(--oc) 82%, #000 0%); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.25); box-shadow: 0 1vh 3vh rgba(0,0,0,.25), inset 0 -.6vh 0 rgba(0,0,0,.18); min-height: 12vh; }
.options-preview.game .op:nth-child(2) { animation-delay: .06s; } .options-preview.game .op:nth-child(3) { animation-delay: .12s; } .options-preview.game .op:nth-child(4) { animation-delay: .18s; }
.options-preview.game .letter { flex: 0 0 auto; width: 7vh; height: 7vh; border-radius: 1.6vh; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.22); font-weight: 900; font-size: 4vh; }

/* Lösung */
.solution { display: flex; align-items: center; gap: 2vw; padding: 1.8vh 2.2vw; border-radius: var(--p-radius); background: linear-gradient(90deg, rgba(34,197,94,.22), rgba(34,197,94,.08)); border: 2px solid rgba(34,197,94,.55); }
.solution.pop { animation: solpop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes solpop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.solution .sol-icon { width: 7vh; height: 7vh; border-radius: 50%; background: #22c55e; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.solution .sol-icon .i { width: 4vh; height: 4vh; stroke-width: 3; }
.solution .sol-k { font-size: clamp(11px, 1.6vh, 18px); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: #4ade80; }
.solution .sol-v { font-size: clamp(20px, 4vh, 54px); font-weight: 900; line-height: 1.1; }
.solution .sol-stat { text-align: center; padding-left: 2vw; border-left: 1px solid rgba(255,255,255,.2); }
.solution .sol-stat b { display: block; font-size: clamp(20px, 5vh, 64px); font-weight: 900; line-height: 1; }
.solution .sol-stat span { color: var(--p-muted); font-size: clamp(11px, 1.6vh, 18px); font-weight: 700; }

/* Lobby: beigetretene Spieler */
.player-cloud { margin-top: 3vh; }
.player-cloud .pc-head { font-size: clamp(14px, 2.2vh, 28px); color: var(--p-muted); font-weight: 700; margin-bottom: 1.4vh; }
.player-cloud .pc-head b { color: var(--p-accent); font-size: 1.5em; }
.player-cloud .pc-empty { display: flex; align-items: center; gap: 1vw; color: var(--p-muted); font-size: clamp(14px, 2.2vh, 26px); }
.player-cloud .pc-empty .i { width: 3.4vh; height: 3.4vh; animation: pulse 1.6s infinite; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 1vh; max-height: 30vh; overflow: hidden; }
.pc-chip { padding: .8vh 1.6vh; border-radius: 999px; background: var(--p-surface); border: 1px solid var(--p-border); font-weight: 800; font-size: clamp(12px, 2vh, 24px); animation: chipin .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i) * 25ms); }
.pc-chip.fresh { background: color-mix(in srgb, var(--p-primary) 40%, transparent); border-color: var(--p-primary); }
@keyframes chipin { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* Info-Folie */
.info-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; gap: 2.4vh; padding: 0 6vw; }
.info-slide .big { font-size: clamp(32px, 8vh, 110px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; background: linear-gradient(90deg, var(--p-text), var(--p-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.info-slide .text { font-size: clamp(16px, 3vh, 40px); color: var(--p-muted); max-width: 70vw; white-space: pre-line; }
.end-winners { display: flex; align-items: center; gap: 1.4vw; flex-wrap: wrap; justify-content: center; margin-top: 3vh; font-size: clamp(16px, 3vh, 40px); font-weight: 800; }
.end-winners .i { width: 4vh; height: 4vh; color: #facc15; }
.end-winners .ew { padding: .8vh 2vh; border-radius: 999px; background: rgba(250,204,21,.16); border: 1px solid rgba(250,204,21,.5); }

/* Rangliste */
.board-slide { gap: 2.4vh; }
.board-head { display: flex; align-items: center; gap: 1.6vw; }
.board-head .board-icon { width: 9vh; height: 9vh; border-radius: 2.4vh; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--p-primary), var(--p-accent)); color: #fff; flex: 0 0 auto; box-shadow: 0 1vh 3vh rgba(0,0,0,.3); }
.board-head .board-icon .i { width: 5vh; height: 5vh; }
.board-slide.final .board-head .board-icon { background: linear-gradient(135deg, #f59e0b, #facc15); }
.board { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(var(--rows, 10), minmax(0, 1fr)); grid-template-columns: 1fr; gap: 1vh; max-height: calc(var(--rows, 10) * 10vh); }
.board.two { grid-auto-flow: column; grid-template-columns: 1fr 1fr; gap: 1vh 2.4vw; }
.brow { display: grid; grid-template-columns: 8vh minmax(0, 1.2fr) minmax(0, 2fr) 11vh; align-items: center; gap: 1.4vw; padding: 1vh 1.6vw 1vh 1vw; border-radius: var(--p-radius); background: var(--p-surface); border: 1px solid var(--p-border); font-size: clamp(14px, 2.8vh, 38px); font-weight: 800; opacity: 0; animation: browin .55s cubic-bezier(.2,1.3,.4,1) forwards; min-height: 0; }
.board.two .brow { font-size: clamp(12px, 2.2vh, 30px); grid-template-columns: 6vh minmax(0, 1.2fr) minmax(0, 1.2fr) 9vh; }
@keyframes browin { from { opacity: 0; transform: translateX(-6vw) scale(.96); } to { opacity: 1; transform: none; } }
.brow .brank { display: inline-flex; align-items: center; justify-content: center; gap: .3vw; font-weight: 900; color: var(--p-muted); }
.brow .brank .i { width: 2.8vh; height: 2.8vh; }
.brow .bname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .bbar { height: 2.4vh; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.brow .bbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--p-primary), var(--p-accent)); animation: bgrow 1.1s var(--ease) forwards; }
@keyframes bgrow { to { width: var(--w); } }
.brow .bscore { text-align: right; font-variant-numeric: tabular-nums; font-size: 1.15em; font-weight: 900; }
.brow .bscore small { font-size: .5em; color: var(--p-muted); font-weight: 700; }
.brow.m1 { background: linear-gradient(90deg, rgba(250,204,21,.32), rgba(250,204,21,.08)); border-color: rgba(250,204,21,.7); box-shadow: 0 0 4vh rgba(250,204,21,.25); }
.brow.m1 .brank, .brow.m1 .bscore { color: #facc15; }
.brow.m1 .bbar i { background: linear-gradient(90deg, #f59e0b, #facc15); }
.brow.m2 { border-color: rgba(203,213,225,.6); } .brow.m2 .brank { color: #e2e8f0; }
.brow.m3 { border-color: rgba(217,119,6,.6); } .brow.m3 .brank { color: #f59e0b; }

/* Gewinner-Auslosung */
.winner-slide { align-items: center; text-align: center; justify-content: center; gap: 2vh; }
.win-kicker { display: inline-flex; align-items: center; gap: 1vw; font-size: clamp(14px, 2.6vh, 34px); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #facc15; }
.win-kicker .i { width: 4vh; height: 4vh; }
.win-prize { font-size: clamp(16px, 3vh, 40px); font-weight: 800; padding: 1vh 3vh; border-radius: 999px; background: rgba(250,204,21,.14); border: 1px solid rgba(250,204,21,.45); }
.win-stage { position: relative; width: min(90vw, 150vh); flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6vh; }
.win-trophy { width: 26vh; height: 26vh; color: #facc15; animation: float 2.4s ease-in-out infinite; filter: drop-shadow(0 0 4vh rgba(250,204,21,.45)); }
.win-trophy .i { width: 100%; height: 100%; stroke-width: 1.4; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2vh) rotate(3deg); } }
.win-wait { font-size: clamp(20px, 4.4vh, 60px); font-weight: 900; }
.win-pool, .win-meta { color: var(--p-muted); font-size: clamp(14px, 2.4vh, 30px); font-weight: 700; }
.win-label { font-size: clamp(18px, 3.6vh, 48px); font-weight: 800; color: var(--p-muted); letter-spacing: .04em; }
.win-name { position: relative; z-index: 1; min-width: 50%; padding: 4vh 6vw; border-radius: calc(var(--p-radius) * 1.6); background: rgba(0,0,0,.25); border: .5vh solid rgba(255,255,255,.18); font-size: clamp(36px, 12vh, 170px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 88vw; }
.win-name .flip { display: inline-block; animation: flipin .09s linear; }
@keyframes flipin { from { transform: translateY(-40%); opacity: .2; filter: blur(3px); } to { transform: none; opacity: 1; filter: none; } }
.win-stage.spinning .win-name { border-color: var(--p-accent); box-shadow: 0 0 6vh color-mix(in srgb, var(--p-accent) 50%, transparent); animation: shake .18s linear infinite; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-.4vh); } 75% { transform: translateX(.4vh); } }
.win-stage.won .win-name { border-color: #facc15; background: linear-gradient(135deg, rgba(250,204,21,.35), rgba(245,158,11,.15)); color: #fff; box-shadow: 0 0 10vh rgba(250,204,21,.55), inset 0 0 4vh rgba(250,204,21,.3); animation: winpop .8s cubic-bezier(.2,1.8,.35,1); }
.win-stage.won .win-name .final { display: inline-block; background: linear-gradient(90deg, #fff, #fde68a, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shine 2.4s linear infinite; }
@keyframes winpop { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes shine { to { background-position: -200% 0; } }
.win-stage.won .win-label { color: #facc15; }
.win-rays { position: absolute; left: 50%; top: 50%; width: 140vh; height: 140vh; margin: -70vh 0 0 -70vh; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(250,204,21,.13) 0deg 8deg, transparent 8deg 22deg); opacity: 0; transition: opacity .6s; pointer-events: none; mask-image: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); }
.win-stage.spinning .win-rays { opacity: .5; animation: spin 6s linear infinite; }
.win-stage.won .win-rays { opacity: 1; animation: spin 14s linear infinite; }
.win-list { color: var(--p-muted); font-size: clamp(12px, 2vh, 24px); font-weight: 700; display: flex; gap: 1vw; flex-wrap: wrap; justify-content: center; }
.win-list span { color: var(--p-text); padding: .3vh 1.2vh; border-radius: 999px; background: var(--p-surface); }

/* ---------------------------------------------------------------- Spielergerät */
.score-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--p-primary) 28%, transparent); border: 1px solid color-mix(in srgb, var(--p-primary) 60%, transparent); font-weight: 800; font-size: .85rem; white-space: nowrap; }
.score-pill .i { width: 14px; height: 14px; color: #facc15; }
.score-pill .sep { opacity: .5; }
.player-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--p-muted); margin: -8px 0 12px; }
.welcome-badge { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; background: linear-gradient(135deg, var(--p-primary), var(--p-accent)); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.welcome-badge .i { width: 36px; height: 36px; }

.options.game { display: grid; grid-template-columns: 1fr; gap: 10px; }
.options.game .opt { border: 0; color: #fff; background: var(--oc); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); text-shadow: 0 1px 3px rgba(0,0,0,.25); min-height: 64px; position: relative; }
.options.game .opt .letter { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.25); font-weight: 900; font-size: 1.15rem; }
.options.game .opt .olabel { flex: 1; }
.options.game .opt .mark { border-color: rgba(255,255,255,.7); }
.options.game .opt.selected { outline: 4px solid var(--p-text); outline-offset: 2px; transform: scale(1.01); }
.options.game .opt.selected .mark { background: #fff; border-color: #fff; }
.options.game .opt.selected .mark::after { border-color: var(--oc); }
.options.game:has(.selected) .opt:not(.selected) { opacity: .55; }
.options.game.preview .opt { cursor: default; opacity: .85; }

.reveal-card .verdict { text-align: center; padding: 14px 0 6px; }
.verdict .v-icon { width: 92px; height: 92px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
.verdict .v-icon .i { width: 52px; height: 52px; stroke-width: 3; }
.is-ok .verdict .v-icon { background: #22c55e; box-shadow: 0 0 0 10px rgba(34,197,94,.2), 0 12px 40px rgba(34,197,94,.45); }
.is-wrong .verdict .v-icon { background: #ef4444; box-shadow: 0 0 0 10px rgba(239,68,68,.18); }
.verdict .v-title { font-size: 1.8rem; font-weight: 900; letter-spacing: -.02em; }
.verdict .v-points { display: inline-block; margin-top: 6px; padding: 4px 14px; border-radius: 999px; background: rgba(34,197,94,.2); color: #4ade80; font-weight: 900; }
.sol-box { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin: 14px 0 4px; border-radius: 14px; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); text-align: left; }
.sol-box b { font-size: 1.1rem; }
.rrow.ok .rlabel span:first-child { color: #4ade80; font-weight: 800; }

.board-card .board-title { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.3rem; margin-bottom: 14px; }
.board-card .board-title .i { color: #facc15; }
.my-rank { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.my-rank > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 6px; border-radius: 14px; background: var(--p-surface); border: 1px solid var(--p-border); }
.my-rank b { font-size: 1.7rem; font-weight: 900; line-height: 1.1; }
.my-rank .mr-rank b { font-size: 2.4rem; color: var(--p-accent); }
.my-rank small { color: var(--p-muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.my-rank.top.m1 .mr-rank { background: rgba(250,204,21,.2); border-color: rgba(250,204,21,.6); } .my-rank.top.m1 .mr-rank b { color: #facc15; }
.mini-board { display: flex; flex-direction: column; gap: 5px; }
.mb-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--p-surface); font-weight: 700; animation: vin .3s var(--ease) both; }
.mb-row .mb-rank { color: var(--p-muted); font-weight: 900; text-align: center; }
.mb-row .mb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-row.m1 .mb-rank { color: #facc15; } .mb-row.m2 .mb-rank { color: #e2e8f0; } .mb-row.m3 .mb-rank { color: #f59e0b; }
.mb-row.me { outline: 2px solid var(--p-primary); background: color-mix(in srgb, var(--p-primary) 22%, transparent); }

.pulse.spin .i { animation: spin 1s linear infinite; }
.winner-card { text-align: center; }
.winner-card .wc-trophy { width: 84px; height: 84px; margin: 0 auto 10px; color: #facc15; filter: drop-shadow(0 0 18px rgba(250,204,21,.5)); animation: float 2.4s ease-in-out infinite; }
.winner-card .wc-trophy .i { width: 100%; height: 100%; }
.winner-card h1 { font-size: 2rem; margin: 6px 0; }
.winner-card.mine { border-color: #facc15; background: linear-gradient(160deg, rgba(250,204,21,.25), rgba(245,158,11,.08)); }
.winner-card.mine h1 { color: #facc15; font-size: 2.3rem; }

/* ---------------------------------------------------------------- Verwaltung */
.flow-wrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .flow-wrap { grid-template-columns: 1fr; } }
.flow-palette { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; }
.flow-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--border); background: var(--surface); cursor: grab; font-weight: 700; font-size: .9rem; user-select: none; transition: border-color .15s, transform .1s; }
.flow-tile:hover { border-color: var(--primary); transform: translateX(2px); }
.flow-tile .ft-ic { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.flow-tile small { display: block; font-weight: 500; color: var(--muted); font-size: .75rem; }
.st-question { background: #4f6df5; } .st-interim { background: #0ea5e9; } .st-final { background: #f59e0b; } .st-winner { background: #e11d48; } .st-info { background: #64748b; }
.flow-list { display: flex; flex-direction: column; gap: 6px; }
.flow-round { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.flow-round::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.flow-item { user-select: none; display: grid; grid-template-columns: 22px 30px 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: box-shadow .15s, opacity .15s; }
.flow-item.step { border-left: 4px solid var(--stc); }
.flow-item.off { opacity: .45; }
.flow-item.dragging { opacity: .35; }
.flow-item.drop-before { box-shadow: 0 -3px 0 var(--primary); }
.flow-item.drop-after { box-shadow: 0 3px 0 var(--primary); }
.flow-item .handle { cursor: grab; color: var(--muted); display: inline-flex; }
.flow-item .fno { font-weight: 800; color: var(--muted); text-align: center; font-size: .85rem; }
.flow-item .fic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.flow-item .fic .i { width: 17px; height: 17px; }
.flow-item .ftitle { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-item .fsub { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-item .factions { display: flex; align-items: center; gap: 2px; }
.flow-item .fedit { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px 0 4px; }
.flow-list.drop-end { box-shadow: 0 3px 0 var(--primary); }
.badge.score { background: rgba(34,197,94,.15); color: #16a34a; }
.theme-dark .badge.score { color: #4ade80; }
.opt-row .ok-btn { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--border); background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; transition: all .15s; }
.opt-row .ok-btn.on { background: #22c55e; border-color: #22c55e; color: #fff; }
.opt-row .ok-btn .i { width: 16px; height: 16px; stroke-width: 3; }
.ctrl-q .ftype { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.ctrl-q .ftype .i { width: 15px; height: 15px; }
.ctrl-q.off { opacity: .45; }
.lb-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.lb-table tr.m1 td { font-weight: 800; }
.winner-box { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(250,204,21,.12); border: 1px solid rgba(250,204,21,.45); }
.winner-box .i { color: #f59e0b; width: 26px; height: 26px; }
.winner-box b { font-size: 1.2rem; }

/* ---------------------------------------------------------------- Spielmodi (Speed, Mischen) */
.pts-badge { display: inline-flex; align-items: center; gap: .4vw; }
.pts-badge .i { width: 1.8vh; height: 1.8vh; }
.pts-badge.speed { background: linear-gradient(90deg, #f59e0b, #ef4444); color: #fff; animation: pulse 1.6s infinite; }
.options-preview.dealt .op { animation: deal .6s cubic-bezier(.2,1.4,.4,1) both; }
.options-preview.dealt .op:nth-child(2) { animation-delay: .08s; } .options-preview.dealt .op:nth-child(3) { animation-delay: .16s; } .options-preview.dealt .op:nth-child(4) { animation-delay: .24s; } .options-preview.dealt .op:nth-child(5) { animation-delay: .32s; } .options-preview.dealt .op:nth-child(6) { animation-delay: .4s; }
@keyframes deal { from { transform: translateY(-30vh) rotate(-12deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.sol-fast { padding-left: 2vw; border-left: 1px solid rgba(255,255,255,.2); min-width: 22vw; }
.sol-fast .sf-k { display: flex; align-items: center; gap: .5vw; font-size: clamp(11px, 1.6vh, 18px); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: #fbbf24; }
.sol-fast .sf-k .i { width: 2vh; height: 2vh; }
.sol-fast .sf-row { display: flex; justify-content: space-between; gap: 1.4vw; font-size: clamp(12px, 2vh, 26px); font-weight: 700; color: var(--p-muted); }
.sol-fast .sf-row.first { font-size: clamp(16px, 3.2vh, 42px); font-weight: 900; color: var(--p-text); }
.sol-fast .sf-row.first b { color: #fbbf24; }
.sol-fast .sf-v { color: var(--p-muted); font-weight: 700; }
.speed-hint { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin: -4px 0 12px; border-radius: 10px; background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.45); color: #fbbf24; font-weight: 700; font-size: .88rem; }
.sent-box .speed-hint { justify-content: center; margin: 10px 0 0; }
.options.game.shuffled .opt { animation: deal .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i) * 60ms); }
.is-slow .verdict .v-icon { background: #f59e0b; box-shadow: 0 0 0 10px rgba(245,158,11,.2); }
.sol-box.fast { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); }
.sol-box.fast .muted { display: inline-flex; align-items: center; gap: 4px; }
.badge.speed { background: rgba(245,158,11,.18); color: #d97706; }
.theme-dark .badge.speed { color: #fbbf24; }

.mute-pill { position: absolute; right: 1.6vw; bottom: 13vh; z-index: 40; display: inline-flex; align-items: center; gap: .8vh; padding: .8vh 1.6vh; border-radius: 999px; background: rgba(0,0,0,.55); color: #fbbf24; font-weight: 800; font-size: clamp(11px, 1.5vh, 16px); }
.mute-pill .i { width: 2vh; height: 2vh; }
.present-body.embed .mute-pill { display: none; }