/* Link Pegs — local styles.
 * Page chrome (header/footer/typography) inherits from /shared/styles.css.
 * The game board itself is a self-contained SVG; most visual fidelity lives
 * inside the SVG <defs> block (gradients + filters) rendered by game.js.
 * Class prefix `lp-` is used to avoid colliding with shared selectors.
 */

.game-page {
    padding: 1rem 0 2rem;
    --jump-accent: var(--cat-strategy);
    --lp-red: #c8312b;
    --lp-red-light: #ff8a7a;
    --lp-red-dark: #7a1a18;
    --lp-black: #2b2b30;
    --lp-black-light: #6a6a72;
    --lp-board-warm: #f3e2bd;
    --lp-board-mid: #e6cf9d;
    --lp-board-dark: #c9ad75;
    --lp-board-edge-red: rgba(200, 49, 43, 0.10);
    --lp-board-edge-black: rgba(43, 43, 48, 0.10);
}

.game-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0.25rem;
}
.game-head h1 {
    margin: 0;
    font-family: var(--font-hand);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.05;
}
.game-head .category {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--cat-strategy-bg);
    color: var(--cat-strategy);
}
.game-lede {
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    line-height: 1.4;
}

/* Start panel — minimal; the page-redesign agent owns this surface later. */
.start-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem 1.4rem;
    margin: 1rem 0 1.5rem;
}
.start-panel h2 {
    font-family: var(--font-hand);
    margin: 0 0 0.5rem;
    font-size: 1.8rem;
    color: var(--cat-strategy);
}
.lp-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Start-footer multi-CTA layout (mirror only-knights). Shared .start-footer is
   a 2-col grid that puts every .btn-primary into grid-area: cta, which stacks
   #startBtn + mp-ux's injected #playFriendBtn + #playStrangerBtn + #howToBtn
   on top of each other. Flatten to flex-row so all four sit beside each other
   with the hover-hints toggle on its own row below. */
.game-page .start-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 32px 18px;
}
.game-page .start-footer .untimed-row {
    grid-area: auto;
    margin: 0;
    flex-basis: 100%;
    order: 5;
}
.game-page .start-footer .btn-primary,
.game-page .start-footer .btn-ghost,
.game-page .start-footer #startBtn {
    grid-area: auto;
    justify-self: auto;
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 10px 14px;
}
.game-page .start-footer #startBtn         { order: 1; }
.game-page .start-footer #playFriendBtn    { order: 2; }
.game-page .start-footer #playStrangerBtn  { order: 3; }
.game-page .start-footer #howToBtn         { order: 4; }
.game-page .start-footer .btn-beta-badge {
    margin: 0 0.3em 0 0.2em;
    padding: 0.12em 0.45em;
    font-size: 0.65em;
}

/* Override the QM-specific .diff-row ::after subtitles ("1-digit"/"2-digit"/"Mixed")
   from shared/styles.css:1849. LP's panel-note ul covers the descriptions, so the
   inner pill subtitles would just be wrong (they say what QM means by easy/medium/hard,
   not LP). Same opt-out pattern as change-a-tire's .length-row override (S54). */
.game-page .diff-row .circle-pick > span::after { content: none !important; }

/* Side picker — color the SVG icons in each side's identity color so the user
   sees at a glance which two edges they own. SVG strokes use currentColor; we
   set color on the .op-icon span itself. When checked the pill flips to navy
   bg + white text, so flip the icon to white too for legibility. */
.game-page .lp-side-row .circle-pick:nth-of-type(1) .op-icon { color: var(--lp-red); }
.game-page .lp-side-row .circle-pick:nth-of-type(2) .op-icon { color: var(--lp-black); }
.game-page .lp-side-row .circle-pick:has(input:checked) .op-icon { color: #fff; }
[data-theme="dark"] .game-page .lp-side-row .circle-pick:nth-of-type(2) .op-icon {
    color: var(--lp-black-light);
}

/* Game area — frame + column dividers come from shared
 * `.game-page .play-grid` (3-col bordered card). Per-game CSS only
 * defines the CONTENTS of each column. Same shape as only-knights. */
.game-area { margin: 0.5rem 0 1rem; }

/* .history-col / .board-col / .side-col content layout lives in
 * shared/styles.css under "MATCH-SHAPE COLUMNS". LP-specific
 * overrides for the side column toolbar + lp-msg follow below. */

.lp-status {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.5rem;
    font-family: var(--v6-serif, 'Fraunces', Georgia, serif);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--v6-ink, var(--text));
}
/* `display: flex` would otherwise win against the [hidden] attribute. */
.lp-status[hidden] { display: none; }
.lp-turn { font-weight: 600; }
.lp-turn[data-side="red"] { color: var(--lp-red); }
.lp-turn[data-side="black"] { color: var(--lp-black); }
[data-theme="dark"] .lp-turn[data-side="black"] { color: var(--lp-black-light); }

