:root {
      /* Colours sampled from the design */
      --green: #005c3b;
      --red: #b60028;
      --light: #f8f8f8;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      margin: 0;
      font-family: "Lato", system-ui, sans-serif;
      background: #fff;
      color: var(--green);
    }

    /* ————————————————————————————————
       Top Navigation Bar
    */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid #ececec;
    }

    .icon-btn {
      background: none;
      border: 0;
      font-size: 1.5rem;
      color: var(--green);
      cursor: pointer;
      line-height: 1;
    }

    .logo {
      height: 56px;
      object-fit: contain;
    }

    /* ————————————————————————————————
       Horizontal scroll of player avatars
    */
    .top-players-wrapper {
	    margin-top: 10px;
      overflow-x: auto;
      border-bottom: 1px solid #ececec;
      padding: 0.5rem 0;
      padding-inline:1rem;
      scroll-snap-type: x mandatory;
      display:flex;
      justify-content:center;
    }

    .top-players-wrapper::-webkit-scrollbar {
      height: 6px;
    }
    .top-players-wrapper::-webkit-scrollbar-thumb {
      background: #c7c7c7;
      border-radius: 3px;
    }

    #players {
      display: flex;
      gap: 0.75rem;
      padding: 0 1rem;
      width:max-content;
    }

    @media (min-width: 600px) {
      #players {
        margin-inline:auto;
      }
    }

    /* Populated dynamically by jQuery */
    .player {
      flex: 0 0 auto;
      width: 72px;
      text-align: center;
      font-size: 0.7rem;
      position: relative;
      scroll-snap-align: start;
    }
    .player img {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .player .badge {
      position: absolute;
      top: 5px;
      right: 10px;
      transform: translate(50%, -50%);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      font-size: 0.65rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      box-shadow: 0 0 0 2px #fff;
    }

    /* ————————————————————————————————
       Section heading
    */
    h1 {
      font-family: "Playfair Display", serif;
      text-align: center;
      font-size: 2.3rem;
      margin: 1.6rem 0;
    }

    h4 {
      font-family: "Playfair Display", serif;
      text-align: center;
      font-size: 1.9rem;
      margin-top: 0px;
      margin-bottom: 5px;
    }

.text-box{
  max-width:800px;         /* aldri bredere enn 700 px  */
  margin:0 auto;           /* auto venstre + høyre  →  sentrum */
  padding:0 20px;          /* 20 px luft inne i boksen */
  box-sizing:border-box;   /* gjør at padding ikke øker totalbredden */
  text-align:left;         /* eksplisitt venstrejustert tekst (default) */
}

.text-box img {
  display:block;
  margin:0 auto;
}

.bunnbilde {
  display:block;
  margin:0 auto;
  width: 100px;
  height: 100px;
}

    /* ————————————————————————————————
       Leader board table
    */
    .table-wrapper {
      overflow-x: auto;
      padding: 0 1rem 2rem;
    }

    table {
      width: 100%;
      min-width: 300px; /* enables horizontal scroll on very narrow screens */
      border-collapse: collapse;
    }

    th,
    td {
      border: 1px solid #d2d2d2;
      padding: 0.7rem 0.4rem;
      text-align: center;
      font-size: 0.8rem;
      white-space: nowrap;
    }

    th {
      background: var(--green);
      color: #fff;
      font-weight: 700;
      font-size: 0.68rem;
      line-height: 1.1;
      letter-spacing: 0.03rem;
    }

    td:nth-child(3) { /* HEROES POENG */
      color: var(--red);
      font-weight: 700;
    }

    .pos {
	  background-color: #0E7A56;
	  border-right-color: #193328;
	  border-top-color: #d2d2d2;
	}
    .playernamehead {
      text-align: left;
	  border-right-color: #0E7A56;
	  border-right-width: 3px;
	  border-top-color: #d2d2d2;
	  border-top-width: 1px;
    }
    .playername {
      text-align: left;
	  border-right-width: 3px;
    }
	.colorside {
	  border-left-color: #193328;
	  border-top-color: #d2d2d2;
	  border-bottom-color: #d2d2d2;
	}
    .netto {
      color: var(--red);
    }
    .brutto {
      color: var(--green);
    }

    /* Small hover effect for fun */
    .player:hover {
      transform: translateY(-4px);
      transition: transform 0.2s ease;
    }

.login-area, .user-area {
    max-width: 400px;
    margin: 4rem auto;
    padding: 2rem;
    background: #f7f8ff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.login-form label {
    display: block;
    margin-bottom: 1rem;
}

.login-form input {
    width: 100%;
    padding: .5rem;
    margin-top: .25rem;
}

.error {
    color: #d33;
    margin-bottom: 1rem;
}

.major {
  color: #006747;
  font-family: "Playfair Display", serif;
  text-align: center;
  font-size: 1.8rem;
  margin-top: 0px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 15px;
  font-style: italic;
}

.hole-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;

  /*  legg disse to linjene tilbake  */
  width:fit-content;     /* bredden blir akkurat så stor som innholdet */
  margin:0 auto;         /* gir lik venstre/høyre-marg → sentrum  */
  padding-bottom: 15px;
}
.extra { display:none; }

/* match resten av designet (bruker dine globale fonter/farger) */
.hole-row select,
.hole-row input[type="number"],
.hole-row button {
  font: inherit;                   /* samme font som ellers */
  padding: .4rem .6rem;
  border: 1px solid var(--border, #ccd); /* bruker evt. CSS-var eller fallback-farge */
  border-radius: 6px;
}

.hole-row #strokes {
  width: 60px;
  text-align: center;
}

.hole-row button {
  background: var(--btn-bg, #446dff);  /* blå-lilla fra siden */
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform .1s ease;
}
.hole-row button:hover { transform: translateY(-1px); }
.hcp {
  font-size: 10px;
  color: #888;
  font-style: italic;
}