/* ห้องข่าวสด NonDev — ฉากพิกเซลอาร์ต (แคนวาส 640×360 ขยาย ×3 เป็นพิกัดออกแบบ 1920×1080 แล้วย่อ/ขยายทั้งก้อนด้วย transform)
   หน้าเว็บปกติ: เต็มห้อง 16:9 • ?stream=1: เต็มจอ 16:9 สำหรับ OBS พร้อมแถบล่าง
   ภาพทั้งหมดคมแบบพิกเซล (image-rendering: pixelated) • ตัวหนังสือไทยเป็น HTML ฟอนต์ปกติ อ่านง่ายที่ 720p
   กรอบลูกโป่ง/ป้ายใช้ขอบแบบขั้นบันได (box-shadow) ให้เข้ากับพิกเซลอาร์ต */

.lv-viewport {
  --lv-font: "IBM Plex Sans Thai", "Noto Sans Thai", "Sarabun", "Leelawadee UI", "Thonburi", system-ui, sans-serif;
  --lv-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lv-ink: #1a120c;
  --lv-lime: #d4f53c;
  --lv-cream: #fff8e8;
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #0d0907;
  font-family: var(--lv-font);
  color: var(--lv-ink);
  contain: layout paint;
  user-select: none;
  -webkit-user-select: none;
}
.lv-viewport.lv-mode-page { aspect-ratio: 16 / 9; border-radius: 14px; box-shadow: 0 1px 0 rgb(20 22 27 / 6%), 0 22px 50px -30px rgb(20 22 27 / 60%); }
.lv-viewport.lv-mode-page.lv-cam { aspect-ratio: auto; }

.lv-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; will-change: transform; }
.lv-canvas {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0; transition: opacity 0.6s;
}
.lv-loaded .lv-canvas { opacity: 1; }
.lv-labels, .lv-fx, .lv-bubbles { position: absolute; inset: 0; pointer-events: none; }
.lv-labels > div, .lv-labels > span { position: absolute; }
.lv-labels, .lv-fx { opacity: 0; transition: opacity 0.6s; }
.lv-loaded .lv-labels, .lv-loaded .lv-fx { opacity: 1; }

/* ขอบพิกเซล: ใช้กับลูกโป่ง ป้าย การ์ด */
.lv-px {
  box-shadow: 0 -3px 0 0 var(--lv-ink), 0 3px 0 0 var(--lv-ink), -3px 0 0 0 var(--lv-ink), 3px 0 0 0 var(--lv-ink);
}

