#loading-screen { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: #80d0ef url('assets/profile/background.png') center / cover no-repeat; color: #5d4236; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700; }
#loading-screen[hidden] { display: none; }
#loading-screen::before { content: ""; position: absolute; inset: 0; background: #80d0ef url('assets/profile/background.png') center bottom / cover no-repeat; pointer-events: none; }
.loading-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--loading-scale, 1)); }
.loading-stage > img { position: absolute; display: block; height: auto; max-width: none; }
.loading-cloud { left: 50%; transform: translateX(-50%); top: 16px; width: 766px; }
.loading-logo { left: 50%; transform: translateX(-50%); top: 65px; width: 574px; }
.loading-message { position: absolute; left: 50%; transform: translateX(-50%); top: 361px; width: 1010px; min-height: 270px; padding: 24px 26px; border-radius: 26px; background: #faf5ed; box-shadow: 0 7px 26px rgb(93 66 54 / 28%), inset 0 0 25px rgb(234 219 199 / 25%); text-shadow: 1px 2px 3px rgb(93 66 54 / 18%); font-size: 32px; line-height: 1.7; }
.loading-message p { margin: 0; }
.loading-message strong { position: relative; display: inline-block; font-size: 36px; font-weight: 700; padding-bottom: 1px; }
.loading-message strong::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #edb0bf; transform: scaleX(0); transform-origin: left center; }
.loading-message strong.line-drawn::after { transform: scaleX(1); transition: transform 650ms linear; }
.loading-sequence .loading-stage > img, .loading-sequence .loading-message { visibility: hidden; }
.loading-sequence .loading-stage > .is-revealed { visibility: visible; }
.loading-sequence .loading-cloud.is-revealed,
.loading-sequence .loading-logo.is-revealed,
.loading-sequence .loading-message.is-revealed { animation: loading-logo-appear 600ms ease-out both; }
@keyframes loading-logo-appear { from { opacity: 0; } to { opacity: 1; } }
.loading-character { visibility: hidden; }
.loading-character.is-revealed { visibility: visible; }
.loading-cat-cape { left: 103px; top: 644px; width: 468px; }
.loading-cat-moti { left: 508px; top: 579px; width: 315px; }
.loading-cat-hat { left: 854px; top: 660px; width: 618px; }
.loading-cat-cola { left: 1470px; top: 642px; width: 352px; }
.loading-cat-cape, .loading-cat-moti, .loading-cat-hat, .loading-cat-cola { translate: 110px calc(22px + var(--loading-cats-offset-y, 0px)); }

.loading-cat-cape { translate: 80px calc(-16px + var(--loading-cats-offset-y, 0px)); rotate: -6deg; transform-origin: center bottom; }
#loading-curtain { position: fixed; inset: 0; z-index: 110; overflow: hidden; }
#loading-curtain[hidden] { display: none; }
#loading-curtain.is-covered { background: #faf3e9; }
.curtain-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--curtain-scale, 1)); }
.curtain-cloud { position: absolute; width: 2700px; height: auto; max-width: none; visibility: hidden; }
.curtain-cloud.is-visible { visibility: visible; }
.curtain-br { left: 300px; top: -50px; --exit-x: 110%; --exit-y: 110%; }
.curtain-tl { left: -1150px; top: -650px; rotate: 180deg; --exit-x: -110%; --exit-y: -110%; }
.curtain-bl { left: -1050px; top: 80px; --exit-x: -110%; --exit-y: 110%; }
.curtain-tr { left: 100px; top: -650px; rotate: 180deg; --exit-x: 110%; --exit-y: -110%; }
.is-exiting .curtain-cloud { translate: var(--exit-x) var(--exit-y); transition: translate 1000ms cubic-bezier(.55,0,.8,.4); }
@media (max-width: 700px) {
 #loading-screen { overflow-y: auto; }
 .loading-stage { width: 100%; height: 100svh; min-height: 640px; left: 0; top: 0; transform: none; }
 .loading-cloud { left: 50%; top: 3%; width: 88%; }
 .loading-logo { left: 50%; top: 6%; width: 68%; }
 .loading-message { left: 50%; top: 25%; width: 88%; min-height: 0; padding: 20px 18px; font-size: 15px; line-height: 1.85; border-radius: 20px; }
 .loading-message strong { font-size: 15px; display: inline-block; max-width: 100%; }
 .loading-message strong::after { bottom: -2px; height: 3px; }
 .loading-cat-cape { left: 0; top: auto; bottom: 5%; width: 28%; translate: none; }
 .loading-cat-moti { left: 26%; top: auto; bottom: 1%; width: 22%; translate: none; }
 .loading-cat-hat { left: 45%; top: auto; bottom: 6%; width: 36%; translate: none; }
 .loading-cat-cola { left: 78%; top: auto; bottom: 2%; width: 22%; translate: none; }
 .curtain-stage { left: 0; top: 0; width: 100%; height: 100%; transform: none; --cloud-width: max(220vw, 160vh); }
 .curtain-cloud { width: var(--cloud-width); }
 .curtain-br { left: calc(75% - var(--cloud-width) / 2); top: calc(75% - var(--cloud-width) / 3); }
 .curtain-bl { left: calc(25% - var(--cloud-width) / 2); top: calc(75% - var(--cloud-width) / 3); }
 .curtain-tl { left: calc(25% - var(--cloud-width) / 2); top: calc(25% - var(--cloud-width) / 3); }
 .curtain-tr { left: calc(75% - var(--cloud-width) / 2); top: calc(25% - var(--cloud-width) / 3); }
 .curtain-cloud.is-visible { animation: mobile-cloud-enter 700ms ease-out both; }
 .is-exiting .curtain-cloud.is-visible { animation: none; translate: var(--exit-x) var(--exit-y); }
 @keyframes mobile-cloud-enter { from { translate: var(--exit-x) var(--exit-y); } to { translate: 0 0; } }
}
@media (max-width: 700px) {
 .loading-stage { min-height: 100svh; }
 .loading-stage > img[class^="loading-cat-"] { display: none; animation: none; }
 .loading-message { top: 50%; transform: translate(-50%, -50%); }
}