/*
 * Trivia Unlimited theme override.
 *
 * Loaded after base/css/index.css (see app_layout.hbs), so these :root token
 * values win over the base palette and reskin the shared base to Unlimited's
 * colours. Ported from deployment/mtc-unlimited's hardcoded hex, mapped onto
 * the base's semantic --color-* token names.
 *
 * Colours verified against the Zeplin designs (project MTC - Jackpot Trivia &
 * Trivia Unlimited): screens 7.1 Two Tier Pricing, 7.3 in-app upsell pop-up,
 * 8.1 Question Balance. Footer icon tile radius (27px) matches base, so no
 * shape override is needed there.
 *
 * Buttons DO need a structural override: base's `.button` is fan-cup's flat
 * gradient/glow pill, which tokens alone can't reskin. See the Button section
 * below, ported from deployment/mtc-unlimited's actual button.css.
 *
 * --color-bg-primary remains a best-guess: the designs show no dark surface
 * (modal backdrop is navy), so the base "dark primary" role has no Unlimited
 * equivalent — mapped to brand blue.
 */

:root {
    /* Primary surfaces */
    --color-bg-primary: #2495d2;   /* best-guess: unlimited has no dark surface */
    --color-bg-secondary: #e3f2fe; /* card tint — verified from Zeplin */
    --color-bg-surface: #ffffff;

    /* Brand blues */
    --color-brand-primary: #2495d2;
    --color-brand-primary-dark: #00629a;
    --color-brand-navy: #012c59;

    /* Text */
    --color-text-primary: #012c59;
    --color-text-secondary: #00629a;
    --color-text-muted: #979797;   /* "Maybe Later" grey — verified from Zeplin */
    --color-text-inverse-primary: #ffffff;

    /* Buttons */
    --color-button-primary-bg: #2495d2;
    --color-button-primary-border: #2495d2;
    --color-button-primary-text: #ffffff;
    --color-button-primary-disabled-bg: #98d3f3;
    --color-button-primary-disabled-border: #98d3f3;

    --color-button-outline-bg: #ffffff;
    --color-button-outline-border: #007ac0;
    --color-button-outline-text: #00629a;

    --color-button-correct-bg: #00bf8e;
    --color-button-correct-border: #00bf8e;
    --color-button-incorrect-bg: #ff4040;
    --color-button-incorrect-border: #ff4040;

    /* Accents */
    --color-accent-link: #2495d2;
    --color-accent-correct: #20daaa;
    --color-accent-incorrect: #ff4040;

    /* Main copy */
    --color-text-main: #012c59;
}

/*
 * Component overrides — Unlimited specifics that tokens can't express.
 * Scoped to this theme's stylesheet, so fan-cup is unaffected.
 */

/* Question Balance VIP banner (screen 8.1): brand-blue panel with a
 * teal/cyan "Upgrade to VIP" CTA. Base's `.allocation-vip-banner-bg` renders
 * public/themes/unlimited/images/vip_card_bg.png here (theme-first static
 * asset resolution overrides base's own purple-toned vip_card_bg.png) — no
 * layout override needed, only the CTA button's colour. */
