/* ── fonts ─────────────────────────────────────────────────────── */
@font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cairo-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cairo-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cairo-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/cairo-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cairo';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/cairo-900-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/cairo-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── tokens ────────────────────────────────────────────────────── */
:root{
  --bg:#0f1230;--bg2:#0a0c22;--ink:#ffffff;--dim:rgba(255,255,255,.62);--line:rgba(255,255,255,.16);--glass:rgba(255,255,255,.08);
  --accent:#F3BB25;--accent-ink:#141225;--glow:rgba(243,187,37,.55);
  --c1:#e7106f;--c2:#1085ca;--c3:#f3a12a;--c4:#2aa84a;--c1i:#fff;--c2i:#fff;--c3i:#141225;--c4i:#fff;
  --ok:#2ecc71;--bad:#ff4d5e;
  --font:'Cairo','Segoe UI',system-ui,sans-serif;
  --overlay:.45;--radius:2vh;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --qsize:5.2vh;
  /* lobby (admin) palette - light */
  --l-bg:#f3f4f9;--l-card:#ffffff;--l-ink:#1b1f3a;--l-dim:#6b7090;--l-line:#e1e4ee;--l-accent:#fd5a37;--l-navy:#22275e;--l-soft:#eef0f7;--l-ok:#1f9d55;--l-bad:#d6455d;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--l-bg);color:var(--l-ink);overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
[hidden]{display:none!important}
img{max-width:100%}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(120,120,140,.35);border-radius:8px}

/* ═══════════════════════════ SCREENS (stage + board) ═══════════════════════════ */
.scr{position:fixed;inset:0;background:var(--bg);color:var(--ink);overflow:hidden;user-select:none}
.scr>*{position:relative}
.bgImg{position:absolute!important;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;transition:opacity .6s}
.scr.hasBg .bgImg{opacity:1}
.bgOverlay{position:absolute!important;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,transparent 0%,rgba(0,0,0,.35) 100%)}
.scr.hasBg .bgOverlay{background:linear-gradient(180deg,rgba(0,0,0,calc(var(--overlay)*.85)),rgba(0,0,0,var(--overlay)) 40%,rgba(0,0,0,calc(var(--overlay)*1.15)))}

#stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
#top{display:flex;align-items:center;justify-content:space-between;gap:2vw;padding:1.8vh 2.6vw 0;min-height:9vh}
#brand{display:flex;align-items:center;gap:1vw;min-width:0;flex:1}
#logo{height:7.5vh;max-width:24vw;object-fit:contain}
#title{font-weight:900;font-size:clamp(14px,2.8vh,34px);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#qCount{font-weight:900;font-size:clamp(16px,3vh,40px);letter-spacing:.02em;background:var(--glass);border:1px solid var(--line);padding:.6vh 1.6vw;border-radius:99px;backdrop-filter:blur(8px);white-space:nowrap}
#qCount small{font-weight:400;color:var(--dim);font-size:.7em}
#hostTop{display:flex;align-items:center;gap:.4vw;flex:1;justify-content:flex-end}
.rb{width:6.4vh;height:6.4vh;border-radius:50%;display:grid;place-items:center;color:var(--ink);font-size:clamp(14px,2.6vh,32px);font-weight:900;transition:.2s;line-height:1}
.rb:hover{background:var(--glass)}
.rb.dim{opacity:.45}.rb.dim:hover{opacity:1}
#hEnd span{font-size:clamp(24px,5vh,60px);line-height:1;display:block;margin-top:-.4vh}
/* timer sits in the notch between the answer cards */
#choicesWrap{position:relative;--tsize:13vh;--gx:1.6vw;--gy:2vh;--r:7.8vh}
#timer{position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--tsize);height:var(--tsize);display:grid;place-items:center;transition:opacity .3s;z-index:3;border-radius:50%;background:rgba(0,0,0,.22);backdrop-filter:blur(6px)}
#timer::before{content:'';position:absolute;top:-1.3vh;left:50%;translate:-50% 0;width:2.4vh;height:1.8vh;border-radius:.6vh .6vh 0 0;background:var(--ink);opacity:.9}
#timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#timer circle{fill:none;stroke-width:7;stroke-linecap:round;r:42;cx:50;cy:50}
#timer .track{stroke:var(--line)}
#timer .arc{stroke:var(--accent);stroke-dasharray:263.9;stroke-dashoffset:0;transition:stroke .3s}
#timer.low .arc{stroke:var(--bad)}
#timer.low #timerNum{color:var(--bad);animation:tpulse .5s var(--ease) infinite alternate}
#timer.answer .arc{stroke:var(--ok)}
#timerNum{font-weight:900;font-size:clamp(18px,4.2vh,52px);font-variant-numeric:tabular-nums;color:var(--ink)}
#timer.off{opacity:.5}
#timer.off #timerNum{opacity:0}
@keyframes tpulse{from{transform:scale(1)}to{transform:scale(1.12)}}

