/* เกมกิริยากิตก์ ธีม "ตามรอยปัจจัย" (/kiriya/<ด่าน>/study|play) — พี่น้องกับห้องฉายอักขรวิธี (โครงหน้า/ความสบายตาเดียวกัน)
   สีมีความหมาย: กาลของปัจจัย = สีของ "รอยท้ายคำ" ทุกที่ (ปัจจุบัน teal · อดีต violet · ความจำเป็น rose)
   ธาตุ = เขียวต้นกล้า · บทหน้า = ชมพูม่วง · กฎแปลง = ฟ้า · กัตตุ/กัมมวาจก = เขียว/ส้ม · ทอง = สีเน้นเดียวของหน้า */
@font-face { font-family: "Sriracha Local"; src: url("/assets/fonts/sriracha/Sriracha-Regular.ttf?v=20260806.1") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Thunder Pali"; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/thunder-pali/ThunderPali-400.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+25CC; }
@font-face { font-family: "Thunder Pali"; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/thunder-pali/ThunderPali-700.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+25CC; }
@font-face { font-family: "Thunder Pali"; font-weight: 800 900; font-display: swap; src: url("/assets/fonts/thunder-pali/ThunderPali-800.woff2") format("woff2"); unicode-range: U+0E00-0E7F, U+25CC; }
:root {
	color-scheme: dark;
	--bg: #0a0f1e; --bg2: #10183a; --bg3: #0c1330; --panel: #141d3d;
	--ink: #f3f6ff; --ink2: #d7deef; --muted: #aab4d0; --dim: #8892b0; --strong: #ffffff;
	--gold: #f5bf45; --on-gold: #3b2600; --quote: #fde9b0; --shadow: rgba(0,0,0,.5);
	--line: color-mix(in srgb, var(--strong) 10%, transparent);
	--k-now: #2dd4bf; --k-past: #b49cff; --k-must: #fb7185;
	--c-dhatu: #86efac; --c-prefix: #f0abfc; --c-rule: #7dd3fc; --c-extra: #fcd34d;
	--v-kattu: #4ade80; --v-kamma: #fb923c;
	--ok: #4ade80; --bad: #fb7185;
	--f-body: "Sarabun", "Thonburi", "Leelawadee UI", sans-serif;
	--f-pali: "Thunder Pali", "Sarabun", sans-serif;
	--f-hand: "Sriracha Local", "Sarabun", sans-serif;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
	color-scheme: light;
	--bg: #f5f7fc; --bg2: #ffffff; --bg3: #eef2fb; --panel: #ffffff;
	--ink: #141a33; --ink2: #333c5c; --muted: #525b78; --dim: #626b88; --strong: #141a33;
	--gold: #b45309; --on-gold: #ffffff; --quote: #8a4b06; --shadow: transparent;
	--k-now: #0f766e; --k-past: #6d28d9; --k-must: #be123c;
	--c-dhatu: #15803d; --c-prefix: #a21caf; --c-rule: #0369a1; --c-extra: #a16207;
	--v-kattu: #15803d; --v-kamma: #c2410c;
	--ok: #15803d; --bad: #be123c;
} }
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #f5f7fc; --bg2: #ffffff; --bg3: #eef2fb; --panel: #ffffff;
	--ink: #141a33; --ink2: #333c5c; --muted: #525b78; --dim: #626b88; --strong: #141a33;
	--gold: #b45309; --on-gold: #ffffff; --quote: #8a4b06; --shadow: transparent;
	--k-now: #0f766e; --k-past: #6d28d9; --k-must: #be123c;
	--c-dhatu: #15803d; --c-prefix: #a21caf; --c-rule: #0369a1; --c-extra: #a16207;
	--v-kattu: #15803d; --v-kamma: #c2410c;
	--ok: #15803d; --bad: #be123c;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.kr-page { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
a { color: inherit; }
.pali, .pali-nt { font-family: var(--f-pali); }

/* ค่าสีตามกาล — ใช้ data-k บนองค์ประกอบใดก็ได้ */
.kr-page [data-k="now"] { --k: var(--k-now); } .kr-page [data-k="past"] { --k: var(--k-past); } .kr-page [data-k="must"] { --k: var(--k-must); }

