.battle-setup{width:100%;height:100%;display:flex;flex-direction:column;gap:1.5rem;padding:1rem}.battle-setup-header{text-align:center;padding:1.5rem;background:#8b3a9c1a;border:1px solid var(--accent-purple);border-radius:8px}.battle-setup-header h2{margin:0 0 .5rem;color:var(--accent-purple);font-size:2rem}.battle-setup-header p{margin:0;color:#fffc;font-size:1rem}.error-message{padding:1rem;background:#f4433633;border:1px solid var(--element-fire);border-radius:8px;color:var(--element-fire);text-align:center}.team-selection{flex:1;display:flex;flex-direction:column;gap:1rem;overflow:hidden}.selected-team-info{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#0000004d;border-radius:8px}.selected-team-info h3{margin:0;color:var(--accent-pink);font-size:1.2rem}.clear-team-button{padding:.5rem 1rem;background:#f443364d;border:1px solid var(--element-fire);border-radius:6px;color:#fff;font-size:.9rem;cursor:pointer;transition:all .2s}.clear-team-button:hover{background:#f4433680;transform:translateY(-2px)}.character-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;overflow-y:auto;padding:1rem;background:#0000004d;border-radius:8px}.character-grid::-webkit-scrollbar{width:8px}.character-grid::-webkit-scrollbar-track{background:#0000004d}.character-grid::-webkit-scrollbar-thumb{background:var(--accent-purple);border-radius:4px}.no-characters{grid-column:1 / -1;text-align:center;padding:3rem;color:#fff9}.character-card{position:relative;display:flex;flex-direction:column;background:#8b3a9c1a;border:2px solid transparent;border-radius:8px;padding:.75rem;cursor:pointer;transition:all .2s}.character-card:hover{border-color:var(--accent-purple);transform:translateY(-4px);box-shadow:0 8px 20px #8b3a9c66}.character-card.selected{border-color:var(--accent-pink);background:#ff4d8f33;box-shadow:0 8px 20px #ff4d8f80}.selection-badge{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;background:var(--accent-pink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;color:#fff;z-index:10;box-shadow:0 2px 8px #00000080}.character-card-image{width:100%;height:150px;background:linear-gradient(135deg,#8b3a9c4d,#ff4d8f4d);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;margin-bottom:.75rem}.character-card-image.rarity-common{border:2px solid var(--rarity-common)}.character-card-image.rarity-rare{border:2px solid var(--rarity-rare)}.character-card-image.rarity-epic{border:2px solid var(--rarity-epic)}.character-card-image.rarity-legendary{border:2px solid var(--rarity-legendary)}.element-badge{position:absolute;top:.5rem;left:.5rem;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}.character-level{position:absolute;bottom:.5rem;right:.5rem;background:#000c;padding:.25rem .5rem;border-radius:12px;font-size:.7rem;font-weight:700;color:var(--accent-gold)}.character-card-info{display:flex;flex-direction:column;gap:.5rem}.character-card-name{font-size:1rem;font-weight:700;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.character-card-stats{display:flex;justify-content:space-around;font-size:.85rem;color:#fffc}.battle-setup-actions{display:flex;justify-content:center;padding:1rem}.start-battle-button{padding:1rem 3rem;background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:2px solid var(--accent-pink);border-radius:8px;color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.start-battle-button:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 8px 20px #ff4d8f99}.start-battle-button:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(50%)}@media (max-width: 768px){.character-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.character-card-image{height:120px;font-size:2.5rem}.start-battle-button{width:100%;padding:1rem 2rem}}.damage-animation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;pointer-events:none;animation:damageFloat 2s ease-out forwards}.damage-number{font-size:2.5rem;font-weight:700;text-shadow:0 0 10px currentColor,0 2px 4px rgba(0,0,0,.8);display:flex;align-items:center;gap:.25rem}.damage-neutral .damage-number{color:#fff}.damage-advantage .damage-number{color:var(--element-nature);font-size:3rem;animation:damageFloat 2s ease-out forwards,pulse .5s ease-in-out}.damage-disadvantage .damage-number{color:var(--rarity-common);font-size:2rem}.advantage-icon,.disadvantage-icon{font-size:1.5rem;animation:iconBounce .5s ease-in-out infinite}.advantage-icon{color:var(--element-nature)}.disadvantage-icon{color:var(--element-fire)}.elemental-effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;border-radius:50%;pointer-events:none}.advantage-effect{background:radial-gradient(circle,rgba(76,175,80,.6) 0%,transparent 70%);animation:expandFade 1s ease-out forwards}.disadvantage-effect{background:radial-gradient(circle,rgba(158,158,158,.4) 0%,transparent 70%);animation:expandFade 1s ease-out forwards}@keyframes damageFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}20%{transform:translate(-50%,-60%) scale(1.2)}to{opacity:0;transform:translate(-50%,-100%) scale(1)}}@keyframes expandFade{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(3);opacity:0}}@keyframes iconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media (max-width: 768px){.damage-number{font-size:2rem}.damage-advantage .damage-number{font-size:2.5rem}.damage-disadvantage .damage-number{font-size:1.5rem}}.tactical-character-card{position:relative;width:180px;background:linear-gradient(135deg,#1e1432f2,#321e46f2);border-radius:12px;padding:1rem;border:2px solid rgba(139,92,246,.3);transition:all .3s ease;box-shadow:0 4px 20px #00000080}.tactical-character-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px #8b5cf666;border-color:#8b5cf699}.tactical-character-card.active{border-color:#fbbf24;box-shadow:0 0 30px #fbbf2499;animation:activePulse 2s ease-in-out infinite}.tactical-character-card.targeted{border-color:#ef4444;box-shadow:0 0 30px #ef4444cc;animation:targetedPulse 1s ease-in-out infinite}.tactical-character-card.knocked-out{opacity:.5;filter:grayscale(100%);pointer-events:none}.tactical-character-card.player-card{border-color:#22c55e66}.tactical-character-card.enemy-card{border-color:#ef444466}.tactical-character-card.enemy-card:hover{cursor:pointer;border-color:#ef4444cc;box-shadow:0 8px 30px #ef444480}.active-indicator{position:absolute;top:-12px;left:50%;transform:translate(-50%);z-index:10;display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:20px;box-shadow:0 0 20px #fbbf24cc}.active-pulse{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 1s ease-in-out infinite}.active-label{font-size:.7rem;font-weight:700;color:#1a0b2e;text-transform:uppercase;letter-spacing:1px}.card-portrait{position:relative;margin-bottom:.75rem}.portrait-frame{width:100%;aspect-ratio:1;border-radius:8px;border:3px solid;overflow:hidden;background:linear-gradient(135deg,#0009,#321e4699);display:flex;align-items:center;justify-content:center;position:relative}.portrait-image{font-size:4rem;filter:drop-shadow(0 0 10px rgba(139,92,246,.8))}.knockout-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.knockout-text{font-size:1.5rem;font-weight:700;color:#ef4444;text-shadow:0 0 10px rgba(239,68,68,.8)}.level-badge{position:absolute;top:.5rem;right:.5rem;padding:.25rem .5rem;background:#000c;border-radius:6px;border:1px solid rgba(139,92,246,.5)}.level-text{font-size:.75rem;font-weight:700;color:#c4b5fd}.card-info{margin-bottom:.75rem;text-align:center}.character-name{font-size:.9rem;font-weight:700;color:#f3e8ff;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.character-element{font-size:.75rem;color:#c4b5fd;display:flex;align-items:center;justify-content:center;gap:.25rem}.hp-bar-container{margin-bottom:.75rem}.hp-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:.25rem;font-size:.75rem}.hp-icon{font-size:.9rem}.hp-text{color:#f3e8ff;font-weight:600}.hp-bar{height:8px;background:#00000080;border-radius:4px;overflow:hidden;border:1px solid rgba(139,92,246,.3)}.hp-fill{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .5s ease;box-shadow:0 0 10px #22c55e99}.hp-fill.warning{background:linear-gradient(90deg,#f59e0b,#d97706);box-shadow:0 0 10px #f59e0b99}.hp-fill.critical{background:linear-gradient(90deg,#ef4444,#dc2626);box-shadow:0 0 10px #ef444499;animation:criticalPulse 1s ease-in-out infinite}.card-stats{display:flex;justify-content:space-around;gap:.5rem;padding:.5rem;background:#0000004d;border-radius:6px;border:1px solid rgba(139,92,246,.2)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-icon{font-size:1rem}.stat-value{font-size:.85rem;font-weight:700;color:#f3e8ff}.status-effects{position:absolute;top:.5rem;left:.5rem;display:flex;gap:.25rem;flex-wrap:wrap;max-width:60px}.status-effect{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#000c;border-radius:4px;border:1px solid rgba(139,92,246,.5);font-size:.9rem}.target-indicator{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;pointer-events:none;z-index:5}.target-crosshair{position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid #ef4444;border-radius:12px;box-shadow:0 0 20px #ef4444cc,inset 0 0 20px #ef444466;animation:crosshairPulse 1s ease-in-out infinite}.target-crosshair:before,.target-crosshair:after{content:"";position:absolute;background:#ef4444;box-shadow:0 0 10px #ef4444cc}.target-crosshair:before{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}.target-crosshair:after{left:50%;top:0;bottom:0;width:2px;transform:translate(-50%)}@keyframes activePulse{0%,to{box-shadow:0 0 30px #fbbf2499}50%{box-shadow:0 0 50px #fbbf24e6}}@keyframes targetedPulse{0%,to{box-shadow:0 0 30px #ef4444cc}50%{box-shadow:0 0 50px #ef4444}}@keyframes criticalPulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes crosshairPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}@media (max-width: 768px){.tactical-character-card{width:140px;padding:.75rem}.portrait-image{font-size:3rem}.character-name{font-size:.8rem}.stat-icon{font-size:.9rem}.stat-value{font-size:.75rem}}.action-buttons{display:flex;justify-content:center;gap:1rem;padding:1rem;background:#00000080;border-radius:12px;border:2px solid rgba(139,58,156,.3)}.action-button{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 2rem;background:linear-gradient(135deg,#8b3a9ccc,#ff4d8fcc);border:2px solid var(--accent-purple);border-radius:8px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;min-width:140px;box-shadow:0 4px 12px #00000080}.action-button:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 8px 20px #8b3a9c99;border-color:var(--accent-pink)}.action-button:active:not(:disabled){transform:translateY(-2px)}.action-button:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(50%)}.action-icon{font-size:2rem}.action-label{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px}.action-description{font-size:.75rem;opacity:.9;font-weight:400}.attack-button{background:linear-gradient(135deg,#f44336cc,#e91e63cc);border-color:var(--element-fire)}.attack-button:hover:not(:disabled){box-shadow:0 8px 20px #f4433699}.ability-button{background:linear-gradient(135deg,#9c27b0cc,#673ab7cc);border-color:var(--rarity-epic)}.ability-button:hover:not(:disabled){box-shadow:0 8px 20px #9c27b099}.defend-button{background:linear-gradient(135deg,#2196f3cc,#03a9f4cc);border-color:var(--element-water)}.defend-button:hover:not(:disabled){box-shadow:0 8px 20px #2196f399}@media (max-width: 768px){.action-buttons{flex-direction:column;gap:.5rem}.action-button{min-width:100%;padding:.75rem 1.5rem}.action-icon{font-size:1.5rem}.action-label{font-size:1rem}}.battle-log{display:flex;flex-direction:column;background:#0009;border:2px solid rgba(139,58,156,.3);border-radius:8px;overflow:hidden;max-height:250px}.battle-log-header{padding:.75rem 1rem;background:#8b3a9c33;border-bottom:1px solid rgba(139,58,156,.3)}.battle-log-header h3{margin:0;font-size:1rem;color:var(--accent-purple);text-transform:uppercase;letter-spacing:1px}.battle-log-content{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.battle-log-content::-webkit-scrollbar{width:8px}.battle-log-content::-webkit-scrollbar-track{background:#0000004d}.battle-log-content::-webkit-scrollbar-thumb{background:var(--accent-purple);border-radius:4px}.battle-log-content::-webkit-scrollbar-thumb:hover{background:var(--accent-pink)}.battle-log-empty{text-align:center;color:#ffffff80;font-style:italic;padding:2rem}.battle-log-entry{display:flex;flex-direction:column;gap:.25rem;padding:.75rem;background:#8b3a9c1a;border-left:3px solid var(--accent-purple);border-radius:4px;animation:slideIn .3s ease-out}.log-turn-number{font-size:.75rem;color:var(--accent-gold);font-weight:700;text-transform:uppercase}.log-action{font-size:.9rem;color:#fff}.log-damage{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.damage-value{font-weight:700;color:var(--accent-pink)}.damage-value.advantage{color:var(--element-nature)}.damage-value.disadvantage{color:var(--rarity-common)}.elemental-indicator{font-size:.75rem;padding:.125rem .5rem;border-radius:12px;font-weight:700}.elemental-indicator.advantage{background:#4caf504d;color:var(--element-nature);border:1px solid var(--element-nature)}.elemental-indicator.disadvantage{background:#9e9e9e4d;color:var(--rarity-common);border:1px solid var(--rarity-common)}.log-ko{font-size:.85rem;color:var(--element-fire);font-weight:700;margin-top:.25rem}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 768px){.battle-log{max-height:200px}.battle-log-content{padding:.75rem}.battle-log-entry{padding:.5rem}}.victory-defeat-screen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.victory-defeat-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.victory-defeat-modal{position:relative;z-index:1001;background:linear-gradient(135deg,var(--bg-dark),#0f0a14);border-radius:16px;padding:2rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #000000e6;animation:slideUp .5s ease-out}.victory-defeat-modal.victory{border:3px solid var(--element-nature);box-shadow:0 20px 60px #4caf5080}.victory-defeat-modal.defeat{border:3px solid var(--element-fire);box-shadow:0 20px 60px #f4433680}.result-header{text-align:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid rgba(139,58,156,.3)}.result-title{font-size:2.5rem;margin:0 0 .5rem;animation:titlePulse 1s ease-in-out infinite}.victory .result-title{color:var(--element-nature);text-shadow:0 0 20px var(--element-nature)}.defeat .result-title{color:var(--element-fire);text-shadow:0 0 20px var(--element-fire)}.result-subtitle{font-size:1.1rem;color:#fffc;margin:0}.rewards-section{margin-bottom:2rem}.rewards-section h2{font-size:1.5rem;color:var(--accent-purple);margin:0 0 1rem;text-align:center}.rewards-list{display:flex;flex-direction:column;gap:1rem}.reward-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#8b3a9c33;border:1px solid var(--accent-purple);border-radius:8px;animation:rewardPop .5s ease-out}.reward-icon{font-size:2rem}.reward-label{flex:1;font-size:1rem;color:#ffffffe6}.reward-value{font-size:1.2rem;font-weight:700;color:var(--accent-gold)}.battle-summary{margin-bottom:2rem}.battle-summary h3{font-size:1.2rem;color:var(--accent-purple);margin:0 0 1rem;text-align:center}.summary-stats{display:flex;flex-direction:column;gap:.75rem}.summary-stat{display:flex;justify-content:space-between;padding:.75rem;background:#0000004d;border-radius:6px}.stat-label{color:#fffc}.stat-value{font-weight:700;color:var(--accent-pink)}.close-button{width:100%;padding:1rem;background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));border:none;border-radius:8px;color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.close-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #8b3a9c99}.close-button:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes titlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes rewardPop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.victory-defeat-modal{padding:1.5rem}.result-title{font-size:2rem}.result-subtitle{font-size:1rem}.rewards-section h2,.battle-summary h3{font-size:1.2rem}}.tactical-battle-board{width:100%;min-height:100vh;background:linear-gradient(135deg,#1a0b2e,#2d1b4e,#1a0b2e);padding:2rem;display:flex;flex-direction:column;gap:2rem}.battle-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#0006;border-radius:12px;border:2px solid rgba(139,92,246,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.battle-info{display:flex;align-items:center;gap:2rem}.battle-info h2{margin:0;font-size:2rem;color:#f3e8ff;text-shadow:0 0 20px rgba(139,92,246,.8)}.turn-counter{font-size:1.2rem;color:#c4b5fd;padding:.5rem 1rem;background:#8b5cf633;border-radius:8px;border:1px solid rgba(139,92,246,.4)}.current-turn-indicator{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;padding:1rem 1.5rem;border-radius:8px;animation:pulse 2s ease-in-out infinite}.current-turn-indicator.player-turn{background:#22c55e33;border:2px solid rgba(34,197,94,.5)}.current-turn-indicator.opponent-turn{background:#ef444433;border:2px solid rgba(239,68,68,.5)}.turn-label{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.player-turn .turn-label{color:#86efac}.opponent-turn .turn-label{color:#fca5a5}.turn-character{font-size:1.1rem;color:#f3e8ff;font-weight:700}.tactical-grid-container{display:flex;flex-direction:column;gap:2rem;flex:1}.team-section{display:flex;flex-direction:column;gap:1rem}.opponent-section{order:1}.player-section{order:3}.team-label{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem;background:#0000004d;border-radius:8px;border:2px solid rgba(139,92,246,.3)}.team-icon{font-size:2rem}.team-name{font-size:1.5rem;font-weight:700;color:#f3e8ff;text-transform:uppercase;letter-spacing:2px}.tactical-grid{display:flex;flex-direction:column;gap:1rem;padding:2rem;background:#0000004d;border-radius:16px;border:2px solid rgba(139,92,246,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.opponent-grid{background:#ef44441a;border-color:#ef44444d}.player-grid{background:#22c55e1a;border-color:#22c55e4d}.grid-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;justify-items:center}.grid-row.back-row{grid-template-columns:repeat(4,1fr)}.grid-cell{position:relative;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.grid-cell:hover{transform:translateY(-5px)}.grid-cell.selected{animation:targetPulse 1s ease-in-out infinite}.battle-divider{display:flex;align-items:center;gap:1rem;padding:1rem 0;order:2}.divider-line{flex:1;height:3px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),transparent);box-shadow:0 0 10px #8b5cf680}.divider-icon{font-size:2rem;animation:rotate 3s linear infinite}.action-panel{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:#0006;border-radius:12px;border:2px solid rgba(139,92,246,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.action-hint{text-align:center;color:#c4b5fd;font-size:1rem;padding:.75rem;background:#8b5cf61a;border-radius:8px;border:1px solid rgba(139,92,246,.3)}.battle-log-container{max-height:200px;overflow-y:auto;background:#0006;border-radius:12px;border:2px solid rgba(139,92,246,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes pulse{0%,to{box-shadow:0 0 20px #8b5cf680}50%{box-shadow:0 0 40px #8b5cf6cc}}@keyframes targetPulse{0%,to{transform:scale(1) translateY(-5px);box-shadow:0 0 30px #ef444499}50%{transform:scale(1.05) translateY(-8px);box-shadow:0 0 50px #ef4444e6}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1200px){.grid-row{grid-template-columns:repeat(3,1fr);gap:1rem}.grid-row.back-row{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.tactical-battle-board{padding:1rem}.battle-header{flex-direction:column;gap:1rem}.battle-info{flex-direction:column;gap:.5rem}.grid-row{grid-template-columns:repeat(2,1fr);gap:.75rem}.grid-row.back-row{grid-template-columns:repeat(2,1fr)}.team-name{font-size:1.2rem}}.battle-system{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#0d0618,#1a0a2e,#0d0618);display:flex;flex-direction:column;overflow:hidden}.battle-system:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 15% 50%,rgba(34,197,94,.1) 0%,transparent 40%),radial-gradient(ellipse at 85% 50%,rgba(220,38,38,.1) 0%,transparent 40%);pointer-events:none;z-index:0}.battle-top-bar{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;background:linear-gradient(180deg,#000c,#0000004d);border-bottom:2px solid rgba(139,58,156,.3);flex-shrink:0}.retreat-btn{padding:.4rem 1rem;background:#ef444426;border:1px solid rgba(239,68,68,.4);color:#f87171;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .2s}.retreat-btn:hover{background:#ef44444d}.turn-display{display:flex;flex-direction:column;align-items:center;gap:.2rem}.battle-title{font-size:.75rem;color:#ffffff80;text-transform:uppercase;letter-spacing:2px}.turn-badge{display:flex;align-items:center;gap:.5rem;padding:.4rem 1.5rem;border-radius:20px;font-weight:700;font-size:.85rem}.turn-badge.player-turn{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 0 20px #22c55e80}.turn-badge.enemy-turn{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;box-shadow:0 0 20px #dc262680}.battle-controls{display:flex;gap:.5rem}.control-btn{padding:.4rem 1rem;background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .2s}.control-btn:hover{background:#ffffff26}.control-btn.auto-active{background:linear-gradient(135deg,#22c55e4d,#10b9814d);border-color:#22c55e;color:#4ade80}.speed-btn{min-width:45px;background:#8b5cf633;border-color:#8b5cf666;color:#a78bfa}.battlefield{flex:1;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;position:relative;z-index:5;min-height:0;gap:1rem}.player-zone{flex:1;display:flex;flex-direction:column;align-items:flex-start;position:relative;max-width:40%}.player-zone .zone-label{position:absolute;top:-1.5rem;left:0;font-size:.7rem;text-transform:uppercase;letter-spacing:2px;font-weight:600;color:#4ade80;background:#22c55e26;padding:.2rem .6rem;border-radius:4px;border:1px solid rgba(34,197,94,.3)}.enemy-zone{flex:1;display:flex;flex-direction:column;align-items:flex-end;position:relative;max-width:40%}.enemy-zone .zone-label{position:absolute;top:-1.5rem;right:0;font-size:.7rem;text-transform:uppercase;letter-spacing:2px;font-weight:600;color:#f87171;background:#ef444426;padding:.2rem .6rem;border-radius:4px;border:1px solid rgba(239,68,68,.3)}.formation-columns{display:flex;flex-direction:row;align-items:center;gap:10px}.unit-column{display:flex;flex-direction:column;gap:10px}.unit-column.back-column{opacity:.7;transform:scale(.88);filter:brightness(.85)}.battle-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-width:180px}.versus-badge{font-size:1.5rem;font-weight:800;color:#fbbf24;text-shadow:0 0 20px rgba(251,191,36,.5);background:#0006;padding:.5rem 1.5rem;border-radius:30px;border:2px solid rgba(251,191,36,.3)}.battle-log{display:flex;flex-direction:column;gap:.3rem;max-width:200px;max-height:150px;overflow:hidden}.log-entry{font-size:.7rem;padding:.35rem .6rem;background:#00000080;border-radius:4px;border-left:3px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.log-entry:nth-child(1){opacity:1}.log-entry:nth-child(2){opacity:.7}.log-entry:nth-child(3){opacity:.5}.log-entry:nth-child(4){opacity:.3}.log-entry.attack{border-color:#fbbf24;color:#fde68a}.log-entry.damage{border-color:#f87171;color:#fca5a5}.log-entry.heal{border-color:#4ade80;color:#86efac}.log-entry.defeat{border-color:#fb923c;color:#fdba74}.log-entry.victory{border-color:#c084fc;color:#d8b4fe}.unit-card{width:100px;height:140px;cursor:pointer;transition:all .25s ease;position:relative;border-radius:8px;box-shadow:0 4px 15px #00000080}.unit-card.player-card{background:linear-gradient(145deg,#1a472a,#0d2818);border:3px solid #2d5a3d}.unit-card.enemy-card{background:linear-gradient(145deg,#4a1a1a,#2d0d0d);border:3px solid #6b2a2a}.unit-card:hover:not(.defeated){transform:translateY(-8px) scale(1.05);z-index:10}.unit-card.player-card:hover:not(.defeated){box-shadow:0 8px 30px #22c55e66}.unit-card.enemy-card:hover:not(.defeated){box-shadow:0 8px 30px #dc262666}.unit-card.selected{transform:translateY(-10px) scale(1.08);border-color:#fbbf24!important;box-shadow:0 0 25px #fbbf24cc!important;z-index:20}.unit-card.targeted{border-color:#f97316!important;animation:targetPulse .8s ease infinite}@keyframes targetPulse{0%,to{box-shadow:0 0 15px #f9731680}50%{box-shadow:0 0 30px #f97316e6}}.unit-card.active{border-color:#fbbf24!important;animation:activePulse 1s ease infinite}@keyframes activePulse{0%,to{box-shadow:0 0 15px #fbbf2499}50%{box-shadow:0 0 35px #fbbf24}}.unit-card.defeated{opacity:.4;filter:grayscale(.9) brightness(.6);cursor:not-allowed}.unit-card.attacking.player-card{animation:playerStrike .4s ease-out;z-index:100}@keyframes playerStrike{0%{transform:translate(0) translateY(0)}50%{transform:translate(60px) translateY(-10px) scale(1.1)}to{transform:translate(0) translateY(0)}}.unit-card.attacking.enemy-card{animation:enemyStrike .4s ease-out;z-index:100}@keyframes enemyStrike{0%{transform:translate(0) translateY(0)}50%{transform:translate(-60px) translateY(-10px) scale(1.1)}to{transform:translate(0) translateY(0)}}.card-frame{width:100%;height:100%;display:flex;flex-direction:column;border-radius:5px;overflow:hidden;background:linear-gradient(180deg,#0003,#0006)}.card-title-bar{padding:4px 6px;background:linear-gradient(180deg,#0009,#0000004d);border-bottom:1px solid rgba(255,255,255,.1)}.card-name{font-size:.65rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.card-portrait{flex:1;position:relative;overflow:hidden;background:linear-gradient(145deg,#0a0612,#150d20);margin:3px;border-radius:3px;border:1px solid rgba(255,255,255,.08)}.card-portrait img{width:100%;height:100%;object-fit:cover;object-position:top center}.card-portrait .unit-icon{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:2rem;background:linear-gradient(145deg,#140f23f2,#1e142df2)}.card-portrait img+.unit-icon{display:none}.active-indicator{position:absolute;top:2px;right:2px;font-size:.9rem;animation:sparkle .5s ease infinite;text-shadow:0 0 8px rgba(251,191,36,1)}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}.card-stats{display:flex;justify-content:space-around;padding:2px 4px;background:#00000080;border-top:1px solid rgba(255,255,255,.05)}.card-stats .stat{font-size:.55rem;font-weight:600;color:#ccc}.card-stats .stat.atk{color:#fca5a5}.card-stats .stat.def{color:#93c5fd}.hp-bar-container{position:relative;height:12px;background:#000c;border-top:1px solid rgba(255,255,255,.1)}.hp-bar-fill{height:100%;transition:width .4s ease}.hp-bar-fill.enemy-hp{background:linear-gradient(90deg,#7f1d1d,#dc2626,#ef4444)}.hp-bar-fill.player-hp{background:linear-gradient(90deg,#14532d,#22c55e,#4ade80)}.hp-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,1)}.defeated-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;font-size:2rem;border-radius:5px}.turn-timeline{display:flex;align-items:center;gap:.75rem;padding:.5rem 1.5rem;background:#00000080;border-bottom:1px solid rgba(139,58,156,.2);flex-shrink:0;overflow-x:auto;position:relative;z-index:10}.timeline-label{font-size:.7rem;color:#ffffff80;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;flex-shrink:0}.timeline-units{display:flex;gap:.5rem;align-items:center}.timeline-unit{width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;border-radius:8px;overflow:hidden;border:2px solid;position:relative;transition:all .2s;flex-shrink:0}.timeline-img-wrapper{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}.timeline-unit.player{border-color:#22c55e99;background:#22c55e26}.timeline-unit.enemy{border-color:#dc262699;background:#dc262626}.timeline-unit.current{transform:scale(1.2);border-color:#fbbf24!important;box-shadow:0 0 15px #fbbf2499;z-index:5}.timeline-unit.dead{opacity:.25;filter:grayscale(1);transform:scale(.85)}.timeline-unit img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}.timeline-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.3rem}.current-indicator{position:absolute;top:-14px;left:50%;transform:translate(-50%);color:#fbbf24;font-size:.9rem;animation:indicatorBounce .5s ease infinite;text-shadow:0 0 5px rgba(251,191,36,.8)}@keyframes indicatorBounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-4px)}}.action-bar{position:relative;z-index:15;padding:.6rem 1.5rem;background:linear-gradient(180deg,#0000004d,#000c);border-top:2px solid rgba(139,58,156,.3);display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-shrink:0}.attack-btn{padding:.7rem 2.5rem;background:linear-gradient(135deg,#dc2626,#ea580c);border:none;border-radius:10px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px #dc262680}.attack-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 25px #dc262699}.attack-btn:disabled{opacity:.4;cursor:not-allowed;background:#444;box-shadow:none}.action-hint{font-size:.8rem;color:#fff9;padding:.5rem 1rem;background:#0006;border-radius:6px}.battle-loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:#ec4899;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.battle-loading p{color:#fff9;font-size:1rem}.battle-result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.5rem;padding:2rem}.result-title{font-size:3.5rem;font-weight:800;margin:0;text-transform:uppercase}.battle-result.victory .result-title{background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.battle-result.defeat .result-title{color:#ef4444}.result-subtitle{color:#ffffffb3;font-size:1.2rem}.result-rewards{display:flex;gap:1.5rem;margin-top:1rem}.reward-item{display:flex;align-items:center;gap:.75rem;padding:1rem 2rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;font-size:1.1rem;color:#fff}.reward-item .reward-icon{font-size:1.5rem}.continue-btn{margin-top:1.5rem;padding:1rem 4rem;background:linear-gradient(135deg,#8b5cf6,#ec4899);border:none;border-radius:12px;color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 25px #8b5cf680}.continue-btn:hover{transform:translateY(-3px);box-shadow:0 8px 35px #8b5cf699}@media (max-width: 900px){.unit-card{width:85px;height:120px}.card-name{font-size:.55rem}.card-stats .stat{font-size:.5rem}.battle-center{min-width:100px}.timeline-unit{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.formation-columns,.unit-column{gap:6px}}@media (max-width: 700px){.unit-card{width:70px;height:100px}.card-name{font-size:.5rem}.card-stats{display:none}.hp-bar-container{height:10px}.hp-text{font-size:.45rem}.battle-log{display:none}.battle-center{min-width:60px}.timeline-unit{width:28px;height:28px;min-width:28px;min-height:28px;max-width:28px;max-height:28px}.action-hint{display:none}.formation-columns,.unit-column{gap:4px}}.battle-container{width:100%;max-width:1400px;margin:0 auto;padding:.5rem 1rem}.auth-required{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;text-align:center;padding:2rem}.auth-required h2{font-size:1.5rem;color:#ff4d8f;margin-bottom:.75rem;text-shadow:0 0 10px rgba(255,77,143,.5)}.auth-required p{font-size:1rem;color:#b8a8c8}.battle-mode-selection{max-width:1000px;margin:0 auto}.battle-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.battle-title{font-size:1.1rem;color:#ff4d8f;margin:0;font-style:italic;text-shadow:0 2px 8px rgba(255,77,143,.5)}.battle-mode-selection h2{font-size:1.1rem;color:#ff4d8f;margin:0 0 1.5rem;font-style:italic;text-shadow:0 2px 8px rgba(255,77,143,.5)}.mode-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.mode-button{background:#1a0f1fcc;border:3px solid rgba(139,58,156,.4);border-radius:16px;padding:3rem 2rem;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:1rem}.mode-button:hover{transform:translateY(-8px);border-color:#8b3a9ccc;box-shadow:0 8px 32px #8b3a9c66}.pve-button:hover{border-color:#4fc3f7;box-shadow:0 8px 32px #4fc3f766}.tactical-button:hover{border-color:#8b5cf6;box-shadow:0 8px 32px #8b5cf666}.pvp-button:hover{border-color:#ff4d8f;box-shadow:0 8px 32px #ff4d8f66}.story-button:hover{border-color:gold;box-shadow:0 8px 32px #ffd70066}.mode-icon{font-size:4rem;margin-bottom:.5rem}.mode-title{font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:.5rem}.pve-button .mode-title{color:#4fc3f7;text-shadow:0 0 10px rgba(79,195,247,.5)}.tactical-button .mode-title{color:#8b5cf6;text-shadow:0 0 10px rgba(139,92,246,.5)}.pvp-button .mode-title{color:#ff4d8f;text-shadow:0 0 10px rgba(255,77,143,.5)}.story-button .mode-title{color:gold;text-shadow:0 0 10px rgba(255,215,0,.5)}.mode-description{font-size:1rem;color:#b8a8c8;line-height:1.5}.back-to-menu-btn{background:#8b3a9c4d;border:2px solid rgba(139,58,156,.5);border-radius:8px;padding:.75rem 1.5rem;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-bottom:1.5rem}.back-to-menu-btn:hover{background:#8b3a9c80;border-color:#ff4d8f;transform:translate(-4px)}@media (max-width: 768px){.battle-mode-selection h2{font-size:2rem}.mode-buttons{grid-template-columns:1fr;gap:1.5rem}.mode-button{padding:2rem 1.5rem}.mode-icon{font-size:3rem}.mode-title{font-size:1.5rem}}