@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-700.woff2) format('woff2')}
html{background:var(--bg)}
img{max-width:100%}
label.btn{cursor:pointer}
details summary{cursor:pointer;color:var(--muted)}

/* Layout: one-screen coach app — sticky scorebord bovenin, scrollende inhoud, vaste tabbalk onderin. */
:root{
  --bg:#eef0eb; --surface:#ffffff; --surface2:#e3e7df; --fg:#1a1f1b; --muted:#5b655d; --line:#cfd5cb;
  --accent:#e2591c; --accent-soft:#fbe3d6; --accent-fg:#ffffff;
  --pitch:#2f7b4d; --pitch-dark:#276a42; --pitch-line:#f3f7f0; --bench:#d9dfd3;
  --keeper:#e0a800; --ok:#2b8a4a; --warn:#d99a00; --warn-soft:#fff1c7; --bad:#c43c2b; --bad-soft:#f9dcd6;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --radius:12px; --shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#13171a; --surface:#1d2327; --surface2:#262d32; --fg:#eef1ec; --muted:#9aa59c; --line:#36403f;
  --accent:#ff7a3d; --accent-soft:#4a2a1b; --accent-fg:#1a1208;
  --pitch:#245f3c; --pitch-dark:#1d5033; --pitch-line:#dfe8dc; --bench:#2b343a;
  --keeper:#f0b429; --ok:#4cbf72; --warn:#f0b429; --warn-soft:#3f3310; --bad:#ef6b5a; --bad-soft:#4a221c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#13171a; --surface:#1d2327; --surface2:#262d32; --fg:#eef1ec; --muted:#9aa59c; --line:#36403f;
  --accent:#ff7a3d; --accent-soft:#4a2a1b; --accent-fg:#1a1208;
  --pitch:#245f3c; --pitch-dark:#1d5033; --pitch-line:#dfe8dc; --bench:#2b343a;
  --keeper:#f0b429; --ok:#4cbf72; --warn:#f0b429; --warn-soft:#3f3310; --bad:#ef6b5a; --bad-soft:#4a221c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35); color-scheme:dark }

html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.35;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:.01em}
h2{font-size:1.5rem;font-weight:700}
h3{font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.85rem}
[hidden]{display:none!important}

#app{height:100%;display:flex;flex-direction:column}
#top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 16px;display:flex;align-items:center;gap:10px}
#top h1{font-size:1.25rem;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sync{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
#sync i{width:9px;height:9px;border-radius:50%;background:var(--muted);display:inline-block}
#sync.ok i{background:var(--ok)} #sync.busy i{background:var(--warn)} #sync.err i{background:var(--bad)}
#view{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px 16px calc(84px + env(safe-area-inset-bottom,0px))}
#nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:4px 8px calc(6px + env(safe-area-inset-bottom,0px))}
#nav button{flex:1;min-width:0;background:none;border:0;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;border-radius:10px}
#nav button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#nav button.on{color:var(--accent)}

