*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --felt: #0d5c3d;
  --felt-deep: #084530;
  --cream: #f5f0e6;
  --ink: #0f172a;
  --red: #dc2626;
  --gold: #c9a227;
  /* Larger cards + roomier column gaps; tableau stays centered (no overlap) */
  --card-w: clamp(3.15rem, 9.2vw, 4.35rem);
  --card-h: clamp(4.4rem, 12.8vw, 6.1rem);
  --stack-y: clamp(1.15rem, 2.9vw, 1.5rem);
  --waste-x: clamp(0.9rem, 2.3vw, 1.25rem);
  --col-gap: clamp(0.55rem, 1.6vw, 0.95rem);
  --tableau-w: calc(7 * var(--card-w) + 6 * var(--col-gap));
}

html,
body {
  height: 100%;
  background: #061a12;
  color: var(--cream);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(18, 122, 82, 0.25), transparent 55%),
    #061a12;
}

#hud {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: max(0.5rem, env(safe-area-inset-top)) 0.75rem 0.35rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.hud-left {
  display: flex;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

.hud-block {
  display: flex;
  flex-direction: column;
  min-width: 3rem;
}

.label {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}

.hud-block span:last-child {
  font-size: 1rem;
  font-weight: 750;
}

.hud-center {
  flex: 1;
  text-align: center;
  min-width: 0;
  padding-top: 0.35rem;
}

.message {
  font-size: 0.82rem;
  font-weight: 650;
  color: #fef3c7;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.message.win {
  color: #4ade80;
}
.message.bad {
  color: #fca5a5;
}

.icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  text-decoration: none;
}

/* Table */
.table {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2.2vh, 1.35rem);
  padding: 0.45rem clamp(0.45rem, 1.5vw, 1rem) 3.6rem;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, #127a52 0%, var(--felt) 45%, var(--felt-deep) 100%);
  border-radius: 1rem 1rem 0 0;
  border: 6px solid #5c4030;
  border-bottom: none;
  box-shadow: inset 0 0 0 3px var(--gold);
  margin: 0 0.35rem;
  overflow: hidden;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
  flex-shrink: 0;
  width: min(100%, var(--tableau-w));
  margin: 0 auto 0.15rem;
  /* room for Stock/Waste/Aces labels under piles */
  padding-bottom: 1.05rem;
}

.stock-waste {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}

.foundations-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.foundations {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Sits under the first (leftmost) ace foundation only */
.aces-label {
  position: absolute;
  left: 0;
  bottom: -1.05rem;
  width: var(--card-w);
  text-align: center;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.45;
  font-weight: 650;
  pointer-events: none;
  white-space: nowrap;
}

.pile {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 0.4rem;
  border: 2px dashed rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.pile.stock {
  cursor: pointer;
  border-style: solid;
  border-color: rgba(251, 191, 36, 0.5);
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.2) 0 14%, transparent 15%),
    linear-gradient(135deg, transparent 47%, rgba(251, 191, 36, 0.3) 47% 53%, transparent 53%),
    linear-gradient(45deg, transparent 47%, rgba(251, 191, 36, 0.25) 47% 53%, transparent 53%),
    linear-gradient(160deg, #1e1b4b, #312e81 45%, #1e3a8a);
  box-shadow:
    inset 0 0 0 3px rgba(15, 23, 42, 0.45),
    inset 0 0 0 5px rgba(251, 191, 36, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.3);
}

.pile.stock.empty {
  background: rgba(0, 0, 0, 0.15);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

.pile.stock.empty::after {
  content: "↻";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
}

.pile.stock:not(.empty)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 26%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1.5px solid rgba(253, 224, 71, 0.8);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(120, 53, 15, 0.3));
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.45);
}

button.pile {
  font: inherit;
  color: inherit;
  padding: 0;
}

.pile-label {
  position: absolute;
  left: 50%;
  bottom: -1.05rem;
  transform: translateX(-50%);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
  white-space: nowrap;
  pointer-events: none;
}

.waste {
  width: calc(var(--card-w) + 2 * var(--waste-x));
  min-width: var(--card-w);
}

.foundation {
  position: relative;
}

.foundation::before {
  content: attr(data-suit);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  opacity: 0.22;
  pointer-events: none;
}

