*,*::before,*::after{box-sizing:border-box}
:root{
  --void:#09060F;
  --void2:#0D0918;
  --panel:#150F26;
  --panel2:#1B1332;
  --raise:#241A3F;
  --line:#2B2044;
  --line2:#3B2C5E;
  --text:#F1ECFB;
  --muted:#9C92BC;
  --dim:#6E6494;
  --red:#FF2E55;
  --redSoft:#FF8DA0;
  --redGlow:rgba(255,46,85,.30);
  --blue:#2FA6FF;
  --blueSoft:#93D2FF;
  --blueGlow:rgba(47,166,255,.30);
  --violet:#A855F7;
  --violetSoft:#D9B4FF;
  --violetGlow:rgba(168,85,247,.28);
  --amber:#FFB020;
  --ok:#3DD68C;
  --shell:min(880px,100%);
  --r:14px;
  --fx:.22s cubic-bezier(.2,.7,.3,1);
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:Vazirmatn,"Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 42% at 88% -6%,rgba(255,46,85,.22),transparent 62%),
    radial-gradient(58% 42% at 12% -6%,rgba(47,166,255,.22),transparent 62%),
    radial-gradient(80% 55% at 50% 108%,rgba(168,85,247,.14),transparent 70%),
    linear-gradient(180deg,var(--void2),var(--void) 55%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 78%);
  opacity:.16;
}
#app{width:var(--shell);margin:0 auto;padding:26px 16px 96px;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{margin:0;text-wrap:balance}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled{cursor:not-allowed}
body.busy{cursor:progress}
body.busy #app{opacity:.6;pointer-events:none}
:focus-visible{outline:2px solid var(--violetSoft);outline-offset:3px;border-radius:6px}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
.hero{position:relative;text-align:center;padding:8px 0 4px}
.hero .kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.66rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:var(--dim);padding-inline-start:.34em;
}
.hero .kicker i{display:block;width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--line2))}
.hero h1{
  font-family:Lalezar,Vazirmatn,cursive;font-weight:400;
  font-size:clamp(2.9rem,13vw,5.2rem);line-height:.98;letter-spacing:.01em;
  margin:.12em 0 .1em;
  background:linear-gradient(100deg,var(--red) 4%,#FFFFFF 46%,#FFFFFF 54%,var(--blue) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(255,46,85,.22)) drop-shadow(0 6px 26px rgba(47,166,255,.22));
}
.hero .sub{
  font-size:.7rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted);padding-inline-start:.42em;direction:ltr;
}
.meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.86rem;font-weight:500;color:var(--text);
}
.chip svg{width:15px;height:15px;flex:none;color:var(--dim)}
.chip b{font-weight:700}
.chip.on{border-color:color-mix(in srgb,var(--violet) 55%,var(--line));background:linear-gradient(180deg,rgba(168,85,247,.18),rgba(168,85,247,.05));color:var(--violetSoft)}
.chip.warn{border-color:color-mix(in srgb,var(--amber) 55%,var(--line));background:linear-gradient(180deg,rgba(255,176,32,.16),rgba(255,176,32,.04));color:var(--amber)}

/* ---------- tally ---------- */
.tally{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;
}
.tally .big{font-family:Lalezar,Vazirmatn,cursive;font-size:1.5rem;line-height:1;color:var(--text)}
.tally .big small{font-size:.9rem;color:var(--dim)}
.tally .lbl{font-size:.82rem;color:var(--muted);flex:1;display:flex;flex-direction:column;line-height:1.4}
.tally .lbl small{font-size:.75rem;color:var(--dim)}
.bar{position:relative;height:6px;border-radius:99px;background:var(--raise);overflow:hidden;flex:1.4;min-width:80px}
.bar i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--violet),var(--red));transition:inline-size var(--fx)}

/* ---------- board ---------- */
.board{display:grid;gap:14px}
@media (min-width:760px){
  .board{grid-template-columns:1fr auto 1fr;align-items:start}
  .vs{align-self:center}
}
.team{
  position:relative;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.team::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;
  background:linear-gradient(180deg,var(--f),transparent 85%);
}
.team.full::before{box-shadow:0 0 18px 2px var(--fg)}
.team.a{--f:var(--red);--fs:var(--redSoft);--fg:var(--redGlow)}
.team.b{--f:var(--blue);--fs:var(--blueSoft);--fg:var(--blueGlow)}
.team.r{--f:var(--violet);--fs:var(--violetSoft);--fg:var(--violetGlow)}
.thead{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:linear-gradient(270deg,color-mix(in srgb,var(--f) 22%,transparent),transparent 74%);
  border-block-end:1px solid var(--line);
}
.crest{
  inline-size:34px;block-size:34px;flex:none;display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--f) 42%,transparent),transparent);
  border:0;color:var(--fs);
}
.crest svg{inline-size:17px;block-size:17px}
.tname{display:flex;flex-direction:column;line-height:1.12;flex:1;min-inline-size:0}
.tname .latin{
  font-size:.94rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fs);padding-inline-start:.2em;
}
.tname .fa{font-size:.78rem;color:var(--dim);font-weight:500}
.count{
  font-family:Lalezar,Vazirmatn,cursive;font-size:1.15rem;color:var(--fs);
  background:color-mix(in srgb,var(--f) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--f) 34%,transparent);
  border-radius:99px;padding:1px 11px;line-height:1.5;flex:none;
}
.slots{display:flex;flex-direction:column;padding:8px;gap:6px}

