.encounter-panel {
  position: absolute;
  top: 138px;
  right: 28px;
  width: 286px;
  padding: 16px 18px;
  color: #51422c;
  border: 1px solid #a88b50;
  border-left: 4px solid #b5995b;
  background: linear-gradient(115deg, #f0e6cdee, #e7d9b8eb);
  box-shadow: 0 7px 26px #20180d30;
  font: 12px/1.5 Georgia, serif;
}
.encounter-panel .eyebrow { color: #80622c; letter-spacing: 1px; }
#encounter-status { margin: 5px 0 9px; }
.encounter-meters { display: grid; gap: 3px; font: 10px/1.6 Arial, sans-serif; }
.encounter-meters label { display: flex; align-items: center; justify-content: space-between; }
.encounter-meters meter { width: 65%; height: 10px; accent-color: #7b884e; }
.encounter-buttons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.encounter-buttons button { min-height: 32px; padding: 6px 8px; border: 1px solid #ac965c; background: #e0d0a8; color: #473921; font: 10px Arial, sans-serif; touch-action: manipulation; }
.encounter-buttons button:hover { background: #f6ecd3; }
.encounter-panel small { display: block; margin-top: 8px; font-size: 9px; }
@media (max-width: 700px) {
  .encounter-panel { top: auto; bottom: 184px; left: 15px; right: 15px; width: auto; max-height: 170px; padding: 8px 11px; overflow-y: auto; pointer-events: auto; font-size: 10px; }
  .encounter-panel .eyebrow { font-size: 8px; }
  .encounter-panel small { display: none; }
  .encounter-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .encounter-meters label { flex-direction: column; align-items: flex-start; }
  .encounter-meters meter { width: 100%; }
  .encounter-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
  .encounter-buttons button { min-height: 36px; font-size: 9px; }
  .encounter-panel:not([hidden]) ~ #toast { top: 292px; bottom: auto; left: 15px; right: 15px; width: auto; max-width: none; transform: none; text-align: left; pointer-events: none; }
}

/* Local stories share the journal's paper vocabulary and keep choices readable on touch. */
.world-conversation { width: min(620px, calc(100vw - 28px)); max-height: 80dvh; overflow: auto; padding: 28px; border: 1px solid #a58c58; background: #eee5ce; color: #473b29; box-shadow: 0 18px 80px #0f1a1866; }
.world-conversation::backdrop { background: #15251b65; }
.world-conversation #world-text { font: 18px/1.65 Georgia, serif; }
#world-choices, .world-journal-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0; }
#world-choices button, .world-journal-actions button, .world-story-grid button, #journal-content > button { min-height: 44px; border: 1px solid #a58c58; background: #e1d3b0; padding: 10px 15px; color: #473b29; cursor: pointer; }
#world-choices button:hover, .world-journal-actions button:hover { background: #faf1db; }
.world-story-grid, .world-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 24px 0; }
.world-story-grid article, .world-people article { border: 1px solid #b29b6f66; padding: 16px; background: #fff8e73b; }
.world-story-grid article h3 { margin: 9px 0; }
.world-story-grid article p, .world-introduction p { line-height: 1.6; }
.world-people article p { margin: 8px 0 0; font-size: 13px; }
.world-story-grid small { display: block; margin: 12px 0; }
.journal-tabs { flex-wrap: wrap; }
@media(max-width:700px) { .world-conversation { padding: 18px; } .world-conversation #world-text { font-size: 16px; } .hud-tools { flex-wrap: wrap; max-width: 58vw; justify-content: flex-end; } #world-notebook { font-size: 10px; padding: 6px; } .world-story-grid, .world-people { grid-template-columns: 1fr; } }

.life-waypoint { position: absolute; transform: translate(-50%, -50%); text-align: center; color: #f1eed5; text-shadow: 0 1px 5px #183128; pointer-events: none; }
.life-waypoint span { display: block; font-size: 28px; }
.life-waypoint small { display: block; background: #214738d9; padding: 5px 8px; border: 1px solid #e2d4a56b; font: 11px Georgia, serif; }