/* ============================================================
   HOMEPAGE DASHBOARD — Lumichess
   Profile header + action cards + game list
   ============================================================ */

/* ── Dashboard Layout ──────────────────────────────────────── */

.hp-dash {
    position: relative;
    /* Parent .app-main already has margin-left: 186px, so 100% of the parent
       is exactly the visible content area on every platform. Avoid 100vw —
       on Windows it includes the persistent scrollbar gutter and pushes
       content slightly off-centre vs macOS (overlay scrollbars). */
    max-width: 100%;
    margin-right: auto;
    padding: 24px 24px 48px;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Header (greeting + ratings) ──────────────────────────── */

/* Post-connect header carries just the "Hi, {Name}" greeting now —
   the sidebar already shows the Lumichess wordmark, so we hide the
   inline logo to avoid duplicating it. */
.hp-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    min-height: 44px;
}
.hp-header .hp-logo {
    display: none;
}

/* Auth cluster: pinned to the top-right of the viewport with good breathing room.
   Fixed positioning keeps it hard in the window corner regardless of scroll / layout. */
.hp-header__auth {
    position: fixed;
    top: 24px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 50;
}

.hp-greeting {
    font-size: 26px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    margin: 0;
    letter-spacing: -0.03em;
}

/* ── Connect Nudge ───────────────────────────────────────── */

.hp-connect {
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 24px;
    animation: fadeIn 0.35s ease both;
}

.hp-connect__body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.hp-connect__text {
    flex: 1;
    min-width: 0;
}

.hp-connect__heading {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    margin-bottom: 4px;
}

.hp-connect__sub {
    display: block;
    font-size: 13px;
    color: var(--lumi-text-secondary);
    line-height: 1.5;
}

.hp-connect__dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--lumi-text-dim);
    cursor: pointer;
    transition: all 0.15s;
}

.hp-connect__dismiss:hover {
    color: var(--lumi-text-muted);
    background: rgba(255,255,255,0.04);
}

.hp-connect__form-area { max-width: 480px; }

.hp-connect__pills {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.hp-connect__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--lumi-text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.hp-connect__pill:hover {
    background: rgba(255,255,255,0.06);
    color: var(--lumi-text-secondary);
}

.hp-connect__pill.active {
    background: rgba(212,164,75,0.1);
    border-color: rgba(212,164,75,0.25);
    color: var(--lumi-accent);
}

/* Chess.com: use their signature green when active */
.hp-connect__pill[data-platform="chesscom"].active {
    background: rgba(129,182,76,0.12);
    border-color: rgba(129,182,76,0.35);
    color: #81b64c;
}

/* Brand-lockup pills: each pill renders the platform's actual brand mark
   (icon + wordmark), not generic text. Pill becomes a uniform-height
   container; lockup decides its own internal proportions. */
.hp-connect__pill--lockup {
    padding: 10px 18px;
    height: 48px;
    min-width: 168px;
    justify-content: center;
    white-space: nowrap;
}

.hp-connect__lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Chess.com — official horizontal lockup PNG (white wordmark + green pawn).
   Source: chess.com/bundles/web/images/brand/chesscom_logo_white.png */
.hp-connect__lockup--chesscom {
    height: 26px;
    width: auto;
    display: block;
    filter: saturate(1) brightness(1);
    transition: opacity 0.15s;
}

.hp-connect__pill[data-platform="chesscom"]:not(.active) .hp-connect__lockup--chesscom {
    opacity: 0.62;
}

/* Lichess lockup — official knight SVG + lichess.org wordmark */
.hp-connect__lockup--lichess {
    color: #F0EBE0;
}
.hp-connect__lockup--lichess svg { display: block; }
.hp-connect__wordmark {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: currentColor;
    white-space: nowrap;
}
.hp-connect__wordmark-tld {
    display: inline;
    opacity: 1;
    font-weight: 500;
}
.hp-connect__pill[data-platform="lichess"]:not(.active) .hp-connect__lockup--lichess {
    color: rgba(240,235,224,0.55);
}

.hp-connect__input-row {
    display: flex;
    gap: 8px;
}

.hp-connect__input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--lumi-text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

.hp-connect__input:focus { border-color: var(--lumi-border-focus); }
.hp-connect__input::placeholder { color: var(--lumi-text-muted); }

.hp-connect__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px 0 24px;
    background: var(--lumi-accent);
    color: var(--lumi-accent-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--lumi-ease);
    white-space: nowrap;
}

.hp-connect__btn > span { line-height: 1; }
.hp-connect__btn .hp-connect__btn-arrow {
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp-connect__btn:hover { background: var(--lumi-accent-hover); box-shadow: var(--lumi-glow-btn); }
.hp-connect__btn:hover .hp-connect__btn-arrow { transform: translateX(3px); }
.hp-connect__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hp-connect__status {
    font-size: 12px;
    margin-top: 8px;
    min-height: 18px;
}

.hp-connect__status--error { color: var(--lumi-error); }
.hp-connect__status--success { color: var(--lumi-success); }
.hp-connect__status--loading { color: var(--lumi-text-muted); }

.hp-connect__status a {
    color: inherit;
    text-decoration: underline;
}

/* ── Connect Modal ─────────────────────────────────────────── */

.hp-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.15s ease both;
}

.hp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.hp-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s ease both;
}

.hp-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 0;
}

.hp-modal__title-wrap {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    min-width: 0;
}

.hp-modal__title-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(212, 164, 75, 0.12);
    color: var(--lumi-accent, #D4A44B);
}

.hp-modal__title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    margin-bottom: 2px;
}

.hp-modal__sub {
    display: block;
    font-size: 13px;
    color: var(--lumi-text-secondary);
}

.hp-modal__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--lumi-text-dim);
    cursor: pointer;
    transition: all 0.15s;
}

.hp-modal__close:hover {
    color: var(--lumi-text-muted);
    background: rgba(255, 255, 255, 0.04);
}

.hp-modal__body {
    padding: 18px 24px 24px;
}

.hp-modal__body .hp-connect__input-row { margin-top: 0; }

/* Inline mode — used as the zero-state connect card (no backdrop, in-flow) */
.hp-modal--inline {
    position: static;
    inset: auto;
    display: block;
    padding: 0;
    margin: 0;
    z-index: auto;
    animation: none;
}
.hp-modal--inline .hp-modal__backdrop { display: none; }
.hp-modal--inline .hp-modal__dialog {
    max-width: 580px;
    margin: 0;
    box-shadow: none;
    animation: none;
}
.hp-modal--inline .hp-modal__close { display: none; }
/* Close button is hidden in inline mode — don't let space-between push the title right. */
.hp-modal--inline .hp-modal__header { justify-content: flex-start; }

/* Zero-state games section: no heading, card sits flush under action cards. */
.hp-games--zero .hp-games__empty {
    padding: 0;
    text-align: left;
}

/* ── Profile Header ────────────────────────────────────────── */

.hp-prof__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.hp-prof__avatar {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--lumi-bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: var(--lumi-text-muted);
    text-transform: uppercase;
    flex-shrink: 0;
}

.hp-prof__info { flex: 1; }

.hp-prof__name {
    font-size: 24px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.hp-prof__handle {
    font-size: 13px;
    color: var(--lumi-text-secondary);
    margin: 2px 0 0;
}

.hp-prof__disconnect {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: var(--lumi-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.hp-prof__disconnect:hover {
    color: var(--lumi-error);
    border-color: rgba(207,110,110,0.3);
    background: rgba(207,110,110,0.06);
}

/* ── Rating Pills ──────────────────────────────────────────── */

.hp-prof__ratings {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.hp-rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 13px;
    color: var(--lumi-text-secondary);
}

.hp-rating-pill__icon {
    display: flex;
    align-items: center;
    color: var(--lumi-text-muted);
}

.hp-rating-pill__label {
    font-weight: 500;
}

.hp-rating-pill__val {
    font-weight: 800;
    color: var(--lumi-text-primary);
    letter-spacing: -0.02em;
}

/* ── Connected Accounts Bar ────────────────────────────────── */

/* Connected-accounts row is permanently hidden — replaced by the Play CTA
   on post-connect /home. The DOM stays so connect/disconnect plumbing
   (renderAccountChips, the connect modal trigger) still has a target. */
.hp-accounts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 20px;
}

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

.hp-accounts__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hp-accounts__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hp-accounts__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lumi-text-primary);
    animation: fadeIn 0.2s ease both;
}

.hp-accounts__chip--chesscom {
    /* Chess.com brand green #81B64C — same tone as the official lockup */
    background: rgba(129,182,76,0.10);
    border: 1px solid rgba(129,182,76,0.28);
}

.hp-accounts__chip--lichess {
    /* Neutral cream over warm-dark — matches Lichess's monochrome brand */
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(240,235,224,0.14);
}

/* Full brand lockup inside the chip — matches the pre-connect connect pills.
   Chess.com renders the official PNG (pawn + white wordmark); Lichess
   renders the knight SVG + "lichess.org" wordmark inline. */
.hp-accounts__chip-lockup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 18px;
    line-height: 1;
}

.hp-accounts__chip-lockup--chesscom {
    height: 24px;
    width: auto;
}
img.hp-accounts__chip-lockup--chesscom {
    display: block;
}

.hp-accounts__chip-lockup--lichess {
    color: #E8E4E0;
}
.hp-accounts__chip-lockup--lichess svg {
    width: 18px;
    height: 18px;
    display: block;
}
.hp-accounts__chip-wordmark {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: currentColor;
    white-space: nowrap;
}
.hp-accounts__chip-wordmark-tld {
    display: inline;
    opacity: 1;
    font-weight: 500;
}

.hp-accounts__chip-user {
    font-weight: 600;
    color: var(--lumi-text-primary);
}

.hp-accounts__chip-ratings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 2px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.08);
}

.hp-accounts__chip-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    font-variant-numeric: tabular-nums;
}

.hp-accounts__chip-rating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hp-accounts__chip-rating-icon svg {
    width: 14px;
    height: 14px;
}

.hp-accounts__chip-rating-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lumi-text-secondary);
}

.hp-accounts__chip-disconnect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--lumi-text-muted);
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    transition: all 0.15s;
}

.hp-accounts__chip-disconnect:hover {
    color: var(--lumi-error);
    background: rgba(207,110,110,0.1);
}

/* ── Chip popover menu ──────────────────────────────────────────────
   The chip itself is a button trigger; this is the menu that drops
   under it on click. Items: View profile / Refresh / Disconnect. */
.hp-accounts__chip-wrap {
    position: relative;
    display: inline-flex;
}

