/* =========================
   Scorebord – volledige style.css
   - Borden: standaard één kolom
   - Split mode: borden ONDER elkaar (1 kolom)
   - Timers verbergen via .hide-timers (geel streepje ertussen)
   - Stage scaling via CSS custom props
   - GOAL overlay animatie
   ========================= */

/* ---- Thema-variabelen ---- */
:root{
  --bg:#0b0f14;
  --card:#111827;
  --soft:#1f2937;
  --accent:#00a6d9;
  --muted:#8892a6;
  --text:#e5eef7;
  --score:#fcbc30;
}

/* Fluïde basis voor rem + clamps (teksten schalen met viewport) */
html{ font-size: clamp(14px, 1.1vw, 18px); }

/* Reset / basis */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  min-height:100%;
}

/* ---- Stage (viewbox + zoom) ---- */
body.has-stage { overflow:hidden; }
#stage{
  position:fixed; inset:0;
  display:flex; align-items:flex-start; justify-content:center;
}
#stageInner{
  width: var(--stage-w, 1280px);
  height: var(--stage-h, 720px);
  transform-origin: top center;
  will-change: transform;
}

/* ---- GOAL! overlay ---- */
#goalOverlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .3s ease;
}
#goalOverlay::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.5);
}
#goalOverlay span{
  position: relative;
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900;
  color: var(--score);
  text-shadow: 0 0 40px rgba(0,0,0,.6), 0 0 20px #ff0;
  transform: scale(.5);
  transition: transform .4s ease;
}
#goalOverlay.show{ opacity:1; }
#goalOverlay.show span{ transform: scale(1.2); }

/* ---- Pagina lay-out ---- */
.container{
  max-width:100%;
  margin:0 auto;
  padding:clamp(8px, 1.5vw, 24px);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 1vw, 16px);
}

/* Topbar + Banner */
.topbar{ display:block; margin-bottom:clamp(8px, 1vw, 12px); }
.bannertop1{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---- Boards wrapper ----
   Standaard 1 kolom, in split ook 1 kolom (onder elkaar) */
#boards{
  display:grid;
  gap:clamp(10px, 1.2vw, 16px);
  place-items:center;
  flex:1;
  grid-template-columns: 1fr; /* default single */
}

/* View toggles */
.split #boardB{ display:block; }   /* zichtbaar in split */
.single #boardB{ display:none; }   /* verborgen in single */

/* (optioneel) extra robuustheid: forceer 1 kolom in split expliciet */
.split #boards{ grid-template-columns: 1fr; }

/* ---- Board kaart ---- */
.board{
  background: linear-gradient(180deg,var(--card),var(--soft));
  border:1px solid #0e1522;
  border-radius:clamp(10px, 1.2vw, 16px);
  padding:clamp(12px, 1.4vw, 16px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  width:100%;
}

/* ---- Header grid: team | score | timer | score | team ---- */
.board-header{
  display:grid;
  grid-template-columns: minmax(0,2fr) auto auto auto minmax(0,2fr);
  gap:clamp(10px, 1.2vw, 16px);
  align-items:center;
}

/* ---- Team: logo boven, naam eronder ---- */
.team{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(4px, 0.6vw, 8px);
  min-width:0;
  text-align:center;
}
.team-logo{
  width:clamp(40px, 4.5vw, 64px);
  height:clamp(40px, 4.5vw, 64px);
  object-fit:contain;
  background:#0e1522;
  border-radius:clamp(8px, 1vw, 12px);
  border:1px solid #152033;
  flex-shrink:0;
}
.team-name{
  font-weight:700;
  font-size:clamp(1rem, 2.2vw, 1.6rem);
  line-height:1.12;
  white-space:normal;
  overflow:visible;
  word-break:break-word;
  overflow-wrap:anywhere;
  text-align:center;
}

/* ---- Scores ---- */
.score{
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight:900;
  color:#e7ad13;
  letter-spacing:0.06em;
  min-width:clamp(64px, 7vw, 96px);
  text-align:center;
}

/* ---- Timer (normale weergave) ---- */
.timer{
  font-variant-numeric:tabular-nums;
  font-size: clamp(1.2rem, 3.2vw, 2.6rem);
  font-weight:800;
  color:#e62310;
  padding:clamp(4px, 0.8vw, 8px) clamp(10px, 1.2vw, 16px);
  border:1px solid #153246;
  border-radius:clamp(8px, 1vw, 12px);
  background:#0c1b26;
  text-align:center;
  min-width:clamp(84px, 10vw, 160px);
  position:relative; /* nodig voor pseudo-element in hide-modus */
}

/* ---- Timers verbergen: geel streepje in het midden ----
   Toggle class op <body>: .hide-timers */
.hide-timers .timer{
  color: transparent !important;     /* verberg cijfers, behoud ruimte */
  background: transparent !important;
  border-color: transparent !important;
}
.hide-timers .timer::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width: clamp(24px, 6vw, 48px);
  height: clamp(4px, 0.8vw, 6px);
  background: var(--score);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0,0,0,.25);
}

/* ---- Sponsors ---- */
.sponsors{
  margin-top:auto;
  display:grid;
  gap:clamp(6px, 0.8vw, 10px);
}
.sponsor-row{
  background:#0e1522;
  border:1px solid #152033;
  border-radius:clamp(8px, 1vw, 12px);
  padding:clamp(6px, 0.9vw, 8px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(6px, 0.9vw, 8px);
  align-items:center;
}
.sponsor-row.single{
  grid-template-columns:1fr;
  padding:clamp(10px, 1.2vw, 16px);
  min-height:clamp(120px, 12vw, 180px);
}
.sponsor{
  width:100%;
  height:clamp(42px, 5.2vw, 68px);
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.sponsor.single{
  width:100%;
  height:auto;
  max-height:clamp(140px, 18vw, 240px);
  object-fit:contain;
}

/* ---- Responsive tweaks ---- */
@media (max-width:1200px){
  .board-header{
    grid-template-columns: minmax(0,1.6fr) auto auto auto minmax(0,1.6fr);
  }
}
@media (max-width:900px){
  .board-header{
    grid-template-columns: 1fr auto auto auto 1fr;
  }
}
@media (max-width:680px){
  .board-header{
    grid-template-columns: 1fr 1fr; /* stack: team1 | score1; timer over 2 kol.; score2 | team2 */
    grid-auto-rows: minmax(0,auto);
  }
  .board-header > .team:nth-child(1){ grid-column:1 / span 1; }
  .board-header > .score:nth-of-type(1){ grid-column:2 / span 1; }
  .board-header > .timer{ grid-column:1 / span 2; }
  .board-header > .score:nth-of-type(2){ grid-column:1 / span 1; }
  .board-header > .team:nth-child(5){ grid-column:2 / span 1; }

  .score{ font-size: clamp(2rem, 9vw, 3rem); min-width:clamp(56px, 15vw, 80px); }
  .timer{ font-size: clamp(1rem, 6vw, 1.6rem); min-width:auto; }
  .team-logo{ width:clamp(36px, 10vw, 48px); height:clamp(36px, 10vw, 48px); }
}
@media (max-width:380px){
  .container{ padding: clamp(6px, 2vw, 10px); }
  .score{ letter-spacing:0.04em; }
}