:root{
  --bg:#02050a;
  --surface:rgba(7,13,22,.82);
  --surface-strong:rgba(8,16,27,.94);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.06);
  --text:#f4f8ff;
  --muted:#8190a6;
  --sun:#ffb347;
  --sun-hot:#ff7a45;
  --moon:#9fc6ff;
  --calm:#38f2bd;
  --warn:#ffc857;
  --alert:#ff4778;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);background:transparent;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── 宇宙ステージ ─────────────────────────────── */
.space-stage{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(148deg,#040a12 0%,#02050a 58%,#07030b 100%)}
#nebula,#space{position:absolute;inset:0;display:block;width:100%;height:100%}
/* WebGL 星雲を止めたぶんの色味を CSS で補う（JS の nebula() を参照） */
#nebula{opacity:1;background:
  radial-gradient(58% 42% at 22% 14%,rgba(70,110,220,.22),transparent 62%),
  radial-gradient(52% 40% at 82% 30%,rgba(120,70,200,.16),transparent 64%),
  radial-gradient(70% 50% at 50% 96%,rgba(30,90,180,.14),transparent 70%)}

/* ヘッダーの見た目・サイズ・固定配置は common.css が正。ここでは触らない。
   フッターだけ固定背景より前に出す */
.site-footer{position:relative;z-index:2}
.space-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 36%,transparent 0,rgba(2,5,10,.08) 32%,rgba(2,5,10,.74) 100%)}

.shell{position:relative;z-index:1;width:min(1120px,calc(100% - 28px));margin:0 auto;
  padding:clamp(10px,2.4vw,26px) 0 clamp(56px,9vw,80px)}

/* ── ヒーロー（AIコスト気象台・感情気象台と同じ型）───────── */
.hero{max-width:860px;margin:0 auto 22px;text-align:center;padding:0}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 18px;
  color:#91a3bb;font-size:11px;font-weight:700;letter-spacing:.22em}
.eyebrow span{width:8px;height:8px;border-radius:50%;background:var(--calm);
  box-shadow:0 0 18px var(--calm);animation:live 2s ease-in-out infinite}
@keyframes live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.hero h1{margin:0;font-size:clamp(35px,6.4vw,64px);font-weight:300;line-height:1.08;letter-spacing:-.045em}
.hero-lead{display:block;margin-bottom:10px;color:#b8c5d6;font-size:clamp(15px,1.9vw,22px);
  font-weight:300;line-height:1.4;letter-spacing:.08em}
