@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap");

:root {
  color-scheme: dark;
  --felt: #0d403a;
  --felt-dark: #082e2a;
  --felt-light: #15524a;
  --cream: #f4eddf;
  --ink: #15201e;
  --red: #b73736;
  --gold: #d9b773;
  --text: #f2ecdf;
  --muted: #9bb3ab;
  --line: rgba(232, 226, 210, .16);
  --card-w: clamp(78px, 8.1vw, 112px);
  --card-h: calc(var(--card-w) * 1.42);
  --down-gap: clamp(16px, 1.55vw, 23px);
  --up-gap: clamp(27px, 2.5vw, 39px);
  --sans: "Manrope", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #061f1d; }
body { margin: 0; min-height: 100vh; color: var(--text); font-family: var(--sans); background: radial-gradient(circle at 48% 36%, #15564d 0, var(--felt) 37rem, var(--felt-dark) 80%); }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #f2d797; outline-offset: 4px; }

.grain { position: fixed; inset: 0; pointer-events: none; opacity: .055; background-image: radial-gradient(circle at 20% 25%, white 0 .4px, transparent .6px), radial-gradient(circle at 74% 66%, black 0 .4px, transparent .7px); background-size: 5px 5px, 7px 7px; mix-blend-mode: overlay; }
.shell { position: relative; width: min(1480px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 28px 20px; }

.topbar { height: 90px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.brand { justify-self: start; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand > span:last-child { display: grid; gap: 2px; }
.brand strong { font-size: 13px; letter-spacing: .14em; }
.brand small { color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.brand-mark { width: 31px; height: 38px; display: grid; place-items: center; border-radius: 4px; border: 1px solid rgba(240,220,170,.35); background: #0a302c; transform: rotate(-3deg); box-shadow: 4px 3px 0 #06231f, 5px 4px 0 rgba(240,220,170,.23); }
.brand-mark i { width: 14px; height: 18px; position: relative; display: block; background: var(--gold); clip-path: polygon(50% 0, 100% 48%, 70% 75%, 56% 68%, 61% 100%, 39% 100%, 44% 68%, 30% 75%, 0 48%); }
.title-block { text-align: center; }
.title-block p { margin: 0 0 2px; color: var(--muted); font: 8px var(--mono); letter-spacing: .18em; }
.title-block h1 { margin: 0; font: 600 25px var(--serif); letter-spacing: .02em; }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 3px; }
.top-actions button { border: 0; background: transparent; color: #bfd0ca; padding: 9px 10px; cursor: pointer; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.top-actions button:hover { color: white; }
.top-actions button:disabled { opacity: .35; cursor: default; }
.top-actions .new-deal { border: 1px solid rgba(217,183,115,.46); border-radius: 3px; margin-left: 7px; color: #f1dcaa; }

.scorebar { min-height: 62px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.scorebar > div { display: grid; min-width: 46px; }
.scorebar span { color: var(--muted); font: 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.scorebar strong { margin-top: 3px; font: 500 13px var(--mono); color: var(--text); }
.scorebar p { margin-left: auto; color: #bad0c8; font-size: 10px; }

.game-board { position: relative; min-height: 690px; padding: 30px 3% 20px; }
.game-board::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.95%, rgba(255,255,255,.025) 50%, transparent 50.05%), radial-gradient(circle at center, transparent 0 48%, rgba(255,255,255,.025) 48.2%, transparent 48.4%); pointer-events: none; }
.upper-board { position: relative; display: flex; justify-content: space-between; max-width: 1180px; margin: 0 auto 38px; }
.stock-group, .foundation-group { display: flex; gap: clamp(12px, 1.6vw, 24px); }
.pile-wrap { position: relative; }
.pile-label { display: block; margin-bottom: 7px; color: rgba(221,233,227,.52); font: 8px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.pile { position: relative; width: var(--card-w); height: var(--card-h); border-radius: calc(var(--card-w) * .075); }
.stock { padding: 0; cursor: pointer; border: 1px solid rgba(225,236,230,.22); background: transparent; }
.stock.has-cards { border: 1px solid #dac79d; background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(239,215,164,.09) 7px 8px), radial-gradient(circle, #176159 0 11%, #0e3732 12% 38%, #092c29 39%); box-shadow: 0 8px 15px rgba(3,20,18,.36), 3px 3px 0 #0a302c, 4px 4px 0 rgba(218,199,157,.4); }
.stock.has-cards::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(218,199,157,.36); border-radius: 50%; }
.stock.recycle::before { content: "↻"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(240,231,211,.48); font: 31px var(--serif); }
.stock.empty { cursor: default; opacity: .35; }
.foundation { border: 1px solid rgba(225,236,230,.18); background: rgba(4,29,26,.14); display: grid; place-items: center; color: rgba(234,226,209,.22); font: 40px var(--serif); }
.foundation.available { border-color: rgba(217,183,115,.75); box-shadow: 0 0 20px rgba(217,183,115,.16); }

.tableau { position: relative; display: grid; grid-template-columns: repeat(7, var(--card-w)); justify-content: space-between; gap: clamp(6px, 1.1vw, 18px); max-width: 1180px; margin: 0 auto; }
.tableau-pile { position: relative; min-height: 430px; border-top: 1px solid rgba(225,236,230,.12); border-radius: calc(var(--card-w) * .075); }
.tableau-pile.empty::before { content: "K"; position: absolute; inset: 0 auto auto 0; width: var(--card-w); height: var(--card-h); display: grid; place-items: center; border: 1px solid rgba(225,236,230,.16); border-radius: inherit; color: rgba(225,236,230,.17); font: 32px var(--serif); }
.tableau-pile.available::before { border-color: rgba(217,183,115,.8); box-shadow: 0 0 20px rgba(217,183,115,.18); }

.playing-card { position: absolute; left: 0; top: var(--y, 0); width: var(--card-w); height: var(--card-h); padding: 0; border: 1px solid rgba(37,34,28,.2); border-radius: calc(var(--card-w) * .075); box-shadow: 0 5px 11px rgba(4,21,19,.27); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
button.playing-card { cursor: pointer; }
.playing-card.face-up { color: var(--ink); background: linear-gradient(145deg, #fffaf0, var(--cream)); overflow: hidden; }
.playing-card.face-down { background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(239,215,164,.095) 7px 8px), radial-gradient(circle, #176159 0 11%, #0e3732 12% 38%, #092c29 39%); border-color: #d1bd91; }
.playing-card.face-down::after { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(218,199,157,.38); border-radius: 50%; }
.playing-card.face-up:hover { transform: translateY(-3px); box-shadow: 0 9px 16px rgba(4,21,19,.38); }
.playing-card.selected { transform: translateY(-7px); box-shadow: 0 0 0 3px #e5c57f, 0 10px 24px rgba(3,20,18,.5); z-index: 80 !important; }
.playing-card.hinted { animation: hint-pulse 1s ease 2; }
.playing-card.red { color: var(--red); }
.corner { position: absolute; top: 7%; left: 9%; display: grid; justify-items: center; font-family: var(--serif); line-height: .8; }
.corner strong { font-size: calc(var(--card-w) * .22); }
.corner span { font-size: calc(var(--card-w) * .2); }
.corner.bottom { inset: auto 9% 7% auto; transform: rotate(180deg); }
.center-suit { position: absolute; inset: 0; display: grid; place-items: center; font: calc(var(--card-w) * .48) var(--serif); opacity: .88; }

.game-footer { min-height: 54px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); }
.game-footer p { margin: 0; font-size: 9px; }
.mobile-copy { display: none; }
.progress { display: flex; align-items: center; gap: 10px; font: 8px var(--mono); letter-spacing: .08em; }
.progress-track { width: 110px; height: 2px; background: rgba(255,255,255,.12); }
.progress-track i { display: block; width: 0; height: 100%; background: var(--gold); transition: width .3s ease; }
.progress strong { min-width: 35px; color: #d0ddd8; font-weight: 400; }

.toast { position: fixed; z-index: 200; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 11px 16px; border: 1px solid rgba(235,219,180,.35); border-radius: 3px; background: #082b27; box-shadow: 0 16px 50px rgba(2,13,12,.6); color: #f4eddf; font-size: 10px; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal { width: min(650px, calc(100% - 28px)); padding: 30px; color: #f1ebdf; background: #0c332f; border: 1px solid rgba(217,183,115,.35); border-radius: 5px; box-shadow: 0 30px 90px #031311; }
.modal::backdrop { background: rgba(2,17,15,.82); backdrop-filter: blur(5px); }
.modal header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.modal header p, .win-modal > p { margin: 0; color: var(--gold); font: 8px var(--mono); letter-spacing: .18em; }
.modal h2 { margin: 4px 0 0; font: 600 28px var(--serif); }
.close { border: 0; background: transparent; color: #b8cac3; font-size: 27px; cursor: pointer; }
.rules-list { border-top: 1px solid var(--line); margin-bottom: 22px; }
.rules-list article { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.rules-list article > span { color: var(--gold); font: 9px var(--mono); }
.rules-list h3 { margin: 0 0 4px; font-size: 12px; }
.rules-list p { margin: 0; color: #a9bdb5; font-size: 10px; line-height: 1.5; }
.primary { border: 1px solid #dfc483; border-radius: 3px; background: var(--gold); color: #15231f; padding: 11px 15px; cursor: pointer; font: 700 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.win-modal { max-width: 430px; text-align: center; }
.win-mark { width: 72px; height: 72px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(217,183,115,.55); color: var(--gold); font: 36px var(--serif); box-shadow: 0 0 30px rgba(217,183,115,.12); }
.win-modal > span { display: block; margin-top: 8px; color: #a9bdb5; font-size: 11px; }
.final-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0; border-block: 1px solid var(--line); }
.final-stats div { padding: 16px 8px; }
.final-stats strong { display: block; font: 500 16px var(--mono); }
.final-stats small { color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }

@keyframes hint-pulse { 50% { box-shadow: 0 0 0 4px #e6c77f, 0 0 28px rgba(230,199,127,.55); transform: translateY(-5px); } }

@media (max-width: 900px) {
  :root { --card-w: clamp(70px, 11.6vw, 92px); }
  .shell { padding-inline: 14px; }
  .topbar { grid-template-columns: 1fr auto; }
  .title-block { display: none; }
  .game-board { padding-inline: 0; min-height: 630px; }
  .tableau-pile { min-height: 390px; }
  .scorebar p { display: none; }
}

@media (max-width: 650px) {
  :root { --card-w: clamp(43px, 12.3vw, 74px); --down-gap: 14px; --up-gap: 25px; }
  .shell { padding-inline: 8px; }
  .topbar { height: 62px; }
  .brand strong { font-size: 10px; }
  .brand small, .brand-mark, .top-actions button:not(.new-deal) { display: none; }
  .top-actions .new-deal { font-size: 8px; }
  .scorebar { min-height: 54px; gap: 18px; padding-inline: 4px; }
  .game-board { min-height: 570px; padding-top: 20px; }
  .upper-board { margin-bottom: 27px; }
  .pile-label { font-size: 6px; margin-bottom: 4px; }
  .stock-group, .foundation-group { gap: 5px; }
  .tableau { gap: 3px; }
  .tableau-pile { min-height: 360px; }
  .playing-card { border-radius: 4px; }
  .corner { top: 5px; left: 5px; }
  .corner.bottom { right: 5px; bottom: 5px; }
  .corner strong { font-size: 14px; }
  .corner span { font-size: 13px; }
  .center-suit { display: none; }
  .game-footer p { font-size: 7px; }
  .desktop-copy { display: none; }
  .mobile-copy { display: inline; }
  .progress span, .progress-track { display: none; }
  .modal { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}