.slot{
  display:flex;align-items:center;gap:11px;inline-size:100%;text-align:start;
  padding:10px 11px;border-radius:10px;border:1px solid transparent;
  transition:background var(--fx),border-color var(--fx),transform var(--fx);
}
.num{
  inline-size:23px;block-size:23px;flex:none;display:grid;place-items:center;
  border-radius:7px;background:var(--raise);color:var(--dim);
  font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.who{flex:1;min-inline-size:0;display:flex;flex-direction:column;line-height:1.35}
.nm{font-weight:700;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane{font-size:.74rem;color:var(--dim);font-weight:500}

.slot.filled{background:var(--raise);border-color:var(--line)}
.slot.filled .num{background:color-mix(in srgb,var(--f) 26%,transparent);color:var(--fs)}
.slot.mine{border-color:color-mix(in srgb,var(--f) 62%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--f) 26%,transparent) inset}
.you{
  font-size:.64rem;font-weight:700;letter-spacing:.08em;flex:none;
  color:var(--fs);background:color-mix(in srgb,var(--f) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--f) 40%,transparent);
  border-radius:99px;padding:1px 8px;
}
.kick{
  inline-size:27px;block-size:27px;flex:none;display:grid;place-items:center;border-radius:8px;
  color:var(--dim);transition:background var(--fx),color var(--fx);
}
.kick svg{inline-size:14px;block-size:14px}
.kick:hover,.kick:focus-visible{background:rgba(255,46,85,.16);color:var(--red)}

.slot.empty{
  border:1px dashed var(--line2);background:transparent;color:var(--muted);
}
.slot.empty .nm{font-weight:500;color:var(--muted);font-size:.92rem}
.slot.empty:hover,.slot.empty:focus-visible{
  border-color:var(--f);background:color-mix(in srgb,var(--f) 9%,transparent);color:var(--fs);
}
.slot.empty:hover .nm,.slot.empty:focus-visible .nm{color:var(--fs)}
.slot.empty:active{transform:scale(.985)}
.plus{
  inline-size:24px;block-size:24px;flex:none;display:grid;place-items:center;border-radius:7px;
  border:1px solid var(--line2);font-size:1rem;line-height:1;color:var(--muted);
}
.slot.empty:hover .plus,.slot.empty:focus-visible .plus{border-color:var(--f);color:var(--f)}
.slot.shut{border-style:solid;border-color:var(--line);opacity:.5;cursor:default}
.slot.shut:hover{background:transparent;border-color:var(--line)}

.vs{
  display:grid;place-items:center;position:relative;padding:4px 0;
}
.vs span{
  font-family:Lalezar,Vazirmatn,cursive;font-size:1.35rem;letter-spacing:.1em;
  color:var(--muted);background:var(--void);border:1px solid var(--line);
  border-radius:99px;padding:2px 15px;position:relative;z-index:1;
}
.vs::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:50%;block-size:1px;
  background:linear-gradient(90deg,transparent,var(--blueGlow),var(--line2),var(--redGlow),transparent);
}
@media (min-width:760px){
  .vs::before{inset-inline:auto;inset-block:0;inset-inline-start:50%;inline-size:1px;block-size:100%;
    background:linear-gradient(180deg,transparent,var(--line2),transparent)}
}

/* ---------- generic card ---------- */
.card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.card>.head{
  display:flex;align-items:center;gap:10px;padding:13px 16px;border-block-end:1px solid var(--line);
}
.card>.head svg{inline-size:16px;block-size:16px;color:var(--dim);flex:none}
.card>.head h2{font-size:.95rem;font-weight:700;flex:1}
.card>.body{padding:14px 16px}

/* ---------- poll ---------- */
.poll{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{
  position:relative;overflow:hidden;text-align:center;
  border:1px solid var(--line2);border-radius:11px;padding:12px 10px;
  background:var(--raise);transition:border-color var(--fx),transform var(--fx);
}
.opt:hover{border-color:var(--violet)}
.opt:active{transform:scale(.985)}
.opt .fill{position:absolute;inset-block:0;inset-inline-start:0;background:rgba(168,85,247,.16);transition:inline-size var(--fx)}
.opt .t{position:relative;font-weight:900;letter-spacing:.14em;font-size:.9rem;text-transform:uppercase}
.opt .n{position:relative;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.opt.picked{border-color:var(--violet);box-shadow:0 0 0 1px var(--violetGlow) inset}
.opt.picked .t{color:var(--violetSoft)}
.opt.won{border-color:var(--amber)}
.opt.won .t{color:var(--amber)}

/* ---------- rules ---------- */
.rules{display:grid;gap:16px}
@media (min-width:640px){.rules{grid-template-columns:1fr 1fr}}
.rgroup h3{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-block-end:9px;padding-inline-start:.2em;
}
.rgroup ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:r}
.rgroup li{
  position:relative;padding-inline-start:26px;font-size:.9rem;color:var(--muted);counter-increment:r;
}
.rgroup li::before{
  content:counter(r);position:absolute;inset-inline-start:0;inset-block-start:.28em;
  inline-size:18px;block-size:18px;display:grid;place-items:center;border-radius:5px;
  background:var(--raise);color:var(--dim);font-size:.66rem;font-weight:700;
}
.rgroup li b{color:var(--text);font-weight:700}

/* ---------- admin ---------- */
.adm{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.field{display:flex;flex-direction:column;gap:5px;flex:1;min-inline-size:120px}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--dim)}
input[type=text],input[type=password],select{
  inline-size:100%;font:inherit;font-size:.94rem;color:var(--text);
  background:var(--void2);border:1px solid var(--line2);border-radius:9px;
  padding:9px 11px;transition:border-color var(--fx);
}
input::placeholder{color:var(--dim)}
input:focus,select:focus{outline:none;border-color:var(--violet)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:left 14px top 51%,left 9px top 51%;background-size:5px 5px;background-repeat:no-repeat}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line2);border-radius:9px;padding:9px 15px;
  font-size:.9rem;font-weight:700;background:var(--raise);
  transition:border-color var(--fx),background var(--fx),transform var(--fx);
}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:scale(.98)}
.btn svg{inline-size:14px;block-size:14px}
.btn.pri{background:linear-gradient(180deg,#B9309C,#8A2BE0);border-color:transparent;color:#fff}
.btn.pri:hover{filter:brightness(1.1)}
.btn.dng{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.btn.dng:hover{background:rgba(255,46,85,.14)}
.btn.wide{inline-size:100%}
.hint{font-size:.78rem;color:var(--dim);line-height:1.6}
.divide{block-size:1px;background:var(--line);margin:2px 0}

/* ---------- modal ---------- */
.veil{
  position:fixed;inset:0;z-index:50;display:grid;place-items:end center;
  background:rgba(6,4,12,.74);backdrop-filter:blur(5px);
  animation:fade .16s ease both;
}
@media (min-width:600px){.veil{place-items:center}}
.sheet{
  inline-size:min(440px,100%);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:18px 18px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
  animation:rise .22s cubic-bezier(.2,.8,.3,1) both;
  max-block-size:92vh;overflow-y:auto;
}
@media (min-width:600px){.sheet{border-radius:18px;padding-block-end:20px}}
.sheet h3{font-family:Lalezar,Vazirmatn,cursive;font-size:1.35rem;font-weight:400}
.sheet .cap{font-size:.82rem;color:var(--muted);margin-top:-8px}
.lanes{display:flex;flex-wrap:wrap;gap:7px}
.lane-opt{
  border:1px solid var(--line2);border-radius:99px;padding:7px 13px;font-size:.86rem;
  background:var(--void2);color:var(--muted);transition:all var(--fx);
}
.lane-opt:hover{border-color:var(--muted);color:var(--text)}
.lane-opt.on{background:rgba(168,85,247,.18);border-color:var(--violet);color:var(--violetSoft);font-weight:700}
.sheet .acts{display:flex;gap:9px;margin-top:2px}
.sheet .acts .btn{flex:1}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- toast ---------- */
#toast{
  position:fixed;inset-block-end:calc(16px + env(safe-area-inset-bottom));inset-inline:16px;z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
}
.toast{
  max-inline-size:420px;background:var(--raise);border:1px solid var(--line2);
  border-radius:11px;padding:10px 15px;font-size:.88rem;font-weight:500;
  box-shadow:0 12px 40px rgba(0,0,0,.55);animation:rise .2s ease both;
}
.toast.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok)}
.toast.warn{border-color:color-mix(in srgb,var(--amber) 45%,transparent);color:var(--amber)}

/* ---------- footer ---------- */
.foot{text-align:center;font-size:.74rem;color:var(--dim);line-height:1.9}
.foot b{color:var(--muted);font-weight:700}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}