/* POPNIX Flood /story/<slug>/ เรื่องเล่าย้อนหลัง (2026-10-05): โหลดต่อจาก lite.css
   ภาพทั้งหมดเป็น SVG/HTML ที่ server วาดจากข้อมูลจริง (story.inc.php) story.js แค่เผยตอนเลื่อนถึง เล่นเรดาร์ เลื่อนเทียบภาพ แชร์
   ปิด JS = เห็นครบทุกบท (การซ่อนเพื่อเผยใช้ html.js เท่านั้น); ทุก loop animation ปิดใต้ prefers-reduced-motion (ท้ายไฟล์) และหยุดเมื่ออยู่นอกจอ (.is-off)
   ห้ามการ์ดแถบสีหนาด้านซ้าย, ข้อความไทยหลายบรรทัด line-height >= 1.4, ปุ่ม/จุดแตะสูง >= 44px, จอ 390px ไม่มีเลื่อนแนวนอนทั้งหน้า */
.sty {
    --st-bg: var(--bg); --st-card: var(--core); --st-line: var(--edge);
    --st-rain: #4c5fd5; --st-rain-2: #8b98f0; --st-on-rain: #ffffff; --st-crit: #d2423f; --st-warn: #c4860f; --st-ok: #2b9a8c; --st-unk: #9bb0ba; --st-none: #d6e0e5;
    --st-water: #2f8fbd; --st-water-2: #1b5d7e; --st-crest: rgba(255, 255, 255, .7); --st-glass: rgba(255, 255, 255, .78);
    --sky-top: #8fc6e3; --sky-bot: #e4f1f6; --orb: #fff6d8; --orb-glow: rgba(255, 232, 170, .65); --stars-op: 0;
    --far: #b4cfdb; --mid: #86aabb; --win: #d9eaf1; --win-op: .5; --temple: #7da2b3; --wall: #a2b8c2; --wall-dark: #84a0ad; --coping: #c3d4db;
    --gauge: #f5f8f9; --tick: #cf443d; --seam: rgba(40, 70, 86, .16);
    --temple-rim: rgba(176, 116, 24, .55); --boat: #25495b; --bird: #5f8799; --bird-op: 1; --water-top: #3f95ba; --water-deep: #1b5d7e; --glint: #ffffff; --glint-op: .55;
    --rd-bg: #dce7ec; --rd-land: #f4f8fa; --rd-line: rgba(18, 52, 70, .32);
    --ch1: rgba(76, 95, 213, .07); --ch2: rgba(43, 154, 140, .07); --ch3: rgba(196, 134, 15, .06); --ch4: rgba(31, 111, 153, .07); --ch5: rgba(240, 160, 120, .08);
}
@media (prefers-color-scheme: dark) {
    .sty {
        --st-rain: #9aa7ff; --st-rain-2: #6f7ce0; --st-on-rain: #0a1233; --st-crit: #f06a66; --st-warn: #e3b55a; --st-ok: #4dbfad; --st-unk: #5b7480; --st-none: #1d313d;
        --st-water: #2a7ea6; --st-water-2: #0a3348; --st-crest: rgba(170, 225, 250, .55); --st-glass: rgba(9, 22, 31, .72);
        --sky-top: #040b11; --sky-bot: #103041; --orb: #e7f1f5; --orb-glow: rgba(170, 215, 238, .22); --stars-op: 1;
        --far: #0e2331; --mid: #0a1a24; --win: #ffcf7a; --win-op: .75; --temple: #22333e; --wall: #1a2f3c; --wall-dark: #0f212c; --coping: #24404f;
        --gauge: #d3e0e5; --tick: #d9463f; --seam: rgba(150, 205, 232, .08);
        --temple-rim: rgba(227, 181, 90, .85); --boat: #03101a; --bird: #3b5a6b; --bird-op: 0; --water-top: #1b5b7a; --water-deep: #051d2a; --glint: #ffd98a; --glint-op: .8;
        --rd-bg: #08141b; --rd-land: #0f2330; --rd-line: rgba(150, 205, 232, .35);
        --ch1: rgba(154, 167, 255, .07); --ch2: rgba(77, 191, 173, .06); --ch3: rgba(227, 181, 90, .05); --ch4: rgba(124, 196, 232, .06); --ch5: rgba(240, 143, 121, .07);
    }
}
.sty main { padding: 0; }
.sty .wrap { max-width: 48rem; }
.sty-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sty b { color: var(--strong); }

/* ---------- หัวหน้าแบบติดบน: สารบัญบท + แถบความคืบหน้า + น้องน้ำวิ่งตาม ---------- */
.sty-top { position: sticky; top: 0; z-index: 30; background: var(--core); background: color-mix(in srgb, var(--core) 86%, transparent); border-bottom: 1px solid var(--edge);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.sty-top-in { display: flex; align-items: center; gap: 10px; max-width: 64rem; margin: 0 auto; padding: 0 12px; min-height: 52px; }
.sty-brand { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; color: var(--strong) !important; font-weight: 700; text-decoration: none; }
.sty-brand img { border-radius: 8px; }
.sty-brand b { color: var(--accent); }
.sty-toc { position: relative; flex: 1 1 auto; min-width: 0; max-width: 26rem; }
.sty-live { margin-left: auto; }
.sty-toc summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer; list-style: none; color: var(--strong);
    background: var(--accent-soft); font-weight: 600; white-space: nowrap; overflow: hidden; }
.sty-toc summary::-webkit-details-marker { display: none; }
.sty-toc summary svg { width: 18px; height: 18px; flex: none; margin-left: auto; transition: transform .3s ease; }
.sty-toc[open] summary svg { transform: rotate(180deg); }
.sty-toc-k { color: var(--ink-muted); font-size: .85em; }
.sty-toc-k b { color: var(--accent); }
.sty-toc-t { overflow: hidden; text-overflow: ellipsis; }
.sty-toc ol { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 2; list-style: none; margin: 0; padding: 8px; border-radius: 20px; background: var(--core);
    border: 1px solid var(--edge); box-shadow: var(--shadow); max-height: 70vh; overflow-y: auto; }
.sty-toc ol a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 12px; border-radius: 12px; color: var(--strong); text-decoration: none; font-weight: 600; }
.sty-toc ol a b { font-variant-numeric: tabular-nums; color: var(--ink-muted); font-weight: 600; min-width: 1.6em; }
.sty-toc ol a:hover, .sty-toc ol a[aria-current] { background: var(--accent-soft); }
.sty-toc ol a[aria-current] b { color: var(--accent); }
.sty-live { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--accent); color: var(--ink-link) !important;
    font-weight: 700; text-decoration: none; white-space: nowrap; font-size: .92em; }
.sty-bar { position: relative; height: 3px; background: var(--accent-soft); }
.sty-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--st-water), var(--accent)); border-radius: 0 3px 3px 0; }
.sty-rider { position: absolute; top: -13px; left: calc(var(--p, 0) * (100% - 30px) + 1px); width: 28px; height: 28px; pointer-events: none; transition: left .12s linear; }
.sty-rider .sty-mascot { width: 28px; height: 28px; }
@media (max-width: 30em) {
    .sty-brand span { display: none; }
    .sty-live { padding: 0 11px; font-size: .85em; }
    .sty-toc summary { padding: 0 10px; gap: 6px; }
}

/* ---------- บท ---------- */
.sty-ch { position: relative; min-height: 100vh; min-height: 100svh; padding: 64px 0 56px; scroll-margin-top: 56px; overflow: hidden; }
.sty-ch + .sty-ch { border-top: 1px solid var(--edge); }
.sty-c1 { background: linear-gradient(180deg, var(--ch1), transparent 70%); }
.sty-c2 { background: linear-gradient(180deg, var(--ch2), transparent 70%); }
.sty-c3 { background: linear-gradient(180deg, var(--ch3), transparent 70%); }
.sty-c4 { background: linear-gradient(180deg, var(--ch4), transparent 70%); }
.sty-c5 { background: linear-gradient(180deg, var(--ch5), transparent 75%); }
.sty-in { position: relative; }
.sty-chh { position: relative; margin: 0 0 22px; }
.sty-no { position: absolute; right: -8px; top: -46px; width: clamp(150px, 44vw, 250px); height: auto; overflow: visible; pointer-events: none; user-select: none; }
.sty-no text { font-family: var(--font); font-size: 96px; font-weight: 800; letter-spacing: -4px; fill: transparent; stroke: var(--line-2); stroke-width: 1.4;
    stroke-dasharray: 520; stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.45, 0, .2, 1) .15s, stroke .8s ease; }
@supports (color: color-mix(in srgb, red 50%, blue)) { .sty-no text { stroke: color-mix(in srgb, var(--accent) 34%, transparent); } }
.js .sty-chh.rv:not(.in) .sty-no text { stroke-dashoffset: 520; stroke: var(--accent); }
.sty-kick { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--ink-link); font-weight: 700; font-size: .85em; }
.sty-badge { width: 20px; height: 20px; flex: none; overflow: visible; }
.sty-badge .b-line, .sty-badge .b-arc, .sty-badge .b-tick, .sty-badge .b-beam, .sty-badge .b-trace { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sty-badge .b-arc { opacity: .55; }
.sty-badge .b-dot, .sty-badge .b-typ { fill: currentColor; }
.sty-badge .b-staff { fill: none; stroke: currentColor; stroke-width: 1.6; }
.sty-badge .b-tick { stroke: var(--st-crit); }
.sty-badge .b-rec { fill: var(--st-crit); animation: styRec 1.4s steps(1) infinite; }
.sty-badge .b-sweep { transform-origin: 5px 19px; animation: stySweep 3.2s linear infinite; }
.sty-badge .b-typ { animation: styTyp 1.2s ease-in-out infinite; animation-delay: var(--d); }
.sty-badge .b-trace { stroke-dasharray: 1; animation: styTrace 3.6s ease-in-out infinite; }
.sty-badge .b-lid { animation: styLid 3s ease-in-out infinite; transform-origin: 3px 6px; }
@keyframes styRec { 50% { opacity: .15; } }
@keyframes stySweep { from { transform: rotate(-20deg); } 50% { transform: rotate(40deg); } to { transform: rotate(-20deg); } }
@keyframes styTyp { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-1.5px); } }
@keyframes styTrace { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes styLid { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(-9deg); } }
.sty h2 { position: relative; font-size: clamp(2.1rem, 9vw, 3.3rem); line-height: 1.4; letter-spacing: -.01em; margin: 0 0 .25em; }
.sty-lede { position: relative; font-size: 1.16em; line-height: 1.6; color: var(--text); max-width: 36em; text-wrap: pretty; }
.sty-lede b { color: var(--strong); }
.sty-h3 { font-size: 1.35em; line-height: 1.4; margin: 34px 0 12px; }
.sty-p { line-height: 1.65; max-width: 40em; }
.sty-cap { font-size: .86em; line-height: 1.55; color: var(--ink-muted); margin: 10px 0 0; text-wrap: pretty; }
.sty-cap strong { color: var(--strong); }
.sty-none { padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--line-2); background: var(--core); background: color-mix(in srgb, var(--core) 60%, transparent); color: var(--text); line-height: 1.6; }
.sty-fig { position: relative; margin: 22px 0 0; padding: 18px 16px 16px; border-radius: 24px; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.sty-fig-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 6px; line-height: 1.45; }
.sty-fig-h b { font-size: 1.04em; }
.sty-fig-h > span { color: var(--ink-muted); font-size: .85em; }

/* ---------- ปุ่มแชร์ของบท ---------- */
.sty-share { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.sty-sh, .sty-cp { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--core);
    color: var(--strong) !important; font: inherit; font-weight: 600; font-size: .92em; text-decoration: none; cursor: pointer; }
.sty-sh svg, .sty-cp svg { width: 18px; height: 18px; flex: none; }
.sty-sh:hover, .sty-cp:hover { border-color: var(--accent); }
.sty-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%); margin: 0; padding: 10px 18px; border-radius: 999px;
    background: var(--strong); color: var(--bg); font-weight: 600; box-shadow: var(--shadow); }

/* ---------- น้องน้ำ ---------- */
.sty-mascot { display: block; overflow: visible; }
.sty-m-shadow { fill: rgba(11, 42, 58, .16); }
.sty-m-body { transform-box: fill-box; transform-origin: 50% 90%; animation: styBob 3.2s ease-in-out infinite; }
.sty-m-arm { transform-box: fill-box; transform-origin: 0% 100%; }
.is-wave .sty-m-arm { animation: styWave 1.6s ease-in-out infinite; }
.is-point .sty-m-arm { animation: styPoint 2.4s ease-in-out infinite; }
.sty-m-dots circle { fill: var(--accent); fill-opacity: .5; }
@keyframes styBob { 50% { transform: translateY(-2px) scale(1.02, .98); } }
@keyframes styWave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-18deg); } 60% { transform: rotate(10deg); } }
@keyframes styPoint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2.5px); } }
.sty-guide { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; }
.sty-guide .sty-mascot { width: 54px; height: 54px; flex: none; }
.sty-bub { position: relative; margin: 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--st-glass); border: 1px solid var(--edge); color: var(--strong);
    font-weight: 600; line-height: 1.45; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- บทที่ 0: ปก ---------- */
