/* น้ำใสไหลเย็นเห็นธาตุแท้ (/clear-water) — design.md: คราม #4f46e5 · ทองแดด #f5bf45 + น้ำใสเขียวทะเล · หินกลมใต้น้ำ
   โครง: หน้าแรก (ภาพปกใหญ่) → แผนที่สระ → แนะนำสระ → สระ (การ์ดโจทย์บนผิวน้ำ + หินธาตุ) → สรุปผล */
:root {
	--cw-indigo: #4f46e5; --cw-indigo-deep: #312e81; --cw-ink: #172033; --cw-muted: #566174;
	--cw-night: #06283a; --cw-deep: #0b3a4a; --cw-teal: #0e7490; --cw-aqua: #22d3ee; --cw-aqua-soft: #cffafe; --cw-foam: #ecfeff;
	--cw-gold: #f5bf45; --cw-gold-deep: #b45309; --cw-gold-soft: #fff6d8;
	--cw-paper: #fffdf8; --cw-line: #e2e8f0; --cw-rose: #e11d48; --cw-green: #059669; --cw-amber: #d97706;
}
[v-cloak] { display: none !important; }
.cw-body { margin: 0; background: var(--cw-night); color: var(--cw-ink); font-family: "Sarabun", sans-serif; -webkit-tap-highlight-color: transparent; }
.cw-app { min-height: 100dvh; }
.cw-app img { max-width: none; }
.cw-app button { font-family: inherit; }

