/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ---------- Page shell ---------- */

.main-layout[b-o3sbr5c7t5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Header anchors at the top on every route — no vertical centering of
       the (header, main, footer) group, so the header Y position stays
       identical between game and static pages. */
    justify-content: flex-start;
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Segoe UI', sans-serif;
}

/* ---------- Header (logo / title / copyright stacked, centered) ---------- */

/*
 * Header sizes scale with the viewport (vw / vmin units), NOT with the board.
 * The board's size is computed from the measured header height, so making the
 * header depend on the board would create a feedback loop where toggling the
 * panel could trigger small board-size oscillations.
 */

header[b-o3sbr5c7t5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Top padding gives the logo breathing room from the viewport edge,
       matching the optical "lift" the centered min-height:100vh layout
       used to provide. */
    padding: 3rem 1.5rem 1.5rem;
}

    header .brand[b-o3sbr5c7t5] {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: inherit;
    }

    header .logo[b-o3sbr5c7t5] {
        width: clamp(72px, 10vmin, 160px);
        height: clamp(72px, 10vmin, 160px);
        filter: var(--logo-filter);
    }

    header h1[b-o3sbr5c7t5] {
        margin: 0.6rem 0 0;
        font-size: clamp(2.6rem, 4vmin, 5.4rem);
        line-height: 1;
        color: var(--brand-color);
        letter-spacing: 0.04em;
        text-shadow: var(--brand-shadow);
    }

        header h1:focus[b-o3sbr5c7t5] {
            outline: none;
        }

    header[b-o3sbr5c7t5]  .copyright {
        margin: 0.2rem 0 0;
        font-size: clamp(0.9rem, 1vmin, 1.2rem);
        color: var(--text-muted);
    }

/* ---------- Main (game area host) ---------- */

main[b-o3sbr5c7t5] {
    display: flex;
    justify-content: center;
    /* No bottom padding — footer's top padding is the gap between board and
       slogan, and that should match slogan→links. */
    padding: 1.5rem 0.5rem 0;
    /* Stretch to viewport width so clip-overflow's anchor-right (justify-end)
       anchors against the viewport edge, not main's content-shrunk box. */
    align-self: stretch;
    box-sizing: border-box;
}

/* ---------- Footer ---------- */

footer[b-o3sbr5c7t5] {
    padding: 2rem 0.5rem 1rem;
    text-align: center;
    font-size: 0.9rem;
}

    footer .slogan[b-o3sbr5c7t5] {
        margin: 0 0 0.2rem;
        color: var(--brand-color);
        font-style: italic;
        font-size: clamp(1.1rem, 2vmin, 2rem);
        text-shadow: var(--brand-shadow);
    }

    /* Link strip — flex so it wraps cleanly on narrow viewports.
       column-gap is 0 so the inline `·` separator spans control the
       inter-link spacing on desktop. row-gap is 0 too so the two phone
       rows sit tight against each other (their line-height already
       provides enough breathing room). */
    footer .footer-links[b-o3sbr5c7t5] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    footer a[b-o3sbr5c7t5] {
        color: var(--text-muted);
        text-decoration: none;
        transition: color 0.2s;
    }

        footer a:hover[b-o3sbr5c7t5] {
            color: var(--accent);
        }

    footer .separator[b-o3sbr5c7t5] {
        margin: 0 0.4rem;
        color: var(--text-disabled);
    }

    /* Inactive on desktop — see the phone media query below for when it
       kicks in to enforce the 3-2 row split. */
    footer .footer-links .row-break[b-o3sbr5c7t5] {
        display: none;
    }

/* Phone — 5 links + 4 dots don't fit on one line at 0.9 rem, so we
   force a 3-2 row split via a zero-height `.row-break` flex item
   between Privacy and Contact. The dot separators stay visible on
   both rows, except the one that would sit at the row boundary
   (immediately before `.row-break`) — that one would render as a
   stray trailing `·` at the end of row 1, so it gets hidden. */
@media (max-width: 600px) {
    footer .footer-links .row-break[b-o3sbr5c7t5] {
        display: block;
        flex-basis: 100%;
        height: 0;
    }

        footer .footer-links .separator:has(+ .row-break)[b-o3sbr5c7t5] {
            display: none;
        }
}
/* /Components/MoveHistory.razor.rz.scp.css */
.move-history[b-fqfdcue3oc] {
    display: flex;
    flex-direction: column;
    width: 190px;
    /*
     * Cap the panel at the board's current height so long move lists never
     * push the grid row taller than the board. The inner .move-history-scroll
     * has overflow-y:auto and will scroll once this cap is hit.
     * --board-size is set from JS in _recalculateSize.
     */
    max-height: var(--board-size, 100%);
    background-color: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    color: var(--text-secondary);
    box-shadow: var(--panel-shadow);
    overflow: hidden;
    position: relative;
}

.move-history-header[b-fqfdcue3oc] {
    display: grid;
    grid-template-columns: 32px 1fr 1fr;
    padding: 0.4rem 0.2rem;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--accent);
    border-bottom: 1px solid var(--border-subtle);
    text-transform: uppercase;
    background-color: var(--bg-card);
    user-select: none;
    position: relative;
    z-index: 2;
}

/*
 * Fade overlay sitting just below the header. Rows scrolling up under the
 * header dissolve into the panel background instead of meeting the header
 * with a hard line. Hidden by default; shown only while the panel is scrolled
 * (.scrolled class set from JS on scroll events). pointer-events:none so the
 * rows below remain clickable.
 */
.move-history-header[b-fqfdcue3oc]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
    background: linear-gradient(to bottom, var(--bg-panel) 0%, rgba(var(--bg-base-rgb), 0.7) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.move-history.scrolled .move-history-header[b-fqfdcue3oc]::after {
    opacity: 1;
}

.move-history-header .col-side[b-fqfdcue3oc] {
    text-align: center;
}

.move-history-scroll[b-fqfdcue3oc] {
    overflow-y: auto;
    flex: 1;
    /* Top padding leaves room for the header-fade overlay so it never sits
       on top of the first row. Bottom padding mirrors. */
    padding: 0.875rem 0 0.25rem;
}

.move-history-scroll[b-fqfdcue3oc]::-webkit-scrollbar {
    width: 8px;
}

.move-history-scroll[b-fqfdcue3oc]::-webkit-scrollbar-track {
    background: var(--bg-card);
}

.move-history-scroll[b-fqfdcue3oc]::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 4px;
}

.move-history-scroll[b-fqfdcue3oc]::-webkit-scrollbar-thumb:hover {
    background: var(--text-disabled);
}

.move-row[b-fqfdcue3oc] {
    display: grid;
    grid-template-columns: 32px 1fr 1fr;
    align-items: center;
    padding: 0.05rem 0.2rem;
}

.col-num[b-fqfdcue3oc] {
    text-align: left;
    padding-left: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: 'Consolas', monospace;
    user-select: none;
}

.move-cell.next[b-fqfdcue3oc] {
    color: var(--text-secondary);
    font-weight: bold;
    letter-spacing: 0.15em;
}

.move-cell.next:hover:not(.focused)[b-fqfdcue3oc] {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
}

.thinking-ellipsis[b-fqfdcue3oc] {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7);
    animation: thinking-pulse-b-fqfdcue3oc 1.4s infinite ease-in-out;
}

@keyframes thinking-pulse-b-fqfdcue3oc {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 1; }
}

.move-cell[b-fqfdcue3oc] {
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: background-color 0.12s ease;
    min-height: 1.3rem;
    user-select: none;
    /* Touch: skip 300ms click delay and suppress the blue tap flash */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Neutralize <button> defaults — cells are <button>s for keyboard tab
       and screenreader semantics, but visually look like the surrounding
       panel. */
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: center;
    width: 100%;
}

.move-cell:focus-visible[b-fqfdcue3oc] {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

.move-cell:hover:not(.empty):not(.focused)[b-fqfdcue3oc] {
    background-color: var(--bg-hover);
}

.move-cell.focused[b-fqfdcue3oc] {
    color: var(--text-disabled);
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb), 0.65),
        0 0 8px rgba(var(--accent-rgb), 0.35);
}

/* ---- Neon-only focused-cell behaviour ----
   - Hide the symbol + move text so the focused cell reads as a plain
     glowing box (the "you are here" marker).
   The classic-theme override below restores the legacy "dim the piece"
   look (content visible, just lower opacity). */
:global(.theme-neon) .move-cell.focused:not(.done) .piece-symbol[b-fqfdcue3oc],
:global(.theme-neon) .move-cell.focused:not(.done) .move-text[b-fqfdcue3oc] {
    visibility: hidden;
}

/* ---- Classic-theme focused-cell override ----
   Drop the outer glow, restore the legacy dimmed-piece look. */
:global(.theme-classic) .move-cell.focused[b-fqfdcue3oc] {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.55);
}
:global(.theme-classic) .move-cell.focused .piece-symbol[b-fqfdcue3oc] {
    opacity: 0.5;
}

.move-cell.focused.done[b-fqfdcue3oc] {
    color: var(--text-secondary);
}

.move-cell.focused.done .piece-symbol[b-fqfdcue3oc] {
    opacity: 1;
}

.move-cell.future[b-fqfdcue3oc] {
    color: var(--text-disabled);
}

.move-cell.future .piece-symbol[b-fqfdcue3oc] {
    opacity: 0.5;
}

.move-cell.empty[b-fqfdcue3oc] {
    cursor: default;
}

/*
 * While the AI is thinking, cells must not react to clicks — any navigation
 * would race with the AI's pending MakeMove. Pointer-events:none on the cells
 * only (not the scroll container), so the user can still scroll the list.
 */
.move-history.locked .move-cell[b-fqfdcue3oc] {
    pointer-events: none;
    cursor: default;
}

.piece-symbol[b-fqfdcue3oc] {
    font-size: 1.05rem;
    line-height: 1;
}

.move-text[b-fqfdcue3oc] {
    font-family: 'Consolas', monospace;
    font-size: 0.85rem;
}

/* Footer with the reset link. Mirrors the header's dark band so the
   panel reads as headered top AND bottom. The link itself has no
   border — just muted text that warms to gold on hover. */
.move-history-footer[b-fqfdcue3oc] {
    border-top: 1px solid var(--border-subtle);
    padding: 0.5rem;
    background-color: var(--bg-card);
    text-align: center;
}

.reset-link[b-fqfdcue3oc] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.15rem 0.5rem;
    transition: color 0.15s ease;
}

.reset-link:hover:not(:disabled)[b-fqfdcue3oc] {
    color: var(--accent);
}

.reset-link:focus-visible[b-fqfdcue3oc] {
    outline: none;
    color: var(--accent);
}

.reset-link:disabled[b-fqfdcue3oc] {
    opacity: 0.4;
    cursor: default;
}