/* ===================================================
   LUMICHESS PUZZLES — Premium Dark UI
   Warm dark tones. Refined typography.
   =================================================== */


/* Nav is now in nav.css — removed duplicate */

/* ============================================
   PUZZLE HUB — Clear Hierarchy + Progress
   ============================================ */

.puzzle-hub {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100dvh;
    min-height: 100vh; /* fallback */
    padding: 16px 40px 24px;
    box-sizing: border-box;
    background: var(--lumi-bg-body);
    overflow-y: auto;
}

.puzzle-hub__inner {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
}

/* Page heading — visible only on mobile (sidebar has its own hierarchy on desktop) */
.puzzle-hub__heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
@media (min-width: 900px) {
    .puzzle-hub__heading { display: none; }
}

/* Sidebar column — stacks stats, modes, themes */
.puzzle-hub__sidebar {
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════
   DAILY HERO — Primary CTA zone
   ═══════════════════════════════════════════ */

.daily-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: var(--lumi-space-3);
}

/* Top label row: date + "Daily Puzzle" badge */
.daily-hero__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--lumi-space-3);
}

.daily-hero__date {
    font-size: 11px;
    font-weight: 600;
    color: var(--lumi-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

.daily-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--lumi-amber-300);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(212,164,75,0.06);
    border: 1px solid rgba(212,164,75,0.1);
}

.daily-hero__badge--solved {
    color: var(--lumi-success);
    background: rgba(93,182,125,0.08);
    border-color: rgba(93,182,125,0.15);
}

/* Board link wrapper — contains board + hover overlay */
.daily-hero__board-link {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 6px;
    overflow: hidden;
    width: min(100%, calc(100vh - 400px));
    max-width: 440px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.25),
        0 8px 24px rgba(0,0,0,0.3),
        0 24px 64px rgba(0,0,0,0.15);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.daily-hero__board-link:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(212,164,75,0.12),
        0 12px 32px rgba(0,0,0,0.35),
        0 32px 80px rgba(0,0,0,0.2),
        0 0 60px rgba(212,164,75,0.08);
}

/* The board grid */
.daily-hero__board {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

/* Board squares — warm wood tones */
.daily-hero__board .sq {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.daily-hero__board .sq--light {
    background: linear-gradient(135deg, #F7EAD0, #F0DFBC);
}
.daily-hero__board .sq--dark {
    background: linear-gradient(135deg, #B08550, #9A7142);
}

/* Pieces */
.daily-hero__board .sq img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.daily-hero__board.loaded .sq img {
    opacity: 1;
}

/* Hover overlay — "Solve Puzzle" CTA */
.daily-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.daily-hero__board-link:hover .daily-hero__overlay {
    opacity: 1;
}

.daily-hero__overlay-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 8px;
    background: var(--lumi-amber-400);
    color: #1a1918;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 16px rgba(212,164,75,0.3);
    transform: translateY(4px);
    transition: transform 0.2s ease;
}

.daily-hero__board-link:hover .daily-hero__overlay-text {
    transform: translateY(0);
}

/* Footer row beneath board: turn + rating */
.daily-hero__footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--lumi-space-3);
}

.daily-hero__turn {
    font-size: 15px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    letter-spacing: -0.01em;
}

.daily-hero__rating {
    font-size: 13px;
    font-weight: 700;
    color: var(--lumi-text-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Persistent CTA button — always visible */
.daily-hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 24px;
    margin-top: 12px;
    border-radius: 8px;
    background: var(--lumi-amber-400);
    color: #1a1918;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(212,164,75,0.15);
}

.daily-hero__cta:hover {
    background: var(--lumi-amber-300);
    box-shadow: 0 4px 16px rgba(212,164,75,0.25);
}

.daily-hero__cta:active {
    transform: scale(0.98);
    transition-duration: 60ms;
}

.daily-hero__cta--solved {
    background: rgba(93,182,125,0.18);
    color: var(--lumi-success);
    border: 1px solid rgba(93,182,125,0.25);
    box-shadow: none;
}

.daily-hero__cta--solved:hover {
    background: rgba(93,182,125,0.25);
    border-color: rgba(93,182,125,0.35);
    box-shadow: none;
}

/* Streak badge — inline in label row */
.daily-hero__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.daily-hero__streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--lumi-amber-300);
    letter-spacing: 0.01em;
    background: rgba(212,164,75,0.06);
    padding: 3px 8px;
    border-radius: 10px;
}

/* Solved badge — top-right corner */
.daily-hero__solved {
    position: absolute;
    top: 35px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(30, 65, 42, 0.92);
    border: 1px solid rgba(93,182,125,0.35);
    color: var(--lumi-success);
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    animation: badgeFadeIn 0.3s ease-out;
}

@keyframes badgeFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Solved state — overlay */
.daily-hero.is-solved .daily-hero__overlay-text {
    background: rgba(93,182,125,0.2);
    color: var(--lumi-success);
    box-shadow: 0 4px 16px rgba(93,182,125,0.15);
}

/* Solved state — board shadow */
.daily-hero.is-solved .daily-hero__board-link {
    box-shadow:
        0 0 0 1px rgba(93,182,125,0.2),
        0 8px 24px rgba(0,0,0,0.3),
        0 24px 64px rgba(0,0,0,0.15);
}

/* ═══════════════════════════════════════════
   DAILY CTA — Primary action button
   ═══════════════════════════════════════════ */

.daily-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--lumi-amber-400);
    color: #1a1918;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(212,164,75,0.15);
    transition: background 0.15s ease-out, box-shadow 0.15s ease-out;
}

.daily-cta:hover {
    background: var(--lumi-amber-300);
    box-shadow: 0 2px 10px rgba(212,164,75,0.25);
}

.daily-cta:active {
    transform: scale(0.96);
    transition-duration: 80ms;
}

.daily-cta__icon {
    opacity: 0.6;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.daily-cta:hover .daily-cta__icon {
    transform: translateX(2px);
    opacity: 1;
}

/* Solved state */
.daily-cta--solved {
    background: rgba(93,182,125,0.15);
    color: var(--lumi-success);
    border: 1px solid rgba(93,182,125,0.2);
    box-shadow: none;
}

.daily-cta--solved:hover {
    background: rgba(93,182,125,0.22);
    border-color: rgba(93,182,125,0.3);
}

/* ═══════════════════════════════════════════
   PROGRESS STATS — Rating, Solved, Accuracy
   ═══════════════════════════════════════════ */

/* SEO intro (replaces the personal stats row on the hub) */
.puzzle-intro {
    padding: 2px 2px 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--lumi-border);
}
.puzzle-intro__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 7px;
}
.puzzle-intro__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--lumi-text-muted);
    margin: 0;
}

.puzzle-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 0;
    margin-bottom: 16px;
    border-top: 1px solid var(--lumi-border);
    border-bottom: 1px solid var(--lumi-border);
}

.puzzle-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.puzzle-stat__value {
    font-size: 22px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.puzzle-stat__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--lumi-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.puzzle-stat__divider {
    width: 1px;
    height: 28px;
    background: var(--lumi-border);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   SECTION LABELS — Visual hierarchy anchors
   ═══════════════════════════════════════════ */

.puzzle-section {
    width: 100%;
    margin-bottom: var(--lumi-space-4);
}

.puzzle-section__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--lumi-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
}

/* ═══════════════════════════════════════════
   MODE CARDS — Secondary navigation
   ═══════════════════════════════════════════ */

.puzzle-modes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.mode-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    border-radius: 10px;
    padding: 14px 18px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, filter 0.15s ease-out;
}

.mode-card--training {
    background: linear-gradient(135deg, rgba(93,182,125,0.15), rgba(93,182,125,0.08));
    border: 1px solid rgba(93,182,125,0.18);
}
.mode-card--storm {
    background: linear-gradient(135deg, rgba(107,159,212,0.15), rgba(107,159,212,0.08));
    border: 1px solid rgba(107,159,212,0.18);
}
.mode-card--mistakes {
    background: linear-gradient(135deg, rgba(207,110,110,0.15), rgba(207,110,110,0.08));
    border: 1px solid rgba(207,110,110,0.18);
}
.mode-card--woodpecker {
    background: linear-gradient(135deg, rgba(212,164,75,0.15), rgba(212,164,75,0.08));
    border: 1px solid rgba(212,164,75,0.18);
}

.mode-card:hover {
    transform: translateY(-3px);
    filter: brightness(1.15);
}
.mode-card--training:hover  { box-shadow: 0 6px 20px rgba(93,182,125,0.15); }
.mode-card--storm:hover     { box-shadow: 0 6px 20px rgba(107,159,212,0.15); }
.mode-card--mistakes:hover  { box-shadow: 0 6px 20px rgba(207,110,110,0.15); }
.mode-card--woodpecker:hover { box-shadow: 0 6px 20px rgba(212,164,75,0.15); }

.mode-card:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 80ms;
}

/* Icon */
.mode-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mode-card__icon--green { background: rgba(93,182,125,0.12);  color: var(--lumi-success); }
.mode-card__icon--amber { background: rgba(212,164,75,0.12);  color: var(--lumi-amber-300); }
.mode-card__icon--blue  { background: rgba(107,159,212,0.12); color: var(--lumi-info); }
.mode-card__icon--red   { background: rgba(207,110,110,0.12); color: var(--lumi-error); }

/* Woodpecker mark drills the trunk on hover (static otherwise — no idle motion) */
.mode-card--woodpecker:hover .wp-peck { animation: wp-peck 1.8s ease-in-out infinite; }
@keyframes wp-peck {
    0%, 36%, 72%, 100% { transform: translateX(-1px); }
    42% { transform: translateX(2px); }
    48% { transform: translateX(-1px); }
    54% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
}
@media (prefers-reduced-motion: reduce) { .mode-card--woodpecker:hover .wp-peck { animation: none; } }

/* Body — title + subtitle stacked */
.mode-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Title */
.mode-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--lumi-text-primary);
}

/* Subtitle */
.mode-card__sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--lumi-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* CTA pill — the focal action */
.mode-card__cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    color: #1a1918;
    transition: filter 0.15s ease-out, transform 0.15s ease-out;
}

.mode-card__cta--green { background: var(--lumi-success); }
.mode-card__cta--blue  { background: var(--lumi-info); }
.mode-card__cta--red   { background: var(--lumi-error); }
.mode-card__cta--amber { background: var(--lumi-amber-400); }

.mode-card:hover .mode-card__cta {
    filter: brightness(1.15);
    transform: translateX(2px);
}

/* ═══════════════════════════════════════════
   THEME CHIPS — Subtle, functional
   ═══════════════════════════════════════════ */

.puzzle-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    position: relative;   /* anchor for the Custom popover */
}

.theme-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    min-height: 44px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    color: var(--lumi-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-family: inherit;
}

.theme-chip:hover {
    border-color: rgba(93,182,125,0.2);
    color: var(--lumi-success);
    background: rgba(93,182,125,0.04);
}

.theme-chip--more {
    color: var(--lumi-text-secondary);
}

/* Custom builder — replaces the hub sidebar content (intro · modes · themes) in
   place when Custom is clicked, filling the same column. Toggled by the
   .puzzle-hub__sidebar--custom class. */
.puzzle-hub__sidebar--custom > .puzzle-intro,
.puzzle-hub__sidebar--custom > .puzzle-section { display: none; }
.puzzle-custom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 14px;
}
.puzzle-custom[hidden] { display: none; }
.puzzle-custom__head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.puzzle-custom__back {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border: 1px solid var(--lumi-border);
    border-radius: 9px; color: var(--lumi-text-secondary); cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.puzzle-custom__back:hover { color: var(--lumi-text-primary); border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); }
.puzzle-custom__title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--lumi-text-primary); }
.puzzle-custom__field { display: flex; flex-direction: column; gap: 9px; flex: 0 0 auto; }
.puzzle-custom__label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--lumi-text-dim, rgba(255,255,255,0.45));
}
/* Rating range = From – To (two custom dropdowns, Chess.com-style). */
.puzzle-custom__rating { display: flex; align-items: center; gap: 10px; }
.puzzle-custom__rating .lumi-dd { flex: 1 1 0; }
.puzzle-custom__rating-dash { flex: 0 0 auto; color: var(--lumi-text-dim, rgba(255,255,255,0.4)); font-weight: 600; }

/* Motif checklist — multi-select, searchable, scrollable; fills the column. */
.puzzle-custom__motifs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.puzzle-custom__motifs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.puzzle-custom__search {
    width: 130px; height: 30px; padding: 0 10px; box-sizing: border-box;
    background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; color: var(--lumi-text-primary); font-size: 12px; font-family: inherit;
}
.puzzle-custom__search:focus-visible { outline: none; border-color: var(--lumi-amber-300); }
.puzzle-custom__list {
    flex: 1 1 auto; min-height: 80px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.puzzle-custom__list::-webkit-scrollbar { width: 8px; }
.puzzle-custom__list::-webkit-scrollbar-track { background: transparent; }
.puzzle-custom__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
.puzzle-custom__list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }
/* Custom checkbox row (no native checkbox — see [[feedback_custom-dropdowns]] spirit) */
.pz-check {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 9px 10px; box-sizing: border-box;
    background: transparent; border: none; border-radius: 8px;
    color: var(--lumi-text-secondary); font-size: 13px; font-family: inherit;
    text-align: left; cursor: pointer;
}
.pz-check[hidden] { display: none; }
.pz-check:hover { background: rgba(255,255,255,0.05); color: var(--lumi-text-primary); }
.pz-check__mark {
    flex: 0 0 auto; width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.25); border-radius: 5px;
    color: transparent; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pz-check__box { width: 13px; height: 13px; }
