:root{--bg:#07101f;--panel:#0c1830;--panel2:#111f3c;--line:#29405f;--text:#edf5ff;--muted:#8fa6c2;--cyan:#65e8ff;--gold:#ffd56a;--danger:#ff6b72;--success:#6ff0a4;--purple:#c48cff;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);touch-action:none;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;cursor:pointer}button:disabled{opacity:.45;cursor:default}
#renderCanvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;outline:none;touch-action:none;background:radial-gradient(circle at 50% 40%,#18304d,#07101f 70%)}
.hidden{display:none!important}.boot-screen{position:fixed;inset:0;z-index:500;background:radial-gradient(circle at 50% 38%,#173455,#07101f 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;transition:opacity .45s}.boot-logo{font-weight:950;letter-spacing:.18em;font-size:clamp(25px,5vw,58px);text-shadow:0 0 28px #4cdfff}.boot-subtitle{color:var(--cyan);letter-spacing:.55em;font-weight:800}.boot-bar{width:min(520px,72vw);height:8px;border:1px solid #315379;background:#07111f;border-radius:99px;overflow:hidden;margin-top:25px}.boot-bar i{display:block;width:4%;height:100%;background:linear-gradient(90deg,#488cff,#6dffff);box-shadow:0 0 18px #65e8ff;transition:width .25s}.boot-screen div:last-child{color:var(--muted);font-size:13px}
.top-hud{position:fixed;z-index:40;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:calc(10px + var(--safe-top));display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:12px}.profile-chip,.currency-bar{pointer-events:auto;background:linear-gradient(135deg,rgba(10,25,48,.93),rgba(14,34,62,.82));border:1px solid rgba(110,181,255,.35);box-shadow:0 8px 30px rgba(0,0,0,.28);backdrop-filter:blur(10px)}.profile-chip{display:flex;align-items:center;gap:8px;border-radius:16px;padding:7px 12px}.profile-chip span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,#355ec9,#43cfe4);font-size:11px;font-weight:900}.profile-chip b{font-size:13px}.currency-bar{display:flex;gap:7px;border-radius:14px;padding:6px}.currency{display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:9px;background:rgba(3,10,23,.55);font-size:12px;font-weight:800}.currency img{width:18px;height:18px}.quest-tracker{position:fixed;z-index:10;left:max(14px,env(safe-area-inset-left));top:calc(72px + var(--safe-top));width:min(260px,42vw);pointer-events:none;background:rgba(7,17,33,.74);border-left:3px solid var(--cyan);border-radius:6px 12px 12px 6px;padding:9px 11px;backdrop-filter:blur(7px);font-size:12px}.quest-tracker b{display:block;margin-bottom:3px}.quest-tracker span{color:var(--muted)}
.lobby-controls{position:fixed;inset:0;z-index:20;pointer-events:none;transition:opacity .16s,visibility .16s}.camera-area{position:absolute;right:0;top:65px;bottom:0;width:62%;pointer-events:auto;touch-action:none}.joystick{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:calc(24px + var(--safe-bottom));width:128px;height:128px;border-radius:50%;border:2px solid rgba(140,211,255,.35);background:radial-gradient(circle,rgba(43,91,132,.35),rgba(8,18,34,.62));box-shadow:inset 0 0 25px rgba(63,189,255,.12);pointer-events:auto;touch-action:none}.joystick-knob{position:absolute;width:58px;height:58px;left:35px;top:35px;border-radius:50%;background:linear-gradient(145deg,rgba(112,218,255,.88),rgba(40,102,182,.82));border:2px solid rgba(220,249,255,.75);box-shadow:0 4px 20px rgba(35,188,255,.42)}.action-button{position:absolute;pointer-events:auto;background:linear-gradient(145deg,rgba(26,66,102,.94),rgba(12,35,62,.96));border:1px solid rgba(112,204,255,.55);border-radius:50%;font-size:11px;font-weight:900;letter-spacing:.08em;box-shadow:0 7px 25px rgba(0,0,0,.32)}.interact-button{right:max(29px,env(safe-area-inset-right));bottom:calc(30px + var(--safe-bottom));width:88px;height:88px}.menu-button{right:max(128px,env(safe-area-inset-right));bottom:calc(35px + var(--safe-bottom));width:70px;height:70px}.action-button:not(:disabled):active{transform:scale(.94)}
.battle-controls{position:fixed;inset:0;z-index:30;pointer-events:none;transition:opacity .16s,visibility .16s}.battle-top-row{position:absolute;top:calc(62px + var(--safe-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;pointer-events:auto;white-space:nowrap}.hud-button,.exit-battle{background:rgba(8,20,38,.9);border:1px solid #36577b;border-radius:9px;padding:8px 11px;font-size:11px;font-weight:850;box-shadow:0 5px 16px rgba(0,0,0,.25)}.hud-button.active{border-color:var(--cyan);box-shadow:0 0 12px rgba(101,232,255,.25);color:var(--cyan)}.wave-label,.timer-label{background:rgba(7,16,31,.88);border:1px solid rgba(127,176,226,.3);border-radius:9px;padding:8px 11px;font-size:12px;font-weight:850}.boss-bar{position:absolute;top:calc(108px + var(--safe-top));left:50%;transform:translateX(-50%);width:min(620px,75vw);text-align:center;font-size:12px;pointer-events:none}.boss-bar>div{height:13px;margin-top:5px;background:#1b1420;border:1px solid #773848;border-radius:99px;overflow:hidden}.boss-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#a52f45,#ff6575);box-shadow:0 0 14px #ff5267;transition:width .12s}.battle-portraits{position:absolute;left:50%;bottom:calc(18px + var(--safe-bottom));transform:translateX(-50%);display:flex;gap:9px;pointer-events:auto}.battle-unit{position:relative;width:clamp(82px,11vw,118px);height:clamp(98px,15vh,138px);background:linear-gradient(180deg,rgba(20,41,70,.95),rgba(8,18,34,.96));border:1px solid #3a5a7c;border-radius:15px;overflow:hidden;box-shadow:0 7px 22px rgba(0,0,0,.35)}.battle-unit img{width:100%;height:66%;object-fit:cover}.battle-unit .unit-name{position:absolute;left:5px;right:5px;top:4px;text-shadow:0 1px 3px #000;font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar{position:absolute;left:6px;right:6px;height:7px;border-radius:8px;background:#151c28;overflow:hidden;border:1px solid rgba(255,255,255,.12)}.bar i{display:block;height:100%;transition:width .1s}.hp-bar{bottom:20px}.hp-bar i{background:linear-gradient(90deg,#28b96e,#70efa7)}.energy-bar{bottom:8px}.energy-bar i{background:linear-gradient(90deg,#4b7cff,#70eaff)}.battle-unit.ready{border-color:#e6f8ff;box-shadow:0 0 22px rgba(92,230,255,.8)}.battle-unit.dead{filter:grayscale(1);opacity:.55}.exit-battle{position:absolute;right:max(14px,env(safe-area-inset-right));top:calc(62px + var(--safe-top));pointer-events:auto;color:#ffabb0;border-color:#723b48}
body.modal-open .lobby-controls,body.modal-open .battle-controls{opacity:0!important;visibility:hidden!important;pointer-events:none!important}body.modal-open .lobby-controls *,body.modal-open .battle-controls *{pointer-events:none!important}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(2,7,15,.78);backdrop-filter:blur(7px);touch-action:none}.modal-panel{position:fixed;z-index:110;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1060px,94vw);height:min(760px,88vh);background:linear-gradient(145deg,rgba(11,24,46,.99),rgba(8,16,32,.99));border:1px solid #355778;border-radius:22px;box-shadow:0 28px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.04);overflow:hidden;display:flex;flex-direction:column}.modal-panel header{height:74px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #263b57;background:linear-gradient(90deg,rgba(33,65,104,.42),transparent)}.modal-panel header small{color:var(--cyan);font-size:9px;letter-spacing:.24em;font-weight:900}.modal-panel h2{margin:3px 0 0;font-size:24px}.close-button{width:42px;height:42px;border-radius:50%;background:#142841;border:1px solid #365c80;font-size:25px}.modal-content{flex:1;overflow:auto;padding:17px;touch-action:pan-y;-webkit-overflow-scrolling:touch}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-thumb{background:#304e6e;border-radius:99px}
.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px}.menu-tile,.card,.world-card,.stage-card,.unit-card,.item-card,.quest-card{background:linear-gradient(145deg,rgba(23,45,76,.82),rgba(10,23,43,.92));border:1px solid #294663;border-radius:15px;padding:13px;position:relative;overflow:hidden}.menu-tile{min-height:116px;text-align:left}.menu-tile:active,.card:active,.world-card:active,.stage-card:active,.unit-card:active{transform:translateY(1px)}.menu-tile b{font-size:16px;display:block;margin-bottom:6px}.menu-tile span,.muted{font-size:12px;color:var(--muted)}.menu-tile .tile-icon{font-size:28px;margin-bottom:8px;color:var(--cyan)}
.section-title{display:flex;justify-content:space-between;align-items:end;margin:2px 0 12px}.section-title h3{margin:0;font-size:18px}.section-title p{margin:0;color:var(--muted);font-size:12px}.button-row{display:flex;gap:9px;flex-wrap:wrap}.primary,.secondary,.danger,.small-button{border-radius:10px;padding:10px 14px;font-weight:850;font-size:12px}.primary{background:linear-gradient(135deg,#3187c4,#36c8d6);color:#03101d}.secondary{background:#162d4b;border:1px solid #355a7d}.danger{background:#5e2732;border:1px solid #a84859}.small-button{padding:7px 10px;background:#183351;border:1px solid #365b7d}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.world-card{min-height:205px;padding:18px;cursor:pointer}.world-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 5%,var(--world-color),transparent 55%);opacity:.22}.world-card>*{position:relative}.world-card h3{font-size:22px;margin:5px 0 8px}.world-card .progress{height:8px;border-radius:9px;background:#102037;overflow:hidden;margin:15px 0}.world-card .progress i{display:block;height:100%;background:var(--world-color)}.locked{filter:grayscale(.75);opacity:.58}.tabs{display:flex;gap:6px;margin-bottom:14px;overflow:auto}.tab{flex:none;background:#122944;border:1px solid #294b6e;border-radius:9px;padding:8px 13px;font-size:12px;font-weight:850}.tab.active{background:#245579;color:var(--cyan);border-color:#54bfe4}.stage-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stage-card h4{margin:0 0 6px;font-size:14px}.stage-card .stars{color:var(--gold);letter-spacing:.08em}.stage-card .recommended{font-size:11px;color:var(--muted);margin:7px 0}.enemy-preview{display:flex;gap:5px;font-size:10px;flex-wrap:wrap}.enemy-chip{background:#152b46;border-radius:7px;padding:4px 6px;color:#bcd1e6}.team-layout{display:grid;grid-template-columns:minmax(390px,1fr) minmax(300px,.75fr);gap:15px}.team-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.team-slot{min-height:210px;background:#0a1a30;border:1px dashed #3a5c7d;border-radius:14px;padding:8px;position:relative}.team-slot img,.unit-card img{width:100%;aspect-ratio:1/1;border-radius:10px;object-fit:cover;background:#10213a}.team-slot .slot-index{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#071425;border:1px solid #3b5d7f;font-size:10px;font-weight:900}.team-slot b{display:block;font-size:11px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.team-slot select{width:100%;margin-top:5px;background:#112a47;color:#dceeff;border:1px solid #315475;border-radius:7px;padding:5px;font-size:10px}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.unit-card{padding:8px;cursor:pointer}.unit-card b{display:block;font-size:11px;margin-top:5px}.unit-card span{font-size:10px;color:var(--muted)}.rarity-Mythic{border-color:#d687ff!important;box-shadow:inset 0 0 24px rgba(203,98,255,.12)}.rarity-Legendary{border-color:#ffd36f!important}.rarity-Epic{border-color:#779cff!important}.rarity-Rare{border-color:#5b819b!important}.unit-detail{display:grid;grid-template-columns:260px 1fr;gap:18px}.unit-detail>div:first-child img{width:100%;border-radius:17px;border:1px solid #365b7b}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}.stat{background:#0d2038;border:1px solid #24435f;border-radius:9px;padding:8px}.stat small{display:block;color:var(--muted);font-size:9px}.stat b{font-size:14px}.equip-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.equip-slot{background:#0c1e34;border:1px solid #294661;border-radius:10px;padding:9px;min-height:73px}.summon-banner{padding:24px;border-radius:18px;border:1px solid #513a72;background:radial-gradient(circle at 80% 20%,rgba(181,108,255,.3),transparent 45%),linear-gradient(145deg,#1b2445,#161329);min-height:230px}.summon-banner h3{font-size:28px;margin:6px 0}.summon-results{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:14px}.summon-result{background:#0d1d34;border:1px solid #36506d;border-radius:12px;padding:7px;text-align:center;animation:reveal .35s both}.summon-result img{width:100%;border-radius:9px}.summon-result b{font-size:10px}.duplicate{font-size:9px;color:var(--gold)}@keyframes reveal{from{opacity:0;transform:scale(.75) rotateY(60deg)}to{opacity:1;transform:none}}
.quest-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.quest-card .quest-main{flex:1}.quest-progress{height:7px;background:#0a1425;border-radius:8px;overflow:hidden;margin-top:7px}.quest-progress i{display:block;height:100%;background:linear-gradient(90deg,#3e87d1,#62e8e5)}.reward-chips{display:flex;gap:5px;flex-wrap:wrap}.reward-chip{padding:5px 7px;background:#152b46;border:1px solid #2e4d6e;border-radius:7px;font-size:10px}.settings-row{display:grid;grid-template-columns:180px 1fr 60px;gap:12px;align-items:center;margin:12px 0}.settings-row input[type=range]{width:100%}.settings-row select{background:#132944;color:white;border:1px solid #365777;border-radius:8px;padding:8px}.mail-card{background:#0d2038;border:1px solid #2b4864;border-radius:12px;padding:12px;margin-bottom:8px}.mail-card h4{margin:0 0 5px}.mail-card p{font-size:12px;color:var(--muted)}
.combat-text-layer{position:fixed;inset:0;z-index:35;pointer-events:none}.combat-text{position:absolute;font-weight:950;font-size:16px;text-shadow:0 2px 4px #000;animation:floatText .9s forwards}.combat-text.damage{color:#fff}.combat-text.crit{color:#ffd268;font-size:21px}.combat-text.heal{color:#68f0a3}@keyframes floatText{0%{opacity:0;transform:translate(-50%,0) scale(.7)}15%{opacity:1;transform:translate(-50%,-8px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-70px) scale(.9)}}.notification-layer{position:fixed;z-index:120;left:50%;top:calc(75px + var(--safe-top));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:rgba(8,22,41,.96);border:1px solid #3a6287;border-radius:11px;padding:10px 14px;box-shadow:0 9px 30px rgba(0,0,0,.4);font-size:12px;animation:toastIn .25s both}.toast.error{border-color:#9f4554;color:#ffbbc1}.toast.success{border-color:#398b64;color:#a9ffd0}@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.result-panel{position:fixed;z-index:130;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,92vw);background:linear-gradient(145deg,#102542,#081528);border:1px solid #4d7091;border-radius:24px;padding:28px;text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.7)}.result-panel h1{font-size:42px;letter-spacing:.17em;margin:0 0 4px;text-shadow:0 0 25px #6aeaff}.result-stars{font-size:38px;color:var(--gold);letter-spacing:.12em}.result-stats,.result-rewards{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:15px 0}.result-actions{display:flex;justify-content:center;gap:10px}.result-actions button{padding:12px 18px;border-radius:10px;background:#1b3d62;border:1px solid #47749b;font-weight:900}.result-actions button:last-child{background:linear-gradient(135deg,#2f8bb9,#47d6d2);color:#06131e}.result-glow{position:absolute;inset:-2px;z-index:-1;border-radius:24px;background:radial-gradient(circle at 50% 0,rgba(95,236,255,.25),transparent 55%)}.orientation-notice{position:fixed;z-index:200;bottom:18px;left:50%;transform:translateX(-50%);background:#0c1e35;border:1px solid #426486;border-radius:11px;padding:10px 14px;font-size:11px}
@media(max-width:850px){.menu-grid{grid-template-columns:repeat(3,1fr)}.grid-3,.stage-list{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(3,1fr)}.team-layout{grid-template-columns:1fr}.team-slots{grid-template-columns:repeat(5,minmax(75px,1fr));overflow:auto}.collection-grid{grid-template-columns:repeat(5,1fr)}.unit-detail{grid-template-columns:190px 1fr}.currency:nth-child(n+4){display:none}.joystick{width:112px;height:112px}.joystick-knob{left:30px;top:30px;width:52px;height:52px}}
@media(max-width:600px){.modal-panel{width:96vw;height:91vh;border-radius:16px}.modal-content{padding:11px}.menu-grid{grid-template-columns:repeat(2,1fr);gap:8px}.menu-tile{min-height:96px;padding:10px}.grid-2,.grid-3,.grid-4,.stage-list{grid-template-columns:1fr}.world-card{min-height:150px}.team-slots{grid-template-columns:repeat(5,92px)}.collection-grid{grid-template-columns:repeat(3,1fr)}.unit-detail{grid-template-columns:1fr}.unit-detail>div:first-child{display:grid;grid-template-columns:130px 1fr;gap:10px}.summon-results{grid-template-columns:repeat(2,1fr)}.battle-unit{width:68px;height:97px}.battle-top-row{gap:3px;top:calc(54px + var(--safe-top))}.hud-button,.wave-label,.timer-label{padding:6px 7px;font-size:9px}.boss-bar{top:calc(91px + var(--safe-top));width:84vw}.exit-battle{top:calc(54px + var(--safe-top));font-size:9px;padding:7px}.profile-chip b{display:none}.currency{font-size:10px;padding:3px}.quest-tracker{display:none}.settings-row{grid-template-columns:110px 1fr 45px}}
@media(orientation:portrait) and (max-width:700px){.battle-portraits{bottom:calc(12px + var(--safe-bottom));gap:4px}.battle-unit{width:17vw;height:100px}.orientation-notice:not(.hidden){display:block}}