/* ============================================================
   TAMA-DNA — per-character visual identity + scenes + day/night
   The character determines the flavour. The UI grammar stays fixed.
   ============================================================ */

.theme-neutral {
  --bg: #0d0d16; --accent: #7c6bff; --accent2: #4b3aff; --accentDark: #2a1e8f;
  --accentSoft: rgba(124,107,255,.18); --ink: #fff;
  --fontDisplay: 'Chakra Petch'; --fontBubble: 'Zen Maru Gothic';
}

/* ════════════════ 1. MOON PRINCESS — 90s shōjo, Tokyo night ════════════════ */
.theme-moon {
  --bg: #241a3d;
  --accent: #ffa8d8; --accent2: #b98bff; --accentDark: #7a3f8f;
  --accentSoft: rgba(255,168,216,.2);
  --ink: #fff2fb;
  --fontDisplay: 'Zen Maru Gothic'; --fontBubble: 'Zen Maru Gothic';
  --bubbleBg: rgba(255,250,253,.97); --bubbleInk: #4a2a52; --bubbleTail: rgba(255,250,253,.97);
  --bubbleRadius: 22px;
  --panelBg: linear-gradient(180deg, rgba(46,26,66,.9), rgba(26,15,42,.99));
  --panelLine: rgba(255,168,216,.28);
  --btnBg: linear-gradient(180deg, rgba(255,190,225,.15), rgba(255,190,225,.05));
  --btnLine: rgba(255,190,225,.28);
  --sheetBg: linear-gradient(180deg, #2c1c48, #1b1130);
  --sheetLine: rgba(255,168,216,.3);
  --specialBg: linear-gradient(180deg, rgba(255,168,216,.3), rgba(185,139,255,.15));
}
.theme-moon.tod-morning { --bg: #ffd9ea; --ink: #4b2340; }
.theme-moon.tod-day     { --bg: #b9e0ff; --ink: #3d2246; }
.theme-moon.tod-evening { --bg: #6b3a72; }
.theme-moon.tod-night   { --bg: #1b1240; }

/* ════════════════ 2. BLOOD DRAGON-01 — grimy 80s cyberpunk dojo ════════════════ */
.theme-dragon {
  --bg: #100c0e;
  --accent: #ff2e3f; --accent2: #ff7a1a; --accentDark: #7d0d18;
  --accentSoft: rgba(255,46,63,.16);
  --ink: #ffe9e6;
  --fontDisplay: 'Chakra Petch'; --fontBubble: 'Chakra Petch';
  --bubbleBg: rgba(16,12,14,.92); --bubbleInk: #ffdede; --bubbleTail: rgba(16,12,14,.92);
  --bubbleBorder: 1px solid #ff2e3f; --bubbleRadius: 4px;
  --panelBg: linear-gradient(180deg, rgba(20,14,16,.92), rgba(8,6,7,.99));
  --panelLine: rgba(255,46,63,.35);
  --btnBg: linear-gradient(180deg, rgba(255,60,60,.1), rgba(255,255,255,.03));
  --btnLine: rgba(255,90,80,.24);
  --sheetBg: linear-gradient(180deg, #1a1113, #0b0809);
  --sheetLine: rgba(255,46,63,.35);
  --specialBg: linear-gradient(180deg, rgba(255,46,63,.34), rgba(255,122,26,.12));
}
.theme-dragon .btn-en, .theme-dragon .act-lab, .theme-dragon .hud-name { text-transform: uppercase; }
.theme-dragon .act { border-radius: 6px; }
.theme-dragon .sheet { border-radius: 8px; }
.theme-dragon.tod-morning { --bg: #241a1a; }
.theme-dragon.tod-day     { --bg: #2a2426; }
.theme-dragon.tod-evening { --bg: #180f14; }
.theme-dragon.tod-night   { --bg: #0a070a; }

/* ════════════════ 3. GORO — Edo folklore, shrines, sake, yōkai ════════════════ */
.theme-goro {
  --bg: #1d2222;
  --accent: #ffb03a; --accent2: #e0553a; --accentDark: #8a4d10;
  --accentSoft: rgba(255,176,58,.18);
  --ink: #fff3dd;
  --fontDisplay: 'Shippori Mincho B1'; --fontBubble: 'Shippori Mincho B1';
  --bubbleBg: rgba(250,242,222,.97); --bubbleInk: #2c2118; --bubbleTail: rgba(250,242,222,.97);
  --bubbleRadius: 6px 18px 6px 18px;
  --panelBg: linear-gradient(180deg, rgba(34,32,28,.92), rgba(18,17,15,.99));
  --panelLine: rgba(255,176,58,.3);
  --btnBg: linear-gradient(180deg, rgba(255,176,58,.12), rgba(255,255,255,.03));
  --btnLine: rgba(255,176,58,.24);
  --sheetBg: linear-gradient(180deg, #262320, #14120f);
  --sheetLine: rgba(255,176,58,.3);
  --specialBg: linear-gradient(180deg, rgba(255,176,58,.28), rgba(224,85,58,.14));
}
.theme-goro .act { border-radius: 10px; }
.theme-goro.tod-morning { --bg: #d9c9a8; --ink: #2b2118; }
.theme-goro.tod-day     { --bg: #9fb3a4; --ink: #241c14; }
.theme-goro.tod-evening { --bg: #5a3326; }
.theme-goro.tod-night   { --bg: #11161c; }
/* yokai state re-tints the whole shell */
.theme-goro.yokai { --accent: #8affc1; --accent2: #6b5bff; --accentSoft: rgba(138,255,193,.18); }

/* ============================================================
   SCENES
   ============================================================ */
.scene { transition: filter 900ms ease, opacity 900ms ease; }
.sc { position: absolute; inset: 0; }
.sc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-sky { position: absolute; inset: 0; transition: background 1200ms ease; }
.sc-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; }

/* ---------- MOON scene ---------- */
.theme-moon .sc-sky { background: linear-gradient(180deg, #1a1140 0%, #3d1f5e 45%, #6b2a63 78%, #a33f74 100%); }
.theme-moon.tod-morning .sc-sky { background: linear-gradient(180deg, #ffd1e8 0%, #ffe6c9 55%, #ffd7b0 100%); }
.theme-moon.tod-day     .sc-sky { background: linear-gradient(180deg, #8fd0ff 0%, #cfe9ff 60%, #ffe6f4 100%); }
.theme-moon.tod-evening .sc-sky { background: linear-gradient(180deg, #3a2160 0%, #8a3a7a 55%, #ff8a63 100%); }
.theme-moon .sc-moon {
  position: absolute; top: 7%; right: 12%; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fffbe8, #ffe9a8 55%, #ffd06b);
  box-shadow: 0 0 50px 14px rgba(255,232,168,.45), 0 0 120px 40px rgba(255,190,230,.22);
  animation: moonFloat 9s ease-in-out infinite;
}
@keyframes moonFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.theme-moon.tod-day .sc-moon, .theme-moon.tod-morning .sc-moon { opacity: .25; }
.theme-moon .sc-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.7px 1.7px at 14% 22%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 32% 12%, #ffe9f7, transparent),
    radial-gradient(1.5px 1.5px at 58% 26%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 74% 8%, #d9f0ff, transparent),
    radial-gradient(1.6px 1.6px at 86% 20%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 8% 40%, #ffd9f2, transparent),
    radial-gradient(1.2px 1.2px at 46% 44%, #fff, transparent);
  animation: twinkle 4s ease-in-out infinite;
}
.theme-moon.tod-day .sc-stars, .theme-moon.tod-morning .sc-stars { opacity: 0; }
.theme-moon .sc-city { position: absolute; left: 0; right: 0; bottom: 18%; height: 40%; opacity: .85; }
.theme-moon .sc-city path { fill: #22103d; }
.theme-moon.tod-day .sc-city path, .theme-moon.tod-morning .sc-city path { fill: #b58fc9; }
.theme-moon .sc-win { fill: #ffe9a8; animation: winBlink 6s steps(1) infinite; }
@keyframes winBlink { 0%,88%{opacity:.9} 90%,100%{opacity:.25} }
.theme-moon .sc-floor {
  background: linear-gradient(180deg, rgba(255,190,230,.28), rgba(120,50,120,.75) 40%, rgba(60,22,70,.95));
  box-shadow: inset 0 12px 24px -14px rgba(255,255,255,.5);
}
.theme-moon .sc-floor::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
}

/* ---------- DRAGON scene ---------- */
.theme-dragon .sc-sky { background: linear-gradient(180deg, #14090c 0%, #1d1013 55%, #241417 100%); }
.theme-dragon.tod-day .sc-sky { background: linear-gradient(180deg, #241d1e 0%, #2e2527 60%, #372c2c 100%); }
.theme-dragon .sc-wall {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0) 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 54px);
}
.theme-dragon .sc-grime {
  position: absolute; inset: 0; opacity: .5;
  background:
    radial-gradient(60% 40% at 18% 78%, rgba(0,0,0,.65), transparent 70%),
    radial-gradient(50% 30% at 82% 20%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(40% 26% at 55% 55%, rgba(80,30,20,.35), transparent 70%);
}
.neon {
  position: absolute; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;
  letter-spacing: .12em; line-height: 1; pointer-events: none; writing-mode: vertical-rl;
}
.neon.n1 { top: 8%; left: 7%; font-size: 26px; color: #ff2e3f; text-shadow: 0 0 6px #ff2e3f, 0 0 22px #ff2e3f, 0 0 44px #a10c18; animation: neonFlick 5.5s infinite; }
.neon.n2 { top: 12%; right: 8%; font-size: 19px; color: #35e0ff; text-shadow: 0 0 6px #35e0ff, 0 0 20px #1594b3; animation: neonFlick 7.3s .8s infinite; }
.neon.n3 { top: 44%; right: 16%; font-size: 13px; color: #ffd166; text-shadow: 0 0 6px #ffd166, 0 0 16px #a37b17; opacity: .8; }
@keyframes neonFlick {
  0%,92%,100% { opacity: 1; }
  93% { opacity: .25; } 94% { opacity: .9; } 95% { opacity: .2; } 96% { opacity: 1; }
}
.theme-dragon .sc-tube {
  position: absolute; top: 4%; left: 26%; width: 48%; height: 5px; border-radius: 3px;
  background: #fff6e0; box-shadow: 0 0 22px 8px rgba(255,240,210,.35), 0 30px 90px 30px rgba(255,230,190,.12);
  animation: tubeFlick 6s infinite;
}
@keyframes tubeFlick { 0%,88%,100%{opacity:.95} 89%{opacity:.2} 90%{opacity:.85} 91%{opacity:.3} 92%{opacity:1} }
.theme-dragon .sc-pipes { position: absolute; inset: 0; opacity: .5; }
.theme-dragon .sc-pipes rect { fill: #2a2226; }
.theme-dragon .sc-floor {
  background: linear-gradient(180deg, rgba(70,50,50,.5), rgba(18,12,14,.98));
}
.theme-dragon .sc-floor::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 16px),
              repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 30px);
}
.theme-dragon .sc-puddle {
  position: absolute; bottom: 5%; left: 12%; width: 40%; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,46,63,.35), transparent 70%);
  filter: blur(2px); animation: pulse 3.5s ease-in-out infinite;
}
.theme-dragon .sc-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* ---------- GORO scene ---------- */
.theme-goro .sc-sky { background: linear-gradient(180deg, #0e141c 0%, #1b2029 55%, #2a2620 100%); }
.theme-goro.tod-morning .sc-sky { background: linear-gradient(180deg, #ffe3b8 0%, #e8d3ac 55%, #c9b78f 100%); }
.theme-goro.tod-day     .sc-sky { background: linear-gradient(180deg, #a9c6d8 0%, #c9d6c0 60%, #b3ab8c 100%); }
.theme-goro.tod-evening .sc-sky { background: linear-gradient(180deg, #4b2b3f 0%, #a1503a 60%, #d98b4a 100%); }
.theme-goro .sc-hills { position: absolute; left: 0; right: 0; bottom: 22%; height: 34%; opacity: .55; }
.theme-goro .sc-hills path { fill: #121a1c; }
.theme-goro.tod-day .sc-hills path, .theme-goro.tod-morning .sc-hills path { fill: #7d8a72; }
.theme-goro .sc-torii { position: absolute; left: 50%; bottom: 21%; width: 82%; height: 40%; transform: translateX(-50%); opacity: .95; }
.theme-goro .sc-torii .t-body { fill: #b2402f; }
.theme-goro .sc-torii .t-dark { fill: #7d2a1e; }
.theme-goro .lantern {
  position: absolute; width: 24px; height: 34px; border-radius: 12px / 15px;
  background: linear-gradient(180deg, #ffcf7a, #ff9a4d);
  box-shadow: 0 0 22px 6px rgba(255,180,90,.45); transform-origin: 50% -14px;
  animation: lanternSway 4.6s ease-in-out infinite;
}
.lantern::before { content:''; position:absolute; left:50%; top:-14px; width:1px; height:14px; background: rgba(0,0,0,.55); }
.lantern::after {
  content:''; position:absolute; inset: 6px 3px; border-radius: 8px;
  background: repeating-linear-gradient(0deg, rgba(160,60,30,.35) 0 1px, transparent 1px 7px);
}
.lantern.l1 { top: 12%; left: 9%; animation-delay: -.6s; }
.lantern.l2 { top: 9%; right: 11%; animation-delay: -2.1s; }
.lantern.l3 { top: 22%; right: 26%; width: 18px; height: 26px; animation-delay: -1.3s; opacity: .85; }
@keyframes lanternSway { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
.theme-goro.tod-day .lantern, .theme-goro.tod-morning .lantern { box-shadow: none; filter: saturate(.6) brightness(.85); }
.theme-goro .sc-floor {
  background: linear-gradient(180deg, rgba(120,105,80,.45), rgba(28,25,20,.98));
}
.theme-goro .sc-floor::after {
  content:''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 34px);
  opacity: .5;
}
.theme-goro .sc-mist {
  position: absolute; left: -20%; right: -20%; bottom: 14%; height: 30%;
  background: radial-gradient(ellipse at 30% 60%, rgba(220,230,235,.16), transparent 60%),
              radial-gradient(ellipse at 72% 50%, rgba(220,230,235,.12), transparent 60%);
  filter: blur(6px); animation: mistDrift 18s ease-in-out infinite alternate;
}
@keyframes mistDrift { from{transform:translateX(-4%)} to{transform:translateX(4%)} }

/* ============================================================
   WEATHER / AMBIENT PARTICLES (per theme)
   ============================================================ */
.wx { position: absolute; will-change: transform; pointer-events: none; }
.wx-petal { width: 9px; height: 9px; border-radius: 60% 20% 60% 20%; background: #ffc2e0; opacity: .85; }
.wx-star { width: 7px; height: 7px; background: #fff3c4;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.wx-rain { width: 1.5px; height: 16px; background: linear-gradient(180deg, rgba(180,220,255,0), rgba(180,220,255,.75)); }
.wx-ember { width: 4px; height: 4px; border-radius: 50%; background: #ffb03a; box-shadow: 0 0 8px #ff8c1a; }
.wx-spark { width: 3px; height: 3px; border-radius: 50%; background: #ff6a4a; box-shadow: 0 0 7px #ff2e3f; }
.wx-wisp { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #b9ffe0, rgba(140,255,200,0) 70%); }
@keyframes wxFall { to { transform: translate(var(--dx, 20px), 120vh) rotate(var(--rot, 360deg)); } }
@keyframes wxRise { to { transform: translate(var(--dx, -20px), -110%) rotate(var(--rot, 90deg)); opacity: 0; } }

/* time-of-day global grade */
#app.tod-night .stage::after,
#app.tod-evening .stage::after,
#app.tod-morning .stage::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: soft-light;
}
#app.tod-night .stage::after   { background: linear-gradient(180deg, rgba(30,40,110,.55), rgba(0,0,20,.35)); }
#app.tod-evening .stage::after { background: linear-gradient(180deg, rgba(255,120,60,.3), rgba(80,20,60,.3)); }
#app.tod-morning .stage::after { background: linear-gradient(180deg, rgba(255,220,170,.3), rgba(255,180,200,.12)); }