/* ==========================================================================
   Shared winner RESULT BAR — the on-page alternative to the #winnerModal popup.
   Markup: partials/common/winner-result-bar.php · Logic: js/site/winner-result.js

   Each picker keeps its own colour identity by setting these on its page scope
   (body.page-{slug}); every one has a sensible themed fallback, so a page that
   sets nothing still looks correct:

     --wsp-result-accent    border + kicker colour        (page accent)
     --wsp-result-grad      the restart button background (page gradient)
     --wsp-result-btn-ink   text colour on that button
     --wsp-result-plate     circle behind the art/glyph   (scene-appropriate)
     --wsp-result-display   font for the winner's name    (page display face)
     --wsp-result-tint      the bar's own soft background

   Theme-aware by default: ink/muted/surface/border come from the theme vars,
   NOT hardcoded — ⚠️ note it is --theme-muted, never --theme-text-muted, which
   is not defined anywhere in themes.css.
   ========================================================================== */
.wsp-result {
    --wsp-result-accent: var(--theme-accent, #7a5424);
    --wsp-result-grad: linear-gradient(135deg, #d8b45a, #6b4a18);
    --wsp-result-btn-ink: #2a1d08;
    --wsp-result-plate: #f2e5c6;
    --wsp-result-display: inherit;
    --wsp-result-tint: rgba(122, 84, 36, .08);
    --wsp-result-ink: var(--theme-text, #1f2430);
    --wsp-result-muted: var(--theme-muted, #6b7280);
    --wsp-result-surface: var(--theme-surface, #fff);
    --wsp-result-border: var(--theme-border, #e5e7eb);

    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin: .9rem 0 .2rem; padding: .8rem 1rem;
    border: 2px solid var(--wsp-result-accent); border-radius: 14px;
    background: var(--wsp-result-tint);
}
.wsp-result[hidden] { display: none; }

/* the art plate — a circle so swapped-in art of any crop reads consistently,
   and so a transparent emblem stays legible on a dark theme */
.wsp-result-art,
.wsp-result-glyph {
    width: 62px; height: 62px; flex: none; display: block;
    background: var(--wsp-result-plate); border-radius: 50%; padding: 6px;
    box-shadow: inset 0 0 0 2px rgba(74, 53, 23, .5);
}
.wsp-result-art { object-fit: contain; }
.wsp-result-glyph[hidden] { display: none; }
.wsp-result-glyph svg { width: 100%; height: 100%; display: block; }
/* glyphHtml may also be a plain character (the emoji fallback most full-colour
   scenes use). Size it here so no page has to style it; inert for the SVG case
   above, which sets its own 100% box. */
.wsp-result-glyph { font-size: 32px; line-height: 50px; text-align: center; }

.wsp-result-body { flex: 1 1 190px; min-width: 0; }
.wsp-result-kicker {
    display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--wsp-result-accent);
}
.wsp-result-name {
    display: block; font-family: var(--wsp-result-display);
    font-size: 1.75rem; line-height: 1.15; color: var(--wsp-result-ink);
    /* the FULL name always — wrap, never clip */
    overflow-wrap: anywhere;
}
.wsp-result-verdict {
    display: block; font-size: .86rem; line-height: 1.45;
    color: var(--wsp-result-muted); margin-top: .2rem;
}
.wsp-result-verdict[hidden] { display: none; }

.wsp-result-actions { display: flex; flex-direction: column; gap: .4rem; flex: none; }
.wsp-result-again {
    border: 0; border-radius: 999px; padding: .55rem 1.1rem;
    font-weight: 800; font-size: .85rem; white-space: nowrap; cursor: pointer;
    color: var(--wsp-result-btn-ink); background: var(--wsp-result-grad);
}
.wsp-result-again:hover { filter: brightness(1.08); }
.wsp-result-save {
    border: 1px solid var(--wsp-result-border); border-radius: 999px;
    padding: .4rem 1.1rem; font-weight: 700; font-size: .78rem; white-space: nowrap;
    cursor: pointer; color: var(--wsp-result-ink); background: var(--wsp-result-surface);
}
.wsp-result-save:hover { border-color: var(--wsp-result-accent); }

@media (max-width: 480px) {
    .wsp-result-actions { flex-direction: row; width: 100%; }
    .wsp-result-again,
    .wsp-result-save { flex: 1 1 auto; text-align: center; }
}

/* ⚠️ NO high-contrast override here, deliberately.
   The content SECTION sits on HC's black body and does need light text — but
   this bar lives inside the tool CARD, which HC renders WHITE
   (--theme-surface: #fff). An earlier "HC needs light text" block forced white
   on white and measured a contrast ratio of exactly 1.0.
   The defaults are already right: --theme-text and --theme-muted (#1f2937 in
   HC) are the dark values intended for white surfaces. Leave them alone. */