/* Smooth Jazz Solitaire — gameplay board v2.0 (authoritative) */
body[data-screen="play"] { overflow: hidden !important; }
body[data-screen="play"] #screen-play { overflow: hidden !important; min-height: 0 !important; }
body[data-screen="play"] .play-grid { min-height: 0 !important; height: 100% !important; }
body[data-screen="play"] .game-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0,1fr) auto !important;
  gap: clamp(7px,1.2vw,12px) !important;
  min-height: 0 !important;
  height: calc(100dvh - var(--safe-top,0px) - var(--bottom-nav-h,92px) - var(--safe-bottom,0px) - 24px) !important;
  overflow: hidden !important;
}
body[data-screen="play"] .play-actions { grid-template-columns: repeat(6,minmax(0,1fr)) !important; gap: 7px !important; }
body[data-screen="play"] .play-actions .action { min-width: 0 !important; padding-inline: 5px !important; font-size: clamp(.68rem,2.2vw,.95rem) !important; }
body[data-screen="play"] .game-board {
  --board-gap: clamp(4px,1vw,9px);
  --card-w: calc((100% - (6 * var(--board-gap))) / 7);
  --card-h: calc(var(--card-w) * 1.43);
  position: relative !important;
  display: grid !important;
  grid-template-rows: var(--card-h) minmax(0,1fr) !important;
  gap: clamp(7px,1.1vh,12px) !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: clamp(7px,1.2vw,12px) !important;
  touch-action: none !important;
}
body[data-screen="play"] .board-top {
  display: grid !important;
  grid-template-columns: repeat(7,minmax(0,1fr)) !important;
  gap: var(--board-gap) !important;
  align-items: start !important;
  min-width: 0 !important;
}
body[data-screen="play"] .stock-group { display: contents !important; }
body[data-screen="play"] #stock { grid-column: 1 !important; }
body[data-screen="play"] #waste { grid-column: 2 !important; }
body[data-screen="play"] .foundations { display: contents !important; }
body[data-screen="play"] .foundation:nth-child(1){grid-column:4!important}
body[data-screen="play"] .foundation:nth-child(2){grid-column:5!important}
body[data-screen="play"] .foundation:nth-child(3){grid-column:6!important}
body[data-screen="play"] .foundation:nth-child(4){grid-column:7!important}
body[data-screen="play"] .slot,
body[data-screen="play"] .sjs-card,
body[data-screen="play"] .card {
  width: 100% !important;
  height: var(--card-h) !important;
  aspect-ratio: auto !important;
  border-radius: clamp(6px,1.25vw,12px) !important;
  box-sizing: border-box !important;
}
body[data-screen="play"] .slot { position: relative !important; min-width:0 !important; overflow:visible !important; }
body[data-screen="play"] .tableau {
  display: grid !important;
  grid-template-columns: repeat(7,minmax(0,1fr)) !important;
  gap: var(--board-gap) !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  transform: none !important;
  padding: 0 !important;
}
body[data-screen="play"] .column {
  position: relative !important;
  min-width: 0 !important;
  min-height: var(--card-h) !important;
  height: 100% !important;
  padding:0 !important;
  border-radius: 10px !important;
  touch-action:none !important;
}
body[data-screen="play"] .sjs-card,
body[data-screen="play"] .card {
  appearance:none !important;
  -webkit-appearance:none !important;
  position:absolute !important;
  inset:auto auto auto 0 !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  overflow:hidden !important;
  cursor:grab !important;
  touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  pointer-events:auto !important;
  opacity:1 !important;
  filter:none !important;
}
body[data-screen="play"] #stock > .sjs-card,
body[data-screen="play"] #waste > .sjs-card,
body[data-screen="play"] .foundation > .sjs-card { inset:0 !important; }
body[data-screen="play"] .sjs-card img,
body[data-screen="play"] .sjs-card > * {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}
body[data-screen="play"] .sjs-card.selected { box-shadow:0 0 0 2px #4deaff,0 0 12px rgba(77,234,255,.55) !important; }
body[data-screen="play"] .sjs-card.dragging-source { opacity:1 !important; visibility:visible !important; outline:0 !important; box-shadow:none !important; }
.sjs-drag-layer {
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  width:var(--drag-w) !important;
  height:var(--drag-h) !important;
  z-index:2147483647 !important;
  pointer-events:none !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  will-change:left,top !important;
}
.sjs-drag-layer .sjs-card { position:absolute !important; left:0 !important; width:100% !important; height:var(--drag-card-h) !important; opacity:1 !important; visibility:visible !important; filter:none !important; }
body[data-screen="play"] .column.sjs-drop-ok,
body[data-screen="play"] .foundation.sjs-drop-ok { outline:none !important; box-shadow:none !important; }
body[data-screen="play"] .board-tip { margin:0 !important; padding:0 !important; font-size:clamp(.64rem,1.7vw,.82rem) !important; }
@media (max-width:520px){
 body[data-screen="play"] .board-hud { gap:7px !important; }
 body[data-screen="play"] .board-hud-copy h2 { max-width:12ch !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
}

/* =========================================================
   PLAY BACKGROUND IMAGE PATCH
   Put app_background.png behind the cards and gameplay UI.
========================================================= */

body[data-screen="play"] #screen-play,
body[data-screen="play"] .play-grid {
  background: transparent !important;
}

/* Main visible play panel uses the artwork background */
body[data-screen="play"] .game-panel {
  position: relative !important;
  background:
    linear-gradient(180deg, rgba(3, 8, 24, 0.14), rgba(3, 8, 24, 0.24)),
    url("../assets/app_background.png") center center / cover no-repeat !important;
  border: 1px solid rgba(84, 212, 255, 0.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 24px 60px rgba(0,0,0,0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
}

/* Remove generic glass overlay from the play panel */
body[data-screen="play"] .game-panel::before,
body[data-screen="play"] .game-panel::after {
  display: none !important;
}

/* Make the actual board itself transparent so the artwork shows through */
body[data-screen="play"] #gameBoard.game-board {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove the extra board overlays that were hiding the artwork */
body[data-screen="play"] #gameBoard.game-board::before,
body[data-screen="play"] #gameBoard.game-board::after {
  display: none !important;
}

/* Keep slots visible but much lighter so the background still shows */
body[data-screen="play"] .slot {
  background: rgba(5, 14, 30, 0.10) !important;
  border: 1px dashed rgba(120, 236, 255, 0.28) !important;
  box-shadow: inset 0 0 16px rgba(60, 236, 255, 0.04) !important;
}

/* Let the board area breathe visually */
body[data-screen="play"] .board-top,
body[data-screen="play"] #tableau.tableau {
  position: relative !important;
  z-index: 2 !important;
}

/* Slightly cleaner board tip over artwork */
body[data-screen="play"] .board-tip {
  color: rgba(210, 236, 255, 0.82) !important;
}

/* Tablet / iPad artwork */
@media (min-width: 768px) {
  body[data-screen="play"] .game-panel {
    background:
      linear-gradient(180deg, rgba(3, 8, 24, 0.12), rgba(3, 8, 24, 0.20)),
      url("../assets/app_tablets_background.png") center center / cover no-repeat !important;
  }
}


/* =========================================================
   EXACT APP_BACKGROUND PLAY SCREEN — FINAL OVERRIDE
   Uses the original image at full brightness behind gameplay.
========================================================= */

body[data-screen="play"] #screen-play {
  position: relative !important;
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
}

body[data-screen="play"] .play-grid {
  position: relative !important;
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
}

/*
  Use the exact phone artwork with no gradient tint.
  100% 100% keeps the complete vertical composition visible,
  matching the supplied sample layout.
*/
body[data-screen="play"] .game-panel,
body[data-screen="play"] article.game-panel.glass-panel {
  position: relative !important;

  background-color: transparent !important;
  background-image: url("../assets/app_background.png") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% 100% !important;

  opacity: 1 !important;
  filter: none !important;

  border: 1px solid rgba(64, 205, 255, 0.25) !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  isolation: isolate !important;
}

/* Remove every glass, gradient, vignette, and dark overlay. */
body[data-screen="play"] .game-panel::before,
body[data-screen="play"] .game-panel::after,
body[data-screen="play"] article.game-panel.glass-panel::before,
body[data-screen="play"] article.game-panel.glass-panel::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* The game board must not cover the image. */
body[data-screen="play"] #gameBoard.game-board {
  position: relative !important;
  z-index: 2 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  opacity: 1 !important;
  filter: none !important;
}

/* Remove old board-generated decorative overlays. */
body[data-screen="play"] #gameBoard.game-board::before,
body[data-screen="play"] #gameBoard.game-board::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* Keep HUD and controls readable without darkening the entire artwork. */
body[data-screen="play"] .board-hud,
body[data-screen="play"] .play-actions,
body[data-screen="play"] .board-top,
body[data-screen="play"] #tableau {
  position: relative !important;
  z-index: 3 !important;
}

/* Light individual HUD panels only. */
body[data-screen="play"] .status-strip {
  background: rgba(3, 10, 30, 0.26) !important;
  border: 1px solid rgba(105, 205, 255, 0.25) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* Do not add opaque backgrounds behind each stat. */
body[data-screen="play"] .status-strip > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep the control buttons clear but allow the artwork to remain visible. */
body[data-screen="play"] .play-actions .action {
  background: rgba(3, 10, 30, 0.48) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

body[data-screen="play"] .play-actions .action.primary {
  background: linear-gradient(
    135deg,
    rgba(30, 142, 255, 0.92),
    rgba(29, 76, 190, 0.92)
  ) !important;
}

/* Empty piles stay visible but do not block the image. */
body[data-screen="play"] .slot {
  background: rgba(3, 12, 31, 0.08) !important;
  border: 1px dashed rgba(78, 205, 255, 0.35) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-screen="play"] .slot::after {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.025) !important;
}

/* Keep cards fully bright over the artwork. */
body[data-screen="play"] .sjs-card,
body[data-screen="play"] .card,
body[data-screen="play"] .sjs-card img,
body[data-screen="play"] .card img {
  opacity: 1 !important;
  filter: none !important;
}

/* Use the dedicated tablet/iPad artwork on wider screens. */
@media (min-width: 768px) {
  body[data-screen="play"] .game-panel,
  body[data-screen="play"] article.game-panel.glass-panel {
    background-image: url("../assets/app_tablets_background.png") !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
  }
}


/* =========================================================
   LARGER CARDS — SAFE SEVEN-COLUMN GEOMETRY
========================================================= */

body[data-screen="play"] .game-panel {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Reduce unused board padding so seven cards can grow together. */
body[data-screen="play"] #gameBoard.game-board {
  --board-gap: clamp(3px, 0.72vw, 6px) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Keep the exact seven-column structure. */
body[data-screen="play"] #gameBoard .board-top,
body[data-screen="play"] #tableau.tableau {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: var(--board-gap) !important;
}

/* Cards continue to derive their size from each grid column. */
body[data-screen="play"] #gameBoard.game-board {
  --card-w: calc((100% - (6 * var(--board-gap))) / 7) !important;
  --card-h: calc(var(--card-w) * 1.43) !important;
}

/* Slightly stronger visual presence. */
body[data-screen="play"] .sjs-card,
body[data-screen="play"] .card {
  box-shadow:
    0 8px 15px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(110, 205, 255, 0.12) !important;
}

/* Keep tableau overlap proportional to the larger cards. */
body[data-screen="play"] #tableau > .column {
  --face-up-step: clamp(24px, 6.2vw, 39px);
  --face-down-step: clamp(12px, 3.4vw, 22px);
}

/* iPhone Pro-size refinement. */
@media (max-width: 460px) {
  body[data-screen="play"] .game-panel {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body[data-screen="play"] #gameBoard.game-board {
    --board-gap: 3px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}


/* =========================================================
   DRAG TARGET OUTLINE FIX
   Never outline an entire tableau column or board grid area.
========================================================= */

/* Remove every oversized drag-target container outline. */
body[data-screen="play"] #tableau.drop-target,
body[data-screen="play"] #tableau.sjs-drop-ok,
body[data-screen="play"] #tableau > .column.drop-target,
body[data-screen="play"] #tableau > .column.sjs-drop-ok,
body[data-screen="play"] .column.drop-target,
body[data-screen="play"] .column.sjs-drop-ok,
body[data-screen="play"] .foundation.drop-target,
body[data-screen="play"] .foundation.sjs-drop-ok,
body[data-screen="play"] .pile.drop-target,
body[data-screen="play"] .pile.sjs-drop-ok,
body[data-screen="play"] .slot.drop-target,
body[data-screen="play"] .slot.sjs-drop-ok {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Remove pseudo-element borders that can form a tall cyan rectangle. */
body[data-screen="play"] #tableau.drop-target::before,
body[data-screen="play"] #tableau.drop-target::after,
body[data-screen="play"] #tableau > .column.drop-target::before,
body[data-screen="play"] #tableau > .column.drop-target::after,
body[data-screen="play"] #tableau > .column.sjs-drop-ok::before,
body[data-screen="play"] #tableau > .column.sjs-drop-ok::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Empty tableau columns remain completely invisible during dragging. */
body[data-screen="play"] #tableau > .column:empty,
body[data-screen="play"] #tableau > .column:empty.drop-target,
body[data-screen="play"] #tableau > .column:empty.sjs-drop-ok {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Highlight only the actual destination card, never its full column. */
body[data-screen="play"] #tableau > .column.drop-target > .sjs-card:last-child,
body[data-screen="play"] #tableau > .column.sjs-drop-ok > .sjs-card:last-child {
  box-shadow:
    0 0 0 2px rgba(77, 234, 255, 0.82),
    0 0 14px rgba(77, 234, 255, 0.48),
    0 8px 16px rgba(0, 0, 0, 0.48) !important;
}

/* Foundation feedback stays confined to the card-sized slot. */
body[data-screen="play"] .foundation.drop-target,
body[data-screen="play"] .foundation.sjs-drop-ok {
  border-color: rgba(77, 234, 255, 0.46) !important;
  box-shadow:
    inset 0 0 0 1px rgba(77, 234, 255, 0.30),
    0 0 10px rgba(77, 234, 255, 0.18) !important;
}

/* Never apply glow to the physical drag layer container. */
.sjs-drag-layer,
.sjs-drag-layer.drop-target,
.sjs-drag-layer.sjs-drop-ok {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* =========================================================
   MAXIMUM PLAY WIDTH + LARGEST SAFE CARDS
   Maintains the exact seven-column Klondike structure.
========================================================= */

/* Use nearly the complete device width on the Play screen. */
body[data-screen="play"] .app-shell {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

body[data-screen="play"] .app-main,
body[data-screen="play"] #screen-play,
body[data-screen="play"] .play-grid {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Expand the background/game panel to maximum safe width. */
body[data-screen="play"] .game-panel,
body[data-screen="play"] article.game-panel.glass-panel {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;

  padding-left: 3px !important;
  padding-right: 3px !important;

  box-sizing: border-box !important;
}

/* Remove virtually all unused horizontal board space. */
body[data-screen="play"] #gameBoard.game-board {
  --board-gap: 2px !important;
  --sjs-gap: 2px !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
}

/* Preserve the exact seven equal columns. */
body[data-screen="play"] #gameBoard .board-top,
body[data-screen="play"] #tableau.tableau {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  column-gap: 2px !important;
  gap: 2px !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
  Each card occupies its entire grid column.
  Card height remains proportional and automatically grows with width.
*/
body[data-screen="play"] #gameBoard.game-board {
  --card-w: calc((100% - 12px) / 7) !important;
  --card-h: calc(var(--card-w) * 1.43) !important;
}

body[data-screen="play"] #stock,
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation,
body[data-screen="play"] #tableau > .column {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body[data-screen="play"] #stock,
body[data-screen="play"] #waste,
body[data-screen="play"] .foundation {
  height: var(--card-h) !important;
  aspect-ratio: auto !important;
}

body[data-screen="play"] #tableau > .column > .sjs-card,
body[data-screen="play"] #tableau > .column > .card {
  left: 0 !important;
  right: auto !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  aspect-ratio: 5 / 7 !important;

  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Make stock, waste and foundation cards fill their larger slots. */
body[data-screen="play"] #stock > .sjs-card,
body[data-screen="play"] #waste > .sjs-card,
body[data-screen="play"] .foundation > .sjs-card {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;
}

/* Preserve clean image rendering on the enlarged cards. */
body[data-screen="play"] .sjs-card img,
body[data-screen="play"] .card img {
  width: 100% !important;
  height: 100% !important;

  object-fit: fill !important;
  image-rendering: auto !important;

  border-radius: inherit !important;
}

/* Slightly reduce HUD side spacing so the full-width layout stays balanced. */
body[data-screen="play"] .board-hud,
body[data-screen="play"] .play-actions {
  margin-left: 1px !important;
  margin-right: 1px !important;
}

/* Keep all five controls inside the screen. */
body[data-screen="play"] .play-actions {
  width: calc(100% - 2px) !important;
  grid-template-columns:
    minmax(0, 1.28fr)
    minmax(0, .82fr)
    minmax(0, .82fr)
    minmax(0, 1.42fr)
    minmax(0, .92fr) !important;

  gap: 4px !important;
}

body[data-screen="play"] .play-actions > button {
  min-width: 0 !important;
  max-width: none !important;

  padding-left: 3px !important;
  padding-right: 3px !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* Keep the bottom navigation aligned to the expanded play width. */
body[data-screen="play"] .bottom-nav {
  left: 4px !important;
  right: 4px !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
}

/* iPhone-width maximum expansion. */
@media (max-width: 520px) {
  body[data-screen="play"] .app-shell {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  body[data-screen="play"] .game-panel,
  body[data-screen="play"] article.game-panel.glass-panel {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  body[data-screen="play"] #gameBoard.game-board {
    --board-gap: 1.5px !important;
    --sjs-gap: 1.5px !important;
    --card-w: calc((100% - 9px) / 7) !important;
  }

  body[data-screen="play"] #gameBoard .board-top,
  body[data-screen="play"] #tableau.tableau {
    column-gap: 1.5px !important;
    gap: 1.5px !important;
  }
}

/* Tablets retain more breathing room while remaining substantially larger. */
@media (min-width: 768px) {
  body[data-screen="play"] .app-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body[data-screen="play"] #gameBoard.game-board {
    --board-gap: 5px !important;
    --sjs-gap: 5px !important;
    --card-w: calc((100% - 30px) / 7) !important;
  }

  body[data-screen="play"] #gameBoard .board-top,
  body[data-screen="play"] #tableau.tableau {
    column-gap: 5px !important;
    gap: 5px !important;
  }
}


/* =========================================================
   CENTERED GAME STATS + CLEAN ICON/LABEL SPACING
========================================================= */

/* Center the title and the Score / Moves / Time section. */
body[data-screen="play"] .board-hud {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 10px !important;
  text-align: center !important;
}

body[data-screen="play"] .board-hud-copy {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  text-align: center !important;
}

body[data-screen="play"] .board-hud-copy .eyebrow,
body[data-screen="play"] .board-hud-copy h2 {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Center the complete statistics capsule. */
body[data-screen="play"] .status-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-content: center !important;

  width: min(100%, 410px) !important;
  margin: 0 auto !important;
  padding: 10px 12px !important;
  gap: 4px !important;

  text-align: center !important;
}

/* Center every individual statistic. */
body[data-screen="play"] .status-strip > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  padding: 4px 6px !important;
  text-align: center !important;
}

