/* ===================================================
   LUMICHESS PLAY — Premium Dark UI
   Amber accent. Warm dark tones.
   =================================================== */


/* Nav is now in nav.css */


/* ============================================
   PLAY HUB — Two-column: Board + Content
   ============================================ */

.play-hub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: calc(100vh - 48px);
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: var(--lumi-bg-surface);
}

/* Board column */
.play-board-col {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.play-board-frame {
    height: calc(100vh - 96px);
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.play-board-frame canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Content column */
.play-content-col {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 96px);
    scrollbar-width: thin;
    scrollbar-color: var(--lumi-border) transparent;
}
.play-content-col::-webkit-scrollbar { width: 4px; }
.play-content-col::-webkit-scrollbar-track { background: transparent; }
.play-content-col::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }


/* ===== RECOMMENDED OPPONENT ===== */

.play-recommend {
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-left: 3px solid var(--lumi-accent);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s, box-shadow 0.25s;
}
.play-recommend:hover {
    border-color: rgba(212,164,75,0.3);
    border-left-color: var(--lumi-accent);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), inset 0 0 60px rgba(212,164,75,0.02);
}

.recommend-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lumi-accent);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.recommend-label { color: var(--lumi-text-muted); }

.recommend-bot {
    display: flex;
    align-items: center;
    gap: 10px;
}
.recommend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(212,164,75,0.12);
    color: var(--lumi-accent);
}
.recommend-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.recommend-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--lumi-text-primary);
}
.recommend-meta {
    font-size: 12px;
    color: var(--lumi-text-muted);
    font-variant-numeric: tabular-nums;
}
.recommend-play {
    flex-shrink: 0;
}


/* ===== CTA PURPLE ===== */

.cta-purple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid rgba(212,164,75,0.25);
    background: rgba(212,164,75,0.12);
    color: var(--lumi-accent);
    font-family: inherit;
    line-height: 1;
}
.cta-purple:hover {
    background: rgba(212,164,75,0.22);
    border-color: rgba(212,164,75,0.4);
    color: var(--lumi-amber-300);
}
.cta-purple:active {
    transform: scale(0.97);
}


/* ===== TIME CONTROLS ===== */

.play-time-controls {
    display: flex;
    gap: 6px;
}
.play-time-pill {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--lumi-border);
    background: var(--lumi-bg-card);
    color: var(--lumi-text-muted);
    font-family: inherit;
    line-height: 1;
}
.play-time-pill:hover {
    border-color: var(--lumi-border-hover);
    color: var(--lumi-text-secondary);
    background: var(--lumi-bg-elevated);
}
.play-time-pill.active {
    border-color: rgba(212,164,75,0.35);
    background: rgba(212,164,75,0.08);
    color: var(--lumi-accent);
}


/* ===== TIER TABS ===== */

.play-tier-tabs {
    display: flex;
    background: var(--lumi-bg-body);
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.play-tier-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 6px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.play-tier-tab:hover {
    background: rgba(255,255,255,0.03);
}
.play-tier-tab.active {
    background: var(--lumi-bg-card);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tier-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--lumi-text-muted);
    transition: color 0.15s;
}
.play-tier-tab.active .tier-label {
    color: var(--lumi-text-primary);
}
.tier-range {
    font-size: 10px;
    color: var(--lumi-text-muted);
    font-variant-numeric: tabular-nums;
    transition: color 0.15s;
}
.play-tier-tab.active .tier-range {
    color: rgba(212,164,75,0.6);
}


/* ===== BOT GRID ===== */

.play-bot-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bot-card {
    display: flex;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.25s;
}
.bot-card:hover {
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

/* Left accent bar */
.bot-accent {
    width: 4px;
    flex-shrink: 0;
}
.accent-attacker { background: linear-gradient(180deg, #D98A8A, var(--lumi-error)); }
.accent-strategist { background: linear-gradient(180deg, #7ab0d9, #5a8ab4); }
.accent-tactician { background: linear-gradient(180deg, var(--lumi-amber-200), var(--lumi-accent)); }
.accent-defender { background: linear-gradient(180deg, #6dc99a, #4a9e6d); }
.accent-wildcard { background: linear-gradient(180deg, var(--lumi-amber-300), var(--lumi-accent)); }

/* Bot body */
.bot-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    gap: 8px;
    min-width: 0;
}
.bot-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Bot avatar */
.bot-avatar {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.avatar-attacker { background: rgba(207,110,110,0.12); color: var(--lumi-error); }
.avatar-strategist { background: rgba(90,138,180,0.12); color: #5a8ab4; }
.avatar-tactician { background: rgba(212,164,75,0.12); color: var(--lumi-accent); }
.avatar-defender { background: rgba(74,158,109,0.12); color: #4a9e6d; }
.avatar-wildcard { background: rgba(212,164,75,0.12); color: var(--lumi-accent); }

/* Bot info */
.bot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.bot-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--lumi-text-primary);
}
.bot-tagline {
    font-size: 11px;
    color: var(--lumi-text-muted);
}

/* Bot stats row */
.bot-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bot-rating {
    font-size: 20px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
.bot-record {
    font-size: 11px;
    color: var(--lumi-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Bot play button */
.bot-play-btn {
    width: 100%;
}


/* Archetype-specific card hover glow */
.bot-card[data-archetype="attacker"]:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.25), inset 0 0 50px rgba(207,110,110,0.02);
}
.bot-card[data-archetype="strategist"]:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.25), inset 0 0 50px rgba(90,138,180,0.02);
}
.bot-card[data-archetype="tactician"]:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.25), inset 0 0 50px rgba(212,164,75,0.02);
}
.bot-card[data-archetype="defender"]:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.25), inset 0 0 50px rgba(74,158,109,0.02);
}
.bot-card[data-archetype="wildcard"]:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.25), inset 0 0 50px rgba(212,164,75,0.02);
}


/* ============================================
   GAME PAGE — Board + Sidebar
   ============================================ */

/* Mirrors game-report's .main-panel exactly so live-play and review match. */
.game-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
    background: var(--lumi-bg-surface);
}

/* --- Board column (game page) --- */
/* Mirrors game-report's .chess-wrapper exactly (gap: 0). */
.game-board-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    height: 100%;
    justify-content: center;
}
/* Same dimensions as game-report's #chessboard so the boards are interchangeable. */
.game-board-frame {
    /* Single-axis sizing + aspect-ratio. Setting BOTH explicit width and
       height plus aspect-ratio caused subtle measurement battles when the
       viewport hit a constraint corner (max-width vs. height), making the
       container's clientWidth fluctuate by 1-2px on reflow. ResizeObserver
       fired and redrawPieces tore down SVGs mid-animation. min() picks the
       tighter constraint and aspect-ratio derives the other axis cleanly. */
    width: min(calc(100vh - 100px), calc(80 * 1vw));
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.game-board-frame canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Play-online only: slightly larger board + slimmer sidebar.
   Scoped via :has() so the bot-play page (play/game.html) keeps its
   game-report-matched dimensions.
   Board side = 100vh - 2*nameplate height. Nameplates trimmed to 40px
   here so the board can grow to (100vh - 80px) without clipping the
   last rank inside the column's vertical budget. */
/* Play-Online layout — lobby and live-game share the same dimensions so
   navigating between them feels seamless (same board size, same nameplate
   height, same sidebar height, same edge breathing).

     • 16px top + 16px bottom layout padding → nothing kisses the viewport edge
     • Nameplate: 56px tall with 14px lateral inset → profile/clock pulled
       in off the board edges
     • Board: square, calc(100vh - 144px) — fits inside the 32px layout
       padding plus two 56px nameplates
     • Sidebar: calc(100vh - 32px) so it sits inside the padded zone */
.game-layout:has(.po-sidebar),
.game-layout:has(.po-live-sidebar) {
    padding: 16px 0;
    box-sizing: border-box;
}
/* Unified play-online layout (lobby + live game share the same dimensions).
   Math: 16 padding + 40 nameplate + 6 gap + board + 6 gap + 40 nameplate
   + 16 padding = 100vh, so board = 100vh - 124. */
.game-layout:has(.po-sidebar) .nameplate,
.game-layout:has(.po-live-sidebar) .nameplate {
    height: 40px;
    /* Nameplate width matches the board EXACTLY (no overhang) so the
       profile icon's left edge and the clock's right edge align with the
       board frame's left/right edges. */
    max-width: calc(100vh - 124px);
    padding: 0;
    box-sizing: border-box;
}
.game-layout:has(.po-sidebar) .game-board-frame,
.game-layout:has(.po-live-sidebar) .game-board-frame {
    /* Single-axis: width derived from min(viewport-height-budget, 86vw),
       height comes from the inherited aspect-ratio: 1. Avoids the dual
       width+height constraint that triggered ResizeObserver jitter. */
    width: min(calc(100vh - 124px), calc(86 * 1vw));
    height: auto;
}
.game-layout:has(.po-sidebar) .game-sidebar,
.game-layout:has(.po-live-sidebar) .game-sidebar {
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
}
/* Vertical breathing room between nameplates and the board so the profile
   icon and clock don't visually butt against the board edge. */
.game-layout:has(.po-sidebar) .game-board-col,
.game-layout:has(.po-live-sidebar) .game-board-col {
    gap: 6px;
}
.game-sidebar.po-sidebar,
.game-sidebar.po-live-sidebar {
    width: 460px;
}

/* Mobile top strip lives only on phones — hide on desktop. The rule
   inside @media (max-width:768px) flips it back to display:flex. */
.po-mobile-top { display: none; }

/* --- Sidebar (game page) --- */
/* Same width / height as game-report's .sidebar (style.css:1615). */
.game-sidebar {
    width: 520px;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--lumi-bg-body);
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    height: 100vh;
    max-height: 100vh;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
}

