/* สระ ๘ (/akkhara/sara/study) — ชั้นเสริมบน akkhara-map.css (ธีม ตัวแปรสี แถบบน ฉากเปิด ใช้ร่วมกัน)
   สีความหมาย: รัสสะ = ฟ้า · ทีฆะ = ม่วง (ชุดเดียวกับเลนส์รัสสะ·ทีฆะในผังเสียง) · ครุ = ส้มหนัก · ลหุ = เขียวอมฟ้าเบา */
:root { --c-garu: #fb923c; --c-lahu: #5eead4; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --c-garu: #c2410c; --c-lahu: #0f766e; } }
:root[data-theme="light"] { --c-garu: #c2410c; --c-lahu: #0f766e; }
.c-rassa { color: var(--c-rassa); } .c-deegha { color: var(--c-deegha); }
.c-garu { color: var(--c-garu); } .c-lahu { color: var(--c-lahu); }
.hero-lead b { color: var(--strong); }
.pali { font-family: "Thunder Pali", var(--f-body); }

/* คำสำคัญในข้อความ */
.kw { font-weight: 800; white-space: nowrap; }
.kw-rassa { color: var(--c-rassa); } .kw-deegha { color: var(--c-deegha); }
.kw-garu { color: var(--c-garu); } .kw-lahu { color: var(--c-lahu); }
.kw-heavy { color: var(--strong); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-garu) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ── ผังคู่สระ ── */
.pairs { display: grid; gap: .6rem; }
.prow { display: grid; grid-template-columns: 9rem repeat(2, minmax(0, 1fr)) 6.5rem; gap: .7rem; align-items: center; }
.prow .cell { aspect-ratio: auto; height: 5.2rem; font-size: clamp(1.9rem, 4.2vw, 2.6rem); font-weight: 800; }
.prow .cell[data-type="รัสสะ"] { color: var(--c-rassa); }
.prow .cell[data-type="ทีฆะ"] { color: var(--c-deegha); }
.pslot { width: auto; aspect-ratio: auto; height: 5.2rem; border: 1.5px dashed color-mix(in srgb, var(--c-rassa) 28%, transparent); background: color-mix(in srgb, var(--strong) 2%, transparent); }
.prow-lone + .prow-lone { margin-top: -.1rem; }
.phead { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding-bottom: .2rem; border-bottom: 3px solid var(--hc); }
.phead b { font-size: 1.15rem; font-weight: 800; color: var(--hc); }
.phead span { font-size: .78rem; font-weight: 700; color: var(--dim); }
.phead-rassa { --hc: var(--c-rassa); } .phead-deegha { --hc: var(--c-deegha); }
.plabel { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.plabel b { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.plabel span { font-size: .74rem; font-weight: 700; color: var(--dim); }
.prow-lone .plabel b { color: var(--gold); font-size: .95rem; }
.pair-play { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: 0 .8rem; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 5%, transparent); color: var(--ink2); font-weight: 800; font-size: .85rem; }
.pair-play:hover { border-color: var(--gold); color: var(--strong); }
.pair-play i { font-size: .75rem; color: var(--gold); }
.pair-play[hidden], body:not(.has-voice) .pair-play { visibility: hidden; }
.big-sara { color: var(--c); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%); }

/* ── การ์ดนิยาม ครุ · ลหุ ── */
.gl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gl-card { --gc: var(--c-garu); display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.25rem; border-radius: 18px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 9%, var(--bg2)), var(--bg3)); border: 1px solid color-mix(in srgb, var(--gc) 32%, transparent); }
.gl-lahu { --gc: var(--c-lahu); }
.gl-head { display: flex; align-items: center; gap: .75rem; }
.gl-seal { flex: none; white-space: nowrap; display: grid; place-items: center; min-width: 4.4rem; height: 3.2rem; padding: 0 .9rem; border-radius: 14px; background: var(--gc); color: var(--on-seal); font-size: 1.6rem; font-weight: 800; }
.gl-sub { font-size: 1.05rem; font-weight: 800; color: var(--gc); }
.gl-def { margin: 0; color: var(--ink2); font-size: 1rem; line-height: 1.75; }
.gl-formula { margin: 0; margin-top: auto; padding: .65rem .85rem; border-radius: 12px; background: color-mix(in srgb, var(--gc) 10%, transparent); color: var(--ink); font-weight: 700; font-size: .95rem; }
.gl-formula-l { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .05em; color: var(--dim); margin-bottom: .1rem; }

