/* --- Millionaire Quiz --- */
#millionaire-quiz-game-view .game-view-main { margin-top: 20px; justify-content: flex-start; }
#quiz-answers-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }
#quiz-answers-container .choice-card {
    aspect-ratio: auto; height: auto; min-height: var(--slot-height);
    padding: 10px 20px; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0;
}
#quiz-answers-container .choice-card.selected { animation: stickerSlap 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.choice-card-content { display: flex; align-items: center; gap: 15px; width: 100%; }
.quiz-answer-prefix { font-weight: bold; color: var(--highlight-secondary); transition: color 200ms ease, font-weight 200ms ease; }
#quiz-answers-container .choice-card.selected .quiz-answer-prefix { color: var(--text-primary); font-weight: 900; }
.quiz-answer-text { text-align: left; flex-grow: 1; }

.choice-card.locked-in { background-image: linear-gradient(135deg, var(--warning-color), #ffb868), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'><path d='M0 6 L8 2 L16 6 L24 2 L32 6 L40 2' stroke='white' stroke-opacity='0.12' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); border-color: var(--warning-color); }
.choice-card.correct { background-image: linear-gradient(135deg, var(--success-color), #57e092), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'><path d='M0 6 L8 2 L16 6 L24 2 L32 6 L40 2' stroke='white' stroke-opacity='0.12' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); border-color: var(--success-color); }
.choice-card.incorrect { background-image: linear-gradient(135deg, var(--error-color), #ff7a6b), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'><path d='M0 6 L8 2 L16 6 L24 2 L32 6 L40 2' stroke='white' stroke-opacity='0.12' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); border-color: var(--error-color); opacity: 1 !important; }
.choice-card.disabled { opacity: 0.6; pointer-events: none; background-image: none; background-color: color-mix(in srgb, var(--bg-secondary) 97%, white); transform: none; }
.choice-card.eliminated-by-joker { opacity: 0.3 !important; pointer-events: none; transform: none; }

.quiz-answer-players { position: absolute; bottom: 5px; right: 10px; display: flex; gap: 4px; }
.player-icon-display { position: relative; width: 28px; height: 28px; }
.player-icon-display img { width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--highlight-secondary); object-fit: cover; }
.player-icon-tooltip {
    visibility: hidden; width: max-content; background-color: var(--bg-primary);
    color: var(--text-primary); text-align: center; border-radius: 4px; padding: 5px 8px;
    position: absolute; z-index: 10; bottom: 125%; left: 50%; transform: translateX(-50%);
    opacity: 0; transition: opacity 0.2s; font-size: 0.8em;
}
.player-icon-display:hover .player-icon-tooltip { visibility: visible; opacity: 1; }
#quiz-footer-buttons { display: flex; justify-content: center; align-items: center; gap: 15px; }
#quiz-lock-in-button, #quiz-next-round-button { min-width: 150px; }

#quiz-jokers-container { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; height: 100px; }
.joker-card {
    position: relative; width: 70px; height: 90px; background: var(--bg-tertiary);
    border: 2px solid var(--border-color); border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    padding: 0; font-family: inherit; font-weight: bold;
}
.joker-card:not(:disabled):hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); }
.joker-icon { font-size: 2em; color: var(--highlight-secondary); }
.joker-tooltip {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px);
    background-color: var(--bg-primary); color: var(--text-primary);
    padding: 5px 10px; border-radius: 4px; font-size: 0.8em; white-space: nowrap;
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none;
}
.joker-card:hover .joker-tooltip { opacity: 1; visibility: visible; }
.joker-card.used { background: var(--bg-secondary); }
.joker-card.used::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top right, transparent calc(50% - 2px), var(--text-secondary) calc(50% - 2px), var(--text-secondary) calc(50% + 2px), transparent calc(50% + 2px)); pointer-events: none;
}
.joker-card:disabled { cursor: not-allowed; opacity: 0.5; }

/* Timers */
#quiz-timer-container { position: relative; width: 80px; height: 80px; }
#quiz-timer-svg { transform: rotate(-90deg); }
#quiz-timer-text {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2em; font-weight: bold; color: var(--text-primary);
}

@media (max-width: 600px) {
    #quiz-timer-container { width: 48px; height: 48px; }
    #quiz-timer-text { font-size: 1.5em; }
}