/* Couleurs de l'interface : chaque thème redéfinit ces variables (voir plus bas). */
:root {
  --bg: #2b2f33;
  --bg-deep: #222528;
  --border-deep: #1a1d20;
  --panel: #24282b;
  --panel-2: #1e2124;
  --surface: #1b1e21;
  --raised: #363b40;
  --raised-hover: #434950;
  --raised-shadow: #1a1d20;
  --row-alt: #262a2e;
  --chip: #474d54;
  --text: #e6e8ea;
  --text-soft: #cdd2d6;
  --muted: #98a0a8;
  --accent: #e3a33b;
  --accent-hover: #efb553;
  --accent-dark: #9a681c;
  --on-accent: #2a1c06;
  --clock-bg: #969ca2;
  --clock-fg: #464b50;
  --clock-dark-bg: #26292d;
  --clock-dark-fg: #858d95;
  --red: #c44a3c;
  --sq: 64px;
  /* Rampe de hauteurs (plus c'est haut, plus c'est clair) et couleurs de surlignage. */
  --h0: #6b4a2b; --h1: #82603a; --h2: #9a774a; --h3: #b18f5d; --h4: #c5a672; --h5: #d6bd8c; --h6: #e3d1a8; --h7: #ede1c3; --h8: #f6efdf;
  --hl: 60, 150, 225; --hint-special: 40, 90, 160; --hint-enemy: 196, 50, 40;
}

/* Ambre : ocre sur ardoise (thème par défaut, valeurs de :root). */

/* Glacier : bleu glacier sur ardoise bleutée. */
:root[data-theme="glacier"] {
  --bg: #262c35; --bg-deep: #1e232a; --border-deep: #171b21;
  --panel: #20262e; --panel-2: #1a1f26; --surface: #171b21;
  --raised: #323a45; --raised-hover: #3e4854; --raised-shadow: #151920;
  --row-alt: #222830; --chip: #44505d;
  --text: #e4e9ef; --text-soft: #c9d2dc; --muted: #91a0af;
  --accent: #5fa8e8; --accent-hover: #79b9f0; --accent-dark: #2d669e; --on-accent: #fff;
  --clock-bg: #93a0ad; --clock-fg: #414b56; --clock-dark-bg: #20262e; --clock-dark-fg: #8494a4;
  --h0: #2f5873; --h1: #3f6f8c; --h2: #5487a3; --h3: #6d9fb8; --h4: #8ab5ca; --h5: #a8c9d9; --h6: #c4dbe6; --h7: #dce9f0; --h8: #eef5f8;
  --hl: 255, 205, 70; --hint-special: 120, 60, 170; --hint-enemy: 196, 74, 60;
}

/* Terracotta : brique sur anthracite neutre. */
:root[data-theme="terracotta"] {
  --bg: #2a2a2c; --bg-deep: #212123; --border-deep: #1a1a1c;
  --panel: #242426; --panel-2: #1e1e20; --surface: #1b1b1d;
  --raised: #38383b; --raised-hover: #454549; --raised-shadow: #18181a;
  --row-alt: #28282a; --chip: #4a4a4e;
  --text: #ebe9e6; --text-soft: #d3d0cc; --muted: #a09d99;
  --accent: #d9714a; --accent-hover: #e4865f; --accent-dark: #8c3d22; --on-accent: #fff;
  --clock-bg: #9c9a97; --clock-fg: #4a4947; --clock-dark-bg: #232325; --clock-dark-fg: #8c8a87;
  --h0: #6e3424; --h1: #864331; --h2: #9e5640; --h3: #b46c52; --h4: #c78668; --h5: #d6a183; --h6: #e2bba1; --h7: #ecd3c0; --h8: #f5e7dc;
  --hl: 255, 225, 80; --hint-special: 40, 90, 160; --hint-enemy: 70, 30, 110;
}

/* Aurore : violet doux sur gris prune. */
:root[data-theme="aurore"] {
  --bg: #2a2830; --bg-deep: #211f26; --border-deep: #1a181e;
  --panel: #24222a; --panel-2: #1e1c23; --surface: #1b191f;
  --raised: #38353f; --raised-hover: #45414d; --raised-shadow: #18161c;
  --row-alt: #28262d; --chip: #4b4754;
  --text: #ebe8f0; --text-soft: #d3cfdb; --muted: #a09aab;
  --accent: #a68ae6; --accent-hover: #b69ded; --accent-dark: #5f46a3; --on-accent: #fff;
  --clock-bg: #9d98a6; --clock-fg: #48444f; --clock-dark-bg: #232128; --clock-dark-fg: #8d8798;
  --h0: #4a3b6b; --h1: #5d4c80; --h2: #715f95; --h3: #8775a9; --h4: #9e8dbc; --h5: #b5a6cd; --h6: #cbbfdc; --h7: #dfd6ea; --h8: #efeaf5;
  --hl: 255, 215, 100; --hint-special: 30, 110, 140; --hint-enemy: 196, 60, 50;
}

/* Classique : vert prairie sur gris chaud. */
:root[data-theme="classic"] {
  --bg: #302e2b; --bg-deep: #262522; --border-deep: #1d1c1a;
  --panel: #262421; --panel-2: #21201d; --surface: #1f1e1c;
  --raised: #3a3835; --raised-hover: #4a4844; --raised-shadow: #252321;
  --row-alt: #2a2926; --chip: #4b4946;
  --text: #e8e6e3; --text-soft: #d6d4d1; --muted: #9b9893;
  --accent: #81b64c; --accent-hover: #95c45f; --accent-dark: #45753c; --on-accent: #fff;
  --clock-bg: #989795; --clock-fg: #4c4b49; --clock-dark-bg: #2b2927; --clock-dark-fg: #8b8987;
  --h0: #3b6532; --h1: #557f3f; --h2: #74994d; --h3: #97b35f; --h4: #b9c779; --h5: #d5d39a; --h6: #e6dfbb; --h7: #efe9d4; --h8: #f7f4e8;
  --hl: 255, 255, 51; --hint-special: 40, 90, 160; --hint-enemy: 196, 74, 60;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }

/* Barres de défilement fines et discrètes, aux couleurs du thème. */
* { scrollbar-width: thin; scrollbar-color: var(--chip) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--chip); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.rules h2:focus { outline: none; }
.hidden { display: none !important; }

/* ---------- Barre du haut ---------- */
.topbar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-deep);
}
.brand { font-weight: 800; font-size: 20px; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; }
.brand-mark {
  width: 20px; height: 20px; background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.brand-sub { font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 3px; padding: 1px 5px; }
.topbar nav { display: flex; gap: 6px; }
.ghost { background: transparent; color: var(--muted); padding: 6px 10px; border-radius: 4px; font-weight: 600; }
.ghost:hover { background: var(--raised); color: var(--text); }

.menu { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 250px;
  background: var(--panel); border: 1px solid var(--border-deep); border-radius: 8px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.menu-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px;
  background: transparent; text-align: left;
}
.menu-opt:hover { background: var(--raised); }
.menu-opt.on { background: var(--chip); }
.swatch {
  width: 34px; height: 34px; border-radius: 6px; flex-shrink: 0; position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.swatch::after {
  content: ""; position: absolute; right: 5px; bottom: 5px; width: 14px; height: 14px; border-radius: 4px;
  background: var(--sw-accent); box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.menu-opt b { display: block; font-size: 13px; }
.menu-opt small { color: var(--muted); font-size: 11px; }

/* ---------- Mise en page ---------- */
.layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  padding: 16px;
}
.board-col { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Joueurs ---------- */
.player-bar {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: calc(var(--sq) * 0.32);
}
.avatar {
  width: 38px; height: 38px; border-radius: 4px;
  display: grid; place-items: center;
  background: var(--chip);
}
.avatar svg { width: 30px; height: 30px; }
.pinfo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname .tag { font-weight: 600; color: var(--muted); font-size: 12px; margin-left: 6px; }
.pextra { display: flex; align-items: center; gap: 8px; height: 18px; color: var(--muted); font-size: 12px; }
.captured { display: flex; align-items: center; }
.captured svg { width: 18px; height: 18px; margin-right: -4px; }
.nexus-count { font-weight: 700; color: var(--text-soft); display: inline-flex; align-items: center; gap: 3px; }
.nexus-count i { width: 9px; height: 9px; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.nexus-count.hot { color: var(--red); }
.nexus-count.hot i { background: var(--red); }
.pscore { font-weight: 700; color: #f0c45a; }
.clock {
  min-width: 96px; height: 40px; padding: 0 12px;
  display: flex; align-items: center; justify-content: flex-end;
  font: 700 22px/1 "Consolas", "Roboto Mono", monospace;
  border-radius: 4px;
  background: var(--clock-bg); color: var(--clock-fg);
}
.clock.dark { background: var(--clock-dark-bg); color: var(--clock-dark-fg); }
.clock.active { background: #fff; color: var(--panel); }
.clock.dark.active { background: var(--panel); color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.clock.low { background: #c44a3c !important; color: #fff !important; }
.clock.none { display: none; }
.thinking { font-size: 12px; color: var(--accent); font-weight: 600; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- Plateau ---------- */
.board-area { display: flex; }
.ranks {
  width: calc(var(--sq) * 0.32);
  display: grid;
  grid-template-rows: repeat(9, var(--sq));
  align-content: start;
}
.ranks span, .files span { color: var(--muted); font-size: calc(var(--sq) * 0.2); font-weight: 600; display: grid; place-items: center; }
.board-stack { display: flex; flex-direction: column; }
.files { display: grid; grid-template-columns: repeat(9, var(--sq)); height: 18px; }

.board {
  --cell: calc(100% / 9);
  position: relative;
  width: calc(var(--sq) * 9);
  height: calc(var(--sq) * 9);
  touch-action: none;
  user-select: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); }
/* Cases claires et foncées tirées de la palette du thème. */
.sq { position: relative; background: var(--h5); }
.sq.alt { background: var(--h3); }
.sq.camp::after { content: ""; position: absolute; inset: 0; background: rgba(var(--hl), .22); pointer-events: none; }
.sq.nexus { background: color-mix(in srgb, var(--accent) 38%, var(--h4)); }
.sq.nexus::before {
  content: ""; position: absolute; inset: 22%; pointer-events: none;
  background: rgba(255,255,255,.28); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.layer { position: absolute; inset: 0; pointer-events: none; }
.mark { position: absolute; width: var(--cell); height: var(--cell); }
.mark.last { background: rgba(var(--hl), .45); }
.mark.sel { background: rgba(var(--hl), .6); }
.mark.hover { box-shadow: inset 0 0 0 calc(var(--sq) * 0.05) rgba(255,255,255,.75); }
/* Nexus occupé : liseré à la couleur du camp qui le tient. */
.mark.held { box-shadow: inset 0 0 0 calc(var(--sq) * 0.06) var(--own); }
.mark.held.p1 { --own: rgba(250,248,240,.95); }
.mark.held.p2 { --own: rgba(25,24,22,.9); }
.mark.held.danger { animation: held-pulse 1s ease-in-out infinite; }
@keyframes held-pulse { 50% { box-shadow: inset 0 0 0 calc(var(--sq) * 0.11) var(--red); } }

.hint { position: absolute; width: var(--cell); height: var(--cell); display: grid; place-items: center; }
.hint::after {
  content: ""; width: 30%; height: 30%; border-radius: 50%; background: rgba(0,0,0,.2);
}
.hint.attack::after {
  width: 86%; height: 86%; background: transparent;
  border: calc(var(--sq) * 0.075) solid rgba(0,0,0,.22);
}
.hint.special::after { background: rgba(var(--hint-special), .42); }
.hint.special.attack::after { background: transparent; border-color: rgba(var(--hint-special), .6); }
.hint.enemy::after { background: rgba(var(--hint-enemy), .42); }
.hint.enemy.attack::after { background: transparent; border-color: rgba(var(--hint-enemy), .55); }
.hint .tag {
  position: absolute; right: 3%; bottom: 3%; width: 34%; height: 34%; border-radius: 50%;
  display: grid; place-items: center; background: rgba(20,20,20,.78); color: #fff; z-index: 2;
}
.hint .tag svg { width: 70%; height: 70%; }
.hint.place::after { width: 26%; height: 26%; background: rgba(var(--hint-special), .5); }

.piece {
  position: absolute; width: var(--cell); height: var(--cell);
  transition: transform .18s ease, opacity .25s ease;
  will-change: transform;
}
.piece svg { width: 100%; height: 100%; display: block; }
.piece.mine { cursor: grab; pointer-events: auto; }
.piece.other { pointer-events: auto; cursor: pointer; }
.piece.dragging { transition: none; z-index: 10; cursor: grabbing; }
.piece.gone { opacity: 0; }
.piece .badge {
  position: absolute; right: 2%; top: 2%; width: 30%; height: 30%; border-radius: 50%; display: grid; place-items: center;
  background: var(--bc); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none;
}
.piece .badge svg { width: 70%; height: 70%; }
.piece .badge.shielded { --bc: #3f7fc4; }
.piece .badge.frozen { --bc: #5fb3c9; right: auto; left: 2%; }
.board.locked .piece { cursor: default; }

/* Pages légales (confidentialité, conditions). */
.home-legal { margin: 4px 0 0; text-align: center; font-size: 12px; }
.home-legal a, .legal a { color: var(--muted); }
.legal { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; line-height: 1.6; color: var(--text-soft); }
.legal h1 { color: var(--text); margin: 28px 0 4px; }
.legal h2 { color: var(--accent); font-size: 17px; margin: 22px 0 6px; }
.legal a { color: var(--accent); }
.legal-langs, .legal-foot { font-weight: 700; }
.legal-foot { margin-top: 36px; }
.legal section + section { border-top: 1px solid var(--row-alt); margin-top: 40px; }

/* Mitan du jour. */
.daily-date { font-weight: 800; color: var(--accent); }
.daily-card { background: var(--panel); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.daily-market { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.daily-market div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; text-align: center; }
.daily-market svg { width: 46px; height: 46px; }
.daily-card .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.daily-card .mine { font-weight: 800; font-size: 16px; }
.daily-card .mine.win { color: var(--accent); }
.daily-card .mine.loss { color: var(--red); }
.daily-btn .ico { color: var(--accent); }
.lb-row.daily { grid-template-columns: 48px 1fr 160px; }
.lb-row.me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (max-width: 560px) { .daily-market { grid-template-columns: repeat(3, 1fr); } .lb-row.daily { grid-template-columns: 36px 1fr 110px; } }

/* Annotations au clic droit : flèches au-dessus des pièces, cases surlignées en dessous. */
.arrows { z-index: 7; overflow: visible; }
.arrows polygon { fill: rgba(255, 170, 0, .8); }
.mark.annot { background: rgba(235, 97, 80, .78); }

/* Choix entre deux coups sur la même case (Mage : capturer ou échanger). */
.chooser {
  position: absolute; z-index: 20; display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--panel); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.55); transform: translate(-50%, 6px);
}
.chooser button { padding: 7px 12px; border-radius: 5px; background: var(--raised); font-weight: 700; white-space: nowrap; }
.chooser button:hover { background: var(--raised-hover); }
.chooser button.main { background: var(--accent); color: var(--on-accent); }

/* Marché (phase de draft) affiché par-dessus le plateau. */
.overlay {
  position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--sq) * .18);
  padding: calc(var(--sq) * .35); background: rgba(16,15,14,.72); backdrop-filter: blur(2px);
}
.overlay h3 { margin: 0; text-align: center; font-size: max(16px, calc(var(--sq) * .34)); }
.overlay p { margin: 0; text-align: center; color: var(--text-soft); font-size: max(11px, calc(var(--sq) * .2)); }
.market { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--sq) * .14); }
.mcard {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: calc(var(--sq) * .14) calc(var(--sq) * .1);
  border-radius: 8px; background: var(--panel); text-align: center; border: 2px solid transparent;
  box-shadow: 0 3px 0 var(--raised-shadow); transition: transform .12s ease, background .12s ease;
}
.mcard svg { width: calc(var(--sq) * .9); height: calc(var(--sq) * .9); }
.mcard b { font-size: max(12px, calc(var(--sq) * .24)); }
.mcard small { color: var(--muted); font-size: max(10px, calc(var(--sq) * .17)); line-height: 1.25; min-height: 2.5em; }
@media (max-width: 520px) { .overlay { padding: 8px; gap: 6px; } .market { gap: 6px; } .mcard { padding: 6px 4px; } .overlay p { display: none; } }
.mcard .copies { display: flex; gap: 4px; margin-top: 2px; }
.mcard .copies i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mcard .copies i.used { background: var(--chip); }
.mcard.pickable { cursor: pointer; }
.mcard.pickable:hover { background: var(--raised); border-color: var(--accent); transform: translateY(-2px); }
.mcard.empty { opacity: .35; }
.draft-order { display: flex; justify-content: center; gap: 4px; }
.draft-order span {
  width: calc(var(--sq) * .3); height: calc(var(--sq) * .3); border-radius: 4px; display: grid; place-items: center;
  font-size: calc(var(--sq) * .15); font-weight: 800; border: 1px solid rgba(0,0,0,.5);
}
.draft-order .p1 { background: #ece9e1; color: #333; }
.draft-order .p2 { background: #3b3835; color: #ddd; }
.draft-order .done { opacity: .3; }
.draft-order .now { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Réserve de pièces à placer. */
.tray { background: var(--surface); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.tray b { font-size: 13px; }
.tray small { color: var(--muted); font-size: 12px; }
.tray-pieces { display: flex; flex-wrap: wrap; gap: 6px; }
.tray-pieces button {
  position: relative; width: 48px; height: 48px; padding: 3px; border-radius: 6px; background: var(--raised); border: 2px solid transparent;
}
.tray-pieces button svg { width: 100%; height: 100%; }
.tray-pieces button.on { border-color: var(--accent); background: var(--raised-hover); }
.tray-pieces button:disabled { opacity: .45; cursor: default; }
.tray-actions { display: flex; gap: 6px; }
.tray-actions button { flex: 1; padding: 8px; }
.tray-pieces button .n {
  position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 800; display: grid; place-items: center;
}

/* ---------- Panneau ---------- */
.panel {
  width: 380px;
  background: var(--panel);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tabs { display: flex; background: var(--panel-2); }
.tab {
  flex: 1; padding: 12px 8px; background: transparent; color: var(--muted); font-weight: 700;
  border-bottom: 3px solid transparent;
}
.tab.active { color: var(--text); border-bottom-color: var(--text); background: var(--panel); }
.tab-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }

.status {
  padding: 10px 12px; border-radius: 4px; background: var(--surface);
  font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.status .dot { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #000; }
.status .dot.w { background: #f3f3f3; }
.status .dot.b { background: #333; border-color: #888; }
.status { flex-wrap: wrap; }
.status .setup-left { margin-left: auto; font: 700 13px "Consolas", "Roboto Mono", monospace; color: var(--text-soft); background: var(--raised); padding: 2px 7px; border-radius: 4px; }
.status .setup-left.low { background: var(--red); color: #fff; }
.status .threat { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--red); }
.status .threat.mine { color: var(--accent); }
.card .flags { display: flex; flex-wrap: wrap; gap: 6px; }
.card .flags span { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: var(--raised); color: var(--text-soft); }
.setup-log { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--row-alt); }
.setup-log .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.setup-log .row > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); width: 54px; }
.setup-log .picks { display: flex; gap: 2px; }
.setup-log .picks svg { width: 20px; height: 20px; }
.setup-log .done { font-size: 12px; color: var(--muted); }
.setup-log .mv-pick { cursor: pointer; display: inline-flex; }

.card {
  background: var(--surface); border-radius: 4px; padding: 10px 12px; min-height: 92px;
  display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; align-items: start;
}
.card .empty { grid-column: 1 / -1; color: var(--muted); align-self: center; text-align: center; font-size: 13px; }
.card svg { width: 52px; height: 52px; grid-row: span 3; }
.card .ctitle { font-weight: 800; }
.card .stats { display: flex; gap: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.card .stats b { color: var(--text); }
.card .spec { font-size: 12px; color: var(--muted); }

.moves {
  height: 260px; overflow-y: auto; background: var(--surface); border-radius: 4px;
  font-size: 13px; counter-reset: none;
}
.mrow { display: grid; grid-template-columns: 44px 1fr 1fr; }
.mrow:nth-child(even) { background: var(--row-alt); }
.mnum { color: var(--muted); padding: 5px 0 5px 10px; }
.mv { padding: 5px 8px; font-weight: 600; cursor: pointer; border-radius: 3px; margin: 1px; font-family: "Consolas", "Roboto Mono", monospace; }
.mv:hover { background: var(--raised); }
.mv.cur { background: var(--chip); color: #fff; }
.mv.pass { color: var(--muted); font-style: italic; }
.moves .result { padding: 8px 10px; text-align: center; font-weight: 800; color: var(--muted); }

.nav-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ico { width: 16px; height: 16px; flex-shrink: 0; }
.icon, .secondary, .seg button, .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#btn-sound .ico { width: 20px; height: 20px; }
.icon { background: var(--raised); padding: 8px; border-radius: 4px; color: var(--muted); }
.icon:hover { background: var(--raised-hover); color: var(--text); }
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.secondary {
  background: var(--raised); padding: 9px 8px; border-radius: 4px; font-weight: 700; color: var(--text-soft);
  box-shadow: 0 3px 0 var(--raised-shadow);
}
.secondary:hover { background: var(--raised-hover); }
.secondary:disabled { opacity: .4; cursor: default; }
.secondary.danger.confirm { background: var(--red); color: #fff; box-shadow: 0 3px 0 #7d2a20; }

.primary {
  background: var(--accent); color: var(--on-accent); font-weight: 800; padding: 10px 18px; border-radius: 6px;
  box-shadow: 0 4px 0 var(--accent-dark);
}
.primary:hover { background: var(--accent-hover); }
.primary.big { font-size: 20px; padding: 14px; margin-top: 6px; }

.field-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.seg { display: flex; background: var(--surface); border-radius: 6px; padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 8px 4px; background: transparent; border-radius: 4px; color: var(--muted); font-weight: 700; }
.seg button.on { background: var(--chip); color: #fff; }
.check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- Fenêtres ---------- */
.modal {
  border: 0; border-radius: 10px; padding: 22px 24px; background: var(--panel); color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,.6); max-width: min(92vw, 420px);
}
.modal::backdrop { background: rgba(0,0,0,.55); }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.over-head { font-size: 28px; font-weight: 900; text-align: center; }
.over-head small { display: block; font-size: 14px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.over-score { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 14px; font-size: 34px; font-weight: 900; }
.over-score .side { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 700; }
.over-score .side b { font-size: 34px; color: var(--text); }
.over-reason { text-align: center; color: var(--muted); margin: 12px 0 0; }
.rules { max-width: min(92vw, 700px); line-height: 1.5; }
.rules h2 { margin: 0 0 8px; }
.rules h3 { margin: 16px 0 4px; font-size: 15px; color: var(--accent); }
.rules p, .rules ul, .rules .rules-text { margin: 4px 0; color: var(--text-soft); }
.rules-pieces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.rules-pieces > div { background: var(--surface); border-radius: 6px; padding: 8px 10px; font-size: 12px; color: var(--muted); display: grid; grid-template-columns: 40px 1fr; gap: 0 10px; align-items: center; }
.rules-pieces svg { width: 40px; height: 40px; grid-row: span 2; }
.rules-pieces b { color: var(--text); font-size: 14px; }
@media (max-width: 560px) { .rules-pieces { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .layout { flex-direction: column; align-items: center; padding: 10px 8px; gap: 14px; }
  .panel { width: 100%; max-width: 560px; }
  .moves { height: 180px; }
}

/* ---------- Menu des langues ---------- */
.menu-pop.narrow { width: 190px; }
.menu-opt .code {
  width: 34px; height: 26px; border-radius: 5px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .5px;
}
.menu-opt.on .code { background: var(--accent); color: var(--on-accent); }

/* ---------- Pages (accueil, leçons) ---------- */
.page { padding: 24px 16px 40px; }
a.brand { color: inherit; text-decoration: none; }
.home {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: center;
}
.home-board {
  position: relative; aspect-ratio: 1; cursor: pointer;
  border-radius: 8px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.home-board.shake { animation: shake .3s ease-out; }
.demo-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); }
.demo-squares div { position: relative; background: var(--h5); }
.demo-squares div.alt { background: var(--h3); }
.demo-squares div.nexus { background: color-mix(in srgb, var(--accent) 38%, var(--h4)); }
.demo-squares div.nexus::before { content: ""; position: absolute; inset: 22%; background: rgba(255,255,255,.28); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.demo-pieces { position: absolute; inset: 0; pointer-events: none; --cell: calc(100% / 9); }
.demo-pieces .piece { transition: transform .38s cubic-bezier(.3,.7,.3,1), opacity .3s ease; }
.demo-label {
  position: absolute; left: 10px; bottom: 10px; z-index: 9; display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(20,20,20,.6); backdrop-filter: blur(4px);
}
.demo-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.demo-cta {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center;
  background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s ease;
}
.home-board:hover .demo-cta { opacity: 1; }
.demo-cta span {
  display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 8px; font-weight: 800; font-size: 16px;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-dark);
  transform: translateY(6px); transition: transform .2s ease;
}
.home-board:hover .demo-cta span { transform: none; }
.home-side { display: flex; flex-direction: column; gap: 10px; }
.home-title { display: flex; align-items: center; gap: 10px; font-size: 40px; font-weight: 900; margin: 0; letter-spacing: .3px; }
.home-title .brand-mark { width: 32px; height: 32px; }
.home-tag { color: var(--muted); font-size: 15px; margin: 0 0 10px; line-height: 1.5; }
.home-btn {
  display: flex; align-items: center; gap: 16px; text-align: left; text-decoration: none; color: var(--text);
  background: var(--raised); padding: 16px 18px; border-radius: 10px;
  box-shadow: 0 4px 0 var(--raised-shadow); transition: transform .12s ease, background .12s ease;
}
.home-btn:hover { background: var(--raised-hover); transform: translateY(-2px); }
.home-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--raised-shadow); }
.home-btn .ico { width: 30px; height: 30px; flex-shrink: 0; }
.home-btn b { display: block; font-size: 18px; }
.home-btn small { color: var(--muted); font-size: 13px; }
.home-btn.accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-dark); }
.home-btn.accent:hover { background: var(--accent-hover); }
.home-btn.accent small { color: inherit; opacity: .8; }

.learn { max-width: 900px; margin: 0 auto; }
.learn-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.learn-head h1 { margin: 0 0 4px; font-size: 32px; }
.learn-head p { margin: 0; color: var(--muted); }
.learn-head .primary.big { margin: 0; min-width: 200px; }
.learn-progress { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; color: var(--muted); font-weight: 700; font-size: 13px; }
.learn-progress .bar { flex: 1; height: 10px; background: var(--surface); border-radius: 5px; overflow: hidden; }
.learn-progress .bar div { height: 100%; background: var(--accent); border-radius: 5px; transition: width .4s ease; }
.learn-done {
  display: flex; align-items: center; gap: 14px; margin: 16px 0; padding: 14px 16px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.learn-done > .ico { width: 30px; height: 30px; color: var(--accent); }
.learn-done div { flex: 1; display: flex; flex-direction: column; }
.learn-done span { color: var(--text-soft); font-size: 13px; }
.learn-section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 26px 0 10px; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.lesson-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--text);
  background: var(--panel); box-shadow: 0 3px 0 var(--raised-shadow); transition: transform .12s ease, background .12s ease;
}
.lesson-tile:hover { background: var(--raised); transform: translateY(-2px); }
.lesson-tile .num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface); color: var(--muted); font-weight: 800; font-size: 13px;
}
.lesson-tile.done .num { background: var(--accent); color: var(--on-accent); }
.lesson-tile.done .num .ico { width: 16px; height: 16px; }
.lesson-tile b { font-size: 14px; }

/* ---------- Panneau de leçon ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 13px; }
.back-link:hover { color: var(--text); }
.lesson-head { display: flex; align-items: center; gap: 12px; }
.lesson-num {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 900; font-size: 18px;
}
.lesson-head small { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.lesson-head h2 { margin: 0; font-size: 22px; }
.lesson-steps { display: flex; gap: 4px; }
.lesson-steps a { flex: 1; height: 6px; border-radius: 3px; background: var(--surface); }
.lesson-steps a.done { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.lesson-steps a.cur { background: var(--accent); }
.lesson-body { margin: 0; line-height: 1.55; color: var(--text-soft); font-size: 15px; }
.lesson-feedback {
  border-radius: 8px; padding: 12px 14px; line-height: 1.5; font-size: 14px;
  animation: pop-in .35s cubic-bezier(.2,1.4,.4,1);
}
.lesson-feedback b { display: block; font-size: 17px; margin-bottom: 2px; }
.lesson-feedback.ok { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); box-shadow: inset 4px 0 0 var(--accent); }
.lesson-feedback.fail { background: color-mix(in srgb, var(--red) 20%, var(--panel)); box-shadow: inset 4px 0 0 var(--red); }
.lesson-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lesson-actions .primary { padding: 10px 8px; }
@keyframes pop-in { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.mark.focus { box-shadow: inset 0 0 0 calc(var(--sq) * 0.06) rgba(var(--hl), .9); animation: focus-pulse 1.4s ease-in-out infinite; }
@keyframes focus-pulse { 50% { box-shadow: inset 0 0 0 calc(var(--sq) * 0.03) rgba(var(--hl), .35); } }

/* ---------- Effets : prise, pose, capture ---------- */
.piece svg { transition: transform .14s ease, filter .14s ease; transform-origin: 50% 85%; }
.piece.mine:hover svg { transform: scale(1.06); }
.piece.lifted svg {
  transform: translateY(-9%) scale(1.13);
  filter: drop-shadow(0 calc(var(--sq) * 0.1) calc(var(--sq) * 0.06) rgba(0,0,0,.45));
}
.piece.dragging svg { transform: translateY(-12%) scale(1.2) rotate(-5deg); }
.piece.mover { z-index: 6; }
.piece.land svg { animation: land .34s ease-out; }
.piece.slam svg { animation: slam .42s ease-out; }
.piece.hit { z-index: 5; }
.piece.hit svg { animation: hit .42s ease-in forwards; }
@keyframes land {
  0% { transform: translateY(-9%) scale(1.13); }
  40% { transform: scale(1.14, .84); }
  70% { transform: scale(.96, 1.05); }
  100% { transform: none; }
}
@keyframes slam {
  0% { transform: translateY(-14%) scale(1.25); }
  35% { transform: scale(1.22, .78); }
  65% { transform: scale(.94, 1.08); }
  100% { transform: none; }
}
@keyframes hit {
  0% { transform: none; filter: brightness(1); opacity: 1; }
  25% { transform: scale(1.18) rotate(-10deg); filter: brightness(2.4); opacity: 1; }
  100% { transform: scale(.15) rotate(30deg); filter: brightness(1); opacity: 0; }
}
.fx { z-index: 8; overflow: visible; }
.fx-p {
  position: absolute; width: calc(var(--sq) * var(--s)); height: calc(var(--sq) * var(--s));
  background: var(--c); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  animation: fx-fly .6s cubic-bezier(.15,.75,.35,1) both;
}
@keyframes fx-fly {
  from { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.3); opacity: 0; }
}
.fx-ring {
  position: absolute; width: calc(var(--sq) * .9); height: calc(var(--sq) * .9); border-radius: 50%;
  border: calc(var(--sq) * .05) solid var(--c);
  animation: fx-ring .42s ease-out forwards;
}
.fx-ring.big { width: calc(var(--sq) * 1.2); height: calc(var(--sq) * 1.2); border-width: calc(var(--sq) * .07); }
@keyframes fx-ring {
  from { transform: translate(-50%, -50%) scale(.35); opacity: .9; }
  to { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}
.fx-text {
  position: absolute; font-weight: 900; font-size: calc(var(--sq) * .5); color: var(--c); white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 12px rgba(0,0,0,.35);
  animation: fx-rise 1s ease-out forwards;
}
@keyframes fx-rise {
  0% { transform: translate(-50%, -30%) scale(.5); opacity: 0; }
  20% { transform: translate(-50%, -80%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -190%) scale(1); opacity: 0; }
}
.fx-beam {
  position: absolute; height: calc(var(--sq) * .09); margin-top: calc(var(--sq) * -.045); transform-origin: 0 50%;
  border-radius: 99px; background: linear-gradient(90deg, transparent, var(--c) 70%, #fff);
  box-shadow: 0 0 calc(var(--sq) * .12) var(--c); animation: fx-beam .42s ease-out forwards;
}
.fx-beam.dash { background: repeating-linear-gradient(90deg, var(--c) 0 calc(var(--sq) * .14), transparent calc(var(--sq) * .14) calc(var(--sq) * .24)); box-shadow: none; }
@keyframes fx-beam {
  0% { scale: 0 1; opacity: 1; }
  45% { scale: 1 1; opacity: 1; }
  100% { scale: 1 .4; opacity: 0; }
}
/* Pièce paralysée par un Gardien : givrée. Pièce protégée par un Bouclier : liseré bleu. */
.piece.frozen svg { filter: saturate(.35) brightness(1.08) drop-shadow(0 0 calc(var(--sq) * .07) rgba(160, 225, 255, .95)); }
.piece.frozen::after {
  content: ""; position: absolute; inset: 9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 35%), linear-gradient(135deg, rgba(190,235,255,.35), rgba(120,190,230,.15));
  box-shadow: inset 0 0 calc(var(--sq) * .08) rgba(220, 245, 255, .9);
}
.piece.shielded::before {
  content: ""; position: absolute; inset: 3%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 calc(var(--sq) * .03) rgba(90, 160, 235, .75), 0 0 calc(var(--sq) * .1) rgba(90, 160, 235, .5);
}
.board.shake { animation: shake .3s ease-out; }
@keyframes shake {
  20% { transform: translate(calc(var(--sq) * -.06), calc(var(--sq) * .03)); }
  40% { transform: translate(calc(var(--sq) * .06), calc(var(--sq) * -.03)); }
  60% { transform: translate(calc(var(--sq) * -.04), calc(var(--sq) * .02)); }
  80% { transform: translate(calc(var(--sq) * .02), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .piece.land svg, .piece.slam svg, .board.shake, .mark.focus, .lesson-feedback, .mark.held.danger { animation: none; }
}

@media (max-width: 899px) {
  .home { grid-template-columns: 1fr; gap: 24px; }
  .home-board { max-width: 420px; width: 100%; margin: 0 auto; order: 2; }
  .home-title { font-size: 32px; }
  .learn-head .primary.big { width: 100%; }
}

/* ---------- En ligne ---------- */
.invite {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel)); box-shadow: inset 4px 0 0 var(--accent);
}
.invite span { color: var(--text-soft); font-size: 13px; }
.invite-row { display: flex; gap: 6px; }
.invite-row input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 0; border-radius: 6px;
  background: var(--surface); color: var(--text); font: 13px "Consolas", "Roboto Mono", monospace;
}
.invite-row .primary { padding: 8px 14px; }
.offline { color: var(--red); font-weight: 700; }
.form-error { margin: 0; color: var(--red); font-size: 13px; font-weight: 600; }
.primary:disabled { opacity: .6; cursor: default; }

/* ---------- Comptes ---------- */
.pp { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; display: block; }
.pp.letter { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; }
.pp.sm { width: 26px; height: 26px; border-radius: 50%; font-size: 13px; }
.pp.xl { width: 120px; height: 120px; border-radius: 12px; font-size: 52px; flex-shrink: 0; }
.avatar { overflow: hidden; }
.flag { height: .85em; width: auto; aspect-ratio: 4 / 3; border-radius: 2px; vertical-align: -.05em; margin-left: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.pname-link { color: inherit; text-decoration: none; }
.pname-link:hover { text-decoration: underline; }
.login-btn { padding: 7px 14px; font-size: 14px; box-shadow: 0 3px 0 var(--accent-dark); }
.user-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--raised); font-weight: 700; color: var(--text);
}
.user-chip:hover { background: var(--raised-hover); }
.menu-opt .ico { width: 18px; height: 18px; color: var(--muted); }
a.menu-opt { color: var(--text); text-decoration: none; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }

.login { max-width: min(92vw, 380px); }
.login h2 { margin: 0 0 6px; }
.login-providers { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.provider {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 8px;
  font-weight: 800; text-decoration: none; font-size: 15px;
}
.provider svg { width: 22px; height: 22px; }
.provider.discord { background: #5865f2; color: #fff; box-shadow: 0 3px 0 #3c45a5; }
.provider.google { background: #fff; color: #1f1f1f; box-shadow: 0 3px 0 #b9b9b9; }
.dev-login { display: flex; gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line); }
.dev-login .field { flex: 1; }

.field {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px;
}
.field:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field:disabled { opacity: .6; }
textarea.field { resize: vertical; min-height: 80px; }
.hint-text { color: var(--muted); font-size: 12px; margin-top: -4px; }
.hint-text.good { color: var(--accent); }
.hint-text.bad { color: var(--red); }
.settings, .profile { max-width: 640px; margin: 0 auto; }
.settings h1 { margin: 0 0 4px; }
.settings-card { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding: 20px; border-radius: 10px; background: var(--panel); }
.avatar-edit { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.file-btn { cursor: pointer; display: inline-block; }
.link-btn { background: none; color: var(--muted); font-weight: 600; padding: 0; }
.link-btn:hover { color: var(--red); }
.country-row { display: flex; align-items: center; gap: 10px; }
.country-row .flag { height: 26px; margin: 0; }
.country-row .field { flex: 1; }
.profile-card { display: flex; align-items: flex-start; gap: 22px; padding: 22px; border-radius: 10px; background: var(--panel); }
.profile-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.profile-main h1 { margin: 0; font-size: 30px; word-break: break-word; }
.profile-bio { margin: 10px 0 0; line-height: 1.5; color: var(--text-soft); white-space: pre-wrap; word-break: break-word; }
.edit-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
  .profile-card { flex-direction: column; align-items: center; text-align: center; }
  .user-chip span { display: none; }
}

/* ---------- Classé, recherche, classement ---------- */
a.ghost { text-decoration: none; }
.elo { color: var(--muted); font-weight: 600; margin-left: 5px; }
.seek { align-items: flex-start; }
.seek b { display: flex; align-items: center; gap: 8px; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.over-rating { text-align: center; margin: 8px 0 0; font-weight: 700; }
.up { color: var(--accent); }
.down { color: var(--red); }

.leaderboard { max-width: 760px; margin: 0 auto; }
.lb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.lb-head h1 { margin: 0 0 4px; }
.lb-head p { margin: 0; }
.lb-head .seg { min-width: 220px; }
.lb-table { background: var(--panel); border-radius: 10px; overflow: hidden; }
.lb-row {
  display: grid; grid-template-columns: 48px 1fr 80px 70px; align-items: center; gap: 8px;
  padding: 10px 16px; color: var(--text); text-decoration: none; border-top: 1px solid var(--line);
}
a.lb-row:hover { background: var(--raised); }
.lb-header { border-top: 0; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.lb-rank { font-weight: 800; color: var(--muted); }
.lb-row.top .lb-rank { color: var(--accent); }
.lb-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-player b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-player .flag { margin-left: 0; }
.lb-rating { font-weight: 800; font-family: "Consolas", "Roboto Mono", monospace; }
.lb-empty { padding: 30px 16px; margin: 0; }

.rating-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.rating-card {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 10px;
  background: var(--panel); color: var(--text); text-decoration: none;
}
.rating-card:hover { background: var(--raised); }
.rating-card b { font-size: 28px; font-family: "Consolas", "Roboto Mono", monospace; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 24px 0 10px; }
.recent { display: flex; flex-direction: column; gap: 6px; }
.recent-row {
  display: grid; grid-template-columns: 80px 1fr 110px 120px 44px 80px 90px; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px; background: var(--panel); box-shadow: inset 4px 0 0 var(--line);
}
.recent-row.win { box-shadow: inset 4px 0 0 var(--accent); }
.recent-row.loss { box-shadow: inset 4px 0 0 var(--red); }
.recent-row .res { font-weight: 800; }
.recent-row .opp a { color: var(--text); font-weight: 700; text-decoration: none; }
.recent-row .opp a:hover { text-decoration: underline; }
.recent-row .diff { font-weight: 800; text-align: right; }
.recent-row .replay-btn { padding: 6px 8px; font-size: 12px; text-decoration: none; }
.recent-row .replay-btn .ico { width: 12px; height: 12px; }
@media (max-width: 640px) {
  .recent-row { grid-template-columns: 70px 1fr 40px 80px; }
  .recent-row > :nth-child(3), .recent-row > :nth-child(4), .recent-row > :nth-child(6) { display: none; }
  .lb-row { grid-template-columns: 36px 1fr 64px; }
  .lb-row > :nth-child(4) { display: none; }
}

/* ---------- Nulle, revanche, parties en direct ---------- */
.online-box .invite-row:empty { display: none; }
.online-box .primary, .online-box .secondary { padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; }
.watchers { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); font-weight: 700; font-size: 13px; }
.watchers .ico { width: 15px; height: 15px; }
.watch-list { display: flex; flex-direction: column; gap: 8px; }
.watch-row {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 10px;
  background: var(--panel); color: var(--text); text-decoration: none;
}
.watch-row:hover { background: var(--raised); }
.watch-players { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.watch-players > :last-child { justify-content: flex-end; }
.watch-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.watch-meta .watchers { margin-left: auto; }

/* ---------- Chat ---------- */
.tab-body.with-chat .moves { height: 140px; }
.chat { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: 6px; padding: 8px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 0 2px; }
.chat-head .link-btn { font-size: 12px; }
.chat-log { height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 2px; }
.chat-msg { display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 1.35; padding: 2px 4px; border-radius: 4px; }
.chat-msg:hover { background: var(--row-alt); }
.chat-user { color: var(--accent); font-weight: 800; text-decoration: none; flex-shrink: 0; }
.chat-msg.mine .chat-user { color: var(--muted); }
.chat-text { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text-soft); }
.chat-report { background: none; color: var(--muted); padding: 0 2px; opacity: 0; }
.chat-msg:hover .chat-report, .chat-report.done { opacity: 1; }
.chat-report.done { color: var(--red); cursor: default; }
.chat-report .ico { width: 13px; height: 13px; }
.chat-form { display: flex; gap: 6px; }
.chat-form .field { padding: 7px 10px; font-size: 13px; }
.chat-form .primary { padding: 7px 12px; }
.chat-note { margin: 0; text-align: center; }

/* ---------- Amis ---------- */
.add-friend { display: flex; gap: 6px; }
.add-friend .field { width: 200px; }
.friend-list { display: flex; flex-direction: column; gap: 6px; }
.friend-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--panel); flex-wrap: wrap; }
.friend-row .lb-player { color: var(--text); text-decoration: none; }
.friend-row .lb-player:hover b { text-decoration: underline; }
.friend-actions { display: flex; gap: 6px; margin-left: auto; }
.friend-actions .secondary, .friend-actions .primary { padding: 7px 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.presence { font-size: 12px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.presence::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.presence.online { color: var(--accent); }
.presence.online::before { background: var(--accent); }
.presence.playing { color: #f0c45a; }
.presence.playing::before { background: #f0c45a; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.profile-actions:empty { display: none; }
.profile-actions .primary, .profile-actions .secondary { padding: 9px 14px; }
.count-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.user-chip { position: relative; }
.user-chip.has-badge::after { content: ""; position: absolute; top: 2px; left: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--bg-deep); }

/* ---------- Notifications ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.toast {
  background: var(--panel); border: 1px solid var(--border-deep); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 10px;
  animation: pop-in .3s cubic-bezier(.2,1.4,.4,1); transition: opacity .25s, transform .25s;
}
.toast.out { opacity: 0; transform: translateY(8px); }
.toast-body { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.toast-actions { display: flex; gap: 6px; justify-content: flex-end; }
.toast-actions .primary, .toast-actions .secondary { padding: 7px 14px; }

/* ---------- Modération ---------- */
.pp.letter.banned { background: #4a4a4a !important; color: #bbb; }
.mod-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 10px; background: var(--panel); margin-bottom: 12px; }
.mod-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mod-card-head a.secondary { text-decoration: none; padding: 7px 12px; font-size: 13px; }
.mod-user { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.mod-user .count-badge { margin-left: 4px; }
.mod-report { padding: 10px 12px; border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.mod-report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mod-report-head a { color: var(--accent); }
.mod-context { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-soft); }
.mod-context div { padding: 3px 8px; border-radius: 4px; overflow-wrap: anywhere; }
.mod-context .reported { background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--text); }
.mod-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-actions button { padding: 7px 12px; font-size: 13px; }
.mod-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mod-status { line-height: 1.8; }
.mod-linked { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-line { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.mod-log { background: var(--panel); border-radius: 10px; padding: 6px 16px; }
.mod-log .mod-line:first-child { border-top: 0; }
.tag-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--chip); color: var(--text); text-decoration: none; }
.tag-pill.alt { background: color-mix(in srgb, #f0c45a 30%, var(--panel)); }
.tag-pill.danger { background: color-mix(in srgb, var(--red) 45%, var(--panel)); }
.report-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; align-self: flex-start; }
.report-btn .ico { width: 14px; height: 14px; }
.report-reasons { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.report-reasons label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.report-reasons input { accent-color: var(--accent); }
.notice { max-width: min(92vw, 440px); }
.notice h2 { margin: 0 0 8px; }
.notice-reason { padding: 10px 12px; border-radius: 8px; background: var(--surface); font-style: italic; }
select.field { appearance: auto; }
#dlg-modaction .field { margin-bottom: 4px; }
.recent-row .opp { display: flex; align-items: center; gap: 6px; min-width: 0; }