/* =====================================================================
   ทนายท้าชน — สไตล์หนังสือการ์ตูน 2D
   แนวคิด: กรอบหมึกหนา จุดฮาล์ฟโทน ช่องการ์ตูน และบับเบิลคำพูด
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700;800&display=swap');

:root {
  /* กระดาษการ์ตูน */
  --paper: #fdf4e3;
  --paper-2: #f7e9cf;
  --ink: #14110f;
  --ink-soft: #4a423c;
  --ink-faint: #8b8078;

  /* สีฝ่ายเรา (ฮีโร่) */
  --hero: #2563eb;
  --hero-dark: #1d4ed8;
  --hero-light: #dbeafe;

  /* สีฝ่ายจิตตรี (ตัวร้าย) */
  --villain: #7c1d6f;
  --villain-dark: #5b1450;
  --villain-light: #f3d9f0;

  /* สีสถานะ */
  --win: #16a34a;
  --good: #65a30d;
  --even: #d97706;
  --risk: #ea580c;
  --danger: #dc2626;
  --gold: #f5b301;

  --r: 14px;
  --r-lg: 22px;
  --bd: 4px;
  --ease: cubic-bezier(.34, 1.3, .64, 1);
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);

  --font: 'Sarabun', system-ui, sans-serif;
  --font-display: 'Mitr', 'Sarabun', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--paper);
  /* จุดฮาล์ฟโทนแบบหนังสือการ์ตูน */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(20, 17, 15, .07) 1px, transparent 0),
    linear-gradient(180deg, #fdf4e3 0%, #f6e7c9 100%);
  background-size: 14px 14px, 100% 100%;
  background-attachment: fixed;
  min-height: 100dvh;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.3; margin: 0 0 .6rem; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 3.6vw, 1.9rem); }
