:root{
  --arg-blue:#6dcff6;
  --arg-blue-strong:#39bdf0;
  --arg-dark:#07131d;
  --arg-dark-2:#10202d;
  --arg-card:#132735;
  --arg-white:#f5fbff;
  --arg-gold:#ffd54f;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  background:var(--arg-dark);
  color:var(--arg-white);
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

section{
  padding:60px 5%;
}

/* =========================
   NAVBAR
========================= */

.navbar{
  position:fixed;
  top:0;
  width:100%;
  z-index:9999;
  padding:18px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(7,19,29,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.logo{
  font-family:'Anton',sans-serif;
  font-size:2rem;
  letter-spacing:1px;
  color:var(--arg-blue);
}

.nav-links{
  display:flex;
  gap:30px;
  font-weight:700;
}

.nav-links a{
  transition:0.3s;
}

.nav-links a:hover{
  color:var(--arg-blue);
}

.menu-right{
  display:flex;
  align-items:center;
  gap:15px;
}

.participants-menu{
  color:var(--arg-gold);
  font-weight:800;
  white-space:nowrap;
}

/* =========================
   BUTTONS
========================= */

.login-btn{
  background:#223748;
  color:white;
  padding:12px 20px;
  border-radius:12px;
  font-weight:900;
  transition:0.3s;
  border:1px solid rgba(255,255,255,0.08);
}

.login-btn:hover{
  background:#2c4c63;
  transform:translateY(-2px);
}

.cta-btn,
.primary-btn{
  background:var(--arg-blue);
  color:#001018;
  padding:12px 22px;
  border-radius:12px;
  font-weight:900;
  transition:0.3s;
}

.cta-btn:hover,
.primary-btn:hover{
  background:white;
  transform:translateY(-2px);
}

.secondary-btn{
  border:1px solid rgba(109,207,246,0.3);
  padding:18px 34px;
  border-radius:14px;
  font-weight:700;
  transition:0.3s;
  color:white;
}

.secondary-btn:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.04);
}

.predict-btn{
  background:var(--arg-blue);
  color:#001018;
  border:none;
  padding:12px 20px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  transition:0.3s;
}

.predict-btn:hover{
  background:white;
  transform:translateY(-2px);
}

/* =========================
   COUNTDOWN
========================= */

.worldcup-countdown{
  margin-top:88px;
  background:
  linear-gradient(
    90deg,
    #0a1c2b,
    #123852
  );
  padding:18px 5%;
  border-bottom:1px solid rgba(109,207,246,0.12);
}

.countdown-container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:35px;
  flex-wrap:wrap;
}

.countdown-title{
  font-weight:800;
  letter-spacing:1px;
}

.countdown-boxes{
  display:flex;
  gap:15px;
}

.count-box{
  background:rgba(255,255,255,0.06);
  padding:12px 18px;
  border-radius:14px;
  min-width:90px;
  text-align:center;
  border:1px solid rgba(255,255,255,0.05);
}

.count-box span{
  display:block;
  font-size:2rem;
  font-weight:900;
  color:var(--arg-blue);
}

.count-box small{
  color:#d7eefa;
  text-transform:uppercase;
  font-size:0.75rem;
}

/* =========================
   HERO
========================= */

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:0 20px;
  overflow:hidden;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
  linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.84)),
  url('https://images.unsplash.com/photo-1574629810360-7efbbe195018?q=80&w=1800&auto=format&fit=crop')
  center/cover;
  z-index:-2;
}

.hero-content{
  max-width:900px;
  animation:fadeIn 1s ease;
}

.hero h1{
  font-family:'Anton',sans-serif;
  font-size:6rem;
  line-height:1;
  margin-bottom:20px;
  text-transform:uppercase;
}

.hero span{
  color:var(--arg-blue);
}

.hero p{
  font-size:1.3rem;
  color:#d6d6d6;
  margin-bottom:35px;
  line-height:1.6;
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

/* =========================
   TITLES
========================= */

.section-title{
  font-family:'Anton',sans-serif;
  font-size:3rem;
  margin-bottom:50px;
  text-transform:uppercase;
  color:var(--arg-blue);
}

/* =========================
   CARDS
========================= */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

.card{
  background:var(--arg-card);
  border-radius:20px;
  padding:35px;
  transition:0.3s;
  border:1px solid rgba(255,255,255,0.05);
}

.card:hover{
  transform:translateY(-5px);
  border-color:var(--arg-blue);
}

.emoji{
  font-size:2.5rem;
}

.card h3{
  margin:20px 0;
  font-size:1.4rem;
}

.card p{
  color:#c8d7df;
  line-height:1.7;
}

/* =========================
   MATCHES
========================= */

.matches{
  display:grid;
  gap:20px;
}

.match{

  background:var(--arg-card);

  border-radius:16px;

  padding:16px 18px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  flex-wrap:wrap;

  gap:14px;

  border:
  1px solid rgba(255,255,255,0.05);

  transition:.25s;

}

.match:hover{
  border-color:var(--arg-blue);
}

.teams{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  font-size:1rem;

  font-weight:800;

  line-height:1.3;

  min-height:52px;

  text-align:center;

  flex-wrap:nowrap;

}

.status{

  padding:6px 10px;

  font-size:.78rem;

}

.prediction-inputs{
  display:flex;
  gap:10px;
}

.prediction-inputs input{
  width:90px;
  text-align:center;
}

/* =========================
   TABLES
========================= */

table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:18px;
}

thead{
  background:var(--arg-blue);
  color:#001018;
}

th,
td{
  padding:18px;
  text-align:left;
}

