/**
 * Curio brand layer v2, "Premium dark glow" (2026-10-29). Loads AFTER curio.css (legacy, frozen).
 * Tokens only (curio-tokens.css). Guard: scripts/css-guard.sh.
 * Order: 1 base, 2 motion, 3 layout + type utilities, 4 glow (orbs, frames, screens),
 * 5 buttons, 6 forms, 7 components, 8 page primitives, 9 header, 10 resume strip,
 * 11 footer, 12 consent, 13 reduced-motion off-switch.
 *
 * Rules for surfaces:
 * - backdrop-filter lives only in .cr-card / .cr-consent / .cr-toast here. Never put a fixed
 *   element inside a .cr-card (use .cr-card--solid there): blur makes the card its containing block.
 * - .cr-reveal is for static marketing markup only. Never inside a Livewire component.
 * - Animations: use the cr-* keyframes below (transform/opacity only). Surfaces may not add @keyframes.
 */

/* ---------- 1. Base ---------- */
html { background: var(--c-bg); }

body {
    font: 400 var(--fs-3)/var(--lh-body) var(--font-body);
    background: var(--c-bg);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* clip, not hidden: hidden makes body a scroll container and breaks position: sticky. */
    overflow-x: clip;
    overflow-y: visible;
}

/* Canvas: soft top glow + grain, fixed, never interactive. */
.site-ambient {
    inset: 0;
    height: auto;
    background-image: var(--g-noise), var(--ambient);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 160px 160px, 100% 100%, 100% 100%;
}
.site-ambient::before,
.site-ambient::after { display: none; }

h1, h2, h3, h4 { color: var(--c-text); text-wrap: balance; }
h1 { font: 700 var(--fs-6)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); }
h2 { font: 700 var(--fs-5)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); }
h3 { font: 600 var(--fs-4)/1.3 var(--font-display); letter-spacing: -.015em; }
h4 { font: 600 var(--fs-3)/1.45 var(--font-body); }
p { text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 3px;
}

::selection { background: var(--c-accent-tint); color: var(--c-text); }

/* body > prefix beats legacy body > :not(.site-ambient) { position: relative } */
body > .cr-skip {
    position: absolute;
    left: var(--sp-4);
    top: -100px;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-5);
    border-radius: var(--r-pill);
    background: var(--c-text);
    color: var(--c-bg);
    font: 600 var(--fs-2)/1.2 var(--font-body);
    text-decoration: none;
}
body > .cr-skip:focus { top: var(--sp-3); }

#main:focus { outline: none; }

body > .cr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.cr-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cr-icon--16 { width: 16px; height: 16px; }
.cr-icon--24 { width: 24px; height: 24px; }
.cr-icon--32 { width: 32px; height: 32px; }
.cr-icon--grad { stroke: url(#cr-grad); }

.cr-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- 2. Motion ---------- */
@keyframes cr-spin { to { transform: rotate(360deg); } }
@keyframes cr-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(6%, 4%, 0) scale(1.08); }
    100% { transform: translate3d(-4%, 8%, 0) scale(.96); }
}
@keyframes cr-drift-alt {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-7%, -3%, 0) scale(1.06); }
    100% { transform: translate3d(5%, -6%, 0) scale(1.1); }
}
@keyframes cr-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes cr-fade-up {
    from { opacity: 0; transform: translateY(var(--reveal-shift)); }
    to { opacity: 1; transform: none; }
}
@keyframes cr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cr-pop {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to { opacity: 1; transform: none; }
}
/* One step of a CSS-only loop (demo cards): visible from 8% to 84% of --dur-loop. Stagger with animation-delay. */
@keyframes cr-seq {
    0% { opacity: 0; transform: translateY(10px) scale(.98); }
    8%, 84% { opacity: 1; transform: none; }
    92%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes cr-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cr-pulse {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.6); opacity: 0; }
}
@keyframes cr-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.cr-anim-float { animation: cr-float 6s var(--ease-in-out) infinite; }
.cr-anim-pop { animation: cr-pop var(--dur-3) var(--ease-out) both; }

/* Reveal on scroll. html.cr-js is set in the layout head; the observer adds .is-visible. */
.cr-js .cr-reveal {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.cr-js .cr-reveal.is-visible,
.cr-js [wire\:id] .cr-reveal { opacity: 1; transform: none; }
.cr-delay-1 { --reveal-delay: 80ms; }
.cr-delay-2 { --reveal-delay: 160ms; }
.cr-delay-3 { --reveal-delay: 240ms; }
.cr-delay-4 { --reveal-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .cr-js .cr-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 3. Layout and type utilities ---------- */
.cr-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(var(--sp-5), env(safe-area-inset-left));
}
@media (min-width: 900px) { .cr-container { padding-inline: var(--sp-6); } }
.cr-container--prose { max-width: var(--container-prose); }
.cr-container--narrow { max-width: var(--container-narrow); }
.cr-container--wide { max-width: var(--container-wide); }

.cr-section { padding-block: var(--section-y); }
.cr-section--tight { padding-block: calc(var(--section-y) / 2); }
.cr-stack > * + * { margin-top: var(--sp-4); }
.cr-stack--lg > * + * { margin-top: var(--sp-6); }

.cr-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .cr-grid--2,
    .cr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .cr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cr-display {
    font: 700 var(--fs-display)/var(--lh-tight) var(--font-display);
    letter-spacing: var(--ls-display);
    color: var(--c-text);
    text-wrap: balance;
}
.cr-title {
    font: 700 var(--fs-7)/1.05 var(--font-display);
    letter-spacing: -.035em;
    text-wrap: balance;
}
.cr-lead {
    font-size: var(--fs-4);
    line-height: 1.5;
    color: var(--c-text-2);
    text-wrap: pretty;
}
@media (max-width: 640px) { .cr-lead { font-size: 1.125rem; } }
.cr-muted { color: var(--c-text-2); }
.cr-small { font-size: var(--fs-1); line-height: 1.5; color: var(--c-text-3); }

.cr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 32px;
    padding: 0 var(--sp-3) 0 var(--sp-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    color: var(--c-violet-text);
    font: 600 var(--fs-1)/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}
.cr-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: var(--sp-1);
    border-radius: var(--r-pill);
    background: var(--g-brand);
    box-shadow: var(--glow-1);
}