h3 { font-size: clamp(1.05rem, 2.6vw, 1.3rem); }
p { margin: 0 0 1rem; }
a { color: var(--hero-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }

/* ---------- โครงหน้า ---------- */
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 16px; }
.wrap-narrow { max-width: 760px; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.row { display: flex; gap: .75rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.row-center { display: flex; align-items: center; gap: .6rem; }
.wrapflex { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.tc { text-align: center; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.xs { font-size: .8rem; }
.sm { font-size: .9rem; }
.lg { font-size: 1.1rem; }
.bold { font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; }
.hide { display: none !important; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt1 { margin-top: .5rem; } .mt2 { margin-top: 1rem; } .mt3 { margin-top: 1.5rem; }
.mb1 { margin-bottom: .5rem; } .mb2 { margin-bottom: 1rem; } .mb3 { margin-bottom: 1.5rem; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- ช่องการ์ตูน (panel) ---------- */
.panel {
  background: #fffdf7;
  border: var(--bd) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow-hard);
  padding: clamp(1rem, 3vw, 1.6rem);
  position: relative;
}
.panel-tight { padding: .9rem 1rem; }
.panel-inset {
  background: var(--paper-2);
  border: 3px solid var(--ink);
  border-radius: var(--r);
  padding: .9rem 1.1rem;
}
.panel-dark {
  background: linear-gradient(160deg, #1b1430 0%, #2d1b3d 100%);
  color: #fff5e6;
  border-color: #000;
}
.panel-dark h1, .panel-dark h2, .panel-dark h3 { color: #fff; }
.panel-dark .muted { color: rgba(255, 245, 230, .72); }

/* แถบหัวช่อง */
.panel-tag {
  position: absolute; top: -14px; left: 18px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  padding: .15rem .8rem; border-radius: 99px; letter-spacing: .02em;
  white-space: nowrap;
}
.panel-tag.hero { background: var(--hero); }
.panel-tag.villain { background: var(--villain); }
.panel-tag.gold { background: var(--gold); color: var(--ink); }

/* ---------- บับเบิลคำพูด ---------- */
.bubble {
  position: relative;
  background: #fff;
  border: var(--bd) solid var(--ink);
  border-radius: 20px;
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-hard-sm);
  font-size: 1.02rem;
  line-height: 1.85;
}
.bubble::after, .bubble::before {
  content: ''; position: absolute; width: 0; height: 0;
}
/* หางบับเบิลชี้ซ้าย (ตัวละครอยู่ซ้าย) */
.bubble-left::before {
  left: -22px; top: 26px;
  border: 11px solid transparent; border-right-color: var(--ink); border-left: 0;
}
.bubble-left::after {
  left: -14px; top: 29px;
  border: 8px solid transparent; border-right-color: #fff; border-left: 0;
}
/* หางบับเบิลชี้ขวา */
.bubble-right::before {
  right: -22px; top: 26px;
  border: 11px solid transparent; border-left-color: var(--ink); border-right: 0;
}
.bubble-right::after {
  right: -14px; top: 29px;
  border: 8px solid transparent; border-left-color: #fff; border-right: 0;
}
/* บับเบิลของจิตตรี — ขอบหยักแสดงความก้าวร้าว */
.bubble-villain {
  background: #fff;
  border-color: var(--villain-dark);
  box-shadow: 5px 5px 0 var(--villain-dark);
}
.bubble-villain::before { border-right-color: var(--villain-dark); }
.bubble-attack {
  background: linear-gradient(180deg, #fff 0%, #fdf0fb 100%);
}
.bubble-win { background: #eafbf0; border-color: #0a7d3f; box-shadow: 5px 5px 0 #0a7d3f; }
.bubble-lose { background: #fdeaea; border-color: #a11414; box-shadow: 5px 5px 0 #a11414; }
.bubble-judge { background: #fff9e6; border-color: #8a6d1a; box-shadow: 5px 5px 0 #8a6d1a; }

/* ---------- ตัวละคร ---------- */
.char {
  width: clamp(76px, 18vw, 116px);
  flex: 0 0 auto;
  filter: drop-shadow(3px 3px 0 rgba(20, 17, 15, .28));
}
.char-row { display: flex; align-items: flex-start; gap: clamp(.6rem, 2vw, 1.1rem); }
/* คอลัมน์ตัวละครกว้างคงที่ ไม่ให้ชื่อยาวไปเบียดเนื้อหาด้านขวา */
.char-col { flex: 0 0 auto; width: clamp(76px, 18vw, 116px); }
.char-col .char { width: 100%; }
.char-name {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  text-align: center; margin-top: .3rem; line-height: 1.25;
  overflow-wrap: anywhere;
}
.char-villain .char-name { color: var(--villain); }
.char-hero .char-name { color: var(--hero-dark); }

/* จิตตรีสั่นตอนโดนหมัดเข้าเต็มๆ */
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-6px) rotate(-3deg); }
  40% { transform: translateX(6px) rotate(3deg); }
  60% { transform: translateX(-4px) rotate(-2deg); }
  80% { transform: translateX(4px) rotate(2deg); }
}
.shake { animation: shake .5s ease-in-out; }

@keyframes bobbing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.bob { animation: bobbing 3.2s ease-in-out infinite; }

/* ---------- เอฟเฟกต์กระแทก (POW!) ---------- */
.burst {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  padding: .55rem 1.4rem;
  text-shadow: 2px 2px 0 var(--ink);
  clip-path: polygon(6% 0, 22% 12%, 38% 0, 54% 12%, 70% 0, 88% 12%, 100% 6%,
                     94% 28%, 100% 48%, 92% 66%, 100% 88%, 80% 84%,
                     64% 100%, 48% 86%, 32% 100%, 16% 86%, 0 92%,
                     8% 70%, 0 50%, 8% 30%, 0 10%);
  background: var(--danger);
}
.burst-hit { background: linear-gradient(135deg, #16a34a, #4ade80); }
.burst-miss { background: linear-gradient(135deg, #dc2626, #f87171); }
.burst-ok { background: linear-gradient(135deg, #ca8a04, #facc15); color: var(--ink); text-shadow: 1px 1px 0 rgba(255,255,255,.6); }

@keyframes burstIn {
  0% { opacity: 0; transform: scale(.2) rotate(-18deg); }
  60% { opacity: 1; transform: scale(1.22) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}
.burst-anim { animation: burstIn .55s var(--ease) both; }

/* เส้นความเร็วรอบเอฟเฟกต์ */
.speedlines {
  position: absolute; inset: -30% -10%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(20,17,15,.14) 0deg 2deg, transparent 2deg 9deg);
  pointer-events: none; opacity: 0; border-radius: 50%;
}
@keyframes linesIn { 0% { opacity: 0; transform: scale(.4); } 45% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }
.speedlines.on { animation: linesIn .7s ease-out both; }

/* ---------- มาตรวัดโอกาสชนะ ---------- */
.meter-wrap {
  border: var(--bd) solid var(--ink);
  border-radius: 99px;
  background: #fff;
  padding: 5px;
  box-shadow: var(--shadow-hard-sm);
  position: relative;
  overflow: hidden;
}
.meter-bar {
  height: 26px; border-radius: 99px; position: relative;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 8px, transparent 8px 16px), var(--meter-color, var(--even));
  width: 0;
  transition: width .9s var(--ease), background-color .5s;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: .6rem;
  min-width: 42px;
}
.meter-num {
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.45);
}
.meter-tone-win { --meter-color: var(--win); }
.meter-tone-good { --meter-color: var(--good); }
.meter-tone-even { --meter-color: var(--even); }
.meter-tone-risk { --meter-color: var(--risk); }
.meter-tone-danger { --meter-color: var(--danger); }

/* กระพริบตอนวิกฤต */
@keyframes pulseRed { 0%,100% { box-shadow: var(--shadow-hard-sm); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,.28), var(--shadow-hard-sm); } }
.meter-critical { animation: pulseRed 1.1s ease-in-out infinite; }

.delta-pop {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  display: inline-block;
}
@keyframes floatUp { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 30% { opacity: 1; transform: translateY(-4px) scale(1.15); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }
.delta-pop.on { animation: floatUp 1.5s ease-out both; }
.delta-up { color: var(--win); }
.delta-down { color: var(--danger); }

/* ---------- การ์ดข้อกฎหมาย ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .85rem; }

/* กองการ์ดยาว — ให้เลื่อนในกล่องตัวเอง ไม่ดันหน้าจนยาวเกินไป */
.cards-scroll {
  max-height: min(62vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem .5rem .75rem;
  margin: 0 -.5rem;
  border-radius: var(--r);
  /* เงาบอกว่ายังเลื่อนได้อีก */
  background:
    linear-gradient(var(--paper) 30%, rgba(250,243,228,0)) top / 100% 26px no-repeat,
    linear-gradient(rgba(250,243,228,0), var(--paper) 70%) bottom / 100% 26px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(20,17,15,.14), transparent) top / 100% 11px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(20,17,15,.14), transparent) bottom / 100% 11px no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.cards-scroll::-webkit-scrollbar { width: 10px; }
.cards-scroll::-webkit-scrollbar-track { background: rgba(20,17,15,.06); border-radius: 99px; }
.cards-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-faint, #b9ac95); border-radius: 99px; border: 2px solid var(--paper);
}

/* แถบบอกจำนวนผลค้น */
.cards-count {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.cards-count b { font-family: var(--font-display); }

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .cards-scroll { max-height: 58vh; }
}
.lawcard {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--r);
  padding: .85rem .95rem;
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: .9rem;
  transition: transform .16s var(--ease), box-shadow .16s;
  position: relative;
  display: flex; flex-direction: column; gap: .35rem;
  width: 100%;
}
.lawcard:hover, .lawcard:focus-visible {
  transform: translate(-2px, -3px);
  box-shadow: 7px 8px 0 var(--ink);
  outline: none;
}
.lawcard.selected {
  background: var(--hero-light);
  border-color: var(--hero-dark);
  box-shadow: 7px 8px 0 var(--hero-dark);
  transform: translate(-2px, -3px);
}
.lawcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.lawcard-label {
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--hero-dark); line-height: 1.35;
}
.lawcard.type-precedent .lawcard-label { color: #8a5a08; }
.lawcard-title { font-weight: 700; font-size: .92rem; line-height: 1.45; }
.lawcard-text { font-size: .82rem; color: var(--ink-soft); line-height: 1.65; }
.lawcard-power { display: flex; gap: 2px; flex: 0 0 auto; }
.pip { width: 7px; height: 14px; border-radius: 2px; background: #ddd4c4; border: 1px solid rgba(0,0,0,.18); }
.pip.on { background: var(--gold); }
.lawcard.type-precedent { background: #fffaf0; }

/* ---------- ปุ่ม ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: .7rem 1.4rem;
  border: var(--bd) solid var(--ink);
  border-radius: 99px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-hard-sm);
  transition: transform .14s var(--ease), box-shadow .14s;
  text-decoration: none;
  line-height: 1.4;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); text-decoration: none; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-hard-sm); }
.btn-hero { background: var(--hero); color: #fff; }
.btn-villain { background: var(--villain); color: #fff; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-win { background: var(--win); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-lg { font-size: 1.15rem; padding: .9rem 1.9rem; }
.btn-sm { font-size: .86rem; padding: .45rem 1rem; border-width: 3px; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; box-shadow: none; border-width: 3px; }
.btn-ghost:hover { background: rgba(0,0,0,.05); box-shadow: none; transform: none; }

/* ---------- ช่องกรอกข้อความ ---------- */
.field-label {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  display: block; margin-bottom: .4rem;
}
.input, .textarea, .select {
  width: 100%;
  font-family: var(--font); font-size: 1rem;
  padding: .75rem 1rem;
  border: var(--bd) solid var(--ink);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.06);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--hero);
  box-shadow: 0 0 0 4px rgba(37,99,235,.22);
}
.textarea { min-height: 90px; resize: vertical; line-height: 1.7; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2314110f' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.input-row { display: flex; gap: .6rem; flex-wrap: wrap; }
/* min-width:0 กัน flex item ดันตัวเองจนช่องพิมพ์แคบเกินใช้งาน */
.input-row .input { flex: 1 1 12rem; min-width: 0; }
.input-row .btn { flex: 0 0 auto; }

/* ---------- ป้ายกำกับ ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-display); font-weight: 500; font-size: .78rem;
  padding: .2rem .7rem; border-radius: 99px;
  border: 2px solid var(--ink); background: #fff;
  white-space: nowrap;
}
.tag-hero { background: var(--hero); color: #fff; }
.tag-villain { background: var(--villain); color: #fff; }
.tag-gold { background: var(--gold); }
.tag-win { background: var(--win); color: #fff; }
.tag-danger { background: var(--danger); color: #fff; }
.tag-soft { background: var(--paper-2); }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ---------- ผลการเล่นแต่ละรอบ ---------- */
.grade-perfect { --gc: var(--win); }
.grade-good { --gc: var(--good); }
.grade-weak { --gc: var(--even); }
.grade-miss { --gc: var(--danger); }
.result-box {
  border: var(--bd) solid var(--gc, var(--ink));
  border-radius: var(--r);
  background: #fff;
  padding: 1rem 1.15rem;
  box-shadow: 5px 5px 0 var(--gc, var(--ink));
}
.result-head { font-family: var(--font-display); font-weight: 700; color: var(--gc); font-size: 1.05rem; }

/* ---------- ไทม์ไลน์รอบการต่อสู้ ---------- */
.rounds-strip { display: flex; gap: .35rem; flex-wrap: wrap; }
.round-dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--ink); background: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
}
.round-dot.done-perfect { background: var(--win); color: #fff; }
.round-dot.done-good { background: var(--good); color: #fff; }
.round-dot.done-weak { background: var(--even); color: #fff; }
.round-dot.done-miss { background: var(--danger); color: #fff; }
.round-dot.done-skipped { background: var(--ink-faint); color: #fff; }
.round-dot.now { background: var(--gold); box-shadow: 0 0 0 4px rgba(245,179,1,.35); }

/* ---------- หน้าปก ---------- */
.cover {
  position: relative;
  border: 5px solid var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.25) 0%, transparent 45%),
    linear-gradient(150deg, #2b1055 0%, #7c1d6f 45%, #b91c1c 100%);
  color: #fff;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.5rem);
  box-shadow: 8px 8px 0 var(--ink);
}
.cover::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size: 10px 10px;
  pointer-events: none;
}
.cover::after {
  content: ''; position: absolute; inset: -40% -20% auto -20%; height: 160%;
  background: repeating-conic-gradient(from 0deg at 50% 0%,
    rgba(255,255,255,.07) 0deg 3deg, transparent 3deg 12deg);
  pointer-events: none;
}
.cover > * { position: relative; z-index: 1; }
.cover h1 {
  color: #fff;
  font-size: clamp(2rem, 8vw, 4rem);
  text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 rgba(245,179,1,.5);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.cover-sub { font-size: clamp(1rem, 2.6vw, 1.25rem); color: #ffe9a8; font-family: var(--font-display); }

/* ---------- สถิติ ---------- */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.stat {
  border: 3px solid var(--ink); border-radius: var(--r);
  background: #fff; padding: .8rem .5rem; text-align: center;
  box-shadow: var(--shadow-hard-sm);
}
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; }
.stat-label { font-size: .78rem; color: var(--ink-soft); margin-top: .2rem; }

/* ---------- รายการหมวดคดี ---------- */
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.cat {
  border: 3px solid var(--ink); border-radius: var(--r);
  background: #fff; padding: .8rem; text-align: center;
  box-shadow: var(--shadow-hard-sm); cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .14s;
  font-family: inherit; font-size: .9rem; width: 100%;
}
.cat:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.cat.on { background: var(--hero-light); border-color: var(--hero-dark); box-shadow: 6px 6px 0 var(--hero-dark); }
.cat-emoji { font-size: 1.8rem; display: block; line-height: 1.2; }
.cat-name { font-family: var(--font-display); font-weight: 600; font-size: .88rem; }
.cat-count { font-size: .74rem; color: var(--ink-faint); }

/* =====================================================================
   ลูกเล่นตอนต่อสู้ — แซวตอนคิดนาน / ฉากไม้เด็ด / ศาลพลิกคำพิพากษา
   ===================================================================== */

/* ---------- popup จิตตรีแซวตอนผู้เล่นนิ่ง ---------- */
.taunt {
  position: fixed; right: 12px; bottom: 12px; z-index: 80;
  display: flex; align-items: flex-end; gap: .5rem;
  max-width: min(370px, calc(100vw - 24px));
  pointer-events: none;
}
.taunt-char { width: 62px; flex: 0 0 auto; filter: drop-shadow(3px 3px 0 rgba(20,17,15,.3)); }
.taunt-bubble {
  position: relative; background: #fff;
  border: var(--bd) solid var(--villain-dark);
  border-radius: 18px; padding: .7rem .9rem;
  box-shadow: 5px 5px 0 var(--villain-dark);
  font-size: .9rem; line-height: 1.6;
}
.taunt-bubble::before {
  content: ''; position: absolute; left: -18px; bottom: 16px;
  border: 9px solid transparent; border-right-color: var(--villain-dark); border-left: 0;
}
.taunt-bubble::after {
  content: ''; position: absolute; left: -11px; bottom: 19px;
  border: 6px solid transparent; border-right-color: #fff; border-left: 0;
}
.taunt-tier2 .taunt-bubble { background: #fff6fd; }
.taunt-tier3 .taunt-bubble { background: #fdeaea; border-color: #a11414; box-shadow: 5px 5px 0 #a11414; }
.taunt-tier3 .taunt-bubble::before { border-right-color: #a11414; }

@keyframes tauntIn {
  0% { opacity: 0; transform: translate(30px, 14px) scale(.8); }
  60% { opacity: 1; transform: translate(-4px, 0) scale(1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes tauntOut { to { opacity: 0; transform: translate(24px, 10px) scale(.9); } }
.taunt.in { animation: tauntIn .45s var(--ease) both; }
.taunt.out { animation: tauntOut .35s ease-in both; }

/* ---------- ฉาก title ตอนจิตตรีคว้าไม้เด็ด ---------- */
.cutin {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  background: rgba(10, 6, 18, .82);
  backdrop-filter: blur(3px);
  overflow: hidden;
}
.cutin::before {
  content: ''; position: absolute; inset: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.10) 0deg 2deg, transparent 2deg 8deg);
  animation: cutinSpin 2.4s linear infinite;
}
@keyframes cutinSpin { to { transform: rotate(360deg); } }

.cutin-inner { position: relative; text-align: center; width: 100%; padding: 0 1rem; }
/* เว้นที่ขวาไว้ให้จิตตรี ไม่ให้ตัวหนังสือทับตัวละคร */
.cutin-text { position: relative; padding-right: clamp(110px, 30vw, 250px); }

/* แถบสีทแยงวิ่งเข้ามาจากสองข้าง */
.cutin-band {
  position: absolute; left: -10%; right: -10%; height: 118px; top: 50%;
  transform: translateY(-50%) skewY(-4deg);
  background: linear-gradient(90deg, #4a0f43, #a3177f 45%, #d21e6e 70%, #4a0f43);
  border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink);
  box-shadow: 0 12px 0 rgba(0,0,0,.35);
}
@keyframes bandIn { from { transform: translateY(-50%) skewY(-4deg) scaleX(0); } to { transform: translateY(-50%) skewY(-4deg) scaleX(1); } }
.cutin-band { animation: bandIn .38s var(--ease) both; }

.cutin-title {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 5.4vw, 3.2rem); color: #fff;
  text-shadow: 4px 4px 0 var(--ink), 0 0 26px rgba(255,120,200,.65);
  letter-spacing: -.02em; line-height: 1.2;
  overflow-wrap: anywhere;
}
@keyframes titleSlam {
  0% { opacity: 0; transform: scale(2.6) rotate(-8deg); filter: blur(6px); }
  55% { opacity: 1; transform: scale(.94) rotate(1deg); filter: blur(0); }
  75% { transform: scale(1.06) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1); }
}
.cutin-title { animation: titleSlam .6s var(--ease) .22s both; }

.cutin-sub {
  position: relative; margin-top: .5rem;
  font-family: var(--font-display); font-size: clamp(.72rem, 2.6vw, 1.05rem);
  color: #ffd9f2; text-shadow: 2px 2px 0 var(--ink);
  line-height: 1.5;
  opacity: 0; animation: fadeUp .4s ease .7s both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* จิตตรีพุ่งเข้ามาจากขวา */
.cutin-char {
  position: absolute; right: 2%; top: 50%;
  transform-origin: center bottom;
  width: clamp(100px, 26vw, 230px);
  margin-top: -22%;
  filter: drop-shadow(-8px 0 0 rgba(0,0,0,.4));
  animation: charRush .5s var(--ease) .1s both;
}
.cutin-char svg { width: 100%; height: auto; display: block; }
@keyframes charRush {
  from { opacity: 0; transform: translateX(60%) scale(.85); }
  to { opacity: 1; transform: none; }
}

/* เอกสารหลักฐานปลิวว่อน */
.cutin-doc {
  position: absolute; width: 46px; height: 60px;
  background: #fffdf2; border: 3px solid var(--ink); border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35);
}
.cutin-doc::before, .cutin-doc::after {
  content: ''; position: absolute; left: 7px; right: 7px; height: 3px; background: #cfc6b4;
}
.cutin-doc::before { top: 12px; }
.cutin-doc::after { top: 22px; box-shadow: 0 10px 0 #cfc6b4, 0 20px 0 #cfc6b4; }
@keyframes docFly {
  0% { opacity: 0; transform: translate(0, 40vh) rotate(0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 30vw), -50vh) rotate(var(--rot, 220deg)); }
}
.cutin-doc { animation: docFly 1.5s ease-out both; }

/* ---------- ฉากศาลพลิกคำพิพากษา (ทริกแกล้ง) ---------- */
.teaser {
  border: var(--bd) dashed #7a1020; border-radius: var(--r);
  background: repeating-linear-gradient(135deg, #fff7f7 0 12px, #ffeaea 12px 24px);
  padding: 1rem 1.15rem; position: relative;
}
.teaser-tag {
  position: absolute; top: -14px; left: 16px;
  background: #7a1020; color: #fff;
  font-family: var(--font-display); font-size: .76rem; font-weight: 600;
  padding: .15rem .8rem; border-radius: 99px;
}
.teaser-line { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; font-size: .93rem; line-height: 1.75; }
.teaser-line:last-child { margin-bottom: 0; }
.teaser-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #7a1020; margin-top: .55rem; }
@keyframes teaserReveal { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.teaser-line { animation: teaserReveal .5s ease both; }
.teaser-line:nth-child(2) { animation-delay: .5s; }
.teaser-line:nth-child(3) { animation-delay: 1s; }
.teaser-line:nth-child(4) { animation-delay: 1.5s; }

.teaser-sting {
  margin-top: .9rem; padding: .7rem .9rem;
  background: var(--ink); color: #ffd9f2; border-radius: var(--r-sm, 10px);
  font-size: .92rem; font-style: italic; line-height: 1.7;
  animation: teaserReveal .5s ease 2s both;
}

/* กล่องเฉลยมุกในหน้าบทเรียน */
.reveal-box {
  border: var(--bd) solid var(--hero-dark); border-radius: var(--r);
  background: linear-gradient(160deg, #eef4ff, #dbe7ff);
  box-shadow: 6px 6px 0 var(--hero-dark);
  padding: 1.15rem 1.25rem; position: relative;
}
.reveal-reason {
  display: flex; gap: .75rem; align-items: flex-start;
  background: #fff; border: 3px solid var(--ink); border-radius: var(--r);
  padding: .8rem .95rem; box-shadow: var(--shadow-hard-sm);
}
.reveal-reason .ic { font-size: 1.5rem; line-height: 1.2; flex: 0 0 auto; }

/* ---------- ตัวละครเปลี่ยนสีหน้าได้ ---------- */
.face-stage { position: relative; }
.face-stage > svg { display: none; }
.face-stage > svg.on { display: block; }

/* สั่นแรงตอนโดนหมัดเข้าเต็มๆ */
@keyframes shakeHard {
  0%, 100% { transform: translate(0,0) rotate(0); }
  15% { transform: translate(-8px,2px) rotate(-5deg); }
  30% { transform: translate(8px,-2px) rotate(5deg); }
  45% { transform: translate(-6px,1px) rotate(-3deg); }
  60% { transform: translate(6px,-1px) rotate(3deg); }
  80% { transform: translate(-3px,0) rotate(-1deg); }
}
.shake-hard { animation: shakeHard .6s ease-in-out; }

/* จอสั่นตอนเสียโอกาสหนัก */
@keyframes screenJolt {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(3px, -1px); }
}
.jolt { animation: screenJolt .4s ease-in-out; }

/* แถบเตือนตอนโอกาสชนะวิกฤต */
@keyframes dangerPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(220,38,38,0); }
  50% { box-shadow: inset 0 0 60px 0 rgba(220,38,38,.28); }
}
body.critical::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  animation: dangerPulse 1.6s ease-in-out infinite;
}

/* กรอบยกไม้เด็ด — เรืองแสงเตือนว่ายกนี้หนัก */
.panel-trump {
  position: relative;
  background: linear-gradient(180deg, #fff, #fdf2fb);
}
.panel-trump::after {
  content: ''; position: absolute; inset: -4px; border-radius: var(--r);
  pointer-events: none; border: 3px solid rgba(210,30,110,.5);
  animation: trumpRing 2s ease-in-out infinite;
}
@keyframes trumpRing { 0%,100% { opacity: .25; } 50% { opacity: .9; } }

/* ป้ายบอกว่ายกนี้คือยกไม้เด็ด */
.trump-flag {
  display: inline-flex; align-items: center; gap: .3rem;
  background: linear-gradient(90deg, #a3177f, #d21e6e);
  color: #fff; border: 2px solid var(--ink); border-radius: 99px;
  font-family: var(--font-display); font-weight: 600; font-size: .76rem;
  padding: .2rem .75rem;
  box-shadow: 0 0 0 0 rgba(210,30,110,.6);
  animation: trumpGlow 1.8s ease-in-out infinite;
}
@keyframes trumpGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210,30,110,.55); }
  50% { box-shadow: 0 0 0 7px rgba(210,30,110,0); }
}

@media (max-width: 560px) {
  .taunt { right: 8px; bottom: 8px; max-width: calc(100vw - 16px); }
  .taunt-char { width: 48px; }
  .taunt-bubble { font-size: .84rem; padding: .55rem .7rem; }
  .cutin-band { height: 132px; }
}

/* =====================================================================
   ลูกความกังวล / ฉากเปิดห้องพิจารณา / ปุ่มเสียง
   ===================================================================== */

/* ---------- ปุ่มเปิดปิดเสียง ---------- */
.sound-btn {
  cursor: pointer; border: 2px solid var(--ink); background: #fff;
  font-size: .95rem; line-height: 1; padding: .3rem .55rem;
  border-radius: 99px;
}
.sound-btn:active { transform: translateY(1px); }

/* ---------- ฟองความคิดของลูกความ ---------- */
.worry {
  position: fixed; left: 12px; bottom: 12px; z-index: 82;
  display: flex; align-items: flex-end; gap: .55rem;
  max-width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}
.worry-char { width: 60px; flex: 0 0 auto; filter: drop-shadow(3px 3px 0 rgba(20,17,15,.28)); }
.worry-cloud {
  position: relative; background: #f4f7ff;
  border: var(--bd) solid #3a4a6b; border-radius: 22px;
  padding: .7rem .95rem; box-shadow: 5px 5px 0 #3a4a6b;
  font-size: .9rem; line-height: 1.65; font-style: italic;
}
/* หางเป็นวงกลมไล่ขนาด แบบฟองความคิดในการ์ตูน */
.worry-cloud::before,
.worry-cloud::after {
  content: ''; position: absolute; background: #f4f7ff;
  border: 3px solid #3a4a6b; border-radius: 50%;
}
.worry-cloud::before { width: 14px; height: 14px; left: -10px; bottom: 12px; }
.worry-cloud::after  { width: 8px;  height: 8px;  left: -18px; bottom: 2px; }

.worry-name {
  display: block; font-size: .7rem; font-style: normal; font-weight: 600;
  font-family: var(--font-display); color: #3a4a6b; margin-bottom: .2rem;
}
.worry-t2 .worry-cloud { background: #fff6ec; border-color: #b45309; box-shadow: 5px 5px 0 #b45309; }
.worry-t2 .worry-cloud::before, .worry-t2 .worry-cloud::after { background: #fff6ec; border-color: #b45309; }
.worry-t2 .worry-name { color: #b45309; }
.worry-t3 .worry-cloud { background: #fdeaea; border-color: #a11414; box-shadow: 5px 5px 0 #a11414; }
.worry-t3 .worry-cloud::before, .worry-t3 .worry-cloud::after { background: #fdeaea; border-color: #a11414; }
.worry-t3 .worry-name { color: #a11414; }

@keyframes worryIn {
  0% { opacity: 0; transform: translate(-26px, 14px) scale(.85); }
  60% { opacity: 1; transform: translate(3px, 0) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes worryOut { to { opacity: 0; transform: translate(-20px, 10px) scale(.9); } }
.worry.in { animation: worryIn .45s var(--ease) both; }
.worry.out { animation: worryOut .35s ease-in both; }

/* สั่นเบาๆ ตอนกังวลหนัก */
@keyframes worryTremble {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, .5px); }
  75% { transform: translate(1px, -.5px); }
}
.worry-t3 .worry-char { animation: worryTremble .18s linear infinite; }

/* =====================================================================
   ฉากเปิด — ห้องพิจารณาคดีแบบภาพยนตร์ 2D
   ตัวละครยืนอยู่ในฉากจริง กล้องขยับได้ ข้อความเป็นซับไตเติลด้านล่าง
   ===================================================================== */
.opening {
  position: fixed; inset: 0; z-index: 96;
  background: #05040a;
  overflow: hidden;
}

/* กรอบดำบน-ล่างแบบจอหนัง */
.opening::before, .opening::after {
  content: ''; position: absolute; left: 0; right: 0; height: 7vh;
  background: #05040a; z-index: 8; pointer-events: none;
}
.opening::before { top: 0; }
.opening::after { bottom: 0; }
@keyframes barsIn { from { height: 50vh; } to { height: 7vh; } }
.opening::before, .opening::after { animation: barsIn .8s var(--ease) both; }

/* ---------- เวที ---------- */
.court-stage { position: absolute; inset: 0; overflow: hidden; }
.court-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  background: #14100c;
}

/* ---------- ตัวละครในฉาก (อยู่ในพิกัดของ SVG) ---------- */
.court-actor { opacity: 0; transition: opacity .45s ease; }
.court-actor.on { opacity: 1; }
/* ซ่อนสีหน้าที่ไม่ได้ใช้ — ใช้คลาส .off เพราะ SVG ไม่มี display:none จาก [hidden] */
.court-actor svg.off { display: none; }
.court-shadow { fill: rgba(0,0,0,.42); }

/* จิตตรีเดินเข้ามาจากประตู */
@keyframes strutIn {
  0%   { opacity: 0; transform: translateX(230px) translateY(-26px) scale(.68); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
#actVillain { transform-origin: 950px 500px; }
#actVillain.strut { animation: strutIn 2.1s cubic-bezier(.3,.72,.3,1) both; }

/* ลูกความสะดุ้ง */
@keyframes flinch {
  0%   { transform: translateX(0); }
  22%  { transform: translateX(-14px) translateY(3px); }
  50%  { transform: translateX(6px); }
  100% { transform: none; }
}
#actClient.react { animation: flinch .6s ease-out; }

/* เราลุกขึ้นยืน */
@keyframes standUp {
  from { opacity: 0; transform: translateY(46px); }
  to   { opacity: 1; transform: none; }
}
#actHero.rise { animation: standUp .75s var(--ease) both; }

/* ---------- ไฟสปอตไลต์ตามตัวละคร ---------- */
.court-spot {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 60%),
    rgba(255,244,214,.30) 0, rgba(255,244,214,.10) 18%, transparent 42%);
  opacity: 0; transition: opacity .8s ease, background .9s ease;
}
.court-spot.on { opacity: 1; }

/* ---------- ฝุ่นลอยในลำแสง ---------- */
.court-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.court-dust span {
  position: absolute; border-radius: 50%;
  background: rgba(255,245,214,.75);
  animation-name: dustFloat; animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes dustFloat {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: .8; }
  85%  { opacity: .5; }
  100% { transform: translate(26px, -70px); opacity: 0; }
}

/* ---------- แฟลชขาวตอนเปลี่ยนช็อต ---------- */
.court-flash {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: #fff; opacity: 0;
}
@keyframes flashCut { 0% { opacity: .85; } 100% { opacity: 0; } }
.court-flash.go { animation: flashCut .34s ease-out; }

/* ---------- ซับไตเติลแบบหนัง ---------- */
.court-sub {
  position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 9;
  padding: 0 1.25rem; text-align: center;
  pointer-events: none;
}
.court-sub-inner {
  display: inline-block; max-width: min(760px, 92%);
  background: rgba(6,4,10,.74);
  border-left: 5px solid var(--gold);
  border-radius: 6px;
  padding: .7rem 1.1rem;
  backdrop-filter: blur(3px);
}
.court-who {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .74rem; letter-spacing: .04em; margin-bottom: .25rem;
  color: var(--gold);
}
.court-who.villain { color: #ff9bdd; }
.court-who.client  { color: #7ee0c8; }
.court-who.hero    { color: #9dc2ff; }
.court-line {
  display: block; color: #fff; font-size: clamp(.86rem, 2.5vw, 1.02rem);
  line-height: 1.75; text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
@keyframes subIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.court-sub-inner { animation: subIn .4s var(--ease) both; }

/* ---------- การ์ดชื่อฉากตอนเปิด ---------- */
/* ต้องประกาศก่อน .court-title ไม่งั้น display:grid จะไปทับ [hidden] ของเบราว์เซอร์
   แล้วป้ายชื่อฉากจะค้างอยู่ทุกช็อต */
.opening [hidden] { display: none !important; }

.court-title {
  position: absolute; inset: 0; z-index: 9;
  display: grid; place-items: center; text-align: center;
  pointer-events: none;
}
@keyframes titleCard {
  0%   { opacity: 0; transform: scale(1.14); letter-spacing: .3em; }
  22%  { opacity: 1; transform: scale(1); letter-spacing: .04em; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}
.court-title > div { animation: titleCard 2.6s ease both; }
.court-title b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 3.4rem); color: #fff;
  letter-spacing: .04em; text-shadow: 0 4px 18px rgba(0,0,0,.9);
}
.court-title span {
  display: block; margin-top: .5rem; color: #e8d9b5;
  font-family: var(--font-display); font-size: clamp(.8rem, 2.6vw, 1rem);
}

/* ---------- ตัวควบคุม ---------- */
.op-bar {
  position: absolute; left: 0; right: 0; bottom: 1.6vh; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; flex-wrap: wrap; padding: 0 1rem;
}
.op-skip {
  background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.45);
  color: #fff; border-radius: 99px; cursor: pointer;
  font-family: var(--font-display); font-size: .78rem; padding: .3rem .9rem;
}
.op-skip:hover { border-color: #fff; background: rgba(255,255,255,.16); }
.op-dots { display: flex; gap: .3rem; }
.op-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s; }
.op-dot.on { background: var(--gold); }
.op-next { font-family: var(--font-display); font-size: .74rem; color: rgba(255,255,255,.6); }

@media (max-width: 560px) {
  .opening::before, .opening::after { height: 5vh; }
  .court-actor { width: 22%; }
  .actor-client { width: 19%; }
  .court-sub { bottom: 8vh; }
  .court-sub-inner { padding: .55rem .8rem; max-width: 96%; }
  .court-cam[data-shot="villain"] { transform: scale(2.4) translate(-17%, 8%); }
  .court-cam[data-shot="client"]  { transform: scale(2.4) translate(16%, 9%); }
  .court-cam[data-shot="hero"]    { transform: scale(2.1) translate(15%, 7%); }
}

/* ---------- ฉากใต้โต๊ะ: ป้ายชื่อฉาก ---------- */
.teaser-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 4vw, 1.5rem); color: #7a1020;
  margin: .15rem 0 .75rem;
}
.teaser-prop {
  font-size: 2.4rem; line-height: 1; text-align: center;
  margin-bottom: .35rem;
  animation: propBob 2.2s ease-in-out infinite;
}
@keyframes propBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-7px) rotate(4deg); }
}
.teaser-whisper {
  margin-top: .75rem; padding: .7rem .9rem;
  background: #fff; border: 3px dashed #7a1020; border-radius: var(--r);
  font-size: .9rem; line-height: 1.7;
}

@media (max-width: 560px) {
  .worry { left: 8px; bottom: 8px; max-width: calc(100vw - 16px); }
  .worry-char { width: 46px; }
  .worry-cloud { font-size: .84rem; padding: .55rem .75rem; }
  .op-char { width: 60px; }
  .op-frame { padding: .85rem .95rem; }
}

/* =====================================================================
   บทส่งท้าย "สองปีต่อมา" — มอนทาจข่าวแบบหนัง
   ===================================================================== */
.epi {
  position: fixed; inset: 0; z-index: 97;
  background: radial-gradient(130% 100% at 50% 30%, #1b1621, #06050a 72%);
  overflow: hidden;
}
.epi::before, .epi::after {
  content: ''; position: absolute; left: 0; right: 0; height: 6vh;
  background: #06050a; z-index: 8; pointer-events: none;
}
.epi::before { top: 0; } .epi::after { bottom: 0; }

.epi [hidden] { display: none !important; }

/* การ์ดชื่อตอนของบทส่งท้าย — ค้างไว้ทั้งช็อต ไม่จางหายเหมือนของฉากเปิด */
.epi .court-title { z-index: 6; }
.epi .court-title > div { animation: epiTitle 1.4s ease both; }

/* ---------- ฉากวาดเต็มจอ (สลับระหว่างหน้าศาล / ห้องพิจารณา) ---------- */
.epi-set { position: absolute; inset: 0; transition: filter .6s ease; }
.epi.dim .epi-set { filter: brightness(.38) saturate(.75); }

/* ---------- ไฟรถตำรวจ — แดงน้ำเงินสลับกัน ---------- */
@keyframes eplRed  { 0%, 44% { opacity: 1; } 50%, 94% { opacity: .15; } 100% { opacity: 1; } }
@keyframes eplBlue { 0%, 44% { opacity: .15; } 50%, 94% { opacity: 1; } 100% { opacity: .15; } }
.epl-r { animation: eplRed .7s linear infinite; }
.epl-b { animation: eplBlue .7s linear infinite; }
.epl-glow-r { animation: eplRed .7s linear infinite; }
.epl-glow-b { animation: eplBlue .7s linear infinite; }
.epi.live .epl-glow-r, .epi.live .epl-glow-b { opacity: .3; }

/* ---------- แฟลชนักข่าว ---------- */
@keyframes pressPop {
  0%, 88% { opacity: 0; transform: scale(.4); }
  90% { opacity: .95; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(.6); }
}
.press-flash { opacity: 0; transform-origin: center; transform-box: fill-box; }
.pf1 { animation: pressPop 2.3s linear infinite .2s; }
.pf2 { animation: pressPop 1.9s linear infinite 1.1s; }
.pf3 { animation: pressPop 2.7s linear infinite .6s; }
/* ตอนฉากจับกุมสด แฟลชรัวถี่ขึ้น */
.epi.live .pf1 { animation-duration: .9s; }
.epi.live .pf2 { animation-duration: .7s; }
.epi.live .pf3 { animation-duration: 1.1s; }

/* ---------- ฝน ---------- */
@keyframes rainFall { from { transform: translate(0, -60px); } to { transform: translate(-30px, 120px); } }
.epi-rain.r1 { animation: rainFall 1.15s linear infinite; }
.epi-rain.r2 { animation: rainFall 1.15s linear infinite .55s; }

/* ---------- เวทีหนังสือพิมพ์ ---------- */
.epi-stage {
  position: absolute; inset: 6vh 0 12vh;
  display: grid; place-items: center;
  padding: 1rem;
  pointer-events: none;
  z-index: 5;
}
.epi-frame { display: none; width: 100%; max-width: 760px; }
.epi-frame.on { display: block; }

/* ---------- ข้อคิดปิดท้าย (ครอบทับฉากที่หรี่แสง) ---------- */
.epi-moral-wrap {
  position: absolute; inset: 6vh 0 12vh; z-index: 6;
  display: grid; place-items: center; padding: 1rem;
  overflow-y: auto;
}
.epi-moral-wrap .epi-moral { width: 100%; max-width: 720px; }
.epi-moral-wrap .epi-moral-item { animation: moralIn .5s ease both; }
.epi-moral-wrap .epi-moral-item:nth-child(1) { animation-delay: .25s; }
.epi-moral-wrap .epi-moral-item:nth-child(2) { animation-delay: .5s; }
.epi-moral-wrap .epi-moral-item:nth-child(3) { animation-delay: .75s; }
.epi-moral-wrap .epi-moral-item:nth-child(4) { animation-delay: 1s; }
.epi-moral-wrap .epi-moral-item:nth-child(5) { animation-delay: 1.25s; }
.epi-done a { pointer-events: auto; }

/* ---------- การ์ดชื่อตอน ---------- */
.epi-title { text-align: center; }
.epi-title b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 9vw, 4.6rem); color: #fff;
  letter-spacing: .06em; text-shadow: 0 6px 26px rgba(0,0,0,.9);
}
.epi-title span {
  display: block; margin-top: .7rem; color: #d9c79f;
  font-family: var(--font-display); font-size: clamp(.85rem, 3vw, 1.1rem);
}
@keyframes epiTitle {
  0%   { opacity: 0; transform: scale(1.25); letter-spacing: .4em; filter: blur(8px); }
  40%  { opacity: 1; transform: scale(1); letter-spacing: .06em; filter: blur(0); }
  100% { opacity: 1; }
}
.epi-frame.on .epi-title b { animation: epiTitle 1.3s ease both; }

/* ---------- หนังสือพิมพ์ ---------- */
.paper {
  background: #f4ecd8; color: #1a1712;
  border: 3px solid #1a1712;
  box-shadow: 0 22px 44px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.3);
  padding: 1.1rem 1.3rem 1.3rem;
  position: relative;
  /* กระดาษเก่าๆ */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.022) 0 2px, transparent 2px 4px),
    radial-gradient(120% 90% at 20% 0%, rgba(160,120,60,.14), transparent 60%);
}
@keyframes paperSlam {
  0%   { opacity: 0; transform: rotate(-38deg) scale(.12); }
  62%  { opacity: 1; transform: rotate(4deg) scale(1.06); }
  78%  { transform: rotate(-2deg) scale(.98); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}
.epi-frame.on .paper { animation: paperSlam .72s cubic-bezier(.2,.75,.3,1) both; }

.paper-masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  border-bottom: 4px double #1a1712; padding-bottom: .45rem; margin-bottom: .6rem;
}
.paper-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 3.4vw, 1.6rem); letter-spacing: .02em;
}
.paper-when { font-size: .74rem; opacity: .72; }
.paper-tag {
  background: #a11414; color: #fff; font-family: var(--font-display);
  font-size: .68rem; font-weight: 600; padding: .1rem .55rem; border-radius: 3px;
}

.paper-head {
  font-family: var(--font-display); font-weight: 700; line-height: 1.28;
  font-size: clamp(1.15rem, 4.6vw, 2.1rem);
  margin: .15rem 0 .4rem;
}
.paper-sub {
  font-size: clamp(.8rem, 2.5vw, .95rem); line-height: 1.6;
  padding-bottom: .5rem; margin-bottom: .55rem;
  border-bottom: 1.5px solid rgba(26,23,18,.35);
  font-weight: 600;
}
.paper-body {
  display: grid; grid-template-columns: 1fr auto; gap: .85rem; align-items: start;
}
.paper-text { font-size: .84rem; line-height: 1.8; }
.paper-photo {
  width: clamp(74px, 18vw, 106px); flex: 0 0 auto;
  border: 2.5px solid #1a1712; background: #ddd2b8; padding: 3px;
}
.paper-photo svg { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.15); }
.paper-photo em { display: block; font-size: .6rem; text-align: center; margin-top: 2px; font-style: normal; opacity: .75; }

/* แฟลชกล้องตอนพาดหัวเด้ง */
@keyframes epiFlash { 0% { opacity: .75; } 100% { opacity: 0; } }
.epi-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 7; pointer-events: none; }
.epi-flash.go { animation: epiFlash .3s ease-out; }

/* ---------- ช่องเล่าเรื่อง ---------- */
.epi-scene {
  display: flex; gap: 1rem; align-items: center;
  background: rgba(255,255,255,.05);
  border-left: 5px solid var(--gold);
  border-radius: 8px; padding: 1rem 1.15rem;
  backdrop-filter: blur(2px);
}
.epi-scene-char { width: clamp(72px, 18vw, 120px); flex: 0 0 auto; }
.epi-scene-char svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
.epi-scene-name {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .76rem; color: var(--gold); margin-bottom: .3rem;
}
.epi-scene-text { color: #f4ecd8; font-size: clamp(.86rem, 2.5vw, 1rem); line-height: 1.8; }
@keyframes epiSceneIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.epi-frame.on .epi-scene { animation: epiSceneIn .5s var(--ease) both; }

/* ---------- ข้อคิดปิดท้าย ---------- */
.epi-moral { text-align: left; }
.epi-moral-head {
  font-family: var(--font-display); font-weight: 700; text-align: center;
  font-size: clamp(1.15rem, 4.4vw, 2rem); color: #ffe9a8;
  text-shadow: 0 3px 16px rgba(0,0,0,.8);
  margin-bottom: 1rem; line-height: 1.35;
}
.epi-moral-list { display: grid; gap: .6rem; }
.epi-moral-item {
  display: flex; gap: .7rem; align-items: flex-start;
  background: rgba(255,255,255,.06); border-radius: 8px; padding: .65rem .85rem;
  color: #ece2cd; font-size: clamp(.8rem, 2.4vw, .93rem); line-height: 1.75;
}
.epi-moral-item .ic { font-size: 1.25rem; line-height: 1.4; flex: 0 0 auto; }
@keyframes moralIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.epi-frame.on .epi-moral-item { animation: moralIn .5s ease both; }
.epi-frame.on .epi-moral-item:nth-child(1) { animation-delay: .25s; }
.epi-frame.on .epi-moral-item:nth-child(2) { animation-delay: .5s; }
.epi-frame.on .epi-moral-item:nth-child(3) { animation-delay: .75s; }
.epi-frame.on .epi-moral-item:nth-child(4) { animation-delay: 1s; }
.epi-frame.on .epi-moral-item:nth-child(5) { animation-delay: 1.25s; }

.epi-note {
  margin-top: .9rem; padding: .7rem .9rem;
  border: 2px dashed rgba(255,233,168,.55); border-radius: 8px;
  color: #ffe9a8; font-size: clamp(.76rem, 2.2vw, .88rem); line-height: 1.75;
}

.epi-done {
  margin-top: 1.1rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
}

/* ---------- แถบควบคุม ---------- */
.epi-bar {
  position: absolute; left: 0; right: 0; bottom: 2vh; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; flex-wrap: wrap; padding: 0 1rem;
}

/* ปุ่มบนหน้าคำพิพากษา */
.btn-epilogue {
  background: linear-gradient(100deg, #1c1330, #3c1a4a 55%, #6b1f3d);
  color: #ffe9a8; border-color: var(--ink);
  position: relative; overflow: hidden;
}
.btn-epilogue::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,233,168,.35), transparent);
  animation: epiSheen 3.2s ease-in-out infinite;
}
@keyframes epiSheen { 0% { left: -60%; } 55%, 100% { left: 130%; } }

@media (max-width: 560px) {
  .epi::before, .epi::after { height: 4vh; }
  .epi-stage { inset: 4vh 0 11vh; }
  .paper { padding: .8rem .9rem 1rem; }
  .paper-body { grid-template-columns: 1fr; }
  .paper-photo { width: 84px; }
  .epi-scene { gap: .7rem; padding: .8rem .9rem; }
}

/* ---------- โหลด ---------- */
.spinner {
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent;
  display: inline-block; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); display: block; animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* ---------- แถบบนสุด ---------- */
.topbar {
  border-bottom: var(--bd) solid var(--ink);
  background: #fffdf7;
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 4px 0 rgba(20,17,15,.12);
}
.topbar-inner { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; }
.logo {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  display: inline-flex; align-items: center; gap: .4rem; color: var(--ink);
}
.logo:hover { text-decoration: none; }

/* ---------- บทเรียน ---------- */
.lesson {
  border: var(--bd) solid var(--ink); border-radius: var(--r);
  background: #fff; box-shadow: var(--shadow-hard-sm);
  overflow: hidden;
}
.lesson-head {
  padding: .85rem 1.1rem; display: flex; gap: .6rem; align-items: center;
  border-bottom: 3px solid var(--ink); background: var(--paper-2);
  font-family: var(--font-display); font-weight: 600;
}
.lesson-body { padding: 1rem 1.1rem; }
.ideal {
  border-left: 5px solid var(--win); background: #f2fbf5;
  border-radius: 0 var(--r) var(--r) 0; padding: .8rem 1rem; margin-top: .7rem;
}
.speech-quote {
  background: #fffdf0; border: 2px dashed var(--ink-faint);
  border-radius: var(--r); padding: .85rem 1rem; font-size: .92rem;
  line-height: 1.9; margin-top: .7rem;
}

/* ---------- แถบล่างบนมือถือ ---------- */
.actionbar {
  position: sticky; bottom: 0; z-index: 30;
  background: #fffdf7; border-top: var(--bd) solid var(--ink);
  padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 0 rgba(20,17,15,.1);
}

/* ---------- อันดับ ---------- */
.lb-row {
  display: flex; align-items: center; gap: .75rem;
  border: 3px solid var(--ink); border-radius: var(--r);
  background: #fff; padding: .7rem .9rem; box-shadow: var(--shadow-hard-sm);
}
.lb-rank {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; border: 3px solid var(--ink);
  font-family: var(--font-display); font-weight: 700; background: var(--paper-2);
}
.lb-row.top1 .lb-rank { background: var(--gold); }
.lb-row.top2 .lb-rank { background: #cbd5e1; }
.lb-row.top3 .lb-rank { background: #d9a066; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  body { font-size: 15px; }
  :root { --bd: 3px; --shadow-hard: 4px 4px 0 var(--ink); --shadow-hard-sm: 3px 3px 0 var(--ink); }
  .cards { grid-template-columns: 1fr; }
  .catgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .char-col { width: 62px; }
  .char-name { font-size: .7rem; }
  .bubble { padding: .8rem .95rem; font-size: .95rem; }
  /* บนจอแคบ ให้ช่องพิมพ์กับปุ่มค้นหาเต็มบรรทัด กดง่ายด้วยนิ้วโป้ง */
  .input-row .input, .input-row .btn { flex: 1 1 100%; }
  .btn { font-size: .95rem; padding: .65rem 1.15rem; }
  .btn-lg { font-size: 1.05rem; padding: .8rem 1.4rem; }
  .statgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- โหมดมืด: คงโทนกระดาษการ์ตูนไว้ แต่ถนอมสายตา ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #efe3cc;
    --paper-2: #e6d6b8;
  }
}