/*
 * Normative owner for the unified Rewards product surface and semantic
 * product themes. The root attribute owns the entire product palette; pages
 * consume aliases only and never install their own theme values. It does not
 * own live-game rendering.
 */

/*
 * Last landed kumalak.
 *
 * Two tokens per theme own the whole treatment: a thin rim and a restrained
 * halo. Nothing else may write a raw colour for this state. The rim is what
 * stays readable against a dense stack of black kumalaks; the halo only
 * separates it from its neighbours. Deliberately no size change, no extra
 * element and no dot: the kumalak already on the board carries it.
 */
html[data-theme="charcoal-gold"] {
    --last-landed-ring: rgba(232, 188, 108, 0.92);
    --last-landed-glow: rgba(212, 162, 76, 0.34);
    --product-bg: #100b07;
    --surface-1: #1a120b;
    --surface-2: #24180e;
    --surface-raised: #302114;
    --border-subtle: rgba(245, 226, 192, 0.14);
    --text-primary: #f5ebd8;
    --text-secondary: #c8b894;
    --accent: #d4a24c;
    --accent-hover: #e8bc6c;
    --success: #7ca655;
    --danger: #c44b4b;
}

html[data-theme="midnight-blue"] {
    /* Cool steel rather than gold: on the blue canvas a gold rim reads as
     * an unrelated accent instead of "this kumalak just landed". */
    --last-landed-ring: rgba(176, 205, 244, 0.92);
    --last-landed-glow: rgba(126, 166, 218, 0.32);
    --product-bg: #0a1425;
    --surface-1: #101e34;
    --surface-2: #152843;
    --surface-raised: #1b3150;
    --border-subtle: rgba(205, 220, 244, 0.16);
    --text-primary: #edf4ff;
    --text-secondary: #b1c0d8;
    --accent: #b9a66d;
    --accent-hover: #d7c488;
    --success: #75b29d;
    --danger: #dd8285;
}

html[data-theme="warm-graphite"] {
    /* Warm bronze, a shade cooler than the theme accent so the ring stays
     * distinguishable from an accented control behind the board. */
    --last-landed-ring: rgba(226, 181, 132, 0.92);
    --last-landed-glow: rgba(187, 138, 82, 0.32);
    --product-bg: #171716;
    --surface-1: #22211f;
    --surface-2: #2a2926;
    --surface-raised: #34312d;
    --border-subtle: rgba(222, 211, 193, 0.14);
    --text-primary: #f3f0ea;
    --text-secondary: #bbb3a8;
    --accent: #bb8a52;
    --accent-hover: #d2a56e;
    --success: #80aa87;
    --danger: #ce8075;
}

html[data-theme] {
    color-scheme: dark;
    --tp-product-canvas: var(--product-bg);
    --tp-product-surface: var(--surface-1);
    --tp-product-surface-raised: var(--surface-2);
    --tp-product-surface-soft: var(--surface-raised);
    --tp-product-border: var(--border-subtle);
    --tp-product-border-strong: color-mix(in srgb, var(--border-subtle) 72%, var(--text-primary));
    --tp-product-text: var(--text-primary);
    --tp-product-muted: var(--text-secondary);
    --tp-product-subtle: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    --tp-product-gold: var(--accent);
    --tp-product-gold-hover: var(--accent-hover);
    --tp-product-gold-ink: #17120a;
    --tp-product-success: var(--success);
    --tp-product-danger: var(--danger);
    --tp-product-shadow: 0 20px 54px rgba(0, 0, 0, 0.28);
    --tp-color-page: var(--product-bg);
    --tp-color-header: var(--surface-1);
    --tp-color-surface: var(--surface-1);
    --tp-color-surface-raised: var(--surface-2);
    --tp-color-surface-soft: var(--surface-raised);
    --tp-color-interactive: var(--surface-raised);
    --tp-color-muted-surface: var(--product-bg);
    --tp-color-text: var(--text-primary);
    --tp-color-text-muted: var(--text-secondary);
    --tp-color-text-subtle: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    --tp-color-border: var(--border-subtle);
    --tp-color-border-strong: color-mix(in srgb, var(--border-subtle) 72%, var(--text-primary));
    --tp-color-primary: var(--accent);
    --tp-color-primary-hover: var(--accent-hover);
    --tp-color-primary-ink: #17120a;
    --tp-color-success: var(--success);
    --tp-color-danger: var(--danger);
    --tp-color-focus: var(--accent-hover);
    --tp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent);
}

