/* ห้องเรียนสนธิ "รอยต่อ" (/sandhi/<ด่าน>/study|play) — ต่อจาก akkhara-map.css + akkhara-stage.css (+ akkhara-play.css)
   สีประจำประเภทสนธิชุดเดียวกับผังสนธิด่าน ๑ (sandhi-map.css): สระ = ฟ้า · พยัญชนะ = ม่วง · นิคคหิต = ชมพู
   ส่วนประกอบใหม่: การ์ดรอยต่อ .seam (แตะแยก/ต่อ) · ป้ายวิธี .mchip · บอร์ดวิธี ๘ · กรณีแปลงนิคคหิต · ชุดข้อสอบปีจริง */
:root { --t-sara: #7dd3fc; --t-byan: #c4b5fd; --t-nikk: #f9a8d4; }
.sd-page { --panel2: color-mix(in srgb, var(--ink) 5%, var(--panel)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --t-sara: #0369a1; --t-byan: #6d28d9; --t-nikk: #be185d; } }
:root[data-theme="light"] { --t-sara: #0369a1; --t-byan: #6d28d9; --t-nikk: #be185d; }
:root[data-theme="dark"] { --t-sara: #7dd3fc; --t-byan: #c4b5fd; --t-nikk: #f9a8d4; }

.hero-art { background-image: var(--hero-img); background-position: center 55%; }
@media (max-width: 640px) { .hero-art { background-position: 65% 45%; } }

[data-type="sara"][data-type] { --c: var(--t-sara); } [data-type="byan"][data-type] { --c: var(--t-byan); } [data-type="nikk"][data-type] { --c: var(--t-nikk); }
.kw-sara { color: var(--t-sara); } .kw-byan { color: var(--t-byan); } .kw-nikk { color: var(--t-nikk); }
.pali, .sw, .sparts, .pw { font-family: "Thunder Pali", var(--f-body); }

/* ── ป้าย ── */
.tchip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 11px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c, var(--gold)) 45%, transparent); background: color-mix(in srgb, var(--c, var(--gold)) 12%, transparent); color: var(--c, var(--gold)); font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.tchip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--gold)); }
.mchip { display: inline-flex; align-items: baseline; gap: 6px; min-height: 28px; padding: 2px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); white-space: nowrap; }
.mchip b { font-size: 15px; color: var(--strong); }
.mchip span { font-size: 13px; color: var(--muted); }

/* ══════════ การ์ดรอยต่อ ══════════ */
.sw, .sparts { font-weight: 800; color: var(--strong); white-space: nowrap; line-height: 1.4; }
.sw .hl, .sparts .hl { color: var(--c, var(--gold)); background: color-mix(in srgb, var(--c, var(--gold)) 20%, transparent); border-radius: 6px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--c, var(--gold)); }
.seam-bar { display: inline-block; width: 3px; height: .95em; margin: 0 3px; vertical-align: -0.1em; border-radius: 2px; background: var(--c, var(--gold)); box-shadow: 0 0 8px var(--c, var(--gold)); }
.splus { margin: 0 .4em; color: var(--muted); font-weight: 700; }
.seam { --c: var(--gold); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 14px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.seam::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.seam-face { all: unset; box-sizing: border-box; display: grid; place-items: center; min-height: 88px; padding: 10px 8px 22px; border-radius: 12px; background: var(--panel2); border: 1px dashed color-mix(in srgb, var(--c) 40%, var(--line)); cursor: pointer; position: relative; text-align: center; }
.seam-face:hover { border-color: var(--c); }
.seam-face:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.seam-joined, .seam-split { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .3, 1.1); }
.seam-joined .sw { font-size: 26px; }
.seam-split .sparts { font-size: 22px; }
.seam-gap { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border-radius: 99px; background: var(--c); color: var(--bg); font-size: 13px; font-weight: 800; }
.seam-gap b { font-size: 14.5px; }
.seam-split { opacity: 0; transform: scaleX(.7); pointer-events: none; }
.seam.is-split .seam-split { opacity: 1; transform: none; }
.seam.is-split .seam-joined { opacity: 0; transform: scaleX(1.25); }
.seam-hint { position: absolute; bottom: 4px; left: 0; right: 0; font-size: 11.5px; color: var(--dim); }
.seam-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.seam-name { font-size: 15px; color: var(--strong); }
.seam-exam { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.seam-detail { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink2, var(--muted)); }
.seam.is-compact .seam-face { min-height: 74px; }
.seam.is-compact .seam-joined .sw { font-size: 22px; }
.seam.is-compact .seam-split .sparts { font-size: 19px; }
.seam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
@media (max-width: 420px) { .seam-joined .sw { font-size: 23px; } .seam-split .sparts { font-size: 19px; } .seam-grid { grid-template-columns: 1fr; } }