/* Board wrap — sets the responsive cap; the SVG itself fills 100% of it. */
.lp-board-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 0.5rem;
    width: 100%;
}
.lp-board-host {
    /* Sizing container. `100%` so the board fills the available middle
       column; capped by `min(629px, 75vh)` so it never balloons past
       its readable size or the viewport height. */
    width: min(629px, 75vh, 100%);
    aspect-ratio: 1 / 1;
    position: relative;
}
.lp-board-host .lp-labels text {
    fill: var(--text-secondary);
    opacity: 0.7;
}
.lp-board-host svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    /* pinch-zoom lets phone users zoom in to play 24x24; pan handled by
       the browser. Tap-targets are sized by SVG viewBox math, not pixels,
       so they scale proportionally with whatever zoom level the user picks. */
    touch-action: pinch-zoom;
    user-select: none;
}

/* SVG-level interaction states. Pegs and bridges are <g> elements with
   data attributes; CSS controls hover and the legal-target preview. */
.lp-board-host .lp-hole.lp-allowed { cursor: pointer; }
.lp-board-host .lp-hole.lp-allowed:hover .lp-peg-ghost { opacity: 0.55; }
.lp-board-host .lp-peg { cursor: default; }
.lp-board-host .lp-peg.lp-own { cursor: pointer; }
.lp-board-host .lp-peg.lp-last circle.lp-peg-body { filter: url(#lpGlowLast); }
.lp-board-host .lp-bridge-line { transition: stroke-width 90ms ease; }
.lp-board-host .lp-bridge.lp-removable:hover .lp-bridge-line { stroke-width: 6.5; }
.lp-board-host .lp-link-preview {
    pointer-events: none;
    stroke-dasharray: 4 3;
    opacity: 0.7;
}
.lp-board-host .lp-knight-mark {
    pointer-events: none;
    opacity: 0.55;
}
@keyframes lpWinPulse {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(46, 188, 90, 0.55)); }
    50%      { filter: drop-shadow(0 0 8px rgba(46, 188, 90, 0.95)); }
}
.lp-board-host .lp-win .lp-peg-body,
.lp-board-host .lp-win .lp-bridge-line {
    animation: lpWinPulse 1.4s ease-in-out infinite;
}

/* Toolbar — vertical stack inside the right .side-col. Each button is
   a full-width row so it reads as the side rail's primary action list.
   On mobile (single-column play-grid) it falls back to a wrapped row. */
.lp-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
}
.lp-toolbar > button { width: 100%; }
@media (max-width: 980px) {
    .lp-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .lp-toolbar > button { width: auto; }
}
/* lp-toolbar buttons consume shared .game-page .btn-ghost (v6 ink-outline).
   .lp-danger only adjusts the Resign button's color — kept locally since red
   is LP-specific UX cue. */
