/* ============================================================
   THEME SYSTEM — 24 themes (v2)
   body.theme-X で全ページに適用
   background-attachment:fixed を廃止（iOS対応）
   background-size:200%+アニメーションで流動的な背景を実現
   ============================================================ */

/* ── 共通 ─────────────────────────────────────────────────── */
@keyframes raindrop-fall {
  from { opacity:.8; transform:translateY(-20px); }
  to   { opacity:0;  transform:translateY(100vh); }
}

body.no-anim *,
body.no-anim *::before,
body.no-anim *::after {
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   NORMAL THEMES (9)
   ============================================================ */

/* ── 桜 sakura ───────────────────────────────────────────── */
body.theme-sakura {
  --sky-1:#9b3a7b; --sky-2:#c05090; --sky-3:#d878a8;
  --sun:#ffb6c1; --sun-warm:#ff85a1; --sun-glow:rgba(255,130,170,0.5);
  --text:#ffe8f4; --text-soft:#f0b8d8; --muted:#c888b0;
  --border:rgba(255,180,210,0.25); --surface:rgba(80,20,55,0.58);
  background:
    radial-gradient(ellipse at 70% 5%,  rgba(255,170,205,0.7) 0%, rgba(210,80,150,0.3) 20%, transparent 45%),
    radial-gradient(ellipse at 25% 82%, rgba(150,30,90,0.4)   0%, transparent 42%),
    radial-gradient(ellipse at 55% 55%, rgba(180,40,120,0.2)  0%, transparent 38%),
    linear-gradient(160deg,
      #110810 0%, #240c2e 15%, #3c1255 32%,
      #55187a 52%, #6b1e92 68%,
      #3c1255 84%, #1a0b1e 100%
    );
  background-size: 200% 200%;
  animation: sakura-flow 22s ease-in-out infinite;
}
@keyframes sakura-flow {
  0%,100% { background-position: 20% 20%; }
  33%      { background-position: 80% 10%; }
  66%      { background-position: 30% 80%; }
}
body.theme-sakura::before {
  background:
    radial-gradient(ellipse at 70% 5%,  rgba(255,160,195,0.35) 0%, transparent 52%),
    radial-gradient(ellipse at 70% 5%,  rgba(255,120,170,0.15) 0%, transparent 72%);
  animation: sakura-glow 5s ease-in-out infinite;
}
@keyframes sakura-glow {
  0%,100% { opacity:.65; transform:scale(1)    translateX(0); }
  50%      { opacity:1;   transform:scale(1.08) translateX(12px); }
}
body.theme-sakura::after { opacity:.04; }
body.theme-sakura header { background:rgba(38,8,34,0.90); border-bottom-color:rgba(255,150,190,0.22); }
body.theme-sakura header::after { background:linear-gradient(90deg,transparent 0%,rgba(255,130,175,0.55) 18%,rgba(255,190,210,0.95) 50%,rgba(255,130,175,0.55) 82%,transparent 100%); background-size:200% 100%; }
.theme-sakura  .petal,
.theme-hsakura .petal,
.theme-yozakura .petal {
  position:fixed; top:-20px; pointer-events:none; z-index:9000;
  animation:petal-fall linear infinite;
  will-change:transform;
}
@keyframes petal-fall {
  0%   { transform:translateY(0)     rotate(0deg)   translateX(0);    opacity:.92; }
  20%  { transform:translateY(22vh)  rotate(88deg)  translateX(20px); opacity:.88; }
  45%  { transform:translateY(50vh)  rotate(210deg) translateX(-22px); opacity:.80; }
  70%  { transform:translateY(76vh)  rotate(335deg) translateX(16px); opacity:.55; }
  100% { transform:translateY(115vh) rotate(465deg) translateX(-8px);  opacity:0; }
}

/* ── ネオン neon ─────────────────────────────────────────── */
body.theme-neon {
  --sky-1:#00f0ff; --sky-2:#ff2bd6; --sky-3:#b14bff;
  --sun:#ff45b0; --sun-warm:#ffd23f; --sun-glow:rgba(255,60,190,0.45);
  --text:#f4eaff; --text-soft:#c8a6ff; --muted:#7a6ab0;
  --border:rgba(180,80,255,0.28); --surface:rgba(14,2,30,0.80);
  background:
    /* シンセウェイブの夕陽（地平に沈む） */
    radial-gradient(ellipse at 50% 88%, rgba(255,90,200,0.55) 0%, rgba(255,160,40,0.22) 12%, transparent 34%),
    /* 地平の発光ライン（シアン） */
    radial-gradient(ellipse 70% 3% at 50% 74%, rgba(0,240,255,0.40) 0%, transparent 70%),
    /* 上空のネオン雲 */
    radial-gradient(ellipse at 84% 14%, rgba(180,40,255,0.45) 0%, transparent 38%),
    radial-gradient(ellipse at 16% 24%, rgba(0,220,255,0.32) 0%, transparent 38%),
    /* ベース：紫紺の夜 */
    linear-gradient(170deg, #10002a 0%, #1a0440 24%, #240a55 48%, #18063e 72%, #0c0224 100%);
  background-size: 200% 200%;
  animation: neon-flow 18s ease-in-out infinite;
}
@keyframes neon-flow {
  0%,100% { background-position: 0%   50%; }
  33%      { background-position: 100% 10%; }
  66%      { background-position: 60%  90%; }
}
body.theme-neon::before {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(200,0,255,0.28) 0%, transparent 48%),
    radial-gradient(ellipse at 12% 78%, rgba(0,220,255,0.22) 0%, transparent 48%);
  animation: neon-pulse 3s ease-in-out infinite;
}
@keyframes neon-pulse {
  0%,100% { opacity:.55; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.06); }
}
body.theme-neon::after {
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(0,240,255,0.04) 59px, rgba(0,240,255,0.04) 60px),
    repeating-linear-gradient(0deg,  transparent 0px, transparent 59px, rgba(200,0,255,0.025) 59px, rgba(200,0,255,0.025) 60px);
  animation: neon-grid 20s linear infinite;
}
@keyframes neon-grid {
  from { background-position:0 0, 0 0; }
  to   { background-position:120px 120px, 120px 120px; }
}
body.theme-neon header { background:rgba(0,4,16,0.94); border-bottom-color:rgba(0,240,255,0.32); }
body.theme-neon header::after { background:linear-gradient(90deg,transparent 0%,rgba(0,220,255,0.65) 20%,rgba(200,0,255,0.95) 50%,rgba(0,220,255,0.65) 80%,transparent 100%); background-size:200% 100%; }
.theme-neon .neon-spark {
  position:fixed; pointer-events:none; z-index:2;
  border-radius:50%; animation:neon-float linear forwards;
}
@keyframes neon-float {
  0%   { opacity:.95; transform:translateY(0) scale(1); }
  70%  { opacity:.6; }
  100% { opacity:0;   transform:translateY(-130px) scale(0); }
}

