/* ============================================================
   v5.17.1 — Mobile match UX patches
   1) Pitch takes priority on mobile; stats collapse below fold
   2) Speed toast + enlarged mnav speed label on change
   3) Goal overlay shortened so the dance is actually visible
   4) Dance overlay raised above goal overlay
   ============================================================ */

/* --- 1) Pitch priority on mobile, stats moved below fold ----------------- */
@media (max-width: 768px) {
  .broadcast {
    /* Order visually: scorebar > subbar > pitch > ticker > stats
       Stats stays in DOM order at the bottom. */
    min-height: 100vh;
  }
  .pitch-wrap {
    aspect-ratio: 16 / 11;
    min-height: 58vh;          /* guarantee pitch dominates first fold */
    width: 100%;
    position: relative;
  }
  /* Stats becomes a compact 3-col strip BELOW the pitch + ticker,
     with a small peek-affordance so the user knows there's more below. */
  .stats {
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
  }
  .stats::before {
    content: '▼ MATCH STATS';
    display: block;
    grid-column: 1 / -1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: #1edb8a;
    padding: 8px 12px 6px;
    background: #050a13;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .stat { padding: 7px 10px; }
  .stat-label { font-size: 8.5px; letter-spacing: 0.18em; }
  .stat-home, .stat-away { font-size: 14px; }

  /* Subbar is tiny already; hide weather on very narrow to save rows */
  .subbar .weather { display: none; }

  /* Rotating SHOT MAP / RATINGS HUD card covers the pitch on mobile.
     Stats live below the fold now — hide the pitch-level HUD card. */
  .hud-card { display: none !important; }

  /* Broadcast HUD ticker at the bottom of the pitch (if any) keep slim */
  .pitch-wrap .broadcast-ticker { font-size: 9px; }
}

/* --- 2) Speed toast + enlarged mnav speed label on change --------------- */
.mnav-btn[data-act="speed"] .mnav-lbl {
  font-size: 13px;              /* slightly larger for readability */
  font-weight: 800;
}
.mnav-btn[data-act="speed"].turbo .mnav-lbl {
  color: #ffd23f;
  text-shadow: 0 0 8px rgba(255,210,63,0.7);
}
/* Pulse animation when speed changes */
.mnav-btn[data-act="speed"].pulse .mnav-lbl {
  animation: mnavSpeedPulse 0.55s cubic-bezier(.2,.8,.2,1);
}
@keyframes mnavSpeedPulse {
  0%   { transform: scale(1);   }
  40%  { transform: scale(1.55); color: #1edb8a; text-shadow: 0 0 12px rgba(30,219,138,0.8); }
  100% { transform: scale(1);   }
}

/* Centered full-width speed toast that briefly appears on change */
.speed-toast {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -8px);
  padding: 10px 22px;
  background: rgba(5, 10, 19, 0.92);
  border: 1px solid rgba(30, 219, 138, 0.55);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.04);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  color: #1edb8a;
  opacity: 0;
  pointer-events: none;
  z-index: 3000;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.speed-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.speed-toast.turbo {
  color: #ffd23f;
  border-color: rgba(255, 210, 63, 0.7);
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.6);
}
.speed-toast .st-ico { margin-right: 8px; }

/* --- 3) Shorter GOAL banner so dance becomes visible -------------------- */
/* The goal-overlay runs 3.2s and covers the whole pitch with a dark
   gradient + huge GOAL text. Player dances fire underneath but the user
   never sees them. v5.17.1: shorten it so the dance is revealed fast. */
.goal-overlay.show { animation-duration: 1.3s !important; }
.goal-overlay.show .goal-flash { animation-duration: 0.28s !important; }
.goal-overlay.show .goal-big   { animation-duration: 1.3s !important; }
.goal-overlay.show .goal-scorer{ animation-duration: 1.3s !important; }
.goal-overlay.show .goal-score { animation-duration: 1.3s !important; }
/* Lower peak opacity of the dark backdrop so dancers behind are visible */
.goal-overlay {
  background: radial-gradient(circle at center,
                              rgba(255,46,76,0.22),
                              rgba(0,0,0,0.55)) !important;
}

/* Raise the dance commentary overlay above the goal overlay & PiP */
.dance-overlay { z-index: 55 !important; }
/* On mobile, move the dance quote well clear of the top HUD and the
   "GOAL" text — and shrink the PiP so it doesn't hide the dancing. */
@media (max-width: 768px) {
  .dance-overlay { top: 58% !important; max-width: 92%; padding: 10px 14px; }
  .closeup-pip  { width: 140px !important; height: 96px !important;
                  top: 6px !important; right: 6px !important; }
}

/* --- 4) Mobile menu safety — visually mark destructive buttons ---------- */
#vflPanelChange, #vflPanelHome {
  position: relative;
}
#vflPanelChange::after, #vflPanelHome::after {
  content: '✕';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #ff3d57;
  font-weight: 800;
  font-size: 13px;
  opacity: 0.72;
}