/* ==========================================================================
   Drop Bears — phone layer
   The stat tables were 713px wide inside a 375px screen, so they sat in a
   sideways-scrolling box. On a phone each player becomes a block instead.
   ========================================================================== */


.rail { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .rail { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------- tighter on phones -- */

@media (max-width: 719px) {
  .sec { padding-block: 72px; }

  .poster__sub { max-width: 34ch; }

  /* three faction panels in a row is a lot of scrolling on a phone */
  .faction { min-height: 30vh; }

  /* the strike X reads as noise at phone width, soften it, keep the words */
  .strike { min-height: 70vh; }
  .strike::after { opacity: .55; }

  /* game credit bar stacks rather than squeezing */
  .gamebar { flex-direction: column; align-items: flex-start; }
  .gamebar img { width: 150px; }
  .gamebar .btn { margin-left: 0; width: 100%; }

  /* corner brackets get smaller so they do not crowd the copy */
  .clip::before, .clip::after,
  .clip .clip__c1, .clip .clip__c2 { width: 18px; height: 18px; }
}

/* ------------------------------------------------- page head headlines -- */
/* "LEADERBOARD" at 44px wide-stretch Anybody is about 430px, so it was being
   cut off by the right edge of a 375px screen. Narrow the width axis and
   scale it off the viewport instead of a fixed floor. */

.pagehead__h {
  margin-top: var(--s3);
  font-size: clamp(2rem, 8vw, 6rem);
}
@media (max-width: 719px) {
  .pagehead__h { font-stretch: 100%; letter-spacing: -.02em; }
}

/* a section straight after a page head should not double up the padding */
.pagehead + .sec { padding-top: var(--s5); }
@media (min-width: 900px) { .pagehead + .sec { padding-top: var(--s6); } }

/* .rail carries a 64px top margin for its original use under the hero.
   In the totals slots it is the first thing in the section, so drop it. */
#totals .rail,
#board-totals .rail { margin-top: 0; }