:root{--bg: #080808;--bg-card: #0a0a0a;--bg-elevated: #0f1218;--border: rgba(255, 255, 255, .06);--border-active: rgba(255, 255, 255, .15);--text: #ffffff;--text-2: #8e8e93;--text-3: #48484a;--accent: #009DFF;--accent-light: #22B2FF;--red: #ff3b3b;--green: #34c759;--blue: #0a84ff;--yellow: #ffd60a;--tier-t1: #6b7280;--tier-t2: #34c759;--tier-t3: #0a84ff;--tier-t4: #bf5af2;--tier-t5: #ff9f0a;--arch-tank: #0a84ff;--arch-attacker: #ff453a;--arch-speedster: #ffd60a;--arch-guardian: #64d2ff;--arch-healer: #30d158;--arch-berserker: #ff6723;--fire: #ff453a;--ice: #64d2ff;--lightning: #ffd60a;--poison: #30d158;--shadow: #bf5af2;--glass-bg: rgba(255, 255, 255, .04);--glass-border: rgba(255, 255, 255, .05);--glass-blur: 12px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-6: 24px;--sp-8: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease}img,svg{-webkit-user-drag:none;user-drag:none;pointer-events:none}body{background:var(--bg);color:var(--text);font-family:SF Compact Display,SF Pro Display,Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;overflow:hidden;position:fixed;width:100%;height:100%}#root{height:100%;display:flex;flex-direction:column;padding-top:calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));padding-right:calc(var(--tg-safe-area-inset-right, 0px) + var(--tg-content-safe-area-inset-right, 0px));padding-bottom:calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px));padding-left:calc(var(--tg-safe-area-inset-left, 0px) + var(--tg-content-safe-area-inset-left, 0px));box-sizing:border-box}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideL{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideR{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}@keyframes confetti{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}to{transform:translateY(400px) rotate(720deg) scale(.5);opacity:0}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes glowPulse{0%,to{box-shadow:0 0 8px var(--glow-color, rgba(0,157,255,.2))}50%{box-shadow:0 0 20px var(--glow-color, rgba(0,157,255,.4))}}@keyframes attackLeft{0%,to{transform:translate(0)}40%{transform:translate(16px)}}@keyframes attackRight{0%,to{transform:translate(0)}40%{transform:translate(-16px)}}@keyframes charging{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes actionAnnounce{0%{opacity:0;transform:translateY(4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes critFlash{0%{opacity:.35}to{opacity:0}}@keyframes numberPop{0%{opacity:1;transform:translateY(0) scale(.6)}20%{transform:translateY(-8px) scale(1.3)}40%{transform:translateY(-16px) scale(1)}to{opacity:0;transform:translateY(-56px) scale(1)}}@keyframes staggerIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.015)}}@keyframes ringPulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:.15}}@keyframes countUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes cardFlip{0%{transform:perspective(600px) rotateY(90deg);opacity:0}to{transform:perspective(600px) rotateY(0);opacity:1}}@keyframes shineSwipe{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes timerDrain{0%{stroke-dashoffset:0}to{stroke-dashoffset:283}}@keyframes profileSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes profileSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes introSlideFromLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes introSlideFromRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes introVsPop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}60%{opacity:1;transform:scale(1.15) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes introCardPop{0%{opacity:0;transform:scale(.5) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.page{animation:fadeUp .3s cubic-bezier(.25,.46,.45,.94) both}.screen-shake{animation:shake .3s ease}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color .2s,transform .15s,box-shadow .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.card:active{transform:scale(.97)}.card.selected{border-color:var(--accent);box-shadow:0 0 12px #009dff26}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:1rem;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s,box-shadow .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px}.btn:active{transform:scale(.95)}.btn:disabled{opacity:.4;cursor:default;transform:none}.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover:not(:disabled){box-shadow:0 12px 48px #009dff40,0 6px 24px #009dff26}.btn-accent:active:not(:disabled){box-shadow:0 0 20px #009dff4d;transform:scale(.98)}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-2)}.btn-outline:active:not(:disabled){border-color:var(--border-active);color:var(--text)}.hp-bar{height:8px;background:#ffffff0f;border-radius:4px;overflow:hidden;position:relative}.hp-fill{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1);background:linear-gradient(90deg,#00b85c,var(--green));box-shadow:0 0 6px #34c7594d}.hp-fill.mid{background:linear-gradient(90deg,#e6a800,var(--yellow));box-shadow:0 0 6px #ffd60a4d}.hp-fill.low{background:linear-gradient(90deg,#cc2020,var(--red));box-shadow:0 0 8px #ff3b3b66;animation:pulse .6s infinite}.dmg-float{position:absolute;font-weight:800;pointer-events:none;animation:numberPop .9s ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.9);z-index:10;font-style:italic}.dmg-float.damage{color:var(--red);font-size:24px}.dmg-float.heal{color:var(--green);font-size:22px}.dmg-float.ability{color:var(--accent);font-size:28px}.dmg-float.crit{color:#fff;font-size:34px;-webkit-text-stroke:1.5px var(--red);text-shadow:0 0 16px rgba(255,59,59,.7)}.dmg-float.miss{color:var(--text-3);font-size:18px;font-style:italic}.dmg-float.status{color:var(--blue);font-size:16px;font-style:normal}.confetti{position:fixed;border-radius:2px;animation:confetti 2.5s ease-out forwards;z-index:100;pointer-events:none}.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg)}.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,#111318 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}::-webkit-scrollbar{display:none}*{scrollbar-width:none}.spinner{width:32px;height:32px;border:2px solid rgba(255,255,255,.08);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0009;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.stagger-item{animation:staggerIn .3s cubic-bezier(.25,.46,.45,.94) both;animation-delay:var(--delay, 0ms)}.battle-btn{position:relative;width:100%;padding:12px 0;border:none;border-radius:1rem;background:linear-gradient(135deg,#009dff,#0070cc,#009dff);background-size:200% 100%;color:#fff;font-size:15px;font-weight:800;letter-spacing:2px;text-transform:uppercase;cursor:pointer;box-shadow:0 0 24px #009dff40,0 4px 16px #00000080,inset 0 1px #ffffff26,inset 0 -2px #00000026;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .15s;animation:battleGlow 2.5s ease-in-out infinite;overflow:hidden}.battle-btn:active{transform:scale(.96)}.battle-btn:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:btnShine 4s ease-in-out infinite;pointer-events:none}@keyframes battleGlow{0%,to{box-shadow:0 0 24px #009dff40,0 4px 16px #00000080,inset 0 1px #ffffff26,inset 0 -2px #00000026}50%{box-shadow:0 0 40px #009dff66,0 0 80px #0070cc1a,0 4px 20px #00000080,inset 0 1px #fff3,inset 0 -2px #00000026}}@keyframes btnShine{0%,65%,to{left:-100%}30%{left:120%}}@keyframes bgDrift{0%{transform:rotate(-20deg) translateY(0)}to{transform:rotate(-20deg) translateY(50%)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}