.chess-scene,
.domino-scene,
.triomino-scene,
.rummikub-scene,
.klondike-scene,
.pool-scene,
.catan-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: auto;
  box-sizing: border-box;
  padding: max(72px, var(--scoreboard-bottom, 0px)) 12px 24px;
  color: var(--tool-text);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.chess-scene[hidden],
.domino-scene[hidden],
.triomino-scene[hidden],
.rummikub-scene[hidden],
.klondike-scene[hidden],
.pool-scene[hidden],
.catan-scene[hidden] {
  display: none;
}

.chess-layout,
.domino-layout,
.triomino-layout,
.rummikub-layout,
.klondike-layout,
.catan-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(980px, 100%);
  margin: auto;
}

.table-note {
  margin: 0;
  max-width: 40em;
  text-align: center;
  font: var(--type-body);
}

.chess-scene {
  padding-bottom: 128px;
}

.chess-frame {
  position: relative;
  width: min(100%, 92vw, 440px);
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgb(30 40 16 / 22%);
  user-select: none;
}

.chess-square {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: #efe6c8;
  cursor: pointer;
  user-select: none;
}

.chess-square.is-dark { background: #6f8f4e; }
.chess-square.is-last { background: #e4e7a4; }
.chess-square.is-dark.is-last { background: #8aaa58; }
.chess-square.is-selected,
.chess-square.is-dark.is-selected { background: #e7f08a; }
.chess-square.is-check { box-shadow: inset 0 0 0 3px #c74444; }

.chess-square.is-target::after,
.chess-square.is-capture::after {
  content: "";
  justify-self: center;
  align-self: center;
  border-radius: 50%;
  pointer-events: none;
}

.chess-square.is-target::after {
  width: 28%;
  height: 28%;
  background: rgb(20 24 16 / 22%);
}

.chess-square.is-capture::after {
  width: 78%;
  height: 78%;
  box-shadow: inset 0 0 0 5px rgb(20 24 16 / 28%);
}

.chess-coord {
  position: absolute;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  color: #5c7340;
}

.chess-square.is-dark .chess-coord { color: #efe6c8; }
.chess-coord.is-rank { top: 3px; left: 4px; }
.chess-coord.is-file { right: 4px; bottom: 3px; }

.chess-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chess-piece {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  transition: left 220ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 28%));
}

.chess-piece svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chess-star {
  position: absolute;
  top: -8%;
  right: -2%;
  width: 34%;
  height: 34%;
  filter: none;
}

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

.domino-line,
.domino-hand,
.tri-line,
.tri-hand,
.rummikub-table,
.rummikub-hand,
.rummikub-meld,
.catan-actions,
.klondike-top,
.klondike-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.domino-tile {
  display: flex;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #222;
  cursor: pointer;
}

.domino-half {
  display: grid;
  grid-template-columns: repeat(3, 6px);
  gap: 2px;
  align-content: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
}

.domino-half + .domino-half { box-shadow: inset 2px 0 0 #222; }
.domino-half i { width: 6px; height: 6px; border-radius: 50%; background: #222; }
.domino-tile:disabled { opacity: 0.4; cursor: default; }

.tri-tile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 64px;
  height: 56px;
  padding: 6px;
  border: 0;
  background: #fff;
  color: #222;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  font: 700 13px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.tri-tile span:first-child { grid-column: 1 / -1; }
.tri-tile.is-picked { background: #efe6ff; }
.tri-tile:disabled { opacity: 0.4; }

.rummikub-tile {
  width: 46px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffdf6 0%, #f3e7cf 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 1px rgb(0 0 0 / 0.18),
    0 2px 0 #e4d4b4;
  display: grid;
  place-items: center;
}

button.rummikub-tile {
  cursor: grab;
  touch-action: none;
}

.rummikub-tile.is-dragging {
  position: fixed;
  z-index: 6;
  margin: 0;
  transform: none;
  pointer-events: none;
  cursor: grabbing;
}

.rummikub-slot {
  width: 46px;
  height: 62px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.28);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.75);
}

.rummikub-face {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px currentColor;
  font: 800 16px/1 ui-sans-serif, system-ui, sans-serif;
}

.rummikub-tile.is-red { color: #d32626; }
.rummikub-tile.is-blue { color: #1d4e9e; }
.rummikub-tile.is-black { color: #1a1a1a; }
.rummikub-tile.is-yellow { color: #e06a12; }
.rummikub-tile.is-joker { color: #6424bb; }
.rummikub-tile.is-picked {
  outline: 3px solid var(--tool-accent);
  outline-offset: 2px;
  transform: translateY(-8px);
}

.rummikub-rack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 640px);
}

.rummikub-layout > .table-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.rummikub-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
}

.rummikub-row.is-second {
  position: relative;
  z-index: 1;
  margin-top: -28px;
  margin-left: 18px;
}

.rummikub-hand {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-height: 92px;
  padding: 18px 16px 20px;
  border-radius: 8px;
  background:
    linear-gradient(#f4ddb4, #f4ddb4) top / 100% 14px no-repeat,
    linear-gradient(#b88848, #b88848) bottom / 100% 16px no-repeat,
    linear-gradient(180deg, #e8c48a 0%, #d7ae72 100%);
  box-shadow:
    inset 0 0 0 2px #a8763c,
    0 8px 16px rgb(40 24 8 / 0.22);
}

.rummikub-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.rummikub-meld { padding: 6px; border-radius: 10px; background: var(--tool-track); }

.klondike-top,
.klondike-columns { align-items: flex-start; }
.klondike-column { display: flex; flex-direction: column; min-height: 72px; }
.klondike-card {
  width: 48px;
  height: 68px;
  margin-top: -40px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #222;
  font: 700 13px/68px ui-sans-serif, system-ui, sans-serif;
  box-shadow: inset 0 0 0 1px #222;
  cursor: pointer;
}
.klondike-column .klondike-card:first-child,
.klondike-top .klondike-card { margin-top: 0; }
.klondike-card[data-red="true"] { color: #c74444; }
.klondike-card.is-down { background: #6424bb; color: transparent; }
.klondike-card.is-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--tool-line); }
.klondike-card.is-picked { outline: 3px solid var(--tool-accent); }

.pool-scene { flex-direction: column; align-items: center; gap: 12px; overflow: hidden; }
.pool-stage {
  width: min(100%, 720px, calc((100dvh - var(--scoreboard-bottom, 88px) - 48px) * 2));
  max-height: calc(100dvh - var(--scoreboard-bottom, 88px) - 48px);
}
.pool-table {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  max-height: calc(100dvh - var(--scoreboard-bottom, 88px) - 48px);
  touch-action: none;
  border-radius: 12px;
}

.catan-map {
  width: min(100%, 720px, calc((100dvh - var(--scoreboard-bottom, 80px) - 170px) * 1058 / 958));
  height: auto;
  background: transparent;
}
.catan-map polygon.is-hot {
  cursor: pointer;
  fill: rgb(255 255 255 / 0.2);
  stroke: #ffffff;
  stroke-width: 3;
}
.catan-map line.is-road,
.catan-map circle.is-spot { cursor: pointer; }

.yams-again-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.belote-contract,
.uno-over {
  margin: 0;
  font: 700 16px/1.3 ui-sans-serif, system-ui, sans-serif;
  text-align: center;
}

.tarot-card.is-atout {
  background:
    radial-gradient(circle at 50% 46%, #f8e7b0 0 34%, transparent 35%),
    linear-gradient(#1c3f78, #1c3f78);
  color: #f8e7b0;
  box-shadow: inset 0 0 0 4px #e2b12c, inset 0 0 0 8px #1c3f78;
}

.tarot-card.is-atout .playing-rank,
.tarot-card.is-atout .playing-suit { display: none; }

.atout-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.atout-numeral {
  font: 750 42px/1 "Iowan Old Style", Palatino, Georgia, serif;
}

.atout-caption {
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tarot-card[data-kind="excuse"].is-atout {
  background:
    radial-gradient(circle at 50% 42%, #fff 0 18%, transparent 19%),
    linear-gradient(#f4e2a8, #e7c56a);
  color: #6b3b08;
  box-shadow: inset 0 0 0 4px #6b3b08, inset 0 0 0 8px #f4e2a8;
}

@media (max-width: 680px) {
  .chess-scene,
  .domino-scene,
  .triomino-scene,
  .rummikub-scene,
  .klondike-scene,
  .pool-scene,
  .catan-scene {
    padding-top: max(72px, var(--scoreboard-bottom, 0px));
  }

  .klondike-card { width: 40px; height: 58px; margin-top: -34px; font-size: 11px; line-height: 58px; }
}