/* RESET */
*{box-sizing:border-box;margin:0;padding:0;font-family:"Roboto",sans-serif;color:#fff}


/*bg color #4C723F99;*/

/* POPUP */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /*better sizing on mobile*/
  background-color: #37552C99;
  display: flex;
  align-items: center;
  justify-content: center;

  /*fade it in*/
  opacity: 0;
  animation: fadeIn 0.2s ease-in forwards;
}

.popup {
  width:360px;                       
  background:#242C27;
  border:10px solid #161D19;         
  border-radius:24px;
  box-shadow:0 6px 18px rgba(0,0,0,.7);
  box-sizing:border-box;             /* include border in the width */
  overflow:hidden;

  /*scale pop it in*/
  transform-origin: center;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.popup-outer {
  transform-origin: center;
}

/* SCOREBOARD */
.scoreboard-inner{position:relative;height:150px;display:flex}
.half{flex:1;display:flex;align-items:center;justify-content:center}
.teamA{background:#3B253B}          /* adjust to taste */
.teamB{background:#2F311D}
.jersey.big{width:80px;height:80px; position:relative; top:-12px;}
.score{
  position:absolute;top:32px;left:50%;transform:translateX(-50%);
  font-size:36px;font-weight:800;letter-spacing:.02em
}
.match-description{
  position:absolute;top:78px;left:50%;transform:translateX(-50%);
  font-size:14px;color:#c8c8c8
}

/* TEAM BAR */
.team-bar,
.team-bar{ /* merge naming for safety */
  position:absolute;bottom:0;left:0;width:100%;display:flex;height:36px;font-size:15px;font-weight:600;text-transform:uppercase
}
.team.teamA-name{flex:1;background:#6C2E6B;text-align:center;line-height:36px;text-shadow: 0 1px 0 #000000}
.team.teamB-name{flex:1;background:#494C0F;text-align:center;line-height:36px;text-shadow: 0 1px 0 #000000}
.vs{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:#161D19;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px
}

/* HEADERS */
.season-date{text-align:center;font-size:14px;color:#aaa;margin:0px 0 6px; background:#161D19; padding: 10px;}
.winner{text-align:center;font-size:18px;margin-top:12px; margin-bottom:12px; }

/* GOALS */
.goals ul{list-style:none}
.goals li{
  display:flex;align-items:center;padding:8px;background:#161D19;border-radius:6px;margin-bottom:6px;margin-left:10px; margin-right:10px;
}
.jersey.small{width:26px;height:26px;margin-right:10px}
.goal-info{font-size:14px;line-height:1.2}
.scorer{font-weight:300}
.minute{font-size:12px;color:#bbb;margin-left:4px;font-style:italic;}
.kicks{font-size:12px;font-weight:600;display:block}
.kicks.bad{color:#CC6666}
.kicks.good{color:#cbff3d}
.kick-count{color:inherit}
.perfect-kick-count{color:inherit}
.view-goal-button{
  margin-left:auto;background:#6fe449;border:none;border-radius:5px;
  padding:6px 22px;font-weight:700;color:#000;cursor:pointer
}

.view-goal-button:hover{background:#9fe388;}

.goals h2{font-size:13px; color:#999999; text-align:center; margin-bottom:5px;}

/* BUTTONS */

button.simple {
  display:block;width:80%;margin:0 auto 22px;
  background:#b6ff9d;border:none;border-radius:6px;
  padding:12px 0;font-size:16px;font-weight:700;color:#000;cursor:pointer;
  margin-top:16px;
}

button.simple:hover {
  background:#cbfbbb;
}

button.simple.grey-button {
  background:#999999;
}

button.simple.grey-button:hover {
  background:#AAAAAA;
}

.split-group {
  display:flex;
  gap:10px;
  margin-left: 10px; 
  margin-right: 20px;
}

button.split {
  display:block; 
  margin:5px 0 10px;
  background:#b6ff9d;border:none;border-radius:6px;
  padding:10px 0;font-size:16px;font-weight:700;color:#000;cursor:pointer;
}

button.split:hover {
  background:#cbfbbb;
}

button.split.grey-button {
  background:#999999;
}

button.split.grey-button:hover {
  background:#AAAAAA;
}

/* STATS */
.stats{background:#161D19;padding:10px 0 5px;text-align:center}
.stats h3{font-size:13px;text-transform:uppercase;color:#989898;margin-bottom:5px; }
.stat-block{display:flex;justify-content:space-around;}
.stat .num{font-size:34px;font-weight:800}
.stat .label{font-size:11px;color:#aaa;text-transform:uppercase;line-height:1.15}

/* SHARING */
.share-info{text-align:center;font-size:16px;color:#808080;margin:18px 0 15px}

/* EXTRA STUFF */
.contents h3{font-size:24px;color:#FFFFFF;margin-bottom:6px; }

.popup .contents {padding:10px}

.popup .to-score {
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-bottom:-10px;
}

.popup .to-score img {
  width: 42px;
  height: auto;
  margin-right: 8px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/*example of using fade in*/
.fade-in {
  opacity: 0;
  animation: fadeIn 0.2s ease-in forwards;
}

@keyframes popIn {
  0%   { transform: scale(0.9); }
  60%  { transform: scale(1.05); } /* overshoot */
  100% { transform: scale(1); }   /* settle */
}

/*example of using pop-in*/
.pop-in {
  transform-origin: center;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}