/* /css/hockey-game.css */

/* --- Hockey Vocab Game Styles --- */
.hockey-vocab-game-container * { box-sizing: border-box; }
.hockey-vocab-game-container { font-family: sans-serif; background-color: #fff; border: 1px solid #e5e5e5; padding: 25px; margin-bottom: 25px; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; }
.hockey-vocab-game-container h2 { margin-top: 0; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #eee; font-size: 1.3em; font-weight: 600; text-align: center; color: #333; }
.hvg-game-area { display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px; flex-wrap: wrap; }
.hvg-column { width: 48%; display: flex; flex-direction: column; gap: 8px; position: relative; }

/* Items - Smaller Size */
.hvg-item { background-color: #f2e6f2; border: 1px solid #e5e5e5; padding: 8px 12px; border-radius: 4px; cursor: pointer; user-select: none; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; font-size: 0.9rem; order: 99; position: relative; z-index: 1; display: flex; align-items: center; height: 80px; line-height: 1.4; color: #333; margin-bottom: 10px; }

/* Item Hover */
.hvg-item:hover:not(.hvg-locked) { background-color: #e8d8e8; border-color: #d8c8d8; }
/* Item Selected */
.hvg-item.hvg-selected { background-color: #800080; border-color: #6a006a; color: #fff; }
/* Item Correct (Final State) */
.hvg-item.hvg-correct { background-color: #dff0d8; border-color: #c3e6cb; color: #155724; cursor: default; }
/* Item Locked (General State) */
.hvg-item.hvg-locked { cursor: default; pointer-events: none; opacity: 0.95; }
/* Item Animating (Force Purple During Flight) */
.hvg-item.hvg-locked.hvg-animating { background-color: #800080 !important; border-color: #6a006a !important; color: #fff !important; z-index: 10; backface-visibility: hidden; }
/* Item Incorrect */
.hvg-item.hvg-incorrect { animation: hvg-flashRed 0.5s ease; }
@keyframes hvg-flashRed { 0%, 100% { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; } 50% { background-color: #f1b0b7; border-color: #eba0a7; color: #721c24; } }
/* Slow Double Green Flash Animation */
.hvg-item.hvg-flash-landing { animation-name: hvg-flashGreen; animation-duration: 0.8s; animation-timing-function: ease-out; animation-iteration-count: 2; }
@keyframes hvg-flashGreen { 0% { background-color: #dff0d8; border-color: #c3e6cb; } 50% { background-color: #a3e0a8; border-color: #8fd894; } 100% { background-color: #dff0d8; border-color: #c3e6cb; } }

.hvg-item.correct-answer-animation {
    animation: green-explosion 0.5s ease-out forwards;
}

@keyframes green-explosion {
    0% {
        transform: scale(1);
        background-color: #f2e6f2;
    }
    50% {
        transform: scale(1.1);
        background-color: #d4edda;
    }
    100% {
        transform: scale(1);
        background-color: #28a745;
    }
}

/* Reset Button */
.hvg-reset-button { margin: 15px auto 0; text-align: center; background-color: #800080; color: #fff !important; text-decoration: none; padding: 10px 18px; border: none; border-radius: 4px; transition: background-color 0.2s ease, transform 0.1s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.1); font-size: 1rem; cursor: pointer; width: -moz-fit-content; width: fit-content; }
.hvg-reset-button:hover { background-color: #6a006a; color: #fff !important; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
/* Status Message */
.hvg-status-message { margin-top: 15px; margin-bottom: 15px; font-weight: bold; min-height: 20px; color: #333; text-align: center; font-size: 1em; }