/* เณรน้อยตีระฆัง (/novice-bell) — ธีมหอระฆังย่ำรุ่ง
 *
 * รหัสสีศักดิ์สิทธิ์ (GDD ข้อ ๗): ทอง = เสียงก้อง (โฆสะ) · น้ำตาลไม้ = เสียงทึบ (อโฆสะ)
 * ห้ามใช้คู่สีนี้สื่อความอย่างอื่นทั้งเกม — สถานะถูก/ผิดใช้ฟ้าเรืองแสงกับชาดแทน
 */

/* รูปอักษรบาลีมาตรฐาน: ฐ และ ญ ตัดเชิงล่างตามแบบเดียวกับธรรมบทออนไลน์ */
@font-face {
	font-family: 'THSarabunPali';
	src: url('/assets/fonts/thsarabun/THSarabunPaliCut.ttf?v=20260823.1') format('truetype');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--nb-sky-0: #0b1a2b;
	--nb-sky-1: #17324e;
	--nb-sky-2: #1f4166;
	--nb-bronze: #d9a441;
	--nb-bronze-lit: #f6d089;
	--nb-bronze-deep: #8a6410;
	--nb-wood: #8a5a30;
	--nb-wood-deep: #5b3a1e;
	--nb-air: #7dd3fc;
	--nb-ink: #06121f;
	--nb-text: #f8fafc;
	--nb-text-soft: #cbd5e1;
	--nb-text-dim: #8ea3bb;
	--nb-good: #6ee7b7;
	--nb-bad: #fca5a5;
	--nb-panel: rgba(11, 26, 43, .72);
	--nb-panel-solid: #10263c;
	--nb-line: rgba(217, 164, 65, .28);
	--nb-radius: 14px;
	--nb-shadow: 0 18px 40px -22px rgba(2, 8, 18, .9);
	--nb-type-meta: .875rem;
	--nb-type-body: 1rem;
	--nb-type-table-label: 1.125rem;
	--nb-type-table-data: 1.25rem;
	--nb-type-pali-data: 1.65rem;
	/* หอเป็นทรงสูงแคบ — จำกัดคอลัมน์เนื้อหาให้เป็นรูปหอ ไม่ปล่อยยืดเต็มจอกว้าง */
	--nb-col: 54rem;
	--nb-gutter: 1rem;
	--nb-font-pali: 'THSarabunPali', 'Sarabun', 'Noto Sans Thai', sans-serif;
}

[v-cloak] { display: none; }

.nb-body {
	margin: 0;
	min-height: 100vh;
	font-family: 'Sarabun', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
	color: var(--nb-text);
	/* แสงย่ำรุ่งอยู่ครึ่งบนของหน้า ที่เหลือเป็นครามเข้มทึบ — ไม่ใช้ background-attachment: fixed
	   เพราะหน้ายาวจะเหลือพื้นที่ไม่ถูกทาสี และ iOS กระตุก */
	background-color: var(--nb-sky-0);
	background-image: radial-gradient(120% 90% at 50% 0%, var(--nb-sky-2) 0%, var(--nb-sky-1) 45%, var(--nb-sky-0) 100%);
	background-repeat: no-repeat;
	background-size: 100% 100vh;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.nb-app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- ส่วนกลาง */

.nb-btn,
.nb-ghost,
.nb-primary {
	font: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .6rem 1.15rem;
	border-radius: 999px;
	border: 1px solid var(--nb-line);
	background: rgba(255, 255, 255, .05);
	color: var(--nb-text);
	cursor: pointer;
	transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.nb-btn:hover, .nb-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(217, 164, 65, .55); }
.nb-btn:active, .nb-primary:active, .nb-ghost:active { transform: translateY(1px); }

.nb-primary {
	background: linear-gradient(135deg, var(--nb-bronze-lit), var(--nb-bronze));
	border-color: transparent;
	color: #22160a;
	font-weight: 700;
	box-shadow: 0 10px 24px -14px rgba(217, 164, 65, .85);
}
.nb-primary:hover { filter: brightness(1.06); }
.nb-primary:disabled, .nb-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.nb-primary-lg { padding: .8rem 1.6rem; font-size: 1.06rem; }

.nb-focusable:focus-visible,
.nb-btn:focus-visible,
.nb-primary:focus-visible,
.nb-ghost:focus-visible,
button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--nb-air);
	outline-offset: 2px;
}

.nb-back {
	position: relative;
	z-index: 3;
	align-self: flex-start;
	text-decoration: none;
	font-size: .95rem;
	color: var(--nb-text-soft);
	background: rgba(6, 18, 31, .6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.nb-state {
	margin: auto;
	padding: 3rem 1.25rem;
	text-align: center;
	display: grid;
	gap: .85rem;
	place-items: center;
}
.nb-state i { font-size: 2rem; color: var(--nb-bronze); }
.nb-state h1 { margin: 0; font-size: 1.35rem; }
.nb-state p { margin: 0; color: var(--nb-text-soft); max-width: 34ch; }

/* กังวานเมื่อทำถูก — สัญญาณสายตาคู่กับเสียง (เล่นได้แม้ปิดเสียง) */
@keyframes nb-ring {
	0% { box-shadow: 0 0 0 0 rgba(125, 211, 252, .55); }
	100% { box-shadow: 0 0 0 26px rgba(125, 211, 252, 0); }
}
@keyframes nb-shake {
	0%, 100% { transform: translateX(0); }
	22% { transform: translateX(-5px); }
	55% { transform: translateX(5px); }
	80% { transform: translateX(-2px); }
}
@keyframes nb-bell-swing {
	0%, 100% { transform: rotate(0); }
	24% { transform: rotate(-5deg); }
	50% { transform: rotate(4deg); }
	74% { transform: rotate(-2deg); }
}
@keyframes nb-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
.nb-rise { animation: nb-rise .34s ease both; }

/* ------------------------------------------------------------------ หน้าแรก */

.nb-home { display: flex; flex-direction: column; }

/* อาร์ตกินเต็มความกว้างจอ แต่ตัวหนังสือเรียงตรงกับคอลัมน์เนื้อหาด้านล่าง */
.nb-hero {
	position: relative;
	min-height: min(74vh, 520px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1rem max(var(--nb-gutter), calc((100% - var(--nb-col)) / 2)) 1.8rem;
	overflow: hidden;
}
.nb-hero-art {
	position: absolute;
	inset: 0;
	background-image: var(--nb-hero-art);
	background-size: cover;
	background-position: center right;
}
.nb-hero-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(6, 16, 28, .94) 0%, rgba(7, 20, 34, .74) 42%, rgba(9, 24, 40, .12) 78%),
		linear-gradient(0deg, var(--nb-sky-0) 2%, rgba(11, 26, 43, 0) 46%);
}
.nb-hero-copy { position: relative; width: min(100%, var(--nb-col)); display: grid; gap: .55rem; }
.nb-hero-copy > p,
.nb-hero-copy > h2 { max-width: 40ch; }
.nb-hero-copy .nb-kicker { margin: 0; color: var(--nb-air); font-size: .92rem; letter-spacing: .02em; }
.nb-hero-copy h1 {
	margin: 0;
	font-size: clamp(2rem, 8vw, 3.1rem);
	line-height: 1.28;
	color: var(--nb-bronze-lit);
	text-shadow: 0 3px 18px rgba(2, 8, 18, .8);
}
/* balance กันคำโดดท้ายบรรทัด (เบราว์เซอร์เก่าไม่รู้จักก็แค่ตัดบรรทัดตามปกติ) */
.nb-hero-copy h2 {
	margin: 0;
	font-size: clamp(1rem, 3.6vw, 1.2rem);
	font-weight: 600;
	color: var(--nb-text-soft);
	text-wrap: balance;
}
.nb-hero-copy p { margin: .2rem 0 0; color: var(--nb-text-soft); line-height: 1.75; }
.nb-hero-actions { display: flex; flex-wrap: nowrap; gap: .6rem; margin-top: .55rem; }
.nb-hero-actions .nb-btn,
.nb-hero-actions .nb-primary { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 700px) {
	.nb-hero-actions { flex-wrap: wrap; }
}

.nb-stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: .6rem;
	width: min(100%, var(--nb-col));
	margin: .35rem auto 0;
	padding: 0 var(--nb-gutter);
	box-sizing: border-box;
}
.nb-stat {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .85rem;
	border-radius: var(--nb-radius);
	background: var(--nb-panel);
	border: 1px solid var(--nb-line);
}
.nb-stat i { color: var(--nb-bronze); font-size: 1.05rem; }
.nb-stat span { display: grid; line-height: 1.35; }
.nb-stat small { color: var(--nb-text-dim); font-size: var(--nb-type-meta); }
.nb-stat b { font-size: 1.02rem; }