body[data-screen="play"] .status-strip span,
body[data-screen="play"] .status-strip strong {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* Keep the timer from shifting the centered layout. */
body[data-screen="play"] #timerValue {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

/* Five action buttons remain one aligned row. */
body[data-screen="play"] .play-actions {
  align-items: stretch !important;
}

/* Create consistent icon-to-label separation. */
body[data-screen="play"] .play-actions > button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Normalize pseudo-element icons already used by the buttons. */
body[data-screen="play"] .play-actions > button::before,
body[data-screen="play"] .play-actions > button::after {
  flex: 0 0 auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Explicit, clean icons with separation from the label. */
body[data-screen="play"] .play-actions > button[data-action="new"]::before {
  content: "✦" !important;
  font-size: 1.08em !important;
}

body[data-screen="play"] .play-actions > button[data-action="undo"]::before {
  content: "↶" !important;
  font-size: 1.22em !important;
}

body[data-screen="play"] .play-actions > button[data-action="hint"]::before {
  content: "♧" !important;
  font-size: 1.12em !important;
}

body[data-screen="play"] .play-actions > button[data-action="leaderboard"]::before {
  content: "♛" !important;
  font-size: 1em !important;
}

body[data-screen="play"] #gameSoundToggle::before {
  content: "◖))" !important;
  font-size: 0.92em !important;
  letter-spacing: -0.12em !important;
}

/* Prevent older icon pseudo-elements from appearing above the labels. */
body[data-screen="play"] .play-actions > button::after {
  content: none !important;
  display: none !important;
}

/* Small-phone refinement. */
@media (max-width: 520px) {
  body[data-screen="play"] .board-hud {
    gap: 8px !important;
  }

  body[data-screen="play"] .status-strip {
    width: min(100%, 400px) !important;
    padding: 9px 8px !important;
  }

  body[data-screen="play"] .play-actions > button {
    gap: 4px !important;
  }

  body[data-screen="play"] .play-actions > button::before {
    font-size: 0.94em !important;
  }
}


/* =========================================================
   IPAD / TABLET LANDSCAPE PRODUCTION GEOMETRY
   Prevents oversized cards and compressed tableau columns.
========================================================= */

@media
  (min-width: 768px)
  and (orientation: landscape) {

  /*
    Keep the overall Play screen full width, but prevent the
    seven-column card board from becoming excessively wide.
  */
  body[data-screen="play"] .app-shell {
    width: 100% !important;
    max-width: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body[data-screen="play"] .game-panel,
  body[data-screen="play"] article.game-panel.glass-panel {
    width: 100% !important;
    max-width: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /*
    A controlled maximum width gives every card enough room
    without allowing iPad Pro landscape cards to become huge.
  */
  body[data-screen="play"] #gameBoard.game-board {
    --tablet-landscape-board-width: 1120px;
    --board-gap: 9px !important;
    --sjs-gap: 9px !important;

    width: min(100%, var(--tablet-landscape-board-width)) !important;
    max-width: var(--tablet-landscape-board-width) !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    /*
      Six spaces exist between the seven columns.
    */
    --card-w: calc((100% - 54px) / 7) !important;
    --card-h: calc(var(--card-w) * 1.4) !important;
  }

  /*
    Stock, waste, foundation slots, and tableau must use the
    exact same width and seven-column geometry.
  */
  body[data-screen="play"] #gameBoard .board-top,
  body[data-screen="play"] #tableau.tableau {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    column-gap: 9px !important;
    row-gap: 0 !important;
    gap: 0 9px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
    Prevent individual tableau columns from expanding beyond
    their assigned seventh of the board.
  */
  body[data-screen="play"] #tableau > .column,
  body[data-screen="play"] #stock,
  body[data-screen="play"] #waste,
  body[data-screen="play"] .foundation {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /*
    Keep every tableau card locked to its column instead of
    allowing inherited tablet sizing to widen it.
  */
  body[data-screen="play"] #tableau > .column > .sjs-card,
  body[data-screen="play"] #tableau > .column > .card {
    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    aspect-ratio: 5 / 7 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
    Slightly tighten the vertical stacking for landscape so
    seven-card columns remain visible above the bottom nav.
  */
  body[data-screen="play"] #tableau {
    --face-down-step: clamp(18px, 2.15vh, 27px) !important;
    --face-up-step: clamp(34px, 4.2vh, 52px) !important;
    --sjs-down-step: clamp(18px, 2.15vh, 27px) !important;
    --sjs-up-step: clamp(34px, 4.2vh, 52px) !important;
  }

  /*
    Keep the title and score area balanced across the wider
    landscape header instead of stretching uncontrollably.
  */
  body[data-screen="play"] .board-hud {
    width: min(100%, 1120px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body[data-screen="play"] .status-strip {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
  }

  /*
    Keep the five controls aligned to the same centered board.
  */
  body[data-screen="play"] .play-actions {
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    gap: 7px !important;
  }

  body[data-screen="play"] .play-actions > button {
    min-height: 44px !important;
    padding: 7px 8px !important;
    gap: 6px !important;
  }
}

/*
  Larger iPad Pro landscape screens receive a little more width,
  but remain safely below full-screen card enlargement.
*/
@media
  (min-width: 1180px)
  and (orientation: landscape) {

  body[data-screen="play"] #gameBoard.game-board,
  body[data-screen="play"] .board-hud,
  body[data-screen="play"] .play-actions {
    --tablet-landscape-board-width: 1180px;
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
  }

  body[data-screen="play"] #gameBoard.game-board {
    --board-gap: 10px !important;
    --sjs-gap: 10px !important;
    --card-w: calc((100% - 60px) / 7) !important;
  }

  body[data-screen="play"] #gameBoard .board-top,
  body[data-screen="play"] #tableau.tableau {
    column-gap: 10px !important;
    gap: 0 10px !important;
  }
}


/* =========================================================
   TABLET / IPAD LANDSCAPE — LOWER TABLEAU POSITION
   Vertical correction only. Card width and columns unchanged.
========================================================= */

@media
  (min-width: 768px)
  and (orientation: landscape) {

  /*
    Add clear vertical separation beneath the stock, waste,
    spacer and foundation row.
  */
  body[data-screen="play"] #tableau.tableau {
    position: relative !important;
    top: 0 !important;

    margin-top: clamp(38px, 4.6vh, 58px) !important;
    padding-top: 0 !important;
  }
}

/* Larger iPad Pro landscape screens need slightly more separation. */
@media
  (min-width: 1180px)
  and (orientation: landscape) {

  body[data-screen="play"] #tableau.tableau {
    margin-top: clamp(46px, 5vh, 64px) !important;
  }
}


/* =========================================================
   TABLET / IPAD ORIENTATION-SPECIFIC PLAY BACKGROUNDS
   Portrait  = app_background.png
   Landscape = app_tablets_background.png
========================================================= */

/* Tablet and iPad portrait */
@media
  (min-width: 768px)
  and (orientation: portrait) {

  body[data-screen="play"] .game-panel,
  body[data-screen="play"] article.game-panel.glass-panel {
    background-image:
      linear-gradient(
        rgba(1, 5, 20, 0.08),
        rgba(1, 5, 20, 0.08)
      ),
      url("../assets/app_background.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* Tablet and iPad landscape */
@media
  (min-width: 768px)
  and (orientation: landscape) {

  body[data-screen="play"] .game-panel,
  body[data-screen="play"] article.game-panel.glass-panel {
    background-image:
      linear-gradient(
        rgba(1, 5, 20, 0.08),
        rgba(1, 5, 20, 0.08)
      ),
      url("../assets/app_tablets_background.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}


/* =========================================================
   FINAL IPAD / TABLET LANDSCAPE TABLEAU LOWERING
   Moves only the seven tableau columns downward.
========================================================= */

@media
  (min-width: 768px)
  and (orientation: landscape) {

  body[data-screen="play"] #gameBoard.game-board {
    overflow: visible !important;
    padding-bottom: clamp(60px, 7vh, 90px) !important;
  }

  body[data-screen="play"] #tableau.tableau {
    margin-top: 0 !important;
    top: auto !important;

    transform: translateY(
      clamp(62px, 7.2vh, 88px)
    ) !important;

    transform-origin: top center !important;
  }
}

/* Extra spacing for large 12.9-inch and 13-inch iPad landscape. */
@media
  (min-width: 1180px)
  and (orientation: landscape) {

  body[data-screen="play"] #tableau.tableau {
    transform: translateY(
      clamp(72px, 8vh, 98px)
    ) !important;
  }
}


/* =========================================================
   FORCED FINAL TABLET LANDSCAPE TABLEAU SPACING
   Clear separation beneath stock/foundation row.
   Landscape tablets only.
========================================================= */

@media
  (min-width: 768px)
  and (orientation: landscape) {

  body[data-screen="play"] #gameBoard.game-board {
    overflow: visible !important;
    padding-bottom: 150px !important;
  }

  body[data-screen="play"] #tableau.tableau {
    position: relative !important;

    margin-top: 0 !important;
    padding-top: 0 !important;

    top: 0 !important;
    bottom: auto !important;

    transform: translate3d(
      0,
      118px,
      0
    ) !important;

    transform-origin: top center !important;
    will-change: transform !important;
  }
}

/* Large 12.9-inch and 13-inch iPad landscape */
@media
  (min-width: 1180px)
  and (orientation: landscape) {

  body[data-screen="play"] #gameBoard.game-board {
    padding-bottom: 180px !important;
  }

  body[data-screen="play"] #tableau.tableau {
    transform: translate3d(
      0,
      145px,
      0
    ) !important;
  }
}