/* --- Player bars --- */
.game-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--lumi-bg-body);
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.game-player.active {
    border-color: rgba(212,164,75,0.3);
}

.game-player__avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
}
.game-player__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.game-player__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-player__rating {
    font-size: 11px;
    color: var(--lumi-text-muted);
    font-variant-numeric: tabular-nums;
}
.game-player__avatar--you {
    background: rgba(212,164,75,0.12);
    color: var(--lumi-accent);
}
.game-player--opponent .game-player__avatar {
    background: var(--lumi-border);
    color: var(--lumi-text-muted);
}

/* --- Clock --- */
.game-clock {
    font-size: 18px;
    font-weight: 700;
    color: var(--lumi-text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
    min-width: 64px;
    text-align: center;
    transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.game-clock.active {
    color: var(--lumi-accent);
    background: rgba(212,164,75,0.08);
    border-color: rgba(212,164,75,0.2);
}
.game-clock.low-time {
    color: var(--lumi-error);
    background: rgba(207,110,110,0.08);
    border-color: rgba(207,110,110,0.2);
    animation: clockPulse 1s ease-in-out infinite;
}
@keyframes clockPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}


/* --- Bot profile in sidebar --- */
.game-bot-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--lumi-border);
    flex-shrink: 0;
}
.game-bot-profile__avatar {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.game-bot-profile__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.game-bot-profile__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--lumi-text-primary);
}
.game-bot-profile__meta {
    font-size: 12px;
    color: var(--lumi-text-muted);
}


/* --- Chat --- */
.game-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 18px;
    overflow-y: auto;
    flex: 0 0 auto;
    max-height: 160px;
    scrollbar-width: thin;
    scrollbar-color: var(--lumi-border) transparent;
}
.game-chat::-webkit-scrollbar { width: 3px; }
.game-chat::-webkit-scrollbar-track { background: transparent; }
.game-chat::-webkit-scrollbar-thumb { background: var(--lumi-border); border-radius: 2px; }

.game-chat__bubble {
    background: rgba(212,164,75,0.06);
    border: 1px solid rgba(212,164,75,0.1);
    border-radius: 10px;
    border-top-left-radius: 3px;
    padding: 8px 12px;
    font-size: 12px;
    font-style: italic;
    color: var(--lumi-text-muted);
    line-height: 1.5;
    max-width: 85%;
    animation: bubbleIn 200ms ease-out;
}
@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --- Move list --- */
.game-moves {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 18px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--lumi-border) transparent;
}
.game-moves::-webkit-scrollbar { width: 3px; }
.game-moves::-webkit-scrollbar-track { background: transparent; }
.game-moves::-webkit-scrollbar-thumb { background: var(--lumi-border); border-radius: 2px; }

.game-moves__row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.game-moves__num {
    width: 28px;
    font-size: 11px;
    color: var(--lumi-text-muted);
    text-align: right;
    padding-right: 8px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.game-moves__white,
.game-moves__black {
    flex: 1;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lumi-text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s, color 0.1s;
}
.game-moves__white:hover,
.game-moves__black:hover {
    background: rgba(255,255,255,0.04);
    color: var(--lumi-text-primary);
}
.game-moves__white.current,
.game-moves__black.current {
    background: rgba(212,164,75,0.12);
    color: var(--lumi-accent);
    font-weight: 600;
}


/* --- Game controls --- */
.game-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border-top: 1px solid var(--lumi-border);
    flex-shrink: 0;
}
.game-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--lumi-border);
    background: rgba(255,255,255,0.03);
    color: var(--lumi-text-muted);
    font-family: inherit;
    line-height: 1;
}
.game-control-btn:hover {
    background: rgba(255,255,255,0.07);
    border-color: var(--lumi-border-hover);
    color: var(--lumi-text-secondary);
}
.game-control-btn.resign:hover {
    background: rgba(207,110,110,0.08);
    border-color: rgba(207,110,110,0.2);
    color: var(--lumi-error);
}


/* ============================================
   GAME RESULT OVERLAY
   ============================================ */

.game-result {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,8,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: overlayIn 250ms ease-out;
}
@keyframes overlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.game-result__card {
    background: var(--lumi-bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 36px 40px;
    text-align: center;
    min-width: 320px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: cardIn 300ms ease-out;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
@keyframes cardIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.game-result__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.game-result__icon.win {
    background: rgba(93,182,125,0.12);
    color: var(--color-green-300);
}
.game-result__icon.loss {
    background: rgba(207,110,110,0.12);
    color: var(--lumi-error);
}
.game-result__icon.draw {
    background: var(--lumi-border);
    color: var(--lumi-text-muted);
}

.game-result__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--lumi-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.game-result__sub {
    font-size: 13px;
    color: var(--lumi-text-muted);
    margin-bottom: 8px;
}

.game-result__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
}

.game-result__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}
.game-result__btn:active { transform: scale(0.97); }

/* Review Game — primary purple CTA */
.game-result__btn.primary {
    background: rgba(212,164,75,0.15);
    border-color: rgba(212,164,75,0.3);
    color: var(--lumi-accent);
}
.game-result__btn.primary:hover {
    background: rgba(212,164,75,0.25);
    border-color: rgba(212,164,75,0.45);
    color: var(--lumi-amber-300);
}

/* Rematch */
.game-result__btn.secondary {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--lumi-text-secondary);
}
.game-result__btn.secondary:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: var(--lumi-text-primary);
}

/* Next Bot / Back to Lobby — ghost style */
.game-result__btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--lumi-text-muted);
    font-weight: 500;
    font-size: 13px;
    padding: 9px 16px;
}
.game-result__btn.ghost:hover {
    background: rgba(255,255,255,0.04);
    color: var(--lumi-text-secondary);
}


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

@media (max-width: 840px) {
    .play-hub {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 48px);
        overflow: auto;
        gap: 16px;
        padding: 16px;
    }
    .play-board-col { flex: none; justify-content: center; }
    .play-board-frame { width: min(100%, 480px); height: auto; margin: 0 auto; }
    .play-content-col { width: 100%; max-height: none; overflow: visible; }

    .game-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 48px);
        overflow: auto;
        padding: 16px;
    }
    .game-board-col { width: 100%; }
    .game-board-frame { width: min(100%, 480px); max-width: none; margin: 0 auto; }
    .game-sidebar {
        width: 100%;
        max-height: none;
        height: auto;
        /* Desktop sidebar has margin-left/right: 10px (line 492-493). On
           mobile, width:100% combined with those margins shifts the panel
           10px right and overflows the parent — visibly asymmetric. Zero
           the margins so the panel sits centered inside the page padding. */
        margin-left: 0;
        margin-right: 0;
    }

    .game-result__card {
        min-width: 280px;
        padding: 28px 24px;
    }
}

@media (max-width: 480px) {
    .play-time-pill { font-size: 11px; padding: 8px 6px; }
    .tier-label { font-size: 11px; }
    .tier-range { font-size: 9px; }
    .bot-rating { font-size: 18px; }
}

@media (min-width: 1200px) {
    .play-content-col { width: 380px; }
}


/* ===========================================================================
   MOBILE — /play/online lobby + /play/online/game live game (≤768px)

   The bot-page layout (`play.html`, `play/game.html`) is handled above. This
   block targets the new online-play surfaces (`.po-sidebar` and
   `.po-live-sidebar`) which use `.game-layout` with the `:has()`-scoped
   desktop sizing; we strip those rules on mobile and re-stack everything
   single-column with the panel up top.

   Bottom site-nav (.side-nav) is fixed at 68px + safe-area on mobile, so all
   layouts reserve that much padding-bottom to keep content reachable.
   =========================================================================== */
