/* Shared mobile controls: the world and its controls stay together. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .nx-games .nx-game {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    isolation: isolate;
  }
  .nx-games .nx-game > .nx-game__scene {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: clamp(370px, 66svh, 560px);
    touch-action: pan-y pinch-zoom;
  }
  .nx-games .nx-game > .nx-game__panel,
  .nx-games .nx-game > .nx-game__finish {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    overflow-wrap: anywhere;
  }
  .nx-games .nx-game .nx-game__touch-controls {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(152px, 1fr) minmax(112px, 1fr);
    align-items: end;
    gap: 8px 12px;
    padding: 8px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border: 0;
    background: linear-gradient(transparent, rgba(8, 15, 30, .65));
    pointer-events: none;
  }
  .nx-games .nx-game .nx-game__touch-controls > * { pointer-events: auto; }
  .nx-games .nx-game .nx-game__dpad {
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template: repeat(2, 48px) / repeat(3, 48px);
    gap: 4px;
    justify-self: start;
  }
  .nx-games .nx-game .nx-game__touch-controls > .nx-game__action-button { grid-column: 2; width: 100%; }
  .nx-games .nx-game .nx-game__dpad button,
  .nx-games .nx-game .nx-game__action-button {
    min-width: 48px;
    min-height: 48px;
    padding: 8px;
    font-size: 14px;
    line-height: 1.2;
    color: #f4fbff;
    background: #193453;
    border: 1px solid #91c2dc;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .nx-games .nx-game .nx-game__dpad button.is-held,
  .nx-games .nx-game .nx-game__action-button:active { background: #216a71; border-color: #a2ffe7; }
  .nx-games .nx-game .nx-game__touch-controls kbd { display: none; }
  .nx-games .nx-game .nx-lightpath__touch-lanes {
    grid-column: 1;
    grid-row: 1 / span 2;
    gap: 8px;
    align-self: end;
  }
  .nx-games .nx-game .nx-lightpath__touch-lanes button { flex: 1; min-height: 64px; }
  .nx-games .nx-game .nx-game__proximity {
    top: 88px;
    bottom: auto;
    max-width: calc(100% - 24px);
    font-size: 13px;
  }
  .nx-games .nx-game .nx-game__choice,
  .nx-games .nx-game .nx-game__sound,
  .nx-games .nx-game .nx-games__text-button,
  .nx-games .nx-game .nx-games__button,
  .nx-games .nx-knowledge button { min-height: 48px; }
  .nx-games .nx-game .nx-game__choice { white-space: normal; line-height: 1.5; }
  .nx-games .nx-game input,
  .nx-games .nx-game select,
  .nx-games .nx-knowledge select,
  .nx-games .nx-knowledge textarea { font-size: 16px; }
  .nx-games .nx-game .nx-game__hud { flex-wrap: wrap; gap: 6px; }
  .nx-games .nx-game :focus-visible { outline: 3px solid #ffda80; outline-offset: 3px; }
}
@media (max-width: 360px) {
  .nx-games .nx-game .nx-game__touch-controls { gap: 8px; padding-right: 8px; padding-left: 8px; grid-template-columns: 152px minmax(96px, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .nx-games .nx-game .nx-game__dpad button,
  .nx-games .nx-game .nx-game__action-button { transition: none; }
}