:root{--bg:#070a10;--panel:#111722;--panel2:#171f2c;--text:#f7f9fc;--muted:#8f9bad;--accent:#29e3a5;--accent2:#2ea6ff;--gold:#ffbf3d;--danger:#ff5364;--line:#263244;--cyan:#26c6da}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#1a2538,#070a10 54%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button{font:inherit}.screen{display:none;min-height:100vh}.screen.active{display:block}.lobby-screen{background:radial-gradient(circle at 50% 5%,rgba(34,74,105,.22),transparent 34%),linear-gradient(#090d15,#070a10 72%)}
.topbar,.match-header{height:78px;display:flex;align-items:center;padding:0 28px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,10,16,.88);backdrop-filter:blur(18px)}.game-topbar{justify-content:space-between;gap:20px;height:82px;position:sticky;top:0;z-index:8}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,#dce1e8 25%,#18202d 27%,#07090d 70%);border:3px solid var(--accent);font-weight:900}.brand strong,.brand span{display:block}.brand span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.game-nav{display:flex;align-items:stretch;height:100%;gap:4px}.nav-item{position:relative;min-width:72px;border:0;border-bottom:3px solid transparent;background:transparent;color:#aeb8c8;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;cursor:pointer;transition:.18s}.nav-item span{font-size:20px}.nav-item b{font-size:10px;text-transform:uppercase;letter-spacing:.08em}.nav-item:hover{color:#fff;background:rgba(255,255,255,.035);border-bottom-color:var(--accent)}.reward-nav i{position:absolute;top:11px;right:15px;width:16px;height:16px;border-radius:50%;background:#ff3e57;color:white;font-size:9px;font-style:normal;display:grid;place-items:center}.top-actions{display:flex;align-items:center;gap:10px}.wallet{display:flex;align-items:center;gap:7px;padding:10px 10px 10px 14px;border-radius:14px;background:#171f2b;border:1px solid #2a3546}.wallet-plus{width:26px;height:26px;border:0;border-radius:8px;background:var(--accent);color:#03110c;font-weight:900;cursor:pointer}.profile-pill{display:flex;align-items:center;gap:8px;border:1px solid #2b3749;border-radius:14px;background:#111722;color:white;padding:6px 12px 6px 7px;cursor:pointer}.profile-pill>span:last-child{display:flex;flex-direction:column;text-align:left}.profile-pill small{font-size:8px;color:#8c98aa;letter-spacing:.1em}.avatar{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#24e5a0,#16976b);font-weight:900;color:#05100c;box-shadow:0 0 24px rgba(39,224,157,.18)}.avatar.mini{width:35px;height:35px;border-radius:11px}.avatar.small{width:42px;height:42px;border-radius:50%}.avatar.bot{background:linear-gradient(145deg,#59b6ff,#4d58ff);color:white}
.lobby-stage{max-width:1240px;margin:0 auto;padding:34px 24px 36px}.play-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:24px;align-items:stretch}.hero-copy,.season-panel{border:1px solid rgba(255,255,255,.08);border-radius:28px;background:linear-gradient(145deg,rgba(20,29,43,.92),rgba(10,15,24,.94));box-shadow:inset 0 1px rgba(255,255,255,.03)}.hero-copy{position:relative;overflow:hidden;padding:36px}.hero-copy:before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(41,227,165,.24),transparent 65%)}.hero-copy:after{content:"8";position:absolute;right:55px;top:18px;font-size:190px;line-height:1;color:rgba(255,255,255,.025);font-weight:1000}.eyebrow{font-size:11px;color:var(--accent);font-weight:900;letter-spacing:.18em}.hero-copy h1{position:relative;font-size:48px;line-height:1.02;margin:10px 0 12px;max-width:620px}.hero-copy h1 em{font-style:normal;color:var(--accent)}.hero-copy p{position:relative;max-width:650px;color:#9aa6b7;line-height:1.55;margin:0 0 26px}.play-actions{position:relative;display:grid;grid-template-columns:1.55fr .8fr .8fr;gap:12px}.play-card{min-height:105px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#151e2b;color:white;display:flex;align-items:center;gap:13px;text-align:left;padding:16px;cursor:pointer;transition:.18s transform,.18s filter,.18s border-color;position:relative;overflow:hidden}.play-card:hover{transform:translateY(-3px);filter:brightness(1.08);border-color:rgba(255,255,255,.25)}.primary-play{background:linear-gradient(135deg,#2ce3a3,#15996f 70%,#0a684d);color:#03130c;border-color:rgba(127,255,207,.48)}.primary-play:after{content:"";position:absolute;right:-35px;top:-45px;width:145px;height:145px;border-radius:50%;background:rgba(255,255,255,.13)}.play-icon{font-size:30px;min-width:37px}.play-card>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.play-card small{font-size:8px;letter-spacing:.13em;font-weight:900;opacity:.75}.play-card strong{font-size:18px;line-height:1.15}.primary-play strong{font-size:23px}.play-card em{font-style:normal;font-size:10px;opacity:.7;margin-top:3px}.primary-play>i{margin-left:auto;font-style:normal;font-size:20px}.secondary-play{background:linear-gradient(145deg,#19283b,#0e1622)}.event-play{background:linear-gradient(145deg,#302157,#151028)}
.season-panel{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px}.season-head{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.season-head span{font-size:9px;color:var(--accent);letter-spacing:.15em;font-weight:900}.season-head b{font-size:13px;color:#d9e0ea}.rank-orb{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#fff7c4 0 8%,#d39b32 10%,#70400d 63%,#201003 100%);border:5px solid #e4ad47;box-shadow:0 0 0 5px #2a1c0c,0 14px 36px rgba(0,0,0,.4);font-size:27px;font-weight:1000;color:white}.season-progress{width:100%;display:flex;justify-content:space-between;color:#9ca8b9;font-size:11px;margin:20px 0 7px}.season-progress b{color:#fff}.xp-track{width:100%;height:8px;border-radius:10px;background:#06090f;border:1px solid #283345;overflow:hidden}.xp-track i{display:block;height:100%;background:linear-gradient(90deg,#24dfa0,#ffbe42);border-radius:inherit}.season-stats{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:18px}.season-stats span{text-align:center;border-left:1px solid rgba(255,255,255,.07)}.season-stats span:first-child{border-left:0}.season-stats b,.season-stats small{display:block}.season-stats b{font-size:17px}.season-stats small{font-size:9px;color:#8390a2;text-transform:uppercase;letter-spacing:.08em}
.arena-zone{margin-top:28px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:13px}.section-heading h2{font-size:28px;margin:4px 0 0}.section-heading p{margin:0 0 5px;color:#8592a4;font-size:12px}.arenas{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.arena{position:relative;min-height:265px;border-radius:22px;padding:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:.2s transform,.2s border-color,.2s box-shadow;background:#141c28;box-shadow:inset 0 1px rgba(255,255,255,.04)}.arena:hover{transform:translateY(-5px) scale(1.01);border-color:rgba(255,255,255,.35);box-shadow:0 16px 38px rgba(0,0,0,.33)}.arena::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,8,12,.98) 3%,rgba(5,8,12,.62) 38%,rgba(5,8,12,.04) 78%),var(--arena-bg);background-size:cover;background-position:center;filter:saturate(1.25)}.arena::after{content:"ARENA";position:absolute;top:14px;right:14px;font-size:8px;font-weight:900;letter-spacing:.15em;color:rgba(255,255,255,.7);padding:5px 7px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.14)}.arena>*{position:relative;z-index:1}.arena .flag{font-size:24px}.arena h3{font-size:25px;margin:96px 0 2px}.arena .city{color:#c9d0da;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.arena .stake{display:flex;justify-content:space-between;align-items:end;margin-top:20px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.arena .stake small{display:block;color:#8c98aa;font-size:9px;letter-spacing:.07em}.arena .stake b{font-size:18px}.arena.locked{filter:grayscale(.8);opacity:.58}.arena.locked:hover{transform:none}.arena:nth-child(1){box-shadow:inset 0 -3px #21d89c}.arena:nth-child(2){box-shadow:inset 0 -3px #5a63ff}.arena:nth-child(3){box-shadow:inset 0 -3px #e3a738}.arena:nth-child(4){box-shadow:inset 0 -3px #e63c5c}.arena:nth-child(5){box-shadow:inset 0 -3px #8b5cff}
.reward-zone{margin-top:22px}.reward-strip{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:12px}.reward-box{border:1px solid #273447;border-radius:17px;background:linear-gradient(145deg,#131c29,#0d131d);color:white;display:flex;align-items:center;gap:12px;padding:14px 15px;text-align:left;cursor:pointer;transition:.18s}.reward-box:hover{border-color:#43516a;transform:translateY(-2px)}.reward-box>span{font-size:27px}.reward-box>div{display:flex;flex-direction:column;min-width:0}.reward-box small{font-size:8px;color:#8895a8;letter-spacing:.11em}.reward-box b{font-size:12px}.reward-box>i{margin-left:auto;font-style:normal;color:#a9b5c6;font-size:11px}.reward-box.daily{border-color:rgba(41,227,165,.35);background:linear-gradient(145deg,rgba(20,58,49,.9),#0c1719)}.reward-box.daily>i{padding:6px 8px;border-radius:8px;background:var(--accent);color:#04130d;font-weight:900;font-size:8px}.mobile-game-dock{display:none}
.match-header{gap:16px;justify-content:center;height:92px}.icon-btn{position:absolute;left:22px;width:44px;height:44px;border:1px solid #344156;border-radius:12px;background:#151d29;color:white;font-size:20px}.match-player{display:flex;align-items:center;gap:10px;min-width:240px}.match-player.left{justify-content:flex-end}.match-player.right{justify-content:flex-start}.match-player div:not(.avatar)>*{display:block}.match-player small{color:#99a5b6}.match-center{min-width:210px;text-align:center}.match-center>*{display:block}.match-center span{font-size:10px;color:var(--accent);font-weight:900;letter-spacing:.16em}.match-center strong{font-size:20px}.match-center small{color:var(--gold)}.turn-light{position:absolute;right:22px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}.game-shell{position:relative;max-width:1280px;margin:18px auto 0;padding:0 86px}.status-bar{text-align:center;color:#c4cedb;font-weight:700;margin:0 0 8px;min-height:24px}.game-shell canvas{display:block;width:100%;height:auto;border-radius:24px;background:#080b10;box-shadow:0 30px 80px rgba(0,0,0,.45);touch-action:none}.power-panel{position:absolute;right:19px;top:74px;bottom:32px;width:54px;display:flex;flex-direction:column;align-items:center;gap:8px}.power-panel span{writing-mode:vertical-rl;font-size:9px;color:#94a0b1;font-weight:800;letter-spacing:.14em}.power-track{flex:1;width:17px;border-radius:12px;background:#10151e;border:1px solid #334055;display:flex;align-items:end;padding:3px;overflow:hidden}.power-fill{width:100%;height:0%;border-radius:8px;background:linear-gradient(to top,#27e09d,#ffbf3d,#ff5364);transition:height .04s linear}.power-panel strong{font-size:11px;color:#c9d1dc}.match-footer{max-width:1110px;margin:10px auto 28px;display:flex;align-items:center;gap:10px}.ball-strip{flex:1;display:flex;gap:5px;align-items:center}.mini-ball{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:900;color:#111;border:2px solid rgba(255,255,255,.45);box-shadow:0 2px 8px rgba(0,0,0,.25)}.secondary,.primary{border:0;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer}.secondary{color:#d6dee9;background:#171f2b;border:1px solid #303d50}.primary{background:linear-gradient(135deg,#27e09d,#18b57b);color:#04110b}.modal{position:fixed;inset:0;background:rgba(3,5,9,.76);display:grid;place-items:center;z-index:20;backdrop-filter:blur(9px)}.modal.hidden{display:none}.modal-card{width:min(420px,90vw);text-align:center;padding:34px;border-radius:28px;background:linear-gradient(160deg,#1b2534,#0d121a);border:1px solid #334056;box-shadow:0 30px 90px #000}.modal-icon{font-size:46px}.modal-card h2{font-size:32px;margin:8px 0}.modal-card p{color:#a9b4c4;line-height:1.55}.modal-card .primary{width:100%;margin-top:12px;padding:14px}
@media(max-width:1050px){.game-nav{display:none}.play-hero{grid-template-columns:1fr}.season-panel{display:grid;grid-template-columns:auto 100px 1fr;gap:18px;min-height:0}.season-head{margin:0}.season-progress,.xp-track,.season-stats{grid-column:3}.rank-orb{grid-row:1/4;grid-column:2}.arenas{grid-template-columns:repeat(3,1fr)}.reward-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.game-topbar{padding:0 14px;height:70px}.profile-pill{display:none}.wallet{margin-left:auto}.lobby-stage{padding:18px 14px 92px}.hero-copy{padding:23px 18px}.hero-copy h1{font-size:37px}.hero-copy:after{font-size:130px;right:15px}.play-actions{grid-template-columns:1fr 1fr}.primary-play{grid-column:1/-1}.season-panel{display:none}.arenas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:7px}.arena{min-width:230px;scroll-snap-align:start}.section-heading{align-items:flex-start}.section-heading p{display:none}.reward-strip{display:flex;overflow-x:auto}.reward-box{min-width:240px}.mobile-game-dock{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:10px;right:10px;bottom:10px;z-index:9;background:rgba(10,15,23,.94);border:1px solid #273447;border-radius:20px;padding:7px;backdrop-filter:blur(14px);box-shadow:0 15px 45px rgba(0,0,0,.55)}.mobile-game-dock button{border:0;background:transparent;color:#7f8ca0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px}.mobile-game-dock button.active{color:var(--accent)}.mobile-game-dock span{font-size:18px}.mobile-game-dock small{font-size:8px}.mobile-game-dock .dock-play{margin-top:-22px}.mobile-game-dock .dock-play span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#30e5a7,#11966d);color:#04130d;border:5px solid #09101a;box-shadow:0 0 0 1px #2b394d}.match-player{min-width:0}.match-player div:not(.avatar){display:none}.match-center{min-width:150px}.game-shell{padding:0 58px 0 10px}.match-footer{padding:0 12px}.top-actions{gap:4px}.brand span{display:none}}
@media(max-width:520px){.lobby-brand strong{font-size:13px}.brand-mark{width:40px;height:40px}.wallet{font-size:12px}.wallet-plus{display:none}.play-actions{grid-template-columns:1fr}.primary-play{grid-column:auto}.hero-copy h1{font-size:32px}.hero-copy p{font-size:13px}.play-card{min-height:88px}.arena{min-width:210px;min-height:245px}.match-header{height:76px}.icon-btn{left:10px}.turn-light{right:12px}.game-shell{margin-top:6px}.status-bar{font-size:12px}.power-panel{top:52px}.match-footer{flex-wrap:wrap}.ball-strip{width:100%;flex-basis:100%}}