tbody tr{
  background:var(--arg-card);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

tbody tr:hover{
  background:#173247;
}

/* =========================
   PROFILE
========================= */

.profile-data{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.profile-card{
  background:var(--arg-card);
  padding:22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.05);
}

.profile-card strong{
  display:block;
  margin-bottom:10px;
  color:var(--arg-blue);
  font-size:0.9rem;
  text-transform:uppercase;
}

.profile-card span{
  font-size:1.05rem;
  font-weight:600;
}

/* =========================
   SPONSORS
========================= */

.sponsors{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
}

.sponsor{
  background:var(--arg-card);
  padding:40px;
  border-radius:18px;
  text-align:center;
  font-weight:900;
  transition:0.3s;
  border:1px solid rgba(255,255,255,0.05);
}

.sponsor:hover{
  transform:translateY(-5px);
  border-color:var(--arg-blue);
}

/* =========================
   FINAL CTA
========================= */

.final-cta{
  text-align:center;
  background:
  linear-gradient(
    135deg,
    #081520,
    #103149
  );
  border-radius:30px;
  padding:80px 30px;
}

.final-cta h2{
  font-family:'Anton',sans-serif;
  font-size:4rem;
  margin-bottom:25px;
  text-transform:uppercase;
}

/* =========================
   FOOTER
========================= */

footer{
  padding:40px 5%;
  text-align:center;
  color:#9bb9c7;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* =========================
   MODALS
========================= */

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:99999;
  padding:20px;
}

.modal-content{
  background:var(--arg-dark-2);
  width:100%;
  max-width:520px;
  border-radius:22px;
  padding:35px;
  position:relative;
}

.modal-content h2{
  margin-bottom:25px;
  font-family:'Anton',sans-serif;
  color:var(--arg-blue);
  letter-spacing:1px;
}

.close{
  position:absolute;
  top:20px;
  right:20px;
  cursor:pointer;
  font-size:1.5rem;
}

form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

input{
  padding:16px;
  border:none;
  border-radius:12px;
  background:#09131b;
  color:white;
  font-size:1rem;
}

input:focus{
  outline:2px solid var(--arg-blue);
}

.submit-btn{
  background:var(--arg-blue);
  color:#001018;
  border:none;
  padding:16px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  transition:0.3s;
}

.submit-btn:hover{
  background:white;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes fadeIn{

  from{
    opacity:0;
    transform:translateY(20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

  .nav-links{
    display:none;
  }

  .participants-menu{
    display:none;
  }

}

@media(max-width:900px){

  .hero h1{
    font-size:4rem;
  }

  .final-cta h2{
    font-size:2.5rem;
  }

}

@media(max-width:700px){

  .countdown-container{
    flex-direction:column;
  }

  .count-box{
    min-width:70px;
  }

  .count-box span{
    font-size:1.5rem;
  }

}

@media(max-width:600px){

  .hero h1{
    font-size:3rem;
  }

  .hero p{
    font-size:1rem;
  }

  .section-title{
    font-size:2.2rem;
  }

  .logo{
    font-size:1.4rem;
  }

  .menu-right{
    gap:8px;
  }

  .login-btn,
  .cta-btn{
    padding:10px 14px;
    font-size:0.8rem;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:center;
  }

  .secondary-btn,
  .primary-btn{
    width:100%;
    max-width:320px;
    text-align:center;
  }

  .match{
    flex-direction:column;
    align-items:flex-start;
  }

}



/* =========================
   GROUPS
========================= */

.group-block{
  margin-bottom:60px;
}

.group-title{
  font-family:'Anton',sans-serif;
  color:var(--arg-blue);
  font-size:2.2rem;
  margin-bottom:25px;
}


.fixture-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:22px;

}

@media(max-width:1200px){

  .fixture-grid{

    grid-template-columns:
      repeat(2,1fr);

  }

}

@media(max-width:700px){

  .fixture-grid{

    grid-template-columns:1fr;

  }

}

.group-block{

  background:var(--arg-card);

  border-radius:18px;

  padding:18px;

  border:
  1px solid rgba(255,255,255,0.05);

}

.group-title{

  font-size:1.6rem;

  margin-bottom:16px;

}

.group-matches{
  display:grid;
  grid-template-columns:
    repeat(2,1fr);
  gap:14px;

}

/* =========================
   PREDICTION CARD
========================= */

.prediction-card{

  display:flex !important;

  flex-direction:column;

  justify-content:space-between;

  align-items:stretch;

  gap:12px;

  min-height:220px;

}

.prediction-inputs{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:10px;

  margin-top:auto;

}

.prediction-inputs input{

  width:80px;

  height:54px;

  font-size:1.2rem;

  font-weight:900;

  text-align:center;

}

.public-match{

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;

}

.result-box{

  background:#0f5132;
  color:#d1ffe7;

  padding:10px 16px;

  border-radius:10px;

  font-weight:900;

}

.pending-box{

  background:#3c2f08;
  color:#ffe082;

  padding:10px 16px;

  border-radius:10px;

  font-weight:900;

}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

  .prediction-card{

    grid-template-columns:1fr;

  }

}



/* =========================
   BADGES
========================= */

.badge-card{

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #10283b,
    #173e57
  );

}

.badge-card::before{

  content:'';

  position:absolute;

  inset:0;

  background:
  radial-gradient(
    circle at top right,
    rgba(255,255,255,0.12),
    transparent 40%
  );

}

.badge-icon{

  font-size:3rem;

  margin-bottom:20px;

}

.badge-card h3{

  color:var(--arg-gold);

}


/* =========================
   PREDICTION STATS
========================= */

.prediction-stats{

  margin-bottom:18px;

  background:
  rgba(255,255,255,0.04);

  border-radius:14px;

  padding:14px;

}

.trend-row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:8px;

  font-size:.95rem;

}

.trend-row:last-child{

  margin-bottom:0;

}

