:root { --bg:#032A6B; --bg2:#04347E; --card:#0b3f93; --card2:#1457c4; --accent:#FFC21A; --yellow:#FFE45A; --orange:#FF9A0A; --cyan:#3DE0F5; --navy:#0a2a5e; --ok:#2ecc71; --bad:#e74c3c; --txt:#fff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg) radial-gradient(ellipse at 50% 0%, var(--bg2) 0%, var(--bg) 70%) fixed; color:var(--txt); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; min-height:100vh; }
#app { max-width:640px; margin:0 auto; padding:16px; }
.card { background:linear-gradient(180deg,#0e48a8,var(--card)); border:1px solid rgba(110,200,255,.28); border-radius:18px; padding:20px; margin:16px 0; box-shadow:0 5px 0 rgba(2,18,56,.55); }
input, button { font:inherit; border-radius:14px; border:0; padding:14px; width:100%; margin:6px 0; }
input { background:#fff; color:var(--navy); text-align:center; font-weight:600; outline:3px solid transparent; transition:outline-color .15s; }
input:focus { outline-color:var(--cyan); }
button { background:linear-gradient(180deg,var(--yellow),var(--orange)); color:var(--navy); font-weight:800; cursor:pointer; box-shadow:0 5px 0 #b86a00; transition:transform .08s, box-shadow .08s; }
button:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 #b86a00; }
button.secondary { background:linear-gradient(180deg,#3b8cf0,#1a5bc4); color:#fff; box-shadow:0 5px 0 #0c3a85; }
button.secondary:active:not(:disabled) { box-shadow:0 1px 0 #0c3a85; }
button:disabled { opacity:.5; cursor:default; }
.code { font-size:3rem; letter-spacing:.3em; text-align:center; color:var(--yellow); font-weight:900; text-shadow:0 0 18px rgba(61,224,245,.7), 0 3px 0 var(--navy); }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice { min-height:90px; color:#fff; }
.choice:nth-child(1){background:#e21b3c} .choice:nth-child(2){background:#1368ce}
.choice:nth-child(3){background:#d89e00} .choice:nth-child(4){background:#26890c}
.choice.picked { outline:4px solid #fff; } .choice.right { outline:4px solid var(--ok); }
.choice.dim { opacity:.35; }
.timer { height:10px; background:rgba(2,18,56,.6); border-radius:6px; overflow:hidden; }
.timer > div { height:100%; background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--orange)); width:100%; }
ol { padding-left:24px; } li { padding:4px 0; }
.plist { list-style:none; padding:0; margin:10px 0 0; counter-reset:rank; }
.plist li { display:flex; align-items:center; gap:10px; padding:5px 0; counter-increment:rank; }
.plist li::before { content:counter(rank); width:1.3em; text-align:right; font-weight:800; opacity:.75; }
.plist .pn { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; } .plist .ps { font-weight:800; font-variant-numeric:tabular-nums; }
.err { color:#ff8a80; text-align:center; min-height:1.4em; }
.muted { opacity:.7; text-align:center; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
.chip { width:auto; margin:0; padding:9px 14px; background:var(--card2); color:#fff; font-weight:700; border:2px solid rgba(110,200,255,.3); box-shadow:none; }
.chip:active:not(:disabled) { transform:none; box-shadow:none; }
.chip.on { background:linear-gradient(180deg,var(--yellow),var(--orange)); color:var(--navy); border-color:#fff3; } .chip.small { font-size:.85rem; padding:6px 10px; background:#0d3f94; }
.chip:disabled { opacity:.3; }
.qv { display:flex; justify-content:center; margin-top:8px; }
.qv svg { width:150px; height:150px; } .qv img { width:230px; height:230px; object-fit:contain; } .qv .emo { font-size:110px; line-height:1.1; }
.say { width:auto; display:inline; padding:2px 10px; margin:0 0 0 6px; font-size:1.1rem; background:var(--card2); box-shadow:none; }
.choice.pic { background:#fff; box-shadow:none; border:6px solid; display:flex; align-items:center; justify-content:center; min-height:110px; }
.choice.pic:nth-child(1){border-color:#e21b3c} .choice.pic:nth-child(2){border-color:#1368ce}
.choice.pic:nth-child(3){border-color:#d89e00} .choice.pic:nth-child(4){border-color:#26890c}
.choice.pic svg, .choice.pic img { width:80px; height:80px; object-fit:contain; } .choice.pic .emo { font-size:64px; line-height:1; }
.choice.pic.picked { outline-color:#555; }

#mute { border:1px solid rgba(110,200,255,.35); position:fixed; top:10px; right:10px; width:44px; height:44px; padding:0; margin:0; border-radius:50%; background:var(--card2); color:#fff; font-size:1.3rem; z-index:10; box-shadow:0 3px 0 rgba(2,18,56,.6); }
.st-title { text-align:center; margin:4px 0 14px; }
.board { position:relative; margin-bottom:16px; }
.srow { position:absolute; left:0; right:0; height:54px; display:flex; align-items:center; gap:12px; padding:0 14px; background:linear-gradient(180deg,#0e48a8,var(--card)); border:1px solid rgba(110,200,255,.25); border-radius:14px;
  transition:transform .9s cubic-bezier(.3,1.2,.4,1), background .4s, box-shadow .4s; }
.srow.me { outline:2px solid var(--yellow); }
.srow.leader { background:#5b4a00; box-shadow:0 0 18px #ffb70388; }
.srow.moved-up { background:#164d2b; } .srow.moved-down { background:#4d1b1b; }
.srow.leader.moved-up { background:#5b4a00; }
.rk { position:relative; width:42px; height:36px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.25rem; perspective:200px; overflow:visible; }
.rkn { display:inline-block; }
.rkn.flip-up { animation:flipUp .7s cubic-bezier(.2,.9,.3,1.2); } .rkn.flip-down { animation:flipDown .7s cubic-bezier(.2,.9,.3,1.2); }
@keyframes flipUp   { 0% { transform:translateY(120%) rotateX(-95deg); opacity:0; } 100% { transform:none; opacity:1; } }
@keyframes flipDown { 0% { transform:translateY(-120%) rotateX(95deg); opacity:0; } 100% { transform:none; opacity:1; } }
.arrow { position:absolute; right:-6px; top:-6px; font-size:.8rem; animation:pop .5s; } .arrow.up { color:#2ecc71; } .arrow.down { color:#ff6b6b; }
@keyframes pop { 0% { transform:scale(0); } 70% { transform:scale(1.4); } 100% { transform:scale(1); } }
.nm { flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nm small { opacity:.6; font-weight:400; }
.pts { position:relative; min-width:64px; display:flex; justify-content:flex-end; font-weight:800; font-variant-numeric:tabular-nums; }
.gain { position:absolute; right:100%; margin-right:10px; top:50%; margin-top:-.7em; white-space:nowrap; color:#7dffa6; font-size:.85rem; font-weight:700; transition:opacity .5s, transform .5s; } .gain.go { opacity:0; transform:translateY(-8px); }

/* ---- brand: full logo on the title screen, compact bulb + wordmark everywhere else ---- */
.hero { display:flex; justify-content:center; margin:0 -16px; overflow:hidden; }
.hero img { width:128%; max-width:560px; height:auto; display:block; margin:-26px 0 -34px; animation:bob 4.5s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 50%, #000 62%, transparent 100%); mask-image:radial-gradient(ellipse 60% 58% at 50% 50%, #000 62%, transparent 100%); }
@keyframes bob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
.tagline { position:relative; z-index:1; text-align:center; margin:-2px 0 6px; font-weight:800; color:var(--cyan); letter-spacing:.04em; text-shadow:0 2px 0 var(--navy); }
.brand { display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 0 8px; }
.brand img { width:46px; height:46px; filter:drop-shadow(0 0 10px rgba(255,214,60,.55)); }
.brand span { font-family:'Arial Rounded MT Bold','Baloo 2','Nunito',system-ui,sans-serif; font-weight:900; font-size:1.9rem; letter-spacing:.02em; text-transform:uppercase;
  background:linear-gradient(180deg,var(--yellow) 25%,var(--orange) 85%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(2px 0 0 var(--navy)) drop-shadow(-2px 0 0 var(--navy)) drop-shadow(0 2px 0 var(--navy)) drop-shadow(0 -2px 0 var(--navy)) drop-shadow(0 4px 0 #021a45); }

.rdy { opacity:0; transform:scale(.4); transition:opacity .25s, transform .25s; width:24px; height:24px; border-radius:50%; background:#2ecc71; color:#06331a; font-weight:900; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.srow.isready .rdy { opacity:1; transform:scale(1); }
#ready.waiting { background:linear-gradient(180deg,#2fd27b,#1a9e56); color:#fff; box-shadow:0 5px 0 #0e6b38; opacity:1; }
#ready:disabled:not(.waiting) { opacity:.45; }
button.small { padding:9px; font-size:.85rem; }
#rdycount { margin:10px 0 4px; font-weight:700; }

/* ---- game-type picker ---- */
.modecard { display:flex; align-items:center; gap:14px; text-align:left; padding:18px; margin:12px 0; }
.modecard .mi { font-size:2.6rem; line-height:1; } .modecard b { display:block; font-size:1.25rem; } .modecard small { display:block; font-weight:600; opacity:.8; margin-top:2px; }
.modecard[data-mode="mini"] { background:linear-gradient(180deg,#5fe3f5,#1fa9d6); box-shadow:0 5px 0 #0c6f93; }
.modecard[data-mode="mini"]:active { box-shadow:0 1px 0 #0c6f93; }
.chip.static { cursor:default; display:inline-block; border-radius:14px; }
/* ---- mini games: countdown ---- */
.cd-card { text-align:center; } .cd-card h2 { margin:6px 0; } .cd-card p { margin:0; opacity:.85; } .cd-icon { font-size:3rem; }
.cd-num { text-align:center; font-weight:900; font-size:11rem; line-height:1.1; min-height:13rem; color:var(--yellow);
  font-family:'Arial Rounded MT Bold','Baloo 2','Nunito',system-ui,sans-serif; text-shadow:0 6px 0 var(--navy), 0 0 40px rgba(61,224,245,.6); }
.cd-num.go { font-size:7.5rem; color:#7dffa6; padding-top:1.6rem; }
.cd-num.pulse { animation:cdpulse .9s cubic-bezier(.2,1.4,.4,1); }
@keyframes cdpulse { 0% { transform:scale(2.2); opacity:0; } 35% { transform:scale(1); opacity:1; } 80% { transform:scale(.96); opacity:1; } 100% { transform:scale(.8); opacity:.25; } }
/* ---- mini games: whack-a-mole ---- */
.hud { display:flex; justify-content:space-between; font-weight:800; margin:10px 2px; font-size:1.1rem; } #myhits { color:var(--yellow); }
.field { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.hole { position:relative; aspect-ratio:1; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.18); box-shadow:0 5px 0 rgba(2,18,56,.55);
  background:radial-gradient(circle at 20% 22%, #55c96a 0 3%, transparent 4%), radial-gradient(circle at 78% 14%, #55c96a 0 2.5%, transparent 3.5%), radial-gradient(circle at 88% 46%, #2a8c3f 0 3%, transparent 4%), linear-gradient(180deg,#3fb856,#237a35); }
/* dirt mound with a dark opening; the mole is clipped to the opening's lower rim, so it really comes out of the hole */
.mound { position:absolute; left:2%; width:96%; bottom:3%; height:40%; border-radius:50% 50% 44% 44% / 78% 78% 22% 22%;
  background:radial-gradient(circle at 18% 62%, #a8774a 0 4%, transparent 5%), radial-gradient(circle at 80% 70%, #5e3a1f 0 4%, transparent 5%), radial-gradient(circle at 50% 88%, #a8774a 0 3%, transparent 4%), linear-gradient(180deg,#9a6a3e,#6f4626 70%,#5a371c);
  box-shadow:inset 0 -5px 0 #4a2d16, 0 3px 5px #0005; }
.pit { position:absolute; left:13%; width:74%; bottom:17%; height:20%; border-radius:50%; background:radial-gradient(ellipse at 50% 30%, #000, #24140a); box-shadow:inset 0 5px 8px #000, 0 -2px 0 #b7875a; }
.burrow { position:absolute; left:13%; width:74%; top:-30%; bottom:17%; overflow:hidden; border-radius:0 0 50% 50% / 0 0 8.8% 8.8%; pointer-events:none; }
.mole { position:absolute; left:6%; width:88%; aspect-ratio:100/140; bottom:-17%; transform:translateY(112%); transition:transform .16s ease-out, filter .2s; pointer-events:auto;
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.mole.up { transform:translateY(0); }
.mfur { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mface { position:absolute; left:23%; width:54%; top:5.5%; aspect-ratio:156/200; border-radius:50%; background:#c89a6b url(/img/bulb.png) center/cover no-repeat; }
.mole.tapped { transform:translateY(4%) scale(.96); }
.mole.bonked { transform:translateY(22%) scale(1.04,.82); pointer-events:none; }
.mole.bonked.theirs { filter:grayscale(1) brightness(.75); }
.tag { position:absolute; top:4%; left:50%; transform:translateX(-50%); padding:2px 9px; border-radius:10px; font-weight:900; font-size:.85rem; white-space:nowrap; background:var(--navy); color:#fff; animation:tagup .6s ease-out forwards; pointer-events:none; z-index:2; }
.tag.mine { background:#2ecc71; color:#06331a; font-size:1.1rem; }
@keyframes tagup { 0% { opacity:0; margin-top:14px; } 25% { opacity:1; } 100% { opacity:0; margin-top:-8px; } }

/* ---- open-games browser + lobby title ---- */
.gname { text-align:center; font-size:1.7rem; font-weight:900; color:var(--yellow); text-shadow:0 0 18px rgba(61,224,245,.6), 0 3px 0 var(--navy); overflow:hidden; text-overflow:ellipsis; }
.card.game { display:flex; align-items:center; gap:12px; padding:14px; margin:12px 0; }
.game .gi { font-size:2.2rem; line-height:1; } .game .gt { flex:1; min-width:0; }
.game .gt b { display:block; font-size:1.1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .game .gt small { opacity:.8; }
.game .joinbtn { width:auto; margin:0; padding:11px 16px; white-space:nowrap; }

/* ---- wrong answer: full-screen red X ---- */
.bigx { position:fixed; inset:0; z-index:50; pointer-events:none; display:flex; align-items:center; justify-content:center; background:rgba(160,0,0,.28); animation:bigx 1.9s ease-out forwards; }
.bigx svg { position:absolute; inset:4% 4%; width:92%; height:92%; overflow:visible; filter:drop-shadow(0 0 18px rgba(255,0,0,.8)); }
.bigx line { stroke:#ff1a1a; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-width:44px; }
.bigx span { position:relative; font-weight:900; font-size:3rem; color:#fff; text-transform:uppercase; letter-spacing:.04em; text-shadow:0 4px 0 #7a0000, 0 0 24px #000; font-family:'Arial Rounded MT Bold','Baloo 2','Nunito',system-ui,sans-serif; }
@keyframes bigx { 0% { opacity:0; transform:scale(1.6); } 9% { opacity:1; transform:scale(1); } 70% { opacity:1; } 100% { opacity:0; } }
#app.shake { animation:shake .45s; }
@keyframes shake { 0%,100% { transform:translateX(0); } 15% { transform:translateX(-12px); } 30% { transform:translateX(11px); } 45% { transform:translateX(-9px); } 60% { transform:translateX(7px); } 80% { transform:translateX(-4px); } }

.chips.modes { justify-content:center; margin:12px 0 0; } .chips.modes .chip { flex:1; }

/* ---- player head shots ---- */
.face { width:34px; aspect-ratio:156/200; object-fit:cover; border-radius:50%; flex:none; background:#0d3f94; border:2px solid #fff; box-shadow:0 2px 4px #0006; }
.face.mid { width:46px; } .face.big { width:84px; border-width:3px; } .face.huge { width:190px; border-width:5px; border-color:var(--yellow); }
.mepic { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:10px; }
.shot { display:flex; justify-content:center; margin:8px 0 18px; }
/* ---- camera ---- */
.cam { position:relative; width:100%; max-width:320px; aspect-ratio:3/4; margin:0 auto 14px; border-radius:20px; overflow:hidden; background:#000; border:3px solid rgba(110,200,255,.5); }
.cam video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:block; }
.camov { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.camhint { position:absolute; left:0; right:0; bottom:10px; text-align:center; font-weight:800; text-shadow:0 2px 4px #000; padding:0 10px; } .camhint.warn { color:#ffd0d0; }
.filebtn { display:block; text-align:center; padding:11px; margin:6px 0; border-radius:14px; font-weight:700; font-size:.9rem; color:#fff; background:#0d3f94; border:2px solid rgba(110,200,255,.3); cursor:pointer; }

/* ---- finale: podium cutscene ---- */
.stage { position:relative; height:290px; margin:6px 0 16px; overflow:hidden; border-radius:18px; background:linear-gradient(180deg,#0a3a8c 0%,#0e48a8 70%,#123f86 70%,#0b2f6b 100%); border:1px solid rgba(110,200,255,.28); }
.block { position:absolute; bottom:0; width:30%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4px;
  background:linear-gradient(180deg,#fff,#d7e2f2); color:var(--navy); border-radius:10px 10px 0 0; box-shadow:inset 0 -6px 0 #b9c7dc, 0 0 0 2px #0a2a5e33; overflow:hidden; }
.block b { font-size:1.5rem; font-weight:900; line-height:1; } .block small { font-weight:700; font-size:.75rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toon { position:absolute; bottom:0; width:64px; margin-left:-32px; z-index:2; }
.toon-in { display:flex; flex-direction:column; align-items:center; }
.face.thead { width:50px; border-width:3px; position:relative; z-index:1; }
.tbody { width:64px; display:block; margin-top:-7px; overflow:visible; position:relative; z-index:2; }
.tbody line { stroke:#f2c9a0; stroke-width:7; stroke-linecap:round; } .tbody .leg line { stroke:#27407a; }
.tbody circle { fill:#f2c9a0; } .tbody ellipse { fill:#161616; } .tbody .torso { fill:var(--shirt); stroke:#0000002e; stroke-width:1.5; }
.arm.l { transform-origin:18px 11px; transform:rotate(16deg); } .arm.r { transform-origin:42px 11px; transform:rotate(-16deg); }
.leg.l { transform-origin:25px 36px; } .leg.r { transform-origin:35px 36px; }
.arm, .leg { transition:transform .25s; }
.walking .leg.l, .walking .arm.r { animation:swingA .46s ease-in-out infinite alternate; }
.walking .leg.r, .walking .arm.l { animation:swingB .46s ease-in-out infinite alternate; }
@keyframes swingA { from { transform:rotate(-32deg); } to { transform:rotate(32deg); } }
@keyframes swingB { from { transform:rotate(32deg); } to { transform:rotate(-32deg); } }
.walking .toon-in { animation:stepbob .23s ease-in-out infinite alternate; }
@keyframes stepbob { from { transform:translateY(0); } to { transform:translateY(-4px); } }
.hop .toon-in { animation:hop .42s ease-out; }
@keyframes hop { 0% { transform:translateY(0) scaleY(.9); } 45% { transform:translateY(-30px) scaleY(1.06); } 100% { transform:translateY(0); } }
.cheer .arm.l { animation:waveL .32s ease-in-out infinite alternate; } .cheer .arm.r { animation:waveR .32s ease-in-out infinite alternate; }
@keyframes waveL { from { transform:rotate(128deg); } to { transform:rotate(152deg); } }
@keyframes waveR { from { transform:rotate(-128deg); } to { transform:rotate(-152deg); } }
.cheer .toon-in { animation:jump .4s ease-out infinite alternate; }
@keyframes jump { from { transform:translateY(0); } to { transform:translateY(-20px); } }
.clap .arm.l { animation:clapL .28s ease-in-out infinite alternate; } .clap .arm.r { animation:clapR .28s ease-in-out infinite alternate; }
@keyframes clapL { from { transform:rotate(-38deg); } to { transform:rotate(-62deg); } }
@keyframes clapR { from { transform:rotate(38deg); } to { transform:rotate(62deg); } }
.confetti { position:absolute; top:-14px; width:8px; height:13px; border-radius:2px; z-index:3; animation:fall linear 2 both; pointer-events:none; }
@keyframes fall { 0% { top:-14px; opacity:1; } 100% { top:105%; opacity:.9; margin-left:24px; } }

/* ---- whack-a-mole: empty-square penalty ---- */
.missx { position:absolute; inset:0; z-index:4; pointer-events:none; display:flex; align-items:center; justify-content:center; background:rgba(170,0,0,.38); animation:missin .18s ease-out; }
.missx svg { position:absolute; inset:8%; width:84%; height:84%; filter:drop-shadow(0 0 6px rgba(255,0,0,.8)); }
.missx line { stroke:#ff1f1f; stroke-width:15; stroke-linecap:round; }
.missx b { position:relative; font-size:2.1rem; font-weight:900; color:#fff; text-shadow:0 0 6px #7a0000, 0 3px 0 #7a0000, 2px 0 0 #7a0000, -2px 0 0 #7a0000, 0 -2px 0 #7a0000; font-family:'Arial Rounded MT Bold','Baloo 2','Nunito',system-ui,sans-serif; }
@keyframes missin { from { transform:scale(1.5); opacity:0; } to { transform:scale(1); opacity:1; } }
.field.locked .hole:not(:has(.mole)) { filter:saturate(.55) brightness(.82); }   /* only empty squares look locked; moles stay bright and tappable */
.gain.neg { color:#ff8a8a; }

/* ---- RC Mayhem ---- */
#rcv { width:100%; display:block; border-radius:16px; background:#6fb7ee; border:1px solid rgba(255,255,255,.25); touch-action:none; }
.rcpad { display:flex; gap:12px; margin-top:12px; touch-action:none; user-select:none; -webkit-user-select:none; }
.rcbtn { flex:1; height:112px; margin:0; font-size:2.1rem; letter-spacing:.04em; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.rcbtn.go { background:linear-gradient(180deg,#5fe88a,#1fae52); color:#053a1a; box-shadow:0 6px 0 #0e6b38; flex:1.35; }
.rcbtn.jump { background:linear-gradient(180deg,#6bb5ff,#2a6fe0); color:#fff; box-shadow:0 6px 0 #123f94; }
.rcbtn.held { transform:translateY(5px); box-shadow:0 1px 0 #0003; filter:brightness(1.12); }
.rchud { padding-right:52px; }   /* keep clear of the sound button */
#rcnote { color:#ff9f9a; }

/* ---- Picture This ---- */
.cd-who { margin-top:10px !important; font-weight:800; color:var(--yellow); opacity:1 !important; }
.pichead { text-align:center; margin:6px 0 8px; min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-right:48px; padding-left:48px; }
.picword { font-size:2.2rem; letter-spacing:.12em; color:var(--yellow); text-shadow:0 3px 0 var(--navy); line-height:1.1; }
.lts { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; } .gap { width:16px; }
.lt { width:26px; height:34px; border-bottom:5px solid #fff; display:flex; align-items:flex-end; justify-content:center; font-weight:900; font-size:1.5rem; line-height:1; padding-bottom:2px; }
.lt.shown { color:var(--yellow); border-color:var(--yellow); animation:pop .4s; }
.small { font-size:.8rem; margin-top:3px; }
.easel { display:flex; justify-content:center; }
#pcv { background:#fff; border-radius:14px; border:3px solid #cfd8e8; box-shadow:0 5px 0 rgba(2,18,56,.55); touch-action:none; display:block; }
.stagerow { position:relative; margin-top:2px; padding-top:80px; }
.artist { position:absolute; left:50%; top:-24px; width:80px; margin-left:-40px; transition:left .22s ease-out; z-index:3; pointer-events:none; }
.artist .toon-in { transform:scale(.88); transform-origin:50% 100%; }
.artist .face.thead { width:44px; } .artist .tbody { width:56px; }
.artist .marker { stroke:#e53935; stroke-width:4; stroke-linecap:round; }
.artist .arm.r { transform-origin:42px 11px; transform:rotate(-150deg); }
.artist.drawing .arm.r { animation:scribble .22s ease-in-out infinite alternate; }
@keyframes scribble { from { transform:rotate(-136deg); } to { transform:rotate(-166deg); } }
.audience { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; padding:4px 4px 4px; min-height:56px; align-items:flex-end; }
.aud { position:relative; animation:sway var(--t) ease-in-out var(--d) infinite alternate; }
.aud .face.audface { width:36px; } .aud.me .face { border-color:var(--yellow); }
@keyframes sway { from { transform:translate(calc(var(--x) * -1), 0) rotate(calc(var(--r) * -1)); } to { transform:translate(var(--x), -5px) rotate(var(--r)); } }
.aud .chk { position:absolute; right:-5px; top:-6px; width:18px; height:18px; border-radius:50%; background:#2ecc71; color:#06331a; font-weight:900; font-size:.7rem; display:flex; align-items:center; justify-content:center; transform:scale(0); transition:transform .25s; }
.aud.got .chk { transform:scale(1); } .aud.hop { animation:sway var(--t) ease-in-out var(--d) infinite alternate, hopup .6s; }
@keyframes hopup { 0%,100% { margin-top:0; } 40% { margin-top:-18px; } }
.feed { min-height:64px; margin:2px 2px 4px; font-size:.92rem; display:flex; flex-direction:column; justify-content:flex-end; }
.fl { padding:1px 0; opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fl.ok { color:#7dffa6; } .fl.sys { color:var(--cyan); }
.guessbar { display:flex; gap:8px; } .guessbar input { flex:1; margin:0; text-align:left; font-size:1.05rem; } .guessbar button { width:auto; margin:0; padding:0 20px; }
.gotit { text-align:center; padding:12px; border-radius:14px; background:#16603a; border:1px solid #2ecc71; font-weight:700; }
.tools { background:rgba(2,18,56,.35); border-radius:14px; padding:8px; }
.pal { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.sw { width:34px; height:34px; padding:0; margin:0; border-radius:50%; border:3px solid #fff5; box-shadow:none; font-size:1rem; color:#444; } .sw.on { border-color:#fff; transform:scale(1.18); } .sw:active:not(:disabled) { transform:scale(1.1); box-shadow:none; }
.pal2 { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:8px; }
.sz { display:flex; gap:6px; } .szb { width:40px; height:34px; padding:0; margin:0; background:#0d3f94; box-shadow:none; display:flex; align-items:center; justify-content:center; border:2px solid transparent; } .szb.on { border-color:var(--yellow); }
.szb i { display:block; background:#fff; border-radius:50%; }
.tl { width:auto; margin:0; padding:7px 12px; font-size:.85rem; background:#0d3f94; color:#fff; box-shadow:none; } .tl:active:not(:disabled) { box-shadow:none; transform:none; }
.reveal { text-align:center; } .revword { font-size:1.9rem; font-weight:900; letter-spacing:.1em; color:var(--yellow); text-shadow:0 3px 0 var(--navy); } .reveal img { width:170px; border-radius:10px; margin-top:6px; border:2px solid #cfd8e8; }

/* ---- reconnecting / away ---- */
#reconn { position:fixed; top:0; left:0; right:0; z-index:60; text-align:center; padding:9px; font-weight:800; background:#b36b00; color:#fff; box-shadow:0 3px 8px #0008; animation:pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity:.75; } to { opacity:1; } }
.plist li.away, .srow.away { opacity:.45; }

/* ---- Hot Potato ---- */
.ring { position:relative; width:min(100%,440px); aspect-ratio:1; margin:6px auto; }
.bh { position:absolute; transform:translate(-50%,-50%); width:calc(var(--hs) + 14px); margin:0; padding:0; background:none; box-shadow:none; display:flex; flex-direction:column; align-items:center; gap:1px; color:#fff; }
.bh:active:not(:disabled) { transform:translate(-50%,-50%); box-shadow:none; }
.bh .face.bface { width:var(--hs); }
.bn { font-size:.7rem; font-weight:800; text-shadow:0 1px 3px #000, 0 0 4px #000; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bh.me .face { border-color:var(--yellow); }
.bh.has .face { box-shadow:0 0 0 4px #ff9a0a, 0 0 22px #ff5a1a; }
.bh.target .face { animation:tpulse .6s ease-in-out infinite alternate; border-color:#7dffa6; cursor:pointer; }
@keyframes tpulse { from { transform:scale(1); } to { transform:scale(1.1); } }
.bh.out { opacity:.55; } .bh.out .face { filter:grayscale(1) brightness(.5); } .bh.out::after { content:'💀'; position:absolute; top:6%; font-size:calc(var(--hs) * .5); }
.bh.boom::before { content:'💥'; position:absolute; top:-10%; font-size:calc(var(--hs) * 1.2); z-index:5; animation:boom 1.1s ease-out forwards; pointer-events:none; }
@keyframes boom { 0% { transform:scale(.2); opacity:1; } 30% { transform:scale(1.2); opacity:1; } 100% { transform:scale(1.8); opacity:0; } }
.bomb { position:absolute; width:48px; height:48px; font-size:2.5rem; line-height:1; text-align:center; transform:translate(-50%,-135%); z-index:4; pointer-events:none;
  transition:left .3s cubic-bezier(.3,1.3,.5,1), top .3s cubic-bezier(.3,1.3,.5,1), opacity .2s; filter:drop-shadow(0 3px 3px #0008); }
.bomb::after { content:'✨'; position:absolute; right:-6px; top:-8px; font-size:1.1rem; animation:spark .35s steps(2) infinite; }
@keyframes spark { 50% { opacity:.2; transform:scale(.7); } }
.bomb.hot { animation:bombhot .11s linear infinite; filter:drop-shadow(0 0 10px #ff2a2a) drop-shadow(0 0 4px #ff2a2a); }
@keyframes bombhot { 0% { margin-left:-2px; } 50% { margin-left:2px; } 100% { margin-left:-2px; } }
.bomb.gone { opacity:0; }
.rmsg { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-weight:900; font-size:1.3rem; text-shadow:0 2px 4px #000; pointer-events:none; padding:0 18%; }
#bstat.mine { color:#ffd35a; animation:pulse 0.5s ease-in-out infinite alternate; }
/* ---- Copy Cat ---- */
.pads { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px auto; max-width:400px; }
.pad { aspect-ratio:1; margin:0; border-radius:24px; font-size:3.6rem; color:rgba(255,255,255,.9); border:4px solid rgba(255,255,255,.4); filter:brightness(.55) saturate(.85); transition:filter .08s, transform .08s, box-shadow .08s; box-shadow:0 6px 0 rgba(0,0,0,.35); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.pad:disabled { opacity:1; } .pad:not(:disabled) { filter:brightness(.92) saturate(1); }
.pad.p0 { background:#2ecc71; } .pad.p1 { background:#e74c3c; } .pad.p2 { background:#f1c40f; } .pad.p3 { background:#3498db; }
.pad.lit { filter:brightness(1.5) saturate(1.3); transform:scale(1.05); box-shadow:0 0 34px 6px rgba(255,255,255,.55), 0 6px 0 rgba(0,0,0,.35); }
.pad:active:not(:disabled) { transform:scale(.97); box-shadow:0 2px 0 rgba(0,0,0,.35); }
#ccstat.mine { color:var(--yellow); } #ccstat.ok { color:#7dffa6; }
.ccwho { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px; margin-top:8px; }
.cw { position:relative; } .cw .face.cwface { width:34px; } .cw.out .face { filter:grayscale(1) brightness(.5); } .cw.out { opacity:.6; }
.cwm { position:absolute; right:-6px; top:-6px; min-width:18px; height:18px; border-radius:50%; font-size:.7rem; font-weight:900; display:flex; align-items:center; justify-content:center; }
.cw.done .cwm { background:#2ecc71; color:#06331a; } .cw.out .cwm { background:#e74c3c; color:#fff; }

/* ---- Copy Cat leaderboard ---- */
.pads { max-width:310px; gap:10px; }
.pad { font-size:2.8rem; border-radius:20px; }
.cclb-h { display:flex; justify-content:space-between; align-items:baseline; margin:12px 4px 6px; font-weight:800; }
.cclb { position:relative; }
.srow.cc { height:42px; padding:0 10px; gap:9px; }
.srow.cc .face.cwface { width:28px; }
.srow.cc .rk { width:28px; height:30px; font-size:1.05rem; }
.srow.cc .nm { font-size:.95rem; }
.srow.cc .pts { font-size:1.1rem; min-width:34px; }
.ccs { font-size:.8rem; font-weight:700; white-space:nowrap; opacity:.9; }
.ccs.wait { color:#ffd35a; animation:pulse .8s ease-in-out infinite alternate; }
.ccs.done { color:#7dffa6; opacity:1; animation:pop .45s; } .ccs.done b { background:#2ecc71; color:#06331a; border-radius:8px; padding:1px 6px; margin-left:3px; }
.ccs.out { color:#ff9a9a; }
.srow.cc.isout { opacity:.5; }

/* ---- Pie Fight ---- */
#pfv { display:block; margin:6px auto 0; border-radius:14px; touch-action:none; box-shadow:0 5px 0 rgba(2,18,56,.55); }
.pfpad { display:flex; gap:12px; margin-top:12px; touch-action:none; user-select:none; -webkit-user-select:none; }
.pfmoves { display:flex; gap:10px; flex:1.25; }
.pfb { flex:1; height:92px; margin:0; font-size:2.2rem; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; position:relative; overflow:hidden; }
.pfb.mv { background:linear-gradient(180deg,#6bb5ff,#2a6fe0); color:#fff; box-shadow:0 6px 0 #123f94; }
.pfb.throw { font-size:1.45rem; letter-spacing:.03em; flex:1; }
.pfb.throw::after { content:''; position:absolute; left:0; right:0; bottom:0; height:var(--cd, 0%); background:rgba(40,20,0,.5); pointer-events:none; }
.pfb.throw.cool { filter:saturate(.7); }
.pfb.held { transform:translateY(5px); box-shadow:0 1px 0 #0003; filter:brightness(1.12); }

/* ---- Number Sniper ---- */
#nsv { display:block; margin:6px auto 0; border-radius:14px; box-shadow:0 5px 0 rgba(2,18,56,.55); touch-action:none; }
.nsfeed { min-height:52px; margin:4px 2px 2px; font-size:.88rem; display:flex; flex-direction:column; justify-content:flex-end; }
.nsfeed .fl { padding:1px 0; opacity:.9; } .nsfeed .fl.me { color:var(--yellow); font-weight:700; opacity:1; }
.nsin { display:flex; align-items:center; gap:12px; margin:2px 0 8px; }
.nsboxes { display:flex; gap:6px; } .nb { width:42px; height:50px; border-radius:10px; background:#0a1c3c; border:2px solid rgba(110,200,255,.35); display:flex; align-items:center; justify-content:center; font:800 1.7rem ui-monospace,Menlo,monospace; color:#7dffa6; }
.nb.on { border-color:var(--yellow); box-shadow:0 0 10px rgba(255,211,90,.5); }
.nsmsg { flex:1; font-weight:700; font-size:.92rem; line-height:1.2; opacity:.9; } .nsmsg.bad { color:#ff9a9a; } .nsmsg.ok { color:#7dffa6; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:340px; margin:0 auto; touch-action:manipulation; transition:opacity .15s; }
.keypad button { margin:0; height:52px; font-size:1.5rem; background:linear-gradient(180deg,#3b8cf0,#1a5bc4); color:#fff; box-shadow:0 4px 0 #0c3a85; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.keypad button.kb { background:linear-gradient(180deg,#5a6b8c,#3d4c6b); box-shadow:0 4px 0 #26324a; }
.keypad button.held { transform:translateY(3px); box-shadow:0 1px 0 #0003; }
.keypad.off { opacity:.4; pointer-events:none; }
.nslog ol { padding-left:0; list-style:none; margin:8px 0; } .nslog li { padding:3px 0; font-size:.95rem; } .nslog .nt { opacity:.6; font-variant-numeric:tabular-nums; margin-right:6px; }
.nslog .np { color:#7dffa6; font-weight:800; } .nslog .nstop { margin-top:8px; padding:8px; border-radius:12px; background:rgba(255,211,90,.14); text-align:center; }

/* ---- Brain Bash ---- */
.bbask{text-align:center;font-weight:700;font-size:1.05rem;margin:.4rem .6rem;color:#fff}
.bbask b{color:var(--yellow)}
.bbgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:0 .6rem;max-width:520px;margin:0 auto}
.bbgrid .bbtile:nth-child(5){grid-column:1/-1;justify-self:center;width:50%}
.bbtile{position:relative;background:#d9dce4;border:4px solid transparent;border-radius:16px;padding:.4rem .3rem .3rem;display:flex;flex-direction:column;align-items:center;gap:.1rem;cursor:pointer}
.bbtile svg{width:100%;max-width:130px;aspect-ratio:1}
.bbtile:disabled{cursor:default}
.bbtile.picked{border-color:var(--cyan)}
.bbtile.right{border-color:#37d67a;box-shadow:0 0 0 4px rgba(55,214,122,.5)}
.bbtile.wrong{border-color:#e53935;opacity:.7}
.bbw{font-weight:900;font-size:1.25rem;letter-spacing:.04em;text-shadow:-1px -1px 0 var(--sh),1px -1px 0 var(--sh),-1px 1px 0 var(--sh),1px 1px 0 var(--sh),0 2px 0 var(--sh)}
.bbx{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5rem;font-style:normal;font-weight:900;color:#e53935;text-shadow:0 0 6px #fff;pointer-events:none}
.bbplayers{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;padding:.7rem .6rem}
.bbp{display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.1);border-radius:999px;padding:.15rem .6rem .15rem .2rem;font-size:.85rem}
.bbp .face{width:26px;height:26px}
.bbp.me{outline:2px solid var(--yellow)}.bbp.ok{background:rgba(55,214,122,.3)}.bbp.bad{background:rgba(229,57,53,.3)}