/* Generell Styling */
      body {
          font-family: 'Poppins', sans-serif;
          background-color: #f7f9fc;
          color: #2d3e50;
          margin: 0;
          padding: 0;
          height: 100vh;
          display: flex;
          flex-direction: column;
          overflow: hidden;
      }
    
      /* Header */
      header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 40px;
          background-color: #1a202c;
          color: white;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          border-bottom: 3px solid #68d391;
      }
    
      header h1 {
          font-size: 36px;
          font-weight: 700;
          color: #68d391;
          text-transform: uppercase;
          letter-spacing: 3px;
          transition: color 0.3s ease;
      }
    
      header a {
          position: absolute;
          top: 1rem;
          right: 1rem;
          background-color: #007bff; /* Ensartet farge */
          color: white;
          padding: 0.75rem 1.5rem; /* Større padding for større knapper */
          text-decoration: none;
          border-radius: 10px; /* Samme avrunding som andre knapper */
          transition: background-color 0.3s;
          font-size: 1.25rem; /* Økt font-størrelse */
      }
    
      header a:hover {
          background-color: #0056b3;
      }
    
      /* Main Content */
      main {
          flex: 1;
          display: flex;
          background-color: #e9ecef;
          overflow: hidden;
      }
    
      /* Side Panels – felles stil for alle knapper */
      .side-panel {
          width: 140px;           /* Økt bredde for bedre plassering av større knapper */
          background-color: #1a202c;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 1rem 0;
          box-sizing: border-box;
      }
    
      /* Venstre sidepanel – rektangulære knapper */
      .side-panel.left button {
          margin: 1rem 0;         /* Konsistent margin for alle knapper */
          padding: 0.75rem 1rem;  /* Samme padding for alle knapper */
          font-size: 1.25rem;     /* Økt font-størrelse */
          border: none;
          border-radius: 10px;    /* Samme avrunding for alle knapper */
          background-color: #007bff; /* Ensartet farge */
          color: white;
          cursor: pointer;
          transition: background-color 0.3s ease, transform 0.2s;
          width: 140px;           /* Økt bredde for større tekst */
          height: 60px;           /* Økt høyde for bedre plassering */
          display: flex;
          align-items: center;
          justify-content: center;
      }
    
      .side-panel.left button:hover {
          background-color: #0056b3;
          transform: scale(1.05); /* Subtil skalering */
      }
    
      .side-panel.left button:active {
          transform: scale(0.95);
      }
    
      /* Høyre sidepanel – timeout-knapper plassert under + og – */
      .side-panel.right {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
    
      .side-panel.right .timeout-buttons {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;            /* Avstand mellom Timeout-knappene */
          margin-top: 1rem;       /* Avstand fra + og – knappene */
      }
    
      .side-panel.right button {
          margin: 0.5rem 0;
          padding: 0.75rem 1rem;
          font-size: 1.25rem;
          border: none;
          border-radius: 10px;
          background-color: #007bff;
          color: white;
          cursor: pointer;
          transition: background-color 0.3s ease, transform 0.2s;
          width: 140px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
      }
    
      .side-panel.right button:hover {
          background-color: #0056b3;
          transform: scale(1.05);
      }
    
      .side-panel.right button:active {
          transform: scale(0.95);
      }
    
      /* Knappen "Kampoversikt" i høyre sidepanel */
      .side-panel.right a.overview-btn {
          text-decoration: none;
          margin: 0.5rem 0;
          padding: 0.75rem 1rem;
          font-size: 1.25rem;
          border: none;
          border-radius: 10px;
          background-color: #007bff;      /* Samme blåfarge som andre knapper */
          color: white;
          cursor: pointer;
          width: 140px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color 0.3s ease, transform 0.2s;
      }
      .side-panel.right a.overview-btn:hover {
          background-color: #0056b3;
          transform: scale(1.05);
      }
      .side-panel.right a.overview-btn:active {
          transform: scale(0.95);
      }
    
      /* Scoreboard Container */
      .scoreboard-container {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 1rem;
          box-sizing: border-box;
          overflow: hidden;
      }
    
      /* Scoreboard */
      .scoreboard {
          background-color: #ffffff;
          padding: 2rem;          /* Økt padding for bedre plass */
          border-radius: 20px;
          width: 100%;
          max-width: none;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: center;
      }
    
      /* Øk font-størrelsen på tidtakeren */
      .timer {
          font-size: min(18vw, 16vh);    /* Enda større tall uten å fylle mer enn skjermen */
          margin-bottom: 0.5rem;
          letter-spacing: 4px;
          color: #2d3e50;
          text-align: center;
      }
    
      /* Øk font-størrelsen på poengsummen */
      .score {
          font-size: min(16vw, 14vh);   /* Større resultat */
          text-align: center;
          margin-bottom: 0.5rem;
          color: #007bff;
      }
    
      .timeout-timer {
          font-size: min(3vw, 4vh);
          margin-bottom: 1rem;
          color: #ff5722;
          text-align: center;
          display: none;
      }
    
      /* Period */
      .period {
          font-size: min(3vw, 4vh);
          margin-bottom: 1rem;
          text-transform: uppercase;
          color: #2d3e50;
          text-align: center;
      }
    
      /* Scores */
      .scores {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 2rem;
          width: 100%;
      }

      .scores .timer {
          margin: 0 1rem;
      }
    
      .score-section {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;
          margin: 0.5rem;
          box-sizing: border-box;
      }
    
      /* Team Name */
      .team-name {
          font-size: min(3vw, 4vh);
          margin-bottom: 1rem;
          text-transform: uppercase;
          color: #2d3e50;
          text-align: center;
      }
    
      /* Score Controls */
      .score-controls {
          display: flex;
          flex-direction: row;    /* Plasser knappene horisontalt */
          flex-wrap: wrap;        /* La knappene brytes over flere linjer */
          align-items: center;
          justify-content: center;
          gap: 0.5rem;            /* Avstand mellom knappene */
      }
    
      .score-controls .adjust-buttons {
          display: flex;
          gap: 1rem;              /* Avstand mellom + og – knappene */
      }
    
      .score-controls .score-button,
      .score-controls .time-button {
          font-size: 1.25rem;
          padding: 0.75rem 1rem;
          border: none;
          border-radius: 10px;
          background-color: #007bff;
          color: white;
          cursor: pointer;
          width: 140px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color 0.3s ease, transform 0.2s;
      }
    
      .score-controls .score-button:hover,
      .score-controls .time-button:hover {
          background-color: #0056b3;
          transform: scale(1.05);
      }
    
      .score-controls .score-button:active,
      .score-controls .time-button:active {
          transform: scale(0.95);
      }
    
      /* Modal */
      .modal {
          display: none;
          position: fixed;
          z-index: 3001;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0, 0, 0, 0.4);
          padding-top: 5rem;
      }
    
      .modal-content {
          background-color: white;
          margin: auto;
          padding: 1rem;
          border: 1px solid #888;
          width: 90%;
          max-width: 500px;
          border-radius: 10px;
          color: #2d3e50;
      }
    
      .close {
          color: #aaa;
          float: right;
          font-size: 2rem;
          font-weight: bold;
          cursor: pointer;
      }
    
      .close:hover,
      .close:focus {
          color: black;
          text-decoration: none;
      }
    
      /* Player List */
      .player-list {
          list-style-type: none;
          padding: 0;
          font-size: 1.5rem;
          color: #2d3e50;
      }
    
      .player-list li {
          padding: 0.5rem;
          border-bottom: 1px solid #dee2e6;
          cursor: pointer;
          transition: background-color 0.3s ease;
      }
    
      .player-list li:hover {
          background-color: #f8f9fa;
      }
    
      /* Time-adjust buttons */
      .time-adjust-buttons {
          display: flex;
          gap: 1rem;
          margin-bottom: 1rem;
          justify-content: center;
      }
    
      .time-adjust-buttons .time-button {
          font-size: 1.25rem;
          padding: 0.75rem 1rem;
          border: none;
          border-radius: 10px;
          background-color: #007bff;
          color: white;
          cursor: pointer;
          width: 120px;
          transition: background-color 0.3s ease, transform 0.2s;
      }
    
      .time-adjust-buttons .time-button:hover {
          background-color: #0056b3;
          transform: scale(1.05);
      }
    
      .time-adjust-buttons .time-button:active {
          transform: scale(0.95);
      }
    
      /* Responsiv justering av fontstørrelser for mindre skjermer */
      @media (max-width: 768px) {
          .timer, .score {
              font-size: 28vw;
          }
          .period, .team-name, .timeout-timer {
              font-size: 5vw;
          }
          .score-controls .score-button,
          .score-controls .time-button,
          .side-panel button {
              font-size: 1.5rem;
              width: 120px;
              height: 50px;
              padding: 0.5rem 0.75rem;
          }
          .side-panel {
              width: 140px;
          }
      }
    
      /* Straffesparkkonkurranse-UI */
      .modal-content.penalty { max-width: 600px; }
      .penalty-ui { display: flex; align-items: center; justify-content: space-around; }
      .team-panel { text-align: center; }
      .dot-container { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
      .dot { width: 20px; height: 20px; background: #ccc; border-radius: 50%; }
      .dot.score { background: green; }
      .dot.miss  { background: red; }
      .control-panel { text-align: center; }
      #currentShooter { margin-bottom: 10px; font-weight: bold; }
      .penalty-btn {
          margin: 0 5px;
          padding: 10px 20px;
          border: none;
          border-radius: 5px;
          background: #007bff;
          color: white;
          cursor: pointer;
      }
.penalty-btn:hover { background: #0056b3; }

.yellow-button { background-color: #f6e05e; color: #2d3e50; }
.red-button { background-color: #e53e3e; color: white; }
.penalty-button { background-color: #ed8936; color: white; }
.yellow-button:hover { background-color: #ecc94b; }
.red-button:hover { background-color: #c53030; }
.penalty-button:hover { background-color: #dd6b20; }

/* Card and penalty displays */
.card-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.card {
    padding: 2px 4px;
    border-radius: 3px;
    color: white;
}

.yellow-card { background-color: #f6e05e; color: #2d3e50; }
.red-card { background-color: #e53e3e; color: #fff; }

.penalty-display { margin-top: 0.5rem; text-align: center; }
.penalty-item {
    background-color: #ed8936;
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    margin: 2px 0;
    display: inline-block;
}
.penalty-time { margin-left: 4px; }
    
@media (max-width: 480px) {
    .timer, .score {
        font-size: 32vw;
    }
    .period, .team-name, .timeout-timer {
        font-size: 6vw;
    }
    .score-controls .score-button,
    .score-controls .time-button,
    .side-panel button {
        font-size: 1.2rem;
        width: 100px;
        height: 44px;
    }
    .side-panel {
        width: 120px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .timer, .score {
        font-size: 20vw;
    }
    .period, .team-name, .timeout-timer {
        font-size: 4vw;
    }
}

/* Next Match Popup */
#nextMatchModal .modal-content {
    text-align: center;
    padding: 2rem;
    max-width: 400px;
}

#nextMatchModal h2 {
    margin-top: 0;
    color: #1a202c;
}

#nextMatchModal p {
    margin: 1rem 0;
    font-size: 1.2rem;
}

#nextMatchModal .time-button {
    font-size: 1.25rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    background-color: #007bff;
    color: white;
    cursor: pointer;

    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;

    transition: background-color 0.3s ease, transform 0.2s;
}

#nextMatchModal .time-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

#nextMatchModal .time-button:active {
    transform: scale(0.95);
}

#nextMatchModal .next-match-actions {
    margin-top: 1rem;
}