/* ==========================================================================
   2D SOLITAIRE - presentation
   --------------------------------------------------------------------------
   Drafting-instrument chrome over a felt play surface. Self-contained: it
   re-declares the handful of site tokens it needs so embed.html works with
   only this file loaded, but inherits the real ones from styles.css on the
   full page. All card geometry derives from --card-w; change that one value
   and everything scales.
   ========================================================================== */

.sol {
    /* Fallback tokens - the full page overrides these from styles.css. */
    --ink: #111418;
    --paper: #f2efe5;
    --muted: #5d656c;
    --line: rgba(17, 20, 24, 0.16);
    --line-strong: rgba(17, 20, 24, 0.32);
    --signal: #bf5700;
    --raspberry: #872657;
    --blue: #3f6bd6;
    --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    --display: "PP Telegraf", "Helvetica Neue", Arial, sans-serif;

    /* Card geometry - the single source of size truth. */
    --card-w: clamp(74px, 10.5vw, 150px);
    --card-h: calc(var(--card-w) * 1.4);
    --card-radius: calc(var(--card-w) * 0.09);
    --fan-down: calc(var(--card-h) * 0.30);   /* face-up overlap */
    --fan-up: calc(var(--card-h) * 0.14);     /* face-down overlap (tighter) */
    --pile-gap: clamp(6px, 1.1vw, 16px);
    --felt-intensity: 0.5;

    /* Felt colours (light table). */
    --felt-base: #e9e3d1;
    --felt-deep: #ddd4bc;
    --felt-line: rgba(191, 87, 0, 0.10);
    --table-ink: var(--ink);

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0; /* shrink to the viewport as a flex item — no panel overflow */
    color: var(--table-ink);
    font-family: var(--mono);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Dark felt reuses the site's ink-on-paper inversion. */
.sol[data-table="dark"] {
    --felt-base: #1a1d22;
    --felt-deep: #0f1216;
    --felt-line: rgba(191, 87, 0, 0.16);
    --table-ink: var(--paper);
    --line-strong: rgba(242, 239, 229, 0.32);
    --line: rgba(242, 239, 229, 0.16);
}

/* Suit palettes. Brand: ink / blue for the "black" suits, burnt-orange /
   raspberry for the "red" suits. Classic: true black + red. */
.sol[data-suits="brand"] { --suit-0: var(--ink); --suit-1: var(--signal); --suit-2: var(--raspberry); --suit-3: var(--blue); }
.sol[data-suits="classic"] { --suit-0: #16181c; --suit-1: #c2261d; --suit-2: #c2261d; --suit-3: #16181c; }
.sol[data-table="dark"][data-suits="brand"] { --suit-0: var(--paper); }
.sol[data-table="dark"][data-suits="classic"] { --suit-0: #f2efe5; --suit-3: #f2efe5; --suit-1: #ff6a5f; --suit-2: #ff6a5f; }

/* ---- HUD: the instrument bar ---------------------------------------- */

.sol-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    padding: 0.7rem clamp(0.75rem, 2vw, 1.4rem);
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--felt-base) 60%, #fff 40%);
}

.sol[data-table="dark"] .sol-hud { background: color-mix(in srgb, var(--felt-deep) 70%, #000 10%); }

.sol-hud-readouts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.1rem; }

.sol-readout { display: flex; flex-direction: column; line-height: 1.1; }
.sol-readout span { font: 700 0.54rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sol-readout b { font: 700 0.92rem/1.2 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--table-ink); }
.sol-readout.is-title b { color: var(--signal); }
.sol[data-table="dark"] .sol-readout span { color: color-mix(in srgb, var(--table-ink) 62%, transparent); }
.sol-readout[hidden] { display: none; }

.sol-hud-controls { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.sol-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--felt-base) 40%, #fff 60%);
    color: var(--table-ink);
    font: 700 0.64rem/1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.sol[data-table="dark"] .sol-btn { background: color-mix(in srgb, var(--felt-deep) 60%, #000 20%); }
.sol-btn:hover:not(:disabled),
.sol-btn:focus-visible { border-color: var(--signal); color: var(--signal); outline: none; }
.sol-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sol-btn--accent { background: var(--signal); border-color: var(--signal); color: #fff; }
.sol-btn--accent:hover:not(:disabled),
.sol-btn--accent:focus-visible { background: var(--raspberry); border-color: var(--raspberry); color: #fff; }
.sol-btn kbd { font: inherit; opacity: 0.6; font-size: 0.85em; }
.sol-btn[hidden] { display: none; }

/* ---- Board: the felt ------------------------------------------------ */

.sol-board {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: clamp(0.8rem, 2vw, 1.6rem);
    /* Cards are sized to fill the width (see fitCards in ui.js), so the board
       never needs to scroll sideways — only down for tall columns. */
    overflow-x: hidden;
    overflow-y: auto;
    /* Woven felt: two crossed micro-gradients for the weave, a soft radial
       vignette, a faint drafting grid, all over a base fill. Noise sits on a
       ::before overlay so --felt-intensity can fade it independently. */
    background-color: var(--felt-base);
    background-image:
        radial-gradient(120% 100% at 50% -10%, color-mix(in srgb, var(--felt-base) 82%, #fff 18%), transparent 60%),
        repeating-linear-gradient(0deg, transparent 0 calc(var(--card-w) * 0.5), var(--felt-line) calc(var(--card-w) * 0.5) calc(var(--card-w) * 0.5 + 1px)),
        repeating-linear-gradient(90deg, transparent 0 calc(var(--card-w) * 0.5), var(--felt-line) calc(var(--card-w) * 0.5) calc(var(--card-w) * 0.5 + 1px)),
        linear-gradient(0deg, var(--felt-deep), var(--felt-base));
}

/* The cloth grain - tiled fractal noise, opacity driven by the setting. */
.sol-board::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--felt-intensity);
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}
.sol[data-table="dark"] .sol-board::before { mix-blend-mode: overlay; }

.sol-topzone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pile-gap);
    margin-bottom: clamp(0.9rem, 2.5vw, 1.8rem);
    position: relative;
    z-index: 1;
}
.sol-slotgroup { display: flex; gap: var(--pile-gap); }
.sol[data-hand="left"] .sol-topzone { flex-direction: row-reverse; }

.sol-tableau {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--pile-gap);
    position: relative;
    z-index: 1;
    align-items: start;
}

/* ---- Slots (empty pile targets) ------------------------------------- */

.sol-slot,
.sol-col {
    position: relative;
    width: var(--card-w);
    min-height: var(--card-h);
    justify-self: center;
}
.sol-col { width: 100%; display: flex; justify-content: center; }
.sol-col-inner { position: relative; width: var(--card-w); min-height: var(--card-h); }

.sol-slot-base {
    position: absolute;
    inset: 0;
    width: var(--card-w);
    height: var(--card-h);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--card-radius);
    background: color-mix(in srgb, var(--felt-deep) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 0.9rem/1 var(--mono);
    color: color-mix(in srgb, var(--table-ink) 34%, transparent);
}
.sol-slot-base[data-glyph]::after { content: attr(data-glyph); font-size: 1.3rem; }

/* Drop-target highlight while dragging. */
.sol-slot.is-target > .sol-slot-base,
.sol-col.is-target .sol-slot-base,
.sol-col.is-target .card:last-child {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}
.sol-col.is-target .sol-col-inner::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 100%;
    border: 2px solid var(--signal);
    border-radius: var(--card-radius);
    pointer-events: none;
}

/* ---- Cards ---------------------------------------------------------- */

.card {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--card-radius);
    transition: top 220ms var(--sol-ease, cubic-bezier(0.16, 1, 0.3, 1)),
                left 220ms var(--sol-ease, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 140ms ease, box-shadow 140ms ease;
    will-change: top, left, transform;
    cursor: grab;
}
.sol[data-motion="off"] .card { transition: none; }

.card.is-facedown { cursor: default; }
.card.is-static { transition: none; }

.card-inner {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--line-strong);
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 20, 24, 0.18), 0 4px 10px -6px rgba(17, 20, 24, 0.35);
    overflow: hidden;
}
.sol[data-table="dark"] .card-inner { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 14px -6px rgba(0, 0, 0, 0.6); }