/* Button-state polish for the chip itself (chip is now a <button>). */
.hp-accounts__chip {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.10);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.hp-accounts__chip:hover {
    border-color: rgba(212,164,75,0.35);
    background: rgba(255,255,255,0.07);
}
.hp-accounts__chip:focus-visible {
    outline: 2px solid rgba(212,164,75,0.55);
    outline-offset: 2px;
}
.hp-accounts__chip[aria-expanded="true"] {
    border-color: rgba(212,164,75,0.55);
    background: rgba(212,164,75,0.06);
}

/* Platform tints override base bg so brand stays legible. */
.hp-accounts__chip.hp-accounts__chip--chesscom {
    background: rgba(129,182,76,0.10);
    border-color: rgba(129,182,76,0.28);
}
.hp-accounts__chip.hp-accounts__chip--chesscom:hover {
    background: rgba(129,182,76,0.16);
    border-color: rgba(129,182,76,0.45);
}
.hp-accounts__chip.hp-accounts__chip--lichess {
    background: rgba(255,255,255,0.05);
    border-color: rgba(240,235,224,0.14);
}
.hp-accounts__chip.hp-accounts__chip--lichess:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(240,235,224,0.24);
}

.hp-accounts__chip-caret {
    display: inline-flex;
    align-items: center;
    color: var(--lumi-text-muted);
    margin-left: 2px;
    transition: transform 0.15s, color 0.15s;
}
.hp-accounts__chip:hover .hp-accounts__chip-caret,
.hp-accounts__chip[aria-expanded="true"] .hp-accounts__chip-caret {
    color: var(--lumi-text-primary);
}
.hp-accounts__chip[aria-expanded="true"] .hp-accounts__chip-caret {
    transform: rotate(180deg);
}

.hp-accounts__chip-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--lumi-bg-elevated, #494643);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
    z-index: 50;
    animation: hpChipMenuIn 0.12s ease-out;
}
.hp-accounts__chip-menu[hidden] { display: none; }

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

.hp-accounts__chip-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--lumi-text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    box-sizing: border-box;
}
.hp-accounts__chip-menu-item:hover {
    background: rgba(255,255,255,0.06);
}
.hp-accounts__chip-menu-item svg {
    flex-shrink: 0;
    color: var(--lumi-text-secondary);
}
.hp-accounts__chip-menu-item:hover svg {
    color: var(--lumi-text-primary);
}
.hp-accounts__chip-menu-item--danger {
    color: #E8A2A2;
}
.hp-accounts__chip-menu-item--danger svg { color: #E8A2A2; }
.hp-accounts__chip-menu-item--danger:hover {
    background: rgba(207,110,110,0.12);
    color: #F2BFBF;
}
.hp-accounts__chip-menu-item--danger:hover svg { color: #F2BFBF; }

.hp-accounts__chip-menu-sep {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 2px;
}

.hp-accounts__add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: none;
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 8px;
    color: var(--lumi-text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.hp-accounts__add:hover {
    border-color: rgba(255,255,255,0.2);
    color: var(--lumi-text-primary);
    background: rgba(255,255,255,0.03);
}

/* Platform tag (inline next to time control) */
.gcard__platform {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    line-height: 1;
}

.gcard__platform--chesscom {
    background: rgba(129,182,76,0.12);
    border: 1px solid rgba(129,182,76,0.24);
}

.gcard__platform--lichess {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(240,235,224,0.12);
    color: #E8E4E0;
}

.gcard__platform-lockup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gcard__platform-lockup--chesscom {
    height: 20px;
    width: auto;
    display: block;
}
.gcard__platform-lockup--lichess svg {
    width: 20px;
    height: 20px;
    display: block;
}
.gcard__platform-wordmark {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.01em;
    color: currentColor;
    white-space: nowrap;
}
.gcard__platform-wordmark-tld {
    display: inline;
    opacity: 1;
    font-weight: 500;
}

/* ── Instant Profile ──────────────────────────────────────── */

.hp-instant {
    margin-bottom: 20px;
}

.hp-instant__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.hp-instant__card {
    background: var(--lumi-bg-body);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px 16px;
}

.hp-instant__card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lumi-text-secondary);
    margin-bottom: 10px;
}

.hp-instant__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.hp-instant__row:last-child { margin-bottom: 0; }

.hp-instant__row-label {
    font-size: 12px;
    color: var(--lumi-text-secondary);
    width: 50px;
    flex-shrink: 0;
}

.hp-instant__row-label--wide {
    width: auto;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hp-instant__row-bar {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.hp-instant__row-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.hp-instant__row-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hp-instant__row-count {
    font-size: 10px;
    color: var(--lumi-text-secondary);
    width: 22px;
    text-align: right;
}

.hp-instant__card--stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.hp-instant__stat-val {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.hp-instant__stat-lbl {
    display: block;
    font-size: 10px;
    color: var(--lumi-text-secondary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hp-instant__tip {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(212,164,75,0.06);
    border: 1px solid rgba(212,164,75,0.12);
    border-radius: 8px;
    font-size: 12px;
    color: var(--lumi-accent);
    line-height: 1.4;
}

/* ── Training CTA (hero card) ─────────────────────────────── */

.hp-train-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(255, 191, 0, 0.12) 0%, rgba(255, 184, 77, 0.06) 100%);
    border: 1px solid rgba(255, 191, 0, 0.25);
    border-radius: 14px;
    margin-bottom: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hp-train-cta:hover {
    background: linear-gradient(135deg, rgba(255, 191, 0, 0.18) 0%, rgba(255, 184, 77, 0.1) 100%);
    border-color: rgba(255, 191, 0, 0.4);
}

.hp-train-cta__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 191, 0, 0.15);
    border-radius: 10px;
    color: #FFBF00;
}

.hp-train-cta__text {
    flex: 1;
    min-width: 0;
}

.hp-train-cta__title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #FFBF00;
    margin-bottom: 2px;
}

.hp-train-cta__sub {
    display: block;
    font-size: 13px;
    color: var(--lumi-text-primary);
    line-height: 1.4;
}

.hp-train-cta__arrow {
    flex-shrink: 0;
    color: rgba(255, 191, 0, 0.5);
}

/* ── Training CTA (primary, above cards) ──────────────────── */

.hp-train-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(212,164,75,0.08) 0%, rgba(212,164,75,0.03) 100%);
    border: 1px solid rgba(212,164,75,0.18);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.hp-train-cta:hover {
    border-color: rgba(212,164,75,0.3);
    box-shadow: 0 4px 20px rgba(212,164,75,0.08);
}

.hp-train-cta__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(212,164,75,0.12);
    color: var(--lumi-accent);
    flex-shrink: 0;
}

.hp-train-cta__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hp-train-cta__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    letter-spacing: -0.01em;
}

.hp-train-cta__sub {
    font-size: 12px;
    color: var(--lumi-text-muted);
}

.hp-train-cta__pills {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.hp-train-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.hp-train-pill--retain {
    background: rgba(212,164,75,0.12);
    color: #d4a44b;
}

.hp-train-pill--repair {
    background: rgba(229,115,115,0.12);
    color: #e57373;
}

.hp-train-pill--grow {
    background: rgba(107,159,212,0.12);
    color: #6b9fd4;
}

.hp-train-cta__arrow {
    flex-shrink: 0;
    color: var(--lumi-accent);
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.15s;
}

.hp-train-cta:hover .hp-train-cta__arrow {
    opacity: 0.8;
    transform: translateX(2px);
}

/* ── Action Cards ──────────────────────────────────────────── */

.hp-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 28px;
}

.hp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--lumi-bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hp-card:hover {
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.hp-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.hp-card--mistakes .hp-card__icon {
    background: rgba(212,164,75,0.1);
    color: var(--lumi-accent);
}

.hp-card--puzzles .hp-card__icon {
    background: rgba(212,164,75,0.1);
    color: var(--lumi-accent);
}

.hp-card--insights .hp-card__icon {
    background: rgba(107,159,212,0.1);
    color: var(--lumi-info);
}

.hp-card--play .hp-card__icon {
    background: rgba(212,164,75,0.1);
    color: var(--lumi-accent);
}

.hp-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hp-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--lumi-text-primary);
}

.hp-card__sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--lumi-text-secondary);
}

.hp-card__arrow {
    flex-shrink: 0;
    color: var(--lumi-text-dim);
    transition: color 0.15s, transform 0.15s;
}

.hp-card:hover .hp-card__arrow {
    color: var(--lumi-text-muted);
    transform: translateX(2px);
}

.hp-card--analyze .hp-card__icon {
    background: rgba(212,164,75,0.1);
    color: var(--lumi-accent);
}

.hp-card--mistakes:hover { border-color: rgba(229,115,115,0.2); }
.hp-card--puzzles:hover { border-color: rgba(212,164,75,0.15); }
.hp-card--insights:hover { border-color: rgba(107,159,212,0.15); }
.hp-card--play:hover { border-color: rgba(212,164,75,0.15); }
.hp-card--profile:hover { border-color: rgba(129,182,76,0.15); }

.hp-card--mistakes .hp-card__icon {
    background: rgba(229,115,115,0.1);
    color: #e57373;
}

.hp-card--profile .hp-card__icon {
    background: rgba(129,182,76,0.1);
    color: #81b64c;
}
.hp-card--analyze:hover { border-color: rgba(212,164,75,0.15); }

/* ── Coaching Insights ──────────────────────────────────────── */

.hp-coaching {
    background: var(--lumi-bg-body);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 20px 24px 24px;
    margin-top: 12px;
}

.hp-coaching__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.hp-coaching__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    margin: 0;
}
.hp-coaching__header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hp-coaching__badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(107,159,212,0.1);
    color: var(--lumi-info);
    border: 1px solid rgba(107,159,212,0.15);
}
.hp-coaching__mini-stats {
    display: flex;
    gap: 12px;
}
.hp-coaching__mini-stat {
    font-size: 11px;
    color: var(--lumi-text-secondary);
}
.hp-coaching__mini-stat strong {
    color: var(--lumi-text-primary);
    font-weight: 700;
}

.hp-coaching__body {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
}
.hp-coaching__chart {
    flex-shrink: 0;
}
.hp-coaching__chart canvas {
    display: block;
}

.hp-coaching__scores {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.hp-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hp-score-row__label {
    font-size: 12px;
    color: var(--lumi-text-primary);
    width: 110px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hp-score-row__bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}
.hp-score-row__fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.hp-score-row__val {
    font-size: 12px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.hp-score-row--insufficient .hp-score-row__label,
.hp-score-row--insufficient .hp-score-row__val {
    color: var(--lumi-text-muted);
}

/* Smart Coach Insights */
.hp-coach {
    margin-bottom: 18px;
}
.hp-coach__main {
    background: var(--lumi-bg-body);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 10px;
}
.hp-coach__headline {
    font-size: 14px;
    font-weight: 700;
    color: var(--lumi-info);
    margin-bottom: 6px;
}
.hp-coach__text {
    font-size: 13px;
    color: var(--lumi-text-primary);
    line-height: 1.55;
}
.hp-coach__patterns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.hp-coach__pattern {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--lumi-bg-body);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--lumi-text-primary);
    line-height: 1.5;
}
.hp-coach__pattern-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--lumi-accent);
    margin-top: 1px;
}
.hp-coach__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hp-coach__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(107,159,212,0.08);
    border: 1px solid rgba(107,159,212,0.15);
    border-radius: 8px;
    color: var(--lumi-info);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
}
.hp-coach__action:hover {
    background: rgba(107,159,212,0.14);
    border-color: rgba(107,159,212,0.25);
}
.hp-coach__action-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Progress Chart ──────────────────────────────────────── */

