/* เกมเดินคุยวิฑูฑภะ — ฉาก 1600×900 ย่อขยายทั้งก้อน · แถบบน/กล่องบทพูด/ปุ่ม เป็นขนาดจริง (อ่านง่ายบนมือถือ) · โทเคนสีจาก vidudabha-story.css */
/* overflow: clip = เลื่อนด้วยโปรแกรม/โฟกัสก็ไม่ได้ (hidden ยังเลื่อนได้ — ทั้งจอเคยขยับไป ๔๐ px จนกล่องบทพูดเหลื่อม) */
.vs-app.is-walk { position: fixed; inset: 0; overflow: hidden; overflow: clip; background: radial-gradient(ellipse at center, #3a2a1c 0%, var(--vs-night) 75%); user-select: none; -webkit-user-select: none; }
/* จอที่สัดส่วนไม่ตรงฉาก: ขอบว่างเป็นภาพฉากเดียวกันแบบเบลอ (แทนแถบดำ) */
.vs-app.is-walk::before { content: ""; position: absolute; inset: 0; background: var(--vw-bg, none) 50% 100% / cover no-repeat; filter: blur(22px) brightness(.5) saturate(1.1); pointer-events: none; }
.vw-viewport { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.vw-stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden; cursor: pointer; box-shadow: 0 0 60px rgba(0,0,0,.45); }
.vw-bg { position: absolute; inset: 0; background: 50% 100% / cover no-repeat; }
.vw-world { position: absolute; inset: 0; }
.vw-world img { max-width: none; }
.vw-prop { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; }

/* เครื่องหมายบนหัวตัวละคร: ! = คุย · ? = ตัดสินใจ · ตา = ไปดู · พนมมือ = ไหว้ */
.vw-mark { position: absolute; left: 0; top: 0; z-index: 2000; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%;
	font: 900 40px/1 var(--vs-font); color: var(--vs-ink); border: 4px solid var(--vs-wood-2); box-shadow: 0 5px 0 var(--vs-wood-2), 0 0 24px rgba(242,182,49,.7); cursor: pointer; }   /* แตะเครื่องหมาย = คุย/ดู/ไหว้ (เดินไปหาก่อนถ้าอยู่ไกล) */
.vw-mark.is-talk { background: linear-gradient(#ffe27a, var(--vs-gold)); }
.vw-mark.is-choose { background: linear-gradient(#ffd0e0, #f472b6); color: #500724; box-shadow: 0 5px 0 var(--vs-wood-2), 0 0 26px rgba(244,114,182,.8); }
.vw-mark.is-look { background: #dbeafe; color: #1e40af; font-size: 30px; }
.vw-mark.is-bow { background: #dcfce7; color: #166534; font-size: 30px; }
.vw-exit { position: absolute; left: 0; top: 0; z-index: 2000; padding: 12px 24px; border-radius: 999px; background: linear-gradient(#ffe27a, var(--vs-gold)); border: 4px solid var(--vs-wood-2);
	font: 900 34px/1 var(--vs-font); color: var(--vs-ink); box-shadow: 0 5px 0 var(--vs-wood-2), 0 0 30px rgba(242,182,49,.9); white-space: nowrap; cursor: pointer; }

/* แถบบน */
/* จอสูงกว่า 16:9: แถบบน/กล่องบทพูดชิดขอบเวที ไม่ลอยในแถบดำ (หลวงพี่ ๒๕ ต.ค. ๖๙) — เวทีเดินคุยวางกลางจอแบบเดียวกับด่าน */
:root { --vd-band: max(0px, calc((100vh - 56.25vw) / 2)); }
@supports (height: 100dvh) { :root { --vd-band: max(0px, calc((100dvh - 56.25vw) / 2)); } }
.vw-hud { position: absolute; left: 0; right: 0; top: var(--vd-band); z-index: 20; display: flex; align-items: flex-start; gap: 8px;
	padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); pointer-events: none; }
.vw-hud > * { pointer-events: auto; }
.vw-goal { flex: 1; min-width: 0; max-width: 640px; margin: 0 auto; padding: 6px 18px 8px; border-radius: 16px; text-align: center;
	background: linear-gradient(#fffaf0, var(--vs-paper-2)); border: 3px solid var(--vs-wood); box-shadow: 0 4px 0 var(--vs-wood-2); }
.vw-goal small { display: block; font-size: 13px; font-weight: 700; color: var(--vs-gold-2); }
.vw-goal b { display: block; font-size: clamp(17px, 2.4vw, 22px); line-height: 1.35; color: var(--vs-ink); }

/* กล่องบทพูด — อยู่บนจอ · ถ้าทับหน้าคนที่กำลังคุย สคริปต์ย้ายไปด้านที่ว่าง (is-side) */
.vw-dlg { position: absolute; z-index: 30; left: 50%; top: calc(var(--vd-band) + max(10px, env(safe-area-inset-top)) + 76px); transform: translateX(-50%); width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 110px - 2 * var(--vd-band)); overflow-y: auto; box-sizing: border-box;
	padding: 14px 18px 12px; border-radius: 20px; background: linear-gradient(var(--vs-paper), var(--vs-paper-2)); border: 4px solid var(--vs-wood); box-shadow: 0 7px 0 var(--vs-wood-2), 0 18px 40px rgba(0,0,0,.45); cursor: default; overscroll-behavior: contain; }
.vw-dlg.is-side { transform: none; max-width: calc(100vw - 24px); }
.vw-dlg.is-side.is-left { left: max(12px, env(safe-area-inset-left)); }
.vw-dlg.is-side.is-right { left: auto; right: max(12px, env(safe-area-inset-right)); }
/* ใต้ใบหน้า: แนบขอบล่าง ย่อให้กะทัดรัด — ปุ่มถัดไปขึ้นไปอยู่มุมขวาบนของกล่อง */
.vw-dlg.is-bottom { top: auto; bottom: calc(var(--vd-band) + max(8px, env(safe-area-inset-bottom))); padding-top: 8px; padding-bottom: 8px; }
.vw-dlg.is-bottom .vw-who { min-height: 38px; margin-bottom: 2px; padding-right: 130px; }
.vw-dlg.is-bottom .vw-who img { width: 38px; height: 38px; } .vw-dlg.is-bottom .vw-scroll { width: 34px; height: 34px; font-size: 15px; }
.vw-dlg.is-bottom .vw-dlg-nav { position: absolute; top: 6px; right: 12px; margin: 0; }
.vw-dlg.is-bottom .vw-hint { display: none; }
.vw-dlg.is-bottom .vs-btn { min-height: 38px; padding: 0 16px; }
.vw-dlg.is-bottom .vw-text { margin-bottom: 4px; }
.vw-dlg-nav .vs-btn { margin-left: auto; }
.vw-dlg.is-narr { border-color: var(--vs-gold-2); }
.vw-dlg.is-choose { border-color: #be185d; box-shadow: 0 7px 0 #831843, 0 18px 40px rgba(0,0,0,.45); }
.vw-who { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.vw-who img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #fff; border: 3px solid var(--vs-wood); }
.vw-who b { font-size: 18px; color: var(--vs-wood-2); }
.vw-scroll { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fde7b0; color: var(--vs-gold-2); font-size: 20px; border: 3px solid var(--vs-gold-2); }
.vw-text { margin: 0 0 8px; font-size: calc(22px * var(--vs-k)); line-height: 1.55; font-weight: 700; color: var(--vs-ink); text-wrap: pretty; }
.vw-text.is-sm { font-size: calc(17px * var(--vs-k)); color: var(--vs-thai); font-weight: 600; }
.vw-pali { padding: 6px 10px; border-radius: 12px; background: #fff; border: 2px solid var(--vs-line); }
/* บรรทัดยกศัพท์ อ.บุญสืบ เรียงตามภาษาไทย (ใต้บาลีรายคำ) — ศัพท์ตัวหนาคราม ตามด้วยคำแปล · (คำโยค) สีม่วงอ่อน */
.vw-yok { margin-top: 8px; padding: 6px 12px 8px; border-radius: 12px; background: #fffdf6; border: 2px solid var(--vs-line); }
.vw-yok-k { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--vs-wood); }
.vw-yok .vs-yokline { font-size: calc(16px * var(--vs-k)); line-height: 1.85; }
.vw-dlg-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.vw-hint { font-size: 14px; color: var(--vs-thai); }
.vw-task { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--vs-pali); }

/* ตัดสินใจ */
.vw-dlg.is-choose .vw-who b { color: #9d174d; }
.vw-ask { margin: 2px 0 10px; font-size: calc(21px * var(--vs-k)); line-height: 1.5; font-weight: 800; color: var(--vs-ink); text-wrap: pretty; }
.vw-opts { display: grid; gap: 8px; }
.vw-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 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); transition: transform .12s, border-color .12s; }
.vw-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); }
.vw-opt:hover:not(:disabled) { border-color: #f472b6; transform: translateY(-1px); }
.vw-opt:focus-visible { outline: 3px solid var(--vs-pali); outline-offset: 3px; }
.vw-opt:disabled { cursor: default; }
.vw-opt.is-wrong { border-color: #fdba74; background: #fff7ed; color: #9a3412; box-shadow: none; opacity: .75; text-decoration: line-through; text-decoration-color: rgba(194,65,12,.45); }
.vw-opt.is-wrong kbd { background: #fed7aa; color: #9a3412; }
.vw-opt.is-right { border-color: var(--vs-good); background: #ecfdf3; box-shadow: 0 3px 0 #86efac; opacity: 1; }
.vw-opt.is-right kbd { background: var(--vs-good); color: #fff; }
.vw-opt.is-dim:not(.is-wrong) { opacity: .5; }
.vw-why { margin: 10px 0 0; padding: 9px 13px; border-radius: 12px; font-size: calc(17px * var(--vs-k)); line-height: 1.55; font-weight: 600; }
.vw-why.is-bad { background: #fff7ed; color: #7c2d12; border: 2px solid #fed7aa; }
.vw-why.is-bad b { color: #c2410c; white-space: nowrap; }
.vw-why.is-good { background: #f0fdf4; color: #14532d; border: 2px solid #86efac; }
.vw-why i { margin-right: 4px; }
@keyframes vwShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.vw-opt.is-wrong { animation: vwShake .3s ease-in-out; }

/* ปุ่มบนจอ */
.vw-pad { position: absolute; inset: auto 0 0 0; z-index: 21; display: flex; justify-content: space-between; align-items: flex-end;
	padding: 0 max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); pointer-events: none; }
.vw-dlg:not([hidden]) ~ .vw-pad { display: none; }
.vw-pad-move { display: flex; gap: 12px; }
.vw-pbtn { pointer-events: auto; width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(255,255,255,.75); background: rgba(28,20,16,.45); color: #fff; font-size: 38px; cursor: pointer; touch-action: none; backdrop-filter: blur(3px); }
.vw-pbtn.is-on { background: rgba(242,182,49,.6); }
.vw-act { pointer-events: auto; min-width: 150px; min-height: 76px; padding: 0 26px; border-radius: 999px; border: 4px solid #fff3c4; background: rgba(28,20,16,.5); color: rgba(255,255,255,.7);
	font: 900 24px/1 var(--vs-font); cursor: pointer; backdrop-filter: blur(3px); }
.vw-act.is-ready { background: linear-gradient(#ffd560, var(--vs-gold)); color: var(--vs-ink); border-color: var(--vs-wood-2); box-shadow: 0 5px 0 var(--vs-wood-2); animation: vwPulse 1.1s ease-in-out infinite; }
@keyframes vwPulse { 50% { transform: scale(1.06); } }
.vw-act:disabled { cursor: default; font-size: 15px; min-width: 0; min-height: 50px; padding: 0 16px; opacity: .7; }   /* ยังไม่มีอะไรให้ทำ = ปุ่มเล็กลง ไม่บังฉาก */

/* วิธีเล่น */
.vw-help { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20,12,6,.62); backdrop-filter: blur(3px); cursor: default; }
.vw-help[hidden] { display: none; }
.vw-help-card { box-sizing: border-box; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 22px 20px; border-radius: 22px;
	background: linear-gradient(var(--vs-paper), var(--vs-paper-2)); border: 4px solid var(--vs-wood); box-shadow: 0 8px 0 var(--vs-wood-2), 0 24px 60px rgba(0,0,0,.5); }
.vw-help-k { margin: 0; font-size: 14px; font-weight: 800; color: var(--vs-gold-2); }
.vw-help-card h2 { margin: 2px 0 10px; font-size: 26px; line-height: 1.3; color: var(--vs-ink); }
.vw-help-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.vw-help-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.5; color: var(--vs-thai); }
.vw-help-list b { color: var(--vs-ink); }
.vw-hi { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 3px solid var(--vs-wood); color: var(--vs-wood-2); font: 900 19px/1 var(--vs-font); }
.vw-hi.is-mark { background: linear-gradient(#ffe27a, var(--vs-gold)); color: var(--vs-ink); }
.vw-hi.is-q { background: linear-gradient(#ffd0e0, #f472b6); color: #500724; }
.vw-help-card .vs-btn { width: 100%; font-size: 19px; }

.vw-rotate { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
	.vw-rotate { position: absolute; inset: 0; z-index: 90; display: grid; place-content: center; text-align: center; gap: 12px; background: var(--vs-night); color: #fff; }
	.vw-rotate i { font-size: 56px; color: var(--vs-gold); }
	.vw-rotate p { margin: 0; font-size: 20px; line-height: 1.6; }
}
@media (max-height: 520px) {
	.vw-goal { padding: 3px 14px 5px; } .vw-goal b { font-size: 16px; }
	.vw-dlg { padding: 8px 14px; top: calc(max(6px, env(safe-area-inset-top)) + 54px); max-height: calc(100dvh - 64px); }
	.vw-who { margin-bottom: 2px; }
	.vw-who img { width: 40px; height: 40px; } .vw-scroll { width: 36px; height: 36px; font-size: 15px; }
	.vw-who b { font-size: 16px; }
	.vw-text { font-size: calc(18px * var(--vs-k)); margin-bottom: 4px; }
	.vw-ask { font-size: calc(17px * var(--vs-k)); margin-bottom: 6px; }
	.vw-opts { gap: 6px; }
	.vw-opt { padding: 6px 10px; font-size: calc(16px * var(--vs-k)); gap: 8px; }
	.vw-opt kbd { width: 24px; height: 24px; font-size: 13px; }
	.vw-why { font-size: 15px; padding: 6px 10px; margin-top: 6px; }
	.vw-dlg-nav { margin-top: 6px; }
	.vw-pbtn { width: 60px; height: 60px; font-size: 30px; }
	.vw-act { min-height: 62px; min-width: 120px; font-size: 20px; }
	.vw-help-card { padding: 12px 16px 14px; } .vw-help-card h2 { font-size: 20px; margin-bottom: 6px; }
	.vw-help-list { gap: 5px; margin-bottom: 10px; } .vw-help-list li { font-size: 15px; } .vw-hi { width: 30px; height: 30px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .vw-act.is-ready, .vw-opt.is-wrong { animation: none; } }

/* ตัวละครที่ขั้นนี้ต้องไปหา — แตะ/คลิกที่ตัวได้เลย */
.vw-hit, .vw-hit img { cursor: pointer; }