:root{
  --accent-gradient: linear-gradient(90deg,#b02a2a,#7f0f0f);
  --fb-gradient: linear-gradient(90deg,#2d6bd6,#2b88ff);
  --panel:#1c1d1f;
  --white:#ffffff;
  --muted:#d7d7d7;
  --container:1100px;
  --radius:12px;
  --accent-border: rgba(255,255,255,0.04);
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--white);
  background: linear-gradient(180deg,#0b0b0d 0%, #070708 100%);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Header: increased translucency and blur so backdrop shows through */
.site-header{
  position:fixed;top:0;left:0;right:0;
  background: rgba(10,10,12,0.66);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  z-index:1200;
}

.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:12px;padding:0 12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.logo-wrap{width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;background: linear-gradient(180deg,#ffffff 0%, #f1f1f1 55%);padding:8px;box-shadow:0 8px 22px rgba(0,0,0,0.5);overflow:hidden;flex-shrink:0}
.logo-wrap.small-logo{width:50px;height:50px;padding:6px;border-radius:10px}
.logo-img{width:100%;height:100%;object-fit:contain;border-radius:8px;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-title{font-size:18px;color:var(--white);font-weight:800}
.brand-sub{font-size:12px;color:#ffd6d6;margin-top:2px}

/* Desktop nav hidden by default; overlay controlled by JS */
.main-nav{display:none;}

/* Hamburger styles (icon) */
.nav-toggle{
  display:flex;
  background:transparent;border:0;padding:8px;cursor:pointer;border-radius:8px;color:var(--white);
  align-items:center;justify-content:center;
}
.nav-toggle .nav-icon{display:block}
.nav-toggle:focus{outline:2px solid rgba(255,255,255,0.08);outline-offset:4px}

/* Overlay menu (opens when .open applied) with stronger blur and darker background */
.main-nav.open{
  display:flex;
  position:fixed;
  left:12px;
  right:12px;
  top:76px;
  background: rgba(18,18,20,0.88);
  color:var(--white);
  padding:12px;
  flex-direction:column;
  gap:10px;
  z-index:1250;
  box-shadow:0 18px 56px rgba(0,0,0,0.75);
  border-radius:12px;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.04);
}
.main-nav.open a{width:100%;display:block;padding:12px 14px;border-radius:8px;font-size:16px;color:var(--white);text-decoration:none}

/* Main spacing */
main{padding-top:92px}

/* Carousel container */
.banner-carousel{position:relative;overflow:hidden;height:calc(100vw * 9 / 16);max-height:420px;border-radius:0}

/* Track and slides */
.carousel-track{display:flex;transition:transform 600ms ease;will-change:transform;height:100%}
.carousel-slide{min-width:100%;height:100%;flex:0 0 100%;position:relative;overflow:hidden}
.carousel-img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);transition:transform 1200ms ease}

/* Slight parallax on active slide */
.carousel-slide.active .carousel-img{transform:scale(1.0);}

/* Controls (kept minimal so existing style preserved) */
.carousel-controls{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none;z-index:30}
.carousel-controls button{pointer-events:auto;background:rgba(0,0,0,0.36);border:0;color:#fff;padding:8px 12px;border-radius:8px;backdrop-filter:blur(4px);cursor:pointer}

/* Stronger graduated carousel blur: bottom-most blur increased while preserving smooth fade */
.carousel-fade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:52%;
  pointer-events:none;
  z-index:20;
  background: transparent;
}

/* Pseudo element applies a powerful backdrop blur masked to fade upward */
.carousel-fade::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 21;

  /* Increased global blur for a stronger effect */
  -webkit-backdrop-filter: blur(92px) saturate(130%);
  backdrop-filter: blur(92px) saturate(130%);

  /* Minimal tint to keep blur dominant */
  background: rgba(6,6,8,0.16);

  /* Mask so blur is strongest at the bottom and fades to 0% at the top */
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.9) 6%,
    rgba(0,0,0,0.7) 18%,
    rgba(0,0,0,0.4) 38%,
    rgba(0,0,0,0.18) 66%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.9) 6%,
    rgba(0,0,0,0.7) 18%,
    rgba(0,0,0,0.4) 38%,
    rgba(0,0,0,0.18) 66%,
    rgba(0,0,0,0) 100%);

  mix-blend-mode: normal;
  will-change: backdrop-filter, mask-image;
}

/* Desktop: extend reach and keep very strong bottom blur */
@media (min-width: 900px){
  .carousel-fade{height:48%}
  .carousel-fade::before{
    -webkit-backdrop-filter: blur(110px) saturate(135%);
    backdrop-filter: blur(110px) saturate(135%);
    background: rgba(6,6,8,0.18);
    -webkit-mask-image: linear-gradient(to top,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.92) 5%,
      rgba(0,0,0,0.74) 16%,
      rgba(0,0,0,0.44) 36%,
      rgba(0,0,0,0.18) 64%,
      rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.92) 5%,
      rgba(0,0,0,0.74) 16%,
      rgba(0,0,0,0.44) 36%,
      rgba(0,0,0,0.18) 64%,
      rgba(0,0,0,0) 100%);
  }
}

/* Mobile: keep overall blur slightly reduced for legibility but still stronger than before */
@media (max-width: 899px){
  .carousel-fade{height:64%}
  .carousel-fade::before{
    -webkit-backdrop-filter: blur(72px) saturate(125%);
    backdrop-filter: blur(72px) saturate(125%);
    background: rgba(6,6,8,0.14);
    -webkit-mask-image: linear-gradient(to top,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.88) 8%,
      rgba(0,0,0,0.66) 22%,
      rgba(0,0,0,0.36) 48%,
      rgba(0,0,0,0.12) 78%,
      rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.88) 8%,
      rgba(0,0,0,0.66) 22%,
      rgba(0,0,0,0.36) 48%,
      rgba(0,0,0,0.12) 78%,
      rgba(0,0,0,0) 100%);
  }
}

