html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #0d0f12;
    color: #f8fafc;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#app {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default;
}

#app:active {
    cursor: none;
}

#loader {
    position: fixed;
    left: 50%;
    top: 50%;
    display: flex;
    width: min(360px, calc(100vw - 32px));
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 8px;
    background: rgb(13 15 18 / 78%);
    box-shadow: 0 18px 60px rgb(0 0 0 / 36%);
    backdrop-filter: blur(16px);
}

#loader[data-hidden='true'] { display: none; }

.loader-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 2px solid rgb(255 255 255 / 22%);
    border-top-color: #f8fafc;
    border-radius: 50%;
    animation: loader-spin 0.9s linear infinite;
}

#loader[data-state='error'] .loader-mark {
    border-color: #f87171;
    animation: none;
}

.loader-copy { min-width: 0; flex: 1; }
.loader-title { color: #fff; font-size: 14px; font-weight: 650; line-height: 1.2; }
.loader-message { margin-top: 3px; color: rgb(248 250 252 / 72%); font-size: 13px; line-height: 1.35; }
.loader-progress { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 12%); }
#loader-progress-bar { width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: #8dd7ff; transition: transform 160ms ease; }

@keyframes loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
\n\n/* Mobile walk controls */\n#touchControls {\n  position: fixed; inset: 0; z-index: 20; pointer-events: none;\n  touch-action: none;\n  display: none;\n}\n#touchJoystick {\n  position: absolute; left: 70px; bottom: calc(140px + env(safe-area-inset-bottom));\n  width: 100px; height: 100px; transform: translate(-50%, 50%);\n  border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,.27) 100%);\n  background-color: rgba(0,0,0,.2); border: 2px solid rgba(255,255,255,.2);\n  box-sizing: border-box; pointer-events: auto; touch-action: none;\n}\n#touchStick {\n  position: absolute; left: 28px; top: 28px; width: 40px; height: 40px;\n  border-radius: 50%; background: rgba(255,255,255,.53);\n  box-shadow: 0 2px 8px rgba(0,0,0,.3); pointer-events: none;\n}\n@media (hover: none) and (pointer: coarse) {\n  #touchControls { display: block; }\n  #app { touch-action: none; }\n}\n