/* ── แถบบน ── */
.kr-bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.kr-bar-in { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 60px; }
.kr-back, .kr-pill-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--ink); font-weight: 800; font-size: .9rem; text-decoration: none; }
.kr-back:hover, .kr-pill-link:hover { color: var(--gold); }
.kr-bar-title { font-weight: 800; font-size: .95rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-bar-title i { color: var(--gold); margin-right: .25rem; }
.kr-bar-actions { display: flex; align-items: center; gap: .5rem; }
.kr-pill-link { padding: 0 .9rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--strong) 22%, transparent); }
.theme-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; cursor: pointer;
	border: 1px solid color-mix(in srgb, var(--strong) 22%, transparent); background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--ink); font-weight: 800; font-size: .88rem; }
.theme-btn:hover { border-color: color-mix(in srgb, var(--strong) 45%, transparent); }
.theme-btn svg { width: 18px; height: 18px; flex: none; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; } :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; } :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; } }
.kr-error { margin-block: 2rem 0; padding-block: 1rem; color: var(--ink); font-weight: 700; }

/* ── ฉากเปิด (ภาพ: เณรน้อยส่องรอยเท้า — หน้าอยู่ราว ๗๐% ของภาพ) ── */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -2; background: var(--hero-img) right 34% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 36%, color-mix(in srgb, var(--bg) 30%, transparent) 68%, color-mix(in srgb, var(--bg) 4%, transparent) 100%),
		linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 40%); }
.hero-inner { display: flex; flex-direction: column; gap: .7rem; padding-block: 2.5rem 2.2rem; max-width: 610px; }
.hero-compact .hero-inner { padding-block: 1.4rem 1rem; gap: .45rem; }
.hero-compact h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.hero-compact .path { margin-top: 0; padding-bottom: .6rem; }
.eyebrow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.pill-gold { background: var(--gold); color: var(--on-gold); }
.pill-ghost { background: color-mix(in srgb, var(--strong) 10%, transparent); border: 1px solid color-mix(in srgb, var(--strong) 20%, transparent); color: var(--ink2); }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.7rem); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; text-shadow: 0 2px 24px var(--shadow); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-quote { font-family: var(--f-hand); font-size: 1.1rem; color: var(--quote); }
.hero-lead { color: var(--ink2); max-width: 35em; }
.hero-lead b { color: var(--strong); }

/* ── เส้นทาง ๙ ด่าน (เส้นเชื่อมเป็นรอยเท้า) ── */
.path { display: flex; align-items: flex-start; overflow-x: auto; scrollbar-width: none; padding-block: .4rem 1rem; margin-top: .6rem; }
.path::-webkit-scrollbar { display: none; }
.stop { position: relative; flex: 1 0 96px; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; text-decoration: none; color: inherit; }
.stop::before { content: ""; position: absolute; top: 19px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 0; border-top: 2px dotted var(--line); }
.stop:first-child::before { display: none; }
.stop.done::before, .stop.now::before { border-top-color: var(--gold); }
.stop-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--panel); border: 2px solid var(--line); color: var(--muted); }
.stop.now .stop-dot { background: var(--gold); border-color: var(--gold); color: var(--on-gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent); }
.stop-name { font-size: .8rem; font-weight: 700; color: var(--muted); line-height: 1.35; }
.stop.now .stop-name { color: var(--strong); }
.stop-zone { font-size: .68rem; color: var(--dim); }
.stop-stars { font-size: .78rem; letter-spacing: .05em; color: color-mix(in srgb, var(--strong) 18%, transparent); }
.stop-stars .on { color: var(--gold); }
a.stop:hover .stop-dot { border-color: var(--gold); color: var(--ink); }
a.stop:hover .stop-name { color: var(--ink); }

/* ── ส่วนหัวช่วง ── */
.sec { padding-block: 2.2rem; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.2rem; }
.sec-kick { font-size: .78rem; font-weight: 800; letter-spacing: .05em; color: var(--gold); }
.sec h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.3; }
.sec h2 em { font-style: normal; color: var(--gold); }
.sec-sub { color: var(--muted); margin-top: .2rem; font-size: .95rem; max-width: 42em; }