/* ---------- แถบบน: ตัววิ่ง + ON AIR + สถานะ ---------- */
.lv-topbar {
  position: absolute; left: 0; top: 0; width: 1920px; height: 60px; box-sizing: border-box; display: flex; align-items: center; gap: 14px;
  padding: 0 18px; background: linear-gradient(#120b07ee, #1d120bdd); border-bottom: 3px solid #3a2414;
}
.lv-tk-label { flex: none; font: 700 22px/1 var(--lv-font); color: var(--lv-ink); background: var(--lv-lime); padding: 8px 12px 9px; box-shadow: 0 -3px 0 0 #8aa61e inset; }
.lv-ticker { flex: 1; min-width: 0; height: 40px; overflow: hidden; position: relative; }
.lv-ticker-track { position: absolute; left: 0; top: 0; display: inline-flex; white-space: nowrap; will-change: transform; }
.lv-tk-item { font: 600 25px/40px var(--lv-font); color: #ffe9a8; padding-right: 60px; }
.lv-tk-dot { color: var(--lv-lime); font-size: 16px; vertical-align: 3px; }
.lv-onair {
  flex: none; font: 700 21px/1 var(--lv-mono); letter-spacing: 0.08em; color: #6e4a40; background: #2a1712; padding: 9px 12px 8px;
  box-shadow: 0 0 0 3px #3a2414;
}
.lv-onair.is-on { color: #fff; background: #e0393c; box-shadow: 0 0 0 3px #7a1515, 0 0 22px 2px rgb(224 57 60 / 55%); animation: lv-pulse 1.6s steps(2) infinite; }
.lv-onair.is-replay { color: #fff3d6; background: #b8700f; box-shadow: 0 0 0 3px #5a3505; }
.lv-badge { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; background: #2a1712; color: #f3e6cf; font: 600 20px/1.2 var(--lv-font); white-space: nowrap; }
.lv-badge-dot { width: 12px; height: 12px; background: #9aa0ab; }
.lv-badge.is-live { background: #e0393c; color: #fff; }
.lv-badge.is-live .lv-badge-dot { background: #fff; animation: lv-pulse 1.4s steps(2) infinite; }
.lv-badge.is-replay { background: #b8700f; color: #fff; }
.lv-badge.is-replay .lv-badge-dot { background: #fff3d6; }
.lv-mode-stream .lv-badge { display: none; }

/* ---------- ป้ายชื่อที่ขอบหน้าโต๊ะ / จอทีวีบนผนัง ---------- */
/* ป้ายชื่อหน้าโต๊ะ: ขนาด/ตำแหน่งคำนวณตอน build (พิกัดภาพ ×3) — ชื่อตัวใหญ่ อ่านได้ที่ 720p • ตำแหน่งบรรทัดที่สอง */
.lv-tag {
  box-sizing: border-box; display: grid; grid-template-columns: 9px max-content; column-gap: 5px; align-content: center; justify-content: center;
  padding: 2px 6px; white-space: nowrap; color: #f5ead2; background: rgb(28 18 10 / 92%); box-shadow: 0 0 0 3px #6b4426, 0 3px 0 3px rgb(0 0 0 / 30%);
}
.lv-tag b { font: 700 20px/1.04 var(--lv-font); color: #fff; }
.lv-tag span { grid-column: 2; font: 600 13px/1.18 var(--lv-font); color: #e8d6b4; }
.lv-tag-dot { grid-row: span 2; align-self: center; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--lv-ink); }
.lv-tag.is-measure { position: absolute; left: 0; top: 0; visibility: hidden; }
/* จอทีวี 64×41 พิกเซลภาพ (192×123 ในพิกัดออกแบบ): คำน้อย ตัวใหญ่ อ่านได้ที่ 720p */
.lv-tv { display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; box-sizing: border-box; overflow: hidden; color: #e9f2ff; }
.lv-tv-head { font: 700 17px/1.15 var(--lv-font); color: var(--lv-lime); white-space: nowrap; }
.lv-tv-pub .lv-tv-head { color: #ffd166; }
.lv-tv-row { font: 600 20px/1.2 var(--lv-font); color: #f3f6ff; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-tv-row.is-done { opacity: 0.35; }
.lv-tv-row.is-now { background: rgb(212 245 60 / 24%); box-shadow: inset 3px 0 0 var(--lv-lime); }
.lv-tv-row[hidden], .lv-tv-idle[hidden] { display: none; }
.lv-tv-idle { font: 600 20px/1.25 var(--lv-font); color: #b4c3d6; }
.lv-tv-title { flex: 1 1 auto; min-height: 0; font: 700 20px/1.22 var(--lv-font); color: #fff; overflow: hidden; }
.lv-tv-stat { align-items: flex-start; }
.lv-tv-time { font: 600 42px/1 var(--lv-mono); letter-spacing: -0.02em; color: #fff; }
.lv-tv-next { font: 700 20px/1.2 var(--lv-font); color: #ffe9a8; white-space: nowrap; }
.lv-tv-stat.is-live .lv-tv-next { color: #fff; background: #e0393c; padding: 0 5px; }
.lv-soon .lv-tv-next { color: #ffb84d; }
.lv-tv-foot { margin-top: auto; font: 600 18px/1.2 var(--lv-font); color: #c3d0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-tv.is-flash { animation: lv-tvflash 1.4s steps(6) 1; }
@keyframes lv-tvflash { 0%, 40% { background: rgb(212 245 60 / 55%); } 100% { background: transparent; } }
.lv-ptag { transform: translate(-50%, 0); font: 700 15px/1 var(--lv-font); color: #18202a; background: var(--lv-lime); padding: 3px 6px; white-space: nowrap; box-shadow: 0 0 0 2px #6b4426; }
.lv-ptag[hidden] { display: none; }

/* ---------- ลูกโป่งคำพูด (กรอบพิกเซล ตัวหนังสือเรียบ) ---------- */
.lv-bubble {
  position: absolute; left: 0; top: 0; max-width: 440px; width: max-content; padding: 11px 18px 12px; background: var(--lv-cream);
  font: 600 25px/1.38 var(--lv-font); color: var(--lv-ink); will-change: transform;
  box-shadow: 0 -4px 0 0 var(--lv-ink), 0 4px 0 0 var(--lv-ink), -4px 0 0 0 var(--lv-ink), 4px 0 0 0 var(--lv-ink), 4px 10px 0 0 rgb(0 0 0 / 28%);
}
.lv-bubble::after {
  content: ""; position: absolute; bottom: -16px; left: calc(var(--tail, 50%) - 6px); width: 12px; height: 12px; background: var(--lv-ink);
  box-shadow: -6px -6px 0 0 var(--lv-ink), 6px -6px 0 0 var(--lv-ink);
}
.lv-bubble::before {
  content: ""; position: absolute; bottom: -4px; left: calc(var(--tail, 50%) - 6px); width: 12px; height: 6px; background: inherit; z-index: 1;
}
.lv-bubble[hidden] { display: none; }
.lv-bubble.is-held { visibility: hidden; }
.lv-bubble-big { background: var(--lv-lime); font-size: 30px; font-weight: 700; }
.lv-bubble-soft { background: #f1e6d0; font-weight: 500; font-size: 23px; }

/* ---------- เอฟเฟกต์ ---------- */
.lv-flyhead {
  position: absolute; left: 0; top: 0; max-width: 760px; width: max-content; padding: 10px 18px; background: #1a120c; color: #ffe9a8;
  font: 700 26px/1.3 var(--lv-font); will-change: transform; box-shadow: 0 0 0 4px var(--lv-lime), 0 12px 30px rgb(0 0 0 / 45%);
}
.lv-flyhead[hidden] { display: none; }
.lv-float { position: absolute; left: 0; top: 0; font: 800 26px/1 var(--lv-font); color: var(--lv-ink); white-space: nowrap; will-change: transform; }
.lv-float[hidden] { display: none; }
.lv-float-big { font-size: 30px; color: var(--lv-ink); background: var(--lv-lime); padding: 5px 12px 6px; box-shadow: 0 0 0 3px var(--lv-ink); }
.lv-float-emote { font-size: 30px; color: #fff; background: #1a120c; padding: 4px 9px; box-shadow: 0 0 0 3px #fff8e8; }
.lv-float-small { font-size: 22px; color: #ffcf5a; }
.lv-float-tag { font-size: 22px; background: #fff8e8; padding: 4px 10px; box-shadow: 0 0 0 3px var(--lv-ink); }
.lv-float-ok { font-size: 46px; color: #3ccf5c; text-shadow: 3px 3px 0 var(--lv-ink); }
.lv-float-no { font-size: 46px; color: #ff4d4d; text-shadow: 3px 3px 0 var(--lv-ink); }
.lv-float-heart { font-size: 34px; color: #ff5d7a; text-shadow: 3px 3px 0 var(--lv-ink); }
.lv-float-z { font-size: 30px; color: #cfe3ff; font-style: italic; text-shadow: 2px 2px 0 var(--lv-ink); }
.lv-float-drop { font-size: 26px; color: #6fb6ff; }
.lv-blip-t { position: absolute; left: 0; top: 0; font: 700 19px/1 var(--lv-font); color: var(--lv-ink); background: var(--lv-lime); padding: 5px 8px; white-space: nowrap; box-shadow: 0 0 0 3px var(--lv-ink); will-change: transform; }
.lv-blip-t[hidden] { display: none; }

/* ---------- แถบล่าง (สตรีม) ---------- */
.lv-lower {
  position: absolute; left: 48px; right: 48px; top: 918px; height: 122px; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 0 28px;
  background: #160e09; color: #f6ead4;
  box-shadow: 0 -4px 0 0 #4a2e18, 0 4px 0 0 #4a2e18, -4px 0 0 0 #4a2e18, 4px 0 0 0 #4a2e18;
}
.lv-brand { display: flex; align-items: center; gap: 16px; padding-right: 26px; border-right: 3px solid #3a2414; height: 84px; }
.lv-logo { position: relative; width: 68px; height: 68px; background: #f3f1ec; display: grid; place-items: center; box-shadow: 0 0 0 3px #000 inset; }
.lv-logo-n { font: 800 44px/1 var(--lv-mono); font-style: normal; color: #14161b; }
.lv-logo-c { position: absolute; right: 9px; bottom: 9px; width: 10px; height: 10px; background: var(--lv-lime); }
.lv-brand-n { font: 700 38px/1.05 var(--lv-font); letter-spacing: -0.02em; white-space: nowrap; }
.lv-brand-dev { background: var(--lv-lime); color: #14161b; padding: 0 6px 2px; margin-left: 2px; }
.lv-brand-room { font-weight: 600; font-size: 28px; color: #d8c6a6; letter-spacing: 0; }
.lv-brand-url { font: 500 24px/1.3 var(--lv-mono); color: var(--lv-lime); margin-top: 4px; }
.lv-cap { display: flex; align-items: center; gap: 18px; min-width: 0; }
.lv-cap-k { flex: none; font: 700 22px/1 var(--lv-font); color: #14161b; background: var(--lv-lime); padding: 8px 12px; }
.lv-cap-t { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 31px/1.35 var(--lv-font); color: #f6ead4; max-height: 2.7em; overflow: hidden; }
.lv-lower.is-replay .lv-cap-k { background: #f2b544; }
.lv-right { display: grid; justify-items: end; gap: 2px; padding-left: 26px; border-left: 3px solid #3a2414; }
.lv-state { display: inline-flex; align-items: center; gap: 9px; font: 700 22px/1 var(--lv-font); padding: 7px 14px; background: #3a2a20; white-space: nowrap; }
.lv-state-dot { width: 12px; height: 12px; background: #9aa0ab; }
.lv-state.is-live { background: #e0393c; color: #fff; }
.lv-state.is-live .lv-state-dot { background: #fff; animation: lv-pulse 1.4s steps(2) infinite; }
.lv-state.is-replay { background: #b8700f; color: #fff; }
.lv-state.is-replay .lv-state-dot { background: #fff3d6; }
.lv-time { font: 600 40px/1.1 var(--lv-mono); letter-spacing: -0.02em; }
.lv-time-s { font: 500 17px/1 var(--lv-font); color: #a8957a; }

@keyframes lv-pulse { 50% { opacity: 0.45; } }

/* ---------- โหมดสตรีม (OBS) ---------- */
html:has(.lv-stream-body), .lv-stream-body { margin: 0; height: 100%; background: #0d0907; overflow: hidden; cursor: none; }
.lv-stream-body .lv-viewport { position: fixed; inset: 0; width: 100vw; height: 100vh; }
.lv-stream-body .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- หน้าเว็บ /live ---------- */
.lv-page { padding-top: 1.25rem; }
.lv-head { padding: 1rem 0 1.25rem; }
.lv-head .eyebrow { gap: 0.5em; }
.lv-head h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); line-height: 1.25; letter-spacing: -0.015em; margin-top: 0.2rem; }
.lv-dot { width: 0.7em; height: 0.7em; border-radius: 50%; background: #9aa0ab; display: inline-block; }
.lv-dot.is-on { background: #e0393c; box-shadow: 0 0 0 4px rgb(224 57 60 / 18%); }
.lv-stage-wrap { display: grid; gap: 0.75rem; }
.lv-noscript { position: absolute; inset: 0; display: grid; place-items: center; color: #c9cbd2; font-size: 1rem; }
.lv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: 0.92rem; color: var(--muted, #5b6170); }
.lv-pill {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.2rem 0.8rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
  background: var(--surface-2, #ece8df); color: var(--ink, #14161b);
}
.lv-pill::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; opacity: 0.6; }
.lv-pill.is-live { background: #e0393c; color: #fff; }
.lv-pill.is-live::before { opacity: 1; animation: lv-pulse 1.4s infinite; }
.lv-pill.is-replay { background: #c47d12; color: #fff; }
.lv-bar-item { font-variant-numeric: tabular-nums; }
.lv-now {
  margin: 0; padding: 0.85rem 1.1rem; border-radius: var(--r-s, 9px); background: var(--surface, #fffdf9); border: 1px solid var(--line, #e0dbd0);
  font-size: 1.08rem; font-weight: 500; line-height: 1.6; min-height: 3.2em;
}
.lv-grid { display: grid; gap: 1.5rem 2.5rem; margin-top: 2rem; }
@media (min-width: 900px) { .lv-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.lv-panel-h { font-size: 1.12rem; display: flex; align-items: center; gap: 0.5rem; border-top: 2px solid var(--ink, #14161b); padding-top: 0.7rem; margin-bottom: 0.75rem; }
.lv-panel-h::before { content: ""; width: 0.7rem; height: 0.7rem; background: var(--lime, #d4f53c); border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%); }
.lv-activity, .lv-headlines { list-style: none; display: grid; gap: 0; }
.lv-activity li, .lv-headlines li { padding: 0.55rem 0; border-bottom: 1px solid var(--line, #e0dbd0); line-height: 1.6; font-size: 0.95rem; }
.lv-act-t { font-family: var(--mono, monospace); font-size: 0.8rem; color: var(--muted, #5b6170); margin-right: 0.35rem; }
.lv-act-story-publish { font-weight: 600; }
.lv-act-link { font-weight: 600; margin-left: 0.25rem; }
.lv-headlines a { color: var(--ink, #14161b); font-weight: 600; text-decoration: none; }
.lv-headlines a:hover { text-decoration: underline; text-decoration-color: var(--accent, #2243d0); }
.lv-hl-meta { display: block; color: var(--muted, #5b6170); font-size: 0.8rem; }
.lv-empty { color: var(--muted, #5b6170); }
.lv-about { margin-top: 2.5rem; }
.lv-cast { list-style: none; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.lv-cast-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.7rem 0.9rem;
  background: var(--surface, #fffdf9); border: 1px solid var(--line, #e0dbd0); border-radius: var(--r-s, 9px);
}
.lv-face { width: 64px; height: 64px; border-radius: 10px; background: #3a2a20; display: grid; place-items: center; overflow: hidden; }
.lv-face canvas { width: 64px; height: 64px; image-rendering: pixelated; image-rendering: crisp-edges; }
.lv-cast-text { font-size: 0.92rem; line-height: 1.5; }
.lv-cast-text strong { font-size: 1.02rem; }
.lv-cast-role { color: var(--ink-2, #363b47); font-weight: 500; }
.lv-cast-ai { display: inline-block; margin-left: 0.4rem; font-size: 0.72rem; font-weight: 600; padding: 0 0.45rem; border-radius: 999px; background: var(--surface-2, #ece8df); color: var(--ink-2, #363b47); vertical-align: 0.1em; }
.lv-cast-does { display: block; color: var(--muted, #5b6170); font-size: 0.86rem; }
.lv-about.prose { font-size: 1.02rem; max-width: 46rem; }
.lv-about.prose h2 { font-size: 1.25rem; margin: 0 0 0.6em; }

@media (prefers-color-scheme: dark) {
  .lv-face { background: #2a1d16; }
}
@media (max-width: 640px) {
  .lv-viewport.lv-mode-page { border-radius: 12px; }
  .lv-now { font-size: 1rem; }
}

/* คำไทย: ห้ามตัดบรรทัดกลางคำ (ตัดได้เฉพาะระหว่างคำที่แยกด้วย Intl.Segmenter) */
.lv-w { white-space: nowrap; }
/* ลูกโป่งข้างหัว (หางชี้ซ้าย/ขวา) — ใช้เมื่อข้างบนหัวไม่มีที่ (จอทีวี หน้าคนอื่น) */
.lv-bubble.is-side::after, .lv-bubble.is-side::before { display: none; }
.lv-bubble .lv-tail-s { display: none; position: absolute; top: calc(50% - 8px); width: 12px; height: 16px; background: var(--lv-ink); }
.lv-bubble.is-side-l .lv-tail-s { display: block; right: -16px; }
.lv-bubble.is-side-r .lv-tail-s { display: block; left: -16px; }
/* จอแคบ: ลากซ้าย/ขวาเพื่อเลื่อนดูห้อง (เลื่อนหน้าขึ้นลงได้ตามปกติ) */
.lv-viewport.lv-cam { touch-action: pan-y; }
/* ลูกโป่งใต้หน้า (หางชี้ขึ้น) */
.lv-bubble.is-below::after { bottom: auto; top: -16px; box-shadow: -6px 6px 0 0 var(--lv-ink), 6px 6px 0 0 var(--lv-ink); }
.lv-bubble.is-below::before { bottom: auto; top: -4px; }