/* Hallmark · Map / Diagram · existing brand tokens and Tilda Sans
 * Pre-emit critique: Philosophy 5 · Hierarchy 5 · Execution 4 · Specificity 5 · Restraint 5 · Variety 4 */
.development-button { display: none; }
.development-sheet #purchase-controls { display: grid; gap: 16px; }
.development-sheet .spend-choice { padding: 0; }
.development-sheet .map-route-goal { border-radius: 12px; padding: 16px; min-height: 76px; }
.development-sheet .offer-heading { margin-bottom: 12px; }
.development-sheet #next-offer { min-height: 44px; }
@media (max-width: 899px) {
  .game-hud { padding: max(4px, env(safe-area-inset-top)) 12px 4px; gap: 8px; min-height: 54px; }
  .game-hud .brand-logo { width: 54px; height: 45px; }
  .game-hud .brand-game-title { display: none; }
  .game-hud .wallet { padding: 5px 10px; }
  .game-hud .wallet strong { font-size: 19px; }
  .map-shell .map-viewport, .map-shell:has(#region-navigation[hidden]) .map-viewport { inset: 0 0 78px; }
  .map-viewport:focus:not(:focus-visible) { outline: none; }
  .map-location { top: 12px; left: 12px; right: 62px; gap: 8px; }
  .map-location h1 { font-size: 22px; margin: 0; }
  #map-kicker, #map-subtitle { display: none; }
  .map-location > div { min-width: 0; }
  .map-back { width: 44px; height: 44px; flex-shrink: 0; }
  .region-navigation { top: 48px; left: 12px; right: 66px; gap: 6px; }
  .region-navigation select, .region-navigation button { min-height: 44px; font-size: 11px; padding: 6px 8px; }
  .region-navigation select { flex: 1; min-width: 0; max-width: 220px; }
  .map-tools { right: 10px; top: 12px; gap: 8px; }
  .map-tools button { width: 44px; height: 44px; min-height: 44px; }
  .map-compass { display: none; }
  .map-bottom { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 8px; bottom: 10px; left: 12px; right: 12px; width: auto; transform: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  #purchase-home { display: none; }
  .development-button:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 14px; min-height: 58px; font-size: 12px; font-weight: 750; box-shadow: 0 3px 0 var(--color-shadow); }
  .development-button svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .map-collect { position: relative; display: block; padding: 0; min-width: 0; border-radius: 14px; background: var(--color-accent); box-shadow: 0 3px 0 var(--color-brand-deep); overflow: clip; }
  .map-collect > div { position: absolute; top: 29px; left: 8px; right: 8px; text-align: center; pointer-events: none; }
  .map-collect #map-income { font-size: 11px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-ink); }
  #map-income-hint { display: none; }
  .map-collect #map-collect { display: block; width: 100%; height: 58px; padding: 5px 8px 26px; min-width: 0; border: 0; border-radius: 14px; box-shadow: none; font-size: 15px; background: var(--color-accent); color: var(--color-ink); }
  .map-collect:has(#map-collect:disabled) { background: var(--color-paper); box-shadow: 0 3px 0 var(--color-shadow); }
  .map-collect #map-collect:disabled { background: var(--color-paper); opacity: 1; }
  .game-dock { padding: 4px 10px max(4px,env(safe-area-inset-bottom)); gap: 6px; }
  .game-dock button { min-height: 48px; font-size: 10px; }
  .game-dock svg { width: 21px; height: 21px; }
  .development-sheet { inset: auto 0 0; margin: 0; width: 100%; max-width: none; max-height: min(80dvh,560px); border-radius: 22px 22px 0 0; }
  .map-toast { z-index: 5; }
}