@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap');

:root {
  --ink: #0e0f1a;
  --panel: #191b2c;
  --line: #2b2e47;
  --text: #f4f2fb;
  --muted: #9a9cb8;
  --a: #ff7a1a;      /* joueur 1 : orange */
  --b: #4d6bff;      /* joueur 2 : bleu */
  --danger: #ff5c7a;
  --radius: 14px;
  --font: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hidden { display: none !important; }

.owner-a { --owner: var(--a); }
.owner-b { --owner: var(--b); }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--owner, var(--muted)); margin-right: .4em; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }