@font-face {
  font-family: "Nosorious CRT";
  src: url("/Assets/fonts/VT323-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nosorious Departure";
  src: url("/Assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nosorious Signal";
  src: url("/Assets/fonts/ShareTechMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --nos-font-ui: "Nosorious CRT", "Noto Sans Mono", "DejaVu Sans Mono", "Consolas", ui-monospace, monospace;
  --nos-font-location: "Nosorious Departure", "Nosorious Signal", "Noto Sans Mono", ui-monospace, monospace;

  --nos-color-system: #14e4d0;
  --nos-color-navigation: var(--nos-color-system);
  --nos-color-identity: #69d858;
  --nos-color-status: var(--nos-color-identity);
  --nos-color-project: #ef43c6;
  --nos-color-music: var(--nos-color-project);
  --nos-color-prompt: #f1df45;
  --nos-color-warning: var(--nos-color-prompt);
  --nos-color-close: var(--nos-color-prompt);
  --nos-color-text: #f3f8f7;
  --nos-color-muted: #8da5a2;
  --nos-color-error: #ff4e72;

  --nos-route-accent-hub: #14e4d0;
  --nos-route-accent-forest: #7bd55b;
  --nos-route-accent-datacenter: #31ef76;
  --nos-route-accent-ocean: #72dfe8;
  --nos-route-accent-special: #f1df45;
  --nos-route-accent: var(--nos-route-accent-hub);

  --nos-surface-light: rgba(3, 14, 17, 0.88);
  --nos-surface-strong: rgba(2, 7, 9, 0.98);
  --nos-surface-blue: #083c8d;
  --nos-border: rgba(20, 228, 208, 0.56);
  --nos-border-soft: rgba(20, 228, 208, 0.24);
  --nos-divider: rgba(20, 228, 208, 0.34);
  --nos-text-fringe: 0.28px 0 rgba(20, 228, 208, 0.14), -0.28px 0 rgba(239, 67, 198, 0.08);

  --nos-safe-top: max(10px, env(safe-area-inset-top, 0px));
  --nos-safe-right: max(10px, env(safe-area-inset-right, 0px));
  --nos-safe-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  --nos-safe-left: max(10px, env(safe-area-inset-left, 0px));
  --nos-space-1: 4px;
  --nos-space-2: 8px;
  --nos-space-3: 12px;
  --nos-space-4: 16px;
  --nos-space-5: 22px;
  --nos-corner-cut: 8px;
  --nos-control-height: 32px;
  --nos-touch-target: 42px;
}

@media (min-width: 761px) {
  :root {
    --nos-safe-top: max(16px, env(safe-area-inset-top, 0px));
    --nos-safe-right: max(16px, env(safe-area-inset-right, 0px));
    --nos-safe-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    --nos-safe-left: max(16px, env(safe-area-inset-left, 0px));
    --nos-space-4: 18px;
    --nos-space-5: 26px;
  }
}

.nos-ui,
.nos-ui-font {
  font-family: var(--nos-font-ui);
  font-synthesis: none;
  font-variant-ligatures: none;
  text-shadow: var(--nos-text-fringe);
}

#hp-identity-profile.nos-ui-font,
#hp-identity-profile.nos-ui-font .hp-id-btn {
  font-family: var(--nos-font-ui);
}

.nos-ui-location {
  font-family: var(--nos-font-location);
  font-size: clamp(1.1rem, 5vw, 2.25rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.05;
  text-transform: uppercase;
}

.nos-ui-panel,
.nos-ui-modal {
  position: relative;
  color: var(--nos-color-text);
  border: 1px solid var(--nos-border-soft);
  background: var(--nos-surface-light);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(7px);
}

.nos-ui-modal,
.nos-ui-modal--strong {
  background: var(--nos-surface-strong);
  border-color: var(--nos-border);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.68), 0 0 22px rgba(20, 228, 208, 0.07);
}

.nos-ui-clipped {
  clip-path: polygon(
    var(--nos-corner-cut) 0,
    calc(100% - var(--nos-corner-cut)) 0,
    100% var(--nos-corner-cut),
    100% calc(100% - var(--nos-corner-cut)),
    calc(100% - var(--nos-corner-cut)) 100%,
    var(--nos-corner-cut) 100%,
    0 calc(100% - var(--nos-corner-cut)),
    0 var(--nos-corner-cut)
  );
}

.nos-ui-heading-strip {
  display: flex;
  min-height: 26px;
  align-items: center;
  justify-content: space-between;
  gap: var(--nos-space-2);
  padding: 3px var(--nos-space-3);
  color: var(--nos-color-text);
  background: var(--nos-surface-blue);
  border-bottom: 1px solid rgba(106, 191, 255, 0.48);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.nos-ui-meta {
  display: grid;
  border-top: 1px dotted var(--nos-divider);
}

.nos-ui-meta-row {
  display: grid;
  grid-template-columns: minmax(78px, 0.72fr) minmax(0, 1.28fr);
  gap: var(--nos-space-2);
  min-height: 27px;
  align-items: center;
  border-bottom: 1px dotted var(--nos-divider);
}

.nos-ui-meta-key {
  color: var(--nos-color-identity);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nos-ui-meta-value {
  min-width: 0;
  color: var(--nos-color-text);
  overflow-wrap: anywhere;
}

.nos-ui-divider {
  height: 1px;
  margin: var(--nos-space-3) 0;
  border: 0;
  background: var(--nos-divider);
}

.nos-ui-divider--dotted {
  height: 0;
  background: none;
  border-top: 1px dotted var(--nos-divider);
}

.nos-ui-command-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nos-space-2) var(--nos-space-3);
}

.nos-ui-command,
.nos-ui-close {
  appearance: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--nos-color-system);
  font: inherit;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, filter 120ms ease, transform 80ms ease;
}

.nos-ui-command {
  min-height: var(--nos-control-height);
  padding: 5px 2px 3px;
}

.nos-ui-command--project {
  color: var(--nos-color-project);
}

.nos-ui-command--prompt {
  color: var(--nos-color-prompt);
}

.nos-ui-close {
  display: inline-grid;
  width: var(--nos-touch-target);
  height: var(--nos-touch-target);
  place-items: center;
  padding: 0;
  border: 1px solid currentColor;
  color: var(--nos-color-close);
}

.nos-ui-prompt-strip {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: var(--nos-space-2);
  padding: 4px var(--nos-space-3);
  color: var(--nos-color-prompt);
  border-block: 1px solid rgba(241, 223, 69, 0.34);
  background: rgba(241, 223, 69, 0.045);
  letter-spacing: 0.06em;
}

.nos-ui-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nos-color-status);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nos-ui-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: currentColor;
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 54%, transparent);
}

.nos-ui-crt {
  position: relative;
  isolation: isolate;
}

.nos-ui-crt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(to bottom, rgba(20, 228, 208, 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(239, 67, 198, 0.018), transparent 28%, rgba(20, 228, 208, 0.018));
  mix-blend-mode: screen;
}

.nos-ui-command:focus-visible,
.nos-ui-close:focus-visible,
.nos-ui [tabindex]:focus-visible {
  outline: 1px solid var(--nos-color-prompt);
  outline-offset: 3px;
}

.nos-ui-command:active,
.nos-ui-close:active,
.nos-ui-command.is-pressed,
.nos-ui-close.is-pressed {
  transform: translateY(1px);
  filter: brightness(1.22);
}

.nos-ui-command.is-selected,
.nos-ui-command[aria-selected="true"],
.nos-ui-command[aria-pressed="true"],
.nos-ui-status.is-selected {
  color: var(--nos-color-text);
  background: color-mix(in srgb, var(--nos-route-accent) 16%, transparent);
  border-color: var(--nos-route-accent);
}

.nos-ui-command:disabled,
.nos-ui-close:disabled,
.nos-ui-command[aria-disabled="true"],
.nos-ui-close[aria-disabled="true"],
.nos-ui .is-disabled {
  color: var(--nos-color-muted);
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.7);
  pointer-events: none;
}

.nos-ui .is-error,
.nos-ui [data-state="error"],
.nos-ui-status.is-error {
  color: var(--nos-color-error);
  border-color: var(--nos-color-error);
}

@media (hover: hover) {
  .nos-ui-command:hover,
  .nos-ui-close:hover {
    color: var(--nos-color-text);
    border-color: currentColor;
    background-color: rgba(255, 255, 255, 0.055);
    filter: brightness(1.12);
  }
}

@media (hover: none) {
  .nos-ui-command,
  .nos-ui-close {
    min-height: var(--nos-touch-target);
  }
}

.nos-signal-lock.is-signal-locking {
  animation: nos-signal-lock-resolve 160ms steps(2, end) both;
}

@keyframes nos-signal-lock-resolve {
  0% { opacity: 0.58; filter: brightness(1.32) saturate(0.72); }
  34% { opacity: 1; filter: brightness(0.94) saturate(1.08); }
  68% { opacity: 0.84; filter: brightness(1.14) saturate(0.92); }
  100% { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nos-loading-screen,
  .nos-entry-overlay,
  .nos-ui *,
  .nos-ui *::before,
  .nos-ui *::after,
  .nos-ui-command,
  .nos-ui-close,
  .nos-transient-hud,
  .nos-achievement-toast,
  .nos-signal-lock.is-signal-locking {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* World identity archive family */
#hp-identity-btn {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 136;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  color: #d5f7ff;
  border: 1px solid rgba(150, 210, 220, 0.24);
  border-radius: 50%;
  background: rgba(5, 3, 18, 0.92);
  box-shadow: 0 0 20px rgba(70, 150, 170, 0.14);
  cursor: pointer;
  transition: box-shadow 240ms ease, border-color 240ms ease, transform 240ms ease;
  -webkit-tap-highlight-color: transparent;
}

#hp-identity-btn[aria-expanded="true"] {
  z-index: 139;
}

#hp-identity-btn[hidden],
#world-identity-overlay[hidden],
#world-achievement-panel[hidden] {
  display: none !important;
}

#hp-identity-btn::before {
  content: none;
}

#hp-identity-btn .hp-identity-glyph {
  width: 20px;
  height: 20px;
  display: block;
}

#hp-identity-btn .hp-identity-avatar {
  position: absolute;
  inset: 4px;
  overflow: hidden;
  border: 1px solid rgba(170, 240, 255, 0.22);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.86);
}

#hp-identity-btn .hp-identity-avatar[hidden],
#hp-identity-btn .hp-identity-glyph[hidden],
#hp-identity-btn .hp-identity-dot[hidden] {
  display: none;
}

#hp-identity-btn .hp-identity-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

#hp-identity-btn .hp-identity-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(5, 3, 18, 0.98);
  border-radius: 999px;
  background: rgba(0, 255, 170, 0.95);
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.35);
}

#hp-identity-btn:focus-visible {
  outline: 1px solid var(--nos-color-prompt);
  outline-offset: 1px;
}

#hp-identity-btn.hp-intro-focus {
  border-color: rgba(213, 247, 255, 0.62);
  box-shadow: 0 0 34px rgba(120, 220, 255, 0.28), 0 0 14px rgba(213, 247, 255, 0.12);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  #hp-identity-btn {
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }

  .nos-identity-overlay {
    padding-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 44px);
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }
}

#dr-tab.hp-intro-focus {
  filter: none !important;
  backdrop-filter: none !important;
}

#dr-tab.hp-intro-focus [data-role="hp-music-word"] {
  color: var(--nos-color-text) !important;
  text-shadow: 0 0 14px rgba(120, 220, 255, 0.18);
}

.nos-identity-overlay,
#world-achievement-panel {
  position: fixed;
  inset: 0 0 38px;
  z-index: 137;
  display: grid;
  place-items: center;
  padding:
    calc(var(--nos-safe-top) + 4px)
    var(--nos-safe-right)
    calc(var(--nos-safe-bottom) + 4px)
    var(--nos-safe-left);
  overflow: hidden;
  background: rgba(0, 3, 7, 0.69);
  backdrop-filter: blur(3px);
  touch-action: none;
}

.nos-identity-overlay {
  place-items: start end;
  padding-top: calc(var(--nos-safe-top) + 46px);
  background: rgba(0, 3, 7, 0.48);
  backdrop-filter: blur(2px);
}

.nos-identity-profile,
.nos-achievement-archive {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(2, 9, 12, 0.93);
  border-color: color-mix(in srgb, var(--nos-color-system) 54%, transparent);
}

.nos-identity-profile {
  width: min(410px, 100%);
  transform-origin: top right;
}

.nos-achievement-archive {
  width: min(660px, 100%);
}

.nos-identity-header,
.nos-achievement-header {
  flex: 0 0 auto;
  min-height: 40px;
  padding-left: var(--nos-space-4);
}

.nos-identity-header-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.nos-achievement-header-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.nos-identity-kicker,
.nos-achievement-kicker {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nos-identity-heading,
.nos-achievement-heading {
  margin: 0;
  color: var(--nos-color-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
}

.nos-identity-close,
.nos-achievement-close {
  width: 44px;
  height: 38px;
  border-block: 0;
  border-right: 0;
  border-color: rgba(241, 223, 69, 0.62);
}

.nos-identity-body {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: start;
  gap: var(--nos-space-3);
  padding: var(--nos-space-3);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.nos-identity-portrait {
  position: relative;
  width: 94px;
  aspect-ratio: 1;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(20, 228, 208, 0.08));
}

.nos-identity-portrait::after {
  content: none;
}

.nos-identity-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.nos-identity-portrait-fallback {
  position: absolute;
  inset: 28%;
  display: grid;
  place-items: center;
  color: var(--nos-color-identity);
  border: 1px dotted var(--nos-divider);
  font-size: 0.72rem;
}

.nos-identity-portrait-fallback[hidden] {
  display: none;
}

.nos-identity-information {
  min-width: 0;
}

.nos-identity-meta .nos-ui-meta-row {
  grid-template-columns: minmax(72px, 0.48fr) minmax(0, 1.52fr);
  min-height: 26px;
}

.nos-identity-meta .nos-ui-meta-value {
  overflow: hidden;
  font-weight: 400;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nos-identity-signal {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.5rem;
  line-height: 1;
  opacity: 0.86;
}

.nos-identity-signal .nos-ui-status {
  gap: 4px;
  white-space: nowrap;
}

.nos-identity-signal .nos-ui-status::before {
  width: 5px;
  height: 5px;
  flex-basis: 5px;
}

.nos-identity-trace {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--nos-color-project) 72%, white);
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nos-identity-commands {
  flex: 0 0 auto;
  display: grid;
  padding: 0 var(--nos-space-3) 6px;
  border-top: 1px dotted var(--nos-divider);
}

.nos-identity-command {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline: 4px;
  border-bottom: 1px dotted var(--nos-divider);
  text-align: left;
  text-decoration: none;
}

.nos-identity-feedback {
  margin: 0;
  padding: 5px var(--nos-space-3) 8px;
  color: color-mix(in srgb, var(--nos-color-project) 70%, white);
  font-size: 0.62rem;
  line-height: 1.2;
}

.nos-identity-feedback:empty {
  display: none;
}

body.nos-identity-overlay-open #world-music-drawer,
body.nos-achievement-overlay-open #world-music-drawer {
  pointer-events: none;
}

/* Achievement archive uses the same overlay family without becoming a new menu system. */
#world-achievement-panel {
  z-index: 138;
}

.nos-achievement-tools {
  display: flex;
  align-items: center;
}

.nos-achievement-back {
  width: auto;
  min-width: 62px;
  padding-inline: 8px;
  color: var(--nos-color-prompt);
  border: 0;
  border-left: 1px solid rgba(241, 223, 69, 0.44);
  background: transparent;
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.nos-achievement-summary {
  flex: 0 0 auto;
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nos-space-3);
  padding: 4px var(--nos-space-4);
  color: var(--nos-color-identity);
  border-bottom: 1px dotted var(--nos-divider);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

#ach-panel-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--nos-color-system) 45%, transparent) rgba(0, 0, 0, 0.28);
  touch-action: pan-y;
}

.nos-achievement-row {
  min-height: 66px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--nos-space-3);
  padding: 10px var(--nos-space-4);
  border-bottom: 1px dotted var(--nos-divider);
}

.nos-achievement-row[data-state="locked"] {
  opacity: 0.55;
}

