/* ============================================================================
   知の航路 — 天体背景（テーマ演出）
   ----------------------------------------------------------------------------
   方針:
   1. 表示の出し分けは html[data-theme="..."] だけで行う（JS 非依存）。
      → canvas や JS が動かなくても、各テーマの演出は必ず画面に出る。
   2. 星・天の川は sky.css の SVG データURI（静的な星）で描く。
   3. canvas(#starfield) は「瞬き・流星」の追加演出のみを担当（無くても成立）。
   4. すべて .cosmos 配下・pointer-events:none・z-index:0。
   5. 本文の可読性のため、星空は上部ほど濃く、下部は紙面色へ自然に沈める。
   ========================================================================== */

.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  background: var(--sky-bg, #05070f);
}

/* 各レイヤーの共通設定 */
.cosmos > * { position: absolute; pointer-events: none; }

/* canvas は星の「瞬き」だけを描く（静的星は CSS 側） */
#starfield {
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .9;
  mix-blend-mode: screen;
}

/* ---------------------------------------------------------------- 星空の素地
   テーマごとに「どの静的な星レイヤーを出すか」を決める。
   --stars-a / --stars-b はテーマ側で差し替える。 */
.cosmos::before {
  content: '';
  position: absolute;
  inset: -2%;
  background-image: var(--stars-a, none), var(--stars-b, none);
  background-size: var(--stars-a-size, 1600px 1000px), var(--stars-b-size, 1600px 900px);
  background-repeat: repeat;
  background-position: 0 0, 240px 180px;
  opacity: var(--stars-op, 1);
  animation: starDrift 240s linear infinite;
}
@keyframes starDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-60px, -34px, 0); }
}

/* 明るい星のにじみ（星河・夜空向けの追加層） */
.cosmos-band {
  inset: 0;
  opacity: 0;
  background-image: var(--sky-stars-band);
  background-size: 1600px 900px;
  background-repeat: repeat;
  transform: rotate(-24deg) scale(1.9);
  filter: blur(.3px);
  mix-blend-mode: screen;
}

/* ------------------------------------------------------------------ 星雲
   銀河テーマ専用。紫〜青のガス雲がゆっくり漂う。 */
.cosmos-nebula { inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.cosmos-nebula .neb {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.cosmos-nebula .n1 {
  width: 62vw; height: 62vw; left: -14vw; top: -18vw;
  background: radial-gradient(circle at 42% 42%, rgba(150, 92, 235, .58), rgba(96, 64, 190, .28) 42%, transparent 70%);
  animation: nebFloat 34s ease-in-out infinite alternate;
}
.cosmos-nebula .n2 {
  width: 54vw; height: 54vw; right: -12vw; top: 4vw;
  background: radial-gradient(circle at 55% 45%, rgba(72, 118, 246, .52), rgba(48, 74, 190, .26) 44%, transparent 72%);
  animation: nebFloat 42s ease-in-out infinite alternate-reverse;
}
.cosmos-nebula .n3 {
  width: 70vw; height: 46vw; left: 14vw; bottom: -22vw;
  background: radial-gradient(ellipse at 50% 50%, rgba(196, 86, 214, .42), rgba(120, 56, 176, .22) 46%, transparent 72%);
  animation: nebFloat 50s ease-in-out infinite alternate;
}
.cosmos-nebula .n4 {
  width: 40vw; height: 40vw; right: 18vw; bottom: -8vw;
  background: radial-gradient(circle at 50% 50%, rgba(96, 208, 255, .34), rgba(52, 132, 220, .16) 46%, transparent 72%);
  animation: nebFloat 38s ease-in-out infinite alternate-reverse;
}
@keyframes nebFloat {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1); opacity: .82; }
  50%  { transform: translate3d(3%, 3%, 0) scale(1.14); opacity: 1; }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.05); opacity: .88; }
}

/* ------------------------------------------------------------------ 流星
   銀河テーマで「頻繁に」流す。CSS アニメーションなので確実に出現する。 */
