:root { --wool: #254e3c; --wool-dark: #183b2b; --ivory: #f5f1e5; --ink: #242a26; --red: #9c4d49; --stitch: #a8bd9d; }
body { background-color: var(--wool); background-image: repeating-linear-gradient(32deg, transparent 0 3px, #ffffff03 3px 4px), repeating-linear-gradient(118deg, transparent 0 4px, #00000008 4px 5px); }
header, main, footer { width: min(100% - 32px, 960px); }
header { padding-block: 16px; }
main { padding-block: 12px 32px; }
#felt h1 { font-size: clamp(28px, 5vw, 40px); margin: 0 0 4px; }
#felt .tagline { font-size: 16px; max-width: none; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; align-items: center; }
button { font: 14px Georgia, serif; min-height: 44px; padding: 8px 13px; color: var(--ivory); background: #173a2b; border: 1px solid #ffffff30; border-radius: 6px; cursor: pointer; }
button:hover { background: #355f46; }
button:disabled { opacity: .45; cursor: default; }
button[aria-pressed="true"] { background: var(--ivory); color: var(--wool-dark); border-color: var(--ivory); }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--stitch); outline-offset: 3px; }
.draw-choice { display: flex; gap: 4px; }
#board { --card-width: min(96px, 100%); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px 6px; align-items: start; user-select: none; }
.pile { position: relative; width: var(--card-width); min-width: 0; aspect-ratio: 72 / 102; }
.pile::before { content: ''; display: block; width: 100%; height: auto; aspect-ratio: 72 / 102; border: 1px solid #c1cfb54d; border-radius: 6px; box-sizing: border-box; }
.pile-label { position: absolute; top: 8px; left: 0; width: var(--card-width); text-align: center; font-size: 12px; color: #c1cfb5; pointer-events: none; }

.card { position: absolute; width: var(--card-width); aspect-ratio: 72 / 102; left: 0; top: 0; padding: 0; min-height: 0; border: none; border-radius: 5px; background: var(--ivory); color: var(--ink); box-shadow: 0 2px 3px #071c2960; touch-action: none; overflow: hidden; }
.card:hover { background: var(--ivory); }
.card svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.card.back { background: #dcd8c9; padding: 4px; }
.card.back::after { content: ''; display: block; width: 100%; height: 100%; border: 1px solid #ebe7d4; border-radius: 3px; background: repeating-linear-gradient(45deg, #345b47 0 2px, #466952 2px 4px); }
.card.hinted, .pile.hinted::before, .card.selected { outline: 2px solid #e3cf8e; outline-offset: 2px; }
.drag-stack { position: fixed; z-index: 100; pointer-events: none; }
.drag-stack .card { width: 100%; box-shadow: var(--shadow-lag) var(--shadow-lag) 10px #071c2960; }
.seed-line { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 14px; }
.seed-line > span { min-width: 0; overflow-wrap: anywhere; }
#seed { font-family: ui-monospace, monospace; }
#seeds { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 10px; }
#seeds button { max-width: 100%; overflow-wrap: anywhere; font: 12px ui-monospace, monospace; text-align: left; }
summary { min-height: 44px; display: list-item; align-content: center; color: var(--stitch); cursor: pointer; font-size: 14px; }
#game-status { font-size: 15px; min-height: 24px; max-width: none; }
@media (max-width: 480px) { .controls { gap: 6px; margin-block: 16px; } button { padding-inline: 10px; } #board { gap: 22px 6px; } .pile-label { font-size: 10px; } }