.nb-dawn-call {
	width: min(100%, var(--nb-col));
	margin: 1rem auto 0;
	box-sizing: border-box;
	padding: .9rem 1rem;
	border-radius: var(--nb-radius);
	border: 1px solid rgba(125, 211, 252, .4);
	background: linear-gradient(120deg, rgba(125, 211, 252, .16), rgba(11, 26, 43, .5));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}
.nb-dawn-call i { font-size: 1.4rem; color: var(--nb-air); }
.nb-dawn-call div { flex: 1 1 14rem; display: grid; gap: .1rem; }
.nb-dawn-call strong { font-size: 1.02rem; }
.nb-dawn-call small { color: var(--nb-text-soft); }
.nb-dawn-call.is-done { border-color: rgba(110, 231, 183, .38); background: linear-gradient(120deg, rgba(110, 231, 183, .14), rgba(11, 26, 43, .5)); }
.nb-dawn-call.is-done i { color: var(--nb-good); }

/* หอ ๗ ชั้น — เรียงจากชั้นล่างขึ้นชั้นบนตามลำดับองก์ */
.nb-tower {
	display: grid;
	gap: .7rem;
	width: min(100%, var(--nb-col));
	margin: 0 auto;
	padding: 1.25rem var(--nb-gutter) 2.5rem;
	box-sizing: border-box;
}
.nb-tower h2 { margin: .5rem 0 0; font-size: 1.16rem; }
.nb-tower > p { margin: 0 0 .35rem; color: var(--nb-text-soft); font-size: .95rem; }

.nb-floor {
	position: relative;
	display: grid;
	grid-template-columns: 3.2rem 1fr auto;
	align-items: center;
	gap: .85rem;
	width: 100%;
	padding: .85rem .9rem;
	border-radius: var(--nb-radius);
	border: 1px solid var(--nb-line);
	background: linear-gradient(100deg, rgba(16, 38, 60, .92), rgba(11, 26, 43, .72));
	color: inherit;
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.nb-floor:hover { transform: translateY(-2px); border-color: rgba(217, 164, 65, .6); box-shadow: var(--nb-shadow); }
.nb-floor.is-locked { cursor: not-allowed; opacity: .58; }
.nb-floor.is-locked:hover { transform: none; border-color: var(--nb-line); box-shadow: none; }
.nb-floor.is-lit { border-color: rgba(217, 164, 65, .55); }
.nb-floor.is-lit::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(80% 120% at 0% 50%, rgba(217, 164, 65, .16), transparent 65%);
}

.nb-floor-no {
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 12px;
	background: rgba(6, 18, 31, .8);
	border: 1px solid var(--nb-line);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--nb-bronze-lit);
}
.nb-floor.is-locked .nb-floor-no { color: var(--nb-text-dim); }
.nb-floor-copy { display: grid; gap: .12rem; min-width: 0; }
.nb-floor-copy strong { font-size: 1.06rem; }
.nb-floor-copy small { color: var(--nb-text-soft); font-size: .88rem; }
.nb-floor-copy em { color: var(--nb-text-dim); font-size: var(--nb-type-meta); font-style: normal; }
.nb-floor-side { display: grid; justify-items: end; gap: .3rem; }
.nb-stars { display: inline-flex; gap: .18rem; font-size: .82rem; }
.nb-stars i { color: rgba(203, 213, 225, .28); }
.nb-stars i.is-on { color: var(--nb-bronze); }
.nb-floor-side .nb-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: var(--nb-type-meta);
	min-height: 44px;
	padding: 0 .75rem;
	border-radius: 999px;
	border: 1px solid rgba(125, 211, 252, .4);
	color: var(--nb-air);
	text-decoration: none;
	white-space: nowrap;
}
.nb-floor-side a.nb-badge:hover { background: rgba(125, 211, 252, .14); }
.nb-floor-side .nb-badge.is-soon { border-color: rgba(203, 213, 225, .26); color: var(--nb-text-dim); }

.nb-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; margin-top: .4rem; }
.nb-shelf a {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .8rem .9rem;
	border-radius: var(--nb-radius);
	border: 1px solid var(--nb-line);
	background: rgba(16, 38, 60, .72);
	color: inherit;
	text-decoration: none;
	transition: transform .14s ease, border-color .14s ease;
}
.nb-shelf a:hover { transform: translateY(-2px); border-color: rgba(217, 164, 65, .6); }
.nb-shelf i { font-size: 1.2rem; color: var(--nb-bronze); }
.nb-shelf span { display: grid; }
.nb-shelf strong { font-size: 1rem; }
.nb-shelf small { color: var(--nb-text-soft); font-size: var(--nb-type-meta); }

/* -------------------------------------------------------------- แถบบนของด่าน */

