/* ห้องเรียนอาขยาต (/akhyata-practice/<ด่าน>/study|play) — ชั้นบนสุดต่อจาก akkhara-map.css + akkhara-stage.css (+ akkhara-play.css)
   สีความหมาย (ใช้สีเดียวกันทุกที่: เส้นเวลา ตาราง ป้าย คำสำคัญ ตัวเลือก):
     กลุ่มกาล ๔ — ตามการ์ดในบทเรียนที่ ๔: คราม ปัจจุบัน · เหลือง สั่ง/ควร · แดง อดีต · เขียว อนาคต
     ส่วนประกอบกิริยา — ธาตุ เขียวใบไม้ · ปัจจัย ฟ้า · วิภัตติ ส้มอำพัน (ชุดเดียวกับด่าน ๕ แต่งประโยควาจก)
     บท — ปรัสสบท เขียวน้ำทะเล · อัตตโนบท ม่วง
   คำบาลีในประโยค = ตัวหนาสีคราม (.pw) · คำแปล = เทา */
:root {
	--g-now: #a5b4fc; --g-mood: #fde047; --g-past: #fca5a5; --g-future: #86efac;
	--p-dhatu: #86efac; --p-pacc: #7dd3fc; --p-vib: #fdba74; --p-agama: #c4b5fd;
	--b-para: #5eead4; --b-atta: #c4b5fd;
	--pali: #c7d2fe; --gloss: var(--muted);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
	--g-now: #4338ca; --g-mood: #a16207; --g-past: #b91c1c; --g-future: #15803d;
	--p-dhatu: #15803d; --p-pacc: #0369a1; --p-vib: #c2410c; --p-agama: #7c3aed;
	--b-para: #0f766e; --b-atta: #7c3aed;
	--pali: #3730a3;
} }
:root[data-theme="light"] {
	--g-now: #4338ca; --g-mood: #a16207; --g-past: #b91c1c; --g-future: #15803d;
	--p-dhatu: #15803d; --p-pacc: #0369a1; --p-vib: #c2410c; --p-agama: #7c3aed;
	--b-para: #0f766e; --b-atta: #7c3aed;
	--pali: #3730a3;
}
.hero-art { background-image: url("/assets/game/hub/akhyata.jpg"); background-position: right 46%; }
@media (max-width: 640px) { .hero-art { background-position: 74% 40%; } }

.g-now { --gc: var(--g-now); } .g-mood { --gc: var(--g-mood); } .g-past { --gc: var(--g-past); } .g-future { --gc: var(--g-future); }
.pt-dhatu { --pc: var(--p-dhatu); } .pt-pacc { --pc: var(--p-pacc); } .pt-vib { --pc: var(--p-vib); } .pt-agama { --pc: var(--p-agama); }
.b-para { --bc: var(--b-para); } .b-atta { --bc: var(--b-atta); }
.kw-now { color: var(--g-now); } .kw-past { color: var(--g-past); } .kw-future { color: var(--g-future); }
.kw-para { color: var(--b-para); } .kw-atta { color: var(--b-atta); }
.h-n, .sec h2 em { font-style: normal; color: var(--gold); }
.pw { font-weight: 800; color: var(--pali); white-space: nowrap; }
.pali { font-family: "Thunder Pali", var(--f-body); font-weight: 800; }
.gl-w { display: inline-flex; align-items: baseline; gap: .45rem; min-width: 0; flex-wrap: wrap; }
.gl-w b { font-weight: 800; color: var(--pali); font-size: 1.08rem; white-space: nowrap; }
.gl-m { color: var(--gloss); font-size: .88rem; font-weight: 600; }
.vpill { display: inline-flex; align-items: center; padding: .05rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; flex: none;
	color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); }
