/* ===== RESET & BASE ===== */
html {
  overflow-x: hidden; /* MUST be on html, not just body, to stop viewport scroll on Android */
  width: 100%;
}
html, body {
  height: 100%;
  min-height: 100%;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* App shell — explicit containment prevents any child from bleeding the viewport */
#app {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

:root {
  --green:        #1b6e38;   /* MD3 primary — casino felt green */
  --green-dark:   #0f4a24;   /* MD3 primary container dark — app bar  */
  --green-light:  #2d9654;   /* hover / accent green */

  /* MD3 elevation shadows */
  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --elev-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.30);

  /* ── Exact-fill card sizing ─────────────────────────────────────────
     v5 — formula + overflow containment rewrite
     7w + 6×gap + 2×buffer = usable-width
     We subtract 56px (vs the exact 48) to add an 8px safety margin
     against Android Chrome's 100vw/scrollbar-width discrepancy and
     sub-pixel rounding across 7 flex items with flex-shrink:0.      */
  --col-gap:      4px;   /* column gap used in the fill formula above */
  --mobile-buffer: 12px; /* side padding on touch/mobile (≤ 768px)   */
  --card-w:       clamp(24px, calc((100vw - 56px) / 7), 80px);
  --card-h:       calc(var(--card-w) * 1.4);
  --card-radius:  clamp(4px, calc(var(--card-w) * 0.1), 8px);
  --card-offset:  clamp(8px, calc(var(--card-w) * 0.22), 28px);   /* face-down stack offset */
  --card-fan:     clamp(7px, calc(var(--card-w) * 0.275), 22px);  /* face-up fan offset */

  --red:          #b3261e;   /* MD3 error red */
  --black:        #1c1b1f;   /* MD3 on-surface */
  --gold:         #ffd700;
  --shadow:       var(--elev-2);
  --transition:   .15s cubic-bezier(.2,0,0,1); /* MD3 standard easing */
}

/* (landscape MQ moved to bottom of file so all compaction rules
   win the cascade over base element styles — see end of file)    */

body {
  /* ── Card-table felt ─────────────────────────────────────────────────
     Original casino-green colour preserved; woven fabric texture applied
     via two offset diagonal repeating gradients (cross-hatch = cloth grain). */
  background-color: var(--green);
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent            0px,
      transparent            2px,
      rgba(0,0,0,.07)        2px,
      rgba(0,0,0,.07)        3px
    ),
    repeating-linear-gradient(
       45deg,
      transparent            0px,
      transparent            2px,
      rgba(255,255,255,.035) 2px,
      rgba(255,255,255,.035) 3px
    );
  background-size: 6px 6px, 6px 6px;
  background-attachment: fixed, fixed;
  font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  color: #fff;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== TOP BAR — MD3 Top App Bar ===== */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--green-dark);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* Safe-area top/sides for notched phones; fallback 0px for non-iOS browsers */
  padding: max(12px, env(safe-area-inset-top, 0px))
           max(16px, env(safe-area-inset-right, 0px))
           12px
           max(16px, env(safe-area-inset-left, 0px));
  box-shadow: var(--elev-2);
  /* Subtle border bottom to define the surface */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#game-title {
  font-size: 1.375rem;   /* MD3 title-large */
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

#topbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  #topbar-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
  }
  #topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Preserve safe-area-insets at narrow widths */
    padding: max(12px, env(safe-area-inset-top, 0px))
             max(4px, env(safe-area-inset-right, 0px))
             12px
             max(4px, env(safe-area-inset-left, 0px));
  }
  #game-title {
    text-align: center;
    margin-bottom: 4px;
  }
  #topbar-controls button,
  #topbar-controls select {
    width: 100%;
    height: 44px;      /* slightly taller on mobile for touch targets (MD3 min 48dp) */
    font-size: 1rem;
    margin: 0;
  }
  body {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  #board {
    min-height: 0;
    overflow-x: visible;
    overflow-y: auto;
  }
  #tableau-area {
    overflow-x: visible;
    overflow-y: visible;
  }
  .pile.tableau {
    min-height: calc(var(--card-h) + var(--card-fan) * 7);
  }
}

#topbar-controls button,
#topbar-controls select {
  padding: 0 16px;
  height: 36px;
  border-radius: 18px;   /* MD3 full-rounded pill */
  border: none;
  font-family: inherit;
  font-size: .875rem;    /* MD3 label-large */
  font-weight: 500;
  letter-spacing: .1px;
  cursor: pointer;
  transition: box-shadow var(--transition), background-color var(--transition), transform .1s cubic-bezier(.2,0,0,1);
  position: relative;
  overflow: hidden;
}

/* MD3 state layer — press ripple via ::after overlay */
#topbar-controls button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background .15s;
  pointer-events: none;
  border-radius: inherit;
}
#topbar-controls button:hover::after  { background: rgba(255,255,255,.08); }
#topbar-controls button:active::after { background: rgba(255,255,255,.16); }

#btn-new-game      { background: #c62828; color: #fff; box-shadow: var(--elev-1); }
#btn-new-game:hover{ background: #d32f2f; box-shadow: var(--elev-2); }

#btn-undo, #btn-redo { background: #1565c0; color: #fff; box-shadow: var(--elev-1); }
#btn-undo:hover, #btn-redo:hover { background: #1976d2; box-shadow: var(--elev-2); }

#btn-hint          { background: #e65100; color: #fff; box-shadow: var(--elev-1); }
#btn-hint:hover    { background: #f57c00; box-shadow: var(--elev-2); }

#btn-autocomplete  { background: #6a1b9a; color: #fff; box-shadow: var(--elev-1); }
#btn-autocomplete:hover { background: #7b1fa2; box-shadow: var(--elev-2); }

button:disabled    { opacity: .38; cursor: not-allowed; box-shadow: none; transform: none !important; }

#topbar-controls #difficulty-selector {
  /* Remove native arrow so we can place our own, pixel-perfect */
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255,255,255,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,.8)' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.38);
  border-radius: 18px;
  /* right padding reserves space for the chevron so text never overlaps it */
  padding: 0 30px 0 12px;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
#topbar-controls #difficulty-selector:hover {
  background-color: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
}
#difficulty-selector option { background: #0f4a24; color: #fff; }

/* ===== STATS PANEL — MD3 Surface variant ===== */
#stats-panel {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 5vw, 32px);
  padding: 8px clamp(8px, 2vw, 16px);
  background: rgba(0,0,0,.28);
  font-size: .875rem;   /* MD3 label-large */
  letter-spacing: .1px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.stat-item {
  display: flex;
  gap: 6px;
  align-items: center;
  background: rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 4px 12px;
}
.stat-label { opacity: .8; font-weight: 400; }
.stat-item span:last-child { font-weight: 700; font-size: .95rem; color: var(--gold); }

/* ===== BOARD ===== */
#board {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 8px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  min-height: 0;
  flex: 1 0 auto;
  box-sizing: border-box;
  /* overflow-x: visible so card box-shadows / border-radii are never clipped.
     html, body and #app all carry overflow-x: hidden — page cannot scroll. */
  overflow-x: visible;
}

/* Mobile buffer (12px) + safe-area-insets for notched/home-bar phones */
@media (max-width: 768px) {
  #board {
    padding-left: max(var(--mobile-buffer), env(safe-area-inset-left, 0px));
    padding-right: max(var(--mobile-buffer), env(safe-area-inset-right, 0px));
    padding-top: var(--mobile-buffer);
    padding-bottom: max(var(--mobile-buffer), env(safe-area-inset-bottom, 0px));
  }
}

#board-top {
  display: flex;
  /* space-between with 7 direct children (stock, waste, spacer, f0–f3)
     gives identical gap distribution as #tableau-area — columns align exactly */
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: calc(7 * var(--card-w) + 6 * var(--col-gap));
  margin: 0 auto;
  box-sizing: border-box;
}

/* #stock-area and #foundation-area wrapper divs removed — piles are now
   direct children of #board-top so layout matches tableau exactly. */

/* Empty column 2 placeholder — same width as a card pile */
.col-spacer {
  width: var(--card-w);
  min-height: var(--card-h);
  flex-shrink: 0;
  pointer-events: none;
}

#tableau-area {
  display: flex;
  gap: var(--col-gap);
  align-items: flex-start;
  width: 100%;
  max-width: calc(7 * var(--card-w) + 6 * var(--col-gap));
  margin: 0 auto;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Mobile: allow layout to use full available width — no desktop constraint */
@media (max-width: 768px) {
  #board-top,
  #tableau-area {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow-x: visible;
  }
}

/* ── Desktop / large screen ─────────────────────────────────────────────────
   min-height: 501px excludes compact landscape phones (max-height: 500px),
   which are handled by the landscape MQ at the bottom of this file.

   The layout is now space-between + overflow:visible everywhere, so the
   120px cap no longer causes a green bar or shadow clipping.             */
@media (min-width: 769px) and (min-height: 501px) {
  :root {
    --card-w: clamp(80px, calc((100vw - 80px) / 7), 120px);
  }
  #board-top,
  #tableau-area {
    max-width: calc(7 * var(--card-w) + 6 * var(--col-gap));
    overflow: visible;
  }
}

/* Very narrow screens: fluid vars handle sizing; just enforce pile width to card width */
@media (max-width: 430px) {
  .pile {
    min-width: var(--card-w);
    width: var(--card-w);
    max-width: var(--card-w);
  }
}

/* ===== PILE CONTAINERS — MD3 Outlined Card ===== */
.pile {
  width: var(--card-w);
  max-width: var(--card-w);
  min-height: var(--card-h);
  border-radius: var(--card-radius);
  border: 1.5px solid rgba(255,255,255,.22);
  position: relative;
  background: rgba(0,0,0,.15);
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color var(--transition), background var(--transition);
}

.pile.foundation {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, calc(var(--card-w) * 0.45), 1.8rem);
  opacity: .35;
  transition: opacity var(--transition);
}
.pile.foundation.has-cards { opacity: 1; }

/* Suit-symbol placeholder shown on empty foundation piles */
.pile.foundation::before {
  font-size: clamp(1.4rem, calc(var(--card-w) * 0.52), 2.6rem);
  line-height: 1;
  pointer-events: none;
}
.pile.foundation[data-suit="0"]::before { content: '♥'; color: rgba(220, 80, 60, .75); }
.pile.foundation[data-suit="1"]::before { content: '♦'; color: rgba(220, 80, 60, .75); }
.pile.foundation[data-suit="2"]::before { content: '♣'; color: rgba(255, 255, 255, .55); }
.pile.foundation[data-suit="3"]::before { content: '♠'; color: rgba(255, 255, 255, .55); }
/* Hide placeholder once cards are present (the top card shows instead) */
.pile.foundation.has-cards::before { display: none; }

.pile.stock { cursor: pointer; }
.pile.stock:empty::after {
  content: '🔄';
  font-size: clamp(.9rem, calc(var(--card-w) * 0.4), 1.6rem);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .5;
}

.pile.tableau { min-height: calc(var(--card-h) + var(--card-fan) * 12); }

/* ===== CARDS — MD3 Elevated Card ===== */
.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-radius);
  border: none;
  box-shadow: var(--elev-1);
  position: absolute;
  cursor: pointer;
  user-select: none;
  overflow: hidden; /* hard clip — no content ever bleeds outside the card rect */
  transition: transform .2s cubic-bezier(.2,0,0,1), box-shadow .2s cubic-bezier(.2,0,0,1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2px, calc(var(--card-w) * 0.05), 4px);
  font-weight: 700;
}

/* face-down card back — deep navy with gold medallion centre + diamond lattice */
.card.face-down {
  background: linear-gradient(145deg, #0a116e 0%, #1a3a99 35%, #1565c0 65%, #0a3080 100%);
  cursor: default;
}
.card.face-down::after {
  content: '';
  display: block;
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--card-radius) - 1px);
  /* Bold gold inner frame */
  border: 2px solid rgba(255, 215, 0, .65);
  background:
    /* Central golden glow — mimics a foil medallion */
    radial-gradient(ellipse 48% 62% at center,
      rgba(255, 215, 0, .30) 0%,
      rgba(255, 215, 0, .10) 50%,
      transparent 75%
    ),
    /* Corner vignette — depth at the edges */
    radial-gradient(ellipse 110% 120% at center,
      transparent 38%,
      rgba(0, 0, 30, .22) 100%
    ),
    /* Diamond cross-hatch lattice */
    repeating-linear-gradient(
       45deg,
      rgba(255,215,0,.14) 0px,
      rgba(255,215,0,.14) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,215,0,.14) 0px,
      rgba(255,215,0,.14) 1px,
      transparent 1px,
      transparent 6px
    );
}

/* face-up card — warm premium paper with clearly visible depth */
.card.face-up {
  background: linear-gradient(165deg, #ffffff 0%, #f0e6cc 100%);
  cursor: grab;
  touch-action: none;
  box-shadow: var(--elev-2);
}
/* Thin suit-coloured inner border on regular face-up cards */
.card.face-up.red   { color: #c0392b; box-shadow: var(--elev-2), inset 0 0 0 1.5px rgba(192, 57, 43, .28); }
.card.face-up.black { color: #16213e; box-shadow: var(--elev-2), inset 0 0 0 1.5px rgba(22,  33, 62, .22); }

/* ── Face cards (J, Q, K) — premium double-frame treatment ──────────────── */
/* Same warm-ivory background as all face-up cards — only the double border
   distinguishes them. suit-coloured outer band → white gap → content       */
.card.face-card.red {
  box-shadow: var(--elev-2),
              inset 0 0 0 1.5px rgba(192, 57, 43, .55),   /* suit colour band */
              inset 0 0 0 4px   rgba(255, 255, 255, .88); /* white gap inside  */
}
.card.face-card.black {
  box-shadow: var(--elev-2),
              inset 0 0 0 1.5px rgba(22, 33, 62, .50),
              inset 0 0 0 4px   rgba(255, 255, 255, .88);
}

/* Face-card centre: large bold letter + small suit symbol stacked */
.card-center.face-center {
  flex-direction: column;
  gap: 1px;
}
.face-figure {
  font-size: clamp(2rem, calc(var(--card-w) * 0.65), 4rem);
  font-weight: 900;
  line-height: 1;
  display: block;
}
.face-suit-mini {
  font-size: clamp(0.75rem, calc(var(--card-w) * 0.28), 1.6rem);
  display: block;
  line-height: 1;
}
/* Hide the bottom-corner label on face cards — the rotated rank+suit
   reads as a visual "reflection" of the large centre figure           */
.card.face-card .card-corner-bottom { display: none; }

/* Ace — slightly larger centre suit symbol so it reads bold and regal */
.card.ace-card .card-center {
  font-size: clamp(1.8rem, calc(var(--card-w) * 0.62), 3.4rem);
}

.card-corner { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.card-corner .rank { font-size: clamp(0.55rem, calc(var(--card-w) * 0.145), 1.05rem); font-weight: 800; letter-spacing: -.5px; }
.card-corner .suit { font-size: clamp(0.48rem, calc(var(--card-w) * 0.125), 0.9rem); }
.card-corner-bottom { transform: rotate(180deg); }

.card-center { font-size: clamp(1.2rem, calc(var(--card-w) * 0.48), 2.8rem); text-align: center; flex: 1; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); }

/* ===== CARD STATES — MD3 State Layer ===== */
.card.selected {
  box-shadow: 0 0 0 3px var(--gold), var(--elev-3);
  transform: translateY(-5px);
  z-index: 100;
}

.card.hint-source {
  box-shadow: 0 0 0 3px #40c4ff, var(--elev-2);
  animation: pulse-hint 1.2s ease infinite;
}
.card.hint-dest {
  box-shadow: 0 0 0 3px #69f0ae, var(--elev-1);
}

@keyframes pulse-hint {
  0%, 100% { box-shadow: 0 0 0 3px #40c4ff, var(--elev-2); }
  50%       { box-shadow: 0 0 0 6px rgba(64,196,255,.5), var(--elev-2); }
}

.pile.valid-drop {
  border-color: #69f0ae;
  background: rgba(105,240,174,.12);
  box-shadow: 0 0 0 2px rgba(105,240,174,.4);
}

.card.dragging {
  opacity: .4;
  cursor: grabbing;
  box-shadow: var(--elev-3);
}


/* Tableau card fan */
.tableau .card { left: 0; }

/* ===== PAUSE OVERLAY ===== */
#pause-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 490;   /* below win/loss overlay (500) */
}
#pause-overlay.hidden { display: none; }

.pause-dialog {
  background: #fffbfe;
  color: #1c1b1f;
  border-radius: 28px;
  padding: 32px 32px 28px;
  text-align: center;
  max-width: 320px;
  width: 88%;
  box-shadow: var(--elev-5);
  animation: pop-in .25s cubic-bezier(.2,0,0,1);
}
.pause-icon { font-size: 3rem; margin-bottom: 12px; }
.pause-dialog h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; letter-spacing: .015em; }
.pause-dialog p  { font-size: .875rem; color: #49454f; margin-bottom: 24px; }

#btn-resume {
  background: #1b6e38;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0 28px;
  height: 40px;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .1px;
  cursor: pointer;
  box-shadow: var(--elev-2);
  transition: background var(--transition), box-shadow var(--transition);
}
#btn-resume:hover { background: #2d9654; box-shadow: var(--elev-3); }

/* Pause button in topbar */
#btn-pause { background: #37474f; color: #fff; box-shadow: var(--elev-1); }
#btn-pause:hover { background: #455a64; box-shadow: var(--elev-2); }

/* ===== OVERLAY — MD3 Dialog ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
.overlay.hidden { display: none; }

.overlay-dialog {
  background: #fffbfe;       /* MD3 surface */
  color: #1c1b1f;            /* MD3 on-surface */
  border-radius: 28px;       /* MD3 dialog shape */
  padding: 24px 24px 20px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  box-shadow: var(--elev-5);
  animation: pop-in .25s cubic-bezier(.2,0,0,1);
}

@keyframes pop-in {
  from { transform: scale(.85) translateY(8px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);   opacity: 1; }
}

.overlay-icon { font-size: 3rem; margin-bottom: 8px; }
.overlay-dialog h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; letter-spacing: .015em; }
.overlay-dialog p  { font-size: .9rem; color: #49454f; margin-bottom: 16px; }   /* MD3 on-surface-variant */

.score-breakdown {
  background: #f4f4f0;       /* MD3 surface-variant */
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: .875rem;
  text-align: left;
}
.score-breakdown div { display: flex; justify-content: space-between; padding: 3px 0; color: #49454f; }
.score-breakdown .total {
  font-weight: 700;
  color: #1c1b1f;
  border-top: 1px solid #cac4d0;   /* MD3 outline-variant */
  margin-top: 8px;
  padding-top: 8px;
}

#btn-play-again {
  background: #b3261e;       /* MD3 filled button — error/red */
  color: #fff;
  border: none;
  border-radius: 20px;       /* MD3 pill button */
  padding: 0 24px;
  height: 40px;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .1px;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: background var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
#btn-play-again::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background .15s;
  pointer-events: none;
}
#btn-play-again:hover { background: #c62828; box-shadow: var(--elev-2); }
#btn-play-again:hover::after { background: rgba(255,255,255,.08); }
#btn-play-again:active::after { background: rgba(255,255,255,.16); }

/* ===== TOAST — MD3 Snackbar ===== */
.toast {
  position: fixed;
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  left: 50%;
  transform: translateX(-50%);
  background: #313033;       /* MD3 inverse-surface */
  color: #f4eff4;            /* MD3 inverse-on-surface */
  padding: 10px 20px;
  border-radius: 8px;        /* MD3 snackbar shape */
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .25px;
  z-index: 600;
  box-shadow: var(--elev-3);
  transition: opacity .25s cubic-bezier(.2,0,0,1), transform .25s cubic-bezier(.2,0,0,1);
  white-space: nowrap;
}
.toast.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; }

/* ── Phone landscape ─────────────────────────────────────────────────────────
   MUST be last in the file so all element-specific rules win the cascade
   over base styles (same specificity → later declaration wins).

   Overhead budget after compaction:
     Topbar  = 4px + 28px buttons + 4px  = 36px (single row)
               worst-case 2-row wrap      = 72px
     Stats   = 4px + ~18px + 4px         = 26px
     Board   = 4px padding-top
     Total   ≈ 66–72px → formula uses 80px safety margin                   */
@media (orientation: landscape) and (max-height: 500px) {
  /* Height-constrained card sizing */
  :root {
    --card-w: clamp(24px, min(
      calc((100vw - 56px) / 7),
      calc((100vh - 80px) / 5.5)
    ), 60px);
  }

  /* Compact title — stays on one short line */
  #game-title {
    font-size:      .75rem;
    letter-spacing: 0;
    white-space:    nowrap;
  }

  /* Compact topbar — wins over base padding */
  #topbar {
    padding-top:    4px;
    padding-bottom: 4px;
  }

  /* Compact controls — wins over base height: 36px */
  #topbar-controls button,
  #topbar-controls select {
    height:    28px;
    font-size: .75rem;
    padding:   0 8px;
  }

  /* Compact stats bar — wins over base padding: 8px */
  #stats-panel {
    padding-top:    4px;
    padding-bottom: 4px;
    font-size:      .8rem;
  }

  /* Tighten board top padding — wins over mobile-buffer MQ */
  #board {
    padding-top:    4px;
    padding-bottom: 4px;
  }

  /* Pin layout to card content width — wins over mobile MQ max-width:100% */
  #board-top,
  #tableau-area {
    max-width: calc(7 * var(--card-w) + 6 * var(--col-gap));
    width:     100%;
    margin:    0 auto;
  }
}