@media (max-width: 768px) {
    /* iOS safe-area for the nav at the bottom */
    :root {
        --po-mobile-nav-h: calc(68px + env(safe-area-inset-bottom, 0));
    }

    /* ────── Lobby page (`.po-sidebar` is in the tree) ────── */
    .game-layout:has(.po-sidebar) {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;     /* override desktop's center */
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        padding: 16px 12px var(--po-mobile-nav-h);
        gap: 0;
    }
    /* Decorative idle board on the lobby is pure visual flavor — on mobile
       it pushes the actual UI below the fold, so hide it. */
    .game-layout:has(.po-sidebar) .game-board-col {
        display: none !important;
    }
    /* Sidebar (panel) becomes the entire page surface */
    .game-layout:has(.po-sidebar) .game-sidebar {
        width: 100%;
        height: auto;
        max-height: none;
        position: static;
    }
    /* Panel itself: comfortable padding, no max width clamp */
    .game-layout:has(.po-sidebar) .po-panel {
        max-width: none;
        min-width: 0;
        padding: 18px 16px;
        border-radius: 14px;
    }
    /* Connect-Lichess gate — give it room and bigger CTA */
    .game-layout:has(.po-sidebar) .po-gate {
        padding: 8px 4px 14px;
    }
    .game-layout:has(.po-sidebar) .po-gate .po-cta {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }
    /* Stats lines on mobile: keep on one line if it fits; otherwise wrap
       on the · separator between the two facts, not mid-phrase. */
    .game-layout:has(.po-sidebar) .po-live-stats,
    .game-layout:has(.po-sidebar) .po-live-stats--gate {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 2px;
        column-gap: 6px;
        font-size: 13px;
        line-height: 1.45;
    }
    /* Each fact ("40,047 players online", "17,359 games in play") becomes
       its own line at very narrow widths, but the parts of one fact never
       split. Achieved by making the · separator a flex line-break trigger:
       give it `flex-basis: 100%` only when wrapping is needed — handled
       below via order + flex-basis. */
    .game-layout:has(.po-sidebar) .po-live-stats__sep {
        opacity: 0.4;
        margin: 0 4px;
    }
    .game-layout:has(.po-sidebar) .po-live-stats__count {
        white-space: nowrap;
    }
    .game-layout:has(.po-sidebar) .po-live-stats__label {
        white-space: nowrap;
    }

    /* Connected-state controls — make tiles + Play Game thumb-friendly */
    .game-layout:has(.po-sidebar) .po-stakes {
        width: 100%;
    }
    .game-layout:has(.po-sidebar) .po-stakes__btn {
        min-height: 44px;
        flex: 1;
    }
    .game-layout:has(.po-sidebar) .po-tile {
        min-height: 64px;
    }
    .game-layout:has(.po-sidebar) .po-tile-alts {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .game-layout:has(.po-sidebar) .po-cta--play {
        width: 100%;
        min-height: 52px;
        font-size: 17px;
    }
    .game-layout:has(.po-sidebar) .po-bottom-group {
        padding-top: 10px;
    }

    /* ────── Live-game page (`.po-live-sidebar` is in the tree) ────── */
    .game-layout:has(.po-live-sidebar) {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        /* box-sizing: border-box so min-height: 100dvh INCLUDES the
           padding (otherwise padding pushes content past the viewport,
           hiding the action row behind the fixed move-nav). */
        box-sizing: border-box;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        padding: 8px 8px var(--po-mobile-nav-h);
        gap: 0;
    }
    /* board-col packs naturally below po-mobile-top now; no auto margin
       needed since the top strip fills the space above the opponent
       nameplate. flex-shrink:0 keeps the board column from being
       squeezed vertically — without it the flex container shrinks the
       frame's height, breaking the aspect-ratio: 1 and chopping the
       bottom rank off the board. */
    .game-layout:has(.po-live-sidebar) .game-board-col {
        margin-top: 0;
        flex-shrink: 0;
    }
    /* Cap the board so the top strip (brand + opening + move list) has
       room. min() picks whichever is smaller — full row width OR the
       available vertical space minus everything else (nameplates, action
       row, move-nav, padding, top strip). */
    .game-layout:has(.po-live-sidebar) .game-board-frame {
        max-height: calc(100dvh - 360px);
        max-width: calc(100dvh - 360px);
        margin: 0 auto;
    }
    /* Compact header at the very top of the page on mobile */
    .game-layout:has(.po-live-sidebar) .po-live-header {
        order: -2;
        padding: 6px 8px;
        margin-bottom: 2px;
    }
    /* Board column gets full width; nameplates align to its width via the
       :has() rules above — override max-width to viewport-fit and let the
       board square itself with aspect-ratio. */
    .game-layout:has(.po-live-sidebar) .game-board-col {
        order: -1;
        width: 100%;
        height: auto;
    }
    .game-layout:has(.po-live-sidebar) .nameplate {
        height: 48px;
        max-width: 100%;
        width: 100%;
        padding: 0 10px;
    }
    .game-layout:has(.po-live-sidebar) .game-board-frame {
        /* Use viewport-width for BOTH axes so the frame stays square and
           the chessboard inside (which is 100% of frame) renders fully.
           width:100% + aspect-ratio was being squashed by the flex column
           on tighter viewports, clipping the bottom rank. */
        width: calc(100vw - 16px);
        height: calc(100vw - 16px);
        max-width: none;
        max-height: none;
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
    }
    /* Sidebar content (controls etc.) flows below the board. Drop the
       desktop border/background and zero out internal gap so the action
       row reads as part of the board block. */
    .game-layout:has(.po-live-sidebar) .game-sidebar {
        width: 100%;
        height: auto;
        max-height: none;
        padding: 0;
        gap: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        margin: 0;
    }
    /* Hide the separate header inside the sidebar — the page-level one takes
       its place above the board on mobile */
    .game-layout:has(.po-live-sidebar) .game-sidebar > .po-live-header {
        display: none;
    }

    /* Live game on mobile — hide the opening-bar / move-list ONLY when
       they're still inside the sidebar. The inline script on game.html
       moves these nodes into .po-mobile-top above the opponent nameplate
       on mobile; once moved they're no longer inside .po-live-sidebar and
       become visible again. */
    .po-live-sidebar > .game-moves,
    .po-live-sidebar > .po-opening-bar {
        display: none;
    }

    /* Top strip — Lumichess brand + opening name. Sits above the opponent
       nameplate, filling the otherwise-empty space. Flex order -2 puts it
       before .game-board-col (which has order: -1). Uses the same `.hp-logo`
       brand styles loaded from homepage.css. */
    .po-mobile-top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 0 8px 0;
        order: -2;
    }
    /* Show the opening-bar when it lives inside .po-mobile-top (the script
       moved it out of the sidebar where the default mobile rule hides it). */
    .po-mobile-top .po-opening-bar {
        display: block;
        font-size: 12px;
        color: var(--lumi-text-secondary, rgba(240,237,232,0.7));
        padding: 0 2px;
        line-height: 1.2;
    }

    /* Hide the site bottom-nav (Home / Play / Profile Report) during a
       live game — the move-nav buttons take its slot at the bottom of
       the viewport. Back arrow inside the sidebar still gets users to
       the lobby. */
    body:has(.po-live-sidebar) .side-nav {
        display: none !important;
    }

    /* Zero top padding so a full 374-tall board + brand + opening +
       nameplates + action row all fit a 664-tall viewport without the
       action row overlapping the fixed move-nav. */
    .game-layout:has(.po-live-sidebar) {
        padding-top: 0;
    }

    /* Action controls (Abort / Draw / Resign) — flow with the sidebar
       content so they sit IMMEDIATELY below the player nameplate, hugging
       it with zero gap. Keep `position: relative` (NOT static) so the
       .po-confirm popover that anchors to it (bottom: calc(100% + 8px))
       still positions above the row on mobile. */
    .game-layout:has(.po-live-sidebar) .po-live-controls {
        position: relative;
        background: transparent;
        padding: 0;
        margin: 0;
        border-top: none;
    }
    /* Negotiation slot reserves 44px+8px of empty space for banners that
       rarely appear. Zero it on mobile so the action row hugs the player
       nameplate; banners can shift the row down momentarily when shown. */
    .game-layout:has(.po-live-sidebar) .po-negotiation-slot {
        min-height: 0;
        margin-bottom: 0;
    }
    .game-layout:has(.po-live-sidebar) .po-live-controls__row {
        gap: 6px;
    }

    /* Move navigation — fixed bar at the very bottom of the viewport,
       replacing the site bottom-nav slot. */
    .game-layout:has(.po-live-sidebar) .po-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: flex;
        gap: 6px;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0));
        background: var(--lumi-bg-surface, #1a1a17);
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .game-layout:has(.po-live-sidebar) .po-nav__btn {
        flex: 1;
        min-height: 44px;
    }

    /* Reserve only enough space for the fixed move-nav. The action row is
       now part of the normal flow so it gets its space naturally. */
    .game-layout:has(.po-live-sidebar) {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important;
    }
    .game-layout:has(.po-live-sidebar) .po-live-controls__row {
        gap: 6px;
    }
    .game-layout:has(.po-live-sidebar) .game-control-btn {
        min-height: 48px;
        font-size: 14px;
        padding: 8px 4px;
    }

    /* Settings menu (gear dropdown) — pin to top-right with viewport edges in mind */
    .game-layout:has(.po-live-sidebar) .po-live-menu {
        right: 8px;
        top: 50px;
        min-width: 200px;
    }

    /* Confirm popover (resign/abort) — center on screen, not anchored to button */
    .po-confirm[data-anchor],
    .po-confirm {
        max-width: calc(100vw - 24px);
    }

    /* Finding-opponent overlay sizing */
    .po-overlay__inner {
        margin: 16px;
        padding: 24px 18px;
        max-width: calc(100vw - 32px);
    }

    /* Game-result card */
    .po-result__card {
        max-width: calc(100vw - 24px);
        padding: 20px 18px;
    }
    .po-result__title { font-size: 20px; }
    .po-result__sub { font-size: 14px; }
    .po-result__actions .po-cta { min-height: 46px; }
    .po-result__row .po-cta { min-height: 46px; }

    /* Opp-gone banner — wrap nicely on narrow screens */
    .po-opp-gone {
        flex-wrap: wrap;
        gap: 8px;
    }
    .po-opp-gone__btn {
        min-height: 40px;
    }
}

