/* ===========================================
   หงส์มณี — ลูกเล่นน่ารักๆ ขยับได้ (cute.css)
   =========================================== */

/* ---------- ตามาสคอตขยับตามเมาส์ (JS ตั้งค่า --ex / --ey) ----------
   มาสคอตเป็น SVG viewBox 100x100 ค่าที่ JS ส่งมาเป็น px ของจอ
   จึงคูณสเกลให้กลายเป็นหน่วยของ viewBox ก่อน ไม่งั้นตาแทบไม่ขยับบนตัวเล็ก */
.mascot .eyes {
  transform: translate(calc(var(--ex, 0px) * 2.4), calc(var(--ey, 0px) * 2.4));
  transition: transform .18s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- หัวใจดวงน้อยตอนคลิก ---------- */
.aw-heart-pop {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  color: var(--rose);
  font-size: 1.05rem;
  translate: -50% -50%;
  animation: aw-heart .95s ease-out forwards;
}
@keyframes aw-heart {
  0% { opacity: .95; transform: translateY(0) scale(.6); }
  100% { opacity: 0; transform: translateY(-48px) scale(1.25); }
}

/* ---------- มาสคอตแอบโผล่มุมขวาล่าง (กลับขึ้นข้างบน) ---------- */
.aw-peek {
  position: fixed;
  right: clamp(.8rem, 3vw, 2rem);
  bottom: 0;
  z-index: 1040;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  justify-content: center;
  transform: translateY(115%);
  transition: transform .5s cubic-bezier(.34, 1.3, .64, 1);
  cursor: pointer;
}
.aw-peek .mascot { display: block; }
.aw-peek.show { transform: translateY(6%); }
.aw-peek.show:hover { transform: translateY(0); }
.aw-peek-bub {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%) scale(.6);
  transform-origin: bottom center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .28rem .85rem;
  font-family: 'Mali', cursive;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-deep);
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: all .25s cubic-bezier(.34, 1.56, .64, 1);
}
.aw-peek.show .aw-peek-bub { opacity: 1; transform: translateX(-50%) scale(1); }
.aw-peek-bub.aw-swap { animation: aw-bub-swap .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes aw-bub-swap {
  0% { scale: .6; }
  100% { scale: 1; }
}

/* ---------- จอเล็ก: มาสคอตมุมจอย่อส่วน ไม่บังเนื้อหา ---------- */
@media (max-width: 640px) {
  .aw-peek { right: .75rem; }
  .aw-peek .mascot--lg { transform: scale(.74); transform-origin: bottom center; }
  .aw-peek-bub { font-size: .74rem; padding: .24rem .7rem; bottom: calc(100% + 4px); }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- กะพริบตา ---------- */
  .mascot .eyes i { animation: aw-blink 4.6s infinite; transform-origin: center; }
  @keyframes aw-blink {
    0%, 90%, 100% { transform: scaleY(1); }
    93%, 96% { transform: scaleY(.12); }
  }

  /* ---------- โลโก้: มาสคอตดุ๊กดิ๊กตอน hover ---------- */
  .aw-logo:hover .mascot { animation: aw-wiggle .7s ease-in-out; }
  @keyframes aw-wiggle {
    0%, 100% { rotate: 0deg; }
    30% { rotate: -10deg; }
    60% { rotate: 9deg; }
    80% { rotate: -4deg; }
  }

  /* ---------- มาสคอตในป๊อปอัป: เด้งทักทาย + ลอยเบาๆ ---------- */
  .aw-swal-popup .mascot--lg {
    animation: aw-hello .85s cubic-bezier(.34, 1.56, .64, 1),
               aw-float 3.2s ease-in-out .9s infinite;
  }
  @keyframes aw-hello {
    0% { transform: scale(.4); opacity: 0; }
    70% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes aw-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
  }

  /* ---------- มาสคอตแอบโผล่: ลอยหายใจเบาๆ ---------- */
  .aw-peek .mascot { animation: aw-float 3s ease-in-out infinite; }

  /* ---------- ป้าย HOT เต้นตุบๆ ---------- */
  .sticker-hot { animation: aw-beat 2s ease-in-out infinite; }
  @keyframes aw-beat {
    0%, 30%, 100% { transform: scale(1); }
    10% { transform: scale(1.15); }
    20% { transform: scale(1.02); }
  }

  /* ---------- ปกนิยาย: เอียงนิดๆ + ตัวอักษรบนปกโยกเบาๆ ---------- */
  .novel-card:hover .cover { transform: translateY(-6px) rotate(-1.5deg); }
  .novel-card:hover .big-char { animation: aw-bob 1.1s ease-in-out infinite alternate; }
  .hc-slide:hover .hc-bigchar { animation: aw-bob 1.3s ease-in-out infinite alternate; }
  @keyframes aw-bob {
    from { translate: 0 0; rotate: 0deg; }
    to { translate: 0 6px; rotate: -6deg; }
  }

  /* ---------- เลขอันดับเด้งตอน hover ---------- */
  .rank-item:hover .rank-num { animation: aw-jump .45s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes aw-jump {
    0%, 100% { translate: 0 0; }
    40% { translate: 0 -6px; }
  }

  /* ---------- ลูกศร "ดูทั้งหมด" ขยับ ---------- */
  .section-head .more { transition: transform .2s; display: inline-block; }
  .section-head .more:hover { transform: translateX(4px); }

  /* ---------- ปุ่มยุบตัวตอนกด ---------- */
  .btn-aw:active, .btn-aw-rose:active, .btn-aw-ghost:active,
  .hc-cta:active, .theme-toggle:active, .hc-arrow:active { transform: scale(.92); }
  .hc-arrow:active { transform: translateY(-50%) scale(.92); }

  /* ---------- ปุ่มสลับธีมหมุนดุ๊กดิ๊ก ---------- */
  .theme-toggle.aw-spin { animation: aw-spin .6s cubic-bezier(.34, 1.4, .64, 1); }
  @keyframes aw-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

  /* ---------- การ์ดค่อยๆ ลอยขึ้นตอนเลื่อนถึง ---------- */
  .aw-reveal {
    opacity: 0;
    translate: 0 14px;
    transition: opacity .55s ease, translate .55s cubic-bezier(.22, .9, .3, 1);
  }
  .aw-reveal.aw-in { opacity: 1; translate: 0 0; }
}


/* ===========================================
   ลูกเล่นรอบสอง — มาสคอตหลับ, ประกายดาว, แถบหัวใจ
   =========================================== */

/* ---------- แถบความคืบหน้าหัวใจวิ่งด้านบน ---------- */
.aw-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 1060;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.aw-progress.show { opacity: 1; }
.aw-progress .fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--rose));
  border-radius: 0 99px 99px 0;
}
.aw-progress .hh {
  position: absolute;
  top: -4px; left: 0;
  translate: -50% 0;
  color: var(--rose);
  font-size: .8rem;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* ---------- มาสคอตง่วงนอนตอนปล่อยหน้าจอทิ้งไว้ ---------- */
.mascot .zzz {
  position: absolute;
  bottom: 82%; left: 92%;
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: .72rem;
  color: var(--brand);
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.mascot--lg .zzz { font-size: 1.05rem; }
/* หลับ = บีบกลุ่มตาให้แบน (transform-box:fill-box ทำให้ย่อจากกึ่งกลางตาเอง) */
.mascot.aw-sleep .eyes { transform: scaleY(.12) !important; }
@media (prefers-reduced-motion: no-preference) {
  .mascot.aw-sleep .zzz { animation: aw-zzz 2.2s ease-in-out infinite; }
  @keyframes aw-zzz {
    0% { opacity: 0; translate: 0 3px; scale: .6; }
    35% { opacity: .9; }
    100% { opacity: 0; translate: 8px -12px; scale: 1.2; }
  }

  /* ---------- มาสคอตยุบดุ๊กดิ๊กตอนโดนจิ้ม ---------- */
  .mascot.aw-squish { animation: aw-squish .55s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes aw-squish {
    0% { scale: 1 1; }
    30% { scale: 1.18 .82; }
    60% { scale: .92 1.1; }
    100% { scale: 1 1; }
  }

  /* ---------- ประกายดาวตอนสลับธีม ---------- */
  .aw-star {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    color: var(--brand);
    font-size: .85rem;
    translate: -50% -50%;
    animation: aw-star .75s ease-out forwards;
  }
  @keyframes aw-star {
    0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(140deg); }
  }

  /* ---------- ประกายวิบวับบนปกตอน hover ---------- */
  .novel-card .cover::before,
  .novel-card .cover::after {
    content: "✦";
    position: absolute;
    color: rgba(255, 255, 255, .95);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
  }
  .novel-card .cover::before { top: 8%; left: 10%; font-size: .95rem; }
  .novel-card .cover::after { top: 30%; left: 72%; font-size: .68rem; }
  .novel-card:hover .cover::before { animation: aw-twinkle 1.3s ease-in-out infinite; }
  .novel-card:hover .cover::after { animation: aw-twinkle 1.3s ease-in-out .45s infinite; }
  @keyframes aw-twinkle {
    0%, 100% { opacity: 0; scale: .4; rotate: 0deg; }
    50% { opacity: 1; scale: 1; rotate: 45deg; }
  }

  /* ---------- เส้นใต้เมนู ----------
     เคยเป็น `text-decoration: underline wavy` เส้นหยัก ๆ ตรงนี้
     พอ theme.css เพิ่มเส้นตรงที่ `.aw-nav-link::after` เข้าไปอีกเส้น
     เมนูที่ชี้อยู่/ที่ active เลยมีเส้นใต้สองเส้นซ้อนกัน (เส้นตรง + เส้นหยัก)
     เอาเส้นหยักออก เหลือเส้นตรงเส้นเดียวที่ ::after — **ห้ามใส่กลับ** */

  /* ---------- จุดสไลด์พองตัวตอนชี้ ---------- */
  .hc-dot:hover { transform: scale(1.5); background: var(--rose); }

  /* ---------- ปกจิ๋วในชาร์ตเอียงทักทาย ---------- */
  .rank-item:hover .cover { rotate: -4deg; transition: rotate .25s cubic-bezier(.34, 1.56, .64, 1); }
}


/* ===========================================
   ลูกเล่นรอบสาม — ตาหัวใจ, ฝนหัวใจ, การ์ดเอียง 3D
   =========================================== */

/* ---------- สี selection + สกอลบาร์น่ารัก ---------- */
::selection { background: #f8cdd6; color: #5b4a44; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--brand), var(--rose));
  border-radius: 99px;
  border: 3px solid var(--bg);
}

/* ---------- ตากลายเป็นหัวใจตอนจิ้มรัวๆ ---------- */
.mascot.aw-happy .eyes i {
  background: transparent;
  animation: none;
  position: relative;
  overflow: visible;
}
.mascot.aw-happy .eyes i::after {
  content: "♥";
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -54%;
  color: var(--rose);
  font-size: 10px;
  line-height: 1;
}
.mascot--lg.aw-happy .eyes i::after { font-size: 19px; }
.mascot.aw-happy .blush i { opacity: .85; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- หัวใจแตกกระจายรอบมาสคอต ---------- */
  .aw-burst {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    color: var(--rose);
    font-size: .95rem;
    translate: -50% -50%;
    animation: aw-burst .8s ease-out forwards;
  }
  @keyframes aw-burst {
    0% { opacity: 1; transform: translate(0, 0) scale(.3); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.15); }
  }

  /* ---------- ฝนหัวใจตอนอ่านจนสุดหน้า ---------- */
  .aw-rain {
    position: fixed;
    top: -6vh;
    z-index: 2000;
    pointer-events: none;
    line-height: 1;
    animation: aw-rain linear forwards;
  }
  @keyframes aw-rain {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(112vh) rotate(var(--rr, 200deg)); opacity: 0; }
  }

  /* ---------- จุดหัวข้อเต้นตุบๆ ---------- */
  .section-head .dot { animation: aw-pulse 2.6s ease-in-out infinite; }
  @keyframes aw-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
  }

  /* ---------- ปกการ์ดรองรับเอียง 3D ---------- */
  .novel-card .cover { will-change: transform; }
}