.hp-progress {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.hp-progress__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.hp-progress__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--lumi-text-primary);
}

.hp-progress__improvement {
    font-size: 12px;
    font-weight: 700;
    color: var(--lumi-accent);
    padding: 2px 8px;
    background: rgba(212,164,75,0.08);
    border-radius: 4px;
}

.hp-progress canvas {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 640px) {
    .hp-coaching__body {
        flex-direction: column;
        gap: 16px;
    }
    .hp-coaching__scores {
        width: 100%;
    }
    .hp-score-row__label { width: 90px; }
}

/* ── Analyze Your Games ────────────────────────────────────── */

.hp-games__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.hp-games__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.hp-games__filters {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Platform sub-row sits under the time-class row when 2+ accounts are
   connected. Small top margin so the two filter rows read as separate
   groups instead of one wrapped line. */
.hp-games__filters--platform {
    margin-top: 8px;
}

.hp-games__filter {
    padding: 5px 12px;
    background: none;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    color: var(--lumi-text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.hp-games__filter:hover {
    color: var(--lumi-text-secondary);
    border-color: rgba(255,255,255,0.1);
}

.hp-games__filter.active {
    background: rgba(255,255,255,0.08);
    color: var(--lumi-text-primary);
    border-color: rgba(255,255,255,0.12);
}

.hp-games__depth {
    padding: 4px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--lumi-text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 22px;
}

.hp-games__depth:hover {
    border-color: rgba(255,191,0,0.3);
}

.hp-games__refresh {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    color: var(--lumi-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    margin-left: 4px;
}

.hp-games__refresh:hover {
    color: var(--lumi-text-secondary);
    border-color: rgba(255,255,255,0.1);
}

.hp-games__refresh.spinning svg {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Game Cards Grid ───────────────────────────────────────── */

.hp-games__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.hp-games__empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--lumi-text-secondary);
    font-size: 14px;
}

.hp-games__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--lumi-text-secondary);
    font-size: 14px;
}

.hp-games__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ── Individual Game Card ──────────────────────────────────── */

.gcard {
    background: var(--lumi-bg-body);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s;
}

.gcard:hover {
    border-color: rgba(255,255,255,0.1);
}

/* Top row: time control + result */
.gcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gcard__tc {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lumi-text-primary);
}

.gcard__tc-icon {
    display: flex;
    color: var(--lumi-text-secondary);
}

/* Scoreboard-style split pill: colored word + darker score tile */
.gcard__result {
    display: inline-flex;
    align-items: stretch;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    overflow: hidden;
    letter-spacing: 0.02em;
    line-height: 1;
}

.gcard__result-label {
    padding: 4px 7px;
    display: inline-flex;
    align-items: center;
}

.gcard__result-score {
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: rgba(0,0,0,0.35);
    border-left: 1px solid rgba(255,255,255,0.08);
}

.gcard__result--win {
    color: var(--lumi-success);
    background: rgba(93,182,125,0.14);
}

.gcard__result--loss {
    color: var(--lumi-error);
    background: rgba(207,110,110,0.14);
}

.gcard__result--draw {
    color: var(--lumi-text-muted);
    background: rgba(255,255,255,0.08);
}

