/* ---------- นิทานก่อนนอน ---------- */
.sv-shelf{position:relative;min-height:100vh}
.sv-shelf[hidden],.sv-player[hidden],.sv-quiz[hidden],.sv-end[hidden]{display:none}
.stories .wrap{position:relative;z-index:1}
body.playing{overflow:hidden}

.sv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 16px}
.sv-h1{margin:0;display:flex;align-items:center;gap:14px}
.sv-lead{margin:6px 0 0;font-size:clamp(17px,2.2vw,21px);color:var(--ink-soft)}
.sv-say{font:inherit;font-size:26px;width:56px;height:56px;border-radius:50%;border:0;background:#fff;color:inherit;
  box-shadow:0 4px 0 rgba(43,33,24,.15);cursor:pointer;display:inline-grid;place-items:center;flex:none;padding:0}
.sv-say:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,33,24,.15)}

/* สลับโหมด กลางวัน / ก่อนนอน */
.sv-mode{display:flex;background:#fff;border-radius:999px;padding:6px;box-shadow:0 4px 0 rgba(43,33,24,.12)}
.sv-mode-btn{font:inherit;font-size:20px;font-weight:600;border:0;background:transparent;color:var(--ink-soft);border-radius:999px;
  padding:10px 22px;display:flex;align-items:center;gap:8px;cursor:pointer;min-height:60px;transition:background .25s,color .25s}
.sv-mode-btn .i{font-size:28px;line-height:1}
.sv-mode-btn.on.day{background:#ffcf5c;color:#5a3d00;box-shadow:0 3px 0 #d9a300}
.sv-mode-btn.on.night{background:#34448c;color:#fff;box-shadow:0 3px 0 #1c2655}

/* ฟังกี่เรื่อง (เฉพาะโหมดก่อนนอน) */
.sv-count{display:none;align-items:center;gap:10px;margin:0 0 18px;flex-wrap:wrap}
.night .sv-count.multi{display:flex}
.sv-count-t{font-size:20px;font-weight:600;margin-right:4px;color:#ffe7a8}
.sv-chip{font:inherit;font-size:19px;font-weight:600;border:0;border-radius:999px;padding:10px 22px;min-height:52px;
  background:rgba(255,255,255,.13);color:#dfe6ff;cursor:pointer}
.sv-chip.on{background:#ffd66b;color:#3a2a00;box-shadow:0 3px 0 #c9a23a}

/* ปกนิทาน */
.sv-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.sv-grid.n1{grid-template-columns:minmax(0,520px)}
.sv-grid.n2{grid-template-columns:repeat(2,minmax(0,440px))}
.sv-card{position:relative;display:flex;flex-direction:column;padding:0;border:0;cursor:pointer;font:inherit;text-align:left;
  color:var(--ink);background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease;
  animation:svin .5s cubic-bezier(.3,1.4,.5,1) both}
.sv-card:active{transform:scale(.97)}
.sv-card:focus-visible{outline:5px solid var(--sky);outline-offset:4px}
.sv-cover{display:block;aspect-ratio:4/3;overflow:hidden;background:#f2e6cf}
.sv-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .4s}
.sv-ct{display:block;padding:12px 18px 0;font-size:clamp(21px,2.4vw,27px);font-weight:600;line-height:1.2}
.sv-meta{display:flex;align-items:center;gap:8px;padding:2px 18px 14px;font-size:16px;color:var(--ink-soft)}
.sv-dot{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none}
.sv-star{margin-left:auto;font-size:24px}
.sv-play{position:absolute;right:14px;top:14px;width:58px;height:58px;border-radius:50%;background:var(--sun);display:grid;place-items:center;
  box-shadow:0 4px 0 #c96f00}
.sv-play svg{width:26px;height:26px;fill:#fff;margin-left:4px}
@keyframes svin{from{transform:translateY(24px) scale(.96);opacity:0}to{transform:none;opacity:1}}

/* โหมดก่อนนอน: ฟ้ามืด ดาวกะพริบ */
html:has(body.stories.night){background:#0d1533}
body.stories.night{background:linear-gradient(180deg,#0b1230 0,#18234f 55%,#26316a 100%);color:#e8ecff}
.night .brand,.night .brand-name{color:#ffe7a8}
.night .back{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.night .sv-h1{color:#ffe7a8}
.night .sv-lead{color:#c3cbef}
.night .sv-say{background:rgba(255,255,255,.14);box-shadow:none}
.night .sv-mode{background:rgba(255,255,255,.1);box-shadow:none}
.night .sv-mode-btn{color:#c3cbef}
.night .sv-card{background:#212c5c;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.night .sv-cover img{filter:brightness(.8) saturate(.9)}
.night .sv-ct{color:#ffe7a8}
.night .sv-meta{color:#b8c1ea}
.night .sv-play{background:#4a5bb0;box-shadow:0 4px 0 #2a3672}
.night .foot{color:#8f9ad0}
.sv-sky{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
  background-image:
    radial-gradient(1.8px 1.8px at 6% 14%,#fff 99%,transparent),radial-gradient(1.3px 1.3px at 17% 38%,#fff 99%,transparent),
    radial-gradient(2px 2px at 28% 9%,#fff 99%,transparent),radial-gradient(1.2px 1.2px at 36% 27%,#dfe6ff 99%,transparent),
    radial-gradient(1.6px 1.6px at 47% 16%,#fff 99%,transparent),radial-gradient(1.2px 1.2px at 55% 41%,#fff 99%,transparent),
    radial-gradient(2px 2px at 63% 7%,#fff7d6 99%,transparent),radial-gradient(1.4px 1.4px at 71% 30%,#fff 99%,transparent),
    radial-gradient(1.2px 1.2px at 79% 52%,#fff 99%,transparent),radial-gradient(1.7px 1.7px at 88% 33%,#fff 99%,transparent),
    radial-gradient(1.3px 1.3px at 94% 61%,#fff 99%,transparent),radial-gradient(1.5px 1.5px at 12% 66%,#fff 99%,transparent),
    radial-gradient(1.2px 1.2px at 24% 84%,#dfe6ff 99%,transparent),radial-gradient(1.8px 1.8px at 41% 72%,#fff 99%,transparent),
    radial-gradient(1.2px 1.2px at 58% 90%,#fff 99%,transparent),radial-gradient(1.6px 1.6px at 74% 78%,#fff 99%,transparent),
    radial-gradient(1.3px 1.3px at 86% 92%,#fff 99%,transparent),radial-gradient(1.4px 1.4px at 3% 88%,#fff 99%,transparent);
  animation:twinkle 3.5s ease-in-out infinite alternate}
.night .sv-sky{display:block}
.sv-sky .moon{position:absolute;left:58%;top:16px;width:86px;height:86px;border-radius:50%;box-shadow:-20px 12px 0 0 #ffe7a8;transform:rotate(-18deg);
  filter:drop-shadow(0 0 18px rgba(255,231,168,.45))}
@keyframes twinkle{from{opacity:.6}to{opacity:1}}

/* ---------- ตัวเล่นนิทาน ---------- */
.sv-player{position:fixed;inset:0;z-index:40;background:#14110c;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.sv-stage{position:absolute;inset:0;overflow:hidden;background:#f4ead7}
.night .sv-stage{background:#04060d}
.sv-pic{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.sv-pic.show{opacity:1}
.sv-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform;
  animation:kb var(--kbd,30s) ease-in-out both}
@keyframes kb{from{transform:scale(var(--s0,1.02)) translate(var(--x0,0),var(--y0,0))}to{transform:scale(var(--s1,1.12)) translate(var(--x1,0),var(--y1,0))}}
.paused .sv-pic img{animation-play-state:paused}
.night .sv-pic img{filter:brightness(.72) saturate(.85)}
.sv-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.16) 100%)}
.night .sv-vig{background:radial-gradient(ellipse at center,transparent 42%,rgba(2,4,20,.62) 100%)}

.sv-title{position:absolute;left:50%;top:max(96px,11%);z-index:3;transform:translate(-50%,-24px);opacity:0;transition:opacity .7s,transform .7s;
  text-align:center;pointer-events:none;background:var(--c,#ff9f1c);color:#fff;border-radius:30px;padding:12px 44px 18px;
  border:6px solid #fff;box-shadow:0 8px 0 rgba(0,0,0,.16),0 18px 40px rgba(0,0,0,.25);white-space:nowrap}
.sv-title.on{opacity:1;transform:translate(-50%,0)}
.sv-title-s{display:block;font-size:clamp(18px,2.2vw,24px);opacity:.95}
.sv-title-t{display:block;font-size:clamp(40px,6vw,70px);font-weight:600;line-height:1.1;text-shadow:0 3px 0 rgba(0,0,0,.16)}
.night .sv-title{filter:brightness(.88)}

.sv-moral{position:absolute;left:50%;top:50%;z-index:3;width:min(780px,78vw);transform:translate(-50%,-44%) scale(.96);opacity:0;
  transition:opacity .8s,transform .8s;pointer-events:none;background:rgba(255,253,246,.95);border-radius:32px;padding:24px 36px 30px;
  text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.3);border:6px solid var(--c,#ffcf5c)}
.sv-moral.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sv-moral-h{font-size:clamp(20px,2.4vw,27px);color:#c46a00;font-weight:600;margin-bottom:8px}
.sv-moral-h::before{content:"🌟 "}
.sv-moral-t{font-size:clamp(25px,3.2vw,37px);line-height:1.5;color:#3b2a14;font-weight:600;text-wrap:balance}
.night .sv-moral{background:rgba(14,20,50,.88);border-color:#ffd66b;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.night .sv-moral-h{color:#ffd66b}
.night .sv-moral-t{color:#eef0ff}

/* คำบรรยาย: แสดงทีละประโยค คำที่อ่านแล้วเข้มขึ้นตามเสียง */
.sv-cap{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;transform:translate(-50%,14px);
  width:max-content;max-width:min(70vw,880px);display:flex;align-items:center;gap:14px;padding:12px 26px 14px;border-radius:26px;
  background:rgba(255,252,244,.92);box-shadow:0 6px 24px rgba(0,0,0,.18);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.sv-cap.on{opacity:1;transform:translate(-50%,0)}
.capoff .sv-cap{display:none}
.sv-cap-av{width:56px;height:56px;object-fit:contain;flex:none;margin:-6px 0}
.sv-cap-tx{font-size:clamp(21px,2.5vw,30px);line-height:1.42;color:rgba(59,42,20,.4);font-weight:600;text-wrap:pretty}
.sv-cap .w{transition:color .25s}
.sv-cap .w.on{color:#3b2a14}
.sv-cap.ch .w.on{color:var(--sc,#c0392b)}
.night .sv-cap{background:rgba(9,13,34,.6);box-shadow:none}
.night .sv-cap-tx{color:rgba(225,230,255,.34)}
.night .sv-cap .w.on,.night .sv-cap.ch .w.on{color:#f3f1ff}

/* แถบปุ่มด้านบน */
.sv-bar{position:absolute;left:0;right:0;top:0;z-index:11;display:flex;align-items:center;gap:12px;pointer-events:none;
  padding:calc(12px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 12px calc(14px + env(safe-area-inset-left))}
.sv-bar>*{pointer-events:auto}
.sv-btn{font:inherit;width:64px;height:64px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#3b2a14;
  box-shadow:0 4px 0 rgba(0,0,0,.15);display:grid;place-items:center;cursor:pointer;font-size:30px;flex:none;transition:opacity .3s}
.sv-btn .i{line-height:1}
.sv-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.sv-btn svg{width:30px;height:30px;fill:currentColor}
#capBtn svg .o{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#capBtn{color:#e07a00}
.capoff #capBtn{opacity:.5;color:#8a7a66}
.sv-dots{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;pointer-events:none}
.sv-dots .d{width:12px;height:12px;border-radius:7px;background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:width .3s,background .3s}
.sv-dots .d.done{background:rgba(255,255,255,.95)}
.sv-dots .d.on{width:32px;background:var(--c,#ff9f1c)}
.night .sv-btn svg{width:26px;height:26px}
.night #capBtn{color:#e8ecff}
.night .sv-btn{width:56px;height:56px;font-size:25px;background:rgba(16,22,54,.55);color:#e8ecff;box-shadow:none;opacity:.7}
.night #replay{display:none}
.night .sv-dots .d{background:rgba(255,255,255,.2);box-shadow:none}
.night .sv-dots .d.done{background:rgba(255,255,255,.4)}
.night .sv-dots .d.on{background:rgba(255,214,107,.75)}

/* ลูกศรเปิดหน้า */
.sv-nav{position:absolute;top:50%;z-index:6;width:86px;height:86px;margin-top:-43px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);box-shadow:0 6px 0 rgba(0,0,0,.15),0 10px 24px rgba(0,0,0,.18);display:grid;place-items:center;transition:opacity .3s}
.sv-nav svg{width:46px;height:46px;fill:none;stroke:#e07a00;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.sv-nav.prev{left:calc(12px + env(safe-area-inset-left))}
.sv-nav.next{right:calc(12px + env(safe-area-inset-right))}
.sv-nav[disabled]{opacity:0;pointer-events:none}
.sv-nav:active{transform:scale(.92)}
.sv-nav.nudge{background:#ffcf5c;animation:nudge 1.1s ease-in-out infinite}
.sv-nav.nudge svg{stroke:#fff}
@keyframes nudge{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(7px) scale(1.12)}}
.night .sv-nav{width:64px;height:64px;margin-top:-32px;opacity:.2;background:rgba(16,22,54,.6);box-shadow:none;animation:none}
.night .sv-nav svg{stroke:#cfd6ff}

/* สติกเกอร์ตัวละคร (แตะแล้วพูด) */
.sv-chars{position:absolute;left:0;right:0;bottom:0;height:0;z-index:5}
.night .sv-chars,.gn .sv-chars,.sv-player.qz .sv-chars{display:none}
.sv-stk{position:absolute;bottom:calc(8px + env(safe-area-inset-bottom));border:0;background:transparent;padding:0;cursor:pointer;
  transform-origin:50% 100%;animation:stkin .7s cubic-bezier(.3,1.6,.5,1) both}
.sv-stk img{display:block;height:clamp(110px,20vh,175px);width:auto;transform-origin:50% 100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.sv-stk.left{left:calc(8px + env(safe-area-inset-left))}
.sv-stk.right{right:calc(8px + env(safe-area-inset-right))}
.sv-stk.talk img{animation:stktalk .45s ease-in-out infinite alternate}
.sv-stk.boing img{animation:boing .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes stktalk{from{transform:rotate(-3deg)}to{transform:rotate(3deg) translateY(-6px)}}
@keyframes boing{0%{transform:none}30%{transform:scale(1.14,.86)}60%{transform:scale(.93,1.1) translateY(-16px)}100%{transform:none}}
@keyframes stkin{from{transform:translateY(130%)}to{transform:none}}
.sv-bub{position:absolute;bottom:100%;margin-bottom:4px;white-space:nowrap;background:#fff;color:#3b2a14;font-size:21px;font-weight:600;
  padding:8px 16px;border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.22);animation:popin .25s ease both;pointer-events:none}
.sv-stk.left .sv-bub{left:0}
.sv-stk.right .sv-bub{right:0}

/* คำถามท้ายเรื่อง */
.sv-quiz{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(40,28,10,.32);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:fadein .4s ease}
.sv-q-card{width:min(960px,90vw);background:rgba(255,252,244,.97);border-radius:34px;padding:18px 28px 30px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3);animation:popin .45s cubic-bezier(.3,1.4,.5,1) both}
.sv-q-stars{display:flex;justify-content:center;gap:12px;font-size:42px;line-height:1.2;margin-bottom:4px}
.sv-q-stars span{filter:grayscale(1) opacity(.3);transition:filter .3s}
.sv-q-stars span.on{filter:none;animation:starpop .7s ease}
.sv-q-q{display:flex;align-items:center;justify-content:center;gap:14px;font-size:clamp(26px,3.3vw,40px);font-weight:600;color:#3b2a14;
  line-height:1.3;margin-bottom:22px}
.sv-q-opts{display:flex;justify-content:center;align-items:center;gap:clamp(14px,2.6vw,30px);flex-wrap:wrap}
.sv-opt{position:relative;border:0;padding:0;cursor:pointer;border-radius:26px;background:#fff;overflow:hidden;font:inherit;
  box-shadow:0 6px 0 rgba(0,0,0,.12),0 10px 24px rgba(0,0,0,.1);animation:popin .4s cubic-bezier(.3,1.5,.5,1) both;transition:opacity .3s}
.sv-opt.pg{width:clamp(200px,25vw,286px);aspect-ratio:4/3}
.sv-opt.pg img{display:block;width:100%;height:100%;object-fit:cover}
.sv-opt.av{width:clamp(170px,19vw,224px);height:clamp(196px,23vw,260px);background:radial-gradient(circle at 50% 62%,#fff8e2,#ffe2a6)}
.sv-opt.av img{position:absolute;left:50%;bottom:8px;height:88%;transform:translateX(-50%)}
.sv-opt.em,.sv-opt.tx{width:clamp(160px,18vw,210px);height:clamp(160px,18vw,210px);display:grid;place-items:center;line-height:1;
  background:linear-gradient(#fffaf0,#ffe7b0);font-size:clamp(84px,10vw,124px)}
.sv-opt.tx{font-weight:600;color:#e07a00}
.sv-opt.ok{box-shadow:0 0 0 8px #4cc96b,0 10px 24px rgba(0,0,0,.15);animation:okpop .5s ease}
.sv-opt.no{animation:shake .45s ease}
.sv-opt.hint{animation:hint 1s ease-in-out infinite}
.sv-opt.dim{opacity:.3}
@keyframes okpop{50%{transform:scale(1.08)}}
@keyframes hint{50%{transform:scale(1.06);box-shadow:0 0 0 7px #ffcf5c,0 10px 24px rgba(0,0,0,.12)}}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes starpop{0%{transform:scale(.3) rotate(-40deg)}55%{transform:scale(1.6) rotate(15deg)}100%{transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.sv-end{position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:rgba(40,28,10,.3);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadein .4s ease}
.sv-end-card{background:#fffaf0;border-radius:34px;padding:26px 40px 34px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:popin .45s cubic-bezier(.3,1.5,.5,1) both}
.sv-end-stars{font-size:62px;letter-spacing:4px;line-height:1.2}
.sv-end-t{font-size:clamp(36px,5vw,56px);font-weight:600;color:#2f7d4f;margin:2px 0 18px}
.sv-end .controls{justify-content:center;flex-wrap:wrap}

.sv-resume{position:absolute;inset:0;z-index:10;display:none;place-items:center;border:0;padding:0;background:rgba(0,0,0,.35);cursor:pointer}
.paused .sv-resume{display:grid}
.sv-resume span{width:132px;height:132px;border-radius:50%;background:#ff9f1c;display:grid;place-items:center;box-shadow:0 8px 0 #c96f00}
.sv-resume svg{width:62px;height:62px;fill:#fff;margin-left:10px}
.night .sv-resume span{background:#3c4c94;box-shadow:0 8px 0 #222c5c}

.sv-fade{position:absolute;inset:0;z-index:12;background:#000;opacity:0;pointer-events:none;transition:opacity 50s linear}
.sv-fade.on{opacity:.92}
.gn .sv-cap,.gn .sv-nav,.gn .sv-dots,.gn #replay,.gn #capBtn{display:none}

.sv-spark{position:absolute;z-index:7;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,#fff 0 30%,#ffe27a 31% 62%,transparent 63%);animation:spark .75s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.confetti{position:fixed;top:-20px;width:14px;height:20px;border-radius:3px;z-index:95;pointer-events:none;animation:fall 1.6s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

@media (max-height:620px){
  .sv-btn{width:52px;height:52px;font-size:24px}
  .sv-nav{width:66px;height:66px;margin-top:-33px}
  .sv-title{top:76px;padding:8px 30px 12px}
}
@media (prefers-reduced-motion:reduce){
  .sv-pic img{animation:none}
}