.panel { padding: 1.2rem; border-radius: 18px; background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.mini-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold); font-weight: 800; font-size: .88rem; text-decoration: none; }
.mini-link:hover { text-decoration: underline; }
.rulebox { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); color: var(--quote); font-size: .94rem; line-height: 1.7; }
.rulebox b { color: var(--strong); }
.fbody { margin: 0; color: var(--ink2); font-size: .93rem; line-height: 1.7; }
.flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ══ ด่าน ๑ ประกอบคำ ══ */
.asm { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.asm-stage { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.4rem 1.2rem; border-radius: 20px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%), linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.asm-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; }
.asm-piece { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 6.4rem; min-height: 44px; padding: .7rem .9rem; border-radius: 16px; cursor: pointer;
	border: 1.5px solid color-mix(in srgb, var(--pc) 45%, transparent); background: color-mix(in srgb, var(--pc) 10%, transparent); transition: transform .35s, opacity .35s, box-shadow .35s; }
.asm-piece .pali { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.3; color: var(--pc); white-space: nowrap; }
.asm-piece b { font-size: .86rem; font-weight: 800; color: var(--pc); }
.asm-piece small { font-size: .74rem; font-weight: 700; color: var(--dim); }
.asm-piece.off { opacity: .28; transform: scale(.94); }
.asm-piece.on { box-shadow: 0 0 0 2px var(--pc), 0 12px 30px -16px var(--pc); }
.asm-op { font-size: 1.5rem; font-weight: 800; color: var(--dim); }
.asm-word { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 6.5rem; justify-content: center; }
.asm-word .pali { font-size: clamp(3rem, 10vw, 4.4rem); line-height: 1.25; white-space: nowrap; }
.asm-word .pali span { transition: color .35s, opacity .35s; }
.asm-word .pali .ghost { color: color-mix(in srgb, var(--strong) 18%, transparent); }
.asm-word p { margin: 0; color: var(--gloss); font-weight: 700; }
.asm-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.asm-say { margin: 0; text-align: center; max-width: 36em; color: var(--ink2); font-weight: 600; line-height: 1.7; min-height: 3.4em; }
.asm-say b { color: var(--strong); }
.asm-parts { display: flex; flex-direction: column; gap: .55rem; }
.part { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .7rem; align-items: center; padding: .7rem .8rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--pc); }
.part b { font-size: 1.05rem; font-weight: 800; color: var(--pc); }
.part p { margin: 0; font-size: .88rem; color: var(--ink2); font-weight: 600; line-height: 1.55; }
.part.on { box-shadow: 0 0 0 2px var(--pc); }
.analogy { margin: 1rem 0 0; color: var(--muted); font-size: .92rem; }
.analogy b { color: var(--strong); }

