/* เกมกลางของทุกด่านอักขรวิธี (/akkhara/<ด่าน>/play) — ชั้นบน akkhara-map.css + akkhara-stage.css (ตัวแปรสีชุดเดียวกัน) */
#play-root { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.4rem 4rem; max-width: 880px; }

/* ── หน้าเริ่ม ── */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.4rem; padding: 1.4rem; border-radius: 20px;
	background: linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.intro-h { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; margin: .1rem 0 .8rem; }
.rules { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.rules li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .6rem; align-items: baseline; color: var(--ink2); font-size: .95rem; }
.rules i { color: var(--gold); text-align: center; }
.intro-r { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; padding: 1.1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); text-align: center; }
.intro-best-l { font-size: .78rem; font-weight: 800; color: var(--dim); }
.intro-best { font-size: 1.2rem; font-weight: 800; color: var(--strong); }
.intro-plays { font-size: .8rem; color: var(--dim); }
.btn-start { margin-top: .4rem; }
.intro-r .btn { flex: none; }

/* ดาว */
.stars { display: inline-flex; justify-content: center; gap: .15rem; font-size: 1.4rem; line-height: 1; color: color-mix(in srgb, var(--strong) 16%, transparent); }
.stars .on { color: var(--gold); text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 55%, transparent); }
.stars-big { font-size: 2.6rem; }
.result .stars .on { animation: star-pop .55s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--d); }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ปุ่มตั้งค่าในเกม */
.play-toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ptog { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--line);
	background: color-mix(in srgb, var(--strong) 4%, transparent); color: var(--dim); font-weight: 800; font-size: .82rem; cursor: pointer; }
.ptog[aria-pressed="true"] { color: var(--ink2); }
.ptog[aria-pressed="true"] i { color: var(--gold); }

/* ── แถบสถานะ ── */
.hud { position: sticky; top: 60px; z-index: 6; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .9rem; padding: .6rem .9rem; border-radius: 16px;
	background: color-mix(in srgb, var(--bg2) 90%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); }
.hud-hearts { display: flex; gap: .1rem; font-size: 1.45rem; line-height: 1; color: #f43f5e; }
.heart.lost { color: color-mix(in srgb, var(--strong) 14%, transparent); animation: heart-break .5s ease; }
@keyframes heart-break { 0% { transform: scale(1.4); color: #f43f5e; } 100% { transform: none; } }
.hud-prog { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.hud-n { font-size: .78rem; font-weight: 800; color: var(--dim); }
.hud-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--strong) 8%, transparent); overflow: hidden; }
.hud-bar span { display: block; height: 100%; background: var(--gold); border-radius: inherit; transition: width .35s ease; }
.hud-score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.hud-pts { font-size: 1.3rem; font-weight: 800; color: var(--strong); font-variant-numeric: tabular-nums; }
.hud-score span, .hud-combo span { font-size: .7rem; font-weight: 700; color: var(--dim); }
.hud-combo { display: grid; grid-template-columns: auto auto; column-gap: .35rem; align-items: center; padding: .25rem .7rem; border-radius: 12px; border: 1px solid var(--line); color: var(--dim); }
.hud-combo i { grid-row: span 2; font-size: 1.15rem; }
.hud-combo b { font-size: 1rem; font-weight: 800; color: var(--ink2); }
.hud-combo.hot { border-color: color-mix(in srgb, var(--c-garu) 60%, transparent); background: color-mix(in srgb, var(--c-garu) 14%, transparent); }
.hud-combo.hot i, .hud-combo.hot b { color: var(--c-garu); }
.hud-combo.hot i { animation: flame 1s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scale(1) rotate(-6deg); } to { transform: scale(1.18) rotate(6deg); } }

/* ── การ์ดโจทย์ ── */
.qcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.3rem 1.3rem 1.4rem; border-radius: 22px; text-align: center;
	background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%), linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.qcard.gold { border-color: color-mix(in srgb, var(--gold) 70%, transparent); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 40px -12px var(--gold); }
