:root{--navy:#0A0F2C;--navy2:#111842;--navy3:#1a2358;--lime:#C6FF3D;--coral:#FF5A36;--white:#fff;--mute:#9aa3c7;--line:rgba(255,255,255,.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--navy);color:#fff;font:500 17px/1.6 Inter,system-ui,Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.H{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95;margin:0}
.lime{color:var(--lime)}.coral{color:var(--coral)}
.preview{background:var(--lime);color:var(--navy);text-align:center;font-size:12px;font-weight:800;padding:5px 12px}
.tag{display:inline-block;font-weight:900;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);background:var(--lime);padding:6px 12px;border-radius:6px}
.tag.c{background:var(--coral);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:900 18px Inter,sans-serif;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:0;cursor:pointer;border-radius:14px;padding:18px 28px;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn.go{background:var(--lime);color:var(--navy);box-shadow:0 0 0 0 rgba(198,255,61,.6),0 14px 40px rgba(198,255,61,.3);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(198,255,61,.55),0 14px 40px rgba(198,255,61,.3)}70%{box-shadow:0 0 0 18px rgba(198,255,61,0),0 14px 40px rgba(198,255,61,.3)}100%{box-shadow:0 0 0 0 rgba(198,255,61,0),0 14px 40px rgba(198,255,61,.3)}}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{animation:none!important}}

/* top bar */
.top{position:sticky;top:0;z-index:40;background:rgba(10,15,44,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;text-decoration:none}
.logo i{width:34px;height:34px;border-radius:9px;background:var(--lime);color:var(--navy);display:grid;place-items:center;font:400 22px Anton,sans-serif;font-style:normal}
.logo small{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--lime)}
.top .btn{padding:10px 16px;font-size:14px;border-radius:10px;animation:none}

/* hero */
.hero{position:relative;padding:60px 0 90px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 380px at 15% 10%,rgba(198,255,61,.22),transparent 60%),
  radial-gradient(700px 420px at 90% 20%,rgba(255,90,54,.25),transparent 60%),
  url('img/hero-wide.jpg?v=1') 70% center/cover;opacity:1}
@media (max-width:900px){.hero:before{background:url('img/hero-phone.jpg?v=1') center bottom/cover}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,44,.92) 0,rgba(10,15,44,.55) 50%,rgba(10,15,44,.35) 100%),linear-gradient(180deg,transparent 70%,var(--navy))}
@media (max-width:900px){.hero:after{background:linear-gradient(180deg,rgba(10,15,44,.7) 0,rgba(10,15,44,.82) 40%,rgba(10,15,44,.35) 72%,rgba(10,15,44,.85) 100%)}}
.beams{position:absolute;inset:0;pointer-events:none;z-index:1;background:
  conic-gradient(from 200deg at 12% -10%,transparent 0 8deg,rgba(198,255,61,.10) 10deg,transparent 14deg 360deg),
  conic-gradient(from 140deg at 88% -10%,transparent 0 8deg,rgba(255,90,54,.12) 10deg,transparent 14deg 360deg);animation:sway 7s ease-in-out infinite alternate}
@keyframes sway{to{transform:translateX(30px)}}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(58px,9.5vw,128px);margin:18px 0 6px}
.hero h1 .line2{display:block;color:var(--lime);text-shadow:0 0 40px rgba(198,255,61,.45)}
.hero .sub{font:400 clamp(24px,3vw,34px)/1.1 Anton,sans-serif;text-transform:uppercase;color:#dfe3f5;margin:14px 0 0;letter-spacing:.01em}
.hero .sub b{color:var(--coral);font-weight:400}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:30px 0 26px}
.steps div{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px}
.steps b{display:flex;align-items:center;gap:8px;font:400 22px Anton,sans-serif;text-transform:uppercase}
.steps b span{width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--navy);display:grid;place-items:center;font:900 15px Inter}
.steps p{margin:4px 0 0;font-size:14px;color:var(--mute);line-height:1.4}
.free{font-size:14px;color:var(--mute);margin-left:14px}
.cd{display:flex;gap:8px;margin-top:26px;align-items:center;flex-wrap:wrap}
.cd .l{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-right:6px}
.flip{background:#05081c;border:1px solid var(--line);border-radius:10px;padding:8px 10px;text-align:center;min-width:62px;box-shadow:inset 0 -18px 0 rgba(255,255,255,.03)}
.flip b{display:block;font:400 30px/1 Anton,sans-serif;color:var(--lime)}
.flip span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* phone mock: the player's league page */
.phone{width:100%;max-width:350px;margin:0 auto;background:#000;border-radius:44px;padding:12px;box-shadow:0 0 0 2px #2a3366,0 50px 100px rgba(0,0,0,.6),0 0 80px rgba(198,255,61,.15);transform:rotate(3deg)}
.scr{background:var(--navy2);border-radius:34px;overflow:hidden}
.scr-top{background:linear-gradient(135deg,var(--coral),#ff8a3d);padding:18px 18px 16px}
.scr-top small{font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.scr-top .H{font-size:30px;margin-top:2px}
.scr-top .me{display:flex;justify-content:space-between;margin-top:10px;font-weight:800;font-size:13px}
.scr-top .me b{font:400 22px Anton,sans-serif}
.scr-body{padding:14px}
.scr-body .q{font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin:0 0 8px}
.rn{display:flex;align-items:center;gap:10px;background:var(--navy3);border:2px solid transparent;border-radius:12px;padding:9px 10px;margin-bottom:7px;cursor:pointer;transition:border-color .15s,transform .15s}
.rn:hover{transform:translateX(3px)}
.rn.on{border-color:var(--lime);background:#20307a}
.rn .silk{width:30px;height:45px;flex:none;background:url('img/silks.webp?v=1') 0 0/600% 200% no-repeat}
.rn b{flex:1;font-size:14.5px}
.rn em{font-style:normal;font:400 17px Anton,sans-serif;color:var(--lime)}
.lockb{width:100%;margin-top:6px;padding:13px;font-size:15px;border-radius:11px;background:var(--lime);color:var(--navy);animation:none}
.lockb[disabled]{opacity:.45;cursor:default;transform:none}
.locked{display:none;text-align:center;padding:18px 6px 8px}
.locked .H{font-size:32px;color:var(--lime);margin:8px 0}
.locked p{font-size:13.5px;color:var(--mute);margin:0}
.scr-foot{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:10px 0 14px;font-size:11px;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.scr-foot .a{color:var(--lime)}

/* strip */
.strip{background:var(--lime);color:var(--navy);overflow:hidden;white-space:nowrap;padding:14px 0;transform:rotate(-1.5deg);margin:-20px 0 0;position:relative;z-index:3}
.strip div{display:inline-block;animation:tick 30s linear infinite;font:400 26px Anton,sans-serif;text-transform:uppercase}
.strip span{margin:0 26px}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:100px 0}
.sec-h{text-align:center;max-width:760px;margin:0 auto 46px}
.sec-h .H{font-size:clamp(44px,6.4vw,80px);margin-top:14px}
.sec-h p{color:var(--mute);font-size:18px}

/* your page explained */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.how div{background:var(--navy2);border:1px solid var(--line);border-radius:20px;padding:24px;position:relative;overflow:hidden}
.how div:after{content:attr(data-n);position:absolute;right:-6px;bottom:-30px;font:400 130px/1 Anton,sans-serif;color:rgba(198,255,61,.07)}
.how .ic{font-size:34px}
.how h3{font:400 26px/1 Anton,sans-serif;text-transform:uppercase;margin:12px 0 8px}
.how p{margin:0;color:var(--mute);font-size:15.5px}

/* rounds */
.rounds{padding-top:40px}
.tok{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 12px}
.tk{text-align:center}
.tk .c{position:relative;width:100%;max-width:120px;aspect-ratio:1;margin:0 auto;background:url('img/round-token.webp?v=1') center/contain no-repeat;display:grid;place-items:center;font:400 clamp(28px,4vw,42px)/1 Anton,sans-serif;color:var(--lime);transition:transform .3s}
.tk:hover .c{transform:rotate(-12deg) scale(1.06)}
.tk b{display:block;font-size:14px;margin-top:8px;line-height:1.25}
.tk small{color:var(--mute);font-size:12.5px}
@media (max-width:900px){.tok{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.tok{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* scoring */
.scoring{background:linear-gradient(180deg,var(--navy),#070b22)}
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;margin:0 auto}
.pts div{border-radius:22px;padding:28px 24px;text-align:center;background:var(--navy2);border:1px solid var(--line)}
.pts .H{font-size:84px;color:var(--lime)}
.pts .H.c{color:var(--coral)}
.pts b{display:block;font-size:18px;margin-top:8px}
.pts p{margin:4px 0 0;color:var(--mute);font-size:15px}
.dare{max-width:980px;margin:22px auto 0;background:linear-gradient(90deg,rgba(255,90,54,.18),rgba(198,255,61,.12));border:1px solid var(--line);border-radius:18px;padding:18px 22px;text-align:center;font-weight:700}
.dare b{color:var(--lime)}

/* scoreboard */
.board{max-width:900px;margin:0 auto;background:#05081c;border-radius:22px;padding:14px;box-shadow:0 0 0 2px #1d2560,0 40px 90px rgba(0,0,0,.5);background-image:url('img/scoreboard.jpg?v=1');background-size:cover;background-position:center}
.board-in{background:rgba(5,8,28,.88);border-radius:14px;overflow:hidden}
.tabs{display:flex;gap:6px;padding:10px}
.tabs button{flex:1;background:var(--navy3);border:0;color:var(--mute);font:900 13px Inter;letter-spacing:.08em;text-transform:uppercase;padding:12px;border-radius:10px;cursor:pointer}
.tabs button.on{background:var(--lime);color:var(--navy)}
.row{display:grid;grid-template-columns:54px 44px minmax(0,1fr) 76px 56px;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.row .p{font:400 26px Anton,sans-serif;color:var(--mute);text-align:center;background:#0d1338;border-radius:8px;padding:2px 0}
.row:nth-child(1) .p{color:var(--navy);background:var(--lime)}
.row .av{width:44px;height:44px;border-radius:50%;background:url('img/avatars.webp?v=1') 0 0/400% 200% no-repeat;display:grid;place-items:center;font:900 11px Inter;color:var(--navy)}
.row .av.h{background:#2a1408 url('img/rival-horse.webp?v=1') center 15%/170% no-repeat}
.row .av.y{background:var(--lime)}
.row .n{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .n small{display:block;font-weight:600;color:var(--mute);font-size:12.5px}
.row .s{font:400 30px Anton,sans-serif;text-align:right}
.row .m{text-align:right;font-weight:900;font-size:13px}
.up{color:var(--lime)}.dn{color:var(--coral)}
.row.bf{background:linear-gradient(90deg,rgba(255,90,54,.22),transparent)}
.row.bf .n{color:var(--coral)}
.row.you{background:linear-gradient(90deg,rgba(198,255,61,.18),transparent)}
.board-note{font-size:12px;color:var(--mute);padding:10px 14px}

/* rival */
.rival .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:center}
.rival-pic{aspect-ratio:1;border-radius:30px;background:radial-gradient(circle at 50% 40%,rgba(255,90,54,.4),transparent 65%),url('img/rival-horse.webp?v=1') center/contain no-repeat;animation:bob 3.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(-1.5deg)}}
.rival .H{font-size:clamp(46px,6vw,76px)}
.rival p{color:var(--mute);font-size:18px}
.rival ul{list-style:none;padding:0;margin:20px 0 0}
.rival li{padding:10px 0 10px 34px;position:relative;font-weight:700}
.rival li:before{content:"✕";position:absolute;left:0;top:9px;width:24px;height:24px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:12px}

/* mates */
.mates{background:var(--coral);color:#fff;position:relative;overflow:hidden}
.mates:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,90,54,.97) 0,rgba(255,90,54,.9) 45%,rgba(255,90,54,.35)),url('img/mates.jpg?v=1') right center/cover}
@media (max-width:900px){.mates:before{background:linear-gradient(180deg,rgba(255,90,54,.96),rgba(255,90,54,.88)),url('img/mates.jpg?v=1') center/cover}}
.matesimg{width:100%;border-radius:22px;margin-top:26px;box-shadow:0 30px 60px rgba(0,0,0,.35);display:none}
@media (max-width:900px){.matesimg{display:block}}
.mates .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.mates .H{font-size:clamp(46px,6.4vw,82px)}
.mates p{font-size:18px;color:#ffe9e3}
.share{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.share a{text-decoration:none;font-weight:900;padding:14px 18px;border-radius:12px;background:var(--navy);color:#fff}
.share a.w{background:#25d366}
.chat{background:var(--navy);border-radius:26px;padding:20px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.chat .t{font:400 24px Anton,sans-serif;text-transform:uppercase;color:var(--lime)}
.chat .s{font-size:12.5px;color:var(--mute);margin-bottom:12px}
.msg{background:var(--navy3);border-radius:16px 16px 16px 4px;padding:9px 12px;font-size:14.5px;margin:0 0 8px;max-width:86%}
.msg.me{background:var(--lime);color:var(--navy);margin-left:auto;border-radius:16px 16px 4px 16px}
.msg b{display:block;font-size:11px;opacity:.7}

/* prizes */
.prz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.prz>div{background:var(--navy2);border:1px solid var(--line);border-radius:24px;padding:30px 24px;text-align:center}
.prz .big{background:linear-gradient(180deg,#1d2a7a,var(--navy2));box-shadow:0 0 0 3px var(--lime),0 30px 80px rgba(198,255,61,.18);transform:translateY(-12px)}
.prz .pic{height:190px;display:grid;place-items:center}
.prz .pic img{max-height:190px;max-width:100%;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));transition:transform .4s}
.prz div:hover .pic img{transform:scale(1.08) rotate(-3deg)}
.prz .big .pic{height:230px}.prz .big .pic img{max-height:230px}
.prz .H{font-size:34px;margin:22px 0 6px}
.prz p{color:var(--mute);margin:0}

/* join */
.join{background:url('img/finish.jpg?v=1') center/cover;position:relative}
.join:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 360px at 50% 30%,rgba(10,15,44,.6),rgba(10,15,44,.9))}
.join .wrap{position:relative}
.jbox{max-width:620px;margin:0 auto;text-align:center}
.jbox .H{font-size:clamp(52px,8vw,96px)}
.jbox input{width:100%;font:600 18px Inter,sans-serif;padding:17px 18px;border-radius:14px;border:2px solid #2a3366;background:#0d1338;color:#fff;margin:7px 0}
.jbox input:focus{outline:none;border-color:var(--lime)}
.jbox .btn{width:100%;margin-top:10px}
.jbox .fine{font-size:12.5px;color:var(--mute);margin-top:14px}
.done{display:none}
.done .e{font-size:70px}
.ups{margin-top:22px;background:#000;border-radius:18px;padding:20px;text-align:left;box-shadow:0 0 0 2px var(--coral)}
.ups b{color:var(--coral)}

/* faq */
.faq{max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:800;font-size:18px;list-style:none}
.faq summary:after{content:"+";float:right;color:var(--lime);font-weight:900}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--mute);margin:8px 0 0}
footer{border-top:1px solid var(--line);padding:30px 0 40px;font-size:13px;color:var(--mute)}

@media (max-width:900px){
  .hero .wrap,.rival .wrap,.mates .wrap{grid-template-columns:minmax(0,1fr)}
  .phone{transform:none;margin-top:10px}
  .how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pts,.prz{grid-template-columns:minmax(0,1fr)}
  .prz .big{transform:none}
  .rival-pic{max-width:320px;width:100%;margin:0 auto}
}
@media (max-width:560px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .how{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:42px 36px minmax(0,1fr) 54px 40px;gap:8px;padding:9px 10px}
  .row .av{width:36px;height:36px}
  .row .s{font-size:24px}
  .row .n{white-space:normal;line-height:1.2;font-size:15px}
  .free{display:block;margin:12px 0 0}
}