/* Players */
.gcard__players {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gcard__player {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.gcard__color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.gcard__color--w {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.15);
}

.gcard__color--b {
    background: var(--lumi-bg-body);
    border: 1px solid rgba(255,255,255,0.15);
}

.gcard__pname-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.gcard__flag {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.gcard__flag:empty {
    display: none;
}

.gcard__pname {
    font-weight: 600;
    color: var(--lumi-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.gcard__pname--me {
    color: var(--lumi-text-primary);
    font-weight: 700;
}

.gcard__prating {
    font-size: 12px;
    font-weight: 600;
    color: var(--lumi-text-primary);
}

/* Opening */
.gcard__opening {
    font-size: 13px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    padding: 5px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer: moves + date + analyze button */
.gcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2px;
}

.gcard__meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--lumi-text-secondary);
}

.gcard__analyze {
    padding: 6px 14px;
    background: var(--lumi-accent);
    color: var(--lumi-accent-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--lumi-ease);
}

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

/* ── Entrance Animation ────────────────────────────────────── */

.hp-profile {
    animation: fadeIn 0.35s ease both;
}

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

/* ── Wide screens ──────────────────────────────────────────── */

@media (min-width: 1400px) {
    .hp-dash {
        max-width: 1200px;
        /* .app-main applies margin-left: 186px to clear the fixed side-nav.
           With only margin-right: auto, all the extra slack on wide screens
           gets dumped on the right and content sits glued to the nav. Split
           the slack so the content is centered within the post-nav viewport
           area (i.e. the visible region to the right of the nav). */
        margin-left: max(186px, calc((100% - 1014px) / 2));
        margin-right: auto;
        padding: 28px 32px 48px;
    }
}

/* ── Tablet ────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .hp-games__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hp-instant__grid {
        grid-template-columns: 1fr 1fr;
    }
    .hp-train-cta__pills {
        display: none;
    }
}

/* Mobile homepage wordmark — hidden on desktop, shown at ≤768px. */
.hp-logo {
    display: none;
}

/* Long/short title swap — long on desktop, short on mobile. */
.hp-card__title-long { display: inline; }
.hp-card__title-short { display: none; }

/* ── Mobile — sidebar becomes bottom nav, reclaim full width ─ */

@media (max-width: 768px) {
    .hp-dash {
        max-width: 100%;
        margin-right: 0;
    }
    /* Show the Lumichess wordmark (with the wood-tile mark in front) instead of the greeting */
    .hp-logo {
        display: inline-flex;
        align-items: center;
        /* Gap is 0 — the wordmark spans (.logo-amber/.logo-i/.logo-cream)
           are flex items in inline-flex and a non-zero gap would inject
           space between "Lum", "ı", and "chess". Mark separation comes
           from its own margin-right. */
        gap: 0;
        text-decoration: none;
        font-family: 'Satoshi', sans-serif;
        font-weight: 900;
        font-size: 28px;
        letter-spacing: -0.03em;
        line-height: 1;
        white-space: nowrap;
        margin-bottom: 4px;
    }
    .hp-logo__mark {
        width: 28px;
        height: 28px;
        margin-right: 8px;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.4);
        flex-shrink: 0;
    }
    .hp-logo__mark svg {
        display: block;
        width: 100%;
        height: 100%;
    }
    .hp-logo .logo-amber { color: #D4A44B; }
    .hp-logo .logo-cream { color: #E8E4DF; }
    .hp-logo .logo-i {
        position: relative;
        color: #D4A44B;
    }
    .hp-logo .logo-diamond {
        position: absolute;
        pointer-events: none;
        overflow: visible;
        width: 28px;
        height: 28px;
        top: 2px;
        left: calc(50% + 1px);
        transform: translate(-50%, -50%);
    }
    .hp-greeting {
        display: none;
    }

    /* Connected accounts — crisp single-row strip. Review Your
       Games is the hero so this stays as compact as possible:
       small avatar, username, inline ratings, tiny + button. */
    .hp-accounts {
        position: relative;
        margin-bottom: 12px;
        gap: 0;
        max-width: 100%;
    }
    .hp-accounts__label {
        display: none;
    }
    .hp-accounts__chips {
        flex: 1;
        min-width: 0;
    }
    /* Chips wrapper item — let it grow with the row so the chip inside
       can shrink to fit when the inline "+ Lichess" hint sits beside
       it. Without flex:1 the wrap stays at intrinsic content width and
       the chip overflows behind the add button on narrow Android. */
    .hp-accounts__chip-wrap {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
    }
    .hp-accounts__row {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .hp-accounts__chip {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        padding: 6px 8px 6px 12px;
        border-radius: 10px;
        background: rgba(255,255,255,0.025);
        border: 1px solid rgba(255,255,255,0.07);
        overflow: hidden;
        min-height: 44px;
    }
    /* Drop the Lumichess-tile-looking avatar (rounded square + king
       silhouette) — too close to the brand mark; the chess.com /
       lichess platform logo inside the chip already carries identity. */
    .hp-accounts__chip::before { display: none; }
    .hp-accounts__chip--chesscom {
        background: linear-gradient(135deg, rgba(129,182,76,0.05), rgba(93,182,125,0.015));
        border-color: rgba(129,182,76,0.2);
    }
    .hp-accounts__chip--lichess {
        background: linear-gradient(135deg, rgba(107,159,212,0.05), rgba(90,140,200,0.015));
        border-color: rgba(107,159,212,0.2);
    }

    /* Small avatar badge with chess king silhouette */
    .hp-accounts__chip::before {
        content: '';
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 8px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 18px 18px;
    }
    .hp-accounts__chip--chesscom::before {
        background-color: rgba(129,182,76,0.18);
        border: 1px solid rgba(129,182,76,0.32);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8d277' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v4M10 4h4'/><path d='M12 6c-3 4-5 6-5 9a5 5 0 0 0 10 0c0-3-2-5-5-9z'/><path d='M7 16c2 2 8 2 10 0'/><path d='M6 20h12'/></svg>");
    }
    .hp-accounts__chip--lichess::before {
        background-color: rgba(107,159,212,0.18);
        border: 1px solid rgba(107,159,212,0.32);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ec5e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v4M10 4h4'/><path d='M12 6c-3 4-5 6-5 9a5 5 0 0 0 10 0c0-3-2-5-5-9z'/><path d='M7 16c2 2 8 2 10 0'/><path d='M6 20h12'/></svg>");
    }

    /* Username inline, single line */
    .hp-accounts__chip-user {
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        color: var(--lumi-text-primary);
        min-width: 0;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hp-accounts__chip-platform {
        display: none;
    }

    /* Rating values inline after username with subtle separator dots */
    .hp-accounts__chip-ratings {
        display: inline-flex;
        align-items: center;
        gap: 0;
        border-left: 1px solid rgba(255,255,255,0.1);
        padding-left: 8px;
        margin-left: auto;
        flex-shrink: 0;
    }
    .hp-accounts__chip-rating {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 0 6px 0 0;
        background: none;
        border: none;
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--lumi-text-primary);
    }
    .hp-accounts__chip-rating + .hp-accounts__chip-rating {
        border-left: 1px solid rgba(255,255,255,0.08);
        padding-left: 6px;
    }
    .hp-accounts__chip-rating-label {
        display: none;
    }
    .hp-accounts__chip-rating-icon {
        display: inline-flex;
        opacity: 0.75;
    }
    .hp-accounts__chip-rating-icon svg {
        width: 10px;
        height: 10px;
    }
    .hp-accounts__chip-disconnect {
        display: none;
    }

    /* "+ <Platform>" add button sits inline next to the chip — a compact
       dashed pill, not a full-width box on a separate row. Label is short
       ("Lichess" / "Chess.com") so it fits beside the chip without
       crowding the rating column. */
    .hp-accounts__add {
        position: static;
        transform: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: auto;
        min-height: 44px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 10px;
        background: transparent;
        border: 1px dashed rgba(255,255,255,0.18);
        color: var(--lumi-text-secondary, rgba(240,237,232,0.78));
        flex-shrink: 0;
        margin-left: 0;
        white-space: nowrap;
    }
    .hp-accounts__add:hover {
        border-color: var(--lumi-accent, #D4A44B);
        color: var(--lumi-accent, #D4A44B);
    }
    .hp-accounts__add svg {
        width: 12px;
        height: 12px;
    }
    .hp-accounts__add span {
        display: inline;
    }

    /* Force single-column game grid on mobile. Desktop uses 2/3 cols
       but at 360px the 2-col minmax(0, 1fr) math produced 461px cards
       in a 321px grid — each card overflowed the viewport by ~100px,
       completely hiding the Review button off the right edge.

       min-width: 0 on the grid child (.gcard) is essential: grid's
       default min-content sizing would otherwise blow the column out
       to the widest intrinsic child (the nowrap opening pill). */
    .hp-games__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .gcard {
        min-width: 0;
    }
    .gcard__top,
    .gcard__players,
    .gcard__player,
    .gcard__pname-wrap,
    .gcard__foot,
    .gcard__opening {
        min-width: 0;
    }

    /* Compact game cards so more games fit at once. */
    .gcard {
        padding: 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }
    .gcard__tc {
        font-size: 11px;
        gap: 4px;
    }
    .gcard__tc-icon svg {
        width: 14px;
        height: 14px;
    }
    .gcard__platform {
        font-size: 10px;
        padding: 2px 5px;
    }
    .gcard__result {
        font-size: 10px;
    }
    .gcard__result-label,
    .gcard__result-score {
        padding: 3px 6px;
    }
    .gcard__players {
        gap: 3px;
    }
    .gcard__player {
        font-size: 12px;
        gap: 5px;
    }
    .gcard__color {
        width: 10px;
        height: 10px;
    }
    .gcard__pname {
        font-size: 12px;
    }
    .gcard__prating {
        font-size: 11px;
    }
    .gcard__opening {
        font-size: 11px;
        padding: 4px 7px;
        border-radius: 5px;
    }
    .gcard__foot {
        padding-top: 0;
    }
    .gcard__meta {
        font-size: 11px;
    }
    .gcard__analyze {
        padding: 5px 12px;
        font-size: 11px;
    }

    /* Connect Account: stack input and button so the button never
       overflows its card at narrow viewports. box-sizing: border-box
       keeps width:100% honest when padding/border is added. */
    .hp-connect__input-row {
        flex-direction: column;
        gap: 10px;
    }
    .hp-connect__input {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }
    .hp-connect__btn {
        box-sizing: border-box;
        width: 100%;
        padding: 12px 16px;
    }


    /* 1×4 horizontal chip row of quick actions. Single-word labels
       via the title-short spans, so we can set a fixed box height
       (~80px) and fill it with a chunky icon + bigger label. */
    .hp-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-bottom: 12px;
    }
    .hp-card {
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 4px;
        min-height: 0;
        border-radius: 10px;
    }
    .hp-card__icon {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }
    .hp-card__icon svg {
        width: 24px;
        height: 24px;
    }
    .hp-card__text {
        flex: 0 0 auto;
        align-items: center;
        text-align: center;
        gap: 0;
    }
    .hp-card__title {
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }
    .hp-card__title-long { display: none; }
    .hp-card__title-short { display: inline; }
    .hp-card__sub {
        display: none;
    }
    .hp-card__arrow {
        display: none;
    }
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .hp-dash {
        padding: 16px 12px 40px;
    }

    .hp-prof__header {
        gap: 12px;
    }

    .hp-prof__avatar {
        width: 48px;
        height: 48px;
        font-size: 20px;
        border-radius: 10px;
    }

    .hp-prof__name {
        font-size: 20px;
    }

    /* .hp-cards stays 2-col on mobile — see 768px block for tile styling */

    .hp-instant__grid {
        grid-template-columns: 1fr;
    }

    .hp-games__grid {
        grid-template-columns: 1fr;
    }

    .hp-games__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Mobile filter-row overrides moved to the end of this file — see
       "Review-games filter row mobile layout" block — so source order
       beats the base .hp-depth-picker__btn rules that come later. */
}

/* ── Streak Card ──────────────────────────────────────────── */

.hp-streak {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: var(--lumi-bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-bottom: 16px;
}
.hp-streak__left {
    text-align: center;
    min-width: 60px;
}
.hp-streak__count {
    font-size: 28px;
    font-weight: 700;
    color: var(--lumi-accent);
    line-height: 1;
}
.hp-streak__label {
    font-size: 11px;
    color: var(--lumi-text-primary);
    margin-top: 4px;
}
.hp-streak__week {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: center;
}
.hp-streak__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.hp-streak__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    transition: background 0.3s;
}
.hp-streak__dot--active {
    background: var(--lumi-accent);
    box-shadow: 0 0 8px rgba(212,164,75,0.4);
}
.hp-streak__dot--today {
    border: 2px solid rgba(212,164,75,0.5);
}
.hp-streak__day-label {
    font-size: 10px;
    color: var(--lumi-text-secondary);
}
.hp-streak__right {
    font-size: 12px;
    color: var(--lumi-text-secondary);
    min-width: 80px;
    text-align: right;
}

/* ── Loop Narrative Card ──────────────────────────────────── */

.loop-card {
    margin-bottom: 16px;
}

.loop-card__inner {
    background: var(--lumi-bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Phase pill (top-left label) */
.loop-card__phase {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 6px;
    align-self: flex-start;
}
.loop-card__phase-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.loop-card__phase--analyze {
    background: rgba(107,159,212,0.1);
    color: var(--lumi-info);
    border: 1px solid rgba(107,159,212,0.15);
}
.loop-card__phase--detect {
    background: rgba(231,72,86,0.08);
    color: #e74856;
    border: 1px solid rgba(231,72,86,0.15);
}
.loop-card__phase--train {
    background: rgba(129,182,76,0.08);
    color: #81b64c;
    border: 1px solid rgba(129,182,76,0.15);
}
.loop-card__phase--improve {
    background: rgba(212,164,75,0.08);
    color: var(--lumi-accent);
    border: 1px solid rgba(212,164,75,0.15);
}
.loop-card__phase--balanced {
    background: rgba(46,196,182,0.08);
    color: #2ec4b6;
    border: 1px solid rgba(46,196,182,0.15);
}

/* Body */
.loop-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.loop-card__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.loop-card__desc {
    font-size: 14px;
    color: var(--lumi-text-primary);
    line-height: 1.55;
}

/* Score bar (for diagnosed state) */
.loop-card__score {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 2px;
}
.loop-card__score-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    max-width: 240px;
}
.loop-card__score-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}
.loop-card__score-val {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.loop-card__score-val small {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.6;
    margin-left: 1px;
}

/* Delta badge (for improved state) */
.loop-card__delta {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #81b64c;
    background: rgba(129,182,76,0.1);
    padding: 2px 8px;
    border-radius: 5px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Progress bar (for building state) */
.loop-card__bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.loop-card__bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.loop-card__bar-fill {
    height: 100%;
    background: var(--lumi-info);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.loop-card__bar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--lumi-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* CTA button — color/bg/border set inline by JS per dimension */
.loop-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s;
}
.loop-card__cta:hover {
    filter: brightness(1.25);
}
.loop-card__cta--secondary {
    font-size: 13px;
    padding: 8px 16px;
    opacity: 0.85;
}
.loop-card__cta--secondary:hover { opacity: 1; }

.loop-card__actions {
    display: flex;
    gap: 10px;
}

@media (max-width: 640px) {
    .loop-card__inner {
        padding: 16px 18px;
    }
    .loop-card__title {
        font-size: 16px;
    }
}

/* ── Weekly Report ───────────────────────────────────────── */

.hp-weekly {
    padding: 16px 20px;
    background: var(--lumi-bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-bottom: 16px;
}
.hp-weekly__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.hp-weekly__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    margin: 0;
}
.hp-weekly__share {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 4px 8px;
    color: var(--lumi-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.hp-weekly__share:hover {
    color: var(--lumi-text-secondary);
    border-color: rgba(255,255,255,0.2);
}
.hp-weekly__grid {
    display: flex;
    gap: 12px;
}
.hp-weekly__tile {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}
.hp-weekly__val {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    line-height: 1.2;
}
.hp-weekly__lbl {
    display: block;
    font-size: 11px;
    color: var(--lumi-text-primary);
    margin-top: 2px;
}
.hp-weekly__highlight {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(212,164,75,0.06);
    border: 1px solid rgba(212,164,75,0.12);
    border-radius: 8px;
    font-size: 13px;
    color: var(--lumi-text-primary);
    display: none;
}
.hp-weekly__delta {
    color: var(--lumi-accent);
    font-weight: 700;
}

/* ── Puzzle CTA Card ──────────────────────────────────────── */

.hp-puzzle-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: var(--lumi-radius-lg);
    padding: 24px 28px;
    margin-top: 32px;
    text-decoration: none;
    transition: border-color var(--lumi-ease), transform var(--lumi-ease), box-shadow var(--lumi-ease);
    cursor: pointer;
    max-width: 520px;
}

.hp-puzzle-card:hover {
    border-color: rgba(212,164,75,0.25);
    transform: translateY(-1px);
    box-shadow: var(--lumi-shadow-card);
}

.hp-puzzle-card:active {
    transform: translateY(0) scale(0.995);
    transition-duration: var(--lumi-ease-micro);
}

.hp-puzzle-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--lumi-radius-md);
    background: rgba(212,164,75,0.1);
    color: var(--lumi-accent);
    flex-shrink: 0;
}

.hp-puzzle-card__text {
    flex: 1;
    min-width: 0;
}

.hp-puzzle-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    margin: 0 0 4px;
}

.hp-puzzle-card__desc {
    font-size: 14px;
    color: var(--lumi-text-primary);
    margin: 0;
    line-height: 1.4;
}

.hp-puzzle-card__arrow {
    color: var(--lumi-text-dim);
    flex-shrink: 0;
    transition: color var(--lumi-ease), transform var(--lumi-ease);
}

.hp-puzzle-card:hover .hp-puzzle-card__arrow {
    color: var(--lumi-accent);
    transform: translateX(3px);
}

/* ── Pre-JS hidden state (avoids FOUC flashing connected-accounts row + filters) ── */
body.hp-loading .hp-header,
body.hp-loading .hp-accounts,
body.hp-loading .hp-play-cta,
body.hp-loading .hp-games__head,
body.hp-loading .hp-games__grid,
body.hp-loading .hp-games__empty {
    display: none !important;
}

/* Nav-user pill styles live in nav.css (unified Profile/Sign in pill) */

/* ── Signup nudge popup (guest mode, after engagement) ─────── */
.hp-nudge {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hp-nudge-fade 0.2s ease-out;
}

.hp-nudge__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hp-nudge__dialog {
    position: relative;
    width: min(92vw, 420px);
    background: var(--lumi-bg-card, #1e1e1b);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 32px 28px 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
    animation: hp-nudge-pop 0.22s ease-out;
}

.hp-nudge__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--lumi-text-secondary, rgba(255, 255, 255, 0.55));
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.hp-nudge__close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--lumi-text-primary, #fff);
}

.hp-nudge__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 164, 75, 0.12);
    color: var(--lumi-accent, #D4A44B);
}

.hp-nudge__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--lumi-text-primary, #fff);
}

.hp-nudge__body {
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 22px;
    color: var(--lumi-text-secondary, rgba(255, 255, 255, 0.7));
}

.hp-nudge__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hp-nudge__cta {
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    text-align: center;
    font-family: inherit;
    transition: all 0.12s;
}

.hp-nudge__cta--primary {
    background: var(--lumi-accent, #D4A44B);
    color: #1a1a17;
}
.hp-nudge__cta--primary:hover {
    background: #E0B35A;
    transform: translateY(-1px);
}

.hp-nudge__cta--secondary {
    background: transparent;
    color: var(--lumi-text-secondary, rgba(255, 255, 255, 0.65));
}
.hp-nudge__cta--secondary:hover {
    color: var(--lumi-text-primary, #fff);
}

@keyframes hp-nudge-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hp-nudge-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Auth-modal styles live in /assets/css/auth-modal.css now (loaded by
   every page that hosts the modal). Removed the duplicate block that
   used to live here -- it shadowed the dedicated file's rules because
   homepage.css loads after auth-modal.css. */

/* ── Pre-connect hero — two-column premium ──────────────────
   Wood-tile logomark as the visual anchor (left), with a
   warm amber glow halo. Action panel on the right: kicker,
   heading, three real action buttons (icon + title + arrow),
   and the connect link directly below. Atmospheric warm
   radial gradients on the surface. Vertically centered,
   composed — no void.
   ──────────────────────────────────────────────────────── */
.hp-empty-hero {
    margin: -24px -24px 0;
    padding: 44px 32px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.hp-empty-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 940px;
    width: 100%;
}

/* ── Live Game Report preview (replaces the floating brand mark) ── */
.hp-game-preview {
    --hp-bd: 320px;
    --hp-sq: calc(var(--hp-bd) / 8);
    display: grid;
    grid-template-columns: 18px var(--hp-bd);
    gap: 10px;
    align-items: start;
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    animation: hpHeroMarkIn 0.9s 0.05s both cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Eval bar — vertical, white at bottom growing up to --white-pct */
.hp-game-preview__evalbar {
    position: relative;
    width: 18px;
    height: var(--hp-bd);
    background: #1a1815;
    border: 1px solid rgba(240, 235, 224, 0.10);
    border-radius: 3px;
    overflow: hidden;
}
.hp-game-preview__evalbar-white {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 62%;
    background: #F2EDE5;
    transition: height 600ms ease;
}
.hp-game-preview__eval-num {
    position: absolute;
    bottom: 6px; left: 50%;
    transform: translateX(-50%);
    writing-mode: vertical-rl;
    transform-origin: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9.5px;
    font-weight: 800;
    color: #1a1815;
    letter-spacing: 0;
    pointer-events: none;
    z-index: 2;
}

/* Board — 8×8 CSS grid */
.hp-game-preview__board {
    position: relative;
    width: var(--hp-bd);
    height: var(--hp-bd);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(0,0,0,0.45), 0 3px 10px rgba(0,0,0,0.35);
}
.hp-sq--light { background: #F5E6C8; }
.hp-sq--dark  { background: #A67B4B; }
.hp-sq--lastmove { box-shadow: inset 0 0 0 9999px rgba(212, 164, 75, 0.42); }

/* Pieces — positioned via inline --f (file 1-8) and --r (rank-from-top 1-8) */
.hp-piece {
    position: absolute;
    left: calc((var(--f) - 1) * var(--hp-sq));
    top:  calc((var(--r) - 1) * var(--hp-sq));
    width: var(--hp-sq);
    height: var(--hp-sq);
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}

/* Best-move arrow overlay */
.hp-arrow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    animation: hpArrowIn 600ms 1s both cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Classification badge on the destination square */
.hp-class-badge {
    position: absolute;
    left: calc((var(--f) - 1) * var(--hp-sq) + var(--hp-sq) * 0.58);
    top:  calc((var(--r) - 1) * var(--hp-sq) - var(--hp-sq) * 0.10);
    width: calc(var(--hp-sq) * 0.62);
    height: calc(var(--hp-sq) * 0.62);
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
    opacity: 0;
    animation: hpBadgeIn 500ms 1.15s both cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Meta strip below the board — move number, SAN, classification tag */
.hp-game-preview__meta {
    grid-column: 2 / 3;
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Satoshi', sans-serif;
    color: var(--lumi-text-secondary);
}
.hp-game-preview__movenum {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.78;
}
.hp-game-preview__san {
    font-size: 16px;
    font-weight: 700;
    color: var(--lumi-text-primary, #F0EDE8);
}
.hp-game-preview__tag {
    margin-left: 6px;
    padding: 3px 9px;
    background: rgba(93, 182, 125, 0.16);
    color: #98D9AE;
    border: 1px solid rgba(93, 182, 125, 0.35);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@keyframes hpArrowIn {
    from { opacity: 0; }
    to   { opacity: 0.92; }
}
@keyframes hpBadgeIn {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Play CTA (post-connect, replaces the old Connected Accounts row) ──
   Compact card: heading + live stats on the left, Play button on the right. */
.hp-play-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 26px;
    margin: 0 0 28px;
    background: var(--lumi-bg-card);
    border: 1px solid rgba(240, 235, 224, 0.08);
    border-radius: 14px;
}
.hp-play-cta[hidden] {
    display: none !important;
}

.hp-play-cta__panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hp-play-cta__heading {
    margin: 0;
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(20px, 1.9vw, 24px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--lumi-text-primary);
}
.hp-play-cta__sub {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--lumi-text-secondary);
    white-space: nowrap;
}

.hp-play-cta__stats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.hp-play-cta__stats[hidden],
.hp-play-cta__fallback[hidden] {
    display: none;
}
.hp-play-cta__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4FB970;
    box-shadow: 0 0 0 0 rgba(79, 185, 112, 0.55);
    animation: hpPulseDot 2.2s ease-out infinite;
    flex-shrink: 0;
}
@keyframes hpPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(79, 185, 112, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(79, 185, 112, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 185, 112, 0); }
}
.hp-play-cta__num {
    font-weight: 700;
    color: var(--lumi-text-primary);
}
.hp-play-cta__label { color: var(--lumi-text-secondary); }
.hp-play-cta__sep   { color: rgba(240, 235, 224, 0.35); }
.hp-play-cta__fallback {
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--lumi-text-secondary);
}
.hp-play-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--lumi-accent, #D4A44B);
    color: #1a1612;
    border-radius: 12px;
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.hp-play-cta__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(212, 164, 75, 0.28);
}

/* ── Pre-connect samples — "See what you'll get" ─────────────── */
.hp-samples {
    margin: 0 -24px 0;
    padding: 80px 32px 96px;
    background: var(--lumi-bg-body);
}
.hp-samples__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.hp-sample {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.hp-sample:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
}
.hp-sample:nth-child(even) .hp-sample__visual { order: 2; }
.hp-sample:nth-child(even) .hp-sample__copy   { order: 1; }

.hp-sample__visual {
    display: flex;
    justify-content: center;
}

/* Full-product screenshot variant — sits inside a framed card */
.hp-sample__visual--shot {
    width: 100%;
}
.hp-sample__shot {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(240, 235, 224, 0.08);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.30);
}

.hp-sample__copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hp-sample__kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lumi-accent, #D4A44B);
}
.hp-sample__title {
    margin: 0;
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(22px, 2.0vw, 28px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: var(--lumi-text-primary, #F0EDE8);
}
.hp-sample__body {
    margin: 4px 0 0;
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--lumi-text-secondary);
}
.hp-sample__points {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hp-sample__points li {
    position: relative;
    padding-left: 22px;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--lumi-text-secondary);
}
.hp-sample__points li::before {
    content: "";
    position: absolute;
    left: 0; top: 6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(212, 164, 75, 0.18);
    border: 1px solid var(--lumi-accent, #D4A44B);
}
.hp-sample__points li::after {
    content: "";
    position: absolute;
    left: 4px; top: 10px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--lumi-accent, #D4A44B);
}

@media (max-width: 1080px) {
    .hp-sample,
    .hp-sample:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .hp-sample:nth-child(even) .hp-sample__visual { order: 0; }
    .hp-sample:nth-child(even) .hp-sample__copy   { order: 0; }
}

/* ── Action panel ─────────────────────────────────────────── */
.hp-empty-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 940px;
}

/* Title block — wood-tile mark left, heading + kicker stacked on right */
.hp-empty-hero__title {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 14px;
    opacity: 0;
    animation: hpHeroFadeUp 0.65s 0.25s both cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Intro line — single sentence below the title row. Sits at hero
   width (not constrained by the inline-flex title), so it stays on
   one row at desktop and wraps cleanly on narrow viewports. */
.hp-empty-hero__intro {
    margin: 0 auto 14px;
    max-width: 940px;
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--lumi-text-secondary);
    text-align: center;
    opacity: 0;
    animation: hpHeroFadeUp 0.6s 0.3s both cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp-empty-hero__intro b {
    font-weight: 700;
    color: var(--lumi-text-primary);
}
.hp-empty-hero__mark {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.hp-empty-hero__mark svg { display: block; width: 100%; height: 100%; }

.hp-empty-hero__heading {
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 600;
    color: var(--lumi-text-primary);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.1;
}

.hp-empty-hero__lede {
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--lumi-text-secondary);
    line-height: 1.45;
    margin: 6px 0 0;
    max-width: 560px;
}

/* Three-feature row — what users get once connected */
.hp-feature-row {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    opacity: 0;
    animation: hpHeroFadeUp 0.6s 0.35s both cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hp-feature {
    --hp-tint: var(--lumi-accent, #D4A44B);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
    padding: 14px 16px;
    /* Lifted card surface (warm-dark, matches other cards on the app)
       so the tiles read as distinct objects against the body, while
       staying neutral enough not to compete with the Chess.com /
       Lichess pill selection below. */
    background: var(--lumi-bg-card);
    border: 1px solid rgba(240, 235, 224, 0.06);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: border-color 180ms ease, background 180ms ease,
                box-shadow 180ms ease, transform 180ms ease;
    min-width: 0;
}

.hp-feature:hover {
    border-color: color-mix(in srgb, var(--hp-tint) 40%, transparent);
    background: color-mix(in srgb, var(--hp-tint) 6%, var(--lumi-bg-card));
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

/* Icon badge keeps its semantic color so each feature is still
   recognisable, but the tile body stays neutral so it doesn't compete
   with the Chess.com / Lichess pill selection below. */
.hp-feature__icon {
    color: var(--hp-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--hp-tint) 12%, transparent);
}

.hp-feature__label {
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--lumi-text-primary, #F0EDE8);
    letter-spacing: -0.01em;
}

.hp-feature__sub {
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--lumi-text-secondary);
    letter-spacing: -0.005em;
    white-space: nowrap;
}

/* ── Inline connect form (slot for the modal in pre-connect) ── */
.hp-empty-hero__form-slot {
    width: 100%;
    opacity: 0;
    animation: hpHeroFadeUp 0.6s 0.36s both cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Override the popup-modal styling when it sits inline in the hero.
   Strip card chrome so the form reads as part of the hero, not a
   separate popup. The pills / input / button keep their own styling. */
.hp-empty-hero__form-slot .hp-modal {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    padding: 0;
    margin: 0;
    animation: none;
}
.hp-empty-hero__form-slot .hp-modal__backdrop { display: none; }
.hp-empty-hero__form-slot .hp-modal__dialog {
    width: 100%;
    max-width: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    padding: 0;
    margin: 0;
}
.hp-empty-hero__form-slot .hp-modal__header { display: none; }
.hp-empty-hero__form-slot .hp-modal__body {
    padding: 0;
    margin: 0;
}
/* Pills (Chess.com / Lichess segmented control) — hero scope.
   Bigger hit area, stronger active state: amber ring + lift + brighter bg. */
.hp-empty-hero__form-slot .hp-connect__pills {
    margin: 0 0 16px 0;
    gap: 10px;
}
.hp-empty-hero__form-slot .hp-connect__pill {
    height: 56px;
    min-width: 184px;
    background: rgba(255, 255, 255, 0.045);
    border: 1.5px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    transition: background 180ms ease, border-color 180ms ease,
                box-shadow 220ms ease, transform 180ms ease;
}
.hp-empty-hero__form-slot .hp-connect__pill:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
}
/* Universal active treatment: amber outer ring + lift. Platform-specific
   inner color is layered on top. */
.hp-empty-hero__form-slot .hp-connect__pill.active {
    border-width: 2px;
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(212, 164, 75, 0.22),
                0 8px 18px rgba(0, 0, 0, 0.30);
}
.hp-empty-hero__form-slot .hp-connect__pill[data-platform="chesscom"].active {
    background: rgba(129, 182, 76, 0.16);
    border-color: #81b64c;
}
.hp-empty-hero__form-slot .hp-connect__pill[data-platform="lichess"].active {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--lumi-amber-300);
}
/* Inactive logos: still legible (not painfully dim) */
.hp-empty-hero__form-slot .hp-connect__pill[data-platform="chesscom"]:not(.active)
    .hp-connect__lockup--chesscom { opacity: 0.78; }
.hp-empty-hero__form-slot .hp-connect__pill[data-platform="lichess"]:not(.active)
    .hp-connect__lockup--lichess { color: rgba(240, 235, 224, 0.78); }

/* Input row */
.hp-empty-hero__form-slot .hp-connect__input-row {
    margin: 0;
    gap: 10px;
}
.hp-empty-hero__form-slot .hp-connect__input {
    height: 56px;
    font-size: 16px;
    font-weight: 500;
    color: var(--lumi-text-primary);
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 0 20px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18) inset;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.hp-empty-hero__form-slot .hp-connect__input::placeholder {
    color: rgba(240, 237, 232, 0.5);
}
.hp-empty-hero__form-slot .hp-connect__input:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.085);
}
.hp-empty-hero__form-slot .hp-connect__input:focus {
    border-color: var(--lumi-amber-300);
    background: rgba(255, 255, 255, 0.085);
    box-shadow: 0 0 0 3px rgba(212, 164, 75, 0.18),
                0 1px 0 rgba(0, 0, 0, 0.18) inset;
}

/* Chrome-autofill honeypot wrapper.
   The <form> sits transparently inside the input row (display:contents).
   The two hidden decoy inputs sit absolutely positioned off-screen so
   Chrome treats them as the "username + password" pair for its saved-
   credential dropdown, leaving the real chess-handle input alone. */
.hp-connect__form {
    display: contents;
}
.hp-connect__autofill-honeypot {
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.hp-connect__autofill-honeypot input {
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Fetch button: arrow + tighter alignment */
.hp-empty-hero__form-slot .hp-connect__btn {
    height: 56px;
    padding: 0 22px 0 26px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.hp-empty-hero__form-slot .hp-connect__btn .hp-connect__btn-arrow {
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp-empty-hero__form-slot .hp-connect__btn:hover .hp-connect__btn-arrow {
    transform: translateX(3px);
}
.hp-empty-hero__form-slot .hp-connect__status {
    margin-top: 12px;
    min-height: 18px;
}

/* ── Pre-connect sample reports section ───────────────────────────
   Sits directly below the empty-hero. Three Magnus Carlsen game
   cards rendered with the standard .gcard markup. Reuses the
   .hp-games__grid layout so cards look identical to the post-connect
   grid; only the header copy differs. */
.hp-samples {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px 24px;
}
.hp-samples__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.hp-samples__title {
    font-family: 'Satoshi', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lumi-text-primary);
    margin: 0;
}
.hp-samples__sub {
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--lumi-text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .hp-samples { padding: 0 16px 48px; }
    .hp-samples__title { font-size: 18px; }
    .hp-samples__sub { font-size: 12px; }
}

.hp-empty-hero__shortcuts {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--lumi-font-sans, 'Satoshi', sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(240, 237, 232, 0.42);
    opacity: 0;
    animation: hpHeroFadeUp 0.55s ease-out 0.55s forwards;
}

.hp-empty-hero__shortcuts-label {
    color: rgba(240, 237, 232, 0.36);
    font-weight: 500;
    margin-right: 2px;
}

.hp-empty-hero__shortcut {
    position: relative;
    color: rgba(240, 237, 232, 0.78);
    text-decoration: none;
    padding: 2px 0;
    border-bottom: 1px solid rgba(212, 164, 75, 0.25);
    transition: color 160ms ease, border-color 160ms ease;
}

.hp-empty-hero__shortcut:hover,
.hp-empty-hero__shortcut:focus-visible {
    color: var(--lumi-accent, #D4A44B);
    border-bottom-color: var(--lumi-accent, #D4A44B);
    outline: none;
}

.hp-empty-hero__shortcuts-sep {
    color: rgba(240, 237, 232, 0.22);
    font-weight: 400;
}

@keyframes hpHeroMarkIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hpHeroFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes hpHeroGlowPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .hp-game-preview,
    .hp-arrow,
    .hp-class-badge,
    .hp-empty-hero__heading,
    .hp-empty-hero__lede,
    .hp-feature-row,
    .hp-empty-hero__form-slot {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1080px) {
    .hp-empty-hero { padding: 48px 28px; }
    .hp-empty-hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        justify-items: center;
        text-align: left;
    }
    .hp-empty-hero__content { max-width: 560px; align-items: stretch; }
    .hp-empty-hero__heading { text-align: left; }
    .hp-game-preview { --hp-bd: 260px; }
}

@media (max-width: 480px) {
    .hp-empty-hero { padding: 40px 20px; min-height: calc(100vh - 80px); }
    .hp-game-preview { --hp-bd: 220px; }
    .hp-empty-hero__heading { font-size: 24px; }
    .hp-empty-hero__form-slot .hp-connect__input,
    .hp-empty-hero__form-slot .hp-connect__btn { height: 46px; font-size: 14px; }
    .hp-empty-hero__form-slot .hp-connect__btn { padding: 0 16px; }
}

/* ────────────────────────────────────────────────────────────────────
   PRE-CONNECT HERO — REDESIGN (May 2026, v2)
   One CTA: connect a Chess.com or Lichess account, fetch games.

   Tagline (editorial, names the three features inline) sits above
   a single distinctive Connect panel that hosts the existing
   #hp-connect-modal inlined as the focal action.
   ──────────────────────────────────────────────────────────────────── */

#hp-empty-hero.hp-empty-hero {
    margin: 0;
    padding: clamp(56px, 8vh, 96px) clamp(28px, 4vw, 72px) clamp(40px, 6vh, 72px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: calc(100vh - 100px);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(212, 164, 75, 0.06), transparent 70%),
        radial-gradient(ellipse 40% 30% at 90% 100%, rgba(156, 112, 68, 0.05), transparent 70%);
}

#hp-empty-hero .hp-empty-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Atmospheric corner tile — the brand mark dissolved into background.
   Sits top-right, just outside the content rhythm, at low opacity. */
.hp-empty-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.hp-empty-hero__bg-tile {
    position: absolute;
    top: -180px;
    right: -200px;
    width: 640px;
    height: 640px;
    opacity: 0.045;
    transform: rotate(-12deg);
    filter: blur(0.5px);
}

/* ─ Tagline ─────────────────────────────────────────────────────────
   SEO-leaded hook: "Free, unlimited Game Reports for Chess.com and Lichess."
   The "Free, unlimited" phrase carries amber accent so it scans first. */
#hp-empty-hero .hp-empty-hero__tagline {
    margin: 0 0 clamp(24px, 3vh, 32px);
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(22px, 2.3vw, 32px);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.022em;
    color: var(--lumi-text-primary);
    max-width: 880px;
    text-align: left;
    opacity: 0;
    animation: hpHeroTaglineIn 0.7s 0.06s both cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Spans inside .hp-empty-hero__tagline override a global span{display:block}
   reset from style.css. They must render inline so the tagline flows. */
#hp-empty-hero .hp-empty-hero__tagline span {
    display: inline;
}
.hp-empty-hero__platform {
    color: var(--lumi-amber-200);
    font-weight: 600;
    white-space: nowrap;
}
.hp-empty-hero__amp {
    color: var(--lumi-text-dim);
    font-weight: 400;
    margin: 0 0.05em;
}
.hp-empty-hero__free {
    color: var(--lumi-amber-200);
    font-weight: 600;
}

/* ─ Feature list ────────────────────────────────────────────────────
   Three stacked descriptive lines beneath the tagline. NOT CTAs — these
   are supporting copy so the Connect form stays the single primary
   action. Each line leads with a bold-white phrase that acts as the
   visual scan anchor (no checkmark / bullet markers — those read SaaS).
   A hairline amber divider separates each line. */
.hp-empty-hero__features {
    list-style: none;
    margin: 0 0 clamp(32px, 4vh, 44px);
    padding: 0;
    max-width: 760px;
}

.hp-empty-hero__feature {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(212, 164, 75, 0.14);
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    font-weight: 450;
    line-height: 1.5;
    color: var(--lumi-text-primary);
    letter-spacing: -0.003em;
    opacity: 0;
    animation: hpHeroFeatureIn 0.5s both cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp-empty-hero__feature:first-child {
    border-top: none;
    padding-top: 0;
}
.hp-empty-hero__feature:last-child {
    padding-bottom: 0;
}
.hp-empty-hero__feature:nth-child(1) { animation-delay: 0.18s; }
.hp-empty-hero__feature:nth-child(2) { animation-delay: 0.24s; }
.hp-empty-hero__feature:nth-child(3) { animation-delay: 0.30s; }

.hp-empty-hero__feature strong {
    color: var(--lumi-text-primary);
    font-weight: 700;
    letter-spacing: -0.012em;
}

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

/* ─ Connect panel — the single primary CTA ──────────────────────────
   Premium framed surface that hosts the inlined #hp-connect-modal.
   Header row (wood-tile mark + heading/sub) above the modal slot. */
.hp-empty-hero__connect-panel {
    position: relative;
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3.2vw, 40px);
    /* Match the left side-nav background — panel reads as a recessed
       focal surface (darker than body), with the amber border defining
       its perimeter. */
    background: var(--lumi-bg-nav);
    border: 1px solid rgba(212, 164, 75, 0.22);
    border-radius: 22px;
    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);
    max-width: 720px;
    opacity: 0;
    animation: hpHeroPanelIn 0.65s 0.16s both cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Subtle amber highlight at the top edge — like a chess-move arrow tip. */
.hp-empty-hero__connect-panel::before {
    content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 164, 75, 0.55) 40%,
        rgba(212, 164, 75, 0.55) 60%,
        transparent 100%);
}

.hp-empty-hero__connect-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
}

.hp-empty-hero__connect-mark {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.hp-empty-hero__connect-mark svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hp-empty-hero__connect-title {
    margin: 0;
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--lumi-text-primary);
}
.hp-empty-hero__connect-sub {
    margin: 4px 0 0;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--lumi-text-secondary);
    letter-spacing: -0.003em;
}

/* The form slot itself — the inlined modal renders inside this.
   Detailed styles for the modal-in-inline-mode live further up the
   file under .hp-empty-hero__form-slot .hp-* selectors. */
.hp-empty-hero__form-slot {
    width: 100%;
}

/* ─ Animations ──────────────────────────────────────────────────── */
@keyframes hpHeroTaglineIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hpHeroPanelIn {
    from { opacity: 0; transform: translateY(12px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─ Responsive ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
    #hp-empty-hero .hp-empty-hero__tagline {
        font-size: 22px;
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    #hp-empty-hero.hp-empty-hero { padding: 36px 20px; }
    #hp-empty-hero .hp-empty-hero__tagline { font-size: 19px; margin-bottom: 28px; }
    .hp-empty-hero__connect-panel { padding: 20px; border-radius: 16px; }
    .hp-empty-hero__connect-head { gap: 12px; margin-bottom: 18px; }
    .hp-empty-hero__connect-mark { width: 32px; height: 32px; }
    .hp-empty-hero__connect-title { font-size: 16px; }
    .hp-empty-hero__connect-sub { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    #hp-empty-hero .hp-empty-hero__tagline,
    .hp-empty-hero__connect-panel {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* ────────────────────────────────────────────────────────────────────
   ENGINE DEPTH PICKER — gear button + popup
   Replaces the legacy <select id="hp-depth"> in the Review-Your-Games
   filter row. Hidden input retains the same id so the Review flow can
   still stash `lumichess_engine_depth` into sessionStorage.
   ──────────────────────────────────────────────────────────────────── */
.hp-depth-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hp-depth-picker__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    background: var(--lumi-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--lumi-text-secondary);
    font-family: 'Satoshi', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.hp-depth-picker__btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 164, 75, 0.30);
    color: var(--lumi-text-primary);
}
.hp-depth-picker.is-open .hp-depth-picker__btn {
    border-color: var(--lumi-amber-300);
    color: var(--lumi-text-primary);
    background: rgba(212, 164, 75, 0.06);
}
.hp-depth-picker__gear {
    opacity: 0.78;
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 160ms ease;
}
.hp-depth-picker__btn:hover .hp-depth-picker__gear,
.hp-depth-picker.is-open .hp-depth-picker__gear {
    opacity: 1;
    transform: rotate(35deg);
}
.hp-depth-picker__label {
    font-variant-numeric: tabular-nums;
}

/* Popup — anchored below the gear button. */
.hp-depth-picker__popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: 10px;
    background: var(--lumi-bg-elevated);
    border: 1px solid rgba(212, 164, 75, 0.22);
    border-radius: 12px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 18px 36px rgba(0, 0, 0, 0.40),
        0 4px 12px rgba(0, 0, 0, 0.24);
    z-index: 50;
    animation: hpDepthPopupIn 0.16s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp-depth-picker__popup[hidden] { display: none; }

.hp-depth-picker__popup-head {
    padding: 4px 8px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hp-depth-picker__popup-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    letter-spacing: -0.005em;
}
.hp-depth-picker__popup-hint {
    font-family: 'Satoshi', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--lumi-text-dim);
}

.hp-depth-picker__options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hp-depth-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--lumi-text-secondary);
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.hp-depth-picker__option:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--lumi-text-primary);
}
.hp-depth-picker__option.is-active {
    background: rgba(212, 164, 75, 0.12);
    color: var(--lumi-amber-200);
}
.hp-depth-picker__option-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hp-depth-picker__option-hint {
    font-size: 11px;
    font-weight: 500;
    color: var(--lumi-text-dim);
    letter-spacing: 0.005em;
}
.hp-depth-picker__option.is-active .hp-depth-picker__option-hint {
    color: var(--lumi-amber-300);
}

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

