/* The board uses the space left after its controls, instead of a guessed
   viewport subtraction. Its grid and the arrows stay in one portrait view. */
.game-shell.garden-viewport {
  display: grid;
  grid-template-rows: var(--game-settings-height) auto minmax(180px, 1fr) 42px auto;
  gap: 8px;
  height: 100dvh;
  min-height: 540px;
  max-width: 1000px;
  padding: var(--game-settings-top) 18px max(12px, env(safe-area-inset-bottom));
  overflow-anchor: none;
}
.garden-viewport > .game-settings-bar { margin: 0; }
.game-shell.garden-viewport .team-row { display: flex; flex-wrap: nowrap; gap: 9px; margin: 0; min-width: 0; }
.garden-viewport .team-chip { min-height: 48px; padding: 3px 10px 3px 4px; gap: 6px; }
.garden-viewport .team-chip .avatar { width: 40px; height: 40px; }
.garden-viewport .team-chip b { font-size: 15px; line-height: 1.2; margin: 0; }
.garden-viewport .leader-badge { font-size: 10px; line-height: 1.2; }
.garden-viewport .team-row .together-icon { width: 44px; height: 44px; padding: 5px; box-shadow: none; }
.garden-viewport .together-icon .game-action-icon { width: 29px; height: 29px; }
.garden-key-indicator { color: #a78a42; font-size: 25px; }
.garden-key-indicator.collected { color: #60873c; }
.garden-board-space { min-width: 0; min-height: 0; display: grid; place-items: center; container-type: size; padding: 4px; }
.game-shell.garden-viewport .board-wrap {
  width: min(100%, calc((100cqh - 12px) * var(--board-ratio) + 12px));
  max-width: none;
  margin: 0;
  border-width: 6px;
  border-radius: 22px;
  flex: none;
}
.garden-viewport .board { width: 100%; height: auto; }
.game-shell.garden-viewport .tip { align-self: center; display: flex; align-items: center; justify-content: center; min-height: 0; height: 42px; margin: 0; padding: 3px 8px; font-size: 16px; line-height: 1.25; word-break: keep-all; }
.garden-controller { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 5vw, 44px); min-width: 0; padding: 3px 0; }
.game-shell.garden-viewport .game-tools { display: grid; grid-template-columns: repeat(3, 52px); grid-auto-rows: 52px; gap: 9px; margin: 0; flex-wrap: nowrap; }
.garden-viewport .game-tools .game-action { width: 52px; height: 52px; min-height: 52px; padding: 8px; border-radius: 16px; }
.garden-viewport .game-action .game-action-icon { width: 30px; height: 30px; }
.garden-viewport .game-action-badge { min-width: 20px; height: 20px; padding: 0 3px; top: -5px; right: -5px; font-size: 12px; }
.garden-viewport .game-tools .garden-memory-note,
.garden-viewport .game-tools .garden-peek-tool { display: contents; }
.garden-viewport .garden-memory-note > div[role=status],
.garden-viewport .garden-peek-tool > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.garden-viewport .game-tools > p.garden-discovery-note { display: grid; place-items: center; width: 52px; height: 52px; margin: 0; padding: 3px; font-size: 0; line-height: 1; color: #638148; }
.garden-viewport .game-tools > p.garden-discovery-note::before { content: '✓'; font-size: 24px; }
.garden-viewport .game-tools > p.garden-discovery-note::after { content: '수확 완료'; font-size: 10px; }
.game-shell.garden-viewport .controls { gap: 13px; margin: 0; }
.game-shell.garden-viewport .dpad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(2, 54px); gap: 6px; }
.garden-viewport .dpad button { min-width: 44px; min-height: 44px; padding: 0; }
.garden-viewport .move-info,
.garden-viewport .rest-info { width: 58px; font-size: 11px; }
.garden-viewport .move-info strong,
.garden-viewport .rest-info strong { font-size: 24px; }

@media (max-width: 650px) {
  .game-shell.garden-viewport { padding-inline: 10px; gap: 6px; }
  .garden-viewport .move-info,
  .garden-viewport .rest-info { display: none; }
  .garden-controller { gap: clamp(14px, 5vw, 32px); }
}
@media (max-width: 420px) {
  .game-shell.garden-viewport { grid-template-rows: var(--game-settings-height) auto minmax(160px, 1fr) 32px auto; gap: 5px; padding-inline: 8px; padding-bottom: max(9px, env(safe-area-inset-bottom)); }
  .game-shell.garden-viewport .team-row { gap: 6px; }
  .garden-viewport .team-chip { min-height: 44px; padding: 3px 6px 3px 3px; gap: 4px; }
  .garden-viewport .team-chip .avatar { width: 32px; height: 32px; }
  .garden-viewport .team-chip b { font-size: 13px; }
  .garden-viewport .leader-badge { font-size: 9px; }
  .garden-key-indicator { font-size: 21px; }
  .game-shell.garden-viewport .tip { height: 32px; font-size: 12px; line-height: 1.25; padding: 1px 5px; }
  .garden-controller { gap: 14px; }
  .game-shell.garden-viewport .game-tools { grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; gap: 6px; }
  .garden-viewport .game-tools .game-action { width: 44px; height: 44px; min-height: 44px; padding: 6px; border-radius: 14px; }
  .garden-viewport .game-action .game-action-icon { width: 26px; height: 27px; }
  .garden-viewport .game-tools > p.garden-discovery-note { width: 44px; height: 44px; }
  .game-shell.garden-viewport .dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 6px; }
  .garden-viewport .dpad button { border-radius: 13px; }
  .garden-viewport .garden-search-prompt { padding: 8px; gap: 5px; }
  .garden-viewport .garden-search-prompt strong { font-size: 16px; }
  .garden-viewport .garden-search-prompt div > span { font-size: 11px; }
}

/* Short landscape windows can scroll without losing the movement controls.
   Pinch zoom remains available; the unzoomed page alone is fitted above. */
@media (max-height: 539px) {
  .garden-controller { position: sticky; bottom: 0; z-index: 8; padding-block: 6px; background: #f5fae8f5; border-radius: 18px; }
}