/* ── ศัพท์บาลีพร้อมรอยท้ายคำ (ลายเซ็นของชุดด่าน) ── */
.kword { font-family: var(--f-pali); font-weight: 800; color: var(--strong); white-space: nowrap; --k: var(--gold); }
.kw-stem { color: inherit; }
.kw-tail { color: var(--k); text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .28em; text-decoration-color: color-mix(in srgb, var(--k) 70%, transparent); }
.kword.neutral .kw-tail { color: var(--gold); text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.kword.plain .kw-tail { color: inherit; text-decoration: none; }
.kmean { color: var(--muted); font-weight: 700; }
.km-kala { color: var(--k); font-weight: 800; }
.km-amm { color: var(--v-kamma); font-weight: 800; }
.kw-now { color: var(--k-now); } .kw-past { color: var(--k-past); } .kw-must { color: var(--k-must); }
.kw-kattu { color: var(--v-kattu); } .kw-kamma { color: var(--v-kamma); }
.kw { white-space: nowrap; font-weight: 800; }

/* ชิปปัจจัย / ศัพท์ */
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.pchip { --k: var(--gold); display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .25rem .9rem; border-radius: 12px; cursor: pointer;
	border: 1.5px solid color-mix(in srgb, var(--k) 45%, transparent); background: color-mix(in srgb, var(--k) 10%, transparent); color: var(--strong);
	font-family: var(--f-pali); font-weight: 800; font-size: 1.15rem; white-space: nowrap; transition: transform .15s, background-color .2s, opacity .25s; }
.pchip small { font-family: var(--f-body); font-size: .72rem; font-weight: 700; color: var(--k); }
.pchip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--k) 18%, transparent); }
.pchip[aria-pressed="true"] { background: var(--k); color: var(--bg); border-color: var(--k); }
.pchip[aria-pressed="true"] small { color: var(--bg); }
.spot .pchip:not(.lit) { opacity: .28; }

/* ── บอร์ด + แผงรายละเอียด ── */
.board { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.3rem; align-items: start; }
.detail { position: sticky; top: 76px; padding: 1.2rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .8rem; }
.detail-big { font-family: var(--f-pali); font-size: 3.6rem; font-weight: 800; line-height: 1.25; text-align: center; padding: .5rem; border-radius: 14px; color: var(--k, var(--gold));
	background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--k, var(--gold)) 18%, transparent), transparent 70%); white-space: nowrap; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem .9rem; margin: 0; font-size: .92rem; }
.facts dt { color: var(--dim); font-weight: 700; white-space: nowrap; }
.facts dd { margin: 0; font-weight: 700; min-width: 0; color: var(--ink2); }
.facts dd b { color: var(--strong); }
.detail-h { font-size: .8rem; font-weight: 800; color: var(--dim); margin-top: .2rem; }
.hint { color: var(--dim); font-size: .85rem; text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.leg { --k: var(--gold); display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .2rem .8rem; border-radius: 10px; border: 1px solid var(--line);
	background: color-mix(in srgb, var(--strong) 4%, transparent); font-size: .88rem; font-weight: 700; cursor: pointer; color: var(--ink2); }
.leg i { width: 12px; height: 12px; border-radius: 4px; background: var(--k); flex: none; }
.leg b { color: var(--strong); }
.leg[aria-pressed="true"] { border-color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); }

/* รายการศัพท์ คำละบรรทัด: ศัพท์ · คำแปล · ข้อมูลเสริม */
.wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.wrow { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr) auto; gap: .35rem .9rem; align-items: baseline; padding: .45rem .7rem; border-radius: 10px;
	background: color-mix(in srgb, var(--strong) 3%, transparent); border: 1px solid var(--line); }
.wrow .kword { font-size: 1.15rem; }
.wrow .kmean { font-size: .92rem; }
.wsrc { font-size: .78rem; font-weight: 700; color: var(--dim); white-space: nowrap; }
.wsrc .dh { color: var(--c-dhatu); font-family: var(--f-pali); font-weight: 800; }
.wsrc .px { color: var(--c-prefix); font-family: var(--f-pali); font-weight: 800; }
.wsrc .pc { font-family: var(--f-pali); font-weight: 800; color: var(--ink2); }
.ybadge { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--gold);
	border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); white-space: nowrap; }