#qArea{display:grid;grid-template-rows:auto auto;align-content:center;gap:2.4vh;padding:1.6vh 3vw 0;min-height:0}
#qWrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;gap:1vh}
#qCat{font-size:clamp(12px,2vh,24px);color:var(--ink);opacity:.75;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center}
#qCat:empty{display:none}
#qCard{width:100%;height:var(--qh);min-height:0;background:var(--card);color:var(--card-ink);border-radius:2.4vh;padding:1.6vh 3vw;box-shadow:0 1vh 3vh rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;position:relative}
#qCard.hasPic{height:calc(var(--qh) * 1.6)}
/* picture as the box itself: drawn as-is (the box takes the picture's proportions, see paintQuestionStyle) */
#qCard.skin{background:var(--qskin) center/100% 100% no-repeat;box-shadow:none;color:var(--skin-ink);border-radius:0!important;padding:3% 6%}
#qCard.skin #qText{text-shadow:0 .2vh 1vh rgba(0,0,0,.35)}
#qBox{display:flex;align-items:center;justify-content:center;gap:2.5vw;width:100%;height:100%;min-height:0;text-align:center}
#qBox.hasImg #qText{text-align:start;flex:1 1 55%}
#qImgWrap{display:none;flex:0 1 40%;height:100%;min-height:0;align-items:center;justify-content:center}
#qBox.hasImg #qImgWrap{display:flex}
#qImg{max-height:100%;max-width:100%;object-fit:contain;border-radius:1.6vh;box-shadow:0 1vh 3vh rgba(0,0,0,.25)}
#qText{font-weight:700;font-size:var(--qsize);line-height:1.3;max-height:100%;overflow:visible;text-wrap:balance;width:100%}
#choices{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:var(--gy) var(--gx);height:36vh;direction:ltr}
#choices.n2{height:17vh}
#choices.n3 .choice:nth-child(3){grid-column:1/-1}
.choice{position:relative;display:flex;align-items:center;gap:1.4vw;padding:0 2.4vw;border-radius:2.4vh;background:var(--cc);color:var(--ci);font-weight:700;font-size:clamp(16px,3.2vh,44px);line-height:1.2;overflow:hidden;box-shadow:inset 0 0 0 0 transparent;transition:transform .35s var(--ease),opacity .35s,box-shadow .35s,filter .35s;isolation:isolate;text-align:start;--nx:-999vh;--ny:-999vh;
  -webkit-mask-image:radial-gradient(circle at var(--nx) var(--ny),transparent var(--r),#000 calc(var(--r) + 1px));mask-image:radial-gradient(circle at var(--nx) var(--ny),transparent var(--r),#000 calc(var(--r) + 1px))}
/* notch positions: 4 cards = corner notches, 2 cards = middle of the inner edge, 3 = top row + centred bottom */
#choices.n4 .choice:nth-child(1),#choices.n3 .choice:nth-child(1){--nx:calc(100% + var(--gx)/2);--ny:calc(100% + var(--gy)/2);padding-right:calc(2.4vw + 5vh)}
#choices.n4 .choice:nth-child(2),#choices.n3 .choice:nth-child(2){--nx:calc(0% - var(--gx)/2);--ny:calc(100% + var(--gy)/2);padding-left:calc(2.4vw + 5vh)}
#choices.n4 .choice:nth-child(3){--nx:calc(100% + var(--gx)/2);--ny:calc(0% - var(--gy)/2);padding-right:calc(2.4vw + 5vh)}
#choices.n4 .choice:nth-child(4){--nx:calc(0% - var(--gx)/2);--ny:calc(0% - var(--gy)/2);padding-left:calc(2.4vw + 5vh)}
#choices.n3 .choice:nth-child(3){--nx:50%;--ny:calc(0% - var(--gy)/2);padding-top:6vh}
#choices.n2 .choice:nth-child(1){--nx:calc(100% + var(--gx)/2);--ny:50%;padding-right:calc(2.4vw + 8vh)}
#choices.n2 .choice:nth-child(2){--nx:calc(0% - var(--gx)/2);--ny:50%;padding-left:calc(2.4vw + 8vh)}
/* picture cards: the picture is drawn as-is (no crop, no darkening, no notch); the card takes the picture's proportions (paintChoiceStyles) */
.choice.skin{color:var(--skin-ink);background:none;box-shadow:none!important;border-radius:0!important;-webkit-mask-image:none;mask-image:none;justify-self:center;align-self:center;padding:0 5%!important;text-shadow:0 .2vh 1vh rgba(0,0,0,.35)}
.choice.skin::before{content:'';position:absolute;inset:0;background-image:var(--skin);background-size:100% 100%;background-repeat:no-repeat;z-index:-1}
.choice.skin.pickable:hover{transform:translateY(-.4vh) scale(1.02);filter:brightness(1.08)}
.choice.skin.correct{filter:drop-shadow(0 0 1.2vh var(--ok))}
.choice.skin.wrong{filter:drop-shadow(0 0 1.2vh var(--bad))}
.choice .letter{flex:none;width:5vh;height:5vh;border-radius:1.2vh;background:rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);display:grid;place-items:center;font-weight:900;font-size:clamp(12px,2.6vh,32px);opacity:.85}
.choice.skin .letter{background:rgba(0,0,0,.35);color:#fff;box-shadow:none}
.choice .txt{flex:1;min-width:0;max-height:100%;overflow:visible;word-break:break-word;display:block}
.choice .mark{position:absolute;inset-inline-end:1.4vw;top:50%;translate:0 -50%;width:5.6vh;height:5.6vh;border-radius:50%;display:grid;place-items:center;font-size:3.4vh;font-weight:900;opacity:0;transform:scale(.4);transition:all .4s var(--spring)}
.choice.pickable{cursor:pointer}
.choice.pickable:hover{transform:translateY(-.4vh) scale(1.015);box-shadow:inset 0 0 0 .5vh var(--accent)}
.choice.correct{box-shadow:inset 0 0 0 .7vh var(--ok);z-index:2}
.choice.correct .mark{opacity:1;transform:scale(1);background:var(--ok);color:#fff}
.choice.wrong .mark{opacity:1;transform:scale(1);background:var(--bad);color:#fff}
.choice.wrong{box-shadow:inset 0 0 0 .7vh var(--bad)}
.choice.dim{opacity:.4;filter:saturate(.5)}

#teams{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:1.2vh .7vw;padding:2vh 2vw 1vh;--cols:5}
.team{position:relative;flex:0 0 calc((100% - (var(--cols) - 1) * .7vw) / var(--cols));min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2vh;padding:.9vh .8vw;border-radius:1.6vh;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);transition:transform .4s var(--spring),background .3s,box-shadow .3s,opacity .3s,color .3s}
.team .nm{font-weight:700;font-size:clamp(11px,2.2vh,26px);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.team .sc{font-weight:900;font-size:clamp(13px,2.7vh,34px);color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums}
.team .no{position:absolute;top:-1vh;inset-inline-start:.6vw;font-size:clamp(9px,1.5vh,16px);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:0 .6vw;color:var(--dim);line-height:1.6}
.team.buzzed{border-color:transparent;box-shadow:0 0 0 .45vh var(--accent);transform:translateY(-.3vh);z-index:3}
.team.locked{opacity:.38;filter:grayscale(.6)}
.team.locked::after{content:'✕';position:absolute;inset-inline-end:.5vw;top:-1vh;font-size:clamp(10px,1.8vh,20px);color:var(--bad);font-weight:900}
.team.leader .nm::before{content:'👑 ';font-size:.85em}
.team .delta{position:absolute;top:-1vh;left:50%;translate:-50% 0;font-weight:900;font-size:clamp(14px,3vh,36px);pointer-events:none;opacity:0;text-shadow:0 .3vh 1vh rgba(0,0,0,.4)}
.team .delta.up{color:var(--ok);animation:dfly 1.4s var(--ease) forwards}
.team .delta.down{color:var(--bad);animation:dfly 1.4s var(--ease) forwards}
@keyframes dfly{0%{opacity:0;translate:-50% 0}15%{opacity:1}100%{opacity:0;translate:-50% -8vh}}
@keyframes buzzpulse{0%,100%{box-shadow:0 0 0 .45vh var(--glow),0 0 4vh var(--glow)}50%{box-shadow:0 0 0 .9vh var(--glow),0 0 8vh var(--glow)}}
.team.shake{animation:shake .5s}
@keyframes shake{10%,90%{transform:translateX(-.4vw)}20%,80%{transform:translateX(.4vw)}30%,50%,70%{transform:translateX(-.6vw)}40%,60%{transform:translateX(.6vw)}}

/* bottom strip: hint at the start, host pills + next arrow at the end */
#bottom{display:flex;justify-content:space-between;align-items:center;gap:1vw;padding:0 2.6vw 1.8vh;min-height:9vh}
#host{display:flex;align-items:center;gap:.8vw}
#host button{padding:.8vh 1.4vw;border-radius:99px;background:var(--glass);color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:clamp(11px,1.9vh,20px);backdrop-filter:blur(8px);white-space:nowrap;transition:opacity .25s}
#host button:hover{filter:brightness(1.15)}
#host button.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
#host button:disabled{opacity:.35;cursor:default}
#host button.arrow{width:7.2vh;height:7.2vh;border-radius:50%;background:var(--card);color:var(--card-ink);padding:0;display:grid;place-items:center;font-size:clamp(18px,3.6vh,44px);box-shadow:0 .6vh 2vh rgba(0,0,0,.25);border:0}
#host button.arrow:hover{transform:scale(1.06)}
[dir=rtl] #host button.arrow .ar{display:inline-block;transform:scaleX(-1)}
#hint{padding:.6vh 1.2vw;border-radius:99px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line);font-size:clamp(11px,1.8vh,20px);color:var(--ink);opacity:.9;z-index:20;max-width:46vw;display:flex;align-items:center;gap:.6vw}
#hint .dot{width:1.2vh;height:1.2vh;border-radius:50%;background:var(--dim);flex:none}
#hint .dot.on{background:var(--ok);box-shadow:0 0 1vh var(--ok)}
#hint .dot.warn{background:var(--bad);box-shadow:0 0 1vh var(--bad)}
#hint .dot.amber{background:var(--accent);box-shadow:0 0 1vh var(--accent)}
/* clean stage: host controls appear only while the pointer is on the bottom strip (top buttons also on the top bar) */
.scr.clean #host,.scr.clean #hint,.scr.clean #hostTop{opacity:0;transition:opacity .35s}
.scr.clean #bottom:hover #host,.scr.clean #bottom:hover #hint,.scr.clean:has(#bottom:hover) #hostTop,.scr.clean #top:hover #hostTop{opacity:1}

/* overlays */
#overlay{position:absolute;inset:0;display:none;place-items:center;z-index:30;background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
#overlay.show{display:grid}
#overlay .big{font-weight:900;font-size:clamp(60px,26vh,320px);line-height:1;color:#fff;text-shadow:0 1vh 4vh rgba(0,0,0,.5)}
#overlay .big.pop{animation:cdpop .9s var(--ease) both}
@keyframes cdpop{0%{opacity:0;transform:scale(1.8)}25%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.8)}}
#overlay .box{text-align:center;padding:4vh 6vw;border-radius:3vh;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:#fff;max-width:80vw}
#overlay .box h2{font-size:clamp(24px,6vh,72px);font-weight:900}
#overlay .box p{font-size:clamp(14px,2.6vh,30px);color:rgba(255,255,255,.75);margin-top:1vh}
#overlay .box .row{display:flex;gap:1vw;justify-content:center;margin-top:3vh;flex-wrap:wrap}
#overlay .box button{padding:1.4vh 2.6vw;border-radius:1.4vh;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:clamp(14px,2.4vh,26px)}
#overlay .box button.primary{background:var(--accent);color:var(--accent-ink)}
#flash{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:25}
#flash .card{padding:2.4vh 5vw;border-radius:3vh;font-weight:900;font-size:clamp(28px,8vh,110px);color:#fff;opacity:0;transform:scale(.6);box-shadow:0 3vh 8vh rgba(0,0,0,.5);text-align:center;line-height:1.1;max-width:90vw}
#flash .card small{display:block;font-size:.4em;font-weight:700;opacity:.9;margin-top:.4vh}
#flash .card.ok{background:var(--ok)}#flash .card.bad{background:var(--bad)}#flash .card.info{background:var(--accent);color:var(--accent-ink)}#flash .card.mute{background:rgba(0,0,0,.65)}
#flash .card.go{animation:flashin 1.6s var(--ease) forwards}
@keyframes flashin{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.05)}25%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1.1)}}
.confetti{position:absolute!important;inset:0;pointer-events:none;z-index:26;width:100%;height:100%}

