/* ===== Heat Check — one world per game ===== */

/* ---------- HOME ---------- */
[data-theme="home"] { background: radial-gradient(140% 60% at 50% -10%, #ff5a3c2e, transparent 60%), #120a12; }
.home-head { padding: 22px 18px 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.home-head .logo { font-family: "Fraunces", serif; font-weight: 900; font-size: 46px; letter-spacing: -.03em; line-height: .9;
  background: linear-gradient(180deg, #ffd166, #ff5a3c 55%, #ff2e63); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-sub { padding: 0 18px 8px; color: var(--muted); font-size: 15px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 18px 40px; }
.tile { position: relative; min-height: 168px; border-radius: 24px; padding: 14px; text-align: left; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .18s ease; isolation: isolate; }
.tile:active { transform: scale(.96) rotate(-1deg); }
.tile.wide { grid-column: span 2; min-height: 140px; }
.tile .t-name { font-size: 22px; line-height: 1; position: relative; z-index: 2; }
.tile .t-tag { font-size: 12px; opacity: .85; margin-top: 6px; position: relative; z-index: 2; }
.tile .t-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.tile.redflag { background: linear-gradient(160deg, #13296b, #0a1433); color: #fff; }
.tile.redflag .t-name { font-family: "Anton"; text-transform: uppercase; letter-spacing: .02em; }
.tile.redflag .t-art::before { content: "🚩"; position: absolute; top: 10px; left: 14px; font-size: 40px; animation: wave 1.4s ease-in-out infinite; transform-origin: 10% 90%; }
.tile.redflag .t-art::after { content: "🟢"; position: absolute; top: 18px; right: 16px; font-size: 30px; }
.tile.redflag .onair { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; background: #e11d2e; color: #fff; font: 700 10px "Inter"; letter-spacing: .15em; padding: 3px 7px; border-radius: 4px; animation: blink 1.2s steps(2) infinite; }

.tile.nhie { background: #0d0019; color: #fff; box-shadow: inset 0 0 0 2px #ff2bd6, 0 0 22px -6px #ff2bd6; }
.tile.nhie .t-name { font-family: "Monoton"; font-size: 20px; color: #ff7be6; text-shadow: 0 0 10px #ff2bd6; }
.tile.nhie .t-art::before { content: ""; position: absolute; right: 14px; top: 14px; width: 40px; height: 50px; background: linear-gradient(#ff3b3b, #b5121b); clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); border-top: 5px solid #fff; animation: tilt 2s ease-in-out infinite; }

.tile.bodypart { background: radial-gradient(60% 55% at 60% 30%, #3a3328, #050505 70%); color: #efe6d2; }
.tile.bodypart .t-name { font-family: "Playfair Display"; font-style: italic; }
.tile.bodypart .t-art::before { content: "🕶"; position: absolute; top: 14px; left: 14px; font-size: 34px; filter: grayscale(1); }

.tile.charades { background: repeating-linear-gradient(90deg, #5c0016 0 14px, #3d000e 14px 28px); color: #f6d77a; }
.tile.charades .t-name { font-family: "Limelight"; text-shadow: 0 2px 0 #000; }
.tile.charades .t-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 50% at 50% 0%, #ffe9a855, transparent 70%); }

.tile.wyr { background: linear-gradient(115deg, #e01b2b 49.5%, #fff 49.5% 50.5%, #1d4fe0 50.5%); color: #fff; }
.tile.wyr .t-name { font-family: "Bungee"; font-size: 19px; text-shadow: 2px 2px 0 #000; }
.tile.wyr .t-art::before { content: "VS"; position: absolute; top: 18px; left: 50%; transform: translateX(-50%) rotate(-8deg); font: 34px "Bungee"; color: #ffe14d; text-shadow: 3px 3px 0 #000; }

.tile.mostlikely { background: radial-gradient(#ffe14d 22%, transparent 24%) 0 0/10px 10px, #1a1a1a; color: #111; }
.tile.mostlikely .t-name { font-family: "Bangers"; font-size: 26px; letter-spacing: .03em; background: #ffe14d; padding: 4px 8px; border: 3px solid #000; transform: rotate(-2deg); align-self: flex-start; }

.tile.hotseat { background: radial-gradient(80% 60% at 50% 110%, #8a3ffc, #1b0b3a 70%); color: #fff; }
.tile.hotseat .t-name { font-family: "Syne"; font-weight: 800; }
.tile.hotseat .t-art::before { content: "🔥 🪑"; position: absolute; top: 14px; left: 14px; font-size: 30px; }

.tile.twotruths { background: radial-gradient(#145a3e, #0a3022); color: #fff; }
.tile.twotruths .t-name { font-family: "Playfair Display"; }
.tile.twotruths .t-art::before { content: "♥ ♠ ♦"; position: absolute; top: 12px; left: 14px; font-size: 26px; color: #ffeee6; letter-spacing: 6px; }

.tile.swap { background: linear-gradient(135deg, #c8b6ff, #ffd6f5, #b8f2ff, #c8b6ff); background-size: 300% 300%; animation: chrome 6s ease infinite; color: #1a1030; }
.tile.swap .t-name { font-family: "Syne"; font-weight: 800; }
.tile.swap .t-art::before { content: "SWAP"; position: absolute; top: 14px; right: 14px; font: 800 18px "Syne"; transform: scaleX(-1); opacity: .45; }

@keyframes wave { 50% { transform: rotate(-14deg); } }
@keyframes blink { 50% { opacity: .4; } }
@keyframes tilt { 50% { transform: rotate(-16deg); } }
@keyframes chrome { 50% { background-position: 100% 100%; } }

/* ---------- 1. RED FLAG / GREEN FLAG : talk-show ---------- */
[data-theme="redflag"] {
  --bg: #0a1433; --card: #13235a; --fg: #fff; --muted: #a9b7e6; --accent: #ffcf33; --accent2: #36d17a; --line: #ffffff22;
  --font-display: "Anton", Impact, sans-serif; --radius: 14px;
  background: radial-gradient(90% 40% at 15% 0%, #ffcf3322, transparent 60%), radial-gradient(90% 40% at 85% 0%, #ff4d6d22, transparent 60%), #0a1433;
}
[data-theme="redflag"] .prompt { text-transform: uppercase; letter-spacing: .01em; font-size: clamp(26px, 7.5vw, 36px); }
.lower-third { background: #fff; color: #0a1433; border-left: 10px solid #e11d2e; padding: 14px 16px; border-radius: 6px; position: relative; box-shadow: 0 14px 30px -14px #000; animation: slideL .5s cubic-bezier(.2,.9,.3,1.2) both; }
.lower-third .tag { position: absolute; top: -12px; left: 10px; background: #e11d2e; color: #fff; font: 700 11px "Inter"; letter-spacing: .14em; padding: 3px 8px; border-radius: 3px; }
@keyframes slideL { from { transform: translateX(-110%); } }
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.frame { aspect-ratio: 3/4; border-radius: 12px; background: linear-gradient(180deg, #1b2f74, #0f1d4d); border: 3px solid #ffffff22; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; transition: border-color .3s, transform .3s; }
.frame .nm { position: absolute; bottom: 8px; left: 8px; right: 8px; background: #000a; font: 700 13px "Inter"; padding: 5px 8px; border-radius: 6px; text-align: left; }
.frame .rec { position: absolute; top: 8px; left: 8px; font: 700 10px "Inter"; color: #ff4d4d; letter-spacing: .1em; }
.frame.active { border-color: var(--accent); transform: scale(1.02); }
.frame.locked .big { animation: none; }
.frame .big { font-size: 64px; line-height: 1; }
.frame .big.wave { animation: wave .7s ease-in-out infinite; transform-origin: 15% 90%; }
.flagbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flagbtn { min-height: 92px; border-radius: 16px; font: 26px "Anton"; letter-spacing: .03em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; transition: transform .1s; }
.flagbtn:active { transform: scale(.95) rotate(-2deg); }
.flagbtn.red { background: linear-gradient(#ff3b4e, #c1121f); box-shadow: 0 10px 0 #7d0b14; }
.flagbtn.green { background: linear-gradient(#3ee08a, #12a150); box-shadow: 0 10px 0 #0b6533; }
.flagbtn span { font-size: 34px; }
.verdict { font: 40px "Anton"; text-align: center; letter-spacing: .02em; animation: stamp .45s cubic-bezier(.2,.9,.3,1.6) both; }
@keyframes stamp { from { transform: scale(2.4) rotate(-10deg); opacity: 0; } }
.ratepad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ratepad button { min-height: 58px; border-radius: 12px; background: #1b2f74; font: 24px "Anton"; }
.ratepad button.on { background: var(--accent); color: #0a1433; }

/* ---------- 2. NEVER HAVE I EVER : neon house party ---------- */
[data-theme="nhie"] {
  --bg: #07000f; --card: #140026; --fg: #fff; --muted: #c9a6ff; --accent: #ff2bd6; --accent2: #00f0ff; --line: #ff2bd640;
  --font-display: "Monoton", cursive; --font-body: "Rubik", sans-serif; --btn-fg: #fff;
  background: radial-gradient(60% 40% at 20% 10%, #ff2bd633, transparent 70%), radial-gradient(60% 40% at 90% 30%, #00f0ff22, transparent 70%), #07000f;
}
[data-theme="nhie"] .hud-title { font-family: "Rubik"; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #ff7be6; text-shadow: 0 0 10px #ff2bd6; }
.neon-sign { font: 900 clamp(24px, 7vw, 32px)/1.2 "Rubik"; text-align: center; color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px #ff2bd6, 0 0 38px #ff2bd6; padding: 24px 12px; border: 3px solid #ff2bd6; border-radius: 22px; box-shadow: 0 0 18px #ff2bd6, inset 0 0 18px #ff2bd666; animation: flickerNeon 4s infinite; }
.neon-sign .nh { display: block; font: 18px "Monoton"; color: #00f0ff; text-shadow: 0 0 10px #00f0ff; margin-bottom: 8px; letter-spacing: .06em; }
@keyframes flickerNeon { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .5; } 95% { opacity: 1; } 96% { opacity: .6; } }
.cups { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 14px; margin: 26px 0 10px; }
.cup { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cup .solo { width: 70px; height: 86px; position: relative; transition: transform .5s cubic-bezier(.3,1.6,.5,1); transform-origin: 50% 100%; }
.cup .solo .body { position: absolute; inset: 0; background: linear-gradient(90deg, #a40f1a, #ff3b3b 40%, #c3141f); clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); }
.cup .solo .rim { position: absolute; top: -4px; left: -3px; right: -3px; height: 9px; background: #fff; border-radius: 4px; }
.cup .solo .ridge { position: absolute; left: 6%; right: 6%; height: 2px; background: #0003; }
.cup .solo .liquid { position: absolute; top: -10px; left: 50%; width: 0; height: 0; }
.cup.tilted .solo { transform: rotate(-38deg) translateY(-6px); }
.cup.tilted .solo .liquid::after { content: ""; position: absolute; left: -2px; top: 0; width: 8px; height: 0; background: linear-gradient(#ffd36e, #ffb703); border-radius: 4px; animation: pour .7s ease-out forwards; }
@keyframes pour { to { height: 46px; opacity: 0; } }
.cup .who { font-weight: 700; font-size: 14px; }
.cup .tally { font: 12px "Monoton"; color: #00f0ff; text-shadow: 0 0 8px #00f0ff; }
.cup.tilted .who { color: #ff7be6; }
.sips { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-weight: 900; color: #ffd36e; animation: floatUp 1.1s ease forwards; pointer-events: none; }
@keyframes floatUp { to { transform: translate(-50%, -40px); opacity: 0; } }

/* ---------- 3. GUESS THE BODY PART : noir ---------- */
[data-theme="bodypart"] {
  --bg: #050505; --card: #121110; --fg: #efe6d2; --muted: #9b9282; --accent: #e9c46a; --accent2: #c9c0ae; --line: #efe6d21f;
  --font-display: "Playfair Display", serif; --font-body: "Special Elite", "Courier New", monospace; --radius: 6px;
  background: radial-gradient(55% 40% at var(--sx, 50%) var(--sy, 35%), #3a332844, transparent 70%), #050505;
}
[data-theme="bodypart"]::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="bodypart"] .prompt { font-style: italic; }
[data-theme="bodypart"] .btn { border-radius: 4px; text-transform: uppercase; letter-spacing: .14em; font-family: "Special Elite"; }
.noir-title { font: italic 34px "Playfair Display"; text-align: center; }
.casefile { border: 1px solid #efe6d233; padding: 16px; background: #0c0b0a; position: relative; }
.casefile::before { content: "CONFIDENTIAL"; position: absolute; top: -10px; right: 12px; background: #050505; color: #b3261e; font: 12px "Special Elite"; letter-spacing: .2em; padding: 0 6px; }
.spotlight { position: fixed; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(circle at 50% 40%, transparent 120px, #000e 260px); animation: spot 6s ease-in-out infinite alternate; }
@keyframes spot { to { background-position: 30px 20px; } }
.bodymap { width: 150px; height: auto; display: block; margin: 0 auto; }
.bodymap .sil { fill: #2a2722; stroke: #efe6d255; stroke-width: 1.2; }
.bodymap .hot { fill: #e9c46a; filter: drop-shadow(0 0 6px #e9c46a); animation: hotpulse 1s ease-in-out infinite alternate; }
@keyframes hotpulse { to { r: 13; opacity: .7; } }
.hold.noir { background: #0c0b0a; border: 1px dashed #efe6d244; }
.hold.noir .cover { background: repeating-linear-gradient(45deg, #0c0b0a 0 10px, #11100e 10px 20px); font: italic 22px "Playfair Display"; }

/* ---------- 4. STRIP CHARADES : velvet cabaret ---------- */
[data-theme="charades"] {
  --bg: #1a0006; --card: #2d000c; --fg: #fbeab4; --muted: #d6b77a; --accent: #d4af37; --accent2: #ff4d6d; --line: #d4af3740;
  --font-display: "Limelight", serif; --font-body: "Playfair Display", serif; --radius: 10px;
  background: radial-gradient(45% 35% at 50% 0%, #ffe9a840, transparent 70%), repeating-linear-gradient(90deg, #3d000e 0 22px, #2a0009 22px 44px);
}
.stage { position: relative; border-radius: 12px; overflow: hidden; min-height: 280px; background: radial-gradient(50% 60% at 50% 20%, #ffe9a833, #120004 70%); border: 2px solid #d4af37; box-shadow: 0 0 0 6px #2a0009, 0 0 0 8px #d4af3788; }
.curtain { position: absolute; top: 0; bottom: 0; width: 52%; z-index: 3; background: repeating-linear-gradient(90deg, #7a0020 0 16px, #4a0012 16px 32px); box-shadow: inset 0 -30px 40px #0008; transition: transform 1.1s cubic-bezier(.6,0,.2,1); }
.curtain.l { left: 0; } .curtain.r { right: 0; }
.stage.open .curtain.l { transform: translateX(-92%); }
.stage.open .curtain.r { transform: translateX(92%); }
.stage .valance { position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 4; background: radial-gradient(circle at 50% 0, #9a0a2c 70%, transparent 71%) 0 0/36px 30px repeat-x, #7a0020; border-bottom: 2px solid #d4af37; }
.stage .inner { position: relative; z-index: 2; padding: 46px 20px 24px; text-align: center; }
.gold { font-family: "Limelight"; color: #f6d77a; background: linear-gradient(180deg, #fff3c4, #d4af37 50%, #8a6a12); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marquee { display: flex; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.marquee i { width: 9px; height: 9px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 8px #ffd56a; animation: bulbs 1s infinite; }
.marquee i:nth-child(even) { animation-delay: .5s; }
@keyframes bulbs { 50% { opacity: .25; } }
.layers { display: flex; gap: 4px; }
.layers i { width: 10px; height: 16px; border-radius: 3px; background: #d4af37; }
.layers i.off { background: #ffffff22; }
.hold.velvet { background: #120004; border: 1px solid #d4af3755; }
.hold.velvet .cover { background: radial-gradient(#5c0016, #2a0009); font: 22px "Limelight"; color: #f6d77a; }

/* ---------- 5. WOULD YOU RATHER : fighting-game VS ---------- */
[data-theme="wyr"] {
  --bg: #08080c; --card: #15151d; --fg: #fff; --muted: #a8a8c0; --accent: #ffe14d; --accent2: #ff2a2a; --line: #ffffff22;
  --font-display: "Bungee", sans-serif; --font-body: "Rubik", sans-serif; --radius: 4px;
}
.arena { position: relative; display: grid; grid-template-rows: 1fr 1fr; gap: 0; min-height: 56dvh; margin: 6px -18px 0; }
.side { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 22px 26px; font: 900 clamp(22px, 6.5vw, 30px)/1.15 "Rubik"; text-shadow: 2px 2px 0 #0006; transition: filter .3s, transform .3s; overflow: hidden; }
.side.a { background: linear-gradient(160deg, #ff3b3b, #a10d1a); clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); animation: inL .5s cubic-bezier(.2,.9,.3,1.2) both; }
.side.b { background: linear-gradient(160deg, #2a6bff, #0d2a9e); clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); margin-top: -12%; padding-top: 20%; text-align: right; animation: inR .5s cubic-bezier(.2,.9,.3,1.2) both; }
.side .tag { font: 13px "Bungee"; letter-spacing: .1em; opacity: .8; margin-bottom: 6px; }
.side.pick { filter: brightness(1.25) saturate(1.2); }
.side.dim { filter: grayscale(.8) brightness(.5); }
@keyframes inL { from { transform: translateX(-110%); } }
@keyframes inR { from { transform: translateX(110%); } }
.vs { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); z-index: 3; font: 64px "Bungee"; color: #ffe14d; text-shadow: 4px 4px 0 #000, 0 0 30px #ffe14d; animation: clash .7s .35s cubic-bezier(.2,.9,.3,1.8) both; pointer-events: none; }
@keyframes clash { from { transform: translate(-50%, -50%) scale(4) rotate(-20deg); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(.9); opacity: 1; } }
.arena.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
.hpbars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.hp { height: 18px; border: 2px solid #fff; background: #000; transform: skewX(-15deg); overflow: hidden; }
.hp i { display: block; height: 100%; transition: width .6s; }
.hp.a i { background: #ff3b3b; } .hp.b i { background: #2a6bff; margin-left: auto; }
.vsbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.vsbtn { min-height: 70px; font: 22px "Bungee"; color: #fff; transform: skewX(-8deg); border: 3px solid #fff; }
.vsbtn.a { background: #e01b2b; } .vsbtn.b { background: #1d4fe0; }
.vsbtn:active { transform: skewX(-8deg) scale(.95); }
.ko { font: 54px "Bungee"; text-align: center; color: #ffe14d; text-shadow: 4px 4px 0 #000; animation: stamp .45s cubic-bezier(.2,.9,.3,1.6) both; }

/* ---------- 6a. WHO'S MOST LIKELY TO : pop-art comic ---------- */
[data-theme="mostlikely"] {
  --bg: #141414; --card: #fff8d6; --fg: #fff; --muted: #ffe9a0; --accent: #ffe14d; --accent2: #ff4f9a; --line: #000;
  --font-display: "Bangers", cursive; --font-body: "Rubik", sans-serif; --radius: 0;
  background: radial-gradient(#ffe14d18 22%, transparent 24%) 0 0/12px 12px, #141414;
}
[data-theme="mostlikely"] .hud-title { letter-spacing: .04em; font-size: 24px; color: #ffe14d; }
.panel { background: #fff8d6; color: #111; border: 4px solid #000; box-shadow: 8px 8px 0 #ff4f9a; padding: 22px 18px; position: relative; transform: rotate(-1deg); }
.panel .bubble { font: 900 clamp(22px, 6.5vw, 30px)/1.15 "Rubik"; }
.panel .cap { position: absolute; top: -16px; left: 14px; background: #ffe14d; border: 3px solid #000; font: 20px "Bangers"; padding: 2px 10px; letter-spacing: .05em; }
.pow { font: clamp(70px, 26vw, 140px) "Bangers"; color: #ffe14d; text-align: center; -webkit-text-stroke: 4px #000; text-shadow: 8px 8px 0 #ff4f9a; animation: stamp .45s cubic-bezier(.2,.9,.3,1.6) both; }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.who-grid button { min-height: 62px; background: #ffe14d; color: #111; border: 3px solid #000; box-shadow: 4px 4px 0 #000; font: 22px "Bangers"; letter-spacing: .04em; }
.who-grid button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
[data-theme="mostlikely"] .btn { border-radius: 0; border: 3px solid #000; box-shadow: 5px 5px 0 #000; font-family: "Bangers"; font-size: 22px; letter-spacing: .05em; }

/* ---------- 6b. HOT SEAT QUIZ : game-show stage ---------- */
[data-theme="hotseat"] {
  --bg: #12062b; --card: #22104d; --fg: #fff; --muted: #c4b3ff; --accent: #ffc83d; --accent2: #8a3ffc; --line: #ffffff22;
  --font-display: "Syne", sans-serif; --radius: 18px;
  background: conic-gradient(from 180deg at 50% 120%, #8a3ffc33, transparent 20%, #ffc83d22 30%, transparent 45%, #8a3ffc33 60%, transparent 80%), #12062b;
}
[data-theme="hotseat"] h1, [data-theme="hotseat"] h2, [data-theme="hotseat"] .prompt { font-weight: 800; }
.bulb-frame { border-radius: 20px; padding: 22px; background: #1b0b3a; position: relative; border: 3px solid #ffc83d; box-shadow: 0 0 30px -6px #ffc83d; }
.bulb-frame::before { content: ""; position: absolute; inset: -9px; border-radius: 26px; background: radial-gradient(circle, #fff6cc 2px, transparent 3px) 0 0/18px 18px; opacity: .8; animation: bulbs 1.4s steps(2) infinite; z-index: -1; }
.seat-name { text-align: center; font: 800 14px "Syne"; letter-spacing: .2em; text-transform: uppercase; color: #ffc83d; }
.streak { text-align: center; font: 800 54px "Syne"; color: #ffc83d; text-shadow: 0 0 20px #ffc83d88; }

/* ---------- 6c. TWO TRUTHS & A SPICY LIE : casino felt ---------- */
[data-theme="twotruths"] {
  --bg: #0a3022; --card: #fffdf7; --fg: #fff; --muted: #b9dccb; --accent: #e8b84a; --accent2: #c8102e; --line: #ffffff26;
  --font-display: "Playfair Display", serif; --radius: 14px;
  background: radial-gradient(80% 60% at 50% 40%, #16704d, #0a3022 75%);
}
.playing { background: #fffdf7; color: #1a1a1a; border-radius: 14px; padding: 26px 20px; position: relative; box-shadow: 0 18px 40px -18px #000; animation: deal .5s cubic-bezier(.2,.9,.3,1.2) both; }
.playing::before, .playing::after { content: attr(data-suit); position: absolute; font-size: 22px; color: #c8102e; }
.playing::before { top: 10px; left: 12px; } .playing::after { bottom: 10px; right: 12px; transform: rotate(180deg); }
@keyframes deal { from { transform: translateY(-60px) rotate(-12deg); opacity: 0; } }
.chips3 { display: flex; justify-content: center; gap: 12px; margin: 18px 0; }
.chips3 button { width: 84px; height: 84px; border-radius: 50%; font: 700 15px "Playfair Display"; color: #fff; border: 6px dashed #fff8; box-shadow: 0 6px 0 #0006; }
.chips3 button:nth-child(1) { background: #c8102e; } .chips3 button:nth-child(2) { background: #1a1a1a; } .chips3 button:nth-child(3) { background: #1f5fbf; }
.chips3 button.on { outline: 4px solid #e8b84a; }

/* ---------- 6d. SWAP ROUNDS : chrome mirror ---------- */
[data-theme="swap"] {
  --bg: #0e0d16; --card: #1a1830; --fg: #f4f0ff; --muted: #b8b0e0; --accent: #c8b6ff; --accent2: #8ef2ff; --line: #ffffff22;
  --font-display: "Syne", sans-serif; --radius: 26px;
  background: radial-gradient(60% 40% at 30% 10%, #c8b6ff33, transparent), radial-gradient(60% 40% at 80% 60%, #8ef2ff22, transparent), #0e0d16;
}
.mirror { border-radius: 26px; padding: 3px; background: linear-gradient(135deg, #c8b6ff, #ffd6f5, #8ef2ff, #c8b6ff); background-size: 300% 300%; animation: chrome 5s ease infinite; }
.mirror > div { background: #12111f; border-radius: 23px; padding: 22px; }
.swapnames { display: flex; align-items: center; justify-content: center; gap: 14px; font: 800 22px "Syne"; margin: 6px 0 16px; }
.swapnames .arrow { animation: spin 2.4s ease-in-out infinite; display: inline-block; }
@keyframes spin { 50% { transform: rotate(180deg); } }
.reflect { font: 800 14px "Syne"; letter-spacing: .3em; text-align: center; color: #c8b6ff; }
.reflect::after { content: attr(data-t); display: block; transform: scaleY(-1); opacity: .25; -webkit-mask-image: linear-gradient(transparent 30%, #000); mask-image: linear-gradient(transparent 30%, #000); }