/* นิทานแตะแล้วฟัง · การ์ดเลือกเรื่องและภาพในหน้า ใช้ตัวแปรระยะจาก stage.css */

#picker[hidden],
#page-area[hidden] {
    display: none !important;
}

#page-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s4);
    width: 100%;
}

/* การ์ดเรื่อง: ภาพใหญ่พอให้นิ้วเด็กแตะ · ชื่อสั้นสำหรับผู้ใหญ่ */
#picker .choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    line-height: 1.25;
}
#picker .choice img {
    width: clamp(96px, min(24vmin, 34vw), 200px);
    height: auto;
}
.story-name {
    font-size: clamp(13px, 2.2vmin, 17px);
    font-weight: 600;
    color: var(--ink);
    max-width: 11ch;
}

.page-pics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s3);
    width: 100%;
}

.page-pic {
    border: 4px solid var(--line);
    background: var(--card);
    border-radius: var(--radius);
    padding: var(--s2);
    cursor: pointer;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
}
.page-pic img {
    display: block;
    width: clamp(110px, min(28vmin, 36vw), 240px);
    height: auto;
}
.page-pics[data-n="1"] .page-pic img {
    width: clamp(140px, min(40vmin, 52vw), 280px);
}
.page-pics[data-n="3"] .page-pic img {
    width: clamp(88px, min(22vmin, 28vw), 180px);
}
.page-pic:active { transform: scale(.96); }
.page-pic.said { border-color: var(--ok); }

#next-btn {
    min-width: clamp(180px, 44vmin, 280px);
    min-height: clamp(52px, 10vmin, 72px);
}

#done-outside {
    margin: 0;
    max-width: 28ch;
    font-size: clamp(16px, 2.8vmin, 22px);
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    .page-pic:active { transform: none; }
}