/* Tableau — tight 7-col cluster centered; never stretches full-window-wide */
.tableau {
  display: grid;
  grid-template-columns: repeat(7, var(--card-w));
  gap: var(--col-gap);
  width: var(--tableau-w);
  max-width: 100%;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  align-items: start;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0.5rem;
  overflow: auto;
  /* if window is narrower than tableau, allow horizontal scroll instead of overlap */
  overflow-x: auto;
  overflow-y: auto;
}

.column {
  position: relative;
  width: var(--card-w);
  min-height: var(--card-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.column-slot {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 0.4rem;
  border: 2px dashed rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.column-cards {
  position: relative;
  width: var(--card-w);
  min-height: var(--card-h);
  margin-top: calc(-1 * var(--card-h));
}

/* Cards */
.card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 0.38rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(0);
  transition: box-shadow 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.card:hover {
  filter: brightness(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.card:focus-visible {
  outline: 2px solid #fde68a;
  outline-offset: 2px;
}

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

/* Art deco card back */
.card.back {
  color: transparent;
  cursor: default;
  pointer-events: none;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.22) 0 12%, transparent 13% 100%),
    linear-gradient(135deg, transparent 46%, rgba(251, 191, 36, 0.35) 46% 54%, transparent 54%),
    linear-gradient(45deg, transparent 46%, rgba(251, 191, 36, 0.28) 46% 54%, transparent 54%),
    linear-gradient(160deg, #1e1b4b 0%, #312e81 40%, #1e3a8a 70%, #0f172a 100%);
  box-shadow:
    inset 0 0 0 3px rgba(15, 23, 42, 0.55),
    inset 0 0 0 5px rgba(251, 191, 36, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

/* Outer art-deco frame */
.card.back::before {
  content: "";
  position: absolute;
  inset: 0.28rem;
  border-radius: 0.22rem;
  border: 1.5px solid rgba(251, 191, 36, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(251, 191, 36, 0.2),
    0 0 0 1px rgba(15, 23, 42, 0.35);
  background:
    /* fan rays from center */
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(251, 191, 36, 0.12) 0deg 8deg,
      transparent 8deg 16deg
    );
  pointer-events: none;
}

/* Center diamond medallion + chevrons */
.card.back::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 28%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1.5px solid rgba(253, 224, 71, 0.85);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.45), rgba(120, 53, 15, 0.35) 55%, rgba(251, 191, 36, 0.25));
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.5),
    0 0 10px rgba(251, 191, 36, 0.35);
  pointer-events: none;
}

.card .corner {
  position: absolute;
  top: 0.22rem;
  left: 0.24rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 800;
  font-size: 0.82rem;
}

.card .corner .cs {
  font-size: 0.74rem;
  margin-top: 0.02rem;
}

.card .suit-lg {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-size: 1.55rem;
  line-height: 1;
}

.card .corner.bl {
  top: auto;
  left: auto;
  bottom: 0.2rem;
  right: 0.22rem;
  transform: rotate(180deg);
}

.card.movable:not(.back) {
  cursor: pointer;
}

/* Mid-stack: only the rank strip is the hit target (height set in JS) */
.card.peek {
  overflow: hidden;
}

.card.peek.movable:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.75), 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 30 !important;
}

.card.flash-ok {
  box-shadow: 0 0 0 2px #4ade80, 0 4px 14px rgba(74, 222, 128, 0.4);
}

.card.flash-bad {
  animation: shake 0.35s ease;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

/* Controls */
.controls {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.75rem max(0.7rem, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35));
  text-align: center;
}

.btn {
  min-width: 5.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.btn.primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: transparent;
  color: #1c1917;
}

.btn.ghost {
  background: transparent;
}

.btn .key-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fde68a;
}

.btn.primary .key-label {
  color: #1c1917;
}

.hint {
  width: 100%;
  font-size: 0.65rem;
  opacity: 0.4;
  margin-top: 0.15rem;
}

.version {
  width: 100%;
  margin-top: 0.15rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.4;
  color: #86efac;
}

/* Win */
.win-overlay {
  position: fixed;
  inset: var(--rg-bar) 0 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: rgba(6, 26, 18, 0.78);
  backdrop-filter: blur(4px);
}

.win-overlay[hidden] {
  display: none !important;
}

