/* Touch-first adjustments. Desktop styles remain the default. */
.map { background: #6f9caf !important; }
#mapViewport { position:absolute; inset:0; transform-origin:center center; touch-action:none; will-change:transform; }
.map-background { position:absolute; inset:0; background:#6f9caf url('/bay.png') center/cover no-repeat; }
#route { touch-action:none; }
#mapZoomControls { position:absolute; z-index:12; top:92px; left:20px; display:flex; flex-direction:column; gap:7px; pointer-events:auto; }
#mapZoomControls button { width:38px; height:38px; border:0; border-radius:12px; background:#ffffffe8; color:#243246; box-shadow:0 5px 14px #203c4b35; font:800 24px/1 "Baloo 2",sans-serif; cursor:pointer; pointer-events:auto; }
#mapZoomControls button:last-child { font-size:20px; }

@media (max-width: 700px) {
  .map { min-height: 100svh; height: 100svh; background-size: contain; background-color: #6f9caf; }
  .map-background { background-size: contain; }
  header { padding: calc(10px + env(safe-area-inset-top)) 10px 10px; gap: 8px; align-items: flex-start; }
  .hud { border-radius: 14px; box-shadow: 0 5px 14px #203c4b35; }
  .title { padding: 9px 12px; }
  .title b { font-size: 18px; }
  .title small { display: none; }
  .progress { min-width: 126px; padding: 9px 11px; font-size: 12px; }
  .progress i { height: 8px; }
  .hint { bottom: max(18px, env(safe-area-inset-bottom)); width: calc(100% - 28px); max-width: 410px; padding: 10px 14px; text-align: center; font-size: 13px; }
  .editor-toggle { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 9px 12px; }
  #mapZoomControls { top: calc(62px + env(safe-area-inset-top)); left: 12px; gap: 6px; }
  #mapZoomControls button { width:40px; height:40px; }
  .marker text { font-size: 17px; stroke-width: 4.5px; }

  .overlay { padding: 10px; align-items: end; }
  .card { width: 100%; max-height: calc(100svh - 20px); border-radius: 23px; }
  .intro, .finish { padding: 25px 20px calc(24px + env(safe-area-inset-bottom)); }
  .intro h1, .finish h1 { font-size: 27px; }
  .emoji { font-size: 46px; }
  .rules { margin: 18px 0; }
  .rules div { margin: 10px 0; font-size: 14px; }
  .cta { min-height: 52px; font-size: 17px; }

  .preview .photo { height: min(54vw, 330px); }
  .body { padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); }
  .body h2, .quiz .body h2 { font-size: 21px; }
  .preview p { margin: 9px 0 0; font-size: 15px; }
  .badge { left: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .quiz-head { padding: 14px 16px; border-radius: 23px 23px 0 0; }
  .quiz-head h2 { font-size: 18px; }
  .number { min-width: 38px; text-align: center; }
  .option { min-height: 54px; padding: 11px; font-size: 15px; line-height: 1.25; }
  .option .dot { width: 24px; height: 24px; }
  .fact { padding: 14px; }

  .editor { width: 100vw; max-width: 100vw; }
  .editor-head { padding: calc(14px + env(safe-area-inset-top)) 16px 14px; }
  .editor-body { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
  .tabs button { min-width: 34px; min-height: 34px; }
  input, textarea { font-size: 16px; } /* prevents automatic Safari zoom */
  .footer { padding-bottom: env(safe-area-inset-bottom); }
}