:root{
  --bg:#0B0D2A; --ink:#0B0D2A; --mist:rgba(255,255,255,.72); --mist2:rgba(255,255,255,.45);
  --lime:#D4FF3D; --cyan:#22E5FF; --magenta:#FF2E88; --orange:#FF6A1F; --yellow:#FFE23D;
  --ok:#3DFF9A; --bad:#FF4B6E;
  --disp:'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif; --body:'IBM Plex Sans Arabic','Alexandria',system-ui,sans-serif;
  --ta:#FF2E88; --tb:#22E5FF;
}

/* CSP-safe finite visual tokens. Dynamic state selects a token; all declarations stay in this stylesheet. */
:is([data-c="magenta"],[data-ca="magenta"],[data-cb="magenta"],[data-tc="magenta"]){--c:#FF2E88;--ca:#FF2E88;--cb:#FF2E88;--tc:#FF2E88}
:is([data-c="cyan"],[data-ca="cyan"],[data-cb="cyan"],[data-tc="cyan"]){--c:#22E5FF;--ca:#22E5FF;--cb:#22E5FF;--tc:#22E5FF}
:is([data-c="lime"],[data-ca="lime"],[data-cb="lime"],[data-tc="lime"]){--c:#D4FF3D;--ca:#D4FF3D;--cb:#D4FF3D;--tc:#D4FF3D}
:is([data-c="orange"],[data-ca="orange"],[data-cb="orange"],[data-tc="orange"]){--c:#FF6A1F;--ca:#FF6A1F;--cb:#FF6A1F;--tc:#FF6A1F}
:is([data-c="purple"],[data-ca="purple"],[data-cb="purple"],[data-tc="purple"]){--c:#B06CFF;--ca:#B06CFF;--cb:#B06CFF;--tc:#B06CFF}
:is([data-c="yellow"],[data-ca="yellow"],[data-cb="yellow"],[data-tc="yellow"]){--c:#FFE23D;--ca:#FFE23D;--cb:#FFE23D;--tc:#FFE23D}
:is([data-c="green"],[data-ca="green"],[data-cb="green"],[data-tc="green"]){--c:#3DFF9A;--ca:#3DFF9A;--cb:#3DFF9A;--tc:#3DFF9A}
:is([data-c="bad"],[data-ca="bad"],[data-cb="bad"],[data-tc="bad"]){--c:#FF4B6E;--ca:#FF4B6E;--cb:#FF4B6E;--tc:#FF4B6E}
:is([data-c="landing-purple"],[data-ca="landing-purple"],[data-cb="landing-purple"],[data-tc="landing-purple"]){--c:#B36BFF;--ca:#B36BFF;--cb:#B36BFF;--tc:#B36BFF}
:is([data-c="landing-orange"],[data-ca="landing-orange"],[data-cb="landing-orange"],[data-tc="landing-orange"]){--c:#FF8A3D;--ca:#FF8A3D;--cb:#FF8A3D;--tc:#FF8A3D}
:is([data-c="landing-lime"],[data-ca="landing-lime"],[data-cb="landing-lime"],[data-tc="landing-lime"]){--c:#D9FF3D;--ca:#D9FF3D;--cb:#D9FF3D;--tc:#D9FF3D}
:is([data-c="neutral"],[data-ca="neutral"],[data-cb="neutral"],[data-tc="neutral"]){--c:#7A80B8;--ca:#7A80B8;--cb:#7A80B8;--tc:#7A80B8}
html[data-ta="magenta"]{--ta:#FF2E88}html[data-ta="cyan"]{--ta:#22E5FF}html[data-ta="lime"]{--ta:#D4FF3D}html[data-ta="orange"]{--ta:#FF6A1F}html[data-ta="purple"]{--ta:#B06CFF}html[data-ta="yellow"]{--ta:#FFE23D}html[data-ta="green"]{--ta:#3DFF9A}html[data-ta="bad"]{--ta:#FF4B6E}
html[data-tb="magenta"]{--tb:#FF2E88}html[data-tb="cyan"]{--tb:#22E5FF}html[data-tb="lime"]{--tb:#D4FF3D}html[data-tb="orange"]{--tb:#FF6A1F}html[data-tb="purple"]{--tb:#B06CFF}html[data-tb="yellow"]{--tb:#FFE23D}html[data-tb="green"]{--tb:#3DFF9A}html[data-tb="bad"]{--tb:#FF4B6E}
[data-pc="200"]{--pc:#22E5FF}[data-pc="400"]{--pc:#B06CFF}[data-pc="600"]{--pc:#FF6A1F}

*{box-sizing:border-box}
html{direction:rtl}
body{margin:0;background:var(--bg);color:#fff;font-family:var(--body);font-size:17px;line-height:1.5;min-height:100vh;overflow-x:hidden}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
input{font-family:inherit}
h1,h2,h3{font-family:var(--disp);margin:0;line-height:1.1;text-wrap:balance}
[hidden]{display:none!important}
/* V1 actions and board inventories remain reachable on short viewports. */
#arena .side .lives{display:flex;flex-wrap:wrap;gap:4px}
#arena .life .ltx{display:none}
#q .award .done{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
#q .award .btn.xl{font-size:clamp(17px,3vw,28px);padding:14px 25px}
#q .qtop{flex-wrap:wrap}
#q .timer{flex-wrap:wrap}
body[data-view="arena"]{overflow-y:auto}
body[data-view="q"] #q .qcard{max-height:none;overflow:visible}
.num{font-family:var(--disp);font-variant-numeric:tabular-nums}
.preserve-lines{white-space:pre-line}
.positioned{position:relative}
.dashboard-actions,.card-actions{display:flex;align-items:center;flex-wrap:wrap}
.dashboard-actions{gap:10px}.card-actions{gap:8px}.card-actions-compact{margin-top:10px}.card-actions-spaced,.helpbox-spaced{margin-top:14px}
.muted-text{color:var(--mist)}.btn.danger-text{color:var(--bad)}.hub-turn-bar{margin-bottom:12px}
.admin-email-cell{text-align:left}.admin-credit-editor{display:inline-flex;gap:4px}.admin-credit-input{width:112px;padding:4px 6px;border:0;border-radius:6px;font-family:inherit}
.credit-v2{margin-block-start:24px;padding-block-start:16px;border-block-start:1px solid #ffffff30}.credit-v2 h4{font-size:1.15rem;margin:0 0 12px}.credit-v2-controls,#creditQuickControls{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.credit-v2 label{display:flex;flex-direction:column;gap:6px;min-width:0}.credit-v2 input:not([type=checkbox]),.credit-v2 select{max-width:100%;min-width:0;padding:10px;border-radius:8px;border:1px solid #ffffff50;background:#17152c;color:#fff;font:inherit}.credit-v2 label:has(input[type=checkbox]){flex-direction:row;align-items:start}.credit-v2 input[type=checkbox]{flex-shrink:0}.credit-v2-table td{overflow-wrap:anywhere;max-width:340px;vertical-align:top}.credit-v2-table small{display:block}.credit-v2 button:disabled{opacity:.55;cursor:not-allowed}.credit-v2 [hidden]{display:none!important}@media(max-width:600px){.credit-v2-controls>*{flex:1 1 100%}.credit-v2-controls input,.credit-v2-controls select{width:100%}.credit-v2-table{min-width:780px}.credit-v2-controls button{width:100%}}
.banner-error{--tc:var(--bad)}

.aura{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(60% 50% at 85% 10%,color-mix(in srgb,var(--ta) 38%,transparent),transparent 70%),radial-gradient(60% 50% at 15% 90%,color-mix(in srgb,var(--tb) 38%,transparent),transparent 70%),linear-gradient(160deg,#0E1140,#0B0D2A 60%)}
.aura::after{content:"";position:absolute;inset:-50%;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px);animation:drift 40s linear infinite}
body[data-view="home"] .aura::after{animation-duration:150s}
body:is([data-view="enter"],[data-view="draft"],[data-view="arena"],[data-view="q"],[data-view="end"]) .aura::after{animation:none}
@keyframes drift{to{transform:translateX(160px)}}
.screen{max-width:1240px;margin:0 auto;padding:22px 22px 60px;position:relative}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;background:#fff;color:var(--ink);font-family:var(--disp);font-weight:800;font-size:19px;transform:skewX(-8deg);transition:transform .1s,filter .1s;white-space:nowrap}
.btn>span{display:inline-block;transform:skewX(8deg)}
.btn:hover{filter:brightness(1.05);transform:skewX(-8deg) translateY(-2px)}
.btn:active{transform:skewX(-8deg) translateY(2px)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:skewX(-8deg)}
.btn.lime{background:var(--lime)} .btn.yellow{background:var(--yellow)} .btn.glass{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.35)} .btn.mag{background:var(--magenta);color:#fff} .btn.dark{background:var(--ink);color:#fff;border:2px solid rgba(255,255,255,.5)}
.btn.xl{font-size:28px;padding:20px 54px} .btn.sm{font-size:15px;padding:9px 18px}
.btn.team{background:var(--tc);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);font-family:var(--disp);font-weight:700;font-size:14px;color:#fff}
.kbd{font-family:var(--disp);font-size:12px;padding:1px 7px;border:1.5px solid rgba(255,255,255,.4);border-radius:6px;background:rgba(0,0,0,.25)}

/* ===================== ENTER ===================== */
.enter{min-height:100vh;display:grid;grid-template-columns:1fr minmax(300px,440px) 1fr;align-items:stretch}
@media (max-width:980px){.enter{grid-template-columns:1fr;min-height:0}}
.half{padding:40px 30px;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative}
.half.a{background:linear-gradient(200deg,var(--ta),color-mix(in srgb,var(--ta) 55%,#000));clip-path:polygon(0 0,100% 0,100% 100%,10% 100%)}
.half.b{background:linear-gradient(160deg,var(--tb),color-mix(in srgb,var(--tb) 55%,#000));clip-path:polygon(0 0,90% 0,100% 100%,0 100%)}
@media (max-width:980px){.half.a,.half.b{clip-path:none}}
.half .lbl{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.08em;opacity:.9}
.half input{width:100%;background:rgba(0,0,0,.28);border:0;border-bottom:4px solid #fff;color:#fff;font-family:var(--disp);font-weight:800;font-size:32px;padding:8px 14px;line-height:1.2}
.half input::placeholder{color:rgba(255,255,255,.5)}
.avatars{display:flex;gap:8px;flex-wrap:wrap}
.av{width:52px;height:52px;font-size:28px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:2.5px solid transparent;border-radius:14px;transition:transform .1s}
.av:hover{transform:scale(1.1)} .av[aria-checked="true"]{background:#fff;border-color:#fff;transform:scale(1.12) rotate(-6deg);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:36px;height:36px;border-radius:50%;background:var(--c);border:3px solid rgba(255,255,255,.35);transition:transform .1s;position:relative}
.sw:hover{transform:scale(1.15)} .sw[aria-checked="true"]{border-color:#fff;transform:scale(1.2)} .sw[aria-checked="true"]::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.sw:disabled{opacity:.2;cursor:not-allowed;transform:none}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px 12px;text-align:center;z-index:1}
.logo{position:relative;display:inline-block;transform:skewX(-8deg)}
.logo h1{font-size:clamp(56px,6.6vw,96px);font-weight:900;line-height:1.05;letter-spacing:-.02em;color:#fff;text-shadow:6px 6px 0 var(--ink)}
.logo h1 b{display:block;color:var(--lime)}
.logo .vs{position:absolute;top:-24px;left:-34px;background:var(--yellow);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:22px;padding:2px 14px;transform:rotate(-12deg);box-shadow:4px 4px 0 var(--ink)}
.logo-img{display:block;width:min(430px,78vw);height:auto;object-fit:contain;filter:drop-shadow(0 18px 34px rgba(0,0,0,.35))}
.hero .logo-img{width:min(470px,82vw)}
.tagline{font-size:18px;color:var(--mist);max-width:28em;margin:0;line-height:1.7}
.timerpick{display:flex;gap:6px;background:rgba(0,0,0,.35);padding:6px;border-radius:999px;border:1.5px solid rgba(255,255,255,.2)}
.timerpick button{padding:8px 18px;border-radius:999px;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--mist)}
.timerpick button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.setup-label{font-family:var(--disp);font-size:14px;font-weight:800;color:var(--mist);margin-bottom:-14px}
.challengepick{display:flex;gap:6px;width:min(420px,100%);padding:6px;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.2);border-radius:16px}
.challengepick button{flex:1;padding:9px 12px;border-radius:11px;color:var(--mist);font-family:var(--disp);line-height:1.3}
.challengepick button b{display:block;font-size:15px}.challengepick button small{display:block;font-size:12px;margin-top:2px;opacity:.8}
.challengepick button[aria-pressed="true"]{background:var(--yellow);color:var(--ink);box-shadow:0 5px 18px rgba(0,0,0,.25)}
.challengepick button[aria-disabled="true"]{cursor:not-allowed;opacity:.55;filter:saturate(.55)}
.resume{width:100%;max-width:420px;padding:14px 18px;background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;transform:skewX(-6deg)}
.resume>*{transform:skewX(6deg)}
.resume b{font-family:var(--disp);font-size:17px}
.resume .btn{font-size:14px;padding:8px 14px}

/* ===================== DRAFT ===================== */
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.bar h2{font-size:34px;font-weight:800}
.bar h2 small{display:block;font-family:var(--body);font-weight:500;font-size:15px;color:var(--mist)}
.turn{display:flex;align-items:center;gap:12px;padding:8px 20px;background:var(--tc);color:#fff;font-family:var(--disp);font-weight:800;font-size:20px;transform:skewX(-8deg);box-shadow:0 8px 30px color-mix(in srgb,var(--tc) 50%,transparent);text-shadow:0 1px 2px rgba(0,0,0,.35);animation:pop .3s}
.turn>*{transform:skewX(8deg);display:inline-block}
@keyframes pop{from{transform:skewX(-8deg) scale(.7);opacity:0}to{transform:skewX(-8deg) scale(1);opacity:1}}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
@media (max-width:700px){.picks{grid-template-columns:1fr}}
.pickrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-right:6px solid var(--tc);background:rgba(255,255,255,.06)}
.pickrow .who{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--tc);margin-left:6px}
.pickrow .slot{padding:4px 12px;border-radius:8px;background:rgba(255,255,255,.1);font-family:var(--disp);font-weight:700;font-size:15px;min-width:90px;text-align:center;color:var(--mist2)}
.pickrow .slot.on{background:var(--tc);color:#fff}
.draft-search-toggle{min-width:94px}
.draft-search-toggle.active{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,214,74,.13)}
.draft-utility-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.draft-search-panel{display:flex;align-items:center;gap:6px;flex:1 1 240px;max-width:300px;min-height:44px;padding:3px 5px 3px 10px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.08);transition:border-color .2s ease,box-shadow .2s ease}
.draft-search-panel[hidden]{display:none}
.draft-search-panel:focus-within{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,214,74,.13)}
.draft-search-panel input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:15px;text-align:right}
.draft-search-panel input::placeholder{color:rgba(255,255,255,.58)}
.draft-search-panel input::-webkit-search-cancel-button{display:none}
.draft-search-clear{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:23px;line-height:1;cursor:pointer}
.draft-search-clear:hover{background:rgba(255,255,255,.17)}
.draft-search-empty{margin:0 0 10px;padding:12px;border:1px dashed rgba(255,255,255,.2);border-radius:12px;color:var(--mist);text-align:center}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cat{position:relative;padding:16px 12px 12px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.12);text-align:center;font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .12s,background .12s;min-height:120px;justify-content:center}
.cat .ic{font-size:36px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.cat:hover:not(:disabled){transform:translateY(-4px) rotate(-1deg);background:rgba(255,255,255,.14);border-color:#fff}
.cat.taken{background:var(--tc);border-color:#fff;color:#fff;box-shadow:0 10px 30px color-mix(in srgb,var(--tc) 50%,transparent)}
.cat.taken::after{content:attr(data-owner);position:absolute;top:-10px;right:10px;background:#fff;color:var(--tc);font-size:12px;padding:1px 9px;border-radius:999px;font-weight:800}
.cat:disabled:not(.taken){opacity:.3;cursor:not-allowed}
.hubfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;color:var(--mist)}

/* ===================== SCORE HEAD ===================== */
.arena-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;margin-bottom:22px;position:relative}
#q .arena-head{margin-bottom:12px}
#q .side{padding:10px 18px 12px;min-height:0}
#q .side .sc{font-size:40px}
#q .side>.av{width:48px;height:48px;font-size:28px}
@media (max-width:820px){.arena-head{grid-template-columns:1fr 1fr}.arena-head .core{grid-column:1/-1;order:-1;margin-bottom:8px}}
.side{padding:14px 20px 16px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"av meta ctl" "lives lives lives";column-gap:14px;row-gap:8px;align-items:center;background:linear-gradient(180deg,var(--tc),color-mix(in srgb,var(--tc) 65%,#000));position:relative}
.side.a{clip-path:polygon(0 0,100% 0,100% 100%,14px 100%)} .side.b{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 100%,0 100%);grid-template-areas:"ctl meta av" "lives lives lives";grid-template-columns:auto 1fr auto;text-align:left}
.side>.av{grid-area:av} .side>.meta{grid-area:meta} .side>.ctl{grid-area:ctl}
.side>.av{width:60px;height:60px;background:rgba(0,0,0,.3);font-size:34px;border-radius:16px;flex:none}
.side .meta{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}
.side .nm{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1.1;text-shadow:0 2px 4px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .sc{font-family:var(--disp);font-weight:900;font-size:50px;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.side .sc.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.25)}}
.side .ctl{display:flex;flex-direction:column;gap:6px;align-items:center}
.side .pm{width:40px;height:34px;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.4);color:#fff;font-family:var(--disp);font-weight:800;font-size:20px;line-height:1;border-radius:8px}
.side .pm:active{transform:translateY(2px)}
.lives{grid-area:lives;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.lives:empty{display:none}
.side.b .lives{justify-content:flex-start;direction:ltr}
.life{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:#fff;color:var(--ink);font-family:var(--disp);font-weight:800;font-size:13px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .1s}
.life:not(:disabled):hover{transform:translateY(-3px);background:var(--yellow)}
.life.used{background:rgba(0,0,0,.45);color:rgba(255,255,255,.6);text-decoration:line-through;box-shadow:none}
.life:disabled{cursor:default} .life:disabled:not(.used){opacity:.7}
.core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 22px;text-align:center;background:var(--ink);border-top:3px solid var(--yellow);border-bottom:3px solid var(--yellow);min-width:190px}
.core .stage{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--yellow);letter-spacing:.06em}
.core .round{font-family:var(--disp);font-weight:800;font-size:26px;line-height:1}
.core .round small{font-size:14px;color:var(--mist2)}
.steps{display:flex;gap:4px;margin-top:4px}
.steps button{padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.1);font-family:var(--disp);font-size:12px;font-weight:700;color:var(--mist)}
.steps button[aria-pressed="true"]{background:var(--yellow);color:var(--ink)}

/* ===================== HUB ===================== */
.stagebar{display:flex;align-items:center;gap:14px;margin:8px 0 18px;flex-wrap:wrap}
.stagebadge{font-family:var(--disp);font-weight:800;font-size:30px;padding:6px 26px;background:var(--pc);color:var(--ink);transform:skewX(-8deg);box-shadow:0 10px 40px color-mix(in srgb,var(--pc) 45%,transparent)}
.stagebadge>span{display:inline-block;transform:skewX(8deg)}
.track{display:flex;gap:5px;flex:1;min-width:200px}
.track i{flex:1;height:10px;background:rgba(255,255,255,.12);border-radius:3px;transform:skewX(-20deg)}
.track i.on{background:var(--pc)} .track i.cur{background:#fff;animation:blink 1s infinite alternate}
@keyframes blink{to{opacity:.4}}
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.hubgrid{grid-template-columns:repeat(2,1fr)}}
.hcat{position:relative;padding:22px 16px 18px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.14);text-align:center;font-family:var(--disp);font-weight:800;font-size:22px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .12s,background .12s;overflow:hidden}
.hcat .ic{font-size:44px;line-height:1}
.hcat .left{display:flex;gap:6px}
.hcat .left i{width:26px;height:8px;border-radius:2px;background:var(--pc);transform:skewX(-20deg)} .hcat .left i.off{background:rgba(255,255,255,.15)}
.hcat:hover:not(:disabled){transform:translateY(-5px) scale(1.02);background:rgba(255,255,255,.15);border-color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.hcat:disabled{opacity:.28;cursor:not-allowed}
.hcat::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:90%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 35%,transparent),transparent);pointer-events:none}
.topbtns{display:flex;gap:8px}
.iconbtn{width:42px;height:42px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:18px;border-radius:10px}

/* ===================== QUESTION ===================== */
.qtop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.qtop .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ptsbadge{font-family:var(--disp);font-weight:800;font-size:26px;padding:4px 20px;background:var(--pc);color:var(--ink);transform:skewX(-8deg)}
.ptsbadge>span{display:inline-block;transform:skewX(8deg)}
.timer{display:flex;align-items:center;gap:12px}
.ring{width:78px;height:78px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.12)} .ring .fg{stroke:var(--lime);transition:stroke-dashoffset 1s linear,stroke .4s}
.ring .t{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:26px;font-variant-numeric:tabular-nums}
.ring.warn .fg{stroke:var(--yellow)} .ring.danger .fg{stroke:var(--magenta)} .ring.danger .t{color:var(--magenta);animation:pulse .5s infinite alternate}
.ring.done .t{font-size:14px;color:var(--magenta)}
@keyframes pulse{to{transform:scale(1.15)}}
.banners{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.banner{display:flex;align-items:center;gap:12px;padding:10px 18px;font-family:var(--disp);font-weight:700;font-size:18px;background:rgba(255,255,255,.1);border-right:6px solid var(--tc);animation:slidein .25s}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}
.banner .grow{flex:1} .banner .mini{font-size:28px;color:var(--lime);font-variant-numeric:tabular-nums}
.qcard{position:relative;padding:30px 36px 28px;background:#fff;color:var(--ink);margin:12px 0 18px;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 26px) 100%,0 100%)}
.qcard .qtext{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.5vw,30px);line-height:1.6}
.qcard .catlbl{position:absolute;top:0;right:0;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:700;font-size:14px;padding:4px 16px}
.timeup{position:absolute;bottom:0;left:40px;background:var(--magenta);color:#fff;font-family:var(--disp);font-weight:800;font-size:17px;padding:4px 18px;animation:pop2 .3s}
@keyframes pop2{from{transform:scale(.5)}}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
@media (max-width:700px){.opts{grid-template-columns:1fr}}
.opt{position:relative;text-align:right;padding:12px 16px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.35;display:flex;align-items:center;gap:14px;min-height:66px;transition:transform .1s,background .1s;overflow:hidden}
.opt:not(.locked){cursor:pointer}
.opt:not(.locked):hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px)}
.opt .letter{flex:none;width:42px;height:42px;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font-size:20px;transform:skewX(-8deg)}
.opt .letter>span{display:inline-block;transform:skewX(8deg)}
.opt .txt{flex:1}
.opt .chips{display:flex;gap:6px;flex:none}
.chip{padding:3px 12px;background:var(--tc);color:#fff;font-size:14px;font-weight:800;font-family:var(--disp);transform:skewX(-8deg);text-shadow:0 1px 2px rgba(0,0,0,.4);animation:pop2 .2s}
.chip>span{display:inline-block;transform:skewX(8deg)}
.opt.correct{background:var(--ok);color:var(--ink);border-color:var(--ok)} .opt.correct .letter{background:var(--ink);color:#fff}
.opt.wrong{opacity:.4} .opt.wrong.picked{opacity:.85;background:rgba(255,75,110,.25);border-color:var(--bad)}
.opt.correct::after{content:"✓ الإجابة الصحيحة";position:absolute;top:0;left:0;font-size:13px;padding:2px 12px;background:var(--ink);color:var(--ok);font-weight:800}
.chooser{position:absolute;z-index:5;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(11,13,42,.94);animation:pop2 .15s;flex-wrap:wrap}
.chooser button{padding:8px 16px;background:var(--tc);color:#fff;font-family:var(--disp);font-weight:800;font-size:16px;transform:skewX(-8deg);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.chooser button>span{display:inline-block;transform:skewX(8deg)}
.chooser button.x{background:transparent;border:1.5px solid rgba(255,255,255,.4)}
.chooser .lbl{color:var(--mist);font-size:14px;font-weight:700}
.buzz{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:16px}
@media (max-width:700px){.buzz{grid-template-columns:1fr 1fr}.buzz .hint{grid-column:1/-1;order:2}}
.buzzer{position:relative;padding:14px 20px;background:var(--tc);color:#fff;font-family:var(--disp);font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;gap:12px;transform:skewX(-8deg);box-shadow:0 10px 0 color-mix(in srgb,var(--tc) 50%,#000),0 14px 40px color-mix(in srgb,var(--tc) 40%,transparent);transition:transform .08s,box-shadow .08s;text-shadow:0 2px 3px rgba(0,0,0,.35)}
.buzzer>*{transform:skewX(8deg);display:inline-block}
.buzzer:active:not(:disabled){transform:skewX(-8deg) translateY(8px);box-shadow:0 2px 0 color-mix(in srgb,var(--tc) 50%,#000)}
.buzzer:disabled{cursor:default;filter:saturate(.5) brightness(.8)}
.buzzer.hit{filter:none}
.buzzer .ord{position:absolute;top:-14px;inset-inline-end:-8px;background:var(--yellow);color:var(--ink);font-size:16px;padding:2px 12px;transform:skewX(8deg) rotate(6deg);box-shadow:3px 3px 0 var(--ink)}
.buzzer .ord.first{background:var(--lime)}
.buzz .hint{text-align:center;font-size:14px;color:var(--mist);max-width:210px;line-height:1.6}
.qactions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.award{margin:0 0 14px;padding:16px 22px;background:var(--yellow);color:var(--ink);clip-path:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px));animation:pop2 .25s}
.award h3{font-size:22px;font-weight:800;margin-bottom:8px}
.award .who{display:flex;gap:10px;flex-wrap:wrap}
.award .who .btn{flex:1;min-width:150px;padding:10px 18px;font-size:17px}
.award .done{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--disp);font-weight:800;font-size:22px}
.suggest{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--ink);color:#fff;padding:10px 16px;margin-bottom:10px;font-family:var(--disp);font-weight:700;font-size:18px}
.suggest small{display:block;font-family:var(--body);font-weight:400;font-size:13px;color:var(--mist)}

/* ===================== OVERLAYS ===================== */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(6,8,30,.9);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.count{text-align:center}
.count .ready{font-family:var(--disp);font-weight:800;font-size:clamp(36px,7vw,72px);letter-spacing:.04em;color:#fff}
.count .n{font-family:var(--disp);font-weight:900;font-size:clamp(140px,30vw,260px);line-height:1;color:var(--lime);text-shadow:10px 10px 0 var(--magenta);animation:zoom .85s ease-out;transform:skewX(-8deg)}
.count .n.go{color:var(--yellow);text-shadow:10px 10px 0 var(--cyan);font-size:clamp(80px,16vw,170px)}
@keyframes zoom{0%{transform:skewX(-8deg) scale(.2);opacity:0}35%{transform:skewX(-8deg) scale(1.15);opacity:1}100%{transform:skewX(-8deg) scale(1)}}
.modal{width:min(600px,100%);padding:30px;text-align:center;background:#fff;color:var(--ink);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 30px) 100%,0 100%)}
.modal h3{font-size:30px;font-weight:800;margin-bottom:6px}
.modal p{color:#4a4d70;margin:0 0 18px}
.modal .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.modal .btn.glass{color:var(--ink);border-color:var(--ink)}
.stageup{text-align:center;color:#fff}
.stageup .s1{font-family:var(--disp);font-weight:800;font-size:28px;color:var(--yellow);letter-spacing:.1em}
.stageup .s2{font-family:var(--disp);font-weight:800;font-size:clamp(80px,16vw,180px);line-height:1;color:var(--pc);text-shadow:8px 8px 0 #fff;transform:skewX(-8deg);animation:zoom .8s}
.stageup .s3{font-size:20px;color:var(--mist)}
.wheelwrap{position:relative;width:min(320px,80vw);margin:8px auto 16px}
.wheel{width:100%;aspect-ratio:1;border-radius:50%;border:6px solid var(--ink);box-shadow:0 0 0 6px #fff,0 20px 50px rgba(0,0,0,.3);transition:transform 4.2s cubic-bezier(.12,.65,.05,1);background:#fff;overflow:hidden;position:relative}
.wheel svg{width:100%;height:100%;display:block}
.wheel text{font-family:var(--disp);font-weight:800}
.pointer{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:0;height:0;border:18px solid transparent;border-top:36px solid var(--ink);z-index:2}
.pointer::after{content:"";position:absolute;top:-33px;left:-13px;border:13px solid transparent;border-top:26px solid var(--yellow)}
.wlegend{display:flex;flex-direction:column;gap:6px;text-align:right;margin:0 auto 16px;max-width:400px;font-size:14px;color:#4a4d70}
.wlegend span{display:flex;align-items:center;gap:8px}
.wlegend i{width:14px;height:14px;border-radius:3px;flex:none}
.wresult{font-family:var(--disp);font-weight:800;font-size:26px;padding:12px;margin-bottom:14px;animation:pop2 .3s;transform:skewX(-6deg)}
.wresult>*{display:block;transform:skewX(6deg)}

/* ===================== END ===================== */
.endwrap{min-height:calc(100vh - 82px);display:grid;place-items:center;text-align:center}
.endcard{padding:40px 20px}
.endcard .crown{font-size:80px;line-height:1;animation:bounce 1.2s infinite alternate}
@keyframes bounce{to{transform:translateY(-14px)}}
.endcard h1{font-size:clamp(40px,7vw,80px);font-weight:800;color:#fff;text-shadow:6px 6px 0 var(--ink)}
.endcard .winner{display:inline-block;margin:14px 0 6px;padding:10px 40px;background:var(--tc);color:#fff;font-family:var(--disp);font-weight:800;font-size:clamp(40px,7vw,80px);transform:skewX(-8deg);box-shadow:0 20px 60px color-mix(in srgb,var(--tc) 60%,transparent),8px 8px 0 #fff;text-shadow:0 3px 0 rgba(0,0,0,.35);animation:zoom .8s}
.endcard .winner>span{display:inline-block;transform:skewX(8deg)}
.endcard p{font-size:20px;color:var(--mist)}
.final{display:flex;justify-content:center;gap:18px;margin:26px 0 30px;flex-wrap:wrap}
.final .fs{padding:16px 30px;min-width:220px;background:var(--tc);transform:skewX(-8deg)}
.final .fs>*{transform:skewX(8deg)}
.final .fs .n{font-family:var(--disp);font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;gap:8px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.final .fs .s{font-family:var(--disp);font-weight:800;font-size:56px;line-height:1.1;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.tie .winner{background:#fff;color:var(--ink);text-shadow:none;animation:shake .6s}
@keyframes shake{0%,100%{transform:skewX(-8deg)}25%{transform:skewX(-8deg) translateX(-8px)}75%{transform:skewX(-8deg) translateX(8px)}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:40}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) skewX(-8deg);z-index:60;padding:12px 24px;background:var(--lime);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:19px;box-shadow:6px 6px 0 var(--ink);animation:pop2 .2s}
.toast>span{display:inline-block;transform:skewX(8deg)}
.toast.error{background:var(--bad);color:var(--ink);font-size:16px;padding:10px 16px;max-width:92vw;white-space:normal}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}



/* ===================== LOGIN / DASH / MANAGE ===================== */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:40px 20px;text-align:center;position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;width:60vw;height:60vw;max-width:700px;max-height:700px;border-radius:50%;filter:blur(90px);opacity:.55;z-index:-1}
.hero::before{background:var(--magenta);top:-20%;right:-15%} .hero::after{background:var(--cyan);bottom:-25%;left:-15%}
.hero .logo h1{font-size:clamp(70px,9vw,130px)}
.authbox{width:min(440px,100%);background:#fff;color:var(--ink);padding:26px 28px 28px;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 28px) 100%,0 100%);text-align:right}
.tabs{display:flex;gap:6px;margin-bottom:18px;background:#EEF0FA;padding:5px;border-radius:999px}
.tabs button{flex:1;padding:8px;border-radius:999px;font-family:var(--disp);font-weight:700;font-size:15px;color:#4a4d70}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-family:var(--disp);font-weight:700;font-size:13px;color:#4a4d70}
.field input{width:100%;border:2px solid #D8DBEE;border-radius:10px;padding:11px 14px;font-size:17px;background:#fff;color:var(--ink)}
.field input:focus{border-color:var(--ink);outline:0}
.err{background:#FFE3E8;color:#B3123A;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600;margin-bottom:10px}
.authbox .btn{width:100%;margin-top:6px}
.smallnote{font-size:12px;color:#6a6d8a;margin:10px 0 0;line-height:1.6}
.dashhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.dashhead h2{font-size:32px;font-weight:900}
.dashhead h2 small{display:block;font-family:var(--body);font-weight:500;font-size:14px;color:var(--mist)}
.credits{display:flex;align-items:center;gap:12px;padding:10px 18px;background:#fff;color:var(--ink);transform:skewX(-8deg)}
.credits>*{transform:skewX(8deg)}
.credits b{font-family:var(--disp);font-size:28px;font-weight:900;color:var(--magenta)}
.credits small{display:block;font-size:12px;color:#6a6d8a;font-weight:600}
.dashgrid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
@media (max-width:860px){.dashgrid{grid-template-columns:1fr}}
.card{background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.12);padding:20px 22px}
.card h3{font-size:22px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.games{display:flex;flex-direction:column;gap:10px}
.game{display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(0,0,0,.25);border-right:6px solid var(--ta);flex-wrap:wrap}
.game[data-game-mode="quick"]{background:rgba(34,229,255,.12);border-right-color:var(--cyan)}
.game .t{flex:1;min-width:180px}
.game .t b{font-family:var(--disp);font-size:18px;font-weight:800}
.game .t small{display:block;color:var(--mist);font-size:13px}
.game .st{font-family:var(--disp);font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--lime);color:var(--ink)}
.game .st.done{background:rgba(255,255,255,.2);color:#fff}
.empty{padding:22px;text-align:center;color:var(--mist);font-size:15px;border:2px dashed rgba(255,255,255,.2)}
.stat{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px}
.stat b{font-family:var(--disp);font-size:20px}
.wa{background:#25D366;color:#fff!important;text-decoration:none}
a.btn{text-decoration:none}
.wa:hover{background:#1ebe5b}
.btn>.credit-purchase-content{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.credit-whatsapp-icon{width:1.2em;height:1.2em;flex:none}
#hpWa,#buyBtn,#enterBuyBtn{min-height:44px}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.mgrid{grid-template-columns:1fr}}
.drop{border:2px dashed rgba(255,255,255,.35);padding:22px;text-align:center;cursor:pointer;transition:background .15s;margin-bottom:12px}
.drop:hover,.drop.over{background:rgba(255,255,255,.08);border-color:#fff}
.drop input{display:none}
textarea{width:100%;min-height:130px;background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.2);color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:13px;padding:12px;border-radius:8px;resize:vertical}
.preview{background:rgba(0,0,0,.3);padding:12px 16px;margin:12px 0;font-size:14px}
.preview b{font-family:var(--disp)}
.preview .warn{color:var(--yellow)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:8px 10px;text-align:right;border-bottom:1px solid rgba(255,255,255,.1)}
.tbl th{font-family:var(--disp);font-weight:700;color:var(--mist);font-size:13px}
.tbl td.n{font-family:var(--disp);font-variant-numeric:tabular-nums}
.tbl .del{color:var(--bad);font-weight:700;font-size:13px}
.tblwrap{overflow-x:auto;max-height:420px;overflow-y:auto}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.15);font-weight:700}
.badge.custom{background:var(--lime);color:var(--ink)}
code.k{background:rgba(0,0,0,.35);padding:1px 6px;border-radius:4px;font-size:13px;direction:ltr;display:inline-block}
.helpbox{font-size:14px;color:var(--mist);line-height:1.8}
.helpbox b{color:#fff}
.enterbar{position:absolute;top:14px;left:14px;z-index:2;display:flex;gap:8px}
.turnstrip{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:14px}
.tteam{padding:10px 14px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);font-family:var(--disp);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;gap:10px;transform:skewX(-8deg);position:relative;color:var(--mist)}
.tteam>*{display:inline-block;transform:skewX(8deg)}
.tteam.turn{background:var(--tc);color:#fff;border-color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.35);box-shadow:0 10px 30px color-mix(in srgb,var(--tc) 45%,transparent)}
.tteam .crown{position:absolute;top:-13px;inset-inline-end:-6px;background:var(--yellow);color:var(--ink);font-size:12px;padding:1px 10px;transform:skewX(8deg) rotate(6deg);box-shadow:3px 3px 0 var(--ink)}
.tteam .picked{font-size:13px;font-weight:700;opacity:.9}
.turnstrip .hint{text-align:center;font-size:13px;color:var(--mist);max-width:220px;line-height:1.5}
.tagline.big{font-family:var(--disp);font-weight:700;font-size:22px;color:#fff;line-height:1.5}
.tteam.active{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,226,61,.35)}
.banner.bonus{border-right-color:var(--yellow)} .banner.bonus .mini{color:var(--yellow)}
.tteam.frozen{filter:saturate(.3) brightness(.8)} .tteam.frozen::after{content:"❄️";position:absolute;top:-14px;inset-inline-start:-6px;font-size:22px;transform:skewX(8deg)}
.opt.gone{opacity:.18;pointer-events:none;text-decoration:line-through}
.life .lic{font-size:15px} .life .ltx{font-size:12px}
.flash{text-align:center;color:#fff;animation:pop2 .3s}
.flash .ft{font-family:var(--disp);font-weight:900;font-size:clamp(40px,7vw,84px);color:var(--tc);text-shadow:6px 6px 0 #fff;transform:skewX(-8deg);line-height:1.1}
.flash .fb{font-size:clamp(16px,2.4vw,24px);color:var(--mist);margin-top:14px;max-width:32em}
.celebrate{text-align:center;color:#fff;max-width:760px;animation:pop2 .35s}
.celebrate .cbig{font-size:clamp(60px,12vw,120px);line-height:1;animation:bounce 1s infinite alternate}
.celebrate .ctitle{font-family:var(--disp);font-weight:900;font-size:clamp(26px,4.6vw,56px);line-height:1.25;color:#fff;text-shadow:5px 5px 0 var(--tc);margin:10px 0 6px}
.celebrate.none .ctitle{text-shadow:5px 5px 0 #3A3F7A}
.celebrate .csub{font-size:clamp(14px,2vw,20px);color:var(--yellow);font-weight:700;margin-bottom:8px}
.celebrate .cpts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0 22px}
.celebrate .cp{padding:8px 20px;background:var(--tc);color:#fff;font-family:var(--disp);font-weight:800;font-size:clamp(18px,3vw,30px);transform:skewX(-8deg);text-shadow:0 2px 3px rgba(0,0,0,.35)}
@media (max-height:520px) and (orientation:landscape){.life .ltx{display:none} .life{padding:3px 8px} .life .lic{font-size:16px} .tagline.big{display:block!important;font-size:15px;line-height:1.4} .hero .tagline{display:block!important;font-size:14px;max-width:16em} .enterbar{top:auto;bottom:8px;left:auto;right:8px} .celebrate .cbig{font-size:44px;animation:none} .celebrate .ctitle{font-size:24px;margin:4px 0} .celebrate .cpts{margin:8px 0 10px} .celebrate .cp{font-size:16px;padding:5px 14px} .celebrate .btn.xl{font-size:17px;padding:9px 22px} .flash .ft{font-size:36px}}

@media (max-width:760px){.turnstrip{grid-template-columns:1fr 1fr} .turnstrip .hint{display:none} .tteam{font-size:16px;padding:8px 10px}}
@media (max-height:520px) and (orientation:landscape){.turnstrip{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px} .turnstrip .hint{display:none} .tteam{font-size:15px;padding:7px 8px} .tteam .crown{font-size:11px;top:-10px}}
.fsbtn{position:fixed;bottom:14px;left:14px;z-index:45;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(11,13,42,.85);color:#fff;border:1.5px solid rgba(255,255,255,.45);border-radius:999px;font-family:var(--disp);font-weight:700;font-size:14px;backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.fsbtn .ic{font-size:18px;line-height:1}
.fsbtn:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.fsbtn.on{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
@media (max-height:520px) and (orientation:landscape){.fsbtn{bottom:8px;left:8px;padding:5px 10px;font-size:12px} .fsbtn .ic{font-size:15px}}
@media (max-width:480px){.fsbtn .lbl{display:none} .fsbtn{padding:8px 10px}}



/* ===================== MOBILE ===================== */
html{-webkit-text-size-adjust:100%}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.qbody{display:contents} .qcol{display:contents} .qactions{order:5}
@media (min-height:521px),(orientation:portrait){#q .qbody{display:flex;flex-direction:column} .qcol{display:contents} #q .opts{order:4}}
/* ---- Phones in general (≤ 760px wide) ---- */
@media (max-width:760px){
  .screen{padding:12px 12px 40px}
  .btn{font-size:17px;padding:12px 20px} .btn.xl{font-size:22px;padding:16px 30px} .btn.sm{font-size:15px;padding:9px 14px}
  .arena-head{grid-template-columns:1fr 1fr;gap:6px}
  .arena-head .core{grid-column:1/-1;order:-1;min-width:0;padding:6px 12px;flex-direction:row;justify-content:space-between;gap:10px}
  .core .round{font-size:20px} .core .stage{font-size:13px}
  .side{padding:10px 12px 10px;column-gap:8px;row-gap:6px}
  .side>.av{width:40px;height:40px;font-size:22px} .side .nm{font-size:15px;white-space:normal;line-height:1.15} .side .sc{font-size:34px}
  .side .ctl{flex-direction:row;gap:4px} .side .pm{width:32px;height:30px;font-size:18px}
  .core .steps{margin:0}
  .qcard{padding-top:30px} .qcard .catlbl{font-size:13px;padding:3px 12px}
  .life{font-size:12px;padding:4px 8px} .life .ltx{font-size:11px}
  .stagebadge{font-size:20px;padding:4px 16px} .stagebar{gap:8px;margin:6px 0 10px}
  .hubgrid{grid-template-columns:repeat(2,1fr);gap:8px} .hcat{padding:12px 8px 10px;font-size:17px;gap:4px} .hcat .ic{font-size:30px}
  .turn{font-size:16px;padding:6px 14px}
  .bar h2{font-size:24px} .bar h2 small{font-size:13px}
  .cats{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px} .cat{min-height:96px;font-size:15px;padding:10px 8px} .cat .ic{font-size:28px}
  .picks{grid-template-columns:1fr;gap:6px} .pickrow .slot{min-width:0;font-size:13px}
  .qcard{padding:18px 16px 16px;margin:8px 0 10px} .qcard .qtext{font-size:22px;line-height:1.5} .qcard .catlbl{font-size:12px}
  .opts{gap:8px;grid-template-columns:1fr} .opt{font-size:19px;padding:10px 12px;min-height:56px;gap:10px} .opt .letter{width:34px;height:34px;font-size:16px}
  .buzz{grid-template-columns:1fr 1fr;gap:8px} .buzz .hint{display:none} .buzzer{font-size:18px;padding:12px 10px}
  .ring{width:62px;height:62px} .ring .t{font-size:19px} .ptsbadge{font-size:20px;padding:2px 14px} .qtop{margin-bottom:6px}
  .award{padding:12px 14px} .award h3{font-size:18px} .suggest{font-size:15px;padding:8px 12px} .award .who .btn{min-width:0;font-size:15px;padding:9px 10px} .award .done{font-size:17px}
  .enter{grid-template-columns:1fr} .half{padding:22px 16px} .half input{font-size:26px} .center{padding:24px 10px;gap:14px} .logo h1{font-size:54px}
  .hero{padding:24px 14px;gap:16px} .hero .logo h1{font-size:62px} .authbox{padding:20px}
  .dashhead h2{font-size:24px} .dashgrid,.mgrid{grid-template-columns:1fr}
  .final .fs{min-width:140px;padding:12px 20px} .final .fs .s{font-size:40px}
  .toast{font-size:16px;padding:10px 16px;bottom:14px;max-width:92vw;white-space:normal}
}
/* ---- Phone LANDSCAPE (short screens): everything on one screen ---- */
@media (max-height:520px) and (orientation:landscape){
  .qcol{display:flex;flex-direction:column;gap:6px} .qactions{order:0}
  .screen{padding:8px 10px 14px}
  .arena-head{grid-template-columns:1fr auto 1fr;gap:0;margin-bottom:8px}
  .arena-head .core{grid-column:auto;order:0;flex-direction:column;padding:4px 14px;min-width:150px;gap:2px}
  .core .round{font-size:17px} .core .stage{font-size:11px} .steps button{font-size:11px;padding:1px 6px}
  .side{padding:6px 12px;min-height:0;column-gap:8px;row-gap:4px;grid-template-columns:auto 1fr auto}
  .side.b{grid-template-areas:"ctl meta av" "lives lives lives"}
  .side>.av{width:36px;height:36px;font-size:20px} .side .nm{font-size:15px} .side .sc{font-size:30px}
  .side .ctl{flex-direction:row} .side .pm{width:30px;height:28px;font-size:16px}
  .lives{gap:4px} .life{font-size:11px;padding:2px 7px;border-radius:6px}
  #q .arena-head{margin-bottom:6px} #q .side{padding:4px 10px} #q .side .sc{font-size:26px}
  .qtop{margin-bottom:4px} .ring{width:52px;height:52px} .ring .t{font-size:16px} .ring circle{stroke-width:10} .ptsbadge{font-size:17px;padding:1px 12px} #qRound{display:none} #pauseBtn{font-size:13px;padding:6px 10px}
  .qbody{display:grid;grid-template-columns:1.1fr 1fr;gap:8px;align-items:start}
  .qcard{padding:24px 14px 12px;margin:0 0 6px;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 16px) 100%,0 100%)}
  .qcard .qtext{font-size:clamp(15px,2.6vh,20px);line-height:1.45} .qcard .catlbl{font-size:11px;padding:2px 10px}
  .banners{margin-bottom:4px;gap:4px} .banner{font-size:14px;padding:6px 10px} .banner .mini{font-size:20px}
  .opts{grid-template-columns:1fr;gap:5px;margin:0}
  .opt{font-size:clamp(15px,2.6vh,19px);padding:6px 10px;min-height:44px;gap:8px} .opt .letter{width:30px;height:30px;font-size:14px} .chip{font-size:12px;padding:2px 8px}
  .opt.correct::after{font-size:11px;padding:1px 8px}
  .buzz{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px} .buzz .hint{display:none} .buzzer{font-size:16px;padding:9px 8px;box-shadow:0 5px 0 color-mix(in srgb,var(--tc) 50%,#000)} .buzzer .ord{font-size:12px;top:-10px;padding:1px 8px}
  .qactions{justify-content:center;margin-top:2px} .qactions .btn{font-size:17px;padding:10px 22px}
  .award{margin:0 0 6px;padding:10px 12px;clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px))} .award h3{font-size:16px;margin-bottom:6px} .suggest{font-size:14px;padding:6px 10px;margin-bottom:6px} .suggest small{font-size:11px} .award .who{gap:6px} .award .who .btn{min-width:0;font-size:14px;padding:7px 8px} .award .done{font-size:16px} .award .done .btn{font-size:16px;padding:9px 18px}
  .stagebar{margin:4px 0 8px;gap:8px} .stagebadge{font-size:18px;padding:3px 14px} .track i{height:7px} .iconbtn{width:34px;height:34px;font-size:15px}
  .bar{margin-bottom:6px} .turn{font-size:15px;padding:5px 12px} .pill{font-size:12px;padding:4px 10px}
  .hubgrid{grid-template-columns:repeat(3,1fr);gap:8px} .hcat{padding:10px 6px 8px;font-size:16px;gap:3px;border-width:1.5px} .hcat .ic{font-size:26px} .hcat .left i{width:20px;height:6px}
  .enter{grid-template-columns:1fr minmax(240px,300px) 1fr;min-height:0}
  .half{padding:16px 14px;gap:8px} .half .lbl{font-size:12px} .half input{font-size:22px;padding:4px 10px;border-bottom-width:3px}
  .av{width:36px;height:36px;font-size:20px;border-radius:10px} .sw{width:26px;height:26px} .avatars,.swatches{gap:5px}
  .center{padding:14px 8px;gap:8px} .logo h1{font-size:42px} .logo .vs{font-size:14px;top:-12px;left:-18px} .tagline{display:none} .setup-label{font-size:12px;margin-bottom:-5px}.challengepick{padding:4px}.challengepick button{padding:5px 7px}.challengepick button b{font-size:12px}.challengepick button small{font-size:10px}.timerpick button{padding:6px 12px;font-size:13px} #toDraft{font-size:20px;padding:12px 30px}
  .hero{min-height:0;padding:12px 10px;gap:8px;flex-direction:row;flex-wrap:wrap;justify-content:center} .hero .logo h1{font-size:44px} .hero .tagline{display:none} .authbox{padding:14px 16px;width:min(380px,100%)} .field{margin-bottom:8px} .field input{padding:8px 12px;font-size:15px} .tabs{margin-bottom:10px} .authbox .btn{font-size:16px;padding:10px}
  .cats{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px} .cat{min-height:78px;font-size:14px;padding:8px 6px;gap:4px} .cat .ic{font-size:24px}
  .picks{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px} .pickrow{padding:6px 10px} .pickrow .who{font-size:14px} .pickrow .slot{font-size:12px;padding:3px 8px;min-width:0}
  .bar h2{font-size:20px} .bar h2 small{display:none}
  .dashhead{margin-bottom:10px} .dashhead h2{font-size:22px} .dashgrid{grid-template-columns:1fr 1fr;gap:10px} .card{padding:12px 14px} .card h3{font-size:18px} .stat{padding:5px 0;font-size:14px} .stat b{font-size:17px}
  .endwrap{min-height:0} .endcard{padding:10px} .endcard .crown{font-size:40px} .endcard h1{font-size:30px} .endcard .winner{font-size:30px;padding:6px 24px;margin:6px 0 2px} .endcard p{font-size:15px;margin:4px 0} .final{margin:10px 0 12px;gap:10px} .final .fs{padding:8px 18px;min-width:140px} .final .fs .s{font-size:30px} .final .fs .n{font-size:15px}
  .count .n{font-size:clamp(90px,40vh,200px)} .count .ready{font-size:34px} .stageup .s2{font-size:clamp(60px,30vh,120px)} .stageup .s1{font-size:20px} .stageup .s3{font-size:15px}
  .modal{padding:16px 18px} .modal h3{font-size:20px} .wheelwrap{width:min(200px,36vh)} .wlegend{font-size:12px;gap:3px;margin-bottom:8px} .wresult{font-size:18px;padding:8px} .modal p{margin-bottom:8px;font-size:14px}
}



/* Responsive alignment and device-fit safeguards */
.enter>*{min-width:0}
.center .logo-img{width:min(90%,390px);max-width:100%;height:auto;max-height:42vh;object-fit:contain;flex-shrink:0}
.half.b .lbl,.half.b input{text-align:left}
.half.b .avatars,.half.b .swatches{direction:ltr;justify-content:flex-start}
#q .qbody{display:block}
#q .qcol{display:flex;flex-direction:column;gap:10px}
#q .opts,#q .qactions{order:initial}
@supports (min-height:100dvh){
  .enter,.hero{min-height:100dvh}
}
@media (max-width:980px){
  .half.b .lbl,.half.b input{text-align:right}
  .half.b .avatars,.half.b .swatches{direction:rtl;justify-content:flex-start}
  .center .logo-img{width:min(88vw,390px);max-width:88vw;height:auto;max-height:40vh}
}
@media (max-width:480px){
  .half{padding-inline:14px}
  .center .logo-img{width:min(360px,88vw);max-width:88vw;height:auto;max-height:38vh}
  .timerpick{max-width:100%;flex-wrap:wrap;justify-content:center;border-radius:18px}
  .timerpick button{flex:1 1 auto}
  .qtop{align-items:flex-start}
  .qtop .meta{max-width:58%}
  .timer{margin-inline-start:auto}
}
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .enter{grid-template-columns:minmax(0,1fr) minmax(210px,260px) minmax(0,1fr)}
  .half{padding:10px 9px;gap:6px}
  .center{padding:8px 6px;gap:7px}
  .center .logo-img{width:min(100%,300px);height:auto;max-height:43vh}
  .half input{font-size:19px}
  .avatars,.swatches{gap:4px}
  .av{width:34px;height:34px}
  .sw{width:25px;height:25px}
}



/* ================= HOME / LANDING (added) ================= */
#home[hidden]{display:none!important}
.hp-wrap{--hp-shell:min(1140px,92vw);color:#fff;font-family:inherit}
.hp-shell{width:var(--hp-shell);margin-inline:auto}
.hp-top{position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.11);
  background:rgba(10,8,26,.82);backdrop-filter:blur(16px)}
.hp-top .in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.hp-top img{height:28px;width:auto}
.hp-nav{display:flex;gap:22px;font-size:15px;color:rgba(255,255,255,.62)}
.hp-nav a{cursor:pointer;transition:.15s}.hp-nav a:hover{color:#fff}
@media(max-width:880px){.hp-nav{display:none}}
.hp-arena{position:relative;min-height:88vh;display:grid;grid-template-columns:1fr minmax(320px,46vw) 1fr;overflow:hidden}
.hp-side{position:relative;transition:background 1.4s ease}
.hp-a{background:linear-gradient(165deg,var(--ca,#FF2E88),rgba(10,8,26,.55))}
.hp-b{background:linear-gradient(195deg,var(--cb,#22E5FF),rgba(10,8,26,.55))}
.hp-side::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(118deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px)}
.hp-core{position:relative;z-index:3;background:rgba(8,6,22,.9);margin-inline:-5vw;
  clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;padding:80px 6vw 46px;text-align:center}
.hp-core img{width:min(430px,62vw);animation:hpFloat 6s ease-in-out infinite;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.5))}
@keyframes hpFloat{50%{transform:translateY(-12px)}}
.hp-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hp-hint{font-size:14px;color:rgba(255,255,255,.4);cursor:pointer;animation:hpFloat 3s ease-in-out infinite}
@media(max-width:860px){
  .hp-arena{grid-template-columns:1fr;min-height:0}
  .hp-side{min-height:96px}
  .hp-core{margin:0;clip-path:none;padding:34px 16px}
  .hp-core img{width:min(340px,80vw)}
}
.hp-sec{padding-block:clamp(42px,6vw,72px)}
.hp-head{max-width:44ch;margin:0 auto 34px;text-align:center}
.hp-eyebrow{font-size:12px;letter-spacing:.22em;color:#D9FF3D;display:inline-flex;align-items:center;gap:10px}
.hp-eyebrow::before{content:"";width:26px;height:2px;background:#D9FF3D;opacity:.85}
.hp-head h2{font-size:clamp(26px,4.6vw,44px);margin:12px 0 8px;font-weight:800;line-height:1.3}
.hp-head p{color:rgba(255,255,255,.62);margin:0}
.hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.11);border-radius:18px;overflow:hidden}
@media(max-width:900px){.hp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hp-grid{grid-template-columns:1fr}}
.hp-cell{background:#12102B;padding:28px 22px;transition:.2s}
.hp-cell:hover{background:#181441}
.hp-cell .i{font-size:30px;display:block;margin-bottom:12px}
.hp-cell h3{font-size:19px;margin:0 0 6px}
.hp-cell p{margin:0;color:rgba(255,255,255,.62);font-size:16px;line-height:1.75}
.hp-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.hp-stages{grid-template-columns:1fr}}
.hp-stg{border-radius:22px;padding:30px 24px;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));transition:.25s}
.hp-stg:hover{transform:translateY(-5px);border-color:#D9FF3D}
.hp-stg b{display:block;font-size:clamp(48px,7vw,68px);line-height:1;margin-bottom:12px;
  color:transparent;-webkit-text-stroke:2px #D9FF3D}
.hp-stg.m b{-webkit-text-stroke-color:#FFE23D}
.hp-stg.h b{-webkit-text-stroke:0;color:#FF2E88}
.hp-stg.h{background:linear-gradient(165deg,rgba(255,46,136,.2),rgba(168,37,99,.06));border-color:rgba(255,46,136,.5)}
.hp-stg h3{font-size:22px;margin:0 0 6px}
.hp-stg p{margin:0;color:rgba(255,255,255,.62);font-size:16px}
.hp-note{text-align:center;margin-top:26px;font-size:17px;color:#D9FF3D}
.hp-bar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hp-cnt{font-size:18px;font-weight:700}
.hp-dots{display:inline-flex;gap:5px;margin-inline-start:8px}
.hp-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28)}
.hp-dot.on{background:#D9FF3D;border-color:#D9FF3D;box-shadow:0 0 10px rgba(217,255,61,.6)}
.hp-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.hp-cat{display:flex;align-items:center;gap:10px;text-align:start;background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.11);border-radius:12px;padding:14px;color:#fff;
  font-size:17px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.hp-cat:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.hp-cat .e{font-size:24px;line-height:1}
.category-artwork{display:inline-block;width:1.4em;height:1.4em;max-width:none;object-fit:contain;vertical-align:middle}
.hp-cat .e,.cat .ic,.hcat .ic{flex-shrink:0}
.hp-cat>span:last-child{min-width:0;overflow-wrap:anywhere}
.hp-cat[aria-pressed="true"]{background:rgba(217,255,61,.13);border-color:#D9FF3D;
  transform:translateY(-2px);box-shadow:0 10px 26px -14px #D9FF3D}
.hp-cat[aria-pressed="true"]::after{content:"✓";margin-inline-start:auto;color:#D9FF3D}
.hp-cat.lock{opacity:.3;pointer-events:none}
.hp-cat.hid{display:none}
.hp-more{text-align:center;margin-top:20px}
.hp-aids{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.hp-aids{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.hp-aids{grid-template-columns:1fr}}
.hp-aid{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);border-radius:18px;
  padding:26px 20px;text-align:center;transition:.25s}
.hp-aid:hover{transform:translateY(-5px);border-color:#D9FF3D;background:rgba(255,255,255,.08)}
.hp-aid .e{font-size:38px;display:block;margin-bottom:10px}
.hp-aid h3{font-size:20px;margin:0 0 6px}
.hp-aid p{margin:0;color:rgba(255,255,255,.62);font-size:16px}
.hp-aid.h{border-color:rgba(255,46,136,.55);background:linear-gradient(165deg,rgba(255,46,136,.16),transparent)}
.hp-band{position:relative;overflow:hidden;border-radius:26px;padding:clamp(30px,5vw,50px);text-align:center;
  background:linear-gradient(115deg,rgba(168,37,99,.5),rgba(42,16,70,.6));border:1px solid rgba(255,46,136,.35)}
.hp-band h2{font-size:clamp(24px,3.4vw,34px);margin:0 0 10px}
.hp-band p{color:rgba(255,255,255,.78);max-width:50ch;margin:0 auto 26px}
.hp-vs{position:absolute;top:16px;inset-inline-start:20px;background:#FFE23D;color:#141029;
  font-weight:800;padding:4px 16px;transform:rotate(-8deg);box-shadow:5px 5px 0 rgba(0,0,0,.5);font-size:16px}
#home details{border-bottom:1px solid rgba(255,255,255,.11);padding:18px 0}
#home summary{cursor:pointer;list-style:none;font-weight:700;font-size:18px;display:flex;
  justify-content:space-between;gap:16px;align-items:center}
#home summary::-webkit-details-marker{display:none}
#home summary::after{content:"+";color:#D9FF3D;font-size:24px;transition:.2s}
#home details[open] summary::after{transform:rotate(45deg)}
#home details p{margin:10px 0 0;color:rgba(255,255,255,.62);font-size:16px;line-height:1.8}
.hp-foot{border-top:1px solid rgba(255,255,255,.11);padding-block:24px;color:rgba(255,255,255,.4);font-size:15px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.hp-sticky{position:fixed;inset-inline:0;bottom:0;z-index:70;transform:translateY(130%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);background:rgba(10,8,26,.95);backdrop-filter:blur(16px);
  border-top:1px solid rgba(217,255,61,.32);padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
.hp-sticky.on{transform:none}
.hp-sticky .in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hp-sticky .msg{font-size:16px;color:rgba(255,255,255,.62)}
.hp-sticky .msg b{color:#D9FF3D}
@media(max-width:560px){.hp-sticky .in{justify-content:center;text-align:center}.hp-sticky .btn{width:100%}}
#q .qbody{display:block}
#q .qcol{display:flex;flex-direction:column;gap:10px}
#q .opts{order:initial;margin-bottom:8px}
#q .qactions{order:initial;justify-content:center}



/* Compact content order and viewport-fit pass */
.hp-wrap{display:flex;flex-direction:column}
.hp-top{order:1}.hp-arena{order:2}#hpFeat{order:3}#hpCats{order:4}#hpStages{order:5}#hpAids{order:6}
.hp-wrap>section:not([id]):not(.hp-arena){order:7}#hpFaq{order:8}.hp-foot{order:9}.hp-sticky{order:10}

@media (max-width:760px){
  .hp-top .in{height:50px}.hp-top img{height:22px}.hp-top .btn{font-size:13px;padding:7px 13px}
  .hp-arena{min-height:265px;height:265px;grid-template-columns:18% 64% 18%}
  .hp-side{min-height:0}.hp-core{height:265px;margin:0 -12px;padding:12px 10px 10px;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);gap:7px;justify-content:flex-start}
  .hp-core img{width:min(170px,43vw);margin:0 auto;animation:none}.hp-cta{gap:6px;flex-direction:column;width:min(230px,56vw)}
  .hp-cta .btn.xl{width:100%;font-size:15px;padding:9px 8px}.hp-hint{font-size:10px}
  .hp-sec{padding-block:24px}.hp-head{margin-bottom:15px}.hp-head h2{font-size:24px;margin-top:7px}.hp-eyebrow{font-size:10px}
  #hpStages.hp-sec{padding-block:15px 10px}#hpStages .hp-head{margin-bottom:9px}#hpStages .hp-head h2{font-size:20px;margin-top:4px}
  .hp-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .hp-stg{border-radius:10px;padding:8px 5px;text-align:center}.hp-stg b{font-size:22px;margin-bottom:3px;-webkit-text-stroke-width:1px}
  .hp-stg h3{font-size:12px;margin:0}.hp-stg p{display:none}
  .hp-grid{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:12px}
  .hp-cell{padding:13px 7px;text-align:center;min-width:0}.hp-cell .i{font-size:22px;margin-bottom:5px}.hp-cell h3{font-size:12px;line-height:1.45;margin:0}.hp-cell p{display:none}
  .hp-aids{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .hp-aid{border-radius:12px;padding:12px 5px}.hp-aid .e{font-size:24px;margin-bottom:4px}.hp-aid h3{font-size:11px;line-height:1.45;margin:0}.hp-aid p{display:none}
  .hp-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.hp-cat{font-size:13px;padding:9px 8px}.hp-cat .e{font-size:19px}
  .hp-band{border-radius:16px;padding:22px 14px}.hp-band h2{font-size:24px}.hp-band p{font-size:14px;margin-bottom:14px}.hp-band .hp-cta{width:100%;max-width:none;display:grid;grid-template-columns:1fr 1fr}.hp-band .btn.xl{font-size:15px;padding:11px 7px}
  #hpFaq details{padding:11px 0}#hpFaq summary{font-size:14px}#hpFaq details p{font-size:13px;line-height:1.6;margin-top:6px}#hpFaq details:not(:first-of-type) p{display:none}#hpFaq details:not(:first-of-type)[open] p{display:block}
  .hp-foot{padding-block:16px;font-size:12px}.hp-sticky .msg{display:none}.hp-sticky{padding-block:8px}.hp-sticky .btn{font-size:15px;padding:10px 18px}

  #login .hero{min-height:100dvh;padding:18px 14px;justify-content:center;gap:12px;overflow:hidden}
  #login .hero .logo-img{width:min(230px,62vw);max-height:24dvh;margin-inline:auto;object-fit:contain}
  #login .hero .tagline{display:block;font-size:14px;line-height:1.4;text-align:center}
  #login .authbox{width:min(390px,100%);padding:17px 16px;margin-inline:auto}

  body[data-view="q"]{height:100dvh;overflow:hidden}
  #q{height:100dvh;max-height:100dvh;padding:6px 8px calc(7px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden}
  #q .arena-head{flex:0 0 auto;margin-bottom:4px;gap:4px}
  #q .arena-head .core{padding:3px 8px;margin-bottom:4px}.core .round{font-size:16px}.core .stage{font-size:11px}.steps{display:none}
  #q .side{padding:4px 6px;column-gap:5px;row-gap:2px}.side>.av,#q .side>.av{width:30px;height:30px;font-size:17px;border-radius:8px}.side .nm{font-size:12px}.side .sc,#q .side .sc{font-size:24px}.side .pm{width:25px;height:24px;font-size:14px}.lives{gap:2px}.life{padding:2px 4px}.life .ltx{display:none}
  #q .qtop{flex:0 0 auto;margin:0 0 3px;align-items:center}.qtop .meta{gap:5px}.ptsbadge{font-size:15px;padding:1px 9px}#qRound{font-size:11px;padding:3px 7px}.ring{width:43px;height:43px}.ring .t{font-size:14px}.ring circle{stroke-width:10}#pauseBtn{font-size:11px;padding:5px 7px}
  #q .qbody{display:flex;flex:1;min-height:0;overflow:hidden}#q .qcol{display:flex;flex:1;min-height:0;gap:4px;overflow:hidden}
  #q .banners{flex:0 0 auto;margin:0;gap:3px}.banner{font-size:12px;padding:4px 7px}.banner .mini{font-size:16px}
  #q .qcard{flex:0 1 auto;padding:20px 10px 8px;margin:0;min-height:0}.qcard .qtext{font-size:clamp(14px,3.6vw,19px);line-height:1.4}.qcard .catlbl{font-size:10px;padding:2px 7px}.timeup{font-size:11px;padding:2px 7px;left:10px}
  #q .opts{flex:1 1 auto;min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;margin:0;overflow:hidden}
  #q .opt{min-height:0;height:100%;font-size:clamp(12px,3.2vw,17px);line-height:1.25;padding:5px 6px;gap:5px}.opt .letter{width:25px;height:25px;font-size:12px}.chip{font-size:9px;padding:1px 4px}.opt.correct::after{font-size:9px;padding:1px 4px}
  #q .turnstrip{flex:0 0 auto;margin:0;gap:4px}.tteam{font-size:11px;padding:5px 4px;gap:4px}.tteam .picked{font-size:9px}.tteam .crown{font-size:8px;top:-7px;padding:1px 4px}
  #q .qactions{flex:0 0 auto;margin:0}#q .qactions .btn{font-size:15px;padding:8px 18px}
  #q .award{flex:0 0 auto;margin:0;padding:7px 8px}.award .done{font-size:12px;gap:5px}.award .done .pill{display:none}.award .done .btn{font-size:13px!important;padding:7px 12px!important}
}

@media (max-width:760px) and (max-height:680px){
  #q .side .lives{display:none}#q .qcard .qtext{font-size:13px}#q .opt{font-size:11px}
  #login .hero .logo-img{width:min(180px,48vw);max-height:20dvh}#login .hero .tagline{display:none}
}

@media (max-height:520px) and (orientation:landscape){
  .hp-top .in{height:44px}.hp-top img{height:20px}.hp-top .btn{font-size:12px;padding:6px 12px}.hp-nav{display:none}
  .hp-arena{min-height:205px;height:205px;grid-template-columns:16% 68% 16%}
  .hp-side{min-height:0}.hp-core{height:205px;margin:0 -10px;padding:7px 8px 6px;gap:4px;justify-content:flex-start}
  .hp-core img{width:min(135px,22vw);margin:0 auto;animation:none}.hp-core .hp-cta{width:min(360px,48vw);display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .hp-core .hp-cta .btn.xl{font-size:13px;padding:7px 8px}.hp-hint{font-size:9px}
  .hp-sec{padding-block:14px}.hp-head{margin-bottom:8px}.hp-head h2{font-size:19px;margin-top:4px}.hp-eyebrow{font-size:9px}
  #hpStages.hp-sec{padding-block:10px 7px}#hpStages .hp-head{margin-bottom:6px}#hpStages .hp-head h2{font-size:17px}
  .hp-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.hp-stg{border-radius:10px;padding:7px 5px;text-align:center}.hp-stg b{font-size:21px;margin-bottom:2px;-webkit-text-stroke-width:1px}.hp-stg h3{font-size:11px;margin:0}.hp-stg p{display:none}
  .hp-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.hp-cat{font-size:11px;padding:7px 6px;gap:5px}.hp-cat .e{font-size:16px}.hp-bar{margin-bottom:8px;gap:8px}.hp-more{margin-top:8px}
  .hp-grid{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:10px}.hp-cell{padding:9px 6px;text-align:center}.hp-cell .i{font-size:19px;margin-bottom:3px}.hp-cell h3{font-size:11px;line-height:1.35;margin:0}.hp-cell p{display:none}
  .hp-aids{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.hp-aid{border-radius:10px;padding:9px 5px}.hp-aid .e{font-size:21px;margin-bottom:3px}.hp-aid h3{font-size:11px;line-height:1.35;margin:0}.hp-aid p{display:none}
  .hp-band{padding:16px 14px;border-radius:14px}.hp-band h2{font-size:20px}.hp-band p{font-size:12px;margin-bottom:9px}.hp-band .hp-cta{display:grid;grid-template-columns:1fr 1fr;max-width:520px;margin:auto}.hp-band .btn.xl{font-size:13px;padding:8px}
  #hpFaq details{padding:8px 0}#hpFaq summary{font-size:12px}#hpFaq details p{font-size:11px;line-height:1.5;margin-top:4px}.hp-foot{font-size:10px;padding-block:10px}

  body[data-view="q"]{height:100dvh;max-height:100dvh;overflow:hidden}
  #q{height:100dvh;max-height:100dvh;padding:4px 7px calc(4px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden}
  #q .arena-head{flex:0 0 auto;margin-bottom:3px}#q .side{padding:3px 7px}#q .side .lives{display:none}
  #q .qtop{flex:0 0 auto;margin-bottom:3px}.ring{width:42px;height:42px}.ptsbadge{font-size:14px}#pauseBtn{font-size:11px;padding:4px 7px}
  #q .qbody{display:flex;flex:1;min-height:0;overflow:hidden}
  #login .hero{height:100dvh;min-height:100dvh;padding:6px 12px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:14px;overflow:hidden}
  #login .hero .logo-img{width:min(135px,20vw);max-height:34dvh;object-fit:contain;flex:0 0 auto;margin:0}
  #login .hero .tagline{display:none!important}
  #login .authbox{width:min(470px,68vw);max-height:calc(100dvh - 12px);padding:9px 14px 11px;margin:0;overflow:hidden}
  #login .tabs{margin-bottom:6px}.tabs button{padding:7px 5px;font-size:15px}
  #login .field{gap:2px;margin-bottom:5px}#login .field label{font-size:11px}#login .field input{padding:6px 9px;font-size:14px}
  #login .authbox .btn{margin-top:2px;padding:7px 10px;font-size:14px}#login .smallnote{font-size:9px;line-height:1.25;margin-top:5px}

  #q .qcol{display:flex;flex:1;min-height:0;flex-direction:column;gap:3px;overflow:hidden}
  #q .banners{order:0;flex:0 0 auto;margin:0}
  #q .turnstrip{order:1;flex:0 0 auto;margin:0;gap:4px}.tteam{font-size:10px;padding:3px 5px}.tteam .picked{font-size:8px}.tteam .crown{top:-5px;font-size:7px}
  #q .qcard{order:2;flex:0 0 auto;width:100%;margin:0;padding:16px 9px 6px;min-height:46px;max-height:76px;overflow:hidden}.qcard .qtext{font-size:clamp(11px,2.65vh,15px);line-height:1.3}
  #q .opts{order:3;flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(38px,auto));gap:3px;margin:0;overflow:visible}
  #q .opt{min-height:38px;height:auto;font-size:clamp(10px,2.45vh,14px);line-height:1.15;padding:3px 6px}.opt .letter{width:22px;height:22px;font-size:10px}
  #q .award,#q .qactions{order:4;flex:0 0 auto;margin:0}#q .award{padding:4px 8px}.award .done{font-size:11px}.award .done .pill{display:none}.award .done .btn{font-size:11px!important;padding:5px 10px!important}#q .qactions .btn{font-size:12px;padding:6px 15px}
}

@media (max-width:760px) and (orientation:portrait){
  #q .banners{order:0}#q .turnstrip{order:1}#q .qcard{order:2}#q .opts{order:3}#q .award,#q .qactions{order:4}
  #q .opts{flex:0 0 auto;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(58px,auto));overflow:visible}
  #q .opt{height:auto;min-height:58px;padding:7px 6px}
}

@media (max-width:760px) and (orientation:portrait) and (max-height:680px){
  #q .opts{grid-template-rows:repeat(2,minmax(47px,auto))}#q .opt{min-height:47px;padding:4px 5px}
  #q .qcard{padding-top:16px;max-height:76px}
}

/* Comfortable question spacing: helpers stay visible in both orientations. */
@media (max-width:760px) and (orientation:portrait){
  #q{padding:8px 10px calc(10px + env(safe-area-inset-bottom))}
  #q .arena-head{margin-bottom:8px;gap:7px}
  #q .side{padding:7px 8px;row-gap:5px}#q .side .nm{font-size:15px}#q .side .sc{font-size:27px}
  #q .side .lives{display:flex;gap:4px;flex-wrap:nowrap}#q .life{padding:3px 6px;font-size:12px;min-width:0}#q .life .lic{font-size:16px}
  #q .qtop{margin-bottom:8px}.qtop .meta{gap:8px}.ptsbadge{font-size:17px;padding:3px 11px}
  #q .qcol{gap:8px}
  #q .turnstrip{gap:7px}.tteam{font-size:14px;padding:7px 6px}.tteam .picked{font-size:11px}.tteam .crown{font-size:9px;top:-8px}
  #q .qcard{padding:28px 14px 13px;min-height:92px;max-height:145px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  #q .qcard .qtext{font-size:clamp(16px,4vw,21px);line-height:1.45}#q .qcard .catlbl{font-size:11px;padding:4px 10px}
  #q .opts{grid-template-rows:repeat(2,minmax(70px,auto));gap:7px}#q .opt{min-height:70px;font-size:clamp(14px,3.5vw,18px);line-height:1.3;padding:8px}
}

@media (max-height:520px) and (orientation:landscape){
  #q{padding:6px 10px calc(6px + env(safe-area-inset-bottom))}
  #q .arena-head{margin-bottom:5px;gap:7px}#q .side{padding:5px 9px;row-gap:3px}
  #q .side .nm{font-size:14px}#q .side .sc{font-size:25px}#q .side>.av{width:34px;height:34px;font-size:19px}
  #q .side .lives{display:flex;gap:3px;flex-wrap:nowrap}#q .life{display:inline-flex;padding:2px 4px;min-width:0}#q .life .lic{font-size:15px}#q .life .ltx{display:none}
  #q .qtop{margin-bottom:5px}.ptsbadge{font-size:15px;padding:2px 10px}
  #q .qcol{gap:6px}
  #q .turnstrip{gap:7px}.tteam{font-size:13px;padding:5px 7px}.tteam .picked{font-size:10px}.tteam .crown{font-size:8px;top:-7px}
  #q .qcard{padding:23px 13px 9px;min-height:60px;max-height:94px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  #q .qcard .qtext{font-size:clamp(13px,3.15vh,18px);line-height:1.35}#q .qcard .catlbl{font-size:10px;padding:3px 9px}
  #q .opts{grid-template-rows:repeat(2,minmax(46px,auto));gap:6px}#q .opt{min-height:46px;font-size:clamp(12px,2.9vh,16px);line-height:1.25;padding:6px 8px}.opt .letter{width:25px;height:25px;font-size:12px}
}

.qturnmini{display:inline-flex;align-items:center;justify-content:center;min-width:125px;padding:7px 12px;border:2px solid var(--tc);background:color-mix(in srgb,var(--tc) 18%,var(--ink));font-family:var(--disp);font-weight:800;font-size:15px;white-space:nowrap}
.opt.taken{opacity:.42;cursor:not-allowed}.opt.taken::after{content:'اختارها الفريق';position:absolute;left:7px;bottom:3px;font-size:10px;color:var(--mist2)}
#q .qactions{min-height:48px;display:flex;align-items:center;justify-content:center}

body[data-view="arena"]{height:100dvh;overflow:hidden}#arena{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
#arena .hubgrid{flex:1;min-height:0;overflow:hidden}

@media (max-width:760px){
  #arena{padding:7px 9px calc(8px + env(safe-area-inset-bottom))}#arena .arena-head{margin-bottom:6px}
  #arena .stagebar{margin:3px 0 7px;gap:7px}.stagebadge{font-size:17px;padding:4px 13px}.track{min-width:80px}.topbtns{gap:5px}.iconbtn{width:34px;height:34px;font-size:15px}
  #arena .bar{margin-bottom:7px!important}.turn{font-size:15px;padding:6px 10px}
  #arena .hubgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:7px}
  #arena .hcat{min-height:0;padding:7px 5px;font-size:14px;gap:3px}#arena .hcat .ic{font-size:25px}#arena .hcat .left i{height:5px;width:18px}
  #q .qactions{min-height:44px}#q .qturnmini{min-width:0;padding:5px 8px;font-size:12px}
}

@media (max-height:520px) and (orientation:landscape){
  #arena{padding:5px 9px calc(5px + env(safe-area-inset-bottom))}#arena .arena-head{margin-bottom:4px}
  #arena .stagebar{margin:2px 0 5px}.stagebadge{font-size:15px;padding:3px 11px}.track i{height:6px}.topbtns{gap:4px}.iconbtn{width:30px;height:30px;font-size:13px}
  #arena .bar{margin-bottom:5px!important}.turn{font-size:13px;padding:4px 9px}
  #arena .hubgrid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
  #arena .hcat{padding:5px 4px;font-size:13px;gap:2px}#arena .hcat .ic{font-size:22px}
  #q .timer{gap:6px}#q .qturnmini{font-size:11px;padding:4px 7px}#q .qactions{min-height:34px}#q .qactions .btn{padding:5px 14px}
}

/* Reveal action must remain reachable even on very short landscape screens. */
#revealBtn:not([hidden]){position:fixed;z-index:90;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%) skewX(-8deg);min-width:210px;box-shadow:0 8px 0 rgba(0,0,0,.34),0 16px 34px rgba(0,0,0,.45)}
#revealBtn:not([hidden])>span{transform:skewX(8deg)}

/* Keep the colored challenge highlight attached to the white title. */
.celebrate .ctitle{line-height:1.16;text-shadow:0 1px 0 var(--tc)}
.celebrate.none .ctitle{text-shadow:0 1px 0 #3A3F7A}
@media (max-width:760px){.celebrate .ctitle{line-height:1.17;text-shadow:0 1px 0 var(--tc)}.celebrate.none .ctitle{text-shadow:0 1px 0 #3A3F7A}}

/* Keep fullscreen available without covering answers or next-round actions. */
body[data-view="q"] .fsbtn{position:static;inset:auto;width:36px;height:36px;padding:0;justify-content:center;border-radius:10px;z-index:auto;flex:0 0 36px}
body[data-view="q"] .fsbtn .lbl{display:none}
body[data-view="q"] .fsbtn .ic{font-size:17px}

/* Team setup fits one viewport on laptop, tablet, and mobile landscape. */
@media (orientation:landscape), (min-width:981px){
  body[data-view="enter"]{height:100dvh;overflow:hidden}
  body[data-view="enter"] #enter,body[data-view="enter"] .enter{height:100dvh;min-height:0;max-height:100dvh;overflow:hidden}
}
@media (max-height:720px) and (orientation:landscape){
  #enter .half{padding-block:10px;gap:6px}
  #enter .center{padding-block:8px;gap:6px}
  #enter .center .logo-img{max-height:34vh;width:min(100%,270px)}
  #enter .tagline.big{font-size:13px;line-height:1.25}
  #enter .av{width:34px;height:34px;font-size:20px}
  #enter .sw{width:24px;height:24px}
  #enter #toDraft{padding:9px 24px;font-size:18px}
}

/* V1 judging/actions and lifelines must not be clipped by older viewport fits. */
body[data-view="q"],body[data-view="arena"]{height:auto;max-height:none;overflow-y:auto}
#q,#arena{height:auto;min-height:100dvh;max-height:none;overflow:visible}
#q .qbody,#q .qcol{min-height:auto;overflow:visible}
#q .side .lives{display:flex}
#q .qcard{max-height:none;overflow:visible}
.arena-head>.side,.side .meta{min-width:0}
.side .nm,.tteam{overflow-wrap:anywhere}

/* W1: Dashboard presentation only; shared brand and gameplay styles stay intact. */
#dash{
  --dash-glass:rgba(255,255,255,.12);
  --dash-border:rgba(255,255,255,.35);
  --dash-gap:14px;
}
#dash .dashhead>*,#dash .dashgrid>*,#dash .game>*{min-width:0}
#dash .dashhead h2 small{overflow-wrap:anywhere;line-height:1.5;margin-top:6px}
#dash .dashgrid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
#dash .card h3{flex-wrap:wrap;line-height:1.3}
#dash .games{gap:var(--dash-gap)}
#dash .game{gap:12px;padding:14px 16px}
#dash .game .t{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
#dash .game .t b{line-height:1.5}
#dash .game .t b>span{display:inline-block;white-space:nowrap;font-variant-numeric:tabular-nums}
#dash .game .t small{margin-top:4px;line-height:1.5}
#dash .game .btn[data-open]{
  background:var(--dash-glass);color:#fff;border:2px solid var(--dash-border);
  min-height:44px;white-space:normal;text-align:center;
}
#dash .empty{line-height:1.7;overflow-wrap:anywhere}
#dash .stat{gap:12px}
#dash .stat>span{min-width:0;overflow-wrap:anywhere}
#dash .stat>b{flex-shrink:0}
#dash .btn{max-width:100%;min-height:44px}
#dash .btn:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media (max-width:860px){
  #dash .dashgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  #dash{padding-inline:16px}
  #dash .dashhead>div{width:100%;gap:12px!important}
  #dash .credits{max-width:100%;gap:10px;padding:10px 12px}
  #dash .card{padding:16px 14px}
  #dash .game{padding:12px;gap:10px}
  #dash .game .t{flex-basis:100%}
  #dash .game .btn[data-open]{margin-inline-start:auto}
}

/* W1 accessibility: keep existing Home/Auth content and handlers. */
#home #hpWa2{display:inline-flex;align-items:center;min-height:44px}
#home .hp-foot{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
#login .hero{height:auto;min-height:100dvh;justify-content:safe center}
#login .hero .logo-img,#login .authbox{flex-shrink:0}
#login .tabs button,#login .field input,#login .authbox .btn{min-height:44px}
#login .smallnote{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
#login .err{line-height:1.6;overflow-wrap:anywhere}
#login .field input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
body[data-view="login"] .fsbtn{
  top:calc(12px + env(safe-area-inset-top));bottom:auto;left:auto;
  right:calc(12px + env(safe-area-inset-right));
}
body[data-view="home"] .fsbtn,body[data-view="dash"] .fsbtn{
  top:calc(12px + env(safe-area-inset-top));bottom:auto;
  left:calc(12px + env(safe-area-inset-left));
}
body[data-view="home"] .fsbtn .lbl,body[data-view="dash"] .fsbtn .lbl{display:none}
body[data-view="home"] .fsbtn{z-index:61}
@media (max-width:880px){
  #home .hp-top .in{padding-inline-end:calc(56px + env(safe-area-inset-left))}
  body[data-view="home"] .fsbtn{
    top:calc(3px + env(safe-area-inset-top));
    width:44px!important;height:44px!important;
    min-width:44px!important;min-height:44px!important;
  }
  #home #hpLogin{min-height:44px}
}
@media (min-width:881px) and (max-width:1279px){
  #home .hp-top .in{
    padding-inline-end:calc(56px + env(safe-area-inset-left))
  }
}
@media (max-width:860px){
  #dash{padding-top:64px}
}
@media (min-width:761px) and (min-height:521px){
  #login .hero .logo-img{max-height:30dvh}
}
@media (max-height:520px) and (orientation:landscape){
  #login .hero{height:auto;min-height:100dvh;overflow:hidden;padding-block:12px;align-items:flex-start}
  #login .hero .logo-img{align-self:center}
  #login .authbox{max-height:none;overflow:visible}
}
@media (max-height:680px) and (orientation:portrait){
  #login .hero{justify-content:flex-start}
}

/* W2: Team setup, game setup, and category draft presentation only. */
body[data-view="enter"],body[data-view="draft"]{overflow-x:hidden;overflow-y:auto}
#enter,#draft{min-width:0}
body[data-view="enter"] .fsbtn,body[data-view="draft"] .fsbtn{
  top:calc(12px + env(safe-area-inset-top));bottom:auto;left:calc(12px + env(safe-area-inset-left));
  width:44px;height:44px;padding:0;justify-content:center;
}
body[data-view="enter"] .fsbtn .lbl,body[data-view="draft"] .fsbtn .lbl{display:none}
#enter .enter{
  min-height:100dvh;height:auto;max-height:none;overflow:visible;
  padding-block:env(safe-area-inset-top) env(safe-area-inset-bottom);
}
#enter .enter>*,#enter .half>*,#enter .center>*,#draft>*,#draft .bar>*,#draft .hubfoot>*{min-width:0}
#enter .half{isolation:isolate}
#enter .enterbar{top:calc(12px + env(safe-area-inset-top));bottom:auto;left:68px;right:auto}
#enter .enterbar .btn{min-height:44px}
#enter .normal-user-actions{display:flex;align-items:center;gap:8px}
#enter .normal-user-actions[hidden]{display:none}
#enter .normal-user-actions .btn{white-space:nowrap}
#enter .half input{
  min-height:52px;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  border-radius:8px 8px 0 0;
}
#enter .avatars,#enter .swatches{align-items:center}
#enter .av,#enter .sw{
  flex:0 0 auto;min-width:44px;min-height:44px;
  touch-action:manipulation;
}
#enter .av[aria-checked="true"],#enter .sw[aria-checked="true"]{
  outline:3px solid #fff;outline-offset:2px;
}
#enter .sw:disabled{opacity:.28;filter:saturate(.25)}
#enter .center{min-width:0}
#enter .challengepick,#enter .timerpick{max-width:100%}
#enter .challengepick button,#enter .timerpick button{
  min-height:44px;white-space:normal;touch-action:manipulation;
}
#enter #toDraft{min-height:52px;max-width:100%;white-space:normal}

#draft .bar{align-items:flex-start}
#draft .bar h2,#draft .bar h2 small,#draft .turn,
#draft .pickrow .who,#draft .pickrow .slot,#draft .cat{overflow-wrap:anywhere}
#draft .turn{max-width:100%;white-space:normal;text-align:center}
#draft .pickrow{min-width:0}
#draft .pickrow .who{line-height:1.45}
#draft .pickrow .slot{flex:1 1 105px;min-width:0;line-height:1.4}
#draft .cats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:minmax(max-content,auto)}
#draft .cat{
  min-width:0;min-height:120px;padding:18px 12px 14px;
  line-height:1.45;touch-action:manipulation;
}
#draft .cat>span:not(.ic){max-width:100%}
#draft .cat.taken{border-width:3px}
#draft .cat.taken::after{
  max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#draft .cat:disabled:not(.taken){
  opacity:.48;border-style:dashed;filter:saturate(.35);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 10px,rgba(255,255,255,.025) 10px 20px);
}
#draft .cat:disabled:not(.taken) .badge{
  background:rgba(11,13,42,.88);color:#fff;border:1px solid rgba(255,255,255,.35);
}
#draft .hubfoot{padding-bottom:env(safe-area-inset-bottom)}
#draft .hubfoot .btn{min-height:44px;max-width:100%;white-space:normal}

@media (max-width:980px){
  #enter .enter{grid-template-columns:minmax(0,1fr)}
  #enter .half.a{order:1}
  #enter .half.b{order:2}
  #enter .center{order:3}
  #enter .half{padding:24px 18px;gap:12px}
  #enter .center{padding:28px 16px 44px;gap:14px}
  #enter .center .logo-img{max-height:240px}
  #enter .challengepick,#enter .timerpick{width:min(430px,100%)}
  #enter #toDraft{width:min(360px,100%)}
}

@media (max-width:760px){
  #enter .enterbar{gap:6px}
  #enter .normal-user-actions{gap:6px}
  #enter .normal-user-actions .btn{padding-inline:12px;font-size:14px}
  #draft{padding-top:64px}
  #enter .half{padding:22px 16px;gap:11px}
  #enter .half input{font-size:clamp(22px,7vw,28px)}
  #enter .avatars,#enter .swatches{gap:8px}
  #enter .av{width:46px;height:46px;font-size:25px}
  #enter .sw{width:44px;height:44px}
  #enter .av[aria-checked="true"],#enter .sw[aria-checked="true"]{transform:scale(1.05)}
  #enter .center{padding:24px 14px calc(42px + env(safe-area-inset-bottom))}
  #enter .center .logo-img{width:min(270px,76vw);max-height:190px}
  #enter .tagline.big{display:block;font-size:17px}
  #enter .setup-label{margin-bottom:-8px}
  #enter .challengepick,#enter .timerpick{width:100%}
  #enter .timerpick{border-radius:18px}
  #enter .timerpick button{flex:1 1 88px;padding:9px 10px}

  #draft{padding-inline:12px}
  #draft .bar{align-items:stretch}
  #draft .bar h2{width:100%;line-height:1.25}
  #draft .bar h2 small{margin-top:6px;line-height:1.55}
  #draft .turn{width:100%;justify-content:center;transform:none;border-radius:12px}
  #draft .turn>*{transform:none}
  #draft .picks{grid-template-columns:minmax(0,1fr);gap:8px}
  #draft .pickrow{padding:10px 12px;gap:7px}
  #draft .pickrow .who{flex:1 0 100%;margin:0}
  #draft .cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #draft .cat{min-height:108px;padding:16px 8px 12px;font-size:14px}
  #draft .cat .ic{font-size:30px}
  #draft .hubfoot{align-items:stretch;gap:10px}
  #draft .hubfoot>button{width:100%}
  #draft .hubfoot>div{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px!important}
  #draft .hubfoot .btn{width:100%;padding-inline:10px}
}

@media (max-width:360px){
  #enter .half{padding-inline:14px}
  #enter .avatars,#enter .swatches{gap:6px}
  #draft .hubfoot>div{grid-template-columns:minmax(0,1fr)}
}

@media (max-height:520px) and (orientation:landscape){
  body[data-view="enter"],body[data-view="draft"]{height:auto;max-height:none;overflow-y:auto!important}
  body[data-view="enter"] #enter,body[data-view="enter"] .enter{
    height:auto;min-height:100dvh;max-height:none;overflow:visible;
  }
  #enter .enter{grid-template-columns:minmax(0,1fr) minmax(210px,260px) minmax(0,1fr)}
  #enter .half.a,#enter .half.b,#enter .center{order:initial}
  #enter .half{padding:46px 9px 14px;gap:7px;justify-content:flex-start}
  #enter .half .lbl{font-size:12px}
  #enter .half input{min-height:44px;font-size:18px;padding:5px 8px}
  #enter .avatars,#enter .swatches{gap:5px}
  #enter .av{width:44px;height:44px;font-size:23px}
  #enter .sw{width:44px;height:44px}
  #enter .center{padding:10px 7px 16px;gap:7px;justify-content:flex-start}
  #enter .center .logo-img{width:min(190px,100%);max-height:92px}
  #enter .tagline.big{display:block!important;font-size:12px;line-height:1.25}
  #enter .setup-label{font-size:11px;margin-bottom:-4px}
  #enter .challengepick{padding:4px}
  #enter .challengepick button{min-height:44px;padding:5px}
  #enter .challengepick button b{font-size:11px}
  #enter .challengepick button small{font-size:9px}
  #enter .timerpick{padding:4px;gap:4px}
  #enter .timerpick button{min-height:44px;padding:5px 7px;font-size:11px}
  #enter #toDraft{min-height:48px;padding:9px 18px;font-size:17px}
  #enter .enterbar{top:12px;bottom:auto;left:68px;right:auto}

  #draft .bar{margin-bottom:8px}
  #draft .turn{font-size:14px;min-height:44px}
  #draft .picks{margin-bottom:10px}
  #draft .cat{min-height:88px}
}

/* W2.1: V6 parity; move existing draft actions before the category grid. */
#draft{display:flex;flex-direction:column}
#draft>.bar{order:1}
#draft>.picks{order:2}
#draft>.hubfoot{display:contents}
#draft>.hubfoot>div{
  order:3;width:100%;margin:0 0 18px;
  display:flex!important;align-items:center;justify-content:flex-start;
  gap:10px!important;flex-wrap:wrap!important;
}
#draft>.hubfoot>div>.btn.lime{order:-1}
#draft>.draft-search-empty{order:4}
#draft>.cats{order:5}
#draft .cat:disabled:not(.taken){
  opacity:.3;border-style:solid;filter:none;
  background:rgba(255,255,255,.07);
}
#draft .cat:disabled:not(.taken) .badge{
  background:rgba(255,255,255,.15);color:inherit;border:0;
}
#draft>.hubfoot>button{
  order:6;align-self:flex-start;margin-top:22px;
  margin-bottom:env(safe-area-inset-bottom);
}
body[data-view="draft"] .fsbtn{
  top:auto;bottom:calc(12px + env(safe-area-inset-bottom));
  left:calc(12px + env(safe-area-inset-left));
}

@media (min-width:761px) and (min-height:600px){
  body[data-view="draft"] .fsbtn{width:auto;height:auto;padding:8px 14px}
  body[data-view="draft"] .fsbtn .lbl{display:inline}
}

@media (max-width:760px){
  #draft{padding-top:16px}
  #draft .pickrow .slot{flex:1 1 0;min-width:0;padding-inline:6px;font-size:12px}
  #draft>.hubfoot>div{
    margin-bottom:14px;display:grid!important;
    grid-template-columns:minmax(0,1fr);
  }
  #draft>.hubfoot>div>.btn{width:100%;padding-inline:8px;font-size:13px}
  #draft #draftGo{grid-column:1}
  #draft .draft-utility-actions{grid-column:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%}
  #draft .draft-utility-actions>.btn{width:100%;padding-inline:8px;font-size:13px}
  #draft #draftRandom{grid-column:1}
  #draft #draftSearchToggle{grid-column:2;min-height:44px}
  #draft .draft-search-panel{grid-column:1/-1;width:100%;max-width:none;min-height:46px}
  #draft .draft-search-clear{width:40px;height:40px}
  #draft>.hubfoot>button{align-self:stretch;margin-top:16px}
}

@media (max-height:520px) and (orientation:landscape){
  #draft{padding:7px 10px 14px}
  #draft .bar{
    display:grid;grid-template-columns:minmax(150px,.8fr) minmax(230px,1.2fr);
    align-items:center;gap:8px;margin-bottom:6px;
  }
  #draft .bar h2{width:auto;font-size:20px;line-height:1.15}
  #draft .bar h2 small{display:none}
  #draft .turn{
    width:auto;min-height:44px;padding:6px 10px;border-radius:0;
    font-size:14px;transform:skewX(-8deg);
  }
  #draft .turn>*{transform:skewX(8deg)}
  #draft .picks{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px}
  #draft .pickrow{padding:6px 8px;gap:5px}
  #draft .pickrow .who{flex:1 0 100%;font-size:12px;line-height:1.25}
  #draft .pickrow .slot{flex:1 1 0;min-width:0;padding:3px 4px;font-size:10px;line-height:1.25}
  #draft>.hubfoot>div{margin-bottom:8px;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  #draft>.hubfoot>div>.btn{width:100%;min-height:44px;padding:7px 8px;font-size:12px}
  #draft .cats{grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:6px}
  #draft>.hubfoot>button{margin-top:10px}
}

/* W3: Canonical V6 category board, game shell, and viewport-safe GO overlay. */
body[data-view="arena"]{
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
}
#arena{
  width:100%;
  min-width:0;
  min-height:100dvh;
  height:auto;
  max-height:none;
  overflow:visible;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
#arena .arena-head{
  gap:0;
  margin-bottom:18px;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.28));
}
#arena .arena-head>*{min-width:0}
#arena .side{
  min-width:0;
  border-block:2px solid rgba(255,255,255,.22);
}
#arena .side.a{border-inline-start:2px solid rgba(255,255,255,.22)}
#arena .side.b{border-inline-end:2px solid rgba(255,255,255,.22)}
#arena .side .nm{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.2;
}
#arena .side .sc{font-variant-numeric:tabular-nums}
#arena .core{position:relative;z-index:1}
#arena .core .stage,#arena .core .round{max-width:100%;overflow-wrap:anywhere}
#arena .stagebar{
  display:grid;
  grid-template-columns:auto minmax(110px,1fr) auto;
  align-items:center;
  gap:12px;
  margin:8px 0 16px;
}
#arena .stagebadge{
  max-width:100%;
  line-height:1.25;
  white-space:normal;
  text-align:center;
  box-shadow:0 10px 34px color-mix(in srgb,var(--pc) 42%,transparent),5px 5px 0 rgba(0,0,0,.28);
}
#arena .track{width:100%;min-width:0}
#arena .track i{min-width:4px}
#arena .topbtns{direction:ltr;justify-content:flex-end}
#arena .iconbtn{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-color:rgba(255,255,255,.44);
  background:rgba(11,13,42,.7);
}
#arena .bar{margin-bottom:14px!important}
#arena .turn{
  max-width:100%;
  min-height:44px;
  white-space:normal;
  line-height:1.25;
}
#arena .hubgrid{
  flex:none;
  min-height:0;
  overflow:visible;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:minmax(156px,auto);
  gap:14px;
}
#arena .hcat{
  min-width:0;
  min-height:156px;
  justify-content:center;
  line-height:1.35;
  overflow:hidden;
  overflow-wrap:anywhere;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  border-color:rgba(255,255,255,.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.2);
}
#arena .hcat:not(:disabled){border-bottom-color:var(--pc)}
#arena .hcat:not(:disabled) .ic{filter:drop-shadow(0 7px 14px color-mix(in srgb,var(--pc) 42%,transparent))}
#arena .hcat .left{margin-top:auto;direction:ltr}
#arena .hcat .left i{box-shadow:0 0 12px color-mix(in srgb,var(--pc) 44%,transparent)}
#arena .hcat .left i.off{box-shadow:none}
#arena .hcat:disabled{
  opacity:.5;
  filter:saturate(.28);
  border-style:dashed;
  border-color:rgba(255,255,255,.2);
  background:rgba(7,9,32,.64);
  box-shadow:inset 0 0 30px rgba(0,0,0,.34);
}
#arena .hcat:disabled .left i{background:rgba(255,255,255,.12);box-shadow:none}
body[data-view="arena"] .fsbtn{
  bottom:calc(12px + env(safe-area-inset-bottom));
  left:calc(12px + env(safe-area-inset-left));
  min-width:44px;
  min-height:44px;
}

.overlay{
  overflow:hidden;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
}
.count{max-width:100%;min-width:0}
.count .n.go{
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  font-size:clamp(58px,22.5vw,168px);
  line-height:1;
  color:var(--lime);
  text-shadow:10px 10px 0 var(--magenta);
  transform-origin:center;
}

@media (max-width:820px){
  #arena{padding:10px 10px calc(76px + env(safe-area-inset-bottom))}
  #arena .arena-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin-bottom:10px}
  #arena .arena-head .core{
    grid-column:1/-1;
    order:-1;
    min-width:0;
    margin:0;
    padding:7px 12px;
    flex-direction:row;
    justify-content:space-between;
    gap:10px;
  }
  #arena .side{padding:9px 10px;column-gap:8px;row-gap:5px}
  #arena .side>.av{width:42px;height:42px;font-size:23px;border-radius:12px}
  #arena .side .nm{font-size:clamp(14px,4vw,17px)}
  #arena .side .sc{font-size:clamp(31px,9vw,40px)}
  #arena .stagebar{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 10px;
    margin:7px 0 10px;
  }
  #arena .stagebadge{font-size:clamp(16px,4.8vw,21px);padding:5px 12px}
  #arena .track{grid-column:1/-1;grid-row:2}
  #arena .topbtns{grid-column:2;grid-row:1}
  #arena .bar{margin-bottom:10px!important}
  #arena .turn{width:100%;justify-content:center;font-size:clamp(14px,4.2vw,17px);padding:7px 10px}
  #arena .hubgrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:minmax(132px,auto);
    gap:8px;
  }
  #arena .hcat{min-height:132px;padding:12px 8px 10px;font-size:clamp(14px,4vw,17px);gap:6px}
  #arena .hcat .ic{font-size:30px}
  #arena .hcat .left i{width:22px;height:6px}
}

@media (max-width:340px){
  #arena{padding-inline:7px}
  #arena .arena-head{gap:5px}
  #arena .side{padding-inline:7px}
  #arena .side>.av{width:38px;height:38px;font-size:21px}
  #arena .side .nm{font-size:13px}
  #arena .side .sc{font-size:29px}
  #arena .stagebar{gap:7px}
  #arena .stagebadge{font-size:15px;padding-inline:9px}
  #arena .topbtns{gap:4px}
  #arena .hcat{font-size:14px;padding-inline:6px}
  .count .n.go{font-size:clamp(58px,22.5vw,72px);text-shadow:8px 8px 0 var(--magenta)}
}

@media (max-height:520px) and (orientation:landscape){
  #arena{padding:6px 9px calc(70px + env(safe-area-inset-bottom))}
  #arena .arena-head{
    grid-template-columns:minmax(0,1fr) minmax(145px,auto) minmax(0,1fr);
    gap:0;
    margin-bottom:7px;
  }
  #arena .arena-head .core{
    grid-column:auto;
    order:0;
    margin:0;
    padding:5px 10px;
    flex-direction:column;
    justify-content:center;
  }
  #arena .core .stage{font-size:11px}
  #arena .core .round{font-size:17px}
  #arena .side{padding:6px 9px;column-gap:6px}
  #arena .side>.av{width:36px;height:36px;font-size:20px}
  #arena .side .nm{font-size:13px}
  #arena .side .sc{font-size:28px}
  #arena .stagebar{
    grid-template-columns:auto minmax(70px,1fr) auto;
    gap:8px;
    margin:5px 0 7px;
  }
  #arena .stagebadge{font-size:15px;padding:4px 10px}
  #arena .track{grid-column:2;grid-row:1}
  #arena .topbtns{grid-column:3;grid-row:1;gap:4px}
  #arena .iconbtn{width:44px;height:44px;flex-basis:44px;font-size:16px}
  #arena .bar{margin-bottom:7px!important}
  #arena .turn{min-height:44px;width:auto;font-size:14px;padding:6px 11px}
  #arena .hubgrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:minmax(104px,auto);
    gap:7px;
  }
  #arena .hcat{min-height:104px;padding:8px 6px;font-size:14px;gap:3px}
  #arena .hcat .ic{font-size:25px}
  #arena .hcat .left i{width:20px;height:6px}
  .count .n.go{font-size:clamp(60px,18vh,86px)}
}

/* ===================== V6 PRESENTATION PARITY — PHASE 1 ===================== */
body[data-view="q"]{min-width:0;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
#q{width:100%;min-width:0;min-height:100dvh;height:auto;max-height:none;padding-bottom:calc(74px + env(safe-area-inset-bottom));overflow:visible}
#q>*,#q .v6-question-shell,#q .qbody,#q .qcol,#q .v6-question-main{min-width:0}
#q .arena-head{gap:0;margin-bottom:12px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.3))}
#q .arena-head>*{min-width:0}
#q .side{min-width:0;padding:11px 15px 12px;border-block:2px solid rgba(255,255,255,.24)}
#q .side.a{border-inline-start:2px solid rgba(255,255,255,.24)}
#q .side.b{border-inline-end:2px solid rgba(255,255,255,.24)}
#q .side .nm{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.18}
#q .side .sc{font-variant-numeric:tabular-nums}
#q .side .lives{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;direction:rtl}
#q .life{min-width:0;min-height:44px;justify-content:center;padding:5px 7px;border:2px solid rgba(255,255,255,.74);border-radius:8px;white-space:normal;line-height:1.2;text-align:center}
#q .life .lic{font-size:17px;flex:0 0 auto}
#q .life .ltx{display:inline;font-size:10px;overflow-wrap:anywhere}
#q .life:disabled:not(.used):not(.active){opacity:.46;border-style:dashed;background:rgba(7,9,32,.65);color:var(--mist);box-shadow:none;text-decoration:none}
#q .life.used{opacity:.62;border-color:rgba(255,255,255,.28);background:rgba(7,9,32,.7);color:var(--mist2);box-shadow:none}
#q .life.active{opacity:1;background:var(--yellow);color:var(--ink);border-color:#fff;text-decoration:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 42%,transparent),0 8px 20px rgba(0,0,0,.32);animation:v6LifeEnter .45s ease-out both}
@keyframes v6LifeEnter{from{transform:scale(.84);filter:brightness(1.5)}to{transform:scale(1);filter:none}}

#q .v6-question-shell{display:flex;flex-direction:column;gap:10px}
#q .qtop{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"meta timer controls";align-items:center;gap:12px;margin:0;padding:9px 12px;background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.09),rgba(255,255,255,.045));border-block:1px solid rgba(255,255,255,.16)}
#q .qtop>.meta{grid-area:meta;min-width:0}
#q .qtop>.timer{grid-area:timer;min-width:0}
#q .qtop>.topbtns{grid-area:controls;direction:ltr}
#q .qtop .iconbtn{width:44px;height:44px;flex:0 0 44px}
#q .ptsbadge{line-height:1.25;box-shadow:5px 5px 0 rgba(0,0,0,.3),0 9px 28px color-mix(in srgb,var(--pc) 36%,transparent)}
#q #qRound{white-space:normal;line-height:1.35}
#q .timer{justify-content:center;flex-wrap:wrap}
#q .ring{flex:0 0 auto}
#q .ring.warn .t{color:var(--yellow)}
#q .ring.paused .fg{stroke:var(--cyan);stroke-dasharray:12 10!important;transition:none}
#q .ring.paused .t{color:var(--cyan);animation:none}
#q .ring.paused::after{content:"متوقف";position:absolute;inset-inline-start:50%;bottom:-7px;transform:translateX(50%);padding:1px 6px;border-radius:999px;background:var(--cyan);color:var(--ink);font-family:var(--disp);font-size:9px;font-weight:900;line-height:1.4}
#q #pauseBtn.active{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
#q .qturnmini{min-height:44px;max-width:min(260px,100%);white-space:normal;text-align:center;line-height:1.25;box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 25%,transparent)}

#q .qbody,#q .qcol{display:block;min-height:0;height:auto;max-height:none;overflow:visible}
#q .qcol{display:flex;flex-direction:column;gap:10px}
#q .banners{order:0;margin:0}
#q .turnstrip{order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding-inline:1px}
#q .tteam{min-width:0;min-height:58px;padding:9px 12px;flex-wrap:wrap;line-height:1.25;overflow-wrap:anywhere;opacity:.58;filter:saturate(.48);transition:none;animation:none}
#q .tteam .picked{max-width:100%;white-space:normal;text-align:center}
#q .tteam.active,#q[data-answer-phase="rival"] .tteam.active{opacity:1;filter:none;border-color:#fff;box-shadow:0 0 0 3px var(--yellow),0 12px 34px color-mix(in srgb,var(--tc) 48%,transparent);animation:none}
#q .tteam.picked-state:not(.active){opacity:.74;filter:saturate(.72)}
#q .tteam.frozen .picked{color:#fff;opacity:.9}
#q .turnstrip .hint{display:none}

#q .v6-question-main{order:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:12px;align-items:stretch}
#q .qcard{width:100%;min-width:0;min-height:100%;max-height:none;margin:0;padding:36px 32px 26px;overflow:visible;border-top:5px solid var(--pc,var(--yellow));box-shadow:0 16px 40px rgba(0,0,0,.3),inset 0 -1px 0 rgba(11,13,42,.08)}
#q .qcard .qtext{min-width:0;max-width:100%;font-size:clamp(20px,2.25vw,29px);line-height:1.65;overflow-wrap:anywhere;text-wrap:pretty}
#q .qcard .catlbl{max-width:calc(100% - 28px);white-space:normal;line-height:1.4;overflow-wrap:anywhere}
#q .opts{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:minmax(66px,auto);gap:9px;min-width:0;min-height:0;height:auto;max-height:none;margin:0;overflow:visible}
#q .opt{min-width:0;min-height:66px;height:auto;padding:11px 13px;overflow:visible;overflow-wrap:anywhere;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.055));border-color:rgba(255,255,255,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.18)}
#q .opt .txt{min-width:0;white-space:normal;overflow-wrap:anywhere}
#q .opt .chips{min-width:0;flex-wrap:wrap;justify-content:flex-end}
#q .opt:has(.chip){border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 13%,rgba(255,255,255,.08));box-shadow:0 0 0 3px rgba(255,226,61,.18),0 12px 28px rgba(0,0,0,.24)}
#q .opt.locked:not(.reserved):not(:has(.chip)){opacity:.5;cursor:default;filter:saturate(.55);border-style:dashed}
#q .opts .opt.gone.locked{opacity:.18;pointer-events:none;text-decoration:line-through}
#q .opt.reserved{opacity:.74;cursor:not-allowed;border-color:var(--tc);border-style:dashed;background:color-mix(in srgb,var(--tc) 14%,rgba(255,255,255,.06))}
#q .opt.reserved::after{content:attr(data-owner);position:absolute;inset-inline-end:8px;bottom:4px;padding:1px 7px;background:var(--tc);color:#fff;font-size:10px;font-weight:900;line-height:1.4}
#q .chip{white-space:normal;line-height:1.3;text-align:center}
#q .banner{min-height:44px;line-height:1.45;overflow-wrap:anywhere}
#q .award,#q .qactions{order:3}

body[data-view="q"] .fsbtn{position:fixed;inset-inline-start:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:auto;height:auto;min-width:44px;min-height:44px;margin:0;padding:8px 14px}

.flash{text-align:center;color:#fff;animation:pop2 .3s}
.flash .ft{font-family:var(--disp);font-weight:900;font-size:clamp(40px,7vw,84px);color:var(--tc);text-shadow:6px 6px 0 var(--magenta);transform:skewX(-8deg);line-height:1.1}
.flash .fb{font-size:clamp(16px,2.4vw,24px);color:var(--mist);margin-top:14px;max-width:32em}

.count .ready{display:inline-block;max-width:100%;box-sizing:border-box;padding:.08em .18em .16em;font-family:var(--disp);font-weight:900;font-size:clamp(44px,14vw,128px);line-height:1.05;letter-spacing:.01em;color:var(--cyan);text-shadow:8px 8px 0 var(--magenta),0 18px 36px rgba(255,46,136,.24);transform:translateX(8px) skewX(-6deg);transform-origin:center;white-space:nowrap;animation:none}
.count .n.go{color:var(--lime);text-shadow:8px 8px 0 var(--magenta)}

@media (max-width:820px){
  #q{padding:10px 10px calc(72px + env(safe-area-inset-bottom))}
  #q .arena-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin-bottom:9px}
  #q .arena-head .core{grid-column:1/-1;order:-1;min-width:0;margin:0;padding:6px 10px;flex-direction:row;justify-content:space-between;gap:10px}
  #q .side{padding:8px;column-gap:7px;row-gap:6px}
  #q .side>.av{width:40px;height:40px;font-size:22px}
  #q .side .nm{font-size:15px}
  #q .side .sc{font-size:32px}
  #q .side .lives{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  #q .life{padding:4px 5px}
  #q .life .ltx{font-size:9px}
  #q .qtop{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta controls" "timer timer";gap:8px}
  #q .qtop>.timer{justify-content:space-between;padding:7px 9px;background:rgba(255,255,255,.055);border-block:1px solid rgba(255,255,255,.16)}
  #q .ring{width:68px;height:68px}
  #q .ring .t{font-size:22px}
  #q .qturnmini{flex:1 1 130px;max-width:none}
  #q .turnstrip{gap:8px}
  #q .tteam{font-size:14px;padding:9px 7px}
  #q .tteam .picked{font-size:11px}
  #q .v6-question-main{grid-template-columns:minmax(0,1fr)}
  #q .qcard{min-height:108px;padding:32px 18px 20px}
  #q .qcard .qtext{font-size:clamp(18px,4.9vw,22px);line-height:1.6}
  #q .opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;grid-auto-rows:minmax(64px,auto)}
  #q .opt{min-height:64px;font-size:clamp(15px,4vw,18px);padding:10px;gap:9px}
  #q .opt .letter{width:38px;height:38px;font-size:17px}
  #q .chip{font-size:11px;padding:3px 7px}
}
@media (max-width:520px) and (orientation:portrait){
  #q .opts{grid-template-columns:minmax(0,1fr)}
  #q .qtop>.meta{gap:6px}
  #q .ptsbadge{font-size:18px;padding:4px 11px}
  #q #qRound{font-size:11px;padding:4px 7px}
  #q .qtop .topbtns{gap:4px}
  #q .qtop .iconbtn{width:44px;height:44px}
  #q .qcard{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 18px) 100%,0 100%)}
  #q .opt{align-items:flex-start}
  #q .opt .letter{margin-top:1px}
  .count .ready{font-size:clamp(42px,15vw,58px);text-shadow:6px 6px 0 var(--magenta),0 14px 28px rgba(255,46,136,.24)}
}
@media (max-width:430px) and (orientation:portrait){
  #q .side .lives{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
  #q .life{min-height:36px;padding:2px 3px}
  #q .life .ltx{display:none}
  #q .v6-question-shell{gap:7px}
  #q .qtop{padding:5px 6px;gap:5px}
  #q .qtop>.timer{display:grid;grid-template-columns:auto minmax(74px,1fr) auto;gap:5px;padding:3px 4px}
  #q .ring{width:54px;height:54px}
  #q .ring .t{font-size:18px}
  #q .qturnmini{min-height:38px;font-size:10px;padding:4px 5px}
  #q #pauseBtn{min-height:38px;font-size:9px;padding:4px 5px}
  #q .turnstrip{gap:5px}
  #q .tteam{min-height:48px;font-size:11px;padding:6px 4px}
  #q .tteam .picked{font-size:9px}
}
@media (max-width:360px) and (max-height:680px){
  #q{padding-inline:7px}
  #q .arena-head{gap:5px}
  #q .side{padding-inline:6px}
  #q .side>.av{width:36px;height:36px;font-size:20px}
  #q .side .nm{font-size:13px}
  #q .side .sc{font-size:29px}
  #q .life{min-height:42px;padding-inline:3px}
  #q .life .lic{font-size:15px}
  #q .life .ltx{font-size:8px}
  #q .qtop{gap:6px;padding-inline:7px}
  #q .qtop .iconbtn{width:42px;height:44px;flex-basis:42px}
  #q .ring{width:62px;height:62px}
  #q .qturnmini{font-size:11px;padding-inline:6px}
  #q #pauseBtn{font-size:11px;padding:7px}
  #q .tteam{font-size:12px;padding-inline:5px}
  #q .qcard{padding:29px 14px 17px}
  #q .qcard .qtext{font-size:17px}
  #q .opt{font-size:14px;padding:8px}
}
@media (max-height:520px) and (orientation:landscape){
  #q{padding:6px 9px calc(66px + env(safe-area-inset-bottom))}
  #q .arena-head{grid-template-columns:minmax(0,1fr) minmax(142px,auto) minmax(0,1fr);gap:0;margin-bottom:6px}
  #q .arena-head .core{grid-column:auto;order:0;margin:0;padding:5px 9px;flex-direction:column;justify-content:center}
  #q .core .stage{font-size:10px}
  #q .core .round{font-size:16px}
  #q .side{padding:5px 7px;column-gap:6px;row-gap:4px}
  #q .side>.av{width:32px;height:32px;font-size:18px}
  #q .side .nm{font-size:12px}
  #q .side .sc{font-size:25px}
  #q .side .lives{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
  #q .life{min-height:38px;padding:2px 3px}
  #q .life .lic{font-size:14px}
  #q .life .ltx{display:none}
  #q .v6-question-shell{gap:6px}
  #q .qtop{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"meta timer controls";gap:7px;margin:0;padding:5px 7px}
  #q .qtop>.timer{padding:0;background:none;border:0}
  #q .ring{width:55px;height:55px}
  #q .ring .t{font-size:17px}
  #q .qturnmini{min-height:42px;max-width:145px;font-size:10px;padding:4px 6px}
  #q #pauseBtn{font-size:10px;padding:5px 6px}
  #q .turnstrip{gap:6px}
  #q .tteam{min-height:48px;font-size:11px;padding:6px 4px}
  #q .tteam .picked{font-size:8px}
  #q .qcol{gap:6px}
  #q .v6-question-main{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:7px}
  #q .qcard{min-height:100%;padding:26px 13px 13px}
  #q .qcard .qtext{font-size:clamp(15px,3.15vw,19px);line-height:1.45}
  #q .opts{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(54px,auto);gap:6px}
  #q .opt{min-height:54px;font-size:clamp(13px,2.6vw,16px);line-height:1.3;padding:7px;gap:6px}
  #q .opt .letter{width:32px;height:32px;font-size:14px}
  .count .ready{font-size:clamp(44px,18vh,66px);text-shadow:6px 6px 0 var(--magenta),0 12px 24px rgba(255,46,136,.24)}
}
@media (min-width:821px){
  #q .v6-question-main{min-height:300px}
  #q .qcard{display:flex;align-items:center}
  #q .qcard .qtext{width:100%}
}
@media (prefers-reduced-motion:reduce){
  #q .life.active,#q .tteam,.flash,.count .ready,.count .n.go{animation:none!important;transition:none!important}
}

/* =================== V6 PRESENTATION PARITY — PHASE 1.1 =================== */
/* Keep the Phase 1 presentation treatment while restoring the canonical V6
   question flow: full-width question, followed by a two-by-two option grid. */
body[data-view="q"] #q{
  padding-top:max(6px,env(safe-area-inset-top));
  padding-right:max(8px,env(safe-area-inset-right));
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  padding-left:max(8px,env(safe-area-inset-left));
}
#q .v6-question-main{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}
#q .qcard{
  min-height:0;
  padding:30px 36px 28px;
}
#q .opts{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:none;
  grid-auto-rows:minmax(66px,auto);
  gap:12px;
}

@media (max-width:760px) and (orientation:portrait){
  #q .turnstrip{grid-template-columns:1fr;gap:8px}
  #q .tteam{min-height:52px;padding:9px 12px;font-size:16px}
  #q .tteam .picked{font-size:12px}
  #q .v6-question-main{gap:8px}
  #q .qcard{min-height:92px;padding:18px 16px 16px}
  #q .qcard .qtext{font-size:22px;line-height:1.5}
  #q .opts{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(70px,auto);gap:8px}
  #q .opt{min-height:70px;padding:9px 8px;font-size:clamp(15px,4vw,18px)}
}

@media (max-width:430px) and (orientation:portrait){
  #q .arena-head{gap:6px;margin-bottom:7px}
  #q .arena-head .core{padding:4px 9px;margin-bottom:2px}
  #q .side{padding:5px 7px;column-gap:6px;row-gap:3px}
  #q .side>.av{width:36px;height:36px;font-size:20px}
  #q .side .nm{font-size:14px}
  #q .side .sc{font-size:29px}
  #q .life{min-height:27px;padding:2px 3px}
  #q .life .lic{font-size:14px}
  #q .v6-question-shell{gap:6px}
  #q .qtop{padding:4px 5px;gap:4px}
  #q .qtop>.timer{gap:4px;padding:2px 3px}
  #q .qtop .iconbtn{width:38px;height:38px;flex-basis:38px}
  #q .ring{width:43px;height:43px}
  #q .ring .t{font-size:15px}
  #q .qturnmini{min-height:36px;font-size:10px;padding:3px 5px}
  #q #pauseBtn{min-height:36px;font-size:9px;padding:3px 5px}
  #q .qcol{gap:8px}
  #q .qcard{min-height:92px;padding:18px 15px 15px}
  #q .qcard .qtext{font-size:clamp(18px,5vw,21px);line-height:1.5}
  #q .opts{grid-auto-rows:minmax(70px,auto)}
  #q .opt{min-height:70px;align-items:center}
}

@media (max-width:360px) and (max-height:680px){
  #q .life{min-height:27px}
  #q .qtop .iconbtn{width:36px;height:36px;flex-basis:36px}
  #q .ring{width:43px;height:43px}
  #q .qturnmini{font-size:10px;padding-inline:4px}
  #q #pauseBtn{font-size:9px;padding:4px}
  #q .qcard{padding:18px 14px 14px}
  #q .qcard .qtext{font-size:18px}
  #q .opt{font-size:14px;padding:7px}
}

@media (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #q{
    padding-top:max(4px,env(safe-area-inset-top));
    padding-bottom:max(6px,env(safe-area-inset-bottom));
  }
  #q .arena-head{margin-bottom:5px}
  #q .side{padding:4px 7px;row-gap:3px}
  #q .life{min-height:24px}
  #q .v6-question-shell{gap:5px}
  #q .qtop{grid-template-columns:auto minmax(230px,1fr) auto;padding:4px 6px;gap:6px}
  #q .qtop>.timer{width:min(100%,282px);justify-self:center;flex-wrap:nowrap}
  #q .ring{width:42px;height:42px}
  #q .ring .t{font-size:15px}
  #q .qturnmini{min-height:38px}
  #q .qcol{gap:6px}
  #q .turnstrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #q .tteam{min-height:42px;padding:6px 10px;font-size:14px}
  #q .tteam .picked{font-size:11px}
  #q .v6-question-main{display:flex;flex-direction:column;gap:6px;min-height:0}
  #q .qcard{min-height:60px;padding:23px 13px 9px;display:block}
  #q .qcard .qtext{font-size:clamp(15px,2.6vh,20px);line-height:1.45}
  #q .opts{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(48px,auto);gap:6px}
  #q .opt{min-height:48px;padding:7px 8px;font-size:clamp(13px,2.6vh,16px)}
}

@media (min-width:821px){
  #q .v6-question-main{min-height:0}
  #q .qcard{display:block;min-height:0}
}

/* =============== CRITICAL GAMEPLAY — ONE-VIEWPORT NORMAL FLOW =============== */
/* A hidden Reveal button must not reserve a bottom action row. The authoritative
   state and button visibility are unchanged; this only removes empty layout. */
#q .qactions:not(:has(>button:not([hidden]))){
  display:none;
  min-height:0;
}
#q .side .pm{min-width:36px;min-height:36px}
#q .award .btn{min-height:36px}
#q .qactions .btn{min-height:36px}

/* Short landscape keeps every team, score, judging control, and lifeline visible
   while placing the compact lifeline icons in the same header row. */
@media (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #q{padding-bottom:max(3px,env(safe-area-inset-bottom))}
  #q .side{
    grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"av meta lives ctl";
    align-content:center;
  }
  #q .side.b{
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:"ctl lives meta av";
  }
  #q .side .lives{
    display:grid;
    grid-template-columns:repeat(4,minmax(28px,1fr));
    align-items:center;
    gap:3px;
  }
  #q .life{
    min-width:28px;
    min-height:32px;
    padding:2px 4px;
  }
  #q .side>.av{width:34px;height:34px;font-size:19px}
  #q .qtop{padding-block:0}
  #q .qcol{gap:5px}
}

/* The 320x568 fallback keeps readable question/options while reclaiming the
   largest avoidable block: stack-free, side-by-side team status. */
@media (max-width:359px) and (max-height:600px) and (orientation:portrait){
  #q .turnstrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  #q .tteam{min-height:50px;padding:6px 4px;font-size:11px}
  #q .tteam .picked{font-size:9px}
}

/* ================= FINAL VISUAL POLISH AFTER NO-SCROLL ================= */
/* Keep the fullscreen control inside the spare lower corner on short
   landscape viewports, clear of the last answer row. */
@media (max-height:520px) and (orientation:landscape){
  body[data-view="q"] .fsbtn{
    inset-inline-start:2px;
    bottom:max(2px,env(safe-area-inset-bottom));
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    justify-content:center;
  }
}

/* Enabled manual judging is a distinct action; the shared disabled rule keeps
   the busy state visibly unavailable without changing button semantics. */
#q #judgeBtn:not(:disabled){
  background:var(--cyan);
  color:var(--ink);
  border-color:#fff;
  box-shadow:4px 4px 0 var(--magenta),0 8px 18px rgba(11,13,42,.24);
  text-shadow:none;
}
#q #judgeBtn:disabled{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.28);
  box-shadow:none;
}

/* During the Rival handoff, the reserved answer uses one compact identity
   badge. It participates in the flex row, so long Arabic text cannot sit under
   it or be covered by an absolutely positioned duplicate. */
#q .opt.reserved .chips{display:none}
#q .opt.reserved::after{
  position:static;
  inset:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  max-width:42%;
  padding:3px 8px;
  border-radius:999px;
  font-size:clamp(9px,1.15vw,11px);
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 3px 10px color-mix(in srgb,var(--tc) 32%,transparent);
}

/* Preserve the transition composition while making its explanatory line
   readable over the dark blurred board. */
.flash .fb{
  color:rgba(255,255,255,.94);
  font-weight:700;
  text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 18px rgba(34,229,255,.18);
}

/* ================= V6 EVENT PRESENTATION PARITY ================= */
.answer-lock-summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  padding:7px 14px;
  border:2px solid rgba(255,255,255,.8);
  border-radius:999px;
  background:color-mix(in srgb,var(--tc) 28%,rgba(11,13,42,.9));
  color:#fff;
  font-family:var(--disp);
  font-size:clamp(13px,2vw,18px);
  font-weight:900;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
}
.answer-lock-event .fb{display:flex;flex-direction:column;align-items:center;gap:8px}
.answer-lock-choice{
  display:inline-flex;
  min-width:92px;
  justify-content:center;
  padding:7px 18px;
  background:var(--tc);
  color:#fff;
  border:2px solid #fff;
  font-family:var(--disp);
  font-size:clamp(20px,4vw,34px);
  font-weight:900;
  transform:skewX(-8deg);
  box-shadow:6px 6px 0 var(--magenta);
}
.answer-lock-next{color:var(--mist);font-size:clamp(14px,2.2vw,19px)}
.lifeline-event .ft{max-width:min(92vw,900px)}
.rival-transition-event .ft,.lifeline-fifty .ft{
  color:#80E3FF;
  text-shadow:6px 6px 0 #DF4B87;
}
.lifeline-steal .ft,.lifeline-double .ft{
  color:#DF4B87;
  text-shadow:6px 6px 0 #80E3FF;
}
.lifeline-event .fb{max-width:min(88vw,32em)}
#q .ring.danger{
  filter:drop-shadow(0 0 8px rgba(255,77,109,.9));
  box-shadow:0 0 0 4px rgba(255,77,109,.2),0 0 24px rgba(255,77,109,.58);
}
#q .timeup{
  inset-inline-start:auto;
  inset-inline-end:14px;
  left:auto;
  top:-14px;
  bottom:auto;
  transform:skewX(-8deg);
  max-width:calc(100% - 24px);
  padding:6px 18px;
  border:2px solid #fff;
  font-size:clamp(13px,2.1vw,20px);
  white-space:nowrap;
  box-shadow:6px 6px 0 var(--ink),0 0 26px rgba(255,46,136,.55);
  z-index:2;
}
#q.time-up-active .qcard{
  border-color:var(--magenta);
  box-shadow:0 0 0 4px rgba(255,46,136,.22),0 16px 44px rgba(255,46,136,.28);
}
.endcard .end-state{
  display:flex;
  width:max-content;
  margin:8px auto 0;
  padding:4px 14px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(11,13,42,.72);
  color:var(--lime);
  font-family:var(--disp);
  font-size:14px;
  font-weight:900;
}
.endcard .winner-message{margin:8px 0 0;color:var(--yellow);font-weight:800}

@media (max-height:520px) and (orientation:landscape){
  .answer-lock-summary{margin-top:8px;padding:4px 10px;font-size:12px}
  .flash .fb{margin-top:8px}
  #q .timeup{top:-9px;bottom:auto;padding:2px 10px;font-size:11px}
  .endwrap{min-height:100dvh}
  .endcard{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 10px}
  .endcard .crown{font-size:30px;line-height:.8}
  .endcard h1{margin:2px 0;font-size:25px;line-height:1.05}
  .endcard .winner{margin:3px 0;padding:4px 20px;font-size:26px;line-height:1.1}
  .endcard .end-state{margin:2px auto 0;padding:1px 9px;font-size:10px;line-height:1.25}
  .endcard .winner-message{margin:2px 0 1px;font-size:11px;line-height:1.2}
  .endcard .final{margin:5px 0 7px;gap:8px}
  .endcard .final .fs{min-width:130px;padding:5px 14px}
  .endcard .final .fs .s{font-size:27px}
  .endcard .row{gap:7px}
  .endcard .row .btn{padding:6px 16px;font-size:13px}
}

/* Transient V6 overlays own the viewport while visible. The underlying board
   stays in place and cannot introduce a scrollbar behind the event. */
body:has(#overlay:not([hidden])){height:100dvh;overflow:hidden}

/* =============== LIVE REFERENCE — PROVEN PRESENTATION PARITY =============== */
/* The live Question header uses compact, icon-led lifelines. All controls and
   their runtime bindings stay intact; this only reduces presentation density. */
#q .arena-head{margin-bottom:7px}
#q .side{padding:6px 9px 7px;column-gap:7px;row-gap:4px}
#q .side>.av{width:38px;height:38px;border-radius:10px;font-size:21px}
#q .side .nm{font-size:clamp(13px,1.35vw,18px)}
#q .side .sc{font-size:clamp(27px,3vw,36px)}
#q .side .lives{gap:4px}
#q .life{min-width:30px;min-height:32px;padding:3px 5px;border-width:1.5px}
#q .life .lic{font-size:15px}
#q .life .ltx{display:none}
#q .arena-head .core{min-width:160px;padding:5px 14px}
#q .core .stage{font-size:11px}
#q .core .round{font-size:19px}

/* A selected answer has one compact team identity badge at the card edge. */
#q .opt:has(.chip){
  border:2px solid rgba(255,255,255,.92);
  background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.075));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.22);
}
#q .opt .chips{flex:0 1 36%;max-width:36%;flex-wrap:nowrap}
#q .opt .chip{
  max-width:100%;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  font-size:clamp(9px,1.15vw,11px);
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transform:none;
  animation:none;
  box-shadow:0 3px 10px color-mix(in srgb,var(--tc) 34%,transparent);
}
#q .opt.reserved{border-style:solid}

/* Live Reveal uses two ordinary lower actions: yellow judging and dark next. */
#q .award{
  margin:0 0 8px;
  padding:0;
  background:transparent;
  color:#fff;
  clip-path:none;
  animation:none;
}
#q .award .done{justify-content:center;gap:10px}
#q .award .done>.btn{flex:1 1 190px;max-width:360px}
#q #judgeBtn:not(:disabled){
  background:var(--yellow);
  color:var(--ink);
  border-color:var(--yellow);
  box-shadow:4px 4px 0 var(--magenta),0 8px 18px rgba(11,13,42,.24);
}
#q #nextBtn:not(:disabled){
  background:var(--ink);
  color:#fff;
  border-color:rgba(255,255,255,.7);
  box-shadow:none;
}
#q .manual-judging-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:8px}
#q .manual-judging-actions .manual-judging-label{
  width:100%;
  padding:7px 14px;
  border:2px solid var(--magenta);
  background:rgba(11,13,42,.78);
  color:#fff;
  font-family:var(--disp);
  font-size:clamp(15px,2vw,20px);
  font-weight:900;
  text-align:center;
  box-shadow:4px 4px 0 color-mix(in srgb,var(--magenta) 65%,transparent);
}
#q .manual-judging-actions #nextBtn{width:100%;max-width:none}

