/* ==================================================
   FOOTBALL PREDICTION CENTER V2
   WORDPRESS / NETLIFY SAFE CSS
================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {

  background:
    radial-gradient(
      circle at top,
      rgba(0,255,255,.08),
      transparent 45%
    );

  color: #eaffff;

  font-family:
    Inter,
    Segoe UI,
    Arial,
    sans-serif;

}


/* ==================================================
   APP
================================================== */

#nyuk-football-app {

  width: 100%;

  max-width: 1500px;

  margin: 0 auto;

  padding: 18px;

}


/* ==================================================
   GLASS
================================================== */

#nyuk-football-app .nf-glass {

  background:
    rgba(5,18,20,.42);

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

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:

    0 0 30px
    rgba(0,255,255,.08),

    inset 0 1px 0
    rgba(255,255,255,.06);

}


/* ==================================================
   HEADER
================================================== */

#nyuk-football-app .nf-header {

  position: relative;

  overflow: hidden;

  padding: 25px;

  border-radius: 24px;

  margin-bottom: 16px;

}


#nyuk-football-app .nf-header::before {

  content: "";

  position: absolute;

  width: 260px;

  height: 260px;

  right: -100px;

  top: -150px;

  background:
    rgba(0,255,255,.15);

  filter:
    blur(50px);

  border-radius: 50%;

}


#nyuk-football-app .nf-header::after {

  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  left: -90px;

  bottom: -120px;

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

  filter:
    blur(45px);

  border-radius: 50%;

}


#nyuk-football-app .nf-brand {

  position: relative;

  z-index: 2;

}


#nyuk-football-app .nf-title {

  margin: 0;

  font-size:
    clamp(
      25px,
      4vw,
      42px
    );

  font-weight: 900;

  letter-spacing: .5px;

  color: #eaffff;

  text-shadow:
    0 0 12px
    rgba(0,255,255,.55);

}


#nyuk-football-app .nf-subtitle {

  margin-top: 7px;

  color:
    rgba(180,255,255,.7);

  font-size: 13px;

}


/* ==================================================
   STATUS
================================================== */

#nyuk-football-app .nf-status {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  margin-top: 16px;

  padding: 7px 12px;

  border-radius: 999px;

  background:
    rgba(0,255,200,.07);

  border:
    1px solid
    rgba(0,255,200,.25);

  font-size: 11px;

  color: #9ffff5;

}


#nyuk-football-app .nf-status-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #00ffd5;

  box-shadow:
    0 0 10px #00ffd5;

  animation:
    nfPulse 1.5s ease-in-out infinite;

}


@keyframes nfPulse {

  0%,
  100% {
    opacity: .45;
    transform: scale(.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }

}


/* ==================================================
   FILTER
================================================== */

#nyuk-football-app .nf-filter {

  display: grid;

  grid-template-columns:
    minmax(150px,1fr)
    minmax(150px,1fr)
    minmax(200px,1.5fr)
    auto;

  gap: 10px;

  padding: 14px;

  border-radius: 20px;

  margin-bottom: 16px;

}


#nyuk-football-app .nf-input,
#nyuk-football-app .nf-select,
#nyuk-football-app .nf-button {

  min-height: 46px;

  border-radius: 12px;

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

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

  color: #eaffff;

  padding:
    0 13px;

  outline: none;

  font-size: 13px;

}


#nyuk-football-app .nf-input::placeholder {

  color:
    rgba(220,255,255,.38);

}


#nyuk-football-app .nf-input:focus,
#nyuk-football-app .nf-select:focus {

  border-color:
    rgba(0,255,255,.7);

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

}


#nyuk-football-app .nf-select option {

  background:
    #071113;

  color:
    white;

}


#nyuk-football-app .nf-button {

  cursor: pointer;

  padding:
    0 18px;

  font-weight: 800;

  color:
    #001516;

  background:
    linear-gradient(
      135deg,
      #00fff0,
      #00cfd5
    );

  border: none;

  box-shadow:
    0 0 18px
    rgba(0,255,255,.22);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;

}


#nyuk-football-app .nf-button:hover {

  transform:
    translateY(-2px);

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

}


#nyuk-football-app .nf-button:disabled {

  opacity: .6;

  cursor:
    wait;

  transform:
    none;

}


/* ==================================================
   SUMMARY
================================================== */

#nyuk-football-app .nf-summary {

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

}


#nyuk-football-app .nf-count {

  font-size: 13px;

  color:
    rgba(210,255,255,.72);

}


#nyuk-football-app .nf-date-title {

  font-weight: 900;

  color:
    #7ffff8;

  text-shadow:
    0 0 12px
    rgba(0,255,255,.2);

}


