@import url("./fonts/fonts.css");

:root {
  --zh: "ZCOOL KuaiLe", "Hachi Maru Pop", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --ja: "Hachi Maru Pop", "ZCOOL KuaiLe", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --ink:#75395f;
  --foil:#b68a60;
}
body, .small, .ribbon {font-family:var(--zh);color:var(--ink)}
[lang=ja],.jp,.ribbon span {font-family:var(--ja)}
.ribbon span {font-weight:400}
header,footer {font-family:var(--ja);letter-spacing:.23em}
.title {gap:18px}
.title img {filter:drop-shadow(0 12px 19px #b85e9160)}
.ribbon,.small {
  border:1px solid #b58359;
  border-radius:999px;
  background:linear-gradient(180deg,#fff8ef 2%,#ffeaf2 26%,#f4aecb 77%,#ef95bb 100%);
  box-shadow:inset 0 0 0 2px #fff7e8,inset 0 -6px 9px #ad548431,0 4px 0 #b06f8e50,0 9px 17px #8e55742f;
  text-shadow:1px 0 #fff7e8,-1px 0 #fff7e8,0 1px #fff7e8,0 -1px #fff7e8,0 3px 4px #ba6b94a0;
}
.ribbon {font-size:1.68rem}
.ribbon::before,.ribbon::after{color:#fff1ef;text-shadow:1px 0 #a97b58,0 2px #a97b58;font-size:2.1rem}
.sky {
  --px:0px;--py:0px;
  background:radial-gradient(ellipse at 49% 44%,#fff5ec 0%,#ffedf5 28%,transparent 65%),linear-gradient(156deg,#ead4f1,#f8d0e7 43%,#dfc9ef 77%,#f8e4ee);
}
.sky:before,.sky:after{display:none}
.sky>div {position:absolute;pointer-events:none}
.sky .distant-clouds,.sky .near-clouds {
  inset:-7%;
  translate:calc(var(--px)*.4) calc(var(--py)*.4);
  background:
    radial-gradient(ellipse 20% 10% at 10% 65%,#fffcf7 20%,#fce9f7ae 55%,transparent 79%),
    radial-gradient(ellipse 26% 12% at 23% 71%,#fff8f7 23%,#f9e6faaf 59%,transparent 80%),
    radial-gradient(ellipse 30% 16% at 42% 77%,#fbf1ff 21%,#e5caecc0 55%,transparent 77%),
    radial-gradient(ellipse 33% 15% at 73% 73%,#fff3f9 14%,#f5dff4b5 58%,transparent 80%),
    radial-gradient(ellipse 27% 13% at 95% 58%,#fff8f7 27%,#f4ddf0be 57%,transparent 77%),
    radial-gradient(ellipse 23% 11% at 1% 33%,#fff4fbb7,transparent 78%),
    radial-gradient(ellipse 24% 11% at 85% 18%,#fff3f7ab,transparent 82%);
  filter:blur(11px);
  animation:cloud-drift 31s ease-in-out infinite alternate;
}
.sky .near-clouds {
  inset:0 -12% -13%;
  translate:var(--px) var(--py);
  filter:blur(9px);
  animation-duration:19s;animation-direction:alternate-reverse;
  background:
    radial-gradient(ellipse 26% 15% at 6% 89%,#fff8fa 35%,#f9e8f3cf 57%,transparent 79%),
    radial-gradient(ellipse 24% 11% at 23% 94%,#fffaf9 36%,#fff3f8d7 59%,transparent 78%),
    radial-gradient(ellipse 38% 17% at 60% 101%,#fff8fc 44%,#e4cbed9f 63%,transparent 79%),
    radial-gradient(ellipse 29% 17% at 95% 87%,#fff8fa 34%,#f4def5ba 61%,transparent 79%);
}
@keyframes cloud-drift {to {transform:translate(2.5%,1.4%) scale(1.065)}}
.sky .moon {
  width:clamp(36px,8vw,110px);aspect-ratio:1;right:11%;top:16%;
  border-radius:50%;box-shadow:-12px 8px 0 -1px #fff5d2,-17px 13px 27px -9px #fff9ea;
  translate:calc(var(--px)*.64) calc(var(--py)*.64);
  opacity:.9;rotate:-26deg;
}
.constellations {inset:0;translate:calc(var(--px)*.52) calc(var(--py)*.52);opacity:.63}
.constellations i {
  position:absolute;width:clamp(78px,15vw,210px);aspect-ratio:1.6;
  border-top:1px solid #c29aaf9c;border-right:1px solid #c29aaf82;border-radius:55% 23% 30% 0;
  rotate:24deg;left:8%;top:22%;
}
.constellations i:nth-child(2) {left:auto;right:10%;top:58%;rotate:150deg;scale:.85}
.constellations i:nth-child(3) {left:24%;top:76%;rotate:-25deg;scale:.53}
.constellations i::before,.constellations i::after {content:'✧';position:absolute;color:#b68a71;top:-.65em;right:18%;text-shadow:0 0 5px #fff}
.constellations i::after {top:auto;bottom:-.6em;right:-.45em;content:'✦'}
.silks {inset:0;overflow:hidden;translate:calc(var(--px)*1.15) calc(var(--py)*1.15)}
.silks::before,.silks::after {
  content:"";position:absolute;width:57vw;height:12vw;border-radius:49%;
  left:-26vw;bottom:20%;rotate:-30deg;
  border:1px solid #fff7f4ab;box-shadow:0 0 0 2px #c29aa526,inset 0 8px 19px #fff6f7ae;
  background:linear-gradient(176deg,#fff6f8b0,transparent 49%,#fdf1f977);
}
.silks::after {left:auto;right:-26vw;bottom:27%;rotate:37deg}
.feathers{inset:0;translate:calc(var(--px)*1.3) calc(var(--py)*1.3)}
.feathers i {
  width:clamp(13px,3vw,35px);aspect-ratio:.42;position:absolute;
  top:34%;left:13%;border-radius:100% 20% 100% 5%;
  background:linear-gradient(118deg,#fff9f5a0 47%,#fdf7f1 48% 50%,#ffe1eda0 51%);
  box-shadow:0 0 11px #fff9;rotate:31deg;animation:float 6.2s infinite ease-in-out;
}
.feathers i:nth-child(2){top:67%;left:84%;rotate:-47deg;animation-delay:-3s;scale:.7}
.feathers i:nth-child(3){top:77%;left:19%;rotate:73deg;animation-delay:-1s;scale:.5}
#stars {inset:0;translate:var(--px) var(--py)}
.star{color:#b37d9e;text-shadow:0 0 8px #fff8ec}
.border {border:1px solid #aa775672;outline:1px solid #fff9;outline-offset:3px;border-radius:22px}
.border::before,.border::after {content:"";position:absolute;left:1.25%;right:1.25%;height:8px;background:radial-gradient(circle,#fffdf3 1.25px,#c79a8760 1.7px,transparent 2.3px) repeat-x;background-size:13px 8px;top:-4px;opacity:.64}
.border::after{top:auto;bottom:-4px}
body:is([data-screen=book],[data-screen=story],[data-screen=animation]) .sky {
  background:radial-gradient(ellipse at 50% 47%,#fff0f4,transparent 62%),linear-gradient(143deg,#d9b4df,#f7cfe8 47%,#ccb2e7);
}
body:has(canvas:is([data-phase=show],[data-phase=depart])) .near-clouds{filter:blur(13px) brightness(1.13)}
body:has(canvas[data-phase=depart]) .constellations{opacity:.95}
.near-clouds,.constellations{transition:filter 1.1s,opacity 1.1s}
.stage::before{display:none}
.stage .caption {font-size:1.04rem;text-shadow:0 0 10px #fff,0 1px #fff}
.story .stage{margin-bottom:-22px}
.letter.stationery {
  position:relative;
  text-align:left;
  width:min(100%,475px);
  padding:15px 21px 14px;
  border:1px solid #bb8e65;
  border-radius:17px 32px 19px 27px;
  background:
    radial-gradient(ellipse at 0 0,#f8d7e7aa,transparent 31%),
    radial-gradient(ellipse at 100% 100%,#f3d4e7a1,transparent 27%),
    linear-gradient(150deg,#fffcf4,#fff6f7);
  box-shadow:inset 0 0 0 4px #fff9f1,inset 0 0 0 5px #d6af8f,0 7px 24px #7541652d;
}
.letter.stationery::before,.letter.stationery::after {
  position:absolute;display:block;color:#ba7d92;text-shadow:0 1px #fff;
  content:"୨♡୧";font-size:1.17rem;top:-11px;left:15px;line-height:1;
}
.letter.stationery::after{content:"✧";top:auto;left:auto;bottom:12px;right:16px;color:#bb9067}
.letter-heading {font-size:.82rem;letter-spacing:.13em;color:#8c526f;border-bottom:1px solid #bc8f6755;padding:3px 0 6px}
.letter-heading span{color:#a5754c}
.letter.stationery p {
  display:block;min-height:0;
  font-size:clamp(1.06rem,3.6vw,1.28rem);
  line-height:1.48;
  margin:10px 0 9px;
}
.letter-action{display:flex;justify-content:flex-end;padding-right:11px}
.candy{min-height:40px;padding:6px 19px;font-size:1.02rem}
@media(max-width:480px){
  .title{gap:14px}
  .sky .moon{right:11%;top:19%;box-shadow:-6px 4px 0 0 #fff5d2,-7px 8px 21px #fff8}
  .constellations i{left:5%;top:26%}
  .letter.stationery{padding:13px 16px 12px}
  .story .stage{height:38svh;margin-bottom:-13px}
}
@media(prefers-reduced-motion:reduce){.sky .distant-clouds,.sky .near-clouds,.feathers i{animation:none;translate:none}}

.seal-hit{inset:50% auto auto 50%;width:var(--cover-hit-width,60%);height:var(--cover-hit-height,78%);translate:-50% -50%;border-radius:5%}
.stage .caption{bottom:-1%}
.sky::after{display:block;inset:0;width:auto;height:auto;transform:none;border-radius:0;box-shadow:none;opacity:.43;filter:none;background:radial-gradient(circle at 1px 1px,#fff9e6 1px,transparent 1.8px) 0 0/17px 17px;mask-image:radial-gradient(ellipse at 50% 47%,transparent 48%,#000b 95%);}
.border{background:
 radial-gradient(ellipse at 0 0,#fff8e377,transparent 11%) top left,
 radial-gradient(ellipse at 100% 0,#fff8e377,transparent 11%) top right,
 radial-gradient(ellipse at 0 100%,#fff8e377,transparent 11%) bottom left,
 radial-gradient(ellipse at 100% 100%,#fff8e377,transparent 11%) bottom right;}
.letter.stationery{background:radial-gradient(ellipse at 6% 0,#f4cedf8c,transparent 27%),radial-gradient(ellipse at 94% 100%,#f1c9df86,transparent 29%),linear-gradient(145deg,#fffcf3,#fff7f8);box-shadow:inset 0 0 0 4px #fff9f0,inset 0 0 0 5px #d6af8f,0 8px 24px #75416531;}
.ribbon{background:linear-gradient(#fff7f2,#f9d9e7 37%,#edaccb);letter-spacing:.18em}