:root { --bg: #12141c; }
* { margin: 0; box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: system-ui, sans-serif; }
#stage { display: block; position: fixed; inset: 0; background: #1b1e2b; cursor: pointer; }
.banner {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  background: #e67e22; color: #fff; padding: 6px 14px; border-radius: 999px;
  font-size: 14px; z-index: 10;
}
/* Utility: always wins over a component's own `display` (e.g. .chatlog/.panel,
   which are defined later in this file and would otherwise override it). */
.hidden { display: none !important; }

/* Toolbar: the only always-visible chrome. Everything else is behind a button. */
.toolbar {
  position: fixed;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
  z-index: 20;
}
.tbtn {
  width: 40px;
  height: 40px;
  border: 1px solid #3b4066;
  border-radius: 10px;
  background: #1b1e2b;
  color: #e8ebf2;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.tbtn:hover { border-color: #ffd84d; }
.tbtn.active { border-color: #ffd84d; background: #262a3d; }

/* Slide-out settings panel. */
.panel {
  position: fixed;
  top: 60px;
  left: 12px;
  width: 260px;
  padding: 14px 16px;
  background: #1b1e2b;
  border: 1px solid #3b4066;
  border-radius: 12px;
  color: #e8ebf2;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.panel-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: #cdd3e0; }
.panel label { display: block; font-size: 12px; color: #8b93a7; margin: 10px 0 4px; }
.panel input[type="text"] {
  width: 100%; padding: 6px 8px; border: 1px solid #3b4066; border-radius: 8px;
  background: #12141c; color: #e8ebf2; font-size: 13px; outline: none;
}
.panel input[type="text"]:focus { border-color: #ffd84d; }
.color-input {
  width: 100%; height: 34px; padding: 2px; border: 1px solid #3b4066;
  border-radius: 8px; background: #12141c; cursor: pointer;
}

/* Closable modal (e.g. :commands). */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  z-index: 40;
}
.modal {
  position: relative;
  min-width: 280px;
  max-width: 92vw;
  max-height: 80vh;
  overflow: auto;
  padding: 18px 20px;
  background: #1b1e2b;
  border: 1px solid #3b4066;
  border-radius: 14px;
  color: #e8ebf2;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.modal-close {
  position: absolute; top: 8px; right: 10px;
  border: none; background: transparent; color: #8b93a7;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.modal-close:hover { color: #e8ebf2; }
.modal-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; }
.modal-list dt { color: #ffd84d; font-family: ui-monospace, monospace; white-space: nowrap; }
.modal-list dd { color: #cdd3e0; margin: 0; }
.modal-message { color: #cdd3e0; font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.modal-button {
  background: #ffd84d; color: #1a1c2c; border: none; border-radius: 6px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.modal-button:hover { background: #ffe27a; }

/* Lower-right card (item / user menus) */
.lr-card {
  position: fixed; right: 12px; bottom: 56px;
  min-width: 180px; max-width: 300px;
  background: #20233a; border: 1px solid #3a3f5f; border-radius: 10px;
  padding: 14px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  color: #e8ebf2; z-index: 40;
}
.lr-card-title { font-weight: 700; font-size: 15px; padding-right: 22px; }
.uc-crown { cursor: help; }
.lr-card-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  color: #8b93a7; font-size: 18px; line-height: 1; cursor: pointer;
}
.lr-card-close:hover { color: #e8ebf2; }
.lr-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lr-card-btn {
  background: #3a3f5f; color: #e8ebf2; border: none; border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.lr-card-btn:hover { background: #4a5075; }

/* User / profile card */
.user-card { display: flex; gap: 12px; max-width: 360px; }
.uc-avatar {
  flex: 0 0 84px; align-self: stretch; min-height: 96px;
  background: #2c3252; border-radius: 8px; /* lighter panel than the card */
  display: flex; align-items: center; justify-content: center;
}
.uc-body { flex: 1 1 auto; min-width: 0; }
.uc-info { margin: 8px 0; font-size: 12px; display: grid; gap: 3px; }
.uc-row { display: flex; justify-content: space-between; gap: 12px; }
.uc-label { color: #8b93a7; }
.uc-val { color: #cdd3e0; }
.uc-bio-label { color: #8b93a7; font-size: 12px; margin: 6px 0 4px; }
.uc-bio-view { font-size: 13px; color: #e8ebf2; word-break: break-word; }
.uc-bio-view a { color: #7aa7ff; }
.uc-bio-edit {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 46px;
  background: #12141f; color: #e8ebf2; border: 1px solid #3a3f5f; border-radius: 6px;
  padding: 6px 8px; font-size: 13px; font-family: inherit; margin: 4px 0 6px;
}

/* Floating avatar context menu (emotes / respect). */
.popup-menu {
  position: fixed;
  z-index: 30;
  min-width: 140px;
  padding: 4px;
  background: #1b1e2b;
  border: 1px solid #3b4066;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}
.popup-item {
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #e8ebf2;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.popup-item:hover:not(:disabled) { background: #2c314a; }
.popup-item:disabled { color: #6b7089; cursor: default; }
.popup-header {
  padding: 6px 10px 8px; font-weight: 700; color: #fff; font-size: 13px;
  border-bottom: 1px solid #3b4066; margin-bottom: 4px;
}
.popup-parent::after { content: '▶'; float: right; margin-left: 14px; opacity: 0.55; font-size: 10px; }
.popup-parent.open { background: #2c314a; }

.chatlog {
  position: fixed;
  left: 12px;
  bottom: 56px;
  width: 260px;
  max-height: 180px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  font-size: 12px;
  color: #cdd3e0;
  pointer-events: none; /* never blocks click-to-walk on the board */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.log-line { line-height: 1.35; word-break: break-word; }
.log-system { color: #8b93a7; font-style: italic; }
.chatlog a { color: #7aa7ff; pointer-events: auto; } /* links stay clickable */
.chatinput {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 360px;
  max-width: 80vw;
  padding: 8px 12px;
  border: 1px solid #3b4066;
  border-radius: 999px;
  background: #1b1e2b;
  color: #e8ebf2;
  font-size: 14px;
  outline: none;
  pointer-events: auto;
}
.chatinput:focus { border-color: #ffd84d; }

/* Admin login page (/admin) */
.admin-login {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: #e8ebf2;
}
.admin-login h1 { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; }
.admin-login input {
  width: 240px; padding: 10px 12px; border: 1px solid #3b4066; border-radius: 8px;
  background: #12141c; color: #e8ebf2; font-size: 15px; outline: none;
}
.admin-login input:focus { border-color: #ffd84d; }
.admin-login button {
  width: 240px; padding: 10px 12px; border: none; border-radius: 8px;
  background: #ffd84d; color: #1a1c2c; font-size: 15px; font-weight: 600; cursor: pointer;
}
.admin-login button:hover { background: #ffe27a; }
.admin-err { color: #ff8080; font-size: 13px; min-height: 16px; }

/* Admin chat bubble (admins have no avatar): black bg, white text, yellow outline. */
.admin-bubble {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  max-width: 60vw; padding: 8px 14px; border-radius: 12px;
  background: #000; color: #fff; border: 2px solid #ffd84d;
  font-size: 14px; text-align: center; z-index: 45;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.admin-bubble a { color: #ffd84d; }

/* Admin furniture palette (admin mode only). */
.admin-palette {
  position: fixed; top: 60px; right: 12px; width: 168px;
  padding: 12px 14px; background: #1b1e2b; border: 1px solid #3b4066;
  border-radius: 12px; color: #e8ebf2; z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.admin-palette-title { font-size: 13px; font-weight: 600; color: #cdd3e0; margin-bottom: 8px; }
.admin-palette-item {
  display: block; width: 100%; margin: 6px 0; padding: 8px 10px;
  border: 1px solid #3b4066; border-radius: 8px; background: #262a3d; color: #e8ebf2;
  font-size: 13px; text-align: left; cursor: grab; user-select: none;
}
.admin-palette-item:hover { border-color: #ffd84d; }
.admin-palette-item:active { cursor: grabbing; }
.admin-palette-hint { margin-top: 8px; font-size: 11px; color: #8b93a7; line-height: 1.4; }