/* Shared chrome for the solitaire variants (Pyramid, Golf, TriPeaks, Yukon, Forty Thieves, Scorpion, Canfield). */
:root { --ink:#EAF2E6; --felt-1:#1f7a44; --felt-2:#155f34; --gold:#E8C969; --slot:rgba(255,255,255,0.10); --slot-line:rgba(255,255,255,0.28); --cw:70px; --ch:98.72px; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { font-family:'Inter','Segoe UI',Tahoma,sans-serif; background:radial-gradient(120% 120% at 50% 0%, var(--felt-1) 0%, var(--felt-2) 70%, #0e4324 100%); color:var(--ink); min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:14px 12px 32px; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.game-shell { width:100%; max-width:1040px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.top-bar { width:100%; display:flex; align-items:center; gap:14px; padding:10px 16px 11px; background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.14); border-radius:14px; flex-wrap:wrap; }
.tb-back { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:7px 13px; border-radius:10px; border:1px solid rgba(255,255,255,0.25); color:var(--ink); text-decoration:none; font-size:13px; font-weight:600; }
.tb-back:hover { border-color:var(--gold); color:var(--gold); }
.tb-title { display:flex; flex-direction:column; gap:2px; margin-right:auto; }
.tb-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(234,242,230,0.7); }
.tb-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); }
.tb-title h1 { font-size:21px; font-weight:800; }
.stats { display:flex; gap:16px; flex-wrap:wrap; }
.stats > div { display:flex; flex-direction:column; gap:1px; min-width:46px; }
.stats .l { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(234,242,230,0.65); }
.stats .v { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.stats .v.gold { color:var(--gold); }
.controls { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; align-items:center; }
.controls button, .controls label.opt { font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); background:rgba(255,255,255,0.10); cursor:pointer; border:1px solid rgba(255,255,255,0.22); border-radius:10px; padding:9px 13px; display:inline-flex; align-items:center; gap:7px; }
.controls button:hover:not(:disabled), .controls label.opt:hover { border-color:var(--gold); }
.controls button:disabled { opacity:.4; cursor:default; }
.controls button.primary { background:var(--gold); color:#3a2e0c; border-color:var(--gold); }
.controls .deal-no { font-size:12px; font-weight:700; color:rgba(234,242,230,0.75); font-variant-numeric:tabular-nums; padding:0 4px; }
.board-fit { position:relative; width:100%; display:flex; justify-content:center; }
.board { position:relative; transform-origin:top center; touch-action:none; }
.pile { position:absolute; }
.card, .back, .slot { width:var(--cw); height:var(--ch); border-radius:7px; position:absolute; left:0; top:0; }
.card { background-color:#fff; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.35); }
.back { background:repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0 6px, transparent 6px 12px), linear-gradient(160deg, #2a4f86, #1c3a66); border:2px solid #e9eef7; box-shadow:0 1px 2px rgba(0,0,0,0.35); }
.slot { border:1.5px dashed var(--slot-line); background:var(--slot); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.45); font-size:22px; font-weight:800; }
.pile.cell .slot { display:none; }
.pile.done { display:none; }
.card.free { box-shadow:0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.35); }
.card.sel { outline:3px solid var(--gold); outline-offset:-1px; box-shadow:0 0 14px rgba(232,201,105,0.7); z-index:6; }
.card.hint, .back.hint, .slot.hint { outline:3px solid #fff; outline-offset:-1px; box-shadow:0 0 16px rgba(255,255,255,0.75); z-index:5; }
.plabel { position:absolute; left:0; top:calc(var(--ch) + 4px); width:var(--cw); text-align:center; font-size:11px; font-weight:700; color:rgba(234,242,230,0.8); white-space:nowrap; }
.drag-layer { position:fixed; left:0; top:0; pointer-events:none; z-index:1000; }
.drag-layer .card { position:absolute; left:0; }
.win { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2000; background:rgba(8,40,22,0.6); backdrop-filter:blur(3px); }
.win.show { display:flex; }
.win-card { background:#fffdf6; color:#23311f; border-radius:18px; padding:26px 30px; text-align:center; max-width:90%; box-shadow:0 30px 60px -20px rgba(0,0,0,0.6); }
.win-card h2 { font-size:28px; margin-bottom:6px; }
.win-card .big { font-size:32px; font-weight:800; color:#1f7a44; font-variant-numeric:tabular-nums; }
.win-card p { font-size:14px; color:#4a5a44; margin:6px 0 14px; }
.win-card .row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.win-card button { font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; border-radius:10px; padding:10px 18px; border:1px solid #1f7a44; background:#fff; color:#1f7a44; }
.win-card button.primary { background:#1f7a44; color:#fff; }
.status { font-size:13px; color:rgba(234,242,230,0.85); text-align:center; min-height:18px; max-width:720px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.game-overview { max-width:720px; width:100%; margin:26px auto 0; padding:26px 30px 30px; background:#FFFDF8; border:1px solid rgba(0,0,0,0.12); border-radius:14px; color:#2A2017; line-height:1.62; text-align:left; box-shadow:0 16px 40px -26px rgba(0,0,0,0.6); }
.game-overview > :first-child { margin-top:0; }
.game-overview h2 { margin:0 0 12px; font-size:1.4rem; color:#14361f; }
.game-overview h3 { margin:26px 0 9px; font-size:1.08rem; color:#1f7a44; }
.game-overview p { margin:0 0 12px; }
.game-overview ul { margin:0 0 12px; padding-left:20px; }
.game-overview li { margin:0 0 7px; }
.game-overview b { color:#14361f; }
.game-overview a { color:#1f7a44; }
.game-overview .related-games-list { list-style:none; padding-left:0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.game-overview .related-games-list a { color:#1f7a44; font-weight:600; text-decoration:none; }
.game-overview .related-games-list a:hover { text-decoration:underline; }
@media (max-width:560px) { .tb-title h1 { font-size:18px; } .game-overview { padding:20px 18px 24px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }