/* ============================================================
   CROCOLYMPIC GAMES — style.css
   Liquid Glass UI · Red #FF2200 → Orange #FF6600 → Gold #FFD700
   ============================================================

   ── METROPOLIS SETUP (self-hosted, zero external requests) ──
   Metropolis is a free open-source "dead ringer" for Proxima Nova.
   Download from: https://github.com/typehaus/metropolis
     → Go to the repo → Code → Download ZIP, then unzip and grab
       the .woff2 files from the dist/woff2/ folder.
   Place them in a fonts/ folder next to this CSS file using the
   filenames expected by the @font-face block below.

   QUICK CDN ALTERNATIVE (no file download needed):
   Replace each url('fonts/Metropolis-X.woff2') in the @font-face
   block below with the jsdelivr equivalent, e.g.:
     url('https://cdn.jsdelivr.net/npm/@typehaus/metropolis@12.0.0-next.7/Metropolis-Regular.woff2')
   ──────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Metropolis';
  src: url('fonts/Metropolis-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('fonts/Metropolis-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('fonts/Metropolis-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('fonts/Metropolis-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('fonts/Metropolis-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('fonts/Metropolis-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Font stack — Metropolis self-hosted, system-ui fallback */
  --f-body:    "Metropolis", system-ui, sans-serif;
  --f-display: "Metropolis", system-ui, sans-serif;
  --f-mono:    "Metropolis", ui-monospace, monospace;

  /* Font weights — Proxima Nova equivalents */
  --fw-light:  300;
  --fw-reg:    400;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  900;

  /* Crocolympic brand colors */
  --red:    #FF2200;
  --orange: #FF6600;
  --gold:   #FFD700;
  --dark:   #0a0a0a;
  --dark2:  #111111;

  /* Liquid Glass tokens */
  --g-bg:      rgba(15, 8, 3, 0.45);
  --g-border:  rgba(255, 255, 255, 0.12);
  --g-shadow:  0 20px 50px rgba(0, 0, 0, 0.5);
  --g-blur:    blur(35px) saturate(220%) contrast(95%) brightness(105%);
  --g-hover:   rgba(255, 255, 255, 0.08);
  --g-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.4);

  /* Gradients */
  --grad:      linear-gradient(135deg, var(--red), var(--orange), var(--gold));
  --grad-text: linear-gradient(90deg,  var(--red), var(--orange), var(--gold));
  --grad-glow: radial-gradient(circle at center, rgba(255, 102, 0, 0.15) 0%, transparent 70%);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
/* Unify inputs across mobile Safari / Android Chrome */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Fix select arrow styling across browsers */
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  padding-right: 32px !important;
}

body {
  font-family: var(--f-body);
  font-weight: var(--fw-reg);
  background: var(--dark);
  color: #f0e8d0;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
}

/* ── Animated radial background ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(255,34,0,.15)  0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255,215,0,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(255,102,0,.09) 0%, transparent 70%),
    var(--dark);
  animation: bgShift 20s ease-in-out infinite alternate;
}
@keyframes bgShift {
  0%   { filter: brightness(1) hue-rotate(0deg); }
  100% { filter: brightness(1.2) hue-rotate(10deg); }
}

/* ── Film grain noise overlay ── */
.noise {
  position: fixed; inset: 0; z-index: -1;
  opacity: .04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   LIQUID GLASS COMPONENTS
   ============================================================ */
.glass {
  background: var(--g-bg);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow), var(--g-inner-glow);
  border-radius: 20px;
  transition: all .4s cubic-bezier(.2, .8, .2, 1);
  perspective: 1000px;
}
.glass:hover {
  background: var(--g-hover);
  border-color: rgba(255,160,30,.45);
  box-shadow: 0 16px 64px rgba(255,102,0,.30),
              inset 0  1px 1px rgba(255,255,255,.20),
              inset 0 -1px 1px rgba(0,0,0,.50);
  transform: translateY(-6px) scale(1.01);
}
.glass-red    { border-color: rgba(255,34,0,.35);  box-shadow: 0 8px 32px rgba(255,34,0,.20); }
.glass-orange { border-color: rgba(255,102,0,.35); box-shadow: 0 8px 32px rgba(255,102,0,.20); }
.glass-gold   { border-color: rgba(255,215,0,.35); box-shadow: 0 8px 32px rgba(255,215,0,.20); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 1rem;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(255,180,30,.15);
  box-shadow: 0 4px 32px rgba(255,100,0,.10);
  transition: background .3s ease;
}
.navbar.scrolled { background: rgba(0,0,0,.70); }

.nav-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 1rem;
}

.nav-logo {
  font-family: var(--f-display); font-weight: var(--fw-black);
  font-size: clamp(1.1rem, 4.5vw, 1.75rem); letter-spacing: clamp(1px, 0.5vw, 3px); white-space: nowrap;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; text-decoration: none; flex-shrink: 0;
  cursor: pointer;
  animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { filter: drop-shadow(0 0  8px rgba(255,102,0,.50)); }
  50%      { filter: drop-shadow(0 0 20px rgba(255,215,0,.80)); }
}

.nav-links { display: flex; align-items: center; gap: .2rem; list-style: none; }
.nav-links a {
  color: rgba(255,232,180,.85); text-decoration: none;
  font-family: var(--f-body); font-weight: var(--fw-semi);
  font-size:.85rem; letter-spacing: 1.2px; text-transform: uppercase;
  padding: .45rem .75rem; border-radius: 10px;
  transition: all .3s ease; position: relative; white-space: nowrap; cursor: pointer;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; right: 50%;
  height: 2px; background: var(--grad-text); border-radius: 2px;
  transition: all .3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { left: 10%; right: 10%; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); background: rgba(255,215,0,.07); }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; display: flex; align-items: center; gap: .3rem; }
.nav-dropdown-toggle svg { width: 12px; height: 12px; transition: transform .3s; }
.nav-dropdown:hover .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) scaleY(0); transform-origin: top;
  min-width: 190px;
  background: rgba(8,4,0,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,180,30,.20); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 48px rgba(0,0,0,.65);
  opacity: 0; transition: all .3s cubic-bezier(.23,1,.32,1); z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; transform: translateX(-50%) scaleY(1); }
.nav-dropdown-menu a {
  display: block; padding: .7rem 1.3rem; border-radius: 0; font-size:.85rem;
  border-bottom: 1px solid rgba(255,180,30,.07); letter-spacing: .5px;
}
.nav-dropdown-menu a:last-child { border-bottom: none; }

/* Register Button */
.nav-register { display: flex; align-items: center; flex-shrink: 0; }
.nav-register-btn {
  background: #fff;
  color: #000;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-family: var(--f-mono);
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(.23,1,.32,1);
  animation: navPulse 3s ease-in-out infinite;
  white-space: nowrap;
}
.nav-register-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.5);
  background: #f8f8f8;
}
.nav-register-btn:active {
  transform: translateY(0) scale(0.98);
}
.nav-register-btn.active {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
  transform: translateY(-2px);
  animation: none;
}
@keyframes navPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 4px 25px rgba(255, 255, 255, 0.6); transform: scale(1.02); }
}

/* Hamburger */
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .5rem; background: none; border: none; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--gold); border-radius: 2px; transition: all .3s ease; }

/* Mobile menu */
.mobile-menu {
  display: none; position: fixed; bottom: 82px; left: 12px; right: 12px; top: auto;
  background: rgba(10,5,0,.98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,232,180,.3);
  border-radius: 24px;
  z-index: 990; padding: 1.5rem;
  max-height: calc(100vh - 140px); overflow-y: auto;
  transform-origin: bottom right;
  animation: popUpMenu .3s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 20px rgba(255,180,30,.15);
}

@keyframes popUpMenu {
  from { transform: scale(0.8) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Mobile Bottom Bar */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: rgba(10, 5, 0, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 180, 30, 0.2);
  z-index: 1001;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.mbb-item {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255, 232, 180, 0.6);
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  flex: 1;
  padding: 8px 0;
}

.mbb-item:active {
  transform: scale(0.9);
}

.mbb-item.active {
  color: var(--gold);
}

.mbb-icon {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.2));
}

@media (max-width: 900px) {
  .mobile-bottom-bar {
    display: flex;
  }
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; color: rgba(255,232,180,.85); text-decoration: none;
  font-family: var(--f-body); font-weight: var(--fw-semi);
  font-size: 1rem; letter-spacing: 1px; text-transform: uppercase;
  padding: .8rem 0; border-bottom: 1px solid rgba(255,180,30,.08); cursor: pointer;
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-search-wrap { margin-top: 1.2rem; }
.mobile-search-wrap input {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,180,30,.20); border-radius: 24px;
  padding: .65rem 1.3rem; color: #f0e8d0; font-family: var(--f-body); font-size: .9rem;
}
.mobile-search-wrap input:focus { outline: none; border-color: var(--gold); }
@keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   PAGE SYSTEM
   ============================================================ */
.page-wrapper { padding-top: 68px; min-height: 100vh; padding-bottom: 2rem; transition: padding-bottom 0.3s ease; }

@media (max-width: 900px) {
  .page-wrapper { padding-bottom: 90px; } /* Room for mobile bottom bar */
}
.page { display: none; visibility: hidden; }
.page.active { visibility: visible; }
.page.active { display: block; animation: pageIn 0.45s cubic-bezier(0.25, 1, 0.5, 1) both; }
@keyframes pageIn {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(15px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* ============================================================
   MOBILE OPTIMIZATIONS (PERFORMANCE)
   ============================================================ */
@media (max-width: 768px) {
  /* Disable heavy filters on mobile to prevent "sticky" scrolling */
  * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .glass, .spc, .sslot, .sresult { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .glass { background: rgba(20, 10, 5, 0.85) !important; }
  .spc, .sslot, .sresult { background: rgba(255, 255, 255, 0.06) !important; }
  
  /* Disable smooth scroll on mobile if it feels "stuck" */
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker-wrap {
  background: rgba(255,60,0,.10);
  border-top: 1px solid rgba(255,100,0,.20);
  border-bottom: 1px solid rgba(255,100,0,.20);
  overflow: hidden; padding: .65rem 0;
}
.ticker-inner {
  display: flex; white-space: nowrap;
  animation: ticker 32s linear infinite; gap: 4rem;
}
.ticker-item {
  font-family: var(--f-mono); font-weight: var(--fw-semi);
  font-size:.85rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); opacity: .75; flex-shrink: 0;
}
.ticker-sep { color: var(--orange); opacity: .40; flex-shrink: 0; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: clamp(4rem,12vw,7rem) 1.2rem clamp(3rem,8vw,5rem); overflow: hidden;
}
.hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; animation: orbFloat 8s ease-in-out infinite; will-change: transform, opacity; contain: layout style paint; }
.orb-1 { width:500px; height:500px; background: radial-gradient(circle,var(--red),transparent 70%);   top:-100px; left:-100px; animation-delay:0s; }
.orb-2 { width:400px; height:400px; background: radial-gradient(circle,var(--orange),transparent 70%); top:50%; right:-80px; animation-delay:-3s; }
.orb-3 { width:350px; height:350px; background: radial-gradient(circle,var(--gold),transparent 70%);   bottom:-80px; left:30%; animation-delay:-6s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-20px,15px) scale(.95)} }

