/* 스테이지 지도 — 구역 배경을 어둡게 깔고 그 위에 길과 10칸을 코드로 그린다. */
.smap{position:fixed;inset:0;z-index:13;overflow:hidden;
  background:#2a331f;animation:smapIn .3s ease-out;
  display:flex;flex-direction:column;
  touch-action:manipulation;user-select:none;-webkit-user-select:none}
/*
 * 배경은 **어둡게** — 길과 칸이 주인공이다.
 *
 * ⚠ **`blur()` 를 쓰면 안 된다.** 처음엔 `filter:blur(3px)` 로 흐리게 했는데,
 * 진짜 크롬(배포본)에서 지도를 열자마자 **렌더러가 통째로 멈췄다**
 * (2026-08-30). 화면 전체를 덮는 칸에 큰 배경 그림(1536x2048)을 깔고
 * 매 프레임 블러를 걸면 감당이 안 된다. 아이 폰에서는 더하다.
 * 밝기만 낮춰도 "뒤로 물러난다"는 느낌은 충분히 난다.
 */
.smap::before{content:'';position:absolute;inset:0;
  background:var(--bg) center/cover no-repeat;
  filter:brightness(.5) saturate(.8)}
@keyframes smapIn{from{opacity:0}to{opacity:1}}
.smap.smap-out{animation:smapOut .3s ease-in forwards}
@keyframes smapOut{to{opacity:0}}

.smap-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:3vmin;padding:2.4vmin 14vmin 1.4vmin}
.smap-title{color:#fff;font-size:min(5vmin,28px);font-weight:800;
  text-shadow:0 .3vmin .6vmin rgba(0,0,0,.6)}
.smap-arrow{background:rgba(20,26,16,.55);color:#fff;border:0;border-radius:99px;
  min-width:var(--touch);min-height:calc(var(--touch) * .78);
  font-size:min(4.4vmin,24px);cursor:pointer}
.smap-arrow:disabled{opacity:.28;cursor:default}

.smap-close{position:absolute;z-index:3;top:2vmin;right:2.4vmin;
  min-width:var(--touch);min-height:var(--touch);border:0;border-radius:99px;
  background:rgba(20,26,16,.6);color:#fff;font-size:min(4.6vmin,26px);cursor:pointer}

.smap-yard{position:relative;z-index:2;flex:1;margin:0 6vmin 4vmin}

/* 길 — 칸을 잇는 선 */
.smap-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.smap-road{fill:none;stroke:rgba(255,255,255,.22);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
/* 깬 데까지는 밝은 길 — "여기까지 왔다" */
.smap-road-done{stroke:rgba(255,232,138,.85);stroke-dasharray:none;stroke-width:2.4}

/* 칸 */
.smap-cell{position:absolute;transform:translate(-50%,-50%);
  min-width:var(--touch);min-height:var(--touch);
  width:min(15vmin,86px);height:min(15vmin,86px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:.5vmin solid rgba(255,255,255,.5);border-radius:50%;
  background:rgba(30,38,24,.72);color:#fff;cursor:pointer;
  font-size:min(4.4vmin,24px);font-weight:800;line-height:1}
.smap-cell .smap-no{text-shadow:0 .2vmin .4vmin rgba(0,0,0,.6)}
/* 최고 기록 — 네 살에게 재화보다 이게 크다 (§8-2) */
.smap-cell .smap-best{margin-top:.4vmin;font-size:min(2.8vmin,15px);
  color:#ffe98a;font-weight:700}

/* 깬 칸: 밝다 */
.smap-cell.cleared{background:rgba(120,170,80,.9);border-color:#ffe98a}
/* 지금 칸: 빛난다 */
.smap-cell.now{border-color:#fff;background:rgba(240,190,60,.95);color:#2a2410;
  animation:smapNow 1.5s ease-in-out infinite}
.smap-cell.now .smap-no{text-shadow:none}
@keyframes smapNow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,233,138,.7)}
  50%{box-shadow:0 0 0 1.6vmin rgba(255,233,138,0)}}
/* 안 깬 칸: 흐리다 — 건너뛸 수 없다 */
.smap-cell.locked{opacity:.42;cursor:default;border-style:dashed}

@media (orientation:landscape){
  /* 가로에서는 칸이 겹치지 않게 조금 작게 */
  .smap-cell{width:min(13vmin,74px);height:min(13vmin,74px)}
}