/* Extra-small screens — squeeze padding and font sizes */
@media (max-width: 360px) {
    .game-layout:has(.po-sidebar) {
        padding-left: 8px;
        padding-right: 8px;
    }
    .game-layout:has(.po-sidebar) .po-panel {
        padding: 14px 12px;
    }
    .game-layout:has(.po-live-sidebar) .game-control-btn {
        font-size: 12px;
    }
    .po-result__title { font-size: 18px; }
}


/* ===== REDUCED MOTION ===== */

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


/* ===== PLAY ONLINE HUB (M3) ===== */

.po-hub {
    display: grid;
    place-items: center;
    padding: 48px 24px;
    min-height: calc(100vh - 0px);
    box-sizing: border-box;
}

.po-card {
    width: 100%;
    max-width: 520px;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.po-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.po-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    letter-spacing: -0.01em;
}
.po-attrib {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--lumi-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.po-attrib__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #6B9FD4;
}
.po-attrib__knight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: var(--lumi-text-muted);
}
.po-attrib__knight svg {
    width: 100%;
    height: 100%;
    display: block;
}
.po-attrib--foot {
    text-transform: none;       /* don't uppercase the brand text */
    letter-spacing: 0;
    font-size: 11px;            /* attribution footer — user-requested smaller */
    gap: 7px;
}

/* Live "N players online on Lichess" — sits just above the attribution.
   Pulsing green dot conveys liveness. Number is tabular so digit roll-overs
   don't shift the layout. */
.po-live-stats {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--lumi-text-secondary);
    letter-spacing: 0.01em;
}
.po-live-stats__fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;       /* count + label never split across a line */
}
.po-live-stats__count {
    display: inline;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--lumi-text-primary);
}
.po-live-stats__label { display: inline; opacity: 0.85; }
.po-live-stats__sep {
    display: inline;
    margin: 0 2px;
    opacity: 0.45;
}
.po-live-stats__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4a9e6d;
    box-shadow: 0 0 0 0 rgba(74, 158, 109, 0.55);
    animation: poLivePulse 2.4s ease-out infinite;
}
/* Gate variant — sits below the Connect Lichess button; needs a top
   margin since it's no longer a footer line. */
.po-live-stats.po-live-stats--gate {
    margin-top: 14px;
    margin-bottom: 0;
}
@keyframes poLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 158, 109, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(74, 158, 109, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 158, 109, 0); }
}

/* Live-count line inside the finding-opponent overlay. Same dot+count+label
   pattern as the lobby footer — keeps our voice consistent. */
.po-finding__pool {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lumi-text-secondary);
    white-space: nowrap;
}
.po-finding__pool #po-finding-pool-count {
    display: inline;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--lumi-text-primary);
}
.po-finding__pool-label { display: inline; opacity: 0.85; }


/* Connect card (when no token) */
.po-connect {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(107,159,212,0.25);
    background: rgba(107,159,212,0.06);
    border-radius: 12px;
}
.po-connect__body { flex: 1; }
.po-connect__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    margin-bottom: 2px;
}
.po-connect__sub {
    font-size: 12px;
    color: var(--lumi-text-secondary);
    line-height: 1.4;
}

/* Connected pill (when token present) */
.po-connected {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(93,182,125,0.25);
    background: rgba(93,182,125,0.08);
    font-size: 12px;
    color: var(--lumi-text-secondary);
    width: fit-content;
}
.po-connected__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #5DB67D;
    box-shadow: 0 0 6px rgba(93,182,125,0.6);
}
.po-connected strong {
    color: var(--lumi-text-primary);
    font-weight: 600;
}

/* Mode tabs */
.po-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--lumi-bg-body);
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    padding: 4px;
}
.po-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--lumi-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.po-tab:hover { color: var(--lumi-text-secondary); }
.po-tab.active {
    background: var(--lumi-bg-card);
    color: var(--lumi-text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Rated / casual toggle */
.po-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.po-toggle__btn {
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--lumi-border);
    background: var(--lumi-bg-body);
    color: var(--lumi-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.po-toggle__btn:hover {
    color: var(--lumi-text-secondary);
    border-color: var(--lumi-border-hover);
}
.po-toggle__btn.active {
    border-color: rgba(212,164,75,0.4);
    background: rgba(212,164,75,0.1);
    color: var(--lumi-accent);
}

/* Time control pills */
.po-time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.po-time-pill {
    padding: 11px 8px;
    border-radius: 8px;
    border: 1px solid var(--lumi-border);
    background: var(--lumi-bg-body);
    color: var(--lumi-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all 0.15s;
}
.po-time-pill:hover {
    color: var(--lumi-text-secondary);
    border-color: var(--lumi-border-hover);
}
.po-time-pill.active {
    border-color: rgba(212,164,75,0.4);
    background: rgba(212,164,75,0.1);
    color: var(--lumi-accent);
}

/* Play button */
.po-play {
    padding: 14px 18px;
    border-radius: 10px;
    border: none;
    background: var(--lumi-amber, #FFBF00);
    color: #1a1a17;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
}
.po-play:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.po-play:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Generic primary button (used in connect card) */
.po-btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--lumi-border);
    background: var(--lumi-bg-body);
    color: var(--lumi-text-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.po-btn--primary {
    background: var(--lumi-amber, #FFBF00);
    color: #1a1a17;
    border-color: transparent;
}
.po-btn:hover:not(:disabled) { filter: brightness(1.05); }

.po-link {
    background: none;
    border: none;
    color: var(--lumi-text-muted);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
    margin-left: auto;
    padding: 0;
}
.po-link:hover { color: var(--lumi-text-secondary); }

.po-note {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--lumi-text-muted);
}

/* Ensure [hidden] attribute always overrides display: flex/grid in po-* */
.po-card [hidden] { display: none !important; }

/* Live-game loading overlay — visible until the Lichess stream sends the
   first gameFull event. Same light-dim treatment as the finding-opponent
   overlay so the page stays legible. Toggles to an error state if the
   stream fails before any data arrives. */
.po-loading {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 13, 0.55);
    animation: po-overlay-in 0.18s ease-out;
}
.po-loading[hidden] { display: none !important; }
.po-loading__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 36px;
    text-align: center;
    max-width: 360px;
}
.po-loading__spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(212, 164, 75, 0.18);
    border-top-color: var(--lumi-accent);
    animation: po-spin 0.9s linear infinite;
}
.po-loading.po-loading--error .po-loading__spinner {
    display: none;
}
.po-loading__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    letter-spacing: -0.005em;
}
.po-loading__sub {
    font-size: 14px;
    color: var(--lumi-text-secondary);
    line-height: 1.4;
}
.po-loading__retry {
    margin-top: 6px;
}
@keyframes po-spin {
    to { transform: rotate(360deg); }
}

/* Finding-opponent overlay — light dim, no blur. Wait states feel less
   claustrophobic with the page still legible underneath. */
.po-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 13, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: po-overlay-in 0.18s ease-out;
}
.po-overlay[hidden] { display: none !important; }
@keyframes po-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.po-overlay__inner {
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 14px;
    padding: 36px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 340px;
    max-width: 400px;
    text-align: center;
}
.po-finding__spinner {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--lumi-amber, #FFBF00);
    border-radius: 50%;
    animation: po-spin 0.9s linear infinite;
    margin-bottom: 4px;
}
.po-finding__spinner--success {
    animation: none;
    border: 3px solid var(--lumi-amber, #FFBF00);
    background: var(--lumi-amber, #FFBF00);
    position: relative;
    transform: scale(1);
    transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.18);
}
.po-finding__spinner--success::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 6px;
    width: 9px;
    height: 16px;
    border-right: 3px solid #1a1a17;
    border-bottom: 3px solid #1a1a17;
    transform: rotate(45deg);
}
@keyframes po-spin { to { transform: rotate(360deg); } }
.po-finding__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    letter-spacing: -0.005em;
}
.po-finding__meta {
    font-size: 12px;
    color: var(--lumi-text-secondary);
    font-variant-numeric: tabular-nums;
}
.po-finding__hint {
    font-size: 11px;
    color: var(--lumi-text-muted);
    margin-top: 2px;
}
.po-overlay__inner .po-btn {
    margin-top: 14px;
    min-width: 120px;
}

