/* =========================================================================
   POTOS — COLONNES : la table (js/colonnes-game.js, socle css/jeu-socle.css, charte css/theme.css).
   La table (.jx-zone, conteneur de requêtes) contient : les grilles des adversaires en petit (en haut), la pioche,
   la défausse et la carte piochée (au centre), MA grille en grand (en bas). Tailles des cartes calculées avec les
   unités du conteneur (cqw / cqh) : tout tient sans défiler, du téléphone (375 × 812) au grand écran. Table large
   (paysage, grand écran) : adversaires en haut, pioche à gauche, ma grille à droite.
   Cartes = composant de la charte .sj-carte (rapport 5:7, dos .is-dos) ; couleurs de face posées par la vue
   (--cbg, --cink, --cline) d'après la face équipée ; motifs de dos d'après le dos équipé (--dos-1/2/3).
   Fluidité (docs/fluidite.md) : seuls transform et opacity bougent ; ombres et dégradés peints une fois.
   ========================================================================= */
.jx-colonnes { --g: #1F9E89; }
.jx-colonnes .jx-zone { container-type: size; padding: 8px; }

.co-stage {
  --gap: 6px;
  --ho: 26cqh;                                  /* hauteur des grilles adverses */
  --hc: 19cqh;                                  /* hauteur du centre (pioche, défausse, carte piochée) */
  --hm: calc(100cqh - var(--ho) - var(--hc) - 2 * var(--gap)); /* hauteur de ma grille */
  --per: 3;                                     /* grilles adverses visibles sur la largeur (au-delà : on fait glisser) */
  /* ma carte : la plus grande qui tient en largeur ET en hauteur */
  --cw: min(calc((100cqw - 4px - (var(--cols) - 1) * var(--gap)) / var(--cols)), calc((var(--hm) - (var(--rows) - 1) * var(--gap)) / var(--rows) / 1.4), 112px);
  --cwc: min(calc((var(--hc) - 20px) / 1.4), calc(100cqw / 5.2), 96px);
  --cwo: min(calc((var(--ho) - 24px - (var(--rows) - 1) * 3px) / var(--rows) / 1.4), calc((100cqw / var(--per) - 16px - (var(--cols) - 1) * 3px) / var(--cols)), 62px);
  position: relative; width: 100%; height: 100%;
  display: grid; gap: var(--gap);
  grid-template: "opps" var(--ho) "centre" var(--hc) "mine" minmax(0, 1fr) / minmax(0, 1fr);
}
.co-stage[data-opps="1"] { --ho: 27cqh; --per: 1; }
.co-stage[data-opps="2"] { --per: 2; }
.co-stage[data-opps="3"] { --per: 3; }
.co-stage.is-spectateur { --ho: 70cqh; --per: 2.2; }

/* Largeurs de cartes ARRONDIES à des paliers fixes : peu de tailles de texte différentes, toutes préchauffées
   (docs/fluidite.md §10 : chaque police × taille neuve coûte une fonte à froid). Navigateur sans round() : continu. */
@supports (width: round(down, 10px, 4px)) {
  .co-stage { --cw-q: round(down, var(--cw), 4px); --cwc-q: round(down, var(--cwc), 4px); --cwo-q: round(down, var(--cwo), 2px); }
}

/* ---------- Adversaires ---------- */
.co-opps {
  grid-area: opps; min-height: 0; display: flex; gap: 8px; justify-content: safe center; align-items: stretch;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; padding: 0 2px;
}
.co-opps::-webkit-scrollbar { display: none; }
.co-stage.is-spectateur .co-opps { flex-wrap: wrap; overflow-y: auto; }
.co-opp {
  position: relative; flex: none; display: grid; grid-template-rows: auto 1fr; gap: 3px; align-content: start; justify-items: center;
  padding: 4px 6px 6px; border-radius: 12px; scroll-snap-align: center;
  background: rgba(0, 0, 0, .16); border: 1px solid rgba(255, 255, 255, .1); color: #F5F2EB;
}
.co-opp.is-tour { border-color: var(--accent, #FFC233); box-shadow: 0 0 0 1px var(--accent, #FFC233); }
.co-opp.is-out { opacity: .45; }
.co-opp.is-cible { border-color: var(--accent, #FFC233); box-shadow: 0 0 0 2px var(--accent, #FFC233); }
.co-opp:active { transform: scale(.97); transition-duration: 0s; }
.co-opp-head { display: flex; gap: 6px; align-items: baseline; max-width: 100%; font: 600 11.5px/1.2 var(--font-ui, system-ui); }
.co-opp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9em; }
.co-opp-sum { font: 700 11.5px/1.2 var(--font-display, system-ui); color: #FFE7A3; }

/* ---------- Grilles ---------- */
.co-grid { display: grid; grid-template-columns: repeat(var(--cols), var(--w)); gap: var(--g); justify-content: center; align-content: center; }
.co-grid .co-card { --carte-w: var(--w); width: var(--w); }
.co-grid.is-me { --w: var(--cw-q, var(--cw)); --g: var(--gap); }
.co-grid.is-mini { --w: var(--cwo-q, var(--cwo)); --g: 3px; }
.co-grid.is-loupe { --w: min(64px, calc((min(92vw, 420px) - 60px) / var(--cols))); --g: 6px; margin: 4px auto 12px; }
.co-mine { grid-area: mine; min-height: 0; display: grid; place-items: center; }

.co-cell {
  position: relative; display: block; padding: 0; border: 0; background: none; border-radius: calc(var(--w) * .09);
  -webkit-tap-highlight-color: transparent; transition: transform .14s var(--ease-out, ease-out);
}
.co-cell[aria-disabled="true"] { cursor: default; }
.co-cell.is-cible { cursor: pointer; transform: translateY(-3px); }
.co-cell.is-cible > .co-card { box-shadow: 0 0 0 2px var(--accent, #FFC233), var(--ombre-levee, 0 10px 18px -8px rgba(0, 0, 0, .6)); }
/* Carte choisie au doigt (2e toucher = valider) : levée, cerclée plus fort, aperçu de ce qui va se passer */
.co-cell.is-sel { transform: translateY(-9px); }
.co-cell.is-sel > .co-card { box-shadow: 0 0 0 3px var(--accent, #FFC233), 0 0 0 6px rgba(var(--accent-rgb, 255 194 51) / .35), var(--ombre-levee, 0 10px 18px -8px rgba(0, 0, 0, .6)); }
.co-apercu {
  position: absolute; left: 50%; bottom: 8%; z-index: 2; transform: translateX(-50%); /* peut déborder de la carte : jamais tronqué */
  padding: 3px 6px; border-radius: var(--r-pill, 999px); white-space: nowrap; pointer-events: none;
  font: 700 11px/1.15 var(--font-ui, system-ui); color: var(--on-accent, #1B1608); background: var(--accent, #FFC233); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .12s;
}
.co-apercu:empty { display: none; }
.co-cell.is-sel .co-apercu { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .co-cell.is-cible:hover .co-apercu { opacity: 1; } }
.co-cell:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .co-cell.is-cible:hover { transform: translateY(-6px); } }
.co-cell:active { transform: scale(.96); transition-duration: 0s; }

/* ---------- Une carte ---------- */
.co-card { display: grid; place-items: center; position: relative; aspect-ratio: 5 / 7; transform-origin: 50% 50%; }
.co-card.sj-carte:where(:not(.is-dos)) { background: var(--cbg, var(--papier, #FBF8F1)); color: var(--cink, #1E1F26); }
.co-card.sj-carte:not(.is-dos)::before { border-color: color-mix(in srgb, var(--cline, #fff) 45%, transparent); }
.co-card.is-vide { border-radius: calc(var(--carte-w, 60px) * .09); border: 2px dashed rgba(255, 255, 255, .22); }
.co-card.is-gone { border-radius: calc(var(--carte-w, 60px) * .09); border: 1px dashed rgba(255, 255, 255, .12); }
.co-card b { font-weight: 700; } /* Fredoka 700 (police chargée), jamais un gras synthétique */
.co-card .sj-valeur { font-size: calc(var(--carte-w) * .5); }
/* 6 et 9 soulignés, comme sur les vraies cartes (à l'envers, un 9 ressemble à un 6) */
.co-card.is-souligne .sj-valeur, .co-card.is-souligne .sj-coin { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .08em; }
.co-card.is-long .sj-valeur { font-size: calc(var(--carte-w) * .38); }
.co-card .sj-coin { font-size: calc(var(--carte-w) * .19); }
@supports (font-size: round(10.4px, 1px)) {
  .co-card .sj-coin { font-size: round(calc(var(--carte-w) * .19), 1px); }
  .co-card .sj-valeur { font-size: round(calc(var(--carte-w) * .5), 2px); }
  .co-card.is-long .sj-valeur { font-size: round(calc(var(--carte-w) * .38), 2px); }
}
.co-card.is-joker { background: radial-gradient(circle at 50% 45%, #FFF6D6 0 35%, #FBF8F1 70%); color: #B8860B; }
/* mini-grilles : pas de petits coins (illisibles), juste le chiffre */
.co-grid.is-mini .co-card .sj-coin { display: none; }
.co-grid.is-mini .co-card .sj-valeur { font-size: max(11px, calc(var(--carte-w) * .56)); }
@supports (font-size: round(10.4px, 1px)) {
  .co-grid.is-mini .co-card .sj-valeur { font-size: max(11px, round(calc(var(--carte-w) * .56), 1px)); } /* jamais sous 11 px (charte) */
}
.co-grid.is-mini .co-card.sj-carte { box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .5); }

/* Faces (cosmétique colonnes.cardface) */
.co-card.co-face-papier { background: linear-gradient(180deg, var(--cline) 0 15%, #FBF8F1 15%); }
.co-card.co-face-papier .sj-coin:not(.is-bas) { color: #FFFFFF; }
.co-card.co-face-ardoise { background: linear-gradient(160deg, #3A4A45, #2E3B37 60%, #26312E); }
.co-card.co-face-ardoise::before { border-style: dashed; }
.co-card.co-face-pixel { border-radius: calc(var(--carte-w) * .03); font-family: ui-monospace, 'Courier New', monospace; background: #121418; border: 2px solid var(--cline); }
.co-card.co-face-pixel .sj-valeur, .co-card.co-face-pixel .sj-coin { font-family: ui-monospace, 'Courier New', monospace; font-weight: 700; }
.co-card.co-face-neon { background: #0B0E2A; border: 1.5px solid var(--cline); }
.co-card.co-face-neon .sj-valeur { text-shadow: 0 0 calc(var(--carte-w) * .1) var(--cink); }

/* Dos (cosmétique colonnes.cardback) : motifs peints une fois */
.co-card.is-dos.co-dos-barres {
  background:
    linear-gradient(90deg, transparent 22%, var(--dos-3) 22% 30%, transparent 30% 46%, var(--dos-3) 46% 54%, transparent 54% 70%, var(--dos-3) 70% 78%, transparent 78%) center / 74% 58% no-repeat,
    radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--dos-1) 80%, #fff), var(--dos-1) 55%, var(--dos-2));
}
.co-card.is-dos.co-dos-rayures { background: repeating-linear-gradient(45deg, var(--dos-1) 0 6px, var(--dos-2) 6px 12px); }
.co-card.is-dos.co-dos-vagues { background: repeating-linear-gradient(170deg, var(--dos-1) 0 9%, var(--dos-2) 9% 13%, var(--dos-1) 13% 20%, var(--dos-3) 20% 22%); }
.co-card.is-dos.co-dos-damier { background: conic-gradient(var(--dos-2) 25%, var(--dos-1) 0 50%, var(--dos-2) 0 75%, var(--dos-1) 0) 0 0 / 34% 24%; }
.co-card.is-dos.co-dos-etoiles {
  background:
    radial-gradient(circle at 22% 20%, var(--dos-3) 0 2.5%, transparent 3.5%), radial-gradient(circle at 72% 16%, var(--dos-3) 0 1.5%, transparent 2.5%),
    radial-gradient(circle at 48% 46%, var(--dos-3) 0 3%, transparent 4%), radial-gradient(circle at 80% 62%, var(--dos-3) 0 1.6%, transparent 2.6%),
    radial-gradient(circle at 26% 76%, var(--dos-3) 0 1.8%, transparent 2.8%), radial-gradient(circle at 62% 86%, var(--dos-3) 0 2.4%, transparent 3.4%),
    radial-gradient(130% 100% at 30% 20%, var(--dos-2), var(--dos-1) 70%);
}

/* ---------- Centre : pioche, défausse, carte piochée ---------- */
.co-centre { grid-area: centre; min-height: 0; display: flex; align-items: center; justify-content: center; gap: max(12px, 4cqw); }
.co-pile, .co-disc, .co-hand { position: relative; padding: 0; border: 0; background: none; border-radius: 10px; color: inherit; -webkit-tap-highlight-color: transparent; transition: transform .14s var(--ease-out, ease-out); }
/* Légendes SOUS les tas (Pioche, Défausse, Ta carte piochée) : le dessus reste libre pour la carte en main, agrandie */
.co-lbl { display: block; max-width: calc(var(--wc) * 2.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10.5px/1.2 var(--font-ui, system-ui); color: rgba(245, 242, 235, .88); }
.co-pile, .co-disc, .co-hand { --wc: var(--cwc-q, var(--cwc)); }
.co-pile .co-card, .co-disc .co-card, .co-hand .co-card { --carte-w: var(--wc); width: var(--wc); }
.co-pile-card::before { /* l'épaisseur du paquet */
  content: ""; position: absolute; inset: 0; border-radius: calc(var(--wc) * .09); background: #D9D2C3; transform: translate(3px, 3px);
  box-shadow: 1.5px 1.5px 0 #BDB4A2;
}
.co-count {
  position: absolute; right: -8px; bottom: -6px; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  font: 700 11px/1 var(--font-display, system-ui); color: var(--text, #F5F2EB); background: var(--surface, #1F222B); border: 1px solid var(--line-2, rgba(255, 255, 255, .18));
}
.co-pile.is-cible, .co-disc.is-cible { cursor: pointer; }
.co-pile.is-cible .co-card, .co-disc.is-cible .co-card { box-shadow: 0 0 0 2px var(--accent, #FFC233), var(--ombre-levee, 0 10px 18px -8px rgba(0, 0, 0, .6)); }
.co-disc.is-sel { transform: translateY(-8px) rotate(-3deg); }
.co-disc.is-sel .co-card { box-shadow: 0 0 0 3px var(--accent, #FFC233), var(--ombre-levee, 0 10px 18px -8px rgba(0, 0, 0, .6)); }
.co-pile:active, .co-disc:active { transform: scale(.95); transition-duration: 0s; }
.co-pile:focus-visible, .co-disc:focus-visible, .co-hand:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.co-pile, .co-disc, .co-hand { display: grid; justify-items: center; align-content: center; gap: 4px; }
.co-pile-card { position: relative; display: block; }
/* La défausse prise est EN MAIN (montrée en grand) : sa place sur la défausse s'estompe */
.co-disc.is-prise .co-card { opacity: .3; }
.co-hand { opacity: .35; transition: opacity .2s; }
.co-hand.is-on { opacity: 1; z-index: 3; }
.co-hand .co-card.is-vide { border-style: dashed; }
.co-hand-who { min-height: 12.6px; }
/* La carte EN MAIN, en gros : agrandie vers le haut (la légende reste dessous), cerclée quand c'est la mienne */
.co-hand.is-on .co-card { transform-origin: 50% 100%; transform: scale(1.3) rotate(3deg); }
@container (min-width: 520px) { .co-hand.is-on .co-card { transform: scale(1.14) rotate(3deg); } } /* grande table haute : ne cache pas les grilles adverses */
.co-hand.is-moi .co-card { box-shadow: 0 0 0 2px var(--accent, #FFC233), var(--ombre-levee, 0 10px 18px -8px rgba(0, 0, 0, .6)); }
.co-hand.is-moi .co-hand-who { color: #FFE7A3; }

/* ---------- Bulle d'explication (un geste qui ne veut rien dire à cette étape) ---------- */
.co-aide {
  position: absolute; left: 50%; bottom: 6px; z-index: 7; width: max-content; max-width: min(94%, 420px); margin: 0;
  padding: 9px 14px; border-radius: 14px; text-align: center; pointer-events: none;
  font: 600 13.6px/1.3 var(--font-ui, system-ui); color: var(--text, #F5F2EB); background: var(--surface, #1F222B);
  border: 1px solid var(--accent, #FFC233); box-shadow: var(--ombre-3, 0 18px 40px -14px rgba(0, 0, 0, .7));
  opacity: 0; transform: translate(-50%, 10px); transition: opacity .18s, transform .18s var(--ease-out, ease-out);
}
.co-aide.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Cartes qui volent, particules ---------- */
.co-fly { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.co-flycard { position: absolute; transform-origin: 0 0; will-change: transform; }
.co-part { position: absolute; width: 9px; height: 9px; background: var(--p); pointer-events: none; }
.co-part.is-etoiles { width: auto; height: auto; background: none; color: var(--p); font: 700 15px/1 system-ui, sans-serif; }
.co-part.is-pixel { border-radius: 0; }

/* ---------- Feuille de fin de manche, scores, loupe ---------- */
.co-panel { position: absolute; inset: -8px; z-index: 6; display: grid; place-items: center; padding: 12px; background: rgba(0, 0, 0, .45); }
.co-panel[hidden] { display: none; }
.co-panel-card {
  width: min(400px, 100%); max-height: 100%; overflow: auto; padding: 14px 16px; border-radius: var(--r-xl, 22px); text-align: center;
  color: var(--text, #F5F2EB); background: var(--surface, #1F222B); border: 1px solid var(--line, rgba(255, 255, 255, .12)); box-shadow: var(--ombre-3, 0 18px 40px -14px rgba(0, 0, 0, .7));
}
.co-panel-card h3 { font: 700 1.25rem/1.2 var(--font-display, system-ui); margin: 2px 0 2px; }
.co-panel-sub { font: 500 .85rem/1.35 var(--font-ui, system-ui); color: var(--muted, #B9BCC8); }
.co-panel-sub.is-double { font-weight: 600; color: var(--danger-text, #FF5A6E); }
.co-panel-foot { margin: 8px 0 6px; font: 500 .75rem/1.3 var(--font-ui, system-ui); color: var(--faint, #969BAD); }
.co-score { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.co-score li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 3.2em; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--surface-2, rgba(255, 255, 255, .06)); }
.co-score li.is-moi { background: color-mix(in srgb, var(--accent, #FFC233) 18%, var(--surface, #1F222B)); }
.co-rk { font: 700 .85rem/1 var(--font-display, system-ui); color: var(--muted, #B9BCC8); text-align: center; }
.co-nm { display: grid; min-width: 0; font: 600 .9rem/1.2 var(--font-ui, system-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-hist { font: 500 .72rem/1.2 var(--font-ui, system-ui); color: var(--muted, #B9BCC8); overflow: hidden; text-overflow: ellipsis; }
.co-pts { font: 600 .85rem/1 var(--font-display, system-ui); color: var(--muted, #B9BCC8); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-pts.is-double { color: var(--danger-text, #FF5A6E); }
.co-pts s { opacity: .7; }
.co-tt { font: 700 1.05rem/1 var(--font-display, system-ui); text-align: right; font-variant-numeric: tabular-nums; }
.co-loupe .co-cell.is-cible { cursor: pointer; }

/* ---------- Ma zone : mes infos ---------- */
.jx-colonnes .cj-moi { min-width: 0; grid-template-columns: minmax(0, 1fr); } /* ma zone ne s’élargit jamais au-delà de sa colonne (paysage) */
.co-infos { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 2px; min-width: 0; overflow: hidden; font: 500 .8rem/1 var(--font-ui, system-ui); color: var(--muted, #B9BCC8); }
.co-info { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.co-info i { font-style: normal; }
.co-info b { font: 700 1.1rem/1 var(--font-display, system-ui); color: var(--text, #F5F2EB); font-variant-numeric: tabular-nums; }
.co-info em { font-style: normal; font: 600 .78rem/1 var(--font-ui, system-ui); }
.co-chip {
  height: 32px; min-width: 40px; padding: 0 10px; border-radius: var(--r-pill, 999px); font: 600 .8rem/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));
}
.co-infos > .co-info:nth-child(2) { margin-right: auto; }
.co-chip[hidden] { display: none; }
.co-chip[aria-disabled="true"] { opacity: .5; }
.co-chip.is-on { color: var(--on-accent, #1B1608); background: var(--accent, #FFC233); border-color: transparent; }
.co-chip:active { transform: scale(.95); transition-duration: 0s; }

/* ---------- Pastilles des joueurs (barre du socle) ---------- */
.co-badge { font: 600 .72rem/1 var(--font-ui, system-ui); white-space: nowrap; }
.co-badge b { font: 700 .82rem/1 var(--font-display, system-ui); color: var(--text, #F5F2EB); font-variant-numeric: tabular-nums; }
.co-tag { font: 600 .72rem/1 var(--font-ui, system-ui); white-space: nowrap; }

/* ---------- Tapis (cosmétique colonnes.table) : motifs peints une fois, par-dessus le feutre ---------- */
.jx-zone.co-tapis-bois { background: repeating-linear-gradient(176deg, transparent 0 22px, rgba(60, 30, 10, .18) 22px 24px, transparent 24px 41px), radial-gradient(130% 95% at 50% 35%, var(--tapis-clair) 0%, var(--tapis) 55%, var(--tapis-2) 100%); }
.jx-zone.co-tapis-arcade {
  background:
    radial-gradient(circle at 12% 18%, #22F2FF 0 3px, transparent 4px), radial-gradient(circle at 84% 22%, #FFE14D 0 3px, transparent 4px),
    radial-gradient(circle at 30% 78%, #FF2BD6 0 3px, transparent 4px), radial-gradient(circle at 72% 70%, #3FFF8F 0 3px, transparent 4px),
    radial-gradient(130% 95% at 50% 35%, var(--tapis-clair) 0%, var(--tapis) 55%, var(--tapis-2) 100%);
  background-size: 120px 120px, 140px 140px, 110px 110px, 150px 150px, auto;
}
.jx-zone.co-tapis-nebuleuse {
  background:
    radial-gradient(40% 35% at 30% 35%, rgba(150, 80, 220, .45), transparent 70%), radial-gradient(35% 30% at 72% 68%, rgba(60, 120, 220, .4), transparent 70%),
    radial-gradient(circle at 15% 80%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 85% 15%, #fff 0 1px, transparent 1.5px),
    radial-gradient(130% 95% at 50% 35%, var(--tapis-clair) 0%, var(--tapis) 55%, var(--tapis-2) 100%);
}

/* ---------- Table large (paysage, grand écran) : adversaires en haut, pioche à gauche, ma grille à droite ---------- */
@container (min-aspect-ratio: 23 / 20) {
  .co-stage {
    --ho: 32cqh;
    --hm: calc(100cqh - var(--ho) - var(--gap));
    --per: 3.6;
    --cw: min(calc((70cqw - 4px - (var(--cols) - 1) * var(--gap)) / var(--cols)), calc((var(--hm) - (var(--rows) - 1) * var(--gap)) / var(--rows) / 1.4), 124px);
    /* pioche et défausse côte à côte, la carte en main dessous, 1,5 fois plus grande */
    --cwc: min(calc((var(--hm) - 50px) / 3.5), calc((28cqw - 18px) / 2), 90px);
    --wh: calc(var(--cwc-q, var(--cwc)) * 1.5);
    grid-template: "opps opps" var(--ho) "centre mine" minmax(0, 1fr) / minmax(0, 28%) minmax(0, 1fr);
  }
  .co-stage[data-opps="1"] { --per: 1.6; }
  .co-stage[data-opps="2"] { --per: 2.2; }
  .co-stage[data-opps="3"] { --per: 3.2; }
  .co-centre { flex-direction: column; gap: 8px; min-width: 0; }
  .co-lbl { max-width: 100%; }
  /* table large : pioche et défausse côte à côte, la carte en main dessous, en grand */
  .co-centre { display: grid; grid-template: "pile disc" auto "hand hand" auto / auto auto; justify-content: center; align-content: center; column-gap: 10px; row-gap: 14px; }
  .co-pile { grid-area: pile; } .co-disc { grid-area: disc; } .co-hand { grid-area: hand; }
  .co-hand .co-card { --carte-w: var(--wh); width: var(--wh); }
  .co-hand.is-on .co-card { transform: rotate(3deg); }
}
/* Très grande table : la pioche se rapproche de ma grille */
@container (min-aspect-ratio: 23 / 20) and (min-width: 900px) {
  .co-centre { justify-self: end; padding-right: 3cqw; }
}

/* Mouvement réduit / perf-lite : pas de petit saut au survol (les cartes volent toujours : elles portent l'information) */
@media (prefers-reduced-motion: reduce) { .co-cell, .co-pile, .co-disc, .co-hand, .co-aide, .co-apercu { transition: none; } }
.perf-lite .co-cell, .perf-lite .co-hand { transition: none; }
.perf-lite .co-card.co-face-neon .sj-valeur { text-shadow: none; }

/* Paysage bas : ma zone est étroite, mes infos se resserrent */
@media (orientation: landscape) and (max-height: 500px) {
  .co-infos { gap: 6px; font-size: .74rem; }
  .co-info em { display: none; } /* cartes cachées et cible : déjà visibles sur la table */
  .co-chip { min-width: 34px; padding: 0 8px; }
}
.co-panel-card .co-revoir { margin: 0 0 8px; }
/* Téléphone étroit : 🎓 📋 ⚙️ tiennent dans la ligne de mes infos (sans rien couper) */
@media (max-width: 400px) { .co-infos { gap: 7px; } .co-chip { min-width: 34px; padding: 0 7px; } }

/* ---------- ⚙️ Préférences du joueur (« Confirmer en 2 touchers », 15/11) ---------- */
.co-pref {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 12px 0; padding: 10px 12px; text-align: left;
  border-radius: var(--r-md, 12px); color: var(--text, #F5F2EB); background: var(--surface-2, #282C37); border: 1px solid var(--line, rgba(255, 255, 255, .12));
}
.co-pref-t { display: grid; gap: 3px; flex: 1; min-width: 0; }
.co-pref-t b { font: 600 .95rem/1.2 var(--font-ui, system-ui); }
.co-pref-t small { font: 500 .78rem/1.3 var(--font-ui, system-ui); color: var(--muted, #B9BCC8); }
.co-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--r-pill, 999px); background: var(--surface-3, #333845); border: 1px solid var(--line-2, rgba(255, 255, 255, .18)); }
.co-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted, #B9BCC8); transition: transform var(--d-rapide, .12s) ease-out; }
.co-pref[aria-checked="true"] .co-sw { background: var(--accent, #FFC233); border-color: transparent; }
.co-pref[aria-checked="true"] .co-sw::after { transform: translateX(18px); background: var(--on-accent, #1B1608); }
.co-pref:active { transform: scale(.98); transition-duration: 0s; }

/* Le gros bouton ne change jamais de taille (une ligne, nom tronqué si besoin).
   En bloc (et non en boîte flexible) : sinon « … » ne s'affiche pas et le texte est coupé net (« Retourner au hasar »,
   QA du 15/11, paysage 812 × 375). */
.jx-colonnes .co-act { display: block; padding-block: 0; line-height: 56px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (orientation: landscape) and (max-height: 500px) {
  .jx-colonnes .co-act { font-size: 1rem; padding-inline: .5em; line-height: 46px; min-height: 48px; }
}


/* ---------- Ma zone : LES DEUX gros boutons du tour (retours de Florian du 14/11 §1.3) ----------
   « Piocher » / « Prendre le 12 », puis « ✋ Garder et échanger » / « 🗑️ Jeter et retourner une carte ». Téléphone en
   hauteur : côte à côte (texte sur 2 lignes au besoin) ; ma zone à droite (paysage, grand écran) : l'un sous l'autre.
   Un seul bouton (attente, mise en place) : il prend toute la place, ma zone ne change jamais de taille. */
.co-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.co-acts.is-solo .co-act { grid-column: 1 / -1; }
.co-acts.is-solo .co-sec { display: none; }
.jx-colonnes .co-acts:not(.is-solo) .co-act, .jx-colonnes .co-sec {
  display: grid; place-items: center; min-height: 56px; padding: 4px 8px; white-space: normal; line-height: 1.12; text-wrap: balance;
  font: 600 1rem/1.12 var(--font-display, system-ui); overflow: hidden;
}
/* grisé SANS filtre (filter: saturate du socle = repeinture coûteuse des deux gros boutons à chaque coup envoyé) */
.jx-colonnes .co-sec[aria-disabled="true"] { opacity: .55; filter: none; }
.jx-colonnes .co-act[aria-disabled="true"][data-k="guide"] { opacity: .8; } /* « 👆 Touche… » : un guide, pas une panne */
@media (orientation: landscape) and (max-height: 500px), (min-width: 1024px) and (min-height: 600px) {
  .co-acts { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .co-acts.is-solo .co-act { grid-column: auto; }
  .co-acts.is-solo .co-sec { display: grid; visibility: hidden; } /* la place reste : rien ne bouge */
  .jx-colonnes .co-sec { min-height: 44px; }
  .co-chip[data-co="tuto"], .co-chip[data-co="prefs"] { display: none; } /* ma zone à droite, étroite : tutoriel et préférences restent dans 📋 */
}
@media (orientation: landscape) and (max-height: 500px) {
  .jx-colonnes .co-acts:not(.is-solo) .co-act { min-height: 48px; }
  .jx-colonnes .co-sec { min-height: 40px; font-size: .9rem; }
}

/* ---------- Tutoriel animé (js/colonnes-tuto.js) : 4 scènes jouées une fois, « Revoir » les rejoue ---------- */
.co-tuto { position: fixed; inset: 0; z-index: 96; /* une fenêtre, comme les règles (au-dessus des toasts, z 88) */ display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.co-tuto-carte {
  width: min(372px, 100%); max-height: 100%; overflow: auto; padding: 14px 16px 10px; border-radius: var(--r-xl, 22px); text-align: center;
  color: var(--text, #F5F2EB); background: var(--surface, #1F222B); border: 1px solid var(--line, rgba(255, 255, 255, .12)); box-shadow: var(--ombre-3, 0 18px 40px -14px rgba(0, 0, 0, .7));
}
.co-tuto-kicker { margin: 0; font: 600 .75rem/1.2 var(--font-ui, system-ui); color: var(--muted, #B9BCC8); }
.co-tuto-carte h2 { margin: 2px 0 8px; font: 700 1.3rem/1.2 var(--font-display, system-ui); }
.co-tuto-scene {
  position: relative; width: 300px; height: 170px; margin: 0 auto; border-radius: 14px; overflow: hidden; contain: layout paint;
  background: radial-gradient(130% 95% at 50% 35%, var(--tapis-clair, #2A8A62) 0%, var(--tapis, #1E6A4B) 55%, var(--tapis-2, #15513A) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}
.co-tuto-c { position: absolute; transform-origin: 0 0; }
.co-tuto-c .sj-coin, .co-tuto-m .sj-coin { display: none; } /* petites cartes : le chiffre seul (jamais de texte sous 11 px) */
.co-tuto-lbl { position: absolute; transform: translateX(-50%); white-space: nowrap; font: 600 10.5px/1.2 var(--font-ui, system-ui); color: rgba(245, 242, 235, .88); }
.co-tuto-bulle {
  position: absolute; left: 50%; bottom: 7px; z-index: 60; transform: translateX(-50%); max-width: 94%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 4px 11px; border-radius: var(--r-pill, 999px); font: 600 12px/1.25 var(--font-ui, system-ui); color: #1E1F26; background: #FBF8F1; box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .5);
}
.co-tuto-fin { position: absolute; inset: 10px 10px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-tuto-j { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 6px 4px; border-radius: 10px; background: rgba(0, 0, 0, .16); color: #F5F2EB; }
.co-tuto-j > b { font: 700 13px/1.2 var(--font-display, system-ui); }
.co-tuto-mini { display: flex; gap: 3px; }
.co-tuto-m { width: 30px; }
.co-tuto-j em { min-height: 22px; padding: 2px 8px; border-radius: var(--r-pill, 999px); font: 600 12px/1.5 var(--font-ui, system-ui); font-style: normal; color: #F5F2EB; }
.co-tuto-j em b { font: 700 16px/1 var(--font-display, system-ui); }
.co-tuto-j em.is-double { color: #FFFFFF; background: #E5383B; }
.co-tuto-texte { min-height: 5.6em; margin: 10px 2px 6px; font: 500 .92rem/1.4 var(--font-ui, system-ui); color: var(--text, #F5F2EB); text-align: left; }
.co-tuto-points { display: flex; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.co-tuto-points i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2, rgba(255, 255, 255, .18)); }
.co-tuto-points i.is-on { background: var(--accent, #FFC233); }
.co-tuto-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.co-tuto-liens { display: flex; justify-content: space-between; margin: 8px 0 0; }
.co-tuto-liens .link-btn { min-height: 36px; padding: 0 4px; font: 600 .85rem/1 var(--font-ui, system-ui); color: var(--accent-text, var(--accent, #FFC233)); background: none; border: 0; }
@media (max-height: 520px) {
  .co-tuto { padding: 8px; }
  .co-tuto-carte { width: min(640px, 100%); display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 14px; align-items: start; text-align: left; padding: 10px 14px; }
  .co-tuto-carte > .co-tuto-kicker, .co-tuto-carte > h2 { grid-column: 2; }
  .co-tuto-scene { grid-column: 1; grid-row: 1 / span 6; }
  .co-tuto-texte, .co-tuto-points, .co-tuto-btns, .co-tuto-liens { grid-column: 2; }
  .co-tuto-texte { margin-top: 0; min-height: 0; font-size: .85rem; }
  .co-tuto-points { justify-content: flex-start; }
}

/* ---------- Version JUNIOR : cartes fruits (ColonnesDecks.fruitSVG), colonnes pareilles qui RAPPORTENT ----------
   La carte : fond teinté du fruit, filet épais de sa couleur (bordure : reste visible quand la carte est à toucher),
   fruits dessinés en SVG statique (autant que la valeur), chiffre dans les coins. Mini-grilles : le chiffre en gros. */
.co-card.is-junior { background: var(--ctint); color: var(--cink); border: max(1.5px, calc(var(--carte-w) * .055)) solid var(--cbg); }
.co-card.is-junior::before { inset: 6%; border-color: color-mix(in srgb, var(--cbg) 28%, transparent); }
.co-card .co-fruits { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.co-card.is-junior .sj-coin { z-index: 1; color: var(--cink); font-size: calc(var(--carte-w) * .23); }
.co-card.is-junior .co-jv { display: none; }
@supports (font-size: round(10.4px, 1px)) { .co-card.is-junior .sj-coin { font-size: round(calc(var(--carte-w) * .23), 1px); } }
.co-grid.is-mini .co-card.is-junior .co-fruits { opacity: .3; }
.co-grid.is-mini .co-card.is-junior .co-jv { display: block; position: relative; color: var(--cink); }
/* Colonne de 3 cartes pareilles : elle brille (filet jaune) ; sur ma grille, ses points au-dessus (« +5 ») */
.co-card.sj-carte.is-trio { box-shadow: 0 0 0 2.5px var(--accent, #FFC233), var(--ombre-objet, 0 4px 10px -4px rgba(0, 0, 0, .5)); } /* aussi dans les mini-grilles */
.co-cell[data-trio]::after {
  content: attr(data-trio); position: absolute; left: 50%; top: 0; z-index: 3; transform: translate(-50%, -58%);
  padding: 2px 8px; border-radius: var(--r-pill, 999px); pointer-events: none; white-space: nowrap;
  font: 700 14px/1.15 var(--font-display, system-ui); color: var(--on-accent, #1B1608); background: var(--accent, #FFC233);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .5);
}
/* Tutoriel junior : les points d'une colonne pareille, la fin en deux grilles de 3 × 4 */
.co-tuto-pts {
  position: absolute; z-index: 40; transform: translateX(-50%); padding: 2px 8px; border-radius: var(--r-pill, 999px); white-space: nowrap;
  font: 700 14px/1.15 var(--font-display, system-ui); color: var(--on-accent, #1B1608); background: var(--accent, #FFC233); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .5);
}
.co-tuto-fin.is-junior { inset: 6px 8px 34px; gap: 6px; }
.co-tuto-fin.is-junior .co-tuto-j { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 6px; row-gap: 4px; padding: 4px; }
.co-tuto-fin.is-junior .co-tuto-j > b, .co-tuto-fin.is-junior .co-tuto-j em { grid-row: 1; }
.co-tuto-fin.is-junior .co-tuto-j em { min-height: 0; padding: 0 6px; }
.co-tuto-mini.is-grille { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 19px); gap: 3px; }
.co-tuto-mini.is-grille .co-tuto-m { width: 19px; }
/* mini-grilles : une colonne pareille se voit de loin (filet jaune plus épais, fruits plus nets) */
.co-grid.is-mini .co-card.sj-carte.is-trio { box-shadow: 0 0 0 3px var(--accent, #FFC233); }
.co-grid.is-mini .co-card.is-junior.is-trio .co-fruits { opacity: .55; }