/* ศาลายาวาจก — สไตล์เฉพาะเกม (ฐานหลักใช้ pali-popup-prototype.css: pp-*, pf-*) */

.pv-order strong { line-height:1.6; }
.pv-vname { font-style:normal; font-weight:900; }

/* หม้อต้มยา */
.pv-pot { position:relative; }
.pv-pot.is-boiling { animation:pv-rumble .18s linear infinite; }
@keyframes pv-rumble { 0%{transform:translate(-50%,0) rotate(-.4deg);} 50%{transform:translate(-50%,1px) rotate(.4deg);} 100%{transform:translate(-50%,0) rotate(-.4deg);} }
.pv-plus { color:#fff; font-style:normal; font-weight:900; font-size:1.3rem; text-shadow:0 2px 4px rgba(0,0,0,.4); }
.pv-brew-btn { background:#0e7490; }
.pv-brew-btn:hover:not(:disabled) { background:#155e75; }

/* ฟองยาเดือด */
.pv-bubbles { position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:120px; height:40px; pointer-events:none; }
.pv-bubbles i { position:absolute; bottom:0; width:12px; height:12px; border-radius:50%; background:rgba(186,230,253,.85); animation:pv-bubble 1.05s ease-in infinite; }
.pv-bubbles i:nth-child(1) { left:8%; animation-delay:0s; }
.pv-bubbles i:nth-child(2) { left:28%; width:9px; height:9px; animation-delay:.18s; }
.pv-bubbles i:nth-child(3) { left:50%; width:14px; height:14px; animation-delay:.32s; }
.pv-bubbles i:nth-child(4) { left:68%; width:8px; height:8px; animation-delay:.5s; }
.pv-bubbles i:nth-child(5) { left:86%; animation-delay:.65s; }
@keyframes pv-bubble { 0%{transform:translateY(0) scale(.6); opacity:0;} 25%{opacity:1;} 100%{transform:translateY(-42px) scale(1.15); opacity:0;} }

/* ขวดตัวยาปัจจัย */
.pv-vial i { margin-right:5px; color:#0e7490; font-size:.85em; }
.pv-vial.is-picked i { color:#fff; }

/* คำใบ้เชิงสอน */
.pv-hint { position:absolute; left:50%; bottom:172px; transform:translateX(-50%); z-index:6; margin:0; max-width:min(560px,92vw); background:#fffbeb; color:#92400e; border:1px solid #fde68a; border-radius:12px; padding:9px 14px; font-size:.88rem; font-weight:700; box-shadow:0 6px 16px rgba(120,53,15,.25); }
.pv-hint i { margin-right:6px; }

/* ขวดยา (ผลปรุง / โจทย์ชิม) */
.pv-bottle { display:flex; flex-direction:column; align-items:center; gap:4px; margin:6px auto 2px; padding:14px 22px 12px; border-radius:16px; background:color-mix(in srgb, var(--pv-color, #0e7490) 12%, #fff); border:2px solid var(--pv-color, #0e7490); max-width:min(440px,90%); }
.pv-bottle i { font-size:1.6rem; color:var(--pv-color, #0e7490); filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.pv-bottle strong { font-size:1.7rem; line-height:1.5; color:#1f2937; }
.pv-bottle em { font-style:normal; font-weight:700; color:#374151; }
.pv-bottle-lg strong { font-size:1.9rem; }
.pv-chip { display:inline-block; color:#fff; font-weight:800; font-size:.78rem; border-radius:999px; padding:2px 10px; }
.pv-formula strong { color:#0e7490; }
.pv-sample { background:#f0fdfa; border:1px solid #ccfbf1; border-radius:10px; padding:8px 12px; color:#134e4a; font-size:.88rem; line-height:1.8; }

/* โหมดชิมยา */
.pv-taste-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-46%); z-index:5; width:min(620px,94vw); background:rgba(255,255,255,.96); border-radius:18px; box-shadow:0 14px 36px rgba(15,23,42,.3); padding:18px 20px 20px; text-align:center; }
.pv-q { display:block; margin:12px 0 10px; font-weight:900; color:#1f2937; }
.pv-answers { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.pv-vacaka-btn { min-height:46px; border:2px solid var(--pv-color, #94a3b8); border-radius:12px; background:#fff; color:var(--pv-color, #334155); font-weight:800; font-size:.92rem; padding:8px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:transform .12s ease; }
.pv-vacaka-btn:hover { transform:translateY(-2px); background:color-mix(in srgb, var(--pv-color, #94a3b8) 10%, #fff); }
.pv-vacaka-btn.is-wrong { animation:pv-shake .35s ease; border-color:#dc2626; color:#dc2626; opacity:.55; }
.pv-pac-btn { --pv-color:#0e7490; font-size:1.05rem; }
@keyframes pv-shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.pv-taste-explain { margin:12px auto 14px; max-width:52ch; color:#374151; line-height:1.9; }

/* ตำรับยา ๕ ใบ */
.pv-tamrap-cover { overflow:auto; }
.pv-tamrap { width:min(860px,96vw); max-height:92dvh; overflow:auto; background:#fffdf5; border-radius:18px; box-shadow:0 16px 40px rgba(15,23,42,.35); padding:0 0 18px; }
.pv-tamrap header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:16px 20px 12px; background:#fffdf5; border-bottom:1px solid #f3e8d2; }
.pv-tamrap header span { color:#a16207; font-size:.74rem; font-weight:800; }
.pv-tamrap h2 { margin:2px 0 0; font-size:1.3rem; color:#713f12; }
.pv-tamrap header button { width:40px; height:40px; border:0; border-radius:12px; color:#a16207; background:#fef3c7; cursor:pointer; }
.pv-tamrap-intro { margin:12px 20px 4px; color:#57534e; line-height:1.9; }
.pv-tamrap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; padding:12px 20px 6px; }
.pv-tamrap-grid article { border:2px solid var(--pv-color, #d6d3d1); border-radius:14px; padding:12px 14px; background:color-mix(in srgb, var(--pv-color, #d6d3d1) 6%, #fff); }
.pv-tamrap-grid h3 { margin:0 0 6px; font-size:1.02rem; color:var(--pv-color, #334155); display:flex; align-items:center; gap:8px; }
.pv-t-says, .pv-t-pacc { margin:4px 0; color:#44403c; font-size:.88rem; }
.pv-t-pacc i { color:var(--pv-color, #334155); margin-right:4px; }
.pv-t-ex { margin:8px 0 0; background:#fff; border:1px dashed color-mix(in srgb, var(--pv-color, #a8a29e) 50%, #fff); border-radius:10px; padding:8px 10px; font-size:.86rem; line-height:1.85; color:#292524; }
.pv-tamrap .pp-result-actions { padding:10px 20px 0; }

/* หน้าปก: ชั้นขวดยา + ปุ่ม ๓ โหมด */
.pv-shelf-stat { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 2px; }
.pv-shelf-bottle { display:inline-flex; align-items:center; gap:5px; border:1.5px solid var(--pv-color, #94a3b8); color:var(--pv-color, #334155); border-radius:999px; padding:3px 11px; font-size:.76rem; font-weight:800; background:color-mix(in srgb, var(--pv-color, #94a3b8) 8%, #fff); }
.pv-shelf-bottle b { font-size:.85rem; }
.pv-intro-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.pv-intro-actions .pp-start { flex:1 1 160px; margin:0; }
.pv-btn-brew { background:#0e7490; }
.pv-btn-brew:hover:not(:disabled) { background:#155e75; }
.pv-btn-taste { background:#7c3aed; }
.pv-btn-taste:hover:not(:disabled) { background:#6d28d9; }

@media (max-width:640px) {
	.pv-taste-card { top:auto; bottom:10px; transform:translateX(-50%); max-height:78dvh; overflow:auto; }
	.pv-hint { bottom:150px; font-size:.8rem; }
	.pv-bottle strong { font-size:1.45rem; }
}

/* จุดสังเกตปัจจัยในคำ: ชิปแยกส่วนประกอบ — ตัวยา highlight แดง */
.pv-t-spot { margin:8px 0 0; background:#fff; border:1px solid #fecaca; border-radius:10px; padding:8px 10px; }
.pv-spot-chips { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.pv-spot-chips b { display:inline-block; min-width:26px; text-align:center; padding:2px 7px; border-radius:8px; background:#f5f5f4; border:1.5px solid #d6d3d1; color:#44403c; font-size:.95rem; }
.pv-spot-chips b.is-hl { background:#fef2f2; border-color:#dc2626; color:#dc2626; font-weight:900; box-shadow:0 1px 4px rgba(220,38,38,.2); }
.pv-spot-chips i { color:#a8a29e; font-style:normal; font-weight:800; }
.pv-spot-chips em { color:#78716c; font-style:normal; font-weight:800; margin:0 2px; }
.pv-spot-chips strong { font-size:1.08rem; color:#1f2937; }
.pv-t-spot small, .pv-kitaka-notes small { display:block; margin-top:6px; color:#9f1239; font-size:.76rem; line-height:1.7; }
.pv-t-spot small i, .pv-kitaka-notes small i { margin-right:4px; }

/* กิริยากิตก์ก็มีวาจก */
.pv-kitaka-notes { margin:14px 20px 8px; background:#fffbeb; border:1px solid #fde68a; border-radius:14px; padding:12px 14px; }
.pv-kitaka-notes > h3 { margin:0 0 10px; font-size:.98rem; color:#92400e; display:flex; align-items:center; gap:8px; }
.pv-kitaka-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.pv-kitaka-grid article { background:#fff; border:1px solid #fde68a; border-radius:10px; padding:10px 12px; }
.pv-kitaka-grid h4 { margin:0 0 7px; font-size:.9rem; color:#78350f; }
.pv-kitaka-meaning { margin:5px 0 0; color:#374151; font-weight:700; font-size:.88rem; }

/* ตัวยาปัจจัยในสูตรผลปรุง เด่นเป็นสีแดงเช่นกัน */
.pv-formula i + b { color:#dc2626; }

/* ขวดชิมยา: ฤทธิ์ยาปิดผนึกระหว่างถาม */
.pv-bottle-sealed { color:#8b7355 !important; font-size:.82rem; font-weight:700; opacity:.85; }
.pv-bottle-sealed i { font-size:.75rem; margin-right:5px; filter:none; color:#8b7355; }

/* โครงสร้างศัพท์ในเฉลยชิมยา: ธาตุ + ปัจจัย(แดง) + วิภัตติ(น้ำเงิน) */
.pv-anatomy { margin:12px auto 4px; max-width:min(520px,94%); background:#fafaf9; border:1px solid #e7e5e4; border-radius:12px; padding:10px 14px; }
.pv-anatomy-chips { justify-content:center; }
.pv-spot-chips b.is-vib { background:#eff6ff; border-color:#2563eb; color:#1d4ed8; font-weight:900; box-shadow:0 1px 4px rgba(37,99,235,.2); }
.pv-anatomy-legend { display:flex; flex-direction:column; gap:3px; margin-top:9px; text-align:left; color:#57534e; font-size:.8rem; line-height:1.7; }
.pv-anatomy-legend b { display:inline-block; min-width:30px; text-align:center; border-radius:6px; padding:0 6px; margin-right:5px; font-size:.85rem; }
.pv-lg-dhatu { background:#f5f5f4; border:1px solid #d6d3d1; color:#44403c; }
.pv-lg-pac { background:#fef2f2; border:1px solid #dc2626; color:#dc2626; }
.pv-lg-vib { background:#eff6ff; border:1px solid #2563eb; color:#1d4ed8; }
.pv-f-vib { color:#1d4ed8 !important; }
.pv-vib-line { margin:2px 0 0; color:#44403c; font-size:.84rem; }
.pv-vib-line > b { color:#1d4ed8; }