/* ตุ่นสายฟ้า (/mole-thunder) — design.md: คราม #4f46e5 · ทองสายฟ้า #f5bf45 · ไม้ป้าย · ดินอุ่น
   โครง: หน้าแรก (ภาพปกใหญ่) → แผนที่ด่าน → แนะนำด่าน → สนามเล่น (ฉากคงสัดส่วน) → สรุปผล */
:root {
	--mt-indigo: #4f46e5; --mt-indigo-deep: #312e81; --mt-night: #0f172a; --mt-ink: #172033; --mt-muted: #566174;
	--mt-gold: #f5bf45; --mt-gold-deep: #b45309; --mt-gold-soft: #fff6d8;
	--mt-wood: #a86f3a; --mt-wood-dark: #6b3f16; --mt-paper: #fffdf8; --mt-line: #e2e8f0;
	--mt-rose: #e11d48; --mt-green: #059669;
}
[v-cloak] { display: none !important; }
.mt-body { margin: 0; background: var(--mt-night); color: var(--mt-ink); font-family: "Sarabun", sans-serif; -webkit-tap-highlight-color: transparent; }
.mt-app { min-height: 100dvh; }
.mt-app img { max-width: none; }
.mt-app button { font-family: inherit; }

/* ══ ปุ่ม ══ */
.mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .6rem 1.15rem; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; font-weight: 800; font-size: .95rem; cursor: pointer; transition: transform .12s, background .18s, box-shadow .18s; }
.mt-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.mt-btn-primary { background: linear-gradient(180deg, #fde68a, var(--mt-gold)); border-color: #fbbf24; color: #3b2600; box-shadow: 0 8px 20px -8px rgba(245,191,69,.7); }
.mt-btn-primary:hover { background: linear-gradient(180deg, #fef3c7, #fcd34d); }
.mt-btn-big { min-height: 56px; font-size: 1.2rem; padding: .7rem 1.6rem; width: 100%; }
.mt-btn-ghost { border-color: transparent; background: transparent; color: var(--mt-muted); font-weight: 700; font-size: .85rem; }
.mt-btn-ghost:hover { background: #f1f5f9; transform: none; }
/* ออกจากด่าน: เป็นปุ่มจริงมีขอบ อ่านออกว่ากดได้ แต่โทนเบากว่าปุ่ม "เล่นต่อ" ไม่แย่งสายตา */
.mt-btn-quit { width: 100%; border-color: #e5c8cf; background: #fff; color: #9f1239; font-size: .9rem; }
.mt-btn-quit:hover { border-color: var(--mt-rose); background: #fff1f2; color: var(--mt-rose); }
.mt-btn-quit i { font-size: .9em; }
.mt-iconbtn { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.1); color: #fff; font-size: 1rem; cursor: pointer; display: grid; place-items: center; flex: none; }
.mt-iconbtn:hover { background: rgba(255,255,255,.2); }
.mt-back { display: inline-flex; align-items: center; gap: .4rem; color: #c7d2fe; font-size: .85rem; font-weight: 700; text-decoration: none; }
.mt-back:hover { color: #fff; }
.mt-kicker { margin: 0; color: var(--mt-gold); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.mt-kicker i { margin-right: .25rem; }

/* ══ หน้าแรก ══ */
.mt-home { position: relative; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); overflow: hidden; }
.mt-home-art { position: absolute; inset: 0; background: url("/assets/game/mole-thunder/key-art.jpg?v=20260902.1") center 40% / cover no-repeat; }
.mt-home-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,.96) 0, rgba(15,23,42,.9) 36%, rgba(15,23,42,.45) 58%, rgba(15,23,42,.05) 100%); }
.mt-home-copy { position: relative; z-index: 1; padding: clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) 6rem; display: flex; flex-direction: column; gap: .8rem; color: #e0e7ff; max-width: 640px; }
.mt-title { margin: .1rem 0 0; font-size: clamp(2.8rem, 6.5vw, 5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.35); }
.mt-tagline { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 800; color: #fff; }
.mt-tagline span { color: var(--mt-gold); }
.mt-lead { margin: 0; font-size: .95rem; line-height: 1.7; color: #c7d2fe; max-width: 52ch; }
.mt-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.mt-stats div { display: flex; align-items: center; gap: .55rem; padding: .5rem .85rem; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.mt-stats i { color: var(--mt-gold); }
.mt-stats b { font-size: 1.15rem; color: #fff; line-height: 1; }
.mt-stats b small { font-size: .7rem; color: #a5b4fc; font-weight: 700; }
.mt-stats span { font-size: .72rem; color: #a5b4fc; font-weight: 700; }
.mt-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .4rem; }
.mt-actions.is-center { justify-content: center; }
.mt-howto { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.mt-howto li { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: #c7d2fe; }
.mt-howto b { width: 28px; height: 28px; border-radius: 50%; background: var(--mt-indigo); color: #fff; display: grid; place-items: center; font-size: .85rem; flex: none; }
.mt-howto em { font-style: normal; color: var(--mt-gold); font-weight: 800; }
.mt-sync { margin: .4rem 0 0; font-size: .78rem; color: #a5b4fc; display: flex; align-items: center; gap: .45rem; }
.mt-sync a { color: #fde68a; }
.mt-sync.is-saved { color: #86efac; }
.mt-sync.is-error, .mt-sync.is-unverified { color: #fdba74; }
.mt-home-mascot { position: absolute; right: clamp(.5rem, 3vw, 3rem); bottom: 0; z-index: 1; height: min(44vh, 380px); filter: drop-shadow(0 12px 24px rgba(0,0,0,.4)); animation: mtBob 3.2s ease-in-out infinite; }
@keyframes mtBob { 50% { transform: translateY(-8px); } }

/* ══ หน้ารายการ (แผนที่ · สมุด · กระดาน) ══ */
.mt-page { min-height: 100dvh; padding: 1rem clamp(.9rem, 3vw, 2rem) 3rem; max-width: 1080px; margin: 0 auto; color: #e0e7ff; }
.mt-pagebar { display: flex; align-items: center; gap: .9rem; padding: .4rem 0 .6rem; }
.mt-pagebar > div:not(.mt-pagebar-stat) { flex: 1; min-width: 0; }
.mt-pagebar span { display: block; font-size: .72rem; font-weight: 800; color: var(--mt-gold); letter-spacing: .04em; }
.mt-pagebar h1 { margin: 0; font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.2; }
.mt-pagebar-stat { display: flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 800; color: #fff; }
.mt-pagebar-stat i { color: var(--mt-gold); }
.mt-pagebar-stat i:not(.on) ~ i, .mt-pagebar-stat i.fa-star:not(.on) { color: rgba(255,255,255,.25); }
.mt-pagebar-stat i.fa-star.on { color: var(--mt-gold); }
.mt-pagebar-stat small { font-size: .7rem; color: #a5b4fc; }
.mt-pagebar.is-float { position: relative; z-index: 2; }
.mt-pagehint { margin: 0 0 1rem; font-size: .85rem; color: #a5b4fc; line-height: 1.6; }
.mt-note { color: #a5b4fc; font-size: .9rem; }
.mt-note a { color: #fde68a; }

/* แผนที่ */
.mt-mapgroup { margin-bottom: 1rem; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.mt-mapgroup-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .7rem 1rem; background-size: cover; background-position: center 70%; position: relative; color: #fff; font-weight: 800; }
.mt-mapgroup-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,.9), rgba(15,23,42,.55)); }
.mt-mapgroup-head span, .mt-mapgroup-head small { position: relative; }
.mt-mapgroup-head span i { color: var(--mt-gold); margin-right: .3rem; }
.mt-mapgroup-head small { font-size: .75rem; color: #c7d2fe; font-weight: 700; }
.mt-maptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: .7rem; }
.mt-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: left; padding: .75rem .85rem .7rem; border-radius: 14px; border: 1.5px solid var(--mt-line); background: var(--mt-paper); color: var(--mt-ink); cursor: pointer; transition: transform .12s, box-shadow .18s, border-color .18s; min-height: 118px; }
.mt-tile:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--mt-indigo); box-shadow: 0 14px 28px -14px rgba(0,0,0,.5); }
.mt-tile.is-done { border-color: #a5b4fc; }
.mt-tile.is-perfect { border-color: var(--mt-gold); background: linear-gradient(180deg, #fffbeb, var(--mt-paper)); }
.mt-tile.is-locked { cursor: not-allowed; background: rgba(255,255,255,.06); border-style: dashed; border-color: rgba(255,255,255,.18); color: #94a3b8; }
.mt-tile-no { font-size: .72rem; font-weight: 800; letter-spacing: .05em; color: var(--mt-indigo); }
.mt-tile.is-locked .mt-tile-no { color: #94a3b8; }
.mt-tile-lock { position: absolute; top: .7rem; right: .8rem; font-size: .8rem; color: #94a3b8; }
.mt-tile-roots { display: flex; flex-wrap: wrap; gap: .15rem .45rem; line-height: 1.5; }
.mt-tile-roots b { font-size: 1rem; font-weight: 800; color: var(--mt-indigo-deep); }
.mt-tile.is-locked .mt-tile-roots b { color: #64748b; filter: blur(2.5px); }
.mt-tile-stars { font-size: .78rem; letter-spacing: .08em; color: #d1d5db; margin-top: auto; }
.mt-tile-stars .on { color: #f59e0b; }
.mt-tile small { font-size: .72rem; color: var(--mt-muted); }

/* บัญชีคำ: คำละบรรทัด · บาลีหนา+คราม · คำแปลเทา */
.mt-wordlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.mt-wordlist li { display: grid; grid-template-columns: minmax(5.5ch, auto) 1fr auto; align-items: center; gap: .3rem .8rem; padding: .5rem .8rem; border-radius: 12px; background: #fff; border: 1px solid var(--mt-line); }
.mt-wordlist b { font-size: 1.25rem; font-weight: 800; color: var(--mt-indigo-deep); line-height: 1.6; }
.mt-wordlist span { color: var(--mt-muted); font-size: .95rem; line-height: 1.5; }
.mt-wordlist span small { display: block; font-size: .72rem; color: #94a3b8; }
.mt-wordlist.is-compact li { padding: .35rem .7rem; }
.mt-wordlist.is-compact b { font-size: 1.1rem; }
.mt-bolts { display: inline-flex; gap: .12rem; font-size: .7rem; color: #e2e8f0; }
.mt-bolts .on { color: #f59e0b; }

/* สมุดธาตุ */
.mt-bookgroup { margin-bottom: 1.2rem; }
.mt-bookgroup h2 { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 800; color: #fff; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.mt-bookgroup h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.mt-bookgroup.is-fast h2::before { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.25); }
.mt-bookgroup.is-training h2::before { background: #818cf8; }
.mt-bookgroup h2 small { font-size: .78rem; font-weight: 700; color: #a5b4fc; }

/* กระดานคะแนน */
.mt-ranklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mt-ranklist li { display: grid; grid-template-columns: 2.2rem 1fr auto auto; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 14px; background: var(--mt-paper); color: var(--mt-ink); border: 1.5px solid transparent; }
.mt-ranklist li.is-top { background: linear-gradient(180deg, #fffbeb, var(--mt-paper)); }
.mt-ranklist li.is-me { border-color: var(--mt-indigo); }
.mt-rank-no { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #eef2ff; color: var(--mt-indigo); font-weight: 800; }
.mt-ranklist li.is-top .mt-rank-no { background: var(--mt-gold); color: #3b2600; }
.mt-rank-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-rank-meta { font-size: .75rem; color: var(--mt-muted); }
.mt-rank-meta i { color: #f59e0b; }
.mt-rank-score { font-size: 1.1rem; color: var(--mt-indigo-deep); }
.mt-rank-me { margin-top: .9rem; padding: .7rem 1rem; border-radius: 12px; background: rgba(79,70,229,.25); color: #fff; font-weight: 700; font-size: .9rem; }

/* ══ แนะนำด่าน / สรุปผล (การ์ดบนฉากเบลอ) ══ */
.mt-brief { position: relative; min-height: 100dvh; padding: 1rem clamp(.9rem, 3vw, 2rem) 3rem; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.mt-brief-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.88)); backdrop-filter: blur(6px); }
.mt-brief .mt-pagebar { width: 100%; max-width: 720px; color: #fff; }
.mt-brief-card { position: relative; z-index: 1; width: 100%; max-width: 720px; background: var(--mt-paper); border-radius: 22px; padding: clamp(1.1rem, 3vw, 1.8rem); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); display: grid; gap: .9rem; }
.mt-brief-card h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--mt-ink); }
/* ปุ่มรองบนการ์ดกระดาษ: ครามอ่อน (ค่าตั้งต้น .mt-btn เป็นตัวหนังสือขาวสำหรับพื้นมืด) */
.mt-brief-card .mt-btn:not(.mt-btn-primary):not(.mt-btn-ghost):not(.mt-btn-quit), .mt-modal .mt-btn:not(.mt-btn-primary):not(.mt-btn-ghost):not(.mt-btn-quit) { border-color: #c7d2fe; background: #eef2ff; color: var(--mt-indigo-deep); }
.mt-brief-card .mt-btn:not(.mt-btn-primary):not(.mt-btn-ghost):not(.mt-btn-quit):hover { background: #e0e7ff; }
.mt-brief-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .85rem; color: var(--mt-muted); }
.mt-brief-meta i { color: var(--mt-indigo); margin-right: .3rem; }
.mt-brief-mascot { position: absolute; right: -1rem; bottom: -.5rem; z-index: 0; height: min(38vh, 300px); opacity: .95; filter: drop-shadow(0 12px 24px rgba(0,0,0,.4)); pointer-events: none; }
.mt-toggles { display: flex; flex-wrap: wrap; gap: .5rem; }
.mt-toggles button { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 12px; border: 1.5px solid var(--mt-line); background: #fff; color: var(--mt-muted); font-weight: 700; font-size: .85rem; cursor: pointer; }
.mt-toggles button.is-on { border-color: var(--mt-indigo); background: #eef2ff; color: var(--mt-indigo-deep); }
.mt-toggles button i { color: inherit; }
.mt-toggles.is-compact { justify-content: center; }

/* สรุปผล */
.mt-result-card { text-align: center; }
.mt-result-card .mt-kicker { text-align: left; }
.mt-result-stars { display: flex; justify-content: center; gap: .6rem; font-size: 2.6rem; color: #e2e8f0; }
.mt-result-stars i.on { color: #f59e0b; animation: mtStarIn .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * .22s); filter: drop-shadow(0 4px 10px rgba(245,158,11,.5)); }
@keyframes mtStarIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mt-result-score { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.mt-result-score b { font-size: 3rem; font-weight: 800; color: var(--mt-indigo-deep); line-height: 1; }
.mt-result-score span { color: var(--mt-muted); font-weight: 700; }
.mt-result-score em { font-style: normal; font-size: .8rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; background: var(--mt-gold-soft); color: var(--mt-gold-deep); }
.mt-result-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mt-result-facts li { display: grid; gap: .1rem; padding: .6rem; border-radius: 12px; background: #fff; border: 1px solid var(--mt-line); }
.mt-result-facts i { color: var(--mt-indigo); }
.mt-result-facts b { font-size: 1.3rem; color: var(--mt-ink); }
.mt-result-facts span { font-size: .72rem; color: var(--mt-muted); font-weight: 700; }
.mt-result-tip { margin: 0; display: flex; gap: .5rem; align-items: flex-start; text-align: left; padding: .6rem .8rem; border-radius: 12px; background: var(--mt-gold-soft); color: #78350f; font-size: .85rem; line-height: 1.5; }
.mt-result-tip i { margin-top: .2rem; }
.mt-result-list { text-align: left; }
.mt-result-list h3 { margin: 0 0 .4rem; font-size: .95rem; font-weight: 800; color: var(--mt-ink); }
.mt-result-list.is-good h3 i { color: #f59e0b; }
.mt-result-list.is-review h3 i { color: var(--mt-rose); }
.mt-result-card.is-fail h2 { color: var(--mt-rose); }
.mt-result-card .mt-lead { color: var(--mt-muted); margin: 0 auto; }
.mt-closing { margin: 0; font-size: .85rem; color: var(--mt-muted); font-style: italic; }

/* ══ สนามเล่น ══ */
.mt-stage { position: relative; height: 100dvh; min-height: min(360px, 100dvh); overflow: hidden; background: #d6b986; }
.mt-stage.is-shake .mt-field { animation: mtShake .38s; }
@keyframes mtShake { 20% { transform: translateX(calc(-50% - 6px)); } 40% { transform: translateX(calc(-50% + 6px)); } 60% { transform: translateX(calc(-50% - 4px)); } 80% { transform: translateX(calc(-50% + 3px)); } }
/* ความกว้างฉาก: อย่างน้อยเต็มจอ · ขยายตามความสูงจอเพื่อดันขอบฟ้าขึ้น · แต่ห้ามเกิน ๑๑๘% ของจอ
   (โพรงริมอยู่ที่ ๑๖% และ ๘๒.๕% ของฉาก — กว้างกว่านี้โพรงริมจะหลุดขอบจอ) */
.mt-field { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); aspect-ratio: 1536/1024; width: clamp(100%, calc((100dvh + 160px) * 1.5), 118vw); background-size: 100% 100%; background-repeat: no-repeat; cursor: crosshair; touch-action: manipulation; }
/* ป้ายยาวให้ตัดบรรทัดแทนที่จะยื่นออกนอกจอ · ป้ายของโพรงริมเอนเข้าหากลางจอ */
.mt-sign { max-width: 120cqw; }
.mt-sign b, .mt-sign i { white-space: normal; }
.mt-burrow:first-child .mt-sign { left: 62%; }
.mt-burrow:last-child .mt-sign { left: 38%; }
.mt-burrow { position: absolute; width: 15%; aspect-ratio: 3/4; transform: translate(-50%, -100%); container-type: inline-size; }
.mt-hole-mask { position: absolute; inset: 0; clip-path: inset(-160% -80% 0 -80%); }
.mt-hole-shadow { position: absolute; left: 12%; right: 12%; bottom: -2%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(63,36,10,.4), transparent 68%); pointer-events: none; }
.mt-mole { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; transform: translateY(160%); transition: transform .26s cubic-bezier(.34,1.56,.64,1); touch-action: manipulation; }
.mt-mole img { position: absolute; left: 50%; bottom: 0; width: 64cqw; transform: translateX(-50%); filter: drop-shadow(0 3px 3px rgba(63,36,10,.3)); pointer-events: none; transition: filter .2s; }
.mt-mole.is-up { transform: translateY(6%); }
.mt-mole.is-up img { animation: mtWiggle 1.1s ease-in-out infinite; }
@keyframes mtWiggle { 0%, 100% { transform: translateX(-50%) rotate(-2deg); } 50% { transform: translateX(-50%) rotate(2deg); } }
.mt-mole.is-hit { transform: translateY(24%) scaleY(.82) scaleX(1.12); transition-duration: .12s; }
.mt-mole.is-hit img { filter: drop-shadow(0 3px 3px rgba(63,36,10,.3)) brightness(1.15); }
.mt-mole.is-shy { transform: translateY(12%) rotate(-7deg); }
.mt-mole.is-shy img { filter: drop-shadow(0 3px 3px rgba(63,36,10,.3)) saturate(.4); }
.mt-mole.is-glow { transform: translateY(0); }
.mt-mole.is-glow img { filter: drop-shadow(0 0 14px rgba(245,191,69,.95)) drop-shadow(0 3px 3px rgba(63,36,10,.3)); }
.mt-mole.is-down { transform: translateY(160%); transition-duration: .2s; }
.mt-mole.is-gold img { filter: sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 12px rgba(253,224,71,.9)); }
.mt-gold-glow { position: absolute; left: 50%; bottom: 10%; width: 90cqw; height: 90cqw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(253,224,71,.5), transparent 65%); pointer-events: none; animation: mtPulse .8s ease-in-out infinite; z-index: -1; }
@keyframes mtPulse { 50% { transform: translateX(-50%) scale(1.15); opacity: .7; } }
.mt-sign { position: absolute; left: 50%; bottom: 84cqw; transform: translateX(-50%); min-width: 82cqw; max-width: 175cqw; padding: .18em .4em .22em; border-radius: .3em; background: linear-gradient(180deg, #fde68a, #fbbf24); border: .14em solid var(--mt-wood-dark); box-shadow: 0 .12em 0 var(--mt-wood), 0 4px 8px rgba(63,36,10,.28); text-align: center; font-size: min(22cqw, 40px); line-height: 1.15; transition: transform .2s, background .2s; pointer-events: none; }
.mt-sign b { display: block; color: var(--mt-wood-dark); font-weight: 800; white-space: nowrap; line-height: 1.6; }
.mt-sign i { display: block; font-style: normal; font-weight: 700; color: #7c2d12; font-size: .5em; margin-top: -.15em; padding-bottom: .1em; white-space: nowrap; }
.mt-mole.is-gold .mt-sign { background: linear-gradient(180deg, #fef9c3, #fde047); border-color: #a16207; }
.mt-mole.is-hit .mt-sign { transform: translateX(-50%) translateY(-16cqw) scale(1.1); }
.mt-mole.is-reveal .mt-sign { transform: translateX(-50%) translateY(-8cqw) scale(1.12); }
.mt-mole.is-correct .mt-sign { background: linear-gradient(180deg, #d1fae5, #6ee7b7); border-color: #065f46; }
.mt-mole.is-correct .mt-sign b, .mt-mole.is-correct .mt-sign i { color: #064e3b; }
.mt-mole.is-shy .mt-sign { background: linear-gradient(180deg, #fee2e2, #fca5a5); border-color: #7f1d1d; }
.mt-mole.is-shy .mt-sign b, .mt-mole.is-shy .mt-sign i { color: #7f1d1d; }

/* เอฟเฟกต์ */
.mt-float { position: absolute; transform: translate(-50%, -50%); padding: .2em .6em; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--mt-indigo-deep); font-weight: 800; font-size: clamp(14px, 1.6vw, 22px); white-space: nowrap; pointer-events: none; animation: mtFloatUp 1.1s ease-out forwards; box-shadow: 0 4px 10px rgba(0,0,0,.2); z-index: 5; }
.mt-float.is-x2, .mt-float.is-x3 { background: linear-gradient(180deg, #fde68a, var(--mt-gold)); color: #3b2600; }
.mt-float.is-heart { background: #fff1f2; color: var(--mt-rose); }
.mt-float.is-fast { background: #fef3c7; color: #b45309; }
.mt-float.is-fast::before { content: "\f0e7"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .3em; }
@keyframes mtFloatUp { to { transform: translate(-50%, -230%); opacity: 0; } }
.mt-burst { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; }
.mt-burst i { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #b5743a; transform-origin: center; animation: mtBurst .8s ease-out forwards; }
.mt-burst.is-dust i { background: #c89a5e; width: 8px; height: 8px; animation-duration: .6s; }
.mt-burst.is-star i { background: var(--mt-gold); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: 14px; height: 14px; }
.mt-burst.is-gold i { background: #fde047; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: 20px; height: 20px; animation-duration: 1s; }
@keyframes mtBurst { from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateY(-78px) scale(.4); opacity: 0; } }
.mt-hammer { position: absolute; width: clamp(64px, 8vw, 110px); aspect-ratio: 1; transform: translate(-30%, -95%); pointer-events: none; z-index: 6; transform-origin: 80% 95%; animation: mtSwing .42s ease-out forwards; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.mt-hammer svg { width: 100%; height: 100%; }
@keyframes mtSwing { 0% { transform: translate(-30%, -95%) rotate(-70deg); opacity: 0; } 30% { transform: translate(-30%, -95%) rotate(8deg); opacity: 1; } 55% { transform: translate(-30%, -95%) rotate(-6deg); } 100% { transform: translate(-30%, -95%) rotate(-40deg); opacity: 0; } }

/* HUD */
.mt-hud { position: absolute; top: max(.6rem, env(safe-area-inset-top)); left: .8rem; right: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; pointer-events: none; z-index: 8; }
.mt-hearts { display: flex; gap: .25rem; padding: .45rem .7rem; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 1.15rem; color: var(--mt-rose); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.mt-hearts i { transition: transform .25s, color .25s; }
.mt-hearts i.is-lost { color: #e2e8f0; transform: scale(.8); }
.mt-progress { display: flex; gap: 3px; padding: .5rem .7rem; border-radius: 999px; background: rgba(15,23,42,.72); flex: 1; max-width: 360px; }
.mt-progress span { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); transition: background .3s; }
.mt-progress span.is-done { background: var(--mt-gold); }
.mt-progress span.is-half { margin-right: 6px; }
.mt-score { display: flex; align-items: center; gap: .6rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.mt-score > b { font-size: 1.25rem; color: var(--mt-indigo-deep); font-variant-numeric: tabular-nums; }
.mt-combo { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; background: #eef2ff; color: var(--mt-indigo); font-weight: 800; font-size: .85rem; animation: mtComboIn .3s cubic-bezier(.34,1.56,.64,1); }
.mt-combo em { font-style: normal; font-size: .7rem; color: var(--mt-gold-deep); }
.mt-combo.is-hot { background: #fef3c7; color: #b45309; }
.mt-combo.is-fire { background: linear-gradient(90deg, #fde68a, #fb923c); color: #7c2d12; }
.mt-combo.is-fire i { animation: mtFlame .5s ease-in-out infinite alternate; }
@keyframes mtFlame { to { transform: scale(1.25) translateY(-1px); } }
@keyframes mtComboIn { from { transform: scale(.6); } }

/* แถบล่าง: โจทย์ + เวลา */
.mt-bottombar { position: absolute; left: .8rem; right: .8rem; bottom: max(.6rem, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; justify-content: center; gap: .6rem; z-index: 8; pointer-events: none; }
.mt-quest { position: relative; flex: 0 1 560px; min-width: 0; padding: .5rem 1.1rem .8rem; border-radius: 18px; background: rgba(255,253,248,.97); border: 2px solid var(--mt-wood); box-shadow: 0 4px 0 var(--mt-wood-dark), 0 12px 24px rgba(0,0,0,.28); text-align: center; overflow: hidden; }
.mt-quest.is-r2m { border-color: var(--mt-indigo); box-shadow: 0 4px 0 var(--mt-indigo-deep), 0 12px 24px rgba(0,0,0,.28); }
.mt-quest-dir { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--mt-wood-dark); padding: .12rem .55rem; border-radius: 999px; background: var(--mt-gold-soft); }
.mt-quest.is-r2m .mt-quest-dir { background: #eef2ff; color: var(--mt-indigo-deep); }
.mt-quest strong { display: block; font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; color: var(--mt-ink); line-height: 1.6; }
.mt-quest strong.is-pali { color: var(--mt-indigo-deep); }
.mt-quest small { display: block; font-size: .72rem; color: var(--mt-muted); margin-top: -.1rem; }
.mt-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #e2e8f0; }
.mt-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--mt-green), var(--mt-gold) 60%, var(--mt-rose)); transform-origin: left; animation: mtShrink var(--w) linear forwards; animation-delay: var(--d, 0ms); }
.mt-stage.is-paused .mt-timer i { animation-play-state: paused; }
.mt-timer.is-norush i { background: #a7f3d0; animation: none; }
@keyframes mtShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.mt-pause { pointer-events: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-radius: 16px; border: 0; background: var(--mt-indigo); color: #fff; font-weight: 800; font-size: .95rem; cursor: pointer; box-shadow: 0 4px 0 var(--mt-indigo-deep), 0 8px 16px rgba(0,0,0,.25); flex: none; }
.mt-pause:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--mt-indigo-deep); }

/* แบนเนอร์ */
.mt-banner { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); z-index: 9; text-align: center; pointer-events: none; animation: mtBanner 1.1s cubic-bezier(.34,1.56,.64,1) forwards; }
.mt-banner strong { display: block; font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; color: #fff; line-height: 1.2; text-shadow: 0 4px 0 var(--mt-indigo-deep), 0 10px 30px rgba(0,0,0,.45); letter-spacing: -.01em; }
.mt-banner span { display: inline-block; margin-top: .3rem; padding: .3rem .9rem; border-radius: 999px; background: rgba(15,23,42,.8); color: #fde68a; font-weight: 700; font-size: .95rem; }
.mt-banner.is-combo strong { color: #fde68a; text-shadow: 0 4px 0 #b45309, 0 10px 30px rgba(0,0,0,.45); }
.mt-banner.is-switch strong { color: #c7d2fe; }
@keyframes mtBanner { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }

/* กล่องพัก / บัตรความรู้ */
.mt-modal-backdrop { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); }
.mt-modal { width: min(100%, 440px); background: var(--mt-paper); border-radius: 22px; padding: 1.4rem 1.4rem 1.1rem; text-align: center; display: grid; gap: .7rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); animation: mtModalIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes mtModalIn { from { transform: scale(.85); opacity: 0; } }
.mt-modal h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--mt-ink); }
.mt-modal p { margin: 0; color: var(--mt-muted); font-size: .9rem; }
.mt-modal-icon { font-size: 1.8rem; color: var(--mt-indigo); }
.mt-calm { text-align: left; }
.mt-knowcard { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; padding: .9rem 1rem; border-radius: 16px; background: linear-gradient(180deg, #eef2ff, #fff); border: 1.5px solid #c7d2fe; }
.mt-knowcard b { font-size: 2rem; font-weight: 800; color: var(--mt-indigo-deep); line-height: 1.5; }
.mt-knowcard strong { display: block; font-size: 1.1rem; color: var(--mt-ink); }
.mt-knowcard span { font-size: .78rem; color: var(--mt-muted); }
.mt-calm-q { color: var(--mt-ink) !important; font-size: 1rem !important; }
.mt-calm-q strong { color: var(--mt-indigo-deep); }
.mt-calm-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mt-calm-options button { min-height: 56px; border-radius: 14px; border: 2px solid var(--mt-line); background: #fff; font-size: 1.4rem; font-weight: 800; color: var(--mt-indigo-deep); cursor: pointer; transition: transform .12s, border-color .18s; }
.mt-calm-options button:hover { border-color: var(--mt-indigo); transform: translateY(-2px); }
.mt-calm-options button.is-wrong { border-color: var(--mt-rose); background: #fff1f2; color: var(--mt-rose); animation: mtNudge .4s; }
@keyframes mtNudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ══ จอเล็ก ══ */
@media (max-width: 860px) {
	.mt-home { grid-template-columns: 1fr; }
	.mt-home-art { position: relative; height: 46vw; min-height: 200px; max-height: 320px; background-position: center 45%; }
	.mt-home-art::after { background: linear-gradient(180deg, rgba(15,23,42,0) 40%, var(--mt-night) 100%); }
	.mt-home-copy { padding-top: 0; margin-top: -2rem; max-width: none; padding-bottom: 2rem; }
	.mt-home-mascot { display: none; }
	.mt-title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
	.mt-maptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mt-brief-mascot { height: 150px; opacity: .8; }
	.mt-result-facts { grid-template-columns: repeat(3, 1fr); }
	.mt-wordlist li { grid-template-columns: minmax(4.5ch, auto) 1fr; }
	.mt-wordlist li .mt-bolts { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 480px) {
	.mt-maptiles { grid-template-columns: 1fr 1fr; gap: .45rem; padding: .5rem; }
	.mt-tile { min-height: 104px; padding: .6rem .7rem; }
	.mt-tile-roots b { font-size: .92rem; }
	.mt-btn { font-size: .88rem; padding: .55rem .9rem; }
}
/* สนามเล่นบนจอเล็ก/แนวตั้ง — HUD ย่อ ป้ายโจทย์ยังอ่านชัด */
@media (max-height: 520px), (max-width: 640px) {
	.mt-hud { gap: .4rem; }
	.mt-progress { display: none; }
	.mt-quest { padding: .4rem .8rem .7rem; }
	.mt-quest strong { font-size: 1.35rem; }
	.mt-quest small { display: none; }
	.mt-pause span { display: none; }
	.mt-pause { padding: .7rem .8rem; }
	.mt-sign { font-size: min(22cqw, 30px); }
}
/* จอที่สัดส่วนแคบกว่า ๓:๒ (ครึ่งจอแมค · ไอแพดตั้ง · มือถือตั้ง): ฉากเต็มความกว้างพอดี ไม่ขยายตามความสูง
   พื้นที่ว่างบน-ล่างปูด้วยฉากเดียวกันเบลอ ๆ · ป้ายโจทย์อยู่ใต้ฉาก */
@media (max-aspect-ratio: 3/2) {
	.mt-stage { background: #d6b986; }
	.mt-stage::before { content: ""; position: absolute; inset: -24px; background: var(--arena) center / cover no-repeat; filter: blur(16px) brightness(.72) saturate(1.1); z-index: 0; }
	.mt-field { z-index: 1; width: 100%; bottom: auto; top: 50%; transform: translate(-50%, -58%); box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 18px 40px rgba(0,0,0,.35); }
	.mt-stage.is-shake .mt-field { animation: mtShakeP .38s; }
	.mt-bottombar { flex-direction: column-reverse; align-items: stretch; }
	.mt-quest { flex: none; }
	.mt-pause { align-self: flex-end; }
}
/* มือถือแนวตั้ง: ฉาก ๑๐๐% จะเล็กเกินแตะ จึงขยายเป็น ๑๑๘% แล้วเพิ่มขนาดตุ่น ป้ายริมเอนเข้าใน */
@media (max-aspect-ratio: 3/2) and (max-width: 700px) {
	.mt-field { width: 118vw; }
	.mt-burrow { width: 19%; }
	.mt-hud { flex-wrap: wrap; }
	.mt-quest strong { font-size: 1.7rem; }
	.mt-sign { max-width: 130cqw; }
	.mt-burrow:first-child .mt-sign { left: 72%; }
	.mt-burrow:last-child .mt-sign { left: 28%; }
}
@keyframes mtShakeP { 20% { transform: translate(calc(-50% - 6px), -58%); } 40% { transform: translate(calc(-50% + 6px), -58%); } 60% { transform: translate(calc(-50% - 4px), -58%); } 80% { transform: translate(calc(-50% + 3px), -58%); } }
/* ลดการเคลื่อนไหว */
.mt-app.is-reduced *, .mt-app.is-reduced *::before, .mt-app.is-reduced *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
.mt-app.is-reduced .mt-timer i { animation-duration: var(--w) !important; }
.mt-app.is-reduced .mt-mole.is-up img { animation: none; }
.mt-app.is-reduced .mt-result-stars i.on { animation: none; }

/* ══ ด่านพิเศษ: ตะลุยทุกธาตุ ══ */
.mt-btn-marathon { background: linear-gradient(135deg, #312e81, #4f46e5); border-color: #fcd34d; color: #fff; text-align: left; padding: .5rem 1.1rem .5rem .9rem; box-shadow: 0 8px 20px -8px rgba(79,70,229,.8), inset 0 0 0 1px rgba(252,211,77,.25); }
.mt-btn-marathon:hover { background: linear-gradient(135deg, #3730a3, #6366f1); }
.mt-btn-marathon > i { color: var(--mt-gold); font-size: 1.25rem; animation: mtBoltGlow 1.6s ease-in-out infinite; }
@keyframes mtBoltGlow { 50% { filter: drop-shadow(0 0 8px rgba(253,224,71,.9)); transform: scale(1.12); } }
.mt-btn-marathon span { display: flex; flex-direction: column; line-height: 1.15; }
.mt-btn-marathon small { font-size: .68rem; font-weight: 700; color: #fde68a; }
.mt-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mt-rules li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--mt-muted); line-height: 1.55; }
.mt-rules li i { width: 28px; height: 28px; border-radius: 50%; background: #eef2ff; color: var(--mt-indigo); display: grid; place-items: center; font-size: .8rem; flex: none; margin-top: .05rem; }
.mt-marathon-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mt-marathon-stats div { display: grid; gap: .1rem; text-align: center; padding: .6rem; border-radius: 12px; background: #fff; border: 1px solid var(--mt-line); }
.mt-marathon-stats i { color: var(--mt-indigo); }
.mt-marathon-stats b { font-size: 1.4rem; color: var(--mt-indigo-deep); line-height: 1.1; }
.mt-marathon-stats span { font-size: .7rem; color: var(--mt-muted); font-weight: 700; }
.mt-tier-ladder { margin: 0; display: flex; gap: .35rem; flex-wrap: wrap; }
.mt-tier-ladder span { display: grid; gap: 0; flex: 1 1 0; min-width: 80px; text-align: center; padding: .4rem .3rem; border-radius: 10px; border: 1.5px dashed var(--mt-line); color: #94a3b8; }
.mt-tier-ladder span b { font-size: .82rem; font-weight: 800; }
.mt-tier-ladder span small { font-size: .65rem; font-weight: 700; }
.mt-tier-ladder span.is-on { border-style: solid; border-color: var(--mt-gold); background: var(--mt-gold-soft); color: var(--mt-gold-deep); }
.mt-tier { background: linear-gradient(180deg, #fde68a, var(--mt-gold)) !important; color: #3b2600 !important; }
.mt-tier i { color: #3b2600 !important; }
.mt-brief-marathon .mt-brief-mascot { height: min(34vh, 280px); right: .5rem; }
.mt-runpill { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; background: rgba(15,23,42,.78); color: #fff; font-weight: 800; font-size: .95rem; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.mt-runpill i { color: var(--mt-gold); }
.mt-runpill b { font-size: 1.2rem; color: #fde68a; font-variant-numeric: tabular-nums; }
.mt-runpill small { font-size: .72rem; color: #c7d2fe; font-weight: 700; margin-left: .2rem; }
.mt-run { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.mt-run b { font-size: 3.6rem; font-weight: 800; color: var(--mt-indigo-deep); line-height: 1; }
.mt-run span { color: var(--mt-muted); font-weight: 700; }
.mt-run em { font-style: normal; font-size: .8rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; background: var(--mt-gold-soft); color: var(--mt-gold-deep); }
.mt-tier-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px; background: linear-gradient(180deg, #fde68a, var(--mt-gold)); color: #3b2600; font-size: .95rem; vertical-align: middle; margin-right: .3rem; }
.mt-result-card h2 .mt-tier-badge + * { font-weight: 700; }
@media (max-width: 860px) {
	.mt-marathon-stats { grid-template-columns: repeat(3, 1fr); }
	.mt-runpill small { display: none; }
}
@media (max-height: 520px), (max-width: 640px) {
	.mt-runpill { display: inline-flex; padding: .4rem .7rem; font-size: .85rem; }
}

/* ══ สมุดธาตุ: ป้ายบอกด่าน + กลุ่ม "เคยตอบถูกแต่ความไวหมด" ══ */
.mt-bolts { display: inline-flex; align-items: center; gap: .12rem; font-size: .7rem; color: #e2e8f0; }
.mt-lvtag { display: inline-flex; align-items: center; gap: .2rem; margin-right: .45rem; padding: .1rem .45rem; border-radius: 999px; background: #eef2ff; color: var(--mt-indigo); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.mt-lvtag.is-locked { background: var(--mt-gold-soft); color: var(--mt-gold-deep); }
.mt-lvtag i { font-size: .6rem; }
.mt-bookgroup.is-again h2::before { background: #fb923c; }
.mt-bookgroup.is-fresh h2::before { background: #94a3b8; }
.mt-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: #fde68a; font-weight: 800; text-decoration: underline; cursor: pointer; }
.mt-linkbtn:hover { color: #fff; }