#zoom-dialog { width: min(960px, calc(100vw - 32px)); height: min(880px, calc(100dvh - 32px)); max-height: none; padding: 18px; overflow: hidden; }
#zoom-dialog[open] { display: flex; flex-direction: column; }
.zoom-heading { flex: 0 0 auto; margin-bottom: 10px; }
#zoom-close { min-height: 44px; }
#zoom-content { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.zoom-toolbar { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; }
.zoom-toolbar button { border: 1px solid #b9c7a6; border-radius: 10px; background: #edf2e5; width: 44px; height: 44px; font-size: 24px; font-weight: 500; padding: 0; }
.zoom-toolbar button:disabled { opacity: .45; }
.zoom-toolbar .zoom-fit { width: auto; padding: 0 12px; font-size: 11px; margin-left: auto; }
.zoom-percent { min-width: 50px; text-align: center; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.gesture-tip { flex: 0 0 auto; font-size: 10px; color: #60734f; text-align: center; margin: 0; }
.zoom-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #e3e9d9; border: 1px solid #b9c8a8; border-radius: 12px; touch-action: none; user-select: none; cursor: grab; isolation: isolate; }
.zoom-viewport:active { cursor: grabbing; }
.zoom-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; --zoom-scale: 1; }
.zoom-map-stage { width: 100%; height: 100%; padding: 22px; }
#zoom-content .zoom-world .grid-frame, #zoom-content .zoom-world .with-grid { width: 100%; max-width: none; margin: 0; }
#zoom-content .zoom-world .map-board { width: 100%; max-width: none; max-height: none; margin: 0; touch-action: none; }
#zoom-content .zoom-world .zoom-option, #zoom-content .zoom-world .zoom-landscape { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; pointer-events: none; border: 0; border-radius: 0; }
.zoom-actions { flex: 0 0 auto; }
.zoom-actions .zoom-instruction { font-size: 11px; margin: 3px 0 8px; color: #485d38; }
.zoom-actions .button-primary { width: 100%; min-height: 44px; margin: 0; }
.zoom-world .compass-arrow, .zoom-world .candidate-point { width: calc(38px / var(--zoom-scale)); height: calc(38px / var(--zoom-scale)); font-size: calc(11px / var(--zoom-scale)); border-width: calc(1.5px / var(--zoom-scale)); box-shadow: none; }
.zoom-world .compass-arrow::after, .zoom-world .candidate-point::after { inset: calc(-4px / var(--zoom-scale)); }
.zoom-world .compass-arrow.selected, .zoom-world .candidate-point.selected { box-shadow: 0 0 0 calc(3px / var(--zoom-scale)) #fcfbf5bb; }
.zoom-world .map-marker { width: calc(16px / var(--zoom-scale)); height: calc(16px / var(--zoom-scale)); border-width: calc(3px / var(--zoom-scale)); box-shadow: 0 0 0 calc(2px / var(--zoom-scale)) var(--green); }
.zoom-world .marker-label, .zoom-world .candidate-point.actual-point::before { font-size: calc(9px / var(--zoom-scale)); top: calc(-25px / var(--zoom-scale)); padding: calc(2px / var(--zoom-scale)) calc(5px / var(--zoom-scale)); }
.zoom-world .grid-rows, .zoom-world .grid-columns { font-size: calc(11px / var(--zoom-scale)); }
@media (max-width: 600px) {
  #zoom-dialog { width: 100%; height: 100dvh; max-width: none; margin: 0; border: 0; border-radius: 0; padding: max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); }
  .zoom-heading h2 { font: 650 18px var(--sans); }
  .zoom-heading { margin-bottom: 7px; }
  #zoom-close { padding: 8px 12px; }
  .zoom-viewport { border-radius: 10px; }
  .zoom-toolbar .zoom-fit { font-size: 10px; }
  .zoom-actions .zoom-instruction { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .zoom-world * { animation: none !important; } }

.zoom-angle-controls { flex: 0 0 auto; align-items: center; gap: 8px; margin: 0; }
.zoom-angle-controls .angle-button { min-width: 58px; min-height: 44px; border-radius: 10px; padding: 8px 12px; font-size: 12px; }
.rotation-label { margin-right: auto; font-size: 11px; font-weight: 600; color: #60734f; }