/* =========================
   LOCKED MATCH
========================= */

.locked-prediction{

  background:#4a1414;

  color:#ffb3b3;

  padding:18px;

  border-radius:14px;

  text-align:center;

  font-weight:800;

}


/* =========================
   MATCH META
========================= */

.match-meta{

  display:flex;

  flex-wrap:wrap;

  gap:6px;

  margin-top:8px;

}

/* =========================
   INTERNAL HERO
========================= */

.internal-hero{

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #0d2231,
    #173f58
  );

  border-radius:30px;

  padding:60px;

  margin-top:120px;

  border:
  1px solid rgba(255,255,255,0.06);

}

.internal-hero::before{

  content:'';

  position:absolute;

  top:-100px;
  right:-100px;

  width:300px;
  height:300px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(109,207,246,0.15),
    transparent 70%
  );

}

.internal-hero h1{

  font-family:'Anton',sans-serif;

  font-size:4rem;

  color:var(--arg-blue);

  margin-bottom:15px;

  position:relative;

}

.internal-hero p{

  max-width:700px;

  color:#d1e8f3;

  line-height:1.7;

  position:relative;

}

.internal-hero-stats{

  display:flex;

  gap:15px;

  flex-wrap:wrap;

  margin-top:30px;

}

.hero-stat{

  background:
  rgba(255,255,255,0.05);

  border:
  1px solid rgba(255,255,255,0.06);

  padding:14px 18px;

  border-radius:14px;

  font-weight:700;

  color:#d9f2ff;

}

/* =========================
   FOOTER
========================= */

.footer{

  margin-top:80px;

  background:
  linear-gradient(
    180deg,
    #081520,
    #050d14
  );

  border-top:
  1px solid rgba(255,255,255,0.06);

  padding:
  70px 5% 30px;

}

.footer-grid{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px,1fr)
    );

  gap:50px;

}

.footer-logo{

  font-family:'Anton',sans-serif;

  font-size:2rem;

  color:var(--arg-blue);

  margin-bottom:18px;

}

.footer-title{

  color:var(--arg-blue);

  margin-bottom:18px;

  font-size:1.1rem;

}

.footer-description{

  color:#a8c5d4;

  line-height:1.8;

  font-size:.95rem;

}

.footer-links{

  display:flex;

  flex-direction:column;

  gap:12px;

}

.footer-links a{

  color:#d6eaf5;

  text-decoration:none;

  transition:.25s;

  width:fit-content;

}

.footer-links a:hover{

  color:var(--arg-blue);

  transform:translateX(3px);

}

.footer-bottom{

  margin-top:60px;

  padding-top:25px;

  border-top:
  1px solid rgba(255,255,255,0.06);

  text-align:center;

  color:#7fa4b7;

  font-size:.9rem;

}

/* =========================
   FLAGS
========================= */

.flag-img{

  width:28px;

  height:20px;

  object-fit:cover;

  border-radius:4px;

  margin-right:8px;

  box-shadow:
  0 2px 8px rgba(0,0,0,.25);

}

.flag-placeholder{

  width:28px;

  display:inline-flex;

  justify-content:center;

  align-items:center;

  margin-right:8px;

}

.teams{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:6px;

}

.teams img{

  flex-shrink:0;

}

.teams span{

  white-space:nowrap;

}



/* =========================
   MINI PREDICTION STATS
========================= */

.prediction-stats{

  display:flex;

  justify-content:center;

  margin-bottom:12px;

}

.mini-stats-row{

  display:flex;

  align-items:center;

  gap:10px;

  background:
  rgba(255,255,255,0.04);

  border:
  1px solid rgba(255,255,255,0.06);

  border-radius:14px;

  padding:8px 12px;

}

.mini-stat{

  display:flex;

  align-items:center;

  gap:6px;

  font-size:.8rem;

  color:#d9eef8;

}

.mini-stat strong{

  color:var(--arg-blue);

}



@media(max-width:900px){

  .group-matches{

    grid-template-columns:1fr;

  }

}

/* =========================
   PUBLIC FIXTURE
========================= */

.public-group-matches{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:12px;

}

.public-match-card{

  background:var(--arg-card);

  border:
  1px solid rgba(255,255,255,0.05);

  border-radius:16px;

  padding:14px;

  display:flex;

  flex-direction:column;

  gap:10px;

  transition:.25s;

}

.public-match-card:hover{

  border-color:
  rgba(109,207,246,0.25);

  transform:translateY(-2px);

}

.public-match-card .teams{

  min-height:auto;

  justify-content:flex-start;

  text-align:left;

  font-size:.95rem;

}

.public-match-card .match-meta{

  margin-top:4px;

}

.public-match-card .status{

  font-size:.72rem;

  padding:5px 8px;

}

.public-match-card .pending-box,
.public-match-card .result-box{

  width:fit-content;

  margin-top:4px;

}

@media(max-width:900px){

  .public-group-matches{

    grid-template-columns:1fr;

  }

}


/* =========================
   FIXTURE TEAMS
========================= */

.fixture-teams{

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  gap:10px;

}

.fixture-team{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  gap:8px;

}

.fixture-team span{

  font-size:.82rem;

  font-weight:700;

  line-height:1.2;

  color:#e8f6ff;

  min-height:34px;

  display:flex;

  align-items:center;

}

.fixture-vs{

  font-size:.7rem;

  opacity:.5;

  font-weight:800;

  letter-spacing:1px;

}

/* =========================
   LOGO FLAG
========================= */

.logo{

  display:flex;

  align-items:center;

  gap:12px;

}

.logo-flag{

  width:38px;

  height:28px;

  object-fit:cover;

  border-radius:5px;

  box-shadow:
  0 2px 10px rgba(0,0,0,.25);

}

