/* ชั้นธีม "ห้องฉาย" ของเกมซ้อมเร็ว ๘ เกม (๗ ข้อสอบ) — ๑ ต.ค. ๒๕๖๙
   ดีไซน์ชุดเดียวกับ /games และผังเสียงบาลี (/akkhara/memorize/study)
   ใช้ทับ kitaka.css เฉพาะหน้าที่ <html> มีคลาส kc (โหลดผ่าน includes/drill-cinema-head.php)
   ค้อนสายฟ้า / โรงหลอมสนธิ โหลด kitaka.css ด้วยแต่ไม่มีคลาสนี้ จึงไม่โดน
   สีทุกสีเป็นโทเคน: มืด = ค่าตั้งต้น · สว่าง = ตามเครื่อง หรือเลือกเองด้วยปุ่มในแถบบน (data-theme) */

@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;
	--kc-bg: #0a0f1e; --kc-bg2: #10183a; --kc-panel: #141d3d; --kc-panel2: #1a2550;
	--kc-ink: #f3f6ff; --kc-ink2: #d7deef; --kc-muted: #aab4d0; --kc-dim: #7f8aa8; --kc-strong: #ffffff;
	--kc-gold: #f5bf45; --kc-on-gold: #3b2600; --kc-accent: #a5b4fc; --kc-quote: #fde9b0;
	--kc-ok: #34d399; --kc-bad: #fb7185; --kc-info: #67e8f9; --kc-warn: #fbbf24;
	--kc-line: color-mix(in srgb, var(--kc-strong) 11%, transparent);
	--kc-soft: color-mix(in srgb, var(--kc-strong) 5%, transparent);
	--kc-soft2: color-mix(in srgb, var(--kc-strong) 9%, transparent);
	--kc-shadow: rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
	color-scheme: light;
	--kc-bg: #f5f7fc; --kc-bg2: #ffffff; --kc-panel: #ffffff; --kc-panel2: #f3f5fc;
	--kc-ink: #141a33; --kc-ink2: #333c5c; --kc-muted: #525b78; --kc-dim: #69728f; --kc-strong: #141a33;
	--kc-gold: #b45309; --kc-on-gold: #ffffff; --kc-accent: #4338ca; --kc-quote: #8a4b06;
	--kc-ok: #047857; --kc-bad: #e11d48; --kc-info: #0e7490; --kc-warn: #b45309;
	--kc-shadow: rgba(20, 26, 51, .18);
} }
:root[data-theme="light"] {
	color-scheme: light;
	--kc-bg: #f5f7fc; --kc-bg2: #ffffff; --kc-panel: #ffffff; --kc-panel2: #f3f5fc;
	--kc-ink: #141a33; --kc-ink2: #333c5c; --kc-muted: #525b78; --kc-dim: #69728f; --kc-strong: #141a33;
	--kc-gold: #b45309; --kc-on-gold: #ffffff; --kc-accent: #4338ca; --kc-quote: #8a4b06;
	--kc-ok: #047857; --kc-bad: #e11d48; --kc-info: #0e7490; --kc-warn: #b45309;
	--kc-shadow: rgba(20, 26, 51, .18);
}

/* ── พื้นหน้า ─────────────────────────────────────── */
html.kc body { background: var(--kc-bg) !important; color: var(--kc-ink); }
html.kc body .kt-game--enhanced,
html.kc body .kt-game--enhanced:not(.ak-game),
html.kc body .ak-game { background: var(--kc-bg); }
html.kc body .kt-game--enhanced::before,
html.kc body .ak-game::before {
	background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--kc-accent) 10%, transparent), transparent 28rem),
		radial-gradient(circle at 88% 70%, color-mix(in srgb, var(--kc-gold) 7%, transparent), transparent 26rem) !important;
}
html.kc body .kt-game-shell { max-width: 62rem !important; }

