/* quiz-styles.css */

/* --- QUIZ SPECIFIC STYLES --- */
.hidden { display: none !important; }

#quiz-start-screen, #quiz-area, #quiz-results-screen {
    display: flex;
    flex-direction: column;
    opacity: 0;
    width: 100%;
}
#quiz-start-screen { align-items: center; text-align: center; justify-content: center; }

.quiz-invitation-main {
    font-family: var(--font-heading);
    font-weight: 800; /* Very Bold */
    font-size: clamp(1.6em, 5vw, 2.2em) !important;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    text-wrap: balance;
    margin-bottom: var(--spacing-xs); /* Closer to the dare */
}
.quiz-invitation-dare {
    font-family: var(--font-heading);
    font-weight: 900; /* Super Bold */
    font-size: clamp(1.8em, 5.5vw, 2.5em) !important;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--accent-primary); /* Use accent color for the dare */
    text-wrap: balance;
    margin-bottom: var(--spacing-xl); /* Space before "Choose your challenge" */
}

#quiz-options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    width: 100%;
    max-height: calc(100vh - var(--header-height) - 200px); /* Adjust height based on header size */
    overflow-y: auto;
    padding: 2px;
}

.quiz-option-button {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    line-height: 1.45;
    height: auto;
    white-space: normal;
    border: 1px solid var(--border);
    background-color: var(--bg-subsection);
    color: var(--text-primary);
    transition: background-color var(--transition-speed-fast) var(--transition-timing-default),
                border-color var(--transition-speed-fast) var(--transition-timing-default);
}
#quiz-start-screen .button-modern {
    color: var(--accent-primary);
    background-color: var(--bg-elements);
    border-color: var(--border);
}
#quiz-start-screen .button-modern:hover {
    background-color: var(--bg-hover);
    border-color: var(--accent-primary);
}
.quiz-option-button:hover:not(:disabled) {
    border-color: var(--accent-primary);
    background-color: var(--bg-hover);
    transform: none !important; 
    box-shadow: none !important; 
}
.quiz-option-button.selected {
    border-color: var(--accent-primary) !important;
    background-color: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-subsection)) !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}
.quiz-option-button:disabled { opacity: 0.7; cursor: not-allowed; }
.quiz-option-button.disabled-after-selection:not(.selected) { opacity: 0.5; }
.quiz-option-button.selected.disabled-after-selection { opacity: 1; }

#quiz-area #quiz-question-text.subsection-title {
    font-size: clamp(1.5em, 3.5vw, 1.9em);
    margin-bottom: var(--spacing-md);
}
#quiz-header-info {
    padding-bottom: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-md) !important;
}

#quiz-answers-summary ul { list-style: none; padding-left: 0; }
#quiz-answers-summary li {
    background-color: var(--bg-subsection); padding: var(--spacing-md);
    margin-bottom: var(--spacing-md); border-radius: var(--border-radius-md);
    border: 1px solid var(--border); position: relative;
}
#quiz-answers-summary li .summary-question-text { font-weight: 600; margin-bottom: var(--spacing-sm); display: block; }
#quiz-answers-summary li .summary-answer-block { margin-top: var(--spacing-sm); padding-left: var(--spacing-md); border-left: 3px solid var(--border); }
#quiz-answers-summary li .summary-user-answer-text,
#quiz-answers-summary li .summary-correct-answer-text { display: block; font-size: 0.95rem; margin-bottom: var(--spacing-xs); }
#quiz-answers-summary li .summary-user-answer-text.user-correct { font-weight: 600; color: var(--quiz-correct-color); }
#quiz-answers-summary li .summary-user-answer-text.user-incorrect { text-decoration: line-through; color: var(--quiz-incorrect-color); }

#quiz-answers-summary li .summary-correct-answer-text { color: var(--text-secondary); }
#quiz-answers-summary li .learn-more-link { font-size: 0.9em; margin-top: var(--spacing-sm); display: block; }
#quiz-answers-summary li .summary-user-answer-text .material-symbols-outlined { font-size: 1.1em; vertical-align: text-bottom; margin-left: var(--spacing-xs); }
#quiz-answers-summary li .summary-user-answer-text.user-correct .material-symbols-outlined { color: var(--quiz-correct-icon-color); }
#quiz-answers-summary li .summary-user-answer-text.user-incorrect .material-symbols-outlined { color: var(--quiz-incorrect-icon-color); }

#quiz-ranking-title { font-family: var(--font-heading); font-size: clamp(1.8em, 4vw, 2.5em); color: var(--accent-primary); margin-bottom: var(--spacing-sm); }

/* Page Overlay (used by quiz for loading message) */
#page-block-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    /* background-color is set dynamically by JS using theme vars */
    z-index: 2900; display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: opacity 0.3s ease-in-out;
}
#page-block-overlay.hidden { opacity: 0; pointer-events: none; }
#page-block-overlay p { 
    padding: var(--spacing-lg); background-color: var(--bg-elements); 
    border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); 
    font-size: 1.2em; color: var(--text-primary);
}

