:root{--bg:#0A0A0C;--bg2:#0D0D12;--panel:#121216;--panel2:#16161B;--line:#24242B;--line2:#2E2E36;--text:#fff;--t2:#B0B0B8;--t3:#6E6E78;--gold:#E8C47E;--gold2:#F3D99E;--goldD:#8A6A2E;--yes:#E8C47E;--no:#B0B0B8;--win:#2EBD85;--lose:#E5484D}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase}
.g{color:var(--gold)}.t3{color:var(--t3)}
.br{color:var(--gold);font-weight:inherit;white-space:nowrap}.br em{font-style:normal}
.br i{font-style:normal;color:var(--goldD);font-weight:300}
h1,h2{margin:0;letter-spacing:-.025em}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:999px;font:600 15px Inter;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn.sm{height:38px;padding:0 18px;font-size:14px}
.gold{background:var(--gold);color:#15120B;box-shadow:0 0 24px #E8C47E40}.gold:hover{box-shadow:0 0 34px #E8C47E70;transform:translateY(-1px)}
.out{border:1px solid #E8C47E88;color:#F1E3C2;background:transparent}.out:hover{background:#E8C47E12}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* шапка */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 48px;background:#0A0A0Cd9;backdrop-filter:blur(10px);border-bottom:1px solid #16161B}
.brand{display:flex;align-items:center;gap:12px}.brand .mark{width:38px;height:38px}
.brand b{font:700 22px Inter;color:var(--gold);letter-spacing:-.01em}.brand i{width:1px;height:26px;background:#3A3A44}.brand span{font-size:11px;color:var(--t2);letter-spacing:.34em}
.top nav{display:flex;gap:28px}.top nav a{font:500 14px Inter;color:#D8D8DE}.top nav a:hover{color:var(--gold)}
.top-r{display:flex;align-items:center;gap:14px}
.season{display:flex;align-items:center;gap:6px;border:1px solid #3A3222;background:#17140E;border-radius:8px;padding:7px 11px;font:500 12px Inter;color:var(--t2)}.season b{color:var(--gold)}
.season em{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}

/* hero */
main{overflow-x:clip}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:20px;max-width:1360px;margin:0 auto;padding:70px 48px 40px;min-height:640px}
.hero::before{content:"";position:absolute;inset:-80px -200px auto;height:700px;background:radial-gradient(ellipse 50% 45% at 75% 10%,#ffffff12,transparent 70%),radial-gradient(ellipse 40% 40% at 70% 70%,#E8C47E10,transparent 70%);pointer-events:none;z-index:-1}
.eyebrow{font-size:12px;color:var(--t3)}
h1{margin-top:20px;font:800 clamp(46px,6vw,78px)/1.03 Inter;letter-spacing:-.035em}
h1 .br{font-weight:500}
.lede{margin-top:24px;max-width:520px;font:500 18px/1.6 Inter;color:#D8D8DE}
.rot em{display:inline-block;transition:opacity .35s,transform .35s}.rot em.out-anim{opacity:0;transform:translateY(-6px)}
.cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.next{margin-top:38px;display:inline-flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:12px;padding:12px 18px;background:#0E0E12}
.next span{font:500 11px Inter;color:var(--t3)}.next b{font:600 14px Inter}.next b .y{color:var(--gold)}
.hero-r{position:relative;min-width:0}#ring{width:100%;aspect-ratio:760/520}.ring-svg{width:100%;height:100%;display:block}
.ring-cap{text-align:center;font-size:10px;color:var(--t3);margin-top:-12px}
.rl-name{font:500 14px Inter;fill:#fff}.rl-tag{font:600 9px 'JetBrains Mono';fill:var(--gold);letter-spacing:1px}.rl-val{font:600 12.5px 'JetBrains Mono';fill:var(--gold2)}

/* полоса статистики */
.strip{display:flex;gap:44px;padding:14px 48px;border-top:1px solid #16161B;border-bottom:1px solid #16161B;overflow-x:auto;white-space:nowrap;font-size:11px;color:var(--t3);scrollbar-width:none}
.strip b{color:#fff;letter-spacing:.04em;margin-left:8px}

/* доска */
.board{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;max-width:1360px;margin:0 auto;padding:64px 48px 30px;align-items:start}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
h2{margin-top:8px;font:800 40px Inter}
.tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#0E0E12}
.tabs button{border:0;background:none;color:var(--t2);font:600 13px Inter;padding:8px 14px;border-radius:999px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--gold);color:#15120B}
.cards{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.loading{grid-column:1/-1;padding:60px;text-align:center;color:var(--t3);font-size:12px;border:1px dashed var(--line);border-radius:14px}
.card{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,#141418,#101013);border-radius:14px;padding:16px 16px 14px;cursor:pointer;transition:border-color .15s,transform .15s}
.card:hover{border-color:#E8C47E55;transform:translateY(-2px)}.card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 0 30px #E8C47E1f}
.card.closed{opacity:.55}
.c-top{display:flex;justify-content:space-between;align-items:center;gap:4px 10px;flex-wrap:wrap;font-size:10px;color:var(--goldD)}.c-top .st{margin-left:auto;white-space:nowrap}
.c-top .live{color:var(--gold)}.c-top .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:6px;vertical-align:1px;animation:pulse 1.6s infinite}
.c-q{margin-top:10px;font:600 16px/1.35 Inter;color:#F1E3C2;min-height:43px}
.c-nums{margin-top:12px;display:flex;justify-content:space-between;font:500 12px 'JetBrains Mono';color:var(--t2)}.c-nums b{color:#fff}
.c-bar{margin-top:10px;height:4px;background:#24201A;border-radius:3px;overflow:hidden;position:relative}
.c-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--goldD),var(--gold));border-radius:3px;transition:width .6s}
.c-time{margin-top:6px;height:2px;background:#1B1B21;border-radius:2px;overflow:hidden}.c-time i{display:block;height:100%;background:#3A3A44}
.c-pct{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.c-pct b{font:700 26px Inter;color:var(--gold)}.c-pct span{font:500 11px Inter;color:var(--t3)}
.c-btns{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c-btns button{height:40px;border-radius:10px;font:600 13px Inter;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:0 12px}
.yes{background:#E8C47E1c;border:1px solid #E8C47E66;color:var(--gold2)}.yes:hover,.yes.on{background:var(--gold);color:#15120B}
.no{background:#ffffff08;border:1px solid #ffffff2a;color:#D8D8DE}.no:hover,.no.on{background:#D8D8DE;color:#15120B}
.fine{margin-top:16px;font-size:12px;color:var(--t3)}

/* купон */
.slip{position:sticky;top:84px;display:grid;gap:14px}
.panel{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:18px}
.p-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.p-head b{font:700 15px Inter}.p-head .mono{font-size:10px}
.field{display:flex;gap:8px;margin-top:10px}
.field input{flex:1;min-width:0;height:44px;border-radius:10px;border:1px solid var(--line2);background:#0C0C10;color:#fff;padding:0 14px;font:500 15px Inter}
.field input:focus{outline:none;border-color:var(--gold)}
.me{display:flex;justify-content:space-between;align-items:center}.me .n{font:700 16px Inter}.me .bank{font:700 24px 'JetBrains Mono';color:var(--gold)}
.me-sub{margin-top:6px;display:flex;gap:14px;font-size:12px;color:var(--t3)}
.t-q{font:600 15px/1.35 Inter;color:#F1E3C2}.t-side{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.chips button{border:1px solid var(--line2);background:#0C0C10;color:var(--t2);border-radius:999px;padding:5px 11px;font:600 12px 'JetBrains Mono';cursor:pointer}.chips button:hover{border-color:var(--gold);color:var(--gold)}
.payout{margin-top:12px;display:flex;justify-content:space-between;font-size:13px;color:var(--t2)}.payout b{color:var(--gold);font:700 15px 'JetBrains Mono'}
.call{margin-top:14px;width:100%}
.msg{margin-top:10px;font-size:13px;min-height:18px}.msg.err{color:var(--lose)}.msg.ok{color:var(--win)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;background:#0E0E12}
.list .row{display:flex;justify-content:space-between;gap:8px}.list .q{color:#D8D8DE}.list .s{font:600 12px 'JetBrains Mono'}
.won{color:var(--win)}.lost{color:var(--t3)}.lead{color:var(--gold)}.behind{color:var(--t2)}
.empty{color:var(--t3);font-size:13px}

/* лидеры и лента */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1360px;margin:0 auto;padding:30px 48px}
.lb{list-style:none;margin:0;padding:0;counter-reset:r}
.lb li{counter-increment:r;display:grid;grid-template-columns:34px 1fr auto;align-items:center;padding:10px 4px;border-top:1px solid #1B1B21;font-size:14px}
.lb li::before{content:counter(r,decimal-leading-zero);font:600 11px 'JetBrains Mono';color:var(--goldD)}
.lb li:nth-child(-n+3)::before{color:var(--gold)}.lb .pts{font:600 14px 'JetBrains Mono';color:var(--gold)}
.lb li.you{background:#E8C47E0d}
.feed{list-style:none;margin:0;padding:0}.feed li{display:flex;justify-content:space-between;gap:12px;padding:10px 4px;border-top:1px solid #1B1B21;font-size:13.5px;color:#D8D8DE}
.feed li span{color:var(--t3);font:500 11px 'JetBrains Mono';white-space:nowrap}.feed li.win{color:#F1E3C2}

/* как это работает */
.how{max-width:1360px;margin:0 auto;padding:70px 48px}
.steps{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.steps div{border:1px solid var(--line);border-radius:14px;padding:20px;background:linear-gradient(180deg,#131317,#0E0E11)}
.steps span{font-size:11px;color:var(--gold)}.steps b{display:block;margin-top:10px;font:700 17px Inter}.steps p{margin:8px 0 0;font-size:14px;color:var(--t2)}
.fineprint{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid #1B1B21;padding-top:24px}
.fineprint b{font:600 14px Inter;color:#F1E3C2}.fineprint p{margin:6px 0 0;font-size:13.5px;color:var(--t3)}

.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:30px 48px 40px;border-top:1px solid #16161B;max-width:1360px;margin:30px auto 0}
.foot .brand .mark{width:30px;height:30px}.foot .brand b{font-size:18px}
.foot .links{display:flex;gap:22px;font-size:13px;color:var(--t3)}.foot .links a{color:var(--gold)}
.ca{font-size:11px;color:var(--t2);cursor:pointer}

@media (max-width:1080px){.board{grid-template-columns:1fr}.slip{position:static}.steps{grid-template-columns:1fr 1fr}.fineprint{grid-template-columns:1fr}}
@media (max-width:820px){
  .top{padding:12px 16px}.top nav,.season{display:none}.brand span,.brand i{display:none}
  .hero{grid-template-columns:1fr;padding:36px 16px 20px;min-height:0}.hero-r{order:-1;margin:0 -16px}
  .strip{padding:12px 16px;gap:28px}.board,.duo,.how{padding-left:16px;padding-right:16px}.duo{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}.foot{padding:24px 16px 36px}h2{font-size:32px}.cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