.hero-eyebrow {
  font-family: var(--f-mono); font-weight: var(--fw-semi);
  font-size:.85rem; letter-spacing: 6px; text-transform: uppercase;
  color: var(--orange); opacity: .85; margin-bottom: 1.2rem;
  animation: fadeUp .8s ease both;
}
.hero-title {
  font-family: var(--f-display); font-weight: var(--fw-black);
  font-size: clamp(2.2rem, 9vw, 8rem); line-height: .95; letter-spacing: clamp(1px, 0.5vw, 4px);
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 40px rgba(255,100,0,.40));
  animation: fadeUp .8s .1s ease both;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}
.hero-sub {
  font-size: clamp(.9rem, 3.5vw, 1.25rem); font-weight: var(--fw-light);
  color: rgba(255,232,180,.70); margin-top: 1.2rem; max-width: 600px; letter-spacing: .5px;
  animation: fadeUp .8s .2s ease both;
}
.hero-cta { display: flex; gap: .75rem; margin-top: 2rem; flex-wrap: wrap; justify-content: center; animation: fadeUp .8s .3s ease both; width: 100%; }
.hero-search-wrap { margin-top: 2.5rem; max-width: 560px; width: 100%; animation: fadeUp .8s .4s ease both; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.4rem; border-radius: 50px;
  font-family: var(--f-body); font-weight: var(--fw-bold);
  font-size: .85rem; letter-spacing: 1.5px; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: none;
  transition: all .3s cubic-bezier(.23,1,.32,1);
  position: relative; overflow: hidden;
}
.btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.10); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.btn:hover::before { transform: scaleX(1); }
.btn-primary { background: var(--grad); color: #000; box-shadow: 0 4px 24px rgba(255,102,0,.40); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(255,102,0,.60); }
.btn-glass { background: var(--g-bg); color: var(--gold); border: 1px solid rgba(255,215,0,.30); backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255,215,0,.10); transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 8px 24px rgba(255,215,0,.20); }

/* ============================================================
   SECTION LAYOUT
   ============================================================ */
.section { padding: clamp(2.5rem,8vw,5rem) clamp(1rem,4vw,2rem); max-width: 1400px; margin: 0 auto; }
.content-area { max-width: 1400px; margin: 0 auto; padding: 1.5rem clamp(1rem,4vw,2rem) clamp(3rem,8vw,5rem); }

.section-label {
  font-family: var(--f-mono); font-weight: var(--fw-semi);
  font-size:.85rem; letter-spacing: 5px; text-transform: uppercase;
  color: var(--orange); margin-bottom: .8rem; opacity: .85;
}
.section-title {
  font-family: var(--f-display); font-weight: var(--fw-black);
  font-size: clamp(1.5rem, 6vw, 4rem); letter-spacing: clamp(1px, 0.5vw, 3px);
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: .5rem; line-height: 1;
}
.section-divider { width: 80px; height: 3px; background: var(--grad); border-radius: 2px; margin: 1rem 0 2.5rem; }

/* ============================================================
   CARDS
   ============================================================ */
.cards-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%),1fr)); gap: 1.5rem; }
.card { padding: 2rem; position: relative; overflow: hidden; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transition:transform .4s ease; }
.card:hover::before { transform: scaleX(1); }
.card-title { font-family: var(--f-display); font-weight: var(--fw-black); font-size: 1.4rem; letter-spacing: 2px; color: var(--gold); margin-bottom: .6rem; }
.card-text  { color: rgba(255,232,180,.65); font-size: .95rem; line-height: 1.65; }

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.stat-item { flex: 1; min-width: 90px; padding: 1rem .75rem; text-align: center; }
.stat-number {
  font-family: var(--f-display); font-weight: var(--fw-black);
  font-size: clamp(1.6rem,5vw,2.8rem); letter-spacing: 2px; line-height: 1;
  background: var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { font-family: var(--f-mono); font-weight: var(--fw-semi); font-size:.85rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,200,80,.50); margin-top: .4rem; }

/* ============================================================
   SEARCH BAR (large)
   ============================================================ */
.search-bar-large {
  display: flex; align-items: stretch; border-radius: 50px; overflow: hidden;
  border: 1px solid rgba(255,180,30,.30);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(18px); box-shadow: 0 8px 32px rgba(255,100,0,.12);
  transition: box-shadow .3s, border-color .3s;
  gap: 0;
  width: 100%;
}
.search-bar-large:focus-within { box-shadow: 0 8px 40px rgba(255,150,0,.28); border-color: rgba(255,215,0,.55); }
.search-bar-large input { flex:1; min-width: 0; background:none; border:none; padding:1rem 1.5rem; color:#f0e8d0; font-family:var(--f-body); font-size:1rem; }
.search-bar-large input:focus { outline: none; }
.search-bar-large input::placeholder { color: rgba(255,220,100,.35); }
.search-bar-large button {
  padding: .75rem 1.6rem;
  background: var(--grad);
  border: none;
  border-radius: 0 50px 50px 0;
  color: #000;
  font-family: var(--f-body); font-weight: var(--fw-bold); font-size:.85rem;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  transition: filter .2s, transform .15s;
  white-space: nowrap; flex-shrink: 0;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
}
.search-bar-large button:hover { filter: brightness(1.15); }
.search-bar-large button:active { transform: scale(.97); }

/* ============================================================
   TABLE
   ============================================================ */
.glass-table { width: 100%; border-collapse: collapse; font-family: var(--f-body); }
.glass-table th {
  font-family: var(--f-mono); font-weight: var(--fw-semi);
  font-size: clamp(.55rem,1.6vw,.65rem); letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange); padding: .75rem 1rem; text-align: left;
  border-bottom: 1px solid rgba(255,180,30,.15); background: rgba(255,100,0,.05);
  white-space: nowrap;
}
.glass-table td { padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04); color: rgba(255,232,180,.80); font-size: clamp(.8rem,2.2vw,.95rem); transition: background .2s; }
.glass-table tr:hover td { background: rgba(255,150,0,.05); }
.glass-table tr:last-child td { border-bottom: none; }

/* ============================================================
   BADGES
   ============================================================ */
.badge { display:inline-flex; align-items:center; padding:.22rem .75rem; border-radius:20px; font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:1px; text-transform:uppercase; }
.badge-red    { background:rgba(255,34,0,.15);  color:#FF6644; border:1px solid rgba(255,34,0,.30); }
.badge-orange { background:rgba(255,102,0,.15); color:#FF9955; border:1px solid rgba(255,102,0,.30); }
.badge-gold   { background:rgba(255,215,0,.12); color:#FFD700; border:1px solid rgba(255,215,0,.30); }
.badge-dark   { background:rgba(255,255,255,.06); color:rgba(255,232,180,.70); border:1px solid rgba(255,255,255,.10); }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group { margin-bottom: 1.5rem; position: relative; }
.form-label { 
  display:block; font-family:var(--f-mono); font-weight:var(--fw-semi); 
  font-size:.85rem; letter-spacing:3px; text-transform:uppercase; 
  color:var(--orange); margin-bottom:.5rem;
  transition: all .3s ease;
}
.form-input, .form-textarea, .form-select {
  width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,180,30,.20);
  border-radius:12px; padding:.88rem 1.1rem; color:#f0e8d0;
  font-family:var(--f-body); font-size:.95rem; transition:all .4s cubic-bezier(.2, .8, .2, 1);
}
.form-input:focus, .form-textarea:focus, .form-select:focus { 
  outline:none; border-color:rgba(255,215,0,.6); 
  background:rgba(255,255,255,.08); 
  box-shadow: 0 0 0 4px rgba(255,150,0,.15), 0 8px 24px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
.form-group:focus-within .form-label {
  color: var(--gold);
  transform: translateX(4px);
}
.form-input::placeholder, .form-textarea::placeholder { color:rgba(255,220,100,.30); }
.form-textarea { resize:vertical; min-height:120px; }
.form-select { appearance:none; cursor:pointer; }
.form-select option { background:#111; }

/* ── Staggered reveal ── */
.stagger-parent .reveal {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-parent .reveal:nth-child(1) { transition-delay: 0.1s; }
.stagger-parent .reveal:nth-child(2) { transition-delay: 0.2s; }
.stagger-parent .reveal:nth-child(3) { transition-delay: 0.3s; }
.stagger-parent .reveal:nth-child(4) { transition-delay: 0.4s; }
.stagger-parent .reveal:nth-child(5) { transition-delay: 0.5s; }
.stagger-parent .reveal:nth-child(6) { transition-delay: 0.6s; }
.stagger-parent .reveal:nth-child(7) { transition-delay: 0.7s; }
.stagger-parent .reveal:nth-child(8) { transition-delay: 0.8s; }

/* ============================================================
   PAGE BANNER
   ============================================================ */
.page-banner { position:relative; padding:clamp(1.2rem,4vw,2.5rem) clamp(1rem,4vw,2rem) clamp(1.2rem,3vw,2rem); text-align:center; overflow:hidden; }
.page-banner::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,60,0,.08),transparent); pointer-events:none; }
.page-banner-line { position:absolute; bottom:0; left:50%; right:50%; height:1px; background:var(--grad); transition:all .9s cubic-bezier(.23,1,.32,1); }
.page-banner-eyebrow { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:6px; text-transform:uppercase; color:var(--orange); opacity:.75; margin-bottom:.8rem; }
.page-banner-title { font-family:var(--f-display); font-weight:var(--fw-black); font-size:clamp(2rem,9vw,6rem); letter-spacing:clamp(1px,1.2vw,5px); background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 0 30px rgba(255,100,0,.35)); line-height:1.05; }
.page-banner-sub { font-size:clamp(.82rem,2.5vw,1rem); font-weight:var(--fw-light); color:rgba(255,232,180,.55); margin-top:.85rem; letter-spacing:.5px; padding:0 .5rem; }

/* ============================================================
   CONTENT PLACEHOLDER
   ============================================================ */
.content-placeholder { padding:4rem 2rem; text-align:center; border-radius:20px; }
.content-placeholder-icon { font-size:3rem; margin-bottom:1rem; opacity:.40; }
.content-placeholder-text { color:rgba(255,232,180,.35); font-size:.88rem; letter-spacing:1px; font-family:var(--f-mono); font-weight:var(--fw-semi); }

/* ============================================================
   LIVE BADGE
   ============================================================ */
.live-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .85rem; border-radius:20px; background:rgba(255,34,0,.15); border:1px solid rgba(255,34,0,.40); font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:2px; text-transform:uppercase; color:#FF4422; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#FF3300; animation:livePulse 1.2s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ============================================================
   SHIMMER TEXT
   ============================================================ */
.shimmer-text {
  background: linear-gradient(90deg, var(--red) 0%, var(--orange) 25%, var(--gold) 50%, var(--orange) 75%, var(--red) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }

/* ============================================================
   CURSOR GLOW
   ============================================================ */
.cursor-glow { position:fixed; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(255,140,0,.06),transparent 70%); pointer-events:none !important; touch-action:none; transform:translate(-50%,-50%); z-index:0; transition:opacity .3s; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
/* Force all reveal elements visible as soon as their page is active */
.page.active .reveal { opacity:1; transform:translateY(0); }
.reveal-delay-1{transition-delay:.10s} .reveal-delay-2{transition-delay:.20s}
.reveal-delay-3{transition-delay:.30s} .reveal-delay-4{transition-delay:.40s}

/* ============================================================
   QUICK NAV LINKS
   ============================================================ */
.quick-links-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,46%),1fr)); gap:1rem; margin-top:3rem; }
.quick-link-card { padding:1.8rem 1.5rem; text-decoration:none; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; cursor:pointer; transition:all .35s cubic-bezier(.23,1,.32,1); }
.quick-link-card:hover { transform:translateY(-4px) scale(1.02); }
.quick-link-icon { font-size:1.9rem; }
.quick-link-title { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1.2rem; letter-spacing:2px; color:var(--gold); }
.quick-link-sub { font-size:.85rem; color:rgba(255,232,180,.45); letter-spacing:.3px; }

/* ============================================================
   TABS & FILTER BUTTONS
   ============================================================ */
.section-tabs { display:flex; gap:.5rem; margin-bottom:2.5rem; border-bottom:1px solid rgba(255,180,30,.10); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.section-tabs::-webkit-scrollbar { display:none; }
.tab-btn { padding:.62rem 1.2rem; background:none; border:none; border-bottom:2px solid transparent; color:rgba(255,232,180,.50); font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all .25s; margin-bottom:-1px; flex-shrink:0; white-space:nowrap; }
.tab-btn:hover { color:var(--gold); }
.tab-btn.active { color:var(--gold); border-bottom-color:var(--orange); }
.tab-content { display:none; } .tab-content.active { display:block; }

.filter-btn, .ranking-tab, .stats-cat-btn { padding:.4rem 1rem; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,180,30,.14); color:rgba(255,232,180,.60); font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all .25s; white-space:nowrap; }
.filter-btn:hover,.filter-btn.active,.ranking-tab:hover,.ranking-tab.active,.stats-cat-btn:hover,.stats-cat-btn.active { background:rgba(255,150,0,.10); border-color:var(--orange); color:var(--gold); }
.filter-row, .ranking-row, .stats-row { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.filter-row::-webkit-scrollbar, .ranking-row::-webkit-scrollbar, .stats-row::-webkit-scrollbar { display:none; }

/* ============================================================
   PAGE-SPECIFIC: ABOUT
   ============================================================ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2.5rem; }
.about-block { padding:2.5rem; }
.timeline { position:relative; margin-top:1rem; }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(var(--red),var(--orange),var(--gold)); border-radius:2px; }
.timeline-item { padding-left:2rem; margin-bottom:2rem; position:relative; }
.timeline-item::before { content:''; position:absolute; left:-5px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--orange); border:2px solid var(--dark); box-shadow:0 0 12px rgba(255,100,0,.50); }
.timeline-year  { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:3px; color:var(--orange); margin-bottom:.3rem; }
.timeline-title { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1.2rem; letter-spacing:2px; color:var(--gold); margin-bottom:.4rem; }
.timeline-desc  { color:rgba(255,232,180,.55); font-size:.92rem; line-height:1.65; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(160px,46%),1fr)); gap:1.2rem; }
.team-card { padding:1.5rem 1rem; text-align:center; }
.team-avatar { width:64px; height:64px; border-radius:50%; background:var(--grad); margin:0 auto .8rem; display:flex; align-items:center; justify-content:center; font-size:1.6rem; animation:pulseGlow 3s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 20px rgba(255,100,0,.30)} 50%{box-shadow:0 0 40px rgba(255,200,0,.60)} }
.team-name { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1rem; letter-spacing:1px; color:var(--gold); margin-bottom:.2rem; }
.team-role { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:2px; color:rgba(255,200,80,.40); text-transform:uppercase; }

/* ── Team Photo Carousel ── */
/* ── Department Information Cards (Grid) ── */
.dept-grid-container {
  margin: 3.5rem 0;
  width: 100%;
}
@media (max-width: 680px) {
  .dept-grid-container { margin: 2rem 0; }
}

.dept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}

.dept-card {
  position: relative;
  aspect-ratio: 1 / 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 180, 30, 0.15);
  background: var(--g-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.dept-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 180, 30, 0.4);
  box-shadow: 0 12px 30px rgba(255, 102, 0, 0.2);
  z-index: 2;
}

.dept-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Responsive Optimizations ── */
@media (max-width: 992px) {
  .dept-grid { gap: 1.2rem; }
}

@media (max-width: 768px) {
  .dept-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
  }
}

@media (max-width: 480px) {
  .dept-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .dept-card {
    border-radius: 8px;
  }
}





/* ============================================================
   PAGE-SPECIFIC: CONTACT
   ============================================================ */
.contact-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:start; }
.contact-info-item { display:flex; align-items:flex-start; gap:1rem; padding:1.2rem; margin-bottom:.75rem; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,180,30,.08); transition:all .3s; }
.contact-info-item:hover { background:rgba(255,150,0,.06); border-color:rgba(255,180,30,.20); }
.contact-icon { width:44px; height:44px; border-radius:10px; background:rgba(255,100,0,.10); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.contact-info-label { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:3px; color:var(--orange); text-transform:uppercase; margin-bottom:.3rem; }
.contact-info-value { color:rgba(255,232,180,.80); font-size:.95rem; }

/* ============================================================
   PAGE-SPECIFIC: PLAYERS
   ============================================================ */
.player-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:1.5rem; }
.player-card { padding:2rem 1.5rem; text-align:center; position:relative; overflow:hidden; }
.player-num { position:absolute; top:1rem; right:1.2rem; font-family:var(--f-display); font-weight:var(--fw-black); font-size:2.5rem; color:rgba(255,215,0,.08); line-height:1; pointer-events:none; }
.player-avatar { width:72px; height:72px; border-radius:50%; background:var(--grad); margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size:2rem; animation:pulseGlow 3s ease-in-out infinite; }
.player-name  { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1.3rem; letter-spacing:2px; color:var(--gold); margin-bottom:.3rem; }
.player-team  { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:2px; color:var(--orange); text-transform:uppercase; margin-bottom:.8rem; }
.player-stats-row { display:flex; justify-content:center; gap:1.5rem; border-top:1px solid rgba(255,180,30,.10); padding-top:1rem; margin-top:.5rem; }
.player-stat-val { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1.4rem; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.player-stat-lbl { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:2px; color:rgba(255,200,80,.40); }

/* ============================================================
   PAGE-SPECIFIC: YOUTH
   ============================================================ */
.division-card { padding:2rem; border-top:3px solid transparent; transition:all .35s cubic-bezier(.23,1,.32,1); }
.division-card:hover { transform:translateY(-4px); }
.division-card.div-red    { border-top-color:var(--red); }
.division-card.div-orange { border-top-color:var(--orange); }
.division-card.div-gold   { border-top-color:var(--gold); }
.division-age  { font-family:var(--f-display); font-weight:var(--fw-black); font-size:2.5rem; line-height:1; margin-bottom:.4rem; }
.division-name { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1.3rem; letter-spacing:2px; color:rgba(255,232,180,.85); margin-bottom:.6rem; }
.division-desc { color:rgba(255,232,180,.50); font-size:.92rem; line-height:1.65; }
.division-card.div-red  .division-age { color:var(--red); }
.division-card.div-orange .division-age { color:var(--orange); }
.division-card.div-gold .division-age { color:var(--gold); }
.youth-feature { display:flex; align-items:flex-start; gap:1rem; padding:1.2rem; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid rgba(255,180,30,.07); margin-bottom:.75rem; transition:all .3s; }
.youth-feature:hover { background:rgba(255,150,0,.05); border-color:rgba(255,180,30,.18); }
.youth-feature-icon  { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,rgba(255,100,0,.15),rgba(255,215,0,.10)); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.youth-feature-title { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1.1rem; letter-spacing:1.5px; color:var(--gold); margin-bottom:.2rem; }
.youth-feature-desc  { color:rgba(255,232,180,.50); font-size:.88rem; line-height:1.55; }

/* ============================================================
   PAGE-SPECIFIC: NEWS
   ============================================================ */
.news-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:2rem; }
.news-card { padding:0; overflow:hidden; }
.news-card-thumb { height:180px; background:linear-gradient(135deg,rgba(255,34,0,.15),rgba(255,215,0,.10)); display:flex; align-items:center; justify-content:center; font-size:3rem; border-bottom:1px solid rgba(255,180,30,.10); }
.news-card-body { padding:1.5rem; }
.news-date  { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:2px; color:rgba(255,200,80,.40); }
.news-title { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1.4rem; letter-spacing:1.5px; color:rgba(255,232,180,.90); margin-bottom:.5rem; line-height:1.2; }
.news-excerpt { color:rgba(255,232,180,.50); font-size:.92rem; line-height:1.65; margin-bottom:1rem; }
.news-list-item { display:flex; gap:.75rem; padding:.9rem 0; border-bottom:1px solid rgba(255,180,30,.06); }
.news-list-item:last-child { border-bottom:none; }
.news-list-dot   { width:6px; height:6px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:6px; }
.news-list-title { font-weight:var(--fw-semi); font-size:.90rem; color:rgba(255,232,180,.75); line-height:1.4; cursor:pointer; transition:color .2s; }
.news-list-item:hover .news-list-title { color:var(--gold); }
.news-list-date  { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:2px; color:rgba(255,200,80,.30); margin-top:.2rem; }

/* ============================================================
   PAGE-SPECIFIC: LIVE STREAM
   ============================================================ */
