:root {
  color-scheme: light;
  --felt: #18563d;
  --felt-dark: #103d2c;
  --felt-light: #216d4e;
  --cream: #f7f1e5;
  --ink: #19201d;
  --red: #b92f3d;
  --gold: #e8c46b;
  --card-width: clamp(40px, 12.5vw, 150px);
  --card-height: calc(var(--card-width) * 1.4);
  --corner-font-size: clamp(0.78rem, calc(var(--card-width) * 0.2), 1.9rem);
  --topbar-height: 64px;
  --topbar-inline: clamp(12px, 3vw, 28px);
  --menu-button-size: 42px;
  --menu-drawer-inline: 18px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  overscroll-behavior-y: none;
}

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  color: white;
  background:
    radial-gradient(circle at 50% -10%, var(--felt-light), transparent 52%),
    var(--felt);
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.topbar {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  min-height: var(--topbar-height);
  padding: 8px var(--topbar-inline);
  background: rgb(8 37 26 / 58%);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 2px 15px rgb(0 0 0 / 15%);
}

h1 {
  position: absolute;
  left: 50%;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 4vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  text-align: center;
  transform: translateX(-50%);
}

.icon-button {
  display: grid;
  width: var(--menu-button-size);
  height: var(--menu-button-size);
  padding: 0;
  color: white;
  font-size: 1.65rem;
  line-height: 1;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.icon-button:hover {
  background: rgb(255 255 255 / 10%);
}

.menu-glyph {
  position: relative;
  display: block;
  width: 21px;
  height: 14px;
}

.menu-glyph i {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.menu-glyph i:nth-child(1) {
  top: 0;
}

.menu-glyph i:nth-child(2) {
  top: 6px;
}

.menu-glyph i:nth-child(3) {
  top: 12px;
}

.icon-button.dark {
  color: var(--ink);
}

.icon-button.dark:hover {
  background: rgb(0 0 0 / 7%);
}

.score {
  display: flex;
  align-items: baseline;
  justify-self: end;
  gap: 5px;
  min-height: 36px;
  padding: 6px 12px;
  color: rgb(255 255 255 / 70%);
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
}

.score > span:first-child {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.score strong {
  color: white;
  font-size: 1.08rem;
  line-height: 1;
}

main {
  display: grid;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 28px);
  gap: 0;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "deck foundations"
    "play play"
    "status status"
    "newgame newgame";
  align-items: start;
}

main[data-deck-position="upper-right"] {
  grid-template-areas:
    "foundations deck"
    "play play"
    "status status"
    "newgame newgame";
}

main[data-deck-position="lower-left"] {
  grid-template-areas:
    ". foundations"
    "play play"
    "status status"
    "deck ."
    "newgame newgame";
}

main[data-deck-position="lower-right"] {
  grid-template-areas:
    ". foundations"
    "play play"
    "status status"
    ". deck"
    "newgame newgame";
}

.pile-group {
  grid-area: deck;
  justify-self: start;
}

main[data-deck-position="upper-right"] .pile-group,
main[data-deck-position="lower-right"] .pile-group {
  justify-self: end;
  flex-direction: row-reverse;
}

.foundation-zone {
  grid-area: foundations;
  justify-self: end;
  padding: 12px;
  margin: -12px;
}

main[data-deck-position="upper-right"] .foundation-zone {
  justify-self: start;
}

.pile-group,
.foundations {
  display: flex;
  gap: clamp(7px, 1.5vw, 14px);
}

.pile-label {
  display: block;
  min-height: 20px;
  margin-bottom: 5px;
  color: rgb(255 255 255 / 68%);
  font-size: clamp(0.65rem, 1.8vw, 0.78rem);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.card-slot,
.playing-card {
  position: relative;
  display: block;
  width: var(--card-width);
  height: var(--card-height);
  padding: 0;
  border-radius: clamp(5px, 1.2vw, 9px);
}

.card-slot {
  /* No border on the slot itself — a bordered box shrinks the content area and
     top-left-pins the card, so a shorter ghost shares the top edge and leaves a
     gap at the bottom. Helper chrome lives on an explicitly centered ::before. */
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.card-slot::before {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--card-width) - 6px);
  height: calc(var(--card-height) - 6px);
  content: "";
  background: rgb(0 0 0 / 9%);
  border: 2px solid rgb(255 255 255 / 20%);
  border-radius: clamp(4px, 1.1vw, 8px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.card-slot:has(> .playing-card)::before,
.card-slot.card-back::before {
  content: none;
}

.card-slot > .playing-card {
  /* Full-size card, same box as the slot — shares the ghost's centerline. */
  position: relative;
  z-index: 1;
}

.card-slot.empty-foundation::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: attr(data-suit);
  color: rgb(255 255 255 / 18%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--card-width) * 0.58);
  font-weight: 700;
  line-height: 1;
}

.foundation-start-rank {
  position: absolute;
  /* Ghost outline is inset ~3px; keep a little left padding from that frame,
     but sit high enough that tall ranks (Q) clear the suit watermark. */
  top: calc(7% + 2px);
  left: calc(10% + 5px);
  color: rgb(255 255 255 / 18%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--corner-font-size);
  font-weight: 700;
  line-height: 1;
}

.playing-card {
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(145deg, #fff 0%, var(--cream) 100%);
  border: 1px solid rgb(0 0 0 / 18%);
  box-shadow: 0 3px 7px rgb(0 0 0 / 24%);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.playing-card.red {
  color: var(--red);
}

.playing-card .corner {
  position: absolute;
  top: 7%;
  left: 10%;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.12em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--corner-font-size);
  font-weight: 700;
  line-height: 1;
}

.playing-card .suit-large {
  position: absolute;
  right: 9%;
  bottom: 3%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--card-width) * 0.58);
  line-height: 1;
}

.card-back {
  background-color: #173e78;
  background-image:
    linear-gradient(30deg, #315b98 12%, transparent 12.5%, transparent 87%, #315b98 87.5%),
    linear-gradient(150deg, #315b98 12%, transparent 12.5%, transparent 87%, #315b98 87.5%),
    linear-gradient(30deg, #315b98 12%, transparent 12.5%, transparent 87%, #315b98 87.5%),
    linear-gradient(150deg, #315b98 12%, transparent 12.5%, transparent 87%, #315b98 87.5%);
  background-position:
    0 0,
    0 0,
    12px 21px,
    12px 21px;
  background-size: 24px 42px;
  border: 4px solid #f3e9d5;
  box-shadow:
    inset 0 0 0 2px #173e78,
    0 3px 7px rgb(0 0 0 / 24%);
}

.selected {
  outline: 4px solid var(--gold);
  outline-offset: 2px;
  transform: translateY(-4px);
}

.stock-count,
.pile-count {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 2;
  min-width: 22px;
  padding: 2px 5px;
  color: white;
  font-size: clamp(0.69rem, calc(var(--card-width) * 0.09), 0.9rem);
  font-weight: 700;
  background: rgb(0 0 0 / 64%);
  border-radius: 10px;
}

#waste .pile-count {
  bottom: 5px;
  cursor: zoom-in;
}

.play-area {
  position: relative;
  grid-area: play;
  margin-top: clamp(30px, 6vw, 60px);
}

.tableau {
  display: grid;
  grid-template-columns:
    repeat(3, var(--card-width))
    minmax(calc(var(--card-width) * 1.18), 1fr)
    repeat(3, var(--card-width));
  justify-content: space-between;
  gap: clamp(2px, 0.6vw, 8px);
  min-height: calc(var(--card-height) * 2.15);
}

.tableau-pile:nth-child(4) {
  grid-column: 5;
}

.tableau-pile:nth-child(5) {
  grid-column: 6;
}

.tableau-pile:nth-child(6) {
  grid-column: 7;
}

.tableau-pile {
  position: relative;
  min-width: var(--card-width);
  height: calc(var(--card-height) * 2.15);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  touch-action: none;
}

.tableau-pile::before {
  /* Pseudos are content-box by default (* does not match them), so without
     border-box a 2px border grew 4px past the card. Inset further so the
     dashed helper never peeks from under an occupied stack. */
  box-sizing: border-box;
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--card-width) - 4px);
  height: calc(var(--card-height) - 4px);
  content: "";
  background: rgb(0 0 0 / 9%);
  border: 2px dashed rgb(255 255 255 / 18%);
  border-radius: clamp(4px, 1.1vw, 8px);
}

.tableau-pile .playing-card {
  position: absolute;
  left: 0;
  pointer-events: auto;
}

.tableau-pile.selected {
  outline: 0;
  transform: none;
}

.tableau-pile.selected .playing-card {
  box-shadow:
    0 0 0 4px var(--gold),
    0 5px 10px rgb(0 0 0 / 30%);
}

.side-pile-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 20;
  overflow: visible;
  transform: translateX(-50%);
}

.reserve {
  overflow: visible;
  transform: rotate(90deg) scale(0.84);
}

.reserve .playing-card {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--card-width);
  height: var(--card-height);
}

