/* =====================================================
   COMBAT ANIMATION SYSTEM — OceanWar
   Cinematic battle replay shown at turn start
   ===================================================== */

/* ─── Full-screen overlay ─── */
.combat-anim-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: combatOverlayIn 0.4s ease;
}
.combat-anim-overlay.closing {
    animation: combatOverlayOut 0.35s ease forwards;
}
@keyframes combatOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes combatOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ─── Main container ─── */
.combat-anim-container {
    width: 860px;
    max-width: 95vw;
    max-height: 88vh;
    background: linear-gradient(160deg, #0a0e1a 0%, #111b2e 40%, #0d1f3c 100%);
    border: 2px solid #e94560;
    border-radius: 14px;
    box-shadow:
        0 0 60px rgba(233, 69, 96, 0.25),
        0 0 120px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e0e0e0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    animation: combatSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes combatSlideIn {
    from { transform: translateY(40px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ─── Header bar ─── */
.combat-anim-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: linear-gradient(90deg, rgba(233, 69, 96, 0.25) 0%, rgba(233, 69, 96, 0.05) 100%);
    border-bottom: 1px solid rgba(233, 69, 96, 0.35);
    flex-shrink: 0;
}
.combat-anim-header-icon {
    font-size: 30px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(233, 69, 96, 0.5));
}
.combat-anim-header-text {
    flex: 1;
}
.combat-anim-header-text h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #e94560;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.combat-anim-header-subtitle {
    font-size: 12px;
    color: #7a8ba8;
    margin-top: 2px;
}
.combat-anim-turn-badge {
    font-size: 11px;
    color: #aaa;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.combat-anim-close {
    background: none;
    border: none;
    color: #666;
    font-size: 26px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}
.combat-anim-close:hover { color: #e94560; }

/* ─── Battle stage (scrollable) ─── */
.combat-anim-stage {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    position: relative;
}

/* ─── Location banner ─── */
.combat-anim-location {
    text-align: center;
    margin-bottom: 18px;
    animation: fadeSlideDown 0.5s ease both;
}
.combat-anim-location-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}
.combat-anim-location-detail {
    font-size: 11px;
    color: #7a8ba8;
    margin-top: 2px;
}
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Versus layout ─── */
.combat-anim-versus {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 20px;
    min-height: 120px;
}
.combat-anim-side {
    flex: 1;
    padding: 14px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.combat-anim-side.side-left {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.12) 0%, transparent 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px 0 0 8px;
}
.combat-anim-side.side-right {
    background: linear-gradient(225deg, rgba(233, 69, 96, 0.12) 0%, transparent 100%);
    border-radius: 0 8px 8px 0;
}
.combat-anim-side-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #667;
    position: absolute;
    top: 6px;
    left: 14px;
}
.side-right .combat-anim-side-label { left: auto; right: 14px; }
.combat-anim-side-icon {
    font-size: 42px;
    margin-top: 8px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
    animation: sideIconPulse 2s ease-in-out infinite;
}
@keyframes sideIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.combat-anim-side-name {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    text-align: center;
}
.combat-anim-side-detail {
    font-size: 11px;
    color: #7a8ba8;
}
.combat-anim-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 900;
    color: #e94560;
    text-shadow: 0 0 16px rgba(233, 69, 96, 0.6);
    letter-spacing: 2px;
    animation: vsPulse 1.5s ease-in-out infinite;
}
@keyframes vsPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
}

