.plateau-jeu { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.damier-cadre { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; container-type: size; }
.damier {
    width: min(100cqw, 100cqh); aspect-ratio: 1; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
    border: 5px solid #4a2c12; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
@supports not (width: 1cqw) { .damier { 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; }
.case.claire { background: #f3e2c3; cursor: default; }
.case.foncee { background: #8b5a2b; cursor: pointer; }
.case.dernier { background: #a8792f; }
.case.choisie { box-shadow: inset 0 0 0 3px #facc15; }
.case.jouable .pion { box-shadow: 0 0 0 3px rgba(250, 204, 21, .85), 0 3px 4px rgba(0, 0, 0, .45); }
.case.cible::after { content: ""; width: 34%; height: 34%; border-radius: 50%; background: rgba(250, 204, 21, .85); }
.case.menacee .pion { opacity: .55; }
.pion {
    width: 80%; height: 80%; border-radius: 50%; position: relative; pointer-events: none;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .2);
}
.pion::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .15); }
.pion.blanc { background: radial-gradient(circle at 35% 30%, #fff, #e8dcc6); }
.pion.noir { background: radial-gradient(circle at 35% 30%, #555, #111); }
.pion.noir::before { border-color: rgba(255, 255, 255, .15); }
.pion.dame::after {
    content: "\f521"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; font-size: min(3.6cqw, 3.6cqh); color: #e8a800;
}
@supports not (width: 1cqw) { .pion.dame::after { font-size: 16px; } }
.pion.pris { background: #dc2626; opacity: .6; transform: scale(.6); transition: transform .2s; }
.pion-mini { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #555; flex: 0 0 auto; }
.pion-mini.blanc { background: #fff; }
.pion-mini.noir { background: #222; }