/* Quiz themes (PLAN.md 8.5). Used by the big screen, the participant client and admin previews. */

.theme-classic {
    --q-bg: #46178F;
    --q-surface: #5B2BA6;
    --q-text: #FFFFFF;
    --q-accent: #FFC93C;
    --q-on-accent: #1C1E21;
}

.theme-night {
    --q-bg: #0B1020;
    --q-surface: #141B33;
    --q-text: #E8ECF8;
    --q-accent: #22D3EE;
    --q-on-accent: #0B1020;
}

.theme-forest {
    --q-bg: #14432A;
    --q-surface: #1D5C3A;
    --q-text: #F4F1E6;
    --q-accent: #F2C14E;
    --q-on-accent: #14432A;
}

.theme-sunset {
    --q-bg: linear-gradient(135deg, #FF7A18, #FF3D7F);
    --q-surface: rgba(255, 255, 255, .15);
    --q-text: #FFFFFF;
    --q-accent: #2B1055;
    --q-on-accent: #FFFFFF;
}

.theme-light {
    --q-bg: #F5F6F8;
    --q-surface: #FFFFFF;
    --q-text: #1C1E21;
    --q-accent: #3D5AFE;
    --q-on-accent: #FFFFFF;
}

/* Stian 50: black, gold and a starry sky, after 50.stian.net. */
.theme-stian50 {
    /* One star per layer on large, prime-sized tiles: many layers give a random-looking sky without visible rows. */
    --q-bg:
        radial-gradient(1.5px 1.5px at 23px 31px, rgba(245, 230, 168, .9) 50%, transparent 60%) 0 0 / 263px 251px,
        radial-gradient(1px 1px at 197px 113px, rgba(244, 241, 234, .7) 50%, transparent 60%) 0 0 / 281px 307px,
        radial-gradient(1.2px 1.2px at 151px 247px, rgba(212, 175, 55, .85) 50%, transparent 60%) 0 0 / 317px 293px,
        radial-gradient(1px 1px at 61px 179px, rgba(244, 241, 234, .55) 50%, transparent 60%) 0 0 / 331px 347px,
        radial-gradient(.9px .9px at 271px 89px, rgba(245, 230, 168, .6) 50%, transparent 60%) 0 0 / 353px 337px,
        radial-gradient(1.2px 1.2px at 37px 301px, rgba(244, 241, 234, .65) 50%, transparent 60%) 0 0 / 389px 373px,
        radial-gradient(1.8px 1.8px at 283px 157px, rgba(245, 230, 168, .8) 50%, transparent 60%) 0 0 / 449px 421px,
        radial-gradient(.9px .9px at 131px 17px, rgba(244, 241, 234, .5) 50%, transparent 60%) 0 0 / 293px 379px,
        radial-gradient(1.1px 1.1px at 349px 271px, rgba(212, 175, 55, .7) 50%, transparent 60%) 0 0 / 401px 431px,
        radial-gradient(1px 1px at 97px 389px, rgba(244, 241, 234, .6) 50%, transparent 60%) 0 0 / 457px 409px,
        radial-gradient(1.3px 1.3px at 419px 53px, rgba(245, 230, 168, .7) 50%, transparent 60%) 0 0 / 487px 463px,
        radial-gradient(.8px .8px at 227px 331px, rgba(244, 241, 234, .45) 50%, transparent 60%) 0 0 / 367px 397px,
        radial-gradient(ellipse at 50% 0%, #1B1B23 0%, #121218 35%, #07070A 75%);
    --q-surface: rgba(27, 27, 35, .88);
    --q-text: #F4F1EA;
    --q-muted: #9A968C;
    --q-accent: #D4AF37;
    --q-on-accent: #07070A;
    --q-accent-fill: linear-gradient(135deg, #FFF6D2 0%, #F5E6A8 18%, #D4AF37 46%, #8A6B1F 78%, #C9A13A 100%);
    --q-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    background-color: #07070A;
}

.theme-classic, .theme-night, .theme-forest, .theme-sunset, .theme-light {
    --q-muted: color-mix(in srgb, var(--q-text) 70%, transparent);
}

/* Filled accent surfaces (buttons, banners, the winner's podium). Themes may use a gradient here. */
.theme-classic, .theme-night, .theme-forest, .theme-sunset, .theme-light {
    --q-accent-fill: var(--q-accent);
}

.quiz-themed {
    background: var(--q-bg);
    color: var(--q-text);
}

/* Answer colours, shared by all themes (PLAN.md 8.4). True/false uses slot 1 for "Sant" and slot 0 for "Usant". */

.answer-0 {
    --answer-bg: #D7263D;
    --answer-text: #FFFFFF;
}

.answer-1 {
    --answer-bg: #1B6EC2;
    --answer-text: #FFFFFF;
}

.answer-2 {
    --answer-bg: #E0A100;
    --answer-text: #1C1E21;
}

.answer-3 {
    --answer-bg: #2E8B3E;
    --answer-text: #FFFFFF;
}

.answer-color {
    background: var(--answer-bg);
    color: var(--answer-text);
}

/* ---- Stian 50 flourishes: elegant italic serif headings in gold, thin gold lines on surfaces. ---- */

.theme-stian50 :is(.screen-heading, .screen-question, .screen-title, .podium-name, .play-brand, .play-title, .play-question, .play-big, .preview-text) {
    font-family: var(--q-font-display);
    font-style: italic;
}

.theme-stian50 :is(.screen-heading, .play-brand, .play-big, .podium-place-1 .podium-name) {
    background: linear-gradient(180deg, #FFF6D2 0%, #F5E6A8 30%, #D4AF37 62%, #A9852A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.theme-stian50 :is(.screen-name, .screen-ranking li, .podium-block, .play-progress, .screen-header, .screen-controls) {
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .22);
}

.theme-stian50 :is(.play-button, .screen-double, .play-double) {
    box-shadow: 0 0 32px rgba(212, 175, 55, .28);
}