/* V3.4.0 — Apple‑ish dark, hard‑opaque mobile menu, responsive slider via data-images, Google Map embed */
:root{
  --bg:#0a0d12;
  --panel:#10141a;
  --ink:#e8eaef;
  --muted:#a3a9b7;
  --line:#202532;
  --green:#22e089;
  --gold:#f7b500;
  --mx: 1180px;
  --pad: clamp(18px, 3vw, 32px);
  --radius:18px;
  --shadow: 0 10px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.7; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
a{color:#d5fbe8;text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(var(--mx), 100% - 2*var(--pad));margin-inline:auto}
.section{padding:clamp(72px,6vw,120px) 0}
.section.alt{background:linear-gradient(180deg, transparent, rgba(255,255,255,.02));}
.section__head{margin-bottom:22px}
h1,h2,h3,h4{margin:0 0 10px;line-height:1.15;letter-spacing:-.01em}
.display{font-size:clamp(34px,5vw,60px)}
h2{font-size:clamp(24px,3vw,38px)}
h3{font-size:clamp(18px,2.4vw,26px)}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:72ch}
.muted{color:var(--muted)}

:target{scroll-margin-top:84px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#12161c;border:1px solid var(--line);padding:8px 10px;border-radius:10px;z-index:1000;color:var(--ink)}

/* Header */
.header{position:sticky;top:0;z-index:100;background:#0d1117e6;backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand__logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#06110b;font-weight:800;background:conic-gradient(from 120deg, #22e089, #0aa464, #22e089);box-shadow:var(--shadow)}
.brand__text{display:flex;flex-direction:column}
.brand__text small{color:var(--muted)}

.nav__links{display:flex;gap:12px;align-items:center;list-style:none;margin:0;padding:0}
.nav__links a{padding:10px 14px;border-radius:12px;border:1px solid transparent;color:var(--ink)}
.nav__links a:hover{background:#131922;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);font-weight:700}
.btn--xl{padding:14px 20px;font-size:16px}
.btn--solid{background:linear-gradient(135deg,#22e089,#0aa464);color:#04130c;border-color:transparent;box-shadow:0 6px 20px rgba(15,255,150,.25)}
.btn--ghost{background:#0f141b;border:1px solid var(--line);color:#d4f9ea}
.btn--accent{background:linear-gradient(135deg,#ffd166,#f7b500);color:#0d0f12;border-color:transparent;box-shadow:0 10px 30px rgba(247,181,0,.25)}

.hide-on-mobile{display:flex}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;border-radius:10px}
.hamb i{display:block;width:24px;height:2px;background:#eef3f7;margin:5px 0;border-radius:2px}
@media (max-width: 980px){
  .hide-on-mobile{display:none}
  .nav__toggle{display:inline-flex}
}

/* FULLSCREEN Mobile Menu — opaque + scrollable + smaller type */
.mnav{
  position:fixed; top:0; left:0; right:0; bottom:0;
  width:100%; height:100svh; min-height:100svh; z-index:99999;
  display:none; align-items:center; justify-content:center;
  background:#0a0d12 !important; opacity:1 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; mix-blend-mode:normal !important;
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding-top: max(env(safe-area-inset-top), 16px);
  padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
.mnav.open{display:flex}
.mnav::before, .mnav::after{content:""; position:fixed; inset:0; pointer-events:none; background:#0a0d12 !important; opacity:1 !important;}
.mnav__close{position:fixed;top:calc(env(safe-area-inset-top) + 14px);right:14px;background:#121722;border:1px solid #2a3240;color:var(--ink);border-radius:12px;padding:8px 10px;cursor:pointer;z-index:1}
.mnav__links{list-style:none;margin: clamp(24px, 6vh, 64px) auto; padding:0;display:grid;gap:10px;text-align:center;width:min(90vw,520px);position:relative;z-index:1}
.mnav__links li{opacity:0;transform:translateY(8px);animation:fadeUp .35s ease both;animation-delay: calc(var(--i, 0) * 70ms + 100ms)}
.mnav__links a{padding:12px 14px;border-radius:14px;color:var(--ink);font-size:clamp(16px,3.6vw,22px);display:block}
.mnav__links a:hover{background:#151b24;text-decoration:none}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Hero — subtle effects */
.hero{position:relative;isolation:isolate;padding-top:calc(74px + 2vh)}
.fx{position:absolute;inset:0;z-index:-1;overflow:hidden}
.fx__glow{position:absolute;filter:blur(80px);opacity:.5;mix-blend:screen}
.fx .g1{width:60vmax;height:60vmax;background:radial-gradient(closest-side, rgba(34,224,137,.65), transparent);left:-20vmax;top:-15vmax;animation:float 18s ease-in-out infinite}
.fx .g2{width:50vmax;height:50vmax;background:radial-gradient(closest-side, rgba(247,181,0,.45), transparent);right:-18vmax;top:-10vmax;animation:float 24s ease-in-out infinite reverse}
.fx__grid{position:absolute;inset:0;background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 70%)}
.fx__grain{position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.04%22/></svg>');mix-blend-mode:overlay;pointer-events:none}
@keyframes float{50%{transform:translateY(-20px) rotate(.001deg)}}

.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px, 4.8vw, 44px);align-items:center}
.chip{display:inline-flex;gap:8px;align-items:center;background:rgba(34,224,137,.09);color:#b8ffd9;padding:7px 12px;border-radius:999px;border:1px solid rgba(34,224,137,.25);font-weight:700}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.pill{display:inline-flex;gap:8px;align-items:center;background:#0f141b;padding:12px 14px;border-radius:999px;border:1px solid var(--line);color:#d9e7de}
.hero__media{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero__media figcaption{font-size:12px;color:var(--muted);padding:8px;background:#0f141b}

/* Cards / grids */
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid var(--line);border-radius:18px;padding: 20px;box-shadow:var(--shadow)}
.grid.auto{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px,1fr));gap:18px}
.game__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.tag{font-size:12px;background:#0e1b14;color:#9fe6c0;border:1px solid #173e2b;padding:5px 9px;border-radius:9px;font-weight:700}
.time{font-weight:800}
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;font-weight:700}
.match .vs{color:#7c8696}
.match.unresolved{color:#7c8696}

/* Team logos */
.grid.logos{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:18px}
.logo-card{display:grid;gap:12px}
.logo{display:grid;place-items:center;background:#0f141b;border:1px dashed #2a3341;border-radius:14px;height:clamp(86px, 10vw, 120px)}
.logo img{max-height:100%;max-width:100%;object-fit:contain}

/* Rosters */
.accordion{border:1px solid var(--line);border-radius:18px;padding:12px;margin-bottom:14px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01))}
.accordion summary{cursor:pointer;font-weight:800;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:12px;text-align:left;font-size:15px;color:#d9e2ec}
.table th{color:#9aa7ba}

/* Slider */
.slider{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#0f141b;box-shadow:var(--shadow)}
.slider__track{display:flex;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.slide{min-width:100%;user-select:none}
.slide img{display:block;width:100%;height:auto}
.slider__btn{position:absolute;top:50%;transform:translateY(-50%);background:#0f141b;border:1px solid var(--line);color:#e8eaef;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;cursor:pointer}
.slider__btn:hover{background:#141a23}
.slider__btn.prev{left:10px}
.slider__btn.next{right:10px}
.slider__dots{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;display:flex;gap:8px}
.slider__dots button{width:8px;height:8px;border-radius:50%;background:#3a4356;border:0;cursor:pointer}
.slider__dots button.active{background:#22e089}

/* Media extra */
.gallery{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:16px;margin-top:18px}
.video{position:relative;aspect-ratio:16/9;display:grid;place-items:center;cursor:pointer;margin-top:16px}
.video .play{position:absolute;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#0f141b;border:1px solid var(--line);box-shadow:var(--shadow);font-size:24px}
.video:hover .play{transform:scale(1.06)}

/* Modal player */
.modal{position:fixed;inset:0;z-index:300;display:none}
.modal.open{display:block}
.modal__backdrop{position:absolute;inset:0;background:#0a0d12}
.modal__box{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(14px,4vw,28px)}
.modal__content{width:min(1200px, 96vw);aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.modal__content iframe{width:100%;height:100%;display:block}
.modal__close{position:absolute;top:14px;right:14px;background:#0f141b;border:1px solid var(--line);color:#e8eaef;border-radius:12px;padding:8px 10px;cursor:pointer}

/* About: portrait 9:16 and centered text */
.about__grid{display:grid;grid-template-columns:1.05fr .7fr;gap:26px;align-items:center}
.about__copy{align-self:center}
.portrait{border-radius:18px;overflow:hidden;border:1px dashed var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover;aspect-ratio:9/16}

/* Contact */
.contact__grid{display:grid;grid-template-columns:1fr .95fr;gap:26px}
.form input,.form textarea{width:100%;padding:14px;border:1px solid var(--line);border-radius:14px;font:inherit;background:#0f141b;color:#e8eaef}
.form textarea{min-height:150px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form__note{font-size:12px;color:#93a59e}
.hp{position:absolute;left:-9999px;opacity:0}
.map{margin-top:14px}
.gmap{width:100%;height:360px;border:0;border-radius:14px}
@media (min-width: 880px){ .gmap{height:420px} }

.footer{background:#090b0f;color:#b6c6c0;padding:26px 0;margin-top:22px}
.footer .muted{color:#93a59e}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.revealed{opacity:1!important;transform:none!important}

/* Responsive collapse */
@media (max-width: 1080px){
  .hero__inner{grid-template-columns:1fr}
  .about__grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .form .row2{grid-template-columns:1fr}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{transition:none}
}


/* === MP CAROUSEL (2 desktop / 1 tablet+mobile) === */
#mp-carousel{position:relative;width:100%}
#mp-carousel .mpc-viewport{
  overflow:hidden;border:1px solid rgba(255,255,255,.08);
  border-radius:20px;background:#0f141b
}
#mp-carousel .mpc-track{
  display:flex !important;flex-wrap:nowrap !important;
  will-change:transform;transition:transform .5s cubic-bezier(.2,.8,.2,1)
}
#mp-carousel .mpc-track > *{
  flex:0 0 50% !important;min-width:50% !important;max-width:50% !important;
  flex-shrink:0 !important;padding:8px !important;box-sizing:border-box !important;margin:0 !important
}
#mp-carousel .mpc-frame{
  border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;
  background:#0d1117;aspect-ratio:16/10
}
#mp-carousel .mpc-frame img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit
}
#mp-carousel .mpc-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);
  color:#fff;display:grid;place-items:center;cursor:pointer;z-index:3
}
#mp-carousel .mpc-prev{left:10px}  #mp-carousel .mpc-next{right:10px}
#mp-carousel .mpc-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;display:flex;gap:8px;z-index:3}
#mp-carousel .mpc-dots button{width:8px;height:8px;border-radius:50%;background:#3a4356;border:0;cursor:pointer}
#mp-carousel .mpc-dots button.active{background:#22e089}
@media (max-width:1199.98px){
  #mp-carousel .mpc-track > *{ flex-basis:100% !important; min-width:100% !important; max-width:100% !important; }
}

/* === VIDEO THUMB cover === */
#media .video{
  position:relative; display:none; place-items:center;
  overflow:hidden; border:1px solid rgba(255,255,255,.08);
  border-radius:18px; background:#0f141b; aspect-ratio:16/9;
  margin-top:16px; padding: 0px;
}
#media .video__thumb{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}
#media .video__play{
  position:absolute; width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center; font-size:24px; color:#e8eaef;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12);
  transition:transform .2s ease; cursor:pointer;
}
#media .video__play:hover{ transform:scale(1.06); }


/* === HOTFIX LOGO FIT v1.2 — 960x500 uniform tiles (≈1.92:1) === */
/* Box is no longer 1:1; it matches your source logo aspect to look consistent and filled */
#teams .logo{
  aspect-ratio: 48 / 25 !important; /* 960x500 */
  display: grid;
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  background: #0f141b;
  border: 1px dashed #2a3341;
  border-radius: 14px;
}
#teams .logo > a{ display:grid; place-items:center; width:100%; height:100%; }

/* Fill the box without cropping; keep breathing room via the container padding */
#teams .logo img,
#teams .logo svg{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block;
  margin: 0 !important;
}
#teams .logo svg{ height:auto !important; }

/* ===== ABOUT v2 (two columns + slider) ===== */
#about .about2{ display:block; }
#about .about2__kicker{
  display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:#8fa3b8; margin-bottom:8px;
}
#about h2{ font-size:clamp(28px,3.2vw,40px); line-height:1.05; margin:0 0 12px; }
#about .about2__lead{ font-size:clamp(16px,1.3vw,18px); color:#cfd6e4; margin:8px 0 18px; }

/* two-column copy */
#about .about2__grid{
  display:grid; gap:clamp(18px,3vw,32px);
  grid-template-columns: 1fr 1fr;
  align-items:start;
}
#about .about2__col h3{ margin:14px 0 8px; font-size:clamp(18px,1.6vw,22px); }
#about .about2__col p{ margin:8px 0; color:#e5e9f2; }
#about .about2__quote{
  margin:14px 0; padding:12px 14px; border-left:3px solid #22e089;
  background:#0f141b; color:#e8eaef; border-radius:10px; font-style:italic;
}
#about .about2__honors{ margin-top:16px; padding:14px;
  background:#0f141b; border:1px solid rgba(255,255,255,.08); border-radius:14px; }
#about .about2__honors h4{ margin:0 0 8px; font-size:16px; }
#about .about2__badges{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
#about .about2__badges li{ background:#0d1117; border:1px solid #2a3341; color:#cfd6e4; border-radius:10px; padding:10px 12px; }

/* stack on mobile */
@media (max-width: 920px){
  #about .about2__grid{ grid-template-columns: 1fr; }
}

/* --- About gallery slider (namespaced) --- */
#about .about2__gallery{ margin-top: clamp(20px,3vw,36px); }
#about .mpc{ position:relative; width:100%; }
#about .mpc__viewport{
  overflow:hidden; border:1px solid rgba(255,255,255,.08);
  border-radius:18px; background:#0f141b;
}
#about .mpc__track{
  display:flex; flex-wrap:nowrap; will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
#about .mpc__slide{ padding:8px; box-sizing:border-box; flex:0 0 33.3333%; min-width:33.3333%; }
#about .mpc__frame{
  border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden;
  background:#0d1117; aspect-ratio:16/10;
}
#about .mpc__frame img{ width:100%; height:100%; object-fit:cover; display:block; }

#about .mpc__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12);
  color:#fff; display:grid; place-items:center; cursor:pointer;
}
#about .mpc__prev{ left:10px; }  #about .mpc__next{ right:10px; }
#about .mpc__dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:8px; }
#about .mpc__dots button{ width:8px; height:8px; border-radius:50%; background:#3a4356; border:0; cursor:pointer; }
#about .mpc__dots button.active{ background:#22e089; }

/* responsive per-view */
@media (max-width: 1199.98px){
  #about .mpc__slide{ flex-basis:50%; min-width:50%; }
}
@media (max-width: 768px){
  #about .mpc__slide{ flex-basis:100%; min-width:100%; }
}

/* ABOUT gallery: make tiles square & a touch larger visuals */
#about .mpc--about .mpc__frame{
  aspect-ratio: 1 / 1 !important;   /* square */
}
#about .mpc--about .mpc__frame img{
  object-fit: cover;                 /* fill square nicely */
}

/* (optional) little more breathing room */
#about .mpc--about .mpc__slide{ padding: 10px; }

/* (optional) slightly larger arrows for taller slider */
#about .mpc--about .mpc__arrow{ width: 46px; height: 46px; }