/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── FONT SIZE & DENSITY (set by settings.js on :root) ──────── */
:root {
  --font-size:        16px;
  --msg-padding:      3px 0;      /* comfortable */
  --msg-gap:          1px;
  --scrollbar-w:      5px;
}

html, body {
  height: 100%;
  background: var(--bg, #080d14);
  color: var(--text, #c8daea);
  font-size: var(--font-size);
  font-family: var(--font-family, 'Crimson Pro', Georgia, serif);
  font-weight: 300;
  line-height: 1.5;
  overflow: hidden;
}

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: var(--scrollbar-w); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, var(--border-light)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover, var(--accent-dark)); }

/* ── ROOM LIST PAGE ────────────────────────────────────────── */
.lobby {
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.lobby-chat-column {
  width: 380px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.lobby-chat-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.lobby-chat-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 4px;
}

.lobby-chat-header p {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.lobby-online-users {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.online-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.online-avatars {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.online-avatars::-webkit-scrollbar { height: 2px; }

.online-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: bold;
  flex-shrink: 0;
  transition: transform 0.15s, border-color 0.15s;
  cursor: pointer;
  position: relative;
}
.online-avatar:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim);
}

.online-avatar.lfr-beacon {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  animation: lfrPulse 2s infinite alternate;
}
@keyframes lfrPulse {
  0% { box-shadow: 0 0 4px var(--accent-glow); }
  100% { box-shadow: 0 0 12px var(--accent); }
}

.lobby-feed-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.lobby-chat-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lobby-chat-input-bar {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

.lobby-content-column {
  flex: 1;
  overflow-y: auto;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Subtle CSS Ambience */
.lobby-content-column::before {
  content: '';
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(217, 70, 239, 0.03) 0%, transparent 50%);
  animation: ambientPulse 15s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes ambientPulse {
  0% { transform: scale(1) translate(0, 0); opacity: 0.5; }
  100% { transform: scale(1.1) translate(2%, 2%); opacity: 1; }
}

/* Icebreaker Widget */
.icebreaker-card {
  width: 100%;
  max-width: 960px;
  background: linear-gradient(145deg, var(--bg-hover), var(--bg-panel));
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.icebreaker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.icebreaker-header h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin: 0;
}
.icebreaker-prompt {
  font-size: 0.95rem;
  color: var(--text);
  font-style: italic;
  margin-bottom: 16px;
  line-height: 1.5;
}
.icebreaker-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.icebreaker-room-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .lobby {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }
  .lobby-content-column {
    order: 1;
    padding: 30px 20px;
    overflow-y: visible;
  }
  .lobby-chat-column {
    order: 2;
    width: 100%;
    height: 500px;
    border-right: none;
    border-top: 1px solid var(--border);
  }
}

.lobby-header {
  position: relative;
  text-align: center;
  margin-bottom: 48px;
}

.lobby-settings-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s;
}

.lobby-settings-btn:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.lobby-title {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-shadow: 0 0 40px var(--accent-glow);
  margin-bottom: 8px;
}

.lobby-subtitle {
  font-size: 1rem;
  color: var(--text-dim);
  font-style: italic;
}

.lobby-user {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 6px;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 960px;
}

.room-card {
  display: block;
  text-decoration: none;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}

.room-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}

.room-card:hover {
  border-color: var(--accent-dim);
  background: var(--bg-hover);
  transform: translateY(-2px);
}

.room-card:hover::before { opacity: 1; }

