/* A game owns the visual viewport on touch devices in landscape. */
.meadow-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.meadow-actions button, .unity-actions button { min-height: 44px; padding: 8px 12px; border: 1px solid #71c8bf; border-radius: 8px; background: #102b36; color: #fff; font: 700 14px/1.15 Arial, sans-serif; touch-action: manipulation; cursor: pointer; }
.meadow-actions button[hidden] { display: none; }
.meadow-actions button:disabled { opacity: .5; }
.unity-actions { display: flex; gap: 8px; }
#unity-canvas, #gameCanvas { touch-action: none; }
.swarm-options { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.swarm-options button { min-height: 44px; border: 1px solid #71c8bf; border-radius: 8px; background: #102b36; color: #fff; font: 700 14px Arial, sans-serif; padding: 8px; touch-action: manipulation; }
.swarm-options button[hidden] { display: none; }

@media (orientation: landscape) and (any-pointer: coarse) {
  html:has(.arcade-play), body.arcade-play { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body.arcade-play { background: #071631; }
  .arcade-play .arcade-header, .arcade-play .intro, .arcade-play .arcade-footer,
  .arcade-play .gridgrab-3d-intro, .arcade-play .painter-note, .arcade-play .remix-guide,
  .arcade-play .paint-legend, .arcade-play .remix-gallery, .arcade-play .meadow-leap-3d-hint,
  .arcade-play .gridgrab-game-help { display: none; }
  .arcade-play .classic-shell, .arcade-play .gridgrab-3d-shell {
    display: block; position: fixed; inset: 0; width: 100%; height: 100dvh;
    margin: 0; padding: 0; max-width: none;
  }
  .arcade-play .game-wrap, .arcade-play .gridgrab-game {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  }
  .arcade-play .gridgrab-game[hidden] { display: none; }
  .arcade-play .screen-frame { width: min(100%, calc(100dvh * 4 / 3)); max-width: none; margin: 0; }
  .arcade-play #gameCanvas { width: 100%; height: auto; max-height: none; border: 0; border-radius: 0; }
  .arcade-play .control-pad {
    position: absolute; inset: 0; max-width: none; width: 100%; height: 100%;
    margin: 0; padding: 0; min-height: 0; pointer-events: none; transform: none;
  }
  .arcade-play .control-pad > button { display: none; }
  .arcade-play .thumb-controls { display: contents; }
  .arcade-play .arcade-action {
    position: absolute; left: max(8px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom));
    display: grid; align-content: center; justify-items: center; gap: 4px; padding: 8px;
    width: 72px; height: 72px; min-height: 44px; border-radius: 50%; background: #bd4638; color: white;
    font-size: 14px; pointer-events: auto; touch-action: none;
  }
  .arcade-play .mobile-move-controls {
    position: absolute; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom));
    display: block;
  }
  .arcade-play .dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 2px; }
  .arcade-play .dpad-button { min-width: 44px; min-height: 44px; padding: 0; background: #197779; color: #fff; border: 1px solid #8ac9c6; border-radius: 10px; font-size: 18px; pointer-events: auto; touch-action: none; }
  .arcade-play .dpad-up { grid-area: 1 / 2; }
  .arcade-play .dpad-left { grid-area: 2 / 1; }
  .arcade-play .dpad-right { grid-area: 2 / 3; }
  .arcade-play .dpad-down { grid-area: 3 / 2; }
  .arcade-play .dpad-center { grid-area: 2 / 2; align-self: center; justify-self: center; color: #9cdbcc; }
  .arcade-play .swipe-hint { display: none; }
  .arcade-play .arcade-volume {
    position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
    margin: 0; z-index: 2;
  }
  .arcade-play .arcade-volume input, .arcade-play .arcade-volume span,
  .arcade-play #arcadeVolumeDown, .arcade-play #arcadeVolumeUp { display: none; }
  .arcade-play .swarm-options { position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); display: grid; margin: 0; }

  /* Separate gas/brake and steering so both thumbs can be held down. */
  .sunset-rush-page .control-pad > button { display: block; position: absolute; min-width: 60px; min-height: 48px; padding: 8px; pointer-events: auto; touch-action: none; }
  .sunset-rush-page .thumb-controls { display: none; }
  .sunset-rush-page [data-key="ArrowUp"] { left: max(8px, env(safe-area-inset-left)); bottom: 72px; }
  .sunset-rush-page [data-key="ArrowDown"] { left: max(8px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .sunset-rush-page [data-key="ArrowLeft"] { right: calc(max(8px, env(safe-area-inset-right)) + 68px); bottom: max(12px, env(safe-area-inset-bottom)); }
  .sunset-rush-page [data-key="ArrowRight"] { right: max(8px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .sunset-rush-page [data-key=" "] { left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); }

  .arcade-play .meadow-leap-3d-stage { display: block; width: 100%; height: 100%; max-width: none; }
  .arcade-play #frogger3dUnityCanvas { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0; }
  .arcade-play #frogger3dCanvas { position: absolute; left: 50%; transform: translateX(-50%); width: min(100%, calc(100dvh * 48 / 35)); height: 100%; max-height: none; border: 0; }
  .arcade-play .meadow-actions { position: absolute; left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); display: grid; max-width: 108px; padding: 0; z-index: 4; }
  .arcade-play .meadow-leap-3d-hud { left: 120px; right: 8px; top: 4px; }

  .arcade-play .gridgrab-launch { height: 100%; margin: 0; border: 0; border-radius: 0; grid-template-columns: 1fr 1fr; }
  .arcade-play .gridgrab-launch-art { min-height: 0; order: 0; }
  .arcade-play .gridgrab-launch-copy { padding: 20px; order: 1; }
  .arcade-play .gridgrab-launch-copy h2 { font-size: clamp(24px, 4vw, 40px); }
  .arcade-play .gridgrab-launch-eyebrow, .arcade-play .gridgrab-launch-copy > p:not(.gridgrab-launch-eyebrow) { display: none; }
  .arcade-play .unity-container { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
  .arcade-play .gridgrab-game-topline { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom)); z-index: 3; padding: 0; }
  .arcade-play .gridgrab-game-topline > span { display: none; }

  .painter-remix-page .phaser-stage { position: absolute; inset: 0; height: 100%; width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
  .painter-remix-page #gridgrabPainterRemixGame { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
  .painter-remix-page #gridgrabPainterRemixGame canvas { width: min(100vw, calc(100dvh * 4 / 3)) !important; height: min(100dvh, 75vw) !important; margin: 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .painter-remix-page .remix-hud { position: absolute; top: max(6px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); display: grid; gap: 6px; max-width: 145px; margin: 0; padding: 0; font-size: 12px; z-index: 3; }
  .painter-remix-page .remix-status { position: absolute; top: 10px; left: 25%; width: 50%; height: auto; min-height: 0; margin: 0; white-space: normal; pointer-events: none; z-index: 3; }
  .painter-remix-page .gridgrab-fullscreen { right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); }
}