:root{color-scheme:dark;--bg:#102321;--bg-2:#142d2a;--panel:#1b3431;--panel-2:#203b37;--line:rgba(224,255,215,.13);--text:#f6f5dc;--muted:#a9c1ae;--soft:#6e9380;--lime:#b9f35b;--mint:#66f0bd;--gold:#ffd166;--orange:#ff934d;--pink:#ff728a;--blue:#6bc8ff;--shadow:0 16px 40px rgba(4,18,14,.34);--radius:20px;--font:'Inter',system-ui,-apple-system,sans-serif;--display:'Barlow Condensed','Inter',system-ui,sans-serif}
*{box-sizing:border-box}html{min-width:320px;background:var(--bg);scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;color:var(--text);font:500 14px/1.45 var(--font);background:radial-gradient(ellipse at 48% -30%,#2a5248 0,transparent 57%),var(--bg);overflow-x:hidden}button,a,input{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.5)}a{color:inherit;text-decoration:none}.ambient{position:fixed;width:440px;height:440px;border-radius:50%;filter:blur(85px);opacity:.1;pointer-events:none;z-index:0}.ambient-one{background:#82fc9b;top:180px;left:-280px}.ambient-two{background:#ffaa4c;right:-300px;top:780px}.app{position:relative;z-index:1;min-height:100vh}.topbar{height:76px;padding:0 max(22px,calc((100vw - 1420px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(224,255,215,.1);background:rgba(13,34,30,.8);backdrop-filter:blur(20px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;min-width:190px}.brand-mark{width:43px;height:43px;display:grid;place-items:center;background:var(--lime);border-radius:13px;box-shadow:0 6px 0 #789b36,0 12px 24px rgba(185,243,91,.13);color:#153025}.brand-mark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}.brand-mark svg path:last-child{fill:currentColor;stroke:none}.brand-type{display:flex;flex-direction:column;line-height:1}.brand-type>b{font-size:19px;letter-spacing:1.2px;font-weight:1000}.brand-type>b span{color:var(--lime)}.brand-type small{margin-top:6px;font-size:8px;letter-spacing:1.7px;font-weight:900;color:var(--muted)}.topbar-actions{display:flex;align-items:center;gap:12px}.wallet-quick{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:900;letter-spacing:1px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:9px 11px;border-radius:10px}.wallet-quick b{font-size:9px;color:var(--orange)}.wallet-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 4px rgba(255,147,77,.1)}.currency-pill{display:flex;align-items:center;gap:7px;border:1px solid rgba(255,209,102,.27);background:rgba(255,209,102,.09);border-radius:12px;padding:8px 11px;min-height:42px}.currency-pill strong{font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}.currency-pill small{font-size:8px;letter-spacing:.8px;color:var(--gold);font-weight:900}.coin-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fff18a,#e99b35);color:#76501b;font-weight:1000;box-shadow:inset 0 0 0 2px rgba(255,255,255,.34)}.profile-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:5px 10px 5px 5px;cursor:pointer;text-align:left}.profile-avatar{height:36px;width:32px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:linear-gradient(150deg,#37675a,#243f39)}.profile-avatar img{width:100%;height:115%;object-fit:contain;object-position:center bottom}.profile-chip-text{display:flex;flex-direction:column;line-height:1.2}.profile-chip-text b{font-size:10px;color:var(--lime);letter-spacing:.6px}.profile-chip-text small{margin-top:4px;font-size:8px;color:var(--muted);letter-spacing:1px}.profile-chevron{color:var(--muted);font-size:14px;margin-left:4px}.main-content{max-width:1420px;margin:0 auto;padding:26px 24px 28px;display:grid;grid-template-columns:184px minmax(0,1fr);gap:24px}.desktop-nav{align-self:start;position:sticky;top:100px;display:flex;flex-direction:column;gap:8px;padding:10px 0}.nav-item{position:relative;display:flex;align-items:center;gap:13px;height:52px;padding:0 14px;border:1px solid transparent;border-radius:13px;background:transparent;color:#9bb5a3;font-weight:900;font-size:10px;letter-spacing:1.2px;text-align:left;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}.nav-item.active{background:linear-gradient(100deg,rgba(185,243,91,.15),rgba(185,243,91,.04));border-color:rgba(185,243,91,.24);color:var(--lime);box-shadow:inset 3px 0 0 var(--lime)}.nav-icon{width:23px;height:23px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.055);font-size:18px}.nav-item.active .nav-icon{background:var(--lime);color:#1b352a}.nav-dot{position:absolute;right:13px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--orange)}.screen-view{display:none;min-width:0;animation:screen-enter .24s ease both}.screen-view.active{display:block}@keyframes screen-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 21px}.eyebrow,.section-kicker{font-size:9px;font-weight:1000;letter-spacing:1.6px;color:#93bd9e}.eyebrow{display:flex;align-items:center;gap:6px}.eyebrow-spark{color:var(--gold);font-size:14px}.eyebrow-divider{color:#42695a;margin:0 4px}.welcome-row h1,.page-title-row h1,.battle-heading h1{font:900 clamp(38px,4vw,56px)/.9 var(--display);letter-spacing:.6px;margin:12px 0 8px}.welcome-row h1 span,.page-title-row h1 span,.battle-heading h1 span{color:var(--lime)}.welcome-row p,.page-title-row p{margin:0;color:var(--muted);font-size:12px}.season-medal{height:58px;width:58px;flex:0 0 58px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#344c3d,#23392f);border:1px solid rgba(255,209,102,.28);box-shadow:0 5px 0 #11291f;transform:rotate(4deg)}.season-medal span{font:900 11px var(--display);letter-spacing:2px;color:var(--gold)}.season-medal small{font-size:6px;letter-spacing:1px;color:#a7bda1}.season-medal b{font-size:10px;color:var(--lime)}.hero-feature{min-height:390px;border-radius:24px;overflow:hidden;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 43%;background:#1b3e36;border:1px solid rgba(214,255,187,.2);box-shadow:var(--shadow)}.hero-feature::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(16,50,39,.97) 0%,rgba(21,66,47,.9) 42%,rgba(40,101,54,.43) 72%,rgba(26,71,48,.45)),url('assets/arena.webp') center/cover;opacity:.98}.feature-glow{position:absolute;right:9%;top:5%;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(185,243,91,.27),rgba(99,242,185,.04) 55%,transparent 72%);filter:blur(6px)}.feature-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(207,255,205,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(207,255,205,.22) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to right,transparent 0%,black 60%,black)}.feature-copy{position:relative;z-index:2;padding:29px 0 62px 32px;max-width:520px}.mode-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(185,243,91,.27);border-radius:7px;background:rgba(12,34,25,.55);font-size:8px;font-weight:1000;letter-spacing:1px;color:#e1efcc}.mode-tag i{height:7px;width:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}.mode-tag b{color:var(--gold)}.feature-copy h2{font:900 clamp(40px,4.1vw,61px)/.8 var(--display);letter-spacing:.3px;margin:24px 0 15px;color:#f6f7dc;text-shadow:0 4px 0 rgba(12,43,31,.36)}.feature-copy h2 span{color:var(--lime)}.feature-copy p{font-size:11px;line-height:1.65;max-width:360px;margin:0;color:#bed6b9}.feature-details{display:flex;gap:23px;margin:18px 0 20px}.feature-details>span{display:flex;flex-direction:column;border-left:2px solid rgba(185,243,91,.45);padding-left:9px;line-height:1}.feature-details b{font:900 22px var(--display);color:#fff}.feature-details small{font-size:7px;letter-spacing:1px;color:#b2c9ab;margin-top:5px;font-weight:900}.primary-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;padding:0 15px;border:0;border-radius:13px;background:var(--lime);box-shadow:0 5px 0 #6c9835,0 12px 24px rgba(123,198,63,.16);color:#203826;font-weight:1000;font-size:12px;letter-spacing:1.2px;cursor:pointer;transition:transform .14s,filter .14s}.primary-cta:hover{filter:brightness(1.06);transform:translateY(-2px)}.primary-cta:active{transform:translateY(3px);box-shadow:0 2px 0 #6c9835}.feature-copy>.primary-cta{width:225px}.primary-cta>span:not(.cta-play){margin-left:auto;font-size:18px}.primary-cta>span:nth-child(2){display:flex;flex-direction:column;align-items:flex-start;flex:1}.primary-cta small{font-size:7px;color:#516c2d;letter-spacing:1.4px;margin-top:4px}.cta-play{height:30px;width:30px;display:grid;place-items:center;background:#203a29;color:var(--lime);border-radius:9px;font-size:11px;padding-left:2px}.feature-art{position:relative;z-index:1;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.feature-art>img{position:absolute;height:96%;width:90%;max-width:355px;object-fit:contain;object-position:center bottom;bottom:33px;filter:drop-shadow(0 16px 13px rgba(5,23,15,.46));animation:hero-float 4s ease-in-out infinite}.art-ring{position:absolute;border-radius:50%;border:1px solid rgba(203,252,143,.23);aspect-ratio:1;top:17%;left:7%;width:86%;max-width:330px}.ring-two{top:24%;left:14%;width:72%;border-style:dashed;border-color:rgba(234,236,127,.23);animation:slow-spin 44s linear infinite}.art-spark{position:absolute;color:var(--gold);font-size:31px;text-shadow:0 0 20px rgba(255,209,102,.6)}.spark-a{right:18%;top:15%}.spark-b{left:14%;top:37%;color:var(--lime);font-size:24px}.hero-caption{position:absolute;bottom:45px;left:16%;right:7%;padding:12px 15px;border:1px solid rgba(225,255,200,.22);border-radius:12px;background:rgba(17,47,34,.84);backdrop-filter:blur(12px);display:flex;flex-direction:column;box-shadow:0 12px 22px rgba(2,15,8,.24)}.caption-label{font-size:7px;letter-spacing:1.5px;color:#aac7a7;font-weight:900}.hero-caption b{font:900 23px/1 var(--display);letter-spacing:1px;margin:4px 0;color:var(--lime)}.hero-caption small{font-size:7px;font-weight:900;letter-spacing:.8px;color:#d2e4c6}.feature-foot{position:absolute;bottom:0;left:0;right:0;height:34px;background:rgba(9,32,24,.75);border-top:1px solid rgba(230,255,220,.12);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:7px;letter-spacing:1px;color:#9cbaa2;font-weight:900}.feature-foot span{display:flex;align-items:center;gap:7px}.feature-foot b{font-size:14px;color:var(--gold)}.status-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 9px rgba(102,240,189,.65);flex:0 0 auto}.home-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:17px}.panel{background:linear-gradient(145deg,rgba(32,59,53,.97),rgba(24,47,43,.96));border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 30px rgba(3,17,12,.18)}.selected-hero-panel,.daily-panel{padding:20px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.panel-heading h2{font:800 23px/1 var(--display);margin:5px 0 0;letter-spacing:.2px}.text-link{border:0;background:transparent;display:inline-flex;align-items:center;gap:9px;font-size:8px;font-weight:1000;letter-spacing:1px;color:var(--lime);cursor:pointer;padding:8px 0}.text-link span{font-size:14px}.hero-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.hero-pick{position:relative;min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(7,24,19,.25);height:97px;cursor:pointer;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:0;transition:transform .18s,border-color .18s,background .18s}.hero-pick:hover{transform:translateY(-2px);border-color:rgba(185,243,91,.45)}.hero-pick.active{border-color:var(--lime);background:rgba(185,243,91,.11);box-shadow:inset 0 -3px var(--lime)}.hero-pick img{width:100%;height:85%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 5px rgba(0,0,0,.28))}.hero-pick span{position:absolute;left:4px;right:4px;bottom:4px;border-radius:5px;background:rgba(13,37,28,.83);padding:4px 2px;font-size:7px;letter-spacing:.4px;font-weight:1000;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-pick.locked img{filter:grayscale(.7) brightness(.72)}.hero-pick.locked::after{content:'⌑';position:absolute;top:8px;right:8px;background:rgba(15,39,29,.9);border-radius:50%;width:19px;height:19px;display:grid;place-items:center;font-size:12px;color:var(--gold)}.selected-hero-info{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;margin-top:13px}.selected-hero-info>div{display:flex;flex-direction:column;gap:3px}.selected-hero-info b{font-size:10px;letter-spacing:1px;color:var(--lime)}.selected-hero-info span{font-size:9px;color:var(--muted)}.square-action{width:31px;height:31px;border:1px solid rgba(185,243,91,.25);background:rgba(185,243,91,.08);border-radius:9px;color:var(--lime);font-size:16px;cursor:pointer}.count-pill{background:rgba(185,243,91,.12);border:1px solid rgba(185,243,91,.23);border-radius:8px;padding:6px 9px;font-size:8px;font-weight:1000;letter-spacing:.6px;color:var(--lime);white-space:nowrap}.mini-quest-list{display:flex;flex-direction:column;gap:10px}.mini-quest{display:grid;grid-template-columns:34px minmax(0,1fr) 43px;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.065);border-radius:11px;background:rgba(9,27,21,.23)}.mini-quest-icon{height:33px;width:33px;display:grid;place-items:center;border-radius:9px;background:rgba(255,209,102,.12);color:var(--gold);font-size:17px}.mini-quest-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.mini-quest-copy b{font-size:9px;letter-spacing:.8px}.mini-quest-copy small{font-size:8px;color:var(--muted)}.mini-quest-progress{font-size:9px;font-weight:900;color:#bdcfb3;text-align:right}.mini-quest-progress.done{color:var(--mint)}.secondary-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:43px;padding:0 13px;border:1px solid rgba(185,243,91,.23);border-radius:11px;background:rgba(185,243,91,.065);color:var(--lime);font-weight:1000;font-size:9px;letter-spacing:1px;cursor:pointer;transition:background .15s,border-color .15s}.secondary-cta:hover{background:rgba(185,243,91,.13);border-color:rgba(185,243,91,.4)}.secondary-cta span{font-size:17px}.daily-panel>.secondary-cta{margin-top:13px}.quick-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.quick-stat{min-width:0;display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.026)}.stat-icon{height:34px;width:34px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;font-size:19px;font-weight:900}.stat-trophy{background:rgba(255,209,102,.12);color:var(--gold)}.stat-kos{background:rgba(255,114,138,.12);color:var(--pink)}.stat-xp{background:rgba(185,243,91,.12);color:var(--lime)}.quick-stat>span:nth-child(2){display:flex;flex-direction:column;min-width:0;gap:3px}.quick-stat small{font-size:7px;color:var(--muted);font-weight:900;letter-spacing:.9px;white-space:nowrap}.quick-stat b{font:900 21px/1 var(--display);font-variant-numeric:tabular-nums}.stat-trend{margin-left:auto;align-self:flex-start;color:#789f83;font-size:6px;letter-spacing:1px;font-weight:1000;white-space:nowrap}.stat-trend i{font-style:normal;color:var(--lime)}.demo-disclaimer{display:flex;gap:8px;align-items:flex-start;margin:15px 0 0;color:#83a18c;font-size:9px;line-height:1.6}.demo-disclaimer>span{color:var(--gold);font-size:13px;flex:0 0 auto}.app-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:25px;padding:16px 0 0;border-top:1px solid rgba(224,255,215,.09);color:#71907d;font-size:7px;font-weight:900;letter-spacing:1.1px}.footer-brand{color:#b9d2b7}.footer-brand i{font-style:normal;color:var(--lime);padding:0 4px}.footer-build{display:flex;align-items:center;gap:6px}
/* Battle screen and controls */
.battle-heading{display:flex;align-items:center;gap:13px;margin-bottom:18px}.battle-heading>div{flex:1;min-width:0}.battle-heading h1{font-size:37px;margin:6px 0 0}.battle-heading .section-kicker{display:flex;align-items:center;gap:7px}.back-button,.icon-button{height:42px;width:42px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.045);border-radius:12px;cursor:pointer;font-size:20px}.battle-time{background:#1f3d32;border:1px solid rgba(185,243,91,.28);border-radius:11px;padding:10px 13px;color:var(--lime);font:900 22px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:1px}.icon-button{color:var(--gold);font-weight:1000}.battle-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:16px;align-items:start}.battle-main{min-width:0}.game-stage{position:relative;overflow:hidden;aspect-ratio:960/620;background:#62c66b;border:3px solid #2a513e;border-radius:18px;box-shadow:0 8px 0 #0b251b,0 18px 40px rgba(3,17,12,.3);touch-action:none;isolation:isolate}.game-stage canvas{display:block;width:100%;height:100%;touch-action:none}.stage-top-hud{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none}.hud-chip{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:rgba(20,48,37,.88);border:1px solid rgba(242,255,220,.33);border-radius:11px;box-shadow:0 4px 0 rgba(14,46,29,.3);backdrop-filter:blur(6px)}.hud-avatar{width:31px;height:31px;background:#345847;border-radius:8px;overflow:hidden}.hud-avatar img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.hud-chip>span:last-child{display:flex;flex-direction:column;line-height:1.1}.hud-chip b{font-size:8px;letter-spacing:.8px}.hud-chip small{font-size:7px;color:var(--lime);margin-top:4px;font-weight:1000;letter-spacing:.7px}.hud-survivors,.hud-cube-count{display:flex;align-items:center;gap:6px;padding:9px 10px;border:1px solid rgba(242,255,220,.25);border-radius:10px;background:rgba(20,48,37,.88);box-shadow:0 4px 0 rgba(14,46,29,.3)}.survivor-flame{color:var(--gold);font-size:15px}.hud-survivors b,.hud-cube-count b{font:900 17px/1 var(--display)}.hud-survivors small{font-size:7px;color:#cad9c5;font-weight:900}.hud-cube-count{margin-left:auto;color:var(--gold)}.hud-cube-count span{font-size:15px}.stage-tip{position:absolute;top:64px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100% - 26px);padding:8px 10px;border-radius:9px;background:rgba(12,39,29,.86);border:1px solid rgba(185,243,91,.35);color:#e4efd4;font-size:9px;white-space:normal;box-shadow:0 6px 18px rgba(9,32,19,.18);pointer-events:auto}.stage-tip b{color:var(--lime);letter-spacing:1px;font-size:8px}.stage-tip button{border:0;background:transparent;color:#c2d8bd;font-size:16px;cursor:pointer}.battle-bottom-hud{position:absolute;bottom:110px;left:13px;right:13px;display:flex;align-items:flex-end;gap:13px;pointer-events:none}.health-widget,.super-widget{width:43%;max-width:225px;background:rgba(15,46,29,.83);border:1px solid rgba(242,255,220,.2);border-radius:9px;padding:8px 9px}.health-copy,.super-label{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:7px;font-weight:1000;letter-spacing:.7px}.health-copy>span,.super-label>span{color:#b4d5b9}.health-copy b,.super-label b{font-size:8px;color:#fff}.health-track,.super-track{height:7px;border-radius:9px;overflow:hidden;background:rgba(5,18,12,.5);margin-top:6px}.health-track i,.super-track i{display:block;width:100%;height:100%;border-radius:9px;background:linear-gradient(90deg,#50d982,#b6f858);transition:width .15s}.super-track i{width:0;background:linear-gradient(90deg,#8ee3ff,#dcabff);box-shadow:0 0 13px #9fcdff}.super-widget{margin-left:auto}.controls-overlay{position:absolute;left:13px;right:13px;bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.joystick{position:relative;width:106px;height:106px;flex:0 0 auto;border:1px solid rgba(244,255,231,.35);border-radius:50%;background:rgba(16,52,31,.42);box-shadow:inset 0 0 0 10px rgba(227,255,218,.05),0 5px 18px rgba(9,39,20,.2);touch-action:none;pointer-events:auto;user-select:none}.joystick-ring{position:absolute;inset:20px;border:1px dashed rgba(245,255,230,.25);border-radius:50%}.joystick-knob{position:absolute;width:43px;height:43px;top:31px;left:31px;border-radius:50%;background:linear-gradient(145deg,#f4f6d9,#a9d57c);border:2px solid rgba(255,255,255,.72);box-shadow:0 4px 0 #5c9239,0 6px 12px rgba(0,0,0,.25);pointer-events:none}.joystick-label{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:7px;font-weight:1000;letter-spacing:1.2px;color:#d9f3cb;text-shadow:0 1px 3px #17402a}.action-controls{display:flex;align-items:flex-end;gap:12px;pointer-events:auto}.attack-button,.super-button{display:flex;align-items:center;justify-content:center;flex-direction:column;border:3px solid rgba(255,255,255,.7);border-radius:50%;cursor:pointer;user-select:none;touch-action:none;box-shadow:0 6px 0 rgba(22,46,28,.65),0 9px 20px rgba(0,0,0,.24);transition:transform .1s,filter .15s}.attack-button:active,.super-button:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(22,46,28,.65)}.attack-button{height:78px;width:78px;background:radial-gradient(circle at 32% 25%,#ffbb65,#fb7048 69%,#d4443d);color:#fff8df}.attack-target{font-size:29px;font-weight:900;line-height:1}.attack-button b,.super-button b{font-size:8px;letter-spacing:.7px}.super-button{width:65px;height:65px;background:radial-gradient(circle at 30% 22%,#c2f98c,#82d63f 70%,#4aab47);color:#193e2c;margin-bottom:8px}.super-button>span{font-size:23px;line-height:1}.super-button small{font-size:6px;letter-spacing:.4px;font-weight:1000;margin-top:2px}.super-button.ready{animation:super-pulse 1s ease-in-out infinite;box-shadow:0 0 0 4px rgba(222,255,101,.2),0 6px 0 rgba(22,46,28,.65),0 10px 23px rgba(162,240,80,.25)}.super-button:disabled{filter:grayscale(.55);opacity:.8}.battle-controls-hint{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:12px 4px 0;color:#799f86;font-size:7px;font-weight:1000;letter-spacing:.8px}.battle-controls-hint>span{display:flex;align-items:center;gap:4px}.battle-controls-hint kbd{min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border:1px solid rgba(224,255,215,.16);border-radius:4px;background:rgba(255,255,255,.045);color:#d0e4cf;font:800 7px var(--font)}.control-hint-mobile{display:none!important}.battle-sidebar{display:flex;flex-direction:column;gap:14px}.rival-panel,.battle-objective{padding:16px}.rival-panel .panel-heading h2{font-size:21px}.rival-list{display:flex;flex-direction:column;gap:8px}.rival-row{display:grid;grid-template-columns:42px minmax(0,1fr) 35px;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.075);border-radius:11px;padding:8px;background:rgba(7,24,18,.2)}.rival-avatar{width:40px;height:42px;display:grid;place-items:end center;border-radius:9px;background:linear-gradient(135deg,#3e5948,#263d32);overflow:hidden}.rival-avatar img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.rival-info{display:flex;flex-direction:column;gap:5px;min-width:0}.rival-info b{font-size:9px;letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rival-mini-health{height:5px;border-radius:8px;background:rgba(0,0,0,.28);overflow:hidden}.rival-mini-health i{display:block;height:100%;background:#74e98e;border-radius:8px}.rival-info small{font-size:7px;color:#8fae94}.rival-state{font-size:7px;color:var(--mint);font-weight:1000;text-align:right}.rival-row.out{opacity:.45;filter:grayscale(.6)}.rival-row.out .rival-state{color:var(--pink)}.sidebar-note{margin-top:12px;display:flex;gap:8px;align-items:flex-start;padding:10px;border-radius:10px;background:rgba(185,243,91,.06);color:#9ab79d;font-size:8px;line-height:1.55}.sidebar-note>span:first-child{color:var(--gold);font-size:13px}.battle-objective h3{font:800 23px/1 var(--display);margin:10px 0 8px}.battle-objective p{font-size:9px;color:var(--muted);line-height:1.7;margin:0 0 16px}.objective-row{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid var(--line);font-size:7px;font-weight:1000;letter-spacing:.8px;color:#92b19a}.objective-row b{font:900 16px/1 var(--display);color:var(--lime)}.pause-overlay{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(12,35,25,.77);backdrop-filter:blur(10px)}.pause-overlay[hidden]{display:none}.pause-card{text-align:center;width:min(310px,calc(100% - 30px));padding:26px 22px;border:1px solid rgba(185,243,91,.28);border-radius:20px;background:linear-gradient(145deg,#264638,#19382e);box-shadow:0 15px 45px rgba(4,18,11,.35)}.pause-emblem{margin:auto;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--lime);color:#1c3b28;font-size:20px;font-weight:1000}.pause-card h2{font:900 30px/1 var(--display);margin:15px 0 8px}.pause-card p{font-size:10px;color:#a8c6ad;line-height:1.7}.compact{min-height:46px;font-size:10px;width:100%;margin-top:10px}.centered{justify-content:center;width:100%;margin-top:8px}
/* Collection, quests, rankings and profile */
.page-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:2px 0 23px}.page-title-row h1{font-size:clamp(38px,4vw,53px);margin:12px 0 9px}.collection-currency{display:flex;align-items:center;gap:7px;align-self:flex-start;padding:11px 12px;background:rgba(255,209,102,.09);border:1px solid rgba(255,209,102,.22);border-radius:11px}.collection-currency>span{color:var(--gold);font-size:17px}.collection-currency b{font-size:13px}.collection-currency small{font-size:7px;color:var(--gold);font-weight:1000;letter-spacing:.8px}.collection-banner{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:128px;padding:23px 27px;border:1px solid rgba(185,243,91,.17);border-radius:18px;background:linear-gradient(110deg,#294b38,#1e3a31 70%,#294c3b)}.collection-banner::after{content:'';position:absolute;width:200px;height:200px;right:5%;top:-38px;border:1px dashed rgba(185,243,91,.2);border-radius:50%;box-shadow:0 0 0 22px rgba(185,243,91,.025),0 0 0 45px rgba(185,243,91,.02)}.collection-banner h2{font:800 29px/1 var(--display);margin:8px 0}.collection-banner p{color:#a9c7a9;font-size:10px;margin:0;max-width:520px;line-height:1.65}.banner-emblem{position:relative;z-index:1;width:70px;height:70px;display:grid;place-items:center;border-radius:19px;background:rgba(185,243,91,.12);border:1px solid rgba(185,243,91,.25);color:var(--lime);font-size:33px}.hero-collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:18px}.hero-collection-card{position:relative;display:grid;grid-template-columns:42% minmax(0,1fr);gap:10px;min-height:260px;padding:12px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(35,66,54,.98),rgba(23,45,39,.98));box-shadow:0 12px 26px rgba(4,18,13,.14)}.hero-collection-card.selected{border-color:rgba(185,243,91,.56);box-shadow:inset 0 0 0 1px rgba(185,243,91,.16),0 12px 26px rgba(4,18,13,.14)}.collection-hero-art{position:relative;min-height:230px;border-radius:12px;background:radial-gradient(circle at 50% 34%,var(--hero-accent-soft),transparent 55%),linear-gradient(160deg,#2b5140,#1c352d);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}.collection-hero-art::before{content:'';position:absolute;top:14%;left:12%;width:76%;aspect-ratio:1;border:1px solid var(--hero-accent-soft);border-radius:50%}.collection-hero-art img{position:relative;z-index:1;height:90%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 9px 9px rgba(0,0,0,.25))}.hero-card-lock{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(10,28,20,.5);font-size:30px;color:var(--gold)}.hero-card-copy{min-width:0;display:flex;flex-direction:column;padding:6px 2px}.hero-rarity{font-size:7px;font-weight:1000;letter-spacing:1.2px;color:var(--hero-accent);display:flex;align-items:center;gap:6px}.hero-rarity::before{content:'';height:6px;width:6px;border-radius:50%;background:var(--hero-accent)}.hero-card-copy h3{font:900 26px/.95 var(--display);letter-spacing:.5px;margin:9px 0 4px;overflow-wrap:anywhere}.hero-card-copy>small{font-size:8px;color:#a9c5ac}.hero-card-copy p{font-size:9px;line-height:1.6;color:#adc5ae;margin:12px 0 14px}.hero-role-pill{align-self:flex-start;font-size:7px;font-weight:1000;letter-spacing:.8px;padding:5px 7px;border-radius:6px;background:var(--hero-accent-soft);color:var(--hero-accent);margin-bottom:10px}.hero-stat{display:grid;grid-template-columns:47px minmax(0,1fr);align-items:center;gap:8px;margin-bottom:7px}.hero-stat>span{font-size:7px;letter-spacing:.6px;color:#9cbaa3;font-weight:1000}.hero-stat-track{height:6px;background:rgba(0,0,0,.25);border-radius:5px;overflow:hidden}.hero-stat-track i{display:block;height:100%;border-radius:5px;background:var(--hero-accent)}.hero-card-actions{margin-top:auto}.hero-card-actions .primary-cta,.hero-card-actions .secondary-cta{min-height:38px;padding:0 9px;font-size:8px;letter-spacing:.6px;border-radius:9px}.hero-card-actions .primary-cta{box-shadow:0 3px 0 #6c9835}.hero-card-actions .primary-cta span{font-size:15px}.hero-card-actions .secondary-cta{justify-content:center;min-height:38px}.quest-reset-pill{min-width:73px;display:flex;flex-direction:column;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}.reset-glyph{font-size:17px;color:var(--lime)}.quest-reset-pill small{font-size:6px;letter-spacing:1px;color:var(--muted);margin:4px 0}.quest-reset-pill b{font:900 18px/1 var(--display);color:var(--lime)}.quest-highlight{display:grid;grid-template-columns:56px minmax(0,1fr) 110px;gap:14px;align-items:center;padding:19px;background:linear-gradient(100deg,rgba(185,243,91,.11),rgba(185,243,91,.025));border:1px solid rgba(185,243,91,.2);border-radius:17px;margin-bottom:17px}.quest-highlight-glyph{height:54px;width:54px;display:grid;place-items:center;border-radius:15px;background:rgba(185,243,91,.12);color:var(--lime);font-size:30px}.quest-highlight h2{font:800 25px/1 var(--display);margin:5px 0}.quest-highlight p{font-size:9px;color:var(--muted);margin:0;line-height:1.6}.quest-highlight-progress{text-align:right;display:flex;flex-direction:column;gap:3px}.quest-highlight-progress>b{font:900 25px/1 var(--display);color:var(--lime)}.quest-highlight-progress small{font-size:7px;color:var(--muted);letter-spacing:1px;font-weight:1000}.mini-progress{height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:5px}.mini-progress i{display:block;width:0;height:100%;border-radius:5px;background:var(--lime)}.quest-list{display:flex;flex-direction:column;gap:10px}.quest-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.quest-card-icon{height:46px;width:46px;display:grid;place-items:center;border-radius:13px;background:rgba(255,209,102,.11);color:var(--gold);font-size:22px}.quest-copy{min-width:0}.quest-copy h3{font-size:10px;letter-spacing:1px;margin:0 0 5px}.quest-copy p{font-size:9px;color:var(--muted);margin:0}.quest-progress-meta{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:8px;color:#9fb8a2}.quest-progress-track{height:5px;width:min(220px,100%);border-radius:5px;background:rgba(0,0,0,.25);overflow:hidden}.quest-progress-track i{display:block;height:100%;border-radius:5px;background:var(--mint)}.quest-rewards{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;margin-top:6px}.quest-rewards span{font-size:8px;font-weight:1000;color:var(--gold)}.quest-rewards b{color:#c7d8c5}.claim-button{min-height:37px;min-width:93px;border:1px solid rgba(185,243,91,.28);border-radius:9px;background:rgba(185,243,91,.09);color:var(--lime);font-size:8px;letter-spacing:.8px;font-weight:1000;cursor:pointer}.claim-button.available{background:var(--lime);color:#1e3929;box-shadow:0 3px 0 #709c38}.claim-button.claimed{background:rgba(102,240,189,.08);color:var(--mint);border-color:rgba(102,240,189,.18)}.weekly-panel{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);margin-top:17px}.weekly-icon{height:53px;width:53px;display:grid;place-items:center;background:rgba(255,209,102,.12);color:var(--gold);font-size:28px;border-radius:14px}.weekly-panel h3{font:800 23px/1 var(--display);margin:5px 0}.weekly-panel p{font-size:9px;color:var(--muted);margin:0 0 12px}.weekly-track{height:6px;border-radius:8px;background:rgba(0,0,0,.23);overflow:hidden}.weekly-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lime),var(--mint));border-radius:8px}.weekly-progress{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.weekly-progress b{font:900 17px/1 var(--display);color:var(--lime)}.weekly-progress small{font-size:7px;color:var(--muted);letter-spacing:.8px;font-weight:1000}.leaderboard-season{font-size:8px;line-height:1.4;letter-spacing:1px;color:var(--gold);text-align:center;border:1px solid rgba(255,209,102,.27);padding:8px 12px;border-radius:10px;background:rgba(255,209,102,.06)}.leaderboard-season b{font:900 23px/1 var(--display)}.ranking-banner{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:188px;padding:25px 28px;border-radius:18px;border:1px solid rgba(255,209,102,.22);background:linear-gradient(105deg,#2e503b,#273f32 70%,#54472b);margin-bottom:18px}.ranking-banner-bg{position:absolute;inset:0;opacity:.12;background:repeating-linear-gradient(135deg,transparent 0 27px,rgba(255,255,255,.2) 28px 29px)}.ranking-banner-copy{position:relative}.ranking-banner h2{font:900 39px/.88 var(--display);margin:10px 0}.ranking-banner h2 span{color:var(--gold)}.ranking-banner p{color:#c0cbb0;font-size:10px;margin:0}.ranking-crown{position:relative;display:grid;place-items:center;width:120px;height:120px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,209,102,.35);background:rgba(255,209,102,.08);font-size:64px;color:var(--gold);text-shadow:0 0 25px rgba(255,209,102,.3)}.leaderboard-panel{padding:20px}.demo-tag{font-size:7px;letter-spacing:.8px;font-weight:1000;color:var(--gold);padding:6px 8px;border-radius:7px;background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.17)}.leaderboard-table-head,.leaderboard-row{display:grid;grid-template-columns:minmax(0,1fr) 65px 82px;align-items:center;gap:12px}.leaderboard-table-head{padding:9px 12px;background:rgba(0,0,0,.13);border-radius:8px;color:#81a18a;font-size:7px;font-weight:1000;letter-spacing:1px}.leaderboard-table-head span:not(:first-child){text-align:right}.leaderboard-rows{display:flex;flex-direction:column;gap:5px;margin-top:6px}.leaderboard-row{min-height:55px;padding:7px 12px;border-radius:10px;border-bottom:1px solid rgba(255,255,255,.05)}.leaderboard-row.me{background:rgba(185,243,91,.08);border:1px solid rgba(185,243,91,.19)}.leaderboard-player{display:flex;align-items:center;gap:10px;min-width:0}.rank-number{width:24px;height:26px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.045);color:#9bb7a2;font:900 15px var(--display)}.leaderboard-row:nth-child(1) .rank-number{color:var(--gold);background:rgba(255,209,102,.13)}.leaderboard-row:nth-child(2) .rank-number{color:#d3e0d4}.leaderboard-row:nth-child(3) .rank-number{color:#e7a676}.rank-avatar{width:32px;height:32px;border-radius:9px;background:#2c4c3b;overflow:hidden;display:grid;place-items:end center;flex:0 0 auto}.rank-avatar img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.rank-name{min-width:0;display:flex;flex-direction:column;gap:3px}.rank-name b{font-size:9px;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-name small{font-size:7px;color:#8fae97}.me-label{font-size:6px;color:var(--lime);letter-spacing:.7px;font-weight:1000}.leaderboard-wins,.leaderboard-xp{text-align:right;font:900 17px/1 var(--display);font-variant-numeric:tabular-nums}.leaderboard-wins{color:#cfe4d1}.leaderboard-xp{color:var(--lime)}.leaderboard-foot{display:flex;gap:8px;align-items:flex-start;margin-top:13px;font-size:9px;color:#8eab94;line-height:1.6}.leaderboard-foot span{color:var(--gold);font-size:12px}.share-cta{margin-top:15px}.profile-level-badge{width:66px;height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:17px;background:rgba(185,243,91,.1);border:1px solid rgba(185,243,91,.24);color:var(--lime);flex:0 0 auto}.profile-level-badge small{font-size:7px;letter-spacing:1px;font-weight:1000}.profile-level-badge b{font:900 27px/1 var(--display);margin-top:3px}.profile-hero{display:grid;grid-template-columns:145px minmax(0,1fr);gap:22px;align-items:center;padding:20px}.profile-hero-art{height:170px;border-radius:15px;background:radial-gradient(circle at 50% 28%,rgba(185,243,91,.23),transparent 57%),linear-gradient(140deg,#305641,#1b372c);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.profile-avatar-large{height:100%;width:100%;display:flex;align-items:flex-end;justify-content:center}.profile-avatar-large img{height:96%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 8px rgba(0,0,0,.22))}.profile-main{min-width:0}.profile-main h2{font:900 31px/.95 var(--display);margin:8px 0 7px}.profile-main>p{margin:0 0 23px;font-size:10px;color:var(--muted)}.xp-label{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#8baa93;font-size:7px;font-weight:1000;letter-spacing:.6px}.xp-label b{color:var(--lime);font-size:8px}.xp-track{height:8px;border-radius:8px;background:rgba(0,0,0,.26);overflow:hidden;margin-top:8px}.xp-track i{display:block;width:0;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--lime),var(--mint))}.xp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;color:#8baa93;font-size:7px;letter-spacing:.4px}.profile-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:15px 0}.profile-stat-card{display:flex;flex-direction:column;gap:7px;padding:14px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.026)}.profile-stat-card>span{font-size:19px;color:var(--gold)}.profile-stat-card small{font-size:6px;color:#8eab94;font-weight:1000;letter-spacing:.8px;white-space:nowrap}.profile-stat-card b{font:900 25px/1 var(--display)}.wallet-panel{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px;margin-top:15px}.wallet-emblem{height:53px;width:53px;display:grid;place-items:center;border-radius:14px;background:rgba(107,200,255,.1);border:1px solid rgba(107,200,255,.19);font-size:29px;color:var(--blue)}.wallet-emblem.large{margin-bottom:15px;height:60px;width:60px;font-size:34px}.wallet-copy{min-width:0}.wallet-copy h2{font:800 23px/1 var(--display);margin:7px 0}.wallet-copy p{font-size:9px;color:var(--muted);line-height:1.7;margin:0;max-width:620px}.wallet-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.wallet-steps span{display:flex;align-items:center;gap:6px;font-size:7px;color:#8fae97;font-weight:800}.wallet-steps i{font-style:normal;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(107,200,255,.12);color:var(--blue);font-size:8px}.outline-button{align-self:center;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid rgba(107,200,255,.26);border-radius:9px;background:rgba(107,200,255,.07);color:var(--blue);font-size:8px;font-weight:1000;letter-spacing:.6px;white-space:nowrap;cursor:pointer}.settings-panel{margin-top:15px;padding:19px}.setting-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);cursor:pointer}.setting-row>span:first-child{display:flex;flex-direction:column;gap:4px}.setting-row b{font-size:10px}.setting-row small{font-size:8px;color:var(--muted)}.setting-row input{position:absolute;opacity:0;width:1px;height:1px}.toggle-ui{height:24px;width:42px;border-radius:20px;background:#344d3d;border:1px solid rgba(255,255,255,.1);position:relative;transition:background .2s;flex:0 0 auto}.toggle-ui::after{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#9cbaa2;transition:transform .2s,background .2s}.setting-row input:checked+.toggle-ui{background:rgba(185,243,91,.28);border-color:rgba(185,243,91,.35)}.setting-row input:checked+.toggle-ui::after{transform:translateX(18px);background:var(--lime)}.setting-row input:focus-visible+.toggle-ui{outline:3px solid var(--gold);outline-offset:3px}.danger-link{display:block;margin:12px 0 0 auto;border:0;background:transparent;color:var(--pink);font-size:8px;font-weight:1000;letter-spacing:1px;cursor:pointer;padding:9px 0}
/* Modals */
.modal-backdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;overflow:auto;padding:22px;background:rgba(5,18,13,.79);backdrop-filter:blur(13px)}.modal-backdrop[hidden]{display:none}.tutorial-card,.result-card,.guide-card{position:relative;width:min(100%,440px);overflow:hidden;border-radius:24px;border:1px solid rgba(205,255,183,.22);background:linear-gradient(145deg,#284b3a,#19382e 72%,#153126);box-shadow:0 22px 75px rgba(0,0,0,.45);animation:modal-in .24s ease both}.tutorial-card{padding:19px 22px 21px}.tutorial-top{display:flex;align-items:center;gap:11px}.tutorial-logo{height:37px;width:37px;display:grid;place-items:center;border-radius:11px;background:var(--lime);color:#1a3627;font:900 13px var(--display);letter-spacing:1px;box-shadow:0 3px 0 #6a963a}.tutorial-step-label{font-size:8px;letter-spacing:1.3px;font-weight:1000;color:#9fbea1;flex:1}.modal-close{width:31px;height:31px;border-radius:9px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);color:#c7ddc6;font-size:20px;cursor:pointer}.tutorial-visual{position:relative;margin:18px auto 14px;height:180px;width:100%;border-radius:17px;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(185,243,91,.22),transparent 50%),linear-gradient(135deg,#315b43,#1b3c2e);display:grid;place-items:center}.tutorial-visual::before{content:'';position:absolute;width:152px;height:152px;border:1px dashed rgba(185,243,91,.3);border-radius:50%;box-shadow:0 0 0 18px rgba(185,243,91,.025)}.tutorial-visual img{position:relative;height:96%;width:65%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 9px 10px rgba(0,0,0,.25))}.tutorial-visual .tutorial-symbol{font-size:60px;color:var(--lime);font-weight:900}.tutorial-copy .section-kicker{color:var(--lime)}.tutorial-copy h2{font:900 34px/.95 var(--display);margin:8px 0 9px}.tutorial-copy p{font-size:11px;line-height:1.75;color:#b4d0b5;margin:0;min-height:44px}.tutorial-progress{display:flex;gap:5px;margin-top:18px}.tutorial-progress i{display:block;flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1)}.tutorial-progress i.active{background:var(--lime)}.tutorial-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:17px}.tutorial-actions .text-link{color:#9ab99f}.tutorial-actions .primary-cta{width:136px;min-height:43px;font-size:9px}.result-card{text-align:center;padding:23px 25px 24px;width:min(100%,410px)}.result-confetti{position:absolute;inset:0;pointer-events:none;opacity:.15;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(185,243,91,.15) 23px 25px)}.result-label{position:relative;color:var(--gold);font-size:8px;letter-spacing:2px;font-weight:1000}.result-hero{position:relative;margin:8px auto 0;width:115px;height:118px;display:grid;place-items:end center;overflow:hidden;border-radius:50%;background:radial-gradient(circle,rgba(185,243,91,.21),transparent 69%)}.result-hero img{height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 9px rgba(0,0,0,.25))}.result-card h2{position:relative;font:900 38px/.9 var(--display);margin:8px 0}.result-card h2 span{color:var(--lime)}.result-card>p{position:relative;color:#aac8ae;font-size:10px;line-height:1.6;margin:0}.result-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 12px}.result-stats>div{display:flex;flex-direction:column;gap:5px;padding:10px 5px;background:rgba(7,24,17,.22);border:1px solid rgba(255,255,255,.07);border-radius:10px}.result-stats small{font-size:6px;letter-spacing:.7px;color:#91ae96;font-weight:1000}.result-stats b{font:900 22px/1 var(--display)}.reward-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.reward-item{display:flex;align-items:center;gap:8px;text-align:left;padding:10px;border:1px solid rgba(255,209,102,.18);border-radius:10px;background:rgba(255,209,102,.05)}.reward-item>span:last-child{display:flex;flex-direction:column;gap:3px}.reward-item small{font-size:6px;letter-spacing:.7px;font-weight:1000;color:#a9bd9f}.reward-item b{font:900 20px/1 var(--display);color:var(--gold)}.xp-chip{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:rgba(185,243,91,.16);color:var(--lime);font-size:9px;font-weight:1000}.level-up-note{position:relative;padding:8px;border-radius:8px;background:rgba(185,243,91,.12);color:var(--lime);font-size:9px;font-weight:1000}.result-actions{position:relative;display:flex;flex-direction:column;gap:8px;margin-top:15px}.result-actions .primary-cta{min-height:48px}.result-actions .secondary-cta{justify-content:center}.guide-card{padding:28px;width:min(100%,420px)}.guide-close{position:absolute;top:16px;right:16px}.guide-card h2{font:900 33px/.95 var(--display);margin:9px 0 13px}.guide-card p{font-size:11px;line-height:1.8;color:#afcbb2}.guide-card code{font-family:ui-monospace,monospace;font-size:10px;color:var(--lime);overflow-wrap:anywhere}.guide-doc-link{display:inline-block;margin:3px 0 14px;color:var(--blue);font-size:9px;font-weight:1000;letter-spacing:.6px}.guide-card>.primary-cta{margin-top:4px}.toast{position:fixed;left:50%;bottom:calc(85px + env(safe-area-inset-bottom));transform:translate(-50%,15px);z-index:100;max-width:min(520px,calc(100% - 30px));padding:12px 16px;border-radius:12px;background:#eaf7d5;color:#213b2a;border:1px solid rgba(20,57,35,.15);box-shadow:0 12px 28px rgba(0,0,0,.28);font-size:10px;line-height:1.5;font-weight:800;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast[data-tone="warning"]{background:#ffe4a4;color:#543b13}.toast[data-tone="error"]{background:#ffdbe0;color:#5e202c}.bottom-nav{display:none}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes slow-spin{to{transform:rotate(360deg)}}@keyframes super-pulse{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.17);transform:scale(1.045)}}@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:1500px){.main-content{gap:30px;grid-template-columns:196px minmax(0,1fr)}.hero-feature{min-height:410px}.feature-copy{padding:34px 0 66px 38px}.feature-art>img{max-width:390px}.battle-layout{grid-template-columns:minmax(0,1fr) 280px}}
@media(max-width:1120px){.main-content{grid-template-columns:155px minmax(0,1fr);gap:18px;padding:22px 18px}.hero-feature{min-height:355px}.feature-copy{padding:25px 0 59px 23px}.feature-copy h2{font-size:46px}.feature-art>img{width:100%;height:88%}.hero-caption{left:10%;right:5%}.home-grid{grid-template-columns:1fr}.battle-layout{grid-template-columns:minmax(0,1fr) 225px;gap:12px}.joystick{height:88px;width:88px}.joystick-knob{left:24px;top:24px}.action-controls{gap:8px}.attack-button{height:69px;width:69px}.super-button{height:59px;width:59px}.battle-bottom-hud{bottom:100px}.hero-collection-card{grid-template-columns:39% minmax(0,1fr)}.hero-card-copy h3{font-size:23px}}
@media(max-width:800px){.topbar{height:65px;padding:0 16px}.main-content{display:block;padding:19px 16px 94px}.desktop-nav{display:none}.topbar .wallet-quick{display:none}.brand{min-width:0}.brand-mark{height:37px;width:37px}.brand-mark svg{width:29px;height:29px}.brand-type>b{font-size:16px}.brand-type small{font-size:6px}.topbar-actions{gap:7px}.currency-pill{min-height:36px;padding:6px 8px;gap:5px}.currency-pill strong{font-size:11px}.currency-pill small{font-size:6px}.coin-icon{height:19px;width:19px;font-size:11px}.profile-chip{padding:4px 6px 4px 4px;gap:5px}.profile-avatar{width:29px;height:31px}.profile-chip-text b{font-size:8px}.profile-chip-text small{font-size:6px}.profile-chevron{display:none}.hero-feature{min-height:345px;grid-template-columns:minmax(0,1fr) 41%}.feature-copy{padding:23px 0 57px 20px}.feature-copy h2{font-size:clamp(38px,6vw,49px);margin:19px 0 13px}.feature-copy p{font-size:10px;max-width:290px}.feature-details{gap:13px;margin:15px 0 16px}.feature-details b{font-size:18px}.feature-details small{font-size:6px}.feature-copy>.primary-cta{width:195px;min-height:48px}.feature-art>img{height:81%;width:125%;max-width:none;bottom:29px;right:-10%}.art-ring{left:-2%;width:100%;top:20%}.ring-two{left:3%;width:90%}.hero-caption{left:1%;right:1%;bottom:42px;padding:9px 10px}.hero-caption b{font-size:18px}.hero-caption small{font-size:6px}.caption-label{font-size:6px}.feature-foot{height:31px;padding:0 12px;font-size:6px}.selected-hero-panel,.daily-panel{padding:15px}.quick-stats{gap:8px}.quick-stat{padding:10px;gap:8px}.quick-stat small{font-size:6px;letter-spacing:.4px}.stat-icon{width:29px;height:29px;font-size:16px}.quick-stat b{font-size:19px}.stat-trend{display:none}.battle-layout{grid-template-columns:minmax(0,1fr)}.battle-sidebar{display:grid;grid-template-columns:1fr 1fr;align-items:start}.rival-panel,.battle-objective{padding:12px}.battle-objective h3{font-size:20px}.battle-bottom-hud{bottom:102px}.battle-controls-hint{justify-content:center}.control-hint-mobile{display:flex!important}.app-footer{margin-top:22px}.hero-collection-grid{grid-template-columns:1fr}.hero-collection-card{min-height:245px;grid-template-columns:35% minmax(0,1fr)}.collection-hero-art{min-height:220px}.profile-hero{grid-template-columns:120px minmax(0,1fr);gap:15px}.profile-hero-art{height:150px}.profile-stat-grid{gap:7px}.profile-stat-card{padding:11px 9px}.wallet-panel{grid-template-columns:45px minmax(0,1fr)}.wallet-emblem{width:44px;height:44px}.wallet-panel .outline-button{grid-column:2;justify-self:start}.bottom-nav{position:fixed;display:flex;align-items:center;justify-content:space-around;gap:3px;bottom:0;left:0;right:0;z-index:30;padding:7px 7px calc(7px + env(safe-area-inset-bottom));height:66px;background:rgba(14,36,29,.96);border-top:1px solid rgba(224,255,215,.15);backdrop-filter:blur(18px)}.bottom-nav-item{position:relative;height:47px;min-width:52px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-radius:10px;background:transparent;color:#88a691;cursor:pointer}.bottom-nav-item>span{font-size:20px;line-height:1}.bottom-nav-item small{font-size:6px;letter-spacing:.6px;font-weight:1000}.bottom-nav-item.active{background:rgba(185,243,91,.1);color:var(--lime)}.bottom-nav-item .nav-dot{top:3px;right:calc(50% - 17px)}.bottom-play{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;border:3px solid #dbffc0;border-radius:17px;background:var(--lime);color:#1e3929;font-size:20px;box-shadow:0 4px 0 #6b9638,0 8px 18px rgba(119,195,63,.16);transform:translateY(-9px);cursor:pointer}.bottom-play span{padding-left:2px}.toast{bottom:calc(76px + env(safe-area-inset-bottom))}}
@media(max-width:520px){.topbar{padding:0 11px}.main-content{padding:16px 11px calc(91px + env(safe-area-inset-bottom))}.brand{gap:7px}.brand-mark{width:33px;height:33px;border-radius:10px}.brand-mark svg{width:26px;height:26px}.brand-type>b{font-size:14px;letter-spacing:.8px}.brand-type small{font-size:5.5px;letter-spacing:1px}.topbar-actions{gap:5px}.profile-chip-text{display:none}.profile-chip{background:transparent;border:0;padding:2px}.profile-avatar{width:31px;height:34px}.currency-pill small{display:none}.currency-pill{border-radius:9px}.welcome-row{margin-bottom:16px}.welcome-row h1{font-size:42px;margin-top:11px}.welcome-row p{font-size:10px}.season-medal{height:48px;width:48px;flex-basis:48px}.eyebrow{font-size:7px;letter-spacing:1px;gap:4px}.hero-feature{min-height:510px;display:block;border-radius:18px}.hero-feature::before{background:linear-gradient(180deg,rgba(18,57,38,.97) 0%,rgba(23,68,42,.93) 43%,rgba(18,57,38,.3) 73%),url('assets/arena.webp') center/cover}.feature-copy{z-index:3;padding:19px 17px 72px;max-width:none}.mode-tag{font-size:7px;padding:6px 8px}.feature-copy h2{font-size:46px;line-height:.79;margin:19px 0 12px}.feature-copy p{font-size:10px;max-width:290px;line-height:1.6}.feature-details{gap:17px;margin:14px 0 14px}.feature-details b{font-size:20px}.feature-copy>.primary-cta{width:100%;max-width:230px;min-height:46px}.feature-art{position:absolute;left:0;right:0;bottom:32px;height:57%;z-index:1;pointer-events:none}.feature-art>img{height:100%;width:75%;right:7%;bottom:-2%;object-fit:contain}.art-ring{top:5%;left:28%;width:62%;max-width:260px}.ring-two{top:13%;left:32%;width:54%}.hero-caption{left:8%;right:auto;bottom:18px;min-width:155px;padding:8px 10px}.hero-caption b{font-size:19px}.hero-caption small{font-size:6px}.spark-a{right:14%;top:10%;font-size:24px}.spark-b{left:22%;top:30%;font-size:20px}.feature-foot{padding:0 9px;font-size:5.5px;letter-spacing:.4px}.home-grid{gap:11px;margin-top:12px}.selected-hero-panel,.daily-panel{padding:13px;border-radius:14px}.panel-heading{margin-bottom:12px}.panel-heading h2{font-size:20px}.section-kicker{font-size:7px;letter-spacing:1.15px}.text-link{font-size:7px}.hero-picker{gap:6px}.hero-pick{height:86px;border-radius:10px}.hero-pick span{font-size:6px;padding:4px 1px}.selected-hero-info{padding-top:10px;margin-top:10px}.selected-hero-info b{font-size:9px}.selected-hero-info span{font-size:8px}.mini-quest{grid-template-columns:30px minmax(0,1fr) 35px;gap:8px;padding:8px}.mini-quest-icon{width:30px;height:30px;font-size:15px}.mini-quest-copy b{font-size:8px}.mini-quest-copy small{font-size:7px}.mini-quest-progress{font-size:8px}.secondary-cta{min-height:40px;font-size:8px}.quick-stats{gap:6px;margin-top:12px}.quick-stat{padding:8px 7px;gap:6px;flex-wrap:wrap}.stat-icon{width:25px;height:25px;font-size:14px;border-radius:8px}.quick-stat small{white-space:normal;font-size:5.5px;line-height:1.2}.quick-stat b{font-size:17px}.demo-disclaimer{font-size:8px;margin-top:12px}.app-footer{font-size:6px;letter-spacing:.5px;gap:5px}.footer-brand{font-size:6px}.footer-build{font-size:5px}.battle-heading{gap:8px;margin-bottom:12px}.back-button,.icon-button{height:34px;width:34px;border-radius:10px}.battle-heading h1{font-size:31px}.battle-time{font-size:18px;padding:9px 8px}.battle-layout{gap:10px}.game-stage{border-width:2px;border-radius:13px;aspect-ratio: .9}.stage-top-hud{left:7px;right:7px;top:7px;gap:5px}.hud-chip{gap:5px;padding:4px}.hud-avatar{height:25px;width:23px;border-radius:6px}.hud-chip b{font-size:6px;letter-spacing:.2px}.hud-chip small{font-size:5.5px}.hud-survivors,.hud-cube-count{padding:7px 7px;gap:4px;border-radius:8px}.hud-survivors b,.hud-cube-count b{font-size:14px}.hud-survivors small{font-size:5px}.survivor-flame,.hud-cube-count span{font-size:12px}.stage-tip{top:43px;gap:5px;padding:6px 7px;font-size:7px;border-radius:7px}.stage-tip b{font-size:6px}.stage-tip button{font-size:13px}.battle-bottom-hud{left:7px;right:7px;bottom:91px;gap:6px}.health-widget,.super-widget{padding:6px;width:50%;border-radius:7px}.health-copy,.super-label{font-size:6px;letter-spacing:.2px}.health-copy b,.super-label b{font-size:6px}.health-track,.super-track{height:5px;margin-top:5px}.controls-overlay{left:8px;right:8px;bottom:8px}.joystick{height:83px;width:83px}.joystick-ring{inset:15px}.joystick-knob{height:36px;width:36px;left:23px;top:23px}.joystick-label{bottom:6px;font-size:6px}.action-controls{gap:7px}.attack-button{height:64px;width:64px;border-width:2px}.attack-target{font-size:25px}.attack-button b,.super-button b{font-size:6px}.super-button{height:55px;width:55px;border-width:2px;margin-bottom:5px}.super-button>span{font-size:19px}.super-button small{font-size:5px}.battle-controls-hint{font-size:6px;gap:7px;padding-top:8px}.battle-controls-hint kbd{height:15px;min-width:15px;font-size:6px}.battle-sidebar{grid-template-columns:1fr;gap:9px}.rival-panel,.battle-objective{padding:12px}.rival-panel .panel-heading h2{font-size:19px}.rival-row{grid-template-columns:36px minmax(0,1fr) 30px;gap:8px;padding:7px}.rival-avatar{height:37px;width:35px}.rival-info b{font-size:8px}.rival-info small{font-size:6px}.sidebar-note{font-size:7px}.battle-objective h3{font-size:22px}.page-title-row{margin-bottom:17px;align-items:flex-start}.page-title-row h1{font-size:38px;margin:10px 0 7px}.page-title-row p{font-size:10px;line-height:1.6;max-width:340px}.collection-currency{padding:8px 9px;gap:5px}.collection-currency b{font-size:11px}.collection-currency small{font-size:6px}.collection-banner{min-height:120px;padding:16px;border-radius:14px}.collection-banner h2{font-size:24px;max-width:270px}.collection-banner p{font-size:8px;max-width:300px}.banner-emblem{width:50px;height:50px;border-radius:13px;font-size:25px;flex:0 0 auto}.hero-collection-grid{gap:10px;margin-top:12px}.hero-collection-card{min-height:225px;padding:9px;gap:9px;border-radius:14px;grid-template-columns:36% minmax(0,1fr)}.collection-hero-art{min-height:205px;border-radius:10px}.hero-card-copy{padding:3px 0}.hero-card-copy h3{font-size:24px;margin:7px 0 3px}.hero-card-copy>small{font-size:7px}.hero-rarity{font-size:6px;letter-spacing:.7px}.hero-card-copy p{font-size:8px;margin:8px 0}.hero-role-pill{font-size:6px;margin-bottom:8px;padding:4px 6px}.hero-stat{grid-template-columns:41px minmax(0,1fr);gap:6px;margin-bottom:5px}.hero-stat>span{font-size:6px}.hero-stat-track{height:5px}.hero-card-actions .primary-cta,.hero-card-actions .secondary-cta{min-height:33px;font-size:7px;padding:0 7px}.quest-reset-pill{padding:7px;min-width:61px}.quest-reset-pill b{font-size:16px}.quest-highlight{grid-template-columns:42px minmax(0,1fr) 66px;gap:9px;padding:12px;border-radius:13px}.quest-highlight-glyph{height:41px;width:41px;border-radius:11px;font-size:23px}.quest-highlight h2{font-size:21px}.quest-highlight p{font-size:8px}.quest-highlight-progress>b{font-size:21px}.quest-highlight-progress small{font-size:6px}.quest-card{grid-template-columns:37px minmax(0,1fr);gap:10px;padding:11px}.quest-card-icon{height:37px;width:37px;border-radius:10px;font-size:18px}.quest-copy h3{font-size:9px}.quest-copy p{font-size:8px}.quest-progress-meta{font-size:7px}.quest-progress-track{width:min(175px,100%)}.claim-button{grid-column:2;justify-self:start;min-height:31px;min-width:82px;font-size:7px}.weekly-panel{grid-template-columns:40px minmax(0,1fr);gap:9px;padding:12px}.weekly-icon{height:40px;width:40px;font-size:22px;border-radius:11px}.weekly-panel h3{font-size:21px}.weekly-panel p{font-size:8px;line-height:1.6}.weekly-progress{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}.weekly-progress b{font-size:15px}.weekly-progress small{font-size:6px}.leaderboard-season{font-size:6px;padding:7px}.ranking-banner{min-height:145px;padding:17px;border-radius:14px}.ranking-banner h2{font-size:32px}.ranking-banner p{font-size:8px;max-width:220px}.ranking-crown{width:69px;height:69px;font-size:38px}.leaderboard-panel{padding:12px}.leaderboard-panel .panel-heading h2{font-size:21px}.leaderboard-table-head,.leaderboard-row{grid-template-columns:minmax(0,1fr) 43px 57px;gap:6px;padding-left:7px;padding-right:7px}.leaderboard-table-head{font-size:6px}.leaderboard-player{gap:6px}.rank-number{width:20px;height:22px;font-size:12px}.rank-avatar{width:26px;height:28px;border-radius:7px}.rank-name b{font-size:7px}.rank-name small{font-size:6px}.leaderboard-wins,.leaderboard-xp{font-size:15px}.leaderboard-foot{font-size:8px}.profile-level-badge{height:54px;width:54px;border-radius:14px}.profile-level-badge b{font-size:23px}.profile-hero{grid-template-columns:91px minmax(0,1fr);gap:11px;padding:12px;border-radius:14px}.profile-hero-art{height:128px;border-radius:10px}.profile-main h2{font-size:24px;margin:7px 0}.profile-main>p{font-size:8px;margin-bottom:14px}.xp-label{font-size:6px;letter-spacing:.2px}.xp-label b{font-size:6px}.xp-track{height:6px}.xp-foot{font-size:5px;gap:4px}.profile-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}.profile-stat-card{padding:10px;display:grid;grid-template-columns:25px minmax(0,1fr);column-gap:8px;row-gap:3px;align-items:center}.profile-stat-card>span{grid-row:span 2;font-size:17px}.profile-stat-card small{font-size:6px;letter-spacing:.5px}.profile-stat-card b{font-size:22px}.wallet-panel{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:12px}.wallet-emblem{height:38px;width:38px;border-radius:10px;font-size:22px}.wallet-copy h2{font-size:21px}.wallet-copy p{font-size:8px}.wallet-steps{gap:6px;flex-direction:column}.wallet-panel .outline-button{grid-column:1/-1;width:100%;justify-content:center;min-height:38px}.settings-panel{padding:12px}.setting-row{padding:12px 0}.setting-row b{font-size:9px}.setting-row small{font-size:7px}.tutorial-card{padding:15px 16px 17px}.tutorial-visual{height:152px;margin:13px auto}.tutorial-copy h2{font-size:30px}.tutorial-copy p{font-size:10px;min-height:0}.tutorial-actions .primary-cta{width:125px}.result-card{padding:19px 16px}.result-card h2{font-size:33px}.result-stats{gap:5px}.result-stats>div{padding:9px 3px}.result-stats small{font-size:5px}.result-stats b{font-size:20px}.guide-card{padding:22px}.guide-card h2{font-size:29px}.guide-card p{font-size:10px}.app-footer{margin-top:18px}}
@media(max-width:360px){.welcome-row h1{font-size:37px}.hero-feature{min-height:492px}.feature-copy{padding-left:13px;padding-right:13px}.feature-copy h2{font-size:41px}.feature-copy p{max-width:260px}.feature-art>img{width:83%;right:1%}.hero-caption{left:3%;bottom:15px}.hero-collection-card{grid-template-columns:33% minmax(0,1fr)}.hero-card-copy h3{font-size:21px}.battle-heading h1{font-size:27px}.battle-time{font-size:16px;padding:8px 6px}.hud-chip{gap:4px}.hud-avatar{width:20px}.hud-chip b{font-size:5.5px}.stage-tip{font-size:6px}.joystick{width:76px;height:76px}.joystick-knob{height:32px;width:32px;left:21px;top:21px}.attack-button{width:59px;height:59px}.super-button{width:50px;height:50px}.battle-bottom-hud{bottom:83px}.controls-overlay{bottom:7px}.feature-foot{font-size:5px}.quick-stat{gap:4px;padding:7px 5px}.quick-stat small{font-size:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.screen-view{animation:none!important}}

/* Collection cosmetics, season reward road and club preview. */
.panel-intro{color:var(--text-muted);font-size:12px;line-height:1.6;margin:0 0 16px;max-width:720px}
.compact-disclaimer{margin-top:14px!important;padding-top:12px!important;border-top:1px solid var(--border)!important}
.skin-store-panel,.season-pass-panel,.club-panel{margin-top:20px;padding:clamp(16px,2.2vw,24px)}
.skin-store-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.skin-card{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1px solid var(--border);border-radius:14px;background:rgba(8,24,22,.62);padding:12px;overflow:hidden}
.skin-card.owned{border-color:color-mix(in srgb,var(--accent,#9ae66e) 40%,var(--border))}
.skin-card.equipped{box-shadow:inset 0 0 0 1px #a8ef76;background:rgba(91,147,71,.09)}
.skin-preview{width:100%;height:126px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:10px;background:radial-gradient(ellipse at 50% 68%,var(--skin-accent,#9ae66e) 0,transparent 49%),linear-gradient(145deg,#1b3934,#0b1918)}
.skin-preview:after{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--skin-accent,#9ae66e) 45%,transparent);border-radius:50%;opacity:.55}
.skin-preview img{position:relative;z-index:1;width:auto;height:112px;max-width:95%;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(0,0,0,.36))}
.skin-rarity{font-size:9px;letter-spacing:.12em;font-weight:850;color:var(--accent,#9ae66e)}
.skin-card h3{font-size:13px;line-height:1.25;margin:0;color:var(--text)}
.skin-card p{font-size:11px;line-height:1.45;color:var(--text-muted);margin:0;flex:1}
.skin-card button{width:100%;min-height:36px;font-size:10px}
.season-reward-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.season-tier{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:13px;border-radius:12px;border:1px solid var(--border);background:rgba(8,24,22,.55)}
.season-tier.locked{opacity:.75}
.season-tier.ready{border-color:#9ae66e;box-shadow:inset 0 0 0 1px rgba(154,230,110,.15)}
.season-tier.claimed{border-color:rgba(154,230,110,.32);background:rgba(71,118,55,.12)}
.season-tier-threshold{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--text-muted)}
.season-tier-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(154,230,110,.13);border:1px solid rgba(154,230,110,.24);font-size:18px;color:#c1ff8c}
.season-tier h3{font-size:11px;line-height:1.35;margin:0;color:var(--text)}
.season-tier p{margin:0;color:var(--text-muted);font-size:10px;line-height:1.45;flex:1}
.season-tier-loot{font-size:9px;letter-spacing:.04em;font-weight:850;color:#f1d67c;min-height:24px}
.season-tier button{width:100%;min-height:34px;padding:8px;font-size:9px;white-space:normal;line-height:1.25}
.club-panel{display:flex;flex-direction:column;gap:14px}
.club-create-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.club-create-row label{display:flex;flex-direction:column;gap:7px;font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--text-muted)}
.club-create-row input{width:100%;min-height:44px;border-radius:10px;border:1px solid var(--border);padding:0 13px;background:#0c211e;color:var(--text);font:inherit;font-size:13px;letter-spacing:0;outline:none}
.club-create-row input:focus-visible{border-color:#a8ef76;box-shadow:0 0 0 3px rgba(168,239,118,.12)}
.club-create-row button{min-height:44px;white-space:nowrap}
.club-status{display:flex;flex-direction:column;gap:5px;min-height:42px;padding:12px;border-radius:10px;background:rgba(8,24,22,.6);border:1px solid var(--border);color:var(--text-muted);font-size:11px;line-height:1.5}
.club-status b{font-size:13px;color:#c6f8a2;letter-spacing:.03em}
.club-status small{font-size:10px;color:var(--text-muted)}
.club-invite-button{align-self:flex-start;min-width:200px}
@media(max-width:900px){.skin-store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.season-reward-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.skin-store-grid{gap:8px}.skin-card{padding:9px}.skin-preview{height:112px}.skin-preview img{height:98px}.skin-card h3{font-size:11px}.skin-card p{font-size:10px}.skin-card button{font-size:9px}.season-reward-list{grid-template-columns:repeat(2,minmax(0,1fr))}.season-tier{padding:10px}.season-tier h3{font-size:10px}.club-create-row{grid-template-columns:1fr}.club-create-row button{width:100%}.club-invite-button{width:100%;align-self:stretch}}
@media(max-width:520px){#collectionScreen .page-title-row{flex-wrap:wrap}#collectionScreen .page-title-row>div:first-child{min-width:0;flex:1 1 190px}.collection-currency{flex:0 0 auto}}

/* v1.2 dedicated match queue, team modes and neon control polish */
.tutorial-visual{height:clamp(190px,30vh,260px);background:radial-gradient(ellipse at 50% 65%,rgba(91,255,198,.2),transparent 52%),linear-gradient(135deg,#203d37,#142a2a 72%,#1b3340);isolation:isolate}
.tutorial-visual::before{width:clamp(145px,40vw,205px);height:auto;aspect-ratio:1;border:1px solid rgba(85,255,211,.42);box-shadow:0 0 22px rgba(54,247,213,.15),inset 0 0 24px rgba(54,247,213,.08),0 0 0 14px rgba(80,242,220,.035)}
.tutorial-visual img{height:100%;width:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center center;padding:5px 0 0;filter:drop-shadow(0 0 10px rgba(61,255,211,.23)) drop-shadow(0 10px 12px rgba(0,0,0,.4))}
.primary-cta,.secondary-cta,.mode-card,.icon-button,.square-action,.attack-button,.super-button{position:relative;isolation:isolate}
.primary-cta::after,.secondary-cta::after,.mode-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 1px rgba(104,255,231,.85),0 0 18px rgba(57,245,220,.2);transition:opacity .16s}
.primary-cta:hover::after,.secondary-cta:hover::after,.mode-card:hover::after{opacity:1}
.primary-cta:focus-visible,.secondary-cta:focus-visible,.mode-card:focus-visible{outline:2px solid #62ffe0;outline-offset:3px}
.queue-screen{padding-bottom:24px}.queue-hero{position:relative;min-height:310px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,34%);align-items:center;padding:clamp(18px,3vw,34px);background:linear-gradient(115deg,rgba(14,37,35,.97),rgba(20,54,49,.91) 55%,rgba(22,54,65,.8)),url('assets/arena.webp') center/cover;border-color:rgba(78,255,223,.25)}.queue-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 55%,rgba(58,245,211,.08)),repeating-linear-gradient(0deg,transparent 0 27px,rgba(116,255,221,.035) 28px),repeating-linear-gradient(90deg,transparent 0 27px,rgba(116,255,221,.035) 28px);pointer-events:none}.queue-copy{position:relative;z-index:2;min-width:0}.queue-copy h2{font:900 clamp(30px,4vw,48px)/.95 var(--display);margin:9px 0;color:#f4ffe7;letter-spacing:.4px}.queue-copy>p{max-width:470px;color:#b6d2c4;font-size:12px;line-height:1.7}.queue-status{display:flex;align-items:center;gap:9px;margin:17px 0 12px;padding:10px 12px;width:min(100%,410px);border:1px solid rgba(74,255,222,.22);background:rgba(4,20,20,.43);border-radius:10px;color:#a9c9c0;font-size:9px;letter-spacing:.8px;font-weight:900}.queue-status b{margin-left:auto;color:#62ffe0;font-variant-numeric:tabular-nums}.queue-slots{display:flex;gap:8px;margin:12px 0}.queue-slot{height:48px;width:48px;display:grid;place-items:center;border:1px dashed rgba(102,255,225,.42);border-radius:12px;background:rgba(8,28,28,.5);color:#7ed9cb;font:900 20px var(--display);overflow:hidden}.queue-slot.filled{border-style:solid;box-shadow:0 0 15px rgba(61,255,216,.13);background:linear-gradient(145deg,rgba(53,113,98,.55),rgba(12,31,32,.85))}.queue-slot img{height:100%;width:100%;object-fit:contain;object-position:center bottom}.queue-disclaimer{font-size:8px;font-weight:900;letter-spacing:1px;color:#9eb4a9}.queue-art{position:relative;z-index:1;min-width:0;align-self:stretch;display:grid;place-items:center}.queue-art::before{content:"";position:absolute;width:min(100%,260px);aspect-ratio:1;border:1px solid rgba(82,255,223,.4);border-radius:50%;box-shadow:0 0 0 17px rgba(82,255,223,.04),0 0 48px rgba(82,255,223,.12);animation:slow-spin 40s linear infinite}.queue-art img{position:relative;width:100%;height:280px;max-width:260px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 17px rgba(80,255,224,.25)) drop-shadow(0 15px 13px rgba(0,0,0,.42))}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.mode-card{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:17px;border:1px solid rgba(174,224,197,.13);border-radius:15px;background:linear-gradient(145deg,rgba(30,57,49,.88),rgba(17,38,35,.9));text-align:left;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}.mode-card:hover{transform:translateY(-2px);border-color:rgba(87,255,222,.4)}.mode-card.selected{border-color:rgba(80,255,222,.68);background:linear-gradient(145deg,rgba(33,93,78,.62),rgba(15,39,37,.96));box-shadow:inset 0 0 0 1px rgba(80,255,222,.12),0 0 24px rgba(80,255,222,.08)}.mode-icon{display:grid;place-items:center;width:43px;height:43px;border:1px solid rgba(78,255,220,.32);border-radius:12px;background:rgba(64,255,221,.07);font-size:25px;color:#65ffe0;text-shadow:0 0 13px rgba(80,255,222,.75);box-shadow:inset 0 0 15px rgba(80,255,222,.06),0 0 15px rgba(80,255,222,.06)}.mode-card>b{font-size:11px;letter-spacing:.7px}.mode-card>small{font-size:10px;color:#9eb9ad;line-height:1.5}.mode-card>i{font-style:normal;font-size:7px;font-weight:1000;letter-spacing:1px;color:#6bffe0;margin-top:3px}.queue-actions{display:flex;align-items:center;gap:12px;padding:18px;margin-bottom:16px;border-color:rgba(90,255,218,.18)}.queue-actions>div{flex:1;min-width:0}.queue-actions h2{margin:6px 0;font:900 23px var(--display)}.queue-actions p{margin:0;color:#9eb9ad;font-size:10px}.queue-actions .primary-cta{min-width:215px}.queue-actions .secondary-cta{white-space:nowrap}.clan-lobby-panel{padding:clamp(16px,2.5vw,24px);border-color:rgba(181,130,255,.22)}.clan-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:16px 0}.clan-feature-grid article{display:flex;flex-direction:column;gap:8px;padding:15px;border:1px solid rgba(171,129,255,.17);border-radius:12px;background:linear-gradient(145deg,rgba(95,61,130,.13),rgba(10,30,28,.3))}.clan-feature-grid .neon-icon{font-size:24px;color:#d2a8ff;text-shadow:0 0 13px rgba(190,122,255,.7)}.clan-feature-grid b{font-size:10px;letter-spacing:.8px}.clan-feature-grid small{font-size:10px;color:#a9c1b5;line-height:1.65}.clan-lobby-panel>.secondary-cta{width:100%;justify-content:center}.queue-status .status-live{flex:0 0 7px}
@media(max-width:720px){.queue-hero{grid-template-columns:minmax(0,1fr) 110px;min-height:280px;padding:16px;gap:4px}.queue-copy h2{font-size:29px}.queue-copy>p{font-size:10px}.queue-art img{height:190px}.queue-art::before{width:110px}.queue-slot{width:37px;height:37px;border-radius:9px}.queue-status{font-size:7px;gap:6px;padding:9px}.queue-disclaimer{font-size:6px;letter-spacing:.4px}.mode-grid{gap:7px}.mode-card{padding:10px;gap:6px}.mode-icon{width:34px;height:34px;font-size:20px}.mode-card>b{font-size:8px;letter-spacing:.2px}.mode-card>small{font-size:7px}.mode-card>i{font-size:6px}.queue-actions{align-items:stretch;flex-direction:column}.queue-actions .primary-cta,.queue-actions .secondary-cta{width:100%;min-width:0;justify-content:center}.clan-feature-grid{gap:7px}.clan-feature-grid article{padding:10px;gap:6px}.clan-feature-grid b{font-size:7px}.clan-feature-grid small{font-size:7px}.tutorial-visual{height:clamp(180px,29vh,230px)}.tutorial-visual img{width:100%;height:100%;object-fit:contain}}
@media(max-width:390px){.queue-hero{grid-template-columns:minmax(0,1fr) 78px;padding:12px}.queue-copy h2{font-size:24px}.queue-art img{height:150px}.queue-art::before{width:76px}.queue-status{flex-wrap:wrap}.mode-card{padding:8px}.mode-card>b{font-size:7px}.mode-card>small{font-size:6px}.clan-feature-grid article{padding:8px}.clan-feature-grid small{font-size:6px}}

/* Full online 2.0: shared connection indicator and real clan controls */
.connection-pill{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035)}
.connection-pill>i{width:8px;height:8px;border-radius:50%;background:#ff7c6a;box-shadow:0 0 0 4px rgba(255,124,106,.1)}
.connection-pill span{display:flex;flex-direction:column;line-height:1.15;gap:3px}
.connection-pill b{font-size:9px;letter-spacing:.8px;color:#ff9b8c}
.connection-pill small{font-size:6px;letter-spacing:.6px;color:var(--muted);white-space:nowrap}
.connection-pill[data-state="online"]>i{background:#8dff8d;box-shadow:0 0 0 4px rgba(141,255,141,.1),0 0 12px rgba(141,255,141,.7)}
.connection-pill[data-state="online"] b{color:#aaff9e}
.queue-slots{display:grid;grid-template-columns:repeat(6,minmax(0,48px));max-width:360px;gap:7px}
.queue-slot{position:relative}
.queue-slot small{position:absolute;left:1px;right:1px;bottom:1px;padding:2px 1px;border-radius:0 0 7px 7px;background:rgba(3,17,17,.82);color:#e7fff4;font:700 6px/1.2 system-ui;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clan-join-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin-top:12px}
.clan-join-row label{display:flex;flex-direction:column;gap:7px;font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--text-muted)}
.clan-join-row input{width:100%;min-height:44px;border-radius:10px;border:1px solid var(--border);padding:0 13px;background:#0c211e;color:var(--text);font:inherit;font-size:13px;letter-spacing:.08em;outline:none}
.clan-join-row button{min-height:44px;white-space:nowrap}
.clan-mission-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);color:var(--text-muted);font-size:10px}
.clan-mission-row .secondary-cta{min-height:30px;padding:5px 9px;font-size:8px;white-space:nowrap}
.clan-war-list{display:flex;flex-direction:column;gap:3px;margin-top:10px}
@media(max-width:980px){.connection-pill small{display:none}.connection-pill{padding:7px}.queue-slots{grid-template-columns:repeat(6,minmax(0,37px))}}
@media(max-width:620px){.connection-pill span{display:none}.connection-pill{gap:0;padding:7px}.connection-pill>i{margin:0}.queue-slots{grid-template-columns:repeat(4,minmax(0,37px));gap:5px}.queue-slot{width:37px;height:37px}.clan-join-row{grid-template-columns:1fr}.clan-join-row button{width:100%;justify-content:center}.clan-mission-row{font-size:9px}}


/* Online clan roster controls */
.clan-roster-title { display: block; margin: 14px 0 8px; color: var(--muted, #9db5ba); font-size: .72rem; letter-spacing: .14em; }
.clan-roster-list { display: grid; gap: 7px; margin: 8px 0 14px; }
.clan-roster-list .clan-mission-row { margin: 0; }

.club-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.club-actions .club-invite-button { flex: 1 1 220px; }


.referral-code-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid rgba(82,240,218,.22); border-radius: 14px; background: rgba(32,98,93,.12); }
.referral-code-row > div { display: grid; gap: 6px; }
.referral-code-row small { color: var(--muted, #9db5ba); font-size: .7rem; letter-spacing: .12em; }
.referral-code-row b { font-size: 1.25rem; letter-spacing: .18em; color: var(--accent, #53e8d9); }
.referral-status { display: block; margin: 10px 0; color: var(--muted, #9db5ba); font-size: .82rem; line-height: 1.5; }