[v-cloak] { display: none !important; }
:root { --pa-indigo:#4f46e5; --pa-indigo-dark:#312e81; --pa-green:#059669; --pa-gold:#fbbf24; --pa-ink:#111827; --pa-muted:#4b5563; }
* { box-sizing: border-box; }
.pa-body { margin:0; overflow:hidden; background:#94b86f; color:var(--pa-ink); font-family:'Sarabun',sans-serif; }
button, a { -webkit-tap-highlight-color:transparent; font-family:'Sarabun',sans-serif; }
button:focus-visible, a:focus-visible { outline:3px solid #fbbf24; outline-offset:2px; }
/* min-height:360px กันจอยุบตอน dvh ไม่รองรับ — แต่ต้องไม่เกินความสูงจอจริง
   ไม่งั้นบนมือถือแนวนอนจอเตี้ย (<360px) แถบล่างจะถูกดันหลุดใต้ขอบจอ */
.pa-app { height:100dvh; min-height:360px; min-height:min(360px, 100dvh); display:flex; flex-direction:column; }

/* ---------- แผนที่เต็มจอ — ตรึงสัดส่วนภาพ 1672×941 ยึดขอบล่าง (CSS ล้วน) ---------- */
.pa-stage { min-height:0; flex:1; position:relative; overflow:hidden; }
.pa-world { position:absolute; bottom:0; left:50%; transform:translateX(-50%); aspect-ratio:1672/941; height:auto; width:max(100%, calc(100vh * 1.777)); width:max(100%, calc(100dvh * 1.777)); background-size:100% 100%; background-repeat:no-repeat; touch-action:none; }
.pa-map-wash { position:absolute; inset:0; background:linear-gradient(180deg,rgba(49,46,129,.04),transparent 25%,rgba(17,24,39,.04)); pointer-events:none; }

/* ---------- สถานที่เรืองแสง = ประตูเข้าเกมธาตุ ---------- */
.pa-glow { position:absolute; transform:translate(-50%,-50%); border:0; padding:0; background:transparent; cursor:pointer; z-index:2; border-radius:50%; }
.pa-glow::before { content:''; position:absolute; inset:0; border-radius:50%; mix-blend-mode:screen; animation:paGlowPulse 2.2s ease-in-out infinite alternate; }
.pa-glow-earth::before { background:radial-gradient(ellipse at center, rgba(253,224,71,.95), rgba(217,119,6,.55) 52%, transparent 74%); }
.pa-glow-water::before { background:radial-gradient(ellipse at center, rgba(165,243,252,.98), rgba(14,165,233,.6) 52%, transparent 74%); }
.pa-glow-wind::before { background:radial-gradient(ellipse at center, rgba(187,247,208,.98), rgba(16,185,129,.55) 52%, transparent 74%); }
.pa-glow-fire::before { background:radial-gradient(ellipse at center, rgba(254,215,170,1), rgba(249,115,22,.6) 52%, transparent 74%); }
.pa-glow-vacaka::before { background:radial-gradient(ellipse at center, rgba(165,243,252,.95), rgba(14,116,144,.55) 52%, transparent 74%); }
@keyframes paGlowPulse { from { opacity:.55; transform:scale(.94); } to { opacity:.9; transform:scale(1.06); } }
.pa-glow.is-near::before { animation:paGlowNear .8s ease-in-out infinite alternate; }
@keyframes paGlowNear { from { opacity:.95; transform:scale(1.02); } to { opacity:1; transform:scale(1.16); } }
.pa-glow-badge { position:absolute; left:50%; top:2%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px; background:linear-gradient(180deg,#8b5cf6,#5b21b6); font-size:1rem; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.92); box-shadow:0 4px 12px rgba(15,23,42,.4), inset 0 1px 0 rgba(255,255,255,.35); white-space:nowrap; }
.pa-glow-badge i { color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.pa-glow-earth .pa-glow-badge { background:linear-gradient(180deg,#d97706,#92400e); }
.pa-glow-water .pa-glow-badge { background:linear-gradient(180deg,#0ea5e9,#0369a1); }
.pa-glow-wind .pa-glow-badge { background:linear-gradient(180deg,#10b981,#047857); }
.pa-glow-fire .pa-glow-badge { background:linear-gradient(180deg,#f87171,#b91c1c); }
.pa-glow-vacaka .pa-glow-badge { background:linear-gradient(180deg,#22d3ee,#0e7490); }
.pa-glow-cta { position:absolute; left:50%; bottom:2%; transform:translateX(-50%); padding:6px 14px; border-radius:999px; background:#111827; color:#fde68a; font-size:.7rem; font-weight:800; white-space:nowrap; box-shadow:0 3px 8px rgba(0,0,0,.35); animation:paCtaBob .7s ease-in-out infinite alternate; }
@keyframes paCtaBob { to { transform:translateX(-50%) translateY(-4px); } }

/* ---------- แผ่นศิลา / พระอาจารย์ / สามเณร ---------- */
.pa-tablet { position:absolute; transform:translate(-50%,-50%); width:38px; height:46px; border:0; background:transparent; cursor:pointer; z-index:2; transition:opacity .25s, transform .25s; }
.pa-tablet i { position:absolute; inset:6px 3px 3px; color:#64748b; font-size:36px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); transform:scaleX(.82); }
.pa-tablet b { position:absolute; inset:4px 0 0; z-index:1; display:grid; place-items:center; font-size:.76rem; color:#fff; text-shadow:0 1px 2px #1f2937; }
.pa-tablet span { position:relative; z-index:1; display:block; color:#f8fafc; font-size:.58rem; }
.pa-tablet.is-near i { color:var(--pa-indigo); }
.pa-tablet.is-near { transform:translate(-50%,-54%) scale(1.06); }
.pa-tablet.is-gone { opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.5); }
.pa-tablet.is-fresh { animation:paPopIn .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes paPopIn { from { transform:translate(-50%,-50%) scale(0); } to { transform:translate(-50%,-50%) scale(1); } }
/* แสงวาบ "ปิ๊ง" ตอนธาตุใหม่เกิด */
.pa-spawn-burst { position:absolute; transform:translate(-50%,-50%); width:14px; height:14px; z-index:5; pointer-events:none; }

/* ---------- ลูกศรทางออกไปอีกฉาก ---------- */
.pa-exit { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:5px; border:0; padding:0; background:none; cursor:pointer; z-index:3; }
.pa-exit i { font-size:2.3rem; color:#4338ca; background:#fff; border-radius:50%; line-height:1; box-shadow:0 4px 14px rgba(49,46,129,.45), 0 0 0 3px rgba(255,255,255,.75); animation:paExitNudgeR 1.4s ease-in-out infinite; }
.pa-exit span { padding:4px 12px; border-radius:999px; background:rgba(30,27,75,.82); color:#fff; font-size:.7rem; font-weight:800; white-space:nowrap; box-shadow:0 2px 8px rgba(15,23,42,.35); }
.pa-exit-left i { animation-name:paExitNudgeL; }
@keyframes paExitNudgeR { 0%,100% { transform:translateX(0); } 50% { transform:translateX(6px); } }
@keyframes paExitNudgeL { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-6px); } }
@media (max-width:640px) {
	.pa-exit i { font-size:1.9rem; }
	.pa-exit span { font-size:.62rem; }
}
.pa-spawn-burst::before { content:''; position:absolute; inset:-26px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.95), rgba(253,224,71,.55) 45%, transparent 70%); animation:paBurstFlash 1.1s ease-out forwards; }
.pa-spawn-burst::after { content:'✦'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; font-size:26px; text-shadow:0 0 10px #fde047; animation:paBurstStar 1.1s ease-out forwards; }
@keyframes paBurstFlash { 0% { opacity:0; transform:scale(.2); } 25% { opacity:1; transform:scale(1.15); } 100% { opacity:0; transform:scale(1.7); } }
@keyframes paBurstStar { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(0deg); } 30% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.6) rotate(180deg); } }
.pa-teacher-figure { position:relative; display:block; overflow:hidden; }
.pa-teacher-figure img { position:absolute; display:block; object-fit:contain; pointer-events:none; }
.pa-teacher-person { z-index:2; filter:drop-shadow(0 2px 2px rgba(15,23,42,.3)); }
.pa-teacher-fan { z-index:1; }
.pa-world-teacher { position:absolute; z-index:3; width:134px; height:152px; transform:translate(-50%,-82%); cursor:pointer; }
.pa-teacher-figure-world { position:absolute; inset:0; overflow:visible; }
.pa-teacher-figure-world .pa-teacher-person { left:0; bottom:0; width:72%; height:100%; }
.pa-teacher-figure-world .pa-teacher-fan { right:-3%; top:-2%; width:66%; height:100%; z-index:3; clip-path:inset(0 0 31% 0); }
.pa-world-teacher .pa-teacher-name { position:absolute; left:50%; top:-42px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:999px; color:#fff; background:linear-gradient(180deg,#f59e0b,#b45309); font-size:.92rem; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.92); white-space:nowrap; box-shadow:0 4px 12px rgba(15,23,42,.4), inset 0 1px 0 rgba(255,255,255,.35); }
.pa-world-teacher .pa-teacher-name i { filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.pa-world-teacher.is-near .pa-teacher-person { filter:drop-shadow(0 0 6px #fde68a); }
.pa-novice { position:absolute; width:82px; height:112px; transform:translate(-50%,-80%); z-index:4; transition:left .05s linear,top .05s linear; pointer-events:none; transform-origin:50% 100%; }
.pa-novice img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 1px rgba(15,23,42,.35)); }
.pa-shadow { position:absolute; left:14px; bottom:1px; width:54px; height:12px; border-radius:50%; background:rgba(15,23,42,.28); }
.pa-novice.is-happy { animation:paHappy .45s ease-out; }
.pa-novice.is-walking img { animation:paWalk .28s ease-in-out infinite alternate; }
.pa-novice.face-left img { transform:scaleX(-1); }
.pa-novice.face-right img { transform:scaleX(1); }
@keyframes paHappy { 50% { transform:translate(-50%,-88%) rotate(-2deg); } }
@keyframes paWalk { to { transform:translateY(-3px); } }
.pa-novice.face-left.is-walking img { animation-name:paWalkLeft; }
@keyframes paWalkLeft { to { transform:scaleX(-1) translateY(-3px); } }
.pa-nearby-label { position:absolute; left:50%; bottom:112px; transform:translateX(-50%); z-index:7; color:#fff; background:rgba(49,46,129,.92); border-radius:999px; padding:7px 12px; font-size:.72rem; font-weight:800; box-shadow:0 2px 6px rgba(15,23,42,.25); pointer-events:none; white-space:nowrap; }
.pa-nearby-label i { margin-right:6px; color:var(--pa-gold); }

/* ---------- HUD ---------- */
.pa-hud { position:absolute; inset:calc(10px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) auto calc(12px + env(safe-area-inset-left,0px)); z-index:7; display:flex; gap:8px; align-items:flex-start; justify-content:space-between; pointer-events:none; }
.pa-hearts, .pa-collect { background:rgba(255,255,255,.95); border-radius:12px; padding:7px 11px; box-shadow:0 2px 6px rgba(31,41,55,.18); }
.pa-hearts span, .pa-collect span { display:block; font-size:.6rem; color:var(--pa-muted); }
.pa-hearts b { color:#e11d48; letter-spacing:2px; }
.pa-collect { text-align:center; }
.pa-collect i { color:var(--pa-indigo); margin-right:5px; }
.pa-collect b { font-size:1rem; }

/* ---------- ปุ่มควบคุม ---------- */
.pa-controls { position:absolute; inset:auto calc(14px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(76px + env(safe-area-inset-left,0px)); z-index:8; display:flex; justify-content:space-between; align-items:end; pointer-events:none; }
.pa-joystick { width:104px; height:104px; border-radius:50%; background:rgba(49,46,129,.68); border:3px solid rgba(255,255,255,.9); position:relative; pointer-events:auto; touch-action:none; box-shadow:0 3px 8px rgba(0,0,0,.2); }
.pa-joystick>span { position:absolute; left:29px; top:29px; width:42px; height:42px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.pa-joystick small { position:absolute; left:0; right:0; bottom:-1px; color:#fff; text-align:center; font-size:.65rem; font-weight:800; }
.pa-action-stack { display:flex; align-items:end; gap:10px; pointer-events:auto; }
.pa-action, .pa-inventory { border:3px solid rgba(255,255,255,.9); color:#fff; font-weight:800; box-shadow:0 3px 8px rgba(0,0,0,.2); cursor:pointer; }
.pa-action { width:88px; height:88px; border-radius:50%; background:var(--pa-indigo); }
.pa-action.is-ready { background:var(--pa-green); box-shadow:0 0 0 5px rgba(209,250,229,.65),0 3px 8px rgba(0,0,0,.2); }
.pa-inventory { width:68px; height:68px; border-radius:50%; background:#047857; }
.pa-action i, .pa-inventory i { display:block; font-size:1.25rem; margin-bottom:3px; }
.pa-action span, .pa-inventory span { font-size:.68rem; }

/* ---------- เมนูมุมล่างซ้าย ---------- */
.pa-menu-fab { position:absolute; left:calc(12px + env(safe-area-inset-left,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:25; }
.pa-menu-btn { width:52px; height:52px; border-radius:50%; border:3px solid rgba(255,255,255,.92); background:var(--pa-indigo-dark); color:#fff; font-size:1.1rem; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.25); }
.pa-menu-pop { position:absolute; left:0; bottom:64px; min-width:250px; background:#fff; border-radius:14px; box-shadow:0 10px 28px rgba(15,23,42,.3); padding:10px; display:grid; gap:4px; }
.pa-menu-stats { display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; background:#eef2ff; font-size:.78rem; font-weight:800; color:var(--pa-indigo-dark); }
.pa-menu-stats i { color:var(--pa-gold); margin-right:4px; }
.pa-menu-pop button, .pa-menu-pop a { display:flex; align-items:center; gap:10px; min-height:44px; border:0; border-radius:10px; background:transparent; color:#374151; font:700 .85rem 'Sarabun',sans-serif; padding:0 10px; cursor:pointer; text-decoration:none; text-align:left; }
.pa-menu-pop button:hover, .pa-menu-pop a:hover { background:#eef2ff; color:#4338ca; }
.pa-menu-pop i { width:20px; color:var(--pa-indigo); }
.pa-menu-pop em { margin-left:auto; font-style:normal; font-size:.62rem; color:#94a3b8; }

/* ---------- กล่องแจ้ง / กล่องเข้าเกม ---------- */
.pa-notice-backdrop { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:16px; background:rgba(15,23,42,.45); }
.pa-notice { position:relative; width:min(440px,100%); background:#fff; border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(15,23,42,.28); display:grid; grid-template-columns:54px 1fr; gap:14px; }
.pa-notice-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:#fef3c7; color:#d97706; font-size:1.6rem; }
.pa-notice strong { font-size:1.25rem; color:#111827; }
.pa-notice p { margin:4px 0; line-height:1.45; color:#374151; }
.pa-notice small { color:#6b7280; }
.pa-notice button { grid-column:1/3; min-height:48px; border:0; border-radius:12px; background:var(--pa-indigo); color:#fff; font-weight:800; cursor:pointer; }
.pa-notice.is-try .pa-notice-icon { background:#d1fae5; color:#047857; }
.pa-notice.is-try button { background:#047857; }
.pa-gate-notice { grid-template-columns:54px 1fr; overflow:hidden; }
.pa-gate-art { grid-column:1/3; width:calc(100% + 40px); max-width:none; margin:-20px -20px 0; aspect-ratio:1536/1024; max-height:190px; object-fit:cover; display:block; }
.pa-gate-tag { display:block; color:#6b7280; font-size:.7rem; font-weight:800; }
.pa-gate-notice button i { margin-right:6px; }
.pa-gate-later { background:#eef2ff !important; color:#4338ca !important; }
.pa-gate-notice.is-gate-earth .pa-notice-icon { background:#fef3c7; color:#92400e; }
.pa-gate-notice.is-gate-water .pa-notice-icon { background:#e0f2fe; color:#0284c7; }
.pa-gate-notice.is-gate-wind .pa-notice-icon { background:#d1fae5; color:#059669; }
.pa-gate-notice.is-gate-fire .pa-notice-icon { background:#fee2e2; color:#dc2626; }

/* ---------- ปก / จบด่าน / สมุด ---------- */
.pa-intro-backdrop, .pa-chapter-backdrop { position:fixed; inset:0; z-index:45; display:grid; place-items:center; padding:20px; background:rgba(30,27,75,.72); }
.pa-intro { width:min(780px,100%); max-height:92dvh; overflow:auto; display:grid; grid-template-columns:240px 1fr; align-items:end; background:linear-gradient(135deg,#eef2ff,#fff 58%); border-radius:16px; box-shadow:0 16px 40px rgba(15,23,42,.3); }
.pa-intro-poster { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; border-radius:16px 0 0 16px; align-self:stretch; }
.pa-intro>div { padding:28px 30px 28px 8px; }
.pa-intro>div>span, .pa-chapter>span { color:#4338ca; font-size:.75rem; font-weight:800; }
.pa-intro h1 { margin:5px 0 12px; color:#111827; font-size:1.6rem; }
.pa-intro p { margin:0; color:#374151; font-size:1rem; line-height:1.6; }
.pa-intro ul { margin:14px 0; padding:0; list-style:none; display:grid; gap:8px; color:var(--pa-muted); font-size:.82rem; }
.pa-intro li { display:flex; gap:8px; }
.pa-intro li i { width:22px; flex:none; color:var(--pa-indigo); margin-top:3px; }
.pa-intro>div>button { min-height:50px; width:100%; border:0; border-radius:12px; background:var(--pa-indigo); color:#fff; font-weight:800; cursor:pointer; box-shadow:0 4px 8px rgba(79,70,229,.25); }
.pa-intro>div>button i { margin-right:8px; }
.pa-quick-games { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pa-quick-games>span { font-size:.72rem; color:var(--pa-muted); font-weight:700; }
.pa-quick-games button { min-height:40px; border:0; border-radius:10px; color:#fff; font-weight:800; font-size:.8rem; padding:0 14px; cursor:pointer; box-shadow:0 2px 6px rgba(15,23,42,.25); }
.pa-quick-games button i { margin-right:5px; }
.pa-chapter { width:min(640px,100%); max-height:92dvh; overflow:auto; padding:28px; border-radius:16px; background:#fff; text-align:center; box-shadow:0 16px 40px rgba(15,23,42,.3); }
.pa-chapter-star { width:66px; height:66px; margin:0 auto 10px; display:grid; place-items:center; border-radius:50%; background:#fef3c7; color:#d97706; font-size:2rem; }
.pa-chapter h2 { margin:5px 0 7px; font-size:1.45rem; }
.pa-chapter>p { margin:0 auto 18px; max-width:60ch; color:#4b5563; }
.pa-next-world { width:min(360px,100%); min-height:50px; margin:0 auto 8px; border:0; border-radius:12px; background:var(--pa-green); color:#fff; font-weight:800; cursor:pointer; box-shadow:0 4px 8px rgba(5,150,105,.24); display:block; }
.pa-next-world:hover { background:#047857; }
.pa-next-world i { margin-right:8px; }
.pa-chapter-close { margin-top:10px; min-height:44px; padding:0 18px; border:0; border-radius:12px; background:#eef2ff; color:#4338ca; font-weight:800; cursor:pointer; }
.pa-book-backdrop { position:fixed; inset:0; z-index:35; background:rgba(15,23,42,.55); display:grid; place-items:center; padding:16px; }
.pa-book { width:min(520px,100%); max-height:80dvh; overflow:auto; border-radius:16px; background:#fff; box-shadow:0 12px 32px rgba(15,23,42,.28); }
.pa-book header { position:sticky; top:0; background:#fff; display:flex; justify-content:space-between; align-items:center; padding:18px; border-bottom:1px solid #e5e7eb; }
.pa-book header span { color:#6b7280; font-size:.72rem; }
.pa-book h2 { margin:2px 0 0; font-size:1.25rem; }
.pa-book header button { width:42px; height:42px; border:0; border-radius:12px; color:#4338ca; background:#eef2ff; cursor:pointer; }
.pa-book-list { padding:12px 18px 18px; }
.pa-book-list article { display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:center; padding:12px 0; }
.pa-book-list article+article { border-top:1px solid #e5e7eb; }
.pa-book-list article>b { font-size:1.45rem; color:#4338ca; }
.pa-book-list strong, .pa-book-list span { display:block; }
.pa-book-list span { color:#6b7280; font-size:.75rem; margin-top:3px; }
.pa-book-list i { color:#059669; }
.pa-count { font-style:normal; font-weight:800; color:#7c3aed; background:#ede9fe; border-radius:999px; padding:3px 10px; font-size:.75rem; }
.pa-empty { padding:32px 18px; text-align:center; color:#6b7280; }
.pa-empty b { color:#7c3aed; }

/* ---------- ที่คั่นสมุด: ธาตุ / ศัพท์ ---------- */
.pa-book-tabs { display:flex; gap:8px; padding:12px 18px 0; background:#fff; }
.pa-book-tabs button { flex:1; min-height:44px; border:2px solid #e5e7eb; border-radius:12px 12px 0 0; background:#f8fafc; color:var(--pa-muted); font-weight:800; font-size:.9rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.pa-book-tabs button i { font-size:.85rem; }
.pa-book-tabs button em { font-style:normal; font-weight:800; background:#e5e7eb; color:#475569; border-radius:999px; padding:1px 8px; font-size:.72rem; }
.pa-book-tabs button.is-on { border-color:var(--pa-indigo); border-bottom-color:#fff; background:#eef2ff; color:#4338ca; }
.pa-book-tabs button.is-on em { background:#c7d2fe; color:#3730a3; }

/* รายการศัพท์ที่ผสมได้ */
.pa-book-words { padding:14px 18px 20px; display:flex; flex-direction:column; gap:12px; }
.pa-book-words article { border:1px solid #e5e7eb; border-radius:14px; padding:12px 14px; background:#fdfdff; }
.pa-word-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.pa-word-head .pa-word { font-size:1.5rem; color:#4338ca; line-height:1.5; }
.pa-word-mean { color:#374151; font-weight:700; }
.pa-word-recipe { margin-top:8px; }
.pa-word-formula { display:block; color:#4b5563; font-size:.86rem; }
.pa-word-formula b { color:#7c3aed; font-size:1.02rem; }
.pa-word-formula i { color:#9ca3af; font-style:normal; margin:0 3px; }
.pa-word-steps { margin-top:8px; background:#f5f3ff; border:1px solid #ede9fe; border-radius:10px; padding:9px 12px; }
.pa-word-steps-head { display:block; color:#5b21b6; font-size:.82rem; }
.pa-word-steps-head i { margin-right:5px; }
.pa-word-steps-head b { color:#4338ca; }
.pa-word-steps ol { margin:6px 0 0; padding-left:20px; color:#4b5563; font-size:.84rem; line-height:1.7; }
.pa-word-steps small { display:block; margin-top:6px; color:#9ca3af; font-size:.72rem; }

/* ---------- บทเรียนพระอาจารย์ ---------- */
.pa-teacher-modal { width:min(760px,100%); display:grid; grid-template-columns:220px 1fr; grid-template-rows:minmax(0,1fr); overflow:hidden; }
.pa-teacher-side { min-height:0; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; background:linear-gradient(180deg,#fef9ec,#fde9c8); border-right:1px solid #f3e8d2; }
.pa-teacher-figure-seated { width:100%; height:400px; overflow:visible; }
.pa-teacher-figure-seated .pa-teacher-fan { right:-18%; bottom:-2%; width:70%; height:100%; }
.pa-teacher-figure-seated .pa-teacher-person { left:-7%; bottom:0; width:106%; height:100%; filter:drop-shadow(0 4px 6px rgba(120,53,15,.25)); }
.pa-teacher-main { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:auto; }
.pa-teacher-modal header { gap:12px; }
.pa-teacher-modal header>div { flex:1; }
@media (max-width:640px) {
	.pa-teacher-modal { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
	.pa-teacher-side { max-height:150px; overflow:hidden; align-items:flex-start; border-right:0; border-bottom:1px solid #f3e8d2; }
	.pa-teacher-figure-seated { width:220px; height:190px; }
}
/* มือถือแนวนอน (จอเตี้ย): ตัดแถบรูปพระครูออก ให้เนื้อหาเต็มกว้างและเลื่อนได้ */
@media (max-height:540px) {
	.pa-teacher-modal { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
	.pa-teacher-side { display:none; }
}
.pa-teacher-tabs { display:flex; gap:6px; padding:12px 18px 0; }
.pa-teacher-tabs button { flex:1; min-height:42px; border:2px solid #e5e7eb; border-radius:10px; background:#fff; color:var(--pa-muted); font-weight:800; font-size:.78rem; cursor:pointer; }
.pa-teacher-tabs button.is-on { border-color:var(--pa-indigo); background:#eef2ff; color:#4338ca; }
.pa-teacher-body { padding:14px 20px 20px; color:#374151; font-size:.92rem; line-height:1.7; }
.pa-teacher-body p { margin:0 0 10px; }
.pa-teacher-body b { color:#312e81; }
.pa-dhatu-table { width:100%; border-collapse:collapse; margin:8px 0 10px; font-size:.85rem; }
.pa-dhatu-table th, .pa-dhatu-table td { padding:5px 8px; border-bottom:1px solid #f1f5f9; text-align:left; }
.pa-dhatu-table th { color:#6b7280; font-size:.7rem; }
.pa-dhatu-table td:first-child { font-weight:800; color:#4338ca; }
.pa-teacher-actions { display:flex; gap:8px; margin-top:12px; }
.pa-teacher-actions button { flex:1; min-height:46px; border:0; border-radius:12px; color:#fff; font-weight:800; cursor:pointer; }
.pa-teacher-actions button:first-child { background:#dc2626; }
.pa-teacher-actions button:last-child { background:#7c3aed; }
.pa-teacher-actions button i { margin-right:6px; }

/* ---------- จอเล็ก ---------- */
@media (max-width:900px) {
	.pa-intro { grid-template-columns:120px 1fr; align-items:center; }
	.pa-intro>div { padding:20px 16px 20px 0; }
	.pa-intro h1 { font-size:1.25rem; }
	.pa-intro p { font-size:.88rem; }
	.pa-glow-badge { font-size:.78rem; padding:6px 13px; }
	.pa-glow-cta { font-size:.62rem; }
	.pa-tablet { width:32px; height:40px; }
	.pa-tablet i { font-size:30px; inset:5px 2px 2px; }
	.pa-tablet b { font-size:.66rem; }
}
@media (max-height:560px) {
	.pa-novice { width:72px; height:98px; }
	.pa-world-teacher { width:112px; height:128px; }
	.pa-world-teacher .pa-teacher-name { top:-36px; font-size:.8rem; }
	.pa-shadow { left:12px; width:48px; height:10px; }
	.pa-controls { bottom:9px; }
	.pa-joystick { width:84px; height:84px; }
	.pa-joystick>span { left:23px; top:23px; width:34px; height:34px; }
	.pa-action { width:72px; height:72px; }
	.pa-inventory { width:58px; height:58px; }
	.pa-menu-btn { width:46px; height:46px; font-size:1rem; }
	.pa-menu-pop { bottom:56px; }
	.pa-controls { inset:auto calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(66px + env(safe-area-inset-left,0px)); }
	.pa-nearby-label { bottom:96px; }
	.pa-intro ul { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---------- สมุดธาตุ: คัมภีร์โบราณกาง ๒ หน้า (พื้นหลัง gen ด้วย gpt-image-2) ---------- */
.pa-tome-backdrop { padding:12px; }
.pa-tome { position:relative; width:min(1060px,96vw); aspect-ratio:3/2; max-height:90dvh; background:url('/assets/game/pali-adventure/dhatu-book.jpg') center/cover no-repeat; border-radius:18px; box-shadow:0 18px 44px rgba(0,0,0,.5); }
.pa-tome-close { position:absolute; top:10px; right:10px; z-index:6; width:40px; height:40px; border:0; border-radius:12px; background:rgba(30,20,10,.55); color:#fde8c8; font-size:1rem; cursor:pointer; }
.pa-tome-close:hover { background:rgba(30,20,10,.78); }

/* ที่คั่นหนังสือ: ริบบิ้นห้อยจากขอบบน */
.pa-tome-marks { position:absolute; top:0; right:15%; z-index:5; display:flex; gap:10px; }
.pa-mark { border:0; cursor:pointer; color:#fff; font-weight:800; font-size:.85rem; padding:12px 15px 20px; display:inline-flex; align-items:center; gap:6px; clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),50% 100%,0 calc(100% - 11px)); filter:saturate(.45) brightness(.82); transform:translateY(-8px); transition:transform .16s ease, filter .16s ease; }
.pa-mark em { font-style:normal; background:rgba(255,255,255,.26); border-radius:999px; padding:0 8px; font-size:.72rem; }
.pa-mark-roots { background:linear-gradient(180deg,#7c3aed,#4c1d95); }
.pa-mark-words { background:linear-gradient(180deg,#059669,#064e3b); }
.pa-mark.is-on { filter:none; transform:translateY(0); padding-bottom:28px; }

/* พื้นที่หน้ากระดาษ (วางทับหน้าว่างในรูป) */
.pa-tome-spread { position:absolute; inset:12% 13.8% 16.5% 15.8%; display:grid; grid-template-columns:1fr 1fr; column-gap:7.5%; }
.pa-tome-page { position:relative; min-height:0; overflow:auto; padding:4px 16px 8px; color:#4a3216; display:flex; flex-direction:column; scrollbar-width:thin; scrollbar-color:rgba(120,80,30,.4) transparent; }
.pa-page-head { text-align:center; color:#8a5a1c; font-size:.76rem; font-weight:800; letter-spacing:.03em; border-bottom:1px solid rgba(146,100,40,.35); padding-bottom:6px; margin-bottom:6px; }
.pa-page-no { margin-top:auto; padding-top:8px; text-align:center; color:#a1742f; font-weight:800; font-size:.8rem; }
.pa-page-empty { margin:30% 6% 0; text-align:center; color:#8a6a3a; line-height:2; }
.pa-page-empty b { color:#7c2d12; }

/* รายการธาตุบนหน้ากระดาษ */
.pa-leaf-root { display:grid; grid-template-columns:50px 1fr auto; gap:10px; align-items:center; padding:8px 2px; }
.pa-leaf-root + .pa-leaf-root { border-top:1px dashed rgba(146,100,40,.32); }
.pa-leaf-root > b { font-size:1.35rem; color:#7c2d12; }
.pa-leaf-root strong { display:block; color:#4a3216; font-size:.92rem; }
.pa-leaf-root .pa-examples { display:block; color:#8a6a3a; font-size:.7rem; margin-top:2px; }
.pa-leaf-root .pa-count { font-style:normal; font-weight:800; color:#92400e; background:rgba(191,146,60,.16); border:1px solid rgba(146,100,40,.3); border-radius:999px; padding:2px 9px; font-size:.7rem; }

/* รายการศัพท์บนหน้ากระดาษ */
.pa-leaf-word { padding:10px 2px 12px; }
.pa-leaf-word + .pa-leaf-word { border-top:1px dashed rgba(146,100,40,.32); }
.pa-leaf-word .pa-word { font-size:1.35rem; color:#7c2d12; line-height:1.5; }
.pa-leaf-word .pa-word-mean { color:#4a3216; font-weight:700; }
.pa-leaf-word .pa-word-formula { display:block; margin-top:4px; color:#6b4b1e; font-size:.83rem; }
.pa-leaf-word .pa-word-formula b { color:#92400e; font-size:1rem; }
.pa-leaf-word .pa-word-formula i { color:#b08a4e; font-style:normal; margin:0 3px; }
.pa-leaf-steps { margin-top:7px; background:rgba(191,146,60,.13); border:1px solid rgba(146,100,40,.28); border-radius:10px; padding:8px 11px; }
.pa-leaf-steps-head { color:#7c2d12; font-size:.79rem; display:block; }
.pa-leaf-steps-head i { margin-right:5px; }
.pa-leaf-steps-head b { color:#92400e; }
.pa-leaf-steps ol { margin:5px 0 0; padding-left:18px; color:#5d431f; font-size:.79rem; line-height:1.65; }

/* พลิกหน้า: คลิกได้ทั้งแถบขอบกระดาษ ซ้าย/ขวา + ป้ายลูกศรทองมองเห็นชัด */
.pa-edge { position:absolute; top:15%; bottom:9%; width:12.5%; z-index:4; border:0; padding:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pa-edge-prev { left:0; border-radius:18px 0 0 18px; }
.pa-edge-next { right:0; border-radius:0 18px 18px 0; }
.pa-edge::before { content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(255,220,140,0); transition:background .16s ease; }
.pa-edge:hover::before { background:rgba(255,220,140,.16); }
.pa-edge span { position:relative; width:52px; height:52px; border-radius:50%; background:linear-gradient(180deg,#fceabf,#e6bd77); color:#5b3a12; border:2px solid #a1742f; box-shadow:0 4px 12px rgba(0,0,0,.45); display:grid; place-items:center; font-size:1.1rem; transition:transform .15s ease, background .15s ease; }
.pa-edge:hover span { transform:scale(1.12); background:linear-gradient(180deg,#fff3d4,#f0cf8e); }
.pa-edge:active span { transform:scale(.94); }
.pa-tome-pageinfo { position:absolute; bottom:4.6%; left:50%; transform:translateX(-50%); z-index:5; color:#fbe7c2; background:rgba(62,38,14,.75); padding:5px 14px; border-radius:999px; font-size:.78rem; font-weight:800; white-space:nowrap; }

/* จอแคบ: สมุดโชว์ทีละหน้า (การ์ดกระดาษลอยบนคัมภีร์) */
@media (max-width:759px) {
	.pa-tome { aspect-ratio:auto; height:86dvh; width:min(560px,96vw); }
	.pa-tome-spread { inset:9.5% 7% 13% 7%; grid-template-columns:1fr; }
	.pa-tome-page { background:rgba(250,240,214,.95); border:1px solid rgba(146,100,40,.35); border-radius:14px; padding:12px 14px 14px; box-shadow:0 6px 16px rgba(40,20,5,.28); }
	.pa-tome-marks { right:18%; }
	.pa-edge { top:12%; bottom:7%; width:14%; }
	.pa-edge span { width:46px; height:46px; }
	.pa-tome-pageinfo { bottom:3.8%; }
}