.nb-topbar {
	position: sticky;
	top: 0;
	z-index: 8;
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: .6rem;
	padding: .55rem .75rem;
	background: rgba(6, 18, 31, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--nb-line);
}
.nb-topbar.has-map { grid-template-columns: auto minmax(0, 1fr) repeat(3, auto); }
.nb-topbar .nb-icon-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--nb-line);
	color: var(--nb-text);
	display: grid;
	place-items: center;
	cursor: pointer;
}
.nb-topbar .nb-icon-btn:hover { background: rgba(255, 255, 255, .12); }
.nb-topbar .nb-icon-btn.is-on { color: var(--nb-bronze-lit); border-color: rgba(217, 164, 65, .55); }
.nb-top-copy { display: grid; min-width: 0; }
.nb-top-copy small { color: var(--nb-text-dim); font-size: var(--nb-type-meta); }
.nb-top-copy strong { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------------------------------- สารบัญข้อทั้งหมด */

body.nb-modal-open { overflow: hidden; }
.nb-map-backdrop {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(2, 10, 18, .78);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.nb-map-modal {
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	width: min(820px, 100%);
	max-height: min(880px, calc(100dvh - 2rem));
	overflow: hidden;
	border: 1px solid rgba(217, 164, 65, .55);
	border-radius: 22px;
	background: #0b2237;
	box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}
.nb-map-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.1rem .8rem;
	border-bottom: 1px solid var(--nb-line);
}
.nb-map-head small { color: var(--nb-text-soft); font-size: max(.875rem, 14px); }
.nb-map-head h2 { margin: .1rem 0 0; font-size: 1.4rem; line-height: 1.35; }
.nb-map-close {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 1px solid var(--nb-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	color: var(--nb-text);
	cursor: pointer;
}
.nb-map-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem 1.1rem;
	border-bottom: 1px solid var(--nb-line);
	background: rgba(217, 164, 65, .07);
}
.nb-map-tools p { margin: 0; color: var(--nb-text-soft); font-size: 1rem; line-height: 1.6; }
.nb-map-tools p i { color: var(--nb-good); }
.nb-font-control { display: flex; align-items: center; gap: .5rem; }
.nb-font-control span { color: var(--nb-text-soft); font-size: max(.875rem, 14px); }
.nb-font-control button {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border: 1px solid rgba(217, 164, 65, .5);
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	color: var(--nb-text);
	cursor: pointer;
}
.nb-font-control button:disabled { opacity: .38; cursor: not-allowed; }
.nb-font-control output { min-width: 4.25rem; color: var(--nb-gold-pale); font-weight: 700; text-align: center; }
.nb-map-scroll { overflow-y: auto; overscroll-behavior: contain; padding: .8rem; }
.nb-map-act { margin-bottom: .65rem; overflow: hidden; border: 1px solid var(--nb-line); border-radius: 15px; background: rgba(4, 18, 31, .45); }
.nb-map-act > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 52px;
	padding: .65rem .85rem;
	color: var(--nb-text);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.6;
}
.nb-map-act > summary small { flex: 0 0 auto; color: var(--nb-gold-pale); font-size: max(.875rem, 14px); }
.nb-map-act[open] > summary { border-bottom: 1px solid var(--nb-line); background: rgba(217, 164, 65, .1); }
.nb-map-act-body { display: grid; gap: .85rem; padding: .8rem; }
.nb-map-group h3 { margin: 0 0 .45rem; color: var(--nb-gold-pale); font-size: 1rem; line-height: 1.6; }
.nb-map-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.nb-map-item {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: center;
	gap: .55rem;
	min-height: 58px;
	padding: .55rem .65rem;
	border: 1px solid rgba(148, 163, 184, .28);
	border-radius: 12px;
	background: rgba(255, 255, 255, .045);
	color: var(--nb-text);
	text-align: left;
	cursor: pointer;
}
.nb-map-item > i { color: var(--nb-good); text-align: center; }
.nb-map-item > span { display: grid; min-width: 0; }
.nb-map-item strong { font-size: 1rem; line-height: 1.45; }
.nb-map-item small { overflow: hidden; color: var(--nb-text-soft); font-size: max(.875rem, 14px); line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.nb-map-item.is-current { border-color: var(--nb-air); background: rgba(125, 211, 252, .11); box-shadow: inset 3px 0 var(--nb-air); }
.nb-map-item.is-current > i { color: var(--nb-air); }
.nb-map-item:disabled { opacity: .4; cursor: not-allowed; }
.nb-map-item:disabled > i { color: var(--nb-text-dim); }

@media (max-width: 600px) {
	.nb-topbar.has-map { gap: .4rem; padding-inline: .5rem; }
	.nb-map-backdrop { padding: 0; place-items: stretch; }
	.nb-map-modal { width: 100%; max-height: 100dvh; border-radius: 0; }
	.nb-map-tools { align-items: stretch; flex-direction: column; }
	.nb-font-control { justify-content: space-between; }
	.nb-map-items { grid-template-columns: 1fr; }
}

.nb-steps { display: flex; gap: .3rem; padding: .55rem .75rem 0; }
.nb-steps > div {
	flex: 1;
	display: grid;
	gap: .25rem;
	font-size: var(--nb-type-meta);
	color: var(--nb-text-dim);
	text-align: center;
}
.nb-steps i.nb-step-bar { display: block; height: 4px; border-radius: 999px; background: rgba(203, 213, 225, .2); }
.nb-steps > div.is-done { color: var(--nb-text-soft); }
.nb-steps > div.is-done i.nb-step-bar { background: var(--nb-good); }
.nb-steps > div.is-current { color: var(--nb-bronze-lit); font-weight: 700; }
.nb-steps > div.is-current i.nb-step-bar { background: var(--nb-bronze); }

.nb-stage {
	display: grid;
	gap: .85rem;
	width: min(100%, var(--nb-col));
	margin: 0 auto;
	padding: .9rem var(--nb-gutter) 3rem;
	box-sizing: border-box;
}

.nb-teacher {
	display: flex;
	gap: .7rem;
    align-items: flex-start;
	padding: .8rem .9rem;
	border-radius: var(--nb-radius);
	background: rgba(16, 38, 60, .7);
	border: 1px solid var(--nb-line);
}
.nb-teacher i { color: var(--nb-bronze); font-size: 1.05rem; margin-top: .15rem; }
.nb-teacher p { margin: 0; color: var(--nb-text-soft); line-height: 1.7; }

.nb-task { display: grid; gap: .3rem; justify-items: start; }
.nb-task-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	width: 100%;
}
.nb-task .nb-chip { flex: 0 0 auto; font-size: .875rem; }
.nb-task h2 { margin: 0; font-size: 1.16rem; }
.nb-task p { margin: 0; color: var(--nb-text-soft); font-size: .95rem; line-height: 1.7; }
.nb-task-brief {
	gap: .45rem;
	width: 100%;
	padding: .85rem 1rem;
	box-sizing: border-box;
	border: 1px solid rgba(125, 211, 252, .4);
	border-radius: var(--nb-radius);
	background: rgba(125, 211, 252, .1);
}
.nb-task-brief h2 { font-size: clamp(1.25rem, 4vw, 1.45rem); line-height: 1.45; }
.nb-task-brief p { color: var(--nb-text); font-size: 1rem; font-weight: 600; }

.nb-feedback {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	padding: .75rem .9rem;
	border-radius: var(--nb-radius);
	border: 1px solid rgba(125, 211, 252, .35);
	background: rgba(125, 211, 252, .1);
	min-height: 3.2rem;
}
.nb-feedback.is-good { border-color: rgba(110, 231, 183, .42); background: rgba(110, 231, 183, .12); }
.nb-feedback.is-bad { border-color: rgba(252, 165, 165, .45); background: rgba(252, 165, 165, .1); }
.nb-feedback i { margin-top: .18rem; }
.nb-feedback.is-good i { color: var(--nb-good); }
.nb-feedback.is-bad i { color: var(--nb-bad); }
.nb-feedback div { display: grid; gap: .18rem; }
.nb-feedback strong { font-size: .98rem; }
.nb-feedback small { color: var(--nb-text-soft); line-height: 1.65; font-size: .88rem; }

/* --------------------------------------------------------------- ระฆังและราว */

.nb-rail-wrap { display: grid; gap: .55rem; }
.nb-rail-label { display: flex; align-items: baseline; gap: .5rem; font-size: .875rem; color: var(--nb-text-dim); }
.nb-rail-label b { color: var(--nb-text-soft); font-size: .95rem; }

.nb-rail {
	position: relative;
	display: flex;
	gap: .45rem;
	padding: 1.55rem .6rem .7rem;
	overflow-x: auto;
	scrollbar-width: thin;
	border-radius: var(--nb-radius);
	background: linear-gradient(180deg, rgba(6, 18, 31, .55), rgba(6, 18, 31, .18));
	border: 1px solid rgba(138, 90, 48, .45);
}
/* คานไม้ของราว — น้ำตาลไม้ใช้เป็นวัสดุฉาก ไม่ได้สื่อ "เสียงทึบ" */
.nb-rail::before {
	content: "";
	position: absolute;
	left: .5rem;
	right: .5rem;
	top: .95rem;
	height: 9px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--nb-wood), var(--nb-wood-deep));
	box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.nb-rail.is-vagga {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 3.35rem));
	justify-content: center;
	gap: clamp(.15rem, 1.5vw, .45rem);
	padding-inline: .35rem;
	overflow-x: hidden;
}
.nb-rail.is-vagga .nb-hook,
.nb-rail.is-vagga .nb-bell { width: 100%; }
.nb-rail.is-vagga .nb-hook-slot { width: min(2.9rem, 100%); }

.nb-hook {
	position: relative;
	flex: 0 0 auto;
	width: 3.35rem;
	min-height: 4.4rem;
	display: grid;
	place-items: start center;
	border-radius: 10px;
}
.nb-hook-slot {
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 3.5rem;
	border-radius: 50% 50% 20% 20% / 55% 55% 24% 24%;
	border: 1px dashed rgba(203, 213, 225, .3);
	color: var(--nb-text-dim);
	font-size: .875rem;
}
.nb-hook.is-next .nb-hook-slot {
	border-color: var(--nb-air);
	color: var(--nb-air);
	animation: nb-ring 1.5s ease-out infinite;
}