.sty-ch.sty-c0 { padding-top: 0; }   /* ปกชิดหัวหน้าทุกขนาดจอ (กฎของจอกว้างด้านล่างไม่ทับ) */
.sty-cover { position: relative; height: clamp(230px, 46vh, 460px); overflow: hidden; }
.sty-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.sty-cv-s0 { stop-color: var(--sky-top); } .sty-cv-s1 { stop-color: var(--sky-bot); }
.sty-cv-o0 { stop-color: var(--orb-glow); } .sty-cv-o1 { stop-color: var(--orb-glow); stop-opacity: 0; }
.sty-cv-orb { fill: var(--orb); }
.sty-cv-stars circle { fill: #fff; opacity: var(--stars-op); animation: styTw 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
@keyframes styTw { 50% { opacity: calc(var(--stars-op) * .35); } }
.sty-cv-far rect { fill: var(--far); }
.sty-cv-mid rect { fill: var(--mid); }
.sty-cv-temple path { fill: var(--temple); stroke: var(--temple-rim); stroke-width: .6; stroke-linejoin: round; }
.sty-cv-win rect { fill: var(--win); opacity: var(--win-op); }
.sty-cv-win .tw { animation: styWin 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes styWin { 0%, 70%, 100% { opacity: var(--win-op); } 80% { opacity: calc(var(--win-op) * .2); } }
.sty-cv-birds { opacity: var(--bird-op); animation: styFly 46s linear infinite; }
.sty-cv-bird { fill: none; stroke: var(--bird); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: styFlap .9s ease-in-out infinite; animation-delay: var(--d); }
@keyframes styFly { from { transform: translateX(-190px); } to { transform: translateX(300px); } }
@keyframes styFlap { 50% { transform: scaleY(.45); } }
.sty-px { transform: translateY(calc(var(--py, 0) * var(--k) * 1px)); }
.sty-cv-wall { fill: var(--wall); }
.sty-cv-coping { fill: var(--coping); }
.sty-cv-seam path { stroke: var(--seam); stroke-width: 1; fill: none; }
.sty-cv-gauge rect { fill: var(--gauge); }
.sty-cv-tick rect { fill: var(--tick); }
.sty-cv-crit { fill: none; stroke: var(--st-crit); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .9; }
.sty-cv-wt { stop-color: var(--water-top); } .sty-cv-wd { stop-color: var(--water-deep); }
.sty-cv-w1 { opacity: .9; }
.sty-cv-w2 { fill: var(--water-top); opacity: .45; }
.sty-cv-glint { fill: var(--glint); opacity: var(--glint-op); transform-box: fill-box; transform-origin: center; animation: styGlint 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes styGlint { 50% { opacity: calc(var(--glint-op) * .25); transform: scaleX(.6); } }
.sty-cv-hull { fill: var(--boat); }
.sty-cv-roof { fill: var(--boat); fill-opacity: .3; stroke: var(--boat); stroke-width: 1.2; stroke-linejoin: round; }
.sty-cv-pole, .sty-cv-tail { stroke: var(--boat); stroke-width: 1.2; fill: none; stroke-linecap: round; }
.sty-cv-bob { animation: styBoat 4.2s ease-in-out infinite; }
@keyframes styBoat { 50% { transform: translateY(1.2px) rotate(-1.2deg); } }
.sty-cv-crest { fill: none; stroke: var(--st-crest); stroke-width: 1.2; }
.sty-cv-water { animation: styRise 2.4s cubic-bezier(.2, .8, .2, 1) .3s both; }
.sty-cv-w1, .sty-cv-crest { animation: stySwell 7s ease-in-out infinite alternate; }
.sty-cv-w2 { animation: stySwell 9s ease-in-out -3s infinite alternate-reverse; }
@keyframes styRise { from { transform: translateY(100px); } }
@keyframes stySwell { to { transform: translateX(-19px); } }
.sty-cv-mg.is-wet { animation: styRise 2.4s cubic-bezier(.2, .8, .2, 1) .3s both; }
.sty-c0h { margin-top: 24px; }
.sty-c0h > *, .sty-c0h h1 > span { animation: styUp .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 110ms + .25s); }
.sty-c0h h1 { animation: none; }
@keyframes styUp { from { opacity: 0; transform: translateY(14px); } }
.sty h1 { font-size: clamp(2.3rem, 10vw, 4rem); line-height: 1.4; letter-spacing: -.015em; margin: 0 0 .3em; }
.sty-h1a { display: block; }
.sty-h1b { display: block; font-size: .62em; color: transparent; background: linear-gradient(100deg, var(--st-water), var(--accent) 50%, var(--st-ok)); -webkit-background-clip: text; background-clip: text; }
.sty-range { margin: 6px 0 0; color: var(--ink-muted); line-height: 1.5; }
.sty-range > span { display: inline-block; padding: 6px 14px; border-radius: 14px; background: var(--accent-soft); }
.sty-range b { color: var(--strong); }
.sty-cover-cap { margin-top: 14px; }
.sty-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; }
.sty-counts li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 20px; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.sty-counts b { font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1.15; font-variant-numeric: tabular-nums; }
.sty-counts span { color: var(--ink-muted); font-size: .88em; line-height: 1.45; }
.sty-counts li:nth-child(4) b, .sty-counts li:nth-child(5) b { color: var(--accent); }
@media (max-width: 51.99em) { .sty-counts li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.sty-mapfig { margin: 24px 0 0; padding: 18px 16px 16px; border-radius: 24px; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.sty-dmap { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.sty-dm { stroke: var(--core); stroke-width: 2.4; stroke-linejoin: round; transition: fill .3s ease; }
.sty-dm.lv-crit { fill: var(--st-crit); } .sty-dm.lv-warn { fill: var(--st-warn); } .sty-dm.lv-ok { fill: var(--st-ok); } .sty-dm.lv-unk { fill: var(--st-unk); } .sty-dm.lv-none { fill: var(--st-none); }
.sty-dm:hover { opacity: .82; }
.js .sty-mapfig.rv .sty-dm { opacity: 0; transform: scale(.94); transform-box: fill-box; transform-origin: center; }
.js .sty-mapfig.rv.in .sty-dm { opacity: 1; transform: none; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--dl); }
.sty-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 4px 0 0; padding: 0; font-size: .86em; line-height: 1.4; color: var(--text); }
.sty-legend li { display: flex; align-items: flex-start; gap: 7px; }
.sty-legend i { margin-top: .22em; }
.sty-legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sty-legend i.lv-crit { background: var(--st-crit); } .sty-legend i.lv-warn { background: var(--st-warn); } .sty-legend i.lv-ok { background: var(--st-ok); }
.sty-legend i.lv-unk { background: var(--st-unk); } .sty-legend i.lv-none { background: var(--st-none); box-shadow: inset 0 0 0 1px var(--line-2); }
.sty-more { margin: 10px 0 0; font-size: .9em; }
.sty-more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink-link); font-weight: 600; }
.sty-more p { margin: 0; line-height: 1.6; }
.sty-down { margin: 26px 0 0; text-align: center; }
.sty-down a { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; color: var(--ink-muted); text-decoration: none; font-weight: 600; font-size: .92em; }
.sty-down svg { width: 22px; height: 22px; animation: styNudge 1.8s ease-in-out infinite; }
@keyframes styNudge { 50% { transform: translateY(5px); } }