.allocation-vip-banner .button {
    background: linear-gradient(101deg, #24bed2, #77cfff);
    border: none;
    color: var(--color-brand-navy);
}

/* Buttons: replace fan-cup's gradient/glow pill with Unlimited's flat one.
 * `.button`, `.button--secondary`, and `.button--tertiary` all render as the
 * same solid pill on deployment/mtc-unlimited (its `.button--primary-solid`)
 * — confirmed by diffing every shared view against deployment/mtc-fan-cup.
 *
 * `:not(:where(.button--correct, .button--incorrect))` guards play_success.hbs's
 * combined `button--secondary button--correct`/`button--incorrect` answer
 * states, which already consume tokens correctly in base. `:where()` keeps
 * the guard at zero specificity, so these selectors stay at their original
 * one/two-class weight — otherwise this block, loaded after base, would win
 * the cascade outright and paint correct/incorrect answers blue, and would
 * also outrank (and break) the .allocation-vip-banner .button override above. */
.button:not(:where(.button--correct, .button--incorrect)),
.button.button--secondary:not(:where(.button--correct, .button--incorrect)),
.button.button--tertiary:not(:where(.button--correct, .button--incorrect)) {
    border-radius: 20px;
    border: 2px solid var(--color-button-primary-border);
    background: var(--color-button-primary-bg);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    color: var(--color-button-primary-text);
}

.button > span {
    text-shadow: none;
}

.button:disabled:not(:where(.button--correct, .button--incorrect)),
.button.button--secondary:disabled:not(:where(.button--correct, .button--incorrect)),
.button.button--tertiary:disabled:not(:where(.button--correct, .button--incorrect)) {
    border-color: var(--color-button-primary-disabled-border);
    background: var(--color-button-primary-disabled-bg);
}

.button.button--play {
    border-radius: 20px;
    border: 2px solid var(--color-button-primary-border);
    background: var(--color-button-primary-bg);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    color: var(--color-button-primary-text);
    padding: 0 25px;
    width: 75%;
}

.button.button--play.extended-width {
    width: 245px;
}

/* Secondary/outline button (categories.hbs: "Or Play Random!" and the "?"
 * random-category button): white pill, blue border/text, distinct from the
 * flat primary pill above. Ported from deployment/mtc-unlimited's actual
 * `.button` base rule — there, the unmodified `.button` (used with
 * `button--secondary` on "Or Play Random!") already renders this way with no
 * override needed. `--color-button-outline-*` tokens were already declared
 * for this in :root above but never wired to a CSS rule until now.
 *
 * This can't reuse `.button--secondary` directly: that class is also used on
 * base/play.hbs's quiz-answer buttons, which need to match the flat primary
 * pill (confirmed against deployment/mtc-unlimited's play.hbs, which uses
 * `button--primary-solid` for the same answer buttons) — so `--secondary`
 * stays flattened above, and this new `--outline` modifier is applied only
 * where the categories page templates opt into it. */
.button.button--outline {
    border: 2px solid var(--color-button-outline-border);
    background: var(--color-button-outline-bg);
    box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.2);
    color: var(--color-button-outline-text);
}

.button.button--outline > span {
    text-shadow: none;
}

/* Footer nav (screen 6.1/4.1): views/themes/unlimited/partials/app_footer.hbs
 * overrides the base partial to match deployment/mtc-unlimited's actual
 * footer exactly — Profile + Prizes only (no Home/Leaderboard link; the
 * latter doesn't exist as a feature in unlimited), bare <img> icons with no
 * `.button` pill wrapper, using the theme's own footer_nav_*.png assets. This
 * rule sizes those bare icons the way unlimited's own footer.css does. */
.footer-icon-link > img {
    width: 100%;
    height: auto;
}

/* Footer legal links/copyright (screen "7.1 - MTC_SmartBucks - Q.Text",
 * https://zpl.io/ykdWnro): "How to play"/"Subscription T&Cs" pixel-sample to
 * #98d3f3 (pale blue), "Copyright." to an even paler #ceeeff. Base's
 * `.footer-link`/`.footer-separator` use `--color-text-muted` (#979797 grey)
 * and `.footer-copy` uses `--color-text-primary` (navy) — both wrong here.
 * Not mapped onto an existing token: `--color-text-muted` is already the
 * verified "Maybe Later" grey for a different role, and repurposing it would
 * repeat the same shared-token-two-roles mistake fixed above for
 * `body--primary-tint`/`.menu-overlay`. Values ported exactly from
 * deployment/mtc-unlimited's own (shipped) footer.css. */
.footer-link,
.footer-separator {
    color: #98d3f3;
}

.footer-copy {
    color: #ceeeff;
}

/* Menu-drawer overlay backdrop (screen "3 - MTC_SmartBucks - Menu",
 * https://zpl.io/dxLNJ0n): pixel-samples to #2495d2, MTC's own brand blue,
 * already `--color-bg-primary` in this theme's tokens above.
 *
 * `body--primary-tint` gets the same treatment: it's shared by two different
 * base layouts — play_layout.hbs (the question screen) and modal_layout.hbs
 * (categories, welcome, menu, services, vip_upsell, content_upsell) — but on
 * deployment/mtc-unlimited's own CSS they were never the same colour:
 * play_layout there is the only view that gets the class at all
 * (`body.body--primary-tint { background: #eaf8ff }` in its index.css);
 * every modal_layout screen renders with no body class, i.e. the page
 * default of vivid brand blue. An earlier pass here pixel-sampled screen
 * "7.1 - MTC_SmartBucks - Q.Text" (a play screen, https://zpl.io/ykdWnro)
 * and applied its #eaf8ff to `body--primary-tint` as a whole, which washed
 * out every modal_layout screen too — visible on categories, where base's
 * `.modal-heading` is white (correct against the vivid default, invisible
 * against #eaf8ff). Base's own default for this class is
 * `--color-bg-secondary` (the pale card tint) — also wrong for
 * modal_layout screens — so both selectors below share this theme's vivid
 * brand blue; the play-only pale tint moves to `.play-layout` below,
 * scoped to the one view it was actually sampled from. */