.logo span{

  font-family:'Anton',sans-serif;

  font-size:2rem;

  letter-spacing:1px;

  color:var(--arg-blue);

}

/* =========================
   PRIVACY BANNER
========================= */

.privacy-banner{

  position:fixed;

  bottom:20px;

  left:50%;

  transform:translateX(-50%);

  width:calc(100% - 40px);

  max-width:900px;

  background:
  rgba(7,19,29,.96);

  border:
  1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);

  border-radius:20px;

  padding:18px 22px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  z-index:999999;

  box-shadow:
  0 10px 40px rgba(0,0,0,.35);

}

.privacy-text{

  color:#d8edf8;

  line-height:1.6;

  font-size:.92rem;

}

.privacy-btn{

  background:var(--arg-blue);

  color:#001018;

  border:none;

  padding:12px 20px;

  border-radius:12px;

  font-weight:900;

  cursor:pointer;

}

/* =========================
   CUSTOM ALERT
========================= */

.custom-alert{

  position:fixed;

  top:30px;

  right:30px;

  z-index:999999;

  display:none;

  flex-direction:column;

  gap:14px;

  pointer-events:none;

}

/* =========================
   ALERT TYPES
========================= */

.alert-success{

  border-left:
  5px solid #31d17c;

}

.alert-error{

  border-left:
  5px solid #ff5f5f;

}

.alert-warning{

  border-left:
  5px solid #ffca5f;

}

/* =========================
   ALERT ANIMATION
========================= */

@keyframes slideIn{

  from{

    opacity:0;

    transform:
    translateX(30px);

  }

  to{

    opacity:1;

    transform:
    translateX(0);

  }

}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

  .privacy-banner{

    flex-direction:column;

    align-items:flex-start;

  }

  .custom-alert{

    right:15px;
    left:15px;

  }

  .custom-alert-content{

    min-width:auto;

  }

}

/* =========================
   SOCIAL SHARE PREMIUM
========================= */

.social-share{

  display:flex;

  justify-content:center;

  gap:16px;

  flex-wrap:wrap;

  margin-top:30px;

}

.social-btn{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  min-width:180px;

  border:none;

  padding:16px 22px;

  border-radius:18px;

  font-weight:800;

  font-size:.95rem;

  cursor:pointer;

  color:white;

  transition:.25s;

  box-shadow:
  0 10px 25px rgba(0,0,0,.25);

}

.social-btn:hover{

  transform:
  translateY(-3px)
  scale(1.02);

}

.whatsapp-btn{

  background:
  linear-gradient(
    135deg,
    #25D366,
    #1ebe5d
  );

}

.twitter-btn{

  background:
  linear-gradient(
    135deg,
    #1f1f1f,
    #000
  );

}

.instagram-btn{

  background:
  linear-gradient(
    135deg,
    #f9ce34,
    #ee2a7b,
    #6228d7
  );

}

/* =========================
   PROFILE PREDICTIONS
========================= */
.profile-prediction{

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    160px
    90px;

  align-items:center;

  gap:16px;

}

.profile-prediction .teams{

  justify-content:flex-start;

  text-align:left;

  min-height:auto;

}

.profile-prediction-center{

  width:160px;

  display:flex;

  justify-content:center;

  align-items:center;

  text-align:center;

  font-weight:900;

}

.profile-prediction-points{

  width:90px;

  display:flex;

  justify-content:flex-end;

  align-items:center;

}

.profile-prediction-center{

  display:flex;

  justify-content:center;

  align-items:center;

  font-weight:900;

  text-align:center;

}

.profile-prediction-points{

  display:flex;

  justify-content:flex-end;

  align-items:center;

  font-weight:900;

  color:var(--arg-blue);

}

/* =========================
   SELECTS
========================= */

select{

  width:100%;

  padding:16px;

  border:none;

  border-radius:12px;

  background:#09131b;

  color:white;

  font-size:1rem;

  appearance:none;

  cursor:pointer;

}

select:focus{

  outline:
  2px solid var(--arg-blue);

}


/* =========================
   SELECTS
========================= */

select{

  width:100%;

  padding:16px;

  border:none;

  border-radius:12px;

  background:#09131b;

  color:white;

  font-size:1rem;

  appearance:none;

  cursor:pointer;

}



/* =========================
   CONTACT
========================= */

.contact-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:30px;

}

.contact-info{

  display:flex;

  flex-direction:column;

  gap:25px;

}

.contact-item strong{

  display:block;

  margin-bottom:8px;

  color:var(--arg-blue);

}

textarea{

  width:100%;

  padding:18px;

  border:none;

  border-radius:14px;

  background:#09131b;

  color:white;

  resize:none;

  font-family:'Inter',sans-serif;

}

/* =========================
   NEWS
========================= */

.news-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(420px,1fr));

  gap:28px;

}

.news-card{

  background:
  linear-gradient(
    135deg,
    #09131b,
    #102434
  );

  border:
  1px solid rgba(255,255,255,0.05);

  border-radius:24px;

  padding:24px;

  overflow:hidden;

}

.news-card h2{

  margin-bottom:20px;

  color:var(--arg-blue);

}

/* =========================
   MOBILE OPTIMIZATION
========================= */