/* Live-game sidebar info block */
.po-game-info {
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.po-game-info__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    line-height: 1.4;
}
.po-game-info__label {
    color: var(--lumi-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    font-weight: 600;
}
.po-game-info__value {
    color: var(--lumi-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.po-game-info__attrib {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--lumi-border);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lumi-text-muted);
}
.po-game-info__attrib a {
    color: var(--lumi-accent);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
.po-game-info__attrib a:hover { text-decoration: underline; }

/* Live-game move list rows */
.po-move-row {
    display: grid;
    grid-template-columns: 30px 1fr 1fr;
    gap: 6px;
    padding: 4px 8px;
    font-size: 13px;
    color: var(--lumi-text-secondary);
    font-variant-numeric: tabular-nums;
    border-radius: 4px;
}
.po-move-row:nth-child(odd) {
    background: rgba(255,255,255,0.02);
}
.po-move-num { color: var(--lumi-text-muted); }
.po-move-cell { font-weight: 500; }

/* ============================================================
   PLAY ONLINE — sidebar panel (lives inside .game-sidebar)
   Compact content-sized panel; doesn't try to fill the board's
   tall column. Sits at top with clean vertical stack.
   ============================================================ */

/* Lobby sidebar override: pad inside; "New Game" + tiles sit at the top. */
.game-sidebar.po-sidebar {
    padding: 24px 22px;
    justify-content: flex-start;
    overflow-y: auto;
}

.po-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    min-height: 0;
}
/* Three-zone layout:
     • header pinned to the top
     • play setup flows naturally right under the header
     • stats + Powered-by-Lichess pinned to the bottom (auto-margin above
       absorbs remaining space). */
.po-panel__head { flex: 0 0 auto; }
.po-bottom-group { margin-top: auto; }
.po-panel [hidden] { display: none !important; }

.po-panel__head {
    padding-bottom: 4px;
    text-align: center;
}
.po-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lumi-accent, #D4A44B);
    margin-bottom: 4px;
}
.po-panel__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    letter-spacing: -0.015em;
}
.po-panel__title-icon {
    width: 18px;
    height: 18px;
    color: var(--lumi-accent);
    flex-shrink: 0;
}

/* Form (visible when connected) */
.po-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    border: none;
}
/* Accordion variant — sits inside the footer below the summary chip; gets
   a slightly recessed visual to read as expansion content. */
.po-form--accordion {
    padding: 14px 0 6px;
    gap: 14px;
    animation: po-form-in 0.2s ease-out;
}
@keyframes po-form-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.po-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.po-section__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lumi-text-muted);
}

/* Tabs: same visual language as time pills (consistent active state) */
.po-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.po-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 10px;
    border: 1px solid var(--lumi-border);
    border-radius: 8px;
    background: var(--lumi-bg-body);
    color: var(--lumi-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s, transform 0.08s;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}
.po-tab:hover {
    color: var(--lumi-text-secondary);
    border-color: var(--lumi-border-hover);
}
.po-tab.active {
    border-color: rgba(212, 164, 75, 0.45);
    background: rgba(212, 164, 75, 0.10);
    color: var(--lumi-accent);
    box-shadow: 0 2px 0 rgba(165, 124, 0, 0.35);
}
.po-tab:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Toggle: 2-up segmented, slightly different feel from time-class tabs */
.po-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.po-toggle__btn {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--lumi-border);
    background: var(--lumi-bg-body);
    color: var(--lumi-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s, transform 0.08s;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}
.po-toggle__btn:hover {
    color: var(--lumi-text-secondary);
    border-color: var(--lumi-border-hover);
}
.po-toggle__btn.active {
    border-color: rgba(212, 164, 75, 0.45);
    background: rgba(212, 164, 75, 0.10);
    color: var(--lumi-accent);
    box-shadow: 0 2px 0 rgba(165, 124, 0, 0.35);
}
.po-toggle__btn:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Time-control pills: 3-up grid */
.po-time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.po-time-pill {
    padding: 12px 8px;
    border-radius: 8px;
    border: 1px solid var(--lumi-border);
    background: var(--lumi-bg-body);
    color: var(--lumi-text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all 0.15s, transform 0.08s;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}
.po-time-pill:hover {
    color: var(--lumi-text-secondary);
    border-color: var(--lumi-border-hover);
}
.po-time-pill.active {
    border-color: rgba(212, 164, 75, 0.45);
    background: rgba(212, 164, 75, 0.10);
    color: var(--lumi-accent);
    box-shadow: 0 2px 0 rgba(165, 124, 0, 0.35);
}
.po-time-pill:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Footer: stakes + tile + CTAs. Sits naturally below the head, no border. */
.po-panel__foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Summary chip — primary affordance for the current configuration. Click to
   reveal the full options form. Visually a "card", not a button-button — but
   the whole row is interactive. */
.po-summary-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    background: var(--lumi-bg-card);
    color: var(--lumi-text-primary);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.po-summary-chip:hover {
    border-color: var(--lumi-border-hover);
    background: rgba(255,255,255,0.02);
}
.po-summary-chip__pieces {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.po-summary-chip__sep {
    color: var(--lumi-text-muted);
    font-weight: 400;
}
.po-summary-chip__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lumi-accent);
}
.po-summary-chip__chevron {
    transition: transform 0.18s ease;
}
.po-summary-chip[aria-expanded="true"] .po-summary-chip__chevron {
    transform: rotate(180deg);
}

/* CTA: the primary action button. One reusable class for "Connect" and "Play". */
.po-cta {
    width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    border: none;
    border-radius: 10px;
    background: var(--lumi-amber, #FFBF00);
    color: #1a1a17;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.12s;
    box-shadow: 0 4px 0 rgba(165, 124, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.22);
}
.po-cta:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 rgba(165, 124, 0, 0.6), 0 8px 18px rgba(0, 0, 0, 0.28);
}
.po-cta:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(165, 124, 0, 0.55);
}
.po-cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

/* Bottom group — wraps active-games + attribution, pinned to panel bottom */
/* Bottom group — pinned to the panel's floor by the .po-panel layout rule
   (margin-top: auto). Internal layout only here; no margin-top override. */
.po-bottom-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Footer attribution — only layout overrides here. Typography (font-size,
   gap, text-transform) lives in the canonical .po-attrib--foot rule near
   line 977; declaring font-size again here would override that bump. */
.po-attrib--foot {
    align-self: center;
    color: var(--lumi-text-muted);
}
/* Settings — gear button anchored top-right of the panel header. The
   dropdown drops down underneath and shows linked-account + disconnect. */
.po-panel__head { position: relative; }
.po-panel__settings {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--lumi-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.po-panel__settings[hidden] { display: none !important; }
.po-panel__settings:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--lumi-text-primary);
}
.po-panel__settings[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--lumi-text-primary);
}

/* Settings dropdown — anchored under the gear; covers from the right edge. */
.po-panel { position: relative; }
.po-panel-menu {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 25;
    min-width: 220px;
    padding: 6px;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    animation: po-overlay-in 0.12s ease-out;
}
.po-panel-menu[hidden] { display: none !important; }
.po-panel-menu__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
}
.po-panel-menu__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lumi-text-muted);
}
.po-panel-menu__user {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    word-break: break-all;
}
.po-panel-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--lumi-text-secondary);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.po-panel-menu__item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--lumi-text-primary);
}
.po-panel-menu__item--danger:hover {
    background: rgba(207, 110, 110, 0.10);
    color: #E58787;
}

/* ===== Disconnected state — compact single-CTA panel ===== */
.po-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 8px 8px 4px;
}
.po-gate__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(212, 164, 75, 0.1);
    color: var(--lumi-accent);
    margin-bottom: 4px;
}
.po-gate__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--lumi-text-primary);
}
.po-gate__sub {
    font-size: 13px;
    line-height: 1.5;
    color: var(--lumi-text-secondary);
    max-width: 260px;
    margin-bottom: 8px;
}


/* Idle bars are display-only; soften the visuals so the user knows nothing's live */
.po-idle-bar { opacity: 0.85; }
.po-idle-bar .game-clock { color: var(--lumi-text-muted); }

/* Idle board: dim slightly so the eye lands on the configuration sidebar */
#po-idle-board { opacity: 0.95; pointer-events: none; }

/* Idle bars are display-only; soften the visuals so the user knows nothing's live */
.po-idle-bar { opacity: 0.85; }
.po-idle-bar .game-clock { color: var(--lumi-text-muted); }

/* Idle board: dim the pieces slightly so the eye lands on the configuration */
#po-idle-board { opacity: 0.95; pointer-events: none; }

