/* ============================================================
 * themes.css — 「そらごと」背景テーマ
 * ------------------------------------------------------------
 *  body[data-period="dawn|day|dusk|night"] × body[data-weather="clear|cloudy|fog|rain|snow|thunder"]
 *  の組み合わせごとに背景グラデーションを決める（4 × 6 = 24 通り）。
 *  ライト/ダークは body[data-theme="dark"] で切替（ui/theme.js が実効値を書く）。
 *
 *  公開トークン（他 CSS / JS から参照できる）
 *    --bg-top / --bg-bottom : グラデーションの上端・下端色
 *    --bg-gradient          : linear-gradient(180deg, top, bottom)
 *    --bg-decor             : 控えめな装飾レイヤー（太陽の光・星・雲・霧・雨筋・雪粒）
 *    --theme-color          : <meta name="theme-color"> に書き込む色（= --bg-top）
 *    --on-bg / --on-bg-sub  : カードに載せず背景に直接置く文字の色（背景の明暗に追従）
 *    --scrim                : 背景の上に敷く半透明スクリム
 *
 *  使い方: カード外に置くテキストは color: var(--on-bg) を使うと、
 *          ライトテーマでも夜・雷雨など暗い空のときに白文字へ自動で切り替わる。
 *  色は color-mix() を使わず固定値で書く（iOS 16.1 以前でも動く）。
 * ============================================================ */

