:root{
  --red: #ed1f25;
  --blue: #253570;
  --blue-mid: #1b2a59;            /* slightly deeper than --blue for contrast */
  --blue-dark: #0a1f3f;
  --red-dark: #6c0e12;
  --gold: #f9ec17;                  /* keep variable name for compatibility */
  --gold-light: #fff36a;    

  --pad: clamp(16px, 3vw, 40px);
  
  /* Text & gradients */
  --brand: var(--blue);
  --brand-2: var(--red);            /* blue→red gradient accents */

  /* Helpful RGBs for translucent backgrounds */
  --red-rgb: 237,31,37;
  --blue-rgb: 37,53,112;
  --blue-dark-rgb: 27,42,89;
  --gold-rgb: 249,236,23;

  --ink: #0b1220;
  --glass: rgba(255,255,255,0.75);
  --glass-border: rgba(255,255,255,0.55);
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
  --radius: 22px;
  --bottom-nav-height: 80px;   /* your navbar's fixed height */
  --bottom-nav-gap: 16px;      /* distance from screen edge */
  --bottom-safe: env(safe-area-inset-bottom, 0px);
  --bottom-offset: calc(var(--bottom-nav-height) + var(--bottom-nav-gap) + var(--bottom-safe));


  --admin-bg:        #0a1f3f;                 /* deep navy */
  --admin-surface:   rgba(255,255,255,0.06);  /* card bg */
  --admin-surface-2: rgba(255,255,255,0.10);  /* hover bg */
  --admin-border:    rgba(255,255,255,0.14);
  --admin-border-2:  rgba(255,255,255,0.22);
  --admin-ink:       #e8f1ff;                 /* primary text */
  --admin-ink-2:     #b8c7e6;                 /* secondary text */
  --radius:    14px;
  --shadow:    0 12px 30px rgba(0,0,0,.35);

}

/* Keep content clear of the floating nav on mobile */
@media (max-width: 768px){
  main,
  .filter,
  .filters {
    padding-bottom: var(--bottom-offset);
  }
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color: #fff;
  background-image: url('/images/fcgd-bg-4k.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0a1f3f;       /* fallback color */
  min-height: 100dvh;
  overflow-x: hidden;
  padding-top: 80px;

}


/* Transparent overlay header */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;           /* top:0; left/right stretch */
  background: rgba(var(--red-rgb), 0.6);     /* transparent by default */
  z-index: 1000;
  pointer-events: none;        /* allow clicks through gaps; re-enable on children */
}
.site-header .container{ pointer-events: auto; }

.header-bar{
  height: 8vh;               /* base header height */
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

/* Left/Right groups */
.site-header .nav-left, .site-header .nav-right{
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-header .nav-left{ justify-self: start; }
.site-header .nav-right{ justify-self: end; }


/* Buttons */
.nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  background: rgba(var(--blue-dark-rgb), .80);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.15);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}
.nav-btn i,         /* Font Awesome icon */
.nav-btn .fa-solid{
  font-size: 16px;
  line-height: 1;
  width: 1em; height: 1em;           /* consistent box for all icons */
  display: inline-block;
}

.nav-btn img{
  font-size: 16px;
  line-height: 1;
  width: 2em; height: 2em;           /* consistent box for all icons */
  display: inline-block;
}

.nav-btn:hover{ opacity: .92; }
.nav-btn:active{ transform: none;  }

/* Dropdown */
.menu{ position: relative; }
/* Sidebar open state locks scroll */

body.sidebar-open { overflow: hidden; }

/* Drawer */
.sidebar{
  position: fixed;
  top: 0; right: 0;
  height: 100svh;
  width: min(86vw, 360px);
  background: var(--admin-surface, rgba(0,0,0,0.5));
  border-left: 1px solid var(--admin-border, rgba(255,255,255,.18));
  backdrop-filter: blur(30px);
  box-shadow: -20px 0 40px rgba(0,0,0,.35);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform .28s ease;
  display: flex; flex-direction: column;
  justify-content: flex-start !important;
  align-items: stretch;
}
.sidebar.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce){
  .sidebar{ transition: none; }
}

/* Header row inside drawer */
.sidebar__head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 16px;
  border-bottom: 1px solid var(--admin-border, rgba(255,255,255,.14));
}
.sidebar__title{ color:#fff; font-weight:800; letter-spacing:.3px; }
.sidebar__close{
  appearance:none; border:0; background:transparent; color:#fff;
  font-size: 24px; line-height: 1; cursor: pointer;
}
/* Sidebar nav layout */
.sidebar-nav{
  flex: 1 1 auto;
  min-height: 0;                /* critical so flex child can shrink */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* smooth iOS scrolling */
  padding: 10px 12px;           /* slightly tighter */
    align-content: start !important;             /* grid cross-axis */
  justify-content: start !important;           /* grid main axis */
}

.sidebar-nav .nav-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-start;
}