/* ── ตัวกรอง ── */
.sd-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sd-filter .lens[data-type] { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.sd-filter .lens[data-type][aria-checked="true"] { background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--strong); border-color: var(--c); }

/* ── ต้นแบบ ๓ จังหวะ / แกะรอย ── */
.model { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.beats { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: b; }
.beats li { counter-increment: b; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.beats li::before { content: counter(b, thai); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-gold, #1b1300); font-weight: 800; }
.beats .bt { display: block; font-size: 16px; font-weight: 800; color: var(--strong); }
.beats span { font-size: 15px; line-height: 1.7; color: var(--ink2, var(--muted)); }
.sumline { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--strong); font-size: 15px; line-height: 1.7; }
.sumline > b:first-child { color: var(--gold); }
@media (max-width: 860px) { .model { grid-template-columns: 1fr; } }
.traces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.trace { padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.trace h3 { margin: 0; font-size: 16px; color: var(--strong); }
.beats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .beats-4 { grid-template-columns: 1fr; } }
.trace ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.65; color: var(--ink2, var(--muted)); }
.trace .ans { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--panel2); font-size: 14.5px; line-height: 1.7; color: var(--strong); }
@media (max-width: 760px) { .traces { grid-template-columns: 1fr; } }
.hintbox { margin-top: 14px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--line2, var(--line)); font-size: 14.5px; line-height: 1.75; color: var(--ink2, var(--muted)); }
.hintbox > b:first-child { color: var(--gold); }

/* ── บอร์ดวิธี ๘ (ด่านต่อบท) ── */
.mboard { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: sticky; top: 72px; }
.mbtn { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; min-height: 76px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.mbtn:hover { border-color: var(--gold); }
.mbtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.mbtn[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); background: color-mix(in srgb, var(--gold) 8%, var(--panel)); }
.mbtn b { font-size: 18px; color: var(--strong); }
.mbtn .mm { font-size: 13px; color: var(--muted); }
.mbtn .dots { display: flex; gap: 4px; margin-top: auto; }
.mbtn .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.mbtn .dots i.off { background: transparent; border: 1px dashed var(--muted); }
.mdetail h3 { margin: 0; font-size: 22px; color: var(--strong); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.mdetail h3 span { font-size: 15px; color: var(--muted); font-weight: 700; }
.mdetail .mtypes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.mdetail .tchip.off { opacity: .45; text-decoration: line-through; }
@media (max-width: 900px) { .mboard { grid-template-columns: 1fr; } .mlist { position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── กรณีแปลงนิคคหิต · อาคม ๘ ── */
.cases { display: grid; gap: 10px; }
.case { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); --c: var(--t-nikk); }
.case > .n { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: var(--bg); font-weight: 800; }
.case .bt { display: block; font-size: 16px; font-weight: 800; color: var(--strong); }
.case p { margin: 2px 0 8px; font-size: 14.5px; color: var(--ink2, var(--muted)); }
.case .seam-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.letters8 { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.letters8 span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--t-byan) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--t-byan) 45%, transparent); color: var(--t-byan); font-size: 24px; font-weight: 800; }