/* ── การ์ดหมวดปัจจัย (ด่าน ๑) ── */
.pgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.pgroup { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; border-radius: 16px; background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.pgroup-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.pgroup-h h3 { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.pgroup-n { font-size: 1.6rem; font-weight: 800; color: var(--gold); line-height: 1; }
.pgroup-u { font-size: .84rem; font-weight: 700; color: var(--muted); }
.pgroup-u b { color: var(--ink2); }

/* ── กาล ๓ แถบ (ด่าน ๒) ── */
.kbands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.kband { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--k) 35%, transparent);
	background: linear-gradient(170deg, color-mix(in srgb, var(--k) 12%, var(--bg2)), var(--bg3)); }
.kband h3 { font-size: 1.2rem; font-weight: 800; color: var(--k); }
.kband-w { font-size: .9rem; font-weight: 700; color: var(--ink2); }
.kband-w b { color: var(--k); font-size: 1.05rem; }
.ktree { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.knode { padding: .9rem 1rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--k); }
.knode h4 { font-size: 1.05rem; font-weight: 800; color: var(--k); margin-bottom: .4rem; }
.knode ol { margin: 0; padding-left: 1.2rem; color: var(--ink2); font-weight: 700; }
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.dcell { display: flex; flex-direction: column; gap: .25rem; padding: .6rem .75rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.dcell-top { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.dcell-d { font-family: var(--f-pali); font-weight: 800; font-size: 1.25rem; color: var(--c-dhatu); white-space: nowrap; }
.dcell-m { font-weight: 700; color: var(--ink2); font-size: .92rem; transition: filter .25s; border-radius: 6px; }
.dcell-w { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .95rem; }
.hide .dcell-m { filter: blur(7px); cursor: pointer; background: color-mix(in srgb, var(--strong) 6%, transparent); }
.hide .dcell-m.shown { filter: none; background: none; }

/* ── เครื่องแปลงรอย (ด่าน ๓ — ลายเซ็น) ── */
.tracks { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.track { min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 5%, transparent); font-weight: 800; cursor: pointer; color: var(--ink2); }
.track b { font-family: var(--f-pali); }
.track[aria-checked="true"] { background: var(--strong); color: var(--bg); border-color: var(--strong); }
.machine { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.2rem; border-radius: 20px; background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.dial { display: flex; flex-wrap: wrap; gap: .45rem; }
.dial-b { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 4.4rem; min-height: 56px; padding: .3rem .7rem; border-radius: 14px; cursor: pointer;
	border: 1.5px solid color-mix(in srgb, var(--c-dhatu) 40%, transparent); background: color-mix(in srgb, var(--c-dhatu) 8%, transparent); color: var(--strong); }
.dial-b b { font-family: var(--f-pali); font-size: 1.25rem; font-weight: 800; white-space: nowrap; line-height: 1.3; }
.dial-b small { font-size: .68rem; font-weight: 700; color: var(--dim); white-space: nowrap; }
.dial-b[aria-checked="true"] { background: var(--c-dhatu); border-color: var(--c-dhatu); color: var(--bg); }
.dial-b[aria-checked="true"] small { color: var(--bg); }
.eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; border-radius: 16px; background: color-mix(in srgb, var(--strong) 3%, transparent); }
.eq-box { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 5.5rem; padding: .5rem .9rem; border-radius: 14px; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.eq-box b { font-family: var(--f-pali); font-size: 1.9rem; font-weight: 800; line-height: 1.3; color: var(--c); white-space: nowrap; }
.eq-box small { font-size: .72rem; font-weight: 800; color: var(--dim); white-space: nowrap; }
.eq-op { font-size: 1.5rem; font-weight: 800; color: var(--dim); }
.eq-dhatu { --c: var(--c-dhatu); } .eq-pac { --c: var(--k-past); } .eq-out { --c: var(--gold); }
.rule-txt { display: grid; gap: .35rem; font-size: .98rem; }
.rule-txt p { color: var(--ink2); font-weight: 700; }
.rule-txt .lab { display: inline-block; min-width: 6.2em; font-size: .78rem; font-weight: 800; color: var(--dim); }
.mnemo { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem; border-radius: 999px; font-weight: 800; color: var(--on-gold); background: var(--gold); white-space: nowrap; align-self: flex-start; }
.twin { padding: .55rem .85rem; border-radius: 12px; font-size: .9rem; font-weight: 700; color: var(--ink2); border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.twin b { color: var(--gold); }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .8rem; align-items: stretch; margin-bottom: 1rem; }
.fbox { padding: .9rem 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; }
.fbox h4 { font-size: 1rem; font-weight: 800; }
.fbox p { color: var(--muted); font-size: .9rem; font-weight: 700; }
.fq { display: grid; place-items: center; text-align: center; padding: .4rem; font-weight: 800; color: var(--gold); max-width: 11rem; }
.fq i { font-size: 1.4rem; display: block; margin-bottom: .3rem; }

/* ตารางสรุปกฎ */
.rtable { width: 100%; border-collapse: separate; border-spacing: 0 .35rem; }
.rtable th { text-align: left; font-size: .78rem; font-weight: 800; color: var(--dim); padding: 0 .7rem; }
.rtable td { padding: .55rem .7rem; background: var(--panel); border-block: 1px solid var(--line); vertical-align: middle; font-weight: 700; color: var(--ink2); }
.rtable td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }
.rtable td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
.rt-end { font-family: var(--f-pali); font-size: 1.15rem; font-weight: 800; color: var(--c-dhatu); white-space: nowrap; }
.rt-act { transition: filter .25s; }
.hide .rt-act { filter: blur(7px); cursor: pointer; }
.hide .rt-act.shown { filter: none; }
.rt-mn { color: var(--gold); white-space: nowrap; }

/* ── การ์ดจุดสังเกต (ด่าน ๔) ── */
.spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.spotc { --k: var(--gold); display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--k); }
.spotc-h { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.spotc-h .seal { font-family: var(--f-pali); font-size: 1.6rem; font-weight: 800; color: var(--k); white-space: nowrap; line-height: 1.25; }
.spotc-h span { font-size: .8rem; font-weight: 800; color: var(--dim); }
.spotc-t { color: var(--ink2); font-weight: 700; font-size: .95rem; }
.spotc .chip-row { gap: .3rem .9rem; font-size: 1.1rem; }
.guess-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ggrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 92px; padding: .5rem; border-radius: 14px; cursor: pointer; text-align: center;
	border: 1px solid var(--line); background: var(--panel); transition: border-color .2s, background-color .2s; }
.gtile .kword { font-size: 1.35rem; }
.gtile-a { font-size: .82rem; font-weight: 800; color: var(--dim); }
.gtile-a .pali { color: var(--k, var(--gold)); font-size: 1rem; }
.gtile:not(.open) .gtile-a { visibility: hidden; }
.gtile.open { border-color: color-mix(in srgb, var(--k, var(--gold)) 55%, transparent); background: color-mix(in srgb, var(--k, var(--gold)) 8%, var(--panel)); }
.gtile:hover { border-color: color-mix(in srgb, var(--strong) 30%, transparent); }

/* ── ตระกูลธาตุ (ด่าน ๕ — ศัพท์จากธาตุเดียว วางตามกาล × วาจก) ── */
.fam { display: grid; grid-template-columns: 8.5rem repeat(2, minmax(0, 1fr)); gap: .45rem; }
.fam-h { font-size: .82rem; font-weight: 800; text-align: center; padding: .4rem; border-radius: 10px; }
.fam-h.kattu { color: var(--v-kattu); background: color-mix(in srgb, var(--v-kattu) 10%, transparent); }
.fam-h.kamma { color: var(--v-kamma); background: color-mix(in srgb, var(--v-kamma) 10%, transparent); }
.fam-k { display: flex; flex-direction: column; justify-content: center; padding: .5rem .7rem; border-radius: 12px; border-left: 4px solid var(--k); background: color-mix(in srgb, var(--k) 8%, transparent); }
.fam-k b { color: var(--k); font-size: .95rem; }
.fam-k small { color: var(--dim); font-weight: 700; font-size: .76rem; }
.fam-c { display: flex; flex-direction: column; gap: .35rem; min-height: 64px; padding: .55rem .7rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.fam-c.empty { border-style: dashed; background: none; justify-content: center; align-items: center; color: var(--dim); font-weight: 800; }
.fam-w { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.fam-w .kword { font-size: 1.2rem; }
.vcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.vcard { padding: 1rem 1.1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--vc); display: flex; flex-direction: column; gap: .5rem; }
.vcard.kattu { --vc: var(--v-kattu); } .vcard.kamma { --vc: var(--v-kamma); }
.vcard h3 { font-size: 1.1rem; font-weight: 800; color: var(--vc); }
.vcard p { color: var(--ink2); font-weight: 700; }
.vcard .ex { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: 1.1rem; }
.mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; }
.mgroup h3 { display: flex; align-items: baseline; gap: .5rem; font-size: 1rem; font-weight: 800; margin-bottom: .4rem; }
.mgroup h3 .pali { font-size: 1.2rem; color: var(--k); }
.mgroup h3 small { color: var(--dim); font-weight: 700; }
.hide .wrow .kmean { filter: blur(7px); cursor: pointer; border-radius: 6px; background: color-mix(in srgb, var(--strong) 6%, transparent); }
.hide .wrow .kmean.shown { filter: none; background: none; }
.wrow .kmean { transition: filter .25s; }

/* ── แบบฟอร์มคำตอบ (ด่าน ๖) ── */
.pattern { padding: 1rem 1.1rem; border-radius: 16px; background: color-mix(in srgb, var(--gold) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); line-height: 2.1; font-weight: 700; color: var(--ink2); }
.slot { display: inline-block; padding: 0 .5rem; margin: 0 .1rem; border-radius: 8px; font-size: .9em; font-weight: 800; line-height: 1.6; color: var(--gold); border: 1.5px dashed color-mix(in srgb, var(--gold) 60%, transparent); white-space: nowrap; }
.forms { display: grid; gap: 1rem; }
.formc { display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem; border-radius: 18px; background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.formc-h { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; justify-content: space-between; }
.formc-h h3 { font-size: 1.1rem; font-weight: 800; }
.formc-note { color: var(--muted); font-weight: 700; font-size: .9rem; }
.formc-word { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.formc-word .kword { font-size: 2rem; }
.formc-word small { color: var(--dim); font-weight: 700; }
.fslots { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; counter-reset: fs; }
.fslot { display: grid; grid-template-columns: 2rem minmax(0, 15rem) minmax(0, 1fr); gap: .3rem .8rem; align-items: baseline; padding: .55rem .7rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); counter-increment: fs; }
.fslot::before { content: counter(fs, thai); font-weight: 800; color: var(--gold); }
.fslot-a { font-weight: 800; color: var(--strong); border-radius: 6px; transition: filter .25s; }
.fslot-w { color: var(--muted); font-size: .88rem; font-weight: 600; }
.hide .fslot-a { filter: blur(7px); cursor: pointer; background: color-mix(in srgb, var(--strong) 6%, transparent); }
.hide .fslot-a.shown { filter: none; background: none; }
.fullans { padding: .8rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--ok) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ink); font-weight: 700; line-height: 1.8; }

