/* These surfaces sit outside the playfield; the canvas keeps its own inputs. */
.game-touch-pads { display: none; }
.touch-pad { display: none; }
.touch-pad[hidden], .game-touch-pads[hidden] { display: none !important; }

@media (pointer: coarse), (any-pointer: coarse), (max-width: 1024px) {
  .game-touch-pads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: 9px;
    min-width: 0;
    width: 100%;
    margin: 10px 0;
  }
  .game-touch-pads:empty { display: none; margin: 0; }
  .touch-pad {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 5px;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 2px solid var(--ink, #203b4b);
    border-radius: 18px;
    background: #f1f9ff;
    box-shadow: 0 3px 0 #b9d4e7;
    color: var(--ink, #203b4b);
    pointer-events: auto;
  }
  .touch-pad-label { font-size: 12px; font-weight: 800; line-height: 1.25; }
  .touch-pad-surface {
    position: relative;
    min-width: 0;
    height: 96px;
    min-height: 80px;
    overflow: hidden;
    border: 2px dashed #83b6d0;
    border-radius: 13px;
    background: linear-gradient(160deg, #e5f8ff, #c9e9fa);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
  }
  .touch-pad--x .touch-pad-surface { height: 64px; min-height: 64px; }
  .touch-pad--y .touch-pad-surface { height: 88px; min-height: 64px; }
  .touch-pad-surface:focus-visible { outline: 3px solid #eeae45; outline-offset: 2px; }
  .touch-pad.is-active .touch-pad-surface { cursor: grabbing; border-style: solid; border-color: #3182ab; }
  .touch-pad-surface[aria-disabled="true"] { opacity: .5; cursor: default; }
  .touch-pad-thumb {
    position: absolute;
    left: clamp(18px, var(--touch-pad-x, 50%), calc(100% - 18px));
    top: clamp(18px, var(--touch-pad-y, 50%), calc(100% - 18px));
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border: 2px solid #448ba8;
    border-radius: 50%;
    background: #fffdf4;
    box-shadow: 0 3px 0 #8fc5df;
    color: #287394;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
  }
  .touch-pad.is-active .touch-pad-thumb { background: #d9f596; }
  .touch-pad-hint { margin: 0; color: var(--muted, #61717b); font-size: 11px; line-height: 1.35; }
  .expedition-touch .touch-pad { grid-column: 1 / -1; }
  body.wide-play .expedition-touch .touch-pad { width: 102px; padding: 5px; border-radius: 12px; gap: 3px; }
  body.wide-play .expedition-touch .touch-pad-label { font-size: 10px; }
  body.wide-play .expedition-touch .touch-pad-hint { font-size: 10px; line-height: 1.2; }
  body.wide-play .expedition-touch .touch-pad-surface { height: 80px; min-height: 64px; }
  body.wide-play .expedition-touch .touch-pad--x .touch-pad-surface { height: 64px; }
}

/* The steering hint already appears beside the ship on the shortest screens. */
@media (orientation: landscape) and (max-height: 360px) {
  body.wide-play[data-game="shooter"] .expedition-touch .touch-pad { grid-template-rows: auto minmax(0, 1fr); }
  body.wide-play[data-game="shooter"] .expedition-touch .touch-pad-surface { height: 64px; min-height: 64px; }
  body.wide-play[data-game="shooter"] .expedition-touch .touch-pad-hint { display: none; }
}

/* The existing short landscape layout reserves a right-hand control column. */
@media (orientation: landscape) and (max-height: 550px) and (max-width: 1024px) {
  body.focus-play:not(.wide-play) .play-panel:has(> .game-touch-pads:not(:empty)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(136px, 190px);
    gap: 6px 12px;
    align-content: start;
  }
  body.focus-play:not(.wide-play) .play-panel:has(> .game-touch-pads:not(:empty)) > .play-heading { grid-column: 1 / -1; grid-row: 1; }
  body.focus-play:not(.wide-play) .play-panel:has(> .game-touch-pads:not(:empty)) > #stage-wrap { grid-column: 1; grid-row: 2 / span 7; align-self: start; width: 100%; }
  body.focus-play:not(.wide-play) .play-panel:has(> .game-touch-pads:not(:empty)) > #options { grid-column: 2; grid-row: 2; }
  body.focus-play:not(.wide-play) .play-panel:has(> .game-touch-pads:not(:empty)) > .game-message { grid-column: 2; grid-row: 3; }
  body.focus-play:not(.wide-play) .play-panel > .game-touch-pads { grid-column: 2; grid-row: 4; grid-template-columns: repeat(auto-fit, minmax(min(80px, 100%), 1fr)); margin: 0; }
  body.focus-play:not(.wide-play) .play-panel:has(> .game-touch-pads:not(:empty)) > #controls { grid-column: 2; grid-row: 5; }
  body.focus-play:not(.wide-play) .play-panel:has(> .game-touch-pads:not(:empty)) > .record-status { grid-column: 2; grid-row: 6; }
  body.focus-play:not(.wide-play) .play-panel:has(> .game-touch-pads:not(:empty)) > .toolbar { grid-column: 2; grid-row: 7; }
  body.focus-play:not(.wide-play) .play-panel:has(> .game-touch-pads:not(:empty)) > .game-entry-panel { grid-column: 2; grid-row: 8; }
  body.focus-play:not(.wide-play) .game-touch-pads .touch-pad { padding: 5px; gap: 3px; border-radius: 12px; }
  body.focus-play:not(.wide-play) .game-touch-pads .touch-pad-label { font-size: 10px; }
  body.focus-play:not(.wide-play) .game-touch-pads .touch-pad-hint { font-size: 10px; }
  body.focus-play:not(.wide-play) .game-touch-pads .touch-pad-surface { height: 80px; min-height: 64px; }
  body.focus-play:not(.wide-play) .game-touch-pads .touch-pad--x .touch-pad-surface { height: 64px; }
}