/* ผังเสียงบาลี — หน้า "ดูโครง" แบบใหม่ของเกมอักขรวิธี (/akkhara/memorize/study)
   ต้นแบบที่หลวงพี่เคาะ ๑ ต.ค. ๒๕๖๙ · แบบตารางเดิมยังอยู่ที่ /akkhara/memorize/classic
   ข้อมูลทุกตัวอ่านจาก app/data/kitaka/akkhara.json (ดู app/js/akkhara-map.js) */
@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; }
/* Layout: ฉากหอสมุดยามค่ำ → เส้นทาง ๗ ด่าน → ต้นไม้ตัวเลข → ผังอักขระที่เปลี่ยนสีตาม "เลนส์" → ตารางท่องจำ
   ดีไซน์ห้องฉายแบบหน้า /games: พื้นครามเข้ม ทองเป็นสีเน้นเดียว สีหมวดอื่นใช้เฉพาะในผัง */
:root {
	color-scheme: dark;
	--bg: #0a0f1e; --bg2: #10183a; --bg3: #0c1330; --panel: #141d3d;
	--ink: #f3f6ff; --ink2: #d7deef; --muted: #aab4d0; --dim: #7f8aa8; --strong: #ffffff;
	--gold: #f5bf45; --on-gold: #3b2600; --quote: #fde9b0; --shadow: rgba(0,0,0,.5); --on-seal: #10142a;
	--line: color-mix(in srgb, var(--strong) 10%, transparent);
	--c-sara: #7dd3fc; --c-vagga: #a5b4fc; --c-avagga: #f5bf45;
	--c-rassa: #7dd3fc; --c-deegha: #c4b5fd;
	--c-ghosa: #f5bf45; --c-aghosa: #8fa3c7;
	--c-sith: #5eead4; --c-dhan: #fda4af;
	--t-kantha: #fbbf24; --t-talu: #a3e635; --t-muddha: #fb923c; --t-danta: #38bdf8; --t-ottha: #c084fc; --t-nasika: #f472b6;
	--f-body: "Sarabun", "Thonburi", "Leelawadee UI", sans-serif;
	--f-hand: "Sriracha Local", "Sarabun", sans-serif;
}
/* โหมดสว่าง: ตามเครื่อง (ถ้าไม่ได้เลือกเอง) หรือเมื่อกดเลือก — ค่าชุดเดียวกันทั้ง ๒ ที่ */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
	--bg: #f5f7fc; --bg2: #ffffff; --bg3: #eef2fb; --panel: #ffffff;
	--ink: #141a33; --ink2: #333c5c; --muted: #525b78; --dim: #69728f; --strong: #141a33;
	--gold: #b45309; --on-gold: #ffffff; --quote: #8a4b06; --shadow: transparent; --on-seal: #ffffff;
	--c-sara: #0284c7; --c-vagga: #4f46e5; --c-avagga: #b45309;
	--c-rassa: #0284c7; --c-deegha: #7c3aed;
	--c-ghosa: #c2410c; --c-aghosa: #64748b;
	--c-sith: #0d9488; --c-dhan: #e11d48;
	--t-kantha: #d97706; --t-talu: #4d7c0f; --t-muddha: #ea580c; --t-danta: #0284c7; --t-ottha: #9333ea; --t-nasika: #db2777;
	color-scheme: light;
} }
:root[data-theme="light"] {
	--bg: #f5f7fc; --bg2: #ffffff; --bg3: #eef2fb; --panel: #ffffff;
	--ink: #141a33; --ink2: #333c5c; --muted: #525b78; --dim: #69728f; --strong: #141a33;
	--gold: #b45309; --on-gold: #ffffff; --quote: #8a4b06; --shadow: transparent; --on-seal: #ffffff;
	--c-sara: #0284c7; --c-vagga: #4f46e5; --c-avagga: #b45309;
	--c-rassa: #0284c7; --c-deegha: #7c3aed;
	--c-ghosa: #c2410c; --c-aghosa: #64748b;
	--c-sith: #0d9488; --c-dhan: #e11d48;
	--t-kantha: #d97706; --t-talu: #4d7c0f; --t-muddha: #ea580c; --t-danta: #0284c7; --t-ottha: #9333ea; --t-nasika: #db2777;
	color-scheme: light;
}
/* ฐ ญ ในคำบาลีไม่มีเชิง — ฟอนต์ Thunder Pali (Sarabun ที่เปลี่ยนเฉพาะ ฐ ญ) ชุดเดียวกับ /smart-grammar · คำไทยคงเชิง */
@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; }
.pali-nt, .cell, .big { font-family: "Thunder Pali", var(--f-body); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.akm-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 { text-wrap: balance; margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ── ฉากเปิด ───────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -2; background: url("/assets/game/hub/akkhara.jpg") right 40% / 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) 90%, transparent) 34%, color-mix(in srgb, var(--bg) 25%, transparent) 70%, color-mix(in srgb, var(--bg) 5%, 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: 600px; }
.eyebrow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .86rem; font-weight: 700; color: var(--muted); }
.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.3rem, 6vw, 3.9rem); 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); margin: 0; }
.hero-lead { color: var(--ink2); margin: 0; max-width: 34em; }

