/* Jump Battle v2 « Le Chapitre » : cartes en feuille de manga (papier, case encrée, trames, écriture à la plume,
   aplats hachurés) et plateau de jeu. Chargé après style.css. */

:root {
  --paper: #f5eedb;
  --paper-2: #ece2c6;
  --ink: #161412;
  --ink-soft: #3b3630;
  --pen: "Kalam", "Comic Sans MS", cursive;
}

/* ---------- Carte : la feuille ---------- */
.mcard {
  --w: 200px;
  container-type: inline-size;
  position: relative;
  width: var(--w);
  aspect-ratio: 63 / 88;
  flex: none;
  color: var(--ink);
  font-family: var(--pen);
  user-select: none;
}
.mc-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  padding: 4.5cqw 4.5cqw 3cqw;
  box-sizing: border-box;
  /* papier : fond crème, fibres et bord légèrement jauni */
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(120, 90, 40, 0.18)),
    repeating-linear-gradient(8deg, rgba(90, 70, 30, 0.035) 0 1px, transparent 1px 7px),
    var(--paper);
  border: 0.9cqw solid var(--ink);
  border-radius: 2.5cqw 3.5cqw 2.8cqw 3.2cqw / 3.2cqw 2.6cqw 3.6cqw 2.4cqw; /* trait à main levée */
  box-shadow: 0.8cqw 1.2cqw 0 rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.mc-sheet::after {
  /* second trait d'encre, un peu décalé, comme repassé à la plume */
  content: "";
  position: absolute;
  inset: 1.4cqw;
  border: 0.35cqw solid rgba(22, 20, 18, 0.55);
  border-radius: 2cqw 2.8cqw 2.2cqw 3cqw / 2.8cqw 2cqw 3cqw 2.2cqw;
  pointer-events: none;
}
.mc-head { display: flex; align-items: baseline; gap: 2cqw; min-height: 0; }
.mc-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 8.4cqw;
  line-height: 1.02;
  letter-spacing: -0.01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mc-rarity { font-size: 7cqw; line-height: 1; color: var(--ink); }
