/* Solitaire TH - the card table. The kit draws the panels, claim form and leaderboards (kit.css,
   "verified leaderboards"); this file is the stage: the heads-up display, the felt table with its
   pile slots and this game's own cards (cards.js; size from main.js: --cw, --ch, and --fs from the
   kit's type scale), the tools under the table and the side column. */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sol { max-width: 1180px; margin: 0 auto; padding: 16px var(--gutter) 24px; display: grid; gap: 16px; }
.sol__stage {
    position: relative;
    /* the cards' z-indexes stay inside the stage: the sticky header, its drawer and the toast stay on top */
    isolation: isolate;
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.sol__stage[aria-busy="true"] { min-height: 480px; background: linear-gradient(110deg, var(--surface-2) 35%, var(--surface) 50%, var(--surface-2) 65%) 0 0 / 300% 100%; animation: skeleton 1.4s ease-in-out infinite; }
.sol__hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; }
.hud-chip { display: inline-flex; flex-direction: column; min-width: 64px; padding: 4px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink); line-height: 1.25; }
.hud-chip__label { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.hud-chip strong { font-size: var(--fs-m); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sol__hud .btn { margin-left: auto; }

/* the felt */
.felt {
    --felt: #1f6243;
    position: relative;
    border-radius: 14px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 25%, rgb(255 255 255 / .09), transparent 70%),
        repeating-linear-gradient(45deg, rgb(0 0 0 / .025) 0 2px, transparent 2px 5px),
        var(--felt);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25), inset 0 2px 18px rgb(0 0 0 / .25);
    overflow: visible;
}
.sol[data-phase="play"] .felt { touch-action: none; }

/* where piles go */
.slot {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: var(--cw, 80px);
    height: var(--ch, 112px);
    border-radius: calc(var(--cw, 80px) * .09);
    border: 2px solid rgb(255 255 255 / .28);
    background: rgb(0 0 0 / .1);
    display: grid;
    place-items: center;
    color: rgb(255 255 255 / .45);
    font: 700 var(--fs, 16px)/1 var(--font);
}
.slot--found::after { content: "A"; }
.felt[data-game^="spider"] .slot--found::after { content: "K"; }
.slot--stock.is-empty::after { content: "↻"; font-size: calc(var(--fs, 16px) * 1.4); }
.felt[data-game^="spider"] .slot--stock.is-empty::after { content: ""; }
.slot--tab { border-style: dashed; border-color: rgb(255 255 255 / .2); }
.slot--stock { cursor: pointer; }
.slot:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.slot.is-hint { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(233 201 131 / .55); }

