:root{--color-fire: #FF4444;--color-water: #4488FF;--color-earth: #8B5C3C;--color-air: #88DD88;--color-light: #FFDD44;--color-darkness: #9966CC;--color-common: #9CA3AF;--color-rare: #3B82F6;--color-epic: #8B5CF6;--color-legendary: #F59E0B;--color-mythic: #EF4444;--color-god: linear-gradient(135deg, #FF0080, #FF8C00, #40E0D0, #9400D3);--color-bg-dark: #0a0a0a;--color-bg-medium: #121218;--color-bg-light: #1a1a2e;--color-surface: #1e1e2e;--color-surface-hover: #252538;--color-border: #2a2a3e;--color-text: #FFFFFF;--color-text-secondary: #A0A0A0;--color-accent: #8B5CF6;--color-gold: #F59E0B;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(139, 92, 246, .3)}@keyframes glow-pulse{0%,to{box-shadow:0 0 5px var(--color-accent),0 0 10px var(--color-accent)}50%{box-shadow:0 0 20px var(--color-accent),0 0 40px var(--color-accent),0 0 60px var(--color-accent)}}@keyframes card-reveal{0%{transform:perspective(600px) rotateY(180deg) scale(.3);opacity:0}50%{transform:perspective(600px) rotateY(90deg) scale(.7);opacity:.5}to{transform:perspective(600px) rotateY(0) scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes slide-up{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes spin-glow{0%{transform:rotate(0);filter:drop-shadow(0 0 8px var(--color-gold))}50%{transform:rotate(180deg);filter:drop-shadow(0 0 20px var(--color-accent))}to{transform:rotate(360deg);filter:drop-shadow(0 0 8px var(--color-gold))}}@keyframes screen-flash{0%{opacity:0}20%{opacity:1}to{opacity:0}}@keyframes energy-burst{0%{transform:scale(0);opacity:1}to{transform:scale(3);opacity:0}}@keyframes damage-float{0%{transform:translateY(0);opacity:1}to{transform:translateY(-40px);opacity:0}}@keyframes hp-drain{0%{width:var(--hp-from)}to{width:var(--hp-to)}}@keyframes ripple{0%{transform:scale(0);opacity:.6}to{transform:scale(4);opacity:0}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes shimmer-god{0%,to{filter:hue-rotate(0deg) brightness(1)}25%{filter:hue-rotate(90deg) brightness(1.3)}50%{filter:hue-rotate(180deg) brightness(1)}75%{filter:hue-rotate(270deg) brightness(1.3)}}@keyframes pulse-ring{0%{transform:scale(.8);opacity:1}to{transform:scale(1.4);opacity:0}}@keyframes scale-in{0%{transform:scale(0)}70%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font-family);background:linear-gradient(135deg,#0a0a0a,#0f0f1a,#1a1a2e,#0f0f1a,#0a0a0a);background-size:400% 400%;animation:bg-drift 20s ease-in-out infinite;color:var(--color-text);min-height:100vh;overflow-x:hidden}@keyframes bg-drift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}#root{min-height:100vh;display:flex;flex-direction:column}.legendary-glow{animation:legendary-glow 2s ease-in-out infinite}@keyframes legendary-glow{0%,to{box-shadow:inset 0 0 10px #f59e0b33,0 0 15px #f59e0b4d}50%{box-shadow:inset 0 0 20px #f59e0b66,0 0 30px #f59e0b80}}.mythic-glow{animation:mythic-glow 2s ease-in-out infinite}@keyframes mythic-glow{0%,to{box-shadow:inset 0 0 10px #ef44444d,0 0 15px #ef444466}50%{box-shadow:inset 0 0 20px #ef444480,0 0 30px #ef444499}}.god-glow{animation:god-glow 1.5s linear infinite}@keyframes god-glow{0%{box-shadow:inset 0 0 15px #ff00804d,0 0 20px #ff8c0066,0 0 30px #40e0d04d}33%{box-shadow:inset 0 0 15px #ff8c0066,0 0 20px #40e0d066,0 0 30px #9400d34d}66%{box-shadow:inset 0 0 15px #40e0d04d,0 0 20px #9400d366,0 0 30px #ff00804d}to{box-shadow:inset 0 0 15px #ff00804d,0 0 20px #ff8c0066,0 0 30px #40e0d04d}}.element-fire{border-color:var(--color-fire)}.element-water{border-color:var(--color-water)}.element-earth{border-color:var(--color-earth)}.element-air{border-color:var(--color-air)}.element-light{border-color:var(--color-light)}.element-darkness{border-color:var(--color-darkness)}.rarity-common{background:var(--color-common)}.rarity-rare{background:var(--color-rare)}.rarity-epic{background:var(--color-epic)}.rarity-legendary{background:var(--color-legendary)}.rarity-mythic{background:var(--color-mythic)}button{cursor:pointer;font-family:var(--font-family);transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}button:hover:not(:disabled){transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0) scale(.97)}button:disabled{cursor:not-allowed;opacity:.5}.toast-container{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:400px;width:90vw}.toast{padding:12px 20px;border-radius:var(--radius-lg);font-size:14px;font-weight:600;text-align:center;animation:slide-up .3s ease,fade-out .3s ease 2.5s forwards;pointer-events:auto;box-shadow:var(--shadow-lg)}.toast-success{background:linear-gradient(135deg,#065f46,#059669);color:#fff;border:1px solid #10b981}.toast-error{background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border:1px solid #ef4444}.toast-info{background:linear-gradient(135deg,#1e3a5f,#3b82f6);color:#fff;border:1px solid #60a5fa}.toast-reward{background:linear-gradient(135deg,#78350f,var(--color-gold));color:#000;border:1px solid var(--color-gold)}.screen-flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none;animation:screen-flash .6s ease-out forwards}.screen-flash.gold{background:#f59e0b4d}.screen-flash.purple{background:#8b5cf64d}.screen-flash.red{background:#ef44444d}.page-transition-enter{animation:fade-in .25s ease-out}.page-transition-exit{animation:fade-out .2s ease-in forwards}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-bg-dark)}::-webkit-scrollbar-thumb{background:var(--color-surface);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-surface-hover)}.spinner{width:24px;height:24px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .6s linear infinite;display:inline-block}.spinner.gold{border-top-color:var(--color-gold)}.spinner-sm{width:16px;height:16px;border-width:2px}.spinner-lg{width:40px;height:40px;border-width:4px}@keyframes spin{to{transform:rotate(360deg)}}.element-fire-glow{text-shadow:0 0 8px var(--color-fire)}.element-water-glow{text-shadow:0 0 8px var(--color-water)}.element-earth-glow{text-shadow:0 0 8px var(--color-earth)}.element-air-glow{text-shadow:0 0 8px var(--color-air)}.element-light-glow{text-shadow:0 0 12px var(--color-light)}.element-darkness-glow{text-shadow:0 0 12px var(--color-darkness)}.glass{background:#1e1e2e99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}.new-badge{position:absolute;top:4px;right:4px;background:linear-gradient(135deg,#ff0080,#ff8c00);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:8px;animation:scale-in .3s ease,glow-pulse 2s ease-in-out infinite;z-index:2;text-transform:uppercase;letter-spacing:.5px}.damage-num{position:absolute;font-weight:800;font-size:18px;animation:damage-float 1s ease-out forwards;pointer-events:none;z-index:10;text-shadow:0 2px 4px rgba(0,0,0,.5)}.damage-num.crit{font-size:26px}.ripple{position:absolute;border-radius:50%;background:#ffffff4d;pointer-events:none;animation:ripple .6s ease-out forwards}.stat-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.stat-bar-label{width:30px;font-size:10px;color:var(--color-text-secondary);font-weight:700;text-align:right}.stat-bar-track{flex:1;height:6px;background:var(--color-bg-dark);border-radius:3px;overflow:hidden}.stat-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}.stat-bar-value{width:35px;font-size:10px;color:var(--color-text);font-weight:600;text-align:right}.pity-bar{width:100%;height:6px;background:var(--color-bg-dark);border-radius:3px;overflow:hidden;margin-top:4px}.pity-bar-fill{height:100%;border-radius:3px;transition:width .3s ease}.pity-bar-fill.legendary{background:linear-gradient(90deg,#b45309,var(--color-legendary))}.pity-bar-fill.mythic{background:linear-gradient(90deg,#991b1b,var(--color-mythic))}.pity-bar-fill.god{background:linear-gradient(90deg,#ff0080,#ff8c00,#40e0d0,#9400d3)}@keyframes particle-float{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.6}90%{opacity:.6}to{transform:translateY(-10vh) scale(1);opacity:0}}.particle{position:absolute;border-radius:50%;pointer-events:none;animation:particle-float linear infinite}.campaign-path{position:relative;max-width:360px;margin:0 auto;padding:20px 0}.path-node{width:56px;height:56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;position:relative;z-index:1}.path-node.boss{width:72px;height:72px;border-width:3px}.path-node:hover:not(.locked){transform:scale(1.1)}.path-node.completed{border-color:#22c55e;background:#22c55e26}.path-node.current{animation:glow-pulse 2s ease-in-out infinite}.path-node.locked{opacity:.4;cursor:not-allowed}.path-connector{position:absolute;z-index:0}.path-connector-line{position:absolute;background:var(--color-border)}.path-connector-line.completed{background:#22c55e}.path-connector-line.current{background:linear-gradient(90deg,var(--color-accent),var(--color-border))}.featured-chroma{animation:float 3s ease-in-out infinite}.text-gradient{background:linear-gradient(135deg,var(--color-accent),var(--color-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-gradient-god{background:var(--color-god);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}input[type=text],input[type=password],select{transition:border-color .2s ease,box-shadow .2s ease}input[type=text]:focus,input[type=password]:focus,select:focus{border-color:var(--color-accent)!important;box-shadow:0 0 0 3px #8b5cf633;outline:none}@keyframes count-up{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.currency-change-positive{animation:count-up .3s ease;color:#22c55e}.currency-change-negative{animation:count-up .3s ease;color:#ef4444}.gacha-container{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);gap:var(--spacing-lg);min-height:calc(100vh - 80px);position:relative}.gacha-header{text-align:center;width:100%}.gacha-header h1{font-size:2rem;font-weight:700;margin-bottom:var(--spacing-sm);background:linear-gradient(135deg,var(--color-accent),var(--color-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gacha-header .subtitle{font-size:.8rem;color:var(--color-text-secondary);margin-top:4px}.currency-display{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.25rem;color:var(--color-gold)}.currency-display .crystal-icon{font-size:1.5rem}.pity-display{display:flex;gap:var(--spacing-lg);padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);width:100%;max-width:400px}.pity-counter{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.pity-counter .label{font-size:.7rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:1px}.pity-counter .progress{width:100%;display:flex;align-items:center;gap:6px}.pity-counter .value{font-size:1.2rem;font-weight:700;min-width:40px;text-align:center}.pity-counter.legendary .value{color:var(--color-legendary)}.pity-counter.mythic .value{color:var(--color-mythic)}.pity-counter.god .value{background:var(--color-god);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.pity-counter .max{font-size:.7rem;color:var(--color-text-secondary)}.rates-display{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center;font-size:.7rem;color:var(--color-text-secondary)}.rate-badge{padding:2px 8px;border-radius:10px;background:var(--color-bg-medium);border:1px solid var(--color-border);font-weight:600}.gacha-actions{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center;width:100%;max-width:320px}.gacha-actions .btn-pull{flex:1;min-width:140px;padding:14px 20px;border-radius:var(--radius-lg);font-weight:700;font-size:15px;text-align:center;position:relative;overflow:hidden}.btn-pull.single{background:linear-gradient(135deg,var(--color-accent),#7c3aed);color:#fff;border:none}.btn-pull.multi{background:linear-gradient(135deg,var(--color-gold),#d97706);color:#000;border:none}.btn-pull .cost{display:block;font-size:11px;opacity:.8;margin-top:2px}.summon-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;background:#000000d9;display:flex;align-items:center;justify-content:center;animation:fade-in .3s ease}.summon-overlay.purple{background:#581c874d}.summon-overlay.gold{background:#92400e4d}.summon-energy{position:absolute;width:200px;height:200px;border-radius:50%;animation:summon-pulse 1.5s ease-in-out infinite}@keyframes summon-pulse{0%,to{transform:scale(.8);opacity:.5}50%{transform:scale(1.2);opacity:1}}.summon-energy.purple{background:radial-gradient(circle,rgba(139,92,246,.4),transparent 70%);box-shadow:0 0 60px var(--color-accent),0 0 120px var(--color-accent)}.summon-energy.gold{background:radial-gradient(circle,rgba(245,158,11,.4),transparent 70%);box-shadow:0 0 60px var(--color-gold),0 0 120px var(--color-gold)}.summon-text{font-size:2rem;font-weight:800;animation:float 1.5s ease-in-out infinite;position:relative;z-index:1}.gacha-card-reveal{position:relative;width:100%;padding:var(--spacing-lg)}.gacha-card-reveal h3{font-size:1.1rem;color:var(--color-text);text-align:center;margin-bottom:var(--spacing-md)}.card-fan{display:flex;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap;padding:var(--spacing-md);perspective:800px}.card-item{transition:all .5s ease;will-change:transform,opacity}.card-item.revealed{transform:scale(1);opacity:1;animation:card-reveal .6s ease-out backwards}.card-item.hidden{transform:scale(.3) rotateY(180deg);opacity:0}.card-item.legendary-card{animation:card-reveal .6s ease-out backwards,legendary-glow 2s ease-in-out infinite}.card-item.mythic-card{animation:card-reveal .6s ease-out backwards,mythic-glow 2s ease-in-out infinite}.card-item.god-card{animation:card-reveal .6s ease-out backwards,god-glow 1.5s linear infinite}.element-burst{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;pointer-events:none;animation:element-burst 1s ease-out forwards}@keyframes element-burst{0%{transform:scale(0);border-radius:50%;opacity:1}to{transform:scale(4);border-radius:0;opacity:0}}.element-burst.fire{background:radial-gradient(circle,rgba(255,68,68,.4),transparent)}.element-burst.water{background:radial-gradient(circle,rgba(68,136,255,.4),transparent)}.element-burst.earth{background:radial-gradient(circle,rgba(139,92,60,.4),transparent)}.element-burst.air{background:radial-gradient(circle,rgba(136,221,136,.4),transparent)}.element-burst.light{background:radial-gradient(circle,rgba(255,221,68,.4),transparent)}.element-burst.darkness{background:radial-gradient(circle,rgba(153,102,204,.4),transparent)}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0) scale(1);opacity:1}50%{opacity:1}to{transform:translateY(105vh) rotate(720deg) scale(.5);opacity:0}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1000}.confetti-piece{position:absolute;width:10px;height:10px;animation:confetti-fall 3s ease-in-out forwards}.confetti-piece:nth-child(odd){animation-duration:2.5s}.confetti-piece:nth-child(3n){animation-duration:3.5s;width:12px;height:12px}.rarity-flash-mythic{animation:rarity-flash-red .5s ease-in-out 3}.rarity-flash-god{animation:rarity-flash-rainbow .5s ease-in-out 5}@keyframes rarity-flash-red{0%,to{background:transparent}50%{background:#ef44444d}}@keyframes rarity-flash-rainbow{0%{background:#ff00804d}25%{background:#ff8c004d}50%{background:#40e0d04d}75%{background:#9400d34d}to{background:#ff00804d}}.gacha-error{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:400px;padding:10px 16px;background:#ef444426;border:1px solid rgba(239,68,68,.4);border-radius:var(--radius-md);color:#f87171;font-size:.875rem;cursor:pointer;animation:fade-in .3s ease}.gacha-error-close{margin-left:12px;opacity:.6;font-size:1.1rem}.gacha-error:hover .gacha-error-close{opacity:1}.gacha-close-btn{display:block;margin:var(--spacing-md) auto 0;padding:10px 32px;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer}.gacha-close-btn:hover{background:var(--color-surface-hover);border-color:var(--color-accent)}.battle-container{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);padding-bottom:120px;gap:var(--spacing-lg);min-height:calc(100vh - 80px)}.battle-header{text-align:center;width:100%}.battle-header h1{font-size:1.6rem;font-weight:700;margin-bottom:2px}.battle-header .level-badge{font-size:.75rem;color:var(--color-text-secondary);padding:2px 10px;background:var(--color-surface);border-radius:10px;display:inline-block;margin-top:4px}.level-selector{display:flex;align-items:center;gap:8px;justify-content:center}.level-selector label{color:var(--color-text-secondary);font-size:.8rem;font-weight:600}.level-selector select{background:var(--color-surface);color:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:8px 16px;font-size:.85rem;cursor:pointer}.team-builder{width:100%;max-width:500px;text-align:center}.team-builder h3{font-size:.85rem;color:var(--color-text-secondary);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.team-builder .slot-count{font-weight:700;color:var(--color-gold)}.team-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}.team-grid .chroma-select-card{transition:all .2s ease}.team-grid .chroma-select-card.selected{filter:none}.team-grid .chroma-select-card.unselected{filter:grayscale(.6) brightness(.6)}.team-grid .chroma-select-card.unselected:hover{filter:grayscale(.3) brightness(.8)}.battle-arena{display:grid;grid-template-rows:auto 1fr auto;gap:var(--spacing-md);width:100%;max-width:500px}.team-section{text-align:center}.team-section h3{font-size:.75rem;color:var(--color-text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:2px}.team-section.enemy h3{color:var(--color-mythic)}.grid-3x3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;aspect-ratio:1;max-width:340px;margin:0 auto}.grid-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-surface);border-radius:var(--radius-md);border:2px solid var(--color-border);padding:4px;transition:all .3s ease;min-height:90px;position:relative}.grid-cell.player-team{border-color:#8b5cf666;background:linear-gradient(135deg,var(--color-surface),rgba(139,92,246,.08))}.grid-cell.enemy-team{border-color:#ef44444d;background:linear-gradient(135deg,var(--color-surface),rgba(239,68,68,.08))}.grid-cell.selected{border-color:var(--color-gold);box-shadow:0 0 20px #f59e0b66}.grid-cell.empty{opacity:.35;border-style:dashed}.grid-cell.attacking{animation:cell-attack .3s ease}@keyframes cell-attack{0%,to{transform:scale(1)}50%{transform:scale(1.08);border-color:var(--color-gold)}}.grid-cell.hit{animation:cell-hit .3s ease}@keyframes cell-hit{0%{transform:translate(0);background:var(--color-surface)}25%{transform:translate(-3px);background:#ef44444d}50%{transform:translate(3px)}75%{transform:translate(-3px)}to{transform:translate(0);background:var(--color-surface)}}.chroma-mini{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}.chroma-mini .emoji{font-size:1.6rem;line-height:1}.chroma-mini .name{font-size:.6rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.chroma-mini .level-badge-mini{font-size:.55rem;color:var(--color-text-secondary)}.chroma-mini .rarity-dots{font-size:.5rem}.hp-bar-mini{width:90%;height:6px;background:#00000080;border-radius:3px;overflow:hidden;margin-top:3px}.hp-bar-mini-fill{height:100%;border-radius:3px;transition:width .4s ease}.hp-bar-mini-fill.high{background:linear-gradient(90deg,#22c55e,#4ade80)}.hp-bar-mini-fill.medium{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.hp-bar-mini-fill.low{background:linear-gradient(90deg,#dc2626,#f87171)}.battle-actions{display:flex;gap:12px;justify-content:center;width:100%;max-width:340px}.battle-log{width:100%;max-width:500px;max-height:250px;overflow-y:auto;background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);padding:var(--spacing-md)}.battle-log h4{font-size:.8rem;color:var(--color-text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px;position:sticky;top:0;background:var(--color-surface);padding-bottom:4px;z-index:1}.battle-log-entries{display:flex;flex-direction:column;gap:4px;font-size:.8rem}.log-entry{padding:6px 10px;background:var(--color-bg-medium);border-radius:var(--radius-sm);animation:slide-in .3s ease;display:flex;align-items:flex-start;gap:6px}@keyframes slide-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.log-entry .turn-num{font-weight:700;color:var(--color-text-secondary);min-width:24px}.log-entry .log-damage{color:var(--color-mythic);font-weight:700}.log-entry .log-heal{color:#22c55e;font-weight:700}.log-entry .log-effect{color:var(--color-accent);font-size:.7rem}.log-entry.damage{border-left:3px solid var(--color-mythic)}.log-entry.heal{border-left:3px solid #22c55e}.log-entry.buff{border-left:3px solid var(--color-light)}.log-entry.debuff{border-left:3px solid var(--color-darkness)}.battle-result{text-align:center;padding:var(--spacing-xl);background:var(--color-surface);border-radius:var(--radius-xl);border:2px solid var(--color-border);animation:scale-in .5s ease;max-width:400px;width:100%}.battle-result .result-emoji{font-size:3rem;margin-bottom:8px;animation:float 2s ease-in-out infinite}.battle-result h2{font-size:1.8rem;margin-bottom:16px}.battle-result.win{border-color:var(--color-gold);box-shadow:0 0 40px #f59e0b33}.battle-result.lose{border-color:var(--color-mythic);box-shadow:0 0 40px #ef444433}.battle-result.win h2{color:var(--color-gold)}.battle-result.lose h2{color:var(--color-mythic)}.rewards{display:flex;gap:20px;justify-content:center;margin-top:16px}.reward-item{display:flex;align-items:center;gap:4px;font-size:1.1rem;font-weight:700}.reward-item .reward-icon{font-size:1.3rem}.battle-loading{text-align:center;padding:40px}.battle-loading .spinner{margin-bottom:16px}.battle-loading p{color:var(--color-text-secondary);animation:float 2s ease-in-out infinite}.battle-action-bar{position:fixed;bottom:0;left:0;right:0;background:var(--color-bg, #0a0a1a);border-top:1px solid var(--color-border, #2a2a4a);padding:10px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom,16px));z-index:100;box-shadow:0 -4px 20px #00000080}.battle-actions-row{display:flex;gap:10px;justify-content:center}.action-btn{flex:1;max-width:140px;padding:10px 8px;border:1px solid var(--color-border, #2a2a4a);border-radius:var(--radius-md, 8px);background:var(--color-surface, #1a1a2e);color:#fff;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s ease}.action-btn:hover:not(:disabled){transform:translateY(-2px)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn.attack-btn{border-color:#ef4444}.action-btn.attack-btn:hover:not(:disabled){background:#ef444433;box-shadow:0 0 12px #ef44444d}.action-btn.skill-btn{border-color:#8b5cf6}.action-btn.skill-btn:hover:not(:disabled){background:#8b5cf633;box-shadow:0 0 12px #8b5cf64d}.action-btn.defend-btn{border-color:#22d3ee}.action-btn.defend-btn:hover:not(:disabled){background:#22d3ee33;box-shadow:0 0 12px #22d3ee4d}.battle-fight-sticky{position:sticky;bottom:0;z-index:10;background:var(--color-bg);padding:12px 0;padding-bottom:max(12px,env(safe-area-inset-bottom,12px));width:100%;display:flex;justify-content:center;box-shadow:0 -4px 20px #0006}.hp-bar-smooth{width:100%;height:100%;border-radius:4px;transition:width .6s ease,background-color .4s ease}.shake-anim{animation:shake-keyframes .4s ease}@keyframes shake-keyframes{0%,to{transform:translate(0)}15%{transform:translate(-5px)}30%{transform:translate(5px)}45%{transform:translate(-4px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}90%{transform:translate(2px)}}.pulse-glow{animation:pulse-glow-keyframes 1.5s ease-in-out infinite}@keyframes pulse-glow-keyframes{0%,to{box-shadow:0 0 8px #f59e0b4d;transform:scale(1)}50%{box-shadow:0 0 20px #f59e0bb3;transform:scale(1.04)}}.fade-in{animation:fade-in-keyframes .4s ease forwards}@keyframes fade-in-keyframes{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.bounce-in{animation:bounce-in-keyframes .6s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes bounce-in-keyframes{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.1)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}.crit-flash{animation:crit-flash-keyframes .5s ease}@keyframes crit-flash-keyframes{0%{filter:brightness(1)}20%{filter:brightness(2.5) hue-rotate(-10deg)}40%{filter:brightness(1.6) hue-rotate(10deg)}60%{filter:brightness(1)}to{filter:brightness(1)}}.heal-sparkle{position:relative;overflow:visible}.heal-sparkle:after{content:"✨";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;animation:heal-sparkle-keyframes .8s ease forwards;pointer-events:none}@keyframes heal-sparkle-keyframes{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}50%{opacity:1;transform:translate(-50%,-80%) scale(1.5)}to{opacity:0;transform:translate(-50%,-120%) scale(.8)}}.defend-barrier{position:relative;overflow:hidden}.defend-barrier:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 30%,rgba(100,200,255,.2) 45%,rgba(100,200,255,.4) 50%,rgba(100,200,255,.2) 55%,transparent 70%);animation:defend-shimmer 2s ease-in-out infinite;pointer-events:none;border-radius:inherit}@keyframes defend-shimmer{0%{transform:rotate(0) translate(-30%)}50%{transform:rotate(180deg) translate(30%)}to{transform:rotate(360deg) translate(-30%)}}.defend-active{border-color:#64c8ff99!important;box-shadow:0 0 16px #64c8ff4d}@media(max-width:600px){.battle-container{padding:var(--spacing-sm) var(--spacing-md);padding-bottom:120px;gap:var(--spacing-md);min-height:calc(100vh - 60px);overflow-y:auto}.battle-header h1{font-size:1.3rem}.level-selector{flex-wrap:wrap}.level-selector select{width:100%;max-width:240px}.team-builder{max-width:100%}.team-grid{flex-wrap:wrap;gap:6px}.team-grid .chroma-select-card{width:70px!important;flex:0 0 auto}.battle-arena{max-width:100%}.grid-3x3{max-width:280px}.grid-cell{min-height:70px}.chroma-mini .emoji{font-size:1.3rem}.chroma-mini .name{font-size:.5rem}.battle-action-bar{padding:10px 12px;padding-bottom:max(12px,env(safe-area-inset-bottom,16px))}.action-btn{max-width:120px;padding:10px 6px;font-size:.75rem}.battle-actions-row{gap:8px}.battle-log{max-height:180px}.battle-result{max-width:100%;padding:var(--spacing-md)}.battle-result .result-emoji{font-size:2.2rem}.battle-result h2{font-size:1.4rem}.rewards{flex-wrap:wrap;gap:12px}.battle-fight-sticky{padding:10px 0;padding-bottom:max(10px,env(safe-area-inset-bottom,12px))}.battle-fight-sticky button{min-width:160px!important;font-size:.9rem}}@media(max-width:380px){.team-grid .chroma-select-card{width:60px!important}.grid-3x3{max-width:240px;gap:4px}.grid-cell{min-height:60px}.chroma-mini .emoji{font-size:1.1rem}.chroma-mini .name{font-size:.45rem}.action-btn{font-size:.65rem;padding:8px 4px;max-width:90px}.battle-action-bar{padding:6px 8px;padding-bottom:max(8px,env(safe-area-inset-bottom,8px))}.battle-actions-row{gap:4px}.battle-container{padding:6px 8px 100px}.battle-fight-sticky button{min-width:140px!important;font-size:.8rem}}@media(min-width:601px)and (max-width:1024px){.battle-container{padding:var(--spacing-lg) 5vw;padding-bottom:140px;max-width:750px;margin:0 auto}.battle-header h1{font-size:1.5rem}.battle-action-bar{padding:14px 5vw;padding-bottom:max(16px,env(safe-area-inset-bottom,16px))}.battle-actions-row{gap:16px;max-width:500px;margin:0 auto}.action-btn{max-width:180px;padding:12px 16px;font-size:.9rem}.team-grid .chroma-select-card{width:90px!important}.grid-3x3{max-width:380px}.team-builder{max-width:600px}.team-grid{gap:10px;max-width:550px;margin:0 auto 16px}.battle-log{max-width:600px}.level-selector select{padding:10px 18px;font-size:.9rem}.battle-fight-sticky{max-width:500px;margin:0 auto;left:0;right:0}}@media(min-width:1025px)and (max-width:1440px){.battle-container{padding:var(--spacing-xl) 10%;padding-bottom:140px;max-width:900px;margin:0 auto}.battle-header h1{font-size:1.8rem}.battle-action-bar{padding:16px 10%;padding-bottom:max(20px,env(safe-area-inset-bottom,20px))}.battle-actions-row{gap:20px;max-width:600px;margin:0 auto}.action-btn{max-width:200px;padding:14px 20px;font-size:1rem}.team-grid{gap:12px;max-width:600px;margin:0 auto 16px}.team-grid .chroma-select-card{width:100px!important}.grid-3x3{max-width:420px}.grid-cell{min-height:100px}.chroma-mini .emoji{font-size:1.8rem}.battle-log{max-width:650px}.level-selector select{padding:10px 20px;font-size:.9rem}.battle-fight-sticky{max-width:600px;margin:0 auto}.battle-fight-sticky button{min-width:250px!important;font-size:1rem}}@media(min-width:1441px){.battle-container{padding:var(--spacing-xl) 15%;padding-bottom:140px;max-width:1100px;margin:0 auto}.battle-header h1{font-size:2rem}.battle-action-bar{padding:20px 15%;padding-bottom:max(24px,env(safe-area-inset-bottom,24px))}.battle-actions-row{gap:24px;max-width:700px;margin:0 auto}.action-btn{max-width:220px;padding:16px 24px;font-size:1.1rem;border-radius:var(--radius-lg)}.team-grid{gap:14px;max-width:700px;margin:0 auto 16px}.team-grid .chroma-select-card{width:110px!important;padding:10px!important}.grid-3x3{max-width:480px}.grid-cell{min-height:110px}.chroma-mini .emoji{font-size:2rem}.chroma-mini .name{font-size:.7rem}.battle-log{max-width:700px}.level-selector select{padding:12px 24px;font-size:1rem}.battle-fight-sticky{max-width:700px;margin:0 auto}.battle-fight-sticky button{min-width:300px!important;font-size:1.1rem;padding:14px 32px}}@supports not (padding-bottom: env(safe-area-inset-bottom)){.battle-action-bar,.battle-fight-sticky{padding-bottom:24px}}.inventory-container{padding:var(--spacing-lg);min-height:calc(100vh - 80px)}.inventory-header{text-align:center;margin-bottom:var(--spacing-lg)}.inventory-header h1{font-size:1.8rem;font-weight:700;margin-bottom:4px;background:linear-gradient(135deg,var(--color-accent),var(--color-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.inventory-header .count{font-size:.8rem;color:var(--color-text-secondary)}.filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--spacing-lg)}.filter-group{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.filter-btn{padding:6px 14px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;font-size:.78rem;font-weight:600}.filter-btn:hover{border-color:var(--color-accent);color:var(--color-text);transform:translateY(-1px)}.filter-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff;box-shadow:0 2px 8px #8b5cf64d}.filter-btn.element-fire.active{background:var(--color-fire);border-color:var(--color-fire)}.filter-btn.element-water.active{background:var(--color-water);border-color:var(--color-water)}.filter-btn.element-earth.active{background:var(--color-earth);border-color:var(--color-earth)}.filter-btn.element-air.active{background:var(--color-air);border-color:var(--color-air);color:#000}.filter-btn.element-light.active{background:var(--color-light);border-color:var(--color-light);color:#000}.filter-btn.element-darkness.active{background:var(--color-darkness);border-color:var(--color-darkness)}.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;justify-items:center}.inventory-empty{text-align:center;padding:48px 20px;color:var(--color-text-secondary);grid-column:1 / -1}.inventory-empty .empty-icon{font-size:3rem;margin-bottom:12px;opacity:.5}.inventory-empty p{font-size:.9rem}.inventory-empty .empty-hint{font-size:.75rem;margin-top:4px;opacity:.6}.chroma-card{display:flex;flex-direction:column;background:var(--color-surface);border-radius:var(--radius-lg);border:2px solid var(--color-border);overflow:hidden;transition:all .3s ease;cursor:pointer;width:100%;max-width:180px}.chroma-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.chroma-card.selected{border-color:var(--color-gold);box-shadow:0 0 20px #f59e0b4d;transform:translateY(-4px) scale(1.03)}.chroma-card.element-fire{border-color:#f446}.chroma-card.element-water{border-color:#48f6}.chroma-card.element-earth{border-color:#8b5c3c66}.chroma-card.element-air{border-color:#8d86}.chroma-card.element-light{border-color:#fd46}.chroma-card.element-darkness{border-color:#96c6}.chroma-card.rarity-legendary{box-shadow:0 0 15px #f59e0b40}.chroma-card.rarity-legendary:hover{box-shadow:0 0 25px #f59e0b66}.chroma-card.rarity-mythic{box-shadow:0 0 15px #ef444440}.chroma-card.rarity-mythic:hover{box-shadow:0 0 25px #ef444466}.chroma-card.rarity-god{box-shadow:0 0 18px #ff00804d;animation:god-glow 3s linear infinite}.chroma-card.rarity-god:hover{box-shadow:0 0 30px #ff008080,0 0 50px #40e0d04d}.chroma-sprite-container{display:flex;align-items:center;justify-content:center;padding:12px;background:var(--color-bg-medium);min-height:100px;position:relative}.chroma-sprite-container img{width:56px;height:56px;-o-object-fit:contain;object-fit:contain;transition:transform .3s ease}.chroma-card:hover .chroma-sprite-container img{transform:scale(1.1)}.chroma-sprite-container .emoji{font-size:2.5rem}.chroma-sprite-container .element-bg{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.08;pointer-events:none}.chroma-info{padding:10px 12px;display:flex;flex-direction:column;gap:4px}.chroma-name{font-weight:600;font-size:.9rem;line-height:1.2}.chroma-meta{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;color:var(--color-text-secondary)}.chroma-level{background:var(--color-bg-dark);padding:1px 6px;border-radius:4px;font-weight:600}.chroma-stars{color:var(--color-gold);letter-spacing:1px}.chroma-rarity-line{font-size:.65rem;font-weight:600}.stats-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin-top:6px;font-size:.68rem}.stat-item{display:flex;align-items:center;gap:4px}.stat-item .label{color:var(--color-text-secondary);font-size:.6rem}.stat-item .value{font-weight:600}.chroma-detail{width:90vw;max-width:340px;max-height:80vh;overflow-y:auto}.chroma-detail-header{text-align:center;margin-bottom:16px;position:relative}.chroma-detail-sprite{width:80px;height:80px;margin:0 auto 8px;animation:float 3s ease-in-out infinite}.chroma-detail-sprite img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.chroma-detail-name{font-size:1.3rem;font-weight:700;margin-bottom:2px}.chroma-detail-rarity{font-size:.75rem;color:var(--color-text-secondary)}.chroma-detail-rarity .stars{color:var(--color-gold);margin-right:4px}.stat-bars-section{margin:16px 0}.stat-bars-section h4{font-size:.75rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.skills-section{margin:16px 0;font-size:.78rem}.skills-section h4{font-size:.75rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.skill-item{display:flex;gap:8px;padding:6px 0}.skill-item .skill-icon{font-size:1rem;width:24px;text-align:center}.skill-item .skill-label{color:var(--color-text-secondary);font-size:.65rem;margin-right:4px}.skill-item .skill-name{font-weight:600;color:var(--color-accent)}.level-up-section{margin-top:16px;display:flex;gap:8px;align-items:center}.level-up-btn{flex:1;padding:10px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-accent),#7c3aed);color:#fff;border:none;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s ease}.level-up-btn:hover:not(:disabled){box-shadow:0 0 20px #8b5cf666}.level-up-btn:disabled{opacity:.5}.level-up-cost{font-size:.7rem;color:var(--color-text-secondary);margin-top:2px}.close-detail-btn{padding:10px 16px;border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);font-size:.85rem;cursor:pointer}@media(max-width:600px){.inventory-container{padding:var(--spacing-sm) var(--spacing-md)}.inventory-header h1{font-size:1.4rem}.inventory-header .count{font-size:.75rem}.filters{flex-direction:column;align-items:center;gap:6px}.filter-group{width:100%;justify-content:center}.filter-btn{padding:5px 10px;font-size:.7rem}.inventory-grid{grid-template-columns:repeat(2,1fr);gap:8px}.chroma-card{max-width:100%}.chroma-sprite-container{min-height:80px;padding:8px}.chroma-sprite-container img{width:44px;height:44px}.chroma-sprite-container .emoji{font-size:2rem}.chroma-info{padding:8px 10px}.chroma-name{font-size:.8rem}.chroma-meta{font-size:.65rem}.stats-preview{font-size:.6rem}.stat-item .label{font-size:.55rem}.chroma-detail{width:95vw;max-width:320px}}@media(max-width:380px){.inventory-grid{grid-template-columns:repeat(2,1fr);gap:6px}.filter-btn{padding:4px 8px;font-size:.65rem}.chroma-sprite-container{min-height:70px}.chroma-sprite-container .emoji{font-size:1.6rem}}