/* Layout and look of the chess page. */
:root {
    --light: #ece6ff;
    --dark: #9a8de0;
    --select: #f6e05e;
}
.app { max-width: 1100px; margin: 0 auto; padding: env(safe-area-inset-top) 16px 24px; }
.top { display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1rem; margin: 16px 0 6px; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.stage { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-top: 12px; }
.board-wrap { position: relative; flex: 1 1 320px; max-width: min(100%, 78vh); }
.board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    user-select: none;
}
.board.flipped { transform: rotate(180deg); }
.board.flipped .piece { transform: rotate(180deg); }
.sq {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: auto;
    border: 0;
    border-radius: 0;
    background: var(--light);
    container-type: size;
}
.sq.dark { background: var(--dark); }
.sq.last { box-shadow: inset 0 0 0 100px rgba(246, 224, 94, .38); }
.sq.selected { box-shadow: inset 0 0 0 100px rgba(246, 224, 94, .75); }
.sq.check { box-shadow: inset 0 0 0 100px rgba(214, 51, 108, .6); }
.sq.target::after {
    content: "";
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: rgba(27, 34, 54, .35);
}
.sq.capture::after {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    border: 5px solid rgba(214, 51, 108, .6);
}
.piece { font-size: 80cqmin; line-height: 1; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", serif; }
.piece.w { color: #fff; -webkit-text-stroke: 1.5px #2a2350; }
.piece.b { color: #2a2350; -webkit-text-stroke: 1px #120e2b; }

.side { flex: 1 1 260px; min-width: 240px; background: var(--card); border-radius: 16px; padding: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.status { margin: 0 0 12px; font-weight: 600; min-height: 1.4em; }
.status.alert { color: var(--alert); }
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.settings label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: .85rem; }
.settings select { width: 100%; color: var(--text); font-size: 1rem; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.buttons button { flex: 1 1 auto; }
.moves { max-height: 220px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 2px 8px; font-variant-numeric: tabular-nums; }
.moves .no { color: var(--muted); }
.moves .mv { font-weight: 600; }

.promo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(17, 21, 31, .72);
    color: #fff;
    border-radius: 6px;
}
.promo[hidden] { display: none; }
.promo-row { display: flex; gap: 10px; }
.promo-row .piece { height: auto; width: 64px; padding: 4px 0; font-size: 44px; background: var(--light); border-radius: 10px; }

@media (max-width: 640px) {
    .stage { gap: 12px; }
    .board-wrap { flex-basis: 100%; max-width: 100%; }
}

.foot { display: flex; gap: 16px; justify-content: center; margin-top: 24px; font-size: .85rem; }
.foot a, .legal a { color: var(--accent); }
.legal { max-width: 720px; }
.legal h2 { color: var(--text); margin-top: 20px; }
.legal-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px 8px; }
.home { color: var(--accent); font-weight: 700; text-decoration: none; }