/* ๘ อย่าง ๒ กลุ่ม */
.cg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: .9rem; }
.cg-box { display: flex; flex-direction: column; gap: .55rem; padding: 1rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.cg-h { margin: 0; font-weight: 800; font-size: 1rem; }
.cg-s { margin: 0; color: var(--muted); font-size: .84rem; }
.cg-list { display: grid; gap: .45rem; }
.cg-told .cg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comp { display: flex; flex-direction: column; gap: .1rem; min-height: 44px; padding: .55rem .7rem; border-radius: 12px; cursor: pointer; text-align: left;
	border: 1px solid color-mix(in srgb, var(--pc, var(--strong)) 30%, transparent); background: color-mix(in srgb, var(--pc, var(--strong)) 7%, transparent); }
.comp b { font-weight: 800; color: var(--pc, var(--strong)); }
.comp span { font-size: .8rem; color: var(--ink2); font-weight: 600; line-height: 1.5; }
.comp em { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--pc, var(--dim)); }
.comp[aria-pressed="true"], .ord-i[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold); }
.ord { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; align-items: center; }
.ord-l { font-size: .8rem; font-weight: 800; color: var(--dim); margin-right: .2rem; }
.ord-i { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 4%, transparent); font-weight: 800; cursor: pointer; }
.ord-i i { font-style: normal; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-size: .72rem; }
.cnt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.cnt-i { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .8rem .9rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.cnt-n { font-size: 2.2rem; font-weight: 800; color: var(--gold); line-height: 1.1; border-radius: 10px; transition: filter .25s; align-self: flex-start; padding: 0 .2rem; }
.cnt-l { font-weight: 800; font-size: .92rem; }
.cnt-d { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.hide .cnt-n { filter: blur(8px); cursor: pointer; background: color-mix(in srgb, var(--gold) 12%, transparent); }
.hide .cnt-n.shown { filter: none; background: none; }
/* บุรุษ ๓ · บท ๒ */
.bu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.bu-i { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.bu-top { display: flex; align-items: center; gap: .6rem; }
.bu-seal { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); font-weight: 800; }
.bu-top b { font-weight: 800; font-size: 1.05rem; }
.bu-i dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .7rem; margin: 0; font-size: .9rem; }
.bu-i dt { color: var(--dim); font-weight: 700; } .bu-i dd { margin: 0; font-weight: 600; color: var(--ink2); }
.vac-line { margin: 1rem 0 0; color: var(--ink2); font-weight: 600; }
.bots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.bot { display: flex; flex-direction: column; gap: .45rem; padding: 1rem; border-radius: 16px; background: color-mix(in srgb, var(--bc) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--bc) 35%, transparent); }
.bot-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.bot-h b { font-size: 1.15rem; font-weight: 800; color: var(--bc); }
.bot-h span { color: var(--muted); font-weight: 700; font-size: .88rem; }
.bot-end { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.bot-end .pali { padding: .05rem .5rem; border-radius: 8px; background: color-mix(in srgb, var(--bc) 14%, transparent); color: var(--bc); font-size: 1.05rem; }
.bot-vac { display: flex; flex-wrap: wrap; gap: .35rem; }
.bot-vac a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .7rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bc) 45%, transparent); color: var(--bc); font-weight: 800; font-size: .85rem; text-decoration: none; }
.bot p { margin: 0; color: var(--muted); font-size: .86rem; }
.lbl { font-size: .74rem; font-weight: 800; color: var(--dim); }

/* ══ ด่าน ๒ เส้นเวลา ══ */
.mn { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.mn-i { min-width: 3.4rem; min-height: 44px; padding: 0 .7rem; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--gc) 40%, transparent); background: color-mix(in srgb, var(--gc) 9%, transparent);
	color: var(--gc); font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.mn-i[aria-pressed="true"] { background: var(--gc); color: var(--bg); border-color: var(--gc); }
.mn-dot { align-self: center; color: var(--dim); font-weight: 800; }
.tlboard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.tl { position: relative; display: grid; grid-template-columns: 3fr 1.1fr 2fr; gap: .8rem; padding: 1.2rem 1rem 1rem; border-radius: 20px; background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.tl-mood { grid-column: 2; display: flex; flex-direction: column; gap: .45rem; padding-bottom: .9rem; border-bottom: 1px dashed color-mix(in srgb, var(--g-mood) 40%, transparent); }
.tl-zone { display: flex; flex-direction: column; gap: .45rem; }
.tl-zone-h { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .35rem; border-radius: 10px; border-bottom: 3px solid var(--gc); }
.tl-zone-h b { font-weight: 800; color: var(--gc); }
.tl-zone-h small { font-size: .72rem; color: var(--dim); font-weight: 700; text-align: center; }
.tl-row { display: grid; gap: .45rem; }
.tl-past .tl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-future .tl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-axis { grid-column: 1 / -1; position: relative; height: 2.2rem; display: grid; grid-template-columns: 3fr 1.1fr 2fr; gap: .8rem; }
.tl-axis span { position: relative; display: grid; place-items: center; font-size: .74rem; font-weight: 800; color: var(--dim); }
.tl-axis::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, var(--g-past), var(--g-now) 55%, var(--g-future)); opacity: .55; }
.tl-axis::after { content: ""; position: absolute; right: -2px; top: calc(50% - 6px); border: 6px solid transparent; border-left: 9px solid var(--g-future); opacity: .8; }
.tl-axis span b { position: relative; padding: 0 .5rem; background: var(--bg3); border-radius: 6px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 5.2rem; padding: .5rem .3rem; border-radius: 14px; cursor: pointer; text-align: center;
	border: 1.5px solid color-mix(in srgb, var(--gc) 45%, transparent); background: color-mix(in srgb, var(--gc) 10%, transparent); transition: transform .2s, box-shadow .2s, opacity .25s; }
