/* Explain: Styles for the puzzle and quiz components on the play page. */
/* 푸가로 놀이터: 그림 맞추기 판과 캐릭터 퀴즈 보기 버튼을 한 가지 결로 맞춰,
   휴대폰에서도 손가락으로 쉽게 누를 수 있도록 정리합니다. */

/* 놀이 판: 조각 사이 간격 없이 3×3으로 놓아, 그림이 한 장으로 이어져 보이도록 합니다. */
.puzzle-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0;
    aspect-ratio: 320 / 352;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--secondary-color) 22%, var(--cream-color));
    box-shadow: var(--shadow-card);
    padding: 0;
}

/* 조각: 판 위에서 그림의 한 부분을 보여 주고, 누르면 빈 칸 자리로 미끄러져 옮겨집니다. */
.puzzle-tile {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--surface-color);
    background-image: var(--puzzle-image, none);
    background-size: 300% 300%;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream-color) 62%, transparent);
    cursor: pointer;
    transition: box-shadow 200ms ease, filter 200ms ease;
}

.puzzle-tile:hover:not(.is-blank),
.puzzle-tile:focus-visible:not(.is-blank) {
    box-shadow: inset 0 0 0 3px var(--primary-color);
    filter: brightness(1.05);
}

/* 빈 칸: 점선 자리로 표시해, 어느 조각을 옮길 수 있는지 한눈에 보이게 합니다. */
.puzzle-tile.is-blank {
    background-image: none;
    background-color: color-mix(in srgb, var(--secondary-color) 34%, var(--cream-color));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 38%, transparent);
    cursor: default;
    pointer-events: none;
}

/* 퀴즈 문제: 카드마다 같은 글자 크기와 줄 간격을 써서 목록이 고르게 읽히도록 합니다. */
.quiz-question {
    margin-top: 0.4rem;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--charcoal-color);
    overflow-wrap: break-word;
}

@media (min-width: 640px) {
    .quiz-question {
        font-size: 1.3rem;
    }
}

/* 보기 버튼: 한 줄에 하나씩, 손가락으로 누르기 편한 크기(최소 3.25rem)로 놓습니다. */
.quiz-options {
    display: grid;
    gap: 0.55rem;
}

.quiz-option {
    display: flex;
    min-height: 3.25rem;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 1.15rem;
    background: var(--cream-color);
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
    color: var(--charcoal-color);
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.quiz-option:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.quiz-option:disabled {
    cursor: default;
    opacity: 1;
}

.quiz-option-mark {
    display: inline-flex;
    height: 1.85rem;
    width: 1.85rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
}

.quiz-option-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: break-word;
}

/* 정답·오답은 색과 함께 글자 표시를 덧붙여, 색만으로 구분되지 않도록 합니다. */
.quiz-option.is-correct {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 14%, var(--cream-color));
    color: var(--charcoal-color);
}

.quiz-option.is-correct .quiz-option-mark {
    background: var(--primary-color);
    color: var(--cream-color);
}

.quiz-option.is-correct::after {
    content: '정답';
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--primary-color);
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--cream-color);
}

.quiz-option.is-wrong {
    border-color: color-mix(in srgb, var(--accent-color) 62%, transparent);
    background: color-mix(in srgb, var(--accent-color) 12%, var(--cream-color));
    color: var(--charcoal-color);
}

.quiz-option.is-wrong .quiz-option-mark {
    background: var(--accent-color);
    color: var(--cream-color);
}

.quiz-option.is-wrong::after {
    content: '내가 고른 답';
    flex-shrink: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
    color: color-mix(in srgb, var(--accent-color) 82%, var(--charcoal-color));
}

/* 고른 답이 정답일 때는 '내가 고른 답' 표시 대신 '정답' 표시만 남깁니다. */
.quiz-option.is-correct.is-wrong::after {
    content: '정답';
    background: var(--primary-color);
    color: var(--cream-color);
}

/* 난이도 선택: 그림 맞추기와 퀴즈가 같은 모양(두 칸 버튼)을 쓰도록 한 곳에서 정합니다.
   고른 쪽은 잎사귀 녹색으로 채워 지금 어떤 난이도인지 한눈에 보이게 합니다. */
.difficulty-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--secondary-color) 18%, var(--cream-color));
    padding: 0.4rem;
}

.difficulty-btn {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.difficulty-btn:hover {
    color: var(--primary-color);
}

.difficulty-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 72%, transparent);
    outline-offset: 2px;
}

.difficulty-btn.is-active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--cream-color);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.difficulty-btn.is-active:hover {
    color: var(--cream-color);
}

/* 난이도별 점수 안내: 고른 난이도 바로 아래에 두어, 난이도 선택과 그 난이도의 점수 기준이
   한 흐름으로 이어져 읽히게 합니다. 작은 제목과 안내 문장을 한 상자 안에 담아,
   난이도를 바꿀 때마다 이 자리에서 함께 바뀝니다. */
.puzzle-guide-box {
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--secondary-color) 20%, var(--cream-color));
    padding: 0.9rem 1.1rem;
}

