/* ============================================================
   CubingHQ — Launch UI design layer
   ------------------------------------------------------------
   Re-skins the whole site in the Launch UI visual language
   (launchuicomponents.com / github.com/launch-ui/launch-ui):

     · zinc neutrals + a single warm brand accent
     · soft "glass" surfaces built from layered gradients with a
       bright top border and a dark bottom edge
     · radial brand glows behind hero content
     · hairline section separators and edge fade masks
     · staggered `appear` / `appear-zoom` entrance animations
     · 10px radius scale, container widths of 1280 / 1536

   Loaded last, so it overrides style.css and timer.css by
   re-pointing the app's design tokens and restyling the shared
   component classes — every view inherits the new look.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
    /* Launch UI brand + neutral ramp (dark is the app default) */
    --brand: oklch(83.6% 0.1177 66.87);
    --brand-foreground: oklch(75.77% 0.159 55.91);
    --lu-bg: oklch(0.141 0.005 285.823);
    --lu-fg: oklch(0.985 0 0);
    --lu-muted: oklch(0.274 0.006 286.033);
    --lu-muted-fg: oklch(0.705 0.015 286.067);
    --lu-subtle-fg: oklch(0.552 0.016 285.938);
    --lu-border: rgba(255, 255, 255, 0.10);
    --lu-border-top: rgba(255, 255, 255, 0.22);
    --lu-border-bottom: rgba(255, 255, 255, 0.05);
    --lu-shadow: rgba(0, 0, 0, 0.20);
    --lu-shadow-strong: rgba(0, 0, 0, 0.53);

    /* Solid button colour. Launch UI keeps the brand for glows and
       accents and drives the primary CTA from --primary, which is
       near-white in dark mode and brand orange in light mode. */
    --lu-primary: oklch(0.985 0 0);
    --lu-primary-fg: oklch(0.21 0.006 285.885);

    /* Re-point the app's tokens at the Launch UI palette */
    --clr-bg: var(--lu-bg);
    --clr-bg-elevated: oklch(0.178 0.005 285.9);
    --clr-bg-card: oklch(0.167 0.005 285.9);
    --clr-bg-card-hover: oklch(0.205 0.006 285.9);
    --clr-surface: oklch(0.225 0.006 286.0);
    --clr-border: var(--lu-border);
    --clr-border-active: color-mix(in oklab, var(--brand) 45%, transparent);

    --clr-text: var(--lu-fg);
    --clr-text-secondary: var(--lu-muted-fg);
    --clr-text-muted: var(--lu-subtle-fg);

    /* One accent hue, two roles:
         --brand        luminous amber for glows, accent text and icons
                        (Launch UI's dark-mode brand — never behind
                        white text, it is far too light for that)
         --clr-primary  the deeper fill the app paints behind white
                        text (chips, sliders, action buttons), so every
                        existing `color: #fff` pairing stays legible. */
    --clr-primary: oklch(0.60 0.19 44);
    --clr-primary-hover: oklch(0.67 0.18 48);
    --clr-primary-glow: color-mix(in oklab, var(--brand) 25%, transparent);
    --clr-accent: oklch(0.60 0.19 44);
    --clr-accent-hover: oklch(0.67 0.18 48);
    --clr-accent-glow: color-mix(in oklab, var(--brand) 25%, transparent);

    /* Semantic colours, retuned to sit on zinc */
    --clr-success: oklch(0.72 0.17 162);
    --clr-success-glow: oklch(0.72 0.17 162 / 0.18);
    --clr-danger: oklch(0.66 0.21 25);
    --clr-danger-glow: oklch(0.66 0.21 25 / 0.18);
    --clr-warning: oklch(0.80 0.16 78);
    --clr-info: oklch(0.70 0.13 233);
    --clr-gold: oklch(0.83 0.16 84);
    --clr-silver: oklch(0.80 0.01 286);
    --clr-bronze: oklch(0.66 0.12 55);

    --clr-timer: var(--brand);
    --clr-timer-running: oklch(0.72 0.17 162);
    --clr-timer-inspection: oklch(0.80 0.16 78);
    --clr-timer-stopped: oklch(0.66 0.21 25);

    /* Launch UI radius scale (base 0.625rem) */
    --radius: 0.625rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);

    --shadow-sm: 0 1px 2px var(--lu-shadow);
    --shadow-md: 0 4px 6px -1px var(--lu-shadow), 0 2px 4px -2px var(--lu-shadow);
    --shadow-lg: 0 20px 25px -5px var(--lu-shadow), 0 8px 10px -6px var(--lu-shadow);
    --shadow-2xl: 0 25px 50px -12px var(--lu-shadow-strong);
    --shadow-mockup: -12px 16px 48px var(--lu-shadow-strong);

    --lu-container: 1280px;
    --lu-container-lg: 1536px;
    --line-width: 1px;
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] {
    --brand: oklch(66.5% 0.1804 47.04);
    --brand-foreground: oklch(75.77% 0.159 55.91);
    --lu-bg: oklch(97.65% 0.001 17.18);
    --lu-fg: oklch(0.141 0.005 285.823);
    --lu-muted: oklch(0.967 0.001 286.375);
    --lu-muted-fg: oklch(0.552 0.016 285.938);
    --lu-subtle-fg: oklch(0.62 0.014 286.0);
    --lu-border: oklch(0.92 0.004 286.32);
    --lu-border-top: oklch(0.94 0.004 286.32);
    --lu-border-bottom: oklch(0.90 0.004 286.32);
    --lu-shadow: rgba(0, 0, 0, 0.05);
    --lu-shadow-strong: rgba(0, 0, 0, 0.10);
    --lu-primary: oklch(66.5% 0.1804 47.04);
    --lu-primary-fg: oklch(0.985 0 0);

    --clr-bg-elevated: #ffffff;
    --clr-bg-card: #ffffff;
    --clr-bg-card-hover: oklch(0.985 0.001 286.4);
    --clr-surface: oklch(0.967 0.001 286.375);

    --clr-gold: oklch(0.72 0.16 84);
    --clr-silver: oklch(0.62 0.01 286);
    --clr-bronze: oklch(0.58 0.12 55);
}

/* ------------------------------------------------------------
   1b. ACCENT THEMES
   ------------------------------------------------------------
   A second axis alongside data-theme: data-accent picks the hue.
   Each accent sets the same two roles the palette already had —
   --brand, the luminous colour used for glows and accent text on
   dark surfaces, and --clr-primary, the deeper fill the app paints
   behind white text.

   Every --clr-primary here clears 4.5:1 against white (orange
   4.62, green 4.93, blue 5.06, red 5.13). The old orange sat at
   4.26 and the old light-mode primary at 3.26, so both failed AA;
   they are corrected in passing.

   Tokens derived with color-mix (--clr-primary-glow,
   --clr-border-active, --clr-timer) follow automatically.
   ------------------------------------------------------------ */

[data-accent="orange"] {
    --brand: oklch(83.6% 0.1177 66.87);
    --brand-foreground: oklch(75.77% 0.159 55.91);
    --clr-primary: oklch(0.58 0.19 44);
    --clr-primary-hover: oklch(0.65 0.18 48);
}
[data-accent="green"] {
    --brand: oklch(0.84 0.14 158);
    --brand-foreground: oklch(0.74 0.16 155);
    --clr-primary: oklch(0.52 0.17 152);
    --clr-primary-hover: oklch(0.59 0.16 152);
}
[data-accent="blue"] {
    --brand: oklch(0.82 0.11 235);
    --brand-foreground: oklch(0.72 0.14 240);
    --clr-primary: oklch(0.54 0.19 253);
    --clr-primary-hover: oklch(0.61 0.17 253);
}
[data-accent="red"] {
    --brand: oklch(0.78 0.13 25);
    --brand-foreground: oklch(0.70 0.17 27);
    --clr-primary: oklch(0.56 0.19 25);
    --clr-primary-hover: oklch(0.63 0.18 25);
}

/* In light mode --brand is painted on white, so it takes the deeper
   value, and the primary CTA fill follows --clr-primary. */
[data-theme="light"][data-accent="orange"] { --brand: oklch(0.58 0.19 44);  --lu-primary: oklch(0.58 0.19 44); }
[data-theme="light"][data-accent="green"]  { --brand: oklch(0.52 0.17 152); --lu-primary: oklch(0.52 0.17 152); }
[data-theme="light"][data-accent="blue"]   { --brand: oklch(0.54 0.19 253); --lu-primary: oklch(0.54 0.19 253); }
[data-theme="light"][data-accent="red"]    { --brand: oklch(0.56 0.19 25);  --lu-primary: oklch(0.56 0.19 25); }

