.board { min-width:0; min-height:0; max-width:100%; max-height:100%; transform: none; transition: none; animation: none; contain: layout paint; }
[hidden] { display:none!important; }
.board .cell { min-width:0; min-height:0; overflow:hidden; transform: none; transition: none; animation: none; }
.entrances { min-width:0; min-height:0; max-width:100%; max-height:100%; }
.board .cell.moving { animation: push-in 180ms ease-out both; }
.board.move-left .cell.moving{--move-x:-100%;--move-y:0}.board.move-right .cell.moving{--move-x:100%;--move-y:0}.board.move-top .cell.moving{--move-x:0;--move-y:-100%}.board.move-bottom .cell.moving{--move-x:0;--move-y:100%}
.overlay.full-push{color:#fff4d7;background:#962c20e8;font-size:clamp(28px,8vw,44px)}
.cell .piece { display:block; max-width:100%; max-height:100%; line-height:1; }
.cell.o .piece { font-size:88%; }
.choice-help { margin:0 2px 5px; text-align:center; color:#65584b; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.entry { display:grid; place-items:center; line-height:1; }
.entry b { font-size:.82em; }
.entry small { font-size:9px; margin-top:-3px; }
.entry.full-push-entry small{font-size:7px;white-space:nowrap;color:#a52a22}
.entry.legal { animation:none!important; }
.brand span { font-size: .52em; letter-spacing: .06em; white-space: nowrap; }
.player.timing { border-color: #a52a22; background: #fff3dc; box-shadow: inset 4px 0 #a52a22; }
.player.timing .clock { color: #a52a22; }
.clock-label { min-width: 4.5em; text-align: right; font-size: 12px; font-weight: 900; color: #a52a22; }
.announcement { white-space: pre-line; text-align: center; line-height: 1.15; }
.announcement small { display: block; margin-top: 10px; font: 700 17px system-ui,-apple-system,"Noto Sans JP",sans-serif; }
.overlay>small{display:block;margin-top:10px;text-align:center;font:700 16px system-ui,-apple-system,"Noto Sans JP",sans-serif}
@keyframes push-in { from { transform:translate(var(--move-x,0),var(--move-y,-8px)); opacity:.72; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .board .cell.moving { animation: none; } }

/* Keep every match control in the visible viewport. The arena is limited by
   whichever is smaller: available width or the height left after controls. */
.shell:not(.home) {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding-top: max(6px, env(safe-area-inset-top));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.shell:not(.home) .topbar { flex: 0 0 auto; min-height: 28px; }
.shell:not(.home) .arena {
  --arena-size: min(calc(100vw - 28px), 492px, calc(100dvh - 356px));
  width: var(--arena-size);
  height: var(--arena-size);
  min-height: 0;
  aspect-ratio: 1;
  align-self: center;
  flex: 0 0 auto;
  margin: 2px auto;
  grid-template-columns: clamp(34px, 6dvh, 48px) 1fr clamp(34px, 6dvh, 48px);
  grid-template-rows: clamp(34px, 6dvh, 48px) 1fr clamp(34px, 6dvh, 48px);
}
.shell:not(.home):has(.direction) .arena {
  --arena-size: min(calc(100vw - 28px), 492px, calc(100dvh - 404px));
}
.shell:not(.home) .player,
.shell:not(.home) .phase,
.shell:not(.home) .status,
.shell:not(.home) .choice-help,
.shell:not(.home) .choices,
.shell:not(.home) .direction,
.shell:not(.home) .confirm,
.shell:not(.home) .rematch { flex: 0 0 auto; }
.shell:not(.home) .entry {
  width: 100%;
  height: 100%;
  min-width: 34px;
  min-height: 34px;
  font-size: clamp(22px, 4dvh, 30px);
}
.shell:not(.home) .cell { font-size: clamp(32px, 10dvh, 68px); }

@media (max-height: 760px) {
  .shell:not(.home) .player { padding: 5px 10px; }
  .shell:not(.home) .clock { font-size: 21px; }
  .shell:not(.home) .phase { min-height: 32px; padding: 5px; }
  .shell:not(.home) .status { min-height: 18px; line-height: 18px; }
  .shell:not(.home) .choice-help { margin-bottom:3px; font-size:10px; line-height:1.25; }
  .shell:not(.home) .choice,
  .shell:not(.home) .confirm,
  .shell:not(.home) .rematch button { min-height: 42px; padding: 8px 12px; }
  .shell:not(.home) .confirm { margin-top: 5px; }
  .shell:not(.home) .direction { margin-top: 4px; }
  .shell:not(.home) .direction button { min-height: 36px; }
  .shell:not(.home) .arena {
    --arena-size: min(calc(100vw - 28px), 492px, calc(100dvh - 318px));
  }
  .shell:not(.home):has(.direction) .arena {
    --arena-size: min(calc(100vw - 28px), 492px, calc(100dvh - 360px));
  }
}

/* Extremely short landscape windows remain usable via a last-resort scroll. */
@media (max-height: 560px) {
  .shell:not(.home) { overflow-y: auto; }
  .shell:not(.home) .arena {
    --arena-size: min(calc(100vw - 28px), 300px, calc(100dvh - 292px));
  }
  .shell:not(.home):has(.direction) .arena {
    --arena-size: min(calc(100vw - 28px), 280px, calc(100dvh - 326px));
  }
}

.choice.defense{color:#1f416c}
.direction button.defense.selected{background:#1f416c;border-color:#1f416c;color:#fff}