[v-cloak] { display: none !important; }
:root { --pp-indigo:#4f46e5; --pp-indigo-dark:#312e81; --pp-green:#059669; --pp-gold:#fbbf24; --pp-ink:#111827; --pp-muted:#4b5563; --pp-wood:#92400e; --pp-wood-dark:#78350f; --pp-paper:#fffbeb; }
* { box-sizing: border-box; }
.pp-body { margin:0; overflow:hidden; background:#e0e7ff; color:var(--pp-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) แถบล่าง (โจทย์/ปุ่ม) จะถูกดันหลุดใต้ขอบจอ */
.pp-app { height:100dvh; min-height:360px; min-height:min(360px, 100dvh); display:flex; flex-direction:column; }

/* ---------- สนาม ----------
   ภาพฉากตรึงสัดส่วน 1536×1024 ด้วย CSS ล้วน ยึดขอบล่างเป็นหลัก — ด้านบน (ท้องฟ้า) ล้นจอได้เสมอ
   บวก 160px เข้ากับความสูงก่อนคูณสัดส่วน = ซูมให้โซนเล่นด้านล่างใหญ่ขึ้นบนจอเตี้ย
   (เกิน ~20% ไม่ได้ เพราะโพรงริมซ้าย/ขวาอยู่ที่ 16%/82.5% จะหลุดขอบจอ)
   ใช้ dvh เพื่อให้ปรับเองเมื่อหมุนจอ/แถบเบราว์เซอร์มือถือยุบ-ขยาย ไม่มีค่าค้างแบบ JS */
.pp-stage { min-height:0; flex:1; position:relative; overflow:hidden; background:#d6b986; }
.pp-field { position:absolute; bottom:0; left:50%; transform:translateX(-50%); aspect-ratio:1536/1024; height:auto; width:max(100%, calc((100vh + 160px) * 1.5)); width:max(100%, calc((100dvh + 160px) * 1.5)); background-size:100% 100%; background-repeat:no-repeat; }
.pp-stage-wash { position:absolute; inset:0; background:linear-gradient(180deg,rgba(49,46,129,.05),transparent 30%); pointer-events:none; }

/* ---------- โพรงและตัวตุ่น ----------
   ขนาดทุกส่วนอิงความกว้างโพรง (container query) เพื่อให้สัดส่วนคงที่ทุกจอ */
.pp-burrow { position:absolute; width:15%; aspect-ratio:3/4; transform:translate(-50%,-100%); container-type:inline-size; }
/* ตัดเฉพาะขอบล่าง (ปากโพรง) — เปิดด้านบน/ข้าง ให้ป้ายชูสูงและป้ายเฉลยขยายได้ไม่ขาด */
.pp-hole-mask { position:absolute; inset:0; clip-path:inset(-150% -70% 0 -70%); }
.pp-hole-shadow { position:absolute; left:12%; right:12%; bottom:-2%; height:7%; border-radius:50%; background:radial-gradient(ellipse at center, rgba(63,36,10,.4), transparent 68%); pointer-events:none; }
.pp-mole { position:absolute; left:0; right:0; bottom:0; height:100%; border:0; padding:0; background:transparent; cursor:pointer; transform:translateY(155%); transition:transform .24s cubic-bezier(.34,1.56,.64,1); touch-action:manipulation; }
.pp-mole img { position:absolute; left:50%; bottom:0; width:64cqw; transform:translateX(-50%); filter:drop-shadow(0 3px 3px rgba(63,36,10,.3)); pointer-events:none; }
.pp-mole.is-up { transform:translateY(6%); }
.pp-mole.is-happy { transform:translateY(-2%); }
.pp-mole.is-shy { transform:translateY(10%) rotate(-6deg); }
.pp-mole.is-down { transform:translateY(155%); }
.pp-sign { position:absolute; left:50%; bottom:84cqw; transform:translateX(-50%); min-width:80cqw; max-width:170cqw; padding:.18em .35em .22em; border-radius:.28em; background:linear-gradient(180deg,#fde68a,#fbbf24); border:.14em solid var(--pp-wood-dark); box-shadow:0 .12em 0 var(--pp-wood), 0 4px 8px rgba(63,36,10,.28); text-align:center; font-size:min(24cqw,42px); line-height:1.1; transition:transform .2s; pointer-events:none; }
.pp-sign b { display:block; color:var(--pp-wood-dark); font-weight:800; }
.pp-sign i { display:block; font-style:normal; font-weight:700; color:#7c2d12; font-size:.52em; margin-top:.1em; }
.pp-mole.is-happy .pp-sign { transform:translateX(-50%) translateY(-14cqw) scale(1.08); }
.pp-mole.is-reveal .pp-sign { transform:translateX(-50%) translateY(-8cqw) scale(1.14); background:linear-gradient(180deg,#fef9c3,#fde68a); }

/* ลดการเคลื่อนไหว: ปรากฏ/จางแทนการเด้ง */
.pp-reduced .pp-mole { transition:opacity .25s ease; transform:translateY(6%); opacity:1; }
.pp-reduced .pp-mole.is-down { transform:translateY(6%); opacity:0; pointer-events:none; }
.pp-reduced .pp-mole.is-shy { transform:translateY(6%); }
.pp-reduced .pp-mole.is-happy { transform:translateY(6%); }

/* ---------- HUD ระหว่างเล่น ---------- */
.pp-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:10px; align-items:flex-start; justify-content:space-between; pointer-events:none; }
.pp-hearts { background:rgba(255,255,255,.95); border-radius:12px; padding:7px 12px; box-shadow:0 2px 6px rgba(31,41,55,.18); }
.pp-hearts span { display:block; font-size:.62rem; color:var(--pp-muted); }
.pp-hearts b { color:#e11d48; letter-spacing:2px; }

/* ---------- แถบล่าง: เมนูซ้าย · โจทย์กลาง · ปุ่มขวา ---------- */
.pp-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; }
.pp-menu-btn { width:54px; height:54px; border-radius:50%; border:3px solid rgba(255,255,255,.92); background:var(--pp-indigo-dark); color:#fff; font-size:1.15rem; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.25); }
.pp-menu-pop { position:absolute; left:0; bottom:66px; min-width:230px; background:#fff; border-radius:14px; box-shadow:0 10px 28px rgba(15,23,42,.3); padding:10px; display:grid; gap:4px; }
.pp-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(--pp-indigo-dark); }
.pp-menu-stats i.fa-droplet { color:#0ea5e9; }
.pp-menu-stats i.fa-spa { color:#ec4899; }
.pp-menu-pop button, .pp-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; }
.pp-menu-pop button:hover, .pp-menu-pop a:hover { background:#eef2ff; color:#4338ca; }
.pp-menu-pop i { width:20px; color:var(--pp-indigo); }
/* แถวปรับขนาดตัวอักษรในเมนู: ก- / ก+ */
.pp-menu-scale { display:flex; align-items:center; gap:8px; padding:6px 10px; }
.pp-menu-scale>span { flex:1; display:flex; align-items:center; gap:10px; color:#374151; font:700 .85rem 'Sarabun',sans-serif; }
.pp-menu-scale>span i { width:20px; color:var(--pp-indigo); }
.pp-menu-scale button { width:40px; min-height:40px; flex:none; display:grid; place-items:center; border:2px solid #c7d2fe; border-radius:10px; background:#eef2ff; color:#4338ca; font:800 1rem 'Sarabun',sans-serif; cursor:pointer; padding:0; }
.pp-menu-scale button:hover:not(:disabled) { background:#c7d2fe; }
.pp-menu-scale button:disabled { opacity:.4; cursor:default; }
.pp-menu-scale button:first-of-type { font-size:.85rem; }
.pp-menu-scale button:last-of-type { font-size:1.15rem; }
.pp-bottombar { position:absolute; left:0; right:0; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:8; pointer-events:none; }
.pp-quest-board { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(560px, calc(100% - 470px)); pointer-events:none; text-align:center; padding:8px 20px 10px; border-radius:14px; background:linear-gradient(180deg,#fffbeb,#fef3c7); border:3px solid var(--pp-wood); box-shadow:0 4px 0 var(--pp-wood-dark), 0 8px 16px rgba(63,36,10,.25); }
.pp-quest-board span { display:block; font-size:.68rem; color:#92400e; font-weight:700; }
.pp-quest-board strong { display:block; font-size:clamp(1.3rem,4.4vh,2.1rem); line-height:1.25; color:#431407; }
.pp-quest-board small { display:block; font-size:.66rem; color:#b45309; margin-top:2px; }
.pp-session-drop { margin-left:auto; background:rgba(255,255,255,.95); border-radius:12px; padding:7px 12px; box-shadow:0 2px 6px rgba(31,41,55,.18); display:grid; grid-template-columns:auto auto; column-gap:6px; align-items:center; }
.pp-session-drop i { color:#0ea5e9; }
.pp-session-drop b { font-size:1.05rem; }
.pp-session-drop span { grid-column:1/3; font-size:.6rem; color:var(--pp-muted); text-align:center; }

/* ---------- เอฟเฟกต์ ---------- */
.pp-float { position:absolute; z-index:9; transform:translate(-50%,-100%); padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.94); color:#b45309; font-weight:800; font-size:.85rem; box-shadow:0 2px 6px rgba(63,36,10,.2); pointer-events:none; animation:ppFloatUp 1.15s ease-out forwards; white-space:nowrap; }
@keyframes ppFloatUp { to { transform:translate(-50%,-220%); opacity:0; } }
.pp-petal-burst { position:absolute; z-index:8; pointer-events:none; }
.pp-petal-burst i { position:absolute; width:12px; height:16px; border-radius:50% 50% 50% 4px; background:linear-gradient(180deg,#fbcfe8,#f472b6); transform:rotate(var(--pp-angle)); animation:ppPetal .95s ease-out forwards; }
@keyframes ppPetal { from { transform:rotate(var(--pp-angle)) translateY(0); opacity:1; } to { transform:rotate(var(--pp-angle)) translateY(-72px); opacity:0; } }
.pp-novice { position:absolute; left:calc(10px + env(safe-area-inset-left,0px)); bottom:72px; height:clamp(80px,16vh,140px); z-index:6; filter:drop-shadow(0 3px 3px rgba(63,36,10,.3)); pointer-events:none; }
.pp-novice.is-cheer { animation:ppCheer .45s ease-out 2; }
@keyframes ppCheer { 50% { transform:translateY(-9px) rotate(-2deg); } }

/* ---------- ปุ่มระหว่างเล่น ---------- */
.pp-play-buttons { position:absolute; right:calc(12px + env(safe-area-inset-right,0px)); bottom:0; display:flex; gap:10px; align-items:center; pointer-events:auto; }
.pp-pause, .pp-norush { border:3px solid rgba(255,255,255,.92); border-radius:999px; min-height:52px; padding:0 18px; display:flex; gap:8px; align-items:center; color:#fff; font-weight:800; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.22); }
.pp-pause { background:var(--pp-indigo); }
.pp-norush { background:rgba(49,46,129,.72); }
.pp-norush.is-on { background:var(--pp-green); }

/* ---------- ฉากครอบ (ปก/อุ่นเครื่อง/ผล) ---------- */
.pp-cover { position:absolute; inset:0; z-index:15; display:grid; place-items:center; padding:14px; background:rgba(30,27,75,.62); overflow:auto; }
.pp-cover-light { background:rgba(30,27,75,.38); }
.pp-start { min-height:50px; border:0; border-radius:12px; background:var(--pp-indigo); color:#fff; font-weight:800; font-size:1rem; cursor:pointer; box-shadow:0 4px 8px rgba(79,70,229,.25); padding:0 22px; }
.pp-start i { margin-right:8px; }
.pp-start:hover { background:#4338ca; }

/* ปก */
.pp-intro { width:min(880px,100%); max-height:calc(100dvh - 92px); overflow:auto; display:grid; grid-template-columns:230px 1fr; align-items:end; background:linear-gradient(135deg,#eef2ff,#fff 58%); border-radius:16px; box-shadow:0 16px 40px rgba(15,23,42,.3); }
.pp-intro>img { width:100%; max-height:400px; object-fit:contain; align-self:end; }
.pp-intro>div { padding:26px 30px 26px 6px; }
.pp-intro span { color:#4338ca; font-size:.75rem; font-weight:800; }
.pp-intro h1 { margin:4px 0 10px; color:var(--pp-ink); font-size:1.7rem; }
.pp-intro p { margin:0; color:#374151; font-size:.98rem; line-height:1.65; }
.pp-intro ul { margin:14px 0; padding:0; list-style:none; display:grid; gap:7px; color:var(--pp-muted); font-size:.82rem; }
.pp-intro li i { width:24px; color:var(--pp-indigo); }
.pp-levels-head { margin:0 0 8px; color:var(--pp-muted); font-size:.72rem; line-height:1.5; }
.pp-levels-head b { color:#047857; }
.pp-levels { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 14px; max-height:min(240px,30vh); overflow:auto; padding-right:4px; }
.pp-level-card { text-align:left; padding:11px 13px; border-radius:12px; background:#f8fafc; border:2px solid #e5e7eb; cursor:pointer; }
.pp-level-card b { display:block; color:var(--pp-indigo-dark); font-size:.85rem; }
.pp-level-card span { display:block; margin:4px 0; color:#4338ca; font-weight:800; font-size:.98rem; }
.pp-level-card small { display:block; color:var(--pp-muted); font-size:.68rem; line-height:1.45; }
.pp-level-card.is-active { background:#eef2ff; border-color:var(--pp-indigo); box-shadow:0 0 0 2px rgba(79,70,229,.15); }
.pp-level-card.is-locked { cursor:default; opacity:.75; }
.pp-level-card.is-locked span { color:#94a3b8; font-weight:700; font-size:.78rem; }
.pp-level-card.is-locked span i { margin-right:5px; }
.pp-level-card.is-done b i { color:#059669; margin-left:4px; }
.pp-level-card b i.fa-seedling { color:#cbd5e1; margin-left:4px; }
.pp-next-level { background:var(--pp-green); }
.pp-next-level:hover { background:#047857; }
.pp-sync-note { margin:-6px 0 14px; font-size:.75rem; color:var(--pp-muted); }
.pp-sync-note.is-ok { color:#047857; font-weight:700; }
.pp-sync-note a { color:#4338ca; font-weight:700; }
/* กระดานคะแนน */
.pp-rank-body { padding:12px 18px 18px; }
.pp-rank-list { list-style:none; margin:0; padding:0; }
.pp-rank-list li { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; }
.pp-rank-list li:nth-child(odd) { background:#f8fafc; }
.pp-rank-list li.is-me { background:#eef2ff; box-shadow:inset 0 0 0 2px #c7d2fe; }
.pp-rank-no { width:30px; text-align:center; color:#b45309; font-size:1.05rem; }
.pp-rank-list li:nth-child(1) .pp-rank-no { color:#d97706; font-size:1.25rem; }
.pp-rank-name { flex:1; font-weight:700; color:#1f2937; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-rank-level { color:#94a3b8; font-size:.7rem; }
.pp-rank-drops { color:#0284c7; white-space:nowrap; }
.pp-rank-drops i { margin-right:4px; }
.pp-rank-me { margin:12px 0 0; padding:10px 12px; border-radius:10px; background:#ecfdf5; color:#047857; font-weight:700; font-size:.85rem; }
.pp-rank-note { margin:8px 0; color:var(--pp-muted); font-size:.85rem; text-align:center; }
.pp-rank-note a { color:#4338ca; font-weight:700; }
.pp-intro .pp-start { width:100%; }
.pp-back-map { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:8px; border-radius:12px; background:#eef2ff; color:#4338ca; font-weight:800; font-size:.88rem; text-decoration:none; }
.pp-back-map:hover { background:#e0e7ff; }
.pp-intro-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.pp-intro-links button { min-height:38px; border:0; border-radius:10px; background:#f8fafc; color:var(--pp-muted); font-weight:700; font-size:.72rem; padding:0 12px; cursor:pointer; }
.pp-intro-links button:hover { background:#eef2ff; color:#4338ca; }
.pp-intro-links button.is-on { background:#d1fae5; color:#047857; }
.pp-arenas { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.pp-arenas span { padding:6px 12px; border-radius:999px; font-size:.7rem; font-weight:700; background:#f1f5f9; color:#94a3b8; }
.pp-arenas span.is-open { background:#d1fae5; color:#047857; }
.pp-arenas span.is-open i { margin-right:5px; }

/* อุ่นเครื่อง */
.pp-warmup { width:min(860px,100%); max-height:calc(100dvh - 92px); overflow:auto; background:#fff; border-radius:16px; padding:20px 22px; box-shadow:0 16px 40px rgba(15,23,42,.3); }
.pp-warmup header { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:14px; }
.pp-warmup header span { color:#4338ca; font-size:.72rem; font-weight:800; }
.pp-warmup h2 { margin:2px 0 0; font-size:1.25rem; }
.pp-warmup header p { margin:0; color:var(--pp-muted); font-size:.76rem; }
.pp-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pp-card { position:relative; min-height:clamp(74px,17vh,116px); border:0; border-radius:12px; background:transparent; cursor:pointer; perspective:600px; padding:0; }
.pp-card-back, .pp-card-face { position:absolute; inset:0; display:grid; place-items:center; border-radius:12px; transition:opacity .22s, transform .22s; }
.pp-card-back { background:linear-gradient(160deg,#0d9488,#115e59); color:#99f6e4; font-size:1.5rem; box-shadow:0 3px 6px rgba(19,78,74,.3); }
.pp-card.is-root .pp-card-back { background:linear-gradient(160deg,var(--pp-indigo),var(--pp-indigo-dark)); color:#c7d2fe; box-shadow:0 3px 6px rgba(49,46,129,.3); }
.pp-card-face { background:var(--pp-paper); border:2px solid #fcd34d; color:#431407; font-weight:800; font-size:1rem; padding:6px; opacity:0; transform:scale(.92); line-height:1.3; text-align:center; }
.pp-card.is-root .pp-card-face { font-size:1.6rem; color:#4338ca; border-color:#c7d2fe; background:#eef2ff; }
.pp-card.is-open .pp-card-back { opacity:0; }
.pp-card.is-open .pp-card-face { opacity:1; transform:scale(1); }
.pp-card.is-matched .pp-card-face { background:#ecfdf5; border-color:#6ee7b7; color:#047857; }
.pp-card.is-matched.is-root .pp-card-face { color:#047857; }
.pp-warmup footer { margin-top:16px; min-height:50px; display:flex; justify-content:center; }
/* ธาตุลม: ลมพัดการ์ดพลิกกลับ + ใบไม้ปลิวข้ามจอ */
.pp-card.is-blown { animation:ppBlow 1s ease-in-out; }
@keyframes ppBlow {
	20% { transform:rotate(-7deg) translateX(-6px); }
	45% { transform:rotate(9deg) translateX(10px) translateY(-6px); }
	70% { transform:rotate(-5deg) translateX(-4px); }
	100% { transform:rotate(0) translateX(0); }
}
.pp-leaf { position:absolute; left:-30px; z-index:22; border-radius:60% 5% 60% 5%; background:linear-gradient(135deg,#86efac,#16a34a); opacity:0; animation:ppLeafFly 1.5s ease-in forwards; pointer-events:none; }
@keyframes ppLeafFly {
	0% { transform:translateX(0) rotate(0) ; opacity:0; }
	10% { opacity:1; }
	100% { transform:translateX(110vw) translateY(-14vh) rotate(720deg); opacity:0; }
}
.pp-skip { border:0; background:transparent; color:#94a3b8; font-size:.75rem; cursor:pointer; text-decoration:underline; }
.pp-skip:hover { color:#4338ca; }

/* ผลท้ายรอบ */
.pp-result { width:min(880px,100%); max-height:calc(100dvh - 92px); overflow:auto; background:#fff; border-radius:16px; padding:24px 26px; box-shadow:0 16px 40px rgba(15,23,42,.3); text-align:center; }
.pp-result-badge { width:62px; height:62px; margin:0 auto 8px; display:grid; place-items:center; border-radius:50%; background:#e0f2fe; color:#0284c7; font-size:1.7rem; }
.pp-result>span { color:#0369a1; font-size:.78rem; font-weight:800; }
.pp-result h2 { margin:6px 0 16px; font-size:1.4rem; }
.pp-result-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; }
.pp-result-cols>div { border:2px solid #e5e7eb; border-radius:14px; padding:14px 16px; }
.pp-result-cols h3 { margin:0 0 10px; font-size:.9rem; color:var(--pp-indigo-dark); }
.pp-result-cols h3 i { margin-right:6px; color:var(--pp-gold); }
.pp-result-cols ul { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.pp-result-cols li { display:flex; align-items:center; gap:10px; }
.pp-result-cols li b { font-size:1.2rem; color:#4338ca; min-width:44px; }
.pp-result-cols li span { flex:1; color:#374151; font-size:.85rem; }
.pp-result-cols li button { border:0; border-radius:8px; background:#eef2ff; color:#4338ca; font-weight:700; font-size:.7rem; padding:7px 10px; cursor:pointer; }
.pp-result-cols p { margin:0; color:#6b7280; font-size:.8rem; }
.pp-result-cols small { display:block; margin-top:10px; color:#9ca3af; font-size:.68rem; }
.pp-drops-row i { font-size:.72rem; color:#e5e7eb; margin-left:2px; }
.pp-drops-row i.is-on { color:#0ea5e9; }
.pp-drops-center { display:block; text-align:center; margin:10px 0 16px; }
.pp-drops-center i { font-size:1rem; }
.pp-teacher-line { display:flex; align-items:center; justify-content:center; gap:10px; margin:18px 0 14px; color:#374151; font-size:.92rem; }
.pp-teacher-line img { height:52px; }
.pp-result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.pp-result-actions button:not(.pp-start) { min-height:50px; border:0; border-radius:12px; background:#eef2ff; color:#4338ca; font-weight:800; padding:0 18px; cursor:pointer; }
.pp-result-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.pp-result-link.pp-plain-action { background:#eef2ff; color:#4338ca; box-shadow:none; }
.pp-result-link.pp-plain-action:hover { background:#e0e7ff; }

/* ---------- กล่องกลาง (ตัดการเดา/พัก/บัตร/สมุด) ---------- */
.pp-modal-backdrop { position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:16px; background:rgba(15,23,42,.5); }
.pp-calm { width:min(520px,100%); max-height:calc(100dvh - 92px); overflow:auto; background:#fff; border-radius:16px; padding:22px; box-shadow:0 12px 32px rgba(15,23,42,.28); text-align:center; }
.pp-calm-tag { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; background:#d1fae5; color:#047857; font-size:.75rem; font-weight:800; margin-bottom:14px; }
.pp-know-card { display:flex; align-items:center; gap:16px; text-align:left; padding:16px 18px; border-radius:14px; background:var(--pp-paper); border:2px solid #fcd34d; margin-bottom:14px; }
.pp-know-card>b { font-size:2.2rem; color:#4338ca; }
.pp-know-card strong { display:block; font-size:1.05rem; color:#431407; }
.pp-know-card span { display:block; color:var(--pp-muted); font-size:.75rem; margin-top:3px; }
.pp-calm p { margin:0 0 14px; color:#374151; font-size:.92rem; }
.pp-calm-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pp-calm-choices button { min-height:58px; border:2px solid #e5e7eb; border-radius:12px; background:#fff; color:#4338ca; font-size:1.4rem; font-weight:800; cursor:pointer; transition:transform .12s; }
.pp-calm-choices button:hover { border-color:#a5b4fc; background:#eef2ff; }
.pp-calm-choices button.is-wrong { animation:ppWiggle .4s ease; border-color:#fcd34d; background:var(--pp-paper); }
@keyframes ppWiggle { 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }
.pp-calm .pp-start { margin-top:4px; }
.pp-pausebox { width:min(440px,100%); background:#fff; border-radius:16px; padding:24px; box-shadow:0 12px 32px rgba(15,23,42,.28); text-align:center; }
.pp-pausebox h2 { margin:0 0 6px; font-size:1.3rem; }
.pp-pausebox>p { margin:0 0 16px; color:var(--pp-muted); font-size:.85rem; }
.pp-pause-settings { display:grid; gap:8px; margin-bottom:16px; }
.pp-pause-settings button { display:flex; align-items:center; gap:10px; min-height:48px; border:2px solid #e5e7eb; border-radius:12px; background:#fff; color:#374151; font-weight:700; font-size:.85rem; padding:0 14px; cursor:pointer; }
.pp-pause-settings button b { margin-left:auto; color:#94a3b8; }
.pp-pause-settings button.is-on { border-color:#6ee7b7; background:#ecfdf5; }
.pp-pause-settings button.is-on b { color:#047857; }
.pp-pausebox .pp-start { width:100%; }
.pp-quit { display:block; width:100%; margin-top:10px; border:0; background:transparent; color:#94a3b8; font-size:.75rem; cursor:pointer; text-decoration:underline; }
.pp-book { width:min(560px,100%); max-height:calc(100dvh - 92px); overflow:auto; background:#fff; border-radius:16px; box-shadow:0 12px 32px rgba(15,23,42,.28); }
.pp-book header { position:sticky; top:0; background:#fff; display:flex; justify-content:space-between; align-items:center; padding:18px; border-bottom:1px solid #e5e7eb; }
.pp-book header span { color:#6b7280; font-size:.72rem; }
.pp-book h2 { margin:2px 0 0; font-size:1.2rem; }
.pp-book header button { width:42px; height:42px; border:0; border-radius:12px; color:#4338ca; background:#eef2ff; cursor:pointer; }
.pp-book-group { padding:6px 18px 14px; }
.pp-book-group h3 { margin:10px 0 4px; font-size:.78rem; color:#0369a1; }
.pp-book-group article { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid #f1f5f9; }
.pp-book-group article>b { font-size:1.4rem; color:#4338ca; }
.pp-book-group strong { display:block; font-size:.92rem; }
.pp-book-group article span { color:#6b7280; font-size:.72rem; }

/* ---------- เกมธาตุน้ำ: น้ำใสเห็นธาตุแท้ ---------- */
.pw-quest { position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:8; width:min(560px, calc(100% - 24px)); text-align:center; padding:10px 20px 12px; border-radius:16px; background:rgba(255,255,255,.93); border:3px solid #38bdf8; box-shadow:0 4px 0 #0284c7, 0 8px 18px rgba(2,132,199,.3); }
.pw-quest span { display:block; font-size:.68rem; color:#0369a1; font-weight:700; }
.pw-quest strong { display:block; font-size:clamp(1.5rem,5.4vh,2.3rem); line-height:1.6; margin:2px 0; color:#0c4a6e; }
.pw-quest em { display:block; font-style:normal; color:#334155; font-size:.95rem; line-height:1.5; margin-top:3px; }
.pw-quest small { display:block; font-size:.64rem; color:#0284c7; margin-top:5px; }
.pw-stone { position:absolute; transform:translate(-50%,-50%); z-index:5; width:clamp(88px,14vw,150px); aspect-ratio:1; border:0; border-radius:46% 54% 50% 50% / 52% 48% 52% 48%; background:radial-gradient(circle at 34% 30%, #e0f2fe, #0ea5e9 82%); box-shadow:inset 0 -6px 12px rgba(3,105,161,.4), 0 5px 12px rgba(8,47,73,.35); cursor:pointer; color:#fff; transition:transform .15s; }
.pw-stone b { font-size:clamp(1.35rem,4.8vh,2.1rem); font-weight:800; text-shadow:0 2px 3px rgba(15,23,42,.5); }
.pw-stone i { display:block; font-style:normal; font-size:.72rem; font-weight:700; color:#fef9c3; margin-top:2px; }
.pw-stone:hover { transform:translate(-50%,-52%) scale(1.04); }
/* ก้อนธาตุหลากสีพาสเทล (วนตาม index) */
.pw-stone.pw-tone-0 { background:radial-gradient(circle at 34% 30%, #e0f2fe, #0ea5e9 82%); box-shadow:inset 0 -6px 12px rgba(3,105,161,.4), 0 5px 12px rgba(8,47,73,.35); }
.pw-stone.pw-tone-1 { background:radial-gradient(circle at 34% 30%, #d1fae5, #10b981 82%); box-shadow:inset 0 -6px 12px rgba(4,120,87,.4), 0 5px 12px rgba(8,47,73,.35); }
.pw-stone.pw-tone-2 { background:radial-gradient(circle at 34% 30%, #fce7f3, #ec4899 82%); box-shadow:inset 0 -6px 12px rgba(190,24,93,.4), 0 5px 12px rgba(8,47,73,.35); }
.pw-stone.pw-tone-3 { background:radial-gradient(circle at 34% 30%, #ede9fe, #8b5cf6 82%); box-shadow:inset 0 -6px 12px rgba(109,40,217,.4), 0 5px 12px rgba(8,47,73,.35); }
.pw-stone.is-correct { background:radial-gradient(circle at 34% 30%, #fef08a, #d97706 80%) !important; animation:pwGlow .9s ease-out; }
.pw-stone.is-wrong { background:radial-gradient(circle at 34% 30%, #94a3b8, #475569 80%); }
@keyframes pwGlow { 40% { transform:translate(-50%,-56%) scale(1.12); box-shadow:0 0 0 12px rgba(254,240,138,.45), 0 5px 12px rgba(8,47,73,.35); } }
.pw-ripple { position:absolute; inset:-14%; border:3px solid rgba(224,242,254,.9); border-radius:50%; animation:pwRipple 1s ease-out 2; pointer-events:none; }
@keyframes pwRipple { from { transform:scale(.7); opacity:1; } to { transform:scale(1.6); opacity:0; } }

/* ---------- เกมธาตุไฟ: ครัวไฟปรุงศัพท์ ---------- */
.pf-order { position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:8; width:min(600px, calc(100% - 24px)); text-align:center; padding:9px 20px 11px; border-radius:16px; background:linear-gradient(180deg,#451a03,#7c2d12); border:3px solid #f59e0b; color:#fff7ed; box-shadow:0 4px 0 #78350f, 0 8px 18px rgba(69,26,3,.5); }
.pf-order span { display:block; font-size:calc(.8rem * var(--pf-tscale,1)); color:#fdba74; font-weight:700; }
.pf-order strong { display:block; font-size:calc(clamp(1.2rem,4.4vh,1.8rem) * var(--pf-tscale,1)); line-height:1.6; margin:2px 0; }
.pf-order small { display:block; font-size:calc(.86rem * var(--pf-tscale,1)); color:#fed7aa; margin-top:5px; line-height:1.55; }
.pf-pot { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:8; display:flex; gap:8px; align-items:center; padding:12px; border-radius:16px; background:rgba(69,26,3,.82); box-shadow:0 8px 20px rgba(0,0,0,.4); }
.pf-slot { width:clamp(74px,10vw,100px); padding:8px 6px 10px; border-radius:12px; background:#fff7ed; text-align:center; border:2px dashed #d6d3d1; }
.pf-slot.is-filled { border-style:solid; border-color:#f59e0b; background:#fef3c7; }
.pf-slot.is-shake { animation:ppWiggle .4s ease 2; border-color:#9ca3af; background:#f1f5f9; }
.pf-slot span { display:block; font-size:calc(.74rem * var(--pf-tscale,1)); color:#78716c; font-weight:700; }
.pf-slot b { display:block; font-size:calc(clamp(1.1rem,3.6vh,1.5rem) * var(--pf-tscale,1)); color:#431407; min-height:1.3em; }
.pf-cook { min-height:56px; border:3px solid rgba(255,247,237,.85); border-radius:14px; padding:0 18px; background:linear-gradient(180deg,#f97316,#dc2626); color:#fff; font-weight:800; font-size:1rem; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.35); }
.pf-cook:disabled { opacity:.55; cursor:default; }
.pf-cook i { margin-right:6px; }
.pf-shelves { position:absolute; left:50%; bottom:calc(12px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:8; width:min(680px, calc(100% - 150px)); display:grid; gap:7px; padding:12px 14px; border-radius:16px; background:rgba(255,251,235,.94); box-shadow:0 6px 16px rgba(69,26,3,.35); }
.pf-shelf { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.pf-shelf-label { width:52px; font-size:calc(.78rem * var(--pf-tscale,1)); font-weight:800; color:#78350f; }
.pf-ingredient { min-width:64px; min-height:44px; border:2px solid #e7e5e4; border-radius:10px; background:#fff; color:#431407; font-weight:800; font-size:calc(1.08rem * var(--pf-tscale,1)); padding:0 12px; cursor:pointer; transition:transform .1s; }
.pf-ingredient:hover { border-color:#fbbf24; }
.pf-ingredient.is-picked { border-color:#f59e0b; background:#fef3c7; transform:scale(1.06); }
.pf-smoke { position:absolute; left:50%; top:34%; transform:translateX(-50%); z-index:9; font-size:3.4rem; color:#57534e; animation:pfSmoke .9s ease-out forwards; pointer-events:none; }
@keyframes pfSmoke { from { opacity:0; } 30% { opacity:.95; } to { opacity:0; transform:translateX(-50%) translateY(-46px) scale(1.35); } }
.pf-served .pf-formula { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:6px 0 12px; }
.pf-formula b { font-size:1.5rem; color:#78350f; background:#fef3c7; border-radius:10px; padding:4px 12px; }
.pf-formula i { font-style:normal; color:#a8a29e; font-weight:800; }
.pf-formula em { font-style:normal; color:#dc2626; }
.pf-formula strong { font-size:1.9rem; color:#dc2626; background:#fee2e2; border-radius:12px; padding:6px 16px; }
/* ---------- เกมโต๊ะผสมธาตุ ---------- */
.pm-field { aspect-ratio:1672/941; width:max(100%, calc(100vh * 1.777)); width:max(100%, calc(100dvh * 1.777)); filter:blur(2px) brightness(.92); }
.pm-order { background:linear-gradient(180deg,#3b0764,#6d28d9); border-color:#a78bfa; box-shadow:0 4px 0 #4c1d95, 0 8px 18px rgba(59,7,100,.5); }
.pm-order span { color:#ddd6fe; }
.pm-order small { color:#ede9fe; }
.pm-table { background:rgba(59,7,100,.85); }
.pm-plus { font-style:normal; color:#ddd6fe; font-weight:800; font-size:1.3rem; }
.pm-mix-btn { background:linear-gradient(180deg,#8b5cf6,#6d28d9); }
.pm-word { color:#6d28d9 !important; background:#ede9fe !important; }
.pm-extra { font-size:.8rem; color:#6b7280; }
.pm-extra i { color:#8b5cf6; margin-right:4px; }
.pm-steps { margin:10px auto 4px; max-width:440px; text-align:left; background:#faf5ff; border:1.5px solid #ddd6fe; border-radius:12px; padding:10px 14px; }
.pm-steps-head { display:block; font-size:.8rem; color:#6d28d9; font-weight:800; }
.pm-steps-head b { font-size:.92rem; color:#4c1d95; }
.pm-steps-head i { margin-right:4px; }
.pm-steps ol { margin:6px 0 0 4px; padding-left:18px; display:grid; gap:3px; }
.pm-steps ol li { font-size:.82rem; color:#44403c; }
.pm-steps small { display:block; margin-top:6px; font-size:.68rem; color:#a1a1aa; }
.pm-alt { margin:8px auto 2px; max-width:440px; text-align:left; font-size:.78rem; color:#57534e; }
.pm-alt span { font-weight:800; color:#0e7490; margin-right:4px; }
.pm-alt em { display:block; font-style:normal; margin-top:2px; padding-left:16px; }
.pm-alt em b { color:#0e7490; }
.pp-plain-link { display:inline-flex; align-items:center; gap:6px; min-height:38px; border-radius:10px; background:#f8fafc; color:var(--pp-muted); font-weight:700; font-size:.72rem; padding:0 12px; text-decoration:none; }
.pp-plain-link:hover { background:#eef2ff; color:#4338ca; }
@media (max-height:560px) {
	.pf-pot { top:44%; padding:8px; }
	.pf-shelves { gap:4px; padding:8px 10px; width:min(680px, calc(100% - 130px)); }
	.pf-ingredient { min-height:38px; font-size:.92rem; }
	.pw-quest { padding:5px 14px 7px; }
	.pw-quest strong { font-size:1.25rem; }
	.pw-quest em { font-size:.78rem; }
	.pw-quest small { display:none; }
}

/* ---------- จอเล็ก ---------- */
@media (max-width:900px) {
	.pp-quest-board { padding:6px 12px 8px; border-width:2px; }
	.pp-hearts, .pp-session-drop { padding:5px 8px; }
	.pp-intro { grid-template-columns:120px 1fr; align-items:center; }
	.pp-intro>img { max-height:250px; }
	.pp-intro>div { padding:18px 16px 18px 0; }
	.pp-intro h1 { font-size:1.3rem; }
	.pp-intro ul { display:none; }
	.pp-result-cols { grid-template-columns:1fr; }
	.pp-pause, .pp-norush { min-height:46px; padding:0 14px; font-size:.8rem; }
	.pp-novice { display:none; }
	.pp-cards { gap:7px; }
}
@media (max-height:560px) {
	.pp-warmup { padding:12px 14px; }
	.pp-warmup header { margin-bottom:8px; }
	.pp-cards { gap:6px; }
	.pp-warmup footer { margin-top:8px; min-height:42px; }
	.pp-intro>img { max-height:210px; }
	/* จอเตี้ย: โพรงเล็กลง กระดานโจทย์และปุ่มกะทัดรัด */
	.pp-burrow { width:12%; }
	.pp-quest-board { padding:4px 12px 6px; border-width:2px; box-shadow:0 3px 0 var(--pp-wood-dark), 0 5px 10px rgba(63,36,10,.25); }
	.pp-quest-board span { font-size:.58rem; }
	.pp-quest-board strong { font-size:1.15rem; }
	.pp-quest-board small { font-size:.58rem; margin-top:0; }
	.pp-hearts { display:none; }
	.pp-session-drop { padding:4px 8px; }
	.pp-pause, .pp-norush { min-height:40px; padding:0 12px; font-size:.75rem; border-width:2px; }
	.pp-menu-btn { width:46px; height:46px; font-size:1rem; }
	.pp-menu-pop { bottom:56px; }
	.pp-quest-board { width:min(560px, calc(100% - 400px)); }
}
/* แจ้งเตือนหมุนจอแบบไม่บล็อก (แทน .pp-app::after เดิม) — คุมด้วย pp-orient.js
   พอร์ตเทรต+จอแคบ = โชว์ · กด "เข้าเล่นเลย" = เข้าเล่นแม้ไม่หมุน · หมุนแนวนอน = ปิดเอง */
.pp-orient-notice { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:28px; background:rgba(30,27,75,.94); }
.pp-orient-notice[hidden] { display:none; }
.pp-orient-card { width:min(360px,100%); text-align:center; color:#fff; background:linear-gradient(180deg,#4338ca,#312e81); border:2px solid rgba(255,255,255,.18); border-radius:20px; padding:28px 24px; box-shadow:0 16px 40px rgba(15,23,42,.5); }
.pp-orient-rotate { font-size:2.6rem; color:#fbbf24; display:block; margin-bottom:12px; animation:ppOrientTilt 1.8s ease-in-out infinite; }
.pp-orient-card strong { display:block; font-size:1.15rem; line-height:1.5; }
.pp-orient-card p { margin:8px 0 18px; font-size:.9rem; color:#c7d2fe; line-height:1.6; }
.pp-orient-go { min-height:48px; padding:0 26px; border:0; border-radius:999px; background:#fbbf24; color:#4a2c00; font:800 1rem 'Sarabun',sans-serif; cursor:pointer; box-shadow:0 4px 0 #b45309; }
.pp-orient-go i { margin-right:6px; }
@keyframes ppOrientTilt { 0%,100% { transform:rotate(-12deg); } 50% { transform:rotate(12deg); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }