/* =========================================================================
   POTOS — « CODE SECRET » : le plateau (js/code-game.js, socle css/jeu-socle.css).
   Un vrai plateau de jeu de déduction posé sur la table : le cache du code en haut, les rangées d'essais de bas en
   haut (n° · trous · fiches), la palette et les outils dans ma zone. Taille : tout se calcule depuis la TABLE
   (container-type: size) : une « case » --cell = la plus petite de (hauteur / rangées) et (largeur / colonnes).
   Couleurs d'interface : jetons de la charte (--text, --muted, --surface*, --line*, --accent…). Couleurs des
   OBJETS (plateau, pions, fiches) : celles du cosmétique (variables --b-* posées par la vue), mêmes en clair et en
   sombre (le plateau reste un plateau). Fluidité : seuls transform et opacity sont animés (docs/fluidite.md).
   ========================================================================= */
.jx-code { --g: #C2410C; }
.jx-code .jx-zone { container-type: size; padding: 8px; }

.cs-stage { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; align-items: center; gap: 6px; --tabs: 0px; }
.cs-stage.has-tabs { --tabs: 42px; }

/* ---------- Onglets (codeur, fin de partie : voir le plateau d'un autre) ---------- */
.cs-tabs { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.cs-tabs[hidden] { display: none; }
.cs-tab {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill, 999px); font: 600 .85rem/1 var(--font-ui, system-ui);
  color: var(--text, #F5F2EB); background: var(--surface-2, rgba(255, 255, 255, .08)); border: 1px solid var(--line, rgba(255, 255, 255, .12));
}
.cs-tab[aria-selected="true"] { color: var(--on-accent, #1B1608); background: var(--accent, #FFC233); border-color: transparent; }
.cs-tab:active { transform: scale(.95); transition-duration: 0s; }

/* ---------- Le plateau ---------- */
.cs-board {
  --b-bg: #2E313B; --b-bg2: #24262E; --b-hole: #16171C; --b-rim: #4A4E5C; --b-ink: #F5F2EB; --b-shield: #3B3F4C; --b-line: rgba(255, 255, 255, .12);
  --rows: 10; --pegs: 4;
  /* Case : hauteur dispo / (rangées + cache) et largeur dispo / (n° + trous + fiches), bornée */
  --cell: clamp(16px, min(calc((100cqh - var(--tabs) - 44px) / (var(--rows) + 1.55)), calc((min(100cqw, 560px) - 30px) / (var(--pegs) + 2))), 60px);
  --pd: calc(var(--cell) * .74);   /* diamètre d'un pion */
  --hole: calc(var(--cell) * .5);  /* trou vide */
  --cols: calc(var(--cell) * .6) calc(var(--cell) * var(--pegs)) calc(var(--cell) * 1.3);
  position: relative; display: flex; flex-direction: column;
  padding: 8px 10px 10px; border-radius: 16px;
  background: linear-gradient(180deg, var(--b-bg), var(--b-bg2));
  box-shadow: var(--ombre-objet, 0 14px 26px -12px rgba(0, 0, 0, .6)), inset 0 1px 0 rgba(255, 255, 255, .08);
  contain: layout paint;
}
/* Habillages du plateau (cosmétique code.table) : décor statique */
.cs-board.t-bois { background: repeating-linear-gradient(94deg, rgba(60, 30, 10, 0) 0 9px, rgba(60, 30, 10, .16) 9px 11px), linear-gradient(180deg, var(--b-bg), var(--b-bg2)); }
.cs-board.t-epoque { background: linear-gradient(90deg, #7A4A24 0 9px, transparent 9px calc(100% - 9px), #7A4A24 calc(100% - 9px)), linear-gradient(180deg, var(--b-bg), var(--b-bg2)); }
.cs-board.t-arcade { background: repeating-linear-gradient(0deg, rgba(255, 79, 216, .07) 0 2px, transparent 2px 6px), linear-gradient(180deg, var(--b-bg), var(--b-bg2)); }
.cs-board.t-bord { background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .5) 0 1px, transparent 2px), radial-gradient(circle at 80% 60%, rgba(255, 255, 255, .4) 0 1px, transparent 2px), linear-gradient(180deg, var(--b-bg), var(--b-bg2)); }
.cs-board.t-ardoise { box-shadow: 0 0 0 5px #8A5A36, var(--ombre-objet, 0 14px 26px -12px rgba(0, 0, 0, .6)); }

/* ---------- Le cache du code (en haut, côté codeur) ---------- */
.cs-shield {
  position: relative; display: grid; grid-template-columns: var(--cols); align-items: end; flex: none;
  height: calc(var(--cell) * 1.05 + 18px); margin-bottom: 6px; padding-bottom: calc(var(--cell) * .12);
  border-radius: 10px; background: var(--b-shield); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 6px -3px rgba(0, 0, 0, .5);
}
.cs-shield-lab {
  position: absolute; left: 10px; right: 10px; top: 3px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 600 .72rem/14px var(--font-ui, system-ui); color: var(--b-ink); opacity: .85;
}
.cs-code { grid-column: 2; display: grid; grid-template-columns: repeat(var(--pegs), 1fr); place-items: center; height: var(--cell); }
.cs-q { font: 700 14px/1 var(--font-display, system-ui); color: var(--b-ink); opacity: .55; }
.cs-cover { display: none; }
.cs-shield .cs-hole { background: color-mix(in srgb, var(--b-hole) 70%, var(--b-shield)); }
.cs-shield.is-open .cs-hole, .cs-shield .cs-hole.is-hint { background: var(--b-hole); }
.cs-shield .cs-hole.is-hint::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px dashed var(--accent, #FFC233); }
.cs-shield.is-edit { box-shadow: inset 0 0 0 2px var(--accent, #FFC233), 0 3px 6px -3px rgba(0, 0, 0, .5); }
.cs-shield.is-pouce .cs-hole[role="button"] { cursor: pointer; }
.cs-shield.is-pouce .cs-hole[role="button"]::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent, #FFC233); }

/* ---------- Rangées d'essais (la 1re en bas) ---------- */
.cs-rows { display: flex; flex-direction: column-reverse; }
.cs-row { display: grid; grid-template-columns: var(--cols); align-items: center; position: relative; height: var(--cell); flex: none; border-bottom: 1px solid var(--b-line); }
.cs-row:first-child { border-bottom: 0; }
.cs-n { font: 600 11px/1 var(--font-hud, system-ui); color: var(--b-ink); opacity: .5; text-align: center; font-variant-numeric: tabular-nums; }
.cs-holes { display: grid; grid-template-columns: repeat(var(--pegs), 1fr); place-items: center; height: 100%; }
.cs-hole {
  position: relative; width: var(--hole); height: var(--hole); border-radius: 50%; display: grid; place-items: center;
  background: var(--b-hole); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), 0 1px 0 var(--b-rim);
}
.cs-hole > .cs-peg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.cs-board[data-kind="chiffres"] .cs-hole, .cs-board[data-kind="symboles"] .cs-hole { border-radius: 22%; }
.cs-row.is-active { background: color-mix(in srgb, var(--accent, #FFC233) 16%, transparent); border-radius: 8px; }
.cs-row.is-active .cs-n { opacity: 1; color: var(--accent, #FFC233); }
.cs-row.is-active .cs-hole, .cs-shield.is-edit .cs-hole { cursor: pointer; }
.cs-hole.is-sel::after { content: ''; position: absolute; inset: calc(var(--cell) * -.16); border-radius: 50%; border: 2.5px solid var(--accent, #FFC233); }
.cs-row.is-barred { opacity: .45; }
.cs-barred { font-size: 14px; }
.cs-row.is-auto .cs-n::after { content: '⏱'; font-size: .8em; }
.cs-kz { display: grid; place-items: center; height: 100%; }

/* ---------- Pions ---------- */
.cs-peg {
  --c: #888; --d: #444;
  width: var(--pd); height: var(--pd); border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 45%, #fff) 0 11%, var(--c) 46%, var(--d) 100%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .28), 0 2px 3px rgba(0, 0, 0, .4);
}
.cs-sym { width: 56%; height: 56%; display: block; }
.cs-peg.m-verre {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9) 0 9%, color-mix(in srgb, var(--c) 72%, transparent) 30%, color-mix(in srgb, var(--d) 82%, transparent) 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, #fff), inset 0 -4px 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .35);
}
.cs-peg.m-bois {
  background: repeating-linear-gradient(100deg, rgba(78, 46, 20, 0) 0 3px, rgba(78, 46, 20, .25) 3px 4px),
    radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 55%, #E8C9A0) 0 22%, color-mix(in srgb, var(--d) 65%, #4E2E14) 100%);
}
.cs-peg.m-bonbon { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .6) 0 3px, transparent 3px 7px), radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 45%, #fff) 0 11%, var(--c) 46%, var(--d) 100%); }
.cs-peg.m-pixel {
  border-radius: 3px; clip-path: polygon(25% 0, 75% 0, 75% 12%, 88% 12%, 88% 25%, 100% 25%, 100% 75%, 88% 75%, 88% 88%, 75% 88%, 75% 100%, 25% 100%, 25% 88%, 12% 88%, 12% 75%, 0 75%, 0 25%, 12% 25%, 12% 12%, 25% 12%);
  background: var(--c); box-shadow: inset -3px -3px 0 var(--d), inset 3px 3px 0 rgba(255, 255, 255, .4);
}
.cs-peg.m-planete { position: relative; background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 40%, #fff) 0 8%, var(--c) 40%, var(--d) 100%); box-shadow: none; }
.cs-peg.m-planete::after { content: ''; position: absolute; left: -18%; right: -18%; top: 38%; height: 24%; border-radius: 50%; border: 2px solid rgba(251, 248, 241, .85); rotate: -16deg; }
/* Tuiles (chiffres, symboles) */
.cs-peg.is-tile { border-radius: 22%; background: #FBF8F1; box-shadow: inset 0 -2px 0 #C9C0AE, 0 2px 3px rgba(0, 0, 0, .4); }
/* Tailles de texte FIXES (jamais proportionnelles à la table : une taille = une fonte à préchauffer, docs/fluidite.md §10) */
.cs-peg.is-digit { font: 700 15px/1 var(--font-display, system-ui); color: #1E1F26; font-variant-numeric: tabular-nums; }
.cs-tile-svg { width: 84%; height: 84%; display: block; }
.cs-peg.is-tile.m-bois { background: #E8C9A0; box-shadow: inset 0 -2px 0 #8A5A36, 0 2px 3px rgba(0, 0, 0, .4); }
.cs-peg.is-tile.m-verre { background: rgba(234, 246, 251, .82); box-shadow: inset 0 0 0 2px #9CC9DE, 0 2px 3px rgba(0, 0, 0, .35); }
.cs-peg.is-tile.m-pixel { border-radius: 0; box-shadow: inset -3px -3px 0 #2F6B38; background: #E9F2E1; }
.cs-peg.is-tile.m-planete { background: #1C2147; box-shadow: inset 0 0 0 2px #7A8CFF; }
.cs-peg.is-digit.m-planete { color: #D9F8FF; }
.cs-peg.is-tile.m-bonbon { background: #FFF4FA; box-shadow: inset 0 -2px 0 #F2B5D2, 0 2px 3px rgba(0, 0, 0, .35); }
.cs-peg.is-vide { background: transparent; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--b-ink, #F5F2EB) 55%, transparent); width: calc(var(--pd) * .8); height: calc(var(--pd) * .8); }
.cs-peg.is-mystere { width: calc(var(--pd) * .62); height: calc(var(--pd) * .62); background: color-mix(in srgb, var(--b-ink, #F5F2EB) 30%, var(--b-hole, #16171C)); box-shadow: none; }

/* ---------- Fiches d'indice ---------- */
/* Plaque claire sous les fiches : la noire se lit sur tous les plateaux (même sombres), la blanche aussi */
.cs-keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--cell) * .07); padding: calc(var(--cell) * .06); border-radius: calc(var(--cell) * .14); background: rgba(232, 226, 212, .34); }
.cs-keys.is-3 { grid-template-columns: repeat(3, 1fr); }
.cs-keys.is-precis { grid-template-columns: repeat(var(--n), 1fr); }
.cs-key { display: block; width: calc(var(--cell) * .24); height: calc(var(--cell) * .24); border-radius: 50%; }
.cs-key.k-b { background: radial-gradient(circle at 35% 30%, #5A5D68 0 14%, #0E0F13 55%); box-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.cs-key.k-w { background: radial-gradient(circle at 35% 30%, #FFFFFF 0 30%, #E6E1D6 100%); box-shadow: 0 1px 1px rgba(0, 0, 0, .45); }
.cs-key.k-h { background: linear-gradient(90deg, #0E0F13 50%, #FFFFFF 50%); box-shadow: 0 1px 1px rgba(0, 0, 0, .45); }
.cs-key.k-0 { background: rgba(0, 0, 0, .45); transform: scale(.5); }
.cs-key.is-new { animation: cs-key .32s var(--ease-out, ease-out) both; }
@keyframes cs-key { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }

/* « Indices à leur place » : une petite fiche au pied de chaque pion */
.cs-pm { position: absolute; right: calc(var(--cell) * -.2); bottom: calc(var(--cell) * -.16); width: calc(var(--cell) * .2); height: calc(var(--cell) * .2); border-radius: 50%; z-index: 1; }
.cs-pm.k-b { background: #0E0F13; box-shadow: 0 0 0 1.5px rgba(232, 226, 212, .8); }
.cs-pm.k-w { background: #FFFFFF; box-shadow: 0 0 0 1.5px rgba(14, 15, 19, .7); }
.cs-pm.k-h { background: linear-gradient(90deg, #0E0F13 50%, #FFFFFF 50%); box-shadow: 0 0 0 1.5px rgba(232, 226, 212, .8); }
.cs-pm.k-0 { display: none; }

/* ---------- Effets de révélation (cosmétique code.playfx), au-dessus du cache ---------- */
.cs-fx-layer { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; z-index: 2; }
.cs-fx { position: absolute; inset: 0; display: grid; place-items: center; }
.cs-fx i { position: absolute; left: 50%; top: 50%; display: block; }
.cs-fx.k-confettis i { width: 9px; height: 5px; border-radius: 1px; background: #FF4F8B; animation: cs-burst 1.1s cubic-bezier(.2, .7, .3, 1) both; }
.cs-fx.k-confettis i[style*="--i:1"] { background: #4FD1FF; }
.cs-fx.k-confettis i[style*="--i:2"] { background: #FFC233; }
.cs-fx.k-pixel i { width: 7px; height: 7px; background: #FFE14D; animation: cs-burst .9s steps(5) both; }
.cs-fx.k-pixel i[style*="--i:1"] { background: #FF7A1A; }
.cs-fx.k-hyper i { width: 46%; height: 2px; margin-top: -1px; transform-origin: 0 50%; background: #22F2FF; border-radius: 2px; rotate: var(--a); animation: cs-streak .8s ease-out both; }
.cs-fx.k-hyper i[style*="--i:1"] { background: #FF2BD6; }
.cs-flap { position: absolute; left: 6%; right: 6%; top: 18%; height: 70%; border-radius: 10px; background: var(--b-shield, #3B3F4C); box-shadow: 0 4px 8px rgba(0, 0, 0, .4); animation: cs-flap .7s var(--ease-out, ease-out) both; }
.cs-lock { position: absolute; left: 50%; top: 4px; width: 40px; height: 46px; margin-left: -20px; animation: cs-pop 1.2s ease-out both; }
.cs-anse { position: absolute; left: 9px; top: 0; width: 22px; height: 24px; border: 5px solid #7A5A2E; border-bottom: 0; border-radius: 12px 12px 0 0; animation: cs-anse .5s .25s ease-out both; }
.cs-corps { position: absolute; left: 2px; bottom: 0; width: 36px; height: 26px; border-radius: 5px; background: #C9A66B; box-shadow: inset 0 -3px 0 #7A5A2E; }
@keyframes cs-burst { from { opacity: 1; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r, 0deg)) scale(1); } }
@keyframes cs-streak { from { opacity: 1; transform: scaleX(0); } 60% { opacity: 1; } to { opacity: 0; transform: scaleX(1) translateX(30%); } }
@keyframes cs-flap { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-120%) scaleY(.4); } }
@keyframes cs-pop { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; transform: scale(1.05); } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes cs-anse { from { transform: none; } to { transform: translateY(-9px); } }

/* ---------- Duel croisé : MON plateau + celui de l'autre sur MON code, en plus petit (.is-mini) ---------- */
.cs-duo { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-height: 0; }
.cs-board[hidden] { display: none; }
/* Rapport de taille du petit plateau : 0,6 en hauteur (téléphone), 0,72 quand la table est large */
.cs-stage.is-croise { --s: .6; }
@container (min-aspect-ratio: 1/1) { .cs-stage.is-croise { --s: .72; } }
/* Les deux plateaux tiennent côte à côte : largeur = (n° + trous + fiches) × case × (1 + s) + marges */
.cs-stage.is-croise .cs-board { --cell: clamp(14px, min(calc((100cqh - 44px) / (var(--rows) + 1.55)), calc((min(100cqw, 1000px) - 52px) / ((var(--pegs) + 2) * (1 + var(--s))))), 60px); }
.cs-stage.is-croise .cs-board.is-mini {
  --cell: calc(clamp(14px, min(calc((100cqh - 44px) / (var(--rows) + 1.55)), calc((min(100cqw, 1000px) - 52px) / ((var(--pegs) + 2) * (1 + var(--s))))), 60px) * var(--s));
  padding: 6px 6px 8px; border-radius: 12px;
}
.cs-board.is-mini .cs-shield { margin-bottom: 4px; border-radius: 8px; }
.cs-board.is-mini .cs-shield-lab { left: 4px; right: 4px; }
.cs-board.is-mini .cs-q { display: none; }
.cs-board.is-mini .cs-n { opacity: .4; }
.cs-board.is-mini .cs-key { width: calc(var(--cell) * .3); height: calc(var(--cell) * .3); }
/* À qui le tour, en un regard : filet jaune autour du plateau qui joue (le mien : à moi ; le petit : à l'autre) */
.cs-board.is-turn { outline: 3px solid var(--accent, #FFC233); outline-offset: 2px; }
/* L'autre remplit sa rangée sur mon code (son essai arrive en direct) */
.cs-board.is-mini .cs-row.is-next { background: color-mix(in srgb, var(--accent, #FFC233) 18%, transparent); border-radius: 6px; }
.cs-board.is-mini .cs-row.is-next .cs-kz::after { content: '…'; font: 700 14px/1 var(--font-display, system-ui); color: var(--b-ink); opacity: .8; }
/* Mon essai préparé pendant le tour de l'autre : rangée plus discrète, trou choisi en pointillé */
.cs-row.is-active.is-prep { background: color-mix(in srgb, var(--accent, #FFC233) 8%, transparent); }
.cs-row.is-prep .cs-hole.is-sel::after { border-style: dashed; }
/* L'essai de l'autre qui arrive : les pions se posent ensemble, puis les fiches (une couche animée chacun) */
/* La rangée que l'autre remplit a ses deux couches prêtes d'avance (une seule rangée à la fois) : l'animation démarre
   sans créer de couche ni repeindre au pire moment (mesuré : 3 images de 33 ms → 0 à CPU ÷ 4) */
.cs-board.is-mini .cs-row.is-next .cs-holes, .cs-board.is-mini .cs-row.is-next .cs-kz { will-change: transform, opacity; }
.cs-board.is-mini .cs-row.is-done .cs-kz::after { content: none; }
.cs-holes.is-drop { animation: cs-drop .3s var(--ease-out, ease-out) both; }
.cs-kz.is-arrive { animation: cs-arrive .3s .25s ease-out both; }
@keyframes cs-drop { from { opacity: 0; transform: translateY(-40%); } to { opacity: 1; transform: none; } }
@keyframes cs-arrive { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: none; } }

/* ---------- ⚡ Mort subite (duel croisé, égalité) : annonce posée sur la table, puis rappel discret ---------- */
/* Annonce : voile sur la table + carte qui « claque » (transform / opacity seulement), le temps de la lire (~2,8 s) */
.cs-sudden { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 12px; pointer-events: none; }
.cs-sudden[hidden] { display: none; }
.cs-sudden::before { content: ''; position: absolute; inset: -8px; border-radius: 18px; background: rgba(12, 13, 18, .62); animation: cs-sd-voile .3s ease-out both; }
.cs-sd-card {
  position: relative; display: grid; justify-items: center; gap: 8px; max-width: min(92%, 420px); padding: 18px 18px 16px; text-align: center;
  border-radius: var(--r-xl, 22px); background: var(--surface, #1F222B); color: var(--text, #F5F2EB);
  border: 3px solid var(--accent, #FFC233); box-shadow: var(--ombre-3, 0 18px 40px -12px rgba(0, 0, 0, .7));
  animation: cs-sd-in .55s cubic-bezier(.2, 1.4, .4, 1) both;
}
.cs-sd-bolt {
  display: grid; place-items: center; width: 64px; height: 64px; margin-top: -48px; border-radius: 50%;
  font: 400 36px/1 var(--font-ui, system-ui); background: var(--accent, #FFC233); box-shadow: 0 0 0 5px var(--surface, #1F222B);
  animation: cs-sd-bolt .9s .2s ease-out both;
}
.cs-sd-t { font: 700 34px/1.05 var(--font-display, system-ui); color: var(--accent-text, #FFC233); }
.cs-sd-why { font: 600 16px/1.3 var(--font-ui, system-ui); color: var(--text, #F5F2EB); }
.cs-sd-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cs-sd-rules i {
  font: 600 13px/1 var(--font-ui, system-ui); font-style: normal; padding: 7px 10px; border-radius: var(--r-pill, 999px);
  background: var(--surface-2, #282C37); border: 1px solid var(--line-2, rgba(255, 255, 255, .18));
}
.cs-sd-first { font: 700 16px/1.2 var(--font-display, system-ui); color: var(--text, #F5F2EB); animation: cs-sd-pop .4s .9s ease-out both; }
@keyframes cs-sd-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-sd-in { from { opacity: 0; transform: scale(.4) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes cs-sd-bolt { 0% { transform: scale(.2); } 45% { transform: scale(1.25) rotate(-10deg); } 70% { transform: scale(.95) rotate(6deg); } 100% { transform: none; } }
@keyframes cs-sd-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Pendant la mort subite : le plateau qui joue est cerclé de rouge « danger » (au lieu du jaune) */
.cs-stage.is-sudden .cs-board.is-turn { outline-color: var(--danger, #FF5A6E); }
.cs-stage.is-sudden .cs-board:not(.is-mini) .cs-shield-lab { opacity: 1; }

/* ---------- Ma zone : palette, outils ---------- */
.cs-dock { display: grid; gap: 8px; }
.cs-palette { --n: 6; --pc: 6; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
.cs-pal {
  height: 42px; border-radius: 12px; display: grid; place-items: center; padding: 0; --pd: 30px; --cell: 40px;
  background: var(--surface-2, rgba(255, 255, 255, .08)); border: 1px solid var(--line, rgba(255, 255, 255, .12));
}
.cs-pal .cs-peg.is-digit { font-size: 19px; }
.cs-pal:active { transform: scale(.92); transition-duration: 0s; }
.cs-pal[aria-disabled="true"] { opacity: .4; }
.cs-palette.is-off { pointer-events: none; }
.cs-tools { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.cs-tools .cs-sp { flex: 1; }
.cs-tool {
  height: 36px; padding: 0 11px; border-radius: var(--r-pill, 999px); font: 600 .85rem/1 var(--font-ui, system-ui); white-space: nowrap;
  color: var(--text, #F5F2EB); background: var(--surface-2, rgba(255, 255, 255, .08)); border: 1px solid var(--line, rgba(255, 255, 255, .12));
}
.cs-tool[hidden] { display: none; }
.cs-tool:disabled { opacity: .4; }
.cs-tool[aria-pressed="true"] { color: var(--on-accent, #1B1608); background: var(--accent, #FFC233); border-color: transparent; }
.cs-tool:active { transform: scale(.94); transition-duration: 0s; }
.cs-go.is-auto { background: var(--ok, #3FD18A); }

/* ---------- Pastille des joueurs : progression ---------- */
.cs-prog { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-prog:empty { display: none; }
.cs-mk { display: inline-flex; gap: 2px; }
.cs-mk { padding: 2px 3px; border-radius: 5px; background: #7C808C; } /* plaque grise : noires et blanches lisibles en clair comme en sombre */
.cs-mk:empty { display: none; }
.cs-mk i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.cs-mk .k-b { background: #0E0F13; }
.cs-mk .k-w { background: #FFFFFF; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .4); }
.cs-mk .k-h { background: linear-gradient(90deg, #0E0F13 50%, #FFFFFF 50%); }
.cs-prog.is-bump { animation: cs-bump .4s ease-out; }
@keyframes cs-bump { 40% { transform: scale(1.18); } }

/* Téléphone très étroit : outils compacts */
@media (max-width: 380px) { .cs-tool { padding: 0 9px; font-size: .8rem; } }
/* Ma zone en colonne (paysage bas, grand écran) : palette en 5 colonnes au plus */
/* Ma zone en colonne (paysage bas, grand écran) : au-delà de 6 symboles, la palette passe sur 2 lignes */
@media (orientation: landscape) and (max-height: 500px), (min-width: 1024px) and (min-height: 600px) {
  .cs-palette { grid-template-columns: repeat(var(--pc), minmax(0, 1fr)); }
  .cs-tools { flex-wrap: wrap; }
}
/* Paysage bas : ma zone tient dans la hauteur (outils en icônes, gros bouton sur une ligne) */
@media (orientation: landscape) and (max-height: 500px) {
  .cs-pal { height: 34px; --pd: 25px; }
  .cs-tools { flex-wrap: nowrap; gap: 4px; min-height: 32px; }
  .cs-tool { height: 32px; padding: 0 10px; }
  .cs-tl { display: none; }
  .cs-dock { gap: 6px; }
  .cs-go { min-height: 44px; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Grand écran : gros bouton sur une ligne */
@media (min-width: 1024px) and (min-height: 600px) { .cs-go { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem; } }

/* Mouvement réduit / perf-lite : pas de clignotement ni d'éclats (l'information reste : fiches, code dévoilé) */
@media (prefers-reduced-motion: reduce) { .cs-key.is-new, .cs-prog.is-bump, .cs-holes.is-drop, .cs-kz.is-arrive, .cs-sudden::before, .cs-sd-card, .cs-sd-bolt, .cs-sd-first { animation: none !important; } .cs-fx { display: none; } }
.perf-lite .cs-fx.k-confettis i:nth-child(n+7), .perf-lite .cs-fx.k-pixel i:nth-child(n+7) { display: none; }