@media(max-width:900px){

  /* =========================
     NAVBAR
  ========================= */

  .navbar{

    flex-direction:column;

    gap:18px;

    padding:18px;

  }

  .logo{

    justify-content:center;

  }

  .logo span{

    font-size:1.4rem;

  }

  .logo-flag{

    width:30px;

    height:22px;

  }

  .nav-links{

    width:100%;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

  }

  .nav-links a{

    font-size:.9rem;

  }

  .menu-right{

    width:100%;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

  }

  /* =========================
     BUTTONS
  ========================= */

  .cta-btn,
  .login-btn{

    padding:12px 16px;

    font-size:.85rem;

    border-radius:12px;

  }

  /* =========================
     HERO
  ========================= */

  .hero{

    padding-top:220px;

    text-align:center;

  }

  .hero h1{

    font-size:3rem;

    line-height:1.05;

  }

  .hero p{

    font-size:1rem;

  }

  .hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

  }

  /* =========================
     INTERNAL HERO
  ========================= */

  .internal-hero{

    padding:40px 24px;

    margin-top:180px;

    border-radius:24px;

  }

  .internal-hero h1{

    font-size:2.5rem;

    text-align:center;

  }

  .internal-hero p{

    text-align:center;

  }

  .internal-hero-stats{

    justify-content:center;

  }

  /* =========================
     CARDS
  ========================= */

  .card{

    padding:20px;

  }

  /* =========================
     FIXTURE
  ========================= */

  .fixture-grid{

    grid-template-columns:1fr;

  }

  .public-group-matches{

    grid-template-columns:1fr;

  }

  /* =========================
     TABLES
  ========================= */

  table{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

  }

  /* =========================
     FOOTER
  ========================= */

  .footer-grid{

    grid-template-columns:1fr;

    text-align:center;

  }

  .footer-links{

    align-items:center;

  }

}


/* =========================
   MOBILE MENU
========================= */

.mobile-menu-btn{

  display:none;

  background:none;

  border:none;

  color:white;

  font-size:2rem;

  cursor:pointer;

}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

  .mobile-menu-btn{

    display:block;

  }

  .nav-links{

    display:none;

    flex-direction:column;

    width:100%;

    background:
    rgba(9,19,27,.98);

    border-radius:18px;

    padding:20px;

    margin-top:10px;

  }

  .nav-links.mobile-open{

    display:flex;

  }

  .nav-links a{

    width:100%;

    text-align:center;

    padding:12px;

    border-radius:12px;

  }

}


/* =========================
   POINT SYSTEM
========================= */

.points-system{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

  gap:22px;

  margin-top:60px;

}

.points-card{

  display:flex;

  align-items:center;

  gap:18px;

  background:
  linear-gradient(
    135deg,
    #0c1c29,
    #132f43
  );

  border:
  1px solid rgba(255,255,255,0.05);

  border-radius:22px;

  padding:22px;

}

.points-icon{

  width:60px;

  height:60px;

  border-radius:18px;

  display:flex;

  justify-content:center;

  align-items:center;

  background:
  rgba(109,207,246,.12);

  font-size:1.8rem;

  flex-shrink:0;

}

.points-card h3{

  margin-bottom:6px;

  color:var(--arg-blue);

}

.points-card p{

  color:#d4e7f1;

}


/* =========================
   PODIUM RANKING
========================= */

.rank-gold{

  background:
  linear-gradient(
    90deg,
    rgba(255,215,0,.15),
    rgba(255,215,0,.05)
  );

}

.rank-silver{

  background:
  linear-gradient(
    90deg,
    rgba(192,192,192,.15),
    rgba(192,192,192,.05)
  );

}

.rank-bronze{

  background:
  linear-gradient(
    90deg,
    rgba(205,127,50,.15),
    rgba(205,127,50,.05)
  );

}

.rank-gold td:first-child{

  color:#ffd700;

  font-weight:900;

}

.rank-silver td:first-child{

  color:#d7d7d7;

  font-weight:900;

}

.rank-bronze td:first-child{

  color:#cd7f32;

  font-weight:900;

}



/* =========================
   SOCIAL WALL
========================= */

.social-wall-header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:30px;

  gap:20px;

  flex-wrap:wrap;

}

.social-wall-header h2{

  font-size:2rem;

  color:var(--arg-blue);

}

.live-pill{

  background:#ff3b3b;

  color:white;

  padding:10px 18px;

  border-radius:999px;

  font-weight:900;

  animation:pulseLive 1.5s infinite;

}

@keyframes pulseLive{

  0%{
    opacity:1;
  }

  50%{
    opacity:.6;
  }

  100%{
    opacity:1;
  }

}

.social-wall-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:24px;

}

.social-post-card{

  background:
  linear-gradient(
    135deg,
    #09131b,
    #102434
  );

  border:
  1px solid rgba(255,255,255,0.05);

  border-radius:24px;

  padding:24px;

  transition:.25s;

}

.social-post-card:hover{

  transform:translateY(-4px);

  border-color:
  rgba(109,207,246,.25);

}

.social-post-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:18px;

}

.social-user{

  display:flex;

  align-items:center;

  gap:14px;

}

.social-avatar{

  width:52px;

  height:52px;

  border-radius:18px;

  background:
  rgba(109,207,246,.12);

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:1.4rem;

}

.social-user strong{

  display:block;

  margin-bottom:4px;

}

.social-user p{

  opacity:.65;

  font-size:.85rem;

}

.social-platform{

  width:42px;

  height:42px;

  border-radius:14px;

  display:flex;

  justify-content:center;

  align-items:center;

  font-weight:900;

}

.x-platform{

  background:#111;

}

.fifa-platform{

  background:
  linear-gradient(
    135deg,
    #0b5cff,
    #00bfff
  );

}

.social-post-content{

  line-height:1.8;

  color:#e7f5ff;

  margin-bottom:20px;

  font-size:1rem;

}

.social-post-footer{

  opacity:.7;

  font-size:.85rem;

}



/* =========================
   TABLE PROFILE BUTTON
========================= */

.table-profile-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:8px 14px;

  border-radius:10px;

  background:
  rgba(109,207,246,.12);

  color:var(--arg-blue);

  text-decoration:none;

  font-size:.82rem;

  font-weight:800;

  transition:.25s;

}