/* The live Time Up state retains its ring and replaces the countdown with تم. */
#q .ring.done .fg{stroke:var(--magenta);transition:none}
#q .ring.done .t{font-size:clamp(15px,2vw,20px);color:var(--magenta);animation:none}

@media (max-width:430px) and (orientation:portrait){
  #q .side{padding:4px 6px;column-gap:5px;row-gap:3px}
  #q .side>.av{width:32px;height:32px;font-size:18px}
  #q .side .nm{font-size:12px}
  #q .side .sc{font-size:25px}
  #q .life{min-height:26px;padding:2px 3px}
  #q .life .lic{font-size:13px}
  #q .arena-head .core{padding:4px 9px}
  #q .core .round{font-size:16px}
  #q .opt .chips{flex-basis:33%;max-width:33%}
}

@media (max-height:520px) and (orientation:landscape){
  #q .arena-head{margin-bottom:4px}
  #q .side{padding:3px 6px;row-gap:2px}
  #q .side>.av{width:30px;height:30px;font-size:17px}
  #q .side .sc{font-size:23px}
  #q .life{min-height:28px;padding:1px 3px}
  #q .arena-head .core{min-width:138px;padding:3px 8px}
  #q .core .round{font-size:15px}
  #q .award{margin-bottom:3px}
  #q .award .done{gap:6px}
  #q .award .done>.btn{min-height:34px;padding:6px 14px;font-size:13px}
  #q .manual-judging-actions{gap:5px}
  #q .manual-judging-actions .manual-judging-label{padding:3px 10px;font-size:12px}
}

