/* Jetons pointés vers la palette commune (theme.css) ; l'échiquier
   garde ses cases sombres dans les deux modes. */
:root {
  --bg:var(--g-fond); --surface:var(--g-surface); --surface-2:var(--g-surface-2); --text:var(--g-encre);
  --muted:var(--g-encre-douce); --line:var(--g-filet); --accent:var(--g-accent); --danger:var(--g-alerte);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"OCR A Std Regular","OCR A",ui-monospace,monospace; }
a { color:inherit; text-decoration:none; }
button, select { font:inherit; }
.wrap { width:min(1220px,100%); margin:0 auto; padding:24px; }
.site-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.brand { display:inline-block; font-size:30px; letter-spacing:1px; }
.eyebrow, .kicker { color:var(--muted); letter-spacing:.14em; font-size:12px; }
.eyebrow { margin:6px 0 0; }
.app-nav { display:flex; border:1px solid var(--line); }
.app-nav a { padding:10px 18px; color:var(--muted); }
.app-nav a + a { border-left:1px solid var(--line); }
.app-nav a:hover, .app-nav a.active { background:var(--text); color:var(--bg); }
.intro { min-height:390px; display:flex; flex-direction:column; justify-content:center; }
.intro h1 { max-width:820px; margin:12px 0 20px; font-size:clamp(42px,7vw,88px); line-height:.95; letter-spacing:-.055em; }
.run-picker { display:inline-flex; flex-direction:column; gap:7px; color:var(--muted); font-size:11px; letter-spacing:.1em; margin-top:6px; }
.run-picker select { min-width:320px; max-width:100%; }
.champion { width:min(100%,340px); margin-top:22px; border:1px solid var(--line); padding:24px; background:var(--surface); display:flex; flex-direction:column; gap:8px; }
.champion .label, .facts span { color:var(--muted); font-size:11px; letter-spacing:.13em; }
.champion strong { font-size:28px; margin-top:10px; }
.champion > span:not(.label) { color:var(--accent); font-size:20px; }
.live-banner { margin-bottom:16px; border:1px solid var(--line); background:var(--surface); padding:16px 18px; display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; }
.live-banner strong { letter-spacing:.12em; font-size:12px; }
.live-banner span { color:color-mix(in srgb, var(--text) 80%, var(--bg)); font-size:13px; }
.live-banner a { color:var(--accent); font-size:13px; text-decoration:underline; }
.launch { margin-bottom:26px; border:1px solid var(--line); }
.launch summary { cursor:pointer; padding:14px 18px; color:var(--muted); letter-spacing:.12em; font-size:12px; text-transform:uppercase; }
.launch summary:hover { color:var(--text); }
.launch form { padding:4px 18px 18px; display:flex; flex-direction:column; gap:14px; }
.launch-grid { display:flex; gap:14px; flex-wrap:wrap; }
.launch-grid label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:11px; letter-spacing:.1em; }
.launch input[type=password] { background:var(--bg); color:var(--text); border:1px solid var(--line); padding:9px 12px; min-width:180px; font:inherit; }
.launch-bots { border:1px solid var(--line); margin:0; padding:12px 14px; display:flex; flex-wrap:wrap; gap:10px 18px; }
.launch-bots legend { color:var(--muted); font-size:11px; letter-spacing:.1em; padding:0 6px; }
.launch-bots label { display:flex; gap:6px; align-items:center; font-size:13px; color:color-mix(in srgb, var(--text) 80%, var(--bg)); }
.launch-actions { display:flex; gap:12px; flex-wrap:wrap; }
.launch-actions button { background:transparent; color:var(--text); border:1px solid var(--line); padding:9px 14px; cursor:pointer; font:inherit; }
.launch-actions button:hover:not(:disabled) { background:var(--text); color:var(--bg); }
.launch-actions button:disabled { color:color-mix(in srgb, var(--text) 35%, var(--bg)); cursor:default; }
#launch-message { margin:0; font-size:13px; }
#launch-message.err { color:var(--danger); }
#launch-message.ok { color:var(--accent); }
.notice { border:1px solid var(--line); padding:28px; min-height:100px; display:flex; flex-direction:column; justify-content:center; gap:10px; color:var(--muted); }
.notice strong { color:var(--text); }
.notice.error { border-color:var(--danger); color:var(--danger); }
.facts { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.facts div { min-width:0; padding:18px; display:flex; flex-direction:column; gap:8px; }
.facts div + div { border-left:1px solid var(--line); }
.facts strong, .facts a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.facts a { color:var(--accent); }
.section { margin-top:88px; scroll-margin-top:20px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:24px; }
.section-heading h2 { margin:6px 0 0; font-size:34px; font-weight:400; }
.section-heading .kicker { margin:0; }
.table-scroll { overflow-x:auto; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; min-width:720px; }
th, td { text-align:left; padding:15px 16px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:11px; letter-spacing:.12em; font-weight:400; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface); }
.rating { color:var(--accent); }
.muted { color:var(--muted); }
.button-link, button.compact, .pagination button, .replay-controls button, .game-replay {
  background:transparent; color:var(--text); border:1px solid var(--line); padding:9px 13px; cursor:pointer;
}
.button-link:hover, button.compact:hover, .pagination button:hover:not(:disabled), .replay-controls button:hover, .game-replay:hover { background:var(--text); color:var(--bg); }
button:focus-visible, select:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.filters { display:flex; align-items:end; gap:14px; margin-bottom:16px; }
.filters label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:11px; letter-spacing:.1em; }
select { min-width:180px; padding:9px 12px; background:var(--bg); color:var(--text); border:1px solid var(--line); }
.filters > span { margin-left:auto; padding-bottom:9px; font-size:12px; }
.pagination { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:18px; }
.pagination button:disabled { color:color-mix(in srgb, var(--text) 35%, var(--bg)); cursor:default; }
.replay { border:1px solid var(--line); padding:24px; background:var(--surface); }
.replay-grid { display:grid; grid-template-columns:minmax(320px,560px) minmax(240px,1fr); gap:28px; }
.board { width:100%; aspect-ratio:1; }
.board .cg-wrap { width:100%; height:100%; }
/* Le liseré est porté par l'échiquier, jamais par le cadre : chessground taille
   ses cases en pixels ÉCRAN, donc l'échiquier est presque toujours un peu plus
   petit que le cadre — et ce reste apparaissait en bande claire à droite et en
   bas, dès un zoom système à 125 %. Collé à l'échiquier, le trait tombe juste. */
cg-board { outline:1px solid var(--line); background-color:#262626; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect width='2' height='2' fill='%23262626'/%3E%3Cpath d='M1 0h1v1H1zM0 1h1v1H0z' fill='%230d0d0d'/%3E%3C/svg%3E"); background-size:25% 25%; }
cg-board square.last-move { background-color:rgba(34,197,94,.28); }
.replay-controls { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:10px; }
.replay-controls button { padding:10px 5px; }
.keyboard-hint { color:var(--muted); font-size:11px; text-align:center; }
.move-panel { min-height:0; display:flex; flex-direction:column; }
.replay-meta { color:var(--muted); font-size:12px; line-height:1.7; padding-bottom:16px; border-bottom:1px solid var(--line); }
.move-list { padding-top:14px; display:grid; grid-template-columns:38px 1fr 1fr; align-content:start; overflow-y:auto; max-height:560px; }
.move-number, .move { padding:7px 8px; border-bottom:1px solid var(--line); }
.move-number { color:var(--muted); }
.move { cursor:pointer; }
.move:hover, .move.current { background:var(--accent); color:var(--bg); }
.bot-cards { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.bot-card { padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:190px; }
.bot-card h3 { margin:0 0 14px; font-size:18px; }
.bot-card p { color:color-mix(in srgb, var(--text) 70%, var(--bg)); font-size:13px; line-height:1.6; }
.bot-card .change { color:var(--muted); }
.bot-card a { color:var(--accent); font-size:12px; }
@media (max-width:900px) {
  .intro { min-height:auto; padding:56px 0; }
  .facts { grid-template-columns:repeat(2,1fr); }
  .facts div + div { border-left:0; }
  .facts div { border-bottom:1px solid var(--line); }
  .facts div:nth-child(even) { border-left:1px solid var(--line); }
  .replay-grid { grid-template-columns:1fr; }
  .bot-cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .wrap { padding:18px; }
  .brand { font-size:24px; }
  .site-header { align-items:center; }
  .app-nav a { padding:8px 11px; font-size:13px; }
  .intro h1 { font-size:48px; }
  .section { margin-top:64px; }
  .section-heading, .games-heading { align-items:flex-start; flex-direction:column; }
  .facts, .bot-cards { grid-template-columns:1fr; }
  .facts div:nth-child(even) { border-left:0; }
  .filters { align-items:stretch; flex-direction:column; }
  .filters > span { margin-left:0; }
  select { width:100%; }
  .replay { padding:14px; }
}