.win-title {
  font-size: clamp(2.4rem, 10vw, 3.8rem);
  font-weight: 900;
  color: #fde68a;
  text-shadow: 0 4px 0 #b45309, 0 8px 24px rgba(0, 0, 0, 0.4);
}

.win-sub {
  font-size: 1rem;
  opacity: 0.85;
}

/* ── House mascot (bottom of green felt) ───────────── */
.house-mascot {
  position: absolute;
  left: 0;
  bottom: 0.35rem;
  z-index: 8;
  width: 3.4rem;
  height: 3.4rem;
  pointer-events: none;
  will-change: transform;
}

.house-sq {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 0.5rem;
  background: linear-gradient(160deg, #c4b5fd, #7c3aed 55%, #5b21b6);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.5);
  display: grid;
  place-items: center;
  animation: house-bounce 0.55s ease-in-out infinite;
}

/* Keep bounce when flipped (direction walk) */
.house-mascot.flip .house-sq {
  animation-name: house-bounce-flip;
}

@keyframes house-bounce-flip {
  0%,
  100% {
    transform: scaleX(-1) translateY(0);
  }
  50% {
    transform: scaleX(-1) translateY(-7px);
  }
}

/* Speech bubble is NOT flipped — text always left-to-right */

@keyframes house-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.house-mascot .sq-face {
  position: relative;
  width: 1.65rem;
  height: 1.15rem;
}

.house-mascot .brow {
  position: absolute;
  top: -0.05rem;
  width: 0.42rem;
  height: 0.1rem;
  background: #0f172a;
  border-radius: 2px;
}

.house-mascot .brow.left {
  left: 0.12rem;
}
.house-mascot .brow.right {
  right: 0.12rem;
}

.house-mascot .eye {
  position: absolute;
  top: 0.14rem;
  width: 0.3rem;
  height: 0.3rem;
  background: #0f172a;
  border-radius: 50%;
}

.house-mascot .eye.left {
  left: 0.14rem;
}
.house-mascot .eye.right {
  right: 0.14rem;
}

.house-mascot .eye::after {
  content: "";
  position: absolute;
  top: 0.04rem;
  right: 0.04rem;
  width: 0.09rem;
  height: 0.09rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}

.house-mascot .mouth {
  position: absolute;
  left: 50%;
  bottom: 0.02rem;
  width: 0.65rem;
  height: 0.26rem;
  border-bottom: 2.5px solid #0f172a;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%);
}

.house-mascot .cheek {
  position: absolute;
  bottom: 0.25rem;
  width: 0.24rem;
  height: 0.15rem;
  border-radius: 50%;
  background: rgba(244, 114, 182, 0.55);
  opacity: 0.65;
}

.house-mascot .cheek.left {
  left: -0.04rem;
}
.house-mascot .cheek.right {
  right: -0.04rem;
}

.house-sq[data-mood="talk"] .mouth {
  width: 0.4rem;
  height: 0.35rem;
  border: 2.5px solid #0f172a;
  border-radius: 50%;
  border-bottom: 2.5px solid #0f172a;
  bottom: 0;
}

.house-sq[data-mood="wow"] .brow.left,
.house-sq[data-mood="wow"] .brow.right {
  top: -0.12rem;
}
.house-sq[data-mood="wow"] .eye {
  width: 0.38rem;
  height: 0.38rem;
  top: 0.08rem;
}

/* King move — proud squint + big grin */
.house-sq[data-mood="king"] .brow.left {
  transform: rotate(14deg);
  top: 0.02rem;
}
.house-sq[data-mood="king"] .brow.right {
  transform: rotate(-14deg);
  top: 0.02rem;
}
.house-sq[data-mood="king"] .eye {
  height: 0.12rem;
  border-radius: 2px;
  top: 0.26rem;
}
.house-sq[data-mood="king"] .eye::after {
  display: none;
}
.house-sq[data-mood="king"] .mouth {
  width: 0.95rem;
  height: 0.38rem;
  border-bottom: 3px solid #0f172a;
  bottom: -0.04rem;
}
.house-sq[data-mood="king"] .cheek {
  opacity: 0.9;
}

/* Ace move — sharp brows + smile */
.house-sq[data-mood="ace"] .brow.left {
  transform: rotate(-12deg);
  top: -0.1rem;
}
.house-sq[data-mood="ace"] .brow.right {
  transform: rotate(12deg);
  top: -0.1rem;
}
.house-sq[data-mood="ace"] .eye {
  width: 0.36rem;
  height: 0.36rem;
  top: 0.1rem;
}
.house-sq[data-mood="ace"] .mouth {
  width: 0.8rem;
  height: 0.32rem;
  border-bottom: 2.5px solid #0f172a;
}
.house-sq[data-mood="ace"] .cheek {
  opacity: 0.75;
}

/* Stock draw — big OOO face */
.house-sq[data-mood="ooo"] .brow.left,
.house-sq[data-mood="ooo"] .brow.right {
  top: -0.16rem;
}
.house-sq[data-mood="ooo"] .eye {
  width: 0.42rem;
  height: 0.42rem;
  top: 0.04rem;
  background: #fff;
  box-shadow: inset 0 0 0 0.1rem #0f172a;
}
.house-sq[data-mood="ooo"] .eye::after {
  top: 0.12rem;
  right: 0.1rem;
  width: 0.12rem;
  height: 0.12rem;
  background: #0f172a;
}
.house-sq[data-mood="ooo"] .mouth {
  width: 0.55rem;
  height: 0.52rem;
  border: 2.5px solid #0f172a;
  border-radius: 50%;
  border-bottom: 2.5px solid #0f172a;
  bottom: -0.12rem;
  background: rgba(15, 23, 42, 0.12);
}

.house-sq.react-pop {
  animation: house-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes house-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18) translateY(-4px);
  }
  100% {
    transform: scale(1);
  }
}