.back-to-guide-btn-container { position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); z-index: 1000; }

#main-content-wrapper { display: flex; flex-direction: column; flex-grow: 1; }
#quiz-main-area { flex-grow: 1; display: flex; flex-direction: column; }
#quiz-main-area > .content-section {
    flex-grow: 1;
    justify-content: center;
    width: 100%;
}
#quiz-start-screen > div,
#quiz-area > div,
#quiz-results-screen > div {
    width: 100%;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-md);
}

/* NEW: Powered By notice for Quiz Page, mimics copyright-notice */
.powered-by-quiz-notice {
    position: absolute; /* Relative to #app-container */
    top: calc(var(--header-height) + 10px); 
    right: var(--spacing-lg); 
    z-index: 999; /* Same as copyright-notice */
    font-size: 0.7em;
    white-space: nowrap;
    font-weight: 400;
    opacity: 0.8;
    color: var(--text-secondary); /* Explicitly set to ensure it's themed */
}
.powered-by-quiz-notice a {
    color: var(--text-secondary); /* Link color same as text */
    text-decoration: none;
}
.powered-by-quiz-notice a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}


.quiz-share-action-container {
    margin-top: var(--spacing-lg); 
    margin-bottom: var(--spacing-xxl); 
    display: flex; 
    justify-content: center;
}

#cookie-consent-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 500px;
    background-color: var(--bg-elements);
    color: var(--text-primary);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    z-index: 3001; 
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#cookie-consent-banner.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.95);
}
.cookie-consent-content { margin: 0 auto; text-align: center; }
.cookie-consent-content .cookie-title {
    font-family: var(--font-heading); font-size: 1.3em; font-weight: 600;
    color: var(--accent-primary); margin-bottom: var(--spacing-md);
}
.cookie-consent-content p {
    font-size: 1rem; line-height: 1.6; margin-bottom: var(--spacing-md);
}
.cookie-consent-content .cookie-details {
    font-size: 0.9rem; margin-top: var(--spacing-md); margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md); background-color: var(--bg-subsection);
    border-radius: var(--border-radius-md); text-align: left;
}
.cookie-consent-content .cookie-details ul {
    list-style-position: inside; padding-left: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}
.cookie-consent-content .cookie-details li { margin-bottom: var(--spacing-xs); }
.cookie-buttons {
    display: flex; justify-content: center; gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}
.button-large {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.1em;
    font-weight: 600;
}