.menu-overlay,
body.body--primary-tint {
    background: var(--color-bg-primary);
}

/* Question screen background ("7.1 - MTC_SmartBucks - Q.Text",
 * https://zpl.io/ykdWnro): pixel-samples to #eaf8ff, matching
 * deployment/mtc-unlimited's own play-only `body.body--primary-tint` value.
 * Scoped to `.play-layout` (play_layout.hbs's content wrapper) rather than
 * the `body--primary-tint` class itself, since that class is also shared by
 * every modal_layout screen — see comment above. */
.play-layout {
    background: #eaf8ff;
}

/* Menu close icon (screen 3): views/themes/unlimited/partials/menu.hbs drops
 * `.button` from the close control, matching deployment/mtc-unlimited's own
 * menu.hbs exactly (a bare `.modal-icon-link`, no pill). Base's
 * `.modal-icon-link > img` sizes the icon at 50% width, assuming the padding
 * a `.button` pill would add — without that pill, unlimited's own modal.css
 * sizes the same icon at 100% instead.
 *
 * Unlimited's own close control is an `<a>`; ours is a `<button>` (kept for
 * its existing aria-label/JS-toggle wiring — not a theming concern). Without
 * `.button`'s reset, the bare `<button class="modal-icon-link">` now shows
 * the browser's native button chrome (box, border, background), which is
 * what showed up as a grey box around the close icon — reset it here. */
.modal-icon-link {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
}

.modal-icon-link > img {
    width: 100%;
}

/* Welcome scroll chevrons (screen "Trivia Unlimited" welcome flow):
 * views/themes/unlimited/welcome.hbs swaps `button welcome-modal-icon-button`
 * for bare `.modal-icon-button`, matching deployment/mtc-unlimited's own
 * welcome.hbs — that class already has no background/border in base (it was
 * simply unused until now), so no colour override is needed, only sizing for
 * the icon now that it's not wrapped in the `<span>` the base CSS's
 * `.modal-icon-button > span > img` rule expects. */
.modal-icon-button > img {
    height: auto;
    width: 100%;
}

/* Welcome "Skip" link (screen "Trivia Unlimited" welcome flow): base's
 * `.welcome-link` uses `--color-text-primary` (navy), which is low-contrast
 * against the full-screen blue backdrop set above (`body--primary-tint` →
 * `--color-bg-primary`). Zeplin's welcome screens show "Skip" in white. */
.welcome-link {
    color: var(--color-text-inverse-primary);
}

