
/* =========================================================
   NEXERA FC V277 — NEON STADIUM / APEX ARENA
   Visual-only redesign. Existing JS/Firebase/data logic untouched.
   ========================================================= */
:root{
  --v277-bg:#050611;
  --v277-panel:rgba(12,15,31,.88);
  --v277-panel2:rgba(18,20,42,.92);
  --v277-cyan:#39e8ff;
  --v277-violet:#8b5cff;
  --v277-pink:#ff3fa4;
  --v277-lime:#b8ff4a;
  --v277-gold:#ffd65a;
  --v277-red:#ff5571;
  --v277-text:#f7f8ff;
  --v277-muted:#94a0bd;
  --v277-border:rgba(112,123,255,.20);
}
html,body{
  background:
    radial-gradient(700px 500px at -5% -5%,rgba(57,232,255,.17),transparent 62%),
    radial-gradient(720px 520px at 105% 5%,rgba(255,63,164,.14),transparent 62%),
    radial-gradient(800px 560px at 55% 110%,rgba(139,92,255,.13),transparent 62%),
    linear-gradient(145deg,#04050d,#080a17 48%,#03040a)!important;
  color:var(--v277-text)!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:
    linear-gradient(rgba(57,232,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);
}
body:after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 40%,rgba(255,255,255,.018) 50%,transparent 60%);
}
a{color:var(--v277-cyan)!important}
h1,h2,h3,h4,h5,h6,b,strong{color:#fff!important}

/* TOP BAR — compact glass cockpit */
.topbar,.header,.navbar,.navBar{
  background:rgba(4,5,13,.76)!important;
  border-bottom:1px solid rgba(57,232,255,.16)!important;
  backdrop-filter:blur(24px)!important;
  box-shadow:0 16px 55px rgba(0,0,0,.55)!important;
}
.brand{
  background:linear-gradient(135deg,rgba(57,232,255,.09),rgba(139,92,255,.10),rgba(255,63,164,.07))!important;
  border:1px solid rgba(112,123,255,.23)!important;
  border-radius:17px!important;
}
.brand img{
  border:1px solid rgba(57,232,255,.58)!important;
  box-shadow:0 0 26px rgba(57,232,255,.18),0 0 38px rgba(139,92,255,.10)!important;
}
.headerIconBtn,.headerProfileBtn,.menuBtn,.navItem,.nav-link{
  background:rgba(14,17,36,.74)!important;
  border:1px solid rgba(112,123,255,.18)!important;
  color:#dce4ff!important;
  border-radius:14px!important;
}
.headerIconBtn:hover,.headerProfileBtn:hover,.menuBtn:hover,.navItem:hover,.nav-link:hover{
  border-color:rgba(57,232,255,.55)!important;
  background:linear-gradient(135deg,rgba(57,232,255,.12),rgba(139,92,255,.13))!important;
  box-shadow:0 0 25px rgba(57,232,255,.10)!important;
}

/* GLOBAL CARDS */
.card,.panel,.box,.section,.statCard,.matchCard,.fixtureCard,.resultItem,
.playerRow,.bidItem,.tableWrap,.profileCard,.adminContent,.tournamentCard,
.playerCard,.n119TopPlayer,.n119QuickCard,.n119Quick,.n153HomePointTable,
.nxfScheduleCard,.nxfResultCard,.nxfProfileCard,.n119NextMatch,.n119News,
.n123GallerySlider,.n172PersonalCard,.n172UpcomingCard,.n173SectionCard,
.tournamentHero,.nexaBidIntro,.nexaBidGuide,.nxfScheduleHero,.nxfDbHero,
.adminHero,.bidControlCard,.standingsCard{
  background:
    linear-gradient(145deg,rgba(18,22,45,.94),rgba(6,8,18,.97))!important;
  border:1px solid var(--v277-border)!important;
  border-radius:21px!important;
  box-shadow:0 22px 65px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.045)!important;
}
.card:hover,.panel:hover,.matchCard:hover,.fixtureCard:hover,.playerCard:hover,
.playerRow:hover,.n119TopPlayer:hover{
  border-color:rgba(57,232,255,.42)!important;
  transform:translateY(-2px);
  transition:.18s ease;
}