/* Very wide landscape tablets */
@media
  (min-width: 1360px)
  and (orientation: landscape) {

  body[data-screen="play"] #tableau.tableau {
    transform: translate3d(
      0,
      155px,
      0
    ) !important;
  }
}



/* =========================================================
   SJS BOARD OBJECTIVE HUD
========================================================= */
body[data-screen="play"] .board-hud-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

body[data-screen="play"] .game-objective-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(4px, 0.45vw, 8px);

  width: 100%;
  max-width: min(620px, 100%);
  min-width: 0;

  margin-top: clamp(2px, 0.28vw, 5px);

  font-family:
    "Orbitron",
    system-ui,
    sans-serif;

  font-size:
    clamp(9px, 0.72vw, 12px);

  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.105em;
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
}

body[data-screen="play"] .game-objective-mode {
  flex: 0 0 auto;

  color: #53ecff;

  text-shadow:
    0 0 8px rgba(83, 236, 255, 0.42);
}

body[data-screen="play"] .game-objective-divider {
  flex: 0 0 auto;
  color: rgba(255, 226, 135, 0.9);
}

body[data-screen="play"] .game-objective-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;

  color: #c5d6ef;

  overflow: hidden;
  text-overflow: ellipsis;
}

/* iPhone and narrow mobile alignment */
@media screen and (max-width: 700px) {
  body[data-screen="play"] .board-hud-copy {
    align-items: center;
    text-align: center;
  }

  body[data-screen="play"] .game-objective-line {
    justify-content: center;

    width: auto;
    max-width: min(96vw, 500px);

    margin-top: 2px;
    padding-inline: 4px;

    font-size:
      clamp(8px, 2.05vw, 10px);

    letter-spacing: 0.065em;
  }

  body[data-screen="play"] .game-objective-text {
    flex: 0 1 auto;
  }
}

/* Very narrow phones */
@media screen and (max-width: 390px) {
  body[data-screen="play"] .game-objective-line {
    gap: 3px;
    font-size: 8px;
    letter-spacing: 0.04em;
  }
}

/* iPad and tablet landscape */
@media screen
  and (orientation: landscape)
  and (min-width: 768px) {

  body[data-screen="play"] .game-objective-line {
    max-width: min(560px, 100%);
    margin-top: 2px;

    font-size:
      clamp(9px, 0.68vw, 11px);
  }
}


/* SJS WEB HEADER STEP ONE
   Center title and place Score/Moves/Time immediately after SFX.
   Does not alter the tableau or card layout.
========================================================= */

@media (min-width: 900px) {

  body[data-screen="play"] .sjs-web-centered-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 8px 18px 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  body[data-screen="play"] .sjs-web-centered-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  body[data-screen="play"] .sjs-web-centered-title .eyebrow,
  body[data-screen="play"] .sjs-web-centered-title #playHeading,
  body[data-screen="play"] .sjs-web-centered-title #gameObjectiveLine,
  body[data-screen="play"] .sjs-web-centered-title .game-objective-line,
  body[data-screen="play"] .sjs-web-centered-title .objective-line {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body[data-screen="play"] .sjs-web-centered-title .eyebrow {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }

  body[data-screen="play"] .sjs-web-centered-title #playHeading {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }

  body[data-screen="play"] .sjs-web-centered-title #gameObjectiveLine,
  body[data-screen="play"] .sjs-web-centered-title .game-objective-line,
  body[data-screen="play"] .sjs-web-centered-title .objective-line {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }

  body[data-screen="play"] .sjs-web-control-stats-row {
    display: grid !important;
    grid-template-columns:
      minmax(160px, 1.15fr)
      minmax(105px, .7fr)
      minmax(105px, .7fr)
      minmax(180px, 1.25fr)
      minmax(120px, .82fr)
      minmax(265px, 1.35fr) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  body[data-screen="play"] .sjs-web-control-stats-row > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body[data-screen="play"] .sjs-web-inline-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(68px, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    border-radius: 23px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  body[data-screen="play"] .sjs-web-inline-stats > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body[data-screen="play"] .sjs-web-inline-stats dt,
  body[data-screen="play"] .sjs-web-inline-stats .label,
  body[data-screen="play"] .sjs-web-inline-stats .status-label {
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .15em !important;
    white-space: nowrap !important;
  }

  body[data-screen="play"] .sjs-web-inline-stats dd,
  body[data-screen="play"] .sjs-web-inline-stats .value,
  body[data-screen="play"] .sjs-web-inline-stats .status-value {
    margin: 3px 0 0 !important;
    font-size: clamp(14px, 1.2vw, 19px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 900px) and (max-width: 1250px) {

  body[data-screen="play"] .sjs-web-control-stats-row {
    grid-template-columns:
      minmax(125px, 1fr)
      minmax(85px, .66fr)
      minmax(85px, .66fr)
      minmax(135px, 1.05fr)
      minmax(95px, .75fr)
      minmax(225px, 1.3fr) !important;
  }
}