/* ── ประเภท ๓ (ด่านบอกชนิด+วิธี) ── */
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tcard { --c: var(--gold); display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--c) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); border-top: 5px solid var(--c); }
.tcard .tn { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tcard h3 { margin: 0; font-size: 20px; color: var(--c); }
.tcard .tbig { font-size: 34px; font-weight: 800; color: var(--c); line-height: 1; }
.tcard .tbig small { font-size: 14px; color: var(--muted); margin-left: 4px; }
.tcard .tj { font-size: 14px; color: var(--muted); font-weight: 700; }
.tcard .tm { display: flex; flex-wrap: wrap; gap: 6px; }
.tcard .tex { font-size: 18px; font-weight: 800; color: var(--strong); }
@media (max-width: 860px) { .types { grid-template-columns: 1fr; } }
.tsect { margin-top: 18px; }
.mrow { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px dashed var(--line); align-items: start; }
.mrow .mh b { display: block; font-size: 17px; color: var(--strong); }
.mrow .mh span { font-size: 13.5px; color: var(--muted); }
.mrow .mh small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--dim); }
.mrow .empty { font-size: 14px; color: var(--dim); padding: 10px 0; }
@media (max-width: 640px) { .mrow { grid-template-columns: 1fr; gap: 8px; } }

/* ── ข้อสอบปีจริง ── */
.papers { display: grid; gap: 14px; }
.paper { padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.paper-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.paper-h h3 { margin: 0; font-size: 19px; color: var(--strong); }
.paper-h span { font-size: 13.5px; color: var(--muted); }
.pitems { display: grid; gap: 8px; }
.pitem { --c: var(--gold); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel2); align-items: start; }
.pitem .l { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-weight: 800; }
.pitem .pq { font-size: 15px; color: var(--strong); font-weight: 700; line-height: 1.6; }
.pitem .pq .sparts, .pitem .pq .sw { font-size: 18px; }
.pitem .pa { all: unset; box-sizing: border-box; display: block; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--panel); font-size: 14.5px; line-height: 1.7; color: var(--ink2, var(--muted)); cursor: default; }
.papers.hide .pa { filter: blur(6px); cursor: pointer; user-select: none; }
.papers.hide .pa.shown { filter: none; }
.year-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.year-toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; font-weight: 700; font-size: 14px; color: var(--ink2, var(--muted)); white-space: nowrap; }
.year-toc a:hover { border-color: var(--gold); color: var(--strong); }

/* ── คลังการ์ด: หลังการ์ด ── */
.sd-page .dback .sparts { font-size: 18px; }
.sd-page .dfront .sw { font-size: 26px; }
.sd-page .dcard[data-type] .dface { border-top: 4px solid var(--c); }

/* ── เกม: แตะรอยต่อ (layout seam) · โจทย์คำเดิม ๒ บท ── */
.ch-seam { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.ch-seam .choice { min-width: 0; min-height: 60px; padding: 6px 10px; justify-content: center; }
.ch-seam .ckey { display: none; }
.ch-seam .ctext { font-size: clamp(22px, 6vw, 30px); white-space: nowrap; }
.qform.is-long { font-size: clamp(24px, 6vw, 36px); }
.qvis { margin-top: 6px; }
.qvis .seam { background: transparent; }

@media (prefers-reduced-motion: reduce) { .seam-joined, .seam-split { transition: none; } }
.tone-sara { --tc: var(--t-sara); } .tone-byan { --tc: var(--t-byan); } .tone-nikk { --tc: var(--t-nikk); }
.ch-two .tone-sara, .ch-two .tone-byan, .ch-two .tone-nikk { border-top: 4px solid var(--tc); }
.seam.is-quiz:not(.is-split) .seam-meta > :not(.seam-exam), .seam.is-quiz:not(.is-split) .seam-detail { visibility: hidden; }