.reserve .reserve-under-card {
  pointer-events: none;
}

/* Loss reveal: custom downward fan for the rotated sideways stack. */
.reserve.reserve--revealed .playing-card {
  top: 0;
  left: 0;
  /* translateX is local; after the 90° parent rotate it reads as downward. */
  transform: translateX(var(--reserve-fan-offset, 0px));
}

.reserve .pile-count {
  /* Local bottom-left → visual upper-left after the 90° reserve rotation. */
  top: auto;
  right: auto;
  bottom: 9px;
  left: 6px;
  z-index: 2;
  transform: rotate(-90deg);
}

.reserve.selected {
  transform: rotate(90deg) scale(0.84) translateX(-4px);
}

.drag-origin {
  opacity: 0.48;
}

/* Single card peeled off a multi-card stack ("top of stack", pile[last]): the
   card itself stays 100% normal and opaque, with a flat felt-colored veil on
   top. The math works out identical to real 0.48 transparency
   (0.48 x card + 0.52 x felt) — but since the card is opaque, cards above it
   can't ghost through, only the veil's flat felt tint shows. Lone cards and
   whole stacks keep the real transparency via generic .drag-origin (JS only
   puts this class on the card when the pile holds more than one card). */
.tableau-pile > .playing-card.drag-origin {
  opacity: 1 !important;
  box-shadow: none;
  /* Pre-tinted sage border all around (same blend as the veiled face, so no
     seam): opaque, so the white cards stacked behind can't peek through as
     slivers in the overlap bands. No geometry changes — the card never moves,
     so nothing wiggles when the drag starts or ends. */
  border-color: #93b0a1;
  border-color: color-mix(in srgb, #ffffff 48%, var(--felt));
}

.tableau-pile > .playing-card.drag-origin::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: rgb(24 86 61 / 0.52);
  background: color-mix(in srgb, transparent 48%, var(--felt));
  pointer-events: none;
}