.stream-layout { display:grid; grid-template-columns:1fr minmax(0,320px); gap:2rem; align-items:start; }
.stream-player { width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid rgba(255,180,30,.15); background:rgba(0,0,0,.50); display:flex; align-items:center; justify-content:center; position:relative; }
.stream-pulse-ring { position:absolute; width:120px; height:120px; border-radius:50%; border:2px solid rgba(255,60,0,.30); animation:ringPulse 2s ease-out infinite; }
.stream-pulse-ring:nth-child(2){animation-delay:.5s} .stream-pulse-ring:nth-child(3){animation-delay:1s}
@keyframes ringPulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(3);opacity:0} }
.stream-player-text { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1.8rem; letter-spacing:3px; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:.5rem; }
.stream-player-sub  { color:rgba(255,232,180,.40); font-size:.85rem; letter-spacing:.5px; }
.upcoming-stream { display:flex; gap:1rem; align-items:center; padding:1rem; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid rgba(255,180,30,.07); cursor:pointer; transition:all .25s; margin-bottom:.75rem; }
.upcoming-stream:hover { background:rgba(255,150,0,.07); border-color:rgba(255,180,30,.20); }
.upcoming-thumb { width:64px; height:48px; border-radius:8px; background:linear-gradient(135deg,rgba(255,34,0,.20),rgba(255,215,0,.10)); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.upcoming-title { font-weight:var(--fw-semi); font-size:.90rem; color:rgba(255,232,180,.80); }
.upcoming-time  { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:2px; color:rgba(255,200,80,.40); margin-top:.2rem; }

/* ============================================================
   PAGE-SPECIFIC: LIVE RANKING
   ============================================================ */
.podium { display:flex; align-items:flex-end; justify-content:center; gap:1rem; padding:2rem 1rem 0; margin-bottom:3rem; }
.podium-item  { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.podium-avatar{ width:56px; height:56px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.podium-name  { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1rem; letter-spacing:1.5px; color:rgba(255,232,180,.80); text-align:center; }
.podium-score { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:2px; color:rgba(255,200,80,.50); }
.podium-block { border-radius:8px 8px 0 0; display:flex; align-items:center; justify-content:center; width:80px; }
.podium-block span { font-family:var(--f-display); font-weight:var(--fw-black); font-size:2rem; }
.podium-block-1 { height:100px; background:linear-gradient(180deg,rgba(255,215,0,.20),rgba(255,215,0,.05)); border:1px solid rgba(255,215,0,.30); }
.podium-block-2 { height: 70px; background:linear-gradient(180deg,rgba(192,192,192,.15),rgba(192,192,192,.05)); border:1px solid rgba(192,192,192,.20); }
.podium-block-3 { height: 55px; background:linear-gradient(180deg,rgba(205,127,50,.15),rgba(205,127,50,.05)); border:1px solid rgba(205,127,50,.20); }
.update-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .75rem; border-radius:20px; background:rgba(0,200,100,.08); border:1px solid rgba(0,200,100,.20); font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:2px; color:#55DD99; margin-left:auto; }

/* ============================================================
   PAGE-SPECIFIC: STATS
   ============================================================ */
.stat-highlight-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,46%),1fr)); gap:1.2rem; margin-bottom:3rem; }
.stat-highlight-card { padding:1.8rem 1.5rem; text-align:center; position:relative; overflow:hidden; }
.stat-highlight-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); }
.stat-big    { font-family:var(--f-display); font-weight:var(--fw-black); font-size:3.5rem; line-height:1; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-lbl    { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:3px; color:rgba(255,200,80,.40); text-transform:uppercase; margin-top:.3rem; }
.stat-holder { font-size:.85rem; color:rgba(255,232,180,.55); margin-top:.4rem; }
.bar-chart-row { display:flex; align-items:center; gap:1rem; margin-bottom:.75rem; }
.bar-label { width:clamp(70px,28vw,130px); flex-shrink:0; font-size:clamp(.72rem,2vw,.85rem); color:rgba(255,232,180,.70); text-align:right; }
.bar-track { flex:1; height:8px; background:rgba(255,255,255,.04); border-radius:4px; overflow:hidden; }
.bar-fill  { height:100%; border-radius:4px; background:var(--grad); transform-origin:left; animation:barGrow 1s cubic-bezier(.23,1,.32,1) both; }
@keyframes barGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.bar-val { width:50px; flex-shrink:0; font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:1px; color:var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:rgba(0,0,0,.60); backdrop-filter:blur(12px); border-top:1px solid rgba(255,180,30,.10); padding:3rem clamp(1rem,4vw,2rem) 2rem; }
.footer-inner { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2.5rem; margin-bottom:2.5rem; }
.footer-logo { font-family:var(--f-display); font-weight:var(--fw-black); font-size:1.75rem; letter-spacing:3px; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; margin-bottom:.8rem; cursor:pointer; }
.footer-desc { color:rgba(255,232,180,.40); font-size:.90rem; line-height:1.65; }
.footer-heading { font-family:var(--f-mono); font-weight:var(--fw-semi); font-size:.85rem; letter-spacing:4px; text-transform:uppercase; color:var(--orange); margin-bottom:1.2rem; opacity:.75; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:.6rem; }
.footer-links a { color:rgba(255,232,180,.50); text-decoration:none; font-size:.90rem; transition:color .2s; cursor:pointer; }
.footer-links a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.04); padding-top:1.5rem; text-align:center; color:rgba(255,232,180,.25); font-size:.85rem; letter-spacing:1px; max-width:1400px; margin:0 auto; }
.footer-bottom span { background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ── 900px: tablet ── */
@media (max-width: 900px) {
  .nav-links, .nav-register { display:none; }
  .nav-hamburger { display: none !important; }
  .about-grid, .contact-layout, .news-grid, .stream-layout { grid-template-columns:1fr; }
  .podium { gap:.75rem; }
}

/* ── 680px: large phone / small tablet ── */
@media (max-width: 680px) {
  .stats-bar { gap:.5rem; }
  .stat-item { min-width:80px; padding:.75rem .5rem; }
  .stat-number { font-size:clamp(1.4rem,5vw,2rem); }
  .stat-label { font-size:.85rem; letter-spacing:2px; }
  .two-col { grid-template-columns:1fr !important; }
  .cards-grid { grid-template-columns:1fr; }
  .quick-links-grid { grid-template-columns:1fr 1fr; }
  .stat-highlight-grid { grid-template-columns:1fr 1fr; }
  .glass-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ── 480px: phone ── */
@media (max-width: 480px) {
  .search-bar-large input { padding:.75rem 1rem; font-size:.9rem; }
  .search-bar-large button { padding:.75rem 1.2rem; font-size:.85rem; }
  .nav-inner { height:56px; }
  .page-wrapper { padding-top:56px; }
  .mobile-menu { top:56px; max-height:calc(100vh - 56px); }
  .hero { padding:3.5rem .9rem 2.5rem; overflow:hidden; }
  .hero-eyebrow { font-size:.85rem; letter-spacing:2.5px; }
  .hero-sub { font-size:.88rem; }
  .hero-title { font-size: clamp(2rem, 13vw, 3.5rem); letter-spacing:1px; }
  .hero-cta { gap:.5rem; }
  .btn { padding:.65rem 1rem; font-size:.85rem; letter-spacing:1px; }
  .section { padding:2rem .9rem; }
  .content-area { padding:1.2rem .9rem 2.5rem; }
  .page-banner { padding:2.5rem .9rem 1.8rem; }
  .page-banner-eyebrow { font-size:.85rem; letter-spacing:2.5px; }
  .section-title { font-size:clamp(1.3rem,8vw,2rem); }
  .section-label { font-size:.85rem; letter-spacing:3px; }
  .card-title { font-size:1.1rem; letter-spacing:1px; }
  .card-text { font-size:.88rem; }
  .stat-big { font-size:2.5rem; }
  .stat-highlight-grid { grid-template-columns:1fr 1fr; gap:.75rem; }
  .player-grid { grid-template-columns:1fr; }
  .quick-links-grid { grid-template-columns:1fr 1fr; gap:.75rem; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .tab-btn { padding:.5rem .8rem; font-size:.85rem; letter-spacing:1px; }
  .podium-avatar { width:42px; height:42px; font-size:1.1rem; }
  .podium-name { font-size:.85rem; }
  .podium-block { width:60px; }
  .podium-block-1 { height:80px; }
  .podium-block-2 { height:56px; }
  .podium-block-3 { height:44px; }
  .glass-table th { font-size:.85rem; padding:.6rem .75rem; }
  .glass-table td { font-size:.85rem; padding:.65rem .75rem; }
  .news-title { font-size:1.1rem; }
  .division-age { font-size:2rem; }
  .bar-chart-row { gap:.5rem; }
  .bar-val { width:36px; font-size:.85rem; }
  .footer-inner { gap:1.5rem; }
  .footer-logo { font-size:1.3rem; }
}

/* ── 380px: tiny phone (iPhone SE etc.) ── */
@media (max-width: 380px) {
  .hero-cta .btn { font-size:.85rem; padding:.6rem .85rem; }
  .section-title { font-size:1.3rem; }
  .hero-title { font-size: clamp(1.8rem, 12vw, 3rem); }
  .page-banner-title { font-size:clamp(1.7rem,10vw,2.5rem); }
  .player-grid { grid-template-columns:1fr; }
  .quick-links-grid { grid-template-columns:1fr 1fr; }
  .stat-highlight-grid { grid-template-columns:1fr 1fr; }
  .podium { gap:.4rem; }
  .podium-block { width:52px; }
  .podium-avatar { width:38px; height:38px; font-size:.95rem; }
  .upcoming-thumb { width:48px; height:36px; }
  .filter-btn, .ranking-tab, .stats-cat-btn { padding:.35rem .75rem; font-size:.85rem; }
}


/* ============================================================
   VIDEO ARCHIVE
   ============================================================ */
.video-card {
  border-radius:16px; overflow:hidden; cursor:pointer;
  transition:transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s;
  position:relative;
}
.video-card:hover { transform:translateY(-4px); }
.video-card:hover .video-thumb-overlay { opacity:1; pointer-events:none !important; }
.video-card:hover .video-thumb img { transform:scale(1.04); }

.video-thumb {
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#111;
}
.video-thumb img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease; display:block;
}
.video-thumb-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
  pointer-events:none;
  z-index:2;
}
.video-play-btn {
  width:56px; height:56px; border-radius:50%;
  background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  box-shadow:0 0 30px rgba(255,100,0,.60);
  transition:transform .2s;
}
.video-card:hover .video-play-btn { transform:scale(1.1); }

.video-duration {
  position:absolute; bottom:.5rem; right:.6rem;
  background:rgba(0,0,0,.80); color:#fff;
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:1px;
  padding:.15rem .45rem; border-radius:4px;
}
.video-info { padding:1rem 1.1rem 1.2rem; }
.video-category-badge {
  display:inline-block; margin-bottom:.5rem;
  font-family:var(--f-mono); font-weight:600;
  font-size:.85rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--orange);
}
.video-title {
  font-family:var(--f-display); font-weight:900;
  font-size:1rem; letter-spacing:1px; line-height:1.3;
  color:rgba(255,232,180,.92); margin-bottom:.4rem;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.video-desc-preview {
  font-size:.85rem; color:rgba(255,232,180,.45);
  line-height:1.55; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-bottom:.6rem;
}
.video-meta {
  font-family:var(--f-mono); font-size:.85rem;
  letter-spacing:1.5px; color:rgba(255,200,80,.35);
  text-transform:uppercase;
}


/* ── Video cards mobile fixes ── */
@media (hover: none) {
  /* Touch devices: always show a subtle play button */
  .video-thumb-overlay {
    opacity:1;
    background:rgba(0,0,0,.25);
  }
  .video-play-btn {
    width:44px; height:44px; font-size:1.1rem;
    opacity:.85;
  }
}
@media (max-width:500px) {
  .video-info { padding:.75rem .9rem 1rem; }
  .video-title { font-size:.92rem; }
  .video-desc-preview { font-size:.85rem; }
  .video-category-badge { font-size:.85rem; }
  #video-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Lightbox */
#vid-lightbox.open { display:flex !important; }


/* ── Video grid click reliability fix ── */
#video-grid { position: relative; z-index: 10; }
.video-card { position: relative; z-index: 10; cursor: pointer; -webkit-tap-highlight-color: rgba(255,150,0,.2); }
.video-card * { pointer-events: none !important; }
.video-card { pointer-events: auto !important; }
#page-videos .filter-row { position: relative; z-index: 10; }
#page-videos .filter-btn { pointer-events: auto !important; cursor: pointer; position: relative; z-index: 10; -webkit-tap-highlight-color: rgba(255,150,0,.2); }

/* ============================================================
   LOADING STATE
   ============================================================ */
body.loading .page-wrapper { visibility: hidden; }

/* ============================================================
   OVERFLOW GUARD
   ============================================================ */
html, body { overflow-x: hidden !important; }
.ticker-wrap { overflow: hidden !important; }

/* ============================================================
   PARTICLE ANIMATION
   ============================================================ */
@keyframes particleRise { to { transform: translateY(-110vh) rotate(360deg); opacity: 0; } }

/* ============================================================
   MOBILE HERO TITLE OVERFLOW FIX
   ============================================================ */
@media (max-width: 900px) {
  #pnai-tray { bottom: 85px !important; transition: bottom 0.3s ease; }
}

@media (max-width: 500px) {
  .hero-title {
    font-size: clamp(2.2rem, 14vw, 3.8rem) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }
  .hero-sub {
    font-size: 0.95rem !important;
    padding: 0 15px !important;
    margin-top: 0.8rem !important;
  }
  .hero { overflow: hidden !important; width: 100% !important; }
  .page { overflow-x: hidden !important; max-width: 100vw !important; }
  body { overflow-x: hidden !important; max-width: 100vw !important; }
}
@media (max-width: 380px) {
  .hero-title { font-size: clamp(1.7rem, 12vw, 2.8rem) !important; }
}

/* ============================================================
   SCROLLBAR & SELECTION
   ============================================================ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,.30); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--red),var(--gold)); border-radius:4px; }
::selection { background:rgba(255,150,0,.25); color:var(--gold); }

/* Fix: inner text span inside nav-logo should not inherit gradient clip */
.nav-logo > span {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: inherit !important;
  background-clip: unset !important;
  color: rgba(255, 232, 180, 0.92);
  font-size: 1.15rem;
  letter-spacing: 2px;
}
/* ============================================================
   SCROLL ANIMATIONS
   All animations use only transform + opacity (GPU composited).
   .sa = scroll-animate base; variants: up, left, right, scale, fade
   .sa-visible = triggered state (added by JS IntersectionObserver)
   Stagger delays: .sa-d1 … .sa-d5
   prefers-reduced-motion: all animations disabled.
   ============================================================ */

/* ── Base hidden state ── */
.sa         { opacity: 0; will-change: opacity, transform; }
.sa-up      { transform: translateY(32px); }
.sa-left    { transform: translateX(-36px); }
.sa-right   { transform: translateX(36px); }
.sa-scale   { transform: scale(.92); }
.sa-fade    { /* opacity only — no transform */ }

/* ── Visible (triggered) state ── */
.sa.sa-visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.23,1,.32,1),
              transform .55s cubic-bezier(.23,1,.32,1);
}