/* ── แถบบน ───────────────────────────────────────── */
html.kc body .kt-game-topbar {
	background: color-mix(in srgb, var(--kc-bg) 84%, transparent) !important; background-image: none !important;
	color: var(--kc-ink) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--kc-line); box-shadow: none !important;
}
html.kc body .kt-game-topbar .text-white,
html.kc body .kt-game-topbar a { color: var(--kc-ink) !important; }
html.kc body .kt-game-topbar .text-white\/70 { color: var(--kc-dim) !important; }
html.kc body .kt-game-topbar i.fa-a, html.kc body .kt-game-topbar > div > i:first-child { color: var(--kc-gold); opacity: 1 !important; }
html.kc body .kt-subject-menu-trigger { color: var(--kc-ink); }
html.kc body .kt-subject-menu-trigger:hover { background: var(--kc-soft2); }
html.kc body .kt-subject-menu-panel { background: var(--kc-panel); border-color: var(--kc-line); box-shadow: 0 18px 40px -16px var(--kc-shadow); }
html.kc body .kt-subject-menu-panel > * { background: var(--kc-soft) !important; color: var(--kc-ink2) !important; border: 1px solid var(--kc-line); }
html.kc body .kt-subject-menu-panel > a:hover { border-color: var(--kc-gold); color: var(--kc-ink) !important; }
html.kc body .kt-subject-menu-panel > span { background: var(--kc-gold) !important; color: var(--kc-on-gold) !important; border-color: var(--kc-gold); }
html.kc body .ak-sound-toggle { color: var(--kc-ink); background: var(--kc-soft); border-color: var(--kc-line); }
html.kc body .ak-sound-toggle[aria-pressed="false"] { color: var(--kc-dim); }
.kc-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 12px; cursor: pointer;
	border: 1px solid var(--kc-line); background: var(--kc-soft); color: var(--kc-ink); }
.kc-theme-btn:hover { border-color: var(--kc-gold); color: var(--kc-gold); }
.kc-theme-btn svg { width: 18px; height: 18px; }
.kc-theme-btn .kc-i-sun { display: none; }
:root[data-theme="dark"] .kc-theme-btn .kc-i-sun { display: block; } :root[data-theme="dark"] .kc-theme-btn .kc-i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kc-theme-btn .kc-i-sun { display: block; } :root:not([data-theme="light"]) .kc-theme-btn .kc-i-moon { display: none; } }

/* ── หัวเรื่อง: ป้ายโปรโมทภาพเต็มกว้าง ─────────────────── */
html.kc body .kt-game-hero,
html.kc body .kt-game--enhanced:not(.ak-game) .kt-game-hero {
	position: relative; isolation: isolate; overflow: hidden; max-width: none !important; text-align: left !important;
	margin-bottom: 1.4rem !important; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 3.5vw, 2.4rem) !important;
	border-radius: 22px !important; border: 1px solid var(--kc-line) !important; box-shadow: 0 30px 60px -40px var(--kc-shadow) !important;
	background: var(--kc-bg2) !important;
}
html.kc body .kt-game-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--kc-art, none) right 35% / cover no-repeat; }
html.kc body .kt-game-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, var(--kc-bg2) 0%, color-mix(in srgb, var(--kc-bg2) 92%, transparent) 38%, color-mix(in srgb, var(--kc-bg2) 35%, transparent) 72%, color-mix(in srgb, var(--kc-bg2) 10%, transparent) 100%); }
html.kc body .kt-game-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem) !important; font-weight: 800 !important; line-height: 1.3 !important; color: var(--kc-ink) !important; max-width: 30em; }
html.kc body #app .kt-game-hero h1 .text-indigo-600, html.kc body #app .kt-game-hero h1 span { color: var(--kc-gold) !important; }
html.kc body .kt-game-hero > p, html.kc body .kt-game-hero p.text-sm { color: var(--kc-ink2) !important; max-width: 36em; font-size: .95rem !important; }
html.kc body .kt-game-hero .kt-subject-nav { justify-content: flex-start !important; }
/* อักขรวิธีมีการ์ดหัวเรื่องของตัวเองซ้อนข้างใน */
html.kc body .ak-hero-card { justify-content: flex-start; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: var(--kc-ink); }
html.kc body .ak-hero-mark { background: var(--kc-gold); color: var(--kc-on-gold); }
html.kc body .ak-hero-eyebrow { color: var(--kc-gold); }
html.kc body .ak-hero-copy h1 { color: var(--kc-ink) !important; }
html.kc body .ak-hero-copy .text-gray-500 { color: var(--kc-ink2) !important; }

