/* AI lab — the 8-puzzle and uninformed search (/lab/8-puzzle, Scripts/lab/lab-puzzle8.js) */

.p8-stage-top {
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.p8-board {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 16px;
    background: linear-gradient(145deg, #1b2c49, #101a2b);
    box-shadow: inset 0 0 0 1px rgba(212, 188, 122, 0.45), inset 0 0 0 6px #142139, inset 0 0 0 7px rgba(212, 188, 122, 0.3), 0 14px 30px rgba(11, 19, 34, 0.25);
    outline: none;
}
.p8-board:focus-visible { box-shadow: 0 0 0 3px #8ab4f8; }

.p8-tile {
    position: absolute;
    top: 9px;
    inset-inline-start: 9px;
    width: calc((100% - 18px) / 3);
    height: calc((100% - 18px) / 3);
    padding: 5px;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    font: 800 clamp(26px, 7vw, 40px) / 1 "Vazirmatn", Tahoma, sans-serif;
    color: #152238;
}
.p8-tile::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: -1;
    border-radius: 12px;
    background: linear-gradient(160deg, #fffdf7, #eadcbc);
    box-shadow: 0 3px 0 #b8a37a, 0 6px 12px rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease;
}
.p8-tile { z-index: 0; isolation: isolate; }
.p8-tile.is-home::before { background: linear-gradient(160deg, #d9efe9, #a7d3c9); box-shadow: 0 3px 0 #2e6e66, 0 6px 12px rgba(0, 0, 0, 0.25); }
.p8-tile:hover::before { filter: brightness(1.04); }
.p8-tile:focus-visible { outline: 3px solid #8ab4f8; outline-offset: -4px; border-radius: 14px; }
.p8-board.is-solved { box-shadow: inset 0 0 0 1px rgba(212, 188, 122, 0.45), inset 0 0 0 6px #142139, inset 0 0 0 7px #2e9e6a, 0 0 0 4px rgba(46, 158, 106, 0.25), 0 14px 30px rgba(11, 19, 34, 0.25); }

.p8-chart-box { min-width: 0; }
.p8-chart { display: block; width: 100%; border-radius: var(--ac-radius-sm, 6px); }
.p8-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; color: var(--ac-muted, #5c6470); font-size: 12px; }
.p8-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 5px; border-radius: 2px; vertical-align: -1px; }
.p8-legend .is-fwd::before { background: #d4bc7a; }
.p8-legend .is-bwd::before { background: #8bb2d6; }

.p8-strip {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
    padding: 4px 2px 10px;
    overflow-x: auto;
    list-style: none;
}
.p8-strip[hidden] { display: none; }
.p8-strip li { flex: none; display: grid; justify-items: center; gap: 3px; }
.p8-strip small { color: var(--ac-muted, #5c6470); font-size: 11px; }
.p8-mini { display: grid; grid-template-columns: repeat(3, 15px); grid-auto-rows: 15px; gap: 2px; padding: 3px; border-radius: 6px; background: #101b2e; }
.p8-mini i { display: grid; place-items: center; border-radius: 3px; background: #1e3354; color: #f7f1e4; font: 700 10px/1 "Vazirmatn", Tahoma, sans-serif; font-style: normal; }
.p8-mini i.is-home { background: #2e6e66; }
.p8-mini i.is-blank { background: transparent; }
.p8-more { align-self: center; color: var(--ac-muted, #5c6470); font-size: 12px; white-space: nowrap; }

/* the depth limit only matters for depth-limited search */
#lab-p8 .p8-limit { opacity: 0.5; }
#lab-p8.is-dls .p8-limit { opacity: 1; }
#lab-p8 .lab-algos { grid-template-columns: 1fr 1fr; }
#lab-p8 .lab-compare small { color: var(--ac-muted, #5c6470); }

@media (max-width: 640px) {
    .p8-stage-top { grid-template-columns: 1fr; }
    .p8-board { max-width: 300px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .p8-tile { transition: none; }
}

.p8-check { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--ac-line, #ddd6c8); border-radius: var(--ac-radius-sm, 6px); background: #fff; font-size: 13px; line-height: 1.7; cursor: pointer; }
.p8-check input { margin-top: 4px; accent-color: var(--ac-navy, #152238); }