/* Build 0006.4-P2 — shared Glyph Diorama language */

.scene-stage {
  position: relative;
  width: 100%;
  height: clamp(176px, 26svh, 258px);
  margin: 4px 0 12px;
  overflow: hidden;
  border: 1px solid rgba(83, 98, 87, .72);
  background:
    radial-gradient(circle at 66% 44%, rgba(168, 195, 169, .065), transparent 34%),
    radial-gradient(circle at 22% 62%, rgba(127, 157, 145, .04), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0));
  isolation: isolate;
}

.scene-stage--ship {
  height: clamp(158px, 22svh, 224px);
}

.scene-stage--berth {
  height: clamp(188px, 28svh, 286px);
}

.scene-stage--facility,
.scene-stage--location {
  height: clamp(182px, 27svh, 270px);
}

.scene-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%);
  white-space: pre;
  overflow: visible;
  font-family: inherit;
  font-size: clamp(9px, 2.3vw, 14px);
  line-height: 1.14;
  letter-spacing: 0;
  font-variant-ligatures: none;
  text-rendering: geometricPrecision;
  pointer-events: none;
}

.scene-stage--ship .scene-layer,
.scene-stage--berth .scene-layer {
  font-size: clamp(9.5px, 2.55vw, 15px);
}

.scene-layer--stars {
  z-index: 0;
  color: rgba(119, 129, 119, .44);
  animation: scene-star-breathe 7.8s ease-in-out infinite;
}

.scene-layer--dock,
.scene-layer--facility,
.scene-layer--services,
.scene-layer--recycler,
.scene-layer--archive {
  z-index: 1;
  color: #7f8a80;
  text-shadow: 0 0 9px rgba(127, 138, 128, .08);
}

.scene-layer--ship {
  z-index: 3;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(216, 223, 210, .12);
}

.scene-layer--service {
  z-index: 2;
  color: #809d91;
  opacity: .76;
}

.scene-layer--relay,
.scene-layer--graveyard,
.scene-layer--silent-wreck,
.scene-layer--ore,
.scene-layer--signal {
  z-index: 2;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(216, 223, 210, .1);
}

.scene-stage--location-silent-wreck .scene-layer--silent-wreck {
  font-size: clamp(10px, 2.65vw, 17px);
}

.scene-stage--location-graveyard .scene-layer--graveyard {
  color: #b9c1b7;
}

.scene-stage--location-ore .scene-layer--ore {
  color: #b4c0b4;
}

.scene-stage--quiet {
  background:
    radial-gradient(circle at 50% 48%, rgba(168, 195, 169, .055), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0));
}

.scene-world-mark {
  position: absolute;
  z-index: 5;
  color: var(--muted);
  font-size: clamp(.48rem, 2vw, .65rem);
  letter-spacing: .08em;
  pointer-events: none;
}

.scene-world-mark--ship {
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}

.scene-world-mark--berth {
  left: 16%;
  top: 21%;
}

.scene-world-mark--ship-docked {
  left: 74%;
  top: 44%;
  transform: translate(-50%, -50%);
}

.scene-ship-feature,
.scene-engine-glow,
.scene-connector,
.scene-service-light,
.scene-damage-spark,
.scene-facility-light,
.scene-archive-trace,
.scene-relay-pulse,
.scene-ore-fragment {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.scene-ship-feature {
  color: #9aac9d;
  font-size: .7rem;
}

.scene-ship-feature--module {
  left: 31%;
  top: 48%;
}

.scene-engine-glow {
  left: 59%;
  top: 70%;
  color: #9cb9ad;
  opacity: .42;
}

.scene-stage--morning .scene-layer--ship {
  animation: scene-ship-idle 5.8s ease-in-out infinite;
}

.scene-stage--morning .scene-engine-glow {
  animation: scene-engine-breathe 3.8s ease-in-out infinite;
}

.scene-service-light {
  color: #9cb9ad;
  font-size: .65rem;
  animation: scene-service-pulse 3.6s ease-in-out infinite;
}

.scene-service-light--a { left: 33%; top: 31%; }
.scene-service-light--b {
  left: 31%;
  top: 58%;
  animation-delay: -1.8s;
}

.scene-connector {
  left: 40%;
  top: 47%;
  color: #8fa99b;
  animation: scene-connector-breathe 3.2s ease-in-out infinite;
}

.scene-damage-spark {
  left: 62%;
  top: 48%;
  color: #b99779;
  font-size: .72rem;
  opacity: 0;
}

.scene-damage-spark--docked {
  left: 78%;
  top: 47%;
}

.scene-stage--hull-worn .scene-damage-spark {
  animation: scene-damage-spark 6.4s steps(1, end) infinite;
}

.scene-stage--hull-critical .scene-damage-spark {
  animation: scene-damage-spark-critical 4.8s steps(1, end) infinite;
}

.scene-stage--hull-critical .scene-layer--ship {
  color: #c8c4b6;
}

.scene-facility-light--recycler {
  left: 62%;
  top: 32%;
  color: #b4c6b5;
  animation: scene-facility-pulse 2.8s ease-in-out infinite;
}

.scene-facility-light--services {
  left: 50%;
  top: 34%;
  color: #9cb9ad;
  animation: scene-facility-pulse 3.4s ease-in-out infinite;
}

.scene-archive-trace--a { left: 39%; top: 42%; color: #b8aa86; }
.scene-archive-trace--b { left: 60%; top: 50%; color: #9eafa0; }

.scene-relay-pulse {
  left: 50%;
  top: 46%;
  color: #b7c7b6;
  opacity: 0;
}

.scene-relay-pulse--a { animation: scene-relay-pulse 3.2s ease-out infinite; }
.scene-relay-pulse--b { animation: scene-relay-pulse 3.2s ease-out -1.6s infinite; }

.scene-stage--location-relay .scene-layer--relay {
  transform-origin: 50% 50%;
  animation: scene-relay-tumble 12s ease-in-out infinite;
}

.scene-relay-tumble {
  left: 30%;
  top: 48%;
  color: #9aaca0;
  opacity: .5;
  animation: scene-relay-tumble-mark 5.6s ease-in-out infinite;
}

.scene-stage--location-stage-2 .scene-relay-pulse,
.scene-stage--location-stage-3 .scene-relay-pulse,
.scene-stage--location-stage-4 .scene-relay-pulse {
  color: #c0cfbd;
}

.scene-graveyard-drift,
.scene-graveyard-trace,
.scene-wreck-pressure,
.scene-wreck-hatch,
.scene-ore-claim,
.scene-signal-pulse {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.scene-graveyard-drift {
  color: #c0c5b6;
  opacity: .65;
  font-size: .8rem;
}

.scene-graveyard-drift--stage-0 { left: 35%; top: 57%; animation: scene-graveyard-tumble 8.5s ease-in-out infinite; }
.scene-graveyard-drift--stage-1 { left: 46%; top: 52%; animation: scene-graveyard-tumble 7.2s ease-in-out infinite; }
.scene-graveyard-drift--stage-2 { left: 57%; top: 47%; animation: scene-graveyard-route 6.2s linear infinite; }
.scene-graveyard-drift--stage-3 { left: 68%; top: 43%; animation: scene-graveyard-depart 5.4s cubic-bezier(.2,.7,.3,1) infinite; }
.scene-graveyard-drift--stage-4 { left: 76%; top: 50%; animation: scene-graveyard-corridor 7s ease-in-out infinite; }

.scene-graveyard-trace {
  left: 66%;
  top: 45%;
  color: #9db0a0;
  opacity: .35;
  animation: scene-graveyard-trace 4.8s ease-in-out infinite;
}

.scene-wreck-pressure {
  left: 55%;
  top: 48%;
  color: #a7baa9;
  opacity: 0;
}

.scene-stage--location-stage-2 .scene-wreck-pressure,
.scene-stage--location-stage-3 .scene-wreck-pressure,
.scene-stage--location-stage-4 .scene-wreck-pressure {
  animation: scene-wreck-pressure-pulse 4.6s ease-out infinite;
}

.scene-wreck-hatch {
  left: 74%;
  top: 50%;
  color: #c0b995;
  opacity: 0;
}

.scene-stage--location-stage-1 .scene-wreck-hatch { opacity: .32; }
.scene-stage--location-stage-2 .scene-wreck-hatch { opacity: .48; animation: scene-wreck-hatch-shiver 4s steps(1, end) infinite; }
.scene-stage--location-stage-3 .scene-wreck-hatch,
.scene-stage--location-stage-4 .scene-wreck-hatch { opacity: .85; animation: scene-wreck-hatch-open 4.8s ease-in-out infinite; }

.scene-ore-claim {
  left: 50%;
  top: 50%;
  color: #c4c59c;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.scene-stage--location-stage-2 .scene-ore-claim,
.scene-stage--location-stage-3 .scene-ore-claim,
.scene-stage--location-stage-4 .scene-ore-claim {
  opacity: .7;
  animation: scene-ore-claim-breathe 3.8s ease-in-out infinite;
}

.scene-stage--location-stage-3 .scene-ore-claim,
.scene-stage--location-stage-4 .scene-ore-claim {
  color: #d0c79d;
}

.scene-signal-pulse {
  left: 50%;
  top: 48%;
  color: #bac9b9;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.scene-stage--location-stage-0 .scene-signal-pulse,
.scene-stage--location-stage-1 .scene-signal-pulse {
  animation: scene-signal-pulse 4.8s ease-out infinite;
}

.scene-stage--location-stage-2 .scene-signal-pulse,
.scene-stage--location-stage-3 .scene-signal-pulse,
.scene-stage--location-stage-4 .scene-signal-pulse {
  animation: scene-signal-pulse 3.1s ease-out infinite;
}

.scene-signal-pulse--b { animation-delay: -1.55s !important; }
.scene-stage--location-stage-4 .scene-signal-pulse--a { left: 36%; top: 35%; }
.scene-stage--location-stage-4 .scene-signal-pulse--b { left: 66%; top: 35%; }

.scene-ore-fragment { left: 50%; top: 50%; opacity: .75; }
.scene-ore-fragment--slow { color: #a4b1a4; animation: scene-ore-drift-slow 9s linear infinite; }
.scene-ore-fragment--mid { color: #c1c9b7; animation: scene-ore-drift-mid 5.2s linear -1.8s infinite; }
.scene-ore-fragment--fast { color: #d0c29a; animation: scene-ore-drift-fast 2.8s linear -1s infinite; }

.scene-transition--depart .scene-layer--ship {
  animation: scene-ship-depart 1.04s cubic-bezier(.2,.7,.25,1) both;
}

.scene-transition--depart .scene-layer--service,
.scene-transition--depart .scene-service-light,
.scene-transition--depart .scene-connector {
  animation: scene-service-release .48s ease-out both;
}

.scene-transition--depart .scene-layer--dock {
  animation: scene-dock-dim 1.04s ease-in both;
}

.scene-flight-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 54% 48%, rgba(168,195,169,.07), transparent 34%),
    rgba(5, 7, 5, .96);
  isolation: isolate;
}

.scene-flight-overlay__dock,
.scene-flight-overlay__ship {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: max-content;
  white-space: pre;
  font-family: inherit;
  line-height: 1.14;
  font-size: clamp(10px, 2.6vw, 16px);
  pointer-events: none;
}

.scene-flight-overlay__dock {
  color: #7f8a80;
  transform: translate(-62%, -50%);
}

.scene-flight-overlay__ship {
  z-index: 2;
  color: var(--accent);
  transform: translate(-34%, -50%);
  animation: scene-ship-arrive .98s cubic-bezier(.18,.78,.22,1) both;
}

.scene-flight-overlay__status {
  position: absolute;
  left: 50%;
  top: 67%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: .66rem;
  letter-spacing: .1em;
}

@keyframes scene-star-breathe {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%); }
  50% { opacity: .9; transform: translate(-50.2%, -50%); }
}

@keyframes scene-ship-idle {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  50% { transform: translate(-50%, -50%) translate(1px, -1px); }
}

@keyframes scene-engine-breathe {
  0%, 100% { opacity: .28; }
  50% { opacity: .9; }
}

@keyframes scene-service-pulse {
  0%, 68%, 100% { opacity: .32; }
  76%, 88% { opacity: .92; }
}

@keyframes scene-connector-breathe {
  0%, 100% { opacity: .24; }
  50% { opacity: .9; }
}

@keyframes scene-facility-pulse {
  0%, 62%, 100% { opacity: .25; }
  72%, 86% { opacity: .92; }
}

@keyframes scene-damage-spark {
  0%, 78%, 100% { opacity: 0; transform: translate(0, 0); }
  81% { opacity: .85; transform: translate(0, 0); }
  84% { opacity: .15; transform: translate(2px, 2px); }
}

@keyframes scene-damage-spark-critical {
  0%, 60%, 100% { opacity: 0; transform: translate(0, 0); }
  64% { opacity: 1; transform: translate(0, 0); }
  69% { opacity: .25; transform: translate(3px, 2px); }
  74% { opacity: .7; transform: translate(1px, 4px); }
  78% { opacity: 0; transform: translate(4px, 5px); }
}

@keyframes scene-relay-pulse {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.55); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}

@keyframes scene-relay-tumble {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
  50% { transform: translate(-50%, -50%) rotate(2.5deg); }
}

@keyframes scene-relay-tumble-mark {
  0%, 100% { opacity: .25; transform: translate(0, 0); }
  50% { opacity: .7; transform: translate(-2px, 2px); }
}

@keyframes scene-graveyard-tumble {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50% { transform: translate(8px, -3px) rotate(3deg); }
}

@keyframes scene-graveyard-route {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(18px, -2px); }
}

@keyframes scene-graveyard-depart {
  0%, 100% { transform: translate(0, 0); opacity: .25; }
  45% { opacity: .8; }
  100% { transform: translate(34px, -7px); opacity: .1; }
}

@keyframes scene-graveyard-corridor {
  0%, 100% { transform: translate(0, 0); opacity: .4; }
  50% { transform: translate(-10px, 2px); opacity: .8; }
}

@keyframes scene-graveyard-trace {
  0%, 100% { opacity: .15; transform: translateX(0); }
  50% { opacity: .7; transform: translateX(14px); }
}

@keyframes scene-wreck-pressure-pulse {
  0% { opacity: .75; transform: translate(-50%, -50%) scale(.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.3); }
}

@keyframes scene-wreck-hatch-shiver {
  0%, 72%, 100% { transform: translate(0, 0); }
  74% { transform: translate(2px, 0); }
  76% { transform: translate(-1px, 1px); }
}

@keyframes scene-wreck-hatch-open {
  0%, 100% { opacity: .45; transform: translate(0, 0); }
  50% { opacity: 1; transform: translate(4px, -1px); }
}

@keyframes scene-ore-claim-breathe {
  0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(.85); }
  50% { opacity: .85; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes scene-signal-pulse {
  0% { opacity: .82; transform: translate(-50%, -50%) scale(.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.5); }
}

@keyframes scene-ore-drift-slow {
  0% { transform: translate(-70px, -15px); }
  100% { transform: translate(78px, 15px); }
}

@keyframes scene-ore-drift-mid {
  0% { transform: translate(76px, 22px); }
  100% { transform: translate(-82px, -16px); }
}

@keyframes scene-ore-drift-fast {
  0% { transform: translate(-86px, 30px); }
  100% { transform: translate(92px, -27px); }
}

@keyframes scene-ship-depart {
  0% { opacity: 1; transform: translate(-50%, -50%) translateX(0) scale(1); }
  28% { opacity: 1; transform: translate(-50%, -50%) translateX(12px) scale(1.03); }
  74% { opacity: 1; transform: translate(-50%, -50%) translateX(34vw) scale(.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateX(55vw) scale(.64); }
}

@keyframes scene-service-release {
  0% { opacity: .8; }
  100% { opacity: 0; transform: translateX(-8px); }
}

@keyframes scene-dock-dim {
  0% { opacity: 1; }
  100% { opacity: .18; }
}

@keyframes scene-ship-arrive {
  0% { opacity: 0; transform: translate(38vw, -50%) scale(.72); }
  36% { opacity: 1; }
  100% { opacity: 1; transform: translate(-34%, -50%) scale(1); }
}

/* Browser-only review aid for Work/Codex. Example: ?visualtest=labelblind */
html[data-visual-test="labelblind"] .scene-world-mark,
html[data-visual-test="labelblind"] .scene-stage__caption,
html[data-visual-test="labelblind"] .scene-flight-overlay__status,
html[data-visual-test="labelblind"] .section-title,
html[data-visual-test="labelblind"] .screen-body > .prose {
  visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  .scene-layer--stars,
  .scene-stage--morning .scene-layer--ship,
  .scene-stage--morning .scene-engine-glow,
  .scene-service-light,
  .scene-connector,
  .scene-facility-light,
  .scene-relay-pulse,
  .scene-relay-tumble,
  .scene-graveyard-drift,
  .scene-graveyard-trace,
  .scene-wreck-pressure,
  .scene-wreck-hatch,
  .scene-ore-claim,
  .scene-signal-pulse,
  .scene-ore-fragment,
  .scene-damage-spark {
    animation: none !important;
  }
  .scene-stage--location-stage-2 .scene-wreck-pressure,
  .scene-stage--location-stage-3 .scene-wreck-pressure,
  .scene-stage--location-stage-4 .scene-wreck-pressure {
    opacity: .35;
  }
  .scene-stage--location-stage-2 .scene-ore-claim,
  .scene-stage--location-stage-3 .scene-ore-claim,
  .scene-stage--location-stage-4 .scene-ore-claim {
    opacity: .55;
  }
  .scene-stage--hull-worn .scene-damage-spark,
  .scene-stage--hull-critical .scene-damage-spark {
    opacity: .35;
  }
}

@media (max-width: 430px) {
  .scene-stage { height: clamp(168px, 25svh, 220px); margin-bottom: 10px; }
  .scene-stage--ship { height: clamp(148px, 20svh, 190px); }
  .scene-stage--berth { height: clamp(178px, 26svh, 224px); }
  .scene-stage--facility,
  .scene-stage--location { height: clamp(168px, 24svh, 214px); }
  .scene-layer,
  .scene-stage--ship .scene-layer,
  .scene-stage--berth .scene-layer { font-size: clamp(8px, 2.25vw, 10.5px); }
  .scene-stage--location-silent-wreck .scene-layer--silent-wreck { font-size: clamp(8.5px, 2.4vw, 11px); }
}

@media (max-height: 680px) {
  .scene-stage { height: clamp(142px, 23svh, 176px); margin-bottom: 7px; }
  .scene-stage--ship { height: clamp(128px, 19svh, 154px); }
  .scene-stage--berth,
  .scene-stage--facility,
  .scene-stage--location { height: clamp(148px, 22svh, 182px); }
  .scene-layer,
  .scene-stage--ship .scene-layer,
  .scene-stage--berth .scene-layer { font-size: 8.5px; }
}

@media (min-width: 600px) and (min-height: 700px) {
  .scene-stage { height: clamp(220px, 29svh, 330px); }
  .scene-stage--ship { height: clamp(190px, 24svh, 275px); }
  .scene-stage--berth { height: clamp(230px, 31svh, 350px); }
  .scene-layer,
  .scene-stage--ship .scene-layer,
  .scene-stage--berth .scene-layer { font-size: clamp(13px, 1.75vw, 17px); }
  .scene-stage--location-silent-wreck .scene-layer--silent-wreck { font-size: clamp(14px, 1.95vw, 19px); }
}

/*
 * Motion-rich salvage locations.
 *
 * This is the recovered visual behavior from the earlier Glyph Diorama
 * branch: the scene remains made of glyphs, but its meaningful pieces move
 * independently. The persistent stage drawing is retained as a hidden
 * semantic fallback; the visible composition is the layered scene below.
 */
.scene-stage--motion-rich {
  height: clamp(190px, 28svh, 300px);
  background:
    radial-gradient(circle at 50% 48%, rgba(168, 195, 169, .09), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 52%),
    #080c09;
}

.scene-stage--motion-rich .scene-layer--location-state {
  display: block;
  z-index: 3;
  color: var(--accent);
  opacity: .92;
  text-shadow: 0 0 10px rgba(216, 223, 210, .12);
}

/*
 * Continuous motion belongs to the visible subject, not only to tiny effect
 * marks. Each location keeps its current stage silhouette while giving that
 * silhouette a distinct, readable physical behavior.
 */
.scene-stage--motion-relay .scene-layer--location-state {
  transform-origin: 50% 55%;
  animation: motion-relay-subject-sway 8.4s ease-in-out infinite;
}

.scene-stage--motion-graveyard .scene-layer--location-state {
  animation: motion-graveyard-field-drift 15s ease-in-out infinite;
}

.scene-stage--motion-wreck .scene-layer--location-state {
  transform-origin: 50% 50%;
  animation: motion-wreck-hull-drift 13s ease-in-out infinite;
}

.scene-stage--motion-ore .scene-layer--location-state {
  transform-origin: 50% 50%;
  animation: motion-ore-field-tumble 11.5s ease-in-out infinite;
}

.scene-stage--motion-signal .scene-layer--location-state {
  transform-origin: 50% 50%;
  animation: motion-signal-field-breathe 5.6s ease-in-out infinite;
}

.scene-stage--motion-rich .scene-layer--motion-stars,
.scene-stage--motion-rich .scene-layer--motion-graveyard-stars {
  left: 8%;
  top: 12%;
  width: 84%;
  transform: none;
  color: #5e6a61;
  font-size: clamp(.66rem, 2.2vw, .85rem);
  line-height: 1.35;
  opacity: .7;
  z-index: 1;
  animation: motion-scene-star-drift 13s ease-in-out infinite;
}

.scene-stage--motion-rich .scene-layer--motion-graveyard-stars {
  top: 13%;
}

.scene-stage--motion-rich .scene-layer--motion-ore-haze {
  z-index: 2;
  color: #5e6a61;
  font-size: clamp(.66rem, 2.25vw, .86rem);
  line-height: 1.42;
}

.scene-stage--motion-rich .scene-layer--motion-relay-aura,
.scene-stage--motion-rich .scene-layer--motion-signal-atmosphere {
  z-index: 3;
  color: #87958a;
  font-size: clamp(.68rem, 2.4vw, .92rem);
  line-height: 1.25;
}

.scene-stage--motion-rich .scene-layer--motion-ore-haze {
  z-index: 2;
  color: #7e8d82;
  opacity: .72;
}

.scene-stage--motion-rich .scene-layer--motion-wreck-rib {
  z-index: 2;
  color: #68766d;
  opacity: .75;
  font-size: clamp(.72rem, 2.5vw, .96rem);
  animation: motion-wreck-rib-sway 11s ease-in-out infinite;
}

.motion-ore-fragment {
  position: absolute;
  z-index: 5;
  display: block;
  color: #c3b08b;
  font-size: clamp(1rem, 3.8vw, 1.55rem);
  line-height: 1;
  pointer-events: none;
}

.motion-ore-fragment--a { left: 13%; top: 28%; animation: motion-ore-orbit-a 5.2s ease-in-out infinite; }
.motion-ore-fragment--b { left: 78%; top: 31%; color: #87958a; animation: motion-ore-orbit-b 7.6s linear infinite; }
.motion-ore-fragment--c { left: 24%; top: 72%; color: #9dbbb4; animation: motion-ore-orbit-c 10.5s ease-in-out infinite reverse; }
.motion-ore-fragment--d { left: 73%; top: 73%; color: #5e6a61; animation: motion-ore-orbit-d 3.8s ease-in-out infinite; }
.motion-ore-fragment--e { left: 43%; top: 15%; color: #87958a; animation: motion-ore-orbit-e 6.2s linear infinite reverse; }

.motion-ore-trail {
  position: absolute;
  z-index: 4;
  left: 21%;
  top: 61%;
  color: #9dbbb4;
  opacity: .4;
  letter-spacing: .18em;
  pointer-events: none;
  animation: motion-ore-trail-drift 6.8s ease-in-out infinite;
}

.motion-ore-claim-marker {
  position: absolute;
  z-index: 6;
  left: 48%;
  top: 24%;
  color: #c3b08b;
  pointer-events: none;
  animation: motion-light-pulse 2.4s ease-in-out infinite;
}

.motion-relay-antenna-tip,
.motion-relay-sway {
  position: absolute;
  z-index: 5;
  left: 49%;
  color: #9dbbb4;
  pointer-events: none;
}

.motion-relay-antenna-tip {
  top: 16%;
  animation: motion-relay-tip-pulse 2.8s ease-in-out infinite;
}

.motion-relay-sway {
  top: 23%;
  animation: motion-relay-antenna-sway 6.5s ease-in-out infinite;
}

.motion-relay-pulse {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 38%;
  color: #9dbbb4;
  white-space: pre;
  transform: translateX(-50%);
  opacity: 0;
  font-size: clamp(.9rem, 3.2vw, 1.3rem);
  letter-spacing: .08em;
  pointer-events: none;
}

.motion-relay-pulse--one { animation: motion-relay-pulse-one 3s ease-out infinite; }
.motion-relay-pulse--two { animation: motion-relay-pulse-two 3s ease-out 1.1s infinite; }

.motion-relay-carrier {
  position: absolute;
  z-index: 6;
  right: 8%;
  top: 38%;
  color: #9dbbb4;
  pointer-events: none;
  animation: motion-relay-carrier 4.4s ease-in-out infinite;
}

.motion-graveyard-wreck {
  z-index: 4;
  color: #87958a;
  font-size: clamp(.72rem, 2.65vw, 1.02rem);
  line-height: 1.04;
  pointer-events: none;
}

.motion-graveyard-wreck--a {
  left: 5%;
  top: 25%;
  margin: 0;
  transform: none;
  animation: motion-grave-drift-a 9.5s ease-in-out infinite;
}

.motion-graveyard-wreck--b {
  left: 39%;
  top: 45%;
  margin: 0;
  transform: none;
  color: #c3b08b;
  animation: motion-grave-drift-b 13s ease-in-out infinite reverse;
}

.motion-graveyard-wreck--c {
  left: auto;
  right: 5%;
  top: 22%;
  margin: 0;
  transform: none;
  color: #9dbbb4;
  animation: motion-grave-drift-c 17s ease-in-out infinite;
}

.motion-graveyard-route,
.motion-graveyard-dust {
  position: absolute;
  pointer-events: none;
}

.motion-graveyard-route {
  z-index: 6;
  left: 39%;
  top: 39%;
  color: #c3b08b;
  animation: motion-route-flicker 3.2s ease-in-out infinite;
}

.motion-graveyard-dust {
  z-index: 3;
  left: 22%;
  bottom: 20%;
  color: #5e6a61;
  animation: motion-dust-drift 8s linear infinite;
}

.motion-wreck-vent {
  position: absolute;
  z-index: 7;
  color: #bb8984;
  opacity: 0;
  pointer-events: none;
}

.motion-wreck-vent--a { left: 23%; top: 45%; animation: motion-wreck-vent-a 4.2s ease-out infinite; }
.motion-wreck-vent--b { left: 31%; top: 55%; animation: motion-wreck-vent-b 5.4s ease-out 1.2s infinite; }

.motion-wreck-wake {
  position: absolute;
  z-index: 7;
  right: 7%;
  bottom: 27%;
  color: #9dbbb4;
  pointer-events: none;
  animation: motion-wreck-wake-pulse 4.8s ease-in-out infinite;
}

.motion-wreck-scout {
  position: absolute;
  z-index: 7;
  left: auto;
  top: auto;
  right: 8%;
  bottom: 14%;
  margin: 0;
  transform: none;
  color: #9dbbb4;
  font-size: clamp(.66rem, 2.4vw, .92rem);
  line-height: 1.02;
  pointer-events: none;
  animation: motion-wreck-scout-drift 7.6s ease-in-out infinite;
}

.scene-stage--motion-signal {
  background:
    radial-gradient(circle at 50% 48%, rgba(176, 167, 191, .13), transparent 37%),
    #09080d;
}

.motion-signal-core {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 42%;
  color: #b0a7bf;
  font-size: clamp(.9rem, 3.5vw, 1.3rem);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: motion-signal-core-pulse 2.6s ease-in-out infinite;
}

.motion-signal-ring {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 42%;
  color: #b0a7bf;
  white-space: pre;
  transform: translate(-50%, -50%);
  opacity: 0;
  font-size: clamp(1rem, 3.6vw, 1.45rem);
  letter-spacing: .1em;
  pointer-events: none;
}

.motion-signal-ring--one { animation: motion-signal-ring-one 3.8s ease-out infinite; }
.motion-signal-ring--two { animation: motion-signal-ring-two 3.8s ease-out 1.4s infinite; }

.motion-signal-vector {
  position: absolute;
  z-index: 6;
  left: 45%;
  top: 60%;
  color: #b0a7bf;
  pointer-events: none;
  animation: motion-signal-vector-shift 4.2s ease-in-out infinite;
}

@keyframes motion-scene-star-drift {
  0%, 100% { transform: translateX(0); opacity: .58; }
  50% { transform: translateX(5px); opacity: .78; }
}

@keyframes motion-relay-subject-sway {
  0%, 100% { transform: translate(-50%, -50%) translateX(-7px) rotate(-4deg); }
  50% { transform: translate(-50%, -50%) translateX(9px) rotate(5deg); }
}

@keyframes motion-graveyard-field-drift {
  0%, 100% { transform: translate(-50%, -50%) translate(-9px, 3px) rotate(-1.2deg); }
  50% { transform: translate(-50%, -50%) translate(12px, -5px) rotate(1.4deg); }
}

@keyframes motion-wreck-hull-drift {
  0%, 100% { transform: translate(-50%, -50%) translateX(-5px) rotate(-.7deg); }
  50% { transform: translate(-50%, -50%) translateX(6px) rotate(.8deg); }
}

@keyframes motion-ore-field-tumble {
  0%, 100% { transform: translate(-50%, -50%) rotate(-5deg) scale(.97); }
  50% { transform: translate(-50%, -50%) rotate(6deg) scale(1.03); }
}

@keyframes motion-signal-field-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(.94) rotate(-1deg); opacity: .68; }
  50% { transform: translate(-50%, -50%) scale(1.07) rotate(1.2deg); opacity: 1; }
}

@keyframes motion-light-pulse {
  0%, 100% { opacity: .35; }
  45%, 55% { opacity: 1; }
}

@keyframes motion-ore-orbit-a {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(38px, -25px) rotate(32deg); }
  50% { transform: translate(70px, 7px) rotate(96deg); }
  75% { transform: translate(24px, 35px) rotate(164deg); }
}

@keyframes motion-ore-orbit-b {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-78px, 22px) rotate(-74deg); }
  100% { transform: translate(0, 0); }
}

@keyframes motion-ore-orbit-c {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(58px, -42px) rotate(-88deg); }
}

@keyframes motion-ore-orbit-d {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-42px, -21px) rotate(68deg); }
}

@keyframes motion-ore-orbit-e {
  0% { transform: translate(0, 0); }
  50% { transform: translate(34px, 46px) rotate(112deg); }
  100% { transform: translate(0, 0); }
}

@keyframes motion-ore-trail-drift {
  0%, 100% { transform: translateX(-8px); opacity: .22; }
  50% { transform: translateX(18px); opacity: .72; }
}

@keyframes motion-relay-tip-pulse {
  0%, 100% { transform: rotate(-2deg); opacity: .62; }
  50% { transform: rotate(2deg); opacity: 1; }
}

@keyframes motion-relay-antenna-sway {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  50% { transform: translateX(2px) rotate(2deg); }
}

@keyframes motion-relay-pulse-one {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  28% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes motion-relay-pulse-two {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  25% { opacity: .6; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

@keyframes motion-relay-carrier {
  0%, 100% { transform: translateX(-8px); opacity: .3; }
  50% { transform: translateX(7px); opacity: .95; }
}

@keyframes motion-grave-drift-a {
  0%, 100% { transform: translate(-8px, 5px) rotate(-4deg); }
  50% { transform: translate(34px, -14px) rotate(5deg); }
}

@keyframes motion-grave-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-42px, 18px) rotate(-6deg); }
}

@keyframes motion-grave-drift-c {
  0%, 100% { transform: translate(7px, -5px) rotate(4deg); }
  50% { transform: translate(-31px, 20px) rotate(-5deg); }
}

@keyframes motion-route-flicker {
  0%, 100% { opacity: .36; }
  50% { opacity: 1; }
}

@keyframes motion-dust-drift {
  from { transform: translateX(-12px); opacity: .25; }
  50% { opacity: .75; }
  to { transform: translateX(28px); opacity: .18; }
}

@keyframes motion-wreck-vent-a {
  0% { opacity: 0; transform: translate(0, 0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-22px, -12px); }
}

@keyframes motion-wreck-vent-b {
  0% { opacity: 0; transform: translate(0, 0); }
  16% { opacity: .8; }
  100% { opacity: 0; transform: translate(18px, -8px); }
}

@keyframes motion-wreck-wake-pulse {
  0%, 100% { opacity: .35; transform: translateX(-4px); }
  50% { opacity: 1; transform: translateX(6px); }
}

@keyframes motion-wreck-rib-sway {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); opacity: .42; }
  50% { transform: translate(-50%, -50%) rotate(3deg); opacity: .82; }
}

@keyframes motion-wreck-scout-drift {
  0%, 100% { transform: translate(12px, 7px) rotate(-4deg); opacity: .5; }
  50% { transform: translate(-38px, -18px) rotate(5deg); opacity: 1; }
}

@keyframes motion-signal-core-pulse {
  0%, 100% { opacity: .48; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes motion-signal-ring-one {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  20% { opacity: .84; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.25); }
}

@keyframes motion-signal-ring-two {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  20% { opacity: .56; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.75); }
}

@keyframes motion-signal-vector-shift {
  0%, 100% { transform: translateX(-7px); opacity: .42; }
  50% { transform: translateX(9px); opacity: 1; }
}

@media (min-width: 600px) and (min-height: 700px) {
  .scene-stage--motion-rich { height: clamp(240px, 29svh, 340px); }
  .scene-stage--motion-rich .scene-layer--motion-relay-aura,
  .scene-stage--motion-rich .scene-layer--motion-signal-atmosphere { font-size: 1rem; }
  .scene-stage--motion-rich .motion-graveyard-wreck { font-size: 1.02rem; }
  .scene-stage--motion-rich .scene-layer--motion-wreck-rib { font-size: .96rem; }
}

@media (max-width: 430px) {
  .scene-stage--motion-rich { height: clamp(184px, 26svh, 240px); }
  .scene-stage--motion-rich .scene-layer--motion-relay-aura,
  .scene-stage--motion-rich .scene-layer--motion-signal-atmosphere { font-size: .56rem; }
  .scene-stage--motion-rich .motion-graveyard-wreck { font-size: .62rem; }
  .scene-stage--motion-rich .scene-layer--motion-wreck-rib { font-size: .56rem; }
}

@media (max-height: 680px) {
  .scene-stage--motion-rich { height: clamp(160px, 24svh, 204px); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-stage--motion-relay .scene-layer--location-state,
  .scene-stage--motion-graveyard .scene-layer--location-state,
  .scene-stage--motion-wreck .scene-layer--location-state,
  .scene-stage--motion-ore .scene-layer--location-state,
  .scene-stage--motion-signal .scene-layer--location-state,
  .scene-stage--motion-rich .scene-layer--motion-stars,
  .scene-stage--motion-rich .scene-layer--motion-graveyard-stars,
  .motion-ore-fragment,
  .motion-ore-trail,
  .motion-ore-claim-marker,
  .motion-relay-antenna-tip,
  .motion-relay-sway,
  .motion-relay-pulse,
  .motion-relay-carrier,
  .motion-graveyard-wreck,
  .motion-graveyard-route,
  .motion-graveyard-dust,
  .motion-wreck-vent,
  .motion-wreck-wake,
  .motion-wreck-rib,
  .motion-wreck-scout,
  .motion-signal-core,
  .motion-signal-ring,
  .motion-signal-vector {
    animation: none !important;
  }
  .motion-relay-pulse,
  .motion-signal-ring { opacity: .45; }
  .motion-wreck-vent { opacity: .55; }
}

/* Glyph Diorama 2.0 — Frontier Lives / physical memories */
:root {
  --glyph-mat-hull: #7a9cb5;
  --glyph-mat-viewport: #4ecdc4;
  --glyph-mat-weld: #d97736;
  --glyph-mat-thermal: #b64b3f;
  --glyph-mat-anomaly: #d9bf63;
}

.scene-stage--elder,
.scene-stage--mara,
.scene-stage--tekk,
.scene-stage--rusk,
.scene-stage--home,
.scene-stage--artifact {
  background:
    radial-gradient(circle at 50% 54%, rgba(122, 156, 181, .06), transparent 43%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent);
}

.scene-layer--elder,
.scene-layer--mara,
.scene-layer--tekk,
.scene-layer--rusk,
.scene-layer--home {
  z-index: 2;
  color: var(--glyph-mat-hull);
  font-size: clamp(10px, 2.55vw, 16px);
  line-height: 1.18;
  text-shadow: 0 0 10px rgba(122, 156, 181, .12);
}

.scene-stage--elder-warm .scene-layer--elder {
  color: #9d887b;
  text-shadow: 0 0 13px rgba(182, 75, 63, .12);
}

.scene-stage--elder-empty .scene-layer--elder {
  color: #637177;
}

.scene-elder-steam,
.scene-elder-memory,
.scene-elder-cold-cup,
.scene-mara-spark,
.scene-tekk-resonance,
.scene-rusk-crt,
.scene-home-dust,
.scene-home-weld,
.scene-home-order,
.scene-artifact-seal-glint,
.scene-artifact-resonance,
.scene-artifact-bad-sector {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  font-family: inherit;
  white-space: pre;
}

.scene-elder-steam {
  left: 30%;
  top: 26%;
  color: rgba(210, 197, 178, .72);
  animation: frontier-steam 4.2s ease-in-out infinite;
}

.scene-elder-memory {
  left: 50%;
  top: 15%;
  width: 72%;
  transform: translateX(-50%);
  text-align: center;
  opacity: .72;
}

.scene-elder-memory--milea {
  color: #6f94c5;
  animation: frontier-blue-lamps 5.6s ease-in-out infinite;
}

.scene-elder-memory--calon {
  color: #7c98aa;
  letter-spacing: .9rem;
  animation: frontier-rain 2.8s linear infinite;
}

.scene-elder-memory--sarsa {
  top: 76%;
  color: #ad9c78;
  animation: frontier-salt-tide 7s ease-in-out infinite;
}

.scene-elder-memory--lom {
  color: #6c9d8f;
  font-size: .66rem;
  animation: frontier-board-scroll 8s steps(4,end) infinite;
}

.scene-elder-cold-cup {
  left: 49%;
  top: 53%;
  color: #738188;
  opacity: .44;
}

.scene-mara-spark {
  color: var(--glyph-mat-weld);
  text-shadow: 0 0 8px rgba(217, 119, 54, .72);
  opacity: 0;
}

.scene-mara-spark--a { left: 65%; top: 63%; animation: frontier-weld-spark 5.2s steps(1,end) infinite; }
.scene-mara-spark--b { left: 69%; top: 57%; animation: frontier-weld-spark 5.2s steps(1,end) .12s infinite; }

.scene-tekk-resonance {
  left: 50%;
  top: 43%;
  color: var(--glyph-mat-viewport);
  transform: translateX(-50%);
  opacity: .62;
  animation: frontier-resonance .68s ease-in-out infinite alternate;
}

.scene-rusk-crt {
  left: 58%;
  top: 38%;
  color: #6f9d82;
  text-shadow: 0 0 8px rgba(78,205,196,.18);
  animation: frontier-crt 4.8s steps(1,end) infinite;
}

.scene-home-dust { left: 36%; top: 60%; color: #a99677; animation: frontier-dust 5.4s linear infinite; }
.scene-home-weld { left: 70%; top: 60%; color: var(--glyph-mat-weld); text-shadow: 0 0 9px rgba(217,119,54,.55); animation: frontier-weld-breathe 3.4s ease-in-out infinite; }
.scene-home-order { left: 75%; top: 44%; color: var(--glyph-mat-viewport); opacity: .6; }

.scene-stage--home-stage-0 .scene-layer--home { color: #70776f; }
.scene-stage--home-stage-1 .scene-layer--home { color: #82939a; }
.scene-stage--home-stage-2 .scene-layer--home { color: var(--glyph-mat-hull); }
.scene-stage--home-stage-3 .scene-layer--home { color: #9cb1ad; }

.scene-layer--artifact-grid {
  z-index: 1;
  color: rgba(122,156,181,.32);
  font-size: clamp(13px, 3.2vw, 22px);
}

.scene-layer--artifact {
  z-index: 3;
  color: var(--accent);
  font-size: clamp(14px, 3.6vw, 24px);
  line-height: 1.12;
  text-shadow: 0 0 12px rgba(216,223,210,.14);
}

.scene-stage--artifact-blue-birth-glass .scene-layer--artifact { color: #719ed1; text-shadow: 0 0 14px rgba(90,137,195,.32); }
.scene-stage--artifact-maintenance-calibration-tab .scene-layer--artifact { color: #bccbd2; }
.scene-stage--artifact-neral-resonance-tag .scene-layer--artifact { color: #79aaa0; }
.scene-stage--artifact-scavenger-log-slate .scene-layer--artifact { color: #80927f; }
.scene-stage--artifact-worn-beacon-seal .scene-layer--artifact { color: #b8aa78; }

.scene-artifact-seal-glint {
  left: 50%;
  top: 45%;
  color: var(--glyph-mat-anomaly);
  opacity: .18;
  transform: translate(-50%,-50%);
  animation: frontier-seal-thirteen 13s steps(1,end) infinite;
}

.scene-artifact-resonance {
  left: 50%;
  top: 55%;
  color: var(--glyph-mat-viewport);
  animation: frontier-resonance .72s ease-in-out infinite alternate;
}

.scene-artifact-bad-sector {
  left: 57%;
  top: 56%;
  color: #9aa48c;
  font-size: .62rem;
  animation: frontier-bad-sector 3.8s steps(1,end) infinite;
}

@keyframes frontier-steam {
  0%,100% { opacity: .16; transform: translateY(5px); }
  50% { opacity: .7; transform: translateY(-5px); }
}
@keyframes frontier-blue-lamps { 0%,100% { opacity: .3; } 45% { opacity: .82; } 70% { opacity: .48; } }
@keyframes frontier-rain { from { transform: translate(-50%,-7px); } to { transform: translate(-46%,11px); } }
@keyframes frontier-salt-tide { 0%,100% { transform: translateX(-51%) scaleX(.92); } 50% { transform: translateX(-49%) scaleX(1.08); } }
@keyframes frontier-board-scroll { 0%,100% { transform: translateX(-52%); opacity: .36; } 50% { transform: translateX(-48%); opacity: .8; } }
@keyframes frontier-weld-spark { 0%,86%,100% { opacity: 0; transform: translate(0,0); } 88% { opacity: 1; } 91% { opacity: .55; transform: translate(5px,-8px); } }
@keyframes frontier-resonance { from { transform: translateX(calc(-50% - 1px)); } to { transform: translateX(calc(-50% + 1px)); } }
@keyframes frontier-crt { 0%,88%,92%,100% { opacity: .72; } 89%,91% { opacity: .22; } }
@keyframes frontier-dust { from { transform: translate(-5px,4px); opacity: .18; } 50% { opacity: .66; } to { transform: translate(22px,-8px); opacity: 0; } }
@keyframes frontier-weld-breathe { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes frontier-seal-thirteen { 0%,92%,100% { opacity: .16; filter: none; } 94%,97% { opacity: .9; filter: drop-shadow(0 0 7px rgba(217,191,99,.72)); } 95% { opacity: .34; } }
@keyframes frontier-bad-sector { 0%,62%,100% { opacity: .28; } 64%,72% { opacity: .82; } 74% { opacity: 0; } }

@media (max-width: 430px) {
  .scene-stage--elder,
  .scene-stage--mara,
  .scene-stage--tekk,
  .scene-stage--rusk,
  .scene-stage--home,
  .scene-stage--artifact { height: clamp(160px, 24svh, 198px); }
  .scene-layer--elder,
  .scene-layer--mara,
  .scene-layer--tekk,
  .scene-layer--rusk,
  .scene-layer--home { font-size: clamp(8.5px, 2.3vw, 10.5px); }
  .scene-elder-memory--calon { letter-spacing: .42rem; }
}

@media (min-width: 700px) {
  .scene-layer--elder,
  .scene-layer--mara,
  .scene-layer--tekk,
  .scene-layer--rusk,
  .scene-layer--home { font-size: clamp(13px, 1.8vw, 18px); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-elder-steam,
  .scene-elder-memory,
  .scene-mara-spark,
  .scene-tekk-resonance,
  .scene-rusk-crt,
  .scene-home-dust,
  .scene-home-weld,
  .scene-artifact-seal-glint,
  .scene-artifact-resonance,
  .scene-artifact-bad-sector { animation: none !important; }
  .scene-elder-steam,
  .scene-mara-spark,
  .scene-home-dust { opacity: .35; }
  .scene-artifact-seal-glint { opacity: .36; }
}

/* Berth 09 place-first local navigation */

.scene-stage--berth-map {
  height: clamp(244px, 32svh, 326px);
  background:
    radial-gradient(circle at 18% 22%, rgba(138, 126, 100, .055), transparent 19%),
    radial-gradient(circle at 50% 24%, rgba(120, 154, 142, .07), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(78, 205, 196, .045), transparent 18%),
    radial-gradient(circle at 72% 76%, rgba(122, 156, 181, .07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
}

.scene-layer--berth-panorama {
  z-index: 3;
  color: #aebbb1;
  font-size: clamp(8.5px, 2.2vw, 13.5px);
  line-height: 1.12;
  text-shadow: 0 0 11px rgba(168,195,169,.12);
}

.berth-panorama-marker {
  position: absolute;
  z-index: 6;
  color: #91a099;
  font-size: clamp(.64rem, 1.55vw, .78rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 0 8px rgba(148,180,164,.22);
  pointer-events: none;
  user-select: none;
}

.berth-panorama-marker--home { left: 19%; top: 14%; }
.berth-panorama-marker--tekk { left: 43%; top: 14%; }
.berth-panorama-marker--rusk { left: 66%; top: 14%; }
.berth-panorama-marker--street { left: 19%; top: 39%; }
.berth-panorama-marker--mara { left: 57%; top: 39%; }
.berth-panorama-marker--dr17 { left: 56%; top: 66%; }

.berth-panorama-steam,
.berth-panorama-cold-cup,
.berth-panorama-tekk-resonance,
.berth-panorama-rusk-crt,
.berth-panorama-mara-spark,
.berth-panorama-engine {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.berth-panorama-steam {
  left: 13%;
  top: 39%;
  color: #a6a08c;
  animation: frontier-steam 4.8s ease-in-out infinite;
}

.berth-panorama-cold-cup {
  left: 28%;
  top: 47%;
  color: #78817d;
}

.berth-panorama-tekk-resonance {
  left: 45%;
  top: 19%;
  color: var(--glyph-mat-viewport);
  animation: frontier-resonance 3.2s steps(2,end) infinite;
}

.berth-panorama-rusk-crt {
  left: 82%;
  top: 18%;
  color: var(--glyph-mat-viewport);
  animation: frontier-crt 5.7s steps(1,end) infinite;
}

.berth-panorama-mara-spark {
  left: 70%;
  top: 51%;
  color: var(--glyph-mat-weld);
  text-shadow: 0 0 6px rgba(217,119,54,.5);
  animation: frontier-weld-spark 4.4s steps(1,end) infinite;
}

.berth-panorama-engine {
  left: 83%;
  top: 78%;
  color: var(--glyph-mat-thermal);
  text-shadow: 0 0 8px rgba(192,57,43,.45);
  animation: scene-engine-breathe 2.8s ease-in-out infinite;
}

.berth-place-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.berth-place-grid .choice {
  min-height: 58px;
  border: 1px solid rgba(44,56,47,.72);
  border-left: 2px solid var(--line-strong);
  padding: 7px 8px;
}

.berth-place-grid .choice__title {
  font-size: .82rem;
}

.berth-place-grid .choice__meta {
  font-size: .67rem;
}

.berth-map-reading,
.berth-place-reading {
  max-width: 64ch;
  margin: 0 auto;
}

@media (max-width: 430px) {
  .scene-stage--berth-map { height: clamp(226px, 30svh, 258px); }
  .scene-layer--berth-panorama { font-size: clamp(8.8px, 2.45vw, 9.8px); }
  .berth-panorama-marker { font-size: .58rem; }
  .berth-place-grid .choice { min-height: 54px; }
}

@media (min-width: 700px) {
  .scene-stage--berth-map { height: clamp(286px, 34svh, 332px); }
  .scene-layer--berth-panorama { font-size: clamp(13px, 1.18vw, 16px); }
  .berth-place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

html[data-visual-viewport="phone"] .app-shell {
  width: 390px;
  height: 844px;
  max-height: 844px;
}

html[data-visual-viewport="phone"] .scene-stage--berth-map {
  height: 248px;
}

html[data-visual-viewport="phone"] .scene-layer--berth-panorama {
  font-size: 9.65px;
}

html[data-visual-viewport="phone"] .berth-panorama-marker {
  font-size: .58rem;
}

html[data-visual-viewport="phone"] .berth-place-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-visual-viewport="phone"] .berth-place-grid .choice {
  min-height: 54px;
}

html[data-visual-viewport="tablet"] .app-shell {
  width: 768px;
  height: 900px;
  max-height: 900px;
}

html[data-visual-viewport="tablet"] .scene-stage--berth-map {
  height: 304px;
}

html[data-visual-viewport="tablet"] .scene-layer--berth-panorama {
  font-size: 14.2px;
}

@media (prefers-reduced-motion: reduce) {
  .berth-panorama-steam,
  .berth-panorama-tekk-resonance,
  .berth-panorama-rusk-crt,
  .berth-panorama-mara-spark,
  .berth-panorama-engine { animation: none !important; opacity: .42; }
}

/* Character surfaces: ink, opaque hull silhouette, and authored light zones.
   No bitmap fills, extra frame loop, or animated material substitution. */
.scene-stage--surface {
  --surface-paper: #080c0b;
  --surface-lit: #bdccc7;
  --surface-mid: #829795;
  --surface-shade: #53696b;
  background: var(--surface-paper);
}

.scene-stage--surface .scene-surface {
  font-size: clamp(12px, 3.6vw, 18px);
  line-height: 1.16;
  text-shadow: none;
  color: var(--surface-mid);
  font-kerning: none;
}
.scene-stage--surface.scene-stage--ship { min-height: 244px; }

.surface-row { position: relative; display: inline-block; vertical-align: top; }
.surface-ink { position: relative; z-index: 1; }
.surface-occlusion {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--surface-paper);
  pointer-events: none;
}
.surface-lit { color: var(--surface-lit); }
.surface-mid { color: var(--surface-mid); }
.surface-shade { color: var(--surface-shade); }
.surface-glass { color: #a4d6ce; text-shadow: 0 0 4px #4ecdc444; }
.surface-module { color: #abbda6; }
.surface-patch { color: #c6ab88; }
.surface-grain { color: #688582; }
.surface-engine { color: #819b91; opacity: .65; }
.scene-stage--morning .surface-engine { animation: scene-engine-breathe 3.8s ease-in-out infinite; }
.surface-fabric { color: #b1a590; }
.surface-pool.surface-lit { color: #ddc59c; }
.surface-pool.surface-mid { color: #b49c79; }
.surface-lamp { color: #ffe0ac; text-shadow: 0 0 6px #dfae6966; }

.scene-stage--surface.scene-stage--hull-critical .surface-patch {
  color: #d6a081;
}

/* A short dark contact seam sits beneath the panel; it stays with the bench. */
.scene-surface--bench .surface-row:nth-child(8) { color: #4b5b5b; }
.scene-surface--bench .surface-row:nth-child(8) .surface-metal { color: inherit; }

.scene-stage--surface.scene-stage--berth .scene-layer {
  left: 50%;
  top: 50%;
  font-size: clamp(9px, 2.8vw, 15px);
  line-height: 1.16;
}
.scene-stage--surface.scene-stage--berth .scene-layer--service { animation: scene-connector-breathe 3.2s ease-in-out infinite; }
.scene-surface .scene-damage-spark,
.scene-surface .scene-mara-spark { font-size: inherit; line-height: inherit; }
.scene-stage--surface .scene-world-mark--ship-docked {
  left: 65%;
  top: auto;
  bottom: 9px;
  font-size: .6rem;
  opacity: .4;
}

@media (max-width: 430px) {
  .scene-stage--surface.scene-stage--ship { height: 188px; min-height: 188px; }
  .scene-stage--surface.scene-stage--mara { height: 198px; }
  /* Remove only fine scratches; keep width, contours, glazing and hull damage. */
  .scene-stage--surface .surface-detail { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-stage--surface .scene-surface,
  .scene-stage--surface .surface-engine,
  .scene-stage--surface .scene-layer--service { animation: none !important; }
}


/* Build 0008.1 — stateful Glyph surfaces */

.salvage-reveal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(116px, .72fr) minmax(132px, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 118px;
  margin: 2px 0 12px;
  padding: 11px 12px;
  border: 1px solid rgba(113, 132, 119, .56);
  background:
    linear-gradient(90deg, rgba(123, 146, 131, .045), transparent 42%),
    rgba(3, 6, 4, .42);
  overflow: hidden;
}

.salvage-reveal__head {
  display: grid;
  gap: 3px;
  align-self: stretch;
  align-content: center;
}

.salvage-reveal__head > span {
  width: max-content;
  color: var(--muted);
  letter-spacing: .14em;
  font-size: .67rem;
}

.salvage-reveal__head > strong {
  color: var(--accent);
  font-size: clamp(.78rem, 2.3vw, .96rem);
  font-weight: 600;
}

.salvage-reveal__head > small {
  color: var(--muted);
  line-height: 1.35;
}

.salvage-object-glyph {
  position: relative;
  z-index: 2;
  justify-self: center;
  margin: 0;
  white-space: pre;
  color: #aebcaf;
  font-size: clamp(.72rem, 3vw, 1rem);
  line-height: 1.08;
  text-shadow: 0 0 8px rgba(174, 188, 175, .08);
}

.salvage-reveal.is-raw .salvage-object-glyph {
  color: #69756d;
  opacity: .74;
  filter: blur(.25px);
}

.salvage-reveal.is-cleared .salvage-object-glyph {
  animation: salvage-profile-reveal .58s steps(4, end) both;
}

.salvage-reveal__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(130, 161, 145, .08) 50%, transparent 52%);
  transform: translateY(-100%);
}

.salvage-reveal.is-cleared .salvage-reveal__scan {
  animation: salvage-clear-scan .58s ease-out both;
}

.black-glass-void {
  position: relative;
  min-height: 142px;
  margin: 2px 0 12px;
  overflow: hidden;
  border: 1px solid rgba(116, 119, 119, .42);
  background:
    radial-gradient(ellipse at center, #020302 0 19%, rgba(2,3,2,.98) 25%, transparent 43%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
  isolation: isolate;
}

.black-glass-void pre {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  white-space: pre;
  color: rgba(156, 169, 160, .42);
  font-size: clamp(.68rem, 3vw, .92rem);
  line-height: 1.18;
  letter-spacing: .03em;
}

.black-glass-void::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(58px, 19vw, 88px);
  height: clamp(46px, 12vw, 64px);
  transform: translate(-50%, -50%) rotate(-4deg);
  background: #020302;
  border: 1px solid rgba(100, 89, 119, .28);
  box-shadow: 0 0 0 5px rgba(2, 3, 2, .74);
  z-index: 2;
}

.black-glass-void > span {
  position: absolute;
  right: 10px;
  bottom: 7px;
  z-index: 3;
  color: rgba(151, 137, 169, .62);
  font-size: .62rem;
  letter-spacing: .12em;
}

.route-memory-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 8px;
}

.route-memory {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .42em;
  min-width: 0;
  padding: 4px 3px;
  border-bottom: 1px solid rgba(107, 124, 112, .28);
  color: #727f76;
  font-size: .66rem;
  letter-spacing: .06em;
}

.route-memory b {
  font-weight: 500;
}

.route-memory i {
  font-style: normal;
  font-size: .78rem;
}

.route-memory--recorded {
  color: #9eb0a2;
  border-bottom-color: rgba(129, 157, 140, .58);
}

.route-memory--recovering {
  color: #a8bcae;
  border-bottom-style: dashed;
}

.route-memory--thin {
  color: #b88f78;
  border-bottom-color: rgba(184, 143, 120, .54);
}

.home-retained-strip {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
  max-width: 86%;
  padding: 3px 7px;
  border: 1px solid rgba(151, 159, 139, .34);
  background: rgba(4, 7, 5, .74);
  color: #aeb6a5;
  font-size: clamp(.55rem, 2vw, .7rem);
  white-space: nowrap;
}

.home-retained-strip b {
  margin-right: 2px;
  color: #807f71;
  font-size: .52rem;
  letter-spacing: .12em;
  font-weight: 500;
}

.home-retained-object {
  min-width: 1.15em;
  text-align: center;
}

.hull-condition-strip {
  display: grid;
  grid-template-columns: auto minmax(42px, 72px) 1fr;
  gap: 9px;
  align-items: center;
  margin: 3px 0 10px;
  padding: 5px 8px;
  border-left: 2px solid rgba(128, 148, 135, .52);
  color: var(--muted);
  font-size: .67rem;
}

.hull-condition-strip > span {
  letter-spacing: .12em;
}

.hull-condition-strip pre {
  margin: 0;
  color: #9ba99d;
  white-space: pre;
  font-size: .72rem;
}

.hull-condition-strip strong {
  color: #aab6ac;
  font-weight: 500;
}

.hull-condition-strip--worn {
  border-left-color: rgba(190, 137, 103, .66);
}

.hull-condition-strip--worn pre,
.hull-condition-strip--worn strong,
.scene-stage--hull-worn .surface-patch {
  color: #c18d6d;
}

.hull-condition-strip--critical {
  border-left-color: rgba(190, 112, 87, .82);
}

.hull-condition-strip--critical pre,
.hull-condition-strip--critical strong,
.scene-stage--hull-critical .surface-patch {
  color: #c47963;
}

.scene-stage--hull-critical .scene-surface--ship .surface-shade {
  opacity: .76;
}

.scene-stage--hull-critical .scene-damage-spark {
  text-shadow: 0 0 8px rgba(196, 121, 99, .34);
}

@keyframes salvage-profile-reveal {
  0% { opacity: .35; clip-path: inset(0 0 76% 0); }
  33% { opacity: .62; clip-path: inset(0 0 48% 0); }
  66% { opacity: .82; clip-path: inset(0 0 21% 0); }
  100% { opacity: 1; clip-path: inset(0); }
}

@keyframes salvage-clear-scan {
  from { transform: translateY(-100%); opacity: .7; }
  to { transform: translateY(100%); opacity: 0; }
}

@media (max-width: 430px) {
  .salvage-reveal {
    grid-template-columns: .88fr 1.12fr;
    min-height: 104px;
    padding: 8px 9px;
  }

  .route-memory {
    font-size: .58rem;
    gap: .25em;
  }

  .home-retained-strip {
    bottom: 6%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .salvage-reveal.is-cleared .salvage-object-glyph,
  .salvage-reveal.is-cleared .salvage-reveal__scan {
    animation: none !important;
  }
}