/* เกมเรื่องวิฑูฑภะ — หนังสือนิทานภาพ: ภาพการ์ตูนแนวตั้ง | หน้ากระดาษ (จอแนวตั้ง = ภาพอยู่บน) */
@font-face { font-family: "Thunder Pali"; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/thunder-pali/ThunderPali-400.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+25CC; }
@font-face { font-family: "Thunder Pali"; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/thunder-pali/ThunderPali-700.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+25CC; }
@font-face { font-family: "Thunder Pali"; font-weight: 800 900; font-display: swap; src: url("/assets/fonts/thunder-pali/ThunderPali-800.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+25CC; }

:root {
	--vs-ink: #2b1a0e;
	--vs-paper: #fff8e7;
	--vs-paper-2: #f6e7c4;
	--vs-line: #ead7ab;
	--vs-wood: #8a5a2b;
	--vs-wood-2: #5e3a17;
	--vs-gold: #f2b631;
	--vs-gold-2: #c98a0e;
	--vs-pali: #3730a3;
	--vs-thai: #5b5249;
	--vs-good: #15803d;
	--vs-bad: #c2410c;
	--vs-night: #1c1410;
	--vs-font: "Sarabun", system-ui, sans-serif;
	--vs-pali-font: "Thunder Pali", "Sarabun", sans-serif;
	--vs-k: 1;
}
html, body.vs-root { margin: 0; min-height: 100%; background: var(--vs-night); }
.vs-root { font-family: var(--vs-font); color: var(--vs-ink); -webkit-tap-highlight-color: transparent; }
.vs-app { min-height: 100dvh; }
.vs-app [hidden] { display: none !important; }
.vs-app img { max-width: 100%; }
.pw { font-family: var(--vs-pali-font); font-weight: 700; color: var(--vs-pali); white-space: nowrap; }   /* คำบาลีห้ามตัดกลางคำ — .pw ในหน้านี้เป็นคำเดียว */
.vs-loading, .vs-error { margin: 0; padding: 40vh 24px 0; text-align: center; color: #f6e7c4; font-size: 18px; }
.vs-error h2 { margin: 0 0 8px; }
.size-2 { --vs-k: 1.12; } .size-3 { --vs-k: 1.26; }

/* ── ปุ่ม ── */
.vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; cursor: pointer;
	border: 3px solid var(--vs-wood-2); background: var(--vs-paper); color: var(--vs-wood-2); font: 800 17px/1.2 var(--vs-font); box-shadow: 0 4px 0 var(--vs-wood-2); text-decoration: none; }
.vs-btn.is-main { background: linear-gradient(#ffd560, var(--vs-gold)); color: var(--vs-ink); }
.vs-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--vs-wood-2); }
.vs-btn:disabled { opacity: .45; cursor: default; }
.vs-btn:focus-visible, .vs-icon:focus-visible, .vs-opt:focus-visible, .vs-w:focus-visible, .vs-ch:focus-visible { outline: 3px solid var(--vs-pali); outline-offset: 3px; }
.vs-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.vs-link { display: inline-flex; align-items: center; gap: 6px; color: var(--vs-wood); font-weight: 700; font-size: 15px; text-decoration: none; }
.vs-icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--vs-line); background: #fff; color: var(--vs-wood-2);
	font: 800 16px/1 var(--vs-font); cursor: pointer; text-decoration: none; }
.vs-icon small { font-size: 11px; }
/* ปุ่มกลับหน้ารวมตอน — มีป้ายชัด ไม่ใช่ไอคอนลอย ๆ (หลวงพี่: ไอคอนแผนที่เล็ก ดูยาก) */
.vs-home { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; text-decoration: none; white-space: nowrap;
	border: 3px solid var(--vs-wood-2); background: var(--vs-paper); color: var(--vs-wood-2); font: 800 16px/1 var(--vs-font); box-shadow: 0 3px 0 var(--vs-wood-2); }
