:root { --ivory:#fff8e9; --ink:#17233c; --blue:#63c8f2; --pink:#f36f91; --yellow:#ffd35a; --mint:#6fe0bd; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--ivory); }
body { display:grid; place-items:center; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
#unity-frame { display:flex; flex-direction:column; align-items:center; width:min(100vw,56.25vh); }
#unity-shell { position:relative; width:100%; height:min(100vh,177.7778vw); aspect-ratio:9/16; overflow:hidden; background:var(--ink); box-shadow:0 0 0 1px #17233c1f,0 18px 55px #17233c33; }
#unity-canvas { display:block; width:100%; height:100%; outline:none; background:var(--ink); touch-action:none; }
#unity-loading { position:absolute; inset:0; z-index:30; display:grid; place-items:center; box-sizing:border-box; padding:7%; color:var(--ink); background:linear-gradient(180deg,#b7edff 0%,#e9fbff 55%,#fff1c9 100%); }
#unity-loading.is-hidden { display:none; }
[hidden] { display:none !important; }
.loading-card { width:100%; text-align:center; }
.loading-stage { position:relative; aspect-ratio:2.1; margin:-2% -3% 4%; }
.loading-floating-heart { position:absolute; bottom:10%; width:clamp(12px,3vw,26px); height:auto; opacity:0; pointer-events:none; animation:floating-heart 4.2s ease-out infinite; }
.heart-a { left:12%; animation-delay:-.3s; }.heart-b { left:31%; animation-delay:-2.1s; width:clamp(10px,2.4vw,21px); }
.heart-c { left:49%; animation-delay:-3.3s; }.heart-d { left:69%; animation-delay:-1.1s; width:clamp(10px,2.4vw,21px); }.heart-e { left:86%; animation-delay:-2.7s; }
@keyframes floating-heart { 0% { opacity:0; transform:translate(0,0) scale(.45); } 18% { opacity:.8; } 100% { opacity:0; transform:translate(12px,-650%) scale(1.05); } }
.loading-chase-track { position:absolute; inset:0 auto 0 0; width:64%; animation:chase-lane 5.2s ease-in-out infinite; }
.loading-character { position:absolute; bottom:2%; width:44%; aspect-ratio:4/5; background-repeat:no-repeat; background-size:800% 100%; animation:run-cycle .64s steps(8) infinite, chase-facing 5.2s step-end infinite; }
.loading-hero { left:0; background-image:url("loading/hero-run.png"); }
.loading-companion { left:50%; background-image:url("loading/companion-run.png"); animation-delay:-.16s,0s; }
.loading-title { margin:0 0 10px; font-size:clamp(22px,5vw,38px); font-weight:900; letter-spacing:.1em; }
#loading-status { margin:0 0 14px; line-height:1.5; font-size:clamp(14px,3.8vw,18px); }
.loading-track { height:12px; overflow:hidden; border:3px solid #fff; border-radius:99px; background:#17233c1c; box-shadow:0 3px 0 #17233c22; }
#unity-progress-bar { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--mint),var(--yellow)); transition:width .12s ease; }
#retry { margin-top:16px; padding:13px 24px; border:0; border-radius:999px; background:var(--pink); color:#fff; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 4px 0 #b64b68; }
#save-status { position:absolute; z-index:5; top:8%; left:5%; right:5%; padding:10px; background:#fff2ce; color:var(--ink); font-size:13px; text-align:center; border-radius:8px; }
@keyframes run-cycle { from { background-position:0 0; } to { background-position:114.285714% 0; } }
@keyframes chase-lane { 0%,100% { transform:translateX(0); } 50% { transform:translateX(56.25%); } }
@keyframes chase-facing { 0%,100% { transform:scaleX(1); } 50% { transform:scaleX(-1); } }
#unity-loading[data-paused="true"] * { animation-play-state:paused !important; }
#unity-loading[data-reduced-motion="true"] * { animation:none !important; transition:none !important; }
#unity-loading[data-reduced-motion="true"] .loading-chase-track { left:18%; }
#unity-loading[data-reduced-motion="true"] .loading-floating-heart { display:none; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
@media (orientation:landscape) and (max-height:520px) { #unity-loading { padding:4% 12%; } .loading-title { margin-bottom:6px; } #loading-status { margin-bottom:8px; } }