:root{--teal:#2EFFB3;--bg:#0b0b14;--card:#141427;--ink:#f7f7fb;--muted:#b9bbd4;--outline:rgba(255,255,255,.14);}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:#0b0b14;color:var(--ink)}
.bg{
  position: fixed; inset: 0;
  background: url('party-bg.jpg') center/cover no-repeat;
  z-index: -1;
  pointer-events: none;
}
.bg::after{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 600px at 120% 120%, rgba(113,99,255,.20), transparent),
    radial-gradient(900px 700px at -20% -10%, rgba(255,94,188,.12), transparent),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.65));
  z-index: 0;
}
.site-header{display:flex;gap:14px;align-items:center;padding:16px 20px;flex-wrap:wrap}
.site-header .titles h1{margin:0;font-size:20px}
.site-header nav a{color:var(--muted);text-decoration:none;margin-right:8px}
.site-header nav a:hover{color:#fff}
.card{background:rgba(255,255,255,.06);border:1px solid var(--outline);border-radius:18px;padding:16px 18px;margin:16px auto;max-width:1100px}
.columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.columns section{background:rgba(255,255,255,.04);border:1px solid var(--outline);border-radius:16px;padding:14px}
h2{margin:6px 0 12px}
h3{margin:6px 0 10px}
label{display:flex;gap:10px;align-items:center;margin:8px 0}
label span{min-width:140px;color:var(--muted)}
input[type=text],input[type=time],input[type=number]{flex:1;padding:8px;border-radius:10px;border:1px solid var(--outline);background:rgba(0,0,0,.25);color:#fff}
button,.secondary{display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid var(--outline);background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
button:hover,.secondary:hover{background:rgba(255,255,255,.12)}
.alert.success{margin-top:8px;padding:8px;border-radius:10px;background:rgba(46,255,179,.1);border:1px solid rgba(46,255,179,.4)}
.summary .big-totals.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.summary .big-totals .big-tile{background:rgba(255,255,255,.06);padding:16px;border-radius:16px;border:1px solid var(--outline);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.summary .mvp{margin-top:12px;padding:12px;border-radius:14px;border:1px solid var(--outline);background:rgba(255,255,255,.05);display:flex;flex-direction:column;gap:4px;align-items:center}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.match{background:rgba(255,255,255,.04);border:1px solid var(--outline);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.match .teams{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;text-align:center}
.match .pair{font-weight:600}
.match .vs{opacity:.7}
.match .scores{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.match .scores label{flex:1 1 33.333%}
.match .scores .vs{flex:0 0 auto}
.schedule{width:100%;border-collapse:collapse;margin-top:8px}
.schedule th,.schedule td{border:1px solid var(--outline);padding:8px;border-radius:6px}
.leader-list{display:block;padding-left:0}
footer{opacity:.6;text-align:center;margin:20px 0}
@media (max-width: 980px){
  .columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary .big-totals.three{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 640px){
  .columns{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .summary .big-totals.three{grid-template-columns:1fr}
  label span{min-width:110px}
}

/* Highlight next incomplete card */
.match.is-next{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,87,151,.2), 0 6px 22px rgba(0,0,0,.35);
}
.saved-badge{
  display:inline-block;
  margin-left:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(46,255,179,.18);
  border:1px solid rgba(46,255,179,.5);
  font-size:12px;
}
.error-badge{
  display:inline-block;
  margin-left:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,66,66,.18);
  border:1px solid rgba(255,66,66,.5);
  font-size:12px;
}

.match .scores label,
  .match .scores .vs{
    flex: 0 0 auto;
    min-width: 120px;
  }
  .match .scores label input[type=number]{
    font-size: 24px;
    padding: 12px 8px;
  }
}

/* === Leaderboard numbering fix === */
.leader-list{
  display: block;            /* turn off grid to ensure proper counters */
  counter-reset: rank;
  padding-left: 0;
}
.leader-list li{
  list-style: none;
  counter-increment: rank;
  padding: 6px 10px;
  border-bottom: 1px solid var(--outline);
  display: flex;
  gap: 10px;
  align-items: center;
}
.leader-list li::before{
  content: counter(rank) ".";
  font-weight: 800;
  width: 22px;
  text-align: right;
  color: #fff;
  opacity: .9;
}


/* === Mobil: Stak score-inputs — ingen horisontal scroll === */
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }

  .match .scores{
    display:flex;
    flex-wrap:wrap;
    overflow-x: visible;
    gap: 8px;
    justify-content: center;
    align-items: center;
  }
  .match .scores label{
    flex: 1 1 100%;
    display:flex;
    gap: 8px;
    align-items:center;
    justify-content: space-between;
  }
  .match .scores .vs{
    flex: 1 1 100%;
    text-align:center;
    opacity:.7;
    padding: 2px 0;
  }
  /* mindre labels og inputs på mobil */
  label span{ min-width: 90px; }
  input[type=number]{ max-width: 90px; }
}


/* === Teal accents & clearer headings/buttons === */
h1, h2{ color:#fff; letter-spacing:.2px; text-shadow:0 1px 0 rgba(0,0,0,.4); }
h2{ font-size:20px; font-weight:800; }
h3{ color: var(--ink); opacity:.95; font-weight:700; }

/* Buttons */
button, .secondary{
  background: rgba(46,255,179,.15);
  border:1px solid rgba(46,255,179,.55);
  color:#fff;
}
button:hover, .secondary:hover{
  background: rgba(46,255,179,.28);
  border-color: rgba(46,255,179,.7);
}

/* Inputs focus teal */
input[type=text],input[type=time],input[type=number]{
  border:1px solid var(--outline);
}
input[type=text]:focus, input[type=time]:focus, input[type=number]:focus{
  outline: none;
  border-color: rgba(46,255,179,.7);
  box-shadow: 0 0 0 3px rgba(46,255,179,.18);
}

/* Teal chips for saved/error badges already present; ensure visibility */
.success-badge{ border-color: rgba(46,255,179,.6) !important; background: rgba(46,255,179,.18) !important; }


/* === Highlight leader tile in standings === */
.summary .big-totals .big-tile.is-leader{
  border-color: rgba(46,255,179,.8);
  box-shadow: 0 0 0 2px rgba(46,255,179,.25), 0 6px 22px rgba(46,255,179,.18);
  transform: translateY(-1px);
}
.summary .big-totals .big-tile.is-leader strong{
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}


/* === Runde overskrifter === */
.card.matches h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--teal);
  margin: 24px 0 12px;
  border-bottom: 2px solid rgba(46,255,179,.4);
  padding-bottom: 4px;
  text-align: center;
}


/* === Desktop fix: prevent score row overflow/bleed === */
@media (min-width: 981px){
  .match{ overflow: hidden; }                 /* clip any minor overrun */
  .match .scores{ align-items: center; }
  .match .scores label{ 
    min-width: 0;                             /* allow flex child to shrink inside grid */
    flex: 1 1 33.333%;
    display:flex; 
    gap:10px; 
    align-items:center;
  }
  .match .scores label span{
    flex: 0 0 120px;                          /* fixed label width */
    min-width: 0;
  }
  .match .scores label input[type=number]{
    flex: 0 0 auto;
    width: 88px;                              /* cap input width on desktop */
    max-width: 100px;
  }
  .match .scores .vs{ flex: 0 0 auto; }
}


/* === Extra spacing between score inputs after dash removal === */
.match .scores{
  gap: 20px; /* increased gap between the two input blocks */
}


/* === Center align score inputs as a pair === */
.match .scores{
  justify-content: center;   /* center the input pair horizontally */
  gap: 24px;                 /* nice consistent gap */
}
.match .scores label{
  flex: 0 0 auto;            /* don't stretch full width */
}





/* === Court name badge styled like button === */
.court-badge {
  display: block;
  margin: 0 auto 12px auto;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(46,255,179,.15);
  border: 1px solid rgba(46,255,179,.55);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}


/* === Court badge: centered and styled like the 'Gem' button (visual only) === */
.match { position: relative; }
.match .court-badge{
  position: static;               /* drop absolute */
  display: inline-block;
  margin: 2px auto 10px auto;     /* centered */
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(46,255,179,.15);
  border:1px solid rgba(46,255,179,.55);
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-align:center;
}
.match .court-badge::after{
  content: "";                    /* subtle inner sheen like a button */
  display: block;
  height: 0;
}