.room-name {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.room-desc {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.room-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }

.room-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
  border: 1px solid var(--accent-dim);
  padding: 1px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.room-badge--count {
  color: var(--accent);
  border-color: var(--accent-dim);
  font-variant-numeric: tabular-nums;
}

/* RP category badge colour now comes from each category's stored badge_color,
   rendered as an inline style (see index.ejs) — shape/spacing is inherited
   from the base .room-badge rule above. */

/* Room card wrapper — needed so the ⚙ configure button sits outside the <a> */
.room-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.room-card-wrap .room-card {
  flex: 1;
}

.room-cfg-btn {
  position: absolute;
  top: 8px; right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  z-index: 1;
}

.room-card-wrap:hover .room-cfg-btn { opacity: 1; }
.room-cfg-btn:hover { color: var(--accent); }

/* ── CHAT LAYOUT ───────────────────────────────────────────── */
.chat-app {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 48px 1fr 64px;
  grid-template-areas:
    "sidebar   header  userlist"
    "sidebar   feed    userlist"
    "sidebar   input   userlist";
  height: 100vh;
  width: 100vw;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-logo {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.08em;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: color 0.15s;
}

.sidebar-logo:hover { color: var(--text); }

.sidebar-section {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 14px 16px 6px;
  text-transform: uppercase;
}

.sidebar-rooms {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.sidebar-room {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 0.88rem;
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
}

.sidebar-room:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.sidebar-room.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-glow);
}

.sidebar-room-hash {
  color: var(--text-muted);
  font-size: 0.85em;
}

.sidebar-user {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.sidebar-username {
  color: var(--accent);
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

/* Settings gear */
.sidebar-settings-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
  float: right;
  margin-top: -2px;
}

.sidebar-settings-btn:hover { color: var(--accent); }

.sidebar-chars-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 0.72rem;
  padding: 4px 8px;
  text-align: center;
}

/* ── HEADER ─────────────────────────────────────────────────── */
.chat-header {
  grid-area: header;
  background: rgba(8, 13, 20, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
}

.chat-room-name {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.chat-room-hash { color: var(--text-muted); }

.chat-topic {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-header-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.72rem;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-icon:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--accent-glow);
}

/* ── CHAT FEED ──────────────────────────────────────────────── */
.chat-feed {
  grid-area: feed;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--msg-gap);
}

.chat-feed-anchor { height: 1px; flex-shrink: 0; }

.msg {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0 12px;
  padding: var(--msg-padding);
  font-size: 1em;
  line-height: 1.5;
  animation: msgIn 0.15s ease;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-time {
  text-align: right;
  color: var(--text-muted);
  font-size: 0.72em;
  padding-top: 3px;
  white-space: nowrap;
  user-select: none;
}

.msg-username {
  font-weight: 400;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.15s;
}

.msg-username:hover {
  color: var(--text);
  text-decoration: underline;
}

.msg-content { color: var(--text); word-break: break-word; }

.msg.emote .msg-content  { color: var(--emote); font-style: italic; }
.msg.system .msg-content { color: var(--system); font-style: italic; text-align: center; }
.msg.system { grid-template-columns: 1fr; }
.msg.system .msg-time { display: none; }

.date-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.72em;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.08em;
  margin: 12px 0;
}

.date-divider::before, .date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── USER LIST ──────────────────────────────────────────────── */
.userlist {
  grid-area: userlist;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.userlist-header {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 14px 16px 6px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.userlist-count {
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

.userlist-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.userlist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  font-size: 0.83rem;
  color: var(--text-dim);
  transition: color 0.15s;
}

.userlist-item:hover { color: var(--text); }

.userlist-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent-glow);
}

/* ── INPUT BAR ──────────────────────────────────────────────── */
.chat-input-bar {
  grid-area: input;
  background: rgba(8, 13, 20, 0.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  position: relative;   /* autocomplete popup anchors here */
}

/* ── Username autocomplete popup ──────────────────────────── */
.ac-popup {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 16px;
  right: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  z-index: 200;
  box-shadow: 0 -4px 16px rgba(0,0,0,.4);
}

.ac-item {
  padding: 7px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-dim);
  transition: background 0.1s, color 0.1s;
}

.ac-item:hover,
.ac-item.ac-selected {
  background: var(--bg-hover);
  color: var(--text);
}

.chat-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 1em;
  font-weight: 300;
  padding: 8px 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.chat-input:focus {
  border-color: var(--accent-dim);
  background: var(--bg-input);
}

.chat-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.chat-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-send {
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chat-send:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.chat-send:active { transform: scale(0.97); }

/* ── MUTE NOTICE ────────────────────────────────────────────── */
.mute-notice {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-panel);
  border: 1px solid var(--error);
  color: var(--error);
  font-size: 0.85rem;
  font-style: italic;
  padding: 6px 16px;
  border-radius: 6px;
  display: none;
  white-space: nowrap;
}

.mute-notice.visible { display: block; }

/* ── Dodge prompt ─────────────────────────────────────────────
   Shown to the target of an adverbed stomp while the dodge window is
   open. Same anchoring as the mute notice, but sits a little higher so
   the two never overlap, and carries an action button. */
.dodge-prompt {
  position: absolute;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 0.85rem;
  padding: 8px 12px 8px 16px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 0 24px var(--accent-glow, rgba(0,0,0,0.3));
}

.dodge-prompt.visible { display: flex; }

.dodge-prompt-btn {
  background: var(--accent);
  color: var(--bg-panel);
  border: none;
  border-radius: 5px;
  padding: 5px 14px;
  font-weight: 600;
  cursor: pointer;
}

.dodge-prompt-btn:hover { background: var(--accent-dark); }

/* ── SETTINGS PANEL ─────────────────────────────────────────── */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}

