:root {
    /* Backrooms accent (the iconic mono-yellow) */
    --mybackrooms-primary: #e9c83f;
    --mybackrooms-primary-rgb: 233, 200, 63;
    --mybackrooms-primary-hover: #f3d65a;
    --mybackrooms-primary-active: #c9aa28;
    --mybackrooms-accent: #f7e27a;
    --mybackrooms-accent-rgb: 247, 226, 122;

    /* Text: dark = on-accent (text drawn over yellow), ink = body text, muted = secondary */
    --mybackrooms-dark: #15130b;
    --mybackrooms-ink: #f6f2e6;
    --mybackrooms-muted: #b9b094;

    /* Semantic action colors (tuned for AA contrast on dark surfaces) */
    --mybackrooms-success: #3fb567;
    --mybackrooms-success-hover: #4fc878;
    --mybackrooms-danger: #e3564f;
    --mybackrooms-danger-hover: #ef6d66;
    --mybackrooms-info: #4db6c9;
    --mybackrooms-info-hover: #61c6d8;

    /* Dark warm "liminal" surfaces */
    --mybackrooms-bg: #13110a;
    --mybackrooms-surface: #1e1b11;
    --mybackrooms-surface-2: #292516;
    --mybackrooms-border: rgba(233, 200, 63, 0.20);
    --mybackrooms-border-strong: rgba(233, 200, 63, 0.45);

    /* Effects */
    --mybackrooms-radius: 14px;
    --mybackrooms-radius-sm: 10px;
    --mybackrooms-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
    --mybackrooms-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    --mybackrooms-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.62);
    --mybackrooms-glow: 0 0 18px rgba(var(--mybackrooms-accent-rgb), 0.45);
    --mybackrooms-transition: 0.2s ease;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    /* Dark root so any iOS WebView overscroll / rubber-band gap reads the app base colour
       (== Capacitor ios.backgroundColor) instead of the default white. */
    background-color: var(--mybackrooms-bg);
}

/* Augmente la taille de la police pour les écrans plus larges */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