/* Keep the live manual-judging lower rail inside short landscape without
   changing either action or the score controls above it. */
@media (max-height:520px) and (orientation:landscape){
  #q .manual-judging-actions{gap:2px}
  #q .manual-judging-actions .manual-judging-label{
    padding:1px 8px;
    font-size:10px;
    line-height:1.2;
  }
  #q .manual-judging-actions #nextBtn{
    height:27px;
    min-height:27px;
    padding:2px 12px;
    font-size:12px;
  }
  #q .award:has(.manual-judging-actions){margin-bottom:0}
  body[data-view="end"] #end{padding:0 10px}
  body[data-view="end"] .endwrap{min-height:100dvh}
}

/* On standard desktop heights the celebration content is naturally taller
   than the older end screen. Equal block padding keeps it centered at 768px. */
@media (min-height:521px) and (max-height:800px){
  body[data-view="end"] #end{padding-bottom:22px}
}

/* =============== LIVE SITE — DIRECT PRESENTATION PARITY =============== */
/* These final rules mirror the presentation currently rendered by the LIVE
   demo. They deliberately target layout and appearance only. */
body[data-view="login"],body[data-view="enter"],body[data-view="draft"],body[data-view="arena"],body[data-view="q"],body[data-view="end"]{
  height:100dvh;min-height:0;max-height:100dvh;overflow:hidden!important;
}
body[data-view="login"] #login,body[data-view="enter"] #enter,body[data-view="draft"] #draft,body[data-view="arena"] #arena,body[data-view="q"] #q,body[data-view="end"] #end{
  height:100dvh;min-height:0;max-height:100dvh;overflow:hidden!important;
}