/* ── ปุ่มเลือกด่าน (ขั้นปูพื้น / สนามข้อสอบ) ─────────────── */
html.kc body .kt-modegroups { gap: .9rem; margin-bottom: 1.4rem !important; }
html.kc body .kt-modegroup__label { color: var(--kc-gold); font-size: .76rem; letter-spacing: .05em; }
html.kc body .kt-modegroup__label i { color: var(--kc-gold); }
html.kc body .kt-seg { background: var(--kc-soft); border-color: var(--kc-line); padding: .25rem; gap: .25rem; }
html.kc body .kt-seg button { color: var(--kc-ink2); min-height: 40px; font-weight: 700; }
html.kc body .kt-seg button:hover { color: var(--kc-ink); background: var(--kc-soft2); }
html.kc body .kt-seg button.active,
html.kc body .kt-seg--base button.active,
html.kc body .kt-seg--group button.active { background: var(--kc-strong); color: var(--kc-bg); box-shadow: 0 6px 16px -8px var(--kc-shadow); }
html.kc body .kt-seg--exam button.active { background: var(--kc-gold); color: var(--kc-on-gold); }
html.kc body .kt-mobile-menu-trigger { background: var(--kc-strong); color: var(--kc-bg); box-shadow: 0 8px 18px -10px var(--kc-shadow); }

/* ── การ์ดเวที ───────────────────────────────────── */
html.kc body .kt-stage-card,
html.kc body .kt-game--enhanced:not(.ak-game) .kt-stage-card,
html.kc body .ak-game .kt-stage-card {
	background: linear-gradient(160deg, var(--kc-bg2), var(--kc-panel)) !important; border: 1px solid var(--kc-line) !important;
	border-radius: 20px !important; box-shadow: 0 30px 60px -44px var(--kc-shadow) !important; color: var(--kc-ink);
}
html.kc body .kt-stage-card::before { background: linear-gradient(90deg, transparent, var(--kc-gold), transparent) !important; opacity: .7 !important; height: 2px !important; }
html.kc body .kt-feedback-correct .kt-stage-card, html.kc body .ak-game--correct .kt-stage-card { border-color: color-mix(in srgb, var(--kc-ok) 70%, transparent) !important; }

/* แท็บย่อยในการ์ด */
html.kc body .kt-subtabs button { background: var(--kc-soft); border-color: var(--kc-line); color: var(--kc-ink2); min-height: 40px; padding: .35rem 1rem; }
html.kc body .kt-subtabs button:hover { color: var(--kc-ink); border-color: color-mix(in srgb, var(--kc-strong) 30%, transparent); }
html.kc body .kt-subtabs button.active { background: var(--kc-strong); border-color: var(--kc-strong); color: var(--kc-bg); box-shadow: none; }