html[data-theme] body:not(.game-active) > .app-container.tp-shell {
    background:
        radial-gradient(820px 520px at 56% -18%, color-mix(in srgb, var(--surface-raised) 32%, transparent), transparent 68%),
        var(--product-bg) !important;
}

html[data-theme] body:not(.game-active) .tp-topbar {
    background: var(--tp-color-header) !important;
    border-color: var(--border-subtle) !important;
}

html[data-theme] body:not(.game-active) .tp-topbar a,
html[data-theme] body:not(.game-active) .tp-topbar button { color: var(--text-secondary); }
html[data-theme] body:not(.game-active) .tp-topbar [aria-current="page"],
html[data-theme] body:not(.game-active) .tp-topbar .is-active { color: var(--accent); }

html[data-theme] body:not(.game-active) #screen-home.tp-home { background: var(--product-bg); }
html[data-theme] body:not(.game-active) #screen-home .tp-home-hero,
html[data-theme] body:not(.game-active) #screen-home .tp-home-section,
html[data-theme] body:not(.game-active) #screen-home .tp-home-learn {
    border-color: var(--border-subtle);
    background: var(--surface-1);
}
html[data-theme] body:not(.game-active) #screen-home .tp-home-continue { background: linear-gradient(145deg, var(--surface-raised), var(--surface-1)); }
html[data-theme] body:not(.game-active) #screen-home .tp-home-news { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 38%, transparent), var(--tp-shadow-xs); }

/* Existing tournament and community screens still use a small legacy variable
 * vocabulary. Map it locally to the product semantic layer rather than
 * retheming the live-game surface. */
html[data-theme] body:not(.game-active) #screen-tournaments,
html[data-theme] body:not(.game-active) #screen-tournament-lobby,
html[data-theme] body:not(.game-active) #screen-league,
html[data-theme] body:not(.game-active) #screen-more,
html[data-theme] body:not(.game-active) #screen-friends,
html[data-theme] body:not(.game-active) #screen-messages,
html[data-theme] body:not(.game-active) #screen-analysis,
html[data-theme] body:not(.game-active) #screen-database {
    --bg-void: var(--product-bg);
    --bg-base: var(--product-bg);
    --bg-surface: var(--surface-1);
    --bg-elevated: var(--surface-2);
    --bg-overlay: var(--surface-raised);
    --bg-card: var(--surface-1);
    --bg-input: var(--surface-2);
    --gold: var(--accent);
    --gold-bright: var(--accent-hover);
    --text-muted: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    --border: var(--border-subtle);
    --border-strong: color-mix(in srgb, var(--border-subtle) 72%, var(--text-primary));
    min-width: 0;
    background: var(--product-bg) !important;
    color: var(--text-primary);
}

html[data-theme] body:not(.game-active) #screen-tournaments .sm-page-header,
html[data-theme] body:not(.game-active) #screen-league .sm-page-header,
html[data-theme] body:not(.game-active) #screen-more .sm-page-header,
html[data-theme] body:not(.game-active) #screen-friends .sm-page-header,
html[data-theme] body:not(.game-active) #screen-messages .sm-page-header,
html[data-theme] body:not(.game-active) #screen-analysis .sm-page-header {
    background: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
}

/* Reward collection */
#screen-rewards.tp-product-page.active {
    display: block !important;
    min-width: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: transparent !important;
}