/* Keep the accent aliases in step with the primary. */
[data-accent] {
    --clr-accent: var(--clr-primary);
    --clr-accent-hover: var(--clr-primary-hover);
}

/* ============================================================
   2. BASE
   ============================================================ */
body {
    background: var(--clr-bg);
    color: var(--clr-text);
    -webkit-font-smoothing: antialiased;
}

/* Launch UI backgrounds are calm — drop the coloured blobs and
   soften the grid to a faint neutral mesh. */
.bg-glow { display: none !important; }

.bg-grid,
[data-theme="light"] .bg-grid {
    background-image:
        linear-gradient(var(--lu-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--lu-border) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}

::selection { background: var(--brand); color: oklch(0.21 0.006 285.885); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }

* { scrollbar-width: thin; scrollbar-color: var(--clr-surface) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--clr-surface);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--clr-text-muted); }

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.lu-container {
    width: 100%;
    max-width: var(--lu-container);
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

.lu-section {
    position: relative;
    padding-block: clamp(48px, 9vw, 128px);
}
.lu-section--tight { padding-block: clamp(32px, 5vw, 64px); }

/* Hairline separators */
.line-b { border-bottom: var(--line-width) solid var(--lu-border); }
.line-t { border-top: var(--line-width) solid var(--lu-border); }
.line-y { border-block: var(--line-width) solid var(--lu-border); }

/* Edge fade masks */
.fade-bottom { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 35%); mask-image: linear-gradient(to top, transparent 0%, #000 35%); }
.fade-top    { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%); mask-image: linear-gradient(to bottom, transparent 0%, #000 35%); }
.fade-x      { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); }

/* ============================================================
   4. GLASS SURFACES
   Layered gradient + bright top edge; the signature Launch UI card.
   ============================================================ */
.glass-1, .glass-2, .glass-3, .glass-4, .glass-5 {
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    border-bottom-color: var(--lu-border-bottom);
}
.glass-1 { background-image: linear-gradient(to bottom, color-mix(in oklab, var(--clr-bg-card) 60%, transparent), transparent); }
.glass-2 { background-image: linear-gradient(to bottom, color-mix(in oklab, var(--clr-bg-card) 85%, transparent), color-mix(in oklab, var(--clr-bg-card) 55%, transparent)); }
.glass-3 { background-image: linear-gradient(to bottom, color-mix(in oklab, var(--brand) 5%, transparent), color-mix(in oklab, var(--brand) 2%, transparent)); }
.glass-4 { background-image: linear-gradient(to bottom, color-mix(in oklab, var(--brand) 10%, transparent), color-mix(in oklab, var(--brand) 5%, transparent)); }
.glass-5 { background-image: linear-gradient(to bottom, color-mix(in oklab, var(--brand) 16%, transparent), color-mix(in oklab, var(--brand) 6%, transparent)); }

/* ============================================================
   5. GLOW — removed
   The hero used to sit on two stacked radial ellipses in the brand
   colour, which washed the whole background orange. The background
   is flat now, so the class is gone rather than left dead in the
   sheet; .lu-dialog-glow (section 16) is a separate, much smaller
   thing and still in use.
   ============================================================ */

/* ============================================================
   6. ENTRANCE ANIMATIONS
   ============================================================ */
@keyframes lu-appear {
    0%   { opacity: 0; transform: translateY(1rem); filter: blur(0.5rem); }
    50%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes lu-appear-zoom {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
.lu-appear { opacity: 0; animation: lu-appear 0.6s ease-out forwards; }
.lu-appear-zoom { opacity: 0; animation: lu-appear-zoom 0.6s ease-out forwards; }
.lu-delay-100 { animation-delay: 0.1s; }
.lu-delay-300 { animation-delay: 0.3s; }
.lu-delay-500 { animation-delay: 0.5s; }
.lu-delay-700 { animation-delay: 0.7s; }
.lu-delay-1000 { animation-delay: 1s; }

/* ============================================================
   7. BUTTONS
   ============================================================ */
.lu-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 9px 16px;
    min-height: 36px;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
/* <button> defaults to the UA's ButtonFace grey; translucent variant
   gradients would otherwise sit on top of it. Scoped to our own
   buttons so the app's existing .btn variants keep their fills. */
.lu-btn { background-color: transparent; }

.lu-btn-lg, .btn-lg { min-height: 44px; padding: 12px 22px; font-size: 0.95rem; border-radius: var(--radius-lg); }
.lu-btn-sm, .btn-sm { min-height: 32px; padding: 7px 12px; font-size: 0.8rem; border-radius: var(--radius-sm); }

/* Primary: vertical gradient with a lit top edge. Near-white in
   dark mode, brand orange in light mode — as in Launch UI. */
.lu-btn-default,
.btn-primary,
.btn-accent {
    color: var(--lu-primary-fg);
    background-color: var(--lu-primary);
    background-image: linear-gradient(to bottom, var(--lu-primary), color-mix(in oklab, var(--lu-primary) 72%, black));
    border-top-color: color-mix(in oklab, var(--lu-primary) 55%, white);
    box-shadow: var(--shadow-sm);
}
.lu-btn-default:hover,
.btn-primary:hover,
.btn-accent:hover {
    background-image: linear-gradient(to bottom, var(--lu-primary), color-mix(in oklab, var(--lu-primary) 85%, black));
    transform: translateY(-1px);
}

/* Glow: the translucent glass button */
.lu-btn-glow {
    color: var(--clr-text);
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    background-color: color-mix(in oklab, var(--clr-bg-card) 75%, transparent);
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--brand) 10%, transparent), color-mix(in oklab, var(--brand) 5%, transparent));
    box-shadow: var(--shadow-md);
}
.lu-btn-glow:hover {
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--brand) 16%, transparent), color-mix(in oklab, var(--brand) 6%, transparent));
    transform: translateY(-1px);
}

.btn-outline, .lu-btn-outline {
    background: var(--clr-bg-card);
    border-color: var(--lu-border);
    color: var(--clr-text);
    box-shadow: var(--shadow-sm);
}
.btn-outline:hover, .lu-btn-outline:hover { background: var(--clr-surface); }

.btn-ghost, .lu-btn-ghost {
    background: transparent;
    color: var(--clr-text-secondary);
    border-color: transparent;
}
.btn-ghost:hover, .lu-btn-ghost:hover { background: var(--clr-surface); color: var(--clr-text); }

/* ============================================================
   8. BADGES
   ============================================================ */
.lu-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid var(--lu-border);
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-text);
    text-decoration: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.lu-badge:hover { border-color: color-mix(in oklab, var(--brand) 40%, var(--lu-border)); }
.lu-badge-muted { color: var(--clr-text-secondary); font-weight: 500; }
.lu-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand);
}
.lu-badge-brand {
    border-color: transparent;
    background: color-mix(in oklab, var(--brand) 20%, transparent);
    color: var(--brand);
}

/* The app's own hero badge, re-skinned as a Launch UI pill */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid var(--lu-border);
    background: transparent;
    padding: 5px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    box-shadow: none;
    text-shadow: none;
}

/* ============================================================
   9. HERO (Launch UI structure)
   ============================================================ */
.lu-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
}
.lu-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(20px, 3vw, 34px);
    padding-top: clamp(32px, 6vw, 64px);
}

.lu-hero-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-display, var(--font-body));
    font-weight: 600;
    font-size: clamp(2.4rem, 7.2vw, 5.6rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
    background-image: linear-gradient(to right, var(--clr-text), color-mix(in oklab, var(--clr-text) 55%, var(--lu-muted-fg)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25));
}
.lu-hero-title em {
    font-style: normal;
    background-image: linear-gradient(to right, var(--brand), var(--brand-foreground));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.lu-hero-desc {
    position: relative;
    z-index: 1;
    max-width: 740px;
    margin: 0;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.6;
    color: var(--clr-text-secondary);
    text-wrap: balance;
}

.lu-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.lu-hero-note {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: var(--clr-text-muted);
}

/* ---- Mockup frame ---- */
.lu-mockup-wrap {
    position: relative;
    width: 100%;
    padding-top: clamp(24px, 4vw, 48px);
}
.lu-mockup-frame {
    position: relative;
    z-index: 1;
    display: flex;
    padding: 8px;
    border-radius: var(--radius-2xl);
    background: color-mix(in oklab, var(--lu-border) 60%, transparent);
}
.lu-mockup {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    background: color-mix(in oklab, var(--clr-bg) 90%, transparent);
    box-shadow: var(--shadow-2xl);
    text-align: left;
}

/* Window chrome */
.lu-mockup-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--lu-border);
    background: color-mix(in oklab, var(--clr-bg-card) 70%, transparent);
}
.lu-mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--clr-surface); }
.lu-mockup-title {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--clr-text-muted);
}

