:root{--bg:#f6f4ef;--ink:#1c1b18;--mut:#6b675e;--line:#dedad0;--acc:#f5c400;--neg:#9b4a3a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:3px}a:hover{background:var(--acc)}
h1,h2,h3,.serif{font-family:'Newsreader',serif;font-weight:500}.mono{font-family:'IBM Plex Mono',monospace}.muted{color:var(--mut)}.small{font-size:13px}.b{font-weight:600}.r{text-align:right}.c{text-align:center}.pos{color:#6b5600}.neg{color:var(--neg)}.xl{font-size:30px;line-height:1.1}.l{font-size:21px}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}main.wrap{padding-top:40px;padding-bottom:72px}
.hdr{position:sticky;top:0;background:#111;border-bottom:4px solid var(--acc);z-index:10}.hdr .brand{color:#f7f6f2}.hdr .brand small{color:var(--acc)}.brand img{width:52px;height:52px;border-radius:4px;background:var(--acc);object-fit:contain}.hdr-in{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center;color:var(--ink)}.brand b{display:block;font:600 23px/1.1 'Newsreader',serif}.brand small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.logo{display:grid;grid-template:14px 14px/14px 14px;border:1.5px solid var(--ink)}.logo i:nth-child(1),.logo i:nth-child(4){background:var(--ink)}
nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}nav a{padding:8px 12px;color:#b9b4a8;text-decoration:none;font-weight:500;font-size:14px;border-bottom:2px solid transparent}nav a.on{color:#fff;border-color:var(--acc)}
.btn{display:inline-block;border:0;border-radius:4px;padding:9px 14px;font:500 13px 'IBM Plex Sans';cursor:pointer;background:#fff;border:1px solid #cfcabd;color:var(--ink)}.btn.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}.btn.green{background:var(--acc);color:#111;border-color:var(--acc);font-weight:600}.hdr .btn.dark{background:var(--acc);color:#111}.btn.sm{padding:6px 10px}
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:40px;align-items:end;padding-bottom:40px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(44px,6vw,76px);line-height:.98;letter-spacing:-.025em;margin:0}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6b5600;font-weight:600;margin-bottom:16px}.lead{font-size:17px;color:#4a4740;max-width:520px}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px 22px;margin-bottom:16px}.card.flush{padding:0}.label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px;padding:32px 0}.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
h1.page{font-size:52px;letter-spacing:-.02em;margin:0 0 22px}h2{font-size:27px;margin:0 0 12px}h2 small{font:13px 'IBM Plex Sans';color:var(--mut);margin-left:10px}
.tbl{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}.tbl td,.tbl th{padding:10px 8px;border-bottom:1px solid var(--line);font-size:14px}.tbl th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:500;text-align:left}.tbl tr.past{opacity:.45}.tbl input{width:100%;padding:6px 8px;border:1px solid #e3dfd5;border-radius:3px}
.post{border-top:3px solid var(--ink);padding-top:14px}.post h3{font-size:22px;line-height:1.2;margin:6px 0}.post.big{border-top-width:1px;padding:20px 0 28px}.narrow{max-width:760px}
.pills,.rounds{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.pill{border:1px solid #cfcabd;border-radius:999px;padding:8px 16px;color:var(--ink)}.pill.on{background:var(--ink);color:var(--bg)}
.rounds a{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font-family:'IBM Plex Mono'}.rounds a.on{background:var(--acc);color:#111;border-color:#111}
.facts{display:flex;gap:28px;flex-wrap:wrap}.facts.col{flex-direction:column;gap:18px}.facts dt{font-size:12px;color:var(--mut)}.facts dd{margin:2px 0 0;font-size:16px}.scroll{overflow-x:auto}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px;font-size:13px;color:var(--mut);border-top:1px solid var(--line)}
.login{max-width:380px;margin:40px auto;display:grid;gap:12px}label{display:grid;gap:4px;font-size:12px;color:var(--mut)}label.row{display:flex;align-items:center;gap:6px;font-size:13px}
input,select,textarea{padding:8px 10px;border:1px solid #cfcabd;border-radius:4px;font:inherit;font-size:14px;background:#fff}
body.admin{display:grid;grid-template-columns:230px 1fr;min-height:100vh;background:#efece5}
.admin aside{background:var(--ink);padding:22px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}.admin aside a,.admin aside button{color:#d9d5ca;padding:9px 10px;border-radius:4px;font-size:14px;background:none;border:0;text-align:left;cursor:pointer;font-family:inherit}.admin aside a.on{background:#34322d;color:var(--bg)}
.brand-a{padding:0 10px 20px}.brand-a b{display:block;font:500 21px 'Newsreader';color:var(--bg)}.brand-a small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8d887c}.grow{flex:1}
.admin-main{padding:30px 36px 60px;min-width:0}.admin-main h1{font-size:38px;margin:0 0 18px}.admin-main h2{font:600 16px 'IBM Plex Sans'}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.stats small{color:var(--mut)}.stats b{display:block;font:500 38px 'Newsreader'}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:end}.stack{display:grid;gap:10px;max-width:760px}
.line{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid #efece5}.line.pad{padding:10px 18px}
.seg{display:flex;gap:4px}.seg input{display:none}.seg span{display:inline-grid;place-items:center;min-width:46px;height:34px;border:1px solid #cfcabd;border-radius:4px;font:13px 'IBM Plex Mono';cursor:pointer}.seg input:checked+span{background:var(--ink);color:var(--bg)}
.x{background:none;border:0;color:var(--neg);font-size:18px;cursor:pointer}.flash{background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:4px;margin-bottom:16px;font-size:14px}.flash.neg{background:var(--neg)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:6px;margin:12px 0}.checks label{flex-direction:row;display:flex;gap:6px;font-size:14px;color:var(--ink)}
@media(max-width:760px){body.admin{grid-template-columns:1fr}.admin aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap}}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:10px;margin-top:32px}.mosaic img{width:100%;height:100%;object-fit:cover}.mosaic img:first-child{grid-row:span 2}.mosaic img:last-child{grid-column:span 2}
.jubilee{background:#111;color:#f7f6f2;border-radius:6px;padding:34px 36px;margin-top:40px}.jubilee .n{font:500 96px/.8 'Newsreader';color:var(--acc)}
.search{position:relative;flex:0 1 260px}.search input{width:100%;background:#1f1e1b;border-color:#3a3833;color:#f7f6f2}
.sr{position:absolute;right:0;top:calc(100% + 10px);width:min(520px,92vw);max-height:70vh;overflow:auto;background:#fff;border-top:4px solid var(--acc);box-shadow:0 18px 40px rgba(0,0,0,.22);z-index:40}
.sr a{display:grid;grid-template-columns:1fr auto;padding:9px 16px;border-top:1px solid #f0eee8;color:var(--ink);text-decoration:none}.sr a:hover{background:#fff6cc}.sr small{grid-column:1/-1;color:var(--mut);font-size:12px}.sr p{padding:14px 16px;margin:0;color:var(--mut)}

tr.link{cursor:pointer}tr.link:hover td{background:#fff6cc}.tag{font:600 10px 'IBM Plex Mono';background:var(--acc);padding:2px 5px;border-radius:2px}
.game-head{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.game-head>div{display:flex;gap:14px;align-items:center}.game-head .r{justify-content:flex-end;text-align:right}
.game-head .pl{font:500 clamp(24px,3.4vw,38px)/1.05 'Newsreader';text-decoration:none}.sw,.sb{width:18px;height:18px;border:2px solid #111;flex:none}.sw{background:#fff}.sb{background:#111}
.res{flex-direction:column;text-align:center}.res b{font-size:clamp(26px,4vw,42px);background:var(--acc);padding:6px 16px;border-radius:4px}
.viewer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px;align-items:start;margin-top:20px}.board-wrap{display:flex;gap:8px;max-width:620px}
.ev-bar{width:18px;background:#111;border:2px solid #111;border-radius:2px;position:relative;overflow:hidden}.ev-fill{position:absolute;left:0;right:0;bottom:0;height:50%;background:#fff;box-shadow:0 -2px 0 var(--acc);transition:height .4s}
.board{flex:1;display:grid;grid-template-columns:repeat(8,1fr);border:3px solid #111;container-type:inline-size;user-select:none}
.sq{aspect-ratio:1;display:grid;place-items:center;position:relative}.sq.l{background:#efe7d2}.sq.d{background:#a7845a}.sq.l.hl{background:#f6e07a}.sq.d.hl{background:#d9b63c}
.pc{font:10cqw/1 'Noto Sans Symbols 2','Segoe UI Symbol',serif}.pc.w{color:#fff;-webkit-text-stroke:1.2px #111;text-shadow:0 2px 2px rgba(0,0,0,.25)}.pc.b{color:#111}
.sq i{position:absolute;font:600 max(9px,1.8cqw) 'IBM Plex Sans';font-style:normal}.sq .rk{left:3px;top:1px}.sq .fl{right:3px;bottom:0}.sq.l i{color:#a7845a}.sq.d i{color:#efe7d2}
.ctrl{display:flex;gap:6px;margin:12px 0 0 24px;align-items:center}.ctrl button{width:46px;height:44px;border:1px solid #cfcabd;background:#fff;border-radius:4px;font-size:16px;cursor:pointer}.ctrl button:hover{background:var(--acc)}
.side{display:flex;flex-direction:column;gap:16px;min-width:0}.engine{background:#111;color:#f7f6f2;border-radius:6px;padding:14px 16px}.engine .line{border:0}.engine b{color:var(--acc);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ev-toggle{background:#34322d;color:#f7f6f2;border:0;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer}.ev-toggle.on{background:var(--acc);color:#111}.ev-score{font-size:30px}.ev-info{color:#b9b4a8}
.moves{display:grid;grid-template-columns:44px 1fr 1fr;max-height:400px;overflow:auto;border-top:1px solid #111}.moves .no{color:#8d887c;padding:7px 0;border-bottom:1px solid #efece5}
.moves button{text-align:left;background:none;border:0;border-bottom:1px solid #efece5;padding:7px 8px;font:14px 'IBM Plex Mono';cursor:pointer}.moves button.on{background:var(--acc);font-weight:600}

/* Groepsformule */
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px 32px;margin:8px 0 14px}.groups.compact{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px 24px}
.group-name{font-size:21px;margin:0 0 6px}.groups.compact .group-name{font-size:17px}.tbl.group td.self{background:#e9e5da}.tbl.group td,.tbl.group th{padding:7px 6px}
.groups-admin{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}.groups-admin ol{margin:6px 0 0;padding-left:20px}
details.card summary{cursor:pointer}.right{text-align:right;margin:-8px 0 16px}.notice{border-left:4px solid var(--acc)}.stack.wide{max-width:900px}
.photos-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:12px}.photos-admin img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:3px}
.photos-admin .cap{display:flex;gap:4px;margin:6px 0}.photos-admin .cap input{flex:1;min-width:0;padding:6px 8px}.photos-admin .inline{align-items:center}
.gallery figure{margin:0}.gallery figcaption{font-size:13px;color:var(--mut);padding-top:4px}
.menu-btn{display:none}.menu,.amenu{display:contents}

/* Mobiel */
@media(max-width:760px){
  .wrap{padding:0 16px}main.wrap{padding-top:24px;padding-bottom:48px}
  .hdr-in{gap:10px;padding-top:10px;padding-bottom:10px;flex-wrap:nowrap}.brand img{width:40px;height:40px}.brand b{font-size:19px}.brand small{font-size:10px}
  .menu-btn{display:inline-flex;gap:6px;align-items:center;margin-left:auto;background:none;border:1px solid #3a3833;color:#f7f6f2;border-radius:4px;padding:8px 12px;font:600 14px 'IBM Plex Sans';cursor:pointer}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:#111;border-bottom:4px solid var(--acc);padding:6px 16px 16px;flex-direction:column;gap:10px}.menu.open{display:flex}
  nav{flex-direction:column;gap:0}nav a{padding:12px 4px;border-bottom:1px solid #2a2925;font-size:16px}nav a.on{border-bottom-color:var(--acc)}
  .search{flex:none}.sr{left:0;right:auto;width:100%}.menu .btn.dark{text-align:center}
  .hero{gap:24px;padding-bottom:28px}.hero h1{font-size:clamp(34px,10vw,44px)}h1.page{font-size:36px}h2{font-size:23px}
  .cols{gap:28px;padding:24px 0}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:none}.mosaic img{aspect-ratio:4/3;height:auto}.mosaic img:first-child{grid-row:auto;grid-column:span 2}.mosaic img:last-child{grid-column:auto}
  .jubilee{padding:22px 20px}.jubilee .n{font-size:64px}
  .tbl td,.tbl th{padding:8px 6px;font-size:13px}.scroll{margin:0 -16px;padding:0 16px}
  .gallery{grid-template-columns:repeat(2,1fr);gap:6px}.pill{padding:6px 12px;font-size:13px}
  .game-head{grid-template-columns:1fr;gap:10px;text-align:left}.game-head .r{justify-content:flex-start;text-align:left}.res{flex-direction:row;gap:12px}
  .ctrl{margin-left:0}.ctrl button{width:42px}.moves{max-height:260px}
  /* beheer */
  .admin aside{padding:10px 16px;gap:0}.brand-a{padding:0;display:flex;align-items:center;gap:10px}.brand-a small{display:none}
  .admin .menu-btn{border-color:#4a4740}
  .amenu{display:none;flex-direction:column;gap:2px;width:100%;padding-top:8px}.amenu.open{display:flex}.amenu .grow{display:none}
  .admin-main{padding:18px 16px 48px}.admin-main h1{font-size:28px}
  .line.pad{padding:10px 12px;flex-wrap:wrap}.game-line .grow{flex-basis:100%;order:-1}.seg{flex-wrap:wrap}.seg span{min-width:40px;height:32px}
  .inline>label,.inline>select,.inline>input{flex:1 1 140px}.card{padding:16px}
}

[hidden]{display:none!important}.nowrap{white-space:nowrap}
@media(max-width:760px){.hide-sm{display:none}}