/* entrance animations */
.pro .in-q{animation:fadeUp .6s var(--ease) both}
.pro .in-c{animation:fadeUp .5s var(--ease) both;animation-delay:calc(var(--i)*.08s + .15s)}
.fun .in-q{animation:popIn .7s var(--spring) both}
.fun .in-c{animation:popIn .6s var(--spring) both;animation-delay:calc(var(--i)*.1s + .2s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(3vh)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.6) rotate(-2deg)}to{opacity:1;transform:none}}
.fun .choice.correct{animation:bounceC .8s var(--spring)}
.fun #qCat{animation:none}
@keyframes bounceC{0%{transform:scale(1)}40%{transform:scale(1.08) rotate(-1.5deg)}70%{transform:scale(.98)}100%{transform:scale(1.03)}}
.fun .choice.wrong{animation:shake .5s}
.fun .team.buzzed{animation:buzzpop .45s var(--spring)}
@keyframes buzzpop{0%{transform:scale(.97)}60%{transform:scale(1.04) translateY(-.6vh)}100%{transform:translateY(-.3vh)}}
.fun .choice,.fun #qCard{border-radius:3.2vh}
.fun .team{border-radius:2.4vh}
.fun #timer.low{animation:wobble .6s infinite}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.fun #qCat{animation:fadeUp .5s var(--ease) both}

/* ═══════════════════════════ LEADERBOARD ═══════════════════════════ */
#board{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#board h1{text-align:center;padding:3vh 2vw 1vh;font-size:clamp(24px,6vh,76px);font-weight:900;letter-spacing:.02em}
#board h1 small{display:block;font-size:.4em;font-weight:400;color:var(--dim)}
#boardBody{display:grid;grid-template-columns:1.2fr 1fr;gap:3vw;padding:1vh 4vw;min-height:0}
#podium{display:flex;align-items:flex-end;justify-content:center;gap:1.6vw;padding-bottom:2vh;min-height:0}
.pod{flex:1;max-width:22vw;display:flex;flex-direction:column;align-items:center;gap:1vh;opacity:0;transform:translateY(6vh);transition:all .7s var(--spring);min-width:0}
.pod.show{opacity:1;transform:none}
.pod .nm{font-weight:900;font-size:clamp(14px,3vh,40px);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .sc{font-weight:900;font-size:clamp(16px,3.4vh,44px);color:var(--accent)}
.pod .bar{width:100%;border-radius:2vh 2vh 0 0;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));display:grid;place-items:center;font-weight:900;font-size:clamp(28px,8vh,100px);color:var(--accent-ink);box-shadow:0 -1vh 5vh var(--glow)}
.pod.p1 .bar{height:34vh}.pod.p2 .bar{height:24vh;filter:saturate(.7) brightness(1.1)}.pod.p3 .bar{height:17vh;filter:saturate(.6) brightness(.9)}
.pod .medal{font-size:clamp(28px,7vh,90px);line-height:1}
#ranks{overflow:auto;display:flex;flex-direction:column;gap:1vh;padding:0 .5vw 2vh;scrollbar-width:thin}
.rank{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4vw;padding:1.2vh 1.6vw;border-radius:1.6vh;background:var(--glass);border:1px solid var(--line);font-size:clamp(14px,2.6vh,32px);opacity:0;transform:translateX(3vw);animation:rin .5s var(--ease) forwards;animation-delay:var(--d)}
[dir=rtl] .rank{transform:translateX(-3vw)}
@keyframes rin{to{opacity:1;transform:none}}
.rank .r{font-weight:900;color:var(--dim);min-width:3.2vw;text-align:center}
.rank .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .sc{font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.rank.top{background:var(--accent);color:var(--accent-ink)}.rank.top .r,.rank.top .sc{color:var(--accent-ink)}
#boardBar{display:flex;justify-content:center;gap:1vw;padding:2vh;flex-wrap:wrap}
#boardBar button{padding:1.4vh 2.4vw;border-radius:1.4vh;background:var(--glass);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:clamp(13px,2.2vh,24px)}
#boardBar button.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}

/* ═══════════════════════════ LOBBY / SETTINGS ═══════════════════════════ */
#lobby{position:fixed;inset:0;display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--l-bg);color:var(--l-ink);overflow:hidden;z-index:40}
#lnav{background:var(--l-navy);color:#fff;display:flex;flex-direction:column;padding:22px 14px;gap:6px}
#lnav .logo{font-weight:900;font-size:22px;padding:6px 10px 18px;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
#lnav .logo span{font-size:26px}
#lnav button{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;color:rgba(255,255,255,.78);font-weight:700;text-align:start;font-size:15px}
#lnav button:hover{background:rgba(255,255,255,.08);color:#fff}
#lnav button.on{background:var(--l-accent);color:#fff}
#lnav .grow{flex:1}
#lnav .lang{display:flex;gap:6px;padding:0 4px}
#lnav .lang button{flex:1;justify-content:center;background:rgba(255,255,255,.08);padding:8px}
#lnav .lang button.on{background:#fff;color:var(--l-navy)}
#lnav .ver{font-size:11px;color:rgba(255,255,255,.4);padding:10px 12px 0}
#lmain{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0}
#lhead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px;background:var(--l-card);border-bottom:1px solid var(--l-line)}
#lhead h1{font-size:22px;font-weight:900}
#lhead h1 small{display:block;font-size:13px;font-weight:400;color:var(--l-dim);margin-top:2px}
#lhead .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:var(--l-soft);color:var(--l-ink);font-weight:700;font-size:14px;border:1px solid var(--l-line);transition:.15s;white-space:nowrap}
.btn:hover{background:#e6e9f4}
.btn.primary{background:var(--l-accent);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(253,90,55,.3)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.big{padding:14px 26px;font-size:17px;border-radius:14px}
.btn.navy{background:var(--l-navy);color:#fff;border-color:transparent}
.btn.danger{color:var(--l-bad)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
#lbody{overflow:auto;min-height:0;padding:24px 28px 60px}
.tab{display:none;max-width:1100px}
.tab.on{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}}
.card{background:var(--l-card);border:1px solid var(--l-line);border-radius:16px;padding:18px 20px;margin-bottom:18px}
.card h3{font-size:15px;font-weight:900;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card h3 .sub{font-size:12px;color:var(--l-dim);font-weight:400}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--l-line)}
.row:first-of-type{border-top:0}
.row label,.row .lbl{font-weight:700;font-size:14px}
.row .lbl small,.row label small{display:block;font-weight:400;color:var(--l-dim);font-size:12px;margin-top:1px}
.row .ctl{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.row.dis{opacity:.5;pointer-events:none}
input[type=number],input[type=text],select,textarea{padding:8px 10px;border:1px solid var(--l-line);border-radius:10px;background:#fff;min-width:0;outline:none}
input[type=number]{width:86px;text-align:center}
input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--l-accent);box-shadow:0 0 0 3px rgba(253,90,55,.15)}
input[type=range]{accent-color:var(--l-accent);width:160px}
input[type=color]{width:38px;height:30px;padding:0;border:1px solid var(--l-line);border-radius:8px;background:#fff;cursor:pointer}
.unit{font-size:12px;color:var(--l-dim)}
.seg{display:inline-flex;background:var(--l-soft);border-radius:10px;padding:3px;gap:2px}
.seg button{padding:6px 12px;border-radius:8px;font-weight:700;font-size:13px;color:var(--l-dim)}
.seg button.on{background:#fff;color:var(--l-ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.seg button:disabled{opacity:.4;cursor:default}
.sw{position:relative;width:44px;height:26px;border-radius:99px;background:#cfd3e0;transition:.2s;flex:none}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw.on{background:var(--l-accent)}
.sw.on::after{left:21px}
[dir=rtl] .sw::after{left:auto;right:3px}[dir=rtl] .sw.on::after{right:21px}
.sw:disabled{opacity:.4;cursor:default}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modeCard{border:2px solid var(--l-line);border-radius:14px;padding:14px;cursor:pointer;text-align:start;background:#fff;transition:.15s}
.modeCard:hover{border-color:#c9cee0}
.modeCard.on{border-color:var(--l-accent);background:#fff6f3}
.modeCard .ic{font-size:26px}
.modeCard b{display:block;margin-top:6px;font-size:15px}
.modeCard span{font-size:12px;color:var(--l-dim);display:block;margin-top:3px;line-height:1.4}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--l-line);border-radius:10px;overflow:hidden;background:#fff}
.stepper button{width:34px;height:34px;font-weight:900;font-size:18px;color:var(--l-dim)}
.stepper button:hover{background:var(--l-soft);color:var(--l-ink)}
.stepper input{width:56px;border:0;text-align:center;font-weight:900;font-size:16px;padding:0;border-radius:0}
#teamList{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 12px;margin-top:12px}
#teamList .t{display:flex;align-items:center;gap:8px}
#teamList .t b{width:26px;height:26px;border-radius:8px;background:var(--l-navy);color:#fff;display:grid;place-items:center;font-size:12px;flex:none}
#teamList .t input{flex:1;min-width:0}
.hintline{font-size:12px;color:var(--l-dim);margin-top:10px;line-height:1.5}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700;background:var(--l-soft);color:var(--l-dim)}
.pill.ok{background:#e4f6ea;color:var(--l-ok)}.pill.bad{background:#fde7ea;color:var(--l-bad)}.pill.warn{background:#fff1dc;color:#b26a00}
.stat{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.stat .s{flex:1;min-width:120px;background:var(--l-soft);border-radius:12px;padding:10px 14px}
.stat .s b{display:block;font-size:22px;font-weight:900}
.stat .s span{font-size:12px;color:var(--l-dim)}
table.bank{width:100%;border-collapse:collapse;font-size:13px}
table.bank th,table.bank td{padding:7px 8px;border-bottom:1px solid var(--l-line);text-align:start;vertical-align:top}
table.bank th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--l-dim);position:sticky;top:0;background:#fff;z-index:1}
table.bank td.q{max-width:380px}
table.bank td.pic{white-space:nowrap}
table.bank td.pic img{width:56px;height:40px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-inline-end:6px;border:1px solid var(--l-line)}
table.bank td .ans{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
table.bank td .ans span{background:var(--l-soft);padding:1px 7px;border-radius:6px;font-size:12px}
table.bank td .ans span.ok{background:#e4f6ea;color:var(--l-ok);font-weight:700}
table.bank tr.used td{opacity:.5}
table.bank td .x{color:var(--l-bad);font-weight:900;padding:2px 6px;border-radius:6px}
table.bank td .x:hover{background:#fde7ea}
.bankWrap{max-height:460px;overflow:auto;border:1px solid var(--l-line);border-radius:12px}
.dropzone{border:2px dashed #cfd3e0;border-radius:14px;padding:22px;text-align:center;color:var(--l-dim);font-size:14px;transition:.15s;cursor:pointer}
.dropzone.over{border-color:var(--l-accent);background:#fff6f3;color:var(--l-ink)}
.dropzone b{color:var(--l-ink);display:block;margin-bottom:4px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumbs .th{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--l-soft);border:1px solid var(--l-line)}
.thumbs .th img{width:100%;height:100%;object-fit:cover}
.thumbs .th i{position:absolute;bottom:0;left:0;right:0;font-size:9px;background:rgba(0,0,0,.55);color:#fff;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal}
.thumbs .th button{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:11px;line-height:18px}
.thumbs .th.miss{border-color:var(--l-bad)}
.prev{width:100%;min-height:120px;border-radius:12px;background:#222;position:relative;overflow:hidden;border:1px solid var(--l-line)}
/* the real stage, scaled into the preview box (sized to the window so vh/vw units stay true) */
#stage.preview{position:absolute;inset:auto;top:0;left:0;transform-origin:0 0;pointer-events:none;z-index:1}
.prev .ov{position:absolute;inset:0}
.prev .pv{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto auto;padding:5% 6%;gap:4%}
.prev .pv .ptop{display:flex;justify-content:space-between;font-size:10px;font-weight:700}
.prev .pv .pq{display:grid;place-items:center;font-weight:700;font-size:15px;text-align:center;line-height:1.3;border-radius:8px;padding:6px 10px}
.prev .pv .pc{display:grid;grid-template-columns:1fr 1fr;gap:5%}
.prev .pv .pc i{position:relative;border-radius:6px;font-style:normal;display:flex;align-items:center;gap:6px;padding:0 8px;font-size:11px;font-weight:700;min-height:26px;background-size:cover;background-position:center;overflow:hidden;isolation:isolate}
.prev .pv .pc i.skin::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.3));z-index:-1}
.prev .pv .pc i b{width:16px;height:16px;border-radius:4px;background:rgba(0,0,0,.28);display:grid;place-items:center;font-size:9px}
.prev .pv .pt{display:flex;gap:4%;justify-content:center}
.prev .pv .pt span{flex:1;max-width:22%;border-radius:6px;padding:3px 0;text-align:center;font-size:9px;font-weight:700;border:1px solid rgba(255,255,255,.2)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatches label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.log{font-family:Consolas,monospace;font-size:12px;background:#1b1f3a;color:#c8cde8;border-radius:10px;padding:10px;height:150px;overflow:auto;white-space:pre-wrap;direction:ltr;text-align:left}
.testGrid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:10px}
.testGrid button{padding:8px 0;border-radius:8px;background:var(--l-soft);font-weight:900;border:1px solid var(--l-line)}
.testGrid button:hover{background:var(--l-navy);color:#fff}
.testGrid button:disabled{opacity:.3;cursor:default}
.sndRow{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--l-line);font-size:14px}
.sndRow:first-of-type{border-top:0}
.sndRow .cus{font-size:11px;color:var(--l-ok);font-weight:700}
.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff6f3;border:1px solid #ffd3c7;border-radius:14px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.banner b{display:block}
.banner .acts{display:flex;gap:8px}
.mq{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mq input.full{grid-column:1/-1}
.mq select{grid-column:1/-1}

/* toast + modal */
#toast{position:fixed;left:50%;bottom:26px;translate:-50% 0;background:#1b1f3a;color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:700;z-index:100;opacity:0;pointer-events:none;transition:.25s;max-width:80vw;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#toast.show{opacity:1;translate:-50% -6px}
#modal{position:fixed;inset:0;z-index:90;background:rgba(10,12,30,.55);display:none;place-items:center;backdrop-filter:blur(4px)}
#modal.show{display:grid}
#modal .mb{background:#fff;color:var(--l-ink);border-radius:18px;padding:24px 26px;width:min(520px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.4);font-family:var(--font)}
#modal h2{font-size:19px;font-weight:900;margin-bottom:8px}
#modal p{font-size:14px;color:var(--l-dim);line-height:1.5;white-space:pre-line}
#modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
#mInput{width:100%;margin-top:14px;padding:10px 12px;border:1px solid var(--l-line);border-radius:10px;font-size:15px}
/* play page: everything that belongs to the admin page is hidden */
body.play [data-admin]{display:none!important}
kbd{font-family:inherit;font-size:11px;background:var(--l-soft);border:1px solid var(--l-line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;font-weight:700}
.kbds{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px;align-items:center}
.kbds div:nth-child(odd){white-space:nowrap}