/* The scrollable gallery and the games share gesture protection, not layout. */
html.play-viewport, html.play-viewport body { touch-action: pan-x pan-y; }
html.play-game, html.play-game body {
  height: var(--play-height, 100%);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html.play-game body > .app,
html.play-game body > .game,
html.play-game body > .wrap {
  height: 100%;
  min-height: 0;
}
/* A browser-restored zoom needs a way out. The canvas must also release its
   touch-action:none, otherwise allowing Safari's gesture events is not enough. */
html.play-zoom-recovery, html.play-zoom-recovery * {
  touch-action: auto !important;
}
/* A small visible icon with a forgiving, transparent touch target. */
html.play-fullscreen-ready { --play-screen-slot: 48px; }
html.play-fullscreen-active { --play-screen-slot: 0px; }
.play-fullscreen-button {
  position: fixed;
  z-index: 50;
  top: max(6px, env(safe-area-inset-top));
  right: max(6px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  opacity: .68;
  -webkit-user-select: none;
  user-select: none;
}
.play-fullscreen-button::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid currentColor;
  border-radius: 5px;
  opacity: .35;
}
.play-fullscreen-button:hover, .play-fullscreen-button:focus-visible { opacity: 1; }
.play-fullscreen-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.play-fullscreen-button[hidden] { display: none; }
/* Reserve space only alongside existing top controls, not across the canvas.
   The slot disappears in full-screen mode along with the entry button. */
html.play-fullscreen-ready .app-header,
html.play-fullscreen-ready .intro,
html.play-fullscreen-ready .station-ui,
html.play-fullscreen-ready .topbar:not(#topbar) {
  padding-right: var(--play-screen-slot);
}
html.play-fullscreen-ready:not(.play-fullscreen-active) .app-header { min-height: 38px; }
html.play-fullscreen-ready #topbar { padding-right: calc(14px + var(--play-screen-slot)); }
@media (orientation: landscape) {
  html.play-fullscreen-ready .wrap .progress-top { padding-right: var(--play-screen-slot); column-gap: 6px; }
  html.play-fullscreen-ready .wrap .lvl-left { flex-wrap: wrap; gap: 3px 8px; }
  html.play-fullscreen-ready .wrap .reset-btn { flex-shrink: 0; white-space: nowrap; }
}
.play-screen-notice {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 12px 16px;
  border: 1px solid #c6c6ad;
  border-radius: 12px;
  background: #fffbea;
  color: #3c5146;
  box-shadow: 0 3px 14px #20362c24;
  font: 14px/1.6 system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  transform-origin: top center;
}
.play-screen-notice[hidden] { display: none; }