:root{
 --bg:#0b1533; --bg2:#13214d; --ink:#0f172a; --paper:#fff; --muted:#64748b; --line:#e2e8f0;
 --gold:#fbbf24; --green:#16a34a; --red:#e11d48; --c1:#2563eb; --c2:#0ea5e9; --r:18px;
 --shadow:0 8px 24px rgba(15,23,42,.14);
 font-size:17px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Rubik","Assistant","Heebo","Segoe UI",system-ui,Arial,sans-serif;color:var(--ink);
 background:#eef2ff radial-gradient(circle at 10% 0%,#e0e7ff 0,transparent 40%),radial-gradient(circle at 90% 10%,#fce7f3 0,transparent 35%);min-height:100vh;line-height:1.55}
img{max-width:100%}
a{color:#1d4ed8}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid #f59e0b;outline-offset:2px;border-radius:8px}
.skip{position:absolute;right:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:50}
.skip:focus{right:8px}
/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;padding:.45rem .8rem;background:linear-gradient(90deg,#0b1533,#1e1b4b 60%,#312e81);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:.4rem;color:#fff;text-decoration:none;font-size:1.2rem;white-space:nowrap}
.brand-ball{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fde68a,#f59e0b);box-shadow:0 0 0 3px rgba(251,191,36,.35)}
.brand-txt b{color:var(--gold)}
.nav{display:flex;gap:.15rem;margin-inline-start:auto;flex-wrap:nowrap}
.nav a{color:#e0e7ff;text-decoration:none;padding:.45rem .55rem;border-radius:12px;font-size:.95rem;display:flex;align-items:center;gap:.25rem;white-space:nowrap}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.14);color:#fff}
.logo{width:44px;height:44px;border-radius:50%;background:#fff;object-fit:contain;flex:none}
@media (max-width:760px){.nav{position:fixed;bottom:0;right:0;left:0;justify-content:space-around;background:#0b1533;padding:.3rem .2rem calc(.3rem + env(safe-area-inset-bottom));box-shadow:0 -4px 14px rgba(0,0,0,.25)}
 .nav a{flex-direction:column;font-size:.72rem;gap:0;padding:.3rem .4rem;font-size:1.15rem}.nav a span{font-size:.7rem}
 body{padding-bottom:70px}.brand-txt{font-size:1.1rem}}
main{max-width:1180px;margin:0 auto;padding:1rem .9rem 2rem;outline:none}
.foot{text-align:center;color:#475569;padding:1.2rem 1rem 1.5rem;font-size:.95rem}
.foot .small{font-size:.8rem;margin:.2rem 0 0}
h1,h2,h3{line-height:1.25;margin:.2rem 0 .6rem}
h1{font-size:1.75rem}h2{font-size:1.35rem}h3{font-size:1.1rem}
.muted{color:var(--muted)}
.small{font-size:.86rem}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;padding:.6rem 1.15rem;border-radius:14px;border:0;background:#1d4ed8;color:#fff;font-weight:700;font-size:1.02rem;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn.big{min-height:58px;font-size:1.15rem;padding:.8rem 1.5rem}
.btn.gold{background:linear-gradient(180deg,#fcd34d,#f59e0b);color:#3b2600}
.btn.green{background:linear-gradient(180deg,#22c55e,#15803d)}
.btn.pink{background:linear-gradient(180deg,#f472b6,#db2777)}
.btn.ghost{background:#fff;color:#1e293b;border:2px solid #cbd5e1;box-shadow:none}
.btn.dark{background:#0f172a}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.row.center{justify-content:center}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:1rem}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .65rem;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:700;font-size:.85rem}
/* hero */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:1.4rem 1.2rem;color:#fff;background:linear-gradient(135deg,#1e1b4b,#4338ca 50%,#db2777);box-shadow:var(--shadow);margin-bottom:1.1rem}
.hero h1{font-size:1.9rem;margin:0 0 .4rem}
.hero p{margin:.2rem 0 .9rem;max-width:640px;font-size:1.05rem}
.hero .stripes{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 22px,transparent 22px 44px);pointer-events:none}
.hero .trophy{position:absolute;left:4%;bottom:-10px;font-size:6.5rem;opacity:.9;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem;margin:0 0 1.2rem}
.mode{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border-radius:18px;padding:1rem;box-shadow:var(--shadow);border-top:6px solid #f59e0b}
.mode .ic{font-size:2.1rem}
.mode:nth-child(2){border-top-color:#22c55e}.mode:nth-child(3){border-top-color:#6366f1}
/* game cards */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.gcard{position:relative;display:flex;flex-direction:column;gap:.35rem;min-height:170px;padding:1rem;border-radius:20px;color:#fff;text-decoration:none;background:linear-gradient(140deg,var(--c1),var(--c2));box-shadow:var(--shadow);overflow:hidden;transition:transform .15s}
.gcard:hover{transform:translateY(-3px) rotate(-.4deg)}
.gcard::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-60deg,rgba(255,255,255,.08) 0 14px,transparent 14px 28px)}
.gcard .ge{font-size:2.6rem;line-height:1;position:relative;z-index:1}
.gcard h3{margin:.2rem 0 0;font-size:1.25rem;position:relative;z-index:1}
.gcard p{margin:0;font-size:.9rem;opacity:.95;position:relative;z-index:1}
.gcard .tags{margin-top:auto;display:flex;gap:.3rem;flex-wrap:wrap;position:relative;z-index:1}
.gcard .tags span{background:rgba(255,255,255,.22);border-radius:999px;padding:.1rem .55rem;font-size:.78rem;font-weight:700}
.gcard .best{position:absolute;top:.6rem;left:.7rem;z-index:2;background:rgba(0,0,0,.28);border-radius:999px;padding:.1rem .5rem;font-size:.8rem}
/* game hub */
.ghead{border-radius:22px;padding:1.1rem;color:#fff;background:linear-gradient(140deg,var(--c1),var(--c2));box-shadow:var(--shadow);margin-bottom:1rem;position:relative;overflow:hidden}
.ghead::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-60deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px);pointer-events:none}
.ghead > *{position:relative;z-index:1}
.ghead .ge{font-size:3rem}
.ghead h1{margin:.1rem 0}
.ghead .crumb{color:#fff;opacity:.9;text-decoration:none;font-size:.9rem}
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem}
.hubbtn{display:flex;flex-direction:column;gap:.4rem;text-align:right;border:0;cursor:pointer;background:#fff;border-radius:20px;padding:1.1rem;box-shadow:var(--shadow);text-decoration:none;color:inherit;border-bottom:6px solid var(--c1)}
.hubbtn .ic{font-size:2.3rem}
.hubbtn b{font-size:1.2rem}
/* pitch / team */
.pitch{position:relative;border-radius:24px;padding:1rem .7rem 1.2rem;background:repeating-linear-gradient(0deg,#15803d 0 46px,#16a34a 46px 92px);box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),var(--shadow);overflow:hidden}
.pitch::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;border:3px solid rgba(255,255,255,.45);border-radius:50%;transform:translate(-50%,-50%)}
.pitch::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px solid rgba(255,255,255,.45)}
.pitch > *{position:relative;z-index:1}
.captain{display:flex;justify-content:center;margin-bottom:.8rem}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.slot{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-height:150px;padding:.6rem .4rem;border-radius:18px;border:3px dashed rgba(255,255,255,.75);background:rgba(255,255,255,.14);color:#fff;cursor:pointer;text-align:center;transition:transform .12s, background .12s}
.slot:hover{transform:scale(1.03);background:rgba(255,255,255,.24)}
.slot .jersey{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.25);font-size:2rem;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.slot .lab{font-weight:800;font-size:.92rem;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.slot .who{font-size:.95rem;font-weight:700;background:#fff;color:#0f172a;border-radius:10px;padding:.1rem .5rem;margin-top:.15rem;max-width:100%}
.slot .who.empty{background:transparent;color:#f0fdf4;border:1px solid rgba(255,255,255,.6);font-weight:600}
.slot.filled{border-style:solid;background:linear-gradient(180deg,rgba(255,255,255,.95),#eef2ff);color:#0f172a}
.slot.filled .lab{text-shadow:none;color:#334155}
.slot.filled .jersey{background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:0 4px 10px rgba(0,0,0,.2)}
.slot.skipped{border-style:dotted;opacity:.85}
.slot.cap{min-width:220px;border-color:#fde68a;background:rgba(251,191,36,.25)}
.slot.cap.filled{background:linear-gradient(180deg,#fffbeb,#fde68a)}
.slot.cap .jersey{width:76px;height:76px;font-size:2.4rem}
.slot .ok{font-size:1.2rem}
.badge-c{position:absolute;margin-top:-8px;margin-right:52px;background:#f59e0b;color:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-weight:900;font-size:.85rem;border:2px solid #fff}
.teambar{position:sticky;bottom:0;z-index:5;display:flex;gap:.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:.9rem;background:#fff;border-radius:18px;padding:.7rem .8rem;box-shadow:var(--shadow)}
@media (max-width:760px){.teambar{bottom:62px}}
.prog{flex:1;min-width:160px}
.prog .barw{height:12px;border-radius:99px;background:#e2e8f0;overflow:hidden}
.prog .bar{height:100%;background:linear-gradient(90deg,#22c55e,#a3e635);transition:width .3s}
/* sheet */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(15,23,42,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet .panel{background:#fff;width:min(820px,100%);max-height:86vh;overflow:auto;border-radius:22px 22px 0 0;padding:1rem;animation:up .2s ease}
@media (min-width:761px){.sheet{align-items:center}.sheet .panel{border-radius:22px}}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.panel .ph{display:flex;justify-content:space-between;align-items:center;gap:.5rem;position:sticky;top:-1rem;background:#fff;padding:.3rem 0 .6rem;z-index:2}
.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
.pcard{display:flex;gap:.6rem;align-items:flex-start;text-align:right;padding:.7rem;border-radius:16px;border:2px solid #e2e8f0;background:#fff;cursor:pointer;color:inherit;min-height:84px}
.pcard:hover{border-color:var(--c1);background:#f8fafc}
.pcard .pe{font-size:1.9rem;line-height:1}
.pcard b{display:block;font-size:1rem}
.pcard span{font-size:.84rem;color:#475569;display:block}
.pcard.sel{border-color:#16a34a;background:#f0fdf4}
.pcard[disabled]{opacity:.4;cursor:not-allowed}
.xbtn{border:0;background:#f1f5f9;border-radius:12px;min-width:44px;min-height:44px;font-size:1.2rem;cursor:pointer}
/* predict */
.qcard{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:1rem;border-top:8px solid var(--c1)}
.qtop{display:flex;justify-content:space-between;gap:.5rem;align-items:center;flex-wrap:wrap}
.qtext{font-size:1.2rem;font-weight:800;margin:.6rem 0 .8rem}
.remain{position:sticky;top:62px;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.55rem .8rem;border-radius:16px;background:#0f172a;color:#fff;margin-bottom:.7rem;box-shadow:0 6px 14px rgba(15,23,42,.2)}
.remain .num{font-variant-numeric:tabular-nums;font-weight:900;font-size:1.35rem;color:#fca5a5}
.remain.done .num{color:#86efac}
.remain.done{background:#14532d}
.opt{display:grid;grid-template-columns:auto 1fr auto;gap:.3rem .6rem;align-items:center;padding:.6rem .5rem;border-bottom:1px solid #f1f5f9}
.opt .oe{font-size:1.7rem;width:2.2rem;text-align:center}
.opt .ol{font-weight:700}
.opt .ctrl{display:flex;align-items:center;gap:.3rem}
.opt .ctrl button{width:42px;height:42px;border-radius:12px;border:0;background:#e0e7ff;font-size:1.3rem;font-weight:900;cursor:pointer;color:#1e1b4b}
.opt .ctrl input[type=number]{width:4.4rem;height:42px;text-align:center;border-radius:12px;border:2px solid #cbd5e1;font-weight:800;font-size:1.05rem}
.opt input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--c1);height:30px}
.votechips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.3rem 0 .9rem}
.chip{border:2px solid #cbd5e1;background:#fff;border-radius:999px;padding:.45rem .85rem;cursor:pointer;font-weight:700;min-height:44px}
.chip.on{background:#fef3c7;border-color:#f59e0b}
/* reveal */
.reveal{margin-top:.8rem}
.rv{margin:.55rem 0}
.rv .rl{display:flex;justify-content:space-between;font-weight:700;font-size:.95rem;gap:.4rem}
.rv .bars{display:grid;gap:3px;margin-top:.2rem}
.rv .b{height:16px;border-radius:8px;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.rv .b.g{background:repeating-linear-gradient(45deg,#94a3b8 0 6px,#cbd5e1 6px 12px)}
.rv .b.a{background:linear-gradient(90deg,var(--c1),var(--c2))}
.legend{display:flex;gap:1rem;font-size:.85rem;margin:.4rem 0}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;margin-inline-end:.25rem}
.score{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.8rem 0;padding:.8rem;border-radius:18px;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff}
.score .pts{font-size:2.4rem;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
.explain{background:#f8fafc;border-radius:14px;padding:.7rem .8rem;border-right:5px solid var(--c1)}
.src{font-size:.85rem;color:#475569;margin-top:.4rem}
/* scoreboard / leaderboard */
.board{width:100%;border-collapse:separate;border-spacing:0 6px}
.board td,.board th{padding:.55rem .6rem;text-align:right}
.board th{font-size:.85rem;color:#475569}
.board tr.r td{background:#fff}
.board tr.r td:first-child{border-radius:0 12px 12px 0;font-weight:900;width:3rem;text-align:center}
.board tr.r td:last-child{border-radius:12px 0 0 12px;font-weight:900;font-variant-numeric:tabular-nums}
.board tr.r1 td{background:#fef3c7}.board tr.r2 td{background:#f1f5f9}.board tr.r3 td{background:#ffedd5}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:.5rem;margin:1rem 0}
.pod{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:31%;max-width:160px;border-radius:14px 14px 0 0;color:#fff;font-weight:800;padding:.5rem .3rem;text-align:center;animation:rise .8s ease both}
.pod .pn{font-size:1rem;word-break:break-word}.pod .pm{font-size:2rem}
.pod.p1{height:190px;background:linear-gradient(180deg,#fbbf24,#d97706)}
.pod.p2{height:150px;background:linear-gradient(180deg,#cbd5e1,#64748b);animation-delay:.2s}
.pod.p3{height:120px;background:linear-gradient(180deg,#fdba74,#c2410c);animation-delay:.4s}
@keyframes rise{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0}
.tab{border:0;border-radius:12px;padding:.55rem .9rem;background:#e0e7ff;color:#1e1b4b;font-weight:800;cursor:pointer;min-height:46px}
.tab.on{background:#1e1b4b;color:#fff}
.roomcode{font-size:2.4rem;font-weight:900;letter-spacing:.12em;direction:ltr;display:inline-block;background:#0f172a;color:var(--gold);padding:.1rem .8rem;border-radius:14px;font-variant-numeric:tabular-nums}
.codebox{direction:ltr;text-align:left;word-break:break-all;background:#0f172a;color:#a7f3d0;border-radius:14px;padding:.8rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;user-select:all}
.qr{background:#fff;border-radius:14px;padding:.5rem;display:inline-block;box-shadow:var(--shadow)}
.qr img,.qr svg{display:block;width:200px;height:200px;image-rendering:pixelated}
textarea,input[type=text],select{width:100%;border:2px solid #cbd5e1;border-radius:14px;padding:.7rem;background:#fff;min-height:48px}
textarea{min-height:120px;direction:ltr;text-align:left}
label{font-weight:700;display:block;margin:.5rem 0 .25rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem}
.namechip{display:inline-flex;align-items:center;gap:.3rem;background:#eef2ff;border-radius:999px;padding:.25rem .3rem .25rem .7rem;margin:.2rem;font-weight:700}
.namechip button{border:0;background:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
.mini .card{padding:.7rem}
.mini ul{margin:.3rem 0 0;padding:0 1rem 0 0;font-size:.88rem}
.pop{margin:.5rem 0 .9rem}
.pop .row1{display:flex;justify-content:space-between;font-size:.92rem;font-weight:700}
.pop .barw{height:14px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:.15rem 0 .35rem}
.pop .bar{height:100%;background:linear-gradient(90deg,var(--c1),var(--c2));width:0;transition:width 1s}
details.key{background:#fff;border-radius:16px;box-shadow:var(--shadow);margin:.6rem 0;padding:.2rem .9rem}
details.key summary{cursor:pointer;font-weight:800;font-size:1.1rem;padding:.6rem 0;min-height:44px}
.ktable{width:100%;border-collapse:collapse;font-size:.92rem;margin:.4rem 0}
.ktable td,.ktable th{border-bottom:1px solid #e2e8f0;padding:.35rem;text-align:right;vertical-align:top}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:.5rem 3rem .5rem .5rem;margin:.45rem 0;background:#fff;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.steps li::before{content:counter(s);position:absolute;right:.6rem;top:.5rem;width:1.9rem;height:1.9rem;border-radius:50%;background:#1e1b4b;color:#fff;display:grid;place-items:center;font-weight:900}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(30px);background:#0f172a;color:#fff;padding:.7rem 1.1rem;border-radius:14px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.conf{position:fixed;top:-20px;width:10px;height:16px;z-index:70;pointer-events:none;animation:fall linear forwards;border-radius:2px}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.avatars{display:flex;flex-wrap:wrap;gap:.4rem}
.avatars button{font-size:1.7rem;width:54px;height:54px;border-radius:14px;border:2px solid #e2e8f0;background:#fff;cursor:pointer}
.avatars button.on{border-color:#f59e0b;background:#fef3c7}
.stars{color:#f59e0b;letter-spacing:.1em}
.note{background:#fff7ed;border:2px solid #fed7aa;border-radius:14px;padding:.6rem .8rem}
.center{text-align:center}
.lineup{border-radius:22px;padding:1rem;background:linear-gradient(160deg,#0f172a,#1e293b);color:#fff;box-shadow:var(--shadow)}
.lineup h2{color:var(--gold)}
.lineup ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.45rem}
.lineup li{background:rgba(255,255,255,.08);border-radius:12px;padding:.45rem .6rem;display:flex;gap:.5rem;align-items:center}
.lineup li .e{font-size:1.5rem}
.lineup li small{display:block;color:#cbd5e1;font-size:.78rem}
.lineup li.right{outline:2px solid #4ade80}.lineup li.wrong{outline:2px solid #fb7185}
@media (min-width:1100px){:root{font-size:18px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- v2: more games per subject ---- */
.fmt{display:inline-block;align-self:flex-start;font-size:.78rem;font-weight:800;color:var(--c1);background:#eef2ff;border-radius:999px;padding:.12rem .6rem}
.fmt.light{color:#fff;background:rgba(255,255,255,.22)}
.hubbtn .fmt{margin-top:-.2rem}
.modes.more .mode{border-top-color:var(--c1)}
.modes.more .mode:nth-child(odd){border-top-color:#ec4899}
.modes.more .mode:nth-child(3n){border-top-color:#14b8a6}
.roomcta{margin-top:1rem;border-right:6px solid #f59e0b}
.answers{display:grid;gap:.55rem;margin-top:.6rem}
.ans{display:flex;gap:.6rem;align-items:center;text-align:right;min-height:52px;padding:.6rem .8rem;border-radius:14px;border:2px solid #e2e8f0;background:#fff;cursor:pointer;color:inherit;font-weight:600}
.ans:hover:not([disabled]){border-color:var(--c1);background:#f8fafc}
.ans .al{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-weight:800}
.ans.right,.tbtn.right,.vcard.right,.pcard.okc,.rk.right{outline:0;border-color:#16a34a;background:#dcfce7}
.ans.wrong,.tbtn.wrong,.vcard.wrong,.rk.wrong{outline:0;border-color:#e11d48;background:#ffe4e6}
.ans[disabled],.tbtn[disabled],.vcard[disabled]{cursor:default;opacity:1;color:inherit}
.capbtn{margin:.2rem 0 .3rem}
.capbtn.on{background:#fef3c7;border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:stretch;margin-top:.6rem}
.vsx{align-self:center;font-weight:900;font-size:1.1rem;color:#fff;background:#0f172a;border-radius:999px;padding:.35rem .55rem}
.vcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:150px;padding:.8rem .5rem;border-radius:20px;border:3px solid #e2e8f0;background:#fff;cursor:pointer;color:inherit;text-align:center;box-shadow:var(--shadow);transition:transform .15s}
.vcard:hover:not([disabled]){transform:translateY(-3px);border-color:var(--c1)}
.vcard .ve,.tcard .ve,.rk .ve{font-size:2.4rem;line-height:1}
.vcard b{font-size:1.02rem}
.vcard .vv{font-weight:900;font-size:1.15rem;color:var(--c1);font-variant-numeric:tabular-nums}
.vcard.dim{opacity:.85}
.tcard{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin:.6rem auto;padding:1rem;max-width:340px;border-radius:20px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;box-shadow:var(--shadow);text-align:center}
.tcard b{font-size:1.25rem}
.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.55rem;margin-top:.6rem}
.tbtn{min-height:56px;padding:.6rem;border-radius:14px;border:2px solid #cbd5e1;background:#fff;font-weight:800;cursor:pointer;color:inherit}
.tbtn:hover:not([disabled]){border-color:var(--c1);background:#f8fafc}
.role{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.7rem;border-radius:16px;background:#0f172a;color:#fff;margin:.5rem 0}
.role b{font-size:1.25rem;color:var(--gold)}
.dpool{margin-top:.5rem}
.pcard.stolen{opacity:.45;position:relative;text-decoration:line-through}
.pcard .stl{position:absolute;top:.3rem;left:.5rem;font-size:.75rem;font-weight:800;color:#0f172a!important;background:#e2e8f0;border-radius:999px;padding:.05rem .45rem}
.pcard.noc{opacity:.75}
.pcard.noc.sel{border-color:#e11d48;background:#ffe4e6;opacity:1}
.pcard.okc.sel{box-shadow:0 0 0 3px rgba(22,163,74,.35)}
.rklist{list-style:none;padding:0;margin:.6rem 0 1rem;display:grid;gap:.45rem}
.rk{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;border-radius:14px;border:2px solid #e2e8f0;background:#fff}
.rk .rn{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#0f172a;color:#fff;font-weight:800}
.rk .ve{font-size:1.7rem}
.rk b{flex:1}
.rk .rkv{font-weight:800;color:var(--c1);white-space:nowrap}
.rkb{display:flex;gap:.3rem}
.rkb button{width:44px;height:44px;border-radius:12px;border:2px solid #cbd5e1;background:#f8fafc;font-size:1rem;cursor:pointer}
.rkb button[disabled]{opacity:.3;cursor:default}
.budgetbar{position:sticky;top:66px;z-index:5;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;justify-content:space-between;background:#0f172a;color:#fff;border-radius:16px;padding:.6rem .9rem;margin:.6rem 0;box-shadow:var(--shadow)}
.budgetbar .barw{flex:1 1 100%;height:10px;background:#334155;border-radius:99px;overflow:hidden}
.budgetbar .bar{height:100%;background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.bpool .pcard{position:relative;padding-bottom:1.9rem}
.pcard .cost{position:absolute;bottom:.4rem;left:.6rem;font-weight:900;color:#92400e!important;background:#fef3c7;border-radius:999px;padding:.05rem .55rem;font-size:.9rem!important}
.fbk{margin-top:.9rem;padding:.8rem;border-radius:16px;background:#f8fafc;border:2px solid #e2e8f0}
.fbk.good{border-color:#86efac;background:#f0fdf4}
.fbk.bad{border-color:#fda4af;background:#fff1f2}
.fbk.mid{border-color:#fcd34d;background:#fffbeb}
.fbk .explain{margin-top:.5rem}
.streak{background:#ffedd5!important;color:#9a3412!important}
@media (max-width:420px){ .vcard{min-height:130px} .vcard .ve{font-size:2rem} .vsx{font-size:.85rem;padding:.3rem .4rem} }