/* ---------- 既定（晴れ・昼・ライト） ---------- */
body {
  --bg-top: #4FA3F7;
  --bg-bottom: #BFE1FF;
  --bg-gradient: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  --bg-decor: none;
  --theme-color: var(--bg-top);
  --on-bg: #1A1D24;
  --on-bg-sub: rgba(26, 29, 36, 0.85);   /* 0.85: 晴れ昼 #4FA3F7 の上でも 4.5:1 以上 */
  --scrim: rgba(0, 0, 0, 0.25);

  background-color: var(--bg-bottom);
  background-image: var(--bg-decor), var(--bg-gradient);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 背景が暗い組み合わせでは背景直置きの文字を白系に */
body[data-weather="rain"],
body[data-weather="thunder"],
body[data-period="night"],
body[data-theme="dark"] {
  --on-bg: #F2F4F7;
  --on-bg-sub: rgba(242, 244, 247, 0.88);
  --scrim: rgba(0, 0, 0, 0.32);
}

/* 「天気で背景を変える」オフ（任意フック） */
body[data-bg="off"] {
  --bg-top: #F4F6F9;
  --bg-bottom: #F4F6F9;
  --bg-decor: none;
  --on-bg: #1A1D24;
  --on-bg-sub: rgba(26, 29, 36, 0.85);
}
body[data-bg="off"][data-theme="dark"] {
  --bg-top: #121418;
  --bg-bottom: #121418;
  --on-bg: #F2F4F7;
  --on-bg-sub: rgba(242, 244, 247, 0.88);
}

/* ============================================================
 * ライトテーマ（既定）: 24 通り
 * ============================================================ */

/* --- clear（青空 / 朝焼け / 夕焼け / 紺）--- */
body[data-period="dawn"][data-weather="clear"]  { --bg-top: #FFD9A8; --bg-bottom: #8EC5FF; }
body[data-period="day"][data-weather="clear"]   { --bg-top: #4FA3F7; --bg-bottom: #BFE1FF; }
body[data-period="dusk"][data-weather="clear"]  { --bg-top: #FFB070; --bg-bottom: #7A6BBF; }
body[data-period="night"][data-weather="clear"] { --bg-top: #1F2A48; --bg-bottom: #0F1526; }

/* --- cloudy（灰）--- */
body[data-period="dawn"][data-weather="cloudy"]  { --bg-top: #E3CDBE; --bg-bottom: #BCC8D8; }
body[data-period="day"][data-weather="cloudy"]   { --bg-top: #9FB3C8; --bg-bottom: #D5DEE8; }
body[data-period="dusk"][data-weather="cloudy"]  { --bg-top: #D6A48F; --bg-bottom: #8F8CAA; }
body[data-period="night"][data-weather="cloudy"] { --bg-top: #2A3340; --bg-bottom: #151A22; }

/* --- fog（乳白）--- */
body[data-period="dawn"][data-weather="fog"]  { --bg-top: #EADFD6; --bg-bottom: #E8EBF0; }
body[data-period="day"][data-weather="fog"]   { --bg-top: #D8DEE4; --bg-bottom: #EEF1F4; }
body[data-period="dusk"][data-weather="fog"]  { --bg-top: #E2D3CD; --bg-bottom: #DADCE7; }
body[data-period="night"][data-weather="fog"] { --bg-top: #414853; --bg-bottom: #272C34; }

/* --- rain（灰青）。--bg-top はヘッダー背景にもなるので白文字で 4.5:1 以上になる濃さにする --- */
body[data-period="dawn"][data-weather="rain"]  { --bg-top: #596377; --bg-bottom: #A9B4C4; }
body[data-period="day"][data-weather="rain"]   { --bg-top: #44607C; --bg-bottom: #9AB0C6; }
body[data-period="dusk"][data-weather="rain"]  { --bg-top: #555470; --bg-bottom: #9A9DB5; }
body[data-period="night"][data-weather="rain"] { --bg-top: #2E3A4B; --bg-bottom: #1A2230; }

/* --- snow（白銀）--- */
body[data-period="dawn"][data-weather="snow"]  { --bg-top: #E8D8DE; --bg-bottom: #EEF2F7; }
body[data-period="day"][data-weather="snow"]   { --bg-top: #C9D6E6; --bg-bottom: #F2F6FA; }
body[data-period="dusk"][data-weather="snow"]  { --bg-top: #D9C9D9; --bg-bottom: #E6E9F2; }
body[data-period="night"][data-weather="snow"] { --bg-top: #3B4556; --bg-bottom: #262D3A; }

/* --- thunder（濃紫）--- */
body[data-period="dawn"][data-weather="thunder"]  { --bg-top: #4A3F5E; --bg-bottom: #7A6A8F; }
body[data-period="day"][data-weather="thunder"]   { --bg-top: #3F3A5E; --bg-bottom: #6E6A8F; }
body[data-period="dusk"][data-weather="thunder"]  { --bg-top: #4B3758; --bg-bottom: #6E5E88; }
body[data-period="night"][data-weather="thunder"] { --bg-top: #2A2640; --bg-bottom: #15132A; }

/* 夜の雪・霧・くもりは背景が暗いので文字を白系に（上の共通ルールで night は既に白系） */

/* ============================================================
 * ダークテーマ: 24 通り（全体に暗め。カードは黒 0.45 でも読める明度）
 * ============================================================ */

body[data-theme="dark"][data-period="dawn"][data-weather="clear"]  { --bg-top: #3B2F4A; --bg-bottom: #1E2A44; }
body[data-theme="dark"][data-period="day"][data-weather="clear"]   { --bg-top: #152238; --bg-bottom: #0E1626; }
body[data-theme="dark"][data-period="dusk"][data-weather="clear"]  { --bg-top: #4A2B3A; --bg-bottom: #1B1A33; }
body[data-theme="dark"][data-period="night"][data-weather="clear"] { --bg-top: #1F2A48; --bg-bottom: #0F1526; }

body[data-theme="dark"][data-period="dawn"][data-weather="cloudy"]  { --bg-top: #3A3240; --bg-bottom: #1C2230; }
body[data-theme="dark"][data-period="day"][data-weather="cloudy"]   { --bg-top: #2A3340; --bg-bottom: #171C24; }
body[data-theme="dark"][data-period="dusk"][data-weather="cloudy"]  { --bg-top: #3E2F3A; --bg-bottom: #1C1C2B; }
body[data-theme="dark"][data-period="night"][data-weather="cloudy"] { --bg-top: #1E242E; --bg-bottom: #0F1319; }

body[data-theme="dark"][data-period="dawn"][data-weather="fog"]  { --bg-top: #403A44; --bg-bottom: #242730; }
body[data-theme="dark"][data-period="day"][data-weather="fog"]   { --bg-top: #3A4049; --bg-bottom: #22262D; }
body[data-theme="dark"][data-period="dusk"][data-weather="fog"]  { --bg-top: #443A42; --bg-bottom: #242530; }
body[data-theme="dark"][data-period="night"][data-weather="fog"] { --bg-top: #2A2F37; --bg-bottom: #16191E; }

body[data-theme="dark"][data-period="dawn"][data-weather="rain"]  { --bg-top: #2A2C3B; --bg-bottom: #141822; }
body[data-theme="dark"][data-period="day"][data-weather="rain"]   { --bg-top: #1E2B3A; --bg-bottom: #111822; }
body[data-theme="dark"][data-period="dusk"][data-weather="rain"]  { --bg-top: #2A2538; --bg-bottom: #121520; }
body[data-theme="dark"][data-period="night"][data-weather="rain"] { --bg-top: #1A2230; --bg-bottom: #0E131B; }

body[data-theme="dark"][data-period="dawn"][data-weather="snow"]  { --bg-top: #38303E; --bg-bottom: #1C1F28; }
body[data-theme="dark"][data-period="day"][data-weather="snow"]   { --bg-top: #2C3340; --bg-bottom: #1A1F28; }
body[data-theme="dark"][data-period="dusk"][data-weather="snow"]  { --bg-top: #3A2E3C; --bg-bottom: #1B1D28; }
body[data-theme="dark"][data-period="night"][data-weather="snow"] { --bg-top: #262D3A; --bg-bottom: #151921; }

body[data-theme="dark"][data-period="dawn"][data-weather="thunder"]  { --bg-top: #261E36; --bg-bottom: #130F20; }
body[data-theme="dark"][data-period="day"][data-weather="thunder"]   { --bg-top: #201C33; --bg-bottom: #110F1E; }
body[data-theme="dark"][data-period="dusk"][data-weather="thunder"]  { --bg-top: #2A1C33; --bg-bottom: #140F1F; }
body[data-theme="dark"][data-period="night"][data-weather="thunder"] { --bg-top: #1A1730; --bg-bottom: #0C0B18; }

/* ============================================================
 * 装飾レイヤー（静的・radial/linear-gradient のみ。描画コストはほぼゼロ）
 * ============================================================ */

/* 晴れ・昼: 右上に太陽のにじみ */
body[data-period="day"][data-weather="clear"] {
  --bg-decor:
    radial-gradient(circle at 86% 6%, rgba(255, 244, 214, 0.75) 0%, rgba(255, 244, 214, 0.35) 9%, rgba(255, 244, 214, 0) 26%);
}
body[data-theme="dark"][data-period="day"][data-weather="clear"] {
  --bg-decor:
    radial-gradient(circle at 86% 6%, rgba(255, 236, 190, 0.22) 0%, rgba(255, 236, 190, 0) 24%);
}

/* 晴れ・朝 / 夕: 地平線近くの光 */
body[data-period="dawn"][data-weather="clear"] {
  --bg-decor:
    radial-gradient(ellipse 70% 30% at 50% 0%, rgba(255, 236, 200, 0.55) 0%, rgba(255, 236, 200, 0) 100%);
}
body[data-period="dusk"][data-weather="clear"] {
  --bg-decor:
    radial-gradient(ellipse 80% 32% at 30% 0%, rgba(255, 214, 160, 0.55) 0%, rgba(255, 214, 160, 0) 100%);
}
body[data-theme="dark"][data-period="dawn"][data-weather="clear"],
body[data-theme="dark"][data-period="dusk"][data-weather="clear"] {
  --bg-decor:
    radial-gradient(ellipse 80% 32% at 40% 0%, rgba(255, 200, 150, 0.16) 0%, rgba(255, 200, 150, 0) 100%);
}

/* 晴れ・夜: 星（固定位置の小さな点）と月のにじみ。ライト/ダーク共通 */
body[data-period="night"][data-weather="clear"] {
  --bg-decor:
    radial-gradient(circle at 82% 10%, rgba(255, 255, 240, 0.20) 0%, rgba(255, 255, 240, 0) 18%),
    radial-gradient(1.5px 1.5px at 12% 14%, rgba(255, 255, 255, 0.9) 50%, transparent 100%),
    radial-gradient(1px 1px at 28% 6%, rgba(255, 255, 255, 0.8) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 18%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 9%, rgba(255, 255, 255, 0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 24%, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 28%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 52% 34%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
}

/* くもり: 柔らかい雲のかたまり */
body[data-weather="cloudy"] {
  --bg-decor:
    radial-gradient(ellipse 46% 14% at 18% 12%, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 52% 16% at 78% 26%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 100%);
}
body[data-theme="dark"][data-weather="cloudy"],
body[data-period="night"][data-weather="cloudy"] {
  --bg-decor:
    radial-gradient(ellipse 46% 14% at 18% 12%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 52% 16% at 78% 26%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
}

/* 霧: 横に流れるもや */
body[data-weather="fog"] {
  --bg-decor:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.45) 34%, rgba(255, 255, 255, 0) 48%,
      rgba(255, 255, 255, 0.35) 66%, rgba(255, 255, 255, 0) 80%);
}
body[data-theme="dark"][data-weather="fog"],
body[data-period="night"][data-weather="fog"] {
  --bg-decor:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0) 48%,
      rgba(255, 255, 255, 0.06) 66%, rgba(255, 255, 255, 0) 80%);
}

/* 雨: 細い斜めの雨筋（静止） */
body[data-weather="rain"] {
  --bg-decor:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0) 0 18px, rgba(255, 255, 255, 0.055) 18px 19px);
}

/* 雪: まばらな雪粒 */
body[data-weather="snow"] {
  --bg-decor:
    radial-gradient(2px 2px at 10% 12%, rgba(255, 255, 255, 0.9) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 28%, rgba(255, 255, 255, 0.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 55% 8%, rgba(255, 255, 255, 0.85) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 20%, rgba(255, 255, 255, 0.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 88% 34%, rgba(255, 255, 255, 0.9) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 18% 44%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 40%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
    radial-gradient(2px 2px at 42% 52%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
}

/* 雷: 上部の薄明かり（稲光の余韻） */
body[data-weather="thunder"] {
  --bg-decor:
    radial-gradient(ellipse 60% 26% at 70% 0%, rgba(214, 200, 255, 0.28) 0%, rgba(214, 200, 255, 0) 100%);
}

/* ============================================================
 * 動き: 背景の色が変わるときだけ短くフェード。
 *  linear-gradient 自体は補間できないため、背景色（下端色）のみ遷移させる。
 *  prefers-reduced-motion では遷移も無効。
 * ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body {
    transition: background-color 0.8s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

/* 注: html に background を付けないこと（付けると body の背景がキャンバスへ伝播せず、
   オーバースクロール領域の色が合わなくなる）。base.css 側も html には背景を置かない前提。 */