/* Own map gestures without changing touch scrolling in the hero list or page. */
.zoom-help-toggle { font-size: 19px; color: #4d6d51; flex-shrink: 0; }
.zoom-help { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #dce3d4; background: #f3f6ee; color: #50634f; font-size: 12px; line-height: 1.7; }
.zoom-help p { margin: 0; }
.zoom-help strong { margin-right: 6px; color: #294936; }
.zoom-help button { flex-shrink: 0; min-height: 36px; padding: 0 10px; border: 1px solid #ccd7c6; border-radius: 6px; background: #fffefa; }
@media (max-width:540px) {
  .zoom-help { align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .zoom-help button { min-height: 44px; margin-left: auto; }
  .zoom-help-toggle { min-width: 44px; min-height: 44px; }
}
.board-viewport, .board-viewport .board, .board-viewport .cell { touch-action: none; }
.board-viewport { overflow-anchor: none; overscroll-behavior: auto; }
.board-viewport.is-navigating, .board-viewport.is-navigating * { cursor: grabbing !important; user-select: none; }
.hero-panel-actions { display: flex; align-items: center; gap: 6px; }
.hero-panel-collapse { display: inline-flex; width: 30px; height: 32px; border: 1px solid #dce3d4; background: #f3f6ee; }
.hero-panel-collapse span, .hero-panel-expand { display: none; }
.workspace.heroes-collapsed > .hero-panel { display: none; }
.workspace.heroes-collapsed .hero-panel-expand { display: inline-flex; min-height: 38px; border: 1px solid #d6dfcf; background: #fffefa; color: #4d6d51; }
@media (min-width:901px) {
  .workspace.heroes-collapsed { grid-template-columns: minmax(0,1fr); }
}
@media (max-width:900px) {
  .hero-panel-collapse { width: auto; min-width: 64px; height: 44px; padding: 0 8px; gap: 4px; }
  .hero-panel-collapse span { display: inline; font-size: 11px; }
  .hero-panel-collapse svg, .hero-panel-expand svg { transform: rotate(-90deg); }
  .workspace.heroes-collapsed .hero-panel-expand { min-height: 44px; }
  .heroes-collapsed .map-heading { flex-wrap: wrap; gap: 12px; }
  .heroes-collapsed .map-heading-actions { flex-wrap: wrap; gap: 8px; max-width: 100%; }
}
@media (max-width:540px) {
  .heroes-collapsed .map-heading-actions { flex: 1 1 100%; }
  .heroes-collapsed .map-heading-actions .team-counts { margin-right: auto; }
  .heroes-collapsed .map-heading-actions #scene-open { min-width: 54px; padding-inline: 10px; }
  .heroes-collapsed .hero-panel-expand { padding-inline: 8px; }
}