.card:hover:not(.is-facedown) { z-index: 500; }
.card.is-selected .card-inner { outline: 2px solid var(--signal); outline-offset: 1px; }
.card.is-hint .card-inner { animation: sol-hint 1.1s ease 3; }
@keyframes sol-hint { 0%, 100% { box-shadow: 0 0 0 0 var(--signal); } 50% { box-shadow: 0 0 0 3px var(--signal); } }

.card.is-dragging { transition: none; z-index: 900; cursor: grabbing; }
.card.is-dragging .card-inner { box-shadow: 0 8px 22px -6px rgba(17, 20, 24, 0.55); }

/* Card face */
.card-face { position: absolute; inset: 0; padding: calc(var(--card-w) * 0.06); color: var(--card-color); }
.card-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.86;
    font: 700 calc(var(--card-w) * 0.24) / 0.86 var(--display);
}
.card-corner.tl { top: calc(var(--card-w) * 0.05); left: calc(var(--card-w) * 0.08); }
.card-corner.br { bottom: calc(var(--card-w) * 0.05); right: calc(var(--card-w) * 0.08); transform: rotate(180deg); }
.card-corner .pip { font-size: calc(var(--card-w) * 0.2); margin-top: 0.05em; }

.card-center {
    position: absolute;
    inset: calc(var(--card-w) * 0.26) calc(var(--card-w) * 0.16);
    display: grid;
    place-items: center;
}
.card-center svg { width: 100%; height: 100%; overflow: visible; }
.card-center svg text, .card-center svg use, .card-center svg path { fill: var(--card-color); }

