/* สไตล์ส่วนประกอบ — ต้องอยู่หลัง Tailwind (ท้าย <body>)
   ย้ายออกมาจาก index.html — ห้ามเปลี่ยนลำดับกฎในไฟล์นี้
   แก้ไฟล์นี้แล้วต้องบวกเลข ?v= ใน index.html ด้วย */

@keyframes gachaShake {
    0%,100% { transform: translateX(0) rotate(0deg); }
    15% { transform: translateX(-7px) rotate(-6deg); }
    30% { transform: translateX(7px) rotate(6deg); }
    45% { transform: translateX(-5px) rotate(-4deg); }
    60% { transform: translateX(5px) rotate(4deg); }
    75% { transform: translateX(-3px) rotate(-2deg); }
}
@keyframes gachaReveal {
    0% { transform: scale(.7); opacity: 0; }
    60% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes embPulse {
    0%,100% { filter: drop-shadow(0 0 3px rgba(245,158,11,.55)); }
    50%     { filter: drop-shadow(0 0 12px rgba(245,158,11,.9)); }
}
@keyframes pityGlow {
    0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
    50%     { box-shadow: 0 0 10px 2px rgba(245,158,11,.55); }
}
@keyframes shopGlow {
    0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.0), 0 0 8px -2px rgba(245,158,11,.5); }
    50%     { box-shadow: 0 0 0 1px rgba(245,158,11,.35), 0 0 16px -2px rgba(245,158,11,.85); }
}
@keyframes shopShimmer {
    0%   { background-position: -140% 0; }
    100% { background-position: 240% 0; }
}
.shop-glow { animation: shopGlow 2.2s ease-in-out infinite; }
/* วางประกายทับบนพื้นหลัง inline ของปุ่ม (ใช้ ::after เพราะ inline style ทับ background ของคลาสได้) */
.shop-shimmer{ position:relative; overflow:hidden; }
.shop-shimmer::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
    background-size:220% 100%; background-repeat:no-repeat;
    animation: shopShimmer 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce){
    .shop-glow, .shop-shimmer { animation: none; }
}

/* ── ⚜️ ลายทองประดับของแต่ง ── */
/* ชั้น SVG ลอยทับพื้น ไม่กินคลิก */
.orn-abs{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; overflow:visible;
}
.orn-layer{ position:absolute; inset:0; pointer-events:none; }

/* นามบัตร: กันเนื้อในไม่ให้ชนขอบลาย */
.orn-card{ position:relative; border-radius:14px; padding:14px 16px; }
.orn-inner{ position:relative; }
.orn-div{ display:block; width:100%; height:8px; margin:3px 0 4px; }

/* ตราประทับ ๘ มุมขวา */
.orn-seal{
    flex-shrink:0; width:28px; height:28px; border-radius:50%;
    border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px; line-height:1; opacity:.65;
    background:rgba(255,255,255,.4);
}

/* กรอบโปรไฟล์: วงแหวนกินพื้นที่รอบนอก รูปอยู่กึ่งกลางเป๊ะ */
.orn-av{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0; vertical-align:middle;
}
.orn-av-in{ position:relative; display:flex; }
.orn-glow{ filter: drop-shadow(0 0 4px rgba(227,182,44,.85)); }