/* Board: restore the LIVE full-height category grid after the local V6 shell. */
#arena{display:flex;flex-direction:column;padding:22px 22px 60px}
#arena .arena-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;margin-bottom:22px;filter:none}
#arena .side{min-width:0;padding:14px 20px 16px;border:0}
#arena .side.a{border:0}
#arena .side.b{border:0}
#arena .side .nm{font-size:22px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#arena .side .sc{font-size:50px}
#arena .side>.av{width:60px;height:60px;font-size:34px;border-radius:16px}
#arena .stagebar{display:flex;align-items:center;gap:14px;margin:8px 0 18px;flex-wrap:wrap}
#arena .stagebadge{font-size:30px;padding:6px 26px;line-height:normal;white-space:nowrap;box-shadow:0 10px 40px color-mix(in srgb,var(--pc) 45%,transparent)}
#arena .track{display:flex;min-width:200px}
#arena .topbtns{direction:rtl;justify-content:initial}
#arena .iconbtn{width:42px;height:42px;flex:0 0 42px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
#arena .bar{margin-bottom:16px!important}
#arena .turn{min-height:0;white-space:nowrap;line-height:normal}
#arena .hubgrid{display:grid;flex:1 1 0;min-height:0;overflow:hidden;grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:auto;align-content:normal;gap:14px}
#arena .hcat{min-width:0;min-height:0;padding:22px 16px 18px;justify-content:flex-start;font-size:22px;line-height:normal;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);box-shadow:none}
#arena .hcat .ic{font-size:44px}
#arena .hcat .left{margin-top:0;direction:rtl}
#arena .hcat .left i{width:26px;height:8px;box-shadow:none}
#arena .hcat:disabled{opacity:.28;filter:none;border-style:solid;background:rgba(255,255,255,.07);box-shadow:none}