::selection {
    background: rgba(var(--mybackrooms-primary-rgb), 0.35);
    color: var(--mybackrooms-dark);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--mybackrooms-primary-rgb), 0.25);
    border-color: var(--mybackrooms-primary);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-bg);
    background-image:
        radial-gradient(circle at 18% 12%, rgba(233, 200, 63, 0.10), transparent 28rem),
        radial-gradient(circle at 82% 88%, rgba(233, 200, 63, 0.06), transparent 30rem),
        linear-gradient(90deg, rgba(233, 200, 63, 0.045) 1px, transparent 1px),
        linear-gradient(rgba(233, 200, 63, 0.04) 1px, transparent 1px),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.10) 0 2px, transparent 2px 9px);
    background-size: auto, auto, 42px 42px, 42px 42px, auto;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Home page only: reveal the animated Backrooms corridor (#backgroundCanvas, z-index -1) as a dim,
   atmospheric backdrop. Drop the opaque page fill so it shows through, keep the signature gold grid
   lines as a subtle overlay, and lay a dark vignette + top/bottom scrim over the motion so the hero
   text stays crisp and the corridor reads as moody depth rather than a bright distraction. Every
   other page keeps the light static grid above (this rule only overrides the home page). */
body.page-home {
    background-color: transparent;
    background-image:
        linear-gradient(90deg, rgba(233, 200, 63, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(233, 200, 63, 0.045) 1px, transparent 1px),
        radial-gradient(135% 105% at 50% 26%, rgba(10, 11, 15, 0.46) 0%, rgba(10, 11, 15, 0.74) 56%, rgba(10, 11, 15, 0.90) 100%),
        linear-gradient(180deg, rgba(10, 11, 15, 0.62) 0%, rgba(10, 11, 15, 0.32) 22%, rgba(10, 11, 15, 0.34) 66%, rgba(10, 11, 15, 0.84) 100%);
    background-size: 42px 42px, 42px 42px, auto, auto;
    background-attachment: fixed;
}

main {
    flex: 1 0 auto;
}

/* The <main> is wrapped in a .container that is the actual flex child of
   <body>; it must grow so the footer is pinned to the bottom on short
   pages (sticky footer). */
body > .container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

/* ---------- Bootstrap color helpers ---------- */
/* Exclude .btn so link-styled buttons keep their own text color */
a:not(.btn),
.text-primary,
.link-primary {
    color: var(--mybackrooms-primary) !important;
}

a:not(.btn):hover,
.link-primary:hover {
    color: var(--mybackrooms-primary-hover) !important;
}

.bg-primary {
    background-color: var(--mybackrooms-primary) !important;
}

.border-primary {
    border-color: var(--mybackrooms-primary) !important;
}

/* Remap Bootstrap light utilities so existing markup stays consistent on the dark theme */
.bg-white,
.bg-light {
    background-color: var(--mybackrooms-surface) !important;
}

.text-dark {
    color: var(--mybackrooms-ink) !important;
}

.text-muted {
    color: var(--mybackrooms-muted) !important;
}

.border-top,
.border-bottom,
.border,
.border-start,
.border-end {
    border-color: var(--mybackrooms-border) !important;
}

.dropdown-item:active,
.dropdown-item.active {
    color: var(--mybackrooms-dark) !important;
    background-color: var(--mybackrooms-accent) !important;
}

.page-link {
    color: var(--mybackrooms-primary);
    background-color: var(--mybackrooms-surface);
    border-color: var(--mybackrooms-border);
}

.page-link:hover {
    color: var(--mybackrooms-primary-hover);
    background-color: var(--mybackrooms-surface-2);
    border-color: var(--mybackrooms-border-strong);
}

.page-item.active .page-link {
    color: var(--mybackrooms-dark);
    background-color: var(--mybackrooms-primary);
    border-color: var(--mybackrooms-primary);
}

.page-item.disabled .page-link {
    color: var(--mybackrooms-muted);
    background-color: var(--mybackrooms-surface);
    border-color: var(--mybackrooms-border);
}

/* ---------- Buttons ----------
   One consistent system for every variant:
   - same radius, weight, padding rhythm, transition
   - same elevation that lifts + intensifies on hover
   - same accent focus ring
   Solid variants on dark backgrounds use white text; the yellow
   primary uses dark text (white-on-yellow fails WCAG contrast). */
.btn {
    --mbr-btn-bg: var(--mybackrooms-surface-2);
    --mbr-btn-bg-hover: var(--mybackrooms-surface);
    --mbr-btn-border: var(--mybackrooms-border-strong);
    --mbr-btn-color: var(--mybackrooms-ink);
    border-radius: var(--mybackrooms-radius-sm);
    font-weight: 600;
    letter-spacing: 0.2px;
    padding-inline: 1.1rem;
    color: var(--mbr-btn-color);
    background-color: var(--mbr-btn-bg);
    border: 1px solid var(--mbr-btn-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition:
        transform var(--mybackrooms-transition),
        box-shadow var(--mybackrooms-transition),
        background-color var(--mybackrooms-transition),
        border-color var(--mybackrooms-transition),
        color var(--mybackrooms-transition);
}

.btn:hover {
    transform: translateY(-2px);
    color: var(--mbr-btn-color);
    background-color: var(--mbr-btn-bg-hover);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--mybackrooms-primary-rgb), 0.35);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    box-shadow: none;
    transform: none;
}

/* Solid variant tokens — only the colors change, behavior is shared */
.btn-primary {
    --mbr-btn-bg: var(--mybackrooms-primary);
    --mbr-btn-bg-hover: var(--mybackrooms-primary-hover);
    --mbr-btn-border: var(--mybackrooms-primary);
    --mbr-btn-color: var(--mybackrooms-dark);
}

.btn-secondary {
    --mbr-btn-bg: var(--mybackrooms-surface-2);
    --mbr-btn-bg-hover: #322d1b;
    --mbr-btn-border: var(--mybackrooms-border-strong);
    --mbr-btn-color: var(--mybackrooms-ink);
}

.btn-success {
    --mbr-btn-bg: var(--mybackrooms-success);
    --mbr-btn-bg-hover: var(--mybackrooms-success-hover);
    --mbr-btn-border: var(--mybackrooms-success);
    --mbr-btn-color: #0c160f;
}

.btn-danger {
    --mbr-btn-bg: var(--mybackrooms-danger);
    --mbr-btn-bg-hover: var(--mybackrooms-danger-hover);
    --mbr-btn-border: var(--mybackrooms-danger);
    --mbr-btn-color: #fff;
}

.btn-info {
    --mbr-btn-bg: var(--mybackrooms-info);
    --mbr-btn-bg-hover: var(--mybackrooms-info-hover);
    --mbr-btn-border: var(--mybackrooms-info);
    --mbr-btn-color: #07171b;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info,
.btn-warning {
    color: var(--mbr-btn-color);
    background-color: var(--mbr-btn-bg);
    border-color: var(--mbr-btn-border);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    color: var(--mbr-btn-color);
    background-color: var(--mbr-btn-bg-hover);
    border-color: var(--mbr-btn-bg-hover);
}

/* Warning maps onto the same accent identity as primary for consistency */
.btn-warning {
    --mbr-btn-bg: var(--mybackrooms-primary);
    --mbr-btn-bg-hover: var(--mybackrooms-primary-hover);
    --mbr-btn-border: var(--mybackrooms-primary);
    --mbr-btn-color: var(--mybackrooms-dark);
}

/* Outline variants — shared transparent-to-fill behavior */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-info {
    background-color: transparent;
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--mybackrooms-primary) !important;
    border-color: var(--mybackrooms-border-strong) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--mybackrooms-primary) !important;
    border-color: var(--mybackrooms-primary) !important;
    color: var(--mybackrooms-dark) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.btn-outline-secondary {
    color: var(--mybackrooms-ink) !important;
    border-color: var(--mybackrooms-border-strong) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--mybackrooms-surface-2) !important;
    border-color: var(--mybackrooms-border-strong) !important;
    color: var(--mybackrooms-ink) !important;
}

.btn-link {
    color: var(--mybackrooms-primary);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn-link:hover {
    color: var(--mybackrooms-primary-hover);
    background-color: transparent;
    box-shadow: none;
}

/* ---------- Cards ---------- */
.card {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface);
    border: 1px solid var(--mybackrooms-border);
    border-radius: var(--mybackrooms-radius);
    box-shadow: var(--mybackrooms-shadow-sm);
    overflow: hidden;
    transition:
        box-shadow var(--mybackrooms-transition),
        transform var(--mybackrooms-transition),
        border-color var(--mybackrooms-transition);
}