.tp-rewards-heading {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.tp-rewards-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tp-rewards-summary article {
    min-height: 112px;
    display: grid;
    align-content: space-between;
    gap: 7px;
    padding: 18px;
    border: 1px solid var(--tp-product-border);
    border-radius: 15px;
    background: var(--tp-product-surface);
}

.tp-rewards-summary span,
.tp-rewards-summary small { color: var(--tp-product-muted); font-size: 12px; line-height: 1.35; }
.tp-rewards-summary strong { overflow-wrap: anywhere; color: var(--tp-product-text); font-size: 23px; font-weight: 720; letter-spacing: -0.035em; }
.tp-rewards-summary article:last-child strong { color: var(--tp-product-gold); font-size: 16px; }

.tp-rewards-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid var(--tp-product-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--tp-product-surface) 84%, transparent);
}

.tp-reward-status-filters { display: flex; flex: 1 1 460px; flex-wrap: wrap; gap: 7px; }
.tp-filter-chip,
.tp-reward-select select {
    min-height: 42px;
    border: 1px solid var(--tp-product-border);
    border-radius: 10px;
    background: var(--tp-product-surface-raised);
    color: var(--tp-product-text);
    font: 600 13px/1 var(--tp-font-sans);
}
.tp-filter-chip { padding: 0 13px; cursor: pointer; }
.tp-filter-chip.is-active { border-color: color-mix(in srgb, var(--tp-product-gold) 68%, var(--tp-product-border)); background: color-mix(in srgb, var(--tp-product-gold) 13%, var(--tp-product-surface-raised)); color: var(--tp-product-gold); }
.tp-reward-select { display: grid; gap: 5px; color: var(--tp-product-muted); font-size: 11px; font-weight: 650; }
.tp-reward-select select { min-width: 145px; padding: 0 10px; }

