/* ============================================================
   似与夜一场相会 — everything that only happens after dark
   ============================================================ */

/* ============================================================
   night sky — aurora, moon, and no petals
   ============================================================ */
[data-theme="night"] .sky{
  background:
    radial-gradient(60% 40% at 78% -6%, rgba(150,190,255,.22) 0%, rgba(150,190,255,0) 62%),
    radial-gradient(80% 50% at 12% 4%, rgba(120,90,190,.28) 0%, rgba(120,90,190,0) 64%),
    linear-gradient(180deg,
      var(--sky-zenith) 0%,
      var(--sky-mid) 42%,
      #131c3d 66%,
      var(--sky-haze) 100%);
}
/* the sun flare becomes a small high moon */
[data-theme="night"] .sky::after{
  top:6vh; right:9vw; width:11vw; height:11vw;
  background:
    radial-gradient(circle at 38% 36%, #fffdf3 0 33%, rgba(255,250,230,.5) 40%, rgba(255,250,230,0) 62%),
    radial-gradient(circle, rgba(200,220,255,.3) 0%, rgba(200,220,255,0) 72%);
  filter:blur(.4px);
  animation:moonbreathe 11s ease-in-out infinite;
}
@keyframes moonbreathe{ 0%,100%{ opacity:.92 } 50%{ opacity:1 } }
[data-theme="night"] .clouds{ opacity:.16; filter:blur(2px) brightness(.55) saturate(.4) }
[data-theme="night"] .grain{ opacity:.5; mix-blend-mode:soft-light }

/* aurora ribbons — night only */
.aurora{
  position:fixed; left:0; top:0; width:100%; height:74vh;
  z-index:-1; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 1.1s ease;
}
[data-theme="night"] .aurora{ opacity:1 }
.aurora i{
  position:absolute; left:-24%; width:148%; height:38vh;
  border-radius:46%;
  filter:blur(46px);
  mix-blend-mode:screen;
  animation:ribbon 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(1){
  top:-6vh;
  background:linear-gradient(96deg,transparent 4%,rgba(126,240,208,.34) 32%,rgba(120,180,255,.26) 58%,transparent 92%);
}
.aurora i:nth-child(2){
  top:8vh; animation-duration:34s; animation-delay:-8s;
  background:linear-gradient(84deg,transparent 8%,rgba(180,150,255,.3) 38%,rgba(126,240,208,.2) 66%,transparent 94%);
}
.aurora i:nth-child(3){
  top:22vh; height:26vh; animation-duration:42s; animation-delay:-19s;
  background:linear-gradient(102deg,transparent 12%,rgba(120,190,255,.22) 44%,rgba(255,182,212,.16) 72%,transparent 96%);
}
@keyframes ribbon{
  0%   { transform:translate3d(-6%,0,0) skewY(-2.5deg) scaleY(.9);  opacity:.55 }
  50%  { transform:translate3d(4%,3vh,0) skewY(2deg) scaleY(1.15);  opacity:.95 }
  100% { transform:translate3d(8%,-2vh,0) skewY(-1deg) scaleY(1);   opacity:.7 }
}

/* the theme switch itself */
.lamp{
  display:grid; place-items:center; flex:none;
  width:36px; height:36px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--line);
  box-shadow:var(--sh-1);
  font-size:.95rem; line-height:1;
  transition:transform .3s cubic-bezier(.3,1.5,.5,1), box-shadow .3s, border-color .3s;
}
.lamp:hover{ transform:rotate(-16deg) scale(1.08); border-color:var(--line-warm); box-shadow:var(--sh-2) }
.lamp span{ display:block; animation:lamp-in .45s cubic-bezier(.3,1.5,.5,1) }
@keyframes lamp-in{ from{ opacity:0; transform:scale(.4) rotate(-40deg) } }

/* a title that changes with the hour deserves a soft cross-fade */
[data-swap]{ animation:swap-in .5s ease both }
@keyframes swap-in{ from{ opacity:0; translate:0 6px } }

/* night cards need a hairline of light instead of a shadow edge */
[data-theme="night"] .card,
[data-theme="night"] .work,
[data-theme="night"] .post,
[data-theme="night"] .door,
[data-theme="night"] .idcard,
[data-theme="night"] .cab,
[data-theme="night"] .deck,
[data-theme="night"] .paper,
[data-theme="night"] .goods{
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%);
}
[data-theme="night"] .topbar{ background:rgba(13,20,44,.72) }
[data-theme="night"] .foot{ background:rgba(13,20,44,.5) }
[data-theme="night"] .dock__panel,
[data-theme="night"] .sheet,
[data-theme="night"] .toast,
[data-theme="night"] .bubble{ background:rgba(21,29,56,.94) }
[data-theme="night"] .bubble::after{ background:rgba(21,29,56,.94) }
[data-theme="night"] .chara__tag{ background:rgba(21,29,56,.86) }
[data-theme="night"] .chara__img{ filter:drop-shadow(0 14px 20px rgba(0,0,0,.5)) brightness(.94) saturate(1.04) }
[data-theme="night"] .paper{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%),
    repeating-linear-gradient(180deg,transparent 0 31px,rgba(150,180,240,.1) 31px 32px);
}
[data-theme="night"] .prose blockquote{ background:rgba(255,158,196,.1) }
[data-theme="night"] .rite{
  background:radial-gradient(circle at 50% 46%,rgba(30,42,80,.96),rgba(16,24,52,.94) 45%,rgba(8,12,30,.96));
}
[data-theme="night"] .seal__lock{ background:linear-gradient(150deg,#1b2440,#131b36) }
[data-theme="night"] .pill{ background:rgba(111,204,255,.12); color:#9adcff; border-color:rgba(111,204,255,.2) }
[data-theme="night"] .pill--pink{ background:rgba(255,158,196,.13); color:#ffb3cf; border-color:rgba(255,158,196,.22) }
[data-theme="night"] .pill--lemon{ background:rgba(255,225,160,.13); color:#ffdf9e; border-color:rgba(255,225,160,.22) }
[data-theme="night"] .chip{ background:linear-gradient(140deg,rgba(255,225,160,.14),rgba(255,255,255,.04)); color:#ffdf9e }
[data-theme="night"] .slot{ background:rgba(255,255,255,.03) }
[data-theme="night"] .slot.is-got{ background:linear-gradient(150deg,rgba(255,225,160,.16),rgba(255,158,196,.12)); color:#ffdf9e }
[data-theme="night"] .rank li:nth-child(odd){ background:rgba(150,180,240,.05) }
[data-theme="night"] .field input{ background:rgba(255,255,255,.04); color:var(--ink) }
[data-theme="night"] .cab__body{ background:#0e1631 }

/* washi tape reads as a bright smear on a dark card — soften it after dark */
[data-theme="night"] .taped::before{
  background-image:var(--tape-pink);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  opacity:.72;
}
[data-theme="night"] .taped--blue::before{ background-image:var(--tape-blue) }
[data-theme="night"] .taped--lemon::before{ background-image:var(--tape-lemon) }

/* after dark a figure should catch a little moonlight at the feet,
   not sit on a grey pad */
[data-theme="night"] .chara::after{
  background:radial-gradient(closest-side,rgba(150,190,255,.2),rgba(150,190,255,0) 76%);
}