.cosmos-shooting { inset: 0; opacity: 0; transition: opacity .8s ease; }
.cosmos-shooting .meteor {
  position: absolute;
  width: 160px;
  height: 1.6px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(222, 232, 255, .55) 38%, #ffffff 92%, #ffffff);
  box-shadow: 0 0 6px 1px rgba(200, 220, 255, .55), 0 0 18px 3px rgba(150, 180, 255, .28);
  opacity: 0;
  transform: rotate(28deg);
  transform-origin: right center;
  animation: meteorFall 3.4s linear infinite;
}
.cosmos-shooting .m1 { top: 8%;  left: -6%;  animation-delay: .2s;  animation-duration: 2.9s; }
.cosmos-shooting .m2 { top: 22%; left: 12%;  animation-delay: 1.7s; animation-duration: 3.6s; width: 210px; }
.cosmos-shooting .m3 { top: 4%;  left: 38%;  animation-delay: 3.1s; animation-duration: 2.6s; width: 130px; }
.cosmos-shooting .m4 { top: 30%; left: -10%; animation-delay: 4.6s; animation-duration: 3.2s; width: 190px; }
.cosmos-shooting .m5 { top: 15%; left: 54%;  animation-delay: 5.9s; animation-duration: 4.1s; width: 240px; }

@keyframes meteorFall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(28deg) scaleX(.5); }
  4%   { opacity: 0; }
  8%   { opacity: 1; }
  42%  { opacity: 1; }
  56%  { opacity: 0; transform: translate3d(112vw, 62vh, 0) rotate(28deg) scaleX(1); }
  100% { opacity: 0; transform: translate3d(112vw, 62vh, 0) rotate(28deg) scaleX(1); }
}

/* ---------------------------------------------------------------- オーロラ
   3枚の「光のカーテン」がそれぞれ違う周期で揺れる。 */
