:root {
  --felt-dark: #063c31;
  --felt: #0b634d;
  --felt-light: #118064;
  --ink: #13241f;
  --cream: #f6f1e6;
  --red: #c42835;
  --black: #18211f;
  --columns: 7;
  --card-w: 4rem;
  --card-h: 5.68rem;
  --gap: .5rem;
  --card-font: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cream);
  background: var(--felt-dark);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #16775f, transparent 35rem), linear-gradient(135deg, var(--felt), var(--felt-dark)); }
button, select { font: inherit; }
button { cursor: pointer; }
.game-shell { width: min(100%, 100rem); margin: auto; padding: clamp(1rem, 3vw, 2.5rem); }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .65rem; font-family: Georgia, serif; }
.brand span { font-size: 2rem; color: #e7c98d; text-shadow: 0 2px 5px #002d23; }
h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -.04em; }
.controls, .scorebar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.button, .icon-button, select { border: 1px solid rgb(255 255 255 / .28); border-radius: .6rem; color: var(--cream); background: rgb(0 43 32 / .35); min-height: 2.5rem; padding: .45rem .75rem; box-shadow: inset 0 1px rgb(255 255 255 / .1); }
.button:hover, .icon-button:hover, select:hover { background: rgb(0 32 24 / .55); }
.button-primary { background: #e2bd73; color: #20312a; border-color: #f5dcaa; font-weight: 700; }
.button-primary:hover { background: #f1cf86; }
button:disabled { opacity: .45; cursor: not-allowed; }
.card:disabled { opacity: 1; cursor: default; }
.icon-button { width: 2.5rem; padding: 0; font-weight: 800; font-size: 1.1rem; }
select { min-height: 2.5rem; padding-right: .4rem; max-width: 13rem; }
select option, select optgroup { color: #13241f; background: #f6f1e6; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tallies { display: flex; flex-wrap: wrap; gap: .85rem; }
.scorebar { justify-content: space-between; margin: 1.2rem 0 .85rem; color: rgb(255 255 255 / .86); font-size: .92rem; }
.scorebar p { margin: 0; }
#status { min-height: 1.4em; font-weight: 650; }

#board { padding: .25rem 0 2rem; }
.top-row, .tableau { display: grid; grid-template-columns: repeat(var(--columns), var(--card-w)); gap: var(--gap); justify-content: center; }
.top-row { margin-bottom: clamp(.7rem, 2vw, 1.4rem); }
.top-row.spider-top { grid-template-columns: var(--card-w) minmax(0, 1fr); gap: .75rem; width: min(100%, calc(var(--columns) * var(--card-w) + (var(--columns) - 1) * var(--gap))); margin-inline: auto; align-items: center; }
.run-tray { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
.run-chip { display: grid; place-items: center; width: 1.6rem; height: 2.2rem; border-radius: .3rem; background: #f6f1e6; color: var(--black); font: 700 1rem Georgia, serif; box-shadow: 0 1px 3px rgb(0 27 20 / .35); }
.run-chip.red { color: var(--red); }
.run-chip.run-open { background: transparent; box-shadow: none; outline: 2px dashed rgb(255 255 255 / .2); outline-offset: -2px; }
.stock-badge { position: absolute; z-index: 30; inset: auto -.25rem -.25rem auto; min-width: 1.4rem; padding: .1rem .3rem; border-radius: 1rem; background: #e2bd73; color: #20312a; font-size: .78rem; font-weight: 800; text-align: center; pointer-events: none; }
.foundation-spacer { grid-column: span 1; }
.pile { position: relative; min-height: var(--card-h); border-radius: .62rem; }
.pile-empty { outline: 2px dashed rgb(255 255 255 / .2); outline-offset: -2px; }
.pile-label { position: absolute; z-index: 0; inset: .55rem auto auto .55rem; color: rgb(255 255 255 / .42); font-weight: 700; font-size: .75rem; pointer-events: none; }
.card { position: absolute; inset-inline-start: 0; width: var(--card-w); height: var(--card-h); border: 1px solid #d9d4c9; border-radius: min(.62rem, calc(var(--card-w) * .12)); background: linear-gradient(140deg, #fff, #f1eee6); color: var(--black); padding: calc(var(--card-w) * .05); box-shadow: 0 2px 5px rgb(0 27 20 / .35); text-align: left; user-select: none; touch-action: none; }
.card:hover { transform: translateY(-2px); box-shadow: 0 5px 9px rgb(0 24 18 / .38); }
.card:focus-visible, .pile:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid #ffe59b; outline-offset: 3px; }
.card.red { color: var(--red); }
.corner { display: inline-flex; flex-direction: column; align-items: center; font: 700 var(--card-font)/.95 Georgia, serif; pointer-events: none; }
.pip { position: absolute; inset: 56% auto auto 50%; transform: translate(-50%, -50%); font-size: calc(var(--card-w) * .42); font-family: Georgia, serif; pointer-events: none; }
.narrow-cards .pip { display: none; }
.covered-tableau-card .corner, .covered-tableau-card .pip { display: none; }
.tableau-card-peek { position: absolute; inset: 1px auto auto 2px; font: 700 var(--card-font)/1.05 Georgia, serif; letter-spacing: -.04em; pointer-events: none; white-space: nowrap; }
.card.back { background-color: #264d77; background-image: linear-gradient(45deg, rgb(255 255 255 / .22) 25%, transparent 25%, transparent 75%, rgb(255 255 255 / .22) 75%), linear-gradient(45deg, rgb(255 255 255 / .22) 25%, #264d77 25%, #264d77 75%, rgb(255 255 255 / .22) 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; border: 4px solid #e8d6a0; }
.card.selected { outline: 4px solid #f3ce78; outline-offset: 2px; z-index: 50 !important; }
.card.hinted { outline: 4px solid #ffe59b; outline-offset: 3px; box-shadow: 0 0 0 .3rem rgb(255 229 155 / .3), 0 2px 5px rgb(0 27 20 / .35); z-index: 49 !important; }
.card.selected-run { outline: 2px solid #f3ce78; outline-offset: 1px; }
.card.dragging { opacity: .45; }
.drag-ghost { position: fixed; z-index: 90; pointer-events: none; }
.pile.legal-target { outline: 2px solid rgb(243 206 120 / .75); outline-offset: 2px; }
.pile.hinted-pile { outline: 3px solid #ffe59b; outline-offset: 3px; }
.victory-burst { position: fixed; z-index: 100; inset: 0; overflow: hidden; pointer-events: none; }
.victory-card { position: absolute; top: 68%; left: 50%; display: grid; place-items: center; width: 2.8rem; height: 4rem; border: 1px solid #d9d4c9; border-radius: .4rem; background: linear-gradient(140deg, #fff, #f1eee6); color: var(--black); box-shadow: 0 3px 8px rgb(0 0 0 / .35); font: 700 1rem Georgia, serif; animation: victory-flight 1.25s cubic-bezier(.2, .8, .35, 1) var(--delay) both; }
.victory-card.red { color: var(--red); }
.pile.drop-ready { outline: 3px solid #f3ce78; outline-offset: 4px; background: rgb(243 206 120 / .16); }
.interaction-note { margin: .35rem 0 0; color: rgb(255 255 255 / .66); font-size: .8rem; text-align: center; }

dialog { width: min(32rem, calc(100% - 2rem)); border: 1px solid rgb(255 255 255 / .3); border-radius: 1rem; background: #f8f4e9; color: #22372f; box-shadow: 0 1.2rem 4rem rgb(0 0 0 / .45); padding: 1.2rem; }
dialog::backdrop { background: rgb(0 22 16 / .68); backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialog-heading h2 { margin: 0; font-family: Georgia, serif; }
.dialog-heading .icon-button { color: #254238; background: #e8e1d0; border-color: #c5baa4; }
dialog p { line-height: 1.55; }
dialog .button { margin-top: .3rem; }

@media (max-width: 620px) {
  .game-shell { padding: .6rem; }
  .game-header { align-items: flex-start; gap: .5rem; }
  .brand h1 { font-size: 1.4rem; }
  .brand span { font-size: 1.4rem; }
  .controls { gap: .3rem; }
  .button, .icon-button, select { min-height: 2.25rem; padding-block: .25rem; }
  .button { padding-inline: .5rem; font-size: .88rem; }
  select { max-width: 11rem; font-size: .88rem; }
  .scorebar { margin: .6rem 0 .5rem; font-size: .82rem; }
  .interaction-note { display: none; }
}

@media (prefers-reduced-motion: no-preference) { .card, .pile, .button, .icon-button { transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease; } }
@media (prefers-reduced-motion: no-preference) {
  .card.rejected { animation: card-reject .18s ease-in-out; }
  @keyframes card-reject { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.35rem); } 75% { transform: translateX(.35rem); } }
  @keyframes victory-flight { 0% { transform: translate(-50%, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--rotation)); opacity: 0; } }
}