/* Mahjong Solitaire page (frame, header and dialogs come from css/shell.css) */
.board-wrap {
  grid-area: board;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px 12px;
  overflow: hidden;
  border-radius: 20px;
  border: 4px solid var(--board-edge);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 60px),
    linear-gradient(180deg, var(--table), var(--table-2));
}
.board { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Tiles */
.tile {
  position: absolute;
  padding: 0;
  margin: 0;
  font: inherit;
  background: linear-gradient(145deg, var(--tile-face), var(--tile-face-2));
  border: 2px solid var(--tile-edge);
  border-radius: 12% / 9%;
  /* Thick edge, then a soft shadow that grows with layer height (--z) so upper tiles clearly sit on top. */
  box-shadow: var(--edge),
    calc(var(--d) + 2px + var(--z) * 2px) calc(var(--d) + 3px + var(--z) * 3px) calc(5px + var(--z) * 4px)
    rgba(40, 20, 0, calc(0.3 + var(--z) * 0.07));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.2s ease;
}
.tile svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.tile.blocked { filter: brightness(0.8) saturate(0.75); cursor: default; }
@media (hover: hover) { .tile.free:hover { filter: brightness(1.04); } }
.tile:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.tile.selected {
  background: var(--select);
  border-color: var(--select-ring);
  outline: 5px solid var(--select-ring);
  outline-offset: 0;
  transform: translate(-2px, -5px);
}
.tile.hint { outline: 6px solid var(--hint-ring); outline-offset: 1px; animation: hint-pulse 0.9s ease-in-out infinite alternate; }
.tile.removing { opacity: 0; transform: scale(0.85); }
.tile.shake { animation: shake 0.35s ease; }

@keyframes hint-pulse { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -5px 0; }
  75% { translate: 5px 0; }
}

html.high-contrast .tile { border-width: 3px; }
html.high-contrast .tile.blocked { filter: brightness(0.55); }
html.high-contrast .board-wrap { background: var(--table); }

.pic-tile {
  position: relative;
  width: 52px;
  height: 67px;
  background: linear-gradient(145deg, var(--tile-face), var(--tile-face-2));
  border: 2px solid var(--tile-edge);
  border-radius: 7px;
  box-shadow: 3px 3px 0 var(--tile-side);
}
.pic-tile svg { display: block; width: 100%; height: 100%; }
.pic-tile.dim { filter: brightness(0.8) saturate(0.75); }
/* Phones: two rows of buttons: New Game + Undo, then Hint, Shuffle, Settings */
@media (max-width: 640px) {
  .toolbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .toolbar .btn { grid-column: span 2; }
  #btn-new, #btn-undo { grid-column: span 3; }
}

/* Choose a table: pictures of every table, grouped by size */
.tables-box { max-width: 46rem; }
.tables-box .choice-list { margin-bottom: 0.5rem; }
.table-group h3 { margin: 1rem 0 0.5rem; font-size: 1.3rem; text-align: left; color: var(--heading); }
.table-group h3 span { font-size: 1rem; font-weight: 400; color: var(--ink-soft); margin-left: 0.4em; }
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.7rem; }
.table-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.4rem 0.45rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--wood-dark);
  border-radius: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.table-card strong { font-size: 1.15rem; line-height: 1.2; }
.table-card .table-count { font-size: 0.95rem; color: var(--ink-soft); }
.table-pic { display: flex; align-items: center; justify-content: center; width: 100%; height: 8rem; padding: 0.3rem; background: linear-gradient(180deg, var(--table), var(--table-2)); border-radius: 9px; }
.table-pic svg { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.th-side { fill: var(--tile-side); }
.th-tile { fill: var(--tile-face); stroke: var(--tile-edge); stroke-width: 0.8; }
.th-tile.z0 { fill: var(--tile-face-2); }
.table-last { display: none; font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.table-card.last { border-color: var(--accent); }
.table-card.last .table-last { display: block; }
html.high-contrast .table-card.last { border-width: 5px; }
.table-card:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .table-card:hover { filter: brightness(1.04); } }
@media (max-width: 640px) {
  .table-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .table-pic { height: 6.4rem; }
  .table-group h3 span { display: block; margin-left: 0; }
}