/* ── ทางตัดสิน ๒ ขั้น ── */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .8rem; margin-top: 1rem; }
.fstep { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem 1.1rem 3.6rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.fnum { position: absolute; left: 1rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); font-weight: 800; font-size: .95rem; }
.fq { margin: 0; font-weight: 800; color: var(--strong); font-size: 1.02rem; line-height: 1.5; }
.fouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.fout { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .5rem .7rem; border-radius: 12px; background: color-mix(in srgb, var(--strong) 4%, transparent); border: 1px solid var(--line); }
.fout-l { font-size: .74rem; font-weight: 800; color: var(--dim); }
.fout-v { font-size: .88rem; font-weight: 700; color: var(--ink2); }
.farrow { display: grid; place-items: center; color: var(--gold); font-size: 1.1rem; }
.fverdict { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem; padding: .1rem .7rem; border-radius: 999px; font-weight: 800; font-size: .95rem; color: var(--on-seal); background: var(--fv); }
.fv-garu { --fv: var(--c-garu); } .fv-lahu { --fv: var(--c-lahu); }

/* ── ตัวอย่าง ครุ ลหุ ── */
.ex-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ex-groups.guess { grid-template-columns: 1fr; }
.exg { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; border-radius: 18px; background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.exg-head { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--ink); font-size: .95rem; }
.exg-n { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--dim); white-space: nowrap; }
.exg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.exg-mixed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.ex { --ec: var(--c-garu); display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem .5rem .7rem; border-radius: 14px; text-align: center; cursor: default;
	background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.ex-lahu { --ec: var(--c-lahu); }
.ex-word { white-space: nowrap; font-size: 1.7rem; font-weight: 800; line-height: 1.25; letter-spacing: .01em; }
.ex-dim { color: var(--dim); }
.ex-hi { color: var(--ec); border-bottom: 3px solid var(--ec); padding-bottom: 1px; }
.ex-ans { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ex-ans .fverdict { font-size: .8rem; min-width: 2.6rem; padding: 0 .55rem; }
.ex-why { font-size: .78rem; font-weight: 600; color: var(--muted); line-height: 1.45; }
.ex-tap { display: none; font-size: .78rem; font-weight: 700; color: var(--dim); }
.guess .ex { cursor: pointer; --ec: var(--gold); }
.guess .ex:hover { border-color: color-mix(in srgb, var(--strong) 30%, transparent); }
.guess .ex:not(.shown) .ex-ans { display: none; }
.guess .ex:not(.shown) .ex-tap { display: block; }
.guess .ex.shown { --ec: var(--c-garu); border-color: color-mix(in srgb, var(--ec) 45%, transparent); }
.guess .ex.shown.ex-lahu { --ec: var(--c-lahu); }

/* ── คำตอบสนามหลวง ── */
.qa-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.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: .4rem .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); }
.qa-exams { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 800; color: var(--gold); }
.qa-year { padding: 0 .45rem; border-radius: 6px; font-weight: 700; color: var(--ink2); background: color-mix(in srgb, var(--gold) 12%, transparent); font-variant-numeric: tabular-nums; }
.qa-q { margin: 0; font-weight: 800; color: var(--strong); font-size: 1rem; line-height: 1.5; }
.qa-a { text-align: left; padding: .65rem .8rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent);
	color: var(--ink2); font-size: .95rem; font-weight: 600; line-height: 1.75; cursor: default; transition: filter .25s; }
.hide .qa-a { filter: blur(7px); cursor: pointer; user-select: none; }
.hide .qa-a.shown { filter: none; }

@media (max-width: 860px) {
	.gl-cards, .ex-groups, .qa-list { grid-template-columns: 1fr; }
	.flow { grid-template-columns: 1fr; }
	.farrow { transform: rotate(90deg); }
	.exg-mixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.prow { grid-template-columns: 5.2rem repeat(2, minmax(0, 1fr)) 2.75rem; gap: .45rem; }
	.pair-play { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; }
	.pair-play span { display: none; }
	.pair-play i { font-size: .85rem; }
	.prow .cell, .pslot { height: 4.3rem; }
	.plabel b { font-size: .92rem; } .prow-lone .plabel b { font-size: .8rem; }
	.exg { padding: .8rem; }
	.exg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
	.exg-mixed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ex { padding: .65rem .3rem .6rem; }
	.ex-word { font-size: clamp(1rem, 5vw, 1.3rem); }
	.ex-why { font-size: .7rem; }
	.fstep { padding-left: 3.2rem; }
	.fnum { left: .8rem; }
}

/* ════ ส่วนกลางของทุกด่าน (akkhara-stage.php) ════ */
.c-vagga { color: var(--c-vagga); } .c-avagga { color: var(--c-avagga); }
.c-ghosa { color: var(--c-ghosa); } .c-aghosa { color: var(--c-aghosa); }
.c-sith { color: var(--c-sith); } .c-dhan { color: var(--c-dhan); }
.kw-ghosa { color: var(--c-ghosa); } .kw-aghosa { color: var(--c-aghosa); } .kw-avagga { color: var(--c-avagga); }
.kw-sith { color: var(--c-sith); } .kw-dhan { color: var(--c-dhan); }
/* ดาวใต้ชื่อด่านในแถบเส้นทาง */
.stop-stars { display: inline-flex; gap: 1px; font-size: .78rem; line-height: 1; color: color-mix(in srgb, var(--strong) 22%, transparent); }
.stop-stars .on { color: var(--gold); }
.stop.done::before { background: var(--gold); }
.stop.done .stop-dot { border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--ink); }
/* หน้าเกม: ฉากเปิดเตี้ยลง ให้สนามขึ้นมาใกล้ตา */
.hero-compact .hero-inner { padding-block: 1.6rem 1rem; gap: .45rem; }
.hero-compact h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); }
.hero-compact .path { margin-top: .2rem; padding-bottom: .6rem; }
.hero-compact .stop-dot { width: 34px; height: 34px; font-size: .9rem; }
.hero-compact .stop::before { top: 16px; }

/* ── ด่าน ๓ ผังวรรค ── */
.bgrid { display: grid; gap: .5rem; }
.brow { display: grid; grid-template-columns: 6.6rem repeat(5, minmax(0, 1fr)) 6.5rem; gap: .5rem; align-items: center; }
.bhead { font-size: .74rem; font-weight: 800; color: var(--dim); text-align: center; }
.brow .cell { aspect-ratio: auto; height: 4.4rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; }
.bav .cells .cell { aspect-ratio: auto; height: 4rem; }
.gl-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-vagga { --gc: var(--c-vagga); } .gl-avagga { --gc: var(--c-avagga); } .gl-nik { --gc: var(--t-nasika); }
.gl-ghosa { --gc: var(--c-ghosa); } .gl-aghosa { --gc: var(--c-aghosa); } .gl-sith { --gc: var(--c-sith); } .gl-dhan { --gc: var(--c-dhan); }
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.four-card { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1rem .9rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
	color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
a.four-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.four-card.is-here { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.four-n { position: absolute; top: .7rem; right: .8rem; font-size: 2rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--gold) 35%, transparent); }
.four-k { font-size: .76rem; font-weight: 800; color: var(--gold); letter-spacing: .02em; }
.four-t { font-size: 1.12rem; font-weight: 800; color: var(--strong); line-height: 1.35; }
.four-d { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.four-go { margin-top: auto; padding-top: .3rem; font-size: .8rem; font-weight: 800; color: var(--ink2); }
@media (max-width: 860px) {
	.gl-cards-3 { grid-template-columns: 1fr; }
	.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.brow { grid-template-columns: 3.4rem repeat(5, minmax(0, 1fr)) 2.4rem; gap: .3rem; }
	.brow .plabel span { display: none; }
	.brow .plabel b { font-size: .78rem; }
	.brow .cell { height: 3.2rem; font-size: 1.3rem; }
	.brow .pair-play { width: 2.4rem; height: 2.4rem; }
	.bhead { font-size: .62rem; }
	.four { grid-template-columns: 1fr; }
}

/* ── ด่าน ๔ โฆสะ · สิถิล ── */
.bgrid-g .brow { grid-template-columns: 6.6rem repeat(5, minmax(0, 1fr)); }
.cell.is-none { color: var(--dim); border-style: dashed; }
.none-note { margin: 0; font-size: .86rem; color: var(--muted); }
.none-note b { color: var(--ink2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .05rem .6rem; align-items: baseline; padding: .5rem .6rem; border-radius: 12px;
	background: color-mix(in srgb, var(--strong) 4%, transparent); border: 1px solid var(--line); }
.steps li::before { content: counter(st, thai); grid-row: span 2; align-self: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
	background: var(--gold); color: var(--on-gold); font-weight: 800; font-size: .85rem; }
.steps-q { font-size: .76rem; font-weight: 700; color: var(--dim); }
.steps-a { font-size: .95rem; font-weight: 800; color: var(--strong); line-height: 1.45; }
.gl-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { min-width: 2.5rem; height: 2.5rem; padding: 0 .4rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent);
	background: color-mix(in srgb, var(--gc) 14%, transparent); color: var(--strong); font-family: "Thunder Pali", var(--f-body); font-weight: 800; font-size: 1.2rem; cursor: pointer; }
.chip:hover { background: color-mix(in srgb, var(--gc) 26%, transparent); }
@media (max-width: 1000px) { .gl-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.bgrid-g .brow { grid-template-columns: 3.4rem repeat(5, minmax(0, 1fr)); }
	.gl-cards-4 { grid-template-columns: 1fr; }
}

/* ── ด่าน ๕ ฐาน · กรณ์ ── */
.tboard-s .trow { grid-template-columns: 19rem minmax(0, 1fr); }
.tboard-s .cell { width: 3.4rem; font-size: 1.55rem; }
.kar-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .9rem; }
.kar-l { font-size: .82rem; font-weight: 800; color: var(--dim); }
.kar-bar .leg span { font-weight: 800; color: var(--strong); }
.kar-bar .leg b { font-size: .76rem; color: var(--dim); }
.kar-seal { font-size: 1.15rem; padding: 0 .8rem; height: 2.8rem; }
.kar-th { margin: 0; font-weight: 800; color: var(--gc); font-size: 1rem; }
.kar-list { display: flex; flex-direction: column; gap: .35rem; }
.kar-item { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .4rem .65rem; border-radius: 10px;
	background: color-mix(in srgb, var(--tc) 12%, transparent); border-left: 3px solid var(--tc); }