/* ── ตัวอักษรใน Tailwind ที่ฝังในเทมเพลตเกม ─────────────── */
html.kc body #app .text-gray-300, html.kc body #app .text-gray-400, html.kc body #app .text-slate-300, html.kc body #app .text-slate-400 { color: var(--kc-dim) !important; }
html.kc body #app .text-gray-500, html.kc body #app .text-gray-600, html.kc body #app .text-slate-500, html.kc body #app .text-slate-600 { color: var(--kc-muted) !important; }
html.kc body #app .text-gray-700, html.kc body #app .text-gray-800, html.kc body #app .text-gray-900, html.kc body #app .text-slate-700, html.kc body #app .text-slate-800 { color: var(--kc-ink) !important; }
html.kc body #app .text-indigo-500, html.kc body #app .text-indigo-600, html.kc body #app .text-indigo-700, html.kc body #app .text-indigo-800, html.kc body #app .text-indigo-900 { color: var(--kc-accent) !important; }
html.kc body #app .text-emerald-600, html.kc body #app .text-emerald-700, html.kc body #app .text-emerald-800, html.kc body #app .text-emerald-900, html.kc body #app .text-green-600, html.kc body #app .text-green-700 { color: var(--kc-ok) !important; }
html.kc body #app .text-teal-600, html.kc body #app .text-teal-700, html.kc body #app .text-cyan-700 { color: var(--kc-info) !important; }
html.kc body #app .text-rose-500, html.kc body #app .text-rose-600, html.kc body #app .text-rose-700, html.kc body #app .text-rose-800, html.kc body #app .text-red-500, html.kc body #app .text-red-600, html.kc body #app .text-red-700 { color: var(--kc-bad) !important; }
html.kc body #app .text-amber-500, html.kc body #app .text-amber-600, html.kc body #app .text-amber-700, html.kc body #app .text-amber-800 { color: var(--kc-warn) !important; }
html.kc body #app .bg-white, html.kc body #app .bg-gray-50, html.kc body #app .bg-slate-50, html.kc body #app .bg-gray-100 { background-color: var(--kc-soft) !important; }
html.kc body #app .bg-indigo-50, html.kc body #app .bg-indigo-100 { background-color: color-mix(in srgb, var(--kc-accent) 12%, transparent) !important; }
html.kc body #app .bg-emerald-50, html.kc body #app .bg-green-50 { background-color: color-mix(in srgb, var(--kc-ok) 12%, transparent) !important; }
html.kc body #app .bg-amber-50, html.kc body #app .bg-yellow-50 { background-color: color-mix(in srgb, var(--kc-warn) 12%, transparent) !important; }
html.kc body #app .bg-rose-50, html.kc body #app .bg-red-50 { background-color: color-mix(in srgb, var(--kc-bad) 12%, transparent) !important; }
html.kc body #app .hover\:bg-indigo-100:hover { background-color: color-mix(in srgb, var(--kc-accent) 20%, transparent) !important; }
html.kc body #app [class*="border-gray-"], html.kc body #app [class*="border-slate-"], html.kc body #app [class*="border-indigo-1"], html.kc body #app [class*="border-indigo-2"] { border-color: var(--kc-line) !important; }
html.kc body #app .bg-indigo-600, html.kc body #app .bg-indigo-500 { background-color: var(--kc-strong) !important; color: var(--kc-bg) !important; }

/* ── ตาราง (ทุกเกมมีตารางของตัวเองในหน้า) ─────────────── */
html.kc body .kt-stage-card table { border-color: var(--kc-line) !important; color: var(--kc-ink); }
html.kc body .kt-stage-card th, html.kc body .kt-stage-card td { border-color: var(--kc-line) !important; }
html.kc body .kt-stage-card th { background: color-mix(in srgb, var(--kc-accent) 12%, transparent) !important; color: var(--kc-ink) !important; }
html.kc body .kt-stage-card td { background: transparent !important; color: var(--kc-ink2); }
html.kc body .kt-stage-card td:first-child, html.kc body .kt-stage-card td strong, html.kc body .kt-stage-card td b { color: var(--kc-ink) !important; }
html.kc body .kt-stage-card tbody tr:nth-child(even) td { background: var(--kc-soft) !important; }
html.kc body .kt-stage-card [class*="__title"] { background: var(--kc-panel2) !important; color: var(--kc-ink) !important; }

/* ── โจทย์และคำบาลี ────────────────────────────────── */
html.kc body .kt-quote { background: color-mix(in srgb, var(--kc-accent) 9%, transparent); border-color: var(--kc-line); }
html.kc body .kt-quote__label { color: var(--kc-gold); }
html.kc body .kt-pali, html.kc body .kt-bigword, html.kc body .kt-card__word { color: var(--kc-ink); font-family: "Thunder Pali", "Sarabun", sans-serif; }
html.kc body [data-kc-pali] { font-family: "Thunder Pali", "Sarabun", sans-serif; }
html.kc body .kt-q { color: var(--kc-ink) !important; }
html.kc body .kt-cellq { color: var(--kc-ink); }
html.kc body .kt-cellq__meaning { color: var(--kc-muted); }
html.kc body .kt-cellq__tag { background: color-mix(in srgb, var(--kc-gold) 18%, transparent); color: var(--kc-gold); }
html.kc body .ak-bigchar, html.kc body .ak-syl-hi { color: var(--kc-ink); font-family: "Thunder Pali", "Sarabun", sans-serif; }
html.kc body .ak-syl-hi { border-bottom-color: var(--kc-gold); }
html.kc body .ak-syl-dim { color: var(--kc-dim); }

/* ป้ายขั้นตอน */
html.kc body .kt-stepbadge { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); border-color: var(--kc-line); }
html.kc body .kt-stepbadge--2 { background: color-mix(in srgb, var(--kc-warn) 14%, transparent); color: var(--kc-warn); border-color: color-mix(in srgb, var(--kc-warn) 35%, transparent); }
html.kc body .kt-stepbadge--done { background: color-mix(in srgb, var(--kc-ok) 14%, transparent); color: var(--kc-ok); border-color: color-mix(in srgb, var(--kc-ok) 35%, transparent); }
html.kc body .kt-hintline { background: color-mix(in srgb, var(--kc-warn) 10%, transparent); color: var(--kc-warn); border-color: color-mix(in srgb, var(--kc-warn) 40%, transparent); }
html.kc body .kt-step { background: var(--kc-soft); color: var(--kc-dim); border-color: var(--kc-line); }
html.kc body .kt-step.is-now { background: var(--kc-strong); color: var(--kc-bg); border-color: var(--kc-strong); box-shadow: none; }
html.kc body .kt-step.is-done { background: color-mix(in srgb, var(--kc-ok) 14%, transparent); color: var(--kc-ok); border-color: color-mix(in srgb, var(--kc-ok) 35%, transparent); }

/* ── ปุ่มตัวเลือกทุกชนิด: แผ่นใหญ่ กดง่าย ───────────────── */
html.kc body :is(.kt-bigbtn, .kt-sadbtn, .kt-pacbtn, .kt-formchoice, .kt-matchbtn, .kt-chip, .kt-vikchip, .kt-rulebtn) {
	background: var(--kc-panel2); border: 1.5px solid var(--kc-line); color: var(--kc-ink); box-shadow: none;
}
html.kc body .kt-bigbtn { min-height: 56px; font-size: 1.12rem; border-radius: 14px; }
html.kc body :is(.kt-bigbtn, .kt-sadbtn, .kt-pacbtn, .kt-formchoice, .kt-matchbtn, .kt-chip, .kt-vikchip, .kt-rulebtn):hover {
	border-color: var(--kc-gold); color: var(--kc-ink); background: color-mix(in srgb, var(--kc-gold) 8%, var(--kc-panel2));
}
html.kc body :is(.kt-bigbtn, .kt-sadbtn, .kt-pacbtn, .kt-formchoice, .kt-matchbtn, .kt-chip, .kt-vikchip, .kt-rulebtn):focus-visible { outline: 3px solid var(--kc-gold); outline-offset: 2px; }
html.kc body :is(.kt-bigbtn, .kt-sadbtn, .kt-pacbtn, .kt-formchoice, .kt-matchbtn, .kt-chip, .kt-vikchip, .kt-rulebtn).is-wrong,
html.kc body .kt-vikchip.is-wrongtap { background: color-mix(in srgb, var(--kc-bad) 14%, var(--kc-panel2)); border-color: var(--kc-bad); color: var(--kc-bad); }
html.kc body :is(.kt-bigbtn, .kt-pacbtn, .kt-formchoice).is-right2, html.kc body .kt-formchoice.is-right {
	background: color-mix(in srgb, var(--kc-ok) 16%, var(--kc-panel2)); border-color: var(--kc-ok); color: var(--kc-ok);
}
html.kc body .kt-sadbtn.is-right, html.kc body .kt-vikchip.is-signal { background: var(--kc-ok); border-color: var(--kc-ok); color: var(--kc-bg); }
html.kc body :is(.kt-pacbtn.is-picked, .kt-matchbtn.is-selected) { border-color: var(--kc-gold); background: color-mix(in srgb, var(--kc-gold) 14%, var(--kc-panel2)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kc-gold) 30%, transparent); }
html.kc body .kt-matchbtn.is-done { background: color-mix(in srgb, var(--kc-ok) 12%, transparent); border-color: color-mix(in srgb, var(--kc-ok) 40%, transparent); }
html.kc body .kt-matchbtn strong, html.kc body .kt-rulebtn__act, html.kc body .kt-rulebtn__cond b { color: var(--kc-ink); }
html.kc body .kt-matchbtn__v, html.kc body .kt-rulebtn__cond { color: var(--kc-muted); }
html.kc body .kt-chip--placed { background: color-mix(in srgb, var(--kc-accent) 14%, var(--kc-panel2)); border-color: color-mix(in srgb, var(--kc-accent) 40%, transparent); }
html.kc body .kt-tray, html.kc body .kt-formline { background: var(--kc-soft); border-color: color-mix(in srgb, var(--kc-strong) 22%, transparent); }
html.kc body .kt-tray.is-correct { border-color: var(--kc-ok); background: color-mix(in srgb, var(--kc-ok) 10%, transparent); }
html.kc body .kt-tray.is-wrong { border-color: var(--kc-bad); background: color-mix(in srgb, var(--kc-bad) 10%, transparent); }
html.kc body .kt-tray__empty { color: var(--kc-dim); }
html.kc body .kt-formchip.is-done { background: color-mix(in srgb, var(--kc-accent) 14%, transparent); border-color: color-mix(in srgb, var(--kc-accent) 40%, transparent); color: var(--kc-ink); }
html.kc body .kt-formchip.is-now { background: color-mix(in srgb, var(--kc-gold) 16%, transparent); border-color: var(--kc-gold); color: var(--kc-gold); }
html.kc body .kt-formchip.is-todo { background: var(--kc-soft); border-color: var(--kc-line); color: var(--kc-dim); }

