/* ===========================================================================
   ABYSECHO · Moon-phase home — stylesheet
   ---------------------------------------------------------------------------
   THEME TOKENS live in :root (the "方案 B · 星图日记" palette). Swap these to
   re-skin the whole app; the layout/skeleton never changes.
   The WORLD→HOME transition is driven by JS (script.js) via inline styles +
   CSS transitions; the @keyframes here are only the always-on ambient loops.
   =========================================================================== */
:root{
  --bg0:#0a0f1a;            /* deepest background */
  --bg1:#1a2a4a;            /* upper background / phase-mask color */
  --ink:#eef3ff;           /* primary text */
  --dim:#8298c2;           /* secondary text */
  --moon:#dfe8ff;          /* lit moon surface */
  --glow:#9fb4e0;          /* accent / moonlight */
  --gold:#dfe8ff;          /* entry-icon fill */
  --line:rgba(150,175,225,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  background:var(--bg0);font-family:'Noto Serif SC',serif;margin:0;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.stage{padding:0;width:100%;height:100dvh}

/* ---- phone frame → fullscreen ---- */
.phone{
  position:relative;width:100%;height:100dvh;overflow:hidden;
  background:radial-gradient(140% 95% at 60% 24%,var(--bg1),var(--bg0) 64%);
  color:var(--ink);user-select:none;
}

/* ---- starfield ---- */
.stars{position:absolute;inset:0;z-index:0;background-image:
  radial-gradient(1.4px 1.4px at 12% 14%,rgba(238,243,255,.8),transparent),
  radial-gradient(1px 1px at 22% 26%,rgba(238,243,255,.5),transparent),
  radial-gradient(1.2px 1.2px at 34% 9%,rgba(238,243,255,.6),transparent),
  radial-gradient(1.3px 1.3px at 16% 40%,rgba(238,243,255,.6),transparent),
  radial-gradient(1.2px 1.2px at 60% 13%,rgba(238,243,255,.5),transparent),
  radial-gradient(1px 1px at 72% 30%,rgba(238,243,255,.38),transparent),
  radial-gradient(1px 1px at 54% 70%,rgba(238,243,255,.34),transparent),
  radial-gradient(1.3px 1.3px at 20% 76%,rgba(238,243,255,.5),transparent),
  radial-gradient(1px 1px at 44% 82%,rgba(238,243,255,.38),transparent)}
/* individual twinkling stars */
.tw{position:absolute;width:2px;height:2px;border-radius:50%;background:#eef3ff;
  z-index:1;animation:tw ease-in-out infinite}

/* ---- big moon (positioned/animated entirely from JS) ---- */
.bigmoon{position:absolute;top:126px;left:-353px;width:592px;height:592px;border-radius:50%;
  box-shadow:0 0 100px 16px rgba(159,180,224,.32);z-index:2}

/* ---- sea glow (bottom) ---- */
.sea{position:absolute;left:0;right:0;bottom:0;height:300px;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 8%,rgba(159,180,224,.10) 42%,rgba(159,180,224,.18) 72%,rgba(140,168,224,.26) 100%),
    linear-gradient(180deg,transparent,#0a1426 50%,#13203f);
  filter:blur(2px)}

/* ================= LOADING CHROME ================= */
.echo{position:absolute;top:104px;left:26px;z-index:4}
.echo-word{font:700 46px 'UnifrakturCook',serif;color:rgba(225,234,255,.92);white-space:nowrap}
.echo-sub{font:400 11px 'Cinzel',serif;letter-spacing:.22em;color:#a9c8ee;margin-top:9px;white-space:nowrap}

.buttons{position:absolute;left:0;right:0;bottom:182px;z-index:4;display:flex;flex-direction:column;gap:22px}
.entry{all:unset;cursor:pointer;margin-left:20px;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.entry svg{filter:drop-shadow(0 0 6px rgba(159,180,224,.75))}
.entry svg circle,.entry svg path{fill:var(--gold)}
.entry .en{font:600 16px 'Cinzel',serif;letter-spacing:.12em;color:var(--ink);
  text-shadow:0 2px 10px rgba(8,14,28,.9),0 0 12px rgba(159,180,224,.45)}
.entry .cn{font:300 9px 'Noto Serif SC';letter-spacing:.36em;color:var(--dim);
  padding-left:.36em;text-shadow:0 1px 6px rgba(8,14,28,.95)}

.abyss{position:absolute;left:0;right:0;bottom:36px;z-index:3;text-align:center;pointer-events:none;
  mix-blend-mode:soft-light;font:700 60px 'UnifrakturCook',serif;letter-spacing:.01em;color:rgba(228,238,255,.6)}
.tap{position:absolute;left:0;right:0;top:150px;z-index:4;text-align:center;pointer-events:none;
  font:400 11px 'Cinzel',serif;letter-spacing:.24em;color:var(--glow);animation:glow 2.4s ease-in-out infinite}

/* ================= HOME CHROME ================= */
.topbar{position:absolute;left:0;right:0;top:0;z-index:4}
.status{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;
  font:600 14px 'Noto Serif SC';color:var(--ink)}
.status .sig{opacity:.85;font-size:11px;letter-spacing:1px;display:inline-flex;align-items:center}
.batt{display:inline-block;width:20px;height:11px;border:1.4px solid var(--ink);border-radius:3px;position:relative}
.batt::after{content:"";position:absolute;inset:1.5px;width:62%;background:var(--ink);border-radius:1px}
.cal-head{padding:6px 24px 0;display:flex;justify-content:space-between;align-items:center}
.cal-head .month{font:500 12px 'Noto Serif SC';letter-spacing:.1em;color:var(--dim)}
.cal-head .month .en{font-family:'Cinzel',serif}
.head-right{display:flex;align-items:center;gap:13px}
.head-right .today{font:400 12px 'Noto Serif SC';color:var(--glow)}
.head-right .note{display:inline-flex;align-items:center;gap:5px;font:500 11px 'Noto Serif SC';
  letter-spacing:.14em;color:var(--glow)}

/* calendar dots live here; each dot's transform/opacity is set by JS */
.cal-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.dot{position:absolute;left:0;top:0;width:40px;margin-left:-20px;margin-top:-12px;text-align:center;
  transform-origin:center center}
.dot .ball{position:relative;width:24px;height:24px;margin:0 auto;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.dot .ball::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--moon)}
/* the phase shadow: a card-colored circle slid across the lit ball */
.dot .mask{position:absolute;top:-2px;width:26px;height:28px;border-radius:50%;background:var(--bg1)}
.dot .num{margin-top:7px;font-family:'Cinzel',serif;font-size:9px;letter-spacing:.04em;color:var(--dim)}

.dragzone{position:absolute;top:46px;left:0;right:0;height:118px;z-index:5;touch-action:none;
  cursor:grab;pointer-events:none}

.octagram{position:absolute;top:188px;left:0;right:0;display:flex;justify-content:center;z-index:2;pointer-events:none}
.octagram svg{animation:spin 80s linear infinite;filter:drop-shadow(0 0 14px rgba(159,180,224,.55))}

.event{position:absolute;top:344px;left:0;right:0;z-index:3;text-align:center;pointer-events:none}
.event .ev-title{display:inline-flex;align-items:center;gap:6px;font:600 16px 'Noto Serif SC';letter-spacing:.14em;color:#1b2540}
.event .ev-sub{font:500 11px 'Noto Serif SC';letter-spacing:.12em;color:#2a3550;margin-top:3px}

.nav{position:absolute;left:50%;transform:translateX(-50%);bottom:80px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px}
.nav-item .cn{font:500 17px 'Noto Serif SC';letter-spacing:.14em;color:var(--ink)}
.nav-item .en{font:500 11px 'Cinzel',serif;letter-spacing:.24em;color:var(--dim);margin-left:7px}

.chev{position:absolute;left:50%;bottom:30px;z-index:3;color:var(--glow);transform:translateX(-50%);
  animation:bob 2.4s ease-in-out infinite}

/* ====================== AMBIENT KEYFRAMES (always-on loops) ======================
   spin — octagram rotation. 80s linear, infinite. Calm constant drift.
   glow — opacity breathing (.6↔1) for TAP prompt + sea shimmer. ~2.4s ease-in-out.
   tw   — starfield twinkle (.3↔.95). per-star duration/delay set inline.
   bob  — chevron hint bobs 5px. 2.4s ease-in-out.
   NOTE: the bob animation is paused by JS while the chevron is being moved by the
   transition, then resumes once HOME is live (so the idle hint doesn't fight it). */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes tw{0%,100%{opacity:.3}50%{opacity:.95}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}