/* ===========================================
   AI Detection + เหรียญ + ปุ่มสลับภาษา
   =========================================== */

/* ---------- ปุ่มสลับภาษา TH/EN ---------- */
.lang-toggle {
  height: 36px;
  min-width: 44px;
  padding: 0 .7rem;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
}
.lang-toggle:hover { border-color: var(--brand); color: var(--brand-deep); }

/* สลับภาษาแล้ว เนื้อหาเด้งนิดๆ */
@media (prefers-reduced-motion: no-preference) {
  .aw-lang-flip main, .aw-lang-flip .hero-carousel { animation: aw-langflip .45s ease; }
  @keyframes aw-langflip {
    0% { opacity: .35; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- ป้าย 🤖 AI บนการ์ดปก ---------- */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: .22em;
  padding: .2rem .5rem .2rem .42rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #6d5dfc, #8f6dff);
  color: #fff;
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: .72rem;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(109, 93, 252, .4);
  position: relative;
  overflow: hidden;
}
.ai-badge .ai-bot { font-size: .9em; }
.ai-badge .ai-txt { letter-spacing: .06em; }
/* เส้นสแกนวิ่งผ่านป้าย */
.ai-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .ai-badge::after { animation: ai-scan 2.6s ease-in-out infinite; }
  @keyframes ai-scan {
    0%, 60% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
  }
}

/* ป้าย AI เล็กในรายการอันดับ */
.rank-item .ai-badge { font-size: .66rem; padding: .16rem .4rem; }

/* ---------- แถบแจ้งเตือน AI บนหน้านิยาย ---------- */
.ai-notice {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .9rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(109,93,252,.1), rgba(143,109,255,.08));
  border: 1.5px solid rgba(109,93,252,.3);
  color: var(--ink);
  font-size: .9rem;
}
.ai-notice .ai-ico {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d5dfc, #8f6dff);
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(109,93,252,.35);
}
[data-theme="dark"] .ai-notice { background: rgba(109,93,252,.16); }

/* ---------- ป๊อปอัป AI ---------- */
.aw-ai-popup .ai-pop { text-align: center; }
.ai-pop-bot {
  position: relative;
  width: 76px; height: 76px;
  margin: .6rem auto .2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 2.4rem;
  background: linear-gradient(135deg, #6d5dfc, #8f6dff);
  box-shadow: 0 10px 26px rgba(109,93,252,.4);
  overflow: hidden;
}
.ai-pop-bot .ai-scan {
  position: absolute; left: 0; right: 0; height: 22%;
  background: linear-gradient(rgba(255,255,255,.85), transparent);
  top: -22%;
}
@media (prefers-reduced-motion: no-preference) {
  .ai-pop-bot .ai-scan { animation: ai-scan-v 1.8s ease-in-out infinite; }
  @keyframes ai-scan-v {
    0% { top: -22%; } 100% { top: 100%; }
  }
}
.ai-pop-intro { color: var(--ink-soft); font-size: .92rem; margin: .3rem 0 1rem; line-height: 1.7; }
.ai-bars { text-align: left; max-width: 320px; margin: 0 auto 1rem; display: grid; gap: .7rem; }
.ai-row-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Mali', cursive; font-weight: 600; font-size: .85rem; margin-bottom: .25rem;
}
.ai-row-top .ai-pct { color: #6d5dfc; font-weight: 700; }
.ai-meter { height: 9px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ai-meter i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #6d5dfc, #8f6dff);
  border-radius: 99px;
  width: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .aw-ai-popup.swal2-show .ai-meter i { animation: ai-fill .9s cubic-bezier(.4,1,.5,1) .15s both; }
  @keyframes ai-fill { from { width: 0 !important; } }
}
.ai-pop-choose { font-family: 'Mali', cursive; font-weight: 700; color: var(--ink); margin: 0; }

/* ---------- กั้นเบลอหน้าอ่านจนกว่าจะยืนยัน ---------- */
.ai-blur #paper {
  filter: blur(9px);
  pointer-events: none;
  user-select: none;
  transition: filter .4s ease;
}