/* Question: LIVE keeps fixed chrome while the 2×2 answers consume the
   remaining viewport. */
body[data-view="q"] #q{display:flex;flex-direction:column;width:100%;max-width:none;margin:0;padding:6px 10px max(7px,env(safe-area-inset-bottom));gap:4px}
body[data-view="q"] #q .arena-head,body[data-view="q"] #q .qtop{flex:0 0 auto}
body[data-view="q"] #q .v6-question-shell{display:contents!important}
body[data-view="q"] #q .qbody{display:flex;flex:1 1 auto;min-height:0;overflow:hidden!important}
body[data-view="q"] #q .qcol{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:5px;overflow:hidden!important}
body[data-view="q"] #q .v6-question-main{display:contents}
body[data-view="q"] #q .banners{order:0}
body[data-view="q"] #q .turnstrip{order:1;margin:0;gap:7px}
body[data-view="q"] #q .qcard{order:2;display:block;flex:0 1 auto;min-height:58px;height:auto;margin:0;padding:22px 14px 10px;overflow:visible!important}
body[data-view="q"] #q .qcard .qtext{font-size:clamp(15px,2.4vw,22px);line-height:1.38}
body[data-view="q"] #q .qcard .catlbl{font-size:10px;padding:3px 9px}
body[data-view="q"] #q .opts{order:3;display:grid;flex:1 1 auto;min-height:0;height:auto;margin:0;overflow:visible!important;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:6px}
body[data-view="q"] #q .opt{min-height:0;height:100%;padding:6px 8px;gap:7px;font-size:clamp(12px,1.65vw,17px);line-height:1.22;overflow:visible!important}
body[data-view="q"] #q .opt .letter{width:28px;height:28px;font-size:13px}
body[data-view="q"] #q .tteam{min-height:42px;padding:6px 9px;font-size:14px;gap:6px}
body[data-view="q"] #q .tteam .picked{font-size:10px}
body[data-view="q"] #q .award,body[data-view="q"] #q .qactions{order:4;flex:0 0 auto}
body[data-view="q"] #q .award{margin:0;padding:5px 8px;background:transparent;color:#fff;clip-path:none;animation:none}
body[data-view="q"] #q .qactions{min-height:34px}
body[data-view="q"][data-presentation-state="MANUAL_REVEAL_READY"] #q{padding-bottom:max(8px,env(safe-area-inset-bottom))}

