/* Shared finish only: each component keeps its layout, states and interactions. */
.halo-preview {
  --ui-glass-panel: rgb(19 35 33 / 46%);
  --ui-glass-soft: rgb(19 35 33 / 28%);
  --ui-glass-line: rgb(196 222 207 / 30%);
  --ui-glass-divider: rgb(196 222 207 / 15%);
  --ui-glass-highlight: rgb(232 244 226 / 11%);
  --ui-glass-shadow: 0 12px 34px rgb(5 17 15 / 15%), inset 0 1px var(--ui-glass-highlight);
  --ui-glass-blur: blur(7px) saturate(1.08);
  --ui-glass-scrim: rgb(5 14 13 / 16%);
  --ui-control-fill: rgb(7 22 21 / 20%);
  --ui-control-hover: rgb(155 201 178 / 14%);
  --ui-text: #e9ede0;
  --ui-text-muted: #c4d2c6;
  --ui-accent: #bbdcca;
}

/* A single sheet of glass; inner sections stay transparent. */
.halo-preview :is(
  .backpack-panel,
  .refuge-storage-panel,
  .navigation-panel,
  .general-menu-panel,
  .poi-panel,
  .caravan-access,
  .shield-exit-dialog,
  .last-transmission-dialog,
  .account-panel,
  .entry-screen .error-content
) {
  border-color: var(--ui-glass-line);
  border-radius: 6px;
  background: var(--ui-glass-panel);
  color: var(--ui-text);
  box-shadow: var(--ui-glass-shadow);
  backdrop-filter: var(--ui-glass-blur);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  text-shadow: 0 1px 3px rgb(4 17 15 / 75%);
}

.halo-preview .general-menu {
  --menu-line: var(--ui-glass-line);
  --menu-accent: var(--ui-accent);
}

.halo-preview :is(.shield-exit-dialog, .last-transmission-dialog)::backdrop {
  background: var(--ui-glass-scrim);
}
.halo-preview .navigation .navigation-overlay {
  background: var(--ui-glass-scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.halo-preview :is(
  .backpack-header, .backpack-detail, .backpack-note,
  .refuge-storage-header, .refuge-storage-views, .refuge-storage-column-head,
  .refuge-storage-column + .refuge-storage-column, .refuge-storage-note,
  .general-menu-header, .menu-teleport, .navigation-teleport,
  .shield-exit-header, .shield-exit-risks
) { border-color: var(--ui-glass-divider); }

/* Readable supporting copy over sand, dark scenery and moving silhouettes. */
.halo-preview :is(
  .menu-intro, .menu-eyebrow, .settings-note,
  .navigation-context, .navigation-help, .navigation-teleport-hint,
  .shield-exit-brand span, .shield-exit-connection,
  .shield-exit-status, .shield-exit-radius,
  .account-intro, .account-note
) { color: var(--ui-text-muted); }
.halo-preview .general-menu .menu-nav-button small { color: var(--ui-text-muted); }

/* No second opaque layer inside settings or the map's floating tools. */
.halo-preview .general-menu .view-switch {
  background: var(--ui-control-fill);
  border-color: var(--ui-glass-divider);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.halo-preview .general-menu .weather-button {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.halo-preview .general-menu .field select,
.halo-preview .account input,
.halo-preview .refuge-storage-input,
.halo-preview .last-transmission-thought {
  background: var(--ui-control-fill);
  border-color: var(--ui-glass-line);
  color: var(--ui-text);
}
.halo-preview .account input:focus {
  background: rgb(7 22 21 / 30%);
  border-color: var(--ui-accent);
}
.halo-preview .navigation .navigation-zoom {
  background: var(--ui-glass-panel);
  border-color: var(--ui-glass-line);
  backdrop-filter: var(--ui-glass-blur);
  -webkit-backdrop-filter: var(--ui-glass-blur);
}
.halo-preview .navigation .navigation-tool { background: transparent; }
.halo-preview .navigation .navigation-reset {
  background: var(--ui-glass-panel);
  border-color: var(--ui-glass-line);
  backdrop-filter: var(--ui-glass-blur);
  -webkit-backdrop-filter: var(--ui-glass-blur);
}

/* Compact HUD controls use the same tint without obscuring the landscape. */
.halo-preview .general-menu summary,
.halo-preview .navigation .navigation-trigger,
.halo-preview .backpack .backpack-trigger,
.halo-preview .photo-control,
.halo-preview .combat3d .combat3d-launch,
.halo-preview .last-transmission-reopen {
  background: var(--ui-glass-soft);
  border-color: var(--ui-glass-line);
  box-shadow: inset 0 1px var(--ui-glass-highlight);
  backdrop-filter: var(--ui-glass-blur);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  text-shadow: 0 1px 3px rgb(4 17 15 / 75%);
}
.halo-preview .general-menu details[open] summary {
  background: var(--ui-glass-panel);
  border-color: rgb(196 222 207 / 48%);
}

/* Combat retains its lighter journal and all action / portrait colours. */
.halo-preview .combat3d-hud {
  --combat-glass: rgb(19 35 33 / 40%);
  --combat-line: var(--ui-glass-line);
}
.halo-preview .combat3d :is(.combat3d-dock, .combat3d-result, .combat3d-leave) {
  backdrop-filter: var(--ui-glass-blur);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  box-shadow: var(--ui-glass-shadow);
}
.halo-preview .combat3d .combat3d-journal {
  background: rgb(19 35 33 / 14%);
  border-color: var(--ui-glass-divider);
  box-shadow: inset 0 1px rgb(232 244 226 / 5%);
}

.halo-preview :is(
  .backpack-panel, .refuge-storage-panel, .navigation-panel,
  .general-menu-panel, .poi-panel, .caravan-access,
  .shield-exit-dialog, .last-transmission-dialog, .account-panel
) :is(button, input, select, textarea, summary, a):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .halo-preview .general-menu summary:hover,
  .halo-preview .navigation .navigation-trigger:hover,
  .halo-preview .backpack .backpack-trigger:hover,
  .halo-preview .photo-control:hover,
  .halo-preview .combat3d .combat3d-launch:hover,
  .halo-preview .last-transmission-reopen:hover {
    background: rgb(35 58 50 / 46%);
    border-color: rgb(196 222 207 / 48%);
  }
  .halo-preview .navigation :is(.navigation-tool, .navigation-reset):hover {
    background: rgb(35 58 50 / 48%);
    border-color: rgb(196 222 207 / 48%);
  }
  .halo-preview :is(
    .backpack-close, .refuge-storage-close, .navigation-close,
    .last-transmission-close, .poi-close, .caravan-close
  ):hover { background: var(--ui-control-hover); }
}