/* HERO — stadium tunnel feel */
.n119TopWelcome,.hero,.homeHero,.heroSection,.banner,.n119Hero,
.tournamentHero,.nxfScheduleHero,.adminHero,.profileHero{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 78% 25%,rgba(57,232,255,.22),transparent 23%),
    radial-gradient(circle at 88% 70%,rgba(255,63,164,.18),transparent 25%),
    linear-gradient(115deg,#080b1b 0%,#101334 48%,#150a20 100%)!important;
  border:1px solid rgba(112,123,255,.35)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.60),0 0 60px rgba(57,232,255,.07)!important;
}
.n119TopWelcome:before,.hero:before,.homeHero:before,.heroSection:before,
.banner:before,.n119Hero:before,.tournamentHero:before,.nxfScheduleHero:before,
.adminHero:before,.profileHero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,5,13,.92),rgba(4,5,13,.30) 55%,rgba(4,5,13,.72)),
    repeating-linear-gradient(115deg,transparent 0 22px,rgba(57,232,255,.028) 23px 24px);
}
.n119TopWelcome>*{position:relative;z-index:1}
.n119TopWelcome h1,.n119TopWelcome h2{
  font-size:clamp(34px,5vw,66px)!important;
  line-height:.96!important;
  letter-spacing:-2.5px!important;
  text-shadow:0 10px 35px rgba(0,0,0,.75)!important;
}
.n119TopWelcome p{color:#aeb9d8!important}
.n119TopWelcome:after{
  content:"APEX ARENA  •  NEXERA FC  •  SEASON LIVE";
  position:absolute;right:26px;bottom:18px;
  color:#7feeff;font-size:9px;font-weight:900;letter-spacing:2.5px;
}

/* QUICK ACTIONS — four distinct tiles */
.n119QuickGrid,.quickGrid,.quickActions{
  gap:12px!important;
}
.n119QuickGrid>* ,.quickGrid>* ,.quickActions>*{
  position:relative!important;overflow:hidden!important;
  min-height:104px!important;
  background:linear-gradient(145deg,rgba(18,23,48,.97),rgba(7,9,20,.97))!important;
  border:1px solid rgba(112,123,255,.22)!important;
  border-radius:18px!important;
  box-shadow:0 17px 40px rgba(0,0,0,.40)!important;
}
.n119QuickGrid>*:before,.quickGrid>*:before,.quickActions>*:before{
  content:"";position:absolute;inset:auto -35px -42px auto;
  width:105px;height:105px;border-radius:50%;
  background:radial-gradient(circle,rgba(57,232,255,.18),transparent 65%);
}
.n119QuickGrid>*:hover,.quickGrid>*:hover,.quickActions>*:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(57,232,255,.45)!important;
}
.n119Quick.red{border-color:rgba(255,85,113,.30)!important}
.n119Quick.blue{border-color:rgba(57,232,255,.30)!important}
.n119Quick.green{border-color:rgba(184,255,74,.28)!important}
.n119Quick.purple{border-color:rgba(139,92,255,.34)!important}

/* MATCH / RESULT CARDS */
.n119NextMatch,.matchCard,.fixtureCard,.nxfScheduleCard,.nxfResultCard{
  background:
    radial-gradient(circle at 92% 15%,rgba(57,232,255,.13),transparent 22%),
    linear-gradient(145deg,#111633,#080a17)!important;
}
.matchCard,.fixtureCard{position:relative;overflow:hidden}
.matchCard:before,.fixtureCard:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(#39e8ff,#8b5cff,#ff3fa4);
  box-shadow:0 0 18px rgba(57,232,255,.4);
}

/* SCORE / RESULT EMPHASIS */
.score,.matchScore,.resultScore,.fixtureScore{
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px rgba(57,232,255,.25);
}
.resultScore,.matchScore{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(57,232,255,.12),rgba(139,92,255,.12))!important;
  border:1px solid rgba(57,232,255,.22)!important;
  border-radius:14px!important;
}

/* SECTION TITLES */
.n119SectionTitle,.sectionTitle,.sectionHead{
  border-bottom-color:rgba(112,123,255,.16)!important;
}
.n119SectionTitle span,.sectionTitle span{
  color:var(--v277-cyan)!important;
  letter-spacing:2.4px!important;
  font-size:10px!important;
  font-weight:900!important;
}
.n119SectionTitle h2,.sectionTitle h2{color:#fff!important}

/* TABLE — broadcast scoreboard */
.n153HomePointTable,.pointTable,.premiumTable,.tableWrap{overflow:hidden!important}
.n153HomePointTable table,.pointTable table,.premiumTable table{border-collapse:separate!important;border-spacing:0!important}
.n153HomePointTable thead th,.pointTable th,.premiumTable th{
  background:linear-gradient(90deg,#12193b,#191133)!important;
  color:#dff8ff!important;
  border-bottom:1px solid rgba(57,232,255,.20)!important;
}
.n153HomePointTable tbody tr:nth-child(even),.pointTable tbody tr:nth-child(even),
.premiumTable tbody tr:nth-child(even){background:rgba(255,255,255,.018)!important}
.n153HomePointTable tbody tr:hover,.pointTable tbody tr:hover,.premiumTable tbody tr:hover{
  background:rgba(57,232,255,.055)!important;
}

/* BUTTONS */
button,.btn,.primaryBtn,.actionBtn,.submitBtn{
  border-radius:12px!important;
}
button:not(.menuBtn):not(.headerIconBtn):not(.headerProfileBtn):hover,
.btn:hover,.primaryBtn:hover,.actionBtn:hover,.submitBtn:hover{
  filter:brightness(1.08);
}
.primaryBtn,.btnPrimary,.actionBtn.primary,.submitBtn{
  background:linear-gradient(135deg,#20c9ee,#6d4dff)!important;
  border:1px solid rgba(145,240,255,.40)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(57,232,255,.16)!important;
}
.danger,.btnDanger,.deleteBtn{background:linear-gradient(135deg,#e83f69,#9b2cff)!important;color:#fff!important}
.success,.btnSuccess{background:linear-gradient(135deg,#18c98c,#76d83d)!important;color:#04120d!important}

/* INPUTS */
input,select,textarea{
  background:rgba(5,7,18,.82)!important;
  color:#f5f7ff!important;
  border:1px solid rgba(112,123,255,.23)!important;
  border-radius:12px!important;
}
input:focus,select:focus,textarea:focus{
  outline:none!important;
  border-color:rgba(57,232,255,.62)!important;
  box-shadow:0 0 0 3px rgba(57,232,255,.08),0 0 25px rgba(57,232,255,.08)!important;
}
::placeholder{color:#66718f!important}

/* LOGIN */
#authScreen{
  background:
    radial-gradient(circle at 20% 15%,rgba(57,232,255,.16),transparent 28%),
    radial-gradient(circle at 85% 25%,rgba(255,63,164,.13),transparent 28%),
    linear-gradient(145deg,#050611,#0a0b1b)!important;
}
#authScreen .loginCard,#authScreen .authCard,.loginCard,.authCard{
  background:linear-gradient(145deg,rgba(17,20,43,.95),rgba(7,8,19,.98))!important;
  border:1px solid rgba(112,123,255,.28)!important;
  border-radius:24px!important;
  box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 55px rgba(57,232,255,.06)!important;
}
#authScreen .loginCard:before,#authScreen .authCard:before{
  content:"NEXERA FC  /  APEX ARENA";
  display:block;color:#67eaff;font-size:9px;font-weight:900;letter-spacing:2.5px;
  margin-bottom:8px;
}

/* BID CENTER */
.bidControlCard,.nexaBidIntro,.nexaBidGuide{
  background:
    radial-gradient(circle at 85% 15%,rgba(255,63,164,.15),transparent 25%),
    linear-gradient(145deg,#17132e,#08091a)!important;
}
.bidControlCard .price,.bidControlCard .amount,.bidPrice,.bidAmount{
  color:var(--v277-gold)!important;
  text-shadow:0 0 18px rgba(255,214,90,.20);
}

/* ADMIN */
.adminContent,.adminHero{
  background:
    radial-gradient(circle at 90% 10%,rgba(139,92,255,.16),transparent 25%),
    linear-gradient(145deg,#12152e,#070914)!important;
}
.adminContent .card,.adminContent .panel{
  border-color:rgba(139,92,255,.20)!important;
}

/* DRAWER */
#drawer{
  background:rgba(7,8,18,.96)!important;
  border-left:1px solid rgba(57,232,255,.20)!important;
  box-shadow:-25px 0 70px rgba(0,0,0,.62)!important;
  backdrop-filter:blur(22px)!important;
}
#drawer .nxf-more-item,#drawer button,#drawer a{
  border-radius:11px!important;
}
#drawer .nxf-more-item:hover,#drawer a:hover{
  background:linear-gradient(90deg,rgba(57,232,255,.10),rgba(139,92,255,.10))!important;
}

/* MOBILE — premium app feel */
@media(max-width:600px){
  body{font-size:14px!important}
  .topbar{height:66px!important;padding:7px 10px!important}
  .brand{border-radius:14px!important;padding:4px 7px!important}
  .brand img{width:40px!important;height:40px!important}
  .n119TopWelcome{
    min-height:300px!important;
    padding:30px 22px!important;
    border-radius:23px!important;
  }
  .n119TopWelcome h1,.n119TopWelcome h2{
    font-size:37px!important;letter-spacing:-1.7px!important;
  }
  .n119TopWelcome:after{right:14px;bottom:12px;font-size:7px;letter-spacing:1.6px}
  .n119QuickGrid,.quickGrid,.quickActions{
    grid-template-columns:repeat(2,1fr)!important;
    gap:9px!important;
  }
  .n119QuickGrid>* ,.quickGrid>* ,.quickActions>*{
    min-height:92px!important;padding:13px!important;border-radius:15px!important;
  }
  .card,.panel,.matchCard,.fixtureCard,.tableWrap,.n119NextMatch{
    border-radius:17px!important;
  }
  .n119SectionTitle h2,.sectionTitle h2{font-size:19px!important}
  .n119TopPlayers{grid-template-columns:repeat(2,1fr)!important;gap:9px!important}
  input,select,textarea{font-size:14px!important;min-height:42px!important}
  button,.btn,.primaryBtn,.actionBtn,.submitBtn{min-height:40px!important}
}

/* Reduce motion for users who prefer it */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