/* ระฆังสัมฤทธิ์ */
.nb-bell {
	position: relative;
	flex: 0 0 auto;
	width: 3.3rem;
	height: 3.9rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	display: grid;
	place-items: center;
}
.nb-bell-body {
	position: relative;
	width: 88%;
	height: 3.1rem;
	margin-top: .35rem;
	display: grid;
	place-items: center;
	/* ทรงระฆัง: ไหล่กลม เอวเรียว แล้วบานออกที่ปาก */
	border-radius: 50% 50% 12% 12% / 64% 64% 16% 16%;
	background: linear-gradient(165deg, var(--nb-bronze-lit) 4%, var(--nb-bronze) 44%, var(--nb-bronze-deep) 100%);
	box-shadow: inset 0 -7px 11px -7px rgba(0, 0, 0, .6), 0 6px 14px -8px rgba(0, 0, 0, .8);
	color: var(--nb-ink);
	font-size: 2.25rem;
	font-family: var(--nb-font-pali);
	font-weight: 700;
	line-height: 1;
	padding-bottom: .12rem;
	box-sizing: border-box;
}
/* หูระฆังบนยอด */
.nb-bell-body::before {
	content: "";
	position: absolute;
	top: -.46rem;
	width: .8rem;
	height: .5rem;
	border: 2px solid var(--nb-bronze-deep);
	border-bottom: 0;
	border-radius: 50% 50% 0 0;
}
/* ปากระฆังบานกว้างกว่าตัว */
.nb-bell-body::after {
	content: "";
	position: absolute;
	bottom: -.16rem;
	left: -8%;
	width: 116%;
	height: .4rem;
	border-radius: 45% / 62%;
	background: linear-gradient(180deg, var(--nb-bronze) 10%, var(--nb-bronze-deep) 100%);
	box-shadow: 0 2px 5px -3px rgba(0, 0, 0, .9);
}
.nb-bell small {
	position: absolute;
	bottom: -.05rem;
	font-size: var(--nb-type-meta);
	color: var(--nb-text-dim);
}
/* นิคคหิตเป็นลูกกระพรวนเล็ก ไม่ใช่ระฆังเต็มใบ — ตอกย้ำ "มีนิคคหิตเป็นที่สุด" */
.nb-bell.is-small .nb-bell-body { width: 66%; height: 2.1rem; margin-top: 1.05rem; font-size: 1.75rem; border-radius: 50%; }
.nb-bell.is-small .nb-bell-body::after { left: 0; width: 100%; height: .26rem; bottom: -.1rem; }
.nb-bell.is-selected { transform: translateY(-8px); }
.nb-bell.is-selected .nb-bell-body { box-shadow: 0 0 0 3px var(--nb-air), 0 10px 20px -10px rgba(0, 0, 0, .9); }
.nb-bell.is-hung { cursor: default; }
.nb-bell.is-hung .nb-bell-body { animation: nb-ring .8s ease-out 1; }
.nb-bell.is-wrong .nb-bell-body { animation: nb-shake .34s ease 1; box-shadow: 0 0 0 3px var(--nb-bad); }
.nb-bell:disabled { cursor: wait; }
/* ⚠ ระฆังปลอมต้องหน้าตาเหมือนของจริงเป๊ะ — ถ้าย้อมสีให้ต่างจะกลายเป็นเกมดูสี ไม่ใช่เกมรู้อักขระ */

.nb-pile {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: .75rem;
	border-radius: var(--nb-radius);
	background: rgba(6, 18, 31, .5);
	border: 1px solid var(--nb-line);
	min-height: 5rem;
}
.nb-sequence-pile { justify-content: center; }
.nb-sequence-pile.is-vagga {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 3.3rem));
	gap: clamp(.15rem, 1.5vw, .5rem);
	padding-inline: .35rem;
}
.nb-sequence-pile.is-vagga .nb-bell { width: 100%; }
.nb-pile-empty { color: var(--nb-text-dim); font-size: .9rem; margin: auto; }
.nb-hang-feedback { margin-top: .25rem; }

/* --------------------------------------------------------------- ผังหน้าหอ */

.nb-plaque {
	padding: 1rem;
	border-radius: var(--nb-radius);
	background: linear-gradient(160deg, rgba(35, 60, 88, .92), rgba(12, 28, 46, .95));
	border: 1px solid var(--nb-line);
	box-shadow: inset 0 1px 0 rgba(246, 208, 137, .18);
	display: grid;
	gap: .6rem;
}
/* ช่องผังไหลได้หลายช่องต่อบรรทัดถ้าข้อความไม่ยาว — ไม่บังคับช่องละบรรทัด
   min() กันล้นบนจอแคบสุด */
