/* Phones. Loaded last, so these win over the width-only layouts in the other sheets.
   1. narrow desktop layout (761–1100 px wide: tablets, phones held sideways): the home rail and the coins share the top bar
   2. short screens (a phone held sideways, ≤ 500 px tall): summon in two columns, a slimmer battle HUD, smaller dock
   3. touch: nothing you tap is under 36 px
   4. very narrow portrait: the top bar fits with a back button */

/* 1 ------------------------------------------------------------------------------------------------------------ */
@media (min-width: 761px) and (max-width: 1100px) {
  .scr-home .rail { left: 196px; gap: 0; }
  .scr-home .rl { width: 44px; font-size: 9.5px; }
  .scr-home .rl > i.ic { width: 28px; height: 28px; }
  body.at-home #topbar .tb-mute { display: none; }
  body.at-home .tb-cur { gap: 12px; padding: 0 6px; }
  body.at-home .tb-cur .cur { font-size: 17px; gap: 4px; }
  body.at-home .tb-cur .cur i { font-size: 16px; } body.at-home .tb-cur .cur.berries i { font-size: 18px; }
  body.at-home .tb-cur .cur small { display: none; }
  body.at-home #topbar .tb-cap { gap: 6px; } body.at-home .cap-t .bar { width: 60px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  body.at-home #topbar .tb-cap .cap-t { display: none; }
  .scr-home .rail { left: 84px; }
}

/* 2 ------------------------------------------------------------------------------------------------------------ */
@media (max-height: 500px) and (min-width: 600px) {
  body.docked { --dock: 64px; }
  .dk { height: 54px; } .dk > i.ic { width: 34px; height: 34px; }
  .dk-summon { width: 84px; height: 84px; }
  #topbar { padding-top: 4px; padding-bottom: 4px; }

  /* home: the event banner and the next island share the right side */
  .scr-home .h-right { top: 78px; bottom: 8px; display: flex; flex-direction: column; gap: 8px; }
  .scr-home .h-right .feat { flex: 1 1 auto; height: auto; min-height: 0; }
  .scr-home .h-right .cont { flex: none; height: 84px; }

  /* summon: banner on the left, the buttons beside it; everything else scrolls underneath */
  .sum-page { top: 54px; width: calc(100% - 20px); display: grid; grid-template-columns: minmax(0, 1fr) 236px; column-gap: 12px; row-gap: 8px; align-items: start; grid-auto-rows: max-content; align-content: start; }
  .sum-tabs { grid-column: 1 / -1; grid-row: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 6px 0; max-width: 100%; }
  .sum-tabs::-webkit-scrollbar { display: none; }
  .sum-tabs button { flex: none; font-size: 13px; padding: 6px 12px; }
  .sum-page .banner { grid-column: 1; grid-row: 2; margin: 0; height: calc(100vh - 54px - 52px - var(--dock) - 14px); min-height: 150px; }
  .sum-page .bn-text h2 { font-size: 30px; } .sum-page .bn-text p { font-size: 13px; line-height: 1.2; }
  .sum-page .bn-feat span { font-size: 10.5px; padding: 2px 6px; margin: 3px 0; }
  .sum-btns { grid-column: 2; grid-row: 2; margin: 0; position: static; flex-direction: column; flex-wrap: nowrap; gap: 8px; padding: 0; background: none; }
  .sum-btns .btn { width: 100%; margin: 0; padding: 8px 10px; font-size: 20px; }
  .sum-btns .btn small { font-size: 11px; }
  .sum-page > :not(.sum-tabs):not(.banner):not(.sum-btns) { grid-column: 1 / -1; }

  /* battle: a slimmer HUD */
  #battle-ui .b-top { top: 6px; }
  #battle-ui .b-btns .btn { width: 40px; height: 40px; }
  #battle-ui .b-btns .btn span { display: none; }
  #battle-ui .b-wave { top: 4px; transform: translateX(-50%) scale(.8); transform-origin: 50% 0; }
  #battle-ui .b-order { top: 54px; gap: 4px; }
  #battle-ui .b-order i { width: 32px; height: 32px; } #battle-ui .b-order i.now { width: 40px; height: 40px; }
  #battle-ui .b-order i:nth-child(n+7) { display: none; }
  #battle-ui .b-hero { transform: scale(.8); transform-origin: 0 100%; }
  #battle-ui .b-team { top: 74px; }

  /* lists and panels use the full height */
  .panel { top: 50px; max-height: calc(100% - 54px); }
}

/* 3 ------------------------------------------------------------------------------------------------------------ */
@media (pointer: coarse) {
  #ui .btn.small, #ui .seg button, #ui .tm-auto .au, #ui .vd, #ui .sum-tabs button, #ui .cx-tabs button, #ui .tabs button, #ui .sorts button { min-height: 36px; }
  #ui .bw-top .btn, #ui .bw-pause, #ui .bw-quit { min-width: 40px; min-height: 36px; }
  #topbar .tb-set, #topbar .tb-back { min-width: 36px; min-height: 36px; }
}

/* 4 ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 420px) {
  #topbar .tb-back ~ .tb-cap .cap-t { display: none; }
  #topbar .tb-back ~ .tb-cap { padding-right: 4px; }
}