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


body{

    background:
    linear-gradient(135deg,#fa055f,#1a1a1a,#101010);

    color:#FFF;

}

/* ==========================
   LIVE TEXT
========================== */

.live-text{
    font-size:30px;
    font-weight:700;
    color:#ff2020;
    animation:blink 1s infinite;
}

@keyframes blink{
    0%,100%{
        opacity:1;
    }
    50%{
        opacity:.35;
    }
}

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

.kickoff-box{
  margin-top:6px;

  padding:5px;

  border-radius:6px;

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

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

  text-align:center;
}

.kickoff-title{
  font-size:10px;
  font-weight:700;

  letter-spacing:1px;

  color:#ffd700;

  margin-bottom:2px;
}

.kickoff-date{
  font-size:11px;
  font-weight:600;
}

.kickoff-time{
  font-size:15px;
  font-weight:bold;

  color:#f20781;

  margin-top:1px;
}

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

.countdown{
  display:flex;
  justify-content:center;

  gap:5px;

  margin-top:9px;

  flex-wrap:wrap;
}

.time-box{
  background:#000;

  padding:7px 8px;

  border-radius:10px;

  min-width:46px;

  text-align:center;
}

.time-box span{
  font-size:12px;
  font-weight:bold;

  color:#ffdf29;
}

.time-box p{
  font-size:12px;

  margin:0;
}

/* ================= BUTTON ================= */

.play-btn{
  margin:12px auto 5px auto;

  padding: 6px 10px ;

  font-size:11px;

  border-radius:6px;

  display:inline-block;

  color:#fff;

  text-align:center;

  box-shadow:0 0 10px rgba(255,0,0,0.6);

  animation:glowBtn 1.5s infinite alternate;

  cursor:pointer;

  transition:0.2s;
}

.play-btn.disabled{
  pointer-events:none;

  background:#ffd700;
  color:red;

  box-shadow:none;
}

.play-btn.enabled{
  background:linear-gradient(45deg,#ff0055,#ff7b00);
}

.play-btn.enabled:hover{
  transform:scale(1.05);
}

@keyframes glowBtn{

  from{
    box-shadow:0 0 5px rgba(255,0,0,0.5);
  }

  to{
    box-shadow:0 0 15px rgba(255,0,0,1);
  }

}

/* ================= LIVE DOT ================= */

.live-dot{
  display:inline-block;

  width:6px;
  height:6px;

  background:#ff0000;

  border-radius:50%;

  margin-right:5px;

  animation:liveBlink 1s infinite;
}

@keyframes liveBlink{

  0%,100%{
    opacity:1;
  }

  50%{
    opacity:0.3;
  }

}

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

.kickoff-title{
  font-size:10px;
}

.kickoff-date{
  font-size:10px;
}

.kickoff-time{
  font-size:10px;
}

.countdown{
  gap:8px;
  margin-top:10px;
}

.time-box{
  min-width:25px;
  padding:10px;
  border-radius:10px;
}

.time-box span{
  font-size:9px;
}

.time-box p{
  font-size:10px;
}

.play-btn{
  font-size:11px;
  padding:11px;
  margin-top:8px;
}


//* ================= DESKTOP ================= */
@media (min-width:1024px){

  .kickoff-title{
    font-size:13px;
  }

  .kickoff-date{
    font-size:13px;
  }

  .kickoff-time{
    font-size:17px;
  }

  .time-box{
    min-width:42px;
    padding:8px 9px;
  }

  .time-box span{
    font-size:16px;
  }

  .time-box p{
    font-size:11px;
  }

  .play-btn{
    font-size:13px;
    padding:9px 16px;
  }

  .event-header h2{
    font-size:14px;
  }

  .event-subtitle{
    font-size:12px;
  }

  .live-text{
    font-size:32px;
  }

}

/* ================= MOBILE ================= */
@media(max-width:480px){

  .match-box{
    min-width:80vw;
    max-width:80vw;
    padding:10px;
  }

  .team img{
    width:42px;
  }

  .team h2{
    font-size:11px;
  }

  .kickoff-time{
    font-size:12px;
  }

  .watch-btn{
    width:100%;
    text-align:center;
    font-size:12px;
  }

}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.05);}
    100%{transform:scale(1);}

}

.event-header{
    text-align:center;
    margin:8px auto 10px;
    padding:8px 10px;
    background:#FFF;
    border:1px solid #2d2d2d;
    border-left:4px solid #e10600;
    border-radius:8px;
    max-width:360px;
}

.event-header h2{
    margin:0;
    font-size:9px;
    font-weight:400;
    color:#fff;
    line-height:1.3;
}

.event-subtitle{
    margin-top:7px;
    font-size:11px;
    color:#0cf095;
    line-height:1;
}