/* Gradient text: --g-text is light (AA at any size). --brand uses the saturated brand gradient: display sizes only. */
.cr-gradient-text { color: var(--c-pink-text); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cr-gradient-text {
        background: var(--g-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
    .cr-gradient-text--brand { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; }
}

.cr-hairline {
    height: 1px;
    border: 0;
    background: var(--g-hairline);
    opacity: .7;
}

/* ---------- 4. Glow: orbs, animated frame, glass screen ---------- */
/* Usage: <section class="cr-glow-host"><div class="cr-orbs" aria-hidden="true">
   <span class="cr-orb cr-orb--violet cr-orb--tl"></span><span class="cr-orb cr-orb--pink cr-orb--br"></span></div>...</section> */
.cr-glow-host { position: relative; isolation: isolate; }
.cr-orbs {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
}
.cr-orb {
    position: absolute;
    width: min(760px, 130vw);
    aspect-ratio: 1;
    border-radius: var(--r-pill);
    background: var(--g-glow-violet);
    opacity: .9;
    animation: cr-drift var(--dur-orb) var(--ease-in-out) infinite alternate;
    will-change: transform;
}
.cr-orb--violet { background: var(--g-glow-violet); }
.cr-orb--pink { background: var(--g-glow-pink); animation-name: cr-drift-alt; }
.cr-orb--coral { background: var(--g-glow-coral); }
.cr-orb--cyan { background: var(--g-glow-cyan); animation-name: cr-drift-alt; opacity: .7; }
.cr-orb--sm { width: min(420px, 90vw); }
.cr-orb--lg { width: min(1000px, 160vw); }
.cr-orb--tl { top: -30%; left: -20%; }
.cr-orb--tr { top: -30%; right: -20%; }
.cr-orb--bl { bottom: -35%; left: -20%; }
.cr-orb--br { bottom: -35%; right: -20%; }
.cr-orb--top { top: -45%; left: 50%; margin-left: calc(min(760px, 130vw) / -2); }
.cr-orb--slow { animation-duration: calc(var(--dur-orb) * 1.6); animation-direction: alternate-reverse; }

/* Animated gradient border (hero demo). Child must be .cr-glow-frame__inner. */
.cr-glow-frame {
    position: relative;
    isolation: isolate;
    padding: 1px;
    border-radius: var(--r-4);
    overflow: hidden;
    box-shadow: var(--glow-2);
}
.cr-glow-frame::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 250%;
    aspect-ratio: 1;
    margin: -125% 0 0 -125%;
    background: var(--g-border);
    animation: cr-spin 10s linear infinite;
}
.cr-glow-frame__inner {
    position: relative;
    height: 100%;
    border-radius: calc(var(--r-4) - 1px);
    background: var(--c-surface);
}

/* Glass "screen": product UI mock built in HTML (fake round card, chat pair, score ring). */
.cr-screen {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-4);
    background: var(--c-surface);
    box-shadow: var(--e-3);
}
.cr-screen__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--c-line);
    background: var(--c-bg-raised);
}
.cr-screen__bar > span {
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--c-surface-hover);
}
.cr-screen__body { padding: var(--sp-5); }

/* Media frame with a glow edge (blog covers, screenshots). */
.cr-frame {
    padding: 6px;
    border: 1px solid var(--glass-border);
    border-radius: var(--r-4);
    background: var(--glass-bg);
    box-shadow: var(--glow-1);
}
.cr-frame > img,
.cr-frame > picture img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--r-4) - 6px);
}

/* ---------- 5. Buttons (pill, min 48px; legacy .btn* share the look) ---------- */
.cr-btn,
.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: 0 var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--c-text);
    font: 600 var(--fs-2)/1.2 var(--font-body);
    letter-spacing: -.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.cr-btn--primary,
.btn-primary,
.btn--partner,
.btn--love,
.btn--confession {
    background: var(--g-brand-btn);
    color: var(--c-on-brand);
    border-color: transparent;
    box-shadow: var(--glow-btn);
}
/* Shine sweep on hover (transform only). */
.cr-btn--primary { overflow: hidden; }
.cr-btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--g-sheen);
    transform: translateX(-120%);
    transition: transform var(--dur-4) var(--ease-out);
}

.cr-btn--secondary,
.btn-ghost,
.btn--ghost-primary {
    background: var(--glass-bg-strong);
    color: var(--c-text);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-highlight);
}

.cr-btn--quiet,
.btn-quiet {
    background: transparent;
    color: var(--c-text-2);
    border-color: transparent;
    box-shadow: none;
}

.cr-btn--danger,
.btn-leave {
    background: var(--c-danger-bg);
    color: var(--c-danger);
    border: 1px solid var(--c-danger-bg);
    box-shadow: none;
}

