/* Steam to Snow 2027 · overview HUD v53 (add-on) — "แผงภารกิจนีออน": the whole-trip overview on ONE screen, no scroll.
   Countdown ring (16 day segments, Kyushu orange → Hokkaido blue) · 6 stat dials · 2 region bars with mini neon maps · 16-day grid. */
#stOver.o53{--o53k:#ff9a5c;--o53k2:#ffd2a6;--o53h:#7cc4ff;--o53h2:#e3f4ff;--o53g:#ffde59;
 position:relative;box-sizing:border-box;height:100vh;height:100svh;height:var(--o53vh,100svh);min-height:0;overflow:hidden;
 padding:calc(var(--safet,0px) + 64px) 12px calc(env(safe-area-inset-bottom,0px) + 10px);
 background:radial-gradient(90% 46% at 12% 88%,rgba(255,110,40,.22),transparent 66%),radial-gradient(90% 46% at 92% 18%,rgba(60,150,255,.24),transparent 66%),linear-gradient(180deg,rgba(3,7,16,.95),rgba(3,7,16,.975) 30%,#03070f)}
#stOver.o53::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(150,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(150,200,255,.05) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
#stOver.o53 .o53{position:relative;height:100%;display:flex;flex-direction:column;gap:7px;min-height:0}
#stOver.o53 .o53-src{display:none!important}
/* header */
#stOver.o53 .o53-top{display:flex;align-items:center;gap:8px;min-width:0}
#stOver.o53 .okick{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 11.5px/1 Kanit;padding:6px 11px;border-radius:99px;border:1px solid rgba(255,190,140,.5);color:#ffe3cc;background:rgba(255,140,70,.12);box-shadow:0 0 12px rgba(255,140,70,.3),inset 0 0 8px rgba(255,140,70,.2)}
#stOver.o53 .o53-live{margin-left:auto;flex:none;font:500 10.5px/1 Kanit;color:var(--o53g);display:flex;align-items:center;gap:5px}
#stOver.o53 .o53-live i{width:7px;height:7px;border-radius:50%;background:var(--o53g);box-shadow:0 0 8px var(--o53g);animation:o53b 1.6s ease-in-out infinite}
#stOver.o53 h2{margin:0!important;font:700 25px/1.12 Kanit;text-shadow:0 0 18px rgba(255,200,160,.35);white-space:nowrap}
#stOver.o53 .osub{margin:-3px 0 0;font-size:12px;line-height:1.3;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* panel: ring + dials */
#stOver.o53 .o53-panel{position:relative;flex:1 1 0;min-height:112px;display:grid;grid-template-columns:var(--o53r,118px) minmax(0,1fr);gap:10px;align-items:center;padding:8px 12px 8px 10px;border-radius:16px;background:linear-gradient(135deg,rgba(255,140,70,.10),rgba(10,16,30,.55) 45%,rgba(90,170,255,.12)),rgba(4,8,18,.8);border:1px solid rgba(255,255,255,.12)}
#stOver.o53 .o53-c{position:absolute;width:14px;height:14px;border:2px solid #ffb070;filter:drop-shadow(0 0 4px #ff7a3c)}
#stOver.o53 .o53-c.tl{left:-1px;top:-1px;border-right:0;border-bottom:0;border-top-left-radius:8px}
#stOver.o53 .o53-c.bl{left:-1px;bottom:-1px;border-right:0;border-top:0;border-bottom-left-radius:8px}
#stOver.o53 .o53-c.tr,#stOver.o53 .o53-c.br{border-color:#9fd6ff;filter:drop-shadow(0 0 4px #5fb0ff)}
#stOver.o53 .o53-c.tr{right:-1px;top:-1px;border-left:0;border-bottom:0;border-top-right-radius:8px}
#stOver.o53 .o53-c.br{right:-1px;bottom:-1px;border-left:0;border-top:0;border-bottom-right-radius:8px}
#stOver.o53 .o53-ring{position:relative;width:var(--o53r,118px);height:var(--o53r,118px);align-self:center}
#stOver.o53 .o53-ring svg{display:block;width:100%;height:100%;overflow:visible}
#stOver.o53 .o53-seg{fill:none;stroke-width:5}
#stOver.o53 .o53-segg{fill:none;stroke-width:7;filter:url(#o53bl);opacity:.9}
#stOver.o53 .o53-seg.ky,#stOver.o53 .o53-segg.ky{stroke:var(--o53k)}
#stOver.o53 .o53-seg.hk,#stOver.o53 .o53-segg.hk{stroke:var(--o53h)}
#stOver.o53 .o53-seg.dim,#stOver.o53 .o53-segg.dim{opacity:.32}
#stOver.o53 .o53-seg.now,#stOver.o53 .o53-segg.now{stroke:var(--o53g)}
#stOver.o53 .o53-sweep{transform-origin:64px 64px;animation:o53spin 9s linear infinite}
#stOver.o53 .o53-dot{fill:var(--o53g);stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 5px #ffde59)}
#stOver.o53 .o53-n{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
#stOver.o53 .o53-n b{font:700 calc(var(--o53r,118px)*.31)/1 Kanit;background:linear-gradient(180deg,#fff,#ffe9a8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(255,222,89,.55))}
#stOver.o53 .o53-n small{font:500 10px/1.2 Kanit;color:rgba(255,255,255,.75)}
#stOver.o53 .o53-n small.pre{margin-bottom:2px}
#stOver.o53 .o53-dials{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:4px 8px;min-width:0}
#stOver.o53 .o53-d{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
#stOver.o53 .o53-d svg{flex:none;width:24px;height:24px;overflow:visible}
#stOver.o53 .o53-d .w{display:flex;flex-direction:column;min-width:0}
#stOver.o53 .o53-d b{font:700 17px/1 Kanit;color:#fff}
#stOver.o53 .o53-d small{font-size:9.5px;line-height:1.25;color:rgba(255,255,255,.7);white-space:nowrap;letter-spacing:-.01em}
#stOver.o53 .o53-d.ky svg{color:#ffb070}#stOver.o53 .o53-d.hk svg{color:#9fd6ff}
#stOver.o53 .o53-d .tr{fill:none;stroke:currentColor;stroke-opacity:.22;stroke-width:2}
#stOver.o53 .o53-d .ar{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 3px currentColor)}
/* region bars with mini neon maps */
#stOver.o53 .o53-lanes{display:grid;gap:6px;flex:none}
#stOver.o53 .o53-lane{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:9px;align-items:center;height:48px;padding:0 10px 0 4px;border-radius:14px;overflow:hidden}
#stOver.o53 .o53-lane svg{width:56px;height:46px}
#stOver.o53 .o53-lane.ky{background:linear-gradient(90deg,rgba(255,130,60,.30),rgba(255,130,60,.05));border:1px solid rgba(255,170,110,.45);box-shadow:0 0 16px rgba(255,120,50,.22)}
#stOver.o53 .o53-lane.hk{background:linear-gradient(90deg,rgba(90,170,255,.28),rgba(90,170,255,.04));border:1px solid rgba(150,210,255,.42);box-shadow:0 0 16px rgba(80,160,255,.22)}
#stOver.o53 .o53-lane p{margin:0;font-size:11px;line-height:1.3;color:rgba(255,255,255,.8);min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#stOver.o53 .o53-lane p b{display:block;font:600 13.5px/1.25 Kanit;color:#fff;white-space:nowrap}
#stOver.o53 .o53-lane.ky p b span{color:var(--o53k2);text-shadow:0 0 8px #ff7a3c}
#stOver.o53 .o53-lane.hk p b span{color:var(--o53h2);text-shadow:0 0 8px #5fb0ff}
#stOver.o53 .o53-lane .land{stroke-width:2.2;stroke-linejoin:round}
#stOver.o53 .o53-lane.ky .land{fill:rgba(255,122,48,.2);stroke:#ffb070}
#stOver.o53 .o53-lane.hk .land{fill:rgba(110,180,255,.2);stroke:#9fd6ff}
#stOver.o53 .o53-lane .rg{fill:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.6;filter:url(#o53bl)}
#stOver.o53 .o53-lane .rc{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#stOver.o53 .o53-lane.ky .rg{stroke:#ff7a3c}#stOver.o53 .o53-lane.hk .rg{stroke:#5fb0ff}
#stOver.o53 .o53-lane .ct{fill:#fff}
/* hint + day grid (the app's own #rib buttons, restyled) */
#stOver.o53 .riblab{margin:0;font-size:11px;line-height:1.2;color:var(--mut);display:flex;align-items:center;gap:6px;white-space:nowrap}
#stOver.o53 .riblab::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--o53g);box-shadow:0 0 8px var(--o53g)}
#stOver.o53 .ribbon{margin:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;flex:none}
#stOver.o53 .ribbon button{position:relative;min-height:0;height:var(--o53t,40px);padding:0;border-radius:9px;display:grid;place-content:center;text-align:center;font:600 14.5px/1 Kanit;background:rgba(8,12,22,.72);color:#fff;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s}
#stOver.o53 .ribbon button small{display:block;font:400 9px/1.2 "IBM Plex Sans Thai";color:rgba(255,255,255,.62);margin-top:2px;white-space:nowrap}
#stOver.o53 .ribbon button.ky{border:1px solid rgba(255,170,110,.55);color:#ffe3cc;box-shadow:inset 0 -10px 16px -10px rgba(255,120,50,.6)}
#stOver.o53 .ribbon button.hk{border:1px solid rgba(150,210,255,.5);color:#e6f5ff;box-shadow:inset 0 -10px 16px -10px rgba(90,170,255,.6)}
#stOver.o53 .ribbon button.td{border-color:var(--o53g);box-shadow:0 0 0 1px var(--o53g),0 0 12px rgba(255,222,89,.55)}
#stOver.o53 .ribbon button.td::after{content:'';position:absolute;right:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--o53g);box-shadow:0 0 6px var(--o53g)}
#stOver.o53 .ribbon button:active,#stOver.o53 .ribbon button.o53-tap{transform:scale(.94)}
#stOver.o53 .ribbon button.o53-tap.ky{box-shadow:0 0 0 1px var(--o53k),0 0 16px rgba(255,140,70,.8)}
#stOver.o53 .ribbon button.o53-tap.hk{box-shadow:0 0 0 1px var(--o53h),0 0 16px rgba(90,170,255,.85)}
/* start button: neon outline, charge bar on tap */
#stOver.o53 .btn{position:relative;flex:none;width:100%;min-height:0;height:46px;margin:0;border-radius:14px;font:600 16px Kanit;color:#fff;border:1.5px solid rgba(255,255,255,.75);background:linear-gradient(90deg,rgba(255,140,70,.35),rgba(90,170,255,.35));box-shadow:0 0 18px rgba(255,160,100,.35),0 0 18px rgba(90,170,255,.35),inset 0 0 14px rgba(255,255,255,.15);text-shadow:0 0 10px rgba(255,255,255,.5);overflow:hidden}
#stOver.o53 .btn::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(255,200,150,.0),rgba(255,255,255,.45));pointer-events:none}
#stOver.o53 .btn.o53-charge::after{animation:o53charge .34s ease-in forwards}
@keyframes o53charge{to{width:100%}}
@keyframes o53spin{to{transform:rotate(360deg)}}
@keyframes o53b{50%{opacity:.35}}
/* height tiers: ≤600 (375x560) compact · ≥760 roomy (390x844, 402x874, 430x932) */
@media (max-height:600px){
 #stOver.o53{padding-top:calc(var(--safet,0px) + 62px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
 #stOver.o53 .o53{gap:5px}
 #stOver.o53 h2{font-size:21px}
 #stOver.o53 .osub{font-size:10.5px;margin-top:-2px}
 #stOver.o53 .okick{font-size:10.5px;padding:5px 9px}
 #stOver.o53 .o53-panel{--o53r:98px;min-height:100px;padding:6px 10px 6px 8px;gap:8px}
 #stOver.o53 .o53-d{padding:2px 0;gap:5px}#stOver.o53 .o53-d svg{width:20px;height:20px}
 #stOver.o53 .o53-d b{font-size:15px}#stOver.o53 .o53-d small{font-size:9px}
 #stOver.o53 .o53-lane{height:42px;grid-template-columns:48px minmax(0,1fr)}#stOver.o53 .o53-lane svg{width:48px;height:40px}
 #stOver.o53 .o53-lane p{font-size:10px;line-height:1.25}#stOver.o53 .o53-lane p b{font-size:12.5px}
 #stOver.o53 .riblab{font-size:10px}
 #stOver.o53 .ribbon{gap:4px 4px}#stOver.o53 .ribbon button{font-size:14px}#stOver.o53 .ribbon button small{font-size:8.5px}
 #stOver.o53 .btn{height:44px;font-size:15px}
}
@media (min-height:760px){
 #stOver.o53 .o53{gap:11px}
 #stOver.o53 h2{font-size:29px}
 #stOver.o53 .osub{font-size:13px}
 #stOver.o53 .okick{font-size:12px}
 #stOver.o53 .o53-panel{--o53r:min(200px,48vw,calc(var(--o53vh,100svh)*.225));grid-template-columns:minmax(0,1fr);justify-items:center;align-content:space-evenly;padding:14px 14px 12px;gap:12px}
 #stOver.o53 .o53-panel .o53-dials{width:100%;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px 14px}
 #stOver.o53 .o53-n small{font-size:12px}
 #stOver.o53 .o53-d b{font-size:20px}#stOver.o53 .o53-d small{font-size:10.5px}#stOver.o53 .o53-d svg{width:26px;height:26px}
 #stOver.o53 .o53-lane{height:60px;grid-template-columns:64px minmax(0,1fr)}#stOver.o53 .o53-lane svg{width:64px;height:56px}
 #stOver.o53 .o53-lane p{font-size:12px}#stOver.o53 .o53-lane p b{font-size:14.5px}
 #stOver.o53 .riblab{font-size:12px}
 #stOver.o53 .ribbon{gap:6px 4px}#stOver.o53 .ribbon button{--o53t:50px;font-size:17px}#stOver.o53 .ribbon button small{font-size:10px}
 #stOver.o53 .btn{height:54px;font-size:17px}
}
#stOver.o53 .o53-panel.o53-d3 .o53-dials{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px}
#stOver.o53 .o53-panel.o53-d3 .o53-d{gap:5px}#stOver.o53 .o53-panel.o53-d3 .o53-d svg{width:23px;height:23px}#stOver.o53 .o53-panel.o53-d3 .o53-d b{font-size:18px}#stOver.o53 .o53-panel.o53-d3 .o53-d small{font-size:10px}
#stOver.o53 .o53-panel.o53-row{--o53r:min(138px,33vw);grid-template-columns:var(--o53r) minmax(0,1fr);justify-items:stretch;align-content:center}
#stOver.o53 .o53-panel.o53-row .o53-dials{grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:12px 8px}
@media (min-height:900px){#stOver.o53 .ribbon button{--o53t:54px}}
@media (max-width:380px) and (max-height:759px){#stOver.o53 .o53-panel{--o53r:100px}#stOver.o53 h2{font-size:23px}}
@media (max-width:380px) and (max-height:600px){#stOver.o53 .o53-panel{--o53r:94px}#stOver.o53 h2{font-size:21px}}
/* reduced motion: static glow, no spin / pulse / charge sweep */
#stOver.o53.o53-rm .o53-sweep,#stOver.o53.o53-rm .o53-live i,#stOver.o53.o53-rm .btn::after{animation:none!important}
#stOver.o53.o53-rm .o53-sweep{display:none}
#stOver.o53.o53-rm .ribbon button{transition:none}
@media (prefers-reduced-motion:reduce){#stOver.o53 .o53-sweep,#stOver.o53 .o53-live i,#stOver.o53 .btn::after{animation:none!important}#stOver.o53 .o53-sweep{display:none}#stOver.o53 .ribbon button{transition:none}}