/* The game on a phone (Frederik, 2026-11-06: "now that we have an app, the phone must be much, much better"). Loaded
   last, so it lies over the many small phone rules in styles.css and hud.css without touching the computer's layout.
   Tap to walk stays (his choice); both ways of holding the phone work, and the layout is built for landscape.
   What it fixes, from his screenshots and a walk through the game at 375×812 and 812×375:
   - the quest box grew into the minimap, and the zone's name lay over the quest box;
   - ten ability places in two rows took a quarter of the screen, most of them empty, with keyboard numbers on them;
   - on its side the bar lay across the middle of the world and the minimap covered the X button. */

/* --- Any touch screen: no keyboard keys on the buttons (they are tapped). ------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  .actions kbd { display: none; }
  .actions .place.empty { display: none; }
  /* The empty places come back while one puts spells on the bar (the spellbook, or Edit UI). */
  body.ui-editing .actions .place.empty, body:has(#spellbook-dialog[open]) .actions .place.empty { display: grid; }
}

/* --- Upright: the minimap in the corner, the quests below it, the bar in one row ------------------------------------ */
@media (orientation: portrait) and (max-width: 520px) {
  #game .minimap { top: 10px; right: 10px; width: 104px; }
  /* The quests sit under the minimap, never in it; at most two shown, a line each (all of them are in the log). */
  #game .hud .quest { margin-top: 116px; width: 176px; max-height: 150px; overflow: hidden; }
  #game .quest-tracker li:nth-child(n+3) { display: none; }
  #game .quest-tracker li > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #game .quest-tracker li > span ~ span { display: none; }
  /* A new zone's name in the open sky over the knight, not on top of the quest box. */
  #game .hud .brand { top: 30vh; }
  /* The abilities in one row (a second only when there are more than six), the knight's surroundings left free. */
  #game .bottom .actions { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; max-width: 360px; margin-left: auto; margin-right: auto; }
  #game .bottom .actions > .ability { width: 50px !important; height: 50px !important; margin-left: 0; }
}

/* --- On its side: the world in the middle, the bars at the edges ----------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* Abilities, XP and Bag/Menu in one block by the right thumb, the potion and roll above it. */
  #game .bottom { left: auto; right: 12px; bottom: 8px; transform: none; width: 292px; max-width: 292px; text-align: right; }
  #game .bottom .actions { display: grid !important; grid-template-columns: repeat(5, 48px); justify-content: end; gap: 8px !important; margin: 0 0 8px auto; width: max-content; }
  #game .bottom .actions > .ability { width: 48px !important; height: 48px !important; margin-left: 0; }
  #game .bottom .xp-bar { width: 100%; margin-left: auto; }
  #game .bottom .menu-toggle { min-height: 36px; }
  /* The potion and the roll in a column to the left of the abilities (above them they touched the minimap). */
  #game .bottom .actions-side { right: calc(100% + 8px); bottom: 0; flex-direction: column; }
  /* The target's frame to the left of the block, over the world's bottom edge. */
  #game .bottom .unit-frame.target.on { left: auto; right: calc(100% + 10px); bottom: 0; width: 200px; }
  /* The minimap in the top right corner; the quests to its left, two at most, so neither covers the other. */
  #game .minimap { top: 8px; right: 10px; width: 96px; }
  #game .hud { top: 8px; }
  #game .hud .quest { margin-right: 108px; width: 210px; max-height: 120px; overflow: hidden; }
  #game .quest-tracker li:nth-child(n+3) { display: none; }
  #game .quest-tracker li > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #game .quest-tracker li > span ~ span { display: none; }
  /* The menu (its short list of pages, hud.css) to the left of the block and as tall as the screen: centred over the
     block it ran off the right edge and over the health bar (Frederik's screenshot, 2026-11-07). */
  #game .bottom.menu-open .utility { left: auto; right: calc(100% + 12px); bottom: 0; transform: none; width: min(420px, calc(100vw - 292px - 48px)); max-height: calc(100dvh - 24px); text-align: left; }
  /* What the game says, at the bottom left, clear of the block. */
  #game .message { left: 12px; right: auto; bottom: 12px; transform: none; max-width: calc(100% - 330px); }
}