/* ==================================================
   MATCH GRID
================================================== */

#nyuk-football-app .nf-grid {

  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(300px,1fr)
    );

  gap: 13px;

}


/* ==================================================
   MATCH CARD
================================================== */

#nyuk-football-app .nf-match {

  position: relative;

  overflow: hidden;

  border-radius: 20px;

  padding: 15px;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;

}


#nyuk-football-app .nf-match:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(0,255,255,.55);

  box-shadow:

    0 0 35px
    rgba(0,255,255,.13),

    inset 0 1px 0
    rgba(255,255,255,.08);

}


#nyuk-football-app .nf-match::after {

  content: "";

  position: absolute;

  left: -50%;

  top: 0;

  width: 50%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #00ffff,
      transparent
    );

  animation:
    nfScan 4s linear infinite;

}


@keyframes nfScan {

  0% {
    left: -50%;
  }

  100% {
    left: 120%;
  }

}


/* ==================================================
   LEAGUE
================================================== */

#nyuk-football-app .nf-league {

  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;

  margin-bottom: 12px;

}


#nyuk-football-app .nf-league img {

  width: 27px;

  height: 27px;

  object-fit:
    contain;

}


#nyuk-football-app .nf-league-name {

  min-width: 0;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size: 11px;

  font-weight: 800;

  color:
    rgba(220,255,255,.75);

}


#nyuk-football-app .nf-country {

  font-size: 10px;

  color:
    rgba(160,255,255,.5);

}


/* ==================================================
   TIME
================================================== */

#nyuk-football-app .nf-time {

  text-align:
    center;

  margin:
    5px 0 14px;

}


#nyuk-football-app .nf-hour {

  font-size: 22px;

  font-weight: 900;

  color:
    #eaffff;

  text-shadow:
    0 0 12px
    rgba(0,255,255,.35);

}


#nyuk-football-app .nf-status-text {

  margin-top: 3px;

  font-size: 10px;

  color:
    #72fff4;

}


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

#nyuk-football-app .nf-teams {

  display: grid;

  grid-template-columns:
    1fr
    42px
    1fr;

  align-items:
    center;

  gap: 8px;

}


#nyuk-football-app .nf-team {

  display: flex;

  align-items:
    center;

  gap: 8px;

  min-width: 0;

}


#nyuk-football-app .nf-team-away {

  flex-direction:
    row-reverse;

  text-align:
    right;

}


#nyuk-football-app .nf-team img {

  width: 42px;

  height: 42px;

  object-fit:
    contain;

  flex:
    0 0 auto;

}


#nyuk-football-app .nf-team-name {

  font-size: 13px;

  font-weight: 800;

  line-height: 1.25;

  word-break:
    normal;

}


#nyuk-football-app .nf-vs {

  text-align:
    center;

  color:
    rgba(150,255,255,.4);

  font-size: 10px;

  font-weight: 900;

}


/* ==================================================
   PREDICTION AREA
================================================== */

#nyuk-football-app .nf-prediction {

  margin-top: 14px;

  padding-top: 13px;

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

}


#nyuk-football-app .nf-prediction-title {

  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  font-size: 10px;

  color:
    rgba(190,255,255,.55);

  margin-bottom: 8px;

}


#nyuk-football-app .nf-prediction-main {

  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: 10px;

}


#nyuk-football-app .nf-prediction-value {

  font-size: 15px;

  font-weight: 900;

  color:
    #75fff5;

  text-shadow:
    0 0 10px
    rgba(0,255,255,.22);

}


#nyuk-football-app .nf-prediction-confidence {

  font-size: 10px;

  color:
    rgba(190,255,255,.5);

}


/* ==================================================
   PREDICTION DETAIL
================================================== */

#nyuk-football-app .nf-prediction-detail {

  display: none;

  margin-top: 13px;

}


#nyuk-football-app .nf-prediction-detail.nf-prediction-open {

  display: block;

  animation:
    nfPredictionOpen
    .35s ease both;

}


@keyframes nfPredictionOpen {

  from {

    opacity: 0;

    transform:
      translateY(-8px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* ==================================================
   PREDICTION BOX
================================================== */

#nyuk-football-app .nf-prediction-box {

  position: relative;

  overflow: hidden;

  padding: 13px;

  border-radius: 15px;

  background:
    rgba(0,18,20,.62);

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

  box-shadow:

    0 0 22px
    rgba(0,255,255,.08),

    inset 0 1px 0
    rgba(255,255,255,.04);

}


/* ==================================================
   PREDICTION HEADER
================================================== */

#nyuk-football-app .nf-prediction-box-header {

  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: 8px;

  padding-bottom:
    10px;

  margin-bottom:
    10px;

  border-bottom:
    1px solid
    rgba(0,255,255,.12);

  font-size: 9px;

  font-weight: 900;

  letter-spacing:
    .5px;

  color:
    #7ffff8;

}


#nyuk-football-app .nf-prediction-box-header div:last-child {

  color:
    rgba(200,255,255,.38);

  font-size:
    8px;

}