.pz-check.is-checked { color: var(--lumi-text-primary); }
.pz-check.is-checked .pz-check__mark { background: var(--lumi-amber-300); border-color: var(--lumi-amber-300); color: #1a1a17; }
.pz-check--all { font-weight: 700; }

/* Solid amber primary CTA — proper weight, not the translucent accent-btn. */
.puzzle-custom__start {
    flex: 0 0 auto;
    width: 100%; height: 50px;
    border: none; border-radius: 11px;
    background: linear-gradient(180deg, #E7BC63 0%, #D4A44B 100%);
    color: #1a1a17;
    font-size: 15px; font-weight: 800; font-family: inherit;
    letter-spacing: 0.01em; cursor: pointer;
    box-shadow: 0 6px 18px rgba(212,164,75,0.28);
    transition: filter 0.15s, transform 0.05s;
}
.puzzle-custom__start:hover { filter: brightness(1.06); }
.puzzle-custom__start:active { transform: scale(0.985); }

/* Rating slider scale ticks */
.lumi-range__ticks { position: relative; height: 14px; margin: 8px 11px 0; }
.lumi-range__tick {
    position: absolute; transform: translateX(-50%);
    font-size: 10px; font-weight: 600; color: var(--lumi-text-dim, rgba(255,255,255,0.4));
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ═══════════════════════════════════════════
   TOUCH DEVICES — persistent CTA overlay
   ═══════════════════════════════════════════ */

@media (hover: none) {
    .daily-hero__overlay {
        opacity: 1;
        background: rgba(0,0,0,0.35);
    }
    .daily-hero__overlay-text {
        transform: translateY(0);
    }
    .mode-card__arrow {
        opacity: 0.3;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════
   FIRST-TIME USER — welcome state
   ═══════════════════════════════════════════ */

.puzzle-stats--empty {
    border-top: none;
    border-bottom: 1px solid var(--lumi-border);
    padding: 16px 0;
    text-align: center;
}

.puzzle-stats__welcome {
    font-size: 14px;
    font-weight: 500;
    color: var(--lumi-text-secondary);
    line-height: 1.5;
}

.puzzle-stats__welcome strong {
    color: var(--lumi-text-primary);
    font-weight: 600;
}

/* ========================================
   STORM MODE SELECTION
   ======================================== */

.storm-mode-screen {
    background: var(--lumi-bg-surface);
}
.storm-mode-body {
    gap: 12px;
}
.storm-mode-coach {
    padding: 14px 0 2px;
}
.storm-mode-options {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.storm-mode-option {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.storm-mode-option:hover {
    border-color: var(--lumi-border-hover);
    background: #222220;
    transform: translateY(-1px);
}
.storm-mode-option.selected {
    border-color: var(--color-orange-200);
    background: rgba(212,164,75,0.07);
}
.storm-mode-option input { display: none; }
.mode-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(212,164,75,0.08);
    color: var(--color-orange-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.storm-mode-option.selected .mode-option-icon {
    background: rgba(212,164,75,0.16);
}
.mode-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.mode-option-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--lumi-text-primary, #fff);
    line-height: 1.15;
}
.mode-option-desc {
    font-size: 12.5px;
    color: var(--lumi-text-secondary, #9a9486);
    line-height: 1.2;
}
.mode-option-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, #E7BC63, #D4A44B);
    color: #1a1a17;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.18s, transform 0.18s var(--lumi-spring, ease);
}
.storm-mode-option.selected .mode-option-check {
    opacity: 1;
    transform: scale(1);
}
/* #storm-start-btn uses the canonical .puzzle-btn.accent-btn colours; the only
   per-id styling is layout — a centred, comfortable pill pinned to the bottom
   (margin-top:auto pushes it down; coach + options sit at the top). */
#storm-start-btn {
    align-self: center;
    width: auto;
    min-height: 44px;
    padding: 0 52px;
    margin-top: auto;
}

/* ========================================
   TWO-COLUMN LAYOUT (Training + Storm)
   ======================================== */

.puzzle-view {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* board + sidebar hug the left, no wasted centering */
    gap: 12px;
    height: 100vh;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: var(--lumi-bg-surface);
}
.view-layout {
    display: flex;
    align-items: stretch;          /* board + right box share ONE height */
    justify-content: center;       /* centre the board + sidebar group horizontally */
    gap: 12px;
    width: 100%;
    min-width: 0;
    /* The group is exactly as tall as the largest square board that fits the
       viewport height (24px margins) AND the width left after nav + sidebar.
       586px chrome = nav 186 + padding 48 + gap 12 + sidebar 340. Both the
       board (square) and the right box stretch to this single height. The cap is
       generous so the board fills the viewport height instead of leaving dead space
       above/below; width (100vw-586) keeps it from overflowing on wide-short screens. */
    height: min(calc(100vh - 48px), calc(100vw - 586px), 920px);
    max-height: calc(100vh - 48px);
    align-self: center;            /* group centered vertically in the view */
}

/* Board column hugs the board (not flex:1) so the sidebar sits right beside it. */
.board-col {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.board-frame {
    /* Square driven by the shared group height (.view-layout), so the board and
       the right box are always exactly the same height. */
    height: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    position: relative;
    background: var(--lumi-board-dark, #A67B4B);
}
/* Loading spinner shown until the board renders over it (board squares are
   opaque, so they cover this once the puzzle position is set). Prevents the
   blank-board flash during the first puzzle/chunk load. */
.board-frame::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: var(--lumi-accent);
    border-radius: 50%;
    animation: board-frame-spin 0.8s linear infinite;
    z-index: 0;
}
@keyframes board-frame-spin {
    to { transform: rotate(360deg); }
}
.board-frame > div {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.board-frame canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Turn indicator — board frame glow */
.board-frame.playing-white {
    box-shadow: 0 0 0 3px rgba(230,230,220,0.5), 0 4px 24px rgba(0,0,0,0.5);
}
.board-frame.playing-black {
    box-shadow: 0 0 0 3px rgba(40,40,35,0.8), 0 4px 24px rgba(0,0,0,0.5);
}

/* Sidebar column */
/* Canonical right box — one definition for every puzzle mode. Same warm panel
   color as Profile Report cards (--lumi-bg-nav), height stretches to match the
   board via .view-layout's align-items:stretch. */
.sidebar-col {
    width: 340px;
    flex-shrink: 0;
    height: 100%;                  /* = board height */
    box-sizing: border-box;        /* borders sit inside, so 340×H matches the board exactly */
    background: var(--lumi-bg-nav);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Sidebar header */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lumi-border);
    flex-shrink: 0;
}
.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--lumi-border);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.back-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.sidebar-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.sidebar-title__icon { width: 20px; height: 20px; flex: 0 0 auto; }
/* Balance the 32px back-btn on the left with an equal spacer on the right so
   the title sits at the true centre of the header (not pushed right). */
.sidebar-header::after { content: ''; width: 32px; flex: 0 0 auto; }
.session-badge {
    font-size: 12px;
    color: #fff;
    background: rgba(255,255,255,0.04);
    padding: 3px 10px;
    border-radius: 12px;
    font-variant-numeric: tabular-nums;
}

/* Sidebar body — puzzle actions area */
.sidebar-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 20px;
    gap: 16px;
}

/* ===== PUZZLE PROMPT & FEEDBACK ===== */

.puzzle-feedback {
    text-align: center;
}
.puzzle-prompt {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: promptFade 200ms ease-out;
}
.puzzle-prompt.secondary { color: #fff; font-size: 14px; }
.puzzle-prompt.correct { color: var(--color-green-300); font-weight: 600; }
.puzzle-prompt.wrong { color: var(--color-red-300); font-weight: 600; }

@keyframes promptFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Color dots */
.color-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    vertical-align: middle;
}
.color-dot.white { background: #e8e8e8; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); }
.color-dot.black { background: #2a2a2a; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }

/* Spinner */
.prompt-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.08);
    border-top-color: rgba(255,255,255,0.4);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes resultIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ===== BUTTONS ===== */
.puzzle-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Post-solve nav (Previous · Next) — equal-width row that fills the panel */
.pz-body--center .puzzle-controls { width: 100%; }
.puzzle-controls--review { flex-wrap: nowrap; }
.puzzle-controls--review .puzzle-btn { flex: 1 1 0; min-width: 0; padding: 0 10px; }
.puzzle-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* ── Button system (one deliberate standard for every puzzle mode) ──
   Base: 40px tall, icon+label always centered, consistent gap/weight/radius.
   Variants below set ONLY colour (primary/ghost/danger/accent). No one-offs. */
.puzzle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;      /* icon + label always centered */
    gap: 8px;
    min-height: 40px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    padding: 0 18px;
    cursor: pointer;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
    line-height: 1;
}
.puzzle-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Full-width when it's the sole/primary action in a column */
.puzzle-btn--block { width: 100%; }
.puzzle-btn:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.14);
    color: #fff;
}
.puzzle-btn:active { transform: scale(0.97); }

.primary-btn {
    background: rgba(93,182,125,0.12);
    border-color: rgba(93,182,125,0.2);
    color: var(--color-green-300);
    font-weight: 600;
}
.primary-btn:hover {
    background: rgba(93,182,125,0.2);
    border-color: rgba(93,182,125,0.35);
    color: #a4d65e;
}

.ghost-btn {
    background: transparent;
    border-color: transparent;
    color: var(--lumi-text-secondary, #E8E4E0);
}
.ghost-btn:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

/* Amber accent — the main CTA (Play, primary actions). Solid amber gradient
   with dark text, matching every other primary button in the app
   (.puzzle-custom__start, .pz-next-btn.is-primary, .daily-cta, …). */
.accent-btn {
    background: linear-gradient(180deg, #E7BC63 0%, #D4A44B 100%);
    border-color: transparent;
    color: #1a1a17;
    font-weight: 700;
}
/* Re-assert the amber fill on hover so the generic .puzzle-btn:hover can't
   grey it out; hover = a slight brighten, not a colour change. */
.accent-btn:hover {
    background: linear-gradient(180deg, #E7BC63 0%, #D4A44B 100%);
    border-color: transparent;
    color: #1a1a17;
    filter: brightness(1.05);
}

/* Danger — quit / destructive */
.danger-btn {
    background: transparent;
    border-color: transparent;
    color: var(--lumi-text-muted, #C9C3B8);
}
.danger-btn:hover {
    background: rgba(207,110,110,0.12);
    border-color: rgba(207,110,110,0.25);
    color: #E3A8A8;
}

.hint-btn {
    background: rgba(113,0,153,0.08);
    border-color: rgba(113,0,153,0.15);
    color: #d4a8f0;
}
.hint-btn:hover {
    background: rgba(113,0,153,0.15);
    border-color: rgba(113,0,153,0.3);
    color: #e0bef5;
}

.skip-btn {
    background: transparent;
    border-color: transparent;
    color: #fff;
}
.skip-btn:hover {
    background: rgba(255,255,255,0.04);
    color: #fff;
}

/* ===== TRAINING SIDEBAR ===== */

.training-dashboard {
    display: flex;
    border-bottom: 1px solid var(--lumi-border);
    flex-shrink: 0;
}
.training-stat-block {
    flex: 1;
    text-align: center;
    padding: 16px 8px;
}
.training-stat-block + .training-stat-block {
    border-left: 1px solid var(--lumi-border);
}
.training-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color 400ms;
}
/* Inline rating delta shown briefly after each puzzle */
.rating-delta {
    font-size: 13px;
    font-weight: 700;
    margin-left: 2px;
    animation: deltaFade 3s ease-out forwards;
}
.delta-up { color: var(--color-green-300); }
.delta-down { color: var(--color-red-300); }
@keyframes deltaFade {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
}
/* Provisional rating marker */
.rating-provisional {
    font-size: 20px;
    font-weight: 600;
    color: var(--lumi-text-muted);
    margin-left: 1px;
}
.training-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
}

/* Rating locked indicator — shown after first wrong move */
.rating-locked-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(231, 72, 86, 0.85);
    letter-spacing: 0.03em;
    opacity: 0;
    transition: opacity 300ms ease;
}
.rating-locked-indicator svg {
    stroke: var(--color-red-300, #e74856);
    flex-shrink: 0;
}

/* Solved-dirty prompt — solved after wrong move(s) */
.puzzle-prompt.solved-dirty {
    color: var(--color-amber-300, #FFB84D);
}
.puzzle-prompt.solved-dirty svg {
    stroke: var(--color-amber-300, #FFB84D);
}
.puzzle-prompt-sub {
    font-size: 12px;
    color: rgba(232, 228, 223, 0.75);
    margin-top: 4px;
}

/* Current puzzle info bar */
.training-puzzle-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--lumi-border);
    min-height: 18px;
    flex-shrink: 0;
}
.training-puzzle-info:empty {
    display: none;
}
.puzzle-info-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.puzzle-info-rating svg {
    color: var(--lumi-text-muted);
}
.puzzle-info-theme {
    font-size: 12px;
    color: #fff;
    background: rgba(255,255,255,0.04);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ===== THEME SELECTOR (in-page) ===== */
.theme-selector {
    padding: 8px 14px;
    border-bottom: 1px solid var(--lumi-border);
    flex-shrink: 0;
}
.theme-selector__chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.theme-selector__chip {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--lumi-text-secondary);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--lumi-border);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.12s;
    line-height: 1;
}
.theme-selector__chip:hover {
    background: rgba(255,255,255,0.08);
    color: var(--lumi-text-primary);
}
.theme-selector__chip.active {
    background: rgba(212,164,75,0.12);
    border-color: rgba(212,164,75,0.25);
    color: var(--lumi-amber-300);
    font-weight: 600;
}

/* ===== STORM SIDEBAR ===== */

.storm-dashboard {
    display: flex;
    border-bottom: 1px solid var(--lumi-border);
}
.storm-timer-block,
.storm-score-block {
    flex: 1;
    text-align: center;
    padding: 20px 12px;
}
.storm-timer-block {
    border-right: 1px solid var(--lumi-border);
    position: relative;
}

.storm-timer {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lumi-text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color 300ms;
}
.storm-timer.survival-lives { color: var(--lumi-accent); }
.storm-timer.warning { color: var(--color-orange-200); }
.storm-timer.critical { color: var(--color-red-300); animation: pulse 500ms ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }

.storm-combo-bonus {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #81b64c;
    animation: combo-float 1.5s ease-out forwards;
    pointer-events: none;
}
@keyframes combo-float {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-24px); }
}

.storm-timer-label,
.storm-score-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
}

.storm-score {
    font-size: 44px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* Storm move history */
/* Puzzle Rush–style result grid: one small square tile per puzzle, filling
   oldest→newest, green ✓ for solved / red ✗ for missed. */
.storm-moves-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 32px);
    grid-auto-rows: 32px;
    gap: 6px;
    justify-content: center;
    align-content: start;
}
.storm-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    animation: stormTilePop 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.storm-tile__mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.storm-tile__mark svg { width: 15px; height: 15px; display: block; }
.storm-tile.correct .storm-tile__mark { background: var(--lumi-success); }
.storm-tile.wrong   .storm-tile__mark { background: var(--lumi-error); }
.storm-tile__rating {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--lumi-text-secondary, #9a9486);
    font-variant-numeric: tabular-nums;
}
@keyframes stormTilePop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* Storm actions area */
.storm-actions-area {
    padding: 0 18px;
    text-align: center;
    flex-shrink: 0;
}
.storm-actions-area:empty {
    display: none;
}