/* ---------- ปุ่มเหรียญ (ซื้อ e-book / ปลดล็อกตอน) ---------- */
.btn-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: none;
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-family: 'Mali', cursive;
  font-weight: 700;
  color: #6b4e00;
  background: linear-gradient(135deg, #ffd86b, #f7b733);
  box-shadow: 0 6px 16px rgba(247,183,51,.4);
  cursor: pointer;
  transition: transform .12s, box-shadow .2s;
}
/* ต้องคง background ตอน hover ไว้ ไม่งั้น .btn:hover ของ bootstrap ลบพื้นหลังทิ้ง (ปุ่มจะหาย) */
.btn-coin:hover { background: linear-gradient(135deg, #ffcf4d, #f0a81f); color: #6b4e00;
  box-shadow: 0 9px 22px rgba(247,183,51,.5); transform: translateY(-1px); }
.btn-coin:active { transform: scale(.96); }
.coin-ico { font-size: 1.05em; }

/* ยอดเหรียญผู้ใช้ */
.coin-wallet {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'Mali', cursive; font-weight: 700; font-size: .85rem;
  color: #b5840a;
  background: rgba(247,183,51,.16);
  border: 1.5px solid rgba(247,183,51,.4);
  border-radius: 999px; padding: .25rem .7rem;
}

/* ตอนที่ล็อกด้วยเหรียญในสารบัญ */
.chapter-row .ch-coin {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: 'Mali', cursive; font-weight: 700; font-size: .78rem;
  color: #b5840a;
  background: rgba(247,183,51,.16);
  border-radius: 999px; padding: .12rem .55rem;
  white-space: nowrap;
}
.chapter-row.locked { opacity: .92; }
.chapter-row.locked .ch-no { background: rgba(247,183,51,.2); color: #b5840a; }
@media (prefers-reduced-motion: no-preference) {
  .chapter-row:hover .ch-coin { animation: aw-beat 1.4s ease-in-out infinite; }
}


/* ===========================================
   เติมเหรียญ + ชำระผ่าน SCB
   =========================================== */
:root { --scb-purple: #4e2a84; --scb-purple-2: #7b3fbf; }

/* ปุ่มเติมเหรียญข้างกระเป๋า */
.btn-topup-link {
  display: inline-block;
  margin-left: .5rem;
  border: none;
  background: none;
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: .82rem;
  color: var(--scb-purple);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-theme="dark"] .btn-topup-link { color: #b89cff; }
.btn-topup-link:hover { color: var(--scb-purple-2); }

/* ---------- เลือกแพ็กเกจ ---------- */
.topup-sub { color: var(--ink-soft); font-size: .9rem; margin: 0 0 1rem; }
.coin-pack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
}
.coin-pack-grid .coin-pack:first-child { grid-column: span 2; }
.coin-pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .8rem .6rem;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: var(--card);
  cursor: pointer;
  transition: transform .12s, border-color .15s, box-shadow .2s;
}
.coin-pack:hover {
  border-color: #f7b733;
  box-shadow: 0 8px 20px rgba(247,183,51,.28);
  transform: translateY(-2px);
}
.coin-pack:active { transform: scale(.97); }
.cp-top { display: inline-flex; align-items: center; gap: .3rem; }
.cp-coins { font-family: 'Mali', cursive; font-weight: 800; font-size: 1.5rem; color: var(--ink); }
.coin-ico { font-size: 1.05em; }
.cp-bonus {
  font-family: 'Mali', cursive; font-weight: 700; font-size: .72rem;
  color: #fff; background: linear-gradient(135deg,#ff7a59,#f7b733);
  border-radius: 999px; padding: .04rem .5rem; min-height: 1.1rem;
}
.cp-bonus--none { background: none; }
.cp-baht {
  font-family: 'Mali', cursive; font-weight: 700; font-size: .95rem;
  color: var(--brand-deep); margin-top: .15rem;
}

/* ---------- หน้าจอชำระ SCB ---------- */
.scb-pay { text-align: center; }
.scb-head {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  margin: .3rem 0 1rem;
}
.scb-mark {
  font-family: 'Mali', cursive; font-weight: 800; letter-spacing: .04em;
  color: #fff; font-size: 1.05rem; line-height: 1;
  background: linear-gradient(135deg, var(--scb-purple), var(--scb-purple-2));
  border-radius: 9px; padding: .4rem .6rem;
  box-shadow: 0 5px 14px rgba(78,42,132,.4);
}
.scb-bank { font-family: 'Mali', cursive; font-weight: 700; color: var(--scb-purple); font-size: .95rem; }
[data-theme="dark"] .scb-bank { color: #b89cff; }

.scb-qr-wrap {
  position: relative;
  width: 200px;
  margin: 0 auto 1rem;
  padding: 14px;
  background: #fff;
  border-radius: 18px;
  border: 3px solid var(--scb-purple);
  box-shadow: 0 10px 26px rgba(78,42,132,.25);
}
.scb-pp-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--scb-purple); color: #fff;
  font-family: 'Mali', cursive; font-weight: 700; font-size: .68rem;
  border-radius: 999px; padding: .12rem .7rem; white-space: nowrap;
}
.qr-svg { display: block; width: 100%; height: auto; }

.scb-rows {
  text-align: left; display: grid; gap: .5rem;
  background: rgba(78,42,132,.06);
  border-radius: 14px; padding: .8rem .9rem; margin-bottom: .9rem;
}
[data-theme="dark"] .scb-rows { background: rgba(123,63,191,.18); }
.scb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .88rem; }
.scb-row span { color: var(--ink-soft); }
.scb-row b { color: var(--ink); font-family: 'Mali', cursive; }
.scb-row--amt b { color: var(--scb-purple); font-size: 1.25rem; }
[data-theme="dark"] .scb-row--amt b { color: #b89cff; }
.scb-hint { font-family: 'Mali', cursive; font-weight: 600; color: var(--ink); font-size: .85rem; margin: 0 0 .35rem; }
.scb-secure { color: var(--ink-soft); font-size: .74rem; margin: 0; }

/* สถานะกำลังตรวจสอบ */
.scb-verify { display: grid; place-items: center; padding: 1.6rem 0 .8rem; }
.scb-spin {
  width: 54px; height: 54px; border-radius: 50%;
  border: 5px solid rgba(78,42,132,.18);
  border-top-color: var(--scb-purple);
  animation: scb-spin .8s linear infinite;
}
@keyframes scb-spin { to { transform: rotate(360deg); } }
.scb-done-ico {
  width: 72px; height: 72px; margin: .6rem auto .2rem;
  display: grid; place-items: center; font-size: 2.3rem;
  border-radius: 50%;
  background: linear-gradient(135deg,#ffd86b,#f7b733);
  box-shadow: 0 10px 26px rgba(247,183,51,.42);
}
@media (prefers-reduced-motion: no-preference) {
  .scb-done-ico { animation: aw-hello .8s cubic-bezier(.34,1.56,.64,1); }
}

@media (max-width: 480px) {
  .coin-pack-grid .coin-pack:first-child { grid-column: span 2; }
  .cp-coins { font-size: 1.3rem; }
}


/* ---------- หน้าจอชำระ SCB: นับเวลา / รอชำระ / ปุ่มจำลอง ---------- */
.qr-img { display: block; width: 100%; height: auto; border-radius: 6px; }

.scb-countdown {
  font-family: 'Mali', cursive; font-size: .82rem;
  color: var(--ink-soft); margin: -.3rem 0 .8rem;
}
.scb-countdown b { color: var(--scb-purple); font-weight: 800; font-size: .95rem; }
[data-theme="dark"] .scb-countdown b { color: #b89cff; }

.scb-waiting {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: 'Mali', cursive; font-weight: 600; font-size: .85rem;
  color: var(--ink); margin-bottom: .6rem;
}
.scb-wait-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--scb-purple); flex: none;
}
[data-theme="dark"] .scb-wait-dot { background: #b89cff; }
@media (prefers-reduced-motion: no-preference) {
  .scb-wait-dot { animation: scb-blink 1.1s ease-in-out infinite; }
  @keyframes scb-blink { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
}

.scb-sim-btn {
  width: 100%;
  border: 1.5px dashed var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: 'Mali', cursive; font-weight: 700; font-size: .8rem;
  border-radius: 12px; padding: .5rem;
  margin-bottom: .7rem; cursor: pointer;
  transition: all .15s;
}
.scb-sim-btn:hover { border-color: var(--scb-purple); color: var(--scb-purple); }
[data-theme="dark"] .scb-sim-btn:hover { border-color: #b89cff; color: #b89cff; }


/* ===========================================
   คะแนนดาว + ป้าย 18+ + แถบเลือกหมวดหน้าแรก
   =========================================== */

/* ดาวคะแนนบนการ์ด */
.nc-rating {
  display: inline-flex;
  align-items: center;
  gap: .2em;
  color: #f5a623;
  font-weight: 700;
}
.nc-rating .bi-star-fill { font-size: .85em; }

/* ป้าย 18+ บนปก */
.age-badge {
  display: inline-block;
  font-family: 'Mali', cursive;
  font-weight: 800;
  font-size: .68rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #d7263d, #f04060);
  border-radius: 7px;
  padding: .22rem .4rem;
  box-shadow: 0 3px 9px rgba(215, 38, 61, .42);
  letter-spacing: .02em;
}
/* ระดับเนื้อหาตามอายุ: สีอ่อนลงตามความเข้มของเนื้อหา */
.age-badge.age-13 { background: linear-gradient(135deg, #3d9970, #56c596); box-shadow: 0 3px 9px rgba(61,153,112,.4); }
.age-badge.age-15 { background: linear-gradient(135deg, #d99000, #f0a040); box-shadow: 0 3px 9px rgba(217,144,0,.4); }

/* คะแนนดาวในหน้านิยาย (stat-pill มีดาวอยู่แล้วผ่านตัวเลข) */
.stat-pill .v .bi-star-fill { color: #f5a623; font-size: .85em; margin-right: .15em; }

/* ---------- แถบเลือกหมวดบนหน้าแรก ---------- */
.cat-browse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.cat-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.2rem 1.25rem;
  min-height: 96px;
  border-radius: 20px;
  background: linear-gradient(125deg, var(--c1), var(--c2));
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c2) 28%, transparent);
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .25s;
}
/* ประกายแสงทแยงด้านบน */
.cat-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 45%);
  z-index: 0;
}
/* ตัวไอคอนใหญ่จางเป็นลายน้ำ */
.cat-chip .cc-watermark {
  position: absolute;
  right: -10px; bottom: -22px;
  font-size: 5.2rem;
  line-height: 1;
  opacity: .22;
  filter: grayscale(.2);
  transform: rotate(-8deg);
  z-index: 0;
  pointer-events: none;
  transition: transform .3s, opacity .3s;
}
.cat-chip:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--c2) 45%, transparent);
}
.cat-chip:hover .cc-watermark { transform: rotate(-4deg) scale(1.12); opacity: .3; }

.cat-chip .ico {
  position: relative;
  z-index: 1;
  flex: none;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  font-size: 1.65rem;
  border-radius: 16px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  transition: transform .22s;
}
.cat-chip:hover .ico { transform: scale(1.08) rotate(-4deg); }
.cat-chip .cc-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cat-chip .nm {
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.cat-chip .cnt {
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.24);
  border-radius: 999px;
  padding: .1rem .55rem;
}
.cat-chip .cc-arrow {
  position: relative;
  z-index: 1;
  margin-left: auto;
  font-size: 1.25rem;
  color: #fff;
  opacity: .5;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.cat-chip:hover .cc-arrow { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
  .cat-chip:hover .ico { animation: aw-jump .5s cubic-bezier(.34,1.56,.64,1); }
}
@media (max-width: 860px) { .cat-browse { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cat-browse { grid-template-columns: 1fr; } }

/* ---------- ปุ่มเลือกฟอนต์ในหน้าอ่าน ---------- */
.rt-font { font-size: .9rem; font-weight: 700; }
#prose[data-font="sarabun"] { font-family: 'Sarabun', sans-serif; }
#prose[data-font="mali"] { font-family: 'Mali', cursive; }
#prose[data-font="serif"] { font-family: Georgia, 'Times New Roman', serif; }

/* ===========================================
   ลงนิยาย: สลับโหมด เรื่องใหม่ / ลงตอนใหม่
   =========================================== */
.sub-mode-toggle {
  display: inline-flex;
  gap: .3rem;
  padding: .3rem;
  border-radius: 999px;
  background: var(--card-soft, rgba(0,0,0,.04));
  border: 1px solid var(--line);
}
.sub-mode-toggle .smt-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: .92rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.sub-mode-toggle .smt-btn.on {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent);
}
.sub-mode-toggle .smt-btn:not(.on):hover { color: var(--brand-deep); }

/* การ์ดบริบทเรื่องเดิม */
.ch-context {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 16px;
  background: var(--card-soft, rgba(0,0,0,.03));
  border: 1px solid var(--line);
}
.ch-context .cc-cover {
  flex: none;
  width: 64px;
  border-radius: 10px;
  overflow: hidden;
}
.ch-context .cc-cover .cover { aspect-ratio: 3/4; border-radius: 10px; }
.ch-context .cc-cover .cover .big-char { font-size: 1.6rem; }
.ch-context .cc-cover .cover .cover-label { display: none; }
.ch-context .cc-info { min-width: 0; flex: 1; }
.ch-context .cc-name {
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
.ch-context .cc-meta { font-size: .82rem; color: var(--ink-soft); margin-top: .15rem; }
.ch-context .cc-next {
  flex: none;
  text-align: center;
  padding: .5rem .8rem;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
}
.ch-context .cc-next .lbl { font-size: .64rem; opacity: .85; display: block; }
.ch-context .cc-next .num { font-family: 'Mali', cursive; font-weight: 800; font-size: 1.5rem; line-height: 1; }
@media (max-width: 560px) {
  .ch-context { flex-wrap: wrap; }
  .ch-context .cc-next { margin-left: auto; }
}

/* ตัวนับคำ */
.word-count { font-size: .8rem; color: var(--ink-soft); font-family: 'Mali', cursive; }

/* ตัวเลือกฟรี / เหรียญ */
.access-seg { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.access-seg .as-opt {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: all .15s;
}
.access-seg .as-opt.on { border-color: var(--brand); color: var(--brand-deep); background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.access-seg .as-opt.as-coin.on { border-color: #f7b733; color: #b5840a; background: rgba(247,183,51,.12); }

/* ===== ปุ่มกำลังส่งฟอร์ม (กันกดซ้ำ) ===== */
.aw-btn-spin {
  display: inline-block;
  width: .85em; height: .85em;
  margin-right: .4em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: awBtnSpin .65s linear infinite;
}
@keyframes awBtnSpin { to { transform: rotate(360deg); } }
button.aw-loading, .aw-loading { opacity: .75; cursor: progress !important; }

/* ===== ปุ่มเข้าสู่ระบบด้วยบัญชีภายนอก (Google / LINE) ===== */
.social-sep { display:flex; align-items:center; gap:.6rem; color:var(--ink-soft); font-size:.8rem; }
.social-sep::before, .social-sep::after { content:''; flex:1; height:1px; background:var(--line); }
.btn-social {
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-head); font-weight:700; border-radius:999px;
  padding:.6rem 1rem; text-decoration:none; border:2px solid var(--line);
  background:var(--card); color:var(--ink); transition:transform .15s, box-shadow .15s;
}
.btn-social:hover { background:var(--card); transform:translateY(-2px); box-shadow:var(--shadow); color:var(--ink); }
.btn-social i { font-size:1.15rem; }
.btn-google i { color:#DB4437; }
.btn-line { background:#06C755; border-color:#06C755; color:#fff; }
.btn-line:hover { color:#fff; background:#05b04c; }

/* ===========================================
   SweetAlert2 — สไตล์ปุ่ม/ช่องกรอกให้ตรงธีมทุกกล่อง
   ครอบทั้งกรณีเรียกผ่าน AwSwal และ Swal ตรงๆ และกรณี
   customClass ถูก override (ทำให้ class ปุ่มของธีมหลุด)
   =========================================== */
.swal2-popup {
  border-radius: 20px !important;
  font-family: var(--font-body) !important;
  background: var(--card) !important;
  color: var(--ink) !important;
}
.swal2-title { font-family: var(--font-head) !important; color: var(--ink) !important; }
.swal2-html-container { color: var(--ink-soft) !important; }

/* ปุ่มทุกปุ่มในกล่อง (ใช้ .swal2-styled หรือไม่ก็ได้) */
.swal2-actions .swal2-confirm,
.swal2-actions .swal2-cancel,
.swal2-actions .swal2-deny {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .6rem 1.6rem !important;
  box-shadow: none !important;
  transition: transform .15s, filter .15s !important;
}
.swal2-actions .swal2-confirm { background: var(--brand) !important; color: #fff !important; }
.swal2-actions .swal2-confirm:hover { background: var(--brand-deep) !important; }
.swal2-actions .swal2-cancel { background: var(--bg-soft) !important; color: var(--ink-soft) !important; border: 2px solid var(--line) !important; }
.swal2-actions .swal2-cancel:hover { background: var(--line) !important; color: var(--ink) !important; }
.swal2-actions .swal2-deny { background: var(--rose) !important; color: #fff !important; }
.swal2-actions .swal2-deny:hover { filter: brightness(.93) !important; }
.swal2-actions .swal2-confirm:active,
.swal2-actions .swal2-cancel:active,
.swal2-actions .swal2-deny:active { transform: scale(.95) !important; }
.swal2-actions .swal2-confirm:focus,
.swal2-actions .swal2-cancel:focus,
.swal2-actions .swal2-deny:focus { box-shadow: 0 0 0 3px rgba(61,122,110,.25) !important; }

/* ช่องกรอกในกล่อง — ใช้พื้นที่เต็มความกว้าง อ่านง่าย */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file {
  width: calc(100% - 2.5rem) !important;
  max-width: none !important;
  margin: .5rem 1.25rem !important;
  box-sizing: border-box !important;
  border: 2px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  padding: .6rem .9rem !important;
  box-shadow: none !important;
}
.swal2-popup .swal2-textarea { min-height: 110px !important; resize: vertical !important; }
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(61,122,110,.18) !important; }
.swal2-popup .swal2-input::placeholder,
.swal2-popup .swal2-textarea::placeholder { color: var(--ink-soft) !important; opacity: .7 !important; }
.swal2-popup .swal2-validation-message { background: transparent !important; color: var(--rose) !important; font-family: var(--font-body) !important; }

/* ===== ช่องยอมรับเงื่อนไข / ยืนยันอายุ (สมัครสมาชิก) ===== */
.aw-agree {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--bg-soft); border: 2px solid var(--line);
  border-radius: 14px; padding: .7rem .85rem; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.aw-agree:hover { border-color: var(--brand); }
.aw-agree .aw-agree-box { position: absolute; opacity: 0; width: 0; height: 0; }
.aw-agree .aw-agree-tick {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid var(--line); background: var(--card);
  display: grid; place-items: center; color: transparent;
  font-size: .8rem; transition: all .18s; margin-top: 1px;
}
.aw-agree .aw-agree-tx { display: flex; flex-direction: column; gap: .1rem; line-height: 1.45; }
.aw-agree .aw-agree-tx b { font-family: var(--font-head); font-size: .9rem; font-weight: 700; color: var(--ink); }
.aw-agree .aw-agree-tx small { font-size: .74rem; color: var(--ink-soft); }
.aw-agree .aw-agree-tx a { color: var(--brand-deep); font-weight: 700; }
/* ติ๊กแล้ว */
.aw-agree:has(.aw-agree-box:checked) { border-color: var(--brand); background: var(--brand-fade); }
.aw-agree .aw-agree-box:checked + .aw-agree-tick {
  background: var(--brand); border-color: var(--brand); color: #fff;
  animation: awTickPop .28s cubic-bezier(.34,1.56,.64,1);
}
.aw-agree .aw-agree-box:focus-visible + .aw-agree-tick { box-shadow: 0 0 0 3px rgba(61,122,110,.25); }
@keyframes awTickPop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ===== ประตูยอมรับเอกสาร (เงื่อนไขการใช้งาน / นโยบายความเป็นส่วนตัว) ===== */
/* การ์ดยอมรับที่ต้องเปิดอ่านก่อน — ทำให้ดูคลิกได้ชัดเจน */
.aw-agree-gate { position: relative; padding-right: 2.2rem; }
.aw-agree-gate .aw-agree-go {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: .82rem; transition: color .15s, transform .15s;
}
.aw-agree-gate:hover .aw-agree-go { color: var(--brand-deep); transform: translateY(-50%) translateX(2px); }
.aw-agree-gate.accepted .aw-agree-go { color: var(--brand); }

/* โมดัลเอกสาร */
.aw-legal-modal .modal-content {
  border: none; border-radius: 20px; overflow: hidden;
  background: var(--card); color: var(--ink);
  box-shadow: 0 24px 60px rgba(20,40,35,.28);
}
.aw-legal-modal .modal-header {
  border-bottom: 1px solid var(--line); padding: .9rem 1.2rem;
  background: var(--bg-soft);
}
.aw-legal-modal .modal-title { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--brand-deep); }
.aw-legal-modal .modal-footer { border-top: 1px solid var(--line); padding: .8rem 1.2rem; gap: .5rem; }
.aw-legal-modal .modal-footer .meta { font-size: .78rem; }
.aw-legal-modal .modal-body { padding: 1.1rem 1.3rem; max-height: 58vh; }
.aw-legal-modal .btn-close { filter: none; }
[data-theme="dark"] .aw-legal-modal .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* แท็บสองฉบับ */
.aw-legal-tabs { display: flex; gap: .4rem; padding: .7rem 1.2rem 0; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.aw-legal-tab {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .84rem;
  color: var(--ink-soft); padding: .5rem .8rem; border-radius: 12px 12px 0 0;
  border-bottom: 3px solid transparent; display: inline-flex; align-items: center; gap: .35rem;
}
.aw-legal-tab:hover { color: var(--brand-deep); background: var(--brand-fade); }
.aw-legal-tab.on { color: var(--brand-deep); border-bottom-color: var(--brand); background: var(--card); }
.aw-legal-tab .aw-read-tick { opacity: 0; color: var(--brand); font-size: .8rem; transition: opacity .2s; }
.aw-legal-tab.read .aw-read-tick { opacity: 1; animation: awTickPop .28s cubic-bezier(.34,1.56,.64,1); }

/* เนื้อหาเอกสารในโมดัล (ใช้คลาสเดียวกับหน้าเต็ม) */
.aw-legal-modal .legal-body { line-height: 1.85; font-size: .92rem; }
.aw-legal-modal .legal-body h3 { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--brand-deep); margin: 1.3rem 0 .45rem; }
.aw-legal-modal .legal-body h3:first-child { margin-top: 0; }
.aw-legal-modal .legal-body p { margin-bottom: .6rem; }
.aw-legal-modal .legal-body ul { margin: 0 0 .8rem; padding-left: 1.25rem; }
.aw-legal-modal .legal-body li { margin-bottom: .2rem; }
.aw-legal-modal #legalAccept:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 575px) {
  .aw-legal-modal .modal-body { max-height: 62vh; padding: .9rem 1rem; }
  .aw-legal-tabs { padding: .6rem .7rem 0; }
  .aw-legal-tab { font-size: .78rem; padding: .45rem .55rem; }
  .aw-legal-modal .modal-footer { flex-wrap: wrap; }
  .aw-legal-modal .modal-footer .meta { width: 100%; text-align: center; margin: 0 0 .3rem !important; }
}

/* ===== กล่องเลือกของขวัญ (สนับสนุนนักเขียน) ===== */
.aw-gift-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem;
  margin: 1rem 0 .2rem;
}
.aw-gift {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .9rem .5rem; cursor: pointer;
  border: 2px solid var(--line); border-radius: 16px;
  background: var(--card); color: var(--ink);
  font-family: var(--font-head); transition: transform .13s, border-color .15s, box-shadow .2s;
}
.aw-gift:hover { border-color: var(--rose); background: var(--card);
  transform: translateY(-3px); box-shadow: 0 12px 24px rgba(181,101,118,.22); }
.aw-gift:active { transform: scale(.96); }
.aw-gift .g-ico { font-size: 1.6rem; line-height: 1; color: var(--rose); }
.aw-gift .g-nm { font-weight: 700; font-size: .9rem; }
.aw-gift .g-coin {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .8rem; font-weight: 700; color: #6b4e00;
  background: linear-gradient(135deg, #ffd86b, #f7b733);
  border-radius: 999px; padding: .1rem .55rem;
}
/* เลือกไว้ / กำลังส่ง */
.aw-gift.sel { border-color: var(--rose); background: var(--brand-fade); }
.aw-gift.busy { opacity: .55; cursor: progress; }
.aw-gift-grid.busy .aw-gift { pointer-events: none; }
.aw-gift-grid.busy .aw-gift:not(.busy) { opacity: .4; }
@media (max-width: 420px) { .aw-gift-grid { grid-template-columns: 1fr 1fr; gap: .45rem; } }

/* ===== โลโก้ที่แอดมินอัปโหลด (แทนมาสคอต) ===== */
.aw-logo .aw-logo-img { max-height: 40px; max-width: 150px; object-fit: contain; display: block; }
.aw-footer .aw-logo-img { max-height: 30px; max-width: 120px; object-fit: contain; }
@media (max-width: 640px) { .aw-logo .aw-logo-img { max-height: 32px; max-width: 110px; } }

/* ============================================================
   แถบเมนูด้านบน — จอใหญ่แถวเดียว / จอเล็กเป็นแฮมเบอร์เกอร์
   (ทับกฎ grid เดิมใน theme.css ที่ทำให้เมนูตกบรรทัด)
   ============================================================ */
.aw-navbar .nav-grid {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: .6rem;
}
.aw-navbar .aw-logo { flex: 0 0 auto; order: 0; }
.aw-navbar .aw-nav-links {
  display: flex; align-items: center; flex-wrap: nowrap !important;
  gap: .1rem; flex: 1 1 auto; min-width: 0;
}
.aw-navbar .nav-right { flex: 0 0 auto; margin-left: auto; gap: .35rem; }
.aw-navbar .aw-nav-link { white-space: nowrap; }
.aw-nav-ico { display: none; }              /* ไอคอนใช้เฉพาะในลิ้นชักจอเล็ก */
.aw-nav-head, .aw-nav-foot { display: none; }
.aw-nav-backdrop { display: none; }

/* ปุ่มแฮมเบอร์เกอร์ — เส้นหนาแน่น ชิดกัน ดูเป็นก้อนเดียว ไม่โปร่งจนดูห่าง */
.aw-burger {
  display: none; flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0;
  border: none; border-radius: 13px;
  background: var(--bg-soft); color: var(--brand-deep); cursor: pointer;
  place-items: center; gap: 4.5px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent);
  transition: background .18s, box-shadow .18s, transform .12s;
}
.aw-burger span {
  display: block; width: 18px; height: 2.5px; border-radius: 99px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .18s, width .3s;
}
.aw-burger span:nth-child(2) { width: 13px; align-self: center; }   /* เส้นกลางสั้นกว่า ดูมีจังหวะ */
.aw-burger:hover {
  background: var(--brand-fade);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 38%, transparent);
}
.aw-burger:active { transform: scale(.93); }
.aw-burger:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
/* เปิดเมนู → กลายเป็นกากบาท */
body.aw-nav-open .aw-burger { background: var(--brand-fade); }
body.aw-nav-open .aw-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.aw-nav-open .aw-burger span:nth-child(2) { opacity: 0; width: 0; }
body.aw-nav-open .aw-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ลิงก์ที่มีเฉพาะในลิ้นชักจอเล็ก — บนจอใหญ่ซ่อน เพราะมีทางเข้าอื่นอยู่แล้ว
   (ตอนนี้คือ "ชั้นหนังสือ" ที่ซ้ำกับเมนูในกล่องรูปโปรไฟล์) */
@media (min-width: 992px) { .aw-nav-link.nav-drawer-only { display: none; } }

/* จอกลาง: ลดช่องไฟให้พอดีแถวเดียว */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .aw-navbar .aw-nav-link { font-size: .88rem; padding: .38rem .6rem; }
  .aw-navbar .aw-logo { font-size: 1.25rem; }
}

/* ตอนล็อกอิน ฝั่งขวามีของเพิ่มมาอีกราว 300px (ปุ่มบทบาท กระดิ่ง เหรียญ รูปโปรไฟล์)
   จึงต้องรัดช่องไฟของลิงก์ให้แคบลงไปจนถึงจอ 1439px ไม่ใช่แค่ 1199px เหมือนตอนไม่ล็อกอิน */
@media (max-width: 1439.98px) and (min-width: 992px) {
  .aw-navbar.has-user .aw-nav-link { font-size: .86rem; padding: .34rem .5rem; }
  .aw-navbar.has-user .aw-logo { font-size: 1.2rem; }
  .aw-navbar.has-user .nav-right { gap: .25rem; }
}

/* ===== จอเล็ก (มือถือ/แท็บเล็ต) : เมนูกลายเป็นลิ้นชัก ===== */
@media (max-width: 991.98px) {
  .aw-burger { display: inline-grid; }
  /* สำคัญ: backdrop-filter บนแถบเมนูทำให้ตัวมันกลายเป็น containing block ของลูกที่ position:fixed
     ลิ้นชักจะถูกขังอยู่ในความสูงของแถบ (สูงแค่ ~58px) — ปิดบนจอเล็กเพื่อให้ลิ้นชักอิงวิวพอร์ตจริง */
  .aw-navbar { backdrop-filter: none !important; background: var(--bg); }
  /* ทับกฎเก่าใน theme.css (@media 860px) ที่ตั้ง width:100%;order:-1 ให้โลโก้
     ซึ่งดันปุ่มเมนูกับปุ่มขวาให้ล้นออกนอกคอนเทนเนอร์ */
  .aw-navbar .nav-grid > .aw-logo {
    width: auto !important; order: 0 !important; margin: 0 auto;   /* โลโก้อยู่กลาง */
    justify-content: center;
  }
  .aw-navbar .nav-grid { gap: .4rem; }
  /* ปล่อยให้ margin auto ของโลโก้เป็นตัวจัดกลางตัวเดียว ไม่งั้นโลโก้จะเยื้องซ้าย */
  .aw-navbar .nav-right { margin-left: 0; }

  /* ลิ้นชักเลื่อนออกจากซ้าย */
  .aw-navbar #awNav {
    position: fixed; inset: 0 auto 0 0;
    width: min(290px, 82vw);
    flex-direction: column; align-items: stretch; flex: none;
    gap: .15rem; padding: .8rem .75rem 1.5rem;
    background: var(--card);
    border-right: 1px solid var(--line);
    box-shadow: 14px 0 40px rgba(0,0,0,.16);
    transform: translateX(-102%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 1400; overflow-y: auto; overscroll-behavior: contain;
  }
  body.aw-nav-open .aw-navbar #awNav { transform: none; }

  .aw-navbar #awNav .aw-nav-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .8rem; border-radius: 12px; font-size: .96rem;
    white-space: normal; text-align: left; width: 100%;
    background: none; border: none; color: var(--ink);
  }
  .aw-navbar #awNav .aw-nav-link.active { background: var(--brand-fade); color: var(--brand-deep); }
  .aw-nav-ico { display: inline-block; width: 20px; text-align: center; color: var(--brand); font-size: 1rem; }
  .aw-nav-link.active .aw-nav-ico { color: var(--brand-deep); }

  .aw-nav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .2rem .3rem .7rem; margin-bottom: .35rem;
    border-bottom: 1px dashed var(--line);
  }
  .aw-nav-title { font-family: var(--font-head); font-weight: 700; color: var(--brand-deep); font-size: 1.05rem; }
  .aw-nav-close {
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: var(--bg-soft); color: var(--ink); cursor: pointer; line-height: 1;
  }
  .aw-nav-close:hover { background: var(--brand-fade); color: var(--brand-deep); }
  .aw-nav-foot { display: block; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line); }

  /* ฉากหลังทึบตอนเปิดลิ้นชัก */
  .aw-nav-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(25,35,32,.45); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s;
    z-index: 1390;
  }
  body.aw-nav-open .aw-nav-backdrop { opacity: 1; visibility: visible; }
  body.aw-nav-open { overflow: hidden; }

  /* .aw-navbar เป็น sticky + z-index:1020 จึงสร้าง stacking context ของตัวเอง
     ลิ้นชักที่อยู่ข้างใน (z-index:1400) จึงเทียบได้แค่ "ในกล่อง 1020" เท่านั้น
     ส่วนฉากหลังอยู่นอก navbar ที่ 1390 → เลยลอยทับลิ้นชักและกินคลิกทั้งหมด
     แก้โดยยก navbar ทั้งก้อนขึ้นเหนือฉากหลังตอนเปิดลิ้นชัก */
  body.aw-nav-open .aw-navbar:not(.reader-subnav) { z-index: 1401 !important; }

  /* ปุ่มที่ย้ายไปอยู่ในลิ้นชักแล้ว — ซ่อนจากแถบบนเพื่อไม่ให้แน่น */
  .aw-navbar .nav-right .lang-toggle,
  .aw-navbar .nav-right .aw-login-link { display: none; }
}

