/* =========================================================
   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);
  background-image: 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));
  background-attachment: fixed; overflow-x: hidden; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
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; }

/* ---------- animated background ---------- */
.bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.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), 0 12px 30px -10px var(--pri); 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: 0 4px 14px -4px var(--pri); }
.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 { 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, 0 6px 20px -4px rgba(255,170,0,.7);
  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:hover::after { transform: translateX(120%); }
.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; }
.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: 10vmin; 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: 1.4vmin; 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: 4vmin; 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: 7vmin; filter: drop-shadow(0 4px 10px rgba(255,200,0,.6)); animation: crownIn .7s var(--ease) both; }
.crown.sm { position: absolute; top: -4.6vmin; left: 50%; transform: translateX(-50%); font-size: 5.4vmin; 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: 2.2vmin; }
.hud { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.4vmin; padding: 1.6vmin 2.4vmin; min-height: 0; }
.hud:empty { padding: 0; }
.hud-logo .logo-coin { width: 5vmin; height: 5vmin; } .hud-logo .logo-coin span { font-size: 3.4vmin; }
.hud-logo .logo-name { font-size: 3.6vmin; }
.hud-pill { padding: .8vmin 2vmin; border-radius: 99px; background: var(--surf); border: 1px solid var(--line); font-weight: 800; font-size: 2.3vmin; 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: 1vmin; padding: .6vmin 2vmin; border-radius: 99px; background: linear-gradient(135deg, #ff8fab, #ff5d8f); color: #fff; font-size: 3vmin; font-weight: 900; box-shadow: 0 .6vmin 2vmin -.6vmin #ff5d8f; }
.hud-piggy .pig { font-size: 3.6vmin; display: inline-block; }
.hud-piggy.pulse1 .pig { animation: wobble .5s 2; }
.hud-code { text-align: center; line-height: 1.05; padding: .4vmin 1.6vmin; border-radius: 1.4vmin; background: var(--surf); border: 1px solid var(--line); }
.hud-code small { display: block; font-size: 1.4vmin; color: var(--muted); font-weight: 700; }
.hud-code b { font-family: var(--disp); font-size: 3vmin; letter-spacing: .1em; }
.stage { position: relative; min-height: 0; overflow: hidden; }
.lay { position: absolute; inset: 0; padding: 1vmin 2.6vmin 2.6vmin; display: flex; flex-direction: column; gap: 1.8vmin; animation: layIn .55s var(--ease) both; }
.lay-out { animation: layOut .38s var(--ease2) forwards; pointer-events: none; }
@keyframes layIn { from { opacity: 0; transform: translateY(4vmin) scale(.97); } }
@keyframes layOut { to { opacity: 0; transform: translateY(-3vmin) scale(.98); } }
.rail { display: none; position: relative; width: 31vmin; margin: 1vmin 0 0; margin-inline-end: 2vmin; align-self: start; }
.in-game .rail { display: block; }
.rrow { position: absolute; top: 0; left: 0; right: 0; height: 5.8vmin; display: flex; align-items: center; gap: 1vmin; padding: .4vmin 1.2vmin; padding-inline-start: .5vmin; 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: .5vmin; border-radius: 9px; background: var(--pc); }
.rr-n { font-weight: 900; width: 2.4vmin; text-align: center; color: var(--muted); font-size: 1.8vmin; }
.rr-name { flex: 1; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 2vmin; }
.rr-c { display: flex; align-items: center; gap: .6vmin; font-weight: 900; font-size: 2.3vmin; }
.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: 1.4vmin; inset-inline-start: 1.4vmin; display: flex; gap: .8vmin; z-index: 50; opacity: .35; transition: opacity .3s; }
.hctl:hover { opacity: 1; }
.hctl .btn.icon { width: 5.4vmin; height: 5.4vmin; min-width: 40px; min-height: 40px; font-size: 2.4vmin; 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: 9vmin; 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: 7vmin; filter: drop-shadow(0 .6vmin 1.4vmin rgba(0,0,0,.4)); }
.react-fly small { font-size: 1.5vmin; font-weight: 800; padding: .2vmin 1vmin; border-radius: 99px; color: #fff; margin-top: -.6vmin; }
@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: 2vmin; text-align: center; font-size: 2.6vmin; padding: 4vmin; }
.center-msg h1 { margin: 0; font-family: var(--disp); font-size: 7vmin; }
.center-msg .big-emo { font-size: 12vmin; }
.ph-head { text-align: center; }
.ph-title { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 6.4vmin; line-height: 1.15; text-shadow: 0 .6vmin 2vmin 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(-2vmin); letter-spacing: .1em; } }
.ph-sub { margin: .6vmin 0 0; font-size: 2.6vmin; color: var(--muted); font-weight: 700; }