/* Storm quit button */
.storm-quit-area {
    padding: 12px 18px;
    border-top: 1px solid rgba(255,255,255,0.04);
    text-align: center;
    flex-shrink: 0;
}
.storm-quit-btn {
    width: 100%;
    justify-content: center;
    color: #fff;
    font-size: 13px;
}
.storm-quit-btn:hover {
    color: var(--color-red-300);
    background: rgba(250,65,45,0.06);
}

/* Storm countdown */
.storm-countdown {
    font-size: 64px;
    font-weight: 800;
    color: #fff;
    animation: countPop 400ms ease-out;
    line-height: 1;
}
.storm-countdown.go {
    color: var(--color-green-300);
    text-shadow: 0 0 40px rgba(93,182,125,0.25);
}
@keyframes countPop {
    from { opacity: 0; transform: scale(1.4); }
    to { opacity: 1; transform: scale(1); }
}

/* Storm end — sidebar inline results */
.storm-end-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    gap: 4px;
    animation: resultIn 300ms ease-out;
}
.storm-end-score-inline {
    font-size: 56px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    line-height: 1;
    letter-spacing: -0.04em;
}
.storm-end-label-inline {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}
.storm-new-best {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-gold-200);
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 16px;
    background: rgba(255,200,50,0.08);
    border: 1px solid rgba(255,200,50,0.15);
}
.storm-end-best-inline {
    font-size: 13px;
    color: #fff;
    margin-top: 4px;
}
/* Cute end screen: coach line + warm rounded stat chips (replaces the cold grid). */
.storm-end-coach { width: 100%; padding: 2px 0 6px; }
.storm-end-coach .pz-coach__char { width: 52px; height: 52px; }
.storm-end-coach .puzzle-prompt { font-size: 14px; font-weight: 700; line-height: 1.25; }
.storm-end-hero {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    margin-top: 14px;
}
.storm-end-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    width: 100%; margin-top: 18px;
}
.storm-chip {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 14px; border-radius: 13px; min-width: 62px;
    background: var(--lumi-bg-card, rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.05);
}
.storm-chip__v {
    font-size: 18px; font-weight: 800; line-height: 1;
    color: var(--lumi-text-primary, #fff);
    font-variant-numeric: tabular-nums;
}
.storm-chip__v.up { color: var(--color-green-300); }
.storm-chip__v.down { color: var(--color-red-300); }
.storm-chip__k {
    font-size: 11px; font-weight: 600;
    color: var(--lumi-text-secondary, #9a9486);
}
.storm-end-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    width: 100%;
    margin-top: 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.04);
}
.storm-end-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: var(--lumi-bg-card);
}
/* Center the last (odd) cell spanning full width */
.storm-end-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
.storm-end-cell-value {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.correct-val { color: var(--color-green-300); }
.wrong-val { color: var(--color-red-300); }
.storm-end-cell-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}
.storm-end-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 16px;
}
.storm-end-actions .puzzle-btn {
    width: 100%;
    justify-content: center;
}

/* ===== SESSION SUMMARY ===== */
.session-summary {
    text-align: center;
    animation: resultIn 300ms ease-out;
}
.session-summary-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}
.session-summary-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
}
.session-stat { text-align: center; }
.session-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.session-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* Daily streak badge in sidebar */
.daily-streak-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-orange-200);
    background: rgba(212,164,75,0.08);
    padding: 3px 10px;
    border-radius: 12px;
}


/* ===== FOCUS VISIBLE — Keyboard accessibility ===== */
.daily-cta:focus-visible,
.daily-hero__board-link:focus-visible,
.mode-card:focus-visible,
.theme-chip:focus-visible,
.puzzle-btn:focus-visible,
.theme-selector__chip:focus-visible {
    outline: 2px solid rgba(212,164,75,0.6);
    outline-offset: 2px;
}
.board-frame:focus-within {
    outline: 2px solid rgba(212,164,75,0.6);
    outline-offset: 2px;
}

/* ===== SKELETON ===== */
.skeleton {
    background: var(--lumi-bg-body);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent);
    animation: shimmer 2s infinite;
}
@keyframes shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* ===== RESPONSIVE ===== */

/* Tablet & mobile */
@media (max-width: 840px) {
    /* Training/Storm pages */
    .puzzle-view { height: auto; min-height: 100vh; overflow: auto; padding: 16px; }
    .view-layout { flex-direction: column; height: auto; gap: 16px; }
    .board-col { height: auto; }
    .board-frame { width: min(100%, 520px); height: auto; max-height: none; margin: 0 auto; }
    .sidebar-col { width: 100%; height: auto; max-height: none; border-radius: 6px; }
    .sidebar-body { padding: 16px; }

    /* Fixed sidebars reset */
    #storm-sidebar, #puzzle-sidebar { height: auto; max-height: none; overflow: visible; }
    .storm-dashboard { flex-wrap: nowrap; }
    .storm-timer { font-size: 28px; }
    .storm-score { font-size: 36px; }
    .storm-moves-list { max-height: 200px; }

    /* Hub — responsive (single column) */
    .puzzle-hub { padding: 16px 16px 24px; align-items: flex-start; box-sizing: border-box; width: 100%; overflow-x: hidden; }
    .puzzle-hub__inner { max-width: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
    .daily-hero { align-items: center; }
    .puzzle-stat__value { font-size: 18px; }
    .daily-hero__board-link { width: min(100%, calc(100dvh - 400px)); max-width: 360px; }

    /* Mode cards — contained on mobile */
    .puzzle-hub__sidebar { width: 100%; max-width: 100%; overflow: hidden; }
    .puzzle-section { max-width: 100%; overflow: hidden; }
    .mode-card { flex-wrap: wrap; padding: 12px 14px; box-sizing: border-box; max-width: 100%; }
    .mode-card__cta { width: 100%; justify-content: center; margin-top: 4px; padding: 8px 14px; box-sizing: border-box; border-radius: 6px; }
}

@media (max-width: 480px) {
    .sidebar-col { min-height: auto; }
    .stat-value { font-size: 22px; }
    .stat-value-sm { font-size: 16px; }
    .card-body { padding: 12px 14px; gap: 8px; }
    .daily-hero__overlay-text { font-size: 14px; padding: 10px 22px; }

    /* Theme chips wrap nicely on small screens */
    .puzzle-themes { gap: 6px; }
    .theme-chip { font-size: 12px; padding: 8px 14px; }
}

/* Sidebar is a consistent 340px across all puzzle modes (matches game-report). */

/* Mistakes sidebar — mobile collapse */
@media (max-width: 840px) {
    .sidebar-col.mistakes-sidebar { width: 100%; }
    .mistakes-coach-box,
    .mistakes-game-card { margin-left: 12px; margin-right: 12px; }
    .mistakes-progress-section { padding-left: 12px; padding-right: 12px; }
    .mistakes-controls { padding-left: 12px; padding-right: 12px; }
}

/* ═══ DESKTOP TWO-COLUMN HUB ═══ */
@media (min-width: 900px) {
    .puzzle-hub {
        align-items: center;
        padding: 24px 48px;
    }
    .puzzle-hub__inner {
        max-width: 1240px;
        display: grid;
        /* Board takes the remaining width; sidebar fixed — so the board can grow to
           fill the height (capped by max-width below) instead of being width-starved. */
        grid-template-columns: minmax(0, 1fr) 460px;
        gap: 40px;
        align-items: center;
    }
    .daily-hero {
        align-items: center;
        max-width: none;
        margin-bottom: 0;
    }
    .daily-hero__board-link {
        width: 100%;
        max-width: calc(100vh - 150px);
    }
    .daily-hero__label,
    .daily-hero__footer {
        max-width: calc(100vh - 150px);
    }
    .daily-hero__solved {
        top: 48px;
    }
    .puzzle-hub__sidebar {
        max-width: 460px;
    }
    .puzzle-stats {
        margin-bottom: 20px;
    }
}

/* ===== SHARE BUTTON ===== */
.storm-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--lumi-border-hover);
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.storm-share-btn:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

@keyframes shareNotifIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Weakness Context Banner */
.training-context {
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--lumi-border);
    border-radius: 8px;
    margin-bottom: 10px;
}
.ctx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.ctx-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
}
.ctx-score {
    font-size: 13px;
    font-weight: 700;
}
.ctx-desc {
    font-size: 13px;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 8px;
}
.ctx-theme {
    font-size: 12px;
    color: #fff;
}
.ctx-theme strong {
    color: #fff;
}

/* ===================================================
   LEARN FROM MISTAKES — Hub Card
   =================================================== */

