/* /log/world/ stage + HUD. Loaded only on that page. */
.world {
  --rs-gold: #ffb83f;
  --rs-panel: #3e3529;
  --rs-edge: #1e1a14;
  --rs-light: #5d5242;
  position: relative;
  padding: 0;
  height: calc(100svh - 57px);
  min-height: 360px;
  max-height: 1000px;
  background: #0e0b08;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  font: 13px/1.35 var(--mono);
  color: #f1e6cf;
  user-select: none;
  -webkit-user-select: none;
}
.world[hidden] { display: none; }
@media (pointer: coarse) { .world { height: calc(100svh - 57px - 72px); } } /* leave a strip to scroll */

.world-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: grab; }
.world-canvas:active { cursor: grabbing; }
.world-canvas.is-pointing { cursor: pointer; }
.world-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.world-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); }

/* RS-style text: hard shadow, no blur */
.w-hover, .w-hint, .w-prompt, .w-btn, .w-compass { text-shadow: 1px 1px 0 #000; }

.w-hover { position: absolute; top: 10px; left: 12px; color: #fff; pointer-events: none; opacity: 0; }
.w-hover.is-on { opacity: 1; }

.w-hint {
  position: absolute; left: 12px; bottom: 12px; margin: 0; color: var(--rs-gold);
  transition: opacity .6s; pointer-events: none;
}
.w-hint.is-gone { opacity: 0; }
@media (pointer: coarse) {
  .w-hint { bottom: auto; top: 12px; max-width: 55%; }  /* bottom belongs to the prompt on phones */
}

.w-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; align-items: center; }
.w-btn, .w-compass, .w-prompt, .w-panel-x {
  font: inherit; color: var(--rs-gold); cursor: pointer;
  background: var(--rs-panel); border: 2px solid var(--rs-edge);
  box-shadow: inset 1px 1px 0 var(--rs-light), inset -1px -1px 0 #000;
}
.w-btn { padding: 4px 8px; }
.w-compass { width: 36px; height: 36px; border-radius: 50%; padding: 0; display: grid; place-items: center; }
.w-needle { display: block; font-weight: 700; color: #ff4a3a; }

.w-prompt {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 8px 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-prompt[hidden], .w-prompt.is-open { display: none; }

.w-panel {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  background: var(--rs-panel); border: 3px solid var(--rs-edge);
  box-shadow: inset 2px 2px 0 var(--rs-light), inset -2px -2px 0 #000, 0 6px 24px rgba(0,0,0,.6);
  padding: 0 14px 14px; user-select: text; -webkit-user-select: text;
}
.w-panel[hidden] { display: none; }
.w-panel-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 -14px 10px; padding: 6px 8px 6px 14px; background: var(--rs-edge); color: var(--rs-gold);
}
.w-panel-x { padding: 0 6px; line-height: 1.4; }
.w-panel-title { margin: 0 0 4px; font: 600 17px/1.3 var(--sans); color: var(--rs-gold); text-shadow: 1px 1px 0 #000; }
.w-panel-meta { margin: 0 0 10px; color: #b8aa8c; font-size: 12px; }
.w-panel-sum { margin: 0 0 12px; font: 15px/1.5 var(--sans); color: #f1e6cf; }
.w-panel-link { color: var(--rs-gold); font-weight: 700; }
.w-panel-link:hover { color: #fff; }