/* Compass Explorer: map, route and direction buttons. Shared frame, status line and win panel come from kids-product.css. */
.cp-stage{display:grid;gap:14px}
.cp-levels{grid-template-columns:repeat(3,minmax(0,1fr))}
.cp-level-name{display:block;font-size:.8em;font-weight:600;opacity:.8}
.cp-board{display:flex;justify-content:center;min-width:0}
.cp-grid{display:grid;gap:6px;width:min(100%,340px);aspect-ratio:1;padding:8px;box-sizing:border-box;border-radius:18px;background:#161b38;margin:0 auto}
.cp-size-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cp-size-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cp-size-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.cp-cell{position:relative;min-width:0;border-radius:10px;background:rgba(255,255,255,.07)}
.cp-start{box-shadow:inset 0 0 0 3px #7fd1ff}
.cp-trail{background:rgba(127,209,255,.26)}
.cp-rock{background:#5a5f73;border-radius:14px}
.cp-hint::after{content:"";position:absolute;left:50%;top:50%;width:16%;height:16%;transform:translate(-50%,-50%);border-radius:50%;background:#ffd54f;opacity:.9}
.cp-treasure::before{content:"";position:absolute;inset:22%;border-radius:6px;background:#ffd54f;box-shadow:inset 0 0 0 2px #b8860b}
.cp-explorer::after{content:"";position:absolute;inset:26%;border-radius:50%;background:#7bdcb5;box-shadow:0 0 0 3px #1d2246}
.cp-route-wrap{display:grid;gap:6px}
.cp-route-title{margin:0;font-size:1rem}
.cp-route{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;min-height:2.6em;align-items:center}
.cp-route li{min-width:2.4em;height:2.4em;padding:0 8px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:#2a3158;box-sizing:border-box}
.cp-route li.cp-empty{background:none;min-width:0;height:auto;padding:0;font-weight:600;opacity:.75}
.cp-moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cp-move{min-height:48px;min-width:0;width:100%;justify-content:center}
.cp-arrow{font-weight:800}
.cp-actions{display:flex;flex-wrap:wrap;gap:8px}
.cp-actions button{min-height:44px}
.cp-actions button:disabled{opacity:.45;cursor:not-allowed}
.cp-win{display:grid;justify-items:center;gap:8px;text-align:center}
.cp-win-actions{display:flex;justify-content:center}
.cp-howto{display:grid;gap:8px}
.cp-steps{margin:0;padding-left:1.2em;display:grid;gap:6px}
.cp-hint-note{margin:0;opacity:.85}
@media(min-width:520px){.cp-moves{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:359px){.cp-levels{grid-template-columns:minmax(0,1fr)}}