.cosmos-aurora {
  inset: -10% -8% auto -8%;
  height: 82%;
  opacity: 0;
  transition: opacity 1s ease;
  filter: blur(22px) saturate(1.25);
  mix-blend-mode: screen;
}
.cosmos-aurora .ribbon {
  position: absolute;
  top: 0;
  border-radius: 46% 54% 40% 60% / 60% 52% 48% 40%;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.cosmos-aurora .r1 {
  left: 2%; width: 40%; height: 78%;
  background: linear-gradient(180deg, rgba(126, 255, 214, .62) 0%, rgba(72, 236, 190, .38) 34%, rgba(40, 180, 160, .12) 68%, transparent 92%);
  animation: ribbonSway 15s ease-in-out infinite alternate;
}
.cosmos-aurora .r2 {
  left: 26%; width: 36%; height: 92%;
  background: linear-gradient(180deg, rgba(150, 255, 236, .58) 0%, rgba(96, 220, 255, .34) 38%, rgba(56, 150, 220, .12) 70%, transparent 94%);
  animation: ribbonSway 21s ease-in-out infinite alternate-reverse;
}
.cosmos-aurora .r3 {
  left: 56%; width: 44%; height: 74%;
  background: linear-gradient(180deg, rgba(186, 160, 255, .56) 0%, rgba(140, 120, 250, .32) 36%, rgba(90, 80, 200, .1) 68%, transparent 92%);
  animation: ribbonSway 27s ease-in-out infinite alternate;
}
@keyframes ribbonSway {
  0%   { transform: translate3d(-5%, 0, 0) rotate(-5deg) skewX(-9deg) scaleY(.9);  opacity: .72; }
  35%  { transform: translate3d(2%, 2%, 0) rotate(2deg) skewX(7deg) scaleY(1.16);  opacity: 1; }
  70%  { transform: translate3d(6%, -1%, 0) rotate(6deg) skewX(-4deg) scaleY(1.02); opacity: .84; }
  100% { transform: translate3d(-3%, 3%, 0) rotate(-2deg) skewX(10deg) scaleY(1.22); opacity: .96; }
}

/* -------------------------------------------------------------------- 月
   クレーターまで描く。青銀の光。 */
.cosmos-moon {
  top: 7vh;
  right: 8vw;
  width: clamp(150px, 17vw, 250px);
  height: clamp(150px, 17vw, 250px);
  opacity: 0;
  transition: opacity 1.1s ease;
}
.cosmos-moon .moon-halo {
  position: absolute;
  inset: -180%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(216, 230, 255, .34) 0%, rgba(168, 196, 255, .16) 24%, rgba(120, 160, 240, .07) 46%, transparent 68%);
  filter: blur(14px);
  animation: moonPulse 9s ease-in-out infinite alternate;
}
@keyframes moonPulse {
  from { opacity: .78; transform: scale(.96); }
  to   { opacity: 1;   transform: scale(1.05); }
}
.cosmos-moon .moon-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    /* クレーター（大小の円を重ねる） */
    radial-gradient(circle at 63% 24%, rgba(126, 146, 188, .55) 0 3.4%, rgba(126, 146, 188, 0) 4.2%),
    radial-gradient(circle at 41% 38%, rgba(118, 138, 180, .42) 0 5.2%, rgba(118, 138, 180, 0) 6.2%),
    radial-gradient(circle at 27% 63%, rgba(132, 152, 194, .48) 0 4.1%, rgba(132, 152, 194, 0) 5%),
    radial-gradient(circle at 68% 61%, rgba(110, 130, 172, .44) 0 6.6%, rgba(110, 130, 172, 0) 7.6%),
    radial-gradient(circle at 54% 78%, rgba(122, 142, 184, .38) 0 3.2%, rgba(122, 142, 184, 0) 4%),
    radial-gradient(circle at 76% 44%, rgba(126, 146, 188, .3) 0 2.4%, rgba(126, 146, 188, 0) 3.2%),
    radial-gradient(circle at 18% 30%, rgba(140, 160, 200, .3) 0 2%, rgba(140, 160, 200, 0) 2.8%),
    radial-gradient(circle at 47% 14%, rgba(140, 160, 200, .26) 0 1.6%, rgba(140, 160, 200, 0) 2.4%),
    /* 月面の明暗（海） */
    radial-gradient(ellipse 42% 34% at 62% 30%, rgba(150, 168, 206, .3), transparent 70%),
    radial-gradient(ellipse 36% 28% at 36% 70%, rgba(150, 168, 206, .26), transparent 72%),
    /* 本体 */
    radial-gradient(circle at 34% 28%, #ffffff 0%, #f0f5ff 22%, #d3dff6 52%, #a9bce0 78%, #8397bf 100%);
  box-shadow:
    inset -14px -18px 42px rgba(78, 100, 145, .5),
    inset 10px 12px 30px rgba(255, 255, 255, .34),
    0 0 34px 6px rgba(214, 230, 255, .42),
    0 0 110px 34px rgba(150, 182, 244, .24);
}
/* 月の縁の淡いリング */
.cosmos-moon .moon-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

/* ------------------------------------------------------------------- 海図
   羊皮紙 × 真鍮。経緯線・ローズ・二重罫・四隅の飾り。 */
