/* =========================================================
   Mind Auction — styles
   ========================================================= */
:root {
  --bg1: #0d0221; --bg2: #2b0b4f; --bg3: #5a0f7a; --pri: #ff2e88; --pri2: #ff7ac1; --acc: #22e3ff;
  --text: #fff; --muted: rgba(255,255,255,.66); --surf: rgba(255,255,255,.07); --surf2: rgba(255,255,255,.13);
  --line: rgba(255,255,255,.14); --shade: rgba(0,0,0,.45); --panel: rgba(10,6,25,.55);
  --good: #2ee59d; --bad: #ff4d6d; --gold: #ffc83d; --gold2: #ff9f1c;
  --r: 18px; --r2: 26px;
  --font: 'Cairo', system-ui, sans-serif; --disp: 'Lalezar', 'Cairo', system-ui, sans-serif;
  --ease: cubic-bezier(.2,.9,.25,1.15); --ease2: cubic-bezier(.4,0,.2,1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--text); background: var(--bg1);
  overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
/* the page gradient lives on its own fixed layer: it always fills the screen and never moves or cuts off while scrolling
   (a fixed background-attachment is slow on phones, a scrolling one ends at the first screen) */
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 800px at 85% -10%, var(--bg3), transparent 60%), radial-gradient(900px 700px at -10% 110%, var(--bg2), transparent 60%), linear-gradient(160deg, var(--bg1), var(--bg2)); }
input, textarea { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { display: block; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.grow { flex: 1; }
.row { display: flex; align-items: center; } .row.gap { gap: 10px; } .row.center { justify-content: center; } .row.end { justify-content: flex-end; } .row.between { justify-content: space-between; } .row.wrap { flex-wrap: wrap; }
.center-t { text-align: center; }
#app { min-height: 100dvh; overflow-x: clip; }

/* ---------- animated background ---------- */
/* contain + clip-path: phones must never let the blurred, drifting blobs grow the page (extra empty scroll below the screen) */
.bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; clip-path: inset(0); }
.bgfx i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .32; animation: blob 22s ease-in-out infinite alternate; }
.bgfx i:nth-child(1) { background: var(--pri); top: -18vmax; inset-inline-start: -10vmax; }
.bgfx i:nth-child(2) { background: var(--acc); bottom: -20vmax; inset-inline-end: -12vmax; animation-delay: -6s; opacity: .22; }
.bgfx i:nth-child(3) { background: var(--bg3); top: 30%; left: 35%; animation-delay: -11s; width: 36vmax; height: 36vmax; }
.bgfx i:nth-child(4) { background: var(--pri2); bottom: 10%; left: -10%; width: 26vmax; height: 26vmax; animation-delay: -3s; opacity: .18; }
.bgfx b { position: absolute; inset: -50%; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px); background-size: 46px 46px; opacity: .07; animation: drift 60s linear infinite; }
[data-mode=light] .bgfx b { background-image: radial-gradient(rgba(60,30,90,.5) 1px, transparent 1.4px); }
@keyframes blob { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(8vmax,6vmax) scale(1.15); } 100% { transform: translate(-6vmax,10vmax) scale(.9); } }
@keyframes drift { to { transform: translate(46px,46px); } }

