/* Background video + match arena (Sommer FC vs Sydnie FC) */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #071525;
}
.page-bg__fallback {
  position: absolute;
  inset: -4%;
  background:
    linear-gradient(145deg, rgba(5, 11, 20, 0.45), rgba(10, 42, 36, 0.5)),
    url("../assets/bg/sommer_bg_poster.jpg") center / cover no-repeat;
  filter: blur(14px) saturate(0.75) brightness(0.85);
  transform: scale(1.08);
  animation: pageBgDrift 48s ease-in-out infinite alternate;
}
.page-bg__video {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  opacity: 0.32;
  filter: blur(12px) saturate(0.7) brightness(0.88);
  transform: scale(1.06);
}
.page-bg__video.is-ready {
  opacity: 0.38;
}
.page-bg__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(7, 21, 37, 0.58) 0%,
      rgba(10, 28, 51, 0.32) 22%,
      rgba(11, 31, 58, 0.18) 42%,
      rgba(126, 200, 240, 0.12) 58%,
      rgba(215, 232, 245, 0.28) 78%,
      rgba(243, 248, 252, 0.42) 100%
    ),
    radial-gradient(ellipse 70% 50% at 50% 35%, rgba(126, 200, 240, 0.14), transparent 68%);
}
@keyframes pageBgDrift {
  from { transform: scale(1.06) translate3d(-0.8%, 0, 0); }
  to { transform: scale(1.1) translate3d(0.8%, -0.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-bg__video { display: none; }
  .page-bg__fallback { animation: none; }
}
body > main,
body > .site-footer {
  position: relative;
  z-index: 1;
}
body > .site-nav {
  z-index: 100;
}
body > .story-progress {
  z-index: 200;
}
body > .skip-link {
  z-index: 1000;
}
.section-dark {
  position: relative;
}
body {
  background: #071525;
}

.match-arena {
 margin-top: 2rem;
 padding: 1rem 1.1rem 1.15rem;
 border-radius: 1.15rem;
 background: linear-gradient(160deg, #071525, #0b1f3a 55%, #0a2a24);
 border: 1px solid rgba(126, 200, 240, 0.18);
 box-shadow: 0 20px 48px rgba(7, 21, 37, 0.28);
 color: #f7f3ec;
}
.match-arena--panel {
 margin-top: 0;
 padding: 0.55rem 0.65rem 0.6rem;
 border-radius: 1.05rem;
 background: linear-gradient(160deg, #00287a 0%, #0033a0 42%, #0b1f3a 100%);
 border: 1px solid rgba(126, 200, 240, 0.22);
 box-shadow: 0 14px 32px rgba(0, 51, 160, 0.22);
 color: #e8f4fc;
 min-width: 0;
 width: 100%;
 max-width: none;
 height: 100%;
 align-self: stretch;
 display: flex;
 flex-direction: column;
 gap: 0.4rem;
}
.match-arena__head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.75rem;
}
.match-arena__eyebrow {
 font-family: var(--font-display);
 font-size: 0.78rem;
 font-weight: 700;
 letter-spacing: -0.01em;
 color: #9fd8f5;
}
.match-arena__live {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 font-size: 0.65rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #ff8a80;
}
.match-arena__live i {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: #e74c3c;
 animation: home-live-pulse 1.4s ease-out infinite;
}
.match-arena--panel .fm2d {
 gap: 0.35rem;
 flex: 1;
 min-height: 0;
 display: flex;
 flex-direction: column;
}
.match-arena--panel .fm2d__hud {
 font-size: 0.6rem;
 padding: 0.28rem 0.45rem;
 gap: 0.3rem;
 border-radius: 0.55rem;
 background: rgba(5, 16, 36, 0.55);
 border: 1px solid rgba(126, 200, 240, 0.18);
 color: #fff;
}
.match-arena--panel .fm2d__clock,
.match-arena--panel .fm2d__score,
.match-arena--panel .fm2d__team {
 color: #fff;
}
.match-arena--panel .fm2d__live {
 color: #ff8a80;
}
.match-arena--panel .fm2d__stage {
 grid-template-columns: minmax(0, 1.15fr) minmax(9.5rem, 0.85fr);
 gap: 0.5rem;
 align-items: stretch;
 flex: 1;
 min-height: 0;
}
.match-arena--panel .fm2d__pitch {
 /* Cap size via width so aspect-ratio never breaks (max-height alone stretches lines) */
 width: min(100%, calc(168px * 105 / 68));
 max-width: 100%;
 height: auto;
 max-height: none;
 aspect-ratio: 105 / 68;
 margin: 0 auto;
 justify-self: center;
 border-radius: 0.65rem;
 overflow: hidden;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.match-arena--panel .fm2d__comms {
 width: 100%;
 min-width: 0;
}
.match-arena--panel .fm2d__player {
 width: 8px;
 height: 8px;
}
.match-arena--panel .fm2d__ball {
 width: 7px;
 height: 7px;
}
.match-arena--panel .fm2d__ref {
 width: 10px;
 height: 10px;
}
.match-arena--panel .fm2d__jw-tag {
 font-size: 0.48rem;
 padding: 0.1rem 0.26rem;
}
.match-arena--panel .fm2d__comms {
 min-height: 0;
 max-height: none;
 height: auto;
 padding: 0.55rem 0.6rem;
 border-radius: 0.65rem;
 background: rgba(5, 16, 36, 0.45);
 border: 1px solid rgba(126, 200, 240, 0.2);
 color: #e8f4fc;
 display: flex;
 flex-direction: column;
}
.match-arena--panel .fm2d__comms-label {
 font-size: 0.62rem;
 margin-bottom: 0.28rem;
 color: #7ec8f0;
 letter-spacing: 0.08em;
}
.match-arena--panel .fm2d__comms-text {
 font-size: 0.84rem;
 line-height: 1.4;
 min-height: 3.4em;
 color: #f3f8fc;
 font-weight: 500;
}
.match-arena--panel .fm2d__comms-text.is-card { color: #f0d78a; }
.match-arena--panel .fm2d__comms-text.is-red { color: #ff8a80; }
.match-arena--panel .fm2d__yc-board {
 margin-top: auto;
 max-height: 72px;
 background: rgba(255, 255, 255, 0.06);
 border-radius: 0.5rem;
 padding: 0.3rem 0.35rem;
 border: 1px solid rgba(255, 255, 255, 0.1);
}
.match-arena--panel .fm2d__yc-list {
 max-height: 44px;
 font-size: 0.65rem;
 color: rgba(232, 244, 252, 0.7);
}
.match-arena--panel .fm2d__yc-title {
 color: #9fd8f5;
}
.match-arena--panel .fm2d__yc-count {
 color: #9fd8f5;
}
.match-arena--panel .fm2d__big-card {
 width: 28px;
 height: 38px;
}
.match-arena--panel .fm2d__card-label {
 font-size: 0.58rem;
 color: #fff;
}
@media (max-width: 700px) {
 .match-arena--panel .fm2d__stage {
 grid-template-columns: 1fr;
 justify-items: center;
 }
 .match-arena--panel .fm2d__pitch {
 width: 100%;
 max-width: 100%;
 height: auto;
 max-height: none;
 aspect-ratio: 105 / 68;
 margin: 0 auto;
 --runoff: clamp(0.45rem, 5.2%, 0.75rem);
 }
 .match-arena--panel .fm2d__comms {
 width: 100%;
 }
 .match-arena--panel .fm2d__comms-text {
 min-height: 2.6em;
 }
}

.fm2d {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 0.4rem;
 pointer-events: none;
}
.fm2d__hud {
 display: grid;
 grid-template-columns: auto 1fr auto;
 align-items: center;
 gap: 0.35rem;
 padding: 0.28rem 0.45rem;
 border-radius: 8px;
 background: rgba(8, 16, 14, 0.72);
 border: 1px solid rgba(126, 200, 240, 0.22);
 font-family: "IBM Plex Mono", Consolas, monospace;
 font-size: 0.64rem;
 letter-spacing: 0.03em;
}
.fm2d__clock {
 color: #fff;
 font-weight: 700;
 min-width: 3rem;
}
.fm2d__scoreline {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.4rem;
 color: rgba(247, 243, 236, 0.9);
 text-align: center;
}
.fm2d__team {
 display: inline-flex;
 align-items: center;
 gap: 0.28rem;
}
.fm2d__dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.fm2d__dot--home { background: #3ec6ff; }
.fm2d__dot--away { background: #ff5a5a; }
.fm2d__score {
 font-weight: 700;
 color: #fff;
 letter-spacing: 0.06em;
}
.fm2d__live {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 color: #ff6b6b;
 font-weight: 700;
 letter-spacing: 0.1em;
}
.fm2d__live i {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: #ff4d4d;
 animation: home-live-pulse 1.4s ease-out infinite;
}
.fm2d__stage {
 display: grid;
 grid-template-columns: minmax(0, 1.55fr) minmax(7.5rem, 0.8fr);
 gap: 0.5rem;
 align-items: stretch;
}
@media (max-width: 700px) {
 .fm2d__stage {
 grid-template-columns: 1fr;
 }
 .fm2d__comms {
 height: auto !important;
 min-height: 0 !important;
 max-height: 180px;
 }
}
.fm2d__pitch {
 /* Green block = pitch + touchline runoff; field lines scale with the block */
 --runoff: clamp(0.5rem, 5.5%, 0.9rem);
 position: relative;
 width: 100%;
 max-width: 100%;
 margin-inline: auto;
 aspect-ratio: 105 / 68;
 height: auto;
 border-radius: 10px;
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, 0.14);
 background: repeating-linear-gradient(90deg, #2f8f49 0 12%, #2a8342 12% 24%);
 box-shadow:
 inset 0 0 0 2px rgba(18, 70, 36, 0.55),
 inset 0 0 22px rgba(0, 0, 0, 0.22);
}
.fm2d__field {
 position: absolute;
 inset: var(--runoff);
 z-index: 1;
 overflow: hidden;
 border-radius: 2px;
}
.fm2d__markings {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 display: block;
 z-index: 1;
 overflow: hidden;
}
.fm2d__markings line,
.fm2d__markings rect,
.fm2d__markings circle,
.fm2d__markings path {
 fill: none;
 stroke: rgba(255, 255, 255, 0.82);
 stroke-width: 1.1;
 vector-effect: non-scaling-stroke;
}
.fm2d__markings .fm2d__fill-spot {
 fill: rgba(255, 255, 255, 0.85);
 stroke: none;
}
.fm2d__actors {
 position: absolute;
 inset: 0;
 z-index: 2;
}
.fm2d__touchlines {
 position: absolute;
 inset: 0;
 z-index: 5;
 pointer-events: none;
}
.fm2d__player,
.fm2d__ref,
.fm2d__ball,
.fm2d__ar,
.fm2d__ref-wrap {
 position: absolute;
 transform: translate(-50%, -50%);
 will-change: left, top;
}
.fm2d__player,
.fm2d__ref,
.fm2d__ball {
 border-radius: 50%;
}
.fm2d__player {
 width: 9px;
 height: 9px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
.fm2d__player--home {
 background: radial-gradient(circle at 35% 30%, #8fdfff, #1f9fd6 55%, #0b6f99);
}
.fm2d__player--away {
 background: radial-gradient(circle at 35% 30%, #ff9b9b, #e23b3b 55%, #9b1c1c);
}
.fm2d__ref-wrap {
 z-index: 6;
 width: 0;
 height: 0;
}
.fm2d__ref {
 position: absolute;
 left: 0;
 top: 0;
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: radial-gradient(circle at 35% 30%, #555, #111 60%);
 box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, 0.5);
 transform: translate(-50%, -50%);
}
.fm2d__jw-tag {
 position: absolute;
 left: 8px;
 top: -11px;
 white-space: nowrap;
 font-family: "IBM Plex Mono", Consolas, monospace;
 font-size: 0.55rem;
 font-weight: 700;
 letter-spacing: 0.02em;
 color: #062218;
 background: linear-gradient(120deg, #7ddea8, #5ecf9a);
 border-radius: 999px;
 padding: 0.12rem 0.38rem;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
 pointer-events: none;
 z-index: 7;
}
.fm2d__jw-tag::before {
 content: "";
 position: absolute;
 left: -3px;
 top: 50%;
 width: 5px;
 height: 5px;
 background: #7ddea8;
 transform: translateY(-50%) rotate(45deg);
}
.fm2d__jw-tag--ar {
 left: 8px;
 top: -13px;
}
.fm2d__ar {
 z-index: 6;
 width: 0;
 height: 0;
 position: absolute;
 transform: translate(-50%, -50%);
 will-change: left;
}
.fm2d__ar--top {
 /* Sit on the top touchline (visible, not lost in runoff) */
 top: var(--runoff);
}
.fm2d__ar--bot {
 /* Sit on the bottom touchline */
 top: calc(100% - var(--runoff));
}
.fm2d__ar-body {
 position: absolute;
 left: 0;
 top: 0;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: radial-gradient(circle at 35% 30%, #9a9a9a, #1c1c1c 62%);
 box-shadow:
  0 0 0 2px rgba(255, 255, 255, 0.95),
  0 1px 4px rgba(0, 0, 0, 0.55);
 transform: translate(-50%, -50%);
}
.fm2d__ar--top .fm2d__ar-body {
 width: 11px;
 height: 11px;
 box-shadow:
  0 0 0 2px #fff,
  0 0 10px rgba(255, 255, 255, 0.45),
  0 1px 4px rgba(0, 0, 0, 0.55);
}
.fm2d__ar-flag {
 position: absolute;
 left: 2px;
 top: -10px;
 width: 9px;
 height: 7px;
 background: linear-gradient(180deg, #ffe566, #f0b35a);
 border-radius: 1px 2px 2px 1px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
 transform-origin: left center;
 animation: fm-flag-wave 1.4s ease-in-out infinite;
}
.fm2d__ar-flag::before {
 content: "";
 position: absolute;
 left: -1.5px;
 top: 0;
 bottom: -3px;
 width: 1.5px;
 background: #ddd;
 border-radius: 1px;
}
.fm2d__ar--raise .fm2d__ar-flag {
 animation: fm-flag-raise 0.85s ease-out infinite;
}
.fm2d__ball {
 width: 7px;
 height: 7px;
 background: radial-gradient(circle at 32% 28%, #fff 0 35%, #d8d8d8 36% 55%, #222 56% 70%, #f2f2f2 71%);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
 z-index: 5;
}
.fm2d__card-fx {
 position: absolute;
 inset: 0;
 z-index: 8;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(6, 14, 12, 0.55);
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s ease;
}
.fm2d__card-fx.is-on {
 opacity: 1;
 visibility: visible;
}
.fm2d__big-card {
 width: 36px;
 height: 52px;
 border-radius: 4px;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2);
 transform: translateY(-18px) scale(0.7) rotate(-8deg);
 opacity: 0;
}
.fm2d__card-fx.is-on .fm2d__big-card {
 animation: fm-card-show 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.fm2d__big-card--y {
 background: linear-gradient(160deg, #ffe566 0%, #f0b35a 100%);
}
.fm2d__big-card--r {
 background: linear-gradient(160deg, #ff6b6b 0%, #b71c1c 100%);
}
.fm2d__card-label {
 position: absolute;
 bottom: 10%;
 left: 50%;
 transform: translateX(-50%);
 font-family: "IBM Plex Mono", Consolas, monospace;
 font-size: 0.62rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 color: #fff;
 text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
 opacity: 0;
}
.fm2d__card-fx.is-on .fm2d__card-label {
 animation: fm-card-label 1.8s ease forwards;
}
.fm2d__comms {
 height: 0;
 min-height: 100%;
 border-radius: 8px;
 background: rgba(8, 16, 14, 0.78);
 border: 1px solid rgba(126, 200, 240, 0.2);
 padding: 0.4rem 0.5rem;
 display: flex;
 flex-direction: column;
 gap: 0.3rem;
 box-sizing: border-box;
 overflow: hidden;
 pointer-events: auto;
}
.fm2d__comms-label {
 margin: 0;
 font-size: 0.55rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: rgba(126, 200, 240, 0.75);
 font-weight: 700;
 flex-shrink: 0;
}
.fm2d__comms-text {
 margin: 0;
 font-size: 0.72rem;
 line-height: 1.35;
 color: rgba(247, 243, 236, 0.92);
 animation: home-ticker-in 0.3s ease;
 flex: 0 0 auto;
 max-height: 2.7em;
 overflow: hidden;
}
.fm2d__comms-text.is-card { color: #f0b35a; }
.fm2d__comms-text.is-red { color: #ff8a80; }
.fm2d__yc-board {
 margin-top: 0.15rem;
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 padding-top: 0.35rem;
 border-top: 1px dashed rgba(240, 179, 90, 0.35);
}
.fm2d__yc-head {
 display: flex;
 align-items: center;
 gap: 0.35rem;
 flex-shrink: 0;
}
.fm2d__yc-icon {
 width: 10px;
 height: 14px;
 border-radius: 1.5px;
 background: linear-gradient(160deg, #ffe566, #f0b35a);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
 flex-shrink: 0;
}
.fm2d__yc-title {
 margin: 0;
 font-size: 0.55rem;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 font-weight: 700;
 color: rgba(240, 179, 90, 0.9);
}
.fm2d__yc-count {
 margin-left: auto;
 font-family: "IBM Plex Mono", Consolas, monospace;
 font-size: 0.58rem;
 color: rgba(247, 243, 236, 0.65);
}
.fm2d__yc-list {
 list-style: none;
 margin: 0;
 padding: 0 0.15rem 0 0;
 overflow-x: hidden;
 overflow-y: auto;
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 gap: 0.22rem;
 scrollbar-width: thin;
 pointer-events: auto;
}
.fm2d__yc-list:empty::after {
 content: "No bookings yet - give it a minute.";
 font-size: 0.62rem;
 color: rgba(197, 184, 168, 0.55);
 font-style: italic;
}
.fm2d__yc-item {
 display: grid;
 grid-template-columns: 10px minmax(0, 1fr);
 gap: 0.35rem;
 align-items: start;
 font-size: 0.62rem;
 line-height: 1.3;
 color: rgba(247, 243, 236, 0.82);
}
.fm2d__yc-item .fm2d__yc-icon { margin-top: 1px; }
.fm2d__yc-item--red .fm2d__yc-icon {
 background: linear-gradient(160deg, #ff6b6b, #b71c1c);
}
.fm2d__yc-item strong {
 color: #f0b35a;
 font-weight: 700;
}
.fm2d__yc-item--red strong { color: #ff8a80; }

@keyframes home-live-pulse {
 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55); }
 70% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); }
 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}
@keyframes fm-card-show {
 0% { opacity: 0; transform: translateY(-22px) scale(0.65) rotate(-12deg); }
 18% { opacity: 1; transform: translateY(0) scale(1.08) rotate(3deg); }
 28% { transform: translateY(0) scale(1) rotate(-2deg); }
 78% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
 100% { opacity: 0; transform: translateY(10px) scale(0.9) rotate(0deg); }
}
@keyframes fm-card-label {
 0%, 12% { opacity: 0; }
 22%, 75% { opacity: 1; }
 100% { opacity: 0; }
}
@keyframes fm-flag-wave {
 0%, 100% { transform: rotate(-6deg); }
 50% { transform: rotate(10deg); }
}
@keyframes fm-flag-raise {
 0%, 100% { transform: rotate(-18deg) translateY(0); }
 50% { transform: rotate(22deg) translateY(-2px); }
}
@keyframes home-ticker-in {
 from { opacity: 0; transform: translateY(5px); }
 to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
 .page-bg__video { display: none; }
 .fm2d__live i,
 .fm2d__big-card,
 .fm2d__card-label,
 .fm2d__comms-text,
 .fm2d__ar-flag {
 animation: none !important;
 }
}

/* Venue map */
.games-map-wrap {
 margin: 1.75rem 0 0.5rem;
}
.games-map-head h3 {
 margin: 0 0 0.25rem;
 font-family: var(--font-display);
 font-size: 1.35rem;
}
.games-map-head p {
 margin: 0 0 0.85rem;
 color: rgba(255, 255, 255, 0.65);
 font-size: 0.92rem;
}
.games-map {
 height: 360px;
 min-height: 320px;
 width: 100%;
 border-radius: 1rem;
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, 0.12);
 box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
 background: #0b1f3a;
 z-index: 1;
 position: relative;
}
.games-map .leaflet-container {
 width: 100%;
 height: 100%;
 background: #0b1f3a;
 font: inherit;
}
/* Global img{max-width:100%} breaks Leaflet tiles */
.games-map .leaflet-container img,
.leaflet-container img.leaflet-tile,
.leaflet-pane img {
 max-width: none !important;
 max-height: none !important;
 width: auto !important;
 height: auto !important;
}
.games-map-fallback {
 margin: 0;
 padding: 1.25rem;
 color: rgba(255, 255, 255, 0.75);
}
.games-map-fallback a {
 color: #7ec8f0;
 text-decoration: underline;
}
.games-map-note {
 margin: 0.65rem 0 0;
 font-size: 0.85rem;
 color: rgba(255, 255, 255, 0.55);
}
.games-map-note .link-arrow {
 color: #7ec8f0;
}