/* おてんき日和 ─ ナーナとバナードの横浜の天気
   1画面で完結（スクロールしない）。動きは transform / opacity だけ。画面を離れたら body.paused で止める */
:root{
  --ink:#27415a; --muted:#6b7f92; --card:#fffdf7; --line:#dfe7ee; --accent:#ff9f43; --blue:#3d8bd9; --red:#e2574c;
  --r:18px; --ease:cubic-bezier(.34,1.56,.64,1);
  --bg:#e7f5fd;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{height:100dvh;background:var(--bg);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-feature-settings:"palt";line-height:1.55;-webkit-tap-highlight-color:transparent;transition:background .6s}
body[data-band=night]{--bg:#dfe3f3}
body[data-band=evening]{--bg:#fdeee4}
body[data-kind=rain],body[data-kind=heavy],body[data-kind=thunder]{--bg:#e3eaf1}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}
button:disabled{opacity:.35;cursor:default}
img{display:block;max-width:100%}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.app{height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto;
  padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:8px}

/* ---------- 上の帯 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand-mark{width:40px;height:40px;border-radius:14px;background:#ffd46b;display:grid;place-items:center;font-size:24px;box-shadow:0 3px 0 #f0b33c;flex:none;animation:spin 18s linear infinite}
.brand strong{display:block;font-size:20px;letter-spacing:.06em;white-space:nowrap}
.brand small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.tools{display:flex;align-items:center;gap:4px;flex:none}
.place-button{display:flex;align-items:center;gap:3px;min-height:44px;padding:0 12px;border-radius:999px;background:#fff;box-shadow:0 2px 0 #c9dbe8;font-size:14px;white-space:nowrap}
.place-button b{font-size:15px}.caret{font-size:11px;color:var(--muted)}
.icon-button{min-width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;padding:2px}
.icon-button>span{font-size:20px;line-height:1.1;font-weight:700}.icon-button small{font-size:10px;color:var(--muted)}
.fetching #refresh>span{animation:spin 1s linear infinite;display:inline-block}
/* 曲（♪）：流れているあいだは音符が弾み、ナーナとバナードは曲に合わせて速めに揺れて音符を出す */
#bgm>span{display:inline-block;transition:color .3s}
.bgm-on #bgm>span{color:var(--accent);animation:beat .72s ease-in-out infinite}
.bgm-on #bgm small{color:var(--accent)}
.bgm-on .chara{animation-duration:1.44s}
.bgm-on .chara .note{display:block}

.warn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;font-size:14px;font-weight:700;color:#5a3b00;background:#ffe9a8;animation:warnIn .5s var(--ease)}
.warn>span{animation:pulse 1.4s ease-in-out infinite}
.warn.lv2{background:#ffd0cb;color:#8a1c12}.warn.lv3{background:#e4c8f5;color:#4a1270}

/* ---------- 画面（タブの中身） ---------- */
.topbar,.warn,.tabbar,.credit{flex:none}
.stage{position:relative;flex:1 1 auto;min-height:0}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;min-height:0}
.panel.from-right{animation:slideR .35s ease}.panel.from-left{animation:slideL .35s ease}

/* ---------- きょう：空 ---------- */
.scene{position:relative;flex:1 1 auto;min-height:180px;border-radius:24px;overflow:hidden;container-type:size;isolation:isolate;
  box-shadow:0 4px 0 rgba(39,65,90,.12)}
.sky{position:absolute;inset:0;background:linear-gradient(#5ab8f0,#bfe8fb 70%);transition:background .8s}
.scene[data-band=morning] .sky{background:linear-gradient(#8fd0f7,#ffe2b8 80%)}
.scene[data-band=evening] .sky{background:linear-gradient(#6a8fd6,#f7a98c 65%,#ffd59a)}
.scene[data-band=night] .sky{background:linear-gradient(#0f1a3c,#2d3f73 75%,#4a5d94)}
.scene[data-kind=cloud] .sky,.scene[data-kind=fog] .sky{background:linear-gradient(#9fb6ca,#dbe6ee 75%)}
.scene[data-kind=rain] .sky{background:linear-gradient(#6f8aa4,#b8c8d6 75%)}
.scene[data-kind=heavy] .sky,.scene[data-kind=thunder] .sky{background:linear-gradient(#46566b,#8a9bad 75%)}
.scene[data-kind=snow] .sky{background:linear-gradient(#b7c9d9,#eef4f8 75%)}
.scene[data-band=night][data-kind=cloud] .sky,.scene[data-band=night][data-kind=rain] .sky,.scene[data-band=night][data-kind=heavy] .sky,
.scene[data-band=night][data-kind=thunder] .sky,.scene[data-band=night][data-kind=fog] .sky{background:linear-gradient(#1b2438,#3c4a63 75%)}
.scene[data-band=night][data-kind=snow] .sky{background:linear-gradient(#2a3552,#5b6b8c 75%)}

/* 太陽・月・星 */
.scene .sun{position:absolute;top:8%;right:9%;width:clamp(56px,20cqw,86px);aspect-ratio:1;opacity:0;transition:opacity .8s}
.scene .sun .core{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff6b8,#ffd23f 55%,#ffb21e);box-shadow:0 0 30px 10px rgba(255,210,63,.55);animation:glow 3s ease-in-out infinite}
.scene .sun .rays{position:absolute;inset:-12%;border-radius:50%;background:repeating-conic-gradient(rgba(255,214,90,.75) 0 7deg,transparent 7deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 46%,#000 47%,#000 66%,transparent 67%);mask:radial-gradient(circle,transparent 46%,#000 47%,#000 66%,transparent 67%);animation:spin 24s linear infinite}
.scene[data-kind=sun]:not([data-band=night]) .sun{opacity:1}
.scene[data-kind=partly]:not([data-band=night]) .sun{opacity:1}
.scene[data-kind=cloud]:not([data-band=night]) .sun{opacity:.35}
.moon{position:absolute;top:9%;right:12%;width:clamp(40px,14cqw,60px);aspect-ratio:1;border-radius:50%;opacity:0;transition:opacity .8s;
  box-shadow:inset -12px -4px 0 0 #ffe59a;filter:drop-shadow(0 0 12px rgba(255,236,160,.7));animation:float 6s ease-in-out infinite}
.scene[data-band=night] .moon{opacity:1}
.scene[data-band=night][data-kind=rain] .moon,.scene[data-band=night][data-kind=heavy] .moon,.scene[data-band=night][data-kind=thunder] .moon,.scene[data-band=night][data-kind=cloud] .moon{opacity:.25}
.stars{position:absolute;inset:0 0 40% 0;opacity:0;transition:opacity .8s}
.scene[data-band=night] .stars{opacity:1}
.scene[data-band=night]:is([data-kind=rain],[data-kind=heavy],[data-kind=thunder],[data-kind=cloud],[data-kind=snow],[data-kind=fog]) .stars{opacity:.15}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:twinkle 2.4s ease-in-out infinite}
.star:nth-child(1){left:8%;top:14%}.star:nth-child(2){left:18%;top:36%;animation-delay:.6s}.star:nth-child(3){left:29%;top:10%;animation-delay:1.2s}
.star:nth-child(4){left:40%;top:28%;animation-delay:.3s}.star:nth-child(5){left:52%;top:8%;animation-delay:1.8s}.star:nth-child(6){left:61%;top:40%;animation-delay:.9s}
.star:nth-child(7){left:72%;top:52%;animation-delay:1.5s}.star:nth-child(8){left:12%;top:58%;animation-delay:2.1s}.star:nth-child(9){left:35%;top:52%;animation-delay:.2s}
.star:nth-child(10){left:47%;top:60%;animation-delay:1.1s}.star:nth-child(11){left:84%;top:66%;animation-delay:.7s}.star:nth-child(12){left:5%;top:80%;animation-delay:1.6s}
.star:nth-child(13){left:24%;top:72%;animation-delay:.4s}.star:nth-child(14){left:57%;top:78%;animation-delay:2s}.star:nth-child(15){left:66%;top:20%;animation-delay:1.3s}
.star:nth-child(16){left:90%;top:84%;animation-delay:.5s}.star:nth-child(17){left:79%;top:34%;animation-delay:1.9s}.star:nth-child(18){left:43%;top:84%;animation-delay:.8s}
.star.s1,.star.s4{width:2px;height:2px}.star.s2{box-shadow:0 0 6px #fff}
.shooting{position:absolute;top:12%;left:-20%;width:70px;height:2px;background:linear-gradient(90deg,transparent,#fff);border-radius:2px;transform:rotate(18deg);opacity:0;animation:shoot 11s ease-in 3s infinite}

/* 虹（雨上がり） */
.rainbow{position:absolute;left:-18%;top:18%;width:78%;aspect-ratio:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle,transparent 52%,rgba(155,89,182,.45) 53%,rgba(52,152,219,.45) 56%,rgba(46,204,113,.45) 59%,rgba(241,196,15,.5) 62%,rgba(230,126,34,.45) 65%,rgba(231,76,60,.45) 68%,transparent 69%)}
.rainbow.on{animation:rainbowIn 2.4s ease forwards .6s}

/* 雲：CSS だけで描く（まるを3つ） */
.cloud{position:absolute;width:110px;height:34px;border-radius:34px;background:#fff;opacity:.95;filter:drop-shadow(0 3px 0 rgba(120,140,160,.18));animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud::before{width:50px;height:50px;left:16px;top:-24px}.cloud::after{width:40px;height:40px;left:52px;top:-16px}
.cloud.c1{top:14%;animation-duration:58s;animation-delay:-20s;transform-origin:left}
.cloud.c2{top:30%;animation-duration:74s;animation-delay:-50s;scale:.8}
.cloud.c3{top:6%;animation-duration:90s;animation-delay:-8s;scale:1.25}
.cloud.c4{top:40%;animation-duration:66s;animation-delay:-36s;scale:.65}
.scene[data-kind=sun] .cloud:not(.c1){display:none}.scene[data-kind=sun] .cloud.c1{opacity:.8;scale:.7}
.scene:is([data-kind=rain],[data-kind=heavy],[data-kind=thunder]) .cloud{background:#dfe5ec}
.scene:is([data-kind=heavy],[data-kind=thunder]) .cloud{background:#b9c3ce}
.scene[data-band=night] .cloud{background:#8d9ab3;opacity:.7}

/* 雨・雪（JS が作る粒。位置と速さは CSS 変数） */
.precip{position:absolute;inset:0;pointer-events:none;z-index:3}
.drop{position:absolute;left:var(--x);top:-20px;width:2px;height:calc(16px * var(--sz,1));border-radius:2px;background:linear-gradient(transparent,rgba(255,255,255,.95));
  animation:fall var(--sp,.9s) linear var(--dl,0s) infinite}
.scene[data-kind=heavy] .drop,.scene[data-kind=thunder] .drop{rotate:14deg;width:2.5px}
.flake{position:absolute;left:var(--x);top:-12px;width:calc(7px * var(--sz,1));aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.9);
  animation:snow var(--sp,6s) linear var(--dl,0s) infinite}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.scene[data-kind=thunder] .flash{animation:flash 6s linear infinite}
.fogband{position:absolute;left:-40%;width:180%;height:16%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(10px);opacity:0}
.fogband.f1{top:48%;animation:fog 16s ease-in-out infinite alternate}.fogband.f2{top:62%;animation:fog 22s ease-in-out infinite alternate-reverse}
.scene[data-kind=fog] .fogband{opacity:1}

/* 横浜の街 */
.city{position:absolute;left:0;right:0;bottom:14%;width:100%;height:30%;z-index:1}
.city .bldg{fill:#a9cde6}.city .bridge{fill:none;stroke:#a9cde6;stroke-width:3}.city .sea{fill:#7fc3e8;animation:wave 5s ease-in-out infinite alternate}
.city .rim,.city .stand{fill:none;stroke:#a9cde6;stroke-width:3}.city line{stroke:#c3dcee;stroke-width:1.2}.city .hub{fill:#a9cde6}
.city .gondola{fill:#ff8fa3}.city .g1{fill:#ffd166}.city .g2{fill:#7bdff2}
.wheel-rot{animation:spin 50s linear infinite;transform-box:fill-box;transform-origin:center}
.scene[data-band=night] .city .bldg,.scene[data-band=night] .city .hub{fill:#3a4c7e}
.city .lights{fill:#ffe38a;opacity:0}.scene[data-band=night] .city .lights{opacity:.9;animation:winglow 3s ease-in-out infinite}
.scene[data-band=night] .city .bridge,.scene[data-band=night] .city .rim,.scene[data-band=night] .city .stand{stroke:#8fb4ff}
.scene[data-band=night] .city .rim{animation:neon 4s linear infinite}
.scene[data-band=night] .city .sea{fill:#23355f}
.scene:is([data-kind=rain],[data-kind=heavy],[data-kind=thunder],[data-kind=cloud],[data-kind=fog]):not([data-band=night]) .city .bldg{fill:#9fb3c4}
.hill{position:absolute;left:-10%;right:-10%;bottom:-16%;height:34%;border-radius:50% 50% 0 0;background:linear-gradient(#8fd67c,#6cbf5d);z-index:2}
.scene[data-band=night] .hill{background:linear-gradient(#3d6b49,#2c5237)}
.scene[data-kind=snow] .hill{background:linear-gradient(#fff,#e2edf5)}

/* ナーナとバナード */
.chara{position:absolute;bottom:4%;height:37%;z-index:5;padding:0;animation:bob 2.6s ease-in-out infinite;transform-origin:50% 100%}
.chara img{height:100%;width:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.12));pointer-events:none}
.chara.nana{left:9%}.chara.banard{right:10%;animation-delay:-1.3s}
.chara.hop{animation:hop .6s var(--ease)}
.scene[data-talking=nana] .chara.nana img,.scene[data-talking=banard] .chara.banard img{animation:talk .5s ease-in-out 3}
/* 雨の日は傘 */
.umb{position:absolute;display:none;left:50%;top:-30%;width:120%;aspect-ratio:2/1;translate:-50% 0;border-radius:50% 50% 6% 6%/100% 100% 6% 6%;
  background:repeating-conic-gradient(from -90deg at 50% 100%,#ff8fab 0 22.5deg,#ffc2d1 22.5deg 45deg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);animation:sway 2.2s ease-in-out infinite;transform-origin:50% 100%;z-index:1}
.umb::after{content:"";position:absolute;left:50%;top:92%;width:3px;height:70%;background:#6b4f3a;border-radius:2px}
.banard .umb{background:repeating-conic-gradient(from -90deg at 50% 100%,#5aa9e6 0 22.5deg,#a8d8ff 22.5deg 45deg);top:-24%}
.scene:is([data-kind=rain],[data-kind=heavy],[data-kind=thunder]) .umb{display:block}
.scene[data-kind=snow] .nana .umb{display:block;background:repeating-conic-gradient(from -90deg at 50% 100%,#c77dff 0 22.5deg,#e0b8ff 22.5deg 45deg)}
.sweat,.breath,.note{position:absolute;display:none;pointer-events:none}
.sweat{right:6%;top:18%;width:10px;height:14px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#7cc6ff;animation:sweat 1.8s ease-in infinite}
.scene[data-hot="1"] .sweat{display:block}
.breath{right:-18%;top:22%;width:18px;height:12px;border-radius:50%;background:rgba(255,255,255,.9);animation:breath 2.4s ease-out infinite}
.scene[data-cold="1"] .breath{display:block}
.note{left:-10%;top:4%;font-size:22px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);animation:note 3.4s ease-out infinite}
.chara.nana .note{left:auto;right:-8%;top:8%;animation-delay:-1.7s}
.scene:is([data-kind=sun],[data-kind=partly]) .note{display:block}

/* 吹き出し */
.bubble{position:absolute;left:5%;right:5%;bottom:47%;z-index:6;background:rgba(255,255,255,.96);border-radius:18px;padding:8px 13px 9px;box-shadow:0 6px 18px rgba(20,40,60,.18);min-height:58px}
.bubble::after{content:"";position:absolute;bottom:-9px;left:20%;width:18px;height:18px;background:inherit;rotate:45deg;border-radius:3px}
.bubble[data-who=banard]::after{left:auto;right:20%}
.bubble b{display:block;font-size:12px;color:#e07a5f;letter-spacing:.06em}.bubble[data-who=banard] b{color:#3d7fc0}
.bubble p{margin:0;font-size:15px;line-height:1.6;font-weight:700;word-break:auto-phrase}
.bubble.pop-in{animation:bubbleIn .45s var(--ease)}

/* いまの気温 */
.now{position:absolute;left:5%;top:5%;z-index:6;color:#fff;text-shadow:0 2px 8px rgba(20,40,60,.35)}
.now-temp{display:flex;align-items:flex-start;font-weight:800;line-height:1}
.now-temp span{font-size:clamp(46px,17cqw,72px);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.now-temp small{font-size:20px;margin-top:6px}
.now-sub{font-size:13px;font-weight:700;margin-top:2px}

/* ---------- きょう：下の情報 ---------- */
.today-info{flex:none;display:flex;flex-direction:column;gap:6px}
.tday{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--r);padding:8px 12px;box-shadow:0 2px 0 var(--line)}
.tday-text{flex:1;min-width:0}.tday-text b{font-size:13px;color:var(--muted)}.tday-text p{margin:0;font-size:17px;font-weight:800;line-height:1.35;word-break:auto-phrase}
.hl{display:flex;flex-direction:column;align-items:flex-end;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.hl small{font-size:11px;font-weight:700;margin:0 1px}.hl .hi{color:var(--red);font-size:22px}.hl .lo{color:var(--blue);font-size:18px}
.pops{display:grid;grid-template-columns:auto repeat(4,1fr);align-items:center;gap:6px;background:var(--card);border-radius:var(--r);padding:8px 10px;box-shadow:0 2px 0 var(--line)}
.pops-title{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;font-size:12px;font-weight:800;color:var(--muted);line-height:1.25;text-align:center}
.pop{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.pop.past{opacity:.45}
.pop-h{font-size:12px;color:var(--muted);white-space:nowrap}
.pop-bar{position:relative;width:100%;height:8px;border-radius:8px;background:#e8eef3;overflow:hidden}
.pop-bar i{position:absolute;inset:0 auto 0 0;width:100%;border-radius:8px;background:linear-gradient(90deg,#7cc6ff,#3d8bd9);transform:scaleX(var(--p,0%));transform-origin:left;transition:transform .9s var(--ease)}
.pop b{font-size:17px;font-variant-numeric:tabular-nums}.pop b small{font-size:11px}
.tmr{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.7);border-radius:14px;padding:5px 10px;font-size:13px;min-height:40px}
.tmr-l{font-weight:800;color:var(--muted)}.tmr-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.tmr-n{white-space:nowrap;font-variant-numeric:tabular-nums}.tmr .hi{color:var(--red)}.tmr .lo{color:var(--blue)}

/* ---------- アイコン（SVG）の動き ---------- */
.wx{flex:none;overflow:visible}
.wx .i-rays{transform-origin:20px 20px;animation:spin 14s linear infinite}
.wx .i-cloud{animation:cloudBob 3.2s ease-in-out infinite}
.wx .i-drops path{animation:iconDrop 1s linear infinite}.wx .i-drops .d2{animation-delay:.33s}.wx .i-drops .d3{animation-delay:.66s}
.wx .i-flakes circle{animation:iconFlake 2s ease-in-out infinite}.wx .i-flakes .d2{animation-delay:.6s}.wx .i-flakes .d3{animation-delay:1.2s}
.wx .i-bolt{animation:boltBlink 2.4s steps(1) infinite}
.wx .i-moon{animation:float 4s ease-in-out infinite}
.wx .i-twinkle{animation:twinkle 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.wx .i-sun>circle{animation:none}
.wx .i-fog path{animation:fogLine 3s ease-in-out infinite alternate}

/* ---------- 1時間 ---------- */
.h-head,.w-head{flex:none;display:flex;align-items:flex-end;gap:8px}
.h-chara{flex:none;width:44px;height:64px;animation:bob 2.6s ease-in-out infinite}.h-chara img{height:100%;width:auto}
.h-note{flex:1;margin:0;background:var(--card);border-radius:16px 16px 16px 4px;padding:8px 12px;font-size:14px;font-weight:700;box-shadow:0 2px 0 var(--line);animation:bubbleIn .5s var(--ease)}
.h-note b{display:block;font-size:11px;color:#3d7fc0}.w-head .h-note b{color:#e07a5f}
.h-wrap{position:relative;flex:1 1 auto;min-height:0;background:var(--card);border-radius:var(--r);box-shadow:0 2px 0 var(--line);overflow:hidden}
.h-scroll{height:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#c9dbe8 transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.h-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.h-track{position:relative;width:calc(var(--n,24) * var(--col,54px));height:100%;padding:0 4px}
.h-line{position:absolute;left:0;top:38%;width:100%;height:28%;overflow:visible;pointer-events:none;z-index:1;animation:lineReveal 1.6s ease both}
.h-line path{fill:none;stroke:#ff9f43;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.h-cols{position:relative;display:grid;grid-template-columns:repeat(var(--n,24),var(--col,54px));height:100%}
.h-col{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding-top:20px;animation:colIn .45s var(--ease) backwards}
.h-col.night{background:linear-gradient(rgba(61,80,130,.07),rgba(61,80,130,.04))}
.h-col.h-now{background:linear-gradient(rgba(255,212,107,.35),rgba(255,212,107,.08))}
.h-col.newday::before{content:"";position:absolute;left:0;top:2%;bottom:2%;border-left:2px dashed #cfdbe6}
.h-tag{position:absolute;top:2px;left:4px;white-space:nowrap;font-size:11px;font-weight:800;color:#8a5a00;background:#ffe8b8;border-radius:8px;padding:0 6px;z-index:2}
.h-col.newday .h-tag{background:#e3eefa;color:#3d6f9e}
.h-t{font-size:15px;font-weight:800}.h-t small{font-size:10px}
.h-col .wx{margin-top:2px}
.h-temp{position:absolute;top:calc(38% + var(--y,50%) * .28);translate:0 -130%;font-size:14px;font-weight:800;background:#fff3e2;color:#c0561a;border-radius:8px;padding:0 4px;font-variant-numeric:tabular-nums;z-index:2}
.h-pop{position:absolute;bottom:17%;height:22%;width:60%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.h-pop i{display:block;width:100%;height:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(#7cc6ff,#3d8bd9);transform:scaleY(var(--p,0%));transform-origin:bottom;transition:transform .9s var(--ease)}
.h-pop b{position:absolute;bottom:2px;font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.h-mm{position:absolute;bottom:3%;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.h-back{position:absolute;left:8px;top:8px;z-index:3;min-height:44px;padding:0 14px;border-radius:14px;background:#3d8bd9;color:#fff;font-weight:800;box-shadow:0 3px 0 #2a6aa9;animation:bubbleIn .3s var(--ease)}
.h-hint{position:absolute;right:4px;top:50%;translate:0 -50%;z-index:3;font-size:26px;font-weight:800;color:#3d8bd9;pointer-events:none;animation:nudge 1.4s ease-in-out infinite;transition:opacity .3s}
.h-hint.gone{opacity:0}
@keyframes nudge{50%{translate:6px -50%}}
.h-legend{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:12px;color:var(--muted)}
.lg-pop{display:inline-block;width:10px;height:10px;border-radius:3px;background:#3d8bd9;margin-right:3px;vertical-align:-1px}

/* ---------- 週間（1時間と同じく列を横に並べる。7日は横スクロールなしで収める） ---------- */
.w-wrap{position:relative;flex:1 1 auto;min-height:0;background:var(--card);border-radius:var(--r);box-shadow:0 2px 0 var(--line);overflow:hidden;padding:0 4px}
.w-grid{position:relative;height:100%;display:flex;flex-direction:column}
.w-bg,.w-heads,.w-temps,.w-pops{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr))}
.w-bg{position:absolute;inset:0}
.w-bgc{display:block;position:relative}
.w-bgc+.w-bgc::before{content:"";position:absolute;left:0;top:2%;bottom:2%;border-left:1px dashed #e3eaf0}
.w-bgc.wd-sat{background:rgba(61,139,217,.05)}.w-bgc.wd-sun{background:rgba(226,87,76,.05)}
.w-bgc.w-today{background:linear-gradient(rgba(255,212,107,.35),rgba(255,212,107,.08));border-radius:14px}
.w-heads{position:relative;flex:none;align-items:start;padding-top:22px}
.w-col{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;animation:colIn .45s var(--ease) backwards;animation-delay:calc(var(--i,0) * 60ms)}
.w-tag{position:absolute;top:-20px;white-space:nowrap;font-size:11px;font-weight:800;color:#8a5a00;background:#ffe8b8;border-radius:8px;padding:0 6px}
.w-col:not(.w-today) .w-tag{background:#e3eefa;color:#3d6f9e}
.w-date{font-size:14px;font-weight:800;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.w-wd{font-size:12px;font-weight:800;color:var(--muted);line-height:1.3}
.w-col.wd-sat .w-wd,.w-col.wd-sat .w-date{color:var(--blue)}.w-col.wd-sun .w-wd,.w-col.wd-sun .w-date{color:var(--red)}
.w-ico{display:grid;place-items:center;margin:2px 0}.w-ico .wx{animation:icoBob 3s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.4s)}
.w-words{font-size:12px;font-weight:800;line-height:1.3;word-break:keep-all;overflow-wrap:normal;padding:0 1px}
.w-conn{font-size:11px;font-weight:700;color:var(--muted)}
.w-chart{position:relative;flex:1 1 auto;min-height:48px;margin:24px 0 24px}
.w-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;animation:lineReveal 1.6s ease both}
.w-lines path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.w-lines .w-max{stroke:#ef7a5a}.w-lines .w-min{stroke:#5aa9e6;animation-delay:.2s}
.w-temps{position:absolute;inset:0}
.w-tcell{position:relative}
.w-hi,.w-lo{position:absolute;left:50%;top:var(--y,50%);font-size:14px;font-weight:800;border-radius:8px;padding:0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.w-hi{translate:-50% -125%;background:#fdece6;color:#c0461a}
.w-lo{translate:-50% 25%;background:#e6f1fb;color:#2a6aa9}
.w-pops{flex:none;padding-bottom:6px}
.w-pcell{display:flex;flex-direction:column;align-items:center;gap:2px}
.w-bar{display:flex;align-items:flex-end;width:56%;height:56px}
.w-bar i{display:block;width:100%;height:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(#7cc6ff,#3d8bd9);transform:scaleY(var(--p,0%));transform-origin:bottom;transition:transform .9s var(--ease)}
.w-pcell b{font-size:12px;color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap}.w-pcell small{font-size:10px}
.lg-hi,.lg-lo{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:4px;vertical-align:3px}
.lg-hi{background:#ef7a5a}.lg-lo{background:#5aa9e6}
@media (max-height:700px){ .w-bar{height:32px} .w-heads{padding-top:20px} }
@media (max-width:360px){ .w-hi,.w-lo{font-size:13px;padding:0 2px} .w-ico .wx{width:34px;height:34px} }
@keyframes icoBob{50%{translate:0 -3px}}

/* ---------- めやす ---------- */
.tips{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:8px}
.tip{background:var(--card);border-radius:var(--r);box-shadow:0 2px 0 var(--line);padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:0;overflow:hidden;
  animation:cardIn .5s var(--ease) backwards;animation-delay:calc(var(--i,0) * 80ms)}
.tip-top{display:flex;align-items:center;gap:8px}
.tip-ico{font-size:clamp(28px,9vw,40px);line-height:1;animation:iconJump 2.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * .3s)}
.tip-name{font-size:17px;font-weight:800}
.tip-meter{display:flex;gap:4px}
.tip-meter i{width:14px;height:14px;border-radius:50%;background:#e3eaf0}
.tip-meter i.on{background:var(--accent);animation:pip .4s var(--ease) backwards}
.tip-meter i.on:nth-child(2){animation-delay:.1s}.tip-meter i.on:nth-child(3){animation-delay:.2s}.tip-meter i.on:nth-child(4){animation-delay:.3s}.tip-meter i.on:nth-child(5){animation-delay:.4s}
.tip-umbrella .tip-meter i.on{background:#3d8bd9}.tip-uv .tip-meter i.on{background:#b36bd9}.tip-heat .tip-meter i.on{background:#e2574c}.tip-cold .tip-meter i.on{background:#5aa9e6}.tip-walk .tip-meter i.on{background:#43b36b}
.tip-text{font-size:15px;font-weight:700;line-height:1.5;word-break:auto-phrase}
.tips-note{flex:none;margin:0;font-size:12px;color:var(--muted);text-align:center}

/* ---------- 下のタブ ---------- */
.tabbar{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;background:#fff;border-radius:22px;padding:5px;box-shadow:0 3px 0 #c9dbe8}
.tab{min-height:56px;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12px;font-weight:800;color:var(--muted);transition:background .25s,color .25s}
.tab-ico{font-size:22px;line-height:1.1}
.tab[aria-pressed=true]{background:#ffe8b8;color:#8a5a00}.tab[aria-pressed=true] .tab-ico{animation:tabJump .5s var(--ease)}
.credit{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:var(--muted);padding:0 4px}
.credit a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:24px}

/* ---------- 場所を選ぶ ---------- */
.sheet{position:fixed;inset:0;z-index:30;background:rgba(20,40,60,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px;animation:fadeIn .25s ease}
.sheet-card{width:100%;max-width:520px;background:#fffdf7;border-radius:24px;padding:14px 14px max(14px,env(safe-area-inset-bottom));animation:sheetUp .4s var(--ease)}
.sheet-head{display:flex;align-items:center;justify-content:space-between}.sheet-head h2{margin:0;font-size:18px}
.ward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 8px}
.ward{min-height:44px;border-radius:14px;background:#eef6fc;font-weight:800;font-size:15px}
.ward.on{background:#ffd46b;box-shadow:0 2px 0 #f0b33c}
.sheet-note{margin:0;font-size:12px;color:var(--muted)}
.ward-group{grid-column:1/-1;margin:4px 2px 0;font-size:13px;font-weight:800;color:var(--muted)}
.ward.fav{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:62px;background:#fff4d6;line-height:1.25}
.ward.fav b{font-size:15px}.ward.fav small{font-size:11px;color:var(--muted);font-weight:700}.ward.fav span{font-size:14px}
.ward.fav.on{background:#ffd46b}

/* ---------- 読みこみ中・うまくいかないとき ---------- */
.loading-box,.error-box{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(#8fd3f4,#e7f5fd);border-radius:24px;font-weight:800}
.loading-box{flex-direction:row;flex-wrap:wrap;align-content:center}
.loading-box img{height:110px;width:auto;animation:hop 1s ease-in-out infinite}.loading-box .l2{animation-delay:.5s}
.loading-box p{width:100%;text-align:center;margin:0}
.error-box img{height:110px;width:auto;animation:bob 2.6s ease-in-out infinite}.error-box p{margin:0 20px;text-align:center}
.big-button{min-height:48px;padding:0 22px;border-radius:16px;background:#3d8bd9;color:#fff;font-weight:800;box-shadow:0 3px 0 #2a6aa9}
.empty{margin:auto;color:var(--muted)}

/* ---------- お知らせ ---------- */
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));translate:-50% 0;z-index:20;background:#27415a;color:#fff;border-radius:14px;padding:10px 16px;font-size:14px;max-width:calc(100% - 32px);animation:bubbleIn .35s var(--ease)}

/* ---------- ナーナとバナードのご案内 ---------- */
#coach{position:fixed;inset:0;z-index:40}
.coach-ring{position:fixed;border-radius:18px;box-shadow:0 0 0 4px #ffd46b,0 0 0 9999px rgba(20,40,60,.6);pointer-events:none;transition:left .3s,top .3s,width .3s,height .3s}
.coach-ring.none{left:50%;top:40%;width:0;height:0;box-shadow:0 0 0 9999px rgba(20,40,60,.6)}
.coach-card{position:fixed;left:12px;right:12px;margin:0 auto;max-width:480px;display:flex;align-items:flex-end;gap:8px}
.coach-card.at-bottom{bottom:max(18px,env(safe-area-inset-bottom))}.coach-card.at-top{top:max(14px,env(safe-area-inset-top))}
.coach-chara{width:auto;height:96px;flex:none;animation:hop .6s var(--ease);filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.coach-box{flex:1;min-width:0;background:#fffdf7;border-radius:20px 20px 20px 6px;padding:12px 14px 8px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.coach-box b{font-size:12px;color:#e07a5f}.coach-box p{margin:3px 0 8px;font-size:15px;line-height:1.75;font-weight:700;word-break:auto-phrase}
.coach-nav{display:flex;align-items:center;gap:6px}
.coach-skip{font-size:12px;color:var(--muted);min-height:44px;padding:0 6px;text-decoration:underline}
.coach-count{font-size:11px;color:var(--muted);margin-left:auto}
.coach-prev{min-height:44px;padding:0 12px;border-radius:12px;background:#eef6fc;font-weight:800}
.coach-next{min-height:44px;padding:0 16px;border-radius:12px;background:#3d8bd9;color:#fff;font-weight:800;box-shadow:0 3px 0 #2a6aa9}

/* ---------- 動き ---------- */
@keyframes spin{to{rotate:360deg}}
@keyframes glow{50%{box-shadow:0 0 44px 16px rgba(255,210,63,.7);scale:1.04}}
@keyframes float{50%{translate:0 -5px}}
@keyframes twinkle{50%{opacity:.2;scale:.6}}
@keyframes shoot{0%{opacity:0;translate:0 0}2%{opacity:1}8%{opacity:0;translate:420px 140px}100%{opacity:0;translate:420px 140px}}
@keyframes rainbowIn{to{opacity:.9}}
@keyframes drift{from{translate:-160px 0}to{translate:calc(100cqw + 160px) 0}}
@keyframes fall{to{transform:translateY(calc(100cqh + 40px))}}
@keyframes snow{0%{transform:translate(0,0)}25%{transform:translate(12px,25cqh)}50%{transform:translate(-8px,50cqh)}75%{transform:translate(10px,75cqh)}100%{transform:translate(-4px,calc(100cqh + 20px))}}
@keyframes flash{0%,88%,100%{opacity:0}89%{opacity:.85}91%{opacity:0}93%{opacity:.6}95%{opacity:0}}
@keyframes fog{to{translate:18% 0}}
@keyframes wave{to{translate:-25px 0}}
/* 夜の窓明かりは明るさだけ変える。twinkle（scale付き）を使うとSVGの左上を中心に縮み、明かりがビルの上を滑る（2026-09-27 本人「建物の背景がうごく」） */
@keyframes winglow{50%{opacity:.45}}
@keyframes neon{0%,100%{stroke:#8fb4ff}33%{stroke:#ff9ecf}66%{stroke:#9dffd6}}
@keyframes bob{50%{translate:0 -5px}}
@keyframes hop{0%,100%{translate:0 0;scale:1 1}30%{translate:0 -22px;scale:.95 1.06}60%{translate:0 0;scale:1.06 .94}}
@keyframes talk{50%{rotate:-4deg}}
@keyframes sway{50%{rotate:-7deg}}
@keyframes beat{50%{translate:0 -3px;scale:1.25;rotate:12deg}}
@keyframes sweat{0%{opacity:0;translate:0 0}20%{opacity:1}100%{opacity:0;translate:4px 22px}}
@keyframes breath{0%{opacity:0;scale:.4;translate:0 0}30%{opacity:.9}100%{opacity:0;scale:1.4;translate:16px -8px}}
@keyframes note{0%{opacity:0;translate:0 10px;rotate:-10deg}20%{opacity:1}70%{opacity:1;rotate:10deg}100%{opacity:0;translate:-6px -30px;rotate:0deg}}
@keyframes bubbleIn{0%{opacity:0;scale:.8;translate:0 8px}100%{opacity:1;scale:1;translate:0 0}}
@keyframes warnIn{from{opacity:0;translate:0 -8px}}
@keyframes pulse{50%{scale:1.25}}
@keyframes slideR{from{opacity:0;translate:24px 0}}
@keyframes slideL{from{opacity:0;translate:-24px 0}}
@keyframes cloudBob{50%{translate:1px -1.5px}}
@keyframes iconDrop{0%{opacity:0;translate:0 -3px}30%{opacity:1}100%{opacity:0;translate:-1px 5px}}
@keyframes iconFlake{50%{translate:1.5px 2px}}
@keyframes boltBlink{0%,60%,100%{opacity:1}62%,70%{opacity:.2}}
@keyframes fogLine{to{translate:3px 0}}
@keyframes draw{to{stroke-dashoffset:0}}
/* 折れ線は左から順に見せる（2026-09-26）。前は「線の長さ＝100」の破線で描いていたが、iPhone の Safari では
   線の太さを保つ設定（non-scaling-stroke）と重なると長さの数え方がずれて、週間の最高気温の線が途中で切れた。長さに頼らない切り抜きにする */
@keyframes lineReveal{from{-webkit-clip-path:polygon(0 -60%,0 -60%,0 160%,0 160%);clip-path:polygon(0 -60%,0 -60%,0 160%,0 160%)}
  to{-webkit-clip-path:polygon(0 -60%,100% -60%,100% 160%,0 160%);clip-path:polygon(0 -60%,100% -60%,100% 160%,0 160%)}}
@keyframes colIn{from{opacity:0;translate:0 10px}}
@keyframes rowIn{from{opacity:0;translate:-16px 0}}
@keyframes grow{from{scale:0 1}}
@keyframes cardIn{from{opacity:0;scale:.85}}
@keyframes iconJump{0%,70%,100%{translate:0 0}80%{translate:0 -6px}90%{translate:0 0}}
@keyframes pip{from{scale:0}}
@keyframes tabJump{40%{translate:0 -5px;scale:1.15}}
@keyframes fadeIn{from{opacity:0}}
@keyframes sheetUp{from{translate:0 60px;opacity:0}}

/* 見ていないときは止める */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .precip,.shooting{display:none}
  .pop-bar i,.h-pop i{transform:none}
  .h-line,.w-lines{animation:none;-webkit-clip-path:none;clip-path:none}
}

/* ---------- 小さい画面・横向き ---------- */
@media (max-height:700px){
  .app{gap:6px}.brand-mark{width:34px;height:34px;font-size:20px}.brand strong{font-size:18px}
  .tab{min-height:50px}.tab-ico{font-size:20px}
  .tday{padding:6px 10px}.tday-text p{font-size:15px}.hl .hi{font-size:19px}.hl .lo{font-size:16px}
  .pops{padding:6px 8px}.pop b{font-size:15px}
  .tmr{min-height:36px;padding:3px 10px}
  .bubble p{font-size:14px}
  .h-chara{height:52px;width:36px}.h-note{font-size:13px;padding:6px 10px}
  .tip{padding:6px 10px}.tip-text{font-size:13px}.tip-name{font-size:15px}
}
@media (max-height:600px){ .tmr,.credit>span{display:none} .credit{justify-content:flex-end} .scene{min-height:150px} }
@media (orientation:landscape) and (max-height:500px){
  .app{max-width:none}
  .credit>span{display:none}.credit{position:fixed;right:max(8px,env(safe-area-inset-right));top:max(4px,env(safe-area-inset-top));z-index:5;padding:0}
  .credit .puchi-logo img{height:18px}
  .topbar{padding-right:120px}
  #p-today{flex-direction:row}
  .scene{min-height:0;flex:1 1 55%}
  .today-info{flex:1 1 45%;justify-content:center}
  .tabbar{padding:3px}.tab{min-height:44px;flex-direction:row;gap:6px}
  .h-head,.w-head{display:none}
  .tips{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
  .w-heads{padding-top:18px}.w-ico{margin:0}.w-chart{margin:28px 0 22px}.w-bar{height:24px}.w-pcell{flex-direction:row;justify-content:center;gap:4px}.w-bar{width:14px}
  .now-temp span{font-size:40px}.now-sub{display:none}.bubble{bottom:44%;left:24%;right:4%;min-height:0;padding:6px 10px}.bubble p{font-size:13px}
}
@media (min-width:700px){ .app{max-width:640px} }

/* プチハウスのロゴ（スキル app-puchi-logo）。押すとプチハウスのホームページ */
.puchi-logo{display:inline-flex;align-items:center;min-height:32px;padding:4px 6px;border-radius:10px;flex:none;transition:transform .2s}
.puchi-logo img{display:block;height:22px;width:auto}
.puchi-logo:hover{transform:translateY(-1px)}
.puchi-logo:active{transform:scale(.96)}
.puchi-logo:focus-visible{outline:3px solid #ff9f43;outline-offset:2px}
.credit a.puchi-logo,footer a.puchi-logo{min-height:32px}
@media (max-height:700px) and (orientation:portrait){.chara{height:33%}.bubble{bottom:41%}.now-temp span{font-size:46px}}

/* ---------- 雨雲レーダー（radar-view.js）。雨雲：気象庁 高解像度降水ナウキャスト／地図：地理院タイル ---------- */
#p-radar{gap:6px}
.rm-map{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;border-radius:var(--r);background:#e9eff3;box-shadow:0 2px 0 var(--line);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.rm-map.dragging{cursor:grabbing}
.rm-pan,.rm-base,.rm-rain,.rm-marks,.rm-frame{position:absolute;inset:0}
.rm-pan{will-change:transform}
.rm-tile{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none;-webkit-user-drag:none}
.rm-frame{visibility:hidden;opacity:.78}
.rm-frame.on{visibility:visible}
.rm-pin{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-88%);pointer-events:none;z-index:2}
.rm-pin i{font-style:normal;font-size:20px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.rm-pin b{font-size:11px;line-height:1.3;background:rgba(255,255,255,.92);color:var(--ink);border-radius:8px;padding:1px 6px;white-space:nowrap;box-shadow:0 1px 0 var(--line)}
.rm-pin.home{z-index:3}.rm-pin.home i{font-size:28px;animation:pinHop 1.6s var(--ease) infinite}
.rm-pin.home b{background:#ffe8b8;color:#8a5a00;font-size:12px}
@keyframes pinHop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-6px)}}
.rm-zoom{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px;z-index:4}
.rm-zoom button{width:44px;height:44px;border-radius:14px;background:#fff;box-shadow:0 2px 0 #c9dbe8;font-size:22px;font-weight:800;line-height:1;color:var(--ink)}
.rm-zoom button:disabled{opacity:.4;cursor:default}
.rm-error{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);margin:0;z-index:5;background:#fffdf7;border-radius:14px;padding:12px;text-align:center;font-weight:700;box-shadow:0 3px 0 var(--line)}
.rm-error button{display:block;margin:8px auto 0;min-height:44px;padding:0 18px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800}
.rm-ctrl{flex:none;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;background:var(--card);border-radius:var(--r);box-shadow:0 2px 0 var(--line);padding:6px 12px 6px 6px}
.rm-play{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;font-size:20px;box-shadow:0 3px 0 #d9822b}
.rm-play:active{transform:translateY(2px);box-shadow:0 1px 0 #d9822b}
.rm-time{display:flex;flex-direction:column;align-items:flex-start;min-width:62px;line-height:1.15}
.rm-time b{font-size:20px;font-variant-numeric:tabular-nums}
.rm-tag{font-size:12px;white-space:nowrap;font-weight:800;border-radius:999px;padding:1px 8px;margin-top:2px}
.rm-tag.t-now{background:#ffe8b8;color:#8a5a00}.rm-tag.t-fut{background:#dcecff;color:#1d5fa8}.rm-tag.t-past{background:#eef1f4;color:var(--muted)}
.rm-slider{width:100%;min-width:0;height:44px;accent-color:var(--accent);margin:0}
.rm-legend{flex:none;display:flex;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--muted);flex-wrap:wrap;justify-content:center}
.rm-legend span{padding:0 4px}
.rm-legend i{width:24px;height:10px;border-radius:3px}
.rm-legend .c1{background:#f2f2ff;box-shadow:inset 0 0 0 1px #d6dbe6}.rm-legend .c2{background:#a0d2ff}.rm-legend .c3{background:#218cff}.rm-legend .c4{background:#0041ff}
.rm-legend .c5{background:#faf500}.rm-legend .c6{background:#ff9900}.rm-legend .c7{background:#ff2800}.rm-legend .c8{background:#b40068}
.rm-legend small{flex-basis:100%;text-align:center;font-size:10px}
.rm-credit{flex:none;margin:0;font-size:10px;color:var(--muted);text-align:center}
.rm-credit a{color:inherit}
@media (max-height:700px){ .rm-play{width:44px;height:44px}.rm-time b{font-size:18px}.rm-legend small{display:none} }
@media (orientation:landscape) and (max-height:500px){
  #p-radar{display:grid;grid-template-columns:1fr 240px;grid-template-rows:auto auto 1fr;gap:6px}
  #p-radar .rm-map{grid-row:1/4}
  .rm-ctrl{grid-template-columns:auto 1fr;grid-template-rows:auto auto}.rm-ctrl .rm-slider{grid-column:1/3}
  .rm-legend small{display:none}
}
@media (prefers-reduced-motion:reduce){ .rm-pin.home i{animation:none} }
body.paused .rm-pin.home i{animation-play-state:paused}
.rm-pin.nolabel b{display:none}

/* 1時間：0時から並べる（過ぎた時間はうすく）・左にも「‹」の合図・戻るボタンは向きで左右に */
.h-col.past>*{opacity:.5}
.h-col.past{background:rgba(120,140,160,.05)}
.h-hint-l{right:auto;left:4px;animation:nudgeL 1.4s ease-in-out infinite}
@keyframes nudgeL{50%{translate:-6px -50%}}
.h-back.to-right{left:auto;right:8px}
/* めやす：もとにした数字 */
.tip-basis{font-size:12px;font-weight:700;color:var(--muted);line-height:1.35;font-variant-numeric:tabular-nums}
/* 場所を選ぶ：いちばん上の「現在地」（横いっぱい） */
.ward.here{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;background:#e3f1ff;flex-wrap:wrap;line-height:1.3;padding:4px 10px}
.ward.here b{font-size:16px}.ward.here small{font-size:12px;color:var(--muted);font-weight:700}
.ward.here.on{background:#ffd46b}
/* うまくいかないときのボタン2つ */
.error-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.big-button.sub{background:#fff;color:#2a6aa9;box-shadow:0 3px 0 #c9dbe8}
/* めやす：もとにした数字の行が入っても、小さい画面で見切れないように詰める */
@media (max-height:700px){
  .tips{gap:6px}
  .tip{gap:1px;padding:6px 9px}
  .tip-top{gap:6px}.tip-ico{font-size:24px}
  .tip-meter{gap:3px}.tip-meter i{width:10px;height:10px}
  .tip-text{font-size:13px;line-height:1.35}
  .tip-basis{font-size:12px;line-height:1.25}
}
@media (max-height:600px){ .tips-note{display:none} .tip-name{font-size:14px} }
/* 上の帯：スマホの幅では題名を出さない（場所の名前に場所をゆずる。題名はホーム画面のアイコンにある）。途中で切れた「おてんき日…」を出さない */
.brand>div{min-width:0}
@media (max-width:430px){ .brand strong{display:none} .up-j{display:none} .brand small{font-size:12px;max-width:none} }
@media (max-width:360px){ .brand small{display:none} }

/* 場所を選ぶ：横浜／都道府県／さがす（2026-09-26）。スクロールさせず、ボタンで切り替える */
.sheet-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.stab{min-height:44px;border-radius:14px;background:#eef2f6;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--muted)}
.stab.on{background:#3d8bd9;color:#fff;box-shadow:0 2px 0 #2a6aa9}
.regions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:2px}
.region{min-height:36px;border-radius:12px;background:#fff;border:1.5px solid #dfe7ee;font-size:13px;font-weight:800;color:var(--ink)}
.region.on{background:#e3f1ff;border-color:#3d8bd9;color:#1d5fa8}
.ward.pref{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25;min-height:54px}
.ward.pref b{font-size:16px}.ward.pref small{font-size:11px;color:var(--muted);font-weight:700}
.pref-note{font-weight:700}
.psearch{grid-column:1/-1;display:flex;gap:6px}
.psearch input{flex:1;min-width:0;min-height:48px;border-radius:14px;border:2px solid #c9dbe8;padding:0 12px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.psearch input:focus{outline:none;border-color:#3d8bd9}
.psbtn{min-width:52px;min-height:48px;border-radius:14px;background:#3d8bd9;color:#fff;font-size:20px;box-shadow:0 2px 0 #2a6aa9}
.ward.hit{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;text-align:left;padding:6px 12px;min-height:48px;flex-wrap:wrap;line-height:1.3}
.ward.hit b{font-size:16px}.ward.hit small{font-size:12px;color:var(--muted);font-weight:700}
.place-button b{max-width:9em;overflow:hidden;text-overflow:ellipsis}
@media (max-height:700px){ .ward.pref{min-height:46px} .ward.hit{min-height:44px;padding:4px 10px} }
.pnav{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pnav button{min-height:44px;min-width:84px;border-radius:14px;background:#e3f1ff;color:#1d5fa8;font-weight:800}
.pnav button:disabled{opacity:.35}
.pnav span{font-size:13px;font-weight:800;color:var(--muted)}
.stab{white-space:nowrap}
@media (max-width:360px){ .stab{font-size:13px;gap:2px} }
/* 小さい画面では場所選びのボタンを少し低くして、1画面に収める */
@media (max-height:700px){
  .sheet-card{padding:10px 12px max(10px,env(safe-area-inset-bottom))}
  .sheet-tabs{margin-top:6px}.stab{min-height:40px}
  .ward-grid{gap:4px;margin:6px 0 4px}
  .ward{min-height:40px}.ward.fav{min-height:48px}.ward.here{min-height:44px}
  .ward-group{margin:2px 2px 0}
}
@media (max-height:620px){ #places-note{display:none} .ward{min-height:36px}.ward.fav{min-height:44px}.ward.here{min-height:40px}.stab{min-height:38px} }
/* 横向き：場所選びは6列にして、たてに収める */
@media (orientation:landscape) and (max-height:500px){
  .sheet{padding:8px}
  .sheet-card{max-width:780px}
  .ward-grid{grid-template-columns:repeat(6,1fr)}
  .ward.fav{grid-column:span 2}
  .regions{grid-template-columns:repeat(6,1fr)}
  .ward.pref{grid-column:span 1}
  .ward{min-height:34px}.ward.here{min-height:38px}.ward.fav{min-height:42px}.ward-grid{gap:3px}
}

/* ---------- 雨量（2026-09-29 本人「台風や降水量もみれるようにして」）。数字は1時間ごとの雨量を足したもの ---------- */
.pops-mm{color:#1d5fa8}
.pop-mm{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.pop-mm small{font-size:10px;margin-left:1px}
.pop-mm.wet,.w-mm.wet{color:#1d5fa8;font-weight:800}
.h-mm.wet{color:#1d5fa8;font-weight:800;background:#dcecff;border-radius:8px;padding:0 5px}
.h-mm.hard{color:#fff;background:#2a6aa9}
.w-mm{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}
.w-mm small{font-size:10px}
.lg-mm{display:inline-block;width:10px;height:10px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#1d5fa8;margin-right:4px;vertical-align:-1px}
@media (max-width:360px){ .w-mm small{display:none} .w-legend{gap:2px 8px} }

/* ---------- 台風（typhoon-view.js）。台風：気象庁 台風情報／地図：地理院タイル ---------- */
/* きょうの空の右上の札（台風が出ているときだけ）。押すと「台風」の画面へ。空の中に置くので画面の高さを使わない */
.tybar{position:absolute;top:8px;right:8px;z-index:7;display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#3b2a7a;font-size:14px;font-weight:800;box-shadow:0 3px 0 rgba(59,42,122,.25);animation:bubbleIn .5s var(--ease)}
.tybar[hidden]{display:none}
.tybar .ty-ico{font-size:20px;line-height:1;animation:spin 6s linear infinite reverse}
.tybar b{white-space:nowrap}
.tybar .ty-go{font-size:16px;line-height:1}
.tab{position:relative}
.tab.alert::after{content:"";position:absolute;top:6px;right:calc(50% - 20px);width:10px;height:10px;border-radius:50%;background:#e2574c;box-shadow:0 0 0 2px #fff}
#p-typhoon{gap:6px}
.ty-note span{display:inline}
.ty-pick{flex:none;display:flex;gap:6px}
.ty-pick[hidden]{display:none}
.ty-one{flex:1;min-height:44px;border-radius:14px;background:#fff;box-shadow:0 2px 0 var(--line);font-size:14px;font-weight:800;color:var(--ink)}
.ty-one[aria-pressed=true]{background:#e6e0fb;color:#3b2a7a}
.ty-map{min-height:120px}
.ty-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ty-gale{fill:rgba(255,214,70,.22);stroke:#d9a300;stroke-width:1.5}
.ty-storm{fill:rgba(226,87,76,.25);stroke:#d1362b;stroke-width:1.5}
.ty-stormwarn{fill:none;stroke:#d1362b;stroke-width:1.5}
.ty-circle{fill:rgba(255,255,255,.35);stroke:#5b6b7a;stroke-width:1.5;stroke-dasharray:5 4}
.ty-circle.on{fill:rgba(124,92,214,.18);stroke:#5a3fc0;stroke-width:2.5;stroke-dasharray:none}
.ty-tan{fill:none;stroke:#5b6b7a;stroke-width:1.2}
.ty-track{fill:none;stroke:#2a6aa9;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ty-track.pre{stroke:#7f93a6;stroke-width:2;stroke-dasharray:3 5}
.ty-fc{fill:none;stroke:#5a3fc0;stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round}
.ty-dot{fill:#fff;stroke:#5a3fc0;stroke-width:2}
.ty-dot.now{fill:#e2574c;stroke:#fff}
.ty-dot.on{fill:#5a3fc0;stroke:#fff;stroke-width:2.5}
.ty-eye{position:absolute;translate:-50% -50%;pointer-events:none;z-index:3}
.ty-eye i{display:block;font-style:normal;font-size:46px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2));animation:spin 5s linear infinite reverse}
.ty-label{position:absolute;translate:0 -50%;pointer-events:none;z-index:2}
.ty-label b{display:block;font-size:11px;line-height:1.4;font-weight:800;white-space:nowrap;background:rgba(255,255,255,.92);color:var(--ink);border-radius:8px;padding:0 6px;box-shadow:0 1px 0 var(--line)}
.ty-label.on{z-index:3}.ty-label.on b{background:#5a3fc0;color:#fff;font-size:12px}
.ty-ctrl{flex:none;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:8px;background:var(--card);border-radius:var(--r);box-shadow:0 2px 0 var(--line);padding:4px 6px}
.ty-prev,.ty-next{width:48px;height:44px;border-radius:14px;background:var(--accent);color:#fff;font-size:24px;font-weight:800;line-height:1;box-shadow:0 3px 0 #d9822b}
.ty-prev:disabled,.ty-next:disabled{opacity:.35;box-shadow:none;cursor:default}
.ty-when{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;line-height:1.15}
.ty-when b{font-size:18px;font-variant-numeric:tabular-nums}
.ty-when .rm-tag{margin-top:0}
.ty-facts{flex:none;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ty-facts li{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;background:var(--card);border-radius:14px;box-shadow:0 2px 0 var(--line);padding:4px 2px;line-height:1.25}
.ty-facts small{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.ty-facts b{font-size:17px;font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:anywhere}
.ty-facts li:first-child b,.ty-facts li:last-child b{font-size:14px}
.ty-facts span{font-size:11px;color:var(--muted);white-space:nowrap}
.ty-where{flex:none;margin:0;font-size:12px;font-weight:700;color:var(--ink);text-align:center;line-height:1.4}
.ty-legend{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;font-size:11px;color:var(--muted)}
.ty-legend i{display:inline-block;vertical-align:-1px;margin-right:3px}
.lg-track{width:14px;height:3px;border-radius:2px;background:#2a6aa9;vertical-align:3px!important}
.lg-circle{width:11px;height:11px;border-radius:50%;border:1.5px dashed #5b6b7a}
.lg-gale{width:11px;height:11px;border-radius:50%;background:rgba(255,214,70,.4);border:1.5px solid #d9a300}
.lg-storm{width:11px;height:11px;border-radius:50%;background:rgba(226,87,76,.35);border:1.5px solid #d1362b}
.ty-empty{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--card);border-radius:var(--r);box-shadow:0 2px 0 var(--line);text-align:center;padding:16px}
.ty-empty p{margin:0;font-size:17px;font-weight:800}
.ty-empty small{font-size:12px;color:var(--muted)}
.ty-big{font-size:64px;line-height:1}
.ty-big.spin{animation:spin 3s linear infinite reverse}
.ty-big.calm{animation:icoBob 3s ease-in-out infinite}
@media (max-height:700px){
  .ty-facts b{font-size:15px}.ty-facts li:first-child b,.ty-facts li:last-child b{font-size:13px}
  .ty-when b{font-size:16px}
  .ty-legend{display:none}
}
@media (max-width:360px){ .tab{font-size:11px} .tab-ico{font-size:20px} .ty-facts{gap:4px} .ty-facts span{font-size:10px} }
/* とても低い画面（高さ600px以下）：キャラのひと言をたたんで、表と地図を先に入れる */
@media (max-height:600px) and (orientation:portrait){
  #p-week .w-head,#p-tips .w-head{display:none}
  .w-bar{height:24px}
  .tip{padding:4px 8px;gap:2px}.tip-text{line-height:1.4}
  #p-typhoon .h-chara,.ty-note b,.ty-where,.ty-note:not(.solo) .ty-n1{display:none}
  .ty-note{font-size:12px;padding:6px 10px;border-radius:14px}
  .ty-facts li{padding:2px}
}
@media (orientation:landscape) and (max-height:500px){
  #p-typhoon{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:repeat(5,min-content) minmax(0,1fr);column-gap:8px}
  #p-typhoon[hidden]{display:none}
  #p-typhoon .ty-map{grid-column:1;grid-row:1/-1;min-height:0}
  #p-typhoon>*:not(.ty-map){grid-column:2}
  #p-typhoon .h-head{display:flex}#p-typhoon .h-chara{display:none}
  .ty-note b,.ty-legend,.ty-where,.ty-note:not(.solo) .ty-n1{display:none}
  .ty-note{font-size:12px;line-height:1.35;padding:4px 10px}
  .ty-facts{gap:4px}.ty-facts li{padding:2px 0}.ty-facts b{font-size:14px}.ty-facts li:first-child b,.ty-facts li:last-child b{font-size:12px}
  #p-typhoon{gap:4px 8px}
  /* 週間：日付と曜日を1行に・絵を小さく・確率と雨量を1行に・凡例はたたむ（警報の帯が出ていても入るように） */
  .warn{padding:3px 12px;font-size:12px}
  .w-col{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:3px}
  .w-ico,.w-words{flex-basis:100%}.w-ico .wx{width:28px;height:28px}
  .w-chart{margin:20px 0 18px;min-height:40px}
  .w-pcell{flex-wrap:nowrap}.w-bar{width:10px;height:18px}.w-pops{padding-bottom:2px}
  .w-legend,.h-legend{display:none}
  #p-typhoon .ty-empty,#p-typhoon .w-head{grid-column:1/-1}
}
body.paused .tybar .ty-ico,body.paused .ty-eye i,body.paused .ty-big{animation-play-state:paused}

/* 台風の地図：ボタンは横に並べる（地図が低い画面でも3つとも入る） */
.ty-map .rm-zoom{flex-direction:row}
.scene .tybar{min-height:44px}
/* 2026-10-21 本人「台風のイラスト小さくてみにくい」：低めの画面では「中心：…暴風域…」の長い行をたたんで、地図を大きく（同じことは表と吹き出しにある） */
@media (max-height:760px) and (orientation:portrait){ #p-typhoon .ty-where{display:none} }
/* 2026-10-21 低い画面では「いま・体感◯℃」を気温の横に並べて、吹き出しを上へ。そのぶん2羽を大きく出せる */
@media (max-height:760px) and (orientation:portrait){ .now{display:flex;align-items:flex-end;gap:8px} .now-sub{margin:0 0 6px} }
/* 2026-10-30 アプリに戻ったとき、古い天気は取り直すあいだ うすく出す（新しい天気が届いたら戻る） */
.stale main{opacity:.45;filter:grayscale(.5);transition:opacity .2s}
@media (prefers-reduced-motion:reduce){.stale main{transition:none}}