.hero h1 strong{display:block;font-weight:760;
  background:linear-gradient(90deg,#fff 0%,#9fc5ff 46%,#ffc08a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{max-width:600px;margin:20px auto 0;color:#a8b5c7;font-size:clamp(13px,1.7vw,16px);line-height:1.8}
.stamp{margin:16px 0 0;color:#fff;font-size:9px;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;line-height:1.5;text-align:center}
@media (max-width:760px){
  .hero h1{font-size:clamp(30px,10vw,46px)}
  .hero-copy{max-width:340px}
}
.skeleton{opacity:.5}
.stale-flag{display:inline-block;margin-left:.6em;padding:.14em .6em;border:1px solid rgba(255,200,87,.45);
  border-radius:99px;background:rgba(255,200,87,.1);color:var(--warn);font-size:10px;letter-spacing:.06em}

/* ── 太陽 / 月 の左右ブロック ───────────────────── */
/* 太陽と月は常に左右2列。スマホでも縦積みにせず、要素側を縮める */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,2.6vw,24px);margin-top:clamp(8px,2vw,18px)}

.orb-panel{position:relative;border:1px solid var(--line);border-radius:22px;background:var(--surface);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;
  padding:clamp(18px,2.6vw,26px) clamp(14px,2.4vw,24px) clamp(16px,2.4vw,22px)}
.orb-panel::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.sun-panel{background:
  radial-gradient(420px 240px at 50% -10%,rgba(255,150,60,.14),transparent 68%),var(--surface)}
.moon-panel{background:
  radial-gradient(420px 240px at 50% -10%,rgba(130,180,255,.13),transparent 68%),var(--surface)}

.orb-head{display:flex;align-items:baseline;gap:clamp(6px,1.6vw,12px);flex-wrap:wrap}
.orb-kicker{font-size:clamp(8px,1.8vw,9px);letter-spacing:.3em;color:var(--muted);text-indent:.3em}
.orb-head h2,.orb-title{margin:0;font-size:clamp(12px,2.8vw,15px);font-weight:300;
  letter-spacing:.2em;text-indent:.2em;color:var(--text)}
.orb-panel{padding:0}

/* パネル全体をタップ領域にする */
.orb-open{display:block;width:100%;border:0;background:none;color:inherit;font:inherit;
  text-align:left;cursor:pointer;padding:clamp(12px,2.4vw,26px) clamp(9px,2vw,24px) clamp(11px,2.2vw,22px);
  border-radius:22px;transition:background .3s ease}
.orb-open:hover{background:rgba(255,255,255,.028)}
.orb-open:focus-visible{outline:2px solid rgba(159,198,255,.6);outline-offset:-3px}
.orb-more{display:block;margin-top:clamp(8px,1.6vw,12px);text-align:center;
  font-size:clamp(8px,1.9vw,10px);letter-spacing:.16em;color:rgba(159,198,255,.55)}
.orb-open:hover .orb-more{color:var(--text)}

/* 天体はパネル幅に追従させる。広い画面では固定300pxだと小さく見える */
.orb-stage{position:relative;display:block;margin:clamp(8px,2vw,18px) auto clamp(10px,2vw,16px);
  width:min(100%,clamp(150px,30vw,380px));aspect-ratio:1}
.orb-stage canvas{display:block;width:100%;height:100%;position:relative;z-index:2;
  cursor:grab;touch-action:none}
.orb-stage canvas:active{cursor:grabbing}
/* ドラッグできることの手掛かり。触ると消える。
   コロナが縁まで届くので、球に重ねず枠の下へ出す */
.orb-hint{position:absolute;left:50%;top:100%;margin-top:3px;transform:translateX(-50%);z-index:3;
  font-size:9px;letter-spacing:.14em;color:rgba(159,198,255,.55);white-space:nowrap;
  transition:opacity .5s ease;pointer-events:none}
.orb-stage.touched .orb-hint{opacity:0}
/* 地球正面へ戻す */
.orb-reset{position:absolute;right:0;top:0;z-index:3;padding:5px 9px;border-radius:99px;
  border:1px solid var(--line);background:rgba(0,0,0,.45);color:var(--muted);
  font-size:9px;letter-spacing:.1em;cursor:pointer;opacity:0;transition:opacity .35s ease;
  font-family:inherit}
.orb-stage.touched .orb-reset{opacity:1}
.orb-reset:hover{color:var(--text);border-color:rgba(255,255,255,.28)}
.orb-ring{position:absolute;inset:6%;border-radius:50%;z-index:1;pointer-events:none;
  transition:box-shadow .9s ease,opacity .9s ease}
.sun-panel .orb-ring{box-shadow:0 0 90px -10px var(--sun),0 0 180px -30px var(--sun-hot)}
.moon-panel .orb-ring{box-shadow:0 0 70px -14px var(--moon)}

/* 読み取り値 */
.orb-readout{display:grid;gap:clamp(6px,1.4vw,10px)}
.metric{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(5px,1.2vw,10px);padding:clamp(7px,1.6vw,11px) clamp(8px,1.6vw,13px);
  border:1px solid var(--line-soft);border-radius:11px;background:rgba(0,0,0,.24)}
.metric .k{font-size:clamp(8px,1.9vw,10px);letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.metric .v{font-size:clamp(15px,3.6vw,24px);font-weight:300;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--c,var(--text));text-shadow:0 0 22px var(--c,transparent);justify-self:start;white-space:nowrap}
.metric .s{font-size:clamp(8px,1.9vw,11px);color:var(--muted);letter-spacing:.04em;text-align:right;white-space:nowrap}
.metric-foot{grid-column:1/-1;margin-top:2px;font-size:clamp(8px,1.8vw,10px);
  color:rgba(129,144,166,.72);letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1.6}

/* 黒点一覧 */
.spot-list{margin-top:clamp(6px,1.4vw,10px);border:1px solid var(--line-soft);border-radius:11px;
  background:rgba(0,0,0,.24);padding:clamp(7px,1.6vw,11px) clamp(8px,1.6vw,13px)}
.spot-list h3{margin:0 0 7px;font-size:clamp(8px,1.9vw,10px);font-weight:400;letter-spacing:.1em;color:var(--muted)}
.spot-row{display:flex;align-items:baseline;gap:6px;font-size:clamp(8px,1.9vw,10.5px);
  line-height:1.9;color:rgba(200,215,235,.85);font-variant-numeric:tabular-nums}
.spot-row .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--sun);box-shadow:0 0 8px var(--sun);transform:translateY(-1px)}
.spot-row .id{color:var(--text);opacity:.85}
.spot-row .loc{color:var(--muted);margin-left:auto;white-space:nowrap}
.spot-empty{font-size:clamp(8px,1.9vw,10.5px);color:var(--muted)}

