/* =====================================================================
   Quiz129 design system  (modern refresh, 2026-06-22)
   - Single shared stylesheet for student + admin pages.
   - Light + dark themes via Bootstrap 5.3 [data-bs-theme].
   - Custom-property driven so the whole app re-skins from these tokens.
   ===================================================================== */

/* ---------------- Design tokens ---------------- */
:root {
    --brand: #4f46e5;
    --brand-2: #7c3aed;
    --brand-3: #ec4899;            /* accent for gradients */
    --brand-rgb: 79, 70, 229;

    /* App surfaces (light) */
    --app-bg: #f4f5fb;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(124, 58, 237, .10), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(79, 70, 229, .10), transparent 55%);
    --surface: #ffffff;
    --surface-2: #f8f9fc;
    --border-soft: #e7e9f3;
    --text-soft: #6b7280;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .07);
    --shadow-md: 0 6px 16px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .05);
    --shadow-lg: 0 18px 40px rgba(16, 24, 40, .14);

    --radius: 16px;
    --radius-sm: 12px;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Bootstrap link tint to brand */
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color-rgb: 67, 56, 202;
}

/* Dark theme overrides — Bootstrap auto-themes its own components; these
   re-tint our custom tokens + surfaces to match. */
[data-bs-theme="dark"] {
    --app-bg: #0b1020;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(124, 58, 237, .18), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(79, 70, 229, .18), transparent 55%);
    --surface: #141a2e;
    --surface-2: #1b2238;
    --border-soft: #28304b;
    --text-soft: #9aa3bd;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);

    --bs-body-bg: #0b1020;
    --bs-body-color: #e6e9f5;
    --bs-border-color: var(--border-soft);
}

/* ---------------- Base ---------------- */
html { -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    letter-spacing: -0.011em;
    background-color: var(--app-bg) !important;       /* override Bootstrap bg-light */
    background-image: var(--app-bg-grad);
    background-attachment: fixed;
    color: var(--bs-body-color);
}
main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, .navbar-brand { letter-spacing: -0.02em; }

::selection { background: rgba(var(--brand-rgb), .25); }

/* Comfortable, branded scrollbar */
* { scrollbar-color: rgba(var(--brand-rgb), .5) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(var(--brand-rgb), .45); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-rgb), .7); background-clip: content-box; }

/* Leave room for the fixed mobile bottom nav so content isn't hidden. */
@media (max-width: 991.98px) {
    body.has-bottom-nav { padding-bottom: 76px; }
}

/* ---------------- Navbar (glassmorphic) ---------------- */
.app-navbar {
    background: linear-gradient(100deg, var(--brand), var(--brand-2) 60%, var(--brand-3));
    box-shadow: 0 6px 24px rgba(var(--brand-rgb), .28);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.app-navbar .navbar-brand { font-weight: 800; }
.app-navbar .nav-link { font-weight: 500; opacity: .9; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.app-navbar .nav-link:hover { opacity: 1; transform: translateY(-1px); }
.app-navbar .btn { border-radius: 999px; font-weight: 600; }

/* Theme toggle pill */
.theme-toggle {
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
    line-height: 1;
    padding: .35rem .55rem;
    transition: background .15s var(--ease), transform .15s var(--ease);
}
.theme-toggle:hover { background: rgba(255, 255, 255, .2); transform: rotate(-12deg) scale(1.05); color: #fff; }

/* Explore menu trigger styled as a plain nav link (kills the btn-link underline/blue) */
.app-navbar .dropdown-toggle.btn-link { color: #fff; box-shadow: none; }
.app-navbar .dropdown-toggle.btn-link:hover,
.app-navbar .dropdown-toggle.btn-link:focus { color: #fff; }

/* Account avatar in the navbar */
.nav-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff; font-weight: 700; font-size: .95rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s var(--ease), transform .15s var(--ease);
}
.dropdown:hover .nav-avatar,
.btn:focus .nav-avatar { background: rgba(255, 255, 255, .32); transform: scale(1.05); }
.dropdown-item { border-radius: 8px; padding: .45rem .75rem; }
.dropdown-menu { --bs-dropdown-border-color: var(--border-soft); border-radius: var(--radius-sm); padding: .4rem; }

/* ---------------- Dark-mode chrome compatibility ----------------
   Many pages use bg-white card headers, alert-light panels and
   table-light heads. Re-tint them for dark mode here so we don't have
   to touch every page. Badges keep their own contrast (excluded). */
[data-bs-theme="dark"] .bg-white:not(.badge) {
    background-color: var(--surface) !important;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .card-header.bg-white { background-color: var(--surface-2) !important; }
[data-bs-theme="dark"] .bg-light:not(.badge) { background-color: var(--surface-2) !important; color: var(--bs-body-color); }
[data-bs-theme="dark"] .alert-light { background-color: var(--surface-2); color: var(--bs-body-color); border-color: var(--border-soft); }
[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--surface-2); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--border-soft); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(var(--brand-rgb), .12); }

/* ---------------- Hero ---------------- */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--brand), var(--brand-2) 55%, var(--brand-3));
    box-shadow: 0 18px 44px rgba(var(--brand-rgb), .32);
    border-radius: var(--radius) !important;
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
}
.hero::before {
    width: 340px; height: 340px;
    top: -140px; right: -80px;
    background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 60%);
}
.hero::after {
    width: 260px; height: 260px;
    bottom: -160px; left: 8%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 60%);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-weight: 800; }

/* ---------------- Buttons ---------------- */
.btn { border-radius: 10px; font-weight: 600; transition: transform .12s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    background-image: linear-gradient(120deg, var(--brand), var(--brand-2));
    border: none;
    box-shadow: 0 6px 16px rgba(var(--brand-rgb), .32);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 22px rgba(var(--brand-rgb), .42); }
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
}
.btn-lg { border-radius: 12px; }

/* ---------------- Cards ---------------- */
.card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.row.g-4 .card:hover,
.row.g-3 .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg) !important;
    border-color: rgba(var(--brand-rgb), .35);
}
.card-body { z-index: 1; }

/* Accent left-bar cards keep a rounded, branded edge */
.border-start.border-4 { border-left-width: 4px !important; }

/* ---------------- Forms ---------------- */
.form-control, .form-select { border-radius: 10px; border-color: var(--border-soft); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .22rem rgba(var(--brand-rgb), .18);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background: var(--surface-2); color: var(--bs-body-color); }

/* ---------------- Badges & pills ---------------- */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; padding: .4em .7em; }

/* ---------------- Tables ---------------- */
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-color: var(--border-soft); }

/* ---------------- List groups / alerts radius ---------------- */
.alert { border-radius: var(--radius-sm); border: 1px solid var(--border-soft); }
.list-group-item { border-color: var(--border-soft); }

/* ---------------- Pagination ---------------- */
.pagination { --bs-pagination-color: var(--brand); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); }
.page-link { border-radius: 8px !important; margin: 0 2px; border-color: var(--border-soft); }

/* ---------------- Dropdowns (theme-aware) ---------------- */
[data-bs-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border-soft); }

/* ---------------- Entrance animation ---------------- */
@keyframes eq-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    main > .hero,
    main > .card,
    main > .row > [class*="col"] { animation: eq-rise .45s var(--ease) both; }
    main > .row > [class*="col"]:nth-child(2) { animation-delay: .04s; }
    main > .row > [class*="col"]:nth-child(3) { animation-delay: .08s; }
    main > .row > [class*="col"]:nth-child(4) { animation-delay: .12s; }
    main > .row > [class*="col"]:nth-child(5) { animation-delay: .16s; }
    main > .row > [class*="col"]:nth-child(6) { animation-delay: .2s; }
}

/* ---------------- Dashboard welcome + stat cards ---------------- */
.welcome-card {
    background:
        radial-gradient(600px 200px at 100% 0%, rgba(var(--brand-rgb), .10), transparent 70%),
        var(--surface);
}
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(var(--brand), var(--brand-2));
}
.stat-card.stat-success::before { background: linear-gradient(#16a34a, #22c55e); }
.stat-card.stat-info::before    { background: linear-gradient(#0891b2, #06b6d4); }
.stat-card.stat-warning::before { background: linear-gradient(#d97706, #f59e0b); }
.stat-card.stat-danger::before  { background: linear-gradient(#dc2626, #ef4444); }
.stat-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
}

/* ---------------- Home hero extras ---------------- */
.hero-stat {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-sm);
    padding: 14px 6px;
    backdrop-filter: blur(4px);
}
.hero-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .85rem; font-weight: 600;
    text-decoration: none;
    transition: background .15s var(--ease), transform .15s var(--ease);
}
.hero-chip:hover { background: rgba(255, 255, 255, .32); color: #fff; transform: translateY(-1px); }
.hero .form-control, .hero .form-select { border: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }

/* ---------------- Quiz cards ---------------- */
.quiz-ico {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .16), rgba(124, 58, 237, .18));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.quiz-meta li { margin-bottom: 2px; }

/* ---------------- Back-to-top ---------------- */
.to-top {
    position: fixed; right: 18px; bottom: 88px; z-index: 1031;
    width: 46px; height: 46px; border-radius: 50%; border: none;
    color: #fff; font-size: 1.2rem; line-height: 1;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), filter .15s var(--ease);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { filter: brightness(1.1); }
@media (min-width: 992px) { .to-top { bottom: 24px; } }

/* ---------------- Admin sidebar ---------------- */
.admin-sidebar { background: var(--surface); border-right: 1px solid var(--border-soft); }
.admin-sidebar-label { color: var(--text-soft); letter-spacing: .08em; }
.admin-nav .nav-link {
    color: var(--bs-body-color);
    border-radius: 10px; margin-bottom: 2px; padding: .55rem .8rem; gap: .6rem;
    transition: background .12s var(--ease), color .12s var(--ease), transform .12s var(--ease);
}
.admin-nav .nav-link:hover { background: rgba(var(--brand-rgb), .08); transform: translateX(2px); }
.admin-nav .nav-link.active {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
    box-shadow: 0 6px 14px rgba(var(--brand-rgb), .3);
}
.admin-nav-icon { width: 1.5rem; text-align: center; }

/* ---------------- Smart Practice: subject icon + level ladder ---------------- */
.adaptive-ico {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .16), rgba(124, 58, 237, .18));
}
.level-ladder { display: flex; align-items: flex-start; margin: 6px 0 14px; }
.ladder-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.ladder-step::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--border-soft); z-index: 0; }
.ladder-step:first-child::before { display: none; }
.ladder-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border-soft); z-index: 1; }
.ladder-label { font-size: .7rem; color: var(--text-soft); margin-top: 5px; font-weight: 600; text-align: center; }
.ladder-step.current .ladder-dot { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .15); }
.ladder-step.current .ladder-label { color: var(--brand); }
.ladder-step.rec .ladder-dot { border-color: var(--brand); }
.ladder-step.rec::after { content: "★"; position: absolute; top: -13px; font-size: .7rem; color: var(--brand); }

/* ---------------- Dashboard "next step" card ---------------- */
.nextstep-card {
    border: none;
    background: linear-gradient(120deg, var(--brand), var(--brand-2) 65%, var(--brand-3));
    box-shadow: 0 10px 26px rgba(var(--brand-rgb), .32);
}
.nextstep-ico {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
}

