.vguide-cards { --guide-card:clamp(32px,8vw,54px); }
.vguide-card { display:block; position:relative; width:var(--guide-card); aspect-ratio:127/177; border-radius:4px; flex-shrink:0; border:1px solid #b9aca7; background:#fff; box-shadow:0 1px 2px #35243825; }
.vguide-selected { outline:2px solid #d92573; outline-offset:1px; }
.vguide-empty { background:transparent; border:1px dashed #aaa398; box-shadow:none; }
.vguide-example { text-align:center; margin:0 0 12px; font-size:11px; color:var(--muted); }
.vguide-cue { margin:15px 0 0; padding:9px 6px; border-radius:8px; background:var(--tint); text-align:center; color:var(--accent); font-weight:650; font-size:12px; line-height:1.5; }
.vguide-row { display:flex; justify-content:center; gap:6px; }
.vguide-hand { position:relative; display:grid; justify-items:center; gap:8px; margin:8px 0; font-size:12px; }
.vguide-pot { display:flex; justify-content:center; align-items:center; gap:5px; margin:12px 0; font-size:12px; }
.vguide-chip { width:28px; height:28px; }
.vguide-pot-chips,.vguide-wager-token { display:inline-flex; align-items:center; padding-left:12px; }
.vguide-pot-chips .vguide-chip { margin-left:-12px; }
.vguide-pot-chips .vguide-wager-token { padding-left:0; }
.vguide-wager-token .vguide-chip + .vguide-chip { margin-left:-12px; }
.vguide-hand > .vguide-wager-token { position:absolute; right:12%; top:50%; }
.vguide-winnings { position:absolute; right:5%; top:50%; color:var(--accent); font-size:11px; font-weight:700; }
.vguide-community { margin:14px 0; --guide-card:clamp(30px,8vw,54px); }
.vguide-hand > .vguide-chip { position:absolute; right:18%; }
.vguide-rules { margin-top:16px; font-size:13px; line-height:1.65; color:var(--muted); }
.vguide-rules summary { cursor:pointer; padding-block:8px; font-weight:650; }
.vguide-rules ol { padding-left:20px; }
.vguide-rules li { margin-bottom:12px; }
.vguide-pai-board { position:relative; width:100%; max-width:350px; aspect-ratio:1; margin:auto; }
.vguide-pai-board > svg { width:100%; height:100%; }
.vguide-pai-tile { position:absolute; width:9%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; }
.vguide-pai-tile > svg { width:100%; height:100%; display:block; }
.vguide-pai-legend { display:flex; justify-content:center; gap:16px; margin-top:10px; }
.vguide-pai-legend > span { display:flex; align-items:center; gap:6px; font-size:10px; }
.vguide-pai-legend > span > span:first-child { width:34px; height:34px; flex-shrink:0; }
.how-to-demo:has(.vguide-pai-board) { padding:10px; }
.how-to-demo:has(.vguide-cards) { overflow:hidden; }
.vguide-rules ~ * { max-width:100%; }
@media(max-width:360px) {
 .vguide-pai-legend { gap:8px; }
 .vguide-pai-legend > span { gap:3px; font-size:9px; }
}

/* Miniature versions of the FreeCell and Klondike tables. */
.how-to-dialog:has(.vguide-patience) { width:min(720px,calc(100% - 28px)); }
.how-to-demo:has(.vguide-patience) { padding:0; border:0; background:transparent; }
.demo-board.vguide-patience { display:block; max-width:none; }
.vguide-patience { --guide-cols:7; --guide-step:clamp(19px,4.8vw,29px); --guide-gap:clamp(4px,1.5vw,10px); }
.vguide-freecell { --guide-cols:8; }
.vguide-patience .vguide-example { margin-bottom:8px; text-align:left; }
.vguide-table { padding:clamp(8px,2.4vw,20px); border:1px solid #c8dfd3; border-radius:16px; background:#dfeee7; }
.vguide-freecell .vguide-table { background:#e1eee7; }
.vguide-table-labels,.vguide-table-top,.vguide-table-columns { display:grid; grid-template-columns:repeat(var(--guide-cols),minmax(0,1fr)); gap:var(--guide-gap); }
.vguide-table-labels { margin-bottom:8px; font-size:clamp(9px,2.3vw,12px); font-weight:700; color:#436551; }
.vguide-table-top { margin-bottom:clamp(22px,5vw,32px); }
.vguide-table-pile { position:relative; min-width:0; aspect-ratio:1 / 1.42; }
.vguide-table-slot { display:grid; place-items:center; position:absolute; inset:0; border:1px dashed #8faf9b; border-radius:5px; background:#d3e4d9; color:#456b54; font:clamp(20px,4vw,30px) Georgia,serif; }
.vguide-table-columns { padding-bottom:calc(2 * var(--guide-step)); }
.vguide-patience .vguide-card { position:absolute; left:0; width:100%; aspect-ratio:1 / 1.42; box-sizing:border-box; border:1px solid #d9ded9; border-radius:5px; box-shadow:none; }
.vguide-patience .vguide-selected { outline:2px solid #d92573; outline-offset:-2px; }
.vguide-target > .vguide-table-slot { outline:2px solid #a52b62; outline-offset:1px; }
.vguide-card-index { display:none; }
[data-theme="dark"] .vguide-table { background:#1c3028; border-color:#355446; }
[data-theme="dark"] .vguide-table-labels { color:#c0d7c9; }
[data-theme="dark"] .vguide-table-slot { background:#233d30; border-color:#5d806c; color:#b8d3c2; }
@media(max-width:500px) {
 .vguide-patience .vguide-card-index { display:flex; position:absolute; inset:0 0 auto; justify-content:space-between; padding:4px 2px; background:white; color:#171717; font:clamp(9px,2.7vw,12px)/1 Arial,sans-serif; border-radius:4px 4px 0 0; }
 .vguide-patience .vguide-card-index.vguide-red { color:#df0000; }
 .vguide-table { border-radius:10px; }
}