/* Breakpoints and the reduced-motion opt-out. Loaded last so it wins. */

@media (max-width:980px){
  /* The whole locker column goes, not just the strip inside it: a column of kit
     chips with a blank rectangle above them is worse than no column. The shop's
     column goes the same way — and the shop loses least of the three, because
     the item card carries its own fighter and the card is the point. */
  .preview-strip{display:none}
  #campLocker{display:none}
  #shopLocker{display:none}
  /* The shelves take the room the column gave up, and the tiles come down a
     size so a phone still gets three across rather than two and a gap. */
  .tiles{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
}
@media (max-width:720px){
  .corners{flex-direction:column}
  .corner{justify-content:flex-start}
  .corner.blue{text-align:left}
  .corner.blue .swatches{justify-content:flex-start}
  /* Stacked corners are both read left-to-right, so the blue one gives up its
     mirrored row: label, readout, caret, same as red. */
  .corner.blue .kit-head{flex-direction:row}
  .corner.blue .kit-val{justify-content:flex-end}
  .hint{max-width:44vw;font-size:10.5px}
}
/* A short window has to give something up, and on the ladder it is never one of
   the ten rows — a card you can only see eight of is not a card. The kicker
   goes first, then the line under the title; between them they say nothing the
   rows do not. */
@media (max-height:620px){
  #campaign .screen-kicker{display:none}
  /* Only the one over the title. The shelf headers are the same class and they
     are the labels on the shelves — lose those and the shop is one long wall of
     tiles with no idea where the hats start. */
  #shop .screen-head .screen-kicker{display:none}
}
/* Below this the locker column cannot hold a fighter worth looking at and the
   seven kit rows at the same time, and the rows are the half you cannot do
   without. The whole column goes rather than either half being cut in two. */
@media (max-height:540px){
  #campLocker{display:none}
  #shopLocker{display:none}
}
@media (max-height:500px){
  #campaign .screen-note{display:none}
  #shop .screen-note{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
  /* The dissolve is decoration with no information in it, so it is the first
     thing to go. The layer still builds and still cleans itself up; it just
     never becomes visible. */
  .px-burst{display:none}
}