/* =========================================================
   DartScore Pro – samlet style.css (med alle rettelser)
   ========================================================= */

/* Grundopsætning */
#dartscorepro-root { font-family: Montserrat, system-ui, sans-serif; }
.hidden { display: none; }
.center { text-align: center; }
.container { max-width: 900px; margin: 0 auto; padding: 8px; }

/* -------- Spillersøjler: 2 kolonner – også på mobil -------- */
.players{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));  /* hold to kolonner på alle skærme */
  gap: 8px;
  justify-content: stretch;
}
.player{
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  padding: 8px;
  background: #000;
  color: #fff;
}
.player h5{ color:#17b317; margin: 0 0 6px; }

.score { font-size: 44px; font-weight: 700; margin: 2px 0 2px; }
.stat { margin: 4px 0; }

/* Lidt kompaktere på små skærme */
@media (max-width: 480px){
  .score{ font-size: 40px; }
  .player{ padding: 8px; }
  .stat{ font-size: 13px; }
}

/* -------- “Zoom”/skalering af spilskærmen -------- */
#dsp-game .container{
  transform: scale(0.90);          /* 10% zoom ud på desktop */
  transform-origin: top center;
}
@media (max-width: 1024px){
  #dsp-game .container{
    transform: scale(0.80);        /* 20% zoom ud på tablet/mobil */
  }
}
#dsp-game{ overflow: visible; }

/* -------- Scorefelt (20% mindre) + centreret -------- */
.input-panel{
  margin: 6px 0;
  display: flex;
  justify-content: center;
}
#dsp-input{
  display: block;
  margin: 0 auto;
  width: 100px;                    /* 240px -> 192px (20% mindre) */
  text-align: center;
  font-size: 16px;
  padding: 2px 4px;
}

/* -------- Keypad: knapper ~35% mindre, 15px FED tekst -------- */
/* Rækker: halveret mellemrum. Kolonner: fordoblet mellemrum.
   Tidligere “margin 6px” på knapper gav ~12px imellem. Nu bruger vi grid gaps:
   -> row-gap = 6px (halv af 12)
   -> column-gap = 24px (dobbelt af 12)
*/
.keypad{
  display: grid;
  grid-template-columns: 60px repeat(3, 60px) 60px; /* venstre fast, 3x keypad, højre fast */
  column-gap: 8px;
  row-gap: 8px;
  justify-content: center;
  margin: 10px auto 14px;
}
.keypad button{
  width: 70px;                             /* ca. 35% mindre end ~100px */
  height 70px;                            /* kvadratisk */
  padding: 0;
  font-size: 15px;                         /* talstørrelse */
  font-weight: 700;                        /* FED */
  line-height: 1;
  border-radius: 10px;
  border: 1px solid #666;
  background: #118a24;
  color: #fff;
  cursor: pointer;
}
.keypad button:active{ transform: scale(1.00); }

/* Lidt mindre på helt små skærme (valgfri) */
@media (max-width: 420px){
  .keypad{ grid-template-columns: 55px repeat(3, 55px) 55px; }
  .keypad .pad{ grid-template-columns: repeat(3, 55px); }
.keypad .fastcol{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

  .keypad button{ width: 50px; height: 50px; }
}

/* -------- Action-knapper (INDSEND/FORTRYD) – centrer -------- */
.actions{
  display: flex;
  justify-content: center;       /* midterstil */
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.btn{
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
}
.btn-primary{ background:#1a73e8; color:#fff; }
.btn-secondary{ background:#eee; }

/* -------- Startskærm (forsiden) – centreret kolonne -------- */
#dsp-start{
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
#dsp-start label{
  display: block;
  max-width: 420px;
  margin: 8px auto 4px;
  text-align: left;
}
#dsp-start input,
#dsp-start select{
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 10px;
}
#dsp-start .actions{ justify-content: center; }
#dsp-btn-start{ display: inline-block; }

/* -------- Popup (leg-luk + slut-resultat) -------- */
.dsp-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.dsp-modal{
  background: #000;
  padding: 20px;
  border-radius: 10px;
  width: min(520px, 92vw);
}
.dsp-darts-picker{
  display: flex; gap: 10px; justify-content: center; margin: 14px 0;
}
.dsp-darts-picker button{
  padding: 10px 14px; font-size: 18px; border: 1px solid #ccc; border-radius: 8px;
}
.player-stats.winner h3::after{ content: " 🏆"; }

/* === Mobil & tablet: spillerbokse skal fylde 100% i bredden === */
@media (max-width: 1024px){
  /* fjern zoom på hele spilcontaineren, så indhold kan fylde 100% */
  #dsp-game .container{
    transform: none;          /* var scale(0.85) */
    padding-left: 4px;
    padding-right: 4px;
    max-width: 100%;
  }

  /* lad de to bokse tilsammen bruge hele bredden */
  .players{
    grid-template-columns: repeat(2, 1fr);  /* 2 kolonner, fylder 100% */
    column-gap: 12px;                        /* lidt luft mellem dem */
    row-gap: 6px;
  }

  /* bokse skal strække sig i hele kolonnen */
  .player{
    width: 100%;
  }
}

/* Hvis du på helt små skærme hellere vil have én pr. række, afkommentér:
@media (max-width: 480px){
  .players{ grid-template-columns: 1fr; }
}
*/