:root{--bg: #080c14;--bg2: #0c1220;--panel: rgba(10, 16, 30, .92);--border: rgba(255, 255, 255, .08);--text: #e0ecff;--text2: rgba(200, 220, 255, .5);--text3: rgba(200, 220, 255, .25);--danger: #ef4444;--success: #22c55e;--warning: #eab308;--info: #3b82f6;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--text);overflow:hidden}.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.5rem;border:1px solid var(--border);border-radius:.5rem;background:#ffffff0a;color:var(--text);font-family:inherit;font-size:.85rem;cursor:pointer;transition:all .2s;width:100%}.btn:hover{background:#ffffff14}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-start{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;font-size:1rem;font-weight:700;padding:.8rem 2rem;letter-spacing:.12em;margin-top:1.5rem}.btn-start:hover{background:linear-gradient(135deg,#818cf8,#a78bfa);box-shadow:0 0 30px #8b5cf64d}.btn-back{background:none;border:none;color:var(--text2);font-family:inherit;font-size:.8rem;cursor:pointer;padding:.3rem 0;margin-bottom:1rem;text-align:left}.btn-back:hover{color:var(--text)}.menu-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 30% 30%,rgba(99,102,241,.06) 0%,transparent 50%),radial-gradient(ellipse at 70% 70%,rgba(236,72,153,.04) 0%,transparent 50%)}.menu{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto}.menu-content{position:relative;z-index:1;max-width:700px;width:90%;padding:2.5rem;text-align:center}.menu-header{margin-bottom:1.5rem}.menu-orbs{display:flex;gap:.6rem;justify-content:center;margin-bottom:1rem}.menu-orb{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;animation:float 3s ease-in-out infinite;box-shadow:0 0 15px #ffffff1a}.menu-orb:nth-child(2){animation-delay:.3s}.menu-orb:nth-child(3){animation-delay:.6s}.menu-orb:nth-child(4){animation-delay:.9s}.menu-orb:nth-child(5){animation-delay:1.2s}.menu-orb:nth-child(6){animation-delay:1.5s}.menu-content h1{font-size:2.5rem;font-weight:700;letter-spacing:.15em;background:linear-gradient(135deg,#ef4444,#eab308,#22c55e,#3b82f6,#8b5cf6);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 5s linear infinite}.menu-sub{color:var(--text2);font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;margin-top:.3rem}.menu-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--text3),transparent);margin:1.5rem auto}.menu-desc{color:var(--text2);font-size:.78rem;line-height:1.7;max-width:500px;margin:0 auto 1.5rem}.menu-rules{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2rem;max-width:400px;margin-left:auto;margin-right:auto}.menu-rule{display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:var(--text2)}.rule-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.element-select-title{font-size:.7rem;letter-spacing:.2em;color:var(--text3);margin-bottom:1rem}.element-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:550px;margin:0 auto}.element-card{background:var(--panel);border:2px solid var(--border);border-radius:.6rem;padding:1rem .8rem;cursor:pointer;transition:all .25s;text-align:center;font-family:inherit;color:var(--text)}.element-card:hover{background:#ffffff0a;transform:translateY(-2px)}.element-selected{background:#ffffff0f;box-shadow:0 0 20px #ffffff0d}.element-icon{font-size:2rem;margin-bottom:.3rem}.element-name{font-size:.9rem;font-weight:700;letter-spacing:.08em;margin-bottom:.3rem}.element-desc{font-size:.6rem;color:var(--text3);line-height:1.4;margin-bottom:.5rem}.element-matchups{display:flex;justify-content:center;gap:.8rem;font-size:.55rem}.matchup-strong{color:var(--success)}.matchup-weak{color:var(--danger)}.customize{height:100vh;display:flex;align-items:flex-start;justify-content:center;position:relative;overflow:auto;padding:2rem 0}.customize-content{position:relative;z-index:1;max-width:800px;width:90%}.customize-header{text-align:center;margin-bottom:2rem}.customize-element-icon{font-size:2.5rem}.customize-header h1{font-size:1.8rem;letter-spacing:.12em;color:var(--text);margin:.3rem 0}.customize-sub{color:var(--text3);font-size:.75rem;letter-spacing:.1em}.customize-body{display:flex;gap:1.5rem}.ability-pool{flex:1}.pool-title{font-size:.6rem;letter-spacing:.15em;color:var(--text3);margin-bottom:.6rem}.ability-list{display:flex;flex-direction:column;gap:.4rem}.ability-card{background:var(--panel);border:2px solid var(--border);border-radius:.5rem;padding:.7rem .9rem;cursor:pointer;transition:all .2s;text-align:left;font-family:inherit;color:var(--text);width:100%;position:relative}.ability-card:hover{background:#ffffff0a}.ability-selected{background:#ffffff0d}.ability-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}.ability-name{font-size:.8rem;font-weight:700}.ability-mana{font-size:.7rem;color:var(--info);font-weight:600}.ability-mid{display:flex;gap:.8rem;margin-bottom:.3rem}.ability-stat{font-size:.65rem;color:var(--danger);font-weight:600}.ability-heal{color:var(--success)}.ability-buff{color:var(--warning)}.ability-acc{font-size:.6rem;color:var(--text3)}.ability-desc{font-size:.62rem;color:var(--text2);line-height:1.4}.ability-effect{font-size:.58rem;color:var(--warning);margin-top:.2rem}.ability-check{position:absolute;top:.5rem;right:.7rem;color:var(--success);font-size:1rem;font-weight:700}.loadout-preview{width:260px;flex-shrink:0}.loadout-slots{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}.loadout-slot{background:var(--panel);border:1.5px dashed var(--border);border-radius:.4rem;padding:.6rem .8rem;display:flex;justify-content:space-between;align-items:center;min-height:44px}.slot-filled{border-style:solid;border-color:#8b5cf64d}.loadout-name{font-size:.75rem;font-weight:600}.loadout-cost{font-size:.65rem;color:var(--info)}.loadout-empty{font-size:.65rem;color:var(--text3)}.element-advantage-box{border:1px solid;border-radius:.5rem;padding:.8rem;margin-bottom:.5rem}.adv-title{font-size:.65rem;font-weight:700;letter-spacing:.08em;margin-bottom:.4rem}.adv-row{display:flex;justify-content:space-between;font-size:.65rem;color:var(--text2);padding:.15rem 0}.battle{height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}.battle-bg{position:absolute;top:0;right:0;bottom:0;left:0}.battle-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:.4rem 1.5rem;background:var(--panel);border-bottom:1px solid var(--border);height:40px}.bh-title{font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--text3)}.bh-round{font-size:.8rem;font-weight:700;color:var(--text)}.bh-turn{font-size:.7rem;font-weight:600;color:var(--warning);letter-spacing:.05em}.battle-arena{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;gap:2rem;padding:1rem}.fighter{display:flex;flex-direction:column;align-items:center;width:200px;position:relative;padding:1.5rem 1rem;background:var(--panel);border:1px solid var(--border);border-radius:.8rem;transition:transform .1s}.fighter-glow{position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;border-radius:50%;z-index:-1}.shake{animation:shake .4s ease-out}.fighter-icon{font-size:3rem;margin-bottom:.3rem;filter:drop-shadow(0 0 10px currentColor)}.fighter-name{font-size:.9rem;font-weight:700}.fighter-element{font-size:.65rem;font-weight:600;letter-spacing:.08em;margin-bottom:.8rem}.fighter-bars{width:100%;display:flex;flex-direction:column;gap:.3rem}.bar-row{display:flex;align-items:center;gap:.4rem}.bar-label{font-size:.55rem;color:var(--text3);width:18px;text-align:right}.bar-track{flex:1;height:8px;background:#ffffff0f;border-radius:8px;overflow:hidden}.bar-fill{height:100%;border-radius:8px;transition:width .5s ease}.bar-val{font-size:.6rem;color:var(--text2);min-width:50px;text-align:right}.shield-indicator{margin-top:.4rem;font-size:.7rem;color:var(--info);font-weight:600}.status-icons{display:flex;gap:.3rem;margin-top:.4rem;flex-wrap:wrap;justify-content:center}.status-icon{font-size:.6rem;padding:.1rem .35rem;border-radius:.2rem;background:#ffffff0d;border:1px solid var(--border)}.status-burn{border-color:#ef44444d;color:#ef4444}.status-freeze{border-color:#67e8f94d;color:#67e8f9}.status-stun{border-color:#eab3084d;color:#eab308}.status-shield{border-color:#3b82f64d;color:#3b82f6}.status-slow{border-color:#a8a29e4d;color:#a8a29e}.status-weaken{border-color:#ec48994d;color:#ec4899}.arena-vs{font-size:1.5rem;color:var(--text3);display:flex;align-items:center}.ability-bar{position:relative;z-index:1;display:flex;gap:.4rem;padding:.6rem 1rem;background:var(--panel);border-top:1px solid var(--border)}.battle-ability{flex:1;background:#ffffff08;border:1.5px solid var(--border);border-radius:.5rem;padding:.6rem;cursor:pointer;transition:all .2s;text-align:center;font-family:inherit;color:var(--text)}.battle-ability:hover:not(:disabled){background:#ffffff12;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.ability-no-mana{opacity:.35;cursor:not-allowed}.ba-name{display:block;font-size:.75rem;font-weight:700;margin-bottom:.2rem}.ba-cost{display:block;font-size:.6rem;color:var(--info);margin-bottom:.15rem}.ba-power{display:block;font-size:.6rem;color:var(--danger);font-weight:600}.ba-heal-text{color:var(--success)}.ba-buff-text{color:var(--warning)}.battle-log{position:relative;z-index:1;height:120px;background:var(--bg2);border-top:1px solid var(--border);padding:.5rem 1rem}.battle-log-scroll{height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}.log-msg{font-size:.68rem;line-height:1.4;padding:.1rem 0;animation:fadeIn .3s}.log-player{color:#60a5fa}.log-enemy{color:#f87171}.log-system{color:var(--text3)}.log-status{color:var(--warning)}.log-critical{color:#fbbf24;font-weight:700}.result{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.result-bg{position:absolute;top:0;right:0;bottom:0;left:0}.result-win .result-bg{background:radial-gradient(ellipse at 50% 50%,rgba(34,197,94,.08) 0%,transparent 60%)}.result-lose .result-bg{background:radial-gradient(ellipse at 50% 50%,rgba(239,68,68,.08) 0%,transparent 60%)}.result-card{position:relative;z-index:1;background:var(--panel);border:1px solid var(--border);border-radius:1rem;padding:2.5rem;max-width:460px;width:90%;text-align:center;opacity:0;transform:scale(.9);transition:all .5s ease-out}.result-show{opacity:1;transform:scale(1)}.result-icon{font-size:3rem;margin-bottom:.5rem}.result-card h1{font-size:2rem;letter-spacing:.15em;margin-bottom:.3rem}.result-win h1{background:linear-gradient(135deg,#22c55e,#eab308);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.result-lose h1{background:linear-gradient(135deg,#ef4444,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.result-sub{color:var(--text2);font-size:.85rem;margin-bottom:1.5rem}.result-stats{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.5rem}.rstat{display:flex;flex-direction:column;align-items:center}.rstat-val{font-size:1.3rem;font-weight:700;color:var(--text)}.rstat-label{font-size:.55rem;color:var(--text3);text-transform:uppercase;letter-spacing:.1em}.result-players{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.result-player{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.8rem 1rem;border-radius:.5rem;border:1px solid var(--border);min-width:100px}.rp-winner{border-color:#22c55e66;background:#22c55e0d}.rp-icon{font-size:1.5rem}.rp-name{font-size:.75rem;font-weight:600}.rp-hp{font-size:.6rem;color:var(--text3)}.rp-vs{font-size:.8rem;color:var(--text3);font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}30%{transform:translate(6px)}45%{transform:translate(-4px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}90%{transform:translate(2px)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}@media(max-width:900px){.element-grid{grid-template-columns:repeat(2,1fr)}.customize-body{flex-direction:column}.loadout-preview{width:100%}.battle-arena{flex-direction:column;gap:.5rem}.fighter{width:100%;max-width:260px;padding:1rem}.fighter-icon{font-size:2rem}.arena-vs{font-size:1rem}.ability-bar{flex-wrap:wrap}.battle-ability{min-width:calc(50% - .2rem)}}