/* Idle nameplate format icon + meta row */
.game-player__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--lumi-text-muted);
    line-height: 1;
}
.po-idle-format {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--lumi-accent);
    font-weight: 600;
}
.po-idle-sep { opacity: 0.45; }
.po-idle-bar .game-player__rating {
    color: var(--lumi-text-secondary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Opponent avatar in the lobby — generic outline icon, not a "?" */
.po-idle-opp-avatar {
    color: var(--lumi-text-muted);
}
.po-idle-opp-avatar svg {
    display: block;
    opacity: 0.85;
}

/* ===================================================
   PLAY ONLINE — quick-pick tiles UI (v2)
   =================================================== */

/* Stakes toggle — compact pill at top of footer */
.po-stakes {
    display: inline-flex;
    align-self: center;
    background: var(--lumi-bg-body);
    border: 1px solid var(--lumi-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.po-stakes__btn {
    padding: 6px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--lumi-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.po-stakes__btn:hover { color: var(--lumi-text-secondary); }
.po-stakes__btn.active {
    background: rgba(212, 164, 75, 0.15);
    color: var(--lumi-accent);
}

/* Tile list — each row is a one-click play button */
.po-tiles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.po-tile {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
        "icon time badge"
        "icon sub  badge";
    column-gap: 12px;
    row-gap: 0;
    padding: 14px 16px;
    border: 1px solid var(--lumi-border);
    border-radius: 12px;
    background: var(--lumi-bg-card);
    color: var(--lumi-text-primary);
    cursor: pointer;
    text-align: left;
    transition: transform 0.08s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
    font-family: inherit;
}
.po-tile:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.po-tile:hover:not(:disabled) {
    border-color: var(--lumi-border-hover);
    background: rgba(255, 255, 255, 0.025);
    transform: translateY(-1px);
}
.po-tile.active {
    border-color: rgba(212, 164, 75, 0.55);
    background: rgba(212, 164, 75, 0.08);
    box-shadow: 0 3px 0 rgba(165, 124, 0, 0.4);
}
.po-tile.active .po-tile__time { color: var(--lumi-accent); }
.po-tile:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.po-tile__icon {
    grid-area: icon;
    align-self: center;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
}
.po-tile__icon svg {
    width: 22px; height: 22px;
    display: block;
}
.po-tile__time {
    grid-area: time;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lumi-text-primary);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.po-tile__sub {
    grid-area: sub;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lumi-text-muted);
    line-height: 1.15;
}
.po-tile__badge {
    grid-area: badge;
    align-self: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(212, 164, 75, 0.15);
    color: var(--lumi-accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ===================================================
   PLAY ONLINE — single tile + alts + secondary CTAs (v3)
   =================================================== */

.po-tile-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Selected tile — center the icon + time + sub as one inline cluster.
   Chevron is absolutely positioned at the right edge so it doesn't pull
   the cluster off-center. */
.po-tile--selected {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 14px 16px;
}
.po-tile--selected .po-tile__icon {
    width: 22px;
    height: 22px;
}
.po-tile--selected .po-tile__icon svg {
    width: 20px;
    height: 20px;
}
.po-tile__chev {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lumi-accent);
    opacity: 0.7;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.po-tile--selected:hover .po-tile__chev { opacity: 1; }
.po-tile--selected[aria-expanded="true"] .po-tile__chev {
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
}

/* Alternatives panel — appears below the selected tile when Change is open */
.po-tile-alts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0 0;
    animation: po-form-in 0.18s ease-out;
}
.po-tile-alts[hidden] { display: none; }

.po-alt {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    grid-template-areas: "icon time sub";
    column-gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    background: var(--lumi-bg-body);
    color: var(--lumi-text-primary);
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s, transform 0.08s;
}
.po-alt:hover {
    border-color: var(--lumi-border-hover);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
}
.po-alt__icon {
    grid-area: icon;
    display: grid; place-items: center;
    width: 24px; height: 24px;
}
.po-alt__icon svg { width: 18px; height: 18px; display: block; }
.po-alt__time {
    grid-area: time;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lumi-text-primary);
}
.po-alt__sub {
    grid-area: sub;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lumi-text-muted);
}

.po-cta--ghost {
    background: var(--lumi-bg-card);
    color: var(--lumi-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    font-size: 12px;
    font-weight: 600;
    padding: 11px 10px;
    gap: 6px;
    text-decoration: none;
}
.po-cta--ghost:hover {
    color: var(--lumi-text-primary);
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}
.po-cta--ghost:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* ===================================================
   PLAY ONLINE — in-game extras (draw banner, nav)
   =================================================== */

/* Negotiation slot — fixed-height strip directly above the action row.
   Hosts the inbound offer banners (draw / takeback) and the transient
   accept/decline flash toasts. The min-height reserves the space whether
   or not a banner is currently visible, so the action buttons (Abort /
   Takeback / Draw / Resign) don't shift when banners come and go. */
.po-negotiation-slot {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    margin-bottom: 8px;
}

/* Inbound draw offer banner (above move list when opponent offers) */
/* Inbound draw offer banner — "Opponent offered a draw" + small ✕ to decline.
   Sits where #po-draw-pending sits (right above the action row); the two are
   mutually exclusive so they share the slot. Subtle filled bar matching the
   Lumi-amber tint for "something is waiting on you". */
.po-draw-incoming {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(93, 182, 125, 0.10);
    border: 1px solid rgba(93, 182, 125, 0.28);
    color: var(--lumi-text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    animation: po-draw-incoming-pop 320ms cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
}
.po-draw-incoming[hidden] { display: none; }
.po-draw-incoming__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(93, 182, 125, 0.18);
    color: #5DB67D;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}
.po-draw-incoming__text {
    flex: 1;
    min-width: 0;
}
@keyframes po-draw-incoming-pop {
    0%   { opacity: 0; transform: translateY(-3px); }
    100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .po-draw-incoming { animation: none; }
}

/* Takeback — same shape as draw banners (one outbound pending pill, one
   inbound banner with Accept + Decline). Lichess Board API parses both
   /takeback/yes (offer or accept) and /takeback/no (decline) the same
   way as /draw, so the UI mirrors. */
.po-takeback-pending {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(212, 164, 75, 0.08);
    color: var(--lumi-text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.po-takeback-pending[hidden] { display: none; }
.po-takeback-pending__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--lumi-accent);
    flex-shrink: 0;
    animation: po-pulse 1.4s ease-in-out infinite;
}
.po-takeback-pending__cancel {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--lumi-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}
.po-takeback-pending__cancel:hover { color: var(--lumi-text-primary); }

.po-takeback-incoming {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(93, 182, 125, 0.10);
    border: 1px solid rgba(93, 182, 125, 0.28);
    color: var(--lumi-text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    animation: po-draw-incoming-pop 320ms cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
}
.po-takeback-incoming[hidden] { display: none; }
.po-takeback-incoming__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(93, 182, 125, 0.18);
    color: #5DB67D;
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.po-takeback-incoming__text {
    flex: 1;
    min-width: 0;
}
/* Accept/Decline now share the .po-incoming__accept and .po-incoming__decline
   styles (defined alongside the flash states below) for both draw + takeback
   inbound banners. */

/* Outbound draw offer pending indicator */
/* Draw-offer-sent status — subtle filled bar matching the rest of the
   live-game sidebar. Soft amber tint, no border, pulsing dot, X aligned right. */
.po-draw-pending {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(212, 164, 75, 0.08);
    color: var(--lumi-text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.po-draw-pending[hidden] { display: none; }
.po-draw-pending__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--lumi-accent);
    flex-shrink: 0;
    animation: po-pulse 1.4s ease-in-out infinite;
}
.po-draw-pending__cancel {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--lumi-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}
.po-draw-pending__cancel:hover { color: var(--lumi-text-primary); }

/* Flash states — opp declined or accepted our offer. Both reuse the same
   pill in place; hide the pulsing dot + cancel ✕ (no longer relevant) and
   tint the bg. After ~2.5s the JS auto-hides the pill and restores the
   original text. */
.po-pending--declined,
.po-pending--accepted {
    color: var(--lumi-text-primary) !important;
}
.po-pending--declined { background: rgba(207, 49, 32, 0.10) !important; }
.po-pending--accepted { background: rgba(93, 182, 125, 0.12) !important; }
.po-pending--declined .po-draw-pending__dot,
.po-pending--accepted .po-draw-pending__dot,
.po-pending--declined .po-takeback-pending__dot,
.po-pending--accepted .po-takeback-pending__dot,
.po-pending--declined .po-draw-pending__cancel,
.po-pending--accepted .po-draw-pending__cancel,
.po-pending--declined .po-takeback-pending__cancel,
.po-pending--accepted .po-takeback-pending__cancel {
    display: none !important;
}
.po-pending--declined::before,
.po-pending--accepted::before {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0;
    margin-right: 2px;
}
.po-pending--declined::before {
    content: "✕";
    background: rgba(207, 49, 32, 0.18);
    color: #cf3120;
}
.po-pending--accepted::before {
    content: "✓";
    background: rgba(93, 182, 125, 0.18);
    color: #5DB67D;
}

/* Shared inbound Accept / Decline buttons (used in both the draw banner
   and the takeback banner — same shape, same colors). */
.po-incoming__accept,
.po-incoming__decline {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.po-incoming__accept {
    background: rgba(93, 182, 125, 0.18);
    border-color: rgba(93, 182, 125, 0.55);
    color: #C9F1D5;
}
.po-incoming__accept:hover {
    background: rgba(93, 182, 125, 0.26);
    border-color: rgba(93, 182, 125, 0.7);
}
.po-incoming__decline { color: var(--lumi-text-secondary); }
.po-incoming__decline:hover {
    background: rgba(255, 100, 100, 0.12);
    border-color: rgba(255, 100, 100, 0.32);
    color: var(--lumi-text-primary);
}
@keyframes po-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Move navigation arrows */
.po-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 6px;
    background: var(--lumi-bg-body);
    border: 1px solid var(--lumi-border);
    border-radius: 8px;
}
.po-nav__btn {
    display: grid;
    place-items: center;
    padding: 8px 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--lumi-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.po-nav__btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.05);
    color: var(--lumi-text-primary);
}
.po-nav__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Move list — clickable cells + current highlight */
.po-move-clickable {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.12s;
}
.po-move-clickable:hover {
    background: rgba(255,255,255,0.06);
    color: var(--lumi-text-primary);
}
.po-move-cell.current {
    background: rgba(212, 164, 75, 0.18);
    color: var(--lumi-accent);
    font-weight: 700;
}

/* Draw button active state (when offer pending) */
.game-control-btn.active {
    background: rgba(212, 164, 75, 0.15);
    border-color: rgba(212, 164, 75, 0.4);
    color: var(--lumi-accent);
}

/* ===================================================
   PLAY ONLINE — game-report-style move list + nav
   =================================================== */

/* Move list container — matches game-report's .moves-container */
.game-sidebar .game-moves,
.po-live-sidebar .game-moves {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    background: var(--sidebar-inner-base, #14130f);
    border: 1px solid var(--lumi-border);
    border-radius: 8px;
    font-family: "Roboto", sans-serif;
    line-height: 1.5;
}
.game-sidebar .game-moves::-webkit-scrollbar,
.po-live-sidebar .game-moves::-webkit-scrollbar { width: 8px; }
.game-sidebar .game-moves::-webkit-scrollbar-track,
.po-live-sidebar .game-moves::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}
.game-sidebar .game-moves::-webkit-scrollbar-thumb,
.po-live-sidebar .game-moves::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    border: 2px solid rgba(0,0,0,0.2);
}

/* Move rows — exact match for game-report's .turn (height 44px, etc.) */
.po-move-row {
    display: grid;
    grid-template-columns: 38px 1fr 1fr;
    gap: 0;
    align-items: center;
    height: 44px;
    padding: 0 8px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    background: transparent;
    border-radius: 0;
}
.po-move-row:hover { background-color: rgba(255,255,255,0.03); }

.po-move-num {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Move cells — match .move font + color, .current-container highlight. */
.po-move-cell {
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
    transition: background 0.12s;
}
.po-move-clickable          { cursor: pointer; }
.po-move-clickable:hover    {
    background-color: rgba(255,255,255,0.06);
}
.po-move-cell.current {
    background-color: rgba(255,255,255,0.08);
    color: #fff;
    font-weight: 600;
}
.po-move-cell.current:hover {
    background-color: rgba(255,255,255,0.1);
}

/* ───── 3D button system (live-game only) ──────
   Both Draw/Resign and the move-nav share the same elevation recipe:

     • Linear gradient bg (top brighter, bottom darker)  → simulates a curved
       surface lit from above
     • Top border highlight + bottom hairline drop      → sits on the surface
     • Inset top white highlight                         → glassy top edge
     • Outer drop shadow                                 → casts onto sidebar
     • :hover  → lifts (translateY -1px), shadow grows
     • :active → pressed (translateY 1px), shadow inverts inward

   Tokens reused for both clusters so they read as one family. */

/* Move navigation — four small 3D buttons. The bottom padding lifts the
   whole controls+nav cluster off the sidebar floor (was 14px, now 28px). */
.po-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 14px 28px;
    background: transparent;
    border: none;
}
.po-nav__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: linear-gradient(180deg, #2d2a26 0%, #221f1c 100%);
    color: var(--lumi-text-muted);
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 0 rgba(0, 0, 0, 0.45),
        0 2px 4px rgba(0, 0, 0, 0.32);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.08s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    font-family: inherit;
}
.po-nav__btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #36322d 0%, #28251f 100%);
    border-color: rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 255, 255, 0.28);
    color: var(--lumi-text-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 2px 0 rgba(0, 0, 0, 0.45),
        0 4px 8px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}
.po-nav__btn:active:not(:disabled) {
    background: linear-gradient(180deg, #221f1c 0%, #2a2725 100%);
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.45),
        0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(1px);
}
.po-nav__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 0 rgba(0, 0, 0, 0.30);
}
.po-nav__btn svg {
    width: 16px;
    height: 16px;
    display: block;
    color: currentColor;
}
/* Live segment — green tinted gradient + emerald glow on hover. */
#nav-last { color: #6cc093; }
#nav-last:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(74, 158, 109, 0.28) 0%, rgba(74, 158, 109, 0.10) 100%);
    border-color: rgba(74, 158, 109, 0.45);
    border-top-color: rgba(108, 192, 147, 0.55);
    color: #8fd5af;
    box-shadow:
        inset 0 1px 0 rgba(180, 235, 200, 0.18),
        0 2px 0 rgba(0, 0, 0, 0.45),
        0 4px 12px rgba(74, 158, 109, 0.30);
}
.po-nav__live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(74, 158, 109, 0.55);
    animation: poLivePulse 2.4s ease-out infinite;
}
#nav-last:disabled .po-nav__live-dot { animation: none; opacity: 0.7; }