.accent-red { background: linear-gradient(180deg, #e74856, #c93545); }
.icon-red { background: rgba(231,72,86,0.1); color: #e74856; }
.cta-red {
    background: rgba(231,72,86,0.12);
    border-color: rgba(231,72,86,0.2);
    color: #e74856;
}
.cta-red:hover {
    background: rgba(231,72,86,0.2);
    border-color: rgba(231,72,86,0.35);
}
.mistakes-card:hover {
    box-shadow: 0 4px 24px rgba(231,72,86,0.1);
}

/* ===================================================
   LEARN FROM MISTAKES — Analysis / Setup Phase
   =================================================== */

.mistakes-analysis {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 24px;
    box-sizing: border-box;
}

.mistakes-analysis__card {
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 16px;
    padding: 40px 48px;
    max-width: 440px;
    width: 100%;
    text-align: center;
}

.mistakes-analysis__icon {
    color: #fff;
    margin-bottom: 16px;
}

.mistakes-analysis__title {
    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    margin: 0 0 8px;
}

.mistakes-analysis__sub {
    font-size: 14px;
    font-weight: 500;
    color: var(--lumi-text-primary);
    margin: 0 0 24px;
    line-height: 1.5;
}

.mistakes-analysis__progress {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.mistakes-analysis__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #e74856, #ff6b6b);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.mistakes-analysis__stats {
    font-size: 13px;
    color: var(--lumi-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
}

.mistakes-analysis__dot {
    opacity: 0.4;
}

.mistakes-analysis__cancel {
    display: inline-block;
    background: none;
    border: none;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 16px;
    text-decoration: none;
    margin-top: 8px;
}
.mistakes-analysis__cancel:hover {
    color: #fff;
}

/* ── Setup Form ─────────────────────── */

/* Mistakes setup — identical to the canonical config card used by Profile
   Report and Insights: amber hero tile, amber title, platform logo pills,
   labeled input, 3D amber CTA, warm amber-bordered card. (Mirrors .ins-config;
   active state keyed on .active since the page JS toggles that class.) */
.mistakes-cfg__card {
    width: 100%;
    max-width: 460px;
    background: var(--lumi-bg-nav);
    border: 1px solid rgba(212,164,75,0.22);
    border-radius: 22px;
    padding: clamp(28px, 4vw, 40px) clamp(24px, 3.4vw, 36px) clamp(22px, 2.6vw, 28px);
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.03) inset,
        0 0 0 1px rgba(0,0,0,0.20) inset,
        0 12px 36px rgba(0,0,0,0.28);
}
.mistakes-cfg__hero {
    width: 64px;
    height: 64px;
    border-radius: var(--lumi-radius-xl);
    background: linear-gradient(135deg, rgba(212,164,75,0.2), rgba(138,101,36,0.2));
    border: 1px solid var(--lumi-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.mistakes-cfg__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--lumi-amber-200);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 8px;
}
.mistakes-cfg__sub {
    font-size: 15px;
    font-weight: 450;
    line-height: 1.5;
    color: var(--lumi-text-secondary);
    margin: 0 auto 28px;
    max-width: 340px;
}
.mistakes-cfg__label {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lumi-text-secondary);
    margin-bottom: 8px;
}
.mistakes-cfg__pills {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}
.mistakes-cfg__pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045);
    color: var(--lumi-text-primary);
    font-family: var(--lumi-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.22s, transform 0.18s, color 0.18s;
}
.mistakes-cfg__pill:hover {
    opacity: 1;
}
.mistakes-cfg__pill.active {
    opacity: 1;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(212,164,75,0.22), 0 8px 18px rgba(0,0,0,0.30);
}
.mistakes-cfg__pill[data-platform="chesscom"].active {
    background: rgba(129,182,76,0.16);
    border-color: #81B64C;
}
.mistakes-cfg__pill[data-platform="lichess"].active {
    background: rgba(255,255,255,0.10);
    border-color: var(--lumi-amber-300);
}
.mistakes-cfg__chesscom-logo {
    height: 22px;
    width: auto;
    display: block;
    opacity: 0.78;
}
.mistakes-cfg__pill.active .mistakes-cfg__chesscom-logo {
    opacity: 1;
}
.mistakes-cfg__input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
    padding: 13px 14px;
    text-align: left;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    color: var(--lumi-text-primary);
    font-family: var(--lumi-font);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.mistakes-cfg__input:focus {
    outline: none;
    border-color: rgba(212,164,75,0.5);
}
.mistakes-cfg__cta {
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #B6862B;
    background: linear-gradient(180deg, #EAC178 0%, #D4A44B 50%, #B6862B 100%);
    color: #1a1a14;
    font-family: var(--lumi-font);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -2px 0 rgba(0,0,0,0.18),
        0 5px 0 #7B5A1C,
        0 12px 24px rgba(0,0,0,0.40);
    transform: translateY(0);
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, filter 0.15s;
}
.mistakes-cfg__cta:hover {
    filter: brightness(1.03);
}
.mistakes-cfg__cta:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 1px 0 #7B5A1C,
        0 4px 10px rgba(0,0,0,0.40);
}

/* ===================================================
   LEARN FROM MISTAKES — Puzzle Phase Sidebar
   =================================================== */

/* ── Mistakes Sidebar Layout ─────────────── */

.mistakes-sidebar {
    display: flex;
    flex-direction: column;
    /* width inherits the shared 340px .sidebar-col for cross-mode consistency */
}

.mistakes-counter {
    font-size: 12px;
    font-weight: 700;
    color: var(--lumi-text-muted);
    background: rgba(255,255,255,0.05);
    padding: 2px 9px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    letter-spacing: 0.02em;
}

/* ── Coach Box ───────────────────────────── */

.mistakes-coach-box {
    margin: 10px 14px 0;
    background: #161614;
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--coach-color, rgba(255,255,255,0.12));
    border-radius: 2px 10px 10px 2px;
    padding: 14px 16px 16px;
    transition: border-left-color 0.3s;
}

.mistakes-coach-box__badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.mistakes-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.mistakes-badge__move {
    font-size: 12px;
    font-weight: 600;
    color: var(--lumi-text-muted);
    font-variant-numeric: tabular-nums;
}

.mistakes-coach-box__header {
    font-size: 15px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    line-height: 1.35;
    margin-bottom: 8px;
}

/* Bad move chip — shows what the player played */
.mistakes-coach-box__bad-move {
    margin-bottom: 8px;
}

.mistakes-bad-move-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(207,110,110,0.08);
    border: 1px solid rgba(207,110,110,0.22);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(207,110,110,0.85);
    line-height: 1;
}

.mistakes-bad-move-chip strong {
    font-weight: 700;
    color: #CF6E6E;
}

.mistakes-coach-box__explanation {
    font-size: 13px;
    font-weight: 400;
    color: var(--lumi-text-secondary);
    line-height: 1.6;
}

/* ── Game Info Card ──────────────────────── */

.mistakes-game-card {
    background: #151513;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 11px 14px;
    margin: 8px 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mistakes-game-card__players {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.mistakes-game-card__player {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--lumi-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mistakes-game-card__player--active {
    font-weight: 700;
    color: var(--lumi-text-primary);
}

.mistakes-game-card__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mistakes-game-card__dot--white {
    background: #e0e0e0;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
.mistakes-game-card__dot--black {
    background: #3a3a3a;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.mistakes-game-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.mistakes-game-card__move-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--lumi-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mistakes-game-card__move-number {
    font-size: 22px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mistakes-game-card__info {
    font-size: 10.5px;
    color: var(--lumi-text-dim);
    display: flex;
    align-items: center;
    gap: 3px;
}

.mistakes-game-card__sep {
    opacity: 0.35;
}

/* ── Progress Section ────────────────────── */

.mistakes-progress-section {
    padding: 12px 14px 0;
}

/* Prompt row — sits above the progress bar */
.mistakes-prompt-row {
    margin-bottom: 10px;
}

.mistakes-prompt-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--lumi-text-secondary);
    transition: color 0.2s;
}

.mistakes-progress-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    margin-bottom: 7px;
}

.mistakes-progress-bar__correct {
    background: #5DB67D;
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 4px 0 0 4px;
}

.mistakes-progress-bar__wrong {
    background: #CF6E6E;
    height: 100%;
    transition: width 0.3s ease;
}

/* Meta row: correct/wrong counts side by side */
.mistakes-progress-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.mistakes-progress-counts__correct {
    font-size: 11.5px;
    font-weight: 700;
    color: #5DB67D;
    font-variant-numeric: tabular-nums;
}

.mistakes-progress-counts__wrong {
    font-size: 11.5px;
    font-weight: 700;
    color: #CF6E6E;
    font-variant-numeric: tabular-nums;
}

.mistakes-progress-squares {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.mistakes-progress-square {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    transition: background 0.2s ease;
}

.mistakes-progress-square--correct {
    background: #5DB67D;
}

.mistakes-progress-square--wrong {
    background: #CF6E6E;
}

.mistakes-progress-square--current {
    background: rgba(212,164,75,0.12);
    box-shadow: 0 0 0 1.5px rgba(212,164,75,0.55);
}

/* ── Bottom Controls ─────────────────────── */

.mistakes-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 14px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.05);
    gap: 8px;
}

.mistakes-controls__secondary {
    display: flex;
    gap: 6px;
}

.mistakes-controls__primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: var(--lumi-accent);
    color: var(--lumi-accent-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1;
    margin-left: auto;
}

.mistakes-controls__primary:hover {
    background: var(--lumi-accent-hover);
    box-shadow: var(--lumi-glow-btn);
}

.mistakes-controls__primary:active {
    transform: scale(0.97);
}

.mistakes-controls__primary svg {
    opacity: 0.8;
}

/* ===================================================
   LEARN FROM MISTAKES — Round Complete
   =================================================== */

.mistakes-round-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 20px 0 24px;
}

.round-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.round-stat__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--lumi-text-primary);
}

.round-stat__label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== DAILY PUZZLE COMPLETE ===== */