.cosmos-paper { inset: 0; opacity: 0; transition: opacity .8s ease; }
.cosmos-paper .paper-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(146, 112, 52, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 112, 52, .14) 1px, transparent 1px),
    linear-gradient(rgba(146, 112, 52, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 112, 52, .06) 1px, transparent 1px);
  background-size: 168px 168px, 168px 168px, 28px 28px, 28px 28px;
}
/* 羅針盤（ローズ） */
.cosmos-paper .paper-rose {
  position: absolute;
  right: 6vw;
  bottom: 7vh;
  width: clamp(150px, 15vw, 230px);
  height: clamp(150px, 15vw, 230px);
  border-radius: 50%;
  opacity: .5;
  background:
    repeating-conic-gradient(from 0deg, rgba(150, 116, 54, .3) 0deg 1.2deg, transparent 1.2deg 15deg),
    repeating-conic-gradient(from 0deg, rgba(150, 116, 54, .16) 0deg .5deg, transparent .5deg 5deg),
    radial-gradient(circle, transparent 0 43%, rgba(150, 116, 54, .34) 43.4% 44.2%, transparent 44.6% 63%, rgba(150, 116, 54, .22) 63.4% 64%, transparent 64.4%),
    radial-gradient(circle at 50% 50%, rgba(150, 116, 54, .1), transparent 68%);
  animation: roseTurn 260s linear infinite;
}
@keyframes roseTurn { to { transform: rotate(360deg); } }
/* 二重罫（上端・下端） */
.cosmos-paper .paper-rule { position: absolute; left: 3.4vw; right: 3.4vw; height: 0; }
.cosmos-paper .pr-t { top: 2.4vh; border-top: 1px solid rgba(148, 114, 54, .3); border-bottom: 1px solid rgba(148, 114, 54, .14); padding-top: 4px; }
.cosmos-paper .pr-b { bottom: 2.4vh; border-top: 1px solid rgba(148, 114, 54, .14); border-bottom: 1px solid rgba(148, 114, 54, .28); padding-bottom: 4px; }
/* 四隅の飾り罫 */
.cosmos-paper .paper-corner {
  position: absolute;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(148, 114, 54, .34);
  border-radius: 2px;
}
.cosmos-paper .pc-tl { top: 3.2vh; left: 2.6vw;  border-right: 0; border-bottom: 0; }
.cosmos-paper .pc-tr { top: 3.2vh; right: 2.6vw; border-left: 0;  border-bottom: 0; }
.cosmos-paper .pc-bl { bottom: 3.2vh; left: 2.6vw;  border-right: 0; border-top: 0; }
.cosmos-paper .pc-br { bottom: 3.2vh; right: 2.6vw; border-left: 0;  border-top: 0; }

/* ------------------------------------------------------------------ ビネット
   下部を紙面色に沈めて本文を読みやすくする（星は消しすぎない）。 */