/* ---------- แท่งรายวัน ---------- */
.sty-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.sty-bars { display: flex; align-items: stretch; gap: 8px; list-style: none; margin: 0 0 6px; padding: 30px 0 2px; height: 250px; min-width: calc(var(--n) * 44px); }
.sty-bars li { flex: 1 1 0; min-width: 36px; display: flex; flex-direction: column; text-align: center; }
.sty-bb { position: relative; flex: 1 1 auto; display: flex; align-items: flex-end; }
.sty-bb i { display: block; width: 100%; height: calc(var(--v) * 100%); border-radius: 10px 10px 3px 3px; background: var(--bc, var(--accent)); opacity: .42;
    transform-origin: 50% 100%; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 70ms + .1s); }
.sty-bv { position: absolute; left: -6px; right: -6px; bottom: calc(var(--v) * 100% + 4px); font-weight: 700; font-size: .92em; line-height: 1.2; color: var(--strong); white-space: nowrap;
    transition: opacity .6s ease; transition-delay: calc(var(--i) * 70ms + .7s); }
.sty-bl { display: flex; flex-direction: column; flex: none; height: 3.1em; margin-top: 6px; font-size: .8em; line-height: 1.3; color: var(--ink-muted); white-space: nowrap; }
.sty-bars small { font-size: .84em; line-height: 1.3; color: var(--ink-muted); white-space: normal; }
.sty-bars li.is-hi .sty-bb i { background: var(--bc, var(--accent)); box-shadow: 0 10px 24px -12px var(--bc, var(--accent)); }
.sty-bars li.is-hi .sty-bl { color: var(--strong); font-weight: 700; }
.sty-bars li.is-hi .sty-bb i { opacity: 1; }
.sty-bars li.is-part .sty-bb i { background: repeating-linear-gradient(135deg, var(--bc, var(--accent)) 0 6px, transparent 6px 10px); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
    .sty-bb i { opacity: 1; background: color-mix(in srgb, var(--bc, var(--accent)) 38%, var(--core)); }
    .sty-bars li.is-part .sty-bb i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bc, var(--accent)) 38%, var(--core)) 0 6px, color-mix(in srgb, var(--bc, var(--accent)) 18%, var(--core)) 6px 10px); }
    .sty-bars li.is-hi.is-part .sty-bb i { background: repeating-linear-gradient(135deg, var(--bc, var(--accent)) 0 6px, color-mix(in srgb, var(--bc, var(--accent)) 62%, var(--core)) 6px 10px); }
}
.sty-bars li.is-gap .sty-bb i { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--edge) 6px 8px); border: 1.5px dashed var(--line-2); border-bottom: 0; }
.sty-bars li.is-gap .sty-bv { bottom: 45%; color: var(--ink-muted); }
.sty-bars.is-rain { --bc: var(--st-rain); } .sty-bars.is-crit { --bc: var(--st-crit); } .sty-bars.is-road { --bc: var(--st-warn); } .sty-bars.is-ask { --bc: var(--accent); }
.js .sty-bars.rv:not(.in) .sty-bb i { transform: scaleY(0); }
.js .sty-bars.rv:not(.in) .sty-bv { opacity: 0; }
.sty-bars.rv { opacity: 1 !important; transform: none !important; }

/* ---------- สถิติเด่น ---------- */
.sty-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.sty-stats li { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 20px; background: var(--core); border: 1px solid var(--edge); line-height: 1.45; }
.sty-st-k { color: var(--ink-muted); font-size: .86em; }
.sty-stats b { font-size: 2em; line-height: 1.2; color: var(--st-rain); }
.sty-st-w { font-weight: 600; color: var(--strong); }
.sty-stats small { color: var(--ink-muted); }

/* ---------- เรดาร์ ---------- */
.sty-rd-stage { position: relative; margin: 8px 0 0; border-radius: 18px; overflow: hidden; background: var(--rd-bg); }
.sty-rd-svg { display: block; width: 100%; height: auto; }
.sty-rd-bg { fill: var(--rd-bg); }
.sty-rd-land use { fill: var(--rd-land); stroke: none; }
.sty-rd-line use { fill: none; stroke: var(--rd-line); stroke-width: 1.8; stroke-linejoin: round; }
.sty-rd-img { image-rendering: auto; }
.sty-rd-time { position: absolute; left: 12px; top: 10px; margin: 0; padding: 6px 12px; border-radius: 14px; background: var(--st-glass); color: var(--strong); line-height: 1.3;
    font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.sty-rd-time b { font-size: 1.3em; }
.sty-rd-d { color: var(--ink-muted); font-weight: 600; }
.sty-rd-gap { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--strong); font-weight: 700;
    background: repeating-linear-gradient(135deg, transparent 0 10px, var(--rd-line) 10px 12px); }
.sty-rd-gap[hidden] { display: none; }
.sty-rd-tag { position: absolute; right: 10px; bottom: 10px; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--st-glass); color: var(--strong); font-size: .78em; font-weight: 600; }
.sty-rd-ctl { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; }
.sty-rd-ctl[hidden] { display: none; }
.sty-rd-play { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--st-rain);
    color: var(--st-on-rain); font: inherit; font-weight: 700; cursor: pointer; }
.sty-rd-play svg { width: 20px; height: 20px; fill: currentColor; }
.sty-rd-play .i-pause, .sty-rd-play[aria-pressed="true"] .i-play { display: none; }
.sty-rd-play[aria-pressed="true"] .i-pause { display: inline; }
.sty-rd-scrub { position: relative; flex: 1 1 auto; min-width: 0; height: 48px; }
.sty-rd-cov { position: absolute; left: 10px; right: 10px; top: 6px; width: calc(100% - 20px); height: 22px; }
.sty-rd-cov rect { fill: var(--st-rain); fill-opacity: .55; }
.sty-rd-cov rect.is-on { fill-opacity: 1; }
.sty-rd-cov rect.is-gap { fill: var(--line-2); }
.sty-rd-cov rect.is-on { fill: var(--st-rain); }
.js .sty-nojs { display: none; }
.sty-rd-r { position: absolute; left: 0; right: 0; bottom: 2px; width: 100%; height: 22px; margin: 0; accent-color: var(--st-rain); cursor: pointer; }

/* ---------- หลอดแก้ว (บทที่ 2) ---------- */
.sty-gauges { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; counter-reset: gz; }
.sty-gzc { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px 12px 8px; border-radius: 22px; background: var(--core);
    border: 1px solid var(--edge); box-shadow: var(--shadow); counter-increment: gz; }
.sty-gzc::before { content: counter(gz); position: absolute; right: 14px; top: 10px; font-weight: 800; font-size: 1.5em; color: var(--line-2); color: color-mix(in srgb, var(--accent) 35%, transparent); }
.sty-gz { width: 104px; height: 174px; overflow: visible; }
.sty-gz-t { fill: var(--core); fill: color-mix(in srgb, var(--accent) 6%, var(--core)); }
.sty-gz-o { fill: none; stroke: var(--strong); stroke-opacity: .35; stroke-width: 1.6; }
.sty-gz-hl { stroke: #fff; stroke-opacity: .55; stroke-width: 3; stroke-linecap: round; }
.sty-gz-wf { fill: var(--st-water); }
.sty-gz-over { fill: var(--st-crit); opacity: .42; }
.sty-gz-wv { fill: var(--st-water); animation: stySwell 3s ease-in-out infinite alternate; }
.sty-gz-w { transition: transform 1.8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 120ms + .2s); }
.js .sty-gzc.rv:not(.in) .sty-gz-w { transform: translateY(var(--h)); }
.sty-gz-bank { stroke: var(--strong); stroke-width: 2; }
.sty-gz-crit { stroke: var(--st-crit); stroke-width: 2; stroke-dasharray: 5 3; }
.sty-gz-bed { stroke: var(--ink-muted); stroke-width: 1.4; }
.sty-gz-l { font-size: 10.5px; font-weight: 700; fill: var(--ink-muted); text-anchor: end; font-family: var(--font); }
.sty-gz-l.is-crit { fill: var(--st-crit); }
.sty-gz-mk path { fill: var(--strong); }
.sty-gzc-b { min-width: 0; line-height: 1.45; }
.sty-gzc-b h4 { margin: 0 2.2em .15em 0; font-size: 1.04em; line-height: 1.4; color: var(--strong); }
.sty-gzc-b p { margin: 0 0 .2em; font-size: .9em; }
.sty-gzc-v b { font-size: 1.35em; color: var(--st-water); }
.sty-gzc.is-over .sty-gzc-v b { color: var(--st-crit); }
.sty-gzc-s { color: var(--ink-muted); }
.sty-gzc-n { color: var(--ink-muted); font-size: .82em !important; }