.nb-slot-grid {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
/* ป้ายในช่องห้ามตัดคำ — ภาษาไทยไม่มีช่องว่างระหว่างคำ ถ้าให้ตัดจะขึ้นบรรทัดกลางพยางค์
   ("อัพยยศัพท์" กลายเป็น "อัพย / ยศัพท์") จึงบังคับบรรทัดเดียวแล้วย่อองค์ประกอบรอบข้างแทน */
.nb-slot > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

@media (max-width: 520px) {
	.nb-slot { grid-template-columns: 1.3rem minmax(0, 1fr) auto; gap: .4rem; padding: .5rem .5rem; }
	.nb-slot b { font-size: var(--nb-type-meta); }
	.nb-slot > span { font-size: .95rem; }
}
.nb-slot {
	display: grid;
	grid-template-columns: 2rem 1fr auto;
	align-items: center;
	gap: .6rem;
	width: 100%;
	min-height: 52px;
	padding: .5rem .7rem;
	border-radius: 10px;
	border: 1px dashed rgba(203, 213, 225, .32);
	background: rgba(6, 18, 31, .45);
	color: var(--nb-text-dim);
	font: inherit;
	font-size: 1rem;
	text-align: left;
	box-sizing: border-box;
}
button.nb-slot { cursor: pointer; }
button.nb-slot:hover { border-color: rgba(217, 164, 65, .75); }
.nb-slot-undo { font-size: var(--nb-type-meta); color: var(--nb-bronze); opacity: .85; }
.nb-slot b { color: var(--nb-text-dim); font-weight: 600; font-size: .9rem; }
.nb-slot.is-next { border-color: var(--nb-air); border-style: solid; color: var(--nb-air); animation: nb-ring 1.6s ease-out infinite; }
.nb-slot.is-filled {
	border-style: solid;
	border-color: rgba(217, 164, 65, .55);
	background: rgba(217, 164, 65, .12);
	color: var(--nb-bronze-lit);
	font-weight: 700;
}
.nb-slot.is-filled b { color: var(--nb-bronze); }

.nb-tile-bank { display: grid; gap: .4rem; }
.nb-tile-instruction {
	margin: 0;
	color: var(--nb-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
}
.nb-tiles { display: flex; flex-wrap: wrap; gap: .45rem; }
.nb-tile {
	font: inherit;
	min-height: 44px;
	padding: .5rem .9rem;
	border-radius: 10px;
	border: 1px solid var(--nb-line);
	background: rgba(16, 38, 60, .85);
	color: var(--nb-text);
	cursor: pointer;
	transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.nb-tile:hover { transform: translateY(-2px); border-color: rgba(217, 164, 65, .6); }
.nb-tile.is-used { opacity: .28; pointer-events: none; }
.nb-tile.is-wrong { animation: nb-shake .34s ease 1; border-color: var(--nb-bad); color: var(--nb-bad); }

/* ------------------------------------------------------------ จารึกเลือนหาย */

.nb-inscription {
	padding: 1.1rem 1.1rem 1.2rem;
	border-radius: var(--nb-radius);
	background:
		linear-gradient(160deg, rgba(37, 63, 92, .95), rgba(10, 24, 40, .96));
	border: 1px solid var(--nb-line);
	box-shadow: inset 0 1px 0 rgba(246, 208, 137, .2), var(--nb-shadow);
}
.nb-inscription-head {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: .7rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid rgba(217, 164, 65, .22);
}
.nb-inscription-head small { color: var(--nb-text-dim); font-size: var(--nb-type-meta); }
.nb-inscription-head strong {
	color: var(--nb-text);
	font-size: clamp(1.125rem, 3.8vw, 1.25rem);
	line-height: 1.7;
}
.nb-round-pips { display: inline-flex; gap: .25rem; }
.nb-round-pips span {
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: rgba(203, 213, 225, .25);
}
.nb-round-pips span.is-on { background: var(--nb-bronze); }

.nb-text {
	font-size: clamp(1.06rem, 4.1vw, 1.28rem);
	line-height: 2.5;
	color: var(--nb-text);
	word-break: break-word;
}
.nb-cloze-text { line-height: 2.15; }
.nb-text-line { display: block; text-wrap: pretty; }
.nb-text-line + .nb-text-line { margin-top: .3rem; }
.nb-word-space { white-space: pre; }
.nb-study-lines { display: grid; gap: .3rem; line-height: 2.1; }
.nb-study-lines p { margin: 0; }
.nb-blank {
	display: inline-block;
	min-width: 3.4rem;
	max-width: 100%;
	min-height: 2rem;
	margin: 0;
	padding: 0 .5rem;
	border-radius: 8px;
	border: 1px dashed rgba(203, 213, 225, .45);
	background: rgba(6, 18, 31, .55);
	color: transparent;
	font: inherit;
	cursor: pointer;
	vertical-align: middle;
	line-height: 1.9;
	white-space: normal;
	overflow-wrap: anywhere;
}
.nb-blank.is-target { border-color: var(--nb-air); border-style: solid; box-shadow: 0 0 0 2px rgba(125, 211, 252, .3); }
.nb-blank.is-filled {
	border-style: solid;
	border-color: rgba(217, 164, 65, .6);
	background: rgba(217, 164, 65, .14);
	color: var(--nb-bronze-lit);
	font-weight: 700;
}
.nb-blank.is-wrong { animation: nb-shake .34s ease 1; border-color: var(--nb-bad); color: var(--nb-bad); }

/* รอบท่องเอง — เปิดเฉลยทีละวรรค */
.nb-recital { display: grid; gap: .5rem; }
.nb-chunk {
	font: inherit;
	text-align: left;
	min-height: 48px;
	padding: .6rem .85rem;
	border-radius: 10px;
	border: 1px dashed rgba(203, 213, 225, .35);
	background: rgba(6, 18, 31, .5);
	color: var(--nb-text-dim);
	cursor: pointer;
	font-size: clamp(1rem, 3.9vw, 1.18rem);
	line-height: 1.9;
}
.nb-chunk:hover { border-color: rgba(217, 164, 65, .55); }
.nb-chunk.is-open {
	border-style: solid;
	border-color: rgba(217, 164, 65, .5);
	background: rgba(217, 164, 65, .1);
	color: var(--nb-text);
	cursor: default;
}
.nb-chunk-hint { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--nb-type-meta); }

/* ------------------------------------------------------------- ข้อสอบสนามหลวง */

.nb-exam-card {
	padding: 1rem;
	border-radius: var(--nb-radius);
	background: rgba(16, 38, 60, .78);
	border: 1px solid var(--nb-line);
	display: grid;
	gap: .7rem;
}
.nb-exam-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.nb-chip {
	font-size: var(--nb-type-meta);
	padding: .18rem .6rem;
	border-radius: 999px;
	border: 1px solid var(--nb-line);
	color: var(--nb-text-soft);
	white-space: nowrap;
}
.nb-chip.is-ok { border-color: rgba(110, 231, 183, .45); color: var(--nb-good); }
.nb-chip.is-near { border-color: rgba(246, 208, 137, .5); color: var(--nb-bronze-lit); }
.nb-chip.is-no { border-color: rgba(252, 165, 165, .45); color: var(--nb-bad); }
.nb-exam-q { margin: 0; font-size: clamp(1.02rem, 4vw, 1.16rem); line-height: 1.95; white-space: pre-wrap; }
.nb-exam-card textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 6.5rem;
	padding: .7rem .8rem;
	border-radius: 10px;
	border: 1px solid var(--nb-line);
	background: rgba(6, 18, 31, .6);
	color: var(--nb-text);
	font: inherit;
	line-height: 1.85;
	resize: vertical;
}
.nb-exam-card textarea:focus { outline: 2px solid var(--nb-air); outline-offset: 1px; }
.nb-answer {
	padding: .8rem .9rem;
	border-radius: 10px;
	border: 1px solid rgba(217, 164, 65, .4);
	background: rgba(217, 164, 65, .1);
	display: grid;
	gap: .3rem;
}
.nb-answer small { color: var(--nb-bronze); font-size: var(--nb-type-meta); }
.nb-answer p { margin: 0; line-height: 1.95; white-space: pre-wrap; }
.nb-rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.nb-rate button { min-height: 48px; font-size: .95rem; }

/* -------------------------------------------------------------- คลังบัตร ๔๑ */

.nb-card-group { display: grid; gap: .5rem; }
.nb-card-group + .nb-card-group { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--nb-line); }
.nb-card-group h3 {
	margin: .4rem 0 0;
	font-size: 1.04rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
}
.nb-card-group h3 b { font-size: .875rem; font-weight: 600; color: var(--nb-bronze); }
.nb-card-group > p { margin: 0; color: var(--nb-text-soft); font-size: .88rem; line-height: 1.7; }
.nb-card-subgroup { display: grid; gap: .4rem; }
.nb-card-subgroup + .nb-card-subgroup { margin-top: .4rem; }
.nb-card-subgroup h4 { margin: 0; font-size: 1rem; color: var(--nb-bronze-lit); }
.nb-card-sections.is-sara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.nb-card-sections.is-sara .nb-card-subgroup + .nb-card-subgroup { margin-top: 0; }
.nb-card-sections.is-sara .nb-card-subgroup h4 { font-size: 1.55rem; line-height: 1.35; }
.nb-card-sections.is-sara .nb-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nb-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.nb-card-group.is-vagga .nb-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nb-card-group.is-vagga .nb-card { min-width: 0; padding-inline: .25rem; }
.nb-card-group.is-vagga .nb-card-kind { display: none; }
.nb-card-group.is-avagga .nb-card-grid { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.nb-card {
	position: relative;
	padding: .7rem .55rem .6rem;
	border-radius: 12px;
	border: 1px solid var(--nb-line);
	background: linear-gradient(165deg, rgba(30, 54, 80, .9), rgba(9, 22, 38, .95));
	display: grid;
	gap: .4rem;
	justify-items: center;
}
.nb-card.is-full { border-color: rgba(217, 164, 65, .65); box-shadow: 0 0 0 1px rgba(217, 164, 65, .25) inset; }
.nb-card-letter { font-size: 2.55rem; font-weight: 700; color: var(--nb-bronze-lit); line-height: 1.15; }
.nb-card-kind { font-size: .875rem; color: var(--nb-text-dim); }
.nb-card-lights { display: flex; flex-wrap: wrap; gap: .22rem; justify-content: center; }
.nb-card-lights span {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: rgba(203, 213, 225, .22);
}
.nb-card-lights span.is-on { background: var(--nb-bronze); box-shadow: 0 0 6px rgba(217, 164, 65, .8); }
.nb-card-count { font-size: .875rem; color: var(--nb-text-dim); }

.nb-knowledge-group {
	display: grid;
	gap: .65rem;
	margin-top: 1.4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--nb-line);
}
.nb-knowledge-group h3 { margin: 0; color: var(--nb-cream); font-size: 1.5rem; line-height: 1.35; }
.nb-knowledge-group > p { margin: 0; max-width: 68ch; color: var(--nb-text-soft); font-size: 1rem; line-height: 1.7; }
.nb-knowledge-grid { display: grid; gap: .7rem; }
.nb-knowledge-grid.is-base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-knowledge-grid.is-karana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-knowledge-card {
	display: grid;
	gap: .65rem;
	min-width: 0;
	padding: .9rem 1rem;
	border: 1px solid var(--nb-line);
	border-radius: 14px;
	background: rgba(9, 27, 45, .78);
}
.nb-knowledge-card > strong { color: var(--nb-gold-pale); font-size: 2rem; line-height: 1.25; }
.nb-knowledge-card dl { display: grid; gap: .55rem; margin: 0; }
.nb-knowledge-card dl > div { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .65rem; align-items: baseline; }
.nb-knowledge-card dt { color: var(--nb-text-dim); font-size: .875rem; font-weight: 700; line-height: 1.6; }
.nb-knowledge-card dd { min-width: 0; margin: 0; color: var(--nb-text); font-size: 1.45rem; line-height: 1.5; overflow-wrap: anywhere; }
.nb-knowledge-card.is-karana > span { color: var(--nb-text); font-size: 1.125rem; font-weight: 700; line-height: 1.6; }
.nb-knowledge-card.is-karana > small { color: var(--nb-text-soft); font-size: .875rem; line-height: 1.6; }

@media (max-width: 700px) {
	.nb-card-sections.is-sara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nb-knowledge-grid.is-base,
	.nb-knowledge-grid.is-karana { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
	.nb-card-sections.is-sara { grid-template-columns: 1fr; }
}

.nb-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .875rem; color: var(--nb-text-soft); }
.nb-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.nb-legend i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--nb-bronze); }