.sidebar, .sidebar-nav{ align-items: stretch !important; place-content: start !important; }

/* Group headers (not links) */
.sidebar-nav .nav-heading{
  display: block;
  padding: 10px 10px;
  margin-top: 0px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  border-radius: 10px;
  background: transparent;
  cursor: default;
  opacity: .95;
  top:0;
}

/* Sub-list under a group */
.sidebar-nav .nav-sub{
  display: grid;
  gap: 4px;
  margin: 4px 0 8px 0;
  padding: 0 0 0 12px;  /* indent */
  list-style: none;
}

/* Links (top level + sub items) */
.sidebar-nav a{
  display: block;
  padding: 12px 10px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  background: transparent;
}
.sidebar-nav a:hover{
  background: rgba(255,255,255,.08);
}

/* Sub-item visual cue */
.sidebar-nav .nav-sub a{
  padding-left: 22px;                 /* extra indent */
  position: relative;
}
.sidebar-nav .nav-sub a::before{
  content: "›";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .6;
  font-size: 12px;
}

/* Scrim */
.sidebar-scrim{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1090;
  opacity: 0;
  transition: opacity .28s ease;
}
.sidebar-scrim.show{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .sidebar-scrim{ transition: none; }
}

/* Keep toggle button stable (no press shrink) */
#sidebar-toggle:active{ transform: none; }


.details-group summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; font-weight:600;
}
.details-group summary::marker,
.details-group summary::-webkit-details-marker{ display:none; }

/* Icon swap */
.details-group .icon-expanded{ display: none; }
.details-group details[open] .icon-collapsed{ display: none; }
.details-group details[open] .icon-expanded{ display: inline-block; }

/* (optional) focus style */
.details-group summary:focus-visible{
  outline:2px solid #93c5fd; outline-offset:3px; border-radius:6px;
}

.details-group .nav-sub{ padding-left:0; margin:0; overflow:hidden; max-height:0; transition:max-height .25s ease; }
.details-group details[open] .nav-sub{ max-height:400px; } /* big enough to fit links */


.details-group details[open] .chev{ transform: rotate(-135deg); }


/* Oversized logo that overlaps below header initially */
.site-header .logo{
  justify-self: center;
  position: relative;
  z-index: 2;
  text-decoration: none;
}
.site-header .logo img{
  height: clamp(72px, 12vh, 140px);
  transform: translateY(22%);        /* visual overlap only */
  transition: height .28s ease, transform .28s ease, filter .28s ease;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
  will-change: transform, height;
}

/* On scroll: shrink inside header */
.site-header.scrolled{
  background: rgba(var(--red-rgb), 0.3);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--red);
}
.site-header.scrolled .logo img{
  height: calc(8vh - 10px);                   /* fit into header */
  min-height: 48px;
  transform: translateY(0);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}


/* Footer area sticks to bottom of drawer */
.sidebar-foot{
  border-top: 1px solid var(--admin-border, rgba(255,255,255,.14));
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 0;                /* it will sit after the scroller */
  padding: 10px 12px;
  position: sticky; bottom: 0;  /* optional: stick to bottom while scrolling */
  background: linear-gradient(to top,
              rgba(10,31,63,.85), rgba(10,31,63,.6), transparent 60%);
  backdrop-filter: blur(6px);
}

/* Pill buttons */
.lang-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  transition: background .2s, opacity .2s, border-color .2s;
}
.lang-btn:hover{ opacity: .95; }
.lang-btn.is-active{
  background: linear-gradient(135deg, var(--blue-mid), var(--blue-dark));
  border-color: rgba(255,255,255,.28);
}

/* Bullet / indent reset for sidebar */
.sidebar-nav ul,
.sidebar-nav li{
  list-style: none;      /* remove bullets */
  margin: 0;             /* remove UA margins */
  padding: 0;            /* remove left indent */
}

/* Extra safety for browsers that still render markers */
.sidebar-nav li::marker{
  content: "";
}