.tp-rewards-list { display: grid; gap: 10px; margin-top: 16px; }
.tp-reward-card {
    min-width: 0;
    min-height: 116px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border: 1px solid var(--tp-product-border);
    border-left-width: 3px;
    border-radius: 15px;
    background: var(--tp-product-surface);
}
.tp-reward-card.is-common { border-left-color: #8d97a4; }
.tp-reward-card.is-uncommon { border-left-color: #769c86; }
.tp-reward-card.is-rare { border-left-color: #799ac5; }
.tp-reward-card.is-epic { border-left-color: #a486b8; }
.tp-reward-card.is-legendary { border-left-color: var(--tp-product-gold); }
.tp-reward-card.is-locked { opacity: 0.76; }

.tp-medal {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tp-product-gold) 58%, var(--tp-product-border));
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 30%, rgba(255,255,255,0.24), transparent 28%),
        linear-gradient(135deg, #6d5227, #c79e4c 48%, #5f461e);
    box-shadow: inset 0 1px rgba(255,255,255,0.24), 0 5px 12px rgba(0,0,0,0.24);
    color: #211809;
    font-size: 21px;
}
.tp-medal::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(50, 35, 11, 0.42); border-radius: inherit; pointer-events: none; }
.tp-reward-card.is-locked .tp-medal { background: linear-gradient(135deg, #48505c, #737e8c 48%, #414954); color: #edf1f5; filter: saturate(0.48); }
.tp-medal--compact { width: 38px; height: 38px; font-size: 15px; }
.tp-medal--compact::after { inset: 4px; }

.tp-reward-card__copy { min-width: 0; }
.tp-reward-card__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tp-reward-card h2 { margin: 0; color: var(--tp-product-text); font-size: 16px; font-weight: 690; line-height: 1.25; }
.tp-reward-card p { margin: 5px 0 0; color: var(--tp-product-muted); font-size: 13px; line-height: 1.42; }
.tp-reward-rarity,
.tp-reward-category,
.tp-reward-legacy { display: inline-flex; margin-top: 7px; color: var(--tp-product-muted); font-size: 11px; font-weight: 650; }
.tp-reward-rarity { padding: 3px 7px; border: 1px solid var(--tp-product-border); border-radius: 999px; }
.tp-reward-progress { display: grid; gap: 5px; margin-top: 9px; color: var(--tp-product-muted); font-size: 11px; }
.tp-reward-progress progress { width: min(100%, 270px); height: 5px; overflow: hidden; border: 0; border-radius: 999px; accent-color: var(--tp-product-gold); }
.tp-reward-card__controls { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.tp-reward-icon-action { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--tp-product-border); border-radius: 10px; background: transparent; color: var(--tp-product-muted); cursor: pointer; }
.tp-reward-icon-action:disabled { opacity: 0.45; cursor: not-allowed; }
.tp-rewards-loading,
.tp-rewards-empty { min-height: 130px; display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px dashed var(--tp-product-border-strong); border-radius: 15px; color: var(--tp-product-muted); }
.tp-rewards-empty > i,
.tp-rewards-loading > i { color: var(--tp-product-gold); font-size: 22px; }
.tp-rewards-empty > div { display: grid; gap: 4px; }
.tp-rewards-empty strong { color: var(--tp-product-text); }

/* Settings: three real dark product themes, not a light-mode promise. */
.tp-settings-row--theme { align-items: start; }
.tp-theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 620px); }
.tp-theme-choice {
    min-height: 94px;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--tp-product-border);
    border-radius: 12px;
    background: var(--tp-product-surface-raised);
    color: var(--tp-product-text);
    text-align: left;
    cursor: pointer;
}
.tp-theme-choice.is-selected { border-color: var(--tp-product-gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-product-gold) 34%, transparent); }
.tp-theme-choice > span:last-child { min-width: 0; display: grid; gap: 3px; }
.tp-theme-choice strong { font-size: 12px; line-height: 1.2; }
.tp-theme-choice small { color: var(--tp-product-muted); font-size: 10px; line-height: 1.3; }
.tp-theme-choice__preview { width: 34px; height: 46px; display: block; border: 1px solid rgba(255,255,255,0.18); border-radius: 9px; }
.tp-theme-choice__preview--charcoal { background: linear-gradient(160deg, #0d1016 0 43%, #d6aa4d 44% 49%, #1a1f29 50%); }
.tp-theme-choice__preview--midnight { background: linear-gradient(160deg, #09111f 0 43%, #b9a66d 44% 49%, #1a2b43 50%); }
.tp-theme-choice__preview--graphite { background: linear-gradient(160deg, #171716 0 43%, #bb8a52 44% 49%, #34312d 50%); }

html[data-theme] body:not(.game-active) #screen-profile.profile-unified { background: var(--product-bg); }
html[data-theme] body:not(.game-active) #screen-profile.profile-unified .profile-rewards-all { min-height: 40px; padding: 0 10px; border: 0; background: transparent; color: var(--accent); font: 650 13px/1 var(--tp-font-sans); cursor: pointer; }
html[data-theme] body:not(.game-active) #screen-profile.profile-unified .profile-rewards-progress { color: var(--text-secondary); font-size: 12px; }
html[data-theme] body:not(.game-active) #screen-profile.profile-unified .profile-badge__icon { border-color: color-mix(in srgb, var(--accent) 58%, var(--border-subtle)); }

@media (max-width: 760px) {
    .tp-rewards-heading { align-items: flex-start; }
    .tp-rewards-summary { grid-template-columns: 1fr; gap: 8px; }
    .tp-rewards-summary article { min-height: 82px; }
    .tp-rewards-controls { align-items: stretch; }
    .tp-reward-status-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
    .tp-filter-chip { flex: 0 0 auto; }
    .tp-reward-select { flex: 1 1 140px; }
    .tp-reward-select select { width: 100%; min-width: 0; }
    .tp-reward-card { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
    .tp-reward-card__controls { grid-column: 1 / -1; justify-content: start; }
    .tp-medal { width: 46px; height: 46px; }
    .tp-theme-picker { width: 100%; grid-template-columns: 1fr; }
    .tp-theme-choice { min-height: 68px; grid-template-columns: 35px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
    html[data-theme] body:not(.game-active) > .app-container.tp-shell,
    html[data-theme] body:not(.game-active) .tp-topbar,
    .tp-theme-choice,
    .tp-reward-card { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-theme-choice,
    .tp-reward-card { transition: none; }
}