/* ───── Live controls — Draw / Resign as colored 3D pills ──────
   Each button has its own color identity at rest (amber for draw, soft red
   for resign), and deepens on hover. Same elevation recipe as the move-nav
   so they read as one family, but the rounded corners are bumped a hair
   and the rest-state palette gives them personality. */
.po-live-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
    border-top: none;
}
/* Buttons row — Draw / Resign side by side. */
.po-live-controls__row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Draw-pending banner sits ABOVE the buttons row, full-width and centered. */
.po-live-controls .po-draw-pending {
    width: 100%;          /* full-width bar so the X can align to the right edge */
    box-sizing: border-box;
}
/* All live-game action buttons follow the Play Game (.po-cta) recipe:
   single brand color (amber), 4px solid bottom edge in a darker amber,
   soft drop shadow, lift on hover, press on active.

   Two intensities only:
     • Ghost amber (default) — in-game secondary: Offer Draw, Resign, Abort.
       Calm at rest, won't compete with the board for attention.
     • Solid amber (post-game CTAs) — Game Report, New game. Same recipe
       as the Play Now button so the post-game CTA reads as one of "ours". */

.po-live-controls .game-control-btn {
    flex: 1;
    height: 44px;
    padding: 0 16px;
    gap: 8px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.12s, background 0.12s, filter 0.12s;

    /* Default: ghost-amber. */
    background: rgba(212, 164, 75, 0.12);
    color: var(--lumi-accent);
    box-shadow: 0 3px 0 rgba(165, 124, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.22);
}
.po-live-controls .game-control-btn:hover:not(:disabled) {
    background: rgba(212, 164, 75, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(165, 124, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.28);
}
.po-live-controls .game-control-btn:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 0 0 rgba(165, 124, 0, 0.45);
}
.po-live-controls .game-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.po-live-controls .game-control-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* The chess "½" glyph — instantly recognizable as draw. */
.po-draw-glyph {
    display: inline-block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: stacked-fractions;
    color: currentColor;
}

/* Post-game primary CTA — Game Report. Lumichess is an improvement-first
   product, so reviewing the game is the natural next step. New 10+0 stays
   in the ghost-amber default (secondary), creating clear visual hierarchy. */
.po-live-controls #btn-review-inline {
    background: var(--lumi-amber, #FFBF00);
    color: #1a1a17;
    box-shadow: 0 4px 0 rgba(165, 124, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.22);
}
.po-live-controls #btn-review-inline:hover:not(:disabled) {
    background: var(--lumi-amber, #FFBF00);
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 rgba(165, 124, 0, 0.60), 0 8px 18px rgba(0, 0, 0, 0.28);
}
.po-live-controls #btn-review-inline:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(165, 124, 0, 0.55);
}

/* Draw-pending banner — amber dashed pill (already in family, no change needed). */

/* Opening name header above the move list. Compact, single-line. */
.po-opening-bar {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--sidebar-inner-base, #14130f);
    border: 1px solid var(--lumi-border);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.3;
}
.po-opening-bar__name {
    display: inline;
    flex: 1;
    min-width: 0;
    color: var(--lumi-text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure [hidden] always wins inside .game-sidebar (some siblings get
   display: block from other rules). */
.game-sidebar [hidden],
.po-live-sidebar [hidden] { display: none !important; }

/* Opponent-gone banner */
.po-opp-gone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(207, 110, 110, 0.10);
    border: 1px solid rgba(207, 110, 110, 0.35);
}
.po-opp-gone[hidden] { display: none !important; }
.po-opp-gone__row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lumi-text-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.po-opp-gone__icon {
    color: #CF6E6E;
    display: inline-flex;
    flex-shrink: 0;
}
#po-opp-gone-countdown {
    display: block;
    font-weight: 500;
    color: var(--lumi-text-secondary);
    font-variant-numeric: tabular-nums;
}
.po-opp-gone__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.po-opp-gone__btn {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--lumi-text-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s;
}
.po-opp-gone__btn:hover:not(:disabled) { filter: brightness(1.1); }
.po-opp-gone__btn:active:not(:disabled) { transform: translateY(1px); }
.po-opp-gone__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.po-opp-gone__btn--claim {
    background: #CF6E6E;
    color: #1a1a17;
    border-color: transparent;
}
.po-opp-gone__btn--claim:hover:not(:disabled) {
    filter: brightness(1.08);
}

/* ===================================================
   Live game — result overlay (Review / Rematch / New game)
   =================================================== */
.po-result {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 13, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: po-overlay-in 0.2s ease-out;
}
.po-result[hidden] { display: none !important; }