.cosmos-vignette {
  inset: 0;
  background:
    radial-gradient(128% 84% at 50% -14%, transparent 46%, color-mix(in srgb, var(--sky-a, #05070f) 82%, transparent) 100%),
    linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--sky-a, #05070f) 68%, transparent) 88%, var(--sky-a, #05070f) 100%);
  opacity: .62;
}

/* ==========================================================================
   テーマ別の出し分け（ここが演出の本体）
   ========================================================================== */

/* ---------------------------------------------------------------- 銀河 */
html[data-theme='galaxy'] {
  --sky-a: #05061a;
  --sky-b: #140c33;
  --sky-c: #2a1550;
  --sky-bg: radial-gradient(130% 90% at 74% -8%, #2b1a5e 0%, #170f3a 34%, #0a0a24 66%, #05061a 100%);
  --stars-a: var(--sky-stars-core);
  --stars-b: var(--sky-stars-base);
  --stars-a-size: 1400px 900px;
  --stars-op: 1;
}
html[data-theme='galaxy'] .cosmos-nebula { opacity: 1; }
html[data-theme='galaxy'] .cosmos-shooting { opacity: 1; }
html[data-theme='galaxy'] .cosmos-vignette { opacity: .5; }

/* ---------------------------------------------------------------- 星河 */
html[data-theme='starriver'] {
  --sky-a: #02050f;
  --sky-b: #06182e;
  --sky-c: #0d3450;
  --sky-bg: radial-gradient(120% 86% at 50% -6%, #123a58 0%, #08203a 32%, #04101f 68%, #02050f 100%);
  --stars-a: var(--sky-stars-band);
  --stars-b: var(--sky-stars-bright);
  --stars-a-size: 1600px 900px;
  --stars-b-size: 1600px 1000px;
  --stars-op: 1;
}
/* 天の川の帯を斜めに強く通す（星密度最大） */
html[data-theme='starriver'] .cosmos-band { opacity: .92; }
html[data-theme='starriver'] .cosmos-shooting { opacity: .8; }
html[data-theme='starriver'] .cosmos-vignette {
  background:
    radial-gradient(130% 88% at 50% -16%, transparent 50%, color-mix(in srgb, #02050f 74%, transparent) 100%),
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, #02050f 62%, transparent) 90%, #02050f 100%);
  opacity: .58;
}

/* ---------------------------------------------------------------- オーロラ */
html[data-theme='aurora'] {
  --sky-a: #01100f;
  --sky-b: #04201f;
  --sky-c: #07322e;
  --sky-bg: radial-gradient(120% 88% at 50% -10%, #0a3f3a 0%, #06262a 34%, #021514 70%, #010d0c 100%);
  --stars-a: var(--sky-stars-base);
  --stars-b: none;
  --stars-op: .62;
}
html[data-theme='aurora'] .cosmos-aurora { opacity: 1; }
html[data-theme='aurora'] .cosmos-vignette {
  background:
    radial-gradient(130% 86% at 50% -12%, transparent 44%, color-mix(in srgb, #01100f 76%, transparent) 100%),
    linear-gradient(180deg, transparent 54%, color-mix(in srgb, #01100f 64%, transparent) 88%, #01100f 100%);
  opacity: .6;
}
/* オーロラの照り返しを下部に薄く残す */
html[data-theme='aurora'] body::after {
  content: '';
  position: fixed;
  inset: auto 0 0 0;
  height: 26vh;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 100% at 50% 100%, rgba(94, 236, 196, .1), transparent 72%);
}

/* ---------------------------------------------------------------- 夜空 */
html[data-theme='night'] {
  --sky-a: #03060f;
  --sky-b: #08101f;
  --sky-c: #101d33;
  --sky-bg: radial-gradient(120% 88% at 50% -8%, #14243c 0%, #0a1424 36%, #050a14 70%, #03060f 100%);
  --stars-a: var(--sky-stars-base);
  --stars-b: var(--sky-stars-bright);
  --stars-b-size: 1600px 1000px;
  --stars-op: 1;
}
html[data-theme='night'] .cosmos-vignette { opacity: .52; }

/* ---------------------------------------------------------------- 月光 */
html[data-theme='moon'] {
  --sky-a: #060a16;
  --sky-b: #0d1628;
  --sky-c: #1d2c47;
  --sky-bg: radial-gradient(110% 84% at 76% 0%, #2c4062 0%, #15213a 30%, #0a1122 66%, #060a16 100%);
  --stars-a: var(--sky-stars-base);
  --stars-b: none;
  --stars-op: .7;
}
html[data-theme='moon'] .cosmos-moon { opacity: 1; }
html[data-theme='moon'] .cosmos-vignette {
  background:
    radial-gradient(120% 84% at 74% 4%, rgba(190, 214, 255, .16) 0%, transparent 52%),
    radial-gradient(128% 86% at 50% -10%, transparent 50%, color-mix(in srgb, #060a16 78%, transparent) 100%),
    linear-gradient(180deg, transparent 56%, color-mix(in srgb, #060a16 66%, transparent) 88%, #060a16 100%);
  opacity: .66;
}

/* ---------------------------------------------------------------- 海図 */
html[data-theme='voyage'] {
  --sky-a: #fbf8f1;
  --sky-b: #f4eede;
  --sky-c: #efe6d1;
  --sky-bg:
    radial-gradient(120% 90% at 82% -8%, #fdfbf5 0%, #f8f3e6 44%, #f2ead8 100%);
  --stars-a: none;
  --stars-b: none;
  --stars-op: 0;
}
html[data-theme='voyage'] .cosmos-paper { opacity: 1; }
/* 羊皮紙のむら（紙の質感） */
html[data-theme='voyage'] .cosmos::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(170, 136, 74, .1) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 68%, rgba(170, 136, 74, .08) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 32%, rgba(170, 136, 74, .07) 0 3px, transparent 4px),
    radial-gradient(circle at 38% 86%, rgba(170, 136, 74, .06) 0 2px, transparent 3px);
  background-size: 240px 240px, 300px 300px, 360px 360px, 280px 280px;
}
html[data-theme='voyage'] .cosmos-vignette {
  background:
    radial-gradient(130% 92% at 50% 50%, transparent 56%, rgba(168, 133, 63, .1) 100%);
  opacity: 1;
}

/* ==========================================================================
   控えめ表示・停止設定
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cosmos-nebula .neb,
  .cosmos-aurora .ribbon,
  .cosmos-moon .moon-halo,
  .cosmos-paper .paper-rose,
  .cosmos::before { animation: none !important; }
  .cosmos-shooting { display: none; }
  #starfield { display: none; }
}

/* 印刷時は背景を出さない */
@media print {
  .cosmos { display: none !important; }
}