/* ══════════════════════════════════════════════════════════════════
   FYM Casino — Progression popup + level-up ceremony (UI polish 2026-07)
   Loads AFTER style.css. Everything here either styles the NEW
   surfaces introduced by frontend/js/progression.js (house SVG
   emblems, rank ladder, perk road, badge cabinet preview, lodge
   level-up modal) or overrides the legacy navy/system styling that
   style.css still carries for the same selectors.
   Design language: dark-luxury lodge — Bodoni italic serif display,
   Manrope text, warm gold (tokens.css oklch), gold hairlines.
   ══════════════════════════════════════════════════════════════════ */

/* ── Panel body alignment ──────────────────────────────────────────
   .fym-modal-card sets text-align:center, which the legacy tabs
   leaned on; the new cards want left-aligned copy. Centered pieces
   (.pp-mstat, .pp-cab-empty, .pp-empty, .pp-missions-locked,
   .pp-lad-tip) each declare their own centering. */
.progression-card .pp-body { text-align: left; }
.pp-mstat { text-align: center; }

/* ── Emblem primitives ─────────────────────────────────────────────
   Every house emblem/shield is an inline <svg viewBox="0 0 64 64">.
   The base classes make them behave as sized blocks; per-context
   modifiers below set the actual footprint. */
.pp-emblem,
.pp-shield {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

/* ══════════════════════════════════════════════════════════════════
   1 · LEVEL-UP CEREMONY  (recon item 10 — the old modal was a navy
   system card with a flat button). Card override + all lu-* stages.
   ══════════════════════════════════════════════════════════════════ */
.level-up-card {
    max-width: 340px;
    padding: 30px 24px 22px;
    background:
        linear-gradient(168deg,
            oklch(0.17 0.014 80) 0%,
            oklch(0.115 0.010 80) 52%,
            oklch(0.085 0.008 80) 100%);
    border: 1px solid color-mix(in srgb, var(--tc, #e9c349) 36%, transparent);
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 24px 70px -18px color-mix(in srgb, var(--tc, #e9c349) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Aurora wash — tier-coloured breath from the top edge. */
.lu-aurora {
    position: absolute;
    inset: -30% -20% auto -20%;
    height: 75%;
    background: radial-gradient(ellipse 70% 60% at 50% 0%,
        color-mix(in srgb, var(--tc, #e9c349) 24%, transparent) 0%,
        transparent 68%);
    pointer-events: none;
    animation: luAurora 2400ms var(--easing, ease-out) both;
}
@keyframes luAurora {
    0%   { opacity: 0; transform: translateY(-14px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Foil sheen — one slow diagonal light pass across the card face. */
.lu-foil {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(255, 255, 255, 0.055) 50%,
        transparent 60%);
    background-size: 300% 100%;
    background-position: 120% 0;
    pointer-events: none;
    animation: luFoil 2600ms 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes luFoil {
    0%   { background-position: 120% 0; }
    100% { background-position: -80% 0; }
}

/* Crest — the tier emblem drops in from above. */
.lu-crest {
    width: 58px;
    height: 58px;
    margin: 0 auto 8px;
    animation: luCrest 620ms 120ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lu-crest-emblem { width: 58px; height: 58px; }
@keyframes luCrest {
    0%   { opacity: 0; transform: scale(0.35) translateY(-16px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* French eyebrow above the number stage. */
.lu-eyebrow {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tc, #e9c349) 72%, #f4f1e4 28%);
    animation: luFade 500ms 240ms ease-out both;
}
@keyframes luFade {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Ring-burst stage: two expanding gold rings + a ray fan behind the
   serif number. Heights are fixed so the reveal never reflows. */
.lu-ring-stage {
    position: relative;
    height: 150px;
    margin-top: 2px;
    display: grid;
    place-items: center;
    overflow: visible;
}
.lu-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118px;
    height: 118px;
    margin: -59px 0 0 -59px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--tc, #e9c349) 60%, transparent);
    pointer-events: none;
}
.lu-ring--a { animation: luRing 1000ms 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.lu-ring--b { animation: luRing 1150ms 460ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes luRing {
    0%   { opacity: 0.9; transform: scale(0.45); }
    100% { opacity: 0;   transform: scale(1.45); }
}
.lu-rays-svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    pointer-events: none;
    opacity: 0;
    animation:
        luRaysIn 900ms 320ms ease-out forwards,
        luRaysSpin 26s linear 320ms infinite;
}
@keyframes luRaysIn   { 0% { opacity: 0; } 100% { opacity: 0.5; } }
@keyframes luRaysSpin { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }

/* The number itself — serif italic, gold-foil vertical gradient,
   revealed with a rise + de-blur. Overrides the old 92px flat white. */
.lu-level-big {
    position: relative;
    font-family: var(--font-display, 'Bodoni Moda', Georgia, serif);
    font-style: italic;
    font-weight: 700;
    font-size: 92px;
    line-height: 1;
    letter-spacing: -0.01em;
    margin-top: 0;
    background: linear-gradient(180deg,
        #fdf7e2 0%,
        color-mix(in srgb, var(--tc, #e9c349) 80%, #ffffff) 42%,
        color-mix(in srgb, var(--tc, #e9c349) 58%, #3a2c08) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--tc, #e9c349) 45%, transparent));
    animation: luNum 680ms 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes luNum {
    0%   { opacity: 0; transform: translateY(26px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Quiet caption under the number (was 14px shouting gold). */
.lu-label {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: oklch(0.62 0.015 75);
    margin-top: 6px;
    animation: luFade 500ms 480ms ease-out both;
}

/* Rank lines — serif italic instead of uppercase block caps. */
.lu-rank-line,
.lu-rank-change {
    font-family: var(--font-display, 'Bodoni Moda', Georgia, serif);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    animation: luFade 500ms 560ms ease-out both;
}
.lu-rank-line   { font-size: 23px; margin-top: 10px; }
.lu-rank-change { font-size: 20px; margin-top: 12px; gap: 12px; }
.lu-rank-old    { font-size: 16px; text-decoration-thickness: 1px; }
.lu-rank-arrow  { font-family: var(--font-body, sans-serif); font-size: 14px; }

/* Privileges panel — dark glass, gold hairline. */
.lu-unlocks {
    margin-top: 18px;
    padding: 14px 16px 13px;
    border-radius: 12px;
    background: oklch(0.12 0.010 80 / 0.78);
    border: 1px solid color-mix(in srgb, var(--tc, #e9c349) 24%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: luFade 500ms 640ms ease-out both;
}
.lu-unlocks-title {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3em;
    color: color-mix(in srgb, var(--tc, #e9c349) 80%, #f4f1e4 20%);
}
.lu-unlocks-list li {
    font-size: 12.5px;
    font-weight: 600;
    color: oklch(0.88 0.018 78);
}
.lu-unlock-dot {
    color: var(--tc, #e9c349);
    font-size: 9px;
}

/* Continue button — enamel gold bar, bevelled like a chip edge.
   Overrides the flat system button style.css still defines. */
.lu-continue-btn {
    margin-top: 20px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #171106;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tc, #e9c349) 82%, #ffffff) 0%,
        var(--tc, #e9c349) 46%,
        color-mix(in srgb, var(--tc, #e9c349) 60%, #000000) 100%);
    border: 1px solid color-mix(in srgb, var(--tc, #e9c349) 50%, #000000);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.25),
        0 8px 24px -8px color-mix(in srgb, var(--tc, #e9c349) 65%, transparent);
    cursor: pointer;
    transition: transform 140ms var(--easing, ease), filter 140ms ease, box-shadow 140ms ease;
    animation: luFade 500ms 720ms ease-out both;
}
.lu-continue-btn:hover  { filter: brightness(1.07); transform: translateY(-1px); }
.lu-continue-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.3),
        0 3px 10px -4px color-mix(in srgb, var(--tc, #e9c349) 55%, transparent);
}

/* ══════════════════════════════════════════════════════════════════
   2 · PERKS — the road of privileges (sealed empty state, recon 1)
   ══════════════════════════════════════════════════════════════════ */
.pp-road { display: flex; flex-direction: column; gap: 16px; }

.pp-road-sealed {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    background: linear-gradient(180deg,
        oklch(0.165 0.012 80 / 0.92) 0%,
        oklch(0.12 0.009 80 / 0.92) 100%);
    border: 1px solid oklch(0.75 0.08 85 / 0.20);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pp-road-sealed-icon { flex-shrink: 0; width: 46px; height: 46px; }
.pp-road-seal        { width: 46px;  height: 46px; }
.pp-road-sealed-text { min-width: 0; }
.pp-road-sealed-title {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 17px;
    font-weight: 600;
    color: #f4f1e4;
    line-height: 1.2;
}
.pp-road-sealed-sub {
    font-size: 12px;
    color: #a49c8c;
    margin-top: 3px;
    line-height: 1.4;
}
.pp-road-sealed-sub strong {
    color: #e9c349;
    font-weight: 700;
}

/* Timeline of coming tiers. Each step: 44px emblem + body, joined by
   a vertical rail. Locked tiers are desaturated, the NEXT tier is at
   full colour with a soft halo. */
.pp-road-track {
    display: flex;
    flex-direction: column;
    position: relative;
}
.pp-road-step {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 9px 0;
}
.pp-road-rail {
    position: absolute;
    left: 21px;
    top: 56px;
    bottom: -10px;
    width: 2px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--rc, #e9c349) 35%, transparent) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}
.pp-road-emblem-wrap {
    width: 44px;
    height: 44px;
    filter: saturate(0.3) brightness(0.68);
    transition: filter 240ms ease;
}
.pp-road-step.is-next .pp-road-emblem-wrap {
    filter: none;
    border-radius: 50%;
    box-shadow: 0 0 22px -4px color-mix(in srgb, var(--rc, #e9c349) 55%, transparent);
}
.pp-road-emblem { width: 44px; height: 44px; }
.pp-road-body   { min-width: 0; padding-top: 2px; }
.pp-road-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pp-road-name {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 16px;
    font-weight: 600;
    color: color-mix(in srgb, var(--rc, #e9c349) 45%, #d8d2c2);
}
.pp-road-step.is-next .pp-road-name {
    color: color-mix(in srgb, var(--rc, #e9c349) 70%, #f4f1e4);
}
.pp-road-next-chip {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    color: color-mix(in srgb, var(--rc, #e9c349) 85%, #fff);
    background: color-mix(in srgb, var(--rc, #e9c349) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--rc, #e9c349) 40%, transparent);
}
.pp-road-gate {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(0.55 0.012 75);
}
.pp-road-perks {
    list-style: none;
    padding: 0;
    margin: 5px 0 0;
    display: grid;
    gap: 3px;
}
.pp-road-perks li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #a49c8c;
}
.pp-road-step.is-next .pp-road-perks li { color: #c9c2ad; }
.pp-road-gem {
    color: color-mix(in srgb, var(--rc, #e9c349) 75%, transparent);
    font-size: 8px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   3 · BADGES — cabinet preview empty state (recon 1)
   ══════════════════════════════════════════════════════════════════ */
.pp-cab-empty {
    text-align: center;
    padding: 10px 2px 4px;
}
.pp-cab-eyebrow {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: color-mix(in srgb, #e9c349 75%, #f4f1e4);
}
.pp-cab-title {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 22px;
    font-weight: 600;
    color: #f4f1e4;
    margin-top: 7px;
    line-height: 1.15;
}
.pp-cab-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: #a49c8c;
    max-width: 300px;
    margin: 9px auto 0;
}
.pp-cab-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
    text-align: center;
}
.pp-cab-slot {
    padding: 14px 10px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(233, 195, 73, 0.18);
    border-radius: 12px;
    transition: border-color 200ms ease, background 200ms ease;
}
.pp-cab-slot:hover {
    border-color: rgba(233, 195, 73, 0.38);
    background: rgba(233, 195, 73, 0.04);
}
.pp-cab-shield {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    filter: none;
}
.pp-cab-slot-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #d8d2c2;
    margin-top: 9px;
}
.pp-cab-slot-hook {
    font-size: 10.5px;
    line-height: 1.35;
    color: #8e877d;
    margin-top: 3px;
}
.pp-cab-foot {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 11px;
    color: #6e6a62;
    margin-top: 16px;
    letter-spacing: 0.04em;
}

/* Struck-badge shield sizes (grid cell / detail card / toast). */
.pp-badge-icon    { font-size: 0; width: 40px; height: 40px; }
.pp-badge-shield  { width: 40px; height: 40px; }
.pp-bd-icon       { width: 76px; height: 76px; margin: 0 auto 10px; font-size: 0; }
.pp-bd-shield     { width: 76px; height: 76px; }
.pp-toast-shield,
.pp-toast-emblem  { width: 34px; height: 34px; }

/* ══════════════════════════════════════════════════════════════════
   4 · RANKS — the full seven-tier ladder (recon 1: was a lone card
   with a tractor icon; now every tier, emblems, you-are-here)
   ══════════════════════════════════════════════════════════════════ */
.pp-ladder { padding-bottom: 4px; }

.pp-lad-headline {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    padding: 2px 0 14px;
}
.pp-lad-headline-num {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    color: #e9c349;
    font-feature-settings: 'tnum' 1;
}
.pp-lad-headline-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8e877d;
}
.pp-lad-headline-tier {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-weight: 600;
    font-size: 21px;
    line-height: 1;
}
.pp-lad-headline--max {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 18px;
    color: #e9c349;
    text-align: center;
    padding: 2px 0 14px;
}

.pp-lad-track {
    display: flex;
    flex-direction: column;
    position: relative;
}
.pp-lad-tier {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    padding: 10px 0;
}
.pp-lad-rail {
    position: absolute;
    left: 23px;
    top: 60px;
    bottom: -12px;
    width: 2px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--rc, #e9c349) 38%, transparent) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}
.pp-lad-emblem-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    align-self: start;
}
.pp-lad-emblem { width: 48px; height: 48px; position: relative; }
.pp-lad-tier.locked .pp-lad-emblem { filter: saturate(0.28) brightness(0.6) drop-shadow(0 2px 5px rgba(0,0,0,0.45)); }
.pp-lad-halo {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--rc, #e9c349) 38%, transparent) 0%,
        transparent 70%);
    animation: ppHalo 2600ms ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes ppHalo {
    0%   { opacity: 0.55; transform: scale(0.95); }
    100% { opacity: 1;    transform: scale(1.12); }
}
.pp-lad-check {
    position: absolute;
    right: -3px;
    bottom: -1px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: #07130c;
    background: linear-gradient(180deg, #6fd4a8 0%, #3eb489 55%, #1d7d5a 100%);
    border: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 5px rgba(0, 0, 0, 0.4);
}

.pp-lad-card {
    min-width: 0;
    padding: 11px 13px 12px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid color-mix(in srgb, var(--rc, #e9c349) 55%, transparent);
    border-radius: 12px;
    transition: background 200ms ease, border-color 200ms ease;
}
.pp-lad-tier.locked .pp-lad-card { opacity: 0.78; }
.pp-lad-tier.current .pp-lad-card {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--rc, #e9c349) 12%, transparent) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    border-color: color-mix(in srgb, var(--rc, #e9c349) 45%, transparent);
    border-left-color: var(--rc, #e9c349);
    box-shadow: 0 6px 24px -10px color-mix(in srgb, var(--rc, #e9c349) 55%, transparent);
}

.pp-lad-here {
    display: inline-block;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #171106;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--rc, #e9c349) 80%, #fff) 0%,
        var(--rc, #e9c349) 100%);
    padding: 3px 9px 2px;
    border-radius: 20px;
    margin-bottom: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pp-lad-gate {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(0.55 0.012 75);
    margin-bottom: 6px;
}
.pp-lad-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.pp-lad-name {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.15;
    color: color-mix(in srgb, var(--rc, #e9c349) 42%, #e5e0d2);
}
.pp-lad-tier.current .pp-lad-name {
    color: color-mix(in srgb, var(--rc, #e9c349) 68%, #f4f1e4);
}
.pp-lad-range {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: oklch(0.55 0.012 75);
    font-feature-settings: 'tnum' 1;
}
.pp-lad-bar {
    height: 6px;
    margin-top: 9px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.pp-lad-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rc, #e9c349) 70%, #000) 0%,
        var(--rc, #e9c349) 100%);
    box-shadow: 0 0 8px color-mix(in srgb, var(--rc, #e9c349) 55%, transparent);
    transition: width 480ms var(--easing, ease);
}
.pp-lad-bar-label {
    font-size: 10px;
    color: #8e877d;
    margin-top: 5px;
}
.pp-lad-perks {
    list-style: none;
    padding: 0;
    margin: 7px 0 0;
    display: grid;
    gap: 3px;
}
.pp-lad-perks li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #a49c8c;
}
.pp-lad-tier.current .pp-lad-perks li { color: #c9c2ad; }
.pp-lad-perk-gem {
    color: color-mix(in srgb, var(--rc, #e9c349) 75%, transparent);
    font-size: 8px;
    flex-shrink: 0;
}
.pp-lad-tip {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 11px;
    line-height: 1.5;
    color: #6e6a62;
    text-align: center;
    margin-top: 16px;
    padding: 0 12px;
}

/* ══════════════════════════════════════════════════════════════════
   5 · MISSIONS — emblem icons, redesigned stat chips, honest streak
   ══════════════════════════════════════════════════════════════════ */

/* Stat chips: engraved plaques instead of plain boxes. */
.pp-mstat {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.045) 0%,
        rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid oklch(0.75 0.08 85 / 0.14);
    border-radius: 12px;
    padding: 11px 8px 9px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pp-mstat-v {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    font-size: 23px;
    line-height: 1;
    color: #f4f1e4;
    font-feature-settings: 'tnum' 1;
}
.pp-mstat-l {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8e877d;
    margin-top: 5px;
}
.pp-mstat--hot {
    border-color: rgba(233, 195, 73, 0.42);
    background: linear-gradient(180deg,
        rgba(233, 195, 73, 0.12) 0%,
        rgba(233, 195, 73, 0.03) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 16px -6px rgba(233, 195, 73, 0.35);
}
.pp-mstat--hot .pp-mstat-v { color: #e9c349; }
.pp-mstat--hot .pp-mstat-l { color: color-mix(in srgb, #e9c349 65%, #8e877d); }

/* Streak card — new three-part layout (flame emblem · copy · mult).
   style.css's .pp-streak-main is flex space-between; override to a
   stacked block so label + sub read as one column. */
.pp-streak-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg,
        rgba(240, 139, 62, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(240, 139, 62, 0.16);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.pp-streak-card.has-streak {
    background: linear-gradient(135deg,
        rgba(240, 139, 62, 0.14) 0%,
        rgba(233, 195, 73, 0.05) 100%);
    border-color: rgba(240, 139, 62, 0.32);
    box-shadow: 0 6px 20px -10px rgba(240, 139, 62, 0.45);
}
.pp-streak-flame {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
}
.pp-streak-emblem { width: 38px; height: 38px; }
.pp-streak-card:not(.has-streak) .pp-streak-flame {
    filter: saturate(0.25) brightness(0.7);
}
.pp-streak-main {
    display: block;
    flex: 1;
    min-width: 0;
}
.pp-streak-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #f1ede2;
    line-height: 1.2;
}
.pp-streak-sub {
    font-size: 11px;
    line-height: 1.4;
    color: #a49c8c;
    margin-top: 3px;
}
.pp-streak-multwrap {
    flex-shrink: 0;
    text-align: right;
}
.pp-streak-mult {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    font-size: 21px;
    line-height: 1;
    color: #f08b3e;
    font-feature-settings: 'tnum' 1;
}
.pp-streak-card:not(.has-streak) .pp-streak-mult { color: #8e877d; }
.pp-streak-mult-l {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6e6a62;
    margin-top: 3px;
}

/* Mission row icon — the emblem replaces the 28px emoji glyph. */
.pp-mission-icon {
    font-size: 0;
    width: 40px;
    height: 40px;
    align-self: flex-start;
    margin-top: 2px;
}
.pp-mission-emblem { width: 40px; height: 40px; }
.pp-mission-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #f1ede2;
}
.pp-mission-btn-icon {
    font-size: 15px;
    vertical-align: -3px;
    margin-right: 5px;
}

/* ══════════════════════════════════════════════════════════════════
   6 · Small gap-fills — classes the renderer references that had no
   rule anywhere (legacy detail tabs reachable from Profile).
   ══════════════════════════════════════════════════════════════════ */
.pp-footer-cta-label { letter-spacing: inherit; }
.pp-tab-body { display: block; }

.pp-ref-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.pp-ref-stat {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
}
.pp-ref-stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8e877d;
}
.pp-ref-stat-value {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    font-size: 17px;
    color: #f4f1e4;
    margin-top: 3px;
    font-feature-settings: 'tnum' 1;
}

/* Referrals stat chips reuse .pp-mstat with -num/-label children. */
.pp-mstat-num {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: #f4f1e4;
    font-feature-settings: 'tnum' 1;
}
.pp-mstat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8e877d;
    margin-top: 5px;
}
.pp-rrr-left  { font-size: 12px; color: #c9c2ad; }

.pp-mission-toast-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.pp-mission-toast-body { flex: 1; min-width: 0; }

/* Bonus card / history rows — emblem fallback when the admin template
   carries no icon of its own. */
.pp-bonus-icon svg { width: 32px; height: 32px; }
.pp-bonus-history-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pp-history-emblem { width: 22px; height: 22px; }

/* Reduced motion: freeze the ceremony choreography at its end state. */
@media (prefers-reduced-motion: reduce) {
    .lu-aurora, .lu-foil, .lu-crest, .lu-eyebrow, .lu-level-big,
    .lu-label, .lu-rank-line, .lu-rank-change, .lu-unlocks,
    .lu-continue-btn, .lu-ring, .lu-rays-svg, .pp-lad-halo {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .lu-ring { display: none; }
    .lu-rays-svg { opacity: 0.4; }
}