/* Controls for keyboard-only classics on a touch screen.
   Shown only where there is no mouse, so a desktop player keeps the keyboard
   and an uncluttered screen. */
@media (hover: none) and (pointer: coarse), (max-width: 820px) {
  /* Room for the pad. Applied to body so the game's own content clears it,
     while the pad itself lives on <html>, outside body's zoom. */
  body { padding-bottom: 190px !important; }

  .ka-pad {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    /* The pad's width is set in JS from visualViewport. box-sizing keeps the
       padding inside that width, otherwise the right-hand action buttons are
       pushed off the screen: JUMP, WAVE and START were all clipped. */
    box-sizing: border-box; max-width: 100vw; overflow: hidden;
    background: linear-gradient(transparent, #14343dEE 24%);
    pointer-events: none;
  }
  .ka-dpad, .ka-acts { pointer-events: auto; }

  /* Three-column grid so up sits above down and left/right flank them, which is
     the shape a thumb expects. */
  .ka-dpad { display: grid; grid-template-columns: repeat(3, 54px); gap: 5px; }
  .ka-dpad-up    { grid-column: 2; grid-row: 1; }
  .ka-dpad-left  { grid-column: 1; grid-row: 2; }
  .ka-dpad-right { grid-column: 3; grid-row: 2; }
  .ka-dpad-down  { grid-column: 2; grid-row: 2; }

  /* Action buttons shrink and wrap rather than run off the edge. */
  .ka-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
             flex: 1 1 auto; min-width: 0; }

  .ka-btn {
    /* 58px, comfortably over the 44px minimum, because these are pressed fast
       and repeatedly by small hands. */
    min-width: 54px; min-height: 54px;
    padding: 0 12px;
    border: 2px solid #0d2a31;
    border-radius: 14px;
    background: #fff7e7; color: #14343d;
    font: 700 20px/1 system-ui, sans-serif;
    box-shadow: 0 3px 0 #0d2a31;
    touch-action: none;              /* no scroll or zoom from a control press */
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .ka-acts .ka-btn { font-size: 13px; min-width: 60px; padding: 0 8px; flex: 0 1 auto; }
  .ka-dpad { flex: 0 0 auto; }
  .ka-btn.on { transform: translateY(3px); box-shadow: none; background: #e9b44c; }
  .ka-btn:focus-visible { outline: 3px solid #b34d30; outline-offset: 2px; }
}

/* A desktop player with a keyboard never sees it. */
@media (hover: hover) and (pointer: fine) and (min-width: 821px) {
  .ka-pad { display: none; }
}