/* Pali Thunder — เกมรูปวิเคราะห์ นามกิตก์ (/kitaka)
   ธีมตาม design.md: indigo หลัก · emerald สำเร็จ · amber รางวัล · rose เตือน */

/* ── Segmented switches ── */
.kt-seg-wrap { display: flex; justify-content: center; }
.kt-seg {
	display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .2rem;
	border: 1px solid #e5e7eb; border-radius: 999px; background: #f3f4f6; padding: .2rem; max-width: 100%;
}
.kt-seg button {
	border: none; background: transparent; color: #4b5563;
	padding: .45rem .9rem; border-radius: 999px; font-family: inherit; font-size: .88rem;
	cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
	display: inline-flex; align-items: center; gap: .35rem;
}
.kt-seg button:hover { color: #4338ca; }
.kt-seg button.active { background: #4f46e5; color: #fff; font-weight: 700; box-shadow: 0 2px 8px rgba(79, 70, 229, .3); }
.kt-seg .cnt { opacity: .65; font-size: .78rem; font-weight: 700; }
.kt-seg--exam button.active { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 2px 8px rgba(217, 119, 6, .3); }
.kt-seg--group button { padding: .35rem .75rem; font-size: .82rem; }
.kt-seg--group button.active { background: #374151; box-shadow: 0 2px 8px rgba(55, 65, 81, .3); }

/* ── การ์ดเวทีหลักของแต่ละโหมด ── */
.kt-stage-card {
	background: #fff; border: 1px solid #f3f4f6; border-radius: 1.25rem;
	box-shadow: 0 8px 30px rgba(49, 46, 129, .06); padding: 1.1rem 1.1rem 1.3rem;
}
@media (min-width: 640px) { .kt-stage-card { padding: 1.5rem 1.75rem 1.75rem; } }

/* ── โจทย์บาลี ── */
.kt-quote {
	background: linear-gradient(150deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff;
	border-radius: 1rem; padding: .9rem 1rem; text-align: center;
}
.kt-quote__label { font-size: .72rem; color: #6366f1; font-weight: 700; margin-bottom: .35rem; letter-spacing: .01em; }
.kt-pali { font-size: clamp(1.35rem, 4.5vw, 1.9rem); font-weight: 700; color: #312e81; line-height: 1.5; }

/* ── ชิปบาลี (โหมดจับสัญญาณ) ── */
.kt-vikrow { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 1.1rem .25rem .9rem; }
.kt-vikchip {
	font-family: inherit; font-size: clamp(1.3rem, 4.2vw, 1.8rem); font-weight: 700; color: #312e81;
	background: #fff; border: 2px solid #c7d2fe; border-radius: .9rem; padding: .45rem 1rem;
	cursor: pointer; transition: transform .12s, border-color .15s, background .15s, box-shadow .15s;
	box-shadow: 0 3px 10px rgba(49, 46, 129, .08);
}
.kt-vikchip:hover { transform: translateY(-2px); border-color: #6366f1; }
.kt-vikrow--lock .kt-vikchip { cursor: default; }
.kt-vikrow--lock .kt-vikchip:hover { transform: none; }
.kt-vikchip.is-signal { background: linear-gradient(135deg, #10b981, #059669); border-color: #059669; color: #fff; box-shadow: 0 4px 14px rgba(5, 150, 105, .35); }
.kt-vikchip.is-wrongtap { animation: ktShake .4s; border-color: #f43f5e; background: #fff1f2; color: #e11d48; }
.kt-vikchip.is-dim { opacity: .45; }
@keyframes ktShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ── step badge ── */
.kt-stepbadge {
	display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center;
	background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff;
	font-size: .82rem; font-weight: 700; border-radius: 999px; padding: .35rem .9rem;
}
.kt-stepbadge--2 { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.kt-stepbadge--done { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.kt-hintline { text-align: center; font-size: .85rem; color: #b45309; background: #fffbeb; border: 1px dashed #fcd34d; border-radius: .7rem; padding: .45rem .7rem; margin-bottom: .7rem; }

/* ── ปุ่มสาธนะ / รูป / ปัจจัย ── */
.kt-sadgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 560px) { .kt-sadgrid { grid-template-columns: repeat(3, 1fr); } }
.kt-sadbtn {
	font-family: inherit; font-size: .92rem; font-weight: 700; color: #374151;
	background: #fff; border: 1.5px solid #e5e7eb; border-radius: .8rem; padding: .65rem .5rem;
	cursor: pointer; transition: .13s; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.kt-sadbtn:hover { border-color: #6366f1; color: #4338ca; transform: translateY(-1px); }
.kt-sadbtn.is-right { background: linear-gradient(135deg, #10b981, #059669); border-color: #059669; color: #fff; }
.kt-sadbtn.is-wrong { animation: ktShake .4s; border-color: #f43f5e; background: #fff1f2; color: #e11d48; }
.kt-saddot { width: .55rem; height: .55rem; border-radius: 999px; flex: 0 0 auto; }
.kt-dot--indigo { background: #6366f1; } .kt-dot--emerald { background: #10b981; }
.kt-dot--pink { background: #ec4899; } .kt-dot--blue { background: #3b82f6; }
.kt-dot--cyan { background: #06b6d4; } .kt-dot--amber { background: #f59e0b; }
.kt-dot--teal { background: #14b8a6; }

.kt-rupgrid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 560px) { .kt-rupgrid { grid-template-columns: repeat(3, 1fr); } }
.kt-rupgrid .kt-bigbtn:nth-last-child(2):first-child, .kt-rupgrid .kt-bigbtn:nth-last-child(2):first-child ~ .kt-bigbtn { grid-column: auto; }
.kt-bigbtn {
	font-family: inherit; font-size: 1.02rem; font-weight: 800; color: #312e81;
	background: #eef2ff; border: 1.5px solid #c7d2fe; border-radius: .9rem; padding: .8rem .6rem;
	cursor: pointer; transition: .13s; text-align: center;
}
.kt-bigbtn:hover { background: #e0e7ff; transform: translateY(-1px); }
.kt-bigbtn.is-wrong { animation: ktShake .4s; border-color: #f43f5e; background: #fff1f2; color: #e11d48; }

.kt-pacgrid { display: flex; flex-wrap: wrap; gap: .4rem; }
.kt-pacbtn {
	font-family: inherit; font-size: 1rem; font-weight: 700; color: #374151; min-width: 3.2rem;
	background: #fff; border: 1.5px solid #e5e7eb; border-radius: .7rem; padding: .5rem .8rem;
	cursor: pointer; transition: .13s;
}
.kt-pacbtn:hover { border-color: #6366f1; color: #4338ca; }
.kt-pacbtn.is-wrong { animation: ktShake .4s; border-color: #f43f5e; background: #fff1f2; color: #e11d48; }

/* ── ชิปคำแปล (เรียงคำ) ── */
.kt-tray {
	min-height: 3.4rem; border: 2px dashed #c7d2fe; border-radius: .9rem; background: #f8faff;
	display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem; align-items: flex-start; transition: border-color .2s, background .2s;
}
.kt-tray.is-correct { border-color: #10b981; background: #ecfdf5; }
.kt-tray.is-wrong { border-color: #fda4af; background: #fff1f2; }
.kt-tray__empty { color: #cbd5e1; font-size: .85rem; align-self: center; padding: 0 .5rem; }
.kt-bank { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem .1rem .1rem; }
.kt-chip {
	font-family: inherit; font-size: .95rem; font-weight: 600; color: #334155;
	background: #fff; border: 1.5px solid #e2e8f0; border-radius: .7rem; padding: .42rem .75rem;
	cursor: pointer; transition: .12s; box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.kt-chip:hover { border-color: #6366f1; color: #4338ca; transform: translateY(-1px); }
.kt-chip--placed { background: #eef2ff; border-color: #c7d2fe; color: #312e81; }

/* ── กล่องเฉลย/สรุป ── */
.kt-answerbox { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .9rem; padding: .85rem 1rem; }
.kt-answerbox__head { font-size: .75rem; font-weight: 700; color: #6366f1; margin-bottom: .4rem; }
.kt-answerbox__main { font-size: .95rem; color: #1f2937; }
.kt-answerbox__main strong { color: #4338ca; }
.kt-answerbox__trans { margin-top: .5rem; font-size: .95rem; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: .6rem; padding: .55rem .7rem; line-height: 1.7; }
.kt-decoder { margin-top: .6rem; background: #eef2ff; border: 1px solid #e0e7ff; border-radius: .7rem; padding: .6rem .75rem; font-size: .88rem; color: #3730a3; }
.kt-decoder__head { font-size: .72rem; font-weight: 800; color: #6366f1; margin-bottom: .2rem; }
.kt-how { margin-top: .55rem; font-size: .85rem; color: #64748b; }
.kt-note { margin-top: .45rem; font-size: .85rem; color: #0e7490; background: #ecfeff; border: 1px solid #cffafe; border-radius: .6rem; padding: .45rem .6rem; }
.kt-trap { margin-top: .5rem; font-size: .85rem; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: .6rem; padding: .45rem .6rem; }

/* ── ปุ่มทั่วไป ── */
.kt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	font-family: inherit; font-size: .95rem; font-weight: 700; border-radius: .8rem;
	padding: .6rem 1.1rem; cursor: pointer; border: none; transition: .14s; text-decoration: none;
}
.kt-btn:disabled { opacity: .4; cursor: not-allowed; }
.kt-btn--primary { background: #4f46e5; color: #fff; box-shadow: 0 3px 12px rgba(79, 70, 229, .3); }
.kt-btn--primary:hover:not(:disabled) { background: #4338ca; }
.kt-btn--ok { background: #059669; }
.kt-btn--ghost { background: #f1f5f9; color: #475569; }
.kt-btn--ghost:hover { background: #e2e8f0; }
.kt-btn--amber { background: #fef3c7; color: #b45309; }
.kt-btn--amber:hover { background: #fde68a; }
.kt-btn--dark { background: #374151; color: #fff; }
.kt-btn--dark:hover { background: #1f2937; }
/* ปุ่ม "ไปเกมถัดไป" — สีเขียว เด่นชัดว่าจบเกมนี้แล้ว */
.kt-btn--go { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 3px 12px rgba(5, 150, 105, .35); }
.kt-btn--go:hover { filter: brightness(1.06); }

/* ── ป้ายต่าง ๆ ── */
.kt-exampill {
	display: inline-flex; align-items: center; gap: .3rem;
	background: linear-gradient(135deg, #fbbf24, #d97706); color: #451a03;
	font-size: .72rem; font-weight: 800; padding: .2rem .6rem; border-radius: 999px;
}
.kt-tagpill { display: inline-flex; background: #ede9fe; color: #6d28d9; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
.kt-yearpill { display: inline-block; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; font-variant-numeric: tabular-nums; }

/* ── stepper สนามสอบ ── */
.kt-steps { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.kt-step {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .74rem; font-weight: 700; color: #9ca3af;
	background: #f3f4f6; border-radius: 999px; padding: .28rem .7rem; border: 1px solid #e5e7eb;
}
.kt-step.is-now { background: #4f46e5; color: #fff; border-color: #4f46e5; box-shadow: 0 2px 8px rgba(79, 70, 229, .3); }
.kt-step.is-done { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }

/* ── ปลดล็อกการ์ด ── */
.kt-unlock {
	text-align: center; border-radius: 1rem; padding: 1.1rem 1rem;
	background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
}
.kt-unlock--gold {
	background: linear-gradient(150deg, #fffbeb, #fef3c7); border-color: #fcd34d; color: #92400e;
	box-shadow: 0 6px 24px rgba(245, 158, 11, .2);
}
.kt-unlock__icon { font-size: 2rem; margin-bottom: .25rem; animation: ktPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.kt-unlock__title { font-weight: 800; font-size: 1.05rem; }
.kt-unlock__sub { font-size: .8rem; opacity: .8; margin-top: .2rem; }
@keyframes ktPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── คลังการ์ด (flip) — มือถือ 1 ใบเต็มจอ · PC ไม่เกิน 2 คอลัมน์ ── */
.kt-deckgrid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .kt-deckgrid { grid-template-columns: repeat(2, 1fr); } }
.kt-card { perspective: 1200px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kt-card__inner {
	position: relative; width: 100%; min-height: 270px; display: grid;
	transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.kt-card.flipped .kt-card__inner { transform: rotateY(180deg); }
.kt-card__face {
	grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
	border-radius: 1rem; padding: .9rem .8rem; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center; overflow: hidden;
}
.kt-card__front { background: #fff; border: 1.5px solid #e5e7eb; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); position: relative; }
.kt-card__front.is-done { border-color: #6ee7b7; }
.kt-card__state { position: absolute; top: .5rem; left: .6rem; font-size: 1.05rem; }
.kt-card__front.is-done .kt-card__state { color: #10b981; }
.kt-card__exam {
	position: absolute; top: .45rem; right: .5rem;
	background: linear-gradient(135deg, #fbbf24, #d97706); color: #451a03;
	font-size: .68rem; font-weight: 800; padding: .12rem .45rem; border-radius: 999px;
	display: inline-flex; align-items: center; gap: .2rem;
}
.kt-card__word { font-size: clamp(1.9rem, 8vw, 2.5rem); font-weight: 800; color: #312e81; line-height: 1.25; }
.kt-card__tag { font-size: .72rem; font-weight: 700; color: #6d28d9; background: #ede9fe; border-radius: 999px; padding: .08rem .5rem; margin-top: .25rem; }
.kt-card__meaning { font-size: .9rem; color: #64748b; margin-top: .4rem; line-height: 1.45; }
.kt-card__fliphint { font-size: .68rem; color: #c7cdd6; margin-top: .6rem; }
.kt-card__back {
	background: linear-gradient(150deg, #312e81, #4338ca); color: #fff;
	transform: rotateY(180deg); justify-content: flex-start; gap: .55rem; padding: 1rem .9rem;
	overflow-y: auto;
}
.kt-card__vik { font-weight: 800; font-size: 1.08rem; line-height: 1.55; }
.kt-card__trans { font-size: .95rem; opacity: .96; line-height: 1.65; }
.kt-card__meta { font-size: .9rem; background: rgba(255, 255, 255, .14); border-radius: .55rem; padding: .38rem .6rem; line-height: 1.5; }
.kt-card__how { font-size: .86rem; opacity: .86; line-height: 1.6; }
.kt-card__pills { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }

@media (min-width: 640px) {
	.kt-card__inner { min-height: 260px; }
	.kt-card__vik { font-size: 1.05rem; }
	.kt-card__trans { font-size: .92rem; }
	.kt-card__meta { font-size: .86rem; }
	.kt-card__how { font-size: .82rem; }
}

/* ── mode switch 2 ขั้น (ปูพื้น / สนามวิเคราะห์) ── */
.kt-modegroups { display: flex; flex-direction: column; gap: .55rem; align-items: center; }
.kt-modegroup { text-align: center; }
.kt-modegroup__label { font-size: .72rem; font-weight: 800; color: #9ca3af; margin-bottom: .3rem; letter-spacing: .02em; }
.kt-seg--base button.active { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 2px 8px rgba(5, 150, 105, .3); }

/* ── sub-tabs ในการ์ดโหมด ── */
.kt-subtabs { display: flex; justify-content: center; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kt-subtabs button {
	font-family: inherit; font-size: .82rem; font-weight: 700; color: #6b7280;
	background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 999px; padding: .35rem .85rem;
	cursor: pointer; transition: .13s; display: inline-flex; align-items: center; gap: .3rem;
}
.kt-subtabs button:hover { color: #4338ca; border-color: #c7d2fe; }
.kt-subtabs button.active { background: #4f46e5; border-color: #4f46e5; color: #fff; box-shadow: 0 2px 8px rgba(79, 70, 229, .3); }

/* ── กล่องหมวดปัจจัย (ดูสูตร) ── */
.kt-groupbox { border: 1px solid #e5e7eb; border-radius: .9rem; padding: .7rem .85rem; margin-bottom: .6rem; background: #fafbfc; }
.kt-groupbox__head { font-size: .88rem; color: #1f2937; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.kt-groupbox__head strong { color: #4338ca; }
.kt-groupbox__usage { font-size: .72rem; color: #9ca3af; margin-left: auto; }
.kt-groupbox__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.kt-pacchip {
	display: inline-flex; align-items: center; gap: .25rem;
	background: #eef2ff; border: 1px solid #c7d2fe; color: #312e81;
	font-size: 1.05rem; font-weight: 800; border-radius: .6rem; padding: .25rem .7rem;
}
.kt-pacchip--soft { background: #fff; border-color: #e5e7eb; color: #374151; font-size: .88rem; font-weight: 600; }

/* ── คำโชว์ใหญ่กลางจอ (จัดหมวด/สังเกต/ทายรูป) ── */
.kt-bigword {
	text-align: center; font-size: clamp(2.2rem, 9vw, 3.4rem); font-weight: 800; color: #312e81;
	padding: .9rem 0 .6rem; line-height: 1.3;
}

/* ── รายการธาตุ-ศัพท์ ── */
.kt-dhatulist { display: grid; grid-template-columns: 1fr; gap: .15rem; }
@media (min-width: 640px) { .kt-dhatulist { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; } }
.kt-dhatuitem {
	display: grid; grid-template-columns: 4.2rem 1fr auto; gap: .5rem; align-items: baseline;
	padding: .28rem .5rem; border-radius: .5rem; font-size: .92rem;
}
.kt-dhatuitem:nth-child(odd) { background: #f8fafc; }
.kt-dhatuitem__d { font-weight: 800; color: #4338ca; }
.kt-dhatuitem__m { color: #374151; }
.kt-dhatuitem__v { color: #64748b; font-weight: 600; }
.kt-vnote { color: #e11d48; font-style: normal; font-weight: 700; font-size: .78rem; }

/* ── จับคู่ 2 คอลัมน์ ── */
.kt-matchgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.kt-matchcol { display: flex; flex-direction: column; gap: .45rem; }
.kt-matchbtn {
	font-family: inherit; font-size: .95rem; color: #1f2937; text-align: center;
	background: #fff; border: 1.5px solid #e2e8f0; border-radius: .75rem; padding: .55rem .5rem;
	cursor: pointer; transition: .13s; line-height: 1.35;
}
.kt-matchbtn strong { font-size: 1.05rem; color: #312e81; }
.kt-matchbtn__v { display: block; font-size: .72rem; color: #94a3b8; }
.kt-matchbtn__v em { color: #e11d48; font-style: normal; font-weight: 700; }
.kt-matchbtn:hover { border-color: #6366f1; }
.kt-matchbtn.is-selected { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 0 0 2px #c7d2fe; }
.kt-matchbtn.is-done { opacity: .38; border-color: #a7f3d0; background: #ecfdf5; cursor: default; }
.kt-matchbtn.is-wrong { animation: ktShake .4s; border-color: #f43f5e; background: #fff1f2; }

/* ── สถานะปุ่มเพิ่มเติม ── */
.kt-pacbtn.is-picked { border-color: #4f46e5; background: #eef2ff; color: #312e81; box-shadow: 0 0 0 2px #e0e7ff; }
.kt-pacbtn.is-right2, .kt-bigbtn.is-right2 { border-color: #059669; background: #ecfdf5; color: #047857; }

/* ── ไฮไลต์แดง: ส่วนปัจจัยที่ทำให้เป็นกัมมวาจก (ิย / ตพฺพ) ── */
.kt-vhl { color: #e11d48; font-style: normal; font-weight: 800; }

/* ชิปบาลีแบบโชว์เฉย ๆ (โหมดทายสาธนะ — ไม่ใช่ปุ่ม) */
.kt-vikchip--static { cursor: default; }
.kt-vikchip--static:hover { transform: none; border-color: #c7d2fe; }

/* ปุ่มตัวเลือก กัตตุสาธนะ (ตัสสีละ) — เส้นประให้สะดุดตา */
.kt-sadbtn--tassila { border-style: dashed; font-size: .82rem; }

/* ── ตารางกฎสังเกตปัจจัย (โหมดสังเกตปัจจัย › ดูกฎ) ── */
.kt-spotrules { display: flex; flex-direction: column; gap: .45rem; margin-top: .5rem; }
.kt-spotrule { display: grid; grid-template-columns: 4rem 1fr; gap: .6rem; align-items: start; }
.kt-spotrule .kt-pacchip { justify-content: center; width: 100%; }
.kt-spotrule__rule { font-weight: 800; color: #1f2937; font-size: .92rem; }
.kt-spotrule__note { font-size: .8rem; color: #6b7280; line-height: 1.5; }

/* ── ปุ่มเลือกกฎแปลง (เกมกิริยากิตก์ /kiriya) ── */
.kt-rulegrid { display: grid; grid-template-columns: 1fr; gap: .45rem; }
@media (min-width: 640px) { .kt-rulegrid { grid-template-columns: 1fr 1fr; } }
.kt-rulebtn {
	font-family: inherit; text-align: left; background: #fff; border: 1.5px solid #e2e8f0;
	border-radius: .8rem; padding: .55rem .75rem; cursor: pointer; transition: .13s; line-height: 1.45;
}
.kt-rulebtn:hover { border-color: #6366f1; }
.kt-rulebtn.is-wrong { animation: ktShake .4s; border-color: #f43f5e; background: #fff1f2; }
.kt-rulebtn__cond { display: block; font-size: .75rem; color: #94a3b8; }
.kt-rulebtn__act { display: block; font-size: .9rem; font-weight: 700; color: #1f2937; }

/* ── ปุ่มเปิดดูการ์ดสรุปของหลวงพี่ภูริ ── */
.kt-cardlink {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .78rem; font-weight: 700; color: #4338ca; text-decoration: none;
	background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px; padding: .25rem .7rem;
	transition: .13s; white-space: nowrap;
}
.kt-cardlink:hover { background: #e0e7ff; color: #312e81; }

/* ── ฝึกแบบฟอร์ม ── */
.kt-patternbox { background: linear-gradient(150deg, #ecfdf5, #f0fdfa); border: 1.5px solid #a7f3d0; border-radius: 1rem; padding: .8rem 1rem; }
.kt-patternbox__head { font-size: .72rem; font-weight: 800; color: #059669; margin-bottom: .3rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.kt-patternbox__body { font-size: .98rem; font-weight: 700; color: #065f46; line-height: 1.65; }
.kt-patternbox__note { margin-top: .4rem; font-size: .78rem; color: #92400e; background: #fffbeb; border: 1px dashed #fcd34d; border-radius: .55rem; padding: .35rem .55rem; }
.kt-formline {
	display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
	background: #f8faff; border: 2px dashed #c7d2fe; border-radius: .9rem; padding: .55rem .6rem;
}
.kt-formchip { font-size: .92rem; font-weight: 600; border-radius: .6rem; padding: .3rem .6rem; line-height: 1.4; }
.kt-formchip.is-done { background: #eef2ff; border: 1.5px solid #c7d2fe; color: #312e81; }
.kt-formchip.is-now { background: #fffbeb; border: 1.5px solid #f59e0b; color: #b45309; font-weight: 800; min-width: 2.4rem; text-align: center; animation: ktPulse 1.4s ease-in-out infinite; }
.kt-formchip.is-todo { background: #f1f5f9; border: 1.5px dashed #e2e8f0; color: #cbd5e1; }
@keyframes ktPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.kt-formchoices { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.kt-formchoice {
	font-family: inherit; font-size: 1rem; font-weight: 700; color: #334155;
	background: #fff; border: 1.5px solid #e2e8f0; border-radius: .8rem; padding: .6rem 1rem;
	cursor: pointer; transition: .13s; box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.kt-formchoice:hover { border-color: #6366f1; color: #4338ca; transform: translateY(-1px); }
.kt-formchoice.is-wrong { animation: ktShake .4s; border-color: #f43f5e; background: #fff1f2; color: #e11d48; }

@media (prefers-reduced-motion: reduce) {
	.kt-card__inner { transition: none; }
	.kt-vikchip, .kt-sadbtn, .kt-bigbtn, .kt-pacbtn, .kt-chip, .kt-matchbtn { transition: none; }
	.kt-unlock__icon { animation: none; }
}