/* ===================================================================
 * Gamification Scorebar (Streak, Mind Points, Energy)
 * Spec: prompts/End User Features/Gamification 2.0/gamification_scorebar.md (section 4)
 * Markup: templates/partials/_scorebar.html   Behavior: static/js/scorebar.js
 * =================================================================== */

:root {
    --fm-scorebar-streak: #FF9810;
    /* Same green as the MP icon (scorebar_mp.svg fill). 2026-09-29: #00B58C;
       #00FA8E read too light on the pill. */
    --fm-scorebar-mp: #00B58C;
    --fm-scorebar-energy: #FB4C8A;
    --fm-scorebar-battery-track: #4D4D67;
    /* Height of the fixed header band on full-screen pages (post-round,
       journey map). The bar and the post-round close button are both
       centered in it. */
    --fm-scorebar-header-h: 56px;
    --fm-scorebar-pill-bg: rgba(102, 102, 102, 0.08);
    /* Pill height. The post-round close (X) button uses the same value
       (appstyle.css) so the two match. */
    --fm-scorebar-pill-h: 34px;
}

.fm-scorebar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    max-width: 100%;
    font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* 2026-09-29 review: Figma 12px x1.5 (too small on device), then x0.75
       (too large) = 13.5px. */
    font-size: 13.5px;
    font-weight: 590;
    line-height: 1;
    /* Informational only (spec 4d): never intercept taps meant for nearby controls. */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

.fm-scorebar[hidden],
.fm-scorebar__item[hidden] {
    display: none;
}

/* In page flow, above the page title (Today, Exercises). */
.fm-scorebar--inline {
    padding: 10px 16px 6px;
}

/* /today and /cards on desktop: the top nav bar already fills the top of the
   page, so the scorebar is mobile-only there (2026-09-29, until the desktop
   nav moves to the left). 768px matches the nav's mobile breakpoint. */
@media (min-width: 769px) {
    .fm-scorebar--mobile-only {
        display: none !important;
    }
}

/* Header band at the top of the viewport on full-screen pages (post-round,
   journey map). Content on those pages starts below the band. */
.fm-scorebar--fixed {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    height: var(--fm-scorebar-header-h);
    z-index: 40;
}

/* Rounded pill behind the items (2026-09-29, Figma "FTUE - 26"). Light gray
   (#666666 at 8%) on white pages; white on colored backgrounds via
   .fm-scorebar--on-color. */
.fm-scorebar__pill {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    box-sizing: border-box;
    height: var(--fm-scorebar-pill-h);
    padding: 0 18px;
    border-radius: 999px;
    background-color: var(--fm-scorebar-pill-bg);
}

.fm-scorebar--on-color .fm-scorebar__pill {
    background-color: #FFFFFF;
}

.fm-scorebar__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.fm-scorebar__icon {
    display: block;
    flex-shrink: 0;
}

/* Icons scale with the 13.5px type (source SVGs are 12x14 and 12x12). */
.fm-scorebar__item--streak .fm-scorebar__icon { width: 13.5px; height: 15.75px; }
.fm-scorebar__item--mp .fm-scorebar__icon { width: 13.5px; height: 13.5px; }

/* The flame's visual weight sits low in its box (thin tip, wide base), so it
   reads lower than the MP icon and numbers even though the boxes are centered.
   Nudge it up optically. */
.fm-scorebar__item--streak .fm-scorebar__icon { transform: translateY(-1.5px); }

.fm-scorebar__value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.fm-scorebar__item--streak .fm-scorebar__value { color: var(--fm-scorebar-streak); }
.fm-scorebar__item--mp .fm-scorebar__value { color: var(--fm-scorebar-mp); }
.fm-scorebar__item--energy .fm-scorebar__value { color: var(--fm-scorebar-energy); }

.fm-scorebar__battery {
    display: block;
    flex-shrink: 0;
    width: 21.4px;
    height: 10.1px;
}

.fm-scorebar__battery-base {
    fill: var(--fm-scorebar-battery-track);
    opacity: 0.25;
}

.fm-scorebar__battery-fill {
    fill: var(--fm-scorebar-energy);
}

/* Screen-reader-only labels (Bootstrap 4's .sr-only equivalent, kept local). */
.fm-scorebar__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Post-round animation (spec 7b3) */
@keyframes fm-scorebar-roll {
    0% { transform: translateY(70%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.fm-scorebar__value--roll {
    animation: fm-scorebar-roll 0.45s ease-out;
}

@keyframes fm-scorebar-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.fm-scorebar__item--counting .fm-scorebar__value {
    animation: fm-scorebar-pulse 0.6s ease-in-out 2;
}

@media (prefers-reduced-motion: reduce) {
    .fm-scorebar__value--roll,
    .fm-scorebar__item--counting .fm-scorebar__value {
        animation: none;
    }
}

/* ------------------------------------------------------------------
   Post-round (levelup.html) header band
   ------------------------------------------------------------------ */

/* No scorebar over the Step 0 dragon celebration; it appears from the
   results slide onward. */
body.levelup:has(.lvup-page0.active) #fm-scorebar {
    visibility: hidden;
}