.card-court {
    font: 800 calc(var(--card-w) * 0.5) / 1 var(--display);
    color: var(--card-color);
}

/* Card back - painted from the pattern vars supplied by backs.js. */
.card-back {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--back-paper, #faf7ef);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 var(--back-grid-size, 9px), var(--back-grid, rgba(191,87,0,0.22)) var(--back-grid-size, 9px) calc(var(--back-grid-size, 9px) + 1px)),
        repeating-linear-gradient(90deg, transparent 0 var(--back-grid-size, 9px), var(--back-grid, rgba(191,87,0,0.22)) var(--back-grid-size, 9px) calc(var(--back-grid-size, 9px) + 1px));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.card-back::before {
    content: "";
    position: absolute;
    inset: calc(var(--card-w) * 0.09);
    border: 1px solid var(--back-border, rgba(191,87,0,0.55));
    border-radius: calc(var(--card-radius) * 0.7);
}
.card-back-mono {
    font: 800 calc(var(--card-w) * 0.26) / 1 var(--display);
    letter-spacing: 0.04em;
    color: var(--back-ink, #bf5700);
    z-index: 1;
}
.card-back-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Slash back - white card with a single diagonal stroke, corner-inset,
   matching the court-card motif. The line is an SVG so it stays crisp at
   any card size; --back-ink recolours it. */
.card-back--slash {
    background-color: var(--back-paper, #fff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cline x1='11' y1='129' x2='89' y2='11' stroke='%23111111' stroke-width='1.1'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.card-back--slash::before { display: none; }

/* Illustrated card faces (the extracted deck art). One <img> per card; the
   programmatic SVG face is kept as the "simple" alternative. */
.card-face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: none; }
.sol[data-faces="illustrated"] .card-face-img { display: block; }
.sol[data-faces="illustrated"] .card-face { display: none !important; }

/* ---- Toast / status ------------------------------------------------- */

.sol-toast {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%) translateY(1rem);
    padding: 0.55rem 1rem;
    border: 1px solid var(--line-strong);
    background: var(--ink);
    color: var(--paper);
    font: 700 0.68rem/1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease, transform 240ms ease;
    z-index: 40;
}
.sol-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

.sol-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Win overlay ---------------------------------------------------- */

.sol-win {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--felt-deep) 70%, transparent);
    backdrop-filter: blur(2px);
}
.sol-win.is-shown { display: flex; }
.sol-win-card {
    text-align: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--felt-base) 30%, #fff 70%);
    max-width: 26rem;
}
.sol[data-table="dark"] .sol-win-card { background: color-mix(in srgb, var(--felt-deep) 60%, #000 20%); }
.sol-win-card p.k { font: 700 0.62rem/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); margin: 0 0 0.5rem; }
.sol-win-card h2 { font: 900 clamp(2.2rem, 6vw, 3.6rem)/0.9 var(--display); letter-spacing: -0.04em; margin: 0 0 0.6rem; color: var(--table-ink); }
.sol-win-card .stat { font: 700 0.8rem/1.5 var(--mono); color: var(--muted); }
.sol[data-table="dark"] .sol-win-card .stat { color: color-mix(in srgb, var(--table-ink) 68%, transparent); }
.sol-win-actions { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }

/* Save-to-leaderboard form on the win card. */
.sol-win-save { margin-top: 1.1rem; }
.sol-win-save > label { display: block; font: 700 0.6rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.sol-win-save-row { display: flex; gap: 0.4rem; justify-content: center; }
.sol-win-save-row input {
    min-height: 2.6rem; padding: 0.5rem 0.7rem; min-width: 0; flex: 1 1 auto; max-width: 14rem;
    border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--felt-base) 30%, #fff 70%);
    color: var(--table-ink); font: 600 0.85rem/1 var(--mono);
}
.sol[data-table="dark"] .sol-win-save-row input { background: color-mix(in srgb, var(--felt-deep) 60%, #000 20%); }
.sol-win-saved { margin-top: 0.9rem; font: 700 0.72rem/1.4 var(--mono); letter-spacing: 0.06em; color: var(--signal); }

/* Leaderboard drawer (reuses the .sol-settings shell). */
.sol-lb-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-strong); padding: 0 1.3rem; background: var(--paper); }
.sol-lb-tab {
    flex: 1 1 auto; min-height: 2.8rem; border: none; border-bottom: 2px solid transparent; background: none;
    color: var(--muted); font: 700 0.64rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.sol-lb-tab.is-active { color: var(--signal); border-bottom-color: var(--signal); }
.sol-lb-table { width: 100%; border-collapse: collapse; font: 500 0.85rem/1.4 var(--display); }
.sol-lb-table th { text-align: left; font: 700 0.55rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--line-strong); }
.sol-lb-table td { padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sol-lb-table tbody tr:first-child td { color: var(--signal); font-weight: 700; }
.sol-lb-empty { color: var(--muted); font: 500 0.9rem/1.5 var(--display); padding: 1.5rem 0; }

/* Fullscreen — the game panel fills the screen. */
.sol:fullscreen, .sol:-webkit-full-screen { width: 100vw; height: 100vh; border: 0; background: var(--felt-base); }
.sol:fullscreen .sol-board, .sol:-webkit-full-screen .sol-board { min-height: 0; }

.sol-cascade { position: absolute; inset: 0; z-index: 55; pointer-events: none; }

/* ---- Settings drawer ------------------------------------------------ */

/* The settings drawer lives INSIDE the game panel (.sol is position:relative),
   sliding in from its right edge - it never covers the rest of the page. */
.sol-settings {
    border: none;
    border-left: 1px solid var(--line-strong);
    padding: 0;
    margin: 0;
    max-width: min(30rem, 100%);
    width: min(30rem, 100%);
    max-height: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    z-index: 70;
    color: var(--ink);
    background: var(--paper);
    box-shadow: -12px 0 40px -12px rgba(17, 20, 24, 0.4);
}
.sol-settings[open] { display: flex; flex-direction: column; }
/* Backdrop confined to the game panel, not the viewport. */
.sol-settings-backdrop {
    position: absolute;
    inset: 0;
    z-index: 69;
    background: rgba(17, 20, 24, 0.42);
    display: none;
}
.sol-settings-backdrop.is-shown { display: block; }

.sol-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--line-strong);
    position: sticky;
    top: 0;
    background: var(--paper);
}
.sol-settings-head h2 { margin: 0; font: 800 1.1rem/1 var(--display); letter-spacing: -0.01em; }
.sol-settings-head p { margin: 0.2rem 0 0; font: 700 0.56rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sol-settings-body { padding: 0.5rem 1.3rem 2rem; overflow-y: auto; flex: 1; }

.sol-group { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.sol-group > h3 {
    margin: 0 0 0.8rem;
    font: 700 0.6rem/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal);
}
.sol-field { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; }
.sol-field > label { font: 600 0.86rem/1.3 var(--display); color: var(--ink); }
.sol-field small { display: block; font: 400 0.72rem/1.35 var(--display); color: var(--muted); margin-top: 0.1rem; }
.sol-field-note { font: 400 0.72rem/1.4 var(--display); color: var(--muted); padding: 0.1rem 0 0.4rem; }

.sol-field select,
.sol-field input[type="number"] {
    min-height: 2.4rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    font: 600 0.8rem/1 var(--mono);
    min-width: 8.5rem;
}
.sol-field input[type="number"] { min-width: 5.5rem; }
.sol-field input[type="range"] { width: 9rem; accent-color: var(--signal); }

/* Segmented toggle for booleans / small enums. */
.sol-seg { display: inline-flex; border: 1px solid var(--line-strong); }
.sol-seg button {
    min-height: 2.4rem;
    padding: 0.35rem 0.7rem;
    border: none;
    background: #fff;
    color: var(--muted);
    font: 700 0.62rem/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border-right: 1px solid var(--line);
}
.sol-seg button:last-child { border-right: none; }
.sol-seg button[aria-pressed="true"] { background: var(--signal); color: #fff; }
.sol-field.is-disabled { opacity: 0.42; pointer-events: none; }

.sol-backs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.6rem; padding-top: 0.6rem; }
.sol-back-swatch {
    aspect-ratio: 1 / 1.4;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: none;
}
.sol-back-swatch[aria-pressed="true"] { outline: 2px solid var(--signal); outline-offset: 2px; }
.sol-back-swatch .card-back { position: absolute; inset: 0; --card-w: 72px; }
.sol-back-name { display: block; margin-top: 0.3rem; font: 700 0.52rem/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; text-align: center; color: var(--muted); }

.sol-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; padding-top: 0.5rem; }
.sol-stat { border: 1px solid var(--line); padding: 0.6rem; }
.sol-stat span { display: block; font: 700 0.52rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sol-stat b { font: 800 1.2rem/1 var(--display); color: var(--ink); }

.sol-settings-foot { display: flex; gap: 0.5rem; padding: 1rem 1.3rem; border-top: 1px solid var(--line-strong); position: sticky; bottom: 0; background: var(--paper); }

/* Shortcut overlay */
.sol-keys { border: none; padding: 0; max-width: min(26rem, 92vw); background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(17,20,24,0.5); }
.sol-keys::backdrop { background: rgba(17,20,24,0.42); }
.sol-keys-body { padding: 1.4rem 1.6rem; }
.sol-keys h2 { margin: 0 0 1rem; font: 800 1.1rem/1 var(--display); }
.sol-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0; }
.sol-keys dt { font: 700 0.72rem/1.4 var(--mono); }
.sol-keys dt kbd { border: 1px solid var(--line-strong); padding: 0.05rem 0.4rem; border-radius: 3px; background: #fff; }
.sol-keys dd { margin: 0; font: 500 0.82rem/1.4 var(--display); color: var(--muted); }

/* ---- Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .card { transition: none !important; }
    .card.is-hint .card-inner { animation: none; outline: 2px solid var(--signal); }
    .sol-toast { transition: opacity 120ms ease; }
}

/* ---- Narrow screens ------------------------------------------------- */

@media (max-width: 620px) {
    .sol { --card-w: clamp(36px, 11.6vw, 56px); --fan-down: calc(var(--card-h) * 0.26); --pile-gap: 4px; }
    .sol-board { padding: 0.7rem 0.5rem; }
    .sol-hud { gap: 0.4rem 0.6rem; padding: 0.6rem 0.7rem; }
    .sol-btn { padding: 0.4rem 0.5rem; font-size: 0.58rem; }
    .sol-btn kbd { display: none; }
    .sol-readout b { font-size: 0.82rem; }
    .sol-settings { width: 100vw; max-width: 100vw; }
    /* FreeCell (8 cols) and Spider (10) can't fit 390px - let the board pan. */
    .sol-topzone { flex-wrap: nowrap; }
}