/* ==================================================
   PREDICTED SCORE
================================================== */

#nyuk-football-app .nf-score-label {

  text-align:
    center;

  font-size: 9px;

  font-weight: 900;

  letter-spacing:
    1px;

  color:
    rgba(190,255,255,.5);

}


#nyuk-football-app .nf-predicted-score {

  text-align:
    center;

  margin:
    3px 0 13px;

  font-size: 29px;

  line-height: 1;

  font-weight:
    1000;

  color:
    #00fff0;

  text-shadow:

    0 0 7px
    rgba(0,255,240,.7),

    0 0 22px
    rgba(0,255,255,.35);

}


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

#nyuk-football-app .nf-prediction-grid {

  display: grid;

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

  gap: 7px;

}


/* ==================================================
   PICK CARD
================================================== */

#nyuk-football-app .nf-pick-card {

  min-width: 0;

  padding:
    9px 6px;

  text-align:
    center;

  border-radius:
    10px;

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

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

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;

}


#nyuk-football-app .nf-pick-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(0,255,255,.48);

  box-shadow:
    0 0 15px
    rgba(0,255,255,.08);

}


#nyuk-football-app .nf-pick-title {

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .7px;

  color:
    rgba(180,255,255,.55);

}


#nyuk-football-app .nf-pick-value {

  margin-top:
    5px;

  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    1000;

  color:
    #00ffb7;

  text-shadow:
    0 0 8px
    rgba(0,255,190,.3);

  word-break:
    break-word;

}


#nyuk-football-app .nf-pick-small {

  margin-top:
    4px;

  font-size:
    7px;

  line-height:
    1.25;

  color:
    rgba(220,255,255,.42);

}


/* ==================================================
   PERCENTAGE
================================================== */

#nyuk-football-app .nf-percent-section {

  margin-top:
    10px;

  padding:
    10px;

  border-radius:
    10px;

  background:
    rgba(0,255,255,.025);

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

}


#nyuk-football-app .nf-percent-title {

  text-align:
    center;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .7px;

  color:
    rgba(190,255,255,.5);

  margin-bottom:
    8px;

}


#nyuk-football-app .nf-percent-row {

  display:
    grid;

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

  gap:
    5px;

}


#nyuk-football-app .nf-percent-item {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    3px;

}


#nyuk-football-app .nf-percent-item span {

  font-size:
    7px;

  color:
    rgba(200,255,255,.45);

  font-weight:
    800;

}


#nyuk-football-app .nf-percent-item strong {

  font-size:
    12px;

  color:
    #78fff5;

  font-weight:
    1000;

}


/* ==================================================
   ADVICE
================================================== */

#nyuk-football-app .nf-advice {

  margin-top:
    9px;

  padding:
    9px 10px;

  border-radius:
    10px;

  background:
    rgba(0,255,200,.035);

  border-left:
    2px solid
    #00ffd5;

}


#nyuk-football-app .nf-advice-title {

  font-size:
    8px;

  font-weight:
    900;

  color:
    rgba(190,255,255,.5);

}


#nyuk-football-app .nf-advice-value {

  margin-top:
    4px;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    800;

  color:
    #dffffb;

}


/* ==================================================
   WINNER LINE
================================================== */

#nyuk-football-app .nf-winner-line {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    9px;

  padding-top:
    9px;

  border-top:
    1px solid
    rgba(0,255,255,.09);

  font-size:
    8px;

  color:
    rgba(190,255,255,.45);

}


#nyuk-football-app .nf-winner-line strong {

  max-width:
    60%;

  text-align:
    right;

  font-size:
    10px;

  color:
    #00fff0;

  font-weight:
    1000;

}


/* ==================================================
   PREDICTION LOADING
================================================== */

#nyuk-football-app .nf-prediction-loading {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    65px;

  text-align:
    center;

  font-size:
    10px;

  color:
    rgba(200,255,255,.65);

}


#nyuk-football-app .nf-mini-loader {

  width:
    17px;

  height:
    17px;

  flex:
    0 0 auto;

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

  border-top-color:
    #00fff0;

  border-radius:
    50%;

  animation:
    nfSpin .7s linear infinite;

}


