/* melancholiamore: one invitation on black, the loading block before it, the credits after. */
body { color: var(--uk-text); font-family: var(--uk-font-body); }

#world-loading { position: fixed; left: 50%; top: 50%; z-index: 90; transform: translate(-50%, -50%); display: flex; align-items: center; pointer-events: none; font-size: 0; }
#world-loading[hidden], body:has(#loading-audio-status) #world-loading { display: none !important; }
#world-loading b { display: none; }
#world-loading i { width: 12px; height: 22px; background: var(--uk-primary-hi); animation: world-loading-blink 0.9s steps(1) infinite; }
@keyframes world-loading-blink { 50% { opacity: 0; } }

#loading-audio-status.loading-entry { top: 50%; bottom: auto !important; left: 50% !important; transform: translate(-50%, -50%); width: min(90vw, 28rem); max-width: none !important; text-align: center; }
#loading-audio-status.loading-entry button { display: block; margin: 0 auto; padding: 18px 28px; border: 1px solid #c9ccd2; border-radius: 0; background: #09090c; color: #e5e6e9; font: 30px/1.1 var(--uk-font-brand); cursor: pointer; }
#loading-audio-status.loading-entry button[hidden] { display: none; }
#loading-audio-status.loading-entry span { display: block; margin-top: 12px; font-size: 14px; }
#loading-audio-status.loading-entry span[hidden] { display: none; }
/* the invitation arrives in its own face, never a fallback one */
#loading-audio-status.loading-entry { opacity: 0; transition: opacity 0.6s ease-out; }
#loading-audio-status.loading-entry.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #loading-audio-status.loading-entry { transition: none; } }

#nasa-model-credits { position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10002; max-width: min(28rem, calc(100vw - 32px)); color: var(--uk-text); font: 12px/1.4 var(--uk-font-body); }
#nasa-model-credits[hidden] { display: none; }
#nasa-model-credits summary { cursor: pointer; width: max-content; color: #abb1bc; padding: 6px 0; }
#nasa-model-credits > div { position: absolute; bottom: 100%; left: 0; box-sizing: border-box; width: min(28rem, calc(100vw - 32px)); max-height: min(60vh, 28rem); overflow-y: auto; padding: 12px 16px; border: 1px solid var(--uk-primary-dim); background: var(--uk-surface); }
#nasa-model-credits ul { padding-left: 16px; } #nasa-model-credits li { margin: 10px 0; }
#nasa-model-credits a { color: var(--uk-primary-hi); } #nasa-model-credits small { display: block; color: var(--uk-muted); }
.a-enter-vr { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* your sound: a quiet key at the top left, the page a drop target */
#file-drop { position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 10002; display: flex; align-items: center; gap: 12px; }
#file-drop[hidden] { display: none; }
#file-drop button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--uk-primary-dim); border-radius: 0; background: rgba(9, 9, 12, 0.8); color: var(--uk-primary-hi); font: 24px/1 var(--uk-font-brand); cursor: pointer; }
#file-drop button:hover { border-color: var(--uk-primary); }
#file-drop button:focus-visible { outline: 2px solid var(--uk-ice); outline-offset: 2px; }
#file-drop span { color: var(--uk-muted); font: 13px/1.3 var(--uk-font-body); }
#file-drop-veil { position: fixed; inset: 0; z-index: 10003; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); border: 2px dashed var(--uk-primary-dim); color: var(--uk-primary-hi); font: 40px/1 var(--uk-font-brand); pointer-events: none; }
#file-drop-veil[hidden] { display: none; }

/* the account bar, at the foot of the page */
#account { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10002; max-width: calc(100vw - 32px); }
#account form, #account > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
#account input { box-sizing: border-box; width: 14rem; max-width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--uk-primary-dim); border-radius: 0; background: rgba(9, 9, 12, 0.8); color: var(--uk-text); font: 15px/1.2 var(--uk-font-body); }
#account button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--uk-primary-dim); border-radius: 0; background: rgba(9, 9, 12, 0.8); color: var(--uk-primary-hi); font: 22px/1 var(--uk-font-brand); cursor: pointer; }
#account button.quiet { border-color: transparent; background: none; color: var(--uk-muted); }
#account button:hover { border-color: var(--uk-primary); }
#account button:disabled { opacity: 0.5; cursor: default; }
#account :is(input, button):focus-visible { outline: 2px solid var(--uk-ice); outline-offset: 2px; }
#account > div > span { color: var(--uk-primary-hi); font: 15px/1.2 var(--uk-font-body); }
#account form > span { flex-basis: 100%; text-align: center; color: var(--uk-record); font: 13px/1.3 var(--uk-font-body); }
#account form > span:empty { display: none; }
#account a { color: var(--uk-muted); font: 15px/1.2 var(--uk-font-body); text-decoration: none; padding: 0 6px; }
#account a:hover, #account a:focus-visible { color: var(--uk-primary-hi); }
/* /cfg/<handle>: the space plays behind, its settings stand at the top right */
/* on a narrow screen the bar takes the full foot, above the credits and the headset key */
@media (max-width: 720px) { #account { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 32px); } }