.qcard.shake { animation: shake .42s ease; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.qtop { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.qtag { display: inline-block; padding: .1rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 800; background: color-mix(in srgb, var(--strong) 10%, transparent); color: var(--ink2); }
.qgold { padding: .1rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 800; background: var(--gold); color: var(--on-gold); }
.qchain { padding: .1rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 800; border: 1px solid var(--gold); color: var(--gold); }
.qtimer { width: 100%; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--strong) 8%, transparent); overflow: hidden; }
.qtimer span { display: block; height: 100%; background: var(--c-lahu); transform-origin: left; transition: transform .08s linear, background-color .3s; }
.qtimer.low span { background: #f43f5e; }
.qprompt { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; }
.qbig { font-family: "Thunder Pali", var(--f-body); font-size: clamp(4.6rem, 14vw, 7rem); font-weight: 800; line-height: 1.25; color: var(--strong); background: none; border: 0; cursor: pointer;
	padding: 0 .4em; border-radius: 22px; text-shadow: 0 6px 30px color-mix(in srgb, var(--gold) 30%, transparent); }
.qbig.is-saying { box-shadow: 0 0 0 3px var(--gold); }
.qword { font-size: clamp(3rem, 10vw, 4.6rem); font-weight: 800; line-height: 1.3; }
.qword .ex-hi { color: var(--gold); border-bottom-width: 5px; border-color: var(--gold); }
.qtext { margin: 0; font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 800; color: var(--strong); line-height: 1.4; }
.qtext-long { font-size: clamp(1.1rem, 2.6vw, 1.35rem); line-height: 1.6; max-width: 36em; }
.qask { margin: 0; font-size: 1rem; font-weight: 800; color: var(--gold); }
.qtrail { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.qtrail-i { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 800; }
.qtrail-i.ok { background: color-mix(in srgb, var(--c-lahu) 14%, transparent); color: var(--c-lahu); }
.qtrail-i.bad { background: color-mix(in srgb, #f43f5e 14%, transparent); color: #fb7185; }

/* ── ตัวเลือก ── */
.choices { display: grid; gap: .6rem; width: 100%; }
.ch-two { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-list { grid-template-columns: 1fr; }
.ch-bins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-letters, .ch-coins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ch-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.choice { --tc: var(--gold); position: relative; display: flex; align-items: center; gap: .7rem; min-height: 64px; padding: .7rem 1rem; border-radius: 16px; cursor: pointer; text-align: left;
	border: 1.5px solid var(--line); background: color-mix(in srgb, var(--strong) 4%, transparent); color: var(--ink); font: inherit; font-weight: 800;
	transition: transform .15s ease, border-color .2s, background-color .2s; }
.choice:hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tc) 70%, transparent); background: color-mix(in srgb, var(--tc) 9%, transparent); }
.choice:active:not(:disabled) { transform: scale(.97); }
.choice:disabled { cursor: default; }
.ckey { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 8px; display: grid; place-items: center; font-size: .78rem; color: var(--dim); border: 1px solid var(--line); }
.cico { flex: none; font-size: 1.3rem; color: var(--tc); }
.cbody { display: flex; flex-direction: column; min-width: 0; }
.ctext { font-size: 1.08rem; line-height: 1.35; }
.csub { font-size: .76rem; font-weight: 700; color: var(--dim); line-height: 1.35; }
.ch-two .choice, .ch-five .choice, .ch-letters .choice, .ch-coins .choice { flex-direction: column; justify-content: center; text-align: center; gap: .3rem; }
.ch-two .choice { min-height: 120px; }
.ch-two .ctext { font-size: 1.5rem; }
.ch-two .cico { font-size: 1.7rem; }
.ch-letters .ckey, .ch-coins .ckey { position: absolute; top: .45rem; left: .45rem; }
.choice-big .ctext { font-size: 2.6rem; line-height: 1.3; }
.ch-letters .choice { min-height: 104px; }
.ch-coins .choice { min-height: 96px; border-radius: 50%; aspect-ratio: 1; max-width: 120px; margin-inline: auto; width: 100%; }
.ch-coins .ctext { font-size: 2rem; color: var(--gold); }
.ch-list .choice { min-height: 56px; }
.ch-list .ctext { font-size: .98rem; font-weight: 700; line-height: 1.55; }
.ch-bins .choice { flex-direction: column; align-items: flex-start; }
.ch-bins .choice .ckey { position: absolute; top: .55rem; right: .55rem; }
.tone-rassa { --tc: var(--c-rassa); } .tone-deegha { --tc: var(--c-deegha); } .tone-lahu { --tc: var(--c-lahu); } .tone-garu { --tc: var(--c-garu); }
.tone-ghosa { --tc: var(--c-ghosa); } .tone-aghosa { --tc: var(--c-aghosa); } .tone-sith { --tc: var(--c-sith); } .tone-dhan { --tc: var(--c-dhan); } .tone-none { --tc: var(--dim); }
.choice.is-right { border-color: var(--c-lahu); background: color-mix(in srgb, var(--c-lahu) 18%, transparent); animation: pop .35s ease; }
.choice.is-right::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: .5rem; right: .6rem; color: var(--c-lahu); }
.choice.is-wrong { border-color: #f43f5e; background: color-mix(in srgb, #f43f5e 16%, transparent); }
.choice:disabled:not(.is-right):not(.is-wrong) { opacity: .45; }
@keyframes pop { 50% { transform: scale(1.05); } }

/* ── เฉลย ── */
.qexp { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.qexp:empty { display: none; }
.qexp-h { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.1rem; font-weight: 800; }
.qexp-h.ok { color: var(--c-lahu); } .qexp-h.bad { color: #fb7185; }
.qexp-t { margin: 0; max-width: 40em; padding: .7rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--gold) 7%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
	color: var(--ink2); font-weight: 600; line-height: 1.7; }
.qrow { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center; }
.qrow-l { font-size: .85rem; font-weight: 800; color: var(--dim); }
.qrow-c { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.qrow-x { display: flex; flex-direction: column; align-items: center; min-width: 2.8rem; padding: .25rem .3rem; border-radius: 10px; border: 1px solid var(--line); }
.qrow-x b { font-size: 1.4rem; font-weight: 800; color: var(--ink2); line-height: 1.3; }
.qrow-x small { font-size: .66rem; font-weight: 700; color: var(--dim); }
.qrow-x.hi { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.qrow-x.hi b { color: var(--gold); }
.qnext-bar { display: flex; justify-content: center; }
.qnext-bar:empty { display: none; }
.btn-next { flex: 0 1 360px; }

/* ประกาย */
.burst { position: fixed; z-index: 50; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: spark .7s ease-out forwards; }
.burst i:nth-child(3n) { background: var(--c-lahu); } .burst i:nth-child(3n+1) { background: var(--c-deegha); }
@keyframes spark { from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.3); opacity: 0; } }
.burst-pts { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); white-space: nowrap; font-size: 1.5rem; font-weight: 800; color: var(--gold);
	text-shadow: 0 2px 12px rgba(0,0,0,.4); animation: rise .9s ease-out forwards; }
@keyframes rise { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -60px); opacity: 0; } }