/* ---------- คู่ภาพ (บทที่ 3) ---------- */
.sty-pairs { display: grid; gap: 18px; margin: 18px 0 0; }
.sty-pair { margin: 0; padding: 12px; border-radius: 24px; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.sty-ba { position: relative; display: grid; gap: 8px; }
.sty-ba-l, .sty-ba-r { position: relative; }
.sty-ba-img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--bg-2); aspect-ratio: var(--ar); object-fit: cover; }
.sty-ba-l { order: -1; }
.sty-ba-tag { position: absolute; top: 8px; display: flex; flex-direction: column; padding: 5px 10px; border-radius: 12px; background: rgba(4, 16, 24, .72); color: #fff; font-size: .78em; line-height: 1.35;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.sty-ba-tag b { color: #fff; font-size: 1.12em; }
.sty-ba-tag.is-l { left: 8px; } .sty-ba-tag.is-r { right: 8px; text-align: right; }
.sty-ba-knob, .sty-ba-in { display: none; }
/* JS: สองภาพซ้อนกัน ภาพซ้ายตัดตามแถบ --x */
.sty-ba.is-live { display: block; aspect-ratio: var(--ar); border-radius: 16px; overflow: hidden; background: var(--bg-2); touch-action: pan-y; }
.sty-ba.is-live .sty-ba-l, .sty-ba.is-live .sty-ba-r { position: absolute; inset: 0; }
.sty-ba.is-live .sty-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.sty-ba.is-live .sty-ba-l { -webkit-clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); z-index: 1; }
.sty-ba.is-live .sty-ba-tag.is-l { z-index: 2; }
.sty-ba.is-live .sty-ba-knob { display: grid; place-items: center; position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--x, 50%); width: 0; pointer-events: none; }
.sty-ba.is-live .sty-ba-knob::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.sty-ba.is-live .sty-ba-knob svg { position: relative; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #fff; color: #0b2a3a; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.sty-ba.is-live .sty-ba-in { display: block; position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.sty-ba.is-live:has(.sty-ba-in:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.sty-ba-in:focus-visible ~ .sty-ba-knob svg { box-shadow: 0 0 0 4px var(--accent), 0 4px 16px rgba(0, 0, 0, .35); }
.sty-pair figcaption { display: flex; flex-direction: column; gap: 4px; margin: 12px 4px 2px; line-height: 1.5; font-size: .92em; }
.sty-pair figcaption b { font-size: 1.06em; }
.sty-pair figcaption > span { color: var(--ink-muted); font-size: .92em; }
.sty-pair .sty-full { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sty-full a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--accent-soft); color: var(--ink-link); font-weight: 600; text-decoration: none; }
.sty-full a:hover { text-decoration: underline; }

/* ---------- คำถาม (บทที่ 4) ---------- */
.sty-chat { display: grid; gap: 4px; }
.sty-asks { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; list-style: none; margin: 8px 0 0; padding: 0; }
.sty-asks li { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 86%; }
.sty-q { margin: 0; padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--accent); color: var(--accent-ink); font-weight: 600; line-height: 1.45; box-shadow: var(--shadow); }
.sty-asks small { color: var(--ink-muted); font-size: .8em; padding-right: 6px; }

/* ---------- เส้นค่ากลาง (บทที่ 5) ---------- */
.sty-line { display: block; width: 100%; height: auto; overflow: visible; margin: 6px 0 0; }
.sty-ln-grid { stroke: var(--edge); stroke-width: 1; }
.sty-ln-day { stroke: var(--edge); stroke-width: 1; stroke-dasharray: 2 3; }
.sty-ln-yl { font-size: 11px; fill: var(--ink-muted); text-anchor: end; font-family: var(--font); }
.sty-ln-xl { font-size: 11px; fill: var(--ink-muted); font-family: var(--font); }
.sty-ln-a0 { stop-color: var(--st-water); stop-opacity: .38; } .sty-ln-a1 { stop-color: var(--st-water); stop-opacity: .04; }
.sty-ln-path { fill: none; stroke: var(--st-water); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
    transition: stroke-dashoffset 2.6s cubic-bezier(.4, 0, .2, 1) .2s; }
