:root { color-scheme: dark; --accent: #d5b6ff; --game-w: min(75dvh, 100vw); --game-h: 100dvh; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #101025; font-family: 'Segoe UI', Arial, sans-serif; }
#stage { position: fixed; inset: 0; display: grid; place-items: center; background: #101025; isolation: isolate; }
#stage::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg,rgba(10,9,27,.65),transparent 45%),url('evening-garden.png') center/cover no-repeat; }
#stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center,transparent 20%,rgba(10,9,27,.18)); pointer-events: none; }
#scene { position: relative; width: var(--game-w); height: var(--game-h); flex: none; background: #14142a; border-radius: 22px; box-shadow: 0 0 0 1px #dac5ff55,0 0 0 7px #111023aa,0 24px 100px #0009; overflow: hidden; isolation: isolate; }
#unity-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #14142a; outline: none; }
.site-brand { position: absolute; top: 28px; left: 30px; color: #fff; pointer-events: none; text-shadow: 0 2px 16px #000; }
.site-brand span { display: block; font-size: 10px; letter-spacing: .27em; color: #e4d7ef; margin-bottom: 8px; }
.site-brand strong { font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
.site-note { position: absolute; bottom: 26px; left: 30px; font-size: 11px; color: #ddcfe6; letter-spacing: .06em; }
#fullscreen-button { position: absolute; right: max(18px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #ffffff35; border-radius: 14px; background: #171528c9; color: #fff; cursor: pointer; z-index: 40; backdrop-filter: blur(12px); }
#fullscreen-button:hover { background: #514163; }
#fullscreen-button:focus-visible,button:focus-visible { outline: 2px solid #e1bbff; outline-offset: 3px; }
#fullscreen-button svg { width: 20px; height: 20px; fill: currentColor; }
#fullscreen-button[aria-pressed=true] { background: #644a7d; }
#unity-loading-bar { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 28px; text-align: center; color: #faf4ff; background: radial-gradient(ellipse at 30% 20%,#45335e88,transparent 55%),radial-gradient(ellipse at 80% 85%,#234e6266,transparent 60%),#141329; transition: opacity .45s ease,visibility .45s; }
#unity-loading-bar.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-orbit { position: relative; width: 156px; height: 156px; margin-bottom: 28px; }
.loader-orbit img { position: absolute; inset: 20px; width: 116px; height: 116px; object-fit: contain; animation: breathe 3s ease-in-out infinite; }
.loader-orbit svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.orbit-track { fill: none; stroke: #ffffff12; stroke-width: 2; }
#loader-ring { fill: none; stroke: #d4b4fa; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 5px #d4b4fa88); }
.loader-kicker { margin: 0 0 9px; color: #c1accf; letter-spacing: .28em; font-size: 10px; }
.loader-title { margin: 0; font-size: clamp(28px,4vw,38px); font-weight: 400; letter-spacing: -.05em; }
#loader-status { margin: 20px 0 0; font-size: 13px; color: #ded4e9; min-height: 20px; }
#loader-detail { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: #aa9ab9; max-width: 280px; min-height: 36px; }
#loader-retry { margin-top: 20px; border: 1px solid #ffffff38; color: #fff; background: #665080; border-radius: 12px; padding: 12px 24px; cursor: pointer; }
[hidden] { display: none !important; }
#unity-warning { display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(90%,520px); z-index: 80; max-height: 35%; overflow: auto; overflow-wrap: anywhere; }
#auth-form { display: none; position: absolute; inset: 0; z-index: 50; align-items: center; justify-content: center; background: #090918b8; backdrop-filter: blur(8px); padding: 16px; overflow: auto; }
#auth-form.show { display: flex; }
#auth-card { flex-shrink: 0; width: min(100%,350px); max-height: 100%; overflow: auto; color-scheme: light; }
#auth-card input { font-size: 16px; }
#auth-card input:focus { border-color: #9774b5; box-shadow: 0 0 0 3px #9774b522; }
#auth-card .auth-submit { background: #7b589b; }
#auth-card .auth-toggle a { color: #795298; }
.is-device #scene { border-radius: 0; box-shadow: none; }
.is-device { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.is-device .site-brand,.is-device .site-note { display: none; }
.is-device #fullscreen-button { right: max(8px,env(safe-area-inset-right)); bottom: max(8px,env(safe-area-inset-bottom)); width: 38px; height: 38px; opacity: .65; }
@media (max-width: 1050px) { .site-brand,.site-note { display: none; } }
@media (max-height: 500px) { .loader-orbit { width: 100px; height: 100px; margin-bottom: 12px; } .loader-orbit img { inset: 12px; width: 76px; height: 76px; } .loader-title { font-size: 26px; } #loader-status { margin-top: 12px; } #unity-loading-bar { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }
@keyframes breathe { 50% { transform: translateY(-5px); filter: drop-shadow(0 8px 14px #c793e944); } }