/* ---------------- Flash toasts ---------------- */
.eq-toast {
    background: var(--surface); color: var(--bs-body-color);
    border: 1px solid var(--border-soft); border-left: 4px solid var(--brand);
    box-shadow: var(--shadow-md); border-radius: var(--radius-sm);
}
.eq-toast .toast-body { font-weight: 500; }
.eq-toast-success { border-left-color: #16a34a; }
.eq-toast-danger  { border-left-color: #dc3545; }
.eq-toast-warning { border-left-color: #f59e0b; }
.eq-toast-info    { border-left-color: #0ea5e9; }
.eq-toast-primary { border-left-color: var(--brand); }

/* ---------------- Insights: weekly activity strip ---------------- */
.activity-week { display: flex; gap: 8px; }
.activity-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.activity-dot { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.activity-day.on .activity-dot { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; box-shadow: 0 3px 8px rgba(var(--brand-rgb), .35); }
.activity-label { font-size: .7rem; color: var(--text-soft); font-weight: 600; }

/* Recommended course status */
.course-status.status-recommend { background: linear-gradient(120deg, #f59e0b, #d97706); color: #fff; }

/* ---------------- Notifications feed ---------------- */
.notif-ico {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: var(--surface-2); border: 1px solid var(--border-soft);
}
.list-group-item.notif-unread { border-left: 3px solid var(--brand); background: rgba(var(--brand-rgb), .05); }

/* ---------------- Certificate verification result ---------------- */
.verify-result { background:
    radial-gradient(500px 200px at 50% -40%, rgba(22, 163, 74, .12), transparent 70%),
    var(--surface);
}
.verify-seal {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 8px 20px rgba(22, 163, 74, .4);
}

/* ---------------- Quiz Championship ---------------- */
.champ-hero {
    background: linear-gradient(120deg, var(--brand-2), var(--brand) 55%, var(--brand-3));
    box-shadow: 0 18px 40px rgba(var(--brand-rgb), .32);
}
.hub-tile { transition: transform .14s var(--ease, ease), box-shadow .14s var(--ease, ease); }
.hub-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }

/* ---------------- Premium upgrade page ---------------- */
.premium-hero {
    background: linear-gradient(120deg, #d4af37, #b8860b 52%, #7c3aed);
    box-shadow: 0 18px 40px rgba(184, 134, 11, .32);
}
.perk-ico {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
    background: rgba(var(--brand-rgb), .12);
}
/* Premium membership expiry ring (conic gauge) */
.prem-ring {
    width: 116px; height: 116px; border-radius: 50%;
    background: conic-gradient(#f0ad4e calc(var(--pct, 0) * 1%), var(--bs-border-color, #dee2e6) 0);
    display: grid; place-items: center;
}
.prem-ring-life { background: conic-gradient(#d4af37 100%, #d4af37 0); }
.prem-ring-inner {
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--bs-body-bg, #fff);
    display: grid; place-items: center; align-content: center; text-align: center;
    font-weight: 800; font-size: 1.7rem; line-height: 1;
}
.prem-ring-inner small { display: block; font-size: .62rem; font-weight: 600; color: var(--bs-secondary-color, #6c757d); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* ---------------- Certificate celebration header ---------------- */
.cert-celebrate { background:
    radial-gradient(600px 220px at 50% -40%, rgba(var(--brand-rgb), .12), transparent 70%),
    var(--surface);
    border: 1px solid var(--border-soft);
}

/* ---------------- Learn overview banner ---------------- */
.learn-overview { background:
    radial-gradient(500px 160px at 0% -40%, rgba(var(--brand-rgb), .08), transparent 70%),
    var(--surface);
}
.learn-kpi { font-size: .95rem; color: var(--text-soft); }
.learn-kpi strong { color: var(--bs-body-color); font-size: 1.15rem; }

/* ---------------- Insights: donut + chart ---------------- */
.donut {
    position: relative; width: 160px; height: 160px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(#16a34a 0 var(--c1, 0%), #dc3545 var(--c1, 0%) var(--c2, 0%), #94a3b8 var(--c2, 0%) 100%);
}
.donut::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: var(--surface); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.donut-legend { display: flex; flex-direction: column; gap: .45rem; min-width: 160px; }
.donut-legend > div { display: flex; align-items: center; gap: .5rem; }
.donut-legend .dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.dot-correct { background: #16a34a; }
.dot-incorrect { background: #dc3545; }
.dot-skipped { background: #94a3b8; }
.trend-chart .trend-axis { stroke: var(--border-soft); }
.subject-bar { height: 6px; border-radius: 999px; background: rgba(var(--brand-rgb), .14); }

/* ---------------- Filter chips ---------------- */
.filter-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 1.5px solid var(--border-soft); border-radius: 999px;
    padding: .35rem .85rem; font-size: .85rem; font-weight: 600;
    color: var(--bs-body-color); text-decoration: none; background: var(--surface);
    transition: border-color .12s var(--ease), background .12s var(--ease), color .12s var(--ease), transform .1s var(--ease);
}
.filter-chip:hover { border-color: rgba(var(--brand-rgb), .55); background: rgba(var(--brand-rgb), .06); transform: translateY(-1px); }
.filter-chip.active { background: linear-gradient(120deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(var(--brand-rgb), .3); }

/* ---------------- Continue-learning tile ---------------- */
.continue-tile {
    display: flex; align-items: center; gap: 12px; height: 100%;
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 12px 14px; text-decoration: none; color: var(--bs-body-color);
    background: var(--surface-2);
    transition: border-color .12s var(--ease), transform .12s var(--ease), box-shadow .12s var(--ease);
}
.continue-tile:hover { border-color: rgba(var(--brand-rgb), .5); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--bs-body-color); }

/* ---------------- Course tiles (learn page) ---------------- */
.course-tile { position: relative; overflow: hidden; }
.course-tile.completed { border-color: rgba(22, 163, 74, .45); }
.course-cover { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; }
.course-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(140px 90px at 85% -25%, rgba(255, 255, 255, .35), transparent 70%); }
.course-cover-ico { position: relative; z-index: 1; font-size: 2.6rem; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .2)); }
.course-cover-math { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.course-cover-science { background: linear-gradient(135deg, #0891b2, #0d9488); }
.course-cover-english { background: linear-gradient(135deg, #db2777, #7c3aed); }
.course-cover-gk { background: linear-gradient(135deg, #ea580c, #d97706); }
.course-cover-computers { background: linear-gradient(135deg, #475569, #0f172a); }
/* Slugs come from subject_css(), never strtolower() — a multi-word subject
   would otherwise emit a class name containing a space. */
.course-cover-social-studies { background: linear-gradient(135deg, #16a34a, #0d9488); }
.course-cover-business-studies { background: linear-gradient(135deg, #b45309, #f59e0b); }
.course-cover-evs { background: linear-gradient(135deg, #65a30d, #16a34a); }
.course-cover-default { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.course-status {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: #1f2937; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.course-status.status-done { background: #16a34a; color: #fff; }
.course-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.course-progress { height: 6px; border-radius: 999px; background: rgba(var(--brand-rgb), .14); }
.course-progress .progress-bar { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.course-tile.completed .course-progress .progress-bar { background: linear-gradient(90deg, #16a34a, #22c55e); }

/* ---------------- Mini progress ring (learn / module) ---------------- */
.mini-ring {
    position: relative; width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(var(--ring-c, var(--brand)) calc(var(--p, 0) * 1turn), rgba(var(--brand-rgb), .15) 0);
}
.mini-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.mini-ring .mini-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; z-index: 1; }
.mini-ring.done { --ring-c: #16a34a; }
.mini-ring.lg { width: 72px; height: 72px; }
.mini-ring.lg::after { inset: 7px; }
.mini-ring.lg .mini-ring-num { font-size: 1rem; }
.course-header-card { background:
    radial-gradient(500px 180px at 0% -40%, rgba(var(--brand-rgb), .10), transparent 70%),
    var(--surface);
}

/* ---------------- Lesson timeline (module page) ---------------- */
.lesson-timeline { position: relative; }
.lesson-node { position: relative; padding-left: 56px; margin-bottom: 18px; }
.lesson-node::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: -18px; width: 2px; background: var(--border-soft); }
.lesson-node:last-child::before { display: none; }
.lesson-marker {
    position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 700; z-index: 1;
    background: var(--surface-2); border: 2px solid var(--border-soft); color: var(--text-soft);
}
.lesson-node.done .lesson-marker { background: linear-gradient(135deg, #16a34a, #22c55e); border-color: transparent; color: #fff; }
.lesson-card { margin: 0; }

/* ---------------- Leaderboard podium ---------------- */
.podium-card { background:
    radial-gradient(600px 220px at 50% -40%, rgba(var(--brand-rgb), .10), transparent 70%),
    var(--surface);
}
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding-top: 10px; }
.podium-slot { flex: 1 1 0; max-width: 190px; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.podium-medal { font-size: 1.6rem; line-height: 1; }
.podium-avatar {
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #fff; font-size: 1.4rem; margin: 4px 0;
    box-shadow: var(--shadow-sm);
}
.podium-1 .podium-avatar { width: 74px; height: 74px; font-size: 1.8rem; background: linear-gradient(135deg, #f5d76e, #d4af37); box-shadow: 0 6px 18px rgba(212, 175, 55, .5); }
.podium-2 .podium-avatar { background: linear-gradient(135deg, #cfd4da, #9aa1ab); }
.podium-3 .podium-avatar { background: linear-gradient(135deg, #e0a878, #b9763f); }
.podium-name { font-weight: 700; font-size: .9rem; max-width: 100%; }
.podium-slot.is-me .podium-name { color: var(--brand); }
.podium-points { font-size: .8rem; color: var(--text-soft); margin-bottom: 6px; }
.podium-stand {
    width: 100%; border-radius: 12px 12px 0 0;
    display: flex; align-items: flex-start; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.4rem; padding-top: 8px;
    transform-origin: bottom; animation: podium-grow .6s var(--ease) both;
}
.podium-1 .podium-stand { height: 96px; background: linear-gradient(180deg, #d4af37, #b8860b); animation-delay: .12s; }
.podium-2 .podium-stand { height: 70px; background: linear-gradient(180deg, #9aa1ab, #6c757d); }
.podium-3 .podium-stand { height: 52px; background: linear-gradient(180deg, #b9763f, #8a572c); animation-delay: .06s; }
@keyframes podium-grow { from { transform: scaleY(.25); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .podium-stand { animation: none; } }
@media (max-width: 575.98px) {
    .podium { gap: 8px; }
    .podium-avatar { width: 48px; height: 48px; font-size: 1.2rem; }
    .podium-1 .podium-avatar { width: 60px; height: 60px; font-size: 1.5rem; }
    .podium-name { font-size: .78rem; }
}

/* Personal rank banner */
.myrank-banner { background:
    linear-gradient(120deg, rgba(var(--brand-rgb), .08), transparent 60%),
    var(--surface);
    border-left: 4px solid var(--brand);
}
.myrank-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 56px; height: 56px; padding: 0 10px; border-radius: 14px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; font-weight: 800; font-size: 1.3rem; flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(var(--brand-rgb), .35);
}

/* ---------------- Auth split layout ---------------- */
.auth-card { border: 1px solid var(--border-soft); border-radius: var(--radius); }
.auth-aside {
    background: linear-gradient(150deg, var(--brand), var(--brand-2) 58%, var(--brand-3));
    position: relative; overflow: hidden;
}
.auth-aside::before {
    content: ""; position: absolute; width: 340px; height: 340px; top: -130px; right: -110px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .25), transparent 60%);
}
.auth-aside::after {
    content: ""; position: absolute; width: 240px; height: 240px; bottom: -120px; left: -80px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 60%);
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-points li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .9rem; font-weight: 500; }
.auth-point-ico { font-size: 1.2rem; line-height: 1.35; flex-shrink: 0; }

/* Password show/hide + strength meter */
.pw-toggle { border-color: var(--border-soft); }
.pw-strength-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pw-strength-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: #dc3545; transition: width .25s var(--ease), background .25s var(--ease); }
.pw-strength[data-level="1"] .pw-strength-bar span { background: #f59e0b; }
.pw-strength[data-level="2"] .pw-strength-bar span { background: #16a34a; }

/* Password requirement checklist */
.pw-rules li { transition: color .15s var(--ease); }
.pw-rules li.met { color: #16a34a; }
.pw-rules li.met::marker { content: none; }

/* Caps Lock warning */
.caps-warn { font-weight: 600; }

/* Auth trust stats (count-up) */
.auth-stats { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 1rem; }
.auth-stat-num { font-size: 1.25rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.auth-stat-label { font-size: .72rem; opacity: .8; text-transform: uppercase; letter-spacing: .03em; }

/* Registration "profile head start" meter */
.head-start { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; }
.head-start-pct { color: var(--brand); transition: color .2s var(--ease); }
.head-start.full .head-start-pct { color: #16a34a; }
.head-start-bar { height: 7px; border-radius: 999px; background: rgba(var(--brand-rgb), .14); overflow: hidden; }
.head-start-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .4s var(--ease); }
.head-start.full .head-start-bar span { background: linear-gradient(90deg, #16a34a, #22c55e); }

/* ---------------- Quiz-taking screen ---------------- */
.quiz-bar {
    position: sticky; top: 56px; z-index: 1020;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(160%) blur(8px);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
}
.quiz-progress { height: 8px; border-radius: 999px; background: rgba(var(--brand-rgb), .14); }
.quiz-progress .progress-bar { background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .3s var(--ease); }
.timer-pill {
    font-variant-numeric: tabular-nums; font-weight: 700;
    background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--bs-body-color);
    border-radius: 999px; padding: .4rem .85rem; font-size: 1.05rem; min-width: 82px; text-align: center;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.timer-pill.warn { background: #fff3cd; color: #7a5b00; border-color: #ffe69c; }
.timer-pill.danger { background: #f8d7da; color: #842029; border-color: #f1aeb5; animation: timer-pulse 1s infinite; }
@keyframes timer-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
[data-bs-theme="dark"] .timer-pill.warn { background: rgba(255, 193, 7, .18); color: #ffda6a; border-color: rgba(255, 193, 7, .35); }
[data-bs-theme="dark"] .timer-pill.danger { background: rgba(220, 53, 69, .22); color: #ff8d97; border-color: rgba(220, 53, 69, .4); }

.quiz-q .q-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(var(--brand-rgb), .12); color: var(--brand);
    font-size: .82rem; font-weight: 700; margin-right: 4px;
}
.quiz-q .q-check { color: #16a34a; font-weight: 800; opacity: 0; transform: scale(.5); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.quiz-q.answered { border-color: rgba(22, 163, 74, .45); }
.quiz-q.answered .q-check { opacity: 1; transform: none; }

/* One-question-at-a-time stepper: show only the current card. */
.quiz-stepping .quiz-q { display: none; }
.quiz-stepping .quiz-q.current { display: block; animation: q-fade .25s var(--ease); }
@keyframes q-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Question navigator dots */
.q-navigator { }
.q-dot {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--bs-body-color);
    font-size: .82rem; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.q-dot:hover { transform: translateY(-1px); border-color: rgba(var(--brand-rgb), .5); }
.q-dot.answered { background: rgba(22, 163, 74, .15); border-color: rgba(22, 163, 74, .5); color: #16a34a; }
.q-dot.flagged { border-color: #f0ad4e; box-shadow: inset 0 0 0 2px rgba(240, 173, 78, .5); }
.q-dot.flagged::after { content: "⚑"; position: absolute; margin-top: -22px; margin-left: 16px; font-size: .6rem; color: #f0ad4e; }
.q-dot { position: relative; }
.q-dot.current { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(var(--brand-rgb), .4); }

/* Review-before-submit grid (reuses .q-dot chips) */
.qr-grid { display: flex; flex-wrap: wrap; gap: 6px; }

/* Flag-for-review button on a question card */
.q-flag { color: var(--bs-secondary-color, #9aa0a6); opacity: .6; line-height: 1; font-size: 1.05rem; background: none; border: 0; transition: opacity .15s var(--ease), transform .12s var(--ease); }
.q-flag:hover { opacity: 1; transform: scale(1.15); }
.quiz-q.flagged { border-color: #f0ad4e; }
.quiz-q.flagged .q-flag { color: #f0ad4e; opacity: 1; }

.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 575.98px) { .options-grid { grid-template-columns: 1fr; } }
.option-card {
    position: relative; display: flex; align-items: center; gap: 10px; margin: 0;
    border: 1.5px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; cursor: pointer;
    transition: border-color .12s var(--ease), background .12s var(--ease), transform .08s var(--ease);
}
.option-card:hover { border-color: rgba(var(--brand-rgb), .5); background: rgba(var(--brand-rgb), .04); }
.option-card:active { transform: scale(.99); }
.option-card .opt-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt-letter {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
    background: var(--surface-2); border: 1px solid var(--border-soft);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
    transition: background .12s var(--ease), color .12s var(--ease);
}
.opt-text { font-size: .95rem; }
.option-card:has(.opt-input:checked) { border-color: var(--brand); background: rgba(var(--brand-rgb), .10); box-shadow: 0 0 0 .15rem rgba(var(--brand-rgb), .15); }
.option-card:has(.opt-input:checked) .opt-letter { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent; }
.option-card:has(.opt-input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------------- Result score ring ---------------- */
.score-ring { position: relative; width: 170px; height: 170px; margin: 8px auto 6px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .ring-track { fill: none; stroke: rgba(var(--brand-rgb), .12); stroke-width: 12; }
.score-ring .ring-fill {
    fill: none; stroke: var(--ring-color, var(--brand)); stroke-width: 12; stroke-linecap: round;
    stroke-dasharray: 327; animation: ring-fill 1.1s var(--ease) forwards;
}
@keyframes ring-fill { from { stroke-dashoffset: 327; } to { stroke-dashoffset: calc(327 - 327 * var(--p)); } }
.score-ring.pass { --ring-color: #16a34a; }
.score-ring.fail { --ring-color: var(--text-soft); }
.score-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-ring-num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.result-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    .score-ring .ring-fill { animation: none; stroke-dashoffset: calc(327 - 327 * var(--p)); }
}

/* ---------------- Result breakdown (per-question strip + topic bars) ---------------- */
.qstrip { display: flex; flex-wrap: wrap; gap: 6px; }
.qcell {
    width: 30px; height: 30px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; text-decoration: none;
    border: 1px solid var(--border-soft); color: var(--text-soft);
    background: var(--surface-2); transition: transform .12s ease, box-shadow .12s ease;
}
a.qcell:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, .15); }
.qcell.ok { background: rgba(22, 163, 74, .15); border-color: rgba(22, 163, 74, .5); color: #15803d; }
.qcell.no { background: rgba(220, 38, 38, .15); border-color: rgba(220, 38, 38, .5); color: #b91c1c; }
.qkey { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.qkey.ok { background: rgba(22, 163, 74, .6); }
.qkey.no { background: rgba(220, 38, 38, .6); }
.qkey.blank { background: var(--surface-2); border: 1px solid var(--border-soft); }
.topic-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.topic-name { flex: 0 0 32%; max-width: 32%; font-size: .85rem; font-weight: 600; }
.topic-bar { flex: 1 1 auto; height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.topic-bar-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
.topic-val { flex: 0 0 auto; min-width: 42px; text-align: right; }

/* New personal best banner (shown on an improved retake) */
.pb-banner {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem;
    background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff;
    padding: .55rem 1.1rem; border-radius: 14px; box-shadow: 0 8px 24px rgba(245, 158, 11, .4);
    animation: pbPop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.pb-banner .pb-medal { font-size: 1.4rem; line-height: 1; animation: pbSwing 1s ease-in-out infinite; transform-origin: top center; }
.pb-banner .pb-gain { font-weight: 800; background: rgba(255, 255, 255, .22); padding: .1rem .5rem; border-radius: 999px; }
.pb-banner .text-muted { color: rgba(255, 255, 255, .85) !important; }
@keyframes pbPop { 0% { opacity: 0; transform: scale(.7) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pbSwing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .pb-banner, .pb-banner .pb-medal { animation: none; } }

/* ---------------- Learning Hub (learn.php launcher) ---------------- */
.lh-wrap { max-width: 880px; margin: 0 auto; }
.lh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1rem, 3vw, 1.5rem); }
.lh-h1 { font-weight: 800; font-size: clamp(1.4rem, 5vw, 2rem); margin: 0 0 .2rem; }
.lh-tagline { color: var(--text-soft); margin: 0; font-size: clamp(.85rem, 2.6vw, 1rem); }
.lh-kpis { display: flex; gap: .5rem; flex-wrap: wrap; }
.lh-kpi { display: flex; flex-direction: column; align-items: center; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: .35rem .6rem; font-size: .64rem; color: var(--text-soft); line-height: 1.1; min-width: 58px; }
.lh-kpi strong { font-size: 1.05rem; color: var(--text); }

.lh-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.6rem, 2.4vw, 1rem); }
@media (min-width: 560px) { .lh-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .lh-grid { grid-template-columns: repeat(4, 1fr); } }

.lh-tile {
    position: relative; display: flex; flex-direction: column; gap: .25rem; isolation: isolate;
    padding: clamp(.85rem, 3.2vw, 1.25rem); min-height: clamp(116px, 30vw, 150px);
    border-radius: 18px; color: #fff; text-decoration: none; overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14); transition: transform .16s ease, box-shadow .16s ease;
}
.lh-tile::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, .14); z-index: -1; }
.lh-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 0, 0, .24); }
.lh-tile:active { transform: translateY(-1px) scale(.99); }
.lh-tile:focus-visible { outline: 3px solid rgba(255, 255, 255, .75); outline-offset: 2px; }
.lh-ico { line-height: 1; margin-bottom: .35rem; }
.lh-ico svg { width: clamp(30px, 8vw, 40px); height: clamp(30px, 8vw, 40px); display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
/* favorite / pin star */
.lh-fav { position: absolute; top: 6px; left: 6px; z-index: 2; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; font-size: .85rem; line-height: 26px; opacity: .6; transition: opacity .15s, transform .15s, background .15s; }
.lh-fav:hover { opacity: 1; transform: scale(1.12); }
.lh-tile.is-fav .lh-fav { color: #fde68a; opacity: 1; background: rgba(0, 0, 0, .22); }
/* search bar */
.lh-search-wrap { position: relative; margin: 0 0 clamp(.8rem, 2.5vw, 1.2rem); }
.lh-search { width: 100%; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text); padding: .6rem 1rem .6rem 2.5rem; font-size: .95rem; }
.lh-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.lh-search-ico { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); opacity: .5; pointer-events: none; }
.lh-search-ico svg { width: 18px; height: 18px; display: block; }
.lh-empty { text-align: center; color: var(--text-soft); padding: 2rem 1rem; }
.lh-title { font-weight: 800; font-size: clamp(.92rem, 3.4vw, 1.06rem); line-height: 1.15; }
.lh-sub { font-size: clamp(.66rem, 2.2vw, .76rem); opacity: .92; line-height: 1.25; }
.lh-badge { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .28); border-radius: 999px; padding: .08rem .5rem; font-size: .7rem; font-weight: 800; backdrop-filter: blur(2px); }
.lh-go { position: absolute; right: 12px; bottom: 10px; font-size: 1.1rem; opacity: .55; transition: transform .16s, opacity .16s; }
.lh-tile:hover .lh-go { transform: translateX(3px); opacity: 1; }
.lh-g1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.lh-g2 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.lh-g3 { background: linear-gradient(135deg, #f59e0b, #f97316); }
.lh-g4 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.lh-g5 { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.lh-g6 { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.lh-g7 { background: linear-gradient(135deg, #f43f5e, #f59e0b); }
.lh-g8 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.lh-g9 { background: linear-gradient(135deg, #14b8a6, #22c55e); }
.lh-g10 { background: linear-gradient(135deg, #fbbf24, #f97316); }
.lh-g11 { background: linear-gradient(135deg, #14b8a6, #0ea5e9); }
.lh-g12 { background: linear-gradient(135deg, #7c3aed, #db2777); }
.lh-g13 { background: linear-gradient(135deg, #059669, #34d399); } /* Safety Learning — calm green */
.lh-g14 { background: linear-gradient(135deg, #d946ef, #6366f1); } /* Jumbled Words */
.lh-g15 { background: linear-gradient(135deg, #0891b2, #22c55e); } /* Singular & Plural */
.lh-g16 { background: linear-gradient(135deg, #f97316, #eab308); } /* Alphabetical Order */
/* emoji icon variant (Edu-Games hub) + "coming soon" tiles */
.lh-ico.lh-emoji { font-size: clamp(1.9rem, 7.5vw, 2.5rem); line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.lh-tile.lh-soon { cursor: default; }
.lh-tile.lh-soon .lh-ico, .lh-tile.lh-soon .lh-title, .lh-tile.lh-soon .lh-sub { opacity: .9; }
.lh-tile.lh-soon:hover { transform: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.lh-tile.lh-soon::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); z-index: 0; }
.lh-tile.lh-soon > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .lh-tile, .lh-go { transition: none; } }

/* ---------------- Get-the-app / PWA install page ---------------- */
body.eq-standalone .eq-app-link { display: none; }   /* hide "Get the app" once installed */
.app-install { max-width: 760px; margin: 0 auto; }
.app-hero {
    text-align: center; color: #fff; border-radius: 22px; padding: clamp(1.5rem, 5vw, 2.5rem);
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 12px 30px rgba(var(--brand-rgb), .35);
}
.app-hero-icon { border-radius: 20px; background: rgba(255, 255, 255, .15); padding: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.app-hero-title { font-weight: 800; font-size: clamp(1.4rem, 5vw, 2rem); margin: .6rem 0 .3rem; }
.app-hero-sub { opacity: .92; max-width: 46ch; margin: 0 auto 1.1rem; font-size: clamp(.85rem, 2.6vw, 1rem); }
.app-install-btn { font-weight: 800; border-radius: 999px; padding: .7rem 2rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.app-msg { min-height: 1.2rem; margin-top: .7rem; font-size: .9rem; font-weight: 600; }
.app-msg.ok { color: #bbf7d0; } .app-msg.warn { color: #fde68a; }
.app-perks { display: flex; flex-wrap: wrap; gap: .5rem .9rem; justify-content: center; margin-top: 1.1rem; font-size: .82rem; opacity: .95; }
.app-guides { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .app-guides { grid-template-columns: repeat(3, 1fr); } }
.app-guide { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 16px; padding: 1rem 1.1rem; }
.app-guide.hot { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.app-guide.flash { animation: pbPop .5s ease; }
.app-guide-head { font-weight: 700; margin-bottom: .5rem; }
.app-guide-steps { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--text-soft); }
.app-guide-steps li { margin-bottom: .35rem; }

/* ---------------- Connect puzzles (connect.php) ---------------- */
.cn-wrap { max-width: 760px; margin: 0 auto; }
.cn-head { text-align: center; margin-bottom: .6rem; }
.cn-title { font-weight: 800; font-size: clamp(1.3rem, 5vw, 1.9rem); margin: 0; }
.cn-tagline { color: var(--text-soft); margin: .2rem 0 0; font-size: clamp(.8rem, 2.6vw, .95rem); }
.cn-hud { display: flex; flex-wrap: wrap; gap: .5rem .9rem; justify-content: center; margin: .6rem 0 1rem; font-weight: 700; }
.cn-hud-item { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; }
.cn-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.2rem, 12vw, 5rem); align-items: start; }
.cn-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.cn-line { stroke: #10b981; stroke-width: 4; stroke-linecap: round; opacity: .85; }
.cn-col { display: flex; flex-direction: column; gap: clamp(.5rem, 2.2vw, .8rem); position: relative; z-index: 2; }
.cn-col-label { text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 700; }
.cn-card {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
    background: var(--surface); border: 2px solid var(--border-soft); border-radius: 14px; color: var(--text);
    padding: clamp(.6rem, 2.6vw, .9rem) clamp(.7rem, 3vw, 1rem); font-weight: 700;
    font-size: clamp(.9rem, 3.4vw, 1.05rem); cursor: pointer; transition: border-color .12s, transform .1s, box-shadow .12s, background .12s;
}
.cn-col[data-col="r"] .cn-card { text-align: right; }
.cn-card-t { flex: 1 1 auto; min-width: 0; }
.cn-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--border-soft); transition: background .12s, transform .12s; }
.cn-card:hover { border-color: var(--brand); }
.cn-card.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .2); transform: scale(1.02); }
.cn-card.active .cn-dot { background: var(--brand); transform: scale(1.3); }
.cn-card.matched { border-color: #10b981; background: rgba(16, 185, 129, .12); color: #15803d; cursor: default; }
.cn-card.matched .cn-dot { background: #10b981; }
.cn-card.wrong { animation: cnShake .45s; border-color: #dc2626; background: rgba(220, 38, 38, .1); }
@keyframes cnShake { 10%, 90% { transform: translateX(-3px); } 30%, 70% { transform: translateX(5px); } 50% { transform: translateX(-4px); } }
.cn-card.cn-emoji .cn-card-t { font-size: clamp(1.7rem, 7vw, 2.3rem); }
.cn-result { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); padding: 1rem; }
.cn-result-card { background: var(--surface); border-radius: 20px; padding: clamp(1.4rem, 5vw, 2rem); text-align: center; max-width: 360px; width: 100%; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); animation: pbPop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.cn-result-emoji { font-size: 3rem; line-height: 1; }
.cn-stars { font-size: 1.8rem; color: #f59e0b; letter-spacing: .12em; margin: .3rem 0; }
.cn-result-stats { display: flex; gap: 1.2rem; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.cn-diff { display: inline-flex; gap: .4rem; margin-top: .5rem; }
.cn-diff-chip { font-size: .78rem; font-weight: 700; padding: .2rem .75rem; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text-soft); text-decoration: none; }
.cn-diff-chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
/* shared per-game control row: Hint + sound toggle */
.cn-tools { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; margin: -.4rem 0 .8rem; }
.arc-mute {
    display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
    border-radius: 50%; border: 1px solid var(--border-soft); background: var(--surface-2);
    font-size: 1rem; line-height: 1; cursor: pointer; color: var(--text); flex: 0 0 auto;
}
.arc-mute:hover { border-color: var(--brand); }
.arc-mute.muted { opacity: .6; }
.cn-card.hinted, .sq-chip.hinted { box-shadow: 0 0 0 3px rgba(245, 158, 11, .45); }
.cn-speakcard { justify-content: center; }
.cn-speak { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1; }
@media (prefers-reduced-motion: reduce) { .cn-card.wrong { animation: none; } .cn-result-card { animation: none; } }

/* ---------------- Puzzle progression: XP / level / daily / rewards ---------------- */
.gm-levelbar { position: relative; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-soft); overflow: hidden; margin-bottom: 1rem; }
.gm-levelbar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6366f1, #9333ea); border-radius: 999px; transition: width .6s ease; }
.gm-levelbar-label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.gm-daily { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: #fff; border-radius: 16px; padding: .8rem 1rem; margin-bottom: 1.1rem; background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 8px 22px rgba(245, 158, 11, .35); }
.gm-daily:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(245, 158, 11, .45); transition: transform .15s, box-shadow .15s; }
.gm-daily-ico { font-size: 2rem; line-height: 1; }
.gm-rewards { margin-top: .6rem; }
.gm-xp { display: inline-block; font-weight: 800; color: #6d28d9; background: rgba(124, 58, 237, .12); border-radius: 999px; padding: .25rem .8rem; margin-bottom: .4rem; }
.gm-ach { margin-top: .3rem; }
.gm-chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.gm-chip { display: inline-flex; align-items: center; gap: .25rem; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; font-size: .82rem; animation: pbPop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@media (prefers-reduced-motion: reduce) { .gm-daily, .gm-chip, .gm-levelbar-fill { animation: none; transition: none; } }

/* ---------------- Sequence / Story ordering ---------------- */
.sq-wrap { max-width: 760px; margin: 0 auto; }
.sq-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; min-height: 56px; padding: .8rem; margin-bottom: 1rem; background: var(--surface-2); border: 2px dashed var(--border-soft); border-radius: 14px; }
.sq-step { display: inline-flex; align-items: center; gap: .4rem; background: rgba(16, 185, 129, .14); color: #15803d; border: 1px solid rgba(16, 185, 129, .4); border-radius: 999px; padding: .3rem .8rem; font-weight: 700; animation: pbPop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.sq-step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #10b981; color: #fff; font-size: .72rem; }
.sq-arrow { color: var(--text-soft); font-weight: 800; }
.sq-pool { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.sq-chip { background: var(--surface); border: 2px solid var(--border-soft); border-radius: 14px; padding: clamp(.6rem, 2.6vw, .85rem) clamp(.9rem, 3.4vw, 1.2rem); font-weight: 700; font-size: clamp(.92rem, 3.6vw, 1.1rem); color: var(--text); cursor: pointer; transition: transform .1s, border-color .12s, box-shadow .12s; }
.sq-chip:hover { border-color: var(--brand); transform: translateY(-2px); }
.sq-chip.placed { opacity: .35; pointer-events: none; border-style: dashed; }
.sq-chip.wrong { animation: cnShake .45s; border-color: #dc2626; background: rgba(220, 38, 38, .1); }
.sq-chip.correct { border-color: #10b981; background: rgba(16, 185, 129, .14); color: #15803d; }
.sq-chip.bad { opacity: .45; border-style: dashed; text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .sq-step, .sq-chip.wrong { animation: none; } }

/* ---------------- Word Play: Missing Words + Jumbled Words (wordplay.php) ---------------- */
.wp-wrap { max-width: 760px; margin: 0 auto; }
.wp-stagefill { display: flex; flex-direction: column; justify-content: center; }
.wp-q { text-align: center; }
.wp-q[hidden] { display: none; }
.wp-qno { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 700; margin-bottom: .5rem; }
.wp-prompt { font-weight: 700; font-size: clamp(1.05rem, 4.6vw, 1.5rem); line-height: 1.5; margin: 0 auto 1.2rem; max-width: 30ch; }
.wp-blank {
    display: inline-block; min-width: 3.2em; text-align: center; border-radius: 8px;
    background: rgba(var(--brand-rgb), .12); border-bottom: 3px solid var(--brand); color: var(--brand);
    font-weight: 800; padding: 0 .3em;
}
.wp-clue { font-size: clamp(.95rem, 3.6vw, 1.15rem); font-weight: 600; color: var(--text); margin: 0 auto .9rem; max-width: 34ch; }
.wp-len { color: var(--text-soft); font-weight: 500; font-size: .85em; white-space: nowrap; }
.wp-slots { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-bottom: 1.1rem; }
.wp-slots.wrong { animation: cnShake .45s; }
.wp-slot {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(2rem, 9vw, 2.8rem); height: clamp(2.4rem, 10.5vw, 3.2rem);
    border-radius: 10px; background: var(--surface-2); border: 2px dashed var(--border-soft);
    font-weight: 800; font-size: clamp(1rem, 4.4vw, 1.35rem); text-transform: uppercase; color: var(--text);
}
.wp-slot.filled { border-style: solid; border-color: var(--brand); background: rgba(var(--brand-rgb), .1); }
.wp-slot.ok { border-color: #10b981; background: rgba(16, 185, 129, .16); color: #15803d; }
.wp-opts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.wp-opts .wp-opt { min-width: 7rem; }
.wp-letters .wp-letter { min-width: clamp(2.5rem, 11vw, 3.2rem); text-transform: uppercase; }
.sq-chip.hinted { border-color: #f59e0b; }
.wp-tools { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .wp-slots.wrong { animation: none; } }

/* =====================================================================
   Premium Arcade — gaming-inspired skin for all Edu-Games (.arcade)
   Neon glow, gradient borders, animated ambient backdrop, single-screen
   stage, progress fills, achievement-unlock FX. Re-skins per season via
   [data-game-skin]. Works in light + dark (inherits --surface tokens).
   ===================================================================== */
.arcade {
    --neon: #8b5cf6; --neon-2: #22d3ee; --arc-accent: #f472b6;
    --arc-ring: rgba(139, 92, 246, .55);
    --arc-bg1: rgba(139, 92, 246, .18); --arc-bg2: rgba(34, 211, 238, .16);
    position: relative; isolation: isolate;
}
.arcade[data-game-skin="festive"] { --neon:#22c55e; --neon-2:#ef4444; --arc-accent:#fbbf24; --arc-ring:rgba(34,197,94,.55);  --arc-bg1:rgba(34,197,94,.20);  --arc-bg2:rgba(239,68,68,.16); }
.arcade[data-game-skin="newyear"] { --neon:#eab308; --neon-2:#a855f7; --arc-accent:#22d3ee; --arc-ring:rgba(234,179,8,.55);   --arc-bg1:rgba(234,179,8,.20);   --arc-bg2:rgba(168,85,247,.16); }
.arcade[data-game-skin="spooky"]  { --neon:#a855f7; --neon-2:#f97316; --arc-accent:#22c55e; --arc-ring:rgba(168,85,247,.55);  --arc-bg1:rgba(168,85,247,.22);  --arc-bg2:rgba(249,115,22,.16); }
.arcade[data-game-skin="exam"]    { --neon:#6366f1; --neon-2:#f59e0b; --arc-accent:#22d3ee; --arc-ring:rgba(99,102,241,.55);  --arc-bg1:rgba(99,102,241,.18);  --arc-bg2:rgba(245,158,11,.14); }
.arcade[data-game-skin="summer"]  { --neon:#f59e0b; --neon-2:#06b6d4; --arc-accent:#22c55e; --arc-ring:rgba(245,158,11,.55);  --arc-bg1:rgba(245,158,11,.20);  --arc-bg2:rgba(6,182,212,.16); }

/* animated ambient glow behind the game */
.arcade::before {
    content: ""; position: absolute; inset: -8% -6% auto -6%; height: 65%; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 90% at 18% 0%, var(--arc-bg1), transparent 60%),
                radial-gradient(60% 90% at 100% 8%, var(--arc-bg2), transparent 62%);
    filter: blur(10px); animation: arcDrift 16s ease-in-out infinite alternate;
}
@keyframes arcDrift { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; } 100% { transform: translate3d(0, -10px, 0) scale(1.08); opacity: 1; } }

/* neon title */
.arcade .cn-title {
    background: linear-gradient(120deg, var(--neon), var(--neon-2)); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 10px var(--arc-ring));
}
.arcade .cn-title .badge { -webkit-text-fill-color: initial; }

/* single-screen stage: fill the viewport, distribute the board to taste */
.arc-stage { display: flex; flex-direction: column; min-height: calc(100dvh - 8rem); }
.arc-stage > .cn-board, .arc-stage > .sq-stagefill, .arc-stage > .wp-stagefill { flex: 1 1 auto; }
.arc-stage .cn-board { align-items: stretch; }
.arc-stage .cn-col { justify-content: space-evenly; }
.arc-stage .cn-card { min-height: clamp(2.6rem, 9.5vh, 4.2rem); }
@supports not (height: 100dvh) { .arc-stage { min-height: calc(100vh - 8rem); } }

/* neon gradient-border cards + chips (gradient via padding/border box trick) */
.arcade .cn-card, .arcade .sq-chip {
    --mx: -200px; --my: -200px;   /* pointer spotlight (arcade.js tracks; off-screen until hover) */
    background:
        radial-gradient(130px circle at var(--mx) var(--my), color-mix(in srgb, var(--neon) 26%, transparent), transparent 65%) padding-box,
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--neon) 70%, transparent), color-mix(in srgb, var(--neon-2) 70%, transparent)) border-box;
    border: 2px solid transparent; box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.arcade .cn-card:hover, .arcade .sq-chip:hover {
    border-color: transparent; box-shadow: 0 0 0 1px var(--neon), 0 8px 24px var(--arc-ring); transform: translateY(-2px);
}
.arcade .cn-card.active {
    box-shadow: 0 0 0 2px var(--neon), 0 0 18px var(--arc-ring), 0 8px 26px var(--arc-ring); transform: scale(1.03);
}
.arcade .cn-card.active .cn-dot { background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.arcade .cn-card.matched {
    background: linear-gradient(rgba(16,185,129,.14), rgba(16,185,129,.14)) padding-box,
               linear-gradient(135deg, #10b981, #22d3ee) border-box;
    color: #0f766e; box-shadow: 0 0 16px rgba(16, 185, 129, .35);
}
[data-bs-theme="dark"] .arcade .cn-card.matched { color: #6ee7b7; }
.arcade .cn-line { stroke: var(--neon); filter: drop-shadow(0 0 5px var(--arc-ring)); }

/* HUD pills + neon progress bar */
.arcade .cn-hud-item { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 22%, transparent); }
.arc-progress { height: 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-soft); overflow: hidden; margin: 0 auto 1rem; max-width: 520px; }
.arc-progress-fill { position: relative; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: 0 0 12px var(--arc-ring); transition: width .5s var(--ease); }
.arc-progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); animation: arcShine 1.6s linear infinite; }
@keyframes arcShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* sequence track + pool, arcade-tuned */
.arcade .sq-track { border-color: color-mix(in srgb, var(--neon) 45%, var(--border-soft)); box-shadow: inset 0 0 22px var(--arc-bg1); }
.arcade .sq-step { box-shadow: 0 0 14px rgba(16, 185, 129, .3); }
.arc-stage .sq-stagefill { display: flex; flex-direction: column; justify-content: center; }

/* premium result card — neon ring + sheen */
.arcade .cn-result-card {
    border: 1px solid transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box,
               linear-gradient(135deg, var(--neon), var(--neon-2)) border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 40px var(--arc-ring); overflow: hidden;
}
.arcade .cn-result-card::before {
    content: ""; position: absolute; inset: -40% -10% auto; height: 60%;
    background: radial-gradient(50% 100% at 50% 0%, var(--arc-ring), transparent 70%); pointer-events: none;
}
.arcade .cn-result-card > * { position: relative; }
.arcade .cn-stars { text-shadow: 0 0 14px rgba(245, 158, 11, .6); }

/* skin switcher (hub) */
.arc-skins { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0 0 1rem; }
.arc-skin-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; padding: .3rem .75rem; border-radius: 999px; cursor: pointer; color: var(--text-soft); border: 1px solid var(--border-soft); background: var(--surface-2); transition: transform .12s, box-shadow .12s, color .12s; }
.arc-skin-chip:hover { transform: translateY(-1px); }
.arc-skin-chip.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--neon), var(--neon-2)); box-shadow: 0 4px 14px var(--arc-ring); }

/* neon lift on hub tiles + leaderboard rows */
.arcade .lh-tile:hover { box-shadow: 0 0 0 1px var(--neon), 0 18px 36px var(--arc-ring); }
.arcade .gm-levelbar-fill { background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: 0 0 14px var(--arc-ring); }
.arcade .gm-daily { background: linear-gradient(135deg, var(--neon), var(--arc-accent)); box-shadow: 0 8px 24px var(--arc-ring); }

/* achievement-unlock toast (window.eqUnlock) */
.arc-unlock { position: fixed; left: 50%; top: 16%; z-index: 1100; display: flex; flex-direction: column; align-items: center; gap: .55rem; pointer-events: none; }
.arc-unlock-title { font-weight: 800; letter-spacing: .03em; color: var(--neon); text-shadow: 0 0 16px var(--arc-ring); animation: arcRise .4s var(--ease) both; }
.arc-unlock-badge {
    position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border-radius: 999px;
    font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--neon), var(--neon-2));
    box-shadow: 0 10px 30px var(--arc-ring), 0 0 0 0 var(--arc-ring); overflow: hidden;
    animation: arcUnlockPop .5s cubic-bezier(.34, 1.56, .64, 1) both, arcUnlockRing 1.1s ease-out .1s;
}
.arc-unlock-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-120%); animation: arcShine 1.1s ease-out .25s 1; }
.arc-unlock.leaving .arc-unlock-badge, .arc-unlock.leaving .arc-unlock-title { animation: arcFade .35s ease forwards; }
@keyframes arcUnlockPop { 0% { opacity: 0; transform: scale(.5) translateY(14px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes arcUnlockRing { 0% { box-shadow: 0 10px 30px var(--arc-ring), 0 0 0 0 var(--arc-ring); } 100% { box-shadow: 0 10px 30px var(--arc-ring), 0 0 0 26px transparent; } }
@keyframes arcRise { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes arcFade { to { opacity: 0; transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
    .arcade::before, .arc-progress-fill::after, .arc-unlock-badge, .arc-unlock-badge::after, .arc-unlock-title { animation: none; }
    .arc-progress-fill { transition: none; }
}

/* Word Race — arcade neon treatment (higher specificity wins over base .wr-*) */
.arcade .wr-hud-item { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 22%, transparent); }
.arcade .wr-animal-card:hover { box-shadow: 0 0 0 1px var(--neon), 0 10px 24px var(--arc-ring); }
.arcade .wr-animal-card.active { border-color: transparent; box-shadow: 0 0 0 2px var(--neon), 0 0 18px var(--arc-ring); }
.arcade .wr-level.active, .arcade .wr-len.active, .arcade .wr-theme-btn.active { border-color: transparent; box-shadow: 0 0 0 2px var(--neon), 0 0 16px var(--arc-ring); }
.arcade .wr-track { border-color: color-mix(in srgb, var(--neon) 45%, var(--border-soft)); box-shadow: inset 0 -12px 20px rgba(0, 0, 0, .08), 0 0 0 1px var(--arc-ring), 0 8px 26px var(--arc-ring); }
.arcade .wr-track-fill { background: linear-gradient(270deg, color-mix(in srgb, var(--neon) 42%, transparent), transparent); }
.arcade .wr-stage { border: 1px solid transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--neon), var(--neon-2)) border-box;
    box-shadow: 0 0 26px var(--arc-bg1); }
.arcade .wr-word { text-shadow: 0 0 18px var(--arc-bg1); }
.arcade .wr-input:focus { border-color: var(--neon); box-shadow: 0 0 0 .25rem var(--arc-bg1), 0 0 16px var(--arc-ring); }
.arcade .wr-daily-card, .arcade .wr-weekly-card { border: 1px solid transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--neon), var(--arc-accent)) border-box; }
.arcade #wrResult .card { border: 1px solid transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--neon), var(--neon-2)) border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 40px var(--arc-ring); }
/* Play stage: center the compact game on a single screen */
.arcade #wrPlay { min-height: calc(100dvh - 8rem); display: flex; flex-direction: column; justify-content: center; }
@supports not (height: 100dvh) { .arcade #wrPlay { min-height: calc(100vh - 8rem); } }

/* ============ Dynamic motion system (premium) ============ */
@keyframes arcIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes arcPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--neon), 0 0 14px var(--arc-ring); } 50% { box-shadow: 0 0 0 2px var(--neon), 0 0 28px var(--arc-ring), 0 0 44px var(--arc-ring); } }
@keyframes arcMatch { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes arcStars { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.15) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes arcFloat { from { background-position: 0 0, 100% 0, 50% 100%; } to { background-position: 12% 22%, 88% 12%, 44% 86%; } }

/* staggered entrance cascade (arcade.js adds .arc-in + --i; backwards fill keeps hover/active working after) */
.arcade .cn-card.arc-in, .arcade .sq-chip.arc-in, .arcade .wr-animal-card.arc-in,
.arcade .lh-tile.arc-in, .arcade .wr-board-row.arc-in {
    animation: arcIn .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 38ms);
}
/* active = pulsing neon; matched = burst pop */
.arcade .cn-card.active { animation: arcPulse 1.3s ease-in-out infinite; }
.arcade .cn-card.matched { animation: arcMatch .5s var(--ease); }
/* hover sheen sweep across cards + chips */
.arcade .cn-card, .arcade .sq-chip { position: relative; overflow: hidden; }
.arcade .cn-card::after, .arcade .sq-chip::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%);
}
@media (hover: hover) { .arcade .cn-card:hover::after, .arcade .sq-chip:hover::after { opacity: 1; animation: arcShine .7s ease; } }
/* result stars bounce in */
.arcade .cn-stars { display: inline-block; animation: arcStars .6s cubic-bezier(.34, 1.56, .64, 1) both; }
/* drifting ambient particles behind the game stage */
.arc-stage::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
    background-image: radial-gradient(circle, var(--neon) 0, transparent 2px), radial-gradient(circle, var(--neon-2) 0, transparent 2px), radial-gradient(circle, var(--arc-accent) 0, transparent 2px);
    background-size: 64px 64px, 84px 84px, 104px 104px; background-position: 0 0, 100% 0, 50% 100%;
    animation: arcFloat 20s ease-in-out infinite alternate;
}
/* animated shimmer along the level bar */
.gm-levelbar-fill { overflow: hidden; }
.gm-levelbar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); animation: arcShine 2.4s linear infinite; }

/* sharper responsiveness across screen sizes */
@media (min-width: 768px) {
    .cn-board { max-width: 620px; margin-inline: auto; gap: clamp(3rem, 8vw, 6rem); }
    .arcade .cn-card { font-size: 1.05rem; }
    .sq-chip { font-size: 1.1rem; }
    .lh-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) { .lh-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 360px) {
    .cn-board { gap: 1.7rem; }
    .cn-hud { gap: .35rem .55rem; }
    .cn-hud-item { padding: .25rem .6rem; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    .arcade .cn-card.arc-in, .arcade .sq-chip.arc-in, .arcade .wr-animal-card.arc-in, .arcade .lh-tile.arc-in, .arcade .wr-board-row.arc-in,
    .arcade .cn-card.active, .arcade .cn-card.matched, .arcade .cn-stars,
    .arc-stage::after, .gm-levelbar-fill::after, .arcade .cn-card::after, .arcade .sq-chip::after { animation: none; }
    .arcade .cn-card.arc-in, .arcade .sq-chip.arc-in, .arcade .wr-animal-card.arc-in, .arcade .lh-tile.arc-in, .arcade .wr-board-row.arc-in { opacity: 1; }
}
[data-contrast="high"] .arcade .cn-card.active, [data-contrast="high"] .arcade .cn-card.matched,
[data-contrast="high"] .arc-stage::after, [data-contrast="high"] .gm-levelbar-fill::after,
[data-contrast="high"] .arcade .cn-card::after, [data-contrast="high"] .arcade .sq-chip::after { animation: none; }

/* ---------------- Word Race (typing game) ---------------- */
.wr-animal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: .6rem; }
.wr-animal-card {
    display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center;
    padding: .8rem .4rem; border: 2px solid var(--border-soft); border-radius: 14px;
    background: var(--surface-2); cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s;
}
.wr-animal-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
.wr-animal-card.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }
.wr-animal-card.locked { opacity: .6; filter: grayscale(.7); cursor: not-allowed; border-style: dashed; }
.wr-animal-card.locked:hover { transform: none; box-shadow: none; }
.wr-animal-card.shake-lock { animation: wrShake .4s cubic-bezier(.36, .07, .19, .97); }
.wr-animal-emoji { font-size: 2rem; line-height: 1; }
.wr-animal-name { font-weight: 700; font-size: .9rem; }
.wr-animal-trait { display: block; line-height: 1.1; }
.wr-level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.wr-level {
    display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .7rem .4rem;
    border: 2px solid var(--border-soft); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.wr-level.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }

/* leaderboard */
.wr-board-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border-soft); }
.wr-board-row:last-child { border-bottom: 0; }
.wr-board-row.me { background: rgba(var(--brand-rgb), .08); border-radius: 8px; padding-inline: .4rem; }
.wr-board-rank { width: 1.8rem; text-align: center; font-weight: 700; }
.wr-board-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .9rem; }
.wr-board-wpm { margin-left: auto; }

/* HUD + track */
.wr-hud { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center; font-weight: 600; margin-bottom: .8rem; }
.wr-hud-item { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: .3rem .8rem; font-size: .9rem; }
/* ===== Race scene: the animal runs RIGHT → LEFT toward the finish on the left ===== */
.wr-track {
    position: relative; height: 124px; border-radius: 18px; overflow: hidden;
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, #bfe3ff 0%, #e8f6ff 54%, #cdeac0 54%, #aedd97 100%);
    box-shadow: inset 0 -12px 20px rgba(0, 0, 0, .08);
}
[data-bs-theme="dark"] .wr-track { background: linear-gradient(180deg, #1e293b 0%, #28344a 54%, #1f3a2a 54%, #163020 100%); }
.wr-track::before {                                   /* sun */
    content: ""; position: absolute; top: 12px; right: 26px; width: 32px; height: 32px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #fde68a, #fbbf24); box-shadow: 0 0 26px rgba(251, 191, 36, .6);
}
.wr-hills {                                           /* far parallax hills (slow) */
    position: absolute; left: 0; right: 0; bottom: 46%; height: 30px; opacity: .55;
    background: radial-gradient(46px 30px at 30px 30px, rgba(94, 165, 109, .7) 60%, transparent 62%) repeat-x;
    background-size: 96px 30px; animation: wrScroll 3.4s linear infinite;
}
.wr-ground {                                          /* 3D receding road: tilted plane, lane lines + ties rushing toward you */
    position: absolute; left: -28%; right: -28%; bottom: 0; height: 56%; will-change: background-position;
    transform: perspective(300px) rotateX(62deg); transform-origin: bottom center; z-index: 0;
    background-color: rgba(70, 130, 80, .22);
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 3px, transparent 3px 72px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 3px, transparent 3px 44px);
    background-size: 100% 100%, 100% 44px;
    animation: wrRoad 1.2s linear infinite;
}
@keyframes wrRoad { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 44px; } }
[data-bs-theme="dark"] .wr-ground { background-color: rgba(40, 70, 50, .3); }
@keyframes wrScroll { from { background-position-x: 0; } to { background-position-x: 96px; } }
.wr-flags {                                           /* race bunting whizzing past up top */
    position: absolute; left: 0; right: 0; top: 0; height: 15px; z-index: 1; opacity: .9; pointer-events: none;
    background: repeating-linear-gradient(90deg, #ef4444 0 22px, #f59e0b 22px 44px, #10b981 44px 66px, #3b82f6 66px 88px);
    background-size: 88px 15px;
    -webkit-mask: radial-gradient(circle 7px at 11px 15px, transparent 7px, #000 7.5px) repeat-x;
    mask: radial-gradient(circle 7px at 11px 15px, transparent 7px, #000 7.5px) repeat-x;
    -webkit-mask-size: 22px 15px; mask-size: 22px 15px;
    animation: wrFlags 1.4s linear infinite;
}
@keyframes wrFlags {
    from { background-position: 0 0; -webkit-mask-position: 0 0; mask-position: 0 0; }
    to   { background-position: 88px 0; -webkit-mask-position: 88px 0; mask-position: 88px 0; }
}
.wr-track.wr-theme-night .wr-flags { opacity: .6; }
.wr-clouds {                                          /* far drifting clouds (slowest) */
    position: absolute; left: 0; right: 0; top: 18px; height: 38px; pointer-events: none; opacity: .85; z-index: 1;
    background-repeat: repeat-x; background-size: 300px 40px; animation: wrClouds 18s linear infinite;
    background-image:
        radial-gradient(22px 12px at 40px 18px, #fff 60%, transparent 62%),
        radial-gradient(30px 16px at 120px 12px, #fff 60%, transparent 62%),
        radial-gradient(20px 11px at 230px 20px, #fff 60%, transparent 62%);
}
@keyframes wrClouds { from { background-position-x: 0; } to { background-position-x: 300px; } }
[data-bs-theme="dark"] .wr-clouds, .wr-track.wr-theme-night .wr-clouds { opacity: .22; }
.wr-track.wr-theme-rain .wr-clouds { filter: brightness(.75); opacity: .7; }
.wr-props {                                           /* near foreground bushes (fastest layer) */
    position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; opacity: .5; z-index: 1;
    background-repeat: repeat-x; background-size: 150px 30px; animation: wrProps 1.5s linear infinite;
    background-image:
        radial-gradient(15px 20px at 26px 100%, rgba(28, 74, 38, .95) 60%, transparent 62%),
        radial-gradient(11px 15px at 78px 100%, rgba(28, 74, 38, .7) 60%, transparent 62%),
        radial-gradient(8px 11px at 120px 100%, rgba(28, 74, 38, .55) 60%, transparent 62%);
}
@keyframes wrProps { from { background-position-x: 0; } to { background-position-x: 150px; } }
.wr-pickup {                                          /* +points reward floating up from the racer */
    position: absolute; bottom: 40px; left: 50%; z-index: 4; pointer-events: none;
    font-weight: 800; font-size: .95rem; color: #16a34a; text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    animation: wrPickup .85s ease-out forwards;
}
.wr-pickup.gold { color: #f59e0b; font-size: 1.1rem; }
@keyframes wrPickup { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -38px) scale(1.15); } }
.wr-after {                                           /* speed afterimage of the animal */
    position: absolute; bottom: 0; left: 0; line-height: 1; pointer-events: none; z-index: 1;
    opacity: .45; animation: wrAfter .45s ease-out forwards;
}
@keyframes wrAfter { 0% { opacity: .45; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(36px) scale(.82); } }
@media (prefers-reduced-motion: reduce) { .wr-clouds, .wr-props, .wr-pickup, .wr-after { animation: none; } .wr-pickup, .wr-after { display: none; } }
.wr-markers { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wr-marker {                                           /* ¼ ½ ¾ checkpoints the racer passes */
    position: absolute; bottom: 9px; transform: translateX(-50%); font-size: .72rem; font-weight: 800;
    color: rgba(255, 255, 255, .65); text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.wr-marker::before { content: ""; position: absolute; left: 50%; bottom: -3px; width: 2px; height: 20px; background: rgba(255, 255, 255, .35); transform: translateX(-50%); }
.wr-marker.hit { color: #fde68a; animation: wrMarkerHit .55s ease; }
@keyframes wrMarkerHit { 0% { transform: translateX(-50%) scale(1); } 45% { transform: translateX(-50%) scale(1.7) translateY(-4px); } 100% { transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .wr-marker.hit { animation: none; } }
.wr-track-fill {                                      /* distance covered — grows from the right */
    position: absolute; right: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(270deg, rgba(16, 185, 129, .22), rgba(16, 185, 129, .02)); transition: width .35s ease;
}
.wr-finish {                                          /* checkered finish on the LEFT */
    position: absolute; left: 12px; bottom: 12px; font-size: 2.1rem; z-index: 3;
    animation: wrFlag 1.1s ease-in-out infinite; transform-origin: bottom left;
}
.wr-finish::before {
    content: ""; position: absolute; left: 4px; bottom: -2px; width: 6px; height: 56px; border-radius: 2px; opacity: .55;
    background: repeating-linear-gradient(45deg, #222 0 6px, #fff 6px 12px);
}
@keyframes wrFlag { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
.wr-crowd {                                           /* spectators at the finish (left) */
    position: absolute; left: 8px; bottom: 46px; z-index: 3; display: flex; gap: 0; font-size: 1rem; line-height: 1;
}
.wr-crowd span { display: inline-block; animation: wrCheer 1s ease-in-out infinite; }
.wr-crowd span:nth-child(2) { animation-delay: .12s; }
.wr-crowd span:nth-child(3) { animation-delay: .24s; }
.wr-crowd span:nth-child(4) { animation-delay: .36s; }
@keyframes wrCheer { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.05); } }
.wr-crowd.cheer span { animation-duration: .38s; }   /* erupt as the racer nears / crosses */
@keyframes wrCheerBig { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-9px) rotate(6deg) scale(1.18); } }
.wr-crowd.cheer span { animation-name: wrCheerBig; }
.wr-cannon-p {                                        /* confetti fired from the crowd corners on finish */
    position: absolute; left: 10px; bottom: 46px; width: 8px; height: 8px; border-radius: 2px; z-index: 4; pointer-events: none;
    animation: wrCannon 1.15s cubic-bezier(.2, .6, .35, 1) forwards;
}
@keyframes wrCannon {
    0% { opacity: 1; transform: translate(0, 0) rotate(0); }
    60% { opacity: 1; transform: translate(calc(var(--dx) * .7), var(--dy)) rotate(calc(var(--rot) * .6)); }
    100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * .2)) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) { .wr-crowd span { animation: none; } .wr-cannon-p { display: none; } }

.wr-runner-wrap {                                     /* horizontal position rig */
    position: absolute; bottom: 12px; left: 86%; z-index: 2;
    transition: left .35s cubic-bezier(.34, 1.4, .5, 1); will-change: left;
}
.wr-animal-runner {                                   /* gentle idle between words; 3D-aware */
    display: inline-block; font-size: 2.7rem; line-height: 1; transform-origin: bottom center; will-change: transform;
    transform-style: preserve-3d; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .28));
    animation: wrIdle 1.8s ease-in-out infinite;
}
@keyframes wrIdle {                                   /* breathing sway while waiting to type */
    0%, 100% { transform: perspective(520px) translateY(0) rotateZ(-3deg) rotateY(0); }
    50%      { transform: perspective(520px) translateY(-3px) rotateZ(-2deg) rotateY(7deg); }
}
/* THREE bounding steps on each completed word — a real 3D push (rotateX/rotateY per stride) */
.wr-animal-runner.step3 { animation: wrStep3 var(--gdur, .5s) ease-in-out; }
@keyframes wrStep3 {
    0%   { transform: perspective(520px) translateY(0)    rotateX(0)     rotateY(0)      rotateZ(-3deg) scale(1, 1); }
    16%  { transform: perspective(520px) translateY(-15px) rotateX(14deg) rotateY(-12deg) rotateZ(-10deg) scale(.91, 1.11); }  /* step 1 */
    33%  { transform: perspective(520px) translateY(-1px)  rotateX(2deg)  rotateY(7deg)   rotateZ(-3deg) scale(1.09, .91); }
    50%  { transform: perspective(520px) translateY(-13px) rotateX(12deg) rotateY(-10deg) rotateZ(-8deg) scale(.93, 1.09); }  /* step 2 */
    66%  { transform: perspective(520px) translateY(-1px)  rotateX(2deg)  rotateY(6deg)   rotateZ(-3deg) scale(1.07, .93); }
    83%  { transform: perspective(520px) translateY(-11px) rotateX(10deg) rotateY(-8deg)  rotateZ(-2deg) scale(.95, 1.07); }  /* step 3 */
    100% { transform: perspective(520px) translateY(0)    rotateX(0)     rotateY(0)      rotateZ(-3deg) scale(1, 1); }
}
/* pre-race rev (during countdown) + explosive launch on GO */
.wr-animal-runner.ready { animation: wrReady .32s ease-in-out infinite; }
@keyframes wrReady {
    0%, 100% { transform: perspective(520px) translateX(4px) rotateZ(3deg) scale(1.05, .95); }
    50%      { transform: perspective(520px) translateX(0)   rotateZ(-1deg) scale(.99, 1.01); }
}
.wr-animal-runner.launch { animation: wrLaunch .55s cubic-bezier(.2, .85, .3, 1); }
@keyframes wrLaunch {
    0%   { transform: perspective(520px) translateX(10px) rotateX(0)    rotateZ(6deg)  scale(1.12, .88); }
    35%  { transform: perspective(520px) translateX(-8px) rotateX(16deg) rotateZ(-14deg) scale(.86, 1.16); }
    70%  { transform: perspective(520px) translateX(2px)  rotateX(4deg)  rotateZ(-1deg) scale(1.04, .97); }
    100% { transform: perspective(520px) translateX(0)    rotateX(0)    rotateZ(-3deg) scale(1, 1); }
}
.wr-runner-wrap.fast .wr-animal-runner.step3 { animation-duration: calc(var(--gdur, .5s) * .72); }
.wr-runner-wrap.fast .wr-animal-runner { filter: drop-shadow(var(--trail, 12px) 2px 7px rgba(79, 70, 229, .5)) drop-shadow(0 5px 4px rgba(0, 0, 0, .28)); }
.wr-runner-wrap.stumble .wr-animal-runner { animation: wrStumble .5s ease; }
@keyframes wrStumble { 0%, 100% { transform: perspective(520px) rotateZ(0) scale(1, 1); } 25% { transform: perspective(520px) rotateX(-12deg) rotateZ(16deg) translateY(4px) scale(1.06, .88); } 60% { transform: perspective(520px) rotateZ(-10deg); } }
.wr-shadow {                                          /* ground shadow that squashes with the bob */
    position: absolute; left: 50%; bottom: -3px; width: 36px; height: 8px; border-radius: 50%;
    background: rgba(0, 0, 0, .28); filter: blur(1px); animation: wrShadow .5s ease-in-out infinite;
}
@keyframes wrShadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .3; } 50% { transform: translateX(-50%) scale(.62); opacity: .14; } }
.wr-dust-p {                                          /* dust kicked up behind (to the right) */
    position: absolute; bottom: 0; right: -4px; width: 11px; height: 11px; border-radius: 50%;
    background: rgba(190, 178, 150, .85); pointer-events: none; animation: wrDust .6s ease-out forwards;
}
[data-bs-theme="dark"] .wr-dust-p { background: rgba(160, 172, 196, .55); }
@keyframes wrDust { 0% { opacity: .85; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(30px, -12px) scale(1.7); } }
.wr-track.sprint::after {                             /* speed lines while sprinting */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 40px, rgba(255, 255, 255, .28) 40px 44px);
    animation: wrScroll .22s linear infinite;
}
/* ----- per-animal flair (vars tune the shared gallop; JS adds .wr-a-<key>) ----- */
.wr-a-cheetah  { --gdur: .42s; --bobA: -7px;  --bobB: -4px; --lean1: -12deg; --trail: 26px; }   /* low, flat, long trail */
.wr-a-horse    { --gdur: .5s;  --bobA: -11px; --bobB: -6px; --trail: 12px; }                      /* strong steady */
.wr-a-rabbit   { --gdur: .3s;  --bobA: -16px; --bobB: -4px; --trail: 8px; }                       /* quick high hops */
.wr-a-tiger    { --gdur: .46s; --bobA: -12px; --bobB: -7px; --lean1: -10deg; --trail: 18px; }     /* powerful */
.wr-a-dog      { --gdur: .44s; --bobA: -12px; --bobB: -6px; --trail: 12px; }                      /* eager */
.wr-a-fox      { --gdur: .4s;  --bobA: -12px; --bobB: -6px; --lean1: -11deg; --trail: 14px; }     /* nimble */
.wr-a-kangaroo { --gdur: .62s; --bobA: -26px; --bobB: -10px; --trail: 10px; }                     /* big leaps */
.wr-a-turtle   { --gdur: .85s; --bobA: -4px;  --bobB: -2px; --lean1: -3deg; --trail: 6px; }       /* slow & low */

/* ----- finish-line tape + victory ----- */
.wr-tape {
    position: absolute; left: 28px; top: 14px; bottom: 14px; width: 4px; z-index: 2; border-radius: 2px;
    background: repeating-linear-gradient(180deg, #ef4444 0 9px, #fff 9px 18px); transform-origin: top center;
    box-shadow: 0 0 8px rgba(239, 68, 68, .5);
}
.wr-tape.broken { animation: wrTapeSnap .5s ease-out forwards; }
@keyframes wrTapeSnap { 0% { transform: rotate(0) scaleY(1); opacity: 1; } 100% { transform: rotate(38deg) scaleY(1.2) translateY(-6px); opacity: 0; } }
.wr-runner-wrap.win .wr-animal-runner { animation: wrVictory .8s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes wrVictory { 0%, 100% { transform: translateY(0) scale(1.15) rotate(0); } 35% { transform: translateY(-22px) scale(1.25) rotate(-8deg); } 70% { transform: translateY(0) scale(1.2) rotate(6deg); } }
.wr-finish-flash {
    position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; font-weight: 900; color: #fff; letter-spacing: .08em; pointer-events: none;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .5); animation: wrFinishFlash 1.1s ease-out forwards;
}
@keyframes wrFinishFlash { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }

/* ----- combo glow (escalates with data-combo) + turbo flame ----- */
.wr-runner-wrap[data-combo="1"] .wr-animal-runner { filter: drop-shadow(0 0 6px rgba(251, 191, 36, .7)) drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.wr-runner-wrap[data-combo="2"] .wr-animal-runner { filter: drop-shadow(0 0 12px rgba(245, 158, 11, .85)) drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.wr-runner-wrap[data-combo="3"] .wr-animal-runner { filter: drop-shadow(0 0 18px rgba(239, 68, 68, .95)) drop-shadow(0 0 8px rgba(251, 191, 36, .8)); }
.wr-runner-wrap.turbo::after {                        /* flame trailing behind (to the right) */
    content: "🔥"; position: absolute; right: -18px; bottom: 2px; font-size: 1.5rem;
    animation: wrFlame .3s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(239, 68, 68, .7));
}
@keyframes wrFlame { 0%, 100% { transform: scale(1) translateX(0); opacity: .9; } 50% { transform: scale(1.25) translateX(4px); opacity: 1; } }

/* ----- mistake feedback: track shake + red flash ----- */
.wr-track.shake { animation: wrShake .4s cubic-bezier(.36, .07, .19, .97); }
@keyframes wrShake { 10%, 90% { transform: translateX(-2px); } 30%, 70% { transform: translateX(4px); } 50% { transform: translateX(-3px); } }
.wr-track.miss { box-shadow: inset 0 0 0 3px rgba(220, 38, 38, .6), inset 0 -12px 20px rgba(0, 0, 0, .08); }
.wr-track { transition: box-shadow .25s; }

/* ----- weather / time-of-day themes (class on .wr-track) ----- */
.wr-weather { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* Sunset */
.wr-track.wr-theme-sunset { background: linear-gradient(180deg, #ff9e6d 0%, #ffd1a1 38%, #ffe7c7 54%, #c9a86a 54%, #b6925a 100%); }
.wr-track.wr-theme-sunset::before { background: radial-gradient(circle, #fff3c4, #ff7e5f); box-shadow: 0 0 30px rgba(255, 126, 95, .7); top: 26px; right: 30px; width: 38px; height: 38px; }
/* Night */
.wr-track.wr-theme-night { background: linear-gradient(180deg, #0f172a 0%, #1e293b 54%, #14241c 54%, #0e1c14 100%); }
.wr-track.wr-theme-night::before { background: radial-gradient(circle at 38% 38%, #f8fafc 60%, #cbd5e1); box-shadow: 0 0 22px rgba(226, 232, 240, .5); }
.wr-track.wr-theme-night .wr-weather {
    background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 20%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 80% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 15%, #fff, transparent),
        radial-gradient(2px 2px at 70% 28%, #fff, transparent);
    animation: wrTwinkle 2.4s ease-in-out infinite;
}
@keyframes wrTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.wr-track.wr-theme-night .wr-finish, .wr-track.wr-theme-night .wr-word { color: inherit; }
/* Rain */
.wr-track.wr-theme-rain { background: linear-gradient(180deg, #6b7c8f 0%, #94a6b8 40%, #aebccb 54%, #6f7f6a 54%, #5d6e58 100%); }
.wr-track.wr-theme-rain::before { opacity: .25; }
.wr-track.wr-theme-rain .wr-weather {
    background-image: repeating-linear-gradient(102deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 9px);
    background-size: 18px 22px; animation: wrRain .5s linear infinite; opacity: .5;
}
@keyframes wrRain { from { background-position: 0 0; } to { background-position: -6px 22px; } }

/* ----- sound mute toggle ----- */
.wr-mute { cursor: pointer; border: 1px solid var(--border-soft); background: var(--surface-2); }
.wr-mute.muted { opacity: .55; }

/* ----- ghost racer (your previous-best pacer) ----- */
.wr-ghost {
    position: absolute; bottom: 40px; left: 86%; z-index: 1; text-align: center;
    opacity: .42; filter: grayscale(.6); transition: left .14s linear; will-change: left; pointer-events: none;
}
.wr-ghost-emoji { display: block; font-size: 2.1rem; line-height: 1; animation: wrGhostBob .55s ease-in-out infinite; }
.wr-ghost-label {
    display: inline-block; font-size: .6rem; font-weight: 800; letter-spacing: .04em; color: #fff;
    background: rgba(71, 85, 105, .85); border-radius: 999px; padding: 0 .35rem; margin-top: -2px;
}
@keyframes wrGhostBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.wr-vs.ahead { color: #16a34a; }
.wr-vs.behind { color: #dc2626; }

/* scene picker */
.wr-theme-pick .wr-theme-btn { font-size: .8rem; }

@media (prefers-reduced-motion: reduce) { .wr-ghost { transition: none; } .wr-ghost-emoji { animation: none; } }

@media (prefers-reduced-motion: reduce) {
    .wr-hills, .wr-ground, .wr-finish, .wr-animal-runner, .wr-animal-runner.step3, .wr-animal-runner.ready, .wr-animal-runner.launch, .wr-shadow, .wr-dust-p, .wr-track.sprint::after,
    .wr-tape.broken, .wr-runner-wrap.win .wr-animal-runner, .wr-finish-flash, .wr-runner-wrap.turbo::after, .wr-track.shake,
    .wr-weather, .wr-flags { animation: none; }
    .wr-runner-wrap { transition: none; }
}

/* word + input */
.wr-word { font-size: 2.2rem; font-weight: 800; letter-spacing: .04em; min-height: 2.6rem; margin-bottom: .8rem; word-break: break-all; }
.wr-word .wr-c { transition: color .08s; }
.wr-word .wr-c.ok { color: #16a34a; }
.wr-word .wr-c.no { color: #dc2626; text-decoration: underline; }
.wr-input { max-width: 360px; margin: 0 auto; text-align: center; font-weight: 700; }

/* countdown overlay */
.wr-countdown { position: fixed; inset: 0; z-index: 1095; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .42); backdrop-filter: blur(1px); }
.wr-countdown span { font-size: 6rem; font-weight: 900; color: #fff; text-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
.wr-countdown span.pop { animation: wrCount .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wrCount { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 100% { transform: scale(1); } }

/* in-game toast */
.wr-toast {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 1090;
    display: inline-flex; align-items: center; gap: .5rem; background: linear-gradient(135deg, #4f46e5, #9333ea);
    color: #fff; font-weight: 700; padding: .45rem 1rem; border-radius: 999px; box-shadow: 0 8px 24px rgba(79, 70, 229, .4);
    animation: wrToastIn .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.wr-toast.gold { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.wr-toast.out { opacity: 0; transform: translateX(-50%) translateY(-10px); transition: opacity .4s, transform .4s; }
.wr-toast-emoji { font-size: 1.25rem; }
@keyframes wrToastIn { 0% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.8); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.wr-result-emoji { font-size: 3.4rem; line-height: 1; margin-bottom: .4rem; }
.wr-board-tabs .nav-link { padding: .25rem .4rem; font-size: .8rem; }
.wr-spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding: 4px; background: var(--surface-2); border-radius: 10px; }
.wr-spark-bar { flex: 1 1 auto; min-width: 4px; background: linear-gradient(180deg, var(--brand), rgba(var(--brand-rgb), .5)); border-radius: 3px 3px 0 0; }
.wr-promo { position: relative; border: 1px solid transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #8b5cf6, #22d3ee) border-box;
    transition: transform .15s, box-shadow .15s; }
.wr-promo:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(139, 92, 246, .22); }
.wr-daily-card { border-left: 4px solid #f59e0b; }
.wr-weekly-card { border-left: 4px solid #9333ea; }
.wr-champ-banner {
    display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 14px; font-weight: 600;
    background: linear-gradient(135deg, #f59e0b, #9333ea); color: #fff; box-shadow: 0 8px 22px rgba(147, 51, 234, .35);
}
.wr-champ-banner .wr-champ-trophy { font-size: 1.6rem; line-height: 1; animation: pbSwing 1.2s ease-in-out infinite; transform-origin: top center; }
@media (prefers-reduced-motion: reduce) { .wr-champ-banner .wr-champ-trophy { animation: none; } }

/* ----- photo finish (dead-heat with the ghost): slow-mo zoom into the line ----- */
.wr-track.photo-finish { transform-origin: 12% bottom; animation: wrPhotoZoom 2.1s cubic-bezier(.4, 0, .2, 1); }
@keyframes wrPhotoZoom { 0% { transform: scale(1); } 22% { transform: scale(1.4); } 78% { transform: scale(1.4); } 100% { transform: scale(1); } }
.wr-track.photo-finish .wr-animal-runner,
.wr-track.photo-finish .wr-ghost-emoji { animation-duration: 1.9s !important; }   /* slow-mo legs */
.wr-photo-flash {
    position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; font-weight: 900; color: #fff; letter-spacing: .06em; pointer-events: none;
    background: radial-gradient(circle at 12% 80%, transparent 28%, rgba(0, 0, 0, .5) 100%);
    animation: wrPhotoFlash 2.1s ease forwards;
}
@keyframes wrPhotoFlash { 0% { opacity: 0; } 16% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wr-track.photo-finish, .wr-track.photo-finish .wr-animal-runner, .wr-track.photo-finish .wr-ghost-emoji, .wr-photo-flash { animation: none; } }
.wr-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .6rem; }
.wr-ach { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; padding: .6rem .3rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.wr-ach.locked { opacity: .5; filter: grayscale(1); }
.wr-ach.got { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .15); }
.wr-ach-icon { font-size: 1.6rem; line-height: 1; }
.wr-ach-name { line-height: 1.05; }
.wr-ach-new { }
.wr-ach-chip { display: inline-flex; align-items: center; gap: .3rem; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; animation: pbPop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .wr-animal-runner, .wr-animal-runner.run, .wr-animal-runner.fast, .wr-animal-runner.stumble,
    .wr-countdown span.pop, .wr-toast { animation: none; }
}

/* ---------------- Profile avatar ---------------- */
.profile-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; font-size: 1.8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(var(--brand-rgb), .35);
}

/* Small inline avatar (leaderboard rows) */
.lb-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; margin-right: 8px;
    color: #fff; font-weight: 700; font-size: .8rem; vertical-align: middle;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}

/* Avatar colour picker swatches */
.avatar-swatch { cursor: pointer; margin: 0; }
.avatar-dot {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 3px solid transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    transition: transform .12s var(--ease, ease);
}
.avatar-swatch:hover .avatar-dot { transform: scale(1.12); }
.avatar-swatch input:checked + .avatar-dot {
    box-shadow: 0 0 0 2px var(--bs-body-bg, #fff), 0 0 0 4px var(--brand);
}

/* ---------------- Badges (achievement tiles) ---------------- */
.badge-tile {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 14px 8px;
    height: 100%;
    background: var(--surface);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.badge-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.badge-tile.locked { opacity: .55; filter: grayscale(1); background: var(--surface-2); }
.badge-icon { font-size: 2rem; line-height: 1; margin-bottom: 6px; }

/* ---------------- Mobile bottom nav ---------------- */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1033;
    display: flex;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .08);
    padding: 6px 4px env(safe-area-inset-bottom, 6px);
}
.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    text-decoration: none;
    color: var(--text-soft);
    font-size: .7rem;
    transition: color .12s var(--ease), transform .12s var(--ease);
}
.bottom-nav-item.active,
.bottom-nav-item:active { color: var(--brand); transform: translateY(-1px); }
.bottom-nav-item.active .bottom-nav-icon {
    background: rgba(var(--brand-rgb), .14);
    border-radius: 999px;
    padding: 2px 14px;
}
.bottom-nav-icon { font-size: 1.25rem; line-height: 1; transition: background .15s var(--ease); }
/* 5 buttons across a narrow phone: labels stay on one line, ellipsis if tight. */
.bottom-nav-text { font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .bottom-nav-item { font-size: .62rem; } .bottom-nav-icon { font-size: 1.15rem; } }

/* ---- expandable sub-navigation: 5 options per button ---- */
.bn-item-wrap { position: relative; flex: 1; display: flex; }
.bn-item-wrap > .bottom-nav-item { flex: 1; position: relative; }
.bn-caret { position: absolute; top: 1px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%) rotate(-45deg); border-left: 2px solid currentColor; border-top: 2px solid currentColor; opacity: .4; transition: transform .2s var(--ease), opacity .2s; }
.bottom-nav-item[aria-expanded="true"] .bn-caret { transform: translateX(-50%) rotate(135deg); opacity: 1; color: var(--brand); }

.bn-sub {
    position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(12px) scale(.96);
    display: flex; flex-direction: column; gap: .3rem; min-width: 174px; max-width: 72vw; padding: .5rem;
    max-height: 68vh; overflow-y: auto;   /* 5 items stay reachable on short screens */
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--border-soft); border-radius: 16px; box-shadow: 0 18px 44px rgba(8, 12, 24, .32), 0 0 0 1px rgba(var(--brand-rgb), .08);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s var(--ease), transform .22s var(--ease), visibility .22s;
}
.bn-sub::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3)); }
.bn-item-wrap.open .bn-sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
/* keep edge menus on-screen */
.bottom-nav .bn-item-wrap:first-child .bn-sub { left: 6px; transform: translateY(12px) scale(.96); }
.bottom-nav .bn-item-wrap:first-child.open .bn-sub { transform: translateY(0) scale(1); }
.bottom-nav .bn-item-wrap:last-child .bn-sub { left: auto; right: 6px; transform: translateY(12px) scale(.96); }
.bottom-nav .bn-item-wrap:last-child.open .bn-sub { transform: translateY(0) scale(1); }

.bn-sub-link { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 11px; color: var(--text); text-decoration: none; font-size: .92rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(8px); }
.bn-item-wrap.open .bn-sub-link { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s var(--ease), background .12s, color .12s; transition-delay: calc(var(--i, 0) * 45ms); }
.bn-sub-link:hover, .bn-sub-link:focus-visible { background: rgba(var(--brand-rgb), .12); color: var(--brand); outline: none; }
.bn-sub-ico { font-size: 1.15rem; width: 1.4rem; text-align: center; }

.bn-scrim { position: fixed; inset: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); background: rgba(8, 12, 24, .45); backdrop-filter: blur(1px); z-index: 1032; animation: bnFade .2s ease; }
@keyframes bnFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .bn-sub, .bn-sub-link, .bn-caret { transition: none; } .bn-scrim { animation: none; } }
[data-contrast="high"] .bn-sub { border-width: 2px; }
[data-contrast="high"] .bn-sub-link:hover, [data-contrast="high"] .bn-sub-link:focus-visible { outline: 2px solid var(--brand); }

/* ---------------- Certificate ---------------- */
.certificate {
    max-width: 820px;
    background: #fff;
    border: 14px solid #0d6efd;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.cert-inner {
    border: 2px solid #cfe2ff;
    border-radius: 4px;
    padding: 48px 56px;
    text-align: center;
}
.cert-brand {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0d6efd;
}
.cert-sub {
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #6c757d;
    font-size: .85rem;
    margin-top: 4px;
}
.cert-header { margin-bottom: 28px; }
.cert-text { color: #495057; margin: 6px 0; }
.cert-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.4rem;
    color: #212529;
    margin: 10px 0;
    border-bottom: 2px dashed #dee2e6;
    display: inline-block;
    padding: 0 24px 8px;
}
.cert-quiz {
    font-size: 1.4rem;
    color: #0d6efd;
    margin: 8px 0 14px;
}
.cert-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 44px;
    text-align: left;
}
.cert-meta { font-size: .85rem; color: #495057; line-height: 1.7; }
.cert-qr { text-align: center; }
.cert-qr #qrcode { display: inline-block; }
.cert-qr-label { font-size: .7rem; color: #6c757d; margin-top: 4px; }

/* Keep certificates on a white card even in dark mode (they're printable artifacts). */
[data-bs-theme="dark"] .certificate { color: #212529; }

/* Certificate on small screens */
@media (max-width: 575.98px) {
    .certificate { border-width: 8px; }
    .cert-inner { padding: 28px 18px; }
    .cert-name { font-size: 1.6rem; padding: 0 10px 6px; }
    .cert-quiz { font-size: 1.1rem; }
    .cert-footer { flex-direction: column; gap: 20px; align-items: center; text-align: center; }
    .cert-meta { text-align: center; }
}

/* Premium certificate */
.certificate-premium {
    position: relative;
    border-color: #b8860b;
    background: linear-gradient(#fff, #fffdf5);
    box-shadow: 0 10px 30px rgba(184, 134, 11, .25);
}
.certificate-premium .cert-inner { border-color: #e7c66b; }
.certificate-premium .cert-brand,
.certificate-premium .cert-quiz { color: #b8860b; }
.certificate-premium { overflow: hidden; }
.cert-ribbon {
    position: absolute;
    top: 14px;
    right: -36px;
    transform: rotate(45deg);
    background: linear-gradient(90deg, #d4af37, #b8860b);
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 44px;
    font-size: .8rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    z-index: 3;
}

/* Faint diagonal watermark behind the content */
.cert-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-24deg);
    font-size: 6rem;
    font-weight: 800;
    letter-spacing: 12px;
    color: rgba(184, 134, 11, .06);
    pointer-events: none;
    z-index: 0;
}
.certificate-premium .cert-inner { position: relative; z-index: 1; }

/* Gold corner flourishes */
.cert-corner {
    position: absolute; width: 28px; height: 28px; z-index: 2;
    border: 3px solid #b8860b;
}
.cert-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.cert-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.cert-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.cert-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.cert-member {
    display: inline-block;
    background: linear-gradient(90deg, #d4af37, #b8860b);
    color: #fff; font-size: .75rem; font-weight: 700;
    padding: 2px 12px; border-radius: 20px; margin-bottom: 8px;
}

/* Verification seal medallion */
.cert-seal { text-align: center; }
.cert-seal-inner {
    width: 84px; height: 84px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f5d76e, #b8860b);
    border: 3px double #fff;
    box-shadow: 0 0 0 3px #b8860b, 0 4px 10px rgba(0,0,0,.2);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; margin: 0 auto;
}
.cert-seal-star { font-size: 1.5rem; line-height: 1; }
.cert-seal-text { font-size: .55rem; font-weight: 700; letter-spacing: 1px; line-height: 1.1; }

/* Signature block */
.cert-sign { text-align: center; align-self: flex-end; }
.cert-sign-name { font-family: Georgia, serif; font-style: italic; font-size: 1.4rem; color: #444; }
.cert-sign-line { border-top: 1px solid #999; width: 150px; margin: 2px auto 4px; }
.cert-sign-label { font-size: .7rem; color: #6c757d; text-transform: uppercase; letter-spacing: 1px; }

/* ---------------- AI Adaptive Practice ---------------- */
/* Subject chooser */
.ae-subject {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 1.5px solid var(--border-soft); border-radius: 16px; background: var(--surface);
    padding: 18px 14px; cursor: pointer; text-align: center; min-height: 104px;
    transition: transform .12s var(--ease), border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.ae-subject:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-md); }
.ae-subject:active { transform: scale(.99); }
.ae-subject-ico { font-size: 1.9rem; line-height: 1; }
.ae-subject-name { font-weight: 700; }
.ae-subject-auto {
    flex-direction: row; gap: 14px; text-align: left; min-height: 0;
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .10), rgba(var(--brand-rgb), .02));
    border-color: rgba(var(--brand-rgb), .35);
}
.ae-subject-auto .ae-subject-ico { font-size: 2.1rem; }
.ae-subject-body { flex: 1; display: flex; flex-direction: column; }
.ae-subject-sub { font-size: .85rem; color: var(--bs-secondary-color, #6c757d); }
.ae-subject-go { font-size: 1.5rem; color: var(--brand); }

/* Live status bar */
.ae-statusbar { top: 64px; z-index: 6; }
.ae-pill { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; }
.ae-pill-difficulty { letter-spacing: .3px; }

/* Ability meter */
.ae-ability-track { position: relative; height: 8px; border-radius: 999px; background: rgba(var(--brand-rgb), .14); overflow: hidden; }
.ae-ability-fill { height: 100%; border-radius: 999px; transition: width .5s var(--ease), background-color .3s var(--ease); }
.ae-ability-ticks { position: absolute; inset: 0; pointer-events: none; }
.ae-ability-ticks span { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface); opacity: .7; }
.ae-ability-ticks span:nth-child(1) { left: 40%; }
.ae-ability-ticks span:nth-child(2) { left: 75%; }

/* Question + options (reuse the quiz option look, animated reveal) */
.ae-question { animation: aeFade .25s var(--ease); }
@keyframes aeFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ae-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border-width: 1.5px; }
.ae-opt-letter {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--surface-2);
    border: 1px solid var(--border-soft); display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
}
.ae-opt-text { font-size: .95rem; }
.ae-opt.ae-chosen { box-shadow: 0 0 0 .15rem rgba(var(--brand-rgb), .2); }
.ae-feedback { animation: aeFade .25s var(--ease); }
.ae-source-badge { font-weight: 600; }
.ae-streak { white-space: nowrap; }

@media (max-width: 575.98px) {
    .ae-statusbar { top: 56px; }
}

/* ---------------- PWA install banner ---------------- */
.eq-install-bar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 1080;
    display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px);
    padding: 10px 12px 10px 16px; border-radius: 999px; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 10px 30px rgba(16, 24, 40, .28); animation: aeFade .25s var(--ease);
}
.eq-install-ico { font-size: 1.25rem; line-height: 1; }
.eq-install-text { font-weight: 600; white-space: nowrap; }
@media (max-width: 575.98px) { .eq-install-text { display: none; } }
/* Lift above the mobile bottom nav when it is shown. */
@media (max-width: 991.98px) {
    .eq-install-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px); }
}

/* ---------------- Championship result + podium ---------------- */
.champ-rank-badge {
    width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow-md);
}
.champ-podium { min-height: 150px; }
.champ-podium-col { display: flex; flex-direction: column; align-items: center; width: 92px; max-width: 30%; }
.champ-podium-medal { font-size: 1.5rem; line-height: 1; }
.champ-podium-name { max-width: 92px; }
.champ-podium-bar {
    width: 100%; border-radius: 10px 10px 0 0; margin-top: 6px; color: #fff;
    display: flex; align-items: flex-start; justify-content: center; padding-top: 8px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
.champ-podium-col.p1 .champ-podium-bar { height: 88px; background: linear-gradient(180deg, #f59e0b, #d97706); }
.champ-podium-col.p2 .champ-podium-bar { height: 64px; background: linear-gradient(180deg, #94a3b8, #64748b); }
.champ-podium-col.p3 .champ-podium-bar { height: 46px; background: linear-gradient(180deg, #c08457, #92400e); }
.champ-podium-col.me .champ-podium-name { font-weight: 700; color: var(--brand); }

/* ---------------- Championship certificate ---------------- */
.champ-cert {
    max-width: 760px; background: var(--surface);
    border: 2px solid rgba(var(--brand-rgb), .35); border-radius: 16px; padding: 10px;
    box-shadow: var(--shadow-md);
}
.champ-cert-inner { position: relative; border: 1.5px solid rgba(var(--brand-rgb), .25); border-radius: 12px; padding: 34px 28px; }
.champ-cert-flourish { position: absolute; width: 26px; height: 26px; border: 3px solid var(--brand); }
.champ-cert-flourish.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.champ-cert-flourish.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.champ-cert-flourish.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.champ-cert-flourish.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.champ-cert-brand { font-weight: 800; letter-spacing: .5px; color: var(--brand); }
.champ-cert-kicker { text-transform: uppercase; letter-spacing: 3px; font-size: .8rem; color: var(--bs-secondary-color, #6c757d); margin-top: 4px; }
.champ-cert-medal { font-size: 3rem; line-height: 1; margin: 6px 0; }
.champ-cert-presented { color: var(--bs-secondary-color, #6c757d); }
.champ-cert-name { font-size: 2rem; font-weight: 800; margin: 4px 0 10px; font-family: Georgia, 'Times New Roman', serif; }
.champ-cert-body { max-width: 32rem; margin: 0 auto; line-height: 1.7; }
.champ-cert-sign-line { border-top: 1.5px solid var(--bs-secondary-color, #999); width: 160px; margin-bottom: 4px; }

/* ---------------- Profile completion (live) ---------------- */
.pc-card { padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.pc-ring { width: 84px; height: 84px; flex-shrink: 0; }
.pc-ring .score-ring-num { font-size: 1.05rem; }
.pc-track { position: relative; height: 8px; border-radius: 999px; background: rgba(var(--brand-rgb), .14); margin-top: 6px; overflow: visible; }
.pc-track-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .5s var(--ease); }
.pc-ms { position: absolute; top: 50%; width: 12px; height: 12px; margin-left: -6px; transform: translateY(-50%); border-radius: 50%; background: var(--surface); border: 2px solid rgba(var(--brand-rgb), .35); transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.pc-ms.lit { background: var(--brand); border-color: var(--brand); transform: translateY(-50%) scale(1.15); }
.pc-celebrate { animation: pcPop .7s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pcPop { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
.pc-toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 16px); z-index: 1095;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 700;
    padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-md); opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.pc-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Momentum: XP/level chip + XP bar */
.pc-lvl { background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; font-weight: 600; font-size: .72rem; }
.pc-xp { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.pc-xp-bar { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(124, 58, 237, .16); overflow: hidden; }
.pc-xp-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #22d3ee); transition: width .5s var(--ease); box-shadow: 0 0 8px rgba(124, 58, 237, .5); }
.pc-xp-label { font-size: .68rem; color: var(--text-muted, #6c757d); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Momentum strip: sparkline + ETA + peer pills */
.pc-momentum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-mo-item { display: inline-flex; align-items: center; gap: 6px; }
.pc-spark { width: 64px; height: 22px; overflow: visible; }
.pc-spark polyline { fill: none; stroke: var(--brand, #2563eb); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(var(--brand-rgb, 37, 99, 235), .35)); }
.pc-delta { font-size: .72rem; font-weight: 700; }
.pc-delta.up { color: #16a34a; }
.pc-delta.down { color: #dc2626; }
.pc-mo-pill { font-size: .72rem; padding: 2px 9px; border-radius: 999px; background: var(--surface, #fff); border: 1px solid var(--border-soft, #e5e7eb); color: var(--text-muted, #6c757d); white-space: nowrap; }
.pc-mo-pill:empty { display: none; }
.pc-chip-power { box-shadow: 0 0 0 1px rgba(124, 58, 237, .35); font-weight: 600 !important; }

/* Post-login onboarding spotlight */
.pc-spotlight { position: relative; border-radius: 18px; padding: 20px 22px; color: #fff; overflow: hidden;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%); box-shadow: var(--shadow-md);
    animation: pcSpotIn .5s cubic-bezier(.2, .8, .3, 1); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.pc-spotlight::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.pc-spotlight.pc-spot-hide { opacity: 0; transform: translateY(-8px); }
@keyframes pcSpotIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.pc-spot-body { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.pc-spot-ring { width: 84px; height: 84px; flex-shrink: 0; }
.pc-spot-ring .ring-track { stroke: rgba(255, 255, 255, .25); }
.pc-spot-ring .ring-fill { stroke: #fff; }
.pc-spot-ring .score-ring-num { font-size: 1.05rem; color: #fff; }
.pc-spot-x { position: absolute; top: 8px; right: 12px; z-index: 2; background: transparent; border: 0; color: #fff;
    font-size: 1.5rem; line-height: 1; opacity: .8; cursor: pointer; }
.pc-spot-x:hover { opacity: 1; }
.pc-spot-chip { display: inline-flex; align-items: center; font-size: .76rem; padding: 3px 10px; border-radius: 999px;
    text-decoration: none; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); transition: background .15s var(--ease); }
.pc-spot-chip:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.pc-spot-chip.power { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset; font-weight: 600; }
@media (max-width: 480px) { .pc-spot-body { flex-direction: column; text-align: center; } }

/* ---------------- Championship Duel ---------------- */
.duel-bot-av { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--surface-2); border: 1px solid var(--border-soft); }

/* ---------------- Championship Daily Drop ---------------- */
.drop-box { font-size: 5rem; line-height: 1; display: inline-block; }
.drop-box-shake { animation: dropShake 1.4s ease-in-out infinite; cursor: pointer; }
@keyframes dropShake {
    0%, 70%, 100% { transform: rotate(0) scale(1); }
    75% { transform: rotate(-8deg) scale(1.05); }
    80% { transform: rotate(8deg) scale(1.08); }
    85% { transform: rotate(-6deg) scale(1.05); }
    90% { transform: rotate(4deg) scale(1.03); }
}
.drop-box-open { font-size: 4rem; opacity: .85; }
.drop-reveal { position: relative; width: 140px; height: 140px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.drop-reward-icon { font-size: 4.5rem; animation: dropPop .6s cubic-bezier(.2, 1.4, .4, 1) both; z-index: 1; }
@keyframes dropPop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.drop-burst { position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle, var(--rc, #f59e0b) 0%, transparent 65%);
    animation: dropBurst .8s ease-out both; }
@keyframes dropBurst { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }

/* ---------------- Championship Locker (player card + frames) ---------------- */
.player-card { padding: 12px; }
.pc-avatar {
    width: 96px; height: 96px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 2.2rem;
    position: relative;
}
.pc-name { font-size: 1.05rem; }
.pc-title { font-size: .9rem; font-weight: 600; color: var(--brand); }
.pc-frame-bronze { box-shadow: 0 0 0 4px #b45309; }
.pc-frame-silver { box-shadow: 0 0 0 4px #94a3b8, 0 0 12px rgba(148, 163, 184, .6); }
.pc-frame-gold   { box-shadow: 0 0 0 4px #f59e0b, 0 0 16px rgba(245, 158, 11, .7); }
.pc-frame-neon   { box-shadow: 0 0 0 3px #a21caf, 0 0 18px rgba(217, 70, 239, .85); animation: pcNeon 1.6s ease-in-out infinite alternate; }
@keyframes pcNeon { from { box-shadow: 0 0 0 3px #a21caf, 0 0 8px rgba(217,70,239,.6); } to { box-shadow: 0 0 0 3px #e879f9, 0 0 22px rgba(217,70,239,1); } }
.pc-frame-flame  { box-shadow: 0 0 0 3px #f97316, 0 0 18px rgba(249, 115, 22, .9); animation: pcFlame 1s ease-in-out infinite alternate; }
@keyframes pcFlame { from { box-shadow: 0 0 0 3px #f97316, 0 0 10px rgba(249,115,22,.7); } to { box-shadow: 0 0 0 4px #ef4444, 0 0 24px rgba(239,68,68,1); } }
.pc-frame-holo   { animation: pcHolo 4s linear infinite; box-shadow: 0 0 0 4px #22d3ee, 0 0 20px rgba(34,211,238,.8); }
@keyframes pcHolo { 0% { box-shadow: 0 0 0 4px #22d3ee, 0 0 20px rgba(34,211,238,.8); } 33% { box-shadow: 0 0 0 4px #a78bfa, 0 0 20px rgba(167,139,250,.8); } 66% { box-shadow: 0 0 0 4px #f472b6, 0 0 20px rgba(244,114,182,.8); } 100% { box-shadow: 0 0 0 4px #22d3ee, 0 0 20px rgba(34,211,238,.8); } }
/* Exclusive (drop-only) frames */
.pc-frame-eclipse { box-shadow: 0 0 0 4px #111827, 0 0 0 7px #6366f1, 0 0 22px rgba(99,102,241,.9); }
.pc-frame-aurora  { animation: pcAurora 3s ease-in-out infinite; }
@keyframes pcAurora { 0% { box-shadow: 0 0 0 4px #34d399, 0 0 20px rgba(52,211,153,.8); } 50% { box-shadow: 0 0 0 4px #22d3ee, 0 0 24px rgba(34,211,238,.9); } 100% { box-shadow: 0 0 0 4px #a78bfa, 0 0 20px rgba(167,139,250,.8); } }
.pc-frame-galaxy  { animation: pcGalaxy 6s linear infinite; box-shadow: 0 0 0 4px #7c3aed, 0 0 26px rgba(124,58,237,.9); }
@keyframes pcGalaxy { 0% { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } }

/* ---------------- Championship Battle Pass ---------------- */
.xp-bar { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.xp-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #f59e0b); transition: width .6s var(--ease); }
.xp-level-badge {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; color: #fff; margin: 0 auto;
    background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.quest-card { transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.quest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.champ-flame { display: inline-block; animation: flameFlicker 1.1s ease-in-out infinite alternate; transform-origin: bottom center; }
@keyframes flameFlicker { from { transform: scale(1) rotate(-3deg); filter: brightness(1); } to { transform: scale(1.12) rotate(3deg); filter: brightness(1.2); } }

/* ---------------- Championship Mission Control ---------------- */
.mission-card { transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.mission-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ---------------- Championship Crystal Ball ---------------- */
.intel-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; display: inline-block; box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: intelPulse 1.6s infinite; }
@keyframes intelPulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ---------------- Championship config console ---------------- */
.cfg-item { transition: border-color .12s var(--ease), background .12s var(--ease); }
.cfg-item:hover { border-color: var(--brand); }
.cfg-item:has(.cfg-switch:checked) { border-color: rgba(var(--brand-rgb), .5); }
.cfg-item:has(.cfg-switch:not(:checked)) { opacity: .75; }
.cfg-row { cursor: pointer; }
.cfg-row:hover { background: rgba(var(--brand-rgb), .04); }
.cfg-ico { width: 2.5rem; text-align: center; flex-shrink: 0; }
.cfg-actionbar { bottom: 0; z-index: 5; border: 1px solid var(--border-soft); }
.cfg-switch:checked { background-color: var(--brand); border-color: var(--brand); }

/* ---------------- CMS / informational pages ---------------- */
.cms-page { line-height: 1.7; }
.cms-body { font-size: 1.02rem; color: var(--bs-body-color); }
.cms-body > .lead { font-size: 1.2rem; color: var(--text-muted, #6c757d); margin-bottom: 1.5rem; }
.cms-body h2 { font-size: 1.35rem; font-weight: 700; margin-top: 2.2rem; margin-bottom: .9rem; scroll-margin-top: 90px; }
.cms-body h3 { font-size: 1.08rem; font-weight: 600; margin-top: 1.4rem; margin-bottom: .6rem; }
.cms-body h2:first-child, .cms-body h3:first-child { margin-top: 0; }
.cms-body p { margin-bottom: 1rem; }
.cms-body ul:not(.list-unstyled), .cms-body ol { padding-left: 1.2rem; }
.cms-body li { margin-bottom: .45rem; }
.cms-body img { max-width: 100%; height: auto; border-radius: var(--radius, 12px); }
.cms-body table { width: 100%; }

/* Reusable info-page building blocks (sanitizer-safe: plain classes only) */
.info-hero { background: linear-gradient(135deg, rgba(var(--brand-rgb), .10), rgba(124, 58, 237, .10)); border: 1px solid var(--border-soft); border-radius: 18px; padding: 1.5rem 1.6rem; margin-bottom: 1.5rem; }
.info-card { height: 100%; border: 1px solid var(--border-soft); border-radius: 14px; padding: 1.1rem 1.2rem; background: var(--surface, #fff); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.info-card-ico { font-size: 1.7rem; line-height: 1; margin-bottom: .5rem; }
.info-step { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; }
.info-step-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.trust-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0; }
.trust-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.info-cta { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-radius: 18px; padding: 1.6rem; text-align: center; margin: 2rem 0 .5rem; }
.info-cta a.btn { font-weight: 600; }
.toc-card { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; }

/* ---------------- Skip link (a11y) ---------------- */
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 2000; background: var(--brand, #4f46e5); color: #fff;
    padding: .5rem .9rem; border-radius: 0 0 8px 8px; font-weight: 600; text-decoration: none; transition: top .2s var(--ease); }
.skip-link:focus { top: 0; color: #fff; outline: 2px solid #fff; }

/* ---------------- Reading / scroll progress ---------------- */
.scroll-progress { position: sticky; top: 0; left: 0; height: 3px; width: 0; z-index: 1031;
    background: linear-gradient(90deg, var(--brand, #4f46e5), var(--brand-2, #22d3ee)); box-shadow: 0 0 6px rgba(var(--brand-rgb, 79, 70, 229), .5);
    transition: width .08s linear; }

/* ---------------- Command palette (⌘K) ---------------- */
.cmdk-kbd-btn { display: flex; align-items: center; opacity: .85; }
.cmdk-kbd-btn:hover { opacity: 1; }
.cmdk-kbd-btn kbd { background: transparent; border: 0; color: inherit; font-size: .72rem; padding: 0; }
.cmdk-overlay { position: fixed; inset: 0; z-index: 1085; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; animation: cmdkFade .15s var(--ease); }
.cmdk-overlay[hidden] { display: none; }
@keyframes cmdkFade { from { opacity: 0; } to { opacity: 1; } }
.cmdk-panel { width: 100%; max-width: 580px; background: var(--surface, #fff); color: var(--bs-body-color);
    border: 1px solid var(--border-soft); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: hidden;
    animation: cmdkPop .18s cubic-bezier(.2, .9, .3, 1); }
@keyframes cmdkPop { from { transform: translateY(-10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.cmdk-input-wrap { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border-soft); }
.cmdk-input-ico { font-size: 1.05rem; opacity: .7; }
.cmdk-input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1.05rem; color: inherit; }
.cmdk-esc { font-size: .7rem; opacity: .6; border: 1px solid var(--border-soft); border-radius: 6px; padding: .05rem .35rem; }
.cmdk-list { list-style: none; margin: 0; padding: .4rem; max-height: 52vh; overflow-y: auto; }
.cmdk-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #6c757d); padding: .5rem .6rem .2rem; }
.cmdk-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 10px; cursor: pointer; }
.cmdk-item.active { background: rgba(var(--brand-rgb, 79, 70, 229), .12); }
.cmdk-item-ico { font-size: 1.1rem; width: 1.5rem; text-align: center; flex-shrink: 0; }
.cmdk-item-label { font-size: .95rem; }
.cmdk-empty { padding: 1.4rem; text-align: center; color: var(--text-muted, #6c757d); }
.cmdk-foot { display: flex; gap: 1rem; flex-wrap: wrap; padding: .5rem 1rem; border-top: 1px solid var(--border-soft);
    font-size: .72rem; color: var(--text-muted, #6c757d); }
.cmdk-foot kbd { font-size: .68rem; border: 1px solid var(--border-soft); border-radius: 5px; padding: .02rem .3rem; background: var(--surface-2); }
body.cmdk-open { overflow: hidden; }
.cmdk-help-list { max-height: 60vh; }
.cmdk-help-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .6rem; }
.cmdk-help-keys { display: flex; gap: .25rem; flex-shrink: 0; }
.cmdk-help-keys kbd { font-size: .72rem; border: 1px solid var(--border-soft); border-radius: 6px; padding: .1rem .4rem; background: var(--surface-2); color: inherit; }
.cmdk-help-label { font-size: .92rem; color: var(--text-muted, #6c757d); text-align: right; }

/* =====================================================================
   Neon-glow polish (animated) — premium gaming-sign glow on the mobile
   bottom nav + game title/progress. Gated for reduced-motion + contrast.
   ===================================================================== */
@keyframes bnEdge { to { background-position: 200% 0; } }
@keyframes neonTitle { 0%, 100% { filter: drop-shadow(0 1px 6px var(--arc-ring)); } 50% { filter: drop-shadow(0 1px 18px var(--arc-ring)); } }
@keyframes neonBar { 0%, 100% { box-shadow: 0 0 10px var(--arc-ring); } 50% { box-shadow: 0 0 24px var(--arc-ring); } }
@keyframes iconNeon { 0%, 100% { filter: drop-shadow(0 0 4px rgba(var(--brand-rgb), .55)); transform: scale(1.12) translateY(0); } 50% { filter: drop-shadow(0 0 12px rgba(var(--brand-rgb), .95)); transform: scale(1.18) translateY(-2px); } }

/* bottom nav — flowing neon top edge + glowing active item + neon sub-menu
   (NB: base .bottom-nav is position:fixed — do NOT override to relative, it
   un-fixes the bar; fixed already anchors the ::before edge.) */
.bottom-nav::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), var(--brand-3), transparent); background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(var(--brand-rgb), .7); animation: bnEdge 6s linear infinite;
}
/* every icon gets a gentle neon halo (drop-shadow traces the emoji shape, not a box) */
.bottom-nav-icon { filter: drop-shadow(0 0 3px rgba(var(--brand-rgb), .4)); transition: filter .2s var(--ease), transform .2s var(--ease); }
.bottom-nav-item:hover .bottom-nav-icon, .bottom-nav-item:focus-visible .bottom-nav-icon { filter: drop-shadow(0 0 7px rgba(var(--brand-rgb), .7)); transform: translateY(-1px); }
.bottom-nav-item.active .bottom-nav-icon { background: none; padding: 0; transform: scale(1.12); animation: iconNeon 2.2s ease-in-out infinite; }
.bottom-nav-item.active, .bottom-nav-item.active .bottom-nav-text { text-shadow: 0 0 8px rgba(var(--brand-rgb), .5); }
.bn-sub { box-shadow: 0 18px 44px rgba(8, 12, 24, .32), 0 0 0 1px rgba(var(--brand-rgb), .28), 0 0 24px rgba(var(--brand-rgb), .28); }
.bn-sub::before { box-shadow: 0 0 12px rgba(var(--brand-rgb), .8); }
.bn-sub-link:hover, .bn-sub-link:focus-visible { box-shadow: 0 0 0 1px rgba(var(--brand-rgb), .4), 0 0 14px rgba(var(--brand-rgb), .35); }
.bottom-nav-item[aria-expanded="true"] .bn-caret { filter: drop-shadow(0 0 5px var(--brand)); }

/* game neon — breathing title glow + pulsing progress bar */
.arcade .cn-title { animation: neonTitle 3.6s ease-in-out infinite; }
.arc-progress-fill { animation: neonBar 2.6s ease-in-out infinite; }

/* keep five nav labels tidy on tiny phones */
@media (max-width: 360px) { .bottom-nav-text { font-size: .6rem; } .bottom-nav-icon { font-size: 1.1rem; } }

@media (prefers-reduced-motion: reduce) {
    .bottom-nav::before, .bottom-nav-item.active .bottom-nav-icon, .arcade .cn-title, .arc-progress-fill { animation: none; }
}
[data-contrast="high"] .bottom-nav::before { animation: none; background: var(--brand); box-shadow: none; }
[data-contrast="high"] .bottom-nav-icon { filter: none; }
[data-contrast="high"] .bottom-nav-item.active .bottom-nav-icon,
[data-contrast="high"] .arcade .cn-title, [data-contrast="high"] .arc-progress-fill { animation: none; }
[data-contrast="high"] .bn-sub, [data-contrast="high"] .bn-sub-link:hover, [data-contrast="high"] .bn-sub-link:focus-visible { box-shadow: none; }

/* nav slide-up entrance + current-page highlight in the open sub-menu */
@keyframes bnRise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.bottom-nav { animation: bnRise .4s var(--ease) both; }
.bn-sub-link.current { background: rgba(var(--brand-rgb), .14); color: var(--brand); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .4), 0 0 12px rgba(var(--brand-rgb), .3); }
@media (prefers-reduced-motion: reduce) { .bottom-nav { animation: none; } }
[data-contrast="high"] .bn-sub-link.current { box-shadow: inset 0 0 0 2px var(--brand); }

/* deeper nav neon v2 — active "you-are-here" dot, flowing sub accent, sub-link slide bar */
.bottom-nav-item.active::after {
    content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
    box-shadow: 0 0 8px 2px rgba(var(--brand-rgb), .75); animation: bnDot 1.8s ease-in-out infinite;
}
@keyframes bnDot { 0%, 100% { box-shadow: 0 0 6px 1px rgba(var(--brand-rgb), .55); } 50% { box-shadow: 0 0 13px 3px rgba(var(--brand-rgb), .9); } }
.bn-sub::before { background-size: 200% 100%; animation: bnEdge 4s linear infinite; }
.bn-sub-link { position: relative; }
.bn-sub-link::before {
    content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%) scaleY(0); transform-origin: center;
    width: 3px; height: 60%; border-radius: 3px; background: linear-gradient(var(--brand), var(--brand-2));
    box-shadow: 0 0 8px rgba(var(--brand-rgb), .7); transition: transform .18s var(--ease);
}
.bn-sub-link:hover::before, .bn-sub-link:focus-visible::before, .bn-sub-link.current::before { transform: translateY(-50%) scaleY(1); }

@media (prefers-reduced-motion: reduce) {
    .bottom-nav-item.active::after, .bn-sub::before { animation: none; }
    .bn-sub-link::before { transition: none; }
}
[data-contrast="high"] .bottom-nav-item.active::after { animation: none; box-shadow: none; }
[data-contrast="high"] .bn-sub-link::before { box-shadow: none; }

/* nav aurora underglow (behind the icons) */
.bottom-nav::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
    background: radial-gradient(60% 150% at 22% 100%, rgba(var(--brand-rgb), .20), transparent 60%),
                radial-gradient(60% 150% at 78% 100%, color-mix(in srgb, var(--brand-3) 18%, transparent), transparent 60%);
    animation: bnAura 11s ease-in-out infinite alternate;
}
@keyframes bnAura { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* solved cards keep a gentle lingering neon pulse */
.arcade .cn-card.matched { animation: arcMatch .5s var(--ease), matchGlow 2.6s ease-in-out .5s infinite; }
@keyframes matchGlow { 0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, .3); } 50% { box-shadow: 0 0 20px rgba(16, 185, 129, .55); } }

@media (prefers-reduced-motion: reduce) { .bottom-nav::after { animation: none; } .arcade .cn-card.matched { animation: none; } }
[data-contrast="high"] .bottom-nav::after { display: none; }

/* ---------------- Reflection consistency heatmap ---------------- */
.refl-cal-rows { display: flex; flex-direction: column; gap: 4px; }
.refl-cal-row { display: grid; grid-template-columns: repeat(7, 18px); gap: 4px; }
.refl-cell { width: 18px; height: 18px; border-radius: 4px; background: var(--surface-2); display: inline-block; vertical-align: middle; }
.refl-cell.future { background: transparent; }
.refl-cell.done { background: #60a5fa; }
.refl-cell.m1 { background: #f97316; }
.refl-cell.m2 { background: #fbbf24; }
.refl-cell.m3 { background: #a3e635; }
.refl-cell.m4 { background: #4ade80; }
.refl-cell.m5 { background: #22c55e; }
.refl-cell.today { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------------- Print ---------------- */
@media print {
    nav, footer, .scroll-progress, .skip-link, .cmdk-overlay, .d-print-none { display: none !important; }
    body { background: #fff !important; background-image: none !important; }
    .certificate { box-shadow: none; max-width: 100%; }
    .champ-cert { box-shadow: none; max-width: 100%; border-color: #b8860b; }
    .champ-cert-inner { border-color: #b8860b; }
}

/* =====================================================================
   Accessibility — high-contrast mode + a11y toggle buttons
   [data-contrast="high"] on <html>; trades soft tints/neon glow for
   strong borders, focus rings and legible muted text. Wins via attribute
   specificity + targeted !important (justified for an a11y override).
   ===================================================================== */
.theme-toggle .a11y-toggle-icon { font-size: 1rem; line-height: 1; }
.theme-toggle.is-on { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
.theme-toggle[disabled] { opacity: .4; cursor: not-allowed; }

[data-contrast="high"] { --border-soft: #14181f; --text-soft: #14181f; }
[data-contrast="high"][data-bs-theme="dark"] { --border-soft: #f4f6fb; --text-soft: #f4f6fb; }

[data-contrast="high"] a:not(.btn):not(.nav-link):not(.lh-tile):not(.gm-daily) { text-decoration: underline; }
[data-contrast="high"] .text-muted { color: var(--text-soft) !important; }
[data-contrast="high"] .card,
[data-contrast="high"] .cn-card, [data-contrast="high"] .sq-chip,
[data-contrast="high"] .wr-animal-card, [data-contrast="high"] .cn-hud-item,
[data-contrast="high"] .wr-hud-item, [data-contrast="high"] .result-chip { border: 2px solid var(--border-soft) !important; }
[data-contrast="high"] :focus-visible { outline: 3px solid #1d4ed8 !important; outline-offset: 2px !important; }
[data-contrast="high"][data-bs-theme="dark"] :focus-visible { outline-color: #facc15 !important; }

/* In high contrast, swap arcade neon glow for solid high-legibility edges. */
[data-contrast="high"] .arcade::before { opacity: 0; }
[data-contrast="high"] .arcade .cn-card, [data-contrast="high"] .arcade .sq-chip,
[data-contrast="high"] .arcade .wr-stage {
    background: var(--surface) !important; border: 2px solid var(--border-soft) !important; box-shadow: none !important;
}
[data-contrast="high"] .arcade .cn-card.active, [data-contrast="high"] .arcade .wr-animal-card.active,
[data-contrast="high"] .arcade .sq-chip:hover { outline: 3px solid #1d4ed8 !important; outline-offset: 2px; box-shadow: none !important; }
[data-contrast="high"][data-bs-theme="dark"] .arcade .cn-card.active,
[data-contrast="high"][data-bs-theme="dark"] .arcade .wr-animal-card.active { outline-color: #facc15 !important; }
[data-contrast="high"] .arc-progress-fill { background: #1d4ed8 !important; box-shadow: none !important; }
[data-contrast="high"][data-bs-theme="dark"] .arc-progress-fill { background: #facc15 !important; }
[data-contrast="high"] .arc-progress-fill::after { display: none; }
[data-contrast="high"] .arcade .cn-title { -webkit-text-fill-color: currentColor; filter: none; }

/* a screen-reader-only live region (Bootstrap has .visually-hidden too) */
.eq-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* =====================================================================
   Deeper motion v2 — flowing @property borders, aurora overlays, 3D tilt,
   tap feedback + landscape/touch responsiveness. (Gated for a11y below.)
   ===================================================================== */
@property --arc-angle { syntax: "<angle>"; inherits: false; initial-value: 120deg; }
@keyframes arcSpin { to { --arc-angle: 480deg; } }
@keyframes arcAurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* flowing conic neon border on the focal elements (active card + result cards) */
.arcade .cn-card.active {
    --arc-angle: 120deg;
    background: linear-gradient(var(--surface), var(--surface)) padding-box,
               conic-gradient(from var(--arc-angle), var(--neon), var(--neon-2), var(--arc-accent), var(--neon)) border-box;
    animation: arcPulse 1.3s ease-in-out infinite, arcSpin 2.8s linear infinite;
}
.arcade .cn-result-card, .arcade #wrResult .card {
    --arc-angle: 120deg;
    background: linear-gradient(var(--surface), var(--surface)) padding-box,
               conic-gradient(from var(--arc-angle), var(--neon), var(--neon-2), var(--arc-accent), var(--neon)) border-box;
    animation: pbPop .45s cubic-bezier(.34, 1.56, .64, 1) both, arcSpin 6s linear infinite;
}

/* aurora — flowing gradient overlay on the daily card */
.arcade .gm-daily {
    background: linear-gradient(120deg, var(--neon), var(--arc-accent), var(--neon-2), var(--neon));
    background-size: 300% 300%; animation: arcAurora 9s ease infinite;
}

/* tactile press feedback on tap */
.arcade .cn-card:active, .arcade .sq-chip:active, .arcade .wr-animal-card:active, .arcade .lh-tile:active { transform: scale(.96); }

/* 3D tilt scaffolding (arcade.js sets inline transform on fine pointers) */
.arcade .lh-grid { perspective: 1000px; }
.arcade .lh-tile { transform-style: preserve-3d; will-change: transform; }

/* deeper responsiveness — short/landscape screens + touch tap targets */
@media (max-height: 540px) and (orientation: landscape) {
    .arc-stage { min-height: 0; }
    .arc-stage .cn-card { min-height: 2.2rem; }
    .arcade #wrPlay { min-height: 0; justify-content: flex-start; }
    .wr-track { height: 92px; }
}
@media (pointer: coarse) {
    .arcade .cn-card, .arcade .sq-chip { min-height: 3rem; }
    .arcade .wr-animal-card { min-height: 4.2rem; }
    .arc-skin-chip, .cn-diff-chip { padding-block: .45rem; }
}

/* a11y gates for v2 */
@media (prefers-reduced-motion: reduce) {
    .arcade .cn-card.active, .arcade .cn-result-card, .arcade #wrResult .card, .arcade .gm-daily { animation: none; }
    .arcade .cn-card:active, .arcade .sq-chip:active, .arcade .wr-animal-card:active, .arcade .lh-tile:active { transform: none; }
}
[data-contrast="high"] .arcade .cn-card.active, [data-contrast="high"] .arcade .cn-result-card,
[data-contrast="high"] .arcade #wrResult .card, [data-contrast="high"] .arcade .gm-daily { animation: none; }

/* tap ripple on game cards/chips (arcade.js spawns .arc-ripple inside) */
.arcade .wr-animal-card { position: relative; overflow: hidden; }
.arc-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, color-mix(in srgb, var(--neon, #8b5cf6) 55%, transparent), transparent 70%); animation: arcRipple .6s ease-out forwards; z-index: 0; }
@keyframes arcRipple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .arc-ripple { display: none; } }
[data-contrast="high"] .arc-ripple { display: none; }

/* win emoji burst + combo popup (arcade.js: eqBurst / eqCombo) */
.arc-burst { position: fixed; left: 50%; top: 46%; z-index: 1099; pointer-events: none; }
.arc-burst span { position: absolute; left: 0; top: 0; font-size: clamp(1.2rem, 5vw, 1.7rem); animation: arcBurst 1.25s ease-out forwards; will-change: transform, opacity; }
@keyframes arcBurst { 0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.1) rotate(45deg); } }
.arc-combo { position: fixed; left: 50%; top: 22%; transform: translateX(-50%) scale(.6); z-index: 1098; pointer-events: none; opacity: 0;
    font-weight: 900; font-size: clamp(1.25rem, 6vw, 2rem); color: #fff; padding: .3rem 1.1rem; border-radius: 999px; white-space: nowrap;
    background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 12px 34px rgba(239, 68, 68, .45); }
.arc-combo.show { animation: arcComboPop .95s var(--ease, ease) both; }
.arc-combo.big { font-size: clamp(1.6rem, 8vw, 2.6rem); box-shadow: 0 14px 40px rgba(239, 68, 68, .55), 0 0 0 4px rgba(255, 255, 255, .12); }
@keyframes arcComboPop { 0% { opacity: 0; transform: translateX(-50%) scale(.5); } 24% { opacity: 1; transform: translateX(-50%) scale(1.18); } 70% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(1); } }

/* high-combo neon vignette flash (eqCombo at n>=4) */
.arc-vignette { position: fixed; inset: 0; z-index: 1097; pointer-events: none; opacity: 0; box-shadow: inset 0 0 90px 26px var(--arc-flash, rgba(245, 158, 11, .5)); }
.arc-vignette.flash { animation: arcVignette .75s ease-out; }
@keyframes arcVignette { 0% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .arc-burst, .arc-combo, .arc-vignette { display: none; } }

/* =====================================================================
   Theme skins (2026-07-06)
   Named color themes layered over light/dark via [data-eq-skin] on <html>.
   Each skin only re-points the design tokens above — every component
   (navbar, heroes, cards, bottom nav, games) restyles itself from them.
   Picker + persistence: includes/theme_engine.php (🎨 in every header).
   Skins compose with [data-bs-theme] (dark) and [data-contrast] (a11y).
   ===================================================================== */

/* ---- 💎 Jewel Tones — emerald / sapphire / ruby ---- */
[data-eq-skin="jewel"] {
    --brand: #047857;
    --brand-2: #1d4ed8;
    --brand-3: #be123c;
    --brand-rgb: 4, 120, 87;
    --bs-link-hover-color-rgb: 6, 95, 70;
    --app-bg: #f2f8f5;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(29, 78, 216, .09), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(4, 120, 87, .10), transparent 55%);
    --surface-2: #f5faf7;
    --border-soft: #dfeae4;
    --text-soft: #5f6f68;
}
[data-eq-skin="jewel"][data-bs-theme="dark"] {
    --app-bg: #06130e;
    --bs-body-bg: #06130e;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(29, 78, 216, .16), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(16, 185, 129, .16), transparent 55%);
    --surface: #0e211a;
    --surface-2: #142b21;
    --border-soft: #1f3a2f;
    --text-soft: #9dbcac;
}

/* ---- 🌊 Ocean Breeze — sky / teal / cyan ---- */
[data-eq-skin="ocean"] {
    --brand: #0369a1;
    --brand-2: #0f766e;
    --brand-3: #0284c7;   /* sky-600: keeps white nav text ≥3:1 on the gradient's right end */
    --brand-rgb: 3, 105, 161;
    --bs-link-hover-color-rgb: 7, 89, 133;
    --app-bg: #f0f7fb;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(15, 118, 110, .09), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(3, 105, 161, .10), transparent 55%);
    --surface-2: #f3f9fc;
    --border-soft: #dde9f1;
    --text-soft: #617180;
}
[data-eq-skin="ocean"][data-bs-theme="dark"] {
    --app-bg: #051220;
    --bs-body-bg: #051220;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(13, 148, 136, .16), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(14, 165, 233, .15), transparent 55%);
    --surface: #0c2033;
    --surface-2: #122a42;
    --border-soft: #234459;
    --text-soft: #97b1c6;
}

/* ---- 🌅 Sunset Glow — burnt orange / rose / amber ---- */
[data-eq-skin="sunset"] {
    --brand: #c2410c;
    --brand-2: #be185d;
    --brand-3: #b45309;   /* amber-700: keeps white nav text ≥3:1 on the gradient's right end */
    --brand-rgb: 194, 65, 12;
    --bs-link-hover-color-rgb: 154, 52, 18;
    --app-bg: #fdf6f0;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(190, 24, 93, .08), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(194, 65, 12, .10), transparent 55%);
    --surface-2: #fcf7f2;
    --border-soft: #f0e3d8;
    --text-soft: #7a6f66;
}
[data-eq-skin="sunset"][data-bs-theme="dark"] {
    --app-bg: #170c08;
    --bs-body-bg: #170c08;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(225, 29, 72, .15), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(234, 88, 12, .15), transparent 55%);
    --surface: #291710;
    --surface-2: #331e15;
    --border-soft: #4a3226;
    --text-soft: #c4a893;
}

/* ---- ⚡ Neon Pulse — cyan / fuchsia / pink (built for dark mode) ---- */
[data-eq-skin="neon"] {
    --brand: #0e7490;
    --brand-2: #a21caf;
    --brand-3: #db2777;
    --brand-rgb: 14, 116, 144;
    --bs-link-hover-color-rgb: 21, 94, 117;
    --app-bg: #f2f8fa;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(162, 28, 175, .10), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(14, 116, 144, .10), transparent 55%);
    --surface-2: #f4f9fb;
    --border-soft: #dfe9ee;
    --text-soft: #5f6c85;
}
[data-eq-skin="neon"][data-bs-theme="dark"] {
    /* Brand tokens stay at their light values: white text sits on brand
       gradients (navbar/heroes/buttons) and the bright neon variants fail
       WCAG there. The "neon" feel comes from the glow gradients below. */
    --app-bg: #04060f;
    --bs-body-bg: #04060f;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(217, 70, 239, .20), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(34, 211, 238, .18), transparent 55%);
    --surface: #0b1222;
    --surface-2: #111a30;
    --border-soft: #24304f;
    --text-soft: #93a5c8;
}
/* ---- 🗒️ Minimalist — calm slate monochrome, gradients off ---- */
[data-eq-skin="minimal"] {
    --brand: #334155;
    --brand-2: #475569;
    --brand-3: #64748b;
    --brand-rgb: 51, 65, 85;
    --bs-link-hover-color-rgb: 30, 41, 59;
    --app-bg: #f7f8fa;
    --app-bg-grad: none;
    --surface-2: #f3f4f6;
    --border-soft: #e5e7eb;
    --text-soft: #667085;
}
[data-eq-skin="minimal"][data-bs-theme="dark"] {
    /* Slate-700 brand vanishes on near-black; lift the accents so links,
       active dots and bottom-nav labels stay visible (navbar white text
       still clears 4.5:1 on the mid-slate gradient). */
    --brand: #64748b;
    --brand-2: #475569;
    --brand-3: #94a3b8;
    --brand-rgb: 100, 116, 139;
    --app-bg: #0d0f13;
    --bs-body-bg: #0d0f13;
    --app-bg-grad: none;
    --surface: #16181d;
    --surface-2: #1d2025;
    --border-soft: #2a2e35;
    --text-soft: #9ca3af;
}
[data-eq-skin="minimal"] .app-navbar { box-shadow: 0 2px 10px rgba(16, 24, 40, .18); }
/* "Gradients off" applies to the bottom nav's neon chrome too */
[data-eq-skin="minimal"] .bottom-nav::after { display: none; }
[data-eq-skin="minimal"] .bottom-nav::before { animation: none; background: var(--brand); box-shadow: none; }
[data-eq-skin="minimal"] .bn-sub { box-shadow: var(--shadow-lg); }

/* ---- 👑 Velvet Aurora — dark-purple → gold → cyan, glowing & premium ----
   Free for everyone (not premium-gated). Every other skin's glow effects
   (bottom-nav edge, icon drop-shadows, active-dot pulses — all driven by
   --brand-rgb / --brand-2 / --brand-3 already) automatically pick up this
   three-hue palette; the rules below add a couple of skin-only touches so
   the "gold + cyan" half of the palette shows up as glow, not just as the
   navbar/hero gradient's tail end. */
[data-eq-skin="aurora"] {
    --brand: #581c87;      /* deep velvet purple */
    --brand-2: #a16207;    /* dark gold */
    --brand-3: #0e7490;    /* deep cyan */
    --brand-rgb: 88, 28, 135;
    --bs-link-hover-color-rgb: 59, 7, 100;
    --app-bg: #f8f4fd;
    --app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(161, 98, 7, .08), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(88, 28, 135, .10), transparent 55%);
    --surface-2: #faf6fe;
    --border-soft: #ece0f7;
    --text-soft: #6b6178;
    /* Contrast checked (WCAG): brand 10.9:1, gold 4.9:1, cyan 5.4:1 vs
       white — clears both the navbar/hero gradient's own ≥3:1 bar (see
       Sunset/Ocean/Neon comments above) and the ≥4.5:1 body-text bar,
       since gold/cyan also render as plain link/badge text here. */
}
[data-eq-skin="aurora"][data-bs-theme="dark"] {
    /* This skin is deliberately dark-leaning — the velvet/gold/cyan glow is
       the point, so dark mode is the primary experience, not an afterthought.
       Brand tokens brighten a touch vs. the light variant (unlike Neon Pulse,
       which keeps identical tokens in both modes) because they double as
       plain link/badge text color on this near-black surface. Checked:
       brand #9366f7 — 3.8:1 vs white(nav), 4.7:1 vs surface, 5.2:1 vs app-bg;
       gold #d97706 — 3.2:1 / 5.7:1 / 6.3:1; cyan #0891b2 — 3.7:1 / 4.9:1 /
       5.4:1. All clear ≥3:1 on the brand gradient and ≥4.5:1 as body text. */
    --brand: #9366f7;
    --brand-2: #d97706;
    --brand-3: #0891b2;
    --brand-rgb: 147, 102, 247;
    --app-bg: #0c0518;
    --bs-body-bg: #0c0518;
    --app-bg-grad: radial-gradient(1100px 620px at 100% -10%, rgba(217, 119, 6, .16), transparent 60%),
                   radial-gradient(900px 520px at -10% 0%, rgba(147, 102, 247, .22), transparent 55%),
                   radial-gradient(700px 420px at 40% 118%, rgba(8, 145, 178, .16), transparent 62%);
    --surface: #1a1030;
    --surface-2: #241542;
    --border-soft: #35234f;
    --text-soft: #b9a9d6;   /* 8.4:1 vs surface, 9.2:1 vs app-bg */
}
/* Signature touch: primary actions get a gold+cyan halo instead of the
   single-hue brand glow every skin gets for free from --brand-rgb alone. */
[data-eq-skin="aurora"] .btn-primary { box-shadow: 0 6px 16px rgba(var(--brand-rgb), .32), 0 0 16px rgba(161, 98, 7, .22); }
[data-eq-skin="aurora"] .btn-primary:hover { box-shadow: 0 10px 24px rgba(var(--brand-rgb), .4), 0 0 20px rgba(161, 98, 7, .3), 0 0 26px rgba(14, 116, 144, .2); }
[data-eq-skin="aurora"] .app-navbar { border-bottom: 1px solid rgba(234, 179, 8, .35); }
[data-eq-skin="aurora"][data-bs-theme="dark"] .btn-primary { box-shadow: 0 6px 16px rgba(var(--brand-rgb), .35), 0 0 16px rgba(217, 119, 6, .3); }
[data-eq-skin="aurora"][data-bs-theme="dark"] .btn-primary:hover { box-shadow: 0 10px 26px rgba(var(--brand-rgb), .48), 0 0 22px rgba(217, 119, 6, .4), 0 0 30px rgba(8, 145, 178, .3); }
[data-eq-skin="aurora"][data-bs-theme="dark"] .hero,
[data-eq-skin="aurora"][data-bs-theme="dark"] .app-navbar { box-shadow: 0 18px 44px rgba(var(--brand-rgb), .38), 0 0 26px rgba(8, 145, 178, .2); }
[data-eq-skin="aurora"][data-bs-theme="dark"] .card.shadow-sm,
[data-eq-skin="aurora"][data-bs-theme="dark"] .row.g-4 .card:hover,
[data-eq-skin="aurora"][data-bs-theme="dark"] .row.g-3 .card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(217, 119, 6, .18); }

/* One more pill in the navbar cluster — tighten it up on small phones. */
@media (max-width: 480px) {
    .app-navbar .gap-3 { gap: .45rem !important; }
    .app-navbar .theme-toggle { padding: .3rem .45rem; }
}

/* ---- 🎨 Skin picker (theme_engine.php dropdown) ---- */
.skin-menu { min-width: 230px; }
.skin-swatches { display: inline-flex; gap: 3px; flex-shrink: 0; }
.skin-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.skin-opt.active { background: rgba(var(--brand-rgb), .12); font-weight: 600; }
[data-contrast="high"] .skin-opt.active { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ---- ⚡ Pulse strips (dashboard / org console / guardian) ----
   Consume the skin tokens (--brand*, --surface-2, --border-soft, --text-soft)
   so every named theme + dark mode styles them automatically. */
.pulse-card { border: 0; overflow: hidden; }
.pulse-card > .card-header {
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .12), rgba(var(--brand-rgb), .02) 65%);
    border-bottom: 1px solid var(--border-soft);
    position: relative;
    overflow: hidden;
}
/* One elegant light-sweep across the header on load. */
.pulse-card > .card-header::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    animation: pulse-shine 1.1s ease-out .25s 1 both;
    pointer-events: none;
}
@keyframes pulse-shine { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .pulse-card > .card-header::after { animation: none; opacity: 0; } }
.pulse-tile {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: .8rem;
    padding: .6rem .35rem;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pulse-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--brand-rgb), .14); }
.pulse-tile .pv { font-weight: 800; font-size: 1.3rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pulse-tile .pl { color: var(--text-soft); font-size: .74rem; }
/* Tiles rise in one after another (matches the sparkline's stagger). */
.pulse-card .pulse-tile { animation: pulse-rise .4s ease-out backwards; }
.pulse-card [class*="col-"]:nth-child(1) .pulse-tile { animation-delay: .05s; }
.pulse-card [class*="col-"]:nth-child(2) .pulse-tile { animation-delay: .12s; }
.pulse-card [class*="col-"]:nth-child(3) .pulse-tile { animation-delay: .19s; }
.pulse-card [class*="col-"]:nth-child(4) .pulse-tile { animation-delay: .26s; }
.pulse-card [class*="col-"]:nth-child(5) .pulse-tile { animation-delay: .33s; }
.pulse-card [class*="col-"]:nth-child(6) .pulse-tile { animation-delay: .40s; }
@keyframes pulse-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pulse-card .pulse-tile { animation: none; } }
.pulse-spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; }
.pulse-spark > div {
    flex: 1;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, var(--brand), rgba(var(--brand-rgb), .45));
    transform-origin: bottom;
    animation: pulse-grow .45s ease-out backwards;
}
.pulse-spark > div.z { background: var(--border-soft); opacity: .55; }
.pulse-spark > div:hover { filter: brightness(1.15); }
@keyframes pulse-grow { from { transform: scaleY(0); } }
.pulse-insight {
    background: linear-gradient(90deg, rgba(var(--brand-rgb), .09), transparent 70%);
    border-left: 3px solid var(--brand);
    border-radius: .55rem;
    padding: .45rem .7rem;
}
@media (prefers-reduced-motion: reduce) { .pulse-spark > div { animation: none; } }

/* ---- 💬 Feedback rating row (mobile-first: five thumb-sized targets) ---- */
.fb-rate label { font-size: 1.5rem; padding: .45rem .25rem; min-width: 0; }
.fb-rate .btn-check:checked + label { background: rgba(var(--brand-rgb), .15); border-color: var(--brand); transform: scale(1.08); }
@media (min-width: 576px) { .fb-rate label { font-size: 1.7rem; padding: .5rem .9rem; } }

/* ---- 📱 Mobile polish layer (small screens are the primary device) ---- */
@media (max-width: 576px) {
    /* Thumb-sized tap targets (≥44px effective) without redesigning components. */
    .btn-sm { padding: .45rem .75rem; }
    .btn { min-height: 42px; }
    .nav-link { padding: .55rem .7rem; }
    .form-check-input { width: 1.15em; height: 1.15em; }
    /* iOS zooms any input under 16px — keep fields at 16px on phones. */
    .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; min-height: 40px; }
    /* Tighter cards and headings so content, not chrome, fills the viewport. */
    .card-body { padding: .85rem; }
    .card-body.p-4 { padding: 1rem !important; }
    h1, .h3 { font-size: clamp(1.15rem, 5.5vw, 1.5rem); }
    .display-4 { font-size: clamp(2rem, 10vw, 2.8rem); }
    .display-6 { font-size: clamp(1.4rem, 7vw, 2rem); }
    /* Data tables: readable without pinching, scroll with momentum. */
    .table { font-size: .82rem; }
    .table td, .table th { padding: .4rem .45rem; }
    .pulse-tile .pv { font-size: 1.1rem; }
    /* Filter/action rows stack instead of squeezing. */
    .d-flex.gap-2.flex-wrap > .btn, .d-flex.gap-1.flex-wrap > .btn { flex: 1 1 auto; }
}
.table-responsive { -webkit-overflow-scrolling: touch; }
/* PWA: respect notches/home-indicator (bottom nav + page end). */
.bn-bar { padding-bottom: max(.4rem, env(safe-area-inset-bottom)); }
body { padding-bottom: env(safe-area-inset-bottom); }
/* Long content (org names, e-mails) must wrap, never overflow the viewport. */
.card-body, .list-group-item, .alert { overflow-wrap: anywhere; }

/* High contrast must beat every skin: the skin blocks above re-declare
   --border-soft/--text-soft at equal specificity AFTER the a11y section,
   so re-assert the hardened values here at the end of the cascade. */
[data-contrast="high"] { --border-soft: #14181f; --text-soft: #14181f; }
[data-contrast="high"][data-bs-theme="dark"] { --border-soft: #f4f6fb; --text-soft: #f4f6fb; }

/* ===========================================================================
   RESPONSIVE DATA TABLES  —  .table-cards
   A 7-column money table is unusable on a phone: it either overflows or
   shrinks the text to nothing. Below 768px each row collapses into a stacked
   card, with the column heading shown from the cell's own data-label. The
   desktop table is untouched.

   Usage:  <table class="table table-cards"> … <td data-label="Paid">₹500</td>
   Cells with .tc-hide drop out on mobile (redundant once stacked).
   ======================================================================== */
@media (max-width: 767.98px) {
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }

    .table-cards tbody tr {
        border: 1px solid var(--border-soft, #dee2e6);
        border-radius: .5rem;
        padding: .5rem .75rem;
        margin-bottom: .6rem;
        background: var(--bs-body-bg);
    }
    /* Row-state colours still need to read as a card, not a stripe. */
    .table-cards tbody tr.table-warning { border-color: #ffc107; }

    .table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        border: 0;
        padding: .2rem 0;
        text-align: right;
    }
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: .78rem;
        color: var(--text-soft, #6c757d);
        text-align: left;
        flex: 0 0 auto;
    }
    /* A cell with no label (actions) spans the full width instead. */
    .table-cards td:not([data-label]) { justify-content: flex-end; }
    .table-cards td.tc-hide { display: none; }

    /* The first cell reads as the card title. */
    .table-cards tbody tr td:first-child {
        font-size: 1.02rem;
        border-bottom: 1px solid var(--border-soft, #dee2e6);
        margin-bottom: .35rem;
        padding-bottom: .35rem;
    }
    .table-cards tbody tr td:first-child::before { font-size: .78rem; }

    /* Totals row: keep it visually distinct once stacked. */
    .table-cards tfoot tr { display: block; border: 2px solid var(--bs-primary); border-radius: .5rem; padding: .5rem .75rem; }
    .table-cards tfoot td { display: flex; justify-content: space-between; border: 0; padding: .15rem 0; }
    .table-cards tfoot td[colspan] { justify-content: flex-start; font-weight: 700; }

    /* Inline forms inside a stacked card need room to breathe. */
    .table-cards td form { width: 100%; }
    .table-cards td .form-control,
    .table-cards td .form-select { min-height: 40px; }   /* comfortable tap target */
}

/* Sticky table head on tall desktop lists so column meaning never scrolls away. */
@media (min-width: 768px) {
    .table-sticky thead th {
        position: sticky; top: 0; z-index: 2;
        background: var(--bs-tertiary-bg, #f8f9fa);
    }
}

/* ---------------------------------------------------------------------------
   IN-FLIGHT PAYMENT ROW  —  .pay-form.is-sending
   A collector on slow mobile data gets no feedback between the tap and the
   redirect, so they tap again. The JS guard blocks the second submit; this
   makes the wait VISIBLE so they do not try. Pointer events stay off the whole
   form — including the method/reference fields — while the request is in the
   air, because editing them after posting changes nothing but looks like it did.
   --------------------------------------------------------------------------- */
.pay-form.is-sending { opacity: .6; pointer-events: none; }
.pay-form.is-sending .pay-submit { position: relative; }
.pay-form.is-sending .pay-submit::after {
    content: ""; display: inline-block; width: .75em; height: .75em; margin-left: .4em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    vertical-align: -.1em; animation: eq-pay-spin .6s linear infinite;
}
@keyframes eq-pay-spin { to { transform: rotate(360deg); } }
/* Respect a user who has asked for less motion — the dimming still communicates. */
@media (prefers-reduced-motion: reduce) {
    .pay-form.is-sending .pay-submit::after { animation: none; }
}

/* ---------------------------------------------------------------------------
   POLICY PLACEHOLDER  —  <mark class="policy-todo">
   A legal fact that has not been configured yet. It must be impossible to
   mistake for finished copy: a reader who relies on "refunds within  days"
   has been misled, so an unset value is shown, loudly, as unset.
   Print styles keep it visible too — policy pages get printed and filed.
   --------------------------------------------------------------------------- */
.policy-todo {
    background: #fff3cd; color: #664d03; border: 1px dashed #997404;
    border-radius: .25rem; padding: 0 .3em; font-style: italic; white-space: normal;
}
[data-bs-theme="dark"] .policy-todo { background: #4a3a06; color: #ffe69c; border-color: #997404; }
@media print { .policy-todo { border: 1px dashed #000; background: transparent; } }

/* ===========================================================================
   PRICING  —  "STAGE" DESIGN SYSTEM  (.pr-*)
   A dark, self-contained stage that the plan cards sit on, so pricing reads as
   a deliberate destination rather than one more card on a page.

   Deliberate constraints:
   · The stage owns its colours (dark in BOTH themes) but every value is a
     variable, so a theme skin can still retint the accent.
   · State is never colour-only: the glyphs carry the meaning.
   · Motion is decorative; everything still reads with it disabled.
   =========================================================================== */
.pr-wrap {
    --pr-accent: #7c8cff;
    --pr-accent-2: #22d3ee;
    --pr-ink: #f2f4ff;
    --pr-muted: #a3abd4;
    --pr-surface: rgba(255, 255, 255, .06);
    --pr-line: rgba(255, 255, 255, .14);
    position: relative; isolation: isolate;
    margin: 2rem 0; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) 2rem;
    border-radius: 1.75rem; color: var(--pr-ink);
    background:
        radial-gradient(90rem 40rem at 15% -10%, rgba(124, 140, 255, .35), transparent 60%),
        radial-gradient(70rem 35rem at 95% 0%, rgba(34, 211, 238, .22), transparent 55%),
        linear-gradient(180deg, #0e1230 0%, #0a0d24 100%);
    box-shadow: 0 30px 70px -40px rgba(10, 13, 36, .9);
    overflow: hidden;
}
/* Aurora wash. Decorative only, so it lives in a pseudo-element and is
   invisible to assistive tech. */
.pr-wrap::before {
    content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%;
    background: conic-gradient(from 210deg at 50% 50%, transparent, rgba(124,140,255,.25), transparent 45%);
    filter: blur(60px); z-index: -1; animation: pr-drift 18s ease-in-out infinite alternate;
}
@keyframes pr-drift { to { transform: translate3d(4%, 6%, 0) rotate(8deg); } }

.pr-wrap a { color: var(--pr-accent-2); }
.pr-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--pr-muted); border: 1px solid var(--pr-line); border-radius: 999px;
    padding: .3rem .75rem; background: var(--pr-surface);
}
.pr-lede { color: var(--pr-muted); font-size: .92rem; max-width: 46rem; margin-bottom: 1.25rem; }

/* ---- segmented toggles -------------------------------------------------- */
.pr-switch, .pr-cycle {
    display: flex; flex-wrap: nowrap; gap: .2rem; width: fit-content; max-width: 100%;
    margin: 0 auto 1.25rem; padding: .3rem;
    border-radius: 999px; background: rgba(0, 0, 0, .3);
    border: 1px solid var(--pr-line); backdrop-filter: blur(10px);
}
.pr-cycle { margin-bottom: 1.5rem; }
.pr-switch-btn, .pr-cycle-btn {
    position: relative; border: 0; background: transparent; cursor: pointer;
    color: var(--pr-muted); font-weight: 650; font-size: .88rem;
    padding: .6rem 1.1rem; border-radius: 999px; min-height: 44px; white-space: nowrap;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.pr-switch-btn.is-on, .pr-cycle-btn.is-on {
    color: #0a0d24; background: linear-gradient(135deg, var(--pr-accent), var(--pr-accent-2));
    box-shadow: 0 8px 24px -10px var(--pr-accent);
}
.pr-switch-btn:focus-visible, .pr-cycle-btn:focus-visible, .pr-cta:focus-visible,
.pr-cards:focus-visible, .pr-matrix-wrap:focus-visible {
    outline: 3px solid var(--pr-accent-2); outline-offset: 3px;
}
.pr-switch-btn:active, .pr-cycle-btn:active { transform: scale(.97); }

/* ---- plan cards --------------------------------------------------------- */
.pr-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 640px) {
    .pr-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start; }
}

.pr-card {
    position: relative; display: flex; flex-direction: column; text-align: left;
    padding: 1.5rem 1.35rem 1.35rem; border-radius: 1.25rem;
    background: var(--pr-surface); border: 1px solid var(--pr-line);
    backdrop-filter: blur(14px);
    transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, box-shadow .22s ease;
}
/* The recommended tier is physically larger, not merely outlined. */
.pr-card-featured {
    border-color: transparent;
    background:
        linear-gradient(var(--pr-surface), var(--pr-surface)) padding-box,
        linear-gradient(135deg, var(--pr-accent), var(--pr-accent-2)) border-box;
    box-shadow: 0 24px 60px -30px var(--pr-accent);
}
@media (min-width: 640px) { .pr-card-featured { transform: scale(1.045); z-index: 1; } }
/* Hover-lift only where a real pointer exists — on touch, :hover sticks after
   a tap and leaves a card visibly raised with nothing hovering it. */
@media (hover: hover) and (pointer: fine) {
    .pr-card:hover { transform: translateY(-4px); border-color: var(--pr-accent); }
    .pr-card-featured:hover { transform: scale(1.045) translateY(-4px); }
}
.pr-ribbon {
    position: absolute; top: -.65rem; left: 1.35rem;
    font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #0a0d24; padding: .25rem .7rem; border-radius: 999px;
    background: linear-gradient(135deg, var(--pr-accent), var(--pr-accent-2));
}
.pr-card-name { font-size: .95rem; font-weight: 700; color: var(--pr-ink); margin-bottom: .6rem; }
.pr-tag {
    font-size: .65rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid var(--pr-line); color: var(--pr-muted);
}
.pr-price {
    font-size: clamp(2.1rem, 7vw, 2.6rem); font-weight: 800; line-height: 1.05;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #fff 20%, var(--pr-accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not (background-clip: text) {
    .pr-price { color: var(--pr-ink); -webkit-text-fill-color: currentColor; }
}
.pr-period { font-size: .82rem; color: var(--pr-muted); }
.pr-equiv  { font-size: .76rem; color: var(--pr-muted); min-height: 1.15em; }
.pr-save {
    align-self: flex-start; margin-top: .5rem; font-size: .72rem; font-weight: 700;
    color: #062e21; background: linear-gradient(135deg, #34d399, #22d3ee);
    border-radius: 999px; padding: .18rem .6rem;
}
.pr-limits {
    display: flex; flex-direction: column; gap: .25rem;
    margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--pr-line);
    font-size: .78rem; color: var(--pr-muted);
}
.pr-limits span::before { content: "\25B8  "; color: var(--pr-accent); }
.pr-cta {
    margin-top: 1.1rem; padding: .7rem 1rem; min-height: 44px; border-radius: .85rem;
    display: block; text-align: center; text-decoration: none; font-weight: 700;
    color: #0a0d24; background: linear-gradient(135deg, var(--pr-accent), var(--pr-accent-2));
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pr-cta:hover { color: #0a0d24; filter: brightness(1.08); }
.pr-cta:active { transform: scale(.98); }

/* ---- capability matrix -------------------------------------------------- */
.pr-matrix-wrap {
    border: 1px solid var(--pr-line); border-radius: 1.1rem; overflow: auto;
    background: rgba(0, 0, 0, .22);
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.pr-matrix {
    margin: 0; color: var(--pr-ink);
    --bs-table-bg: transparent; --bs-table-color: var(--pr-ink);
}
.pr-matrix > :not(caption) > * > * { background: transparent; color: var(--pr-ink); box-shadow: none; }
.pr-matrix thead th {
    position: sticky; top: 0; z-index: 2; background: #131737; color: var(--pr-ink);
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 1px solid var(--pr-line); padding: .85rem .75rem; white-space: nowrap;
}
.pr-matrix tbody tr + tr { border-top: 1px solid rgba(255,255,255,.07); }
.pr-matrix th[scope="row"] { font-weight: 500; font-size: .88rem; text-align: left; padding: .8rem .75rem; }
.pr-matrix td { text-align: center; padding: .8rem .75rem; font-variant-numeric: tabular-nums; }
/* Meaning is carried by the glyph; colour only reinforces it. */
.pr-yes { color: #34d399; font-weight: 800; }
.pr-matrix td.pr-yes { font-size: 1.05rem; }
/* The "—" means "not included in this plan" — it is content, not decoration.
   At the original rgba(255,255,255,.32) it measured 2.84:1 against the matrix
   backdrop, well under WCAG AA. A ✓ that reads crisply beside a — that fades
   biases the reader toward "everything is included", which on a pricing table
   is the one direction it must never lean. .55 measures 6.2:1 — readable, and
   still visually secondary to the mint ✓ at 9.9:1. */
.pr-no { color: rgba(255,255,255,.55); font-weight: 400; }
.pr-col-hot { color: var(--pr-accent-2) !important; }
.pr-matrix tbody tr:hover th[scope="row"], .pr-matrix tbody tr:hover td { background: rgba(255,255,255,.04); }
/* Pin the feature name so the plan columns can scroll past it. */
.pr-matrix th[scope="row"], .pr-matrix thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: #131737;
}
.pr-matrix thead th:first-child { z-index: 3; }

.pr-wrap .alert { background: rgba(255,255,255,.07); border: 1px solid var(--pr-line); color: var(--pr-ink); }
.pr-wrap .text-muted, .pr-wrap .small.text-muted { color: var(--pr-muted) !important; }

/* ---- phones ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .pr-wrap {
        border-radius: 1.25rem; scroll-margin-top: 120px;
        margin-inline: calc(-1 * env(safe-area-inset-left, 0px)) calc(-1 * env(safe-area-inset-right, 0px));
    }
    /* Rides under the 56px navbar, matching the .quiz-bar sticky convention. */
    .pr-switch { position: sticky; top: 56px; z-index: 1020; width: 100%; }
    .pr-switch-btn { flex: 1 1 0; text-align: center; padding: .6rem .4rem; font-size: .8rem; }
    .pr-cycle { width: 100%; }
    .pr-cycle-btn { flex: 1 1 0; text-align: center; }

    /* Cards become a snap carousel — the pattern phones already teach. The
       next card peeks so it is obvious more exist without a scrollbar. */
    .pr-cards {
        display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
        padding: .5rem .25rem 1rem; margin-inline: -.25rem; scrollbar-width: none;
    }
    .pr-cards::-webkit-scrollbar { display: none; }
    .pr-cards > .pr-card { flex: 0 0 80%; max-width: 21rem; scroll-snap-align: center; }
    .pr-card-featured { transform: none; }
    .pr-matrix th[scope="row"] { min-width: 11rem; }
    .pr-matrix td { min-width: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-wrap::before { animation: none; }
    .pr-card, .pr-switch-btn, .pr-cycle-btn { transition: none; }
    .pr-card:hover { transform: none; }
    .pr-card-featured:hover { transform: scale(1.045); }
    .pr-switch-btn:active, .pr-cycle-btn:active, .pr-cta:active { transform: none; }
    .pr-cards { scroll-behavior: auto; }
}

/* The stage is dark by design; keep it legible if high contrast is forced. */
[data-contrast="high"] .pr-wrap { background: #05060f; }
[data-contrast="high"] .pr-wrap .pr-no { color: #cfd3ee; }

/* ---------------------------------------------------------------------------
   SAFE-AREA INSETS  (needs viewport-fit=cover, set in the page <head>)
   Without viewport-fit=cover every env(safe-area-inset-*) resolves to 0, so the
   bottom nav's existing inset was inert and could sit under the home indicator
   on notched phones. With cover enabled the insets are real — which also means
   landscape content must now be kept clear of the notch itself.
   --------------------------------------------------------------------------- */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
body.has-bottom-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ---- size finder (revealed by JS only) ---------------------------------- */
.pr-fit {
    max-width: 34rem; margin: 0 auto 1.25rem; padding: 1rem 1.1rem;
    border: 1px solid var(--pr-line); border-radius: 1rem;
    background: rgba(0, 0, 0, .25);
}
.pr-fit-head { font-size: .8rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--pr-muted); margin-bottom: .6rem; }
.pr-fit-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.pr-fit-field { flex: 1 1 8rem; display: flex; flex-direction: column; gap: .25rem; }
.pr-fit-field span { font-size: .78rem; color: var(--pr-muted); }
.pr-fit-field input {
    width: 100%; min-height: 44px; padding: .5rem .75rem;
    font-size: 16px;                      /* < 16px makes iOS zoom the page on focus */
    color: var(--pr-ink); background: rgba(255, 255, 255, .07);
    border: 1px solid var(--pr-line); border-radius: .7rem;
}
.pr-fit-field input:focus-visible { outline: 3px solid var(--pr-accent-2); outline-offset: 2px; }
.pr-fit-out:empty { display: none; }
.pr-fit-out {
    margin: .75rem 0 0; font-size: .85rem; font-weight: 600; color: var(--pr-ink);
    background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .35);
    border-radius: .7rem; padding: .5rem .75rem;
}
/* The matched card is called out with a ring AND a label, never colour alone. */
.pr-card.pr-fit-hit { border-color: #34d399; box-shadow: 0 0 0 2px #34d399, 0 24px 60px -30px #34d399; }
.pr-card.pr-fit-hit::after {
    content: attr(data-fit-label); position: absolute; top: -.65rem; right: 1rem;
    font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #062e21; background: #34d399; border-radius: 999px; padding: .2rem .6rem;
}
@media (prefers-reduced-motion: reduce) { .pr-card.pr-fit-hit { transition: none; } }

/* ---------------------------------------------------------------------------
   PRICING — FULL-BLEED STAGE + FULL-SCREEN MODE
   The CMS renders pages inside a 760px column. Pricing deliberately escapes it
   so the stage spans the viewport, while the CONTENT inside stays at a readable
   measure — a full-bleed background is premium, full-bleed body text is not.

   `overflow-x: clip` (NOT hidden) guards the 100vw breakout against the
   scrollbar-width rounding error. hidden would turn <body> into a scroll
   container and silently break every position: sticky descendant — including
   this page's own sticky audience switch.
   --------------------------------------------------------------------------- */
body { overflow-x: clip; }

/* Layered onto the base .pr-wrap above: geometry only, so no property is
   declared twice for the same selector. */
.pr-wrap {
    width: min(100vw, 1400px);
    margin-inline: calc(50% - min(50vw, 700px));
}
/* The stage sits INSIDE an already-full-bleed page here, so it must not
   apply its own breakout — two nested 50vw escapes compound into overflow. */
.cms-page--pricing .pr-wrap { width: auto; max-width: none; margin-inline: 0; }

/* Keep reading measure sane once the stage is wide. */
.pr-wrap > .pr-eyebrow,
.pr-wrap > .pr-lede,
.pr-wrap > .pr-switch,
.pr-wrap > .pr-panel { max-width: 72rem; margin-inline: auto; }
.pr-wrap > .pr-lede { text-align: center; }
.pr-wrap > .pr-eyebrow { display: block; width: fit-content; }

/* ---- the full-screen control ---- */
.pr-full {
    position: absolute; top: 1rem; right: 1rem; z-index: 4;
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 40px; padding: .4rem .8rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700; cursor: pointer;
    color: var(--pr-ink); background: rgba(255, 255, 255, .1);
    border: 1px solid var(--pr-line); backdrop-filter: blur(8px);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pr-full:hover { background: rgba(255, 255, 255, .18); }
.pr-full:focus-visible { outline: 3px solid var(--pr-accent-2); outline-offset: 3px; }
.pr-full[hidden] { display: none; }

/* ---- inside the browser's full-screen surface ---- */
.pr-wrap:fullscreen {
    width: 100vw; max-width: none; margin: 0; border-radius: 0;
    overflow-y: auto;                       /* the stage itself must scroll now */
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem)
             calc(2rem + env(safe-area-inset-bottom, 0px));
}
.pr-wrap:fullscreen > .pr-eyebrow,
.pr-wrap:fullscreen > .pr-lede,
.pr-wrap:fullscreen > .pr-switch,
.pr-wrap:fullscreen > .pr-panel { max-width: 76rem; }
/* The app navbar is not present in full screen, so the switch pins to the top. */
.pr-wrap:fullscreen .pr-switch { position: sticky; top: 0; }
.pr-wrap:fullscreen .pr-cards { margin-bottom: 2.5rem; }
/* Give the matrix the room that full screen exists to provide. */
.pr-wrap:fullscreen .pr-matrix-wrap { max-height: none; }

@media (max-width: 767.98px) {
    /* Edge-to-edge on phones: the stage IS the screen. */
    .pr-wrap {
        width: 100vw; margin-inline: calc(50% - 50vw);
        border-radius: 0;
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }
    .pr-full { top: .6rem; right: .6rem; padding: .35rem .7rem; }
}

/* ---------------------------------------------------------------------------
   PRICING — TRUST STRIP, PROVENANCE, CAROUSEL DOTS
   Every trust claim links to the page that proves it, so the strip is
   navigation rather than decoration.
   --------------------------------------------------------------------------- */
.pr-trust {
    list-style: none; margin: 2rem auto 0; padding: 1.25rem 0 0; max-width: 72rem;
    border-top: 1px solid var(--pr-line);
    display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pr-trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pr-trust { grid-template-columns: repeat(4, 1fr); } }

.pr-trust-item { display: flex; gap: .7rem; align-items: flex-start; }
.pr-trust-icon { font-size: 1.2rem; line-height: 1.3; flex: 0 0 auto; }
.pr-trust-title {
    display: block; font-size: .88rem; font-weight: 700; color: var(--pr-ink);
    text-decoration: none;
    /* A 44px row on touch without inflating the visual line height. */
    padding: .25rem 0; min-height: 24px;
}
.pr-trust-title:hover, .pr-trust-title:focus-visible { color: var(--pr-accent-2); }
.pr-trust-title:focus-visible { outline: 3px solid var(--pr-accent-2); outline-offset: 3px; border-radius: .3rem; }
.pr-trust-text { display: block; font-size: .78rem; color: var(--pr-muted); }

.pr-prov {
    max-width: 72rem; margin: 1rem auto 0; padding-top: .75rem;
    border-top: 1px dashed var(--pr-line);
    font-size: .75rem; color: var(--pr-muted); text-align: center;
}

/* ---- carousel position dots (built by JS, hidden when the rail fits) ----- */
.pr-dots { display: flex; justify-content: center; gap: .4rem; margin: -.5rem 0 1.25rem; }
.pr-dots[hidden] { display: none; }
.pr-dots span {
    width: 6px; height: 6px; border-radius: 999px; background: var(--pr-line);
    transition: background-color .2s ease, transform .2s ease;
}
.pr-dots span.is-on { background: var(--pr-accent-2); transform: scale(1.5); }
@media (prefers-reduced-motion: reduce) {
    .pr-dots span { transition: none; }
    .pr-dots span.is-on { transform: none; box-shadow: 0 0 0 2px var(--pr-accent-2); }
}

/* ---- touch sizing ------------------------------------------------------- */
@media (max-width: 767.98px) {
    .pr-trust { gap: .35rem; }
    /* Full 44px targets once the strip is a stack of tappable links. */
    .pr-trust-title { padding: .6rem 0 .2rem; min-height: 44px; display: flex; align-items: center; }
    .pr-trust-item { padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
    .pr-trust-item:last-child { border-bottom: 0; }
}

/* ---- forced / high contrast -------------------------------------------- */
@media (prefers-contrast: more) {
    .pr-card { border-color: rgba(255, 255, 255, .5); }
    .pr-no { color: #d7dbf5; }
    .pr-period, .pr-equiv, .pr-trust-text, .pr-prov { color: #d7dbf5; }
    .pr-dots span { background: rgba(255, 255, 255, .55); }
}

/* ===========================================================================
   PRICING PAGE — WHOLE-PAGE ART DIRECTION  (.cms-page--pricing)

   The stage below only skinned the compare block, which sits in the MIDDLE of
   the page — so the first screenful (lead, contents, module cards) still read
   as a plain white CMS article and the redesign looked like it had not shipped.
   This treats the entire page as one premium surface.

   Scoped to this one slug: every other CMS page keeps the normal light article
   styling. `.cms-page--pricing` comes from the per-page class in page.php.
   =========================================================================== */
.cms-page--pricing {
    --pr-accent: #7c8cff;
    --pr-accent-2: #22d3ee;
    --pr-ink: #f2f4ff;
    --pr-muted: #a3abd4;
    --pr-line: rgba(255, 255, 255, .14);
    /* Escape the 760px column: the page IS the surface.
       Exact full-bleed via margin-inline alone, with NO width — setting a width
       too produced an element wider than the viewport, and the stage's own
       breakout compounded it, pushing the last plan card past the right edge
       where `overflow-x: clip` silently ate it. Content is capped by padding
       instead, so it can never land outside the visible area. */
    max-width: none !important;
    width: auto;
    margin-inline: calc(50% - 50vw);
    padding: clamp(1.5rem, 5vw, 3.5rem) max(clamp(1rem, 4vw, 3rem), calc(50vw - 750px)) 3rem;
    border-radius: 1.75rem;
    color: var(--pr-ink);
    background:
        radial-gradient(80rem 45rem at 12% -8%, rgba(124, 140, 255, .30), transparent 60%),
        radial-gradient(65rem 40rem at 92% 4%, rgba(34, 211, 238, .18), transparent 55%),
        linear-gradient(180deg, #0c1029 0%, #090c20 100%);
    box-shadow: 0 40px 90px -50px rgba(9, 12, 32, .95);
}
/* Content keeps a readable measure even though the surface is wide. */
.cms-page--pricing > *,
.cms-page--pricing .cms-body > * { max-width: 62rem; margin-inline: auto; }
/* …except the compare stage, which is allowed to run the full width. */
.cms-page--pricing .cms-body > .pr-wrap,
.cms-page--pricing .pr-wrap { max-width: none; }

/* ---- typography on the dark surface ---- */
.cms-page--pricing h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; letter-spacing: -.03em; }
.cms-page--pricing h2 {
    margin-top: 2.75rem; font-size: clamp(1.25rem, 3.5vw, 1.6rem); font-weight: 750;
    letter-spacing: -.02em; color: var(--pr-ink);
}
.cms-page--pricing h3 { color: var(--pr-ink); }
.cms-page--pricing p, .cms-page--pricing li { color: #cbd2f0; }
.cms-page--pricing .lead { color: var(--pr-muted); font-size: 1.05rem; }
.cms-page--pricing strong { color: var(--pr-ink); }
/* Prose links only. This was `.cms-page--pricing a`, whose 0,1,1 specificity
   beat every component rule (0,1,0) — so .pr-cta, .pr-hero-btn and
   .pr-trust-title all rendered cyan, making "Choose" near-invisible on its
   own cyan gradient. Components keep their own colours. */
.cms-page--pricing a:not([class*="pr-"]) { color: var(--pr-accent-2); text-underline-offset: 3px; }
.cms-page--pricing hr { border-color: var(--pr-line); }
.cms-page--pricing .breadcrumb, .cms-page--pricing .breadcrumb a { color: var(--pr-muted); }
.cms-page--pricing .breadcrumb-item.active { color: var(--pr-ink); }
.cms-page--pricing .text-muted { color: var(--pr-muted) !important; }

/* ---- contents box ---- */
.cms-page--pricing .cms-toc {
    background: rgba(255, 255, 255, .05); border: 1px solid var(--pr-line);
    border-radius: 1rem; padding: 1rem 1.25rem; margin: 1.5rem auto 2rem;
}
.cms-page--pricing .cms-toc ul { list-style: none; margin: 0; padding: 0;
    display: grid; gap: .15rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cms-page--pricing .cms-toc ul { grid-template-columns: repeat(2, 1fr); } }
.cms-page--pricing .cms-toc a {
    display: flex; align-items: center; min-height: 44px;   /* touch target */
    padding: .25rem .25rem; font-size: .9rem; font-weight: 600; text-decoration: none;
}
.cms-page--pricing .cms-toc a::before { content: "→"; margin-right: .5rem; color: var(--pr-accent); }
.cms-page--pricing .cms-toc a:hover { color: #fff; }

/* ---- module cards (Bootstrap cards restyled to the dark surface) ---- */
.cms-page--pricing .card {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--pr-line) !important;
    border-radius: 1.25rem; backdrop-filter: blur(12px);
    box-shadow: none !important;
    transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .cms-page--pricing .card:hover { transform: translateY(-4px); border-color: var(--pr-accent) !important; }
}
.cms-page--pricing .card-body { color: #cbd2f0; }
.cms-page--pricing .card h3 { font-size: 1rem; font-weight: 700; }
.cms-page--pricing .card ul li { font-size: .82rem; }
.cms-page--pricing .card ul li::marker { color: var(--pr-accent); }

/* ---- alerts / callouts ---- */
.cms-page--pricing .alert {
    background: rgba(255, 255, 255, .06); border: 1px solid var(--pr-line); color: var(--pr-ink);
    border-radius: 1rem;
}
.cms-page--pricing .alert-secondary { color: var(--pr-muted); }

/* ---- the closing Q&A reads as a list of answers ---- */
.cms-page--pricing #questions ~ p {
    background: rgba(255, 255, 255, .04); border: 1px solid var(--pr-line);
    border-radius: .9rem; padding: .9rem 1.1rem; margin-bottom: .6rem;
}

/* ---- phones: edge-to-edge, no rounded frame ---- */
@media (max-width: 767.98px) {
    .cms-page--pricing {
        width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0;
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
        padding-top: 1.25rem;
    }
    /* The inner stage must not double up the dark frame on a dark page. */
    .cms-page--pricing .pr-wrap {
        width: auto; margin-inline: 0; padding-left: 0; padding-right: 0;
        background: none; box-shadow: none; overflow: visible;
    }
    .cms-page--pricing .pr-wrap::before { display: none; }
    .cms-page--pricing h2 { margin-top: 2rem; }
}

/* ---- accessibility ---- */
@media (prefers-contrast: more) {
    .cms-page--pricing { background: #05060f; }
    .cms-page--pricing p, .cms-page--pricing li { color: #e6eaff; }
}
@media (prefers-reduced-motion: reduce) {
    .cms-page--pricing .card { transition: none; }
    .cms-page--pricing .card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   PRICING HERO  —  .pr-hero
   The first screenful. Sized with svh (not vh) so a mobile browser's
   collapsing address bar cannot make the hero taller than the visible viewport
   and push the CTA off-screen — the classic 100vh mobile bug.
   --------------------------------------------------------------------------- */
.pr-hero {
    display: flex; flex-direction: column; justify-content: center;
    min-height: min(72svh, 34rem);
    padding: 1rem 0 2.5rem; text-align: center;
}
@supports not (height: 1svh) { .pr-hero { min-height: 30rem; } }

.pr-hero-kicker {
    margin: 0 auto .75rem; width: fit-content;
    font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--pr-muted); border: 1px solid var(--pr-line); border-radius: 999px;
    padding: .3rem .85rem; background: rgba(255, 255, 255, .05);
}
.pr-hero-title {
    margin: 0 auto .75rem; max-width: 18ch;
    font-size: clamp(2.1rem, 7.5vw, 3.6rem); font-weight: 800;
    line-height: 1.06; letter-spacing: -.035em;
    background: linear-gradient(135deg, #ffffff 30%, var(--pr-accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not (background-clip: text) {
    .pr-hero-title { color: var(--pr-ink); -webkit-text-fill-color: currentColor; }
}
.pr-hero-sub {
    margin: 0 auto 1.75rem; max-width: 46ch;
    font-size: clamp(.95rem, 2.4vw, 1.08rem); line-height: 1.6; color: var(--pr-muted) !important;
}

.pr-hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.pr-hero-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: .75rem 1.5rem; border-radius: 999px;
    font-weight: 700; font-size: .95rem; text-decoration: none;
    color: var(--pr-ink); border: 1px solid var(--pr-line);
    background: rgba(255, 255, 255, .06);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, filter .18s ease, background-color .18s ease;
}
.pr-hero-btn-primary {
    color: #0a0d24 !important; border-color: transparent;
    background: linear-gradient(135deg, var(--pr-accent), var(--pr-accent-2));
    box-shadow: 0 14px 34px -14px var(--pr-accent);
}
.pr-hero-btn:hover { filter: brightness(1.1); color: var(--pr-ink); }
.pr-hero-btn-primary:hover { color: #0a0d24 !important; }
.pr-hero-btn:active { transform: scale(.97); }
.pr-hero-btn:focus-visible { outline: 3px solid var(--pr-accent-2); outline-offset: 3px; }

.pr-hero-stats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem;
    margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--pr-line);
}
.pr-hero-stat { display: flex; flex-direction: column; gap: .1rem; }
.pr-hero-stat b {
    font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--pr-ink);
}
.pr-hero-stat span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pr-muted); }

/* Smooth in-page jump to the plans, offset for the sticky chrome. */
.cms-page--pricing { scroll-behavior: smooth; }
.cms-page--pricing [id] { scroll-margin-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
    .cms-page--pricing { scroll-behavior: auto; }
    .pr-hero-btn { transition: none; }
    .pr-hero-btn:active { transform: none; }
}

@media (max-width: 767.98px) {
    .pr-hero { min-height: min(66svh, 30rem); padding-bottom: 1.5rem; }
    .pr-hero-cta { flex-direction: column; }
    .pr-hero-btn { width: 100%; }         /* full-width buttons read as native */
    .pr-hero-stats { gap: 1.25rem; margin-top: 1.75rem; }
    .pr-hero-stat b { font-size: 1.35rem; }
}

/* ---------------------------------------------------------------------------
   PRICING — STICKY MOBILE ACTION BAR  (.pr-sticky)
   Phones only. Sits ABOVE the app's existing bottom nav (76px + home-indicator
   inset) rather than adding a second competing bar — the same offset trick the
   child-safety help button already uses. Revealed by JS once the hero CTA has
   scrolled off, so there are never two live CTAs on screen at once.
   --------------------------------------------------------------------------- */
.pr-sticky { display: none; }

@media (max-width: 767.98px) {
    .pr-sticky {
        display: flex; align-items: center; gap: .75rem;
        position: fixed; left: .6rem; right: .6rem; z-index: 1030;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px) + .5rem);
        padding: .6rem .7rem .6rem 1rem; border-radius: 999px;
        background: rgba(14, 18, 48, .92);
        border: 1px solid rgba(255, 255, 255, .16);
        backdrop-filter: saturate(160%) blur(12px);
        box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .8);
        animation: pr-sticky-in .22s cubic-bezier(.2, .7, .3, 1) both;
    }
    .pr-sticky[hidden] { display: none; }
    .pr-sticky-text {
        flex: 1 1 auto; min-width: 0; color: #f2f4ff;
        font-size: .78rem; font-weight: 600; line-height: 1.25;
        /* Long copy truncates rather than wrapping the pill into a block. */
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .pr-sticky-cta {
        flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center;
        padding: .5rem 1rem; border-radius: 999px; text-decoration: none;
        font-size: .82rem; font-weight: 800; color: #0a0d24;
        background: linear-gradient(135deg, #7c8cff, #22d3ee);
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .pr-sticky-cta:active { transform: scale(.97); color: #0a0d24; }
    .pr-sticky-cta:focus-visible { outline: 3px solid #22d3ee; outline-offset: 3px; }
}
@keyframes pr-sticky-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
    .pr-sticky { animation: none; }
    .pr-sticky-cta:active { transform: none; }
}

/* =====================================================================
   Automation Center — gap board + per-automation health strip
   Card-based views for "is the automation layer actually working".
   ===================================================================== */
.auto-gapboard { border-left: 4px solid var(--brand); }
.auto-score { flex: 0 0 auto; text-align: center; min-width: 92px; padding: .4rem .6rem; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.auto-score-n { font-size: 2rem; font-weight: 800; line-height: 1.05; }
.auto-score-l { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); font-weight: 700; }
.auto-score-success .auto-score-n { color: #15803d; }
.auto-score-warning .auto-score-n { color: #b45309; }
.auto-score-danger  .auto-score-n { color: #b91c1c; }
.auto-gap-card { transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.auto-gap-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* run-history strip: one bar per recent run, oldest → newest */
.auto-health { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.auto-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.auto-spark i { display: block; width: 4px; border-radius: 2px; background: var(--border-soft); }
.auto-spark i.as-ok { height: 14px; background: linear-gradient(180deg, #34d399, #059669); }
.auto-spark i.as-error { height: 14px; background: linear-gradient(180deg, #f87171, #dc2626); }
.auto-spark i.as-skipped { height: 6px; background: var(--border-soft); }
@media (prefers-reduced-motion: reduce) { .auto-gap-card { transition: none; } }
[data-contrast="high"] .auto-gap-card:hover { box-shadow: none; transform: none; }

/* =====================================================================
   Bottom nav — HD theme layer. Sharper type and true depth on high-DPI
   screens: a lit inner edge above the bar, a crisper icon capsule and
   hairline separators that stay 1 physical pixel at 2x/3x. Purely
   additive over the neon layer; motion/contrast gated as always.
   ===================================================================== */
.bottom-nav {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* lit top edge + deeper lift, layered over the existing glass */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10),
                0 -6px 20px rgba(16, 24, 40, .08),
                0 -18px 44px -22px rgba(var(--brand-rgb), .55);
}
.bottom-nav-item { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bottom-nav-text { letter-spacing: .01em; }
/* HD icon capsule: a soft lit pill behind the active icon instead of a flat fill */
.bottom-nav-item.active .bottom-nav-icon {
    background: radial-gradient(60% 70% at 50% 40%, rgba(var(--brand-rgb), .22), transparent 70%);
    border-radius: 999px; padding: 2px 14px;
}
/* hairline dividers that stay exactly one device pixel on retina */
@media (min-resolution: 2dppx) {
    .bn-item-wrap + .bn-item-wrap::before {
        content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
        background: linear-gradient(180deg, transparent, var(--border-soft), transparent); opacity: .5;
    }
    .bn-sub { border-width: .5px; }
}
/* HD sub-menu: crisper glass, brighter separation from the page behind it */
.bn-sub { -webkit-font-smoothing: antialiased; background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 42%); }
.bn-sub-ico { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
/* larger, comfier targets on true touch devices (48px min) */
@media (pointer: coarse) {
    .bn-sub-link { padding: .68rem .8rem; font-size: .95rem; min-height: 44px; }
    .bottom-nav-item { padding: 8px 0; }
}
/* short landscape phones: keep 5 sub-items reachable without covering the page */
@media (max-height: 480px) and (orientation: landscape) {
    .bn-sub { max-height: 78vh; min-width: 150px; }
    .bn-sub-link { padding: .4rem .6rem; font-size: .85rem; min-height: 0; }
}
[data-contrast="high"] .bottom-nav { box-shadow: none; }
[data-contrast="high"] .bottom-nav-item.active .bottom-nav-icon { background: rgba(var(--brand-rgb), .2); }
[data-contrast="high"] .bn-item-wrap + .bn-item-wrap::before { background: var(--border-soft); opacity: 1; }