/* The fixed dock reserves its actual art height in the game and modal layout. */
.game-shell {
  --slate-dock-width: min(calc(100vw - 16px), 400px);
  --dock-height: calc(var(--slate-dock-width) * 587 / 1600);
  --tap-row: calc(var(--tap-art-width) * 501 / 1600 + 28px);
  --slate-extra-stage-height: calc(
    var(--dock-height) - 88px + var(--tap-art-width) * (501 / 1600 - 758 / 2076)
  );
  height: calc(max(100dvh, 1000px) + var(--slate-extra-stage-height));
}

.slate-tap-zone .tap-button {
  display: block;
  aspect-ratio: 1600 / 501;
}
.slate-tap-zone .tap-button img {
  height: 100%;
  object-fit: contain;
}
.slate-tap-zone .tap-button.pressed {
  transform: translateY(2px);
}

.slate-dock {
  width: var(--slate-dock-width);
  height: var(--dock-height);
  bottom: var(--safe-bottom);
  display: block;
  padding: 0;
}
.slate-dock .dock-stone {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.slate-dock .nav-button {
  position: absolute;
  left: var(--seat-x);
  top: 49.0046%;
  width: 21.8539%;
  aspect-ratio: 1;
  display: block;
  border-radius: 15%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 2px #08151a8c);
  transition: transform .12s ease-out, filter .12s ease-out;
}
.slate-dock .seat-shop { --seat-x: 21.0112%; }
.slate-dock .seat-mentors { --seat-x: 50.1124%; }
.slate-dock .seat-casino { --seat-x: 79.0449%; }
.slate-dock .nav-button[aria-pressed="true"] {
  filter: drop-shadow(0 2px 3px #08151a8c) brightness(1.14);
}
.slate-dock .nav-button:active {
  transform: translate(-50%, calc(-50% + 2px));
  filter: drop-shadow(0 1px 1px #08151a8c) brightness(.93);
}
.slate-dock .nav-button:focus-visible {
  outline: 2px solid #b6edf4;
  outline-offset: 3px;
}
.slate-dock .nav-stone {
  width: 100%;
  height: 100%;
  user-select: none;
}
.slate-dock .nav-icon-slot {
  position: absolute;
  left: 18.9162%;
  top: 19.9387%;
  width: 61.3497%;
  height: 61.3497%;
  border-radius: 16%;
  overflow: hidden;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.slate-dock .nav-icon-slot img {
  display: block;
  width: 94%;
  height: 94%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  user-select: none;
}
.slate-dock .nav-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #fff1d0;
}

/* Keep the tall stone clear of the character and tap area on short screens. */
@media (max-height: 839px) {
  .game-shell:not(:has(.veil)) .slate-dock { position: absolute; }
}

@media (prefers-reduced-motion: reduce) {
  .slate-dock .nav-button { transition: none; }
}