/* Extra compact on small phones */
@media (max-width: 520px){
  .sidebar{ width: min(92vw, 340px); }
  .sidebar-nav{ padding: 3px 4px; }
  .sidebar-nav a{ padding: 9px 8px; font-size: 13px; }
  .sidebar-nav .nav-list{ gap: 2px; }
  .sidebar-nav .nav-sub{ gap: 2px; margin: 2px 0 4px; padding-left: 8px; }
  .sidebar-nav .nav-heading{ padding: 7px 8px; font-size: 12.5px; }
  .sidebar-nav .nav-sub a{ padding-left: 18px; }
}

.container{max-width:1100px;margin:0 auto;padding:0 16px}
nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}
.brand{font-weight:800;letter-spacing:.5px}
.brand .club{color:var(--gold)}
.nav-links a{color:#fff;text-decoration:none;margin-left:16px;padding:8px 10px;border-radius:10px}
.nav-links a:hover{background:rgba(255,255,255,0.1)}


.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.card{
  background:#fff;border-radius:16px;padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.06);
  border:1px solid #e7eef7;
  position: relative; }            /* ensure a containing context */
#statsChart { display: block; width: 100%; height: 100%; }

.kpi { position: relative; overflow: hidden; }
.kpi .num { font-size: 30px; font-weight: 900; color: var(--blue-dark); }
.kpi .spark {
  position: absolute; inset: auto 8px 8px 8px; height: 26px; opacity: .65;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0));
  border-radius: 6px;
}