/* Prize cards ("6.1 Prizes_Extension", the "TRIVIA UNLIMITED"-branded
 * screen — the only prize tier Unlimited actually has is the single yellow
 * "Daily Prize" card, locked or not) with a small pill-shaped title badge on
 * top, rather than base's full-width header bar sharing the card's own
 * background colour.
 *
 * Every value below is ported exactly from deployment/mtc-unlimited's own
 * (shipped) prize-card.css — `.prize-card` and `.prize-card h3` there — not
 * from a Zeplin export; an earlier pass here used Zeplin dev-mode CSS values
 * (a 346deg gradient, a near-invisible 0.04-alpha shadow, a translucent navy
 * pill) that looked visibly wrong once rendered, and the deployment branch
 * turned out to still be the more reliable source, consistent with how the
 * button/menu/footer overrides above were done. Since Unlimited only ever
 * shows this one tier, views/themes/unlimited/partials/prize_list.hbs drops
 * the API's `meta.colorVariant` inline background entirely (that field
 * exists for fan-cup's multi-tier prizes, which Unlimited has no equivalent
 * of) in favour of this fixed gradient. */
 .prize-card {
    background-image: linear-gradient(to top, #ffde00, #ff8e00);
    border-radius: 15px;
    box-shadow: 2px 2px 14px 5px rgba(255, 174, 0, 0.6);
    /* Without its own block formatting context, .prize-card-inner's top
     * margin below collapses with this element's own margin instead of
     * creating space inside it — `overflow: hidden` would fix that too, but
     * would also clip base's .prize-card-vip-icon, which sits at
     * top: -15px; left: -15px so it can peek out over the corner. */
    display: flow-root;
}

.prize-card-inner {
    background-image: linear-gradient(to top, #ffee00, #ff8e00);
    box-shadow: 0 11px 17px 0 rgba(83, 0, 160, 0.04);
    border-radius: 15px;
    margin: 8px;
}

.prize-card-header {
    background: #ffca00;
    border-radius: 10px;
    margin: 5px auto 0;
    min-height: auto;
    min-width: 120px;
    padding: 3px 10px;
    width: fit-content;
}

.prize-card-header h2 {
    align-items: center;
    color: #494949;
    display: flex;
    font-size: 10px;
    justify-content: space-between;
    line-height: 1;
    white-space: nowrap;
    width: 100%;
}

.prize-card-header h2 img {
    height: auto;
    margin: 0 5px;
    width: 6px;
}

/* Old branch's value text uses a warm glow (`#ffa200`) that blends into the
 * gold/orange gradient above; base's `.prize-card-copy` text-shadow is a
 * navy tone meant for fan-cup's cooler cards and reads muddy here. */
.prize-card-copy {
    text-shadow: 0 0 7px #ffa200;
}

/* No prize screen in Zeplin ever shows a background image on a prize card —
 * "6.1 Prizes_Extension" (the "TRIVIA UNLIMITED"-branded screen, the
 * authoritative one) has a single flat "Daily Prize" card, same as every
 * other prize screen and deployment/mtc-unlimited's own prize-card.css
 * (which has no image concept at all). The shared/staging API can still
 * return a `meta.prizeImage` for a prize entry regardless (seen live — a
 * leftover fan-cup-style photo behind the Daily Prize card), so force it off
 * here rather than relying on the API never sending one. */
.prize-card-image {
    display: none;
}

/* Locked prizes (VIP-gated, e.g. Daily Prize before joining VIP): base defines the
 * `.is-locked` class hook on the markup already but has no styling for it at
 * all yet, anywhere — this screen shows the same card washed out under the
 * lock icon. Scoped to this theme only, since fan-cup has no locked-prize
 * design to match yet. Positioned above the header/content (z-index 3) but
 * still inside `.prize-card-inner`, so the VIP badge and lock icon — both
 * siblings outside it — stay fully visible on top, matching the screen. */
.prize-card.is-locked .prize-card-inner::after {
    background: rgba(255, 255, 255, 0.35);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 3;
}

/* Header question-count badge (home page header): base's `.header-badge`
 * is a glossy radial-gradient sphere (light cyan to deep blue) with a drop
 * shadow, but this theme's other header icons — header_menu.png and
 * header_profile.png — render as flat solid brand-blue circles with no
 * shine. Flatten the badge to the same solid fill so it reads as part of
 * the same icon set instead of a mismatched sphere. */
.header-badge {
    background: var(--color-brand-primary);
    box-shadow: none;
    color: var(--color-text-inverse-primary);
    min-width: 28px;
    height: 28px;
}

/* Header "Points" label (screen "7.1 - MTC_SmartBucks - Q.Text",
 * https://zpl.io/ykdWnro): pixel-samples to #00629a. Base's `.header-copy`
 * sets `color: inherit`, picking up `.header-nav`'s dark grey (#323232) —
 * matches deployment/mtc-unlimited's own header.css, which set `.header-copy`
 * to this same blue directly. The points *value* span keeps base's
 * `#231f20` (unchanged, matches both the old branch and this screen). */
.header-copy {
    color: var(--color-text-secondary);
}

/* Play-page copy (screen "7.1 - MTC_SmartBucks - Q.Text",
 * https://zpl.io/ykdWnro). Base's `.play-paragraph` (question text) uses
 * `--color-text-inverse-primary` (white) — invisible against this theme's
 * pale `.play-layout` background above; the screen samples it at #012c59,
 * matching deployment/mtc-unlimited's own `.play-paragraph` exactly. */
.play-paragraph {
    color: var(--color-text-primary);
}

/* Category name / "Bonus Q" (`.play-title`, paired with the
 * `heading-2 heading-2--secondary` classes already in base's typography.css
 * for the colour/weight/size — `--secondary` already gives
 * `var(--color-text-secondary)`, #00629a, matching this screen and
 * deployment/mtc-unlimited's own `.play-title` colour exactly). Only the
 * alignment needs a theme rule: `heading-2--secondary` sets
 * `text-align: inherit`, but this screen shows the category name left-
 * aligned, same as the old branch's `.play-title { text-align: left !important; }`. */
.play-title {
    text-align: left;
}