:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  background: #11131a;
  color: #e6e3ed;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: #11131a; transition: background-color .55s ease; }
button { font: inherit; }
button:focus-visible { outline: 1px solid #ebcf8c; outline-offset: 5px; }

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #171a24 0%, #12141c 52%, #101218 100%);
  transition: background .55s ease;
}

body.lights-on .scene {
  background: radial-gradient(ellipse at 50% 36%, #fffdf8 0%, #f0f3f6 43%, #cbd4de 100%);
}

#universe {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
#universe:active { cursor: grabbing; }

#fireworks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.1s ease;
}
#fireworks.is-active { opacity: 1; }

.fireworks-wish {
  position: absolute;
  top: clamp(20px, 4.4vh, 52px);
  left: 50%;
  width: min(92vw, 1100px);
  margin: 0;
  transform: translate(-50%, -14px);
  text-align: center;
  color: #ffe7b0;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: clamp(18px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: clamp(1px, .24vw, 4px);
  line-height: 1.45;
  text-shadow:
    0 0 10px #fff4d3e6,
    0 0 26px #f2bd58c2,
    0 0 64px #dd893c85;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.fireworks-wish.is-visible { opacity: 1; transform: translate(-50%, 0); }
body.lights-on .fireworks-wish { opacity: 0; }

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 3px;
  color: #c4bed6;
  transition: opacity .7s;
  pointer-events: none;
}
.loading i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #edc57a;
  box-shadow: 0 0 20px #ebbf68;
  animation: breathe 1.5s ease-in-out infinite;
}
.loading.done { opacity: 0; }
body.lights-on .loading { color: #3b4654; }

.greeting {
  position: absolute;
  right: clamp(26px, 7vw, 120px);
  bottom: clamp(48px, 8vh, 100px);
  width: min(44vw, 620px);
  text-align: right;
  pointer-events: none;
  opacity: 0;
  animation: appear 1.8s 1s forwards;
}
.greeting p { margin: 0; }
.handwriting {
  font-family: "URW Chancery L", "Apple Chancery", "Monotype Corsiva", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(24px, 2.7vw, 39px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .4px;
  color: #e0d8dd;
  text-shadow: 0 0 22px #a398c42e;
  transition: color .55s ease, text-shadow .55s ease;
}
.blessing {
  margin: 11px 0 0 auto !important;
  max-width: min(430px, 72vw);
  min-height: 3.8em;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 2.2px;
  color: #aaa5b6;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .45s ease, transform .45s ease, color .55s ease, text-shadow .55s ease;
  text-shadow: 0 0 14px #aa9ec42e;
}
.blessing.is-visible { opacity: 1; transform: translateY(0); }

body.lights-on .handwriting {
  color: #202733;
  text-shadow: 0 1px 0 #ffffffb8, 0 0 22px #8a97a52e;
}
body.lights-on .blessing {
  color: #10151c;
  text-shadow: 0 1px 0 #ffffffa8;
}

.tools {
  position: absolute;
  left: clamp(22px, 4vw, 62px);
  bottom: 35px;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: .72;
  transition: opacity .3s;
}
.tools:hover, .tools:focus-within { opacity: 1; }
.tools button {
  border: 1px solid #aaa1cd25;
  background: #1b1c27b8;
  color: #d8d0e5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, color .2s, transform .2s, opacity .2s;
}
.tools button:hover { background: #35314480; border-color: #cbb6e36b; transform: translateY(-2px); }
.tools button:disabled { cursor: not-allowed; opacity: .38; transform: none; }
.tools button:disabled:hover { background: #1b1c2770; border-color: #aaa1cd25; }
.tools svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lights-toggle, .wish {
  height: 36px;
  gap: 8px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: 1.7px;
  white-space: nowrap;
}
.lights-toggle svg { width: 17px; height: 17px; }
.lights-toggle .sun-icon { display: none; }
.lights-toggle .moon-icon { display: block; }
body.lights-on .lights-toggle .sun-icon { display: block; }
body.lights-on .lights-toggle .moon-icon { display: none; }
.icon-button { width: 36px; height: 36px; border-radius: 50%; }

body.lights-on .tools button {
  border-color: #2230442b;
  background: #ffffff8f;
  color: #202a37;
  box-shadow: 0 8px 28px #53627312;
}
body.lights-on .tools button:hover {
  border-color: #22304455;
  background: #ffffffe0;
}
body.lights-on .tools button:disabled:hover {
  border-color: #2230442b;
  background: #ffffff8f;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  color: #7c798b;
  font-size: 10px;
  letter-spacing: 2px;
  pointer-events: none;
  opacity: 0;
  animation: hint 9s 2s forwards;
}
body.lights-on .hint { color: #5e6977; }

.toast {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%, 6px);
  font-size: 13px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 2;
  color: #f5e1b5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s, transform .7s, color .55s;
  white-space: nowrap;
  text-shadow: 0 0 20px #ffba5766;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.lights-on .toast {
  color: #233040;
  text-shadow: 0 1px 0 #ffffffb8;
}

.fallback {
  position: absolute;
  inset: 45% 18% auto;
  text-align: center;
  font-size: 14px;
  line-height: 2;
  color: #d1c7df;
}
body.lights-on .fallback { color: #27303b; }
.fallback[hidden] { display: none; }

@keyframes appear { to { opacity: 1; } }
@keyframes breathe { 50% { opacity: .3; } }
@keyframes hint {
  0% { opacity: 0; }
  15%, 65% { opacity: .6; }
  100% { opacity: 0; }
}

@media (max-width: 600px) {
  .greeting { right: 24px; bottom: 104px; width: calc(100vw - 48px); }
  .handwriting { font-size: 28px; }
  .blessing { max-width: 78vw; min-height: 5.2em; font-size: 9px; line-height: 1.8; letter-spacing: 1.35px; }
  .tools { bottom: 27px; left: 20px; gap: 7px; }
  .lights-toggle, .wish { padding: 0 11px; font-size: 10px; letter-spacing: 1.2px; }
  .hint { bottom: 80px; left: auto; right: 21px; transform: none; font-size: 9px; letter-spacing: 1px; }
  .toast { top: 12%; font-size: 11px; letter-spacing: 2px; white-space: normal; width: 86vw; }
}

@media (max-width: 370px) {
  .tools { left: 12px; gap: 5px; }
  .lights-toggle, .wish { padding: 0 9px; letter-spacing: .8px; }
}

@media (max-height: 550px) and (min-width: 650px) {
  .greeting { right: 35px; bottom: 54px; }
  .handwriting { font-size: 25px; }
  .blessing { min-height: 2.8em; font-size: 9px; }
  .tools { bottom: 22px; }
  .hint { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .loading i { animation: none; }
  .greeting { animation: none; opacity: 1; }
  .hint { animation: none; opacity: 0; }
  .blessing, .handwriting, .tools button { transition: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wish-dialog-open .tools {
  opacity: .34;
  pointer-events: none;
}

.wish-dialog {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, #4f41604f 0%, #090a11e8 72%),
    #07080de8;
  animation: dialog-fade .35s ease both;
}
.wish-dialog[hidden] { display: none; }
.wish-dialog-panel {
  width: min(520px, calc(100vw - 40px));
  padding: 34px 34px 30px;
  border: 1px solid #e7c78354;
  border-radius: 24px;
  background: linear-gradient(160deg, #242135f2 0%, #12131eee 74%);
  box-shadow: 0 28px 90px #00000080, inset 0 1px 0 #ffffff12;
  text-align: center;
  color: #ece6f2;
  animation: dialog-rise .45s cubic-bezier(.2, .8, .2, 1) both;
}
.wish-dialog-kicker {
  margin: 0 0 12px;
  color: #d6b66d;
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.wish-dialog-title,
#wish-dialog-title {
  margin: 0;
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: 3px;
  color: #fff8e9;
  text-shadow: 0 0 28px #e9c57826;
}
.wish-dialog-description {
  margin: 12px 0 22px;
  color: #a8a2b6;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 1.5px;
}
#name-input,
#wish-input {
  width: 100%;
  height: 52px;
  padding: 0 17px;
  border: 1px solid #b9acdc38;
  border-radius: 14px;
  outline: none;
  background: #090b138c;
  color: #f1edf7;
  caret-color: #e6c477;
  font: inherit;
  font-size: 14px;
  letter-spacing: 1px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
#name-input {
  height: 44px;
  margin-bottom: 10px;
  font-size: 13px;
}
#name-input::placeholder,
#wish-input::placeholder { color: #6f6a80; }
#name-input:focus,
#wish-input:focus {
  border-color: #ddc07899;
  background: #0a0c169e;
  box-shadow: 0 0 0 3px #ddc07814, 0 0 28px #e7c77b12;
}
.wish-dialog-error {
  min-height: 20px;
  margin: 7px 2px 4px;
  color: #e7a4a4;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: left;
}
.wish-submit {
  width: 100%;
  height: 45px;
  border: 1px solid #e7c78370;
  border-radius: 14px;
  background: linear-gradient(180deg, #efd79b 0%, #caa65d 100%);
  color: #211a10;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  box-shadow: 0 10px 28px #d6ae5a1f;
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.wish-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px #d6ae5a33;
}
.wish-submit:active { transform: translateY(0); }

@keyframes dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dialog-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .wish-dialog { padding: 18px; }
  .wish-dialog-panel { width: 100%; padding: 28px 21px 23px; border-radius: 20px; }
  .wish-dialog-description { margin-bottom: 18px; font-size: 10px; }
  #wish-input { height: 50px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .wish-dialog, .wish-dialog-panel { animation: none; }
}