.table-profile-btn:hover{

  background:
  rgba(109,207,246,.22);

  transform:translateY(-1px);

}


/* =========================
   FORGOT PASSWORD
========================= */

.forgot-password-btn{

  background:none;

  border:none;

  color:var(--arg-blue);

  margin-top:16px;

  cursor:pointer;

  font-weight:700;

  transition:.25s;

}

.forgot-password-btn:hover{

  opacity:.8;

}


/* =========================
   FEATURED CREATOR
========================= */

.featured-news-card{

  background:
  linear-gradient(
    135deg,
    #11324a,
    #1d4f6f
  );

  border:
  1px solid rgba(109,207,246,.25);

  border-radius:30px;

  padding:32px;

  margin-bottom:35px;

  position:relative;

  overflow:hidden;

}

.featured-news-card::before{

  content:'';

  position:absolute;

  top:-120px;
  right:-120px;

  width:260px;
  height:260px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(109,207,246,.18),
    transparent 70%
  );

}

.featured-badge{

  width:fit-content;

  background:#ffd700;

  color:#111;

  padding:8px 14px;

  border-radius:999px;

  font-size:.75rem;

  font-weight:900;

  margin-bottom:22px;

}

.featured-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  margin-bottom:24px;

}

.featured-profile{

  display:flex;

  align-items:center;

  gap:18px;

}

.featured-avatar{

  width:72px;

  height:72px;

  border-radius:22px;

  background:
  rgba(255,255,255,.08);

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:2rem;

}

.featured-profile h2{

  color:white;

  margin-bottom:6px;

}

.featured-profile p{

  color:#d3e7f5;

}

.featured-platform{

  width:58px;

  height:58px;

  border-radius:18px;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:1.5rem;

  background:
  linear-gradient(
    45deg,
    #f9ce34,
    #ee2a7b,
    #6228d7
  );

}

.featured-description{

  color:#e7f5ff;

  line-height:1.9;

  margin-bottom:28px;

  max-width:700px;

}

.featured-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:16px 24px;

  border-radius:16px;

  background:white;

  color:#0b2233;

  text-decoration:none;

  font-weight:900;

  transition:.25s;

}

.featured-btn:hover{

  transform:translateY(-2px);

}



/* =========================
   NEWS TOP
========================= */

.news-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:15px;

  margin-bottom:18px;

}

.instagram-mini-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:10px 14px;

  border-radius:12px;

  background:
  linear-gradient(
    45deg,
    #f9ce34,
    #ee2a7b,
    #6228d7
  );

  color:white;

  text-decoration:none;

  font-size:.82rem;

  font-weight:800;

  transition:.25s;

}

.instagram-mini-btn:hover{

  transform:translateY(-2px);

}

/* =========================
   CREATOR AVATAR
========================= */

.creator-avatar{

  width:78px;

  height:78px;

  border-radius:50%;

  object-fit:cover;

  border:
  3px solid rgba(109,207,246,.35);

  box-shadow:
    0 8px 25px rgba(0,0,0,.35),
    0 0 18px rgba(109,207,246,.15);

  background:#0b1822;

  flex-shrink:0;

}


/* =========================
   FEATURED CARUSO
========================= */

.featured-caruso{

  background:
  linear-gradient(
    135deg,
    #4d3a08,
    #7a5b0d,
    #5f4608
  );

  border:
  2px solid rgba(255,215,0,.35);

  position:relative;

  overflow:hidden;

  transform:scale(1.02);

  box-shadow:
  0 12px 40px rgba(255,215,0,.12);

}

  border:
  2px solid rgba(109,207,246,.35);

  position:relative;

  overflow:hidden;

  transform:scale(1.02);

}

.featured-caruso::before{

  content:'';

  position:absolute;

  inset:0;

  background:

  repeating-linear-gradient(

    45deg,

    rgba(255,255,255,.03) 0px,

    rgba(255,255,255,.03) 2px,

    transparent 2px,

    transparent 12px

  );

  pointer-events:none;

}

.featured-caruso::after{

  content:'';

  position:absolute;

  top:-120px;
  right:-120px;

  width:280px;
  height:280px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(109,207,246,.18),
    transparent 70%
  );

}

.featured-caruso .featured-badge{

  background:
  linear-gradient(
    135deg,
    #ffd700,
    #ffb700
  );

  color:#111;

  box-shadow:
  0 6px 18px rgba(255,215,0,.35);

}

.featured-caruso h2{

  color:white;

}

.featured-caruso .featured-description{

  color:#eef8ff;

}


/* =========================
   SUPPORT
========================= */

.support-buttons{

  display:flex;

  gap:12px;

  flex-wrap:wrap;

  margin-top:20px;

}

.support-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:12px 18px;

  border-radius:14px;

  text-decoration:none;

  font-weight:800;

  transition:.25s;

  color:white;

}

.support-btn:hover{

  transform:translateY(-2px);

}

.paypal-btn{

  background:
  linear-gradient(
    135deg,
    #003087,
    #009cde
  );

}

.mp-btn{

  background:
  linear-gradient(
    135deg,
    #00b1ea,
    #007eb5
  );

}

/* =========================
   SUPPORT BAR
========================= */

.support-bar{

  margin-top:50px;

  background:
  rgba(255,255,255,0.03);

  border:
  1px solid rgba(255,255,255,0.05);

  border-radius:24px;

  padding:28px;

}

.support-bar-content{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:25px;

  flex-wrap:wrap;

}

.support-bar h3{

  color:var(--arg-blue);

  margin-bottom:8px;

}

.support-bar p{

  color:#c7dbe6;

}