/* lobby */
.lobby { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(34vmin, 38%) 1fr; gap: 2.6vmin; padding: 2.6vmin; }
.lobby-join { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vmin; text-align: center; padding: 3vmin; }
.lobby-join .logo.big .logo-coin { width: 11vmin; height: 11vmin; } .lobby-join .logo.big .logo-coin span { font-size: 7.4vmin; }
.lobby-join .logo.big .logo-name { font-size: 7vmin; } .lobby-join .logo-tag { font-size: 2.2vmin; }
.lj-lbl { color: var(--muted); font-weight: 800; font-size: 2vmin; margin-top: 1vmin; }
.lj-url { font-weight: 900; font-size: 2.8vmin; color: var(--acc); word-break: break-all; }
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: .6vmin; margin-top: 1vmin; }
.qr { background: #fff; padding: 1.2vmin; border-radius: 2vmin; box-shadow: 0 1vmin 3vmin -1vmin rgba(0,0,0,.4); }
.qr img, .qr canvas { width: 22vmin !important; height: 22vmin !important; }
.qr-wrap small { color: var(--muted); font-weight: 700; font-size: 1.7vmin; }
.qr-fallback { font-family: var(--disp); color: #222; font-size: 5vmin; padding: 2vmin; }
.lobby-main { display: flex; flex-direction: column; gap: 2vmin; min-height: 0; }
.lobby-head { display: flex; align-items: center; justify-content: space-between; }
.lobby-head h2 { margin: 0; font-size: 4.4vmin; font-family: var(--disp); font-weight: 400; display: flex; align-items: center; gap: 1.4vmin; }
.count-badge { background: var(--pri); color: #fff; border-radius: 99px; min-width: 5vmin; padding: 0 1.4vmin; font-size: 3.2vmin; text-align: center; font-family: var(--font); font-weight: 900; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(30vmin, 1fr)); gap: 1.8vmin; align-content: start; overflow: auto; flex: 1; padding: 2vmin 1vmin; }
.pgrid .pcard { font-size: 2.2vmin; border-radius: 2.4vmin; }
.pgrid .pcard::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: .4vmin solid var(--pc, transparent); opacity: .6; z-index: 2; pointer-events: none; }
.pgrid .pc-body { padding: 4vmin 1.6vmin 1.4vmin; gap: 1.4vmin; }
.pgrid .pc-name { font-size: 2.9vmin; } .pgrid .pc-lv { font-size: 1.8vmin; }
.pgrid .pcard.enter { animation: cardDrop .8s var(--ease) both; }
@keyframes cardDrop { 0% { opacity: 0; transform: translateY(-14vmin) rotate(-8deg) scale(.6); } 60% { opacity: 1; transform: translateY(1vmin) rotate(2deg) scale(1.04); } 100% { transform: none; } }
.pcard.off { opacity: .45; filter: grayscale(.7); }
.kick { position: absolute; top: 1vmin; inset-inline-end: 1vmin; width: 3.6vmin; height: 3.6vmin; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: 1.8vmin; opacity: 0; transition: .2s; z-index: 3; }
.pcard:hover .kick { opacity: 1; }
.lobby-empty { text-align: center; color: var(--muted); font-size: 2.8vmin; 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: 2vmin; height: 2vmin; }
.lobby-foot { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; }
.set-sum { display: flex; gap: 1.2vmin; flex-wrap: wrap; }
.set-sum span { background: var(--surf); border: 1px solid var(--line); border-radius: 99px; padding: .6vmin 1.6vmin; font-weight: 800; font-size: 2.2vmin; }
.lobby-foot .btn.huge { font-size: 3.6vmin; padding: 2vmin 5vmin; border-radius: 2.6vmin; animation: startPulse 2s infinite; }
.lobby-foot .btn.huge.disabled { animation: none; }
@keyframes startPulse { 50% { box-shadow: 0 5px 0 color-mix(in srgb, var(--pri) 60%, #000), 0 0 6vmin -1vmin var(--pri); } }
.resume-grid { width: min(120vmin, 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: 120vmin; margin: 0 auto; }
.cgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 1.6vmin; align-content: center; }
.ccard, .rcard { --cc: #888; position: relative; border-radius: 2.6vmin; padding: 1.6vmin 1.2vmin 1.2vmin; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 34%, transparent), color-mix(in srgb, var(--cc) 10%, transparent)); border: .35vmin solid color-mix(in srgb, var(--cc) 55%, transparent); display: flex; flex-direction: column; align-items: center; gap: .6vmin; 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: 19vmin; }
.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: 6.4vmin; line-height: 1.1; filter: drop-shadow(0 .5vmin 1vmin rgba(0,0,0,.35)); position: relative; }
.cc-name { font-weight: 900; font-size: 2.4vmin; line-height: 1.2; position: relative; }
.cc-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .6vmin; min-height: 4vmin; position: relative; margin-top: auto; }
.vdot { width: 3.6vmin; height: 3.6vmin; border-radius: 50%; background: var(--pc, #999); border: .3vmin solid #fff; display: grid; place-items: center; overflow: hidden; font-size: 2vmin; font-style: normal; transition: transform .1s, box-shadow .1s, opacity .4s; box-shadow: 0 .3vmin .8vmin 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 .5vmin #fff, 0 0 3vmin 1vmin var(--pri); z-index: 2; }
.vdot.win { transform: scale(1.7); box-shadow: 0 0 0 .6vmin var(--gold), 0 0 4vmin 1.4vmin 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(-1vmin) scale(1.04); box-shadow: 0 0 0 .4vmin #fff, 0 2vmin 5vmin -1vmin var(--cc); }
.ccard.bump, .rcard.bump { animation: bump .3s var(--ease); }
.cc-check { position: absolute; top: 1vmin; inset-inline-end: 1vmin; width: 4.4vmin; height: 4.4vmin; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 2.6vmin; transform: scale(0); transition: transform .5s var(--ease); box-shadow: 0 .4vmin 1.2vmin rgba(0,0,0,.4); }
.ccard.picked { box-shadow: 0 0 0 .5vmin var(--good), 0 0 4vmin -.5vmin var(--good); animation: stampIn .6s var(--ease); }
.ccard.picked .cc-check { transform: scale(1); }
.ccard.picked::after { content: var(--n); position: absolute; top: 1vmin; inset-inline-start: 1.4vmin; font-family: var(--disp); font-size: 4vmin; 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: 1vmin; justify-content: center; flex-wrap: wrap; min-height: 0; font-size: 2.2vmin; }
.picked-strip:empty { display: none; }
.voter-row { display: flex; gap: 1.6vmin; justify-content: center; flex-wrap: wrap; }
.voter { display: flex; flex-direction: column; align-items: center; gap: .5vmin; transition: .3s; }
.voter.done { opacity: .55; }
.pips { display: flex; gap: .4vmin; }
.pips i { width: 1.2vmin; height: 1.2vmin; border-radius: 50%; background: var(--pc); box-shadow: 0 0 .8vmin var(--pc); transition: .3s; }
.pips i.used { background: var(--surf2); box-shadow: none; }
.spinning .voter-row { display: none; }

/* catreveal */
.reveal-cats { flex: 1; display: flex; gap: 2.4vmin; justify-content: center; align-items: center; flex-wrap: wrap; perspective: 1200px; }
.flipcard { width: 24vmin; height: 30vmin; 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: 3vmin; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vmin; }
.fc-back { background: linear-gradient(135deg, var(--pri), var(--acc)); font-family: var(--disp); font-size: 14vmin; color: rgba(255,255,255,.85); box-shadow: 0 2vmin 5vmin -2vmin 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: .4vmin solid color-mix(in srgb, var(--cc) 80%, #fff); box-shadow: 0 2vmin 6vmin -2vmin var(--cc); padding: 1vmin; text-align: center; }
.fc-front .cc-ic { font-size: 10vmin; } .fc-front .cc-name { font-size: 3vmin; }

/* round intro */
.round-intro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; }
.ri-small { font-size: 3.4vmin; font-weight: 800; color: var(--muted); animation: rise .6s var(--ease) both; }
.ri-big { font-family: var(--disp); font-size: 22vmin; 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 1.4vmin 4vmin 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: 1.2vmin; flex-wrap: wrap; justify-content: center; font-size: 2.4vmin; }
.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), 1fr); gap: 2vmin; align-items: stretch; }
.rcard { justify-content: flex-start; padding-top: 3vmin; }
.rcard .cc-ic { font-size: 9vmin; } .rcard .cc-name { font-size: 3vmin; }
.rc-coins { flex: 1; width: 100%; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: .5vmin; padding: 1vmin; overflow: hidden; }
.cdot { width: 2.8vmin; height: 2.8vmin; 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 .3vmin var(--pc, #fff), 0 .3vmin .6vmin rgba(0,0,0,.35); }
.cdot.house { background: var(--surf2); box-shadow: 0 0 0 .3vmin var(--line); }
.cdot.drop { animation: coinDrop .5s var(--ease) both; }
@keyframes coinDrop { from { transform: translateY(-14vmin) scale(.4) rotate(-90deg); opacity: 0; } }
.cdot.hot { transform: scale(1.7); box-shadow: 0 0 0 .4vmin #fff, 0 0 2.4vmin 1vmin var(--gold); z-index: 2; }
.cdot.win { transform: scale(2); box-shadow: 0 0 0 .5vmin var(--good), 0 0 4vmin 1.4vmin var(--gold); }
.rc-n { display: flex; align-items: center; gap: .8vmin; font-family: var(--disp); font-size: 4.4vmin; }
.chosen-mode .rcard:not(.chosen) { opacity: .25; filter: grayscale(.8); transform: scale(.92); }
.rcard.chosen { transform: scale(1.08); box-shadow: 0 0 0 .6vmin var(--gold), 0 0 8vmin -1vmin var(--cc); z-index: 3; animation: stampIn .7s var(--ease); }

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

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

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

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

/* elim */
.elim { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vmin; }
.elim-row { display: flex; gap: 4vmin; flex-wrap: wrap; justify-content: center; }
.elim-card { position: relative; width: 44vmin; animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * .2s); }
.elim-card .pcard { font-size: 2.4vmin; } .elim-card .pc-body { padding: 6vmin 2vmin 2vmin; } .elim-card .pc-name { font-size: 4vmin; }
.elim-card.broken .pcard { filter: grayscale(1) brightness(.7); transform: rotate(-4deg) translateY(2vmin); 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: 14vmin; animation: popIn .6s var(--ease); }

/* standings */
.stand-list { flex: 1; display: flex; flex-direction: column; gap: 1.2vmin; width: min(110vmin, 100%); margin: 0 auto; overflow: auto; }
.srow { display: flex; align-items: center; gap: 2vmin; padding: 1vmin 2.4vmin; 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: .7vmin; border-radius: 9px; background: var(--pc); }
@keyframes slideRow { from { opacity: 0; transform: translateX(10vmin); } }
.srow.dead { opacity: .45; }
.sr-n { font-family: var(--disp); font-size: 4vmin; width: 5vmin; 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: 3vmin; }
.sr-d { font-weight: 900; font-size: 2.6vmin; } .sr-d.up { color: var(--good); } .sr-d.down { color: var(--bad); }
.sr-c { display: flex; align-items: center; gap: 1vmin; font-family: var(--disp); font-size: 4vmin; min-width: 16vmin; justify-content: flex-end; }
.stand-pig { text-align: center; font-size: 2.8vmin; font-weight: 800; }

/* end */
.end { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2vmin; min-height: 0; }
.podium { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2vmin; min-height: 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: .8vmin; width: 26vmin; 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(20vmin); } to { opacity: 1; transform: none; } }
.pod-name { font-weight: 900; font-size: 3vmin; text-align: center; }
.pod-c { display: flex; align-items: center; gap: .8vmin; font-family: var(--disp); font-size: 3.6vmin; color: var(--gold); }
.pod-block { width: 100%; border-radius: 2vmin 2vmin 0 0; display: grid; place-items: center; font-family: var(--disp); font-size: 8vmin; color: rgba(255,255,255,.9); box-shadow: inset 0 1vmin 2vmin rgba(255,255,255,.2); }
.pod1 .pod-block { height: 24vmin; background: linear-gradient(180deg, #ffd84d, #f5a300); }
.pod2 .pod-block { height: 17vmin; background: linear-gradient(180deg, #e6edf5, #8392a5); }
.pod3 .pod-block { height: 12vmin; 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: 1.4vmin; flex-wrap: wrap; justify-content: center; }
.er { display: flex; align-items: center; gap: 1vmin; padding: .6vmin 1.8vmin; border-radius: 99px; background: var(--surf); border: 1px solid var(--line); font-weight: 800; font-size: 2.2vmin; }
.er-c { display: flex; align-items: center; gap: .5vmin; color: var(--gold); }
.end-btns .btn.big { font-size: 2.6vmin; padding: 1.6vmin 3.4vmin; }
.lay-end, .lay-stats { overflow: auto; padding-bottom: 9vmin; }

/* stats */
.stats-wrap { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2vmin; min-height: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(24vmin, 1fr)); gap: 1.6vmin; align-content: start; overflow: auto; padding: .4vmin; }
.fact { display: flex; flex-direction: column; align-items: center; gap: .6vmin; text-align: center; padding: 1.6vmin; animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * .1s); border-top: .5vmin solid var(--pc); }
.f-ic { font-size: 5vmin; } .f-t { font-family: var(--disp); font-size: 3vmin; } .f-name { font-weight: 900; font-size: 2.4vmin; } .f-d { color: var(--muted); font-weight: 700; font-size: 1.9vmin; }
.chart { display: flex; flex-direction: column; min-height: 0; }
.chart h3 { margin: 0 0 1vmin; font-size: 2.6vmin; }
.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: 1vmin 2vmin; font-size: 1.8vmin; font-weight: 700; margin-top: 1vmin; }
.legend i { display: inline-block; width: 1.6vmin; height: 1.6vmin; border-radius: 50%; margin-inline-end: .6vmin; 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); box-shadow: 0 0 24px var(--good); } }
@keyframes coinDown { 30% { transform: scale(.9); box-shadow: 0 0 20px var(--bad); } }
.pt-net { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.pt-net.ok { background: var(--good); box-shadow: 0 0 8px var(--good); } .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: 0 0 10px var(--pri); 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), 0 8px 24px -8px 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: 0 0 40px -10px var(--cc); }
.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: 0 0 20px rgba(255,200,61,.6); 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: 0 0 20px -6px var(--acc); }
.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 14px #fff, 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: 2.6vmin; }
  .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: 3.6vmin; height: 3.6vmin; min-width: 22px; min-height: 22px; border-radius: 50%; background: var(--panel); font-size: 1.8vmin; 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: 1.2vmin; transform: translate(40%, -60%); }
.kick.mute { inset-inline-end: 5.2vmin; }
.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%; }