/* ────────────────────────────────────────────────────────────────────
   Mobile: pre-connect platform pills shrink to fit. Placed at the end
   of the file so source order beats the hero-scope min-width override
   defined earlier (.hp-empty-hero__form-slot .hp-connect__pill).
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hp-connect__pills {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
    }
    .hp-connect__pill,
    .hp-connect__pill--lockup,
    .hp-empty-hero__form-slot .hp-connect__pill {
        box-sizing: border-box;
        min-width: 0;
        /* Explicit half-of-container math beats `flex: 1 1 0` in WebKit,
           which honored the chess.com <img>'s intrinsic width as the
           min-size and left the chess.com pill narrower than the lichess
           pill. With calc(50% - 4px) (4px = half the 8px gap) both pills
           render identically in Chromium and WebKit. */
        flex: 0 0 calc(50% - 4px);
        width: calc(50% - 4px);
        padding-left: 10px;
        padding-right: 10px;
        overflow: hidden;
    }
    .hp-connect__lockup {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    .hp-connect__lockup--chesscom { max-width: 100%; width: auto; height: 22px; }
    /* "lichess.org" is redundant on the pill — the icon + "lichess" already
       carry the brand. Drop the .tld span across all mobile widths so the
       label reads "lichess" in WebKit (where it was showing ".org" too). */
    .hp-connect__wordmark { font-size: 16px; }
    .hp-connect__wordmark-tld { display: none; }
    @media (max-width: 380px) {
        .hp-connect__wordmark { font-size: 15px; }
    }
}

/* ────────────────────────────────────────────────────────────────────
   Mobile pre-connect — single-screen layout with brand at top.
   - Brand lockup (mark + Lum-ı-chess) sits above the tagline.
   - 3-feature list hides on mobile to keep the hero one viewport tall.
   - Hero padding shrinks; tagline scales down; connect panel tightens.
   ──────────────────────────────────────────────────────────────────── */

/* Hidden by default — desktop relies on the side-nav for branding. */
.hp-empty-hero__brand { display: none; }
.hp-empty-hero__header { display: none; }
.hp-empty-hero__signin { display: none; }

@media (max-width: 768px) {
    /* Mobile-only top row: brand on the left, Sign in pill (guest only)
       on the right. js-nav-auth-guest's display rule wins when the user
       isn't signed in; signed-in users see just the brand. */
    .hp-empty-hero__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 18px;
    }
    /* Sign in pill mirrors the post-connect mobile sign-in pill style. */
    html.lumi-auth-guest .hp-empty-hero__signin {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 16px;
        border-radius: 18px;
        background: var(--lumi-accent, #D4A44B);
        color: #1a1612;
        border: none;
        font-family: 'Satoshi', sans-serif;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        flex-shrink: 0;
    }
    /* Brand strip — mirrors desktop nav-logo: wood-tile mark + wordmark.
       Inside the header row the wrapper handles bottom margin, so the
       brand sets its own to 0 here. */
    .hp-empty-hero__brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        margin-bottom: 0;
        align-self: center;
    }
    .hp-empty-hero__brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.4);
        flex-shrink: 0;
    }
    .hp-empty-hero__brand-mark svg {
        display: block;
        width: 100%;
        height: 100%;
    }
    .hp-empty-hero__brand-name {
        font-family: 'Satoshi', sans-serif;
        font-weight: 900;
        font-size: 26px;
        letter-spacing: -0.03em;
        line-height: 1;
        white-space: nowrap;
        display: inline-flex;
        align-items: baseline;
    }
    .hp-empty-hero__brand-name .logo-amber { color: #D4A44B; }
    .hp-empty-hero__brand-name .logo-cream { color: #E8E4DF; }
    .hp-empty-hero__brand-name .logo-i {
        position: relative;
        color: #D4A44B;
    }
    .hp-empty-hero__brand-name .logo-diamond {
        position: absolute;
        pointer-events: none;
        overflow: visible;
        width: 22px;
        height: 22px;
        top: 2px;
        left: calc(50% + 1px);
        transform: translate(-50%, -50%);
    }

    /* Drop the 3-feature list so the hero fits in one mobile viewport. */
    .hp-empty-hero__features { display: none; }

    /* Tighten the hero spatially so brand + tagline + connect panel
       sit comfortably above the fold on phones. */
    #hp-empty-hero.hp-empty-hero {
        padding: 24px 20px 28px;
        min-height: auto;
        align-items: flex-start;
    }
    #hp-empty-hero .hp-empty-hero__tagline {
        font-size: 22px;
        line-height: 1.25;
        margin: 0 0 22px;
    }
    .hp-empty-hero__connect-panel {
        padding: 18px 16px;
    }
    .hp-empty-hero__connect-head {
        margin-bottom: 14px;
    }
    .hp-empty-hero__connect-title {
        font-size: 15px;
    }
}