.card:hover {
    border-color: var(--mybackrooms-border-strong);
    box-shadow: var(--mybackrooms-shadow);
}

.card-header {
    background:
        linear-gradient(180deg, rgba(233, 200, 63, 0.12), rgba(233, 200, 63, 0.04)),
        repeating-linear-gradient(90deg, rgba(233, 200, 63, 0.08) 0 1px, transparent 1px 18px);
    border-bottom: 1px solid var(--mybackrooms-border);
    color: var(--mybackrooms-ink);
    font-weight: 700;
}

.card-footer {
    background-color: var(--mybackrooms-surface-2);
    border-top: 1px solid var(--mybackrooms-border);
    color: var(--mybackrooms-ink);
}

/* ---------- List groups ---------- */
.list-group-item {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface);
    border-color: var(--mybackrooms-border);
}

.list-group-flush > .list-group-item {
    background-color: transparent;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface-2);
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface);
    border: 1px solid var(--mybackrooms-border);
    border-radius: var(--mybackrooms-radius-sm);
    box-shadow: var(--mybackrooms-shadow);
}

.dropdown-item {
    color: var(--mybackrooms-ink);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface-2);
}

.dropdown-divider {
    border-top-color: var(--mybackrooms-border);
}

/* ---------- Navbar ---------- */
.navbar {
    backdrop-filter: saturate(160%) blur(12px);
    background-color: rgba(19, 17, 10, 0.82) !important;
    border-bottom: 1px solid var(--mybackrooms-border) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    /* iOS edge-to-edge (viewport-fit=cover + Capacitor contentInset:'never'): the bar is
       sticky-top:0, so its translucent dark background already reaches the very top — push its
       content below the Dynamic Island, and clear the rounded corners in landscape. env() is 0
       on desktop / non-notched, so this keeps the Bootstrap 0.5rem top padding unchanged there. */
    padding-top: calc(0.5rem + env(safe-area-inset-top));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.navbar-brand {
    color: var(--mybackrooms-ink) !important;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.navbar .nav-link {
    color: var(--mybackrooms-ink) !important;
    font-weight: 600;
    border-radius: var(--mybackrooms-radius-sm);
    padding-inline: 0.75rem !important;
    white-space: nowrap;
    transition:
        color var(--mybackrooms-transition),
        background-color var(--mybackrooms-transition),
        box-shadow var(--mybackrooms-transition);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--mybackrooms-primary) !important;
    background-color: rgba(var(--mybackrooms-primary-rgb), 0.14);
    box-shadow: inset 0 0 0 1px rgba(var(--mybackrooms-primary-rgb), 0.30);
}

.navbar .nav-link.active {
    color: var(--mybackrooms-primary) !important;
}

.navbar-toggler {
    border-color: var(--mybackrooms-border);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--mybackrooms-primary-rgb), 0.25);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f6f2e6' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface-2);
    border-radius: var(--mybackrooms-radius-sm);
    border-color: var(--mybackrooms-border);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(41, 37, 22, 0.6);
    color: var(--mybackrooms-muted);
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--mybackrooms-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface);
    border-color: var(--mybackrooms-primary);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6f2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface);
}

.form-label,
.col-form-label,
.form-check-label,
.form-text {
    color: var(--mybackrooms-ink);
}

.form-text {
    color: var(--mybackrooms-muted);
}

.form-check-input {
    background-color: var(--mybackrooms-surface-2);
    border-color: var(--mybackrooms-border-strong);
}

.form-check-input:checked {
    background-color: var(--mybackrooms-primary);
    border-color: var(--mybackrooms-primary);
}

.form-floating > label {
    color: var(--mybackrooms-muted);
}

.input-group-text {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface);
    border-color: var(--mybackrooms-border);
}

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mybackrooms-ink);
    --bs-table-striped-color: var(--mybackrooms-ink);
    --bs-table-striped-bg: rgba(233, 200, 63, 0.06);
    --bs-table-hover-color: var(--mybackrooms-ink);
    --bs-table-hover-bg: rgba(233, 200, 63, 0.10);
    color: var(--mybackrooms-ink);
    border-color: var(--mybackrooms-border);
}

.table thead th {
    color: var(--mybackrooms-primary);
    background-color: var(--mybackrooms-surface-2);
    border-bottom-color: var(--mybackrooms-border-strong);
}

.table td,
.table th {
    border-color: var(--mybackrooms-border);
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 0.5em 0.75em;
    border-radius: 999px;
}

.badge.bg-primary {
    color: var(--mybackrooms-dark) !important;
}

.badge.bg-secondary {
    color: var(--mybackrooms-ink) !important;
    background-color: var(--mybackrooms-surface-2) !important;
}

/* ---------- Alerts ---------- */
.alert {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface);
    border-color: var(--mybackrooms-border);
}

.alert-primary {
    color: var(--mybackrooms-ink);
    background-color: rgba(233, 200, 63, 0.12);
    border-color: var(--mybackrooms-border-strong);
}

.alert-success {
    color: #bdeccb;
    background-color: rgba(63, 181, 103, 0.14);
    border-color: rgba(63, 181, 103, 0.40);
}

.alert-danger {
    color: #f4c4c1;
    background-color: rgba(227, 86, 79, 0.14);
    border-color: rgba(227, 86, 79, 0.40);
}