/* Caption inside carousel stays visually consistent */
.carousel-caption{position:absolute;left:24px;bottom:18px;color:var(--white);text-shadow:0 8px 28px rgba(0,0,0,0.7);z-index:25}
.carousel-caption .banner-title{margin:0;font-size:48px;line-height:1;font-weight:900}
.carousel-caption .banner-subtitle{margin-top:6px;color:#ffd6d6;font-weight:600}

/* Chips and separator dot */
.chip-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.chip{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));padding:6px 10px;border-radius:999px;font-weight:700;color:#ffefef;font-size:13px;border:1px solid var(--accent-border)}
.sep-dot{opacity:0.6;padding:0 6px;color:#ffd6d6}

/* Visual divider between chips and action buttons */
.hero-divider{height:1px;background:rgba(255,255,255,0.04);margin:14px 0;border-radius:2px}

/* Hero and layout */
.hero{padding:32px 0 18px;background:transparent}
.hero-grid{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-actions-improved .btn-primary{margin-right:18px}

/* Buttons */
.btn{display:inline-block;padding:11px 18px;border-radius:12px;text-decoration:none;font-weight:800;cursor:pointer}
.btn-primary{background:var(--accent-gradient);color:var(--white);box-shadow:0 10px 30px rgba(176,42,42,0.10)}
.btn-outline{border:1px solid rgba(255,255,255,0.06);color:var(--white);background:transparent}
.btn-fb{background:var(--fb-gradient);color:var(--white);padding:10px 16px;border-radius:12px;font-weight:800;box-shadow:0 10px 30px rgba(43,104,255,0.12)}

/* Hero card: slightly more visible but still subtle */
.hero-card.prominent{background: linear-gradient(180deg, rgba(28,29,31,0.96), rgba(22,22,23,0.94));border-radius:14px;padding:18px;color:var(--white);box-shadow:0 28px 64px rgba(0,0,0,0.66);border:1px solid rgba(255,255,255,0.06)}
.card-actions{display:flex;gap:12px;flex-wrap:wrap}
.card-footer{margin-top:14px;font-size:12px;color:#d6d6d6}

/* About panel (restored + enhanced): slightly more visible */
.enhanced-about {
  background: linear-gradient(180deg, rgba(11,11,12,0.98), rgba(8,8,9,0.96));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 48px rgba(0,0,0,0.6);
  padding:22px;
  border-radius:14px;
}
.enhanced-about-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.enhanced-about-text p{margin:0 0 12px;color:#eaeaea;font-size:15px;line-height:1.6}

/* Enhanced stats */
.enhanced-stats{display:flex;flex-direction:column;gap:12px}
.stat{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);text-align:center}
.stat-tall{padding:18px}
.stat-title{font-size:13px;color:#ffdede;margin-bottom:6px;font-weight:700}
.stat-value{font-size:22px;color:#fff;font-weight:900}

/* Recruitment */
.cards.two-column-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.recruit-card.dark-visible{background: linear-gradient(180deg, rgba(31,32,34,0.96), rgba(22,22,23,0.94));padding:16px;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,0.58);border: 1px solid rgba(255,255,255,0.05);}

/* Scrimmages */
.scrim-visible{background:linear-gradient(180deg, rgba(31,32,34,0.96), rgba(22,22,23,0.94));border-radius:12px;padding:16px;box-shadow:0 16px 40px rgba(0,0,0,0.58);border: 1px solid rgba(255,255,255,0.05)}
.scrim-buttons{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.card-link.btn-like{display:inline-block;padding:10px 14px;background:linear-gradient(90deg,#2f6bff,#5b2bff);color:#fff;border-radius:10px;text-decoration:none;font-weight:800;box-shadow:0 10px 30px rgba(47,107,255,0.12)}
.scrim-actions{display:flex;gap:14px;align-items:center;margin-top:12px}

/* Roster (improved alignment and responsive layout) */
.roster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:18px;
  align-items:start;
}

/* Ensure player card content aligns vertically and adapts on narrow screens */
.player-card.roster-gradient{
  display:flex;
  gap:12px;
  align-items:center;
  background: linear-gradient(180deg, rgba(34,34,38,0.98), rgba(24,24,25,0.96));
  border-radius:12px;
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,0.55);
  min-height:96px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  border: 1px solid rgba(255,255,255,0.04);
}
.player-card.roster-gradient:hover,
.player-card.roster-gradient:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  border-color: rgba(255,255,255,0.03);
}

/* Avatar column: fixed square, vertically centered */
.player-avatar.white-gradient{
  width:84px;
  height:84px;
  min-width:84px;
  min-height:84px;
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff,#f3f3f3);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,0.5);
  flex-shrink:0;
  position:relative;
}

/* Status badge over avatar */
.player-avatar .status-badge{
  position:absolute;
  right:8px;
  bottom:8px;
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(0,0,0,0.45);
  box-shadow:0 4px 12px rgba(0,0,0,0.45);
}
.player-avatar .status-online{ background: #4ade80; }
.player-avatar .status-away{ background: #f59e0b; }
.player-avatar .status-offline{ background: #6b7280; }

/* Player info stack: left-align text and allow overflow wrap */
.player-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  gap:6px;
}

/* Fix roster names visibility and allow wrapping */
.player-info > strong{
  color: var(--white);
  font-size:16px;
  line-height:1.15;
  font-weight:900;
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:100%;
}

/* Role layout */
.player-info .role{
  font-size:13px;
  color:#ffd6d6;
  font-weight:700;
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Meta row */
.player-info .meta-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.player-info .meta-row .dot{ width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.06);display:inline-block; }

/* Bio / additional text should wrap and truncate gracefully */
.player-info .player-bio{
  margin:0;
  font-size:13px;
  color:#d6d6d6;
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Player actions aligned right on wide screens */
.player-actions{
  margin-left: auto;
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}
.player-actions .btn-email{
  appearance:none;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color:var(--white);
  padding:8px 10px;
  border-radius:10px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.player-actions .btn-email:hover{ background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.player-actions .btn-email:focus{ outline:2px solid rgba(255,255,255,0.08); outline-offset:3px; }

/* Ensure <img> inside avatar still displays when present */
.player-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Skeleton placeholder state for loading / missing data */
.player-card.skeleton{
  pointer-events:none;
  opacity:0.9;
}
.player-card.skeleton .player-avatar{ background:linear-gradient(90deg,#e9e9e9,#f3f3f3,#e9e9e9); animation: skeleton-anim 1.2s linear infinite; }
.player-card.skeleton .player-info > strong,
.player-card.skeleton .player-info .player-bio,
.player-card.skeleton .player-info .role{
  background: linear-gradient(90deg,#e9e9e9,#f3f3f3,#e9e9e9);
  color: transparent;
  border-radius:6px;
  display:inline-block;
  animation: skeleton-anim 1.2s linear infinite;
}
@keyframes skeleton-anim{ 0%{background-position:-200px 0} 100%{background-position:200px 0} }

/* Compact variant */
.player-card.compact{
  padding:10px;
  min-height:72px;
  gap:10px;
}
.player-card.compact .player-avatar{ width:56px;height:56px;min-width:56px;min-height:56px;border-radius:8px; }
.player-card.compact .player-info > strong{ font-size:14px; }

/* Tighten spacing on small screens and switch to stacked layout */
@media (max-width:520px){
  .roster-grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
  .player-card.roster-gradient{ flex-direction:row; gap:10px; padding:12px; min-height:0; align-items:flex-start; }
  .player-avatar.white-gradient{ width:64px; height:64px; min-width:64px; min-height:64px; border-radius:8px; }
  .player-info > strong{ font-size:15px; max-width:calc(100% - 84px); }
  .player-info .player-bio{ -webkit-line-clamp:3; font-size:13px; }
  .player-actions{ margin-left:0; margin-top:8px; width:100%; justify-content:flex-start; }
}

/* Desktop polish: increase card height for comfortable breathing room */
@media (min-width:1100px){
  .player-card.roster-gradient{ min-height:110px; padding:16px; gap:16px; }
  .player-avatar.white-gradient{ width:92px; height:92px; min-width:92px; min-height:92px; border-radius:12px; }
  .player-info > strong{ font-size:18px; }
  .player-info .player-bio{ font-size:14px; -webkit-line-clamp:2; }
}

/* Separator */
.section-separator{height:28px;width:100%;margin-top:18px;margin-bottom:18px;border-top:1px solid rgba(255,255,255,0.04)}

/* Join / Quick note */
.cta-grid{display:grid;grid-template-columns:1fr 520px;gap:28px;align-items:start}
.contact-box-separated{padding:12px;border-radius:12px;background:rgba(255,255,255,0.01);display:flex;flex-direction:column;gap:12px}
.contact-row{display:flex;gap:18px;align-items:flex-start}
.contact-row .btn-fb{flex:0 0 auto}
.contact-row form{flex:1}

/* Styled input and textarea */
.field-label{display:block;font-weight:800;color:#fff;font-size:13px;margin-bottom:8px}
.field-input, .field-textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  color:var(--white);
  font-size:15px;
  resize:vertical;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.field-input::placeholder, .field-textarea::placeholder{color:rgba(255,255,255,0.45)}
.field-input:focus, .field-textarea:focus{outline:2px solid rgba(255,255,255,0.06);outline-offset:2px}

/* Quick note list */
.form-row{display:flex;gap:10px;align-items:center;margin-top:12px}
.notes-list{margin-top:12px;max-height:280px;overflow:auto;background:rgba(255,255,255,0.02);padding:10px;border-radius:8px}
.note-item{padding:10px;border-bottom:1px solid rgba(255,255,255,0.02);font-size:13px;color:#eaeaea}
.note-meta{font-size:12px;color:#bfbfbf;margin-bottom:6px}

/* Gallery */
.gallery-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.gallery-actions{display:flex;gap:8px}
.gallery-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-card{background:transparent;border-radius:8px;overflow:hidden}
.media-3x3.image-square{position:relative;padding-top:100%;overflow:hidden;border-radius:8px}
.media-3x3.image-square img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gallery-caption{padding:12px;margin-top:10px;border-radius:8px;color:#fff;display:block;background:rgba(0,0,0,0.45)}
.gallery-title{font-size:18px;font-weight:800;margin-bottom:6px;display:block}
.gallery-sub{font-size:13px;color:#d6d6d6}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:18px 0;margin-top:28px;color:#bfbfbf}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* Responsive adjustments */
@media (max-width:1100px){ .gallery-page-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .header-inner{padding:0 14px}
  .carousel-caption .banner-title{font-size:34px}
  .banner-carousel{max-height:360px}
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .enhanced-about-grid{grid-template-columns:1fr;gap:14px}
  .enhanced-stats{flex-direction:row;gap:10px;justify-content:space-between}
  .stat{flex:1}
  .cards.two-column-row{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr}
  .contact-row{flex-direction:column}
  .gallery-page-grid{grid-template-columns:1fr}
  .scrim-buttons{flex-direction:column;align-items:stretch}
  .scrim-actions{flex-direction:column;align-items:stretch}
  .hero-actions-improved .btn-primary{margin-right:0}
}
@media (max-width:480px){
  .carousel-caption .banner-title{font-size:26px}
  .player-avatar.white-gradient{width:64px;height:64px;min-width:64px;min-height:64px}
  .gallery-title{font-size:16px}
  .gallery-sub{font-size:13px}
  .nav-toggle{padding:10px}
  .nav-toggle .nav-icon{width:18px;height:18px}
  .cta-grid{grid-template-columns:1fr}
  .enhanced-stats{flex-direction:column;gap:10px}
  .stat-value{font-size:20px}
}

/* Subtle appended tweaks preserved */