/* --- 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 35px 10px 20px; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0;
    overflow: visible; /* Prevents the tooltip from getting clipped */
}
#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%; min-width: 0; }
.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; min-width: 0; word-break: break-word; overflow-wrap: break-word; }

.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; }

/* Pointer events auto re-enables hovering for icons even if the choice card is disabled */
.quiz-answer-players { position: absolute; bottom: 5px; right: 10px; display: flex; gap: 4px; pointer-events: auto; }
.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; pointer-events: none;
}
.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: 768px) {
    #quiz-timer-container { width: 48px; height: 48px; }
    #quiz-timer-text { font-size: 1.25em; }
    
    #quiz-answers-container {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }
    #quiz-answers-container .choice-card {
        padding: 8px 35px 8px 12px;
        min-height: 44px;
        width: 100% !important;
        min-width: 0 !important;
    }
    .choice-card-content {
        min-width: 0 !important;
        width: 100% !important;
    }
    .quiz-answer-prefix {
        font-size: 0.85em;
    }
    .quiz-answer-text {
        font-size: 0.85em;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
}

@media (max-width: 1366px) and (min-width: 769px) {
    /* Side-by-side layout for tablet to avoid overlapping, targeting only visible state */
    #millionaire-quiz-game-view[style*="flex"] {
        display: grid !important;
        grid-template-areas:
            "header header"
            "answers jokers"
            "buttons buttons";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 20px;
        align-items: stretch;
        width: 100%;
        height: auto !important;
        flex: 1 1 0 !important;
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    #millionaire-quiz-game-view .game-view-header {
        grid-area: header;
        width: 100%;
        flex-shrink: 0;
    }

    #millionaire-quiz-game-view .game-view-main {
        grid-area: answers;
        width: 100%;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        margin: 0;
    }

    #millionaire-quiz-game-view #quiz-controls-area {
        display: contents;
    }

    /* Jokers on the right hand side - laid out horizontally */
    #quiz-jokers-container {
        grid-area: jokers;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center !important;
        height: auto !important;
        margin: 0 !important;
        gap: 15px;
        width: 100%;
    }

    #quiz-footer-buttons {
        grid-area: buttons;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 0;
    }

    /* Stack answer cards vertically like on mobile but make them flex their heights */
    #quiz-answers-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    #quiz-answers-container .choice-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 10px 35px 10px 16px;
        flex: 1;
        display: flex;
        align-items: center;
    }
}

/* Intro Animations for Millionaire Quiz */
#millionaire-quiz-game-view.intro-animation .game-view-header,
#millionaire-quiz-game-view.intro-animation #quiz-answers-container .choice-card,
#millionaire-quiz-game-view.intro-animation .game-view-controls { opacity: 0; pointer-events: none; }