/* Tracky 2.0 - Glass dark theme. No build tools needed. */

:root {
    --bg: #060708;
    --surface: rgba(255, 255, 255, 0.030);
    --surface-alt: rgba(255, 255, 255, 0.065);
    --border: rgba(236, 234, 227, 0.11);
    --text: #F6F5F1;
    --text-muted: #93958E;
    /* Primary brand = the LOGO emerald (chevron palette). The older brighter
       green (#2BBE5C) is demoted to --success / a secondary accent only. */
    --primary: #047857;
    --primary-light: #34D399;
    --gold: #C9A24B;
    /* Rank-chevron brand colors (scripts/generate_icons.py): dark to bright = climbing. */
    --chev-bottom: #047857;
    --chev-mid: #34D399;
    --chev-top: #86EFAC;
    --rank-gradient: linear-gradient(90deg, var(--chev-bottom), var(--chev-mid) 70%, var(--chev-top));
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --success: #2BBE5C;
    --warning: #E0883C;
    --danger: #C96B62;
    --disabled: #3B3D38;        /* locked glyph / ring */
    --disabled-2: #75776F;      /* faint "never achieved" label text */
    --radius: 14px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html { color-scheme: dark; }

/* Mono numerals — the "instrument" identity. Applied to numeric displays. */
.metric-value, .stat-bar-val, .stat-bar-trend, .streak-count, .streak-pill-count,
.slider-badge, .record-val, .record-date, .alk-week-count, .alk-day-count,
.cmp-this, .cmp-last, .challenge-val, .gh-level b, .gh-coins, .gh-xptext,
.ach-max-days, .streak-days-num, .alk-avg-badge, .ach-count-badge,
#tp-hero-score, #ns-hero-score {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    background:
        radial-gradient(ellipse at 50% -12%, rgba(255, 255, 255, 0.02) 0%, transparent 55%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    /* Native-app feel: no accidental text selection, no long-press callout, no tap flash */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Re-enable selection where it's actually useful (typing/editing) */
input,
textarea,
[contenteditable="true"],
.selectable {
    -webkit-user-select: text;
    user-select: text;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* --- Offline / stale-data banner --- */
#offline-banner {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--warning);
    background: rgba(8, 9, 11, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    z-index: 1100;
    white-space: nowrap;
}
#offline-banner[hidden] { display: none; }
#offline-banner .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warning);
    animation: offline-pulse 2s ease-out infinite;
}
@keyframes offline-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* --- Top bar (profile/account avatar) --- */
#topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
    z-index: 90;
    background: rgba(8, 9, 11, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
}
.topbar-right { display: flex; align-items: center; gap: 10px; flex: none; }
/* Rank module + coins share one chip language (glass pill, hairline border) so
   the strip reads as two grouped modules, not four loose gadgets. The level ring
   sits flush in the pill's left cap; the avatar mirrors the chip height. */
#topbar-stats { display: flex; align-items: center; gap: 8px; overflow: hidden;
    padding: 0 13px 0 0; background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 999px; }
#topbar-stats:empty { display: none; }
.tb-lvl { position: relative; width: 36px; height: 36px; flex: none; }
.tb-ring { display: block; }
.tb-ring-arc { transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.tb-lvl-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--text); }
.tb-rank { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.tb-rank-cap { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.tb-rank-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.tb-coins { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 11px;
    background: var(--surface-alt); border: 1px solid rgba(52, 211, 153, 0.18); border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(214, 255, 234, 0.07); white-space: nowrap; }
.tb-coins:empty { display: none; }
/* Gem numerals: mono (instrument identity) + a vertical emerald gradient
   (bright mint crown -> deep base) clipped to the glyphs, echoing the gem facets. */
.tb-coins b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--primary-light);
    background: linear-gradient(180deg, #B9F5D6 0%, #34D399 48%, #0F9E69 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Premium currency gem (coinIcon() in cards.js). The icon is a self-contained
   faceted SVG (brand emerald --primary-light family); these rules only handle
   placement and a subtle lift so it reads as a real cut jewel. */
.coin { display: inline-block; vertical-align: -0.18em; flex: none;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45)); }
.coin-glow { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 8px rgba(52, 211, 153, 0.55)); }
.topbar-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    /* Identity badge: a spinning emerald rank-ring (::before) around an OPAQUE dark
       disc, so the ring shows only as a rim and the full-colour logo reads on dark.
       The disc fill must be opaque (a translucent var(--surface-alt) let the ring
       bleed through the centre -> whole badge looked emerald). Glow kept very faint. */
    background: #181a1b;
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.12);
    color: var(--text);
    cursor: pointer;
    transition: transform 0.12s;
}
.topbar-avatar::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #047857, #34D399, #86EFAC, #34D399, #047857);
    z-index: -1;
    animation: tb-halo 7s linear infinite;
}
@keyframes tb-halo { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .topbar-avatar::before { animation: none; } }
.topbar-avatar:active { transform: scale(0.92); }
.topbar-avatar svg { display: block; }

/* Mini rank insignia in front of page headlines (trackyMark in cards.js) */
.title-mark { display: inline-block; vertical-align: -0.14em; margin-right: 4px; }

/* --- Bottom navigation --- */
#nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background: rgba(8, 9, 11, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--border);
    padding: 8px 0 calc(8px + var(--safe-bottom));
    z-index: 100;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-decoration: none;
    color: var(--text-muted);
    padding: 10px 0;
    transition: color 0.15s;
}

.nav-item svg { display: block; }
.nav-item.active { color: var(--primary); }

/* --- Main content area --- */
main {
    flex: 1;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(80px + var(--safe-bottom));
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}
/* Home shows the top bar; give its content room to clear the fixed bar. */
body.topbar-on main { padding-top: calc(66px + env(safe-area-inset-top, 0px)); }

/* --- Cards --- */
.card {
    background: var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}

