/* ============================================================================
 * Alpha Archers 2D — responsive.css
 *
 * The game runs inside a stage that is 720 design px tall and uniformly scaled
 * to fill the screen (see #stage in game.css). That single scale factor is what
 * makes a phone in landscape identical to a desktop: every element is authored
 * once at desktop size and lands in the same place, at the same relative size,
 * on every device. Only the stage's WIDTH tracks the viewport, so a wider
 * screen shows more battlefield instead of black bars.
 *
 * So this file deliberately contains almost no size breakpoints. Adding one
 * would make a phone diverge from desktop — exactly what the stage exists to
 * prevent. What remains is about device CAPABILITY (does it have touch?) and
 * about the page OUTSIDE the stage (letterbox bars, banners), never about how
 * wide the screen happens to be.
 * ========================================================================== */

/* ----------------------------------------------------------- touch devices
 * Touch controls occupy the lower corners of the stage, so the HUD corners
 * that would otherwise sit under a thumb move out of the way. Driven by the
 * presence of touch, not by screen size.
 * ------------------------------------------------------------------------ */
/* The stage corners are occupied on touch:
 *   bottom-left  → joystick        bottom-right → action buttons
 * The power bar keeps the bottom-centre strip on every device — it is the one
 * piece of HUD you reach for mid-fight, so it must not move between platforms.
 * The two corner clusters that would land under a thumb move up the flanks
 * instead: arrows on the left, camera and abilities on the right.
 */
body.touch-device .hud-bottom-left {
  left: var(--hud-pad);
  right: auto;
  bottom: calc(var(--hud-pad) + 200px);
  align-items: flex-start;
}

/* Clear of the action pad, whose top edge sits 260px above the stage floor. */
body.touch-device .hud-bottom-right {
  right: var(--hud-pad);
  left: auto;
  bottom: calc(var(--hud-pad) + 240px);
  flex-direction: row;
  align-items: flex-end;
}

/* Clear of the joystick and the action pad, which own the bottom corners. */
body.touch-device .hud-bottom-center {
  bottom: calc(var(--hud-pad) + 104px);
}

body.touch-device .arrow-selector {
  max-width: 300px;
}

/* Tap-target sizes are deliberately NOT overridden here. Growing a control on
 * touch would move everything below it and break parity with desktop, and the
 * stage is scaled anyway, so a bigger stage-space box is not a bigger thumb
 * target. HUD chrome is authored at 44px+ for every device instead (ui.css). */

body.touch-device .setting-row input[type='range'] {
  width: 240px;
}

/* ---------------------------------------------------------------- letterbox
 * The bars around the stage belong to the page, not the game. On very wide
 * screens they grow, so keep them looking deliberate rather than empty.
 * ------------------------------------------------------------------------ */
@media (min-aspect-ratio: 21/9) {
  #app {
    background:
      radial-gradient(ellipse at 50% 50%, rgba(24, 20, 46, 0.6), transparent 62%),
      var(--c-bg);
  }
}

@media print {
  #app { display: none; }
}