/*
 * gameOver.css — Result-card polish (QW2) + post-game review bar (QW4)
 *
 * Layers on top of the inline-styled .game-over-popup built in game.js:
 * adds an entrance animation, a result-coloured accent strip, rounder corners
 * and a softer shadow, plus the floating "review" bar shown while scrubbing.
 */

.game-over-popup {
    overflow: hidden;
    animation: gameOverIn 0.28s cubic-bezier(0.2, 0.8, 0.25, 1);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--elev-3) !important;
}

@keyframes gameOverIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Result-coloured accent strip across the top of the card */
.game-over-popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--hx-info);
}

.game-over-popup.result-win::before  { background: var(--hx-accent); }
.game-over-popup.result-loss::before { background: var(--hx-danger); }
.game-over-popup.result-draw::before { background: var(--hx-gold); }

.endgame-review-btn {
    margin-top: var(--space-3);
    width: 100%;
}

/* Floating bar shown during post-game review */
.review-bar {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 6px 6px 6px var(--space-4);
    background: var(--bg-container, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-pill);
    box-shadow: var(--elev-2);
    z-index: 1001;
    animation: gameOverIn 0.28s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.review-bar span {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary, #555);
    white-space: nowrap;
}