/* ============================================================================
 * tournaments-fixed.css  ·  v2 — fixed Tournaments Browse page (design
 * handover). The ONLY css that can't be inlined (keyframes) + reduced-motion.
 * The templates in modules/tournaments/screens/hub-templates.js reference
 * these animation names.
 * (The idle "tfuel" pulse on the Fuel-pool button was removed in round 2 so it
 *  stops out-glowing the primary Join button — no keyframe needed for it now.)
 * ==========================================================================*/

@keyframes tring  { 0% { box-shadow:0 0 0 0 rgba(255,77,77,.55) }  100% { box-shadow:0 0 0 9px rgba(255,77,77,0) } }   /* live red ping */
@keyframes tgring { 0% { box-shadow:0 0 0 0 rgba(51,232,138,.5) } 100% { box-shadow:0 0 0 9px rgba(51,232,138,0) } }    /* registration-open green ping */
@keyframes tscan  { 0% { transform:translateY(-120%) } 100% { transform:translateY(540%) } }                            /* broadcast scanline */
@keyframes tbub   { 0% { transform:translateY(2px) scale(1); opacity:0 } 25% { opacity:.85 } 100% { transform:translateY(-14px) scale(.35); opacity:0 } } /* liquid bubble */
@keyframes tshim  { 0% { transform:translateX(-180%) } 100% { transform:translateX(420%) } }                            /* liquid shimmer */

@media (prefers-reduced-motion: reduce) {
  [style*="animation:tring"],[style*="animation:tgring"],[style*="animation:tscan"],
  [style*="animation:tbub"],[style*="animation:tshim"] { animation: none !important; }
}

/* ── Integration additions (not in the bundle) ─────────────────────────────
 * Real player embeds fill the hero frame (IMPLEMENTATION.md step: "your real
 * Twitch/YT embed" goes in the 16/9 frame). */
.hubfx-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Hero + rail band (from IMPLEMENTATION.md's render sketch). Stacks on
 * phones per the project responsive contract (canonical 767px line). */
.hubfx-band { display:grid; grid-template-columns:1.62fr 1fr; gap:18px; margin-top:24px; align-items:start; }
@media (max-width:1024px) { .hubfx-band { grid-template-columns:1fr; } }
/* Right column stacks the schedule + recent-VODs rail cards. */
.hubfx-railcol { display:flex; flex-direction:column; gap:18px; min-width:0; }
.hubfx-rows { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
@media (max-width:767px) {
  /* !important: rows are inline-styled 74px/1fr/108px/auto in the template. */
  .hubfx-rows > div { grid-template-columns:64px minmax(0,1fr) auto !important; }
  .hubfx-rows > div > div:nth-child(3) { display:none; }
  /* Sub-nav: the tab strip is nowrap by design — scroll it horizontally on
     phones; the action cluster wraps below (project responsive contract). */
  .hubfx-subnav-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hubfx-subnav-tabs::-webkit-scrollbar { display:none; }
  /* !important: the cluster is inline-styled flex:0 0 auto in the template. */
  .hubfx-subnav > div:last-child { flex:1 1 auto !important; min-width:0 !important; flex-wrap:wrap !important; margin-left:0 !important; }
  /* Filter-bar segment group scrolls horizontally on phones. */
  .hubfx-filterbar-segs { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hubfx-filterbar-segs::-webkit-scrollbar { display:none; }
}