:root {
    --bg: #f6f4ef; --fg: #1d1d1f; --muted: #6e6e73; --line: #d8d4cc;
    --panel: #ffffff; --accent: #c0392b; --accent-fg: #ffffff;
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #17171a; --fg: #ececf0; --muted: #9a9aa2; --line: #3a3a40;
        --panel: #222226; --accent: #ff6f5e; --accent-fg: #17171a;
    }
}
* { box-sizing: border-box; }
body {
    margin: 0 auto; max-width: 760px; padding: 16px;
    background: var(--bg); color: var(--fg);
    font: 16px/1.45 system-ui, sans-serif;
}
a { color: var(--accent); }
header {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
    margin-bottom: 16px;
}
h1 { font-size: 1.5em; margin: 0; }
.muted { color: var(--muted); }
button {
    font: inherit; padding: 6px 14px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--line); background: var(--panel); color: var(--fg);
}

.games { display: grid; gap: 12px; padding: 0; list-style: none; }
.games a {
    display: flex; gap: 16px; align-items: center; padding: 12px;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 12px; color: inherit; text-decoration: none;
}
.games a:hover { border-color: var(--accent); }
.games h2 { margin: 0 0 4px; font-size: 1.15em; }
.games p { margin: 0; }
.games svg { flex: none; width: 72px; height: 48px; }

.controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin-bottom: 12px;
}
#moves { font-variant-numeric: tabular-nums; }
#message { min-height: 1.45em; font-weight: 600; color: var(--accent); }

#board {
    position: relative; width: 100%; max-width: 600px;
    user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
}
.piece {
    position: absolute; left: 0; top: 0; transform-origin: 0 0;
    width: calc(100% / var(--cols)); height: calc(100% / var(--rows));
    background-size: calc(var(--cols) * 100%) calc(var(--rows) * 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    transition: border-radius 0.4s, box-shadow 0.4s;
}
#board.solved .piece { box-shadow: none; border-radius: 0; }
.pivot {
    position: absolute; z-index: 3; transform: translate(-50%, -50%);
    display: flex; border: 2px solid #ffffff; border-radius: 999px;
    overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: opacity 0.4s;
}
.pivot button {
    width: clamp(38px, 7vw, 52px); aspect-ratio: 1; padding: 0;
    border: none; border-radius: 0; background: rgba(20, 20, 30, 0.55);
    color: #ffffff; font-size: 1.4em; line-height: 1;
    transition: background 0.15s;
}
.pivot button + button { border-left: 1px solid rgba(255, 255, 255, 0.6); }
.pivot button:hover { background: rgba(20, 20, 30, 0.85); }
.pivot button:focus-visible {
    outline: 3px solid var(--accent); outline-offset: -3px;
}
#board.solved .pivot { opacity: 0; pointer-events: none; }

.target { margin-top: 16px; display: flex; gap: 12px; align-items: center; }
.target img {
    width: 120px; border-radius: 6px; border: 1px solid var(--line);
}