.nos-achievement-badge {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

.nos-achievement-copy {
  min-width: 0;
}

.nos-achievement-title {
  margin: 0;
  color: var(--nos-color-text);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.05;
}

.nos-achievement-description {
  margin-top: 5px;
  margin-bottom: 0;
  color: var(--nos-color-muted);
  font-size: 0.63rem;
  line-height: 1.25;
}

.nos-achievement-state {
  color: var(--nos-color-identity);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.nos-achievement-row[data-state="locked"] .nos-achievement-state {
  color: var(--nos-color-muted);
}

/* Transient World feedback occupies two reserved HUD lanes: notices below the
   top-corner controls and interaction context above the lower controls. */
.nos-transient-hud {
  --nos-transient-accent: #d5f7ff;
  color: var(--nos-color-text);
  pointer-events: none;
  isolation: isolate;
}

.nos-interaction-prompt {
  position: fixed;
  z-index: 88;
  left: 50%;
  bottom: calc(var(--nos-safe-bottom) + 34px);
  display: grid;
  grid-template-columns: 1px minmax(0, 1fr);
  gap: 10px;
  width: min(336px, calc(100vw - var(--nos-safe-left) - var(--nos-safe-right) - 12px));
  padding: 6px 8px 7px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.nos-interaction-prompt::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px -10px;
  background: linear-gradient(90deg, rgba(2, 7, 10, 0.42), rgba(2, 7, 10, 0.18) 72%, transparent);
  filter: blur(3px);
}

.nos-interaction-prompt.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.nos-transient-hud__rail {
  display: block;
  width: 1px;
  min-height: 100%;
  background: var(--nos-transient-accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--nos-transient-accent) 30%, transparent);
  opacity: 0.76;
}

.nos-interaction-prompt__content {
  min-width: 0;
  text-align: left;
}

.nos-interaction-prompt__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nos-interaction-prompt__title {
  color: var(--nos-transient-accent);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.1;
  text-shadow: 0 0 12px color-mix(in srgb, var(--nos-transient-accent) 22%, transparent);
  text-transform: uppercase;
}

.nos-interaction-prompt__command {
  display: flex;
  min-width: 0;
  margin-top: 5px;
  padding-top: 5px;
  align-items: center;
  gap: 9px;
  border-top: 1px solid color-mix(in srgb, var(--nos-transient-accent) 22%, transparent);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.nos-interaction-prompt__action {
  flex: 0 0 auto;
  color: var(--nos-transient-accent);
}

.nos-interaction-prompt__divider {
  width: 10px;
  height: 1px;
  flex: 0 0 10px;
  background: color-mix(in srgb, var(--nos-transient-accent) 38%, transparent);
}

.nos-interaction-prompt__controls {
  min-width: 0;
  overflow: hidden;
  color: rgba(229, 246, 247, 0.66);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#world-achievement-notifications {
  position: fixed;
  z-index: 140;
  top: calc(var(--nos-safe-top) + 58px);
  right: var(--nos-safe-right);
  display: flex;
  width: min(310px, calc(100vw - var(--nos-safe-left) - var(--nos-safe-right) - 18px));
  max-height: calc(100dvh - var(--nos-safe-top) - 210px);
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  overflow: hidden;
  pointer-events: none;
}

.nos-achievement-toast {
  --nos-transient-accent: #d9b247;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  width: min(100%, 292px);
  min-height: 42px;
  gap: 9px;
  padding: 4px 2px 4px 10px;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(2, 8, 10, 0.22) 34%, rgba(2, 8, 10, 0.62));
  opacity: 0;
  transform: translate(10px, -34px) scaleX(0.12);
  transform-origin: top right;
  transition: opacity 500ms ease, transform 320ms cubic-bezier(.22, .7, .28, 1);
}

.nos-achievement-toast::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nos-transient-accent));
  opacity: 0.7;
}

.nos-achievement-toast.is-visible {
  opacity: 1;
  transform: translate(0, 0) scaleX(1);
}

.nos-achievement-toast.is-leaving {
  opacity: 0;
  transform: translate(10px, -34px) scaleX(0.12);
}

.nos-achievement-toast__badge {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--nos-transient-accent) 28%, transparent));
}

.nos-achievement-toast__copy {
  min-width: 0;
  text-align: right;
}

.nos-achievement-toast__label {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: rgba(226, 243, 244, 0.4);
  font-size: 0.45rem;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nos-achievement-toast__title {
  display: block;
  overflow: hidden;
  color: #e6f7ff;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  line-height: 1.08;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.nos-identity-overlay-open #world-interaction-prompt,
body.nos-achievement-overlay-open #world-interaction-prompt,
body.nos-music-ui-open #world-interaction-prompt,
body.nos-identity-overlay-open #world-achievement-notifications,
body.nos-achievement-overlay-open #world-achievement-notifications {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .nos-interaction-prompt {
    bottom: calc(var(--nos-safe-bottom) + 198px);
    width: min(320px, calc(100vw - var(--nos-safe-left) - var(--nos-safe-right) - 8px));
    padding-inline: 8px;
  }

  .nos-interaction-prompt__title {
    font-size: 0.82rem;
  }

  .nos-interaction-prompt__command {
    font-size: 0.54rem;
  }

  #world-achievement-notifications {
    top: calc(var(--nos-safe-top) + 48px);
    width: min(294px, calc(100vw - var(--nos-safe-left) - var(--nos-safe-right) - 18px));
  }
}

