@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;700;800;900&display=swap');
:root{
  --bg:#020402;--panel:#071007;--green:#9dff00;--pink:#ff278e;
  --white:#f5f7f2;--muted:#8c9988;--line:rgba(157,255,0,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
 radial-gradient(circle at 75% 0,rgba(157,255,0,.09),transparent 25%),
 radial-gradient(circle at 5% 30%,rgba(255,39,142,.04),transparent 22%),
 var(--bg);color:var(--white);font-family:Inter,system-ui,sans-serif}
body{overflow-x:hidden}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
.beta-shell,.gate-shell{width:min(1180px,calc(100% - 28px));margin:auto}
.eyebrow{color:#a7b3a4;font-size:10px;font-weight:900;letter-spacing:.18em}

/* gate */
.gate-page{display:grid;place-items:center;min-height:100svh}
.gate-shell{max-width:620px;text-align:center;padding:60px 22px}
.gate-logo{width:110px;height:110px;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 45px rgba(157,255,0,.14)}
.gate-shell h1{font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(46px,10vw,86px);line-height:.9;margin:20px 0}
.gate-shell h1 span{color:var(--green)}
.gate-copy{color:var(--muted);font-size:15px}
.gate-form{margin:30px auto 0;max-width:520px;text-align:left}
.gate-form label{display:block;margin-bottom:8px;font-size:9px;font-weight:900;letter-spacing:.16em;color:#72806f}
.gate-input-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.gate-input-row input{min-height:52px;border:1px solid var(--line);border-radius:10px;background:#050805;color:white;padding:0 14px;outline:none}
.gate-input-row button{min-height:52px;padding:0 20px;border:1px solid rgba(157,255,0,.45);border-radius:10px;background:rgba(157,255,0,.12);color:var(--green);font-weight:900;cursor:pointer}
.gate-error{color:#ff6d9b;font-size:12px}
.gate-tagline{margin-top:22px;color:#5f6b5c;font-size:10px;font-weight:900;letter-spacing:.12em}

/* nav */
.beta-nav{width:min(1180px,calc(100% - 28px));margin:auto;min-height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:46px;height:46px;border-radius:50%;border:1px solid var(--line)}
.brand div{display:flex;flex-direction:column}
.brand strong{font-family:"Archivo Black",Impact,sans-serif;color:var(--green)}
.brand small{font-size:8px;letter-spacing:.15em;color:#758172}
.logout{font-size:9px;font-weight:900;letter-spacing:.12em;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px 12px}

/* hero */
.beta-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;padding:46px 0 36px}
.hero-copy h1{font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(52px,8vw,100px);line-height:.88;margin:14px 0 18px}
.hero-copy h1 span{color:var(--green)}
.hero-copy>p:not(.eyebrow){max-width:650px;color:#9aa596;line-height:1.65}
.beta-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.beta-pills span{border:1px solid rgba(157,255,0,.18);border-radius:999px;padding:8px 10px;font-size:8px;font-weight:900;letter-spacing:.12em;color:#a8b5a4}
.hero-cover{border:1px solid rgba(157,255,0,.18);border-radius:18px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.hero-cover img{display:block;width:100%;height:auto}

/* game */
.game-panel{border:1px solid rgba(157,255,0,.22);border-radius:20px;overflow:hidden;background:#030603;box-shadow:0 30px 90px rgba(0,0,0,.4)}
.game-topbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:10px;background:rgba(2,5,2,.94);border-bottom:1px solid rgba(157,255,0,.12)}
.stat{min-height:52px;padding:8px 10px;border:1px solid rgba(157,255,0,.10);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.stat small{font-size:8px;color:#6e7b6b;font-weight:900;letter-spacing:.12em}
.stat strong{font-family:"Archivo Black",Impact,sans-serif;color:var(--green);font-size:20px}
.game-btn{min-height:52px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:#080c08;color:#d5dfd1;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.mobile-only{display:none}
.game-stage{position:relative;width:100%;aspect-ratio:16/9;min-height:420px;overflow:hidden;touch-action:none;background:#031003}
#chapter3Game{position:absolute;inset:0;width:100%;height:100%;display:block}
.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(2,5,2,.62);backdrop-filter:blur(5px);transition:.2s}
.game-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.overlay-card{text-align:center;width:min(480px,90%);padding:24px}
.overlay-card>p:first-child{font-size:9px;letter-spacing:.15em;font-weight:900;color:#768472}
.overlay-card h2{font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(36px,6vw,64px);line-height:.95;margin:10px 0;color:white}
.overlay-card p{color:#a3aea0;font-size:13px}
.player-row{margin:16px 0 10px}
.player-row input{width:min(290px,100%);min-height:46px;border:1px solid rgba(157,255,0,.24);border-radius:9px;background:#050805;color:white;text-align:center;padding:0 12px;font-weight:900;outline:none}
#playBtn{min-height:50px;padding:0 24px;border:1px solid rgba(157,255,0,.48);border-radius:10px;background:var(--green);color:#020402;font-weight:900;cursor:pointer}
.game-foot{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;padding:12px 14px;border-top:1px solid rgba(157,255,0,.10);color:#667363;font-size:8px;font-weight:900;letter-spacing:.1em}
.mobile-controls{display:none}

/* rankings */
.beta-ranking{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;padding:28px 0 70px}
.rank-card,.beta-notes{border:1px solid rgba(157,255,0,.14);border-radius:16px;background:rgba(5,9,5,.90);padding:18px}
.rank-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px}
.rank-head>div{display:flex;flex-direction:column;gap:3px}
.rank-head small,.beta-notes>small{color:#70806c;font-size:8px;font-weight:900;letter-spacing:.14em}
.rank-head strong{font-family:"Archivo Black",Impact,sans-serif;color:var(--green);font-size:20px}
#globalStatus{font-size:8px;font-weight:900;letter-spacing:.1em;color:#7e8a7a}
#globalStatus.online{color:var(--green)}
#globalStatus.error{color:#ff6d9b}
.score-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.score-list li{display:grid;grid-template-columns:34px 1fr 94px 62px;gap:8px;align-items:center;min-height:36px;padding:7px 9px;border:1px solid rgba(157,255,0,.07);border-radius:8px}
.score-list li:first-child{border-color:rgba(157,255,0,.28);background:rgba(157,255,0,.045)}
.score-list b{color:#6e7b6b;font-size:9px}
.score-list span{font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-list em{color:#657261;font-size:8px;font-style:normal;text-align:right}
.score-list strong{font-family:"Archivo Black",Impact,sans-serif;text-align:right;font-size:14px}
.score-list li:first-child strong{color:var(--green)}
.beta-notes h3{font-family:"Archivo Black",Impact,sans-serif;font-size:26px;margin:7px 0 12px}
.beta-notes p,.beta-notes li{color:#8d9989;font-size:12px;line-height:1.55}
.beta-notes ul{padding-left:18px}

@media(max-width:860px){
 .beta-hero{grid-template-columns:1fr;padding-top:30px}
 .hero-cover{order:-1}
 .game-topbar{grid-template-columns:repeat(3,minmax(0,1fr))}
 .mobile-only{display:block}
 .game-stage{aspect-ratio:4/5;min-height:450px}
 .mobile-controls{display:block;padding:10px}
 .mobile-controls button{width:100%;min-height:58px;border:1px solid rgba(157,255,0,.42);border-radius:12px;background:rgba(157,255,0,.12);color:white;font-size:13px;font-weight:900;letter-spacing:.12em;touch-action:none}
 .beta-ranking{grid-template-columns:1fr}
}
@media(max-width:520px){
 .gate-input-row{grid-template-columns:1fr}
 .game-topbar{grid-template-columns:repeat(2,minmax(0,1fr))}
 .score-list li{grid-template-columns:30px 1fr 68px 48px;gap:5px}
 .score-list em{font-size:7px}
}