.section{margin:5px 20px}
.section h2{color:#fff !important;margin:0 0 12px}
.btn{display:inline-flex;align-items:center;gap:8px;background:#253570;color: #fff !important;;
padding:10px 14px;border-radius:12px;text-decoration:none;border:1px solid transparent}
.btn:hover{filter:brightness(1.05)}
.btn.link.white{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

.btn.secondary{background:var(--gold);color:#1a1a1a}

form.inline{display:flex;gap:8px;flex-wrap:wrap}
input, select, textarea{
  padding:10px;border-radius:10px;border:1px solid #d8e6f6;font:inherit
}
table{width:100%;border-collapse:collapse}
th, td{padding:10px;border-bottom:1px solid #e8f0fb}
.muted{color:#5a7a90}
.admin-nav{display:flex;gap:10px;margin:12px 0 20px}
.admin-nav a{background:#fff;border:1px solid #dbe7f6;padding:8px 12px;border-radius:10px;text-decoration:none;color:#0b2230}
.alert{padding:10px 12px;border-radius:10px;background:#fff3cd;border:1px solid #ffe69c;color:#664d03}
.success{background:#d1e7dd;border-color:#badbcc;color:#0f5132}

/* LANDING */


  /* --- Stacked headline --- */
  .stacked-title{
    margin: 0 0 .5rem;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    font-weight: 900;
    line-height: .95;
    letter-spacing: .2px;
    /* big & responsive */
    font-size: clamp(4rem, 8vw, 6rem);
  }
  .stacked-title .line{
    display: block;
    /* gradient fill for sporty vibe */
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 0 rgb(255, 255, 255), 0 8px 32px rgba(0, 0, 0, 0.904);
  }

  .stacked-title .gold{
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 6px rgba(212,175,55,0.6), 0 0 18px rgba(243,215,123,0.6);
  }

  .stacked-title .accent{
    letter-spacing: .5px;
    text-transform: uppercase;
  }


/* Soccer ball entrance */
/* ===== Classic soccer ball (pentagons + hex seams), JS-driven motion ===== */
.ball-anim{
  --size: 96px;                          /* ball diameter */
  --logo: url('/images/logo.svg');       /* optional: team logo; use 'none' to disable */
  position: absolute; z-index: 2;
  left: 50%; bottom: var(--bottom-offset) + 30px;
  cursor: pointer;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  will-change: transform, filter;

  /* base spherical shading */
  background:
    radial-gradient(ellipse at 35% 30%, #fff 0%, #f7f8fb 46%, #e6ecf3 65%, rgba(0,0,0,.18) 85%, rgba(0,0,0,.35) 100%);
  /* JS will set transform each frame */
}

/* Panel pattern + optional center logo */
.ball-anim::before{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  pointer-events:none;
  background:
    /* 1) logo (comment this line or set --logo:none to remove) */
    var(--logo) center/50% no-repeat,
    /* 2) soft badge under logo so it reads over seams */
    radial-gradient(circle, rgba(255,255,255,.95) 0 60%, var(--blue) 45% 49%, transparent 50%) center/44% 44% no-repeat,
    /* 3) truncated-icosahedron-ish seam pattern (central pentagon + hex seams) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'> <defs> <pattern id='hex' width='30' height='17.32' patternUnits='userSpaceOnUse' y='0' x='0'> <g stroke='%23222' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'> <path d='M5,8.66 L10,0.0 L20,0.0 L25,8.66 L20,17.32 L10,17.32 Z'/><path d='M0,8.66 L5,8.66'/><path d='M25,8.66 L30,8.66'/> </g></pattern></defs><rect width='100%' height='100%' fill='url(%23hex)'/></svg>") center/140% 140% no-repeat; opacity:.98;
}

/* glossy highlights */
.ball-anim::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.55) 0 10%, transparent 14%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,.15) 0 12%, transparent 14%);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ball-anim{ transform: translateX(220px) translateY(-40px) rotate(230deg) !important; }
}


/* ---------- News Carousel ---------- */
.section-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px }
.section-head .btn.link{ background:transparent; color:var(--blue-dark); border:1px solid #dbe7f6 }

.carousel{ position:relative }
.carousel-track{
  display:grid; grid-auto-flow:column; grid-auto-columns: clamp(240px, 40vw, 340px);
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding: 8px 2px 12px;
}
.carousel-track::-webkit-scrollbar{ height:8px }
.caro-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  border:1px solid #e2ecf7; background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.12); cursor:pointer; z-index:3;
}
.caro-btn.prev{ left:-6px } .caro-btn.next{ right:-6px }

.news-card{
  scroll-snap-align:start;
  background:#fff; border-radius:16px; overflow:hidden; border:1px solid #e7eef7;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
}
.news-card .thumb{ aspect-ratio: 16/9; width:100%; object-fit:cover }
.news-card .body{ padding:12px }
.news-card h3{ font-size:1rem; margin:0 0 6px; color:#0b2230 }
.news-card p{ margin:0; color:#456a86; font-size:.92rem }
.news-card a.stretched{ text-decoration:none; color:inherit }

/* ---------- Match highlight & events ---------- */
.match-hero .match-card{
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color:#fff; border-radius:18px; padding:18px; display:grid; gap:8px;
  border: 2px solid var(--gold);
}
.match-hero .actions{ display:flex; gap:10px; flex-wrap:wrap }
.events-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px }
.event{ background:#fff; border:1px solid #e7eef7; border-radius:14px; padding:12px }

/* ---------- Teams ---------- */
.teams-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px }
.team-card{
  position:relative; border-radius:16px; overflow:hidden; text-decoration:none; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.12); border:1px solid #e7eef7;
}
.team-card img{ width:100%; height:180px; object-fit:cover; filter: saturate(1.1) }
.team-card span{
  position:absolute; left:10px; bottom:10px; background: rgba(var(--blue-rgb), .90);
  padding:6px 10px; border-radius:10px; border: 1px solid var(--gold); font-weight:700;
}

/* ---------- CTA ---------- */
.cta{ text-align:center; background: linear-gradient(180deg,#f4fbff,#ffffff); border:1px solid #e7eef7; border-radius:16px; }
.cta .cta-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px }

/* ---------- Stats (amped) ---------- */
.chart-wrap{ position:relative; height: 360px; }
/* ensure [hidden] truly hides even if Chart.js inlines size */
[hidden]{ display:none !important; }

/* tabs look/feel */
.stats-tabs{ display:flex; gap:6px; }
.stats-tabs .tab{
  background:#fff; border:1px solid #dbe7f6; border-radius:10px;
  padding:8px 10px; cursor:pointer; font-weight:600;
}
.stats-tabs .tab.active{ background: var(--blue); color:#fff; border-color: var(--blue); }

/* chart area sizing */
.section.stats .card.chart-wrap{
  position: relative;
  height: clamp(300px, 48vh, 460px);
  margin-bottom: 24px;
  overflow: hidden;
}
.section.stats .chart-wrap canvas{
  display:block; width:100% !important; height:100% !important;
}

.kpis .kpi .num{ color: var(--blue-dark); }
.kpis .kpi:hover{ transform: translateY(-2px); transition: transform .2s }

/* AOS base (served locally) */
[data-aos]{ will-change: transform, opacity }

/* Keep content clear of bottom nav on mobile (reusing your vars) */
@media (max-width: 768px){
  main, .site-footer{ padding-bottom: var(--bottom-offset); }
}

/* Make the chart card own its space */
.section.stats .card.chart-wrap{
  position: relative;
  height: clamp(300px, 48vh, 460px);
  margin-bottom: 24px;     /* pushes Newsletter down */
  overflow: hidden;        /* keeps chart internals inside */
  z-index: 1;              /* above any backgrounds in the same section */
}

/* Ensure canvases fill the card (Chart.js respects CSS size when maintainAspectRatio:false) */
.section.stats .chart-wrap canvas{
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Create a clean stacking context for each section to prevent cross-over during AOS transforms */
.section{ position: relative; isolation: isolate; }



/* FOOTER */
.site-footer{
  background: rgba(var(--blue-dark-rgb), .80);
  border-top: 4px solid var(--red-dark);
  color:#cfe6fb;
  padding:24px 0;
  padding-bottom: calc(var(--bottom-nav-gap) + var(--bottom-nav-height) + 24px + env(safe-area-inset-bottom));
}
.footer-inner{
  display: flex;                 /* was grid */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.site-footer .contact{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-style: normal;
}

/* Social links */
.site-footer .social{
  display: flex;
  justify-content: center;
  gap: 10px;
}
.social-link{
  display:grid; place-items:center;
  width:36px; height:36px;
  border-radius:10px;
  color:#ffffff;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  text-decoration:none;
  transition: background .2s, transform .06s, color .2s, border-color .2s;
}
.social-link:hover{
  background: rgba(var(--gold-rgb), .18);
  border-color: rgba(var(--gold-rgb), .50);
  color:#fff;
}


.footer-divider{
  border:0;
  border-top:1px solid rgba(255,255,255,0.18);
  margin:16px 0;
  opacity:1;
}

.site-footer .credit{
  text-align: center;
  font-size: 0.9rem;
}

.text-center { text-align: center; }
.producer-link { color: gold !important; text-decoration: none !important; }
.producer-link:hover { text-decoration: none !important; }

@media (max-width: 768px){
  .site-footer{
    margin-bottom: var(--bottom-offset);
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .footer-inner{
    grid-template-columns: 1fr; /* stack columns */
  }
  .footer-col.right{ justify-self: start; }
  .footer-col.center{ justify-self: start; }
}
/* Remove text decoration (underlines) */
.site-footer a,
.site-footer a:visited,
.site-footer a:active {
  color:#cfe6fb; text-decoration:none;
}
.site-footer a:hover {
  text-decoration: underline;
}
/* Kill the accent underline/border if you used it earlier */
.link-accent,
.link-accent:hover {
  text-decoration: none;
  border-bottom: 0;
}

/* Keep accessibility: visible focus ring without underline */
.site-footer a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  text-decoration: none;
}

/*PLAYERS*/
/* Layout helpers */

.featured{
  max-width: 1200px;           /* cap content so cards don’t stretch */
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 48px);
  padding-block: 12px;
}

.section-header{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin:.25rem 0 1rem;}
.pc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3× on large */
  gap:16px;}

@media (max-width: 540px){ .pc-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px;} }



/* keep cards from overgrowing even in wide columns */
.pc-grid > .player-card{
  width: 100%;
  max-width: 350px;            /* cap actual card width */
  justify-self: center;        /* center inside its grid cell */
}


/* Player card */
.player-card {
  --rx:0deg; --ry:0deg; --gx:50%; --gy:50%;
  position: relative; display:block; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 25px rgba(210,167,0,.25);
  background: #0000001f;
  text-decoration: none; color: #fff;
  will-change: transform;
  contain: paint;
  --flip-dur: .95s;
}

.player-card:hover { box-shadow: 0 15px 35px rgba(0,0,0,.35); }

/* Flip engine */
.pc-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition: transform var(--flip-dur) cubic-bezier(.2,.7,.2,1); }
html.has-hover .player-card:hover .pc-inner,
.player-card.is-flipped .pc-inner{ transform: rotateY(180deg); }

.pc-face {
  position:absolute; inset:0; padding:12px; backface-visibility: hidden;
  display:flex; flex-direction:column; justify-content:space-between;
}
/* Replace the pc-front background with this */
.pc-front{
  position: relative;
  isolation: isolate;       /* keep blends inside the card */
}

.pc-front::after{
  content:""; position:absolute; inset:-25%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(var(--blue-rgb), .58),
    var(--blue) 18%,
    rgba(var(--gold-rgb), .38) 36%,
    var(--gold) 54%,
    rgba(var(--blue-rgb), .58) 72%,
    var(--blue) 90%,
    rgba(var(--blue-rgb), .58)
  );
  mix-blend-mode: overlay;
  filter: blur(28px) saturate(1.2);
  animation: spin 22s linear infinite;
  pointer-events:none;
  z-index:0;
  height: 100%;
}
@keyframes spin{ to { transform: rotate(360deg); } }

.pc-back {
  background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 60%);
  transform: rotateY(180deg);
}

/* Header / badge */
.pc-back-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem;}
.pc-team{background:rgba(0,0,0,.35);padding:.2rem .5rem;border-radius:999px;font-size:.8rem;letter-spacing:.3px;backdrop-filter:blur(3px);}
.pc-badge{padding:.2rem .5rem;border-radius:8px;font-weight:700;font-size:.8rem;color:#111;}
.pc-badge-1{background:#b9fbc0;} .pc-badge-2{background:#ffe29a;} .pc-badge-3{background:#ffadad;}
.pc-name{margin:.25rem 0 0;font-size:1.5rem;line-height:1.2;text-shadow:0 2px 6px rgb(0, 0, 0); padding-top: 5vh !important; padding: 1vw;}

/* Jersey front */
.pc-jersey { position: relative; display:grid; place-items:center; padding:8px 0; margin-top:6px; }
.jersey-img { width: 100%; max-width: 260px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.jersey-number {
  position:absolute; inset:auto 0 40%; text-align:center;
  font-size: clamp(2.8rem, 8.5vw, 3.8rem); font-weight: 900; letter-spacing:.02em;
  color: #fff7d6;
  text-shadow:
    0 0 5px #caa94c,
    0 0 10px #caa94c,
    0 0 15px #ffd76a,
    0 0 25px #ffef9a;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.jersey-number::after {
  content: ''; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 20%; height: 60%; border-radius: 50%;
  box-shadow: 0 0 40px 20px rgba(255, 215, 100, .18);
  pointer-events:none;
}
.jersey-number.is-empty { display:none; }

/* Back stats */

.back-title{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;}
.back-num{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,240,180,.25), rgba(255,240,180,.05));
  border:2px solid rgba(255,215,120,.7);
  box-shadow:0 0 18px rgba(255,210,120,.35), inset 0 0 14px rgba(255,210,120,.25);}
.back-num span{font-weight:900;color:#fff7d6;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.back-num.is-empty{visibility:hidden;}

/* Stats (GPU-friendly bars + stagger) */
.pc-stats-rows{display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem;}
.stat-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;}
.stat-row .label{font-size:.86rem;opacity:.95;white-space:nowrap;}
.stat-row .bar{
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.15);
}

.stat-row .bar__fill{
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  width: 100%;           /* <-- REQUIRED for scaleX to show */
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg,#ffd86b,#ffb347,#ff6b6b);
  box-shadow: 0 0 10px rgba(255,200,100,.6);
  will-change: transform;
  transition: transform var(--bar-dur,1.6s) cubic-bezier(.2,.7,.2,1) var(--bar-delay,0ms);
}
/* When we flip/enter and JS adds .animate-bars on the card */
.player-card.animate-bars .stat-row .bar__fill{
  transform: scaleX(var(--fill, 0));  /* --fill set by JS to 0→1 */
}
.stat-row .stat-num{
  font-variant-numeric: tabular-nums; font-weight:800; min-width:2.8ch; text-align:right;
  backface-visibility:hidden; transform:translateZ(0);
}

/* Keep tilt sheen */
.player-card::before {
  content:''; position:absolute; inset:-100%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.15), transparent 30%, rgba(255,255,255,.15) 60%, transparent 85%);
  transform: translateX(-20%) rotate(10deg);
  animation: shine 6s linear infinite; pointer-events:none; mix-blend-mode: overlay;
}