.alert-warning {
    color: var(--mybackrooms-ink);
    background-color: rgba(233, 200, 63, 0.12);
    border-color: var(--mybackrooms-border-strong);
}

.alert-info {
    color: #bfe6ee;
    background-color: rgba(77, 182, 201, 0.14);
    border-color: rgba(77, 182, 201, 0.40);
}

.alert .alert-link {
    color: var(--mybackrooms-primary);
}

/* ---------- Validation & semantic text on dark ---------- */
.text-danger,
.field-validation-error,
.validation-summary-errors {
    color: #f08e88 !important;
}

.text-success,
.field-validation-valid {
    color: #6fd698 !important;
}

.text-warning {
    color: var(--mybackrooms-primary) !important;
}

.text-info {
    color: #7fd0de !important;
}

/* ---------- Modals ---------- */
.modal-content {
    color: var(--mybackrooms-ink);
    background-color: var(--mybackrooms-surface);
    border: 1px solid var(--mybackrooms-border);
    border-radius: var(--mybackrooms-radius);
    box-shadow: var(--mybackrooms-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--mybackrooms-border);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(1.4);
}

/* ---------- Footer ---------- */
footer.footer {
    color: #fff;
    background: none;
    border: none;
    border-top: none !important;
}

footer.footer a,
footer.footer a:active,
footer.footer a:visited {
    color: var(--mybackrooms-ink) !important;
    text-decoration: none;
    transition: color var(--mybackrooms-transition);
}

footer.footer a:hover,
footer.footer a:focus {
    color: var(--mybackrooms-primary) !important;
    text-decoration: none;
}

/* ---------- Backrooms utility classes ---------- */
.backrooms-surface {
    background-color: var(--mybackrooms-surface);
    border: 1px solid var(--mybackrooms-border);
    border-radius: var(--mybackrooms-radius);
    box-shadow: var(--mybackrooms-shadow-sm);
}

.backrooms-glow {
    box-shadow: var(--mybackrooms-glow);
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover {
        transform: none;
    }
}

/* ========== Backrooms Preview Cards ========== */

.floor-preview-svg {
    /* Fill the box; preserveAspectRatio="xMidYMid meet" keeps the whole
       drawing visible and centered, regardless of floor proportions. */
    display: block;
    width: 100%;
    height: 100%;
}

/* Horizontal layout for Search results */
.floor-preview-horizontal {
    flex-wrap: nowrap;
    align-items: stretch;
}

.floor-preview-horizontal-image {
    /* Fixed-size preview column. position:relative + absolute SVG so the
       drawing can never push the card taller (portrait floors like 2x3). */
    position: relative;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    min-height: 200px;
    align-self: stretch;
    background:
        radial-gradient(circle at 1px 1px, rgba(var(--mybackrooms-primary-rgb), 0.10) 1px, transparent 0) 0 0 / 18px 18px,
        var(--mybackrooms-bg);
    border-right: 1px solid var(--mybackrooms-border);
    overflow: hidden;
}

.floor-preview-horizontal-image .floor-preview-svg {
    /* Take the SVG out of flow and fill the column; preserveAspectRatio
       keeps the whole drawing visible and centered without cutting. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
}

/* Backrooms card: cover image + clamped description (search + My Backrooms). */
.bp-cover {
    background-size: cover;
    background-position: center;
}

    .bp-cover .bp-levels {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        color: #fff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    }

.bp-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--mybackrooms-muted);
}

.bp-more {
    background: none;
    border: none;
    color: var(--mybackrooms-primary);
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
}

/* Consistent round icon action buttons (search + My Backrooms cards). */
.circular-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    padding: 0;
    flex: 0 0 auto;
}

    .circular-button i {
        font-size: 1.35rem;
    }

/* Normalize card behavior for consistent button placement */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-body {
    flex: 1 1 auto;
}

.card-footer {
    flex: 0 0 auto;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    /* !important so this beats Bootstrap's .flex-row (which is itself !important);
       otherwise the card stays horizontal on phones, the fixed-width image squeezes
       the body, and the action buttons get squashed/hidden. */
    .floor-preview-horizontal {
        flex-direction: column !important;
    }

    .floor-preview-horizontal-image {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 160px;
        min-height: 160px;
        border-right: none;
        border-bottom: 1px solid var(--mybackrooms-border);
    }

    .floor-preview-container {
        height: 220px;
    }

    /* Smaller round actions so all of them fit comfortably on a phone row. */
    .floor-preview-horizontal .circular-button {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }

        .floor-preview-horizontal .circular-button i {
            font-size: 1.1rem;
        }
}

/* ============================================================
   DESIGN SYSTEM  ·  Liminal builder
   Typography, layout primitives, hero, glass panels, feature
   tiles, auth cards, prose and entrance motion. Presentational
   only — reuses the global --mybackrooms-* tokens above.
   ============================================================ */

:root {
    --mbr-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mbr-font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mbr-maxw: 1140px;
}

body {
    font-family: var(--mbr-font-body);
    letter-spacing: 0.1px;
}