.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
.card.flat{box-shadow:none;border:1px solid var(--line)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row>*{min-width:0}
.grow{flex:1}
.stack{display:flex;flex-direction:column;gap:8px}
.btn{border:1px solid var(--line);background:var(--surface2);border-radius:10px;padding:9px 14px;font-weight:600;line-height:1.1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.danger{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;min-height:32px;font-size:.85rem}
.btn.big{font-family:var(--display);font-size:1.3rem;padding:12px 18px;min-height:52px;letter-spacing:.03em}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.block{width:100%}
label.f{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:3px}
.in{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 10px;min-height:40px}
textarea.in{min-height:64px;resize:vertical}
.field{margin-bottom:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:380px){.grid2{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface2);border-radius:999px;padding:5px 11px;font-size:.9rem;font-weight:500}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--fg)}
.chip.k{border-color:var(--keeper)}
.seg{display:flex;background:var(--surface2);border-radius:10px;padding:3px;gap:3px;margin-bottom:12px}
.seg button{flex:1;border:0;background:transparent;border-radius:8px;padding:8px 4px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:6px 6px;border-bottom:1px solid var(--line)}
td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
tr.warn td{background:var(--warn-soft)}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--surface2);color:var(--muted)}
.tag.warn{background:var(--warn-soft);color:var(--fg)}
.tag.ok{background:var(--ok);color:#fff}
.tag.k{background:var(--keeper);color:#1a1200}
.empty{text-align:center;color:var(--muted);padding:28px 12px}
.empty b{display:block;font-family:var(--display);font-size:1.4rem;color:var(--fg);margin-bottom:4px}

/* Scorebord */
.board{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px;margin-bottom:12px}
.score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.score>div{min-width:0}
.score .side{display:flex;flex-direction:column;gap:4px}
.score .side.r{align-items:flex-end}
.score .tn{font-weight:600;font-size:.9rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score .tn.r{text-align:right}
.score .sc{font-family:var(--display);font-size:3rem;font-weight:700;line-height:1;display:flex;align-items:center;gap:10px}
.score .sc span{min-width:1.1em;text-align:center}
.score .sc small{font-size:1.6rem;color:var(--muted)}
.gbtn{width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:1.3rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.clock{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.clock .q{font-family:var(--display);font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.clock .t{font-family:var(--display);font-size:2.6rem;font-weight:700;line-height:1}
.clock .nxt{font-size:.8rem;color:var(--muted)}
.clock .nxt b{color:var(--accent)}
.clock.hot .t{color:var(--accent)}
.clockbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.prog{height:5px;background:var(--surface2);border-radius:3px;margin-top:8px;overflow:hidden;position:relative}
.prog i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:3px}
.prog em{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--fg);opacity:.6}

/* Veld */
.fieldwrap{position:relative;background:var(--pitch-dark);border-radius:var(--radius);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow)}
.fieldwrap svg{display:block;width:100%;height:auto;transform-origin:0 0;will-change:transform}
.zoomctl{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px;z-index:2}
.zoomctl button{width:38px;height:38px;border-radius:10px;border:0;background:rgba(255,255,255,.9);color:#1a1f1b;font-weight:700;font-size:1.2rem;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.fieldhint{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:.75rem;padding:4px 8px;border-radius:8px;pointer-events:none;max-width:70%}
svg .ln{stroke:var(--pitch-line);stroke-width:3;fill:none}
svg .ln.dash{stroke-dasharray:10 10;stroke-width:2;opacity:.8}
svg .tok .body{fill:#ffffff;stroke:#1a1f1b;stroke-width:3}
svg .tok .body.keeper{fill:var(--keeper)}
svg .tok .body.guest{stroke-dasharray:6 5}
svg .tok .in{font-family:var(--display);font-size:24px;font-weight:700;text-anchor:middle;fill:#1a1f1b}
svg .tok .nm{font-family:var(--body);font-size:23px;font-weight:700;text-anchor:middle;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.65);stroke-width:5;stroke-linejoin:round}
svg .tok .ring{fill:none;stroke-width:6}
svg .tok .ring.sel{stroke:#ffffff;stroke-dasharray:14 8;animation:spin 6s linear infinite}
svg .tok .ring.plan{stroke:var(--accent)}
svg .tok .ring.warn{stroke:var(--warn);stroke-width:5}
svg .badge{fill:#1a1f1b;stroke:#fff;stroke-width:2}
svg .bt{font-family:var(--display);font-size:19px;font-weight:700;text-anchor:middle;fill:#fff}
svg .slot{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.75);stroke-width:3;stroke-dasharray:8 7}
svg .slot-t{font-family:var(--display);font-size:22px;font-weight:700;text-anchor:middle;fill:rgba(255,255,255,.9)}
svg .plan{stroke:var(--accent);stroke-width:6;stroke-dasharray:16 10;fill:none;stroke-linecap:round}
svg .planlbl{font-family:var(--display);font-size:22px;font-weight:700;text-anchor:middle;fill:var(--accent);paint-order:stroke;stroke:rgba(0,0,0,.7);stroke-width:5}
svg .benchbg{fill:var(--bench)}
svg .bencht{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:2px;fill:var(--muted);text-transform:uppercase}
@keyframes spin{to{stroke-dashoffset:-44}}
@media (prefers-reduced-motion:reduce){svg .tok .ring.sel{animation:none}}

.selbar{margin-top:10px}
.planlist{display:flex;flex-direction:column;gap:6px}
.planitem{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--accent-soft)}
.planitem b{font-family:var(--display);font-size:1.1rem}
.planitem .x{margin-left:auto;background:none;border:0;font-size:1.2rem;color:var(--muted);padding:4px 8px}

/* Log */
.logitem{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);align-items:baseline}
.logitem:last-child{border-bottom:0}
.logitem .lt{font-family:var(--display);font-weight:700;color:var(--muted)}

/* Overlays */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}
.sheet{background:var(--surface);width:100%;max-width:560px;max-height:92%;overflow:auto;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.sheet h2{margin-bottom:10px}
.banner{position:fixed;left:0;right:0;top:0;z-index:60;background:var(--accent);color:var(--accent-fg);padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.banner h2{font-size:2rem;letter-spacing:.04em;text-transform:uppercase}
.banner .btn{background:rgba(255,255,255,.92);border-color:transparent;color:#1a1f1b}
.banner .btn.primary{background:#1a1f1b;color:#fff}
.banner ul{margin:6px 0 10px;padding-left:18px;font-size:1.05rem}
.matchitem{display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left}
.matchitem:last-child{border-bottom:0}
.matchitem .d{font-family:var(--display);font-weight:700;line-height:1;text-align:center}
.matchitem .d b{display:block;font-size:1.5rem}
.matchitem .d span{font-size:.75rem;text-transform:uppercase;color:var(--muted)}
.matchitem .st{font-family:var(--display);font-size:1.4rem;font-weight:700}
.playerrow{display:grid;grid-template-columns:1fr 1fr auto auto;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.playerrow:last-child{border-bottom:0}
.playerrow .in{min-height:36px;padding:6px 8px}
.kbtn{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);font-weight:700;font-size:.8rem}
.kbtn.on{background:var(--keeper);border-color:var(--keeper);color:#1a1200}
.xbtn{width:36px;height:36px;border-radius:8px;border:0;background:none;color:var(--muted);font-size:1.2rem}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:999px;font-weight:600;z-index:70;box-shadow:var(--shadow);max-width:90%;text-align:center}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.pickgrid .btn{min-height:48px;justify-content:flex-start}
.pickgrid .btn small{color:var(--muted);font-weight:500;margin-left:auto}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.95rem}
.kv dt{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding-top:3px}
.kv dd{margin:0}
.statcols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.stat{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:1.8rem;line-height:1}
.stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

.codebox{font-family:var(--display);font-size:1.7rem;font-weight:700;letter-spacing:.08em;text-align:center;background:var(--surface2);border-radius:10px;padding:10px 8px;user-select:all;-webkit-user-select:all;font-variant-numeric:tabular-nums}

.fieldwrap.zoomed{touch-action:none}
.fieldwrap.zoomed .zoomctl button[data-act=zreset]{background:var(--accent);color:var(--accent-fg)}
.fieldcap{font-size:.78rem;color:var(--muted);margin:6px 2px 0}

svg .linezone{fill:rgba(0,0,0,.05);stroke:var(--line);stroke-width:2}
svg .linezone.drop{stroke:var(--accent);stroke-width:4;stroke-dasharray:10 8;fill:var(--accent-soft)}
svg .linelbl{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:2px;fill:var(--muted)}
@media (prefers-color-scheme:dark){svg .linezone{fill:rgba(255,255,255,.04)}}

.zoomrow{display:flex;gap:6px;flex:none}
.zoomrow button{width:40px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:1rem}
.zoomrow button[data-act=zreset]{font-size:.8rem}
#zoombar.zoomed button[data-act=zreset]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

.playerrow.trim{grid-template-columns:1fr 1fr auto auto auto}
.kbtn.dame{background:#b65fc9;border-color:#b65fc9;color:#fff}
svg .tok .body.dame{fill:#f2dcf7}
svg .tok .body.dame.keeper{fill:var(--keeper)}
.tag.bad{background:var(--bad);color:#fff}

a.btn{color:inherit;text-decoration:none}

.movedbar{background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px}