.cr-btn--lg,
.btn--lg { min-height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-3); }
.cr-btn--sm,
.btn--sm { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-2); }
.cr-btn--block,
.btn-block { width: 100%; margin-top: 0; }
.cr-btn--icon { width: 48px; padding: 0; }
.cr-btn--icon.cr-btn--sm { width: 44px; }

@media (hover: hover) {
    .cr-btn:hover:not(:disabled),
    .btn:hover:not(:disabled) { transform: translateY(-1px); }
    .cr-btn--primary:hover:not(:disabled),
    .btn-primary:hover:not(:disabled),
    .btn--partner:hover:not(:disabled),
    .btn--love:hover:not(:disabled),
    .btn--confession:hover:not(:disabled) { background: var(--g-brand-btn-hover); box-shadow: var(--glow-btn-hover); filter: none; }
    .cr-btn--primary:hover:not(:disabled)::before { transform: translateX(120%); }
    .cr-btn--secondary:hover:not(:disabled),
    .btn-ghost:hover:not(:disabled),
    .btn--ghost-primary:hover:not(:disabled) { background: var(--glass-bg-hover); border-color: var(--c-line-strong); }
    .cr-btn--quiet:hover:not(:disabled),
    .btn-quiet:hover:not(:disabled) { color: var(--c-text); background: var(--glass-bg); }
    .cr-btn--danger:hover:not(:disabled),
    .btn-leave:hover:not(:disabled) { border-color: var(--c-danger); }
}

.cr-btn:active:not(:disabled),
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }

.cr-btn:focus-visible,
.btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

.cr-btn:disabled,
.btn:disabled,
.cr-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.cr-btn[aria-busy="true"] { color: transparent; }
.cr-btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--c-on-brand);
    border-right-color: transparent;
    border-radius: var(--r-pill);
    animation: cr-spin 700ms linear infinite;
}

/* Text link with arrow, for "See the full guide" style links. */
.cr-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 44px;
    color: var(--c-text);
    font-weight: 600;
    text-decoration: none;
}
.cr-link .cr-icon { transition: transform var(--dur-2) var(--ease-out); }
.cr-link:hover { color: var(--c-pink-text); }
.cr-link:hover .cr-icon { transform: translateX(3px); }

/* ---------- 6. Forms ---------- */
.cr-field { display: grid; gap: var(--sp-2); }
.cr-label,
.field-label { font: 500 var(--fs-2)/1.5 var(--font-body); color: var(--c-text); }
.cr-help { font-size: var(--fs-1); line-height: 1.45; color: var(--c-text-3); }

.cr-input,
.input {
    width: 100%;
    min-height: 52px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--glass-bg-strong);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-2);
    color: var(--c-text);
    font: 400 max(16px, 1rem)/1.5 var(--font-body);
    box-shadow: none;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.cr-input::placeholder,
.input::placeholder { color: var(--c-text-3); }
.cr-input:hover,
.input:hover { border-color: var(--glass-border-strong); }
.cr-input:focus,
.input:focus {
    outline: none;
    background: var(--glass-bg-hover);
    border-color: var(--c-violet);
    box-shadow: var(--ring);
}
.cr-input:disabled,
.input:disabled { background: var(--c-surface); color: var(--c-text-3); cursor: not-allowed; }
textarea.cr-input { min-height: 120px; resize: vertical; }

.cr-error,
.field-error,
.form-error {
    display: flex;
    gap: var(--sp-2);
    margin-top: 0;
    font-size: var(--fs-1);
    line-height: 1.45;
    color: var(--c-danger);
}
.input--invalid,
.cr-input[aria-invalid="true"] { border-color: var(--c-danger); box-shadow: none; }

.cr-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding: var(--sp-1);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    background: var(--glass-bg);
}
.cr-seg > * {
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--c-text-2);
    font: 500 var(--fs-2)/1.2 var(--font-body);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cr-seg > :hover { color: var(--c-text); }
.cr-seg > [aria-pressed="true"],
.cr-seg > [aria-checked="true"],
.cr-seg > .is-selected {
    background: var(--c-surface-hover);
    border-color: var(--glass-border-strong);
    color: var(--c-text);
    box-shadow: var(--glow-1);
}

.cr-check { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; cursor: pointer; }
.cr-check input { width: 20px; height: 20px; accent-color: var(--c-violet); flex-shrink: 0; }

/* ---------- 7. Components ---------- */
/* Glass card: the only primitive with backdrop-filter. ::after is the hover glow (opacity only). */
.cr-card {
    position: relative;
    padding: var(--sp-5);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-4);
    box-shadow: var(--glass-highlight);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}