.po-result__card {
    position: relative;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 14px;
    padding: 32px 36px 24px;
    min-width: 360px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.po-result__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--lumi-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.po-result__close:hover {
    background: rgba(255,255,255,0.08);
    color: var(--lumi-text-primary);
}
.po-result__title {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    letter-spacing: -0.01em;
}
.po-result__sub {
    margin: 0 0 14px 0;
    font-size: 15px;
    color: var(--lumi-text-secondary);
}
/* Rating change pill — rated games only.
   [hidden] override needed because `display: inline-flex` here trumps the
   user-agent stylesheet's `[hidden] { display: none }`, leaving the empty
   pill visible. Without this, casual games render an empty bar above the
   action buttons. */
.po-result__rating[hidden] { display: none !important; }
.po-result__rating {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 auto 18px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    animation: po-rating-pop 380ms cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
}
.po-result__rating-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    letter-spacing: -0.005em;
}
.po-result__rating-delta {
    font-size: 14px;
    font-weight: 600;
}
.po-result__rating-delta--win  { color: #81B64C; }
.po-result__rating-delta--loss { color: #cf3120; }
.po-result__rating-delta--draw { color: var(--lumi-text-secondary); }
@keyframes po-rating-pop {
    0%   { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .po-result__rating { animation: none; }
}
.po-result__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.po-result__actions .po-cta {
    text-decoration: none;   /* anchors as buttons */
}
/* Second row inside the result card — Rematch + New TC split 50/50. */
.po-result__row {
    display: flex;
    gap: 8px;
}
.po-result__row .po-cta {
    flex: 1;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: inherit;
}
/* Rematch pending state — disabled-looking pill while waiting for opp. */
#result-rematch.is-pending {
    pointer-events: none;
    opacity: 0.7;
    border-style: dashed;
    border-color: rgba(212, 164, 75, 0.45);
    color: var(--lumi-accent);
}

/* Incoming rematch banner — fires when opp clicks Rematch on their side.
   Sits inside the game-result card above the standard action row, with a
   short "Opponent wants a rematch" line + Accept/Decline buttons. */
.po-result__rematch-in {
    margin: 0 0 14px 0;
    padding: 14px 14px 12px;
    background: rgba(212, 164, 75, 0.08);
    border: 1px solid rgba(212, 164, 75, 0.35);
    border-radius: 10px;
    animation: po-rematch-in-pop 420ms cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
}
.po-result__rematch-msg {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    text-align: center;
}
#result-rematch-in-opp {
    color: var(--lumi-accent, #D4A44B);
}
.po-result__rematch-in .po-result__row .po-cta {
    min-height: 40px;
    font-size: 14px;
}
/* Accept (green primary) — same hue as the inbound-draw Accept. */
.po-cta--accept {
    background: #81B64C;
    border-color: #81B64C;
    color: #1a1a17;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
}
.po-cta--accept:hover {
    background: #93C95B;
    border-color: #93C95B;
}
.po-cta--accept:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
@keyframes po-rematch-in-pop {
    0%   { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .po-result__rematch-in { animation: none; }
}

/* ===================================================
   PLAY ONLINE — live game sidebar header + settings menu + confirm popover
   =================================================== */

.po-live-header {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--lumi-border);
    flex-shrink: 0;
}
.po-live-header__back,
.po-live-header__settings {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--lumi-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.po-live-header__back:hover,
.po-live-header__settings:hover {
    background: rgba(255,255,255,0.06);
    color: var(--lumi-text-primary);
}
.po-live-header__title {
    margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--lumi-text-primary);
    letter-spacing: -0.005em;
}

/* Settings menu — anchored under the gear icon */
.po-live-menu {
    position: absolute;
    top: 50px;
    right: 12px;
    z-index: 50;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
}
.po-live-menu[hidden] { display: none !important; }
.po-live-menu__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--lumi-text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.12s;
}
.po-live-menu__item:hover { background: rgba(255,255,255,0.06); }

/* Make .po-live-sidebar a positioning context for the menu */
.po-live-sidebar { position: relative; }

/* Confirm popover (anchored over the controls row) */
.po-live-controls { position: relative; }
.po-confirm {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 280px;
    background: var(--lumi-bg-card);
    border: 1px solid var(--lumi-border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    animation: po-overlay-in 0.15s ease-out;
}
.po-confirm[hidden] { display: none !important; }
.po-confirm__title {
    font-size: 14px;
    font-weight: 700;
    color: #CF6E6E;     /* red — destructive flavor */
    margin-bottom: 4px;
}
.po-confirm__sub {
    font-size: 12px;
    color: var(--lumi-text-secondary);
    line-height: 1.4;
    margin-bottom: 12px;
}
.po-confirm__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.po-confirm__btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--lumi-border);
    background: var(--lumi-bg-body);
    color: var(--lumi-text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s;
}
.po-confirm__btn--cancel:hover { background: rgba(255,255,255,0.05); }
.po-confirm__btn--ok {
    background: var(--lumi-amber, #FFBF00);
    color: #1a1a17;
    border-color: transparent;
}
.po-confirm__btn--ok.po-confirm__btn--danger {
    background: #CF6E6E;
    color: #fff;
}
.po-confirm__btn--ok:hover { filter: brightness(1.08); }
.po-confirm__btn:active { transform: translateY(1px); }

/* Seek-error card content */
.po-error__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(207, 110, 110, 0.12);
    color: #CF6E6E;
    margin-bottom: 6px;
}
.po-error__body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--lumi-text-secondary);
    max-width: 320px;
    text-align: center;
}
.po-error__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lumi-accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
}
.po-error__link:hover { text-decoration: underline; }

/* Override the global #chessboard rule so the board fills its frame in the
   live-game layout (style.css:596 sets width:calc(100vh-100px) which forces
   800px on a 900vh viewport — too big for our 680px frame). */
.game-board-frame #chessboard {
    width: 100%;
    height: 100%;
    max-width: none;
}

/* Active games card — appears above New Game when user has in-progress games */
.po-active-games {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}
.po-active-games[hidden] { display: none !important; }

/* Inbound challenges — same visual rhythm as the active-games card so the
   stack reads as one cohesive "things waiting on you" list. Amber tint on
   the border to differentiate "challenger waiting" from "ongoing game". */
.po-incoming {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.po-incoming[hidden] { display: none !important; }
.po-incoming__card {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(212, 164, 75, 0.4);
    border-radius: 10px;
    background: rgba(212, 164, 75, 0.06);
    color: var(--lumi-text-primary);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
    animation: po-incoming-pop 380ms cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
}
.po-incoming__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E0B35A, #A67B2B);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a17;
}
.po-incoming__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.po-incoming__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.po-incoming__meta {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11px;
    color: var(--lumi-text-muted);
}
.po-incoming__sep { opacity: 0.5; }
.po-incoming__actions {
    display: inline-flex;
    gap: 6px;
}
.po-incoming__actions .po-cta {
    min-height: 32px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.po-incoming__actions .po-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
@keyframes po-incoming-pop {
    0%   { opacity: 0; transform: translateY(-4px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .po-incoming__card { animation: none; }
}
@media (max-width: 480px) {
    .po-incoming__card {
        grid-template-columns: 32px 1fr;
        grid-template-rows: auto auto;
        row-gap: 8px;
    }
    .po-incoming__actions {
        grid-column: 1 / -1;
    }
    .po-incoming__actions .po-cta {
        flex: 1;
        min-height: 36px;
    }
}

.po-active-game {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--lumi-border);
    border-radius: 10px;
    background: var(--lumi-bg-card);
    color: var(--lumi-text-primary);
    text-decoration: none;
    transition: all 0.15s, transform 0.08s;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}
.po-active-game:hover {
    border-color: var(--lumi-border-hover);
    background: rgba(255,255,255,0.025);
    transform: translateY(-1px);
}
.po-active-game--your-turn {
    border-color: rgba(212, 164, 75, 0.4);
}

.po-active-game__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--lumi-text-secondary);
}
.po-active-game__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.po-active-game__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.po-active-game__meta {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11px;
    color: var(--lumi-text-muted);
}
.po-active-game__sep { opacity: 0.5; }
.po-active-game--your-turn .po-active-game__turn {
    color: var(--lumi-accent);
    font-weight: 600;
}
.po-active-game__time { font-variant-numeric: tabular-nums; }
.po-active-game__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lumi-accent);
}

/* Game-start reveal — fires once when the first gameFull frame arrives
   for a brand-new game (no moves played, status === 'started'). */
@keyframes po-board-reveal {
    0%   { opacity: 0; transform: scale(0.94); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes po-nameplate-flash {
    0%   { box-shadow: 0 0 0 0 rgba(255, 191, 0, 0); }
    35%  { box-shadow: 0 0 0 6px rgba(255, 191, 0, 0.45); }
    100% { box-shadow: 0 0 0 12px rgba(255, 191, 0, 0); }
}
.po-board-reveal {
    animation: po-board-reveal 520ms cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
    transform-origin: center center;
}
.po-nameplate-flash {
    animation: po-nameplate-flash 720ms ease-out 80ms both;
    border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
    .po-board-reveal, .po-nameplate-flash { animation: none; }
}