/* ── แยกท่อนคำตอบ (ด่าน ๗) ── */
.picker { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.picker-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.picker-l { font-size: .78rem; font-weight: 800; color: var(--dim); min-width: 5.5em; }
.wpick { min-height: 44px; padding: .15rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 4%, transparent); cursor: pointer; font-family: var(--f-pali); font-size: 1.05rem; font-weight: 800; color: var(--ink2); white-space: nowrap; }
.wpick[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.wpick.has-exam { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.anat { 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); }
.anat-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.anat-top .kword { font-size: clamp(2.2rem, 7vw, 3rem); }
.parts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .55rem .45rem; }
.part { --c: var(--ink2); display: inline-flex; flex-direction: column; gap: .15rem; padding: .4rem .7rem; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }
.part b { color: var(--c); font-weight: 800; line-height: 1.5; }
.part small { font-size: .68rem; font-weight: 800; color: var(--dim); white-space: nowrap; }
.part.fixed { --c: var(--dim); border-style: dashed; }
.part-meaning { --c: var(--strong); } .part-prefix { --c: var(--c-prefix); } .part-dhatu, .part-dhatuM { --c: var(--c-dhatu); }
.part-paccaya { --c: var(--k); } .part-cond, .part-action { --c: var(--c-rule); } .part-extra { --c: var(--c-extra); }
.anat-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8rem; font-weight: 800; color: var(--dim); }
.anat-legend span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; background: var(--c); vertical-align: -.05rem; }
.real { display: flex; flex-direction: column; gap: .5rem; }
.real-i { padding: .75rem 1rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.real-i .ybadge { margin-bottom: .35rem; }
.real-i p { color: var(--ink2); font-weight: 600; line-height: 1.8; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.stat { padding: .9rem 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--c); }
.stat b { display: block; font-size: 1.8rem; font-weight: 800; color: var(--c); line-height: 1.2; }
.stat span { font-weight: 800; }
.stat p { color: var(--muted); font-size: .88rem; font-weight: 700; margin-top: .2rem; }

/* ── คำตอบสนามหลวง (ท่อง) ── */
.recite-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.switch { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 5%, transparent); cursor: pointer; font-weight: 800; font-size: .9rem; }
.switch[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.qa-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.qa-list.one { grid-template-columns: 1fr; }
.qa { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.qa-top { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.qa-topic { padding: .05rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 800; background: color-mix(in srgb, var(--strong) 10%, transparent); color: var(--ink2); white-space: nowrap; }
.qa-exams { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 800; color: var(--gold); }
.qa-year { padding: 0 .45rem; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.qa-q { font-weight: 800; color: var(--strong); }
.qa-a { text-align: left; padding: .65rem .85rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent);
	color: var(--ink2); font-weight: 600; line-height: 1.85; cursor: default; transition: filter .25s; }
.hide .qa-a { filter: blur(8px); cursor: pointer; }
.hide .qa-a.shown { filter: none; }

/* ── คลังการ์ด (ด่าน ๙) ── */
.deck-tools { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1rem; }
.ftab { min-height: 44px; padding: 0 .95rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 4%, transparent); font-weight: 800; font-size: .88rem; cursor: pointer; color: var(--ink2); }
.ftab b { color: var(--gold); margin-left: .25rem; }
.ftab[aria-pressed="true"] { background: var(--strong); color: var(--bg); border-color: var(--strong); }
.ftab[aria-pressed="true"] b { color: var(--bg); }
.meter { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; max-width: 420px; }
.meter b { font-size: .88rem; font-weight: 800; color: var(--ink2); }
.meter-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--strong) 8%, transparent); overflow: hidden; }
.meter-bar span { display: block; height: 100%; background: var(--gold); border-radius: inherit; transition: width .3s; }
.deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.dcard { perspective: 1000px; min-height: 236px; }
.dcard-in { position: relative; width: 100%; height: 100%; min-height: inherit; transition: transform .5s; transform-style: preserve-3d; cursor: pointer; border-radius: 16px; }
.dcard.flip .dcard-in { transform: rotateY(180deg); }
.dface { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .45rem; padding: .9rem; border-radius: 16px; backface-visibility: hidden; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.dfront { align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--k) 14%, transparent), transparent 70%), var(--panel); }
.dfront .kword { font-size: 2rem; }
.dfront small { font-size: .78rem; font-weight: 800; color: var(--dim); }
.dback { transform: rotateY(180deg); font-size: .86rem; }
.dback .kmean { font-size: 1rem; color: var(--strong); }
.dback dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .6rem; margin: 0; }
.dback dt { color: var(--dim); font-weight: 700; white-space: nowrap; }
.dback dd { margin: 0; font-weight: 700; color: var(--ink2); min-width: 0; }
.dback dd .pali { font-weight: 800; }
.dknown { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; margin-top: auto; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--line); background: none; font-weight: 800; font-size: .8rem; cursor: pointer; align-self: flex-start; color: var(--muted); }
.dknown[aria-pressed="true"] { background: var(--ok); color: var(--bg); border-color: var(--ok); }
.dcard.known .dfront::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: .55rem; right: .7rem; color: var(--ok); }
.dflag { position: absolute; top: .55rem; left: .7rem; font-size: .7rem; font-weight: 800; color: var(--gold); }
.empty { padding: 2rem; text-align: center; color: var(--dim); font-weight: 700; border: 1px dashed var(--line); border-radius: 16px; }