/* ── ปุ่มสลับโหมดมืด/สว่าง ─────────────────── */
.topbar { display: flex; justify-content: flex-end; padding-top: 1rem; }
.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);
	backdrop-filter: blur(8px); 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; } }

/* ── เส้นทาง ๗ ด่าน ─────────────────────────── */
.path { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; scrollbar-width: none; padding-block: .4rem 1rem; margin-top: .6rem; }
.path::-webkit-scrollbar { display: none; }
.stop { position: relative; flex: 1 0 104px; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.stop::before { content: ""; position: absolute; top: 19px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; background: var(--line); }
.stop:first-child::before { display: none; }
.stop.done::before, .stop.now::before { background: 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); letter-spacing: .03em; }

/* ── ส่วนหัวของแต่ละช่วง ─────────────────────── */
.sec { padding-block: 2.2rem; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1.1rem; }
.sec-kick { font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--gold); }
.sec h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.3; }
.sec-sub { color: var(--muted); margin: .2rem 0 0; font-size: .95rem; max-width: 40em; }

/* ── ต้นไม้ตัวเลข ๔๑ = ๘ + ๓๓ ─────────────────── */
.tree { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.6rem; align-items: center; }
.node { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .8rem 1rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; text-align: left; transition: border-color .2s, transform .2s; }
.node:hover { border-color: color-mix(in srgb, var(--strong) 30%, transparent); }
.node[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.node-n { font-size: 2.2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.node-l { font-size: .9rem; font-weight: 700; color: var(--muted); }
.node-root .node-n { font-size: clamp(3.2rem, 8vw, 4.6rem); color: var(--gold); }
.branches { display: grid; gap: .9rem; }
.branch { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .7rem; }
.branch .eq { color: var(--dim); font-weight: 800; }
.subs { display: flex; flex-wrap: wrap; gap: .5rem; }
.subs .node { padding: .5rem .8rem; }
.subs .node-n { font-size: 1.45rem; }
.k-sara .node-n { color: var(--c-sara); } .k-vagga .node-n { color: var(--c-vagga); } .k-avagga .node-n { color: var(--c-avagga); }
.k-rassa .node-n { color: var(--c-rassa); } .k-deegha .node-n { color: var(--c-deegha); } .k-cons .node-n { color: var(--strong); }

/* ── ผังอักขระ ─────────────────────────────── */
.lenses { display: flex; flex-wrap: wrap; gap: .4rem; }
.lens { min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 5%, transparent); font-weight: 800; font-size: .9rem; cursor: pointer; color: var(--ink2); }
.lens:hover { border-color: color-mix(in srgb, var(--strong) 30%, transparent); }
.lens[aria-checked="true"] { background: var(--strong); color: var(--bg); border-color: var(--strong); }
.board { display: grid; grid-template-columns: minmax(0, 820px) 300px; justify-content: center; gap: 1.4rem; margin-top: 1rem; align-items: start; }
.chart { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.2rem; border-radius: 18px; background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); min-width: 0; }
.row-label { font-size: .78rem; font-weight: 800; color: var(--dim); letter-spacing: .04em; margin-bottom: .45rem; display: flex; justify-content: space-between; gap: 1rem; }
.cells { display: grid; gap: .45rem; }
.cells-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
/* วรรค: หัวแถวบอกชื่อวรรค + ฐาน + กรณ์ (ออกสอบบ่อย จึงอยู่บรรทัดเดียวกับอักขระ) */
.vgrid { display: grid; gap: .45rem; }
.vrow { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: .7rem; align-items: center; }
.vcells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.vgrid .cell { aspect-ratio: 5 / 4; }
.vhead { font-size: .72rem; font-weight: 700; color: var(--dim); text-align: center; align-self: end; }
.vinfo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .05rem .45rem; align-content: center; padding: .45rem .6rem; border-radius: 10px;
	border-left: 4px solid var(--tc); background: color-mix(in srgb, var(--tc) 9%, transparent); min-width: 0; }