/* ── Stagger delays ── */
.sa-d1 { transition-delay: .08s; }
.sa-d2 { transition-delay: .16s; }
.sa-d3 { transition-delay: .24s; }
.sa-d4 { transition-delay: .32s; }
.sa-d5 { transition-delay: .40s; }

/* ── Fast variant (labels, eyebrows) ── */
.sa-fast.sa-visible {
  transition-duration: .38s;
}

/* ── Respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .sa { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Mobile: subtler distances ── */
@media (max-width: 600px) {
  .sa-up    { transform: translateY(20px); }
  .sa-left  { transform: translateX(-20px); }
  .sa-right { transform: translateX(20px); }
  .sa-scale { transform: scale(.95); }
}
/* ============================================================
   CROCOLYMPIC NOW BAR — Notification System Styles
   ── Append this block to the END of style.css ──
   ============================================================ */

/* ── Override bar positioning once it lives inside the tray ──
   Higher specificity (2 IDs) beats the injected #pnai-bar rule
   ─────────────────────────────────────────────────────────── */
#pnai-tray #pnai-bar {
  position: static;
  bottom: auto;
  left: auto;
  transform: none;
  z-index: auto;
}
#pnai-tray #pnai-bar:hover {
  transform: translateY(-2px);
}

/* ── Tray: holds pnai-bar + notif button side-by-side ── */
#pnai-tray {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: .65rem;
}
@media (max-width: 480px) {
  #pnai-tray { bottom: 8px; }
}

/* ── Notification button ── */
#pnai-notif-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 200, 50, 0.22);
  box-shadow: 0 8px 32px rgba(255, 100, 0, 0.18),
              inset 0 1px 0 rgba(255, 215, 0, 0.10);
  cursor: pointer;
  transition: all .35s cubic-bezier(.23,1,.32,1);
  animation: pnaiFloat 4s ease-in-out infinite;
  animation-delay: .55s;
  flex-shrink: 0;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255,150,0,.18);
}
#pnai-notif-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 160, 30, .35);
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(255, 102, 0, .25),
              inset 0 1px 0 rgba(255, 215, 0, .15);
}

/* Shared conic glow border (same as pnai-bar) */
#pnai-notif-btn::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 52px;
  background: var(--pnai-notif-conic,
    conic-gradient(from 0deg, #3B82F6, #22C55E, #FFD700, #EF4444, #3B82F6));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: -1;
  filter: blur(1px);
}
#pnai-notif-btn.glow-active::after { opacity: 1; }
#pnai-notif-btn.glow-active {
  box-shadow: 0 0 22px 2px rgba(59,130,246,.22),
              0 0 22px 2px rgba(34,197,94,.18),
              0 0 22px 2px rgba(255,215,0,.18),
              0 0 22px 2px rgba(239,68,68,.18),
              0 12px 40px rgba(0,0,0,.28);
}

/* Pulse when notifications are waiting */
#pnai-notif-btn.has-notifs {
  border-color: rgba(255, 140, 0, .40);
  animation: pnaiFloat 4s ease-in-out infinite,
             nowBarPulse 2.8s ease-in-out infinite;
  animation-delay: .55s, 0s;
}
@keyframes nowBarPulse {
  0%,100% { box-shadow: 0 8px 32px rgba(255,100,0,.18), inset 0 1px 0 rgba(255,215,0,.10); }
  50%      { box-shadow: 0 8px 32px rgba(255,120,0,.38),
                         0 0 20px rgba(255,150,0,.22),
                         inset 0 1px 0 rgba(255,215,0,.22); }
}

/* ── Badge (notification count circle) ── */
#pnai-notif-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50px;
  background: linear-gradient(135deg, #FF2200, #FF6600);
  color: #fff;
  font-family: var(--f-mono, monospace);
  font-size:.85rem;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a0a0a;
  box-shadow: 0 2px 8px rgba(255, 34, 0, .55);
  z-index: 1;
  pointer-events: none;
}
#pnai-notif-badge.visible {
  display: flex;
  animation: badgePop .38s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badgePop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  65%  { transform: scale(1.25) rotate(6deg); }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Notification panel (opens above the tray) ── */
#pnai-notif-panel {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(14px) scale(.96);
  transform-origin: bottom center;
  z-index: 9989;
  width: min(390px, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: .45rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease,
              transform .38s cubic-bezier(.23,1,.32,1);
}
#pnai-notif-panel.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: all;
}
@media (max-width: 480px) {
  #pnai-notif-panel { bottom: 72px; width: calc(100vw - 1.5rem); }
}

/* Panel header row */
#pnai-notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .85rem .22rem;
}
.pnai-notif-panel-label {
  font-family: var(--f-mono, monospace);
  font-size:.85rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(255, 200, 80, .38);
}
#pnai-notif-clear-all {
  font-family: var(--f-mono, monospace);
  font-size:.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 100, 0, .52);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color .2s;
}
#pnai-notif-clear-all:hover { color: rgba(255, 160, 0, .92); }

/* Empty state — also pill shaped */
.pnai-notif-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 200, 50, .10);
  color: rgba(255, 232, 180, .25);
  font-family: var(--f-mono, monospace);
  font-size:.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Notification card — PILL SHAPED ── */
.pnai-notif-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .78rem 1.1rem .78rem 1rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 200, 50, .22);
  box-shadow: 0 8px 32px rgba(255, 100, 0, .14),
              inset 0 1px 0 rgba(255, 215, 0, .08),
              inset 0 -1px 0 rgba(0,0,0,.22);
  color: rgba(255, 232, 180, .90);
  font-family: var(--f-body, sans-serif);
  font-size:.85rem;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: default;
  text-decoration: none;
  transition: all .28s cubic-bezier(.23,1,.32,1);
  position: relative;
  overflow: hidden;
  animation: notifCardIn .32s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes notifCardIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Clickable state */
a.pnai-notif-card,
.pnai-notif-card[data-clickable="true"] {
  cursor: pointer;
}
a.pnai-notif-card:hover,
.pnai-notif-card[data-clickable="true"]:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px) scale(1.008);
  border-color: rgba(255, 160, 30, .40);
  box-shadow: 0 14px 44px rgba(255, 100, 0, .22),
              inset 0 1px 0 rgba(255, 215, 0, .14);
}

/* Type-specific glassmorphism tints */
.pnai-notif-card[data-type="success"] {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.14),
              inset 0 1px 0 rgba(34, 197, 94, 0.12),
              inset 0 -1px 0 rgba(0,0,0,.22);
}
.pnai-notif-card[data-type="success"]:hover {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.50);
  box-shadow: 0 14px 44px rgba(34, 197, 94, 0.24),
              inset 0 1px 0 rgba(34, 197, 94, 0.18);
}

.pnai-notif-card[data-type="error"] {
  background: rgba(255, 34, 0, 0.10);
  border-color: rgba(255, 34, 0, 0.38);
  box-shadow: 0 8px 32px rgba(255, 34, 0, 0.16),
              inset 0 1px 0 rgba(255, 80, 40, 0.12),
              inset 0 -1px 0 rgba(0,0,0,.22);
}
.pnai-notif-card[data-type="error"]:hover {
  background: rgba(255, 34, 0, 0.16);
  border-color: rgba(255, 34, 0, 0.55);
  box-shadow: 0 14px 44px rgba(255, 34, 0, 0.26),
              inset 0 1px 0 rgba(255, 80, 40, 0.18);
}

.pnai-notif-card[data-type="mental-health"] {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.38);
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.14),
              inset 0 1px 0 rgba(99, 170, 255, 0.12),
              inset 0 -1px 0 rgba(0,0,0,.22);
}
.pnai-notif-card[data-type="mental-health"]:hover {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 14px 44px rgba(59, 130, 246, 0.24),
              inset 0 1px 0 rgba(99, 170, 255, 0.18);
}

.pnai-notif-card[data-type="game"] {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.38);
  box-shadow: 0 8px 32px rgba(255, 180, 0, 0.14),
              inset 0 1px 0 rgba(255, 215, 0, 0.12),
              inset 0 -1px 0 rgba(0,0,0,.22);
}
.pnai-notif-card[data-type="game"]:hover {
  background: rgba(255, 215, 0, 0.14);
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 14px 44px rgba(255, 180, 0, 0.24),
              inset 0 1px 0 rgba(255, 215, 0, 0.20);
}

.pnai-notif-card[data-type="info"] {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.32);
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12),
              inset 0 1px 0 rgba(99, 170, 255, 0.10),
              inset 0 -1px 0 rgba(0,0,0,.22);
}
.pnai-notif-card[data-type="info"]:hover {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.50);
  box-shadow: 0 14px 44px rgba(59, 130, 246, 0.22),
              inset 0 1px 0 rgba(99, 170, 255, 0.16);
}

.pnai-notif-card[data-type="warning"] {
  background: rgba(251, 191, 36, 0.09);
  border-color: rgba(251, 191, 36, 0.38);
  box-shadow: 0 8px 32px rgba(251, 160, 0, 0.14),
              inset 0 1px 0 rgba(255, 210, 60, 0.12),
              inset 0 -1px 0 rgba(0,0,0,.22);
}
.pnai-notif-card[data-type="warning"]:hover {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 14px 44px rgba(251, 160, 0, 0.24),
              inset 0 1px 0 rgba(255, 210, 60, 0.18);
}

/* Micro shimmer on the pill */
.pnai-notif-card::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(
    90deg, transparent,
    rgba(255,215,0,.06) 50%,
    transparent
  );
  transform: skewX(-15deg);
  pointer-events: none;
  animation: pillShimmer 6s ease-in-out infinite;
}
@keyframes pillShimmer {
  0%,60%,100% { left: -60%; opacity: 0; }
  50%         { left: 120%; opacity: 1; }
}

/* Card icon */
.pnai-notif-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255,150,0,.35));
}

