:root{
  --navy:#06172b;--navy2:#0c294a;--royal:#123b68;--gold:#e6b859;--red:#d92334;--cream:#f5f6f8;--ink:#0c1e32;--muted:#66758a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:#f2f4f8;overflow-x:hidden;max-width:100%;width:100%}
h1,h2,h3,h4,.display,.eyebrow,.pill,.tab,.statnum,.score-title,.table-heading{font-family:'Barlow Condensed',sans-serif}
a{text-decoration:none;color:inherit}
button,select{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
img{max-width:100%;height:auto}
.mobile-drawer-watch{display:none}

.microbar{min-height:32px;background:#031121;color:#bccddd;display:flex;justify-content:space-between;align-items:center;padding:0 max(4%,24px);font-size:10px;letter-spacing:1.3px;font-weight:700;gap:12px;flex-wrap:wrap}
.microbar i{color:var(--gold);font-style:normal;margin:0 7px}

header{background:#fff;display:flex;align-items:center;gap:22px;padding:10px max(4%,24px);min-height:80px;position:sticky;top:0;z-index:30;box-shadow:0 4px 25px #06172b14}
.brand{display:flex;align-items:center;gap:10px;min-width:280px;flex-shrink:0}
.brand img{height:60px;width:60px;object-fit:contain}
.brand strong{font-family:'Barlow Condensed';font-size:24px;line-height:1;letter-spacing:.3px;color:var(--navy);display:block}
.brand strong span{font-size:15px;color:var(--red);display:block;margin-top:2px}
.brand small{display:block;font-size:9px;letter-spacing:2.2px;margin-top:5px;font-weight:800}

nav{display:flex;align-items:center;gap:22px;flex:1;min-width:0}
nav > a,.nav-parent{font-family:'Barlow Condensed';font-size:17px;font-weight:800;letter-spacing:.65px;white-space:nowrap;padding:25px 0;border-bottom:4px solid transparent;display:block}
nav > a.active, nav > a:hover,.nav-dropdown.active .nav-parent,.nav-parent:hover{color:var(--red);border-bottom-color:var(--red)}
.nav-dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;top:calc(100% - 1px);left:0;background:white;border:1px solid #dde4ee;box-shadow:0 18px 40px rgba(6,23,43,.15);min-width:230px;padding:10px 0;border-radius:0 0 14px 14px}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;font-weight:700;color:var(--ink)}
.dropdown-menu a:hover{background:#f4f7fb;color:var(--red)}
.dropdown-menu img{width:26px;height:26px;object-fit:contain}

.watch{background:#c9152d;color:white;padding:13px 19px;font-family:'Barlow Condensed';font-weight:800;letter-spacing:.8px;white-space:nowrap}
.nav-toggle{display:none;border:0;background:transparent;font-size:30px}

.hero{min-height:620px;position:relative;background:linear-gradient(95deg,#031121fa 4%,#061b35dd 48%,#06172938),url('assets/trophy.jpg') right 16% center/auto 112% no-repeat,#061526;display:flex;align-items:center;overflow:hidden;color:#fff}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:6px;background:linear-gradient(90deg,var(--red) 0 31%,var(--gold) 31% 65%,#fff 65%)}
.hero-content{position:relative;z-index:1;width:min(760px,92%);margin-left:max(5%,25px);padding:55px 0}
.eyebrow{font-weight:800;color:var(--gold);letter-spacing:3px;font-size:17px}
.hero .eyebrow{font-size:16px}
.hero-kicker{display:inline-block;background:#ffffff14;border:1px solid #ffffff33;padding:7px 12px;font-size:12px;color:#fff;letter-spacing:1.8px;font-weight:800;margin-top:10px}
.hero h1{font-size:clamp(58px,8vw,118px);line-height:.85;margin:16px 0 14px;letter-spacing:-1.5px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{font-size:17px;color:#d9e2ea;line-height:1.7;max-width:560px}
.hero-actions{display:flex;gap:12px;margin:26px 0 35px;flex-wrap:wrap}
.btn{border:none;background:var(--red);color:white;display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;font-family:'Barlow Condensed';font-size:19px;font-weight:800;letter-spacing:1px;transition:.2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn.outline{background:transparent;border:1px solid #8798ab;color:white}
.btn.dark{background:var(--navy)}
.countdown{display:flex;gap:24px;margin:24px 0;flex-wrap:wrap}
.count-unit strong{font:800 46px/1 'Barlow Condensed';display:block}
.count-unit span{color:#abbccf;font:700 11px 'DM Sans';letter-spacing:1.4px}
.hero-bullets{display:flex;gap:18px;flex-wrap:wrap;color:#dce7f1;font-weight:700;font-size:13px}
.hero-bullets span{display:flex;align-items:center;gap:7px}

.status-strip{background:#0b2b4b;color:#fff;padding:20px max(5%,25px);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.status-strip div{display:flex;align-items:center;gap:8px;font:700 12px 'DM Sans';letter-spacing:.5px}
.status-strip span{color:var(--gold)}

.wrap{max-width:1390px;margin:auto;padding:65px max(4%,18px)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:25px;flex-wrap:wrap}
.section-head h2{font-size:clamp(42px,5vw,62px);line-height:1;margin:4px 0 0;color:#082544}
.section-head .eyebrow{color:#c21c31}
.section-head p{color:var(--muted);max-width:700px}
.linkmore{font-weight:800;color:#bd1c31;font-size:13px;letter-spacing:.5px;white-space:nowrap}
.notice{background:#f7f8fb;border:1px solid #dce4ef;padding:16px 18px;color:#5d6f84;margin-bottom:22px}

.match-strip,.fixtures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.match-card,.fixture{background:white;border:1px solid #dbe1ea;box-shadow:0 7px 24px #0a294210;padding:20px;position:relative}
.match-card:before,.fixture:before{position:absolute;content:"";width:60px;top:0;left:0;height:4px;background:var(--red)}
.match-meta{display:flex;justify-content:space-between;color:#52677a;font-size:11px;font-weight:800;letter-spacing:.6px;gap:8px;flex-wrap:wrap}
.match-teams{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:18px 0}
.mini-team{flex:1;display:flex;gap:8px;align-items:center;flex-direction:column;text-align:center;font-size:12px;font-weight:800}.mini-team img{width:62px;height:60px;object-fit:contain;border-radius:6px}
.vs{font:800 21px 'Barlow Condensed';color:#a2aebb}.match-time{text-align:center;border-top:1px solid #e6e9f0;padding-top:12px;font-size:11px;color:#687989}

.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.team-card{background:white;box-shadow:0 8px 26px #122b4313;border:1px solid #e1e7ee;overflow:hidden;text-align:center;transition:.25s}.team-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px #102e4733}
.team-art{background:linear-gradient(145deg,#0a2646,#041427);min-height:190px;display:flex;align-items:center;justify-content:center;padding:16px}.team-art img{max-width:90%;max-height:160px;object-fit:contain}
.team-card h3{font-size:27px;margin:13px 6px 2px;color:var(--navy)}.team-card small{font-size:11px;color:#677a8a;letter-spacing:1px}.team-card .view{display:block;color:#b81e32;font:800 15px 'Barlow Condensed';padding:13px;border-top:1px solid #eee;margin-top:12px}

.dark-section{background:#061a31;color:white}.dark-section .section-head h2{color:white}.dark-section .section-head p{color:#9fadc0}
.stats-banner{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#d8dfeb;margin:0 auto}.stats-banner div{padding:30px;background:white;text-align:center}.stats-banner strong{font:800 64px 'Barlow Condensed';color:#0d3157;display:block}.stats-banner span{font-size:11px;font-weight:800;letter-spacing:1.2px;color:#53657a}

.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}.feature-photo{min-height:360px;background:#071629 url('usasc-home-trophy.png') center center/contain no-repeat;position:relative}.feature-photo .gradient{position:absolute;inset:0;background:linear-gradient(0deg,#051323 0%,transparent 72%)}.feature-photo .copy{position:absolute;bottom:25px;left:25px;color:white}.feature-photo h3{font-size:46px;margin:4px 0}.feature-aside{display:grid;gap:16px}.feature-aside a{display:flex;gap:15px;background:white;padding:14px;align-items:center;color:var(--ink)}.feature-aside img{width:110px;height:115px;object-fit:cover}.feature-aside h3{font-size:25px;line-height:1.1;margin:4px 0}

.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.media-grid img{height:330px;width:100%;object-fit:cover;background:#0a1930}.media-grid .caption{padding:16px;background:white;min-height:138px}.media-grid h3{margin:0 0 4px;font-size:24px}.smallcap{font-size:11px;font-weight:800;color:#ac1a32;letter-spacing:1.3px}
.page-top{background:linear-gradient(115deg,#061326,#0d365d);color:white;padding:58px max(5%,22px)}.page-top h1{font-size:clamp(56px,8vw,90px);margin:5px 0;line-height:.95}.page-top p{max-width:720px;color:#d6e0ea;line-height:1.8}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}.tab{border:1px solid #d3dbe6;background:#fff;padding:10px 15px;font-weight:800;font-size:17px}.tab.active{background:var(--red);border-color:var(--red);color:#fff}
.points-table{width:100%;border-collapse:collapse;background:#fff}.points-table th,.points-table td{padding:14px 12px;border:1px solid #e1e7ef;text-align:left;font-size:13px}.points-table th{background:#071c33;color:#fff;font:800 13px 'Barlow Condensed';letter-spacing:1px}.points-table td img{width:38px;height:34px;object-fit:contain;vertical-align:middle;margin-right:10px}.points-table td a{display:flex;align-items:center;font-weight:700}
.groups-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.group-box{background:#fff;padding:20px;border:1px solid #dde4ef}.group-box h3{font-size:30px;margin:0 0 10px}.team-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eef2f6;font-weight:700}.team-line:last-child{border-bottom:none}.team-line img{width:44px;height:40px;object-fit:contain}
.profile-hero{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:center;background:white;padding:26px;border:1px solid #e1e8f0}.profile-hero > img{width:100%;max-height:240px;object-fit:contain;background:linear-gradient(145deg,#0a2646,#041427);padding:18px}.profile-hero h2{font-size:60px;margin:8px 0 4px;color:#081f39;line-height:.92}.profile-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.player-placeholder{background:white;padding:18px;border:1px solid #dee6ef}.player-placeholder .num{font:800 30px 'Barlow Condensed';color:#c41b30}.player-placeholder p{margin:8px 0 0;color:#65778b;font-size:13px}

.marquee-board{display:grid;gap:14px}
.marquee-row{display:grid;grid-template-columns:280px repeat(4,1fr);gap:12px;align-items:stretch;background:white;border:1px solid #dce4ee;padding:14px}
.marquee-team{display:flex;align-items:center;gap:12px;padding-right:10px;border-right:1px solid #eef2f6}
.marquee-team img{width:70px;height:64px;object-fit:contain}
.marquee-team h3{font-size:28px;margin:0;color:var(--navy);line-height:.9}
.marquee-team small{display:block;color:#6d7d91;font-size:12px;font-weight:800;letter-spacing:.8px}
.marquee-slot{background:#f7f9fc;border:1px dashed #d2dce8;padding:14px;display:flex;flex-direction:column;justify-content:center}
.marquee-slot strong{font-size:15px}
.marquee-slot span{font-size:12px;color:#607287;margin-top:5px}

.sponsor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sponsor-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sponsor-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sponsor-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.profile-partner-box{margin-top:16px;padding:12px 16px;background:#f7f9fc;border:1px solid #dde5ef;border-radius:8px;display:inline-flex;flex-direction:column;gap:8px}
.profile-partner-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:800;letter-spacing:1px;color:#ba1d31}
.profile-partner-items{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.profile-partner-item{display:inline-flex;align-items:center;gap:12px;padding:6px 14px;background:#ffffff;border:1px solid #d8e2ec;border-radius:6px;text-decoration:none;color:#071b33;font-weight:700;font-size:13px;transition:all .2s ease}
.profile-partner-item:hover{transform:translateY(-2px);border-color:#071b33;box-shadow:0 4px 12px rgba(7,27,51,.1)}
.profile-partner-item.partner-dark{background:#000000;border-color:#1c2e42;color:#ffffff}
.profile-hero .profile-partner-item img,
.profile-partner-item img{height:28px !important;max-height:28px !important;width:auto !important;max-width:110px !important;object-fit:contain !important;background:transparent !important;padding:0 !important;display:block !important;border:none !important}
.sponsor-card{background:white;border:1px solid #e1e8f0;padding:36px 18px 20px 18px;display:flex;align-items:center;justify-content:center;min-height:200px;position:relative;text-align:center;box-sizing:border-box}
a.sponsor-card-link{text-decoration:none;color:inherit;cursor:pointer;transition:transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease}
a.sponsor-card-link:hover{transform:translateY(-4px);border-color:#071b33;box-shadow:0 14px 28px rgba(7, 27, 51, 0.12)}
.sponsor-body-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.sponsor-card img{max-width:100%;max-height:92px;object-fit:contain}
.img-dark-bg{background:#000000;padding:6px;border-radius:8px;border:1px solid #1c2e42;box-shadow:0 3px 10px rgba(0,0,0,0.15);max-height:92px;height:88px}
.sponsor-card .tag{position:absolute;top:12px;left:12px;background:#071b33;color:white;padding:5px 9px;font-size:9.5px;font-weight:800;letter-spacing:0.8px;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor-note{font-size:12px;color:#6b7d91;margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:2px}
.sponsor-note strong{font-size:13.5px;color:#071b33;display:inline-block}
.sponsor-role-desc{font-size:11.5px;color:#071b33;font-weight:600}
.partner-cta-link{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:0.8px;color:#b01a1e;margin-top:4px;text-transform:uppercase}
a.sponsor-card-link:hover .partner-cta-link{color:#071b33;text-decoration:underline}
.sponsor-cta{background:#051323;color:white;padding:36px 0}.sponsor-cta h2{font-size:54px;margin:8px 0}

/* Stats Centre Leaderboards & Record Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.stat-card {
  background: #ffffff;
  border: 1px solid #dde5ef;
  border-radius: 10px;
  padding: 22px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 3px 14px rgba(7, 28, 51, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(7, 28, 51, 0.1);
  border-color: #c7d5e6;
}

.stat-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.stat-cat-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #082544;
  margin: 0;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  background: #f4f7fb;
  border: 1px solid #d6dee9;
  color: #0f2b4a;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 4px;
  white-space: nowrap;
}

.stat-pill-leader {
  background: #071c33;
  color: #f6c85f;
  border-color: #071c33;
  box-shadow: 0 2px 6px rgba(7, 28, 51, 0.18);
}

.stat-pill-rank {
  background: #ba1d31;
  color: #ffffff;
  border-color: #a01526;
  box-shadow: 0 2px 6px rgba(186, 29, 49, 0.25);
}

/* Populated Player Hero Box */
.stat-player-showcase {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f7f9fc;
  border: 1px solid #e2e9f2;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.stat-player-showcase:hover {
  background: #edf3fa;
  border-color: #cbd8e8;
}

.stat-player-avatar-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: visible;
  padding: 2px;
  background: linear-gradient(135deg, #ba1d31 0%, #071c33 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.stat-player-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #081f39;
}

.stat-rank-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #ffd700;
  color: #071c33;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  line-height: 1;
}

.stat-player-info {
  flex: 1;
  min-width: 0;
}

.stat-team-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5d7085;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 3px;
  line-height: 1.2;
}

.stat-team-line:hover {
  color: #ba1d31;
}

.stat-team-crest {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.stat-player-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #071c33;
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.stat-player-showcase:hover .stat-player-name {
  color: #ba1d31;
}

/* Metric Display Strip */
.stat-metric-card {
  background: linear-gradient(135deg, #071c33 0%, #0d2847 100%);
  border-radius: 8px;
  padding: 12px 14px;
  color: #ffffff;
  border-left: 4px solid #ba1d31;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.stat-number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #f7d070;
  line-height: 1;
  letter-spacing: 0.5px;
}

.stat-scope {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #9bb1c9;
}

.stat-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #e1e9f4;
}

/* Template Empty State */
.stat-card.stat-template {
  background: #ffffff;
}

.stat-empty {
  border-top: 1px dashed #d8dfeb;
  padding-top: 16px;
  color: #617387;
  font-size: 13px;
  margin-top: auto;
  line-height: 1.5;
}

.stat-empty p {
  margin: 0 0 12px;
}

footer{background:#071222;color:#dbe4ed;display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;padding:44px max(4%,22px) 30px;position:relative}
.footer-logo{display:flex;gap:12px;align-items:flex-start}.footer-logo img{width:76px;height:76px;object-fit:contain}.footer-logo h3{margin:2px 0 5px;font-size:25px;color:white}.footer-logo p{margin:2px 0}.footnote{grid-column:1/-1;border-top:1px solid #163152;padding-top:18px;font-size:12px;color:#8ea2b7}



/* NPL 2026 V3: Home franchise identity, marquee, press and editorial */
.hero{min-height:600px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;background-position:right 20% top 10%}
.hero-content{padding:30px 0 8px;width:min(770px,90%)}
.hero h1{font-size:clamp(54px,7vw,94px);margin:14px 0;line-height:.84}
.hero-content p{font-size:15px;line-height:1.55;max-width:650px;margin:10px 0}
.hero-actions{margin:14px 0 16px}
.hero .countdown{margin:12px 0}
.hero .count-unit strong{font-size:34px}
.hero-bullets{margin:7px 0}
.hero-franchise-ribbon{background:rgba(1,10,21,.84);border-top:1px solid #ffffff28;position:relative;z-index:2;padding:10px max(4%,18px) 14px}
.ribbon-caption{font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:2.2px;color:var(--gold);display:block;text-align:center;margin-bottom:6px}
.hero-logo-line{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;gap:10px}
.hero-logo-line a{height:76px;border:1px solid #ffffff24;border-radius:10px;background:#ffffff0d;display:flex;align-items:center;justify-content:center;transition:.2s}
.hero-logo-line a:hover{background:#ffffff22;transform:translateY(-4px)}
.hero-logo-line img{height:64px;width:90%;object-fit:contain;display:block}
/* 3D Franchise Showcase Carousel */
.franchise-showcase {
  background: radial-gradient(circle at 50% 30%, #0c2b4c 0%, #06172b 75%, #030e1c 100%);
  color: #fff;
  padding: 60px max(4%, 24px) 70px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.showcase-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 36px;
}
.kicker-red {
  color: #e52d42;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.showcase-head h2 {
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1;
  color: #ffffff;
  margin: 0 0 14px;
  letter-spacing: 0.5px;
  font-weight: 900;
}
.showcase-head p {
  color: #9cb0c5;
  font-size: 16px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
}

.fc-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  min-height: 520px;
  position: relative;
  gap: 30px;
}

.fc-carousel-area {
  flex: 1 1 56%;
  height: 480px;
  position: relative;
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  touch-action: pan-y;
}

.fc-scene {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.fc-track {
  width: 260px;
  height: 350px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.fc-track:active {
  cursor: grabbing;
}

.fc-card {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(14, 38, 70, 0.85) 0%, rgba(5, 17, 34, 0.95) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.4s ease, filter 0.4s ease, opacity 0.4s ease, border-color 0.4s ease;
  user-select: none;
  overflow: visible;
  opacity: 0.42;
  filter: brightness(0.65) grayscale(20%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  cursor: pointer;
}

.fc-card:hover {
  opacity: 0.75;
  filter: brightness(0.85);
  border-color: rgba(255, 255, 255, 0.3);
}

.fc-card.active {
  opacity: 1;
  filter: brightness(1) grayscale(0%);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: default;
}

.fc-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  opacity: 0.12;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}
.fc-card.active .fc-card-glow {
  opacity: 0.35;
}

.fc-card-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
}

.fc-card-emblem {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-card-emblem img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5));
  pointer-events: none;
}

.fc-card-name {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content;
  max-width: 240px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.4px;
  opacity: 0.6;
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
  white-space: nowrap;
}
.fc-card.active .fc-card-name {
  opacity: 1;
  font-size: 18px;
  transform: translateX(-50%) translateY(0);
  color: #ffffff;
}

.fc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(10, 29, 53, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  cursor: pointer;
  line-height: 1;
}
.fc-arrow:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-50%) scale(1.08);
}
.fc-arrow-prev { left: 8px; }
.fc-arrow-next { right: 8px; }

/* Details Panel */
.fc-details-area {
  flex: 1 1 42%;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-detail-panel {
  width: 100%;
  max-width: 460px;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.fc-detail-panel.changing {
  opacity: 0.25;
  transform: translateY(8px);
}

.fc-detail-inner {
  padding: 34px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46'><path d='M 4,40 L 4,4 L 40,4' fill='none' stroke='rgba(130,165,205,0.45)' stroke-width='4' stroke-linecap='square'/></svg>") top left no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46'><path d='M 42,6 L 42,42 L 6,42' fill='none' stroke='rgba(130,165,205,0.45)' stroke-width='4' stroke-linecap='square'/></svg>") bottom right no-repeat;
}

.fc-detail-emblem {
  width: 110px;
  height: 110px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(5, 17, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  padding: 10px;
  flex-shrink: 0;
}
.fc-detail-emblem img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.fc-detail-content h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(26px, 3vw, 32px);
  margin: 0 0 4px;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.3px;
}

#fc-detail-location {
  font-size: 14.5px;
  color: #9cb0c6;
  margin-bottom: 15px;
  font-weight: 500;
}

.fc-detail-motto {
  font-size: 15px;
  font-style: italic;
  font-weight: 700;
  margin-bottom: 14px;
  color: #e6b859;
}

#fc-detail-desc {
  font-size: 14px;
  line-height: 1.68;
  color: #c9d8e8;
  margin: 0 0 20px;
}

.fc-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: #fff;
  padding: 11px 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.8px;
  border-radius: 4px;
  transition: transform 0.2s, background 0.2s;
}
.fc-detail-btn:hover {
  background: #f02d42;
  transform: translateY(-2px);
}

.marquee-row{grid-template-columns:150px repeat(4,minmax(0,1fr));gap:14px;border-radius:8px}
.marquee-team-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #e5ebf2;padding:12px 8px;background:#fbfdff;border-radius:6px;text-decoration:none;text-align:center;gap:6px;transition:background .2s}
.marquee-team-logo:hover{background:#f0f5fb}
.marquee-team-logo img{width:88px;height:78px;object-fit:contain}
.category-tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;display:inline-flex;align-self:flex-start;padding:5px 9px;border-radius:4px}
.category-tag.diamond{background:#dae9f5;color:#164667}
.category-tag.gold{background:#f7e6af;color:#76500b}
.category-tag.silver{background:#e4e8ef;color:#44556b}
.media-blog-grid,.press-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.media-blog,.press-card{background:#fff;border:1px solid #dae3ed;border-radius:9px;padding:25px;min-height:200px}
.media-blog h3,.press-card h3{font-size:29px;color:#092a4a;margin:10px 0}
.media-blog p,.press-card p{color:#62758a;line-height:1.5;font-size:14px}
.press-card{grid-column:span 2;transition:.2s}
.press-card:hover{border-color:var(--red);transform:translateY(-3px)}
.press-mini{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;padding:18px;background:#fff;border-left:4px solid var(--red)}
.press-tab-link{background:transparent;color:#ad1b30;font-weight:800;border:0;cursor:pointer;margin-left:auto}
.media-tabs{margin-bottom:32px}
.home-marquee-preview .marquee-board{gap:10px}
@media(max-width:1130px){.marquee-row{grid-template-columns:120px repeat(2,minmax(0,1fr))}.marquee-team-logo{grid-row:span 2}.hero-logo-line a{height:70px}.hero-logo-line img{height:59px}}
@media(max-width:720px){.hero{min-height:0;background-size:cover}.hero h1{font-size:clamp(55px,14vw,77px)}.hero-logo-line{grid-template-columns:repeat(4,1fr)}.hero-logo-line a{height:66px}.hero-logo-line img{height:56px}.home-franchise-top h2{font-size:38px}.franchise-slide{min-width:180px;width:180px;flex-basis:180px;height:200px}.franchise-slide img{height:140px}.marquee-row{grid-template-columns:1fr 1fr}.marquee-team-logo{grid-column:1/-1;grid-row:auto;border-right:none;border-bottom:1px solid #e5ebf2;padding:7px}.marquee-team-logo img{height:110px}.media-blog-grid,.press-grid{grid-template-columns:1fr}.press-card{grid-column:auto}}

/* V4 — opening ceremony, broadcast partner, franchise grid, and fixture table */
.hero-utility-row{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap;margin:18px 0}
.countdown-panel{padding:12px 18px;border:1px solid #ffffff36;background:#061427b5}
.utility-label{font-size:10px;font-weight:800;letter-spacing:1.7px;color:#c8d4e1}
.countdown-panel .countdown{margin:8px 0 0!important}
.willow-broadcast{background:#030e1ed9;border:1px solid #dcb25d86;padding:15px 22px;min-width:238px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;transition:background .2s}
.willow-broadcast:hover{background:#122b48}
.willow-broadcast>span:first-child{font-size:12px;font-weight:800;color:#dfe7f2;letter-spacing:1.8px}
.willow-broadcast strong{font:900 36px/1 'Barlow Condensed',sans-serif;color:#fff;letter-spacing:1.5px}
.willow-broadcast small{font-size:10px;color:var(--gold);letter-spacing:1.5px;font-weight:800}
.willow-ball{font-size:17px;color:#d41e31;vertical-align:middle}
.next-event{background:#fefbf7;border-bottom:1px solid #e4dbca;display:grid;grid-template-columns:174px minmax(0,1fr) auto;gap:32px;align-items:center;padding:29px max(4%,24px)}
.event-date{background:#082443;color:#fff;min-height:155px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-bottom:5px solid var(--red)}
.event-label{font-size:11px;font-weight:800;color:#b82534;letter-spacing:1.7px}
.event-date .event-label{color:#e6bf70}
.event-date strong{font:800 37px 'Barlow Condensed',sans-serif;line-height:1}
.event-date em{font-size:65px;font-style:normal;color:var(--gold)}
.event-date>span:last-child{font-size:10px;font-weight:800;color:#b8c9da;letter-spacing:1px}
.event-copy h2{font:800 clamp(38px,4vw,56px)/.95 'Barlow Condensed',sans-serif;color:#092643;margin:7px 0 9px}
.event-copy p{max-width:660px;font-size:14px;line-height:1.55;color:#637285;margin:0 0 10px}
.event-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;font-weight:800;color:#0c2b4b}
.event-meta span{max-width:460px}
.event-directions{font:800 17px 'Barlow Condensed',sans-serif;letter-spacing:.6px;background:#d41f34;color:#fff;padding:16px 21px;white-space:nowrap;justify-self:end}
.event-directions:hover{background:#ad182a}

.home-schedule{padding-top:55px}
.fixture-table-scroll{width:100%;overflow-x:auto;border:1px solid #dee5ef;box-shadow:0 10px 28px #102b4410}
.fixture-table{border-collapse:collapse;width:100%;min-width:830px;background:#fff}
.fixture-table thead{background:#071d35;color:#fff}
.fixture-table th{text-align:left;padding:16px 12px;font:800 16px 'Barlow Condensed',sans-serif;letter-spacing:1px}
.fixture-table td{padding:11px 12px;border-bottom:1px solid #e5eaf0;vertical-align:middle;font-size:13px;color:#193551}
.fixture-table tbody tr:hover{background:#f3f7fb}
.fixture-table td small{display:block;color:#75869a;font-size:11px}
.fixture-number{font:900 22px 'Barlow Condensed',sans-serif;color:var(--red)}
.fixture-stage{display:inline-flex;padding:5px 9px;background:#e9f0f8;font:800 12px 'Barlow Condensed',sans-serif;white-space:nowrap}
.fixture-pair{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fixture-pair span{display:flex;align-items:center;gap:7px;font-weight:800;min-width:120px}
.fixture-pair img{width:30px;height:30px;object-fit:contain}
.fixture-pair b{color:#9ba9b7;font:800 14px 'Barlow Condensed',sans-serif}
.fixture-detail{color:var(--red);font-size:19px;font-weight:900}
.schedule-foot{text-align:right;margin-top:15px}

/* Group composition precedes fixtures on the Fixtures page */
.fixture-groups{margin-bottom:48px}
.fixture-groups .groups-grid{margin-top:20px}
.fixture-list-section{padding-top:6px}

/* V5 — streamlined hero and marquee player hierarchy */
.hero-actions{display:none}
.countdown-panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:8px 12px 8px 0!important}
.hero-utility-row{align-items:center;gap:34px;margin:20px 0 16px}
.willow-broadcast{min-width:258px;padding:10px 14px;border:none;background:transparent;box-shadow:none;gap:6px}
.willow-broadcast:hover{background:#ffffff0d}
.willow-broadcast .broadcast-line{font-size:13px;color:#fff;letter-spacing:1.5px}
.willow-wordmark{font-size:45px!important;letter-spacing:1px!important;white-space:nowrap}
.willow-wordmark .willow-ball{color:#dc2039;font-size:27px;vertical-align:4px;margin:0 -2px}
.willow-wordmark .tv-label{font-size:32px;color:#fff}
.marquee-profile{position:relative;background:#fff;border:1px solid #dce4ee;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(0,0,0,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.marquee-profile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.1);border-color:#ba1d31}
.marquee-team-name-label{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;color:#082544;line-height:1.15;text-transform:uppercase;letter-spacing:.5px;margin-top:6px}
.marquee-media{position:relative;width:100%;aspect-ratio:4 / 5;overflow:hidden;display:flex;align-items:center;justify-content:center}
.marquee-photo{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .3s ease}
.marquee-profile:hover .marquee-photo{transform:scale(1.03)}
.marquee-template{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
.marquee-template-crest{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:65%;height:65%;object-fit:contain;opacity:.14;filter:grayscale(30%);pointer-events:none}
.marquee-template-svg{width:48%;height:58%;color:rgba(255,255,255,.72);filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.marquee-template-tag{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:800;letter-spacing:.8px;color:rgba(255,255,255,.8);background:rgba(0,0,0,.4);padding:2px 6px;border-radius:3px;white-space:nowrap}
.marquee-body{padding:12px 10px;background:#fff;text-align:center;border-top:1px solid #edf2f7;display:flex;align-items:center;justify-content:center}
.marquee-profile .category-tag{position:absolute;top:8px;right:8px;font-size:10px;line-height:1;letter-spacing:.7px;padding:4px 7px;border-radius:3px;margin:0;z-index:3}
.marquee-profile .category-tag.diamond{background:#10151e;color:#ffd700;border:1px solid #ae8c44}
.marquee-profile .category-tag.gold{background:#ead298;color:#65430b}
.marquee-profile .category-tag.silver{background:#dce3eb;color:#46566a}
.marquee-profile .marquee-player-name{font-family:'Barlow Condensed',sans-serif;font-size:clamp(16px,1.2vw,19px);line-height:1.1;letter-spacing:.4px;color:#061d35;margin:0;max-width:100%;text-transform:uppercase}

/* Game-day Photos & Videos Media tabs */
.game-media-intro{border-left:4px solid var(--red);background:#0a2340;color:#fff;padding:24px 28px;margin:18px 0 24px}
.game-media-intro h3{font:800 clamp(32px,4vw,48px)/1 'Barlow Condensed',sans-serif;margin:8px 0}
.game-media-intro p{font-size:14px;line-height:1.65;color:#b9c9d9;max-width:680px;margin:0}
.game-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.game-media-card{min-height:230px;background:#fff;border:1px solid #dce4ee;padding:22px;display:flex;flex-direction:column;align-items:flex-start}
.game-media-icon{height:52px;width:52px;display:flex;align-items:center;justify-content:center;font-size:32px;color:#e6b859;background:#092846;margin-bottom:18px;border-radius:6px}
.game-media-card h3{font:800 28px/1 'Barlow Condensed',sans-serif;color:#092846;margin:8px 0}
.game-media-card p{color:#64768a;font-size:13px;line-height:1.5;margin:0 0 20px}
.game-media-status{color:#8b99aa;font-weight:800;font-size:10px;letter-spacing:1.2px;margin-top:auto}

/* Preserve the user-supplied official Willow artwork without filters or recoloring. */
.willow-official-logo{display:block;width:min(280px,100%);height:auto;object-fit:contain;max-height:140px;margin:4px auto;border:0;filter:none}
.willow-broadcast{overflow:hidden}

/* Brand-consistent Teams menu: original logos on dark navy */
.nav-dropdown .dropdown-menu{
  background:linear-gradient(155deg,#0d3154 0%,#06182c 100%);
  border:1px solid #315173;
  border-top:3px solid #d6a94f;
  border-radius:0 0 12px 12px;
  box-shadow:0 20px 40px rgba(3,16,32,.35);
  padding:8px;
  min-width:264px;
}
.nav-dropdown .dropdown-menu a{
  color:#fff;
  padding:9px 12px;
  gap:13px;
  font-weight:700;
  border-radius:7px;
  transition:background .18s ease,color .18s ease;
}
.nav-dropdown .dropdown-menu a:hover,
.nav-dropdown .dropdown-menu a:focus-visible{
  background:#19476f;
  color:#f0c46b;
}
.nav-dropdown .dropdown-menu a+a{border-top:1px solid #ffffff16}
.nav-dropdown .dropdown-menu img{
  width:44px;
  height:44px;
  flex-shrink:0;
  object-fit:contain;
  filter:none;
}

/* Clear live-venue and broadcast information, without oversized hero artwork */
.hero-watch-info{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;flex:1;min-width:250px;max-width:460px;padding:14px 0 14px 22px;border-left:2px solid #dcae55;color:#fff}
.hero-watch-info .watch-kicker{color:#e5b85e;font-size:12px;font-weight:800;letter-spacing:2px}
.hero-watch-info>strong{font:800 clamp(25px,2.7vw,36px)/1.05 'Barlow Condensed',sans-serif;letter-spacing:.6px}
.hero-watch-info .watch-location{font-size:12px;font-weight:800;color:#b9cddd;letter-spacing:1.4px}
/* From Uiverse.io by doniaskima — adapted for Willow Live Button */
.btn-17,
.btn-17 *,
.btn-17 :after,
.btn-17 :before,
.btn-17:after,
.btn-17:before {
  border: 0 solid;
  box-sizing: border-box;
}

.hero-willow-btn.btn-17 {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background-color: #041427;
  color: #fff;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 6px 10px 6px 18px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.22s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.hero-willow-btn.btn-17:hover {
  transform: translateY(-2px);
  border-color: #00e599;
  box-shadow: 0 8px 24px rgba(0, 229, 153, 0.35);
}

.hero-willow-btn.btn-17,
.hero-willow-btn.btn-17 .text-container {
  overflow: hidden;
  position: relative;
}

.hero-willow-btn.btn-17 .text-container {
  display: inline-block;
  mix-blend-mode: difference;
  z-index: 2;
}

.hero-willow-btn.btn-17 .text {
  display: block;
  position: relative;
  white-space: nowrap;
}

.hero-willow-btn.btn-17:hover .text {
  -webkit-animation: move-up-alternate 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation: move-up-alternate 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(110%);
  }
  51% {
    transform: translateY(-110%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(110%);
  }
  51% {
    transform: translateY(-110%);
  }
  to {
    transform: translateY(0);
  }
}

.hero-willow-btn.btn-17:after,
.hero-willow-btn.btn-17:before {
  --skew: 0.2;
  background: #fff;
  content: "";
  display: block;
  height: 104%;
  left: calc(-50% - 50% * var(--skew));
  pointer-events: none;
  position: absolute;
  top: -104%;
  transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
  transition: transform 0.28s ease;
  width: 100%;
  z-index: 1;
}

.hero-willow-btn.btn-17:after {
  --progress: 0%;
  left: calc(50% + 50% * var(--skew));
  top: 102%;
  z-index: 1;
}

.hero-willow-btn.btn-17:hover:before {
  --progress: 100%;
}

.hero-willow-btn.btn-17:hover:after {
  --progress: -102%;
}

.hero-willow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 98px;
  height: 36px;
  border-radius: 9999px;
  overflow: hidden;
  background: #02a578;
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.hero-willow-btn.btn-17:hover .hero-willow-badge {
  transform: scale(1.03);
}

.hero-willow-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer-willow-link,
.footer-partner-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #dbe4ed;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.footer-willow-link:hover,
.footer-partner-link:hover {
  color: #ffffff;
  transform: translateX(3px);
}
.footer-willow-img {
  width: 58px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-partner-img {
  width: 44px;
  height: 26px;
  border-radius: 5px;
  object-fit: contain;
  background: #ffffff;
  padding: 2px 4px;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  box-sizing: border-box;
}
.footer-partner-img-dark {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.28);
}
.broadcast-partners{margin-bottom:48px}
.broadcast-partner-logo{display:inline-flex;flex-direction:column;align-items:center;gap:10px;background:#09223c;padding:20px;border-radius:9px;border:1px solid #c4d0e0;max-width:340px;transition:transform .2s}
.broadcast-partner-logo:hover{transform:translateY(-3px)}
.broadcast-partner-logo img{width:min(285px,100%);height:auto;object-fit:contain;filter:none}
.broadcast-partner-logo span{font:800 16px 'Barlow Condensed',sans-serif;letter-spacing:1px;color:#f0c56b}
@media(max-width:700px){.hero-watch-info{width:100%;max-width:none;min-width:0;padding:15px 0;border-left:0;border-top:1px solid #ffffff44}.hero-watch-info>strong{font-size:30px}.hero-willow-btn.btn-17{margin-top:6px;max-width:100%}.broadcast-partners{margin-bottom:35px}.broadcast-partner-logo{max-width:100%}}

/* About page: canonical league crest beside the inaugural edition story */
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.85fr);gap:42px;align-items:center}
.about-intro-copy{min-width:0}
.about-intro-copy .section-head{margin-bottom:20px}
.about-intro-copy p{max-width:850px;margin:0}
.about-intro-emblem{display:flex;align-items:center;justify-content:center;min-height:310px}
.about-intro-emblem img{display:block;width:min(100%,400px);max-height:400px;height:auto;object-fit:contain;filter:none}
@media(max-width:900px){.about-intro-grid{grid-template-columns:minmax(0,1.3fr) minmax(185px,.7fr);gap:22px}.about-intro-emblem{min-height:220px}.about-intro-emblem img{max-height:290px}}
@media(max-width:650px){.about-intro-grid{grid-template-columns:1fr;gap:20px}.about-intro-emblem{min-height:0;padding:2px 15px 15px}.about-intro-emblem img{width:min(72%,265px);max-height:265px}}

/* USASC hero: use uploaded trophy photograph as BACKGROUND (never as a separate image element). */
.hero{
  background-color:#061526;
  background-image:
    linear-gradient(90deg,rgba(3,17,33,.98) 0%,rgba(3,17,33,.96) 32%,rgba(3,17,33,.78) 52%,rgba(3,17,33,.10) 100%),
    url('usasc-home-trophy.png');
  background-repeat:no-repeat,no-repeat;
  background-position:center,right 5% center;
  background-size:cover,auto 95%;
}
@media(max-width:940px){
  .hero{
    background-image:
      linear-gradient(90deg,rgba(3,17,33,.97) 0%,rgba(3,17,33,.89) 48%,rgba(3,17,33,.40) 100%),
      url('usasc-home-trophy.png');
    background-position:center,right -40px center;
    background-size:cover,auto 86%;
  }
}
@media(max-width:700px){
  .hero{
    background-image:
      linear-gradient(180deg,rgba(3,17,33,.97) 0%,rgba(3,17,33,.94) 49%,rgba(3,17,33,.55) 74%,rgba(3,17,33,.08) 100%),
      url('usasc-home-trophy.png');
    background-repeat:no-repeat,no-repeat;
    background-position:center,center bottom 9px;
    background-size:cover,auto 300px;
  }
  .hero-content{padding-bottom:315px}
}

/* Tournament dates in the hero's live venue section */
.hero-watch-info .watch-dates{display:block;color:#e6b85b;font-family:inherit;font-size:14px;line-height:1.3;font-weight:700;letter-spacing:.6px;margin-top:1px}
@media(max-width:700px){.hero-watch-info .watch-dates{font-size:12px}}

/* Home page only: compact, swipeable fixture TABLE on phones (not stacked cards). */
@media (max-width:700px){
  .home-schedule .fixture-table-scroll{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border:1px solid #dce4ef;
    box-shadow:0 6px 18px #102b4410;
    scrollbar-width:thin;
  }
  .home-schedule .fixture-table{
    display:table;
    width:100%;
    min-width:790px;
    border-collapse:collapse;
    background:#fff;
  }
  .home-schedule .fixture-table thead{display:table-header-group}
  .home-schedule .fixture-table tbody{display:table-row-group}
  .home-schedule .fixture-table tr{
    display:table-row;
    background:#fff;
    padding:0;
    border:0;
    box-shadow:none;
  }
  .home-schedule .fixture-table th{
    display:table-cell;
    white-space:nowrap;
    padding:10px 9px;
    font-size:13px;
  }
  .home-schedule .fixture-table td,
  .home-schedule .fixture-table td:nth-child(n){
    display:table-cell;
    padding:8px 9px;
    border:0;
    border-bottom:1px solid #e5eaf0;
    min-width:0;
    text-align:left;
    vertical-align:middle;
  }
  .home-schedule .fixture-table td small{display:block}
  .home-schedule .fixture-pair{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:7px;
  }
  .home-schedule .fixture-pair span{
    display:flex;
    align-items:center;
    flex:initial;
    min-width:110px;
    font-size:12px;
    line-height:1.2;
    overflow-wrap:normal;
    gap:5px;
  }
  .home-schedule .fixture-pair img{width:27px;height:27px;flex:none}
  .home-schedule .fixture-stage{font-size:11px;white-space:nowrap}
  .home-schedule .fixture-table td:nth-child(5) strong{font-size:12px;color:#193551}
  .home-schedule .fixture-number{font-size:19px}
}

/* =========================================================
   OFFICIAL 15-PLAYER SQUAD GRID & PLAYER CARDS (V4)
   ========================================================= */
.squad-section {
  margin-top: 48px;
}

.squad-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.squad-player-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(10, 25, 45, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.24s ease;
  position: relative;
}

.squad-player-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(10, 25, 45, 0.12);
  border-color: #cbd5e1;
}

.player-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, #153b66 0%, #06162a 82%, #030d1a 100%);
}

.player-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.35s ease;
}

.squad-player-card:hover .player-photo {
  transform: scale(1.04);
}

.player-card-arrow {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #071728;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
  z-index: 3;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.squad-player-card:hover .player-card-arrow {
  background: #ba1d31;
  color: #ffffff;
  transform: scale(1.08);
}

.player-template-media {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.65);
}

.template-crest-bg {
  position: absolute;
  width: 140px;
  height: 140px;
  opacity: 0.14;
  filter: grayscale(1) brightness(1.9);
  object-fit: contain;
  pointer-events: none;
}

.template-silhouette-svg {
  width: 88px;
  height: 98px;
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.squad-player-card:hover .template-silhouette-svg {
  transform: translateY(-3px) scale(1.04);
}

.template-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #e6b859;
  background: rgba(3, 17, 33, 0.75);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.player-card-body {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  background: #ffffff;
  flex: 1;
}

.player-card-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.player-name {
  font-family: 'Barlow Condensed', 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.3px;
  color: #071728;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.15;
}

.player-squad-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: #ba1d31;
  white-space: nowrap;
  line-height: 1;
}



/* Player Card Modal (Lightbox Card Overlay) */
.marquee-profile {
  cursor: pointer;
}

.player-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(3, 12, 24, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.player-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.player-modal-container {
  position: relative;
  max-width: 390px;
  width: 100%;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(18px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.player-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: #ba1d31;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, transform 0.2s ease;
}

.player-modal-close:hover {
  background: #8b0f20;
  transform: scale(1.1);
}

.player-modal-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  max-height: 94vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: #07192e;
  border-bottom: 1px solid #102947;
  flex-shrink: 0;
}

.modal-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.modal-category-tag.diamond {
  background: #121824;
  color: #ffd700;
  border: 1px solid #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.modal-category-tag.gold {
  background: linear-gradient(135deg, #d4af37, #f7d070);
  color: #3b2200;
  font-weight: 900;
}

.modal-category-tag.silver {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #1e293b;
  font-weight: 900;
}

.modal-category-tag.rostered {
  background: linear-gradient(135deg, #0e2949, #1b4573);
  color: #f1c769;
  font-weight: 900;
  border: 1px solid rgba(241, 199, 105, 0.4);
}

.modal-category-icon {
  font-size: 14px;
}

.modal-league-pill {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #94a3b8;
  text-transform: uppercase;
}

.modal-photo-area {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  background: #030d1a;
  line-height: 0;
}

.modal-player-portrait {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}

.modal-template-view {
  position: relative;
  width: 100%;
  min-height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-watermark-crest {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 75%;
  object-fit: contain;
  opacity: 0.15;
  filter: grayscale(20%);
  pointer-events: none;
}

.modal-silhouette-svg {
  width: 50%;
  height: 62%;
  color: rgba(255, 255, 255, 0.78);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

.modal-template-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.modal-info-body {
  padding: 16px 20px 20px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.modal-team-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef3f8;
}

.modal-team-crest {
  width: 44px;
  height: 40px;
  object-fit: contain;
}

.modal-team-eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #ba1d31;
  letter-spacing: 1px;
}

.modal-team-title {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #071f39;
  line-height: 1.1;
  text-transform: uppercase;
}

.modal-team-link {
  margin-left: auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #ba1d31;
  text-decoration: none;
  background: #fdf2f4;
  padding: 5px 9px;
  border-radius: 4px;
  transition: background 0.2s;
  white-space: nowrap;
}

.modal-team-link:hover {
  background: #ba1d31;
  color: #ffffff;
}

.modal-player-main {
  text-align: center;
  padding: 4px 0 2px;
}

.modal-player-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.modal-player-name {
  margin: 3px 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #061d35;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.modal-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  margin-top: 4px;
}

.modal-detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}

.detail-label {
  font-size: 9px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.8px;
}

.detail-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.detail-val.tier-diamond {
  color: #b45309;
}

.detail-val.tier-gold {
  color: #b45309;
}

.detail-val.tier-silver {
  color: #475569;
}


/* ==========================================================================
   MASTER RESPONSIVE STYLESHEET (DESKTOP, LAPTOP, TABLET, MOBILE, ULTRA-COMPACT)
   ========================================================================== */

/* Universal Responsive Base Enhancements */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

.fixture-table-scroll,
.standings-table-wrap,
.table-scroll-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   TIER 1: LAPTOP VIEW (961px – 1200px)
   Keep clean horizontal desktop nav visible with tuned proportions
   -------------------------------------------------------------------------- */
@media (min-width: 961px) and (max-width: 1200px) {
  header {
    padding: 10px 18px;
    gap: 12px;
  }

  .brand {
    min-width: auto;
    gap: 8px;
    flex-shrink: 1;
  }

  .brand img {
    height: 48px;
    width: 48px;
  }

  .brand strong {
    font-size: 18px;
    letter-spacing: 0.2px;
  }

  .brand strong span {
    font-size: 12px;
  }

  .brand small {
    display: none;
  }

  nav {
    gap: 12px;
  }

  nav > a,
  .nav-parent {
    font-size: 14.5px;
    padding: 18px 2px;
    letter-spacing: 0.4px;
  }

  .watch {
    padding: 9px 14px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }

  .hero-content {
    width: min(720px, 94%);
    padding: 40px 0 16px;
  }

  .hero h1 {
    font-size: clamp(52px, 6.2vw, 82px);
  }

  /* 3D Franchise Carousel: Elegant Side-by-Side on Laptop */
  .fc-container {
    gap: 20px;
    min-height: 470px;
  }

  .fc-carousel-area {
    flex: 1 1 53%;
    height: 420px;
  }

  .fc-details-area {
    flex: 1 1 47%;
  }

  .fc-track {
    width: 235px;
    height: 320px;
  }

  /* Grids */
  .squad-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .marquee-row {
    grid-template-columns: 220px repeat(4, 1fr);
    gap: 10px;
  }

  .marquee-team img {
    width: 54px;
    height: 50px;
  }
}

/* --------------------------------------------------------------------------
   TIER 2: TABLET & COMPACT SCREENS (<= 960px)
   Activate Hamburger Menu Drawer & Stacked 3D Showcase
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  header {
    padding: 10px max(3%, 16px);
    min-height: 70px;
    justify-content: space-between;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .brand {
    min-width: auto;
    gap: 10px;
    flex-shrink: 1;
  }

  .brand img {
    height: 50px;
    width: 50px;
  }

  .brand strong {
    font-size: 20px;
  }

  .brand strong span {
    font-size: 13px;
  }

  .brand small {
    display: none;
  }

  /* Nav Toggle Hamburger */
  .nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 26px;
    border: 1px solid #dde5ef;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    color: var(--navy);
    order: 3;
    z-index: 10002;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }

  .nav-toggle:hover {
    background: #f1f5f9;
    color: var(--red);
    border-color: #cbd5e1;
  }

  /* Slide-in Mobile / Tablet Drawer */
  nav#nav {
    display: flex;
    position: fixed;
    top: 0;
    right: -330px;
    width: 310px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    background: #06172b;
    z-index: 10001;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 72px 22px 30px;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.65);
    transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    gap: 0;
  }

  nav#nav.open {
    right: 0 !important;
  }

  nav > a,
  .nav-parent {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 800;
    padding: 14px 10px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: 0.6px;
    text-align: left;
  }

  nav > a:hover,
  .nav-parent:hover,
  nav > a.active {
    color: var(--gold);
    border-bottom-color: rgba(255, 255, 255, 0.25);
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown .dropdown-menu {
    position: static;
    background: #0c294a;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin: 6px 0 12px;
    display: block;
  }

  .nav-dropdown .dropdown-menu a {
    color: #dbe4ed;
    padding: 10px 14px;
    font-size: 14px;
  }

  .mobile-drawer-watch {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #c9152d;
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.8px;
    padding: 13px;
    border-radius: 8px;
    margin-top: 18px;
    text-decoration: none;
    text-align: center;
    border-bottom: none !important;
    transition: background 0.2s ease;
  }

  .mobile-drawer-watch:hover {
    background: #a91225;
  }

  .watch {
    order: 2;
    padding: 9px 15px;
    font-size: 12.5px;
  }

  /* Hero Section on Tablet */
  .hero-content {
    width: 94%;
    margin-left: max(3%, 16px);
    padding: 36px 0 16px;
  }

  .hero h1 {
    font-size: clamp(48px, 7vw, 76px);
    line-height: 0.88;
  }

  .hero-utility-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .hero-watch-info {
    border-left: 2px solid #dcae55;
    padding: 10px 0 10px 16px;
    width: 100%;
    max-width: 480px;
  }

  .hero-logo-line {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .hero-logo-line a {
    height: 68px;
  }

  /* Next Event Strip */
  .next-event {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 20px;
    align-items: stretch;
  }

  .event-date {
    width: auto;
    align-self: flex-start;
  }

  .event-directions {
    align-self: flex-start;
  }

  /* 3D Franchise Carousel: Clear Stacked Layout on Tablet */
  .franchise-showcase {
    padding: 50px max(3%, 20px) 55px;
  }

  .fc-container {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    gap: 0;
  }

  .fc-carousel-area {
    flex: none;
    width: 100%;
    height: 410px;
    margin-bottom: 28px;
  }

  .fc-details-area {
    flex: none;
    width: 100%;
  }

  .fc-track {
    width: 235px;
    height: 320px;
  }

  .fc-detail-inner {
    padding: 24px 20px;
  }

  /* Grids */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-photo {
    min-height: 300px;
  }

  .match-strip,
  .fixtures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .squad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .media-grid,
  .game-media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .stats-banner {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }

  .sponsor-grid,
  .sponsor-grid-2,
  .sponsor-grid-4,
  .sponsor-grid-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .groups-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .profile-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }

  .profile-hero img {
    margin: 0 auto;
  }

  .marquee-row {
    grid-template-columns: 180px repeat(4, 1fr);
    gap: 8px;
  }

  footer {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 36px 20px 24px;
  }

  .footnote {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   TIER 3: MOBILE PHONES (<= 640px)
   Full Touch Optimization, Compact Hero, Swipe Tables, 2-Col Squad Cards
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  header {
    padding: 8px 14px;
    min-height: 62px;
  }

  /* In mobile header, keep only Brand + Hamburger toggle for maximum breathing room.
     Willow Watch button is prominently placed at the very top of the mobile drawer! */
  header .watch {
    display: none;
  }

  .brand {
    gap: 8px;
  }

  .brand img {
    height: 42px;
    width: 42px;
  }

  .brand strong {
    font-size: 17px;
  }

  .brand strong span {
    font-size: 11.5px;
  }

  .microbar {
    font-size: 8.5px;
    padding: 6px 10px;
    text-align: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.35;
  }

  .wrap {
    padding: 38px max(3%, 14px);
  }

  .section-head h2 {
    font-size: clamp(32px, 7vw, 42px);
  }

  /* Hero Section */
  .hero {
    min-height: auto;
  }

  .hero-content {
    width: 100%;
    margin-left: 0;
    padding: 24px 14px 12px;
  }

  .hero h1 {
    font-size: clamp(38px, 10vw, 56px);
    margin: 8px 0;
  }

  .hero p {
    font-size: 13.5px;
    line-height: 1.55;
  }

  .countdown-panel {
    width: 100%;
    padding: 0 !important;
  }

  .countdown {
    gap: 8px;
    justify-content: space-between;
    margin: 14px 0;
  }

  .count-unit strong {
    font-size: 32px;
  }

  .count-unit span {
    font-size: 9px;
  }

  .hero-watch-info {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    border-left: none;
    border-top: 2px solid #dcae55;
    margin-top: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 0 8px 8px;
  }

  .hero-bullets {
    font-size: 11.5px;
    gap: 10px;
  }

  .hero-franchise-ribbon {
    padding: 10px 12px 14px;
  }

  .hero-logo-line {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .hero-logo-line a {
    height: 54px;
  }

  .hero-logo-line img {
    height: 40px;
  }

  /* Next Event Strip */
  .next-event {
    padding: 18px 14px;
    gap: 14px;
  }

  .event-date {
    width: 100%;
    text-align: center;
  }

  .event-date strong {
    font-size: 40px;
  }

  .event-copy h2 {
    font-size: 28px;
  }

  .event-meta {
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
  }

  .event-directions {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 13px;
    font-size: 15px;
  }

  /* 3D Franchise Carousel: Mobile Sizing */
  .franchise-showcase {
    padding: 38px 12px 42px;
  }

  .showcase-head {
    margin-bottom: 24px;
  }

  .showcase-head h2 {
    font-size: clamp(32px, 8vw, 44px);
  }

  .showcase-head p {
    font-size: 14px;
  }

  .fc-carousel-area {
    height: 335px;
    margin-bottom: 22px;
  }

  .fc-track {
    width: 200px;
    height: 275px;
  }

  .fc-card {
    width: 200px;
    height: 275px;
  }

  .fc-card-crest {
    width: 85px;
    height: 85px;
  }

  .fc-card-name {
    font-size: 15px;
    bottom: -38px;
  }

  .fc-arrow {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }

  .fc-arrow-prev {
    left: 4px;
  }

  .fc-arrow-next {
    right: 4px;
  }

  .fc-detail-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 14px;
  }

  .fc-detail-emblem {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
  }

  .fc-detail-content h3 {
    font-size: 25px;
  }

  .fc-detail-desc {
    font-size: 13px;
    line-height: 1.55;
  }

  .fc-detail-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 12px;
    font-size: 14px;
  }

  /* Fixtures & Standings */
  .match-strip,
  .fixtures {
    grid-template-columns: 1fr;
  }

  .fixture-table {
    min-width: 680px;
  }

  .fixture-table th,
  .fixture-table td {
    padding: 9px 8px;
    font-size: 11.5px;
  }

  .fixture-pair span {
    min-width: 95px;
    font-size: 12px;
  }

  .points-table th,
  .points-table td {
    padding: 10px 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .tabs {
    gap: 6px;
  }

  .tab {
    padding: 7px 11px;
    font-size: 14px;
  }

  /* Squad Roster Cards: Sleek 2-Column App Grid */
  .squad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .player-card-media {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    aspect-ratio: 4 / 5;
  }

  .template-crest-bg {
    width: 90px;
    height: 90px;
  }

  .template-silhouette-svg {
    width: 55px;
    height: 65px;
  }

  .template-tag {
    font-size: 8.5px;
    padding: 2px 5px;
    bottom: 5px;
    left: 5px;
    letter-spacing: 0.5px;
  }

  .player-card-body {
    padding: 8px 10px !important;
  }

  .player-name {
    font-size: 14px !important;
    line-height: 1.1;
  }

  .player-squad-num {
    font-size: 15px !important;
  }

  .player-card-arrow {
    width: 24px;
    height: 24px;
    bottom: 6px;
    right: 6px;
  }

  /* Team Listings, Media, Stats, Partners */
  .team-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .media-grid,
  .game-media-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stats-banner {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-banner div {
    padding: 18px 10px;
  }

  .stats-banner strong {
    font-size: 38px;
  }

  .sponsor-grid,
  .sponsor-grid-2,
  .sponsor-grid-4,
  .sponsor-grid-5 {
    grid-template-columns: 1fr;
  }

  .marquee-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .marquee-team-logo {
    justify-content: center;
    border-right: none;
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 10px;
  }

  .marquee-media {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* Footer */
  footer {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 14px 22px;
  }

  /* Modal Lightbox on Phone */
  .player-modal-backdrop {
    padding: 10px;
  }

  .player-modal-container {
    max-width: 100%;
    max-height: 94vh;
  }

  .player-modal-card {
    max-height: 94vh;
    overflow-y: auto;
  }

  .modal-photo-area {
    height: auto !important;
    flex-shrink: 0 !important;
  }

  .modal-player-name {
    font-size: 22px;
  }

  .player-modal-close {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   TIER 4: ULTRA-COMPACT MOBILE PHONES (<= 380px)
   iPhone SE, Galaxy Z Flip cover screen, compact viewports
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .brand strong {
    font-size: 15px;
  }

  .brand strong span {
    font-size: 11px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .count-unit strong {
    font-size: 26px;
  }

  .count-unit span {
    font-size: 8px;
  }

  /* 3D Showcase */
  .fc-carousel-area {
    height: 295px;
    margin-bottom: 16px;
  }

  .fc-track {
    width: 170px;
    height: 245px;
  }

  .fc-card {
    width: 170px;
    height: 245px;
  }

  .fc-card-crest {
    width: 70px;
    height: 70px;
  }

  .fc-card-name {
    font-size: 14px;
  }

  /* Squad Cards */
  .squad-grid {
    gap: 8px !important;
  }

  .player-card-media {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    aspect-ratio: 4 / 5;
  }

  .player-name {
    font-size: 12.5px !important;
  }

  .player-card-body {
    padding: 6px 8px !important;
  }
}

/* ==========================================================================
   AUCTION DAY GALLERY & LIGHTBOX
   ========================================================================== */
.auction-hero-banner {
  background: linear-gradient(135deg, #07172b 0%, #0d2644 60%, #1a3b63 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(3, 10, 20, 0.3);
}

.auction-hero-info h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.auction-hero-info p {
  color: #9cb1c9;
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

.auction-stat-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.auction-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #e2eaf4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auction-chip span {
  color: #ba1d31;
}

.auction-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.auction-photo-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #091a30;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  aspect-ratio: 4 / 3;
}

.auction-photo-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  border-color: rgba(186, 29, 49, 0.6);
}

.auction-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.auction-photo-card:hover img {
  transform: scale(1.06);
}

.auction-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 10, 20, 0) 45%, rgba(3, 10, 20, 0.88) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 16px;
  transition: background 0.25s ease;
}

.auction-photo-card:hover .auction-photo-overlay {
  background: linear-gradient(180deg, rgba(3, 10, 20, 0.1) 20%, rgba(3, 10, 20, 0.94) 100%);
}

.auction-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(7, 21, 40, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #fff;
  text-transform: uppercase;
}

.auction-zoom-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(7, 21, 40, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.auction-photo-card:hover .auction-zoom-icon {
  opacity: 1;
  transform: scale(1);
}

.auction-photo-title {
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.auction-photo-sub {
  color: #a0b5ce;
  font-size: 12px;
  margin: 2px 0 0;
  line-height: 1.35;
}

/* Lightbox Modal */
.auction-lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 20, 0.95);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 20px;
}

.auction-lightbox-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.auction-lightbox-content {
  position: relative;
  max-width: 1050px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auction-lightbox-img {
  max-width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #050d18;
}

.auction-lightbox-footer {
  margin-top: 14px;
  text-align: center;
  color: #fff;
  max-width: 700px;
}

.auction-lightbox-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 3px;
  letter-spacing: 0.5px;
}

.auction-lightbox-meta {
  font-size: 13.5px;
  color: #9cb1c9;
  line-height: 1.4;
}

.auction-lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.auction-lightbox-close:hover {
  background: #ba1d31;
  transform: scale(1.1);
}

.auction-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(7, 21, 40, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  transition: background 0.2s, transform 0.2s;
  user-select: none;
  z-index: 10;
}

.auction-lightbox-nav:hover {
  background: #ba1d31;
  transform: translateY(-50%) scale(1.1);
}

.auction-lightbox-prev {
  left: -64px;
}

.auction-lightbox-next {
  right: -64px;
}

@media (max-width: 820px) {
  .auction-lightbox-prev {
    left: 8px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .auction-lightbox-next {
    right: 8px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .auction-lightbox-close {
    top: -42px;
    right: 6px;
  }
  .auction-hero-banner {
    padding: 18px 20px;
  }
}