.vinfo b { grid-column: 1 / -1; font-size: .95rem; font-weight: 800; color: var(--ink); }
.vinfo dt { font-size: .74rem; font-weight: 700; color: var(--dim); }
.vinfo dd { margin: 0; font-size: .8rem; font-weight: 700; color: var(--ink2); line-height: 1.4; }
/* มุมมองฐาน ๖: เรียงตามฐาน แถวละฐาน — สระ วรรค อวรรค ของฐานนั้นอยู่บรรทัดเดียวกัน */
/* มุมมองฐาน ๖ ไม่มีการ์ดรายละเอียด (หัวแถวบอกฐาน-กรณ์อยู่แล้ว) ผังจึงกว้างเต็มแถว */
.board.wide { grid-template-columns: minmax(0, 1fr); }
.board.wide .trow { grid-template-columns: 17.5rem minmax(0, 1fr); }
.board.wide .tboard .cell { width: 3.5rem; font-size: 1.55rem; }
.std, .tboard { display: flex; flex-direction: column; gap: 1.1rem; }
.tboard { gap: .6rem; }
.trow { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .55rem; border-radius: 14px;
	background: color-mix(in srgb, var(--tc) 6%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 28%, transparent); transition: opacity .25s; }
.tboard.spot .trow:not(.lit) { opacity: .25; }
/* หัวแถวฐาน: ตราสีเต็มบอกคำสำคัญของฐาน + ชื่อเสียงบาลีเป็นสีเดียวกัน (แทนขอบสีด้านข้าง) */
.thead { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.tseal { flex: none; width: 4.1rem; height: 4.1rem; border-radius: 18px; display: grid; place-items: center; text-align: center; padding: .2rem;
	background: var(--tc); color: var(--on-seal); font-weight: 800; font-size: .95rem; line-height: 1.2;
	box-shadow: 0 8px 18px -10px var(--tc), inset 0 1px 0 color-mix(in srgb, #ffffff 35%, transparent); }
.tseal.long { font-size: .78rem; }
.thead-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.thead-name { font-size: 1.1rem; font-weight: 800; line-height: 1.3; color: color-mix(in srgb, var(--tc) 70%, var(--ink)); }
.thead dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .45rem; margin: 0; }
.thead dt { font-size: .74rem; font-weight: 700; color: var(--dim); }
.thead dd { margin: 0; font-size: .8rem; font-weight: 700; color: var(--ink2); line-height: 1.4; }
.tcells { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; min-width: 0; }
.tgroup { display: flex; flex-direction: column; gap: .2rem; }
.tgroup-l { font-size: .68rem; font-weight: 700; color: var(--dim); letter-spacing: .02em; }
.tgroup-c { display: flex; flex-wrap: wrap; gap: .35rem; }
.tsep { width: 1px; align-self: stretch; background: var(--line); margin-inline: .15rem; }
.tboard .cell { width: 3rem; aspect-ratio: 1; min-height: 0; font-size: 1.35rem; }
.cell-slot { width: 3rem; aspect-ratio: 1; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--tc) 30%, transparent); }
.board.wide .cell-slot { width: 3.5rem; }
.trow-note { grid-column: 2; font-size: .8rem; color: var(--muted); margin: 0; }
/* ฐาน + กรณ์ ขึ้นเฉพาะมุมมอง "ฐาน ๖" — มุมมองอื่นหัวแถวเหลือแค่ชื่อวรรค */
.chart:not(.lens-thana) .vrow { grid-template-columns: 4.6rem minmax(0, 1fr); }
.chart:not(.lens-thana) .vinfo { border-left: 0; background: none; padding: 0; }
.chart:not(.lens-thana) .vinfo b { font-size: .82rem; color: var(--muted); }
.chart:not(.lens-thana) .vinfo dt, .chart:not(.lens-thana) .vinfo dd { display: none; }
.cell { --c: color-mix(in srgb, var(--strong) 12%, transparent); position: relative; aspect-ratio: 1; min-height: 44px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
	background: color-mix(in srgb, var(--c) 16%, transparent); display: grid; place-items: center; cursor: pointer;
	font-size: clamp(1.25rem, 3.2vw, 1.9rem); font-weight: 700; line-height: 1; color: var(--strong);
	transition: background-color .35s ease, border-color .35s ease, opacity .25s ease, transform .2s ease; }