.tile:hover { transform: translateY(-2px); }
.tile .syl { font-size: 1.35rem; font-weight: 800; color: var(--gc); line-height: 1.2; }
.tile b { font-size: .86rem; font-weight: 800; color: var(--ink); }
.tile small { font-size: .7rem; font-weight: 700; color: var(--dim); line-height: 1.35; }
.tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gc), 0 12px 28px -14px var(--gc); background: color-mix(in srgb, var(--gc) 20%, transparent); }
.tile { position: relative; }
.tile .a-badge { position: absolute; top: .3rem; right: .35rem; font-size: .62rem; font-weight: 800; padding: 0 .35rem; border-radius: 999px; background: var(--gold); color: var(--on-gold); }
.vd { position: sticky; top: 76px; display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--gc); }
.vd-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.vd-name { font-size: 1.6rem; font-weight: 800; color: var(--gc); line-height: 1.25; }
.vd-pali { font-size: 1rem; color: var(--pali); }
.vd dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .8rem; margin: 0; font-size: .92rem; }
.vd dt { color: var(--dim); font-weight: 700; } .vd dd { margin: 0; font-weight: 700; color: var(--ink2); min-width: 0; }
.vd-ex { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .7rem; border-radius: 12px; background: color-mix(in srgb, var(--gc) 8%, transparent); }
.vd-ex .pali { font-size: 1.15rem; color: var(--pali); white-space: normal; }
.vd-ex p { margin: 0; font-size: .86rem; color: var(--ink2); font-weight: 600; }
.vd-ex small { font-size: .76rem; color: var(--muted); }
.vd-note { margin: 0; font-size: .82rem; color: var(--quote); line-height: 1.6; }
.groups4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.g4 { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .9rem; border-radius: 14px; background: color-mix(in srgb, var(--gc) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent); }
.g4 b { color: var(--gc); font-weight: 800; }
.g4 span { font-size: .84rem; color: var(--ink2); font-weight: 600; }
.g4 small { font-size: .78rem; color: var(--muted); }
.ktree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.kt { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--gc); }
.kt-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.kt-h b { font-size: 1.1rem; font-weight: 800; color: var(--gc); }
.kt-h span { font-size: .8rem; color: var(--dim); font-weight: 700; }
.kt-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .4rem .55rem; border-radius: 10px; background: color-mix(in srgb, var(--strong) 4%, transparent); }
.kt-sub span { font-weight: 700; font-size: .9rem; }
.kt-n { margin: 0; font-size: .8rem; color: var(--muted); }

/* ══ ด่าน ๓ ธาตุ ↔ ปัจจัย ══ */
.dhboard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
.dh-wrap { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem; border-radius: 20px; background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.dh-l { font-size: .78rem; font-weight: 800; color: var(--dim); }
.halls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.hall { --pc: var(--p-dhatu); display: flex; flex-direction: column; align-items: center; gap: .05rem; min-height: 5.6rem; justify-content: center; padding: .5rem .3rem; border-radius: 14px; cursor: pointer;
	border: 1.5px solid color-mix(in srgb, var(--pc) 40%, transparent); background: color-mix(in srgb, var(--pc) 9%, transparent); transition: opacity .25s, box-shadow .25s, transform .2s; }
.hall small { font-size: .7rem; font-weight: 800; color: var(--dim); }
.hall .pali { font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--pc); line-height: 1.3; }
.hall span { font-size: .8rem; font-weight: 700; color: var(--ink2); }
.pstrip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .4rem; }
.pchip { --pc: var(--p-pacc); display: grid; place-items: center; min-height: 3.4rem; border-radius: 12px; cursor: pointer; border: 1.5px solid color-mix(in srgb, var(--pc) 40%, transparent); background: color-mix(in srgb, var(--pc) 9%, transparent);
	transition: opacity .25s, box-shadow .25s; }