.card-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    margin-bottom: 12px;
}

/* --- Metric display --- */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.metric {
    text-align: center;
    padding: 12px 4px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.metric-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* --- Form elements --- */
.form-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}

.form-group:focus-within {
    border-color: rgba(43, 190, 92, 0.40);
}

.form-group-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.form-group-header .form-label {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text);
    line-height: 1.35;
}

.form-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
    margin: 4px 0;
}

.form-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(43, 190, 92, 0.45), 0 2px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}

.form-slider:active::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: 0 0 14px rgba(43, 190, 92, 0.7), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.slider-badge {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-light);
    min-width: 44px;
    text-align: right;
    flex-shrink: 0;
    line-height: 1.2;
}

input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text);
    font-size: 16px;
    transition: border-color 0.15s;
}

input[type="number"]:focus {
    outline: none;
    border-color: rgba(43, 190, 92, 0.5);
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--success);
}

/* --- Buttons --- */
.btn {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s, box-shadow 0.15s;
}

.btn:active { opacity: 0.75; }

.btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 3px 14px rgba(10, 94, 44, 0.40);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-sm { padding: 10px 14px; font-size: 14px; box-shadow: none; }

/* --- First-impression hero (brand-new, zero-data user) --- */
.fresh-hero { display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 18px 18px 28px; gap: 6px; }
.fresh-hero-mark { margin: 8px 0 2px; }
.fresh-hero-title { font-size: 24px; font-weight: 800; margin: 0; }
.fresh-hero-sub { font-size: 15px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; max-width: 320px; }
.fresh-reward { width: 100%; max-width: 360px; background: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.30); border-radius: var(--radius);
    padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin-bottom: 14px; }
.fresh-reward-lvl { font-weight: 800; font-size: 16px; }
.fresh-reward-lvl.is-now { color: var(--text-muted); }
.fresh-reward-lvl.is-next { color: var(--primary-light); }
.fresh-reward-arrow { color: var(--text-muted); font-weight: 700; }
.fresh-reward-cap { flex-basis: 100%; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fresh-step { width: 100%; max-width: 360px; display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px; margin-bottom: 18px; text-align: left; }
.fresh-step-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--primary); color: #fff; font-weight: 800; display: flex;
    align-items: center; justify-content: center; }
.fresh-step-txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.fresh-step-txt span { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.fresh-cta { width: 100%; max-width: 360px; }
.fresh-secondary { background: none; border: none; color: var(--text-muted); font-size: 13px;
    margin-top: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* --- Login --- */
.login {
    min-height: 100vh;
    max-width: 420px;
    margin: 0 auto;
    padding: 32px 24px calc(32px + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.login-mark { width: 58px; height: 58px; display: block; margin: 0 auto 18px; }
.login-brand {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
    background: linear-gradient(100deg, #86EFAC 0%, #34D399 55%, #059669 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.login-tag {
    color: var(--text-muted);
    margin-bottom: 40px;
    text-align: center;
}
.btn-apple {
    background: #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 28px 0 20px;
    color: var(--text-muted);
    font-size: 13px;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.login-accounts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
}
.login-account {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}
.login-account-name { font-weight: 600; }
.login-account-hint {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 400;
}
.login-input {
    width: 100%;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
}
.login-error {
    min-height: 18px;
    margin-top: 14px;
    color: var(--danger);
    font-size: 13.5px;
    text-align: center;
}
.login-hint {
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}
.login-hint code {
    background: var(--surface-alt);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11.5px;
}

/* --- Category tabs --- */
.category-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

.category-tab {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.category-tab.active {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

/* A day already logged: clearly marked in the secondary green. */
.category-tab.filled:not(.active) {
    color: var(--success);
    border-color: rgba(43, 190, 92, 0.45);
    background: rgba(43, 190, 92, 0.12);
    font-weight: 600;
}

/* --- Streaks --- */
.streak-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.streak-item:last-child { border-bottom: none; }

.streak-count {
    font-size: 18px;
    font-weight: 700;
    color: var(--success);
    min-width: 40px;
    text-align: right;
}

/* --- Loading state --- */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* --- Empty state --- */
.empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-icon { font-size: 48px; margin-bottom: 12px; }

/* --- Designed empty / invite panel (page-level: intentional, not a black void) --- */
.empty-panel {
    max-width: 360px;
    margin: 36px auto;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.empty-panel-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.22);
    color: var(--primary-light);
    margin-bottom: 4px;
}
.empty-panel-title { font-size: 16px; font-weight: 700; color: var(--text); }
.empty-panel-text { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; max-width: 300px; margin: 0; }
.empty-panel .ob-btn { margin-top: 8px; }

/* --- Page header --- */
.page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* --- Entry wizard --- */
.wizard-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.wizard-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.wizard-progress-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.3s, box-shadow 0.3s;
}

.wizard-progress-seg.active {
    background: var(--primary);
    box-shadow: 0 0 8px rgba(43, 190, 92, 0.6);
}

.wizard-step-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.wizard-overwrite-hint {
    font-size: 12px;
    color: var(--warning);
    margin-bottom: 10px;
    text-align: center;
}

input.alkohol-input {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-light);
    text-align: center;
}

/* --- Streak badges (home) --- */
.streak-badges {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    padding: 10px 2px 6px;
}

/* --- Achievement badge popup --- */
#streak-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Regression scatter popup (analysis page) --- */
.corr-row {
    cursor: pointer;
}

.corr-row:active {
    background: rgba(255,255,255,0.05);
}

#scatter-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scatter-popup {
    background: #0B0B0A;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px 16px;
    width: min(92vw, 420px);
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.scatter-popup-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* mirrors .card-title so the popup reads like any other card */
.scatter-popup-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    padding-right: 24px;
}

.scatter-popup-stats {
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0 12px;
}

.scatter-popup-stats b {
    color: var(--text);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.scatter-popup-note {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: 32px 0;
}

.scatter-popup-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
}

.scatter-popup-insight {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 12px;
    padding-top: 12px;
}

.scatter-popup-insight b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.scatter-popup-sig {
    font-size: 12px;
    line-height: 1.45;
    margin-top: 10px;
    font-weight: 600;
}
.scatter-popup-sig.is-sig  { color: var(--primary-light); }
.scatter-popup-sig.not-sig { color: var(--text-muted); }

/* Analysis paywall: blurred teaser behind a veil + a decent unlock button. */
.ana-paywall { position: relative; overflow: hidden; }
.ana-blur { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; }
.ana-blur svg { width: 100%; height: 100%; display: block; }
.ana-veil { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 20px;
    background: radial-gradient(ellipse at center, rgba(6,7,8,0.55) 0%, rgba(6,7,8,0.9) 80%); }
.ana-veil-lock { color: var(--primary-light); opacity: 0.9; }
.ana-veil-head { font-size: 15px; font-weight: 700; color: var(--text); }
.ana-veil-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 280px; }
/* Decent, quiet unlock affordance (outline, not a loud filled button). */
.unlock-btn { margin-top: 4px; background: transparent; border: 1px solid rgba(52,211,153,0.45);
    color: var(--primary-light); padding: 8px 16px; border-radius: 999px; font-size: 13px;
    font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.unlock-btn:hover { background: rgba(52,211,153,0.10); border-color: var(--primary-light); }
.unlock-btn:active { transform: scale(0.97); }
.unlock-btn .unlock-coin { color: var(--primary-light); }

/* --- Disclaimer card (records page) --- */
.disclaimer-card {
    background: rgba(224, 136, 60, 0.08);
    border: 1px solid rgba(224, 136, 60, 0.25);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--warning);
}

/* --- All-time marker legend (character card) --- */
.stat-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    font-size: 10px;
}

.stat-legend-all {
    display: inline-block;
    width: 2px;
    height: 10px;
    background: var(--primary-light);
    border-radius: 1px;
    opacity: 0.6;
    vertical-align: middle;
}

/* --- Streak pills (home) --- */
.streak-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.streak-pills::-webkit-scrollbar { display: none; }

.streak-pill {
    flex-shrink: 0;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 16px;
    text-align: center;
    min-width: 76px;
}

.streak-pill-af {
    border-color: rgba(43, 190, 92, 0.3);
    background: rgba(43, 190, 92, 0.06);
}

.streak-pill-count {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.streak-pill-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
    white-space: nowrap;
}

/* --- Achievement gallery --- */
.ach-count-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
}

