/* GameScape add-on for AerobizX: tablets (a 10-inch iPad is 1080 x 810 points, the newer one 1180 x 820; Safari's
   bars take about 70 of the height). Kept apart from the game's own style.css so a new build does not lose it;
   scripts/aerox-deploy.sh puts it back. Nothing here changes the game on a desktop-size window with a mouse. */

/* ---- lying down (961-1320 wide): the status boxes had no room left for their figures ("$4!", "1/") ---- */
@media (min-width: 961px) and (max-width: 1320px) {
  body.aero .hud { gap: 6px; padding-inline: 8px; }
  body.aero .hud-brand { max-width: 18%; font-size: 17px; }
  body.aero .hud-stats { gap: 5px; }
  body.aero .flap { padding: 5px 6px; grid-template-columns: minmax(0, 1fr); row-gap: 3px; min-height: 56px; }
  body.aero .flap .ico { display: none; }                 /* the label says what it is; the picture took a third of the box */
  body.aero .flap .k, body.aero .flap .v { grid-column: 1; }          /* the label above its figure, each the full width */
  body.aero .flap .k { font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; }
  body.aero .flap .v { font-size: 17px; white-space: nowrap; }
  body.aero .flap.date-flap { flex-grow: 1.5; }
  .hud .gs-inv { gap: 4px; }
  .hud .gs-inv__code { font-size: 13px; letter-spacing: .1em; min-width: 0; padding: 6px 7px; }
  /* the command tiles: the whole word under the picture ("AIRPORT", "AIRLINE") */
  body.aero .cmd span { font-size: 10px; letter-spacing: 0; }
  body.aero.layout-bottom .turnbar { flex-basis: 250px; }
}
@media (min-width: 961px) and (max-width: 1140px) {
  body.aero .hud-brand { max-width: 15%; font-size: 15px; }
  body.aero .flap .v { font-size: 15.5px; }
  .hud .gs-inv__eye { display: none; }                    /* tap the code itself to hide or show it */
}

/* ---- standing up (700-960 wide): all thirteen command tiles in view, none past the right edge ---- */
@media (min-width: 700px) and (max-width: 960px) {
  body.aero .cmd { flex: 1 1 0; min-width: 0; padding: 6px 1px 5px; }
  body.aero .cmd span { font-size: 9.5px; letter-spacing: 0; }
  body.aero .cmdbar { gap: 4px; }
}

/* ---- fingers instead of a mouse ---- */
@media (hover: none) and (pointer: coarse) {
  html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
  * { -webkit-tap-highlight-color: transparent; }
  /* a field under 16px makes Safari zoom the page in when it is tapped, and it does not zoom back out */
  input, select, textarea { font-size: 16px !important; }
  /* a long press must not select the labels or pop up Safari's copy menu over the game */
  .hud, .cmdbar, .turnbar, .tabs, .btn, .cmd, .flap, .map-wrap, .modal-actions { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  /* big enough to hit */
  body.aero .btn.small { min-height: 40px; padding-inline: 12px; }
  body.aero .btn.icon { width: 46px; height: 46px; }
  #side-close, .side-x { min-width: 42px; min-height: 42px; }
  .hud .gs-inv__code, .hud .gs-inv__eye { min-height: 36px; }
  input[type=checkbox], input[type=radio] { min-width: 26px; min-height: 26px; }
  body.aero .tabs button { padding-block: 14px; }
  /* the bar at the bottom of the newer iPads */
  body.aero.layout-bottom .dock { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ---- windows that came out see-through on an iPad (2026-10-07) ----
   The game's windows, side panel, lobby cards and some buttons have no background of their own: their inside is the
   middle of a frame picture (border-image ... fill). Safari on an iPad does not always paint that middle, and the map
   then shows through the menus. Each gets the frame's own colour behind it, kept inside the frame (padding-box), so
   where the picture is painted nothing changes and where it is not the window is still solid. */
body.aero .modal-card:not(.paper-modal) { background-color: #0e163c !important; background-clip: padding-box !important; }
body.aero .side, body.aero.layout-bottom .side, body.aero .card { background-color: #11193f !important; background-clip: padding-box !important; }
body.aero :is(#screen-lobby, #screen-room) .btn, body.aero .showroom-modal .btn { background-color: #255cd5 !important; background-clip: padding-box !important; }
body.aero :is(#screen-lobby, #screen-room) .btn.primary, body.aero .showroom-modal .btn.primary { background-color: #f4c13a !important; }
body.aero :is(#screen-lobby, #screen-room) .btn.ghost, body.aero .showroom-modal .btn.ghost { background-color: #101d4e !important; }
body.aero :is(#screen-lobby, #screen-room) .btn.danger { background-color: #ca2724 !important; }
/* the same for a Safari too old for :is() */
body.aero #screen-lobby .btn, body.aero #screen-room .btn { background-color: #255cd5; background-clip: padding-box; }
body.aero #screen-lobby .btn.primary, body.aero #screen-room .btn.primary { background-color: #f4c13a; }
body.aero #screen-lobby .btn.ghost, body.aero #screen-room .btn.ghost { background-color: #101d4e; }
body.aero #screen-lobby .btn.danger, body.aero #screen-room .btn.danger { background-color: #ca2724; }
/* the dark sheet behind an open window: darker, so what is under it does not compete with the text */
.modal { background: rgba(2, 6, 12, .82); }

/* ---- the sound button: it can be carried anywhere (gs-tablet.js), so it never has to sit on something ---- */
.audio-btn { touch-action: none; width: 40px; height: 40px; cursor: grab; }
.audio-btn.gs-carried { cursor: grabbing; opacity: .85; }