/* Exploded card — ทุกชั้นมาจากไฟล์งานจริงใน assets-bc/ (สร้างด้วย tools/build_bc_assets.py)
   --p   = ความคืบหน้าการแยกชั้น 0→1 (ฉากแรกมาจากสกรอลล์ ในหน้าต่างแบบมาจากแถบเลื่อน)
   --lp  = ความคืบหน้าของแต่ละชั้น ชั้นล่างออกก่อน ชั้นบนตามหลัง */
@property --p{syntax:'<number>';initial-value:0;inherits:true}
@property --tx{syntax:'<number>';initial-value:0;inherits:true}
@property --ty{syntax:'<number>';initial-value:0;inherits:true}

/* ── ฉากแรก: ค้างจอระหว่างสกรอลล์ ───────────────────────── */
.explode{position:relative;height:320vh;border-bottom:1px solid #ffffff12;margin-bottom:32px}
.explode__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:auto 1fr;grid-template-areas:"stage copy" "stage side";column-gap:48px;align-content:center;overflow:hidden;padding:32px 0}
.x-copy{grid-area:copy;align-self:end;position:relative;z-index:2}
.x-copy h1{margin-bottom:14px}
.x-copy .hero-description{margin-bottom:0}
.x-copy b{color:#e9dfce;font-weight:500}
.x-side{grid-area:side;align-self:start;min-width:0;position:relative;z-index:2}
.x-stage{position:relative;z-index:1}
.x-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px}
.x-stage{grid-area:stage;display:grid;place-items:center;perspective:1300px;perspective-origin:50% 38%;min-height:0;--cw:min(420px,40vw)}
.x-hint{position:absolute;left:0;right:0;bottom:22px;text-align:center;margin:0;font-size:11px;letter-spacing:.14em;color:#8798ac;opacity:calc(1 - var(--p)*5);pointer-events:none}
.x-rail{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff12}
.x-rail i{display:block;height:100%;width:calc(var(--p)*100%);background:linear-gradient(90deg,#16aec6,#d42b7c,#e5b01b)}

/* ── การ์ดและชั้น ─────────────────────────────────────── */
.x-card{position:relative;width:var(--cw);aspect-ratio:var(--ar);transform-style:preserve-3d;--gz:calc(var(--cw)*.17);
 transform:rotateX(calc(var(--p)*52deg + var(--ty)*1deg)) rotateZ(calc(var(--p)*-24deg)) rotateY(calc(var(--tx)*1deg)) scale(calc(1 - var(--p)*.12))}
.x-card[data-orient=portrait]{width:calc(var(--cw)*.62)}
.x-layer{position:absolute;inset:0;--lp:clamp(0,calc((var(--p) - var(--i)*.1)/.45),1);
 transform:translateZ(calc(var(--lp)*var(--i)*var(--gz)));
 filter:drop-shadow(0 calc(var(--lp)*16px) calc(var(--lp)*20px) rgb(0 0 0/calc(.12 + var(--lp)*.3)))}
.x-face{position:absolute;inset:0;-webkit-mask:var(--shape) center/100% 100% no-repeat;mask:var(--shape) center/100% 100% no-repeat}
.x-paper .x-face{background:radial-gradient(120% 140% at 30% 15%,#fffdf7 0,#f2efe7 55%,#ddd6c8 100%)}
.x-paper .x-face::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(102deg,#00000006 0 1px,transparent 1px 4px)}
.x-print .x-face img{display:block;width:100%;height:100%}
.x-lam .x-face{background:linear-gradient(148deg,#ffffff30,#ffffff06 45%,#ffffff1c);opacity:calc(.35 + var(--lp)*.65)}
.x-lam .x-face::after{content:"";position:absolute;inset:0;border:1px solid #ffffff55;-webkit-mask:var(--shape) center/100% 100% no-repeat;mask:var(--shape) center/100% 100% no-repeat}
.x-ink{position:absolute;inset:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
/* สปอตยูวี = ฟิล์มใส เงาเฉพาะจุด แสงวิ่งตามการแยกชั้น */
.x-uv .x-ink{background:linear-gradient(112deg,#ffffff55 0,#ffffff55 calc(var(--p)*70% + 5%),#fffffff2 calc(var(--p)*70% + 18%),#ffffff55 calc(var(--p)*70% + 31%),#ffffff55 100%)}
/* ฟอยล์ = โลหะ ต้องมีทั้งด้านมืดและสว่าง */
.x-foil .x-ink{background:linear-gradient(100deg,#8c6e2e,#f0dca4 38%,#c9a75e 52%,#8c6e2e 78%,#ebd79e)}
.x-foil.holo .x-ink{background:linear-gradient(100deg,#38d9ff,#ff5fcf 20%,#ffe14d 38%,#4dffa6 56%,#6f7dff 74%,#ff7ad9 92%);background-size:240% 100%;background-position:calc(var(--p)*100%) 0;filter:saturate(1.2) brightness(1.08)}
.x-cut .x-face{-webkit-mask:none;mask:none}
.x-cut svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:var(--lp)}
.x-cut path{fill:none;stroke:#ff4f9a;stroke-width:1.6;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}

/* ── รายการชั้น ─────────────────────────────────────── */
.x-specs{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid #ffffff14}
.x-spec{display:grid;grid-template-columns:2.2rem 1fr auto;gap:12px;align-items:baseline;padding:.6rem 0;border-bottom:1px solid #ffffff14;color:#9aa8ba;font-size:15px;transition:color .25s,border-color .25s}
.x-spec .no{font-size:13px;letter-spacing:.06em;color:#8293a8;transition:color .25s}
.x-spec .val{font-size:13px;color:#8293a8;text-align:right;transition:color .25s}
.x-spec[data-on="1"]{color:#fff;border-bottom-color:var(--mark)}
.x-spec[data-on="1"] .no{color:var(--mark)}
.x-spec[data-on="1"] .val{color:#d3dbe5}
.x-spec[data-here="0"] .name::after{content:" · อีกด้าน";color:#8193a8;font-size:11px}

/* อ่านง่ายทุกวัย: ตัวหนังสือรายละเอียดไม่เล็กเกินไป */
.card-meta .detail{font-size:13px;color:#c3cdd9}
.count-line,.album-head p,.footer-note{font-size:13px}

/* แถบรายการเลือกไม่บังฉากแรก */
.in-hero .selection{opacity:0;pointer-events:none;transform:translateY(12px)}
.selection{transition:opacity .25s,transform .25s}

/* ── อัลบั้ม: รูปทรงจริงและป้ายงานพิเศษ ───────────────────── */
body:not(.book) .image-open.fit{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;aspect-ratio:16/11}
body:not(.book) .image-open.fit img{width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;object-fit:contain}
.book .image-open.fit img[data-orient=portrait]{width:62%;margin-inline:auto}
img.shaped{-webkit-mask:var(--shape) center/100% 100% no-repeat;mask:var(--shape) center/100% 100% no-repeat;border-radius:0!important}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.badges span{font-size:12px;line-height:1.2;padding:4px 8px;border-radius:20px;border:1px solid #ffffff26;color:#c9d3df}
.badges .b-foil{border-color:#c9a75e90;color:#ebd79e}
.badges .b-uv{border-color:#ffffff60;color:#fff}
.badges .b-die{border-color:#d42b7c90;color:#ff9cc6}

/* ── หน้าต่างแบบ ─────────────────────────────────────── */
[hidden]{display:none!important}
#detailDialog{max-width:min(980px,calc(100vw - 24px));width:100%}
.d-bar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;margin:4px 0 18px}
.d-tabs,.d-sideswitch{display:flex;border:1px solid #ffffff1a;border-radius:30px;padding:4px;gap:2px}
.d-tabs button,.d-sideswitch button{border:0;background:none;color:#b3bfce;border-radius:24px;padding:7px 14px;font-size:12px;min-height:34px}
.d-tabs button[aria-selected=true],.d-sideswitch button[aria-pressed=true]{background:#e9dfce;color:#101722}
.d-variants{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.d-variants button{width:30px;height:30px;padding:0;border-radius:6px;border:1px solid #ffffff30;background:var(--sw) center/cover;color:transparent;overflow:hidden}
.d-variants button[aria-pressed=true]{outline:2px solid #e9dfce;outline-offset:2px}
.d-variants small{color:#9fafc1;font-size:11px;margin-right:4px}
.spread img.shaped{box-shadow:none}
.spread .portrait{max-width:62%;margin-inline:auto}
.d-layers{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.d-stage{display:grid;place-items:center;perspective:1100px;perspective-origin:50% 38%;min-height:340px;--cw:min(360px,74vw)}
.d-range{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:12px;color:#b3bfce}
.d-range input{flex:1;accent-color:#e9dfce}
.d-note{color:#9fafc1;font-size:11px;line-height:1.7;margin:14px 0 0}
.d-note:empty{display:none}

/* ── จอแคบ ─────────────────────────────────────────── */
@media(max-width:900px){
 .explode__pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"copy" "stage" "side";padding:18px 0 26px;row-gap:6px}
 .x-copy{align-self:start}
 .x-copy h1{font-size:30px;line-height:1.3;margin-bottom:8px}
 .x-copy .collection-note{margin-bottom:8px!important}
 .x-copy .hero-description{font-size:13px}
 .x-stage{--cw:min(320px,78vw,32svh)}
 .x-card{--gz:calc(var(--cw)*.12)}
 .x-side .x-specs{background:linear-gradient(#10172200,#101722e6 18%)}
 .x-actions,.x-side .hero-caption{display:none}
 .x-specs{margin-top:4px}
 .x-spec{padding:.36rem 0;font-size:13px;gap:8px}
 .x-spec .val{font-size:12px}
 .d-layers{grid-template-columns:1fr;gap:8px}
 .d-stage{min-height:250px;--cw:min(280px,70vw)}
}
@media(max-height:700px) and (max-width:900px){.x-copy .hero-description{display:none}.x-spec{padding:.26rem 0}}

/* ── ลดการเคลื่อนไหว: แสดงท่าแยกชั้นค้างไว้ ไม่ค้างจอ ───────────── */
@media(prefers-reduced-motion:reduce){
 .explode{height:auto}
 .explode__pin{position:static;height:auto;min-height:0;padding:40px 0}
 .x-stage{min-height:360px}
 .x-hint,.x-rail{display:none}
}

/* ลิงก์ที่มาท้ายหน้า */
.footer-note a{color:#e9dfce;text-decoration:underline;text-underline-offset:2px}

/* ช่องเลือกชุดแบบไม่หดจนอ่านไม่ออกบนจอแคบ */
#series{flex:0 0 auto;min-width:10.5em}