/* Phone + table games batch 4 (Bluff Dice … Face Off). Shared phone pieces first (card hands, other
   players' hands, big pickers), then each game's table. All of these use the party frame (party3.css). */
body[data-game="bluffdice"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #5a2020 0%, #401414 55%, #160606 100%); }
body[data-game="petals"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #4a2448 0%, #2a142a 55%, #0e060e 100%); }
body[data-game="sealed"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #5a2e1e 0%, #3a1c12 55%, #140806 100%); }
body[data-game="insync"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #1f3a58 0%, #142638 55%, #060c14 100%); }
body[data-game="nightlights"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 30%, #1c1c48 0%, #0c0c22 60%, #04040e 100%); }
body[data-game="nope"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #1e5a48 0%, #143a30 55%, #06140e 100%); }
body[data-game="bullpen"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #5a4018 0%, #3a280c 55%, #140c04 100%); }
body[data-game="openhouse"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #22486e 0%, #142e48 55%, #060e18 100%); }
body[data-game="bugbluff"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #3e4a16 0%, #28300c 55%, #0c1004 100%); }
body[data-game="snapmatch"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #6a1e52 0%, #4a1438 55%, #180612 100%); }
body[data-game="whoswho"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #2a5482 0%, #1c3a58 55%, #08121c 100%); }
body[data-game="throwdown"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #6a4614 0%, #4a300c 55%, #1a1004 100%); }
body[data-game="oneclue"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #1f5e5e 0%, #143e3e 55%, #061616 100%); }
body[data-game="samebrain"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #44702a 0%, #2e481c 55%, #0e1808 100%); }
body[data-game="closecall"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #1f4a26 0%, #142614 55%, #060e06 100%); }
body[data-game="doodlebluff"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #5a3468 0%, #3e2448 55%, #140a18 100%); }
body[data-game="dreamcards"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #2e2058 0%, #1e1438 55%, #0a0616 100%); }
body[data-game="knowme"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #842a46 0%, #5a1c2e 55%, #1e080e 100%); }
body[data-game="thisorthat"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #2a4478 0%, #1c2e50 55%, #080e1c 100%); }
body[data-game="faceoff"] #felt { background: radial-gradient(ellipse 120% 100% at 50% 50%, #9a401e 0%, #6a2a14 55%, #200a04 100%); }

/* ---------- phone: cards, hands, big pickers ---------- */
.pp-opts.cards { gap: 8px; }
.pp-opts.cards .pp-opt { flex-direction: column; justify-content: center; gap: 2px; min-height: 92px; padding: 10px 4px; border-radius: 12px; background: linear-gradient(170deg, #fffaf0, #efe4cc); color: #2a2320; border: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 0 0 3px var(--c, transparent); }
.pp-opts.cards .pp-opt span { font-family: var(--ui); font-weight: 800; font-size: 30px; line-height: 1; }
.pp-opts.cards .pp-opt small { color: #6a5a3a; font-size: 11px; text-align: center; }
.pp-opts.cards .pp-opt.on { box-shadow: 0 0 0 3px var(--champagne), 0 4px 14px rgba(0, 0, 0, .5); }
.pp-opts.cards .pp-opt:disabled { opacity: .35; }
.pp-opts.big .pp-opt { flex-direction: column; justify-content: center; min-height: 120px; font-size: 18px; }
.pp-opts.big .pp-opt span { font-size: 22px; text-align: center; }
.pp-mini { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 54px; margin: 2px; border-radius: 6px; background: var(--c, #efe4cc); color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .4); vertical-align: middle; }
.pp-mini b { font-family: var(--ui); font-weight: 800; font-size: 22px; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pp-mini small { font-size: 10px; opacity: .9; }
.pp-hands { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.pp-handrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.pp-handrow .nm { flex: 0 0 76px; display: flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-handrow .nm i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pp-handrow.mine .nm { flex-basis: auto; white-space: normal; color: var(--gold-ink); }
.pp-handrow.mine { flex-direction: column; align-items: flex-start; }
.pp-handrow em { color: var(--mute); font-size: 12px; }

/* ---------- Bluff Dice ---------- */
.bd-mine { display: flex; gap: 8px; justify-content: center; padding: 8px 0; }
.bd-die { display: inline-grid; place-items: center; font-style: normal; font-size: 40px; line-height: 1; color: #fbf6ea; }
.bd-mine .bd-die { font-size: 52px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.bd-mine .bd-die.d1 { color: #ffd070; }
.pp-opt.bd-face span { font-size: 40px; line-height: 1; }
.panel-btn.bd-liar { background: #a8232a; color: #fff; border-color: #a8232a; }
.bd-bid { display: flex; align-items: center; gap: 2vmin; font-family: var(--num); color: var(--ivory); }
.bd-bid b { font-size: 12vmin; font-weight: 400; }
.bd-bid span { font-size: 5vmin; color: var(--gold-ink); }
.bd-bid .bd-die.big { font-size: 13vmin; }
.bd-cups { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2vmin; }
.bd-cups li { display: flex; flex-direction: column; align-items: center; gap: .6vmin; min-width: 13vmin; padding: 1vmin 1.4vmin; border-radius: 1.2vmin; background: rgba(0, 0, 0, .25); }
.bd-cups li.up { box-shadow: inset 0 0 0 .25vmin var(--champagne); }
.bd-cups li.out { opacity: .35; }
.bd-cups li.lost { box-shadow: inset 0 0 0 .3vmin #ff6a5a; }
.bd-cup { width: 8vmin; height: 7vmin; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #4a2414, #8a4a2a 45%, #5a2a18); border-radius: .6vmin; box-shadow: inset 0 .6vmin 0 #a0603a; transition: transform .5s; }
.bd-cup.up { transform: translateY(-2vmin) rotate(-12deg); opacity: .35; height: 3vmin; }
.bd-dice { display: flex; gap: .3vmin; font-size: 3vmin; color: var(--champagne); letter-spacing: .1em; min-height: 3.4vmin; }
.bd-dice .bd-die { font-size: 4.2vmin; color: rgba(255, 255, 255, .45); }
.bd-dice .bd-die.hit { color: #ffd070; text-shadow: 0 0 1.4vmin rgba(255, 200, 80, .7); }
.bd-cups b { display: flex; align-items: center; gap: .6vmin; font-family: var(--ui); font-size: 1.7vmin; color: var(--ivory); }
.bd-cups b i { width: 1.1vmin; height: 1.1vmin; border-radius: 50%; }

/* ---------- Petals & Thorns ---------- */
.pt-discs { display: flex; align-items: center; gap: 6px; font-size: 26px; }
.pt-discs small { font-family: var(--ui); font-size: 12px; color: var(--mute); }
.pp-opt.pt-disc { flex-direction: column; justify-content: center; min-height: 100px; }
.pp-opt.pt-disc span { font-size: 48px; text-align: center; }
.pe-stacks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4vmin; }
.pe-stacks li { display: flex; flex-direction: column; align-items: center; gap: .6vmin; padding: 1vmin; border-radius: 1.2vmin; }
.pe-stacks li.up { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .2vmin var(--champagne); }
.pe-stacks li.out { opacity: .35; }
.pe-pile { display: flex; flex-direction: column-reverse; align-items: center; min-height: 10vmin; justify-content: flex-start; }
.pe-pile i { display: grid; place-items: center; width: 9vmin; height: 2.4vmin; margin-top: -.6vmin; border-radius: 50%; font-style: normal; background: radial-gradient(ellipse, #6a4a2a, #3a2410); box-shadow: 0 .4vmin .6vmin rgba(0, 0, 0, .5); }
.pe-pile i.up { height: 5vmin; margin-top: .4vmin; background: #f6e8d0; font-size: 3.4vmin; }
.pe-stacks b { display: flex; align-items: center; gap: .6vmin; font-family: var(--ui); font-size: 1.7vmin; color: var(--ivory); }
.pe-stacks b i { width: 1.1vmin; height: 1.1vmin; border-radius: 50%; }
.pe-stacks small { font-family: var(--ui); font-size: 1.4vmin; color: var(--mute); }
.pe-bid { font-family: var(--num); font-size: 12vmin; line-height: 1; color: #ffb0d0; }

/* ---------- Sealed Letter ---------- */
.pp-opts.cards .pp-opt.sl-card { min-height: 150px; }
.pp-opts.cards .pp-opt.sl-card span { font-size: 60px; }
.pp-opts.cards .pp-opt.sl-card small { font-size: 13px; font-weight: 700; }
.sl-peek { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(110, 160, 255, .18); color: var(--ivory); font-family: var(--serif); font-size: 16px; }
.sl-help { list-style: none; margin: 0; padding: 0; width: 100%; font-family: var(--serif); font-size: 14px; color: var(--gold-ink); }
.sl-help li { padding: 4px 0; }
.sl-help b { color: var(--ivory); }
.sl-wrap { display: flex; gap: 3vmin; align-items: flex-start; width: 100%; justify-content: center; }
.sl-deck { display: flex; flex-direction: column; align-items: center; gap: .6vmin; font-family: var(--ui); font-size: 1.4vmin; color: var(--mute); }
.sl-back { display: grid; place-items: center; width: 9vmin; height: 12.6vmin; border-radius: 1vmin; background: repeating-linear-gradient(45deg, #6a2a24 0 .8vmin, #5a2018 .8vmin 1.6vmin); box-shadow: 0 1vmin 2vmin rgba(0, 0, 0, .5), inset 0 0 0 .3vmin #e3c88c; font-family: var(--num); font-size: 4vmin; color: #f3e4c4; }
.sl-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8vmin; }
.sl-rows li { display: flex; align-items: center; gap: 1.4vmin; padding: .6vmin 1.2vmin; border-radius: 1vmin; background: rgba(0, 0, 0, .22); }
.sl-rows li.up { box-shadow: inset 0 0 0 .2vmin var(--champagne); }
.sl-rows li.out { opacity: .45; }
.sl-rows .nm { flex: 0 0 18vmin; display: flex; align-items: center; gap: .6vmin; font-family: var(--ui); font-size: 1.7vmin; color: var(--ivory); }
.sl-rows .nm i { width: 1.1vmin; height: 1.1vmin; border-radius: 50%; }
.sl-rows .nm small { margin-left: auto; }
.sl-rows div { display: flex; gap: .5vmin; flex-wrap: wrap; }
.sl-tcard { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 4.6vmin; height: 6.4vmin; border-radius: .6vmin; background: #f3e4c4; color: #5a2a1a; box-shadow: 0 .3vmin .6vmin rgba(0, 0, 0, .4); }
.sl-tcard b { font-size: 2.6vmin; line-height: 1; }
.sl-tcard small { font-family: var(--num); font-size: 1.3vmin; }
.sl-tcard.shown { box-shadow: 0 0 0 .3vmin #ffd070; }
.sl-log { list-style: none; margin: 0; padding: 0; font-family: var(--serif); font-size: 1.9vmin; color: var(--gold-ink); text-align: center; }
.sl-log li:first-child { color: var(--ivory); font-size: 2.2vmin; }

/* ---------- In Sync ---------- */
.is-hand { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.is-card { display: inline-grid; place-items: center; width: 64px; height: 90px; border-radius: 10px; background: linear-gradient(170deg, #f4f8ff, #d8e4f4); color: #1d3a6a; font-family: var(--ui); font-weight: 800; font-size: 32px; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.is-card.dim { opacity: .55; transform: scale(.85); }
.panel-btn.is-play b { font-size: 40px; }
.is-pile { position: relative; width: 22vmin; height: 26vmin; }
.is-pile .is-card { position: absolute; left: 50%; top: 50%; width: 16vmin; height: 22vmin; font-size: 9vmin; border-radius: 1.4vmin; transform: translate(-50%, -50%) translate(calc(var(--i) * -1.4vmin), calc(var(--i) * -1vmin)) rotate(calc(var(--i) * -4deg)); opacity: calc(1 - var(--i) * .15); }
.is-pile .is-card.top { animation: trPop .35s; }
.is-pile .is-card.empty { opacity: .25; }
.is-status { display: flex; gap: 3vmin; font-family: var(--ui); font-size: 2.2vmin; color: var(--ivory); }
.is-status b { font-family: var(--num); font-weight: 400; font-size: 1.4em; }
.is-oops { color: #ffa898; }

/* ---------- Night Lights ---------- */
.pp-mini.nl-card, .pp-opt.nl-card { --c: #555; }
.pp-opts.cards .pp-opt.nl-card { background: var(--c); color: #fff; min-height: 76px; }
.pp-opts.cards .pp-opt.nl-card span { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.pp-opts.cards .pp-opt.nl-card small { color: rgba(255, 255, 255, .85); }
.pp-opts.cards .pp-opt.nl-card.nocol, .pp-mini.nl-card.nocol { background: repeating-linear-gradient(45deg, #3a3a4a 0 6px, #2a2a38 6px 12px); }
.pp-opts.cards .pp-opt.nl-card.plain { background: #fffaf0; }
.pp-opts.cards .pp-opt.nl-card.plain span { color: #1a1a2a; text-shadow: none; }
.nl-fw { display: flex; gap: 6px; justify-content: center; }
.nl-fw span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; font-family: var(--ui); font-weight: 800; box-shadow: 0 0 10px var(--c); }
.nl-sky { display: flex; gap: 3vmin; align-items: flex-end; }
.nl-rocket { display: flex; flex-direction: column; align-items: center; gap: .5vmin; }
.nl-rocket i { display: grid; place-items: center; width: 6vmin; height: 4.4vmin; border-radius: .8vmin; font-style: normal; font-family: var(--ui); font-weight: 800; font-size: 2.2vmin; color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 .14vmin rgba(255, 255, 255, .1); }
.nl-rocket i.lit { color: #fff; background: var(--c); box-shadow: 0 0 2vmin var(--c); }
.nl-rocket b { font-family: var(--ui); font-size: 1.5vmin; color: var(--c); letter-spacing: .1em; text-transform: uppercase; }
.nl-tokens { display: flex; gap: 3vmin; font-size: 2.6vmin; color: var(--ivory); }
.nl-tokens em { font-style: normal; color: rgba(255, 255, 255, .25); }
.nl-disc { display: flex; flex-wrap: wrap; gap: .4vmin; justify-content: center; max-width: 70vmin; }
.nl-disc i { display: grid; place-items: center; width: 2.8vmin; height: 3.6vmin; border-radius: .4vmin; font-style: normal; font-family: var(--ui); font-weight: 800; font-size: 1.6vmin; color: #fff; background: var(--c); opacity: .7; }

/* ---------- Nope! ---------- */
.pp-card.np-card b { font-size: 64px; color: #b8323a; }
.np-runs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.np-runs span { display: inline-flex; }
.np-runs i { display: inline-grid; place-items: center; width: 30px; height: 40px; margin-right: -8px; border-radius: 5px; font-style: normal; font-family: var(--ui); font-weight: 800; font-size: 16px; background: #fbf6ea; color: #b8323a; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.np-runs i.dim { color: #c8b8a8; }
.np-mid { display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
.np-big { display: grid; place-items: center; width: 18vmin; height: 24vmin; border-radius: 1.6vmin; background: #fbf6ea; color: #b8323a; font-family: var(--ui); font-weight: 800; font-size: 11vmin; box-shadow: 0 1.6vmin 3vmin rgba(0, 0, 0, .5); }
.np-pot { display: flex; flex-wrap: wrap; justify-content: center; gap: .3vmin; max-width: 24vmin; }
.np-pot i { width: 2.4vmin; height: 2.4vmin; border-radius: 50%; background: #e8b923; box-shadow: inset 0 0 0 .3vmin #8a6a1a; }
.np-mid small { font-family: var(--ui); font-size: 1.6vmin; color: var(--mute); }
.np-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7vmin; width: 100%; }
.np-rows li { display: flex; align-items: center; gap: 1.4vmin; padding: .5vmin 1.2vmin; border-radius: 1vmin; background: rgba(0, 0, 0, .2); }
.np-rows li.up { box-shadow: inset 0 0 0 .2vmin var(--champagne); }
.np-rows .nm { flex: 0 0 18vmin; display: flex; align-items: center; gap: .6vmin; font-family: var(--ui); font-size: 1.7vmin; color: var(--ivory); }
.np-rows .nm i { width: 1.1vmin; height: 1.1vmin; border-radius: 50%; }
.np-rows .np-runs { justify-content: flex-start; }
.np-rows .np-runs i { width: 3.2vmin; height: 4.2vmin; font-size: 1.8vmin; margin-right: -.9vmin; }

/* ---------- Bull Pen ---------- */
.pp-opts.cards .pp-opt.bp-card span { font-size: 26px; }
.pp-opts.cards .pp-opt.bp-card.b2 { box-shadow: inset 0 0 0 3px #7aa0d8, 0 4px 10px rgba(0, 0, 0, .4); }
.pp-opts.cards .pp-opt.bp-card.b3 { box-shadow: inset 0 0 0 3px #e8b923, 0 4px 10px rgba(0, 0, 0, .4); }
.pp-opts.cards .pp-opt.bp-card.b5 { box-shadow: inset 0 0 0 3px #e06a2a, 0 4px 10px rgba(0, 0, 0, .4); }
.pp-opts.cards .pp-opt.bp-card.b7 { box-shadow: inset 0 0 0 3px #c0202a, 0 4px 10px rgba(0, 0, 0, .4); background: #ffe8e0; }
.bp-mini { width: 100%; display: flex; flex-direction: column; gap: 3px; font-family: var(--ui); font-size: 13px; }
.bp-mini div { display: flex; align-items: center; gap: 4px; }
.bp-mini b { color: var(--gold-ink); width: 14px; }
.bp-mini i { font-style: normal; padding: 2px 5px; border-radius: 4px; background: #fbf6ea; color: #3a2a10; font-weight: 700; }
.bp-mini i.b5, .bp-mini i.b7 { background: #ffd0c0; }
.bp-mini em { margin-left: auto; font-style: normal; color: var(--mute); }
.bp-rows { display: flex; flex-direction: column; gap: 1vmin; }
.bp-row { display: flex; align-items: center; gap: .8vmin; }
.bp-row.danger .bp-slot.six { color: #ff6a5a; box-shadow: inset 0 0 0 .2vmin #ff6a5a; }
.bp-n { width: 3vmin; font-family: var(--num); font-size: 2.4vmin; color: var(--gold-ink); }
.bp-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 7.4vmin; height: 9.4vmin; border-radius: .9vmin; background: #fbf6ea; color: #3a2a10; box-shadow: 0 .5vmin 1vmin rgba(0, 0, 0, .45); }
.bp-card b { font-family: var(--ui); font-weight: 800; font-size: 3.4vmin; line-height: 1; }
.bp-card small { font-size: 1.2vmin; line-height: 1.1; text-align: center; max-width: 6vmin; }
.bp-card.b2 { background: #e4ecfa; } .bp-card.b3 { background: #fbf0c8; } .bp-card.b5 { background: #fbdcc4; } .bp-card.b7 { background: #ffc8c0; }
.bp-card.new { animation: trPop .4s; box-shadow: 0 0 0 .3vmin var(--champagne), 0 .5vmin 1vmin rgba(0, 0, 0, .45); }
.bp-slot { width: 7.4vmin; height: 9.4vmin; border-radius: .9vmin; box-shadow: inset 0 0 0 .14vmin rgba(255, 255, 255, .12); display: grid; place-items: center; color: rgba(255, 255, 255, .15); font-size: 3vmin; }
.bp-row em { font-style: normal; font-family: var(--ui); font-size: 1.7vmin; color: var(--ivory); margin-left: 1vmin; }
.bp-reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 1vmin; }
.bp-reveal > span { display: flex; flex-direction: column; align-items: center; gap: .3vmin; font-family: var(--ui); font-size: 1.4vmin; color: var(--ivory); }
.bp-reveal > span.done { opacity: .45; }

/* ---------- Open House ---------- */
.oh-owned { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.oh-owned span { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .08); font-size: 20px; }
.oh-owned b { font-family: var(--ui); font-size: 11px; color: var(--ivory); }
.pp-opt.oh-prop span { font-size: 34px; }
.oh-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6vmin; }
.oh-card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 13vmin; height: 17vmin; border-radius: 1.2vmin; background: #fbf6ea; color: #2a3a5a; box-shadow: 0 1vmin 2vmin rgba(0, 0, 0, .45); }
.oh-card b { font-size: 6vmin; line-height: 1; }
.oh-card em { font-style: normal; font-family: var(--ui); font-weight: 800; font-size: 3.4vmin; }
.oh-card small { font-family: var(--ui); font-size: 1.3vmin; text-align: center; }
.oh-cheque { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 13vmin; height: 7vmin; border-radius: 1vmin; background: #d8f0d0; color: #2a6a3a; font-size: 2.4vmin; box-shadow: 0 .8vmin 1.6vmin rgba(0, 0, 0, .4); }
.oh-cheque b { font-family: var(--num); font-weight: 400; font-size: 3.6vmin; }
.oh-pair { display: flex; flex-direction: column; align-items: center; gap: .8vmin; }
.oh-pair small { font-family: var(--ui); font-size: 1.5vmin; color: var(--ivory); }

/* ---------- Bug Bluff ---------- */
.bb-hand { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bb-hand span { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 24px; }
.bb-hand b { font-family: var(--ui); font-size: 13px; color: var(--ivory); }
.pp-opts.cards .pp-opt.bb-bug { background: linear-gradient(170deg, #2a3a1a, #1a2410); color: #e8f4c8; }
.pp-opts.cards .pp-opt.bb-bug span { font-size: 38px; }
.pp-opts.cards .pp-opt.bb-bug small { color: #b8d488; }
.bb-transit { display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
.bb-back, .bb-face { display: grid; place-items: center; width: 12vmin; height: 16vmin; border-radius: 1.2vmin; font-size: 8vmin; box-shadow: 0 1vmin 2vmin rgba(0, 0, 0, .5); }
.bb-back { background: repeating-linear-gradient(45deg, #2a3a1a 0 1vmin, #1a2410 1vmin 2vmin); color: #9ab84a; font-family: var(--ui); font-weight: 900; }
.bb-face { background: #f4f0e0; animation: trPop .4s; }
.bb-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7vmin; width: 100%; }
.bb-rows li { display: flex; align-items: center; gap: 1.4vmin; padding: .6vmin 1.2vmin; border-radius: 1vmin; background: rgba(0, 0, 0, .22); }
.bb-rows li.up { box-shadow: inset 0 0 0 .2vmin var(--champagne); }
.bb-rows li.lost { background: rgba(200, 40, 40, .35); }
.bb-rows .nm { flex: 0 0 20vmin; display: flex; align-items: center; gap: .6vmin; font-family: var(--ui); font-size: 1.7vmin; color: var(--ivory); }
.bb-rows .nm i { width: 1.1vmin; height: 1.1vmin; border-radius: 50%; }
.bb-rows .nm small { margin-left: auto; color: var(--mute); }
.bb-rows div { display: flex; gap: 1.4vmin; font-size: 3vmin; flex-wrap: wrap; }
.bb-rows span.hot { padding: 0 .6vmin; border-radius: .6vmin; background: rgba(255, 80, 60, .35); }

/* ---------- Snap Match ---------- */
.pp-btns .panel-btn.sm-sym { flex: 0 0 calc(25% - 8px); min-width: 0; min-height: 80px; font-size: 44px; padding: 0; border-radius: 50%; aspect-ratio: 1; background: #fffaf0; border: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.pp-btns .panel-btn.sm-sym:active { transform: scale(.92); }
.pp-btns .panel-btn.sm-sym:disabled { filter: grayscale(1) brightness(.6); }
.sm-card { position: relative; width: 44vmin; height: 44vmin; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffffff, #f3ead6); box-shadow: 0 2vmin 4vmin rgba(0, 0, 0, .5), inset 0 0 0 .6vmin #e8d8b8; }
.sm-card.pop { animation: trPop .4s; }
.sm-card span { position: absolute; line-height: 1; }

/* ---------- Who's Who ---------- */
.ww-face { display: block; width: 100%; height: auto; }
.ww-secret { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-family: var(--ui); color: var(--ivory); }
.ww-secret .ww-face { width: 48px; }
.ww-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: 100%; }
.ww-board span { display: flex; flex-direction: column; align-items: center; border-radius: 6px; overflow: hidden; background: #c8302a; padding: 2px; }
.ww-board span small { font-family: var(--ui); font-size: 9px; color: #fff; }
.ww-board span.down { background: #4a1a18; }
.ww-board span.down .ww-face { opacity: .12; }
.pp-opts.cards .pp-opt.ww-pick { min-height: 0; padding: 4px; }
.pp-opts.cards .pp-opt.ww-pick .ww-face { width: 100%; }
.ww-boards { display: flex; gap: 4vmin; }
.ww-tboard { width: 34vmin; padding: 1vmin; border-radius: 1.2vmin; background: rgba(0, 0, 0, .25); }
.ww-tboard.up { box-shadow: inset 0 0 0 .25vmin var(--champagne); }
.ww-tboard p { margin: 0 0 .8vmin; font-family: var(--ui); font-size: 1.7vmin; color: var(--ivory); text-align: center; }
.ww-tboard .ww-board { gap: .5vmin; }
.ww-tboard .ww-board span { min-height: 6vmin; }
.ww-reveal { display: flex; gap: 4vmin; }
.ww-reveal span { display: flex; flex-direction: column; align-items: center; width: 12vmin; font-family: var(--ui); font-size: 1.5vmin; color: var(--ivory); text-align: center; }

/* ---------- Throwdown ---------- */
.td-matches { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6vmin; }
.td-match { display: flex; align-items: center; gap: 1.4vmin; padding: 1.2vmin 1.8vmin; border-radius: 1.4vmin; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 .14vmin rgba(255, 255, 255, .1); }
.td-match.done { opacity: .75; }
.td-match.bye { flex-direction: column; font-family: var(--ui); font-size: 1.7vmin; color: var(--mute); }
.td-side { display: flex; align-items: center; gap: 1vmin; font-family: var(--ui); font-size: 1.8vmin; color: var(--ivory); }
.td-side.win b { color: #ffd070; }
.td-side.lose { opacity: .45; }
.td-throw { font-size: 6vmin; line-height: 1; }
.td-side em { font-style: normal; font-family: var(--num); font-size: 3.4vmin; color: var(--champagne); }
.td-vs { font-family: var(--ui); font-weight: 800; font-size: 1.6vmin; color: var(--gold-ink); }
.td-bracket { display: flex; gap: 2vmin; }
.td-past { display: flex; flex-direction: column; gap: .4vmin; font-family: var(--ui); font-size: 1.5vmin; color: var(--mute); }
.td-past span { color: var(--ivory); }

/* ---------- One Clue ---------- */
.oc-easels { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6vmin; }
.oc-easel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 15vmin; padding: 1.6vmin 2vmin; border-radius: 1.2vmin; background: #fffaf0; box-shadow: 0 1vmin 2vmin rgba(0, 0, 0, .45); }
.oc-easel b { font-family: var(--display); font-weight: 700; font-size: 3.6vmin; color: #1a3a3a; }
.oc-easel small { font-family: var(--ui); font-size: 1.4vmin; color: #6a7a7a; }
.oc-easel.x { background: #e8d8d0; }
.oc-easel.x b { color: #b8323a; text-decoration: line-through; }
.oc-easel.blank { opacity: .45; }
.oc-word { margin: 0; font-family: var(--display); font-weight: 700; font-size: 8vmin; color: #fff3d6; }
.oc-word.right { color: #9fe8a8; } .oc-word.wrong { color: #ffa898; }

/* ---------- Same Brain ---------- */
.sb-pens { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4vmin; }
.sb-pen { display: flex; flex-direction: column; align-items: center; gap: .6vmin; min-width: 14vmin; padding: 1.2vmin 1.6vmin; border-radius: 1.2vmin; background: rgba(0, 0, 0, .25); }
.sb-pen b { font-family: var(--display); font-weight: 600; font-size: 3vmin; color: var(--ivory); }
.sb-pen span { display: flex; gap: .4vmin; }
.sb-pen span i { width: 1.8vmin; height: 1.8vmin; border-radius: 50%; }
.sb-pen small { font-family: var(--ui); font-size: 1.3vmin; color: var(--mute); max-width: 22vmin; text-align: center; }
.sb-pen.herd { background: rgba(120, 200, 100, .3); box-shadow: inset 0 0 0 .3vmin #9fe8a8; }
.sb-pen.herd b::before { content: '🐑 '; }
.sb-pen.sock { box-shadow: inset 0 0 0 .25vmin #ff9ad0; }
.sb-pen.sock b::after { content: ' 🧦'; }

/* ---------- Close Call ---------- */
.cc-mat { display: flex; gap: .8vmin; padding: 1.2vmin; border-radius: 1.4vmin; background: #1e5a32; box-shadow: inset 0 0 0 .3vmin #e8c35a, 0 1.6vmin 3vmin rgba(0, 0, 0, .5); overflow-x: auto; max-width: 100%; }
.cc-slot { display: flex; flex-direction: column; align-items: center; gap: .4vmin; min-width: 11vmin; padding: 1vmin; border-radius: 1vmin; background: #2a7a48; color: #fff; }
.cc-slot em { font-style: normal; font-family: var(--ui); font-size: 1.4vmin; color: #e8c35a; }
.cc-slot b { font-family: var(--num); font-weight: 400; font-size: 3vmin; }
.cc-slot small { font-family: var(--ui); font-size: 1.2vmin; color: #d8f0d8; text-align: center; }
.cc-slot span { display: flex; flex-wrap: wrap; gap: .3vmin; justify-content: center; }
.cc-slot span i { width: 1.6vmin; height: 1.6vmin; border-radius: 50%; box-shadow: 0 0 0 .2vmin #fff; }
.cc-slot.win { background: #e8c35a; color: #1a3a1a; animation: trPop .4s; }
.cc-slot.win small, .cc-slot.win em { color: #1a3a1a; }
.cc-answer { margin: 0; font-family: var(--num); font-size: 9vmin; color: #ffe8a0; }

/* ---------- Doodle Bluff ---------- */
.db-easel { border-radius: 1vmin; overflow: hidden; background: linear-gradient(170deg, #fdf9ef, #f1e8d4); box-shadow: 0 1.6vmin 3vmin rgba(0, 0, 0, .5); }
.db-easel canvas { display: block; }
.db-row { display: flex; gap: 2.4vmin; align-items: flex-start; width: 100%; }
.db-row .wb-opts { flex: 1; }

/* ---------- Dreamcards ---------- */
.dc-art { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, var(--a), var(--b)); }
.dc-art b { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); font-size: 2.6em; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.dc-art b.f { transform: translate(-50%, -50%) scaleX(-1); }
.dc-art i { position: absolute; font-style: normal; line-height: 1; opacity: .9; }
.dc-art .s1 { left: 14%; top: 10%; font-size: 1.2em; }
.dc-art .s2 { right: 12%; top: 26%; font-size: 1em; }
.pp-opts.cards .pp-opt.dc-card { padding: 4px; min-height: 0; font-size: 22px; background: #fffaf0; }
.dc-chosen { width: 140px; font-size: 32px; }
.dc-clue { margin: 0; font-family: var(--serif); font-style: italic; font-size: 5vmin; color: #fff3d6; }
.dc-table { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6vmin; }
.dc-slot { position: relative; width: 13vmin; display: flex; flex-direction: column; align-items: center; gap: .4vmin; font-size: 4vmin; }
.dc-slot > b { position: absolute; left: .6vmin; top: .6vmin; width: 3vmin; height: 3vmin; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-family: var(--num); font-size: 1.8vmin; }
.dc-slot small { font-family: var(--ui); font-size: 1.4vmin; color: var(--ivory); }
.dc-slot span { display: flex; gap: .3vmin; }
.dc-slot span i { width: 1.6vmin; height: 1.6vmin; border-radius: 50%; }
.dc-slot.teller .dc-art { box-shadow: 0 0 0 .4vmin #ffd070, 0 0 3vmin rgba(255, 210, 112, .6); }

/* ---------- This or That ---------- */
.to-vs { display: flex; align-items: stretch; gap: 2vmin; width: 100%; }
.to-side { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vmin; padding: 3vmin 2vmin; border-radius: 1.6vmin; color: #fff; box-shadow: 0 1.6vmin 3vmin rgba(0, 0, 0, .45); }
.to-side.a { background: linear-gradient(160deg, #e8574c, #b8323a); } .to-side.b { background: linear-gradient(160deg, #4a8cea, #2a5ab8); }
.to-side b { font-family: var(--display); font-weight: 700; font-size: 4.4vmin; text-align: center; line-height: 1.15; }
.to-side span { display: flex; flex-wrap: wrap; gap: .4vmin; justify-content: center; }
.to-side span i { width: 2vmin; height: 2vmin; border-radius: 50%; box-shadow: 0 0 0 .25vmin #fff; }
.to-side em { font-style: normal; font-family: var(--num); font-size: 5vmin; }
.to-side.win { box-shadow: 0 0 0 .5vmin #ffd070, 0 1.6vmin 3vmin rgba(0, 0, 0, .45); }
.to-or { align-self: center; font-family: var(--ui); font-weight: 900; font-size: 2.4vmin; color: var(--gold-ink); }
.to-bar { width: 100%; height: 1.6vmin; border-radius: 99px; background: #2a5ab8; overflow: hidden; }
.to-bar i { display: block; height: 100%; background: #e8574c; animation: mlGrow .8s cubic-bezier(.2, .9, .3, 1); transform-origin: left; }
.pp-opt.tt-a { background: rgba(232, 87, 76, .3); border-color: #e8574c; } .pp-opt.tt-b { background: rgba(74, 140, 234, .3); border-color: #4a8cea; }

/* ---------- Face Off ---------- */
.fo-cards { display: flex; align-items: center; gap: 2vmin; width: 100%; justify-content: center; }
.fo-cards.all { flex-wrap: wrap; }
.fo-card { flex: 1; max-width: 38vmin; display: flex; flex-direction: column; align-items: center; gap: 1vmin; padding: 2.4vmin 2vmin; border-radius: 1.6vmin; background: #fffaf0; color: #2a1a10; box-shadow: 0 1.6vmin 3vmin rgba(0, 0, 0, .45); animation: trPop .4s; }
.fo-cards.all .fo-card { flex: 0 0 26vmin; padding: 1.6vmin; }
.fo-card b { font-family: var(--serif); font-style: italic; font-size: 3.4vmin; text-align: center; line-height: 1.2; }
.fo-cards.all .fo-card b { font-size: 2.4vmin; }
.fo-card span { display: flex; flex-wrap: wrap; gap: .4vmin; justify-content: center; }
.fo-card span i { width: 2vmin; height: 2vmin; border-radius: 50%; }
.fo-card small { font-family: var(--ui); font-size: 1.5vmin; color: #6a5a4a; }
.fo-card.sweep { box-shadow: 0 0 0 .5vmin #ffd070, 0 1.6vmin 3vmin rgba(0, 0, 0, .45); }
.fo-vs { font-family: var(--ui); font-weight: 900; font-size: 4vmin; color: #ffd070; }
/* Symbols that draw as plain text (not colour emoji) need dark ink on the cream cards, in every style. */
.sm-card span, .pp-btns .panel-btn.sm-sym, html[data-style="vibrant"] .pp-btns .panel-btn.sm-sym { color: #1d1b2e; }