:root{--web-bg:#05070c;--web-panel:#0d1420;--web-line:#24364c;--web-cyan:#2ed3ff;--web-blue:#3178ff;--web-red:#ff3b4f;--web-gold:#ffcb59;--web-muted:#8ea3ba}
*{box-sizing:border-box}
html{background:var(--web-bg)}
body{margin:0;background:radial-gradient(circle at 18% 12%,rgba(22,91,170,.16),transparent 30%),radial-gradient(circle at 80% 75%,rgba(202,31,69,.12),transparent 28%),var(--web-bg);min-height:100vh;overscroll-behavior:none}
body.auth-open{overflow:hidden}
#web-auth-root[hidden]{display:none}
#web-portal-root{display:contents}
.auth-backdrop{position:fixed;inset:0;z-index:9999;display:grid;grid-template-columns:minmax(380px,1.15fr) minmax(360px,.85fr);gap:clamp(30px,7vw,120px);align-items:center;padding:clamp(28px,6vw,96px);background:linear-gradient(110deg,rgba(5,8,14,.97),rgba(7,12,21,.95));color:#fff;overflow:auto}
.auth-backdrop:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to right,#000,transparent 82%);pointer-events:none}
.auth-ambient{position:absolute;border-radius:999px;filter:blur(3px);opacity:.5;pointer-events:none}.auth-ambient.one{width:420px;height:420px;left:-120px;top:-120px;background:radial-gradient(circle,rgba(35,124,255,.3),transparent 68%)}.auth-ambient.two{width:500px;height:500px;right:-180px;bottom:-200px;background:radial-gradient(circle,rgba(255,46,75,.24),transparent 70%)}
.auth-brand-panel,.auth-card{position:relative;z-index:1}.auth-brand-panel{max-width:650px;padding-left:clamp(0px,4vw,70px)}.auth-brand-panel>img{width:76px;height:76px;filter:drop-shadow(0 10px 30px rgba(52,126,255,.35))}.auth-brand-panel>span{display:block;margin:26px 0 10px;color:#73dfff;letter-spacing:.22em;font:800 12px/1.2 system-ui}.auth-brand-panel h1{font:900 clamp(48px,7vw,92px)/.91 system-ui;margin:0;letter-spacing:-.06em}.auth-brand-panel h1 em{font-style:normal;color:transparent;background:linear-gradient(95deg,#fff 5%,#8fc9ff 45%,#ff6172);background-clip:text}.auth-brand-panel p{max-width:570px;color:#9eb0c5;font:500 17px/1.8 system-ui;margin:28px 0}.auth-features{display:flex;flex-wrap:wrap;gap:10px}.auth-features span{border:1px solid #203550;background:#0b1523aa;border-radius:999px;padding:10px 15px;color:#dceaff;font:700 12px system-ui}
.auth-card{width:min(100%,500px);justify-self:center;border:1px solid #263950;border-radius:28px;padding:22px;background:linear-gradient(145deg,rgba(16,25,39,.98),rgba(8,13,22,.98));box-shadow:0 40px 100px #0009,0 0 0 1px rgba(255,255,255,.025) inset}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;background:#070c14;border:1px solid #1b2a3c;border-radius:15px}.auth-tabs button{border:0;background:transparent;color:#778ba2;padding:12px;border-radius:11px;font:800 14px system-ui;cursor:pointer}.auth-tabs button.on{color:#fff;background:linear-gradient(135deg,#1c4f88,#14365e);box-shadow:0 6px 18px #0007}.auth-card form{padding:26px 12px 8px}.auth-heading small{color:#55d3ff;letter-spacing:.18em;font:800 10px system-ui}.auth-heading h2{margin:7px 0 4px;font:900 27px system-ui}.auth-heading p{margin:0 0 24px;color:#8295aa;font:500 13px/1.6 system-ui}.auth-card label{display:block;margin:13px 0;color:#b9c7d6;font:700 12px system-ui}.auth-card label span{display:flex;justify-content:space-between;margin:0 2px 7px}.auth-card label i{font-style:normal;color:#657a90;font-weight:600}.auth-card input{width:100%;border:1px solid #273a51;border-radius:13px;background:#080e17;color:#fff;padding:14px 15px;outline:none;font:600 15px system-ui;transition:.2s}.auth-card input:focus{border-color:#35b9ff;box-shadow:0 0 0 3px rgba(53,185,255,.12)}.auth-submit{width:100%;border:0;border-radius:14px;padding:15px;background:linear-gradient(100deg,#246dff,#38c8ff);box-shadow:0 10px 30px rgba(35,120,255,.24);color:#fff;font:900 15px system-ui;cursor:pointer}.auth-submit:disabled{opacity:.65}.auth-error{min-height:20px;color:#ff7d8b;font:700 12px system-ui}.auth-card>footer{border-top:1px solid #1b2b3e;padding:18px 12px 3px;color:#61758b;text-align:center;font:500 10px/1.5 system-ui}
.fatal-web-error{position:fixed;inset:0;display:grid;place-content:center;text-align:center;color:#fff;background:#070b12;font:16px system-ui}.fatal-web-error b{font-size:24px}.fatal-web-error p{color:#9bb0c6}.fatal-web-error button{border:0;border-radius:12px;padding:13px 22px;background:#267bff;color:#fff;font-weight:800}
.web-desktop-left,.web-desktop-right{display:none}.web-online #app{min-height:100vh}.web-online .phone-shell{box-shadow:0 0 0 1px rgba(113,166,224,.17),0 30px 100px #0009}
.web-mobile-hud{position:fixed;z-index:250;top:max(8px,env(safe-area-inset-top));left:50%;width:min(calc(100% - 24px),410px);transform:translateX(-50%);display:flex;justify-content:flex-end;align-items:center;pointer-events:none}.web-mobile-hud>*{pointer-events:auto}.web-mobile-hud>span{display:none}.web-mobile-hud button{height:38px;display:flex;align-items:center;gap:8px;border:1px solid #2a4059;border-radius:999px;background:rgba(6,12,20,.88);backdrop-filter:blur(14px);color:#fff;padding:4px 8px 4px 5px;box-shadow:0 8px 28px #0008}.web-mobile-hud button span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#2f83ff,#fb3958);font:900 12px system-ui}.web-mobile-hud button b{max-width:86px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 11px system-ui}.web-mobile-hud button i{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:#ffc23d;color:#261900;font:900 10px system-ui;font-style:normal}
.web-drawer-backdrop{position:fixed;inset:0;z-index:499;background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}.web-account-drawer{position:fixed;z-index:500;top:0;right:0;width:min(430px,100%);height:100dvh;overflow:auto;transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.75,.2,1);padding:18px 20px max(22px,env(safe-area-inset-bottom));background:linear-gradient(165deg,#111b2a,#070b12 56%);border-left:1px solid #2d4159;color:#fff;box-shadow:-30px 0 80px #0009}.web-account-drawer.open{transform:none}.web-account-drawer>header{display:flex;gap:13px;align-items:center;border-bottom:1px solid #223247;padding:10px 0 20px}.web-account-drawer>header>div:nth-child(2){flex:1}.web-account-drawer header small,.drawer-checkin small,.drawer-invite>small,.drawer-security>small{display:block;color:#5ed5ff;letter-spacing:.14em;font:800 9px system-ui}.web-account-drawer h2{margin:3px 0 5px;font:900 22px system-ui}.web-account-drawer header span{color:#7fcaa7;font:700 10px system-ui}.web-account-drawer header button{border:1px solid #2a3c51;border-radius:11px;width:38px;height:38px;background:#101a27;color:#fff;font-size:22px}.web-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#267cff,#ff3657);box-shadow:0 8px 24px rgba(32,113,255,.24);font:900 17px system-ui}.web-avatar.large{width:52px;height:52px;border-radius:17px;font-size:20px}.drawer-balance,.side-pack{display:flex;align-items:center;gap:12px;margin:18px 0;border:1px solid #3a3440;border-radius:17px;padding:14px;background:linear-gradient(110deg,rgba(79,41,35,.44),rgba(24,20,31,.9))}.drawer-balance>span,.side-pack>span{font-size:24px}.drawer-balance>div,.side-pack>div{flex:1}.drawer-balance small,.side-pack small{display:block;color:#eaa966;font:800 9px system-ui;letter-spacing:.12em}.drawer-balance b,.side-pack b{font:900 14px system-ui}.drawer-balance em,.side-pack em{color:#ffcf63;font-style:normal}.drawer-balance button,.side-pack button{border:1px solid #805c35;border-radius:10px;background:#2e2116;color:#ffd987;padding:8px 10px;font:800 11px system-ui}.drawer-checkin,.drawer-invite,.drawer-security{border:1px solid #22354a;border-radius:18px;padding:17px;margin:14px 0;background:#0c1420}.drawer-checkin h3,.drawer-invite h3{margin:4px 0;font:900 17px system-ui}.drawer-checkin p,.drawer-invite p{margin:4px 0 14px;color:#8498ad;font:500 12px/1.55 system-ui}.drawer-week,.mini-week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.drawer-week i,.mini-week i{display:grid;place-items:center;border:1px solid #263a51;border-radius:9px;padding:7px 2px;background:#080e17;font-style:normal}.drawer-week i small,.mini-week i small{color:#667b91;font:700 8px system-ui}.drawer-week i b,.mini-week i b{margin-top:3px;color:#b5c5d6;font:900 11px system-ui}.drawer-week i em{color:#667b91;font:600 7px system-ui;font-style:normal}.drawer-week i.reached,.mini-week i.reached{border-color:#2d8a65;background:#0c2a24}.drawer-week i.reached b,.mini-week i.reached b{color:#66efb2}.drawer-checkin>button{width:100%;margin-top:12px;border:0;border-radius:11px;padding:11px;background:linear-gradient(100deg,#2377ff,#2fc5ef);color:#fff;font:900 12px system-ui}.drawer-checkin>button:disabled{background:#172231;color:#70849a}.drawer-invite>div{display:flex;gap:8px}.drawer-invite code{flex:1;border:1px dashed #4a6684;border-radius:11px;padding:11px;color:#8ce8ff;text-align:center;letter-spacing:.18em;font:900 16px monospace}.drawer-invite button{border:1px solid #36516f;border-radius:10px;background:#142237;color:#d9ecff;padding:0 12px;font:800 10px system-ui}.drawer-invite .share-link{width:100%;margin-top:9px;padding:11px}.drawer-invite .share-link em{font-style:normal;color:#70e1ff}.drawer-security p{display:flex;justify-content:space-between;margin:8px 0;color:#73879c;font:600 10px system-ui}.drawer-security p b{color:#b9c9d9}.web-account-drawer>footer{display:flex;justify-content:flex-end;gap:8px;padding-top:10px}.web-account-drawer>footer button,.web-account-drawer>footer a{border:1px solid #3a4655;border-radius:10px;background:#111925;color:#9cafc2;padding:9px 13px;font:700 10px system-ui;text-decoration:none}
.web-toast{position:fixed;z-index:10000;left:50%;bottom:max(24px,env(safe-area-inset-bottom));max-width:min(90vw,420px);transform:translate(-50%,20px);opacity:0;border:1px solid #36506c;border-radius:13px;padding:12px 18px;background:#101a28;color:#e8f4ff;box-shadow:0 18px 55px #000b;font:800 12px system-ui;transition:.25s}.web-toast.show{opacity:1;transform:translate(-50%,0)}.web-toast.success{border-color:#268c63;color:#8af2bd}.web-toast.error{border-color:#9b3948;color:#ff9ca8}
button,a,input{touch-action:manipulation}.web-online button{transition:transform .13s ease,filter .18s ease,border-color .18s ease}.web-online button:active{transform:scale(.975)}.web-online img{image-rendering:auto}.web-online :focus-visible{outline:2px solid #42cfff!important;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (min-width:1120px){body.web-online{display:grid;grid-template-columns:minmax(280px,1fr) 456px minmax(300px,1fr);gap:clamp(28px,4vw,72px);align-items:start;padding:28px clamp(24px,4vw,70px)}.web-online #app{grid-column:2;grid-row:1}.web-online .phone-shell{min-height:calc(100vh - 56px);border-radius:22px;overflow:hidden}.web-desktop-left,.web-desktop-right{display:block;position:sticky;top:28px;height:calc(100vh - 56px);color:#fff}.web-desktop-left{grid-column:1;grid-row:1;display:flex;flex-direction:column}.web-desktop-right{grid-column:3;grid-row:1;align-self:start}.desktop-brand{display:flex;align-items:center;gap:12px}.desktop-brand img{width:45px;height:45px}.desktop-brand span{display:grid}.desktop-brand b{font:900 16px system-ui;letter-spacing:.05em}.desktop-brand small{color:#607992;font:800 8px system-ui;letter-spacing:.16em}.desktop-copy{margin:auto 0}.desktop-copy>small{color:#55d7ff;letter-spacing:.2em;font:800 10px system-ui}.desktop-copy h2{margin:12px 0;font:900 clamp(34px,4vw,62px)/.96 system-ui;letter-spacing:-.045em}.desktop-copy p{max-width:390px;color:#73879d;font:500 14px/1.75 system-ui}.desktop-status{display:flex;gap:11px;align-items:center;border-top:1px solid #1b2a3c;padding:20px 0}.desktop-status>i{width:9px;height:9px;border-radius:50%;background:#38dda1;box-shadow:0 0 18px #38dda1}.desktop-status span{display:grid}.desktop-status b{font:800 11px system-ui}.desktop-status small{color:#587087;font:600 9px system-ui}.side-player{display:flex;gap:12px;align-items:center;border:1px solid #26394f;border-radius:18px;padding:14px;background:linear-gradient(145deg,#101a28,#0a1019)}.side-player>div:last-child{display:grid;flex:1}.side-player small{color:#5ed6ff;font:800 8px system-ui;letter-spacing:.14em}.side-player b{font:900 16px system-ui;margin:2px 0}.side-player span{color:#6fbe99;font:700 9px system-ui}.side-rewards{margin-top:13px;border:1px solid #26394f;border-radius:18px;padding:15px;background:#0c131e}.side-rewards header{display:flex;justify-content:space-between;margin-bottom:11px}.side-rewards header span{font:900 13px system-ui}.side-rewards header b{color:#879bb0;font:700 10px system-ui}.side-rewards header em{color:#72e9bb;font-style:normal}.side-rewards>button{width:100%;margin-top:11px;border:0;border-radius:10px;padding:10px;background:linear-gradient(100deg,#2776ff,#2fbde8);color:#fff;font:900 11px system-ui}.side-rewards>button:disabled{background:#162231;color:#71859a}.side-invite{width:100%;display:flex;gap:11px;align-items:center;text-align:left;border:1px solid #284462;border-radius:16px;padding:14px;background:linear-gradient(120deg,#112b46,#101723);color:#fff}.side-invite>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#1f6eb2;font-size:18px}.side-invite>div{display:grid}.side-invite small{color:#76cfff;font:700 9px system-ui}.side-invite b{font:900 12px system-ui}.side-invite em{color:#9cecff;font-style:normal;letter-spacing:.08em}.web-mobile-hud{display:none}}
@media (max-width:760px){.auth-backdrop{display:block;padding:24px 16px;overflow:auto}.auth-brand-panel{padding:18px 10px 28px}.auth-brand-panel>img{width:48px;height:48px}.auth-brand-panel>span{margin:14px 0 6px}.auth-brand-panel h1{font-size:42px}.auth-brand-panel p{margin:16px 0;font-size:13px}.auth-features{display:none}.auth-card{border-radius:22px;padding:14px}.auth-card form{padding:22px 8px 7px}.web-online .topbar{padding-right:100px}.web-account-drawer{padding-top:max(18px,env(safe-area-inset-top))}}

/* V1.0.1 one responsive game surface: phone-first, roomier on tablet and desktop */
html,body{width:100%;min-width:320px}.web-online .phone-shell{width:min(100%,430px)}
@media (min-width:680px) and (max-width:1119px){body.web-online{padding:20px}.web-online .phone-shell{width:min(100%,620px);border-radius:22px}.web-online .sticky-action{width:min(calc(100% - 40px),620px)}.web-online .live-bottom{width:min(calc(100% - 68px),586px)}.web-mobile-hud{width:min(calc(100% - 54px),586px)}}

.side-announcement{margin-top:13px;border:1px solid #2a4059;border-radius:16px;padding:14px;background:linear-gradient(135deg,#111d2b,#0b121d);color:#fff}.side-announcement small,.drawer-announcements>small{display:block;color:#62d8ff;font:800 8px system-ui;letter-spacing:.14em}.side-announcement b{display:block;margin:5px 0;font:900 13px system-ui}.side-announcement p{display:-webkit-box;margin:0;color:#8196aa;font:500 10px/1.55 system-ui;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:pre-line}.side-announcement.level-update{border-color:#59447e}.side-announcement.level-event{border-color:#755d31}.side-announcement.level-maintenance{border-color:#743946}.drawer-announcements{border:1px solid #263a50;border-radius:18px;padding:17px;margin:14px 0;background:#0c1420}.drawer-announcements h3{margin:4px 0 12px;font:900 17px system-ui}.drawer-announcements article{border-left:3px solid #3eb8e7;padding:10px 11px;margin:8px 0;background:#0a111b;border-radius:0 11px 11px 0}.drawer-announcements article.level-update{border-color:#a882ef}.drawer-announcements article.level-event{border-color:#ffc45e}.drawer-announcements article.level-maintenance{border-color:#ff6f82}.drawer-announcements article b{font:900 12px system-ui}.drawer-announcements article p{margin:5px 0;color:#879caf;font:500 11px/1.55 system-ui;white-space:pre-line}.drawer-announcements article time{color:#596f84;font:700 8px system-ui}
@media (min-width:1120px){body.web-online{grid-template-columns:minmax(250px,1fr) minmax(540px,620px) minmax(280px,1fr);gap:clamp(24px,3vw,58px)}.web-online .phone-shell{width:100%;max-width:620px}.web-online .sticky-action{width:620px}.web-online .live-bottom{width:586px}.collection-detail-sheet{width:min(620px,100%)}.info-sheet{max-width:590px}}
@media (max-width:520px){body.web-online{min-height:100svh}.web-online .phone-shell{min-height:100svh;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.mode-card,.team,.primary,.secondary,.rune-card,.auth-submit{min-height:44px}.player-card,.collection-card,.pack-card{overflow:hidden}.screen-head h1{overflow-wrap:anywhere}.pack-odds{gap:4px}.pack-odds span{font-size:7px;padding-inline:2px}.pack-odds b{min-width:20px}}