.settings-overlay.open { display: block; }

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.settings-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;               /* matches sidebar width */
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  animation: panelUp 0.2s ease;
}

@keyframes panelUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.settings-title {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}

.settings-close:hover { color: var(--text); }

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Font size slider */
.settings-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}

.settings-slider::-webkit-slider-thumb:hover { background: var(--text); }

.settings-slider-value {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: right;
}

/* Font family select */
.settings-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 5px 8px;
  outline: none;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s;
}

.settings-select:focus { border-color: var(--accent-dim); }

.settings-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 5px 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  font-family: inherit;
}
.settings-input:focus { border-color: var(--accent-dim); }
.settings-input::placeholder { color: var(--text-muted); }

/* Density toggle */
.settings-toggle {
  display: flex;
  gap: 6px;
}

.settings-toggle-btn {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding: 5px 0;
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.settings-toggle-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.settings-toggle-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* Skin picker */
.settings-skins {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-skin-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.settings-skin-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.settings-skin-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* ── STREAM OVERLAY ─────────────────────────────────────────── */
.stream-app {
  background: transparent;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.stream-feed {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 16px;
  gap: 2px;
}

.stream-msg {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  line-height: 1.45;
/*  text-shadow: 0 1px 4px rgba(0,0,0,0.9); */
  animation: streamMsgIn 0.3s ease;
}

@keyframes streamMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stream-username { color: #0f0f0f; font-weight: 400; margin-right: 4px; font-size: larger;}
.stream-content  { color: #0f0f0f; font-size: larger;}
.stream-msg.emote  .stream-content { color: #0f0f0f;  font-style: italic; font-size: larger; }
.stream-msg.system .stream-content { color: #0f0f0f; font-style: italic; font-size: larger; }


/*
.stream { background: var(--bg); }
.stream-username { color: var(--accent); font-weight: 400; margin-right: 4px; }
.stream-content  { color: var(--text)}
.stream-msg.emote  .stream-content { color: var(--emote);  font-style: italic; }
.stream-msg.system .stream-content { color: var(--system); font-style: italic; }
*/
/* ── STREAM WINDOW ──────────────────────────────────────────── */
.sw-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: var(--bg);
  overflow: hidden;
}

.sw-header {
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 36px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 10px;
}

.sw-channel {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.sw-channel-hash { color: var(--text-muted); }

.sw-toggle-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.sw-toggle-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* Wraps #sw-feed so .scroll-jump-pill (a sibling, not a child — see
   stream-window.ejs's comment: stream-window.js's feed.innerHTML = '' would
   wipe it otherwise) has a position:relative ancestor sized to the same box
   #sw-feed used to fill directly. */
.sw-feed-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Feed fills all remaining space */
.sw-feed {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

/* Messages: no grid, no timestamp — just name + content inline */
.sw-feed .msg {
  display: block;
  padding: 2px 0;
  font-size: 0.92em;
  animation: msgIn 0.15s ease;
}

.sw-feed .msg-time { display: none; }

.sw-feed .msg-username {
  color: var(--accent);
  font-weight: 400;
  margin-right: 3px;
}

.sw-feed .msg-content { color: var(--text); }

.sw-feed .msg.emote .msg-content {
  color: var(--emote);
  font-style: italic;
}

.sw-feed .msg.system {
  text-align: center;
}

.sw-feed .msg.system .msg-content {
  color: var(--system);
  font-style: italic;
  font-size: 0.85em;
}

.sw-feed .date-divider {
  font-size: 0.65em;
  margin: 6px 0;
}

/* User list — bottom strip */
.sw-userlist {
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: 7px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
  max-height: 120px;
  transition: max-height 0.2s ease, padding 0.2s ease, border-top-color 0.2s ease;
}

.sw-app.userlist-hidden .sw-userlist {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
}

.sw-userlist-label {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 2px;
  flex-shrink: 0;
}

.sw-userlist-count { color: var(--accent-dark); }

.sw-userlist-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  flex: 1;
}

.sw-userlist-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.sw-userlist-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 5px var(--accent-glow);
}

.sw-userlist-item.role-host           { color: var(--role-host, #d4a94a); }
.sw-userlist-item.role-host           .sw-userlist-dot { background: var(--role-host, #d4a94a); box-shadow: 0 0 5px var(--role-host-glow, rgba(212,169,74,0.4)); }
.sw-userlist-item.role-cohost         { color: var(--role-cohost, #7a9bd4); }
.sw-userlist-item.role-cohost         .sw-userlist-dot { background: var(--role-cohost, #7a9bd4); box-shadow: 0 0 5px var(--role-cohost-glow, rgba(122,155,212,0.4)); }
.sw-userlist-item.role-featured-guest { color: var(--role-featured-guest, #9b7ad4); }
.sw-userlist-item.role-featured-guest .sw-userlist-dot { background: var(--role-featured-guest, #9b7ad4); box-shadow: 0 0 5px var(--role-featured-guest-glow, rgba(155,122,212,0.4)); }
.sw-userlist-item.role-admin          { color: var(--role-admin, #d47a7a); }
.sw-userlist-item.role-admin          .sw-userlist-dot { background: var(--role-admin, #d47a7a); box-shadow: 0 0 5px var(--role-admin-glow, rgba(212,122,122,0.4)); }
.sw-userlist-item.role-staff          { color: var(--role-staff, #7ad49b); }
.sw-userlist-item.role-staff          .sw-userlist-dot { background: var(--role-staff, #7ad49b); box-shadow: 0 0 5px var(--role-staff-glow, rgba(122,212,155,0.4)); }
.sw-userlist-item.role-guest          { color: var(--text-dim); }

/* ── ERROR PAGE ─────────────────────────────────────────────── */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  gap: 16px;
}

.error-code {
  font-family: 'Cinzel', serif;
  font-size: 4rem;
  color: var(--accent-dark);
}

.error-msg { color: var(--text-dim); font-style: italic; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .chat-app {
    grid-template-columns: 1fr;
    grid-template-rows: 48px 1fr 64px;
    grid-template-areas:
      "header"
      "feed"
      "input";
  }

  .sidebar, .userlist { display: none; }
}


/* ── ROLE GROUPS (append to chat.css) ──────────────────────── */

/* Group header label */
.userlist-group-header {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 10px 16px 3px;
  user-select: none;
}

/* First group header — no top padding */
.userlist-group-header:first-child {
  padding-top: 4px;
}

/* Role-coloured dots and name tints */

.userlist-item.role-host .userlist-dot {
  background: var(--role-host, #d4a94a);
  box-shadow: 0 0 6px var(--role-host-glow, rgba(212, 169, 74, 0.4));
}
.userlist-item.role-host {
  color: var(--role-host, #d4a94a);
}

.userlist-item.role-cohost .userlist-dot {
  background: var(--role-cohost, #7a9bd4);
  box-shadow: 0 0 6px var(--role-cohost-glow, rgba(122, 155, 212, 0.4));
}
.userlist-item.role-cohost {
  color: var(--role-cohost, #7a9bd4);
}

.userlist-item.role-featured-guest .userlist-dot {
  background: var(--role-featured-guest, #9b7ad4);
  box-shadow: 0 0 6px var(--role-featured-guest-glow, rgba(155, 122, 212, 0.4));
}
.userlist-item.role-featured-guest {
  color: var(--role-featured-guest, #9b7ad4);
}

.userlist-item.role-admin .userlist-dot {
  background: var(--role-admin, #d47a7a);
  box-shadow: 0 0 6px var(--role-admin-glow, rgba(212, 122, 122, 0.4));
}
.userlist-item.role-admin {
  color: var(--role-admin, #d47a7a);
}

.userlist-item.role-staff .userlist-dot {
  background: var(--role-staff, #7ad49b);
  box-shadow: 0 0 6px var(--role-staff-glow, rgba(122, 212, 155, 0.4));
}
.userlist-item.role-staff {
  color: var(--role-staff, #7ad49b);
}

/* Guest uses the existing accent colour — no override needed */
.userlist-item.role-guest {
  color: var(--text-dim);
}


/* ── LOBBY ADDITIONS (append to chat.css) ───────────────────── */

/* Section labels */
.lobby-section-label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
  margin: 32px 0 12px;
  width: 100%;
  max-width: 960px;
}

/* Action buttons row */
.lobby-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  width: 100%;
  max-width: 960px;
}

.lobby-btn {
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}

.lobby-btn:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.lobby-btn--secondary {
  border-color: var(--border);
  color: var(--text-dim);
}

.lobby-btn--secondary:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--accent-glow);
}

.lobby-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lobby-btn--full {
  width: 100%;
  text-align: center;
  padding: 10px;
}

/* Private room cards — cursor pointer, no href */
.room-card--private {
  cursor: pointer;
}

/* ── LOBBY MODALS ────────────────────────────────────────────── */

.lobby-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lobby-modal[hidden] { display: none; }

.lobby-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.lobby-modal-panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: modalIn 0.15s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lobby-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lobby-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}

.lobby-modal-close:hover { color: var(--text); }

.lobby-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lobby-modal-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.lobby-modal-optional {
  font-family: inherit;
  font-size: 0.85em;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.lobby-modal-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.15s;
}

.lobby-modal-input:focus {
  border-color: var(--accent-dim);
}

.lobby-modal-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.lobby-modal-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.88rem;
  padding: 7px 10px;
  outline: none;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s;
}

.lobby-modal-select:focus { border-color: var(--accent-dim); }

.lobby-modal-toggle {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lobby-toggle-btn {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding: 6px 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.lobby-toggle-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.lobby-toggle-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.lobby-modal-error {
  font-size: 0.82rem;
  color: var(--error);
  font-style: italic;
  padding: 6px 10px;
  border: 1px solid var(--error);
  border-radius: 4px;
  background: rgba(158, 90, 90, 0.08);
}

.lobby-btn--danger {
  border-color: var(--error);
  color: var(--error);
}

.lobby-btn--danger:hover {
  background: rgba(158, 90, 90, 0.12);
  border-color: var(--error);
}

.lobby-btn--danger-outline {
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
  color: color-mix(in srgb, var(--error) 70%, var(--text-muted));
  font-size: 0.65rem;
}

.lobby-btn--danger-outline:hover {
  border-color: var(--error);
  color: var(--error);
  background: rgba(158, 90, 90, 0.08);
}

.lobby-modal-separator {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.lobby-modal-danger-text {
  font-size: 0.82rem;
  color: var(--error);
  margin: 0 0 10px;
  line-height: 1.4;
}

.lobby-modal-danger-actions {
  display: flex;
  gap: 8px;
}

.lobby-modal-danger-actions .lobby-btn {
  flex: 1;
  text-align: center;
  padding: 8px;
}

/* ── CHARACTER PICKER ───────────────────────────────────────── */
/* Panel slides up from the sidebar, same pattern as settings */

.cp-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  animation: panelUp 0.2s ease;
  max-height: 80vh;
  overflow-y: auto;
}

.cp-header {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.cp-active-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 4px 0 2px;
}

.cp-active-label strong {
  color: var(--accent);
  font-style: normal;
}

/* Character card */
.cp-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-card.cp-card--active {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.cp-card-name {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: var(--text);
  letter-spacing: 0.04em;
}

.cp-card-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.cp-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.cp-btn {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  padding: 4px 0;
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cp-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.cp-btn--play {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.cp-btn--play:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.cp-btn--delete {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--text-muted);
}

.cp-btn--delete:hover {
  border-color: var(--error, #e06c75);
  color: var(--error, #e06c75);
}

.cp-btn--rename {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--text-muted);
}

.cp-btn--rename:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cp-rename-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}

.cp-rename-form .cp-input {
  flex: 1;
  font-size: 0.75rem;
  padding: 4px 6px;
}

.cp-rename-form .cp-input--size {
  flex: 0 0 44px;
  width: 44px;
  text-align: center;
}

/* Empty state */
.cp-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 0;
  font-style: italic;
}

/* Limit indicator */
.cp-limit {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: right;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
}

/* Divider before create form */
.cp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* Create form */
.cp-create-title {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.cp-create-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 5px 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  font-family: inherit;
}

.cp-input:focus { border-color: var(--accent-dim); }
.cp-input::placeholder { color: var(--text-muted); }

.cp-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cp-input-row .cp-input {
  flex: 1;
  min-width: 0;
}

.cp-input-row label {
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.cp-error {
  font-size: 0.72rem;
  color: var(--error, #e06c75);
  min-height: 1em;
}

.cp-create-btn {
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  color: var(--accent);
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  padding: 6px 0;
  cursor: pointer;
  text-transform: uppercase;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}

.cp-create-btn:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.cp-create-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Delete confirmation inline */
.cp-confirm {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 0.65rem;
  color: var(--error, #e06c75);
  flex-wrap: wrap;
}

.cp-confirm span { flex: 1; }

.cp-confirm-yes,
.cp-confirm-no {
  background: none;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.65rem;
  padding: 2px 6px;
  cursor: pointer;
  font-family: inherit;
}

.cp-confirm-yes { color: var(--error, #e06c75); }
.cp-confirm-no  { color: var(--text-muted); border-color: var(--border); }
/* ── WORLD RAIL (design-029 P4 — World rooms, room_type 10) ─── */

.chat-app.world-room {
  grid-template-columns: 200px 1fr 340px 200px;
  grid-template-areas:
    "sidebar   header  header  userlist"
    "sidebar   feed    world   userlist"
    "sidebar   input   world   userlist";
}

.world-rail {
  grid-area: world;
  position: relative; /* positioning context for .scroll-jump-pill--world */
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
}

.world-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.world-map {
  margin: 0;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  line-height: 1.15;
  letter-spacing: 0.15em;
  color: var(--text);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}

.world-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
}

.world-line {
  color: var(--text);
  word-wrap: break-word;
}

.world-hint {
  padding: 6px 12px;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* ── SCROLL JUMP PILL ───────────────────────────────────────────
   Shown when new content arrives while the user has scrolled away from
   the bottom (see shared/scroll-utils.js's createStickyScroll) — click to
   jump back down. Same visual language as .mute-notice/.dodge-prompt.

   Default variant is absolutely positioned within a `position: relative`
   ancestor sized to the feed's own box (.world-rail, .sw-feed-wrap) —
   NOT the whole page, which is why this doesn't reuse .mute-notice's
   trick of centering on .chat-app: that only coincidentally lines up
   with the feed column in the non-world 3-column layout, and would be
   off-center in a World room's 4-column one. */
.scroll-jump-pill {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--bg-panel);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.scroll-jump-pill.visible { display: flex; }

/* #feed-jump-pill can't be a child of #chat-feed (chat.js's
   feed.innerHTML = '' on chat:history/chat:clear would wipe it out — see
   room.ejs's comment above it; chat.ejs carried the same note but was dead
   code and has been deleted, 2026-09-04), so it can't use a position:relative
   ancestor scoped to the feed alone without a new wrapper element. Instead
   it's a grid sibling of .chat-feed sharing the same "feed" grid-area (a
   standard CSS Grid stacking technique) — this scopes it correctly to the
   feed column's real box in both the normal 3-column and World-room
   4-column .chat-app layouts. */
.scroll-jump-pill--feed {
  position: static;
  transform: none;
  grid-area: feed;
  align-self: end;
  justify-self: center;
  margin-bottom: 16px;
}

.scroll-jump-pill--world { bottom: 40px; } /* clear .world-hint below it */

/* Age-gate overlay — see partials/age-gate-overlay.ejs */
#age-gate-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#age-gate-overlay[hidden] { display: none; }
#age-gate-overlay .modal {
  max-width: 420px;
  padding: 2rem;
  border: 1px solid var(--border, #1e3a55);
  border-radius: 8px;
  background: var(--bg-panel, #111c2a);
  color: var(--text, #c8daea);
  text-align: center;
}
#age-gate-overlay .modal p { margin: 0 0 1rem; }
#age-gate-overlay .modal button {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  border: 1px solid var(--accent, #3a9bd5);
  background: var(--accent, #3a9bd5);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}