/* ==========================================================================
   THE BALLGROUND — NEON GLASS FINISH (FULL SYSTEM + FIXES)
   ========================================================================== */

:root {
  color-scheme: dark;
  --tbg-bg: #030A08;
  --tbg-bg-blur:
    radial-gradient(ellipse at 12% 0%, rgba(24, 205, 115, .13), transparent 32%),
    radial-gradient(ellipse at 88% 18%, rgba(0, 120, 78, .16), transparent 34%),
    radial-gradient(ellipse at 50% 100%, rgba(11, 68, 45, .12), transparent 42%),
    #030A08;
  --tbg-surface: #0A1712;
  --tbg-surface-hover: #10251A;
  --tbg-green: #21F28B;
  --tbg-yellow: #61FFB1;
  --tbg-text: #F1FFF7;
  --tbg-text-muted: #9AB5A6;
  --tbg-border: rgba(139, 255, 190, .16);
  --neon-green: #21F28B;
  --neon-mint: #79FFC0;
  --bg-glass: rgba(7, 22, 15, .78);
  --bg-card: linear-gradient(145deg, #10251A 0%, #09140F 72%);
  --tbg-shadow-hover: 0 18px 44px rgba(0, 0, 0, .48), 0 0 0 1px rgba(50, 255, 151, .16);
}

/* 1. PAGE ATMOSPHERE */
html, body { background-color: var(--tbg-bg); color: var(--tbg-text); }
body { background-image: var(--tbg-bg-blur); background-attachment: fixed; }
::selection { background: rgba(33, 242, 139, .34); color: #fff; }
:focus-visible { outline: 2px solid var(--neon-mint); outline-offset: 3px; }

/* 2. GLASS NAVIGATION */
.header, header { background: var(--bg-glass); border-bottom: 1px solid rgba(121, 255, 192, .14); backdrop-filter: blur(20px) saturate(145%); }
.nav-link.active { color: var(--neon-mint) !important; background: linear-gradient(135deg, rgba(33, 242, 139, .15), rgba(33, 242, 139, .045)) !important; }

/* 3. SHARED GLASS CARDS */
.card, .composer-card, .discover-col-left, .sidebar-card, .article-card, .competition-card, .match-card, .post-card, .ad-card {
  color: var(--tbg-text) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--tbg-border) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  position: relative;
}

/* 4. NEON BUTTONS */
.btn-primary, .btn-gold, .ad-btn {
  background: linear-gradient(135deg, #79FFC0 0%, #21F28B 52%, #10C875 100%) !important;
  color: #03150B !important;
  border: 1px solid rgba(174, 255, 213, .72) !important;
  box-shadow: 0 6px 20px rgba(33, 242, 139, .19) !important;
}
.btn-primary:hover, .btn-gold:hover, .ad-btn:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 8px 26px rgba(33, 242, 139, .28) !important;
}

/* 5. HOMEPAGE FIXES (HERO & GRID) */
.hero-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; 
    border-radius: var(--tbg-radius-md) !important;
    overflow: hidden !important;
    background: #050F0A !important;
}
.hero-card img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: top center !important; /* Anchors top so faces aren't cut */
}
.hero-card-title {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding: 20px !important;
    color: #fff !important;
    background: linear-gradient(transparent, rgba(2, 10, 6, 0.95)) !important;
    z-index: 2 !important;
}
.article-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}
.article-img-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; 
    overflow: hidden !important;
    background: #050F0A !important;
}
.article-img-wrapper img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; 
    object-position: top center !important;
}

/* 6. COMPETITION GLASS GLOW */
.competition-card {
    overflow: visible !important;
}
.competition-card::after {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(33, 242, 139, 0.4), transparent 40%, rgba(97, 255, 177, 0.2)) !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    filter: blur(12px) !important;
}
.competition-card:hover::after { opacity: 1 !important; }

/* 7. MOBILE RESPONSIVENESS */
@media (max-width: 1024px) {
    .hero-card { aspect-ratio: 4 / 3 !important; }
    .article-grid { display: flex !important; flex-direction: column !important; }
    .article-card { flex-direction: row !important; height: 120px !important; align-items: center !important; }
    .article-img-wrapper { width: 40% !important; height: 100% !important; aspect-ratio: auto !important; }
}

/* ==========================================================================
   LOGO GLOW & SIZING
   ========================================================================== */

.nav-brand img {
    height: 42px !important; 
    width: auto !important;
    /* This drops a neon green glow behind the logo */
    filter: drop-shadow(0 0 8px rgba(33, 242, 139, 0.5)); 
    transition: filter 0.3s ease;
}

/* When you hover over the logo, it glows brighter */
.nav-brand:hover img {
    filter: drop-shadow(0 0 15px rgba(33, 242, 139, 0.8));
}

.footer-brand img {
    height: 36px !important;
    width: auto !important;
}

/* ==========================================================================
   ADMIN CONTROL ROOM BUTTON (Hero Banner)
   ========================================================================== */

.btn-admin {
    background: rgba(255, 75, 75, 0.1);
    color: #ff4b4b;
    border: 1px solid rgba(255, 75, 75, 0.4);
    padding: 12px 24px;
    border-radius: var(--tbg-radius-pill);
    font-weight: 800;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: var(--tbg-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 15px rgba(255, 75, 75, 0.1);
}

.btn-admin:hover {
    background: rgba(255, 75, 75, 0.2);
    border-color: #ff4b4b;
    box-shadow: 0 0 25px rgba(255, 75, 75, 0.3);
    color: #fff;
    transform: translateY(-2px);
}

/* ==========================================================================
   COMPETITION LOGOS (Neon Glass Fix)
   ========================================================================== */

/* ==========================================================================
   COMPETITION LOGOS (Premium Glass Treatment)
   ========================================================================== */

.comp-logo {
    max-height: 70px;
    width: auto;
    object-fit: contain;
    /* This filter makes dark logos pop on dark backgrounds without a white box */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2)) brightness(1.1);
    transition: all 0.3s ease;
}

/* On hover, the logo glows brighter */
.competition-card:hover .comp-logo {
    transform: scale(1.08);
    filter: drop-shadow(0 0 15px rgba(121, 255, 192, 0.4)) brightness(1.2);
}

/* Keep the placeholder text looking good */
.comp-logo-placeholder {
    font-size: 2.75rem;
    line-height: 1;
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
}