.nb-progress-bar { height: 8px; border-radius: 999px; background: rgba(203, 213, 225, .18); overflow: hidden; }
.nb-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--nb-bronze), var(--nb-bronze-lit)); }

/* ------------------------------------------------------------------ จบองก์ */

.nb-done {
	display: grid;
	gap: .9rem;
	padding: 1.2rem;
	border-radius: var(--nb-radius);
	background: linear-gradient(160deg, rgba(37, 63, 92, .92), rgba(10, 24, 40, .95));
	border: 1px solid rgba(217, 164, 65, .45);
	text-align: center;
	justify-items: center;
}
.nb-done h2 { margin: 0; font-size: 1.35rem; color: var(--nb-bronze-lit); }
.nb-done p { margin: 0; color: var(--nb-text-soft); line-height: 1.75; max-width: 44ch; }
.nb-done .nb-stars { font-size: 1.35rem; gap: .35rem; }
.nb-done-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

.nb-sync {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--nb-type-meta);
	color: var(--nb-text-dim);
}
.nb-sync.is-saved { color: var(--nb-good); }
.nb-sync.is-error { color: var(--nb-bad); }

.nb-study { display: grid; gap: .8rem; }
.nb-thana-study { display: grid; gap: 1rem; }
.nb-study-explainer,
.nb-study-section {
	padding: 1rem 1.1rem;
	border: 1px solid var(--nb-line);
	border-radius: var(--nb-radius);
	background: rgba(16, 38, 60, .78);
}
.nb-study-explainer h2,
.nb-study-section h2 { margin: 0 0 .45rem; color: var(--nb-cream); font-size: 1.5rem; line-height: 1.35; }
.nb-study-explainer p,
.nb-study-section > p { margin: .35rem 0 0; color: var(--nb-text-soft); font-size: 1rem; line-height: 1.75; }
.nb-study-explainer p strong { color: var(--nb-bronze-lit); }
.nb-thana-study-figure {
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--nb-line);
	border-radius: var(--nb-radius);
	background: #fff;
}
.nb-thana-study-map { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #fff; }
.nb-thana-study-figure figcaption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem 1rem;
	background: var(--nb-panel);
	color: var(--nb-text-soft);
	font-size: 1rem;
	line-height: 1.7;
}
.nb-thana-study-figure figcaption .nb-btn { flex: 0 0 auto; }
.nb-karana-study-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .8rem; }
.nb-karana-study-card {
	display: grid;
	gap: .15rem;
	padding: .8rem .9rem;
	border: 1px solid rgba(217, 164, 65, .34);
	border-radius: 14px;
	background: rgba(7, 22, 37, .56);
}
.nb-karana-study-card strong { color: var(--nb-gold-pale); font-size: 2.5rem; line-height: 1.2; }
.nb-karana-study-card span { color: var(--nb-text); font-size: 1.1rem; font-weight: 700; line-height: 1.6; }
.nb-karana-study-card small { color: var(--nb-text-soft); font-size: .875rem; line-height: 1.6; }
.nb-thana-study-table { overflow: hidden; margin-top: .8rem; border: 1px solid rgba(217, 164, 65, .32); border-radius: 14px; }
.nb-thana-study-head,
.nb-thana-study-row { display: grid; grid-template-columns: .8fr 1.15fr 1.35fr 1.6fr; }
.nb-thana-study-head { background: rgba(217, 164, 65, .16); color: var(--nb-gold-pale); }
.nb-thana-study-head > * { padding: .65rem .75rem; font-size: .875rem; line-height: 1.6; }
.nb-thana-study-row { border-top: 1px solid rgba(148, 163, 184, .18); background: rgba(7, 22, 37, .48); }
.nb-thana-study-row > div { min-width: 0; padding: .75rem; border-right: 1px solid rgba(148, 163, 184, .18); }
.nb-thana-study-row > div:last-child { border-right: 0; }
.nb-thana-study-row small { display: none; color: var(--nb-text-dim); font-size: .875rem; line-height: 1.6; }
.nb-thana-study-row strong,
.nb-thana-study-row span { display: block; color: var(--nb-text); font-size: 1.55rem; line-height: 1.45; overflow-wrap: anywhere; }
.nb-thana-study-row strong { color: var(--nb-gold-pale); font-size: 1.85rem; }
.nb-thana-study-row .nb-thana-study-letters { font-size: 1.8rem; }
.nb-study-note {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin-top: .8rem;
	padding: .8rem .9rem;
	border: 1px solid rgba(125, 211, 252, .35);
	border-radius: 14px;
	background: rgba(125, 211, 252, .09);
	color: var(--nb-text-soft);
}
.nb-study-note i { margin-top: .25rem; color: var(--nb-air); }
.nb-study-note p { margin: 0; font-size: 1rem; line-height: 1.75; }
.nb-study-note strong { color: var(--nb-text); }
.nb-study-sequence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.nb-study-sequence li { display: flex; align-items: center; gap: .55rem; min-height: 64px; padding: .65rem .75rem; border: 1px solid var(--nb-line); border-radius: 14px; background: var(--nb-panel); }
.nb-study-sequence b { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--nb-bronze); color: var(--nb-ink); }
.nb-study-sequence span { color: var(--nb-text); font-size: 1rem; font-weight: 700; line-height: 1.6; }
.nb-study-table { width: 100%; border-collapse: collapse; font-size: var(--nb-type-body); }
.nb-study-table th, .nb-study-table td { padding: .65rem .7rem; border-bottom: 1px solid rgba(203, 213, 225, .16); text-align: left; line-height: 1.6; }
.nb-study-table th { color: var(--nb-text-soft); font-weight: 700; font-size: var(--nb-type-meta); }
.nb-study-table td b { color: var(--nb-bronze-lit); }

