/* Limestone's warm paper palette, with a dedicated emerald card table. */
:root { --ink:#f4efdd; --gold:#e8c969; --cw:78px; }
body { background:#f5f0e6; color:#262a22; padding:14px 16px 40px; }
.game-shell { max-width:1200px; gap:0; }
/* The standard game top bar (home button, back link, title, stats), on the table's felt. */
.top-bar { margin-bottom:16px; color:var(--ink); background:#1b5440; border-color:#2c3e32; box-shadow:0 10px 24px -18px #182c29aa; }
.table-frame { width:100%; color:var(--ink); border:6px solid #2c3e32; border-radius:20px; overflow:hidden; background:radial-gradient(ellipse at 50% 20%,#236b4f 0%,#164b39 65%,#123d30 100%); box-shadow:0 18px 35px -20px #182c29aa,0 0 0 1px #a29471,inset 0 0 0 1px #f0d99938; }
.controls { gap:9px; padding:14px 20px; margin:0 0 20px; border-bottom:1px solid #f4e7bb20; background:#072f252e; }
.rules-link { color:#dedac7; font-size:12px; font-weight:600; text-decoration:none; margin-left:6px; white-space:nowrap; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:3px solid #dcb96b; outline-offset:4px; }
.board-fit { overflow:hidden; padding-top:3px; }.board { position:relative; flex:none; width:861px; }.zone-top { margin-bottom:28px; align-items:flex-start; padding:0 2px 18px; border-bottom:1px solid #f3e5b51c; }
.stock { border:0; background:none; color:inherit; text-align:left; font-family:inherit; padding:0; gap:26px; }.stock:disabled { cursor:default; }.stock .lbl { font-size:12px; font-weight:400; color:#e5dfc8; width:60px; line-height:1.6; }.stock .lbl:before { content:'STOCK'; display:block; font-size:9px; letter-spacing:.2em; color:#a3bdab; }.stock .pile { transform:scale(.78); transform-origin:left top; margin-right:-16px; margin-bottom:-24px; }
.zone-label { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.18em; color:#a6bdab; margin-bottom:10px; }.zone-label span { color:#e8d7a9; letter-spacing:.04em; }
.runs { gap:8px; }.run-slot { width:39px; height:51px; display:flex; align-items:center; justify-content:center; color:#c0d2b645; font:16px Georgia,serif; background:#0d332630; border:1px solid #b9caaa35; box-shadow:inset 0 1px 4px #00251738; }.run-slot.done { color:#3c4b32; background:linear-gradient(135deg,#f2e3b6,#c4a05b); box-shadow:0 0 14px #e8c96938; }
.card { box-shadow:0 2px 4px #001e2590,0 0 0 1px #172c2530; }.card.sel { outline:2px solid #ffe397; box-shadow:0 0 0 3px #dfc58188,0 7px 15px #001d2480; z-index:auto; }
.back { border:3px solid #e8e1c9; background:repeating-linear-gradient(45deg,transparent 0 5px,#c6a66940 5px 6px,transparent 6px 11px),repeating-linear-gradient(-45deg,transparent 0 5px,#c6a66940 5px 6px,transparent 6px 11px),#193e34; box-shadow:0 2px 3px #001e2570,inset 0 0 0 2px #193e34,inset 0 0 0 3px #b79858; }
.back:after { content:'♠'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:24px Georgia,serif; color:#d6bd7d; background:#193e34; border:1px solid #b7985870; border-radius:50%; width:35px; height:43px; text-align:center; line-height:43px; }
.col.legal:after { content:''; position:absolute; pointer-events:none; left:-3px; right:-3px; top:-3px; bottom:-3px; border:2px solid #d7dd9d70; border-radius:9px; }.col.hint-target:after { border-color:#ffe19c; box-shadow:0 0 18px #edddaa40; }
.table-mark { padding:30px 0 25px; text-align:center; color:#cbd4ae27; font:34px Georgia,serif; pointer-events:none; }.table-mark span { display:block; font:9px 'Segoe UI',sans-serif; letter-spacing:.32em; margin-top:5px; }
.table-footer { display:flex; flex-direction:column; gap:8px; align-items:center; padding:16px 20px; border-top:1px solid #f4e7bb18; background:#082d272e; }.status { color:#dfdfc9; font-size:12px; }.key-help { font-size:8px; color:#91b09e; letter-spacing:.17em; }
.records { display:flex; gap:26px; align-items:center; width:100%; padding:23px 4px; font-size:11px; color:#8a7e69; border-bottom:1px solid #dcd4c5; }.records > span:first-child { font-size:9px; letter-spacing:.12em; }.records b { margin-left:8px; background:#e8e1d2; border-radius:4px; padding:5px 7px; font-size:9px; color:#615f50; }.records strong { color:#304c39; margin-left:8px; font-size:15px; font-variant-numeric:tabular-nums; }.record-note { margin-left:auto; font-family:Georgia,serif; font-style:italic; font-size:13px; }
.game-overview { max-width:840px; margin-top:38px; background:transparent; border:0; box-shadow:none; padding:16px 20px; color:#756b5e; font-size:14px; }.game-overview h2 { font:28px Georgia,serif; }.game-overview h3 { color:#315440; }.game-overview b { color:#484d3f; }
.win { background:#071e19c9; top:0; right:0; bottom:0; left:0; }.win-card { background:#faf5e8; border:1px solid #cead65; padding:36px; }.win-card h2 { font:29px Georgia,serif; }.win-emblem { font:54px Georgia,serif; color:#b79045; margin:20px; }.win-card button { background:#23513c; }
@media(max-width:900px) { body { padding:14px 12px 30px; }.controls { padding:14px; }.record-note { display:none; } }
@media(max-width:560px) { body { padding:12px 8px 30px; }.table-frame { border-width:3px; border-radius:12px; }.controls { gap:6px; padding:12px 10px; margin-bottom:14px; }.controls button,.controls select { padding:9px 10px; font-size:12.5px; }.rules-link { padding:8px 2px; }.table-footer { padding:12px 10px; }.status { font-size:11px; line-height:1.5; }.key-help { font-size:7px; }.records { gap:15px; flex-wrap:wrap; padding:20px 8px; }.records > span:first-child { width:100%; }.game-overview { margin-top:20px; padding:12px; } }
/* Keep the natural board height independent of its scaled wrapper. */
.board-fit { align-items:flex-start; }
.win-card { max-height:calc(100vh - 32px); overflow-y:auto; }