@media (max-height: 520px) and (max-width: 760px) {
  .nos-interaction-prompt {
    bottom: calc(var(--nos-safe-bottom) + 132px);
  }

  #world-achievement-notifications {
    top: calc(var(--nos-safe-top) + 46px);
    max-height: calc(100dvh - var(--nos-safe-top) - 176px);
  }
}

#dr-progress::before {
  content: "";
  position: absolute;
  inset: -12px 0;
}

#dr-progress:focus-visible {
  outline: 1px dotted rgba(213, 247, 255, 0.72);
  outline-offset: 5px;
}

#dr-progress-fill {
  pointer-events: none;
}

@media (max-width: 600px) {
  #world-achievement-panel {
    padding-top: var(--nos-safe-top);
    padding-bottom: var(--nos-safe-bottom);
  }

  .nos-identity-overlay {
    padding-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 50px);
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    align-items: start;
    justify-items: end;
  }

  #world-achievement-panel {
    place-items: stretch;
  }

  .nos-identity-profile {
    width: min(368px, 100%);
    height: auto;
    max-height: 100%;
  }

  .nos-achievement-archive {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .nos-identity-body {
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: var(--nos-space-3);
    padding-block: 10px;
  }

  .nos-identity-portrait {
    width: 74px;
  }

  .nos-identity-meta .nos-ui-meta-row {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 26px;
  }

  .nos-identity-meta .nos-ui-meta-value {
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nos-identity-commands {
    padding-inline: var(--nos-space-3);
    padding-bottom: 4px;
  }

  .nos-identity-command {
    min-height: 44px;
  }

  .nos-identity-close {
    height: 44px;
  }

  .nos-identity-feedback {
    padding-inline: var(--nos-space-3);
  }

  .nos-achievement-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px 10px;
    padding-inline: var(--nos-space-3);
  }

  .nos-achievement-state {
    grid-column: 2;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  #world-achievement-panel {
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  }

  .nos-identity-overlay {
    padding-top: calc(var(--nos-safe-top) + 46px);
    padding-bottom: var(--nos-safe-bottom);
  }

  .nos-achievement-archive {
    width: min(700px, 100%);
    height: 100%;
  }

  .nos-identity-profile {
    width: min(520px, 100%);
    height: auto;
    max-height: 100%;
  }

  .nos-identity-body {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    padding-block: 8px;
  }

  .nos-identity-portrait {
    width: 84px;
  }

  .nos-identity-commands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
  }

  .nos-identity-command {
    min-height: 44px;
  }
}

/* World loading and entry presentation ----------------------------------- */

.nos-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding:
    var(--nos-safe-top)
    var(--nos-safe-right)
    var(--nos-safe-bottom)
    var(--nos-safe-left);
  overflow: hidden;
  color: rgba(226, 235, 236, 0.72);
  text-shadow: 0 0 6px rgba(136, 190, 204, 0.035);
  background:
    radial-gradient(circle at 50% 55%, rgba(72, 126, 141, 0.035), transparent 34%),
    #010304;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.nos-loading-screen.fade {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nos-loading-signal {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(178, 211, 219, 0.022) 3px 4px);
}

.nos-loading-screen.nos-ui-crt::before {
  opacity: 0.06;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(178, 211, 219, 0.018) 3px 4px);
}

.nos-loading-composition {
  position: relative;
  z-index: 2;
  width: min(236px, calc(100vw - var(--nos-safe-left) - var(--nos-safe-right) - 40px));
  transform: translateY(4vh);
  text-transform: uppercase;
}

.nos-loading-rule {
  width: 100%;
  height: 1px;
  margin-bottom: 17px;
  background: rgba(128, 171, 182, 0.13);
}

#load-brand {
  color: rgba(231, 238, 239, 0.72);
  font-size: 0.76rem;
  letter-spacing: 0.34em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 0 7px rgba(136, 190, 204, 0.055);
}

.nos-loading-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-top: 13px;
  color: rgba(196, 210, 213, 0.42);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
}