@media (max-width: 720px) {
	.nb-thana-study-figure figcaption { align-items: stretch; flex-direction: column; }
	.nb-thana-study-figure figcaption .nb-btn { justify-content: center; }
	.nb-karana-study-grid { grid-template-columns: 1fr; }
	.nb-thana-study-head { display: none; }
	.nb-thana-study-row { grid-template-columns: 1fr; padding: .25rem 0; }
	.nb-thana-study-row > div { display: grid; grid-template-columns: 5.25rem 1fr; gap: .65rem; align-items: baseline; padding: .5rem .75rem; border-right: 0; }
	.nb-thana-study-row small { display: block; }
	.nb-study-sequence { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
	.nb-study-sequence { grid-template-columns: 1fr; }
}
.nb-scroll-x { overflow-x: auto; }

/* ------------------------------------------------------------------ จอใหญ่ */

@media (min-width: 760px) {
	:root { --nb-gutter: 1.5rem; }
	.nb-floor { grid-template-columns: 3.6rem 1fr auto; padding: 1rem 1.1rem; }
	.nb-rate { grid-template-columns: repeat(3, minmax(0, 14rem)); justify-content: center; }
	.nb-steps { width: min(100%, var(--nb-col)); margin: 0 auto; padding: .6rem var(--nb-gutter) 0; box-sizing: border-box; }
	.nb-topbar { padding: .6rem max(var(--nb-gutter), calc((100% - var(--nb-col)) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
	.nb-rise, .nb-bell.is-hung .nb-bell-body, .nb-bell.is-wrong .nb-bell-body,
	.nb-blank.is-wrong, .nb-tile.is-wrong,
	.nb-hook.is-next .nb-hook-slot, .nb-slot.is-next,
	.nb-bell.is-ringing { animation: none !important; }
	.nb-floor:hover, .nb-tile:hover, .nb-shelf a:hover { transform: none; }
	* { transition-duration: .01ms !important; }
}

/* ---------------------------------------------- กลไกองก์ ๓-๗ (คิวทีละใบ) */

.nb-thana-map-frame {
	overflow: hidden;
	border-radius: var(--nb-radius);
	border: 1px solid var(--nb-line);
	background: #fff;
	box-shadow: var(--nb-shadow);
}
.nb-thana-map-object {
	display: block;
	width: 100%;
	aspect-ratio: 884 / 590;
	border: 0;
	background: #fff;
}
.nb-thana-map-question {
	display: grid;
	gap: .65rem;
	padding: .85rem;
	border-radius: var(--nb-radius);
	border: 1px solid var(--nb-line);
	background: var(--nb-panel);
}
.nb-thana-map-question h3 { margin: 0; text-align: center; font-size: 1.125rem; line-height: 1.6; }
.nb-thana-map-pips { display: flex; justify-content: center; gap: .4rem; }
.nb-thana-map-pips span { width: 2rem; height: .3rem; border-radius: 999px; background: rgba(203, 213, 225, .22); }
.nb-thana-map-pips span.is-on { background: var(--nb-bronze); }
.nb-thana-map-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.nb-thana-map-options .nb-bin { min-height: 64px; }
.nb-thana-map-options .nb-bin strong { font-size: 1.5rem; line-height: 1.45; }
.nb-thana-recall-card { gap: .35rem; }
.nb-thana-recall-card > small { color: var(--nb-muted); font-size: .875rem; }
.nb-thana-recall-card > strong { color: var(--nb-cream); font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.35; text-align: center; }
.nb-thana-recall-card > strong.nb-pali { max-width: 100%; font-size: 4rem; line-height: 1.15; overflow-wrap: anywhere; }
.nb-thana-order-board { overflow: hidden; margin-bottom: .9rem; border: 1px solid rgba(217, 164, 65, .35); border-radius: 16px; background: rgba(7, 22, 37, .55); }
.nb-thana-order-head,
.nb-thana-order-slot { display: grid; grid-template-columns: minmax(76px, .7fr) 1fr 1.35fr; align-items: stretch; }
.nb-thana-order-head { background: rgba(217, 164, 65, .14); color: var(--nb-gold-pale); }
.nb-thana-order-head > *,
.nb-thana-order-slot > * { padding: .8rem .9rem; border-right: 1px solid rgba(148, 163, 184, .2); line-height: 1.6; }
.nb-thana-order-head > * { font-size: var(--nb-type-table-label); }
.nb-thana-order-slot > b,
.nb-thana-order-slot > span { font-size: var(--nb-type-table-data); }
.nb-thana-order-slot > span.nb-pali { font-size: var(--nb-type-pali-data); line-height: 1.4; }
.nb-thana-order-head > *:last-child,
.nb-thana-order-slot > *:last-child { border-right: 0; }
.nb-thana-order-slot { min-height: 72px; border-top: 1px solid rgba(148, 163, 184, .18); color: var(--nb-muted); }
.nb-thana-order-slot.is-next { box-shadow: inset 4px 0 var(--nb-bronze); }
.nb-thana-order-slot.is-filled { color: var(--nb-cream); background: rgba(16, 185, 129, .08); }
.nb-thana-order-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.nb-thana-order-options .nb-bin { min-height: 72px; }
.nb-thana-order-options .nb-bin strong { font-size: 1.25rem; }
.nb-thana-order-options .nb-bin small { font-size: .95rem; line-height: 1.6; }
.nb-thana-letter-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .35rem 1rem; margin-bottom: .75rem; text-align: center; }
.nb-thana-letter-head strong { color: var(--nb-gold-pale); font-size: clamp(1.7rem, 4vw, 2.35rem); }
.nb-thana-letter-head span { color: var(--nb-text); font-size: 1.75rem; font-weight: 600; line-height: 1.45; }
.nb-thana-letter-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; padding: 1rem; border: 1px solid rgba(217, 164, 65, .35); border-radius: 16px; background: rgba(7, 22, 37, .58); }
.nb-thana-letter-group { display: flex; gap: .3rem; padding-right: .65rem; border-right: 2px solid rgba(217, 164, 65, .3); }
.nb-thana-letter-group:last-child { padding-right: 0; border-right: 0; }
.nb-thana-letter-cell { display: grid; width: 44px; min-height: 48px; place-items: center; border: 1px dashed rgba(148, 163, 184, .55); border-radius: 10px; color: var(--nb-muted); font-family: var(--nb-font-pali); font-size: 1.65rem; }
.nb-thana-letter-cell.is-filled { border-style: solid; border-color: rgba(16, 185, 129, .55); color: var(--nb-cream); background: rgba(16, 185, 129, .1); }
.nb-thana-letter-pile { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .8rem; }
.nb-thana-letter-pile .nb-bell { width: 58px; min-width: 58px; }
.nb-thana-letter-pile .nb-bell-body { font-size: 2rem; }
.nb-master-table { overflow: hidden; margin-bottom: 1rem; border: 1px solid rgba(217, 164, 65, .35); border-radius: 16px; background: rgba(7, 22, 37, .58); }
.nb-master-head,
.nb-master-row { display: grid; grid-template-columns: .65fr 1fr 1.45fr 1.6fr; align-items: center; }
.nb-master-head { color: var(--nb-gold-pale); background: rgba(217, 164, 65, .14); }
.nb-master-head > *,
.nb-master-row > * { min-width: 0; padding: .75rem .8rem; border-right: 1px solid rgba(148, 163, 184, .18); line-height: 1.6; }
.nb-master-head > * { font-size: var(--nb-type-body); }
.nb-master-row > b { font-size: var(--nb-type-table-label); }
.nb-master-row > .nb-pali { font-size: var(--nb-type-pali-data); line-height: 1.45; }
.nb-master-head > *:last-child,
.nb-master-row > *:last-child { border-right: 0; }
.nb-master-row { min-height: 64px; border-top: 1px solid rgba(148, 163, 184, .16); color: var(--nb-muted); }
.nb-master-row.is-filled { color: var(--nb-cream); background: rgba(16, 185, 129, .08); }
.nb-thana-meta-question { margin-bottom: .8rem; }
.nb-thana-meta-question h3 { margin: 0 0 .55rem; text-align: center; font-size: 1.125rem; line-height: 1.6; }
@media (max-width: 620px) {
	.nb-thana-map-options,
	.nb-thana-order-options { grid-template-columns: 1fr; }
	.nb-thana-order-head,
	.nb-thana-order-slot { grid-template-columns: 72px 1fr; }
	.nb-thana-order-head > *:last-child,
	.nb-thana-order-slot > *:last-child { grid-column: 2; border-top: 1px dashed rgba(148, 163, 184, .18); }
	.nb-thana-letter-cell { width: 38px; min-height: 44px; }
	.nb-master-table { overflow-x: auto; }
	.nb-master-head,
	.nb-master-row { min-width: 680px; }
}

.nb-queue-count {
	margin: 0;
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .875rem;
	color: var(--nb-text-dim);
}
.nb-queue-count .nb-progress-bar { flex: 1; }

/* การ์ดกลางเวที — ระฆังใบที่กำลังตัดสิน */
.nb-stage-card {
	display: grid;
	justify-items: center;
	gap: .6rem;
	padding: 1.1rem 1rem;
	border-radius: var(--nb-radius);
	background: linear-gradient(160deg, rgba(37, 63, 92, .9), rgba(10, 24, 40, .95));
	border: 1px solid var(--nb-line);
	box-shadow: inset 0 1px 0 rgba(246, 208, 137, .16);
}
.nb-bell.is-lg { width: 5.2rem; height: 6rem; }
.nb-bell.is-lg .nb-bell-body { height: 5.1rem; font-size: 2.9rem; }
.nb-bell.is-ringing {
	transform-origin: 50% 4%;
	animation: nb-bell-swing .38s cubic-bezier(.22, 1, .36, 1) both;
}
.nb-stage-ask { margin: 0; text-align: center; color: var(--nb-text-soft); font-size: .96rem; line-height: 1.7; }
.nb-stage-ask > strong { color: var(--nb-text); font-size: 1.125rem; }
.nb-stage-ask b { display: block; margin-top: .25rem; color: var(--nb-bronze-lit); }
.nb-syllable { margin: 0; font-size: clamp(2.5rem, 10vw, 3.4rem); font-weight: 700; letter-spacing: .02em; }
.nb-syllable,
.nb-card-letter,
.nb-grid-cell,
.nb-grid.is-panel td,
.nb-pali { font-family: var(--nb-font-pali); }
.nb-syllable b { color: var(--nb-bronze-lit); }
.nb-syllable .nb-dim { color: var(--nb-text-dim); font-weight: 500; }

/* ถังปลายทาง */
.nb-bin-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .5rem; }
.nb-matra-options { width: min(100%, 28rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-matra-options .nb-bin { min-height: 64px; place-items: center; text-align: center; }
.nb-matra-options .nb-bin strong { font-size: 1.125rem; }
.nb-matra-options .nb-bin:disabled { cursor: default; opacity: .72; }
.nb-bin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .5rem; }
.nb-bin {
	font: inherit;
	display: grid;
	gap: .15rem;
	min-height: 60px;
	padding: .65rem .8rem;
	border-radius: 12px;
	border: 1px solid var(--nb-line);
	background: rgba(16, 38, 60, .85);
	color: var(--nb-text);
	cursor: pointer;
	text-align: left;
	transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.nb-bin.nb-pali,
.nb-bin.nb-pali strong,
.nb-bin.nb-pali small,
.nb-bin.nb-pali span,
.nb-bin.nb-pali b,
.nb-bin.nb-pali em { font-family: var(--nb-font-pali); }
.nb-bin.nb-pali strong,
.nb-bin > strong.nb-pali { font-size: 2rem; line-height: 1.3; }
.nb-bin > small.nb-pali { font-size: 1.65rem; line-height: 1.4; }
.nb-thana-map-options .nb-bin.nb-pali strong { font-size: 2.25rem; line-height: 1.25; }
.nb-bin:hover { transform: translateY(-2px); border-color: rgba(217, 164, 65, .6); }
.nb-bin strong { font-size: .98rem; line-height: 1.45; }
.nb-bin small { color: var(--nb-text-dim); font-size: var(--nb-type-meta); line-height: 1.6; }
.nb-bin.is-picked { border-color: var(--nb-air); background: rgba(125, 211, 252, .14); }

/* ตารางสะสมฐาน ๖ — หัวแถวคือคำตอบ ส่วนช่องด้านขวาค่อย ๆ รับอักขระที่ตอบถูก */
.nb-thana-sort-board {
	display: grid;
	gap: .45rem;
	min-width: 46rem;
}
.nb-thana-sort-row {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: .5rem;
	align-items: stretch;
}
.nb-thana-sort-bin {
	font: inherit;
	position: sticky;
	left: 0;
	z-index: 1;
	display: grid;
	align-content: center;
	gap: .1rem;
	min-height: 88px;
	padding: .6rem .75rem;
	border: 2px solid rgba(217, 164, 65, .68);
	border-radius: 12px;
	background: linear-gradient(155deg, rgba(39, 70, 101, .98), rgba(16, 38, 60, .98));
	color: var(--nb-text);
	text-align: left;
	cursor: pointer;
	box-shadow: 0 5px 0 rgba(91, 58, 30, .72), 0 12px 22px -16px rgba(2, 8, 18, .95), inset 0 1px 0 rgba(246, 208, 137, .2);
	transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.nb-thana-sort-bin:hover {
	transform: translateY(-2px);
	border-color: var(--nb-bronze-lit);
	background: linear-gradient(155deg, rgba(51, 86, 120, .98), rgba(20, 47, 72, .98));
	box-shadow: 0 7px 0 rgba(91, 58, 30, .76), 0 16px 26px -17px rgba(217, 164, 65, .7), inset 0 1px 0 rgba(246, 208, 137, .3);
}
.nb-thana-sort-bin:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(91, 58, 30, .82), inset 0 1px 4px rgba(2, 8, 18, .3); }
.nb-thana-sort-bin:disabled { cursor: default; opacity: .72; transform: none; }
.nb-thana-sort-bin strong { color: var(--nb-gold-pale); font-size: 1.65rem; line-height: 1.25; }
.nb-thana-sort-bin small { color: var(--nb-text-soft); font-size: 1.35rem; line-height: 1.3; }
.nb-thana-sort-cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .2rem;
	color: var(--nb-bronze-lit);
	font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.5;
}
.nb-thana-sort-slots {
	display: grid;
	grid-template-columns: repeat(7, minmax(3rem, 1fr));
	gap: .4rem;
	align-items: stretch;
}
.nb-thana-sort-slot {
	display: grid;
	place-items: center;
	min-height: 64px;
	border: 1px dashed rgba(148, 163, 184, .5);
	border-radius: 11px;
	background: rgba(6, 18, 31, .48);
	color: transparent;
	font-size: 2.15rem;
	font-weight: 700;
	line-height: 1;
}
.nb-thana-sort-slot.is-filled {
	border-style: solid;
	border-color: rgba(217, 164, 65, .75);
	background: linear-gradient(160deg, rgba(217, 164, 65, .26), rgba(138, 100, 16, .14));
	color: var(--nb-gold-pale);
	box-shadow: inset 0 0 0 1px rgba(246, 208, 137, .12);
}
.nb-thana-sort-slot.is-now { animation: nb-ring .4s ease-out; }
.nb-thana-sort-note { margin: .6rem 0 0; color: var(--nb-text-soft); font-size: 1rem; line-height: 1.7; }

/* แผงตาราง ๕×๕ — ใบเดียวตอบได้ทั้งวรรค ตำแหน่ง โฆสะ สิถิล-ธนิต และฐาน */
.nb-grid { border-collapse: separate; border-spacing: .28rem; width: 100%; }
.nb-grid th {
	font-size: var(--nb-type-meta);
	font-weight: 600;
	color: var(--nb-text-dim);
	padding: .2rem .35rem;
	white-space: nowrap;
}
.nb-grid td { padding: 0; }
.nb-grid-cell {
	font: inherit;
	width: 100%;
	min-width: 2.6rem;
	min-height: 46px;
	border-radius: 10px;
	border: 1px dashed rgba(203, 213, 225, .3);
	background: rgba(6, 18, 31, .5);
	color: var(--nb-text-dim);
	font-size: var(--nb-type-pali-data);
	cursor: pointer;
}
.nb-grid-cell.is-open { border-color: rgba(125, 211, 252, .55); color: var(--nb-air); }
.nb-grid-cell.is-filled {
	border-style: solid;
	border-color: rgba(217, 164, 65, .6);
	background: rgba(217, 164, 65, .14);
	color: var(--nb-bronze-lit);
	font-weight: 700;
	cursor: default;
}
.nb-grid.is-panel td {
	text-align: center;
	min-width: 2.2rem;
	padding: .3rem .2rem;
	border-radius: 8px;
	font-size: 1.55rem;
	color: var(--nb-text-dim);
	background: rgba(6, 18, 31, .4);
}
.nb-grid.is-panel td.is-hot, .nb-grid.is-panel th.is-hot { color: var(--nb-bronze-lit); background: rgba(217, 164, 65, .16); }
.nb-grid.is-panel tr.is-hot th { color: var(--nb-bronze-lit); }
.nb-grid.is-panel td.is-now { outline: 2px solid var(--nb-air); color: var(--nb-text); font-weight: 700; }

/* ขานชื่อ ๔ ช่อง */
.nb-callout-field {
	display: grid;
	gap: .35rem;
	padding: .6rem .7rem;
	border-radius: 12px;
	border: 1px solid var(--nb-line);
	background: rgba(16, 38, 60, .6);
}
.nb-callout-field.is-done { border-color: rgba(110, 231, 183, .4); background: rgba(110, 231, 183, .08); }
.nb-callout-label { font-size: var(--nb-type-meta); color: var(--nb-text-dim); }
.nb-callout-options { display: flex; flex-wrap: wrap; gap: .35rem; }
.nb-callout-options .nb-tile { font-size: 1rem; padding: .45rem .7rem; }
.nb-callout-options .nb-tile.nb-pali { font-size: 1.75rem; line-height: 1.35; }

/* ป้ายเหตุผล — ถ้อยคำตำราเต็มประโยค */
.nb-reason-list { display: grid; gap: .5rem; }
.nb-reason {
	font: inherit;
	text-align: left;
	min-height: 52px;
	padding: .7rem .9rem;
	border-radius: 12px;
	border: 1px solid var(--nb-line);
	background: rgba(16, 38, 60, .8);
	color: var(--nb-text);
	font-size: .98rem;
	line-height: 1.75;
	cursor: pointer;
}
.nb-reason:hover { border-color: rgba(217, 164, 65, .6); }