@keyframes shine{ to{ transform: translateX(20%) rotate(10deg);} }

/* Chips */
.chip-row{display:flex;gap:.5rem;flex-wrap:wrap;}
.chip{border:1px solid #ddd;background:#f8f8f8;border-radius:999px;padding:.35rem .75rem;cursor:pointer;}
.chip.is-active{background:#111;color:#fff;border-color:#111;}
.muted{color:#777;font-size:.9rem;}

/* Motion-safe: reduce motion users get static cards */
/* ===== Mobile (≤540px): 1 per row, smaller & centered, safer effects ===== */
@media (max-width: 540px) {
  .pc-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .player-card {
    max-width: 280px;   /* smaller card */
    margin: 0 auto;
     --flip-dur: 1.15s;
    border-radius: var(--radius);
  }

  .pc-face { padding: 10px; }


  /* stat rows: bar below label/value for readability */
  .pc-stats-rows { gap: .5rem; }
  .stat-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 6px;
    grid-template-areas:
      "label value"
      "bar   bar";
    gap: .35rem .5rem;
  }
  .stat-row .label   { grid-area: label; font-size: .9rem; }
  .stat-row .stat-num{ grid-area: value; font-size: .95rem; }
  .stat-row .bar     { grid-area: bar; height: 6px; }
  .stat-row .bar__fill {
    width: 100%;
    transform-origin: left center;
    transition-duration: var(--bar-dur, 1.3s);
  }
}

@media (min-width: 540px){
  .pc-grid {gap: 30px;}
}




/* Scope: add class to <section> or <body> */
.admin-dashboard,
body.admin-dashboard {
  color: #fff;
  background: radial-gradient(1200px 800px at 10% -10%, #16335f 0%, transparent 60%),
              radial-gradient(1000px 700px at 110% 20%, #0e2a52 0%, transparent 55%),
              var(--admin-bg);
  min-height: 100dvh;
}
.admin-dashboard div{
  color: #fff;
}
/* Nav strip */
.admin-dashboard .admin-nav{
  display:flex; flex-wrap:wrap; gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--admin-border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow);
}
.admin-dashboard .admin-nav a,
.admin-dashboard .admin-nav .btn{
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--admin-border);
  color: var(--admin-ink);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  transition: background .2s, transform .06s, border-color .2s;
}
.admin-dashboard .admin-nav a:hover,
.admin-dashboard .admin-nav .btn:hover{
  background: var(--admin-surface-2);
  border-color: var(--admin-border-2);
}

/* Card grid */
.admin-dashboard .cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-block: 16px;
}
.admin-dashboard .card{
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.admin-dashboard .card h3{
  margin: 0 0 8px;
  color: #fff;
}
.admin-dashboard .muted{ color: var(--admin-ink-2); }

/* Alerts */
.admin-dashboard .alert{
  background: rgba(255, 214, 102, .12);
  border: 1px solid rgba(255, 214, 102, .45);
  color: #ffe9b0;
}
.admin-dashboard .alert.success{
  background: rgba(66, 245, 171, .12);
  border-color: rgba(66, 245, 171, .45);
  color: #c3ffe2;
}
.admin-dashboard li{
  color: #fff;
}
/* Forms */
.admin-dashboard label{ color: #fff;}
.admin-dashboard input,
.admin-dashboard select,
.admin-dashboard textarea{
  background: rgba(255,255,255,0.08);
  color: var(--admin-ink);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.admin-dashboard input::placeholder,
.admin-dashboard textarea::placeholder{ color: #a9b9d7; }

.admin-dashboard input:focus,
.admin-dashboard select:focus,
.admin-dashboard textarea:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(210,167,0,.25);
}

/* Buttons */
.admin-dashboard .btn{
  background: linear-gradient(180deg, var(--blue), var(--blue-dark));
  border: 1px solid rgba(255,255,255,.18);
  color: #fff !important;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .06s, filter .2s, box-shadow .2s;
}
.admin-dashboard .btn:hover{ filter: brightness(1.08); }
.admin-dashboard .btn:active{ transform: translateY(1px); }
.admin-dashboard .btn.secondary{
  background: linear-gradient(180deg, var(--gold), #b89000);
  color: #111 !important;
}

/* Links in dark */
.admin-dashboard a{ color: #cfe6ff; }
.admin-dashboard a:hover{ color: #fff; }

/* Inline rows (lists under cards) */
.admin-dashboard .card [style*="display:flex"]{
  /* keeps your existing row blocks tidy */
}
.admin-dashboard .card [style*="border-bottom:1px solid"]{
  border-color: var(--admin-border) !important;
}

/* Tables (if used) */
.admin-dashboard table{
  width: 100%;
  border-collapse: collapse;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-dashboard th,
.admin-dashboard td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--admin-border);
  color: var(--admin-ink);
}
.admin-dashboard thead th{
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* File inputs: make the control visible */
.admin-dashboard input[type="file"]{
  padding: 8px;
  background: rgba(255,255,255,.08);
  border: 1px dashed var(--admin-border);
}

/* Headings & page title */
.admin-dashboard h1{
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  padding-top: 30px;
}

/* Buttons-as-links (admin nav “View all”) */
.admin-dashboard .btn.link{
  background: transparent;
  border: 1px solid var(--admin-border);
  color: var(--admin-ink) !important;
}
.admin-dashboard .btn.link:hover{
  background: var(--admin-surface-2);
  border-color: var(--admin-border-2);
}

/* Scrollbar (WebKit) */
.admin-dashboard *::-webkit-scrollbar{ height: 10px; width: 10px; }
.admin-dashboard *::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.admin-dashboard *::-webkit-scrollbar-track{ background: transparent; }

/* Small screens */
@media (max-width: 600px){
  .admin-dashboard .admin-nav{ gap: 8px; }
  .admin-dashboard .cards{ grid-template-columns: 1fr; }
}

/* Optional: glow focus for critical actions */
.admin-dashboard a:focus-visible,
.admin-dashboard button:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Layout: push logout to the end */
.admin-nav{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-nav .spacer{ margin-left: auto; }

/* Make forms behave like links/buttons in the row */
.admin-nav .logout-form{ margin: 0; }

/* Button variants */
.btn.danger{
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn.danger:hover{ filter: brightness(1.07); }
.btn.danger:active{ transform: translateY(1px); }

/* Optional: make “link” buttons slimmer so Logout stands out */
.btn.link{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
}
.btn.link:hover{
  background: rgba(255,255,255,0.08);
}

/* Compact icon on small screens */
@media (max-width: 560px){
  .admin-nav .label{ display:none; }
}

/* ---------- SPONSOR CTA: standout, animated, on-brand ---------- */
/* ======== PUNCHY SPONSOR CTA (bold, high-contrast) ======== */
.cta-sponspor .logo-card--cta{
  isolation: isolate;
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;


  /* Strong contrast + glow */
  color: var(--ink, #0b1220);
/* gentle texture so it doesn't feel flat on white */
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(37,53,112,0.04) 0, rgba(37,53,112,0.04) 6px,
      transparent 6px, transparent 12px
    ) !important;
  background-blend-mode: multiply;

  /* strong separation on white backgrounds */
  box-shadow:
    0 14px 28px rgba(0,0,0,.16),
    0 2px 10px rgba(0,0,0,.06);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Gradient ring (gold→red→blue) */
.cta-sponsor .logo-card--cta::before,
.cta-sponspor .logo-card--cta::before,
.logo-card--cta.is-white::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold), var(--red) 45%, var(--blue) 90%) !important;
  z-index:-1;
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;         /* ring cut-out */
}

/* Subtle shine sweep */
.cta-sponsor .logo-card--cta::after,
.cta-sponspor .logo-card--cta::after,
.logo-card--cta.is-white::after{
  content:"";
  position:absolute; inset:-20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%) !important;
  transform: translateX(-140%) rotate(8deg);
  transition: transform .6s ease;
  pointer-events: none;
}
.cta-sponsor .logo-card--cta:hover::after,
.cta-sponspor .logo-card--cta:hover::after,
.logo-card--cta.is-white:hover::after{
  transform: translateX(140%) rotate(8deg);
}

/* Hover lift + brand glow */
.cta-sponsor .logo-card--cta:hover,
.cta-sponspor .logo-card--cta:hover,
.logo-card--cta.is-white:hover{
  transform: translateY(-3px);
  box-shadow:
    0 18px 34px rgba(0,0,0,.2),
    0 0 0 2px rgba(0,0,0,.04) inset,
    0 0 32px rgba(var(--blue-rgb,37,53,112), .18),
    0 0 24px rgba(var(--red-rgb,237,31,37), .14);
}

/* Content */
.logo-card--cta .cta-inner{ display:grid; gap: 8px; }

.logo-card--cta .cta-badge{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .06em;
  color: #111;
  background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
  box-shadow: 0 2px 10px rgba(var(--gold-rgb,249,236,23), .35);
  text-transform: uppercase;
}

.logo-card--cta .cta-title{
  font-weight: 900;
  font-size: clamp(18px, 1.15rem + .2vw, 22px);
  line-height: 1.15;
  color: var(--blue-dark, #0a1f3f);       /* strong on white */
}

.logo-card--cta .cta-sub{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--red, #ed1f25);
  opacity: .95;
}

/* Focus visible (keyboard) */
.cta-sponsor .logo-card--cta:focus-visible,
.cta-sponspor .logo-card--cta:focus-visible,
.logo-card--cta.is-white:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .cta-sponsor .logo-card--cta,
  .cta-sponspor .logo-card--cta,
  .logo-card--cta.is-white{
    transition: none;
  }
  .cta-sponsor .logo-card--cta:hover,
  .cta-sponspor .logo-card--cta:hover,
  .logo-card--cta.is-white:hover{
    transform: none;
  }
}

/* Small phones */
@media (max-width: 520px){
.logo-card--cta .cta-inner{ gap:2;}
.logo-card--cta .cta-badge{
   font-size: 8px;
   padding: 0;
}
.logo-card--cta .cta-title{
  font-size: 12px;
}
.logo-card--cta .cta-sub {
  font-size: 10px;
}
}