/* Card text body */
.pnai-notif-body {
  flex: 1;
  min-width: 0;
}
.pnai-notif-type-label {
  font-family: var(--f-mono, monospace);
  font-size:.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 200, 80, .38);
  display: block;
  margin-bottom: .18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnai-notif-msg {
  font-size:.85rem;
  color: rgba(255, 232, 180, .88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Dismiss × button */
.pnai-notif-x {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 180, 30, .14);
  color: rgba(255, 200, 80, .40);
  font-size:.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
  line-height: 1;
  pointer-events: all;
}
.pnai-notif-x:hover {
  background: rgba(255, 60, 0, .18);
  color: #FFD700;
  border-color: rgba(255,100,0,.4);
}

/* Link arrow indicator */
.pnai-notif-link-arrow {
  font-size:.85rem;
  color: rgba(255, 200, 80, .30);
  flex-shrink: 0;
  line-height: 1;
}

/* Mobile tweaks */
@media (max-width: 680px) {
  /* Reverting small injected texts specifically for tablets down */
  *[style*="font-size:.85rem"], *[style*="font-size: .85rem"] {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  #pnai-notif-btn { width: 42px; height: 42px; }
  .pnai-notif-card { padding: .68rem .9rem; border-radius: 40px; font-size:.85rem; }
  .pnai-notif-msg  { font-size:.85rem; }
  
  /* Shrinking even further for tight mobile spacing */
  *[style*="font-size:.85rem"], *[style*="font-size: .85rem"] {
    font-size: 0.65rem !important;
  }
}

/* ────────────────────────────────────────────────────────────
   PINAYAI MESSAGE HELPER (Contact Form)
   ──────────────────────────────────────────────────────────── */
.message-ai-wrapper {
  position: relative;
}
.pnai-msg-helper {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FF6600 !important;
  border: 2px solid white !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.23,1,.32,1);
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.6);
  opacity: 1 !important;
  pointer-events: all !important;
  transform: scale(1);
  z-index: 1000 !important;
}
.pnai-msg-helper:hover {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.6);
  transform: scale(1.1);
}
.pnai-msg-helper .orb {
  font-size: 1.15rem;
  line-height: 1;
}

/* Glowing animation */
@keyframes pnaiGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 120, 0, 0.3); border-color: rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 18px rgba(255, 180, 30, 0.7); border-color: var(--gold); }
}
.pnai-msg-helper.glowing {
  animation: pnaiGlow 2.5s ease-in-out infinite;
}

/* AI Menu */
.pnai-ai-menu {
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 180px;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  animation: pnaiMenuFade 0.3s ease;
}
@keyframes pnaiMenuFade {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.pnai-ai-menu.active {
  display: flex;
}
.pnai-ai-menu-item {
  padding: 10px 15px;
  color: rgba(255, 232, 180, 0.8);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s;
}
.pnai-ai-menu-item:last-child {
  border-bottom: none;
}
.pnai-ai-menu-item:hover {
  background: rgba(255, 215, 0, 0.1);
  color: var(--gold);
}
.pnai-ai-menu-header {
  padding: 8px 15px;
  background: rgba(255, 102, 0, 0.1);
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

/* Loading state */
.pnai-msg-helper.loading .orb {
  animation: pnaiSpin 1.5s linear infinite;
}
@keyframes pnaiSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================
   MOBILE-ONLY UI/UX OVERHAUL (20 Enhancements)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 1. Bottom Nav Active State */
  .mbb-item.active .mbb-icon {
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
    transform: scale(1.15);
  }
  .mbb-item.active .mbb-label {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
  }

  /* 2. Top Nav Opaque Scroll */
  .navbar.scrolled {
    background: rgba(5, 2, 0, 0.94) !important;
    border-bottom-color: rgba(255, 180, 30, 0.3);
  }

  /* 4. Section Spacing */
  .section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* 5. Card Border Radius Overhaul */
  .glass, .card, .player-card, .division-card, .quick-link-card {
    border-radius: 24px !important;
  }

  /* 7. Hero Title Refinement */
  .hero-title {
    line-height: 1.0 !important;
    letter-spacing: -0.5px !important;
  }

  /* 8. Taller Search Bar */
  .search-bar-large {
    height: 54px;
  }

  /* 10. Mobile Menu Blur Intensity */
  .mobile-menu {
    backdrop-filter: blur(32px) saturate(200%) !important;
    background: rgba(10, 5, 0, 0.98) !important;
  }

  /* 11. Button Touch Feedback */
  .btn:active, .mbb-item:active, .filter-btn:active, .tab-btn:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease;
  }

  /* 12. Content Area Consistency */
  .content-area {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* 13. Staggered Page Entry Animation */
  .page.active {
    animation: mobilePageIn 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  }
  @keyframes mobilePageIn {
    from { opacity: 0; transform: translateY(15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* 15. Status Badge Contrast */
  .badge {
    background: rgba(0, 0, 0, 0.4) !important;
    font-weight: 800 !important;
  }

  /* 17. Background Orb Scaling */
  .orb-1 { width: 300px !important; height: 300px !important; }
  .orb-2 { width: 250px !important; height: 250px !important; }

  /* 18. Footer Tap Targets */
  .footer-links li {
    margin-bottom: 1rem !important;
  }

  /* 19. Form Input Focus Glow */
  .form-input:focus {
    box-shadow: 0 0 25px rgba(255, 180, 0, 0.3) !important;
  }


   /* ── Reposition and miniaturize Editor FAB on mobile ── */
   #ed-fab {
     bottom: 85px !important;
     right: 15px !important;
     width: 40px !important;
     height: 40px !important;
     font-size: 1rem !important;
     z-index: 10002 !important;
     box-shadow: 0 4px 12px rgba(255, 60, 0, 0.4) !important;
   }
 }
 
 @media (max-width: 480px) {
   /* 9. Table Cell Padding Refinement */
   .glass-table td, .glass-table th {
     padding: 0.6rem 0.5rem !important;
   }
   
   /* 16. Tab Row Scroll Fade */
   .section-tabs, .filter-row {
     mask-image: linear-gradient(to right, black 85%, transparent 100%);
     -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
   }

   #ed-fab {
     bottom: 85px !important;
     right: 10px !important;
     width: 32px !important;
     height: 32px !important;
     font-size: 0.8rem !important;
   }
 }


/* -- Mobile Navigation Overhaul (AI Assistance & Notifications) -- */
@media (max-width: 900px) {
  /* Hide standard floating elements */
  #pnai-tray { display: none !important; }
  #pnai-msg-helper { display: none !important; }
  #pnai-bar { display: none !important; }

  /* Notification button in navbar */
  #pnai-notif-btn.in-nav {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    animation: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 200, 50, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 1000 !important;
  }

  #pnai-notif-btn.in-nav::after { display: none !important; }
  
  #pnai-notif-btn.in-nav.has-notifs {
    border-color: rgba(255, 120, 0, 0.5) !important;
    background: rgba(255, 80, 0, 0.12) !important;
  }

  /* Notification panel placement from top on mobile */
  #pnai-notif-panel.in-nav {
    position: fixed !important;
    top: 72px !important; /* Navbar height approx */
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-10px) scale(0.95) !important;
    transform-origin: top center !important;
    width: min(390px, calc(100vw - 24px)) !important;
    z-index: 10001 !important;
  }

  #pnai-notif-panel.in-nav.open {
    transform: translateX(-50%) translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }
  
  /* Ensure chat window opens over everything */
  #pnai-window {
    z-index: 10100 !important;
  }
}