@media (min-width: 640px) { .cr-card { padding: var(--sp-6); } }
.cr-card--solid { background: var(--c-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cr-card--glow { background: var(--g-card-glow), var(--glass-bg); }
.cr-card--interactive {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease);
}
.cr-card--interactive::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: var(--glow-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out);
}
@media (hover: hover) {
    .cr-card--interactive:hover { transform: translateY(-4px); border-color: var(--glass-border-strong); }
    .cr-card--interactive:hover::after { opacity: 1; }
}
.cr-card--interactive:focus-visible::after { opacity: 1; }
.cr-card--media { padding: 0; overflow: hidden; }
.cr-card--media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.cr-card--media > :not(img):not(picture) { padding-inline: var(--sp-5); }
.cr-card--inset {
    padding: var(--sp-4);
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.cr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    background: var(--glass-bg-strong);
    color: var(--c-text-2);
    font: 500 var(--fs-1)/1 var(--font-body);
    white-space: nowrap;
}
.cr-chip .cr-icon { width: 14px; height: 14px; }
.cr-chip--live,
.cr-chip--ok { position: relative; }
.cr-chip--live::before,
.cr-chip--ok::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--c-success);
}
.cr-chip--live::after {
    content: "";
    position: absolute;
    left: var(--sp-3);
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--c-success);
    animation: cr-pulse 1.8s var(--ease-out) infinite;
}
.cr-chip--beta,
.cr-chip--age { background: transparent; border-color: var(--c-line-strong); color: var(--c-text); }
.cr-chip--warn { background: var(--c-warning-bg); border-color: var(--c-warning-bg); color: var(--c-text); }
.cr-chip--accent { background: var(--c-accent-tint); border-color: var(--c-accent-tint); color: var(--c-violet-text); }
.cr-chip--glow {
    border-color: transparent;
    background: linear-gradient(var(--c-surface), var(--c-surface)) padding-box, var(--g-brand) border-box;
    color: var(--c-text);
}
a.cr-chip,
button.cr-chip { min-height: 44px; padding: 0 var(--sp-4); cursor: pointer; text-decoration: none; }

.cr-alert {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--c-info-bg);
    border-radius: var(--r-3);
    background: var(--c-info-bg);
    color: var(--c-text);
    font-size: var(--fs-2);
    line-height: 1.5;
}
.cr-alert > .cr-icon { color: var(--c-info); margin-top: 1px; }
.cr-alert--success { border-color: var(--c-success-bg); background: var(--c-success-bg); }
.cr-alert--success > .cr-icon { color: var(--c-success); }
.cr-alert--danger { border-color: var(--c-danger-bg); background: var(--c-danger-bg); }
.cr-alert--danger > .cr-icon { color: var(--c-danger); }
.cr-alert--warning { border-color: var(--c-warning-bg); background: var(--c-warning-bg); }
.cr-alert--warning > .cr-icon { color: var(--c-warning); }

.cr-empty { margin-inline: auto; max-width: 420px; text-align: center; }
.cr-empty__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto var(--sp-5);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-pill);
    background: var(--glass-bg-strong);
    color: var(--c-violet-text);
    box-shadow: var(--glow-1);
}
.cr-empty__icon .cr-icon { width: 30px; height: 30px; }
.cr-empty__title { font: 700 var(--fs-5)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); }
.cr-empty__text { margin-top: var(--sp-3); color: var(--c-text-2); }
.cr-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }

.cr-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--c-line-strong);
    border-top-color: var(--c-violet-text);
    border-radius: var(--r-pill);
    animation: cr-spin 800ms linear infinite;
}
.cr-typing { display: inline-flex; gap: 4px; }
.cr-typing > span {
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--c-text-2);
    animation: cr-typing 1.2s var(--ease-in-out) infinite;
}
.cr-typing > span:nth-child(2) { animation-delay: 150ms; }
.cr-typing > span:nth-child(3) { animation-delay: 300ms; }

.cr-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: min(420px, calc(100vw - 32px));
    min-height: 48px;
    padding: var(--sp-2) var(--sp-5);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-pill);
    background: var(--glass-solid);
    color: var(--c-text);
    box-shadow: var(--e-3);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    font-size: var(--fs-2);
    transform: translateX(-50%);
}
.cr-toast[hidden] { display: none; }
.cr-toast > .cr-icon { color: var(--c-success); }

.cr-dialog,
dialog.home-join-dialog {
    width: min(460px, calc(100vw - 32px));
    max-width: 460px;
    padding: var(--sp-6);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-4);
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: var(--e-3);
}
.cr-dialog[open],
dialog.home-join-dialog[open] { animation: cr-pop var(--dur-3) var(--ease-out); }
.cr-dialog::backdrop,
dialog.home-join-dialog::backdrop { background: var(--c-scrim); backdrop-filter: none; }

/* ---------- 8. Page primitives (guides, trust pages, blog) ---------- */
.cr-page-hero { padding-block: var(--sp-8) var(--sp-6); }
.cr-page-hero h1 { font-size: var(--fs-7); line-height: 1.05; letter-spacing: -.035em; }
.cr-page-hero p { margin-top: var(--sp-4); font-size: var(--fs-4); line-height: 1.5; color: var(--c-text-2); }
@media (max-width: 640px) { .cr-page-hero p { font-size: 1.125rem; } }

/* Readable dark column: 17-18px, 1.75, no glow behind it. */
.cr-prose { max-width: 68ch; font-size: var(--fs-3); line-height: 1.75; color: var(--c-text-prose); }
@media (min-width: 900px) { .cr-prose { font-size: 1.125rem; } }
.cr-prose h2 { margin: var(--sp-8) 0 var(--sp-4); font-size: var(--fs-5); }
.cr-prose h3 { margin: var(--sp-6) 0 var(--sp-3); }
.cr-prose h2,
.cr-prose h3 { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.cr-prose p { margin: 0 0 var(--sp-5); }
.cr-prose ul,
.cr-prose ol { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding-left: var(--sp-5); }
.cr-prose li::marker { color: var(--c-violet-text); }
.cr-prose strong { color: var(--c-text); font-weight: 600; }
.cr-prose a { color: var(--c-pink-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cr-prose a:hover { color: var(--c-text); }
.cr-prose blockquote {
    margin: var(--sp-6) 0;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
    border-left: 2px solid var(--c-violet);
    font-size: var(--fs-4);
    line-height: 1.5;
    color: var(--c-text);
}
.cr-prose hr { height: 1px; margin: var(--sp-7) 0; border: 0; background: var(--g-hairline); }
.cr-prose img { max-width: 100%; height: auto; border-radius: var(--r-3); }
.cr-prose code { padding: 2px 6px; border-radius: var(--r-1); background: var(--c-surface-2); font-size: .9em; }
.cr-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--sp-5); }
.cr-prose th { font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); text-align: left; }
.cr-prose td,
.cr-prose th { padding: var(--sp-3); border-bottom: 1px solid var(--c-line); }

