/* Game Theme only. Palette: roomplay-palettes.html / Quiz; shared flows unchanged. */
:root {
    /* Answer and gender tones: COMMON/roomplay-palettes.html / quiz (correct, wrong, male, female). */
    --rp-correct: #30c883;
    --rp-correct-ink: #17191f;
    --rp-wrong: #fe7b90;
    --rp-wrong-ink: #17191f;
    --rp-male: #63b0fc;
    --rp-female: #f77cb0;
    --bg-primary: #100f36;
    --bg-secondary: #211759;
    --bg-card: #100f36;
    --quiz-line: rgb(255 255 255 / 16%);
    --accent-purple: #6640ba;
    --accent-purple-dark: #6640ba;
    --accent-primary: #6640ba;
    --accent-blue: #6640ba;
    --quiz-gold: #d5ae58;
    --text-primary: #fff;
    --text-secondary: #d6cfe8;
    --text-placeholder: #b9afd1;
    --onboarding-accent: #6640ba;
    --onboarding-accent-dark: #6640ba;
    --onboarding-shadow: transparent;
    --onboarding-shadow-hover: transparent;
    --settings-accent: #6640ba;
    --settings-accent-dark: #6640ba;
}
body[data-rp-game="quiz"] { font-family: var(--font-body); }
[data-rp-game="quiz"] .title, [data-rp-game="quiz"] .slide-title { font-family: var(--font-display); }
body[data-rp-game="quiz"], .page-loader { background: var(--bg-primary); }
[data-rp-game="quiz"] .title,
[data-rp-game="quiz"] .slide-title { color: var(--text-primary); font-weight: 800; letter-spacing: -.035em; }
[data-rp-game="quiz"] .btn-play,
[data-rp-game="quiz"] .btn-next-slide {
    background: var(--accent-purple); border: 1px solid transparent; box-shadow: none;
}
[data-rp-game="quiz"] .btn-back {
    background: none; border: none; color: var(--text-primary);
    min-width: 48px; min-height: 48px;
}
[data-rp-game="quiz"] .slide-icon {
    width: min(240px, 55vw); height: auto; margin-bottom: 18px; line-height: 0;
}
.slide-icon picture { display: block; }
.slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="quiz"] .slide-text { color: var(--text-secondary); }
[data-rp-game="quiz"] .dot { background: rgb(255 255 255 / 30%); }
[data-rp-game="quiz"] .dot.active { background: var(--quiz-gold); }
[data-rp-game="quiz"] .btn-skip { color: var(--text-secondary); min-height: 48px; }
[data-rp-game="quiz"] .packs-illustrated-grid .pack-card {
    border-color: var(--quiz-line); background: var(--bg-primary); box-shadow: none; border-radius: 18px;
}
[data-rp-game="quiz"] .packs-illustrated-grid .pack-card.selected { border-color: var(--accent-purple); background: var(--bg-secondary); box-shadow: none; }
[data-rp-game="quiz"] .packs-illustrated-grid .pack-art { height: 72%; object-fit: contain; padding: 8px 12px 0; box-sizing: border-box; }
/* Flat blob-scene covers are full-bleed squares drawn on the quiz background; the name sits on their empty lower band. */
[data-rp-game="quiz"] .packs-illustrated-grid .pack-card--flat-art .pack-art { height: 100%; object-fit: cover; padding: 0; }
[data-rp-game="quiz"] .packs-illustrated-grid .pack-card--flat-art .pack-art-shade { background: linear-gradient(180deg, rgba(16, 15, 54, 0) 55%, rgba(16, 15, 54, .8) 100%); }
[data-rp-game="quiz"] .packs-illustrated-grid .pack-card--flat-art .pack-copy { text-shadow: 0 2px 8px rgba(0, 0, 0, .85); }
[data-rp-game="quiz"] .pack-art-shade { background: none; }
[data-rp-game="quiz"] .pack-copy { text-shadow: none; }
[data-rp-game="quiz"] .pack-count { color: var(--text-secondary); }
[data-rp-game="quiz"] .btn-additional-settings { color: var(--text-primary); border-color: rgba(255, 255, 255, .75); }
[data-rp-game="quiz"] .quiz-option { border-color: var(--quiz-line); border-radius: 16px; min-height: 56px; }
[data-rp-game="quiz"] .quiz-option.selected { background: #392570; border-color: var(--quiz-gold); }
[data-rp-game="quiz"] .quiz-option.correct { border-color: var(--rp-correct); background: color-mix(in srgb, var(--rp-correct) 16%, var(--bg-primary)); }
[data-rp-game="quiz"] .quiz-option.wrong { border-color: var(--rp-wrong); background: color-mix(in srgb, var(--rp-wrong) 18%, var(--bg-primary)); }
[data-rp-game="quiz"] .option-letter { background: var(--accent-purple); }
[data-rp-game="quiz"] .timer-badge:not(.warning) { color: var(--quiz-gold); border: 1px solid var(--quiz-gold); background: var(--bg-card); }
/* Exit confirmation and settings popups: colours go through the shared --rp-dialog-* tokens
   (assets/css/confirm-dialog.css); the toggle text keeps its stock colour. */
[data-rp-game="quiz"] {
    --rp-dialog-overlay: var(--quiz-overlay, rgb(16 15 54 / 88%));
    --rp-dialog-bg: var(--bg-secondary);
    --rp-dialog-border: 1px solid var(--quiz-line);
    --rp-dialog-text: var(--text-secondary);
    --rp-dialog-primary-bg: var(--accent-purple);
    --rp-dialog-secondary-border: var(--quiz-line);
    --rp-dialog-secondary-text: var(--text-primary);
    --rp-dialog-control-btn-bg: var(--accent-purple);
    --rp-dialog-control-btn-active: var(--accent-purple);
}
[data-rp-game="quiz"] .confirm-dialog-modal,
[data-rp-game="quiz"] .settings-popup-modal { max-height: calc(100dvh - 48px); overflow-y: auto; }
[data-rp-game="quiz"] .confirm-dialog-title,
[data-rp-game="quiz"] .settings-popup-title { font-weight: 800; letter-spacing: -.025em; }
[data-rp-game="quiz"] .confirm-dialog-subtitle,
[data-rp-game="quiz"] .settings-popup-label { font-size: 16px; overflow-wrap: anywhere; }
[data-rp-game="quiz"] .confirm-dialog-btn { min-height: 48px; }
[data-rp-game="quiz"] .confirm-dialog-btn-confirm,
[data-rp-game="quiz"] .settings-popup-done { border: 1px solid transparent; }
[data-rp-game="quiz"] .settings-popup-btn { width: 48px; height: 48px; }
[data-rp-game="quiz"] .settings-popup-row { flex-wrap: wrap; }
[data-rp-game="quiz"] .connection-overlay { background: var(--bg-primary); }
/* One-shot motion only: never delay readiness, answers or modal dismissal. */
@keyframes quiz-art-arrive {
    from { opacity: 0; transform: translateY(calc(10px * var(--rp-motion-artwork-intensity, 1))) scale(calc(1 - .06 * var(--rp-motion-artwork-intensity, 1))) rotate(calc(-3deg * var(--rp-motion-artwork-intensity, 1))); }
    to { opacity: 1; transform: none; }
}
@keyframes quiz-dialog-arrive {
    from { opacity: 0; transform: translateY(calc(8px * var(--rp-motion-dialog-intensity, 1))) scale(calc(1 - .02 * var(--rp-motion-dialog-intensity, 1))); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    [data-rp-game="quiz"] .onboarding-slide.active .slide-icon img {
        animation: quiz-art-arrive 300ms cubic-bezier(.2, .8, .2, 1) both;
    }
    [data-rp-game="quiz"] .confirm-dialog-overlay.active .confirm-dialog-modal,
    [data-rp-game="quiz"] .settings-popup-overlay.active .settings-popup-modal {
        animation: quiz-dialog-arrive 200ms cubic-bezier(.2, .8, .2, 1) both;
    }
    [data-rp-game="quiz"] :is(.btn-play, .btn-next-slide, .btn-skip, .btn-back,
        .btn-additional-settings, .confirm-dialog-btn, .settings-popup-btn, .settings-popup-done) {
        transition: transform 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
    }
    [data-rp-game="quiz"] :is(.btn-play, .btn-next-slide, .btn-skip, .btn-back,
        .btn-additional-settings, .confirm-dialog-btn, .settings-popup-btn, .settings-popup-done):active:not(:disabled) {
        transform: scale(.97);
    }
    /* Reuse the shared selection feedback instead of stacking another animation. */
    [data-rp-game="quiz"] .pack-card.packs-touch-pop,
    [data-rp-game="quiz"] .pack-card.packs-touch-pop .pack-art { animation-duration: 300ms; }
}
@media (prefers-reduced-motion: reduce) {
    /* Override the shared illustrated-pack WebView exception for this theme. */
    [data-rp-game="quiz"] .packs-illustrated-grid .pack-card,
    [data-rp-game="quiz"] .packs-illustrated-grid .pack-card .pack-art {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}
@media (max-height: 600px) {
    [data-rp-game="quiz"] .onboarding-container { overflow-y: auto; padding-top: 48px; }
    [data-rp-game="quiz"] .onboarding-slides { flex: 0 0 auto; padding-top: 0; }
    [data-rp-game="quiz"] .slide-icon { width: 120px; margin-bottom: 8px; }
    [data-rp-game="quiz"] .onboarding-buttons { flex-shrink: 0; }
}

/* Quiet surfaces; gold marks a choice instead of framing every control. */
[data-rp-game="quiz"] .packs-illustrated-grid .pack-card:not(.selected):hover { border-color: var(--quiz-line); box-shadow: none; }
[data-rp-game="quiz"] .packs-illustrated-grid .pack-count { font-size: 12px; line-height: 1.3; }
[data-rp-game="quiz"] :is(button, .pack-card):focus-visible { outline: 2px solid var(--quiz-gold); outline-offset: 3px; }

/* Pack choice arrow: COMMON/roomplay-palettes.html / quiz secondary #D5AE58 (the accent is too dark for the ink outline). */
:root {
    --packs-cue-color: #D5AE58;
}

/* Like / dislike under the question (shared content-report.css), shown after this phone answers. */
:root {
    --rp-report-text: #fff;
    --rp-report-muted: var(--text-secondary);
    --rp-report-accent: var(--quiz-gold);
    --rp-report-accent-ink: #17191f;
}
.quiz-card-vote { margin-top: 10px; }
.quiz-card-vote .rp-card-vote__btn { color: rgb(214 207 232 / 70%); }
.quiz-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--quiz-gold); }

/* «Сообщить об ошибке» sheet (shared content-report.css) in this game's palette (roomplay-palettes.html). */
:root {
  --rp-report-surface: #211759;
  --rp-report-text: #ffffff;
  --rp-report-muted: #d6cfe8;
  --rp-report-line: rgb(255 255 255 / 16%);
  --rp-report-chip: rgb(255 255 255 / 8%);
  --rp-report-accent: #6640ba;
  --rp-report-accent-ink: #ffffff;
}

/* Like/dislike + report row on the round's answer reveal: moved into the reveal's first screen
   (main.ts), held at its bottom, and leaves together with it when the leaderboard comes in. */
.rr-screen1 > .quiz-card-vote:not([hidden]) {
    position: sticky; bottom: 0; margin-top: auto; padding-top: 12px;
    display: flex; justify-content: center;
}