/* ===========================================================================
   combat-log.css — Phase 7 (Combat UI refactor)

   Styles for the iconified, click-to-replay combat log. Lives in its own
   file (rather than appending to combat-shared.css) to avoid collision with
   the parallel Phase 6 agent that's also writing to combat-shared.css.

   Wired into App.razor as a separate <link> alongside combat-shared.css.

   Selectors live below; class names are intentionally namespaced (`log-*`,
   `replay-*`) so they don't bleed into other surfaces.
   =========================================================================== */

/* --- Icon prefix on every log row -------------------------------------- */

.log-icon {
    /* Slight breathing room between the icon and the message text. */
    margin-right: 4px;
    flex-shrink: 0;
}

/* --- Replayable row affordance ----------------------------------------- */

.combat-entry.log-replayable,
.recent-event-item.log-replayable {
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease;
}

.combat-entry.log-replayable:hover,
.recent-event-item.log-replayable:hover {
    background-color: rgba(251, 191, 36, 0.06);
    transform: translateX(1px);
}

.combat-entry.log-replayable:focus-visible,
.recent-event-item.log-replayable:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.6);
    outline-offset: -2px;
}

/* --- Crit flourish: 800ms gold glow on appearance ---------------------- */

@keyframes log-crit-flourish {
    0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.0); }
    35%  { box-shadow: 0 0 12px 4px rgba(251, 191, 36, 0.65); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.0); }
}

.combat-entry.log-crit,
.recent-event-item.log-crit {
    animation: log-crit-flourish 800ms ease-out 1;
}

/* --- Kill flourish: 800ms silver glow on appearance -------------------- */

@keyframes log-kill-flourish {
    0%   { box-shadow: 0 0 0 0 rgba(226, 232, 240, 0.0); }
    35%  { box-shadow: 0 0 14px 5px rgba(226, 232, 240, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(226, 232, 240, 0.0); }
}

.combat-entry.log-kill,
.recent-event-item.log-kill {
    animation: log-kill-flourish 800ms ease-out 1;
}

/* If a row is both crit and kill (a critical killing blow), the kill
   animation wins — it's the more dramatic moment. */
.combat-entry.log-crit.log-kill,
.recent-event-item.log-crit.log-kill {
    animation: log-kill-flourish 800ms ease-out 1;
}

/* --- Round divider (collapsible header) -------------------------------- */

.log-round-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    margin: 6px 0 4px 0;
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(90deg,
        rgba(30, 41, 59, 0.55) 0%,
        rgba(30, 41, 59, 0.25) 100%);
    color: #cbd5e1;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.log-round-divider:hover {
    background: linear-gradient(90deg,
        rgba(251, 191, 36, 0.16) 0%,
        rgba(30, 41, 59, 0.25) 100%);
    color: #fbbf24;
}

.log-round-divider:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.6);
    outline-offset: -2px;
}

.log-round-divider.log-round-collapsed {
    opacity: 0.7;
}

/* --- REPLAY badge overlay (top-right of EffectsHost) ------------------- */

.replay-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg,
        rgba(15, 23, 42, 0.92) 0%,
        rgba(30, 41, 59, 0.92) 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fbbf24;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
                0 0 16px rgba(251, 191, 36, 0.25);
    pointer-events: none;
    animation: replay-badge-fade 1500ms ease-out forwards;
}

.replay-badge .material-icons {
    font-size: 16px;
    line-height: 1;
}

@keyframes replay-badge-fade {
    0%   { opacity: 0; transform: translateY(-6px) scale(0.92); }
    10%  { opacity: 1; transform: translateY(0)    scale(1.0); }
    80%  { opacity: 1; transform: translateY(0)    scale(1.0); }
    100% { opacity: 0; transform: translateY(-2px) scale(0.98); }
}

/* --- Reduced motion: skip flourishes ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .combat-entry.log-crit,
    .combat-entry.log-kill,
    .recent-event-item.log-crit,
    .recent-event-item.log-kill {
        animation: none;
    }

    .replay-badge {
        animation: none;
        opacity: 1;
    }

    .combat-entry.log-replayable:hover,
    .recent-event-item.log-replayable:hover {
        transform: none;
    }
}