.cr-note {
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--c-accent-tint);
    border-left: 2px solid var(--c-violet);
    border-radius: var(--r-3);
    background: var(--c-accent-tint);
    color: var(--c-text);
}

.cr-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); font-size: var(--fs-1); color: var(--c-text-3); }
.cr-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text-2); text-decoration: none; }
.cr-breadcrumb a:hover { color: var(--c-text); }

.cr-steps { display: grid; gap: var(--sp-6); padding: 0; list-style: none; counter-reset: cr-step; }
.cr-steps > li { position: relative; padding-left: var(--sp-8); counter-increment: cr-step; }
.cr-steps > li::before {
    content: counter(cr-step, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--c-violet-text);
    font: 700 var(--fs-5)/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cr-steps > li::before {
        background: var(--g-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.cr-faq { display: grid; gap: var(--sp-3); }
.cr-faq details {
    border: 1px solid var(--glass-border);
    border-radius: var(--r-3);
    background: var(--glass-bg);
    transition: border-color var(--dur-2) var(--ease);
}
.cr-faq details[open] { border-color: var(--glass-border-strong); background: var(--glass-bg-hover); }
.cr-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 60px;
    padding: var(--sp-3) var(--sp-5);
    list-style: none;
    cursor: pointer;
    color: var(--c-text);
    font: 600 var(--fs-3)/1.4 var(--font-body);
}
.cr-faq summary::-webkit-details-marker { display: none; }
.cr-faq summary::after {
    content: "+";
    flex-shrink: 0;
    color: var(--c-violet-text);
    font: 400 var(--fs-4)/1 var(--font-body);
    transition: transform var(--dur-2) var(--ease-out);
}
.cr-faq details[open] summary::after { transform: rotate(45deg); }
.cr-faq details > :not(summary) { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-text-2); }

.cr-cta-band {
    position: relative;
    overflow: hidden;
    padding: var(--sp-8) var(--sp-5);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-5);
    background: var(--g-card-glow), var(--glass-bg);
    box-shadow: var(--glass-highlight);
    text-align: center;
}
@media (min-width: 900px) { .cr-cta-band { padding: var(--sp-9) var(--sp-8); } }

.cr-facts { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cr-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cr-facts > div {
    padding: var(--sp-5);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-3);
    background: var(--glass-bg);
}
.cr-facts dt { font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); }
.cr-facts dd { margin: var(--sp-2) 0 0; color: var(--c-text); font: 600 var(--fs-4)/1.3 var(--font-display); }

.cr-toc { padding-left: var(--sp-4); border-left: 1px solid var(--c-line); font-size: var(--fs-2); }
.cr-toc a { display: flex; align-items: center; min-height: 40px; color: var(--c-text-2); text-decoration: none; }
.cr-toc a:hover,
.cr-toc a[aria-current="true"] { color: var(--c-text); }

/* ---------- 9. Wordmark and header (solid, no backdrop-filter, no transform: the mobile sheet is fixed inside it) ---------- */
.cr-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--c-text);
    font: 800 1.125rem/1 var(--font-brand);
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    background: none;
    -webkit-text-fill-color: currentColor;
}
.cr-wordmark--footer { font-size: 1.375rem; }
.cr-wordmark__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--g-brand);
    box-shadow: var(--glow-btn);
}

body > .cr-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-header-bg);
    border-bottom: 1px solid var(--c-line);
}
.cr-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--g-hairline);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease);
}
.cr-header.is-scrolled::after { opacity: .55; }
.cr-header__inner {
    position: relative;   /* positions the desktop panels; never use it to style the header itself */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    height: calc(var(--header-h) - 1px);   /* + 1px hairline = --header-h, where the mobile sheet starts */
}
.cr-header__end { display: flex; align-items: center; gap: var(--sp-2); }
.cr-header__cta--bar { min-height: 44px; padding: 0 var(--sp-4) 0 var(--sp-3); }
.cr-header__cta--bar .cr-icon { width: 16px; height: 16px; fill: currentColor; stroke-width: 1.25; }
.cr-header__toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    color: var(--c-text);
    cursor: pointer;
}
.cr-header__icon-close { display: none; }
.cr-header.is-open .cr-header__icon-open { display: none; }
.cr-header.is-open .cr-header__icon-close { display: block; }

/* Mobile: opaque full sheet below the bar, fixed to the viewport, overlays content (no shift).
   Order: Start a room, join form, games, Learn and Guides accordions, About, small links. */