/* =========================
   EREBOR SIGNATURE
========================= */

.footer-bottom{

  margin-top:60px;

  padding-top:25px;

  border-top:
  1px solid rgba(255,255,255,0.06);

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  flex-wrap:wrap;

}

.footer-copyright{

  color:#7fa4b7;

  font-size:.9rem;

}

.erebor-signature{

  display:inline-flex;

  align-items:center;

  gap:8px;

  text-decoration:none;

  padding:12px 18px;

  border-radius:14px;

  background:
  rgba(109,207,246,.08);

  border:
  1px solid rgba(109,207,246,.12);

  transition:.25s;

}

.erebor-signature:hover{

  transform:translateY(-2px);

  background:
  rgba(109,207,246,.12);

}

.erebor-signature span{

  color:#b9d9e8;

  font-size:.85rem;

}

.erebor-signature strong{

  color:var(--arg-blue);

  font-size:1rem;

}


/* =========================
   PREDICTION RESULT GRID
========================= */

.prediction-result-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:12px;

  margin-top:18px;

}

.prediction-result-card{

  background:
  rgba(255,255,255,0.04);

  border:
  1px solid rgba(255,255,255,0.05);

  border-radius:18px;

  padding:14px;

  text-align:center;

}

.prediction-result-label{

  font-size:.72rem;

  opacity:.7;

  margin-bottom:10px;

  font-weight:700;

  letter-spacing:.3px;

}

.prediction-result-value{

  font-size:1.1rem;

  font-weight:900;

  color:#f5fbff;

}

.points-highlight{

  color:var(--arg-blue);

}

}




/* =========================
   PROFILE ACTION BAR
========================= */

.profile-action-bar{

  padding:0 5%;

  margin-top:0px;

}

.profile-action-content{

  background:
  linear-gradient(
    135deg,
    #0d2231,
    #14344b
  );

  border:
  1px solid rgba(109,207,246,.08);

  border-radius:24px;

  padding:24px 30px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:24px;

  flex-wrap:wrap;

}

.profile-action-info h3{

  color:white;

  margin-bottom:8px;

  font-size:1.15rem;

}

.profile-action-info p{

  color:#c7dbe6;

  line-height:1.6;

}

.profile-action-buttons{

  display:flex;

  align-items:center;

  gap:14px;

  flex-wrap:wrap;

}

.profile-action-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:15px 22px;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    #6dcff6,
    #4ab6df
  );

  color:#062033;

  text-decoration:none;

  font-weight:900;

  transition:.25s;

}

.profile-action-btn:hover{

  transform:translateY(-2px);

}

.profile-secondary-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:15px 22px;

  border-radius:16px;

  background:
  rgba(255,255,255,.08);

  color:white;

  text-decoration:none;

  font-weight:900;

  transition:.25s;

}

.profile-secondary-btn:hover{

  transform:translateY(-2px);

  background:
  rgba(255,255,255,.12);

}

/* =========================
   PROFILE HERO FIX
========================= */

.profile-page .internal-hero{

 margin-top:-25px;

}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

  .profile-action-content{

    flex-direction:column;

    align-items:flex-start;

  }

  .profile-action-buttons{

    width:100%;

  }

  .profile-action-btn,
  .profile-secondary-btn{

    flex:1;

  }

}

/* =========================
   PROFILE PAGE LAYOUT
========================= */

.profile-page{

  padding-top:50px;

}




/* =========================
   TOURNAMENT ACTIONS
========================= */

.tournament-actions-grid{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:28px;

  margin-top:50px;

}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

  .tournament-actions-grid{

    grid-template-columns:1fr;

  }

}

.tournament-info-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

  gap:22px;

  margin-bottom:50px;

}

.section-description{

  color:#c7dbe6;

  margin-bottom:25px;

  line-height:1.7;

}



/* =========================
   MODAL ALERT
========================= */

.modal-alert{

  position:fixed;

  inset:0;

  background:
  rgba(0,0,0,.7);

  display:none;

  justify-content:center;

  align-items:center;

  z-index:999999;

  padding:20px;

}

.modal-alert-box{

  width:min(420px,100%);

  background:
  linear-gradient(
    135deg,
    #102434,
    #18384f
  );

  border:
  1px solid rgba(109,207,246,.12);

  border-radius:26px;

  padding:35px;

  text-align:center;

}

.modal-alert-message{

  color:white;

  line-height:1.8;

  margin-bottom:25px;

  font-size:1.05rem;

}


/* =========================
   USER HERO
========================= */

.user-hero{
margin-top:145px;

}

.user-hero .hero-content{

  text-align:center;

}

.user-hero + section{

  margin-top:80px;

}



.mini-result-card{

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.05);

  border-radius:14px;

  padding:14px 16px;

  text-align:center;

  min-width:0;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  justify-content:center;

}

.mini-result-card .prediction-result-label{

  font-size:.7rem;

  margin-bottom:6px;

}

.mini-result-card .prediction-result-value{

  font-size:.92rem;

  font-weight:900;
white-space:nowrap;

}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

  .public-prediction-layout{

    grid-template-columns:1fr;

  }

}

/* =========================
   MINI RESULT CARDS
========================= */

.public-prediction-layout{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(135px,1fr));

  gap:22px;

  margin-top:18px;

  margin-left:0px;

}

.mini-result-card{

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.05);

  border-radius:14px;

  padding:12px;

  text-align:center;

}

/* =========================
   PREDICTION MAIN CONTENT
========================= */

.prediction-main-content{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

}

/* =========================
   USER PREDICTIONS
========================= */

.user-prediction-card{

  display:flex;

  flex-direction:column;

  gap:18px;

}

.user-prediction-results{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;

  width:100%;

  justify-content:center;

  align-items:stretch;

}

