:root{--bg: #0b0b16;--panel: #171728;--text: #f4f1ea;--muted: #a9a6b8;--gold: #ffd34d;--red: #d4141d;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(circle at 50% 0%,#1d1840 0%,var(--bg) 60%);overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}.screen{height:100%;overflow-y:auto;padding:24px clamp(16px,5vw,64px);display:flex;flex-direction:column;align-items:center;gap:16px}.title{margin:8px 0 0;font-size:clamp(22px,4vw,36px);letter-spacing:.02em}.title.small{font-size:20px;margin-top:12px}.muted{color:var(--muted)}.col{display:flex;flex-direction:column;gap:10px;min-width:min(320px,90vw)}.row-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.btn{background:var(--panel);border:2px solid #3a3a5c;border-radius:12px;padding:12px 20px;font-weight:700;transition:transform .08s,border-color .12s}.btn:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg,#ffd34d,#e8a512);color:#1a1200;border-color:#fff3b0}.btn.big{font-size:20px;padding:14px 30px}.btn.back{align-self:flex-start}.btn em{font-style:normal;color:var(--gold);margin-left:8px}.menu{justify-content:center;text-align:center}.logo h1{margin:6px 0;font-size:clamp(40px,9vw,92px);line-height:.95;color:var(--gold);text-shadow:4px 4px 0 #b3121b,8px 8px 0 #0b0b16;letter-spacing:.02em}.logo small{color:var(--muted);text-transform:uppercase;letter-spacing:.2em}.logo span{color:#ff8a8a;font-weight:700;letter-spacing:.3em;text-transform:uppercase}.disclaimer{max-width:560px;font-size:12px;color:var(--muted)}.char-cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.char-card{width:min(300px,92vw);border:3px solid transparent;border-radius:18px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 10px 30px #0008;transition:transform .15s,border-color .15s}.char-card:hover{transform:translateY(-4px)}.char-card.sel{border-color:var(--gold);transform:translateY(-6px) scale(1.02);box-shadow:0 0 0 4px #ffd34d44,0 14px 40px #000a}.char-card h3{margin:4px 0 0;font-size:28px}.char-card .sub{font-weight:700;opacity:.9}.char-card .party{align-self:flex-end;background:#000a;padding:3px 10px;border-radius:999px;font-weight:800}.char-card p{font-size:13px;opacity:.9;margin:6px 0}.char-card ul{list-style:none;padding:0;margin:0;text-align:left;font-size:13px;width:100%}.char-card li{padding:2px 0}.portrait{animation:bob 1.4s ease-in-out infinite;filter:drop-shadow(0 6px 6px #0008)}@keyframes bob{50%{transform:translateY(-6px) rotate(1.5deg)}}.arena-cards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.arena-card{width:min(260px,92vw);background:var(--panel);border:3px solid #3a3a5c;border-radius:14px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px}.arena-card span{font-size:12px;color:var(--muted)}.arena-card.sel{background:#26264a}.list{width:min(720px,100%);display:flex;flex-direction:column;gap:8px}.list h3{margin:8px 0 0}.row{display:flex;align-items:center;gap:12px;background:var(--panel);border-radius:12px;padding:10px 14px}.row.locked{opacity:.55}.row .icon{font-size:26px}.row .grow,.row input[type=range]{flex:1}.two-col{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;width:100%}.two-col .list{flex:1 1 340px}.result h1{margin:0;text-align:center;font-size:clamp(28px,6vw,56px)}.result.win h1{color:var(--gold)}.result.lose h1{color:#ff6b6b}.stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.stats div{background:var(--panel);border-radius:12px;padding:12px 18px;min-width:100px;text-align:center}.stats b{display:block;font-size:26px}.stats span{font-size:12px;color:var(--muted)}.game-root{position:relative;width:100%;height:100%;overflow:hidden}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.game-canvas canvas{display:block}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-weight:800;--panel: linear-gradient(180deg, #232a4a 0%, #121528 100%);--edge: #4b5688}.hud button{pointer-events:auto}.xp-top{position:absolute;top:0;left:0;right:0;height:18px;background:#0b0d1ccc;border-bottom:2px solid #000;overflow:hidden}.xp-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#ffd35a,#f08a1c);box-shadow:0 0 12px #ffb02e99;transition:width .12s linear}.xp-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#ffffff66,transparent 55%)}.xp-label{position:absolute;right:14px;top:0;line-height:18px;font-size:12px;letter-spacing:.12em;color:#fff3c9;text-shadow:0 1px 2px #000,0 0 6px #000}.hud-top{position:absolute;top:24px;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:0 14px;gap:12px}.hero{display:flex;gap:10px;align-items:center;background:var(--panel);border:2px solid var(--edge);border-radius:16px;padding:6px 14px 6px 6px;box-shadow:0 6px 16px #0009,inset 0 1px #fff2}.avatar{width:58px;height:58px;border-radius:12px;border:3px solid;overflow:hidden;background:#0c0e1c;display:grid;place-items:end center;flex:none}.avatar .portrait,.avatar .portrait-img{animation:none;filter:none;width:100%;height:auto;margin-bottom:-6px}.hero-bars{display:flex;flex-direction:column;gap:4px;min-width:210px}.hero-name{font-size:15px;text-shadow:0 2px 2px #000}.hero-name small{opacity:.7;font-size:11px;margin-left:6px}.hp{display:flex;align-items:center;gap:8px}.heart{color:#ff4a5e;font-size:22px;line-height:1;filter:drop-shadow(0 0 5px #ff2a44aa)}.hp.low .heart{animation:beat .55s infinite}@keyframes beat{50%{transform:scale(1.3)}}.hp-track{position:relative;flex:1;height:16px;background:#0a0b14;border:2px solid #000;border-radius:9px;overflow:hidden}.hp-track i{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#ff7a86,#e11d3a 55%,#9b0f26);transition:width .1s linear}.hp.low .hp-track i{background:linear-gradient(180deg,#ffb0b8,#ff3b4f 60%,#b3122b)}.hp-track:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,transparent 0 17px,#0006 17px 19px),linear-gradient(180deg,#ffffff40,transparent 50%)}.hp b{font-size:13px;text-shadow:0 1px 2px #000;min-width:62px;text-align:right}.hp b small{opacity:.65;font-size:11px}.clock-wrap{position:absolute;left:50%;transform:translate(-50%);top:0}.clock{background:var(--panel);border:2px solid var(--edge);border-radius:14px;padding:2px 18px;font-size:30px;letter-spacing:.04em;font-variant-numeric:tabular-nums;text-shadow:0 2px 3px #000;box-shadow:0 6px 14px #0009}.right{display:flex;gap:10px;align-items:center}.kills{background:var(--panel);border:2px solid var(--edge);border-radius:12px;padding:6px 12px;font-size:16px;text-shadow:0 2px 2px #000}.kills span{color:#ff8a8a}.pause-btn{background:var(--panel);border:2px solid var(--edge);border-radius:12px;width:42px;height:42px;font-weight:900;box-shadow:0 6px 14px #0009}.pause-btn:hover{border-color:var(--gold)}.boss-bar{position:absolute;top:96px;left:50%;transform:translate(-50%);width:min(560px,80vw);text-align:center;text-shadow:0 2px 4px #000}.boss-bar b{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#ffd0d0}.boss-track{margin-top:4px;height:18px;background:#0a0b14;border:2px solid #000;border-radius:10px;overflow:hidden;box-shadow:0 0 18px #a24bff66}.boss-track i{display:block;height:100%;background:linear-gradient(180deg,#d9a0ff,#8a2be2 55%,#4c1590);transition:width .1s linear}.banner{position:absolute;top:26%;left:0;right:0;text-align:center;font-size:clamp(26px,5vw,54px);font-weight:900;color:var(--gold);text-shadow:0 4px 0 #b3121b,0 0 24px #000;animation:pop .35s ease-out}@keyframes pop{0%{transform:scale(.6);opacity:0}}.loadout{position:absolute;top:84px;right:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;max-width:48vw}.grid{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.slot{position:relative;width:46px;height:50px;background:var(--panel);border:2px solid var(--edge);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 4px 8px #0008}.slot.passive{border-color:#3f8fb0}.slot.evolved{border-color:var(--gold);box-shadow:0 0 12px #ffd34d99,0 4px 8px #0008}.ico{display:block;line-height:1}.ico.emoji{filter:drop-shadow(0 1px 1px #000)}.pips{display:flex;gap:2px}.pips i{width:4px;height:4px;border-radius:50%;background:#fff3}.pips i.on{background:#ffd34d;box-shadow:0 0 4px #ffb02e}.special-btn{position:absolute;right:16px;bottom:16px;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2d3560,#0c0f20 70%);border:4px solid var(--edge);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px;box-shadow:0 8px 20px #000a}.special-btn .fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#ffd34d55,#ff9a1f55)}.special-btn b,.special-btn small{position:relative}.special-btn b{font-size:12px;line-height:1.1;text-shadow:0 1px 2px #000}.special-btn small{font-size:10px;color:var(--muted)}.special-btn.ready{border-color:var(--gold);box-shadow:0 0 22px #ffd34daa,0 8px 20px #000a;animation:pulse 1s infinite}@keyframes pulse{50%{transform:scale(1.06)}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 40%,#0a0c1acc,#000e);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;pointer-events:auto;padding:16px;overflow-y:auto}.overlay h2{margin:0;font-size:clamp(24px,4vw,42px);color:var(--gold);text-align:center;text-shadow:0 4px 0 #b3121b,0 0 24px #000}.cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.ucard{position:relative;width:min(240px,85vw);min-height:300px;background:var(--panel);border:4px solid #777;border-radius:18px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .12s,box-shadow .12s;box-shadow:0 10px 26px #000a;animation:dealt .3s ease-out backwards}.ucard:nth-child(2){animation-delay:.07s}.ucard:nth-child(3){animation-delay:.14s}@keyframes dealt{0%{transform:translateY(40px) scale(.85);opacity:0}}.ucard:hover{transform:translateY(-8px) scale(1.04)}.ucard .icon{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,#fff2,#0005)}.ucard p{margin:0;font-size:13px;color:var(--muted);font-weight:600}.ucard em{font-style:normal;font-size:12px;color:var(--gold);margin-top:auto}.ucard .key{position:absolute;top:8px;left:12px;font-weight:900;opacity:.7}.ucard .rar{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.r-comum{border-color:#8a8a96}.r-incomum{border-color:#3fbf5f;box-shadow:0 0 18px #3fbf5f55,0 10px 26px #000a}.r-incomum .rar{color:#3fbf5f}.r-rara{border-color:#3d8bff;box-shadow:0 0 20px #3d8bff66,0 10px 26px #000a}.r-rara .rar{color:#3d8bff}.r-epica{border-color:#a24bff;box-shadow:0 0 22px #a24bff77,0 10px 26px #000a}.r-epica .rar{color:#a24bff}.r-lendaria{border-color:#ffd34d;box-shadow:0 0 30px #ffd34daa,0 10px 26px #000a}.r-lendaria .rar{color:#ffd34d}@media(max-width:640px){.clock{font-size:20px;padding:0 10px}.hero-bars{min-width:130px}.special-btn{width:92px;height:92px}.loadout{top:76px}.ucard{min-height:0;flex-direction:row;text-align:left;width:94vw}.ucard .icon{font-size:36px}.cards{gap:8px}}.char-cards{gap:22px;padding-top:70px}.char-card{width:min(320px,92vw);padding:0;overflow:visible;position:relative;border-radius:22px;justify-content:flex-start;align-items:stretch;gap:0}.char-card .party{position:absolute;top:12px;right:12px;z-index:3}.char-card .art{position:relative;height:250px;pointer-events:none}.char-card .art .portrait-img{position:absolute;left:50%;top:-72px;transform:translate(-50%);max-width:none;filter:drop-shadow(0 14px 14px #000b);transition:transform .25s}.char-card:hover .art .portrait-img,.char-card.sel .art .portrait-img{transform:translate(-50%) scale(1.04)}.char-card .art .portrait{display:block;margin:40px auto 0}.char-card .info{position:relative;margin-top:-60px;padding:70px 18px 18px;border-radius:0 0 20px 20px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 32%,rgba(0,0,0,.62) 100%)}.char-card h3{font-size:34px;letter-spacing:.01em;text-shadow:0 3px 4px #000a}.char-card ul li{display:flex;gap:6px;align-items:center}.char-card .ico{display:inline-block}.portrait-img,.avatar{display:block}.avatar-img{width:100%;height:100%;background-size:175% auto;background-position:46% 4%;background-repeat:no-repeat}.char-card .info{flex:1;display:flex;flex-direction:column;justify-content:flex-end}.group{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.group h4{margin:8px 0 2px;color:var(--gold);font-size:14px;text-transform:uppercase;letter-spacing:.08em}.row small{opacity:.6;text-transform:uppercase;font-size:10px;letter-spacing:.08em}