/* Mobile play: the board owns drags; the browser must not turn them into
   text selection, pull-to-refresh or horizontal history navigation.
   Loaded by both shells and by the older games' iframe documents. */
@media (any-pointer: coarse) {
  html, body { overscroll-behavior: none; }

  body, body * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  /* Replies, notes and search still need a caret, selection and paste. */
  input, textarea, [contenteditable]:not([contenteditable="false"]),
  [contenteditable]:not([contenteditable="false"]) * {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  html:has(body.game), html:has(body.playing) {
    height: 100%;
    overflow: hidden;
  }
  body.playing { height: 100dvh; overflow: hidden; }
  /* Include the header, thumb controls and empty board margins. Protecting
     only the canvas leaves a drag starting just beside it to the browser. */
  body.game > .gbar, body.game > .stagewrap,
  body.game > .gfoot, body.game > .pad,
  body.playing > .masthead, body.playing .play-shell,
  canvas {
    touch-action: none;
  }
  canvas, .stage img { -webkit-user-drag: none; }
  /* These canvases are previews in scrolling choosers, not play surfaces. */
  .lobby-page canvas, .world-card canvas { touch-action: pan-y; }

  /* These are actual scroll containers: touch-action is resolved at the
     nearest scroller, so long menus can scroll inside the locked play page. */
  .end, .card, .set-pop, dialog, .lw-guide-content {
    touch-action: pan-y;
    overscroll-behavior: none;
  }
  .set-pop { max-height: calc(100dvh - 74px); overflow: auto; }
  .stage .end, .stage .card { max-height: 100%; }
  .overlay.is-end.is-top .end { max-height: calc(100% - 54px); }
}

/* Harbour keeps its painted town; its controls use the quiet shared chrome. */
.harbour-tools{position:absolute;inset:0;pointer-events:none;z-index:5}
.harbour-tools button{position:absolute;display:grid;place-items:center;pointer-events:auto;border:1px solid color-mix(in srgb,var(--g-ink) 18%,transparent);border-radius:4px;background:color-mix(in srgb,var(--g-panel) 94%,transparent);color:var(--g-ink);font:var(--chrome);padding:0 8px;line-height:1.2;cursor:pointer;box-shadow:none;white-space:nowrap}
.harbour-tools button:hover:not(:disabled){background:var(--g-panel)}.harbour-tools button:disabled{opacity:.4;cursor:default}.harbour-tools button:focus-visible{outline:2px solid var(--g-accent-2);outline-offset:2px}
.harbour-tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.harbour-swatch{width:22px;height:22px;display:block;border-radius:50%;border:1px solid color-mix(in srgb,var(--g-ink) 35%,transparent)}
.harbour-hud .pill{column-gap:6px;font:var(--chrome);border-radius:4px;white-space:nowrap}
.harbour-hud .pill b{font-weight:500}
.stage:has(.harbour-tools)>.toast{top:64px;bottom:auto;width:max-content;max-width:calc(100% - 24px);font:var(--chrome);text-align:center}