.chemin { max-width:640px; padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }
.chemin .game-header .eyebrow { margin:18px 0 10px; }
.chemin .game-header h1 { font-size:clamp(2.5rem,8vw,3.8rem); }
.chemin .intro { font-size:1rem; line-height:1.45; margin:12px 0 18px; }
.path-progress { display:flex; justify-content:space-between; gap:12px; max-width:480px; margin:auto; font-size:.9rem; color:var(--muted); }
.path-progress output { font-variant-numeric:tabular-nums; color:var(--green); font-weight:750; }
.chemin .status { font-size:.9rem; margin:10px 0; }
.path-board { position:relative; display:flex; flex-direction:column; width:min(100%,480px); aspect-ratio:1; margin:auto; border:2px solid #8faaa0; border-radius:18px; overflow:hidden; background:#fffdf8; box-shadow:0 5px 0 #e4e2d7; touch-action:none; user-select:none; -webkit-user-select:none; }
.path-board:focus-visible { outline:4px solid var(--orange); outline-offset:4px; }
.path-row { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); flex:1; min-height:0; }
.path-cell { position:relative; display:grid; place-items:center; border-right:1px solid #b8c7be; border-bottom:1px solid #b8c7be; min-width:0; }
.path-cell:last-child { border-right:0; }
.path-row:last-of-type .path-cell { border-bottom:0; }
.path-cell.visited { background:#e5efdc; }
.checkpoint { position:relative; z-index:2; display:grid; place-items:center; width:57%; aspect-ratio:1; max-width:44px; border-radius:50%; background:var(--ink); color:white; font-size:clamp(1rem,4.5vw,1.35rem); font-weight:800; border:3px solid #fffdf8; }
.visited .checkpoint { background:var(--green); }
.endpoint .checkpoint { outline:2px solid var(--orange); }
.path-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.path-overlay polyline { fill:none; stroke:var(--orange); stroke-width:15; stroke-linecap:round; stroke-linejoin:round; }
.path-overlay circle { fill:var(--orange); stroke:#fffdf8; stroke-width:4; }
.path-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:22px 0 12px; }
.path-actions .primary { padding:12px 18px; }
.path-help { font-size:.8rem; color:var(--muted); line-height:1.5; text-align:center; margin:12px 0; }
.chemin .result { margin-top:18px; }
@media(max-width:360px) { .chemin { padding-inline:12px; } .path-actions button { font-size:.8rem; } }