:root{
  --bg:#0b0e1a; --panel:#131a2b; --panel-2:#1b2540; --panel-3:#232f52;
  --ink:#edeff7; --ink-dim:#9aa3c0;
  --a:#ff5a5f; --b:#3ab0ff; --c:#ffc857; --d:#3ddc97;
  --line:#2a3357; --radius:20px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 15% -10%, #1a2244 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, #241a3a 0%, transparent 55%),
    var(--bg);
  color:var(--ink); font-family:'Estedad', Tahoma, 'Segoe UI', sans-serif;
  min-height:100vh;
}
h1,h2,h3{ font-family:'Vazirmatn', Tahoma, sans-serif; font-weight:800; margin:0 0 10px; }
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit;}
:focus-visible{outline:3px solid var(--c); outline-offset:2px;}

.wrap{max-width:1100px; margin:0 auto; padding:22px 18px 40px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-dim);
  background:var(--panel-2); border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-bottom:12px;}
.btn{border:none; border-radius:14px; padding:13px 22px; font-size:15px; font-weight:700; transition:transform .12s ease, opacity .12s ease;}
.btn:hover{transform:translateY(-2px);}
.btn:disabled{opacity:.35; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--c); color:#20180a;}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn-soft{background:var(--panel-2); color:var(--ink); border:1px solid var(--line);}
.btn-danger{background:var(--a); color:#2a0505;}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.between{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.center-col{display:flex; flex-direction:column; align-items:center; text-align:center;}
.panel{background:linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px;}
.small-note{font-size:13px; color:var(--ink-dim); line-height:1.9;}

.qtext{font-size:clamp(20px,3vw,32px); line-height:1.45; margin:10px 0 22px;}
.options{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.opt{border-radius:16px; padding:18px 20px; font-size:18px; font-weight:700; display:flex; align-items:center;
  gap:10px; color:#0d0f18; border:3px solid transparent; transition:all .2s ease;}
.opt .tag{width:30px; height:30px; border-radius:9px; background:rgba(0,0,0,.18); display:flex;
  align-items:center; justify-content:center; flex-shrink:0; font-size:14px;}
.opt-a{background:var(--a);} .opt-b{background:var(--b); color:#06131c;} .opt-c{background:var(--c);} .opt-d{background:var(--d); color:#04241a;}
.opt.dim{opacity:.28; filter:grayscale(.4);}
.opt.correct{border-color:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.15); transform:scale(1.02);}
.opt.mypick{outline:3px dashed rgba(255,255,255,.7); outline-offset:3px;}
.opt.tappable{cursor:pointer;}
.opt.tappable:hover{transform:translateY(-2px);}
@media (max-width:640px){ .options{grid-template-columns:1fr;} }

.timer-wrap{display:flex; flex-direction:column; align-items:center; gap:4px;}
.ring{position:relative; width:96px; height:96px;}
.ring svg{transform:rotate(-90deg);}
.ring circle{fill:none; stroke-width:8;}
.ring .bg{stroke:var(--panel-3);}
.ring .fg{stroke:var(--c); stroke-linecap:round; transition:stroke-dashoffset .3s linear;}
.ring .num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:900; font-family:'Vazirmatn';}

.board-row{display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid var(--line);}
.board-row:last-child{border-bottom:none;}
.board-row.tie{outline:2px dashed var(--c); outline-offset:-2px; border-radius:10px;}
.rank{width:30px; height:30px; border-radius:9px; background:var(--panel-3); display:flex; align-items:center;
  justify-content:center; font-weight:800; font-family:'Vazirmatn'; flex-shrink:0; font-size:13px;}
.rank.gold{background:var(--c); color:#251c04;} .rank.silver{background:#c9d1e8; color:#1a1f33;} .rank.bronze{background:#d99a63; color:#241305;}
.barbg{flex:1; height:13px; background:var(--panel-3); border-radius:8px; overflow:hidden;}
.barfg{height:100%; background:linear-gradient(90deg, var(--b), var(--d)); border-radius:8px; transition:width .6s ease;}
.score-num{width:56px; text-align:left; font-weight:800; font-family:'Vazirmatn'; font-size:15px;}
.team-name{width:140px; font-weight:600; flex-shrink:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.adv-tag{font-size:11px; background:rgba(61,220,151,.18); color:var(--d); padding:3px 8px; border-radius:8px; flex-shrink:0;}

/* ---- progress strip (the "who's ahead / who's behind" bar) ---- */
.progress-strip{
  position:fixed; left:0; right:0; bottom:0; background:rgba(11,14,26,.92);
  backdrop-filter:blur(6px); border-top:1px solid var(--line); padding:10px 16px 12px; z-index:50;
}
.progress-strip .ps-title{font-size:11px; color:var(--ink-dim); margin-bottom:6px; display:flex; justify-content:space-between;}
.ps-track{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;}
.ps-item{flex:0 0 auto; width:118px;}
.ps-name{font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px;}
.ps-bar{height:9px; background:var(--panel-3); border-radius:6px; overflow:hidden; position:relative;}
.ps-fill{height:100%; border-radius:6px; transition:width .6s ease;}
.ps-fill.lead{background:linear-gradient(90deg, var(--c), #ffdf99);}
.ps-fill.mid{background:linear-gradient(90deg, var(--b), var(--d));}
.ps-fill.last{background:var(--a);}
.ps-pct{font-size:10px; color:var(--ink-dim); margin-top:2px;}
body.has-strip{padding-bottom:92px;}

.podium{display:flex; align-items:flex-end; justify-content:center; gap:14px; margin:30px 0 22px;}
.pod-col{width:130px; text-align:center;}
.pod-block{border-radius:14px 14px 0 0; display:flex; align-items:flex-start; justify-content:center;
  padding-top:10px; font-family:'Vazirmatn'; font-weight:900; font-size:22px;}
.pod-1 .pod-block{height:150px; background:linear-gradient(180deg, var(--c), #a87b12); color:#241c05;}
.pod-2 .pod-block{height:112px; background:linear-gradient(180deg, #c9d1e8, #8a93b3); color:#1a1f33;}
.pod-3 .pod-block{height:86px; background:linear-gradient(180deg, #d99a63, #9a5f30); color:#241305;}
.pod-name{margin-top:8px; font-weight:700; font-size:13px;}
.pod-score{color:var(--ink-dim); font-size:12px;}

.reel{height:60px; overflow:hidden; position:relative; background:var(--panel-2); border:1px solid var(--line);
  border-radius:14px; margin:16px 0;}
.reel-track{display:flex; flex-direction:column; transition:transform 3.2s cubic-bezier(.15,.85,.25,1);}
.reel-item{height:60px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; font-family:'Vazirmatn';}
.reel::before, .reel::after{content:""; position:absolute; inset-inline:0; height:18px; z-index:2; pointer-events:none;}
.reel::before{top:0; background:linear-gradient(180deg, var(--panel-2), transparent);}
.reel::after{bottom:0; background:linear-gradient(0deg, var(--panel-2), transparent);}

.cat-pills{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:12px 0;}
.cat-pill{padding:8px 16px; border-radius:999px; border:2px solid var(--line); font-weight:700; font-size:13px;}
.cat-pill.active{border-color:var(--c); color:var(--c); background:rgba(255,200,87,.08);}

.chip-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.chip{padding:8px 13px; border-radius:11px; background:var(--panel-2); border:1px solid var(--line); font-weight:600; font-size:12px;}
.chip.ok{background:rgba(61,220,151,.18); border-color:var(--d); color:var(--d);}
.chip.bad{background:rgba(255,90,95,.14); border-color:var(--a); color:#ff9b9e;}
.chip.wait{opacity:.5;}

.banner{background:rgba(255,200,87,.1); border:1px solid var(--c); color:var(--c); border-radius:12px;
  padding:12px 16px; font-size:13px; margin-bottom:16px; line-height:1.8;}