/* ── オーロラ aurora ──────────────────────────────────────── */
body.theme-aurora {
  --sky-1:#00d8a0; --sky-2:#4488ff; --sky-3:#aa66ff;
  --sun:#00ffcc; --sun-warm:#88eedd; --sun-glow:rgba(0,210,160,0.45);
  --text:#e8fff8; --text-soft:#88ddc8; --muted:#558878;
  --border:rgba(0,210,160,0.22); --surface:rgba(0,18,30,0.65);
  background:
    /* オーロラ光源（緑・青緑） */
    radial-gradient(ellipse at 50% 22%, rgba(0,220,155,0.38) 0%, rgba(0,160,120,0.16) 32%, transparent 60%),
    radial-gradient(ellipse at 20% 14%, rgba(0,200,140,0.22) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 10%, rgba(80,0,210,0.28)  0%, transparent 38%),
    radial-gradient(ellipse at 60% 30%, rgba(0,180,130,0.14) 0%, transparent 35%),
    /* 夜空ベース */
    linear-gradient(175deg, #000508 0%, #010e18 20%, #021520 45%, #010c14 72%, #000810 100%);
  background-size: 300% 300%;
  background-attachment: fixed;
  animation: aurora-flow 50s ease-in-out infinite;
}
@keyframes aurora-flow {
  0%,100% { background-position: 50% 20%; }
  35%      { background-position: 18% 55%; }
  70%      { background-position: 82% 32%; }
}
/* オーロラカーテン：水平方向の発光層 */
body.theme-aurora::before {
  background:
    linear-gradient(180deg,
      transparent                    0%,
      rgba(0,210,150,0.07)          16%,
      rgba(0,235,170,0.22)          26%,
      rgba(0,220,160,0.18)          32%,
      rgba(70,0,200,0.09)           40%,
      rgba(120,0,255,0.06)          48%,
      transparent                   62%
    );
  animation: aurora-shimmer 20s ease-in-out infinite;
}
@keyframes aurora-shimmer {
  0%,100% { opacity:.65; transform:translateY(0); }
  50%      { opacity:1.0; transform:translateY(-10px); }
}
body.theme-aurora::after { opacity:.04; animation:none; }
body.theme-aurora header { background:rgba(1,8,16,0.92); border-bottom-color:rgba(0,210,160,0.28); }
body.theme-aurora header::after { background:linear-gradient(90deg,transparent 0%,rgba(0,190,140,0.55) 18%,rgba(110,0,220,0.88) 50%,rgba(0,190,140,0.55) 82%,transparent 100%); background-size:200% 100%; }

/* ── 和紙 washi ──────────────────────────────────────────── */
body.theme-washi {
  --sky-1:#8b7355; --sky-2:#a08060; --sky-3:#c0a578;
  --sun:#c8a060; --sun-warm:#d4b080; --sun-glow:rgba(180,140,80,0.32);
  --text:#2d1f0e; --text-soft:#5c3d20; --muted:#8a6644;
  --border:rgba(100,70,30,0.22); --surface:rgba(230,215,190,0.62);
  background:
    /* 金箔のほのかな光 */
    radial-gradient(ellipse at 78% 12%, rgba(212,175,92,0.40) 0%, transparent 34%),
    /* 墨のにじみ（左上の淡い陰影で奥行き） */
    radial-gradient(ellipse at 8% 4%,   rgba(60,45,28,0.16)  0%, transparent 40%),
    radial-gradient(ellipse at 50% 0%,  rgba(255,247,216,0.70) 0%, transparent 46%),
    radial-gradient(ellipse at 88% 92%, rgba(205,168,108,0.32) 0%, transparent 42%),
    radial-gradient(ellipse at 14% 64%, rgba(176,146,86,0.22)  0%, transparent 40%),
    linear-gradient(162deg, #f8eede 0%, #f1e6ce 22%, #e9dcbe 50%, #ddd0b2 76%, #d4c6aa 100%);
  background-size: 200% 200%;
  animation: washi-flow 30s ease-in-out infinite;
}
@keyframes washi-flow {
  0%,100% { background-position: 30% 20%; }
  50%      { background-position: 70% 80%; }
}
body.theme-washi::before {
  background:radial-gradient(ellipse at 50% 0%, rgba(225,195,135,0.24) 0%, transparent 52%);
  animation:washi-breathe 9s ease-in-out infinite;
}
@keyframes washi-breathe {
  0%,100% { opacity:.58; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.05); }
}
body.theme-washi::after {
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 29px, rgba(120,90,40,0.025) 29px, rgba(120,90,40,0.025) 30px),
    repeating-linear-gradient(0deg,  transparent 0px, transparent 29px, rgba(120,90,40,0.020) 29px, rgba(120,90,40,0.020) 30px);
  animation:none;
}
body.theme-washi header { background:rgba(232,218,188,0.94); border-bottom-color:rgba(100,70,30,0.22); }
body.theme-washi header::after { background:linear-gradient(90deg,transparent 0%,rgba(160,120,60,0.42) 18%,rgba(185,145,82,0.75) 50%,rgba(160,120,60,0.42) 82%,transparent 100%); background-size:200% 100%; }
body.theme-washi .nav a, body.theme-washi .nav-toggle span { color:#3d2808 !important; }
body.theme-washi .nav-toggle span { background:#3d2808 !important; }

/* ── 深海 ocean ──────────────────────────────────────────── */
body.theme-ocean {
  --sky-1:#1aa0c8; --sky-2:#0a5878; --sky-3:#063048;
  --sun:#3fe0f0; --sun-warm:#19c0d8; --sun-glow:rgba(0,200,235,0.4);
  --text:#d2f4ff; --text-soft:#86cfe6; --muted:#3f7088;
  --border:rgba(0,180,220,0.24); --surface:rgba(0,20,38,0.70);
  background:
    /* 水面から差す光 */
    radial-gradient(ellipse at 50% -4%, rgba(120,235,255,0.45) 0%, rgba(0,160,210,0.20) 22%, transparent 48%),
    /* 差し込む光芒（海中の柱） */
    radial-gradient(ellipse 8% 60% at 38% 0%, rgba(150,240,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 6% 50% at 62% 0%, rgba(120,225,255,0.14) 0%, transparent 70%),
    /* 深みの群青 */
    radial-gradient(ellipse at 24% 70%, rgba(0,80,140,0.42) 0%, transparent 44%),
    radial-gradient(ellipse at 50% 100%, rgba(0,40,90,0.40) 0%, transparent 46%),
    /* ベース：浅瀬の青→深海の闇 */
    linear-gradient(178deg, #0a4a6e 0%, #073a5a 14%, #052a44 30%, #03182e 52%, #020f1f 74%, #010a16 100%);
  background-size: 200% 200%;
  animation: ocean-flow 25s ease-in-out infinite;
}
@keyframes ocean-flow {
  0%,100% { background-position: 40% 30%; }
  33%      { background-position: 0%  80%; }
  66%      { background-position: 100% 60%; }
}
body.theme-ocean::before {
  background:radial-gradient(ellipse at 50% 0%, rgba(0,175,235,0.22) 0%, transparent 55%);
  animation:ocean-drift 12s ease-in-out infinite;
}
@keyframes ocean-drift {
  0%,100% { opacity:.52; transform:scaleX(1)    translateY(0); }
  50%      { opacity:.92; transform:scaleX(1.10) translateY(-10px); }
}
body.theme-ocean::after {
  background:repeating-linear-gradient(180deg, transparent 0px, transparent 7px, rgba(0,190,230,0.03) 7px, rgba(0,190,230,0.03) 8px);
  animation:ocean-ripple 2.5s linear infinite;
}
@keyframes ocean-ripple {
  0%   { background-position:0 0; }
  100% { background-position:0 80px; }
}
body.theme-ocean header { background:rgba(0,5,14,0.94); border-bottom-color:rgba(0,170,210,0.28); }
body.theme-ocean header::after { background:linear-gradient(90deg,transparent 0%,rgba(0,150,190,0.55) 18%,rgba(0,215,255,0.92) 50%,rgba(0,150,190,0.55) 82%,transparent 100%); background-size:200% 100%; }
.theme-ocean .bubble {
  position:fixed; border-radius:50%; pointer-events:none; z-index:2;
  border:1px solid rgba(0,210,250,0.35); background:rgba(0,190,230,0.06);
  animation:bubble-rise linear forwards;
}
@keyframes bubble-rise {
  from { opacity:.75; transform:translateY(0) scale(1); }
  to   { opacity:0;   transform:translateY(-110vh) scale(1.6); }
}

/* ── 深森 forest ─────────────────────────────────────────── */
body.theme-forest {
  --sky-1:#2d7545; --sky-2:#1e5830; --sky-3:#3d9858;
  --sun:#88dd66; --sun-warm:#aaee88; --sun-glow:rgba(80,195,60,0.40);
  --text:#d8f8d0; --text-soft:#90cc80; --muted:#557855;
  --border:rgba(80,172,60,0.22); --surface:rgba(8,28,8,0.65);
  background:
    /* 木漏れ日（梢から差す光の柱） */
    radial-gradient(ellipse 7% 55% at 40% 0%, rgba(190,255,140,0.22) 0%, transparent 72%),
    radial-gradient(ellipse 5% 45% at 60% 0%, rgba(160,240,120,0.16) 0%, transparent 72%),
    /* 梢の光 */
    radial-gradient(ellipse at 55% 0%, rgba(120,225,90,0.36) 0%, transparent 42%),
    /* 深い下生え */
    radial-gradient(ellipse at 18% 62%, rgba(20,80,16,0.55)  0%, transparent 42%),
    radial-gradient(ellipse at 84% 80%, rgba(14,58,10,0.48)  0%, transparent 38%),
    radial-gradient(ellipse at 48% 100%, rgba(6,34,4,0.42)   0%, transparent 40%),
    linear-gradient(165deg, #010a02 0%, #03140a 16%, #061d0a 38%, #04170b 62%, #020e05 82%, #010a02 100%);
  background-size: 200% 200%;
  animation: forest-flow 26s ease-in-out infinite;
}
@keyframes forest-flow {
  0%,100% { background-position: 55% 25%; }
  40%      { background-position: 10% 70%; }
  70%      { background-position: 90% 55%; }
}
body.theme-forest::before {
  background:
    radial-gradient(ellipse at 62% 0%, rgba(80,195,60,0.24) 0%, transparent 55%),
    radial-gradient(ellipse at 40% 80%, rgba(20,90,10,0.18) 0%, transparent 45%);
  animation:forest-breathe 10s ease-in-out infinite;
}
@keyframes forest-breathe {
  0%,100% { opacity:.52; transform:scale(1)    translateX(0); }
  50%      { opacity:.92; transform:scale(1.06) translateX(-15px); }
}
body.theme-forest::after {
  background:repeating-linear-gradient(115deg, transparent 0px, transparent 18px, rgba(60,140,30,0.018) 18px, rgba(60,140,30,0.018) 19px);
  animation:none;
}
body.theme-forest header { background:rgba(1,7,1,0.94); border-bottom-color:rgba(80,172,60,0.22); }
body.theme-forest header::after { background:linear-gradient(90deg,transparent 0%,rgba(60,160,38,0.55) 18%,rgba(100,215,70,0.92) 50%,rgba(60,160,38,0.55) 82%,transparent 100%); background-size:200% 100%; }
.theme-forest .firefly {
  position:fixed; pointer-events:none; z-index:2;
  width:4px; height:4px; border-radius:50%;
  background:rgba(160,255,80,0.95);
  box-shadow:0 0 8px 2px rgba(140,255,60,0.7), 0 0 20px rgba(100,220,40,0.4);
  animation:firefly-drift ease-in-out infinite;
}
@keyframes firefly-drift {
  0%,100% { opacity:.15; transform:translate(0,0); }
  25%      { opacity:.95; transform:translate(18px,-22px); }
  50%      { opacity:.50; transform:translate(-12px,-40px); }
  75%      { opacity:.88; transform:translate(25px,-58px); }
}

/* ── 原宿 candy（甘くて不思議なポップ・地味な紫から脱却） ───────── */
body.theme-candy {
  --sky-1:#ff5ec4; --sky-2:#a06bff; --sky-3:#ffb0ec;
  --sun:#ffe85a; --sun-warm:#ff9ed6; --sun-glow:rgba(255,110,210,0.5);
  --text:#fff2fb; --text-soft:#ffc4ee; --muted:#d07ec0;
  --border:rgba(255,140,225,0.34); --surface:rgba(74,12,86,0.5);
  background:
    /* キャンディの粒：黄・水色・ミント・ピンクを散らす（多色でポップに） */
    radial-gradient(circle at 16% 18%, rgba(255,232,90,0.55)  0%, transparent 22%),
    radial-gradient(circle at 84% 14%, rgba(90,224,255,0.50)  0%, transparent 22%),
    radial-gradient(circle at 78% 80%, rgba(120,255,200,0.42) 0%, transparent 24%),
    radial-gradient(circle at 24% 82%, rgba(255,120,210,0.50) 0%, transparent 26%),
    radial-gradient(ellipse at 50% 46%, rgba(255,150,235,0.26) 0%, transparent 40%),
    /* ベース：ぶどう＋わたあめ */
    linear-gradient(155deg,
      #3a0a52 0%, #5e1488 20%, #8a2bbe 40%,
      #b54cc8 56%, #8a2bbe 72%, #4a1066 100%);
  background-size: 200% 200%;
  animation: candy-flow 18s ease-in-out infinite;
}
@keyframes candy-flow {
  0%,100% { background-position: 0%  50%; }
  33%      { background-position: 100% 0%; }
  66%      { background-position: 60% 100%; }
}
body.theme-candy::before {
  background:
    radial-gradient(ellipse at 82% 6%,  rgba(255,232,90,0.30)  0%, rgba(255,110,210,0.16) 28%, transparent 52%),
    radial-gradient(ellipse at 18% 84%, rgba(120,255,210,0.14) 0%, transparent 42%);
  animation:candy-shine 4.5s ease-in-out infinite;
}
@keyframes candy-shine {
  0%,100% { opacity:.72; transform:scale(1)    rotate(0deg); }
  50%      { opacity:1;   transform:scale(1.10) rotate(2deg); }
}
body.theme-candy::after { opacity:.06; }
body.theme-candy header { background:rgba(40,6,52,0.92); border-bottom-color:rgba(255,110,210,0.34); }
body.theme-candy header::after { background:linear-gradient(90deg,transparent 0%,rgba(255,110,210,0.55) 14%,rgba(255,232,90,0.96) 38%,rgba(90,224,255,0.85) 62%,rgba(255,110,210,0.55) 86%,transparent 100%); background-size:200% 100%; }
/* キラキラ（絵文字なし・十字＋中心グローでCSS描画） */
.theme-candy .candy-sparkle {
  position:fixed; pointer-events:none; z-index:2;
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 0%, transparent 60%),
    linear-gradient(0deg,  transparent 47%, rgba(255,245,255,0.9) 47%, rgba(255,245,255,0.9) 53%, transparent 53%),
    linear-gradient(90deg, transparent 47%, rgba(255,245,255,0.9) 47%, rgba(255,245,255,0.9) 53%, transparent 53%);
  filter:drop-shadow(0 0 6px rgba(255,170,235,0.95));
  animation:candy-twirl linear forwards;
}
@keyframes candy-twirl {
  from { opacity:.95; transform:translateY(0)       rotate(0deg)   scale(1); }
  to   { opacity:0;   transform:translateY(-110px)  rotate(200deg) scale(0.3); }
}

/* ── 浅草 asakusa（赤提灯の夜祭・参道。暖色団子から脱却） ───────── */
body.theme-asakusa {
  --sky-1:#e0742e; --sky-2:#f0a050; --sky-3:#ffc878;
  --sun:#ffcc5a; --sun-warm:#ff9a3c; --sun-glow:rgba(255,170,60,0.5);
  --text:#fff2df; --text-soft:#ffce96; --muted:#b08658;
  --border:rgba(255,168,72,0.26); --surface:rgba(30,8,2,0.66);
  background:
    /* 参道に点る提灯のあかり（濃い赤＋橙） */
    radial-gradient(circle at 22% 60%, rgba(255,120,40,0.50) 0%, transparent 15%),
    radial-gradient(circle at 50% 56%, rgba(255,90,40,0.55)  0%, transparent 17%),
    radial-gradient(circle at 78% 62%, rgba(235,46,30,0.52)  0%, transparent 15%),
    /* 屋台のあかりだまり（赤橙・下） */
    radial-gradient(ellipse at 50% 100%, rgba(205,40,18,0.50) 0%, transparent 46%),
    /* 上空の深紅のにじみ */
    radial-gradient(ellipse at 60% 6%, rgba(150,18,28,0.45) 0%, transparent 44%),
    /* ベース：深紅〜黒の夜（赤提灯の赤） */
    linear-gradient(170deg,
      #1c0408 0%, #2a0608 16%, #380809 32%,
      #2c060a 50%, #1c0406 72%, #0e0204 100%);
  background-size: 200% 200%;
  animation: asakusa-flow 22s ease-in-out infinite;
}
@keyframes asakusa-flow {
  0%,100% { background-position: 50% 30%; }
  40%      { background-position: 70% 70%; }
  70%      { background-position: 30% 50%; }
}
body.theme-asakusa::before {
  background:radial-gradient(ellipse at 50% 60%, rgba(238,84,34,0.30) 0%, transparent 50%);
  animation:asakusa-fire 4s ease-in-out infinite;
}
@keyframes asakusa-fire {
  0%,100% { opacity:.6;  transform:scale(1)    translateY(0); }
  28%      { opacity:1;   transform:scale(1.06) translateY(-6px); }
  70%      { opacity:.78; transform:scale(1.03) translateY(4px); }
}
body.theme-asakusa::after { opacity:.04; }
body.theme-asakusa header { background:rgba(8,4,12,0.96); border-bottom-color:rgba(255,148,42,0.28); }
body.theme-asakusa header::after { background:linear-gradient(90deg,transparent 0%,rgba(205,80,0,0.55) 18%,rgba(255,205,52,0.96) 50%,rgba(205,80,0,0.55) 82%,transparent 100%); background-size:200% 100%; }
/* 赤提灯（絵文字なし・CSSで紙提灯を描く） */
.theme-asakusa .lantern {
  position:fixed; pointer-events:none; z-index:2;
  border-radius:46% / 38%;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(90,0,0,0.20) 4px 5px),
    radial-gradient(ellipse at 50% 40%, rgba(255,196,96,0.95) 0%, rgba(232,62,30,0.96) 60%, rgba(150,20,10,0.97) 100%);
  box-shadow:0 0 16px rgba(255,130,40,0.8), inset 0 0 8px rgba(255,224,150,0.5);
  animation:lantern-sway ease-in-out infinite;
  transform-origin:top center;
}
.theme-asakusa .lantern::before {
  content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:36%; height:5px; background:#241008; border-radius:2px;
}
.theme-asakusa .lantern::after {
  content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  width:26%; height:5px; background:#241008; border-radius:2px;
}
@keyframes lantern-sway {
  0%,100% { transform:rotate(-6deg); }
  50%      { transform:rotate(6deg); }
}

/* ── 雨 rain ─────────────────────────────────────────────── */
body.theme-rain {
  --sky-1:#4a6888; --sky-2:#3a5878; --sky-3:#607898;
  --sun:#90b8d8; --sun-warm:#78a8c8; --sun-glow:rgba(120,160,200,0.32);
  --text:#e0f2ff; --text-soft:#a0cae8; --muted:#5888a8;
  --border:rgba(100,165,215,0.22); --surface:rgba(8,18,36,0.68);
  background:
    radial-gradient(ellipse at 50%  0%, rgba(100,168,228,0.38) 0%, transparent 40%),
    radial-gradient(ellipse at 18% 48%, rgba(58,102,168,0.42)  0%, transparent 44%),
    radial-gradient(ellipse at 78% 68%, rgba(38,82,148,0.35)   0%, transparent 38%),
    radial-gradient(ellipse at 50% 100%, rgba(20,50,100,0.30)  0%, transparent 40%),
    linear-gradient(168deg, #040b16 0%, #080f20 16%, #0c1835 36%, #0a1430 58%, #06080e 80%, #040b16 100%);
  background-size: 200% 200%;
  animation: rain-flow 22s ease-in-out infinite;
}
@keyframes rain-flow {
  0%,100% { background-position: 50% 20%; }
  40%      { background-position: 0%  80%; }
  70%      { background-position: 100% 50%; }
}
body.theme-rain::before {
  background:radial-gradient(ellipse at 50% 0%, rgba(100,168,228,0.24) 0%, transparent 56%);
  animation:rain-cloud 14s ease-in-out infinite;
}
@keyframes rain-cloud {
  0%,100% { opacity:.52; transform:translateX(0); }
  50%      { opacity:.88; transform:translateX(20px); }
}
body.theme-rain::after {
  background:repeating-linear-gradient(
    173deg,
    transparent 0px, transparent 3px,
    rgba(150,205,248,0.05) 3px, rgba(150,205,248,0.05) 4px
  );
  animation:rain-streak 0.65s linear infinite;
}
@keyframes rain-streak {
  0%   { background-position:0 0; }
  100% { background-position:25px 130px; }
}
body.theme-rain header { background:rgba(3,7,15,0.94); border-bottom-color:rgba(100,165,215,0.28); }
body.theme-rain header::after { background:linear-gradient(90deg,transparent 0%,rgba(78,145,205,0.55) 18%,rgba(160,215,255,0.92) 50%,rgba(78,145,205,0.55) 82%,transparent 100%); background-size:200% 100%; }
.theme-rain .raindrop {
  position:fixed; pointer-events:none; z-index:2;
  width:1px; background:linear-gradient(to bottom, transparent, rgba(160,215,255,0.65));
  animation:raindrop-fall linear forwards;
}

/* ============================================================
   RARE THEMES (4)
   ============================================================ */

/* ── 百鬼夜行 oni ─────────────────────────────────────────── */
body.theme-oni {
  --sky-1:#c81428; --sky-2:#7a0010; --sky-3:#e02038;
  --sun:#ff3838; --sun-warm:#c8000f; --sun-glow:rgba(230,0,18,0.45);
  --text:#ffe6e6; --text-soft:#ff9090; --muted:#a85050;
  --border:rgba(210,30,30,0.28); --surface:rgba(24,0,2,0.74);
  background:
    /* 血の月（上） */
    radial-gradient(ellipse at 50% 16%, rgba(220,0,16,0.50) 0%, rgba(120,0,0,0.24) 28%, transparent 54%),
    /* 鬼火：冷たい緑青の妖火が闇に漂う（赤一色を断つ差し色） */
    radial-gradient(circle at 18% 66%, rgba(80,255,170,0.22)  0%, transparent 13%),
    radial-gradient(circle at 84% 52%, rgba(110,200,255,0.18) 0%, transparent 12%),
    /* 闇だまり（下） */
    radial-gradient(ellipse at 50% 100%, rgba(60,0,0,0.40) 0%, transparent 42%),
    /* ベース：黒に沈む赤 */
    linear-gradient(165deg, #060000 0%, #100002 16%, #1a0205 32%, #120002 56%, #0a0001 78%, #050000 100%);
  background-size: 200% 200%;
  animation: oni-flow 18s ease-in-out infinite;
}
@keyframes oni-flow {
  0%,100% { background-position: 50% 30%; }
  33%      { background-position: 80% 80%; }
  66%      { background-position: 20% 60%; }
}
body.theme-oni::before {
  background:radial-gradient(ellipse at 50% 18%, rgba(210,0,10,0.32) 0%, transparent 55%);
  animation:oni-flicker 2.2s ease-in-out infinite;
}
@keyframes oni-flicker {
  0%,100% { opacity:.52; transform:scale(1); }
  18%      { opacity:1;   transform:scale(1.06); }
  36%      { opacity:.68; transform:scale(1.02); }
  60%      { opacity:.98; transform:scale(1.04); }
  80%      { opacity:.58; transform:scale(1); }
}
body.theme-oni::after { opacity:.04; }
body.theme-oni header { background:rgba(5,0,0,0.97); border-bottom-color:rgba(210,0,10,0.32); }
body.theme-oni header::after { background:linear-gradient(90deg,transparent 0%,rgba(168,0,0,0.55) 18%,rgba(228,0,12,0.96) 50%,rgba(168,0,0,0.55) 82%,transparent 100%); background-size:200% 100%; }

/* ── 夕焼け sunset ───────────────────────────────────────── */
body.theme-sunset {
  --sky-1:#ff7a3c; --sky-2:#ff5a7e; --sky-3:#ffb27a;
  --sun:#ffd66a; --sun-warm:#ff7a3c; --sun-glow:rgba(255,120,60,0.55);
  --text:#fff2ea; --text-soft:#ffc8b0; --muted:#c08068;
  --border:rgba(255,150,100,0.26); --surface:rgba(40,12,30,0.60);
  background:
    /* 沈む太陽（地平のまぶしい黄金の核） */
    radial-gradient(circle at 50% 82%, rgba(255,238,170,0.95) 0%, rgba(255,150,40,0.50) 7%, rgba(255,90,30,0.25) 16%, transparent 34%),
    /* 夕陽に染まる横雲 */
    radial-gradient(ellipse 60% 6% at 50% 60%, rgba(120,40,80,0.50) 0%, transparent 70%),
    radial-gradient(ellipse 50% 5% at 40% 70%, rgba(180,60,70,0.40) 0%, transparent 70%),
    radial-gradient(ellipse 40% 4% at 64% 50%, rgba(90,30,80,0.45)  0%, transparent 70%),
    /* 空：紫紺(上)→茜→橙(地平) */
    linear-gradient(180deg,
      #1a0838 0%, #3a1050 16%, #6a1a58 32%,
      #a8305a 48%, #d8543e 62%, #f08038 76%, #ffb15a 100%);
  background-size: 200% 200%;
  animation: sunset-flow 26s ease-in-out infinite;
}
@keyframes sunset-flow {
  0%,100% { background-position: 50% 40%; }
  50%      { background-position: 55% 65%; }
}
body.theme-sunset::before {
  background:radial-gradient(circle at 50% 82%, rgba(255,205,95,0.42) 0%, rgba(255,110,40,0.16) 30%, transparent 56%);
  animation:sunset-glow 5.5s ease-in-out infinite;
}
@keyframes sunset-glow {
  0%,100% { opacity:.72; transform:scale(1)    translateY(0); }
  50%      { opacity:1;   transform:scale(1.08) translateY(-12px); }
}
body.theme-sunset::after { opacity:.04; }
body.theme-sunset header { background:rgba(5,2,10,0.94); border-bottom-color:rgba(255,128,42,0.32); }
body.theme-sunset header::after { background:linear-gradient(90deg,transparent 0%,rgba(225,78,0,0.55) 18%,rgba(255,168,0,0.96) 50%,rgba(225,78,0,0.55) 82%,transparent 100%); background-size:200% 100%; }

/* ── 真夏 summer（甘酸っぱい青春の空） ───────────────────────
   灼熱オレンジを廃し、青空・白い入道雲・地平のほんのり桃色で
   "あの夏" の甘酸っぱさを出す。単色グラデ禁止・多層構成 */
body.theme-summer {
  --sky-1:#3f9ad8; --sky-2:#74c0ec; --sky-3:#b6e4ff;
  --sun:#fff3c4; --sun-warm:#ffe392; --sun-glow:rgba(255,232,150,0.50);
  --text:#f4fbff; --text-soft:#cfe8fb; --muted:#7ba6c8;
  --border:rgba(184,226,255,0.30); --surface:rgba(20,56,96,0.50);
  background:
    /* 午後の陽（右上・暖色のアクセント） */
    radial-gradient(ellipse at 82% 10%, rgba(255,247,205,0.55) 0%, rgba(255,226,140,0.22) 15%, transparent 40%),
    /* 入道雲：地平から大きく立ちのぼる白い塔（はっきり見せる） */
    radial-gradient(ellipse 56% 56% at 22% 102%, rgba(255,255,255,0.99) 0%, rgba(236,247,255,0.66) 28%, rgba(214,236,255,0.28) 46%, transparent 62%),
    radial-gradient(ellipse 50% 48% at 60% 106%, rgba(255,255,255,0.95) 0%, rgba(226,242,255,0.55) 30%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 104%, rgba(250,253,255,0.88) 0%, rgba(224,240,255,0.4) 30%, transparent 56%),
    /* 中空のちぎれ雲（単調さを断つ） */
    radial-gradient(ellipse 26% 10% at 16% 46%, rgba(255,255,255,0.34) 0%, transparent 56%),
    radial-gradient(ellipse 18% 7%  at 74% 34%, rgba(255,255,255,0.24) 0%, transparent 56%),
    /* 甘酸っぱさ：地平のほんのり桃色 */
    radial-gradient(ellipse at 52% 102%, rgba(255,196,176,0.30) 0%, transparent 44%),
    /* 青空ベース：濃紺→水色 */
    linear-gradient(180deg,
      #0e3d72 0%, #18599c 16%, #2a77ba 32%,
      #4498d4 50%, #6fbae8 66%, #a2daf6 82%, #d4f0ff 100%);
  background-size: 200% 200%;
  animation: summer-flow 30s ease-in-out infinite;
}
@keyframes summer-flow {
  0%,100% { background-position: 40% 30%; }
  50%      { background-position: 60% 70%; }
}
/* ゆっくり流れる雲と陽の呼吸 */
body.theme-summer::before {
  background:
    radial-gradient(ellipse at 82% 10%, rgba(255,249,215,0.40) 0%, transparent 44%),
    radial-gradient(ellipse 42% 22% at 28% 92%, rgba(255,255,255,0.55) 0%, transparent 62%),
    radial-gradient(ellipse 32% 17% at 64% 98%, rgba(255,255,255,0.42) 0%, transparent 60%);
  animation:summer-clouds 26s ease-in-out infinite;
}
@keyframes summer-clouds {
  0%,100% { opacity:.78; transform:translateX(0)     scale(1); }
  50%      { opacity:1;   transform:translateX(-34px) scale(1.05); }
}
body.theme-summer::after { opacity:.04; }
body.theme-summer header { background:rgba(13,40,76,0.80); border-bottom-color:rgba(184,226,255,0.30); }
body.theme-summer header::after { background:linear-gradient(90deg,transparent 0%,rgba(116,192,236,0.55) 18%,rgba(255,244,190,0.96) 50%,rgba(116,192,236,0.55) 82%,transparent 100%); background-size:200% 100%; }
/* 光の粒（陽だまりに舞う綿毛のような粒。絵文字不使用・CSS形状） */
.theme-summer .summer-mote {
  position:fixed; pointer-events:none; z-index:2; border-radius:50%;
  background:radial-gradient(circle, rgba(255,251,228,0.95) 0%, rgba(255,236,172,0.42) 55%, transparent 76%);
  filter:drop-shadow(0 0 5px rgba(255,238,180,0.7));
  animation:summer-mote-drift linear forwards;
}
@keyframes summer-mote-drift {
  0%   { opacity:0;   transform:translateY(0)     translateX(0)             scale(.65); }
  15%  { opacity:.92; }
  70%  { opacity:.65; }
  100% { opacity:0;   transform:translateY(-62vh) translateX(var(--mx,28px)) scale(1.12); }
}
/* 地面付近の陽炎 */
.theme-summer .heat-shimmer {
  position:fixed; bottom:0; left:0; right:0; height:32vh;
  pointer-events:none; z-index:0;
  background:linear-gradient(to top, rgba(180,225,255,0.06), transparent);
  animation:heat-wave 3.4s ease-in-out infinite;
}
@keyframes heat-wave {
  0%,100% { transform:scaleX(1)     skewX(0deg); }
  50%      { transform:scaleX(1.014) skewX(0.4deg); }
}

/* ── 星空 starry ─────────────────────────────────────────── */
body.theme-starry {
  --sky-1:#101830; --sky-2:#182040; --sky-3:#202850;
  --sun:#fff8e0; --sun-warm:#ffeebb; --sun-glow:rgba(255,240,200,0.28);
  --text:#f0f5ff; --text-soft:#c0d2f2; --muted:#6878a8;
  --border:rgba(162,185,255,0.20); --surface:rgba(6,10,28,0.68);
  background:
    radial-gradient(ellipse at 35% 25%, rgba(210,185,255,0.15) 0%, transparent 42%),
    radial-gradient(ellipse at 78% 62%, rgba(155,165,255,0.12) 0%, transparent 36%),
    radial-gradient(ellipse at 60% 85%, rgba(100,120,220,0.12) 0%, transparent 32%),
    linear-gradient(168deg, #010308 0%, #030710 14%, #050b18 32%, #06101e 52%, #050916 72%, #020408 100%);
  background-size: 200% 200%;
  animation: starry-flow 35s ease-in-out infinite;
}
@keyframes starry-flow {
  0%,100% { background-position: 30% 40%; }
  50%      { background-position: 70% 60%; }
}
body.theme-starry::before {
  background:
    radial-gradient(ellipse at 35% 25%, rgba(200,180,255,0.14) 0%, transparent 56%),
    radial-gradient(ellipse at 78% 62%, rgba(155,165,255,0.10) 0%, transparent 46%);
  animation:starry-drift 7s ease-in-out infinite;
}
@keyframes starry-drift {
  0%,100% { opacity:.42; transform:scale(1)    translateX(0); }
  50%      { opacity:.92; transform:scale(1.06) translateX(10px); }
}
body.theme-starry::after { opacity:0; }
body.theme-starry header { background:rgba(1,3,7,0.96); border-bottom-color:rgba(162,185,255,0.22); }
body.theme-starry header::after { background:linear-gradient(90deg,transparent 0%,rgba(142,162,255,0.45) 18%,rgba(205,215,255,0.88) 50%,rgba(142,162,255,0.45) 82%,transparent 100%); background-size:200% 100%; }
.theme-starry .star-dot {
  position:fixed; border-radius:50%; background:#fff;
  pointer-events:none; z-index:1; animation:star-twinkle-dot ease-in-out infinite;
}
@keyframes star-twinkle-dot {
  0%,100% { opacity:.28; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.5); }
}

/* ── ドリームコア dreamcore ──────────────────────────────────── */
body.theme-dreamcore {
  --sky-1:#ff6eb4; --sky-2:#c061f7; --sky-3:#62e8ff;
  --sun:#ffe880; --sun-warm:#ff98e8; --sun-glow:rgba(255,110,200,0.55);
  --text:#fff2ff; --text-soft:#ffc8f8; --muted:#c888e8;
  --border:rgba(255,140,240,0.28); --surface:rgba(60,0,80,0.48);
  background:
    radial-gradient(ellipse at 14%  6%, rgba(255,210,60,0.62)  0%, rgba(255,80,200,0.28) 26%, transparent 50%),
    radial-gradient(ellipse at 86%  8%, rgba(80,240,255,0.58)  0%, rgba(160,80,255,0.28) 24%, transparent 48%),
    radial-gradient(ellipse at 50% 50%, rgba(255,80,180,0.20)  0%, transparent 36%),
    radial-gradient(ellipse at 26% 90%, rgba(140,60,255,0.40)  0%, transparent 42%),
    radial-gradient(ellipse at 74% 88%, rgba(60,220,160,0.32)  0%, transparent 40%),
    radial-gradient(ellipse at 50%  0%, rgba(255,160,240,0.35) 0%, transparent 38%),
    linear-gradient(160deg,
      #1c0035 0%, #380058 16%, #5c0065 32%,
      #800068 50%, #580060 68%, #340050 84%, #1c0035 100%
    );
  background-size: 200% 200%;
  animation: dreamcore-flow 14s ease-in-out infinite;
}
@keyframes dreamcore-flow {
  0%,100% { background-position: 25% 15%; }
  25%      { background-position: 78% 42%; }
  50%      { background-position: 55% 88%; }
  75%      { background-position:  8% 55%; }
}
body.theme-dreamcore::before {
  background:
    radial-gradient(ellipse at 14%  6%, rgba(255,190,60,0.36)  0%, rgba(255,60,200,0.18)  30%, transparent 56%),
    radial-gradient(ellipse at 86%  8%, rgba(60,220,255,0.32)  0%, rgba(160,60,255,0.15)  28%, transparent 54%),
    radial-gradient(ellipse at 50% 50%, rgba(255,120,230,0.14) 0%, transparent 48%);
  animation: dreamcore-pulse 5s ease-in-out infinite;
}
@keyframes dreamcore-pulse {
  0%,100% { opacity:.70; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.08); }
}
body.theme-dreamcore::after { opacity:.04; }
body.theme-dreamcore header { background:rgba(18,0,32,0.94); border-bottom-color:rgba(255,110,220,0.38); }
body.theme-dreamcore header::after {
  background:linear-gradient(90deg,transparent 0%,rgba(255,80,210,0.55) 14%,rgba(255,225,80,0.96) 36%,rgba(100,240,255,0.96) 64%,rgba(200,80,255,0.55) 86%,transparent 100%);
  background-size:200% 100%;
  animation:dreamcore-header-shift 4s linear infinite;
}
@keyframes dreamcore-header-shift {
  0%   { background-position:0% 0%; }
  100% { background-position:200% 0%; }
}
.theme-dreamcore .dream-bubble {
  position:fixed; border-radius:50%; pointer-events:none; z-index:2;
  animation:dream-float linear forwards;
}
@keyframes dream-float {
  0%   { transform:translateY(0)      translateX(0)                scale(1.0); opacity:.78; }
  30%  { transform:translateY(-30vh)  translateX(var(--dx,18px))   scale(1.12); opacity:.65; }
  70%  { transform:translateY(-75vh)  translateX(var(--dx2,-15px)) scale(.90);  opacity:.42; }
  100% { transform:translateY(-115vh) translateX(var(--dx3,8px))   scale(.55);  opacity:0; }
}
.theme-dreamcore .dream-sparkle {
  position:fixed; pointer-events:none; z-index:2;
  filter:drop-shadow(0 0 6px var(--dc,#ff6eb4));
  animation:dream-sparkle-out linear forwards;
}
.theme-dreamcore .dream-sparkle::before,
.theme-dreamcore .dream-sparkle::after {
  content:''; display:block; position:absolute; inset:0;
  background:var(--dc,#ff6eb4); border-radius:3px;
}
.theme-dreamcore .dream-sparkle::before { transform:scaleY(0.22); }
.theme-dreamcore .dream-sparkle::after  { transform:scaleX(0.22); }
@keyframes dream-sparkle-out {
  0%   { opacity:1; transform:translateY(0)      rotate(0deg)   scale(1.2); }
  100% { opacity:0; transform:translateY(-130px) rotate(180deg) scale(.2); }
}

/* ============================================================
   SECRET THEMES (9)
   ============================================================ */

/* ── 氷晶 ice（明るい氷原・深海oceanと明確に差別化） ───────────── */
body.theme-ice {
  --sky-1:#34c2c8; --sky-2:#8fe6e2; --sky-3:#cdf6f2;
  --sun:#f0ffff; --sun-warm:#caf6f2; --sun-glow:rgba(200,248,244,0.55);
  --text:#eafdfb; --text-soft:#b6e4df; --muted:#6fa6a4;
  --border:rgba(200,248,244,0.36); --surface:rgba(8,44,52,0.56);
  background:
    /* 凍てつく白い冷光（中央上・夏の暖色太陽と対極） */
    radial-gradient(ellipse at 50% 8%, rgba(240,255,255,0.92) 0%, rgba(170,234,232,0.30) 26%, transparent 56%),
    /* 霜の白いにじみ（四隅） */
    radial-gradient(circle at 12% 18%, rgba(224,252,250,0.50) 0%, transparent 22%),
    radial-gradient(circle at 88% 22%, rgba(206,246,242,0.45) 0%, transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(120,220,216,0.40) 0%, transparent 42%),
    /* ベース：氷のターコイズ（青空とは別系統の青緑） */
    linear-gradient(170deg,
      #073238 0%, #0a4650 16%, #0f6168 32%,
      #18838a 50%, #34a6a8 66%, #6fc8c6 84%, #b6ebe6 100%);
  background-size: 200% 200%;
  animation: ice-flow 30s ease-in-out infinite;
}
@keyframes ice-flow {
  0%,100% { background-position: 40% 20%; }
  40%      { background-position: 90% 60%; }
  70%      { background-position: 20% 80%; }
}
body.theme-ice::before {
  background:radial-gradient(ellipse at 50% 8%, rgba(232,255,253,0.45) 0%, transparent 56%);
  animation:ice-shimmer 9s ease-in-out infinite;
}
@keyframes ice-shimmer {
  0%,100% { opacity:.55; transform:scaleX(1) translateY(0); }
  50%      { opacity:1;   transform:scaleX(1.06) translateY(-6px); }
}
/* 氷の結晶面（白いファセットを強めに・氷の質感） */
body.theme-ice::after {
  background:
    repeating-linear-gradient(60deg,  transparent 0px, transparent 13px, rgba(232,252,250,0.10) 13px, rgba(232,252,250,0.10) 14px),
    repeating-linear-gradient(120deg, transparent 0px, transparent 13px, rgba(232,252,250,0.08) 13px, rgba(232,252,250,0.08) 14px),
    repeating-linear-gradient(0deg,   transparent 0px, transparent 26px, rgba(232,252,250,0.05) 26px, rgba(232,252,250,0.05) 27px);
  animation:none;
}
body.theme-ice header { background:rgba(6,40,44,0.90); border-bottom-color:rgba(200,248,244,0.34); }
body.theme-ice header::after { background:linear-gradient(90deg,transparent 0%,rgba(90,208,204,0.5) 18%,rgba(228,255,252,0.95) 50%,rgba(90,208,204,0.5) 82%,transparent 100%); background-size:200% 100%; }
/* 雪の結晶（絵文字なし・3本の交差線で6方の結晶を描く） */
.theme-ice .snowflake {
  position:fixed; pointer-events:none; z-index:2;
  background:
    linear-gradient(0deg,   transparent 45%, rgba(232,249,255,0.95) 45%, rgba(232,249,255,0.95) 55%, transparent 55%),
    linear-gradient(60deg,  transparent 45%, rgba(225,246,255,0.88) 45%, rgba(225,246,255,0.88) 55%, transparent 55%),
    linear-gradient(120deg, transparent 45%, rgba(225,246,255,0.88) 45%, rgba(225,246,255,0.88) 55%, transparent 55%);
  filter:drop-shadow(0 0 4px rgba(190,238,255,0.95));
  animation:snow-fall linear forwards;
}
@keyframes snow-fall {
  0%   { transform:translateY(-20px) rotate(0deg)   translateX(0);    opacity:.9; }
  100% { transform:translateY(112vh) rotate(420deg) translateX(45px); opacity:0; }
}

/* ── サイバー江戸 cyberedo ──────────────────────────────────── */
body.theme-cyberedo {
  --sky-1:#00e6ff; --sky-2:#ff2d8e; --sky-3:#ffb347;
  --sun:#00e6ff; --sun-warm:#ff2d8e; --sun-glow:rgba(0,230,255,0.5);
  --text:#eafdff; --text-soft:#a6e6ff; --muted:#6f9fc0;
  --border:rgba(0,230,255,0.30); --surface:rgba(10,2,26,0.74);
  background:
    /* ネオン群：シアン・マゼンタ・橙(江戸提灯)・紫 */
    radial-gradient(ellipse at 16% 14%, rgba(0,230,255,0.40)  0%, transparent 30%),
    radial-gradient(ellipse at 86% 18%, rgba(255,45,142,0.38) 0%, transparent 30%),
    radial-gradient(ellipse at 72% 78%, rgba(255,150,40,0.32) 0%, transparent 30%),
    radial-gradient(ellipse at 24% 82%, rgba(150,40,255,0.30) 0%, transparent 30%),
    /* 濡れた路面の反射（下の発光） */
    radial-gradient(ellipse at 50% 100%, rgba(0,180,230,0.30) 0%, transparent 42%),
    /* ベース：藍黒のサイバー夜 */
    linear-gradient(165deg, #06010f 0%, #0a0420 16%, #0e0628 32%, #0a0420 56%, #06030f 78%, #040108 100%);
  background-size: 200% 200%;
  animation: cyberedo-flow 18s ease-in-out infinite;
}
@keyframes cyberedo-flow {
  0%,100% { background-position: 60% 20%; }
  33%      { background-position: 20% 70%; }
  66%      { background-position: 90% 50%; }
}
body.theme-cyberedo::before {
  background:
    radial-gradient(ellipse at 16% 14%, rgba(0,230,255,0.22)  0%, transparent 44%),
    radial-gradient(ellipse at 86% 18%, rgba(255,45,142,0.18) 0%, transparent 44%);
  animation:cyberedo-glitch 4.2s ease-in-out infinite;
}
@keyframes cyberedo-glitch {
  0%,100% { opacity:.62; transform:scaleX(1) translateX(0); }
  8%       { opacity:1;   transform:scaleX(1.014) translateX(2px); }
  9%       { opacity:.38; transform:scaleX(0.99) translateX(-2px); }
  50%      { opacity:.82; transform:scaleX(1) translateX(0); }
}
body.theme-cyberedo::after {
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 39px, rgba(0,230,255,0.05) 39px, rgba(0,230,255,0.05) 40px),
    repeating-linear-gradient(0deg,  transparent 0px, transparent 39px, rgba(255,45,142,0.035) 39px, rgba(255,45,142,0.035) 40px);
  animation:none;
}
body.theme-cyberedo header { background:rgba(6,2,16,0.96); border-bottom-color:rgba(0,230,255,0.30); }
body.theme-cyberedo header::after { background:linear-gradient(90deg,transparent 0%,rgba(0,230,255,0.7) 18%,rgba(255,45,142,0.92) 50%,rgba(255,150,40,0.6) 82%,transparent 100%); background-size:200% 100%; }
.theme-cyberedo .cyber-particle,
.theme-cyberedo-s .cyber-particle {
  position:fixed; pointer-events:none; z-index:2;
  animation:cyber-float linear forwards;
}
@keyframes cyber-float {
  from { opacity:.88; transform:translateY(0) translateX(0); }
  to   { opacity:0;   transform:translateY(-88px) translateX(var(--cx)); }
}

/* ── 流星夜 meteor-s ─────────────────────────────────────── */
body.theme-meteor-s {
  --sky-1:#3a5cc8; --sky-2:#1a2c6a; --sky-3:#6a8cf0;
  --sun:#ffd98a; --sun-warm:#ffb04a; --sun-glow:rgba(255,200,120,0.45);
  --text:#eef2ff; --text-soft:#b6c4f0; --muted:#5a6aa0;
  --border:rgba(150,180,255,0.24); --surface:rgba(6,10,30,0.72);
  background:
    /* 流星のふるさと（淡い暖色の放射点・右上） */
    radial-gradient(ellipse at 70% 8%, rgba(255,210,130,0.30) 0%, rgba(120,90,200,0.12) 30%, transparent 56%),
    /* 天の川（斜めに横切る淡い光帯） */
    radial-gradient(ellipse 70% 14% at 40% 46%, rgba(150,170,255,0.16) 0%, transparent 60%),
    /* 深い夜のにじみ */
    radial-gradient(ellipse at 20% 80%, rgba(40,60,150,0.30) 0%, transparent 42%),
    radial-gradient(ellipse at 86% 64%, rgba(60,40,160,0.22) 0%, transparent 38%),
    /* ベース：濃紺の夜空（紫の濁りを抜く） */
    linear-gradient(165deg, #02030c 0%, #050a1e 16%, #081032 34%, #0a1430 54%, #060c22 76%, #02040e 100%);
  background-size: 200% 200%;
  animation: meteor-s-flow 25s ease-in-out infinite;
}
@keyframes meteor-s-flow {
  0%,100% { background-position: 55% 25%; }
  33%      { background-position: 10% 75%; }
  66%      { background-position: 90% 60%; }
}
body.theme-meteor-s::before {
  background:
    radial-gradient(ellipse at 70% 8%, rgba(255,210,130,0.22) 0%, rgba(120,90,200,0.10) 32%, transparent 55%),
    radial-gradient(ellipse at 70% 8%, rgba(255,224,150,0.10) 0%, transparent 72%);
  animation:meteor-s-breathe 5.5s ease-in-out infinite;
}
@keyframes meteor-s-breathe {
  0%,100% { opacity:.62; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.08); }
}
body.theme-meteor-s::after { opacity:0; }
body.theme-meteor-s header { background:rgba(1,1,5,0.97); border-bottom-color:rgba(185,145,255,0.28); }
body.theme-meteor-s header::after { background:linear-gradient(90deg,transparent 0%,rgba(142,82,255,0.45) 18%,rgba(255,205,62,0.92) 50%,rgba(142,82,255,0.45) 82%,transparent 100%); background-size:200% 100%; }
.theme-meteor-s .meteor-streak {
  position:fixed; pointer-events:none; z-index:2;
  width:2px; border-radius:1px;
  background:linear-gradient(to bottom, rgba(255,255,255,.98), rgba(200,180,255,.85), transparent);
  transform:rotate(var(--angle,30deg));
  animation:meteor-drop linear forwards;
}
@keyframes meteor-drop {
  0%   { opacity:.92; transform:rotate(var(--angle,30deg)) translateY(0); }
  100% { opacity:0;   transform:rotate(var(--angle,30deg)) translateY(115vh); }
}

/* ── 花火 fireworks ──────────────────────────────────────── */
body.theme-fireworks {
  --sky-1:#182038; --sky-2:#101828; --sky-3:#202840;
  --sun:#ffee62; --sun-warm:#ff8848; --sun-glow:rgba(255,208,82,0.45);
  --text:#fff8e8; --text-soft:#ffdd9f; --muted:#8888a0;
  --border:rgba(255,205,102,0.22); --surface:rgba(6,8,22,0.72);
  background:
    radial-gradient(ellipse at 28% 32%, rgba(255,50,108,0.25)  0%, transparent 30%),
    radial-gradient(ellipse at 72% 22%, rgba(50,208,255,0.18)  0%, transparent 28%),
    radial-gradient(ellipse at 55% 52%, rgba(255,228,0,0.18)   0%, transparent 28%),
    radial-gradient(ellipse at 18% 72%, rgba(208,50,255,0.18)  0%, transparent 28%),
    radial-gradient(ellipse at 85% 68%, rgba(0,255,108,0.14)   0%, transparent 26%),
    linear-gradient(168deg, #01030a 0%, #030811 14%, #050a15 28%, #040810 52%, #020506 72%, #01020a 100%);
  background-size: 200% 200%;
  animation: fireworks-flow 20s ease-in-out infinite;
}
@keyframes fireworks-flow {
  0%,100% { background-position: 40% 30%; }
  33%      { background-position: 80% 70%; }
  66%      { background-position: 20% 60%; }
}
body.theme-fireworks::before {
  background:
    radial-gradient(ellipse at 28% 32%, rgba(255,50,108,0.18) 0%, transparent 42%),
    radial-gradient(ellipse at 72% 22%, rgba(50,208,255,0.14) 0%, transparent 40%);
  animation:fireworks-glow 5.5s ease-in-out infinite;
}
@keyframes fireworks-glow {
  0%,100% { opacity:.42; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.08); }
}
body.theme-fireworks::after { opacity:0; }
body.theme-fireworks header { background:rgba(1,3,8,0.97); border-bottom-color:rgba(255,185,52,0.28); }
body.theme-fireworks header::after { background:linear-gradient(90deg,transparent 0%,rgba(255,50,108,0.45) 18%,rgba(255,228,0,0.92) 50%,rgba(50,208,255,0.45) 82%,transparent 100%); background-size:200% 100%; }
.theme-fireworks .fw-burst {
  position:fixed; pointer-events:none; z-index:2;
  border-radius:50%;
  animation:fw-particle cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes fw-particle {
  0%   { opacity:1;   transform:translate(0,0) scale(1.8); filter:brightness(2.5); }
  35%  { opacity:.95; filter:brightness(1.6); }
  80%  { opacity:.5; }
  100% { opacity:0;   transform:translate(var(--tx),var(--ty)) scale(0.1); filter:brightness(0.5); }
}
.theme-fireworks .fw-flash {
  position:fixed; pointer-events:none; z-index:3;
  border-radius:50%;
  animation:fw-flash-anim ease-out forwards;
}
@keyframes fw-flash-anim {
  0%   { opacity:.95; transform:scale(0.1); }
  25%  { opacity:.7;  transform:scale(1); }
  100% { opacity:0;   transform:scale(2.5); }
}

/* ── 戸締り shutter ──────────────────────────────────────── */
body.theme-shutter {
  --sky-1:#303040; --sky-2:#202030; --sky-3:#404050;
  --sun:#8090b0; --sun-warm:#7080a0; --sun-glow:rgba(100,110,140,0.32);
  --text:#d0d8e8; --text-soft:#9098b0; --muted:#505868;
  --border:rgba(120,130,162,0.20); --surface:rgba(6,8,18,0.78);
  background:
    radial-gradient(ellipse at 50% 28%, rgba(108,112,155,0.24) 0%, transparent 52%),
    radial-gradient(ellipse at 18% 68%, rgba(62,72,105,0.28)   0%, transparent 40%),
    radial-gradient(ellipse at 82% 42%, rgba(42,48,80,0.22)    0%, transparent 36%),
    linear-gradient(168deg, #030408 0%, #070910 16%, #0b0d18 34%, #08090e 58%, #050608 78%, #030408 100%);
  background-size: 200% 200%;
  animation: shutter-flow 35s ease-in-out infinite;
}
@keyframes shutter-flow {
  0%,100% { background-position: 50% 50%; }
  50%      { background-position: 55% 55%; }
}
body.theme-shutter::before {
  background:radial-gradient(ellipse at 50% 28%, rgba(108,122,162,0.18) 0%, transparent 56%);
  animation:shutter-breathe 14s ease-in-out infinite;
}
@keyframes shutter-breathe {
  0%,100% { opacity:.38; }
  50%      { opacity:.78; }
}
body.theme-shutter::after {
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 19px, rgba(120,130,162,0.030) 19px, rgba(120,130,162,0.030) 20px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 39px, rgba(120,130,162,0.018) 39px, rgba(120,130,162,0.018) 40px);
  animation:none;
}
body.theme-shutter header { background:rgba(3,3,7,0.97); border-bottom-color:rgba(100,110,142,0.22); }
body.theme-shutter header::after { background:linear-gradient(90deg,transparent 0%,rgba(78,90,122,0.42) 18%,rgba(118,138,180,0.78) 50%,rgba(78,90,122,0.42) 82%,transparent 100%); background-size:200% 100%; }
.theme-shutter .shutter-panel {
  position:fixed; top:0; pointer-events:none; z-index:1;
  height:100vh; background:rgba(4,4,8,0.45);
  animation:shutter-close ease-in forwards;
}
@keyframes shutter-close {
  from { opacity:0; transform:scaleX(0); transform-origin:left; }
  to   { opacity:1; transform:scaleX(1); transform-origin:left; }
}

/* ── 隠し桜 hsakura ──────────────────────────────────────── */
body.theme-hsakura {
  --sky-1:#d888aa; --sky-2:#eaaabb; --sky-3:#ffc8d8;
  --sun:#ffe0ec; --sun-warm:#ffc8dc; --sun-glow:rgba(255,195,218,0.45);
  --text:#fff5f8; --text-soft:#ffd8e8; --muted:#e8a0be;
  --border:rgba(255,175,205,0.28); --surface:rgba(98,28,52,0.42);
  background:
    radial-gradient(ellipse at 50% 9%,  rgba(255,205,228,0.58) 0%, rgba(255,145,185,0.24) 26%, transparent 50%),
    radial-gradient(ellipse at 18% 80%, rgba(208,78,132,0.24)   0%, transparent 40%),
    radial-gradient(ellipse at 82% 58%, rgba(225,102,152,0.20)  0%, transparent 36%),
    radial-gradient(ellipse at 55% 100%, rgba(155,42,82,0.22)   0%, transparent 38%),
    linear-gradient(162deg, #1e0914 0%, #340f24 16%, #4e1a36 32%, #681e4c 52%, #4e1a36 70%, #2c0f1c 86%, #1e0914 100%);
  background-size: 200% 200%;
  animation: hsakura-flow 24s ease-in-out infinite;
}
@keyframes hsakura-flow {
  0%,100% { background-position: 45% 20%; }
  40%      { background-position: 80% 75%; }
  70%      { background-position: 20% 60%; }
}
body.theme-hsakura::before {
  background:
    radial-gradient(ellipse at 50% 9%, rgba(255,195,225,0.34) 0%, transparent 56%),
    radial-gradient(ellipse at 25% 75%, rgba(230,100,148,0.15) 0%, transparent 45%);
  animation:hsakura-shimmer 6.5s ease-in-out infinite;
}
@keyframes hsakura-shimmer {
  0%,100% { opacity:.58; transform:scale(1)    translateX(0); }
  50%      { opacity:1;   transform:scale(1.06) translateX(10px); }
}
body.theme-hsakura::after { opacity:.03; }
body.theme-hsakura header { background:rgba(12,3,9,0.94); border-bottom-color:rgba(255,162,195,0.25); }
body.theme-hsakura header::after { background:linear-gradient(90deg,transparent 0%,rgba(255,145,178,0.45) 18%,rgba(255,218,235,0.92) 50%,rgba(255,145,178,0.45) 82%,transparent 100%); background-size:200% 100%; }

/* ── 夜桜 yozakura ───────────────────────────────────────── */
body.theme-yozakura {
  --sky-1:#680840; --sky-2:#4e0528; --sky-3:#821058;
  --sun:#ffb0d8; --sun-warm:#ff88c0; --sun-glow:rgba(255,148,205,0.50);
  --text:#fff0fa; --text-soft:#ffc8e8; --muted:#d080a8;
  --border:rgba(255,155,215,0.28); --surface:rgba(48,0,28,0.70);
  background:
    radial-gradient(ellipse at 56%  7%, rgba(255,165,215,0.62) 0%, rgba(208,38,122,0.25) 22%, transparent 48%),
    radial-gradient(ellipse at 15% 78%, rgba(148,0,72,0.45)    0%, transparent 40%),
    radial-gradient(ellipse at 84% 62%, rgba(165,10,92,0.35)   0%, transparent 38%),
    radial-gradient(ellipse at 50% 100%, rgba(80,0,42,0.32)    0%, transparent 38%),
    linear-gradient(162deg,
      #120010 0%, #1e0615 16%, #380a2c 32%,
      #4e0c40 52%, #380a2c 70%,
      #220810 86%, #120010 100%
    );
  background-size: 200% 200%;
  animation: yozakura-flow 22s ease-in-out infinite;
}
@keyframes yozakura-flow {
  0%,100% { background-position: 55% 20%; }
  33%      { background-position: 90% 70%; }
  66%      { background-position: 20% 55%; }
}
body.theme-yozakura::before {
  background:
    radial-gradient(ellipse at 56% 7%, rgba(255,155,205,0.38) 0%, transparent 55%),
    radial-gradient(ellipse at 56% 7%, rgba(255,105,172,0.14) 0%, transparent 75%);
  animation:yozakura-breathe 5.5s ease-in-out infinite;
}
@keyframes yozakura-breathe {
  0%,100% { opacity:.72; transform:scale(1)    translateX(0); }
  50%      { opacity:1;   transform:scale(1.07) translateX(-10px); }
}
body.theme-yozakura::after { opacity:.04; }
body.theme-yozakura header { background:rgba(9,0,7,0.96); border-bottom-color:rgba(255,135,195,0.28); }
body.theme-yozakura header::after { background:linear-gradient(90deg,transparent 0%,rgba(255,80,165,0.55) 18%,rgba(255,205,235,0.96) 50%,rgba(255,80,165,0.55) 82%,transparent 100%); background-size:200% 100%; }

/* ── サイバー江戸 SECRET cyberedo-s ─────────────────────── */
body.theme-cyberedo-s {
  --sky-1:#ff1860; --sky-2:#00f0ff; --sky-3:#ffaa00;
  --sun:#ffdd00; --sun-warm:#ff4488; --sun-glow:rgba(255,0,108,0.52);
  --text:#fff0f8; --text-soft:#ffb8d8; --muted:#cc5088;
  --border:rgba(255,42,122,0.30); --surface:rgba(18,0,10,0.80);
  background:
    radial-gradient(ellipse at 78%  4%, rgba(0,248,255,0.42)  0%, rgba(255,0,108,0.20) 22%, transparent 45%),
    radial-gradient(ellipse at 18% 18%, rgba(255,208,0,0.24)  0%, transparent 38%),
    radial-gradient(ellipse at 52% 68%, rgba(255,0,108,0.28)  0%, transparent 40%),
    radial-gradient(ellipse at 85% 82%, rgba(0,248,255,0.18)  0%, transparent 35%),
    linear-gradient(165deg, #080004 0%, #140010 14%, #200016 28%, #160012 52%, #0c000a 72%, #060003 100%);
  background-size: 200% 200%;
  animation: cyberedo-s-flow 15s ease-in-out infinite;
}
@keyframes cyberedo-s-flow {
  0%,100% { background-position: 50% 30%; }
  25%      { background-position: 100% 0%; }
  50%      { background-position: 0%   100%; }
  75%      { background-position: 100% 100%; }
}
body.theme-cyberedo-s::before {
  background:
    radial-gradient(ellipse at 78% 4%, rgba(0,248,255,0.26) 0%, transparent 50%),
    radial-gradient(ellipse at 18% 18%, rgba(255,208,0,0.14) 0%, transparent 40%);
  animation:cyberedo-s-glitch 2.2s ease-in-out infinite;
}
@keyframes cyberedo-s-glitch {
  0%,100% { opacity:.72; transform:scaleX(1) translateX(0); }
  6%       { opacity:1;   transform:scaleX(1.025) translateX(3px); }
  7%       { opacity:.28; transform:scaleX(0.975) translateX(-3px); }
  8%       { opacity:.92; transform:scaleX(1) translateX(0); }
  50%      { opacity:.82; transform:scaleX(1); }
}
body.theme-cyberedo-s::after {
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 29px, rgba(0,248,255,0.05) 29px, rgba(0,248,255,0.05) 30px),
    repeating-linear-gradient(0deg,  transparent 0px, transparent 29px, rgba(255,0,108,0.03) 29px, rgba(255,0,108,0.03) 30px);
  animation:none;
}
body.theme-cyberedo-s header { background:rgba(6,0,3,0.98); border-bottom-color:rgba(255,0,108,0.38); }
body.theme-cyberedo-s header::after { background:linear-gradient(90deg,transparent 0%,rgba(0,248,255,0.55) 18%,rgba(255,208,0,0.96) 40%,rgba(255,0,108,0.96) 60%,rgba(0,248,255,0.45) 82%,transparent 100%); background-size:200% 100%; }

/* ── 無音世界 silent ─────────────────────────────────────── */
body.theme-silent {
  --sky-1:#383838; --sky-2:#282828; --sky-3:#484848;
  --sun:#c8c8c8; --sun-warm:#b8b8b8; --sun-glow:rgba(182,182,182,0.22);
  --text:#e8e8e8; --text-soft:#a0a0a0; --muted:#606060;
  --border:rgba(162,162,162,0.17); --surface:rgba(8,8,8,0.72);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(142,142,142,0.17) 0%, transparent 52%),
    radial-gradient(ellipse at 18% 75%, rgba(82,82,82,0.22)    0%, transparent 42%),
    radial-gradient(ellipse at 80% 40%, rgba(60,60,60,0.15)    0%, transparent 38%),
    linear-gradient(168deg, #060606 0%, #0c0c0c 18%, #101010 36%, #0c0c0c 60%, #080808 80%, #060606 100%);
  background-size: 200% 200%;
  animation: silent-flow 45s ease-in-out infinite;
  filter:saturate(0.08);
}
@keyframes silent-flow {
  0%,100% { background-position: 45% 45%; }
  50%      { background-position: 55% 55%; }
}
body.theme-silent::before {
  background:radial-gradient(ellipse at 50% 20%, rgba(142,142,142,0.12) 0%, transparent 56%);
  animation:silent-breathe 18s ease-in-out infinite;
}
@keyframes silent-breathe {
  0%,100% { opacity:.28; }
  50%      { opacity:.68; }
}
body.theme-silent::after { opacity:.02; }
body.theme-silent header { background:rgba(3,3,3,0.97); border-bottom-color:rgba(142,142,142,0.16); filter:saturate(0); }
body.theme-silent header::after { background:linear-gradient(90deg,transparent 0%,rgba(100,100,100,0.32) 18%,rgba(182,182,182,0.65) 50%,rgba(100,100,100,0.32) 82%,transparent 100%); background-size:200% 100%; }

/* ── 雷雨 raiu（NEW secret・嵐と稲妻。既存テーマと非重複） ──────────
   鉛色の嵐雲＋周期的な雷光フラッシュ（CSSのみ）＋叩きつける雨 */
body.theme-raiu {
  --sky-1:#5a6e8c; --sky-2:#3a4a64; --sky-3:#8a9ab8;
  --sun:#cdd8ec; --sun-warm:#aeb8d0; --sun-glow:rgba(150,170,210,0.30);
  --text:#e6ecf6; --text-soft:#9fb0cc; --muted:#5a6880;
  --border:rgba(150,170,210,0.22); --surface:rgba(8,12,24,0.74);
  background:
    /* 雷光の名残（上の鈍い光） */
    radial-gradient(ellipse at 60% 8%, rgba(150,175,220,0.28) 0%, transparent 42%),
    /* 厚い嵐雲の塊 */
    radial-gradient(ellipse 60% 30% at 25% 18%, rgba(30,40,60,0.60) 0%, transparent 60%),
    radial-gradient(ellipse 55% 26% at 78% 12%, rgba(24,32,52,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 30% at 50% 40%, rgba(18,24,40,0.50) 0%, transparent 64%),
    /* 雨に煙る底 */
    radial-gradient(ellipse at 50% 100%, rgba(10,16,30,0.50) 0%, transparent 46%),
    /* ベース：鉛色の嵐空 */
    linear-gradient(170deg, #0a0e1a 0%, #121826 16%, #1a2236 34%, #141a2c 56%, #0c121e 78%, #080c16 100%);
  background-size: 200% 200%;
  animation: raiu-flow 22s ease-in-out infinite;
}
@keyframes raiu-flow {
  0%,100% { background-position: 40% 30%; }
  50%      { background-position: 60% 60%; }
}
/* 雷光のフラッシュ（普段は暗く、時々ぱっと二度光る） */
body.theme-raiu::before {
  background:linear-gradient(180deg, rgba(205,218,255,0.92) 0%, rgba(150,175,230,0.40) 30%, transparent 62%);
  opacity:0;
  animation:raiu-flash 7s steps(1,end) infinite;
}
@keyframes raiu-flash {
  0%, 12%, 100% { opacity:0; }
  3%   { opacity:0.85; }
  4%   { opacity:0.12; }
  6%   { opacity:0.70; }
  8%   { opacity:0; }
}
/* 叩きつける雨 */
body.theme-raiu::after {
  background:repeating-linear-gradient(
    105deg,
    transparent 0px, transparent 3px,
    rgba(175,198,242,0.07) 3px, rgba(175,198,242,0.07) 4px);
  animation:raiu-rain 0.5s linear infinite;
  opacity:1;
}
@keyframes raiu-rain {
  0%   { background-position:0 0; }
  100% { background-position:-30px 130px; }
}
body.theme-raiu header { background:rgba(8,11,20,0.95); border-bottom-color:rgba(150,170,210,0.26); }
body.theme-raiu header::after { background:linear-gradient(90deg,transparent 0%,rgba(110,135,185,0.50) 18%,rgba(205,220,255,0.92) 50%,rgba(110,135,185,0.50) 82%,transparent 100%); background-size:200% 100%; }
/* 叩きつける雨粒（JS生成・絵文字なし） */
.theme-raiu .raindrop {
  position:fixed; pointer-events:none; z-index:2;
  width:1.5px; background:linear-gradient(to bottom, transparent, rgba(195,215,252,0.82));
  animation:raindrop-fall linear forwards;
}

/* ── 霧 kiri（NEW secret・朝霧。やわらかい光の層。silent/shutterと差別化） ──
   くすんだ青鼠に、横たわる霧の層とにじむ朝陽。CSSのみ（軽量） */
body.theme-kiri {
  --sky-1:#8aa0b4; --sky-2:#637688; --sky-3:#b6c6d4;
  --sun:#f0ead8; --sun-warm:#e2d6c2; --sun-glow:rgba(220,210,190,0.32);
  --text:#eef3f7; --text-soft:#c0ccd6; --muted:#7a8896;
  --border:rgba(190,206,220,0.22); --surface:rgba(40,52,64,0.60);
  background:
    /* 霧の奥でにじむ朝陽（ほのかに暖色） */
    radial-gradient(ellipse at 52% 14%, rgba(244,238,222,0.45) 0%, rgba(206,200,186,0.18) 24%, transparent 52%),
    /* 横たわる霧の層 */
    radial-gradient(ellipse 90% 10% at 50% 40%, rgba(212,222,230,0.30) 0%, transparent 70%),
    radial-gradient(ellipse 80% 8%  at 40% 58%, rgba(192,204,216,0.26) 0%, transparent 70%),
    radial-gradient(ellipse 90% 9%  at 60% 74%, rgba(176,190,204,0.22) 0%, transparent 70%),
    /* ベース：霞む青鼠 */
    linear-gradient(178deg, #3a4856 0%, #46545f 18%, #54626c 38%, #4a5862 60%, #3c4a54 82%, #323e48 100%);
  background-size: 200% 200%;
  animation: kiri-flow 40s ease-in-out infinite;
}
@keyframes kiri-flow {
  0%,100% { background-position: 40% 40%; }
  50%      { background-position: 60% 60%; }
}
/* ゆっくり流れる霧の薄衣 */
body.theme-kiri::before {
  background:linear-gradient(180deg, transparent 0%, rgba(214,224,232,0.10) 30%, rgba(226,234,240,0.16) 44%, rgba(206,218,228,0.10) 56%, transparent 78%);
  animation:kiri-drift 24s ease-in-out infinite;
}
@keyframes kiri-drift {
  0%,100% { opacity:.6; transform:translateX(0)    scaleY(1); }
  50%      { opacity:1;  transform:translateX(40px) scaleY(1.1); }
}
body.theme-kiri::after { opacity:.02; }
body.theme-kiri header { background:rgba(46,56,66,0.86); border-bottom-color:rgba(190,206,220,0.24); }
body.theme-kiri header::after { background:linear-gradient(90deg,transparent 0%,rgba(150,168,182,0.45) 18%,rgba(226,234,240,0.85) 50%,rgba(150,168,182,0.45) 82%,transparent 100%); background-size:200% 100%; }

/* ============================================================
   MYSTERY THEMES (2)
   ============================================================ */

/* ── 境界 boundary ───────────────────────────────────────── */
body.theme-boundary {
  --sky-1:#3a9ac8; --sky-2:#5ab8e8; --sky-3:#8060a0;
  --sun:#90d8f8; --sun-warm:#7ec8e3; --sun-glow:rgba(100,200,240,0.38);
  --text:#f0f0f0; --text-soft:#d0d0e0; --muted:#7878a0;
  --border:rgba(120,200,240,0.28); --surface:rgba(8,8,18,0.62);
  /* 右側ベース：天気の子の水色の空（全面） */
  background:
    /* 水色の明るいハイライト（右上） */
    radial-gradient(ellipse at 76%  6%, rgba(140,218,255,0.72) 0%, rgba(100,188,245,0.32) 20%, transparent 44%),
    radial-gradient(ellipse at 76%  6%, rgba(200,238,255,0.26) 0%, transparent 65%),
    /* 薄い黄金のヒント（右端最上部） */
    radial-gradient(ellipse at 94%  2%, rgba(255,228,110,0.18) 0%, transparent 22%),
    /* 青空の広がり */
    radial-gradient(ellipse at 62% 22%, rgba(80,165,225,0.45) 0%, transparent 38%),
    radial-gradient(ellipse at 82% 100%, rgba(60,142,215,0.48) 0%, transparent 54%),
    /* 薄い雲の白み */
    radial-gradient(ellipse at 56% 14%, rgba(200,232,255,0.20) 0%, transparent 32%),
    linear-gradient(180deg, #0e2035 0%, #1a3d6a 30%, #2560a0 60%, #4a8ac8 85%, #6ab0de 100%);
}
/* 左半分（君の名は）— right:50% でクリップして真の50分割 */
body.theme-boundary::before {
  inset: 0 50% 0 0;
  background:
    /* 黄昏の光源（左下） */
    radial-gradient(ellipse at  8% 90%, rgba(240,100,28,0.65) 0%, transparent 30%),
    radial-gradient(ellipse at 18% 80%, rgba(200,55,20,0.38)  0%, transparent 24%),
    /* 夕暮れのピンク雲 */
    radial-gradient(ellipse at 38% 52%, rgba(240,70,140,0.45) 0%, transparent 28%),
    radial-gradient(ellipse at 58% 38%, rgba(200,40,118,0.28) 0%, transparent 22%),
    /* 彗星・水色（分割線付近） */
    radial-gradient(ellipse at 88%  5%, rgba(200,232,255,0.34) 0%, transparent 26%),
    radial-gradient(ellipse at 72%  5%, rgba(245,200,66,0.26)  0%, transparent 34%),
    /* 明るい紫〜バイオレット夜空 */
    radial-gradient(ellipse at 46% 28%, rgba(148,42,210,0.62)  0%, transparent 34%),
    radial-gradient(ellipse at 16% 52%, rgba(100,22,168,0.55)  0%, transparent 38%),
    /* ベース：明るい紫紺 */
    linear-gradient(180deg, #160830 0%, #2c0e58 30%, #481272 65%, #2e0a5a 100%);
  animation: boundary-shift 9s ease-in-out infinite;
}
@keyframes boundary-shift {
  0%,100% { opacity:.88; }
  50%      { opacity:1;   }
}
/* 境界線 + 右半分の雨筋 */
body.theme-boundary::after {
  inset: 0 0 0 50%;
  background: repeating-linear-gradient(
    96deg,
    transparent 0px, transparent 3px,
    rgba(200,235,255,0.022) 3px, rgba(200,235,255,0.022) 4px
  );
  border-left: 1px solid rgba(255,220,0,0.65);
  animation: boundary-glow 3.2s ease-in-out infinite, boundary-rain 0.8s linear infinite;
}
@keyframes boundary-glow {
  0%,100% { opacity:.65; box-shadow:-2px 0 16px rgba(255,220,0,0.45); }
  50%      { opacity:1;   box-shadow:-4px 0 36px rgba(255,220,0,0.95), -1px 0 8px rgba(255,240,120,1); }
}
@keyframes boundary-rain {
  0%   { background-position: 0 0; }
  100% { background-position: 0 40px; }
}
body.theme-boundary header { background:linear-gradient(to right, rgba(3,2,9,0.92) 50%, rgba(14,32,58,0.90) 50%); border-bottom-color:rgba(255,220,0,0.48); }
body.theme-boundary header::after { background:linear-gradient(90deg,transparent 0%,rgba(185,100,255,0.55) 20%,rgba(255,220,0,0.98) 50%,rgba(100,180,248,0.55) 80%,transparent 100%); background-size:200% 100%; }
body.theme-boundary .nav a:hover { background:linear-gradient(to right, rgba(255,195,60,0.22), rgba(90,185,248,0.22)) !important; border-color:rgba(255,220,0,0.50) !important; }
/* コンテンツが ::before(position:fixed z-index:0) の上に確実に出るよう保証 */
body.theme-boundary main,
body.theme-boundary section,
body.theme-boundary .article-card,
body.theme-boundary .community-card,
body.theme-boundary .community-section,
body.theme-boundary .community-grid,
body.theme-boundary .zukan-wrap,
body.theme-boundary .zukan-grid,
body.theme-boundary .zukan-card,
body.theme-boundary .profile-wrap,
body.theme-boundary .profile-card,
body.theme-boundary .theme-section,
body.theme-boundary .post-list,
body.theme-boundary .post-item,
body.theme-boundary .sub-wrap,
body.theme-boundary .sub-card,
body.theme-boundary .sub-field,
body.theme-boundary .editor-wrap { position:relative; z-index:1; }
/* 流星エフェクト（君の名は側 / 左） */
.boundary-meteor {
  position:fixed; width:100px; height:2px;
  background:linear-gradient(to right, transparent, rgba(240,220,255,0.95), rgba(255,248,200,0.7), transparent);
  border-radius:2px; transform-origin:left center;
  animation:meteor-streak 1.0s ease-out forwards;
  pointer-events:none; z-index:3;
  filter:drop-shadow(0 0 3px rgba(220,200,255,0.85));
}
@keyframes meteor-streak {
  0%   { opacity:0;   transform:rotate(22deg) translate(0,0)       scaleX(0.2); }
  12%  { opacity:1; }
  55%  { opacity:0.75; }
  100% { opacity:0;   transform:rotate(22deg) translate(110px,60px) scaleX(1); }
}

/* ── 原点 origin ─────────────────────────────────────────── */
body.theme-origin {
  --sky-1:#4a92d8; --sky-2:#6ab2ee; --sky-3:#90caf8;
  --sun:#ffe080; --sun-warm:#ffc840; --sun-glow:rgba(255,215,82,0.55);
  --text:#f0faff; --text-soft:#b8e2ff; --muted:#6898bb;
  --border:rgba(162,225,255,0.28); --surface:rgba(18,55,98,0.58);
  background:
    /* すべての始まりの太陽（眩い黄金の核） */
    radial-gradient(circle at 72% 14%, rgba(255,252,220,0.95) 0%, rgba(255,225,110,0.45) 8%, rgba(255,200,80,0.20) 18%, transparent 40%),
    /* 七色の予感（地平のかすかな虹） */
    radial-gradient(ellipse 80% 8% at 50% 96%, rgba(120,220,180,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 6% at 50% 92%, rgba(255,180,150,0.14) 0%, transparent 70%),
    /* 青空の広がり */
    radial-gradient(ellipse at 40% 22%, rgba(120,195,248,0.32) 0%, transparent 46%),
    radial-gradient(ellipse at 50% 100%, rgba(100,185,248,0.40) 0%, transparent 56%),
    /* ベース：澄んだ青 */
    linear-gradient(162deg,
      #163a5e 0%, #1d4d78 14%, #246a9a 28%,
      #2f8cc4 44%, #49a0da 58%, #66b8e8 72%,
      #84ccf2 86%, #a6def8 100%
    );
  background-size: 200% 200%;
  animation: origin-flow 20s ease-in-out infinite;
}
@keyframes origin-flow {
  0%,100% { background-position: 55% 20%; }
  33%      { background-position: 20% 60%; }
  66%      { background-position: 90% 50%; }
}
body.theme-origin::before {
  background:
    radial-gradient(ellipse at 74% 7%, rgba(255,242,132,0.32) 0%, transparent 52%),
    radial-gradient(ellipse at 74% 7%, rgba(255,222,102,0.14) 0%, transparent 78%);
  animation:origin-breathe 5.5s ease-in-out infinite;
}
@keyframes origin-breathe {
  0%,100% { opacity:.78; transform:scale(1)    translateY(0); }
  50%      { opacity:1;   transform:scale(1.10) translateY(-12px); }
}
body.theme-origin::after { opacity:.025; }
body.theme-origin header { background:rgba(16,38,65,0.84); border-bottom-color:rgba(182,228,255,0.28); }
body.theme-origin header::after { background:linear-gradient(90deg,transparent 0%,rgba(100,185,245,0.55) 18%,rgba(255,235,122,0.96) 40%,rgba(255,255,255,0.98) 50%,rgba(255,235,122,0.92) 60%,rgba(100,185,245,0.55) 82%,transparent 100%); background-size:200% 100%; }

/* ── 常世 tokoyo ─────────────────────────────────────────────
   すべての時間が同時に存在する空。
   上から: 星の残る夜 → 燃える夕暮れ → 黄金の時 → 昼の青 → 草原の気配
   ──────────────────────────────────────────────────────────── */
body.theme-tokoyo {
  --sky-1:#3a1660; --sky-2:#a02858; --sky-3:#e8a040;
  --sun:#ffd98a; --sun-warm:#f0a045; --sun-glow:rgba(255,200,110,0.42);
  --text:#fdf6ec; --text-soft:#ecd5c0; --muted:#b08aa0;
  --border:rgba(255,190,120,0.26); --surface:rgba(20,10,36,0.66);
  /* bodyはフォールバックの暗い空のみ。地層は::before（ビューポート固定）に描く */
  background: linear-gradient(180deg, #0a0a26 0%, #2a1244 50%, #1c3040 100%);
}
/* 時間の地層 + 星屑（position:fixedの::beforeなので常に1画面に全時間が見える） */
body.theme-tokoyo::before {
  background:
    /* 夜の層の星屑（地層と一緒にゆっくり動く） */
    radial-gradient(1.5px 1.5px at 12%  4%, rgba(255,255,255,0.9) 50%, transparent 51%),
    radial-gradient(1px   1px   at 30%  7%, rgba(255,240,220,0.8) 50%, transparent 51%),
    radial-gradient(2px   2px   at 47%  2%, rgba(255,255,255,0.95) 50%, transparent 51%),
    radial-gradient(1px   1px   at 58%  9%, rgba(220,230,255,0.75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72%  5%, rgba(255,255,255,0.85) 50%, transparent 51%),
    radial-gradient(1px   1px   at 85% 10%, rgba(255,235,210,0.8) 50%, transparent 51%),
    radial-gradient(2px   2px   at 93%  3%, rgba(255,255,255,0.9) 50%, transparent 51%),
    radial-gradient(1px   1px   at 20% 12%, rgba(230,220,255,0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 13%, rgba(255,255,255,0.8) 50%, transparent 51%),
    /* 夜の帯に残る星雲のにじみ */
    radial-gradient(ellipse at 22%  4%, rgba(120, 80,220,0.30) 0%, transparent 26%),
    radial-gradient(ellipse at 70%  8%, rgba( 80,140,255,0.18) 0%, transparent 22%),
    /* 夕暮れ層の燃える雲 */
    radial-gradient(ellipse at 14% 30%, rgba(240, 80, 60,0.42) 0%, transparent 30%),
    radial-gradient(ellipse at 78% 34%, rgba(232, 60,120,0.36) 0%, transparent 28%),
    radial-gradient(ellipse at 46% 38%, rgba(255,120, 60,0.30) 0%, transparent 26%),
    /* 黄金の時（中央の光帯） */
    radial-gradient(ellipse at 60% 52%, rgba(255,205,100,0.50) 0%, rgba(255,170,70,0.20) 24%, transparent 46%),
    radial-gradient(ellipse at 28% 56%, rgba(255,225,150,0.26) 0%, transparent 30%),
    /* 昼の青のひらき */
    radial-gradient(ellipse at 50% 74%, rgba(110,190,240,0.34) 0%, transparent 38%),
    /* 草原の気配（最下層の緑） */
    radial-gradient(ellipse at 50% 100%, rgba( 60,150,110,0.38) 0%, transparent 40%),
    /* ベース: 時間の地層 */
    linear-gradient(180deg,
      #0a0a26  0%,   /* 夜 */
      #221048 14%,
      #4a1a64 26%,   /* 宵 */
      #8a2458 38%,   /* 夕 */
      #c84838 48%,
      #e88838 56%,   /* 黄金 */
      #e8b050 63%,
      #6aa8c8 76%,   /* 昼 */
      #4a88a8 86%,
      #2e6858 100%   /* 草原 */
    );
  background-size: 100% 130%;
  opacity:1;
  animation: tokoyo-strata 60s ease-in-out infinite;
}
@keyframes tokoyo-strata {
  0%,100% { background-position: 50% 0%; }
  50%      { background-position: 50% 100%; }
}
/* 黄金の層をゆっくり流れる光の薄衣 */
body.theme-tokoyo::after {
  background: linear-gradient(100deg,
    transparent 0%, transparent 38%,
    rgba(255,220,140,0.05) 46%,
    rgba(255,240,190,0.10) 50%,
    rgba(255,220,140,0.05) 54%,
    transparent 62%, transparent 100%);
  background-size: 300% 100%;
  opacity:1;
  animation: tokoyo-veil 26s linear infinite;
}
@keyframes tokoyo-veil {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
body.theme-tokoyo header {
  background:rgba(10,8,28,0.88);
  border-bottom-color:rgba(255,190,110,0.34);
}
body.theme-tokoyo header::after {
  /* 全部の時間の色が流れるライン: 夜→夕→黄金→昼 */
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(130, 90,230,0.65) 16%,
    rgba(232, 70,120,0.80) 36%,
    rgba(255,205,100,0.98) 50%,
    rgba(255,160, 70,0.80) 64%,
    rgba(100,185,235,0.65) 84%,
    transparent 100%);
  background-size:200% 100%;
}
body.theme-tokoyo .nav a:hover {
  background:rgba(255,195,110,0.16) !important;
  border-color:rgba(255,200,120,0.45) !important;
}
/* コンテンツが ::before(position:fixed z-index:0) の上に確実に出るよう保証 */
body.theme-tokoyo main,
body.theme-tokoyo section,
body.theme-tokoyo .article-card,
body.theme-tokoyo .community-card,
body.theme-tokoyo .community-section,
body.theme-tokoyo .community-grid,
body.theme-tokoyo .zukan-wrap,
body.theme-tokoyo .zukan-grid,
body.theme-tokoyo .zukan-card,
body.theme-tokoyo .profile-wrap,
body.theme-tokoyo .profile-card,
body.theme-tokoyo .theme-section,
body.theme-tokoyo .post-list,
body.theme-tokoyo .post-item,
body.theme-tokoyo .sub-wrap,
body.theme-tokoyo .sub-card,
body.theme-tokoyo .sub-field,
body.theme-tokoyo .editor-wrap { position:relative; z-index:1; }

/* 草原から立ちのぼる光の粒（weather.jsが生成） */
.tokoyo-mote {
  position:fixed; bottom:-10px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,240,200,0.95) 0%, rgba(255,210,130,0.5) 55%, transparent 75%);
  pointer-events:none; z-index:2;
  animation:tokoyo-rise linear forwards;
  filter:drop-shadow(0 0 4px rgba(255,220,150,0.8));
}
@keyframes tokoyo-rise {
  0%   { opacity:0; transform:translateY(0)       translateX(0)    scale(0.6); }
  12%  { opacity:.95; }
  70%  { opacity:.65; }
  100% { opacity:0; transform:translateY(-78vh) translateX(26px) scale(1.05); }
}
/* 夜の層を渡る、ゆっくりした彗星（weather.jsが生成） */
.tokoyo-comet {
  position:fixed; height:2px; width:180px;
  background:linear-gradient(to right, transparent, rgba(255,250,235,0.95), rgba(190,160,255,0.6), transparent);
  border-radius:2px; pointer-events:none; z-index:2;
  animation:tokoyo-comet-drift 7s ease-in-out forwards;
  filter:drop-shadow(0 0 5px rgba(255,240,220,0.8));
}
@keyframes tokoyo-comet-drift {
  0%   { opacity:0; transform:translateX(0)     rotate(4deg) scaleX(0.3); }
  12%  { opacity:.9; }
  82%  { opacity:.65; }
  100% { opacity:0; transform:translateX(54vw) rotate(4deg) scaleX(1); }
}

/* ============================================================
   テーマバッジ
   ============================================================ */
.theme-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600;
  letter-spacing:.05em; white-space:nowrap; pointer-events:none;
}
.theme-badge-normal  { background:rgba(60,90,140,0.62);  border:1px solid rgba(162,215,255,0.38); color:#c8eaff; }
.theme-badge-rare    { background:rgba(100,60,162,0.62); border:1px solid rgba(205,152,255,0.48); color:#e8d2ff; }
.theme-badge-secret  { background:rgba(38,18,58,0.78);   border:1px solid rgba(255,182,82,0.52);  color:#ffeeA0; }
.theme-badge-mystery { background:rgba(18,18,48,0.88);   border:1px solid rgba(255,220,0,0.62);   color:#fff0a0; box-shadow:0 0 12px rgba(255,220,0,0.35); }

/* ============================================================
   テーマ図鑑スタイル
   ============================================================ */
.zukan-wrap { max-width:900px; margin:60px auto; padding:0 16px 80px; }
.zukan-title { font-size:1.6rem; font-weight:700; letter-spacing:.1em; margin-bottom:8px; }
.zukan-subtitle { font-size:13px; color:var(--text-soft); margin-bottom:36px; }
.zukan-section-title { font-size:11px; letter-spacing:.2em; color:var(--muted); font-weight:600; margin:32px 0 14px; border-left:3px solid var(--sky-1); padding-left:10px; }
.zukan-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.zukan-card {
  border-radius:14px; overflow:hidden;
  border:1px solid var(--border); background:var(--surface);
  padding:18px 16px; transition:transform .22s, box-shadow .22s;
  cursor:default;
}
.zukan-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.35); }
.zukan-card.locked {
  opacity:.35;
  filter:blur(0.5px) grayscale(0.6);
  cursor:pointer;
  user-select:none;
}
.zukan-card.locked:hover { transform:none; opacity:.44; }
.zukan-card-icon   { font-size:2rem; margin-bottom:8px; line-height:1; }
.zukan-card-name   { font-size:14px; font-weight:700; margin-bottom:4px; }
.zukan-card-flavor { font-size:11px; color:var(--text-soft); line-height:1.65; }
.zukan-card-rarity { margin-top:10px; }
.zukan-progress    { font-size:12px; color:var(--muted); margin-top:24px; text-align:right; }
.zukan-unlock-btn {
  display:inline-block; margin-top:12px;
  padding:5px 14px; border-radius:10px; font-size:12px; font-weight:600;
  background:rgba(255,215,82,0.16); border:1px solid rgba(255,215,82,0.42);
  color:var(--sun); cursor:pointer; transition:background .2s;
}
.zukan-unlock-btn:hover { background:rgba(255,215,82,0.30); }

/* 未解放通知トースト */
#zukan-locked-toast {
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(18,18,35,0.94); border:1px solid rgba(255,185,62,0.42);
  color:rgba(255,225,122,0.96); padding:10px 24px; border-radius:30px;
  font-size:13px; letter-spacing:.06em; pointer-events:none;
  opacity:0; transition:opacity .25s, transform .25s;
  backdrop-filter:blur(14px); z-index:9999; white-space:nowrap;
}
#zukan-locked-toast.show {
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ── モバイル調整 ──────────────────────────────────────────── */
@media (max-width:1080px) {
  .zukan-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .zukan-card { padding:14px 12px; }
  /* パフォーマンス: アニメーションを少し軽くする */
  body[class*="theme-"] { animation-duration: 30s !important; }
}

/* ============================================================
   NEW THEMES — 電車 train（2026-06-19 追加）
   ・train    : 夜行列車（線路を走る電車の外観）     = SECRET
   すべて CSS / JS のみ・画像なし・絵文字なし。既存テーマと非重複。
   ============================================================ */

/* ── 夜行列車 train（SECRET） ────────────────────────────────
   宵闇の線路を、窓に灯りをともした列車が走り抜ける。 */
body.theme-train {
  --sky-1:#5a6ea0; --sky-2:#3a4a72; --sky-3:#caa6bc;
  --sun:#ffd9a0; --sun-warm:#ffb877; --sun-glow:rgba(255,184,119,0.40);
  --text:#eef0fb; --text-soft:#bdc3e2; --muted:#7079a2;
  --border:rgba(150,162,212,0.24); --surface:rgba(12,16,30,0.70);
  background:
    /* 駅・街灯りの暖かな帯（地平） */
    radial-gradient(ellipse 62% 12% at 50% 80%, rgba(255,192,120,0.34) 0%, transparent 62%),
    /* 遠い街明かりの点 */
    radial-gradient(circle at 16% 74%, rgba(255,212,140,0.55) 0%, transparent 1.6%),
    radial-gradient(circle at 28% 76%, rgba(255,200,150,0.45) 0%, transparent 1.3%),
    radial-gradient(circle at 66% 75%, rgba(255,216,150,0.50) 0%, transparent 1.5%),
    radial-gradient(circle at 82% 77%, rgba(255,206,140,0.45) 0%, transparent 1.3%),
    /* 宵闇の空：藍 → 残照の藤 */
    linear-gradient(178deg, #0a0f22 0%, #131a38 20%, #1f274c 42%, #2b2e54 60%, #483c60 80%, #6a4e62 100%);
  background-size: 200% 200%;
  animation: train-flow 30s ease-in-out infinite;
}
@keyframes train-flow {
  0%,100% { background-position: 42% 36%; }
  50%      { background-position: 58% 62%; }
}
/* 線路・砂利・枕木（画面下の地面帯）。枕木が左へ流れて疾走感 */
body.theme-train::before {
  top:auto; bottom:0; height:22vh;
  background:
    /* 手前のレール（光る横線・下） */
    linear-gradient(180deg, transparent 0 60%, rgba(210,222,244,0.75) 60%, rgba(210,222,244,0.75) 61.4%, transparent 61.4%),
    /* 奥のレール（横線・上） */
    linear-gradient(180deg, transparent 0 50%, rgba(168,184,210,0.5) 50%, rgba(168,184,210,0.5) 51%, transparent 51%),
    /* 枕木（縦の短いバーが横に並ぶ → 横スクロール） */
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(58,46,38,0.6) 28px 42px),
    /* 砂利の路盤 */
    linear-gradient(180deg, transparent 0 46%, rgba(24,20,18,0.5) 60%, rgba(10,9,12,0.85) 100%);
  background-size: 100% 100%, 100% 100%, 64px 14px, 100% 100%;
  background-position: 0 0, 0 0, 0 58%, 0 0;
  background-repeat: no-repeat, no-repeat, repeat-x, no-repeat;
  animation: train-ties 0.85s linear infinite;
  opacity:1;
}
@keyframes train-ties {
  0%   { background-position: 0 0, 0 0, 0    58%, 0 0; }
  100% { background-position: 0 0, 0 0, -64px 58%, 0 0; }
}
body.theme-train::after { opacity:0; }   /* ベースの雨テクスチャを消す */
body.theme-train header { background:rgba(8,10,22,0.95); border-bottom-color:rgba(150,162,212,0.26); }
body.theme-train header::after { background:linear-gradient(90deg,transparent 0%,rgba(120,135,200,0.5) 18%,rgba(220,210,255,0.92) 50%,rgba(120,135,200,0.5) 82%,transparent 100%); background-size:200% 100%; }
/* 走る列車（JS生成）。レール上を右→左に滑らかに走る */
.theme-train .train-car {
  position:fixed; z-index:2; pointer-events:none;
  bottom:9vh; left:0; height:70px;
  border-radius:34px 12px 5px 5px / 44px 14px 5px 5px;  /* 先頭(左)を丸い顔に */
  background:
    /* 前照灯（先頭の下・暖色の光） */
    radial-gradient(circle at 15px 56px, rgba(255,252,224,1) 0 5px, rgba(255,225,150,0.82) 5px 12px, transparent 16px),
    /* 窓下のサイドライン */
    linear-gradient(180deg, transparent 0 58px, rgba(126,146,188,0.55) 58px 60px, transparent 60px),
    /* 屋根のハイライト＋陰 */
    linear-gradient(180deg, rgba(162,182,222,0.62) 0 5px, rgba(72,88,126,0.42) 5px 9px, transparent 9px),
    /* 車体（金属の青） */
    linear-gradient(180deg, #3b496b 0%, #29345b 50%, #151c2f 100%);
  box-shadow:0 6px 16px rgba(0,0,0,0.55), 0 0 26px rgba(120,150,210,0.26);
  animation:train-run linear forwards;
  will-change:transform;
}
/* 灯る窓（枠付きで連なる） */
.theme-train .train-car::before {
  content:''; position:absolute; left:64px; right:15px; top:16px; height:30px;
  border-radius:4px;
  background:repeating-linear-gradient(90deg,
    rgba(34,42,62,0.96) 0 6px,
    rgba(255,229,160,0.97) 6px 32px,
    rgba(34,42,62,0.96) 32px 38px);
  box-shadow:0 0 14px rgba(255,219,142,0.8), inset 0 0 0 2px rgba(16,22,36,0.62);
}
/* 床下フレームと車輪（レールに乗る） */
.theme-train .train-car::after {
  content:''; position:absolute; left:16px; right:10px; bottom:-7px; height:13px;
  background:
    radial-gradient(circle at 22px 4px, #0a0d15 0 5.5px, transparent 6.5px),
    radial-gradient(circle at 50px 4px, #0a0d15 0 5.5px, transparent 6.5px),
    radial-gradient(circle at calc(100% - 50px) 4px, #0a0d15 0 5.5px, transparent 6.5px),
    radial-gradient(circle at calc(100% - 22px) 4px, #0a0d15 0 5.5px, transparent 6.5px),
    linear-gradient(180deg, #0f131d 0 5px, transparent 5px);
}
@keyframes train-run {
  from { transform:translateX(110vw); }
  to   { transform:translateX(-130%); }
}