/* -- Light Mode (BETA) & Editor Toggle -- */
.ed-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.2rem;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 200, 50, 0.1);
}
.ed-toggle-label {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: rgba(255, 200, 80, 0.6);
}
/* General switch style */
.ed-switch { position: relative; display: inline-block; width: 44px; height: 22px; }
.ed-switch input { opacity: 0; width: 0; height: 0; }
.ed-slider {
  position: absolute; cursor: pointer; inset: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transition: .4s; border-radius: 34px;
  border: 1px solid rgba(255, 200, 50, 0.2);
}
.ed-slider:before {
  position: absolute; content: ""; height: 14px; width: 14px;
  left: 3px; bottom: 3px; background-color: #f0e8d0;
  transition: .4s; border-radius: 50%;
}
input:checked + .ed-slider { background-color: var(--orange); border-color: var(--gold); }
input:checked + .ed-slider:before { transform: translateX(22px); background-color: #fff; }

/* -- Light Mode Theme -- */
body.light-mode {
  --red:    #991300;
  --orange: #B33600;
  --gold:   #8A6500;
  --dark:   #fdfdfc;
  --dark2:  #f5f5f2;
  --g-bg:      rgba(255, 255, 255, 0.45);
  --g-border:  rgba(255, 102, 0,  0.22);
  --g-shadow:  0 8px 32px rgba(230, 81, 0, 0.12);
  --g-hover:   rgba(255, 240, 200, 0.6);
  --g-inner-glow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  
  background: #fdfdfc !important;
  color: #000000 !important;
}

body.light-mode .glass, 
body.light-mode .card,
body.light-mode .section-card,
body.light-mode .navbar,
body.light-mode .mobile-bottom-bar,
body.light-mode .footer,
body.light-mode .mbb-item,
body.light-mode .pnai-bubble {
    background: rgba(225, 235, 248, 0.65) !important;
    backdrop-filter: blur(35px) saturate(240%) contrast(90%) brightness(110%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(240%) contrast(90%) brightness(110%) !important;
    box-shadow: 0 16px 48px rgba(153, 19, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 0 rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #000000 !important;
}

body.light-mode .hero-sub, 
body.light-mode .hero-eyebrow,
body.light-mode .section-label,
body.light-mode .footer-desc,
body.light-mode .ticker-item,
body.light-mode .quick-link-sub,
body.light-mode .footer-links a,
body.light-mode .pnai-notif-panel-label {
    color: #000000 !important;
}

body.light-mode .hero-title,
body.light-mode .section-title,
body.light-mode .card-title,
body.light-mode h1, body.light-mode h2, body.light-mode h3,
body.light-mode .navbar .tab {
    color: #000000 !important;
}

body.light-mode .navbar .tab.active {
    color: var(--red) !important;
    font-weight: 800 !important;
}

body.light-mode .mbb-label { color: #000000 !important; }

body.light-mode #croc-loader {
    background: #fdfdfc !important;
}

body.light-mode .cl-title {
    color: var(--red) !important;
}

body.light-mode .pnai-bubble {
    color: #000000 !important;
    border: 1px solid rgba(230, 81, 0, 0.3) !important;
}

body.light-mode .pnai-input-wrap {
    background: rgba(0,0,0,0.08) !important;
    border-color: rgba(0,0,0,0.2) !important;
}

body.light-mode #pnai-input {
    color: #000000 !important;
}

body.light-mode .nav-inner {
    border-bottom: 1px solid rgba(230, 81, 0, 0.3) !important;
}

/* ── Light-mode: Green text → Dark Green ── */
body.light-mode .text-success,
body.light-mode .text-green,
body.light-mode [style*="color: rgb(34, 197, 94)"],
body.light-mode [style*="color:#22C55E"],
body.light-mode [style*="color:#22c55e"],
body.light-mode [style*="color: rgb(74, 222, 128)"],
body.light-mode [style*="color:#4ade80"],
body.light-mode [style*="color:#16a34a"],
body.light-mode [style*="color: rgb(22, 163, 98)"],
body.light-mode [style*="color:green"] { color: #166534 !important; }

/* ── Light-mode: Yellow / Gold text → Dark Orange ── */
body.light-mode .text-warning,
body.light-mode .text-yellow,
body.light-mode .text-gold,
body.light-mode [style*="color: rgb(255, 180, 30)"],
body.light-mode [style*="color:#FFB41E"],
body.light-mode [style*="color:#ffb41e"],
body.light-mode [style*="color: rgb(255, 215, 0)"],
body.light-mode [style*="color:#FFD700"],
body.light-mode [style*="color:#ffd700"],
body.light-mode [style*="color:rgba(255,200,80"],
body.light-mode [style*="color:rgba(255,180,30"],
body.light-mode [style*="color:rgba(255,150,0"],
body.light-mode [style*="color: rgba(255, 200, 80"],
body.light-mode [style*="color: rgba(255, 180, 30"],
body.light-mode [style*="color: rgba(255, 150, 0"],
body.light-mode [style*="color:var(--gold)"] { color: var(--orange) !important; }

body.light-mode .badge-gold { background: var(--orange) !important; color: #fff !important; }

/* ── Light-mode: White / Cream text → Black ── */
body.light-mode [style*="color:rgba(255,232,180"],
body.light-mode [style*="color:rgba(255, 232, 180"],
body.light-mode [style*="color:#f0e8d0"],
body.light-mode [style*="color: #f0e8d0"],
body.light-mode [style*="color:rgba(255,255,255"],
body.light-mode [style*="color:rgba(255, 255, 255"],
body.light-mode [style*="color:white"],
body.light-mode [style*="color: white"] { color: #000000 !important; }

/* ── Fully Optimize Light Mode Texts and Borders ── */
body.light-mode .card-text,
body.light-mode .stat-label,
body.light-mode .stat-lbl,
body.light-mode .stat-holder,
body.light-mode .bar-label,
body.light-mode .timeline-desc,
body.light-mode .team-role,
body.light-mode .contact-info-value,
body.light-mode .division-name,
body.light-mode .division-desc,
body.light-mode .youth-feature-title,
body.light-mode .youth-feature-desc,
body.light-mode .news-title,
body.light-mode .news-excerpt,
body.light-mode .news-list-title,
body.light-mode .news-list-date,
body.light-mode .stream-player-sub,
body.light-mode .upcoming-title,
body.light-mode .upcoming-time,
body.light-mode .podium-name,
body.light-mode .podium-score,
body.light-mode .glass-table td,
body.light-mode .glass-table th,
body.light-mode .form-input,
body.light-mode .form-textarea,
body.light-mode .search-bar-large input,
body.light-mode .nav-links a,
body.light-mode .nav-logo > span,
body.light-mode .mobile-menu a,
body.light-mode .quick-link-title,
body.light-mode .filter-btn, 
body.light-mode .ranking-tab, 
body.light-mode .stats-cat-btn,
body.light-mode .video-title,
body.light-mode .video-desc-preview,
body.light-mode .video-meta,
body.light-mode .cl-sub,
body.light-mode .cl-bar-pct,
body.light-mode .cl-status,
body.light-mode .cl-offline-sub,
body.light-mode .cl-slow-msg,
body.light-mode .pnai-notif-msg,
body.light-mode .player-name,
body.light-mode .tab-btn {
    color: #000000 !important;
}

body.light-mode .form-input::placeholder, 
body.light-mode .form-textarea::placeholder, 
body.light-mode .search-bar-large input::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}

body.light-mode .card-title,
body.light-mode .stat-number,
body.light-mode .team-name,
body.light-mode .timeline-title,
body.light-mode .contact-info-label,
body.light-mode .division-age,
body.light-mode .player-stat-val,
body.light-mode .player-team,
body.light-mode .youth-feature-title,
body.light-mode .news-title {
    color: #000 !important;
}

/* Ensure secondary borders and color accents pop on white */
body.light-mode .glass-table th,
body.light-mode .glass-table td,
body.light-mode .news-list-item,
body.light-mode .upcoming-stream,
body.light-mode .youth-feature,
body.light-mode .contact-info-item,
body.light-mode .nav-dropdown-menu a {
    border-color: rgba(230, 81, 0, 0.3) !important;
}

body.light-mode .badge-dark {
    background: rgba(0,0,0,0.06) !important; 
    color: #333 !important; 
    border-color: rgba(0,0,0,0.15) !important;
}

body.light-mode .section-tabs {
    border-bottom-color: rgba(230, 81, 0, 0.3) !important;
}



/* ── EXTRACTED FROM index.html ── */
/* ── Loader shell ── */
    #croc-loader {
      position:fixed; inset:0; z-index:99999;
      background:#0a0600;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      padding:1.5rem;
      transition:opacity .6s ease, visibility .6s ease;
    }
    #croc-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }

    /* ── Orbs ── */
    .cl-orb { position:absolute; border-radius:50%; pointer-events:none; animation:clOrb 6s ease-in-out infinite alternate; }
    .cl-orb1 { width:320px; height:320px; background:radial-gradient(rgba(255,120,0,.12),transparent 70%); top:-70px; left:-90px; animation-delay:0s; }
    .cl-orb2 { width:260px; height:260px; background:radial-gradient(rgba(255,215,0,.09),transparent 70%); bottom:-50px; right:-60px; animation-delay:-3s; }
    @keyframes clOrb { 0%{transform:scale(1) translate(0,0)} 100%{transform:scale(1.2) translate(20px,-20px)} }

    /* ── Croc + title (always visible) ── */
    .cl-croc {
      font-size:clamp(3rem,10vw,4rem); margin-bottom:1rem;
      animation:crocSpin 1.8s ease-in-out infinite; display:block;
      filter:drop-shadow(0 0 24px rgba(255,180,30,.6));
    }
    @keyframes crocSpin {
      0%  { transform:rotate(-12deg) scale(1);   }
      25% { transform:rotate(0deg)  scale(1.15); }
      50% { transform:rotate(12deg) scale(1);    }
      75% { transform:rotate(0deg)  scale(1.1);  }
      100%{ transform:rotate(-12deg) scale(1);   }
    }
    /* No-internet state: croc swaps to glove-x */
    #croc-loader.cl-offline .cl-croc::after { content:'🧤❌'; }
    #croc-loader.cl-offline .cl-croc-inner { display:none; }
    #croc-loader.cl-offline .cl-croc { animation:none; filter:none; }

    .cl-title {
      font-family:var(--f-display); font-weight:900;
      font-size:clamp(1.4rem,5vw,2.2rem);
      letter-spacing:8px; color:var(--gold);
      text-shadow:0 0 40px rgba(255,215,0,.5);
      margin-bottom:.3rem;
      animation:clPulse 1.4s ease-in-out infinite;
    }
    @keyframes clPulse { 0%,100%{opacity:.85} 50%{opacity:1;text-shadow:0 0 60px rgba(255,215,0,.8)} }

    .cl-sub {
      font-size:.85rem; letter-spacing:5px; color:rgba(255,200,80,.38);
      font-family:monospace; margin-bottom:1.8rem;
      animation:clFade 1.4s ease-in-out infinite alternate;
    }
    @keyframes clFade { from{opacity:.3} to{opacity:.7} }

    /* ── Progress bar ── */
    .cl-bar-wrap {
      width:min(300px,75vw); height:4px;
      background:rgba(255,200,80,.10); border-radius:99px; overflow:hidden;
      margin-bottom:.9rem; position:relative;
    }
    .cl-bar {
      height:100%; width:0%;
      background:linear-gradient(90deg,#FF6600,#FFD700);
      border-radius:99px;
      box-shadow:0 0 12px rgba(255,180,30,.6);
      transition:width .35s cubic-bezier(.23,1,.32,1);
    }
    .cl-bar-pct {
      font-family:monospace; font-size:.85rem; letter-spacing:2px;
      color:rgba(255,200,80,.40); text-align:right;
      width:min(300px,75vw); margin-bottom:.8rem;
    }

    /* ── Status text ── */
    .cl-status {
      font-family:monospace; font-size:.85rem; letter-spacing:3px;
      color:rgba(255,200,80,.40); height:1.4em; overflow:hidden;
      margin-bottom:.3rem; text-align:center;
      transition:opacity .25s;
    }

    /* ── Offline panel ── */
    #cl-offline-panel {
      display:none; text-align:center; margin-top:.8rem;
      animation:clFadeIn .4s ease;
    }
    #croc-loader.cl-offline #cl-offline-panel { display:block; }
    #croc-loader.cl-offline .cl-normal-ui { display:none; }
    .cl-offline-title {
      font-family:var(--f-display); font-weight:900;
      font-size:clamp(1.1rem,4vw,1.5rem); letter-spacing:2px;
      color:var(--red); margin-bottom:.5rem;
    }
    .cl-offline-sub {
      font-family:monospace; font-size:.85rem; letter-spacing:2px;
      color:rgba(255,232,180,.45); line-height:1.7; margin-bottom:1.2rem;
    }

    /* ── Slow-load warning ── */
    #cl-slow-panel {
      display:none; text-align:center; margin-top:1rem;
      border-top:1px solid rgba(255,180,30,.12); padding-top:1rem;
      animation:clFadeIn .5s ease;
      width:min(320px,85vw);
    }
    #cl-slow-panel.visible { display:block; }
    .cl-slow-msg {
      font-family:monospace; font-size:.85rem; letter-spacing:2px;
      color:rgba(255,180,50,.50); line-height:1.7; margin-bottom:.8rem;
    }

    /* ── Shared button style ── */
    .cl-btn {
      display:inline-block; padding:.62rem 1.4rem; border-radius:50px;
      font-family:monospace; font-size:.85rem; letter-spacing:2px; text-transform:uppercase;
      cursor:pointer; border:none; transition:all .25s ease;
    }
    .cl-btn-primary {
      background:linear-gradient(135deg,#FF6600,#FFD700);
      color:#000; box-shadow:0 4px 20px rgba(255,100,0,.35);
    }
    .cl-btn-primary:hover { filter:brightness(1.12); transform:translateY(-2px); }
    .cl-btn-glass {
      background:rgba(255,255,255,.05); color:var(--gold);
      border:1px solid rgba(255,215,0,.30);
    }
    .cl-btn-glass:hover { background:rgba(255,215,0,.10); transform:translateY(-2px); }

    @keyframes clFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── Enhanced Match Simulator UI ── */
.sim-wrap2 {
  padding: 1.5rem 1rem 4rem;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
  touch-action: auto; /* Changed from pan-y to allow more natural browser scroll detection */
}
.sim-wrap2::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 20% 40%, rgba(255, 100, 0, 0.12), transparent),
              radial-gradient(ellipse 50% 45% at 80% 60%, rgba(255, 215, 0, 0.08), transparent);
  z-index: 0;
}
/* Only animate orbs on desktop to save mobile CPU/GPU during scroll */
@media (min-width: 901px) {
  .sim-wrap2::before {
    animation: sOrbs 10s ease-in-out infinite alternate;
  }
}
@keyframes sOrbs { 0% { opacity: 0.4; transform: scale(1); } 100% { opacity: 0.8; transform: scale(1.1); } }
.sim-wrap2 > * { position: relative; z-index: 1; }

/* Roster: Now wraps properly and uses better spacing */
.sim-roster2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.spc {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 180, 30, 0.18);
  border-radius: 16px;
  padding: 0.8rem 0.4rem;
  text-align: center;
  cursor: grab;
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  user-select: none;
}
.spc:hover {
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px rgba(255, 100, 0, 0.25);
}
.spc.sdragging { opacity: 0.3; transform: scale(0.9); }
.spc.sused { opacity: 0.2; pointer-events: none; filter: grayscale(1); }
.spc.sselected { border-color: var(--gold); background: rgba(255, 215, 0, 0.12); box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }

.spc img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 215, 0, 0.4);
  display: block;
  margin: 0 auto 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.spc-name { font-size: 0.85rem; font-weight: 800; color: rgba(255, 232, 180, 0.95); line-height: 1.1; letter-spacing: 0.5px; }
