/* puzzle/styles.css — Puzzle Play Page
   Base layout, typography, buttons, chess board, popups, move-history panel,
   and side panel all come from ../styles.css (chess shared CSS).
   This file adds only puzzle-specific additions. */

/* ── Stage header right side ─────────────────────────────────────────── */
.puzzle-stats-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.puzzle-stage-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* ── Status bar above board ──────────────────────────────────────────── */
.puzzle-play-message {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--muted);
    background: rgba(255,255,255,.04);
    font-size: .9rem;
}

.puzzle-play-message.is-success {
    border-color: rgba(45, 212, 191, .5);
    color: var(--accent-2);
}

.puzzle-play-message.is-error {
    border-color: rgba(248, 113, 113, .4);
    color: #fca5a5;
}

/* ── Info cards inside controls panel ────────────────────────────────── */
.puzzle-menu-info {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.puzzle-menu-info > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
}

.puzzle-menu-info > div > strong { font-size: .88rem; }
.puzzle-menu-info > div > span   { color: var(--muted); font-size: .82rem; }

/* ── Chess board — hidden state guard ───────────────────────────────── */
#chess-board[hidden]    { display: none !important; }

/* The puzzle renders chess squares as <button> elements; reset native
   button appearance so .light / .dark background colors from
   ../chess/styles.css render correctly (game uses <div> squares).      */
button.square,
button.connect4-cell {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ── Connect 4 board — exact game styles from connect4/styles.css ────── */
#connect4-board[hidden] { display: none !important; }

.connect4-board {
    position: relative;
    width: 100%;
    aspect-ratio: 7 / 6;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(180deg, #2167ff 0%, #0e42b5 100%);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px rgba(0,0,0,.3);
    overflow: hidden;
}

.connect4-board::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
}

.connect4-cell {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(3,17,57,.94) 0%,
        rgba(2,14,48,.97) 65%,
        rgba(1,8,24,1) 100%);
    box-shadow: inset 0 8px 18px rgba(0,0,0,.35), inset 0 -4px 12px rgba(255,255,255,.06);
    overflow: hidden;
    cursor: pointer;
}

.connect4-piece {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    transform: translateY(-130%);
    opacity: 0;
}

.connect4-piece.is-settled {
    opacity: 1;
    transform: translateY(0);
}

.connect4-piece.is-red {
    background: radial-gradient(circle at 32% 28%, #ffb3ad 0%, #ff655a 28%, #e62e24 60%, #8d0808 100%);
}

.connect4-piece.is-yellow {
    background: radial-gradient(circle at 32% 28%, #fff7a3 0%, #ffe367 28%, #ffb703 60%, #b36a00 100%);
}

/* ── Move feed entries ───────────────────────────────────────────────── */
/* Entries render as .move-history-note (style from ../styles.css).      */
/* This rule just ensures the scrollable body keeps a sane max-height.   */
.move-history-body { max-height: 520px; overflow-y: auto; }

/* ── Result popup — share button ─────────────────────────────────────── */
.result-share-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: .8rem;
    padding: 4px 10px;
}

/* Allow the actions row to wrap on small screens */
.result-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ── Result stats section ────────────────────────────────────────────── */
.result-stats-section {
    width: 100%;
    margin: 8px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-user-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
}

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

.result-user-stat strong {
    font-size: 1.35rem;
    color: var(--accent-2);
}

.result-user-stat span {
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.result-dist-label {
    font-size: .75rem;
    color: var(--muted);
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.result-dist-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dist-bar-row {
    display: grid;
    grid-template-columns: 52px 1fr 36px;
    align-items: center;
    gap: 6px;
}

.dist-bar-label {
    font-size: .75rem;
    color: var(--muted);
    text-align: right;
}

.dist-bar-track {
    height: 14px;
    background: rgba(255,255,255,.07);
    border-radius: 4px;
    overflow: hidden;
}

.dist-bar-fill {
    height: 100%;
    background: rgba(255,255,255,.22);
    border-radius: 4px;
    min-width: 2px;
    transition: width .35s ease;
}

.dist-bar-pct {
    font-size: .72rem;
    color: var(--muted);
}

/* Highlight the row matching the current player's result */
.dist-bar-row.is-user-result .dist-bar-label,
.dist-bar-row.is-user-result .dist-bar-pct {
    color: var(--accent-2);
    font-weight: 700;
}

.dist-bar-row.is-user-result .dist-bar-fill {
    background: var(--accent-2);
}

/* ── Result popup — quick nav box (label on top-left border) ─────────── */
.result-nav-box {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 18px 14px 12px;
    margin: 10px 0 4px;
}

.result-nav-label {
    position: absolute;
    top: -9px;
    left: 12px;
    background: var(--panel);
    padding: 0 6px;
    font-size: .7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}

.result-nav-strip {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.result-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    font-size: .8rem;
    color: var(--muted);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.result-nav-item:hover {
    border-color: var(--accent-2);
    color: var(--accent-2);
}

/* ── Daily gate overlay ──────────────────────────────────────────────── */
.daily-gate {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}

.daily-gate[hidden] { display: none !important; }

.daily-gate-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 32px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.daily-gate-card p {
    margin: 0;
    font-size: 1rem;
    color: var(--fg);
}

.daily-gate-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Status row ───────────────────────────────────────────────────── */
.puzzle-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.puzzle-status-row > strong { flex-shrink: 0; }
.puzzle-status-row > span   { flex: 1; }

/* ── Share button — pinned to top-right corner of the controls card ── */
/* Mirrors the result popup's share button position                     */
.puzzle-workspace .controls-shell {
    position: relative;
}

.status-share-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(63,198,202,.35);
    background: rgba(63,198,202,.08);
    color: var(--accent-2);
    cursor: pointer;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .15s, border-color .15s;
    z-index: 1;
}

.status-share-btn:hover {
    background: rgba(63,198,202,.18);
    border-color: rgba(63,198,202,.6);
}

.status-share-btn svg {
    width: 13px;
    height: 13px;
    pointer-events: none;
}

.status-share-btn span {
    pointer-events: none;
}

/* ── Share icon in result popup share button ──────────────────────── */
.result-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.result-share-btn .share-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Reset + More puzzles side-by-side row ───────────────────────── */
.puzzle-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.puzzle-action-btn {
    font-size: .8rem;
    padding: 6px 14px;
}

.puzzle-more-link {
    color: var(--accent-2);
    border-color: rgba(63,198,202,.35);
}

/* ── Puzzle: last-move highlighting (matches chess game .moved style) ── */
button.square.last-move-from::before,
button.square.last-move-to::before {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 12px;
    box-shadow: inset 0 0 0 4px rgba(45, 212, 191, 0.45);
    pointer-events: none;
}

.connect4-cell.last-move-col {
    box-shadow: inset 0 8px 18px rgba(0,0,0,.35),
                inset 0 -4px 12px rgba(255,255,255,.06),
                0 0 0 2px rgba(45, 212, 191, 0.45);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .puzzle-stats-strip   { justify-content: flex-start; }
    .puzzle-stage-actions { align-items: flex-start; }
}