/* ─── Engagement rows ─── */
.combat-anim-engagements {
    margin-bottom: 16px;
}
.combat-anim-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffd700;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Individual engagement card */
.combat-anim-engagement {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    opacity: 0;
    transform: translateX(-20px);
    transition: background 0.15s;
}
.combat-anim-engagement:hover {
    background: rgba(255, 255, 255, 0.04);
}
.combat-anim-engagement.revealed {
    animation: engagementReveal 0.4s ease forwards;
}
@keyframes engagementReveal {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.combat-anim-unit-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}
.combat-anim-unit-info {
    flex: 1;
    min-width: 0;
}
.combat-anim-unit-name {
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combat-anim-unit-detail {
    font-size: 10px;
    color: #7a8ba8;
}

/* Firing animation container */
.combat-anim-fire {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.combat-anim-projectile {
    width: 30px;
    height: 2px;
    background: transparent;
    position: relative;
    overflow: hidden;
}
.combat-anim-projectile.firing .combat-anim-tracer {
    animation: tracerFly 0.3s ease-out forwards;
}
.combat-anim-tracer {
    position: absolute;
    top: 0; left: -10px;
    width: 10px; height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, #ff6600);
    border-radius: 1px;
    box-shadow: 0 0 6px #ff6600;
}
@keyframes tracerFly {
    from { left: -10px; opacity: 1; }
    to   { left: 30px;  opacity: 0; }
}

/* Result badge */
.combat-anim-result {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    min-width: 50px;
    text-align: center;
}
.combat-anim-result.hit {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}
.combat-anim-result.miss {
    background: rgba(100, 100, 100, 0.15);
    color: #666;
    border: 1px solid rgba(100, 100, 100, 0.2);
}
.combat-anim-result.sunk,
.combat-anim-result.destroyed {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
    border: 1px solid rgba(255, 23, 68, 0.3);
    animation: destroyedFlash 0.6s ease;
}
@keyframes destroyedFlash {
    0%   { background: rgba(255, 100, 50, 0.5); }
    100% { background: rgba(255, 23, 68, 0.15); }
}

/* Damage number float */
.combat-anim-dmg {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: #ff5252;
    min-width: 36px;
    text-align: right;
}
.combat-anim-dmg.no-damage {
    color: #444;
}
.combat-anim-dmg.float-up {
    animation: dmgFloat 0.5s ease-out;
}
@keyframes dmgFloat {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* Health bar */
.combat-anim-hp-bar {
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.combat-anim-hp-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease, background 0.3s;
}
.combat-anim-hp-fill.hp-high   { background: #4caf50; }
.combat-anim-hp-fill.hp-mid    { background: #ff9800; }
.combat-anim-hp-fill.hp-low    { background: #ff5252; }
.combat-anim-hp-fill.hp-dead   { background: #ff1744; width: 0 !important; }

/* ─── Fortress exchange row: action label + target ─── */
.combat-anim-action-label {
    font-size: 9px;
    color: #667;
    font-style: italic;
    white-space: nowrap;
}
.combat-anim-target {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 80px;
}
.combat-anim-target-icon {
    font-size: 16px;
}
.combat-anim-target-name {
    font-size: 11px;
    font-weight: 600;
    color: #c0c0c0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* Exchange group — visually groups attacker→defender + defender→attacker rows */
.combat-anim-exchange-group {
    border-left: 3px solid rgba(255, 215, 0, 0.25);
    padding-left: 6px;
    margin-bottom: 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
}
.combat-anim-exchange-group .combat-anim-engagement:last-child {
    margin-bottom: 0;
}

/* Fortress status bar between engagements and summary */
.combat-anim-fortress-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.12);
}
.fortress-status-label {
    font-size: 11px;
    font-weight: 600;
    color: #ccc;
}

/* ─── Summary stats ─── */
.combat-anim-summary {
    display: flex;
    gap: 14px;
    padding: 14px;
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    animation: fadeSlideDown 0.6s ease 0.3s both;
}
.combat-anim-stat {
    flex: 1;
    text-align: center;
}
.combat-anim-stat-label {
    display: block;
    font-size: 9px;
    color: #667;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
}
.combat-anim-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
}
.combat-anim-stat-value.dealt { color: #4caf50; }
.combat-anim-stat-value.received { color: #ff5252; }
.combat-anim-stat-value.neutral { color: #e0e0e0; }

/* ─── Explosion burst effect ─── */
.combat-anim-explosion {
    position: absolute;
    pointer-events: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff6600 0%, #ff0000 40%, transparent 70%);
    animation: explosionBurst 0.6s ease-out forwards;
    z-index: 5;
}
@keyframes explosionBurst {
    0%   { transform: scale(0); opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* ─── Footer controls ─── */
.combat-anim-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.combat-anim-btn {
    padding: 8px 28px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
    border: 1px solid;
}
.combat-anim-btn.btn-primary {
    background: linear-gradient(135deg, #1a5276, #2980b9);
    color: #fff;
    border-color: #3498db;
}
.combat-anim-btn.btn-primary:hover {
    background: linear-gradient(135deg, #2980b9, #3498db);
    box-shadow: 0 0 12px rgba(52, 152, 219, 0.4);
}
.combat-anim-btn.btn-skip {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    border-color: rgba(255, 255, 255, 0.1);
}
.combat-anim-btn.btn-skip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

/* Battle counter (1 of 3) */
.combat-anim-counter {
    font-size: 11px;
    color: #556;
    letter-spacing: 0.5px;
}

/* ─── Media queries ─── */
@media (max-width: 700px) {
    .combat-anim-container { max-width: 98vw; }
    .combat-anim-versus { flex-direction: column; }
    .combat-anim-vs { width: auto; height: 30px; }
    .combat-anim-engagement { flex-wrap: wrap; }
    .combat-anim-summary { flex-wrap: wrap; }
    .ship-status-overview { flex-direction: column; }
    .ship-status-divider { width: 100%; height: 1px; }
}

/* =====================================================
   v5.33 — Fleet Battle Redesign: Target-Grouped Layout
   ===================================================== */

/* ─── Fleet Battle Header (VS panel) ─── */
.fleet-battle-header {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 4px 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.fleet-battle-side {
    flex: 1;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.fleet-battle-side.side-atk {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.1) 0%, transparent 100%);
}
.fleet-battle-side.side-def {
    background: linear-gradient(225deg, rgba(100, 180, 255, 0.1) 0%, transparent 100%);
}
.fleet-battle-nation {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #667;
}
.fleet-battle-name {
    font-size: 13px;
    font-weight: 700;
    color: #e0e0e0;
}
.side-atk .fleet-battle-name { color: #ff8888; }
.side-def .fleet-battle-name { color: #88ccff; }
.fleet-battle-count {
    font-size: 10px;
    color: #556;
}
.fleet-battle-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 900;
    color: #e94560;
    text-shadow: 0 0 12px rgba(233, 69, 96, 0.5);
    background: rgba(0, 0, 0, 0.3);
    animation: vsPulse 1.5s ease-in-out infinite;
}

/* ─── Ship Status Overview (at-a-glance panel) ─── */
.ship-status-overview {
    display: flex;
    gap: 0;
    margin: 0 4px 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.ship-status-column {
    flex: 1;
    padding: 8px 10px;
    min-width: 0;
}
.ship-status-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.ship-status-col-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
.ship-status-col-header.side-atk-header { color: #ff8888; }
.ship-status-col-header.side-def-header { color: #88ccff; }
.ship-status-empty {
    font-size: 10px;
    color: #445;
    font-style: italic;
    text-align: center;
    padding: 8px;
}

/* Individual ship card in overview */
.ship-status-card {
    padding: 6px 8px;
    margin-bottom: 4px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}
.ship-status-card:hover {
    background: rgba(255, 255, 255, 0.05);
}
.ship-status-card.ship-sunk {
    background: rgba(255, 23, 68, 0.08);
    border-color: rgba(255, 23, 68, 0.2);
}
.ship-status-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ship-status-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.ship-status-name {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: #d0d0d0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ship-tech {
    font-size: 9px;
    color: #556;
    font-weight: 400;
}
.ship-status-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.ship-status-badge.status-ok {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}
.ship-status-badge.status-damaged {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}
.ship-status-badge.status-sunk {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
    border: 1px solid rgba(255, 23, 68, 0.3);
    animation: destroyedFlash 0.6s ease;
}
.ship-status-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}
.ship-status-hp-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}
.ship-status-hp-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease, background 0.3s;
}
.ship-status-hp-fill.hp-high   { background: #4caf50; }
.ship-status-hp-fill.hp-mid    { background: #ff9800; }
.ship-status-hp-fill.hp-low    { background: #ff5252; }
.ship-status-hp-fill.hp-dead   { background: #ff1744; width: 0 !important; }
.ship-status-hp-text {
    font-size: 9px;
    color: #888;
    white-space: nowrap;
    min-width: 55px;
    text-align: right;
}
.ship-dmg-taken {
    font-size: 9px;
    font-weight: 700;
    color: #ff5252;
    white-space: nowrap;
}
.ship-status-row3 {
    margin-top: 2px;
}
.ship-status-detail {
    font-size: 9px;
    color: #556;
}

/* ─── Target-Grouped Engagement Cards ─── */
.target-group {
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    opacity: 0;
    transform: translateX(-20px);
}
.target-group.revealed {
    animation: engagementReveal 0.4s ease forwards;
}
.target-group.target-sunk {
    border-color: rgba(255, 23, 68, 0.25);
    background: rgba(255, 23, 68, 0.05);
}
.target-group.target-damaged {
    border-color: rgba(255, 152, 0, 0.15);
}
.target-group.target-ok {
    border-color: rgba(76, 175, 80, 0.1);
}

.target-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.target-group-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.target-group-name {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: #e0e0e0;
}
.target-group-status {
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.target-sunk .target-group-status { color: #ff1744; }
.target-damaged .target-group-status { color: #ff9800; }
.target-ok .target-group-status { color: #4caf50; }

.target-group-dmg {
    font-size: 15px;
    font-weight: 700;
    color: #ff5252;
    min-width: 45px;
    text-align: right;
    flex-shrink: 0;
}

.target-group-hp {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 6px;
    background: rgba(0, 0, 0, 0.1);
}
.target-hp-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}
.target-hp-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.target-hp-fill.hp-high   { background: #4caf50; }
.target-hp-fill.hp-mid    { background: #ff9800; }
.target-hp-fill.hp-low    { background: #ff5252; }
.target-hp-fill.hp-dead   { background: #ff1744; width: 0 !important; }
.target-hp-text {
    font-size: 9px;
    color: #888;
    white-space: nowrap;
    min-width: 90px;
    text-align: right;
}

/* Shot rows within a target group */
.target-group-shots {
    padding: 4px 8px 6px;
}
.shot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 3px;
    margin-bottom: 2px;
    font-size: 11px;
}
.shot-row:hover {
    background: rgba(255, 255, 255, 0.03);
}
.shot-attacker {
    color: #b0b0b0;
    font-weight: 500;
    min-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shot-detail {
    flex: 1;
    font-size: 9px;
    color: #556;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section subtitle (hit counts) */
.section-subtitle {
    font-size: 10px;
    font-weight: 400;
    color: #888;
    margin-left: 8px;
}