/* walls.css  —  Walls game board & UI
   Imports the shared Connect4 sheet (which pulls in styles.css base tokens).
   Board uses an SVG rendered inside a responsive wrapper. */

@import url("../connect4/styles.css");

/* ── Board wrapper ──────────────────────────────────────────────────────── */

.walls-board-wrap {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    user-select: none;
}

#walls-board {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    overflow: visible;
    touch-action: none;
}

/* ── SVG square tiles ───────────────────────────────────────────────────── */

.wsq {
    fill: #d9c9a8;
    rx: 3;
    transition: fill .12s ease;
    cursor: default;
}

.wsq.sq-dark {
    fill: #b09870;
}

/* Goal / landing rows (row 0 and row 8) — uniform amber-brown band */
.wsq.sq-goal {
    fill: #b08840;
}

.wsq.sq-highlight {
    fill: rgba(45, 212, 191, .55);
    cursor: pointer;
}

/* Hover over a legal destination without clicking the pawn first */
.wsq.sq-hover-move {
    fill: rgba(45, 212, 191, .30);
    cursor: pointer;
    transition: fill .08s ease;
}

/* The currently selected pawn square */
.wsq.sq-selected {
    fill: rgba(124, 92, 255, .50);
}

.wsq.sq-last-move {
    fill: rgba(129, 107, 255, .28);
}

/* ── Move-history note variants ─────────────────────────────────────────── */

.move-history-note.is-info {
    background: linear-gradient(135deg, rgba(129, 107, 255, .13), rgba(45, 212, 191, .09));
    border-color: rgba(129, 107, 255, .25);
    color: var(--muted);
    font-style: italic;
    font-weight: 500;
}

/* ── Move-history review cells ───────────────────────────────────────────── */

.move-cell.is-reviewable {
    cursor: pointer;
}

.move-cell.is-reviewable:hover {
    background: rgba(45, 212, 191, .12);
    border-color: rgba(45, 212, 191, .25);
}

.move-cell.is-active {
    background: rgba(45, 212, 191, .22) !important;
    border-color: rgba(45, 212, 191, .55) !important;
    color: #2dd4bf !important;
}

/* ── Walls ──────────────────────────────────────────────────────────────── */

.wwall {
    rx: 4;
    pointer-events: none;
}

/* P1 walls: bright yellow-gold */
.wwall.wall-p1 {
    fill: #f5c518;
    filter: drop-shadow(0 2px 5px rgba(245,197,24,.55));
}

/* P2 walls: vivid coral-red — completely different hue from P1 */
.wwall.wall-p2 {
    fill: #e84040;
    filter: drop-shadow(0 2px 5px rgba(232,64,64,.55));
}

/* ── Wall preview (hover) ───────────────────────────────────────────────── */

.wwall-preview {
    pointer-events: none;
    opacity: .72;
    rx: 4;
    transition: fill .1s ease;
}

.wwall-preview.preview-legal   { fill: #22d3ee; }
.wwall-preview.preview-illegal { fill: #f87171; }

/* ── Wall hit areas (transparent click zones) ───────────────────────────── */

.wwall-hit {
    fill: transparent;
    cursor: crosshair;
    rx: 2;
}

.wwall-hit:hover {
    fill: rgba(255, 255, 255, .10);
}

/* ── Pawns ──────────────────────────────────────────────────────────────── */

.wpawn {
    transition: cx .22s ease, cy .22s ease;
    pointer-events: none;
}

.wpawn-p1 {
    fill: #f1f5f9;
    stroke: #475569;
    stroke-width: 2.5;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.32));
}

.wpawn-p2 {
    fill: #1e293b;
    stroke: #94a3b8;
    stroke-width: 2.5;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.38));
}

.wpawn-glow {
    fill: rgba(45, 212, 191, .35);
    pointer-events: none;
}

/* ── Board outer frame ──────────────────────────────────────────────────── */

.wboard-frame {
    fill: #4a3728;
    rx: 14;
}

.wboard-bg {
    fill: #5c3d25;
    rx: 10;
}

/* ── Turn badge row (between board buttons and P2 strip) ─────────────────── */