/* Rank Icon Styles */
#quiz-rank-icon-container {
    text-align: center;
    margin-bottom: var(--spacing-md);
}
.rank-icon {
    font-size: clamp(4rem, 10vw, 6rem) !important; /* Responsive size */
    line-height: 1;
    display: inline-block;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Define quiz-specific color variables for answers and icons */
:root {
    /* Quiz-specific colors, default to dark theme values */
    --quiz-correct-color: #22c55e; /* green-500 */
    --quiz-incorrect-color: #ef4444; /* red-500 */
    --quiz-correct-icon-color: #22c55e;
    --quiz-incorrect-icon-color: #ef4444;
}

body.theme-light {
    --quiz-correct-color: #15803d; /* green-700 */
    --quiz-incorrect-color: #b91c1c; /* red-700 */
    --quiz-correct-icon-color: #15803d;
    --quiz-incorrect-icon-color: #b91c1c;
}
body.theme-sunset {
    --quiz-correct-color: #6EE7B7; /* green-200 */
    --quiz-incorrect-color: #FCA5A5; /* red-300 */
    --quiz-correct-icon-color: #6EE7B7;
    --quiz-incorrect-icon-color: #FCA5A5;
}
body.theme-empire {
    --quiz-correct-color: #22c55e;
    --quiz-incorrect-color: #ef4444;
    --quiz-correct-icon-color: #22c55e;
    --quiz-incorrect-icon-color: #ef4444;
}
body.theme-republic {
    --quiz-correct-color: #15803d;
    --quiz-incorrect-color: #b91c1c;
    --quiz-correct-icon-color: #15803d;
    --quiz-incorrect-icon-color: #b91c1c;
}
body.theme-sands-of-serenity {
    --quiz-correct-color: #4CAF50; /* Slightly desaturated green */
    --quiz-incorrect-color: #EF5350; /* Slightly desaturated red */
    --quiz-correct-icon-color: #4CAF50;
    --quiz-incorrect-icon-color: #EF5350;
}
body.theme-moonlit-marble {
    --quiz-correct-color: #4CAF50;
    --quiz-incorrect-color: #EF5350;
    --quiz-correct-icon-color: #4CAF50;
    --quiz-incorrect-icon-color: #EF5350;
}
body.theme-crystal-coral-reef {
    --quiz-correct-color: #4CAF50;
    --quiz-incorrect-color: #EF5350;
    --quiz-correct-icon-color: #4CAF50;
    --quiz-incorrect-icon-color: #EF5350;
}
body.theme-neon-frostbite {
    --quiz-correct-color: #00FF7F; /* Accent green */
    --quiz-incorrect-color: #FF66B2; /* Accent pink */
    --quiz-correct-icon-color: #00FF7F;
    --quiz-incorrect-icon-color: #FF66B2;
}
body.theme-cyber-twilight-glow {
    --quiz-correct-color: #00FF7F;
    --quiz-incorrect-color: #FF66B2;
    --quiz-correct-icon-color: #00FF7F;
    --quiz-incorrect-icon-color: #FF66B2;
}
body.theme-midnight-circuit-pulse {
    --quiz-correct-color: #00FF7F;
    --quiz-incorrect-color: #FF66B2;
    --quiz-correct-icon-color: #00FF7F;
    --quiz-incorrect-icon-color: #FF66B2;
}

/* F Rank */
.rank-icon-f { color: var(--text-secondary); animation-name: pulse-sad; }
@keyframes pulse-sad {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(0.95); opacity: 0.5; }
}
/* D Rank */
.rank-icon-d { color: var(--text-secondary); animation-name: pulse-neutral; }
@keyframes pulse-neutral {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(0.98); opacity: 0.7; }
}
/* C Rank */
.rank-icon-c { color: var(--accent-primary); animation-name: pulse-gentle; opacity: 0.7; }
@keyframes pulse-gentle {
    0%, 100% { transform: scale(1); filter: brightness(100%); }
    50% { transform: scale(1.02); filter: brightness(110%); }
}
/* B Rank */
.rank-icon-b { color: var(--accent-primary); animation-name: pulse-bright; }
@keyframes pulse-bright {
    0%, 100% { transform: scale(1); filter: brightness(100%) drop-shadow(0 0 3px color-mix(in srgb, var(--accent-primary) 30%, transparent)); }
    50% { transform: scale(1.05); filter: brightness(120%) drop-shadow(0 0 6px color-mix(in srgb, var(--accent-primary) 50%, transparent)); }
}
/* A Rank */
.rank-icon-a {
    color: var(--accent-secondary); /* Or a gold-like color */
    animation-name: pulse-glow-strong;
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent-secondary) 40%, transparent);
}
@keyframes pulse-glow-strong {
    0%, 100% { transform: scale(1); filter: brightness(110%) drop-shadow(0 0 5px color-mix(in srgb, var(--accent-secondary) 50%, transparent)); }
    50% { transform: scale(1.08); filter: brightness(130%) drop-shadow(0 0 10px color-mix(in srgb, var(--accent-secondary) 70%, transparent)); }
}
/* S Rank - Rainbow Shimmer */
.rank-icon-s {
    animation: rainbow-text-shadow-glow 3s linear infinite, pulse-super 1.5s ease-in-out infinite;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Text color is now transparent, showing the gradient */
    background-size: 200% auto; /* Make the gradient wider than the text to allow for movement */
}
@keyframes rainbow-text-shadow-glow {
    0% { background-position: 0% center; text-shadow: 0 0 10px #ff0000aa, 0 0 15px #ff7f00aa, 0 0 20px #ffff00aa; }
    16% { text-shadow: 0 0 10px #ff7f00aa, 0 0 15px #ffff00aa, 0 0 20px #00ff00aa; }
    33% { text-shadow: 0 0 10px #ffff00aa, 0 0 15px #00ff00aa, 0 0 20px #0000ffaa; }
    50% { background-position: 100% center; text-shadow: 0 0 10px #00ff00aa, 0 0 15px #0000ffaa, 0 0 20px #4b0082aa; }
    66% { text-shadow: 0 0 10px #0000ffaa, 0 0 15px #4b0082aa, 0 0 20px #ee82eeaa; }
    83% { text-shadow: 0 0 10px #4b0082aa, 0 0 15px #ee82eeaa, 0 0 20px #ff0000aa; }
    100% { background-position: 200% center; text-shadow: 0 0 10px #ee82eeaa, 0 0 15px #ff0000aa, 0 0 20px #ff7f00aa; }
}
@keyframes pulse-super {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(2deg); }
}

/* Responsive adjustments for quiz container - uses standard base.css vars */
@media (max-width: 768px) {
    .powered-by-quiz-notice { /* Responsive adjustments for the new notice */
        font-size: 0.65em;
        right: var(--spacing-md);
        top: calc(var(--header-height) + 6px);
    }
    #quiz-options-container {
        max-height: calc(100vh - var(--header-height) - 160px); /* Smaller header, less buffer */
    }
}