.drag-ghost,
.drag-ghost * {
  /* Parent none is not enough: .tableau-pile .playing-card sets auto, so
     elementFromPoint would hit the ghost stack and treat the drop as same-pile. */
  pointer-events: none !important;
}

.drag-ghost {
  position: fixed !important;
  z-index: 10000 !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: drop-shadow(0 12px 12px rgb(0 0 0 / 30%));
}

body.dragging,
body.dragging * {
  cursor: grabbing !important;
}

.status {
  grid-area: status;
  min-height: 22px;
  margin: 16px 0 0;
  color: rgb(255 255 255 / 76%);
  font-size: 0.83rem;
  text-align: center;
}

main[data-deck-position="lower-left"] .pile-group,
main[data-deck-position="lower-right"] .pile-group {
  margin-top: 18px;
}

.board-new-game.primary-button {
  display: block;
  grid-area: newgame;
  min-width: 150px;
  margin: 18px auto 0;
  color: #fff !important;
  background: #315b98 !important;
  border: 1px solid #173e78 !important;
  box-shadow: 0 6px 16px rgb(0 0 0 / 32%);
}

.board-new-game.primary-button:hover {
  background: #173e78 !important;
}

.board-new-game[hidden] {
  display: none;
}

.build-info {
  position: fixed;
  right: 10px;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 50;
  color: rgb(255 255 255 / 38%);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.build-info:focus-visible {
  color: rgb(255 255 255 / 70%);
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgb(4 24 17 / 55%);
  backdrop-filter: blur(2px);
  border: 0;
  cursor: pointer;
}

.menu-backdrop[hidden] {
  display: none;
}

.menu-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 850;
  display: flex;
  flex-direction: column;
  width: min(320px, calc(100% - 48px));
  padding: 0 var(--menu-drawer-inline) max(22px, env(safe-area-inset-bottom));
  color: var(--ink);
  background: #fffdf8;
  box-shadow: 8px 0 40px rgb(0 0 0 / 28%);
  transform: translateX(-105%);
  visibility: hidden;
  transition:
    transform 220ms ease,
    visibility 220ms ease;
}

.menu-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.menu-actions {
  display: grid;
  gap: 9px;
}

.menu-actions button,
.menu-actions .menu-link,
.result-actions button,
.primary-button {
  min-height: 46px;
  padding: 10px 16px;
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  background: #f1ecdf;
  border: 1px solid #ddd5c4;
  border-radius: 9px;
  cursor: pointer;
}

.menu-actions button:hover,
.menu-actions .menu-link:hover,
.result-actions button:hover {
  background: #e9e1d2;
}

.menu-actions .menu-link {
  display: grid;
  place-items: center;
}

.menu-divider {
  width: 40%;
  height: 1px;
  margin: 10px auto;
  background: rgb(0 0 0 / 14%);
}

