.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}}.character-portrait{display:flex;flex-direction:column;gap:.5rem;width:150px}.character-image{position:relative;width:150px;height:150px;background:linear-gradient(135deg,#8b3a9c4d,#ff4d8f4d);border-radius:8px;border:2px solid var(--accent-purple);display:flex;align-items:center;justify-content:center;font-size:3rem;box-shadow:0 4px 12px #00000080}.element-badge{position:absolute;top:.5rem;left:.5rem;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);box-shadow:0 2px 6px #00000080}.element-fire{background-color:var(--element-fire)}.element-water{background-color:var(--element-water)}.element-earth{background-color:var(--element-earth)}.element-air{background-color:var(--element-air);color:#333}.element-lightning{background-color:var(--element-lightning);color:#333}.element-ice{background-color:var(--element-ice)}.element-light{background-color:var(--element-light);color:#333}.element-dark{background-color:var(--element-dark)}.element-nature{background-color:var(--element-nature)}.element-metal{background-color:var(--element-metal)}.character-level{position:absolute;top:.5rem;right:.5rem;background:#000c;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:700;color:var(--accent-gold);border:1px solid var(--accent-gold)}.character-info{display:flex;flex-direction:column;gap:.25rem}.character-name{font-size:.9rem;font-weight:700;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp-bar-container{display:flex;flex-direction:column;gap:.25rem}.hp-bar{width:100%;height:12px;background:#0009;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}.hp-bar-fill{height:100%;transition:width .5s ease,background-color .3s ease;border-radius:6px;box-shadow:0 0 8px currentColor}.hp-text{font-size:.75rem;text-align:center;color:#fffc}@media (max-width: 768px){.character-portrait{width:120px}.character-image{width:120px;height:120px;font-size:2.5rem}}.turn-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;animation:pulse 2s infinite}.turn-indicator-content{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 2rem;background:linear-gradient(135deg,#8b3a9cf2,#ff4d8ff2);border-radius:12px;border:2px solid var(--accent-gold);box-shadow:0 8px 24px #000c,0 0 40px #8b3a9c99}.turn-indicator.player-turn .turn-indicator-content{background:linear-gradient(135deg,#4caf50f2,#8bc34af2);border-color:var(--element-nature);box-shadow:0 8px 24px #000c,0 0 40px #4caf5099}.turn-indicator.opponent-turn .turn-indicator-content{background:linear-gradient(135deg,#f44336f2,#e91e63f2);border-color:var(--element-fire);box-shadow:0 8px 24px #000c,0 0 40px #f4433699}.turn-indicator-arrow{font-size:2rem;animation:bounce 1s infinite}.turn-indicator-text{text-align:center;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8)}.turn-indicator-text strong{font-size:1.2rem;display:block;margin-bottom:.25rem}.turn-prompt{font-size:.9rem;opacity:.9}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (max-width: 768px){.turn-indicator-content{padding:.75rem 1.5rem}.turn-indicator-text strong{font-size:1rem}.turn-prompt{font-size:.8rem}}.battle-screen{width:100%;height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--bg-dark) 0%,#0f0a14 100%);padding:1rem;gap:1rem}.battle-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#8b3a9c1a;border:1px solid var(--accent-purple);border-radius:8px}.battle-header h2{margin:0;color:var(--accent-purple);font-size:1.5rem}.battle-turn-info{font-size:1.2rem;color:var(--accent-pink);font-weight:700}.battle-arena{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:2rem;background:#0000004d;border-radius:12px;border:2px solid rgba(139,58,156,.3);position:relative}.battle-team{display:flex;flex-direction:column;gap:1rem}.battle-team h3{margin:0;font-size:1.2rem;color:var(--accent-purple);text-align:center}.team-characters{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.character-slot{position:relative;cursor:pointer;transition:transform .2s,box-shadow .2s;border-radius:8px;padding:.5rem;background:#00000080;border:2px solid transparent}.character-slot:hover:not(.knocked-out){transform:scale(1.05);border-color:var(--accent-purple);box-shadow:0 0 20px #8b3a9c80}.character-slot.selected{border-color:var(--accent-pink);box-shadow:0 0 30px #ff4d8fb3;transform:scale(1.08)}.character-slot.knocked-out{opacity:.4;cursor:not-allowed;filter:grayscale(100%)}.opponent-team,.opponent-team .character-slot{transform:scaleY(-1)}@media (max-width: 768px){.battle-screen{padding:.5rem}.battle-arena{padding:1rem;gap:1rem}.team-characters{gap:.5rem}}.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}}