.cell:hover { transform: translateY(-2px); }
.cell.split { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, transparent) 50%, color-mix(in srgb, var(--c2) 22%, transparent) 50%); }
.cell.nas::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--t-nasika); }
.cell[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--strong); }
.chart.spot .cell:not(.lit) { opacity: .22; }
.cell .tag { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: .58rem; font-weight: 700; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.leg { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .2rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 4%, transparent); font-size: .86rem; font-weight: 700; cursor: pointer; color: var(--ink2); }
.leg i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex: none; }
.leg b { font-variant-numeric: tabular-nums; color: var(--strong); }
.leg[aria-pressed="true"] { border-color: var(--strong); background: color-mix(in srgb, var(--strong) 10%, transparent); }
.rule { margin: 0; padding: .7rem .9rem; 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: .92rem; }

/* แผงรายละเอียดอักขระ */
.detail { position: sticky; top: 16px; padding: 1.2rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .8rem; }
.big { font-size: 5rem; font-weight: 800; line-height: 1.05; text-align: center; padding-block: .4rem; border-radius: 14px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0; font-size: .92rem; }
.facts dt { color: var(--dim); font-weight: 700; }
.facts dd { margin: 0; font-weight: 700; min-width: 0; }
.hint { color: var(--dim); font-size: .85rem; margin: 0; text-align: center; }

/* ── ตารางท่องจำ ───────────────────────────── */
.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); }
.list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.item { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: .75rem .9rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.item-n { font-size: 1.9rem; font-weight: 800; color: var(--gold); text-align: center; font-variant-numeric: tabular-nums; border-radius: 10px; transition: filter .25s, background-color .25s; }
.item-l { font-weight: 800; }
.item-d { color: var(--muted); font-size: .9rem; }
.hide .item-n { filter: blur(9px); background: color-mix(in srgb, var(--gold) 12%, transparent); cursor: pointer; }
.hide .item-n.shown { filter: none; background: transparent; }
.item-n:focus-visible { outline-offset: 2px; }

/* ── แถบปุ่มท้ายจอ ─────────────────────────── */
.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; }
.btn-main { background: var(--strong); color: var(--bg); }
.btn-main:hover { background: var(--gold); }
.btn-ghost { flex: 0 1 auto; background: color-mix(in srgb, var(--strong) 12%, transparent); color: var(--strong); }
.note { color: var(--dim); font-size: .8rem; text-align: center; padding-block: 1rem 6rem; margin: 0; }