/* จอมือถือแคบ: ย่อปุ่มขวาให้พอดีจริงๆ */
@media (max-width: 575.98px) {
  .aw-navbar .aw-logo { font-size: 1.1rem; gap: .35rem; }
  .aw-navbar .aw-logo .aw-logo-img { max-height: 30px; max-width: 84px; }
  .aw-navbar .nav-right { gap: .25rem; }
  .aw-navbar .nav-right .theme-toggle { width: 34px; height: 34px; }
  .aw-navbar .aw-coin-pill { padding: .2rem .5rem; font-size: .8rem; }
  .aw-burger { width: 36px; height: 36px; border-radius: 11px; gap: 4px; }
  .aw-burger span { width: 16px; }
  .aw-burger span:nth-child(2) { width: 11px; }
}
@media (max-width: 400px) {
  .aw-navbar .nav-right .aw-coin-pill { display: none; }   /* ดูยอดเหรียญได้ในเมนูผู้ใช้ */
}

/* ===== กล่องแชร์ไปโซเชียล ===== */
.aw-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .5rem; }
.aw-share-btn {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .8rem .3rem; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--line); background: var(--card); color: var(--ink);
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  text-decoration: none; transition: transform .13s, border-color .15s, box-shadow .2s;
}
.aw-share-btn i { font-size: 1.4rem; color: var(--sc, var(--brand)); }
.aw-share-btn:hover {
  color: var(--ink); border-color: var(--sc, var(--brand));
  transform: translateY(-3px); box-shadow: 0 10px 20px color-mix(in srgb, var(--sc, #000) 22%, transparent);
}
.aw-share-btn:active { transform: scale(.95); }
.aw-share-btn.copied { border-color: var(--brand); background: var(--brand-fade); }
.aw-share-url { font-size: .8rem; text-align: center; }
@media (max-width: 420px) { .aw-share-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   แถบเมนูบนติดหนึบทุกขนาดจอ (มือถือ/ไอแพดเลื่อนแล้วเมนูไม่หาย)
   ทับกฎเก่าใน theme.css @media(max-width:860px) ที่ตั้ง position:static
   (เดิมตั้งไว้เพราะเมนูตกหลายบรรทัดจนกินพื้นที่ — ตอนนี้เหลือแถวเดียวแล้ว)
   ============================================================ */
:root { --aw-navh: 58px; }              /* ความสูงแถบเมนู ใช้คำนวณตำแหน่ง sticky ชั้นถัดไป */

.aw-navbar {
  position: sticky !important;
  top: 0;
  z-index: 1020;
}
/* จอเล็กต้องเป็นพื้นทึบ (backdrop-filter ถูกปิดไว้เพราะทำให้ลิ้นชักเพี้ยน) */
@media (max-width: 991.98px) {
  :root { --aw-navh: 52px; }
  .aw-navbar { background: var(--bg); box-shadow: 0 2px 10px rgba(20,30,28,.06); }
}
@media (max-width: 575.98px) { :root { --aw-navh: 48px; } }

/* เลื่อนไปยัง #anchor แล้วหัวข้อไม่ถูกแถบเมนูบัง */
html { scroll-padding-top: calc(var(--aw-navh) + 8px); }

/* หน้าอ่านนิยายมีแถบซ้อนอีกชั้น — ให้ไปเกาะใต้แถบหลัก ไม่ทับกัน */
.reader-subnav { position: sticky !important; top: var(--aw-navh) !important; z-index: 110 !important; }
.reader-toolbar { top: calc(var(--aw-navh) * 2) !important; }

/* ============================================================
   ลูกเล่นฝั่งผู้อ่าน (เพิ่ม 2026-08)
   ============================================================ */

/* ---------- แถบความคืบหน้าการอ่าน ---------- */
.read-progress{
  position:fixed; left:0; right:0; top:0; height:3px; z-index:1200;
  background:transparent; pointer-events:none;
}
.read-progress > i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--brand,#3D7A6E),#E8758F,#F6A609);
  border-radius:0 3px 3px 0;
  transition:width .12s linear;
  box-shadow:0 0 8px rgba(232,117,143,.55);
}
/* ป้าย % ที่โผล่ตอนเลื่อนแล้วจางหายไปเอง */
.read-pct{
  position:fixed; right:14px; bottom:16px; z-index:1200;
  background:rgba(28,36,34,.86); color:#fff; backdrop-filter:blur(6px);
  font-size:.74rem; font-weight:700; padding:.3rem .65rem; border-radius:999px;
  opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.read-pct.on{ opacity:1; transform:translateY(0); }

/* ---------- แถบ "อ่านต่อจากตรงที่ค้าง" ---------- */
.resume-bar{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  max-width:760px; margin:0 auto 1rem;
  padding:.6rem .9rem; border-radius:14px;
  background:linear-gradient(135deg,rgba(61,122,110,.10),rgba(232,117,143,.10));
  border:1px solid var(--line);
  animation:aw-resume-in .35s ease-out;
}
.resume-bar .rb-txt{ font-size:.9rem; }
.resume-bar .rb-txt b{ color:var(--brand,#3D7A6E); }
.resume-bar .rb-go{ margin-left:auto; }
@keyframes aw-resume-in{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }

/* ---------- ซ่อนเมนูตอนเลื่อนอ่าน ---------- */
body.nav-tuck .aw-navbar:not(.reader-subnav){
  transform:translateY(-100%);
  transition:transform .25s ease;
}
.aw-navbar:not(.reader-subnav){ transition:transform .25s ease; }
body.nav-tuck .reader-subnav{ top:0 !important; transition:top .25s ease; }
.reader-subnav{ transition:top .25s ease; }
/* แถบปรับการอ่านเกาะใต้ subnav — เมนูหุบแล้วต้องขยับตามไม่ให้เหลือช่องว่าง */
body.nav-tuck .reader-toolbar{ top:var(--aw-navh) !important; }
.reader-toolbar{ transition:top .25s ease; }

/* อ่านต่อเนื่อง — ตอนที่โหลดมาต่อท้าย กับแถบบอกสถานะ */
.rd-more-part{ margin-top:1.2rem; }
.rd-more-hint{ text-align:center; color:var(--ink-soft); font-size:.88rem; padding:1.2rem 0 .4rem; }
.rs-switch{ display:flex; align-items:flex-start; gap:.5rem; font-size:.82rem; color:var(--ink-soft); cursor:pointer; }
.rs-switch input{ margin-top:.15rem; flex:none; }

/* ===== แผงสารบัญในหน้าอ่าน ===== */
.toc-backdrop{ position:fixed; inset:0; background:rgba(20,24,22,.45); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s; z-index:2400; }
body.toc-open .toc-backdrop{ opacity:1; visibility:visible; }
.toc-panel{
  position:fixed; left:0; top:0; bottom:0; width:min(340px, 88vw); z-index:2401;
  background:var(--card,#fff); border-right:1px solid var(--line,#eee);
  box-shadow:14px 0 40px rgba(20,24,22,.18);
  display:flex; flex-direction:column;
  transform:translateX(-102%); transition:transform .26s cubic-bezier(.33,.8,.33,1);
}
body.toc-open .toc-panel{ transform:none; }
/* กันหน้าเลื่อนตอนแผงเปิด (กฎเดียวกับตอนเปิดลิ้นชักเมนู) */
body.toc-open{ overflow:hidden; }
.toc-head{ display:flex; align-items:center; gap:.5rem; padding:.9rem 1rem;
  border-bottom:1px solid var(--line,#eee); font-family:var(--font-head); }
.toc-head .meta{ margin-left:auto; font-size:.78rem; }
.toc-close{ border:none; background:var(--bg-soft); color:var(--ink); width:32px; height:32px;
  border-radius:10px; cursor:pointer; display:grid; place-items:center; }
.toc-list{ overflow-y:auto; padding:.5rem; flex:1; }
.toc-item{ display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; border-radius:11px;
  color:var(--ink); text-decoration:none; font-size:.92rem; }
.toc-item:hover{ background:var(--bg-soft); color:var(--brand-deep); }
.toc-no{ flex:none; width:2rem; height:2rem; line-height:2rem; text-align:center; border-radius:50%;
  background:var(--bg-soft); color:var(--ink-soft); font-size:.8rem; font-weight:700; }
.toc-tx{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* อ่านแล้ว = หรี่ลง ให้ตอนที่ยังไม่อ่านเด่นกว่า */
.toc-item.read .toc-tx{ color:var(--ink-soft); }
.toc-check{ color:var(--brand); flex:none; }
.toc-item.now{ background:var(--brand-fade); }
.toc-item.now .toc-no{ background:var(--brand); color:#fff; }
.toc-item.now .toc-tx{ font-weight:700; color:var(--brand-deep); }
.toc-tag{ flex:none; font-size:.66rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; }
.toc-tag.now{ background:var(--brand); color:#fff; }
.toc-tag.lock{ background:#FCE8C9; color:#9a6b16; }

/* กล่องคุยกันท้ายตอน — ใช้กระดาษแผ่นเดียวกับเนื้อเรื่องเพื่อให้ต่อเนื่องกัน
   แต่บีบให้เตี้ยลงและตัวหนังสือเล็กลง จะได้ไม่แย่งความสำคัญไปจากเนื้อเรื่อง */
.rd-talk{ margin-top:1.1rem; padding-top:1.4rem; padding-bottom:1.4rem; }
.rd-talk .cm-box h3{ font-size:1.05rem !important; }
.rd-talk .cm-text{ font-size:.95rem; }

/* ---------- ฉลองอ่านจบ ---------- */
.aw-confetti{ position:fixed; inset:0; z-index:3000; pointer-events:none; overflow:hidden; }
.aw-confetti i{
  position:absolute; top:-24px; font-style:normal; color:#E8758F;
  animation:aw-fall linear forwards;
}
.aw-confetti i:nth-child(3n){ color:#F6A609; }
.aw-confetti i:nth-child(3n+1){ color:var(--brand,#3D7A6E); }
@keyframes aw-fall{
  0%{ transform:translateY(0) rotate(0); opacity:1 }
  100%{ transform:translateY(105vh) rotate(420deg); opacity:0 }
}
.fin-pop{ border-radius:22px !important; }
.fin-card{ text-align:center; padding:.4rem .2rem; }
.fin-mascot{
  width:74px; height:74px; margin:0 auto .6rem; border-radius:50%;
  display:grid; place-items:center; font-size:2rem; color:#fff;
  background:linear-gradient(135deg,var(--brand,#3D7A6E),#E8758F);
  animation:aw-bob 1.8s ease-in-out infinite;
}
.fin-h{ font-weight:800; margin:0 0 .1rem; }
.fin-t{ font-weight:700; margin:0 0 .5rem; }
.fin-sub{ font-size:.86rem; opacity:.72; margin:0; }
.fin-streak{
  display:inline-block; margin:.1rem 0 .5rem; padding:.25rem .7rem; border-radius:999px;
  background:linear-gradient(135deg,#F6A609,#E8758F); color:#fff; font-weight:700; font-size:.82rem;
}

/* ---------- การ์ดนิยาย: เอียง 3D + แสงวิ่ง ---------- */
.novel-card{ transform-style:preserve-3d; will-change:transform; }
.novel-card.tilting{
  transform:perspective(760px) rotateX(var(--tx,0)) rotateY(var(--ty,0)) translateZ(6px);
  transition:transform .08s linear;
}
.novel-card .cover{ position:relative; overflow:hidden; }
.novel-card.tilting .cover::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.34),transparent 62%);
}

/* ---------- ปกกำลังโหลด: โครงเรืองแสงแล้วค่อยเฟดเข้า ---------- */
.novel-card .cover.img-loading::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 80%);
  background-size:220% 100%;
  animation:aw-shimmer 1.15s ease-in-out infinite;
}
.novel-card .cover.img-loading img{ opacity:0; }
.novel-card .cover.img-ready img{ animation:aw-fadein .35s ease-out; }
@keyframes aw-shimmer{ from{background-position:180% 0} to{background-position:-80% 0} }
@keyframes aw-fadein{ from{opacity:0;transform:scale(1.03)} to{opacity:1;transform:none} }

/* ---------- ชิปเวลาอ่าน ---------- */
.read-time{
  display:inline-flex; align-items:center; gap:.22rem;
  font-size:.72rem; opacity:.75; white-space:nowrap;
}

/* ---------- ชั้นหนังสือ: วงแหวนความคืบหน้า ---------- */
.prog-ring{
  position:absolute; right:8px; top:8px; width:40px; height:40px; z-index:2;
  border-radius:50%;
  background:conic-gradient(var(--brand,#3D7A6E) calc(var(--p,0) * 1%), rgba(255,255,255,.35) 0);
  display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(20,30,28,.25);
}
.prog-ring::before{
  content:''; position:absolute; inset:4px; border-radius:50%;
  background:rgba(255,255,255,.94);
}
.prog-ring span{
  position:relative; font-size:.62rem; font-weight:800; color:var(--ink,#26302e); line-height:1;
}
.prog-ring.done{ background:conic-gradient(#F6A609 100%, #F6A609 0); }
.prog-ring.done span{ color:#C97A05; }

/* ในชั้นหนังสือ ปุ่ม "..." (ย้ายชั้น) อยู่มุมซ้ายบนตำแหน่งเดียวกับป้าย ฮิต/ใหม่ ทับกันพอดี
   ซ่อนป้ายในหน้านี้อย่างเดียว — ชั้นหนังสือคือของที่เราเก็บไว้เองแล้ว
   ป้าย "ฮิต/ใหม่" ไม่ได้ช่วยตัดสินใจอะไรตรงนี้ ส่วนปุ่มย้ายชั้นเป็นตัวที่ต้องกดจริง */
.shelf-item .sticker { display: none; }

/* แถบความคืบหน้าที่ขอบล่างปกในชั้นหนังสือ — คู่กับ .prog-ring ที่มุมขวาบน */
.shelf-item .prog-bar{
  position:absolute; left:0; right:0; bottom:0; height:5px; z-index:2;
  border-radius:0 0 14px 14px; overflow:hidden;
  background:rgba(255,255,255,.45);
}
.shelf-item .prog-bar::before{
  content:''; display:block; height:100%; width:calc(var(--p,0) * 1%);
  background:linear-gradient(90deg,var(--brand,#3D7A6E),var(--brand-deep,#2C5F55));
}
/* แถบเกาะขอบล่างของ "กรอบปก" ไม่ใช่ขอบล่างของการ์ดทั้งใบ */
.shelf-item .novel-card > .position-relative{ position:relative; }

/* มงกุฎของอันดับ 1 ในชาร์ต — ต่อยอดจากเหรียญทอง/เงิน/ทองแดง */
.rank-item:first-child .cover::after{
  content:'\F80A';                    /* bi-trophy-fill */
  font-family:'bootstrap-icons';
  position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  font-size:.8rem; color:#F5C242;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  z-index:3; pointer-events:none;
}

/* เปลี่ยนหน้าแบบเฟด — ตัวคลาสถูกใส่/ถอดโดย cute.js
   ไม่แตะแถบเมนูกับฟุตเตอร์ จะได้รู้สึกว่า "เนื้อหาเปลี่ยน" ไม่ใช่ "ทั้งจอกะพริบ" */
@media (prefers-reduced-motion: no-preference) {
  body > main, body > .container { transition: opacity .16s ease, transform .16s ease; }
  body.aw-leaving > main, body.aw-leaving > .container { opacity: 0; transform: translateY(6px); }
}

/* ชิปสตรีคบนแถบเมนู — เวอร์ชันย่อของ .streak-chip ให้พอดีแถบบน
   จอแคบกว่า 1200px ซ่อนไป เพราะแถบบนตอนล็อกอินมีของแน่นอยู่แล้ว (ดูเหตุผลที่ .nav-drawer-only) */
.nav-streak{ padding:.26rem .55rem; font-size:.8rem; text-decoration:none; flex:0 0 auto; }
.nav-streak b{ font-weight:800; }
@media (max-width: 1199.98px){ .nav-streak{ display:none; } }

/* ---------- ชิปสตรีค ---------- */
.streak-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .75rem; border-radius:999px; font-weight:700; font-size:.84rem;
  background:linear-gradient(135deg,#F6A609,#E8758F); color:#fff;
  box-shadow:0 4px 14px rgba(232,117,143,.28);
}
.streak-chip .bi-fire{ animation:aw-flicker 1.4s ease-in-out infinite; }
.streak-chip.cold{ background:var(--line,#e6e2da); color:var(--ink,#26302e); box-shadow:none; }
.streak-chip.cold .bi-fire{ animation:none; opacity:.5; }
@keyframes aw-flicker{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.18) rotate(-4deg)} }

@media (prefers-reduced-motion: reduce){
  .read-progress > i, .novel-card.tilting{ transition:none; }
  .aw-confetti, .novel-card .cover.img-loading::before{ display:none; }
  .fin-mascot, .streak-chip .bi-fire{ animation:none; }
  .novel-card.tilting{ transform:none; }
}

/* ---------- บทสนทนาแจ้งปัญหา ---------- */
.sup-msg{
  max-width:88%; margin-bottom:.75rem; padding:.75rem 1rem; border-radius:16px;
  background:var(--card,#fff); border:1px solid var(--line);
  animation:aw-resume-in .28s ease-out;
}
.sup-msg.sup-me{ margin-left:auto; background:linear-gradient(135deg,rgba(61,122,110,.10),rgba(61,122,110,.04)); border-color:rgba(61,122,110,.28); }
.sup-msg.sup-admin{ margin-right:auto; background:linear-gradient(135deg,rgba(232,117,143,.10),rgba(232,117,143,.04)); border-color:rgba(232,117,143,.28); }
.sup-who{ font-size:.78rem; font-weight:700; opacity:.85; margin-bottom:.3rem; display:flex; align-items:center; gap:.35rem; }
.sup-msg.sup-admin .sup-who{ color:#C2445F; }
.sup-msg.sup-me .sup-who{ color:var(--brand-deep,#2C5F55); }
.sup-time{ margin-left:auto; font-weight:400; opacity:.6; font-size:.7rem; }
.sup-body{ line-height:1.65; word-break:break-word; }
.sup-file{
  display:flex; align-items:center; gap:.55rem; margin-top:.6rem; padding:.45rem .6rem;
  border:1px dashed var(--line); border-radius:12px; text-decoration:none; color:inherit;
  background:rgba(255,255,255,.55);
}
.sup-file:hover{ border-style:solid; }
.sup-file img{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.sup-file > .bi{ font-size:1.4rem; color:var(--brand); }
.sup-file-meta{ font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sup-file-meta small{ display:block; opacity:.6; font-size:.7rem; }
@media (max-width:575.98px){ .sup-msg{ max-width:96%; } }

/* ---------- ชีพจร: เอฟเฟกต์ตอนตัวเลขขยับ + แถบแจ้งเตือนมุมจอ ---------- */
@keyframes pulse-bump{
  0%{ transform:scale(1) }
  35%{ transform:scale(1.35) }
  100%{ transform:scale(1) }
}
.pulse-bump{ animation:pulse-bump .45s cubic-bezier(.34,1.56,.64,1); }

.pulse-toast{
  position:fixed; right:16px; bottom:16px; z-index:2600;
  display:flex; align-items:center; gap:.6rem;
  max-width:min(360px, calc(100vw - 32px));
  padding:.7rem .9rem; border-radius:14px;
  background:var(--card,#fff); border:1px solid var(--line,#e6e2da);
  box-shadow:0 12px 32px rgba(20,30,28,.18);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s, transform .25s, visibility .25s;
  font-size:.9rem;
}
.pulse-toast.on{ opacity:1; visibility:visible; transform:none; }
.pulse-toast > .bi{ color:var(--brand,#3D7A6E); font-size:1.15rem; flex:0 0 auto; }
.pulse-toast span{ flex:1; line-height:1.4; }
.pulse-toast-go{
  flex:0 0 auto; padding:.25rem .7rem; border-radius:999px; text-decoration:none;
  background:var(--brand,#3D7A6E); color:#fff; font-size:.8rem; font-weight:600;
}
.pulse-toast-x{
  flex:0 0 auto; border:none; background:none; cursor:pointer;
  font-size:1.25rem; line-height:1; color:var(--muted,#8b8b8b); padding:0 .1rem;
}
@media (max-width:575.98px){ .pulse-toast{ left:12px; right:12px; bottom:12px; max-width:none; } }
@media (prefers-reduced-motion: reduce){ .pulse-bump{ animation:none; } }