.cr-header__nav {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 100;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-7) + env(safe-area-inset-bottom));
    background: var(--c-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cr-header.is-open .cr-header__nav { display: flex; animation: cr-fade-in var(--dur-2) var(--ease); }
.cr-header.is-open .cr-nav__quick,
.cr-header.is-open .cr-nav__join,
.cr-header.is-open .cr-nav__list { animation: cr-fade-up var(--dur-3) var(--ease-out) both; }
.cr-header.is-open .cr-nav__join { animation-delay: 40ms; }
.cr-header.is-open .cr-nav__list { animation-delay: 80ms; }

.cr-nav__quick { order: -2; display: grid; gap: var(--sp-2); }
.cr-nav__quick form { margin: 0; }
.cr-nav__fine { margin: 0; color: var(--c-text-3); font-size: var(--fs-1); text-align: center; }
.cr-nav__join { order: -1; }
.cr-nav__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cr-nav__foot { order: 1; display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin: 0; padding: 0; list-style: none; }
.cr-nav__foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-text-2);
    font-size: var(--fs-2);
    text-decoration: none;
}
.cr-nav__foot a:hover { color: var(--c-text); }

/* Top-level items: rows in the sheet, pills on desktop. */
.cr-header__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    background: none;
    color: var(--c-text);
    font: 600 var(--fs-4)/1.2 var(--font-display);
    letter-spacing: -.015em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.cr-header__link.is-active { color: var(--c-violet-text); }
.cr-nav__chev { color: var(--c-text-3); transition: transform var(--dur-2) var(--ease); }
.cr-nav__trigger[aria-expanded="true"] .cr-nav__chev { transform: rotate(180deg); }
.cr-nav__trigger--games { display: none; }

/* Panels. Hidden by default; in the sheet the games and join panels always show as sections. */
.cr-nav__panel[hidden] { display: none; }
.cr-nav__panel { padding: var(--sp-2) 0 var(--sp-4); border-bottom: 1px solid var(--c-line); }
.cr-nav__panel--games,
.cr-nav__panel--games[hidden] { display: grid; gap: var(--sp-5); padding: 0 0 var(--sp-4); }
.cr-nav__panel--join,
.cr-nav__panel--join[hidden] {
    display: block;
    padding: var(--sp-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-3);
    background: var(--glass-bg);
    box-shadow: var(--glass-highlight);
}

.cr-nav__heading {
    margin: 0 0 var(--sp-2);
    color: var(--c-text-3);
    font: 600 var(--fs-1)/1.3 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}
.cr-nav__entries { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.cr-nav__entries form { margin: 0; }
.cr-nav__entry {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--r-3);
    background: none;
    color: var(--c-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cr-nav__entry:hover { background: var(--glass-bg-hover); border-color: var(--glass-border); }
.cr-nav__entry.is-active { background: var(--c-surface-hover); border-color: var(--glass-border); }
.cr-nav__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--r-2);
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-highlight);
    transition: box-shadow var(--dur-2) var(--ease);
}
.cr-nav__entry:hover .cr-nav__icon,
.cr-nav__entry:focus-visible .cr-nav__icon { box-shadow: var(--glow-1); }
.cr-nav__text { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.cr-nav__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    font: 600 var(--fs-3)/1.3 var(--font-body);
}
.cr-nav__name .cr-chip { min-height: 22px; padding: 0 var(--sp-2); }
.cr-nav__meta { color: var(--c-violet-text); font: 500 var(--fs-1)/1.3 var(--font-body); }
.cr-nav__desc { color: var(--c-text-2); font-size: var(--fs-2); line-height: 1.45; }

.cr-nav__all {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 48px;
    margin-top: var(--sp-1);
    padding: 0 var(--sp-3);
    border-radius: var(--r-3);
    color: var(--c-text);
    font: 600 var(--fs-3)/1.2 var(--font-body);
    text-decoration: none;
}
.cr-nav__all:hover,
.cr-nav__all.is-active { background: var(--glass-bg-hover); }

.cr-nav__promo { display: none; }

.cr-nav__join-btn { display: none; }
.cr-nav__join-form { display: grid; gap: var(--sp-2); margin: 0; }
.cr-nav__join-form .cr-nav__heading {
    margin: 0;
    color: var(--c-text);
    font: 600 var(--fs-3)/1.3 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
}
.cr-nav__help { margin: 0; color: var(--c-text-2); font-size: var(--fs-2); }
.cr-nav__join-row { display: flex; gap: var(--sp-2); }
.cr-nav__join-row .cr-input { flex: 1; min-width: 0; }
.cr-nav__join-row .cr-btn { flex-shrink: 0; min-height: 52px; }
.cr-nav__join-form .cr-error { margin: 0; }

/* Lock scroll on the root, never on body: html has overflow-x: clip (legacy), so overflow on body
   would make body a scroll container and the sticky header would scroll away with the page. */
html:has(> body.nav-open) { overflow: hidden; }
/* Open sheet or open panel sits above the consent card and resume strip. */
.cr-header.is-open,
.cr-header.has-panel { z-index: 300; }

