.plateau-jeu { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.echiquier-cadre { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; container-type: size; }
.echiquier {
    width: min(100cqw, 100cqh); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
    border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); border: 4px solid #5b3a1e;
}
@supports not (width: 1cqw) { .echiquier { width: min(94vw, calc(100vh - 190px)); } }
.case { position: relative; border: 0; padding: 0; min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.case.claire { background: #f0d9b5; }
.case.foncee { background: #b58863; }
.case.dernier.claire { background: #f6eb72; }
.case.dernier.foncee { background: #dcc34b; }
.case.choisie { box-shadow: inset 0 0 0 4px rgba(24, 119, 242, .85); }
.case.echec { background: radial-gradient(circle, #ff4d4d 0%, #e0245e 45%, transparent 75%) !important; }
.case.cible::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(20, 30, 40, .28); }
.case.cible.prise::after { width: 86%; height: 86%; background: none; border: 5px solid rgba(20, 30, 40, .3); }
.case[data-rang]::before { content: attr(data-rang); position: absolute; top: 2px; left: 3px; font-size: 10px; font-weight: 700; opacity: .6; color: #3d2814; }
.piece { font-size: min(10.5cqw, 10.5cqh); line-height: 1; pointer-events: none; font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", sans-serif; }
@supports not (width: 1cqw) { .piece { font-size: min(10vw, 6vh); } }
.piece.w { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 1px 2px rgba(0, 0, 0, .7); }
.piece.b { color: #1b1b1b; text-shadow: 0 1px 1px rgba(255, 255, 255, .25); }
.pastille { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #555; flex: 0 0 auto; }
.pastille.blanc { background: #fff; }
.pastille.noir { background: #222; }
.pris { font-size: 15px; letter-spacing: -2px; color: var(--g-doux); max-width: 45%; overflow: hidden; white-space: nowrap; }
.promo { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); }
.promo .gm-carte { max-width: 320px; }
.promo-choix { display: flex; gap: 8px; justify-content: center; }
.promo-choix button { width: 60px; height: 60px; border: 0; border-radius: 12px; background: #b58863; cursor: pointer; }
.promo-choix .piece { font-size: 42px; }