/* ==========================================================
   REWARD SYSTEM — score rings, reward cards, score companions
   ========================================================== */

/* ── Score ring ──────────────────────────────────────────── */
.score-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.score-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.score-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-ring-track {
    fill: none;
    stroke: var(--bg-chip-soft, #e8ecf0);
    stroke-width: 10;
}

.score-ring-fill {
    fill: none;
    stroke: var(--score-ring-color, #FFD84D);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 326.73;  /* 2 × π × 52 */
    stroke-dashoffset: calc(326.73 - (326.73 * var(--score-percent, 0)) / 100);
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Color by reward tier */
.reward-gold .score-ring-fill    { stroke: #FFD84D; }
.reward-silver .score-ring-fill  { stroke: #B0BEC5; }
.reward-bronze .score-ring-fill  { stroke: #FFAB91; }
.reward-encouragement .score-ring-fill { stroke: #FF6FA5; }

.score-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-ring-number {
    font-family: "Cooper Black", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ink);
}

.score-ring-stars {
    display: flex;
    gap: 0.25rem;
    font-size: 1.3rem;
}

.score-star {
    color: var(--bg-chip-soft, #ccc);
    transition: transform 0.3s ease, color 0.3s ease;
}

.score-star.is-earned {
    color: #FFD84D;
    animation: star-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.score-star.is-earned:nth-child(2) { animation-delay: 0.15s; }
.score-star.is-earned:nth-child(3) { animation-delay: 0.3s; }

@keyframes star-pop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.score-ring-label {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}


/* ── Score companion (mascot + speech bubble) ────────────── */
.score-companion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: var(--bg-surface, #fff);
    border: 1.5px solid var(--line);
    max-width: 380px;
}

.score-companion-mascot {
    flex-shrink: 0;
}

.score-companion-bubble {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.score-companion-name {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.score-companion-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ink);
    font-weight: 600;
}

/* Companion tone by band */
.reward-gold .score-companion {
    background: linear-gradient(135deg, rgba(255, 216, 77, 0.16), rgba(255, 255, 255, 0.96));
    border-color: rgba(255, 216, 77, 0.4);
}
.reward-silver .score-companion {
    background: linear-gradient(135deg, rgba(176, 190, 197, 0.12), rgba(255, 255, 255, 0.96));
    border-color: rgba(176, 190, 197, 0.35);
}
.reward-bronze .score-companion {
    background: linear-gradient(135deg, rgba(255, 171, 145, 0.14), rgba(255, 255, 255, 0.96));
    border-color: rgba(255, 171, 145, 0.35);
}
.reward-encouragement .score-companion {
    background: linear-gradient(135deg, rgba(255, 111, 165, 0.10), rgba(255, 255, 255, 0.96));
    border-color: rgba(255, 111, 165, 0.25);
}


/* ── Reward card (collectible badge) ─────────────────────── */
.reward-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-radius: 1.1rem;
    background: var(--bg-surface-raised, #fff);
    border: 2px solid var(--line);
    max-width: 380px;
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    animation: reward-reveal 0.6s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes reward-reveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.reward-card-badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
}

.reward-card-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.reward-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.reward-card-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.reward-card-title {
    font-size: 1rem;
    font-family: "Cooper Black", Georgia, serif;
    color: var(--ink);
}

.reward-card-mascot-says {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

/* Unlocked card shimmers */
.reward-card-unlocked {
    position: relative;
    overflow: hidden;
}

.reward-card-unlocked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 60%
    );
    animation: reward-shimmer 2.5s 1.4s ease-in-out;
    pointer-events: none;
}

@keyframes reward-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Reward tiers */
.reward-card-unlocked.reward-gold {
    border-color: rgba(255, 216, 77, 0.5);
    background: linear-gradient(135deg, rgba(255, 216, 77, 0.10), var(--bg-surface-raised, #fff));
}
.reward-card-unlocked.reward-silver {
    border-color: rgba(176, 190, 197, 0.4);
    background: linear-gradient(135deg, rgba(176, 190, 197, 0.08), var(--bg-surface-raised, #fff));
}
.reward-card-unlocked.reward-bronze {
    border-color: rgba(255, 171, 145, 0.4);
    background: linear-gradient(135deg, rgba(255, 171, 145, 0.10), var(--bg-surface-raised, #fff));
}

.reward-card-encouragement {
    border-color: rgba(255, 111, 165, 0.25);
    background: linear-gradient(135deg, rgba(255, 111, 165, 0.06), var(--bg-surface-raised, #fff));
}


/* ── Result hero layout (mascot + ring + reward) ─────────── */
.result-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 0;
}

.result-hero-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.result-hero-mascot {
    flex-shrink: 0;
}

.result-hero-score {
    flex-shrink: 0;
}

.result-hero-reward {
    width: 100%;
    display: flex;
    justify-content: center;
}


/* ── Star burst animation for gold scores ────────────────── */
.reward-gold .score-ring::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 216, 77, 0.3) 0%, transparent 70%);
    animation: star-burst 1.5s 0.5s ease-out;
    pointer-events: none;
    opacity: 0;
}

@keyframes star-burst {
    0%   { opacity: 0; transform: scale(0.5); }
    30%  { opacity: 1; transform: scale(1.3); }
    100% { opacity: 0; transform: scale(1.6); }
}


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .result-hero-top {
        flex-direction: column;
        gap: 1rem;
    }
    .score-ring {
        width: 100px;
        height: 100px;
    }
    .score-ring-number {
        font-size: 1.3rem;
    }
    .score-companion {
        flex-direction: column;
        text-align: center;
        gap: 0.4rem;
        max-width: 280px;
    }
    .reward-card {
        flex-direction: column;
        text-align: center;
        max-width: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .score-ring-fill { transition: none; }
    .score-star.is-earned { animation: none; }
    .reward-card { animation: none; opacity: 1; transform: none; }
    .reward-card-unlocked::after { animation: none; }
    .reward-gold .score-ring::after { animation: none; }
    .result-title-animated { animation: none; }
    .result-confetti-particle { animation: none; display: none; }
    .result-subtitle { animation: none; opacity: 1; }
}


/* ==========================================================
   RESULT PAGE THEMES — random visual variation per visit
   ========================================================== */

/* ── Themed container ────────────────────────────────────── */
.result-page-themed {
    position: relative;
    overflow: hidden;
}

.result-confetti-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.result-page-themed > .container {
    position: relative;
    z-index: 1;
}

/* Default (sunny-play): warm celebration surface */
:root .result-page-themed,
[data-theme="sunny-play"] .result-page-themed {
    --gv2-accent: var(--theme-accent, #FFD84D);
    --gv2-accent-light: color-mix(in srgb, var(--theme-accent, #FFD84D) 22%, rgba(255, 248, 231, 0.9));
    --gv2-bg: color-mix(in srgb, var(--theme-accent, #FFD84D) 8%, #FFF9F0);
    --gv2-card: rgba(255, 255, 255, 0.96);
    --gv2-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, rgba(37, 64, 92, 0.1));
    --gv2-card-glow: rgba(255, 255, 255, 0.66);
    --gv2-card-start: rgba(255, 255, 255, 0.96);
    --gv2-card-end: color-mix(in srgb, var(--theme-accent, #FFD84D) 10%, rgba(255, 250, 242, 0.96));
    --gv2-card-border-color: color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, rgba(37, 64, 92, 0.08));
    --gv2-card-shadow: 0 12px 28px rgba(35, 50, 74, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --gv2-card-shadow-hover: 0 18px 36px rgba(35, 50, 74, 0.14), 0 0 0 1px color-mix(in srgb, var(--theme-accent, #FFD84D) 10%, transparent);
    --gv2-card-title: #23324A;
    --gv2-card-text: #6f7f95;
    --gv2-card-art-glow: rgba(255, 255, 255, 0.72);
    --gv2-card-art-surface: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #FFD84D) 16%, rgba(255, 248, 231, 0.9)), rgba(255, 250, 242, 0.96));
    --gv2-chip-bg: color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, rgba(255, 255, 255, 0.82));
    --gv2-chip-fg: #23324A;
    --gv2-chip-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 12%, rgba(37, 64, 92, 0.06));
    --gv2-chip-accent-bg: color-mix(in srgb, var(--theme-accent, #FFD84D) 22%, rgba(255, 248, 231, 0.9));
    --gv2-chip-accent-fg: #23324A;
    --gv2-chip-stage-bg: color-mix(in srgb, var(--theme-accent, #FFD84D) 18%, rgba(255, 255, 255, 0.85));
    --gv2-chip-stage-fg: color-mix(in srgb, var(--theme-accent, #FFD84D) 62%, #23324A);
    --gv2-chip-stage-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 18%, rgba(37, 64, 92, 0.08));
    --gv2-result-pill-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #FFD84D) 16%, rgba(255, 255, 255, 0.9)), rgba(255, 250, 242, 0.94));
    --gv2-result-pill-fg: color-mix(in srgb, var(--theme-accent, #FFD84D) 52%, #23324A);
    --gv2-result-pill-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 18%, rgba(37, 64, 92, 0.08));
    --gv2-result-pill-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent, #FFD84D) 12%, transparent);
}

/* Calm-sky: cool blue celebration surface */
[data-theme="calm-sky"] .result-page-themed {
    --gv2-accent: var(--theme-accent, #58b8e8);
    --gv2-accent-light: color-mix(in srgb, var(--theme-accent, #58b8e8) 22%, rgba(240, 248, 255, 0.9));
    --gv2-bg: color-mix(in srgb, var(--theme-accent, #58b8e8) 8%, #e8f1f8);
    --gv2-card: rgba(240, 248, 255, 0.96);
    --gv2-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 14%, rgba(30, 58, 80, 0.1));
    --gv2-card-glow: rgba(245, 250, 255, 0.66);
    --gv2-card-start: rgba(240, 248, 255, 0.96);
    --gv2-card-end: color-mix(in srgb, var(--theme-accent, #58b8e8) 10%, rgba(235, 245, 252, 0.96));
    --gv2-card-border-color: color-mix(in srgb, var(--theme-accent, #58b8e8) 14%, rgba(30, 58, 80, 0.08));
    --gv2-card-shadow: 0 12px 28px rgba(30, 58, 80, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    --gv2-card-shadow-hover: 0 18px 36px rgba(30, 58, 80, 0.14), 0 0 0 1px color-mix(in srgb, var(--theme-accent, #58b8e8) 10%, transparent);
    --gv2-card-title: #1e3a50;
    --gv2-card-text: #5e8299;
    --gv2-card-art-glow: rgba(245, 250, 255, 0.72);
    --gv2-card-art-surface: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #58b8e8) 16%, rgba(240, 248, 255, 0.9)), rgba(235, 245, 252, 0.96));
    --gv2-chip-bg: color-mix(in srgb, var(--theme-accent, #58b8e8) 14%, rgba(240, 248, 255, 0.82));
    --gv2-chip-fg: #1e3a50;
    --gv2-chip-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 12%, rgba(30, 58, 80, 0.06));
    --gv2-chip-accent-bg: color-mix(in srgb, var(--theme-accent, #58b8e8) 22%, rgba(240, 248, 255, 0.9));
    --gv2-chip-accent-fg: #1e3a50;
    --gv2-chip-stage-bg: color-mix(in srgb, var(--theme-accent, #58b8e8) 18%, rgba(240, 248, 255, 0.85));
    --gv2-chip-stage-fg: color-mix(in srgb, var(--theme-accent, #58b8e8) 62%, #1e3a50);
    --gv2-chip-stage-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 18%, rgba(30, 58, 80, 0.08));
    --gv2-result-pill-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #58b8e8) 16%, rgba(240, 248, 255, 0.9)), rgba(235, 245, 252, 0.94));
    --gv2-result-pill-fg: color-mix(in srgb, var(--theme-accent, #58b8e8) 52%, #1e3a50);
    --gv2-result-pill-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 18%, rgba(30, 58, 80, 0.08));
    --gv2-result-pill-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent, #58b8e8) 12%, transparent);
}

/* Story-night: dark celebration surface (original dark tokens) */
[data-theme="story-night"] .result-page-themed {
    --gv2-accent: var(--theme-accent, #FFD84D);
    --gv2-accent-light: color-mix(in srgb, var(--theme-accent, #FFD84D) 18%, rgba(255, 255, 255, 0.08));
    --gv2-bg: color-mix(in srgb, var(--theme-accent, #FFD84D) 10%, #10162c);
    --gv2-card: rgba(14, 20, 39, 0.88);
    --gv2-border: rgba(255, 255, 255, 0.12);
    --gv2-card-glow: rgba(255, 255, 255, 0.16);
    --gv2-card-start: rgba(18, 25, 44, 0.92);
    --gv2-card-end: rgba(8, 14, 28, 0.96);
    --gv2-card-border-color: rgba(255, 255, 255, 0.12);
    --gv2-card-shadow: 0 22px 40px rgba(6, 10, 24, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --gv2-card-shadow-hover: 0 28px 52px rgba(6, 10, 24, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.14);
    --gv2-card-title: #FFFFFF;
    --gv2-card-text: rgba(255, 255, 255, 0.76);
    --gv2-card-art-glow: rgba(255, 255, 255, 0.16);
    --gv2-card-art-surface: linear-gradient(
        135deg,
        color-mix(in srgb, var(--theme-accent, #FFD84D) 20%, rgba(255, 255, 255, 0.1)),
        rgba(255, 255, 255, 0.03)
    );
    --gv2-chip-bg: rgba(255, 255, 255, 0.1);
    --gv2-chip-fg: rgba(255, 255, 255, 0.92);
    --gv2-chip-border: rgba(255, 255, 255, 0.1);
    --gv2-chip-accent-bg: color-mix(in srgb, var(--theme-accent, #FFD84D) 18%, rgba(255, 255, 255, 0.08));
    --gv2-chip-accent-fg: #FFFFFF;
    --gv2-chip-stage-bg: rgba(255, 255, 255, 0.12);
    --gv2-chip-stage-fg: rgba(255, 255, 255, 0.92);
    --gv2-chip-stage-border: rgba(255, 255, 255, 0.14);
    --gv2-result-pill-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
    --gv2-result-pill-fg: rgba(255, 255, 255, 0.92);
    --gv2-result-pill-border: rgba(255, 255, 255, 0.1);
    --gv2-result-pill-shadow: none;
}

.result-page-themed .page-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent, #FFD84D) 12%, transparent), transparent 32%),
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--gv2-bg, #FFF9F0) 76%, rgba(255, 255, 255, 0.4)),
            color-mix(in srgb, var(--gv2-accent-light, #FEF3C7) 58%, rgba(255, 255, 255, 0.4))
        );
    border: 1px solid color-mix(in srgb, var(--theme-accent, #FFD84D) 16%, var(--gv2-border, rgba(37, 64, 92, 0.08)));
}

.result-page-themed .page-hero::after {
    content: "";
    position: absolute;
    inset: auto -8% -18% 42%;
    height: 16rem;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #FFD84D) 20%, white) 0%, transparent 62%);
    pointer-events: none;
    opacity: var(--result-hero-glow-opacity, 0.7);
}

.result-page-themed .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.result-page-themed .section-heading h2 {
    color: var(--result-section-heading-color, var(--ink));
    text-shadow: none;
}

.result-page-themed .gv2-shelf {
    padding: 1rem 0 1.35rem;
    gap: 1.15rem;
}

/* ── Result page UI enhancements ─────────────────────────── */

/* Progress metric cards — accent left bar, hover effect */
.result-page-themed .progress-metric-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.result-page-themed .progress-metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 1.25rem 0 0 1.25rem;
    background: linear-gradient(180deg, var(--theme-accent, #FFD84D), color-mix(in srgb, var(--theme-accent, #FFD84D) 60%, #34D399));
}

.result-page-themed .progress-metric-card:hover {
    transform: translateY(-3px);
}

/* Reward badge showcase — improved layout */
.result-page-themed .reward-badge-showcase {
    border-radius: 1.5rem;
    overflow: hidden;
    position: relative;
}

.result-page-themed .reward-badge-showcase::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-accent, #FFD84D), color-mix(in srgb, var(--theme-accent, #FFD84D) 60%, #34D399));
}

/* Prose card / next step card — nicer left accent */
.result-page-themed .result-next-card {
    border-radius: 1.5rem;
    overflow: hidden;
    position: relative;
}

.result-page-themed .result-next-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--theme-accent, #FFD84D), color-mix(in srgb, var(--theme-accent, #FFD84D) 60%, #34D399));
}

/* Result detail card — time taken */
.result-page-themed .result-detail-card {
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
}

.result-page-themed .result-detail-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-accent, #FFD84D), color-mix(in srgb, var(--theme-accent, #FFD84D) 60%, #34D399));
}

/* Attempt list items — better spacing and hover */
.result-page-themed .logic-attempt-item {
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.result-page-themed .logic-attempt-item:hover {
    transform: translateX(4px);
}

/* Section heading — better typography */
.result-page-themed .section-heading h2 {
    font-family: "Cooper Black", Georgia, serif;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
}

/* ── Title animation ─────────────────────────────────────── */
.result-title-animated {
    animation: result-title-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes result-title-pop {
    0%   { transform: scale(0.6) translateY(20px); opacity: 0; }
    60%  { transform: scale(1.08) translateY(-4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Subtitle fade-in ────────────────────────────────────── */
.result-subtitle {
    opacity: 0;
    animation: result-subtitle-in 0.5s 0.4s ease-out forwards;
    font-style: italic;
    color: var(--muted);
    font-size: 1.05rem;
}

@keyframes result-subtitle-in {
    to { opacity: 1; }
}

/* ── Theme emoji badge bounce ────────────────────────────── */
.result-theme-emoji {
    animation: emoji-bounce 0.6s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes emoji-bounce {
    0%   { transform: scale(0) rotate(-15deg); }
    100% { transform: scale(1) rotate(0deg); }
}


/* ── Confetti particle (injected by JS) ──────────────────── */
.result-confetti-particle {
    position: absolute;
    top: -20px;
    width: var(--p-size, 10px);
    height: var(--p-size, 10px);
    border-radius: var(--p-radius, 50%);
    background: var(--p-color, var(--theme-accent, #FFD84D));
    opacity: 0.85;
    animation: confetti-fall var(--p-duration, 3s) var(--p-delay, 0s) ease-in forwards;
    pointer-events: none;
}

@keyframes confetti-fall {
    0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.9; }
    25%  { transform: translateY(25vh) rotate(120deg) scale(0.95); opacity: 0.8; }
    75%  { transform: translateY(75vh) rotate(300deg) scale(0.7); opacity: 0.5; }
    100% { transform: translateY(105vh) rotate(460deg) scale(0.3); opacity: 0; }
}


/* ── Theme-specific colour accents ───────────────────────── */

/* Space */
[data-result-theme="space"] .hero-badge-sky { background: rgba(123,97,255,0.15); color: #7B61FF; }
[data-result-theme="space"] .score-ring-label { color: #7B61FF; }

/* Jungle */
[data-result-theme="jungle"] .hero-badge-sky { background: rgba(46,204,113,0.15); color: #27ae60; }
[data-result-theme="jungle"] .score-ring-label { color: #27ae60; }

/* Ocean */
[data-result-theme="ocean"] .hero-badge-sky { background: rgba(0,188,212,0.13); color: #0097A7; }
[data-result-theme="ocean"] .score-ring-label { color: #0097A7; }

/* Circus */
[data-result-theme="circus"] .hero-badge-sky { background: rgba(255,107,107,0.15); color: #e74c3c; }
[data-result-theme="circus"] .score-ring-label { color: #e74c3c; }

/* Garden */
[data-result-theme="garden"] .hero-badge-sky { background: rgba(255,179,71,0.15); color: #e67e22; }
[data-result-theme="garden"] .score-ring-label { color: #e67e22; }

/* Candy */
[data-result-theme="candy"] .hero-badge-sky { background: rgba(255,105,180,0.13); color: #d63384; }
[data-result-theme="candy"] .score-ring-label { color: #d63384; }

/* Arctic */
[data-result-theme="arctic"] .hero-badge-sky { background: rgba(129,212,250,0.15); color: #0277bd; }
[data-result-theme="arctic"] .score-ring-label { color: #0277bd; }


/* ── Theme-specific score ring accent override ───────────── */
[data-result-theme="space"]  .score-ring-fill  { stroke: #7B61FF !important; }
[data-result-theme="jungle"] .score-ring-fill  { stroke: #2ECC71 !important; }
[data-result-theme="ocean"]  .score-ring-fill  { stroke: #00BCD4 !important; }
[data-result-theme="circus"] .score-ring-fill  { stroke: #FF6B6B !important; }
[data-result-theme="garden"] .score-ring-fill  { stroke: #FFB347 !important; }
[data-result-theme="candy"]  .score-ring-fill  { stroke: #FF69B4 !important; }
[data-result-theme="arctic"] .score-ring-fill  { stroke: #81D4FA !important; }

/* Keep gold/silver/bronze tiers for score-star colour */
[data-result-theme] .score-star.is-earned { color: var(--theme-accent, #FFD84D); }


/* ── Score-band-specific celebration effects ─────────────── */

/* Gold: pulsing glow behind score ring */
[data-score-band="gold"] .score-ring-wrap::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 25%, transparent) 0%, transparent 70%);
    animation: gold-pulse 2s 1s ease-in-out infinite alternate;
    z-index: -1;
}
[data-score-band="gold"] .score-ring-wrap {
    position: relative;
}

@keyframes gold-pulse {
    0%   { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.15); opacity: 0.7; }
}

/* Silver: gentle floating sparkles */
[data-score-band="silver"] .result-confetti-canvas::after {
    content: "✦ ✧ ✦";
    position: absolute;
    top: 15%;
    right: 8%;
    font-size: 1.2rem;
    color: var(--theme-accent);
    opacity: 0.4;
    animation: sparkle-float 3s ease-in-out infinite alternate;
}

@keyframes sparkle-float {
    0%   { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-12px) rotate(8deg); }
}

/* Reward progress cards and badge shelf */
.progress-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.progress-metric-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--gv2-bg, #FFF9F0) 88%, white),
        rgba(255, 255, 255, 0.96)
    );
    border: 1px solid color-mix(in srgb, var(--gv2-accent, var(--theme-accent, #FFD84D)) 14%, rgba(47, 54, 80, 0.08));
    box-shadow: 0 12px 30px color-mix(in srgb, var(--gv2-accent, var(--theme-accent, #FFD84D)) 8%, rgba(47, 54, 80, 0.04));
}

.progress-metric-card strong {
    font-family: "Cooper Black", Georgia, serif;
    font-size: 1.45rem;
    color: var(--ink);
}

.progress-metric-card span {
    font-size: 0.9rem;
    color: var(--muted);
}

.reward-progress-card {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--gv2-accent-light, rgba(255, 248, 214, 0.92)) 84%, white),
        rgba(255, 255, 255, 0.98)
    );
}

.reward-badge-showcase {
    margin: 1.25rem 0 1.5rem;
    padding: 1rem 1.1rem 1.15rem;
    border-radius: 1.35rem;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--gv2-accent-light, #FEF3C7) 58%, white),
        color-mix(in srgb, var(--gv2-bg, #FFF9F0) 88%, white)
    );
    border: 1px solid color-mix(in srgb, var(--gv2-accent, var(--theme-accent, #FFD84D)) 18%, rgba(47, 54, 80, 0.08));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--gv2-accent, var(--theme-accent, #FFD84D)) 8%, transparent);
}

.reward-badge-showcase h2,
.reward-badge-showcase h3 {
    margin: 0;
    color: color-mix(in srgb, var(--gv2-accent, var(--theme-accent, #FFD84D)) 56%, var(--ink));
}

.reward-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.9rem;
    margin-top: 0.85rem;
}

.reward-badge-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.reward-badge-grid .gv2-badge {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--gv2-accent-light, #FEF3C7) 72%, white),
        rgba(255, 255, 255, 0.98)
    );
    border-color: color-mix(in srgb, var(--gv2-accent, var(--theme-accent, #FFD84D)) 20%, white);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--gv2-accent, var(--theme-accent, #FFD84D)) 10%, transparent);
}

.reward-badge-note {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--muted);
    text-align: center;
}

/* ==========================================================
   GLOBAL THEME ADAPTATION — progress cards, badge showcase,
   badges, reward cards (used on dashboard, result pages, etc.)
   ========================================================== */

/* ── Story-night global overrides ────────────────────────── */
[data-theme="story-night"] .progress-metric-card {
    background: linear-gradient(145deg, rgba(34, 34, 62, 0.95), rgba(28, 28, 52, 0.92));
    border-color: rgba(160, 150, 190, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

[data-theme="story-night"] .progress-metric-card strong {
    color: #e8e4f0;
}

[data-theme="story-night"] .progress-metric-card span {
    color: #9a94b0;
}

[data-theme="story-night"] .reward-progress-card {
    background: linear-gradient(145deg, rgba(38, 36, 66, 0.95), rgba(30, 28, 54, 0.92));
}

[data-theme="story-night"] .reward-badge-showcase {
    background: linear-gradient(145deg, rgba(38, 38, 68, 0.96), rgba(28, 28, 52, 0.94));
    border-color: rgba(160, 150, 190, 0.2);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

[data-theme="story-night"] .reward-badge-showcase h2,
[data-theme="story-night"] .reward-badge-showcase h3 {
    color: #d4cfe6;
}

[data-theme="story-night"] .reward-badge-grid .gv2-badge {
    background: linear-gradient(145deg, rgba(44, 44, 78, 0.95), rgba(34, 34, 62, 0.96));
    border-color: rgba(167, 139, 250, 0.28);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

[data-theme="story-night"] .gv2-badge-label {
    color: #e8e4f0;
}

[data-theme="story-night"] .reward-badge-note {
    color: #9a94b0;
}

[data-theme="story-night"] .score-companion {
    background: linear-gradient(135deg, rgba(40, 40, 72, 0.95), rgba(30, 30, 56, 0.94));
    border-color: rgba(167, 139, 250, 0.26);
}

[data-theme="story-night"] .score-companion-name {
    color: #9a94b0;
}

[data-theme="story-night"] .score-companion-text {
    color: #e8e4f0;
}

[data-theme="story-night"] .score-ring-number {
    color: #e8e4f0;
}

[data-theme="story-night"] .reward-card {
    background: linear-gradient(135deg, rgba(38, 38, 68, 0.94), rgba(28, 28, 52, 0.96));
    border-color: rgba(160, 150, 190, 0.22);
}

[data-theme="story-night"] .reward-card-kicker {
    color: #9a94b0;
}

[data-theme="story-night"] .reward-card-title {
    color: #e8e4f0;
}

[data-theme="story-night"] .reward-card-mascot-says {
    color: #9a94b0;
}

[data-theme="story-night"] .reward-card-unlocked.reward-gold {
    border-color: rgba(245, 213, 101, 0.32);
    background: linear-gradient(135deg, rgba(48, 44, 36, 0.94), rgba(28, 28, 52, 0.96));
}

[data-theme="story-night"] .reward-card-unlocked.reward-silver {
    border-color: rgba(176, 190, 197, 0.28);
    background: linear-gradient(135deg, rgba(38, 40, 50, 0.94), rgba(28, 28, 52, 0.96));
}

[data-theme="story-night"] .reward-card-unlocked.reward-bronze {
    border-color: rgba(255, 171, 145, 0.28);
    background: linear-gradient(135deg, rgba(44, 36, 38, 0.94), rgba(28, 28, 52, 0.96));
}

[data-theme="story-night"] .reward-card-encouragement {
    border-color: rgba(232, 122, 170, 0.2);
    background: linear-gradient(135deg, rgba(42, 30, 42, 0.94), rgba(28, 28, 52, 0.96));
}

[data-theme="story-night"] .weekly-summary-note {
    color: #9a94b0;
}

[data-theme="story-night"] .weekly-summary-note strong {
    color: #d4cfe6;
}

/* ── Calm-sky global overrides ───────────────────────────── */
[data-theme="calm-sky"] .progress-metric-card {
    background: linear-gradient(145deg, rgba(240, 248, 255, 0.97), rgba(228, 240, 250, 0.94));
    border-color: rgba(88, 184, 232, 0.16);
    box-shadow: 0 12px 30px rgba(30, 58, 80, 0.08);
}

[data-theme="calm-sky"] .progress-metric-card strong {
    color: #1e3a50;
}

[data-theme="calm-sky"] .progress-metric-card span {
    color: #5e8299;
}

[data-theme="calm-sky"] .reward-progress-card {
    background: linear-gradient(145deg, rgba(235, 245, 252, 0.97), rgba(228, 240, 250, 0.94));
}

[data-theme="calm-sky"] .reward-badge-showcase {
    background: linear-gradient(145deg, rgba(235, 245, 252, 0.97), rgba(228, 240, 250, 0.94));
    border-color: rgba(88, 184, 232, 0.18);
    box-shadow: 0 16px 34px rgba(30, 58, 80, 0.08);
}

[data-theme="calm-sky"] .reward-badge-showcase h2,
[data-theme="calm-sky"] .reward-badge-showcase h3 {
    color: #1e3a50;
}

[data-theme="calm-sky"] .reward-badge-grid .gv2-badge {
    background: linear-gradient(145deg, rgba(240, 248, 255, 0.97), rgba(235, 245, 252, 0.96));
    border-color: rgba(88, 184, 232, 0.22);
    box-shadow: 0 14px 28px rgba(30, 58, 80, 0.08);
}

[data-theme="calm-sky"] .gv2-badge-label {
    color: #1e3a50;
}

[data-theme="calm-sky"] .reward-badge-note {
    color: #5e8299;
}

[data-theme="calm-sky"] .score-companion {
    background: linear-gradient(135deg, rgba(235, 245, 252, 0.96), rgba(240, 248, 255, 0.96));
    border-color: rgba(88, 184, 232, 0.24);
}

[data-theme="calm-sky"] .reward-card {
    background: linear-gradient(135deg, rgba(238, 246, 255, 0.96), rgba(240, 248, 255, 0.98));
    border-color: rgba(88, 184, 232, 0.2);
}

/* Result-page related cards should feel native to the dark celebration surface */
.result-page-themed .gv2-shelf > * {
    min-height: 100%;
}

/* ==========================================================
   RESULT PAGE — Dynamic theme adaptation for cards/containers
   All three site themes: sunny-play, calm-sky, story-night
   ========================================================== */

/* ── Sunny-play (default light) result page cards ────────── */
:root .result-page-themed,
[data-theme="sunny-play"] .result-page-themed {
    --result-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 250, 242, 0.94));
    --result-card-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 16%, rgba(37, 64, 92, 0.1));
    --result-card-shadow: 0 12px 30px rgba(37, 64, 92, 0.1);
    --result-card-strong: #23324A;
    --result-card-text: #6f7f95;
    --result-badge-bg: linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, rgba(255, 255, 255, 0.96)), rgba(255, 250, 242, 0.98));
    --result-badge-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 22%, rgba(37, 64, 92, 0.1));
    --result-badge-shadow: 0 16px 34px rgba(37, 64, 92, 0.08);
    --result-badge-heading: color-mix(in srgb, var(--theme-accent, #FFD84D) 56%, #23324A);
    --result-badge-item-bg: linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #FFD84D) 18%, rgba(255, 255, 255, 0.96)), rgba(255, 255, 255, 0.98));
    --result-badge-item-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 22%, rgba(255, 255, 255, 0.8));
    --result-badge-item-shadow: 0 14px 28px rgba(37, 64, 92, 0.08);
    --result-prose-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 242, 0.94));
    --result-prose-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, rgba(37, 64, 92, 0.12));
    --result-prose-heading: #23324A;
    --result-prose-text: #6f7f95;
    --result-attempt-bg: rgba(255, 255, 255, 0.8);
    --result-attempt-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, rgba(37, 64, 92, 0.12));
    --result-companion-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #FFD84D) 12%, rgba(255, 255, 255, 0.96)), rgba(255, 255, 255, 0.96));
    --result-companion-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 28%, rgba(37, 64, 92, 0.12));
    --result-reward-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #FFD84D) 8%, rgba(255, 255, 255, 0.96)), rgba(255, 255, 255, 0.98));
    --result-reward-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 24%, rgba(37, 64, 92, 0.1));
    --result-hero-glow-opacity: 0.7;
    --result-section-heading-color: #23324A;
    --result-next-bg:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent, #FFD84D) 10%, white) 0%, transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, rgba(255, 255, 255, 0.96)), rgba(255, 250, 242, 0.98));
    --result-next-border: color-mix(in srgb, var(--theme-accent, #FFD84D) 18%, rgba(37, 64, 92, 0.1));
    --result-next-heading: color-mix(in srgb, var(--theme-accent, #FFD84D) 52%, #23324A);
}

/* ── Calm-sky result page cards ──────────────────────────── */
[data-theme="calm-sky"] .result-page-themed {
    --result-card-bg: linear-gradient(145deg, rgba(240, 248, 255, 0.97), rgba(228, 240, 250, 0.94));
    --result-card-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 16%, rgba(30, 58, 80, 0.1));
    --result-card-shadow: 0 12px 30px rgba(30, 58, 80, 0.1);
    --result-card-strong: #1e3a50;
    --result-card-text: #5e8299;
    --result-badge-bg: linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #58b8e8) 14%, rgba(240, 248, 255, 0.96)), rgba(235, 245, 252, 0.98));
    --result-badge-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 22%, rgba(30, 58, 80, 0.1));
    --result-badge-shadow: 0 16px 34px rgba(30, 58, 80, 0.08);
    --result-badge-heading: color-mix(in srgb, var(--theme-accent, #58b8e8) 56%, #1e3a50);
    --result-badge-item-bg: linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #58b8e8) 18%, rgba(240, 248, 255, 0.96)), rgba(245, 250, 255, 0.98));
    --result-badge-item-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 22%, rgba(200, 225, 245, 0.8));
    --result-badge-item-shadow: 0 14px 28px rgba(30, 58, 80, 0.08);
    --result-prose-bg: linear-gradient(180deg, rgba(240, 248, 255, 0.96), rgba(228, 240, 250, 0.94));
    --result-prose-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 14%, rgba(130, 170, 200, 0.3));
    --result-prose-heading: #1e3a50;
    --result-prose-text: #5e8299;
    --result-attempt-bg: rgba(240, 248, 255, 0.8);
    --result-attempt-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 14%, rgba(130, 170, 200, 0.3));
    --result-companion-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #58b8e8) 12%, rgba(240, 248, 255, 0.96)), rgba(245, 250, 255, 0.96));
    --result-companion-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 28%, rgba(130, 170, 200, 0.35));
    --result-reward-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #58b8e8) 8%, rgba(240, 248, 255, 0.96)), rgba(245, 250, 255, 0.98));
    --result-reward-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 24%, rgba(130, 170, 200, 0.3));
    --result-hero-glow-opacity: 0.5;
    --result-section-heading-color: #1e3a50;
    --result-next-bg:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent, #58b8e8) 10%, rgba(240, 248, 255, 0.9)) 0%, transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #58b8e8) 14%, rgba(240, 248, 255, 0.96)), rgba(235, 245, 252, 0.98));
    --result-next-border: color-mix(in srgb, var(--theme-accent, #58b8e8) 18%, rgba(130, 170, 200, 0.3));
    --result-next-heading: color-mix(in srgb, var(--theme-accent, #58b8e8) 52%, #1e3a50);
}

/* ── Story-night (dark) result page cards ────────────────── */
[data-theme="story-night"] .result-page-themed {
    --result-card-bg: linear-gradient(145deg, rgba(34, 34, 62, 0.95), rgba(28, 28, 52, 0.92));
    --result-card-border: color-mix(in srgb, var(--theme-accent, #a78bfa) 18%, rgba(160, 150, 190, 0.22));
    --result-card-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    --result-card-strong: #e8e4f0;
    --result-card-text: #9a94b0;
    --result-badge-bg: linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #a78bfa) 12%, rgba(34, 34, 62, 0.95)), rgba(28, 28, 52, 0.96));
    --result-badge-border: color-mix(in srgb, var(--theme-accent, #a78bfa) 22%, rgba(160, 150, 190, 0.22));
    --result-badge-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
    --result-badge-heading: color-mix(in srgb, var(--theme-accent, #a78bfa) 56%, #e8e4f0);
    --result-badge-item-bg: linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #a78bfa) 16%, rgba(40, 40, 72, 0.95)), rgba(34, 34, 62, 0.96));
    --result-badge-item-border: color-mix(in srgb, var(--theme-accent, #a78bfa) 22%, rgba(100, 95, 140, 0.3));
    --result-badge-item-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
    --result-prose-bg: linear-gradient(180deg, rgba(34, 34, 62, 0.96), rgba(28, 28, 52, 0.94));
    --result-prose-border: color-mix(in srgb, var(--theme-accent, #a78bfa) 14%, rgba(100, 95, 140, 0.3));
    --result-prose-heading: #e8e4f0;
    --result-prose-text: #9a94b0;
    --result-attempt-bg: rgba(34, 34, 62, 0.8);
    --result-attempt-border: color-mix(in srgb, var(--theme-accent, #a78bfa) 14%, rgba(100, 95, 140, 0.3));
    --result-companion-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #a78bfa) 12%, rgba(34, 34, 62, 0.95)), rgba(28, 28, 52, 0.94));
    --result-companion-border: color-mix(in srgb, var(--theme-accent, #a78bfa) 28%, rgba(100, 95, 140, 0.35));
    --result-reward-bg: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent, #a78bfa) 8%, rgba(34, 34, 62, 0.94)), rgba(28, 28, 52, 0.96));
    --result-reward-border: color-mix(in srgb, var(--theme-accent, #a78bfa) 24%, rgba(100, 95, 140, 0.3));
    --result-hero-glow-opacity: 0.35;
    --result-section-heading-color: #e8e4f0;
    --result-next-bg:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent, #a78bfa) 10%, rgba(34, 34, 62, 0.85)) 0%, transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #a78bfa) 14%, rgba(34, 34, 62, 0.95)), rgba(28, 28, 52, 0.96));
    --result-next-border: color-mix(in srgb, var(--theme-accent, #a78bfa) 18%, rgba(100, 95, 140, 0.3));
    --result-next-heading: color-mix(in srgb, var(--theme-accent, #a78bfa) 52%, #e8e4f0);
}

/* ── Apply dynamic result tokens to cards/containers ─────── */

/* Progress metric cards (lifetime points, streak, badges, plays) */
.result-page-themed .progress-metric-card {
    background: var(--result-card-bg);
    border-color: var(--result-card-border);
    box-shadow: var(--result-card-shadow);
}

.result-page-themed .progress-metric-card strong {
    color: var(--result-card-strong);
}

.result-page-themed .progress-metric-card span {
    color: var(--result-card-text);
}

/* Reward progress card override */
.result-page-themed .reward-progress-card {
    background: var(--result-card-bg);
}

/* Reward badge showcase */
.result-page-themed .reward-badge-showcase {
    background: var(--result-badge-bg);
    border-color: var(--result-badge-border);
    box-shadow: var(--result-badge-shadow);
}

.result-page-themed .reward-badge-showcase h2,
.result-page-themed .reward-badge-showcase h3 {
    color: var(--result-badge-heading);
}

/* Badge grid items */
.result-page-themed .reward-badge-grid .gv2-badge {
    background: var(--result-badge-item-bg);
    border-color: var(--result-badge-item-border);
    box-shadow: var(--result-badge-item-shadow);
}

.result-page-themed .gv2-badge-label {
    color: var(--result-card-strong);
}

.result-page-themed .reward-badge-note {
    color: var(--result-card-text);
}

/* Prose card / quiz-card (Next step sidebar, time taken) */
.result-page-themed .prose-card,
.result-page-themed .quiz-card {
    background: var(--result-prose-bg);
    border-color: var(--result-prose-border);
    box-shadow: var(--result-card-shadow);
}

.result-page-themed .prose-card h2,
.result-page-themed .quiz-card h2,
.result-page-themed .prose-card h3,
.result-page-themed .quiz-card h3 {
    color: var(--result-prose-heading);
}

.result-page-themed .prose-card p,
.result-page-themed .quiz-card p {
    color: var(--result-prose-text);
}

/* Rainbow top bar on cards — adapt for dark */
.result-page-themed .prose-card::before,
.result-page-themed .quiz-card::before {
    background: linear-gradient(90deg, var(--theme-accent, #FFD84D), color-mix(in srgb, var(--theme-accent, #FFD84D) 60%, #34D399));
    background-size: 100% 100%;
    animation: none;
}

/* Score companion (mascot bubble) */
.result-page-themed .score-companion {
    background: var(--result-companion-bg);
    border-color: var(--result-companion-border);
}

.result-page-themed .score-companion-name {
    color: var(--result-card-text);
}

.result-page-themed .score-companion-text {
    color: var(--result-card-strong);
}

/* Score ring label */
.result-page-themed .score-ring-number {
    color: var(--result-card-strong);
}

.result-page-themed .score-ring-label {
    color: var(--result-card-text);
}

/* Reward card (earned/encouragement) */
.result-page-themed .reward-card {
    background: var(--result-reward-bg);
    border-color: var(--result-reward-border);
}

.result-page-themed .reward-card-kicker {
    color: var(--result-card-text);
}

.result-page-themed .reward-card-title {
    color: var(--result-card-strong);
}

/* Reward tier overrides scoped to result page */
.result-page-themed .reward-card-unlocked.reward-gold {
    border-color: rgba(255, 216, 77, 0.45);
    background: var(--result-reward-bg);
}
.result-page-themed .reward-card-unlocked.reward-silver {
    border-color: rgba(176, 190, 197, 0.35);
    background: var(--result-reward-bg);
}
.result-page-themed .reward-card-unlocked.reward-bronze {
    border-color: rgba(255, 171, 145, 0.35);
    background: var(--result-reward-bg);
}
.result-page-themed .reward-card-encouragement {
    border-color: rgba(255, 111, 165, 0.2);
    background: var(--result-reward-bg);
}

/* Logic attempt items (Earlier attempt list) */
.result-page-themed .logic-attempt-item {
    background: var(--result-attempt-bg);
    border-color: var(--result-attempt-border);
}

.result-page-themed .logic-attempt-item strong {
    color: var(--result-card-strong);
}

.result-page-themed .logic-attempt-item p {
    color: var(--result-card-text);
}

.result-page-themed .logic-attempt-item .button {
    color: var(--result-card-strong);
    border-color: var(--result-attempt-border);
}

/* Result-next card */
.result-page-themed .gv2-result-next {
    background: var(--result-next-bg);
    border-color: var(--result-next-border);
}

.result-page-themed .gv2-result-next h3 {
    color: var(--result-next-heading);
}

/* Section headings */
.result-page-themed .section-heading h2 {
    color: var(--result-section-heading-color);
    text-shadow: none;
}

/* Page hero glow */
.result-page-themed .page-hero::after {
    opacity: var(--result-hero-glow-opacity, 0.7);
}

/* Page hero copy text */
.result-page-themed .page-hero-copy h1 {
    color: var(--result-card-strong);
}

.result-page-themed .page-hero-copy p {
    color: var(--result-card-text);
}

.result-page-themed .result-subtitle {
    color: var(--result-card-text);
}

/* Chips inside result page */
.result-page-themed .chip {
    background: color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, var(--result-attempt-bg, rgba(255, 255, 255, 0.8)));
    color: var(--result-card-strong);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #FFD84D) 18%, transparent);
}

.result-page-themed .chip-soft {
    background: color-mix(in srgb, var(--theme-accent, #FFD84D) 8%, var(--result-attempt-bg, rgba(255, 255, 255, 0.8)));
}

/* Hero badges inside result page */
.result-page-themed .hero-badge {
    color: var(--result-card-strong);
    background: color-mix(in srgb, var(--theme-accent, #FFD84D) 16%, var(--result-attempt-bg, rgba(255, 255, 255, 0.8)));
}

/* Buttons inside result page */
.result-page-themed .button-light {
    background: var(--result-attempt-bg);
    color: var(--result-card-strong);
    border-color: var(--result-attempt-border);
}

/* World cards (related games shelf) — theme adaptation */
.result-page-themed .gv2-world-card {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent, #FFD84D) 6%, transparent), transparent 28%),
        var(--result-card-bg);
    border-color: var(--result-card-border);
    box-shadow: var(--result-card-shadow);
}

.result-page-themed .gv2-world-card:hover {
    box-shadow: var(--result-card-shadow), 0 0 0 1px color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, transparent);
}

.result-page-themed .gv2-world-card-body h3,
.result-page-themed .gv2-world-card > h3 {
    color: var(--result-card-strong);
}

.result-page-themed .gv2-world-card-body h3 a {
    color: var(--result-card-strong);
}

.result-page-themed .gv2-world-card-body p,
.result-page-themed .gv2-world-card > p {
    color: var(--result-card-text);
}

.result-page-themed .gv2-world-card-art-themed {
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--theme-accent, #FFD84D) 8%, transparent), transparent 48%),
        var(--result-badge-item-bg);
}

/* GV2 chip inside result page — theme-aware */
.result-page-themed .gv2-chip {
    background: color-mix(in srgb, var(--theme-accent, #FFD84D) 10%, var(--result-attempt-bg, rgba(255, 255, 255, 0.8)));
    color: var(--result-card-strong);
    border-color: color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, transparent);
}

.result-page-themed .gv2-chip-stage {
    background: color-mix(in srgb, var(--theme-accent, #FFD84D) 14%, var(--result-attempt-bg, rgba(255, 255, 255, 0.8)));
    color: var(--result-card-strong);
    border-color: color-mix(in srgb, var(--theme-accent, #FFD84D) 18%, transparent);
}

.result-page-themed .gv2-result-skill {
    background: color-mix(in srgb, var(--theme-accent, #FFD84D) 12%, var(--result-attempt-bg, rgba(255, 255, 255, 0.8)));
    color: var(--result-card-strong);
    border-color: color-mix(in srgb, var(--theme-accent, #FFD84D) 16%, transparent);
}

/* ==========================================================
   STORY-NIGHT — Direct dark overrides for result page
   Explicit selectors to guarantee dark surfaces on all cards
   ========================================================== */
[data-theme="story-night"] .result-page-themed .progress-metric-card,
[data-theme="story-night"] .result-page-themed .reward-progress-card {
    background: linear-gradient(145deg, rgba(34, 34, 62, 0.95), rgba(28, 28, 52, 0.92));
    border-color: rgba(160, 150, 190, 0.22);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="story-night"] .result-page-themed .progress-metric-card strong {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .progress-metric-card span {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .reward-badge-showcase {
    background: linear-gradient(145deg, rgba(38, 38, 68, 0.96), rgba(28, 28, 52, 0.94));
    border-color: rgba(160, 150, 190, 0.22);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
}

[data-theme="story-night"] .result-page-themed .reward-badge-showcase h2,
[data-theme="story-night"] .result-page-themed .reward-badge-showcase h3 {
    color: #d4cfe6;
}

[data-theme="story-night"] .result-page-themed .reward-badge-grid .gv2-badge {
    background: linear-gradient(145deg, rgba(44, 44, 78, 0.95), rgba(34, 34, 62, 0.96));
    border-color: rgba(167, 139, 250, 0.28);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

[data-theme="story-night"] .result-page-themed .gv2-badge-label {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .reward-badge-note {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .prose-card,
[data-theme="story-night"] .result-page-themed .quiz-card {
    background: linear-gradient(180deg, rgba(34, 34, 62, 0.96), rgba(28, 28, 52, 0.94));
    border-color: rgba(160, 150, 190, 0.22);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="story-night"] .result-page-themed .prose-card::before,
[data-theme="story-night"] .result-page-themed .quiz-card::before {
    background: linear-gradient(90deg, var(--theme-accent, #a78bfa), #4ec8b4);
    animation: none;
}

[data-theme="story-night"] .result-page-themed .prose-card h2,
[data-theme="story-night"] .result-page-themed .quiz-card h2,
[data-theme="story-night"] .result-page-themed .prose-card h3,
[data-theme="story-night"] .result-page-themed .quiz-card h3 {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .prose-card p,
[data-theme="story-night"] .result-page-themed .quiz-card p {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .score-companion {
    background: linear-gradient(135deg, rgba(40, 40, 72, 0.95), rgba(30, 30, 56, 0.94));
    border-color: rgba(167, 139, 250, 0.3);
}

[data-theme="story-night"] .result-page-themed .score-companion-name {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .score-companion-text {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .score-ring-number {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .score-ring-label {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .reward-card {
    background: linear-gradient(135deg, rgba(38, 38, 68, 0.94), rgba(28, 28, 52, 0.96));
    border-color: rgba(167, 139, 250, 0.25);
}

[data-theme="story-night"] .result-page-themed .reward-card-kicker {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .reward-card-title {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .reward-card-mascot-says {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .reward-card-unlocked.reward-gold {
    border-color: rgba(245, 213, 101, 0.35);
    background: linear-gradient(135deg, rgba(48, 44, 36, 0.94), rgba(28, 28, 52, 0.96));
}
[data-theme="story-night"] .result-page-themed .reward-card-unlocked.reward-silver {
    border-color: rgba(176, 190, 197, 0.3);
    background: linear-gradient(135deg, rgba(38, 40, 50, 0.94), rgba(28, 28, 52, 0.96));
}
[data-theme="story-night"] .result-page-themed .reward-card-unlocked.reward-bronze {
    border-color: rgba(255, 171, 145, 0.3);
    background: linear-gradient(135deg, rgba(44, 36, 38, 0.94), rgba(28, 28, 52, 0.96));
}
[data-theme="story-night"] .result-page-themed .reward-card-encouragement {
    border-color: rgba(232, 122, 170, 0.2);
    background: linear-gradient(135deg, rgba(42, 30, 42, 0.94), rgba(28, 28, 52, 0.96));
}

[data-theme="story-night"] .result-page-themed .logic-attempt-item {
    background: rgba(34, 34, 62, 0.8);
    border-color: rgba(100, 95, 140, 0.25);
}

[data-theme="story-night"] .result-page-themed .logic-attempt-item strong {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .logic-attempt-item p {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .logic-attempt-item .button {
    color: #e8e4f0;
    border-color: rgba(100, 95, 140, 0.3);
    background: rgba(44, 44, 78, 0.6);
}

[data-theme="story-night"] .result-page-themed .page-hero-copy h1 {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .page-hero-copy p {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .result-subtitle {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .section-heading h2 {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .chip {
    background: rgba(167, 139, 250, 0.16);
    color: #e8e4f0;
    border-color: rgba(167, 139, 250, 0.18);
}

[data-theme="story-night"] .result-page-themed .chip-soft {
    background: rgba(167, 139, 250, 0.1);
}

[data-theme="story-night"] .result-page-themed .hero-badge {
    color: #e8e4f0;
    background: rgba(167, 139, 250, 0.16);
}

[data-theme="story-night"] .result-page-themed .button-light {
    background: rgba(44, 44, 78, 0.7);
    color: #e8e4f0;
    border-color: rgba(100, 95, 140, 0.3);
}

[data-theme="story-night"] .result-page-themed .gv2-world-card {
    background: linear-gradient(145deg, rgba(34, 34, 62, 0.95), rgba(28, 28, 52, 0.92));
    border-color: rgba(160, 150, 190, 0.22);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="story-night"] .result-page-themed .gv2-world-card:hover {
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(167, 139, 250, 0.14);
}

[data-theme="story-night"] .result-page-themed .gv2-world-card-body h3,
[data-theme="story-night"] .result-page-themed .gv2-world-card > h3 {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .gv2-world-card-body h3 a {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .gv2-world-card-body p,
[data-theme="story-night"] .result-page-themed .gv2-world-card > p {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .gv2-world-card-art-themed {
    background: linear-gradient(135deg, rgba(44, 44, 78, 0.8), rgba(34, 34, 62, 0.9));
}

[data-theme="story-night"] .result-page-themed .gv2-chip {
    background: rgba(167, 139, 250, 0.12);
    color: #e8e4f0;
    border-color: rgba(167, 139, 250, 0.16);
}

[data-theme="story-night"] .result-page-themed .gv2-chip-stage {
    background: rgba(167, 139, 250, 0.16);
    color: #e8e4f0;
    border-color: rgba(167, 139, 250, 0.18);
}

[data-theme="story-night"] .result-page-themed .gv2-result-skill {
    background: rgba(167, 139, 250, 0.14);
    color: #e8e4f0;
    border-color: rgba(167, 139, 250, 0.18);
}

[data-theme="story-night"] .result-page-themed .gv2-result-next {
    background: linear-gradient(145deg, rgba(38, 38, 68, 0.95), rgba(28, 28, 52, 0.94));
    border-color: rgba(160, 150, 190, 0.22);
}

[data-theme="story-night"] .result-page-themed .gv2-result-next h3 {
    color: #d4cfe6;
}

[data-theme="story-night"] .result-page-themed .page-hero {
    background:
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.12), transparent 32%),
        linear-gradient(145deg, rgba(22, 22, 42, 0.96), rgba(30, 26, 52, 0.94));
    border-color: rgba(100, 95, 140, 0.25);
}

/* ── Calm-sky — Direct overrides for result page ─────────── */
[data-theme="calm-sky"] .result-page-themed .progress-metric-card,
[data-theme="calm-sky"] .result-page-themed .reward-progress-card {
    background: linear-gradient(145deg, rgba(240, 248, 255, 0.97), rgba(228, 240, 250, 0.94));
    border-color: rgba(88, 184, 232, 0.18);
    box-shadow: 0 12px 30px rgba(30, 58, 80, 0.1);
}

[data-theme="calm-sky"] .result-page-themed .progress-metric-card strong {
    color: #1e3a50;
}

[data-theme="calm-sky"] .result-page-themed .progress-metric-card span {
    color: #5e8299;
}

[data-theme="calm-sky"] .result-page-themed .reward-badge-showcase {
    background: linear-gradient(145deg, rgba(235, 245, 252, 0.97), rgba(228, 240, 250, 0.94));
    border-color: rgba(88, 184, 232, 0.2);
    box-shadow: 0 16px 34px rgba(30, 58, 80, 0.08);
}

[data-theme="calm-sky"] .result-page-themed .reward-badge-showcase h2,
[data-theme="calm-sky"] .result-page-themed .reward-badge-showcase h3 {
    color: #1e3a50;
}

[data-theme="calm-sky"] .result-page-themed .reward-badge-grid .gv2-badge {
    background: linear-gradient(145deg, rgba(240, 248, 255, 0.97), rgba(235, 245, 252, 0.96));
    border-color: rgba(88, 184, 232, 0.24);
    box-shadow: 0 14px 28px rgba(30, 58, 80, 0.08);
}

[data-theme="calm-sky"] .result-page-themed .gv2-badge-label {
    color: #1e3a50;
}

[data-theme="calm-sky"] .result-page-themed .reward-badge-note {
    color: #5e8299;
}

[data-theme="calm-sky"] .result-page-themed .prose-card,
[data-theme="calm-sky"] .result-page-themed .quiz-card {
    background: linear-gradient(180deg, rgba(240, 248, 255, 0.96), rgba(228, 240, 250, 0.94));
    border-color: rgba(88, 184, 232, 0.18);
    box-shadow: 0 12px 30px rgba(30, 58, 80, 0.1);
}

[data-theme="calm-sky"] .result-page-themed .prose-card h2,
[data-theme="calm-sky"] .result-page-themed .quiz-card h2 {
    color: #1e3a50;
}

[data-theme="calm-sky"] .result-page-themed .prose-card p,
[data-theme="calm-sky"] .result-page-themed .quiz-card p {
    color: #5e8299;
}

[data-theme="calm-sky"] .result-page-themed .score-companion {
    background: linear-gradient(135deg, rgba(235, 245, 252, 0.96), rgba(240, 248, 255, 0.96));
    border-color: rgba(88, 184, 232, 0.26);
}

[data-theme="calm-sky"] .result-page-themed .reward-card {
    background: linear-gradient(135deg, rgba(238, 246, 255, 0.96), rgba(240, 248, 255, 0.98));
    border-color: rgba(88, 184, 232, 0.22);
}

[data-theme="calm-sky"] .result-page-themed .logic-attempt-item {
    background: rgba(240, 248, 255, 0.8);
    border-color: rgba(88, 184, 232, 0.16);
}

[data-theme="calm-sky"] .result-page-themed .gv2-world-card {
    background: linear-gradient(145deg, rgba(240, 248, 255, 0.97), rgba(228, 240, 250, 0.94));
    border-color: rgba(88, 184, 232, 0.18);
    box-shadow: 0 12px 30px rgba(30, 58, 80, 0.1);
}

[data-theme="calm-sky"] .result-page-themed .gv2-world-card-body h3 a {
    color: #1e3a50;
}

[data-theme="calm-sky"] .result-page-themed .gv2-world-card-body p {
    color: #5e8299;
}

[data-theme="calm-sky"] .result-page-themed .chip {
    background: rgba(88, 184, 232, 0.14);
    color: #1e3a50;
    border-color: rgba(88, 184, 232, 0.18);
}

[data-theme="calm-sky"] .result-page-themed .hero-badge {
    color: #1e3a50;
    background: rgba(88, 184, 232, 0.14);
}

[data-theme="calm-sky"] .result-page-themed .button-light {
    background: rgba(240, 248, 255, 0.82);
    color: #1e3a50;
    border-color: rgba(88, 184, 232, 0.2);
}

[data-theme="calm-sky"] .result-page-themed .page-hero {
    background:
        radial-gradient(circle at top right, rgba(88, 184, 232, 0.12), transparent 32%),
        linear-gradient(145deg, rgba(235, 245, 252, 0.96), rgba(228, 240, 250, 0.94));
    border-color: rgba(88, 184, 232, 0.18);
}

/* ── Story-night: answer review & history cards ──────────── */
[data-theme="story-night"] .result-page-themed .logic-review-item {
    background: rgba(34, 34, 62, 0.8);
    border-color: rgba(100, 95, 140, 0.25);
}

[data-theme="story-night"] .result-page-themed .logic-review-item strong {
    color: #e8e4f0;
}

[data-theme="story-night"] .result-page-themed .logic-review-item p {
    color: #9a94b0;
}

[data-theme="story-night"] .result-page-themed .logic-review-item.is-correct {
    border-color: rgba(78, 200, 180, 0.3);
    background: rgba(78, 200, 180, 0.08);
}

[data-theme="story-night"] .result-page-themed .logic-review-item.is-wrong {
    border-color: rgba(232, 136, 122, 0.3);
    background: rgba(232, 136, 122, 0.08);
}

[data-theme="story-night"] .result-page-themed .logic-chip-correct {
    background: rgba(78, 200, 180, 0.18);
    color: #7ddac8;
}

[data-theme="story-night"] .result-page-themed .logic-chip-wrong {
    background: rgba(232, 136, 122, 0.18);
    color: #e8887a;
}

[data-theme="story-night"] .result-page-themed .logic-guardrail {
    color: #9a94b0;
    border-color: rgba(100, 95, 140, 0.2);
}