:root {
	--nh-ink: #102a3b;
	--nh-deep: #071d2c;
	--nh-sea: #0e5263;
	--nh-teal: #16897f;
	--nh-jade: #4eb9a4;
	--nh-gold: #e9b95c;
	--nh-gold-light: #ffe6a3;
	--nh-paper: #fff8e8;
	--nh-paper-deep: #f0dfbd;
	--nh-coral: #dd795f;
	--nh-white: #fffdf7;
	--nh-shadow: 0 24px 80px rgba(3, 21, 31, .24);
}

* { box-sizing: border-box; }
[v-cloak] { display: none; }
html { min-width: 320px; background: var(--nh-deep); }
body.nh-body { margin: 0; min-width: 320px; background: var(--nh-deep); color: var(--nh-ink); font-family: "Sarabun", system-ui, sans-serif; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.nh-app { min-height: 100vh; font-size: calc(1rem * var(--nh-font-scale, 1)); background: var(--nh-deep); }
.nh-app a { color: inherit; }
.nh-skip { position: fixed; z-index: 1000; left: 1rem; top: -5rem; padding: .75rem 1rem; border-radius: .75rem; background: #fff; color: #071d2c; font-weight: 800; }
.nh-skip:focus { top: 1rem; }
:where(.nh-app button, .nh-app a, .nh-app textarea, .nh-app select):focus-visible { outline: 3px solid #ffd36a; outline-offset: 3px; }
.nh-live { position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.nh-system { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: .8rem; padding: 2rem; text-align: center; color: var(--nh-white); background: radial-gradient(circle at 50% 35%, #165d66, #061b29 70%); }
.nh-system h1, .nh-system p { margin: 0; }
.nh-system p { color: #c6e0dc; }
.nh-system > i { font-size: 3rem; color: #ffb594; }
.nh-compass-loader { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; color: var(--nh-gold); font-size: 3rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); animation: nhCompass 2.2s ease-in-out infinite; }
@keyframes nhCompass { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(18deg); } }

.nh-topbar { position: sticky; top: 0; z-index: 50; height: 70px; display: flex; align-items: center; gap: .7rem; padding: 0 clamp(.75rem, 3vw, 2rem); color: #f8f6e9; background: rgba(5, 27, 39, .94); border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 28px rgba(0,0,0,.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nh-brand { min-width: 0; display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.nh-brand-mark { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #153542; background: linear-gradient(145deg, #ffe8a5, #d89a38); box-shadow: 0 0 0 3px rgba(255,220,137,.14); }
.nh-brand strong, .nh-brand small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-brand strong { font-size: .94rem; color: #fff8dd; }
.nh-brand small { margin-top: .08rem; color: #9fc8c5; font-size: .68rem; }
.nh-icon-button { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #fdf6dd; background: rgba(255,255,255,.07); text-decoration: none; }
.nh-icon-button:hover { background: rgba(255,255,255,.14); }
.nh-topnav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nh-topnav button { position: relative; min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border: 0; border-radius: .75rem; color: #c8deda; background: transparent; font-weight: 700; }
.nh-topnav button:hover, .nh-topnav button.is-active { color: #fff4ce; background: rgba(255,255,255,.1); }
.nh-topnav b { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 .25rem; border-radius: 999px; background: var(--nh-coral); color: #fff; font-size: .62rem; }
.nh-storage-warning { margin: 0; padding: .65rem 1rem; color: #5c3a00; background: #fff1bd; text-align: center; font-size: .85rem; font-weight: 700; }

.nh-scene, .nh-page-scene, .nh-voyage { position: relative; isolation: isolate; background-image: var(--nh-scene); background-size: cover; background-position: center; }
.nh-home { min-height: calc(100vh - 70px); display: flex; align-items: stretch; color: #fff; background-position: right 48%; overflow: hidden; }
.nh-scene-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3,20,30,.96) 0%, rgba(3,20,30,.82) 38%, rgba(3,20,30,.32) 68%, rgba(3,20,30,.08)), linear-gradient(0deg, rgba(3,20,30,.65), transparent 40%); }
.nh-home-copy { width: min(720px, 64%); display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 7vw, 6.5rem) clamp(1.25rem, 6vw, 6rem); animation: nhRise .7s cubic-bezier(.22,.9,.3,1) both; }
@keyframes nhRise { from { opacity: 0; transform: translateY(18px); } }
.nh-kicker { display: inline-flex; align-items: center; gap: .45rem; width: max-content; max-width: 100%; margin-bottom: .7rem; color: var(--nh-gold-light); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nh-home h1 { margin: 0; color: #fffaf0; font-size: clamp(1.9rem, 4.6vw, 4.2rem); line-height: 1.16; letter-spacing: -.04em; text-wrap: balance; text-shadow: 0 3px 30px rgba(0,0,0,.4); }
.nh-home h1 em { color: #ffd776; font-style: normal; }
/* แต่ละวรรคอยู่บรรทัดเดียวเสมอ ไม่ให้ตัดกลางคำว่า "สนามหลวง" หรือ "ผจญภัย" */
.nh-home-line { display: block; white-space: nowrap; }
.nh-home-copy > p { max-width: 630px; margin: 1.2rem 0 0; color: #d7e7e2; font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.8; }
.nh-home-stats { max-width: 620px; display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.7rem 0 1.5rem; border: 1px solid rgba(255,255,255,.16); border-radius: 1rem; background: rgba(2,27,38,.46); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.nh-home-stats div { padding: .85rem 1rem; border-right: 1px solid rgba(255,255,255,.12); }
.nh-home-stats div:last-child { border: 0; }
.nh-home-stats b, .nh-home-stats span { display: block; }
.nh-home-stats b { color: #ffe099; font-size: 1.2rem; }
.nh-home-stats span { color: #b9d2cf; font-size: .7rem; }
.nh-source-note { font-size: .72rem !important; color: #acc9c4 !important; }
.nh-scroll-cue { position: absolute; right: 3vw; bottom: 2rem; display: grid; justify-items: center; gap: .25rem; color: #fff8df; text-shadow: 0 2px 12px #000; font-size: .72rem; }
.nh-scroll-cue i { color: #ffd776; animation: nhBob 1.8s ease-in-out infinite; }
@keyframes nhBob { 50% { transform: translateY(6px); } }

.nh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.nh-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .68rem 1rem; border: 1px solid transparent; border-radius: .8rem; text-decoration: none; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.nh-btn:hover:not(:disabled) { transform: translateY(-2px); }
.nh-btn:disabled { opacity: .45; }
.nh-btn-lg { min-height: 52px; padding: .82rem 1.25rem; }
.nh-btn-primary { color: #102c36; background: linear-gradient(180deg, #ffe39a, #e7b34e); box-shadow: 0 7px 0 #9a6723, 0 14px 28px rgba(0,0,0,.18); }
.nh-btn-primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 #9a6723; }
.nh-btn-glass { color: #fff8df; border-color: rgba(255,255,255,.28); background: rgba(4,35,47,.58); }
.nh-btn-paper { color: #173444; border-color: #cfbd96; background: #fff9e9; box-shadow: 0 4px 0 #c9b78e; }
.nh-btn-ink { color: #fdf7e5; background: #173b49; }

.nh-page-scene { min-height: calc(100vh - 70px); background-attachment: fixed; }
.nh-page-overlay, .nh-voyage-overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(rgba(4,25,36,.72), rgba(4,25,36,.88)); }
.nh-page-wrap { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 0 4rem; }
.nh-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.nh-page-heading h1 { margin: 0; color: var(--nh-ink); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.15; }
.nh-page-heading p { max-width: 680px; margin: .6rem 0 0; color: #466070; line-height: 1.7; }
.nh-heading-light h1 { color: #fff9e7; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.nh-heading-light p { color: #d4e4df; }
.nh-readiness-ring { --value: 0; flex: none; width: 108px; height: 108px; display: grid; place-items: center; align-content: center; border-radius: 50%; color: #fff8e2; background: radial-gradient(circle at center, #123b47 57%, transparent 59%), conic-gradient(#e8bd60 calc(var(--value) * 1%), rgba(255,255,255,.18) 0); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.nh-readiness-ring strong, .nh-readiness-ring small { display: block; text-align: center; }
.nh-readiness-ring strong { font-size: 1.65rem; }
.nh-readiness-ring strong::after { content: "%"; font-size: .65em; }
.nh-readiness-ring small { color: #c6dbd5; font-size: .66rem; }

/* ---------- การ์ดเกาะ: ภาพเต็มใบ ข้อความซ้อนบนภาพ ไม่มีแถบครีม (หลวงพี่สั่ง ๑๕ ส.ค. ๒๕๖๙) ---------- */
.nh-island-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.nh-island-card { position: relative; border-radius: 1.1rem; background: #071d28; box-shadow: 0 12px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.1) inset; overflow: hidden; transition: transform .22s cubic-bezier(.2,.75,.2,1), box-shadow .22s ease; }
.nh-island-card button { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 210px; display: block; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; }
.nh-island-art { position: absolute; inset: 0; background-image: var(--nh-scene); background-position: center; background-size: cover; transition: transform .55s cubic-bezier(.2,.75,.2,1); }
/* ม่านไล่เฉดจากล่างขึ้นบน — ตัวอักษรอ่านชัดโดยยังเห็นฉากเต็มใบ */
.nh-island-scrim { position: absolute; inset: 0; background:
	linear-gradient(0deg, rgba(3,17,25,.96) 0%, rgba(3,17,25,.86) 26%, rgba(3,17,25,.42) 52%, rgba(3,17,25,.06) 76%),
	radial-gradient(120% 80% at 50% 0%, rgba(3,17,25,.42), transparent 60%); }
.nh-island-badge { position: absolute; z-index: 2; top: .7rem; left: .7rem; display: inline-flex; align-items: center; gap: .38rem; padding: .3rem .62rem; border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--tone, #d39b47) 86%, #041823); font-size: .72rem; font-weight: 800; letter-spacing: .2px; box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.22) inset; }
.nh-island-body { position: absolute; z-index: 2; inset: auto 0 0; padding: 0 .95rem .9rem; display: block; }
.nh-island-body strong { display: block; font-size: 1.14rem; line-height: 1.25; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.75); }
.nh-island-body small { display: block; margin-top: .18rem; color: #cfe0e6; font-size: .82rem; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.nh-island-meter { display: block; height: 5px; margin-top: .6rem; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.nh-island-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tone, #d39b47), #ffd98a); box-shadow: 0 0 12px color-mix(in srgb, var(--tone, #d39b47) 70%, transparent); transition: width .4s ease; }
.nh-island-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; }
.nh-island-foot em { font-style: normal; color: #ecd9a8; font-size: .74rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.nh-island-sessions { color: #9fbac4 !important; }
.nh-island-done { position: absolute; z-index: 2; top: .7rem; right: .7rem; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #06251c; background: #6fdca9; font-size: .8rem; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.nh-island-card.is-done { box-shadow: 0 12px 34px rgba(0,0,0,.34), 0 0 0 2px rgba(111,220,169,.55) inset; }
.nh-island-card:hover, .nh-island-card:focus-within { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(0,0,0,.44), 0 0 0 1px color-mix(in srgb, var(--tone, #d39b47) 60%, transparent) inset; }
.nh-island-card:hover .nh-island-art, .nh-island-card:focus-within .nh-island-art { transform: scale(1.07); }
.nh-island-card button:focus-visible { outline: 3px solid #ffd98a; outline-offset: -3px; border-radius: 1.1rem; }
.tone-amber { --tone: #c8842f; }.tone-teal { --tone: #16897f; }.tone-blue { --tone: #2876a6; }.tone-violet { --tone: #7055a5; }.tone-rose { --tone: #bc665b; }.tone-emerald { --tone: #348761; }
.nh-temple-card { --tone: #d9af4e; grid-column: span 3; }
.nh-temple-card button { aspect-ratio: auto; min-height: 150px; height: 150px; }
.nh-temple-card .nh-island-art { background-position: center 42%; }
.nh-temple-card .nh-island-scrim { background: linear-gradient(90deg, rgba(3,17,25,.95) 0%, rgba(3,17,25,.8) 42%, rgba(3,17,25,.28) 72%, rgba(3,17,25,.05) 100%); }
.nh-temple-card .nh-island-body { inset: auto 0 0 0; max-width: 62%; padding: 0 1.1rem 1rem; }
.nh-temple-card .nh-island-body strong { font-size: 1.32rem; }
.nh-atlas-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.nh-atlas-links a, .nh-deep-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .6rem .85rem; border: 1px solid rgba(255,255,255,.18); border-radius: .75rem; color: #fff7d9; background: rgba(4,31,42,.68); text-decoration: none; font-weight: 700; }

.nh-chapter-wrap { display: grid; gap: 1rem; }
.nh-chapter-hero { min-height: 280px; display: flex; align-items: flex-end; gap: 1.3rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(255,255,255,.18); border-radius: 1.5rem; color: #fff; background: linear-gradient(90deg, rgba(3,24,35,.92), rgba(3,24,35,.54)); box-shadow: var(--nh-shadow); }
.nh-chapter-hero h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.6rem); color: #fff7dc; }
.nh-chapter-hero p { max-width: 700px; margin: .55rem 0 0; color: #d5e4df; line-height: 1.75; }
.nh-chapter-icon { flex: none; width: 86px; height: 86px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 1.35rem; color: #ffd978; background: rgba(255,255,255,.08); font-size: 2rem; }
.nh-mission-board { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem; border-radius: 1.2rem; background: rgba(255,249,231,.96); box-shadow: 0 12px 35px rgba(0,0,0,.18); }
.nh-board-copy h2, .nh-board-copy p { margin: 0; }
.nh-board-copy p { margin-top: .35rem; color: #536875; }
.nh-progress-line { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.nh-progress-line > span { width: min(360px, 52vw); height: 8px; border-radius: 99px; background: #ded4bf; overflow: hidden; }
.nh-progress-line i { display: block; height: 100%; border-radius: inherit; background: var(--nh-teal); }
.nh-progress-line b { color: #6a5d42; font-size: .76rem; }
/* กระดานรอบเดินเรือ — เห็นทั้งพื้นที่ว่ามีกี่รอบ รอบไหนปิดแล้ว */
.nh-session-board { padding: 1rem 1.2rem 1.15rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1.1rem; background: rgba(5,35,46,.72); }
.nh-session-board h3 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .75rem; color: #fff9e2; font-size: .96rem; }
.nh-session-board h3 i { color: #ffd775; }
.nh-session-board h3 small { color: #9fbac4; font-size: .74rem; font-weight: 500; }
.nh-session-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.nh-session-chip { position: relative; min-width: 66px; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; padding: .5rem .6rem; border: 2px solid rgba(255,255,255,.18); border-radius: .8rem; color: #e6f1f4; background: rgba(255,255,255,.06); font-weight: 800; }
.nh-session-chip b { font-size: 1.05rem; color: #fff; }
.nh-session-chip span { color: #a9c3cc; font-size: .72rem; font-weight: 700; }
.nh-session-chip:hover { border-color: #ffd775; background: rgba(255,215,117,.12); }
.nh-session-chip.is-part { border-color: rgba(255,215,117,.6); }
.nh-session-chip.is-done { border-color: rgba(111,220,169,.7); background: rgba(111,220,169,.14); }
.nh-session-chip.is-done b, .nh-session-chip.is-done span { color: #b6f0d4; }
.nh-session-chip > i { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #06251c; background: #6fdca9; font-size: .62rem; }

.nh-board-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.nh-chapter-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.nh-chapter-notes > div { display: flex; gap: .8rem; padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; color: #d7e9e5; background: rgba(5,35,46,.72); }
.nh-chapter-notes > div > i { color: #ffd775; font-size: 1.1rem; margin-top: .15rem; }
.nh-chapter-notes b { display: block; color: #fff9e2; margin-bottom: .25rem; }
.nh-deep-link { justify-self: start; }

.nh-voyage { min-height: calc(100vh - 70px); background-position: center; }
/* ม่านบางลงกว่าเดิม — ฉากที่วาดไว้ต้องได้อวด ไม่ใช่ถูกกดจนเป็นพื้นเทา */
.nh-voyage-overlay { background: linear-gradient(180deg, rgba(4,24,35,.62) 0%, rgba(4,24,35,.48) 45%, rgba(4,24,35,.78) 100%); }
.nh-voyage-wrap { width: min(1240px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.1rem, 3vw, 2rem) 0 4rem; }
/* สองคอลัมน์: โต๊ะทำงานซ้าย · เข็มทิศรอบเดินเรือขวา (เดิมขวาว่างเปล่าครึ่งจอ) */
.nh-voyage-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 1rem; }
.nh-voyage-side { display: grid; gap: .8rem; position: sticky; top: 84px; }
.nh-side-card { padding: 1rem 1.05rem; border: 1px solid rgba(255,255,255,.16); border-radius: 1.1rem; color: #dfeaee; background: rgba(5,30,42,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 34px rgba(0,0,0,.28); }
.nh-side-card h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; color: #fff8e2; font-size: .92rem; }
.nh-side-card h3 i { color: #ffd775; }
.nh-side-steps { display: flex; gap: .4rem; margin-bottom: .7rem; }
.nh-side-steps span { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); }
.nh-side-steps span.is-done { background: linear-gradient(90deg, #ffd775, #ffb951); }
.nh-side-steps span.is-current { background: rgba(255,215,117,.5); box-shadow: 0 0 0 2px rgba(255,215,117,.35); }
.nh-side-card dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem .5rem; margin: 0; font-size: .8rem; }
.nh-side-card dt { color: #a9c3cc; }
.nh-side-card dd { margin: 0; color: #fff; font-weight: 800; }
.nh-side-note { margin: 0; color: #b9cdd5; font-size: .78rem; line-height: 1.6; }
.nh-side-note b { color: #ffd775; }
.nh-app a.nh-side-link, .nh-side-link { display: flex; align-items: center; gap: .5rem; min-height: 46px; padding: .6rem .85rem; border: 1px solid rgba(255,215,117,.42); border-radius: .8rem; color: #ffeec0; background: rgba(5,30,42,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-decoration: none; font-weight: 700; font-size: .82rem; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.nh-app a.nh-side-link { color: #ffeec0; }
.nh-side-link i { color: #ffd775; }
.nh-side-link:hover { border-color: #ffd775; background: rgba(37,66,80,.92); }
.nh-voyage-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; color: #fff; }
.nh-voyage-head .nh-kicker { margin-bottom: 0; }
.nh-mission-meter { flex: none; width: 180px; }
.nh-mission-meter span { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; }
.nh-mission-meter i { display: block; height: 100%; background: #f2c960; }
.nh-mission-meter b { display: block; margin-top: .3rem; color: #d5e5df; text-align: right; font-size: .68rem; }
.nh-workbench { position: relative; padding: clamp(1rem, 3vw, 2rem); border: 1px solid rgba(255,255,255,.2); border-radius: 1.4rem; background: rgba(255,249,233,.97); box-shadow: var(--nh-shadow); overflow: hidden; }
.nh-workbench::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--nh-teal), var(--nh-gold), var(--nh-coral)); }
.nh-question-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: .35rem 0 1.25rem; border-bottom: 1px solid #e2d5bc; }
.nh-question-copy { min-width: 0; }
.nh-question-copy h1 { max-width: 36ch; margin: 0; color: #0f2b3a; font-weight: 800; line-height: 1.5; letter-spacing: -.02em; text-wrap: balance; }
.nh-question-task { max-width: 44ch; margin: .45rem 0 0; color: #3c5a68; line-height: 1.6; text-wrap: pretty; }

/* ตัวตั้งเป็นศัพท์เฉพาะ (ศัพท์ · อายตนิบาต · วิภัตติ · นิบาต) — ศัพท์คือของที่ต้องอ่านก่อน
   จึงโตและเข้มที่สุดในการ์ด ส่วนบรรทัดคำสั่งซึ่งซ้ำเกือบทุกข้อเป็นตัวรอง */
.lead-term h1 { font-size: clamp(1.45rem, 2.7vw, 1.95rem); }
.lead-term .nh-term { color: #14515c; font-size: 1.28em; font-weight: 800; letter-spacing: 0; }
.lead-term .nh-question-task { font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600; }

/* ตัวตั้งเป็นเพียงป้ายหมวด (เช่น "สัพพนาม ๓ ศัพท์") คำถามจริงอยู่ที่บรรทัดคำสั่ง จึงสลับกัน */
.lead-task h1 { margin-bottom: .4rem; color: #1f6f6c; font-size: .95rem; font-weight: 800; letter-spacing: 0; }
.lead-task .nh-question-task { color: #0f2b3a; font-size: clamp(1.5rem, 2.9vw, 2.1rem); font-weight: 800; line-height: 1.55; letter-spacing: -.02em; text-wrap: balance; }
/* ตราประจำกลไก — ดวงเดียวพอ ของประดับ ๗ ดวงเดิมกินที่และไม่ได้สื่ออะไร */
.nh-question-mark { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid #d5c39c; border-radius: 50% 50% 45% 45%; color: var(--nh-sea); background: #f7e9c9; font-size: 1.05rem; box-shadow: 0 4px 0 #b79f6e; }
.mechanic-seven-route-chart .nh-question-mark { border-radius: .7rem; }
.mechanic-pronoun-council .nh-question-mark { border-radius: 50% 50% .5rem .5rem; }
.mechanic-double-beacon .nh-question-mark { color: #bc792c; box-shadow: 0 0 22px rgba(235,188,83,.55), 0 4px 0 #b79f6e; }
.nh-mechanic-visual { flex: none; display: flex; justify-content: center; gap: .65rem; margin: 0; color: var(--nh-sea); }
.nh-mechanic-visual span { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid #d5c39c; border-radius: 50% 50% 45% 45%; background: #f7e9c9; box-shadow: 0 4px 0 #b79f6e; }
.mechanic-fleet-rigging .nh-mechanic-visual span { border-radius: 70% 10% 55% 25%; transform: skewY(-6deg); }
.mechanic-seven-route-chart .nh-mechanic-visual span { border-radius: .7rem; }
.mechanic-pronoun-council .nh-mechanic-visual span { border-radius: 50% 50% .5rem .5rem; }
.mechanic-double-beacon .nh-mechanic-visual span { border-radius: 50% 50% .25rem .25rem; color: #bc792c; box-shadow: 0 0 22px rgba(235,188,83,.55), 0 4px 0 #b79f6e; }
.nh-dimension { position: relative; padding: 1.1rem 0; border-top: 1px dashed #d1c2a2; }
.nh-dimension:first-of-type { border-top: 0; }
.nh-dimension > header { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.nh-dimension > header > span { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2d6b72; font-size: .74rem; font-weight: 900; }
.nh-dimension > header h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #17323f; }
.nh-dimension > header > i { margin-left: auto; color: #3c8664; }
.nh-dimension.is-correct { opacity: .8; }
.nh-dimension.is-correct > header > span { background: #397e58; }
.nh-dimension.is-wrong > header > span { background: #b45d4c; }
.nh-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.nh-choices button { position: relative; min-height: 52px; padding: .72rem 2.2rem .72rem .85rem; border: 2px solid #d8ceb9; border-radius: .85rem; color: #183746; background: #fffdf6; text-align: left; line-height: 1.5; font-weight: 700; }
.nh-choices button:hover:not(:disabled) { border-color: #4c908a; background: #f2fbf7; }
.nh-choices button > i { position: absolute; right: .8rem; top: 50%; width: 18px; height: 18px; border: 2px solid #b8ad98; border-radius: 50%; transform: translateY(-50%); }
.nh-choices.is-multi button > i { border-radius: .3rem; }
.nh-choices button.is-picked { border-color: #287b78; background: #e5f5ef; box-shadow: 0 0 0 2px rgba(40,123,120,.12); }
.nh-choices button.is-picked > i { border-color: #287b78; background: #287b78; box-shadow: inset 0 0 0 4px #e5f5ef; }
.nh-choices button.is-answer { border-color: #3f875e; background: #e5f5e8; }
.nh-choices button.is-answer > i { border-color: #3f875e; background: #3f875e; }
.nh-choices button.is-wrong { border-color: #c76251; background: #fff0eb; }
.nh-choices button.is-wrong > i { border-color: #c76251; background: #c76251; }
.nh-hint { display: flex; align-items: flex-start; gap: .5rem; margin: .65rem 0 0; padding: .7rem .8rem; border-left: 4px solid #d37a5b; border-radius: .35rem .75rem .75rem .35rem; color: #754032; background: #fff0e5; font-size: .82rem; }

/* ---------- กลไก: วางเรือลงท่าบนแผนที่ ๗ สาย ---------- */
.nh-route-map { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.nh-route-slot { position: relative; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .25rem; padding: .6rem .3rem .5rem; border: 2px dashed #b7cbd8; border-radius: .8rem; background: linear-gradient(180deg, #eef7fb, #dceaf1); color: #14415a; font-weight: 700; }
.nh-route-slot b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2876a6; font-size: .78rem; }
.nh-route-slot span { font-size: .76rem; line-height: 1.3; text-align: center; }
.nh-route-slot > i { position: absolute; bottom: .35rem; color: transparent; font-size: .9rem; transition: color .2s ease, transform .2s ease; }
.nh-route-slot:hover:not(:disabled) { border-color: #2876a6; background: linear-gradient(180deg, #e3f2fa, #cfe6f1); }
.nh-route-slot.is-picked { border-style: solid; border-color: #2876a6; background: linear-gradient(180deg, #d5ecfa, #b9dcf0); box-shadow: 0 0 0 3px rgba(40,118,166,.16); }
.nh-route-slot.is-picked > i { color: #17536f; transform: translateY(-2px); }
.nh-route-slot.is-answer { border-color: #3f875e; background: linear-gradient(180deg, #ddf3e4, #c2e6ce); }
.nh-route-slot.is-answer > i { color: #2c6a48; }
.nh-route-slot.is-wrong { border-color: #c76251; background: #fdeee9; }

/* ---------- กลไก: จัดขบวนเรือตามลำดับ ---------- */
.nh-convoy-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.nh-convoy-line li { position: relative; min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem; padding: .5rem .4rem; border: 2px dashed #cbbb98; border-radius: .8rem; background: #fffaee; text-align: center; }
.nh-convoy-line li b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #6a5327; background: #f0e2bf; font-size: .72rem; }
.nh-convoy-line li span { font-weight: 800; color: #1d4150; font-size: .95rem; }
.nh-convoy-line li span.is-empty { color: #a99b7f; font-weight: 600; font-size: .74rem; }
.nh-convoy-line li.is-filled { border-style: solid; border-color: #bc665b; background: #fff3ef; }
.nh-convoy-line li.is-wrong { border-color: #c76251; background: #fdeae4; box-shadow: 0 0 0 3px rgba(199,98,81,.14); }
.nh-convoy-dock { display: flex; flex-wrap: wrap; gap: .55rem; }
.nh-convoy-ship { position: relative; min-height: 48px; padding: .6rem 1rem; border: 2px solid #d8ceb9; border-radius: 999px; background: #fffdf6; color: #183746; font-weight: 800; }
.nh-convoy-ship:hover:not(:disabled) { border-color: #bc665b; background: #fff5f1; }
.nh-convoy-ship.is-placed { border-color: #bc665b; background: #f6ded6; color: #7d3a2f; }
.nh-convoy-ship em { position: absolute; top: -8px; right: -6px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 .3rem; border-radius: 999px; color: #fff; background: #bc665b; font-style: normal; font-size: .7rem; font-weight: 900; }
.nh-link-btn { margin-top: .6rem; padding: .35rem .1rem; border: 0; background: none; color: #7a6a52; font-weight: 700; font-size: .78rem; text-decoration: underline; }

/* ---------- กลไก: ส่งผู้แทนเข้าสภา ---------- */
.nh-council-seats { display: grid; gap: .5rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.nh-council-seats li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; align-items: stretch; gap: .5rem; padding: .35rem; border: 2px solid #ddd2bd; border-radius: .85rem; background: #fffdf6; }
.nh-council-seats li.is-focus { border-color: #7055a5; box-shadow: 0 0 0 3px rgba(112,85,165,.16); }
.nh-council-seats li.is-filled { background: #f7f3fd; }
.nh-council-seats li.is-wrong { border-color: #c76251; background: #fdeee9; }
.nh-seat { min-height: 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; padding: .5rem .7rem; border: 0; border-radius: .6rem; background: #f1ecdf; color: #2a2440; text-align: left; }
.nh-seat b { font-size: 1.15rem; }
.nh-seat small { color: #6d6480; font-size: .74rem; }
.nh-council-seats li.is-focus .nh-seat { background: #ece3fb; }
.nh-seat-role { display: flex; align-items: center; padding: .5rem .7rem; border-radius: .6rem; background: #f7f5ee; color: #3c3357; font-weight: 700; font-size: .86rem; }
.nh-seat-role.is-empty { color: #9d9484; font-weight: 500; font-style: italic; }
.nh-council-roles { display: flex; flex-wrap: wrap; gap: .5rem; }
.nh-council-roles button { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: .6rem .95rem; border: 2px solid #cfc2e6; border-radius: .8rem; background: #f8f5ff; color: #3d2f63; font-weight: 800; }
.nh-council-roles button:hover:not(:disabled) { border-color: #7055a5; background: #efe8fb; }

.nh-locked-note { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; padding: .6rem .8rem; border: 1px dashed #c9b78d; border-radius: .7rem; color: #7a6740; background: #fdf6e3; font-size: .8rem; font-weight: 700; }
.nh-locked-note i { color: #c79a3c; }
.nh-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #e2d5bc; }
.nh-submit-row p { margin: 0; color: #60727a; font-size: .78rem; }
.nh-submit-row p i { color: #35837e; }
.nh-cleared { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #9ac9a7; border-radius: 1rem; background: #edf8eb; }
.nh-cleared-mark { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #40885f; font-size: 1.25rem; box-shadow: 0 6px 0 #2f6546; }
.nh-cleared h2, .nh-cleared p { margin: 0; }
.nh-cleared p { color: #4f6a5a; }
.nh-cleared .nh-actions { margin-left: auto; justify-content: flex-end; }

.nh-logbook { margin-top: 1rem; padding: 1.1rem; border: 1px solid #c9ae77; border-radius: 1.2rem; color: #2f2a20; background: repeating-linear-gradient(#fffaf0 0, #fffaf0 31px, #e8dcc5 32px); box-shadow: var(--nh-shadow); }
.nh-logbook > header { display: flex; align-items: center; gap: .7rem; padding-bottom: .8rem; border-bottom: 2px solid #dbc79c; }
.nh-logbook > header > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: .7rem; color: #fff7da; background: #684737; }
.nh-logbook h2, .nh-logbook p { margin: 0; }
.nh-logbook > header p { margin-top: .15rem; color: #746453; font-size: .78rem; }
.nh-logbook > header > button { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; }
.nh-logbook label { display: block; margin: 1rem 0; }
.nh-logbook label > span { display: block; margin-bottom: .35rem; font-weight: 800; }
.nh-logbook textarea, .nh-exam-part textarea { width: 100%; min-height: 120px; resize: vertical; padding: .8rem; border: 2px solid #c8b892; border-radius: .65rem; color: #263c43; background: rgba(255,255,255,.76); line-height: 1.75; }
.nh-model-answer { padding: .8rem 1rem; border: 1px solid #cfbd93; border-radius: .8rem; background: #fff3d7; }
.nh-model-answer p { margin-top: .35rem; line-height: 1.75; }
.nh-rubric > p { margin: .85rem 0 .45rem; color: #716452; font-size: .8rem; }
.nh-criteria { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1rem; }
.nh-criteria button { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border: 1px solid #cbbd9e; border-radius: .7rem; color: #4c473d; background: rgba(255,255,255,.68); text-align: left; }
.nh-criteria button.is-checked { border-color: #5d966c; color: #2e6542; background: #e9f5e7; }

.nh-paper-page { min-height: calc(100vh - 70px); padding: clamp(1.5rem, 4vw, 3.5rem) 1rem; background: radial-gradient(circle at 20% 0%, #d8d3b3, transparent 38%), #eee4cd; }
.nh-paper-wrap { width: min(1060px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #cbb88d; border-radius: 1.2rem; background: #fffaf0; box-shadow: var(--nh-shadow); }
/* ---------- คิวทบทวน: อยู่ในฉากเดียวกับหน้าอื่น ไม่ใช่กระดาษลอยบนพื้นครีม ---------- */
.nh-queue-ring { flex: none; width: 96px; height: 96px; display: grid; place-content: center; justify-items: center; border-radius: 50%; color: #fff; background: radial-gradient(circle at 50% 40%, rgba(255,215,117,.22), rgba(5,30,42,.9)); box-shadow: 0 0 0 2px rgba(255,215,117,.5) inset, 0 12px 34px rgba(0,0,0,.35); }
.nh-queue-ring strong { font-size: 1.9rem; line-height: 1; color: #ffd775; }
.nh-queue-ring small { margin-top: .2rem; color: #b9cdd5; font-size: .64rem; }
.nh-review-list { display: grid; gap: .7rem; }
.nh-review-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .95rem 1.05rem; border: 1px solid rgba(255,255,255,.16); border-left: 5px solid var(--tone, #d39b47); border-radius: 1rem; color: #eaf3f5; background: rgba(5,30,42,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 32px rgba(0,0,0,.28); transition: transform .18s ease, border-color .18s ease; }
.nh-review-list article:hover { transform: translateY(-2px); border-color: rgba(255,215,117,.5); }
.nh-review-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: .8rem; color: #fff; background: color-mix(in srgb, var(--tone, #d39b47) 82%, #041823); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
.nh-review-list b, .nh-review-list h2, .nh-review-list p { margin: 0; }
.nh-review-list b { color: #ffd775; font-size: .72rem; font-weight: 800; }
.nh-review-list h2 { margin: .12rem 0; font-size: 1.05rem; color: #fff; }
.nh-review-list p { color: #a9c3cc; font-size: .8rem; }
.nh-review-list p i { color: #6fdca9; margin-right: .3rem; }
.nh-empty-dark { color: #dfeaee; }
.nh-empty-dark h2 { color: #fff; }
.nh-empty-dark p { color: #b9cdd5; }
.nh-empty-dark > span { color: #ffd775; background: rgba(255,215,117,.14); }
.nh-empty { display: grid; justify-items: center; gap: .55rem; padding: 3rem 1rem; text-align: center; }
.nh-empty > span { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 50%; color: #a76b22; background: #ffe5a8; font-size: 2rem; }
.nh-empty h2, .nh-empty p { margin: 0; }
.nh-empty p { color: #60727a; }

.nh-temple { background-position: center 52%; }
/* ---------- เลือกแบบแจกด้วยการ์ด ---------- */
.nh-table-layout { display: grid; gap: 1rem; }
.nh-decl-picker { padding: 1rem 1.1rem 1.1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 1.1rem; background: rgba(5,30,42,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nh-decl-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.nh-decl-filter button { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem .9rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #dbe9ec; background: rgba(255,255,255,.06); font-weight: 700; font-size: .84rem; }
.nh-decl-filter button b { min-width: 20px; padding: 0 .28rem; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .72rem; }
.nh-decl-filter button:hover { border-color: #ffd775; }
.nh-decl-filter button.is-active { color: #17303a; border-color: #ffd775; background: linear-gradient(180deg, #ffe39a, #e7b34e); }
.nh-decl-filter button.is-active b { background: rgba(23,48,58,.2); }
.nh-decl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .6rem; }
.nh-decl-card { position: relative; min-height: 104px; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .7rem .8rem .9rem; border: 2px solid rgba(255,255,255,.16); border-radius: .9rem; color: #eaf3f5; background: rgba(255,255,255,.05); text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.nh-decl-card b { font-size: 1.22rem; font-weight: 800; color: #fff; line-height: 1.3; }
.nh-decl-card small { color: #a9c3cc; font-size: .78rem; }
.nh-decl-card em { margin-top: .1rem; font-style: normal; color: #ffd775; font-size: .72rem; font-weight: 700; }
.nh-decl-meter { display: block; width: 100%; height: 4px; margin-top: auto; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.nh-decl-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd775, #ffb951); }
.nh-decl-count { position: absolute; right: .7rem; bottom: .62rem; color: #9fbac4; font-size: .68rem; font-weight: 700; }
.nh-decl-card:hover { transform: translateY(-2px); border-color: rgba(255,215,117,.6); background: rgba(255,215,117,.1); }
.nh-decl-card.is-active { border-color: #ffd775; background: linear-gradient(180deg, rgba(255,227,154,.22), rgba(231,179,78,.16)); box-shadow: 0 0 0 3px rgba(255,215,117,.18); }
.nh-decl-card.is-complete { border-color: rgba(111,220,169,.65); }
.nh-decl-done { position: absolute; top: .5rem; right: .55rem; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #06251c; background: #6fdca9; font-size: .62rem; }
.nh-decl-sample { margin: .85rem 0 .7rem; color: #b9cdd5; font-size: .8rem; line-height: 1.7; }
.nh-decl-sample i { color: #ffd775; margin-right: .35rem; }

/* เลือกปีก่อน แล้วค่อยเลือกครั้งที่ — ๓๘ สนามพร้อมกันหายากเกินไป */
.nh-year-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.nh-year-chip { position: relative; min-width: 68px; min-height: 44px; padding: .5rem .7rem; border: 1px solid rgba(255,255,255,.18); border-radius: .7rem; color: #dbe9ec; background: rgba(255,255,255,.06); font-weight: 800; font-size: .92rem; }
.nh-year-chip:hover { border-color: #ffd775; background: rgba(255,215,117,.12); }
.nh-year-chip.is-started::after { content: ""; position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #ffd775; }
.nh-year-chip.is-done::after { content: ""; position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #6fdca9; }
.nh-year-chip.is-active { color: #17303a; border-color: #ffd775; background: linear-gradient(180deg, #ffe39a, #e7b34e); }
.nh-round-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.nh-round-card { position: relative; min-height: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .8rem .9rem .95rem; border: 2px solid rgba(255,255,255,.16); border-radius: .9rem; color: #eaf3f5; background: rgba(255,255,255,.05); text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.nh-round-card b { font-size: 1.2rem; font-weight: 800; color: #fff; }
.nh-round-card small { color: #a9c3cc; font-size: .78rem; }
.nh-round-meter { display: block; width: 100%; height: 4px; margin-top: auto; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.nh-round-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd775, #ffb951); }
.nh-round-foot { margin-top: .35rem; color: #ffd775; font-size: .74rem; font-weight: 700; }
.nh-round-card:hover { transform: translateY(-2px); border-color: rgba(255,215,117,.6); background: rgba(255,215,117,.1); }
.nh-round-card.is-active { border-color: #ffd775; background: linear-gradient(180deg, rgba(255,227,154,.22), rgba(231,179,78,.16)); box-shadow: 0 0 0 3px rgba(255,215,117,.18); }
.nh-round-card.is-done { border-color: rgba(111,220,169,.65); }
.nh-round-card.is-done .nh-round-foot { color: #6fdca9; }

/* การ์ดเลือกสนามข้อสอบ — ปีตัวโต ครั้งที่รอง และความคืบหน้าการตรวจ */
.nh-exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .5rem; }
.nh-exam-chip { position: relative; min-height: 84px; display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; padding: .6rem .7rem .75rem; border: 2px solid rgba(255,255,255,.16); border-radius: .85rem; color: #eaf3f5; background: rgba(255,255,255,.05); text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.nh-exam-chip b { font-size: 1.16rem; font-weight: 800; color: #fff; line-height: 1.25; }
.nh-exam-chip small { color: #a9c3cc; font-size: .76rem; }
.nh-exam-chip-foot { margin-top: auto; color: #ffd775; font-size: .7rem; font-weight: 700; }
.nh-exam-chip:hover { transform: translateY(-2px); border-color: rgba(255,215,117,.6); background: rgba(255,215,117,.1); }
.nh-exam-chip.is-started { border-color: rgba(255,215,117,.45); }
.nh-exam-chip.is-active { border-color: #ffd775; background: linear-gradient(180deg, rgba(255,227,154,.22), rgba(231,179,78,.16)); box-shadow: 0 0 0 3px rgba(255,215,117,.18); }
.nh-exam-chip.is-done { border-color: rgba(111,220,169,.65); }
.nh-exam-chip.is-done .nh-exam-chip-foot { color: #6fdca9; }

/* ---------- ท่าวัด: สองงานเขียน (ข้อสอบจริง · ตารางแจกศัพท์) ---------- */
.nh-temple-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.nh-temple-tabs button { min-height: 46px; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: .8rem; color: #dbe9ec; background: rgba(5,30,42,.72); font-weight: 800; }
.nh-temple-tabs button.is-active { color: #17303a; border-color: #ffd775; background: linear-gradient(180deg, #ffe39a, #e7b34e); }
/* ---------- สมุดบันทึกย้อนหลัง ---------- */
.nh-temple-tabs button b { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 .3rem; border-radius: 999px; background: rgba(255,215,117,.9); color: #3a2b06; font-size: .68rem; }
.nh-temple-tabs button.is-active b { background: rgba(23,48,58,.85); color: #ffe39a; }
.nh-log-summary { margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: .8rem; color: #dfeaee; background: rgba(5,30,42,.72); font-size: .86rem; }
.nh-log-summary b { color: #ffd775; }
.nh-log-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.nh-log-filter button { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem .9rem; border: 1px solid rgba(255,255,255,.2); border-radius: .8rem; color: #dbe9ec; background: rgba(5,30,42,.72); font-weight: 700; font-size: .84rem; }
.nh-log-filter button b { min-width: 22px; padding: 0 .3rem; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .74rem; }
.nh-log-filter button.is-active { color: #17303a; border-color: #ffd775; background: linear-gradient(180deg, #ffe39a, #e7b34e); }
.nh-log-filter button.is-active b { background: rgba(23,48,58,.2); }
.nh-log-list { display: grid; gap: .8rem; }
/* ภารกิจที่ยังไม่ได้เขียน — จางกว่าและไม่มีกล่องข้อความ ให้ต่างจากบันทึกจริงชัดเจน */
.nh-log-entry.is-empty { border-left-color: #b9ab8c; background: rgba(255,250,240,.86); }
.nh-log-entry.is-empty h2 { color: #47606c; }
.nh-log-entry { padding: 1rem 1.1rem; border: 1px solid #cdb98e; border-left: 5px solid #c9a34e; border-radius: 1rem; color: #282b29; background: #fffaf0; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.nh-log-entry.is-complete { border-left-color: #3f875e; }
.nh-log-entry > header { display: flex; align-items: flex-start; gap: .8rem; }
.nh-log-mark { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: .7rem; color: #fff; background: var(--tone, #7b6539); }
.nh-log-entry h2 { margin: .1rem 0; font-size: 1.05rem; color: #16303d; }
.nh-log-entry header b { color: #7b6539; font-size: .76rem; }
.nh-log-entry header small { display: block; color: #8b7c62; font-size: .74rem; }
.nh-log-score { margin-left: auto; flex: none; padding: .3rem .6rem; border-radius: 999px; background: #f0e2bf; color: #6a5327; font-size: .78rem; font-weight: 800; }
.nh-log-score.is-full { background: #d8f0dd; color: #2e6a45; }
.nh-log-entry blockquote { margin: .8rem 0 0; padding: .8rem 1rem; border-radius: .7rem; background: #fff; border: 1px dashed #d8ceb9; color: #23404c; line-height: 1.9; white-space: pre-wrap; }
.nh-log-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .7rem; }
.nh-log-entry .nh-model-answer { margin-top: .7rem; }

.nh-table-note { margin: 1rem 0 .8rem; padding: .65rem .8rem; border-left: 4px solid #35837e; border-radius: .35rem .7rem .7rem .35rem; color: #2b5b58; background: #e9f6f2; font-size: .82rem; }
.nh-decl-table-wrap { overflow-x: auto; }
.nh-decl-table { width: 100%; min-width: 420px; border-collapse: collapse; }
.nh-decl-table th, .nh-decl-table td { padding: .35rem; border-bottom: 1px solid #e3d6b8; text-align: left; vertical-align: top; }
.nh-decl-table thead th { color: #7b6539; font-size: .78rem; letter-spacing: .04em; }
.nh-decl-table tbody th { width: 96px; color: #14425a; font-weight: 800; }
.nh-decl-table tbody th b { display: block; font-size: 1.02rem; }
.nh-decl-table tbody th small { display: block; margin-top: .1rem; color: #7b6539; font-size: .72rem; font-weight: 600; }
.nh-decl-table td { position: relative; }
/* บาลีมีสระล่าง (อุ อู) และพินทุ — ช่องต้องสูงพอไม่ตัดหางอักษร */
/* ช่องกรอกหนึ่งช่องต่อหนึ่งรูป — บาลีมีสระล่าง (อุ อู) และพินทุ ช่องต้องสูงพอไม่ตัดหางอักษร */
.nh-slot-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.nh-slot { position: relative; flex: 1 1 130px; min-width: 118px; }
.nh-slot input { width: 100%; min-height: 54px; padding: .65rem 2rem .65rem .65rem; border: 2px solid #d8ceb9; border-radius: .6rem; color: #143242; background: #fffdf6; font-weight: 700; font-size: 1.02rem; line-height: 1.9; }
.nh-slot input:focus { border-color: #35837e; outline: none; box-shadow: 0 0 0 3px rgba(53,131,126,.14); }
.nh-slot input::placeholder { color: #b3a68d; font-weight: 500; font-size: .88rem; }
.nh-slot.is-correct input { border-color: #3f875e; background: #eaf7ec; }
.nh-slot.is-wrong input { border-color: #c76251; background: #fff1ec; }
.nh-slot > i { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); color: #3f875e; font-size: .82rem; }
.nh-slot-note { display: block; margin-top: .3rem; color: #a4503f; font-size: .74rem; }
.nh-decl-table.is-answer td { color: #26443f; font-weight: 700; }
.nh-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #e2d5bc; }
.nh-table-foot b { color: #14425a; }

.nh-exam-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 1rem; }
.nh-exam-sittings { position: sticky; top: 86px; padding: 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; color: #e8f2ee; background: rgba(4,31,42,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nh-exam-sittings label { display: block; margin-bottom: .4rem; color: #ffe09a; font-weight: 800; }
.nh-exam-sittings select { width: 100%; min-height: 44px; padding: .55rem; border: 1px solid #8badab; border-radius: .65rem; color: #12313c; background: #fffaf0; }
.nh-exam-sittings p { color: #c0d7d2; font-size: .75rem; }
.nh-exam-sittings a { display: inline-flex; gap: .4rem; color: #ffe09a; font-size: .78rem; font-weight: 700; }
.nh-exam-paper { padding: clamp(1rem, 3vw, 2rem); border: 1px solid #cdb98e; border-radius: 1rem; color: #282b29; background: #fffaf0; box-shadow: var(--nh-shadow); }
.nh-exam-paper > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 3px double #ad9361; }
.nh-exam-paper > header span { color: #876d3f; font-size: .74rem; font-weight: 800; letter-spacing: .06em; }
.nh-exam-paper > header h2 { margin: .2rem 0 0; }
.nh-exam-paper > header i { color: #9e3e32; font-size: 2rem; transform: rotate(-8deg); }
.nh-exam-instruction { margin: .9rem 0 0; color: #6d5c3c; font-size: .92rem; font-weight: 700; }
.nh-exam-part { position: relative; padding: 1.3rem 0; border-bottom: 1px dashed #c8b994; }
.nh-exam-part:last-child { border: 0; }
.nh-exam-label { display: inline-flex; padding: .22rem .55rem; border-radius: 99px; color: #fff; background: #1f5860; font-size: .7rem; font-weight: 800; }
.nh-exam-context { margin: .55rem 0 0; color: #74634b; font-size: .78rem; }
.nh-exam-part h3 { margin: .45rem 0 .7rem; font-size: 1rem; line-height: 1.65; }
.nh-exam-part .nh-btn { margin-top: .6rem; }
.nh-exam-answer { margin-top: .7rem; padding: .9rem; border-left: 4px solid #c0923c; border-radius: .5rem .8rem .8rem .5rem; background: #f8ebcb; }
.nh-exam-answer > p { margin: .35rem 0 0; line-height: 1.75; }
.nh-self-check { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid #d4bc88; }
.nh-self-check span { margin-right: auto; font-weight: 700; }
.nh-self-check button { min-height: 44px; padding: .55rem .75rem; border: 1px solid #a9956d; border-radius: .65rem; background: #fffaf0; font-weight: 700; }

.nh-settings { position: fixed; z-index: 100; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 1rem; border: 0; background: rgba(2,16,24,.72); place-items: center; }
.nh-settings[open] { display: grid; }
.nh-settings-panel { width: min(500px, 100%); padding: 1rem; border: 1px solid #cfbc92; border-radius: 1.2rem; color: var(--nh-ink); background: #fffaf0; box-shadow: 0 30px 100px rgba(0,0,0,.4); }
.nh-settings-panel > header, .nh-settings-panel > header > div { display: flex; align-items: center; gap: .7rem; }
.nh-settings-panel > header { justify-content: space-between; padding-bottom: .8rem; border-bottom: 1px solid #decfb1; }
.nh-settings-panel > header span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: .75rem; color: #fff; background: var(--nh-sea); }
.nh-settings-panel h2, .nh-settings-panel p { margin: 0; }
.nh-settings-panel p { color: #687a80; font-size: .75rem; }
.nh-settings-panel > header > button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eee4d0; }
.nh-settings-panel > section { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.nh-settings-panel > section b, .nh-settings-panel > section small { display: block; }
.nh-settings-panel > section small { color: #718087; }
.nh-stepper { display: grid; grid-template-columns: 44px 70px 44px; align-items: center; border: 1px solid #cdbd9e; border-radius: .75rem; overflow: hidden; }
.nh-stepper button { width: 44px; height: 44px; border: 0; background: #f3ead8; }
.nh-stepper output { text-align: center; font-weight: 800; }
.nh-setting-toggle { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: .7rem; border: 0; border-top: 1px solid #decfb1; color: var(--nh-ink); background: transparent; }
.nh-setting-toggle span { display: flex; align-items: center; gap: .6rem; }
.nh-setting-toggle em { min-width: 48px; padding: .25rem .45rem; border-radius: 99px; color: #fff; background: #77878b; font-size: .7rem; font-style: normal; }
.nh-setting-toggle[aria-pressed="true"] em { background: #358062; }

@media (min-width: 901px) and (max-aspect-ratio: 4 / 3) {
	.nh-home-copy { width: min(660px, 58%); }
}

@media (max-width: 900px) {
	.nh-home-copy { width: min(760px, 82%); }
	.nh-island-grid { grid-template-columns: repeat(2, 1fr); }
	.nh-temple-card { grid-column: span 2; }
	.nh-chapter-notes { grid-template-columns: 1fr; }
	/* จอแคบ: แผงเข็มทิศลงมาอยู่ใต้โต๊ะทำงาน ไม่ยึดข้างและไม่ sticky */
	.nh-voyage-body { grid-template-columns: minmax(0, 1fr); }
	.nh-voyage-side { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
	.nh-exam-layout { grid-template-columns: 1fr; }
	.nh-exam-sittings { position: static; }
}

@media (max-width: 680px) {
	.nh-topbar { height: 62px; padding-inline: .55rem; gap: .4rem; }
	/* backdrop-filter สร้าง containing block ให้เมนู fixed ลูกของ topbar บางเบราว์เซอร์
	   ทำให้เมนูที่ควรอยู่ก้นจอถูกดึงขึ้นมาบนหัว — มือถือใช้พื้นทึบอยู่แล้วจึงปิด blur */
	.nh-topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.nh-brand-mark { width: 36px; height: 36px; }
	.nh-brand strong { font-size: .78rem; }
	.nh-brand small { font-size: .58rem; }
	.nh-topnav { position: fixed; z-index: 49; left: .65rem; right: .65rem; bottom: .65rem; justify-content: space-around; padding: .35rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; background: rgba(5,27,39,.96); box-shadow: 0 10px 35px rgba(0,0,0,.32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
	.nh-topnav button { flex: 1; justify-content: center; padding: .45rem; font-size: .68rem; }
	.nh-topnav button span { display: block; }
	.nh-page-scene, .nh-voyage, .nh-paper-page { min-height: calc(100vh - 62px); padding-bottom: 5.5rem; background-attachment: scroll; }
	.nh-home { min-height: calc(100svh - 62px); background-position: right center; padding-bottom: 4.8rem; }
	.nh-scene-shade { background: linear-gradient(0deg, rgba(3,20,30,.97) 0%, rgba(3,20,30,.8) 58%, rgba(3,20,30,.16) 100%); }
	.nh-home-copy { width: 100%; justify-content: flex-end; padding: 7rem 1rem 1.3rem; }
	.nh-home h1 { font-size: clamp(2rem, 11vw, 3.1rem); }
	.nh-home-copy > p { font-size: .9rem; line-height: 1.65; }
	.nh-home-stats { margin: 1rem 0; }
	.nh-home-stats div { padding: .65rem .45rem; }
	.nh-home-stats b { font-size: 1rem; }
	.nh-home-stats span { font-size: .59rem; }
	.nh-scroll-cue { display: none; }
	.nh-source-note { display: none; }
	.nh-page-wrap, .nh-voyage-wrap { width: min(100% - 1rem, 1180px); padding-top: 1.2rem; }
	.nh-page-heading { align-items: flex-start; }
	.nh-readiness-ring { width: 84px; height: 84px; }
	.nh-readiness-ring strong { font-size: 1.3rem; }
	.nh-island-grid { grid-template-columns: 1fr; }
	.nh-temple-card { grid-column: auto; }
	.nh-island-card button { aspect-ratio: 16 / 10; min-height: 190px; }
	.nh-temple-card button { aspect-ratio: 16 / 10; height: auto; min-height: 190px; }
	.nh-temple-card .nh-island-scrim { background: linear-gradient(0deg, rgba(3,17,25,.96) 0%, rgba(3,17,25,.86) 30%, rgba(3,17,25,.4) 56%, rgba(3,17,25,.06) 78%); }
	.nh-temple-card .nh-island-body { max-width: 100%; }
	.nh-chapter-hero { min-height: 330px; align-items: flex-end; padding: 1rem; }
	.nh-chapter-icon { width: 60px; height: 60px; font-size: 1.4rem; }
	.nh-mission-board { align-items: stretch; flex-direction: column; }
	.nh-voyage-head { align-items: flex-start; flex-direction: column; }
	.nh-mission-meter { width: 100%; }
	.nh-mission-meter b { text-align: left; }
	.nh-workbench { padding: 1rem .75rem; }
	.nh-question-head { gap: 1rem; }
	.nh-question-head .nh-mechanic-visual, .nh-question-mark { display: none; }
	.lead-term h1 { font-size: 1.3rem; line-height: 1.55; text-wrap: pretty; }
	.lead-term .nh-question-task { font-size: 1rem; }
	.lead-task .nh-question-task { font-size: 1.32rem; line-height: 1.6; text-wrap: pretty; }
	.nh-choices { grid-template-columns: 1fr; }
	/* แผนที่ ๗ ท่าบนมือถือ: สองแถว ยังกดง่ายเกิน 44px */
	.nh-route-map { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
	.nh-route-slot { min-height: 84px; padding: .5rem .2rem .45rem; }
	.nh-route-slot span { font-size: .7rem; }
	.nh-convoy-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nh-council-seats li { grid-template-columns: 1fr; }
	.nh-council-roles button { flex: 1 1 100%; justify-content: center; }
	.nh-session-chip { flex: 1 1 calc(25% - .5rem); }
	.nh-submit-row, .nh-cleared { align-items: stretch; flex-direction: column; }
	.nh-cleared .nh-actions { margin-left: 0; }
	.nh-criteria { grid-template-columns: 1fr; }
	.nh-review-list article { grid-template-columns: auto 1fr; }
	.nh-review-list article .nh-btn { grid-column: 1 / -1; }
	.nh-exam-paper { padding: 1rem; }
}

@media (max-width: 380px) {
	.nh-brand small { display: none; }
	.nh-brand-mark { display: none; }
	/* จอ ๓๒๐px: แผนที่ ๗ ท่าเหลือ ๓ คอลัมน์ ไม่งั้นดันจอกว้างเกิน */
	.nh-route-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nh-convoy-line { gap: .35rem; }
	.nh-home-stats span { min-height: 2em; }
	.nh-page-heading h1 { font-size: 1.7rem; }
	.nh-page-heading p { font-size: .82rem; }
	.nh-readiness-ring { width: 72px; height: 72px; }
	.nh-chapter-hero { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.nh-app.is-reduced *, .nh-app.is-reduced *::before, .nh-app.is-reduced *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }