:root {
  --bg: #f5f1e7;
  --paper: #fffdf8;
  --ink: #211f1a;
  --muted: #6d685f;
  --primary: #326149;
  --primary-2: #203d31;
  --accent: #c8872d;
  --line: #ded7c8;
  --danger: #9d3d31;
  --shadow: 0 12px 30px rgba(33, 31, 26, 0.10);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button { cursor: pointer; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 64px);
  background: rgba(255, 253, 248, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--primary);
  color: white;
  font-size: 27px;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.08rem; }
.brand small { color: var(--muted); font-size: 0.78rem; }
.main-nav { display: flex; gap: 8px; }
.main-nav a { padding: 10px 14px; border-radius: 999px; }
.main-nav a:hover { background: #ece7dc; }
.menu-button { display: none; border: 0; background: transparent; font-size: 1.5rem; }

main { min-height: calc(100vh - 160px); }
.page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 64px; }
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  align-items: center;
  gap: 28px;
  padding: clamp(30px, 6vw, 72px);
  border-radius: 30px;
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  color: white;
  box-shadow: var(--shadow);
}
.hero::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  right: -80px;
  bottom: -160px;
  background: rgba(255,255,255,0.08);
}
.eyebrow { color: #f2bd70; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.hero h1 { margin: 6px 0 14px; font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: .98; }
.hero p { max-width: 720px; color: #eef4ef; font-size: 1.06rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--primary);
  color: white;
  font-weight: 750;
}
.btn:hover { filter: brightness(1.08); }
.btn.light { background: white; color: var(--primary-2); }
.btn.outline { background: transparent; border-color: currentColor; color: var(--primary); }
.btn.danger { background: var(--danger); }
.btn.small { min-height: 36px; padding: 7px 11px; font-size: .9rem; }
.hero-visual { min-height: 260px; display: grid; place-items: center; position: relative; z-index: 2; }
.hero-game-stack { position: relative; width: 280px; height: 240px; }
.game-token {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 24px;
  box-shadow: 0 18px 30px rgba(0,0,0,.22);
  border: 3px solid rgba(255,255,255,.75);
  font-size: 60px;
}
.game-token.t1 { width: 150px; height: 150px; left: 0; top: 16px; background: #f7e7c3; color: #1d1d1b; transform: rotate(-9deg); }
.game-token.t2 { width: 130px; height: 130px; right: 6px; top: 78px; background: #c8872d; color: white; transform: rotate(12deg); }
.game-token.t3 { width: 92px; height: 92px; right: 52px; top: 0; background: #8cb58f; color: white; }

.section { margin-top: 46px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section h2 { margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.section-lead { color: var(--muted); max-width: 780px; }

.grid { display: grid; gap: 18px; }
.grid.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 8px 18px rgba(33, 31, 26, .05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.game-card .visual { height: 180px; display: grid; place-items: center; background: #eee8da; overflow: hidden; }
.game-card .visual svg { width: 100%; height: 100%; }
.game-card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.game-card h3 { margin: 0; font-size: 1.25rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 4px 9px; border-radius: 999px; background: #ece7dc; color: #5e5a52; font-size: .78rem; font-weight: 750; }
.game-card p { margin: 0; color: var(--muted); }
.game-card .card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }

.filters {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.search-input, .filters select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
  padding: 10px 12px;
  color: var(--ink);
}

.breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; color: var(--muted); font-size: .92rem; }
.game-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.game-hero-visual { min-height: 320px; overflow: hidden; border-radius: 18px; background: #eee8da; }
.game-hero-visual svg { width: 100%; height: 100%; display: block; }
.game-hero h1 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3.8rem); }
.game-hero p { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.stat { padding: 12px; border-radius: 12px; background: #f1ece2; }
.stat strong, .stat span { display: block; }
.stat span { color: var(--muted); font-size: .82rem; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; margin-top: 24px; align-items: start; }
.panel { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.panel h2, .panel h3 { margin-top: 0; }
.rule-list { counter-reset: steps; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.rule-list li { position: relative; padding-left: 46px; }
.rule-list li::before {
  counter-increment: steps;
  content: counter(steps);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-weight: 800;
}
.rule-illustration { margin: 18px 0; padding: 14px; border-radius: 16px; background: #f3eee3; border: 1px solid var(--line); }
.rule-illustration svg { width: 100%; max-height: 320px; display: block; }
.note { padding: 14px; border-left: 4px solid var(--accent); background: #fff4df; border-radius: 8px; color: #5a4933; }
.sidebar-links { display: grid; gap: 10px; }
.sidebar-links a { padding: 10px 12px; border-radius: 10px; background: #f1ece2; }

.play-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.game-shell { border-radius: 22px; background: var(--paper); border: 1px solid var(--line); padding: clamp(14px, 3vw, 24px); box-shadow: var(--shadow); }
.awale-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.awale-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, minmax(88px, auto));
  gap: 12px;
  padding: 18px;
  border-radius: 50px;
  background: linear-gradient(#b77b3f, #8d582a);
  border: 6px solid #70421f;
}
.pit {
  position: relative;
  min-height: 92px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #714522 0 34%, #553217 65%, #3b2211 100%);
  box-shadow: inset 0 9px 12px rgba(0,0,0,.35), 0 3px 0 rgba(255,255,255,.14);
  color: #fff4dd;
  font-weight: 900;
  font-size: 1.18rem;
}
.pit.playable:hover { outline: 4px solid #f4c874; }
.pit .seed-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 54px; margin: auto; }
.seed { width: 10px; height: 14px; border-radius: 60% 40% 55% 45%; background: #f0d19a; transform: rotate(25deg); box-shadow: inset 0 0 0 1px rgba(90,50,10,.25); }
.player-labels { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); }
.scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.score-box { padding: 12px; border-radius: 12px; background: #f1ece2; }
.score-box strong { display: block; font-size: 1.35rem; }
.status { margin-top: 12px; min-height: 48px; padding: 12px; border-radius: 12px; background: #eef4ef; color: var(--primary-2); font-weight: 700; }

.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { padding: 20px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.feature .ico { font-size: 2rem; }
.empty { padding: 28px; text-align: center; border-radius: 16px; background: var(--paper); border: 1px dashed var(--line); color: var(--muted); }

.site-footer { padding: 28px 18px 40px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); }
.site-footer p { margin: 4px 0; }

@media (max-width: 900px) {
  .hero, .game-hero, .content-grid, .play-wrap { grid-template-columns: 1fr; }
  .grid.cards, .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-visual { order: -1; }
}
@media (max-width: 680px) {
  .menu-button { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 68px;
    right: 16px;
    flex-direction: column;
    min-width: 200px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: flex; }
  .brand small { display: none; }
  .grid.cards, .feature-list { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .awale-board { gap: 6px; padding: 10px; border-radius: 28px; }
  .pit { min-height: 62px; font-size: .95rem; }
  .seed { width: 7px; height: 10px; }
}

/* ============================================================
   ÉCHECS — fiche pédagogique et jeu interactif
   ============================================================ */
.chess-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 22px;
}
.chess-toc a {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f1ece2;
  color: var(--primary-2);
  font-weight: 700;
  font-size: .9rem;
}
.rule-section { scroll-margin-top: 96px; }
.lesson-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lesson-grid .panel { height: 100%; }
.mini-tip {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef4ef;
  color: var(--primary-2);
  font-weight: 700;
}
.setup-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  margin-top: 16px;
  padding: 10px;
  border-radius: 10px;
  background: #d9c69e;
}
.setup-strip span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: clamp(1.35rem, 3vw, 2rem);
  background: rgba(255,255,255,.35);
}
.piece-lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.piece-lesson { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 18px; align-items: center; }
.piece-title { display: flex; align-items: flex-start; gap: 14px; }
.piece-title h3 { margin-bottom: 6px; }
.piece-title p { margin: 0; color: var(--muted); }
.piece-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--primary);
  color: white;
  font-size: 2.35rem;
}
.mini-chess-board {
  display: grid;
  /* 5 colonnes ET 5 lignes strictement identiques : les cases restent carrées. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  width: 190px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  overflow: hidden;
  border: 5px solid #5f4b36;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(40,30,20,.14);
}
.mini-square {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  font-size: 2rem;
}
.mini-square.light { background: #ead8b5; }
.mini-square.dark { background: #8a6849; }
.mini-square.move::after {
  content: "";
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: rgba(47, 111, 72, .72);
}
.mini-square.capture::after { background: rgba(185, 71, 56, .78); }
.mini-square > span { position: relative; z-index: 2; }
.capture-mark { color: #fff; font-weight: 900; }
.rule-icon { font-size: 2.2rem; margin-bottom: 8px; }
.simple-list { padding-left: 22px; display: grid; gap: 9px; }
.chess-principles { grid-template-columns: repeat(4, 1fr); }
.play-cta { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.play-cta h2 { margin-bottom: 6px; }
.play-cta p { margin-bottom: 0; color: var(--muted); }

.play-cards { display: grid; gap: 20px; }
.play-card {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 1.2fr;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.play-card .visual { overflow: hidden; min-height: 240px; border-radius: 15px; background: #eee8da; }
.play-card .visual svg { width: 100%; height: 100%; display: block; }

.chess-play-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(260px, 330px); gap: 22px; align-items: start; }
.chess-shell { overflow: hidden; }
.chess-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 16px;
  margin-bottom: 16px;
}
.chess-toolbar label { display: grid; gap: 5px; font-size: .83rem; font-weight: 750; color: var(--muted); }
.chess-toolbar select {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--ink);
}
.toolbar-group, .toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.toolbar-actions { margin-left: auto; }
.chess-board-wrap {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.chess-board {
  display: grid;
  /* Les 8 colonnes et les 8 lignes ont exactement la même taille. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: clamp(5px, 1vw, 10px) solid #4e3828;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(45, 35, 25, .2);
  background: #4e3828;
}
.chess-square {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.chess-square.light { background: #ead8b5; }
.chess-square.dark { background: #866747; }
.chess-square.last { box-shadow: inset 0 0 0 999px rgba(238, 198, 73, .25); }
.chess-square.selected { box-shadow: inset 0 0 0 5px rgba(38, 111, 67, .95); }
.chess-square.legal .move-dot {
  position: absolute;
  width: 24%;
  height: 24%;
  border-radius: 50%;
  background: rgba(33, 91, 56, .65);
  z-index: 4;
  pointer-events: none;
}
.chess-square.legal.capture .move-dot {
  width: 78%;
  height: 78%;
  background: transparent;
  border: clamp(3px, .5vw, 7px) solid rgba(169, 54, 43, .7);
}
.chess-piece {
  position: relative;
  z-index: 3;
  line-height: 1;
  font-size: clamp(2rem, 7.1vw, 4.8rem);
  font-family: "Segoe UI Symbol", "DejaVu Sans", serif;
  user-select: none;
  pointer-events: none;
}
.white-piece {
  color: #fffdf6;
  text-shadow: -1px -1px 0 #3d352f, 1px -1px 0 #3d352f, -1px 1px 0 #3d352f, 1px 1px 0 #3d352f, 0 2px 3px rgba(0,0,0,.35);
}
.black-piece { color: #272522; text-shadow: 0 1px 1px rgba(255,255,255,.18); }
.coord { position: absolute; z-index: 5; font-size: clamp(.55rem, 1.4vw, .8rem); font-weight: 900; opacity: .78; pointer-events: none; }
.coord.rank { left: 4px; top: 3px; }
.coord.file { right: 4px; bottom: 2px; }
.chess-square.light .coord { color: #72563b; }
.chess-square.dark .coord { color: #f0dfbd; }
.promotion-picker {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,253,248,.98);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  text-align: center;
}
.promotion-picker strong { display: block; margin-bottom: 8px; }
.promotion-picker button {
  width: 58px;
  height: 58px;
  margin: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f3eee3;
  font-size: 2.5rem;
  cursor: pointer;
}
.chess-status { font-size: 1rem; }
.chess-status.alert { background: #fff0e8; color: #8b382c; }
.chess-side-column { display: grid; gap: 18px; }
.turn-box { display: flex; justify-content: space-between; gap: 12px; padding: 12px; margin-bottom: 16px; border-radius: 11px; background: #eef4ef; }
.turn-box span { color: var(--muted); }
.turn-box strong { color: var(--primary-2); }
.chess-history { max-height: 410px; overflow-y: auto; border-top: 1px solid var(--line); }
.history-row { display: grid; grid-template-columns: 38px 1fr 1fr; gap: 6px; padding: 8px 3px; border-bottom: 1px solid #eee8dd; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.history-row span:first-child { color: var(--muted); }
.history-empty { padding: 18px 0; color: var(--muted); font-style: italic; }

@media (max-width: 1050px) {
  .chess-play-layout { grid-template-columns: 1fr; }
  .chess-side-column { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .lesson-grid { grid-template-columns: 1fr; }
  .piece-lessons { grid-template-columns: 1fr; }
  .chess-principles { grid-template-columns: repeat(2, 1fr); }
  .play-card { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .piece-lesson { grid-template-columns: 1fr; }
  .mini-chess-board { width: min(100%, 230px); margin: 0 auto; }
  .chess-side-column { grid-template-columns: 1fr; }
  .chess-principles { grid-template-columns: 1fr; }
  .play-cta { align-items: stretch; flex-direction: column; }
  .toolbar-actions { width: 100%; margin-left: 0; }
  .toolbar-actions .btn { flex: 1; }
  .chess-piece { font-size: clamp(1.9rem, 11vw, 4rem); }
}

/* ============================================================
   DAMES — règles illustrées + plateaux interactifs
   ============================================================ */
.table-wrap { overflow-x: auto; }
.rules-compare-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.rules-compare-table th,
.rules-compare-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.rules-compare-table thead th { background: #f3eee3; color: var(--ink); }
.rules-compare-table tbody th { width: 180px; color: var(--primary-2); }

.draughts-rule-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
.draughts-rule-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.draughts-rule-cards .panel { min-width: 0; }

.rules-draughts-board,
.mini-draughts-board {
  display: grid;
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border: 5px solid #4f3b2d;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(45,35,25,.15);
  background: #4f3b2d;
}
.rules-draughts-board {
  grid-template-columns: repeat(var(--rule-board-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rule-board-size), minmax(0, 1fr));
  width: min(100%, 430px);
  margin: 18px auto 0;
}
.mini-draughts-board {
  grid-template-columns: repeat(var(--mini-draught-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--mini-draught-size), minmax(0, 1fr));
  width: min(100%, 245px);
  margin: 16px auto 0;
}
.rules-draught-square,
.mini-draught-square {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.rules-draught-square.light,
.mini-draught-square.light { background: #eadfca; }
.rules-draught-square.dark,
.mini-draught-square.dark { background: #76583e; }
.mini-draught-square.target::after {
  content: "";
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: rgba(61, 139, 83, .8);
  box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}

.rule-disc,
.draught-piece {
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-sizing: border-box;
  user-select: none;
}
.rule-disc {
  width: 68%;
  height: 68%;
  border: 2px solid rgba(35,30,25,.38);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.24);
  font-size: clamp(.85rem, 2.5vw, 1.45rem);
  line-height: 1;
}
.draught-white { background: #fffaf0; color: #4a3b31; }
.draught-black { background: #252321; color: #f5e9d5; border-color: rgba(255,255,255,.25); }
.draught-red { background: #b83e35; color: #fff8ed; border-color: rgba(80,20,20,.45); }
.rule-disc.king { box-shadow: inset 0 0 0 4px rgba(208,162,51,.78), inset 0 -4px 0 rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.24); }

.draught-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.variant-card { display: grid; grid-template-columns: minmax(220px, .82fr) minmax(0, 1.18fr); gap: 22px; align-items: center; }
.variant-board-preview .rules-draughts-board { margin: 0 auto; width: min(100%, 330px); }
.variant-actions, .variant-switch { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.draught-play-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(270px, 335px); gap: 22px; align-items: start; }
.draught-shell { overflow: hidden; }
.draught-board-wrap {
  width: min(100%, 720px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.draughts-board {
  display: grid;
  grid-template-columns: repeat(var(--board-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--board-size), minmax(0, 1fr));
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: clamp(5px, 1vw, 10px) solid #4e3828;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(45,35,25,.2);
  background: #4e3828;
}
.draught-square {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  appearance: none;
}
.draught-square:disabled { opacity: 1; }
.draught-square.light { background: #eadfca; cursor: default; }
.draught-square.dark { background: #76583e; cursor: pointer; }
.draught-square.dark:hover { filter: brightness(1.05); }
.draught-square.last { box-shadow: inset 0 0 0 999px rgba(238,198,73,.22); }
.draught-square.selected { box-shadow: inset 0 0 0 clamp(3px, .55vw, 6px) rgba(47,124,71,.95); }
.draught-square.legal .draught-move-dot {
  position: absolute;
  z-index: 5;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background: rgba(44,119,67,.76);
  pointer-events: none;
}
.draught-square.legal.capture .draught-move-dot {
  width: 68%;
  height: 68%;
  background: transparent;
  border: clamp(3px, .5vw, 6px) solid rgba(184,62,53,.8);
}
.draught-piece {
  position: relative;
  z-index: 3;
  width: 72%;
  height: 72%;
  border: clamp(1px, .2vw, 3px) solid rgba(30,25,20,.35);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.14), 0 4px 7px rgba(0,0,0,.25);
  pointer-events: none;
}
.draught-piece.king { box-shadow: inset 0 0 0 clamp(3px, .45vw, 6px) rgba(210,166,52,.82), inset 0 -6px 0 rgba(0,0,0,.14), 0 4px 7px rgba(0,0,0,.25); }
.disc-core { display: grid; place-items: center; width: 100%; height: 100%; font-size: clamp(.8rem, 3.2vw, 2.3rem); line-height: 1; }
.draught-coord { position: absolute; left: 3px; top: 2px; z-index: 6; font-size: clamp(.48rem, 1vw, .68rem); font-weight: 900; color: rgba(255,244,220,.78); pointer-events: none; }
.draught-side-column { display: grid; gap: 18px; }
.piece-count-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 18px; }
.piece-count-grid > div { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: #f5f0e6; }
.piece-count-grid span { font-size: .82rem; color: var(--muted); }
.piece-count-grid strong { font-size: 1.05rem; }
.draught-history { max-height: 340px; overflow-y: auto; border-top: 1px solid var(--line); }
.draught-history-row { display: grid; grid-template-columns: 42px 1fr; gap: 8px; padding: 8px 3px; border-bottom: 1px solid #eee8dd; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.draught-history-row span:first-child { color: var(--muted); }

@media (max-width: 1100px) {
  .draughts-rule-layout { grid-template-columns: 1fr; }
  .draughts-rule-layout > .panel .rules-draughts-board { width: min(100%, 390px); }
  .draught-play-layout { grid-template-columns: 1fr; }
  .draught-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .draught-side-column .panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .draught-choice-grid { grid-template-columns: 1fr; }
  .variant-card { grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .draughts-rule-cards { grid-template-columns: 1fr; }
  .variant-card { grid-template-columns: 1fr; }
  .variant-board-preview .rules-draughts-board { width: min(100%, 300px); }
  .draught-side-column { grid-template-columns: 1fr; }
  .draught-side-column .panel:last-child { grid-column: auto; }
  .variant-switch { width: 100%; }
  .variant-switch .btn { flex: 1; }
}
.draught-board-wrap { position: relative; }
.draught-path-picker {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 430px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,253,248,.98);
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
  text-align: center;
}
.draught-path-picker p { margin: 6px 0 12px; color: var(--muted); }
.draught-path-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px; }

/* ============================================================
   GO — règles illustrées + goban interactif
   ============================================================ */
.go-toc { margin-bottom: 4px; }
.go-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.go-lesson-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.go-rule-grid .panel,
.go-lesson-cards .panel { min-width: 0; }

.go-rule-board,
.go-board {
  --go-wood: #d4a45f;
  --go-line: #5b3a1d;
  display: grid;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--go-wood);
  box-shadow: 0 12px 26px rgba(69,45,21,.2);
}
.go-rule-board {
  grid-template-columns: repeat(var(--go-rule-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--go-rule-size), minmax(0, 1fr));
  width: min(100%, 360px);
  margin: 18px auto 0;
  padding: clamp(9px, 2vw, 14px);
  border: 5px solid #7a4d25;
  border-radius: 12px;
}
.go-rule-point,
.go-point {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.go-rule-point::before,
.go-point::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-.5px);
  background: var(--go-line);
  pointer-events: none;
}
.go-rule-point::after,
.go-point::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-.5px);
  background: var(--go-line);
  pointer-events: none;
}
.go-rule-point.edge-left::before,
.go-point.edge-left::before { left: 50%; }
.go-rule-point.edge-right::before,
.go-point.edge-right::before { right: 50%; }
.go-rule-point.edge-top::after,
.go-point.edge-top::after { top: 50%; }
.go-rule-point.edge-bottom::after,
.go-point.edge-bottom::after { bottom: 50%; }
.go-star {
  position: absolute;
  z-index: 1;
  width: clamp(4px, 18%, 9px);
  height: clamp(4px, 18%, 9px);
  border-radius: 50%;
  background: var(--go-line);
  pointer-events: none;
}
.go-stone,
.go-ghost {
  position: relative;
  z-index: 4;
  display: block;
  width: 84%;
  height: 84%;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}
.go-stone.black,
.go-ghost.black {
  background: radial-gradient(circle at 34% 28%, #555 0, #242424 36%, #090909 78%);
  border: 1px solid #050505;
  box-shadow: inset -2px -3px 5px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
}
.go-stone.white,
.go-ghost.white {
  background: radial-gradient(circle at 34% 28%, #fff 0, #f4f1e9 42%, #cfc9bd 100%);
  border: 1px solid #aaa398;
  box-shadow: inset -2px -3px 5px rgba(100,90,80,.16), 0 2px 4px rgba(0,0,0,.23);
}
.go-rule-point.target {
  background-image: radial-gradient(circle at center, rgba(54,137,78,.88) 0 13%, transparent 14%);
}
.go-rule-point.marker-capture { background-image: radial-gradient(circle at center, rgba(181,58,45,.9) 0 16%, transparent 17%); }
.go-rule-point.marker-ko { background-image: radial-gradient(circle at center, rgba(207,132,34,.95) 0 16%, transparent 17%); }
.go-rule-point.marker-eye { background-image: radial-gradient(circle at center, rgba(52,104,151,.88) 0 15%, transparent 16%); }

.go-play-layout { display: grid; grid-template-columns: minmax(0, 830px) minmax(270px, 340px); gap: 22px; align-items: start; }
.go-shell { overflow: hidden; }
.go-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.go-toolbar label { display: grid; gap: 5px; font-size: .82rem; font-weight: 750; color: var(--muted); }
.go-toolbar select {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}
.go-board-frame {
  width: min(100%, 720px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: clamp(7px, 1.2vw, 12px);
  border-radius: 8px;
  background: #85572e;
  box-shadow: 0 16px 30px rgba(55,36,18,.22);
}
.go-board {
  grid-template-columns: repeat(var(--go-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--go-size), minmax(0, 1fr));
  width: 100%;
  height: 100%;
  padding: clamp(7px, 1.4vw, 15px);
  border: 1px solid rgba(82,49,20,.4);
  border-radius: 3px;
}
.go-point { appearance: none; cursor: default; }
.go-point:disabled { opacity: 1; }
.go-point.playable { cursor: pointer; }
.go-ghost { opacity: 0; transform: scale(.82); transition: opacity .12s ease, transform .12s ease; }
.go-point.playable:hover .go-ghost { opacity: .35; transform: scale(1); }
.go-last-dot {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 24%;
  height: 24%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #d44b3e;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.go-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.go-actions .btn { min-width: 120px; }
.go-side-column { display: grid; gap: 18px; }
.go-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 18px; }
.go-score-grid > div { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: #f5f0e6; }
.go-score-grid span { color: var(--muted); font-size: .78rem; }
.go-score-grid strong { font-size: 1.05rem; }
.go-history { max-height: 330px; overflow-y: auto; border-top: 1px solid var(--line); }
.go-history-row { display: grid; grid-template-columns: 38px 1fr 1fr; gap: 6px; padding: 8px 3px; border-bottom: 1px solid #eee8dd; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.go-history-row span:first-child { color: var(--muted); }
.go-status { min-height: 50px; }

@media (max-width: 1100px) {
  .go-play-layout { grid-template-columns: 1fr; }
  .go-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .go-side-column .panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .go-rule-grid,
  .go-lesson-cards { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .go-side-column { grid-template-columns: 1fr; }
  .go-side-column .panel:last-child { grid-column: auto; }
  .go-toolbar .toolbar-actions { width: 100%; }
  .go-board { padding: 6px; }
  .go-board-frame { padding: 5px; }
  .go-stone, .go-ghost { width: 90%; height: 90%; }
  .go-actions .btn { min-width: 0; flex: 1; }
}

/* ============================================================
   ABALONE — règles illustrées + plateau interactif
   ============================================================ */
.abalone-toc { margin-bottom: 4px; }
.abalone-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.abalone-lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.abalone-sumito-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.abalone-rule-grid .panel,
.abalone-lesson-grid .panel,
.abalone-sumito-grid .panel { min-width: 0; }

.abalone-rule-diagram {
  display: block;
  width: min(100%, 490px);
  height: auto;
  margin: 14px auto 0;
  filter: drop-shadow(0 8px 10px rgba(43,51,47,.13));
}
.abalone-rule-diagram.compact { width: min(100%, 430px); }
.ab-rule-surface { fill: #c9d1cb; stroke: #64736b; stroke-width: 8; stroke-linejoin: round; }
.ab-rule-hole { fill: #748079; stroke: rgba(38,48,43,.55); stroke-width: 2; }
.ab-rule-hole.target { fill: #6ea66e; stroke: #39713f; stroke-width: 4; }
.ab-rule-marble.black { fill: #202529; stroke: #080a0b; stroke-width: 3; }
.ab-rule-marble.white { fill: #f6f3eb; stroke: #aaa79f; stroke-width: 3; }
.ab-rule-arrow { stroke: #b13f32; stroke-width: 8; stroke-linecap: round; opacity: .92; }
.sumito-card { position: relative; }
.sumito-badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #263d35;
  color: white;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.abalone-rule-note { margin-top: 18px; }
.abalone-principles .ico { font-size: 1.2rem; font-weight: 900; }

.abalone-play-layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(280px, 350px);
  gap: 22px;
  align-items: start;
}
.abalone-shell { overflow: hidden; }
.abalone-board-wrap {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(4px, .8vw, 8px);
}
.abalone-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1.1547005 / 1;
  margin: 0 auto;
  isolation: isolate;
}
.abalone-board-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: polygon(25% 1%, 75% 1%, 99% 50%, 75% 99%, 25% 99%, 1% 50%);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.36), transparent 52%),
    linear-gradient(145deg, #dce2dd, #a9b4ad 58%, #8c9991);
  box-shadow: inset 0 0 0 9px rgba(77,91,83,.45), inset 0 -18px 28px rgba(63,77,70,.18), 0 18px 35px rgba(46,58,52,.2);
}
.abalone-board-surface::after {
  content: "";
  position: absolute;
  inset: 3.2%;
  clip-path: inherit;
  border: 2px solid rgba(255,255,255,.5);
}
.abalone-cell {
  position: absolute;
  z-index: 2;
  width: 8.45%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 2px solid rgba(47,58,52,.56);
  border-radius: 50%;
  appearance: none;
  background: radial-gradient(circle at 42% 36%, #7c8981 0, #65716a 57%, #536059 100%);
  box-shadow: inset 0 3px 5px rgba(22,28,25,.45), 0 1px 0 rgba(255,255,255,.5);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
}
.abalone-cell:disabled { opacity: 1; cursor: default; }
.abalone-cell:not(:disabled):hover { transform: translate(-50%, -50%) scale(1.055); }
.abalone-cell.selected {
  outline: 4px solid #d49a2f;
  outline-offset: 2px;
  z-index: 4;
}
.abalone-cell.target {
  box-shadow: inset 0 0 0 6px rgba(80,171,83,.75), inset 0 3px 5px rgba(22,28,25,.4), 0 0 0 2px rgba(36,107,46,.35);
}
.abalone-cell.push-target { outline: 3px solid rgba(185,55,45,.82); outline-offset: 1px; }
.abalone-marble {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  height: 88%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.abalone-marble.black {
  background: radial-gradient(circle at 32% 25%, #6c7276 0, #30363a 29%, #15191b 68%, #070809 100%);
  border: 1px solid #060708;
  box-shadow: inset -5px -7px 10px rgba(0,0,0,.46), 0 4px 7px rgba(0,0,0,.44);
}
.abalone-marble.white {
  background: radial-gradient(circle at 31% 25%, #fff 0, #f7f3e9 38%, #d8d3c9 73%, #b7b1a7 100%);
  border: 1px solid #9e988e;
  box-shadow: inset -5px -7px 10px rgba(112,103,92,.18), 0 4px 7px rgba(0,0,0,.32);
}
.abalone-move-controls {
  display: grid;
  grid-template-columns: minmax(180px, 250px) 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f4ed;
}
.abalone-move-controls p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.abalone-dir-pad {
  display: grid;
  grid-template-columns: 48px minmax(60px, 1fr) 48px;
  grid-template-rows: repeat(3, 40px);
  gap: 4px 8px;
  align-items: center;
  justify-items: center;
}
.abalone-dir-pad strong { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.abalone-dir-pad button {
  width: 42px;
  height: 38px;
  border: 1px solid #bcb5a9;
  border-radius: 10px;
  background: #fff;
  color: #77736d;
  font-size: 1.2rem;
  font-weight: 850;
}
.abalone-dir-pad button.active:not(:disabled) {
  cursor: pointer;
  background: #2f6d4c;
  border-color: #2f6d4c;
  color: white;
  box-shadow: 0 4px 9px rgba(35,90,61,.22);
}
.abalone-dir-pad button:disabled { opacity: .42; }
.abalone-status { min-height: 50px; }
.abalone-side-column { display: grid; gap: 18px; }
.abalone-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 18px; }
.abalone-score-grid > div { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: #f5f0e6; }
.abalone-score-grid span { color: var(--muted); font-size: .78rem; }
.abalone-score-grid strong { font-size: 1.05rem; }
.abalone-history { max-height: 340px; overflow-y: auto; border-top: 1px solid var(--line); }
.abalone-history-row { display: grid; grid-template-columns: 32px 18px 1fr; gap: 7px; align-items: center; padding: 8px 3px; border-bottom: 1px solid #eee8dd; font-size: .86rem; }
.abalone-history-row > span:first-child { color: var(--muted); }
.abalone-history-row b { display: block; font-weight: 650; }
.abalone-history-row small { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }

.abalone-savebar { display: grid; grid-template-columns: minmax(150px, .8fr) auto minmax(240px, 1.4fr) auto auto; gap: 9px; align-items: end; margin: 12px 0 18px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #faf7f0; }
.abalone-savebar label { display: grid; gap: 5px; min-width: 0; }
.abalone-savebar label > span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.abalone-savebar input, .abalone-savebar select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; background: var(--paper); color: var(--ink); font: inherit; }
.abalone-save-status { grid-column: 1 / -1; color: var(--muted); min-height: 1.1em; }

.abalone-evaluation { display: grid; gap: 9px; margin: 10px 0 20px; }
.abalone-eval-card { padding: 10px; border-radius: 11px; border: 1px solid var(--line); background: #f8f5ee; }
.abalone-eval-card > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.abalone-eval-card span { font-size: .82rem; font-weight: 750; }
.abalone-eval-card strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.abalone-eval-track { height: 9px; overflow: hidden; border-radius: 999px; background: #ded8cd; }
.abalone-eval-track i { display: block; height: 100%; min-width: 2px; border-radius: inherit; transition: width .22s ease; }
.abalone-eval-card.black .abalone-eval-track i { background: #2a2a2a; }
.abalone-eval-card.white .abalone-eval-track { background: #bbb4aa; }
.abalone-eval-card.white .abalone-eval-track i { background: #fefefe; border-right: 1px solid #aca59b; }
.abalone-evaluation > small { color: var(--muted); font-variant-numeric: tabular-nums; }
.evaluation-help { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.ab-dot { display: block; width: 13px; height: 13px; border-radius: 50%; }
.ab-dot.black { background: #1a1e20; }
.ab-dot.white { background: #f2eee6; border: 1px solid #aaa; }

@media (max-width: 1100px) {
  .abalone-play-layout { grid-template-columns: 1fr; }
  .abalone-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abalone-side-column .panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .abalone-lesson-grid,
  .abalone-sumito-grid { grid-template-columns: 1fr; }
  .abalone-lesson-grid .abalone-rule-diagram,
  .abalone-sumito-grid .abalone-rule-diagram { max-width: 430px; }
}
@media (max-width: 760px) {
  .abalone-rule-grid { grid-template-columns: 1fr; }
  .abalone-move-controls { grid-template-columns: 1fr; }
  .abalone-dir-pad { width: min(100%, 260px); margin: 0 auto; }
}
@media (max-width: 680px) {
  .abalone-side-column { grid-template-columns: 1fr; }
  .abalone-side-column .panel:last-child { grid-column: auto; }
  .abalone-score-grid { grid-template-columns: 1fr; }
  .abalone-cell { width: 9%; border-width: 1px; }
  .abalone-cell.selected { outline-width: 2px; outline-offset: 1px; }
}

@media (max-width: 1050px) { .abalone-savebar { grid-template-columns: 1fr auto; } .abalone-save-select { grid-column: 1 / -1; } }

@media (max-width: 620px) {
  .abalone-savebar { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .abalone-savebar label, .abalone-savebar .abalone-save-select { grid-column: 1 / -1; }
  .abalone-savebar button { width: 100%; }
  .abalone-save-status { grid-column: 1 / -1; }
}

/* ============================================================
   V6 — Comptes, sauvegardes D1 et multijoueur Abalone
   ============================================================ */
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.account-card{display:grid;gap:16px}
.account-card label{display:grid;gap:7px;font-weight:700}
.account-card input,.abalone-online-settings input,.chess-online-settings input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--surface);color:var(--text)}
.account-card small{color:var(--muted);line-height:1.45}
.account-avatar{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:var(--surface-2);border:1px solid var(--line)}
.account-actions{display:flex;gap:10px;flex-wrap:wrap}
.form-status{min-height:24px;color:#a43e34;font-weight:700}
.abalone-online-settings,.chess-online-settings{align-items:end;flex-wrap:wrap}
.abalone-online-settings label,.chess-online-settings label{min-width:150px}
.online-room-status{font-size:.86rem;color:var(--muted);max-width:360px;line-height:1.35}
.online-savebar{border-top:1px dashed var(--line);background:color-mix(in srgb,var(--surface) 82%,#eaf5ff 18%)}
.online-savebar>strong{white-space:nowrap}
.online-savebar a,.online-room-status a{color:var(--accent);font-weight:700}
@media (max-width:800px){.account-grid{grid-template-columns:1fr}.abalone-online-settings,.chess-online-settings{width:100%}.online-room-status{max-width:none;width:100%}}

/* V6.2 — récupération du compte */
.recovery-key-card{grid-column:1/-1}
.recovery-key-value{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:clamp(1rem,2.8vw,1.35rem);font-weight:800;letter-spacing:.08em;padding:14px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2);word-break:break-all;user-select:all}

/* V6.4 — actions multijoueur Échecs */
.chess-online-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.online-decision{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);display:grid;gap:6px}
.online-decision[hidden]{display:none}
.online-decision strong{font-size:.95rem}
.online-decision span{color:var(--muted);line-height:1.4}
.online-decision-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
@media (max-width:700px){.chess-online-actions,.online-decision-actions{display:grid;grid-template-columns:1fr}.chess-online-actions .btn,.online-decision-actions .btn{width:100%}}

/* ============================================================
   V6.5 — Pendules, cadences et classement Elo
   ============================================================ */
.custom-time-fields{display:flex;gap:.55rem;align-items:end;flex-wrap:wrap}
.custom-time-fields[hidden]{display:none!important}
.inline-check{display:flex!important;align-items:center!important;gap:.45rem!important;min-height:42px}
.inline-check input{width:18px;height:18px;margin:0}

.chess-clock-panel{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:0 0 .8rem}
.chess-clock-panel[hidden]{display:none!important}
.chess-clock-card{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid var(--border);border-radius:14px;padding:.75rem .9rem;background:var(--card);transition:border-color .15s,transform .15s}
.chess-clock-card>div{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.chess-clock-card span{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chess-clock-card small{color:var(--muted)}
.chess-clock-card strong{font-variant-numeric:tabular-nums;font-size:clamp(1.45rem,4vw,2.2rem);letter-spacing:.03em}
.chess-clock-card.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.chess-clock-card.black-clock{background:color-mix(in srgb,#111 94%,var(--card));color:#fff}
.chess-clock-card.black-clock small{color:#c7c7c7}
.chess-clock-card.white-clock{background:#f8f8f6;color:#151515}
.chess-time-meta{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.92rem}
.rating-result{display:grid;gap:.25rem;padding:.7rem .8rem;margin:.6rem 0;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}
.rating-result[hidden]{display:none!important}
.rating-result span{font-size:.9rem}

.elo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin:.7rem 0 1rem}
.elo-chip{display:flex;flex-direction:column;align-items:center;gap:.15rem;border:1px solid var(--border);border-radius:12px;padding:.65rem .4rem;background:var(--surface-soft)}
.elo-chip span,.elo-chip small{color:var(--muted);font-size:.82rem;text-align:center}
.elo-chip strong{font-size:1.35rem}
.elo-leaderboard-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.elo-leaderboard-head h3{margin-bottom:.25rem}
.elo-table{display:grid;gap:.2rem;margin-top:.6rem}
.elo-row{display:grid;grid-template-columns:2.3rem minmax(0,1fr) 4rem 4.5rem;gap:.5rem;align-items:center;padding:.45rem .4rem;border-bottom:1px solid var(--border)}
.elo-row.elo-head{font-size:.8rem;color:var(--muted);font-weight:700}

@media (max-width:700px){
  .chess-clock-panel{grid-template-columns:1fr}
  .chess-time-meta{grid-column:1}
  .elo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .elo-row{grid-template-columns:2rem minmax(0,1fr) 3.6rem 3.8rem;font-size:.9rem}
}


/* V6.6 — Archive et relecture des parties d’Échecs */
.chess-archive-card{grid-column:1/-1}
.chess-game-archive{display:grid;gap:.45rem}
.archive-game-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .75rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}
.archive-game-row>div{display:grid;gap:.18rem;min-width:0}.archive-game-row small{color:var(--muted);line-height:1.35}.archive-result{font-variant-numeric:tabular-nums;color:var(--accent);padding:0 .25rem}
.chess-archive-replay{margin-top:.7rem;padding:1rem;border:1px solid var(--border);border-radius:14px;background:var(--card)}.chess-archive-replay[hidden]{display:none!important}
.archive-replay-head{display:flex;justify-content:space-between;gap:1rem;align-items:start;margin-bottom:.8rem}.archive-replay-head h3{margin:0}.archive-replay-head p{margin:.2rem 0 0;color:var(--muted)}
.archive-board{width:min(100%,520px);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);margin:0 auto;border:2px solid #303030}.archive-square{aspect-ratio:1;display:grid;place-items:center;font-size:clamp(1.25rem,5vw,3rem);line-height:1}.archive-square.light{background:#eee6d5}.archive-square.dark{background:#886d4f}
.archive-replay-controls{display:flex;gap:.5rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:.8rem}.archive-replay-controls strong{min-width:130px;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:680px){.archive-game-row{align-items:stretch;flex-direction:column}.archive-game-row .btn{width:100%}.archive-replay-head{flex-direction:column}.archive-replay-controls{display:grid;grid-template-columns:1fr 1fr}.archive-replay-controls strong{grid-column:1/-1;grid-row:1;text-align:center}}

/* ============================================================
   V6.7 — Fin au temps lisible + échiquier/pendules visibles sur PC
   ============================================================ */
.chess-board-wrap{
  /* Permet aux pièces de se dimensionner par rapport au plateau lui-même. */
  container-type:inline-size;
}
@supports (font-size: 1cqi){
  .chess-piece{font-size:clamp(1.7rem,10cqi,4.8rem)}
  .coord{font-size:clamp(.52rem,1.7cqi,.8rem)}
}

/* Sur ordinateur/tablette large, les deux pendules passent à droite du plateau.
   Le plateau est aussi borné par la hauteur de la fenêtre : il reste donc visible
   en entier en même temps que les deux temps. */
@media (min-width:760px){
  .chess-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) 168px;
    column-gap:12px;
    align-items:start;
  }
  .chess-shell>.chess-toolbar,
  .chess-shell>.chess-status,
  .chess-shell>.chess-online-actions,
  .chess-shell>.online-decision{
    grid-column:1/-1;
  }
  .chess-shell>.chess-toolbar{grid-row:1}
  .chess-shell>.chess-clock-panel{
    grid-column:2;
    grid-row:2;
    display:grid;
    grid-template-columns:1fr;
    gap:.55rem;
    align-self:start;
    margin:0;
  }
  .chess-shell>.chess-board-wrap{
    grid-column:1;
    grid-row:2;
    width:min(100%,clamp(280px,calc(100vh - 340px),720px));
    margin:0 auto;
  }
  /* En modes IA/local, il n'y a pas de pendule : le plateau récupère toute la largeur. */
  .chess-shell>.chess-clock-panel[hidden]+.chess-board-wrap{grid-column:1/-1}
  .chess-clock-panel .chess-time-meta{grid-column:1}
  .chess-clock-card{
    flex-direction:column;
    align-items:stretch;
    gap:.4rem;
    padding:.65rem .7rem;
  }
  .chess-clock-card>div{gap:.08rem}
  .chess-clock-card strong{
    text-align:center;
    font-size:clamp(1.35rem,2.3vw,2rem);
  }
  .chess-time-meta{font-size:.82rem;line-height:1.3}
}

@media (min-width:1051px){
  .chess-play-layout{grid-template-columns:minmax(0,900px) minmax(260px,330px)}
}

/* Sur les écrans PC peu hauts (par ex. 1366×768), on compacte seulement
   l'en-tête de la page de jeu pour préserver la taille utile du plateau. */
@media (min-width:760px) and (max-height:850px){
  .chess-play-page .breadcrumb{margin-bottom:8px}
  .chess-play-page .section-head{margin-bottom:10px}
  .chess-play-page .section-head .section-lead{display:none}
  .chess-shell{padding:14px}
  .chess-shell>.chess-toolbar{margin-bottom:10px;gap:8px 12px}
  .chess-shell>.chess-board-wrap{
    width:min(100%,clamp(280px,calc(100vh - 285px),720px));
  }
}

/* Sur petit écran on conserve l'organisation verticale plus lisible. */
@media (max-width:759px){
  .chess-shell{display:block}
  .chess-clock-panel{grid-template-columns:1fr}
  .chess-time-meta{grid-column:1}
}


/* ============================================================
   V6.8 — Deux pendules garanties + relecture d'historique compacte
   ============================================================ */
.chess-clock-panel{
  min-width:0;
}
.chess-clock-stack{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  min-width:0;
}
.chess-clock-card{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  min-width:0;
  min-height:76px;
}

.archive-board{
  container-type:inline-size;
  box-sizing:border-box;
}
@supports (font-size:1cqi){
  .archive-square{font-size:clamp(1.05rem,10cqi,3rem)}
}

/* Sur PC, la relecture tient dans la hauteur disponible : plateau à gauche,
   informations et commandes à droite. Après ouverture, le panneau est amené
   automatiquement en haut de la fenêtre par app.js. */
@media (min-width:760px){
  .chess-shell>.chess-clock-panel{
    display:flex;
    flex-direction:column;
    gap:.55rem;
  }
  .chess-shell>.chess-clock-panel[hidden]{display:none!important}
  .chess-clock-stack{
    grid-template-columns:1fr;
    gap:.55rem;
    width:100%;
  }
  .chess-time-meta{width:100%}

  .chess-archive-replay:not([hidden]){
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(190px,240px);
    grid-template-rows:auto 1fr;
    gap:12px 18px;
    align-items:start;
  }
  .chess-archive-replay .archive-replay-head{
    grid-column:2;
    grid-row:1;
    margin:0;
    flex-direction:column;
    align-items:stretch;
  }
  .chess-archive-replay .archive-board{
    grid-column:1;
    grid-row:1 / span 2;
    width:min(100%,520px,calc(100vh - 185px));
    max-width:100%;
    margin:0 auto;
  }
  .chess-archive-replay .archive-replay-controls{
    grid-column:2;
    grid-row:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    margin:0;
    align-content:start;
  }
  .chess-archive-replay .archive-replay-controls strong{
    grid-column:1/-1;
    grid-row:1;
    min-width:0;
    padding:.35rem 0;
  }
  .chess-archive-replay .archive-replay-controls .btn{
    width:100%;
  }
}

@media (max-width:759px){
  .chess-clock-stack{grid-template-columns:1fr}
  .chess-clock-card{min-height:68px}
}

/* ============================================================
   V6.9 — Pendules Blancs/Noirs isolées du reste du DOM
   ============================================================ */
.chess-shell{overflow:visible}
.chess-clock-panel{overflow:visible!important}
.chess-clock-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  width:100%;
  min-width:0;
}
.chess-clock-grid>.chess-clock-card{
  display:flex!important;
  position:relative!important;
  visibility:visible!important;
  opacity:1!important;
}
@media (min-width:760px){
  .chess-clock-grid{
    grid-template-columns:1fr;
    gap:.55rem;
  }
}
@media (max-width:759px){
  .chess-clock-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .chess-clock-grid>.chess-clock-card{
    min-height:70px;
    padding:.6rem .65rem;
  }
  .chess-clock-grid>.chess-clock-card strong{
    font-size:clamp(1.2rem,6vw,1.7rem);
  }
}

/* ============================================================
   V6.10 — Une seule zone de rendu pour les deux pendules
   ============================================================ */
.chess-dual-clock-readout{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:158px;
  padding:.8rem .85rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(to bottom,#181818 0 49.5%,#f8f8f6 50.5% 100%);
  color:transparent;
  white-space:pre-line;
  font-size:0;
  line-height:1.25;
}
/* On ne peut pas colorer séparément les deux moitiés d'un text node ;
   le fond reste donc bi-ton, tandis que le texte est rendu via une ombre
   neutre lisible sur les deux zones. */
.chess-dual-clock-readout{
  color:#111;
  text-shadow:
    0 0 0 #111,
    0 0 0 #111;
  background:#f3f3f0;
  font-size:.88rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
@media (min-width:760px){
  .chess-dual-clock-readout{
    min-height:168px;
    font-size:.86rem;
    line-height:1.32;
  }
}
@media (max-width:759px){
  .chess-dual-clock-readout{
    min-height:142px;
    font-size:.9rem;
    line-height:1.25;
  }
}

/* ============================================================
   V6.11 — pendules à 2 lignes, plus élégantes mais toujours robustes
   ============================================================ */
.chess-dual-clock-readout{
  display:grid!important;
  grid-template-columns:1fr;
  gap:.65rem;
  width:100%;
  min-width:0;
  min-height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-size:inherit;
  white-space:normal;
  text-shadow:none;
  overflow:visible!important;
}
.chess-dual-clock-readout .clock-side-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.9rem;
  width:100%;
  min-width:0;
  padding:.8rem .9rem;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.chess-dual-clock-readout .clock-side-row.black{
  background:linear-gradient(180deg,#202020,#111);
  color:#f4f4f4;
}
.chess-dual-clock-readout .clock-side-row.white{
  background:linear-gradient(180deg,#fbfbf8,#f1f1ec);
  color:#151515;
}
.chess-dual-clock-readout .clock-side-row.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent), 0 10px 22px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.chess-dual-clock-readout .clock-side-head{
  display:flex;
  align-items:center;
  gap:.8rem;
  min-width:0;
  flex:1 1 auto;
}
.chess-dual-clock-readout .clock-side-indicator{
  display:grid;
  place-items:center;
  width:1.9rem;
  height:1.9rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:900;
  flex:0 0 auto;
  background:rgba(255,255,255,.12);
}
.chess-dual-clock-readout .clock-side-row.white .clock-side-indicator{
  background:rgba(0,0,0,.07);
}
.chess-dual-clock-readout .clock-side-identity{
  display:flex;
  flex-direction:column;
  gap:.08rem;
  min-width:0;
  flex:1 1 auto;
}
.chess-dual-clock-readout .clock-side-label{
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.82;
}
.chess-dual-clock-readout .clock-side-name{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:1rem;
  line-height:1.15;
}
.chess-dual-clock-readout .clock-side-rating{
  flex:0 0 auto;
  padding:.2rem .5rem;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-size:.8rem;
  font-weight:800;
  white-space:nowrap;
}
.chess-dual-clock-readout .clock-side-row.white .clock-side-rating{
  background:rgba(0,0,0,.06);
}
.chess-dual-clock-readout .clock-side-time{
  flex:0 0 auto;
  min-width:6.6ch;
  text-align:right;
  font-size:clamp(1.35rem,2.3vw,2.05rem);
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
@media (max-width: 640px){
  .chess-dual-clock-readout .clock-side-row{
    align-items:flex-start;
    flex-direction:column;
    gap:.5rem;
  }
  .chess-dual-clock-readout .clock-side-head{
    width:100%;
  }
  .chess-dual-clock-readout .clock-side-rating{
    margin-left:auto;
  }
  .chess-dual-clock-readout .clock-side-time{
    width:100%;
    text-align:left;
    min-width:0;
    font-size:1.7rem;
  }
}

/* ============================================================
   V6.13 — séparation nette des joueurs + pastilles de couleur identiques
   ============================================================ */
.chess-dual-clock-readout{
  row-gap:2rem !important;
}
.chess-dual-clock-readout .clock-side-row + .clock-side-row{
  margin-top:.35rem !important;
}
.chess-dual-clock-readout .clock-side-indicator{
  width:2.2rem !important;
  height:2.2rem !important;
  padding:0 !important;
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.25rem !important;
  overflow:visible !important;
}
.chess-dual-clock-readout .clock-color-dot{
  display:block;
  width:18px;
  height:18px;
  min-width:18px;
  min-height:18px;
  border-radius:50%;
  box-sizing:border-box;
  flex:0 0 18px;
}
.chess-dual-clock-readout .black-dot{
  background:#050505;
  border:2px solid #777;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.chess-dual-clock-readout .white-dot{
  background:#fff;
  border:2px solid #555;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}
.chess-dual-clock-readout .clock-turn-arrow{
  font-size:.72rem;
  line-height:1;
  font-weight:900;
  color:var(--accent);
  flex:0 0 auto;
}
@media (max-width:640px){
  .chess-dual-clock-readout{
    row-gap:1.75rem !important;
  }
}


/* ============================================================
   V6.14 — correction effective du rendu HTML des deux pendules
   ============================================================ */
.chess-dual-clock-readout{
  gap:2.25rem !important;
}
.chess-dual-clock-readout .clock-side-row + .clock-side-row{
  margin-top:0 !important;
}
.chess-dual-clock-readout .clock-color-dot{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  flex-basis:20px !important;
}
.chess-dual-clock-readout .black-dot,
.chess-dual-clock-readout .white-dot{
  box-sizing:border-box !important;
  border-width:2px !important;
}
@media (max-width:640px){
  .chess-dual-clock-readout{gap:1.8rem !important;}
}

/* ============================================================
   V6.15 — informations en haut, temps en dessous
   ============================================================ */
.chess-dual-clock-readout .clock-side-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  align-items:stretch !important;
  gap:.8rem !important;
  min-height:132px !important;
  padding:1rem 1.05rem 1.1rem !important;
}
.chess-dual-clock-readout .clock-side-head{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:.75rem !important;
  flex:0 0 auto !important;
}
.chess-dual-clock-readout .clock-side-time{
  grid-column:1 !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding-top:.35rem !important;
  text-align:center !important;
  font-size:clamp(1.9rem,3.2vw,2.65rem) !important;
  line-height:1.05 !important;
}
@media (max-width:640px){
  .chess-dual-clock-readout .clock-side-row{
    min-height:126px !important;
    padding:.9rem .9rem 1rem !important;
    gap:.7rem !important;
  }
  .chess-dual-clock-readout .clock-side-head{
    flex-direction:row !important;
    align-items:center !important;
  }
  .chess-dual-clock-readout .clock-side-time{
    text-align:center !important;
    font-size:2rem !important;
  }
}

/* ============================================================
   V6.16 — Elo sous le nom, temps isolé sur sa propre ligne
   ============================================================ */
.chess-dual-clock-readout .clock-side-row{
  min-height:158px !important;
  grid-template-rows:auto auto !important;
  gap:1rem !important;
  padding:1.05rem 1.1rem 1.15rem !important;
}

.chess-dual-clock-readout .clock-side-head{
  display:grid !important;
  grid-template-columns:2.2rem minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:.8rem !important;
  row-gap:.35rem !important;
  align-items:center !important;
}

.chess-dual-clock-readout .clock-side-indicator{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  align-self:center !important;
}

.chess-dual-clock-readout .clock-side-identity{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  width:100% !important;
}

.chess-dual-clock-readout .clock-side-rating{
  grid-column:2 !important;
  grid-row:2 !important;
  justify-self:start !important;
  margin:0 !important;
  max-width:100% !important;
}

.chess-dual-clock-readout .clock-side-time{
  margin-top:.15rem !important;
  padding-top:.55rem !important;
  border-top:1px solid rgba(255,255,255,.14);
}

.chess-dual-clock-readout .clock-side-row.white .clock-side-time{
  border-top-color:rgba(0,0,0,.12);
}

@media (max-width:640px){
  .chess-dual-clock-readout .clock-side-row{
    min-height:152px !important;
    padding:1rem .95rem 1.05rem !important;
  }
  .chess-dual-clock-readout .clock-side-head{
    display:grid !important;
    grid-template-columns:2.2rem minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:.7rem !important;
    row-gap:.3rem !important;
  }
  .chess-dual-clock-readout .clock-side-rating{
    margin:0 !important;
    justify-self:start !important;
  }
}

/* ============================================================
   V6.18 — Dames multijoueur : salons, pendules et décisions
   ============================================================ */
.draught-online-settings{align-items:end}
.draught-clock-panel{
  margin:.8rem auto 1rem;
  width:min(100%,720px);
}
.draught-clock-panel[hidden]{display:none!important}
.draught-clock-readout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:.55rem;
}
.draught-clock-row{
  display:grid;
  grid-template-rows:auto auto;
  gap:.7rem;
  min-width:0;
  min-height:112px;
  padding:.85rem .95rem .9rem;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 6px 16px rgba(35,30,25,.08);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.draught-clock-row.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent),0 8px 18px rgba(35,30,25,.12);
  transform:translateY(-1px);
}
.draught-clock-row.color-black{background:linear-gradient(180deg,#262422,#141311);color:#fff7e9;border-color:#4e4943}
.draught-clock-row.color-white{background:linear-gradient(180deg,#fffdf8,#f1ede3);color:#211f1a}
.draught-clock-row.color-red{background:linear-gradient(180deg,#b9473e,#91342d);color:#fff9ee;border-color:#7f2e28}
.draught-clock-player{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:.65rem;
  align-items:center;
  min-width:0;
}
.draught-clock-player>div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:.6rem;align-items:center;min-width:0}
.draught-clock-player span{grid-column:1;font-size:.72rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.draught-clock-player strong{grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.draught-clock-player small{grid-column:2;grid-row:1 / span 2;align-self:center;padding:.18rem .45rem;border-radius:999px;background:rgba(255,255,255,.13);font-weight:800;white-space:nowrap}
.draught-clock-row.color-white .draught-clock-player small{background:rgba(0,0,0,.06)}
.draught-clock-dot{display:block;width:20px;height:20px;border-radius:50%;box-sizing:border-box}
.color-black .draught-clock-dot{background:#050505;border:2px solid #888;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.color-white .draught-clock-dot{background:#fff;border:2px solid #555}
.color-red .draught-clock-dot{background:#c84339;border:2px solid rgba(75,15,15,.65);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.draught-clock-time{
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:.45rem;
  text-align:center;
  font-size:clamp(1.8rem,3vw,2.45rem);
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.color-white .draught-clock-time{border-top-color:rgba(0,0,0,.11)}
.draught-clock-panel .chess-time-meta{text-align:center;margin:0}

@media (min-width:1101px) and (min-height:760px){
  .draught-board-wrap{width:min(100%,720px,calc(100vh - 330px));}
}
@media (max-width:680px){
  .draught-clock-readout{grid-template-columns:1fr;gap:.85rem}
  .draught-clock-row{min-height:104px}
  .draught-clock-player>div{grid-template-columns:minmax(0,1fr) auto}
}

/* Relecture des parties de Dames dans Compte. */
.archive-draught-board{
  display:grid;
  grid-template-columns:repeat(var(--archive-draught-size),1fr);
  width:min(100%,560px);
  aspect-ratio:1/1;
  margin:0 auto;
  border:6px solid #4e3828;
  border-radius:8px;
  overflow:hidden;
  background:#4e3828;
}
.archive-draught-square{display:grid;place-items:center;min-width:0;min-height:0}
.archive-draught-square.light{background:#eadfca}
.archive-draught-square.dark{background:#76583e}
.archive-draught-piece{
  display:grid;place-items:center;
  width:70%;height:70%;border-radius:50%;
  border:2px solid rgba(30,25,20,.35);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.14),0 2px 4px rgba(0,0,0,.23);
  font-size:clamp(.7rem,2.2vw,1.5rem);
}
.archive-draught-piece.king{box-shadow:inset 0 0 0 3px rgba(210,166,52,.82),inset 0 -4px 0 rgba(0,0,0,.14),0 2px 4px rgba(0,0,0,.23)}

/* ============================================================
   V6.19 — Dames : damier et pendules visibles ensemble sur PC
   ============================================================ */

/* Sur ordinateur/tablette large, les pendules passent à droite du damier.
   Le damier est borné par la hauteur de la fenêtre, comme aux Échecs. */
@media (min-width:760px){
  .draught-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) 180px;
    column-gap:14px;
    align-items:start;
    overflow:visible;
  }

  .draught-shell>.chess-toolbar,
  .draught-shell>.draught-status,
  .draught-shell>.chess-online-actions,
  .draught-shell>.online-decision{
    grid-column:1/-1;
  }

  .draught-shell>.chess-toolbar{
    grid-row:1;
  }

  .draught-shell>.draught-clock-panel{
    grid-column:2;
    grid-row:2;
    width:100%;
    margin:0;
    align-self:start;
  }

  .draught-shell>.draught-clock-panel .draught-clock-readout{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .draught-shell>.draught-board-wrap{
    grid-column:1;
    grid-row:2;
    width:min(100%,clamp(300px,calc(100vh - 340px),620px));
    margin:0 auto;
  }

  /* Sans pendule (IA ou 2 joueurs locaux), le damier récupère toute la largeur. */
  .draught-shell>.draught-clock-panel[hidden]+.draught-board-wrap{
    grid-column:1/-1;
    width:min(100%,clamp(320px,calc(100vh - 320px),680px));
  }

  .draught-clock-row{
    min-height:124px;
    padding:.8rem .75rem .9rem;
  }

  .draught-clock-player{
    grid-template-columns:20px minmax(0,1fr);
    gap:.5rem;
  }

  .draught-clock-player>div{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    row-gap:.14rem;
  }

  .draught-clock-player small{
    grid-column:1;
    grid-row:3;
    justify-self:start;
    margin-top:.08rem;
  }

  .draught-clock-time{
    font-size:clamp(1.55rem,2.4vw,2rem);
  }

  .draught-clock-panel .chess-time-meta{
    font-size:.78rem;
    line-height:1.25;
  }
}

/* Les écrans PC peu hauts bénéficient du même compactage que les Échecs. */
@media (min-width:760px) and (max-height:850px){
  .draughts-play-page{
    padding-top:20px;
  }

  .draughts-play-page .breadcrumb{
    margin-bottom:7px;
  }

  .draughts-play-page .section-head{
    margin-bottom:9px;
  }

  .draughts-play-page .section-head .section-lead{
    display:none;
  }

  .draught-shell{
    padding:13px;
  }

  .draught-shell>.chess-toolbar{
    margin-bottom:9px;
    gap:7px 10px;
  }

  .draught-shell>.draught-board-wrap{
    width:min(100%,clamp(280px,calc(100vh - 280px),600px));
  }

  .draught-shell>.draught-clock-panel[hidden]+.draught-board-wrap{
    width:min(100%,clamp(300px,calc(100vh - 270px),640px));
  }
}

/* Retour à la disposition verticale sur téléphone. */
@media (max-width:759px){
  .draught-shell{
    display:block;
  }
  .draught-clock-panel{
    width:min(100%,720px);
    margin:.8rem auto 1rem;
  }
  .draught-clock-readout{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   V6.20 — Dames : relecture PC avec commandes à droite du damier
   ============================================================ */
@media (min-width: 860px) {
  #checkersArchiveReplay:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(250px, 315px);
    grid-template-areas:
      "board info"
      "board controls";
    column-gap: 24px;
    row-gap: 18px;
    align-items: start;
  }

  #checkersArchiveReplay .archive-replay-head {
    grid-area: info;
    margin: 0;
    min-width: 0;
    padding: .15rem 0 0;
  }

  #checkersArchiveReplay .archive-replay-head > div {
    min-width: 0;
  }

  #checkersArchiveReplay .archive-replay-head h3 {
    margin-bottom: .2rem;
  }

  #checkersArchiveReplay .archive-replay-head p,
  #checkersArchiveReplay .archive-replay-head small {
    line-height: 1.4;
  }

  #checkersArchiveReplay .archive-draught-board {
    grid-area: board;
    width: min(100%, 620px, calc(100vh - 235px));
    margin: 0 auto;
    align-self: start;
  }

  #checkersArchiveReplay .archive-replay-controls {
    grid-area: controls;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin: 0;
    align-self: start;
  }

  #checkersArchiveReplay .archive-replay-controls strong {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    padding: .65rem .75rem;
    border-radius: 10px;
    background: var(--surface-soft, #f1ece2);
    text-align: center;
  }

  #checkersArchiveReplay .archive-replay-controls [data-checkers-step="start"] {
    grid-column: 1;
    grid-row: 2;
  }

  #checkersArchiveReplay .archive-replay-controls [data-checkers-step="prev"] {
    grid-column: 2;
    grid-row: 2;
  }

  #checkersArchiveReplay .archive-replay-controls [data-checkers-step="next"] {
    grid-column: 1;
    grid-row: 3;
  }

  #checkersArchiveReplay .archive-replay-controls [data-checkers-step="end"] {
    grid-column: 2;
    grid-row: 3;
  }

  #checkersArchiveReplay .archive-replay-controls .btn {
    width: 100%;
    min-height: 42px;
    white-space: normal;
  }
}

/* Écrans PC peu hauts : on réduit encore légèrement le damier,
   afin de garder les informations et les boutons visibles à côté. */
@media (min-width: 860px) and (max-height: 780px) {
  #checkersArchiveReplay .archive-draught-board {
    width: min(100%, 560px, calc(100vh - 190px));
  }

  #checkersArchiveReplay:not([hidden]) {
    row-gap: 12px;
  }

  #checkersArchiveReplay .archive-replay-controls {
    gap: .5rem;
  }
}

/* ============================================================
   V6.21 — GO MULTIJOUEUR
   ============================================================ */
.go-online-settings{align-items:end;gap:10px}
.go-online-settings input{min-height:38px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.go-clock-panel{display:grid;gap:.65rem;margin:0 0 .85rem}
.go-clock-panel[hidden]{display:none!important}
.go-clock-readout{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.go-clock-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name time" "elo time";gap:.2rem .8rem;align-items:center;min-height:86px;padding:.8rem .9rem;border:1px solid var(--line);border-radius:14px}
.go-clock-card.black{background:#171717;color:#f7f7f3}
.go-clock-card.white{background:#f8f8f4;color:#171717}
.go-clock-card span{grid-area:name;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.go-clock-card small{grid-area:elo;opacity:.76}
.go-clock-card strong{grid-area:time;font-size:clamp(1.45rem,3vw,2.2rem);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.go-clock-panel .chess-time-meta{text-align:center}
.go-play-page .go-board-frame{width:min(100%,720px,calc(100vh - 245px));max-width:720px}
.go-play-page .go-board{min-width:0;min-height:0}
.go-play-page .goOnlineActions{margin-top:.7rem}

.archive-go-board{
  display:grid;
  grid-template-columns:repeat(var(--archive-go-size),1fr);
  grid-template-rows:repeat(var(--archive-go-size),1fr);
  aspect-ratio:1/1;
  width:min(100%,680px);
  padding:12px;
  background:#d7a55f;
  border:8px solid #85572e;
  box-shadow:0 10px 24px rgba(55,36,18,.18);
}
.archive-go-point{position:relative;min-width:0;min-height:0;background-image:linear-gradient(to right,transparent calc(50% - .5px),#5b4025 calc(50% - .5px),#5b4025 calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),#5b4025 calc(50% - .5px),#5b4025 calc(50% + .5px),transparent calc(50% + .5px))}
.archive-go-stone{position:absolute;z-index:2;left:50%;top:50%;width:88%;height:88%;border-radius:50%;transform:translate(-50%,-50%)}
.archive-go-stone.black{background:radial-gradient(circle at 34% 28%,#555 0,#242424 36%,#090909 78%);box-shadow:0 2px 4px rgba(0,0,0,.35)}
.archive-go-stone.white{background:radial-gradient(circle at 34% 28%,#fff 0,#f4f1e9 42%,#cfc9bd 100%);border:1px solid #aaa398;box-shadow:0 2px 4px rgba(0,0,0,.22)}

@media (min-width: 980px){
  .go-archive-replay:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:auto 1fr;gap:1rem 1.2rem;align-items:start}
  .go-archive-replay .archive-replay-head{grid-column:2;grid-row:1;margin:0;display:block}
  .go-archive-replay .archive-replay-head .btn{margin-top:.7rem}
  .go-archive-replay .archive-go-board{grid-column:1;grid-row:1/3;width:min(100%,calc(100vh - 190px));max-width:680px;justify-self:center}
  .go-archive-replay .archive-replay-controls{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;align-content:start;margin:0}
  .go-archive-replay .archive-replay-controls strong{grid-column:1/-1;grid-row:1;margin-bottom:.45rem}
}
@media (max-width:760px){
  .go-clock-readout{grid-template-columns:1fr}
  .go-play-page .go-board-frame{width:100%}
  .archive-go-board{padding:7px;border-width:5px}
}

/* ============================================================
   V6.22 — Go : pendules robustes + disposition PC à côté du goban
   ============================================================ */
.go-clock-panel{
  display:grid;
  gap:.75rem;
  margin:0;
  min-width:0;
  overflow:visible!important;
}
.go-clock-panel[hidden]{display:none!important}
.go-clock-readout{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  min-width:0;
}
.go-clock-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:.7rem;
  min-width:0;
  min-height:132px;
  padding:.9rem 1rem 1rem;
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.go-clock-card.black{background:linear-gradient(180deg,#202020,#111);color:#f7f7f3}
.go-clock-card.white{background:linear-gradient(180deg,#fbfbf8,#f0f0ea);color:#171717}
.go-clock-card.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent),0 10px 22px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.go-clock-player{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  grid-template-areas:"dot name" "dot elo";
  gap:.08rem .6rem;
  align-items:center;
  min-width:0;
}
.go-clock-player>span:not(.go-clock-dot){
  grid-area:name;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:850;
}
.go-clock-player small{grid-area:elo;opacity:.78;font-weight:700}
.go-clock-dot{
  grid-area:dot;
  width:20px;
  height:20px;
  border-radius:50%;
  align-self:center;
}
.go-clock-dot.black{background:#050505;border:2px solid #777;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.go-clock-dot.white{background:#fff;border:2px solid #b5b0a7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.go-clock-card strong{
  display:block;
  width:100%;
  padding-top:.65rem;
  border-top:1px solid currentColor;
  text-align:center;
  font-size:clamp(1.85rem,3vw,2.55rem);
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
}
.go-clock-card.black strong{border-top-color:rgba(255,255,255,.2)}
.go-clock-card.white strong{border-top-color:rgba(0,0,0,.13)}
.go-clock-panel .chess-time-meta{
  text-align:center;
  line-height:1.3;
  font-size:.84rem;
}

@media (min-width:980px){
  .go-play-page .go-shell.go-online-clock-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 290px;
    grid-template-areas:
      "toolbar toolbar"
      "board clock"
      "board actions"
      "board status"
      "board onlineactions"
      "board prompt";
    column-gap:1.2rem;
    row-gap:.75rem;
    align-items:start;
    overflow:visible;
  }
  .go-shell.go-online-clock-layout>.go-toolbar{grid-area:toolbar;margin-bottom:.3rem}
  .go-shell.go-online-clock-layout>.go-board-frame{
    grid-area:board;
    width:min(100%,720px,calc(100vh - 235px));
    max-width:720px;
    margin:0 auto;
    align-self:start;
  }
  .go-shell.go-online-clock-layout>.go-clock-panel{grid-area:clock;align-self:start}
  .go-shell.go-online-clock-layout>.go-actions{grid-area:actions;margin-top:0}
  .go-shell.go-online-clock-layout>#goStatus{grid-area:status;margin-top:0}
  .go-shell.go-online-clock-layout>#goOnlineActions{grid-area:onlineactions;margin-top:0}
  .go-shell.go-online-clock-layout>#goOnlinePrompt{grid-area:prompt;margin-top:0}
}

@media (min-width:980px) and (max-height:800px){
  .go-shell.go-online-clock-layout>.go-board-frame{
    width:min(100%,610px,calc(100vh - 205px));
  }
  .go-clock-card{min-height:112px;padding:.72rem .85rem .8rem;gap:.5rem}
  .go-clock-card strong{font-size:1.8rem;padding-top:.5rem}
  .go-clock-readout{gap:.7rem}
}

@media (max-width:979px){
  .go-play-page .go-shell.go-online-clock-layout{display:block}
  .go-shell.go-online-clock-layout>.go-clock-panel{margin:0 0 .9rem}
  .go-clock-readout{grid-template-columns:1fr 1fr;gap:.7rem}
}
@media (max-width:620px){
  .go-clock-readout{grid-template-columns:1fr}
  .go-clock-card{min-height:112px}
}

/* ============================================================
   V6.23 — Awélé multijoueur
   ============================================================ */
.awale-play-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;align-items:start}
.awale-online-settings{margin:.7rem 0 1rem;padding:.85rem;border:1px solid var(--line);border-radius:14px;background:#f7f3ea}
.awale-online-settings[hidden]{display:none!important}
.awale-online-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:.7rem;align-items:end}
.awale-online-grid label,.awale-custom-time label{display:grid;gap:.25rem;font-size:.9rem}
.awale-online-grid label>span,.awale-custom-time label>span{font-weight:700;color:var(--muted)}
.awale-online-grid select,.awale-custom-time input,.awale-room-actions input{min-height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:.45rem .6rem;color:var(--ink)}
.awale-custom-time{display:flex;gap:.7rem;margin-top:.65rem}.awale-custom-time[hidden]{display:none!important}.awale-custom-time label{max-width:150px}
.awale-room-actions{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-top:.75rem}.awale-room-actions input{width:110px;text-transform:uppercase;font-weight:900;letter-spacing:.12em;text-align:center}
.awale-stage{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:start}
.awale-board-column{min-width:0}
.awale-player-caption{text-align:center;font-weight:800;color:var(--muted);min-height:1.6em;margin:.25rem 0}
.awale-clock-panel{display:grid;gap:.7rem;position:sticky;top:92px;min-width:0}.awale-clock-panel[hidden]{display:none!important}
.awale-clock-readout{display:grid;gap:1.15rem}
.awale-clock-card{display:grid;gap:.55rem;min-height:132px;padding:.9rem 1rem;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 18px rgba(33,31,26,.06)}
.awale-clock-card.side0{background:linear-gradient(180deg,#fffdf8,#f1ece2);color:#171713}
.awale-clock-card.side1{background:linear-gradient(180deg,#2b2925,#181714);color:#fff}
.awale-clock-card.active{outline:3px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:1px}
.awale-clock-card>div{display:grid;gap:.08rem}.awale-clock-card span{font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.8}.awale-clock-card strong{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.awale-clock-card small{opacity:.75}
.awale-clock-card b{display:block;border-top:1px solid currentColor;padding-top:.55rem;text-align:center;font-size:clamp(1.75rem,3vw,2.6rem);font-variant-numeric:tabular-nums;letter-spacing:.04em;line-height:1}
.awale-clock-card.side1 b{border-top-color:rgba(255,255,255,.28)}.awale-clock-card.side0 b{border-top-color:rgba(0,0,0,.15)}
.awale-clock-panel .chess-online-actions{display:flex;gap:.45rem;flex-wrap:wrap}.awale-clock-panel .chess-online-actions[hidden]{display:none!important}
.awale-archive-replay:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.awale-archive-replay .archive-replay-head{grid-column:2;grid-row:1;margin:0}.awale-archive-replay .archive-awale-board{grid-column:1;grid-row:1 / span 2}.awale-archive-replay .archive-replay-controls{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:.55rem;align-self:start}.awale-archive-replay .archive-replay-controls strong{grid-column:1/-1;text-align:center}
.archive-awale-board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,minmax(72px,1fr));gap:10px;padding:16px;border-radius:40px;background:linear-gradient(#b77b3f,#8d582a);border:6px solid #70421f;max-width:min(720px,calc(100vw - 420px));aspect-ratio:3/1.15}
.archive-awale-pit{display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 45%,#714522 0 34%,#553217 65%,#3b2211 100%);box-shadow:inset 0 9px 12px rgba(0,0,0,.35);color:#fff4dd;font-size:1.25rem;font-weight:900}

@media (min-width: 980px){
  .awale-page .page{padding-top:24px}
  .awale-stage .awale-board{max-height:calc(100vh - 310px)}
}
@media (max-width: 980px){
  .awale-play-layout{grid-template-columns:1fr}
  .awale-stage{grid-template-columns:1fr}
  .awale-clock-panel{position:static;grid-row:auto}
  .awale-online-grid{grid-template-columns:1fr 1fr}
  .awale-online-grid .form-check{grid-column:1/-1}
  .awale-archive-replay:not([hidden]){display:block}.awale-archive-replay .archive-replay-head{margin-bottom:.8rem}.awale-archive-replay .archive-replay-controls{display:flex;flex-wrap:wrap;margin-top:.8rem}.archive-awale-board{max-width:100%;aspect-ratio:3/1.25}
}
@media (max-width: 620px){
  .awale-online-grid{grid-template-columns:1fr}.awale-online-grid .form-check{grid-column:auto}.awale-custom-time{display:grid;grid-template-columns:1fr 1fr}.awale-room-actions{display:grid;grid-template-columns:1fr 1fr}.awale-room-actions input{width:100%}.awale-room-actions #createAwaleRoom{grid-column:1/-1}
  .awale-clock-card{min-height:118px}.archive-awale-board{gap:5px;padding:9px;border-width:4px;border-radius:24px;grid-template-rows:repeat(2,minmax(50px,1fr))}
}

/* ============================================================
   V6.24 — Abalone multijoueur : plateau + pendules + archive
   ============================================================ */
.abalone-online-settings{align-items:end;flex-wrap:wrap}
.abalone-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.abalone-clock-panel{display:grid;gap:12px;min-width:0}
.abalone-clock-panel[hidden]{display:none!important}
.abalone-clock-readout{display:grid;gap:18px}
.abalone-clock-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:118px;padding:14px 16px;border:1px solid var(--line);border-radius:16px}
.abalone-clock-card.black{background:linear-gradient(180deg,#202020,#0f0f0f);color:#fff}
.abalone-clock-card.white{background:linear-gradient(180deg,#fff,#f2f1ec);color:#151515}
.abalone-clock-card.active{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px}
.abalone-clock-card>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:center;min-width:0}
.abalone-clock-card .clock-color-dot{grid-row:1/3;width:20px;height:20px;border-radius:50%;display:block;box-sizing:border-box}
.abalone-clock-card .clock-color-dot.black{background:#050505;border:2px solid #d7d7d7}
.abalone-clock-card .clock-color-dot.white{background:#fff;border:2px solid #777}
.abalone-clock-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.abalone-clock-card small{opacity:.78;font-weight:750}
.abalone-clock-card>b{grid-column:1/-1;text-align:center;font-size:clamp(2rem,3vw,3rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.05em;padding-top:10px;border-top:1px solid rgba(127,127,127,.28)}
.abalone-clock-panel .chess-online-actions{display:flex;flex-wrap:wrap;gap:8px}
.abalone-clock-panel .rating-result{margin:0}
.archive-abalone-board{position:relative;width:min(100%,620px);aspect-ratio:1.1547005/1;margin:auto}
.archive-abalone-board .abalone-cell.archive{pointer-events:none}
.abalone-archive-replay:not([hidden]){display:grid;gap:12px}

@media (min-width: 980px){
  .abalone-shell .abalone-stage{grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:18px;align-items:center}
  .abalone-shell .abalone-board-wrap{width:min(100%,calc(100vh - 215px));max-width:720px;margin:0 auto}
  .abalone-clock-panel{align-self:stretch;align-content:center}
  .abalone-archive-replay:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(220px,300px);align-items:start}
  .abalone-archive-replay .archive-replay-head{grid-column:2;grid-row:1;margin:0;display:grid;gap:8px}
  .abalone-archive-replay .archive-abalone-board{grid-column:1;grid-row:1/3;width:min(100%,calc(100vh - 190px));max-width:680px}
  .abalone-archive-replay .archive-replay-controls{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;margin:0}
  .abalone-archive-replay .archive-replay-controls strong{grid-column:1/-1;grid-row:1;text-align:center}
}
@media (max-width:979px){
  .abalone-clock-readout{grid-template-columns:1fr 1fr;gap:10px}
  .abalone-clock-card{min-height:96px}
}
@media (max-width:650px){
  .abalone-clock-readout{grid-template-columns:1fr}
  .abalone-clock-card{min-height:108px}
}

/* ============================================================
   V6.26 — Yams
   ============================================================ */
.yams-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:1.25rem;align-items:start}
.yams-shell{min-width:0}
.yams-toolbar,.yams-room-actions,.yams-roll-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.yams-toolbar label{display:flex;align-items:center;gap:.55rem}
.yams-online-settings{margin:.9rem 0;padding:.9rem;border:1px solid var(--line);border-radius:14px;background:#f7f3ea}
.yams-online-settings[hidden]{display:none!important}
.yams-online-grid{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr);gap:.8rem;align-items:end}
.yams-online-grid label:not(.form-check){display:grid;gap:.3rem}
.yams-online-grid select,.yams-room-actions input{min-height:42px;border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem;background:#fff}
.yams-room-actions{margin-top:.8rem;justify-content:flex-start}.yams-room-actions input{width:110px;text-transform:uppercase;font-weight:800;letter-spacing:.12em;text-align:center}
.yams-room-state{display:grid;gap:.1rem;margin-top:.5rem;color:var(--muted)}.yams-room-state strong{color:var(--ink)}
.yams-dice{display:grid;grid-template-columns:repeat(5,minmax(86px,1fr));gap:clamp(.55rem,1.6vw,1rem);margin:1.2rem 0}
.yams-die{display:grid;place-items:center;gap:.45rem;min-width:0;padding:.55rem;border:2px solid transparent;border-radius:18px;background:transparent;color:var(--ink);transition:transform .15s,border-color .15s,background .15s}
.yams-die:not(:disabled):hover{background:#f2ede3;transform:translateY(-2px)}
.yams-die.held{border-color:var(--accent);background:#fff4df;transform:translateY(-8px);box-shadow:0 8px 16px rgba(0,0,0,.08)}
.yams-die:disabled{cursor:default;opacity:1}
.yams-die-face{position:relative;display:block;width:clamp(68px,8vw,100px);aspect-ratio:1;border-radius:18%;background:linear-gradient(145deg,#fff,#eeeae1);border:2px solid #cfc8ba;box-shadow:inset 0 -5px 10px rgba(0,0,0,.06),0 5px 12px rgba(0,0,0,.08)}
.yams-die-face .pip{position:absolute;width:14%;aspect-ratio:1;border-radius:50%;background:#202020;transform:translate(-50%,-50%)}
.yams-die-face .p1{left:24%;top:24%}.yams-die-face .p2{left:50%;top:24%}.yams-die-face .p3{left:76%;top:24%}.yams-die-face .p4{left:24%;top:50%}.yams-die-face .p5{left:50%;top:50%}.yams-die-face .p6{left:76%;top:50%}.yams-die-face .p7{left:24%;top:76%}.yams-die-face .p8{left:50%;top:76%}.yams-die-face .p9{left:76%;top:76%}
.yams-die-empty{display:grid;place-items:center;width:clamp(68px,8vw,100px);aspect-ratio:1;border:2px dashed var(--line);border-radius:18%;font-size:2.2rem;color:var(--muted);background:#faf8f2}
.yams-hold-label{font-size:.78rem;font-weight:800;color:var(--muted)}.yams-die.held .yams-hold-label{color:#7a4b10}
.yams-roll-row{justify-content:center;margin:.5rem 0 1rem}.yams-roll-button{min-width:190px;font-size:1.05rem}
.yams-score-panel{min-width:0}.yams-score-scroll{overflow:auto;max-height:calc(100vh - 180px)}
.yams-score-sheet,.yams-rules-table{width:100%;border-collapse:collapse;font-size:.93rem}.yams-score-sheet th,.yams-score-sheet td,.yams-rules-table th,.yams-rules-table td{border-bottom:1px solid var(--line);padding:.48rem .55rem;text-align:center}.yams-score-sheet th:first-child,.yams-rules-table th:first-child,.yams-rules-table td:first-child{text-align:left}.yams-score-sheet thead th{position:sticky;top:0;background:var(--paper);z-index:1}.yams-score-sheet .active-player{background:#eef4ef;color:var(--primary-2);border-radius:8px}.yams-score-sheet .score-choice{padding:.2rem}.yams-score-sheet .score-choice button{width:100%;min-height:34px;border:1px dashed var(--accent);border-radius:8px;background:#fff8e9;color:#7a4b10;font-weight:900}.yams-score-sheet .score-choice button:hover{background:#ffedc6}.yams-section-row th{background:#f1ece2;text-transform:uppercase;letter-spacing:.05em;font-size:.76rem}.yams-summary{background:#faf8f2}.yams-total{background:#eef4ef;font-size:1.05rem}.yams-total td{font-weight:900}
.yams-rules-table-wrap{overflow:auto}.yams-rules-table th{background:#f1ece2}.yams-rules-table td:nth-child(2){text-align:left}
.archive-yams-dice{display:flex;gap:.4rem;flex-wrap:wrap;margin:.8rem 0}.archive-yams-die{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:2rem}
@media(max-width:1000px){.yams-layout{grid-template-columns:1fr}.yams-score-scroll{max-height:none}.yams-dice{grid-template-columns:repeat(5,1fr)}}
@media(max-width:620px){.yams-online-grid{grid-template-columns:1fr}.yams-dice{gap:.25rem}.yams-die{padding:.2rem}.yams-die-face,.yams-die-empty{width:min(15vw,72px)}.yams-hold-label{font-size:.68rem}.yams-score-sheet{font-size:.82rem}.yams-score-sheet th,.yams-score-sheet td{padding:.38rem .3rem}}

/* ============================================================
   V6.28 — 421
   ============================================================ */
.game421-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.2rem;align-items:start}
.game421-dice{grid-template-columns:repeat(3,minmax(100px,1fr));max-width:560px;margin-inline:auto}
.game421-tokens{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1rem 0}
.game421-tokens>div{padding:.75rem;border:1px solid var(--line);border-radius:14px;background:#f7f3ea;display:flex;flex-direction:column;gap:.12rem;min-width:0}
.game421-tokens span{font-size:.75rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game421-tokens strong{font-size:1.55rem;line-height:1;font-variant-numeric:tabular-nums}.game421-tokens small{color:var(--muted)}
.game421-player.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}
.game421-phase{background:#eef4ef!important}.game421-pot{background:#fff4df!important}
.game421-combo{display:flex;justify-content:center;align-items:baseline;gap:.7rem;min-height:2.2rem;margin:.25rem 0 .8rem}.game421-combo strong{font-size:1.15rem}.game421-combo span{color:var(--muted)}
.game421-actions{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.6rem}
.game421-rules-page .yams-rules-table td:first-child{font-weight:800;text-align:center}
@media(max-width:920px){.game421-layout{grid-template-columns:1fr}.game421-tokens{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.game421-dice{grid-template-columns:repeat(3,1fr)}.game421-tokens{gap:.45rem}.game421-tokens>div{padding:.55rem}.game421-tokens strong{font-size:1.3rem}}