/* 狭い画面では補足ラベルを折り返す。
   3カラムのまま nowrap にすると「欠ける途中」や「20:35 / 08:04」が枠外へ溢れる */
@media (max-width:620px){
  .metric{grid-template-columns:auto 1fr}
  .metric .s{grid-column:1/-1;text-align:left;white-space:normal;
    color:rgba(159,198,255,.7);letter-spacing:.06em}
  .metric .v{white-space:normal;word-break:keep-all}
}
.metric{overflow:hidden}

/* 極端に狭い端末（iPhone SE 等 320px）での詰め */
@media (max-width:400px){
  /* 「ダッシュボー / ド」のような語中改行を防ぐ */
  .hero h1{letter-spacing:.08em;text-indent:.08em;word-break:keep-all;overflow-wrap:break-word}
  .hero-lead{letter-spacing:.02em}
  .orb-head h2{letter-spacing:.12em;text-indent:.12em}
  .season-head h2,.comment h2{letter-spacing:.12em;text-indent:.12em}
  .metric{gap:3px;padding:6px 8px;border-radius:10px}
  .metric-foot{line-height:1.5}
  .spot-list{padding:6px 8px}
  .spot-row{gap:4px}
  .orb-panel{padding:10px 7px 9px}
  .duo{gap:7px}
}
.trend-up{color:var(--alert)}
.trend-down{color:var(--calm)}
.trend-flat{color:var(--muted)}

/* ── 季節盤 ───────────────────────────────────── */
/* #season-fx は盤より 28% 大きい。クリップしないとスマホで横スクロールが出る */
.season{overflow:hidden;margin-top:clamp(16px,3vw,28px);border:1px solid var(--line);border-radius:22px;
  background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:clamp(18px,2.8vw,28px) clamp(14px,2.6vw,26px)}
.season-head h2{margin:8px 0 0;font-size:15px;font-weight:300;letter-spacing:.24em;text-indent:.24em}
/* 盤の中身（canvas と .season-stage）は全部 absolute なので、列幅を auto にすると
   中身が幅を作らず .season-dial が 0×0 に潰れる。列幅を先に決めること。 */
.season-body{display:grid;grid-template-columns:clamp(230px,30vw,400px) 1fr;gap:clamp(18px,3.4vw,36px);align-items:center;
  margin-top:clamp(14px,2.4vw,22px)}
@media (max-width:760px){.season-body{grid-template-columns:1fr;justify-items:center}
  .season-dial{width:min(100%,340px)}}
.season-dial{position:relative;width:100%;aspect-ratio:1;
  perspective:1000px;perspective-origin:50% 56%}
/* 人魂は盤からはみ出して漂ってほしいので、キャンバスは盤より一回り大きく取る */
#season-fx{position:absolute;inset:-14%;width:128%;height:128%;display:block;z-index:0;pointer-events:none}
/* 傾きは JS がスクロール位置から毎フレーム決める（画面中央で起き上がり、
   離れるほど倒れる）。CSS 側は既定を「起きている」ままにしておくこと。
   JS が落ちた端末でも普通に見えるようにするため。
   transition は付けない。毎フレームの上書きと喧嘩して動きが鈍る。 */
.season-stage{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;
  will-change:transform;transform-origin:50% 50%}
.season-dial svg{position:relative;z-index:1}
.season-center{z-index:2}
.season-dial svg{width:100%;height:100%;display:block;overflow:visible}
.season-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
/* font-weight:200 ＋ 大きなぼかし影は禁止。和文の細ウェイトは縦画が
   背景に溶けて字が割れて見える（実際に「大暑」が壊れた）。
   中央ディスクの上に、中太・影なしで置く。 */