/* ── ปุ่ม + แถบท้าย ── */
.dock { position: sticky; bottom: 0; z-index: 5; padding-bottom: env(safe-area-inset-bottom, 0px); background: linear-gradient(0deg, var(--bg) 60%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.dock .wrap { display: flex; gap: .6rem; padding-block: 1rem; }
.btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: 0 1.4rem; border-radius: 14px; border: 0; font-weight: 800; font-size: 1rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-main { background: var(--strong); color: var(--bg); }
.btn-main:hover { background: var(--gold); color: var(--on-gold); }
.btn-ghost { flex: 0 1 auto; background: color-mix(in srgb, var(--strong) 12%, transparent); color: var(--strong); }
.btn-ghost:hover { background: color-mix(in srgb, var(--strong) 18%, transparent); }
.note { color: var(--dim); font-size: .8rem; text-align: center; padding: 1rem 20px 6rem; }
.note b { color: var(--muted); }
.more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--gold); text-decoration: none; font-size: .9rem; min-height: 44px; }
.more:hover { text-decoration: underline; }

@media (max-width: 960px) {
	.board { grid-template-columns: 1fr; }
	.detail { position: static; }
	.deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.pgroups, .kbands { grid-template-columns: 1fr; }
	.spots, .vcards, .mlist, .qa-list, .ktree { grid-template-columns: 1fr; }
	.flow { grid-template-columns: 1fr; }
	.fq { max-width: none; grid-auto-flow: column; gap: .5rem; }
	.fq i { display: inline; margin: 0; transform: rotate(90deg); }
	.stats3 { grid-template-columns: 1fr; }
	.fam { grid-template-columns: 5.6rem repeat(2, minmax(0, 1fr)); gap: .35rem; }
	.fam-c { padding: .45rem .5rem; }
	.fam-w .kword { font-size: 1.05rem; }
	.fam-w .kmean { font-size: .82rem; }
	.fslot { grid-template-columns: 1.6rem minmax(0, 1fr); }
	.fslot-w { grid-column: 2; }
	.rtable thead { display: none; }
	.rtable, .rtable tbody, .rtable tr, .rtable td { display: block; }
	.rtable tr { margin-bottom: .5rem; padding: .6rem .8rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
	.rtable td { padding: .1rem 0; border: 0 !important; border-radius: 0 !important; background: none; }
}
@media (max-width: 640px) {
	.hero-art { background-position: 74% 30%; }
	.hero::before { background: linear-gradient(0deg, var(--bg) 8%, color-mix(in srgb, var(--bg) 84%, transparent) 52%, color-mix(in srgb, var(--bg) 30%, transparent) 100%); }
	.hero-inner { padding-top: 7rem; }
	.hero-compact .hero-inner { padding-top: 1.2rem; }
	.hero-compact .hero-art { opacity: .45; }
	.kr-bar-title { display: none; }
	.kr-back span, .kr-pill-link span, #theme-label { display: none; }
	.kr-pill-link, .theme-btn { width: 44px; padding: 0; justify-content: center; }
	.dock .btn { min-height: 50px; padding: 0 1rem; font-size: .95rem; }
	.dock .btn-ghost { flex: 0 0 auto; }
	.btn-ghost span { display: none; }
	.deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dgrid { grid-template-columns: 1fr; }
	.ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wrow { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
	.wrow .wsrc { grid-column: 1 / -1; white-space: normal; }
	.detail-big { font-size: 2.8rem; }
	.eq-box { min-width: 4.4rem; padding: .4rem .6rem; }
	.eq-box b { font-size: 1.5rem; }
	.machine { padding: .9rem; }
	.dcard { min-height: 250px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }