/* The game-log panel (see WebClient/Components/GameLogPanel.razor). De-emphasized: it opens on demand as a
   modal overlay (game-log__scrim + game-log__modal) summoned from the room's overflow menu (or its `L`
   shortcut), so it never consumes screen real estate until a player wants it. The modal is a room overlay at
   z-70, the same layer as the match dialogs and the group-conversation overlay. */

/* --- Modal overlay ----------------------------------------------------------- */

/* The scrim: a full-viewport dim + blur that captures the close-on-backdrop click. z-70 layers it over the
   room (z-55), matching the match dialogs and the group-conversation overlay. */
.game-log__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-reading);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--scrim) 34%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: mp-fade-in 0.15s ease both;
}

/* The card: a left-aligned reading panel (wider and taller than the centered dialog cards), with the title
   bar pinned above the scrolling feed. */
.game-log__modal {
    position: relative;
    width: 100%;
    max-width: 30rem;
    max-height: min(70vh, 40rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    text-align: left;
    animation: mp-pop-in 0.22s var(--ease-spring, ease) both;
}

.game-log__modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.5rem 0.55rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.game-log__modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.game-log__modal-close {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}
.game-log__modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* column-reverse keeps the view pinned to the newest line (which is first in DOM order) with no JS. It fills
   the card's remaining height and scrolls within it; the title bar stays pinned above. The container is the
   anchor for the jump-to-latest pill. */
.game-log__scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 6rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    padding: 0.55rem 0.9rem;
    gap: 0.3rem;
}

/* --- Entries ----------------------------------------------------------------- */

.game-log__line {
    line-height: 1.4;
    /* Settled history reads a touch quieter so the newest line stands out; --latest restores full weight. */
    opacity: 0.82;
}

/* Motion is opt-in: new lines fade and slide up into the live edge as they arrive, and the opacity transition
   smooths the handoff as a line stops being newest and settles into quieter history. All gated on the reader
   not preferring reduced motion — under that preference the log simply appears settled (the E2E suite too). */
@media (prefers-reduced-motion: no-preference) {
    .game-log__line {
        transition: opacity 200ms ease;
    }

    .game-log__line--enter {
        animation: game-log-enter 220ms ease-out;
    }
}

@keyframes game-log-enter {
    from {
        opacity: 0;
        transform: translateY(0.4rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The newest line: the live edge of the log. A seat-neutral accent + full opacity makes "this just happened"
   unmistakable no matter which way the reader assumes the log grows. */
.game-log__line--latest {
    opacity: 1;
}

.game-log__line--latest:not(.game-log__line--divider) {
    margin: 0 -0.9rem;
    padding: 0.05rem 0.9rem 0.05rem calc(0.9rem - 2px);
    border-left: 2px solid color-mix(in srgb, var(--accent-blue) 85%, transparent);
    border-radius: 0 0.3rem 0.3rem 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-blue) 12%, transparent), color-mix(in srgb, var(--accent-blue) 0%, transparent));
}

.game-log__line--divider {
    text-align: center;
    opacity: 0.55;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}

.game-log__seat {
    font-weight: 600;
}

/* A score delta is small bold type on the log's own panel, which is the table canvas's card — so each valence
   reads its accent's ink twin rather than the accent: 5.19:1 for green and 7.10:1 for red on that white, where
   the accents themselves read 2.97 and 4.70. A settled line is dimmed to 0.82 by the line rule above, which
   every colour in the log pays alike. */
.game-log__score--pos {
    color: var(--accent-green-ink);
    font-weight: 600;
}

.game-log__score--neg {
    color: var(--accent-red-ink);
    font-weight: 600;
}

.game-log__pieces {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    vertical-align: -0.12rem;
}

.game-log__card {
    display: inline-block;
    padding: 0 0.28rem;
    border: 1px solid var(--border-color);
    border-radius: 0.22rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 600;
}

/* Jump-to-latest pill: floats over the live edge (scroll-body bottom-centre) only while scrolled back into
   history, like a chat app's "new messages" chip. Clicking it snaps the view to the newest line. Anchored to
   the scroll container (position: relative above). */
.game-log__jump {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--accent-blue) 45%, var(--border-color));
    border-radius: 999px;
    background: var(--bg-card);
    color: color-mix(in srgb, var(--accent-blue) 80%, var(--text-primary));
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.game-log__jump:hover {
    background: var(--bg-hover);
}