.walls-turn-row {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

.walls-turn-badge {
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted, #94a3b8);
    letter-spacing: .03em;
    padding: 4px 14px;
    border-radius: 999px;
    border: 1px solid var(--line, rgba(255,255,255,.10));
    background: rgba(255,255,255,.04);
}

.walls-turn-badge strong {
    display: inline;
    font-size: .85rem;
    color: var(--text, #e2e8f0);
}

/* ── Player strips above / below the board ───────────────────────────────── */

.walls-player-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid var(--line, rgba(255,255,255,.10));
    background: rgba(255,255,255,.04);
}

/* margins managed by the flex-order layout block above */

.walls-strip-name {
    font-weight: 700;
    font-size: .82rem;
    color: var(--text, #e2e8f0);
    white-space: nowrap;
    min-width: 28px;
}

.walls-pip-row {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    flex: 1;
}

.walls-pip {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #e2a42b;
    opacity: .9;
    flex-shrink: 0;
}

.walls-pip.pip-used {
    background: rgba(255,255,255,.12);
    opacity: .5;
}

.walls-strip-count {
    font-size: .74rem;
    color: var(--muted, #94a3b8);
    white-space: nowrap;
}

.walls-strip-count strong {
    color: var(--text, #e2e8f0);
}

/* ── Board column flex layout (enables strip-flip when board flips) ──────── */

.board-column {
    display: flex;
    flex-direction: column;
}

/* Default DOM order: turn row → P2 strip → board → P1 strip+drag tray */
.walls-turn-row    { order: 0; }
.walls-strip-top   { order: 1; margin-bottom: 6px; margin-top: 0; }
.walls-board-wrap  { order: 2; }
.walls-bottom-row  { order: 3; margin-top: 6px; }

/* When P1 is at the visual top (boardFlipped=false): swap P2 strip and P1 strip */
.board-column.is-p1-top .walls-strip-top  { order: 4; margin-top: 6px;    margin-bottom: 0; }
.board-column.is-p1-top .walls-bottom-row { order: 1; margin-top: 0; margin-bottom: 6px; }

/* Both player strips — compact and centered, no player name */
.walls-strip-top,
.walls-bottom-row {
    align-self: center; /* shrink to content width and center in the board column */
}

.walls-strip-top .walls-strip-name,
.walls-bottom-row .walls-strip-name {
    display: none;
}

/* Bottom row: P1 strip + drag tray sit side by side */
.walls-bottom-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.walls-bottom-row .walls-strip-bottom {
    flex: 0 0 auto;
}

.walls-bottom-row .wall-drag-source {
    flex-shrink: 0;
    margin-top: 0;
}

/* In the P1-top orientation, keep only the drag tray beside the visual bottom strip. */
.board-column.is-p1-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

.board-column.is-p1-top .walls-turn-row,
.board-column.is-p1-top .walls-board-wrap,
.board-column.is-p1-top .walls-aivai-panel {
    grid-column: 1 / -1;
}

.board-column.is-p1-top .walls-turn-row {
    grid-row: 1;
}

.board-column.is-p1-top .walls-bottom-row {
    display: contents;
}

.board-column.is-p1-top .walls-bottom-row .walls-strip-bottom {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin-bottom: 6px;
}

.board-column.is-p1-top .walls-board-wrap {
    grid-row: 3;
}

.board-column.is-p1-top .walls-strip-top {
    grid-column: 2;
    grid-row: 4;
    justify-self: end;
}

.board-column.is-p1-top .walls-bottom-row .wall-drag-source {
    grid-column: 3;
    grid-row: 4;
    justify-self: start;
}

.board-column.is-p1-top .walls-aivai-panel {
    grid-row: 5;
}

/* ── Wall drag-source tray — compact single row ──────────────────────────── */

.wall-drag-source {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    margin-top: 0;
    border-radius: 10px;
    border: 1px solid var(--line, rgba(255,255,255,.10));
    background: rgba(255,255,255,.04);
}

.wall-drag-tray-label {
    font-size: .68rem;
    font-weight: 600;
    color: var(--muted, #94a3b8);
    white-space: nowrap;
    flex-shrink: 0;
}

.wall-drag-piece {
    cursor: grab;
    user-select: none;
    touch-action: none;
    border-radius: 4px;
    background: var(--wall-drag-color, #f5c518);
    box-shadow: 0 2px 6px rgba(245,197,24,.40);
    transition: transform .12s, box-shadow .12s;
    flex-shrink: 0;
}

.wall-drag-piece:hover  { transform: scale(1.12); }
.wall-drag-piece:active { cursor: grabbing; }

/* Sized for easy touch targeting on mobile:
   H-wall height doubled (9→18px); V-wall width doubled (9→18px) and height +40% (28→40px) */
.wdp-h { width: 56px; height: 18px; }
.wdp-v { width: 18px; height: 40px; }

/* ── Ghost (wall piece that follows the pointer during drag) ─────────────── */

.wall-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 1200;
    border-radius: 4px;
    background: #22d3ee;
    box-shadow: 0 4px 14px rgba(34,211,238,.55);
    opacity: .88;
    transform: translate(-50%, -50%);
}

/* On touch: lift above the finger so it stays visible */
.wall-drag-ghost[data-is-touch="1"] {
    transform: translate(-50%, calc(-100% - 16px));
}

.wall-drag-ghost.ghost-h { width: 88px; height: 14px; }
.wall-drag-ghost.ghost-v { width: 14px; height: 88px; }

/* Fade ghost when hovering the board (the board shows the SVG preview instead) */
.wall-drag-ghost.is-over-board { opacity: .32; }

/* ── AI vs AI debug panel ────────────────────────────────────────────────── */

.walls-aivai-panel {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(34, 211, 238, .30);
    background: rgba(34, 211, 238, .05);
    align-self: stretch;
}

.aivai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.aivai-badge {
    font-weight: 700;
    font-size: .70rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #22d3ee;
}

.aivai-status {
    font-size: .70rem;
    color: var(--muted, #94a3b8);
    font-family: 'Courier New', monospace;
}

.aivai-status.is-thinking {
    color: #f5c518;
    animation: aivai-blink .75s step-end infinite;
}

@keyframes aivai-blink {
    50% { opacity: .3; }
}

.aivai-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .72rem;
    font-family: 'Courier New', monospace;
}

.aivai-table th {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, .50);
    padding: 2px 6px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.aivai-table td {
    padding: 4px 6px;
    color: var(--text, #e2e8f0);
    white-space: nowrap;
}

.aivai-label { font-weight: 700; }
.aivai-row-p1 .aivai-label { color: #f5c518; }
.aivai-row-p2 .aivai-label { color: #e84040; }

.aivai-score.pos { color: #4ade80; }
.aivai-score.neg { color: #f87171; }

/* ── Legal-footer ────────────────────────────────────────────────────────── */

.legal-footer {
    display: block;
    margin-top: 40px;
    padding: 20px 16px 28px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
    width: 100%;
}

.legal-footer__links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.legal-footer__links a {
    color: var(--muted);
    font-weight: 400;
}

/* ── Result popup overrides for Walls ────────────────────────────────────── */

.popup.result-popup.is-visible {
    display: flex !important;
    animation: result-popup-fade .2s ease-out;
}

.result-popup.is-visible .result-popup-card {
    animation: result-popup-rise .28s ease-out;
}

@keyframes result-popup-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes result-popup-rise {
    from { opacity: .55; transform: translateY(18px) scale(.96); }
    to   { opacity: 1;   transform: translateY(0) scale(1); }
}

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

.mobile-screen-toggle {
    display: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
    body {
        padding-bottom: 176px;
    }



    .play-surface {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .controls-shell,
    .board-column,
    .move-history-panel {
        border-radius: 24px;
    }

    .board-and-info {
        gap: 16px;
    }

    body.mobile-pre-game .board-and-info {
        display: none;
    }

    body.mobile-in-game .controls-shell {
        display: none;
    }

    body.mobile-in-game .stage-header {
        margin-bottom: 10px;
    }

    .walls-pip {
        width: 8px;
        height: 8px;
    }

    .walls-strip-name {
        font-size: .75rem;
        min-width: 22px;
    }

    .mobile-screen-toggle {
        position: fixed;
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
        z-index: 38;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: linear-gradient(135deg, var(--accent), #9d74ff);
        color: #fff;
        box-shadow: 0 14px 28px rgba(124, 92, 255, 0.28);
        font: inherit;
    }
}