/* Solitaire: green felt, seven columns that scale with the window so it fits a phone */
.sol-window { min-width: 300px; }
.sol-body { flex: 1; min-height: 0; overflow: auto; background: #0b7a2b radial-gradient(ellipse at center, #12923a 0%, #0b6a25 100%); padding: 8px; user-select: none; -webkit-user-select: none; }
.sol-board { --gap: 1.5%; display: grid; grid-template-columns: repeat(7, 1fr); column-gap: var(--gap); row-gap: 14px; align-items: start; min-width: 280px; }
.sol-zone { position: relative; aspect-ratio: 5 / 7; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.12); }
.sol-zone.tableau { margin-bottom: calc(var(--cnt, 0) * var(--fan)); }
.sol-zone.gap { visibility: hidden; }
.sol-zone.recycle::after { content: "\21BB"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.6); font-size: 26px; }
.sol-card {
    position: absolute; left: 0; right: 0; top: calc(var(--n, 0) * var(--fan, 0px)); aspect-ratio: 5 / 7;
    border-radius: 4px; border: 1px solid #333; background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    font: 700 clamp(9px, 2.4vw, 15px)/1.1 Tahoma, Arial, sans-serif; text-align: left; padding: 2px 3px; cursor: pointer; display: block;
}
.sol-board { --fan: clamp(12px, 3.6vw, 22px); }
.sol-card.red { color: #c0121f; }
.sol-card .pip { position: absolute; right: 4px; bottom: 2px; font-size: 1.9em; line-height: 1; opacity: 0.85; }
.sol-card.down {
    color: transparent; border-color: #0a2d6e;
    background: repeating-linear-gradient(45deg, #2b5fc4 0 4px, #1c3f8f 4px 8px);
    box-shadow: inset 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, 0.4);
}
.sol-card.down .pip { display: none; }
.sol-card.selected { outline: 2px solid #ffd54a; outline-offset: 1px; z-index: 5; }
.sol-card:focus-visible { outline: 2px dotted #fff; outline-offset: 1px; }
.sol-zone:focus-visible { outline: 2px dotted #fff; }