#load-progress-readout {
  width: 4ch;
  flex: 0 0 4ch;
  color: rgba(170, 194, 200, 0.34);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-align: right;
}

.nos-loading-bar-track {
  position: relative;
  width: 100%;
  height: 1px;
  margin-top: 9px;
  overflow: hidden;
  background: rgba(123, 164, 176, 0.11);
}

.nos-loading-bar {
  width: 0;
  height: 100%;
  background: rgba(116, 196, 211, 0.74);
  box-shadow: 0 0 5px rgba(116, 196, 211, 0.16);
  transition: width 80ms linear, background-color 120ms ease;
}

.nos-loading-screen[data-state="degraded"] .nos-loading-bar {
  background: rgba(171, 190, 191, 0.62);
}

.nos-loading-screen[data-state="error"] .nos-loading-bar {
  background: rgba(190, 102, 116, 0.7);
  box-shadow: 0 0 5px rgba(190, 102, 116, 0.12);
}

.nos-loading-screen[data-state="ready"] #load-msg {
  color: rgba(218, 230, 231, 0.58);
}

.nos-loading-screen[data-state="degraded"] #load-msg {
  color: rgba(207, 204, 180, 0.56);
}

.nos-loading-screen[data-state="error"] #load-msg {
  color: rgba(215, 142, 152, 0.68);
}

.nos-loading-return {
  min-height: 28px;
  margin-top: 12px;
  color: rgba(213, 219, 219, 0.56);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.nos-entry-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  color: var(--nos-color-text);
  background: transparent;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.nos-entry-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 320ms ease, visibility 0s linear 0s;
}

.nos-entry-overlay.nos-ui-crt::before {
  opacity: 0.08;
}

.nos-entry-scene-transition {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 24% 68%, rgba(3, 12, 15, 0.76), rgba(0, 2, 4, 0.92) 70%),
    #000204;
  will-change: opacity;
}

.nos-entry-panel {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--nos-safe-bottom) + 38px + clamp(32px, 5.5vh, 58px));
  left: calc(var(--nos-safe-left) + clamp(12px, 4vw, 30px));
  width: min(78vw, 310px);
  padding: 13px 18px 12px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.nos-entry-panel::before {
  content: "";
  position: absolute;
  inset: -24px -44px -22px -32px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 76% 78% at 13% 54%,
    rgba(0, 4, 7, 0.76) 0,
    rgba(0, 4, 7, 0.56) 38%,
    rgba(0, 4, 7, 0.2) 68%,
    transparent 100%
  );
}

.nos-entry-kicker,
.nos-entry-project,
.nos-entry-shot,
.nos-entry-orientation {
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nos-entry-kicker {
  color: color-mix(in srgb, var(--nos-route-accent) 82%, white);
  font-size: 0.72rem;
  line-height: 1;
}

.nos-entry-destination {
  margin: 7px 0 0;
  color: color-mix(in srgb, var(--nos-route-accent) 84%, white);
  font-size: clamp(1.55rem, 6.8vw, 2.2rem);
  letter-spacing: 0.13em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 13px color-mix(in srgb, var(--nos-route-accent) 18%, transparent);
}

.nos-entry-project {
  margin-top: 8px;
  color: color-mix(in srgb, var(--nos-color-project) 74%, white);
  font-size: 0.72rem;
  line-height: 1;
}

.nos-entry-shotline {
  display: grid;
  grid-template-columns: 128px 84px;
  align-items: center;
  column-gap: 12px;
  width: 224px;
  max-width: 100%;
  margin-top: 16px;
  color: color-mix(in srgb, var(--nos-color-muted) 82%, white);
}

.nos-entry-shot {
  min-width: 0;
  font-size: 0.68rem;
  line-height: 1;
  white-space: nowrap;
}

.nos-entry-dots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 18px;
  align-items: center;
  justify-content: start;
  width: 84px;
  gap: 4px;
}

.nos-entry-dots span {
  width: 18px;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 360ms ease, box-shadow 360ms ease;
}

.nos-entry-dots span.is-active {
  background: var(--nos-route-accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--nos-route-accent) 34%, transparent);
}

.nos-entry-orientation {
  max-width: 280px;
  margin-top: 11px;
  color: color-mix(in srgb, var(--nos-color-prompt) 66%, white);
  font-size: 0.68rem;
  line-height: 1.18;
}