.spc-name span { opacity: 0.5; font-weight: 400; font-size: 0.75rem; }
.spc-elo { font-size: 0.8rem; color: var(--gold); font-family: var(--f-mono); margin-top: 0.3rem; opacity: 0.7; }

/* Arena: Better mobile structure */
.sim-arena2 {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 1.2rem;
  margin-bottom: 2rem;
  align-items: center;
  position: relative;
}
.sslot {
  border-radius: 20px;
  border: 2px dashed rgba(255, 180, 30, 0.25);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  transition: all 0.4s cubic-bezier(.23, 1, .32, 1);
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}
.sslot.shover { border-color: var(--gold); background: rgba(255, 215, 0, 0.08); border-style: solid; }
.sslot.staptarget { border-color: rgba(255, 215, 0, 0.5); animation: slotPulse 1.5s infinite; }
@keyframes slotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.sslot.sfilled { border-style: solid; border-color: rgba(255, 180, 30, 0.45); background: rgba(255, 255, 255, 0.05); }
.sslot-lbl { font-size: 0.75rem; letter-spacing: 3px; color: rgba(255, 200, 80, 0.4); font-family: var(--f-mono); margin-bottom: 0.8rem; text-transform: uppercase; }
.sslot-empty-ic { font-size: 2.2rem; opacity: 0.15; filter: grayscale(1); }
.sslot-empty-tx { font-size: 0.8rem; color: rgba(255, 232, 180, 0.2); letter-spacing: 2px; margin-top: 0.5rem; text-align: center; font-weight: 700; }

.sslot-filled-content { text-align: center; width: 100%; animation: contentPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes contentPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.sslot-filled-content img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  display: block;
  margin: 0 auto 0.8rem;
  box-shadow: 0 8px 25px rgba(255, 150, 0, 0.4);
}
.sslot-pname { font-family: var(--f-display); font-weight: 900; font-size: 1rem; color: #fff; letter-spacing: 1px; margin-bottom: 0.2rem; }
.sslot-pbadge { font-size: 0.8rem; letter-spacing: 2px; color: var(--orange); font-family: var(--f-mono); font-weight: 700; }
.sslot-pelo { font-family: var(--f-display); font-weight: 900; font-size: 1.2rem; color: var(--gold); margin-top: 0.4rem; text-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }

.srm {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255, 50, 50, 0.2);
  border: 1px solid rgba(255, 50, 50, 0.3);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: #fff;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
}
.srm:hover { background: rgba(255, 50, 50, 0.5); transform: scale(1.1); }

.svstxt { font-family: var(--f-display); font-weight: 900; font-size: 2.2rem; color: var(--gold); letter-spacing: 4px; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }

/* Simulate Button */
.sgo {
  width: 100%;
  padding: 1.2rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #FF3300, #FF6600, #FFD700);
  background-size: 200% auto;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 5px;
  color: #000;
  box-shadow: 0 8px 30px rgba(255, 60, 0, 0.4);
  margin-bottom: 2.5rem;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  animation: sgoShimmer 4s linear infinite;
}
@keyframes sgoShimmer { 0%{background-position:0% center} 100%{background-position:200% center} }
.sgo:hover:not([disabled]) { transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 45px rgba(255, 100, 0, 0.6); filter: brightness(1.1); }
.sgo:active:not([disabled]) { transform: translateY(-1px) scale(0.98); transition-duration:0.1s; }
.sgo[disabled] { opacity: 0.2; cursor: not-allowed; transform: none !important; box-shadow: none !important; filter: grayscale(1); }

/* Results Section */
.sresult {
  display: none;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 30px;
  padding: 3rem 1.8rem;
  margin-top: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  animation: resultSlideIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes resultSlideIn {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sresult.sshow { display: block; }

.swname { font-size: 2.4rem; margin: 0.5rem 0; text-shadow: 0 0 30px rgba(255, 215, 0, 0.6); font-weight: 900; background: var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip: text; }
.sscbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  border-radius: 32px;
  margin: 1.8rem 0;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 215, 0, 0.15);
  overflow: hidden;
  position: relative;
}
.sscl, .sscr {
  flex: 1;
  font-size: 1.8rem;
  font-family: var(--f-display);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
}
.sscl { color: var(--gold); border-right: 1px solid rgba(255, 215, 0, 0.15); justify-content: flex-start; }
.sscr { color: var(--orange); justify-content: flex-end; }
.sscl .swrd, .sscr .swrd { font-size: 1.6rem; filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.5)); }

.sfsc-num { font-family: var(--f-display); font-weight: 900; font-size: 4rem; line-height: 1; text-shadow: 0 0 40px rgba(255, 150, 0, 0.5); }
.sfsc-name { font-family: var(--f-mono); font-size: 0.9rem; letter-spacing: 4px; color: rgba(255, 232, 180, 0.4); margin-bottom: 0.6rem; text-transform: uppercase; }

.sround {
  padding: 1rem 1.25rem;
  border-radius: 16px;
  margin-bottom: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease;
}
.sround:hover { transform: scale(1.01); background: rgba(255, 255, 255, 0.08); }
.srattr { font-size: 0.75rem; opacity: 0.6; }
.srv { font-size: 1.1rem; }

.sverdict {
  background: rgba(255, 100, 0, 0.06);
  border: 1px solid rgba(255, 100, 0, 0.2);
  padding: 1.5rem;
  border-radius: 20px;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 2rem 0;
  font-style: italic;
  color: rgba(255, 232, 180, 0.8);
}

.sreset {
  width: 100%;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 14px;
  color: var(--gold);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.23, 1, .32, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.sreset:hover { background: rgba(255, 215, 0, 0.1); transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 8px 24px rgba(255, 180, 0, 0.15); }
.sreset:active { transform: translateY(0); }

/* Simulation Animations */
.sim-playing .sslot.sfilled {
  animation: slotBattle 0.6s ease-in-out infinite alternate;
}
@keyframes slotBattle {
  from { transform: translateX(-4px) rotate(-1deg); filter: brightness(1.1); }
  to { transform: translateX(4px) rotate(1deg); filter: brightness(1.3); }
}
.sim-playing .svstxt {
  animation: vsPulse 0.4s ease-in-out infinite alternate;
}
@keyframes vsPulse {
  from { transform: scale(1); filter: drop-shadow(0 0 10px var(--gold)); }
  to { transform: scale(1.3); filter: drop-shadow(0 0 30px var(--orange)); }
}

/* Fireworks Canvas */
#sfw {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  pointer-events: none;
  display: none;
}

/* ── MOBILE OPTIMIZATIONS ── */
@media (max-width: 768px) {
  .sim-roster2 { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .sim-arena2 { 
    grid-template-columns: 1fr 1fr; 
    gap: 0.6rem; 
    align-items: stretch;
    margin-top: 1rem;
  }
  .svscol { 
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
    background: rgba(10, 5, 0, 0.6);
    padding: 0.5rem;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 215, 0, 0.2);
  }
  .svsline { display: none; }
  .svstxt { font-size: 1.2rem; filter: drop-shadow(0 0 10px rgba(0,0,0,0.8)); }
  .sslot { min-height: 140px; padding: 1rem 0.6rem; border-radius: 16px; width: 100%; }
  .sslot-lbl { font-size: 0.6rem; letter-spacing: 1.5px; margin-bottom: 0.5rem; }
  .sslot-empty-ic { font-size: 1.6rem; }
  .sslot-empty-tx { font-size: 0.65rem; }
  .sslot-filled-content img { width: 48px; height: 48px; border-width: 2px; margin-bottom: 0.4rem; }
  .sslot-pname { font-size: 0.85rem; line-height: 1; }
  .sslot-pbadge { font-size: 0.7rem; letter-spacing: 1px; }
  .sslot-pelo { font-size: 1rem; margin-top: 0.2rem; }
  .srm { top: 0.4rem; right: 0.4rem; width: 20px; height: 20px; font-size: 0.7rem; }
}

@media (max-width: 480px) {
  .sim-wrap2 { padding: 1rem 0.5rem 4rem; }
  .sim-roster2 { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .spc { padding: 0.7rem 0.3rem; border-radius: 12px; }
  .spc img { width: 36px; height: 36px; }
  .spc-name { font-size: 0.8rem; }
  
  .sresult { padding: 2rem 1rem; border-radius: 24px; }
  .swname { font-size: 1.8rem; }
  .sscbar { height: 50px; border-radius: 25px; }
  .sscl, .sscr { font-size: 1.2rem; padding: 0 1.2rem; gap: 0.5rem; }
  .sscl .swrd, .sscr .swrd { font-size: 1.2rem; }
  
  .sfsc-num { font-size: 2.8rem; }
  .sround { padding: 0.6rem 0.8rem; border-radius: 12px; }
  .srv { font-size: 0.95rem; }
  .srattr { font-size: 0.7rem; letter-spacing: 1px; }
}

/* ── LIQUID PROGRESS BAR SHIMMER ── */
.bar-fill, .cl-bar {
  position: relative;
  overflow: hidden;
}
.bar-fill::after, .cl-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  animation: liquidWave 2.5s infinite linear;
}
@keyframes liquidWave {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* ── Site Translation & Language Selection ── */
#ed-lang-select {
  background: #111;
  color: #fff;
  border: 1px solid rgba(255, 200, 80, 0.3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#ed-lang-select:focus {
  border-color: #FFD700;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
body.light-mode #ed-lang-select {
  background: #fff;
  color: #000;
  border-color: #ccc;
}
/* Ensure site elements support word breaking and wrapping for longer languages */
.navbar, .nav-inner, .footer, .stats-bar, .hero-cta, .filter-row, .section-tabs {
  flex-wrap: wrap !important;
}
.nav-links {
  flex-wrap: wrap !important;
}
.player-card, .quick-link-card, .score-card {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ── Language Specific Font Scaling & Formatting Fixes ── */
html[lang="tl"], body[data-lang="tl"] {
  font-size: 0.94em;
}

/* Tagalog text sizing & overflow prevention */
html[lang="tl"] .nav-links a,
body[data-lang="tl"] .nav-links a {
  font-size: 0.82rem !important;
  letter-spacing: 0.5px !important;
  padding: 0.4rem 0.5rem !important;
}

html[lang="tl"] .hero-title,
body[data-lang="tl"] .hero-title {
  font-size: clamp(1.6rem, 6.5vw, 6rem) !important;
  letter-spacing: 1px !important;
}

html[lang="tl"] .section-title,
html[lang="tl"] .page-banner-title,
body[data-lang="tl"] .section-title,
body[data-lang="tl"] .page-banner-title {
  font-size: clamp(1.3rem, 4vw, 2.5rem) !important;
  letter-spacing: 1px !important;
}

html[lang="tl"] .btn,
html[lang="tl"] .card-title,
html[lang="tl"] .quick-link-title,
body[data-lang="tl"] .btn,
body[data-lang="tl"] .card-title,
body[data-lang="tl"] .quick-link-title {
  font-size: 0.85em !important;
  letter-spacing: 0.5px !important;
}

html[lang="tl"] .badge,
body[data-lang="tl"] .badge {
  font-size: 0.75em !important;
  letter-spacing: 0.5px !important;
  white-space: normal !important;
}

html[lang="tl"] .ticker-item,
body[data-lang="tl"] .ticker-item {
  font-size: 0.85rem !important;
  letter-spacing: 1px !important;
}

/* French & Spanish scaling */
html[lang="fr"] .nav-links a, html[lang="es"] .nav-links a,
body[data-lang="fr"] .nav-links a, body[data-lang="es"] .nav-links a {
  font-size: 0.88rem !important;
  letter-spacing: 0.5px !important;
}