/* ══ ปุ่ม ══ */
.cw-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; }
.cw-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.cw-btn-primary { background: linear-gradient(180deg, #fde68a, var(--cw-gold)); border-color: #fbbf24; color: #3b2600; box-shadow: 0 8px 20px -8px rgba(245,191,69,.7); }
.cw-btn-primary:hover { background: linear-gradient(180deg, #fef3c7, #fcd34d); }
.cw-btn-big { min-height: 56px; font-size: 1.2rem; padding: .7rem 1.6rem; width: 100%; }
.cw-btn-quit { width: 100%; border-color: #e5c8cf; background: #fff; color: #9f1239; font-size: .9rem; }
.cw-btn-quit:hover { border-color: var(--cw-rose); background: #fff1f2; color: var(--cw-rose); }
.cw-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; }
.cw-iconbtn:hover { background: rgba(255,255,255,.2); }
.cw-back { display: inline-flex; align-items: center; gap: .4rem; color: #a5f3fc; font-size: .85rem; font-weight: 700; text-decoration: none; }
.cw-back:hover { color: #fff; }
.cw-kicker { margin: 0; color: var(--cw-gold); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.cw-kicker i { margin-right: .25rem; }

/* ══ หน้าแรก ══ */
.cw-home { position: relative; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); overflow: hidden; }
.cw-home-art { position: absolute; inset: 0; background: url("/assets/game/clear-water/key-art.jpg?v=20260903.2") center 45% / cover no-repeat; }
.cw-home-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,40,58,.96) 0, rgba(6,40,58,.9) 36%, rgba(6,40,58,.42) 58%, rgba(6,40,58,.02) 100%); }
.cw-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: #e0f2fe; max-width: 640px; }
.cw-title { margin: .1rem 0 0; font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.35); text-wrap: balance; }
.cw-tagline { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 800; color: #fff; }
.cw-tagline span { color: var(--cw-gold); }
.cw-lead { margin: 0; font-size: .95rem; line-height: 1.7; color: #bae6fd; max-width: 54ch; }
.cw-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.cw-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); }
.cw-stats i { color: var(--cw-gold); }
.cw-stats b { font-size: 1.15rem; color: #fff; line-height: 1; }
.cw-stats b small { font-size: .7rem; color: #a5f3fc; font-weight: 700; }
.cw-stats span { font-size: .72rem; color: #a5f3fc; font-weight: 700; }
.cw-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .4rem; }
.cw-actions.is-center { justify-content: center; }
.cw-howto { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.cw-howto li { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: #bae6fd; line-height: 1.5; }
.cw-howto b { width: 28px; height: 28px; border-radius: 50%; background: var(--cw-teal); color: #fff; display: grid; place-items: center; font-size: .85rem; flex: none; }
.cw-howto em { font-style: normal; color: var(--cw-gold); font-weight: 800; }
.cw-sync { margin: .4rem 0 0; font-size: .78rem; color: #a5f3fc; display: flex; align-items: center; gap: .45rem; }
.cw-sync a { color: #fde68a; }
.cw-sync.is-saved { color: #86efac; }
.cw-sync.is-error, .cw-sync.is-unverified { color: #fdba74; }
.cw-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: cwBob 3.4s ease-in-out infinite; }
@keyframes cwBob { 50% { transform: translateY(-8px); } }

/* ══ หน้ารายการ (แผนที่ · สมุด · กระดาน) ══ */
.cw-page { min-height: 100dvh; padding: 1rem clamp(.9rem, 3vw, 2rem) 3rem; max-width: 1080px; margin: 0 auto; color: #e0f2fe; }
.cw-pagebar { display: flex; align-items: center; gap: .9rem; padding: .4rem 0 .6rem; }
.cw-pagebar > div:not(.cw-pagebar-stat) { flex: 1; min-width: 0; }
.cw-pagebar span { display: block; font-size: .72rem; font-weight: 800; color: var(--cw-gold); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-pagebar h1 { margin: 0; font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.2; }
.cw-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; }
.cw-pagebar-stat i { color: var(--cw-gold); }
.cw-pagebar-stat i.fa-star:not(.on) { color: rgba(255,255,255,.25); }
.cw-pagebar-stat small { font-size: .7rem; color: #a5f3fc; }
.cw-pagebar.is-float { position: relative; z-index: 2; }
.cw-pagehint { margin: 0 0 1rem; font-size: max(16px, 1rem); color: #a5f3fc; line-height: 1.6; }
.cw-brief .cw-pagebar span { font-size: max(14px, .875rem); white-space: normal; line-height: 1.6; }
.cw-pagehint b { color: #fff; }
.cw-note { color: #a5f3fc; font-size: .9rem; }
.cw-note a { color: #fde68a; }

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

/* บัญชีคำ: คำละบรรทัด · บาลีหนา+คราม · คำแปลเทา · รูปศัพท์ที่แตกจากธาตุเป็นชิปเล็ก */
.cw-wordlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.cw-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(--cw-line); }
.cw-wordlist b { font-size: 1.25rem; font-weight: 800; color: var(--cw-indigo-deep); line-height: 1.6; }
.cw-wordlist span { color: var(--cw-muted); font-size: .95rem; line-height: 1.5; }
.cw-wordlist span small { display: block; font-size: .72rem; color: #94a3b8; }
.cw-wordlist.is-compact li { padding: .35rem .7rem; }
.cw-wordlist.is-compact b { font-size: 1.1rem; }
.cw-forms { display: flex !important; flex-wrap: wrap; gap: .2rem .3rem; margin-top: .15rem; }
.cw-forms i { font-style: normal; font-weight: 800; font-size: .78rem; color: var(--cw-teal); background: var(--cw-foam); border: 1px solid #a5f3fc; border-radius: 6px; padding: 0 .4rem; line-height: 1.6; }
.cw-drops { display: inline-flex; align-items: center; gap: .12rem; font-size: .7rem; color: #e2e8f0; }
.cw-drops .on { color: var(--cw-aqua); filter: drop-shadow(0 0 2px rgba(34,211,238,.6)); }

/* สมุดธาตุ */
.cw-bookgroup { margin-bottom: 1.2rem; }
.cw-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; }
.cw-bookgroup h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.cw-bookgroup.is-fast h2::before { background: var(--cw-aqua); box-shadow: 0 0 0 4px rgba(34,211,238,.25); }
.cw-bookgroup.is-training h2::before { background: #67e8f9; }
.cw-bookgroup.is-again h2::before { background: #fb923c; }
.cw-bookgroup.is-fresh h2::before { background: #94a3b8; }
.cw-bookgroup h2 small { font-size: .78rem; font-weight: 700; color: #a5f3fc; }
.cw-lvtag { display: inline-flex; align-items: center; gap: .2rem; margin-right: .45rem; padding: .1rem .45rem; border-radius: 999px; background: var(--cw-foam); color: var(--cw-teal); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.cw-lvtag.is-locked { background: var(--cw-gold-soft); color: var(--cw-gold-deep); }
.cw-lvtag i { font-size: .6rem; }
.cw-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: #fde68a; font-weight: 800; text-decoration: underline; cursor: pointer; }
.cw-linkbtn:hover { color: #fff; }

/* กระดานคะแนน */
.cw-ranklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cw-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(--cw-paper); color: var(--cw-ink); border: 1.5px solid transparent; }
.cw-ranklist li.is-top { background: linear-gradient(180deg, #fffbeb, var(--cw-paper)); }
.cw-ranklist li.is-me { border-color: var(--cw-teal); }
.cw-rank-no { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--cw-foam); color: var(--cw-teal); font-weight: 800; }
.cw-ranklist li.is-top .cw-rank-no { background: var(--cw-gold); color: #3b2600; }
.cw-rank-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-rank-meta { font-size: .75rem; color: var(--cw-muted); }
.cw-rank-meta i { color: #f59e0b; }
.cw-rank-score { font-size: 1.1rem; color: var(--cw-indigo-deep); }
.cw-rank-me { margin-top: .9rem; padding: .7rem 1rem; border-radius: 12px; background: rgba(14,116,144,.35); color: #fff; font-weight: 700; font-size: .9rem; }

/* ══ แนะนำสระ / สรุปผล (การ์ดบนฉากเบลอ) ══ */
.cw-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; }
.cw-brief-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,40,58,.7), rgba(6,40,58,.88)); backdrop-filter: blur(6px); }
.cw-brief .cw-pagebar { width: 100%; max-width: 720px; color: #fff; }
.cw-brief-card { position: relative; z-index: 1; width: 100%; max-width: 720px; background: var(--cw-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; }
.cw-brief-card h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--cw-ink); }
.cw-brief-card .cw-btn:not(.cw-btn-primary):not(.cw-btn-quit), .cw-modal .cw-btn:not(.cw-btn-primary):not(.cw-btn-quit) { border-color: #a5f3fc; background: var(--cw-foam); color: var(--cw-deep); }
.cw-brief-card .cw-btn:not(.cw-btn-primary):not(.cw-btn-quit):hover { background: #cffafe; }
.cw-brief-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .85rem; color: var(--cw-muted); }
.cw-brief-meta i { color: var(--cw-teal); margin-right: .3rem; }
.cw-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; }
.cw-brief-marathon .cw-brief-mascot { height: min(30vh, 240px); right: .5rem; bottom: 1rem; animation: cwSwim 4s ease-in-out infinite; }
@keyframes cwSwim { 50% { transform: translate(-10px, -8px) rotate(-3deg); } }
.cw-toggles { display: flex; flex-wrap: wrap; gap: .5rem; }
.cw-toggles button { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 12px; border: 1.5px solid var(--cw-line); background: #fff; color: var(--cw-muted); font-weight: 700; font-size: .85rem; cursor: pointer; }
.cw-toggles button.is-on { border-color: var(--cw-teal); background: var(--cw-foam); color: var(--cw-deep); }
.cw-toggles.is-compact { justify-content: center; }
/* คลื่น ๓ ชั้น — ป้ายอธิบายในหน้าแนะนำสระ */
.cw-waves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cw-waves li { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 12px; border: 1.5px solid var(--cw-line); background: #fff; }
.cw-waves b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; }
.cw-waves span { display: grid; font-size: .72rem; color: var(--cw-muted); line-height: 1.3; }
.cw-waves strong { font-size: .88rem; color: var(--cw-ink); }
.cw-waves .is-still b { background: var(--cw-teal); }
.cw-waves .is-ripple b { background: var(--cw-amber); }
.cw-waves .is-deep b { background: var(--cw-indigo); }

/* สรุปผล */
.cw-result-card { text-align: center; }
.cw-result-card .cw-kicker { text-align: left; }
.cw-result-stars { display: flex; justify-content: center; gap: .6rem; font-size: 2.6rem; color: #e2e8f0; }
.cw-result-stars i.on { color: #f59e0b; animation: cwStarIn .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 cwStarIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cw-result-score { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.cw-result-score b { font-size: 3rem; font-weight: 800; color: var(--cw-indigo-deep); line-height: 1; }
.cw-result-score span { color: var(--cw-muted); font-weight: 700; }
.cw-result-score em, .cw-run em { font-style: normal; font-size: .8rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; background: var(--cw-gold-soft); color: var(--cw-gold-deep); }
.cw-result-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cw-result-facts li { display: grid; gap: .1rem; padding: .6rem; border-radius: 12px; background: #fff; border: 1px solid var(--cw-line); }
.cw-result-facts i { color: var(--cw-teal); }
.cw-result-facts b { font-size: 1.3rem; color: var(--cw-ink); }
.cw-result-facts span { font-size: .72rem; color: var(--cw-muted); font-weight: 700; }
.cw-result-tip { margin: 0; display: flex; gap: .5rem; align-items: flex-start; text-align: left; padding: .6rem .8rem; border-radius: 12px; background: var(--cw-gold-soft); color: #78350f; font-size: .85rem; line-height: 1.5; }
.cw-result-tip i { margin-top: .2rem; }
.cw-result-list { text-align: left; }
.cw-result-list h3 { margin: 0 0 .4rem; font-size: .95rem; font-weight: 800; color: var(--cw-ink); }
.cw-result-list.is-good h3 i { color: var(--cw-aqua); }
.cw-result-list.is-review h3 i { color: var(--cw-rose); }
.cw-result-card.is-fail h2 { color: var(--cw-rose); }
.cw-result-card .cw-lead { color: var(--cw-muted); margin: 0 auto; }
.cw-closing { margin: 0; font-size: .85rem; color: var(--cw-muted); font-style: italic; }
.cw-run { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.cw-run b { font-size: 3.6rem; font-weight: 800; color: var(--cw-indigo-deep); line-height: 1; }
.cw-run span { color: var(--cw-muted); font-weight: 700; }
.cw-tier-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px; background: linear-gradient(180deg, #a5f3fc, var(--cw-aqua)); color: var(--cw-night); font-size: .95rem; vertical-align: middle; margin-right: .3rem; }
.cw-result-card h2 .cw-tier-badge + * { font-weight: 700; }

/* ══ ด่านพิเศษ ══ */
.cw-btn-marathon { background: linear-gradient(135deg, #0b3a4a, #0e7490); border-color: #67e8f9; color: #fff; text-align: left; padding: .5rem 1.1rem .5rem .9rem; box-shadow: 0 8px 20px -8px rgba(14,116,144,.8), inset 0 0 0 1px rgba(103,232,249,.25); }
.cw-btn-marathon:hover { background: linear-gradient(135deg, #0e4a5e, #0891b2); }
.cw-btn-marathon > i { color: var(--cw-aqua); font-size: 1.25rem; animation: cwGlow 1.8s ease-in-out infinite; }
@keyframes cwGlow { 50% { filter: drop-shadow(0 0 8px rgba(103,232,249,.9)); transform: scale(1.1); } }
.cw-btn-marathon span { display: flex; flex-direction: column; line-height: 1.15; }
.cw-btn-marathon small { font-size: .68rem; font-weight: 700; color: #a5f3fc; }
.cw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cw-rules li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--cw-muted); line-height: 1.55; }
.cw-rules li i { width: 28px; height: 28px; border-radius: 50%; background: var(--cw-foam); color: var(--cw-teal); display: grid; place-items: center; font-size: .8rem; flex: none; margin-top: .05rem; }
.cw-marathon-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cw-marathon-stats div { display: grid; gap: .1rem; text-align: center; padding: .6rem; border-radius: 12px; background: #fff; border: 1px solid var(--cw-line); }
.cw-marathon-stats i { color: var(--cw-teal); }
.cw-marathon-stats b { font-size: 1.4rem; color: var(--cw-indigo-deep); line-height: 1.1; }
.cw-marathon-stats span { font-size: .7rem; color: var(--cw-muted); font-weight: 700; }
.cw-tier-ladder { margin: 0; display: flex; gap: .35rem; flex-wrap: wrap; }
.cw-tier-ladder span { display: grid; flex: 1 1 0; min-width: 80px; text-align: center; padding: .4rem .3rem; border-radius: 10px; border: 1.5px dashed var(--cw-line); color: #94a3b8; }
.cw-tier-ladder span b { font-size: .82rem; font-weight: 800; }
.cw-tier-ladder span small { font-size: .65rem; font-weight: 700; }
.cw-tier-ladder span.is-on { border-style: solid; border-color: var(--cw-aqua); background: var(--cw-foam); color: var(--cw-deep); }
.cw-tier { background: linear-gradient(180deg, #a5f3fc, var(--cw-aqua)) !important; color: var(--cw-night) !important; }
.cw-tier i { color: var(--cw-night) !important; }
.cw-runpill { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; background: rgba(6,40,58,.8); color: #fff; font-weight: 800; font-size: .95rem; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.cw-runpill i { color: var(--cw-aqua); }
.cw-runpill b { font-size: 1.2rem; color: #a5f3fc; font-variant-numeric: tabular-nums; }
.cw-runpill small { font-size: .72rem; color: #bae6fd; font-weight: 700; margin-left: .2rem; }

/* ══ สระ (สนามเล่น) ══ */
.cw-stage { position: relative; height: 100dvh; overflow: hidden; background: var(--cw-deep) center / cover no-repeat; display: flex; flex-direction: column; padding: max(.6rem, env(safe-area-inset-top)) .8rem max(.6rem, env(safe-area-inset-bottom)); gap: .55rem; }
.cw-stage.is-shake { animation: cwShake .38s; }
@keyframes cwShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
/* แสงแดดกระทบผิวน้ำ — ไล่แสงลอยช้า ๆ · ยิ่งคอมโบสูงน้ำยิ่งใส (สว่างขึ้น) */
.cw-caustics { position: absolute; inset: -20%; pointer-events: none; z-index: 0; opacity: .35; mix-blend-mode: soft-light; background: radial-gradient(ellipse 30% 20% at 20% 30%, rgba(255,255,255,.9), transparent 70%), radial-gradient(ellipse 25% 18% at 70% 60%, rgba(255,255,255,.8), transparent 70%), radial-gradient(ellipse 35% 22% at 45% 85%, rgba(255,255,255,.7), transparent 70%); animation: cwCaustic 9s ease-in-out infinite alternate; transition: opacity .6s; }
.cw-stage.is-hot .cw-caustics { opacity: .6; }
.cw-stage.is-crystal .cw-caustics { opacity: .85; animation-duration: 5s; }
@keyframes cwCaustic { to { transform: translate(6%, -4%) scale(1.08); } }
.cw-stage > * { position: relative; z-index: 1; }

/* HUD */
.cw-hud { display: flex; align-items: center; justify-content: space-between; gap: .6rem; pointer-events: none; }
.cw-hearts { display: flex; gap: .25rem; padding: .45rem .7rem; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 1.15rem; color: var(--cw-rose); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.cw-hearts i { transition: transform .25s, color .25s; }
.cw-hearts i.is-lost { color: #e2e8f0; transform: scale(.8); }
.cw-progress { display: flex; gap: 3px; padding: .5rem .7rem; border-radius: 999px; background: rgba(6,40,58,.72); flex: 1; max-width: 360px; }
.cw-progress span { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); transition: background .3s; }
.cw-progress span.is-done { background: var(--cw-gold); }
.cw-progress span.is-gap { margin-right: 7px; }
.cw-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); }
.cw-score > b { font-size: 1.25rem; color: var(--cw-indigo-deep); font-variant-numeric: tabular-nums; }
.cw-combo { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; background: var(--cw-foam); color: var(--cw-teal); font-weight: 800; font-size: .85rem; animation: cwComboIn .3s cubic-bezier(.34,1.56,.64,1); }
.cw-combo em { font-style: normal; font-size: .7rem; color: var(--cw-gold-deep); }
.cw-combo.is-hot { background: #fef3c7; color: #b45309; }
.cw-combo.is-fire { background: linear-gradient(90deg, #a5f3fc, #fde68a); color: var(--cw-night); }
.cw-combo.is-fire i { animation: cwFlame .5s ease-in-out infinite alternate; }
@keyframes cwFlame { to { transform: scale(1.25) translateY(-1px); } }
@keyframes cwComboIn { from { transform: scale(.6); } }

/* การ์ดโจทย์ลอยบนผิวน้ำ */
.cw-quest { position: relative; align-self: center; width: min(100%, 640px); padding: .55rem 1.1rem .85rem; border-radius: 20px; background: rgba(255,253,248,.97); border: 2px solid var(--cw-teal); box-shadow: 0 4px 0 var(--cw-deep), 0 12px 24px rgba(0,0,0,.28); text-align: center; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.cw-quest.is-ripple { border-color: var(--cw-amber); box-shadow: 0 4px 0 #92400e, 0 12px 24px rgba(0,0,0,.28); }
.cw-quest.is-deep { border-color: var(--cw-indigo); box-shadow: 0 4px 0 var(--cw-indigo-deep), 0 12px 24px rgba(0,0,0,.28); }
.cw-quest-wave { display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 800; letter-spacing: .03em; color: var(--cw-deep); padding: .12rem .6rem .12rem .15rem; border-radius: 999px; background: var(--cw-foam); }
.cw-quest-wave b { width: 20px; height: 20px; border-radius: 50%; background: var(--cw-teal); color: #fff; display: grid; place-items: center; font-size: .68rem; }
.cw-quest.is-ripple .cw-quest-wave { background: #fef3c7; color: #78350f; }
.cw-quest.is-ripple .cw-quest-wave b { background: var(--cw-amber); }
.cw-quest.is-deep .cw-quest-wave { background: #eef2ff; color: var(--cw-indigo-deep); }
.cw-quest.is-deep .cw-quest-wave b { background: var(--cw-indigo); }
.cw-quest strong { display: block; font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; color: var(--cw-indigo-deep); line-height: 1.55; }
.cw-quest > em { display: block; font-style: normal; color: var(--cw-ink); font-size: 1rem; line-height: 1.45; margin-top: -.1rem; }
.cw-quest > em.is-hidden { color: #b45309; font-size: .82rem; font-weight: 700; }
.cw-quest > em.is-hidden i { margin-right: .25rem; }
.cw-quest small { display: block; font-size: .72rem; color: var(--cw-muted); margin-top: .15rem; }
.cw-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #e2e8f0; }
.cw-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cw-aqua), var(--cw-gold) 60%, var(--cw-rose)); transform-origin: left; animation: cwShrink var(--w) linear forwards; }
.cw-stage.is-paused .cw-timer i, .cw-stage.is-paused .cw-murk, .cw-stage.is-paused .cw-stone { animation-play-state: paused; }
.cw-timer.is-norush i { background: #a5f3fc; animation: none; }
@keyframes cwShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* สายใย ศัพท์ ← ธาตุ (เผยหลังตอบ · และในบัตรความรู้) — คำแปลธาตุที่ซ่อนอยู่ในคำแปลศัพท์เรืองแสง */
.cw-chain { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; text-align: center; padding: .25rem 0 .1rem; animation: cwChainIn .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes cwChainIn { from { transform: scale(.92); opacity: 0; } }
.cw-chain small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .04em; color: var(--cw-muted); }
.cw-chain b { display: block; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; line-height: 1.5; color: var(--cw-indigo-deep); }
.cw-chain em { display: block; font-style: normal; font-size: .9rem; line-height: 1.4; color: var(--cw-ink); }
.cw-chain-root b { color: var(--cw-teal); }
.cw-chain-root { padding: .3rem .5rem; border-radius: 12px; background: var(--cw-foam); border: 1.5px solid #a5f3fc; }
.cw-chain.is-wrong .cw-chain-root { background: #ecfdf5; border-color: #6ee7b7; }
.cw-chain.is-wrong .cw-chain-root b { color: #047857; }
.cw-chain-arrow { color: var(--cw-teal); font-size: 1.4rem; }
.cw-chain mark { background: linear-gradient(180deg, transparent 45%, #fde68a 45%, #fde68a 90%, transparent 90%); color: var(--cw-gold-deep); font-weight: 800; padding: 0 .05em; border-radius: 3px; }
.cw-chain-card { padding: .6rem .5rem; border-radius: 16px; background: #fff; border: 1.5px solid var(--cw-line); }

/* โซนน้ำ + หินธาตุ */
.cw-pool { position: relative; flex: 1; min-height: 160px; width: min(100%, 900px); align-self: center; --stone: clamp(84px, min(16vw, 20vh), 150px); touch-action: manipulation; cursor: pointer; }
.cw-murk { position: absolute; inset: -12% -8%; z-index: 3; pointer-events: none; border-radius: 40%; background: radial-gradient(ellipse at center, rgba(99,124,105,.85), rgba(70,96,86,.92) 60%, rgba(55,80,74,.95)); opacity: 0; animation: cwMurk var(--w) ease-in forwards; }
@keyframes cwMurk { 0% { opacity: 0; } 35% { opacity: .08; } 70% { opacity: .38; } 100% { opacity: .9; } }
.cw-stone { position: absolute; transform: translate(-50%, -50%); z-index: 2; width: calc(var(--stone) * 1.22); height: var(--stone); border: 0; padding: 0; cursor: pointer; background: transparent; color: #fff; animation: cwStoneIn .45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--delay, 0ms); transition: transform .2s, filter .3s, opacity .3s; touch-action: manipulation; }
@keyframes cwStoneIn { from { transform: translate(-50%, -30%) scale(.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.cw-stone-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 48% 52% 50% 50% / 54% 46% 54% 46%; background: radial-gradient(circle at 34% 28%, #e0f2fe, #0ea5e9 78%); box-shadow: inset 0 -8px 14px rgba(3,105,161,.45), inset 0 4px 8px rgba(255,255,255,.45), 0 8px 18px rgba(6,40,58,.35); transition: transform .2s, background .3s, box-shadow .3s; }
.cw-stone-face::after { content: ""; position: absolute; left: 18%; top: 12%; width: 30%; height: 18%; border-radius: 50%; background: rgba(255,255,255,.5); filter: blur(2px); }
.cw-stone-face b { position: relative; z-index: 1; font-size: clamp(1.15rem, calc(var(--stone) * .28), 2rem); font-weight: 800; line-height: 1.5; text-shadow: 0 2px 4px rgba(6,40,58,.6); white-space: nowrap; padding: 0 .3em; }
.cw-stone.is-long .cw-stone-face b { font-size: clamp(1rem, calc(var(--stone) * .2), 1.5rem); }
.cw-stone.is-word .cw-stone-face { border-radius: 40% 60% 55% 45% / 50% 50% 50% 50%; }
.cw-stone-face kbd { position: absolute; left: 8%; bottom: 10%; font: 700 .62rem "Sarabun", sans-serif; color: rgba(255,255,255,.75); background: rgba(6,40,58,.35); border-radius: 6px; padding: 0 .35em; }
.cw-stone.is-idle .cw-stone-face { animation: cwSway 3.6s ease-in-out infinite; animation-delay: calc(var(--delay, 0ms) * 3); }
@keyframes cwSway { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
.cw-stone.is-idle:hover .cw-stone-face { transform: scale(1.05); }
/* หินหลากโทน (วนตามลำดับ) */
.cw-tone-1 .cw-stone-face { background: radial-gradient(circle at 34% 28%, #d1fae5, #10b981 78%); box-shadow: inset 0 -8px 14px rgba(4,120,87,.45), inset 0 4px 8px rgba(255,255,255,.45), 0 8px 18px rgba(6,40,58,.35); }
.cw-tone-2 .cw-stone-face { background: radial-gradient(circle at 34% 28%, #fce7f3, #ec4899 78%); box-shadow: inset 0 -8px 14px rgba(190,24,93,.45), inset 0 4px 8px rgba(255,255,255,.45), 0 8px 18px rgba(6,40,58,.35); }
.cw-tone-3 .cw-stone-face { background: radial-gradient(circle at 34% 28%, #ede9fe, #8b5cf6 78%); box-shadow: inset 0 -8px 14px rgba(109,40,217,.45), inset 0 4px 8px rgba(255,255,255,.45), 0 8px 18px rgba(6,40,58,.35); }
/* สถานะ */
.cw-stone.is-correct { z-index: 4; }
.cw-stone.is-correct .cw-stone-face, .cw-stone.is-glow .cw-stone-face { background: radial-gradient(circle at 34% 28%, #fef9c3, #f59e0b 78%) !important; box-shadow: 0 0 0 10px rgba(254,240,138,.4), 0 0 30px rgba(245,191,69,.8), inset 0 -8px 14px rgba(180,83,9,.4) !important; transform: scale(1.1); }
.cw-stone.is-glow .cw-stone-face { background: radial-gradient(circle at 34% 28%, #d1fae5, #059669 78%) !important; box-shadow: 0 0 0 10px rgba(110,231,183,.4), 0 0 30px rgba(16,185,129,.8), inset 0 -8px 14px rgba(6,95,70,.4) !important; }
.cw-stone.is-wrong .cw-stone-face { background: radial-gradient(circle at 34% 28%, #cbd5e1, #475569 78%) !important; box-shadow: inset 0 -8px 14px rgba(15,23,42,.4), 0 6px 12px rgba(6,40,58,.35) !important; transform: scale(.96) rotate(-4deg); animation: cwNudge .4s; }
.cw-stone.is-dim { opacity: .38; filter: saturate(.5) blur(.6px); transform: translate(-50%, -46%) scale(.9); }
.cw-stone.is-gold .cw-stone-face { box-shadow: 0 0 0 6px rgba(253,224,71,.35), 0 0 24px rgba(253,224,71,.7), inset 0 -8px 14px rgba(3,105,161,.45); }
.cw-fish { position: absolute; width: calc(var(--stone) * .62); left: -22%; top: -38%; pointer-events: none; z-index: 3; filter: drop-shadow(0 4px 8px rgba(6,40,58,.4)); animation: cwFish 2.6s ease-in-out infinite; }
@keyframes cwFish { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(10px, 6px) rotate(6deg); } }
.cw-stone-tag { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 5; width: max-content; max-width: min(240px, 60vw); padding: .25rem .6rem; border-radius: 10px; background: rgba(255,253,248,.97); color: var(--cw-ink); font-size: .82rem; font-weight: 700; line-height: 1.35; white-space: normal; box-shadow: 0 4px 12px rgba(0,0,0,.25); animation: cwTagIn .3s ease-out both; }
.cw-stone.is-wrong .cw-stone-tag { color: #7f1d1d; background: #fff1f2; }
.cw-stone.is-glow .cw-stone-tag { color: #064e3b; background: #ecfdf5; }
@keyframes cwTagIn { from { transform: translate(-50%, -6px); opacity: 0; } }
.cw-ripple { position: absolute; inset: 0; pointer-events: none; }
.cw-ripple i { position: absolute; inset: -14%; border: 3px solid rgba(254,249,195,.95); border-radius: 50%; animation: cwRipple 1.1s ease-out both; }
.cw-ripple i:nth-child(2) { animation-delay: .22s; }
.cw-ripple i:nth-child(3) { animation-delay: .44s; }
@keyframes cwRipple { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.cw-tap { position: absolute; width: 40px; height: 40px; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.8); border-radius: 50%; pointer-events: none; z-index: 1; animation: cwTap .7s ease-out forwards; }
@keyframes cwTap { to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
@keyframes cwNudge { 25% { transform: translateX(-5px) scale(.96); } 75% { transform: translateX(5px) scale(.96); } }

/* เอฟเฟกต์ลอย */
.cw-float { position: absolute; transform: translate(-50%, -50%); padding: .2em .6em; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--cw-indigo-deep); font-weight: 800; font-size: clamp(14px, 1.6vw, 22px); white-space: nowrap; pointer-events: none; animation: cwFloatUp 1.2s ease-out forwards; box-shadow: 0 4px 10px rgba(0,0,0,.2); z-index: 6; }
.cw-float.is-x2, .cw-float.is-x3 { background: linear-gradient(180deg, #fde68a, var(--cw-gold)); color: #3b2600; }
.cw-float.is-heart { background: #fff1f2; color: var(--cw-rose); }
.cw-float.is-fast { background: var(--cw-foam); color: var(--cw-teal); }
.cw-float.is-fast::before { content: "\f043"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .3em; }
@keyframes cwFloatUp { to { transform: translate(-50%, -190%); opacity: 0; } }
.cw-burst { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; }
.cw-burst i { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #a5f3fc; transform-origin: center; animation: cwBurst .8s ease-out forwards; }
.cw-burst.is-drop i { background: #e0f2fe; box-shadow: 0 0 6px rgba(165,243,252,.9); }
.cw-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 cwBurst { from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateY(-78px) scale(.4); opacity: 0; } }

/* แถบล่าง */
.cw-bottombar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; pointer-events: none; }
.cw-arena-name { padding: .35rem .8rem; border-radius: 999px; background: rgba(6,40,58,.6); color: #bae6fd; font-size: max(14px, .875rem); font-weight: 700; line-height: 1.6; }
.cw-arena-name i { color: var(--cw-gold); margin-right: .25rem; }
.cw-pause { pointer-events: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-radius: 16px; border: 0; background: var(--cw-teal); color: #fff; font-weight: 800; font-size: .95rem; cursor: pointer; box-shadow: 0 4px 0 var(--cw-deep), 0 8px 16px rgba(0,0,0,.25); flex: none; }
.cw-pause:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cw-deep); }

/* แบนเนอร์ */
.cw-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 9; text-align: center; pointer-events: none; animation: cwBanner 1.2s cubic-bezier(.34,1.56,.64,1) forwards; width: min(92%, 640px); }
.cw-banner strong { display: block; font-size: clamp(1.9rem, 5.5vw, 3.6rem); font-weight: 800; color: #fff; line-height: 1.25; text-shadow: 0 4px 0 var(--cw-deep), 0 10px 30px rgba(0,0,0,.45); letter-spacing: -.01em; }
.cw-banner span { display: inline-block; margin-top: .3rem; padding: .3rem .9rem; border-radius: 999px; background: rgba(6,40,58,.82); color: #fde68a; font-weight: 700; font-size: .95rem; }
.cw-banner.is-combo strong { color: #fde68a; text-shadow: 0 4px 0 #b45309, 0 10px 30px rgba(0,0,0,.45); }
.cw-banner.is-switch strong { color: #a5f3fc; }
.cw-banner.is-murk strong { color: #cbd5e1; text-shadow: 0 4px 0 #334155, 0 10px 30px rgba(0,0,0,.45); }
@keyframes cwBanner { 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; } }

/* กล่องพัก / บัตรความรู้ */
.cw-modal-backdrop { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgba(6,40,58,.6); backdrop-filter: blur(3px); }
.cw-modal { width: min(100%, 460px); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--cw-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: cwModalIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes cwModalIn { from { transform: scale(.85); opacity: 0; } }
.cw-modal h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--cw-ink); }
.cw-modal p { margin: 0; color: var(--cw-muted); font-size: .9rem; }
.cw-modal-icon { font-size: 1.8rem; color: var(--cw-teal); }
.cw-calm { text-align: left; }
.cw-calm .cw-chain { text-align: center; }
.cw-calm-q { color: var(--cw-ink) !important; font-size: 1rem !important; }
.cw-calm-q strong { color: var(--cw-indigo-deep); }
.cw-calm-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cw-calm-options button { min-height: 56px; border-radius: 14px; border: 2px solid var(--cw-line); background: #fff; font-size: 1.3rem; font-weight: 800; color: var(--cw-indigo-deep); cursor: pointer; transition: transform .12s, border-color .18s; padding: .3rem .4rem; }
.cw-calm-options button:hover { border-color: var(--cw-teal); transform: translateY(-2px); }
.cw-calm-options button.is-wrong { border-color: var(--cw-rose); background: #fff1f2; color: var(--cw-rose); animation: cwNudge .4s; }

/* ══ จอเล็ก ══ */
@media (max-width: 860px) {
	.cw-home { grid-template-columns: 1fr; }
	.cw-home-art { position: relative; height: 46vw; min-height: 200px; max-height: 320px; background-position: center 55%; }
	.cw-home-art::after { background: linear-gradient(180deg, rgba(6,40,58,0) 40%, var(--cw-night) 100%); }
	.cw-home-copy { padding-top: 0; margin-top: -2rem; max-width: none; padding-bottom: 2rem; }
	.cw-home-mascot { display: none; }
	.cw-title { font-size: clamp(1.65rem, 7.4vw, 2.5rem); }
	.cw-maptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cw-brief-mascot { height: 150px; opacity: .8; }
	.cw-wordlist li { grid-template-columns: minmax(4.5ch, auto) 1fr; }
	.cw-wordlist li .cw-drops { grid-column: 1 / -1; justify-self: start; }
	.cw-waves { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.cw-maptiles { grid-template-columns: 1fr 1fr; gap: .45rem; padding: .5rem; }
	.cw-tile { min-height: 104px; padding: .6rem .7rem; }
	.cw-tile-roots b { font-size: .92rem; }
	.cw-btn { font-size: .88rem; padding: .55rem .9rem; }
	.cw-calm-options { grid-template-columns: 1fr; }
	.cw-calm-options button { min-height: 48px; }
}
/* สนามเล่นบนจอเล็ก/แนวตั้ง — HUD ย่อ การ์ดโจทย์ยังอ่านชัด */
@media (max-height: 560px), (max-width: 640px) {
	.cw-hud { gap: .4rem; }
	.cw-progress { max-width: 200px; padding: .4rem .5rem; }
	.cw-quest { padding: .4rem .8rem .7rem; }
	.cw-quest strong { font-size: 1.5rem; line-height: 1.5; }
	.cw-quest > em { font-size: .88rem; }
	.cw-quest small { display: none; }
	.cw-pause span { display: none; }
	.cw-pause { padding: .7rem .8rem; }
	.cw-arena-name { display: none; }
	.cw-chain b { font-size: 1.3rem; }
	.cw-chain em { font-size: .78rem; }
	.cw-stone-tag { font-size: .74rem; max-width: 48vw; }
}
/* มือถือแนวนอน (เตี้ย): แยกเป็นสองคอลัมน์ ซ้าย HUD+โจทย์ · ขวาโซนน้ำเต็มความสูง */
@media (max-height: 560px) and (orientation: landscape) {
	.cw-stage { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: .8rem; row-gap: .45rem; }
	.cw-hud { grid-column: 1; grid-row: 1; flex-wrap: wrap; }
	.cw-progress { display: none; }
	.cw-quest { grid-column: 1; grid-row: 2; align-self: start; width: 100%; }
	.cw-bottombar { grid-column: 1; grid-row: 3; }
	.cw-pool { grid-column: 2; grid-row: 1 / -1; width: 100%; --stone: clamp(76px, 17vh, 120px); }
	.cw-banner { left: 50%; }
}
/* ลดการเคลื่อนไหว */
.cw-app.is-reduced *, .cw-app.is-reduced *::before, .cw-app.is-reduced *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
.cw-app.is-reduced .cw-timer i, .cw-app.is-reduced .cw-murk { animation-duration: var(--w) !important; }
.cw-app.is-reduced .cw-stone.is-idle .cw-stone-face { animation: none; }
.cw-app.is-reduced .cw-caustics { animation: none; }
.cw-app.is-reduced .cw-result-stars i.on { animation: none; }