.mcard.rarity-legendary .mc-rarity, .mcard.rarity-special .mc-rarity { color: #b8860b; text-shadow: 0.3cqw 0.3cqw 0 var(--ink); }
.mcard.rarity-superrare .mc-rarity { color: #7a3fd0; }

/* la case du dessin : cadre noir épais, trame de points en bas */
.mc-panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 34cqw;
  border: 1.3cqw solid var(--ink);
  border-radius: 0.6cqw;
  background: #fff;
  overflow: hidden;
  transform: rotate(-0.6deg);
}
.mc-panel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; filter: contrast(1.05) saturate(0.95); }
.mc-tone {
  position: absolute;
  inset: 55% 0 0 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.32) 0.9cqw, transparent 1cqw);
  background-size: 3.2cqw 3.2cqw;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(transparent, #000 70%);
  mask-image: linear-gradient(transparent, #000 70%);
  pointer-events: none;
}
.mc-colors { position: absolute; left: 2cqw; bottom: 2cqw; display: flex; gap: 1.4cqw; }
.mc-colors i {
  width: 10cqw;
  height: 10cqw;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 5.6cqw;
  border-radius: 50% 46% 52% 48%;
  border: 0.7cqw solid var(--ink);
  /* tampon colorié : aplat + hachures */
  background: repeating-linear-gradient(-40deg, rgba(0, 0, 0, 0.18) 0 0.6cqw, transparent 0.6cqw 1.8cqw), var(--g);
}
.mc-stamp { position: absolute; right: 2cqw; top: 2cqw; font-size: 9cqw; color: #b8860b; text-shadow: 0.4cqw 0.4cqw 0 var(--ink); }

/* qualités : « 💥 10 000 Action », fond colorié aux hachures de la qualité */
.mc-lines { display: grid; gap: 1.6cqw; }
.mc-line {
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 0.8cqw 2.6cqw;
  border: 0.6cqw solid var(--ink);
  border-radius: 2.4cqw 1.2cqw 2.8cqw 1.4cqw / 1.6cqw 2.6cqw 1.2cqw 2.4cqw;
  background:
    repeating-linear-gradient(-35deg, color-mix(in srgb, var(--q) 55%, transparent) 0 0.7cqw, transparent 0.7cqw 2cqw),
    color-mix(in srgb, var(--q) 22%, var(--paper));
  line-height: 1;
}
.mc-line i { font-style: normal; font-size: 6.4cqw; }
.mc-line b { font-size: 8.6cqw; font-weight: 700; letter-spacing: -0.02em; }
.mc-line span { margin-left: auto; font-size: 5.4cqw; font-weight: 700; color: var(--ink-soft); }
.mc-line.small { padding: 0.4cqw 2.6cqw; width: 78%; margin-left: auto; }
.mc-line.small b { font-size: 6.6cqw; }
.mc-line.small i { font-size: 5cqw; }
.mc-line.small span { font-size: 4.6cqw; }
.mc-line.up b { color: #1d7a2d; }
.mc-line.down b { color: #b3122b; }

/* effet : encadré tiré à la plume, titre colorié */
.mc-fx {
  border: 0.5cqw dashed var(--ink);
  border-radius: 1.6cqw;
  padding: 1.2cqw 2.4cqw;
  font-size: 4.9cqw;
  line-height: 1.12;
  background: rgba(255, 255, 255, 0.35);
}
.mc-fx b {
  display: inline-block;
  font-size: 5.4cqw;
  padding: 0 1.4cqw;
  margin-right: 1cqw;
  border-radius: 1cqw;
  background: repeating-linear-gradient(-35deg, color-mix(in srgb, var(--fx) 45%, transparent) 0 0.6cqw, transparent 0.6cqw 1.6cqw), color-mix(in srgb, var(--fx) 25%, var(--paper));
}
.mc-foot { font-size: 4.2cqw; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }

/* états */
.mcard.selected .mc-sheet { outline: 1.5cqw solid var(--pop); outline-offset: 1cqw; }
.mcard.disabled .mc-sheet { filter: grayscale(0.7) brightness(0.7); }
.mcard.suggested .mc-sheet { outline: 1.5cqw dashed var(--pop); outline-offset: 1cqw; animation: mc-suggest 1.2s ease-in-out infinite; }
@keyframes mc-suggest { 50% { outline-color: transparent; } }
.mcard.stamped .mc-sheet { box-shadow: 0.8cqw 1.2cqw 0 rgba(0, 0, 0, 0.55), 0 0 0 1.2cqw rgba(232, 180, 0, 0.6); }

/* ---------- Carte du plateau (petite) ---------- */
.mcard.mini { --w: 64px; }
.mcard.mini .mc-sheet { padding: 4cqw; gap: 0; border-width: 2.5cqw; }
.mcard.mini .mc-sheet::after { display: none; }
.mcard.mini .mc-panel { min-height: 0; height: 100%; border-width: 3cqw; transform: none; }
.mcard.mini .mc-tone { background-size: 7cqw 7cqw; background-image: radial-gradient(rgba(0, 0, 0, 0.32) 1.8cqw, transparent 2cqw); }
.mc-value {
  position: absolute;
  right: 3cqw;
  bottom: 3cqw;
  min-width: 34cqw;
  padding: 2cqw 5cqw;
  text-align: center;
  font: 700 26cqw/1 var(--pen);
  color: var(--ink);
  background: var(--paper);
  border: 3cqw solid var(--ink);
  border-radius: 50% 44% 52% 46% / 48% 54% 44% 52%;
}
.mc-value.up { color: #1d7a2d; }
.mc-value.down { color: #b3122b; }
.mc-q, .mc-q2, .mc-fxi {
  position: absolute;
  left: 3cqw;
  top: 3cqw;
  width: 26cqw;
  height: 26cqw;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 15cqw;
  border-radius: 50%;
  border: 2.5cqw solid var(--ink);
  background: repeating-linear-gradient(-40deg, rgba(0, 0, 0, 0.16) 0 1.4cqw, transparent 1.4cqw 4cqw), color-mix(in srgb, var(--q, #fff) 70%, var(--paper));
}
.mc-q2 { top: 30cqw; width: 20cqw; height: 20cqw; font-size: 11cqw; }
.mc-fxi { left: auto; right: 3cqw; background: var(--paper); }
.mcard.mini.zero .mc-panel { filter: grayscale(1) brightness(0.6); }
.mcard.mini.zero .mc-value { text-decoration: line-through; }
.mcard.mini.silenced .mc-fxi { opacity: 0.35; text-decoration: line-through; }
.mcard.mini.immune .mc-sheet { box-shadow: 0 0 0 3cqw #e8b400, 0.8cqw 1.2cqw 0 rgba(0, 0, 0, 0.55); }

/* ---------- Dos de carte ---------- */
.mcard.back .mc-sheet {
  justify-content: center;
  align-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(22, 20, 18, 0.09) 0 1.2cqw, transparent 1.2cqw 4cqw),
    var(--paper-2);
}
.mc-backlogo {
  font: 700 22cqw/0.9 var(--pen);
  color: var(--ink);
  transform: rotate(-8deg);
  text-align: center;
  text-shadow: 1cqw 1cqw 0 #e3122b;
}
.mc-backlogo small { display: block; font-size: 0.55em; text-shadow: none; color: #e3122b; }
.mcard.back .mc-colors { left: 50%; transform: translateX(-50%); bottom: 6cqw; }
.mcard.back.mini .mc-colors i { width: 26cqw; height: 26cqw; font-size: 13cqw; border-width: 2cqw; }

@media (prefers-reduced-motion: reduce) { .mcard.suggested .mc-sheet { animation: none; } }

/* ---------- Écran de partie (plein écran) : menu | jeu ---------- */
.cb {
  --hw: clamp(92px, min(9.5vw, 19vh), 168px); /* largeur d'une carte de la main */
  --menu-w: 0px;
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: var(--menu-w) minmax(0, 1fr);
  transition: grid-template-columns 0.25s ease;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  /* table de dessin : papier sombre, trame légère */
  background:
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.4px) 0 0 / 7px 7px,
    #17141c;
}
.cb.menu-open { --menu-w: 170px; }
.cb:not(.menu-open) .jg-menu { border-right-width: 0; box-shadow: none; }
.cb:not(.menu-open) .jg-menu-in { visibility: hidden; }
.cb.menu-open .jg-menu .jg-pull::before { content: "‹"; }
.cb-main {
  position: relative;
  min-width: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  padding: 6px 12px 0;
  font-family: var(--pen);
}

/* Haut : joueur adverse et sa main */
.cb-top { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: center; gap: 12px; }
.cb-opp-hand { position: relative; height: calc(var(--hw) * 0.42 * 88 / 63); --ow: calc(var(--hw) * 0.42); --step: min(calc(var(--ow) * 0.5), calc((100% - var(--ow)) / max(1, var(--n) - 1))); }
.cb-oslot { position: absolute; top: 0; width: var(--ow); left: calc(50% - var(--ow) / 2 + var(--off) * var(--step)); transform: rotate(calc(var(--off) * 3deg)); }
.cb-oslot .mcard { --w: 100%; width: 100%; }

/* Panneau d'un joueur : portrait, parties gagnées, main, capacité, total */
.cb-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  border-radius: 10px 14px 9px 13px / 12px 9px 14px 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.cb-player.turn { box-shadow: 0 0 0 3px var(--pop), 3px 3px 0 rgba(0, 0, 0, 0.6); }
.cb-player.passed { background: var(--paper-2); }
.cb-player.passed .cb-pinfo em { color: #b3122b; font-weight: 700; }
.cb-portrait { position: relative; width: 48px; height: 48px; border: 3px solid var(--ink); border-radius: 50% 46% 52% 48%; overflow: visible; background: var(--g); }
.cb-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: inherit; }
.cb-portrait i { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; display: grid; place-items: center; font-style: normal; font-size: 0.75rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--g); }
.cb-pinfo { display: grid; gap: 1px; min-width: 0; line-height: 1.1; }
.cb-pinfo b { font-size: 1rem; }
.cb-pinfo small { font-size: 0.78rem; color: var(--ink-soft); }
.cb-gems i { font-style: normal; color: rgba(22, 20, 18, 0.25); font-size: 0.95rem; margin-right: 2px; }
.cb-gems i.on { color: #e3122b; text-shadow: 1px 1px 0 var(--ink); }
.cb-total { text-align: right; line-height: 0.9; }
.cb-total b { font-size: 1.9rem; font-weight: 700; }
.cb-total small { display: block; font-size: 0.65rem; color: var(--ink-soft); }
.cb-ability {
  justify-self: start;
  margin-top: 2px;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: repeating-linear-gradient(-35deg, rgba(232, 180, 0, 0.45) 0 3px, transparent 3px 8px), #fff6cf;
  color: var(--ink);
  font: 700 0.78rem var(--pen);
  cursor: default;
}
button.cb-ability.ready { cursor: pointer; animation: cb-glow 1.4s ease-in-out infinite; }
.cb-ability.used { opacity: 0.45; text-decoration: line-through; }
.cb-ability.passive { background: var(--paper-2); }
@keyframes cb-glow { 50% { box-shadow: 0 0 0 3px var(--pop); } }

/* Plateau : 4 rangées par camp, face à face autour du bandeau du milieu */
.cb-board {
  --cw: 64px;
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
}
.cb-rows { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3px; min-height: 0; padding: 4px; border-radius: 12px; }
.cb-rows.me { background: rgba(255, 212, 0, 0.04); }
.cb-rows.me.drop-over { outline: 3px dashed var(--pop); outline-offset: 2px; }
.cb-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 2px 6px;
  border: 2px solid rgba(245, 238, 219, 0.18);
  border-radius: 10px 6px 12px 7px / 7px 12px 6px 10px;
  /* rangée : hachures à l'encre de la couleur de la qualité */
  background: repeating-linear-gradient(-35deg, color-mix(in srgb, var(--q) 9%, transparent) 0 2px, transparent 2px 9px);
}
.cb-row.trend { border-color: color-mix(in srgb, var(--pop) 70%, transparent); background: repeating-linear-gradient(-35deg, color-mix(in srgb, var(--q) 16%, transparent) 0 2px, transparent 2px 7px), rgba(255, 212, 0, 0.05); }
.cb-row.weather { filter: grayscale(0.6); }
.cb-row-label { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: #f2ead6; line-height: 1; }
.cb-row-label span { font-size: 1.1rem; }
.cb-row-label small { font-size: 0.72rem; font-weight: 700; }
.cb-mark { font-style: normal; font-size: 0.68rem; font-weight: 700; padding: 0 4px; border-radius: 6px; background: var(--paper); color: var(--ink); }
.cb-mark.trend { background: var(--pop); }
.cb-mark.down { background: #ffd2d8; }
.cb-row-cards { display: flex; align-items: center; gap: 5px; height: 100%; min-width: 0; overflow: hidden; }
.cb-row-cards .mcard { --w: var(--cw); }
.cb-row-total {
  justify-self: end;
  min-width: 40px;
  text-align: center;
  padding: 2px 6px;
  font: 700 1.25rem/1 var(--pen);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50% 44% 52% 46% / 48% 54% 44% 52%;
}
.cb-row.lead .cb-row-total { background: repeating-linear-gradient(-35deg, color-mix(in srgb, var(--q) 50%, transparent) 0 3px, transparent 3px 8px), var(--paper); }
.cb-hidden-opp { position: absolute; right: 52px; top: 4px; z-index: 3; display: flex; align-items: center; gap: 4px; color: #f2ead6; font-size: 0.75rem; }
.cb-hidden-opp .mcard { --w: calc(var(--cw) * 0.8); }

/* Bandeau du milieu : partie, tendance, score, dernier événement */
.cb-mid {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 5px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px 8px 14px 9px / 9px 14px 8px 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.cb-round { display: grid; line-height: 1; }
.cb-round b { font-size: 1rem; }
.cb-round span { font-size: 0.78rem; color: var(--ink-soft); }
.cb-trend { font-size: 0.9rem; padding: 2px 8px; border-radius: 8px; background: repeating-linear-gradient(-35deg, rgba(255, 212, 0, 0.55) 0 3px, transparent 3px 8px), #fff6cf; border: 1.5px solid var(--ink); }
.cb-score { display: flex; align-items: baseline; gap: 6px; }
.cb-score b { font-size: 1.5rem; }
.cb-score b.lead { color: #c4142e; }
.cb-score small { font-size: 0.72rem; color: var(--ink-soft); }
.cb-event { font-size: 0.92rem; line-height: 1.2; min-width: 0; }
.cb-event b { font-weight: 700; }

/* Bas : mon panneau, ma main en éventail, les actions */
.cb-bottom { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) auto; align-items: end; gap: 10px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.cb-bottom .cb-player { align-self: center; }
.cb-hand { position: relative; height: calc(var(--hw) * 88 / 63 * 0.72); --step: min(calc(var(--hw) * 0.7), calc((100% - var(--hw)) / max(1, var(--n) - 1))); }
.cb-slot { position: absolute; bottom: calc(-1 * var(--hw) * 88 / 63 * 0.3); width: var(--hw); left: calc(50% - var(--hw) / 2 + var(--off) * var(--step)); transform: translateY(calc(var(--y) * -1%)) rotate(calc(var(--off) * 2.5deg)); transform-origin: 50% 100%; transition: transform 0.15s ease; z-index: 1; }
.cb-slot .mcard { --w: 100%; width: 100%; cursor: pointer; }
.cb.my-move .cb-slot:hover { transform: translateY(calc(-1 * var(--hw) * 0.42)) scale(1.12); z-index: 5; }
.cb-hand.dim .cb-slot { filter: brightness(0.75); }
.cb-slot .mcard.disabled .mc-sheet { filter: grayscale(0.5) brightness(0.8); }
.cb-slot .mcard.to-hide .mc-sheet { box-shadow: 0 0 0 4px #e3122b, 0.8cqw 1.2cqw 0 rgba(0, 0, 0, 0.55); }
.mcard.shake { animation: cb-shake 0.35s; }
@keyframes cb-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.cb-drag-ghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; }
.cb-slot .mcard.dragging { opacity: 0.25; }
.cb-actions { display: grid; gap: 6px; align-self: center; justify-items: stretch; min-width: 130px; }
.cb-hide.on { background: #e3122b; color: #fff; }
.cb.my-move #cb-pass { animation: cb-glow 1.6s ease-in-out infinite; }

/* Cartes du plateau : arrivée et événements */
.cb-row-cards .mcard.flash .mc-sheet, .cb-hidden-opp .mcard.flash .mc-sheet { animation: cb-flash 0.7s ease-out; }
@keyframes cb-flash { 0% { transform: translateY(-40%) scale(1.25) rotate(-6deg); box-shadow: 0 0 0 6px var(--pop); } 100% { transform: none; } }
.cb.ended .cb-board { filter: saturate(0.85); }

/* Remplacement des cartes de départ */
.cb-mulligan { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(10, 8, 14, 0.82); padding: 16px; }
.cb-mulligan .koma { max-width: min(1100px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 10px; text-align: center; font-family: var(--pen); }
.cb-mulligan h3 { margin: 0; }
.cb-mull-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cb-mull-cards .mcard { --w: clamp(90px, 9vw, 140px); cursor: pointer; }
.cb-mull-cards .mcard.selected .mc-sheet { outline: 4px solid #e3122b; outline-offset: 3px; filter: grayscale(0.4); }
.cb-mulligan.waiting .koma { padding: 18px 26px; }

/* Récapitulatif d'une partie */
.cb-recap-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(10, 8, 14, 0.7); }
.cb-recap { width: min(520px, 100%); display: grid; gap: 10px; text-align: center; font-family: var(--pen); }
.cb-recap h3 { margin: 0; font-size: 1.6rem; }
.cb-recap-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cb-recap-table th, .cb-recap-table td { padding: 4px 8px; border-bottom: 1px dashed var(--line); text-align: right; }
.cb-recap-table th:first-child, .cb-recap-table td:first-child { text-align: left; }
.cb-recap-table tr.me td:nth-child(2), .cb-recap-table tr.opp td:nth-child(3) { color: var(--pop); font-weight: 700; }
.cb-recap-table tr.trend td:first-child small { color: var(--pop); }
.cb-recap-table tr.total td { font-size: 1.25rem; font-weight: 700; border-bottom: 0; }
.cb-gems-big { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 1.4rem; }
.cb-gems-big span { font-size: 0.85rem; color: var(--muted); }
.cb-gems-big .cb-gems i { color: rgba(255, 255, 255, 0.2); }
.cb-gems-big .cb-gems i.on { color: #e3122b; }

/* Fin du match */
.jb-final-rounds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0; }
.jb-final-round { display: grid; gap: 2px; min-width: 120px; padding: 8px 12px; border-radius: 10px; border: 2px solid var(--line); font-family: var(--pen); }
.jb-final-round b { font-size: 1rem; }
.jb-final-round span { font-size: 1.2rem; }
.jb-final-round.win { border-color: var(--pop); }
.jb-final-round.loss { opacity: 0.75; }
.jb-tuto-box { display: grid; gap: 6px; justify-items: start; }

/* Résumé du deck */
.jd-qualities { display: flex; gap: 8px; align-items: flex-end; height: 70px; }
.jd-qualities div { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; text-align: center; }
.jd-qualities span { display: block; width: 100%; min-height: 3px; border: 2px solid var(--ink); border-radius: 4px; background: repeating-linear-gradient(-35deg, color-mix(in srgb, var(--q) 60%, transparent) 0 3px, transparent 3px 8px), color-mix(in srgb, var(--q) 25%, #222); }
.jd-qualities small { font-size: 0.8rem; }
.jd-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; }
.jd-facts .bad b { color: #ff4d5e; }
.jd-slots .mcard, .jd-pool .mcard { --w: 100%; width: 100%; cursor: pointer; }
.mcard.empty-slot .mc-sheet { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.25); box-shadow: none; }
.mcard.empty-slot .mc-sheet::after { display: none; }
.jd-pc { display: flex; gap: 10px; align-items: center; }
.jd-pc img { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; border: 2px solid var(--text); }
.jd-proto-cols small { font-size: 0.78rem; color: var(--muted); }
.jc-detail-card .mcard { --w: 170px; }

/* Petits écrans à l'horizontale (téléphones) */
@media (max-height: 560px) {
  .cb { --hw: clamp(70px, 15vh, 104px); }
  .cb-main { gap: 3px; padding: 3px 8px 0; }
  .cb-top { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }
  .cb-player { padding: 2px 6px; gap: 6px; }
  .cb-portrait { width: 32px; height: 32px; border-width: 2px; }
  .cb-portrait i { width: 16px; height: 16px; font-size: 0.6rem; right: -4px; bottom: -4px; }
  .cb-pinfo b { font-size: 0.82rem; }
  .cb-pinfo small, .cb-ability { font-size: 0.66rem; }
  .cb-total b { font-size: 1.3rem; }
  .cb-row { grid-template-columns: 30px minmax(0, 1fr) 34px; padding: 0 4px; gap: 4px; }
  .cb-row-label small { display: none; }
  .cb-row-total { font-size: 0.95rem; min-width: 30px; padding: 1px 4px; }
  .cb-mid { gap: 8px; padding: 2px 8px; }
  .cb-score b { font-size: 1.1rem; }
  .cb-event { font-size: 0.75rem; }
  .cb-trend { font-size: 0.75rem; }
  .cb-bottom { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto; }
  .cb-actions { min-width: 100px; gap: 4px; }
  .cb-actions .comic-btn { padding: 4px 8px; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  button.cb-ability.ready, .cb.my-move #cb-pass, .cb-row-cards .mcard.flash .mc-sheet { animation: none; }
}
.jd-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Ajustements de lisibilité : main moins enfoncée (on lit ses lecteurs), cartes du plateau un peu plus larges,
   place pour la languette du menu */
.cb-main { padding-left: 30px; }
.cb-hand { height: calc(var(--hw) * 88 / 63 * 0.86); }
.cb-slot { bottom: calc(-1 * var(--hw) * 88 / 63 * 0.14); }
.cb.my-move .cb-slot:hover { transform: translateY(calc(-1 * var(--hw) * 0.25)) scale(1.12); }
.mcard.mini { aspect-ratio: 4 / 5; }
.mcard.mini .mc-panel img { object-position: 50% 12%; }
.cb-rows { gap: 2px; padding: 2px 4px; }
.cb-row { padding: 1px 6px; }
.cb-hand { --step: min(calc(var(--hw) * 0.58), calc((100% - var(--hw) * 1.15) / max(1, var(--n) - 1))); margin: 0 10px; }
.cb-portrait .cb-initial { display: grid; place-items: center; width: 100%; height: 100%; font: 700 1.4rem var(--pen); color: var(--ink); }
#zoom .zoom-slot .mcard { --w: min(380px, 82vw, 56vh); }