/* ตัวอย่างนามบัตรในการ์ดร้าน */
.orn-swatch{
    position:relative; width:100%; height:100%; border-radius:6px; overflow:hidden;
    display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* ═══════════════════════════════════════════════════
   🎨 ลูกเล่นของแต่งไล่ตามระดับราคา
   ปัญหาเดิม: ทุกระดับหน้าตาเหมือนกันหมด ต่างแค่สี ทำให้ของแพงไม่รู้สึกคุ้ม
   กติกา: ธรรมดา=เรียบ · หายาก=มีลาย · พิเศษ=เรืองแสง · ตำนาน=มีอนิเมชัน
   ═══════════════════════════════════════════════════ */

/* ── หายาก: จุดประดับสี่มุม (เบากว่ากรอบเต็มลาย) ── */
.nc-corners{ position:absolute; inset:0; pointer-events:none; }
.nc-corners::before, .nc-corners::after{
    content:''; position:absolute; width:5px; height:5px; border-radius:50%;
    background:var(--nc-dot,#D9A520); opacity:.55;
}
.nc-corners::before{ top:7px;    left:7px;  box-shadow:calc(100% + 0px) 0 0 var(--nc-dot,#D9A520); }
.nc-corners::after { bottom:7px; left:7px;  box-shadow:calc(100% + 0px) 0 0 var(--nc-dot,#D9A520); }
/* เส้นคั่นเรียบของนามบัตรระดับธรรมดา (แทนเส้นเพชรของระดับสูง) */
.nc-rule{ display:block; height:1px; width:100%; margin:4px 0 3px; opacity:.7; }

/* ── พิเศษขึ้นไป: เรืองแสงนิ่ง ── */
.nc-glow{ box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 4px 16px -6px currentColor; }

/* ── ตำนาน: แสงกวาดผ่าน + อนุภาคลอย ── */
.nc-legend{ position:relative; }
.nc-shimmer{
    position:absolute; inset:0; pointer-events:none; border-radius:inherit; overflow:hidden;
    background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);
    background-size:220% 100%; background-repeat:no-repeat;
    animation:ncShimmer 3.2s linear infinite;
}
@keyframes ncShimmer{ 0%{ background-position:-140% 0; } 100%{ background-position:240% 0; } }

.nc-particles{
    position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background-image:
        radial-gradient(1.6px 1.6px at 20% 30%,rgba(255,255,255,.95),transparent),
        radial-gradient(1.4px 1.4px at 72% 22%,rgba(255,236,170,.9),transparent),
        radial-gradient(1.8px 1.8px at 46% 76%,rgba(255,255,255,.9),transparent),
        radial-gradient(1.3px 1.3px at 86% 64%,rgba(255,236,170,.85),transparent);
    animation:ncFloat 6s ease-in-out infinite alternate;
}
@keyframes ncFloat{ from{ transform:translateY(0); opacity:.75; } to{ transform:translateY(-5px); opacity:1; } }

/* ── สีชื่อระดับตำนาน: ไล่เฉดทองไหลตลอด ── */
@keyframes aurumFlow{ 0%{ background-position:0% 50%; } 100%{ background-position:250% 50%; } }

/* ── กรอบโปรไฟล์ระดับตำนาน: วงแหวนหมุนช้า ๆ ── */
.orn-av.av-spin svg{ animation:avSpin 14s linear infinite; transform-origin:50% 50%; }
@keyframes avSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ── กรอบข้อความระดับตำนาน: แสงกวาด ── */
.bub-shimmer{ position:relative; overflow:hidden; }
.bub-shimmer::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
    background-size:220% 100%; background-repeat:no-repeat;
    animation:ncShimmer 3.6s linear infinite;
}

/* ── พื้นหลังแชทระดับตำนาน: ดาวกะพริบ ── */
.chatbg-twinkle{ animation:bgTwinkle 4.5s ease-in-out infinite alternate; }
@keyframes bgTwinkle{ from{ filter:brightness(1); } to{ filter:brightness(1.09); } }

/* ── ที่คั่นระดับตำนาน: ประกายเต้น ── */
.bm-comet{ animation:bmPulse 2.4s ease-in-out infinite; }
@keyframes bmPulse{ 0%,100%{ filter:drop-shadow(0 0 1px rgba(245,158,11,.5)); } 50%{ filter:drop-shadow(0 0 5px rgba(245,158,11,.95)); } }

/* ── ธีมหน้าอ่านระดับตำนาน: ดาวเคลื่อนช้ามาก (ไม่รบกวนการอ่าน) ── */
.reader-container.rd-animated{ animation:rdDrift 40s ease-in-out infinite alternate; }
@keyframes rdDrift{ from{ background-position:0 0; } to{ background-position:0 -26px; } }

@media (prefers-reduced-motion: reduce){
    .nc-shimmer, .nc-particles, .bub-shimmer::after,
    .chatbg-twinkle, .bm-comet, .orn-av.av-spin svg,
    .reader-container.rd-animated{ animation:none !important; }
}
/* Tailwind CDN บางครั้งวาง .hidden ไว้หลัง media query ทำให้ lg:flex แพ้
   จึงคุมลำดับเองด้วยคลาสนี้ เพื่อให้แน่ใจว่าโชว์เฉพาะจอกว้างจริง ๆ */
/* Tailwind CDN วาง .hidden ไว้หลัง media query ทำให้ "hidden sm:block" ไม่เคยโชว์
   จึงทำ utility เองเพื่อคุมลำดับให้แน่นอน */
.only-lg { display: none; }
@media (min-width: 1024px) { .only-lg { display: flex; } }
.from-md { display: none; }
@media (min-width: 768px)  { .from-md { display: block; } }

/* ── ชั้นบนหน้าแรก ── */
.home-top { margin-bottom: 2.5rem; }
/* จอแคบไม่มี grid จึงไม่มี gap มาคั่น — การ์ดนักอ่านจะชิดแถว "กำลังมาแรง" พอดี
   ต้องเว้นระยะเอง (จอกว้างไม่ต้อง เพราะ gap ของ grid จัดการอยู่แล้ว) */
.home-side { margin-top: 1.75rem; }
@media (min-width: 1024px) {
    .home-top { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 1.5rem; align-items: start; }
    .home-side { position: sticky; top: 5rem; margin-top: 0; }
}
/* ── 👑 ตู้โชว์ของแต่งระดับตำนานในกาชา ── */
.legend-case{
    background:linear-gradient(135deg,#fffdf4,#fdf3d8);
    border:1px solid #ecd9a4; border-radius:1.1rem; padding:.7rem .8rem;
}
.legend-row{
    display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.15rem;
    scrollbar-width:thin;
}
.legend-item{ flex:0 0 62px; text-align:center; position:relative; }
.legend-art{
    width:62px; height:52px; border-radius:.65rem; background:#fff;
    border:1px solid #ecd9a4; display:flex; align-items:center; justify-content:center;
    overflow:hidden; padding:4px;
}
.legend-item.is-have .legend-art{ opacity:.5; }
.legend-name{
    font-size:8.5px; font-weight:700; color:#8a5a06; margin-top:.2rem;
    line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.legend-have{
    position:absolute; top:2px; right:2px;
    font-size:7px; font-weight:700; color:#fff; background:#94a3b8;
    border-radius:99px; padding:.05rem .28rem;
}

/* ── 📣 ประกาศรางวัลใหญ่ ── */
/* แบนเนอร์หล่นจากขอบบน — ไม่กินคลิก ไม่ดันเลย์เอาต์ */
.bc-banner{
    position:fixed; top:0; left:50%; transform:translate(-50%,-130%);
    z-index:95; pointer-events:none; opacity:0;
    display:flex; align-items:center; gap:.6rem;
    max-width:min(92vw,560px); padding:.6rem 1rem;
    border-radius:0 0 1.1rem 1.1rem;
    background:linear-gradient(100deg,#fffdf5,#fdf0cf 55%,#f8e3ac);
    border:1px solid #e6c877; border-top:0;
    box-shadow:0 12px 28px -10px rgba(146,100,10,.45);
    transition:transform .42s cubic-bezier(.2,1.3,.4,1), opacity .42s ease;
    overflow:hidden;
}
.bc-banner.bc-in{ transform:translate(-50%,0); opacity:1; }
.bc-banner:empty{ display:none; }
.bc-banner.is-grand{
    background:linear-gradient(100deg,#fff8e0,#f6dd9e 45%,#e9c469);
    border-color:#c9a227;
    box-shadow:0 14px 34px -8px rgba(146,100,10,.6), 0 0 0 1px rgba(255,255,255,.6) inset;
}
.bc-icon{ font-size:20px; line-height:1; flex-shrink:0; }
.bc-text{ font-size:12px; color:#6b4c0c; min-width:0; line-height:1.45; }
.bc-name{ color:#8a5a06; }
.bc-verb{ opacity:.75; margin:0 .15rem; }
.bc-label{ color:#a5610a; }
.bc-detail{
    flex-shrink:0; font-size:9px; font-weight:700; color:#96690C;
    background:rgba(255,255,255,.65); border:1px solid rgba(201,162,39,.45);
    padding:.15rem .45rem; border-radius:99px;
}
/* ประกายกวาดผ่าน เฉพาะรางวัลใหญ่สุด */
.bc-sheen{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
    background-size:220% 100%; background-repeat:no-repeat;
    animation:shopShimmer 2.2s linear infinite;
}

/* ประกาศแทรกกลางห้องแชท — ไม่ใช่ฟองของใคร เลยจัดกลางและใช้โทนเทา */
.bc-chat{
    display:inline-flex; align-items:center; gap:.4rem; max-width:100%;
    background:rgba(241,245,249,.95); border:1px solid #e2e8f0;
    border-radius:99px; padding:.28rem .7rem;
    font-size:10px; color:#64748b; line-height:1.5;
}
.bc-chat.is-grand{
    background:linear-gradient(100deg,#fffaec,#f7e6bb);
    border-color:#e0c168; color:#7a5510;
}
.bc-chat-tag{
    flex-shrink:0; font-size:8px; font-weight:700; letter-spacing:.05em;
    background:#cbd5e1; color:#fff; border-radius:99px; padding:.05rem .4rem;
}
.bc-chat.is-grand .bc-chat-tag{ background:#c9a227; }
.bc-chat-icon{ flex-shrink:0; }
.bc-chat-body{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bc-chat-prize{ color:#a5610a; }
.bc-chat.is-grand .bc-chat-prize{ color:#8a5a06; }
.bc-chat-time{ flex-shrink:0; font-size:8px; opacity:.6; }

/* ── แถบประกาศวิ่ง เหนือแบนเนอร์หน้าแรก ── */
.bc-ticker{
    display:flex; align-items:center; gap:.55rem;
    background:linear-gradient(100deg,#fffdf6,#fdf4dd 60%,#faecc8);
    border:1px solid #ecd9a4; border-radius:99px;
    padding:.3rem .4rem .3rem .75rem;
    box-shadow:0 1px 2px rgba(146,100,10,.06);
    overflow:hidden;
}
.bc-tk-head{
    flex-shrink:0; font-size:10.5px; font-weight:700; color:#8a5a06;
    letter-spacing:.02em; white-space:nowrap;
}
/* ช่องมอง — ไล่จางสองข้างให้ตัวหนังสือค่อย ๆ โผล่/หาย ไม่ใช่ตัดขาด */
.bc-tk-view{
    flex:1; min-width:0; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
}
.bc-tk-track{
    display:flex; align-items:center; gap:1.6rem; width:max-content;
    animation:bcScroll 26s linear infinite;
}
.bc-ticker:hover .bc-tk-track{ animation-play-state:paused; }
/* รายการสั้นกว่าช่องมอง → อยู่นิ่ง อ่านง่ายกว่าปล่อยให้วิ่ง */
.bc-tk-track.is-still{ animation:none; }
@keyframes bcScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.bc-tk-item{
    display:inline-flex; align-items:center; gap:.35rem; flex-shrink:0;
    font-size:11px; color:#7a6a4c; white-space:nowrap;
}
.bc-tk-name{ color:#6b4c0c; }
.bc-tk-verb{ opacity:.7; }
.bc-tk-prize{ color:#a5610a; }
.bc-tk-item.is-grand .bc-tk-prize{
    color:#8a5a06;
    background:rgba(255,255,255,.75); border:1px solid rgba(201,162,39,.5);
    border-radius:99px; padding:.05rem .45rem;
}
.bc-tk-ago{ font-size:9px; opacity:.45; }

.bc-tk-odds{
    flex-shrink:0; font-size:9.5px; font-weight:700; color:#8a5a06;
    background:rgba(255,255,255,.8); border:1px solid rgba(201,162,39,.45);
    border-radius:99px; padding:.25rem .6rem; white-space:nowrap;
    transition:background .15s;
}
.bc-tk-odds:hover{ background:#fff; }

/* จอแคบ: ซ่อนหัวเรื่องกับปุ่ม ให้เนื้อประกาศได้พื้นที่เต็ม */
@media (max-width: 480px){
    .bc-tk-head, .bc-tk-ago{ display:none; }
    .bc-ticker{ padding:.3rem .55rem; }
    .bc-tk-odds{ display:none; }
}

@media (prefers-reduced-motion: reduce){
    .bc-banner{ transition:none; }
    .bc-sheen{ animation:none; }
    .bc-tk-track{ animation:none; }
}

/* ═══════════════════════════════════════════════════
   🌙 โหมดกลางคืนทั้งเว็บ
   หน้าเว็บนี้เขียนด้วยคลาสสีของ Tailwind ตรง ๆ หลายพันจุด
   จะไปไล่เติม dark: ทีละจุดไม่ไหวและพลาดง่าย
   จึงทับที่ตัวคลาสเลย ครอบคลุมทุกจุดที่ใช้คลาสนั้นพร้อมกัน
   ต้องใช้ html.night นำหน้า + !important เพราะ Tailwind CDN
   ฉีด <style> ตอนรันไทม์ ลำดับไม่แน่นอน
   ═══════════════════════════════════════════════════ */
html.night{
    /* โทนม่วงหมึกของพรีเซ็ตหน้าตาใหม่ (26 ต.ค. 2569) */
    --n-bg:       #0f0c1d;   /* พื้นหลังหน้า */
    --n-surface:  #181430;   /* การ์ด กล่อง โมดัล */
    --n-surface2: #211b40;   /* พื้นผิวชั้นสอง ปุ่มรอง */
    --n-surface3: #2a2450;
    --n-border:   #2e2858;
    --n-text:     #ece9fb;
    --n-text2:    #c3bedf;
    /* ตัวหนังสือจาง — ต้องผ่าน WCAG AA (4.5) บนพื้นทั้งสามระดับ (#a39fc0 บน #2a2450 ≈ 5.6) */
    --n-text3:    #a39fc0;
    --bg: var(--n-bg); --card: var(--n-surface); --line: var(--n-border); --muted: var(--n-text3); --text: var(--n-text);
    color-scheme: dark;
}
html.night body{
    background:var(--n-bg) !important;
    color:var(--n-text) !important;
}
/* ระหว่างสลับโหมด ปิด transition ทั้งหน้า ไม่ให้สีไล่ทีละชิ้น */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after{
    transition:none !important;
}

/* ── พื้นผิว ── */
html.night .bg-white{ background-color:var(--n-surface) !important; }
/* ปุ่มขาวที่วางบนพื้นสี/ไล่สี (แบนเนอร์ · ตั๋วบัตรลด) ต้องขาวทั้งสองโหมด — เดิมกลางคืนกลายเป็นพื้นมืด+ตัวหนังสือหมึกเข้ม มองไม่เห็น (เจอ 27 ต.ค.) */
html.night .keep-white{ background-color:#fff !important; color:#2f2560 !important; }
html.night .bg-white\/95{ background-color:rgba(24,20,48,.95) !important; }
html.night .bg-white\/90{ background-color:rgba(24,20,48,.9) !important; }
html.night .bg-white\/80{ background-color:rgba(24,20,48,.8) !important; }
html.night .bg-white\/70{ background-color:rgba(24,20,48,.7) !important; }
html.night .bg-white\/60{ background-color:rgba(24,20,48,.6) !important; }
html.night .bg-white\/25,
html.night .bg-white\/20,
html.night .bg-white\/15,
html.night .bg-white\/12,
html.night .bg-white\/10,
html.night .bg-white\/8{ background-color:rgba(255,255,255,.07) !important; }

html.night .bg-slate-50,
html.night .bg-slate-50\/95,
html.night .bg-slate-50\/90,
html.night .bg-slate-50\/80,
html.night .bg-slate-50\/70,
html.night .bg-slate-50\/50{ background-color:var(--n-surface2) !important; }
html.night .bg-slate-100{ background-color:var(--n-surface2) !important; }
html.night .bg-slate-200{ background-color:var(--n-surface3) !important; }
html.night .bg-slate-300{ background-color:#3a4756 !important; }
html.night .bg-slate-500\/20{ background-color:rgba(148,163,184,.22) !important; }
html.night .bg-slate-500\/10{ background-color:rgba(148,163,184,.14) !important; }
html.night .bg-slate-500\/5{ background-color:rgba(148,163,184,.09) !important; }

/* กล่องเข้มอยู่แล้ว — ดันให้เข้มกว่าพื้นเล็กน้อย จะได้ยังแยกชั้นออก */
html.night .bg-slate-700,
html.night .bg-slate-800,
html.night .bg-slate-900{ background-color:#0a0f14 !important; }
html.night .bg-slate-700\/90{ background-color:rgba(10,15,20,.9) !important; }

/* ── ตัวอักษร ── */
html.night .text-slate-900,
html.night .text-slate-800,
html.night .text-slate-700{ color:var(--n-text) !important; }
html.night .text-slate-600,
html.night .text-slate-500{ color:var(--n-text2) !important; }
html.night .text-slate-400,
html.night .text-slate-300,
html.night .text-slate-200{ color:var(--n-text3) !important; }
html.night .hover\:text-slate-900:hover,
html.night .hover\:text-slate-600:hover,
html.night .hover\:text-slate-500:hover{ color:var(--n-text) !important; }

/* ── เส้นขอบ ── */
html.night .border-slate-50,
html.night .border-slate-100,
html.night .border-slate-200,
html.night .border-slate-200\/80,
html.night .border-slate-300{ border-color:var(--n-border) !important; }
html.night .border-slate-600,
html.night .border-slate-700{ border-color:#3a4756 !important; }
html.night .border-white{ border-color:var(--n-border) !important; }
html.night .divide-slate-100 > * + *{ border-color:var(--n-border) !important; }

/* ── hover ── */
html.night .hover\:bg-slate-50:hover,
html.night .hover\:bg-slate-50\/80:hover,
html.night .hover\:bg-slate-100:hover{ background-color:var(--n-surface3) !important; }
html.night .hover\:bg-slate-200:hover{ background-color:#3a4756 !important; }
html.night .hover\:bg-white:hover,
html.night .hover\:bg-white\/70:hover,
html.night .hover\:bg-white\/40:hover,
html.night .hover\:bg-white\/30:hover,
html.night .hover\:bg-white\/20:hover{ background-color:rgba(255,255,255,.1) !important; }

/* ── พื้นสีอ่อนของแต่ละโทน → เปลี่ยนเป็นสีเรืองบาง ๆ บนพื้นมืด ──
   ถ้าปล่อยไว้จะเป็นแผ่นสว่างจ้ากลางหน้ามืด */
html.night .bg-amber-50,  html.night .bg-amber-50\/70,
html.night .bg-amber-50\/60{ background-color:rgba(245,158,11,.13) !important; }
html.night .bg-amber-100{ background-color:rgba(245,158,11,.2) !important; }
html.night .bg-emerald-50{ background-color:rgba(16,185,129,.13) !important; }
html.night .bg-rose-50, html.night .bg-rose-50\/60{ background-color:rgba(244,63,94,.13) !important; }
html.night .bg-teal-50{ background-color:rgba(20,184,166,.13) !important; }
html.night .bg-sky-50{ background-color:rgba(14,165,233,.13) !important; }
html.night .bg-indigo-50{ background-color:rgba(99,102,241,.13) !important; }
html.night .bg-purple-50{ background-color:rgba(168,85,247,.13) !important; }
html.night .bg-red-50{ background-color:rgba(239,68,68,.13) !important; }
html.night .bg-green-50{ background-color:rgba(34,197,94,.13) !important; }
html.night .bg-blue-50{ background-color:rgba(59,130,246,.13) !important; }
html.night .bg-pink-50{ background-color:rgba(236,72,153,.13) !important; }

html.night .border-amber-100, html.night .border-amber-200{ border-color:rgba(245,158,11,.3) !important; }
html.night .border-emerald-100, html.night .border-emerald-200{ border-color:rgba(16,185,129,.3) !important; }
html.night .border-rose-100, html.night .border-rose-200{ border-color:rgba(244,63,94,.3) !important; }
html.night .border-teal-200, html.night .border-sky-200,
html.night .border-indigo-200, html.night .border-purple-200{ border-color:rgba(148,163,184,.28) !important; }

/* ตัวอักษรโทนเข้มบนพื้นอ่อน ต้องสว่างขึ้นเมื่ออยู่บนพื้นมืด */
html.night .text-amber-700, html.night .text-amber-800{ color:#f4c05a !important; }
html.night .text-emerald-600, html.night .text-emerald-700{ color:#4ade9c !important; }
html.night .text-rose-600, html.night .text-rose-700{ color:#fb7189 !important; }
html.night .text-purple-600, html.night .text-purple-700{ color:#c4a2f5 !important; }
html.night .text-teal-600{ color:#3fd6c4 !important; }
html.night .text-indigo-600{ color:#a3aefc !important; }
html.night .text-sky-600{ color:#54bdf5 !important; }
html.night .text-red-600{ color:#f87171 !important; }

/* ── ช่องกรอกข้อมูล ── */
html.night input, html.night textarea, html.night select{
    background-color:var(--n-surface2) !important;
    color:var(--n-text) !important;
    border-color:var(--n-border) !important;
}
html.night input::placeholder, html.night textarea::placeholder{ color:var(--n-text3) !important; }
html.night .bg-transparent{ background-color:transparent !important; }

/* ── ส่วนประกอบที่เขียน CSS เอง ── */
html.night .novel-card{ background:var(--n-surface) !important; border-color:var(--n-border) !important;
    box-shadow:0 4px 14px -4px rgb(0 0 0 / .5) !important; }
html.night .novel-cover{ border-color:rgb(255 255 255 / .06); }
/* หน้าตาใหม่ 26 ต.ค.: การ์ด (ชิปแท็ก · เส้นคั่นสถิติ · ราคา) · แถบร้านแต้ม · ตัวเรียง */
html.night .novel-card .nc-chip.bg-amber-50{ background:rgb(245 158 11 / .14) !important; color:#fbbf24 !important; }
html.night .novel-card .nc-stats{ border-color:var(--n-border) !important; }
html.night .novel-card .nc-price{ color:#fbbf24 !important; }
html.night .shop-strip{ background:linear-gradient(90deg, rgb(20 184 166 / .14), rgb(6 182 212 / .10)) !important;
    border-color:rgb(45 212 191 / .25) !important; }
html.night .shop-strip .text-teal-800, html.night .shop-strip .text-teal-700{ color:#5eead4 !important; }
html.night .shop-strip .text-teal-600\/80{ color:var(--n-text2) !important; }
html.night .rec-caption{ color:var(--n-text3) !important; }
html.night .sticky-header{ background:rgba(15,12,29,.85) !important; border-color:var(--n-border) !important; }
html.night .quest-strip{ background:var(--n-surface) !important; border-color:var(--n-border) !important; }
html.night .quest-chip{ background:var(--n-surface2) !important; border-color:var(--n-border) !important; }
html.night .quest-chip.is-done{ background:rgba(16,185,129,.15) !important; border-color:rgba(16,185,129,.35) !important; }
html.night .quest-label{ color:var(--n-text2) !important; }
html.night .quest-title{ color:var(--n-text) !important; }
html.night .quest-bar{ background:var(--n-surface3) !important; }
html.night .quest-tick{ background:var(--n-surface3) !important; }
html.night .quest-skel{ background:linear-gradient(90deg,#202a35 25%,#2a3542 37%,#202a35 63%) !important; background-size:400% 100% !important; }

/* แถบประกาศกับของแต่งลายทอง — คงโทนทองไว้ แค่ลดความสว่างของพื้น */
html.night .bc-ticker{
    background:linear-gradient(100deg,#2a2415,#332b18 60%,#3d3219) !important;
    border-color:rgba(201,162,39,.45) !important;
}
html.night .bc-tk-item{ color:#cbbf9e !important; }
html.night .bc-tk-name{ color:#f0dfae !important; }
html.night .bc-tk-prize{ color:#f4c05a !important; }
html.night .bc-tk-odds{ background:rgba(255,255,255,.08) !important; color:#f0dfae !important; }
html.night .bc-tk-head{ color:#f0dfae !important; }
html.night .bc-chat{ background:var(--n-surface2) !important; border-color:var(--n-border) !important; color:var(--n-text2) !important; }
html.night .bc-chat.is-grand{ background:linear-gradient(100deg,#2f2716,#3d3219) !important; color:#f0dfae !important; }
html.night .legend-case{ background:linear-gradient(135deg,#241f12,#2e2717) !important; border-color:rgba(201,162,39,.35) !important; }
html.night .legend-art{ background:var(--n-surface) !important; border-color:rgba(201,162,39,.3) !important; }
html.night .legend-name{ color:#e3cf94 !important; }
html.night .orn-seal{ background:rgba(0,0,0,.2) !important; }

/* เงาบนพื้นมืดต้องเข้มขึ้น ไม่งั้นมองไม่เห็นเลย */
html.night .shadow-sm{ box-shadow:0 1px 2px rgba(0,0,0,.4) !important; }
html.night .shadow-md{ box-shadow:0 4px 8px -2px rgba(0,0,0,.5) !important; }
html.night .shadow-lg{ box-shadow:0 10px 18px -4px rgba(0,0,0,.55) !important; }
html.night .shadow-xl, html.night .shadow-2xl{ box-shadow:0 20px 40px -10px rgba(0,0,0,.65) !important; }

/* ปกนิยายกับรูปผู้ใช้ — ลดความจ้าลงนิดเดียว ไม่ให้แสบตากลางคืน */
html.night img{ filter:brightness(.92); }
html.night .bc-banner img, html.night .orn-abs{ filter:none; }

/* ── 💳 เส้นทางเติมเงิน: โหมดกลางคืนห้ามแตะ ──
   QR ต้องคมและมีขอบขาวล้อมรอบ (quiet zone) ไม่งั้นแอปธนาคารสแกนไม่ติด
   ส่วนภาพสลิปต้องเห็นสีจริง เพราะทีมงานใช้ตรวจยอดกับเวลาโอน */
html.night #topup-qr-image{
    filter:none !important;
    border-color:#f8fafc !important;
    background:#fff !important;
}
html.night #slip-image-display{ filter:none !important; }
/* กล่องรอบ QR ต้องขาวเสมอ ไม่งั้นขอบ quiet zone หายไปกลืนกับพื้นมืด */
html.night #topup-step-1 .bg-white{ background-color:#fff !important; }

/* ── หน้าอ่านต้องไม่โดนโหมดกลางคืนของหน้าหลักยุ่ง ──
   หน้าอ่านมีระบบธีมของตัวเองอยู่แล้ว (สว่าง/ถนอมตา/มืด + ธีมจากร้าน)
   ถ้าปล่อยให้ทับ จะเจอกรณีเลือกธีม "สว่าง" แต่กล่องข้างในกลายเป็นสีมืด
   จึงคืนค่าเดิมให้เฉพาะคลาสที่ใช้จริงข้างใน #reader-page */
html.night #reader-page .bg-white{ background-color:#fff !important; }
html.night #reader-page .bg-slate-50{ background-color:#f8fafc !important; }
html.night #reader-page .bg-slate-800{ background-color:#1e293b !important; }
html.night #reader-page .bg-slate-500\/20{ background-color:rgba(100,116,139,.2) !important; }
html.night #reader-page .bg-slate-500\/10{ background-color:rgba(100,116,139,.1) !important; }
html.night #reader-page .bg-slate-500\/5{ background-color:rgba(100,116,139,.05) !important; }
html.night #reader-page .text-slate-800{ color:#1e293b !important; }
html.night #reader-page .text-slate-600{ color:#475569 !important; }
html.night #reader-page .text-slate-500{ color:#64748b !important; }
html.night #reader-page .text-slate-400{ color:#94a3b8 !important; }
html.night #reader-page .border-slate-50{ border-color:#f8fafc !important; }
html.night #reader-page .border-slate-100{ border-color:#f1f5f9 !important; }
html.night #reader-page .border-slate-500\/10{ border-color:rgba(100,116,139,.1) !important; }
html.night #reader-page img{ filter:none; }

/* ── แถบอ่านต่อ (หน้าแรก) ── */
html.night .continue-strip{ background:var(--n-surface) !important; border-color:var(--n-border) !important; }
html.night .continue-strip .text-slate-800{ color:#f1f5f9 !important; }

/* ── แท่นแชทพับได้ (มุมขวาล่าง) ──
   พับ = แท็บเล็ก 44×46 ชิดขอบจอ · กาง = ปุ่มวงกลม ✕ + เมนู 3 ปุ่มมีชื่อ */
.chat-dock-toggle{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:44px; height:46px; color:#fff; cursor:pointer;
    background:rgb(15 23 42 / .88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgb(255 255 255 / .18); border-right:0;
    border-radius:16px 0 0 16px;
    box-shadow:0 6px 18px -6px rgb(15 23 42 / .45);
    transition:width .22s ease, border-radius .22s ease, margin .22s ease, transform .15s ease, background .15s;
}
.chat-dock-toggle:active{ transform:scale(.94); }
.chat-dock-open-ico{ display:flex; align-items:center; gap:3px; }
.chat-dock-close-ico{ display:none; }

.chat-dock-menu{
    opacity:0; transform:translateY(8px) scale(.96); transform-origin:bottom right;
    pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.chat-dock-item{
    display:flex; align-items:center; gap:10px; padding:5px 5px 5px 14px;
    background:#fff; color:#334155; font-size:13px; font-weight:700; white-space:nowrap;
    border:1px solid #e2e8f0; border-radius:999px; box-shadow:0 8px 20px -8px rgb(15 23 42 / .35);
    transition:transform .12s ease;
}
.chat-dock-item:active{ transform:scale(.96); }
.chat-dock-ico{
    width:34px; height:34px; border-radius:999px; flex-shrink:0; color:#fff; font-size:16px;
    display:flex; align-items:center; justify-content:center;
}

/* กางออก */
#global-chat-widget.dock-open .chat-dock-menu{ opacity:1; transform:none; pointer-events:auto; }
#global-chat-widget.dock-open .chat-dock-toggle{
    width:46px; border-radius:999px; border-right:1px solid rgb(255 255 255 / .18); margin-right:16px;
}
@media (min-width:640px){ #global-chat-widget.dock-open .chat-dock-toggle{ margin-right:24px; } }
#global-chat-widget.dock-open .chat-dock-open-ico{ display:none; }
#global-chat-widget.dock-open .chat-dock-close-ico{ display:block; }

/* เปิดหน้าต่างแชทอยู่ → ซ่อนแท่นทั้งหมด (หน้าต่างมีปุ่ม ✕ ของตัวเอง) */
#global-chat-widget.chat-open .chat-dock-menu,
#global-chat-widget.chat-open .chat-dock-toggle{ display:none; }

html.night .chat-dock-item{ background:var(--n-surface2); color:#e2e8f0; border-color:var(--n-border); }
html.night .chat-dock-ico{ box-shadow:0 0 0 1px rgb(255 255 255 / .15); }   /* ไอคอนแชทรวมสีเข้มจะจมพื้นหลังกลางคืน */

/* ── ช่องค้นหาในแถบลอย (สูงเท่าปุ่มสลับโหมด) ── */
.header-search{ transition:border-color .15s, box-shadow .15s; }
.header-search:focus-within{ border-color:#f59e0b; box-shadow:0 0 0 3px rgb(245 158 11 / .15); }
.header-search input::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }  /* ใช้ปุ่ม ✕ ของเราเอง */
html.night .header-search{ background:var(--n-surface2) !important; border-color:var(--n-border) !important; }
html.night .header-search input{ color:#e2e8f0 !important; }

/* ── ปุ่มสลับโหมด ── */
.night-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px; flex-shrink:0;
    border:1px solid var(--line); background:var(--card); color:#6b6785;
    transition:background .15s, color .15s, border-color .15s;
}
.night-toggle:hover{ background:#f4f3fb; color:#1c1638; }
html.night .hdr-brand{ color:#cfc9ec !important; }
html.night .night-toggle{ background:var(--n-surface2) !important; border-color:var(--n-border) !important; color:#f4c05a !important; }
html.night .night-toggle:hover{ background:var(--n-surface3) !important; }
.night-toggle .ico-sun{ display:none; }
.night-toggle .ico-moon{ display:block; }
html.night .night-toggle .ico-sun{ display:block; }
html.night .night-toggle .ico-moon{ display:none; }

/* ── ปุ่มเลือกธีมในแถบเครื่องมือหน้าอ่าน ── */
.reader-theme-dot{
    position:relative; width:20px; height:20px; border-radius:50%;
    border:1px solid; box-shadow:0 1px 2px rgba(0,0,0,.12);
    transition:transform .15s, box-shadow .15s; flex-shrink:0;
}
@media (min-width:640px){ .reader-theme-dot{ width:24px; height:24px; } }
.reader-theme-dot:hover{ transform:scale(1.12); }
/* วงแหวนบอกว่ากำลังใช้ธีมนี้อยู่ — ใช้ currentColor ของแถบเครื่องมือ จะได้เห็นทั้งพื้นสว่างและมืด */
.reader-theme-dot.is-on{ box-shadow:0 0 0 2px var(--bg-reader), 0 0 0 3.5px currentColor; }
/* ดาวเล็กบอกว่าเป็นธีมจากร้าน ไม่ใช่ของฟรี */
.reader-theme-star{
    position:absolute; right:-3px; top:-4px; font-size:8px; font-style:normal;
    color:#D9A520; text-shadow:0 0 2px rgba(0,0,0,.5); line-height:1;
}

/* ช่องรูปโปรไฟล์ในคอมเมนต์/รีวิว — จองที่ไว้เท่ากันเสมอ ข้อความจะได้ไม่ขยับตอนกรอบโหลดเสร็จ */
.av-slot{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
/* ระยะเยื้องเนื้อรีวิวให้ตรงกับขอบขวาของรูปโปรไฟล์ (28×1.34 ≈ 38px + ช่องไฟ 8px) */
.rv-indent{ margin-left: 46px; }

/* แถบสถานะเหนือแบนเนอร์ — ประกาศ + ภารกิจ วางต่อกันเป็นบล็อกเดียว
   ใช้ gap คุมระยะ ถ้าอันใดอันหนึ่งซ่อน (hidden = display:none) gap จะไม่เหลือช่องว่างค้าง */
.home-hud{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; }
/* ต้องเขียนเอง เพราะ .hidden ของ Tailwind CDN อาจมาก่อนในลำดับ แล้วแพ้ .home-hud */
.home-hud.hidden{ display:none; }

/* ── ✅ แถบภารกิจ — แนวนอนเตี้ย วางใต้แบนเนอร์ ──
   จอแคบ: หัวเรื่องบรรทัดเดียว ชิปเลื่อนซ้ายขวา
   จอกว้าง: ทุกอย่างเรียงบรรทัดเดียวจบ */
.quest-strip{
    background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
    padding:.6rem .85rem; box-shadow:0 1px 2px rgba(15,23,42,.04);
    display:flex; flex-direction:column; gap:.5rem;
}
.quest-strip.is-ready{ border-color:#6ee7b7; box-shadow:0 0 0 3px rgba(16,185,129,.08); }
.quest-head{ display:flex; align-items:center; gap:.55rem; }
.quest-title{ font-weight:700; font-size:12px; color:#475569; white-space:nowrap; }
.quest-count{ font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.quest-bar{ flex:1; height:5px; background:#f1f5f9; border-radius:99px; overflow:hidden; min-width:40px; }
.quest-bar > i{ display:block; height:100%; border-radius:99px; transition:width .5s ease; }

.quest-chips{ display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; }
.quest-chips::-webkit-scrollbar{ display:none; }
.quest-chip{
    display:flex; align-items:center; gap:.3rem; flex:0 0 auto;
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:99px;
    padding:.25rem .6rem .25rem .3rem; max-width:15rem;
}
.quest-chip.is-done{ background:#ecfdf5; border-color:#a7f3d0; }
.quest-tick{
    width:15px; height:15px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:9px; background:#e2e8f0; color:transparent;
}
.quest-chip.is-done .quest-tick{ background:#10b981; color:#fff; }
.quest-label{ font-size:10.5px; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quest-chip.is-done .quest-label{ color:#64748b; text-decoration:line-through; }
.quest-num{ font-size:9.5px; font-weight:700; color:#94a3b8; font-variant-numeric:tabular-nums; flex-shrink:0; }
.quest-chip.is-done .quest-num{ color:#059669; }

/* โครงว่างระหว่างรอข้อมูล */
.quest-strip.is-loading{ opacity:.75; }
.quest-skel{
    display:inline-block; height:22px; border-radius:99px; flex:0 0 auto;
    background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%);
    background-size:400% 100%; animation:questSkel 1.3s ease-in-out infinite;
}
@keyframes questSkel{ 0%{background-position:100% 0} 100%{background-position:0 0} }

.quest-tail{ display:flex; }
.quest-claim{
    flex:1; padding:.5rem; border-radius:.7rem; font-size:11px; font-weight:700; color:#fff;
    background:linear-gradient(90deg,#10b981,#14b8a6); box-shadow:0 3px 8px -2px rgba(16,185,129,.5);
    transition:transform .12s;
}
.quest-claim:active{ transform:scale(.97); }
.quest-hint, .quest-done-note{ font-size:10px; color:#94a3b8; line-height:1.5; }

@media (min-width: 640px){
    .quest-strip{ flex-direction:row; align-items:center; gap:.8rem; padding:.55rem .9rem; }
    .quest-head{ flex:0 0 auto; width:auto; }
    .quest-bar{ width:64px; flex:0 0 64px; }
    .quest-chips{ flex:1; min-width:0; }
    .quest-tail{ flex:0 0 auto; }
    .quest-claim{ flex:0 0 auto; padding:.5rem .9rem; }
    .quest-hint, .quest-done-note{ white-space:nowrap; }
}

/* แถบข้างว่าง (ยังไม่ล็อกอิน / ยังไม่มีอันดับ) → ให้เนื้อหาหลักกินเต็มความกว้าง
   ไม่งั้นจะเหลือช่องว่างใหญ่ทางขวาบนจอคอม */
.home-top.no-side { display: block; }
.home-top.no-side .home-side { display: none; }

/* ปกในสไลด์แนะนำ — คุมขนาดเองไม่ผ่าน Tailwind เพื่อให้แน่ใจว่าโชว์ทุกจอ */
.hero-cover { width: 108px; height: 144px; }   /* มือถือ: สไลด์แนะนำคือของเด่นสุดของหน้า */
@media (min-width: 640px)  { .hero-cover { width: 122px; height: 164px; } }
@media (min-width: 1024px) { .hero-cover { width: 158px; height: 212px; } }

/* เวทีสไลด์ต้องสูงพอให้ปกไม่ล้น */
.hero-stage { min-height: 228px; }
@media (min-width: 640px)  { .hero-stage { min-height: 228px; } }
@media (min-width: 1024px) { .hero-stage { min-height: 284px; } }

/* ปุ่มเลื่อนสไลด์ — โผล่ตอนชี้เมาส์ บนมือถือแสดงตลอดเพราะไม่มี hover */
#hero-slider:hover .hero-nav { opacity: 1; }
#hero-slider .hero-nav:focus-visible { opacity: 1; outline: 2px solid #f59e0b; }
@media (hover: none) { #hero-slider .hero-nav { opacity: .85; } }

@keyframes readRewardPop {
    0%   { transform: translateY(14px) scale(.9); opacity: 0; }
    55%  { transform: translateY(-3px) scale(1.03); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.read-reward-pop { animation: readRewardPop .45s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce){ .read-reward-pop { animation: none; } }
.gacha-spinning { animation: gachaShake .55s ease-in-out infinite; }
.paid-spinning  { animation: gachaShake .45s ease-in-out infinite; }
.gacha-reveal   { animation: gachaReveal .45s cubic-bezier(.34,1.56,.64,1); }
.paid-card-in   { animation: gachaReveal .3s cubic-bezier(.34,1.56,.64,1); }
.emb-complete   { animation: embPulse 2s ease-in-out infinite; }
.pity-full      { animation: pityGlow 1.6s ease-in-out infinite; }

/* ── 📤 พรีวิวในหน้าลงหลายตอน — เลียนแบบหน้าอ่านจริง (พื้นครีม ฟอนต์เซริฟ หัวสองบรรทัด)
      ย้ายมาจาก 8line-uploader/upload.html */
.bulk-preview{
  background:#f8f5ec; color:#2b2b2b; border-radius:16px; padding:30px 26px;
  max-height:480px; overflow:auto;
  font-family:"Sarabun","Noto Serif Thai",Georgia,serif; font-size:17px; line-height:1.9;
}
.bulk-preview .bulk-preview-hd{ text-align:center; margin-bottom:30px; }
.bulk-preview .bulk-preview-hd .n{ font-size:17px; opacity:.6; }
.bulk-preview .bulk-preview-hd .t{ font-size:22px; font-weight:700; }
.bulk-preview p{ margin:0 0 .8em; }
.bulk-preview h2{ text-align:center; margin:0 0 1.2em; font-size:1.35em; line-height:1.5; }
.bulk-preview:empty{ display:none; }

/* ── 🔍 ห้องตรวจ QA (js/bulk-qa.js) ──
   ตัวแก้อยู่ในกล่องเลื่อนของห้องตรวจแล้ว (#qa-scroll) — ปิดการเลื่อนซ้อนของพรีวิวเดิม */
.bulk-preview.qa-editor{ max-height:none; overflow:visible; }
.bulk-preview.qa-indent #qa-body p{ text-indent:2em; }
#qa-body{ outline:none; caret-color:#b45309; min-height:40vh; }
#qa-body:focus{ box-shadow:0 0 0 2px rgba(245,158,11,.25); border-radius:8px; }
/* สีต่อคำ 8 สี — ไฮไลท์ด้วย CSS Custom Highlight API (ไม่ยัด <mark> ลงในตัวแก้)
   จุดสี (.qa-dot) กับตัวนับ (.qa-chip) ในแถบข้างใช้สีชุดเดียวกัน */
::highlight(qa-0){ background:#fde68a; color:#1f2937; }
::highlight(qa-1){ background:#bfdbfe; color:#1f2937; }
::highlight(qa-2){ background:#bbf7d0; color:#1f2937; }
::highlight(qa-3){ background:#fbcfe8; color:#1f2937; }
::highlight(qa-4){ background:#ddd6fe; color:#1f2937; }
::highlight(qa-5){ background:#fed7aa; color:#1f2937; }
::highlight(qa-6){ background:#a5f3fc; color:#1f2937; }
::highlight(qa-7){ background:#e5e7eb; color:#1f2937; }
::highlight(qa-active){ background:#f97316; color:#fff; }
/* คำที่แก้แล้ว — ไฮไลท์คำใหม่ต่อ จะได้ตรวจว่าแก้ออกมาถูกไหม */
::highlight(qa-fix){ background:#dcfce7; color:#14532d; text-decoration:underline 2px #16a34a; text-underline-offset:3px; }
.qa-chip-fix{ background:#dcfce7; color:#15803d; }

/* แถบขั้นตอนบนหัวหน้าลงหลายตอน (bulkShowStep ใน bulk-qa.js) */
#bulk-steps{ scrollbar-width:none; }
#bulk-steps::-webkit-scrollbar{ display:none; }
.bulk-tab{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0;
  padding:7px 14px 7px 8px; border-radius:12px; border:1px solid var(--line); background:var(--card);
  font-size:12px; font-weight:700; color:#6b6785; transition:all .15s; }
.bulk-tab:hover{ border-color:#cfc9ec; color:#3c3758; }
.bulk-tab-n{ width:22px; height:22px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; border:1px solid #cdc8df; color:#6b6785; }
/* ขั้นที่อยู่ = ม่วงหมึกของพรีเซ็ต (เดิมฟ้า) */
.bulk-tab.on{ background:#f4f3fb; border-color:#6f60c0; color:#4a3b90; box-shadow:0 0 0 3px rgb(111 96 192 / .14); }
.bulk-tab.on .bulk-tab-n{ background:#5a49ad; border-color:#5a49ad; color:#fff; }
.bulk-tab.off{ opacity:.45; }

/* การ์ดของห้องตรวจ */
.qa-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 3px rgb(28 22 56 / .05); }
.qa-term{ border-color:#eef2f7; background:#fff; transition:border-color .15s, box-shadow .15s; }
.qa-term:hover{ border-color:#cbd5e1; }
.qa-term.on{ border-color:#3b82f6; box-shadow:0 0 0 3px rgb(59 130 246 / .12); background:#f8fbff; }
.qa-dot{ width:10px; height:10px; border-radius:999px; flex-shrink:0; display:inline-block; }
.qa-chip{ font-size:10px; font-weight:700; line-height:1; padding:3px 6px; border-radius:999px; color:#1f2937; }
.qa-dot.qa-0,.qa-chip.qa-0{ background:#fde68a; } .qa-dot.qa-1,.qa-chip.qa-1{ background:#bfdbfe; }
.qa-dot.qa-2,.qa-chip.qa-2{ background:#bbf7d0; } .qa-dot.qa-3,.qa-chip.qa-3{ background:#fbcfe8; }
.qa-dot.qa-4,.qa-chip.qa-4{ background:#ddd6fe; } .qa-dot.qa-5,.qa-chip.qa-5{ background:#fed7aa; }
.qa-dot.qa-6,.qa-chip.qa-6{ background:#a5f3fc; } .qa-dot.qa-7,.qa-chip.qa-7{ background:#e5e7eb; }
html.night .qa-wrap{ background:var(--n-surface) !important; border-color:var(--n-border) !important; }
html.night .qa-wrap #qa-side .bg-white{ background:var(--n-surface2) !important; }
html.night .qa-wrap .qa-bar{ background:var(--n-surface2) !important; border-color:var(--n-border) !important; }

/* ── ☑ โหมดเลือกหลายตอนในสารบัญ ── */
.toc-select-on #toc-episode-list [id^="toc-row-"] > div:first-child{ cursor:pointer; }
/* แถบเลือกบนมือถือสูง ~150px (ปุ่มพับสามแถว) — ดันเนื้อหาขึ้นไม่ให้แถวท้ายโดนบัง */
#studio-toc-page.toc-select-on{ padding-bottom: 13rem; }
.toc-row-selected{ background:#fffbeb !important; }
@keyframes tocPanelUp{ from{ transform:translateY(100%); } to{ transform:none; } }
.toc-panel-in{ animation: tocPanelUp .22s cubic-bezier(.22,1,.36,1); }


/* ═══ 📱 แถบล่างมือถือ (หน้าตาใหม่ 26 ต.ค. 2569) ═══ */
.tabbar .tab{ color:#6b6785; }
.tabbar .tab.is-on{ color:#5a49ad; }
html.night .tabbar .tab{ color:var(--n-text3) !important; }
html.night .tabbar .tab.is-on{ color:#cfc9ec !important; }
@media (max-width:767px){
    body.has-tabbar{ padding-bottom:64px; }
    /* ยกแท่นแชท/แถบเตือนแอดมินขึ้นพ้นแถบล่าง */
    body.has-tabbar #global-chat-widget{ bottom:76px !important; }
    body.has-tabbar #admin-chat-alert{ bottom:76px !important; }
}

/* ═══ 🌙 กลางคืนของส่วนหน้าตาใหม่ (สเกล ink/gold ที่ทับไม่ถึงจากกฎรายคลาสเดิม) ═══ */
html.night .done-panel{ background:linear-gradient(135deg, rgb(111 96 192 / .14), rgb(239 144 16 / .07)) !important; border-color:var(--n-border) !important; }
html.night .bg-ink-50{ background-color:rgb(143 131 207 / .14) !important; }
html.night .bg-gold-50{ background-color:rgb(239 144 16 / .14) !important; }
html.night .text-ink-600, html.night .text-ink-700{ color:#cfc9ec !important; }
html.night .text-gold-600{ color:#fbc65a !important; }
html.night .hover\:border-ink-200:hover, html.night .hover\:border-ink-300:hover{ border-color:#5a49ad !important; }
html.night .announcement-bar{ background:rgba(24,20,48,.7) !important; border-color:var(--n-border) !important; }
html.night .shop-strip .shop-strip-ico{ background:rgb(239 144 16 / .14) !important; }

/* ═══ 🎨 พรีเซ็ตหน้าตาใหม่ (26 ต.ค. 2569): แบนเนอร์ · บัตรลด · แถบหัว ═══ */
.hide-scroll::-webkit-scrollbar{ display:none; } .hide-scroll{ scrollbar-width:none; }
/* แบนเนอร์ — เข้า/ออกแบบเลื่อน 14% + จาง (ค่าเดียวกับต้นแบบ 21st) */
#hero-slider .slide{ position:absolute; inset:0; opacity:0; transform:translateX(14%); transition:transform .28s cubic-bezier(.23,1,.32,1), opacity .28s cubic-bezier(.23,1,.32,1); pointer-events:none; }
#hero-slider .slide.is-active{ opacity:1; pointer-events:auto; }
/* ปัดซ้าย/ขวาบนมือถือ: ให้เบราว์เซอร์จัดการแค่เลื่อนขึ้นลง ส่วนแนวนอนส่งให้สไลด์ (ไม่งั้น pointerup ไม่มา = ปัดไม่ติด) */
#hero-slider{ touch-action:pan-y; }
#hero-slider .dot-track{ position:relative; display:block; height:4px; width:24px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.35); }
#hero-slider .dot-fill{ position:absolute; inset:0; border-radius:999px; background:#fff; transform-origin:left; transform:scaleX(0); }
#hero-slider .dot{ display:block; width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.45); }
#hero-slider .dot.done{ background:#fff; }
@media (prefers-reduced-motion: reduce){ #hero-slider .slide{ transition:opacity .12s; } }
/* บัตรลด: รอยเจาะครึ่งวงกลมสองข้างแบบตั๋ว */
.ticket{ position:relative; }
.ticket::before, .ticket::after{ content:''; position:absolute; top:50%; width:18px; height:18px; border-radius:999px; background:var(--bg); transform:translateY(-50%); }
.ticket::before{ left:-9px; } .ticket::after{ right:-9px; }
/* แถบหัว */
.site-header .nav-link{ color:var(--muted); }
.site-header .nav-link:hover{ color:#5a49ad; }
.site-header .nav-link.is-on{ color:#4a3b90; background:#f4f3fb; }
.site-header .night-toggle{ border:0; background:transparent; width:40px; height:40px; border-radius:12px; }
.site-header .night-toggle:hover{ background:#f4f3fb; }
#home-top.no-side #trending-row{ grid-column:1 / -1; }
html.night .site-header{ background:rgba(24,20,48,.9) !important; border-color:var(--n-border) !important; }
html.night .site-header .nav-link.is-on{ background:rgb(255 255 255 / .06) !important; color:#cfc9ec !important; }
html.night .site-header .night-toggle{ background:transparent !important; }
html.night .featured-side{ background:linear-gradient(135deg, rgb(255 255 255 / .05), transparent) !important; }
html.night .hdr-avatar{ background:linear-gradient(135deg,#4a3b90,#874110) !important; color:#fff !important; }
html.night .novel-card .nc-stats{ border-color:var(--n-border) !important; }
html.night .ticket::before, html.night .ticket::after{ background:var(--n-bg); }

/* 🏷️ หัวข้อมีสติ๊กเกอร์ · ปุ่มเก็บเข้าชั้นบนการ์ด (26 ต.ค.) */
html.night .sec-head{ color:#f4f2ff !important; }
html.night .shelf-btn.bg-white\/90{ background:rgba(24,20,48,.85) !important; color:#e7e4f6 !important; }

/* 🖼️ หน้าเรื่อง: ปกเบลอจาง ๆ เฉพาะขอบบน (ผู้ใช้ขอ 26 ต.ค. — "ไม่เด่นมาก ไม่ต้องทั้งหน้า")
   ภาพขยายเกินขอบนิดหน่อยกันขอบเบลอเป็นเส้นขาว · mask ไล่ให้หายก่อนถึงรายการกลุ่ม */
.group-backdrop{
    position:absolute; left:0; right:0; top:0; height:340px; z-index:-1; pointer-events:none;
    background-size:cover; background-position:center 30%;
    /* ไม่เบลอ ความจางเท่าพื้นหลังแบนเนอร์ (ผู้ใช้ 27 ต.ค.: ขอชัดเท่าแบนเนอร์) · ยังไล่หายลงล่างด้วย mask */
    opacity:.35; transform:scale(1.05);
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
}
#group-page{ overflow-x:clip; }

html.night .auth-brand{ color:#cfc9ec !important; }


/* 📖 แถบเครื่องมืออ่านแบบใหม่ (26 ต.ค.) — แคปซูลเล็ก + แผงตั้งค่า · ซ่อนเองตอนเลื่อนลง */
.reader-head{ transition:transform .25s ease, opacity .25s ease; }
.reader-head.reader-head-hide{ transform:translateY(-110%); opacity:0; }
.reader-head .reader-toolbar{ box-shadow:0 6px 18px -8px rgba(0,0,0,.25); opacity:.97; }
.reader-panel{ margin-top:6px; box-shadow:0 18px 40px -16px rgba(0,0,0,.35) !important; opacity:1 !important; }
.reader-select{ color:inherit; }
.reader-select option{ color:#1c1638; background:#fff; }

html.night .drawer-top{ background:linear-gradient(135deg, rgb(111 96 192 / .16), rgb(239 144 16 / .08)) !important; border-color:var(--n-border) !important; }

/* ═══ 🎃 ธีมเทศกาล — ชั้นตกแต่ง (28 ต.ค. 2569 · SEASON_THEMES ใน js/reader.js ตั้ง html[data-season]) ═══
   แอดมินหลักเปิด/ปิดผ่านหน้าต่าง 🎨 · แตะแค่แถบหัว · โลโก้ · ของลอยในแบนเนอร์ · ปุ่มร้าน — ไม่แตะหน้าอ่าน/สตูดิโอ */
.season-emoji:empty{ display:none; }
.season-fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.season-fx:empty{ display:none; }
.season-fx span{ position:absolute; bottom:-48px; opacity:0; animation:season-float linear infinite; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
@keyframes season-float{
    0%  { transform:translateY(0) rotate(-10deg); opacity:0; }
    12% { opacity:.75; }
    85% { opacity:.75; }
    100%{ transform:translateY(-420px) rotate(14deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .season-fx{ display:none; } }
html[data-season] .site-header::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; pointer-events:none;
    background:linear-gradient(90deg, var(--season-a), var(--season-b), var(--season-a)); }
html[data-season] .nav-shop{ background-image:linear-gradient(90deg, var(--season-a), var(--season-b)) !important; }
html[data-season] .season-emoji{ display:inline-block; animation:season-bob 2.4s ease-in-out infinite; }
@keyframes season-bob{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-3px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce){ html[data-season] .season-emoji{ animation:none; } }
html[data-season="halloween"]  { --season-a:#f97316; --season-b:#7e22ce; }
html[data-season="loykrathong"]{ --season-a:#f9ad2a; --season-b:#0ea5e9; }
html[data-season="christmas"]  { --season-a:#16a34a; --season-b:#dc2626; }
html[data-season="newyear"]    { --season-a:#f9ad2a; --season-b:#6f60c0; }
html[data-season="cny"]        { --season-a:#dc2626; --season-b:#f9ad2a; }
html[data-season="valentine"]  { --season-a:#ec4899; --season-b:#f43f5e; }
html[data-season="songkran"]   { --season-a:#0ea5e9; --season-b:#22d3ee; }
html[data-season="tanabata"]   { --season-a:#f9a8d4; --season-b:#6366f1; }
html[data-season="mooncake"]   { --season-a:#f9ad2a; --season-b:#4a3b90; }

/* 🏆 แผงอันดับนักอ่านตามธีม (ผู้ใช้ขอ 28 ต.ค.) — พื้นเข้มเสมอให้ตัวหนังสือขาวอ่านได้ · อันดับ 1 เรืองแสงสีธีม */
html[data-season="halloween"]   .reader-rank-panel{ background-image:linear-gradient(135deg,#2a1450,#120a24 60%,#7c2d12) !important; }
html[data-season="loykrathong"] .reader-rank-panel{ background-image:linear-gradient(135deg,#0c2a4a,#1c1638 60%,#7a4b06) !important; }
html[data-season="christmas"]   .reader-rank-panel{ background-image:linear-gradient(135deg,#14532d,#0f2a1c 60%,#7f1d1d) !important; }
html[data-season="newyear"]     .reader-rank-panel{ background-image:linear-gradient(135deg,#2f2560,#1c1638 60%,#6e3611) !important; }
html[data-season="cny"]         .reader-rank-panel{ background-image:linear-gradient(135deg,#7f1d1d,#450a0a 60%,#874110) !important; }
html[data-season="valentine"]   .reader-rank-panel{ background-image:linear-gradient(135deg,#831843,#3b0a24 60%,#6b21a8) !important; }
html[data-season="songkran"]    .reader-rank-panel{ background-image:linear-gradient(135deg,#075985,#0c2a4a 60%,#2f2560) !important; }
html[data-season="tanabata"]    .reader-rank-panel{ background-image:linear-gradient(135deg,#1e1b4b,#0b0820 60%,#1e3a8a) !important; }
html[data-season="mooncake"]    .reader-rank-panel{ background-image:linear-gradient(135deg,#1c1638,#0b0820 60%,#6e3611) !important; }
.rank-season-deco{ position:absolute; top:-6px; right:-4px; font-size:64px; line-height:1; opacity:.16; transform:rotate(14deg); pointer-events:none;
    animation:rank-deco-sway 5s ease-in-out infinite; }
.rank-season-deco.b{ top:auto; right:auto; bottom:-14px; left:-10px; font-size:52px; opacity:.1; transform:rotate(-12deg); animation-delay:-2.5s; }
@keyframes rank-deco-sway{ 0%,100%{ translate:0 0; } 50%{ translate:0 -5px; } }
.rank-season-top1{ box-shadow:0 0 0 1px var(--season-a), 0 0 14px -2px var(--season-a); animation:rank-top1-glow 2.6s ease-in-out infinite; }
@keyframes rank-top1-glow{ 0%,100%{ box-shadow:0 0 0 1px var(--season-a), 0 0 10px -4px var(--season-a); } 50%{ box-shadow:0 0 0 1px var(--season-b), 0 0 18px -2px var(--season-b); } }
.rank-season-badge{ position:relative; font-size:13px; line-height:1; margin-left:-8px; margin-top:-14px; animation:season-bob 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .rank-season-deco, .rank-season-top1, .rank-season-badge{ animation:none; } }