body {
      /scale: 180%;
      background-color: #333;
      justify-content: center;
      align-items: center;
      font-family: "Outfit", sans-serif;
      color: white;
          }

    .card {
      width: 24.8vh;
      overflow: hidden;
      margin: 0 auto;
    }

    .player-active {
      background-color: white;
      color: black;
    }
    
        .player-blue {
      background-color: #23406B;
      text-shadow: 0px 2px #222;
      color: white;
    }
    
        .player-red {
      background-color: #6c2727;
      text-shadow: 0px 2px #222;
      color: white;
    }
        
        .player-green {
      background-color: #2c6c27;
      text-shadow: 0px 2px #222;
      color: white;
    }
        
        .player-purple {
      background-color: #43276c;
      text-shadow: 0px 2px #222;
      color: white;
    }
                    
    .top-bar {
      font-optical-sizing: auto;
      font-weight: 400;
      padding: 5px;
      text-align: center;
      font-size: 3vh;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      border-top: 2px solid white;
          border-bottom: 2px solid rgba(255, 255, 255, 0,5);
    }

    .score-active {
      box-shadow:     inset 0 -6px 0 white,   /* bottom */
                      inset -6px 0 0 white,   /* left */
                      inset 6px 0 0 white;    /* right */
    }
     

    .score {
      font-optical-sizing: auto;
      font-weight: 800;
      font-style: normal;
      background-color: rgba(255, 255, 255, 0.15); 
      color: white;
      font-size: 13vh;;
      text-align: center;
      text-shadow: 0px 3px #222;
      padding: 0px 0;
            border-bottom: 2px solid rgba(31, 31, 31, 1);
        overflow: hidden; 
      padding-bottom: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .score-stat {
                height: 11.65vh;
    }
    
        .score-no-stat {
                height: 15vh;
    }


    .stats-all {
      display: none;
    }
    
    .hide {
      display: none;
    }
    
    .stats-row {

      display: flex;
      justify-content: space-between;
      gap: 2px;
      padding: 2px 0;
    }

 
    .stat-box {
      flex: 1;
      text-align: center;
      padding: 5px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      border-bottom: 2px solid rgba(31, 31, 31, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 4.66vh;
      box-sizing: border-box;
        font-optical-sizing: auto;
        font-weight: 500;
      font-style: normal;
      font-size: 2vh;
      color: rgba(0, 0, 0, 0.5); 
    }
    
    .stat-box span {
            font-size: 1.1vh;
      margin-top: -11px;
        font-weight: 500;
            font-style: normal;
            padding: 6px;
    }

   
    .footer-row {
      display: flex;
      justify-content: space-between;
      gap: 2px;
      overflow: hidden;
    }

    .footer-box {
      flex: 1;
      text-align: center;
      padding: 5px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      background-color: #7c7c7c;
      color: white;
      height: 35px;
      box-sizing: border-box;
      border-bottom: 2px solid rgba(31, 31, 31, 1);
      font-weight: 300;
            font-style: normal;
      font-size: 1.2vh;
            padding: -11px; 
    }

    .grey { background-color: #afafaf;}
    .green { background-color: #4caf50;}
    .orange { background-color: #ff9800;}
    .red { background-color: #f44336;}
    .yellow { background-color: #ffeb3b;}
    .last { border-radius: 20px;}
    
    .left {
      border-bottom-left-radius: 15px;
    }

    .right {
      border-bottom-right-radius: 15px;
    }