/* ---------- base components ---------- */
.screen { position: relative; z-index: 1; min-height: 100dvh; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); animation: screenIn .45s var(--ease2); }
.screen.center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r2); padding: 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 50px -20px var(--shade); }
.rise { animation: rise .6s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.pop-in { animation: popIn .5s var(--ease) both; }
@keyframes popIn { 0% { opacity: 0; transform: scale(.3); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
.bob { animation: bob 2.4s ease-in-out infinite; display: inline-block; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.wobble { animation: wobble 1s ease-in-out infinite; display: inline-block; }
@keyframes wobble { 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(12deg) scale(1.1); } }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pulse1 { animation: pulse1 .4s var(--ease); }
@keyframes pulse1 { 40% { transform: scale(1.15); } }
.bump { animation: bump .3s var(--ease); }
@keyframes bump { 40% { transform: scale(1.06) translateY(-4px); } }

.btn {
  --bc: var(--surf2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 16px;
  background: var(--bc); border: 1px solid var(--line); font-weight: 800; font-size: 1rem; color: var(--text);
  box-shadow: 0 4px 0 rgba(0,0,0,.25); transition: transform .12s var(--ease2), box-shadow .12s, filter .2s; position: relative; white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn.pri { background: linear-gradient(135deg, var(--pri), var(--pri2)); border-color: transparent; color: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--pri) 60%, #000); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.btn.pri:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--pri) 60%, #000); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.danger { background: color-mix(in srgb, var(--bad) 20%, transparent); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.btn.big { padding: 15px 26px; font-size: 1.12rem; border-radius: 18px; }
.btn.huge { padding: 18px 30px; font-size: 1.3rem; border-radius: 20px; }
.btn.wide { width: 100%; }
.btn.small { padding: 7px 13px; font-size: .88rem; border-radius: 12px; }
.btn.icon { padding: 10px; width: 46px; height: 46px; font-size: 1.2rem; }
.btn.disabled { opacity: .5; }
.inp { width: 100%; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--surf); color: var(--text); font: inherit; font-size: 1.05rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.inp:focus { border-color: var(--pri); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pri) 25%, transparent); }
.inp.big { font-size: 1.35rem; font-weight: 700; padding: 16px; }
.inp.center { text-align: center; }
textarea.inp { resize: vertical; min-height: 110px; }
.lbl { font-size: .82rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 8px; }
.big-emo { font-size: 64px; line-height: 1.1; filter: drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 5px solid var(--surf2); border-top-color: var(--pri); animation: spin 0.8s linear infinite; margin: 10px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.dots-load { display: inline-flex; gap: 6px; margin: 8px auto; }
.dots-load i { width: 10px; height: 10px; border-radius: 50%; background: var(--pri); animation: dl 1.2s infinite; }
.dots-load i:nth-child(2) { animation-delay: .15s; background: var(--acc); } .dots-load i:nth-child(3) { animation-delay: .3s; }
@keyframes dl { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* coin */
.coin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.14em; position: relative; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6c2 0 12%, #ffd84d 30%, #f5a300 75%, #c47b00 100%);
  box-shadow: inset 0 0 0 .09em #ffde6b, inset 0 -.08em .12em rgba(120,60,0,.5), 0 .06em .14em rgba(0,0,0,.35); }
.coin::after { content: ''; position: absolute; inset: .2em; border-radius: 50%; border: .06em solid rgba(150,90,0,.55); }
.coin.big { font-size: 1.5em; }
.fly-coin { position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; }
.float-txt { position: fixed; z-index: 999; pointer-events: none; transform: translate(-50%,-50%); font-weight: 900; font-size: 22px; animation: floatUp 1.25s var(--ease2) forwards; text-shadow: 0 2px 8px rgba(0,0,0,.4); white-space: nowrap; }
.float-txt.good { color: var(--good); } .float-txt.bad { color: var(--bad); } .float-txt.big { font-size: 30px; } .float-txt.emo { font-size: 40px; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%,-30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%,-60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%,-230%) scale(1); } }
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 998; }

/* toasts & modal */
.toasts { position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(12px); padding: 12px 18px; border-radius: 14px; font-weight: 700; animation: popIn .4s var(--ease); box-shadow: 0 10px 30px -10px var(--shade); max-width: 90vw; text-align: center; }
.toast.bad { border-color: var(--bad); }
.toast.out { opacity: 0; transform: translateY(10px); transition: .35s; }
.modal-back { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: fadeIn .25s; }
.modal-back.out { opacity: 0; transition: .25s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(440px, 100%); max-height: 90dvh; overflow: auto; animation: popIn .4s var(--ease); background: var(--panel); }
.modal.wide { width: min(760px, 100%); }
.modal h2 { margin: 0 0 12px; }
.confirm-txt { font-size: 1.1rem; font-weight: 700; margin: 6px 0 18px; }

/* switch, seg, range */
.switch { position: relative; width: 56px; height: 32px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--surf2); border: 1px solid var(--line); transition: .25s; cursor: pointer; }
.switch i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: .25s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.switch input:checked + i { background: var(--pri); }
.switch input:checked + i::after { inset-inline-start: 27px; }
.seg { display: flex; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; padding: 10px; border-radius: 10px; font-weight: 800; transition: .2s; }
.seg button.on { background: var(--pri); color: #fff; box-shadow: none; }
.seg.sm button { padding: 6px 8px; font-size: .85rem; }
.range { width: 100%; accent-color: var(--pri); height: 30px; }

/* ---------- avatars, borders, tiers, profile cards ---------- */
.av { --bw: calc(var(--s) * .07); position: relative; width: var(--s); height: var(--s); border-radius: 50%; flex: none; }
.av::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ring, transparent); }
.av-in { position: absolute; inset: var(--bw); border-radius: 50%; overflow: hidden; background: var(--avbg); display: grid; place-items: center; box-shadow: inset 0 -4px 10px rgba(0,0,0,.18); }
.av-in img { width: 100%; height: 100%; object-fit: cover; }
.av .emo { font-size: calc(var(--s) * .52); line-height: 1; }
.av-frame { position: absolute; inset: -16%; width: 132%; height: 132%; pointer-events: none; }
.bd-none { --bw: 0px; }
.bd-img { --bw: calc(var(--s) * .04); }
.bd-silver { --ring: linear-gradient(145deg, #fff, #9aa7b8 50%, #e9eef5); }
.bd-mint { --ring: linear-gradient(145deg, #b8ffe4, #13c39a); }
.bd-sunset { --ring: linear-gradient(145deg, #ffd36b, #ff6a3d, #ff3d8b); }
.bd-ocean { --ring: linear-gradient(145deg, #7fe3ff, #1f6fff, #00e0c6); }
.bd-gold { --bw: calc(var(--s) * .09); --ring: conic-gradient(#fff3b0, #f5b300, #fff3b0, #c47b00, #fff3b0, #f5b300, #fff3b0); box-shadow: 0 0 calc(var(--s) * .12) rgba(255,200,60,.45); }
.bd-neon { --ring: linear-gradient(145deg, #ff2e88, #22e3ff); animation: neonGlow 1.6s ease-in-out infinite alternate; }
@keyframes neonGlow { from { box-shadow: 0 0 calc(var(--s)*.08) #ff2e88; } to { box-shadow: 0 0 calc(var(--s)*.22) #22e3ff; } }
.bd-fire { --bw: calc(var(--s) * .09); --ring: conic-gradient(from 0deg, #ff3d00, #ffb300, #ff3d00, #ff7a00, #ffe066, #ff3d00); box-shadow: 0 0 calc(var(--s)*.16) rgba(255,90,0,.6); }
.bd-fire::before, .bd-rainbow::before, .bd-cosmic::before, .bd-legend::before { animation: spin 3s linear infinite; }
.bd-rainbow { --bw: calc(var(--s) * .09); --ring: conic-gradient(#ff0040, #ff9500, #ffee00, #2ee59d, #00b3ff, #8a2be2, #ff0040); }
.bd-diamond { --bw: calc(var(--s) * .1); --ring: conic-gradient(#e6fbff, #7fd4ff, #ffffff, #4c8dff, #e6fbff, #a0e9ff, #ffffff, #4c8dff, #e6fbff); box-shadow: 0 0 calc(var(--s)*.18) rgba(120,200,255,.6); animation: neonGlow2 2s ease-in-out infinite alternate; }
@keyframes neonGlow2 { to { box-shadow: 0 0 calc(var(--s)*.3) rgba(160,230,255,.9); } }
.bd-cosmic { --bw: calc(var(--s) * .1); --ring: conic-gradient(#1b0645, #c86bff, #5cf2ff, #1b0645, #ff2ed1, #c86bff, #1b0645); box-shadow: 0 0 calc(var(--s)*.22) rgba(200,107,255,.6); }
.bd-legend { --bw: calc(var(--s) * .11); --ring: conic-gradient(#ffe08a, #ff2d6b, #ffe08a, #8a2be2, #ffe08a, #ff2d6b, #ffe08a); box-shadow: 0 0 calc(var(--s)*.25) rgba(255,210,100,.75), 0 0 calc(var(--s)*.5) rgba(255,45,107,.35); }
.bd-legend::after { content: '👑'; position: absolute; top: calc(var(--s) * -.3); left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: calc(var(--s) * .36); filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.tier { display: inline-block; vertical-align: middle; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); flex: none; }
.av-empty { width: 120px; height: 120px; border-radius: 50%; border: 3px dashed var(--line); display: grid; place-items: center; font-size: 46px; color: var(--muted); margin: auto; }

.pcard { position: relative; border-radius: 20px; overflow: hidden; background: var(--surf); border: 1px solid var(--line); box-shadow: 0 10px 30px -14px var(--shade); }
.pc-banner { position: absolute; inset: 0 0 auto 0; height: 58%; opacity: .95; }
.pc-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.35)); }
.pc-banner.anim, .bn-sw.anim, .lb-bn.anim { background-size: 300% 100% !important; animation: bannerMove 6s linear infinite; }
@keyframes bannerMove { to { background-position: 300% 0; } }
.pc-body { position: relative; display: flex; align-items: flex-end; gap: 12px; padding: 34px 14px 12px; }
.pc-info { min-width: 0; flex: 1; }
.pc-name { font-weight: 900; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pc-lv { display: flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--muted); }

/* ---------- setup ---------- */
.setup { width: min(460px, 100%); text-align: center; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.setup h2 { margin: 4px 0 0; font-size: 1.6rem; }
.setup p { margin: 0; }
.steps { display: flex; gap: 6px; justify-content: center; }
.steps i { width: 28px; height: 6px; border-radius: 9px; background: var(--surf2); transition: .3s; }
.steps i.on { background: var(--pri); width: 44px; } .steps i.done { background: var(--acc); }
.lang-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.lang-card { background: var(--surf); border: 2px solid var(--line); border-radius: 22px; padding: 22px 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; transition: .2s var(--ease); font-size: 1.15rem; }
.lang-card:hover { border-color: var(--pri); transform: translateY(-4px); }
.lc-big { font-family: var(--disp); font-size: 54px; line-height: 1; background: linear-gradient(135deg, var(--pri), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ave { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ave-preview { min-height: 124px; display: grid; place-items: center; }
.ave-emoji { width: 100%; }
.ave-colors { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; transition: .2s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.swatch.on { border-color: var(--text); transform: scale(1.15); }
.ave-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; max-height: 210px; overflow: auto; padding: 4px; }
.emo-btn { font-size: 28px; padding: 6px 0; border-radius: 12px; background: var(--surf); border: 2px solid transparent; transition: .15s var(--ease); }
.emo-btn:hover { transform: scale(1.12); }
.emo-btn.on { border-color: var(--pri); background: color-mix(in srgb, var(--pri) 22%, transparent); transform: scale(1.1); }
.setup-card .pcard { text-align: start; }

/* ---------- logo ---------- */
.logo { display: flex; align-items: center; gap: 12px; justify-content: center; }
.logo-coin { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6c2 0 10%, #ffd84d 32%, #f5a300 75%, #b56f00); box-shadow: inset 0 0 0 4px #ffde6b;
  animation: coinSpin 4s ease-in-out infinite; }
.logo-coin span { font-family: var(--disp); font-size: 30px; color: #7a4a00; text-shadow: 0 1px 0 #ffe9a0; margin-top: 4px; }
@keyframes coinSpin { 0%, 70% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.logo-name { font-family: var(--disp); font-size: 1.6rem; line-height: 1.1; background: linear-gradient(135deg, #fff, var(--pri2) 50%, var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 10px rgba(0,0,0,.3)); }
[data-mode=light] .logo-name { background: linear-gradient(135deg, var(--pri), var(--acc)); -webkit-background-clip: text; background-clip: text; }
.logo-tag { font-weight: 700; color: var(--muted); font-size: .95rem; }
.logo.big { flex-direction: column; text-align: center; gap: 8px; }
.logo.big .logo-coin { width: 92px; height: 92px; }
.logo.big .logo-coin span { font-size: 62px; }
.logo.big .logo-name { font-size: clamp(2.6rem, 9vw, 3.6rem); }

/* ---------- menu ---------- */
.menu { width: min(480px, 100%); display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 1; padding-bottom: 20px; }
.me-chip { display: flex; align-items: center; gap: 10px; align-self: flex-start; background: var(--surf); border: 1px solid var(--line); padding: 6px 16px 6px 6px; padding-inline: 6px 16px; border-radius: 99px; text-align: start; transition: .2s; backdrop-filter: blur(10px); }
.me-chip:hover { background: var(--surf2); }
.me-lv { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); font-weight: 700; }
.xpbar { display: inline-block; width: 64px; height: 6px; border-radius: 9px; background: var(--surf2); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--pri)); border-radius: 9px; transition: width 1.4s var(--ease2); }
.xpbar.big { width: 100%; height: 12px; }
.menu-main { display: flex; flex-direction: column; gap: 14px; }
.mbtn { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 24px; text-align: start; font-size: 1.35rem; position: relative; overflow: hidden; transition: transform .15s var(--ease2), box-shadow .2s; box-shadow: 0 6px 0 rgba(0,0,0,.28), 0 18px 40px -18px var(--shade); }
.mbtn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); transform: translateX(-120%); transition: .7s; }
.mbtn::after { display: none; } /* no shine sweep */
.mbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.mbtn b { display: block; font-family: var(--disp); font-weight: 400; font-size: 1.6rem; line-height: 1.2; }
.mbtn small { display: block; font-size: .9rem; opacity: .85; font-weight: 600; }
.mbtn.host { background: linear-gradient(135deg, var(--pri), var(--pri2)); color: #fff; }
.mbtn.join { background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 85%, #000 0%), color-mix(in srgb, var(--acc) 55%, var(--pri))); color: #fff; }
.mbtn.resume { background: var(--surf2); border: 1px solid var(--line); }
.mb-ic { font-size: 40px; width: 64px; height: 64px; display: grid; place-items: center; background: rgba(255,255,255,.18); border-radius: 18px; flex: none; }
.menu-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 20px; background: var(--surf); border: 1px solid var(--line); font-weight: 800; font-size: .92rem; transition: .2s var(--ease); backdrop-filter: blur(10px); }
.sbtn span { font-size: 28px; }
.sbtn:hover { transform: translateY(-4px); background: var(--surf2); }
.ver { text-align: center; color: var(--muted); font-size: .75rem; opacity: .6; }

/* ---------- sub pages ---------- */
.topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; max-width: 640px; margin: 0 auto 14px; width: 100%; }
.topbar h3 { margin: 0; font-size: 1.3rem; }
.topbar > span { width: 46px; }
.join-box, .prof, .settings, .howto, .suggest { position: relative; z-index: 1; width: min(560px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.join-box { text-align: center; align-items: stretch; }
.join-box p { margin: 0; }
.code-inp { width: 100%; text-align: center; font-family: var(--disp); font-size: 3.4rem; letter-spacing: .4em; padding: 12px 0 6px; padding-inline-start: .4em; border-radius: 22px; border: 3px solid var(--line); background: var(--surf); color: var(--text); outline: none; direction: ltr; }
.code-inp:focus { border-color: var(--pri); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pri) 25%, transparent); }
.joining-as { display: flex; flex-direction: column; gap: 6px; text-align: start; }
.prof-head { text-align: center; padding-top: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 18px; }
.pc-banner.big { position: relative; inset: auto; height: 110px; width: calc(100% + 36px); margin: 0 -18px; }
.prof-av { margin-top: -66px; position: relative; }
.name-inp { max-width: 300px; font-weight: 900; font-size: 1.3rem; }
.prof-lv { display: flex; align-items: center; gap: 8px; }
/* phones: the live preview pinned at the top while the editor scrolls (wide screens keep the big one in view instead) */
.prof-live { position: fixed; z-index: 20; top: max(8px, env(safe-area-inset-top)); left: 50%; width: min(608px, calc(100% - 24px)); transform: translate(-50%, calc(-100% - 20px)); opacity: 0; pointer-events: none; transition: transform .28s var(--ease2), opacity .2s; border-radius: 22px; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6); background: color-mix(in srgb, var(--bg1) 94%, var(--text) 6%); overflow: hidden; }
.prof-live.on { transform: translate(-50%, 0); opacity: 1; }
.prof-live .pcard { margin: 0; }
@media (min-width: 980px) { .prof-live { display: none; } }
.xpline { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 4px; }
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.statrow div { background: var(--surf); border-radius: 14px; padding: 8px 4px; }
.statrow b { display: block; font-size: 1.3rem; } .statrow small { color: var(--muted); font-size: .72rem; font-weight: 700; }
.card h4 { margin: 0 0 12px; font-size: 1.05rem; }
.card.row h4 { margin: 0; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; background: var(--surf); border: 2px solid transparent; position: relative; transition: .2s var(--ease); }
.opt:hover { transform: translateY(-3px); }
.opt.on { border-color: var(--pri); background: color-mix(in srgb, var(--pri) 15%, transparent); }
.opt small { font-weight: 700; font-size: .75rem; }
.opt.locked { opacity: .55; }
.opt.locked > .av, .opt.locked > .bn-sw { filter: grayscale(.8); }
.opt em { position: absolute; top: 4px; inset-inline-end: 4px; font-style: normal; font-size: .62rem; background: var(--panel); padding: 2px 5px; border-radius: 6px; font-weight: 800; }
.bn-sw { width: 100%; height: 44px; border-radius: 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.theme-sw { border-radius: 16px; padding: 6px; border: 2px solid transparent; background: var(--surf); display: flex; flex-direction: column; gap: 6px; transition: .2s var(--ease); }
.theme-sw:hover { transform: translateY(-3px); }
.theme-sw.on { border-color: var(--pri); transform: scale(1.04); }
.ts-prev { height: 54px; border-radius: 11px; background: linear-gradient(135deg, var(--a), var(--b)); display: flex; align-items: flex-end; gap: 4px; padding: 6px; }
.ts-prev i { height: 14px; flex: 1; border-radius: 6px; background: var(--c); }
.ts-prev i:nth-child(2) { background: var(--d); height: 22px; } .ts-prev i:nth-child(3) { background: rgba(255,255,255,.7); height: 10px; }
.theme-sw small { font-weight: 800; font-size: .78rem; }
.how-intro { text-align: center; font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
.how-step { display: flex; gap: 14px; align-items: flex-start; }
.hs-ic { font-size: 34px; width: 60px; height: 60px; display: grid; place-items: center; background: var(--surf2); border-radius: 18px; flex: none; }
.hs-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pri); color: #fff; font-size: .8rem; font-weight: 900; margin-inline-end: 6px; }
.how-step b { font-size: 1.1rem; }
.how-step p { margin: 4px 0 0; color: var(--muted); line-height: 1.6; }
.suggest h2 { margin: 6px 0; }
.suggest textarea { margin: 12px 0; }
.contact { display: flex; align-items: center; gap: 14px; }
.ct-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; flex: none; }
.ct-ic.mail { background: linear-gradient(135deg, #ff9a3d, #ff3d6e); } .ct-ic.dc { background: linear-gradient(135deg, #5865f2, #8b95ff); }
.contact small { color: var(--muted); font-weight: 700; display: block; } .contact b { font-size: 1.1rem; }

/* ---------- shared game bits ---------- */
.room-code { display: flex; gap: .12em; justify-content: center; font-family: var(--disp); font-size: calc(10 * var(--vm)); line-height: 1; direction: ltr; }
.room-code span { display: inline-block; background: linear-gradient(180deg, #fff, #ffe9f3); color: #2a0b3d; border-radius: .16em; padding: .1em .14em 0; box-shadow: 0 .06em 0 rgba(0,0,0,.25); animation: popIn .6s var(--ease) both; animation-delay: calc(var(--i) * .08s); }
.room-code.sm { font-size: 28px; color: var(--muted); }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: color-mix(in srgb, var(--cc) 30%, transparent); border: 1.5px solid color-mix(in srgb, var(--cc) 70%, transparent); font-weight: 800; white-space: nowrap; }
.pchip.big { font-size: 1.3em; padding: 10px 22px; }
.tbar-wrap { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; }
.tbar { flex: 1; height: calc(1.4 * var(--vm)); min-height: 8px; border-radius: 99px; background: var(--surf2); overflow: hidden; }
.tbar i { display: block; height: 100%; width: 100%; transform-origin: right; background: linear-gradient(90deg, var(--good), var(--gold), var(--pri)); border-radius: 99px; transition: transform .12s linear; }
[dir=ltr] .tbar i { transform-origin: left; }
.tnum { font-family: var(--disp); font-size: calc(4 * var(--vm)); min-width: 2.2ch; text-align: center; transition: .2s; }
.tnum.hurry { color: var(--bad); animation: pulse1 .5s infinite; }
.qdiff { font-weight: 800; font-size: .85em; padding: 3px 10px; border-radius: 99px; background: var(--surf2); white-space: nowrap; }
.qdiff.d1 { color: var(--good); } .qdiff.d2 { color: var(--gold); } .qdiff.d3 { color: var(--bad); }
.bubble-dots { display: inline-flex; gap: .3em; align-items: center; }
.bubble-dots i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; opacity: .5; animation: dl 1.2s infinite; }
.bubble-dots i:nth-child(2) { animation-delay: .15s; } .bubble-dots i:nth-child(3) { animation-delay: .3s; }
.crown { font-size: calc(7 * var(--vm)); filter: drop-shadow(0 4px 10px rgba(255,200,0,.6)); animation: crownIn .7s var(--ease) both; }
.crown.sm { position: absolute; top: calc(-4.6 * var(--vm)); left: 50%; transform: translateX(-50%); font-size: calc(5.4 * var(--vm)); z-index: 3; }
@keyframes crownIn { from { transform: translateX(-50%) translateY(-30px) rotate(-30deg) scale(.2); opacity: 0; } }

/* =========================================================
   HOST SCREEN (TV) — sized in vmin so it scales to any display
   ========================================================= */
.host-screen { padding: 0; height: 100dvh; overflow: hidden; }
.host-root { position: relative; z-index: 1; height: 100dvh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr auto; font-size: calc(2.2 * var(--vm)); }
.hud { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(1.4 * var(--vm)); padding: calc(1.6 * var(--vm)) calc(2.4 * var(--vm)); min-height: 0; }
.hud:empty { padding: 0; }
.hud-logo .logo-coin { width: calc(5 * var(--vm)); height: calc(5 * var(--vm)); } .hud-logo .logo-coin span { font-size: calc(3.4 * var(--vm)); }
.hud-logo .logo-name { font-size: calc(3.6 * var(--vm)); }
.hud-pill { padding: calc(.8 * var(--vm)) calc(2 * var(--vm)); border-radius: 99px; background: var(--surf); border: 1px solid var(--line); font-weight: 800; font-size: calc(2.3 * var(--vm)); backdrop-filter: blur(10px); animation: popIn .5s var(--ease); }
.hud-pill.cat { background: color-mix(in srgb, var(--cc) 30%, transparent); border-color: color-mix(in srgb, var(--cc) 70%, transparent); }
.hud-piggy { display: flex; align-items: center; gap: calc(1 * var(--vm)); padding: calc(.6 * var(--vm)) calc(2 * var(--vm)); border-radius: 99px; background: linear-gradient(135deg, #ff8fab, #ff5d8f); color: #fff; font-size: calc(3 * var(--vm)); font-weight: 900; box-shadow: none; }
.hud-piggy .pig { font-size: calc(3.6 * var(--vm)); display: inline-block; }
.hud-piggy.pulse1 .pig { animation: wobble .5s 2; }
.hud-code { text-align: center; line-height: 1.05; padding: calc(.4 * var(--vm)) calc(1.6 * var(--vm)); border-radius: calc(1.4 * var(--vm)); background: var(--surf); border: 1px solid var(--line); }
.hud-code small { display: block; font-size: calc(1.4 * var(--vm)); color: var(--muted); font-weight: 700; }
.hud-code b { font-family: var(--disp); font-size: calc(3 * var(--vm)); letter-spacing: .1em; }
.stage { position: relative; min-height: 0; overflow: hidden; }
.lay { position: absolute; inset: 0; padding: calc(1 * var(--vm)) calc(2.6 * var(--vm)) calc(2.6 * var(--vm)); display: flex; flex-direction: column; gap: calc(1.8 * var(--vm)); animation: layIn .55s var(--ease) both; }
.lay-out { animation: layOut .38s var(--ease2) forwards; pointer-events: none; }
@keyframes layIn { from { opacity: 0; transform: translateY(calc(4 * var(--vm))) scale(.97); } }
@keyframes layOut { to { opacity: 0; transform: translateY(calc(-3 * var(--vm))) scale(.98); } }
.rail { display: none; position: relative; width: calc(31 * var(--vm)); margin: calc(1 * var(--vm)) 0 0; margin-inline-end: calc(2 * var(--vm)); align-self: start; }
.in-game .rail { display: block; }
.rrow { position: absolute; top: 0; left: 0; right: 0; height: calc(5.8 * var(--vm)); display: flex; align-items: center; gap: calc(1 * var(--vm)); padding: calc(.4 * var(--vm)) calc(1.2 * var(--vm)); padding-inline-start: calc(.5 * var(--vm)); border-radius: 99px; background: var(--surf); border: 1px solid var(--line); transition: transform .7s var(--ease), opacity .4s, filter .4s; backdrop-filter: blur(10px); }
.rrow::before { content: ''; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: calc(.5 * var(--vm)); border-radius: 9px; background: var(--pc); }
.rr-n { font-weight: 900; width: calc(2.4 * var(--vm)); text-align: center; color: var(--muted); font-size: calc(1.8 * var(--vm)); }
.rr-name { flex: 1; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(2 * var(--vm)); }
.rr-c { display: flex; align-items: center; gap: calc(.6 * var(--vm)); font-weight: 900; font-size: calc(2.3 * var(--vm)); }
.rrow.dead { opacity: .4; filter: grayscale(1); }
.rrow.off .av { opacity: .45; }
.rrow.up { animation: rowUp 1s; } .rrow.down { animation: rowDown 1s; }
@keyframes rowUp { 30% { background: color-mix(in srgb, var(--good) 40%, transparent); } }
@keyframes rowDown { 30% { background: color-mix(in srgb, var(--bad) 40%, transparent); } }
.hctl { position: fixed; bottom: calc(1.4 * var(--vm)); inset-inline-start: calc(1.4 * var(--vm)); display: flex; gap: calc(.8 * var(--vm)); z-index: 50; opacity: .35; transition: opacity .3s; }
.hctl:hover { opacity: 1; }
.hctl .btn.icon { width: calc(5.4 * var(--vm)); height: calc(5.4 * var(--vm)); min-width: 40px; min-height: 40px; font-size: calc(2.4 * var(--vm)); background: var(--panel); }
.pause-ov { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); text-align: center; animation: fadeIn .3s; }
.pause-ov h1 { font-family: var(--disp); font-size: calc(9 * var(--vm)); margin: 0; }
.react-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.react-fly { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; animation: reactFly 2.6s var(--ease2) forwards; }
.react-fly span { font-size: calc(7 * var(--vm)); filter: drop-shadow(0 calc(.6 * var(--vm)) calc(1.4 * var(--vm)) rgba(0,0,0,.4)); }
.react-fly small { font-size: calc(1.5 * var(--vm)); font-weight: 800; padding: calc(.2 * var(--vm)) calc(1 * var(--vm)); border-radius: 99px; color: #fff; margin-top: calc(-.6 * var(--vm)); }
@keyframes reactFly { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 12% { opacity: 1; transform: translate(-50%,-80%) scale(1.2); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -900%) scale(.9); } }
.center-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--vm)); text-align: center; font-size: calc(2.6 * var(--vm)); padding: calc(4 * var(--vm)); }
.center-msg h1 { margin: 0; font-family: var(--disp); font-size: calc(7 * var(--vm)); }
.center-msg .big-emo { font-size: calc(12 * var(--vm)); }
.ph-head { text-align: center; }
.ph-title { margin: 0; font-family: var(--disp); font-weight: 400; font-size: calc(6.4 * var(--vm)); line-height: 1.15; text-shadow: 0 calc(.6 * var(--vm)) calc(2 * var(--vm)) rgba(0,0,0,.35); animation: titleIn .7s var(--ease) both; }
.ph-title.glow { background: linear-gradient(135deg, #fff, var(--pri2), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-title.gold { background: linear-gradient(135deg, #fff3b0, #ffc83d, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-title.bad { color: var(--bad); }
@keyframes titleIn { from { opacity: 0; transform: scale(.6) translateY(calc(-2 * var(--vm))); letter-spacing: .1em; } }
.ph-sub { margin: calc(.6 * var(--vm)) 0 0; font-size: calc(2.6 * var(--vm)); color: var(--muted); font-weight: 700; }

/* lobby */
.lobby { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(calc(34 * var(--vm)), 38%) 1fr; gap: calc(2.6 * var(--vm)); padding: calc(2.6 * var(--vm)); }
.lobby-join { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1.2 * var(--vm)); text-align: center; padding: calc(3 * var(--vm)); }
.lobby-join .logo.big .logo-coin { width: calc(11 * var(--vm)); height: calc(11 * var(--vm)); } .lobby-join .logo.big .logo-coin span { font-size: calc(7.4 * var(--vm)); }
.lobby-join .logo.big .logo-name { font-size: calc(7 * var(--vm)); } .lobby-join .logo-tag { font-size: calc(2.2 * var(--vm)); }
.lj-lbl { color: var(--muted); font-weight: 800; font-size: calc(2 * var(--vm)); margin-top: calc(1 * var(--vm)); }
.lj-url { font-weight: 900; font-size: calc(2.8 * var(--vm)); color: var(--acc); word-break: break-all; }
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: calc(.6 * var(--vm)); margin-top: calc(1 * var(--vm)); }
.qr { background: #fff; padding: calc(1.2 * var(--vm)); border-radius: calc(2 * var(--vm)); box-shadow: 0 calc(1 * var(--vm)) calc(3 * var(--vm)) calc(-1 * var(--vm)) rgba(0,0,0,.4); }
.qr img, .qr canvas { width: calc(22 * var(--vm)) !important; height: calc(22 * var(--vm)) !important; }
.qr-wrap small { color: var(--muted); font-weight: 700; font-size: calc(1.7 * var(--vm)); }
.qr-fallback { font-family: var(--disp); color: #222; font-size: calc(5 * var(--vm)); padding: calc(2 * var(--vm)); }
.lobby-main { display: flex; flex-direction: column; gap: calc(2 * var(--vm)); min-height: 0; }
.lobby-head { display: flex; align-items: center; justify-content: space-between; }
.lobby-head h2 { margin: 0; font-size: calc(4.4 * var(--vm)); font-family: var(--disp); font-weight: 400; display: flex; align-items: center; gap: calc(1.4 * var(--vm)); }
.count-badge { background: var(--pri); color: #fff; border-radius: 99px; min-width: calc(5 * var(--vm)); padding: 0 calc(1.4 * var(--vm)); font-size: calc(3.2 * var(--vm)); text-align: center; font-family: var(--font); font-weight: 900; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(30 * var(--vm)), 1fr)); gap: calc(1.8 * var(--vm)); align-content: start; overflow: auto; flex: 1; padding: calc(2 * var(--vm)) calc(1 * var(--vm)); }
.pgrid .pcard { font-size: calc(2.2 * var(--vm)); border-radius: calc(2.4 * var(--vm)); }
.pgrid .pcard::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: calc(.4 * var(--vm)) solid var(--pc, transparent); opacity: .6; z-index: 2; pointer-events: none; }
.pgrid .pc-body { padding: calc(4 * var(--vm)) calc(1.6 * var(--vm)) calc(1.4 * var(--vm)); gap: calc(1.4 * var(--vm)); }
.pgrid .pc-name { font-size: calc(2.9 * var(--vm)); } .pgrid .pc-lv { font-size: calc(1.8 * var(--vm)); }
.pgrid .pcard.enter { animation: cardDrop .8s var(--ease) both; }
@keyframes cardDrop { 0% { opacity: 0; transform: translateY(calc(-14 * var(--vm))) rotate(-8deg) scale(.6); } 60% { opacity: 1; transform: translateY(calc(1 * var(--vm))) rotate(2deg) scale(1.04); } 100% { transform: none; } }
.pcard.off { opacity: .45; filter: grayscale(.7); }
.kick { position: absolute; top: calc(1 * var(--vm)); inset-inline-end: calc(1 * var(--vm)); width: calc(3.6 * var(--vm)); height: calc(3.6 * var(--vm)); border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: calc(1.8 * var(--vm)); opacity: 0; transition: .2s; z-index: 3; }
.pcard:hover .kick { opacity: 1; }
.lobby-empty { text-align: center; color: var(--muted); font-size: calc(2.8 * var(--vm)); font-weight: 700; margin: auto; position: absolute; inset: 40% 0 auto 38%; }
[dir=rtl] .lobby-empty { inset: 40% 38% auto 0; }
.lobby-empty .dots-load i { width: calc(2 * var(--vm)); height: calc(2 * var(--vm)); }
.lobby-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--vm)); }
.set-sum { display: flex; gap: calc(1.2 * var(--vm)); flex-wrap: wrap; }
.set-sum span { background: var(--surf); border: 1px solid var(--line); border-radius: 99px; padding: calc(.6 * var(--vm)) calc(1.6 * var(--vm)); font-weight: 800; font-size: calc(2.2 * var(--vm)); }
.lobby-foot .btn.huge { font-size: calc(3.6 * var(--vm)); padding: calc(2 * var(--vm)) calc(5 * var(--vm)); border-radius: calc(2.6 * var(--vm)); animation: startPulse 2s infinite; }
.lobby-foot .btn.huge.disabled { animation: none; }
@keyframes startPulse { 50% { transform: scale(1.03); } }
.resume-grid { width: min(calc(120 * var(--vm)), 100%); flex: none; max-height: 40vh; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 6px 0 16px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.stepper { display: flex; align-items: center; gap: 6px; background: var(--surf); border-radius: 12px; padding: 3px; border: 1px solid var(--line); }
.stepper button { width: 34px; height: 34px; border-radius: 9px; background: var(--surf2); font-size: 1.2rem; font-weight: 900; }
.stepper b { min-width: 42px; text-align: center; }
.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 16px; }
.pool-c { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: var(--surf); border: 2px solid transparent; text-align: start; opacity: .5; transition: .15s; }
.pool-c span { font-size: 22px; } .pool-c b { flex: 1; font-size: .9rem; } .pool-c small { color: var(--muted); font-weight: 800; }
.pool-c.on { opacity: 1; border-color: var(--cc); background: color-mix(in srgb, var(--cc) 18%, transparent); }

/* category grid (initial vote) */
.tbar-wrap { max-width: calc(120 * var(--vm)); margin: 0 auto; }
.cgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(1.6 * var(--vm)); align-content: center; }
.ccard, .rcard { --cc: #888; position: relative; border-radius: calc(2.6 * var(--vm)); padding: calc(1.6 * var(--vm)) calc(1.2 * var(--vm)) calc(1.2 * var(--vm)); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 34%, transparent), color-mix(in srgb, var(--cc) 10%, transparent)); border: calc(.35 * var(--vm)) solid color-mix(in srgb, var(--cc) 55%, transparent); display: flex; flex-direction: column; align-items: center; gap: calc(.6 * var(--vm)); text-align: center; transition: transform .25s var(--ease), box-shadow .25s, opacity .4s, filter .4s; animation: rise .6s var(--ease) both; overflow: hidden; min-height: calc(19 * var(--vm)); }
.cgrid .ccard:nth-child(n) { animation-delay: calc(var(--n2, 0) * 1s); }
.cc-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; }
.cc-ic { font-size: calc(6.4 * var(--vm)); line-height: 1.1; filter: drop-shadow(0 calc(.5 * var(--vm)) calc(1 * var(--vm)) rgba(0,0,0,.35)); position: relative; }
.cc-name { font-weight: 900; font-size: calc(2.4 * var(--vm)); line-height: 1.2; position: relative; }
.cc-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(.6 * var(--vm)); min-height: calc(4 * var(--vm)); position: relative; margin-top: auto; }
.vdot { width: calc(3.6 * var(--vm)); height: calc(3.6 * var(--vm)); border-radius: 50%; background: var(--pc, #999); border: calc(.3 * var(--vm)) solid #fff; display: grid; place-items: center; overflow: hidden; font-size: calc(2 * var(--vm)); font-style: normal; transition: transform .1s, box-shadow .1s, opacity .4s; box-shadow: 0 calc(.3 * var(--vm)) calc(.8 * var(--vm)) rgba(0,0,0,.35); }
.vdot img { width: 100%; height: 100%; object-fit: cover; }
.vdot.house { background: var(--surf2); }
.vdot.hot { transform: scale(1.55); box-shadow: 0 0 0 calc(.5 * var(--vm)) #fff; z-index: 2; }
.vdot.win { transform: scale(1.7); box-shadow: 0 0 0 calc(.6 * var(--vm)) var(--gold); animation: winDot .6s var(--ease) 3; }
@keyframes winDot { 50% { transform: scale(2.1); } }
.vdot.gone { opacity: 0; transform: scale(0); }
.ccard.hot, .rcard.hot { transform: translateY(calc(-1 * var(--vm))) scale(1.04); box-shadow: 0 0 0 calc(.4 * var(--vm)) #fff; }
.ccard.bump, .rcard.bump { animation: bump .3s var(--ease); }
.cc-check { position: absolute; top: calc(1 * var(--vm)); inset-inline-end: calc(1 * var(--vm)); width: calc(4.4 * var(--vm)); height: calc(4.4 * var(--vm)); border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: calc(2.6 * var(--vm)); transform: scale(0); transition: transform .5s var(--ease); box-shadow: 0 calc(.4 * var(--vm)) calc(1.2 * var(--vm)) rgba(0,0,0,.4); }
.ccard.picked { box-shadow: 0 0 0 calc(.5 * var(--vm)) var(--good); animation: stampIn .6s var(--ease); }
.ccard.picked .cc-check { transform: scale(1); }
.ccard.picked::after { content: var(--n); position: absolute; top: calc(1 * var(--vm)); inset-inline-start: calc(1.4 * var(--vm)); font-family: var(--disp); font-size: calc(4 * var(--vm)); color: var(--good); }
@keyframes stampIn { 0% { transform: scale(1.25) rotate(-3deg); } 60% { transform: scale(.95); } 100% { transform: scale(1); } }
.spinning .ccard:not(.picked):not(.hot) { filter: saturate(.75) brightness(.9); }
.picked-strip { display: flex; gap: calc(1 * var(--vm)); justify-content: center; flex-wrap: wrap; min-height: 0; font-size: calc(2.2 * var(--vm)); }
.picked-strip:empty { display: none; }
.voter-row { display: flex; gap: calc(1.6 * var(--vm)); justify-content: center; flex-wrap: wrap; }
.voter { display: flex; flex-direction: column; align-items: center; gap: calc(.5 * var(--vm)); transition: .3s; }
.voter.done { opacity: .55; }
.pips { display: flex; gap: calc(.4 * var(--vm)); }
.pips i { width: calc(1.2 * var(--vm)); height: calc(1.2 * var(--vm)); border-radius: 50%; background: var(--pc); box-shadow: none; transition: .3s; }
.pips i.used { background: var(--surf2); box-shadow: none; }
.spinning .voter-row { display: none; }

/* catreveal */
.reveal-cats { flex: 1; display: flex; gap: calc(2.4 * var(--vm)); justify-content: center; align-items: center; flex-wrap: wrap; perspective: 1200px; }
.flipcard { width: calc(24 * var(--vm)); height: calc(30 * var(--vm)); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * .1s); }
.fc-in { position: relative; width: 100%; height: 100%; transition: transform .8s var(--ease); transform-style: preserve-3d; }
.flipcard.flip .fc-in { transform: rotateY(180deg); }
.fc-back, .fc-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: calc(3 * var(--vm)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1 * var(--vm)); }
.fc-back { background: linear-gradient(135deg, var(--pri), var(--acc)); font-family: var(--disp); font-size: calc(14 * var(--vm)); color: rgba(255,255,255,.85); box-shadow: 0 calc(2 * var(--vm)) calc(5 * var(--vm)) calc(-2 * var(--vm)) var(--shade); }
.fc-front { transform: rotateY(180deg); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 60%, #000 0%), color-mix(in srgb, var(--cc) 25%, var(--bg1))); border: calc(.4 * var(--vm)) solid color-mix(in srgb, var(--cc) 80%, #fff); box-shadow: none; padding: calc(1 * var(--vm)); text-align: center; }
.fc-front .cc-ic { font-size: calc(10 * var(--vm)); } .fc-front .cc-name { font-size: calc(3 * var(--vm)); }

/* round intro */
.round-intro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--vm)); }
.ri-small { font-size: calc(3.4 * var(--vm)); font-weight: 800; color: var(--muted); animation: rise .6s var(--ease) both; }
.ri-big { font-family: var(--disp); font-size: calc(22 * var(--vm)); line-height: 1; background: linear-gradient(135deg, #fff, var(--pri2), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: zoomBang .9s var(--ease) both; filter: drop-shadow(0 calc(1.4 * var(--vm)) calc(4 * var(--vm)) rgba(0,0,0,.4)); }
@keyframes zoomBang { 0% { transform: scale(3); opacity: 0; filter: blur(10px); } 60% { transform: scale(.92); opacity: 1; filter: blur(0); } 100% { transform: scale(1); } }
.ri-cats { display: flex; gap: calc(1.2 * var(--vm)); flex-wrap: wrap; justify-content: center; font-size: calc(2.4 * var(--vm)); }
.ri-cats .pchip { animation: rise .5s var(--ease) both; animation-delay: calc(.5s + var(--i) * .08s); }

/* round vote */
.rgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(2 * var(--vm)); align-items: stretch; }
.rcard { justify-content: flex-start; padding-top: calc(3 * var(--vm)); }
.rcard .cc-ic { font-size: calc(9 * var(--vm)); } .rcard .cc-name { font-size: calc(3 * var(--vm)); }
.rc-coins { flex: 1; width: 100%; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: calc(.5 * var(--vm)); padding: calc(1 * var(--vm)); overflow: hidden; }
.cdot { width: calc(2.8 * var(--vm)); height: calc(2.8 * var(--vm)); border-radius: 50%; font-style: normal; transition: transform .1s, box-shadow .1s;
  background: radial-gradient(circle at 35% 30%, #fff6c2 0 12%, #ffd84d 32%, #f5a300 75%, #c47b00); box-shadow: 0 0 0 calc(.3 * var(--vm)) var(--pc, #fff), 0 calc(.3 * var(--vm)) calc(.6 * var(--vm)) rgba(0,0,0,.35); }
.cdot.house { background: var(--surf2); box-shadow: 0 0 0 calc(.3 * var(--vm)) var(--line); }
.cdot.drop { animation: coinDrop .5s var(--ease) both; }
@keyframes coinDrop { from { transform: translateY(calc(-14 * var(--vm))) scale(.4) rotate(-90deg); opacity: 0; } }
.cdot.hot { transform: scale(1.7); box-shadow: 0 0 0 calc(.4 * var(--vm)) #fff; z-index: 2; }
.cdot.win { transform: scale(2); box-shadow: 0 0 0 calc(.5 * var(--vm)) var(--good); }
.rc-n { display: flex; align-items: center; gap: calc(.8 * var(--vm)); font-family: var(--disp); font-size: calc(4.4 * var(--vm)); }
.chosen-mode .rcard:not(.chosen) { opacity: .25; filter: grayscale(.8); transform: scale(.92); }
.rcard.chosen { transform: scale(1.08); box-shadow: 0 0 0 calc(.6 * var(--vm)) var(--gold); z-index: 3; animation: stampIn .7s var(--ease); }

/* question card */
.lay-q { gap: calc(2 * var(--vm)); }
.qcard { position: relative; border-radius: calc(3 * var(--vm)); padding: calc(2.4 * var(--vm)) calc(3 * var(--vm)); background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 calc(2 * var(--vm)) calc(6 * var(--vm)) calc(-3 * var(--vm)) var(--shade); display: flex; flex-direction: column; gap: calc(1.6 * var(--vm)); animation: qIn .8s var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(calc(-6 * var(--vm))) scale(.9) rotateX(20deg); } }
.qmeta { display: flex; gap: calc(1.2 * var(--vm)); align-items: center; font-size: calc(2.2 * var(--vm)); flex-wrap: wrap; }
.qcat { display: inline-flex; align-items: center; gap: calc(.8 * var(--vm)); padding: calc(.6 * var(--vm)) calc(1.8 * var(--vm)); border-radius: 99px; background: color-mix(in srgb, var(--cc) 35%, transparent); border: calc(.25 * var(--vm)) solid color-mix(in srgb, var(--cc) 75%, transparent); font-weight: 900; }
.qno { font-weight: 800; color: var(--muted); }
.qtext { font-size: calc(4.6 * var(--vm)); font-weight: 900; line-height: 1.45; text-align: center; text-wrap: balance; }
.qtext span { display: inline-block; animation: wordIn .5s var(--ease) both; animation-delay: calc(.35s + var(--i) * .06s); }
@keyframes wordIn { from { opacity: 0; transform: translateY(calc(1.6 * var(--vm))) scale(.8); filter: blur(4px); } }
.qimg { max-height: 26vh; max-width: 100%; margin: 0 auto; border-radius: calc(2 * var(--vm)); box-shadow: 0 calc(1 * var(--vm)) calc(3 * var(--vm)) calc(-1 * var(--vm)) var(--shade); }
.qopts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.4 * var(--vm)); }
.qopts:empty { display: none; }
.qopts.n2 { grid-template-columns: 1fr 1fr; }
.qopt { display: flex; align-items: center; gap: calc(1.4 * var(--vm)); padding: calc(1.4 * var(--vm)) calc(2 * var(--vm)); border-radius: calc(2 * var(--vm)); background: var(--surf2); border: calc(.3 * var(--vm)) solid var(--line); font-size: calc(3 * var(--vm)); font-weight: 800; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * .12s); transition: background .3s, border-color .3s, transform .3s var(--ease), opacity .3s; }
.qo-l { width: calc(5 * var(--vm)); height: calc(5 * var(--vm)); border-radius: calc(1.4 * var(--vm)); background: linear-gradient(135deg, var(--pri), var(--acc)); color: #fff; display: grid; place-items: center; font-weight: 900; flex: none; font-size: calc(2.6 * var(--vm)); }
.qopt.hover { border-color: var(--acc); transform: scale(1.03); box-shadow: none; }
.qopt.chosen { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 25%, transparent); animation: chosenPulse 1s infinite; }
@keyframes chosenPulse { 50% { transform: scale(1.04); } }
.qopt.correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 35%, transparent); transform: scale(1.04); animation: none; box-shadow: none; }
.qopt.correct .qo-l { background: var(--good); }
.qopt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 30%, transparent); animation: shake .5s; }
.qopt.wrong .qo-l { background: var(--bad); }
.answering .qopts:not(:empty) ~ * {}
.arena { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--vm)); position: relative; }
.arena-head { text-align: center; }
.arena-head h2 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: calc(5.4 * var(--vm)); animation: titleIn .6s var(--ease) both; }
.arena-head p { margin: calc(.4 * var(--vm)) 0 0; color: var(--muted); font-weight: 700; font-size: calc(2.4 * var(--vm)); }
.get-ready { text-align: center; }
.get-ready h2 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: calc(5 * var(--vm)); color: var(--muted); }
.cd-num { font-family: var(--disp); font-size: calc(16 * var(--vm)); line-height: 1.1; background: linear-gradient(135deg, var(--gold), var(--pri)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tiles { display: flex; flex-wrap: wrap; gap: calc(2.4 * var(--vm)); justify-content: center; align-items: flex-end; }
.ptile { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(.8 * var(--vm)); min-width: calc(13 * var(--vm)); animation: rise .5s var(--ease) both; transition: transform .4s var(--ease), opacity .4s, filter .4s; }
.pt-name { font-weight: 900; font-size: calc(2.3 * var(--vm)); max-width: calc(16 * var(--vm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bstat, .pick-stat { min-height: calc(4.6 * var(--vm)); display: grid; place-items: center; font-size: calc(2.2 * var(--vm)); font-weight: 800; padding: calc(.6 * var(--vm)) calc(1.6 * var(--vm)); border-radius: 99px; background: var(--surf2); color: var(--muted); }
.ptile.done .bstat { background: color-mix(in srgb, var(--pc) 35%, transparent); color: var(--text); }
.ptile.done .av { animation: bump .4s var(--ease); }
.lock, .pass { display: inline-flex; gap: calc(.6 * var(--vm)); align-items: center; }
.big-ic { font-size: calc(4 * var(--vm)); }
.tiles.small .av { --s: calc(7 * var(--vm)) !important; }
.tiles.reveal .ptile { min-width: calc(14 * var(--vm)); }
.bflip { width: calc(13 * var(--vm)); height: calc(7 * var(--vm)); perspective: 600px; }
.bf-in { position: relative; width: 100%; height: 100%; transition: transform .6s var(--ease); transform-style: preserve-3d; }
.ptile.flipped .bf-in { transform: rotateX(180deg); }
.bf-back, .bf-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: calc(1.6 * var(--vm)); display: flex; align-items: center; justify-content: center; gap: calc(.8 * var(--vm)); font-family: var(--disp); font-size: calc(4.4 * var(--vm)); }
.bf-back { background: linear-gradient(135deg, var(--pri), var(--acc)); color: #fff; }
.bf-front { transform: rotateX(180deg); background: var(--surf2); border: calc(.3 * var(--vm)) solid var(--pc); }
.bf-front small { font-family: var(--font); font-size: calc(2 * var(--vm)); font-weight: 800; color: var(--muted); }
.ptile.top { transform: scale(1.14) translateY(calc(-1 * var(--vm))); z-index: 2; }
.ptile.top .bf-front { background: linear-gradient(135deg, #fff3b0, var(--gold)); color: #6b3d00; border-color: #fff; box-shadow: none; }
.ptile.dim { opacity: .45; filter: grayscale(.6); transform: scale(.92); }
.pot { display: flex; align-items: center; gap: calc(1.4 * var(--vm)); padding: calc(1.2 * var(--vm)) calc(3 * var(--vm)); border-radius: 99px; background: linear-gradient(135deg, rgba(255,200,61,.25), rgba(255,159,28,.15)); border: calc(.3 * var(--vm)) solid rgba(255,200,61,.6); font-size: calc(3 * var(--vm)); }
.pot > div { text-align: center; min-width: calc(9 * var(--vm)); }
.pot small { display: block; font-size: calc(1.8 * var(--vm)); color: var(--muted); font-weight: 800; }
.pot b { font-family: var(--disp); font-size: calc(5 * var(--vm)); line-height: 1; color: var(--gold); }
.pot .coin.big { font-size: calc(6 * var(--vm)); }
.pot.mini { padding: calc(1 * var(--vm)) calc(2.2 * var(--vm)); }
.pot.mini b { font-size: calc(4 * var(--vm)); }

/* tie + duel */
.tie-box, .duel { display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--vm)); width: 100%; }
.tie-box > p, .duel-head p { margin: 0; color: var(--muted); font-weight: 700; font-size: calc(2.4 * var(--vm)); }
.tie-title { font-family: var(--disp); font-size: calc(11 * var(--vm)); line-height: 1; color: var(--gold); text-shadow: none; animation: zoomBang .8s var(--ease) both, tieShake 2s .8s infinite; }
@keyframes tieShake { 0%, 90%, 100% { transform: none; } 92% { transform: rotate(-4deg); } 96% { transform: rotate(4deg); } }
.vs-row { display: flex; align-items: center; gap: calc(3 * var(--vm)); justify-content: center; }
.vs { font-family: var(--disp); font-size: calc(7 * var(--vm)); color: var(--bad); text-shadow: none; animation: vsPulse 1s infinite; }
@keyframes vsPulse { 50% { transform: scale(1.18) rotate(-6deg); } }
.vs-row .ptile .av { --s: calc(12 * var(--vm)) !important; }
.tie-msg { font-size: calc(3.4 * var(--vm)); font-weight: 900; min-height: calc(5 * var(--vm)); animation: popIn .4s var(--ease); }
.tie-msg.good { color: var(--good); } .tie-msg.bad { color: var(--bad); } .tie-msg.gold { color: var(--gold); }
.game-icons { display: flex; gap: calc(2 * var(--vm)); }
.gicon { display: flex; flex-direction: column; align-items: center; padding: calc(1.4 * var(--vm)) calc(2.4 * var(--vm)); border-radius: calc(2 * var(--vm)); background: var(--surf); border: calc(.3 * var(--vm)) solid var(--line); width: calc(22 * var(--vm)); text-align: center; transition: .4s var(--ease); }
.gicon span { font-size: calc(6 * var(--vm)); } .gicon b { font-size: calc(2.6 * var(--vm)); } .gicon small { font-size: calc(1.6 * var(--vm)); color: var(--muted); font-weight: 700; }
.gicon.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 20%, transparent); transform: scale(1.1); box-shadow: none; }
.tie-box .tbar-wrap, .tie-box > .tbar { width: 60%; }
.duel-head { display: flex; align-items: center; gap: calc(2 * var(--vm)); }
.duel-head h2 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: calc(5 * var(--vm)); }
.duel-ic { font-size: calc(9 * var(--vm)); animation: bob 1.6s infinite; }
.duel-prog { min-height: calc(6 * var(--vm)); display: grid; place-items: center; }
.dp-react { font-size: calc(6 * var(--vm)); } .dp-react.green { animation: pulse1 .4s infinite; }
.dp-pips { display: flex; gap: calc(.8 * var(--vm)); }
.dp-pips span { min-width: calc(6 * var(--vm)); height: calc(4.4 * var(--vm)); border-radius: calc(1.2 * var(--vm)); background: var(--surf2); display: grid; place-items: center; font-weight: 900; font-size: calc(2 * var(--vm)); transition: .3s var(--ease); }
.dp-pips span.on { background: var(--acc); color: #032; transform: scale(1.05); }
.dp-pips.small span { min-width: calc(4 * var(--vm)); }
.duel-score { min-height: calc(5 * var(--vm)); font-family: var(--disp); font-size: calc(4 * var(--vm)); color: var(--gold); }
.duel-win { font-size: calc(4 * var(--vm)); font-weight: 800; } .duel-win b { color: var(--gold); }

/* answering */
.answerer { display: flex; align-items: center; gap: calc(3 * var(--vm)); animation: slideIn .8s var(--ease) both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(calc(-30 * var(--vm))) rotate(-6deg); } }
[dir=rtl] .answerer { animation-name: slideInR; }
@keyframes slideInR { from { opacity: 0; transform: translateX(calc(30 * var(--vm))) rotate(6deg); } }
.pcard.big { width: calc(46 * var(--vm)); font-size: calc(2.4 * var(--vm)); border-radius: calc(3 * var(--vm)); box-shadow: 0 calc(2 * var(--vm)) calc(6 * var(--vm)) calc(-2 * var(--vm)) var(--shade); }
.pcard.big .pc-body { padding: calc(6 * var(--vm)) calc(2 * var(--vm)) calc(1.8 * var(--vm)); gap: calc(2 * var(--vm)); } .pcard.big .pc-name { font-size: calc(4 * var(--vm)); } .pcard.big .pc-lv { font-size: calc(2 * var(--vm)); }
.speech { position: relative; min-width: calc(24 * var(--vm)); max-width: calc(50 * var(--vm)); padding: calc(2.4 * var(--vm)) calc(3.4 * var(--vm)); border-radius: calc(3.4 * var(--vm)); background: #fff; color: #1d1530; font-size: calc(3.6 * var(--vm)); font-weight: 900; text-align: center; box-shadow: 0 calc(1.4 * var(--vm)) calc(4 * var(--vm)) calc(-1 * var(--vm)) var(--shade); animation: popIn .6s .3s var(--ease) both; }
.speech::before { content: ''; position: absolute; top: 50%; inset-inline-start: calc(-2 * var(--vm)); transform: translateY(-50%); border: calc(1.4 * var(--vm)) solid transparent; border-inline-end-color: #fff; }
.sp-txt .bubble-dots i { width: calc(1.6 * var(--vm)); height: calc(1.6 * var(--vm)); background: #1d1530; }
.sp-txt.typing .bubble-dots i { animation-duration: .6s; opacity: 1; }
.sp-txt:not(.typing) .bubble-dots { opacity: .45; }
.speech.said { animation: popIn .5s var(--ease); background: linear-gradient(135deg, #fff, #fff3d6); }
.ans-who { font-size: calc(3 * var(--vm)); font-weight: 700; color: var(--muted); } .ans-who b { color: var(--text); }
.answerer.won .pcard { box-shadow: 0 0 0 calc(.6 * var(--vm)) var(--good); }
.answerer.lost .pcard { box-shadow: 0 0 0 calc(.6 * var(--vm)) var(--bad); filter: saturate(.6); }
.result-banner { text-align: center; padding: calc(2 * var(--vm)) calc(5 * var(--vm)); border-radius: calc(3 * var(--vm)); animation: zoomBang .7s var(--ease) both; display: flex; flex-direction: column; gap: calc(1 * var(--vm)); align-items: center; }
.result-banner.good { background: linear-gradient(135deg, color-mix(in srgb, var(--good) 45%, transparent), color-mix(in srgb, var(--good) 15%, transparent)); border: calc(.4 * var(--vm)) solid var(--good); }
.result-banner.bad { background: linear-gradient(135deg, color-mix(in srgb, var(--bad) 45%, transparent), color-mix(in srgb, var(--bad) 15%, transparent)); border: calc(.4 * var(--vm)) solid var(--bad); }
.result-banner.gold { background: linear-gradient(135deg, rgba(255,200,61,.45), rgba(255,159,28,.15)); border: calc(.4 * var(--vm)) solid var(--gold); }
.result-banner.neutral { background: var(--surf2); border: calc(.4 * var(--vm)) solid var(--line); }
.rb-big { font-family: var(--disp); font-size: calc(6 * var(--vm)); line-height: 1.15; }
.rb-ans { font-size: calc(3 * var(--vm)); font-weight: 700; } .rb-ans b { font-weight: 900; }
.rb-sub { font-size: calc(2.8 * var(--vm)); font-weight: 700; } .rb-sub.small { font-size: calc(2 * var(--vm)); opacity: .8; }
.lay-q.answering .arena { justify-content: space-evenly; }

/* bonus */
.bonus-wrap { flex: 1; display: flex; flex-direction: column; gap: calc(2 * var(--vm)); min-height: 0; }
.bonus-head { display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--vm)); }
.big-pig { font-size: calc(14 * var(--vm)); animation: wobble 1.2s ease-in-out infinite; filter: drop-shadow(0 calc(1.4 * var(--vm)) calc(3 * var(--vm)) rgba(255,93,143,.5)); }
.bonus-amt { display: flex; align-items: center; gap: calc(1.2 * var(--vm)); font-family: var(--disp); font-size: calc(9 * var(--vm)); color: var(--gold); text-shadow: none; animation: pulse1 1.4s infinite; }
.bonus-amt .coin { font-size: calc(8 * var(--vm)); }
.bonus-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--vm)); min-height: 0; }
.bonus-body .qcard { width: 100%; }
.bonus-cat { display: flex; flex-direction: column; align-items: center; gap: calc(1.4 * var(--vm)); font-size: calc(3 * var(--vm)); }
.bonus-cat small { color: var(--muted); font-weight: 800; }
.qcard.bonus { border-color: var(--gold); box-shadow: none; }

/* elim */
.elim { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--vm)); }
.elim-row { display: flex; gap: calc(4 * var(--vm)); flex-wrap: wrap; justify-content: center; }
.elim-card { position: relative; width: calc(44 * var(--vm)); animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * .2s); }
.elim-card .pcard { font-size: calc(2.4 * var(--vm)); } .elim-card .pc-body { padding: calc(6 * var(--vm)) calc(2 * var(--vm)) calc(2 * var(--vm)); } .elim-card .pc-name { font-size: calc(4 * var(--vm)); }
.elim-card.broken .pcard { filter: grayscale(1) brightness(.7); transform: rotate(-4deg) translateY(calc(2 * var(--vm))); transition: 1s var(--ease); }
.crack { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 47%, rgba(255,255,255,.9) 48%, transparent 49.5%), linear-gradient(60deg, transparent 55%, rgba(255,255,255,.7) 56%, transparent 57%), linear-gradient(160deg, transparent 30%, rgba(255,255,255,.6) 31%, transparent 32%); border-radius: 20px; }
.elim-card.broken .crack { opacity: 1; transition: .2s; }
.elim-card.broken::after { content: '💀'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: calc(14 * var(--vm)); animation: popIn .6s var(--ease); }

/* standings */
.stand-list { flex: 1; display: flex; flex-direction: column; gap: calc(1.2 * var(--vm)); width: min(calc(110 * var(--vm)), 100%); margin: 0 auto; overflow: auto; }
.srow { display: flex; align-items: center; gap: calc(2 * var(--vm)); padding: calc(1 * var(--vm)) calc(2.4 * var(--vm)); border-radius: 99px; background: var(--surf); border: 1px solid var(--line); animation: slideRow .6s var(--ease) both; animation-delay: calc(var(--i) * .08s); position: relative; }
.srow::before { content: ''; position: absolute; inset-inline-start: 0; top: 20%; bottom: 20%; width: calc(.7 * var(--vm)); border-radius: 9px; background: var(--pc); }
@keyframes slideRow { from { opacity: 0; transform: translateX(calc(10 * var(--vm))); } }
.srow.dead { opacity: .45; }
.sr-n { font-family: var(--disp); font-size: calc(4 * var(--vm)); width: calc(5 * var(--vm)); text-align: center; }
.srow:nth-child(1) .sr-n { color: var(--gold); } .srow:nth-child(2) .sr-n { color: #dfe7f1; } .srow:nth-child(3) .sr-n { color: #e8a36c; }
.sr-name { flex: 1; font-weight: 900; font-size: calc(3 * var(--vm)); }
.sr-d { font-weight: 900; font-size: calc(2.6 * var(--vm)); } .sr-d.up { color: var(--good); } .sr-d.down { color: var(--bad); }
.sr-c { display: flex; align-items: center; gap: calc(1 * var(--vm)); font-family: var(--disp); font-size: calc(4 * var(--vm)); min-width: calc(16 * var(--vm)); justify-content: flex-end; }
.stand-pig { text-align: center; font-size: calc(2.8 * var(--vm)); font-weight: 800; }

/* end */
.end { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--vm)); min-height: 0; }
.podium { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: calc(2 * var(--vm)); min-height: 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: calc(.8 * var(--vm)); width: calc(26 * var(--vm)); opacity: 0; }
.pod.rise-up { animation: podRise 1s var(--ease) forwards; }
.pod1.rise-up { animation-delay: 1.1s; } .pod2.rise-up { animation-delay: .6s; } .pod3.rise-up { animation-delay: .2s; }
@keyframes podRise { from { opacity: 0; transform: translateY(calc(20 * var(--vm))); } to { opacity: 1; transform: none; } }
.pod-name { font-weight: 900; font-size: calc(3 * var(--vm)); text-align: center; }
.pod-c { display: flex; align-items: center; gap: calc(.8 * var(--vm)); font-family: var(--disp); font-size: calc(3.6 * var(--vm)); color: var(--gold); }
.pod-block { width: 100%; border-radius: calc(2 * var(--vm)) calc(2 * var(--vm)) 0 0; display: grid; place-items: center; font-family: var(--disp); font-size: calc(8 * var(--vm)); color: rgba(255,255,255,.9); box-shadow: inset 0 calc(1 * var(--vm)) calc(2 * var(--vm)) rgba(255,255,255,.2); }
.pod1 .pod-block { height: calc(24 * var(--vm)); background: linear-gradient(180deg, #ffd84d, #f5a300); }
.pod2 .pod-block { height: calc(17 * var(--vm)); background: linear-gradient(180deg, #e6edf5, #8392a5); }
.pod3 .pod-block { height: calc(12 * var(--vm)); background: linear-gradient(180deg, #f3b98a, #9a5427); }
.pod .crown { animation: crownIn .8s 2s var(--ease) both, bob 2s 3s infinite; }
.pod.empty { opacity: 0; }
.end-rest { display: flex; gap: calc(1.4 * var(--vm)); flex-wrap: wrap; justify-content: center; }
.er { display: flex; align-items: center; gap: calc(1 * var(--vm)); padding: calc(.6 * var(--vm)) calc(1.8 * var(--vm)); border-radius: 99px; background: var(--surf); border: 1px solid var(--line); font-weight: 800; font-size: calc(2.2 * var(--vm)); }
.er-c { display: flex; align-items: center; gap: calc(.5 * var(--vm)); color: var(--gold); }
.end-btns .btn.big { font-size: calc(2.6 * var(--vm)); padding: calc(1.6 * var(--vm)) calc(3.4 * var(--vm)); }
.lay-end, .lay-stats { overflow: auto; padding-bottom: calc(9 * var(--vm)); }

/* stats */
.stats-wrap { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(2 * var(--vm)); min-height: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(24 * var(--vm)), 1fr)); gap: calc(1.6 * var(--vm)); align-content: start; overflow: auto; padding: calc(.4 * var(--vm)); }
.fact { display: flex; flex-direction: column; align-items: center; gap: calc(.6 * var(--vm)); text-align: center; padding: calc(1.6 * var(--vm)); animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * .1s); border-top: calc(.5 * var(--vm)) solid var(--pc); }
.f-ic { font-size: calc(5 * var(--vm)); } .f-t { font-family: var(--disp); font-size: calc(3 * var(--vm)); } .f-name { font-weight: 900; font-size: calc(2.4 * var(--vm)); } .f-d { color: var(--muted); font-weight: 700; font-size: calc(1.9 * var(--vm)); }
.chart { display: flex; flex-direction: column; min-height: 0; }
.chart h3 { margin: 0 0 calc(1 * var(--vm)); font-size: calc(2.6 * var(--vm)); }
.cchart { width: 100%; height: auto; flex: 1; }
.cchart .gl { stroke: var(--line); stroke-width: 1; } .cchart .gt { fill: var(--muted); font-size: 11px; text-anchor: end; font-family: var(--font); }
.cchart .cl { fill: none; stroke: var(--pc); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 2.4s var(--ease2) forwards; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.legend { display: flex; flex-wrap: wrap; gap: calc(1 * var(--vm)) calc(2 * var(--vm)); font-size: calc(1.8 * var(--vm)); font-weight: 700; margin-top: calc(1 * var(--vm)); }
.legend i { display: inline-block; width: calc(1.6 * var(--vm)); height: calc(1.6 * var(--vm)); border-radius: 50%; margin-inline-end: calc(.6 * var(--vm)); vertical-align: middle; }

/* =========================================================
   PHONE SCREEN
   ========================================================= */
.phone-screen { padding: 0; }
.phone { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.ph-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); background: linear-gradient(180deg, var(--panel), transparent); backdrop-filter: blur(10px); }
.pt-me { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pt-me b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-coins { display: flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 99px; background: linear-gradient(135deg, rgba(255,200,61,.3), rgba(255,159,28,.15)); border: 2px solid rgba(255,200,61,.7); font-family: var(--disp); font-size: 1.5rem; line-height: 1; color: var(--gold); text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.pt-coins .coin { font-size: 1.1em; }
.pt-coins.up { animation: coinUp .8s; } .pt-coins.down { animation: coinDown .6s; }
@keyframes coinUp { 30% { transform: scale(1.25); } }
@keyframes coinDown { 30% { transform: scale(.9); } }
.pt-net { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.pt-net.ok { background: var(--good); box-shadow: none; } .pt-net.bad { background: var(--bad); animation: pulse1 1s infinite; }
.ph-main { flex: 1; padding: 6px 14px 110px; display: flex; flex-direction: column; }
.pview { flex: 1; display: flex; flex-direction: column; gap: 14px; animation: screenIn .4s var(--ease2); }
.p-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 20px 0; }
.p-center h2 { margin: 0; font-size: 1.5rem; line-height: 1.35; }
.p-center p { margin: 0; }
.p-center.sm { flex: none; padding: 10px 0; }
.p-prof { width: 100%; max-width: 340px; text-align: start; }
.p-head { text-align: center; }
.p-head h2 { margin: 0; font-size: 1.5rem; }
.p-head p { margin: 4px 0 0; }
.ph-react { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; gap: 4px; justify-content: center; padding: 10px 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, var(--panel), transparent); overflow-x: auto; animation: slideUp .4s var(--ease); }
@keyframes slideUp { from { transform: translateY(100%); } }
.re-btn { font-size: 22px; flex: 1 1 0; min-width: 0; max-width: 46px; height: 42px; border-radius: 14px; background: var(--surf); border: 1px solid var(--line); flex: none; transition: transform .1s; }
.re-btn:active { transform: scale(.85); }
.ph-ov, .ph-pause { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); text-align: center; padding: 20px; animation: fadeIn .3s; }
.ph-ov .card, .ph-pause .card { min-width: 240px; font-weight: 800; background: var(--panel); }
.spect-banner { text-align: center; font-weight: 800; color: var(--muted); background: var(--surf); border-radius: 99px; padding: 6px 12px; align-self: center; font-size: .85rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tbar-wrap.sm .tbar { height: 10px; }
.tbar-wrap.sm .tnum { font-size: 1.5rem; }

/* phone: category vote */
.votes-left { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 800; color: var(--muted); }
.vl-pips { display: inline-flex; gap: 5px; }
.vl-pips i { width: 14px; height: 14px; border-radius: 50%; background: var(--pri); box-shadow: none; transition: .3s var(--ease); }
.vl-pips i.used { background: var(--surf2); box-shadow: none; transform: scale(.7); }
.vl-n { font-family: var(--disp); font-size: 1.6rem; color: var(--text); }
.pcat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 10px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 35%, transparent), color-mix(in srgb, var(--cc) 10%, transparent)); border: 2px solid color-mix(in srgb, var(--cc) 55%, transparent); transition: transform .12s var(--ease2), opacity .3s; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * .04s); }
.pcat:active { transform: scale(.93); }
.pc-ic { font-size: 34px; } .pc-nm { font-weight: 900; font-size: .95rem; line-height: 1.25; }
.pc-my { color: var(--pri2); font-size: .8rem; letter-spacing: 2px; min-height: 1em; }
.pcat.voted { box-shadow: 0 0 0 3px var(--pri); }
.all-used .pcat:not(.voted) { opacity: .5; }

/* phone: round vote */
.rv-head { display: flex; justify-content: center; }
.rv-rule { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(255,200,61,.22), rgba(255,93,143,.15)); border: 2px dashed rgba(255,200,61,.7); }
.rv-rule b { display: block; font-size: 1.1rem; } .rv-rule small { color: var(--muted); font-weight: 700; }
.rv-tap { font-size: 34px; animation: tapHint 1.2s infinite; display: inline-block; }
@keyframes tapHint { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(6px) scale(.9); } }
.rv-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rvbtn { --fill: 0; position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px; border-radius: 20px; text-align: start; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 38%, transparent), color-mix(in srgb, var(--cc) 12%, transparent)); border: 2px solid color-mix(in srgb, var(--cc) 60%, transparent); transition: transform .08s; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * .06s); touch-action: manipulation; }
.rvbtn::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--cc) 40%, transparent); transform-origin: right; transform: scaleX(var(--fill)); transition: transform .3s; }
[dir=ltr] .rvbtn::before { transform-origin: left; }
.rvbtn > * { position: relative; }
.rvbtn:active { transform: scale(.95); }
.rv-ic { font-size: 34px; } .rv-nm { flex: 1; font-weight: 900; font-size: 1.1rem; }
.rv-cost { font-weight: 900; color: var(--bad); background: rgba(0,0,0,.25); padding: 4px 10px; border-radius: 99px; font-size: .9rem; white-space: nowrap; }
[data-mode=light] .rv-cost { background: rgba(255,255,255,.7); }
.rv-mine { font-family: var(--disp); font-size: 1.3rem; min-width: 2ch; color: var(--gold); }
.rv-spent { text-align: center; font-weight: 800; color: var(--muted); min-height: 1.4em; }
.big-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 34px; border-radius: 28px; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 50%, transparent), color-mix(in srgb, var(--cc) 15%, transparent)); border: 3px solid var(--cc); box-shadow: none; }
.big-cat span { font-size: 64px; } .big-cat b { font-size: 1.5rem; }
.p-round { font-family: var(--disp); font-size: 4.4rem; line-height: 1.1; background: linear-gradient(135deg, #fff, var(--pri2), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: zoomBang .8s var(--ease) both; }

/* phone: question + bid */
.pq { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; animation: rise .5s var(--ease) both; }
.pq-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; }
.pq-text { font-size: 1.25rem; font-weight: 900; line-height: 1.55; text-align: center; }
.pq.small .pq-text { font-size: 1.08rem; }
.pq .qimg { max-height: 30vh; border-radius: 14px; }
.bid-panel { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.bp-t { font-family: var(--disp); font-size: 1.6rem; }
.bid-amt { display: flex; align-items: center; gap: 16px; }
.bstep { width: 56px; height: 56px; border-radius: 50%; background: var(--surf2); border: 1px solid var(--line); font-size: 1.8rem; font-weight: 900; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.bstep:active { transform: translateY(3px); box-shadow: none; }
.ba-n { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-size: 3.6rem; line-height: 1; color: var(--gold); min-width: 150px; justify-content: center; transition: .2s; text-shadow: 0 3px 12px rgba(0,0,0,.3); }
.ba-n .coin.big { font-size: 2.6rem; }
.ba-n.hot { color: var(--bad); animation: pulse1 .6s infinite; }
.bid-quick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bid-quick button { padding: 9px 14px; border-radius: 12px; background: var(--surf2); border: 1px solid var(--line); font-weight: 900; }
.bid-quick .allin { background: linear-gradient(135deg, #ff6a3d, #ff2e63); color: #fff; border: 0; }
.bid-panel .muted.small { margin: 0; }
.locked-view .lock-big { font-size: 64px; animation: popIn .5s var(--ease); }
.my-bid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 22px; border-radius: 18px; background: var(--surf2); }
.my-bid small { color: var(--muted); font-weight: 800; } .my-bid b { font-size: 1.6rem; font-family: var(--disp); color: var(--gold); font-weight: 400; display: flex; align-items: center; gap: 8px; }
.tie-badge { display: inline-block; font-family: var(--disp); font-size: 2.6rem; color: var(--gold); text-shadow: none; animation: zoomBang .7s var(--ease) both; }
.gpick { display: flex; flex-direction: column; gap: 10px; }
.gcard { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: start; padding: 16px; border-radius: 20px; background: var(--surf); border: 2px solid var(--line); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * .08s); transition: .15s; }
.gcard:active { transform: scale(.96); border-color: var(--pri); }
.gc-ic { grid-row: span 2; font-size: 44px; } .gcard b { font-size: 1.25rem; } .gcard small { color: var(--muted); font-weight: 700; }

/* phone: answer */
.your-turn { text-align: center; font-family: var(--disp); font-size: 1.9rem; color: var(--good); animation: zoomBang .6s var(--ease) both; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.your-turn.gold { color: var(--gold); }
.pot-chip { font-family: var(--font); font-size: .95rem; font-weight: 800; color: var(--gold); background: rgba(255,200,61,.15); padding: 3px 12px; border-radius: 99px; }
.popts { display: grid; grid-template-columns: 1fr; gap: 10px; }
.popt { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--surf2); border: 2px solid var(--line); font-weight: 800; font-size: 1.08rem; text-align: start; transition: .15s var(--ease); animation: rise .45s var(--ease) both; }
.popt .qo-l { width: 34px; height: 34px; border-radius: 11px; font-size: 1rem; }
.popt:not([disabled]):active { transform: scale(.97); }
.popt.sel { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 22%, transparent); transform: scale(1.02); box-shadow: none; }
.popt[disabled] { opacity: .85; cursor: default; }
.popts.n2 { grid-template-columns: 1fr 1fr; }
.popts.n2 .popt { flex-direction: column; justify-content: center; text-align: center; padding: 22px 10px; font-size: 1.25rem; }
.type-ans { display: flex; flex-direction: column; gap: 10px; }
.btn.confirm { animation: popIn .4s var(--ease); background: linear-gradient(135deg, var(--good), #14b37a); box-shadow: 0 5px 0 #0b7a52; }
.p-answering { display: flex; align-items: center; gap: 12px; justify-content: center; font-size: 1.1rem; }
.p-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 16px; border-radius: 26px; background: var(--surf); border: 2px solid var(--line); margin-top: 20px; }
.p-result.good { border-color: var(--good); background: color-mix(in srgb, var(--good) 18%, transparent); }
.p-result.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 18%, transparent); }
.p-result h2 { margin: 0; font-size: 1.5rem; }
.pr-delta { font-family: var(--disp); font-size: 2.6rem; display: flex; align-items: center; gap: 8px; }
.p-result.good .pr-delta { color: var(--good); } .p-result.bad .pr-delta { color: var(--bad); }
.pr-delta.gold, h2.gold { color: var(--gold); }
.answer-was { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 18px; background: var(--surf2); text-align: center; }
.answer-was small { color: var(--muted); font-weight: 800; } .answer-was b { font-size: 1.25rem; color: var(--good); }
.p-rank { font-family: var(--disp); font-size: 3.6rem; line-height: 1.1; color: var(--gold); animation: zoomBang .7s var(--ease) both; }
.mini-board { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 380px; }
.mb-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; padding-inline-start: 6px; border-radius: 99px; background: var(--surf); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * .06s); text-align: start; }
.mb-row b { width: 22px; text-align: center; } .mb-row span:nth-of-type(1) { flex: 1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row.me { background: color-mix(in srgb, var(--pri) 30%, transparent); border: 2px solid var(--pri); }
.mb-row.dead { opacity: .5; }
.mb-c { display: flex; align-items: center; gap: 5px; font-weight: 900; color: var(--gold); }
.xp-gain { font-family: var(--disp); font-size: 2rem; color: var(--acc); }
.xp-card { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 380px; background: var(--surf); padding: 12px; border-radius: 18px; text-align: start; }
.xp-card b { display: block; margin-bottom: 6px; }
.lvup { font-weight: 900; font-size: 1.2rem; padding: 8px 18px; border-radius: 99px; background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #4a2a00; animation: popIn .6s 1s var(--ease) both; }

/* phone mini-games */
.game-view { padding-top: 0; }
.mg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; border-radius: 26px; padding: 20px; min-height: 60vh; }
.mg h2 { margin: 0; font-size: 1.8rem; }
.mg-ic { font-size: 70px; animation: bob 1.4s infinite; }
.mg-intro .cd-num { font-size: 6rem; }
.mg-big { font-family: var(--disp); font-size: 2.6rem; line-height: 1.2; }
.mg-big small { font-size: .5em; }
.mg-sub { font-weight: 800; color: var(--muted); }
.mg-react { cursor: pointer; transition: background .08s; touch-action: manipulation; }
.mg-react.wait { background: linear-gradient(160deg, #3a0b1a, #7a1030); color: #ffd0d8; }
.mg-react.green { background: linear-gradient(160deg, #0fbf6a, #2ee59d); color: #04311c; }
.mg-react.early { background: linear-gradient(160deg, #5a3a00, #a86a00); color: #fff; animation: shake .4s; }
.mg-react.hit { background: linear-gradient(160deg, #1f3c88, #4c8dff); color: #fff; }
.mg-skill { background: var(--surf); touch-action: manipulation; cursor: pointer; }
.track { position: relative; width: 100%; height: 70px; border-radius: 20px; background: linear-gradient(90deg, #ff4d6d, #ffc83d 35%, #2ee59d 50%, #ffc83d 65%, #ff4d6d); box-shadow: inset 0 4px 12px rgba(0,0,0,.35); overflow: visible; }
.zone { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-inline: 2px solid rgba(255,255,255,.8); }
.zone.z1 { width: 30%; opacity: .25; } .zone.z2 { width: 14%; opacity: .5; } .zone.z3 { width: 3%; background: #fff; opacity: .9; border: 0; }
.needle { position: absolute; top: -12px; bottom: -12px; width: 8px; margin-left: -4px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 2px #1d1530; left: 0; }
.sk-res { display: flex; gap: 8px; } .sk-res span { font-family: var(--disp); font-size: 1.7rem; padding: 4px 14px; border-radius: 12px; background: var(--surf2); }
.sk-res span.good { color: var(--good); }
.mg-brain { background: var(--surf); }
.sum { font-family: var(--disp); font-size: 3.4rem; }
.bopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.bopt { padding: 22px 0; border-radius: 18px; background: var(--surf2); border: 2px solid var(--line); font-family: var(--disp); font-size: 2rem; transition: .1s; }
.bopt:active { transform: scale(.93); }
.bopt.good { background: var(--good); color: #032; } .bopt.bad { background: var(--bad); opacity: .6; }
.mg-timer { font-family: var(--disp); font-size: 1.8rem; color: var(--gold); }
.mg-done { background: var(--surf); }
.mg-score { font-family: var(--disp); font-size: 3rem; color: var(--gold); }
.p-center.bonus .big-emo { font-size: 90px; }

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  .set-grid { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: repeat(2, 1fr); }
}
@media (orientation: portrait) {
  .host-root { font-size: calc(2.6 * var(--vm)); }
  .lobby { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .stats-wrap { grid-template-columns: 1fr; }
}

/* reduced motion toggle */
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
.no-motion .bgfx { display: none; }

/* ---------- reaction moderation + vote cap ---------- */
.rr-mute { width: calc(3.6 * var(--vm)); height: calc(3.6 * var(--vm)); min-width: 22px; min-height: 22px; border-radius: 50%; background: var(--panel); font-size: calc(1.8 * var(--vm)); opacity: 0; transition: opacity .2s; flex: none; }
.rrow:hover .rr-mute { opacity: 1; }
.rrow.blocked .rr-mute, .rrow.muted .rr-mute { opacity: 1; background: color-mix(in srgb, var(--bad) 55%, transparent); }
.rrow.muted:not(.blocked) .rr-mute::after { content: '⏳'; position: absolute; font-size: calc(1.2 * var(--vm)); transform: translate(40%, -60%); }
.kick.mute { inset-inline-end: calc(5.2 * var(--vm)); }
.pcard.blocked .kick.mute { opacity: 1; background: color-mix(in srgb, var(--bad) 70%, #000); }
.ph-react .re-muted { display: none; }
.ph-react.muted .re-btn { display: none; }
.ph-react.muted .re-muted { display: block; font-weight: 800; padding: 10px 14px; border-radius: 14px; background: var(--surf); border: 1px solid var(--line); }
.rv-pips { display: inline-flex; gap: 5px; vertical-align: middle; margin-inline-end: 6px; }
.rv-pips i { width: 14px; height: 14px; border-radius: 50%; background: var(--surf2); border: 2px solid rgba(255,200,61,.6); transition: .25s var(--ease); }
.rv-pips i.on { background: radial-gradient(circle at 35% 30%, #fff6c2 0 12%, #ffd84d 32%, #f5a300 75%, #c47b00); transform: scale(1.15); }
.maxed .rvbtn { opacity: .55; filter: saturate(.6); }
.maxed .rv-spent { color: var(--gold); }

/* ---------- phones: no double-tap zoom, no text-size boosting ---------- */
html, body, button, a, input, label, .tap { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- side list: status + moderation only (name-sorted, no balances) ---------- */
.rr-dot { width: calc(1.4 * var(--vm)); height: calc(1.4 * var(--vm)); min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--good); box-shadow: none; flex: none; }
.rrow.off .rr-dot, .pcard.off .rr-dot { background: var(--muted); box-shadow: none; }
.rr-st { font-size: calc(2 * var(--vm)); flex: none; }
.rr-act { position: absolute; inset-inline-end: calc(.6 * var(--vm)); top: 50%; transform: translateY(-50%); display: flex; gap: calc(.5 * var(--vm)); opacity: 0; pointer-events: none; transition: opacity .2s; padding: calc(.3 * var(--vm)); border-radius: 99px; background: var(--panel); }
.rrow:hover .rr-act, .rrow:focus-within .rr-act { opacity: 1; pointer-events: auto; }
.rr-btn { width: calc(3.6 * var(--vm)); height: calc(3.6 * var(--vm)); min-width: 24px; min-height: 24px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); font-size: calc(1.7 * var(--vm)); display: grid; place-items: center; }
.rr-btn:hover { background: color-mix(in srgb, var(--bad) 55%, transparent); }
.rrow.blocked [data-mute] { background: color-mix(in srgb, var(--bad) 55%, transparent); }

/* ---------- pay-to-answer jar + reveal tickets ---------- */
.pay-jar { position: relative; overflow: visible; }
.jar-pile { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: calc(30 * var(--vm)); display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: calc(.3 * var(--vm)); pointer-events: none; }
.jar-pile .cdot { width: calc(2 * var(--vm)); height: calc(2 * var(--vm)); box-shadow: 0 calc(.2 * var(--vm)) calc(.4 * var(--vm)) rgba(0,0,0,.35); }
.pdots { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(.4 * var(--vm)); max-width: calc(16 * var(--vm)); min-height: calc(2.4 * var(--vm)); }
.pdots .cdot { width: calc(2.1 * var(--vm)); height: calc(2.1 * var(--vm)); }
.chance { font-weight: 900; font-size: calc(2 * var(--vm)); color: var(--gold); min-height: calc(2.6 * var(--vm)); opacity: 0; transition: opacity .3s; }
.ptile.flipped .chance { opacity: 1; }
.ptile.hot { transform: scale(1.08) translateY(calc(-.6 * var(--vm))); filter: drop-shadow(0 0 calc(2 * var(--vm)) var(--gold)); }
.tiles.reveal .ptile { transition: transform .12s, opacity .3s, filter .3s; }
.tiles.summary .ptile { animation-delay: calc(var(--i, 0) * .06s); }

/* ---------- phone pay button ---------- */
.pay-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pay-panel .muted.small { margin: 0; }
.pay-btn { width: 160px; height: 160px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--disp); font-size: 2.6rem; color: #6b3d00; touch-action: manipulation;
  background: radial-gradient(circle at 35% 30%, #fff6c2 0 12%, #ffd84d 34%, #f5a300 76%, #c47b00); box-shadow: inset 0 0 0 8px #ffde6b, 0 8px 0 #9a6000; transition: transform .06s; }
.pay-btn .coin { font-size: 2.4rem; }
.pay-btn:active { transform: translateY(6px); box-shadow: inset 0 0 0 8px #ffde6b, 0 2px 0 #9a6000; }
.pay-count { font-weight: 800; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pay-count b { font-family: var(--disp); font-size: 1.6rem; color: var(--gold); }
.maxed .pay-btn { filter: grayscale(.6) brightness(.85); }

/* ---------- version button + patch notes ---------- */
.ver { position: relative; align-self: center; background: var(--surf); border: 1px solid var(--line); border-radius: 99px; padding: 5px 14px; font-size: .78rem; font-weight: 700; color: var(--muted); opacity: .85; transition: .2s; }
.ver:hover { opacity: 1; color: var(--text); background: var(--surf2); }
.ver.new::after { content: ''; position: absolute; top: -2px; inset-inline-end: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); box-shadow: none; animation: pulse1 1.2s infinite; }
.modal.pn { max-width: 620px; }
.pn-head { display: flex; align-items: center; justify-content: space-between; }
.pn-head h2 { margin: 0; }
.pn-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.pn-entry { background: var(--surf); border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; animation: rise .5s var(--ease) both; animation-delay: var(--d); }
.pn-entry.cur { border-color: var(--pri); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pri) 30%, transparent); }
.pn-ver { display: flex; align-items: center; gap: 8px; }
.pn-ver b { font-size: 1.15rem; }
.pn-ver small { color: var(--muted); margin-inline-start: auto; font-weight: 700; }
.pn-badge { background: var(--pri); color: #fff; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.pn-entry ul { margin: 8px 0 0; padding-inline-start: 20px; line-height: 1.7; }
.pn-entry li { margin: 2px 0; }
.modal { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.bstat .share { color: var(--gold); font-weight: 900; margin-inline-start: calc(.4 * var(--vm)); }
/* bonus round: shrink the header once the question is on screen so nothing overlaps */
.bonus-wrap.compact { gap: calc(1.2 * var(--vm)); }
.bonus-wrap.compact .bonus-head { gap: calc(2 * var(--vm)); }
.bonus-wrap.compact .big-pig { font-size: calc(7 * var(--vm)); }
.bonus-wrap.compact .ph-title { font-size: calc(4.4 * var(--vm)); }
.bonus-wrap.compact .ph-sub { font-size: calc(2 * var(--vm)); }
.bonus-wrap.compact .bonus-amt { font-size: calc(5.5 * var(--vm)); }
.bonus-wrap.compact .bonus-amt .coin { font-size: calc(5 * var(--vm)); }
.bonus-wrap.compact .bonus-body { justify-content: flex-start; overflow-y: auto; gap: calc(1.4 * var(--vm)); }
.bonus-body .qcard { padding: calc(1.6 * var(--vm)) calc(2.4 * var(--vm)); gap: calc(1.2 * var(--vm)); flex: none; }
.bonus-body .qtext { font-size: calc(3.8 * var(--vm)); }
.bonus-body .qopt { font-size: calc(2.6 * var(--vm)); padding: calc(1 * var(--vm)) calc(1.6 * var(--vm)); }
.bonus-body .result-banner { padding: calc(1.4 * var(--vm)) calc(4 * var(--vm)); flex: none; }
.bonus-body .result-banner .rb-big { font-size: calc(4.4 * var(--vm)); }

.pcat-grid.dense { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcat-grid.dense .pcat { padding: 10px 4px 8px; border-radius: 16px; }
.pcat-grid.dense .pc-ic { font-size: 26px; }
.pcat-grid.dense .pc-nm { font-size: .78rem; }

/* ---------- host UI scale: every host size is in --vm, so one variable scales the whole TV screen ---------- */
:root { --vm: 1vmin; }
.host-screen { --vm: calc(1vmin * var(--hs, 1)); }
/* keep in-game content clear of the host control buttons at the bottom */
.in-game .stage > .lay { padding-bottom: calc(8 * var(--vm)); }
.ccard, .rcard, .pcard, .ptile { min-width: 0; }
.cc-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; }
.hctl .hs-btn { font-weight: 900; font-size: calc(2 * var(--vm)); }

/* ---------- starter coins, auto opt-in note, settings language toggle ---------- */
.cdot.starter { background: radial-gradient(circle at 35% 30%, #ffffff 0 14%, #e8eef6 40%, #a9b6c6 80%); box-shadow: 0 0 0 calc(.3 * var(--vm)) rgba(255,255,255,.7), 0 calc(.3 * var(--vm)) calc(.6 * var(--vm)) rgba(0,0,0,.35); }
.ante-note { font-weight: 800; color: var(--gold); background: rgba(255,200,61,.12); border: 1px dashed rgba(255,200,61,.6); padding: 6px 12px; border-radius: 12px; }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.set-head h2 { margin: 0; }
.set-lang { width: auto; }
/* ranked rail: room for rank, online dot, avatar, name, status and balance */
.in-game .rail { max-height: calc(100dvh - calc(12 * var(--vm))); }
.rrow .rr-dot { order: 0; }
.set-row.set-wide { grid-column: 1 / -1; flex-wrap: wrap; }
.set-row.set-wide small { display: block; font-weight: 600; }
.diff-seg { width: auto; flex-wrap: wrap; }
/* crowded games (up to 32 players): player lists shrink by --pk (set in fitCrowd), side-list rows by --rk, elimination cards by --ek */
.tiles, .voter-row, .legend { --vm: calc(1vmin * var(--hs, 1) * var(--pk, 1) * var(--fit, 1)); }
.rrow { --vm: calc(1vmin * var(--hs, 1) * var(--rk, 1)); }
.elim-row { --vm: calc(1vmin * var(--hs, 1) * var(--ek, 1) * var(--fit, 1)); }
/* each TV screen is fitted to the TV (host.js fitLay): --fit only ever shrinks it, so nothing spills off (also after A+) */
.host-screen .lay { --vm: calc(1vmin * var(--hs, 1) * var(--fit, 1)); }
.rail.two { width: calc(58 * var(--vm)); }
.rail.two .rrow { left: auto; right: auto; inset-inline-start: 0; width: calc(50% - .5 * var(--vm)); }
/* fortune wheel draw (big games): one slice per paying player, sized by tickets; --wd = wheel diameter */
.wheel-stage { --wd: min(calc(46 * var(--vm)), 48vh); display: flex; flex-direction: column; align-items: center; gap: calc(1.2 * var(--vm)); margin-top: calc(var(--wd) * .08); animation: popIn .6s var(--ease) both; }
.wheel-stage.hidden { display: none; }
.tiles.reveal.away { display: none; }
.wheel { position: relative; width: var(--wd); height: var(--wd); }
.wheel-rot { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.wheel svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 calc(1 * var(--vm)) calc(3 * var(--vm)) rgba(0,0,0,.45)); }
.wheel path, .wheel .seg { fill: var(--pc); stroke: rgba(255,255,255,.6); stroke-width: .5; transition: opacity .5s, filter .5s; }
.wheel.done path:not(.win), .wheel.done .wl { opacity: .28; filter: grayscale(.7); }
.wheel path.win, .wheel .seg.win { stroke: #fff; stroke-width: 2; filter: brightness(1.18) drop-shadow(0 0 3px #ffd166); }
.wl { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--wd) * .006); pointer-events: none; transition: opacity .5s, filter .5s; }
.wl b { font-weight: 900; font-size: calc(var(--wd) * .034); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); line-height: 1; }
.wheel-rim { position: absolute; inset: calc(var(--wd) * -.04); border-radius: 50%; border: calc(var(--wd) * .03) solid #3b2a12; box-shadow: inset 0 0 0 calc(var(--wd) * .006) var(--gold), 0 0 0 calc(var(--wd) * .006) var(--gold); pointer-events: none; }
.wheel-rim i { position: absolute; left: 50%; top: 50%; width: calc(var(--wd) * .022); height: calc(var(--wd) * .022); margin: calc(var(--wd) * -.011); border-radius: 50%; background: #fff3b0; box-shadow: none; animation: wbulb .9s infinite alternate; }
.wheel-rim i:nth-child(even) { animation-delay: .45s; }
@keyframes wbulb { from { opacity: .3; } to { opacity: 1; } }
.wheel-ptr { position: absolute; left: 50%; top: calc(var(--wd) * -.085); width: calc(var(--wd) * .09); height: calc(var(--wd) * .13); margin-left: calc(var(--wd) * -.045); transform-origin: 50% 15%; background: linear-gradient(#fff8d0, var(--gold) 70%, #b07400); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); z-index: 3; }
.wheel-ptr.flick { animation: wflick .14s ease-out; }
@keyframes wflick { 40% { transform: rotate(-16deg); } }
.wheel-hub { position: absolute; left: 50%; top: 50%; width: calc(var(--wd) * .23); height: calc(var(--wd) * .23); transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff8d0, var(--gold) 60%, #a86b00); box-shadow: 0 0 0 calc(var(--wd) * .012) #fff, 0 calc(var(--wd) * .01) calc(var(--wd) * .04) rgba(0,0,0,.5); z-index: 2; overflow: hidden; }
.hub-q { font-family: var(--disp); font-size: calc(var(--wd) * .13); color: #6b3d00; line-height: 1; }
.wheel-win { font-family: var(--disp); font-size: calc(4.2 * var(--vm)); min-height: calc(5 * var(--vm)); color: var(--gold); }
/* coin spinner: comet trail behind the highlight, then a thump when it lands */
.cdot.t1 { transform: scale(1.45); box-shadow: none; z-index: 1; }
.cdot.t2 { transform: scale(1.25); box-shadow: none; }
.cdot.t3 { transform: scale(1.1); box-shadow: none; }
.cdot.win { animation: dotLand .55s var(--ease); }
@keyframes dotLand { 0% { transform: scale(2.8); } 40% { transform: scale(1.6); } 70% { transform: scale(2.2); } 100% { transform: scale(2); } }
.landed { animation: cardThump .45s var(--ease); }
@keyframes cardThump { 0% { translate: 0 0; scale: 1; } 25% { translate: 0 calc(.8 * var(--vm)); scale: 1.05 .95; } 55% { translate: 0 calc(-.5 * var(--vm)); scale: .98 1.03; } 100% { translate: 0 0; scale: 1; } }
/* phones: the question is only on the TV; answers are big letter buttons */
.pq-tv { text-align: center; font-weight: 900; font-size: 1.1rem; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--acc) 16%, transparent); animation: tvNudge 2.4s ease-in-out infinite; }
@keyframes tvNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.popts.letters { grid-template-columns: 1fr 1fr; }
.popts.letters .popt { justify-content: center; min-height: 92px; padding: 10px; }
.popts.letters .popt .qo-l { width: auto; height: auto; min-width: 64px; padding: 8px 14px; font-size: 2.4rem; line-height: 1.2; border-radius: 16px; background: none; }
.popts.letters.tf .popt .qo-l { font-size: 1.7rem; }
.popts.letters.n3 .popt:last-child { grid-column: 1 / -1; }
/* cheat detection: a flagged player's row/card flashes red and white on the TV, with a 🚨 badge */
.cheat { animation: cheatFlash .7s steps(1, end) infinite !important; }
@keyframes cheatFlash { 0% { background: #e0002a; color: #fff; box-shadow: 0 0 0 calc(.4 * var(--vm)) #fff, 0 0 calc(3 * var(--vm)) #ff2b4a; } 50% { background: #fff; color: #c00020; box-shadow: 0 0 0 calc(.4 * var(--vm)) #e0002a, 0 0 calc(3 * var(--vm)) #ff2b4a; } }
.ptile.cheat, .pcard.cheat { border-radius: calc(2 * var(--vm)); position: relative; }
.ptile.cheat::after, .pcard.cheat::after { content: '🚨'; position: absolute; top: calc(-1.2 * var(--vm)); inset-inline-end: calc(-1 * var(--vm)); font-size: calc(3.4 * var(--vm)); z-index: 5; animation: wobble .6s infinite; }
.rr-clear { display: none; }
.rrow.cheat .rr-clear { display: grid; }
/* zoomed photo questions ("what is this?"): 4:3 frame, starts zoomed into one spot, pulls back on the reveal */
.qzoom { position: relative; width: min(calc(60 * var(--vm)), 100%); aspect-ratio: 4 / 3; max-height: 34vh; margin: 0 auto; border-radius: calc(2.2 * var(--vm)); overflow: hidden; background: #000; box-shadow: 0 0 0 calc(.4 * var(--vm)) var(--line), 0 calc(1.4 * var(--vm)) calc(4 * var(--vm)) calc(-1 * var(--vm)) var(--shade); animation: qzIn .9s var(--ease) both; }
.qzoom img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zs, 3)); transition: transform 2.2s cubic-bezier(.65, 0, .25, 1); user-select: none; }
.qzoom.out img { transform: scale(1); }
.qz-lens { position: absolute; top: calc(1 * var(--vm)); inset-inline-start: calc(1 * var(--vm)); font-size: calc(3 * var(--vm)); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); transition: opacity .6s; animation: bob 2s ease-in-out infinite; }
.qzoom.out .qz-lens { opacity: 0; }
.qz-credit { position: absolute; bottom: 0; left: 0; right: 0; padding: calc(.5 * var(--vm)) calc(1 * var(--vm)); font-size: calc(1.4 * var(--vm)); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); opacity: 0; transition: opacity .8s 1.8s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.qzoom.out .qz-credit { opacity: .85; }
@keyframes qzIn { from { opacity: 0; transform: scale(.85); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
/* tall content (a photo question + many players) must not slide up under the question card */
.arena { justify-content: safe center; }
.lay-q:has(.tiles) .qzoom { max-height: 28vh; }
/* picture questions: bigger photo on the TV with a small credit line; flags get a clean white frame */
.qpic { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: calc(.4 * var(--vm)); max-width: 100%; animation: qzIn .8s var(--ease) both; }
.qpic .qimg { max-height: 36vh; max-width: min(calc(70 * var(--vm)), 100%); object-fit: contain; }
.lay-q:has(.tiles) .qpic .qimg { max-height: 23vh; }
.qpic figcaption { font-size: calc(1.3 * var(--vm)); color: var(--muted); opacity: .8; max-width: calc(70 * var(--vm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qpic.flag .qimg { border-radius: calc(.6 * var(--vm)); box-shadow: 0 0 0 calc(.3 * var(--vm)) rgba(255,255,255,.85), 0 calc(1 * var(--vm)) calc(3 * var(--vm)) calc(-1 * var(--vm)) var(--shade); background: #fff; }
/* menu: back-to-game + practice buttons */
.mbtn.rejoin { background: linear-gradient(135deg, var(--good), color-mix(in srgb, var(--good) 55%, var(--acc))); color: #fff; animation: rejoinPulse 2.2s ease-in-out infinite; }
@keyframes rejoinPulse { 50% { transform: scale(1.015); } }
.mbtn.practice { background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 55%, #ff7a00)); color: #3b2300; }
/* join screen: open games found nearby */
.open-games { position: relative; z-index: 1; width: min(560px, 100%); margin: 14px auto 0; display: flex; flex-direction: column; gap: 10px; }
.og-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.og-list { display: flex; flex-direction: column; gap: 8px; }
.og-empty { text-align: center; padding: 10px; font-weight: 700; }
.og-game { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surf2); border: 1px solid var(--line); text-align: start; animation: rise .4s var(--ease) both; }
.og-game.mine { border-color: var(--good); box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 40%, transparent); }
.og-t { flex: 1; min-width: 0; } .og-t b { display: block; font-size: 1.05rem; } .og-t small { color: var(--muted); font-weight: 700; }
.og-code { font-family: var(--disp); font-size: 1.3rem; letter-spacing: 2px; color: var(--gold); }
.listed-btn.on { border-color: var(--good); }
/* practice mode */
.practice-screen { padding-bottom: 24px; }
.pr-intro { position: relative; z-index: 1; width: min(560px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; text-align: center; align-items: center; }
.pr-rates { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pr-rate, .pr-lv { padding: 4px 10px; border-radius: 99px; font-weight: 800; font-size: .85rem; background: var(--surf2); }
.l1 { color: var(--good); } .l2 { color: var(--gold); } .l3 { color: #ff9f40; } .l4 { color: var(--bad); }
.pr-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(720px, 100%); margin: 0 auto 8px; }
.pr-n { font-family: var(--disp); font-size: 1.5rem; }
.pr-coins { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 1.2rem; padding: 6px 12px; border-radius: 99px; background: var(--surf2); }
.pr-prog { position: relative; z-index: 1; width: min(720px, 100%); margin: 0 auto 12px; height: 6px; border-radius: 9px; background: var(--surf2); overflow: hidden; }
.pr-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--pri), var(--acc)); transition: width .5s var(--ease); }
.pr-card { position: relative; z-index: 1; width: min(720px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.pr-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-text { font-size: 1.35rem; font-weight: 900; line-height: 1.55; text-align: center; }
.pr-img { max-height: 38vh; max-width: 100%; margin: 0 auto; border-radius: 14px; object-fit: contain; }
.pr-zoom { width: min(100%, 520px); aspect-ratio: 4 / 3; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #000; }
.pr-zoom img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zs, 3)); transition: transform 2s cubic-bezier(.65, 0, .25, 1); }
.pr-zoom.out img { transform: scale(1); }
.pr-timer { height: 6px; border-radius: 9px; background: var(--surf2); overflow: hidden; }
.pr-timer i { display: block; height: 100%; background: var(--good); transform-origin: right; transition: transform .1s linear; }
[dir=ltr] .pr-timer i { transform-origin: left; }
.pr-timer i.hurry { background: var(--bad); }
.pr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-opts.n2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .pr-opts { grid-template-columns: 1fr; } .pr-opts.n2 { grid-template-columns: 1fr 1fr; } }
.pr-opt { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surf2); border: 2px solid var(--line); font-weight: 800; font-size: 1.05rem; text-align: start; transition: .2s var(--ease); }
.pr-opt .qo-l { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.pr-opt:not([disabled]):active { transform: scale(.97); }
.pr-opt.correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 25%, transparent); animation: bump .4s var(--ease); }
.pr-opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 22%, transparent); animation: shake .4s; }
.pr-opt[disabled]:not(.correct):not(.wrong) { opacity: .5; }
.pr-type { display: flex; gap: 10px; } .pr-type .inp { flex: 1; }
.pr-type .inp.good { border-color: var(--good); } .pr-type .inp.bad { border-color: var(--bad); }
.pr-result { display: flex; flex-direction: column; gap: 12px; }
.pr-res { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 16px; font-size: 1.1rem; text-align: center; }
.pr-res.good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); } .pr-res.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.pr-res b { font-size: 1.25rem; } .pr-gain { font-family: var(--disp); font-size: 1.6rem; color: var(--gold); }
.pr-stats { position: relative; z-index: 1; width: min(640px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.pr-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pr-big { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-size: 3.4rem; color: var(--gold); }
.pr-best { font-weight: 900; color: var(--gold); animation: pulse1 1s infinite; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; }
.pr-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .pr-stat > b { font-size: 1.5rem; } .pr-stat small { color: var(--muted); font-weight: 700; }
.pr-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--good) calc(var(--p) * 1%), var(--surf2) 0); }
.pr-ring b { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); font-size: .95rem; }
.pr-lvrow, .pr-catrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 700; }
.pr-catrow { justify-content: space-between; border-bottom: 1px solid var(--line); }
.pr-bar { flex: 1; height: 8px; border-radius: 9px; background: var(--surf2); overflow: hidden; } .pr-bar i { display: block; height: 100%; background: var(--good); }
/* profile photo crop editor */
.crop-modal { display: flex; flex-direction: column; gap: 12px; width: min(420px, 94vw); }
.crop-view { position: relative; width: min(280px, 72vw); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 22px; background: #111; touch-action: none; cursor: grab; user-select: none; }
.crop-view:active { cursor: grabbing; }
.crop-view img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; pointer-events: none; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.55); outline: 3px solid rgba(255,255,255,.9); outline-offset: -3px; pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 10px; } .crop-zoom input { flex: 1; accent-color: var(--pri); }
/* Legend banner: the colour band loops seamlessly (same colour at both ends) while the gold glow stays put */
.pc-banner.anim.anim2, .bn-sw.anim.anim2, .lb-bn.anim.anim2 { background-size: 100% 100%, 300% 100% !important; background-repeat: no-repeat, repeat-x !important; animation: bannerMove2 9s linear infinite; }
@keyframes bannerMove2 { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 300% 0; } }
/* profile photo: recommendation note + "you've been given a photo of…" */
.ave-note { text-align: center; font-weight: 700; font-size: .95rem; line-height: 1.6; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.rp-modal { width: min(400px, 94vw); }
.rp-box { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.rp-t { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 1.5rem; }
/* zoom photos are stored FULL (uncropped): the frame takes each photo's own shape (--ar = width/height), so zooming
   out on the reveal shows the whole original picture */
.qzoom { aspect-ratio: var(--ar, 4 / 3); max-height: none; width: min(calc(60 * var(--vm)), 100%, calc(34vh * var(--ar, 1.333))); }
.lay-q:has(.tiles) .qzoom { width: min(calc(60 * var(--vm)), 100%, calc(28vh * var(--ar, 1.333))); }
.qzoom img { object-fit: fill; }
.pr-zoom { aspect-ratio: var(--ar, 4 / 3); width: min(100%, 520px, calc(42vh * var(--ar, 1.333))); }
.pr-zoom img { object-fit: fill; }
/* photo spotlight: the photo opens big over the TV, then flies into the question card; host can click to enlarge */
.photo-ov { position: fixed; inset: 0; z-index: 70; cursor: zoom-out; }
.po-back { position: absolute; inset: 0; background: rgba(8, 4, 22, .74); backdrop-filter: blur(8px); animation: poFade .45s ease both; transition: opacity .6s; }
.photo-ov.closing .po-back { opacity: 0; }
.po-frame { position: fixed; transform-origin: 0 0; border-radius: calc(1.6 * var(--vm)); overflow: hidden; box-shadow: 0 calc(2 * var(--vm)) calc(8 * var(--vm)) rgba(0, 0, 0, .65), 0 0 0 calc(.4 * var(--vm)) rgba(255, 255, 255, .85); animation: poIn .6s var(--ease) both; }
.photo-ov.from-card .po-frame { animation: none; }
.po-frame > .qzoom, .po-frame > .qimg { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; visibility: visible !important; }
.po-frame > .qimg { display: block; object-fit: contain; background: #fff0; }
.po-frame .qz-lens { font-size: calc(5 * var(--vm)); }
.po-hidden { visibility: hidden; }
.qcard .qzoom, .qcard .qpic .qimg { cursor: zoom-in; }
@keyframes poFade { from { opacity: 0; } }
@keyframes poIn { from { opacity: 0; transform: scale(.82); filter: blur(6px); } }
/* pay phase: coin towers (10 per tower) sitting beside the total instead of a loose pile above it */
.pay-row { display: flex; align-items: flex-end; justify-content: center; gap: calc(2.4 * var(--vm)); }
.pay-row .jar-pile { position: static; transform: none; width: auto; min-width: calc(4 * var(--vm)); height: calc(8.4 * var(--vm)); display: flex; flex-wrap: nowrap; align-items: flex-end; gap: calc(.7 * var(--vm)); padding-bottom: calc(.6 * var(--vm)); }
.jp-col { display: flex; flex-direction: column-reverse; align-items: center; animation: popIn .35s var(--ease) both; }
.jp-coin { display: block; width: calc(3.6 * var(--vm)); height: calc(1.15 * var(--vm)); margin-top: calc(-.42 * var(--vm)); border-radius: 50%;
  background: linear-gradient(180deg, #fff3b0 0%, #ffd84d 38%, #e8a700 70%, #a86b00 100%);
  box-shadow: 0 calc(.12 * var(--vm)) 0 #8a5700, 0 calc(.25 * var(--vm)) calc(.5 * var(--vm)) rgba(0,0,0,.35);
  animation: jpDrop .38s cubic-bezier(.3,1.4,.5,1) both; animation-delay: var(--d, 0ms); }
.jp-coin:first-child { margin-top: 0; }
@keyframes jpDrop { from { opacity: 0; transform: translateY(calc(-5 * var(--vm))) scale(.9); } }

/* ===================== TEAMS MODE ===================== */
.mode-modal { width: min(560px, 94vw); }
.mode-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.mode-modal { width: min(760px, 96vw); }
.mode-card.versus:hover { border-color: #ff5d8f; }
.mode-card .mc-note { font-style: normal; font-size: .8rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, #ff5d8f 18%, transparent); color: #ffb3c8; }
@media (max-width: 520px) { .mode-pick { grid-template-columns: 1fr; } }
.mode-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; border-radius: 20px; background: var(--surf2); border: 2px solid var(--line); text-align: center; transition: .2s var(--ease); }
.mode-card:hover { transform: translateY(-3px); border-color: var(--pri); }
.mode-card.teams:hover { border-color: var(--acc); }
.mode-card .mc-ic { font-size: 2.6rem; } .mode-card b { font-family: var(--disp); font-weight: 400; font-size: 1.4rem; } .mode-card small { color: var(--muted); font-weight: 700; line-height: 1.5; }
.tm-name { color: var(--tc); font-weight: 900; }
.tm-dot { display: inline-block; width: calc(1.4 * var(--vm)); height: calc(1.4 * var(--vm)); border-radius: 50%; background: var(--tc); box-shadow: none; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(34 * var(--vm)), 1fr)); gap: calc(1.6 * var(--vm)); align-content: start; overflow: auto; flex: 1; padding: calc(1 * var(--vm)); }
.tm-card { position: relative; border-radius: calc(2.2 * var(--vm)); padding: calc(1.4 * var(--vm)); background: color-mix(in srgb, var(--tc) 14%, var(--panel)); border: calc(.35 * var(--vm)) solid color-mix(in srgb, var(--tc) 70%, transparent); display: flex; flex-direction: column; gap: calc(1 * var(--vm)); animation: rise .4s var(--ease) both; }
.tm-cname { font-family: var(--disp); font-size: calc(3.2 * var(--vm)); color: var(--tc); text-align: start; }
.tm-members { display: flex; flex-wrap: wrap; gap: calc(.8 * var(--vm)); }
.tm-chip { display: inline-flex; align-items: center; gap: calc(.6 * var(--vm)); padding: calc(.4 * var(--vm)) calc(1.2 * var(--vm)) calc(.4 * var(--vm)) calc(.4 * var(--vm)); border-radius: 99px; background: var(--surf2); border: 1px solid var(--line); font-weight: 800; font-size: calc(1.9 * var(--vm)); }
.tm-chip.off { opacity: .45; } .tm-chip.done { border-color: var(--good); } .tm-chip i { font-style: normal; }
.t-unass { padding: 0 calc(1 * var(--vm)); }
.tm-typing { position: absolute; top: calc(-1 * var(--vm)); inset-inline-end: calc(-.6 * var(--vm)); font-size: calc(2.6 * var(--vm)); animation: bob 1s infinite; }
[data-tlock].on { border-color: var(--gold); }
.tm-movelist { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .tm-mv { border: 2px solid var(--tc); }
.tm-cols { display: flex; flex-wrap: wrap; gap: calc(2 * var(--vm)); justify-content: center; align-items: flex-start; margin-top: calc(2 * var(--vm)); }
.tm-col { min-width: calc(30 * var(--vm)); max-width: calc(46 * var(--vm)); border-radius: calc(2.2 * var(--vm)); padding: calc(1.6 * var(--vm)); background: color-mix(in srgb, var(--tc) 12%, var(--panel)); border: calc(.35 * var(--vm)) solid color-mix(in srgb, var(--tc) 60%, transparent); display: flex; flex-direction: column; gap: calc(1.2 * var(--vm)); align-items: center; }
.tm-banner { display: inline-flex; align-items: center; gap: calc(1 * var(--vm)); padding: calc(.8 * var(--vm)) calc(2 * var(--vm)); border-radius: 99px; background: color-mix(in srgb, var(--tc) 25%, transparent); border: calc(.3 * var(--vm)) solid var(--tc); font-size: calc(2.8 * var(--vm)); }
.tm-banner .tm-dot { width: calc(1.6 * var(--vm)); height: calc(1.6 * var(--vm)); }
.tm-leader { display: flex; flex-direction: column; align-items: center; gap: calc(.6 * var(--vm)); font-size: calc(2.6 * var(--vm)); position: relative; }
.tm-leader .crown { font-size: calc(5 * var(--vm)); margin-bottom: calc(-2 * var(--vm)); z-index: 2; }
.tm-picked { display: flex; flex-wrap: wrap; gap: calc(1 * var(--vm)); justify-content: center; min-height: calc(4 * var(--vm)); }
.tm-picked .tm-dot { margin-inline-start: calc(.6 * var(--vm)); }
.tm-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: calc(1.2 * var(--vm)); padding: 0 calc(1 * var(--vm)); align-content: start; }
.tm-bcol { display: flex; flex-direction: column; gap: calc(.8 * var(--vm)); }
.tm-bhead { position: relative; min-height: calc(7 * var(--vm)); display: grid; place-items: center; text-align: center; padding: calc(.8 * var(--vm)); border-radius: calc(1.6 * var(--vm)); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 55%, #000 10%), color-mix(in srgb, var(--cc) 30%, var(--panel))); font-weight: 900; font-size: calc(2.1 * var(--vm)); line-height: 1.3; }
.tm-bhead i { position: absolute; top: calc(.6 * var(--vm)); inset-inline-end: calc(.6 * var(--vm)); width: calc(1.2 * var(--vm)); height: calc(1.2 * var(--vm)); border-radius: 50%; background: var(--tc); }
.tm-tile { height: calc(6.2 * var(--vm)); display: grid; place-items: center; border-radius: calc(1.4 * var(--vm)); font-family: var(--disp); font-size: calc(3.6 * var(--vm)); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4); transition: .35s var(--ease); }
.tm-tile.v200 { background: linear-gradient(135deg, #2ec4b6, #138a80); } .tm-tile.v400 { background: linear-gradient(135deg, #ffb703, #e07a00); } .tm-tile.v600 { background: linear-gradient(135deg, #ff4d6d, #b5172e); }
.tm-tile.used { background: color-mix(in srgb, var(--tc, #888) 22%, var(--surf2)); box-shadow: inset 0 0 0 calc(.25 * var(--vm)) color-mix(in srgb, var(--tc, #888) 60%, transparent); transform: scale(.94); }
.tm-tile.chosen { animation: tilePick .9s var(--ease) both; box-shadow: 0 0 0 calc(.5 * var(--vm)) #fff; z-index: 2; }
@keyframes tilePick { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1.12); } }
.tm-arena { gap: calc(1.6 * var(--vm)); }
.tm-val { font-family: var(--disp); color: var(--gold); margin-inline-start: calc(1 * var(--vm)); display: inline-flex; align-items: center; gap: calc(.5 * var(--vm)); }
.tm-val small { color: #fff; background: var(--bad); padding: 0 calc(.8 * var(--vm)); border-radius: 99px; font-size: .7em; }
.tm-status { display: flex; align-items: center; gap: calc(1 * var(--vm)); font-weight: 800; font-size: calc(2.4 * var(--vm)); color: var(--muted); }
.tm-items { display: flex; gap: calc(1 * var(--vm)); }
.tm-item { padding: calc(.6 * var(--vm)) calc(1.4 * var(--vm)); border-radius: 99px; background: var(--surf2); border: 1px solid var(--line); font-weight: 800; font-size: calc(1.9 * var(--vm)); }
.tm-item.spent { opacity: .35; text-decoration: line-through; } .tm-item.fired { animation: zoomBang .7s var(--ease) both; border-color: var(--gold); opacity: 1; text-decoration: none; }
.qopt.gone { opacity: .12; filter: grayscale(1); transform: scale(.95); transition: .5s; }
.tm-stealban { text-align: center; } .tm-stealbig { font-family: var(--disp); font-size: calc(8 * var(--vm)); color: var(--bad); animation: pulse1 .8s infinite; } .tm-stealban p { font-weight: 800; color: var(--muted); }
.tm-stealers { display: flex; gap: calc(1.2 * var(--vm)); flex-wrap: wrap; justify-content: center; }
.tm-stealer { padding: calc(.8 * var(--vm)) calc(2 * var(--vm)); border-radius: 99px; border: calc(.3 * var(--vm)) solid var(--tc); font-weight: 900; font-size: calc(2.4 * var(--vm)); }
.tm-stealer.won { background: var(--tc); color: #fff; animation: zoomBang .6s var(--ease) both; }
.tm-gain { font-family: var(--disp); font-size: calc(6 * var(--vm)); color: var(--gold); animation: zoomBang .7s var(--ease) both; }
.tm-rail { display: flex; flex-direction: column; gap: calc(.8 * var(--vm)); }
.tm-rrow { position: relative; display: flex; align-items: center; gap: calc(1 * var(--vm)); padding: calc(.8 * var(--vm)) calc(1.2 * var(--vm)); border-radius: calc(1.8 * var(--vm)); background: var(--surf); border: 1px solid var(--line); border-inline-start: calc(.6 * var(--vm)) solid var(--tc); transition: .4s var(--ease); }
.tm-rrow.turn { background: color-mix(in srgb, var(--tc) 22%, var(--surf)); box-shadow: none; transform: scale(1.03); }
.tm-rinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(.3 * var(--vm)); }
.tm-rname { font-weight: 900; font-size: calc(2.1 * var(--vm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tc); }
.tm-ravs { display: flex; gap: calc(.3 * var(--vm)); align-items: center; }
.tm-ritems { display: flex; gap: calc(.2 * var(--vm)); font-size: calc(1.6 * var(--vm)); } .tm-ritems i { font-style: normal; } .tm-ritems i.spent { opacity: .25; filter: grayscale(1); }
.tm-podavs { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(.3 * var(--vm)); max-width: calc(22 * var(--vm)); }
.tm-endrest { display: flex; flex-direction: column; gap: calc(.8 * var(--vm)); width: min(100%, calc(110 * var(--vm))); margin: 0 auto; }
.tm-erow { display: flex; align-items: center; gap: calc(2 * var(--vm)); padding: calc(1 * var(--vm)) calc(2 * var(--vm)); border-radius: calc(1.6 * var(--vm)); background: var(--surf); border-inline-start: calc(.6 * var(--vm)) solid var(--tc); font-weight: 800; font-size: calc(2.2 * var(--vm)); }
.tm-erow .er-c { margin-inline-start: auto; color: var(--gold); font-family: var(--disp); }
.tp-teams { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tp-team { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--tc) 14%, var(--surf2)); border: 2px solid color-mix(in srgb, var(--tc) 60%, transparent); text-align: start; }
.tp-team b { flex: 1; color: var(--tc); font-size: 1.1rem; } .tp-team.mine { box-shadow: 0 0 0 3px var(--tc); } .tp-team small { color: var(--muted); font-weight: 800; }
.tp-avs { display: flex; gap: 2px; } .tp-avs.big { flex-wrap: wrap; gap: 10px; justify-content: center; } .tp-avs.big span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; font-size: .8rem; }
.tp-create { display: flex; gap: 8px; width: 100%; } .tp-create .inp { flex: 1; }
.tp-sw { width: 100%; } .tp-sw summary { cursor: pointer; font-weight: 800; color: var(--muted); text-align: center; padding: 8px; }
.tp-sw[open] { display: flex; flex-direction: column; gap: 10px; }
.tp-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 99px; background: color-mix(in srgb, var(--tc) 22%, transparent); border: 2px solid var(--tc); font-weight: 900; }
.tp-badge b { color: var(--tc); }
.tp-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; width: 100%; }
.tp-cand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 18px; background: var(--surf2); border: 2px solid var(--line); font-weight: 800; position: relative; }
.tp-cand.on { border-color: var(--gold); box-shadow: none; } .tp-cand i { position: absolute; top: 6px; inset-inline-end: 8px; font-style: normal; color: var(--gold); }
.tp-board { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 5px; width: 100%; }
.tp-bcol { display: flex; flex-direction: column; gap: 5px; }
.tp-bh { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: color-mix(in srgb, var(--cc) 40%, var(--surf2)); font-size: 1.2rem; min-height: 62px; justify-content: center; }
.tp-bh small { font-size: .62rem; font-weight: 800; text-align: center; line-height: 1.2; }
.tp-tile { height: 44px; border-radius: 10px; font-family: var(--disp); font-size: 1.15rem; color: #fff; }
.tp-tile.v200 { background: linear-gradient(135deg, #2ec4b6, #138a80); } .tp-tile.v400 { background: linear-gradient(135deg, #ffb703, #e07a00); } .tp-tile.v600 { background: linear-gradient(135deg, #ff4d6d, #b5172e); }
.tp-tile[disabled] { opacity: .85; } .tp-tile[disabled]:empty { background: var(--surf2); opacity: .4; }
.tp-tile.chosen { box-shadow: 0 0 0 3px #fff; transform: scale(1.1); }
.tp-qhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tp-vote { position: relative; } .tp-vote.lsel { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold); }
.tp-vc { position: absolute; top: 6px; inset-inline-start: 8px; min-width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; background: var(--acc); color: #fff; font-style: normal; font-weight: 900; font-size: .85rem; padding: 0 6px; }
.tp-items { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tp-steal { font-size: 2rem !important; padding: 26px !important; background: linear-gradient(135deg, var(--bad), #ff8c42) !important; animation: pulse1 .7s infinite; }
.tc-wrap { position: fixed; z-index: 40; inset-inline-start: 12px; top: 74px; }
.tc-btn { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--pri), var(--acc)); font-size: 1.5rem; box-shadow: 0 8px 22px -8px var(--shade); position: relative; }
.tc-n { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 22px; height: 22px; border-radius: 99px; background: var(--bad); color: #fff; font-size: .8rem; display: grid; place-items: center; padding: 0 5px; }
.tc-drawer { position: fixed; inset: auto 10px 10px 10px; height: min(70vh, 520px); border-radius: 20px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 -10px 40px -10px var(--shade); display: flex; flex-direction: column; overflow: hidden; animation: rise .3s var(--ease) both; backdrop-filter: blur(16px); }
.tc-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tc-log { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tc-msg { align-self: flex-start; max-width: 80%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 14px; background: var(--surf2); }
.tc-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--pri) 35%, var(--surf2)); }
.tc-msg small { color: var(--muted); font-weight: 800; font-size: .72rem; } .tc-msg span { word-break: break-word; }
.tc-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .tc-form input { flex: 1; }
.tm-names { display: flex; flex-direction: column; gap: 8px; }
.tm-nrow { display: flex; align-items: center; gap: 10px; } .tm-nrow i { width: 16px; height: 16px; border-radius: 50%; flex: none; } .tm-nrow .inp { flex: 1; }
.tm-setup { width: min(440px, 94vw); display: flex; flex-direction: column; gap: 10px; }
.lay-tlobby .lobby-head, .lay-mtlobby .lobby-head, .lay-lobby .lobby-head, .lay-mlobby .lobby-head { flex-wrap: wrap; gap: calc(1 * var(--vm)); }
.lay-tlobby .lobby-head .row, .lay-mtlobby .lobby-head .row, .lay-lobby .lobby-head .row, .lay-mlobby .lobby-head .row { flex-wrap: wrap; justify-content: flex-end; gap: calc(.8 * var(--vm)); }
/* wins badge on every profile card (lobby, setup, profile) */
.pcard { position: relative; }
.pc-wins { position: absolute; top: 6px; inset-inline-end: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font-weight: 900; font-size: .9rem; backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.pc-wins.has { background: linear-gradient(135deg, #ffd84d, #f5a300); color: #4a2a00; box-shadow: none; }
.pgrid .pc-wins { top: calc(.8 * var(--vm)); inset-inline-end: calc(1 * var(--vm)); font-size: calc(2.2 * var(--vm)); padding: calc(.4 * var(--vm)) calc(1.2 * var(--vm)); }
.pcard.big .pc-wins { font-size: calc(2.4 * var(--vm)); }

/* ===================== VERSUS MODE (phones) ===================== */
.mbtn.versus { background: linear-gradient(135deg, #ff4d6d, #7b2ff7); color: #fff; }
.vs-lobby { display: flex; flex-direction: column; gap: 12px; }
.vs-codebox { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.vs-qr { background: #fff; padding: 8px; border-radius: 12px; }
.vs-set { display: flex; flex-direction: column; gap: 2px; }
.vs-lps { display: flex; flex-direction: column; gap: 8px; }
.vs-lp { position: relative; } .vs-lp.off { opacity: .45; }
.vs-crown { position: absolute; bottom: 10px; inset-inline-end: 12px; font-size: 1.4rem; }
.vs-kick { position: absolute; bottom: 8px; inset-inline-end: 8px; }
.vs-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; margin-bottom: 6px; }
.vs-pl { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 54px; padding: 6px 4px; border-radius: 14px; background: var(--surf2); border: 2px solid transparent; font-size: .8rem; transition: .2s; }
.vs-pl.me { border-color: var(--pc); } .vs-pl.off { opacity: .4; } .vs-pl.done { background: color-mix(in srgb, var(--good) 22%, var(--surf2)); }
.vs-pl b { font-weight: 900; color: var(--gold); } .vs-pl small { font-weight: 800; }
.vs-pl em { position: absolute; top: -4px; inset-inline-start: -4px; font-style: normal; font-size: .8rem; animation: cheatFlash .7s steps(1, end) infinite; border-radius: 99px; padding: 0 3px; }
.vs-pl i { position: absolute; top: -4px; inset-inline-end: -2px; font-style: normal; color: var(--good); font-weight: 900; }
.vs-qhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .vs-qhead > b { font-family: var(--disp); font-size: 1.2rem; }
.vs-val { font-weight: 900; padding: 4px 10px; border-radius: 99px; background: var(--surf2); display: inline-flex; align-items: center; gap: 4px; }
.vs-card { margin: 8px 0 12px; gap: 10px; }
.pr-opt.sel { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 22%, transparent); }
.vs-fast { font-weight: 900; color: var(--gold); animation: pulse1 .8s 2; }
.pcat.banned { opacity: .25; filter: grayscale(1); transform: scale(.9); position: relative; transition: .35s var(--ease); }
.pcat.banned::after { content: '⛔'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.8rem; animation: popIn .3s var(--ease); }
.vs-can .pcat { animation: rise .3s var(--ease) both; }
.vs-wait .pcat { opacity: .85; }
.vs-cats { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.vs-rwin { font-family: var(--disp); font-size: 1.4rem; color: var(--gold); }
.vs-rws { font-size: .9rem; }
.vs-stats { width: 100%; }

/* ---------- phones: keep it smooth ----------
   Blurring the page behind every card (backdrop-filter) while the background blobs keep moving makes a
   phone's GPU repaint the whole screen every frame — taps then wait for it. On touch screens: no backdrop
   blur and a still background. */
@media (pointer: coarse) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .bgfx i, .bgfx b { animation: none !important; }
  /* a blur filter over four screen-sized circles is the costliest thing a phone can be asked to draw:
     the same soft glow as a plain radial gradient, painted once */
  .bgfx i { filter: none; }
  .bgfx i:nth-child(1) { background: radial-gradient(closest-side, var(--pri) 30%, transparent); }
  .bgfx i:nth-child(2) { background: radial-gradient(closest-side, var(--acc) 30%, transparent); }
  .bgfx i:nth-child(3) { background: radial-gradient(closest-side, var(--bg3) 30%, transparent); }
  .bgfx i:nth-child(4) { background: radial-gradient(closest-side, var(--pri2) 30%, transparent); }
  .bgfx { transform: translateZ(0); }
  /* glows that animate a shadow repaint every frame: keep them still */
  .bd-neon, .bd-diamond { animation: none !important; }
  /* while the page scrolls, every looping effect (borders, banners, badges) waits, so the scroll gets the whole frame */
  html.is-scrolling *, html.is-scrolling *::before, html.is-scrolling *::after { animation-play-state: paused !important; }
  .modal-back { background: rgba(0,0,0,.68); }
  .toast { background: color-mix(in srgb, var(--bg1) 92%, transparent); }
  .game-card::after { display: none; }
}

.vs-stay { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, #ffb020 18%, transparent); color: #ffd27a; font-weight: 800; line-height: 1.4; }

/* ---------- على نفس الموجة / Match the Host ---------- */
.mh-page .logo-coin { background: radial-gradient(circle at 35% 30%, #c8fff4, #2ee6c9 45%, #3a86ff); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); border-color: #b6fff1; }
.mh-page .logo-coin span { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.25); font-family: inherit; }
.mh-page .logo.big .logo-coin span { font-size: 54px; margin-top: 0; }
.mbtn.mh-create { background: linear-gradient(135deg, #2ee6c9, #3a86ff); }
.mh-strip .vs-pl { padding-top: 10px; }
.mh-crown { position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: .95rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.mh-lastwin { text-align: center; font-weight: 900; color: var(--gold); padding: 8px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.mh-rules { margin: 0; line-height: 1.6; }
.mh-lp { position: relative; border-radius: 20px; transition: transform .15s var(--ease), box-shadow .2s; }
.mh-lp.pickable { cursor: pointer; } .mh-lp.pickable:active { transform: scale(.98); }
.mh-hosttag { position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: 3; padding: 4px 12px; border-radius: 99px; font-weight: 900; font-size: .85rem; line-height: 1.2;
  background: linear-gradient(135deg, #ffe08a, #f5a300); color: #4a2a00; box-shadow: none; animation: popIn .35s var(--ease); }
.mh-kick { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; line-height: 1;
  font-size: .8rem; font-weight: 900; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); }
.mh-kick:hover { background: #ff3d6e; }
.mh-taphint { display: block; padding-top: 6px; line-height: 1.5; }
.mh-hn { color: var(--gold); }
.set-hint { display: block; margin-top: 6px; line-height: 1.5; }
.mh-randrow { cursor: pointer; }
.mh-check { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--pri); cursor: pointer; }
.mh-lp.next .pcard { box-shadow: 0 0 0 3px var(--gold); border-radius: 18px; }
/* the host roulette */
.mh-pick h2 { margin: 0; }
.mh-wheel { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 16px 0; }
.mh-face { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 18px; opacity: .45; transform: scale(.92); transition: transform .12s, opacity .12s, background .12s; }
.mh-face small { font-weight: 800; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-face.on { opacity: 1; transform: scale(1.08); background: var(--surf2); }
.mh-face.win { opacity: 1; transform: scale(1.18); background: color-mix(in srgb, var(--gold) 25%, transparent); box-shadow: 0 0 0 3px var(--gold); animation: mhWin .6s var(--ease); }
@keyframes mhWin { 40% { transform: scale(1.35) rotate(-6deg); } 70% { transform: scale(1.12) rotate(4deg); } }
.mh-picked { min-height: 1.4em; font-family: var(--disp); font-weight: 400; font-size: 1.8rem; color: var(--gold); animation: popIn .5s var(--ease) both; }
/* the prompt */
.mh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mh-head > b { font-family: var(--disp); font-weight: 400; font-size: 1.2rem; }
.mh-hostchip { font-weight: 900; padding: 4px 12px; border-radius: 99px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-qcard { position: relative; margin: 10px 0 14px; padding: 22px 18px 20px; border-radius: 22px; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, #2ee6c9 22%, var(--surf)), color-mix(in srgb, #3a86ff 22%, var(--surf))); border: 1px solid color-mix(in srgb, #2ee6c9 45%, transparent); box-shadow: none; }
.mh-cat { display: inline-block; font-weight: 800; font-size: .85rem; padding: 3px 12px; border-radius: 99px; background: var(--surf2); margin-bottom: 10px; }
.mh-qtext { font-family: var(--disp); font-size: clamp(1.5rem, 6.5vw, 2.1rem); line-height: 1.35; }
.mh-ask { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.mh-ask.host b { color: var(--gold); }
.mh-hoststat { margin-top: 12px; text-align: center; font-weight: 800; color: var(--muted); animation: pulse 1.4s ease-in-out infinite; }
.mh-hoststat.ready { color: var(--good); animation: none; }
.mh-sent { text-align: center; font-weight: 800; margin-top: 12px; }
.mh-skip { text-align: center; font-weight: 900; font-size: 1.15rem; padding: 18px; border-radius: 18px; background: var(--surf2); }
/* the reveal */
.mh-qmini { text-align: center; font-weight: 800; color: var(--muted); margin: 4px 0 10px; }
.mh-hostslot { position: relative; min-height: 92px; margin-bottom: 12px; perspective: 600px; }
.mh-hostcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 14px; border-radius: 22px; text-align: center;
  background: linear-gradient(135deg, #ffd36b, #ff9f1c 60%, #ff5d8f); color: #2a1300; box-shadow: inset 0 -5px 0 rgba(0,0,0,.15); }
.mh-hostcard small { font-weight: 900; opacity: .8; }
.mh-hostcard b { font-family: var(--disp); font-weight: 400; font-size: clamp(1.6rem, 7vw, 2.3rem); line-height: 1.2; word-break: break-word; }
.mh-hostslot .mh-hostcard { opacity: 0; transform: translateY(-140%) rotate(-18deg) scale(.7); }
.mh-hostslot.drum::before { content: '🥁 ؟'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; border-radius: 22px; border: 3px dashed color-mix(in srgb, var(--gold) 60%, transparent); animation: mhDrum .18s ease-in-out infinite alternate; }
@keyframes mhDrum { to { transform: scale(1.04) rotate(1.5deg); } }
.mh-hostslot.drop .mh-hostcard { opacity: 1; transform: none; animation: mhDrop 1s cubic-bezier(.2,1.4,.4,1); }
.mh-hostslot.shown .mh-hostcard { opacity: 1; transform: none; }
@keyframes mhDrop {
  0% { opacity: 0; transform: translateY(-160%) rotate(-25deg) scale(.6); }
  55% { opacity: 1; transform: translateY(8%) rotate(8deg) scale(1.08); }
  72% { transform: translateY(-4%) rotate(-5deg) scale(.98); }
  86% { transform: translateY(2%) rotate(2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
.mh-shake { animation: mhShake .55s cubic-bezier(.36,.07,.19,.97) .5s both; }
@keyframes mhShake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 3px) rotate(-.4deg); } 40%, 60% { transform: translate(7px, -3px) rotate(.4deg); } }
/* the guesses: a compact grid (two or more per row) so many fit on a phone; finished animations let go
   of the rows, so scrolling doesn't keep a layer per row */
.mh-guesses { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.mh-guess { --dx: 24px; position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 12px; background: var(--surf2); border: 2px solid transparent; transition: border-color .25s, background .25s; contain: layout paint; min-width: 0; }
[dir=rtl] .mh-guess { --dx: -24px; }
.mh-guess:not(.in) { opacity: 0; }
.mh-guess.in { animation: mhIn .4s var(--ease); }
@keyframes mhIn { from { opacity: 0; transform: translateX(var(--dx)) scale(.96); } }
.mh-guess .grow { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mh-guess small { font-weight: 800; font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-guess b { font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: left; }
[dir=rtl] .mh-guess b { text-align: right; }
.mh-guess.none b { color: var(--muted); font-weight: 600; font-size: .85rem; }
.mh-guess .av * { animation: none !important; }
.mh-mark { font-size: 1rem; min-width: 1.2em; text-align: center; flex: none; }
.mh-guess.ok { border-color: var(--good); background: color-mix(in srgb, var(--good) 20%, var(--surf2)); }
.mh-guess.ok .mh-mark { animation: popIn .4s var(--ease); }
.mh-guess.no { opacity: .75; }
.mh-guess.tap { cursor: pointer; }
.mh-guess.tap:active { transform: scale(.97); }
.mh-foot { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.mh-wait { animation: pulse 1.4s ease-in-out infinite; }
/* results + end */
.mh-res { gap: 14px; } .mh-res .mh-hostcard { width: 100%; }
.mh-gains { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mh-gain { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 16px; background: var(--surf2); }
.mh-gain b { color: var(--gold); font-weight: 900; }
.mh-end { gap: 12px; }

/* ---------- emoji icons sit dead-centre in their boxes ----------
   the page font's tall line height pushed emoji off-centre; icon boxes use a line height of 1 */
.mb-ic, .hs-ic, .mc-ic, .sbtn span, .ct-ic, .soc-btn, .gc-art span, .hub-mark span, .logo-coin span, .big-emo, .re-btn, .mh-crown, .bdg-e { line-height: 1; }
.mb-ic, .hs-ic, .ct-ic { text-align: center; }
.mb-ic > *, .hs-ic > * { display: block; }
.sbtn span { display: grid; place-items: center; height: 1.2em; }
/* "back to your game" + its red ✕ */
.rejoin-wrap { position: relative; display: flex; transition: opacity .25s, transform .25s; }
.rejoin-wrap .mbtn { flex: 1; padding-inline-end: 64px; }
.rejoin-x { position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1rem; font-weight: 900; line-height: 1; color: #fff; background: #ff3d6e; box-shadow: 0 3px 0 rgba(0,0,0,.25); transition: transform .15s var(--ease), filter .15s; }
.rejoin-x:hover { filter: brightness(1.1); transform: translateY(-50%) scale(1.08); }
.rejoin-x:active { transform: translateY(-50%) scale(.92); }
.rejoin-wrap.out { opacity: 0; transform: scale(.96); }
@media (max-width: 430px) {
  .rejoin-wrap .mbtn { padding-inline-end: 54px; }
  .rejoin-wrap .mbtn b { font-size: 1.35rem; }
  .rejoin-x { width: 34px; height: 34px; inset-inline-end: 12px; font-size: .9rem; }
}

/* ---------- in a game: nothing can be selected, copied, long-pressed or dragged (anti-cheat) ---------- */
html.in-game, html.in-game *:not(input):not(textarea) { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
html.in-game img { -webkit-user-drag: none; pointer-events: none; }

/* ---------- mode pages (?game=teams / versus) ---------- */
.pg-teams .logo-coin { background: radial-gradient(circle at 35% 30%, #c8ffe9, #06d6a0 45%, #118ab2); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); }
.pg-versus .logo-coin { background: radial-gradient(circle at 35% 30%, #ffd1dc, #ff4d6d 45%, #7b2ff7); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); }
.pg-teams .logo-coin span, .pg-versus .logo-coin span { font-family: inherit; margin-top: 0; text-shadow: none; }
.pg-teams .logo.big .logo-coin span, .pg-versus .logo.big .logo-coin span { font-size: 50px; }
.mbtn.mbtn-teams { background: linear-gradient(135deg, #06d6a0, #118ab2); color: #fff; }
.mbtn.mbtn-vs { background: linear-gradient(135deg, #ff4d6d, #7b2ff7); color: #fff; }
/* Board of Questions — manual mode: the host's Next button, and categories / tiles the host can click */
.man-next { position: fixed; bottom: calc(1.4 * var(--vm)); inset-inline-end: calc(1.4 * var(--vm)); z-index: 55; font-size: calc(2.4 * var(--vm)); padding: calc(1.2 * var(--vm)) calc(2.8 * var(--vm)); border-radius: 99px; display: inline-flex; align-items: center; gap: calc(.8 * var(--vm)); opacity: .75; transition: opacity .25s, transform .2s; }
.man-next:hover { opacity: 1; }
.man-next.ready { opacity: 1; animation: manReady 1.3s ease-in-out infinite; }
@keyframes manReady { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.lay-tboard .tm-tile:not(.used), .lay-tpick [data-cat] { cursor: pointer; }
/* the team's typed answer + ✔ Accept answer */
.tm-theirs { display: flex; align-items: center; justify-content: center; gap: calc(1.2 * var(--vm)); flex-wrap: wrap; margin: calc(.8 * var(--vm)) 0; font-size: calc(2.2 * var(--vm)); font-weight: 800; }
.tm-theirs b { color: var(--text); background: var(--surf2); padding: calc(.3 * var(--vm)) calc(1.2 * var(--vm)); border-radius: calc(1 * var(--vm)); }
.tm-theirs .btn { font-size: calc(2 * var(--vm)); }
/* popups: the page behind stays put, and scrolling inside a popup never carries on into the page */
html.modal-open, html.modal-open body { overflow: hidden; }
.modal-back { overscroll-behavior: contain; outline: none; }
.modal-back, .modal-back * { overscroll-behavior: contain; }
.modal { -webkit-overflow-scrolling: touch; }
.logo-tag, .ph-sub, .how-intro, .setup p.muted { text-wrap: balance; }

/* ======================================================================
   Desktop and tablet (wide screens): more room, side-by-side tiles
   ====================================================================== */
@media (min-width: 900px) {
  .screen { padding: 24px 32px; }
  .menu { width: min(860px, 100%); gap: 26px; }
  .menu-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .menu-main > .mbtn { flex-direction: column; justify-content: center; text-align: center; gap: 14px; padding: 30px 22px; min-height: 220px; }
  .menu-main > .mbtn .mb-ic { width: 92px; height: 92px; font-size: 54px; border-radius: 26px; }
  .menu-main > .mbtn b { font-size: 1.9rem; }
  .menu-main > .mbtn small { font-size: 1rem; }
  /* extra buttons (back to your game, resume, practice) run across both columns */
  .menu-main > :not(.mbtn), .menu-main > .mbtn.rejoin, .menu-main > .mbtn.resume, .menu-main > .mbtn.practice,
  .menu-main > .mbtn:only-child, .menu-main > .mbtn:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
  .menu-main > .mbtn.rejoin, .menu-main > .mbtn.resume, .menu-main > .mbtn.practice { flex-direction: row; text-align: start; min-height: 0; padding: 18px 22px; }
  .menu-main > .mbtn.rejoin .mb-ic, .menu-main > .mbtn.resume .mb-ic, .menu-main > .mbtn.practice .mb-ic { width: 64px; height: 64px; font-size: 40px; }
  .menu-main > .mbtn:hover { transform: translateY(-4px); }
  .menu-sub { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
  .sbtn { padding: 18px 10px; }

  .topbar { max-width: 980px; }
  .settings { width: min(900px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; align-items: start; }
  .settings > .card:nth-child(2), .settings > .btn, .settings > :last-child { grid-column: 1 / -1; }
  .howto { width: min(1000px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .howto > .how-intro, .howto > .btn { grid-column: 1 / -1; }
  .how-step { height: 100%; box-sizing: border-box; }
  .join-box, .suggest { width: min(640px, 100%); }
  .prof { width: min(640px, 100%); }
}
@media (min-width: 900px) { .topbar { max-width: 900px; } }
/* Settings: "Don't force my game language to Arabic" */
.set-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surf2); cursor: pointer; text-align: start; }
.set-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--pri); cursor: pointer; }
.set-check span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-check b { font-size: .98rem; line-height: 1.35; }
.set-check small { color: var(--muted); font-size: .84rem; line-height: 1.45; }
/* sign-in / first setup: a small language switch in the card's corner */
.setup { position: relative; }
.lang-pill { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: auto; padding: 3px; gap: 2px; }
.lang-pill button { padding: 5px 11px; font-size: .78rem; min-height: 0; }
.setup:has(.lang-pill) > .logo { margin-top: 34px; }
.setup:has(.lang-pill) > .hub-logo { margin-top: 38px; }
.lang-pill, .lang-pill button { border-radius: 99px; } .lang-pill button { flex: none; }
/* popups get a solid surface in the theme's colours (phones draw no blur, so a see-through popup showed the page through it) */
.modal { background: linear-gradient(165deg, color-mix(in srgb, var(--bg2) 60%, var(--bg1)), color-mix(in srgb, var(--bg1) 96%, var(--bg2))); border-color: color-mix(in srgb, var(--line) 100%, transparent); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); }
/* Join screen on wide screens: the code box and the open games side by side */
@media (min-width: 980px) {
  .screen:has(> .join-box) { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 440px); justify-content: center; gap: 0 24px; align-content: start; }
  .screen:has(> .join-box) > .topbar { grid-column: 1 / -1; max-width: 984px; }
  .screen:has(> .join-box) > .join-box, .screen:has(> .join-box) > .open-games { width: 100%; margin: 0; align-self: stretch; }
  .screen:has(> .join-box) > .open-games .og-list { flex: 1; }
}
/* Profile on wide screens: the preview stays on one side while you edit on the other */
@media (min-width: 980px) {
  .prof { width: min(1060px, 100%); display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: 18px 22px; align-items: start; }
  .prof > .prof-head { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 16px; }
  .prof > :not(.prof-head) { grid-column: 2; }
  .prof .statrow { grid-template-columns: repeat(2, 1fr); }
  .topbar:has(+ .prof) { max-width: 1060px; }
}
/* desktop polish: keyboard focus rings, slim themed scrollbars, themed text selection */
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pri) 45%, var(--line)) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pri) 40%, var(--line)); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-track { background: transparent; }
  .sbtn, .game-card, .mbtn, .soc-btn, .cred-chip, .me-chip, .shop-item, .lb-tab, .theme-sw, .og-game, .tm-tile, .ccard { cursor: pointer; }
}
:where(button, a, [tabindex]:not(.modal-back)):focus-visible { outline: 3px solid color-mix(in srgb, var(--acc) 80%, #fff); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--pri) 55%, transparent); color: #fff; }

.qr-btn { background: var(--surf2); border: 1px dashed color-mix(in srgb, var(--acc) 55%, var(--line)); font-weight: 800; }
.qr-btn:hover { background: color-mix(in srgb, var(--acc) 14%, var(--surf2)); }

/* sign-in on a computer: the form and "sign in with your phone" side by side */
.auth-wrap { width: 100%; display: flex; justify-content: center; position: relative; z-index: 1; }
.auth-wrap.has-qrl { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 360px); gap: 22px; justify-content: center; align-items: stretch; }
.auth-wrap > .setup { margin: 0 auto; }
.qrl-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.qrl-panel h3 { margin: 4px 0 0; font-size: 1.25rem; }
.qrl-code { width: 236px; height: 236px; padding: 8px; border-radius: 20px; background: #fff; display: grid; place-items: center; box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); }
.qrl-code img, .qrl-code canvas { display: block; border-radius: 6px; }
.qrl-steps { margin: 0; padding-inline-start: 22px; text-align: start; color: var(--muted); font-size: .9rem; line-height: 1.6; display: flex; flex-direction: column; gap: 4px; }
.qrl-status { margin: 0; min-height: 1.4em; font-weight: 800; font-size: .92rem; color: var(--muted); }
.qrl-status.on { color: var(--acc); } .qrl-status.good { color: var(--good); } .qrl-status.bad { color: var(--bad); }
.qrl-ask { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.qrl-ask h3 { margin: 0; }
.qrl-ask .qrl-dev { margin: 0; font-weight: 800; }
.qrl-warn { margin: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--gold, #ffc83d) 16%, transparent); font-size: .9rem; line-height: 1.55; }
.qrl-ask .row { width: 100%; }
/* hold to translate: the text in the other language while held */
[data-tr] { -webkit-touch-callout: none; }
.tr-on { animation: trOn .18s ease; outline: 2px dashed color-mix(in srgb, var(--acc) 70%, transparent); outline-offset: 4px; border-radius: 8px; }
@keyframes trOn { from { opacity: .3; } }

/* ---------- المزاد / The Auction ---------- */
.mbtn.mbtn-mazad { background: linear-gradient(135deg, #e0a84a, #8b4a1f); color: #fff; }
.mz-mode.on { background: color-mix(in srgb, var(--pri) 22%, transparent); border-color: var(--pri); }
.lay-mq { gap: calc(2 * var(--vm)); }
.lay-mq.answering .arena { justify-content: space-evenly; }
.lay-mq:has(.mz-block) .qzoom { max-height: 26vh; width: min(calc(56 * var(--vm)), 100%, calc(26vh * var(--ar, 1.333))); }
.lay-mq:has(.mz-block) .qpic .qimg { max-height: 21vh; }
.mz-arena { gap: calc(1.6 * var(--vm)); }
/* category intro */
.mz-catintro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2.4 * var(--vm)); }
.mz-catbig { display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--vm)); padding: calc(3 * var(--vm)) calc(7 * var(--vm)); border-radius: calc(4 * var(--vm)); background: color-mix(in srgb, var(--cc) 30%, var(--panel)); border: 2px solid color-mix(in srgb, var(--cc) 70%, transparent); box-shadow: 0 calc(2 * var(--vm)) calc(6 * var(--vm)) rgba(0,0,0,.4); }
.mz-catbig span { font-size: calc(14 * var(--vm)); line-height: 1; }
.mz-catbig b { font-family: var(--disp); font-weight: 400; font-size: calc(7 * var(--vm)); }
/* new lot */
.mz-newlot { display: flex; flex-direction: column; align-items: center; gap: calc(.6 * var(--vm)); }
.mz-newlot h2 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: calc(6 * var(--vm)); }
.mz-newlot p { margin: 0; color: var(--muted); font-weight: 800; font-size: calc(2.6 * var(--vm)); }
.mz-hammer { font-size: calc(9 * var(--vm)); display: inline-block; transform-origin: 80% 80%; animation: mzKnock 1.2s var(--ease) infinite; }
@keyframes mzKnock { 0%, 55%, 100% { transform: rotate(0); } 70% { transform: rotate(-28deg); } 82% { transform: rotate(8deg); } }
/* the auction block: gavel, price, highest bidder */
.mz-block { display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--vm)); width: 100%; }
.mz-stage { display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--vm)); padding: calc(1 * var(--vm)) calc(3.4 * var(--vm)); border-radius: calc(3.4 * var(--vm)); background: linear-gradient(160deg, #6b3a1c, #3d200f); border: calc(.4 * var(--vm)) solid #b8763a; box-shadow: 0 calc(1.4 * var(--vm)) 0 #2a1508, 0 calc(3 * var(--vm)) calc(6 * var(--vm)) rgba(0,0,0,.45); color: #fff6e6; }
.mz-gavel { font-size: calc(7.6 * var(--vm)); line-height: 1; }
.mz-gavel span { display: inline-block; transform-origin: 85% 85%; transform: rotate(-12deg); }
.mz-gavel.slam span { animation: mzSlam .5s cubic-bezier(.5, 0, .4, 1.4); }
.mz-gavel.final span { animation: mzSlam .55s cubic-bezier(.5, 0, .4, 1.4), mzBig 1.2s .5s var(--ease) both; }
@keyframes mzSlam { 0% { transform: rotate(-12deg); } 35% { transform: rotate(-58deg); } 62% { transform: rotate(14deg) scale(1.08); } 100% { transform: rotate(-12deg); } }
@keyframes mzBig { 50% { transform: rotate(-12deg) scale(1.25); } 100% { transform: rotate(-12deg) scale(1); } }
.mz-price { display: flex; flex-direction: column; align-items: center; min-width: calc(24 * var(--vm)); }
.mz-plbl { font-weight: 900; font-size: calc(2.2 * var(--vm)); opacity: .85; }
.mz-amt { display: flex; align-items: center; gap: calc(1.2 * var(--vm)); font-family: var(--disp); font-size: calc(8.6 * var(--vm)); line-height: 1.05; color: #ffd35c; text-shadow: 0 calc(.5 * var(--vm)) 0 #2a1508; }
.mz-amt .coin.big { font-size: calc(6 * var(--vm)); }
.mz-lead { min-width: calc(22 * var(--vm)); display: flex; justify-content: center; }
.mz-leadcard { display: flex; align-items: center; gap: calc(1.4 * var(--vm)); padding: calc(1 * var(--vm)) calc(2 * var(--vm)); border-radius: calc(2.4 * var(--vm)); background: rgba(0,0,0,.28); border: 2px solid var(--pc); }
.mz-leadcard b { display: block; font-size: calc(3.2 * var(--vm)); font-weight: 900; }
.mz-leadcard small { display: block; font-size: calc(2 * var(--vm)); opacity: .8; font-weight: 700; }
.mz-wait { margin: 0; font-weight: 800; font-size: calc(2.6 * var(--vm)); opacity: .85; animation: mzBreath 1.6s ease-in-out infinite; }
@keyframes mzBreath { 50% { opacity: .45; } }
.mz-call { min-height: calc(6 * var(--vm)); display: flex; align-items: center; justify-content: center; }
.mz-callw { font-family: var(--disp); font-size: calc(6.4 * var(--vm)); line-height: 1; animation: mzCall .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.mz-callw.c1 { color: var(--gold); }
.mz-callw.c2 { color: #ff8a3d; font-size: calc(7.4 * var(--vm)); }
.mz-callw.nb { color: var(--good); font-size: calc(4.4 * var(--vm)); }
@keyframes mzCall { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
.mz-hist { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(.8 * var(--vm)); min-height: calc(3.6 * var(--vm)); }
.mz-h { padding: calc(.4 * var(--vm)) calc(1.4 * var(--vm)); border-radius: 99px; background: var(--surf2); border-inline-start: calc(.6 * var(--vm)) solid var(--pc); font-weight: 800; font-size: calc(2.1 * var(--vm)); opacity: .7; }
.mz-h.new { opacity: 1; animation: mzCall .4s var(--ease) both; }
.mz-h b { color: var(--gold); }
.mz-tiles { gap: calc(1.6 * var(--vm)); }
.mz-tiles .pt-name { font-size: calc(2.2 * var(--vm)); }
.mz-tile { min-width: calc(12 * var(--vm)); }
.mz-ts { display: flex; flex-direction: column; align-items: center; gap: calc(.2 * var(--vm)); font-weight: 900; font-size: calc(2.2 * var(--vm)); }
.mz-tc { display: inline-flex; align-items: center; gap: calc(.5 * var(--vm)); }
.mz-tst { min-height: 1.2em; font-size: calc(2 * var(--vm)); color: var(--muted); }
.mz-tile.top .mz-tst { font-size: calc(3.4 * var(--vm)); }
.mz-tfaces { display: inline-flex; }
.mz-tfaces > * + * { margin-inline-start: calc(-2.4 * var(--vm)); }
/* SOLD! */
.mz-soldov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--vm)); background: color-mix(in srgb, var(--bg1) 55%, transparent); border-radius: calc(3 * var(--vm)); z-index: 5; animation: mzFade .2s both; }
@keyframes mzFade { from { opacity: 0; } }
.mz-stamp { font-family: var(--disp); font-size: calc(17 * var(--vm)); line-height: 1; color: #ff3d4f; padding: calc(.6 * var(--vm)) calc(5 * var(--vm)); border: calc(1.2 * var(--vm)) solid #ff3d4f; border-radius: calc(2.4 * var(--vm)); background: rgba(255,255,255,.92); transform: rotate(-8deg); animation: mzStamp .55s cubic-bezier(.2, .9, .3, 1.3) both; box-shadow: 0 calc(1.4 * var(--vm)) calc(3 * var(--vm)) rgba(0,0,0,.45); }
@keyframes mzStamp { from { transform: rotate(-8deg) scale(3.2); opacity: 0; } 70% { transform: rotate(-8deg) scale(.92); opacity: 1; } to { transform: rotate(-8deg) scale(1); } }
.mz-soldto { display: flex; align-items: center; gap: calc(1.6 * var(--vm)); font-size: calc(3.6 * var(--vm)); font-weight: 800; animation: rise .5s .4s var(--ease) both; }
.mz-soldto b { color: var(--gold); }
/* answering in team play */
.mz-tcard { display: flex; flex-direction: column; align-items: center; gap: calc(.8 * var(--vm)); padding: calc(1.6 * var(--vm)) calc(2.6 * var(--vm)); border-radius: calc(3 * var(--vm)); background: var(--panel); border: calc(.4 * var(--vm)) solid var(--tc); }
.mz-tcard b { font-family: var(--disp); font-weight: 400; font-size: calc(4.4 * var(--vm)); color: var(--tc); }
.mz-tcard small { display: flex; align-items: center; gap: calc(.8 * var(--vm)); font-weight: 800; font-size: calc(2.2 * var(--vm)); }
.answerer.lost { opacity: .55; filter: grayscale(.5); }
/* the buzzer */
.mz-buzzban { display: flex; align-items: center; gap: calc(2.4 * var(--vm)); padding: calc(1.6 * var(--vm)) calc(3.4 * var(--vm)); border-radius: calc(3 * var(--vm)); background: color-mix(in srgb, var(--bad) 22%, var(--panel)); border: 2px solid var(--bad); }
.mz-buzzban h2 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: calc(4.6 * var(--vm)); }
.mz-buzzban p { margin: 0; color: var(--muted); font-weight: 700; font-size: calc(2.2 * var(--vm)); }
.mz-bell { font-size: calc(8 * var(--vm)); display: inline-block; animation: mzRing .5s ease-in-out infinite; transform-origin: 50% 10%; }
.mz-bell.ring { animation-duration: .25s; }
@keyframes mzRing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-16deg); } }
/* standings + rail */
.mz-standlist { display: flex; flex-direction: column; gap: calc(1 * var(--vm)); width: min(calc(90 * var(--vm)), 100%); margin: 0 auto; overflow: auto; }
.mz-srow { display: flex; align-items: center; gap: calc(1.6 * var(--vm)); padding: calc(1 * var(--vm)) calc(2 * var(--vm)); border-radius: calc(2.2 * var(--vm)); background: var(--panel); border-inline-start: calc(.8 * var(--vm)) solid var(--pc); animation: rise .5s calc(var(--i) * .07s) var(--ease) both; font-size: calc(2.8 * var(--vm)); font-weight: 800; }
.mz-sn { width: calc(4 * var(--vm)); text-align: center; color: var(--muted); }
.mz-sname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-sstars b { color: var(--gold); font-size: 1.15em; }
.mz-scoins { color: var(--muted); }
.mz-rail { display: flex; flex-direction: column; gap: calc(.8 * var(--vm)); }
.mz-rrow { display: flex; align-items: center; gap: calc(1 * var(--vm)); padding: calc(.7 * var(--vm)) calc(1.2 * var(--vm)); border-radius: calc(1.8 * var(--vm)); background: var(--panel); border-inline-start: calc(.6 * var(--vm)) solid var(--pc); font-weight: 800; font-size: calc(2.2 * var(--vm)); transition: transform .3s var(--ease), background .3s; }
.mz-rrow.lead { transform: scale(1.04); background: color-mix(in srgb, var(--gold) 20%, var(--panel)); }
.mz-rrow.off { opacity: .5; }
.mz-rname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-rstars { color: var(--gold); white-space: nowrap; }
.mz-rrow .rr-c { display: inline-flex; align-items: center; gap: calc(.4 * var(--vm)); color: var(--muted); }
.mz-rrow .mz-tfaces > * + * { margin-inline-start: calc(-1.4 * var(--vm)); }
.fly-emoji { line-height: 1; }
/* ---- phone ---- */
.mz-phead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mz-plot, .mz-pstars { padding: 4px 10px; border-radius: 99px; background: var(--surf2); font-weight: 900; font-size: .85rem; }
.mz-pstars { color: var(--gold); }
.mz-pprice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 22px; background: linear-gradient(160deg, #6b3a1c, #3d200f); border: 3px solid #b8763a; color: #fff6e6; box-shadow: 0 6px 0 #2a1508; }
.mz-pprice small { font-weight: 900; opacity: .85; }
.mz-pamt { font-family: var(--disp); font-weight: 400; font-size: 2.6rem; line-height: 1.05; color: #ffd35c; display: flex; align-items: center; gap: 8px; }
.mz-plead { display: flex; align-items: center; gap: 10px; }
.mz-plead small { display: block; font-size: .75rem; opacity: .8; font-weight: 800; }
.mz-plead b { display: block; font-size: 1.05rem; }
.mz-plead em { display: block; font-style: normal; font-size: .8rem; opacity: .8; }
.mz-pwait { margin: 0; font-weight: 800; opacity: .85; animation: mzBreath 1.6s ease-in-out infinite; }
.mz-pcall { min-height: 1.6em; font-family: var(--disp); font-size: 1.6rem; line-height: 1.2; }
.mz-pprice.c1 .mz-pcall { color: var(--gold); animation: mzCall .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.mz-pprice.c2 .mz-pcall { color: #ff8a3d; animation: mzCall .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.mz-pprice.c2 { animation: shake .45s; }
.mz-pact { display: flex; flex-direction: column; gap: 10px; }
.mz-bidbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 96px; padding: 16px; border-radius: 26px; background: linear-gradient(135deg, var(--good), color-mix(in srgb, var(--good) 55%, #0a6b4a)); color: #fff; font-family: var(--disp); font-size: 2rem; box-shadow: 0 7px 0 color-mix(in srgb, var(--good) 45%, #000); transition: transform .1s; touch-action: manipulation; }
.mz-bidbtn:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--good) 45%, #000); }
.mz-bidbtn b { font-size: 1.2em; }
.mz-bidbtn:disabled { opacity: .55; }
.mz-bh { font-size: 2.2rem; }
.mz-raises { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.mz-raise { min-height: 56px; font-size: 1.2rem; }
.mz-ptop { text-align: center; font-family: var(--disp); font-size: 1.6rem; color: var(--gold); padding: 18px; border-radius: 20px; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.mz-pout { text-align: center; font-weight: 800; color: var(--muted); padding: 14px; border-radius: 18px; background: var(--surf2); }
.mz-pmine { text-align: center; color: var(--muted); font-weight: 800; }
.mz-pmine b { color: var(--text); }
.mz-pdot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--tc); flex: none; }
.mz-pbuzz h2 { margin: 0; }
.mz-buzzbtn { width: min(68vw, 260px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a8a, #e8102e 55%, #9a0018); color: #fff; font-family: var(--disp); font-size: 2.6rem; box-shadow: 0 12px 0 #6b0010, 0 18px 30px rgba(0,0,0,.4); border: 6px solid #ffd0d6; touch-action: manipulation; animation: mzBuzzIn .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.mz-buzzbtn:active, .mz-buzzbtn.hit { transform: translateY(9px); box-shadow: 0 3px 0 #6b0010, 0 8px 16px rgba(0,0,0,.4); }
@keyframes mzBuzzIn { from { transform: scale(.3); } to { transform: none; } }
/* red while waiting (pressing now = out), green the moment it counts, grey after a false start */
.mz-buzzbtn { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.mz-buzzbtn.wait span { font-size: 1.5rem; }
.mz-buzzbtn.go { background: radial-gradient(circle at 35% 30%, #a6ffbc, #14c24d 55%, #067a2c); border-color: #d4ffde; box-shadow: 0 12px 0 #04501c, 0 18px 30px rgba(0,0,0,.4); animation: mzGo .18s ease-out backwards; }
.mz-buzzbtn.go:active, .mz-buzzbtn.go.hit { box-shadow: 0 3px 0 #04501c, 0 8px 16px rgba(0,0,0,.4); }
.mz-buzzbtn.early { filter: grayscale(1); opacity: .6; transform: none; }
.mz-buzzbtn.early span, .mz-buzzbtn.hit span { font-size: 1.7rem; }
@keyframes mzGo { from { transform: scale(.92); } to { transform: none; } }
.mz-btime { margin: calc(.4 * var(--vm)) 0 0; font-family: var(--disp); font-size: calc(3.4 * var(--vm)); color: var(--gold); }

/* Versus: the creator's extra settings */
.vs-lvrow { flex-wrap: wrap; }
.vs-lv { width: 100%; }
.vs-lv button { font-size: .82rem; padding: 7px 4px; }
.vs-sum { line-height: 1.8; }
.pr-gain.neg { color: var(--bad); }

/* ---------- developer: question bank browser ---------- */

/* ---------- Dev tools page (🛠️ in the top bar) ---------- */
.devpage { width: min(920px, 100%); display: flex; flex-direction: column; gap: 18px; padding-bottom: 30px; }
.dev-intro { margin: 0; text-align: center; color: var(--muted); font-weight: 700; line-height: 1.6; }
.dev-sec { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: var(--surf); border: 1px solid var(--line); }
.dev-sec h4 { margin: 0; font-size: 1.05rem; }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dev-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; background: var(--surf2); border: 1px solid var(--line); text-align: start; transition: background .15s, transform .15s; }
.dev-card:hover { background: color-mix(in srgb, var(--pri) 14%, var(--surf2)); transform: translateY(-2px); }
.dev-card:active { transform: scale(.98); }
.dev-card.locked { opacity: .45; cursor: not-allowed; }
.dev-card.locked:hover { transform: none; background: var(--surf2); }
.dev-ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--surf); font-size: 1.8rem; }
.dev-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dev-txt b { font-size: 1.05rem; }
.dev-txt small { color: var(--muted); line-height: 1.45; }
.dev-card.dev-off { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.dev-note { margin: 0; }
.dev-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dev-info > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surf2); }
.dev-info span { color: var(--muted); font-weight: 800; font-size: .85rem; flex: none; }
.dev-info b { font-size: .9rem; min-width: 0; overflow-wrap: anywhere; text-align: end; }
.dev-players { display: flex; flex-direction: column; gap: 10px; }
.dev-players .dv-list { max-height: none; overflow: visible; }
/* 📚 question bank (Dev tools): a full page — categories on the side, a sticky filter bar, question cards */
.qbp-top { max-width: 1320px; }
.qbp-total { white-space: nowrap; }
.qbp { width: min(1320px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; padding-bottom: 40px; }
.qbp-load { grid-column: 1 / -1; padding: 40px 0; }
.qbp-side { display: none; }
.qbp-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qbp-bar { position: sticky; top: 8px; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: color-mix(in srgb, var(--bg1) 96%, var(--text) 4%); }
.qbp-row1 { display: flex; gap: 8px; }
.qbp-search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 14px; background: var(--surf2); border: 1px solid var(--line); min-width: 0; }
.qbp-search:focus-within { border-color: var(--pri); }
.qbp-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 1rem; padding: 12px 0; }
.qbp-rowp { display: flex; gap: 8px; }
.qbp-catbtn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: flex-start; }
.qbp-ftog { flex: none; white-space: nowrap; }
.qbp-nf { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--pri); color: #fff; font-size: .72rem; }
@media (max-width: 899px) { .qbp-bar:not(.fopen) .qbp-row2 { display: none; } .qbp-total { display: none; } .qbp-bar { top: 4px; } }
.qbp-row2 { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.qbp-group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.qbp-gl { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-inline-end: 2px; }
.qbp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--surf); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: .82rem; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.qbp-chip:hover { background: var(--surf2); }
.qbp-chip.on { background: color-mix(in srgb, var(--pri) 30%, var(--surf2)); border-color: var(--pri); }
.qbp-reset { margin-inline-start: auto; }
.qbp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.qbp-dot.l1 { background: var(--good); } .qbp-dot.l2 { background: #4cc9f0; } .qbp-dot.l3 { background: var(--gold); } .qbp-dot.l4 { background: var(--bad); }
.qbp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 4px; font-size: .88rem; color: var(--muted); }
.qbp-sum b { color: var(--text); }
.qbp-sum span { display: inline-flex; align-items: center; gap: 5px; }
.qbp-sumcat { padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--cc) 28%, transparent); }
/* categories: a list on the side (wide screens) or a sheet (phones) */
.qbp-side h4 { margin: 0 0 8px; }
.qbp-cfind { margin-bottom: 8px; padding: 10px 12px; font-size: .9rem; }
.qbp-catlist { display: flex; flex-direction: column; gap: 3px; }
.qbp-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; background: none; border: 1px solid transparent; color: var(--text); font: inherit; font-size: .9rem; font-weight: 700; text-align: start; cursor: pointer; border-inline-start: 4px solid var(--cc); }
.qbp-cat:hover { background: var(--surf); }
.qbp-cat.on { background: color-mix(in srgb, var(--cc) 24%, var(--surf2)); border-color: color-mix(in srgb, var(--cc) 60%, transparent); }
.qbp-ci { width: 24px; text-align: center; flex: none; }
.qbp-cn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbp-cat small { color: var(--muted); font-weight: 800; font-size: .75rem; }
.qbp-catmodal { height: min(86vh, 900px); height: min(86dvh, 900px); }
.qbp-catmodal .qbp-catlist { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* the questions */
.qbp-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.qbp-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; }
.qbc { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surf); border: 1px solid var(--line); border-top: 3px solid var(--cc); min-width: 0; }
.qbc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; }
.qbc-cat, .qbc-lv, .qbc-ty, .qbc-id { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--surf2); }
.qbc-cat { background: color-mix(in srgb, var(--cc) 26%, var(--surf2)); }
.qbc-id { margin-inline-start: auto; border: 0; color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; }
.qbc-id:hover { color: var(--text); }
.qbc-body { display: flex; gap: 12px; align-items: flex-start; }
.qbc-img { flex: none; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--surf2); }
.qbc-img img { display: block; width: 132px; height: 99px; object-fit: cover; }
.qbc-q { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qbc-ar { margin: 0; font-size: 1.04rem; font-weight: 800; line-height: 1.55; text-align: start; }
.qbc-qen { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.qbc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qbc-opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--surf2); border: 1px solid transparent; font-size: .88rem; min-width: 0; }
.qbc-opt.ok { background: color-mix(in srgb, var(--good) 20%, var(--surf2)); border-color: color-mix(in srgb, var(--good) 55%, transparent); font-weight: 800; }
.qbc-k { flex: none; font-size: .8rem; opacity: .6; }
.qbc-opt.ok .qbc-k { color: var(--good); opacity: 1; }
.qbc-ot { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.qbc-en { color: var(--muted); font-size: .8rem; font-weight: 600; }
.qbc-opt.ok .qbc-en { color: inherit; opacity: .8; }
.qbc-tf { align-self: flex-start; padding: 7px 14px; border-radius: 12px; font-weight: 900; }
.qbc-tf.yes { background: color-mix(in srgb, var(--good) 22%, var(--surf2)); color: var(--good); }
.qbc-tf.no { background: color-mix(in srgb, var(--bad) 22%, var(--surf2)); color: var(--bad); }
.qbc-accs { display: flex; flex-direction: column; gap: 5px; }
.qbc-accrow { display: flex; flex-wrap: wrap; gap: 5px; }
.qbc-acc { padding: 4px 10px; border-radius: 99px; background: var(--surf2); font-size: .84rem; font-weight: 700; }
.qbc-acc.main { background: color-mix(in srgb, var(--good) 22%, var(--surf2)); color: var(--good); font-weight: 900; }
.qbc mark, .qbp-lb mark { background: color-mix(in srgb, var(--gold) 55%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.qbp-end { height: 1px; }
/* a photo, full size */
.qbp-lbm { width: min(900px, 96vw); }
.qbp-lb { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.qbp-lb img { max-width: 100%; max-height: 66vh; max-height: 66dvh; border-radius: 14px; object-fit: contain; }
.qbp-lb p { margin: 0; }
@media (max-width: 560px) {
  .qbc-opts { grid-template-columns: 1fr; }
  .qbc-img img { width: 96px; height: 72px; }
  .qbp-chip { padding: 5px 10px; font-size: .78rem; }
  .qbp-gl { width: 100%; }
}
@media (min-width: 900px) {
  .qbp { grid-template-columns: 270px minmax(0, 1fr); }
  .qbp-side { display: block; position: sticky; top: 8px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 14px; overscroll-behavior: contain; }
  .qbp-rowp { display: none; }
}
@media (min-width: 1250px) { .qbp-list { grid-template-columns: 1fr 1fr; } }

/* Versus bans: more categories fit (a compact grid that adds columns as the screen allows), a clear "your turn" */
.pcat-grid.vs-bangrid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.pcat-grid.vs-bangrid .pcat { padding: 8px 4px 7px; border-radius: 14px; gap: 1px; animation-delay: calc(var(--i) * .02s); }
.pcat-grid.vs-bangrid .pc-ic { font-size: 22px; }
.pcat-grid.vs-bangrid .pc-nm { font-size: .72rem; line-height: 1.2; text-align: center; }
@media (min-width: 600px) { .pcat-grid.vs-bangrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .pcat-grid.vs-bangrid .pc-nm { font-size: .8rem; } }
.vs-banhead h2 { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vs-myturn { color: var(--bad); animation: vsTurnPulse 1s ease-in-out infinite; }
@keyframes vsTurnPulse { 50% { transform: scale(1.07); } }
.vs-can { padding: 6px; border-radius: 18px; border: 2px dashed color-mix(in srgb, var(--bad) 70%, transparent); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.vs-nextme { color: var(--gold); }
/* Versus "your turn": a banner across the top — taps go straight through to the grid underneath */
.vs-turnpop { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 0; right: 0; z-index: 9000; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; animation: vsTpDown .35s var(--ease2) both; }
.vs-turnpop.out { opacity: 0; transform: translateY(-120%); transition: opacity .3s, transform .3s; }
.vs-tp-card { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 99px; background: var(--bad); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); max-width: 100%; }
.vs-tp-ic { font-size: 1.5rem; line-height: 1; animation: vsTurnPulse .6s ease-in-out 3; }
.vs-tp-card b { font-family: var(--disp); font-size: 1.25rem; line-height: 1.1; white-space: nowrap; }
.vs-tp-card span { font-weight: 800; opacity: .9; font-size: .9rem; }
@keyframes vsTpDown { from { transform: translateY(-140%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vsTpIn { from { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } }
/* choosing the categories */
.vs-pickm { height: min(88vh, 900px); height: min(88dvh, 900px); }
.vs-pickbar { align-items: center; flex-wrap: wrap; }
.vs-pickbar b { margin-inline-start: auto; font-size: .9rem; }
.vs-pickgrid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; align-content: start; }
.vs-pickgrid .pcat { opacity: .5; filter: grayscale(.6); }
.vs-pickgrid .pcat.chosen { opacity: 1; filter: none; border-color: var(--cc); }
.vs-pickgrid .pc-n { font-size: .66rem; color: var(--muted); font-weight: 800; }
.vs-pickrow .btn { flex: none; }

/* ================= TV layout: every screen fills the TV =================
   .fitbox parts (lobby players / teams, category tiles) get their size (--bf) and column count (--gc) from
   host.js fitBoxes: the biggest that fits the box. --fit (fitLay) only ever shrinks a screen that spills off. */
.host-screen .fitbox { --vm: calc(1vmin * var(--hs, 1) * var(--fit, 1) * var(--bf, 1)); position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(var(--gc, 3), minmax(0, 1fr)); }
/* lobby: a slimmer join panel, and the player / team cards grow into the rest */
.host-screen .lobby { grid-template-columns: minmax(calc(30 * var(--vm)), 30%) 1fr; }
.host-screen .lobby-main > .fitbox { align-content: center; gap: calc(1.6 * var(--vm)); padding: calc(1 * var(--vm)); }
.host-screen .tgrid.fitbox .tm-card { padding: calc(1.6 * var(--vm)) calc(2 * var(--vm)); gap: calc(1.2 * var(--vm)); align-self: start; }
.host-screen .tgrid.fitbox .tm-cname { font-size: calc(3.8 * var(--vm)); }
.host-screen .tgrid.fitbox .tm-members { gap: calc(1 * var(--vm)); }
.host-screen .tgrid.fitbox .tm-chip { font-size: calc(2.5 * var(--vm)); padding-block: calc(.5 * var(--vm)); }
.host-screen .tgrid.fitbox .tm-chip .av { --s: calc(5.2 * var(--vm)) !important; }
/* category tiles: the emoji sits just before the name on one line, names as big as the tiles allow */
.host-screen .cgrid.fitbox { grid-auto-rows: minmax(0, 1fr); align-content: stretch; gap: calc(1 * var(--vm)); }
.host-screen .cgrid.fitbox .ccard { flex-direction: row; justify-content: center; align-items: center; gap: calc(.8 * var(--vm)); min-height: 0; padding: calc(.5 * var(--vm)) calc(.9 * var(--vm)); border-radius: calc(1.8 * var(--vm)); border-width: calc(.3 * var(--vm)); text-align: start; }
.host-screen .cgrid.fitbox .cc-ic { font-size: calc(3.8 * var(--vm)); line-height: 1; flex: none; }
.host-screen .cgrid.fitbox .cc-name { font-size: calc(2.7 * var(--vm) * var(--if, 1)); line-height: 1.15; display: block; overflow: visible; -webkit-line-clamp: unset; min-width: 0; }
.host-screen .cgrid.fitbox .cc-dots { position: absolute; bottom: calc(.4 * var(--vm)); inset-inline-end: calc(.6 * var(--vm)); max-width: 70%; min-height: 0; margin: 0; gap: calc(.3 * var(--vm)); justify-content: flex-end; }
.host-screen .cgrid.fitbox .vdot { width: calc(2.2 * var(--vm)); height: calc(2.2 * var(--vm)); border-width: calc(.2 * var(--vm)); font-size: calc(1.2 * var(--vm)); }
.host-screen .cgrid.fitbox .cc-check { width: calc(2.8 * var(--vm)); height: calc(2.8 * var(--vm)); font-size: calc(1.6 * var(--vm)); top: calc(.4 * var(--vm)); inset-inline-end: calc(.4 * var(--vm)); }
.host-screen .cgrid.fitbox .ccard.picked::after { font-size: calc(2.4 * var(--vm)); top: calc(.2 * var(--vm)); inset-inline-start: calc(.7 * var(--vm)); }
.host-screen .lay-cats .ph-title, .host-screen .lay-tpick .ph-title { font-size: calc(4.8 * var(--vm)); }
.host-screen .lay-cats .ph-sub, .host-screen .lay-tpick .ph-sub { font-size: calc(2.2 * var(--vm)); margin: 0; }
/* the title and its line underneath sit side by side, so the tiles get the height */
.host-screen .lay-cats .ph-head, .host-screen .lay-tpick .ph-head { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: calc(2.4 * var(--vm)); }
/* questions: bigger text and answers; short answers sit in one row of four */
.host-screen .qtext { font-size: calc(5 * var(--vm)); line-height: 1.35; }
.host-screen .qopt { font-size: calc(3.6 * var(--vm)); padding: calc(1.4 * var(--vm)) calc(1.8 * var(--vm)); min-height: calc(8 * var(--vm)); line-height: 1.2; }
.host-screen .qo-l { width: calc(5.6 * var(--vm)); height: calc(5.6 * var(--vm)); font-size: calc(3 * var(--vm)); }
.host-screen .qcard:not(.pic) .qopts.n4.short { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* picture questions: the photo on one side, as big as it can be, and the question + answers beside it */
.host-screen .qcard.pic { --pich: 46; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "pic text" "pic opts"; grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: calc(3 * var(--vm)); row-gap: calc(2 * var(--vm)); }
.host-screen .qcard.pic:has(> .qmeta) { grid-template-areas: "meta meta" "pic text" "pic opts"; }
.host-screen .qcard.pic > .qmeta { grid-area: meta; }
.host-screen .qcard.pic > .qtext { grid-area: text; font-size: calc(4.4 * var(--vm)); }
.host-screen .qcard.pic > .qpic, .host-screen .qcard.pic > .qzoom { grid-area: pic; align-self: center; }
.host-screen .qcard.pic > .qopts { grid-area: opts; align-self: start; grid-template-columns: 1fr 1fr; }
.host-screen .qcard.pic .qpic .qimg { max-height: calc(var(--pich) * var(--vm)); max-width: 100%; }
.host-screen .qcard.pic .qpic figcaption { max-width: 100%; }
.host-screen .qcard.pic .qzoom { max-height: none; width: min(100%, calc(var(--pich) * var(--vm) * var(--ar, 1.333))); }
/* less height for the photo when the screen also shows players / the auction below it */
.host-screen .lay-q:has(.tiles) .qcard.pic, .host-screen .lay-tq:has(.tiles) .qcard.pic { --pich: 34; }
.host-screen .lay-mq:has(.mz-block) .qcard.pic { --pich: 32; }
.host-screen .bonus-body .qcard.pic { --pich: 30; }
.host-screen .tgrid.fitbox .tm-members { flex-direction: column; align-items: stretch; }
.host-screen .tgrid.fitbox .tm-chip { justify-content: flex-start; min-width: 0; }
.host-screen .tgrid.fitbox .tm-chip > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.host-screen .lobby-join { gap: calc(.9 * var(--vm)); padding: calc(2.2 * var(--vm)); }
.host-screen .lobby-join .logo.big .logo-coin { width: calc(8 * var(--vm)); height: calc(8 * var(--vm)); } .host-screen .lobby-join .logo.big .logo-coin span { font-size: calc(5.4 * var(--vm)); }
.host-screen .lobby-join .logo.big .logo-name { font-size: calc(5.4 * var(--vm)); }
.host-screen .lobby-join .logo-tag { font-size: calc(1.9 * var(--vm)); }
/* answering / result: the answerer and the result banner share one line (the banner beside the card), the timer
   and other notes go on their own line under it, so the question card above gets the height */
.host-screen .lay-q.answering .arena, .host-screen .lay-mq.answering .arena, .host-screen .lay-tq.answering .arena { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; align-items: center; justify-items: center; gap: calc(1.6 * var(--vm)) calc(3 * var(--vm)); }
.host-screen .answering .arena > :not(.answerer):not(.result-banner) { grid-column: 1 / -1; }
.host-screen .answering .arena > .answerer { gap: calc(2 * var(--vm)); min-width: 0; }
.host-screen .answering .arena > .answerer .speech { max-width: calc(32 * var(--vm)); min-width: calc(18 * var(--vm)); padding-inline: calc(2.4 * var(--vm)); }
.host-screen .answering .arena > .answerer .pcard { min-width: calc(30 * var(--vm)); }
.host-screen .answering .arena > .result-banner { max-width: calc(52 * var(--vm)); padding-inline: calc(3.4 * var(--vm)); }
.host-screen .lay-q.answering .qcard.pic, .host-screen .lay-mq.answering .qcard.pic, .host-screen .lay-tq.answering .qcard.pic { --pich: 50; }
.host-screen .answering .arena:not(:has(> .result-banner)) > .answerer { grid-column: 1 / -1; }
/* round vote: the few big cards get big names (up to three lines) */
.host-screen .rgrid .rcard .cc-name { font-size: calc(3.6 * var(--vm)); -webkit-line-clamp: 3; }

/* Dev tools → Server (PC): live stats, who's online, rooms and the server log */
.sv { display: flex; flex-direction: column; gap: 12px; }
.sv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sv-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--surf2); }
.sv-stats span { color: var(--muted); font-weight: 800; font-size: .78rem; }
.sv-stats b { font-size: 1.25rem; font-family: var(--disp); font-weight: 400; }
.sv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.sv-col h5, .sv-logbar h5 { margin: 0 0 6px; font-size: .95rem; display: flex; align-items: center; gap: 6px; }
.sv-n { background: var(--pri); color: #fff; border-radius: 99px; padding: 0 8px; font-size: .78rem; }
.sv-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.sv-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surf2); font-size: .88rem; }
.sv-row small { color: var(--muted); font-weight: 700; }
.sv-doing { grid-column: 1 / 2; font-size: .8rem; color: var(--muted); font-weight: 800; }
.sv-doing.on { color: var(--good); }
.sv-room b small { color: var(--muted); font-weight: 700; }
.sv-pl { grid-column: 1 / -1; font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }
.sv-logbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-logbar h5 { margin: 0; }
.sv-filt { width: auto; flex-wrap: wrap; }
.sv-q { flex: 1; min-width: 160px; width: auto; }
.sv-log { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; padding: 6px; border-radius: 14px; background: var(--surf2); font-size: .84rem; }
.sv-ev { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 8px; }
.sv-ev:nth-child(odd) { background: rgba(255,255,255,.03); }
.sv-ev time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
.sv-ev p { margin: 0; overflow-wrap: anywhere; }
.sv-ev.sv-error p { color: var(--bad); font-weight: 800; }
.sv-ev.sv-warn p { color: var(--gold); }
/* Dev tools: each section folds up when its title is tapped */
.dev-fold { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; }
.dev-fold::after { content: '▾'; margin-inline-start: auto; color: var(--muted); font-size: .9em; transition: transform .2s var(--ease); }
.dev-sec.closed .dev-fold::after { transform: rotate(-90deg); }
[dir=rtl] .dev-sec.closed .dev-fold::after { transform: rotate(90deg); }
.dev-sec.closed > :not(h4) { display: none !important; }
.dev-sec.closed { gap: 0; }

/* One of a Kind (?game=unique) */
.uq-page .logo-coin { background: radial-gradient(circle at 35% 30%, #ffe0f6, #ff7ad9 45%, #9b5cff); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); border-color: #ffd0f1; }
.uq-page .logo-coin span { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.25); font-family: inherit; }
.uq-page .logo.big .logo-coin span { font-size: 54px; margin-top: 0; }
.uq-answers { display: flex; flex-direction: column; gap: 8px; }
.uq-group { display: flex; flex-direction: column; gap: 6px; }
.uq-group.many { padding: 8px; border-radius: 16px; border: 2px dashed rgba(255,90,110,.45); background: rgba(255,90,110,.07); }
.uq-gl { font-weight: 800; color: #ff8a9a; padding: 0 4px; }

/* Letter Race (?game=letters) */
.lx-page .logo-coin { background: radial-gradient(circle at 35% 30%, #eaffd6, #9be15d 45%, #00b4d8); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); border-color: #dfffc4; }
.lx-page .logo-coin span { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.25); font-family: inherit; }
.lx-page .logo.big .logo-coin span { font-size: 54px; margin-top: 0; }
.lx-ltile { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 12px; background: #fff; color: #1a1030; font-size: 1.7rem; font-weight: 900; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.lx-card { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.lx-row { display: grid; grid-template-columns: minmax(84px, 38%) 1fr; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.06); }
.lx-lbl { font-weight: 800; font-size: .88rem; line-height: 1.2; }
.lx-inp { padding: 9px 10px; font-size: 1rem; min-width: 0; }
.lx-inp.bad { border-color: #ff5d6c; background: rgba(255,93,108,.12); }
.lx-card.locked .lx-inp { opacity: .75; }
.lx-stopban { margin: 6px 0; padding: 10px 12px; border-radius: 14px; background: #ffc43d; color: #2a1a00; font-weight: 900; text-align: center; }
.lx-unit { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lx-unit b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-unit.team b { color: var(--tc); }
.lx-mav { display: inline-flex; }
.lx-mav > * { margin-inline-start: -6px; }
.lx-ans .lx-unit { max-width: 42%; }
.lx-ans b.grow { flex: 1; }
.mh-guess.half { border-color: #ffc43d; }
.mh-guess.half .mh-mark { color: #ffc43d; }
.lx-rhead { text-align: center; margin: 6px 0 10px; }
.lx-rhead h3 { margin: 2px 0 0; font-size: 1.35rem; }
.lx-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.lx-tbox { padding: 8px; border-radius: 16px; border: 2px solid var(--tc); background: rgba(255,255,255,.04); min-height: 70px; display: flex; flex-direction: column; gap: 6px; }
.lx-tbox.mine { background: rgba(255,255,255,.12); }
.lx-tname { font-weight: 900; color: var(--tc); display: flex; justify-content: space-between; }
.lx-sheet { width: 100%; overflow-x: auto; padding: 6px; }
.lx-sheet table { width: 100%; border-collapse: collapse; font-weight: 800; }
.lx-sheet th, .lx-sheet td { padding: 7px 5px; text-align: center; border: 1px solid rgba(255,255,255,.14); }
.lx-sheet td.nm { text-align: start; max-width: 140px; }
.lx-sheet .tot { background: rgba(255,196,61,.18); color: #ffd36b; }
.lx-sheet tr.me td { background: rgba(255,255,255,.08); }
.lx-card.multi .lx-row { grid-template-columns: minmax(84px, 38%) 1fr; }
.lx-opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.lx-opts:empty { display: none; }
.lx-opt { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 9px 4px 5px; border-radius: 999px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.lx-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-opt em { font-style: normal; font-size: .8rem; opacity: .85; }
.lx-opt.mine { border-color: #7fd3ff; }
.lx-opt.on { background: #2ec27e; border-color: #2ec27e; color: #06240f; }
.lx-opt:disabled { cursor: default; }
.lx-mine { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0; }
.lx-mem { position: relative; display: inline-flex; }
.lx-mem.lead::after { content: '👑'; position: absolute; top: -9px; inset-inline-start: 3px; font-size: 10px; }
.lx-leadlist { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.lx-leadrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--tc); }
.lx-leadrow b { color: var(--tc); }
.lx-leadrow span { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }

/* new question types (js/qtypes.js) */
.qt-badge { margin: calc(1.2 * var(--vm, 6px)) auto 0; padding: .35em .9em; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 800; width: fit-content; font-size: .9em; }
.qsnd { margin: 10px auto 0; display: block; padding: .5em 1.2em; border-radius: 999px; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: inherit; font: inherit; font-weight: 900; cursor: pointer; }
.qsnd:active { transform: scale(.96); }
.qt-num { display: flex; flex-direction: column; gap: 10px; }
.qt-row { display: flex; align-items: center; gap: 8px; }
.qt-row .inp { flex: 1; font-size: 1.6rem; letter-spacing: .04em; }
.qt-unit { font-weight: 900; font-size: 1.1rem; opacity: .85; }
.qt-ord { display: flex; flex-direction: column; gap: 10px; }
.qt-picked { min-height: 46px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; border: 2px dashed rgba(255,255,255,.25); }
.qt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: #ffc43d; color: #2a1a00; font-weight: 900; font-size: 1.2rem; }
.qt-chip small { font-size: .7rem; opacity: .7; }
.qt-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.qt-items.full { grid-template-columns: 1fr; }
.qt-it { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; text-align: start; }
.qt-items:not(.full) .qt-it { justify-content: center; font-size: 1.6rem; }
.qt-it:disabled { opacity: .45; }
.qt-it[data-k]:not([data-k=""])::after { content: attr(data-k); position: absolute; top: -8px; inset-inline-end: -6px; width: 24px; height: 24px; border-radius: 50%; background: #ffc43d; color: #2a1a00; font-size: .8rem; display: grid; place-items: center; }
.qt-btns { display: flex; gap: 8px; }
.qt-btns .grow { flex: 1; }
.qopts.ord .qopt { position: relative; }
.qt-rev .qopts.ord .qopt[data-pos]::after { content: attr(data-pos); position: absolute; top: 0; bottom: 0; margin: auto 0; inset-inline-end: .6em; width: 1.8em; height: 1.8em; border-radius: 50%; background: #2ec27e; color: #06240f; font-weight: 900; display: grid; place-items: center; animation: popIn .4s both; }
.qt-yours { margin-top: 10px; }

/* the tune player bar (js/qtypes.js) */
.qsnd-wrap { width: min(100%, 420px); margin: 10px auto 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.qsnd-wrap .qsnd { margin: 0 auto; }
.qsnd-bar { padding: 0 6px; }
.qsnd-track { position: relative; height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); }
.qsnd-fill { position: absolute; inset-block: 0; left: 0; width: 0; border-radius: 999px; background: #fff; }
.qsnd-dot { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.qsnd-bar, .qsnd-times, .qsnd-times span { direction: ltr; unicode-bidi: isolate; }
.qsnd-times { display: flex; justify-content: space-between; margin-top: 6px; font-size: .85rem; font-variant-numeric: tabular-nums; opacity: .75; }
.qsnd-wrap:not(.on):not(.was) .qsnd-dot { opacity: .6; }
.qsnd-listen { display: none; text-align: center; font-weight: 800; font-size: .9rem; opacity: .85; }
.qsnd-wrap.on .qsnd-listen { display: block; }
.qbc .qsnd-listen { display: none !important; }