.lp-toolbar button.lp-danger { color: #b62a23; border-color: #b62a23; }
.lp-toolbar button.lp-danger:hover { background: #b62a23; color: #fff; border-color: #b62a23; }

.lp-msg {
    text-align: center;
    min-height: 1.5em;
    font-family: var(--v6-sans, Inter, sans-serif);
    font-size: 0.92rem;
    color: var(--v6-muted, var(--text-secondary));
    margin: 0.25rem 0 0;
    letter-spacing: 0.01em;
    width: 100%;
}
.lp-msg[data-tone="warn"] { color: var(--v6-pop, #b62a23); }
.lp-msg[data-tone="info"] { color: var(--v6-accent, var(--cat-strategy)); }

/* Result panel — pinned above the board so a match outcome is impossible
   to miss. v6 makeover: white surface + 3px LEFT accent border whose color
   keys to outcome (green win / red loss / muted draw), serif italic
   headline, sans-muted body, sharp corners. Mirrors the only-knights
   match-result card chrome from S55 c44e173. */
.lp-result {
    background: #fff;
    border: none;
    border-left: 3px solid var(--v6-accent, var(--cat-strategy));
    border-radius: 0;
    padding: 14px 18px 16px;
    margin: 0 0 0.75rem;
    text-align: left;
    box-shadow: none;
    animation: lpResultIn 280ms ease-out both;
    width: 100%;
    align-self: stretch;
}
@keyframes lpResultIn {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.lp-result h2 {
    font-family: var(--v6-serif, 'Fraunces', Georgia, serif);
    font-style: italic;
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--v6-ink, var(--text));
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}
.lp-result p {
    margin: 0 0 0.75rem;
    font-family: var(--v6-sans, Inter, sans-serif);
    font-size: 0.95rem;
    color: var(--v6-muted, var(--text-secondary));
}
.lp-result .lp-actions { justify-content: flex-start; }
/* Status accent border: green win / red loss / muted draw. */
.lp-result[data-outcome="win"]  { border-left-color: var(--v6-accent, #207a3a); }
.lp-result[data-outcome="loss"] { border-left-color: var(--v6-pop, #b62a23); }
.lp-result[data-outcome="draw"] { border-left-color: var(--v6-rule, var(--text-secondary)); }
.lp-result h2[data-outcome="win"]  { color: var(--v6-accent, #207a3a); }
.lp-result h2[data-outcome="loss"] { color: var(--v6-pop, #b62a23); }
.lp-result h2[data-outcome="draw"] { color: var(--v6-muted, var(--text-secondary)); }
[data-theme="dark"] .lp-result {
    background: var(--surface);
    color: var(--text);
}
[data-theme="dark"] .lp-result h2  { color: var(--text); }
[data-theme="dark"] .lp-result p   { color: var(--text-secondary); }

/* Move-history list — lives inside .history-col now (left column of
   the play-grid). Single-column flow so each move is its own row in
   the 220px log; scrolls vertically once full. */
.history-col .lp-mh-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    font-size: 0.9rem;
}
.lp-mh-list li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.lp-mh-list li:hover { background: rgba(0,0,0,0.04); }
.lp-mh-num { color: var(--text-secondary); min-width: 1.6em; text-align: right; font-size: 0.82em; }
.lp-mh-side {
    display: inline-block;
    width: 1.2em; height: 1.2em;
    border-radius: 50%;
    text-align: center;
    line-height: 1.2em;
    font-size: 0.75em;
    font-weight: 700;
    color: white;
}
.lp-mh-red { background: #c8312b; }
.lp-mh-black { background: #2b2b30; }
.lp-mh-coord { font-family: var(--font-mono, JetBrains Mono, monospace); font-size: 0.92em; }
.lp-mh-empty, .lp-mh-swap { color: var(--text-secondary); cursor: default; font-style: italic; }
.lp-mh-empty:hover, .lp-mh-swap:hover { background: transparent; }

/* How-to-play migrated to .v6-faq Appendix A — chrome comes from
   shared/styles.css .game-page .v6-faq rules. */

/* Mobile */
@media (max-width: 480px) {
    .lp-status { font-size: 1.1rem; }
    .lp-toolbar button { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
    .game-head h1 { font-size: 2rem; }
}

/* ─── Multiplayer UI ────────────────────────────────────────────────────── */
/* Kept lp-* / mp-* prefixed so nothing leaks into shared/styles.css.       */

.lp-btn-friend, .lp-btn-stranger { margin-left: 0.5rem; }
.lp-btn-beta {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    margin-left: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--accent, #d97706);
    color: #fff;
    border-radius: 0.6rem;
    vertical-align: middle;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* .btn-primary / .btn-ghost chrome lifted to shared/styles.css (S55 0147648). */

.mp-modal {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.mp-modal[hidden] { display: none; }
.mp-modal-card {
    background: var(--bg, #fff);
    color: var(--text, #111);
    border-radius: 0.6rem;
    padding: 1.5rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.mp-modal-card h3 { margin-top: 0; }
.mp-modal-body { margin: 0.6rem 0; line-height: 1.5; }
.mp-modal-fine { font-size: 0.85rem; opacity: 0.75; }
.mp-modal-actions {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 1rem;
}
.mp-invite-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    border: 1px solid var(--border, #ccc);
    border-radius: 0.3rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.95rem;
}
.mp-invite-note { font-size: 0.85rem; opacity: 0.8; margin: 0.5rem 0 0; min-height: 1em; }
.mp-handle-error { color: #b91c1c; font-size: 0.85rem; min-height: 1em; margin: 0.5rem 0; }

.mp-waiting {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--surface, #f7f7f7);
    border-radius: 0.6rem;
    text-align: center;
}
.mp-waiting h2 { margin-top: 0; }
.mp-waiting-sub { opacity: 0.85; line-height: 1.5; }
.mp-waiting-actions {
    display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
    margin-top: 1rem;
}

.lp-mp-room-label {
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.8;
    padding: 0.4rem 0.8rem;
    background: var(--surface, #f0f0f0);
    border-radius: 0.3rem;
    margin: 0.5rem auto;
    max-width: 600px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

body.lp-mp-active #lpUndoBtn,
body.lp-mp-active #lpHintBtn,
body.lp-mp-active #lpHintsToggle,
body.lp-mp-active #lpDownloadBtn { display: none !important; }