.ach-gallery {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ach-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    min-height: 52px;
}

.ach-meta-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
}

.ach-badge-inline {
    display: flex;
    align-items: center;
    line-height: 0;
}

.ach-unlocked {
    border-color: rgba(255,255,255,0.08);
}

.ach-accent {
    width: 3px;
    align-self: stretch;
    flex-shrink: 0;
    background: var(--ac, rgba(59,61,56,0.6));
    min-height: 52px;
}

.ach-locked .ach-accent {
    background: rgba(59,61,56,0.4);
}

.ach-icon-wrap {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Glyph SVGs (from the registry glyph library) only carry a viewBox, so size them
   here. Targets the inner glyph wrapper only — the ring-deco SVG is a direct child. */
.ach-icon-wrap > div > svg { width: 22px; height: 22px; display: block; }

/* --- Transzendenz medal motion (Phoenix and above). Animation sits on the SVGs
   inside the wrapper so the permanent drop-shadow glow (inline, Inferno+) on the
   wrapper itself stays untouched. --- */
@keyframes medal-shim {
    0%, 100% { filter: brightness(1); opacity: 0.95; }
    50%      { filter: brightness(1.16); opacity: 1; }
}
.medal-shim svg { animation: medal-shim 5s ease-in-out infinite; }

@keyframes medal-puls {
    from { transform: scale(0.97); opacity: 0.92; }
    to   { transform: scale(1.04); opacity: 1; }
}
.medal-puls svg { animation: medal-puls 1.9s ease-in-out infinite alternate; }

@keyframes medal-apex {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}
.medal-apex svg { animation: medal-apex 3s ease-in-out infinite; }

.ach-body {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
}

.ach-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ach-locked .ach-name {
    color: var(--text-muted);
}

.ach-desc {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

.ach-meta {
    flex-shrink: 0;
    padding: 8px 12px 8px 4px;
    text-align: right;
}

/* Day count: muted grey, sits under the grade/rarity pills in the meta corner. */
.ach-max-days {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 3px;
    text-align: right;
}

/* Grade pill (fruit + grade, e.g. "Sternfrucht 2") - tier colour via inline style,
   sits next to the rarity pill in the meta-top row. */
.ach-tier-pill {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
    display: inline-block;
}

.ach-locked-lbl {
    font-size: 13px;
    color: rgba(75,85,99,0.6);
    font-weight: 600;
}

.ach-locked {
    opacity: 0.38;
}

.ach-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ach-row .ach-card {
    flex: 1;
    min-width: 0;
}

.ach-flame-side {
    width: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

/* --- Alcohol card (home) --- */
.alk-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    /* clearance for the absolutely-positioned card-help "?" (top:14px right:14px) */
    padding-right: 34px;
}

.alk-avg-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 3px 10px;
}

.alk-week-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.alk-week-summary { flex: 1; }

.alk-week-count {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.alk-week-of {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.55;
    margin-left: 1px;
}

.alk-week-sub {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.alk-stat-pill {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
    line-height: 1.5;
    flex-shrink: 0;
}

.alk-stat-pill span {
    font-size: 10px;
    font-weight: 400;
    display: block;
}

.alk-days {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.alk-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding: 6px 2px;
    border-radius: 8px;
}

.alk-day-today { background: rgba(255,255,255,0.05); }

.alk-day-lbl {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.alk-day-bar-wrap {
    height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

.alk-day-bar {
    width: 12px;
    border-radius: 3px 3px 2px 2px;
}

.alk-day-count {
    font-size: 11px;
    font-weight: 600;
}

.alk-history-sep {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 8px;
    opacity: 0.6;
}

.alk-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    align-items: flex-end;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.alk-strip::-webkit-scrollbar { display: none; }

.alk-wk-dot-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.alk-wk-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.alk-wk-ok  { background: rgba(43,190,92,0.15); color: #2BBE5C; border: 1px solid rgba(43,190,92,0.25); }
.alk-wk-bad { background: rgba(224,136,60,0.15);  color: #E0883C; border: 1px solid rgba(224,136,60,0.25); }

.alk-wk-lbl { font-size: 9px; color: var(--text-muted); white-space: nowrap; }

/* --- Week comparison card (home) --- */
.cmp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 8px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
}
.cmp-row:last-child { border-bottom: none; }

.cmp-label  { color: var(--text-muted); }
.cmp-this   { font-weight: 600; text-align: right; }
.cmp-arrow  { font-size: 11px; min-width: 56px; text-align: center; }
.cmp-last   { color: var(--text-muted); font-size: 12px; text-align: right; }
.cmp-good   { color: var(--success); }
.cmp-bad    { color: var(--warning); }
.cmp-neutral { color: var(--text-muted); }

/* --- Character / RPG stat bars (home) --- */
.stat-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.stat-bar-label {
    font-size: 12px;
    color: var(--text-muted);
    width: 92px;
    flex-shrink: 0;
}

.stat-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    position: relative;
    overflow: visible;
}

.stat-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.stat-bar-avg {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: var(--primary-light);
    border-radius: 1px;
    transform: translateX(-50%);
    opacity: 0.55;
}

.stat-bar-val {
    font-size: 14px;
    font-weight: 700;
    min-width: 33px; /* widest value "10.0" in tabular nums — 20px clipped it */
    text-align: right;
}

.stat-bar-trend {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.trend-up   { color: #2BBE5C; background: rgba(43,190,92,0.12); }
.trend-down { color: #E0883C; background: rgba(224,136,60,0.12); }

.stat-overall {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* --- Weekly challenges (home) --- */
.challenge-row {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.challenge-row:last-child { border-bottom: none; }

.challenge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}

.challenge-val { font-size: 12px; color: var(--text-muted); }
.challenge-done { color: var(--success); font-weight: 700; }

.challenge-track {
    height: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.challenge-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.challenge-fill-done { background: var(--success); }

/* --- Personal records (home) --- */
.record-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.record-row:last-child { border-bottom: none; }

.record-label { font-size: 13px; color: var(--text-muted); flex: 1; }
.record-val   { font-size: 15px; font-weight: 700; color: var(--gold); }
.record-date  { font-size: 11px; color: var(--text-muted); min-width: 48px; text-align: right; }

.wizard-success {
    text-align: center;
    padding: 20px 0;
}

.wizard-success-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(43, 190, 92, 0.12);
    border: 2px solid rgba(43, 190, 92, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 30px;
    color: var(--success);
}

.wizard-success-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.wizard-success-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* ============================================================
   RARITY STREAK EFFECTS
   ============================================================ */

/* Shared shimmer for the gold Legendär text gradient (tags, pills, separator) */
@keyframes leg-shimmer { to { background-position: 200% center; } }

/* Rarity on the Streaks card is shown ONLY via the small pill + the coloured
   left accent bar. No card-wide border/glow ring and no icon animation - the
   cards look identical to common ones apart from the pill and accent. */

/* Gallery badges: no CSS animation effects */

/* Gallery rarity tag (shown under streak name) */
/* Accent bar always follows the tier (metal) colour via --ac on the card,
   never the rarity. The unlocked card sets --ac to the tier colour/gradient. */

/* Rarity pill badge */
.rare-rarity-pill {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
    display: inline-block;
}
.rare-rarity-pill.is-rare      { color: #38BDF8; border-color: rgba(56,189,248,0.4); }
.rare-rarity-pill.is-epic      { color: #3B82F6; border-color: rgba(59,130,246,0.4); }
.rare-rarity-pill.is-mythic    { color: #6366F1; border-color: rgba(99,102,241,0.4); }
.rare-rarity-pill.is-legendary {
    background: linear-gradient(110deg,#C084FC,#A855F7 45%,#C084FC);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-color: rgba(168,85,247,0.4);
    animation: leg-shimmer 6s linear infinite;
}

/* ============================================================
   Onboarding - "build your wizard" flow (route /onboarding)
   ============================================================ */
#ob-root { max-width: 560px; margin: 0 auto; }

.ob-dots { display: flex; gap: 8px; justify-content: center; margin: 4px 0 22px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all .2s; }
.ob-dot.on { background: var(--primary-light); transform: scale(1.3); }
.ob-dot.done { background: var(--primary); }

.ob-step { display: flex; flex-direction: column; gap: 14px; }
.ob-center { align-items: center; text-align: center; min-height: 58vh; justify-content: center; }
.ob-logo { width: 56px; height: 56px; display: block; margin: 0 auto 4px; }
.ob-mark { font-size: 28px; font-weight: 800; letter-spacing: .5px;
    background: linear-gradient(100deg, #86EFAC 0%, #34D399 55%, #059669 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ob-title { font-size: 24px; font-weight: 800; margin: 0; line-height: 1.2; }
.ob-sub { font-size: 15px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.ob-hint { font-size: 13px; color: var(--text-muted); }
.ob-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; width: 100%; }
.ob-list li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.ob-count { font-size: 14px; color: var(--text-muted); }
.ob-count b { color: var(--primary-light); font-size: 18px; }

/* Feature-tour panels (onboarding step 2): cropped app screenshot + caption */
.ob-tour-panel { background: var(--surface-alt); border: 1px solid var(--border);
    border-left: 3px solid var(--primary); border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 12px; }
.ob-tour-panel img { display: block; width: 100%; border-radius: 10px;
    border: 1px solid var(--border); margin-bottom: 10px; }
.ob-tour-cap { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.ob-tour-cap b { color: var(--primary-light); }

.ob-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 9px 14px; font-size: 14px; cursor: pointer; transition: all .15s; }
.ob-chip:active { transform: scale(.96); }
.ob-chip.selected { background: rgba(52, 211, 153, 0.18); border-color: var(--primary-light); color: var(--primary-light); }
.ob-chip.fixed { opacity: .9; cursor: default; }
.ob-chip-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; opacity: .7; margin-left: 4px; }

.ob-q { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.ob-q > span:first-child { font-size: 15px; font-weight: 600; }
.ob-yesno { display: flex; gap: 8px; }

.ob-custom-row { display: flex; gap: 8px; }
.ob-input { flex: 1; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 11px 13px; font-size: 16px; transition: border-color .15s, background .15s; -webkit-appearance: none; appearance: none; }
.ob-input::placeholder { color: var(--text-muted); opacity: .7; }
.ob-input:focus { outline: none; border-color: var(--primary-light); background: rgba(52, 211, 153, 0.06); }
/* tame the unfinished native number spinners (desktop/PWA) - these fields are typed, not stepped */
.ob-input[type="number"]::-webkit-outer-spin-button,
.ob-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-input[type="number"] { -moz-appearance: textfield; }
.ob-custom-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-custom-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-alt); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; }
.ob-custom-chip button { background: none; border: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }

.ob-confirm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ob-confirm-list li { background: rgba(52, 211, 153, 0.16); border: 1px solid var(--primary-light); color: var(--primary-light); border-radius: 10px; padding: 10px 14px; font-weight: 600; }

.ob-avail-list { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 6px; }
.ob-avail { display: grid; grid-template-columns: 24px 1fr; gap: 4px 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; text-align: left; }
.ob-avail.off { opacity: .85; }
.ob-avail-ico { grid-row: span 2; font-size: 16px; }
.ob-avail-label { font-weight: 600; font-size: 15px; }
.ob-avail-nudge { grid-column: 2; font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-bottom: calc(16px + var(--safe-bottom)); }
.ob-btn { border: none; border-radius: var(--radius); padding: 13px 22px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .15s, opacity .15s; }
.ob-btn.sm { padding: 9px 16px; font-size: 14px; }
.ob-btn.primary { background: var(--primary); color: #fff; }
.ob-btn.primary:disabled { opacity: .4; cursor: not-allowed; }
/* Coin chip: emerald-outlined (not filled) - price + gem read as the action. */
.ob-btn.coin { background: transparent; color: var(--primary-light); border: 1.5px solid var(--primary);
    display: inline-flex; align-items: center; gap: 6px; }
.ob-btn.coin:disabled { opacity: .4; cursor: not-allowed; }
.ob-btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.ob-btn:active { transform: scale(.97); }

/* Onboarding - 24h day chart, goal preview, availability dot */
.ob-day { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; }
.ob-day-cap { font-size: 12px; color: var(--text-muted); }
.ob-daybar { display: flex; height: 26px; width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.ob-daybar-seg { height: 100%; }
.ob-day30 { display: block; width: 100%; height: 88px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.ob-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ob-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.ob-leg-dot { width: 9px; height: 9px; border-radius: 50%; }

.ob-preview { display: flex; flex-direction: column; gap: 8px; }
.ob-preview-q { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.ob-preview-label { font-size: 13px; font-weight: 700; color: var(--primary-light); }
.ob-preview-question { font-size: 14px; color: var(--text); }

.ob-avail-dot { grid-row: span 2; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.ob-avail-dot.on { background: var(--success); }

/* --- Onboarding redesign (2026-06-16): intro carousel, goal preview, reminder, refine --- */
.ob-intro { min-height: 70vh; }
.ob-intro-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding-top: 7vh; }
.ob-intro-hero .ob-logo { width: 54px; height: 54px; }
.ob-intro-hero .ob-sub { max-width: 280px; }
.ob-tour-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 20px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 6vh; }
.ob-tour-illu { width: 92px; height: 92px; border-radius: 50%; background: rgba(52, 211, 153, 0.10); display: flex; align-items: center; justify-content: center; color: var(--primary-light); }
.ob-tour-illu svg { width: 42px; height: 42px; margin: 0; }
.ob-tour-card h3 { font-size: 18px; font-weight: 800; margin: 0; }
.ob-tour-card p { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.ob-tour-rail { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.ob-tour-rail i { width: 18px; height: 4px; border-radius: 2px; background: var(--border); transition: all .2s; }
.ob-tour-rail i.on { background: var(--primary-light); width: 26px; }
.ob-intro .ob-actions { margin-top: auto; }

.ob-goal-preview { background: rgba(52, 211, 153, 0.07); border: 1px dashed rgba(52, 211, 153, 0.40); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.ob-goal-preview b { color: var(--primary-light); }

.ob-timegrid { display: flex; gap: 8px; }
.ob-time-opt { flex: 1; text-align: center; font-size: 14px; font-weight: 700; padding: 12px 0; border-radius: 11px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: all .15s; }
.ob-time-opt:active { transform: scale(.97); }
.ob-time-opt.on { background: var(--primary-soft, rgba(52, 211, 153, 0.18)); border-color: var(--primary-light); color: var(--primary-light); }

.ob-refine-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); text-align: center; margin: 4px 0 16px; }

/* --- Early-days home (Tag 1): celebrate + forming streaks + tomorrow hook --- */
.day1-hero { text-align: center; padding: 8px 0 14px; }
.day1-mark { display: flex; justify-content: center; margin-bottom: 10px; }
.day1-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.day1-sub { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 0; max-width: 320px; margin-left: auto; margin-right: auto; }
.day1-tomorrow { background: linear-gradient(135deg, rgba(4, 120, 87, 0.22), rgba(52, 211, 153, 0.10)); border: 1px solid rgba(52, 211, 153, 0.32); }
.day1-tm-t { font-size: 15px; font-weight: 800; margin: 0 0 4px; }
.day1-tm-s { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0 0 12px; }
.day1-rem-on { font-size: 13px; font-weight: 700; color: var(--primary-light); text-align: center; padding: 4px 0; }
.day1-forming { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.day1-forming:last-child { border-bottom: none; padding-bottom: 2px; }
.day1-fm-ring { width: 44px; height: 44px; flex: none; position: relative; }
.day1-fm-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.day1-fm-ico svg { width: 18px; height: 18px; }
.day1-fm-meta { flex: 1; min-width: 0; }
.day1-fm-nm { font-size: 14px; font-weight: 700; }
.day1-fm-pr { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.day1-fm-pill { font-size: 11px; font-weight: 800; color: var(--primary-light); background: rgba(52, 211, 153, 0.18); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.day1-next { display: flex; gap: 11px; align-items: center; cursor: pointer; }
.day1-next-ic { width: 36px; height: 36px; border-radius: 9px; background: rgba(52, 211, 153, 0.12); flex: none; display: flex; align-items: center; justify-content: center; color: var(--primary-light); }
.day1-next-tx b { font-size: 14px; }
.day1-next-tx span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
#day1-gallery-toggle { margin-top: 2px; }

/* Home Level / XP / coins header */
.game-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; min-height: 56px; }
.gh-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.gh-level { font-size: 18px; font-weight: 800; }
.gh-level b { color: var(--text); }
.gh-coins { font-size: 14px; font-weight: 700; color: var(--primary-light); }
.gh-xpbar { height: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; }
.gh-xpfill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 999px; transition: width .4s ease; }
.gh-xptext { font-size: 11px; color: var(--text-muted); margin-top: 6px; text-align: right; }


/* --- Small phones (<390pt: iPhone 13 mini, SE) ---------------------------
   Tighten the fixed topbar so level ring + XP + coins + avatar never clip;
   invisible on 390pt+ devices. */
@media (max-width: 389px) {
    #topbar { padding-left: 12px; padding-right: 12px; }
    #topbar-stats { gap: 7px; padding-right: 11px; }
    .topbar-right { gap: 8px; }
    .tb-rank-val { font-size: 11px; }
    .tb-coins { font-size: 12px; padding: 0 11px; }
}


/* --- Reward feedback (rewards.js): gain pill + level-up overlay ----------
   Same glass language as #offline-banner / #topbar; mono numerals.
   The pill is pointer-events:none so it never blocks taps. */

#reward-pill {
    position: fixed;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    transform: translate(-50%, -14px) scale(0.96);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 17px;
    border-radius: 999px;
    background: rgba(8, 9, 11, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    z-index: 1000;
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100vw - 32px);  /* safety: never let the pill cover the screen */
    box-sizing: border-box;
    transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.4, 1), opacity 0.26s ease;
}
#reward-pill[hidden] { display: none; }
#reward-pill.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
/* `:not(.rw-bottom)` is load-bearing: a pill earned on a no-topbar page (e.g.
   saving the Logbuch on /entry) is bottom-docked, then persists when you switch
   to /home. Without the guard this rule re-adds `top` while `.rw-bottom` keeps
   `bottom` set, so the fixed box stretches top→bottom to fill the screen (and on
   iOS the stretched flex row blows the icon up to viewport width). */
body.topbar-on #reward-pill:not(.rw-bottom) { top: calc(env(safe-area-inset-top, 0px) + 74px); }
/* No topbar (entry, dashboard, …): dock above the bottom nav instead of
   covering the page headline; enter direction flips to slide-up. */
#reward-pill.rw-bottom {
    top: auto;
    bottom: calc(var(--safe-bottom) + 68px);
    transform: translate(-50%, 14px) scale(0.96);
}
#reward-pill.rw-bottom.show { transform: translate(-50%, 0) scale(1); }

.rw-item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.rw-item[hidden] { display: none; }
.rw-item b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.rw-item i { font-style: normal; font-size: 11px; font-weight: 600; opacity: 0.75; }
/* Explicit CSS size: iOS WKWebView ignores the SVG width/height *attributes* in
   a flex row and blows the icon up to fill the viewport (the pill then covers
   the screen). CSS dimensions pin it reliably. */
.rw-item svg { display: block; flex: none; width: 15px; height: 15px; }
.rw-xp { color: var(--primary-light); }
.rw-coins { color: var(--primary-light); }
.rw-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); opacity: 0.6; }
.rw-sep[hidden] { display: none; }

/* Topbar coin counter pulse when a gain lands while the topbar is visible */
.tb-coins-pulse { animation: tb-coins-pulse 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tb-coins-pulse {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(245, 197, 66, 0)); }
    30%  { transform: scale(1.16); filter: drop-shadow(0 0 10px rgba(245, 197, 66, 0.6)); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(245, 197, 66, 0)); }
}

/* Level-up overlay: the topbar level ring, writ large. */
#rw-levelup {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 7, 8, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.24s ease;
}
#rw-levelup[hidden] { display: none; }
#rw-levelup.on { opacity: 1; }
#rw-levelup.closing { opacity: 0; }

.rwl-inner { text-align: center; transform: translateY(-4vh); }

.rwl-stage { position: relative; width: 160px; height: 160px; margin: 0 auto 22px; }
.rwl-ring { display: block; }
.rwl-track { fill: none; stroke: rgba(255, 255, 255, 0.10); stroke-width: 6; }
.rwl-fill {
    fill: none;
    stroke: var(--primary-light);
    stroke-width: 6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 10px rgba(43, 190, 92, 0.45));
}
.rwl-echo {
    fill: none;
    stroke: var(--primary-light);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.rwl-stage.fire .rwl-echo { animation: rwl-echo 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes rwl-echo {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.28); }
}

/* Center insignia: chevrons ignite bottom→top on the burst (rank order —
   trackyMark emits the paths bottom-first so nth-child = ignition order). */
.rwl-chev {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rwl-chev svg { display: block; filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.35)); }
.rwl-chev path { opacity: 0.12; transform-origin: center; transform-box: view-box; }
.rwl-stage.fire .rwl-chev path { animation: rwl-chev-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.rwl-stage.fire .rwl-chev path:nth-child(2) { animation-delay: 0.2s; }
.rwl-stage.fire .rwl-chev path:nth-child(3) { animation-delay: 0.4s; }
@keyframes rwl-chev-pop {
    0%   { opacity: 0.12; transform: scale(0.8) translateY(4px); }
    60%  { opacity: 1;    transform: scale(1.12); }
    100% { opacity: 1;    transform: scale(1); }
}

.rwl-sparks span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c, var(--primary-light));
    opacity: 0;
}
.rwl-stage.fire .rwl-sparks span {
    animation: rwl-spark 0.85s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes rwl-spark {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-62px) scale(0.4); }
    14%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-108px) scale(1); }
}

/* Title + rank stay hidden until the burst (`.fire` on the sibling stage),
   then fade up after the chevrons have ignited. */
.rwl-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--chev-top);
    margin-bottom: 8px;
    opacity: 0;
}
.rwl-rank {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
    opacity: 0;
}
.rwl-stage.fire ~ .rwl-title { animation: rwl-fadeup 0.5s 0.55s forwards; }
.rwl-stage.fire ~ .rwl-rank  { animation: rwl-fadeup 0.5s 0.68s forwards; }
@keyframes rwl-fadeup {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.rwl-gains {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-light);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.rwl-gains.show { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
    #reward-pill { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
    .rwl-sparks, .rwl-echo { display: none; }
    .rwl-stage.fire .rwl-chev path { animation: none; opacity: 1; }
    .rwl-stage.fire ~ .rwl-title, .rwl-stage.fire ~ .rwl-rank { animation: none; opacity: 1; }
    .rwl-gains { transition: none; }
    .tb-coins-pulse { animation: none; }
    .tb-ring-arc { transition: none; }
}

/* ============================================================
   HOME COCKPIT (heute hero + featured streak + sammlung)
   ============================================================ */

/* --- Heute hero: today's score / log-CTA + week strip + nudge --- */
.heute-hero {
    background: linear-gradient(150deg, rgba(4,120,87,0.20), rgba(52,211,153,0.05) 60%, transparent);
    border: 1px solid rgba(52,211,153,0.22);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 12px;
}
.heute-top { display: flex; gap: 14px; align-items: center; }
.hero-score { position: relative; width: 74px; height: 74px; flex: none; }
.hero-score svg { display: block; }
.hero-score-v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-score-v b { font-family: var(--font-mono); font-size: 24px; font-weight: 700; line-height: 1; color: var(--primary-light); }
.hero-score-v i { font-size: 8px; font-style: normal; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.hero-score-empty { display: flex; align-items: center; justify-content: center; opacity: 0.85; }
.heute-co { flex: 1; min-width: 0; }
.heute-eyebrow { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.heute-h { font-size: 19px; font-weight: 800; margin: 2px 0 9px; }
.heute-week { display: flex; gap: 6px; }
.wd { flex: 1; text-align: center; }
.wd i { display: block; font-size: 8px; color: var(--text-muted); font-style: normal; margin-bottom: 3px; }
.wd-dot { width: 100%; aspect-ratio: 1; max-width: 20px; margin: 0 auto; border-radius: 50%;
    background: rgba(255,255,255,0.07); border: 1px solid var(--border); }
.wd.done .wd-dot { background: var(--primary); border-color: var(--primary-light); }
.wd.today .wd-dot { box-shadow: 0 0 0 2px rgba(52,211,153,0.55); }
.wd.miss .wd-dot { background: rgba(201,107,98,0.16); border-color: rgba(201,107,98,0.5); }
.hero-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    margin-top: 13px; padding: 11px 13px; border-radius: 11px; font: inherit; text-align: left; cursor: default; }
.hero-cta.done { background: rgba(43,190,92,0.13); border: 1px solid rgba(43,190,92,0.3); }
.hero-cta.done::before { content: "\2713"; color: var(--success); font-weight: 800; margin-right: 6px; }
.hero-cta.todo { background: var(--primary); border: 1px solid var(--primary); color: #fff; cursor: pointer; }
.hero-cta span { font-size: 14px; font-weight: 700; flex: 1; }
.hero-cta small { font-size: 11px; color: var(--text-muted); }
.hero-cta.todo small { color: rgba(255,255,255,0.7); }
.hero-cta.done span { color: var(--text); }
.hero-nudge { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 9px 11px;
    border-radius: 11px; background: rgba(224,136,60,0.10); border: 1px solid rgba(224,136,60,0.3); }
.hero-nudge-f { flex: none; line-height: 0; }
.hero-nudge p { font-size: 12px; line-height: 1.4; flex: 1; }
.hero-nudge b { color: var(--warning); }

/* --- Featured streak (longest active run) --- */
.feat-streak { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 16px;
    background: linear-gradient(120deg, rgba(127,233,255,0.08), rgba(61,139,255,0.03), transparent);
    border: 1px solid rgba(255,255,255,0.10); margin-bottom: 12px; }
.feat-ring { position: relative; width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; }
.feat-ring > div > svg { width: 25px; height: 25px; display: block; }
.feat-body { flex: 1; min-width: 0; }
.feat-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.feat-name { font-size: 16px; font-weight: 800; margin: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-desc { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-days { text-align: right; flex: none; }
.feat-days b { font-family: var(--font-mono); font-size: 26px; font-weight: 700; display: block; line-height: 1; }
.feat-days i { font-size: 9px; font-style: normal; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; }
.feat-flame { line-height: 0; }

/* --- Card head (title + count) shared by STREAKS / Sammlung --- */
.ach-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

/* Calm informational hero line (not logged yet, before 20:00). */
.hero-soft { margin-top: 13px; font-size: 12px; color: var(--text-muted); }

/* ============================================================
   GALLERY PAGE (/gallery) - grouped, progress-sorted browser
   ============================================================ */
.gal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gal-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text-muted); }
.gal-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 20px; }
.gal-bar i { display: block; height: 100%; border-radius: 999px; background: var(--rank-gradient); }

/* Theme group: a uniform-grey name + count, then a slim grey progress bar.
   Used both on the /gallery page and inline in the home gallery card. */
.gal-grp { margin-bottom: 16px; }
.gal-grp:last-child { margin-bottom: 0; }
.gal-grp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.gal-grp-name { font-size: 13px; font-weight: 700; flex: 1; letter-spacing: 0.01em; color: var(--text-muted); }
.gal-grp-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-muted); }
.gal-grp-bar { height: 3px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 12px; }
.gal-grp-bar i { display: block; height: 100%; border-radius: 999px; background: var(--text-muted); }

/* ============================================================
   Collectible-card streak UI - mini tiles (.cardm) in the
   Sammlung + the full card popup (.cardx). Rarity tints the
   frame (--*-fr border / --*-tint background); the gem medal
   keeps its tier colour. Supersedes the old .streak-ring /
   .streak-badge-name / .streak-popup-* blocks.
   ============================================================ */

/* ---- Mini card (gallery tile) ---- */
.cardm {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 3px 15px;
    height: 74px;
    border-radius: 10px;
    border: 1px solid var(--cardm-fr, var(--border));
    background: rgba(255,255,255,0.035);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.12s ease;
}
.cardm:active { transform: scale(0.95); }
.cardm.locked { border-color: var(--border); background: #0A0B0A; opacity: 0.5; }
.cardm-medal {
    position: relative;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.22);
}
.cardm-medal > div > svg { width: 20px; height: 20px; display: block; }
/* Rarity pill is pinned to the tile bottom (out of flow) so the medal always sits
   at the same centre whether or not a tile carries a rarity tag. */
.cardm-rar {
    position: absolute;
    bottom: 5px; left: 50%;
    transform: translateX(-50%);
    font-size: 7px; padding: 1px 4px;
}
.cardm-flame { position: absolute; top: 5px; right: 5px; display: flex; }
.cardm-flame svg { width: 11px; height: 11px; }
.cardm-risk { position: absolute; top: 5px; left: 5px; display: flex; }

/* ---- Full card popup (sits inside #streak-popup-overlay) ---- */
.cardx {
    position: relative;
    width: 225px;
    border-radius: 18px;
    border: 1.5px solid var(--cardx-fr, var(--border));
    background: linear-gradient(180deg, var(--cardx-tint, transparent), transparent 44%), #0B0B0A;
    box-shadow: 0 16px 44px rgba(0,0,0,0.6);
    text-align: center;
    padding-bottom: 16px;
    overflow: hidden;
}
.cardx.locked { border-color: var(--border); background: #0B0B0A; }
.cardx-top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px 0;
    position: relative; z-index: 5;
}
.cardx-grp {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
}
.cardx-shine { position: relative; z-index: 5; padding: 14px 0 4px; }
.cardx-medal {
    position: relative;
    width: 76px; height: 76px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.28);
}
.cardx-medal > div > svg { width: 34px; height: 34px; display: block; }
.cardx-nm { font-size: 17px; font-weight: 800; color: var(--text); margin: 4px 14px 0; position: relative; z-index: 5; }
.cardx-grade {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    line-height: 1.5;
    position: relative; z-index: 5;
}
.cardx-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 9px 16px 0; position: relative; z-index: 5; }
.cardx-warn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 13px 14px 0;
    font-size: 13px; font-weight: 600; color: #ef4444;
    position: relative; z-index: 5;
}
.cardx-warn svg { flex: none; }
.cardx-stats {
    display: flex;
    margin: 14px 14px 0;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    position: relative; z-index: 5;
}
.cardx-stats > div { flex: 1; padding: 9px 0; }
.cardx-stats > div + div { border-left: 1px solid var(--border); }
.cardx-stats b {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 19px; font-weight: 700; color: var(--text);
}
.cardx-stats small {
    display: block; margin-top: 2px;
    font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-muted);
}
.cardx-stat-flame { display: inline-flex; }
.cardx-stat-flame svg { width: 13px; height: 13px; }
.cardx-next { margin: 12px 16px 0; position: relative; z-index: 5; }
.cardx-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.cardx-bar i { display: block; height: 100%; border-radius: 2px; background: var(--primary-light); }
.cardx-next-line {
    margin-top: 9px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.7;
}
.cardx-next-lbl {
    display: inline-block;
    vertical-align: middle;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em;
    line-height: 1.5;
}
.cardx-locked-lbl { font-size: 13px; color: var(--text-muted); font-style: italic; margin: 14px 0 2px; }

/* STREAKS rows open the same card popup. */
.ach-row[data-streak-id] { cursor: pointer; }
.ach-row[data-streak-id] .ach-card { transition: transform 0.12s ease; }
.ach-row[data-streak-id]:active .ach-card { transform: scale(0.985); }