.pchip .pali { font-size: 1.3rem; color: var(--pc); white-space: nowrap; }
.dh-wrap.spot .hall:not(.lit), .dh-wrap.spot .pchip:not(.lit) { opacity: .22; }
.hall.lit, .pchip.lit { box-shadow: 0 0 0 2px var(--pc), 0 10px 24px -14px var(--pc); }
.hall[aria-pressed="true"], .pchip[aria-pressed="true"] { transform: translateY(-2px); }
.story { margin: 0; text-align: center; font-family: var(--f-hand); font-size: 1.1rem; color: var(--quote); line-height: 1.9; }
.story b { font-family: "Thunder Pali", var(--f-body); font-weight: 800; color: var(--p-dhatu); cursor: pointer; border-bottom: 2px dotted color-mix(in srgb, var(--p-dhatu) 60%, transparent); }
.dd { position: sticky; top: 76px; display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--p-dhatu); }
.dd-big { text-align: center; font-size: 3.6rem; font-weight: 800; color: var(--p-dhatu); line-height: 1.3; }
.dd dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem .8rem; margin: 0; font-size: .92rem; }
.dd dt { color: var(--dim); font-weight: 700; } .dd dd { margin: 0; font-weight: 700; color: var(--ink2); min-width: 0; }
.dd .chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.dd .chips .pali { padding: 0 .45rem; border-radius: 8px; background: color-mix(in srgb, var(--p-pacc) 14%, transparent); color: var(--p-pacc); }
.dd .forms .pali { color: var(--p-dhatu); margin-right: .4rem; }
.sk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.sk-i { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.sk-i b { font-size: 1.1rem; font-weight: 800; color: var(--gold); }
.sk-i p { margin: 0; color: var(--ink2); font-weight: 600; line-height: 1.6; }
.sp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: .9rem; }
.sp-i { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.sp-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; }
.sp-h .pali { font-size: 1.5rem; color: var(--p-pacc); }
.sp-h span { font-weight: 700; color: var(--ink2); }
.sp-h span b { color: var(--gold); }
.sp-ex { display: flex; flex-direction: column; gap: .25rem; }
.asa { width: 100%; border-collapse: separate; border-spacing: 0 .35rem; }
.asa th { font-size: .76rem; font-weight: 800; color: var(--dim); text-align: left; padding: 0 .7rem; }
.asa td { padding: .55rem .7rem; background: var(--panel); border-block: 1px solid var(--line); vertical-align: top; }
.asa td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; font-weight: 800; }
.asa td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
.asa-scroll { overflow-x: auto; }