/* Soft readability scrim painted over the animated corridor but
   behind all page content (same layer as #backgroundCanvas, drawn
   after it). Keeps the loved animation visible while lifting text
   contrast at the top/bottom edges. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% 0%, transparent 38%, rgba(10, 9, 5, 0.55) 100%),
        linear-gradient(180deg, rgba(10, 9, 5, 0.42) 0%, rgba(10, 9, 5, 0.10) 22%, rgba(10, 9, 5, 0.12) 70%, rgba(10, 9, 5, 0.66) 100%);
}

/* ---------- Headings & display type ---------- */
h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: var(--mbr-font-display);
    color: var(--mybackrooms-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 {
    font-weight: 700;
    line-height: 1.1;
}

/* Page-level h1 used as a section title gets breathing room + accent rule */
main > h1:first-child,
.page-title {
    font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
    margin: 0.6rem 0 1rem;
}

/* ---------- Eyebrow / kicker label ---------- */
.mbr-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mbr-font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mybackrooms-primary);
}

.mbr-kicker::before {
    content: "";
    width: 1.6rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--mybackrooms-primary), transparent);
}

/* ---------- Reusable page header ---------- */
.page-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1.5rem 0 1.75rem;
}

.page-header .ph-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    color: var(--mybackrooms-dark);
    background: linear-gradient(145deg, var(--mybackrooms-accent), var(--mybackrooms-primary));
    box-shadow: var(--mybackrooms-glow);
    font-size: 1.6rem;
}

.page-header .ph-text {
    min-width: 0;
}

.page-header h1 {
    margin: 0;
    font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
    line-height: 1.1;
}

.page-header .ph-sub {
    margin: 0.35rem 0 0;
    color: var(--mybackrooms-muted);
    font-size: 1.02rem;
    max-width: 60ch;
}

.page-header.has-rule {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--mybackrooms-border);
}

/* ---------- Glass panel (content over the animated scene) ---------- */
.glass {
    position: relative;
    background: linear-gradient(180deg, rgba(30, 27, 17, 0.82), rgba(19, 17, 10, 0.86));
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border: 1px solid var(--mybackrooms-border);
    border-radius: var(--mybackrooms-radius);
    box-shadow: var(--mybackrooms-shadow);
}

.glass-pad {
    padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
}

/* Thin accent line on top edge of a feature surface */
.accent-top {
    position: relative;
}

.accent-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.25rem;
    right: 1.25rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--mybackrooms-primary), transparent);
    opacity: 0.7;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 190px);
    padding: 2rem 0 3rem;
}

.hero-logo {
    width: 92px;
    height: 92px;
    margin-bottom: 1.1rem;
    /* Dark halo first so the logo stays legible over the bright corridor
       vanishing point, then the warm accent glow. */
    filter:
        drop-shadow(0 2px 7px rgba(0, 0, 0, 0.75))
        drop-shadow(0 10px 28px rgba(var(--mybackrooms-primary-rgb), 0.40));
    animation: mbr-float 6s ease-in-out infinite;
}

.hero-title {
    font-family: var(--mbr-font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--mybackrooms-ink);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}

.hero-title .accent {
    background: linear-gradient(180deg, var(--mybackrooms-accent), var(--mybackrooms-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-tagline {
    margin: 1.1rem auto 0;
    max-width: 46ch;
    font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.3rem);
    color: var(--mybackrooms-ink);
    opacity: 0.92;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 2rem;
}

.hero-actions .btn {
    min-width: 168px;
}

/* Big call-to-action button rhythm */
.btn-cta {
    padding: 0.7rem 1.6rem;
    font-size: 1.05rem;
    border-radius: 12px;
}

.btn-primary.btn-cta {
    box-shadow: 0 10px 30px rgba(var(--mybackrooms-primary-rgb), 0.30), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.btn-primary.btn-cta:hover {
    box-shadow: 0 16px 40px rgba(var(--mybackrooms-primary-rgb), 0.42), 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* On phones, let the hero flow naturally instead of forcing a full-screen
   centered block (which leaves a large gap above the feature tiles) and
   ease the title down a notch so it never crowds the screen edges. */
@media (max-width: 575.98px) {
    .hero {
        min-height: auto;
        padding: 1.25rem 0 2rem;
    }

    .hero-title {
        font-size: clamp(2.05rem, 1.4rem + 4vw, 3rem);
    }

    .hero-actions {
        margin-top: 1.5rem;
    }

    .hero-actions .btn {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* ---------- Feature tiles ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 920px;
    margin: 2.75rem auto 0;
}

/* Four-card grid (e.g. the home features): a narrower cap so it lays out 2×2
   instead of orphaning the 4th card on a second row. Still collapses to a
   single column on narrow phones via auto-fit. */
.feature-grid--quad {
    max-width: 640px;
}

.feature-card {
    text-align: left;
    padding: 1.4rem 1.4rem 1.5rem;
    border-radius: var(--mybackrooms-radius);
    background: linear-gradient(180deg, rgba(33, 30, 19, 0.95), rgba(22, 20, 12, 0.97));
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border: 1px solid var(--mybackrooms-border-strong);
    box-shadow: var(--mybackrooms-shadow);
    transition:
        transform var(--mybackrooms-transition),
        border-color var(--mybackrooms-transition),
        box-shadow var(--mybackrooms-transition);
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--mybackrooms-border-strong);
    box-shadow: var(--mybackrooms-shadow);
}

.feature-card .fc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 0.9rem;
    border-radius: 12px;
    font-size: 1.35rem;
    color: var(--mybackrooms-primary);
    background: rgba(var(--mybackrooms-primary-rgb), 0.12);
    border: 1px solid rgba(var(--mybackrooms-primary-rgb), 0.22);
}

.feature-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.12rem;
    font-weight: 700;
}

.feature-card p {
    margin: 0;
    color: var(--mybackrooms-muted);
    font-size: 0.94rem;
    line-height: 1.5;
}

/* ---------- Collaborations directory (OrgPages/Index) ----------
   Each card is a link tinted with its organization's brand colour
   (--collab-accent, set inline from the page's validated primaryHex). */
.collab-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    color: var(--mybackrooms-ink);
    background: linear-gradient(180deg, rgba(33, 30, 19, 0.95), rgba(22, 20, 12, 0.97));
    border: 1px solid var(--mybackrooms-border);
    border-top: 3px solid var(--collab-accent, var(--mybackrooms-primary));
    border-radius: var(--mybackrooms-radius);
    box-shadow: var(--mybackrooms-shadow-sm);
    transition:
        transform var(--mybackrooms-transition),
        border-color var(--mybackrooms-transition),
        box-shadow var(--mybackrooms-transition);
}

.collab-card:hover,
.collab-card:focus-visible {
    transform: translateY(-4px);
    color: var(--mybackrooms-ink);
    border-color: var(--mybackrooms-border-strong);
    border-top-color: var(--collab-accent, var(--mybackrooms-primary));
    box-shadow: var(--mybackrooms-shadow);
}

.collab-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--mybackrooms-border);
}

