*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden;background:#0a0a14;color:#fff;font-family:Segoe UI,system-ui,sans-serif}#app{position:relative}#game{display:block;width:100%;height:100%}#ui{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.panel{pointer-events:auto;background:#0a0a19d9;border:2px solid #5a4cff;border-radius:12px;padding:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 32px #5a4cff4d}.title-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:auto 1fr auto;pointer-events:none;background:linear-gradient(120deg,rgba(10,10,25,.85) 0%,rgba(10,10,25,.4) 45%,transparent 70%)}.title-screen>*{pointer-events:auto}.title-top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px}.brand-badge{font-family:Segoe UI,system-ui,sans-serif;font-weight:900;font-size:13px;letter-spacing:4px;padding:6px 14px;border:1.5px solid #5a4cff;color:#c0b8ff;border-radius:4px;background:#5a4cff14}.title-stage{display:flex;flex-direction:column;justify-content:center;padding:0 56px;max-width:720px;gap:18px}.title-eyebrow{color:#ff4c8a;font-size:12px;font-weight:700;letter-spacing:6px;text-transform:uppercase;opacity:.95}.title-logo{display:flex;flex-direction:column;line-height:.92;font-weight:900;letter-spacing:-1px}.title-logo span{font-size:clamp(40px,6.5vw,76px);background:linear-gradient(180deg,#fff 50%,#b0a0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 6px 36px rgba(90,76,255,.45);white-space:nowrap}.title-logo em{font-style:normal;font-size:clamp(14px,1.7vw,20px);letter-spacing:8px;color:#ff4c8a;margin-top:12px;font-weight:700}.title-tagline{color:#a0a0c0;font-size:14px;line-height:1.5;max-width:420px}.title-menu{display:flex;flex-direction:column;gap:10px;margin-top:18px;max-width:380px}.menu-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#141428b3;border:1.5px solid rgba(90,76,255,.25);border-radius:8px;color:#fff;font-family:inherit;cursor:pointer;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:left}.menu-item:hover{transform:translate(4px);background:#281e50d9;border-color:#ff4c8a;box-shadow:0 6px 24px #ff4c8a4d}.menu-item.primary{background:linear-gradient(135deg,#5a4cff66,#ff4c8a66);border-color:#ff4c8a}.menu-item.primary:hover{background:linear-gradient(135deg,#5a4cffa6,#ff4c8aa6)}.mi-icon{font-size:22px;width:36px;height:36px;display:grid;place-items:center;background:#5a4cff33;border-radius:6px;color:#c0b8ff;flex-shrink:0}.menu-item.primary .mi-icon{background:#ff4c8a59;color:#fff}.mi-text{display:flex;flex-direction:column;flex:1}.mi-label{font-size:14px;font-weight:800;letter-spacing:2px}.mi-sub{font-size:11px;color:#a0a0c0;letter-spacing:.5px;margin-top:2px}.mi-arrow{font-size:22px;color:#fff6;transition:transform .15s,color .15s}.menu-item:hover .mi-arrow{color:#fff;transform:translate(4px)}.title-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;font-size:11px;color:#6a6a8a;letter-spacing:2px;text-transform:uppercase}@media (max-width: 700px){.title-screen{background:linear-gradient(180deg,rgba(10,10,25,.6) 0%,rgba(10,10,25,.2) 35%,transparent 55%,rgba(10,10,25,.85) 100%)}.title-stage{padding:0 20px;max-width:100%;align-items:stretch;gap:14px}.title-eyebrow{text-align:center;font-size:11px;letter-spacing:5px}.title-logo{align-items:center;text-align:center}.title-logo span{font-size:clamp(36px,14vw,60px)}.title-logo em{font-size:12px;letter-spacing:6px;margin-top:8px}.title-tagline{text-align:center;font-size:13px}.title-menu{max-width:100%;margin-top:auto}.title-foot{padding:10px 16px;font-size:10px}}.btn{pointer-events:auto;background:linear-gradient(135deg,#5a4cff,#ff4c8a);color:#fff;border:none;padding:14px 32px;font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 16px #5a4cff66}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #5a4cff99}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn.secondary{background:#ffffff1a;border:1px solid rgba(255,255,255,.3)}.team-select{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:24px 16px;pointer-events:auto;background:#0a0a14b3;overflow-y:auto;-webkit-overflow-scrolling:touch}.team-select h2{font-size:28px;margin-bottom:16px;text-align:center;line-height:1.2}.creature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:800px;width:100%;margin-bottom:16px}.creature-card{background:#141428e6;border:2px solid #333;border-radius:12px;padding:14px;cursor:pointer;transition:all .2s}.card-thumb{width:100%;aspect-ratio:1 / 1;max-height:180px;margin:-4px 0 8px;border-radius:8px;background:radial-gradient(circle at 50% 60%,#5a4cff2e,#0006);background-size:cover;background-position:center;background-repeat:no-repeat}@media (max-width: 600px){.card-thumb{max-height:110px}}.arena-select{width:100%;max-width:800px;margin-bottom:14px;text-align:center}.arena-label{color:#a0a0c0;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}.arena-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.btn.arena-btn{padding:8px 14px;font-size:12px;letter-spacing:.5px;background:#ffffff14;border:1px solid rgba(255,255,255,.2);box-shadow:none}.btn.arena-btn.selected{background:linear-gradient(135deg,#5a4cff,#ff4c8a);border-color:transparent;box-shadow:0 4px 16px #5a4cff80}.player-tag{display:inline-block;background:linear-gradient(135deg,#5a4cff,#ff4c8a);color:#fff;font-weight:800;font-size:11px;letter-spacing:1px;padding:2px 8px;border-radius:4px;margin-right:6px}.status-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:1px;color:#000;text-shadow:0 1px 0 rgba(255,255,255,.3)}.ability-tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.5px;color:#c0b8ff;background:#5a4cff33;border:1px solid rgba(90,76,255,.4);cursor:help}.item-header{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#a0a0c0;margin:10px 0 4px;text-transform:uppercase}.item-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px}.item-btn{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#5a4cff1f;border:1.5px solid rgba(90,76,255,.35);color:#fff;border-radius:6px;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-align:left}.item-btn:hover:not(:disabled){background:#5a4cff40;border-color:#ff4c8a;transform:translateY(-1px)}.item-btn:disabled{opacity:.35;cursor:not-allowed}.item-btn .i-icon{font-size:18px;flex-shrink:0;width:22px;text-align:center}.item-btn .i-text{display:flex;flex-direction:column;min-width:0;flex:1}.item-btn .i-name{font-size:12px;font-weight:700}.item-btn .i-desc{font-size:10px;color:#a0a0c0;letter-spacing:.3px;line-height:1.25;margin-top:1px}.campaign{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;padding:16px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#0a0a19d9,#0a0a19f2)}.campaign-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:60px}.campaign-title{font-size:14px;font-weight:900;letter-spacing:4px;color:#ff4c8a;text-align:center;flex:1}.campaign-top-right{display:flex;align-items:center;gap:8px}.campaign-counter{font-size:12px;color:#a0a0c0;font-weight:700;padding:6px 10px;background:#ffffff0f;border-radius:6px;letter-spacing:1px}.campaign-reset{padding:6px 12px!important;font-size:11px!important}.campaign-locked-team{max-width:720px;margin:0 auto;width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px;background:#5a4cff1f;border:1.5px solid rgba(90,76,255,.4);border-radius:8px;flex-wrap:wrap}.clt-label{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#ff4c8a}.clt-names{font-size:13px;font-weight:700;flex:1;min-width:0}.clt-lives{font-size:16px;color:#ff4c8a;letter-spacing:2px}.clt-reset{padding:6px 12px!important;font-size:11px!important}.campaign-grid{display:grid;grid-template-columns:1fr;gap:10px;max-width:720px;margin:0 auto;width:100%;padding-bottom:24px}.campaign-stage{display:grid;grid-template-columns:56px 1fr 24px;align-items:center;gap:14px;padding:14px 16px;background:#141428d9;border:2px solid rgba(90,76,255,.3);border-radius:10px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}.campaign-stage:hover:not(.locked){transform:translate(4px);border-color:#ff4c8a;box-shadow:0 6px 24px #ff4c8a40}.campaign-stage.locked{cursor:not-allowed;opacity:.45}.campaign-stage.completed{border-color:#4cffd099;background:linear-gradient(135deg,#4cffd01a,#141428d9)}.cs-num{font-size:28px;font-weight:900;text-align:center;color:#c0b8ff}.campaign-stage.completed .cs-num{color:#4cffd0}.cs-name{font-size:16px;font-weight:800;letter-spacing:.5px}.cs-desc{font-size:12px;color:#a0a0c0;margin-top:4px;line-height:1.4}.cs-meta{font-size:10px;color:#8a8aaa;margin-top:6px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}.cs-arrow{font-size:24px;color:#fff6}.campaign-stage:hover:not(.locked) .cs-arrow{color:#fff}.gallery{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:16px}.gallery>*{pointer-events:auto}.gallery-top{position:absolute;top:16px;left:16px;right:76px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.gallery-top>*{pointer-events:auto}.gallery-counter{color:#a0a0c0;font-size:14px;font-weight:600;letter-spacing:1px;padding:8px 12px;background:#0a0a1980;border-radius:6px}.gallery-card{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:380px;max-width:40vw;background:#0a0a19d9}.gallery-name-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}.gallery-name{font-size:28px;font-weight:900;letter-spacing:1px}.gallery-desc{color:#c0c0d0;font-size:13px;line-height:1.5;margin-bottom:14px}.gallery-stats{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:14px}.gallery-stats>div{display:grid;grid-template-columns:36px 1fr 38px;align-items:center;gap:8px}.gallery-stats label{font-size:11px;color:#a0a0c0;font-weight:700;letter-spacing:1px}.gallery-stats b{font-size:13px;text-align:right;font-weight:700}.gallery-stats .bar{height:8px;background:#ffffff14;border-radius:4px;overflow:hidden}.gallery-stats .bar span{display:block;height:100%;background:linear-gradient(90deg,#5a4cff,#ff4c8a)}.gallery-moves{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gallery-move{background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:8px 10px;position:relative;overflow:hidden}.gallery-move .mv-meta:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#ffffff4d}.gallery-move .mv-meta.type-chaos:before{background:#ff4c8a}.gallery-move .mv-meta.type-storm:before{background:#5a8cff}.gallery-move .mv-meta.type-ember:before{background:#ff8c4c}.gallery-move .mv-meta.type-toxic:before{background:#8cff4c}.gallery-move .mv-meta.type-shadow:before{background:#6a4c8a}.gallery-move .mv-meta.type-crystal:before{background:#4cffd0}.mv-name{font-size:13px;font-weight:700}.mv-meta{display:block;font-size:11px;color:#c0c0d0;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;background:transparent!important;padding:0}.gallery-nav{position:absolute;bottom:16px;left:0;right:0;display:flex;gap:12px;justify-content:center}.gallery-nav .btn{padding:12px 28px;font-size:14px}@media (max-width: 700px){.gallery{display:flex;flex-direction:column}.gallery-card{position:static;transform:none;width:100%;max-width:100%;margin:auto 0 70px;padding:10px 12px;max-height:42vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.gallery-name{font-size:18px}.gallery-name-row{margin-bottom:4px}.gallery-desc{font-size:11px;margin-bottom:8px;line-height:1.35}.gallery-stats{gap:3px;margin-bottom:8px}.gallery-stats>div{grid-template-columns:30px 1fr 32px;gap:6px}.gallery-stats label,.gallery-stats b{font-size:10px}.gallery-stats .bar{height:6px}.gallery-moves{grid-template-columns:1fr 1fr;gap:4px}.gallery-move{padding:5px 8px}.mv-name{font-size:11px}.mv-meta{font-size:9px}}.turn-label{color:#ff4c8a;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:12px;padding:4px 0 8px;text-align:center}@media (max-width: 600px){.team-select{padding:16px 12px 24px}.team-select h2{font-size:22px;margin-bottom:12px}.creature-grid{grid-template-columns:1fr 1fr;gap:10px}.creature-card{padding:10px}.creature-card .name{font-size:15px}.creature-card .stats,.creature-card .desc{font-size:11px}.creature-card .desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}@media (max-width: 380px){.creature-grid{grid-template-columns:1fr}}.creature-card.starter{border-color:#ff4c8a;box-shadow:0 0 16px #ff4c8a66}.creature-card.selected{border-color:#4cffd0;box-shadow:0 0 24px #4cffd099;transform:translateY(-4px)}.creature-card .name{font-size:18px;font-weight:700;margin-bottom:4px}.creature-card .type{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;margin-bottom:8px}.creature-card .stats{font-size:12px;color:#a0a0c0;line-height:1.6}.creature-card .desc{font-size:12px;color:#c0c0d0;margin-top:6px;font-style:italic}.type-chaos{background:#ff4c8a}.type-storm{background:#5a8cff}.type-ember{background:#ff8c4c}.type-toxic{background:#8cff4c;color:#000}.type-shadow{background:#6a4c8a}.type-crystal{background:#4cffd0;color:#000}.battle-hud{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:space-between;padding:24px;pointer-events:none}.creature-status{display:flex;flex-direction:column;gap:4px;min-width:280px}.creature-status.enemy{align-self:flex-start}.creature-status.player{align-self:flex-end}.creature-status .row{display:flex;justify-content:space-between;align-items:center}.creature-status .name{font-size:18px;font-weight:700}.creature-status .lvl{font-size:12px;color:#a0a0c0}.hp-bar{width:100%;height:10px;background:#00000080;border:1px solid #444;border-radius:5px;overflow:hidden}.hp-fill{height:100%;background:linear-gradient(90deg,#4cff7a,#4cffd0);transition:width .4s}.hp-fill.low{background:linear-gradient(90deg,#ffaa4c,#ffe04c)}.hp-fill.crit{background:linear-gradient(90deg,#ff4c4c,#ff4c8a)}.hp-text{font-size:12px;color:#c0c0d0;font-variant-numeric:tabular-nums}.battle-bottom{display:flex;flex-direction:column;gap:12px;pointer-events:auto}.battle-log{background:#0a0a19d9;border:2px solid #5a4cff;border-radius:8px;padding:12px 16px;min-height:56px;font-size:15px;line-height:1.4}.move-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.move-btn{background:#141428e6;border:2px solid #5a4cff;color:#fff;padding:12px 16px;border-radius:8px;cursor:pointer;text-align:left;transition:all .15s}.move-btn:hover:not(:disabled){background:#5a4cff4d;transform:translateY(-2px)}.move-btn:disabled{opacity:.5;cursor:not-allowed;border-color:#444}.move-btn.feed-btn{border-color:#ffd84c;background:#503c0066}.move-btn.feed-btn:hover{background:#ffd84c40;box-shadow:0 0 16px #ffd84c66}.move-btn .move-name{font-weight:700;font-size:14px}.move-btn .move-meta{font-size:11px;color:#a0a0c0;margin-top:2px}.center-msg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;font-weight:900;text-align:center;pointer-events:none;text-shadow:0 4px 24px rgba(0,0,0,.8)}.center-msg.win{color:#4cffd0}.center-msg.lose{color:#ff4c8a}.btn-row{display:flex;gap:12px;justify-content:center}.music-toggle{position:fixed;top:16px;right:16px;z-index:100;pointer-events:auto;width:44px;height:44px;border-radius:50%;background:#141428d9;border:2px solid #5a4cff;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .15s;box-shadow:0 4px 12px #5a4cff4d}.music-toggle:hover{transform:scale(1.08);box-shadow:0 6px 18px #5a4cff80}.music-toggle.muted{color:#888;border-color:#555;box-shadow:none}