/* 길 찾기 (미로)와 동전·지폐 세기가 함께 쓰는 화면. */

.maze-stage:focus-visible,
.money-stage:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 6px;
    border-radius: 12px;
}

.maze-prompt,
.money-prompt {
    font-size: 1.45rem;
    font-weight: 700;
    text-align: center;
    min-height: 2.4rem;
    margin-bottom: 12px;
}

/* ---------- 미로 ---------- */

.maze-board {
    display: grid;
    grid-template-columns: repeat(var(--maze-size, 5), 1fr);
    /* 미로와 방향 단추가 한 화면에 함께 있어야 한다. 미로는 한 판에 수십 번
     * 단추를 누르는 놀이라, 누를 때마다 오르내리게 하면 그 오르내림이 곧
     * 과제가 된다.
     *
     * 판 위 머리글·계기판(약 340px)과 아래 단추(약 170px)는 화면이 낮아져도
     * 줄지 않는다. 그래서 vh 비율이 아니라 **남는 높이** 로 잰다 — 비율로
     * 잡으면 어느 높이에서는 단추가 판의 마지막 줄을 덮어 도착점이 가린다.
     * 너무 작아지지도 않게 240px 을 바닥으로 둔다. */
    width: min(100%, max(240px, min(460px, calc(100vh - 520px))));
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    background: var(--bs-body-bg);
    border: 3px solid var(--bs-emphasis-color);
    border-radius: 8px;
    overflow: hidden;
}

/* 벽은 칸의 테두리로 그린다. 이웃과 짝을 맞춰 허물기 때문에 두 칸 사이에는
 * 벽이 있거나 없거나 둘 중 하나다 — 반쪽 벽이 그려지지 않는다. */
.maze-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 4vw, 1.9rem);
    line-height: 1;
    border: 0 solid var(--bs-emphasis-color);
}

.maze-cell--n { border-top-width: 3px; }
.maze-cell--e { border-right-width: 3px; }
.maze-cell--s { border-bottom-width: 3px; }
.maze-cell--w { border-left-width: 3px; }

.maze-cell--goal {
    background: var(--bs-success-bg-subtle);
}

.maze-cell--here {
    background: var(--bs-primary-bg-subtle);
}

.maze-cell--bump {
    animation: maze-bump 420ms ease;
}

@keyframes maze-bump {
    0%, 100% { background: var(--bs-primary-bg-subtle); }
    50% { background: var(--bs-danger-bg-subtle); }
}

@media (prefers-reduced-motion: reduce) {
    .maze-cell--bump { animation: none; }
}

/* 방향 단추 넷. 드래그가 아니라 이것이 조작이다 — 손이 흔들려도 길만
 * 생각하면 된다. */
/* 판 위쪽 머리글·계기판은 화면이 낮아져도 줄지 않는다. 그래서 판 높이만
 * 줄여서는 단추가 화면 안에 들어오지 않는 높이가 반드시 생긴다 —
 * 같은 무리끼리의 확인 단추와 같은 방법으로 바닥에 붙여 둔다. */
.maze-pad {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 72px);
    grid-template-rows: repeat(2, 72px);
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
    padding: 10px 0 6px;
    background: var(--pg-cream, var(--bs-body-bg));
}

.maze-pad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 16px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.maze-pad-btn--up { grid-column: 2; grid-row: 1; }
.maze-pad-btn--left { grid-column: 1; grid-row: 2; }
.maze-pad-btn--down { grid-column: 2; grid-row: 2; }
.maze-pad-btn--right { grid-column: 3; grid-row: 2; }

/* 갈 수 없는 쪽은 미리 흐려 둔다. 누르지 못하게 막지는 않는다 —
 * 눌러보고 막혔다는 것을 아는 것도 길 찾기다. */
.maze-pad--blocked {
    opacity: 0.4;
}

/* ---------- 동전·지폐 세기 ---------- */

.money-rail {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.money-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 84px;
    border: 3px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.money-piece--coin {
    border-radius: 50%;
    min-width: 92px;
    min-height: 92px;
    background: var(--bs-warning-bg-subtle);
}

.money-piece--bill {
    background: var(--bs-info-bg-subtle);
}

.money-piece-face {
    font-size: 1.35rem;
    font-weight: 800;
}

.money-piece-name {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

/* 합계. 이 표시가 곧 힌트라 가장 크다 — 감추면 놀이가 암산 시험이 된다. */
.money-total {
    display: block;
    text-align: center;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 8px;
}

.money-total--over {
    color: var(--bs-danger-text-emphasis);
}

.money-total--done {
    color: var(--bs-success-text-emphasis);
}

/* 담은 돈. 눌러서 뺀다 — 넘겨도 처음부터 다시 하지 않는다. */
.money-purse {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    min-height: 62px;
    padding: 8px;
    border: 2px dashed var(--bs-border-color);
    border-radius: 14px;
    margin-bottom: 14px;
}

.money-chip {
    min-height: 46px;
    padding-inline: 14px;
    border: 2px solid var(--bs-primary);
    border-radius: 12px;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-body-color);
    font-weight: 700;
}

/* 아직 아무것도 담지 않았을 때. 빈 네모만 있으면 무엇에 쓰는 자리인지
 * 알 수 없다. */
.money-purse-empty {
    align-self: center;
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
}