/* ==========================================================
   OVERLAY DI COMBATTIMENTO (popup riutilizzabile)
   (contenitore/card in components.css)
   ================================================---------- */

/* --- Combattente --- */
.cbt-fighter { display: flex; flex-direction: column; gap: 6px; position: relative; }

/* ==========================================================
   JUICE (js/combat/fx.js): danni fluttuanti, flash, scossa
   ================================================---------- */
.fx-danno {
    position: absolute;
    top: 34%;
    z-index: 5;
    pointer-events: none;
    font-weight: bold;
    font-size: 1.05rem;
    color: var(--testo);
    text-shadow: 0 0 6px var(--pericolo), 0 1px 2px #000;
    animation: fxDannoSale 0.9s ease-out forwards;
}
.fx-danno.crit {
    font-size: 1.55rem;
    color: var(--oro);
    text-shadow: 0 0 12px var(--oro), 0 1px 2px #000;
}
.fx-danno.dot {
    font-size: 0.88rem;
    color: var(--testo-tenue);
}
@keyframes fxDannoSale {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(-46px); opacity: 0; }
}

.cbt-fighter.colpito { animation: fxFlash 0.45s ease-out; }
.cbt-fighter.colpito.scossa { animation: fxFlash 0.45s ease-out, fxScossa 0.4s ease-in-out; }
@keyframes fxFlash {
    0%   { filter: brightness(1.9) saturate(1.5); }
    100% { filter: none; }
}
@keyframes fxScossa {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* banner esito con ingresso "pop" */
.cbt-esito { animation: fxBanner 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes fxBanner {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-danno { animation: none; opacity: 0; }
    .cbt-fighter.colpito, .cbt-fighter.colpito.scossa { animation: none; }
    .cbt-esito { animation: none; }
}
.cbt-fighter[data-side="nemico"] .cbt-name { color: var(--hud-neon-pink); text-shadow: 0 0 8px var(--hud-neon-pink); }
.cbt-fighter[data-side="giocatore"] .cbt-name { color: var(--hud-light); text-shadow: 0 0 8px var(--hud-purple); }

.cbt-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 0.95rem;
}
.cbt-icona { font-size: 1.3rem; }
.cbt-razza { margin-left: auto; font-size: 0.7rem; opacity: 0.8; letter-spacing: 0; }

.cbt-bars { display: flex; flex-direction: column; gap: 5px; }
.cbt-bar {
    position: relative;
    height: 18px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.cbt-bar-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    transform-origin: left;
    transition: width 0.35s ease;
}
.cbt-bar.hp .cbt-bar-fill { background: linear-gradient(90deg, #00ff82, #00c46a); }
.cbt-bar.shield .cbt-bar-fill { background: linear-gradient(90deg, #00c8ff, #0080ff); }
.cbt-bar.energy .cbt-bar-fill { background: linear-gradient(90deg, #b070ff, #7038f8); }
.cbt-bar.shield.vuota { opacity: 0.3; }

.cbt-bar-txt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 4px #000, 0 0 4px #000;
    letter-spacing: 0.5px;
}

.cbt-effetti { display: flex; gap: 6px; min-height: 20px; flex-wrap: wrap; }
.cbt-eff {
    font-size: 0.72rem;
    padding: 1px 6px;
    background: rgba(112, 56, 248, 0.25);
    border: 1px solid var(--hud-purple-dim);
    border-radius: 3px;
}

/* --- Divisorio VS --- */
.cbt-vs {
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: var(--hud-neon-pink);
    opacity: 0.8;
}

/* --- Log --- */
.cbt-log {
    height: 96px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(112, 56, 248, 0.4);
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cbt-log .crit { color: #ffd23f; font-weight: bold; }
.cbt-log .debole { color: #ff8c3f; }
.cbt-log .resiste { color: #7fb0ff; }

/* --- Azioni --- */
.cbt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cbt-btn {
    font-family: inherit;
    color: #fff;
    background: rgba(112, 56, 248, 0.18);
    border: 1px solid var(--hud-purple);
    padding: 10px 8px;
    cursor: pointer;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    transition: background 0.2s ease, transform 0.15s ease;
    text-align: left;
}
.cbt-btn:hover:not(:disabled) { background: rgba(112, 56, 248, 0.4); transform: translateY(-1px); }
.cbt-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cbt-btn .costo { display: block; font-size: 0.66rem; opacity: 0.8; margin-top: 2px; }

/* --- Esito --- */
.cbt-esito { text-align: center; display: flex; flex-direction: column; gap: 12px; }
.cbt-esito-titolo { font-size: 1.4rem; letter-spacing: 2px; }
.cbt-esito.vinta .cbt-esito-titolo { color: #00ff82; text-shadow: 0 0 12px rgba(0, 255, 130, 0.8); }
.cbt-esito.persa .cbt-esito-titolo { color: var(--hud-neon-pink); text-shadow: 0 0 12px var(--hud-neon-pink); }
.cbt-esito-dett { font-size: 0.85rem; color: var(--hud-light); }
.cbt-continua {
    font-family: inherit;
    color: #fff;
    background: rgba(0, 255, 130, 0.15);
    border: 1px solid #00ff82;
    padding: 12px;
    cursor: pointer;
    letter-spacing: 2px;
    font-weight: bold;
}
.cbt-continua:hover { background: rgba(0, 255, 130, 0.3); }