#q .post-reveal-actions,#q .manual-judging-inline{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
#q .post-reveal-actions .btn,#q .manual-judging-inline .btn{flex:0 1 230px!important;min-width:180px!important;padding:9px 18px!important;font-size:16px!important}
#q .manual-judging-indicator{padding:8px 16px;border:2px solid var(--magenta);background:rgba(255,46,136,.13);font-size:14px;font-weight:800}
#q #judgeBtn:not(:disabled){background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:4px 4px 0 var(--magenta),0 8px 18px rgba(11,13,42,.24)}
#q #nextBtn:not(:disabled){background:var(--ink);color:#fff;border-color:rgba(255,255,255,.7);box-shadow:none}

/* LIVE transition typography uses the acting team's color and white offset. */
.rival-transition-event .ft,.lifeline-event .ft{color:var(--tc);text-shadow:6px 6px 0 #fff}
.flash .fb{color:var(--mist);font-weight:400;text-shadow:none}
.celebrate.short-feedback{width:min(720px,92vw);padding:clamp(20px,4vw,42px);pointer-events:none}
.celebrate.short-feedback .cbig{font-size:clamp(48px,10vw,92px)}
.celebrate.short-feedback .ctitle{font-size:clamp(28px,6vw,58px);line-height:1.12;margin:8px 0}
.celebrate.short-feedback .cpts{margin:10px 0 0}
.count .ready{display:block;padding:0;font-family:var(--disp);font-weight:800;font-size:clamp(36px,7vw,72px);line-height:normal;letter-spacing:.04em;color:#fff;text-shadow:none;transform:none;white-space:normal}
.count .n.go{color:var(--yellow);text-shadow:10px 10px 0 var(--cyan);font-size:clamp(80px,16vw,170px)}

body[data-view="end"] #end{display:grid;place-items:center;padding:0 22px 60px}
body[data-view="end"] .endwrap{width:100%;min-height:0;max-height:100%;overflow:hidden}
body[data-view="end"] .endcard{padding:40px 20px}
body[data-view="end"] .end-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:600px){
  body[data-view="end"] .end-actions .btn{width:min(300px,100%)}
}

@media (max-width:480px){
  #q .manual-judging-inline{display:grid;grid-template-columns:1fr;width:100%;gap:7px}
  #q .manual-judging-inline .btn{width:100%;min-width:0!important}
  #q .manual-judging-indicator{width:100%}
}

@media (max-width:760px) and (orientation:portrait){
  body[data-view="q"] #q .post-reveal-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  body[data-view="q"] #q .post-reveal-actions .btn{width:100%;min-width:0!important;padding:10px 8px!important;font-size:15px!important}
}

@media (max-width:760px){
  #arena{padding:7px 9px calc(8px + env(safe-area-inset-bottom))}
  #arena .arena-head{grid-template-columns:1fr 1fr;margin-bottom:6px}
  #arena .arena-head .core{grid-column:1/-1;order:-1;margin-bottom:8px}
  #arena .stagebar{margin:3px 0 7px;gap:7px}
  #arena .stagebadge{font-size:17px;padding:4px 13px}
  #arena .track{min-width:80px}
  #arena .topbtns{gap:5px}
  #arena .iconbtn{width:34px;height:34px;flex-basis:34px;font-size:15px}
  #arena .bar{margin-bottom:7px!important}
  #arena .turn{font-size:15px;padding:6px 10px}
  #arena .hubgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:7px}
  #arena .hcat{min-height:0;padding:7px 5px;font-size:14px;gap:3px}
  #arena .hcat .ic{font-size:25px}
  #arena .hcat .left i{height:5px;width:18px}
}

@media (max-width:600px) and (orientation:portrait){
  body[data-view="q"] #q{padding:5px 7px max(6px,env(safe-area-inset-bottom))}
  body[data-view="q"] #q .arena-head{gap:4px;margin-bottom:4px}
  body[data-view="q"] #q .side{padding:4px 5px;gap:2px 4px}
  body[data-view="q"] #q .side>.av{width:28px;height:28px;font-size:16px}
  body[data-view="q"] #q .side .nm{font-size:11px}
  body[data-view="q"] #q .side .sc{font-size:22px}
  body[data-view="q"] #q .side .lives{gap:2px;flex-wrap:nowrap}
  body[data-view="q"] #q .life{padding:2px 3px;min-width:0;min-height:0}
  body[data-view="q"] #q .life .lic{font-size:13px}
  body[data-view="q"] #q .qtop{gap:4px;padding:0;background:none;border:0}
  body[data-view="q"] #q .timer{gap:4px}
  body[data-view="q"] #q .ring{width:41px;height:41px}
  body[data-view="q"] #q #pauseBtn{font-size:10px;padding:4px 6px}
  body[data-view="q"] #q .qturnmini{font-size:10px;padding:3px 5px}
  body[data-view="q"] #q .qcol{gap:4px}
  body[data-view="q"] #q .qcard{padding:19px 9px 7px;min-height:52px}
  body[data-view="q"] #q .qcard .qtext{font-size:clamp(13px,3.45vw,16px);line-height:1.28}
  body[data-view="q"] #q .opts{gap:4px}
  body[data-view="q"] #q .opt{padding:4px 5px;gap:4px;font-size:clamp(10px,2.85vw,13px);line-height:1.16}
  body[data-view="q"] #q .opt .letter{width:23px;height:23px;font-size:10px}
  body[data-view="q"] #q .turnstrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  body[data-view="q"] #q .tteam{min-height:38px;padding:4px 5px;font-size:11px;gap:4px}
  body[data-view="q"] #q .tteam .picked{font-size:8px}
  body[data-view="q"] #q .tteam .crown{font-size:7px;top:-6px;padding:1px 3px}
}

@media (max-height:820px){
  body[data-view="q"] #q .arena-head{margin-bottom:4px}
  body[data-view="q"] #q .side{padding:5px 10px;row-gap:3px}
  body[data-view="q"] #q .side>.av{width:34px;height:34px;font-size:19px;border-radius:9px}
  body[data-view="q"] #q .side .nm{font-size:14px}
  body[data-view="q"] #q .side .sc{font-size:27px}
  body[data-view="q"] #q .life{padding:2px 5px;font-size:11px;min-height:0}
  body[data-view="q"] #q .life .lic{font-size:14px}
  body[data-view="q"] #q .core{padding:4px 12px;min-width:150px}
  body[data-view="q"] #q .core .stage{font-size:11px}
  body[data-view="q"] #q .core .round{font-size:18px}
  body[data-view="q"] #q .qtop{margin-bottom:2px;padding:0;background:none;border:0}
  body[data-view="q"] #q .ring{width:48px;height:48px}
  body[data-view="q"] #q .ring .t{font-size:15px}
  body[data-view="q"] #q .ptsbadge{font-size:16px;padding:2px 11px}
  body[data-view="q"] #q .pill{font-size:11px;padding:3px 8px}
  body[data-view="q"] #q .qturnmini{font-size:12px;padding:4px 8px;min-width:0}
  body[data-view="q"] #q #pauseBtn{font-size:12px;padding:5px 9px}
  body[data-view="q"] #q .qcol{gap:5px}
  body[data-view="q"] #q .banners{margin:0;gap:3px}
  body[data-view="q"] #q .banner{font-size:13px;padding:5px 9px}
  body[data-view="q"] #q .qcard{padding:22px 14px 10px;min-height:58px}
  body[data-view="q"] #q .qcard .qtext{font-size:clamp(15px,2.4vw,22px);line-height:1.38}
  body[data-view="q"] #q .opts{gap:6px}
  body[data-view="q"] #q .opt{padding:6px 8px;gap:7px;font-size:clamp(12px,1.65vw,17px);line-height:1.22}
  body[data-view="q"] #q .opt .letter{width:28px;height:28px;font-size:13px}
  body[data-view="q"] #q .turnstrip{gap:7px}
  body[data-view="q"] #q .tteam{min-height:42px;padding:6px 9px;font-size:14px;gap:6px}
  body[data-view="q"] #q .tteam .picked{font-size:10px}
  body[data-view="q"] #q .award{padding:5px 8px}
  body[data-view="q"] #q .post-reveal-actions .btn,body[data-view="q"] #q .manual-judging-inline .btn{padding:6px 12px!important;font-size:13px!important}
  body[data-view="q"] #q .manual-judging-indicator{padding:5px 10px;font-size:12px}
  body[data-view="end"] #end{padding:0 22px 60px}
  body[data-view="end"] .endcard{padding:8px 14px}
  body[data-view="end"] .endcard .crown{font-size:42px}
  body[data-view="end"] .endcard h1{font-size:34px}
  body[data-view="end"] .endcard .winner{font-size:32px;padding:6px 24px;margin:5px 0 2px}
  body[data-view="end"] .endcard p{font-size:15px;margin:4px 0}
  body[data-view="end"] .final{margin:9px 0 11px;gap:9px}
  body[data-view="end"] .final .fs{padding:7px 16px;min-width:150px}
  body[data-view="end"] .final .fs .s{font-size:31px}
  body[data-view="end"] .end-actions{gap:8px}
  body[data-view="end"] .end-actions .btn.xl{font-size:16px;padding:9px 20px}
}

@media (max-height:520px) and (orientation:landscape){
  #arena{padding:5px 9px calc(5px + env(safe-area-inset-bottom))}
  #arena .arena-head{grid-template-columns:1fr auto 1fr;margin-bottom:4px}
  #arena .arena-head .core{grid-column:auto;order:0;margin-bottom:0}
  #arena .stagebar{margin:2px 0 5px}
  #arena .stagebadge{font-size:15px;padding:3px 11px}
  #arena .track i{height:6px}
  #arena .topbtns{gap:4px}
  #arena .iconbtn{width:30px;height:30px;flex-basis:30px;font-size:13px}
  #arena .bar{margin-bottom:5px!important}
  #arena .turn{font-size:13px;padding:4px 9px}
  #arena .hubgrid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
  #arena .hcat{padding:5px 4px;font-size:13px;gap:2px}
  #arena .hcat .ic{font-size:22px}
  body[data-view="q"] #q{padding-top:max(3px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom));gap:3px}
  body[data-view="q"] #q .arena-head{margin-bottom:2px}
  body[data-view="q"] #q .side{padding:2px 6px;row-gap:1px}
  body[data-view="q"] #q .side>.av{width:28px;height:28px;font-size:16px}
  body[data-view="q"] #q .side .nm{font-size:11px}
  body[data-view="q"] #q .side .sc{font-size:21px}
  body[data-view="q"] #q .side .lives{display:flex;gap:2px}
  body[data-view="q"] #q .life{padding:1px 3px;line-height:1}
  body[data-view="q"] #q .ring{width:38px;height:38px}
  body[data-view="q"] #q .ring .t{font-size:12px}
  body[data-view="q"] #q .qtop{min-height:38px}
  body[data-view="q"] #q .qcol{gap:3px}
  body[data-view="q"] #q .qcard{padding:11px 8px 4px;min-height:0}
  body[data-view="q"] #q .qcard .qtext{font-size:clamp(10px,2.45vh,12px);line-height:1.18}
  body[data-view="q"] #q .opts{flex:0 0 84px;grid-template-rows:repeat(2,40px);gap:3px}
  body[data-view="q"] #q .opt{min-height:0;height:40px;padding:2px 4px;font-size:clamp(9px,2.05vh,11px);line-height:1.08}
  body[data-view="q"] #q .opt .letter{width:19px;height:19px;font-size:8px}
  body[data-view="q"] #q .turnstrip{gap:4px}
  body[data-view="q"] #q .tteam{min-height:28px;padding:2px 4px;font-size:9px}
  body[data-view="q"] #q .tteam .picked{font-size:7px}
  body[data-view="q"] #q .award{padding:3px 6px}
  body[data-view="q"] #q .post-reveal-actions,body[data-view="q"] #q .manual-judging-inline{gap:5px;flex-wrap:nowrap}
  body[data-view="q"] #q .post-reveal-actions .btn,body[data-view="q"] #q .manual-judging-inline .btn{min-width:0!important;padding:5px 9px!important;font-size:11px!important}
  body[data-view="q"] #q .manual-judging-indicator{padding:4px 7px;font-size:10px}
  .celebrate.short-feedback{padding:14px 22px}
  .celebrate.short-feedback .cbig{font-size:40px}
  .celebrate.short-feedback .ctitle{font-size:25px}
  .celebrate.short-feedback .cp{font-size:15px;padding:5px 13px}
  .count .n{font-size:clamp(90px,40vh,200px)}
  .count .ready{font-size:34px}
}

@media (orientation:landscape){
  body[data-view="q"] #q{padding-inline:max(10px,env(safe-area-inset-left),env(safe-area-inset-right))}
}

/* =============== MANUAL REVIEW CORRECTIONS =============== */
/* The local V6 shell adds controls and wrappers that the reference page does
   not have. Keep those controls, but give them the same compact visual rhythm. */
body[data-view="q"] #q .qtop{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"meta timer controls";
  align-items:center;
  gap:8px;
  padding:0;
  background:none;
  border:0;
}
body[data-view="q"] #q .qtop>.meta{grid-area:meta;min-width:0}
body[data-view="q"] #q .qtop>.timer{
  grid-area:timer;
  width:auto;
  min-width:0;
  padding:0;
  justify-content:center;
  flex-wrap:nowrap;
  background:none;
  border:0;
}
body[data-view="q"] #q .qtop>.question-controls{grid-area:controls;gap:5px;direction:ltr}
body[data-view="q"] #q .qturnmini{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis}

/* Four compact lifelines match the LIVE header and leave the team identity and
   score as the primary information. */
body[data-view="q"] #head2 .side{min-width:0}
body[data-view="q"] #head2 .side .nm{
  min-width:0;
  font-size:clamp(13px,1.25vw,22px);
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body[data-view="q"] #head2 .lives{display:flex;flex-wrap:nowrap;gap:3px;min-width:0}
body[data-view="q"] #head2 .life{flex:1 1 0;min-width:0;padding:2px 4px}
body[data-view="q"] #head2 .life .ltx{display:none}

/* Reserve real space for the raised owner ribbon so its Arabic label never
   gets clipped by the following question card. */
body[data-view="q"] #q .turnstrip{padding:9px 1px 0;overflow:visible}
body[data-view="q"] #q .tteam{min-width:0;flex-wrap:nowrap}
body[data-view="q"] #q .tteam .crown{
  top:-7px;
  min-height:16px;
  padding:2px 7px;
  font-size:9px;
  line-height:1.35;
  white-space:nowrap;
  overflow:visible;
  z-index:3;
}

/* The question board is content-led at every height. Keep the 2x2 silhouette,
   but do not let flex growth turn short answers into empty presentation slabs. */
body[data-view="q"] #q .qcard{
  min-height:0;
  max-height:none;
  padding:22px 20px 12px;
}
body[data-view="q"] #q .qcard .qtext{
  font-size:clamp(20px,1.65vw,26px);
  line-height:1.4;
}
body[data-view="q"] #q .opts{
  flex:0 0 auto;
  min-height:0;
  height:auto;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(86px,auto));
  gap:8px;
}
body[data-view="q"] #q .opt{
  height:auto;
  min-height:86px;
  padding:11px 14px;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.35;
  align-items:center;
}

@media (min-width:900px) and (min-height:760px){
  body[data-view="q"] #q .qcard{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:76px;
  }
}

@media (max-width:760px){
  body[data-view="q"] #q .qcard{padding:22px 12px 10px}
  body[data-view="q"] #q .qcard .qtext{font-size:clamp(16px,4.5vw,20px);line-height:1.4}
  body[data-view="q"] #q .opts{
    flex:0 0 auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(72px,auto));
    gap:6px;
  }
  body[data-view="q"] #q .opt{
    min-height:72px;
    padding:8px 7px;
    font-size:clamp(14px,3.6vw,16px);
    line-height:1.3;
  }
}

/* Reveal hierarchy lives on the cards themselves: green is the answer, red is
   the wrong selection, and all untouched distractors retain the neutral board. */