.vs-home:hover { background: #fff3c4; }
.vs-home:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vs-wood-2); }
.vs-home:focus-visible { outline: 3px solid var(--vs-pali); outline-offset: 3px; }
.vs-icon.is-on { background: var(--vs-gold); border-color: var(--vs-gold-2); color: var(--vs-ink); }
.vs-bar { display: block; height: 6px; border-radius: 6px; background: rgba(94,58,23,.15); overflow: hidden; }
.vs-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--vs-gold-2), var(--vs-gold)); border-radius: 6px; }
.vs-stars { display: inline-flex; gap: 4px; color: #d8c8a4; font-size: 18px; }
.vs-stars .is-on { color: var(--vs-gold); filter: drop-shadow(0 2px 0 var(--vs-gold-2)); }

/* ═════════ แผนที่เรื่อง ═════════ */
.vs-app.is-map { box-sizing: border-box; padding: 24px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
	background: radial-gradient(ellipse at top, #4a3420 0%, var(--vs-night) 70%); color: var(--vs-paper); }
.vs-map-head { max-width: 1100px; margin: 0 auto 22px; }
.vs-map-head .vs-link { color: #f6e7c4; }
.vs-map-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vs-map-sound { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 2px solid rgba(246,231,196,.45);
	background: rgba(255,248,231,.08); color: #f6e7c4; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s; }
.vs-map-sound.is-on { border-color: var(--vs-gold); color: #ffe6a3; background: rgba(242,182,49,.16); }
.vs-map-sound:hover, .vs-map-sound:focus-visible { background: rgba(255,248,231,.18); }
.vs-kicker { margin: 14px 0 2px; font-size: 15px; font-weight: 700; color: var(--vs-gold); }
.vs-title { margin: 0 0 8px; font-size: clamp(40px, 7vw, 64px); line-height: 1.1; font-weight: 800; color: #fff3d6; }
.vs-lead { max-width: 760px; margin: 0 0 16px; font-size: 17px; line-height: 1.75; color: #f1e3c4; }
.vs-lead b { color: #ffd560; }
.vs-src { max-width: 1100px; margin: 22px auto 0; font-size: 14px; color: #c9b48a; }

/* ═════════ หนังสือ: ภาพ | หน้ากระดาษ ═════════ */
.vs-app.is-book { display: grid; grid-template-columns: minmax(0, min(56.25dvh, 46vw)) minmax(0, 1fr); height: 100dvh; overflow: hidden; background: var(--vs-night); }
.vs-art { position: relative; margin: 0; height: 100dvh; overflow: hidden; background: #2a1d12; cursor: pointer; }
.vs-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; animation: vsIn .35s ease; }
@keyframes vsIn { from { opacity: .35; } to { opacity: 1; } }
.vs-art-n { position: absolute; left: 12px; top: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(28,20,16,.72); color: #fff3d6; font-size: 14px; font-weight: 700; }
.vs-page { display: flex; flex-direction: column; min-width: 0; height: 100dvh; background: linear-gradient(var(--vs-paper), var(--vs-paper-2)); }
.vs-top { display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px 14px; border-bottom: 2px solid var(--vs-line); }
.vs-top-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vs-top-t b { font-size: 15px; line-height: 1.3; color: var(--vs-wood-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-body { position: relative; flex: 1; overflow-y: auto; padding: 18px max(20px, env(safe-area-inset-right)) 18px 22px; font-size: calc(17px * var(--vs-k)); }
.vs-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) 14px; border-top: 2px solid var(--vs-line); }
.vs-count { font-size: 15px; color: var(--vs-thai); }

.vs-scene { margin: 0 0 10px; font-size: calc(14px * var(--vs-k)); font-weight: 700; color: var(--vs-gold-2); }
.vs-qn { margin-left: 8px; color: var(--vs-thai); font-weight: 600; }
.vs-who { display: inline-block; margin: 0 0 8px; padding: 3px 14px 5px; border-radius: 999px; background: var(--c, var(--vs-wood)); color: #fff; font-size: calc(15px * var(--vs-k)); font-weight: 800; }
.vs-who.is-narr { background: transparent; color: var(--vs-thai); padding-left: 0; font-weight: 700; }
.vs-text { margin: 0 0 16px; font-size: calc(24px * var(--vs-k)); line-height: 1.6; font-weight: 700; color: var(--vs-ink); text-wrap: pretty; }
.vs-text.is-sm { font-size: calc(18px * var(--vs-k)); font-weight: 600; }
.vs-h2 { margin: 0 0 8px; font-size: calc(26px * var(--vs-k)); line-height: 1.3; font-weight: 800; }
.vs-sub { margin: 8px 0; font-size: calc(15px * var(--vs-k)); color: var(--vs-thai); line-height: 1.6; }

/* กล่องบาลี ๓ โหมด: จับคู่ · อ่าน · ยกศัพท์ (ยกศัพท์ อ.บุญสืบ) */
.vs-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--vs-paper-2); border: 2px solid var(--vs-line); }
.vs-tab { border: 0; background: transparent; color: var(--vs-wood-2); border-radius: 999px; padding: 5px 12px; font: 700 15px/1.2 var(--vs-font); cursor: pointer; }
.vs-tab.is-on { background: var(--vs-gold); color: var(--vs-ink); box-shadow: 0 2px 0 var(--vs-gold-2); }
.vs-tab:disabled { opacity: .4; cursor: default; }
.vs-tab:focus-visible { outline: 3px solid var(--vs-pali); outline-offset: 2px; }
.vs-pali-line.is-quiet { margin-bottom: 4px; }
.vs-pali-line.is-quiet .pw { font-weight: 600; opacity: .85; }
.vs-mhint { margin: 0 0 8px; font-size: 15px; color: var(--vs-thai); }
.vs-match { display: grid; gap: 10px; }
.vs-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 12px; background: var(--vs-paper); border: 2px dashed var(--vs-line); min-height: 44px; }
.vs-tray:empty { display: none; }
.vs-mchip { border: 2px solid #c9b48a; background: #fff; color: var(--vs-ink); border-radius: 12px; padding: 6px 12px; font: 700 calc(16px * var(--vs-k))/1.35 var(--vs-font); cursor: pointer; box-shadow: 0 3px 0 #e2cfa3; text-align: left; }
.vs-mchip.is-sel { border-color: var(--vs-gold-2); background: #fff3c4; box-shadow: 0 3px 0 var(--vs-gold-2); transform: translateY(-2px); }
/* ลากวาง: คำแปลลอยตามนิ้ว/เมาส์ · ศัพท์ที่อยู่ใต้ = กรอบทอง */
.vs-mchip { touch-action: none; user-select: none; -webkit-user-select: none; }
.vs-mchip:active { cursor: grabbing; }
.vs-mchip.is-dragging { opacity: .35; }
.vs-mghost { position: fixed; left: 0; top: 0; z-index: 3000; margin: 0; pointer-events: none; border: 2px solid var(--vs-gold-2); background: #fff3c4; color: var(--vs-ink); border-radius: 12px;
	padding: 6px 12px; font: 700 calc(16px * var(--vs-k, 1))/1.35 var(--vs-font, sans-serif); box-shadow: 0 10px 24px rgba(0,0,0,.28); text-align: left; }
.vs-row.is-over { border-color: var(--vs-gold); background: #fff3c4; box-shadow: 0 0 0 3px rgba(242,182,49,.45); }
.vs-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
	padding: 8px 12px; border-radius: 12px; border: 2px solid var(--vs-line); background: #fff; font: inherit; color: inherit; }
.vs-row-p .pw { font-size: calc(19px * var(--vs-k)); }
.vs-row-p .pw.is-add { white-space: normal; }   /* คำเติมหลายคำในวงเล็บเดียว ตัดที่ช่องว่างได้ */
.vs-row-p small { font-size: 13px; color: var(--vs-thai); }
.pw.is-add { color: #7c6fd0; font-weight: 600; }
.vs-slot { min-height: 1.4em; padding: 3px 10px; border-radius: 10px; background: var(--vs-paper); color: #b7a688; font: 700 calc(16px * var(--vs-k))/1.4 var(--vs-font); }
.vs-row.is-sel { border-color: var(--vs-gold-2); background: #fffbeb; }
.vs-row.is-sel .vs-slot { background: #fff3c4; color: var(--vs-gold-2); }
.vs-row.is-done { border-color: #86efac; background: #f0fdf4; cursor: default; }
.vs-row.is-done .vs-slot { background: transparent; color: var(--vs-good); padding-left: 0; }
.is-bad { animation: vsShake .35s ease; border-color: var(--vs-bad) !important; }
@keyframes vsShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.vs-mfb { min-height: 1.4em; margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--vs-bad); }
.vs-mfb.is-good { color: var(--vs-good); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vs-yokline { margin: 0; line-height: 2.1; font-size: calc(18px * var(--vs-k)); }
.vs-yk { margin-right: 6px; } .vs-yk > span { color: var(--vs-thai); font-weight: 600; }
.vs-yk .pw { font-size: 1.05em; }
.vs-src-s { margin: 6px 0 0; font-size: 13px; color: #8a7d6d; }

/* คัตซีนวิดีโอ */
.vs-art.is-video { cursor: default; background: #000; }
.vs-art.is-video video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; background: #000; cursor: pointer; }
.vs-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 50%; border: 4px solid #fff3c4;
	background: rgba(28,20,16,.62); color: #fff; font-size: 34px; cursor: pointer; backdrop-filter: blur(3px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.vs-play i { margin-left: 4px; } .vs-play .fa-rotate-left { margin-left: 0; }
.vs-vbar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.25); }
.vs-vbar i { display: block; height: 100%; width: 0; background: var(--vs-gold); }
.vs-cut { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vs-cl { padding: 10px 14px; border-radius: 14px; border: 2px solid transparent; background: rgba(255,255,255,.55); opacity: .62; cursor: pointer; transition: opacity .25s, background .25s, border-color .25s; }
.vs-cl.is-now { opacity: 1; background: #fff; border-color: var(--vs-gold); box-shadow: 0 3px 0 var(--vs-line); }
.vs-cl-t { margin: 2px 0 4px; font-size: calc(19px * var(--vs-k)); line-height: 1.5; font-weight: 700; }
.vs-who.is-sm { font-size: calc(13px * var(--vs-k)); padding: 1px 10px 3px; margin: 0; }
.vs-pali-line.is-sm { font-size: calc(18px * var(--vs-k)); line-height: 1.9; }

/* บาลีในเรื่อง — แตะคำ = เห็นคำแปล */
.vs-pali { padding: 12px 14px 14px; border-radius: 14px; background: #fff; border: 2px solid var(--vs-line); }
.vs-pali-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--vs-wood); }
.vs-chip { border: 2px solid var(--vs-line); background: var(--vs-paper); color: var(--vs-wood-2); border-radius: 999px; padding: 4px 12px; font: 700 15px/1.2 var(--vs-font); cursor: pointer; }
.vs-chip.is-on { background: var(--vs-gold); border-color: var(--vs-gold-2); color: var(--vs-ink); }
.vs-pali-line { margin: 0; line-height: 2.1; font-size: calc(21px * var(--vs-k)); }
.vs-w { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; margin: 0 2px 6px; padding: 2px 6px 3px; border: 0; border-radius: 10px; background: transparent;
	font: inherit; cursor: pointer; white-space: nowrap; line-height: 1.35; }
.vs-w .pw { border-bottom: 2px dotted rgba(55,48,163,.45); }
.vs-w.is-plain { cursor: default; } .vs-w.is-plain .pw { border-bottom: 0; }
.vs-w:hover:not(.is-plain) { background: #eef0ff; }
.vs-g { display: none; max-width: 14em; white-space: normal; text-align: center; font: 600 calc(15px * var(--vs-k))/1.35 var(--vs-font); color: var(--vs-thai); }
.vs-w.is-open .vs-g, .gloss-all .vs-w .vs-g { display: block; }
.vs-w.is-open { background: #eef0ff; }
.vs-w.is-mark { background: #fde7b0; } .vs-w.is-mark .pw { border-bottom-color: var(--vs-gold-2); }
.vs-sep { color: #b7a688; margin: 0 6px; }
.vs-pali.is-verse { margin-bottom: 14px; }

/* คำถาม */
.vs-ask { margin: 4px 0 10px; font-size: calc(23px * var(--vs-k)); line-height: 1.5; font-weight: 800; }
.vs-ask .pw { font-size: 1.15em; }
.vs-ctx { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 2px solid var(--vs-line); line-height: 2; font-size: calc(18px * var(--vs-k)); }
.vs-ctx .vs-g { display: none !important; }
.vs-opts { display: grid; gap: 10px; }
.vs-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 3px solid var(--vs-line); background: #fff; cursor: pointer;
	font: 700 calc(18px * var(--vs-k))/1.45 var(--vs-font); color: var(--vs-ink); box-shadow: 0 3px 0 var(--vs-line); }
.vs-opt kbd { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vs-paper-2); color: var(--vs-wood-2); font: 800 15px/1 var(--vs-font); }
.vs-opt:hover { border-color: var(--vs-gold); }
.vs-opt.is-right { border-color: var(--vs-good); background: #ecfdf3; box-shadow: 0 3px 0 #86efac; }
.vs-opt.is-right kbd { background: var(--vs-good); color: #fff; }
.vs-opt.is-wrong { border-color: var(--vs-bad); background: #fff4e5; }
.vs-fb { min-height: 1.6em; margin: 10px 0 0; font-weight: 700; color: var(--vs-wood-2); }
.vs-ref, .vs-sum { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 2px solid var(--vs-line); }
.vs-ref-h { margin: 0 0 6px; font-weight: 800; color: var(--vs-wood); }
.vs-ref-l { margin: 4px 0; line-height: 1.6; }
.vs-sum p:last-child { margin: 0; line-height: 1.7; }
.vs-done { padding: 6px 0; }
.vs-done-big { margin: 0 0 4px; font-size: calc(28px * var(--vs-k)); font-weight: 800; color: var(--vs-good); }
.vs-yok { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vs-chipw { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 12px; background: #fff; border: 2px solid var(--vs-line); }
.vs-chipw .pw { font-size: 19px; } .vs-chipw span { font-size: 15px; color: var(--vs-thai); }
.vs-skip { align-self: center; margin: 0 0 6px; border: 0; background: none; color: var(--vs-thai); font: 600 14px var(--vs-font); text-decoration: underline; cursor: pointer; }
.vs-stage-card { display: block; width: auto; height: auto; max-width: min(100%, 520px); max-height: 36dvh; border-radius: 14px; border: 3px solid var(--vs-wood); box-shadow: 0 4px 0 var(--vs-wood-2); }   /* การ์ดแชร์ของด่านมีชื่อด่านในภาพ — ย่อทั้งใบตามสัดส่วนจริง ห้ามครอป */
.vs-star-list { list-style: none; margin: 8px 0; padding: 0; line-height: 1.9; }
.vs-star-list i { color: #d8c8a4; width: 1.4em; } .vs-star-list .is-on i { color: var(--vs-gold-2); }
.vs-recap { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vs-recap li { padding: 10px 14px; border-radius: 14px; background: #fff; border: 2px solid var(--vs-line); }
.vs-recap a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; color: var(--vs-ink); text-decoration: none; }
.vs-recap p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--vs-thai); }
/* บทส่งท้าย: ด่านพิเศษทั้งเรื่อง (การ์ดภาพ + ชื่อด่าน) */
.vs-finale-h { margin-top: 22px; }
.vs-stage-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.vs-stage-list a { display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; background: #fff; border: 2px solid var(--vs-line); color: var(--vs-ink); text-decoration: none; transition: transform .15s, border-color .15s; }
.vs-stage-list a:hover, .vs-stage-list a:focus-visible { transform: translateY(-2px); border-color: var(--vs-gold); }
.vs-stage-list img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.vs-stage-list span { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; }
.vs-stage-list small { font-size: 13px; color: var(--vs-thai); }
.vs-stage-list small .fa-circle-check { color: #15803d; }
.vs-stage-list b { font-size: 16px; line-height: 1.4; }

/* จอแนวตั้ง — ภาพอยู่บน หน้ากระดาษอยู่ล่าง */
@media (orientation: portrait) {
	.vs-app.is-book { grid-template-columns: 1fr; grid-template-rows: 40dvh 1fr; }
	.vs-art { height: 40dvh; }
	.vs-art img, .vs-art.is-video video { object-position: 50% 45%; }   /* ภาพการ์ตูนมีเรื่องอยู่ช่วงบน ~๗๐% (ล่างเคยเป็นที่คำบรรยาย) — ครอปให้เห็นตัวละคร */
	.vs-page { height: 60dvh; }
	.vs-text { font-size: calc(20px * var(--vs-k)); }
	.vs-body { padding: 14px 16px; }
}
/* จอเตี้ย (มือถือแนวนอน) */
@media (max-height: 520px) and (orientation: landscape) {
	.vs-top { padding-top: 6px; padding-bottom: 6px; }
	.vs-icon { width: 34px; height: 34px; font-size: 14px; }
	.vs-home { min-height: 36px; padding: 0 12px 0 10px; font-size: 15px; }
	.vs-body { padding: 10px 16px; }
	.vs-text { font-size: calc(19px * var(--vs-k)); margin-bottom: 10px; }
	.vs-pali-line { font-size: calc(18px * var(--vs-k)); line-height: 1.9; }
	.vs-nav { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
	.vs-btn { min-height: 40px; font-size: 16px; }
	.vs-opts { grid-template-columns: 1fr 1fr; gap: 8px; }
	.vs-row { padding: 6px 10px; } .vs-mchip { padding: 4px 10px; }
	.vs-opt { padding: 8px 12px; font-size: calc(16px * var(--vs-k)); }
	.vs-ctx { margin-bottom: 8px; padding: 4px 10px; line-height: 1.8; }
	.vs-ask { margin-bottom: 6px; }
	.vs-ask { font-size: calc(19px * var(--vs-k)); }
}
@media (max-width: 560px) { .vs-row { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .is-bad { animation: none; } .vs-art img { animation: none; } .vs-ch { transition: none; } }

/* ═════ สารบัญ — ไปหน้าไหนก็ได้ทันที (ปุ่มแถบล่างทุกหน้า · แผนที่ · แถบบนของเดินคุย) ═════
   แถว = พื้นทั้งแถวโค้งมน (ไม่มีแถบสีขอบซ้าย) · หน้าปัจจุบัน = พื้นทอง + กรอบทั้งแถว · อ่านแล้ว = ✓ เขียว */
.vs-toc-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--vs-line); background: #fff;
	color: var(--vs-wood-2); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 var(--vs-line); }
.vs-toc-btn small { font-size: 13px; font-weight: 600; color: var(--vs-thai); }
.vs-toc-btn:hover { background: #fff3c4; }
.vs-toc-btn:focus-visible, .vs-toc-tab:focus-visible, .vs-toc-close:focus-visible, .vs-toc-i:focus-visible { outline: 3px solid var(--vs-pali); outline-offset: 2px; }
.vs-map-toc { background: rgba(255,248,231,.1); color: #f6e7c4; border-color: rgba(246,231,196,.45); }
.vs-map-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.vw-toc { font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
body.vs-toc-open { overflow: hidden; }
.vs-toc { position: fixed; inset: 0; z-index: 1000; font-family: var(--vs-font); color: var(--vs-ink); }
.vs-toc[hidden] { display: none; }
.vs-toc-back { position: absolute; inset: 0; background: rgba(28,20,16,.58); }
.vs-toc-panel { box-sizing: border-box; position: absolute; top: 0; right: 0; bottom: 0; width: min(580px, 100%); display: flex; flex-direction: column; gap: 10px;
	padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) 16px;
	background: var(--vs-paper); box-shadow: -12px 0 40px rgba(0,0,0,.35); animation: vsTocIn .22s ease-out; }
@keyframes vsTocIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.vs-toc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vs-toc-h b { display: inline-flex; align-items: center; gap: 8px; font-size: 21px; color: var(--vs-wood-2); }
.vs-toc-close { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--vs-line); background: #fff;
	color: var(--vs-wood-2); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.vs-toc-close:hover { background: #fff3c4; }
.vs-toc-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.vs-toc-tab { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--vs-line); background: #fff; color: var(--vs-wood-2);
	font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.vs-toc-tab:hover { background: #fff3c4; }
.vs-toc-tab.is-on { background: var(--vs-gold); border-color: var(--vs-gold-2); color: #3b2508; }
.vs-toc-t { margin: 0; font-size: 17px; font-weight: 800; color: var(--vs-ink); }
.vs-toc-t small { margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--vs-thai); }
.vs-toc-q { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--vs-line); background: #fff; font-family: inherit; font-size: 16px; color: var(--vs-ink); }
.vs-toc-q:focus { outline: none; border-color: var(--vs-gold-2); }
.vs-toc-list { flex: 1; min-height: 0; margin: 0; padding: 0 2px 10px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.vs-toc-list li[hidden] { display: none; }
.vs-toc-sc { position: sticky; top: 0; z-index: 1; margin: 12px 0 4px; padding: 6px 12px; border-radius: 10px; background: var(--vs-paper-2); color: #7c4a12; font-size: 14px; font-weight: 800; }
.vs-toc-sc:first-child { margin-top: 0; }
.vs-toc-i { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 2px solid transparent; color: var(--vs-ink); text-decoration: none; }
.vs-toc-i:hover { background: #fff3c4; }
.vs-toc-n { flex: none; min-width: 32px; font-size: 15px; font-weight: 800; color: var(--vs-wood); font-variant-numeric: tabular-nums; line-height: 1.5; }
.vs-toc-x2 { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.5; }
.vs-toc-x2 b { color: var(--vs-wood-2); }
.vs-toc-ok { flex: none; margin-top: 5px; font-size: 13px; color: var(--vs-good); visibility: hidden; }
.vs-toc-i.is-seen .vs-toc-ok { visibility: visible; }
.is-cur > .vs-toc-i { background: #fde7b0; border-color: var(--vs-gold); }
.vs-toc-k > .vs-toc-i { font-weight: 700; }
.vs-toc-ic { flex: none; width: 32px; text-align: center; font-size: 17px; line-height: 1.5; }
.vs-toc-k.is-walk .vs-toc-ic { color: #0f766e; }
.vs-toc-k.is-video .vs-toc-ic { color: #7c3aed; }
.vs-toc-k.is-vocab .vs-toc-ic { color: #4338ca; }
.vs-toc-k.is-stage .vs-toc-ic { color: #b45309; }
.vs-toc-k.is-quiz .vs-toc-ic { color: #be123c; }
.vs-toc-k.is-end .vs-toc-ic { color: var(--vs-good); }
.vs-toc-k.is-walk > .vs-toc-i, .vs-toc-k.is-video > .vs-toc-i, .vs-toc-k.is-stage > .vs-toc-i { background: #fff; border-color: var(--vs-line); }
.vs-toc-k.is-cur > .vs-toc-i { background: #fde7b0; border-color: var(--vs-gold); }
.vs-toc-sub { margin: 2px 0 6px 30px; padding: 0; list-style: none; }
.vs-toc-sub .vs-toc-i { padding: 5px 10px; }
.vs-toc-sub .vs-toc-x2 { font-size: 14px; color: var(--vs-thai); }
.vs-toc-done { margin-left: 4px; font-size: 13px; font-weight: 700; color: var(--vs-good); white-space: nowrap; }
.vs-toc-empty { margin: 16px 0; text-align: center; color: var(--vs-thai); }
.vs-toc-f { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 4px; border-top: 2px solid var(--vs-line); }
.vs-toc-f .vs-btn { min-height: 40px; }
@media (max-width: 600px) { .vs-toc-panel { width: 100%; box-shadow: none; } .vs-toc-btn { padding: 0 12px; } }
/* มือถือแนวนอน / จอเตี้ย: สารบัญเต็มจอ ๒ คอลัมน์ — ซ้าย = ตอนทั้ง ๗ (มีชื่อตอน) + ปุ่มแผนที่/บทส่งท้าย · ขวา = รายการหน้าเต็มความสูงจอ
   แถวบนแถวเดียว: ชื่อสารบัญ · ชื่อตอน · ช่องค้นหา · ปิด (เดิมเป็นแผงขวาซ้อนหัว แท็บ ค้นหา ท้ายแผง จนรายการเหลือให้เห็น ๒ แถว — หลวงพี่ทัก ๒๕ ต.ค. ๒๕๖๙) */
.vs-toc-tab-t { display: none; }
@media (max-height: 500px) and (min-width: 600px) {
	.vs-toc-panel { width: 100%; box-shadow: none; display: grid; grid-template-columns: minmax(200px, 25%) minmax(0, 1fr) minmax(150px, 28%) auto;
		grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "h t q x" "tabs list list list" "f list list list"; gap: 6px 12px;
		padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
	.vs-toc-h { display: contents; }
	.vs-toc-h b { grid-area: h; font-size: 18px; }
	.vs-toc-close { grid-area: x; min-height: 38px; padding: 0 14px; }
	.vs-toc-t { grid-area: t; align-self: center; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.vs-toc-t small { font-size: 13px; }
	.vs-toc-q { grid-area: q; align-self: center; min-height: 38px; padding: 0 12px; font-size: 15px; }
	.vs-toc-tabs { grid-area: tabs; flex-direction: column; gap: 4px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
	.vs-toc-tab { flex: none; display: block; min-height: 34px; padding: 0 12px; border-radius: 12px; text-align: left; font-size: 14px; line-height: 30px;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.vs-toc-tab-t { display: inline; font-weight: 600; }
	.vs-toc-list { grid-area: list; padding-bottom: 4px; }
	.vs-toc-empty { grid-area: list; align-self: start; }
	.vs-toc-f { grid-area: f; flex-wrap: nowrap; gap: 6px; padding-top: 6px; }
	.vs-toc-f .vs-btn { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 0 8px; gap: 5px; font-size: 13px; justify-content: center; white-space: nowrap; }
	.vs-toc-sc { margin: 8px 0 3px; padding: 4px 10px; font-size: 13px; }
	.vs-toc-i { padding: 5px 10px; }
	.vs-toc-x2 { -webkit-line-clamp: 1; }
}
@media (prefers-reduced-motion: reduce) { .vs-toc-panel { animation: none; } .vs-toc-list { scroll-behavior: auto; } }

/* ═════ หน้าแผนที่: ภาพ hero (หลวงพี่ ๒๕ ต.ค. ๒๕๖๙ "แบบเดียวกับหน้าแรกของเกมอื่น ๆ") ═════
   ภาพเต็มกว้าง (assets/game/vidudabha/promo/hero.webp) · ข้อความ ชื่อเกม ปุ่ม อยู่ซ้ายบนพื้นไล่สีเข้ม · มือถือ = ภาพด้านบน ข้อความต่อด้านล่าง */
.vs-hero { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: clamp(460px, 66vh, 680px);
	margin: -24px calc(-1 * max(16px, env(safe-area-inset-right))) 26px calc(-1 * max(16px, env(safe-area-inset-left))); padding: 28px max(16px, env(safe-area-inset-right)) 34px max(16px, env(safe-area-inset-left)); overflow: hidden; isolation: isolate; }
.vs-hero-art { position: absolute; inset: 0; z-index: -2; background: var(--vs-hero, none) var(--vs-hero-fit, 70% 18% / cover) no-repeat; background-color: var(--vs-night); }   /* ภาพ = map.hero ใน config ของเรื่อง (ตั้ง --vs-hero) · map.heroFit = ตำแหน่ง/ขนาดของเรื่องนั้นบนจอกว้าง */
.vs-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(90deg, rgba(22,13,8,.94) 0%, rgba(22,13,8,.86) 26%, rgba(22,13,8,.45) 50%, rgba(22,13,8,0) 70%),
		linear-gradient(0deg, var(--vs-night) 0%, rgba(28,20,16,0) 22%); }
.vs-hero .vs-map-head { width: 100%; max-width: 1100px; margin: 0 auto; }
.vs-hero .vs-map-head > :not(.vs-map-bar) { max-width: min(600px, 50vw); }   /* ข้อความอยู่ฝั่งมืด ไม่ทับตัวละครด้านขวา */
.vs-hero .vs-map-bar { justify-content: flex-start; gap: 12px; }   /* ปุ่มเพลงอยู่ข้าง "ห้องเกม" ไม่บังหน้าตัวละคร */
.vs-hero .vs-title { text-shadow: 0 4px 0 #7a4d17, 0 12px 30px rgba(0,0,0,.55); }
.vs-hero .vs-lead { text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.vs-hero .vs-map-sound, .vs-hero .vs-link { backdrop-filter: blur(4px); }
.vs-hero .vs-map-sound { background: rgba(22,13,8,.58); }
@media (max-width: 760px) and (orientation: portrait) {
	.vs-hero { display: block; min-height: 0; padding-top: calc(min(72vw, 470px) - 92px); }
	.vs-hero-art { bottom: auto; height: min(72vw, 470px); background-position: 76% 40%; }
	.vs-hero::after { bottom: auto; height: min(72vw, 470px); background: linear-gradient(0deg, var(--vs-night) 4%, rgba(28,20,16,.6) 30%, rgba(28,20,16,0) 58%); }
	.vs-hero .vs-map-head { position: static; }
	.vs-hero .vs-map-head > :not(.vs-map-bar) { max-width: none; }
	.vs-hero .vs-map-bar { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); justify-content: flex-start; gap: 10px; }   /* ปุ่มเสียงมุมซ้ายบน ข้าง "ห้องเกม" */
	.vs-hero .vs-link { padding: 6px 12px; border-radius: 999px; background: rgba(22,13,8,.58); }
	.vs-hero .vs-kicker { margin-top: 0; }
}
@media (orientation: landscape) and (max-height: 520px) {   /* มือถือแนวนอน: ภาพชิดขวาเต็มความสูง ข้อความซ้ายบนพื้นมืด ไม่ทับตัวละคร */
	.vs-hero { min-height: 0; padding-top: 14px; padding-bottom: 22px; }
	.vs-hero-art { background-size: auto 100%; background-position: 100% 30%; background-color: var(--vs-night); }
	.vs-hero::after { background: linear-gradient(90deg, var(--vs-night) 0%, rgba(28,20,16,.94) 40%, rgba(28,20,16,.4) 58%, rgba(28,20,16,0) 74%), linear-gradient(0deg, var(--vs-night) 0%, rgba(28,20,16,0) 22%); }
	.vs-hero .vs-map-head > :not(.vs-map-bar) { max-width: 47vw; }
	.vs-hero .vs-title { font-size: 40px; }
	.vs-hero .vs-lead { font-size: 15px; line-height: 1.6; }
}


/* ═════ เอนจินกลาง: สิ่งที่เรื่องใหม่ยังไม่มี (ภาพ hero · ภาพการ์ดด่าน · ด่านที่กำลังสร้าง) ═════ */
/* hero แบบภาพจากการ์ตูนเรียงกันทางขวา (map.frames) — ใช้จนกว่าเรื่องจะมีภาพ hero ของตัวเอง */
.vs-hero.is-frames .vs-hero-art { left: 40%; display: flex; gap: 8px; background: var(--vs-night); }
.vs-hero.is-frames .vs-hero-art img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
@media (max-width: 760px) and (orientation: portrait) {
	.vs-hero.is-frames .vs-hero-art { left: 0; gap: 6px; }
	.vs-hero.is-frames .vs-hero-art img { object-position: 50% 55%; }
}
@media (orientation: landscape) and (max-height: 520px) { .vs-hero.is-frames .vs-hero-art { left: 48%; } .vs-hero.is-frames .vs-hero-art img:nth-child(n+3) { display: none; } }

.vs-stage-list .is-soon { display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; background: #fbf5e6; border: 2px dashed var(--vs-line); color: var(--vs-thai); }
.vs-stage-list .is-soon img { filter: saturate(.55) brightness(.9); }

/* การ์ดด่านแบบเรียบ (ยังไม่มีภาพการ์ดแชร์) */
.vs-stage-plain { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; box-sizing: border-box;
	width: min(100%, 520px); aspect-ratio: 16 / 9; max-height: 36dvh; padding: 18px 22px; border-radius: 14px; overflow: hidden;
	border: 3px solid var(--vs-wood); box-shadow: 0 4px 0 var(--vs-wood-2); color: #fff8e7;
	background: radial-gradient(120% 90% at 85% 10%, rgba(242,182,49,.35), transparent 55%), linear-gradient(135deg, #312e81 0%, #3730a3 45%, #1c1410 100%); }
.vs-stage-plain b { font-size: calc(26px * var(--vs-k)); line-height: 1.25; font-weight: 800; text-wrap: balance; }
.vs-stage-plain small { font-size: 16px; font-weight: 700; color: #f6d98a; }
.vs-stage-plain-ic { position: absolute; right: 20px; top: 16px; font-size: 44px; color: rgba(242,182,49,.55); }
.vs-stage-plain-tag { position: absolute; left: 18px; top: 16px; padding: 4px 12px; border-radius: 999px; background: var(--vs-gold); color: #3b2410; font-size: 14px; font-weight: 800; }
.vs-stage-plain.is-soon { background: radial-gradient(120% 90% at 85% 10%, rgba(242,182,49,.2), transparent 55%), linear-gradient(135deg, #57534e 0%, #44403c 50%, #1c1410 100%); }
.vs-stage-plain.is-soon .vs-stage-plain-tag { background: #fff3d6; }
@media (max-height: 520px) { .vs-stage-plain { padding: 12px 16px; } .vs-stage-plain b { font-size: 20px; } .vs-stage-plain-ic { font-size: 32px; } }

/* ═════ หน้าแผนที่ = เส้นทางของแต่ละตอน: ฉากกับเกมเรียงตามเรื่อง (หลวงพี่ ๓๐ ต.ค. ๒๕๖๙) ═════
   ซ้าย = การ์ดตอน (กดอ่าน) · ขวา = เส้นเวลา จุดกลม = ฉาก · จุดจอยเกม + การ์ดสีทอง = เกม · ".is-games" ซ่อนแถวฉาก */
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-view { max-width: 1100px; margin: 0 auto 14px; display: flex; gap: 8px; scroll-margin-top: 12px; }
.vs-view-b { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 18px; border-radius: 999px; border: 2px solid rgba(246,231,196,.4);
	background: rgba(255,248,231,.06); color: #f1e3c4; font: 700 16px/1 var(--vs-font); cursor: pointer; transition: background .15s, border-color .15s; }
.vs-view-b:hover { background: rgba(255,248,231,.14); }
.vs-view-b.is-on { background: linear-gradient(#ffd560, var(--vs-gold)); border-color: var(--vs-gold-2); color: var(--vs-ink); }
.vs-view-b:focus-visible { outline: 3px solid #ffd560; outline-offset: 3px; }
.vs-paths { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: flex; flex-direction: column; gap: 18px; }
.vs-path { display: grid; grid-template-columns: 280px minmax(0, 1fr); border-radius: 18px; overflow: clip; border: 3px solid var(--vs-wood); box-shadow: 0 5px 0 var(--vs-wood-2);
	background: linear-gradient(90deg, var(--vs-paper-2) 280px, var(--vs-line) 280px 282px, var(--vs-paper) 282px); }
.vs-path.is-done { border-color: var(--vs-gold-2); }

/* การ์ดตอน (ซ้าย) */
.vs-ch { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--vs-ink); }   /* ตอนยาว: การ์ดตอนติดจอขณะเลื่อนดูฉาก */
.vs-ch:focus-visible { outline-offset: -4px; }
.vs-ch-art { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9d9b4; }
.vs-ch-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; transition: transform .25s; }
.vs-ch:hover .vs-ch-art img { transform: scale(1.04); }
.vs-ch-text { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 12px 16px 16px; }
.vs-ch-n { font-size: 14px; font-weight: 800; color: var(--vs-gold-2); }
.vs-ch-t { font-size: 20px; line-height: 1.35; font-weight: 800; text-wrap: balance; }
.vs-ch-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-ch-tag { padding: 2px 10px; border-radius: 999px; background: #fde7b0; color: #7c4a12; font-size: 14px; font-weight: 700; }
.vs-ch-tag.is-walk { background: #d9f2ec; color: #0f5c4e; }
.vs-ch-foot { margin-top: 2px; }
.vs-ch-new { font-size: 14px; color: var(--vs-thai); }
.vs-ch-go { padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--vs-wood-2); }
.vs-ch:hover .vs-ch-go { color: var(--vs-pali); }

/* เส้นเวลาในตอน (ขวา) */
.vs-route { --dot: 26px; --rail: 30px; position: relative; list-style: none; margin: 0; padding: 14px 18px 16px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-route::before { content: ""; position: absolute; left: calc(12px + var(--rail) / 2 - 1.5px); top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: var(--vs-line); }
.vs-rt { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); align-items: center; column-gap: 10px; }
.vs-rt-dot { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; box-sizing: border-box;
	border: 3px solid var(--vs-line); background: var(--vs-paper); color: #fff; font-size: 12px; }
/* แถวฉาก */
.vs-rt.is-scene > a { grid-column: 1 / -1; display: grid; grid-template-columns: var(--rail) auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
	min-height: 40px; padding: 4px 10px 4px 0; border-radius: 10px; text-decoration: none; color: var(--vs-ink); }
.vs-rt.is-scene > a:hover { background: rgba(138,90,43,.08); }
.vs-rt.is-scene > a:focus-visible { outline: 3px solid var(--vs-pali); outline-offset: 0; }
.vs-rt-n { font-size: 14px; font-weight: 800; color: var(--vs-wood); white-space: nowrap; }
.vs-rt-t { font-size: 16px; line-height: 1.4; font-weight: 700; min-width: 0; }
.vs-rt-t small { font-size: 14px; font-weight: 500; color: var(--vs-thai); }
.vs-rt.is-read .vs-rt-dot { border-color: var(--vs-good); background: var(--vs-good); }
.vs-rt.is-read .vs-rt-t { color: var(--vs-thai); }
.vs-rt.is-here .vs-rt-dot { border-color: var(--vs-gold-2); background: var(--vs-gold); box-shadow: 0 0 0 5px rgba(242,182,49,.3); }
.vs-rt-here { padding: 2px 10px; border-radius: 999px; background: var(--vs-gold); color: var(--vs-ink); font-size: 13px; font-weight: 800; white-space: nowrap; }
/* จุดแวะในฉาก: เดินคุย (เขียวน้ำทะเล · สีเดียวกับป้ายบนการ์ดตอน) · คลิปคัตซีน (คราม) */
.vs-rt.is-extra .vs-rt-dot, .vs-rt.is-extra.is-read .vs-rt-dot { width: 22px; height: 22px; border: 2px solid #5fb3a1; background: #d9f2ec; color: #0f5c4e; font-size: 11px; }
.vs-rt.is-video .vs-rt-dot, .vs-rt.is-video.is-read .vs-rt-dot { border-color: #a5b4fc; background: #e0e7ff; color: var(--vs-pali); }
.vs-rt.is-extra.is-here .vs-rt-dot { box-shadow: 0 0 0 5px rgba(242,182,49,.35); }
.vs-rt-x { justify-self: start; padding: 1px 9px; border-radius: 999px; background: #d9f2ec; color: #0f5c4e; font-size: 13px; font-weight: 800; white-space: nowrap; }
.vs-rt.is-video .vs-rt-x { background: #e0e7ff; color: var(--vs-pali); }
.vs-rt.is-extra .vs-rt-t { font-weight: 600; }
.vs-rt-ok { color: var(--vs-good); font-size: 14px; }
/* แถวเกม */
.vs-rt.is-stage { margin: 6px 0; }
.vs-rt.is-stage > .vs-rt-dot { width: 32px; height: 32px; border-color: var(--vs-gold-2); background: var(--vs-gold); color: var(--vs-ink); font-size: 14px; }
.vs-game { display: grid; grid-template-columns: 148px minmax(0, 1fr) auto; align-items: stretch; min-width: 0; border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--vs-ink);
	background: linear-gradient(135deg, #fff6dc, #ffe7a8); border: 2px solid var(--vs-gold-2); box-shadow: 0 4px 0 var(--vs-gold-2); transition: transform .15s, box-shadow .15s; }
a.vs-game:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--vs-gold-2); }
.vs-game:focus-visible { outline: 3px solid var(--vs-pali); outline-offset: 3px; }
.vs-game-art { position: relative; display: block; min-height: 104px; overflow: hidden; background: #e9d9b4; }
.vs-game-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }   /* ภาพการ์ตูนแนวตั้ง — ไม่ให้ดันการ์ดสูงตาม */
.vs-game-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; min-width: 0; }
.vs-game-k { font-size: 13px; font-weight: 800; color: #9a5b00; }
.vs-game-t { font-size: 19px; line-height: 1.3; font-weight: 800; text-wrap: balance; }
.vs-game-lead { font-size: 15px; line-height: 1.55; color: var(--vs-thai); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vs-game-go { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px 10px 4px; font-size: 14px; font-weight: 800; white-space: nowrap; }
.vs-game-play { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--vs-wood-2); color: #ffe6a3; font-size: 17px;
	box-shadow: 0 3px 0 #3a230d; }
.vs-game-play i { margin-left: 3px; }
.vs-game-play.is-again { background: var(--vs-paper); color: var(--vs-wood-2); border: 2px solid var(--vs-wood); box-shadow: none; }
.vs-game-play.is-again i { margin-left: 0; }
.vs-game-new { color: var(--vs-wood-2); }
.vs-game-done { color: var(--vs-good); }
a.vs-game:hover .vs-game-play:not(.is-again) { background: var(--vs-pali); }
/* เกมที่ยังสร้างไม่เสร็จ (ไม่ใช่ลิงก์) */
.vs-game.is-soon { cursor: default; background: #fbf5e6; border: 2px dashed #c9b48a; box-shadow: none; }
.vs-game.is-soon .vs-game-art img { filter: saturate(.55) brightness(.9); }
.vs-game-soon { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(28,20,16,.82); color: #fff3d6; font-size: 13px; }

/* โหมด "เฉพาะเกม": ซ่อนแถวฉาก · ตอนที่ไม่มีเกมย่อเหลือแถบหัว */
.vs-paths.is-games .vs-rt.is-scene { display: none; }
.vs-paths.is-games .vs-route { gap: 0; }
.vs-paths.is-games .vs-route::before { display: none; }
@media (min-width: 861px) { .vs-paths.is-games .vs-ch-art { aspect-ratio: 16 / 9; } }
.vs-paths.is-games .vs-path.no-games { display: none; }

@media (max-width: 860px) {
	.vs-path { grid-template-columns: 1fr; background: var(--vs-paper); }
	.vs-ch { position: static; display: grid; grid-template-columns: 132px minmax(0, 1fr); background: var(--vs-paper-2); border-bottom: 2px solid var(--vs-line); }
	.vs-ch-art { aspect-ratio: auto; height: 100%; min-height: 150px; }
	.vs-ch-text { padding: 10px 14px 12px; gap: 4px; }
	.vs-ch-t { font-size: 18px; }
}
@media (max-width: 560px) {
	.vs-view { margin-bottom: 12px; } .vs-view-b { flex: 1; justify-content: center; padding: 6px 10px; font-size: 15px; }
	.vs-ch { grid-template-columns: 108px minmax(0, 1fr); }
	.vs-route { --rail: 24px; --dot: 22px; padding: 10px 10px 12px 6px; }
	.vs-route::before { left: calc(6px + var(--rail) / 2 - 1.5px); }
	.vs-rt { column-gap: 8px; }
	.vs-rt.is-scene > a { grid-template-columns: var(--rail) minmax(0, 1fr) auto; column-gap: 8px; padding-right: 4px; }
	.vs-rt-n, .vs-rt-x { grid-column: 2; grid-row: 1; font-size: 13px; }
	.vs-rt-ok { grid-column: 3; grid-row: 1 / span 2; }
	.vs-rt-t { grid-column: 2; grid-row: 2; font-size: 15px; }
	.vs-rt.is-scene .vs-rt-dot { grid-row: 1 / span 2; }
	.vs-rt-here { grid-column: 3; grid-row: 1 / span 2; font-size: 12px; padding: 2px 8px; }
	.vs-rt.is-stage > .vs-rt-dot { width: 26px; height: 26px; font-size: 12px; }
	.vs-game { grid-template-columns: 88px minmax(0, 1fr); }
	.vs-game-art { grid-row: 1 / span 2; min-height: 0; }
	.vs-game-body { padding: 8px 10px 0; }
	.vs-game-t { font-size: 17px; }
	.vs-game-lead { font-size: 14px; }
	.vs-game-go { flex-direction: row; justify-content: flex-end; padding: 4px 10px 8px; }
	.vs-game-play { width: 36px; height: 36px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .vs-game, .vs-ch-art img { transition: none; } }