/* ===========================================================================
   STANDINGS & BRACKET  (see assets/js/bracket.js)
   ---------------------------------------------------------------------------
   The third top-level tab. Its content is data-driven: the group-standings
   tables during the group stage, the knockout bracket once places are won.
   The cards, connectors and card geometry are authored as inline styles in
   bracket.js (the connector pixel-math lives with the layout code); this file
   only carries what a stylesheet does better than inline styles: keyframes,
   scrollbar suppression, and the viewport-width branches.
   ========================================================================== */

/* loading spinner */
@keyframes sbspin { to { transform: rotate(360deg); } }

/* the mobile quarter carousel hides its scrollbar (the Q1–Q4 tabs are the affordance) */
.sb-snap::-webkit-scrollbar { display: none; }
.sb-snap { scrollbar-width: none; -webkit-overflow-scrolling: touch; }

/* Desktop = four connected quarter trees; < 900px = the swipeable one-per-screen
   carousel. Both layouts are rendered; CSS chooses which is shown, so crossing the
   breakpoint needs no re-render. */
.sb-desktop { display: block; }
.sb-mobile  { display: none; }
@media (max-width: 899px) {
  .sb-desktop { display: none; }
  .sb-mobile  { display: block; }
}

/* winner mark on a decided card: the same green highlighter swipe the schedule
   card uses on a winning team's name (tiled at 1lh so a wrapped name is struck on
   every line). Kept in CSS because the tiled gradient is awkward inline. */
.sb-win {
  background-image: linear-gradient(transparent 58%, color-mix(in srgb, var(--subway) 40%, var(--paper)) 58% 92%, transparent 92%);
  background-size: 100% 1lh;
  background-repeat: repeat-y;
  padding: 0 2px;
}

/* every card links to its match on the schedule: pointer cue + a small lift toward
   the hard shadow on hover (the house button idiom), and a keyboard focus ring. */
.sb-card { cursor: pointer; transition: transform .12s ease; }
.sb-card:hover { transform: translate(-1px, -1px); }
.sb-card:focus-visible { outline: 2px solid var(--cup); outline-offset: 2px; }

/* the desktop quarters grid: one column, two side-by-side once there's room for
   both 528px canvases (matches the handoff's >=1140px branch). */
.sb-quarters {
  display: grid;
  grid-template-columns: minmax(0, 528px);
  gap: 38px 26px;
  justify-items: start;
}
@media (min-width: 1140px) {
  .sb-quarters { grid-template-columns: repeat(2, minmax(0, 528px)); }
}