.collab-logo--chip {
    background: #fff;
}

.collab-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.collab-logo i {
    font-size: 3rem;
    color: var(--collab-accent, var(--mybackrooms-primary));
}

.collab-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.1rem 1.25rem 1.25rem;
}

.collab-name {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
}

.collab-x {
    color: var(--collab-accent, var(--mybackrooms-primary));
    font-weight: 700;
}

.collab-desc {
    margin: 0 0 0.9rem;
    color: var(--mybackrooms-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.collab-cta {
    margin-top: auto;
    color: var(--collab-accent, var(--mybackrooms-primary));
    font-weight: 600;
    font-size: 0.92rem;
}

.collab-cta i {
    display: inline-block;
    transition: transform var(--mybackrooms-transition);
}

.collab-card:hover .collab-cta i {
    transform: translateX(3px);
}

/* ---------- Auth card ---------- */
.auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 2rem 0;
}

.auth-card {
    width: 100%;
    max-width: 430px;
    padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
    border-radius: var(--mybackrooms-radius);
}

.auth-card .auth-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-card .auth-logo {
    width: 58px;
    height: 58px;
    margin-bottom: 0.85rem;
    filter: drop-shadow(0 4px 18px rgba(var(--mybackrooms-primary-rgb), 0.4));
}

.auth-card h1 {
    font-size: 1.5rem;
    margin: 0;
}

.auth-card .auth-sub {
    margin: 0.4rem 0 0;
    color: var(--mybackrooms-muted);
    font-size: 0.95rem;
}

.auth-card .auth-links {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--mybackrooms-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.92rem;
}

.auth-card .auth-links a {
    text-decoration: none;
}

.auth-card .auth-links a:hover {
    text-decoration: underline;
}

/* Inside the native app, the web "continue with Google/Apple" buttons are a dead end (their
   OAuth cookie would land in the system browser, not the WebView), so hide them until the
   Phase 4 native auth bridge. Email/password sign-in stays. The capacitor-native class is set
   by platform/native.js. !important: the login/register forms carry Bootstrap's d-grid utility
   (display: grid !important), which otherwise wins and keeps the dead-end buttons visible. */
html.capacitor-native .auth-or,
html.capacitor-native #external-login,
html.capacitor-native #external-register {
    display: none !important;
}

/* The native sign-in buttons are the reverse: hidden on the web, shown only in the app. They
   call mybNativeSignIn() (platform/native.js) → /api/auth/external. Apple sign-in is iOS-only,
   so its button is hidden on Android (cap-ios is set by native.js per platform). */
.native-auth {
    display: none;
}

/* iOS-only for now: Apple sign-in doesn't exist on Android, and with Google gated off
   (below) Android in-app would show an empty "or continue with" divider — so the whole
   block stays web-hidden everywhere except iOS in-app. Widen to `html.capacitor-native`
   when a Google/Android provider is wired. */
html.capacitor-native.cap-ios .native-auth {
    display: block;
}

/* Google native sign-in is hidden in-app until its OAuth client ids exist (GoogleAuth
   serverClientId is empty — the button would dead-end with "Sign-in failed", an App Review
   2.1 completeness rejection). Apple-only in-app sign-in satisfies Guideline 4.8. Remove this
   rule when the Google ids are wired (TODO.md "Set the Google OAuth IDs"). */
html.capacitor-native .native-auth-google {
    display: none !important;
}

/* Store rule (Apple 3.1.1 / Play Billing): web Stripe checkout must be unreachable inside the
   app — digital goods there go through native IAP. The wallet page's inline script also hides
   these; this CSS rule is the belt-and-braces so a JS failure can't expose them. */
html.capacitor-native .wallet-buy-web {
    display: none !important;
}

/* ---------- Prose (legal / text pages) ---------- */
.prose {
    max-width: 75ch;
    color: var(--mybackrooms-ink);
    font-size: 1.02rem;
    line-height: 1.75;
}

.prose h2 {
    margin: 2rem 0 0.6rem;
    font-size: 1.3rem;
    color: var(--mybackrooms-ink);
}