/* ── ปุ่มทั่วไป ──────────────────────────────────── */
html.kc body .kt-btn { border-radius: 14px; min-height: 48px; font-weight: 800; }
html.kc body .kt-btn--primary { background: var(--kc-strong); color: var(--kc-bg); box-shadow: 0 10px 24px -14px var(--kc-shadow); }
html.kc body .kt-btn--primary:hover:not(:disabled) { background: var(--kc-gold); color: var(--kc-on-gold); }
html.kc body .kt-btn--ghost { background: var(--kc-soft2); color: var(--kc-ink); }
html.kc body .kt-btn--ghost:hover { background: color-mix(in srgb, var(--kc-strong) 16%, transparent); }
html.kc body .kt-btn--amber { background: color-mix(in srgb, var(--kc-gold) 18%, transparent); color: var(--kc-gold); }
html.kc body .kt-btn--dark { background: var(--kc-panel2); color: var(--kc-ink); }
html.kc body .kt-btn--go { background: var(--kc-ok); color: var(--kc-bg); box-shadow: 0 10px 24px -14px var(--kc-shadow); }
html.kc body .kt-auto-next-running { background-image: linear-gradient(90deg, var(--kc-ok) 0 var(--kt-auto-progress), var(--kc-strong) var(--kt-auto-progress) 100%) !important; }
html.kc body .kt-cardlink { background: var(--kc-soft); border-color: var(--kc-line); color: var(--kc-ink2); }
html.kc body .kt-cardlink:hover { border-color: var(--kc-gold); color: var(--kc-ink); background: var(--kc-soft2); }

/* ── กล่องเฉลย / สรุป / หมายเหตุ ──────────────────────── */
html.kc body .kt-answerbox, html.kc body .kt-groupbox { background: var(--kc-soft); border-color: var(--kc-line); }
html.kc body .kt-answerbox__head, html.kc body .kt-decoder__head { color: var(--kc-gold); }
html.kc body .kt-answerbox__main, html.kc body .kt-groupbox__head { color: var(--kc-ink); }
html.kc body .kt-answerbox__main strong, html.kc body .kt-groupbox__head strong, html.kc body .kt-spotrule__note b { color: var(--kc-accent); }
html.kc body .kt-answerbox__trans { background: var(--kc-panel2); border-color: var(--kc-line); color: var(--kc-ink2); }
html.kc body .kt-decoder { background: color-mix(in srgb, var(--kc-accent) 10%, transparent); border-color: var(--kc-line); color: var(--kc-ink2); }
html.kc body .kt-how, html.kc body .kt-groupbox__usage, html.kc body .kt-spotrule__note { color: var(--kc-muted); }
html.kc body .kt-spotrule__rule { color: var(--kc-ink); }
html.kc body .kt-note { background: color-mix(in srgb, var(--kc-info) 10%, transparent); border-color: color-mix(in srgb, var(--kc-info) 30%, transparent); color: var(--kc-info); }
html.kc body .kt-trap, html.kc body .kt-patternbox__note { background: color-mix(in srgb, var(--kc-warn) 10%, transparent); border-color: color-mix(in srgb, var(--kc-warn) 35%, transparent); color: var(--kc-warn); }
html.kc body .kt-patternbox { background: color-mix(in srgb, var(--kc-ok) 9%, transparent); border-color: color-mix(in srgb, var(--kc-ok) 35%, transparent); }
html.kc body .kt-patternbox__head { color: var(--kc-ok); }
html.kc body .kt-patternbox__body { color: var(--kc-ink); }
html.kc body .kt-pacchip { background: color-mix(in srgb, var(--kc-accent) 12%, var(--kc-panel2)); border-color: var(--kc-line); color: var(--kc-ink); font-family: "Thunder Pali", "Sarabun", sans-serif; }
html.kc body .kt-pacchip--soft { background: var(--kc-soft); color: var(--kc-ink2); font-family: inherit; }
html.kc body .kt-dhatuitem:nth-child(odd) { background: var(--kc-soft); }
html.kc body .kt-dhatuitem__d { color: var(--kc-accent); }
html.kc body .kt-dhatuitem__m { color: var(--kc-ink2); }
html.kc body .kt-dhatuitem__v { color: var(--kc-muted); }
html.kc body .kt-vhl, html.kc body .kt-vnote, html.kc body .kt-matchbtn__v em, html.kc body .nm-case-order { color: var(--kc-bad); }
html.kc body .kt-tagpill, html.kc body .kt-card__tag { background: color-mix(in srgb, var(--kc-accent) 16%, transparent); color: var(--kc-accent); }
html.kc body .kt-unlock { background: color-mix(in srgb, var(--kc-ok) 12%, transparent); border-color: color-mix(in srgb, var(--kc-ok) 40%, transparent); color: var(--kc-ok); }
html.kc body .kt-unlock--gold { background: color-mix(in srgb, var(--kc-gold) 14%, transparent); border-color: color-mix(in srgb, var(--kc-gold) 45%, transparent); color: var(--kc-gold); box-shadow: none; }
html.kc body .kt-toast--success { background: var(--kc-panel); color: var(--kc-ok); border-color: color-mix(in srgb, var(--kc-ok) 45%, transparent); }

/* ── คลังการ์ด ───────────────────────────────────── */
html.kc body .kt-card__front { background: var(--kc-panel2); border-color: var(--kc-line); box-shadow: none; }
html.kc body .kt-card__front.is-done { border-color: color-mix(in srgb, var(--kc-ok) 60%, transparent); }
html.kc body .kt-card__meaning { color: var(--kc-muted); }
html.kc body .kt-card__fliphint { color: var(--kc-dim); }

/* ── ปุ่มตั้งค่าและกล่องตั้งค่า ──────────────────────── */
html.kc body .kt-game-settings-trigger { background: var(--kc-strong); color: var(--kc-bg); box-shadow: 0 12px 26px -12px var(--kc-shadow); }
html.kc body .kt-game-settings-trigger:hover { background: var(--kc-gold); color: var(--kc-on-gold); }
html.kc body .kt-settings-dialog { background: var(--kc-panel); color: var(--kc-ink); }
html.kc body .kt-settings-title, html.kc body .kt-settings-row label, html.kc body .kt-settings-label { color: var(--kc-ink); }
html.kc body .kt-settings-help { color: var(--kc-muted); }
html.kc body .kt-settings-row { border-top-color: var(--kc-line); }
html.kc body .kt-settings-intro { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-ink); }
html.kc body .kt-settings-intro p { color: var(--kc-ink2); }
html.kc body .kt-settings-intro > i { color: var(--kc-accent); }
html.kc body .kt-settings-close, html.kc body .kt-font-step, html.kc body .kt-font-value { background: var(--kc-soft2); color: var(--kc-ink); border-color: var(--kc-line); }
html.kc body .kt-settings-number { background: var(--kc-panel2); color: var(--kc-ink); border-color: var(--kc-line); }
html.kc body .kt-samanera__say, html.kc body .kt-samanera__say::after { background: var(--kc-panel); }