@media (min-width: 900px) {
    .cr-header__nav {
        display: flex;
        position: static;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--sp-3);
        padding: 0;
        background: transparent;
        overflow: visible;
    }
    .cr-header.is-open .cr-header__nav { animation: none; }
    .cr-nav__quick,
    .cr-nav__foot { display: none; }
    .cr-nav__list {
        flex-direction: row;
        gap: var(--sp-1);
        margin-left: auto;
        padding: var(--sp-1);
        border: 1px solid var(--glass-border);
        border-radius: var(--r-pill);
        background: var(--glass-bg);
    }
    .cr-header__link {
        position: relative;
        width: auto;
        min-height: 44px;
        padding: 0 var(--sp-4);
        border: 0;
        border-radius: var(--r-pill);
        color: var(--c-text-2);
        font: 500 var(--fs-2)/1 var(--font-body);
        letter-spacing: 0;
        white-space: nowrap;
    }
    .cr-nav__trigger { gap: var(--sp-1); padding-right: var(--sp-3); }
    .cr-header__link:hover,
    .cr-nav__item.is-open > .cr-header__link { background: var(--glass-bg-hover); color: var(--c-text); }
    .cr-header__link.is-active { background: var(--c-surface-hover); box-shadow: var(--glass-highlight); color: var(--c-text); }
    .cr-nav__trigger--games { display: flex; }

    /* Glass panels hang below the bar and overlay the page (no shift). They are children of the
       header, never its ancestors, so the blur is safe here. */
    .cr-nav__panel {
        position: absolute;
        z-index: 1;
        top: calc(100% + var(--sp-2));
        left: 0;
        right: 0;
        width: min(960px, calc(100% - 2 * var(--sp-6)));
        max-height: calc(100vh - var(--header-h) - var(--sp-6));
        margin-inline: auto;
        overflow-y: auto;
        padding: var(--sp-4);
        border: 1px solid var(--glass-border-strong);
        border-radius: var(--r-4);
        background: var(--glass-solid);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        box-shadow: var(--e-3);
        animation: cr-pop var(--dur-2) var(--ease-out);
    }
    .cr-nav__panel[hidden],
    .cr-nav__panel--games[hidden],
    .cr-nav__panel--join[hidden] { display: none; }
    .cr-nav__panel--games {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 17rem);
        gap: var(--sp-3);
        padding: var(--sp-4);
    }
    .cr-nav__col { padding: var(--sp-2) 0; }
    .cr-nav__col .cr-nav__heading { margin-left: var(--sp-3); }
    .cr-nav__entries--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
    .cr-nav__entries--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
    .cr-nav__all { margin-top: var(--sp-2); }

    .cr-nav__promo {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        padding: var(--sp-5);
        border: 1px solid transparent;
        border-radius: var(--r-3);
        background: var(--g-card-glow) padding-box, linear-gradient(var(--c-surface), var(--c-surface)) padding-box, var(--g-brand) border-box;
        box-shadow: var(--glow-1);
    }
    .cr-nav__promo-icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--glass-border);
        border-radius: var(--r-2);
        background: var(--glass-bg-strong);
    }
    .cr-nav__promo-title { margin: var(--sp-1) 0 0; color: var(--c-text); font: 700 var(--fs-4)/1.25 var(--font-display); letter-spacing: -.015em; }
    .cr-nav__promo-text { margin: 0; color: var(--c-text-2); font-size: var(--fs-2); line-height: 1.5; }
    .cr-nav__promo form { margin: auto 0 0; padding-top: var(--sp-2); }
    .cr-nav__promo-fine { margin: 0; color: var(--c-text-3); font-size: var(--fs-1); text-align: center; }

    .cr-nav__join { position: relative; order: 0; margin-left: auto; }
    .cr-nav__join-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        min-height: 44px;
        padding: 0 var(--sp-4);
        border: 1px solid var(--glass-border);
        border-radius: var(--r-pill);
        background: var(--glass-bg);
        color: var(--c-text);
        font: 500 var(--fs-2)/1 var(--font-body);
        white-space: nowrap;
        cursor: pointer;
        transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    }
    .cr-nav__join-btn:hover,
    .cr-nav__join.is-open .cr-nav__join-btn { background: var(--glass-bg-hover); border-color: var(--glass-border-strong); }
    .cr-nav__panel--join {
        left: auto;
        right: 0;
        top: calc(100% + (var(--header-h) - 44px) / 2 + var(--sp-2));
        width: 22rem;
        margin: 0;
        padding: var(--sp-5);
    }

    .cr-header__toggle { display: none; }
    .cr-header__cta--bar { padding: 0 var(--sp-5) 0 var(--sp-4); }
}

/* ---------- 10. Resume strip (in flow, never overlaps) ---------- */
.site-resume-slot .home-resume-banner-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: var(--container);
    min-height: 60px;
    padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-pill);
    background: var(--g-card-glow), var(--c-surface);
    box-shadow: var(--glow-1);
}
.site-resume-slot .home-resume-banner {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--c-text);
    text-decoration: none;
}
.site-resume-slot .home-resume-banner__body { min-width: 0; }
.site-resume-slot .home-resume-banner__body strong { display: block; color: var(--c-text); font-size: var(--fs-2); }
.site-resume-slot .home-resume-banner__body span { display: block; overflow: hidden; color: var(--c-text-2); font-size: var(--fs-1); text-overflow: ellipsis; white-space: nowrap; }
.site-resume-slot .home-resume-banner__cta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
    margin-left: auto;
    padding: 0 var(--sp-4);
    border-radius: var(--r-pill);
    background: var(--g-brand-btn);
    color: var(--c-on-brand);
    font: 600 var(--fs-2)/1 var(--font-body);
    box-shadow: var(--glow-btn);
}
.site-resume-slot .home-resume-dismiss__btn,
.site-resume-slot .home-resume-banner-wrap > .home-resume-dismiss__btn {
    position: static;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--c-text-2);
    transform: none;
    cursor: pointer;
}
.site-resume-slot .home-resume-dismiss__btn:hover { background: var(--glass-bg-hover); color: var(--c-text); border: 0; }
.home-resume-banner__icon.cr-icon { width: 24px; height: 24px; color: var(--c-violet-text); font-size: inherit; }

