#lore-surface {
  margin: var(--space-section, 52px) 0 0;
  color: var(--surface-text, #17251e);
}

#lore-surface .lore-head,
#lore-surface .lore-toolbar,
#lore-surface .lore-card,
#lore-surface .lore-empty {
  border: 1px solid var(--surface-border, #d2ddd6);
  background: var(--surface-panel, #ffffff);
}

#lore-surface .lore-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-gap, 16px);
  padding: var(--space-card, 24px);
  border-radius: var(--surface-radius, 7px) var(--surface-radius, 7px) 0 0;
}

#lore-surface .lore-kicker,
#lore-surface .lore-version,
#lore-surface .lore-status {
  color: var(--surface-muted, #53675b);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#lore-surface h2,
#lore-surface h3,
#lore-surface p { margin-top: 0; }
#lore-surface h2 { margin-bottom: 8px; color: var(--surface-text, #17251e); font-size: clamp(25px, 3vw, 38px); }
#lore-surface .lore-head p { margin-bottom: 0; color: var(--surface-muted, #53675b); }
#lore-surface .lore-version { align-self: flex-start; white-space: nowrap; }
#lore-surface .lore-toolbar { padding: 12px 16px; border-top: 0; background: var(--surface-panel-soft, #f0f6f2); }
#lore-surface .lore-filters { display: flex; flex-wrap: wrap; gap: 7px; }
#lore-surface .lore-filters button,
#lore-surface .lore-rooms {
  border: 1px solid var(--surface-border, #d2ddd6);
  border-radius: var(--surface-radius, 7px);
  background: transparent;
  color: var(--surface-text, #17251e);
  cursor: pointer;
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 7px 11px;
}
#lore-surface .lore-filters button.active,
#lore-surface .lore-filters button:hover,
#lore-surface .lore-rooms:hover { border-color: var(--surface-action, #2dba70); }
#lore-surface button:focus-visible { outline: 2px solid var(--surface-focus, #73dae5); outline-offset: 2px; }
#lore-surface .lore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-gap, 12px); padding-top: 12px; }
#lore-surface .lore-card,
#lore-surface .lore-empty { min-width: 0; padding: var(--space-card, 18px); border-radius: var(--surface-radius, 7px); }
#lore-surface .lore-card { display: grid; gap: 9px; }
#lore-surface .lore-status { color: var(--surface-action, #2dba70); }
#lore-surface h3 { margin-bottom: 0; color: var(--surface-text, #17251e); font-size: 18px; }
#lore-surface .lore-body { margin-bottom: 0; color: var(--surface-text, #17251e); line-height: 1.6; }
#lore-surface .lore-source { color: var(--surface-action, #2dba70); font-size: 12px; }
#lore-surface .lore-empty { grid-column: 1 / -1; color: var(--surface-muted, #53675b); }
#lore-surface .lore-empty strong { display: block; margin-bottom: 7px; color: var(--surface-text, #17251e); }
#lore-surface .lore-empty p { margin-bottom: 12px; }

@media (max-width: 680px) {
  #lore-surface { margin-top: var(--space-section-mobile, 30px); }
  #lore-surface .lore-head { display: block; padding: var(--space-card-mobile, 18px); }
  #lore-surface .lore-version { display: block; margin-top: 14px; }
  #lore-surface .lore-grid { grid-template-columns: 1fr; }
}

#lore-surface .lore-card{grid-template-columns:minmax(0,1fr)}
#lore-surface .lore-card>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
#lore-surface .lore-body{overflow-wrap:anywhere}
@media(max-width:680px){#lore-surface .lore-grid{grid-template-columns:minmax(0,1fr)}}