/* ── หน้าผล ── */
.result { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.6rem 1.3rem; border-radius: 22px; text-align: center;
	background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 65%), linear-gradient(160deg, var(--bg2), var(--bg3)); border: 1px solid var(--line); }
.result-h { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; }
.result-note { margin: 0; color: var(--muted); font-size: .9rem; max-width: 32em; }
.result-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; width: 100%; max-width: 640px; }
.rstat { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .4rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.rstat b { font-size: 1.5rem; font-weight: 800; color: var(--strong); font-variant-numeric: tabular-nums; }
.rstat span { font-size: .76rem; font-weight: 700; color: var(--dim); }
.rstat.best { border-color: var(--gold); } .rstat.best span { color: var(--gold); }
.result-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: 100%; }
.result-acts .btn { flex: 0 1 auto; }
.miss { display: flex; flex-direction: column; gap: .6rem; }
.miss-h { font-size: 1.1rem; font-weight: 800; }
.miss-i { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .9rem; align-items: start; padding: .9rem 1rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.miss-q { display: grid; place-items: center; min-height: 4rem; border-radius: 12px; background: color-mix(in srgb, var(--strong) 5%, transparent); }
.miss-big { font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1.3; }
.miss-t { margin: .35rem 0 0; font-weight: 800; color: var(--strong); }
.miss-e { margin: .3rem 0 0; color: var(--ink2); font-size: .92rem; line-height: 1.65; }

@media (max-width: 720px) {
	.intro { grid-template-columns: 1fr; padding: 1rem; }
	.hud { grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; top: 60px; }
	.hud-combo { grid-column: 1 / -1; justify-self: start; grid-template-columns: auto auto auto; grid-row: 2; padding: .15rem .6rem; }
	.hud-combo i { grid-row: auto; font-size: .95rem; }
	.ch-grid, .ch-bins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ch-letters, .ch-coins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ch-five .choice { min-height: 56px; padding: .4rem; }
	.ch-five .ctext { font-size: .85rem; }
	.ch-two .choice { min-height: 100px; padding: .6rem .5rem; }
	.ch-two .ctext { font-size: 1.25rem; }
	.result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.miss-i { grid-template-columns: 3.6rem minmax(0, 1fr); }
	.qcard { padding: 1rem .8rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .qcard.shake, .choice.is-right, .result .stars .on, .hud-combo.hot i, .heart.lost { animation: none; } }
/* สีผิดในโหมดสว่างต้องเข้มขึ้นให้อ่านออก */
:root[data-theme="light"] .qexp-h.bad, :root[data-theme="light"] .qtrail-i.bad { color: #be123c; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .qexp-h.bad, :root:not([data-theme="dark"]) .qtrail-i.bad { color: #be123c; } }