/* Muted observer buttons and a shared text-only information overlay. */
.observation{
  --observation-card-height:26px;
  --observation-card-background:#22302947;
  --observation-info-font:12px/1.65 Pixel,monospace;
  --observation-info-color:#b4b7b3;
  --observation-info-shadow:1px 1px 0 #171d19,0 0 1px #171d1980;
  --observation-link-color:#cdd0ca;
}
.observation .corner-cards,.observation .view-controls{zoom:1}
.observation .corner-cards{gap:4px}
.observation .roof-world .view-controls .world-card{
  box-sizing:border-box;
  min-height:var(--observation-card-height);
  padding:2px 8px;
  border:0;
  border-radius:0;
  background:var(--observation-card-background);
  color:#c5cdbf;
  box-shadow:none;
  font:14px/22px Pixel,monospace;
  text-shadow:1px 1px 0 #1c2823bb;
}
.observation .roof-world .view-controls :is(a,button).world-card:hover{
  background:#6d7d6a61;
  color:#f0f1e6;
  box-shadow:none;
  transform:none;
}
.observation .roof-world .view-controls button.world-card[aria-pressed="true"]{
  background:#63756052;
  color:#e0e4d8;
  box-shadow:inset 0 -1px #aebda399;
}
.observation .roof-world .view-controls button.world-card:focus-visible{outline:1px solid #c5cdbf;outline-offset:2px}
.observation .view-controls{
  left:max(16px,env(safe-area-inset-left));
  top:max(16px,env(safe-area-inset-top));
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:3px;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}
.observation .narrative-views,.observation .station-controls{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:3px;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}
.observation .roof-world .view-controls button.world-card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--observation-card-height);
  height:var(--observation-card-height);
  min-width:var(--observation-card-height);
  min-height:var(--observation-card-height);
  flex:0 0 auto;
  padding:0;
  margin:0;
  white-space:nowrap;
}
.observation .narrative-views .observer-icon{
  height:11px;background-size:128px 128px;
  filter:brightness(0) invert(1) drop-shadow(1px 1px 0 #1c2823bb);
  opacity:.72;
  transform:scale(1);
}
.observation .narrative-views button:is(:hover,:focus-visible,[aria-pressed="true"]) .observer-icon{opacity:.95}
/* Center each painted silhouette, excluding the atlas cell's transparent margin. */
.observation .narrative-views .observer-icon[data-icon="bird"]{width:13px;background-position:-2px -4px}
.observation .narrative-views .observer-icon[data-icon="drone"]{width:12px;background-position:-34px -3px}
.observation .station-glyph{display:block;line-height:16px}
.observation .station-controls :is([data-station-action="up"],[data-station-action="down"],[data-station-action="left"],[data-station-action="right"]) .station-glyph{
  position:relative;width:9px;height:9px;font-size:0;line-height:0;
}
.observation .station-controls :is([data-station-action="up"],[data-station-action="down"],[data-station-action="left"],[data-station-action="right"]) .station-glyph::before{
  content:"";position:absolute;left:4px;top:0;width:1px;height:9px;background:currentColor;
}
.observation .station-controls :is([data-station-action="up"],[data-station-action="down"],[data-station-action="left"],[data-station-action="right"]) .station-glyph::after{
  content:"";position:absolute;left:1px;top:3px;width:1px;height:1px;background:currentColor;
  box-shadow:1px -1px currentColor,2px -2px currentColor,4px -2px currentColor,5px -1px currentColor,6px 0 currentColor;
}
.observation [data-station-action="down"] .station-glyph{transform:rotate(180deg)}
.observation [data-station-action="left"] .station-glyph{transform:rotate(-90deg)}
.observation [data-station-action="right"] .station-glyph{transform:rotate(90deg)}
.observation .view-controls[hidden],.observation .narrative-views[hidden],.observation .station-controls[hidden]{display:none}
@media(max-width:550px){.observation .view-controls{left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top))}}

.observation .environment-hud,
.observation .roof-world .corner-cards .world-card,
.observation .roof-world .corner-cards .world-card:is(:hover,:active,[aria-pressed="true"]){
  margin:0;padding:0;border:0;min-height:0;background:none;box-shadow:none;
  color:var(--observation-info-color);text-shadow:var(--observation-info-shadow);
  font:var(--observation-info-font);
  transform:none;
}
.observation .roof-world .corner-cards .world-card{pointer-events:none}
.observation .environment-hud{
  position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));
  text-align:right;max-width:calc(100vw - 186px);pointer-events:none;z-index:2;
}
.observation .roof-world .corner-cards :is(a,button).world-card,
.observation .roof-world .corner-cards button.world-card[aria-pressed="true"]{
  color:var(--observation-link-color);pointer-events:auto;cursor:pointer;
  text-decoration:none;
}
.observation .roof-world .corner-cards :is(a,button).world-card::before{
  content:">" / "";display:inline-block;width:1.2em;color:#92988f;
}
.observation .roof-world .corner-cards :is(a,button).world-card:is(:hover,:focus-visible){color:#e0e3dc}
.observation .roof-world .corner-cards :is(a,button).world-card:is(:hover,:focus-visible)::before{color:inherit}
.observation .roof-world .corner-cards :is(a,button).world-card:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.observation .environment-hud .weather-credit{font:9px/1.65 Pixel,monospace;color:#92988f}
@media(max-width:550px){.observation .environment-hud{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));max-width:calc(100vw - 180px)}}

/* Inside the scope, one small sight button returns to the previous observer. */
.observation.scope-mode-active:not(.terminal-mode-active) :is(.environment-hud,.corner-cards,.observation-notebook,.station-controls,#sceneDoor,.terminal-enter),
.observation.scope-mode-active:not(.terminal-mode-active) .narrative-views [data-narrative-view]:not([data-narrative-view=neighbor]){display:none!important}
.observation.scope-mode-active:not(.terminal-mode-active) .narrative-views [data-narrative-view=neighbor]{font-size:0}
.observation.scope-mode-active:not(.terminal-mode-active) .narrative-views [data-narrative-view=neighbor]::after{
  content:'';width:1px;height:1px;background:currentColor;
  box-shadow:-5px 0 currentColor,-4px 0 currentColor,-3px 0 currentColor,3px 0 currentColor,4px 0 currentColor,5px 0 currentColor,0 -5px currentColor,0 -4px currentColor,0 -3px currentColor,0 3px currentColor,0 4px currentColor,0 5px currentColor;
}

/* Events read forward in time; navigation stays in its own fixed grid. */
.observation .corner-cards{width:min(640px,calc(100% - 32px));gap:9px}
.observation .status-sources[hidden]{display:none!important}
.observation .status-log{display:flex;flex-direction:column;gap:4px;width:100%;pointer-events:none}
.observation .status-log:empty{display:none}
.observation .roof-world .corner-cards .status-entry{
  display:grid;grid-template-columns:8ch minmax(0,1fr);gap:9px;
  max-width:none;width:100%;color:#9fa89f;line-height:1.65;
}
.observation .roof-world .corner-cards .status-entry.status-latest{color:#d1d4cc}
.observation .status-entry time{white-space:nowrap;font-variant-numeric:tabular-nums;color:#8f9b91}
.observation .status-entry.status-latest time{color:#adb8aa}
.observation .status-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.observation .status-actions{
  display:grid;grid-template-columns:minmax(max-content,128px) minmax(0,1fr);gap:3px 18px;
  width:100%;align-items:start;pointer-events:none;
}
.observation .status-actions .world-card{
  min-width:0;max-width:100%!important;width:fit-content;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.observation .status-actions #sceneCard{grid-area:1/1}
.observation .status-actions #notebookOpen{grid-area:1/2}
.observation .status-actions #musicToggle{grid-area:2/1}
.observation .status-actions #returnWorld{grid-area:2/2}
.observation .status-actions #roomCard{grid-area:3/1}
.observation .status-actions #garageCard{grid-area:3/2}
@media(max-width:550px){
  .observation .corner-cards{width:calc(100% - 24px)}
  .observation .status-actions{column-gap:12px}
}

/* A small reading sheet, below both top overlays, with room to scroll. */
.observation .observation-notebook{
  width:216px;max-width:calc(100% - 24px);padding:9px;
  border-width:1px;box-shadow:2px 2px #343b3430;
  font:10px/1.6 Pixel,monospace;
}
.observation-notebook .notebook-title{gap:6px;margin-bottom:6px}
.observation .observation-notebook .notebook-title h2{margin:0;font:11px/1.6 Pixel,monospace}
.observation-notebook .notebook-title button{font:14px/20px Pixel,monospace;padding:0;width:20px;height:20px;min-height:0}
.observation .observation-notebook :is(p,details,a,label,select){font-size:10px;line-height:1.6}
.observation .observation-notebook p{margin:5px 0}
.observation-notebook .notebook-browser{padding:4px 6px;min-height:24px;margin:0 0 8px}
.observation-notebook .note-heading{gap:8px}
.observation-notebook .note-heading canvas{width:56px;height:56px;flex-basis:56px}
.observation-notebook .note-heading h3{font-size:11px;line-height:1.5;margin:0 0 4px}
.observation-notebook .note-heading p{font-size:10px}
.observation-notebook .note-comment{padding:4px 0 2px}
.observation-notebook details{margin-top:7px;padding-top:6px}
.observation-notebook li{margin:5px 0}
.observation-notebook ul{padding-left:13px}
@media(max-width:550px){.observation .observation-notebook{right:max(12px,env(safe-area-inset-right))}}