.kar-item b { font-weight: 800; color: var(--strong); }
.kar-item span { font-size: .8rem; font-weight: 700; color: var(--muted); }
.duo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.duo-card { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.duo-top { display: flex; flex-wrap: wrap; gap: .35rem; }
.duo-top .cell { width: 3.4rem; aspect-ratio: 1; font-size: 1.6rem; font-weight: 800; }
.duo-chaa { font-size: 1.1rem; font-weight: 800; color: var(--gold); line-height: 1.35; word-break: break-word; }
.duo-note { font-size: .9rem; font-weight: 700; color: var(--ink2); }
@media (max-width: 1000px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.tboard-s .trow { grid-template-columns: 1fr; }
	.tboard-s .cell { width: 2.9rem; font-size: 1.3rem; }
	.duo { grid-template-columns: 1fr; }
}

/* ── ด่าน ๖ ทายนิยาม (หน้าทบทวน) ── */
.def-meter { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.def-mtxt { flex: none; font-weight: 800; color: var(--gold); font-size: .95rem; }
.def-bar { flex: 1; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--strong) 8%, transparent); overflow: hidden; }
.def-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 60%, #fff)); transition: width .4s ease; }
.def-toc { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.def-toc-a { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .85rem; border-radius: 999px; border: 1px solid var(--line);
	background: color-mix(in srgb, var(--strong) 4%, transparent); color: var(--ink2); font-weight: 800; font-size: .86rem; text-decoration: none; }
.def-toc-a:hover { border-color: var(--gold); color: var(--strong); }
.def-toc-a b { font-size: .74rem; color: var(--dim); }
.def-topics { display: flex; flex-direction: column; gap: 1.6rem; }
.def-blk { scroll-margin-top: 80px; }
.def-h { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 800; margin-bottom: .7rem; }
.def-hn { width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); font-size: .95rem; }
.def-known { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--line);
	background: none; color: var(--dim); font-weight: 800; font-size: .78rem; cursor: pointer; }
.def-known[aria-pressed="true"] { color: var(--c-lahu); border-color: color-mix(in srgb, var(--c-lahu) 45%, transparent); background: color-mix(in srgb, var(--c-lahu) 10%, transparent); }
.qa.is-known { border-color: color-mix(in srgb, var(--c-lahu) 35%, transparent); }

/* ── ด่าน ๘ คลังการ์ด ── */
.deck-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1rem; }
.deck-ctl .def-meter { flex: 1 1 320px; margin: 0; }
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .8rem; }
.dcard { --kc: var(--c-vagga); display: flex; flex-direction: column; gap: .35rem; perspective: 900px; }
.dk-sara { --kc: var(--c-sara); } .dk-avagga { --kc: var(--c-avagga); }
.dcard-in { position: relative; height: 15.5rem; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.3,1); color: inherit; text-align: left; }
.dcard.flip .dcard-in { transform: rotateY(180deg); }
.dface { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column;
	border: 1px solid color-mix(in srgb, var(--kc) 40%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 14%, var(--bg2)), var(--bg3)); }
.dfront { align-items: center; justify-content: center; gap: 0; }
.dch { font-family: "Thunder Pali", var(--f-body); font-size: 4.2rem; font-weight: 800; line-height: 1.5; color: var(--kc); }
.dkind { font-size: .78rem; font-weight: 800; color: var(--dim); }
.dback { transform: rotateY(180deg); padding: .75rem .8rem; gap: .4rem; }
.dch-s { font-family: "Thunder Pali", var(--f-body); font-size: 1.6rem; font-weight: 800; color: var(--kc); line-height: 1; }
.dfacts { display: flex; flex-direction: column; gap: .3rem; overflow: auto; }
.drow { display: flex; flex-direction: column; }
.dk { font-size: .66rem; font-weight: 800; color: var(--dim); letter-spacing: .03em; }
.dv { font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.dknown { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); background: none;
	color: var(--dim); font-weight: 800; font-size: .78rem; cursor: pointer; }
.dknown[aria-pressed="true"] { color: var(--c-lahu); border-color: color-mix(in srgb, var(--c-lahu) 45%, transparent); background: color-mix(in srgb, var(--c-lahu) 10%, transparent); }
.dcard.is-known .dface { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-lahu) 60%, transparent); }
@media (max-width: 640px) {
	.deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
	.dcard-in { height: 14.5rem; }
	.dch { font-size: 3.4rem; }
}
@media (prefers-reduced-motion: reduce) { .dcard-in { transition: none; } }

.qa-list-1 { grid-template-columns: 1fr; }
.hero-compact .hero-lead { font-size: .95rem; }
@media (max-width: 640px) { .hero-compact .hero-inner { padding-top: 4.5rem; } .hero-compact .hero-lead { display: none; } }