.home-page{min-height:100dvh;background:#030a14;color:var(--white)}
.hero{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;padding:0 var(--safe-x) 34px;background:#04101f url('/assets/arena-crowd.webp') center 54%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(1,7,16,.96) 0%,rgba(2,10,22,.9) 40%,rgba(3,13,30,.48) 100%),linear-gradient(0deg,#030a14 0%,transparent 32%),radial-gradient(ellipse at 76% 42%,rgba(22,120,238,.24),transparent 48%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.045) 6px,transparent 7px)}
.site-header{height:clamp(86px,12vh,132px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(95,165,244,.32)}
.hero-wordmark{width:min(310px,46vw);max-height:82px;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 12px #0008)}
.broadcast-label{display:flex;align-items:center;gap:10px;color:#b7d9ff;font-family:var(--font-score);font-size:clamp(11px,1vw,15px);font-style:italic;font-weight:900;letter-spacing:.2em}
.broadcast-label i,.stage-header i{width:9px;height:9px;border-radius:50%;background:#4da8ff;box-shadow:0 0 12px #1678ee;display:inline-block}
.hero-layout{width:min(1550px,100%);min-height:calc(100svh - clamp(130px,19vh,210px));margin:auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);align-items:center;gap:clamp(28px,5vw,90px);padding:32px 0 60px}
.hero-copy{max-width:790px}
.hero-copy>.eyebrow{color:#81bfff;letter-spacing:.25em}
.hero-copy h1{margin:18px 0 22px;font-family:var(--font-score);font-size:clamp(3.6rem,7.3vw,7.7rem);font-style:italic;font-weight:1000;line-height:.88;letter-spacing:-.045em;text-transform:uppercase;text-shadow:0 4px 25px #0009}
.hero-copy h1 span{color:#87c8ff;text-shadow:0 0 24px #1678ee77}
.intro{max-width:650px;color:#d4e2f3;font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.65}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-actions .btn,.join-dialog .btn{min-width:178px;display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:7px;font-family:var(--font-score);font-size:1.08rem;font-style:italic;letter-spacing:.05em}
.hero-actions .btn-play,.join-dialog .btn-play{color:#fff;background:linear-gradient(180deg,#319cff,#1267d6);border-color:#83c5ff;box-shadow:0 0 20px #1678ee66}
.hero-actions .btn-play:hover,.join-dialog .btn-play:hover{filter:brightness(1.12);box-shadow:0 0 28px #329cffaa}
.hero-actions .secondary{background:rgba(4,15,32,.78);border:1px solid #559fea;color:#eaf5ff;box-shadow:0 0 14px #1678ee22}
.how-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:#abd5ff;font-size:.91rem;font-weight:800;text-decoration:none}
.how-link span{display:grid;place-items:center;width:22px;height:22px;border:1px solid #4c9bee;border-radius:50%;font-size:14px;transition:transform .18s}
.how-link:hover span{transform:translateY(3px)}
.hero-facts{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,42px);margin-top:32px;padding-top:18px;border-top:1px solid #7bbaff44}
.hero-facts div{display:grid;gap:5px}
.hero-facts strong{font-family:var(--font-score);font-size:clamp(1rem,1.5vw,1.25rem);font-style:italic;text-transform:uppercase}
.hero-facts span{color:#9db3ce;font-size:.76rem}
.hero-stage{position:relative;isolation:isolate;min-height:540px;width:min(100%,600px);justify-self:end;display:grid;place-items:center;overflow:hidden;border:1px solid #319cff88;border-radius:18px;background:linear-gradient(145deg,rgba(3,14,30,.78),rgba(2,7,16,.9));box-shadow:0 24px 90px #0008,0 0 38px #1678ee44,inset 0 0 50px #1678ee16}
.hero-stage::before{content:"";position:absolute;z-index:-1;width:76%;aspect-ratio:1;border-radius:50%;background:#1678ee24;filter:blur(36px)}
.stage-rim{position:absolute;inset:12px;z-index:-1;border:1px solid #509ce733;border-radius:12px;clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,20% 100%,0 80%)}
.stage-header{position:absolute;top:27px;left:28px;right:28px;display:flex;justify-content:space-between;gap:10px;color:#9dbce0;font-family:var(--font-score);font-size:.72rem;font-style:italic;font-weight:900;letter-spacing:.16em}
.stage-header span:first-child{display:flex;align-items:center;gap:9px;color:#d8ebff}
.stage-header b{color:#4da8ff}
.stage-board{width:min(58%,330px);aspect-ratio:1;object-fit:contain;transform:translateY(-24px);mix-blend-mode:screen;filter:drop-shadow(0 16px 34px #000d) drop-shadow(0 0 18px #1678ee55)}
.stage-score{position:absolute;top:76px;right:26px;display:grid;justify-items:end;padding:10px 13px;border-right:3px solid #319cff;background:linear-gradient(90deg,transparent,rgba(4,17,36,.88));text-align:right}
.stage-score small,.stage-target small{color:#92bce9;font-size:.62rem;font-weight:900;letter-spacing:.18em}
.stage-score strong{font-family:var(--font-score);font-size:clamp(2.8rem,5vw,4.6rem);font-style:italic;line-height:.92;text-shadow:0 0 19px #318eff}
.stage-score span{margin-top:4px;color:#a6bad3;font-size:.58rem;font-weight:900;letter-spacing:.14em}
.stage-target{position:absolute;bottom:34px;left:28px;display:grid;gap:4px;padding:12px 15px;border-left:3px solid #72baff;background:linear-gradient(90deg,rgba(4,17,36,.94),transparent)}
.stage-target strong{font-family:var(--font-score);font-size:1.2rem;font-style:italic;letter-spacing:.06em}
.stage-target span{color:#77bdff;font-size:.65rem;font-weight:900;letter-spacing:.16em}
.stage-question{position:absolute;right:26px;bottom:29px;display:grid;gap:5px;max-width:47%;padding:11px 13px;border:1px solid #3c85c855;border-radius:8px;background:rgba(4,14,29,.86);box-shadow:0 0 20px #1678ee22}
.stage-question span{color:#80bfff;font-size:.53rem;font-weight:900;letter-spacing:.14em}
.stage-question b{font-family:var(--font-score);font-size:1rem;font-style:italic;line-height:1.08;text-transform:uppercase}
.hero-bottom{position:absolute;left:var(--safe-x);right:var(--safe-x);bottom:22px;display:flex;align-items:center;gap:14px;color:#aac0db;font-family:var(--font-score);font-size:.68rem;font-style:italic;letter-spacing:.18em}
.hero-bottom b{color:#fff}
.hero-bottom i{width:clamp(24px,6vw,80px);height:1px;background:linear-gradient(90deg,#1678ee,#80c2ff)}
.how-section{width:min(1450px,100%);margin:auto;padding:clamp(70px,9vw,128px) var(--safe-x) 26px}
.section-heading{max-width:820px}
.section-heading>.eyebrow{color:#75b9ff}
.section-heading h2{margin:12px 0;font-family:var(--font-score);font-size:clamp(2.8rem,6vw,6rem);font-style:italic;font-weight:1000;line-height:.93;letter-spacing:-.025em;text-transform:uppercase}
.section-heading h2 span{color:#89c9ff}
.section-heading>p:last-child{max-width:570px;color:#aebfd4;font-size:1.05rem;line-height:1.6}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:42px}
.how-grid article{position:relative;min-height:220px;padding:24px;border:1px solid #267dd244;border-radius:10px;background:linear-gradient(145deg,#0b1d35,#06101e);box-shadow:inset 0 1px #b6d9ff14}
.step-number{display:grid;place-items:center;width:40px;height:40px;border:1px solid #368fe5;border-radius:50%;color:#9bceff;font-family:var(--font-score);font-size:1.08rem;font-weight:900;box-shadow:0 0 15px #1678ee33}
.how-grid h3{margin:20px 0 8px;font-family:var(--font-score);font-size:1.5rem;font-style:italic;text-transform:uppercase}
.how-grid p{max-width:370px;margin:0;color:#a9b9ce;font-size:.94rem;line-height:1.65}
.finish-strip{display:flex;align-items:center;gap:18px;margin-top:26px;padding:16px 22px;border:1px solid #267dd244;border-left:4px solid #319cff;border-radius:8px;background:linear-gradient(100deg,#0b1d35,#071120)}
.finish-mark{color:#8ecbff;font-family:var(--font-score);font-size:2.1rem;font-style:italic;font-weight:1000;text-shadow:0 0 15px #1678ee66}
.finish-strip p{flex:1;margin:0;color:#b8c9dc;line-height:1.5}
.finish-strip p strong{color:#fff;font-family:var(--font-score);font-size:1.15rem;font-style:italic;text-transform:uppercase}
.finish-rule{color:#8fc9ff;font-size:.7rem;font-weight:900;letter-spacing:.14em;white-space:nowrap}
.finish-rule i{color:#476f9e;font-style:normal}
.site-footer{display:flex;justify-content:space-between;gap:12px;margin-top:56px;padding:20px 0;border-top:1px solid #5999d533;color:#879bb4;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase}
.join-dialog{width:min(440px,calc(100vw - 32px));max-width:none;padding:0;border:1px solid #318ee9;border-radius:14px;background:linear-gradient(145deg,#0c2240,#040d1b);color:#fff;box-shadow:0 20px 100px #000d,0 0 32px #1678ee55}
.join-dialog::backdrop{background:rgba(1,5,13,.8);backdrop-filter:blur(8px)}
.join-dialog form{position:relative;display:grid;gap:12px;padding:30px}
.dialog-close{position:absolute;top:14px;right:15px;border:0;background:none;color:#c8d8ec;font-size:28px;cursor:pointer}
.join-dialog h2{margin:0 0 10px;font-family:var(--font-score);font-size:2rem;font-style:italic;text-transform:uppercase}
.join-dialog label{color:#adcaea;font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.join-dialog input{width:100%;padding:13px 15px;border:1px solid #378de3;border-radius:8px;background:#020b18;color:#fff;font-family:var(--font-score);font-size:1.6rem;font-weight:900;letter-spacing:.35em;text-align:center;text-transform:uppercase}
.join-dialog input::placeholder{color:#466180}
.code-error{min-height:1em;margin:0;color:#ff8a93;font-size:.82rem}
@media(max-width:1000px){.hero-layout{grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:28px}.hero-stage{min-height:480px}.stage-score{right:14px}.stage-header{left:20px;right:20px}}
@media(max-width:760px){.hero{min-height:100svh;padding-bottom:54px}.hero-layout{grid-template-columns:1fr;gap:26px;min-height:0;padding:32px 0 54px}.hero-copy{max-width:670px}.hero-copy h1{font-size:clamp(3.2rem,11.8vw,6rem)}.intro{font-size:1rem}.hero-stage{justify-self:center;width:min(100%,520px);min-height:420px}.stage-board{width:min(64%,300px);transform:translateY(-22px)}.stage-score{top:69px}.hero-bottom{bottom:18px}.how-grid{grid-template-columns:1fr}.how-grid article{min-height:0}.finish-strip{align-items:flex-start;flex-wrap:wrap}.finish-rule{width:100%;padding-left:58px}}
@media(max-width:480px){.site-header{height:78px}.hero-wordmark{width:min(230px,62vw);max-height:62px}.broadcast-label{gap:7px;font-size:.58rem;letter-spacing:.12em}.broadcast-label i{width:7px;height:7px}.hero-layout{gap:20px;padding-top:24px}.hero-copy h1{font-size:clamp(2.8rem,12.2vw,4.2rem);line-height:.92;margin:13px 0 16px}.hero-copy>.eyebrow{font-size:.61rem}.intro{font-size:.92rem;line-height:1.5}.hero-actions{gap:9px;margin-top:20px}.hero-actions .btn{flex:1;min-width:0;min-height:50px;padding:12px;font-size:.96rem}.how-link{margin-top:12px}.hero-facts{gap:13px 20px;margin-top:20px;padding-top:13px}.hero-facts strong{font-size:.96rem}.hero-facts span{font-size:.66rem}.hero-stage{min-height:350px;border-radius:12px}.stage-header{top:18px;left:15px;right:15px;font-size:.55rem}.stage-board{width:67%;transform:translateY(-12px)}.stage-score{top:55px;right:8px;padding:7px 8px}.stage-score small,.stage-target small{font-size:.5rem}.stage-score strong{font-size:2.5rem}.stage-score span{font-size:.48rem}.stage-target{left:10px;bottom:14px;padding:8px}.stage-target strong{font-size:.9rem}.stage-target span{font-size:.52rem}.stage-question{right:8px;bottom:13px;max-width:50%;padding:8px}.stage-question span{font-size:.43rem}.stage-question b{font-size:.8rem}.hero-bottom{display:none}.how-section{padding-top:64px}.section-heading h2{font-size:2.8rem}.how-grid{margin-top:25px}.how-grid article{padding:19px}.finish-strip{gap:12px;padding:14px}.finish-rule{padding-left:0;font-size:.61rem}.site-footer{font-size:.64rem}.join-dialog form{padding:26px 20px}}