@media (max-width: 860px) {
	.board { grid-template-columns: 1fr; }
	.vrow { grid-template-columns: 11rem minmax(0, 1fr); }
	.detail { position: static; order: -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; }
	.detail .hint { display: none; }
	.big { font-size: 3.4rem; min-width: 5.5rem; padding-inline: .6rem; }
	.facts { font-size: .86rem; }
	.hint { text-align: left; }
}
@media (max-width: 640px) {
	.hero-art { background-position: 70% 30%; }
	.hero::before { background: linear-gradient(0deg, var(--bg) 8%, color-mix(in srgb, var(--bg) 82%, transparent) 52%, color-mix(in srgb, var(--bg) 30%, transparent) 100%); }
	.hero-inner { padding-top: 6rem; }
	.tree { grid-template-columns: 1fr; }
	.branch { grid-template-columns: 1fr; gap: .4rem; }
	.branch .eq { display: none; }
	.cells-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vrow { grid-template-columns: 1fr; gap: .3rem; }
	.trow, .board.wide .trow { grid-template-columns: 1fr; gap: .45rem; }
	.board.wide .tboard .cell { width: 2.9rem; font-size: 1.3rem; }
	.trow-note { grid-column: 1; }
	.tsep, .tghost { display: none; }
	.tcells { gap: .55rem .9rem; }
	.tboard .cell { width: 2.9rem; font-size: 1.3rem; }
	.vhead-row .vinfo-spacer { display: none; }
	.vinfo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .3rem .55rem; }
	.vinfo b { font-size: .86rem; }
	.vinfo dt { font-size: .7rem; } .vinfo dd { font-size: .74rem; }
	.vcells { gap: .35rem; }
	.vgrid { gap: .6rem; }
	.chart { padding: .9rem; }
	.list { grid-template-columns: 1fr; }
	.btn-ghost span { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── แถบบนของหน้า (ห้องเกม · ชื่อเกม · แบบเดิม · โหมดสี) ── */
.akm-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); }
.akm-bar-in { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 60px; }
.akm-back, .akm-classic { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--ink); font-weight: 800; font-size: .9rem; text-decoration: none; }
.akm-back:hover, .akm-classic:hover { color: var(--gold); }
.akm-bar-title { font-weight: 800; font-size: .95rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akm-bar-title i { color: var(--gold); margin-right: .25rem; }
.akm-bar-actions { display: flex; align-items: center; gap: .5rem; }
.akm-classic { padding: 0 .9rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--strong) 22%, transparent); }
.akm-error { margin-block: 2rem 0; padding-block: 1rem; color: var(--ink); font-weight: 700; }
.akm-error a, .note a { color: var(--gold); font-weight: 800; }
a.btn { text-decoration: none; }
a.stop { text-decoration: none; color: inherit; }
a.stop:hover .stop-dot { border-color: var(--gold); color: var(--ink); }
a.stop:hover .stop-name { color: var(--ink); }
@media (max-width: 640px) {
	.akm-bar-title { display: none; }
	.akm-back span, .akm-classic span, #theme-label { display: none; }
	.akm-classic, .theme-btn { width: 44px; padding: 0; justify-content: center; }
}
.btn { white-space: nowrap; }
@media (max-width: 640px) {
	.dock .btn { min-height: 50px; padding: 0 1rem; font-size: .95rem; }
	.dock .btn-ghost { flex: 0 0 auto; }
}

/* ── เสียงอ่าน ───────────────────────────────────── */
.akm-tools { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
.voicebar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.vb-on, .vb-pick button { min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--strong) 5%, transparent);
	color: var(--ink2); font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.vb-on[aria-pressed="false"] { color: var(--dim); }
.vb-on[aria-pressed="false"] i::before { content: "\f6a9"; }
.vb-pick { display: inline-flex; gap: .25rem; padding: .2rem; border-radius: 999px; border: 1px solid var(--line); }
.vb-pick button { min-height: 34px; border: 0; background: none; }
.vb-pick button[aria-checked="true"] { background: var(--gold); color: var(--on-gold); }
.vb-pick[data-off="1"] { opacity: .45; }
.vb-on:focus-visible, .vb-pick button:focus-visible, .say-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cell.is-saying { box-shadow: 0 0 0 3px var(--gold); }
.say-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line);
	background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--ink); font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; }
.say-btn[hidden] { display: none; }
@media (max-width: 860px) { .akm-tools { align-items: stretch; } .voicebar { justify-content: flex-start; } .detail .say-btn { grid-column: 1 / -1; order: 3; } .detail .facts { order: 2; } }
.say-btn { white-space: nowrap; }