/* ══ ด่าน ๔ แกะรอยย้อน ══ */
.vpick { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.vpick button { min-height: 48px; padding: 0 1rem; border-radius: 14px; border: 1.5px solid var(--line); background: color-mix(in srgb, var(--strong) 4%, transparent); cursor: pointer; }
.vpick button .pali { font-size: 1.25rem; color: var(--pali); white-space: nowrap; }
.vpick button[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.trace { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.tr { display: flex; flex-direction: column; gap: .45rem; padding: 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); position: relative; }
.tr-n { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-weight: 800; font-size: .9rem; }
.tr-q { margin: 0; font-weight: 800; color: var(--strong); }
.tr-rule { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.6; }
.tr-out { margin-top: auto; padding: .5rem .6rem; border-radius: 12px; background: color-mix(in srgb, var(--bc, var(--gold)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bc, var(--gold)) 40%, transparent); font-weight: 800; color: var(--bc, var(--strong)); font-size: .92rem; }
.tr-out .chipline { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.tr-out .chipline .pali { padding: 0 .4rem; border-radius: 8px; background: color-mix(in srgb, var(--pc) 15%, transparent); color: var(--pc); font-size: 1rem; }
.vcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(3, minmax(0, 1fr)); gap: .6rem; }
.vc { display: flex; flex-direction: column; gap: .4rem; padding: .9rem; border-radius: 16px; background: color-mix(in srgb, var(--bc) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--bc) 35%, transparent); }
.vc-n { font-size: .74rem; font-weight: 800; color: var(--bc); }
.vc b { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.vc .says { font-size: .82rem; color: var(--muted); font-weight: 700; }
.vc .pacc { font-size: .86rem; color: var(--ink2); font-weight: 700; line-height: 1.55; }
.vc .pacc .pali { color: var(--p-pacc); }
.vc .verb .pali { font-size: 1.2rem; color: var(--r-verb, var(--p-dhatu)); }
.vc a { margin-top: auto; }
.worked { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.wk { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.wk h3 { font-size: 1.05rem; font-weight: 800; }
.wk h3 .pali { color: var(--pali); font-size: 1.3rem; }
.wk ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; color: var(--ink2); font-size: .9rem; line-height: 1.65; }
.wk p { margin: 0; padding: .5rem .7rem; border-radius: 12px; background: color-mix(in srgb, var(--gold) 8%, transparent); font-weight: 800; color: var(--strong); font-size: .9rem; }

/* ══ ด่าน ๖ ตารางใหญ่ใบเดียว ══ */
.mxboard { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.2rem; align-items: start; }
.mx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; }
.mx { display: grid; grid-template-columns: 8.6rem repeat(6, minmax(4.4rem, 1fr)); gap: .3rem; padding: 1rem; border-radius: 20px; background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); min-width: 560px; }
.mx-ph { grid-column: span 2; text-align: center; font-size: .8rem; font-weight: 800; color: var(--ink2); padding: .2rem; border-bottom: 2px solid var(--line); }
.mx-nh { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: none; font-size: .74rem; font-weight: 800; color: var(--dim); cursor: pointer; }
.mx-nh[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.mx-row { min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: .05rem; padding: .3rem .6rem; border-radius: 12px; cursor: pointer; text-align: left;
	border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); background: color-mix(in srgb, var(--gc) 9%, transparent); }
.mx-row b { font-size: .92rem; font-weight: 800; color: var(--gc); white-space: nowrap; }
.mx-row small { font-size: .68rem; font-weight: 800; color: var(--dim); }
.mx-row small.often { color: var(--gold); }
.mx-row[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gc); }
.mxc { display: grid; place-items: center; min-height: 48px; border-radius: 12px; cursor: pointer; border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 4%, transparent); transition: opacity .25s, box-shadow .25s; }
.mxc .pali { font-size: 1.12rem; color: var(--strong); white-space: nowrap; }
.mx.spot .mxc:not(.lit), .mx.spot .mx-row:not(.lit) { opacity: .25; }
.mxc.lit { box-shadow: 0 0 0 2px var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.mxc { position: relative; }
.mxc .twin-dot { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.hide .mxc .pali { filter: blur(7px); }
.hide .mxc.shown .pali { filter: none; }
.mx-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .7rem; font-size: .82rem; color: var(--muted); font-weight: 700; align-items: center; }
.mx-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: .3rem; }
.xside { position: sticky; top: 76px; display: flex; flex-direction: column; gap: .7rem; }
.xt { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--gc); }
.xt-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.xt-head b { font-size: 1.15rem; font-weight: 800; color: var(--gc); }
.xt-head .pali { color: var(--pali); font-size: .95rem; }
.xt-grid { display: grid; grid-template-columns: 3rem repeat(2, minmax(0, 1fr)); gap: .3rem; }
.xt-h { font-size: .72rem; font-weight: 800; color: var(--dim); text-align: center; }
.xt-p { display: grid; place-items: center; font-weight: 800; color: var(--ink2); font-size: .9rem; }
.xt-c { display: grid; place-items: center; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); font-size: 1.15rem; color: var(--strong); white-space: nowrap; }
.xt-c.hi { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.xs-note { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.6; }
.xs-note b { color: var(--strong); }
.bars { display: flex; flex-direction: column; gap: .45rem; }
.bar-i { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.bar-i b { font-size: .9rem; font-weight: 800; color: var(--gc); white-space: nowrap; }
.bar-t { height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--strong) 6%, transparent); overflow: hidden; }
.bar-t span { display: block; height: 100%; border-radius: inherit; background: var(--gc); }
.bar-i small { font-size: .78rem; color: var(--dim); font-weight: 700; white-space: nowrap; }
.bar-y { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .25rem; margin-top: -.2rem; }