.lu-mockup-body {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 18px;
    padding: clamp(14px, 2vw, 22px);
}
.lu-mockup-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.lu-mock-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.lu-mock-scramble {
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 1.1vw, 0.92rem);
    line-height: 1.7;
    color: var(--clr-text);
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--lu-border);
    background: color-mix(in oklab, var(--clr-bg-card) 60%, transparent);
    overflow-wrap: anywhere;
}
.lu-mock-timer {
    font-family: var(--font-mono);
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand);
    text-align: center;
    padding: 6px 0 2px;
    text-shadow: 0 0 40px color-mix(in oklab, var(--brand) 45%, transparent);
}
.lu-mock-rows { display: flex; flex-direction: column; gap: 6px; }
.lu-mock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--lu-border);
    background: color-mix(in oklab, var(--clr-bg-card) 45%, transparent);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--clr-text-secondary);
}
.lu-mock-row span:nth-child(1) { width: 14px; color: var(--clr-text-muted); }
.lu-mock-row span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-mock-row span:nth-child(3) { color: var(--clr-text); font-weight: 600; }
.lu-mock-row--you {
    border-color: color-mix(in oklab, var(--brand) 42%, transparent);
    background: color-mix(in oklab, var(--brand) 10%, transparent);
}
.lu-mock-row--you span:nth-child(2) { color: var(--brand); font-weight: 700; }

@media (max-width: 720px) {
    .lu-mockup-body { grid-template-columns: 1fr; }
}

/* ============================================================
   10. WORLD-RECORD TICKER
   ============================================================ */
.wr-marquee {
    overflow: hidden;
    border-block: var(--line-width) solid var(--lu-border);
    padding: 14px 0;
    margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.wr-track { display: flex; width: max-content; animation: wr-scroll 52s linear infinite; }
.wr-marquee:hover .wr-track { animation-play-state: paused; }
.wr-group { display: flex; flex-shrink: 0; }
.wr-item {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--clr-text-muted);
    white-space: nowrap;
    padding-right: 48px;
}
.wr-item b { color: var(--clr-text); font-weight: 600; margin-right: 7px; }
.wr-item i { font-style: normal; color: var(--clr-text-secondary); margin-left: 7px; }
.wr-item i::before { content: '— '; color: var(--clr-text-muted); }
@keyframes wr-scroll { to { transform: translateX(-50%); } }

/* ============================================================
   11. BENTO GRID (Launch UI "items" cards)
   ============================================================ */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.bento-card {
    position: relative;
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 24px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    border-bottom-color: var(--lu-border-bottom);
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--clr-bg-card) 85%, transparent), color-mix(in oklab, var(--clr-bg-card) 45%, transparent));
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s var(--ease-out-expo), border-color 0.25s ease, box-shadow 0.35s var(--ease-out-expo);
    --card-accent: var(--brand);
}
/* Launch UI is monochrome + a single brand accent — every card
   shares it, so the grid reads as one system. */
.bento-card[data-accent] { --card-accent: var(--brand); }

.bento-sim    { grid-column: span 7; grid-row: span 2; }
.bento-battle { grid-column: span 5; }
.bento-timer  { grid-column: span 5; }
.bento-algs   { grid-column: span 6; }
.bento-records{ grid-column: span 6; }
.bento-comps  { grid-column: span 12; }

.bento-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
        color-mix(in oklab, var(--card-accent) 12%, transparent), transparent 66%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--card-accent) 30%, var(--lu-border));
    box-shadow: var(--shadow-lg);
}

.bento-head { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bento-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    color: var(--card-accent);
    background: color-mix(in oklab, var(--card-accent) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--card-accent) 22%, transparent);
}
.bento-arrow {
    display: inline-flex;
    color: var(--clr-text-muted);
    opacity: 0;
    transform: translate(-5px, 5px);
    transition: opacity 0.3s ease, transform 0.35s var(--ease-out-expo), color 0.2s ease;
}
.bento-card:hover .bento-arrow { opacity: 1; transform: none; color: var(--card-accent); }

.bento-title {
    font-family: var(--font-display, var(--font-body));
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--clr-text);
    margin: 0 0 7px;
}
.bento-desc { font-size: 0.88rem; line-height: 1.6; color: var(--clr-text-secondary); margin: 0; }

.bento-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: oklch(0.66 0.21 25);
    background: oklch(0.66 0.21 25 / 0.12);
    border: 1px solid oklch(0.66 0.21 25 / 0.28);
    padding: 4px 9px;
    border-radius: 999px;
}
.bento-live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bt-pulse 1.6s ease-in-out infinite; }

.bento-visual { margin-top: auto; padding-top: 18px; width: 100%; }

.sim-visual { display: flex; flex-direction: column; gap: 7px; }
.sim-solvebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--clr-text-muted);
    border: 1px dashed var(--lu-border);
    border-radius: var(--radius-md);
    padding: 7px 12px;
    margin-bottom: 4px;
}
.sim-solvebar-label { color: var(--card-accent); white-space: nowrap; }
.sim-solvebar-scramble { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    background: color-mix(in oklab, var(--clr-bg-card) 55%, transparent);
    border: 1px solid var(--lu-border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
}
.sim-rank { color: var(--clr-text-muted); width: 12px; }
.sim-name { flex: 1; }
.sim-time { color: var(--clr-text); font-weight: 600; }
.sim-row-you {
    border-color: color-mix(in oklab, var(--card-accent) 40%, transparent);
    background: color-mix(in oklab, var(--card-accent) 9%, transparent);
}
.sim-row-you .sim-name { color: var(--card-accent); font-weight: 700; }

.battle-visual { display: flex; flex-direction: column; gap: 8px; }
.battle-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 22px;
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--clr-bg-card) 55%, transparent);
    border: 1px solid var(--lu-border);
    overflow: hidden;
}
.battle-tag { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.64rem; color: var(--clr-text-secondary); padding-left: 8px; }
.battle-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--card-accent) 32%, transparent)); }
.battle-fill-b { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--brand) 30%, transparent)); }

.timer-visual {
    font-family: var(--font-mono);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--card-accent);
    text-shadow: 0 0 28px color-mix(in oklab, var(--card-accent) 40%, transparent);
}

.algs-visual { font-family: var(--font-mono); font-size: 0.92rem; color: var(--clr-text-secondary); letter-spacing: 0.04em; }
.algs-visual span { color: var(--card-accent); }

.records-visual { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--clr-text-secondary); }
.wr-chip {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: oklch(0.21 0.006 285.885);
    background: var(--card-accent);
    border-radius: var(--radius-sm);
    padding: 3px 7px;
}

.bento-comps { padding: 20px 24px; }
.bento-comps-inner { display: flex; align-items: center; gap: 18px; width: 100%; }
.bento-comps-text { flex: 1; }
.bento-comps .bento-title { margin-bottom: 3px; }

/* Section heading above the bento grid */
.lu-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.lu-section-title {
    margin: 0;
    font-family: var(--font-display, var(--font-body));
    font-size: clamp(1.8rem, 3.6vw, 2.9rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--clr-text);
    text-wrap: balance;
}
.lu-section-desc {
    margin: 0;
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-text-secondary);
    text-wrap: balance;
}

/* ============================================================
   12. GLOBAL COMPONENT RE-SKIN
   Everything below re-points existing app components at the
   Launch UI surface + radius language.
   ============================================================ */

/* ---- Navbar ---- */
.navbar,
[data-theme="light"] .navbar {
    background: color-mix(in oklab, var(--clr-bg) 72%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--lu-border);
}
.cs-fixed-navbar {
    background: color-mix(in oklab, var(--clr-bg) 80%, transparent) !important;
    border-bottom: 1px solid var(--lu-border);
    box-shadow: none;
}
.nav-btn {
    border-radius: var(--radius-md);
    color: var(--clr-text-secondary);
    font-weight: 500;
    border: 1px solid transparent;
}
.nav-btn:hover { color: var(--clr-text); background: var(--clr-surface); border-color: transparent; }
.nav-btn.active {
    color: var(--clr-text);
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--brand) 14%, transparent), color-mix(in oklab, var(--brand) 6%, transparent));
    border-color: var(--lu-border);
    border-top-color: var(--lu-border-top);
}
.nav-btn--premium {
    color: #f5c76b;
    border-color: color-mix(in oklab, #f5c76b 20%, transparent);
    background: color-mix(in oklab, #f5c76b 7%, transparent);
}
.nav-btn--premium svg { color: #f5c76b; }
.nav-btn--premium:hover {
    color: #ffe3a1;
    background: color-mix(in oklab, #f5c76b 14%, transparent);
    border-color: color-mix(in oklab, #f5c76b 35%, transparent);
}
.theme-toggle { border-radius: var(--radius-md); color: var(--clr-text-secondary); }
.theme-toggle:hover { background: var(--clr-surface); color: var(--clr-text); border-color: transparent; }
.brand-name { letter-spacing: -0.02em; }

/* ---- Cards & panels ---- */
.setup-card,
.dash-card,
.glass-panel,
.modal-content,
.records-stat-card,
.records-table-card,
.leaderboard-card,
.alg-card,
.cs-panel,
.battle-gate-card {
    border-radius: var(--radius-xl);
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    border-bottom-color: var(--lu-border-bottom);
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--clr-bg-card) 85%, transparent), color-mix(in oklab, var(--clr-bg-card) 50%, transparent));
    box-shadow: var(--shadow-md);
}
.card-header,
.card-header-bar,
.cs-panel-header {
    border-bottom: 1px solid var(--lu-border);
    background: transparent;
}
.card-title,
.card-bar-title,
.cs-panel-title {
    font-family: var(--font-display, var(--font-body));
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--clr-text);
}
.card-icon {
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--brand) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
}

/* ---- Form controls ---- */
.form-input,
.form-select,
.cs-input,
.manual-time-input,
input[type="text"].form-input,
input[type="number"].form-input,
select.form-select {
    border-radius: var(--radius-md);
    border: 1px solid var(--lu-border);
    background: color-mix(in oklab, var(--clr-bg-card) 70%, transparent);
    color: var(--clr-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus,
.form-select:focus,
.cs-input:focus,
.manual-time-input:focus {
    outline: none;
    border-color: color-mix(in oklab, var(--brand) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 14%, transparent);
}
.form-label,
.cs-setting-row label {
    color: var(--clr-text-secondary);
    font-weight: 500;
}
.form-hint, .cs-setting-desc { color: var(--clr-text-muted); }

/* ---- Event chips ---- */
.event-chip, .battle-event-chip {
    border-radius: var(--radius-md);
    border: 1px solid var(--lu-border);
    background: color-mix(in oklab, var(--clr-bg-card) 60%, transparent);
    color: var(--clr-text-secondary);
    transition: all var(--transition-fast);
}
.event-chip:hover:not(.disabled), .battle-event-chip:hover {
    border-color: color-mix(in oklab, var(--brand) 35%, transparent);
    color: var(--clr-text);
}
.event-chip.selected, .battle-event-chip.active {
    color: #fff;
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--clr-primary) 92%, white), var(--clr-primary));
    border-color: transparent;
    border-top-color: color-mix(in oklab, var(--clr-primary) 55%, white);
}

/* ---- Tables ---- */
.records-table-enhanced th,
.leaderboard-table th,
.scorecard-table th {
    color: var(--clr-text-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.68rem;
    border-bottom: 1px solid var(--lu-border);
    background: transparent;
}
.records-table-enhanced td,
.leaderboard-table td,
.scorecard-table td { border-bottom: 1px solid var(--lu-border); }
.records-row:hover, .leaderboard-table tbody tr:hover { background: var(--clr-surface); }

/* ---- Toggles ---- */
.toggle-slider, .cs-toggle-slider {
    background: var(--clr-surface);
    border: 1px solid var(--lu-border);
}
.toggle-switch input:checked + .toggle-slider,
.cs-toggle input:checked + .cs-toggle-slider {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
}
.toggle-switch input:checked + .toggle-slider::before,
.cs-toggle input:checked + .cs-toggle-slider::before { background: #fff; }

/* ---- Toasts & modals ---- */
.toast {
    border-radius: var(--radius-lg);
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    background: color-mix(in oklab, var(--clr-bg-elevated) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
}
.modal-content { box-shadow: var(--shadow-2xl); }

/* ---- Premium plan ---- */
.premium-modal {
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 9, 16, .78);
    backdrop-filter: blur(10px);
    z-index: 1100;
}
.premium-dialog {
    position: relative;
    width: min(920px, 100%);
    max-height: min(92vh, 820px);
    overflow: auto;
    padding: 42px 42px 28px;
    border: 1px solid rgba(245, 199, 107, .28);
    border-top-color: rgba(255, 227, 161, .52);
    border-radius: 26px;
    background:
        radial-gradient(circle at 78% 0%, rgba(245, 199, 107, .12), transparent 34%),
        linear-gradient(145deg, color-mix(in oklab, var(--clr-bg-card) 96%, #17100a), var(--clr-bg-elevated));
    box-shadow: 0 26px 90px rgba(0,0,0,.45), 0 0 70px rgba(245,199,107,.08);
}
.premium-close {
    position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
    display: grid; place-items: center; border: 0; border-radius: 10px;
    color: var(--clr-text-muted); background: transparent; cursor: pointer;
}
.premium-close:hover { color: var(--clr-text); background: var(--clr-surface); }
.premium-eyebrow { color: #f5c76b; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.premium-construction-badge { display: inline-block; margin-left: 7px; padding: 3px 6px; border: 1px solid rgba(245,199,107,.32); border-radius: 5px; color: #ffe3a1; font-size: 8px; letter-spacing: .08em; vertical-align: 2px; }
.premium-star { font-size: 18px; vertical-align: -1px; margin-right: 5px; }
.premium-dialog h2 { margin: 10px 0 8px; color: var(--clr-text); font: 650 clamp(1.8rem, 4vw, 2.7rem)/1.05 var(--font-display, var(--font-body)); letter-spacing: -.045em; }
.premium-subtitle { max-width: 620px; margin: 0; color: var(--clr-text-secondary); line-height: 1.55; }
.premium-notice { display: flex; gap: 9px; align-items: center; max-width: 680px; margin: 18px 0 0; padding: 11px 13px; border: 1px solid rgba(245,199,107,.24); border-radius: 10px; color: #e8d4a5; background: rgba(245,199,107,.07); font-size: 12px; line-height: 1.45; }
.premium-billing { display: flex; gap: 4px; width: fit-content; margin: 26px auto 20px; padding: 4px; border: 1px solid var(--lu-border); border-radius: 12px; background: color-mix(in oklab, var(--clr-bg) 55%, transparent); }
.premium-billing-option { border: 0; border-radius: 8px; padding: 9px 15px; color: var(--clr-text-muted); background: transparent; cursor: pointer; font: inherit; font-size: 13px; }
.premium-billing-option.active { color: var(--clr-text); background: var(--clr-surface); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.premium-billing-option span { margin-left: 4px; color: #65d39a; font-size: 11px; font-weight: 700; }
.premium-plans { display: grid; grid-template-columns: 1fr 1.08fr; gap: 14px; align-items: stretch; }
.premium-plan { position: relative; padding: 25px; border: 1px solid var(--lu-border); border-radius: 18px; background: color-mix(in oklab, var(--clr-bg-card) 70%, transparent); }
.premium-plan--premium { border-color: rgba(245,199,107,.4); background: linear-gradient(155deg, rgba(245,199,107,.11), color-mix(in oklab, var(--clr-bg-card) 72%, transparent) 45%); }
.premium-popular { position: absolute; top: -11px; right: 20px; padding: 4px 9px; border-radius: 99px; color: #251b0c; background: #f5c76b; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.premium-plan-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.premium-plan-kicker { margin: 0 0 7px; color: var(--clr-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.premium-plan h3 { margin: 0; color: var(--clr-text); font-size: 1.45rem; letter-spacing: -.03em; }
.premium-plan-tag { color: var(--clr-text-muted); font-size: 11px; }
.premium-crown { color: #f5c76b; font-size: 25px; }
.premium-price { margin: 22px 0 5px; color: var(--clr-text); font-size: 2rem; font-weight: 750; letter-spacing: -.04em; }
.premium-price span { color: var(--clr-text-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.premium-plan-copy { min-height: 43px; margin: 0 0 18px; color: var(--clr-text-secondary); font-size: 13px; line-height: 1.5; }
.premium-feature-list { display: grid; gap: 12px; min-height: 142px; margin: 0; padding: 0; list-style: none; color: var(--clr-text-secondary); font-size: 13px; line-height: 1.35; }
.premium-feature-list span { display: inline-block; width: 20px; color: #65d39a; font-weight: 800; }
.premium-plan-button { width: 100%; margin-top: 22px; padding: 13px 16px; border-radius: 10px; cursor: pointer; font: 650 13px var(--font-body); transition: transform .15s, filter .15s; }
.premium-plan-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.premium-plan-button--secondary { border: 1px solid var(--lu-border); color: var(--clr-text-secondary); background: transparent; }
.premium-plan-button--primary { border: 0; color: #251b0c; background: linear-gradient(135deg, #ffe3a1, #eab85c); box-shadow: 0 7px 20px rgba(245,199,107,.18); }
.premium-plan-button--primary:disabled { cursor: not-allowed; opacity: .62; filter: saturate(.55); transform: none; box-shadow: none; }
.premium-plan-button--primary span { float: right; font-size: 18px; line-height: 13px; }
.premium-fine-print, .premium-footnote { color: var(--clr-text-muted); font-size: 11px; text-align: center; }
.premium-fine-print { margin: 10px 0 0; }
.premium-footnote { margin: 20px 0 0; }
@media (max-width: 680px) {
    .premium-modal { padding: 12px; }
    .premium-dialog { padding: 34px 18px 22px; border-radius: 20px; }
    .premium-plans { grid-template-columns: 1fr; }
    .premium-plan-copy, .premium-feature-list { min-height: 0; }
    .premium-plan { padding: 21px; }
}

/* ---- Timer view ---- */
.cs-scramble-bar {
    border-radius: var(--radius-xl);
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--clr-bg-card) 80%, transparent), color-mix(in oklab, var(--clr-bg-card) 45%, transparent));
}
.cs-scramble-text { word-break: normal; overflow-wrap: break-word; color: var(--clr-text); }
.cs-timer-display { letter-spacing: -0.03em; }
.cs-session-tab {
    border-radius: var(--radius-md);
    border: 1px solid var(--lu-border);
    background: color-mix(in oklab, var(--clr-bg-card) 60%, transparent);
}
.cs-session-tab.active {
    color: #fff;
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--clr-primary) 92%, white), var(--clr-primary));
    border-color: transparent;
}

/* ---- Bluetooth panel ---- */
.bt-panel {
    border-radius: var(--radius-xl);
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--clr-bg-card) 80%, transparent), color-mix(in oklab, var(--clr-bg-card) 45%, transparent));
}
#bt-connect-btn.bt-connected { border-color: var(--clr-success); color: var(--clr-success); }

/* ---- In-simulation spacebar toggle (carried over) ---- */
.dash-timer-controls { display: flex; align-items: center; gap: 12px; }
.dash-spacebar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 0.72rem;
    color: var(--clr-text-secondary);
}
.dash-spacebar-toggle-icon { font-size: 0.85rem; line-height: 1; opacity: 0.75; }
.dash-spacebar-toggle-label { font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.toggle-switch.toggle-switch-sm { width: 34px; height: 18px; }
.toggle-switch-sm .toggle-slider::before { width: 12px; height: 12px; top: 2px; left: 2px; }
.toggle-switch-sm input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ---- Legacy hero blocks (setup / stats / competitions views) ---- */
.hero-title {
    font-family: var(--font-display, var(--font-body));
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.08;
}
.gradient-text {
    background-image: linear-gradient(to right, var(--brand), var(--brand-foreground));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.hero-subtitle { color: var(--clr-text-secondary); text-wrap: balance; }

/* ============================================================
   13. 3D CUBE DECORATIONS
   Pure CSS transforms — no WebGL context, works offline.
   ============================================================ */
.cube-decor {
    position: absolute;
    pointer-events: none;
    perspective: 800px;
    z-index: 0;
    opacity: 0.55;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45));
}
[data-theme="light"] .cube-decor { opacity: 0.72; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.16)); }

.cube3d {
    position: relative;
    width: var(--cube-size, 96px);
    height: var(--cube-size, 96px);
    transform-style: preserve-3d;
    animation: cube-spin var(--cube-spin, 26s) linear infinite;
}
.cube3d-face {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5%;
    padding: 5%;
    border-radius: 11%;
    background: #0a0a0c;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cube3d-sticker { border-radius: 18%; background: var(--c, #444); }

.cube3d-face--f { transform: translateZ(calc(var(--cube-size, 96px) / 2)); }
.cube3d-face--b { transform: rotateY(180deg) translateZ(calc(var(--cube-size, 96px) / 2)); }
.cube3d-face--r { transform: rotateY(90deg)  translateZ(calc(var(--cube-size, 96px) / 2)); }
.cube3d-face--l { transform: rotateY(-90deg) translateZ(calc(var(--cube-size, 96px) / 2)); }
.cube3d-face--u { transform: rotateX(90deg)  translateZ(calc(var(--cube-size, 96px) / 2)); }
.cube3d-face--d { transform: rotateX(-90deg) translateZ(calc(var(--cube-size, 96px) / 2)); }

@keyframes cube-spin {
    from { transform: rotateX(-24deg) rotateY(0deg); }
    to   { transform: rotateX(-24deg) rotateY(360deg); }
}
@keyframes cube-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}
.cube-decor { animation: cube-float var(--cube-float, 9s) ease-in-out infinite; }

/* Hero placements — fully inside the frame, clear of the text column.
   Smaller cubes sit "further away": dimmer and slightly blurred. */
.cube-decor--a { top: 9%;  left: 3.5%;  --cube-size: 96px; --cube-spin: 30s; --cube-float: 11s; }
.cube-decor--b { top: 30%; right: 4%;   --cube-size: 74px; --cube-spin: 24s; --cube-float: 8s;  animation-delay: -3s; }
.cube-decor--c { top: 60%; left: 8%;    --cube-size: 54px; --cube-spin: 34s; --cube-float: 13s; animation-delay: -6s; opacity: 0.34; }
.cube-decor--d { top: 6%;  right: 15%;  --cube-size: 46px; --cube-spin: 21s; --cube-float: 10s; animation-delay: -1.5s; opacity: 0.3; }
.cube-decor--c .cube3d, .cube-decor--d .cube3d { filter: blur(0.6px); }

@media (max-width: 1240px) {
    .cube-decor--d { display: none; }
}
@media (max-width: 1100px) {
    .cube-decor--c { display: none; }
    .cube-decor--a { --cube-size: 70px; left: 1.5%; }
    .cube-decor--b { --cube-size: 56px; right: 1.5%; }
}
@media (max-width: 720px) {
    .cube-decor { display: none; }
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (min-width: 851px) {
    .nav-links { gap: 3px; }
    .nav-btn { font-size: 0.84rem; padding: 8px 11px; }
}
/* Icon-only until there is genuinely room for labels.
   .nav-links is fixed to the right and grows leftward, so a nav that is
   too wide runs under the brand rather than wrapping. Adding the Coach
   button took the labelled row to ~1094px, which needs ~1330px of
   viewport to clear the brand — and Portuguese labels are longer again,
   so the threshold sits at 1440px with room to spare. */
@media (min-width: 851px) and (max-width: 1439px) {
    .nav-btn { font-size: 0; gap: 0; padding: 9px; }
    #lang-toggle { font-size: 0.8rem; }
}

@media (max-width: 900px) {
    .bento-sim, .bento-battle, .bento-timer, .bento-algs, .bento-records { grid-column: span 6; }
    .bento-sim { grid-row: auto; }
}
@media (max-width: 640px) {
    .bento-sim, .bento-battle, .bento-timer, .bento-algs, .bento-records, .bento-comps { grid-column: span 12; }
    .bento-comps-inner { flex-wrap: wrap; }
}

/* ============================================================
   15. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .wr-track,
    .cube3d,
    .cube-decor,
    .bento-live-dot { animation: none; }
    .lu-appear, .lu-appear-zoom { opacity: 1; animation: none; }
    .bento-card, .lu-btn, .btn, .bento-arrow { transition: none; }
}

/* ============================================================
   16. DIALOGS / LOGIN MODAL
   ============================================================ */
.modal, .auth-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: color-mix(in oklab, var(--clr-bg) 72%, transparent);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

.lu-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    overflow-y: auto;
    padding: clamp(28px, 4vw, 40px) clamp(22px, 3.5vw, 34px) clamp(22px, 3vw, 28px);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    border-bottom-color: var(--lu-border-bottom);
    background-color: var(--clr-bg-elevated);
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--brand) 7%, transparent), transparent 45%);
    box-shadow: var(--shadow-2xl);
}
.lu-dialog:focus { outline: none; }

/* Brand glow bleeding from the top edge */
.lu-dialog-glow {
    position: absolute;
    top: 0;
    left: 50%;
    width: 70%;
    height: 180px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in oklab, var(--brand) 26%, transparent) 10%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}
[data-theme="light"] .lu-dialog-glow { opacity: 0.5; }

.lu-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--clr-text-muted);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.lu-dialog-close:hover { background: var(--clr-surface); color: var(--clr-text); }

.lu-dialog-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: var(--radius-xl);
    color: var(--clr-text);
    border: 1px solid var(--lu-border);
    border-top-color: var(--lu-border-top);
    background-image: linear-gradient(to bottom, color-mix(in oklab, var(--brand) 14%, transparent), color-mix(in oklab, var(--brand) 5%, transparent));
}

.lu-dialog-title {
    margin: 0 0 8px;
    font-family: var(--font-display, var(--font-body));
    font-size: clamp(1.35rem, 2.6vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--clr-text);
    text-wrap: balance;
}
.lu-dialog-sub {
    margin: 0 0 22px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--clr-text-secondary);
    text-wrap: balance;
}

.lu-dialog-perks {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.lu-dialog-perks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.87rem;
    line-height: 1.5;
    color: var(--clr-text-secondary);
}
.lu-perk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 999px;
    color: var(--brand);
    background: color-mix(in oklab, var(--brand) 14%, transparent);
}

.lu-dialog-cta { width: 100%; }
.lu-dialog-skip {
    width: 100%;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
}
.lu-dialog-skip:hover { color: var(--clr-text); }

/* ----- The account panel ----------------------------------------- */
.account-avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.account-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--lu-muted);
    border: 1px solid var(--clr-border);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-text-secondary);
    /* Initials, when there is no picture. Better than a stock silhouette
       of nobody, and it belongs to the person by being their letters. */
    letter-spacing: 0.02em;
    overflow: hidden;
}

.account-avatar-btn { font-size: 0.78rem; padding: 4px 10px; }

.account-name { margin-bottom: 2px; }

.account-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--clr-text-secondary);
}
.account-row strong { color: var(--clr-text); font-family: var(--font-mono, monospace); }

.account-inline-btn { font-size: 0.76rem; padding: 3px 8px; }

/* ----- Email + password sign-in, inside the login dialog ---------
   Kept visually secondary to the WCA button: that path fills in a
   real competition record, and this one exists for people who have
   no WCA account or would rather not connect it. */
.lu-auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 14px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.lu-auth-divider::before,
.lu-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--clr-border);
}

.lu-auth-form { text-align: left; }

.lu-auth-field { margin-bottom: 10px; }
.lu-auth-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
}
.lu-auth-field input {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--clr-text);
    background: var(--lu-muted);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lu-auth-field input:focus {
    outline: none;
    border-color: var(--clr-text-secondary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
}

.lu-auth-hint {
    margin: 5px 0 0;
    font-size: 0.72rem;
    color: var(--clr-text-muted);
}

.lu-auth-error {
    margin: 4px 0 10px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #ff6b6b;
}

.lu-auth-submit { width: 100%; margin-top: 4px; }

.lu-auth-toggle {
    width: 100%;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}
.lu-auth-toggle:hover { color: var(--clr-text); }

.lu-dialog-note {
    margin: 18px 0 0;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--clr-text-muted);
    text-wrap: balance;
}

@media (max-width: 480px) {
    .lu-dialog { padding: 26px 18px 20px; }
    .lu-dialog-perks li { font-size: 0.83rem; }
}

/* ============================================================
   17. RECORDS VIEW — filters, column visibility, empty state
   ------------------------------------------------------------
   The records view mirrors the WCA results page: filter by event
   and by region (world / continent / country), and choose which
   result types to show. Everything sits on the existing tokens —
   no new colours.
   ============================================================ */

.records-filters {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.records-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.records-filter-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.records-filters .form-input {
    padding: 0.5rem 0.65rem;
    font-size: 0.88rem;
    min-width: 150px;
    max-width: 210px;
}

/* Segmented chip group — same shape as .battle-filter-chip, but on the
   palette tokens instead of that component's hardcoded oranges. */
.records-chip-group {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    background: var(--clr-surface-alt, var(--clr-surface));
}

.records-filter-chip {
    padding: 0.35rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--clr-text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.records-filter-chip:hover { color: var(--clr-text); }

.records-filter-chip.active {
    background: var(--clr-primary);
    color: #fff;
    font-weight: 600;
}

.records-filter-chip:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Column visibility, driven by the type chips and the active region. */
.records-table-enhanced.hide-single .rec-th-single,
.records-table-enhanced.hide-single .rec-single,
.records-table-enhanced.hide-single .rec-th-holder-single,
.records-table-enhanced.hide-single .rec-holder-single,
.records-table-enhanced.hide-average .rec-th-average,
.records-table-enhanced.hide-average .rec-average,
.records-table-enhanced.hide-average .rec-th-holder-average,
.records-table-enhanced.hide-average .rec-holder-average,
.records-table-enhanced.hide-holders .rec-th-holder,
.records-table-enhanced.hide-holders .rec-holder {
    display: none;
}

/* Why regional rows carry no names. */
.records-holder-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.7rem var(--space-lg);
    border-bottom: 1px solid var(--clr-border);
    background: color-mix(in oklab, var(--brand) 7%, transparent);
    color: var(--clr-text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.records-holder-note svg { flex: 0 0 auto; color: var(--brand); }

.records-empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 3.25rem var(--space-lg);
    text-align: center;
}

.records-empty-icon { font-size: 2rem; line-height: 1; }

.records-empty-title {
    margin: 6px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text);
}

.records-empty-desc {
    margin: 0;
    max-width: 36ch;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--clr-text-muted);
}

/* The stat cards show "2.76 <small>3x3</small>" — keep the event
   subtitle from competing with the value. */
.records-stat-value small {
    margin-left: 5px;
    font-size: 0.72em;
    font-weight: 500;
    color: var(--clr-text-muted);
}

@media (max-width: 720px) {
    .records-filters { width: 100%; }
    .records-filters .form-input { min-width: 0; max-width: none; width: 100%; }
    .records-filter-field { flex: 1 1 150px; }
}

/* ============================================================
   18. MOBILE APP SHELL
   ------------------------------------------------------------
   Below 850px the nav is a fixed bottom tab bar (four primary
   tabs + More) and primary actions get chunky, physical press
   feedback: a solid bottom edge that compresses when tapped.
   Everything here is mobile-only — the desktop layout above the
   breakpoint is untouched.
   ============================================================ */

@media (max-width: 850px) {

    /* ---------- Bottom tab bar ---------- */

    .nav-links {
        /* Five equal tabs, no sideways scrolling. */
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        height: auto;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        overflow: visible;
        background: color-mix(in oklab, var(--clr-bg) 92%, transparent);
        backdrop-filter: blur(18px) saturate(1.3);
        -webkit-backdrop-filter: blur(18px) saturate(1.3);
        border-top: 1px solid var(--clr-border);
    }

    .nav-links .nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 52px;
        height: auto;
        padding: 7px 2px;
        border: 0;
        border-radius: 14px;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.15;
        white-space: nowrap;
        opacity: 1;
        color: var(--clr-text-muted);
        background: transparent !important;
        transition: color 0.15s ease, transform 0.12s ease;
    }

    .nav-links .nav-btn svg {
        width: 22px;
        height: 22px;
        margin: 0;
        stroke-width: 2.1;
    }

    /* Active tab: filled pill behind the icon, brand colour, bold label. */
    .nav-links .nav-btn.active {
        color: var(--clr-primary);
        border-bottom: 0;
        background: color-mix(in oklab, var(--clr-primary) 15%, transparent) !important;
    }

    .nav-links .nav-btn:active { transform: scale(0.94); }

    /* ---------- "More" bottom sheet ---------- */

    .mnav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1400;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        transition: opacity 0.22s ease;
    }
    .mnav-backdrop.open { opacity: 1; }

    .mnav-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1401;
        padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--clr-border-top, var(--clr-border));
        border-radius: 22px 22px 0 0;
        background: var(--clr-bg-elevated, var(--clr-surface));
        box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5);
        transform: translateY(100%);
        transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .mnav-sheet.open { transform: translateY(0); }

    .mnav-sheet-grip {
        width: 38px;
        height: 4px;
        margin: 2px auto 12px;
        border-radius: 999px;
        background: var(--clr-border-active, var(--clr-border));
    }

    .mnav-sheet-title {
        margin: 0 0 12px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--clr-text-muted);
    }

    .mnav-sheet-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    /* Sheet entries are the real nav buttons, moved here by mobile-nav.js. */
    .mnav-sheet-items > * {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 84px;
        padding: 12px 6px;
        border: 1px solid var(--clr-border);
        border-radius: 18px;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        color: var(--clr-text);
        background: var(--clr-surface) !important;
        cursor: pointer;
        transition: transform 0.12s ease, border-color 0.15s ease;
    }

    .mnav-sheet-items > *:active {
        transform: scale(0.96);
        border-color: var(--clr-primary);
    }

    .mnav-sheet-items > *.active {
        border-color: var(--clr-primary);
        color: var(--clr-primary);
    }

    .mnav-sheet-items svg {
        width: 24px;
        height: 24px;
        margin: 0;
        stroke-width: 2.1;
    }

    /* Small screens hide `.nav-btn span`, which would strip the language
       toggle's label inside the sheet. Tiles are always labelled here. */
    .mnav-sheet-items span,
    .mnav-item-label {
        display: inline !important;
    }

    /* ---------- Chunky press physics ----------
       The Duolingo signature: a solid bottom edge that compresses on
       press. Applied to primary actions only, not to every button. */

    .lu-btn-default,
    .btn-primary,
    #wca-login-btn,
    .records-filter-chip.active {
        border-radius: 16px;
        font-weight: 700;
        box-shadow: 0 4px 0 var(--lu-press-edge, rgba(0, 0, 0, 0.35));
        transition: transform 0.08s ease, box-shadow 0.08s ease;
    }

    .btn-primary,
    #wca-login-btn,
    .records-filter-chip.active {
        --lu-press-edge: color-mix(in oklab, var(--clr-primary) 55%, black);
    }

    .lu-btn-default {
        --lu-press-edge: color-mix(in oklab, var(--lu-primary) 62%, black);
    }

    .lu-btn-default:active,
    .btn-primary:active,
    #wca-login-btn:active,
    .records-filter-chip.active:active {
        transform: translateY(4px);
        box-shadow: 0 0 0 var(--lu-press-edge);
    }

    /* ---------- Comfortable targets ---------- */

    .btn,
    .lu-btn,
    .form-input,
    .form-select,
    select.form-input {
        min-height: 48px;
    }

    .setup-card,
    .bento-card,
    .records-table-card {
        border-radius: 20px;
    }

    /* Thicker, rounder progress and stat bars. */
    .records-stat-card { border-radius: 18px; }
    .comparison-bar-wrap,
    .progress-bar,
    .progress-track {
        height: 12px;
        border-radius: 999px;
        overflow: hidden;
    }
    .comparison-bar-fill,
    .progress-fill { border-radius: 999px; }

    /* Room for the tab bar at the end of every scrolling view. */
    body.has-mobile-tabs main,
    body.has-mobile-tabs .site-footer {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }
}

/* Once installed to the home screen, clear the notch. */
@media (display-mode: standalone) {
    .navbar,
    .cs-fixed-navbar {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mnav-sheet,
    .mnav-backdrop { transition: none; }
    .nav-links .nav-btn:active,
    .mnav-sheet-items > *:active { transform: none; }
}

/* Records / algorithms content area. These used to be a fixed-height box with
   its own overflow-y:auto, which on mobile squeezed the whole list into a tiny
   scroll viewport (and let the footer overlap the last card). They now flow in
   normal document order so the page itself grows and the body scrolls — the
   .view padding-top clears the navbar, and body.has-mobile-tabs main adds the
   bottom-bar clearance. */
.records-scroll,
.view-body {
    padding: var(--space-xl);
    padding-bottom: var(--space-2xl);
    background: var(--clr-bg);
}

/* Grid children default to min-width:auto, so a long label like "Events with
   records" stops the card shrinking and the strip overflows its container. */
.records-stat-card { min-width: 0; }
.records-stat-info { min-width: 0; }
.records-stat-value,
.records-stat-label { overflow-wrap: anywhere; }

@media (max-width: 850px) {
    .records-scroll,
    .view-body { padding: var(--space-md); padding-bottom: var(--space-xl); }

    /* Two readable cards per row rather than four cramped ones. */
    .records-stats-strip { gap: 8px; }
    .records-stat-card { padding: 12px 10px; gap: 10px; }
    .records-stat-label { font-size: 0.6rem; line-height: 1.25; }

    /* ---------- Records as stacked cards ----------
       A six-column table cannot fit a phone: the header min-widths alone add
       up to more than the card is wide, so it scrolled sideways inside its
       own box. Below 850px each row becomes a card instead — which also
       brings back the holder names, hidden outright at this width before. */

    /* max-height:180px (style.css, for the old scrolling table) would clip the
       stacked cards and drop the footer on top of them — let it grow. */
    .records-table-wrap { overflow-x: visible; max-height: none; }

    .records-table-enhanced,
    .records-table-enhanced tbody { display: block; }

    /* Column headings are gone; each cell carries its own label. */
    .records-table-enhanced thead { display: none; }

    .records-table-enhanced td {
        display: block;
        padding: 0;
        border: 0;
        background: none;
    }

    .records-table-enhanced tr.records-row {
        position: relative;
        display: grid;
        /* Two equal columns only — the expand chevron is floated top-right
           rather than owning a third track, which used to push the card ~13px
           past its own width and clip on the right. */
        grid-template-columns: 1fr 1fr;
        align-items: baseline;
        gap: 2px 12px;
        margin: 0 0 10px;
        padding: 12px 14px;
        border: 1px solid var(--clr-border);
        border-radius: 16px;
        background: var(--clr-surface);
        transition: border-color 0.15s ease, transform 0.12s ease;
    }

    .records-table-enhanced tr.records-row:active { transform: scale(0.985); }
    .records-table-enhanced tr.records-row.active { border-color: var(--clr-primary); }

    /* Explicit placement, so hiding a cell collapses its slot instead of
       reshuffling the card. */
    .records-table-enhanced .rec-event {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 6px;
        padding-right: 22px; /* clear the floated chevron */
        font-size: 1rem;
        font-weight: 700;
    }
    .records-table-enhanced .rec-expand-icon {
        position: absolute;
        top: 12px;
        right: 14px;
        display: flex;
        align-items: center;
        color: var(--clr-text-muted);
    }
    .records-table-enhanced .rec-single       { grid-column: 1; grid-row: 2; }
    .records-table-enhanced .rec-holder-single{ grid-column: 1; grid-row: 3; }
    .records-table-enhanced .rec-average      { grid-column: 2; grid-row: 2; }
    .records-table-enhanced .rec-holder-average { grid-column: 2; grid-row: 3; }

    /* With one type hidden the survivor takes the full width rather than
       leaving the card half empty. */
    .records-table-enhanced.hide-single .rec-average,
    .records-table-enhanced.hide-single .rec-holder-average,
    .records-table-enhanced.hide-average .rec-single,
    .records-table-enhanced.hide-average .rec-holder-single { grid-column: 1 / -1; }

    .records-table-enhanced .rec-time {
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.2;
    }

    /* WR / CR / NR Single | Average, written by renderRecordsTable(). */
    .records-table-enhanced .rec-time::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 1px;
        font-family: var(--font-sans, inherit);
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--clr-text-muted);
    }

    /* Holder names are worth the space here; the hide-holders state (used for
       regional records, which the WCA API publishes without names) still wins
       because it is the more specific selector. */
    .records-table-enhanced .rec-holder {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        color: var(--clr-text-muted);
        overflow-wrap: anywhere;
    }
    .records-table-enhanced .rec-holder img.country-flag { width: 15px; }

    /* The expanded detail panel spans the whole card. */
    .records-table-enhanced tr.record-detail-row { display: block; }
    .records-table-enhanced tr.record-detail-row > td { display: block; }

    /* Stack the filter bar instead of squeezing it beside the title. */
    .records-filters { width: 100%; }
    .records-chip-group { width: 100%; justify-content: space-between; }
    .records-filter-chip { flex: 1; text-align: center; }
}