.season-center b{display:block;font-size:clamp(26px,5.6vw,34px);font-weight:500;
  letter-spacing:.12em;text-indent:.12em;color:#fff;
  /* 中太なら発光を乗せても字は割れない。細ウェイト＋大ぼかしが禁止なだけ */
  text-shadow:0 0 2px rgba(200,232,255,.55),0 0 20px rgba(90,170,255,.42)}
.season-center span{display:block;margin-top:9px;font-size:10.5px;color:rgba(200,222,255,.62);
  letter-spacing:.12em;font-variant-numeric:tabular-nums}
.season-meta{display:grid;gap:10px;width:100%}
.season-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 13px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(0,0,0,.24)}
.season-row .k{font-size:10px;letter-spacing:.14em;color:var(--muted)}
.season-row .v{font-size:14px;font-variant-numeric:tabular-nums}
.season-bar{height:3px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.season-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--calm),var(--moon));transition:width 1s ease}

/* ── コメント ─────────────────────────────────── */
.comment{margin-top:clamp(16px,3vw,28px);border:1px solid var(--line);border-radius:22px;
  background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:clamp(18px,2.8vw,28px) clamp(14px,2.6vw,26px)}
.comment h2{margin:8px 0 16px;font-size:15px;font-weight:300;letter-spacing:.24em;text-indent:.24em}
.comment blockquote{margin:0;padding:clamp(14px,2.4vw,20px) clamp(14px,2.4vw,22px);
  border-left:2px solid rgba(159,198,255,.4);border-radius:0 14px 14px 0;background:rgba(0,0,0,.26);
  font-size:clamp(13px,2.7vw,15px);line-height:2.1;letter-spacing:.045em;color:#e6f1ff}

/* ── 観測根拠・出典 ───────────────────────────── */
.evidence{margin-top:clamp(16px,3vw,28px);border:1px solid var(--line);border-radius:22px;
  background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.evidence summary{padding:18px 22px;cursor:pointer;color:#a9b8ca;font-size:12px;font-weight:700;
  letter-spacing:.08em}
.evidence summary::marker{color:var(--calm)}
.evidence-body{max-width:900px;margin:0 auto;padding:0 22px 22px;color:#8fa1b7;font-size:11px;line-height:1.9}
.evidence-body h2{margin:2px 0 18px;color:#eef5ff;font-size:16px;font-weight:400;
  letter-spacing:.06em}
.evidence-body p{margin:0 0 1.35em}
.evidence-body p:last-child{margin-bottom:0}
.about{margin-top:clamp(16px,3vw,28px);border-top:1px solid var(--line);padding-top:clamp(18px,3vw,26px)}
.source-list{margin:14px 0 0;padding:0;list-style:none}
.source-list li{font-size:11px;line-height:2;color:rgba(129,144,166,.85);letter-spacing:.03em}
.source-list li b{color:var(--text);font-weight:300;margin-right:.7em;opacity:.8}

.error-panel{margin:20px 0;padding:14px;border:1px solid var(--alert);border-radius:12px;
  color:#ffd0dd;font-size:12px;text-align:center;background:rgba(60,10,25,.4)}

@media (prefers-reduced-motion:reduce){
  .orb-ring,.season-bar i{transition:none}
}

/* ── 天体モーダル ─────────────────────────────── */
.modal{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(1,3,7,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .28s ease}
.modal-body{position:relative;z-index:1;width:min(560px,100%);max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:24px;
  background:radial-gradient(600px 300px at 50% -8%,rgba(120,170,255,.13),transparent 66%),
    linear-gradient(180deg,rgba(9,18,30,.98),rgba(4,9,16,.98));
  padding:clamp(20px,4vw,32px) clamp(16px,3.4vw,30px) clamp(18px,3.4vw,28px);
  animation:riseIn .34s cubic-bezier(.2,.8,.3,1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal-body h2{margin:8px 0 0;font-size:clamp(17px,4vw,22px);font-weight:200;
  letter-spacing:.22em;text-indent:.22em}
.modal-close{position:absolute;top:10px;right:12px;z-index:2;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.45);
  color:var(--muted);font-size:19px;line-height:1;cursor:pointer;font-family:inherit}
.modal-close:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.modal-stage{position:relative;margin:clamp(12px,2.6vw,20px) auto clamp(24px,4vw,32px);
  width:min(100%,380px);aspect-ratio:1;touch-action:none}
.modal-stage canvas{display:block;width:100%;height:100%;position:relative;z-index:2;
  cursor:grab;touch-action:none}
.modal-stage canvas:active{cursor:grabbing}
.modal-ring{position:absolute;inset:6%;border-radius:50%;z-index:1;pointer-events:none;
  transition:box-shadow .9s ease}
.modal-readout{display:grid;gap:9px}
body.modal-open{overflow:hidden}

/* ── 季節盤の神秘的な演出 ───────────────────────── */
.season-dial::before{content:"";position:absolute;inset:12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(120,190,255,.06),rgba(80,150,255,.02) 46%,transparent 72%);
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
.season-dial svg .rot-slow{transform-origin:160px 160px;animation:spin 220s linear infinite}
.season-dial svg .rot-rev{transform-origin:160px 160px;animation:spin 340s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.season-center b{color:#fff}
@media (prefers-reduced-motion:reduce){
  .season-dial::before,.season-dial svg .rot-slow,.season-dial svg .rot-rev{animation:none}
  .season-stage{transform:none!important;opacity:1}
  .modal-backdrop,.modal-body{animation:none}
}

/* common.css の .site-footer は position:fixed / z-index:10000 で、
   スクロールしても画面下に貼り付いたまま本文（グラフ等）に重なる。
   このページでは通常フローに戻して最下部に置く。 */
.site-footer{position:static;z-index:1;margin-top:24px;padding-bottom:14px;opacity:.7}


/* ── カードの数値は中央寄せ ──────────────────────
   .metric は3列グリッドで左右に散っていた。読む順（見出し→値→補足）が
   縦に並ぶほうが視線が迷わないので、ブロックの中央寄せに変える。 */
.metric{display:block;text-align:center}
.metric .k{display:block}
.metric .v{display:block;margin-top:3px;justify-self:auto;white-space:normal}
.metric .s{display:block;margin-top:2px;text-align:center;white-space:normal}
.metric-foot{display:block;margin-top:3px;text-align:center}

/* カードの主役。太陽＝危険度、月＝満月までの日数 */
.metric-hero{padding:clamp(11px,2.4vw,16px) clamp(8px,1.6vw,13px);border-radius:13px;
  background:rgba(0,0,0,.30)}
.metric-hero .k{font-size:clamp(8px,1.9vw,10px);letter-spacing:.16em}
.metric-hero .v{margin-top:6px;font-size:clamp(28px,7.4vw,44px);font-weight:400;line-height:1.04;
  letter-spacing:.04em;text-shadow:0 0 32px var(--c,transparent)}
.metric-hero .v small{font-size:.40em;letter-spacing:.06em;margin-left:.14em;opacity:.85}
.metric-hero .s{margin-top:7px;font-size:clamp(9px,2vw,11.5px);line-height:1.7}
@media (max-width:380px){
  .metric-hero .v{font-size:26px}
}


/* ── モーダルはスクロールさせない ──────────────────
   天体を左・数値を右の2カラムにして縦を詰める。縦積みのままだと
   スマホでは必ずスクロールが出て、数値が初手で見えない。 */
.modal-body{width:min(780px,100%);padding:clamp(16px,3vw,26px) clamp(14px,2.8vw,26px) clamp(14px,2.6vw,22px)}
.modal-body h2{margin:4px 0 0}
.modal-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(10px,2.2vw,20px);align-items:start;margin-top:clamp(8px,1.8vw,14px)}
.modal-stage{width:100%;max-width:300px;margin:0 auto}

/* 数値も2列。主役と黒点一覧だけ横いっぱいに使う */
.modal-readout{grid-template-columns:1fr 1fr;gap:7px}
.modal-readout .metric-hero,
.modal-readout .metric-wide,
.modal-readout .spot-list{grid-column:1/-1}
.modal-readout .metric{padding:7px 8px;border-radius:9px}
.modal-readout .metric .v{font-size:clamp(13px,2.8vw,18px)}
.modal-readout .metric .k{font-size:9px}
.modal-readout .metric .s{font-size:9px}
.modal-readout .metric-foot{font-size:9px;line-height:1.5}
.modal-readout .metric-hero{padding:10px 10px 11px}
.modal-readout .metric-hero .v{font-size:clamp(24px,5.2vw,34px);margin-top:4px}
.modal-readout .metric-hero .s{margin-top:5px;font-size:10px}
/* 黒点は数が読めない日があるので、ここだけ内側でスクロールさせる */
.modal-readout .spot-list{margin-top:2px;max-height:132px;overflow-y:auto;-webkit-overflow-scrolling:touch}

@media (max-width:640px){
  .modal-grid{grid-template-columns:1fr;gap:10px}
  .modal-stage{max-width:190px}
  .modal-readout .metric-hero .v{font-size:26px}
}
@media (max-width:380px){
  .modal-stage{max-width:150px}
  .modal-readout{gap:6px}
}


/* ── 盤の上に立つ文字とマーカー ──────────────────
   盤は rotateX で倒れる。文字側で -rotateX を掛けて打ち消すと、
   文字だけが起き上がって盤に立っているように見える。
   SVG の <text> に 3D transform を掛けても合成が効かないので HTML で重ねる。 */
.season-stage{--ct:0deg}
.season-billboards{position:absolute;inset:0;z-index:3;pointer-events:none;
  transform-style:preserve-3d;font-size:11px}
/* translateZ で盤の法線方向へ浮かせてから起こす。
   これが無いと、立った文字（垂直な面）が傾いた盤面と交差し、
   ピボットより下が盤の奥へ回り込んで切れる（実際に下半分が消えた）。
   必要な高さは (行高/2)×sin(傾き)。最大74度なら約0.5行分。 */
.sb{position:absolute;transform:translate(-50%,-50%) translateZ(0.85em) rotateX(var(--ct));
  white-space:nowrap;line-height:1;font-size:1em;
  color:rgba(214,234,255,.66);letter-spacing:.05em}
.sb-name.is-on{font-size:1.2em;font-weight:700;color:#fff;
  text-shadow:0 0 8px var(--gl),0 0 20px var(--gl)}
.sb-date{font-size:.62em;color:rgba(190,214,244,.42)}
.sb-date.is-on{font-weight:700}
.sb-season{font-size:1.62em;font-weight:600;opacity:.5}
.sb-season.is-on{opacity:.98;text-shadow:0 0 14px currentColor}
/* 中央の節気名も同じだけ起こす。
   ただし .season-center は inset:0 で盤と同じ大きさ（実測324px）なので、
   この箱ごと回すと中心から離れた副題が奥/手前へ大きく振られて画面外に出る。
   （実際に「10日目/16日」が消えた）
   回すのは中身の文字だけにする。各要素が自分の中心で正対する。 */
/* この preserve-3d が無いと .season-center が平面化の境界になり、
   子の rotateX が3D空間で解決されず、傾くほど文字がエッジオンに潰れて消える。
   （中央に来た時だけ「大暑」が出る、という症状になった）
   .season-billboards には付けてあったのでリングのラベルだけ正常だった。 */
.season-center{transform-style:preserve-3d}
/* 3行をまとめた .season-core を1枚の板として起こす。
   子要素を個別に回すと、盤の傾きで行間だけが cos(傾き) に潰れる一方
   文字の高さは変わらず、読みと名前が重なる（実際に重なった）。
   .season-center 自体は inset:0 で盤と同じ大きさなので回してはいけない
   （中心から離れた行が奥へ振られて画面外に出る）。
   浮かせる量は px 固定。em だと文字サイズごとに Z が変わって同一平面に乗らない。 */
.season-core{transform:translateZ(26px) rotateX(var(--ct));transform-origin:50% 50%}

/* ── 今日のマーカー：気体の人魂 ─────────────────────
   中身はシェーダ（mountSeasonWisp）。CSSのグラデ球は使わない。
   芯が canvas 下から22%の位置に来るよう、下方向へずらして
   マーカーの座標と炎の根本を合わせている。 */
.sb-mark{width:0;height:0}
.sb-mark__cv{position:absolute;left:50%;bottom:-1.36em;
  width:3.4em;height:4.4em;display:block;pointer-events:none;
  transform:translateX(-50%)}


/* ── モーダル：天体を大きく、指数は縦を潰す ──────────
   主役（危険度／次の新月まで）を大きく中央に。
   その他の指数は「見出し」1行＋「値＋補足」1行の2行に畳んで、
   3行ぶんの高さを取らせない。スクロールを出さないための調整。 */
.modal-stage{max-width:380px}
.modal-readout .metric-hero{padding:12px 10px 13px}
.modal-readout .metric-hero .k{font-size:10px;letter-spacing:.18em}
.modal-readout .metric-hero .v{font-size:clamp(32px,7.6vw,46px);margin-top:5px;line-height:1.02}
.modal-readout .metric-hero .s{margin-top:6px;font-size:10.5px}

/* 値と補足を同じ行に流して1行ぶん節約する */
.modal-readout .metric{padding:6px 8px}
.modal-readout .metric .k{font-size:8.5px;letter-spacing:.12em}
.modal-readout .metric .v{display:inline;margin-top:0;font-size:clamp(13px,2.9vw,17px)}
.modal-readout .metric .s{display:inline;margin:0 0 0 .45em;font-size:9px}
.modal-readout .metric-foot{margin-top:1px;font-size:8.5px;line-height:1.45}
.modal-readout .spot-list{max-height:118px}

@media (max-width:640px){
  .modal-stage{max-width:260px}
  .modal-readout .metric-hero .v{font-size:34px}
}
@media (max-width:380px){
  .modal-stage{max-width:210px}
  .modal-readout .metric-hero .v{font-size:30px}
}


/* ── モーダルの主役をさらに大きく、はっきり中央に ── */
.modal-readout .metric-hero{padding:16px 10px 17px;text-align:center}
.modal-readout .metric-hero .k{font-size:11px;letter-spacing:.22em;opacity:.9}
.modal-readout .metric-hero .v{font-size:clamp(44px,11vw,64px);margin-top:8px;
  font-weight:500;letter-spacing:.03em;line-height:1.0}
.modal-readout .metric-hero .v small{font-size:.34em;margin-left:.16em}
.modal-readout .metric-hero .s{margin-top:9px;font-size:11px}
@media (max-width:640px){.modal-readout .metric-hero .v{font-size:46px}}
@media (max-width:380px){.modal-readout .metric-hero .v{font-size:40px}}

/* 「ドラッグで回転」は出さない（操作は触れば分かる） */
.orb-hint{display:none}

/* 主役は見出しと値を別行にして中央に揃える。
   先に入れた圧縮用の .modal-readout .metric .v{display:inline} の方が
   詳細度が高く勝ってしまうので、こちらも同じ深さで指定すること。 */
.metric-hero{display:block;text-align:center}
.metric-hero > .k,
.metric-hero > .v,
.metric-hero > .s,
.modal-readout .metric-hero > .k,
.modal-readout .metric-hero > .v,
.modal-readout .metric-hero > .s{display:block;text-align:center;width:100%;margin-left:0}
.metric-hero > .v,
.modal-readout .metric-hero > .v{
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}


/* 節気の読み。名前の上に小さく置く */
.season-center > small{display:block;margin-bottom:5px;
  font-size:clamp(9px,1.9vw,11px);letter-spacing:.28em;text-indent:.28em;
  color:rgba(200,222,255,.58)}

/* 人魂は必ず文字より奥に置く。
   preserve-3d の中では重なり順を z-index ではなく Z 座標が決めるため、
   .sb の translateZ(0.85em) のままだと基準文字サイズの小さいマーカーが
   節気名（同じ 1em）と同じ深さになり、DOM順で後のマーカーが文字を覆う。
   盤（Z=0）より手前・文字（8〜14px）より奥の 2px に固定する。 */
.sb-mark{transform:translate(-50%,-50%) translateZ(2px) rotateX(var(--ct))}

/* ── 季節盤の下の3項目を横1行に ──────────────────
   縦に積むと3行ぶんの高さを取るが、開始・次の節気・次までは
   互いに並べて見るものなので横に並べたほうが読みやすい。
   セル内は見出しの下に値を置く（横並びだと1セル約110pxで収まらない）。 */
.season-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.season-row{flex-direction:column;align-items:center;justify-content:center;
  gap:3px;text-align:center;padding:9px 7px;
  border:1px solid var(--line-soft);border-radius:10px;background:rgba(0,0,0,.22)}
.season-row .k{font-size:9px;letter-spacing:.14em}
.season-row .v{font-size:clamp(11px,2.6vw,14px);line-height:1.35;
  white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.season-bar{grid-column:1/-1;margin-top:2px}
@media (max-width:380px){
  .season-meta{gap:5px}
  .season-row{padding:8px 4px}
  .season-row .v{font-size:10.5px}
}