.puzzle-guide-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--primary-color);
}

.puzzle-guide-label i {
    flex-shrink: 0;
    font-size: 0.75rem;
}

.puzzle-guide-text {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--text-muted);
    overflow-wrap: break-word;
}

/* 옮긴 횟수·점수와 푼 문제·점수 표시: 그림 맞추기와 퀴즈가 같은 모양(같은 상자·같은 알약)을 쓰도록
   한 곳에서 정합니다. 두 놀이 모두 이 표시를 같은 자리에서 같은 결로 읽습니다. */
.play-counters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--cream-color) 85%, transparent);
    padding: 1rem 1.25rem;
}

/* 최고 기록: 이 기기에 저장된 가장 높은 점수와 그날 날짜를 카드 위에 보여 주고,
   옆의 '기록 지우기' 버튼으로 언제든 지울 수 있게 합니다. 기록이 없으면 버튼은 잠깁니다. */
.best-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 0.9rem;
    margin-bottom: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--primary-color) 38%, transparent);
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--secondary-color) 24%, var(--cream-color));
    padding: 0.7rem 0.9rem;
    transition: border-color 400ms ease, background 400ms ease, box-shadow 400ms ease;
}

.best-strip-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
}

.best-strip-icon {
    display: inline-flex;
    height: 2.2rem;
    width: 2.2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary-color);
    font-size: 0.9rem;
    color: var(--cream-color);
}

.best-strip-text {
    min-width: 0;
}

.best-strip-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.6;
    color: var(--text-muted);
}

.best-strip-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--charcoal-color);
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}

.best-strip-clear {
    display: inline-flex;
    min-height: 2.4rem;
    flex-shrink: 0;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--cream-color);
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--charcoal-color);
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.best-strip-clear:hover:not(:disabled) {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* 기록이 아직 없을 때는 누를 수 없도록 흐리게 두어, 지울 것이 없다는 것을 바로 알 수 있게 합니다. */
.best-strip-clear:disabled {
    cursor: default;
    opacity: 0.5;
}

@media (max-width: 639px) {
    .best-strip-clear {
        width: 100%;
        justify-content: center;
    }
}

/* 결과 안내: 그림 맞추기와 퀴즈가 끝났을 때 격려 문구 → 점수 → 난이도 안내 순서로
   한 줄씩 차분히 읽히도록, 두 놀이가 같은 모양을 쓰도록 이곳 한 곳에서 정합니다. */
.play-result {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    padding: 1rem 1.15rem;
    text-align: left;
}

.play-result-line {
    display: block;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--charcoal-color);
    overflow-wrap: break-word;
}

/* 격려 문구는 푸가로의 색으로 한 단계 크게 두어, 결과에서 가장 먼저 눈에 들어오게 합니다. */
.play-result-lead {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--primary-color);
}

/* 난이도·다시 시작 안내는 한 단계 작고 차분하게 두어 격려 문구와 점수를 돋보이게 합니다. */
.play-result-note {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .play-result {
        padding: 1.1rem 1.3rem;
    }

    .play-result-lead {
        font-size: 1.25rem;
    }
}

/* 새 최고 점수 표시: 방금 기록을 세웠다는 것이 한눈에 보이도록,
   기록 상자가 부드럽게 빛나며 잠깐 강조됩니다. */
.best-strip.is-new-record {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 16%, var(--cream-color));
    animation: bestRecordPulse 1.3s ease-in-out 2;
}

@keyframes bestRecordPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 0%, transparent);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-color) 22%, transparent);
        transform: translateY(-0.15rem);
    }
}

/* '새 기록!' 표시: 기록을 세운 순간에만 나타나고, 잠시 뒤 스스로 사라집니다. */
.best-strip-new {
    display: none;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0.5rem;
    border-radius: 999px;
    background: var(--accent-color);
    padding: 0.12rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    color: var(--cream-color);
}

.best-strip.is-new-record .best-strip-new {
    display: inline-flex;
    animation: bestRecordPop 320ms ease-out both;
}

@keyframes bestRecordPop {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 축하 표시: 그림 맞추기를 완성했을 때와 퀴즈 정답을 골랐을 때,
   카드가 부드럽게 빛나며 살짝 떠오르는 가벼운 축하 효과를 보여 줍니다.
   색만으로 알리지 않도록, 테두리 색도 함께 바뀝니다. */
.is-celebrate {
    border-color: var(--primary-color);
    animation: playCelebrate 1.1s ease-in-out 1;
}

@keyframes playCelebrate {
    0%, 100% {
        transform: translateY(0);
        box-shadow: var(--shadow-card);
    }
    35% {
        transform: translateY(-0.4rem);
        box-shadow: 0 26px 60px color-mix(in srgb, var(--primary-color) 34%, transparent);
    }
    70% {
        transform: translateY(-0.15rem);
        box-shadow: 0 20px 48px color-mix(in srgb, var(--primary-color) 22%, transparent);
    }
}