.nos-entry-orientation[hidden] {
  display: none;
}

.nos-entry-command {
  position: relative;
  display: block;
  width: max-content;
  min-width: 176px;
  max-width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 8px 3px 6px;
  color: color-mix(in srgb, var(--nos-route-accent) 88%, white);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-align: left;
  white-space: nowrap;
}

.nos-entry-command::after {
  content: "";
  position: absolute;
  inset: -4px -10px;
}

.nos-entry-overlay.is-signal-entering .nos-entry-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0 44%, color-mix(in srgb, var(--nos-route-accent) 12%, transparent) 48% 52%, transparent 56% 100%);
  animation: nos-entry-scan 180ms linear both;
}

@keyframes nos-entry-scan {
  from { transform: translateY(-70%); opacity: 0.4; }
  to { transform: translateY(70%); opacity: 0; }
}

@media (min-width: 761px) {
  .nos-entry-panel {
    bottom: calc(var(--nos-safe-bottom) + 38px + clamp(42px, 7vh, 68px));
    left: calc(var(--nos-safe-left) + clamp(24px, 4vw, 64px));
    width: min(340px, 31vw);
    padding-block: 16px 14px;
  }
}

@media (max-height: 520px) {
  .nos-entry-panel {
    bottom: calc(var(--nos-safe-bottom) + 38px + 20px);
    left: calc(var(--nos-safe-left) + 18px);
    width: min(300px, 52vw);
    padding: 8px 14px 6px 0;
  }

  .nos-entry-destination {
    margin-top: 5px;
    font-size: clamp(1.35rem, 4vw, 1.8rem);
  }

  .nos-entry-shotline,
  .nos-entry-orientation,
  .nos-entry-command {
    margin-top: 7px;
  }

  .nos-entry-command {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .nos-entry-panel {
    width: min(82vw, 292px);
  }

  .nos-entry-destination {
    font-size: 1.48rem;
    letter-spacing: 0.11em;
  }
}

/* Compact mobile playback status. The bottom drawer remains the primary player. */
#world-now-playing-indicator {
  display: none;
}

@media (max-width: 760px) {
  #world-now-playing-indicator:not([hidden]) {
    position: fixed;
    top: max(10px, var(--nos-safe-top));
    left: max(12px, var(--nos-safe-left));
    z-index: 89;
    display: flex;
    align-items: center;
    gap: 4px;
    width: auto;
    max-width: min(184px, calc(100vw - 88px));
    min-height: 44px;
    padding: 6px 0;
    color: rgba(229, 248, 255, 0.82);
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #world-now-playing-indicator:focus-visible {
    outline: 1px dotted color-mix(in srgb, var(--music-indicator-accent, #8adcf5) 56%, white);
    outline-offset: 3px;
  }

  .world-now-playing-indicator__art-shell {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    overflow: hidden;
    border: 0;
    border-radius: 1px;
    background: transparent;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--music-indicator-accent, #8adcf5) 38%, transparent));
  }

  .world-now-playing-indicator__art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .world-now-playing-indicator__copy {
    position: relative;
    isolation: isolate;
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .world-now-playing-indicator__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -3px -6px -3px -3px;
    background: linear-gradient(90deg, rgba(2, 1, 9, 0.18), rgba(2, 1, 9, 0.07) 72%, transparent);
    filter: blur(2px);
    pointer-events: none;
  }

  .world-now-playing-indicator__title {
    overflow: hidden;
    color: rgba(239, 251, 255, 0.94);
    font-size: 9px;
    letter-spacing: 1.8px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .world-now-playing-indicator__state {
    color: color-mix(in srgb, var(--music-indicator-accent, #8adcf5) 62%, white);
    font-size: 5px;
    letter-spacing: 2px;
    line-height: 1;
    opacity: 0.6;
  }

  .world-now-playing-indicator__state::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 5px 1px 0;
    border-radius: 50%;
    background: var(--music-indicator-accent, #8adcf5);
  }

  body.nos-identity-overlay-open #world-now-playing-indicator,
  body.nos-achievement-overlay-open #world-now-playing-indicator {
    opacity: 0.24;
    pointer-events: none;
  }
}

@media (max-height: 520px) and (max-width: 760px) {
  #world-now-playing-indicator:not([hidden]) {
    top: max(6px, var(--nos-safe-top));
    left: max(8px, var(--nos-safe-left));
  }
}