body[data-view="q"] #q .opt.correct{
  opacity:1;
  color:var(--ink);
  background:linear-gradient(155deg,#59ffad,var(--ok));
  border-color:var(--ok);
  box-shadow:0 0 0 3px rgba(61,255,154,.24),0 12px 28px rgba(0,0,0,.24);
}
body[data-view="q"] #q .opt.correct .letter{background:var(--ink);color:#fff}
body[data-view="q"] #q .opt.correct::after{opacity:.82;box-shadow:none}
body[data-view="q"] #q .opt.wrong.picked{
  opacity:1;
  color:#fff;
  background:linear-gradient(155deg,#ff5f7d,var(--bad));
  border-color:var(--bad);
  box-shadow:0 0 0 3px rgba(255,75,110,.22),0 12px 28px rgba(0,0,0,.24);
}
body[data-view="q"] #q .opt.wrong.picked .letter{background:#fff;color:var(--bad)}
body[data-view="q"] #q .opt.wrong:not(.picked){
  opacity:.68;
  color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
  border-color:rgba(255,255,255,.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.18);
}

/* Desktop question balance: restore readable helper labels and center a
   comfortable, bounded question board in the available vertical space. */
@media (min-width:761px) and (min-height:600px){
  body[data-view="q"] #head2 .side{padding:10px 14px 12px}
  body[data-view="q"] #head2 .lives{gap:5px}
  body[data-view="q"] #head2 .life{
    min-height:44px;
    padding:6px 8px;
    gap:5px;
    border:2px solid rgba(255,255,255,.78);
  }
  body[data-view="q"] #head2 .life .lic{font-size:17px}
  body[data-view="q"] #head2 .life .ltx{
    display:inline;
    min-width:0;
    font-size:10px;
    line-height:1.2;
    white-space:normal;
  }
  body[data-view="q"] #q .qcard{
    flex:0 0 auto;
    min-height:clamp(88px,11dvh,108px);
  }
  body[data-view="q"] #q .opts{
    flex:0 0 auto;
    grid-template-rows:repeat(2,minmax(clamp(104px,13dvh,132px),auto));
  }
  body[data-view="q"] #q .opt{
    min-height:clamp(104px,13dvh,132px);
    padding:13px 16px;
  }
}

/* Desktop category selection owns its scroll region. The existing Back,
   Random, and Start controls stay outside that region with their handlers
   unchanged; LTR row flow places Back visually to the left of Start. */
@media (min-width:761px) and (height > 520px){
  body[data-view="draft"] #draft{
    display:flex;
    flex-direction:column;
    height:100dvh;
    min-height:0;
    overflow:hidden!important;
  }
  #draft>.bar,#draft>.picks,#draft>.hubfoot{flex:0 0 auto}
  #draft>.hubfoot{
    order:3;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    direction:ltr;
    gap:10px;
    margin:0 0 12px;
    padding:9px 0;
    border-block:1px solid rgba(255,255,255,.12);
    background:rgba(11,13,42,.72);
    z-index:2;
  }
  #draft>.hubfoot>button{
    order:1;
    align-self:auto;
    margin:0;
  }
  #draft>.hubfoot>div{
    order:2;
    width:auto;
    margin:0;
    display:flex!important;
    align-items:center;
    gap:10px!important;
    flex-wrap:wrap!important;
    direction:ltr;
  }
  #draft>.hubfoot .btn{direction:rtl}
  #draft>.hubfoot>div>.btn.lime{order:1;min-width:156px}
  #draft>.hubfoot>div>#draftRandom{order:2}
  #draft>.cats{
    order:4;
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    align-content:start;
    padding:4px 4px 18px;
    scrollbar-gutter:stable;
  }
}

/* The responsive setup order is team one, central brand/setup, then team two.
   This also keeps the real logo anchored in the middle instead of at the page
   bottom. */
@media (max-width:980px) and (orientation:portrait){
  body[data-view="enter"] #enter,body[data-view="enter"] #enter .enter{
    height:100dvh;
    min-height:0;
    max-height:100dvh;
    overflow:hidden;
  }
  body[data-view="enter"] #enter .enter{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
  }
  #enter .half.a{order:1}
  #enter .center{order:2;min-height:0;padding:6px 10px;gap:5px;justify-content:center}
  #enter .half.b{order:3}
  #enter .half{min-height:0;padding:7px 14px;gap:3px;justify-content:center}
  #enter .half .lbl{font-size:10px;line-height:1.2}
  #enter .half input{min-height:0;font-size:19px;padding:2px 8px;border-bottom-width:3px}
  #enter .avatars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
  #enter .av{width:min(38px,100%);height:auto;min-width:0;min-height:0;aspect-ratio:1;font-size:clamp(18px,4.8vw,23px);border-radius:9px;justify-self:center}
  #enter .swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
  #enter .sw{width:min(27px,100%);height:auto;min-width:0;min-height:0;aspect-ratio:1;justify-self:center}
  #enter .center .logo-img{display:block;width:min(190px,46vw);height:auto;max-height:10dvh;object-fit:contain;margin:0 auto;opacity:1}
  #enter .tagline.big{display:block!important;font-size:10px;line-height:1.2}
  #enter .setup-label{font-size:10px;margin-bottom:-2px}
  #enter .challengepick{width:min(390px,94vw);padding:3px;border-radius:11px}
  #enter .challengepick button{min-height:0;padding:4px 7px}
  #enter .challengepick button b{font-size:11px}
  #enter .challengepick button small{font-size:9px;margin-top:0}
  #enter .timerpick{padding:3px;gap:3px;flex-wrap:nowrap;border-radius:999px}
  #enter .timerpick button{min-height:0;padding:5px 8px;font-size:11px}
  #enter #toDraft{min-height:0;font-size:16px;padding:8px 22px}
}

/* End screen: center within the safe viewport, allow an internal fallback
   scroll only on exceptionally short screens, and show the winner avatar as a
   separate, unmistakable part of the winner banner. */
body[data-view="end"] #end{
  display:grid;
  place-items:center;
  height:100dvh;
  padding:max(12px,env(safe-area-inset-top)) 18px max(12px,env(safe-area-inset-bottom));
  overflow:hidden!important;
}
body[data-view="end"] .endwrap{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
  overflow:auto;
}
body[data-view="end"] .endcard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(820px,100%);
  max-width:100%;
  min-height:0;
  padding:clamp(10px,2.2dvh,24px) 18px;
  box-sizing:border-box;
}
body[data-view="end"] .endcard .crown{flex:0 0 auto;font-size:clamp(42px,8dvh,76px);line-height:1;margin:0 0 3px}
body[data-view="end"] .endcard h1{font-size:clamp(30px,5.5dvh,58px);line-height:1.1;margin:3px 0}
body[data-view="end"] .endcard .winner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  max-width:100%;
  margin:7px 0 4px;
  padding:7px 24px;
  font-size:clamp(28px,5dvh,52px);
  line-height:1.15;
  animation:none;
}
body[data-view="end"] .endcard .winner-avatar{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  min-width:1.25em;
  font-size:1.14em;
  line-height:1;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));
}
body[data-view="end"] .endcard .winner-name{min-width:0;overflow-wrap:anywhere}
body[data-view="end"] .endcard p{margin:4px 0;font-size:clamp(13px,2dvh,18px)}
body[data-view="end"] .endcard .final{margin:9px 0 12px;gap:10px}
body[data-view="end"] .endcard .final .fs{min-width:150px;padding:7px 17px}
body[data-view="end"] .endcard .final .fs .s{font-size:clamp(29px,4.8dvh,46px)}
body[data-view="end"] .endcard .end-actions{gap:9px;margin:0}

@media (max-height:620px){
  body[data-view="end"] .endcard{padding:6px 12px}
  body[data-view="end"] .endcard .crown{font-size:36px}
  body[data-view="end"] .endcard h1{font-size:27px}
  body[data-view="end"] .endcard .winner{font-size:27px;padding:5px 18px;margin:3px 0}
  body[data-view="end"] .endcard .final{margin:5px 0 7px}
  body[data-view="end"] .endcard .final .fs{padding:5px 13px}
  body[data-view="end"] .endcard .end-actions .btn{padding:6px 14px;font-size:13px}
}

/* Mobile portrait keeps the question attached to the turn presentation and
   lets the answer grid own the remaining stage. */
@media (max-width:760px) and (orientation:portrait){
  body[data-view="q"] #head2 .life{
    min-height:36px;
    padding:4px 5px;
  }
  body[data-view="q"] #head2 .life .lic{font-size:16px}
  body[data-view="q"] #q .qcard{flex:0 0 auto}
  body[data-view="q"] #q .opts{
    flex:1 1 auto;
    min-height:150px;
    grid-template-rows:repeat(2,minmax(70px,1fr));
  }
  body[data-view="q"] .fsbtn{
    top:151px;
    right:123px;
    bottom:auto;
    left:auto;
    width:32px;
    height:32px;
    min-width:32px;
    min-height:32px;
    font-size:13px;
  }
  body[data-view="arena"] .fsbtn{
    top:9px;
    right:auto;
    bottom:auto;
    left:14px;
    width:32px;
    height:32px;
    min-width:32px;
    min-height:32px;
    padding:0;
  }
  body[data-view="arena"] .fsbtn .lbl{display:none}
}

/* ================= ADMIN TABS + MOBILE CREATE ACCESSIBILITY ================= */
#dash .admin-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  max-width:720px;
  margin:0 auto 18px;
  padding:6px;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(11,13,42,.7);
  border-radius:16px;
}
#dash .admin-tabs[hidden]{display:none}
#dash .admin-tabs button{
  min-width:0;
  min-height:46px;
  padding:9px 14px;
  border:0;
  border-radius:11px;
  color:var(--mist);
  background:transparent;
  font-family:var(--disp);
  font-size:17px;
  font-weight:800;
}
#dash .admin-tabs button[aria-selected="true"]{
  color:var(--ink);
  background:var(--yellow);
  box-shadow:0 5px 0 rgba(0,0,0,.28);
}
#dash[data-role="admin"] .dashgrid{grid-template-columns:minmax(0,1fr)}
#dash .category-health{display:grid;gap:9px;margin-top:16px}
#dash .category-health-row{
  display:grid;
  grid-template-columns:minmax(170px,1fr) auto auto minmax(190px,auto) auto;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border:1.5px solid rgba(255,255,255,.16);
  border-right:5px solid var(--health-color,var(--lime));
  background:rgba(0,0,0,.22);
}
#dash .category-health-row[data-health="ready"]{--health-color:var(--lime)}
#dash .category-health-row[data-health="low"]{--health-color:var(--yellow)}
#dash .category-health-row[data-health="critical"]{--health-color:var(--bad)}
#dash .category-health-name{display:flex;align-items:center;gap:9px;min-width:0}
#dash .category-health-name b{overflow-wrap:anywhere}
#dash .category-health-inventory,#dash .category-health-ready{display:grid;gap:3px;text-align:center}
#dash .category-health-inventory span,#dash .category-health-ready>span{color:var(--mist);font-size:11px}
#dash .category-health-inventory b,#dash .category-health-ready b{font-family:var(--disp);font-size:15px}
#dash .category-health-tiers{display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap}
#dash .category-health-tiers span{padding:4px 7px;background:rgba(255,255,255,.08);border-radius:7px;font-size:12px;white-space:nowrap}
#dash .category-health-tiers b{color:var(--yellow)}
#dash .category-health-ready{grid-template-columns:auto auto;align-items:center;text-align:start}
#dash .category-health-ready>span{grid-column:1}
#dash .category-health-ready>b{grid-column:2;text-align:end;white-space:nowrap}
#dash .category-health-ready>strong{grid-column:2;grid-row:2;text-align:end;font-family:var(--disp);font-size:12px}
#dash .category-health-meter{grid-column:1;grid-row:2;width:112px;height:8px;overflow:hidden;border:0;border-radius:999px;background:rgba(255,255,255,.12);appearance:none}
#dash .category-health-meter::-webkit-progress-bar{background:rgba(255,255,255,.12);border-radius:999px}
#dash .category-health-meter::-webkit-progress-value{background:var(--health-color,var(--lime));border-radius:999px}
#dash .category-health-meter::-moz-progress-bar{background:var(--health-color,var(--lime));border-radius:999px}
#dash .category-health-state{
  min-width:76px;
  padding:5px 9px;
  color:var(--ink);
  background:var(--health-color,var(--lime));
  border-radius:999px;
  font-family:var(--disp);
  font-size:12px;
  font-weight:900;
  text-align:center;
}
#dash .category-threshold-note{margin:14px 0 0}

@media (max-width:620px){
  #dash .admin-tabs{width:100%;gap:4px;padding:4px;margin-bottom:12px}
  #dash .admin-tabs button{min-height:44px;padding:8px 5px;font-size:14px}
  #dash .category-health-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:11px 10px}
  #dash .category-health-inventory{grid-column:1;display:flex;align-items:baseline;gap:7px;text-align:start}
  #dash .category-health-tiers{grid-column:1/-1;justify-content:flex-start}
  #dash .category-health-ready{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto}
  #dash .category-health-meter{width:100%}
  #dash .category-health-state{justify-self:end}
}

/* ================= ROLE UX FINAL CLEANUP =================
   The account actions own a real grid row, never a floating layer over a team.
   The existing eight-color palette is always presented as four by two. */
body[data-view="enter"] #enter .enter{
  grid-template-rows:auto minmax(0,1fr);
}
#enter .enterbar{
  position:relative;
  inset:auto;
  grid-column:1 / -1;
  grid-row:1;
  width:100%;
  min-height:64px;
  padding:10px 14px 10px calc(68px + env(safe-area-inset-left));
  align-items:center;
  justify-content:flex-start;
  direction:ltr;
  background:rgba(11,13,42,.92);
  border-bottom:1.5px solid rgba(255,255,255,.2);
  box-sizing:border-box;
  backdrop-filter:blur(8px);
}
#enter .enterbar>.btn,#enter .normal-user-actions .btn{direction:rtl}
#enter .normal-user-actions{direction:rtl;flex-wrap:wrap}
#enter .enter-balance{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:7px 13px;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-family:var(--disp);
  font-size:14px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
#enter .enter-balance b{color:var(--yellow);font-size:19px}
.session-logout{
  flex:0 0 44px;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0!important;
  overflow:hidden;
  border-color:rgba(255,123,160,.42)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,75,110,.12))!important;
  color:#ffd6e2!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px rgba(7,9,32,.18);
}
.session-logout:hover{
  border-color:rgba(255,169,193,.72)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,75,110,.2))!important;
}
.session-logout .logout-icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
}
.session-logout .logout-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#enter .swatches{
  --setup-swatch-size:44px;
  display:grid;
  grid-template-columns:repeat(4,var(--setup-swatch-size));
  grid-template-rows:repeat(2,var(--setup-swatch-size));
  justify-content:center;
  align-self:center;
  width:max-content;
  max-width:100%;
  gap:8px;
  direction:ltr;
}
#enter .sw{
  width:var(--setup-swatch-size);
  min-width:var(--setup-swatch-size);
  height:var(--setup-swatch-size);
  min-height:var(--setup-swatch-size);
  justify-self:center;
}
#dash[data-role="user"] .dashgrid{grid-template-columns:minmax(0,1fr)}

@media (max-width:980px) and (orientation:portrait){
  body[data-view="enter"] #enter .enter{
    grid-template-rows:auto auto auto auto;
  }
  #enter .swatches{--setup-swatch-size:42px}
}

@media (max-width:760px){
  #enter .enterbar{
    min-height:62px;
    padding-block:9px;
  }
  #enter .normal-user-actions{gap:6px;flex-wrap:nowrap}
  #enter .normal-user-actions .btn,#enter .enter-balance{min-height:42px;padding:6px 9px;font-size:12px}
  #enter .enter-balance b{font-size:17px}
  #enter .normal-user-actions .session-logout{padding:0!important;font-size:20px}
}

@media (max-width:760px) and (orientation:portrait){
  #enter .enterbar{flex-wrap:wrap}
  #enter .normal-user-actions{flex:1 1 200px;min-width:0;max-width:100%;flex-wrap:wrap}
  #enter .enter-balance{flex-shrink:0}
}

@media (max-height:520px) and (orientation:landscape){
  #enter .enterbar{
    min-height:54px;
    padding-block:5px;
  }
  #enter .half{padding-top:12px}
  #enter .swatches{
    --setup-swatch-size:36px;
    gap:6px;
    width:max-content;
  }
}

/* Round-2 focused recovery: the legacy short-landscape block above the mobile
   corrections can otherwise collapse all four helpers into a narrow header
   column. Give them one compact full-width row and keep judging identity clear. */
@media (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #head2 .side{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"av meta ctl" "lives lives lives";
    gap:2px 6px;
  }
  body[data-view="q"] #head2 .side.b{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"ctl meta av" "lives lives lives";
  }
  body[data-view="q"] #head2 .lives{
    display:grid;
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
  }
  body[data-view="q"] #head2 .life{width:100%;min-width:0}
  body[data-view="q"] #head2 .life .ltx{display:block!important;font-size:7px}
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .lives{display:none}
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .side{
    grid-template-areas:"av meta ctl";
  }
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .side.b{
    grid-template-areas:"ctl meta av";
  }
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .ctl{
    flex-direction:row;
    gap:3px;
  }
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .pm{
    width:32px;
    min-width:32px;
    height:28px;
    min-height:28px;
    font-size:16px;
  }
}

/* ================= MOBILE UI CORRECTION ROUND 2 =================
   Keep the approved desktop presentation untouched. These rules only harden
   mobile setup/question geometry against reduced visual viewports and make the
   existing gameplay affordances legible without changing their handlers. */
@media (max-width:980px) and (orientation:portrait){
  body[data-view="enter"] #enter{overflow:hidden}
  body[data-view="enter"] #enter .enter{
    height:100%;
    max-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    grid-template-rows:auto auto auto;
    align-content:start;
    scrollbar-gutter:stable;
  }
  #enter .half{
    min-height:max-content;
    justify-content:flex-start;
  }
  #enter .swatches{
    width:min(220px,100%);
    align-self:center;
    grid-template-columns:repeat(4,42px);
    justify-content:center;
    gap:8px;
  }
  #enter .sw{
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
  }
}

/* Auth owns document scrolling so the focused field can stay above a mobile
   software keyboard. The shared form remains unchanged for sign-in/sign-up. */
body[data-view="login"]{
  height:auto;
  min-height:100dvh;
  max-height:none;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-padding-block:24px;
}
body[data-view="login"] #login{
  height:auto;
  min-height:100dvh;
  max-height:none;
  overflow:visible!important;
}
body[data-view="login"] #login .hero{
  height:auto;
  min-height:100dvh;
  overflow-x:clip;
  overflow-y:visible;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
#login .field input{scroll-margin-block:24px}

#login .auth-flow h2{
  margin:0 0 8px;
  font-family:var(--disp);
  font-size:clamp(20px,4vw,26px);
  line-height:1.35;
}
#login .auth-flow .field{gap:8px}
#login .auth-flow .field input:focus-visible{outline-width:2px;outline-offset:0}
#login .auth-link{
  display:block;
  min-height:44px;
  width:100%;
  margin-top:7px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#353970;
  font-family:var(--disp);
  font-size:14px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
#login .auth-link:hover{background:#EEF0FA}
#login .auth-link:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
#login .auth-message{
  margin:10px 0 12px;
  border-radius:10px;
  padding:10px 12px;
  background:#EEF0FA;
  color:#353970;
  font-size:14px;
  font-weight:700;
  line-height:1.6;
  overflow-wrap:anywhere;
}
#login .auth-message[data-state="error"]{background:#FFE8ED;color:#8A1838}
#login .auth-message[data-state="success"]{background:#E7F9EB;color:#185F2A}
#login #authNote.confirmation-success{
  width:100%;
  margin:0 0 14px;
  border:1px solid #B5DEC0;
  padding:12px;
  font-size:clamp(16px,2vw,18px);
  font-weight:800;
  line-height:1.6;
  text-align:center;
}
#login .auth-captcha{
  width:100%;
  min-height:78px;
  margin:8px 0;
  display:flex;
  justify-content:center;
  overflow-x:auto;
  overflow-y:hidden;
}
#login .auth-captcha[hidden]{display:none}
#login .auth-flow[hidden],#login #credentialPanel[hidden],#login #passwordRecoveryFields[hidden]{display:none}
#login .duplicate-email-panel{text-align:center}
#login .duplicate-email-panel .btn{display:block;width:auto;min-width:160px;max-width:100%;margin:16px auto 0}
#login .confirmation-panel .auth-message{padding:18px;text-align:right;font-size:16px;line-height:1.8}
#login .confirmation-panel p{margin:0 0 16px;white-space:pre-line}
#login .confirmation-panel p:last-child{margin-bottom:0}
.zero-credit-panel{width:min(100%,520px);margin:clamp(24px,8vh,80px) auto;padding:clamp(20px,5vw,36px);text-align:center;display:grid;gap:18px}
.zero-credit-panel h2,.zero-credit-panel p{margin:0;line-height:1.6}
.zero-credit-panel h2{font-family:var(--disp);font-size:clamp(24px,5vw,32px)}
.zero-credit-panel .btn{width:100%;min-height:48px}
body[data-view="zeroCredit"]{height:auto;min-height:100dvh;overflow-y:auto!important}
body[data-view="zeroCredit"] #zeroCredit{height:auto;min-height:100dvh;overflow:visible!important}

@media (max-width:760px) and (orientation:portrait),
       (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #q .qbody,
  body[data-view="q"] #q .qcol,
  body[data-view="q"] #q .v6-question-main,
  body[data-view="q"] #q .qcard,
  body[data-view="q"] #q .opts{
    width:100%;
    min-width:0;
    max-width:100%;
    margin-inline:0;
    align-self:stretch;
    box-sizing:border-box;
    transform:none;
  }
  body[data-view="q"] #head2 .life{
    flex-direction:column;
    justify-content:center;
    gap:0;
    border:1px solid rgba(255,255,255,.82);
  }
  body[data-view="q"] #head2 .life:disabled:not(.used){opacity:.92}
  body[data-view="q"] #head2 .life .ltx{
    display:block;
    width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    line-height:1.05;
  }
}

@media (max-width:760px) and (orientation:portrait){
  body[data-view="q"] #head2 .lives{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px;
  }
  body[data-view="q"] #head2 .life{
    width:100%;
    min-height:37px;
    height:37px;
    padding:2px 3px;
  }
  body[data-view="q"] #head2 .life .lic{font-size:14px;line-height:1}
  body[data-view="q"] #head2 .life .ltx{font-size:7.5px}

  /* Score adjustment is the only extra control needed in manual judging.
     Lifelines are unavailable in this state, so remove their disabled row and
     give the team identity a full, dedicated line beside its avatar. */
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .lives{display:none}
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .side{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"av meta" "ctl ctl";
    gap:3px 6px;
    padding:5px 7px;
  }
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .side.b{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"meta av" "ctl ctl";
  }
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .ctl{
    width:100%;
    flex-direction:row;
    justify-content:center;
    gap:5px;
  }
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .pm{
    width:min(48px,44%);
    height:28px;
    font-size:17px;
  }
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #head2 .nm{
    font-size:14px;
    overflow:visible;
    text-overflow:clip;
  }
}

@media (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #head2 .life .ltx{display:block;font-size:7px}
}

/* ================= UNIFIED CROSS-DEVICE GAME PRESENTATION =================
   These component identities are shared by desktop, tablet and mobile. Media
   queries below may resize or wrap them, but do not redefine their design. */
body[data-view="arena"],body[data-view="q"]{--game-frame-inline:clamp(9px,1.5vw,22px)}
body[data-view="arena"] #arena,
body[data-view="q"] #q{
  width:100%;
  max-width:none;
  margin:0;
  padding-inline:var(--game-frame-inline)!important;
}

/* The Question control cluster exposes fullscreen only. The existing recovery,
   winner and dashboard actions remain in the DOM with their handlers intact,
   and are hidden only while the Question view is active. */
body[data-view="q"] #q .question-controls>#qResumeBtn,
body[data-view="q"] #q .question-controls>#qWinnerBtn,
body[data-view="q"] #q .question-controls>#qHomeBtn{display:none!important}

/* One actual fullscreen component: #fsBtn.fsbtn. Position may respond to the
   current screen, while its background, border, radius and icon stay fixed. */
body .fsbtn,
body[data-view="q"] #q .question-controls>.fsbtn{
  display:grid!important;
  place-items:center;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  box-sizing:border-box;
  border:1.5px solid rgba(255,255,255,.45);
  border-radius:999px;
  background:rgba(11,13,42,.85);
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
body[data-view="q"] #q .question-controls>.fsbtn{
  position:static!important;
  inset:auto!important;
  margin:0!important;
}
body .fsbtn:hover,
body .fsbtn.on,
body[data-view="q"] #q .question-controls>.fsbtn:hover,
body[data-view="q"] #q .question-controls>.fsbtn.on{
  background:rgba(11,13,42,.85);
  color:var(--yellow);
  border-color:var(--yellow);
}
body .fsbtn .ic,
body[data-view="q"] #q .question-controls>.fsbtn .ic{
  display:block;
  width:18px;
  height:18px;
  font-size:0!important;
  background:
    linear-gradient(currentColor,currentColor) left top/7px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left top/2px 7px no-repeat,
    linear-gradient(currentColor,currentColor) right top/7px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right top/2px 7px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/7px 2px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/2px 7px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/7px 2px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/2px 7px no-repeat;
}
body .fsbtn .lbl,
body[data-view="q"] #q .question-controls>.fsbtn .lbl{display:none!important}

/* Points dominate one compact meta badge; category is always its secondary
   label and never a question-card overlay or a full-width strip. */