.js .sty-linefig.rv:not(.in) .sty-ln-path { stroke-dashoffset: 1; }
.sty-ln-area { transition: opacity 1s ease 1.6s; }
.js .sty-linefig.rv:not(.in) .sty-ln-area, .js .sty-linefig.rv:not(.in) .sty-ln-pt { opacity: 0; }
.sty-ln-pt { transition: opacity .6s ease 2.4s; }
.sty-ln-crit { stroke: var(--st-crit); stroke-width: 1.6; stroke-dasharray: 6 4; }
.sty-ln-bank { stroke: var(--strong); stroke-width: 1.4; }
.sty-ln-cl { font-size: 11px; font-weight: 700; fill: var(--st-crit); text-anchor: end; font-family: var(--font); }
.sty-ln-cl.is-bank { fill: var(--strong); }
.sty-ln-pt circle { fill: var(--st-water); stroke: var(--core); stroke-width: 2; }
.sty-ln-pt .sty-ln-halo { fill: var(--st-water); opacity: .18; stroke: none; }
.sty-ln-pt.is-end circle { fill: var(--accent); }
.sty-ln-pl { font-size: 11.5px; font-weight: 700; fill: var(--strong); font-family: var(--font); paint-order: stroke; stroke: var(--core); stroke-width: 3px; stroke-linejoin: round; }
.sty-end { margin: 18px 0 0; padding: 14px 16px; border-radius: 18px; background: var(--core); border: 1px solid var(--edge); }

/* ---------- บทที่ 6 ---------- */
.sty-c6 { min-height: auto; }
.sty-end-art { display: flex; justify-content: center; margin: 4px 0 12px; }
.sty-end-art .sty-mascot { width: 96px; height: 96px; }
.sty-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.sty-credits { margin: 0; padding-left: 1.2em; line-height: 1.6; }
.sty-credits li { margin: 0 0 .3em; }

/* ---------- หน้าไม่มีข้อมูล / หน้ารวมเรื่อง ---------- */
.sty-msg { padding: 32px 16px 12px; text-align: center; }
.sty-msg .sty-mascot { width: 110px; height: 110px; margin: 0 auto 8px; }
.sty-list { padding-top: 28px; padding-bottom: 40px; }
.sty-list h1 { font-size: 2.2em; }
.sty-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 16px; list-style: none; margin: 18px 0 0; padding: 0; }
.sty-card { display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: var(--core); border: 1px solid var(--edge); box-shadow: var(--shadow);
    color: var(--strong) !important; text-decoration: none; }
.sty-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.sty-card-art { display: grid; place-items: center; aspect-ratio: 1200 / 630; background: var(--accent-soft); }
.sty-card-art .sty-mascot { width: 90px; height: 90px; }
.sty-card-b { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; line-height: 1.45; }
.sty-card-b small { color: var(--ink-muted); }

/* ---------- เผยตอนเลื่อนถึง (มีเฉพาะเมื่อ JS ทำงาน: html.js) ---------- */
.rv { transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv:not(.in) { opacity: 0; transform: translateY(18px); }
.sty-ch.is-off .sty-mascot *, .sty-ch.is-off .sty-cover-art * { animation-play-state: paused !important; }

/* ---------- จอกว้าง ---------- */
@media (min-width: 52em) {
    .sty-ch { padding: 84px 0 72px; }
    .sty .wrap { max-width: 56rem; }
    .sty-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sty-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sty-cover { height: clamp(300px, 52vh, 520px); }
}

/* ---------- ลดการเคลื่อนไหว: ทุกอย่างนิ่งที่ค่าจริง (ภาพยังครบ) ---------- */
@media (prefers-reduced-motion: reduce) {
    .sty *, .sty *::before, .sty *::after { animation: none !important; transition: none !important; }
    .js .rv:not(.in) { opacity: 1; transform: none; }
    .js .sty-bars.rv:not(.in) .sty-bb i { transform: none; }
    .js .sty-bars.rv:not(.in) .sty-bv { opacity: 1; }
    .js .sty-gzc.rv:not(.in) .sty-gz-w { transform: none; }
    .js .sty-linefig.rv:not(.in) .sty-ln-path { stroke-dashoffset: 0; }
    .js .sty-linefig.rv:not(.in) .sty-ln-area, .js .sty-linefig.rv:not(.in) .sty-ln-pt { opacity: 1; }
    .js .sty-mapfig.rv .sty-dm { opacity: 1; transform: none; }
    .js .sty-chh.rv:not(.in) .sty-no text { stroke-dashoffset: 0; }
}