:root {
  --bg: #1f5135;
  --bg-text: #f3f1ea;
  --panel: #173f29;
  --accent: #f2b632;
  --focus: #5cc8ff;
  --tile: #fbf7ec;
  --tile-edge: #c9b98f;
  --tile-border: #8c7b52;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--bg-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app {
  --col: 56px;
  display: flex;
  height: 100%;
}

/* Thin side columns. Counters sit at the bottom and their labels may
   run out over the board, underneath the tiles. */
.side {
  position: relative;
  z-index: 0;
  flex: 0 0 var(--col);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}

.counter {
  position: absolute;
  bottom: 12px;
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
  font-size: 0.85rem;
  opacity: 0.85;
}
.counter .num {
  display: inline-block;
  width: var(--col);
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.counter-left { left: 0; }
.counter-right { right: 0; }

/* Zoom and install buttons: bottom of the right column, above the counter. */
.zoom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto 0 44px;
}
.btn:disabled { opacity: 0.4; cursor: default; filter: none; }

.btn {
  min-height: 44px;
  min-width: 96px;
  padding: 8px 18px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--accent);
  color: #1d1d1d;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.08); }
.btn[hidden] { display: none; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.icon-btn {
  width: 44px;
  height: 44px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.icon-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stuck: shuffle button pulses until the auto-shuffle runs. */
.btn.pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse {
  50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(242, 182, 50, 0.35); }
}

/* Board ---------------------------------------------------------------- */

.board-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex; /* with margin:auto on .board: centred, but scrollable when larger */
  padding: 8px 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.board-wrap.dealing { overflow: hidden; }
.board-wrap.deal-wide { overflow: visible; }
.board-wrap.dealing .tile { pointer-events: none; }

.board {
  --tw: 48px;
  --th: calc(var(--tw) * 1.3);
  --d: calc(var(--tw) * 0.1); /* per-layer depth offset */
  --glyph: 1; /* face size inside tiles, set by the zoom buttons */
  position: relative;
  /* --cols, --rows, --layers are set per layout by game.js */
  width: calc(var(--tw) * var(--cols) + var(--d) * var(--layers));
  height: calc(var(--th) * var(--rows) + var(--d) * var(--layers));
  flex: none;
  margin: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tile {
  position: absolute;
  left: calc(var(--x) * var(--tw) / 2 + (var(--layers) - var(--l)) * var(--d));
  top: calc(var(--y) * var(--th) / 2 + (var(--layers) - var(--l)) * var(--d));
  width: var(--tw);
  height: var(--th);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden; /* faces scaled above 1x clip at the tile edge */
  border: 1px solid var(--tile-border);
  border-radius: calc(var(--tw) * 0.12);
  background: var(--tile);
  box-shadow:
    calc(var(--d) * 0.6) calc(var(--d) * 0.8) 0 var(--tile-edge),
    calc(var(--d) * 0.8) calc(var(--d) * 1.2) calc(var(--d) * 1.2) rgba(0, 0, 0, 0.6);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
}
.tile[hidden] { display: none; }

/* Copy of a removed tile, animated by animateRemoval() in game.js. */
.tile.ghost {
  position: fixed;
  z-index: 15000;
  pointer-events: none;
  transition: none;
}

.tile .face {
  flex: none;
  width: calc(var(--tw) * 0.84 * var(--glyph)); /* the art fills its box; 0.84 keeps the largest step inside the tile */
  height: auto;
  pointer-events: none;
}

/* Blocked: hatched, so it reads without colour. */
.tile.blocked { cursor: default; }
.tile.blocked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.18) 0 3px, transparent 3px 7px);
  pointer-events: none;
}

/* Selected: thick inner outline + lift. */
.tile.selected {
  background: #fff3c4;
  outline: 4px solid #d08a00;
  outline-offset: -4px;
  transform: translateY(-3px);
}

/* Hint: dashed inner outline. */
.tile.hint {
  outline: 3px dashed #0b6bcb;
  outline-offset: -5px;
  background: #e3f1ff;
}

.tile:focus-visible {
  z-index: 9999 !important;
  box-shadow: 0 0 0 3px var(--focus), 0 0 0 5px #0b2e44;
}

/* Overlay -------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20000;
  display: flex;
  justify-content: center;
  padding: 16px;
}
.overlay[hidden] { display: none; }
.overlay-box {
  max-width: 420px;
  width: 100%;
  padding: 16px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  background: var(--panel);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.overlay-box p { margin: 0 0 12px; font-size: 1.1rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile.selected { transform: none; }
  .btn.pulse { animation: none; box-shadow: 0 0 0 4px var(--focus); }
}