.house-mascot.flip .house-sq.react-pop {
  animation-name: house-pop-flip;
}

@keyframes house-pop-flip {
  0% {
    transform: scaleX(-1) scale(1);
  }
  40% {
    transform: scaleX(-1) scale(1.18) translateY(-4px);
  }
  100% {
    transform: scaleX(-1) scale(1);
  }
}

/* Speech bubble above mascot — stays clear of columns */
.house-mascot .speech-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.3rem);
  transform: translateX(-50%);
  z-index: 9;
  width: max-content;
  max-width: min(12rem, 42vw);
  padding: 0.4rem 0.55rem;
  border-radius: 0.7rem;
  background: linear-gradient(165deg, #fffbeb, #fef3c7 70%, #fde68a);
  color: #1c1917;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}

.house-mascot .speech-bubble[hidden] {
  display: none !important;
}

.house-mascot .speech-bubble.show {
  display: block !important;
  animation: bubble-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.house-mascot .speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.28rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  background: #fef3c7;
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  transform: rotate(45deg);
}

@keyframes bubble-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.7) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

@media (max-width: 520px) {
  :root {
    /* Fit 7 columns on phone without forced H-scroll */
    --card-w: clamp(2.35rem, 11.5vw, 3.4rem);
    --card-h: clamp(3.3rem, 16vw, 4.75rem);
    --stack-y: clamp(0.95rem, 3.2vw, 1.25rem);
    --waste-x: clamp(0.7rem, 2.4vw, 1rem);
    --col-gap: clamp(0.28rem, 1.2vw, 0.55rem);
  }

  .pile-label {
    font-size: 0.52rem;
    bottom: -0.95rem;
  }

  .aces-label {
    font-size: 0.52rem;
    bottom: -0.95rem;
  }

  .top-row {
    padding-bottom: 1.05rem;
  }

  .table {
    margin: 0 0.1rem;
    border-width: 4px;
    padding-bottom: 3.2rem;
    gap: 0.75rem;
  }

  .house-mascot {
    width: 2.8rem;
    height: 2.8rem;
  }

  .house-sq {
    width: 2.55rem;
    height: 2.55rem;
  }

  #hud {
    padding: max(0.35rem, env(safe-area-inset-top)) 0.45rem 0.25rem;
  }

  .hud-block span:last-child {
    font-size: 0.9rem;
  }
}

@media (max-width: 380px) {
  :root {
    --card-w: clamp(2.15rem, 12vw, 2.9rem);
    --card-h: clamp(3rem, 16.5vw, 4.1rem);
    --col-gap: 0.22rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card.flash-bad,
  .house-sq,
  .house-mascot .speech-bubble.show {
    animation: none;
  }
}