:root{--o:#ff7a1a;--o2:#ffb067;--b:#1e90ff;--b2:#6cc4ff;--bg:#060b17;--p:#0e1628;--p2:#16213a;--t:#eaf1ff;--m:#7f90ad;--g:#38d66b;--r:#ff4d4d}
*{box-sizing:border-box;margin:0}
body{min-height:100vh;color:var(--t);font-family:Vazirmatn,sans-serif;background:var(--bg);padding:20px;position:relative}
header,main{position:relative;z-index:1}
.cut{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
header{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto 18px}
.logo{font:400 34px Lalezar;background:linear-gradient(90deg,var(--b2),var(--o));-webkit-background-clip:text;background-clip:text;color:transparent}.logo small{display:block;font:400 13px Vazirmatn;color:var(--m);-webkit-text-fill-color:var(--m)}
.ctrl{display:flex;gap:8px;align-items:center}
.auto{font:400 14px Lalezar;color:var(--g);padding:4px 10px;border:1px solid var(--g);cursor:pointer}
.ctrl input{width:100px;background:var(--p);border:2px solid var(--o);color:var(--o);font:400 28px Lalezar;text-align:center;padding:4px;outline:none}
.ctrl button{background:linear-gradient(90deg,var(--b),var(--o));border:0;color:#fff;font:400 18px Lalezar;padding:12px 22px;cursor:pointer}
.ctrl button:hover{filter:brightness(1.15)}
main{max-width:1100px;margin:auto}
.card{position:relative;background:linear-gradient(180deg,var(--p2),var(--p));border:1px solid #ffffff14;padding:26px 20px 30px}
.card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--b),var(--o))}
.top{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tag{font:400 17px Lalezar;padding:5px 16px;background:#ffffff10;border-right:3px solid var(--o)}
.tag.live{border-color:var(--g);color:var(--g)}.tag.wait{border-color:var(--m);color:var(--m)}
.num{text-align:center;font:400 clamp(60px,12vw,110px)/1 Lalezar;color:var(--o);text-shadow:0 0 40px #ff7a1a66}
.num small{display:block;font-size:16px;color:var(--b2)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:26px 0 8px}
.pl{--c:var(--b);--c2:var(--b2);text-align:center;padding:24px 8px;background:#0007;border:1px solid #ffffff12;border-top:4px solid var(--c);animation:in .6s both}
.pl.org{--c:var(--o);--c2:var(--o2);animation-delay:.15s}
.av{width:clamp(120px,20vw,200px);aspect-ratio:1;margin:0 auto 14px;background:linear-gradient(135deg,var(--c2),var(--c));padding:4px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.av .in{position:relative;width:100%;height:100%;display:grid;place-items:center;background:#0a1020;font:900 56px Lalezar;color:var(--c2);clip-path:inherit;overflow:hidden}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl h2{font-size:clamp(20px,3.4vw,34px);font-weight:900}
.pl .s{font:400 clamp(54px,9vw,96px)/1 Lalezar;margin-top:8px;color:var(--c2)}
.pl.win{box-shadow:0 0 40px -6px var(--c) inset,0 0 0 1px var(--c)}.pl.win .s{color:#fff;text-shadow:0 0 24px var(--c)}
.v{font:400 clamp(34px,6vw,60px) Lalezar;background:linear-gradient(135deg,var(--b2),var(--o));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes in{from{opacity:0;transform:translateY(20px)}}
.st{margin-top:26px}.st h3{font:400 18px Lalezar;color:var(--b2);margin-bottom:8px}
table{width:100%;direction:ltr;border-collapse:collapse;font:400 18px Lalezar;text-align:center}
th{color:var(--m);font-size:14px;padding:6px}td{padding:8px 4px;border-top:1px solid #ffffff10}
td.n,th.n{text-align:left;font-family:Vazirmatn;font-size:16px;font-weight:700;unicode-bidi:plaintext}
td.pts{color:var(--o2);font-size:22px}
tr.hi td{background:#ff7a1a1a;color:var(--o2)}
.grid{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.grid button{background:var(--p);border:1px solid #ffffff18;color:var(--t);font:400 18px Lalezar;padding:8px 0;cursor:pointer}
.grid button:hover,.grid button.on{background:linear-gradient(135deg,var(--b),var(--o));color:#fff}
.grid button.done{border-color:var(--g)}
.msg{text-align:center;color:var(--m);padding:60px 0;font-size:20px}
.note{margin-top:14px;text-align:center;font-size:12px;color:var(--r)}
body.clean header,body.clean .grid,body.clean .note{display:none}
body.clean{background:transparent}
#dbg{display:none;margin-top:16px;padding:12px;background:#000a;border:1px solid var(--o);color:var(--b2);font:12px/1.7 monospace;direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-all}

/* ---------- بک‌گراند متحرک ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(1200px 700px at 50% 0,#0b2a5c 0,#07102a 55%,#040813 100%)}
.bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.bg .o1{width:46vw;height:46vw;left:-10vw;top:-12vw;background:#1e90ff;animation:fl1 18s ease-in-out infinite alternate}
.bg .o2{width:40vw;height:40vw;right:-8vw;top:10vh;background:#ff9a1f;opacity:.38;animation:fl2 22s ease-in-out infinite alternate}
.bg .o3{width:36vw;height:36vw;left:30vw;bottom:-16vw;background:#00d4ff;opacity:.3;animation:fl3 26s ease-in-out infinite alternate}
@keyframes fl1{to{transform:translate(18vw,14vh) scale(1.2)}}
@keyframes fl2{to{transform:translate(-16vw,20vh) scale(.85)}}
@keyframes fl3{to{transform:translate(-20vw,-12vh) scale(1.25)}}
.gridfloor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:55%;background:repeating-linear-gradient(90deg,#6cc4ff22 0 1px,transparent 1px 70px),repeating-linear-gradient(0deg,#6cc4ff22 0 1px,transparent 1px 70px);transform:perspective(500px) rotateX(62deg);transform-origin:50% 100%;animation:gf 3s linear infinite;mask-image:linear-gradient(0deg,#000 20%,transparent 95%);-webkit-mask-image:linear-gradient(0deg,#000 20%,transparent 95%)}
@keyframes gf{to{background-position:0 70px,0 70px}}
.bg canvas{position:absolute;inset:0}
body.clean .bg{display:none}
.card{backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:reduce){.bg i,.gridfloor{animation:none}}