/* Steam to Snow 2027 · storymap HUD v52 (add-on, v51 + short-screen dock tiers) — neon onsen HUD. Kyushu orange · Hokkaido ice blue */
#story.hud51 #g-ky{--hc:#ff8a3d;--hc2:#ffd2a6}
#story.hud51 #g-hk{--hc:#7cc4ff;--hc2:#e3f4ff}
/* map: tinted land, layered neon edge (no blur filter on the big land path → cheap on iPhone) */
#story.hud51 .st-map .land{fill:rgba(255,255,255,.07);stroke:none}
#story.hud51 #g-ky .land{fill:rgba(255,122,48,.12)}
#story.hud51 #g-hk .land{fill:rgba(110,180,255,.11)}
#story.hud51 .st-map .h51-lg1{fill:none;stroke:var(--hc);stroke-width:7;stroke-opacity:.09;stroke-linejoin:round}
#story.hud51 .st-map .h51-lg2{fill:none;stroke:var(--hc);stroke-width:3.2;stroke-opacity:.2;stroke-linejoin:round}
#story.hud51 .st-map .h51-edge{fill:none;stroke:var(--hc2);stroke-width:.9;stroke-opacity:.85;stroke-linejoin:round}
#story.hud51 .st-map .rb{stroke:var(--hc);stroke-opacity:.38;stroke-width:1.6}
#story.hud51 .st-map .h51-rdg{fill:none;stroke:var(--hc);stroke-width:9;stroke-opacity:.55;stroke-linecap:round;stroke-linejoin:round}
#story.hud51 .st-map .h51-rdc{fill:none;stroke:#fff;stroke-opacity:.85;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
/* city nodes: halo + ring, the current one breathes, a fresh arrival flares */
#story.hud51 .st-map .cty circle:not(.h51-halo):not(.h51-ring){fill:var(--hc2)}
#story.hud51 .st-map .cty text{paint-order:stroke;stroke:rgba(10,4,2,.55);stroke-width:3px;stroke-linejoin:round}
#story.hud51 #g-hk .cty text{stroke:rgba(2,10,24,.6)}
#story.hud51 .st-map .h51-halo{opacity:0;transition:opacity .4s}
#story.hud51 .st-map .cty.on .h51-halo{opacity:.75}
#story.hud51 .st-map .h51-ring{fill:none;stroke:var(--hc);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
#story.hud51 .st-map .cty.h51-cur .h51-ring{opacity:.9;animation:h51br 1.8s ease-in-out infinite}
#story.hud51 .st-map .cty.h51-cur .h51-halo{opacity:1}
#story.hud51 .st-map .cty.h51-fl .h51-ring{animation:h51fl .9s ease-out 1}
@keyframes h51br{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.45);opacity:.35}}
@keyframes h51fl{0%{transform:scale(.6);opacity:1;stroke-width:2}100%{transform:scale(3.2);opacity:0;stroke-width:.4}}
/* steam over Yufuin + Beppu */
#story.hud51 .h51-puff{transform-box:fill-box;transform-origin:center;opacity:0;animation:h51st 3.2s ease-out infinite}
@keyframes h51st{0%{transform:translateY(4px) scale(.6);opacity:0}25%{opacity:.85}100%{transform:translateY(-16px) scale(1.6);opacity:0}}
/* HUD overlay */
.h51{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;font-family:Kanit,sans-serif;--hc:#ff8a3d;--hc2:#ffd2a6;--hbg:rgba(40,12,4,.62);--hca:rgba(255,138,61,.42);--hcg:rgba(255,138,61,.7)}
.h51[data-z=hk]{--hc:#7cc4ff;--hc2:#e3f4ff;--hbg:rgba(4,18,40,.64);--hca:rgba(124,196,255,.42);--hcg:rgba(124,196,255,.7)}
.h51.on{opacity:1}
.h51-frame{position:absolute}
.h51-frame .c{position:absolute;width:20px;height:20px;border:2px solid var(--hc);filter:drop-shadow(0 0 4px var(--hc))}
.h51-frame .tl{left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:6px}
.h51-frame .tr{right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:6px}
.h51-frame .bl{left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:6px}
.h51-frame .br{right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:6px}
.h51-lab{position:absolute;top:-24px;font:600 11.5px/18px Kanit;letter-spacing:.04em;color:var(--hc2);text-shadow:0 0 8px var(--hc);white-space:nowrap}
.h51-lab.l{left:2px}.h51-lab.r{right:2px;padding:0 8px;border-radius:9px;border:1px solid var(--hcg);background:var(--hbg)}
.h51-next{position:absolute;right:8px;bottom:8px;font:600 12.5px Kanit;color:#fff;padding:3px 10px;border-radius:99px;background:var(--hbg);border:1px solid var(--hc);box-shadow:0 0 10px var(--hcg)}
.h51-parts{position:absolute;overflow:hidden}
.h51-parts i{position:absolute;bottom:-6px;border-radius:50%;background:var(--hc2);box-shadow:0 0 6px var(--hc);opacity:0;animation:h51em linear infinite}
.h51[data-z=hk] .h51-parts i{animation-name:h51sn;bottom:auto;top:-6px;background:#fff}
@keyframes h51em{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-280px) translateX(14px);opacity:0}}
@keyframes h51sn{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(300px) translateX(-12px);opacity:0}}
.h51-dock{position:absolute;left:10px;right:10px;bottom:calc(var(--safeb,0px) + 12px);display:grid;gap:6px;padding:8px;border-radius:18px;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42));border:1px solid var(--hca);box-shadow:0 0 22px var(--hca),inset 0 0 18px rgba(0,0,0,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.h51-day{margin:0 2px;font:400 12.5px/1.3 Kanit;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.h51-day b{color:var(--hc2);font-weight:600;text-shadow:0 0 8px var(--hc)}
.h51-strip{display:flex;gap:4px;padding:5px;border-radius:14px;background:var(--hbg);border:1px solid var(--hca)}
.h51-c{flex:1;min-width:0;min-height:42px;display:grid;place-content:center;text-align:center;border-radius:10px;color:rgba(255,255,255,.55);transition:background .3s,color .3s,box-shadow .3s}
.h51-c b{font:600 16px/1 Kanit}.h51-c small{display:block;font:400 9.5px/1.2 Kanit;margin-top:2px;opacity:.85}
.h51-c.done{color:rgba(255,255,255,.82)}.h51-c.done b{color:var(--hc2)}
.h51-c.cur{color:#fff;background:var(--hca);box-shadow:0 0 0 1.5px var(--hc),0 0 16px var(--hcg)}
.h51-c.cur b{text-shadow:0 0 10px var(--hc)}
.h51-c.tap{animation:h51tap .35s ease-out}
@keyframes h51tap{0%{transform:scale(.88)}100%{transform:scale(1)}}
.h51-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.h51-t{padding:7px 9px;border-radius:12px;background:var(--hbg);border:1px solid var(--hca);min-width:0}
.h51-t b{display:block;font:600 15px/1.2 Kanit;color:#fff;text-shadow:0 0 8px var(--hcg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h51-t small{display:block;font:400 10.5px/1.25 Kanit;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h51-t.long b{font-size:13px;letter-spacing:-.01em}
.h51-t.wait b{color:var(--hc2);font-size:13.5px;opacity:.9}
.h51-t i{display:none}
/* v52 dock tiers (set by JS: data-tier=full|slim|mini|strip; full = v51 tall layout) */
.h51-dock[data-tier="slim"],.h51-dock[data-tier="mini"],.h51-dock[data-tier="strip"]{gap:5px}
.h51-dock[data-tier="slim"] .h51-day,.h51-dock[data-tier="mini"] .h51-day,.h51-dock[data-tier="strip"] .h51-day,.h51-dock[data-tier="strip"] .h51-stats{display:none}
.h51-dock[data-tier="slim"] .h51-strip{padding:4px}
.h51-dock[data-tier="slim"] .h51-c{min-height:38px}
.h51-dock[data-tier="slim"] .h51-stats,.h51-dock[data-tier="mini"] .h51-stats{grid-template-columns:1.3fr 1fr 1fr;gap:5px}
.h51-dock[data-tier="slim"] .h51-t,.h51-dock[data-tier="mini"] .h51-t{display:flex;align-items:baseline;gap:5px;padding:4px 8px;border-radius:10px;overflow:hidden}
.h51-dock[data-tier="slim"] .h51-t i,.h51-dock[data-tier="mini"] .h51-t i{display:block;flex:none;font:400 10px/1.2 Kanit;font-style:normal;color:rgba(255,255,255,.62)}
.h51-dock[data-tier="slim"] .h51-t b,.h51-dock[data-tier="mini"] .h51-t b{flex:1;min-width:0;font-size:13px;line-height:1.25}
.h51-dock[data-tier="slim"] .h51-t.long b,.h51-dock[data-tier="slim"] .h51-t.wait b,.h51-dock[data-tier="mini"] .h51-t.long b,.h51-dock[data-tier="mini"] .h51-t.wait b{font-size:11.5px}
.h51-dock[data-tier="slim"] .h51-t small,.h51-dock[data-tier="mini"] .h51-t small{display:none}
.h51-dock[data-tier="mini"]{padding:6px;border-radius:15px;gap:4px}
.h51-dock[data-tier="mini"] .h51-strip{padding:3px;gap:3px;border-radius:11px}
.h51-dock[data-tier="mini"] .h51-c{min-height:31px;border-radius:8px}
.h51-dock[data-tier="mini"] .h51-c b{font-size:14px}
.h51-dock[data-tier="mini"] .h51-c small{font-size:8.5px;margin-top:1px}
.h51-dock[data-tier="mini"] .h51-stats{gap:4px}
.h51-dock[data-tier="mini"] .h51-t{padding:2px 7px;border-radius:8px}
.h51-dock[data-tier="mini"] .h51-t b{font-size:12px}
.h51-dock[data-tier="mini"] .h51-t.long b,.h51-dock[data-tier="mini"] .h51-t.wait b{font-size:11px}
#hud51[data-tier="mini"] .h51-lab.l,#hud51[data-tier="strip"] .h51-lab.l{display:none}   /* very short screens: the map rises under the caption, keep only "ขา x/y" */
/* no-JS-tier fallback (same thresholds as v51) */
@media (max-height:740px){.h51-dock:not([data-tier]) .h51-day,.h51-dock:not([data-tier]) .h51-stats{display:none}}
/* reduced motion: static glow, no particles, no breathing/flare/steam motion */
#story.hud51-rm .h51-puff{animation:none;opacity:.4}
#story.hud51-rm .h51-ring,#story.hud51-rm .cty.h51-cur .h51-ring,#story.hud51-rm .h51-c{animation:none!important;transition:none}
#story.hud51-rm .h51-parts{display:none}
.h51-rm .h51{transition:none}
@media (prefers-reduced-motion:reduce){#story.hud51 .h51-puff{animation:none;opacity:.4}#story.hud51 .h51-ring{animation:none!important}.h51-parts{display:none}.h51{transition:none}}
body.hx-rm #story.hud51 .h51-puff{animation:none;opacity:.4}body.hx-rm #story.hud51 .h51-ring{animation:none!important}body.hx-rm .h51-parts{display:none}