:root{--rood:#c8102e;--goud:#d4a017}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#141414;color:#eee;line-height:1.5}
header{background:linear-gradient(135deg,#1b1b1b,#000);border-bottom:4px solid var(--rood);padding:2.5rem 1rem 0;text-align:center}
.logo{max-width:280px;height:auto;margin:0 auto;display:block}
header p{margin-top:.5rem;color:#999;font-size:.95rem}
header .seizoen{margin-top:.9rem;color:var(--goud);font-size:1.05rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
nav{margin-top:1.5rem;display:flex;justify-content:center;flex-wrap:wrap;gap:.15rem}
nav a{color:#999;text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;padding:.7rem 1.1rem;border-bottom:3px solid transparent}
nav a:hover{color:#eee}
nav a.actief{color:#eee;border-bottom-color:var(--rood)}
main{max-width:960px;margin:0 auto;padding:2rem 1rem 4rem}
section{margin-bottom:3rem}
h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:.12em;color:var(--rood);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #2c2c2c}
h2 .weekkies{float:right;margin-top:-.25rem}
h2 select{background:#1c1c1c;color:#ccc;border:1px solid #333;border-radius:3px;padding:.2rem .4rem;font:inherit;font-size:.75rem;text-transform:none;letter-spacing:0}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{padding:.55rem .45rem;text-align:right;border-bottom:1px solid #262626;white-space:nowrap}
th:first-child,td:first-child{text-align:center;width:2.2rem;color:#888}
th:nth-child(2),td:nth-child(2){text-align:left;font-weight:600}
thead th{background:#1c1c1c;color:#aaa;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em}
thead th[title]{cursor:help;border-bottom:1px dotted #444}
tbody tr:nth-child(odd){background:#181818}
tbody tr:hover{background:#242424}
.top1 td:first-child{color:var(--goud);font-weight:700}
.punten{color:var(--rood);font-weight:700}
.pos{color:#4ade80}.neg{color:#f87171}
.wrap{overflow-x:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem}
.card{background:#1a1a1a;border:1px solid #282828;border-left:3px solid var(--rood);padding:.85rem}
.card .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:#888}
.card .val{font-size:1.5rem;font-weight:700;margin-top:.15rem}
.card.laatste{border-left-color:var(--goud)}
.cards .card .val{font-size:1rem}
.moment{background:#1a1a1a;border:1px solid #282828;border-left:3px solid var(--goud);padding:1rem 1.1rem;margin-top:1.25rem;white-space:pre-line}
.moment .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--goud);margin-bottom:.4rem}
.moment p{color:#ddd;font-size:.92rem}
.pl{cursor:pointer;border-bottom:1px dotted #666;outline:none}
@media(hover:hover) and (pointer:fine){.pl:hover{border-bottom-color:var(--rood)}.pl:hover img{opacity:1;visibility:visible;transform:scale(1)}}
.pl:focus-visible{border-bottom-color:var(--rood)}
.pl img{position:fixed;top:1.5rem;left:2rem;transform:scale(.9);width:150px;height:auto;border:3px solid var(--rood);border-radius:8px;background:#000;box-shadow:0 12px 32px rgba(0,0,0,.8);opacity:0;visibility:hidden;transition:opacity .12s,transform .12s;z-index:99;pointer-events:none}
.pl:focus-visible img{opacity:1;visibility:visible;transform:scale(1)}
td a.naamlink{color:inherit;text-decoration:none}
.leeg{color:#888;font-size:.88rem;padding:.5rem 0}
footer{text-align:center;padding:2rem 1rem;color:#666;font-size:.8rem;border-top:1px solid #222}
footer a{color:#666}

/* --- vorm: laatste vijf partijen --- */
.vorm{display:inline-flex;gap:.18rem}
.vorm b{width:1.15rem;height:1.15rem;border-radius:2px;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;color:#111}
.vorm .w{background:#4ade80}
.vorm .v{background:#f87171}

/* --- onderlinge stand --- */
.onderling td,.onderling th{text-align:center;width:auto}
.onderling th:nth-child(2),.onderling td:nth-child(2){text-align:center}
.onderling thead th{font-size:.72rem}
.onderling .zelf{background:#101010;color:#444}
.onderling .naamkol{text-align:left!important;font-weight:600;color:#eee!important;width:auto}
.onderling small{color:#777;font-size:.72rem;display:block}

/* --- grafiek --- */
.grafiek{width:100%;height:auto;background:#181818;border:1px solid #282828;border-radius:4px}
.legenda{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.9rem;font-size:.82rem;color:#bbb}
.legenda span{display:flex;align-items:center;gap:.35rem}
.legenda i{width:.9rem;height:.2rem;border-radius:2px;display:inline-block}

/* --- spelerspagina --- */
.profiel{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-bottom:2rem}
.profiel img{width:130px;height:auto;border:3px solid var(--rood);border-radius:8px;background:#000}
.profiel h1{font-size:1.8rem;letter-spacing:.04em;text-transform:uppercase}
.profiel .rang{color:var(--goud);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem}
.terug{display:inline-block;margin-bottom:1.5rem;color:#888;font-size:.82rem;text-decoration:none}
.terug:hover{color:#eee}

details.uitleg{margin:-.4rem 0 1rem;font-size:.82rem}
details.uitleg summary{color:#888;cursor:pointer;padding:.35rem 0;list-style:none;display:inline-flex;align-items:center;gap:.4rem}
details.uitleg summary::-webkit-details-marker{display:none}
details.uitleg summary::before{content:"\25B8";color:var(--rood);transition:transform .15s;display:inline-block}
details.uitleg[open] summary::before{transform:rotate(90deg)}
details.uitleg summary:hover{color:#ccc}
details.uitleg ul{list-style:none;margin:.5rem 0 0;padding:.9rem 1.1rem;background:#1a1a1a;border-left:3px solid #2c2c2c;border-radius:0 4px 4px 0;color:#aaa;line-height:1.7}
details.uitleg li+li{margin-top:.3rem}
details.uitleg b{color:#ddd;font-weight:600}

.reg-lijst{margin:0;padding-left:1.4rem;color:#ddd;font-size:.95rem}
.reg-lijst li{margin-bottom:.85rem;padding-left:.3rem}
.reg-lijst li::marker{color:var(--rood);font-weight:700}
.reg-lijst li:last-child{margin-bottom:0}
.reg-lijst strong{color:#fff}

footer .mascotte{display:block;height:48px;width:auto;margin:0 auto .9rem;border-radius:6px;opacity:.75;transition:opacity .15s,transform .15s}
footer .mascotte:hover{opacity:1;transform:scale(1.06)}

.teller{display:inline-block;margin-top:.5rem;font-size:.75rem;color:#555}
.teller a{color:#666}
.staaf{display:flex;align-items:flex-end;gap:2px;height:150px;padding:0;margin-top:1rem;border-bottom:1px solid #2c2c2c}
.staaf div{flex:1;background:var(--rood);min-height:2px;border-radius:2px 2px 0 0;opacity:.85}
.staaf div:hover{opacity:1;background:var(--goud)}

.terugblik{margin-top:.6rem!important;color:var(--goud);font-size:.82rem}
.terugblik a{color:#bbb}

.weer{margin-top:.75rem;color:#bbb;font-size:.82rem;display:inline-block;border:1px solid #2c2c2c;border-radius:20px;padding:.28rem 1rem;background:#1a1a1a}
.weer::before{content:"\1F326\FE0F";margin-right:.45rem;filter:grayscale(.2)}

.deel{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.25rem}
.deel button{background:var(--rood);color:#fff;border:0;border-radius:3px;padding:.65rem 1.2rem;font:inherit;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.deel button:hover{background:#a30d25}
.deel .knop-uit{color:#999;font-size:.82rem;text-decoration:none;border-bottom:1px solid #333;padding-bottom:.1rem}
.deel .knop-uit:hover{color:#eee}
.deel #gelukt{color:#4ade80;font-size:.82rem}

@media(max-width:560px){
  .onderling{font-size:.8rem}
  .profiel img{width:100px}
}

/* --- pijl in het bord, naast het logo --- */
header{position:relative}
header::before{content:"";position:absolute;top:2.5rem;left:calc(50% + 150px);width:200px;height:110px;background:url(pijl-bord.svg) no-repeat center/contain;pointer-events:none}
@media(max-width:760px){
  header::before{top:.6rem;left:auto;right:.6rem;width:110px;height:60px}
}

/* --- rijen glijden binnen --- */
tbody tr{animation:inschuif .45s ease-out backwards}
tbody tr:nth-child(2){animation-delay:.05s}
tbody tr:nth-child(3){animation-delay:.1s}
tbody tr:nth-child(4){animation-delay:.15s}
tbody tr:nth-child(5){animation-delay:.2s}
tbody tr:nth-child(6){animation-delay:.25s}
tbody tr:nth-child(7){animation-delay:.3s}
tbody tr:nth-child(n+8){animation-delay:.35s}
@keyframes inschuif{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- vlammetje bij 180's --- */
.vlam{color:var(--goud);font-weight:700}
.vlam::before{content:"\1F525";display:inline-block;margin-right:.25rem;animation:flakker 1.6s ease-in-out infinite}
@keyframes flakker{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(-6deg)}}

@media(prefers-reduced-motion:reduce){
  tbody tr,.vlam::before{animation:none}
}

/* --- kwartaalrace --- */
.race-info{color:#aaa;font-size:.85rem;margin:-.3rem 0 .6rem}
.race-info b{color:var(--goud)}
.race-balk{height:6px;background:#222;border-radius:3px;overflow:hidden;margin-bottom:1rem}
.race-balk div{height:100%;background:linear-gradient(90deg,var(--rood),var(--goud));border-radius:3px}
.race tr.uit td{color:#555}
.race tr.uit .punten{color:#6b2a35}
.kans-ja{color:#4ade80;font-size:.8rem}
.kans-nee{color:#555;font-size:.8rem}

/* --- prijzenkast --- */
.prijzen-teller{float:right;font-size:.7rem;color:#777;letter-spacing:.06em;margin-top:.25rem}
.prijzen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.prijs{background:#1a1a1a;border:1px solid #282828;border-top:3px solid var(--goud);border-radius:4px;padding:.9rem .8rem;text-align:center}
.prijs-icoon{font-size:2rem;line-height:1.2;position:relative;display:inline-block}
.prijs-aantal{position:absolute;right:-1.4rem;top:-.2rem;background:var(--rood);color:#fff;font-size:.68rem;font-weight:700;border-radius:10px;padding:.05rem .4rem}
.prijs-titel{margin-top:.35rem;font-weight:700;font-size:.85rem;color:#eee}
.prijs-wanneer{margin-top:.25rem;font-size:.72rem;color:#888;line-height:1.4}
.prijs.open{border-top-color:#2c2c2c;opacity:.45}
.prijs.open .prijs-icoon{filter:grayscale(1)}

/* --- foto's van de avond --- */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;margin-top:1.25rem}
.fotos .foto{display:block;border:1px solid #282828;border-radius:4px;overflow:hidden;background:#1a1a1a}
.fotos img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .2s}
.fotos .foto:hover img{transform:scale(1.05)}
.lichtbak{border:0;padding:0;background:transparent;max-width:94vw;max-height:92vh;margin:auto;overflow:visible;cursor:zoom-out}
.lichtbak::backdrop{background:rgba(0,0,0,.88)}
.lichtbak img{display:block;max-width:94vw;max-height:92vh;border:3px solid var(--rood);border-radius:6px}
.lichtbak .sluit{position:absolute;top:-.9rem;right:-.9rem;width:2rem;height:2rem;border-radius:50%;background:var(--rood);color:#fff;font-size:1.4rem;line-height:2rem;text-align:center}

/* --- contributie --- */
.inlog{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.inlog input,.tegoed-form input,.tegoed-form select,.avond select{background:#1a1a1a;border:1px solid #333;color:#eee;border-radius:3px;padding:.55rem .6rem;font:inherit}
.inlog button,.knop{background:var(--rood);color:#fff;border:0;border-radius:3px;padding:.65rem 1.3rem;font:inherit;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.inlog button:hover,.knop:hover{background:#a30d25}
.knop-klein{background:#2a2a2a;color:#bbb;border:0;border-radius:3px;padding:.35rem .7rem;font:inherit;font-size:.72rem;cursor:pointer}
.knop-klein:hover{background:var(--rood);color:#fff}
.melding-goed,.melding-fout{padding:.7rem .9rem;border-radius:3px;margin-bottom:1rem;font-size:.9rem}
.melding-goed{background:#14321f;border-left:3px solid #4ade80}
.melding-fout{background:#331416;border-left:3px solid var(--rood)}
.legenda-contributie{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.8rem;font-size:.8rem;color:#999}
.contributie-weken td,.contributie-weken th{text-align:center!important;font-weight:400}
.contributie-weken th:first-child,.contributie-weken td:first-child{color:#888}
.contributie-weken td.st-open{background:#2a1215}
.avond{background:#1a1a1a;border:1px solid #282828;border-left:3px solid var(--rood);border-radius:0;padding:.8rem;margin-bottom:.8rem}
.avond-kop{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem}
.avond-kop span{color:#888;font-size:.85rem}
.avond-kop .knop-klein{margin-left:auto}
.avond-rij{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.3rem 0;border-top:1px solid #222}
.avond-rij select{min-width:12rem}
.tegoed-form{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.tegoed-form input[name=bedrag]{width:9rem}
.contributie-weken td.st-nog{color:#555}