dialog {
  width: min(calc(100% - 32px), 430px);
  padding: 22px;
  color: var(--ink);
  background: #fffdf8;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgb(0 0 0 / 38%);
}

dialog::backdrop {
  background: rgb(4 24 17 / 72%);
  backdrop-filter: blur(3px);
}

.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.menu-drawer .dialog-heading {
  min-height: var(--topbar-height);
  margin-bottom: 12px;
  /* Sit beside the close button (aligned to the hamburger). */
  padding-left: calc(var(--topbar-inline) + var(--menu-button-size) - var(--menu-drawer-inline));
  justify-content: flex-start;
}

.menu-drawer #close-menu {
  position: absolute;
  top: calc((var(--topbar-height) - var(--menu-button-size)) / 2);
  left: var(--topbar-inline);
}

.dialog-heading h2,
.result-dialog h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
}

.primary-button {
  color: white !important;
  background: var(--felt) !important;
  border-color: var(--felt-dark) !important;
}

.rules-copy {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  line-height: 1.52;
}

.rules-copy p:first-child {
  margin-top: 0;
}

.option-group {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.option-group legend {
  margin-bottom: 12px;
  padding: 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.option-choices {
  display: grid;
  gap: 8px;
}

.option-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 14px;
  background: #f1ecdf;
  border: 1px solid #ddd5c4;
  border-radius: 9px;
  cursor: pointer;
}

.option-choice:hover {
  background: #e9e1d2;
}

.option-choice:has(:checked) {
  background: #e4dbd0;
  border-color: #c9bea6;
}

.option-choice:has(:checked):hover {
  background: #ddd4c6;
}

.option-choice input {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--felt);
  flex-shrink: 0;
}

.option-choice span {
  font-weight: 650;
}

#options-done {
  width: 100%;
}

.rules-dialog > .primary-button {
  width: 100%;
  margin-top: 8px;
}

.waste-preview {
  position: fixed;
  inset: 0;
  z-index: 900;
  color: white;
  background: rgb(8 48 34 / 22%);
  backdrop-filter: blur(2px);
  cursor: zoom-out;
}

.waste-preview[hidden] {
  display: none;
}

.waste-cards {
  --waste-overlap: max(calc(var(--card-width) * 0.4), 21px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: var(--waste-top);
  left: var(--waste-left);
  width: calc(var(--card-width) + 18px);
  max-height: calc(100svh - var(--waste-top) - 12px);
  padding: 0 18px 12px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.waste-card-wrap {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-width);
  height: var(--waste-overlap);
  animation: waste-card-deal var(--waste-duration, 190ms) ease-out both;
  animation-delay: var(--waste-delay, 0ms);
}

.waste-card-wrap:last-child {
  height: var(--card-height);
}

.waste-history-card.playing-card {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--card-width);
  max-width: none;
  height: var(--card-height);
  cursor: default;
  touch-action: pan-y;
}

.waste-preview-hint {
  position: absolute;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 0;
  color: rgb(255 255 255 / 70%);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-align: center;
}

@keyframes waste-card-deal {
  from {
    opacity: 0;
    transform: translateY(var(--waste-entry-offset, -14px)) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.result-dialog {
  text-align: center;
}

.result-symbol {
  margin-bottom: 6px;
  font-size: 3rem;
}

.result-dialog p {
  color: #4f5753;
  line-height: 1.45;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 620px) {
  main {
    padding-inline: 9px;
  }

  .foundations,
  .pile-group {
    gap: 4px;
  }

  .tableau {
    gap: 2px;
  }

  .playing-card .corner {
    top: 6%;
    left: 8%;
    gap: 0.06em;
    font-size: min(calc(var(--card-width) * 0.42), 2rem);
    white-space: nowrap;
  }

  .foundation-start-rank {
    top: calc(6% + 2px);
    left: calc(8% + 4px);
    font-size: min(calc(var(--card-width) * 0.42), 2rem);
  }

  .waste-card-wrap {
    --waste-overlap: max(calc(var(--card-width) * 0.62), 25px);
  }

}

@media (max-width: 410px) {
  :root {
    --topbar-inline: 8px;
  }

  .topbar {
    padding-inline: var(--topbar-inline);
  }

  .score {
    min-height: 34px;
    padding-inline: 10px;
  }

  .score > span:first-child {
    display: inline;
  }

  h1 {
    font-size: 1.15rem;
  }

  .pile-label {
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .playing-card,
  .card-slot,
  dialog {
    transition:
      transform 140ms ease,
      box-shadow 140ms ease,
      opacity 140ms ease;
  }

  dialog[open] {
    animation: appear 160ms ease-out;
  }

  @keyframes appear {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-drawer {
    transition: none;
  }
}