/* ══ เกม: ภาพประกอบในเฉลย ══ */
.qv { width: 100%; display: flex; justify-content: center; }
.qv .xt { width: min(100%, 320px); }
.qv-line { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.qv-line .vpill { font-size: .86rem; padding: .15rem .7rem; }
.qv-line .vpill.on { background: var(--gc); color: var(--bg); }
.qv-dh { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .9rem; align-items: baseline; }
.qv-dh .pali { font-size: 1.6rem; color: var(--p-dhatu); }
.qv-dh .pc { color: var(--p-pacc); font-size: 1.2rem; }
.tone-g-now { --tc: var(--g-now); } .tone-g-mood { --tc: var(--g-mood); } .tone-g-past { --tc: var(--g-past); } .tone-g-future { --tc: var(--g-future); }
.tone-b-para { --tc: var(--b-para); } .tone-b-atta { --tc: var(--b-atta); }
.tone-pt-dhatu { --tc: var(--p-dhatu); } .tone-pt-pacc { --tc: var(--p-pacc); } .tone-pt-vib { --tc: var(--p-vib); }
.choice[class*="tone-"] .cico { color: var(--tc); }
.qbig.pali { cursor: default; }
.qform { color: var(--strong); text-shadow: 0 6px 30px color-mix(in srgb, var(--gold) 26%, transparent); white-space: nowrap; }
.qform.is-long { font-size: clamp(2rem, 7vw, 3.2rem); }
.qgloss { margin: -.3rem 0 0; color: var(--gloss); font-weight: 700; }
.intro-lead { margin: -.3rem 0 .9rem; color: var(--muted); font-weight: 700; }
.miss-big.is-long { font-size: 1.3rem; }
.miss-text { grid-template-columns: 1fr; }

/* ══ คลังการ์ด ══ */
.dk-vib { --kc: var(--gc); } .dk-dhatu { --kc: var(--p-dhatu); } .dk-vac { --kc: var(--bc); } .dk-verb { --kc: var(--pali); }
.dch.w-md { font-size: 3.2rem; } .dch.w-lg { font-size: 2.5rem; } .dch.w-xl { font-size: 1.9rem; }
.dch-s.w-lg, .dch-s.w-xl { font-size: 1.25rem; }
.dch.thai { font-family: var(--f-body); font-size: 1.9rem; line-height: 1.3; text-align: center; }

@media (max-width: 960px) {
	.asm, .tlboard, .dhboard, .mxboard { grid-template-columns: 1fr; }
	.vd, .dd, .xside { position: static; }
	.cnt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trace, .flow-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vcs .vc:last-child { grid-column: 1 / -1; }
	.groups4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.cg { grid-template-columns: 1fr; }
	.bu, .ktree, .bots, .sk, .sp, .worked { grid-template-columns: 1fr; }
	.tl { grid-template-columns: 1fr; padding: .9rem; }
	.tl-mood { grid-column: 1; }
	.tl-axis { display: none; }
	.tl-zone { order: 0; }
	.halls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
	.hall { min-height: 4.6rem; }
	.hall span { font-size: .7rem; }
	.pstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.dh-wrap { padding: .9rem; }
	.trace, .flow-4 { grid-template-columns: 1fr; }
	.asm-piece { min-width: 5.2rem; padding: .55rem .6rem; }
}
@media (max-width: 480px) {
	.cg-told .cg-list { grid-template-columns: 1fr; }
	.vcs, .groups4 { grid-template-columns: 1fr; }
	.vcs .vc:last-child { grid-column: auto; }
	.cnt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cnt-n { font-size: 1.8rem; }
	.bar-i { grid-template-columns: 6rem minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .asm-piece, .tile, .hall, .pchip, .mxc { transition: none; } }
/* จำนวนเป็นเลขคี่ — ใบสุดท้ายเต็มแถว ไม่ทิ้งช่องว่าง */
.cg-told .comp:last-child:nth-child(odd), .qa-list .qa:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* สีบทบาทในคำอ่าน (ชุดเดียวกับด่าน ๕ แต่งประโยควาจก — app/css/akhyata-vacsent.css) */
:root { --r-pathan: #f5bf45; --r-an: #c4b5fd; --r-yang: #fda4af; --r-kam: #5eead4; --r-verb: #86efac; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --r-pathan: #b45309; --r-an: #7c3aed; --r-yang: #e11d48; --r-kam: #0f766e; --r-verb: #15803d; } }
:root[data-theme="light"] { --r-pathan: #b45309; --r-an: #7c3aed; --r-yang: #e11d48; --r-kam: #0f766e; --r-verb: #15803d; }
.r-pathan { color: var(--r-pathan); } .r-an { color: var(--r-an); } .r-yang { color: var(--r-yang); } .r-kam { color: var(--r-kam); }
.reading-s { font-weight: 700; color: var(--ink2); line-height: 1.6; margin-top: .3rem; }
.dch.thai { white-space: nowrap; font-size: 1.7rem; }
.dch.thai.t-long { font-size: 1.3rem; }
@media (max-width: 480px) {
	.asm-row { gap: .35rem; flex-wrap: nowrap; }
	.asm-piece { min-width: 0; flex: 1 1 0; padding: .5rem .3rem; }
	.asm-piece .pali { font-size: 1.7rem; }
	.asm-piece small { font-size: .66rem; text-align: center; }
	.asm-op { font-size: 1.1rem; }
	/* ตารางใหญ่: ชื่อหมวดค้างซ้ายเวลาเลื่อน */
	.mx { grid-template-columns: 6.4rem repeat(6, minmax(3.7rem, 1fr)); min-width: 0; width: max-content; padding: .7rem; }
	.mx-row { position: sticky; left: 0; z-index: 2; background: color-mix(in srgb, var(--gc) 14%, var(--bg2)); padding: .3rem .45rem; }
	.mx-row b { font-size: .82rem; }
	.mx > span:first-child { position: sticky; left: 0; }
}
.hero-quote .nb { white-space: nowrap; }
/* คำบาลีในตัวเลือกไม่ตัดกลางคำ */
.choice .ctext.pali { white-space: nowrap; }
.ch-grid .ctext.pali { font-size: clamp(1.25rem, 5vw, 1.6rem); }
/* หัวเรื่องขึ้น ๒ บรรทัด: สระล่าง (อุ) ของบรรทัดบนชนวรรณยุกต์ของบรรทัดล่าง — เว้นบรรทัดให้พอ */
.ay-page .hero h1 { line-height: 1.5; }