/* ────────────────────────────────────────────────────────────────────
   Mobile pre-connect — unify box heights inside the connect panel.
   Pills, username input and submit button all share the same height
   and border-radius so the form reads as one rhythm.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hp-empty-hero__form-slot .hp-connect__pill,
    .hp-empty-hero__form-slot .hp-connect__input,
    .hp-empty-hero__form-slot .hp-connect__btn {
        height: 54px;
        min-height: 54px;
        border-radius: 12px;
        font-size: 15px;
        box-sizing: border-box;
        /* Override `.hp-connect__input { flex: 1 }` — in the mobile
           column flex container that would shrink the input to 0. */
        flex: 0 0 auto;
    }
    .hp-empty-hero__form-slot .hp-connect__input {
        padding: 0 16px;
        font-weight: 500;
        width: 100%;
    }
    .hp-empty-hero__form-slot .hp-connect__btn {
        padding: 0 18px;
        font-weight: 700;
        width: 100%;
    }
    /* Tighten the in-panel rhythm so each row sits the same distance
       from the next — gives the four boxes a clean stacked grid feel. */
    .hp-empty-hero__form-slot .hp-connect__pills {
        margin: 0 0 10px 0;
    }
    .hp-empty-hero__form-slot .hp-connect__input-row {
        gap: 10px;
    }
}

/* ────────────────────────────────────────────────────────────────────
   Mobile post-connect — restore brand, add top-right auth pill, fix
   chip overflow, and give the Play CTA proper mobile rules. All scoped
   to ≤768px so desktop styles stay byte-identical.
   ──────────────────────────────────────────────────────────────────── */
.hp-header__mobile-auth {
    display: none;
}

@media (max-width: 768px) {
    /* Fix 3: brand visible on mobile post-connect. Beats `.hp-header
       .hp-logo { display: none }` at line 34 by matching its specificity. */
    .hp-header .hp-logo {
        display: inline-flex;
    }
    /* Fix 4: top-right account / sign-in pill on mobile. */
    .hp-header {
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .hp-header__mobile-auth {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
    }
    .hp-header__mobile-auth-btn {
        /* No display rule here on purpose — nav.css `.js-nav-auth-*`
           handles visibility (display:none by default, display:flex when
           the matching html.lumi-auth-* class is set). Setting display
           here would clobber the toggle. */
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 14px;
        border-radius: 18px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: var(--lumi-text-primary);
        text-decoration: none;
        font-family: 'Satoshi', sans-serif;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
    }
    .hp-header__mobile-auth-btn--profile {
        width: 36px;
        padding: 0;
    }
    .hp-header__mobile-auth-btn--profile svg {
        opacity: 0.85;
    }
    .hp-header__mobile-auth-btn--signin {
        background: var(--lumi-accent, #D4A44B);
        color: #1a1612;
        border-color: transparent;
    }

    /* Settings dropdown (Profile + Sign out) anchored to the avatar button. */
    .hp-header__mobile-menu-wrap {
        position: relative;
    }
    .hp-header__mobile-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 180px;
        background: var(--lumi-bg-card, #1e1e1b);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        padding: 6px;
        box-shadow: 0 16px 36px rgba(0,0,0,0.45);
        z-index: 50;
    }
    .hp-header__mobile-menu[hidden] {
        display: none;
    }
    .hp-header__mobile-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        background: transparent;
        border: none;
        color: var(--lumi-text-primary);
        font-family: 'Satoshi', sans-serif;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        text-decoration: none;
        border-radius: 8px;
        cursor: pointer;
        line-height: 1;
    }
    .hp-header__mobile-menu-item:hover {
        background: rgba(255,255,255,0.05);
    }
    .hp-header__mobile-menu-item svg {
        flex-shrink: 0;
        opacity: 0.7;
    }
    .hp-header__mobile-menu-item--danger {
        color: #E8A2A2;
    }
    .hp-header__mobile-menu-item--danger:hover {
        background: rgba(232,162,162,0.08);
    }

    /* Fix 1: Connected accounts chip — drop secondary rating + icons
       so the chip fits in 358-ish px without clipping. */
    .hp-accounts__chip .hp-accounts__chip-rating + .hp-accounts__chip-rating {
        display: none;
    }
    .hp-accounts__chip-rating-icon {
        display: none;
    }
    .hp-accounts__chip-ratings {
        padding-left: 6px;
    }

    /* Fix 2: Play CTA — stack vertically, compact padding/type so the
       heading + stats + button fit a phone width. Stats wrap if real
       numbers ("12,847 players online · 3,412 games in play") need it. */
    .hp-play-cta {
        padding: 14px 16px;
        gap: 10px;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 20px;
    }
    .hp-play-cta__heading {
        font-size: 18px;
    }
    .hp-play-cta__sub {
        font-size: 11px;
        gap: 6px;
        flex-wrap: wrap;
        white-space: normal;
    }
    .hp-play-cta__stats {
        flex-wrap: wrap;
        white-space: normal;
    }
    .hp-play-cta__btn {
        align-self: stretch;
        justify-content: center;
        padding: 11px 18px;
        font-size: 14px;
    }
}

/* ────────────────────────────────────────────────────────────────────
   Field label between the pills and the username input. Echoes the
   selected platform so the box has unambiguous instruction text right
   above where the user types.
   ──────────────────────────────────────────────────────────────────── */
.hp-connect__field-label {
    display: block;
    /* Sits flush against the input below so the pair reads as one
       attached unit (label-on-top-of-box). */
    margin: 0 0 2px;
    padding-left: 4px;
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(240, 237, 232, 0.72);
    letter-spacing: 0.01em;
}

/* ────────────────────────────────────────────────────────────────────
   Safari-only mobile: roomier connect panel. UA-class `lumi-safari` is
   set in home.html's head before paint; Chromium/Android Chrome users
   stay on the default 54px / 18-16 padding rhythm.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html.lumi-safari .hp-empty-hero__form-slot .hp-connect__pill,
    html.lumi-safari .hp-empty-hero__form-slot .hp-connect__input,
    html.lumi-safari .hp-empty-hero__form-slot .hp-connect__btn {
        height: 60px;
        min-height: 60px;
        border-radius: 14px;
        font-size: 16px;
    }
    html.lumi-safari .hp-empty-hero__connect-panel { padding: 22px 18px; }
    html.lumi-safari .hp-empty-hero__connect-head  { margin-bottom: 16px; }
    html.lumi-safari .hp-empty-hero__connect-title { font-size: 16px; }
    html.lumi-safari .hp-connect__field-label      { font-size: 14px; margin-bottom: 2px; }
}

/* ────────────────────────────────────────────────────────────────────
   Safari-only mobile: bump every-text-feels-smaller. iOS Safari renders
   Satoshi a hair thinner than Blink, and even with text-size-adjust:100%
   user reads body copy as smaller. Nudge key sizes up by 1–2px so the
   page reads at the same weight as Chrome mobile.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html.lumi-safari .hp-logo              { font-size: 34px; }
    html.lumi-safari .hp-empty-hero__tagline { font-size: 24px; }
    html.lumi-safari .hp-games__title      { font-size: 22px; }
    html.lumi-safari .hp-games__filter     { font-size: 13px; }
    html.lumi-safari .hp-depth-picker__btn { font-size: 13px; }
    html.lumi-safari .hp-play-cta__heading { font-size: 20px; }
    html.lumi-safari .hp-play-cta__sub     { font-size: 12px; }
    html.lumi-safari .hp-play-cta__btn     { font-size: 15px; }
    html.lumi-safari .hp-accounts__chip-user   { font-size: 14px; }
    html.lumi-safari .hp-accounts__chip-rating { font-size: 12px; }
    html.lumi-safari .hp-accounts__add         { font-size: 14px; }
}

/* ────────────────────────────────────────────────────────────────────
   Review-games filter row mobile layout. Appended at the END of the
   file so source order beats the base .hp-depth-picker__btn rules
   (defined ~line 3913) that would otherwise reset padding to 0 10px
   and let the label shrink to its flex-basis.

   Layout: left group (All/Rapid/Blitz/Bullet) + right group (depth
   + refresh) pushed to the opposite edge via margin-left:auto on
   the depth picker.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hp-games__filters {
        flex-wrap: nowrap;
        width: 100%;
        gap: 6px;
    }
    .hp-games__filter {
        padding: 5px 9px;
        flex-shrink: 0;
    }
    .hp-depth-picker {
        margin-left: auto;
        flex-shrink: 0;
    }
    .hp-depth-picker__btn {
        padding: 5px 10px;
        flex-shrink: 0;
        white-space: nowrap;
        height: auto;
        min-width: max-content;
    }
    .hp-depth-picker__label {
        white-space: nowrap;
        flex-shrink: 0;
        min-width: max-content;
    }
    .hp-games__refresh {
        flex-shrink: 0;
        margin-left: 0;
    }
}
@media (max-width: 380px) {
    /* Narrowest phones: keep the "Depth N" label visible (user explicitly
       wants the depth setting readable on Chrome mobile too) by shrinking
       button padding and font so the whole row still fits one line at 360. */
    .hp-games__filter      { padding: 5px 6px; font-size: 11px; }
    .hp-depth-picker__btn  { padding: 5px 7px; font-size: 11px; }
    .hp-depth-picker__label { font-size: 11px; }
    .hp-games__filters     { gap: 5px; }
}

/* ────────────────────────────────────────────────────────────────────
   Safari-only mobile: kill the env(safe-area-inset-bottom) padding on
   the bottom tab bar. iOS Safari's URL bar already covers the safe
   area, so the env-padding was leaving an empty gap between the nav
   buttons and the URL bar. With padding-bottom:0 the buttons sit
   flush against the top of the URL bar.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html.lumi-safari .side-nav {
        padding-bottom: 0 !important;
        height: 68px !important;
    }
}

/* Mobile-only header variant — pages that don't need a desktop header
   (e.g. /play/online) can use `<div class="hp-header hp-header--mobile-only">`
   so the header takes no space on desktop. */
.hp-header--mobile-only { display: none; }
@media (max-width: 768px) {
    .hp-header--mobile-only { display: flex; }
}