/* 순서대로 놓기 · 같은 무리끼리가 함께 쓰는 화면. */

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

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

/* ---------- 순서대로 놓기 ---------- */

/* 놓은 차례를 따로 보여준다. 몇 번째까지 왔는지 눈으로 알아야 다음을
 * 생각할 수 있다. */
.order-tray {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}

.order-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px dashed var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 1.5rem;
    font-weight: 700;
}

.order-slot--filled {
    border-style: solid;
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
    font-size: 2rem;
}

.order-board {
    display: grid;
    grid-template-columns: repeat(var(--order-cols, 5), 1fr);
    gap: 10px;
    max-width: 720px;
    margin-inline: auto;
}

.order-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 132px;
    padding: 8px;
    border: 2px solid var(--bs-border-color);
    border-radius: 16px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: transform 120ms ease, border-color 120ms ease;
}

/* 크기 비교 놀이는 보이는 크기가 곧 답이다. --order-scale 이 그 크기다. */
.order-item-face {
    font-size: calc(2.6rem * var(--order-scale, 1));
    line-height: 1.1;
}

.order-item-name {
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
}

.order-item:hover:not(:disabled) {
    border-color: var(--bs-primary);
}

.order-item--placed {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
    opacity: 0.7;
}

/* 차례가 아니면 흔들릴 뿐이다. 놓은 것은 그대로 남는다. */
.order-item--shake {
    animation: order-shake 500ms ease;
    border-color: var(--bs-danger);
}

@keyframes order-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .order-item--shake {
        animation: none;
    }
}

/* ---------- 같은 무리끼리 ---------- */

.pick-board {
    display: grid;
    grid-template-columns: repeat(var(--pick-cols, 3), 1fr);
    gap: 10px;
    /* 칸을 620px 폭으로 벌리면 아홉 칸 격자가 화면 한 장을 넘어선다.
     * 480px 에서도 칸 하나가 150px 안팎이라 손가락에 충분히 넓다. */
    max-width: 480px;
    margin-inline: auto;
}

.pick-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    aspect-ratio: 1 / 1;
    padding: 6px;
    border: 3px solid var(--bs-border-color);
    border-radius: 16px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.pick-cell-face {
    font-size: 2.5rem;
    line-height: 1.1;
}

.pick-cell-name {
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
}

.pick-cell:hover {
    border-color: var(--bs-primary);
}

/* 고른 것. 확인 전까지는 언제든 취소할 수 있다 — 테두리와 바탕만 바꾸고
 * 잠그지 않는다. */
.pick-cell--on {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}

/* 확인했는데 무리에 들지 않은 것. 잠시 표시했다 걷는다. */
.pick-cell--miss {
    border-color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
}

/* 확인 단추는 늘 손 닿는 곳에 있어야 한다.
 *
 * 아홉 칸 격자는 세로로 길어 단추가 화면 밖으로 밀린다. 판마다 아래로
 * 내렸다 다시 올라오게 하면 그 자체가 과제가 된다 — 바닥에 붙여 둔다. */
.pick-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 12px 0 4px;
    /* 카드와 같은 바탕이어야 덮은 자리가 흰 띠로 도드라지지 않는다.
     * --pg-cream 은 playground.css 가 밝은 테마에서만 정의하므로 어두운
     * 테마에서는 본문 바탕으로 떨어진다. */
    background: var(--pg-cream, var(--bs-body-bg));
}

/* 붙박이 단추가 마지막 줄을 덮은 채로 끝나지 않도록 아래를 비워 둔다.
 * 끝까지 내리면 모든 칸이 단추 위로 올라온다. */
.pick-stage {
    padding-bottom: 12px;
}

.pick-confirm {
    min-width: 200px;
}

/* 글자 모아 낱말 만들기. 글자가 곧 그림이라 이름칸이 없고, 대신 글자를
 * 크게 낸다. */
.order-item--letter .order-item-face {
    font-size: 3.2rem;
    font-weight: 800;
}