/* the cards */
.pcard {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--cw, 80px);
    height: var(--ch, 112px);
    transition: transform .18s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
    cursor: pointer;
    touch-action: none;
}
.pcard.is-drag { transition: none; cursor: grabbing; }
.pcard.is-buried:not(.is-flying) { visibility: hidden; }
.pcard.is-drag .pcard__face { box-shadow: 0 10px 22px rgb(0 0 0 / .35); }
.pcard.is-dealing { transition: none; }
.pcard__face, .pcard__back {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--cw, 80px) * .09);
    box-shadow: 0 1px 2px rgb(0 0 0 / .3);
}
.pcard:not(.is-up) .pcard__face, .pcard.is-up .pcard__back { visibility: hidden; }
.pcard__face {
    background: linear-gradient(180deg, #fffdf8, #f6efe1);
    border: 1px solid rgb(0 0 0 / .2);
    overflow: hidden;
}
.pcard.is-red { color: #b3261e; }
.pcard.is-black { color: #1f1a15; }
.pcard svg { fill: currentColor; }
.pcard__index {
    position: absolute;
    left: 5%;
    top: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    font: 700 var(--fs, 16px)/1 var(--font);
    letter-spacing: -.04em;
}
.pcard__suit { width: calc(var(--fs, 16px) * .8); height: calc(var(--fs, 16px) * .8); margin-top: 1px; }
.pcard__art { position: absolute; left: 24%; top: 34%; width: 52%; height: 52%; }
.pcard__art--ace { left: 18%; top: 28%; width: 64%; height: 64%; }
.pcard__frame {
    position: absolute;
    inset: 26% 12% 8%;
    display: grid;
    place-items: center;
    border-radius: calc(var(--cw, 80px) * .06);
    border: 1px solid rgb(31 26 21 / .3);
    background: rgb(31 26 21 / .05);
}
.pcard.is-red .pcard__frame { border-color: rgb(179 38 30 / .35); background: rgb(179 38 30 / .06); }
.pcard__frame .pcard__art { position: static; width: 72%; height: 72%; }
.pcard__mini { position: absolute; right: 6%; bottom: 5%; width: 24%; height: 24%; }
.pcard__back {
    border: 3px solid #f4ead2;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0L20 10L10 20L0 10Z' fill='none' stroke='%23e9c983' stroke-opacity='.5'/%3E%3Cpath fill='%23e9c983' fill-opacity='.85' d='M10 6c1.2 1.6 1.2 2.8 0 4-1.2-1.2-1.2-2.4 0-4zm0 8c-1.2-1.6-1.2-2.8 0-4 1.2 1.2 1.2 2.4 0 4zm-4-4c1.6-1.2 2.8-1.2 4 0-1.2 1.2-2.4 1.2-4 0zm8 0c-1.6 1.2-2.8 1.2-4 0 1.2-1.2 2.4-1.2 4 0z'/%3E%3C/svg%3E") center / calc(var(--cw, 80px) * .28) repeat,
        linear-gradient(160deg, #23704d, #123d2a);
}
.pcard.is-hint .pcard__face { box-shadow: 0 0 0 3px var(--gold), 0 1px 2px rgb(0 0 0 / .3); animation: hint-pulse 1.2s ease-in-out infinite; }
@keyframes hint-pulse { 50% { box-shadow: 0 0 0 5px rgb(233 201 131 / .55), 0 1px 2px rgb(0 0 0 / .3); } }
.pcard__face.is-nudged { animation: nudge .32s ease; }
@keyframes nudge { 20% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }
.felt.is-won .pcard.is-up .pcard__face { animation: bow .9s ease calc(var(--i, 0) * 12ms) both; }
@keyframes bow { 35% { transform: translateY(-14px) rotate(-3deg); } 70% { transform: translateY(0); } }

/* undo / hint / finish / new deal under the table */
.tools { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tools .btn { min-height: 44px; }
.tools [data-action="auto"]:not([hidden]) { animation: hint-pulse-btn 1.6s ease-in-out infinite; }
@keyframes hint-pulse-btn { 50% { box-shadow: 0 0 0 4px rgb(233 201 131 / .45); } }
.tools .btn[data-confirm] { background: var(--accent); color: #fff; border-color: transparent; }

/* cards over the table */
.sol__panel { position: absolute; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; background: rgb(0 0 0 / .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); touch-action: pan-y; }
.end-badge[data-reason="win"] { background: rgb(201 165 90 / .22); color: var(--gold-ink); }
.sol__panel .modes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* beside the table: four games = two rows of tabs */
.sol__side { display: grid; gap: 16px; align-content: start; }
.sol__side .board-tabs { display: grid; grid-template-columns: 1fr 1fr; }

@media (min-width: 1024px) {
    .sol { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; padding-top: 24px; }
    .sol__side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); }
}

/* phones: the stage as wide as the screen */
@media (max-width: 639px) {
    .sol { padding: 0 0 16px; gap: 10px; }
    .sol__stage { min-height: min(560px, calc(100svh - var(--header-h) - 24px)); padding: 6px; gap: 6px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
    .sol[data-phase="play"] .sol__stage { min-height: 0; }
    .sol__hud { gap: 4px; min-height: 40px; }
    .hud-chip { min-width: 0; padding: 3px 8px; }
    .hud-chip--mode { display: none; }
    .felt { border-radius: 10px; }
    .sol__panel { padding: 12px; place-items: start center; border-radius: 0; }
    .sol__panel .modes { grid-template-columns: 1fr; }
    .panel-card { padding: 18px 16px; }
    .end-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 10px 0; }
    .end-stats div { padding: 4px 6px; }
    .end-stats dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .end-stats dd { font-size: var(--fs-s); }
    .sol__side { padding: 0 var(--gutter); }
    .tools { gap: 6px; flex-wrap: nowrap; }
    .tools .btn { flex: 1 1 0; min-width: 0; padding-inline: 6px; flex-direction: column; gap: 2px; font-size: var(--fs-xs); }
    .tools .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pcard, .felt { transition: none; }
    .pcard.is-hint .pcard__face, .tools [data-action="auto"]:not([hidden]) { animation: none; }
}