/* ---------- 11. Footer (dark, glow line on top) ---------- */
.cr-footer {
    position: relative;
    margin-top: var(--section-y);
    overflow: clip;
    isolation: isolate;
    background: var(--c-bg);
    color: var(--c-text-2);
}
.cr-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--g-hairline);
}
.cr-footer::after {
    content: "";
    position: absolute;
    top: -260px;
    left: 50%;
    z-index: -1;
    width: min(900px, 140vw);
    height: 420px;
    margin-left: calc(min(900px, 140vw) / -2);
    background: var(--g-glow-violet);
    opacity: .35;
    pointer-events: none;
}
.cr-footer__main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
    padding-block: var(--sp-8) var(--sp-7);
}
.cr-footer__brand { grid-column: 1 / -1; }
.cr-footer__tag { margin-top: var(--sp-3); max-width: 30ch; color: var(--c-text-2); font-size: var(--fs-2); line-height: 1.55; }
.cr-footer__cta { margin-top: var(--sp-5); }
.cr-footer__heading {
    margin-bottom: var(--sp-2);
    color: var(--c-text-3);
    font: 600 var(--fs-1)/1.4 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}
.cr-footer__list { margin: 0; padding: 0; list-style: none; }
.cr-footer__list a,
.cr-footer__legal a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-text-2);
    font-size: var(--fs-2);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color var(--dur-1) var(--ease);
}
.cr-footer__list a:hover,
.cr-footer__legal a:hover { color: var(--c-text); }
.cr-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-block: var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--c-line);
    color: var(--c-text-3);
    font-size: var(--fs-1);
}
.cr-footer__bottom p { margin: 0; }
.cr-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.cr-footer__legal a { justify-content: center; min-width: 44px; font-size: var(--fs-1); }

@media (min-width: 900px) {
    .cr-footer__main { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); padding-block: var(--sp-9) var(--sp-8); }
    .cr-footer__brand { grid-column: auto; }
    .cr-footer__bottom { flex-direction: row; align-items: center; gap: var(--sp-5); }
    .cr-footer__note { flex: 1; }
    .cr-footer__legal { margin-left: auto; }
}

/* ---------- 12. Cookie consent (glass card; logic lives in the partial) ---------- */
/* body > beats legacy body > :not(.site-ambient) { position: relative }. */
body > .cookie-banner.cr-consent { position: fixed; }
.cookie-banner.cr-consent {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
    z-index: 200;
    padding: var(--sp-4);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-4);
    /* Solid, not see-through: on a first visit it lies over forms (Talk, join) and text must not show through. */
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: var(--e-3);
    animation: cr-pop var(--dur-3) var(--ease-out) both;
}
.cookie-banner.cr-consent[hidden] { display: none; }
.cr-consent .cookie-banner__inner { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); max-width: none; }
.cr-consent__title { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text); font: 600 var(--fs-2)/1.3 var(--font-body); }
.cr-consent__title .cr-icon { color: var(--c-violet-text); }
.cr-consent .cookie-banner__text { margin: 0; color: var(--c-text-2); font-size: var(--fs-1); line-height: 1.55; }
.cr-consent .cookie-banner__text a { color: var(--c-pink-text); text-decoration: underline; text-underline-offset: 3px; }
.cr-consent .cookie-banner__actions { display: flex; gap: var(--sp-2); }
.cr-consent .cookie-banner__actions .cr-btn { flex: 1; min-height: 44px; }
/* Short phones (e.g. 320x700): keep the page's main button visible above the card. */
@media (max-width: 640px) and (max-height: 760px) {
    .cookie-banner.cr-consent { padding: var(--sp-3); }
    .cr-consent .cookie-banner__inner { gap: var(--sp-2); }
    .cr-consent__title { display: none; }
    .cr-consent .cookie-banner__text { line-height: 1.45; }
}
@media (min-width: 640px) {
    .cookie-banner.cr-consent {
        left: var(--sp-5);
        right: auto;
        bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
        max-width: 460px;
        padding: var(--sp-5);
    }
    .cr-consent .cookie-banner__text { font-size: var(--fs-2); }
}
body:has(.room-page) .cookie-banner.cr-consent { bottom: calc(var(--mobile-tab-h) + var(--sp-3) + env(safe-area-inset-bottom)); }
/* In a room the consent card sits under dialogs (rematch popup, report) and leaves room so no game control is hidden until the visitor chooses. */
body:has(.room-page) .cookie-banner.cr-consent { z-index: 150; }
body:has(.room-page .cr-room):has(.cookie-banner.cr-consent:not([hidden])) .cr-room { padding-bottom: 15rem; }
@media (min-width: 901px) {
    body:has(.room-page) .cookie-banner.cr-consent { bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }
}

/* ---------- 13. Reduced motion off-switch (last, so it beats every animation above) ---------- */
@media (prefers-reduced-motion: reduce) {
    .cr-orb,
    .cr-anim-float,
    .cr-anim-pop,
    .cr-glow-frame::before,
    .cr-chip--live::after,
    .cr-typing > span,
    .cr-header.is-open .cr-header__nav,
    .cr-header.is-open .cr-nav__quick,
    .cr-header.is-open .cr-nav__join,
    .cr-header.is-open .cr-nav__list,
    .cr-nav__panel,
    .cookie-banner.cr-consent,
    .cr-dialog[open],
    dialog.home-join-dialog[open] { animation: none; }
    .cr-btn--primary::before { display: none; }
    .cr-nav__chev { transition: none; }
    .cr-card--interactive:hover,
    .cr-btn:hover:not(:disabled),
    .btn:hover:not(:disabled) { transform: none; }
}