@keyframes nfSpin {

  to {

    transform:
      rotate(360deg);

  }

}


/* ==================================================
   PREDICTION ERROR
================================================== */

#nyuk-football-app .nf-prediction-error {

  padding:
    14px 10px;

  text-align:
    center;

  border-radius:
    10px;

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

  border:
    1px solid
    rgba(255,80,100,.15);

  font-size:
    10px;

  line-height:
    1.5;

  color:
    rgba(255,220,225,.75);

}


/* ==================================================
   EMPTY / ERROR
================================================== */

#nyuk-football-app .nf-message {

  padding:
    50px 20px;

  text-align:
    center;

  border-radius:
    20px;

}


#nyuk-football-app .nf-message-title {

  font-size:
    18px;

  font-weight:
    900;

}


#nyuk-football-app .nf-message-text {

  margin-top:
    8px;

  font-size:
    12px;

  color:
    rgba(220,255,255,.55);

}


/* ==================================================
   LOADING
================================================== */

#nyuk-football-app .nf-loading-screen {

  min-height:
    400px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  text-align:
    center;

}


#nyuk-football-app .nf-loader {

  width:
    48px;

  height:
    48px;

  border:
    3px solid
    rgba(0,255,255,.12);

  border-top-color:
    #00ffff;

  border-radius:
    50%;

  animation:
    nfSpin .8s linear infinite;

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

}


#nyuk-football-app .nf-loading-title {

  margin-top:
    18px;

  font-weight:
    900;

  font-size:
    14px;

}


#nyuk-football-app .nf-loading-text {

  margin-top:
    6px;

  font-size:
    11px;

  color:
    rgba(200,255,255,.5);

}


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

@media (
  max-width: 900px
) {

  #nyuk-football-app {

    padding:
      12px;

  }


  #nyuk-football-app .nf-filter {

    grid-template-columns:
      1fr 1fr;

  }


  #nyuk-football-app .nf-filter .nf-search {

    grid-column:
      1 / -1;

  }


  #nyuk-football-app .nf-filter .nf-button {

    grid-column:
      1 / -1;

  }


  #nyuk-football-app .nf-grid {

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

  }


  #nyuk-football-app .nf-prediction-grid {

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

  }

}


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

@media (
  max-width: 600px
) {

  #nyuk-football-app {

    padding:
      8px;

  }


  #nyuk-football-app .nf-header {

    padding:
      19px;

    border-radius:
      18px;

  }


  #nyuk-football-app .nf-title {

    font-size:
      clamp(
        23px,
        8vw,
        32px
      );

    line-height:
      1.05;

  }


  #nyuk-football-app .nf-subtitle {

    font-size:
      11px;

  }


  #nyuk-football-app .nf-filter {

    grid-template-columns:
      1fr;

    padding:
      11px;

  }


  #nyuk-football-app .nf-filter .nf-search {

    grid-column:
      auto;

  }


  #nyuk-football-app .nf-filter .nf-button {

    grid-column:
      auto;

  }


  #nyuk-football-app .nf-grid {

    grid-template-columns:
      1fr;

    gap:
      10px;

  }


  #nyuk-football-app .nf-match {

    padding:
      13px;

  }


  #nyuk-football-app .nf-team img {

    width:
      38px;

    height:
      38px;

  }


  #nyuk-football-app .nf-team-name {

    font-size:
      12px;

  }


  #nyuk-football-app .nf-hour {

    font-size:
      20px;

  }


  #nyuk-football-app .nf-prediction-grid {

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

  }


  #nyuk-football-app .nf-predicted-score {

    font-size:
      27px;

  }


  #nyuk-football-app .nf-pick-value {

    font-size:
      12px;

  }


  #nyuk-football-app .nf-summary {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}


/* ==================================================
   SMALL PHONE
================================================== */

@media (
  max-width: 380px
) {

  #nyuk-football-app .nf-header {

    padding:
      16px;

  }


  #nyuk-football-app .nf-title {

    font-size:
      22px;

  }


  #nyuk-football-app .nf-teams {

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

  }


  #nyuk-football-app .nf-team-name {

    font-size:
      11px;

  }


  #nyuk-football-app .nf-team img {

    width:
      34px;

    height:
      34px;

  }


  #nyuk-football-app .nf-pick-card {

    padding:
      8px 4px;

  }


  #nyuk-football-app .nf-pick-title {

    font-size:
      7px;

  }


  #nyuk-football-app .nf-pick-value {

    font-size:
      11px;

  }

}