.prose h2:first-of-type {
    margin-top: 0.5rem;
}

.prose p {
    margin: 0 0 1rem;
    color: #ded8c6;
}

.prose ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.prose li {
    margin-bottom: 0.4rem;
    color: #ded8c6;
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Toolbar / actions row ---------- */
.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0;
}

/* ---------- Empty state ---------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: clamp(2rem, 1.5rem + 3vw, 4rem) 1.5rem;
    border-radius: var(--mybackrooms-radius);
    border: 1px dashed var(--mybackrooms-border-strong);
    background: linear-gradient(180deg, rgba(30, 27, 17, 0.55), rgba(19, 17, 10, 0.6));
}

.empty-state .es-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    font-size: 2.2rem;
    color: var(--mybackrooms-primary);
    background: rgba(var(--mybackrooms-primary-rgb), 0.10);
    border: 1px solid rgba(var(--mybackrooms-primary-rgb), 0.22);
}

.empty-state h2 {
    margin: 0;
    font-size: 1.35rem;
}

.empty-state p {
    margin: 0;
    max-width: 44ch;
    color: var(--mybackrooms-muted);
}

/* ---------- Count pill ---------- */
.count-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mybackrooms-muted);
    background: var(--mybackrooms-surface);
    border: 1px solid var(--mybackrooms-border);
}

.count-pill strong {
    color: var(--mybackrooms-primary);
}

/* ---------- Search bar ---------- */
.search-hero .input-group {
    box-shadow: var(--mybackrooms-shadow-sm);
    border-radius: 12px;
}

.search-hero .form-control {
    border-right: none;
    padding-block: 0.7rem;
    font-size: 1.05rem;
}

.search-hero .input-group > .form-control {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.search-hero .input-group > .btn {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* ---------- Brand wordmark in navbar ---------- */
.navbar-brand.mbr-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    word-break: normal;
}

.mbr-brand .brand-word {
    font-family: var(--mbr-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--mybackrooms-ink);
}

.mbr-brand .brand-word b {
    color: var(--mybackrooms-primary);
    font-weight: 700;
}

@media (max-width: 360px) {
    .mbr-brand .brand-word {
        display: none;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    margin-top: 3rem;
    /* iOS edge-to-edge: grow the footer's bottom padding into the home-indicator band so the
       dark gradient fills it while the links sit above the indicator (and clear the rounded
       corners in landscape). env() is 0 on desktop, so this stays `1.4rem 0` there. */
    padding: 1.4rem env(safe-area-inset-right) calc(1.4rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    border-top: 1px solid var(--mybackrooms-border);
    background: linear-gradient(180deg, transparent, rgba(10, 9, 5, 0.5));
}

.site-footer .foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.25rem;
}

.site-footer .foot-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mbr-font-display);
    font-weight: 600;
    color: var(--mybackrooms-ink);
}

.site-footer .foot-brand img {
    width: 22px;
    height: 22px;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    font-size: 0.92rem;
}

.site-footer a {
    color: var(--mybackrooms-muted) !important;
    text-decoration: none;
    transition: color var(--mybackrooms-transition);
}

.site-footer a:hover {
    color: var(--mybackrooms-primary) !important;
}

/* ---------- Accordion (dark themed) ---------- */
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--mybackrooms-ink);
    --bs-accordion-border-color: var(--mybackrooms-border);
    --bs-accordion-border-radius: var(--mybackrooms-radius);
    --bs-accordion-inner-border-radius: var(--mybackrooms-radius);
    --bs-accordion-btn-color: var(--mybackrooms-ink);
    --bs-accordion-btn-bg: var(--mybackrooms-surface);
    --bs-accordion-active-color: var(--mybackrooms-primary);
    --bs-accordion-active-bg: var(--mybackrooms-surface-2);
    --bs-accordion-btn-focus-border-color: var(--mybackrooms-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--mybackrooms-primary-rgb), 0.25);
    --bs-accordion-body-color: #ded8c6;
    display: grid;
    gap: 0.6rem;
}

.accordion-item {
    background: var(--mybackrooms-surface);
    border: 1px solid var(--mybackrooms-border);
    border-radius: var(--mybackrooms-radius) !important;
    overflow: hidden;
    box-shadow: var(--mybackrooms-shadow-sm);
}

.accordion-button {
    font-family: var(--mbr-font-display);
    font-weight: 600;
    border-radius: 0 !important;
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion-button::after {
    /* Recolor the default chevron to the accent yellow */
    filter: invert(78%) sepia(38%) saturate(700%) hue-rotate(2deg) brightness(95%);
}

.accordion-body {
    color: #ded8c6;
    line-height: 1.65;
}

/* ---------- Entrance motion ---------- */
@keyframes mbr-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Gentle page-wide fade applied to <main> on every navigation */
.page-enter {
    animation: mbr-fade 0.45s ease both;
}

@keyframes mbr-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mbr-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.reveal {
    animation: mbr-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.14s; }
.reveal-3 { animation-delay: 0.23s; }
.reveal-4 { animation-delay: 0.32s; }
.reveal-5 { animation-delay: 0.41s; }

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .page-enter,
    .hero-logo {
        animation: none !important;
    }
}

/* ============================================================
   Organization co-branding pages (/{slug}, e.g. /sofias)
   Admin-authored pages with their own palette. The token VALUES are emitted
   per page as an inline style on body.page-org (derived by OrgPalette from
   the admin's colours); every rule here reads them through var(), so one
   hue restyles glass, buttons, borders, links and the background grid.
   Layout: Views/Shared/_OrgLayout.cshtml.
   ============================================================ */
