/* Zetwijs partijvergelijker · theme-ready component
   Gebruikt bestaande Zetwijs-variabelen en heeft alleen lokale fallbacks. */

.zw-game-compare{
  --gc-bg:var(--surface-background,#0e1b35);
  --gc-panel:var(--surface-panel,linear-gradient(145deg,rgba(33,56,95,.82),rgba(23,43,80,.86)));
  --gc-card:var(--surface-card,var(--gc-panel));
  --gc-control:var(--surface-control,#10213f);
  --gc-input:var(--surface-input,#091c35);
  --gc-border:var(--border-subtle,rgba(101,217,241,.20));
  --gc-border-strong:var(--border-default,rgba(101,217,241,.30));
  --gc-text:var(--jura-body,#cbd9e6);
  --gc-heading:var(--text-orbitron,var(--jura-bright,#e6f1fa));
  --gc-muted:var(--jura-bluegray,#8fa8bd);
  --gc-soft:var(--jura-soft,#9db0c8);
  --gc-accent:var(--accent-brand,var(--jura-cyan,#65d9f1));
  --gc-success:var(--jura-success,#18b978);
  --gc-success-muted:var(--jura-success-muted,#227a5b);
  --gc-danger:var(--jura-danger,#ff5c7a);
  --gc-warning:color-mix(in srgb,var(--gc-danger) 24%,#e7b85a 76%);
  --gc-btn:var(--btn-bg,var(--gc-control));
  --gc-btn-hover:var(--btn-bg-hover,var(--gc-control));
  --gc-btn-border:var(--btn-border,var(--gc-border));
  --gc-input-text:var(--text-input,var(--jura-bright,#e6f1fa));

  color:var(--gc-text);
  font:500 14px/1.55 Jura,system-ui,sans-serif;
}

.zw-game-compare *{box-sizing:border-box}
.zw-game-compare{max-width:1120px;margin:0 auto;padding:28px 18px 60px}
.zw-game-compare h1{
  margin:0 0 7px;
  color:var(--gc-heading);
  font:400 24px/1.25 Orbitron,Jura,system-ui,sans-serif;
  letter-spacing:var(--zw-orbitron-spacing,.035em);
}
.zw-game-compare .gc-lead{margin:0 0 24px;color:var(--gc-muted)}
.zw-game-compare .gc-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:18px}
.zw-game-compare .gc-card{
  background:var(--gc-panel);
  border:1px solid var(--gc-border);
  border-radius:8px;
  padding:20px;
  box-shadow:0 12px 34px color-mix(in srgb,#000 14%,transparent);
}
.zw-game-compare label{display:block;margin:0 0 7px;color:var(--gc-heading);font-weight:700}
.zw-game-compare input,
.zw-game-compare select,
.zw-game-compare button{font:inherit}
.zw-game-compare input[type="text"],
.zw-game-compare input[type="number"],
.zw-game-compare textarea,
.zw-game-compare select{
  width:100%;
  min-height:40px;
  border:1px solid var(--border-input,var(--gc-border));
  border-radius:5px;
  background:var(--gc-input);
  color:var(--gc-input-text);
  padding:8px 10px;
  outline:none;
}
.zw-game-compare input[type="text"]:focus,
.zw-game-compare input[type="number"]:focus,
.zw-game-compare textarea:focus,
.zw-game-compare select:focus{
  border-color:var(--gc-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gc-accent) 10%,transparent);
}
.zw-game-compare input[type="file"]{max-width:100%;color:var(--gc-muted)}
.zw-game-compare input[type="checkbox"]{accent-color:var(--gc-accent)}
.zw-game-compare .gc-account-row{display:grid;grid-template-columns:140px minmax(180px,1fr) 110px 150px;gap:10px;align-items:end}
.zw-game-compare .gc-account-row .small{margin-bottom:4px}
.zw-game-compare .gc-account-row.pgn-mode{grid-template-columns:minmax(180px,220px)}
.zw-game-compare .gc-pgn-panel{margin-top:14px}
.zw-game-compare .gc-pgn-panel textarea{min-height:150px;resize:vertical;font:500 12.5px/1.5 Jura,system-ui,sans-serif}
.zw-game-compare .gc-pgn-actions{display:grid;grid-template-columns:minmax(170px,1fr) auto;gap:8px 12px;align-items:end;margin-top:10px}
.zw-game-compare .gc-pgn-actions .gc-file-label{grid-column:1/-1;margin:0;color:var(--gc-muted);font-size:11.5px;font-weight:500}
.zw-game-compare .gc-file-picker{
  min-height:40px;
  display:flex;
  align-items:stretch;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--border-input,var(--gc-border));
  border-radius:5px;
  background:var(--gc-input);
}
.zw-game-compare .gc-file-button{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  margin:0;
  padding:8px 12px;
  border:0;
  border-right:1px solid var(--gc-btn-border);
  background:var(--gc-btn);
  color:var(--gc-heading);
  font:700 14px/1.3 Jura,system-ui,sans-serif;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.zw-game-compare .gc-file-button:hover,
.zw-game-compare .gc-file-button:focus-visible{
  outline:none;
  background:var(--gc-btn-hover);
  color:var(--gc-accent);
  box-shadow:inset 0 0 12px color-mix(in srgb,var(--gc-accent) 10%,transparent);
}
.zw-game-compare .gc-file-name{
  min-width:0;
  display:flex;
  align-items:center;
  padding:8px 11px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--gc-muted);
}
.zw-game-compare #gameComparePgnLoad{border-color:color-mix(in srgb,var(--gc-accent) 55%,transparent);color:var(--gc-accent)}
.zw-game-compare button{
  min-height:40px;
  border:1px solid var(--gc-btn-border);
  border-radius:5px;
  background:var(--gc-btn);
  color:var(--gc-heading);
  padding:9px 13px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.zw-game-compare button:hover:not(:disabled),
.zw-game-compare button:focus-visible:not(:disabled){
  outline:none;
  border-color:var(--gc-accent);
  background:var(--gc-btn-hover);
  color:var(--gc-accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--gc-accent) 12%,transparent);
}
.zw-game-compare button:disabled{opacity:.42;cursor:default}
.zw-game-compare #gameCompareLoad,
.zw-game-compare #gameCompareRun{
  border-color:color-mix(in srgb,var(--gc-accent) 55%,transparent);
  color:var(--gc-accent);
}
.zw-game-compare .gc-secondary{background:var(--gc-control);color:var(--gc-muted)}
.zw-game-compare .gc-status{margin:12px 0 0;color:var(--gc-muted)}
.zw-game-compare .gc-error{color:var(--gc-danger)}
.zw-game-compare .gc-small{font-size:11.5px;line-height:1.45;color:var(--gc-muted)}
.zw-game-compare .hidden{display:none!important}
.zw-game-compare .gc-spacer{flex:1}
.zw-game-compare .gc-section-gap{margin-top:18px}
.zw-game-compare .gc-table-scroll{overflow:auto}

.zw-game-compare .gc-game-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 13px}
.zw-game-compare .gc-game-list{max-height:420px;overflow:auto;border:1px solid var(--gc-border);border-radius:6px;background:color-mix(in srgb,var(--gc-control) 44%,transparent)}
.zw-game-compare table{width:100%;border-collapse:collapse;font-size:12.5px}
.zw-game-compare th,
.zw-game-compare td{padding:9px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--gc-border)}
.zw-game-compare th{color:var(--gc-muted);font-weight:700;white-space:nowrap}
.zw-game-compare tbody tr:last-child td{border-bottom:0}
.zw-game-compare .gc-game-list tr.selected{background:color-mix(in srgb,var(--gc-accent) 6%,transparent)}
.zw-game-compare .gc-game-list tr:hover{background:color-mix(in srgb,var(--gc-accent) 4%,transparent)}

.zw-game-compare .result-card{margin-top:14px;padding:0;overflow:hidden}
.zw-game-compare .result-card>summary{
  cursor:pointer;
  list-style:none;
  padding:15px 18px;
  border-bottom:1px solid transparent;
  color:var(--gc-heading);
}
.zw-game-compare .result-card[open]>summary{border-bottom-color:var(--gc-border)}
.zw-game-compare .result-card>summary::-webkit-details-marker{display:none}
.zw-game-compare .result-card>summary::before{content:'▸';display:inline-block;width:18px;color:var(--gc-accent);transition:transform .16s ease}
.zw-game-compare .result-card[open]>summary::before{transform:rotate(90deg)}
.zw-game-compare .result-card>p,
.zw-game-compare .result-card>.table-scroll{margin-left:18px;margin-right:18px}
.zw-game-compare .result-card>.table-scroll{margin-bottom:18px}
.zw-game-compare .result-head{display:inline-flex;gap:9px;flex-wrap:wrap;align-items:center}
.zw-game-compare .badge,
.zw-game-compare .tag{display:inline-flex;align-items:center;border:1px solid var(--gc-border);border-radius:999px;padding:2px 8px;white-space:nowrap;font-size:11.5px}
.zw-game-compare .win{color:var(--gc-success)}
.zw-game-compare .loss{color:var(--gc-danger)}
.zw-game-compare .draw{color:var(--gc-warning)}
.zw-game-compare .in-repertoire,
.zw-game-compare .reentered-repertoire{color:var(--gc-success);border-color:color-mix(in srgb,var(--gc-success) 35%,var(--gc-border))}
.zw-game-compare .strong-alternative{color:var(--gc-accent);border-color:color-mix(in srgb,var(--gc-accent) 42%,var(--gc-border))}
.zw-game-compare .player-deviation,
.zw-game-compare .opponent-deviation{color:var(--gc-danger);border-color:color-mix(in srgb,var(--gc-danger) 38%,var(--gc-border))}
.zw-game-compare .out-of-repertoire{color:var(--gc-warning)}
.zw-game-compare .before-range{color:var(--gc-muted)}
.zw-game-compare .cutoff-note{
  margin:0;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--gc-muted) 28%,transparent);
  border-radius:5px;
  background:var(--surface-warning,color-mix(in srgb,var(--gc-control) 72%,transparent));
  color:var(--gc-muted);
}

@media(max-width:900px){
  .zw-game-compare .gc-grid{grid-template-columns:1fr}
  .zw-game-compare .gc-account-row{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .zw-game-compare{padding:18px 10px 40px}
  .zw-game-compare .gc-account-row,
  .zw-game-compare .gc-account-row.pgn-mode{grid-template-columns:1fr}
  .zw-game-compare .gc-pgn-actions{grid-template-columns:1fr}
  .zw-game-compare .gc-card{padding:14px}
  .zw-game-compare .result-card{padding:0}
  .zw-game-compare .gc-game-list{max-height:none}
}

.zw-game-compare .gc-card h2{font:400 16px/1.35 Orbitron,sans-serif;color:var(--text-orbitron);letter-spacing:var(--zw-orbitron-spacing);margin:0 0 14px}
.zw-game-compare .gc-game-actions h2{margin:0}
.zw-game-compare .gc-back-row{margin-top:18px}


/* v1.1 — compacte terugknop, sticky tabelkop, onzichtbare scrollbar */
.zw-game-compare .gc-back-row{justify-content:flex-start}
.zw-game-compare .gc-back-row .zw-profile-link{
  min-height:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
}
.zw-game-compare .gc-back-row .zw-profile-link svg{
  display:block;
  width:16px;
  height:16px;
  flex:0 0 16px;
}

.zw-game-compare .gc-game-list{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.zw-game-compare .gc-game-list::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.zw-game-compare .gc-game-list thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--gc-control);
  color:var(--gc-heading);
  box-shadow:0 1px 0 var(--gc-border);
}

/* v1.3 — partijstatus en bronlink */
.zw-game-compare .gc-status-detail{margin-top:5px}
.zw-game-compare .gc-game-link-head,
.zw-game-compare .gc-game-link-cell{width:42px;text-align:center}
.zw-game-compare .gc-game-link{
  display:inline-grid;place-items:center;width:28px;height:28px;
  border:1px solid color-mix(in srgb,var(--gc-accent) 24%,transparent);
  border-radius:5px;background:var(--gc-control);color:var(--gc-muted);
  text-decoration:none;transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease
}
.zw-game-compare .gc-game-link svg{width:17px;height:17px;display:block}
.zw-game-compare .gc-game-link:hover,
.zw-game-compare .gc-game-link:focus-visible{
  outline:none;color:var(--gc-accent);border-color:var(--gc-accent);
  background:color-mix(in srgb,var(--gc-control) 88%,var(--gc-accent) 12%);
  box-shadow:0 0 10px color-mix(in srgb,var(--gc-accent) 10%,transparent)
}

/* Resultaten starten ingeklapt, met een duidelijke uitklapindicator. */
.zw-game-compare .result-card>summary{position:relative;padding-left:48px}
.zw-game-compare .result-card>summary::before{position:absolute;left:17px;top:15px;width:22px;font-size:24px;line-height:24px;text-align:center;transform-origin:center}
.zw-game-compare .result-card[open]>summary::before{transform:rotate(90deg)}
.zw-game-compare .gc-result-summary{display:block;margin-top:6px}
.zw-game-compare .result-card>summary:focus-visible{outline:2px solid var(--gc-accent);outline-offset:-3px}


/* Repertoirekleur blijft zichtbaar onafhankelijk van de checkboxselectie. */
.zw-game-compare .gc-game-list tr.repertoire-color{background:color-mix(in srgb,var(--gc-accent) 6%,transparent)}
.zw-game-compare .gc-game-list tr.repertoire-color:hover{background:color-mix(in srgb,var(--gc-accent) 9%,transparent)}


.zw-game-compare .result-card .gc-table-scroll td:first-child,.zw-game-compare .result-card .gc-table-scroll th:first-child{white-space:nowrap}