body[data-view="q"] #q .qtop>.meta{
  grid-area:meta;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  justify-self:start;
  width:auto;
  max-width:min(46vw,430px);
  min-width:0;
  min-height:34px;
  gap:0;
  padding:4px 12px;
  background:var(--pc);
  color:var(--ink);
  transform:skewX(-8deg);
  box-shadow:4px 4px 0 rgba(0,0,0,.3),0 8px 22px color-mix(in srgb,var(--pc) 32%,transparent);
  overflow:hidden;
  direction:rtl;
}
body[data-view="q"] #q #qCat{
  position:static;
  display:block;
  min-width:0;
  max-width:min(28vw,280px);
  margin:0 9px 0 0;
  padding:0 9px 0 0;
  background:transparent;
  color:var(--ink);
  border:0;
  border-inline-start:1px solid color-mix(in srgb,var(--ink) 38%,transparent);
  font-family:var(--disp);
  font-size:12px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transform:skewX(8deg);
  direction:rtl;
}
body[data-view="q"] #q #qCat:has(.category-artwork){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
body[data-view="q"] #q #qPts{
  display:inline-flex;
  align-items:center;
  min-height:0;
  padding:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  transform:none;
  font-size:18px;
  line-height:1.1;
  white-space:nowrap;
  direction:rtl;
}
body[data-view="q"] #q #qRound{display:none}

/* Question composition keeps one structural hierarchy at every size. */
body[data-view="q"] #q .v6-question-main{
  order:2;
  display:flex!important;
  flex:1 1 auto;
  min-height:0;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  padding:0;
}

@media (max-width:760px) and (orientation:portrait),
       (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #q .qtop>.meta{max-width:100%;min-height:32px;padding:3px 11px}
  body[data-view="q"] #q #qCat{max-width:min(46vw,260px);font-size:11px}
  body[data-view="q"] #q #qPts{font-size:17px}
  body[data-view="q"] #q .question-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-width:44px;
  }
  body .fsbtn,
  body[data-view="q"] #q .question-controls>.fsbtn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
}

@media (max-width:760px) and (orientation:portrait){
  body[data-view="q"] #q .qtop{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"meta controls" "timer timer";
    align-items:center;
    gap:4px 6px;
  }
  body[data-view="q"] #q .qtop>.timer{
    width:100%;
    justify-content:space-between;
  }
  body[data-view="q"] #head2{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
  }
  body[data-view="q"] #head2 .core{
    grid-column:1/-1;
    order:-1;
    min-width:0;
    margin:0;
    padding:4px 10px;
    flex-direction:row;
    justify-content:space-between;
  }
  body[data-view="q"] #head2 .side{
    min-width:0;
    padding:7px 8px 6px;
    column-gap:7px;
  }
  body[data-view="q"] #head2 .side>.av{width:38px;height:38px;font-size:22px}
  body[data-view="q"] #head2 .side .nm{font-size:15px;line-height:1.15}
  body[data-view="q"] #head2 .side .sc{font-size:30px}
}

@media (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #q .qtop{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"meta timer controls";
    align-items:center;
    gap:6px;
  }
  body[data-view="q"] #q .qtop>.meta{max-width:250px}
  body[data-view="q"] #q #qCat{max-width:168px}
  body[data-view="q"] #q .qtop>.timer{
    width:auto;
    justify-content:center;
  }
  body[data-view="enter"] #enter .avatars{
    display:grid;
    grid-template-columns:repeat(6,34px);
    justify-content:center;
    gap:4px;
  }
  body[data-view="enter"] #enter .av{
    width:34px;
    height:34px;
    font-size:19px;
  }
  body[data-view="enter"] #enter .swatches{
    display:grid;
    width:min(180px,100%);
    grid-template-columns:repeat(4,36px);
    justify-content:center;
    gap:6px;
  }
  body[data-view="enter"] #enter .sw{
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    justify-self:center;
  }
}

/* Category selection owns the remaining mobile viewport. Actions stay in a
   compact fixed row; only the category grid scrolls. */
@media (max-width:760px), (max-height:520px) and (orientation:landscape){
  body[data-view="draft"] .fsbtn{display:none}
  body[data-view="draft"] #draft{
    display:flex;
    flex-direction:column;
    height:100dvh;
    min-height:0;
    overflow:hidden!important;
  }
  #draft>.bar,#draft>.picks,#draft>.hubfoot{flex:0 0 auto}
  #draft>.hubfoot{
    order:3;
    display:flex;
    align-items:center;
    direction:ltr;
    gap:8px;
    margin:0 0 6px;
    padding:5px 0;
    border-block:1px solid rgba(255,255,255,.12);
    background:rgba(11,13,42,.78);
    z-index:2;
  }
  #draft>.hubfoot>button{
    order:1;
    flex:0 0 58px;
    align-self:auto;
    min-height:42px;
    margin:0;
    padding:5px 3px;
    font-size:11px;
  }
  #draft>.hubfoot>div{
    order:2;
    display:flex!important;
    flex:1 1 auto;
    width:auto;
    min-width:0;
    margin:0;
    align-items:stretch;
    gap:8px!important;
    flex-wrap:nowrap!important;
    direction:ltr;
  }
  #draft>.hubfoot>div>.btn{
    flex:1 1 0;
    min-width:0;
    min-height:42px;
    padding:5px 3px;
    font-size:10px;
    line-height:1.15;
    direction:rtl;
  }
  #draft>.hubfoot>div>.btn.lime{order:2;flex:0 0 104px;align-self:flex-start}
  #draft>.hubfoot>div>.draft-utility-actions{
    order:1;display:grid;grid-template-columns:minmax(0,1fr) 74px;
    flex:0 1 230px;width:auto;max-width:230px;min-width:0;gap:8px;
  }
  #draft>.hubfoot>div>.draft-utility-actions>.btn{
    width:100%;min-width:0;min-height:42px;padding:5px 3px;
    font-size:10px;line-height:1.15;direction:rtl;
  }
  #draft>.hubfoot>div>.draft-utility-actions>#draftRandom{grid-column:1}
  #draft>.hubfoot>div>.draft-utility-actions>#draftSearchToggle{grid-column:2;min-width:0}
  #draft>.hubfoot>div>.draft-utility-actions>.draft-search-panel{grid-column:1/-1}
  #draft>.cats{
    order:4;
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    align-content:start;
    padding:4px 2px 14px;
    scrollbar-gutter:stable;
  }
  body[data-view="draft"] #draft.search-focused{
    height:100dvh;
    max-height:100dvh;
  }
  #draft.search-focused>.bar,#draft.search-focused>.picks{display:none}
  #draft.search-focused>.hubfoot{
    order:1;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 64px 88px;
    margin:0 0 7px;
    padding:calc(5px + env(safe-area-inset-top)) 0 7px;
    align-items:flex-start;
  }
  #draft.search-focused>.hubfoot>button{grid-column:1;grid-row:2;width:100%;min-width:0;flex:none}
  #draft.search-focused>.hubfoot>div{display:contents!important}
  #draft.search-focused>.hubfoot>div>.draft-utility-actions{
    display:contents!important;
  }
  #draft.search-focused>.hubfoot>div>.draft-utility-actions>.draft-search-panel{
    grid-column:1/-1;
    grid-row:1;
    width:100%;
    max-width:none;
    min-height:48px;
    background:rgba(20,23,61,.98);
  }
  #draft.search-focused>.hubfoot>div>.draft-utility-actions>#draftRandom{grid-column:2;grid-row:2}
  #draft.search-focused>.hubfoot>div>.draft-utility-actions>#draftSearchToggle{grid-column:3;grid-row:2}
  #draft.search-focused>.hubfoot>div>#draftGo{grid-column:4;grid-row:2;width:100%;min-width:0;flex:none}
  #draft.search-focused>.cats{
    order:2;
    scroll-padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  #draft.search-focused>.draft-search-empty{order:2}
}

/* Short landscape phones use the full stage without inheriting desktop-sized
   question rows. The fullscreen control moves into the open control strip so
   it cannot cover an answer. */
@media (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #head2 .core{min-width:128px;padding-inline:8px}
  body[data-view="q"] #head2 .side{padding:4px 8px;column-gap:6px}
  body[data-view="q"] #head2 .side>.av{width:34px;height:34px;font-size:20px}
  body[data-view="q"] #head2 .side .nm{font-size:14px;line-height:1.1}
  body[data-view="q"] #head2 .side .sc{font-size:25px}
  body[data-view="q"] #head2 .lives{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
  }
  body[data-view="q"] #head2 .life{
    min-height:24px;
    height:24px;
    padding:1px 3px;
  }
  body[data-view="q"] #head2 .life .lic{font-size:14px}
  body[data-view="q"] #head2 .life .ltx{display:none}
  body[data-view="q"] #q{padding:3px 8px 4px}
  body[data-view="q"] #q .arena-head{margin-bottom:3px}
  body[data-view="q"] #q .qtop{min-height:40px;margin:0 0 3px}
  body[data-view="q"] #q .qbody{flex-direction:column}
  body[data-view="q"] #q .v6-question-main{
    gap:4px;
  }
  body[data-view="q"] #q .qcard{
    flex:0 0 auto;
    min-height:48px;
    max-height:none;
    padding:8px 9px 6px;
    overflow:visible!important;
  }
  body[data-view="q"] #q .qcard .qtext{
    font-size:clamp(13px,3.2vh,16px);
    line-height:1.3;
  }
  body[data-view="q"] #q .opts{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(40px,1fr));
    gap:4px;
    overflow:hidden!important;
  }
  body[data-view="q"] #q .opt{
    min-height:0;
    height:100%;
    padding:4px 6px;
    gap:5px;
    font-size:clamp(12px,3.1vh,15px);
    line-height:1.2;
    overflow:hidden!important;
  }
  body[data-view="q"] #q .opt .letter{width:24px;height:24px;font-size:11px}
  body[data-view="arena"] .fsbtn{
    top:178px;
    right:auto;
    bottom:auto;
    left:12px;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    padding:0;
  }
  body[data-view="arena"] .fsbtn .lbl{display:none}
}

/* Keep phone-landscape lifeline labels readable below their icons. */
@media (max-width:980px) and (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #head2 .life{min-height:34px;height:auto;align-self:stretch;padding:2px 3px}
  body[data-view="q"] #head2 .life .lic{line-height:1}
  body[data-view="q"] #head2 .life .ltx{flex-shrink:0;font-size:9.5px;line-height:1.4;white-space:normal;overflow:visible}
}

/* New-password checklist, scoped to Auth. Completion also has a visible checkmark. */
#login .password-requirements{container-type:inline-size;text-align:start;line-height:1.7;overflow-wrap:anywhere}
#login .password-requirements p{margin:0 0 4px}
#login .password-requirements ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px;list-style:none;margin:0;padding:0}
#login .password-requirements li{min-width:0;color:#53617A;line-height:1.5}
#login .password-requirements li.met{color:#16703A}
#login .password-control{position:relative}
#login .password-control input{padding-right:48px}
/* Keep the accessible application toggle as the only password reveal control. */
#login .password-control input::-ms-reveal{display:none}
#login .password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:40px;padding:8px;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
#login .password-toggle[hidden]{display:none}
#login .password-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
#login .password-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
#login .password-toggle .eye-slash{display:none}
#login .password-toggle[aria-pressed="true"] .eye-slash{display:block}
@container (min-width:360px){#login .password-requirements ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:340px){#login .password-requirements ul{grid-template-columns:1fr}}

/* Final mobile setup ownership: the document, not a clipped nested panel,
   owns vertical scrolling so every setup control remains reachable. */
@media (max-width:760px) and (orientation:portrait),
       (max-height:520px) and (orientation:landscape){
  body[data-view="enter"]{
    height:auto;
    min-height:100dvh;
    max-height:none;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  body[data-view="enter"] #enter{
    height:auto;
    min-height:100dvh;
    max-height:none;
    overflow:visible!important;
  }
  body[data-view="enter"] #enter .enter{
    height:auto;
    min-height:100dvh;
    max-height:none;
    overflow:visible!important;
    align-content:start;
  }
}

/* Responsive overflow belongs to the document when the existing controls
   need more height than the viewport, including intermediate fold sizes. */
body[data-view="enter"],body[data-view="draft"],body[data-view="q"]{
  height:auto;min-height:100dvh;max-height:none;
  overflow-x:hidden!important;overflow-y:auto!important;
}
body[data-view="enter"] #enter,
body[data-view="enter"] #enter .enter{
  height:auto;min-height:100dvh;max-height:none;overflow:visible!important;
}
#enter .half input{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
@media (max-width:980px) and (min-height:521px) and (orientation:landscape){
  #enter .center{order:2}
  #enter .half.b{order:3}
}

/* Retain the category grid's own scroll region. If its chrome uses the
   viewport, a usable grid still remains reachable through document scrolling. */
body[data-view="draft"] #draft{max-height:none;overflow:visible!important}
#draft>.cats{flex:1 0 160px;min-height:160px}
#draft .pickrow .who{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* Action controls reserve their full height. Intrinsic content minima let
   short windows scroll instead of clipping text or overlapping the answers. */
body[data-view="q"] #q{height:auto;min-height:100dvh;max-height:none;overflow:visible!important}
body[data-view="q"] #q .qbody,
body[data-view="q"] #q .qcol,
body[data-view="q"] #q .v6-question-main{min-height:min-content;overflow:visible!important}
body[data-view="q"] #q .qcard{flex:0 0 auto}
/* The verified presentation reference uses straight text on an angled,
   square-cornered team ribbon. Keep that background angle without requiring
   a new text wrapper in the existing answer renderer. */
body[data-view="q"] #q .opt .chip{
  position:relative;isolation:isolate;min-width:0;
  padding:3px 12px;border:0;border-radius:0;background:transparent;
  font-size:14px;line-height:inherit;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transform:none;box-shadow:none;
}
body[data-view="q"] #q .opt .chip::before{
  content:"";position:absolute;inset:0 2px;z-index:-1;
  background:var(--tc);transform:skewX(-8deg);
}
@media (max-height:520px) and (orientation:landscape){
  body[data-view="q"] #q .opt .chip{font-size:12px;padding:2px 8px}
}
@media (max-width:760px){
  body[data-view="q"] #q .opt .chip{font-size:9px;padding:1px 4px}
}
body[data-view="q"] #q #revealBtn:not([hidden]){
  position:static;left:auto;bottom:auto;z-index:auto;
  transform:skewX(-8deg);margin-inline:auto;
}
@media (max-height:760px) and (orientation:landscape){
  body[data-view="q"] #q .opts{flex:1 1 0;min-height:min-content;grid-template-rows:repeat(2,minmax(min-content,1fr))}
  body[data-view="q"] #q .opt{min-height:0;height:100%}
}

/* Original question proportions: use one category line and let the answer
   rows share the available height, retaining document scroll for long text. */
body[data-view="q"] #q .qtop>.meta{max-width:100%;flex-wrap:nowrap;overflow:visible}
body[data-view="q"] #q #qCat,
body[data-view="q"] #q #qCat:has(.category-artwork){
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  max-width:none;white-space:nowrap;overflow:visible;overflow-wrap:normal;
  font-size:clamp(10px,1vw,12px);
}
body[data-view="q"] #q #qCat .category-artwork{width:18px;height:18px;flex:0 0 18px}
body[data-view="q"] #q .qtop{grid-template-columns:max-content minmax(0,1fr) auto}
body[data-view="q"] #q .qcard{min-height:0;padding:10px 16px 8px}
body[data-view="q"] #q .turnstrip{padding-top:7px}
body[data-view="q"] #q .tteam{min-height:40px;padding:5px 8px}
body[data-view="q"] #q .opts{flex:1 1 auto;grid-template-rows:repeat(2,minmax(min-content,1fr))}
body[data-view="q"] #q .opt{min-height:52px;height:100%}
body[data-view="q"] #q #revealBtn{min-height:44px;padding:8px 24px;font-size:clamp(18px,2vw,24px)}
body[data-view="q"] #q .opt.reserved .chips{display:flex}
body[data-view="q"] #q .opt.reserved::after{display:none}

/* Keep all eight lifelines and their complete labels in the team panels,
   including disabled/manual-judging states. No inventory or handlers change. */
body[data-view="q"] #q #head2 .side{
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"av meta ctl" "lives lives lives";
  padding:5px 10px 6px;column-gap:6px;row-gap:3px;
}
body[data-view="q"] #q #head2 .side.b{grid-template-areas:"ctl meta av" "lives lives lives"}
body[data-view="q"] #q #head2 .side>.av{width:36px;height:36px;font-size:21px}
body[data-view="q"] #q #head2 .nm{
  font-size:clamp(13px,1.25vw,18px);line-height:1.2;
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;
}
body[data-view="q"] #q #head2 .sc{font-size:28px;line-height:1}
body[data-view="q"] #q #head2 .ctl{flex-direction:row;gap:4px}
body[data-view="q"] #q #head2 .pm{width:32px;min-width:32px;height:32px;min-height:32px}
body[data-view="q"] #q #head2 .lives{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;width:100%}
body[data-view="q"] #q #head2 .life{
  width:100%;min-width:0;min-height:40px;height:auto;
  flex-direction:column;justify-content:center;align-self:stretch;gap:1px;padding:3px 4px;
}
body[data-view="q"] #q #head2 .life .lic{font-size:15px;line-height:1.2}
body[data-view="q"] #q #head2 .life .ltx{
  display:block!important;width:100%;min-width:0;flex-shrink:0;
  font-size:10px;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip;
}
@media (max-width:760px) and (orientation:portrait){
  body[data-view="q"] #q .qtop{grid-template-columns:minmax(0,1fr) auto}
  body[data-view="q"] #q .qtop>.meta{padding-inline:8px}
  body[data-view="q"] #q #qCat{margin-inline-start:6px;padding-inline-start:6px}
  body[data-view="q"] #q #head2 .side{padding-inline:7px}
  body[data-view="q"] #q #head2 .lives{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #q #head2 .side{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av meta" "ctl ctl" "lives lives"}
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #q #head2 .side.b{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta av" "ctl ctl" "lives lives"}
}

/* Short playing windows reclaim spacing before falling back to scrolling.
   Text, icons, card/ribbon identities and action hit areas stay unchanged. */
@media (min-width:761px) and (max-height:600px){
  body[data-view="q"] #q{gap:2px}
  body[data-view="q"][data-presentation-state="MANUAL_REVEAL_READY"] #q{padding-bottom:max(6px,env(safe-area-inset-bottom))}
  body[data-view="q"] #q #head2 .side{padding:4px 8px}
  body[data-view="q"] #q #head2 .life{padding-inline:3px}
  body[data-view="q"] #q .arena-head{margin-bottom:0}
  body[data-view="q"] #q .qtop{margin:0}
  body[data-view="q"] #q .turnstrip{padding-top:5px}
  body[data-view="q"] #q .tteam{min-height:32px;padding:3px 8px}
  body[data-view="q"] #q .qcard{padding-block:6px}
  body[data-view="q"] #q .opt{min-height:44px}
}

/* Landscape reuses the approved components with less space between rows.
   Keep the narrow header's stacked identity when judging controls need it. */
@media (orientation:landscape){
  body[data-view="q"] #q{gap:2px}
  body[data-view="q"] #q .arena-head{margin-bottom:0}
  body[data-view="q"] #q .qtop{margin:0}
  body[data-view="q"] #q .turnstrip{padding-top:5px}
  body[data-view="q"] #q .tteam{min-height:32px;padding:3px 8px}
  body[data-view="q"] #q .qcard{padding-block:6px}
}
@media (orientation:landscape) and (min-width:761px){
  body[data-view="q"] #q #head2 .side>.meta{
    flex-direction:row;align-items:center;gap:6px;
  }
  body[data-view="q"] #q #head2 .side.b>.meta{flex-direction:row-reverse}
  body[data-view="q"] #q #head2 .nm{flex:1;min-width:0}
  body[data-view="q"] #q #head2 .sc{flex:none}
}

/* Compact the existing question controls without removing their labels. */
body[data-view="q"] #q{gap:2px}
body[data-view="q"] #q #head2 .side{padding:4px 8px;row-gap:2px}
body[data-view="q"] #q #head2 .side>.av{width:32px;height:32px}
body[data-view="q"] #q #head2 .life{
  min-height:32px;flex-direction:row;gap:3px;padding:3px 4px;
}
body[data-view="q"] #q #head2 .life .lic{flex:none}
body[data-view="q"] #q #head2 .life .ltx{width:auto;flex:1;line-height:1.2}
body[data-view="q"] #q .ring{width:40px;height:40px}
body[data-view="q"] #q .qturnmini{min-height:32px;padding:3px 6px}
body[data-view="q"] #q #pauseBtn{min-height:32px;padding:3px 8px}
body[data-view="q"] #q .qtop>.meta{min-height:30px;padding-block:3px}
body[data-view="q"] #q .turnstrip{padding-top:5px}
body[data-view="q"] #q .tteam{min-height:28px;padding:2px 6px}
body[data-view="q"] #q .qcard{padding-block:6px}
body[data-view="q"] #q .opt .chips:empty{display:none}
body[data-view="q"] #q .opt .chips{flex-wrap:wrap}
body[data-view="q"] #q .opt .chip{flex-shrink:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
@media (orientation:landscape) and (max-width:760px){
  body[data-view="q"] #q #head2 .life{flex-direction:column;padding:2px}
  body[data-view="q"] #q #head2 .life .ltx{width:100%;flex:none}
}

@media (orientation:portrait) and (max-width:760px){
  body[data-view="q"] #q .qtop{display:flex;flex-wrap:wrap;justify-content:space-between}
  body[data-view="q"] #q .qtop>.meta{order:0;flex:0 1 auto;max-width:100%}
  body[data-view="q"] #q .qtop>.question-controls{order:1;margin-inline-start:auto}
  body[data-view="q"] #q .qtop>.timer{order:2;flex:1 1 250px}
  body[data-view="q"] #q #head2 .side,
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #q #head2 .side{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"av name score" "ctl ctl ctl" "lives lives lives";
    column-gap:4px;
  }
  body[data-view="q"] #q #head2 .side.b,
  body[data-view="q"][data-presentation-state="MANUAL_JUDGING_ACTIVE"] #q #head2 .side.b{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"score name av" "ctl ctl ctl" "lives lives lives";
  }
  body[data-view="q"] #q #head2 .side>.meta{display:contents}
  body[data-view="q"] #q #head2 .nm{grid-area:name}
  body[data-view="q"] #q #head2 .sc{grid-area:score}
  body[data-view="q"] #q #head2 .life{min-height:36px}
  body[data-view="q"] #q .opt{flex-wrap:wrap;align-content:center;row-gap:4px}
  body[data-view="q"] #q .opt .chips{flex:0 0 100%;max-width:100%;flex-wrap:wrap;gap:3px}
  body[data-view="q"] #q .opt .chip{
    max-width:100%;font-size:10px;padding:2px 6px;
    white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;
  }
  body[data-view="q"] #q .opt.correct{padding-top:20px}
}

/* The category board keeps the same panels, with intrinsic rows and real
   document scrolling when browser chrome leaves too little playing height. */
body[data-view="arena"]{height:auto;min-height:100dvh;max-height:none;overflow-x:hidden!important;overflow-y:auto!important}
body[data-view="arena"] #arena{height:auto;min-height:100dvh;max-height:none;padding-bottom:max(60px,env(safe-area-inset-bottom));overflow:visible!important}
body[data-view="arena"] #arena .hubgrid{flex:1 0 auto;min-height:min-content;overflow:visible}
body[data-view="arena"] #arena .side{padding:5px 10px;column-gap:5px;row-gap:4px}
body[data-view="arena"] #arena .side>.av{width:32px;height:32px;font-size:21px}
body[data-view="arena"] #arena .side .nm{flex:1;min-width:0;font-size:clamp(13px,1.25vw,18px);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
body[data-view="arena"] #arena .side .sc{flex:none;font-size:28px;line-height:1}
body[data-view="arena"] #arena .side>.meta{flex-direction:row;align-items:center;gap:6px}
body[data-view="arena"] #arena .side.b>.meta{flex-direction:row-reverse}
body[data-view="arena"] .fsbtn{top:auto;bottom:max(10px,env(safe-area-inset-bottom));left:12px}
@media (orientation:portrait) and (max-width:760px){
  body[data-view="arena"] #arena .side{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"av name score" "lives lives lives"}
  body[data-view="arena"] #arena .side.b{grid-template-areas:"score name av" "lives lives lives"}
  body[data-view="arena"] #arena .side>.meta{display:contents}
  body[data-view="arena"] #arena .side .nm{grid-area:name}
  body[data-view="arena"] #arena .side .sc{grid-area:score}
}

/* Keep the existing timeout ribbon in a reserved turn-indicator slot. */
body[data-view="q"] #q #buzz{grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr)}
body[data-view="q"] #q #buzz>.tteam{grid-row:1}
body[data-view="q"] #q #buzz>.tteam:nth-child(2){grid-column:3}
body[data-view="q"] #q #buzz>#timeup{
  position:static;grid-area:1/2;inset:auto;margin-inline:4px;
  max-width:none;padding-block:2px;line-height:1.2;animation:none;
}
body[data-view="q"] #q #buzz>#timeup[hidden]{display:block!important;visibility:hidden}
/* Keep controls inside the slanted panel edge and wrap Arabic at word boundaries. */
body[data-view="q"] #q #head2 .lives{padding-inline-end:8px}
@media (orientation:landscape){
  body[data-view="q"] #q #head2 .life .ltx{direction:rtl;overflow-wrap:normal;word-break:normal}
}
/* Reuse the existing team status slot for its own timeout, without adding a row. */
body[data-view="q"] #q .tteam:has(.team-timeout){opacity:1;filter:none}
body[data-view="q"] #q .tteam .picked.team-timeout{
  padding-inline:4px;border:1px solid #fff;background:var(--magenta);color:#fff;
  font-size:10px;line-height:1.2;white-space:nowrap;
}
@media (orientation:portrait) and (max-width:760px){
  body[data-view="q"] #q .tteam .picked.team-timeout{position:relative;top:9px}
}
@media (max-width:760px) and (orientation:portrait){
  body[data-view="q"] #q #buzz{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  body[data-view="q"] #q #buzz>#timeup{grid-area:1/1/2/3;justify-self:center}
  body[data-view="q"] #q #buzz>.tteam{grid-row:2}
  body[data-view="q"] #q #buzz>.tteam:nth-child(2){grid-column:2}
}
/* Arabic landmarks presentation only; keep the category identity and artwork. */
.category-display-label{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-size:max(11px,1em);line-height:1.25}
.category-display-label>small{font:inherit;font-size:max(10px,.78em);line-height:1.3}