.daily-complete-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.daily-complete-streak {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-orange-200);
    background: rgba(212,164,75,0.08);
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid rgba(212,164,75,0.12);
}

.daily-complete-subtext {
    font-size: 15px;
    font-weight: 500;
    color: var(--lumi-text-primary);
    margin-top: 8px;
}

.daily-complete-controls {
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.daily-complete-controls .puzzle-btn {
    width: 100%;
    justify-content: center;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PUZZLES — NATIVE SINGLE-SCREEN LAYOUT (phones, ≤768px, where the nav is a
   fixed bottom bar). This is an APP screen, not a webpage: the board is PINNED
   in a fixed zone and never moves between puzzles, the controls fill the space
   below, and the page NEVER scrolls. Applies to every mode + sub-mode.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* The whole feature occupies exactly one viewport; reserve the bottom nav. */
    .puzzle-view {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
    }
    .view-layout {
        flex-direction: column;
        height: 100%;
        width: 100%;
        gap: 0;
        align-items: stretch;
        min-height: 0;
        padding: 0 0 calc(68px + env(safe-area-inset-bottom, 0));
        box-sizing: border-box;
    }

    /* ── BOARD ZONE — fixed block; square sized to the narrower of available
       width / leftover height, centered. The board's size & position are
       viewport-driven (not content-driven) → it never shifts as you solve. ── */
    .board-col {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 8px 12px 4px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
    }
    .board-frame {
        width: min(calc(100vw - 24px), calc(100dvh - 300px));
        max-width: 460px;
        height: auto;
        max-height: none;
        aspect-ratio: 1;
        margin: 0 auto;
        border-radius: 6px;
    }

    /* ── CONTROLS ZONE — fills the rest, compact, no page scroll. Controls sit
       on the view background (no boxed panel) for an app feel. ── */
    .sidebar-col {
        flex: 1 1 0;
        width: 100%;
        min-height: 0;
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .sidebar-header { padding: 2px 0 4px; border-bottom: none; flex-shrink: 0; }
    .sidebar-body, #puzzle-actions {
        flex: 1 1 auto; min-height: 0; padding: 6px 0 0;
        display: flex; flex-direction: column; justify-content: center;
    }

    /* Training */
    .training-dashboard { padding: 4px 0; gap: 22px; flex-shrink: 0; }
    .training-context { display: none; }
    .theme-selector { padding: 4px 0; border-bottom: none; flex-shrink: 0; }
    .theme-selector__chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .training-puzzle-info { padding: 2px 0; flex-shrink: 0; }

    /* Storm — timer/score row + actions fixed; only the result-tile grid
       flexes (its own internal overflow, the page stays put). */
    .storm-dashboard { padding: 4px 0; flex-shrink: 0; }
    .storm-moves-list { flex: 1 1 0; min-height: 0; max-height: none; }
    .storm-actions-area, .storm-quit-area { flex-shrink: 0; }

    /* Mistakes */
    .mistakes-counter, .mistakes-controls { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PUZZLE HUB — CALM MODE ROWS (Build Bible v2 §Screen-5 hub). Native only.
   Kills the rainbow mode-cards: one neutral card style, no per-mode color, no
   colored CTA pills (amber is spent on the daily-puzzle hero CTA, not here).
   ═══════════════════════════════════════════════════════════════════════════ */
html.lumi-native .mode-card,
html.lumi-native .mode-card--training,
html.lumi-native .mode-card--storm,
html.lumi-native .mode-card--mistakes,
html.lumi-native .mode-card--woodpecker {
    background: var(--lumi-bg-card) !important;
    border: 1px solid var(--lumi-border-hover) !important;
    box-shadow: none !important;
    filter: none !important;
}
html.lumi-native .mode-card:hover,
html.lumi-native .mode-card--training:hover,
html.lumi-native .mode-card--storm:hover,
html.lumi-native .mode-card--mistakes:hover,
html.lumi-native .mode-card--woodpecker:hover { box-shadow: none !important; }
html.lumi-native .mode-card__icon,
html.lumi-native .mode-card__icon--green,
html.lumi-native .mode-card__icon--blue,
html.lumi-native .mode-card__icon--red {
    background: var(--lumi-bg-elevated) !important;
    color: var(--lumi-text-secondary) !important;
}
/* CTA → quiet neutral affordance (the whole row is the link), no colored pill. */
html.lumi-native .mode-card__cta,
html.lumi-native .mode-card__cta--green,
html.lumi-native .mode-card__cta--blue,
html.lumi-native .mode-card__cta--red {
    background: transparent !important;
    color: var(--lumi-text-dim) !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    font-weight: 600 !important;
}

/* ═══ PUZZLE STORM — COMBO BAR (Build Bible v2 §Screen-5 Storm headline) ═══
   Segmented amber fill toward the next time-bonus threshold; flashes at a
   milestone, empties on a wrong move. Timed modes only (hidden in survival). */
/* Storm puts a second child (.storm-combo) inside .board-col, which is a flex
   ROW by default — that rendered the combo bar BESIDE the board and squashed
   the board into a tall rectangle. Stack them vertically (combo below the board)
   and let the board square shrink to leave room for the combo. */
#puzzle-storm-view .board-col { flex-direction: column; }
#puzzle-storm-view .board-frame { flex: 1 1 auto; min-height: 0; height: auto; }

/* Storm v2 panel — unified pz-panel layout (hero time + secondary score,
   recent-solves feed, quit pinned at the bottom). */
.pz-hero-aside { text-align: right; flex-shrink: 0; }
.pz-hero-aside__val { font-size: 27px; font-weight: 800; color: var(--lumi-text-primary); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#storm-timer-bar { transition: width 1s linear; }
#storm-timer-bar.is-low { background: var(--lumi-error); }
.storm-recent { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 11px 9px; padding: 14px 16px 6px; }
/* Specificity must beat the base `.pz-foot { display:grid }` rule below, or the
   single Quit button lands in the first of three grid columns (off to the left). */
.pz-foot.pz-foot--quit { display: block; padding: 12px 16px; }
.pz-foot.pz-foot--quit .storm-quit-btn { width: 100%; justify-content: center; }

.storm-combo {
    display: flex; align-items: center; gap: 10px;
    width: min(100%, 480px); margin: 8px auto 0; padding: 0 4px; box-sizing: border-box;
}
.storm-combo__track { flex: 1; height: 6px; border-radius: 3px; background: var(--lumi-border-hover); overflow: hidden; }
.storm-combo__fill { height: 100%; width: 0; background: var(--lumi-amber-300); border-radius: 3px; transition: width 220ms var(--lumi-spring, ease); }
.storm-combo__count { font-family: var(--lumi-font-mono, ui-monospace, monospace); font-size: 14px; font-weight: 700; color: var(--lumi-amber-300); min-width: 26px; text-align: right; }
.storm-combo--milestone .storm-combo__fill { background: var(--lumi-amber-200, #E8C06A); box-shadow: 0 0 10px rgba(224,179,90,0.6); }
.storm-combo--reset .storm-combo__fill { transition: width 320ms var(--lumi-ease-exit, ease); }

/* ============================================================
   PUZZLE PANEL v2 — filled command box (Training; rolls out to all modes)
   Anchors content top + bottom; the solution area is the flex filler so the
   footer pins to the bottom and the box never has a dead void.
   ============================================================ */
.pz-panel { overflow: hidden; }
.pz-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--lumi-text-dim, rgba(255,255,255,0.45)); }

/* Rating block */
.pz-rating { padding: 14px 18px; flex-shrink: 0; margin-top: auto; }   /* pushed to the bottom, just above the dock */
.pz-rating__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pz-panel .training-stat-value {
    font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #fff;
    display: flex; align-items: baseline; gap: 9px; font-variant-numeric: tabular-nums; margin-top: 3px;
}
.pz-streak[hidden] { display: none; }   /* class display would otherwise beat [hidden] */
/* Streak = the finalised iOS reddish two-tone fire chip (no pill, fire + amber count). */
.pz-streak {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pz-streak__flame {
    width: 22px; height: 22px; flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(216,24,16,0.4));
}
.pz-streak__n { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--lumi-amber-300, #E0B35A); }
/* Living flame — whisper-subtle, not a celebration */
@keyframes streakFlicker {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    45% { opacity: 0.84; transform: scaleY(0.92) translateY(0.3px); }
    70% { opacity: 0.95; transform: scaleY(1.02); }
}
/* One-shot springy pop + glow ring each time the streak grows */
.pz-streak.is-bump { animation: streakBump 460ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes streakBump {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(212,164,75,0.0); }
    40%  { transform: scale(1.16); box-shadow: 0 0 0 4px rgba(212,164,75,0.20); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(212,164,75,0.0); }
}
@media (prefers-reduced-motion: reduce) {
    .pz-streak__flame { animation: none; }
    .pz-streak.is-bump { animation: none; }
}
.pz-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.07); margin-top: 12px; overflow: hidden; }
.pz-bar__fill { height: 100%; width: 0; background: linear-gradient(90deg, #D4A44B, #E0B35A);
    border-radius: 4px; transition: width 0.5s ease; }
/* Level-up: a bright flash on the bar when a 100-point level is completed. */
.pz-bar__fill.is-levelup { animation: pzLevelUp 650ms cubic-bezier(0.3, 1.3, 0.5, 1); }
@keyframes pzLevelUp {
    0%   { filter: brightness(1); }
    22%  { filter: brightness(2.1) saturate(1.25); }
    100% { filter: brightness(1); }
}

/* Crisp training panel: prompt centered in the middle, Hint/Skip pinned at the
   bottom in the game-report button language (transparent, subtle border, hover lightens). */
/* Prompt / turn-indicator area — fills the panel but TOP-aligns its content, so the
   "White to move" indicator sits just under the header (iOS-style) and the rating +
   dock get pushed to the bottom. */
.pz-panel .sidebar-body.pz-body--center,
.pz-panel .sidebar-body.pz-body--top {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-top: 28px;
}
.pz-body--top .puzzle-controls { width: 100%; }

/* ── Coach: a character "saying" the prompt inside a speech bubble (iOS-style) ── */
.pz-coach {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 6px;
    flex-shrink: 0;
}
.pz-coach__char {
    flex: 0 0 auto;
    width: 60px; height: 60px;
}
.pz-coach__char svg, .pz-coach__char img { width: 100%; height: 100%; display: block; }
.pz-coach-avatar { object-fit: cover; -webkit-user-drag: none; user-select: none; }

/* Circle success badge for the "Correct!" prompt — a bold white check on green. */
.pz-check {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #43b86a;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900; line-height: 1;
    box-shadow: 0 2px 5px rgba(67,184,106,0.4);
}

.pz-coach__bubble {
    position: relative;
    flex: 1 1 auto; min-width: 0;
    min-height: 48px;
    display: flex; align-items: center;
    padding: 11px 16px; box-sizing: border-box;
    background: #F2E9D6;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.28);
}
.pz-coach__bubble::before {   /* tail pointing left, toward the character */
    content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
    border-style: solid; border-width: 7px 8px 7px 0;
    border-color: transparent #F2E9D6 transparent transparent;
}
/* The prompt lives inside the bubble: dark text on cream, left-aligned. */
.pz-coach__bubble #puzzle-actions,
.pz-coach__bubble #storm-actions { flex: 1 1 auto; padding: 0; display: block; text-align: left; min-height: 0; gap: 4px; }
.pz-coach__bubble .puzzle-prompt { color: #2a261f; font-size: 16px; font-weight: 700; justify-content: flex-start; gap: 9px; }
.pz-coach__bubble .puzzle-prompt.secondary { color: #5a5346; font-weight: 600; }
.pz-coach__bubble .puzzle-prompt.correct { color: #4a7c2f; }
.pz-coach__bubble .puzzle-prompt.wrong { color: #b3402f; }
.pz-coach__bubble .color-dot { border: 1.5px solid rgba(0,0,0,0.22); }
/* Compact, cute solved state — a small check + tight 2 lines. The rating delta is
   hidden here (it already animates in the bottom rating block), so the bubble stays
   roughly one line tall instead of ballooning. */
.pz-coach__bubble .pz-result {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: 10px; text-align: left; padding: 0;
    animation: none;
}
.pz-coach__bubble .pz-result__check {
    grid-row: 1 / span 2; width: 30px; height: 30px; margin: 0; flex: 0 0 auto;
    background: #43b86a; color: #fff; box-shadow: 0 2px 5px rgba(67,184,106,0.4);
}
.pz-coach__bubble .pz-result__check svg { width: 17px; height: 17px; }
/* Miss: a soft, warm amber tone — encouraging, never a harsh red "failed". */
.pz-coach__bubble .pz-result__check--miss { background: rgba(212,164,75,0.16); color: #c08a2e; }
.pz-coach__bubble .pz-result__t { grid-column: 2; color: #2a261f; font-size: 16px; line-height: 1.1; }
.pz-coach__bubble .pz-result__s { grid-column: 2; color: #6a6253; font-size: 12.5px; margin: 1px 0 0; line-height: 1.2; }
.pz-coach__bubble .pz-result__rate { display: none; }
/* "+XX" next to Solved! (flies down to the rating). */
.pz-coach__bubble .pz-result__gain { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pz-coach__bubble .pz-result__gain.delta-up { color: #3f7a2a; }
.pz-coach__bubble .pz-result__gain.delta-down { color: #b3402f; }

/* The floating delta that flies from the bubble down to the rating number. */
.pz-gain-fly {
    position: fixed; z-index: 200; pointer-events: none;
    font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
    transition: transform 0.5s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.5s ease;
    will-change: transform, opacity;
}
.pz-gain-fly.up { color: #62BA82; }
.pz-gain-fly.down { color: #d9534f; }
@media (prefers-reduced-motion: reduce) { .pz-gain-fly { transition: none; } }

/* Fixed two-button dock: [Hint] [Next]. Clean Woodpecker-style buttons. */
.pz-actions {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--lumi-border);
    flex-shrink: 0;
}
.pz-actions[hidden] { display: none; }
.pz-dock-btn {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 46px; padding: 0 12px; box-sizing: border-box;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    color: var(--lumi-text-secondary);
    font-size: 14px; font-weight: 700; font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}
.pz-dock-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.pz-dock-btn:hover:not(:disabled) { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); color: var(--lumi-text-primary); }
.pz-dock-btn:disabled { opacity: 0.38; cursor: default; }
/* Highlighted Next (post-solve) — solid amber, like the Woodpecker primary button. */
.pz-next-btn.is-primary {
    background: linear-gradient(180deg, #E7BC63 0%, #D4A44B 100%);
    border: none; color: #1a1a17;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);   /* subtle depth, not an amber glow */
}
/* Hover = a subtle lift, NOT a colour change. Re-assert the amber fill + dark text
   here so the generic .pz-dock-btn:hover (higher specificity) can't grey it out. */
.pz-next-btn.is-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #E7BC63 0%, #D4A44B 100%);   /* same amber, no colour shift */
    color: #1a1a17;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.26);
}
.pz-hint-bulb { font-size: 15px; line-height: 1; }
.pz-actions__btn {
    flex: 1;
    background: transparent;
    border-color: rgba(255,255,255,0.14);
    color: var(--lumi-text-secondary);
}
.pz-actions__btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.24);
    color: #fff;
}

/* Puzzle meta + themes */
.pz-meta { padding: 14px 18px 6px; flex-shrink: 0; }
.pz-meta .training-puzzle-info { margin-bottom: 12px; }
.pz-meta .theme-selector { margin: 0; padding: 0; }

/* Prompt/controls area — natural height, top-aligned (kills the centered void) */
.pz-panel .sidebar-body {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 6px 18px 14px;
    gap: 14px;
    min-height: 64px;
}

/* Solution / your line — the flex filler that pins the footer */
.pz-line { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px;
    border-top: 1px solid var(--lumi-border); display: flex; flex-direction: column; }
.pz-line__head { margin-bottom: 10px; flex-shrink: 0; }
.pz-moves { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; font-size: 14px; }
.pz-moves li { display: flex; gap: 10px; padding: 5px 0; align-items: center; }
.pz-moves .pz-n { color: var(--lumi-text-dim, rgba(255,255,255,0.4)); width: 24px; font-size: 12px; }
.pz-moves .pz-mv { font-weight: 700; color: var(--color-green-300, #5DB67D); }
.pz-moves .pz-mv--opp { color: rgba(255,255,255,0.6); font-weight: 600; }
.pz-line__empty { margin: auto; text-align: center; font-size: 13px; line-height: 1.5;
    color: var(--lumi-text-dim, rgba(255,255,255,0.4)); max-width: 220px; }

/* Session footer */
.pz-foot { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--lumi-border); flex-shrink: 0; }
.pz-foot > div { padding: 12px 6px; text-align: center; border-right: 1px solid var(--lumi-border); }
.pz-foot > div:last-child { border-right: none; }
.pz-foot b { display: block; font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.pz-foot span { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--lumi-text-dim, rgba(255,255,255,0.42)); }

/* Solved result card (rendered into #puzzle-actions by PuzzlePlayer) */
.pz-result { text-align: center; padding: 6px 4px 2px; animation: promptFade 220ms ease-out; }
.pz-result__check { width: 56px; height: 56px; border-radius: 50%; background: rgba(93,182,125,0.16);
    color: var(--color-green-300, #5DB67D); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.pz-result__t { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.pz-result__s { color: var(--lumi-text-secondary, rgba(255,255,255,0.72)); font-size: 13.5px; margin-top: 4px; }
.pz-result__rate { margin-top: 14px; font-size: 19px; font-weight: 800; display: flex; align-items: center;
    justify-content: center; gap: 8px; font-variant-numeric: tabular-nums; }
.pz-result__rate .old, .pz-result__rate .arr { color: var(--lumi-text-dim, rgba(255,255,255,0.4)); }
.pz-result__rate .new { color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   NATIVE PUZZLE SOLVE SCREEN — Chess.com-grade, designed (html.lumi-native).
   solve-shell.js builds `.lumi-solve` and FILLS every band so nothing floats:
   top bar · coach avatar + speech bubble · full-width board · stats strip ·
   icon dock. The web rating-hero + sidebar + app tab-bar are dropped.
   ═══════════════════════════════════════════════════════════════════════════ */
html.lumi-native.has-solve-shell .side-nav { display: none !important; }   /* immersive: only puzzle stuff */
html.lumi-native.has-solve-shell .app-main { height: auto; min-height: 0; padding: 0 !important; }
/* Neutralise the old @768 single-screen rules that clip our dock: they give
   .puzzle-view overflow:hidden and reserve 68px for the (now-hidden) tab-bar.
   Safe to blanket here — these set height/overflow/padding, NOT display, so the
   hidden mode-select / setup screens (display:none) stay hidden. */
html.lumi-native.has-solve-shell .puzzle-view {
    height: auto !important; min-height: 0 !important;
    overflow: visible !important; padding: 0 !important;
}
/* The ACTIVE solve container is forced to block in JS (solve-shell.js) so it fills width. */
html.lumi-native .view-layout[data-solve] {
    display: block; width: 100%;
    height: auto !important; padding: 0 !important; margin: 0 !important; gap: 0 !important;
}

html.lumi-native .lumi-solve {
    display: flex;
    flex-direction: column;
    height: 100svh;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--lumi-bg, #1a1a17);
}

/* ── Top bar: back · title (centered) · spacer ── */
/* Solve top bar now uses the shared Context bar + icon button (nav.css NATIVE KIT):
   .lumi-topbar / .lumi-btn--icon / .lumi-topbar__title / .lumi-topbar__spacer. */

/* ── Coaching status box — FIXED height so solving↔solved never shifts the board ── */
html.lumi-native .lumi-solve__coach {
    flex: 0 0 auto;
    height: 78px;                 /* fixed: the status text/result lives inside, board stays put */
    box-sizing: border-box;
    display: flex; align-items: stretch;
    padding: 8px 16px 10px;
}
html.lumi-native .lumi-solve__bubble {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    background: #F2E9D6; color: #2a261f;
    border-radius: 14px; padding: 12px 18px;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: 0 5px 16px rgba(0,0,0,0.28);
}
html.lumi-native .lumi-solve__bubble #puzzle-actions,
html.lumi-native .lumi-solve__bubble .sidebar-body { display: block; text-align: left; padding: 0; min-height: 0; }
html.lumi-native .lumi-solve__bubble .puzzle-prompt {
    color: #2a261f; font-size: 16px; font-weight: 700;
    display: flex; align-items: center; gap: 8px; justify-content: flex-start;
}
html.lumi-native .lumi-solve__bubble .puzzle-prompt.correct { color: #4a7c2f; }
html.lumi-native .lumi-solve__bubble .puzzle-prompt.wrong { color: #b3402f; }
html.lumi-native .lumi-solve__bubble .color-dot { border: 1.5px solid rgba(0,0,0,0.25); }
html.lumi-native .lumi-solve__bubble .pz-result { text-align: left; padding: 0; }
html.lumi-native .lumi-solve__bubble .pz-result__check { width: 30px; height: 30px; margin: 0; }
html.lumi-native .lumi-solve__bubble .pz-result__t { color: #2a261f; font-size: 16px; }
html.lumi-native .lumi-solve__bubble .pz-result__s { color: #6a6253; font-size: 13px; }
html.lumi-native .lumi-solve__bubble .pz-result__rate { display: none; }   /* rating delta shows in the stats strip */

/* ── Board: the hero — sized to the LEFTOVER band (square fits both width & height,
   so it always shrinks to leave the dock visible; never overflows) ── */
html.lumi-native .lumi-solve__board {
    flex: 1 1 auto; min-height: 0; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 4px 0;
}
html.lumi-native .lumi-solve__board .board-frame {
    aspect-ratio: 1 / 1;               /* fallback; exact px set by fitBoard() in solve-shell.js */
    max-width: 100%; max-height: 100%;
    margin: 0 auto;
}
html.lumi-native .lumi-solve__board .board-frame #puzzle-chessboard,
html.lumi-native .lumi-solve__board .board-frame #storm-chessboard { width: 100%; height: 100%; }

/* ── Stats strip — Chess.com row: [puzzle rating] … [you: rating · streak] + slim bar ── */
html.lumi-native .lumi-solve__stats { flex: 0 0 auto; padding: 10px 18px 2px; }
html.lumi-native .lumi-stats__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
html.lumi-native .lumi-stats__puzzle { display: flex; flex-direction: column; gap: 2px; }
html.lumi-native .lumi-stats__puzzle b { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
html.lumi-native .lumi-stats__puzzle i,
html.lumi-native .lumi-stats__you > i { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lumi-text-muted, #6B6560); }
html.lumi-native .lumi-stats__you { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
html.lumi-native .lumi-stats__you-val { display: inline-flex; align-items: center; gap: 8px; }
html.lumi-native .lumi-stats__you-val .training-stat-value { font-size: 19px; font-weight: 800; color: #fff; }
html.lumi-native .lumi-stats__you-val .pz-streak { padding: 3px 8px; }
html.lumi-native .lumi-solve__stats .pz-bar { margin-top: 11px; height: 6px; }

/* ── Button bar — Previous · HINT (pronounced) · Next ── */
html.lumi-native .lumi-solve__dock {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 10px;
    border-top: 1px solid var(--lumi-border, rgba(255,255,255,0.07));
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
html.lumi-native .lumi-solve__dock .lumi-hint-slot { flex: 1 1 auto; display: flex; justify-content: center; }
/* Prev / Next — flat icon+label, secondary */
html.lumi-native .lumi-solve__dock .lumi-navbtn {
    flex: 0 0 auto; min-width: 84px; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: var(--lumi-text-secondary, #B8B2A8) !important;
    font-size: 12px; font-weight: 600; border-radius: 12px; cursor: pointer;
}
html.lumi-native .lumi-solve__dock .lumi-navbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html.lumi-native .lumi-solve__dock .lumi-navbtn:disabled { opacity: 0.3; }
html.lumi-native .lumi-solve__dock .lumi-navbtn:active { background: rgba(255,255,255,0.06) !important; }
/* Hint — pronounced: solid amber pill, the primary action */
html.lumi-native .lumi-solve__dock .lumi-hintbtn {
    flex: 0 0 auto; min-height: 56px; padding: 0 28px; gap: 9px;
    flex-direction: row; border-radius: 28px;
    background: var(--lumi-amber-400, #D4A44B) !important;
    border: none !important;
    color: #1c1813 !important; font-size: 16px; font-weight: 800;
    box-shadow: 0 6px 18px rgba(212,164,75,0.35);
}
html.lumi-native .lumi-solve__dock .lumi-hintbtn svg { width: 20px; height: 20px; }
html.lumi-native .lumi-solve__dock .lumi-hintbtn:active { filter: brightness(0.95); transform: translateY(1px); }

/* ── Per-mode solve-screen tweaks ── */
/* Storm combo meter lives at the top of the stats band (keeps the board zone clean) */
html.lumi-native .lumi-solve__stats .storm-combo { width: 100%; margin: 0 0 8px; padding: 0; }
/* Storm "Quit" — flat, wide, danger-tinted */
html.lumi-native .lumi-solve__dock .lumi-navbtn--wide {
    flex: 1 1 auto; flex-direction: row; gap: 8px; min-width: 0;
    color: var(--lumi-error, #cf6e6e) !important;
}
html.lumi-native .lumi-solve__dock .lumi-navbtn--wide svg { width: 18px; height: 18px; }
/* Mistakes coach box keeps its own dark styling — don't box it in the cream bubble */
html.lumi-native .lumi-solve__coach:has(.mistakes-coach-box) .lumi-solve__bubble {
    background: transparent; box-shadow: none; padding: 0;
}
html.lumi-native .lumi-solve__bubble .mistakes-coach-box { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   NATIVE PUZZLE HUB — single screen (html.lumi-native), built by hub-shell.js.
   Compact daily card · mode rows · theme chips, between app-bar and tab-bar.
   ═══════════════════════════════════════════════════════════════════════════ */
html.lumi-native.has-hub-shell .puzzle-hub,
html.lumi-native.has-hub-shell .puzzle-hub__inner {
    height: auto !important; min-height: 0 !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important; overflow: visible !important; display: block !important;
}
html.lumi-native .lumi-hub {
    display: flex; flex-direction: column; gap: 12px;
    padding: 12px 14px 0; box-sizing: border-box; overflow: hidden;
}

/* ── Daily card: board thumbnail (left) + date/turn/solve (right) ── */
html.lumi-native .lumi-hub__daily { flex: 0 0 auto; }
html.lumi-native .lumi-hub .daily-hero {
    display: grid; grid-template-columns: 128px 1fr;
    grid-template-areas: "board label" "board footer";
    align-items: center; gap: 6px 14px;
    margin: 0; padding: 12px; border-radius: 14px;
    background: var(--lumi-bg-card, #1e1e1b); border: 1px solid var(--lumi-border, rgba(255,255,255,0.06));
}
html.lumi-native .lumi-hub .daily-hero__label { grid-area: label; align-self: end; }
html.lumi-native .lumi-hub .daily-hero__board-link { grid-area: board; }
html.lumi-native .lumi-hub .daily-hero__board { width: 128px; height: 128px; border-radius: 8px; }
html.lumi-native .lumi-hub .daily-hero__footer { grid-area: footer; align-self: start; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.lumi-native .lumi-hub .daily-hero__turn { font-size: 13px; }
html.lumi-native .lumi-hub .daily-hero__rating { font-size: 13px; }

/* ── Mode rows fill the middle ── */
html.lumi-native .lumi-hub__modes {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
html.lumi-native .lumi-hub__modes .mode-card { padding: 12px 16px; }

/* ── Theme chips pinned at the bottom ── */
html.lumi-native .lumi-hub__themes { flex: 0 0 auto; padding-bottom: 10px; }
html.lumi-native .lumi-hub__themes .puzzle-themes { gap: 8px; }
html.lumi-native .lumi-hub__themes .theme-custom { margin-top: 8px; }

/* Native hub mode rows: keep icon · text · CTA on one line (no mobile wrap) */
html.lumi-native .lumi-hub__modes .mode-card { flex-wrap: nowrap; align-items: center; gap: 12px; }
html.lumi-native .lumi-hub__modes .mode-card__body { flex: 1 1 auto; min-width: 0; }
html.lumi-native .lumi-hub__modes .mode-card__cta { width: auto !important; margin-top: 0 !important; flex: 0 0 auto; padding: 7px 14px !important; }