.user-prediction-results div{

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.05);

  border-radius:14px;

  padding:14px;
display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.user-prediction-results strong{

  display:block;

  margin-bottom:8px;

  font-size:.8rem;
display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:2px;

text-align:center;

}

.user-prediction-results p{

  font-weight:900;

}

@media(max-width:700px){

  .user-prediction-results{

    grid-template-columns:1fr;

  }

}

@media(max-width:1200px){

  #profilePredictions{

    grid-template-columns:
      repeat(3,1fr);

  }

}

@media(max-width:900px){

  #profilePredictions{

    grid-template-columns:
      repeat(2,1fr);

  }

}

@media(max-width:600px){

  #profilePredictions{

    grid-template-columns:1fr;

  }

}

/* =========================
   PROFILE PREDICTIONS GRID
========================= */

#profilePredictions{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:22px;

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

  #profilePredictions{

    grid-template-columns:
      repeat(3,1fr);

  }

}

@media(max-width:900px){

  #profilePredictions{

    grid-template-columns:
      repeat(2,1fr);

  }

}

@media(max-width:600px){

  #profilePredictions{

    grid-template-columns:1fr;

  }

}

/* =========================
   USER PREDICTION STATUS
========================= */

.user-prediction-card .status{

  text-align:center;

  display:flex;

  justify-content:center;

  align-items:center;

}

/* =========================
   GROUP PILL
========================= */

.user-prediction-card .status{

  width:fit-content;

  margin:0 auto;

  padding:8px 14px;

  border-radius:999px;

  background:
  rgba(109,207,246,.12);

  border:
  1px solid rgba(109,207,246,.18);

  color:var(--arg-blue);

  font-size:.78rem;

  font-weight:800;

  letter-spacing:.3px;

}


/* =========================
   RESULT ICON
========================= */

.result-icon{

  font-size:1.15rem;

  margin-bottom:8px;

  display:flex;

  justify-content:center;

  align-items:center;

}


/* =========================
   USER HERO AVATAR
========================= */

.user-hero-avatar{

  width:110px;

  height:110px;

  border-radius:50%;

  margin:0 auto 24px auto;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:3rem;

  background:
  linear-gradient(
    135deg,
    rgba(109,207,246,.18),
    rgba(109,207,246,.08)
  );

  border:
  2px solid rgba(109,207,246,.18);

  box-shadow:
  0 12px 30px rgba(0,0,0,.25);

}


/* =========================
   HERO PROFILE LAYOUT
========================= */

.hero-profile-layout{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:28px;

  text-align:left;

  flex-wrap:wrap;

}

.hero-profile-info{

  display:flex;

  flex-direction:column;

}

.hero-profile-info h1{

  margin-bottom:8px;

}

.user-hero-avatar{

  width:110px;

  height:110px;

  border-radius:50%;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:3rem;

  background:
  linear-gradient(
    135deg,
    rgba(109,207,246,.18),
    rgba(109,207,246,.08)
  );

  border:
  2px solid rgba(109,207,246,.18);

  box-shadow:
  0 12px 30px rgba(0,0,0,.25);

  flex-shrink:0;

}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

  .hero-profile-layout{

    flex-direction:column;

    text-align:center;

  }

  .hero-profile-info{

    align-items:center;

  }

}

.vs-divider{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:34px;

  height:34px;

  border-radius:50%;

  background:
  rgba(109,207,246,.12);

  border:
  1px solid rgba(109,207,246,.18);

  color:var(--arg-blue);

  font-size:.78rem;

  font-weight:900;

  margin:0 6px;

  flex-shrink:0;

}


/* =========================
   ADSENSE
========================= */

.ads-section{

  padding:10px 5% 40px 5%;

}

.ads-section-mid{

  padding-top:40px;

}

.ads-container{

  min-height:120px;

  border-radius:24px;

  overflow:hidden;

  background:
  rgba(255,255,255,.03);

  border:
  1px solid rgba(255,255,255,.05);

  padding:14px;

  display:flex;

  justify-content:center;

  align-items:center;

}


/* =========================
   USER PROFILE PREDICTIONS FIX
========================= */

#profilePredictions{

  display:grid !important;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(320px,1fr)
    ) !important;

  gap:24px;

}

/* CARD */

.user-prediction-card{

  display:flex !important;

  flex-direction:column;

  justify-content:space-between;

  align-items:center;

  gap:18px;

  min-height:260px;

}

/* MATCH HEADER */

.prediction-main-content{

  width:100%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  gap:14px;

}

.user-prediction-card .teams{

  display:flex;

  justify-content:center;

  align-items:center;

  flex-wrap:nowrap;

  gap:10px;

  width:100%;

}

.user-prediction-card .teams span{

  white-space:nowrap;

}

.user-prediction-card .status{

  width:fit-content;

  margin:0 auto;

}

/* RESULTS */

.user-prediction-results{

  width:100%;

  display:grid !important;

  grid-template-columns:
    repeat(3,minmax(100px,1fr));

  gap:14px;

}

.user-prediction-results div{

  min-width:0;

  min-height:95px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

  overflow:hidden;

}

.user-prediction-results strong{

  font-size:.75rem;

  margin-bottom:6px;

}

.user-prediction-results p{

  font-size:1rem;

  font-weight:900;

  white-space:nowrap;

}

/* RESPONSIVE */

@media(max-width:1100px){

#profilePredictions{

grid-template-columns:
repeat(3,1fr) !important;

}

}

@media(max-width:900px){

#profilePredictions{

grid-template-columns:
repeat(2,1fr) !important;

}

}

@media(max-width:600px){

#profilePredictions{

grid-template-columns:1fr !important;

}

.user-prediction-results{

grid-template-columns:1fr;

}

}