/* ==============================================
   BAANSCHERM (/baan/{toernooi}/{baan})
   ----------------------------------------------
   Het publieke scorebord per baan. Stond als inline <style> van ruim
   vijfhonderd regels in baan.php. Eigen --b-*-variabelen: deze pagina
   laadt style.css niet, want hij draait fullscreen op een tv naast de
   baan en heeft niets aan de rest van de site.
   ============================================== */

:root {
    --b-bg:       #0f0e17;
    --b-surface:  #1a1a2e;
    --b-surface2: #2a2a3a;
    --b-surface3: #1e1e2e;
    --b-border:   #222;
    --b-border2:  #444;
    --b-red:      #e94560;
    --b-red-dim:  #ff6b85;
    --b-teal:     #4ecca3;
    --b-white:    #fff;
    --b-light:    #ddd;
    --b-dim:      #bbb;
    --b-muted:    #888;
    --b-faint:    #666;
    --b-dark:     #555;
    --b-darker:   #444;
    --b-darkest:  #333;
    --b-ink:      #2a2a2a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

/* Dit bord moet op een tv van 2 meter én op een telefoon binnen de kaders
   blijven. Twee dingen maken dat lastig:

   1. body staat op overflow:hidden (een scorebord hoort niet te scrollen),
      dus alles wat niet past wordt stilletjes afgeknipt in plaats van dat
      je het ziet. Maten moeten dus uit zichzelf passen.
   2. Een maat in vw krimpt wel mee op een smal scherm maar niet op een laag
      scherm, en andersom. Een telefoon in liggende stand is breed én laag.
      Daarom min(...vw, ...vh) waar iets in beide richtingen moet passen, en
      een ondergrens in rem in plaats van em — em rekent tegen de ouder en
      liep daardoor op tot een veelvoud van wat er beschikbaar was. */
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: var(--b-bg);
    color: var(--b-white);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* baan.php zet viewport-fit=cover, dus de pagina loopt tot in de hoeken
       van het scherm. Zonder deze insets verdwijnt het bord op een iPhone
       onder de notch en de home-balk. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── HEADER ─────────────────────────────── */
#header {
    background: var(--b-surface);
    padding: 6px 24px;
    text-align: center;
    border-bottom: 3px solid var(--b-red);
    flex-shrink: 0;
}
#header .baan-nr {
    font-size: 1.3em;
    font-weight: 900;
    color: var(--b-red);
    letter-spacing: 2px;
    text-transform: uppercase;
}
#header .meta {
    font-size: 0.8em;
    color: var(--b-muted);
    margin-top: 1px;
}
#header .best-of {
    font-size: 0.8em;
    color: var(--b-dim);
    margin-top: 2px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── SCOREBORD ───────────────────────────── */
#scorebord {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.speler {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s;
}
.speler-a {
    border-right: 2px solid var(--b-border);
    border-left: 6px solid transparent;
}
.speler-b {
    border-right: 6px solid transparent;
}
.speler-a.actief { border-left-color: var(--b-teal); }
.speler-b.actief { border-right-color: var(--b-teal); }
.speler.actief   { background: rgba(78, 204, 163, 0.07); }

.naam {
    font-size: clamp(1.4rem, min(3.2vw, 7vh), 3rem);
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    transition: color 0.3s;
    line-height: 1.1;
}
.speler.actief .naam       { color: var(--b-white); }
.speler:not(.actief) .naam { color: var(--b-faint); }

/* Aan-de-beurt indicator: statische banner */
.beurt-pijl {
    text-align: center;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--b-teal);
    height: 1.6em;
    line-height: 1.6em;
    margin-bottom: 4px;
    border-radius: 4px;
}
.speler.actief .beurt-pijl     { background: rgba(78, 204, 163, 0.15); }
.speler:not(.actief) .beurt-pijl { visibility: hidden; }

.rest-score {
    /* Het grote getal. Ondergrens was 5em: op een liggende telefoon duwde dat
       de historie eronder weg. Nu krimpt hij ook mee met de hoogte. */
    font-size: clamp(2.5rem, min(12vw, 22vh), 9rem);
    font-weight: 900;
    text-align: center;
    line-height: 1;
    margin: 0 0 6px;
    transition: color 0.3s;
}
.speler.actief .rest-score       { color: var(--b-white); }
.speler:not(.actief) .rest-score { color: var(--b-dark); }

/* 3-pijls gemiddelde, tussen de score en de legstand. Klein gehouden: het is
   een cijfer voor wie erop let, de resterende score blijft de hoofdzaak.
   Schaalt met de hoogte mee zodat het op een liggende telefoon niet meedoet
   in de strijd om ruimte. */
.gem-indicator {
    display: flex; align-items: baseline; justify-content: center;
    gap: .5em; margin-bottom: 4px; min-height: 1.2em;
    font-size: clamp(0.75rem, 2.1vh, 1.4rem);
    font-variant-numeric: tabular-nums;
}
.gem-label  { font-size: .72em; letter-spacing: .12em; color: var(--b-darker); }
.gem-waarde { font-weight: 800; color: var(--b-dim); }
.speler:not(.actief) .gem-waarde { color: var(--b-darkest); }
.speler:not(.actief) .gem-label  { color: var(--b-ink); }
/* De leg staat er alleen bij als hij afwijkt: groen = beter bezig dan het
   partijgemiddelde, rood = minder. */
.gem-leg     { font-size: .78em; font-weight: 700; }
.gem-leg.op  { color: var(--b-teal); }
.gem-leg.af  { color: var(--b-red); }
.speler:not(.actief) .gem-leg { opacity: .35; }

/* Legs indicator */
.legs-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1vw, 10px);
    margin-bottom: 6px;
    min-height: 1.4em;
    flex-shrink: 0;
}
.legs-label {
    font-size: 0.85em;
    color: var(--b-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.legs-teller {
    font-size: clamp(1.1rem, min(2.4vw, 5vh), 2.4rem);
    font-weight: 900;
    color: var(--b-red);
    line-height: 1;
}
.legs-nodig {
    font-size: 1em;
    color: var(--b-darker);
}
.leg-bollen {
    display: flex;
    gap: 6px;
    align-items: center;
}
.leg-bol {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.leg-bol.won  { background: var(--b-red); }
.leg-bol.open { background: var(--b-surface2); border: 1px solid var(--b-border2); }

.divider {
    border: none;
    border-top: 1px solid var(--b-surface2);
    margin-bottom: 6px;
    flex-shrink: 0;
}

/* ── SCORE HISTORIE ─────────────────────── */
.historie {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.historie::-webkit-scrollbar { display: none; }

.leg-blok { margin-bottom: 8px; }

.leg-label {
    font-size: 0.7em;
    color: var(--b-darkest);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--b-surface);
    padding-bottom: 2px;
}

/* Elke beurt: ~~rest_voor~~ score → rest_na */
.beurt-rij {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.3fr 1fr auto;
    align-items: center;
    gap: 0 4px;
    /* De historie is een verticale lijst, dus die schaalt met de hoogte:
       op een laag scherm passen er zo nog regels in plaats van anderhalve. */
    font-size: clamp(0.95rem, 3.2vh, 2.4rem);
    padding: 2px 0;
    color: var(--b-dark);
}
.beurt-rij.laatste {
    font-size: clamp(1.2rem, 4.6vh, 3.5rem);
    color: var(--b-light);
}

.b-rest-voor {
    text-align: right;
    text-decoration: line-through;
    color: var(--b-darkest);
    font-size: 0.75em;
}
.b-gegooid {
    text-align: center;
    font-weight: 900;
    color: var(--b-red);
}
.b-pijl {
    color: var(--b-ink);
    font-size: 0.65em;
    text-align: center;
}
.b-rest-na {
    font-weight: 900;
    color: var(--b-muted);
}
.beurt-rij.laatste .b-rest-na { color: var(--b-white); }
.beurt-rij.laatste .b-gegooid { color: var(--b-red-dim); font-size: 1.1em; }
.beurt-rij.is-checkout .b-rest-na { color: var(--b-teal); }
.beurt-rij.is-bust .b-gegooid {
    color: var(--b-ink);
    text-decoration: line-through;
}
.beurt-rij.is-bust .b-rest-na { color: var(--b-darkest); }

.badge {
    font-size: 0.32em;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.badge-checkout { background: var(--b-teal); color: #000; }
.badge-bust     { background: var(--b-surface3); color: var(--b-dark); }

/* Vorige legs: sterk gedimd */
.leg-blok.afgerond .beurt-rij {
    opacity: 0.2;
    font-size: 1.6em;
}
.leg-blok.afgerond .leg-label { color: var(--b-ink); }

/* ── LEGE STATES ─────────────────────────── */
#vrij-scherm, #loading {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    color: var(--b-darker);
}
#vrij-scherm .vrij-icon { font-size: 4em; }
#vrij-scherm .vrij-tekst { font-size: 1.8em; }
#loading .load-tekst { font-size: 1.2em; }

/* ── WINNAAR SCHERM ─────────────────────── */
#winnaar-scherm {
    display: none;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: radial-gradient(ellipse at center, #1a0a10 0%, var(--b-bg) 70%);
    animation: winnaar-in 0.4s ease;
}
@keyframes winnaar-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.winnaar-label {
    font-size: 1em;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--b-red);
    margin-bottom: 16px;
    font-weight: 700;
}
.winnaar-naam {
    /* Eén lange naam zonder spaties liep er op een telefoon aan beide kanten
       uit; vandaar de dubbele clamp en het afbreken. */
    font-size: clamp(1.8rem, min(9vw, 14vh), 5rem);
    font-weight: 900;
    color: var(--b-white);
    text-align: center;
    padding: 0 20px;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.1;
    text-shadow: 0 0 40px rgba(233,69,96,0.5);
}
.winnaar-score {
    margin-top: 24px;
    font-size: 1.6em;
    color: var(--b-dark);
    letter-spacing: 2px;
}
.winnaar-score span { color: var(--b-red); font-weight: bold; }
.winnaar-countdown {
    margin-top: 40px;
    font-size: 0.85em;
    color: var(--b-darkest);
    letter-spacing: 2px;
}
.winnaar-countdown b { color: var(--b-dark); }

/* ── TACTICS BORD ───────────────────────── */
#tac-scherm {
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}
.tac-hdr {
    display: flex;
    border-bottom: 3px solid var(--b-surface2);
    flex-shrink: 0;
}
.tac-naam-a, .tac-naam-b {
    flex: 1;
    font-size: clamp(1.6em, 4vw, 3em);
    font-weight: 900;
    text-align: center;
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tac-naam-a { color: var(--b-red);  border-right: 3px solid var(--b-surface2); }
.tac-naam-b { color: var(--b-teal); }
.tac-naam-a.actief { background: rgba(233,69,96,.07); }
.tac-naam-b.actief { background: rgba(78,204,163,.07); }

.tac-bord {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Eén maat voor de hele rij (X-en én het nummer), zodat de drie vaste
       kolommen samen nooit breder worden dan het scherm. Hiervoor stonden ze
       los in em: op een telefoon in portret werd dat 147 + 192 + 147 = 486px
       op een scherm van 390 en knipte overflow:hidden de X-en van speler B
       er gewoon af. min(vw, vh) houdt ook de twaalf regels binnen de hoogte
       op een liggende telefoon. */
    --tac-maat: clamp(0.75rem, min(5.2vw, 4.6vh), 3.2rem);
}
.tac-rij {
    flex: 1;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--b-surface2);
    min-height: 0;
}
.tac-rij:last-child { border-bottom: none; }
.tac-ma {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 6px;
}
/* De X-en staan op een vaste breedte met space-between: één X staat
   tegen het getal aan, twee X-en staan aan weerszijden met ruimte
   ertussen, en drie X-en verdelen zich gelijk. Bij drie loopt er een
   streep doorheen (::after) zodat je in één oogopslag ziet dat het
   nummer dicht is. */
.tac-mkgroep {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Maat staat hier en niet op de losse X: dan schaalt de breedte
       (in em) automatisch mee als de X-en groter of kleiner worden.
       Het bord houdt ~80vh over voor 12 regels, dus ruim 6vh per regel;
       4.6vh laat genoeg lucht en is van veraf goed leesbaar. Op een tv komt
       --tac-maat op diezelfde 4.6vh uit; op smalle schermen wint de vw-tak. */
    font-size: var(--tac-maat);
    width: 4.6em;
    flex-shrink: 0;
}
.tac-ma .tac-mkgroep { flex-direction: row-reverse; }
.tac-mkgroep.dicht::after {
    content: '';
    position: absolute;
    left: -.15em; right: -.15em;
    top: 50%;
    height: .11em;
    margin-top: -.055em;
    background: currentColor;
    border-radius: .06em;
}
.tac-mkgroep.tac-mk-a { color: var(--b-red); }
.tac-mkgroep.tac-mk-b { color: var(--b-teal); }
.tac-nr {
    width: 4.5em;
    text-align: center;
    font-size: calc(var(--tac-maat) * 0.87);   /* op een tv exact de oude 4vh */
    font-weight: 900;
    color: var(--b-dim);
    flex-shrink: 0;
    transition: color .2s;
}
.tac-nr.ca { color: var(--b-red); }
.tac-nr.cb { color: var(--b-teal); }
/* Door beide teams dichtgespeeld: getal doorstrepen. Stond op #333 en was
   daarmee praktisch onzichtbaar op de donkere achtergrond — nu blijft het
   getal leesbaar en springt juist de streep eruit. */
.tac-nr.cab {
    color: var(--b-muted);
    text-decoration: line-through;
    text-decoration-thickness: .09em;
    text-decoration-color: var(--b-light);
}
.tac-mb {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 6px;
}
.tac-mk {
    font-weight: 900;        /* maat erft van .tac-mkgroep */
    line-height: 1;
    width: 1.05em;
    text-align: center;
    flex-shrink: 0;
}

.tac-ftr {
    display: flex;
    border-top: 3px solid var(--b-surface2);
    flex-shrink: 0;
}
.tac-score-a, .tac-score-b {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    font-size: clamp(1.2rem, min(5vw, 8vh), 4rem);
    font-weight: 900;
    text-align: center;
    padding: 6px;
    min-width: 0;
}
.tac-score-a { color: var(--b-red);  border-right: 3px solid var(--b-surface2); }
.tac-score-b { color: var(--b-teal); }

/* Gewonnen legs naast de tactics-score. Alles in em van de score, dus
   het schaalt vanzelf mee met de portrait-override hieronder.
   currentColor: de bolletjes krijgen de kleur van de speler. */
.tac-legs {
    display: flex;
    align-items: center;
    gap: .2em;
    font-size: .4em;
}
.tac-legpip {
    width: .68em;
    height: .68em;
    border-radius: 50%;
    border: .13em solid currentColor;
    opacity: .32;
    flex-shrink: 0;
}
.tac-legpip.gewonnen { background: currentColor; opacity: 1; }
.tac-legs-tel { margin-left: .3em; letter-spacing: .02em; }
.tac-legs-van { opacity: .45; }

/* ── PORTRET MODUS ──────────────────────── */
@media (orientation: portrait) {

    /* 501 scoreboard: spelers boven/onder */
    #scorebord { flex-direction: column; }

    .speler-a {
        border-right: none;
        border-bottom: 2px solid var(--b-border);
    }
    /* Speler B krijgt dezelfde linker accentbalk als speler A */
    .speler-b {
        border-right: none;
        border-left: 6px solid transparent;
    }
    .speler-b.actief       { border-left-color: var(--b-teal); border-right-color: transparent; }
    .speler-b:not(.actief) { border-left-color: transparent; }

    /* Grotere naam en score omdat de volledige breedte beschikbaar is. In
       portret deelt het scorebord de hoogte over twee spelers, dus de
       vh-tak rekent met de helft. */
    .naam       { font-size: clamp(1.4rem, min(8vw, 5vh), 5rem); }
    .rest-score { font-size: clamp(2.5rem, min(18vw, 13vh), 9rem); }

    /* Compactere geschiedenis — minder regels passen maar leest goed */
    .beurt-rij         { font-size: clamp(0.95rem, 2.2vh, 1.8rem); }
    .beurt-rij.laatste { font-size: clamp(1.2rem, 3.2vh, 2.6rem); }

    /* Tactics board: groter omdat de volledige breedte beschikbaar is */
    .tac-naam-a,
    .tac-naam-b  { font-size: clamp(1.3rem, min(8vw, 4vh), 4.5rem); }

    /* Staand is er hoogte zat en is de bréédte de krappe kant: één maat voor
       de hele rij, zodat X-en + nummer + X-en samen passen. */
    .tac-bord    { --tac-maat: clamp(0.75rem, min(6.5vw, 5.5vh), 3.4rem); }

    .tac-score-a,
    .tac-score-b { font-size: clamp(1.2rem, min(9vw, 6vh), 5.5rem); }
}

/* ── LAAG SCHERM (telefoon in liggende stand) ───────────────
   Breed zat, maar nauwelijks hoogte: een kop van ~70px is dan een vijfde van
   het scherm en de twaalf tactics-regels vielen er onderaan af. De kop levert
   in zodat het bord zelf de ruimte krijgt. Raakt tablets noch tv: die zijn in
   beide standen hoger dan dit. */
@media (max-height: 560px) {
    #header { padding: 2px 12px; }
    #header .baan-nr { font-size: 1.05em; letter-spacing: 1px; }
    #header .meta,
    #header .best-of { font-size: 0.7em; margin-top: 0; }

    .speler { padding: 4px 10px; }
    .beurt-pijl { height: 1.3em; line-height: 1.3em; margin-bottom: 2px; font-size: 0.9em; }
    .legs-indicator { min-height: 1.1em; margin-bottom: 2px; }

    .tac-bord    { --tac-maat: clamp(0.7rem, min(5.2vw, 3.9vh), 3.2rem); }
    .tac-naam-a,
    .tac-naam-b  { font-size: clamp(1rem, 3vh, 2rem); padding: 2px 10px; }
    .tac-score-a,
    .tac-score-b { font-size: clamp(1rem, 5.5vh, 2.6rem); padding: 2px; }
}
#shot-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#shot-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Het uitgooigetal over de GIF heen, alleen bij 100 of hoger. */
.shot-bijschrift {
    display: none;
    position: absolute; left: 0; right: 0; bottom: 8%;
    text-align: center;
    font-size: clamp(2rem, min(11vw, 16vh), 8rem);
    font-weight: 900; letter-spacing: .04em;
    color: var(--b-white);
    text-shadow: 0 0 .25em rgba(0,0,0,.9), 0 .04em .12em rgba(0,0,0,.8);
}

/* ── VIERING (180) ──────────────────────────
   Losse laag over het bord, zonder de stand aan te raken. pointer-events blijft
   uit: dit scherm hangt naast een baan en niemand hoort er iets weg te kunnen
   tikken. Standaard onzichtbaar én niet aanwezig voor schermlezers. */
#viering {
    position: fixed; inset: 0; z-index: 998;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0; visibility: hidden;
    background: radial-gradient(ellipse at center, rgba(233,69,96,.28) 0%, rgba(15,14,23,0) 70%);
    transition: opacity .25s ease, visibility .25s;
}
#viering.aan { opacity: 1; visibility: visible; }
#viering span {
    font-size: clamp(3rem, min(26vw, 34vh), 18rem);
    font-weight: 900; letter-spacing: -.02em;
    color: var(--b-red);
    text-shadow: 0 0 .18em rgba(233,69,96,.55), 0 .03em .1em rgba(0,0,0,.7);
}
#viering.aan span { animation: viering-pop .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes viering-pop {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
/* Wie beweging liever niet heeft, krijgt hem gewoon zonder de sprong. */
@media (prefers-reduced-motion: reduce) {
    #viering.aan span { animation: none; }
}