body.page-org {
    background-color: var(--mybackrooms-bg);
    background-image:
        radial-gradient(circle at 18% 12%, rgba(var(--mybackrooms-primary-rgb), 0.14), transparent 28rem),
        radial-gradient(circle at 82% 88%, rgba(var(--mybackrooms-accent-rgb), 0.08), transparent 30rem),
        linear-gradient(90deg, rgba(var(--mybackrooms-accent-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(rgba(var(--mybackrooms-accent-rgb), 0.045) 1px, transparent 1px),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.10) 0 2px, transparent 2px 9px);
    background-size: auto, auto, 42px 42px, 42px 42px, auto;
    background-attachment: fixed;
}

/* Glass in the page's own surface hue (the default glass gradient is warm/amber) */
body.page-org .glass {
    background: linear-gradient(180deg, rgba(var(--mybackrooms-surface-rgb), 0.82), rgba(var(--mybackrooms-bg-rgb), 0.86));
}

/* Solid-primary button text: white on dark primaries, dark on light ones (server-derived) */
body.page-org .btn-primary {
    --mbr-btn-color: var(--org-btn-primary-color, #fff);
}

/* Badges (keyword tags) — readable and on-palette regardless of hue */
body.page-org .badge.bg-secondary {
    background-color: var(--mybackrooms-surface-2) !important;
    border: 1px solid var(--mybackrooms-border);
}

/* ---- Co-brand navbar + footer: the two logos joined by an × ---- */
.org-navbar {
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    background-color: rgba(var(--mybackrooms-bg-rgb, 10, 15, 30), 0.85) !important;
    border-bottom: 1px solid var(--mybackrooms-border) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    padding-top: calc(0.55rem + env(safe-area-inset-top));
    padding-bottom: 0.55rem;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.cobrand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.cobrand-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: transform var(--mybackrooms-transition), filter var(--mybackrooms-transition);
}

.cobrand-logo:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* MyBackrooms logo already carries its own cream background — round it into a tidy tile. */
.cobrand-mbr img {
    height: 46px;
    width: 46px;
    border-radius: 10px;
    display: block;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.org-navbar .cobrand-org img {
    height: 48px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: block;
}

/* Opt-in white chip for org logos drawn dark-on-light (they'd vanish on the dark bar) */
.cobrand-chip {
    background: #fff;
    border-radius: 10px;
    padding: 7px 13px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.cobrand-x {
    font-family: var(--mbr-font-display, "Space Grotesk", sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mybackrooms-accent);
    opacity: 0.9;
    user-select: none;
}

/* Footer variant: same lockup, smaller */
.org-footer .cobrand-sm {
    gap: 0.6rem;
}

.org-footer .cobrand-mbr img {
    height: 30px;
    width: 30px;
    border-radius: 7px;
    box-shadow: none;
}

.org-footer .cobrand-org img {
    height: 24px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

.org-footer .cobrand-chip {
    padding: 4px 9px;
    box-shadow: none;
}

.org-footer .cobrand-x {
    font-size: 1.1rem;
}

@media (max-width: 480px) {
    .cobrand {
        gap: 0.6rem;
    }

    .org-navbar .cobrand-org img {
        height: 34px;
        max-width: 170px;
    }

    .cobrand-mbr img {
        height: 40px;
        width: 40px;
    }
}

/* "Your record fell" banner (leaderboard beat-notification, _RecordNotices.cshtml) */
.record-fell-banner{position:relative;z-index:5;display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;padding:9px 44px 9px 16px;background:linear-gradient(90deg,rgba(60,20,20,.92),rgba(40,14,30,.92));border-bottom:1px solid #e3564f;color:#ffe3e0;font-size:.95rem}
.record-fell-banner .rf-cta{background:#e9c83f;color:#1a160b;border-radius:999px;padding:4px 14px;font-weight:700;text-decoration:none;white-space:nowrap}
.record-fell-banner .rf-cta:hover{filter:brightness(1.08)}
.record-fell-banner .rf-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#ffb3ad;font-size:1rem;cursor:pointer;padding:4px 8px}

/* Achievement badges (profile page; .ach-* — Bootstrap already owns .badge) */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ach-card{border:1px solid var(--mybackrooms-border);border-radius:var(--mybackrooms-radius-sm);padding:12px 10px;text-align:center;background:rgba(var(--mybackrooms-primary-rgb),.06)}
.ach-card .ach-icon{font-size:1.9rem;line-height:1.2;display:block;margin-bottom:6px}
.ach-card .ach-name{font-weight:700;font-size:.92rem;color:var(--mybackrooms-ink)}
.ach-card .ach-desc{color:var(--mybackrooms-muted);font-size:.8rem;margin-top:2px}
.ach-locked{opacity:.35;filter:grayscale(1)}

/* Creator analytics table (/Profile/Stats) */
.stat-time{font-variant-numeric:tabular-nums;font-family:Consolas,ui-monospace,monospace;color:var(--mybackrooms-primary)}
.ach-card .ach-date{color:var(--mybackrooms-muted);font-size:.72rem;margin-top:4px;letter-spacing:.03em;text-transform:uppercase}
.stat-diamond{color:#4ac6e0}