/* ── ลิงก์ท้ายหน้า (อ่านบทเรียน · ล้างความคืบหน้า) ─────────── */
html.kc body #app .kt-game-shell > div:last-child a, html.kc body #app .kt-game-shell > div:last-child button { color: var(--kc-ink2); }

@media (max-width: 639px) {
	html.kc body .kt-game-hero { padding: 1rem 1.1rem !important; border-radius: 16px !important; }
	html.kc body .kt-stage-card { border-radius: 16px !important; }
}

/* ── สีที่เขียนไว้ในแอตทริบิวต์ style="" ของเทมเพลต (ต้อง !important จึงชนะ)
   Vue เขียนแอตทริบิวต์ใหม่เป็นรูป rgb(…) จึงต้องจับทั้งรูป hex และ rgb */
html.kc body #app [style*="color:#6b7280"],
html.kc body #app [style*="color: #6b7280"],
html.kc body #app [style*="color: rgb(107, 114, 128)"],
html.kc body #app [style*="color:#9ca3af"],
html.kc body #app [style*="color: #9ca3af"],
html.kc body #app [style*="color: rgb(156, 163, 175)"],
html.kc body #app [style*="color:#94a3b8"],
html.kc body #app [style*="color: #94a3b8"],
html.kc body #app [style*="color: rgb(148, 163, 184)"],
html.kc body #app [style*="color:#d1d5db"],
html.kc body #app [style*="color: #d1d5db"],
html.kc body #app [style*="color: rgb(209, 213, 219)"] { color: var(--kc-muted) !important; }
html.kc body #app [style*="color:#374151"],
html.kc body #app [style*="color: #374151"],
html.kc body #app [style*="color: rgb(55, 65, 81)"] { color: var(--kc-ink2) !important; }
html.kc body #app [style*="color:#4338ca"],
html.kc body #app [style*="color: #4338ca"],
html.kc body #app [style*="color: rgb(67, 56, 202)"] { color: var(--kc-accent) !important; }
html.kc body #app [style*="color:#0d9488"],
html.kc body #app [style*="color: #0d9488"],
html.kc body #app [style*="color: rgb(13, 148, 136)"] { color: var(--kc-info) !important; }
/* ปุ่มสลับโหมดสีอยู่กลุ่มเดียวกับโลโก้ทางขวา */
.kc-bar-right { display: flex; align-items: center; gap: .6rem; flex: none; }
html.kc body .kt-auto-countdown { background: color-mix(in srgb, var(--kc-bg) 28%, transparent); color: inherit; }

/* ── แถวด่านบรรทัดเดียว (หลวงพี่ขอ ๑ ต.ค. ๒๕๖๙) ─────────────
   ขั้นปูพื้นกับสนามข้อสอบเรียงข้างกัน ป้ายอยู่บนกลุ่มของตัวเอง · ยาวเกินจอ = เลื่อนซ้าย-ขวา
   ขอบจางบอกว่ายังมีต่อ (คลาสจาก drill-cinema.js) · มือถือใช้แถวเลื่อนของ kitaka.css เดิม */
@media (min-width: 640px) {
	html.kc body .kt-modegroups {
		flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: safe center; gap: 1.1rem;
		overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-inline: contain; padding: 2px 1rem 6px; scroll-padding-inline: 1rem;
	}
	html.kc body .kt-modegroups::-webkit-scrollbar { display: none; }
	html.kc body .kt-modegroup { flex: none; text-align: left; }
	html.kc body .kt-modegroup__label { padding-left: .9rem; white-space: nowrap; }
	html.kc body .kt-modegroups .kt-seg { flex-wrap: nowrap; }
	html.kc body .kt-modegroups.kc-more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent); }
	html.kc body .kt-modegroups.kc-more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5rem); mask-image: linear-gradient(90deg, transparent, #000 3.5rem); }
	html.kc body .kt-modegroups.kc-more-l.kc-more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent); }
}