/* The map keeps readable 44px+ cells; small screens sacrifice whole-map visibility
   and use native scrolling, not tiny tap targets. Controls never shrink. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body .wrap { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
body .title h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.1; mask-image: none; -webkit-mask-image: none; }
body .btn, body .seg button { min-height: 44px; min-width: 44px; flex-shrink: 0; line-height: 1.2; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
body .btn:active { filter: brightness(.85); }
body .sheet { overflow: auto; max-height: 62dvh; overscroll-behavior: contain; }
body svg#board { max-height: none; touch-action: pan-x pan-y pinch-zoom; }
.release-toolbar { width: 100%; display: flex; align-items: center; gap: 8px; }
.release-toolbar span { font-size: 12px; margin-left: auto; color: #bdb79f; }
.briefing { margin-bottom: 12px; border-left: 3px solid #c6a967; }
.briefing p { font-size: 14px; line-height: 1.45; margin: 8px 0; color: #cbc5af; }
body .briefing h2 { color: #e8d39e; font-size: 15px; }
.notice { font-size: 12px; line-height: 1.5; color: #9a9580; }
summary { min-height: 44px; padding: 12px 0; cursor: pointer; touch-action: manipulation; }
#records { padding-left: 18px; font-size: 13px; line-height: 1.8; }
body .flagmode { display: inline-flex; }
[hidden] { display: none !important; }
@media (max-width: 560px) {
  body .controls { gap: 6px; }
  body .controls .seg { flex-basis: 100%; }
  body .legend { display: block; }
  body .sheet { padding: 8px; max-height: 46dvh; }
  body .wrap { gap: 12px; }
}
@media (hover: none) { body .tile:hover { filter: none; } }