/* ============================================================
   19. THEME PICKER
   ------------------------------------------------------------
   Anchored under the theme button on desktop; a bottom sheet on
   phones, matching the More sheet.
   ============================================================ */

.theme-pop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.theme-pop-backdrop.open { opacity: 1; }

.theme-pop {
    position: fixed;
    z-index: 1501;
    width: 244px;
    padding: 14px;
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    background: var(--clr-bg-elevated, var(--clr-surface));
    box-shadow: var(--shadow-2xl);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.18s ease, transform 0.18s var(--ease-out-expo);
}
.theme-pop.open { opacity: 1; transform: translateY(0) scale(1); }

.theme-pop-title {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--clr-text);
}

.theme-pop-label {
    display: block;
    margin: 12px 0 6px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.theme-pop-label:first-of-type { margin-top: 0; }

.theme-mode-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.theme-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border: 1px solid var(--clr-border);
    border-radius: 11px;
    background: var(--clr-surface);
    color: var(--clr-text-secondary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-mode-btn:hover { color: var(--clr-text); border-color: var(--clr-border-active); }
.theme-mode-btn.active {
    border-color: var(--clr-primary);
    color: var(--clr-text);
    background: color-mix(in oklab, var(--clr-primary) 14%, transparent);
}

.theme-accent-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.theme-accent-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--clr-border);
    border-radius: 11px;
    background: var(--clr-surface);
    color: var(--clr-text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-accent-btn:hover { color: var(--clr-text); border-color: var(--clr-border-active); }
.theme-accent-btn.active { border-color: var(--clr-primary); color: var(--clr-text); }

.theme-swatch {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.theme-mode-btn:focus-visible,
.theme-accent-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (max-width: 850px) {
    .theme-pop {
        top: auto !important;
        left: 0 !important;
        right: 0;
        bottom: 0;
        width: auto;
        padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
        transform-origin: bottom center;
        transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease;
    }
    .theme-pop.open { transform: translateY(0); }
    .theme-accent-group { grid-template-columns: repeat(2, 1fr); }
    .theme-mode-btn, .theme-accent-btn { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-pop, .theme-pop-backdrop { transition: none; }
}

/* ============================================================
   20. ALGORITHM CARDS
   ------------------------------------------------------------
   The cards were 343px tall on a 280px track, so a 1440px screen
   showed 4 columns and barely two rows of a 57-case set. Tighter
   padding, a smaller preview and a narrower track roughly double
   what fits on screen without shrinking the algorithm text, which
   is the part people actually read.
   ============================================================ */

/* Deliberately not .setup-grid: that class forces a single column below
   850px with !important, which would undo the whole point here. */
.alg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-sm);
    align-content: start;
}

.alg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0.75rem 0.9rem;
    text-align: center;
}

/* Square, so the twisty player (width/height 100%) stays undistorted. */
.alg-card-viz {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 104px;
    aspect-ratio: 1;
    margin-bottom: 0.5rem;
}

.alg-card-name {
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.2;
    color: var(--clr-text);
}

.alg-card-alg {
    display: block;
    width: 100%;
    padding: 0.4rem 0.45rem;
    border-radius: var(--radius-sm);
    background: rgba(127, 127, 127, 0.08);
    color: var(--clr-primary);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.45;
    letter-spacing: 0.3px;
    overflow-wrap: anywhere;
}

/* ZBLL / subgroup set selector — a wrapping chip row (SpeedCubeDB style). */
.alg-subgroup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}
.alg-group-chip {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    background: var(--clr-surface);
    color: var(--clr-text-secondary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.alg-group-chip:hover { color: var(--clr-text); border-color: var(--clr-border-active); }
.alg-group-chip.active {
    background: var(--clr-primary);
    color: #fff;
    border-color: transparent;
}
.alg-group-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.alg-card .alg-copy-btn {
    margin-top: 0.45rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.7rem;
}

/* The copy button is only needed once you have picked a case; keeping it
   visible on hover/focus alone buys every card ~30px of height. */
@media (hover: hover) and (min-width: 851px) {
    .alg-card .alg-copy-btn {
        opacity: 0;
        transition: opacity 0.15s ease;
    }
    .alg-card:hover .alg-copy-btn,
    .alg-card:focus-within .alg-copy-btn { opacity: 1; }
}

@media (max-width: 850px) {
    /* 132px, not 150: two tracks plus the gap have to clear ~300px of usable
       width on a 390px phone, or auto-fill drops back to a single column. */
    .alg-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .alg-card { padding: 0.7rem 0.55rem 0.75rem; }
    .alg-card-viz { max-width: 84px; }
    .alg-card-name { font-size: 0.85rem; }
    .alg-card-alg { font-size: 0.7rem; }
}

/* ============================================================
   21. SMART-CUBE SOLVE BREAKDOWN
   ------------------------------------------------------------
   CFOP reconstruction shown after a Bluetooth solve: phase times,
   the moves used, and a quality badge per segment.
   ============================================================ */

.bt-analysis {
    width: 100%;
    max-width: 640px;
    margin: var(--space-md) auto 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    background: var(--clr-bg-card, var(--clr-surface));
    text-align: left;
}

.bt-an-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.bt-an-total {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--clr-text-secondary);
}

.bt-an-phase {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 4px;
}
.bt-an-phase:first-of-type { margin-top: 0; }
.bt-an-phase-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--clr-text);
}
.bt-an-phase-time {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--clr-text-muted);
}

.bt-an-row { margin: 8px 0 0; }
.bt-an-row-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.bt-an-slot {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--clr-text-secondary);
}

.bt-an-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}
.bt-an-optimal { background: var(--clr-success, #22c55e); }
.bt-an-fumble  { background: var(--clr-warning, #f59e0b); color: #1a1a1a; }
.bt-an-blunder { background: var(--clr-danger, #ef4444); }

.bt-an-meta {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--clr-text-muted);
}

.bt-an-moves {
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--clr-text);
    overflow-wrap: anywhere;
}
.bt-an-moves-lead { margin-bottom: 2px; }

.bt-an-note {
    margin-top: 12px;
    font-size: 0.76rem;
    color: var(--clr-text-muted);
}

@media (max-width: 850px) {
    .bt-analysis { padding: 12px; border-radius: 14px; }
    .bt-an-phase-name { font-size: 0.95rem; }
    .bt-an-moves { font-size: 0.76rem; }
    .bt-an-meta { margin-left: 0; width: 100%; }
}

/* ============================================================
   AI Coach positioning on the homepage
   ------------------------------------------------------------
   The journey strip under the hero, and the one-line role each
   existing feature plays now that the Coach is the product.
   ============================================================ */

.lu-journey {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 26px auto 0;
    padding: 0;
    list-style: none;
    max-width: 720px;
}

.lu-journey li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--clr-text-secondary);
    white-space: nowrap;
}

.lu-journey-num {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clr-primary-glow);
    color: var(--clr-primary-hover);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
}

.lu-journey-arrow {
    color: var(--clr-text-muted);
    font-size: 14px;
}

/* The role each tool plays in the coaching loop. Sits above the card
   title as a quiet eyebrow so it frames rather than competes. */
.bento-role {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: 4px;
}

/* Give the Coach the strongest presence in the nav — it is the
   product now, not one tool among nine. */
.nav-btn--coach {
    color: var(--clr-text);
    font-weight: 650;
}
.nav-btn--coach svg { color: var(--clr-primary); }
.nav-btn--coach.active svg { color: currentColor; }

@media (max-width: 640px) {
    .lu-journey { gap: 6px 10px; margin-top: 20px; }
    .lu-journey li { font-size: 12.5px; }
    /* Arrows wrap badly at this width and carry no information the
       numbered order doesn't already give. */
    .lu-journey-arrow { display: none; }
}

/* ============================================================
   Home ad slot
   ------------------------------------------------------------
   min-height reserves the space before the ad arrives. Without it
   an async ad drops in and shoves the page down under whoever is
   already reading the guide links above it — the layout shift that
   Core Web Vitals measures and readers resent long before it did.
   ============================================================ */
.home-ad {
    display: block;
    max-width: 1100px;
    margin: 48px auto 8px;
    padding: 0 24px;
    min-height: 140px;
}

.home-ad-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    opacity: .65;
}

@media (max-width: 700px) {
    .home-ad { margin-top: 32px; padding: 0 16px; }
}