/* Classic Win95/98 IRC shell (no DCC image panel) */

html,
body.mirc {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body.mirc {
  --mirc-face: #c0c0c0;
  --mirc-hi: #ffffff;
  --mirc-lo: #808080;
  --mirc-dk: #404040;
  --mirc-title: #000080;
  --mirc-title2: #1084d0;
  --mirc-log: #07080c;
  --mirc-log-pattern:
    radial-gradient(rgba(255, 255, 255, 0.035) 0.7px, transparent 0.8px),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(255, 255, 255, 0.018) 3px,
      rgba(255, 255, 255, 0.018) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 11px,
      rgba(120, 140, 180, 0.03) 11px,
      rgba(120, 140, 180, 0.03) 12px
    ),
    linear-gradient(180deg, #0a0c12 0%, #06070a 55%, #050608 100%);
  --mirc-log-pattern-size: 14px 14px, 100% 4px, 12px 100%, 100% 100%;
  --mirc-join: #1a6b28;
  --mirc-part: #1a6b28;
  --mirc-presence: #1a6b28;
  --mirc-emote: #3d5f9e;
  --mirc-system: #3d5f9e;
  --mirc-action: #3d5f9e;
  --mirc-ts: #c0c0c0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #008080;
  color: #000;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, sans-serif;
  font-size: 11px;
}

/* Slim site nav above the fake client */
body.mirc .topnav {
  flex: 0 0 auto;
  margin: 0;
  background: #000;
  box-shadow: none;
}

body.mirc .topnav-inner {
  padding: 2px 8px;
  min-height: 22px;
}

body.mirc .page,
body.mirc .mirc-note {
  display: none;
}

.mirc-desktop {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.mirc-window {
  /* Desktop-app sized: stop stretching into goofy ultrawide layouts. */
  --mirc-window-w: 1100px;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--mirc-window-w);
  max-width: calc(100% - 16px);
  height: calc(100% - 16px);
  min-height: 0;
  margin: 0;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow: 2px 2px 0 #000;
}

.mirc-window.is-placed {
  transform: none;
}

.mirc-window.is-dragging {
  user-select: none;
}

body.mirc.is-editor:not(.is-editor-float) .mirc-window {
  --mirc-window-w: min(1480px, calc(100% - 16px));
}

/* Editor float: chat left (~58%) + Script Editor right (~42%) on cold start */
body.mirc.is-editor-float .mirc-window {
  left: 8px;
  top: 8px;
  transform: none;
  width: calc(58% - 12px);
  max-width: none;
  height: calc(100% - 16px);
  resize: both;
  overflow: hidden;
}

.mirc-chrome {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mirc-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 4px;
  background: linear-gradient(90deg, var(--mirc-title) 0%, var(--mirc-title2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  user-select: none;
  cursor: move;
}

.mirc-titlebar .controls {
  cursor: default;
}

.mirc-title-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.mirc-appicon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background:
    linear-gradient(135deg, #fff 0 2px, transparent 2px),
    linear-gradient(45deg, #80c0ff 25%, #004080 25% 50%, #80c0ff 50% 75%, #004080 75%);
  background-size: 100% 100%, 6px 6px;
  border: 1px solid #000;
}

/* Titlebar VeilFall mark → site links (About / Wiki / …) */
.mirc-title-site {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.mirc-title-site-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 18px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: #1a1028;
  color: #fff;
  cursor: pointer;
  font: 700 11px "MS Sans Serif", Tahoma, sans-serif;
}

.mirc-title-site-btn:hover,
.mirc-title-site-btn:focus-visible,
.mirc-title-site.is-open .mirc-title-site-btn {
  outline: 1px dotted #fff;
  outline-offset: -2px;
}

.mirc-title-site-btn img {
  display: none;
}

.mirc-title-site-label {
  display: inline;
}

.mirc-title-site-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 60;
  min-width: 9.5em;
  margin: 0;
  padding: 2px;
  list-style: none;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  color: #000;
}

.mirc-title-site-list[hidden] {
  display: none;
}

.mirc-title-site-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 18px 4px 10px;
  border: 0;
  background: transparent;
  color: #000;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mirc-title-site-item:hover,
.mirc-title-site-item:focus-visible {
  background: var(--mirc-title);
  color: #fff;
  outline: none;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mirc-titlebar .controls {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.mirc-titlebar .btn {
  box-sizing: border-box;
  width: 16px;
  height: 14px;
  border: 1px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: var(--mirc-face);
  color: #000;
  font: 700 10px/12px "MS Sans Serif", Tahoma, sans-serif;
  text-align: center;
  cursor: default;
}

.mirc-titlebar .btn.close {
  font-weight: 700;
}

.mirc-menubar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 2px 2px 3px;
  background: var(--mirc-face);
  border-bottom: 1px solid var(--mirc-lo);
  color: #000;
  font-size: 11px;
  user-select: none;
  position: relative;
  z-index: 40;
}

.mirc-menu-item,
.mirc-menubar span {
  padding: 2px 8px;
  cursor: default;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.2;
}

button.mirc-menu-item {
  cursor: pointer;
}

button.mirc-menu-item:hover:not(:disabled),
button.mirc-menu-item:focus-visible:not(:disabled),
.mirc-menu-drop.is-open > .mirc-menu-item {
  background: var(--mirc-title);
  color: #fff;
  outline: none;
}

button.mirc-menu-item:disabled,
.mirc-menu-item.is-placeholder:disabled {
  color: #808080;
  cursor: default;
}

button.mirc-menu-item:disabled:hover {
  background: transparent;
  color: #808080;
}

.mirc-menu-drop {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Users dropdown: same chrome as Channels / Options menus. */
.mirc-users-pop,
.mirc-menu-channels-list,
.mirc-menu-options-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 12em;
  max-height: min(320px, 50vh);
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow: auto;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.mirc-users-pop[hidden],
.mirc-menu-channels-list[hidden],
.mirc-menu-options-list[hidden] {
  display: none !important;
}

.mirc-users-pop #mirc-nicklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mirc-users-pop .nick-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.mirc-users-pop .nick-label {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 3px 18px 3px 8px;
  border: 0;
  background: transparent;
  color: #000;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mirc-users-pop .nick-row:hover,
.mirc-users-pop .nick-row:focus-within {
  background: var(--mirc-title);
}

.mirc-users-pop .nick-row:hover .nick-label,
.mirc-users-pop .nick-row:focus-within .nick-label,
.mirc-users-pop .nick-row:hover .op-mark,
.mirc-users-pop .nick-row:focus-within .op-mark {
  color: #fff;
}

.mirc-users-pop .op-mark {
  flex: 0 0 auto;
  padding-left: 8px;
  color: #008000;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  font-weight: 700;
}

.mirc-users-pop .mirc-avatar {
  display: none;
}

.mirc-menu-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  width: 100%;
  margin: 0;
  padding: 3px 10px 3px 8px;
  border: 0;
  background: transparent;
  color: #000;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.mirc-menu-option-item:hover,
.mirc-menu-option-item:focus-visible {
  background: var(--mirc-title);
  color: #fff;
  outline: none;
}

.mirc-opt-state {
  min-width: 2.2em;
  text-align: right;
  font-weight: 700;
}

.mirc-menu-channel-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 3px 18px 3px 8px;
  border: 0;
  background: transparent;
  color: #000;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.mirc-menu-channel-item:hover,
.mirc-menu-channel-item:focus-visible {
  background: var(--mirc-title);
  color: #fff;
  outline: none;
}

.mirc-menu-channel-item.is-active {
  font-weight: 700;
}

.mirc-menu-channel-item.is-active::before {
  content: "\2713";
  display: inline-block;
  width: 0;
  margin-left: -12px;
  margin-right: 12px;
}

/* Player chrome no longer uses the toolbar row (Home/Users live in menubar). */
.mirc-toolbar {
  display: none !important;
}

.mirc-tool {
  padding: 2px 10px;
  border: 1px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: var(--mirc-face);
  color: #000;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  cursor: default;
}

button.mirc-tool {
  cursor: pointer;
}

button.mirc-tool:active {
  border-color: var(--mirc-dk) var(--mirc-hi) var(--mirc-hi) var(--mirc-dk);
  padding: 3px 9px 1px 11px;
}

.mirc-toolbar .mirc-tool-end {
  margin-left: auto;
}

.mirc-work {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
  background: var(--mirc-face);
}

.mirc-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  min-height: 0;
  min-width: 0;
  padding: 4px;
  background: var(--mirc-face);
}

body.mirc.is-editor:not(.is-editor-float) .mirc-body {
  flex: 1 1 58%;
}

.mirc-editor {
  flex: 0 0 42%;
  display: none;
  flex-direction: column;
  min-width: 320px;
  max-width: 640px;
  min-height: 0;
  margin: 4px 4px 4px 0;
  border: 2px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: var(--mirc-face);
  box-shadow: inset 1px 1px 0 var(--mirc-dk);
}

body.mirc.is-editor:not(.is-editor-float) .mirc-editor {
  display: flex;
}

/* Floating companion: full width under #mirc-window (chat_edit.html) */
.mirc-plates-pane {
  position: fixed;
  z-index: 88;
  left: 8px;
  bottom: 8px;
  top: auto;
  right: auto;
  display: none;
  flex-direction: column;
  width: calc(58% - 16px);
  height: 140px;
  max-height: min(220px, 28vh);
  min-width: 320px;
  min-height: 110px;
  overflow: hidden;
  resize: both;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow:
    3px 3px 0 rgba(0, 0, 0, 0.4),
    inset 1px 1px 0 var(--mirc-hi),
    inset -1px -1px 0 var(--mirc-lo);
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
}

.mirc-plates-pane.is-open {
  display: flex;
}

.mirc-plates-pane[hidden] {
  display: none !important;
}

.mirc-plates-pane.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.mirc-plates-pane-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 6px;
  background: linear-gradient(90deg, var(--mirc-title) 0%, var(--mirc-title2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.mirc-plates-pane.is-dragging .mirc-plates-pane-title {
  cursor: grabbing;
}

.mirc-plates-pane-title-label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.mirc-plates-pane-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 400;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.mirc-plates-pane-controls {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
}

.mirc-plates-pane-controls .btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  padding: 0;
  border: 1px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: var(--mirc-face);
  color: #000;
  font: 700 10px/12px "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.mirc-plates-pane-controls .btn.close:active {
  border-color: var(--mirc-dk) var(--mirc-hi) var(--mirc-hi) var(--mirc-dk);
}

.mirc-plates-cols {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 22px minmax(72px, 1fr) minmax(90px, 1.2fr) minmax(72px, 0.9fr);
  gap: 4px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--mirc-lo);
  background: #ece9d8;
  font-weight: 700;
  color: #404040;
}

.mirc-plates-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.mirc-plates-row {
  display: grid;
  grid-template-columns: 22px minmax(72px, 1fr) minmax(90px, 1.2fr) minmax(72px, 0.9fr);
  gap: 4px;
  align-items: center;
  padding: 3px 6px;
  border-bottom: 1px solid #dfdfdf;
  cursor: default;
}

.mirc-plates-hotkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 18px;
  height: 16px;
  border: 1px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: #ece9d8;
  color: #202020;
  font: 700 10px/14px "MS Sans Serif", Tahoma, sans-serif;
}

.mirc-plates-hotkey.is-empty {
  visibility: hidden;
  border-color: transparent;
  background: transparent;
}

.mirc-plates-row.is-selected .mirc-plates-hotkey {
  background: #fff;
  color: #000;
}

.mirc-plates-row:nth-child(even) {
  background: #f4f4f4;
}

.mirc-plates-row.is-selected {
  background: #000080;
  color: #fff;
}

.mirc-plates-row.is-selected .mirc-mood-pick,
.mirc-plates-row.is-selected .mirc-plates-framing {
  background: #fff;
  color: #000;
}

.mirc-plates-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.mirc-plates-empty {
  padding: 10px 8px;
  color: #808080;
}

.mirc-plates-framing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 20px;
  margin: 0;
  padding: 0 4px;
  border: 1px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: #fff;
  color: #000;
  font: inherit;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirc-plates-framing:hover,
.mirc-plates-framing:focus-visible {
  background: #e8f0ff;
  outline: 1px dotted #000;
  outline-offset: -2px;
}

.mirc-plates-framing.is-custom {
  font-style: italic;
  color: #404040;
}

.mirc-framing-pop {
  position: fixed;
  z-index: 100;
  display: none;
  flex-direction: column;
  min-width: 120px;
  padding: 2px;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.mirc-framing-pop.is-open {
  display: flex;
}

.mirc-framing-pop[hidden] {
  display: none !important;
}

.mirc-framing-pop-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 3px 8px;
  border: 0;
  background: transparent;
  color: #000;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mirc-framing-pop-item:hover,
.mirc-framing-pop-item.is-selected {
  background: #000080;
  color: #fff;
}

.mirc-framing-pop-item.is-custom {
  font-style: italic;
  opacity: 0.85;
}

/* Floating companion: strip editor + JSON (chat_edit.html) */
.mirc-edit-pane {
  position: fixed;
  z-index: 90;
  top: 40px;
  right: 8px;
  left: auto;
  display: none;
  flex-direction: column;
  width: calc(42% - 12px);
  height: calc(100vh - 48px);
  min-width: 360px;
  min-height: 360px;
  max-width: 98vw;
  max-height: 94vh;
  overflow: hidden;
  resize: both;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.45),
    inset 1px 1px 0 var(--mirc-hi),
    inset -1px -1px 0 var(--mirc-lo);
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
}

.mirc-edit-pane.is-open {
  display: flex;
}

.mirc-edit-pane[hidden] {
  display: none !important;
}

.mirc-edit-pane.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.mirc-edit-pane-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 6px;
  background: linear-gradient(90deg, var(--mirc-title) 0%, var(--mirc-title2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.mirc-edit-pane.is-dragging .mirc-edit-pane-title {
  cursor: grabbing;
}

.mirc-edit-pane-title-label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.mirc-edit-pane-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 400;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.mirc-edit-pane-controls {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
}

.mirc-edit-pane-controls .btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  padding: 0;
  border: 1px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: var(--mirc-face);
  color: #000;
  font: 700 10px/12px "MS Sans Serif", Tahoma, sans-serif;
  text-align: center;
  cursor: default;
}

.mirc-edit-pane-controls .btn.close {
  cursor: pointer;
}

.mirc-edit-pane-controls .btn.close:active {
  border-color: var(--mirc-dk) var(--mirc-hi) var(--mirc-hi) var(--mirc-dk);
}

.mirc-edit-pane-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  min-width: 0;
  padding: 4px;
  background: var(--mirc-face);
}

.mirc-edit-pane-main {
  flex: 1 1 62%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  min-width: 0;
}

.mirc-edit-pane .mirc-editor {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.mirc-json-pop {
  position: fixed;
  z-index: 98;
  top: 12vh;
  left: 2vw;
  display: none;
  flex-direction: column;
  width: min(420px, 36vw);
  height: min(70vh, 720px);
  min-width: 280px;
  min-height: 220px;
  max-width: 90vw;
  max-height: 92vh;
  overflow: hidden;
  resize: both;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.45),
    inset 1px 1px 0 var(--mirc-hi),
    inset -1px -1px 0 var(--mirc-lo);
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
}

.mirc-json-pop.is-open {
  display: flex;
}

.mirc-json-pop[hidden] {
  display: none !important;
}

.mirc-json-pop.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.mirc-json-pop-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 6px;
  background: linear-gradient(90deg, var(--mirc-title) 0%, var(--mirc-title2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.mirc-json-pop-title-label {
  flex: 0 0 auto;
}

.mirc-json-pop .mirc-json-hint {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

.mirc-json-pop-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.mirc-json-pop-controls .mirc-tool {
  color: #000;
}

.mirc-json-pop .mirc-json-pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: var(--mirc-face);
  box-shadow: none;
}

.mirc-mood-pop {
  position: fixed;
  z-index: 99;
  top: 14vh;
  left: 4vw;
  display: none;
  flex-direction: column;
  width: min(520px, 92vw);
  height: min(520px, 78vh);
  min-width: 280px;
  min-height: 220px;
  max-width: 96vw;
  max-height: 92vh;
  overflow: hidden;
  resize: both;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.45),
    inset 1px 1px 0 var(--mirc-hi),
    inset -1px -1px 0 var(--mirc-lo);
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
}

.mirc-mood-pop.is-open {
  display: flex;
}

.mirc-mood-pop[hidden] {
  display: none !important;
}

.mirc-mood-pop.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.mirc-mood-pop.is-dragging .mirc-mood-pop-title {
  cursor: grabbing;
}

.mirc-mood-pop-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 6px;
  background: linear-gradient(90deg, var(--mirc-title) 0%, var(--mirc-title2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.mirc-mood-pop-title-label {
  flex: 0 0 auto;
}

.mirc-mood-hint {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
}

.mirc-mood-pop-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.mirc-mood-pop-controls .mirc-tool {
  color: #000;
}

.mirc-mood-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 2px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  margin: 4px;
  box-shadow: inset 1px 1px 0 var(--mirc-dk);
}

.mirc-mood-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mirc-mood-group-title {
  margin: 0;
  padding: 2px 4px;
  font: bold 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
  background: var(--mirc-face);
  border: 1px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
}

.mirc-mood-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
}

.mirc-mood-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 4px 3px 5px;
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: var(--mirc-face);
  color: #000;
  font: 10px "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
  text-align: center;
}

.mirc-mood-tile:hover,
.mirc-mood-tile:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -3px;
  background: #e8e4d8;
}

.mirc-mood-tile.is-selected {
  border-color: var(--mirc-dk) var(--mirc-hi) var(--mirc-hi) var(--mirc-dk);
  background: #c3d0e8;
  box-shadow: inset 1px 1px 0 var(--mirc-lo);
}

.mirc-mood-tile-face {
  width: 64px;
  height: 64px;
  object-fit: cover;
  image-rendering: auto;
  background: #808080;
  border: 1px solid var(--mirc-dk);
}

.mirc-mood-tile-face.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #404040;
  font-size: 18px;
  font-weight: 700;
}

.mirc-mood-empty {
  grid-column: 1 / -1;
  margin: 12px 4px;
  color: #404040;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
}

.mirc-mood-pick {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0 2px 0 1px;
  border: 1px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: #fff;
  color: #000;
  font: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 1px 1px 0 #fff;
}

.mirc-mood-pick:hover,
.mirc-mood-pick:focus-visible {
  background: #e8f0ff;
  outline: 1px dotted #000;
  outline-offset: -2px;
}

.mirc-mood-pick-face {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  object-fit: cover;
  background: #c0c0c0;
  border: 1px solid var(--mirc-dk);
}

.mirc-mood-pick-face.is-empty {
  display: inline-block;
  background:
    linear-gradient(45deg, #c0c0c0 25%, #a0a0a0 25%, #a0a0a0 50%, #c0c0c0 50%, #c0c0c0 75%, #a0a0a0 75%);
  background-size: 6px 6px;
}

.mirc-mood-pick-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirc-editor-row.is-selected .mirc-mood-pick {
  background: #fff;
}

.mirc-edit-pane .mirc-editor-row .mirc-mood-pick {
  font-size: 10px;
  height: 17px;
}

.mirc-stage-panel {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  min-width: 0;
  border: 2px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: var(--mirc-face);
  box-shadow: inset 1px 1px 0 var(--mirc-dk);
}

.mirc-stage-panel-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--mirc-lo);
  background: #d4d0c8;
}

.mirc-stage-panel-label {
  font-weight: 700;
  margin-right: 2px;
}

.mirc-stage-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.mirc-stage-field > span {
  color: #404040;
}

.mirc-stage-field select,
.mirc-stage-field input[type="text"],
.mirc-stage-field input[type="number"] {
  box-sizing: border-box;
  min-width: 0;
  padding: 1px 3px;
  border: 1px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: #fff;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
}

.mirc-stage-field select {
  min-width: 110px;
}

.mirc-stage-field input[type="text"] {
  width: 96px;
}

.mirc-stage-field-gutter input {
  width: 64px;
}

.mirc-stage-panel-hint {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: #606060;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirc-stage-cols,
.mirc-stage-row {
  display: grid;
  grid-template-columns: 88px 78px 58px 68px 88px 68px 68px 48px 68px;
  gap: 3px;
  align-items: center;
}

.mirc-stage-panel:not(.is-jrpg) .mirc-stage-cols,
.mirc-stage-panel:not(.is-jrpg) .mirc-stage-row {
  grid-template-columns: 100px 90px 64px 78px 1fr;
}

.mirc-stage-panel:not(.is-jrpg) .mirc-stage-jrpg-col,
.mirc-stage-panel:not(.is-jrpg) .mirc-stage-jrpg-cell {
  display: none;
}

.mirc-stage-cols {
  flex: 0 0 auto;
  padding: 3px 4px;
  border-bottom: 1px solid var(--mirc-lo);
  background: #d4d0c8;
  color: #000;
  font-weight: 700;
  user-select: none;
}

.mirc-stage-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #fff;
  box-shadow: inset 1px 1px 0 var(--mirc-lo);
}

.mirc-stage-row {
  padding: 2px 4px;
  border-bottom: 1px solid #dfdfdf;
  background: #fff;
}

.mirc-stage-row:nth-child(even) {
  background: #f4f4f4;
}

.mirc-stage-row .mirc-stage-nick {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirc-stage-row input,
.mirc-stage-row select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1px 2px;
  border: 1px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: #fff;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
}

.mirc-stage-row input:focus,
.mirc-stage-row select:focus,
.mirc-stage-field select:focus,
.mirc-stage-field input:focus {
  outline: 1px dotted #000;
  outline-offset: -1px;
}

.mirc-stage-empty {
  padding: 10px 8px;
  color: #808080;
  font-style: italic;
}

.mirc-stage-nudge {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--mirc-lo);
  background: #ece9d8;
}

.mirc-stage-nudge[hidden] {
  display: none !important;
}

.mirc-stage-panel:not(.has-vn-levels) .mirc-stage-cols-v2 > span:nth-child(6) {
  visibility: hidden;
}

.mirc-stage-level-na {
  color: #808080;
  font-size: 11px;
  align-self: center;
}

.mirc-stage-nudge-label {
  font-weight: 700;
  margin-right: 2px;
}

.mirc-stage-panel.is-v2 .mirc-stage-cols:not(.mirc-stage-cols-v2) {
  display: none;
}

.mirc-stage-panel.is-v2 .mirc-stage-cols-v2 {
  display: grid;
  grid-template-columns: 22px 64px 78px 110px 68px 58px 50px 42px 42px 36px minmax(90px, 1fr);
}

.mirc-stage-panel.is-v2 .mirc-stage-row-v2 {
  display: grid;
  grid-template-columns: 22px 64px 78px 110px 68px 58px 50px 42px 42px 36px minmax(90px, 1fr);
  gap: 3px;
  align-items: center;
  padding: 2px 4px;
  border-bottom: 1px solid #dfdfdf;
  background: #fff;
  cursor: default;
}

.mirc-stage-panel.is-v2 .mirc-stage-row-v2 .mirc-mood-pick {
  height: 20px;
}

.mirc-stage-panel.is-v2 .mirc-stage-row-v2.is-selected .mirc-mood-pick {
  background: #fff;
  color: #000;
}

.mirc-stage-panel.is-v2 .mirc-stage-row-v2 input[data-ent-field="flipX"] {
  width: 16px;
  height: 16px;
  margin: 0 auto;
  justify-self: center;
}

.mirc-stage-del {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid;
  border-color: #808080 #404040 #404040 #808080;
  background: #c0c0c0;
  color: #800000;
  font: 700 12px/14px "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.mirc-stage-del:active {
  border-color: #404040 #808080 #808080 #404040;
}

.mirc-stage-footer {
  flex: 0 0 auto;
  display: none;
  padding: 4px 6px;
  border-top: 1px solid var(--mirc-lo);
  background: #ece9d8;
}

.mirc-stage-panel.is-v2 .mirc-stage-footer {
  display: flex;
}

.mirc-stage-footer[hidden] {
  display: none !important;
}

.mirc-stage-panel.is-v2 .mirc-stage-row-v2:nth-child(even) {
  background: #f4f4f4;
}

.mirc-stage-panel.is-v2 .mirc-stage-row-v2.is-selected {
  background: #000080;
  color: #fff;
}

.mirc-stage-panel.is-v2 .mirc-stage-row-v2.is-selected input,
.mirc-stage-panel.is-v2 .mirc-stage-row-v2.is-selected select {
  color: #000;
}

.mirc-json-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-bottom: 1px solid var(--mirc-lo);
  background: var(--mirc-face);
}

.mirc-json-toolbar-label {
  font-weight: 700;
  margin-right: 4px;
}

.mirc-json-hint {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #404040;
}

.mirc-json-toolbar .mirc-tool.is-active {
  border-color: var(--mirc-dk) var(--mirc-hi) var(--mirc-hi) var(--mirc-dk);
  padding: 3px 9px 1px 11px;
  background: #d4d0c8;
}

.mirc-json-view {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  background: #1e1e1e;
  color: #d4d4d4;
  border-top: 1px solid var(--mirc-hi);
  box-shadow: inset 1px 1px 0 #000;
  font: 12px/1.45 "Consolas", "Courier New", Courier, monospace;
  white-space: pre;
  tab-size: 2;
  user-select: text;
  -webkit-user-select: text;
}

.mirc-json-view .jk {
  color: #9cdcfe;
}

.mirc-json-view .js {
  color: #ce9178;
}

.mirc-json-view .jn {
  color: #b5cea8;
}

.mirc-json-view .jb {
  color: #569cd6;
}

.mirc-json-view .jl {
  color: #569cd6;
}

.mirc-json-view .jp {
  color: #d4d4d4;
}

.mirc-json-view .mirc-json-line {
  display: block;
  margin: 0 -10px;
  padding: 0 10px;
  border-left: 3px solid transparent;
}

.mirc-json-view .mirc-json-line.is-active,
.mirc-json-view .mirc-json-scene.is-active {
  background: rgba(0, 120, 215, 0.28);
  border-left-color: #3c9cff;
}

.mirc-json-view .mirc-json-scene {
  display: block;
  margin: 0 -10px;
  padding: 0 10px;
  border-left: 3px solid transparent;
}

.mirc-json-view .mirc-json-empty {
  color: #808080;
  font-style: italic;
}

.mirc-edit-pane-status {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-top: 1px solid var(--mirc-hi);
  background: var(--mirc-face);
  color: #000;
  font-size: 11px;
}

@media (min-width: 1100px) {
  .mirc-edit-pane-main {
    flex-direction: row;
  }

  .mirc-edit-pane .mirc-editor {
    flex: 1 1 56%;
  }

  .mirc-edit-pane .mirc-json-pane {
    flex: 1 1 44%;
    min-height: 0;
  }
}

.mirc-editor-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 6px;
  background: linear-gradient(90deg, var(--mirc-title) 0%, var(--mirc-title2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  user-select: none;
}

.mirc-editor-hint {
  font-weight: 400;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirc-editor-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  border-bottom: 1px solid var(--mirc-lo);
  background: var(--mirc-face);
}

.mirc-editor-cols,
.mirc-editor-row {
  display: grid;
  grid-template-columns: 18px 24px 56px 76px 96px minmax(72px, 1fr) 68px 40px minmax(148px, 1.35fr) 22px;
  gap: 2px;
  align-items: center;
}

.mirc-editor-target-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.mirc-editor-target-wrap input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.mirc-editor-target-wrap.is-prop-pick select[data-field="propPick"] {
  flex: 1 1 52%;
  min-width: 0;
  max-width: 58%;
}

.mirc-editor-target-wrap.is-prop-pick input[type="text"] {
  flex: 1 1 42%;
}

.mirc-editor-bgm-up {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 4px;
  border: 1px solid var(--mirc-lo);
  background: var(--mirc-face);
  color: #000;
  font: 700 10px/1.4 Tahoma, sans-serif;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 var(--mirc-hi);
}

.mirc-editor-bgm-up:hover {
  background: #ece9d8;
}

.mirc-editor-bgm-up:disabled {
  opacity: 0.45;
  cursor: default;
}

.mirc-edit-pane .mirc-editor-cols,
.mirc-edit-pane .mirc-editor-row {
  font-size: 10px;
}

.mirc-edit-pane .mirc-editor-row input[type="text"],
.mirc-edit-pane .mirc-editor-row select {
  font-size: 10px;
  padding: 0 2px;
}

.mirc-editor-cols {
  flex: 0 0 auto;
  padding: 3px 4px;
  border-bottom: 1px solid var(--mirc-lo);
  background: #d4d0c8;
  color: #000;
  font-weight: 700;
  user-select: none;
}

.mirc-editor-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #fff;
  border-top: 1px solid var(--mirc-hi);
  box-shadow: inset 1px 1px 0 var(--mirc-lo);
}

.mirc-editor-row {
  padding: 2px 4px;
  border-bottom: 1px solid #dfdfdf;
  background: #fff;
  cursor: default;
}

.mirc-editor-row:nth-child(even) {
  background: #f4f4f4;
}

.mirc-editor-row.is-selected {
  background: #000080;
  color: #fff;
}

.mirc-editor-row.is-selected input,
.mirc-editor-row.is-selected select {
  color: #000;
}

.mirc-editor-handle {
  text-align: center;
  color: #808080;
  font-size: 12px;
  cursor: grab;
  user-select: none;
}

.mirc-editor-row.is-selected .mirc-editor-handle {
  color: #c0c0c0;
}

.mirc-editor-idx {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 2px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: right;
  font: 10px "Courier New", Courier, monospace;
  opacity: 0.75;
  cursor: pointer;
}

.mirc-editor-idx:hover {
  opacity: 1;
  text-decoration: underline;
}

.mirc-editor-row.is-selected .mirc-editor-idx {
  color: #fff;
}

.mirc-editor-row input[type="text"],
.mirc-editor-row select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1px 2px;
  border: 1px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: #fff;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
}

.mirc-editor-row input[type="checkbox"] {
  margin: 0 auto;
  display: block;
}

.mirc-editor-row input:focus,
.mirc-editor-row select:focus {
  outline: 1px dotted #000;
  outline-offset: -1px;
}

@media (max-width: 720px) {
  .mirc-body {
    grid-template-columns: 1fr;
    grid-template-rows: 160px 1fr;
  }

  body.mirc.is-editor:not(.is-editor-float) .mirc-work {
    flex-direction: column;
  }

  body.mirc.is-editor:not(.is-editor-float) .mirc-editor {
    flex: 0 0 42%;
    max-width: none;
    min-width: 0;
    margin: 0 4px 4px;
  }

  /* Phone: no site chrome, just the Win98 client filling the screen.
     Hide topnav via media query too so it does not flash before JS. */
  body.mirc .topnav {
    display: none !important;
  }

  body.mirc {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    background: var(--mirc-face);
  }

  body.mirc .mirc-desktop {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  body.mirc .mirc-window,
  #mirc-window.is-mobile-viewer {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-width: 0;
    box-shadow: none;
    border-radius: 0;
    transform: none !important;
  }

  /* One slim chrome row: Site | title | Home | Users | Channels */
  #mirc-window.is-mobile-viewer .mirc-chrome {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 4px 6px;
    background: linear-gradient(90deg, var(--mirc-title) 0%, var(--mirc-title2) 100%);
    color: #fff;
  }

  #mirc-window.is-mobile-viewer .mirc-titlebar,
  #mirc-window.is-mobile-viewer .mirc-menubar,
  #mirc-window.is-mobile-viewer .mirc-toolbar {
    display: contents;
  }

  #mirc-window.is-mobile-viewer .mirc-titlebar .controls,
  #mirc-window.is-mobile-viewer .mirc-menu-channel,
  #mirc-window.is-mobile-viewer #mirc-menu-options,
  #mirc-window.is-mobile-viewer #mirc-menu-help,
  #mirc-window.is-mobile-viewer #mirc-dump,
  #mirc-window.is-mobile-viewer #mirc-fullmode {
    display: none !important;
  }

  #mirc-window.is-mobile-viewer .mirc-title-label {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    color: #fff;
    font-size: 12px;
  }

  #mirc-window.is-mobile-viewer #mirc-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mirc-window.is-mobile-viewer .mirc-title-site {
    flex: 0 0 auto;
  }

  #mirc-window.is-mobile-viewer .mirc-title-site-btn,
  #mirc-window.is-mobile-viewer #mirc-menu-channels,
  #mirc-window.is-mobile-viewer #mirc-menu-users,
  #mirc-window.is-mobile-viewer #mirc-home {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid;
    border-color: #fff #404040 #404040 #fff;
    background: var(--mirc-face);
    color: #000;
    font: 700 12px "MS Sans Serif", Tahoma, sans-serif;
    cursor: pointer;
    gap: 5px;
  }

  #mirc-window.is-mobile-viewer .mirc-title-site-btn img {
    width: 16px;
    height: 16px;
  }

  #mirc-window.is-mobile-viewer .mirc-title-site-label {
    display: inline;
  }

  #mirc-window.is-mobile-viewer .mirc-title-site-btn:hover,
  #mirc-window.is-mobile-viewer .mirc-title-site.is-open .mirc-title-site-btn,
  #mirc-window.is-mobile-viewer #mirc-menu-channels:hover,
  #mirc-window.is-mobile-viewer #mirc-menu-users:hover,
  #mirc-window.is-mobile-viewer #mirc-home:hover {
    background: #dcdcdc;
    outline: none;
  }

  #mirc-window.is-mobile-viewer #mirc-menu-users:disabled,
  #mirc-window.is-mobile-viewer #mirc-home:disabled {
    background: var(--mirc-face);
    color: #808080;
    opacity: 1;
  }

  #mirc-window.is-mobile-viewer .mirc-title-site-list {
    min-width: 11em;
  }

  #mirc-window.is-mobile-viewer .mirc-title-site-item {
    padding: 10px 18px 10px 12px;
    font-size: 13px;
  }

  #mirc-window.is-mobile-viewer .mirc-menu-drop {
    flex: 0 0 auto;
  }

  #mirc-window.is-mobile-viewer .mirc-menu-channels-list,
  #mirc-window.is-mobile-viewer .mirc-users-pop {
    top: calc(100% + 2px);
  }

  /* Touch footer: channel + Users + FX + speaker */
  #mirc-window.is-mobile-viewer .mirc-status {
    position: relative;
    z-index: 35;
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 10px 96px 10px 12px;
    font: 700 15px/1.25 "MS Sans Serif", Tahoma, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mirc-window.is-mobile-viewer .mirc-audio-dock {
    right: 8px;
    bottom: 8px;
    gap: 4px;
    align-items: center;
    opacity: 1;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bgm-mute,
  #mirc-window.is-mobile-viewer .mirc-stage-sfx-mute {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 1px solid;
    border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
    background: var(--mirc-face);
    color: #000;
    border-radius: 2px;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bgm-icon,
  #mirc-window.is-mobile-viewer .mirc-stage-sfx-icon {
    width: 18px;
    height: 18px;
  }

  /* Phone: speaker is mute toggle only (no vertical volume pop). */
  #mirc-window.is-mobile-viewer .mirc-stage-bgm-vol-pop,
  #mirc-window.is-mobile-viewer .mirc-speaker:hover .mirc-stage-bgm-vol-pop,
  #mirc-window.is-mobile-viewer .mirc-speaker:focus-within .mirc-stage-bgm-vol-pop,
  #mirc-window.is-mobile-viewer .mirc-speaker.is-open .mirc-stage-bgm-vol-pop {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #mirc-window.is-mobile-viewer.is-vn-sized .mirc-work,
  #mirc-window.is-mobile-viewer.is-vn-sized .mirc-body {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }

  #mirc-window.is-mobile-viewer.is-full-stage .mirc-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 0;
  }

  #mirc-window.is-mobile-viewer.is-vn-sized.is-full-stage .mirc-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
    height: 100%;
    background: #000;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 0;
    box-sizing: border-box;
  }

  #mirc-window.is-mobile-viewer.is-vn-sized .mirc-stage {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    align-self: stretch;
  }

  /* Stage sits on the dialogue plate; top dead space is the flex spacer. */
  #mirc-window.is-mobile-viewer.is-vn-sized .mirc-stage:not(.is-bbs) {
    margin-top: 0;
    border-radius: 16px 16px 0 0;
    clip-path: inset(0 round 16px 16px 0 0);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  }

  #mirc-window.is-mobile-viewer.is-vn-sized .mirc-stage.is-bbs {
    width: 100%;
    max-width: none;
    height: 100%;
    align-self: stretch;
    border-radius: 0;
    clip-path: url(#crt-curve);
  }

  /* Top dead space + sloppy Next (stage/dialogue stay fixed below). */
  #mirc-window.is-mobile-viewer .mirc-stage-tap {
    flex: 1 1 auto;
    display: block;
    align-self: stretch;
    min-height: 24px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-tap[hidden] {
    display: none !important;
  }

  /* Thumb row above status: Back/Next, then #channel / users / FX. */
  #mirc-window.is-mobile-viewer > .mirc-stage-nav {
    display: flex;
    flex: 0 0 auto;
    order: 1;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 8px;
    background: var(--mirc-face);
    border-top: 1px solid var(--mirc-hi);
    box-shadow: inset 0 1px 0 var(--mirc-lo);
    z-index: 36;
  }

  #mirc-window.is-mobile-viewer > .mirc-status {
    order: 2;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  #mirc-window.is-mobile-viewer .mirc-stage-nav[hidden] {
    display: none !important;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-nav-btn {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 36px;
    border: 2px solid;
    border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
    border-radius: 4px;
    background: var(--mirc-face);
    color: #000;
    font: 700 15px/1 "MS Sans Serif", Tahoma, sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-nav-label {
    position: relative;
    z-index: 1;
    text-align: center;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-nav-tri {
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-style: solid;
    pointer-events: none;
  }

  /* Solid black chevron on the leading edge. */
  #mirc-window.is-mobile-viewer .mirc-stage-nav-tri--back {
    left: 14px;
    border-width: 7px 11px 7px 0;
    border-color: transparent currentColor transparent transparent;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-nav-tri--fwd {
    right: 14px;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent currentColor;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-nav-btn:active:not(:disabled) {
    border-color: var(--mirc-dk) var(--mirc-hi) var(--mirc-hi) var(--mirc-dk);
    padding: 13px 35px 11px 37px;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-nav-btn:disabled,
  #mirc-window.is-mobile-viewer .mirc-stage-nav-btn.is-waiting {
    color: #808080;
    cursor: default;
  }

  /*
   * Polaroid viewer: full sheet between chrome and Close row.
   * Covers stage + dialogue completely (not a floating modal).
   */
  #mirc-window.is-mobile-viewer.is-media-open .mirc-stage-nav-btn:not(.mirc-stage-nav-close) {
    display: none !important;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-nav-close {
    flex: 1 1 auto;
    max-width: none;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-nav-close[hidden] {
    display: none !important;
  }

  #mirc-window.is-mobile-viewer.is-media-open .mirc-image-modal.is-open {
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    width: 100%;
    left: 0;
    right: 0;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    resize: none !important;
    background: var(--mirc-face);
  }

  #mirc-window.is-mobile-viewer.is-media-open .mirc-image-bar {
    cursor: default;
    touch-action: manipulation;
    min-height: 36px;
    padding: 6px 8px;
  }

  #mirc-window.is-mobile-viewer.is-media-open .mirc-image-close {
    width: 36px;
    height: 28px;
    font: 700 14px/26px "MS Sans Serif", Tahoma, sans-serif;
  }

  #mirc-window.is-mobile-viewer.is-media-open .mirc-image-frame {
    margin: 0;
    padding: 8px;
    border: 0;
    overflow: hidden;
    cursor: pointer;
    background: #000;
  }

  #mirc-window.is-mobile-viewer.is-media-open .mirc-image-frame img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border: 0;
    cursor: pointer;
  }

  /*
   * Fixed 4-line caption plate under the stage (static height).
   * Slight gap below before Back/Next. Name tab may overlap stage; box does not grow.
   */
  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 6;
    flex: 0 0 100px;
    align-self: stretch;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: none;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    margin: 0 0 10px;
    padding: 10px 14px 10px 10px;
    box-sizing: border-box;
    /* Visible so the speaker name tab can sit above the plate. */
    overflow: visible;
    pointer-events: auto;
    cursor: pointer;
    border-radius: 0 0 12px 12px;
    border-top-width: 0;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage:not([hidden]) {
    display: flex;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage .mirc-stage-speaker {
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 2;
    transform: translateY(calc(-100% + 2px));
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage .mirc-stage-dialogue-avatar {
    width: 56px;
    height: 56px;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage .mirc-stage-dialogue-text {
    flex: 1 1 auto;
    min-width: 0;
    max-height: calc(1.35em * 4);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-height: 1.35;
    font-size: 15px;
  }

  /* Enter/leave notice: same fixed plate; red chrome; no nick tag / avatar. */
  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-presence-notice {
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid rgba(220, 80, 90, 0.75);
    border-top-width: 0;
    border-radius: 0 0 12px 12px;
    background: rgba(6, 8, 14, 0.82);
    box-shadow: none;
    color: #f2f4ff;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-presence-notice::before {
    display: none;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-presence-notice .mirc-stage-speaker {
    display: none !important;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-presence-notice .mirc-stage-dialogue-text {
    flex: 0 1 auto;
    width: 100%;
    max-height: calc(1.3em * 4);
    text-align: center;
    font: 700 16px/1.3 "Share Tech Mono", "Courier New", monospace;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    -webkit-line-clamp: 4;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-presence-notice .mirc-stage-dialogue-avatar {
    display: none !important;
  }

  /* Chat Offline: stage + story plate share one green CRT frame (no grey seam). */
  #mirc-window.is-mobile-viewer .mirc-stage.is-offline:not(.is-bbs) {
    border: 2px solid rgba(80, 200, 110, 0.55);
    border-bottom-width: 0;
    border-bottom-color: transparent;
    box-shadow:
      inset 0 0 0 1px rgba(90, 255, 140, 0.12),
      inset 0 0 28px rgba(0, 40, 16, 0.35);
  }

  /* Chat Offline endcard: prev/next story links in CRT green theme. */
  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-offline-nav {
    cursor: default;
    border: 2px solid rgba(80, 200, 110, 0.55);
    border-top-width: 0;
    background:
      linear-gradient(180deg, rgba(0, 18, 8, 0.94) 0%, rgba(0, 10, 4, 0.96) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(90, 255, 140, 0.12),
      inset 0 0 28px rgba(0, 40, 16, 0.45);
    color: #9dffb4;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-offline-nav::before {
    display: none;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-offline-nav .mirc-stage-speaker,
  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-offline-nav .mirc-stage-dialogue-avatar {
    display: none !important;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-offline-nav .mirc-stage-dialogue-text {
    display: block;
    max-height: none;
    -webkit-line-clamp: unset;
    overflow: visible;
    width: 100%;
  }

  .mirc-offline-story-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
  }

  .mirc-offline-story-link {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: #9dffb4;
    font: 700 14px/1.25 "Share Tech Mono", "Courier New", monospace;
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-shadow:
      0 0 6px rgba(80, 255, 120, 0.85),
      0 0 18px rgba(40, 200, 80, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mirc-offline-story-link.is-prev {
    text-align: left;
  }

  .mirc-offline-story-link.is-next {
    text-align: right;
  }

  .mirc-offline-story-link.is-empty {
    visibility: hidden;
    pointer-events: none;
    text-decoration: none;
  }

  .mirc-offline-story-link:hover,
  .mirc-offline-story-link:focus-visible {
    color: #c8ffd4;
    outline: none;
  }

  .mirc-offline-story-link:focus-visible {
    outline: 1px dotted rgba(157, 255, 180, 0.85);
    outline-offset: 3px;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage .mirc-stage-next,
  #mirc-window.is-mobile-viewer .mirc-stage-presence-next,
  #mirc-window.is-mobile-viewer .mirc-stage-presence-caption {
    display: none !important;
  }

  /* Keep plate height even when dialogue is hidden mid-beat. */
  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage[hidden] {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue.is-below-stage.is-offline-nav:not([hidden]) {
    visibility: visible;
    pointer-events: auto;
  }

  /*
   * Boot: one CRT over stage + caption plate (no drop-off under the stage).
   * Win98 grey outer frame; after boot, normal stage + dialogue chrome returns.
   */
  #mirc-window.is-mobile-viewer.is-channel-booting .mirc-stage:not(.is-bbs) {
    overflow: visible;
    clip-path: none;
    z-index: 8;
    border-color: transparent;
    box-shadow: none;
  }

  #mirc-window.is-mobile-viewer.is-channel-booting .mirc-stage:not(.is-bbs) .mirc-stage-boot {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    /* stage height + fixed 100px plate + 10px gap under plate */
    height: calc(100% + 110px);
    border-radius: 16px 16px 12px 12px;
    border: 2px solid;
    border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
    box-sizing: border-box;
    z-index: 50;
  }

  #mirc-window.is-mobile-viewer.is-channel-booting .mirc-stage-dialogue.is-below-stage {
    visibility: hidden !important;
    pointer-events: none !important;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  #mirc-window.is-mobile-viewer:not(.is-full-stage) .mirc-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(96px, 28%) 1fr;
  }

  #mirc-window.is-mobile-viewer:not(.is-full-stage) .mirc-sidebar {
    display: flex;
  }

  /* BBS: keep channel list inside a touch-scroll region above the footer. */
  #mirc-window.is-mobile-viewer .mirc-stage-bbs {
    touch-action: pan-y;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-panel {
    width: min(640px, 96%);
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding: 10px 10px 8px;
    overflow: hidden;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-panel.is-edit-lanes,
  #mirc-window.is-mobile-viewer .mirc-stage-bbs-panel.is-player-lanes {
    width: min(640px, 98%);
  }

  /* Portrait / narrow: one scroll column with Stage, then Dev, then Ideas. */
  #mirc-window.is-mobile-viewer .mirc-stage-bbs-columns {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-panel.is-edit-lanes .mirc-stage-bbs-col:not([hidden]) + .mirc-stage-bbs-col:not([hidden]),
  #mirc-window.is-mobile-viewer .mirc-stage-bbs-panel.is-player-lanes .mirc-stage-bbs-col:not([hidden]) + .mirc-stage-bbs-col:not([hidden]) {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(100, 220, 130, 0.35);
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-col {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-menu {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-col-title {
    font-size: 14px;
    padding: 4px 6px 6px;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-banner,
  #mirc-window.is-mobile-viewer .mirc-stage-bbs-footer {
    flex: 0 0 auto;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-item {
    padding: 10px 8px;
    font-size: 15px;
    min-height: 40px;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-banner {
    font-size: clamp(6px, 2.8vw, 11px);
  }

  #mirc-window.is-mobile-viewer .mirc-stage-bbs-footer {
    font-size: 11px;
    white-space: pre-wrap;
    overflow: hidden;
  }

  #mirc-window.is-mobile-viewer .mirc-next-hint {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }

  #mirc-window.is-mobile-viewer .mirc-stage-dialogue-text {
    font-size: 15px;
    line-height: 1.35;
  }
}

/* Stage nav / tap fill are portrait-only; keep hidden on desktop shells. */
.mirc-stage-nav[hidden],
.mirc-stage-tap[hidden] {
  display: none !important;
}

.mirc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  min-width: 0;
}

.mirc-chans,
.mirc-nicks {
  border: 2px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: var(--mirc-log);
  color: #c0c0c0;
  font-family: "Fixedsys", "Fixedsys Excelsior", "Perfect DOS VGA 437", "Courier New", Courier, monospace;
}

.mirc-log {
  border: 2px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background-color: var(--mirc-log);
  background-image: var(--mirc-log-pattern);
  background-size: var(--mirc-log-pattern-size);
  background-attachment: local;
}

.mirc-chans {
  flex: 0 0 auto;
  max-height: none;
  overflow: auto;
}

.mirc-nicks {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Bottom-third dancer: the active channel's protagonist looping a dance */
.mirc-dancer-panel {
  flex: 1 1 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  overflow: hidden;
  border: 2px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: var(--mirc-log);
}

.mirc-dancer-panel[hidden] {
  display: none;
}

.mirc-dancer {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: contain;
  image-rendering: auto;
  transform-origin: 50% 100%;
}

.mirc-dancer.is-pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Single-sprite dance: two-beat bob + sway + light squash (JRPG mascot vibe). */
.mirc-dancer.is-bob {
  animation: mirc-dance-bob 0.9s ease-in-out infinite;
}

@keyframes mirc-dance-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg) scaleX(1) scaleY(1);
  }
  25% {
    transform: translateY(-6%) rotate(2deg) scaleX(0.96) scaleY(1.04);
  }
  50% {
    transform: translateY(0) rotate(3deg) scaleX(1.04) scaleY(0.96);
  }
  75% {
    transform: translateY(-5%) rotate(-2deg) scaleX(0.97) scaleY(1.03);
  }
}

/* Sheet mode: X sweeps columns, Y advances rows. Durations set inline in JS. */
@keyframes mirc-dance-x {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 100%;
  }
}

@keyframes mirc-dance-y {
  from {
    background-position-y: 0%;
  }
  to {
    background-position-y: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mirc-dancer.is-bob,
  .mirc-dancer.is-sheet {
    animation: none !important;
  }
  .mirc-dancer.is-bob {
    transform: none !important;
  }
  .mirc-dancer.is-sheet {
    background-position: 0% 0% !important;
  }
}

.mirc-chans ul,
.mirc-nicks ul {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  overflow: auto;
  flex: 1 1 auto;
}

.mirc-chans li,
.mirc-nicks li {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  cursor: default;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.3;
}

.mirc-chans li {
  cursor: pointer;
  padding: 0;
}

.mirc-chans .chan-label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 3px 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mirc-chans li:hover:not(.active) {
  background: #000066;
}

.mirc-nicks .nick-row {
  cursor: pointer;
}

.mirc-nicks .nick-row:hover {
  background: #000066;
}

.mirc-nicks .nick-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mirc-image-bar .mirc-profile-link {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  pointer-events: auto;
}

.mirc-image-bar .mirc-profile-link:hover {
  color: #dcecff;
}

.mirc-image-bar .mirc-profile-hint {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  pointer-events: none;
}

.mirc-chans li.dead {
  color: #666;
}

.mirc-chans li.active {
  background: #0000aa;
  color: #fff;
}

.mirc-nicks .op-mark {
  flex: 0 0 auto;
  color: #00aa00;
  font-weight: 700;
  font-family: "Courier New", monospace;
}

.mirc-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0 2px 0 3px;
  vertical-align: -7px;
  border: 1px solid #666;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: cover;
  background: #111;
}

.mirc-avatar--lg {
  width: 72px;
  height: 72px;
  margin: 0;
  border: 2px solid color-mix(in srgb, var(--nc, #888) 65%, #000);
  border-radius: 10px;
  background: #0b0b12;
  object-fit: cover;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.55);
  image-rendering: auto;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mirc-avatar--lg:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nc, #aaa) 80%, transparent),
    0 3px 9px rgba(0, 0, 0, 0.6);
}

.mirc-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* VN sizing: stage pixel size locked in JS; Collapse hides nicklist + log */
#mirc-window.is-vn-sized .mirc-work,
#mirc-window.is-vn-sized .mirc-body,
#mirc-window.is-vn-sized .mirc-main {
  flex: 1 1 auto;
  min-height: 0;
}

#mirc-window.is-vn-sized .mirc-stage {
  flex: 0 0 auto;
  width: var(--vn-stage-w, 100%);
  height: var(--vn-stage-h, auto);
  min-height: 0;
  max-height: none;
}

#mirc-window.is-vn-sized .mirc-log {
  flex: 0 0 var(--vn-log-h, 180px);
  min-height: 0;
}

#mirc-window.is-full-stage .mirc-body {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 4px;
}

#mirc-window.is-full-stage .mirc-sidebar {
  display: none;
}

#mirc-window.is-full-stage .mirc-main {
  gap: 0;
}

#mirc-window.is-full-stage .mirc-log {
  display: none;
}

/* hangout stage: per-nick haunt bg + left mood actor */
.mirc-crt-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mirc-stage {
  /* gutter | 1 | 2 | 3 | 4 | 5 | gutter  (thin gutters keep art inside CRT clip) */
  --stage-gutter: 2.5%;
  --stage-col: calc((100% - (2 * var(--stage-gutter))) / 5);
  --lane-a: 1;
  --lane-b: 2;
  --lane-from-a: 2;
  --lane-from-b: 4;
  position: relative;
  flex: 2.75 1 0;
  min-height: 160px;
  overflow: hidden;
  border: 2px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  border-radius: 0;
  clip-path: url(#crt-curve);
  background: #08090b;
  isolation: isolate;
}

/* Global audio dock: FX + speaker, bottom-right of the VeilChat window. */
.mirc-audio-dock {
  position: absolute;
  right: 6px;
  bottom: 2px;
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2a2a2a;
  opacity: 0.92;
  pointer-events: auto;
  line-height: 1;
}

.mirc-speaker,
.mirc-stage-bgm {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 1;
  pointer-events: auto;
  line-height: 1;
}

.mirc-speaker[hidden],
.mirc-stage-bgm[hidden] {
  display: flex !important;
}

.mirc-stage-bgm-vol-pop {
  position: relative;
  width: 28px;
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: height 0.14s ease, opacity 0.12s ease, margin 0.14s ease;
}

.mirc-speaker:hover .mirc-stage-bgm-vol-pop,
.mirc-speaker:focus-within .mirc-stage-bgm-vol-pop,
.mirc-speaker.is-open .mirc-stage-bgm-vol-pop,
.mirc-stage-bgm:hover .mirc-stage-bgm-vol-pop,
.mirc-stage-bgm:focus-within .mirc-stage-bgm-vol-pop,
.mirc-stage-bgm.is-open .mirc-stage-bgm-vol-pop {
  height: 84px;
  margin-bottom: 4px;
  opacity: 1;
  pointer-events: auto;
}

.mirc-stage-bgm-vol-rot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 84px;
  height: 28px;
  margin: 0;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center bottom;
}

.mirc-stage-bgm-vol {
  display: block;
  width: 84px;
  height: 22px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: #3a3a3a;
  cursor: pointer;
}

.mirc-stage-bgm-mute,
.mirc-stage-sfx-mute {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}

.mirc-stage-bgm-mute:hover,
.mirc-stage-sfx-mute:hover {
  color: #111;
}

.mirc-stage-bgm-icon,
.mirc-stage-sfx-icon {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
}

.mirc-stage-sfx-icon {
  overflow: visible;
}

.mirc-stage-sfx-icon .sfx-label {
  fill: currentColor;
  user-select: none;
}

.mirc-stage-bgm-icon .spk-wave,
.mirc-stage-bgm-icon .spk-wave2 {
  fill: none;
}

.mirc-stage-bgm-icon .spk-slash,
.mirc-stage-sfx-icon .sfx-slash {
  display: none;
}

.mirc-stage-bgm-mute.is-muted .spk-wave,
.mirc-stage-bgm-mute.is-muted .spk-wave2 {
  opacity: 0;
}

.mirc-stage-bgm-mute.is-muted .spk-slash,
.mirc-stage-sfx-mute.is-muted .sfx-slash {
  display: block;
}

/* End of strip: freeze the stage as an old green CRT going offline */
.mirc-stage.is-offline .mirc-stage-bg,
.mirc-stage.is-offline .mirc-stage-cast,
.mirc-stage.is-offline .mirc-stage-content,
.mirc-stage.is-offline .mirc-stage-dialogue {
  filter: grayscale(1) contrast(1.15) brightness(0.72);
}

.mirc-stage-offline {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 28px / 36px;
  overflow: hidden;
  background: rgba(0, 10, 4, 0.34);
  box-shadow:
    inset 0 0 0 4px #050a05,
    inset 0 0 0 9px #142814,
    inset 0 0 0 14px #0c1c0c,
    inset 0 0 28px rgba(0, 0, 0, 0.75),
    inset 0 0 70px rgba(0, 0, 0, 0.9),
    inset 0 0 110px rgba(0, 35, 12, 0.55);
}

.mirc-stage-offline[hidden] {
  display: none !important;
}

.mirc-stage-offline-bezel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(130% 115% at 50% 48%, transparent 42%, rgba(0, 0, 0, 0.35) 68%, rgba(0, 0, 0, 0.78) 86%, rgba(0, 0, 0, 0.96) 100%);
  box-shadow:
    inset 28px 22px 48px rgba(0, 0, 0, 0.7),
    inset -28px -22px 48px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(90, 180, 100, 0.18);
}

/* Extra CRT tube corner pinch (top on bezel, bottom on overlay) */
.mirc-stage-offline-bezel::before,
.mirc-stage-offline-bezel::after,
.mirc-stage-offline::before,
.mirc-stage-offline::after {
  content: "";
  position: absolute;
  width: 46%;
  height: 46%;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 44px 22px rgba(0, 0, 0, 0.9);
  z-index: 3;
}

.mirc-stage-offline-bezel::before {
  top: -20%;
  left: -18%;
}

.mirc-stage-offline-bezel::after {
  top: -20%;
  right: -18%;
}

.mirc-stage-offline::before {
  bottom: -22%;
  left: -18%;
}

.mirc-stage-offline::after {
  bottom: -22%;
  right: -18%;
}

/* Offline/boot keep the shared stage radius (set on .mirc-stage). */

.mirc-stage-offline-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(40, 255, 80, 0.07) 0px,
      rgba(40, 255, 80, 0.07) 1px,
      rgba(0, 0, 0, 0.22) 2px,
      rgba(0, 0, 0, 0.22) 3px
    );
  mix-blend-mode: screen;
  animation: mirc-crt-roll 7s linear infinite;
}

.mirc-stage-offline-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(60, 255, 120, 0.12), transparent 70%);
  animation: mirc-crt-flicker 3.6s steps(2, end) infinite;
}

.mirc-stage-offline-msg {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  text-align: center;
  text-shadow:
    0 0 6px rgba(80, 255, 120, 0.85),
    0 0 18px rgba(40, 200, 80, 0.45);
  animation: mirc-crt-blink 1.8s steps(1, end) infinite;
}

.mirc-stage-offline-title {
  font: 700 28px/1.1 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7dff9a;
}

.mirc-stage-offline-sub {
  font: 400 12px/1.2 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(140, 255, 170, 0.72);
}

.mirc-stage-offline-return {
  pointer-events: auto;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9dffb4;
  font: 400 13px/1.3 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  text-shadow:
    0 0 6px rgba(80, 255, 120, 0.85),
    0 0 18px rgba(40, 200, 80, 0.45);
  animation: none;
}

.mirc-stage-offline-return:hover,
.mirc-stage-offline-return:focus-visible {
  color: #c8ffd4;
  outline: none;
}

.mirc-stage-offline-return:focus-visible {
  outline: 1px dotted rgba(157, 255, 180, 0.85);
  outline-offset: 3px;
}

@keyframes mirc-crt-roll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 48px;
  }
}

@keyframes mirc-crt-flicker {
  0%, 92%, 100% {
    opacity: 1;
  }
  93% {
    opacity: 0.82;
  }
  95% {
    opacity: 1;
  }
}

@keyframes mirc-crt-blink {
  0%, 70% {
    opacity: 1;
  }
  71%, 100% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mirc-stage-offline-scan,
  .mirc-stage-offline-glow,
  .mirc-stage-offline-msg {
    animation: none;
  }
}

/* Channel enter: CRT dial-up boot (placeholder for asset preload) */
.mirc-stage.is-booting .mirc-stage-bg,
.mirc-stage.is-booting .mirc-stage-cast,
.mirc-stage.is-booting .mirc-stage-content,
.mirc-stage.is-booting .mirc-stage-dialogue {
  visibility: hidden;
}

.mirc-stage-boot {
  position: absolute;
  inset: 0;
  z-index: 42;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  cursor: default;
  border-radius: 28px / 36px;
  overflow: hidden;
  background: rgba(0, 8, 3, 0.92);
  box-shadow:
    inset 0 0 0 4px #050a05,
    inset 0 0 0 9px #142814,
    inset 0 0 0 14px #0c1c0c,
    inset 0 0 28px rgba(0, 0, 0, 0.75),
    inset 0 0 70px rgba(0, 0, 0, 0.9),
    inset 0 0 110px rgba(0, 35, 12, 0.55);
}

.mirc-stage-boot[hidden] {
  display: none !important;
}

.mirc-stage-boot-bezel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(130% 115% at 50% 48%, transparent 42%, rgba(0, 0, 0, 0.35) 68%, rgba(0, 0, 0, 0.78) 86%, rgba(0, 0, 0, 0.96) 100%);
  box-shadow:
    inset 28px 22px 48px rgba(0, 0, 0, 0.7),
    inset -28px -22px 48px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(90, 180, 100, 0.18);
}

.mirc-stage-boot-bezel::before,
.mirc-stage-boot-bezel::after,
.mirc-stage-boot::before,
.mirc-stage-boot::after {
  content: "";
  position: absolute;
  width: 46%;
  height: 46%;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 44px 22px rgba(0, 0, 0, 0.9);
  z-index: 3;
}

.mirc-stage-boot-bezel::before {
  top: -20%;
  left: -18%;
}

.mirc-stage-boot-bezel::after {
  top: -20%;
  right: -18%;
}

.mirc-stage-boot::before {
  bottom: -22%;
  left: -18%;
}

.mirc-stage-boot::after {
  bottom: -22%;
  right: -18%;
}

.mirc-stage-boot-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(40, 255, 80, 0.07) 0px,
      rgba(40, 255, 80, 0.07) 1px,
      rgba(0, 0, 0, 0.22) 2px,
      rgba(0, 0, 0, 0.22) 3px
    );
  mix-blend-mode: screen;
  animation: mirc-crt-roll 7s linear infinite;
}

.mirc-stage-boot-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(60, 255, 120, 0.12), transparent 70%);
  animation: mirc-crt-flicker 3.6s steps(2, end) infinite;
}

.mirc-stage-boot-panel {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(420px, 82%);
  padding: 8px 4px;
  text-shadow:
    0 0 6px rgba(80, 255, 120, 0.85),
    0 0 18px rgba(40, 200, 80, 0.45);
}

.mirc-stage-boot-title {
  font: 700 20px/1.15 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: #7dff9a;
}

.mirc-stage-boot-status {
  min-height: 1.35em;
  font: 400 13px/1.35 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.04em;
  color: rgba(160, 255, 180, 0.92);
  text-align: left;
}

.mirc-stage-boot-bar {
  height: 12px;
  border: 1px solid rgba(90, 200, 110, 0.55);
  background: rgba(0, 20, 8, 0.85);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.mirc-stage-boot-bar-fill {
  height: 100%;
  width: 0%;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(80, 255, 120, 0.95),
      rgba(80, 255, 120, 0.95) 6px,
      rgba(40, 180, 80, 0.75) 6px,
      rgba(40, 180, 80, 0.75) 12px
    );
  box-shadow: 0 0 10px rgba(80, 255, 120, 0.45);
  transition: width 0.28s ease-out;
}

.mirc-stage-boot-log {
  max-height: 5.5em;
  overflow: hidden;
  font: 400 11px/1.4 "Share Tech Mono", "Courier New", monospace;
  color: rgba(140, 230, 160, 0.75);
  text-align: left;
}

.mirc-stage-boot-log div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .mirc-stage-boot-scan,
  .mirc-stage-boot-glow {
    animation: none;
  }
  .mirc-stage-boot-bar-fill {
    transition: none;
  }
}

/* Default lobby: old green BBS / VEILCHAT board list */
.mirc-stage.is-bbs .mirc-stage-bg,
.mirc-stage.is-bbs .mirc-stage-cast,
.mirc-stage.is-bbs .mirc-stage-content,
.mirc-stage.is-bbs .mirc-stage-dialogue {
  visibility: hidden;
}

.mirc-stage-bbs {
  position: absolute;
  inset: 0;
  z-index: 41;
  display: flex;
  align-items: stretch;
  justify-content: center;
  pointer-events: none;
  cursor: default;
  border-radius: 28px / 36px;
  overflow: hidden;
  background: rgba(0, 8, 3, 0.94);
  box-shadow:
    inset 0 0 0 4px #050a05,
    inset 0 0 0 9px #142814,
    inset 0 0 0 14px #0c1c0c,
    inset 0 0 28px rgba(0, 0, 0, 0.75),
    inset 0 0 70px rgba(0, 0, 0, 0.9),
    inset 0 0 110px rgba(0, 35, 12, 0.55);
}

.mirc-stage-bbs[hidden] {
  display: none !important;
}

.mirc-stage-bbs-bezel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(130% 115% at 50% 48%, transparent 42%, rgba(0, 0, 0, 0.35) 68%, rgba(0, 0, 0, 0.78) 86%, rgba(0, 0, 0, 0.96) 100%);
  box-shadow:
    inset 28px 22px 48px rgba(0, 0, 0, 0.7),
    inset -28px -22px 48px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(90, 180, 100, 0.18);
}

.mirc-stage-bbs-bezel::before,
.mirc-stage-bbs-bezel::after,
.mirc-stage-bbs::before,
.mirc-stage-bbs::after {
  content: "";
  position: absolute;
  width: 46%;
  height: 46%;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 44px 22px rgba(0, 0, 0, 0.9);
  z-index: 3;
}

.mirc-stage-bbs-bezel::before {
  top: -20%;
  left: -18%;
}

.mirc-stage-bbs-bezel::after {
  top: -20%;
  right: -18%;
}

.mirc-stage-bbs::before {
  bottom: -22%;
  left: -18%;
}

.mirc-stage-bbs::after {
  bottom: -22%;
  right: -18%;
}

.mirc-stage-bbs-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(40, 255, 80, 0.07) 0px,
      rgba(40, 255, 80, 0.07) 1px,
      rgba(0, 0, 0, 0.22) 2px,
      rgba(0, 0, 0, 0.22) 3px
    );
  mix-blend-mode: screen;
  animation: mirc-crt-roll 7s linear infinite;
}

.mirc-stage-bbs-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(60, 255, 120, 0.12), transparent 70%);
  animation: mirc-crt-flicker 3.6s steps(2, end) infinite;
}

.mirc-stage-bbs-panel {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(640px, 94%);
  height: min(92%, 520px);
  margin: auto;
  padding: 14px 12px 12px;
  pointer-events: auto;
  color: #7dff9a;
  text-shadow:
    0 0 6px rgba(80, 255, 120, 0.75),
    0 0 16px rgba(40, 200, 80, 0.35);
  font-family: "Share Tech Mono", "Courier New", monospace;
  box-sizing: border-box;
}

.mirc-stage-bbs-panel.is-edit-ideas,
.mirc-stage-bbs-panel.is-edit-lanes {
  width: min(1100px, 98%);
}

.mirc-stage-bbs-panel.is-player-lanes {
  width: min(920px, 98%);
}

.mirc-stage-bbs-columns {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.mirc-stage-bbs-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 25%;
}

.mirc-stage-bbs-col[hidden] {
  display: none !important;
}

.mirc-stage-bbs-panel.is-edit-lanes .mirc-stage-bbs-col:not([hidden]) + .mirc-stage-bbs-col:not([hidden]),
.mirc-stage-bbs-panel.is-player-lanes .mirc-stage-bbs-col:not([hidden]) + .mirc-stage-bbs-col:not([hidden]) {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(100, 220, 130, 0.35);
}

.mirc-stage-bbs-ideas {
  flex: 1 1 25%;
}

.mirc-stage-bbs-ideas[hidden] {
  display: none !important;
}

.mirc-stage-bbs-col-title {
  flex: 0 0 auto;
  margin: 0 0 4px;
  padding: 2px 6px 4px;
  color: #b8ff90;
  font: 700 12px/1.25 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.04em;
  user-select: none;
}

.mirc-stage-bbs-ideas-empty,
.mirc-stage-bbs-lane-empty {
  margin: 0;
  padding: 4px 6px;
  color: rgba(140, 230, 160, 0.45);
  font: 400 12px/1.35 "Share Tech Mono", "Courier New", monospace;
  user-select: none;
}

.mirc-stage-bbs-item .bbs-live-mark {
  flex: 0 0 auto;
  margin-left: 4px;
  color: #ffe08a;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 200, 80, 0.55);
}

.mirc-stage-bbs-item .bbs-grip {
  flex: 0 0 auto;
  margin-right: -4px;
  color: rgba(140, 230, 160, 0.45);
  font-size: 11px;
  letter-spacing: -0.08em;
  cursor: grab;
  user-select: none;
}

.mirc-stage-bbs-item.is-dragging .bbs-grip {
  cursor: grabbing;
}

.mirc-stage-bbs-item.is-dragging {
  opacity: 0.55;
  border-left-color: #ffe08a;
}

.mirc-stage-bbs-item.is-drop-target {
  border-left-color: #ffe08a;
  background: rgba(80, 140, 40, 0.28);
}

.mirc-stage-bbs-item .bbs-stage-lock {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 1.4em;
  padding: 0 4px;
  border: 1px solid rgba(100, 220, 130, 0.45);
  background: rgba(0, 30, 12, 0.55);
  color: #9dffb4;
  font: 700 12px/1.2 "Share Tech Mono", "Courier New", monospace;
  cursor: pointer;
  text-shadow: inherit;
}

.mirc-stage-bbs-item .bbs-stage-lock:hover,
.mirc-stage-bbs-item .bbs-stage-lock:focus-visible {
  outline: none;
  border-color: #ffe08a;
  color: #ffe08a;
}

.mirc-stage-bbs-item .bbs-stage-lock.is-locked {
  border-color: #ffe08a;
  color: #ffe08a;
  background: rgba(60, 50, 10, 0.45);
}

.mirc-stage-bbs-item.is-stage-locked .bbs-name {
  color: #ffe8a8;
}

.mirc-stage-bbs-item.is-live-dup .bbs-name {
  color: #d8f5c8;
}

.mirc-stage-bbs-item.is-building {
  opacity: 0.55;
  pointer-events: none;
}

.mirc-bbs-lane-menu {
  position: fixed;
  z-index: 80;
  min-width: 168px;
  padding: 4px 0;
  border: 1px solid rgba(100, 220, 130, 0.55);
  background: rgba(4, 22, 10, 0.96);
  box-shadow: 0 0 18px rgba(40, 180, 80, 0.35);
  color: #8ef0a8;
  font: 400 13px/1.3 "Share Tech Mono", "Courier New", monospace;
}

.mirc-bbs-lane-menu[hidden] {
  display: none !important;
}

.mirc-bbs-lane-menu button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mirc-bbs-lane-menu button:hover,
.mirc-bbs-lane-menu button:focus-visible {
  outline: none;
  background: rgba(40, 120, 60, 0.35);
  color: #c8ffd4;
}

.mirc-bbs-lane-menu .bbs-lane-menu-note {
  margin: 0;
  padding: 6px 12px 4px;
  color: rgba(140, 230, 160, 0.55);
  font-size: 11px;
}

.mirc-stage-bbs-banner,
.mirc-stage-bbs-footer {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 400 11px/1.15 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0;
  white-space: pre;
  overflow: hidden;
  user-select: none;
  flex: 0 0 auto;
}

.mirc-stage-bbs-banner {
  text-align: left;
  color: #9dffb4;
  font-size: clamp(7px, 1.35vw, 11px);
  line-height: 1.12;
}

.mirc-stage-bbs-footer {
  color: rgba(140, 230, 160, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.mirc-stage-bbs-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 200, 110, 0.55) rgba(0, 20, 8, 0.8);
}

.mirc-stage-bbs-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #8ef0a8;
  font: 400 14px/1.35 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  text-shadow: inherit;
  box-sizing: border-box;
}

.mirc-stage-bbs-item:hover,
.mirc-stage-bbs-item:focus-visible {
  outline: none;
  border-left-color: #b8ff90;
  background: rgba(40, 120, 60, 0.22);
  color: #c8ffd4;
}

.mirc-stage-bbs-item .bbs-num {
  flex: 0 0 2.2em;
  color: #b8ff90;
  font-weight: 700;
}

.mirc-stage-bbs-item .bbs-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirc-stage-bbs-blink {
  animation: mirc-crt-blink 1.8s steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mirc-stage-bbs-scan,
  .mirc-stage-bbs-glow,
  .mirc-stage-bbs-blink {
    animation: none;
  }
}

.mirc-stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.mirc-stage-bg[hidden] {
  display: none;
}

/* Full-bleed enter/leave plates: whole stage is the Next hit target */
.mirc-stage-presence-hit {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.mirc-stage-presence-hit[hidden] {
  display: none !important;
}

.mirc-stage-presence {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.mirc-stage-presence-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  z-index: 1;
  margin: 0;
  padding: 10px 14px;
  border: 2px solid rgba(220, 80, 90, 0.75);
  border-radius: 6px;
  background: rgba(6, 8, 14, 0.82);
  color: #f2f4ff;
  font: 700 18px/1.25 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.mirc-stage-presence-caption:empty {
  display: none;
}

.mirc-stage-presence-next {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: rgba(6, 8, 14, 0.72);
  color: #f2f4ff;
  font: 700 12px/1 "Share Tech Mono", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.mirc-stage-presence-next-caret {
  font-size: 13px;
  opacity: 0.9;
}

.mirc-stage.is-presence .mirc-stage-cast {
  visibility: hidden;
}

.mirc-stage-cast {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.mirc-stage.is-presence .mirc-stage-content,
.mirc-stage.is-presence .mirc-stage-dialogue {
  display: none !important;
}

/*
 * Actor lane: left/width from --lane-a/--lane-b (1-indexed inclusive columns).
 * Stage grid: gutter | 1 | 2 | 3 | 4 | 5 | gutter
 * --figure-scale sizes the model inside the lane (JSON cast.scale, default 1).
 */
.mirc-stage-figure {
  --lane-a: 1;
  --lane-b: 2;
  --figure-scale: 1;
  --figure-nudge-x: 0px;
  --figure-nudge-y: 0px;
  --figure-h: 92%;
  position: absolute;
  left: calc(var(--stage-gutter) + (var(--lane-a) - 1) * var(--stage-col));
  top: 0;
  bottom: 0;
  width: calc((var(--lane-b) - var(--lane-a) + 1) * var(--stage-col));
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 7% 0;
  box-sizing: border-box;
  transform: translate(var(--figure-nudge-x), var(--figure-nudge-y));
  /* Snap lane / framing / nudge. Interpolating left+transform made plates
     swoosh in from the previous pose instead of cutting clean. */
  transition: opacity 0.18s ease;
  overflow: visible;
  pointer-events: none;
}

/*
 * VN / fighter foot-plane levels (LOCKED contract).
 * Do not change these percentages without migrating existing scene JSON.
 *   low    = 7%  default ground (matches base .mirc-stage-figure padding)
 *   middle = 12% raised
 *   high   = 18% elevated (feet higher in the CRT frame)
 * Omitted data-level => treat as low. Fine nudge = transform.offsetY, not new levels.
 * JRPG uses bank/line/rank/depth instead; FPS does not use level.
 */
.mirc-stage-figure[data-level="high"] {
  padding-bottom: 18%;
}

.mirc-stage-figure[data-level="middle"] {
  padding-bottom: 12%;
}

.mirc-stage-figure[data-level="low"] {
  padding-bottom: 7%;
}

/* Hangout: shared foot / crop plane just above the dialogue box */
.mirc-stage[data-mode="hangout"] .mirc-stage-figure[data-nick="maryienne"] {
  padding-bottom: 11%;
}

.mirc-stage[data-mode="hangout"] .mirc-stage-figure[data-nick="adreanne"] {
  padding-bottom: 8%;
  align-items: flex-end;
}

.mirc-stage[data-mode="hangout"] .mirc-stage-figure[data-nick="adreanne"] .mirc-stage-portrait {
  object-position: center bottom;
}

/* Solo home (center lane) */
.mirc-stage[data-mode="hangout"] .mirc-stage-figure[data-nick="adreanne"][data-lane="2-4"] {
  padding-bottom: 9%;
  justify-content: center;
}

.mirc-stage-figure[hidden] {
  display: none !important;
}

.mirc-stage-figure.is-empty {
  opacity: 0;
  pointer-events: none;
}

.mirc-stage-portrait {
  display: block;
  min-height: 0;
  height: calc(var(--figure-h) * var(--figure-scale));
  max-height: calc(var(--figure-h) * var(--figure-scale));
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.75));
  cursor: pointer;
  pointer-events: auto;
}

.mirc-stage-figure.is-flip-x .mirc-stage-portrait {
  transform: scaleX(-1);
}

/* Tall upload / ritual plates: fill to the top of the stage */
.mirc-stage-figure[data-fit="top"] {
  --figure-h: 100%;
  padding-top: 0;
  padding-bottom: 3%;
  align-items: flex-start;
}

.mirc-stage-figure[data-fit="top"] .mirc-stage-portrait {
  object-position: center top;
}

/* Wide VFX (bolt): slightly shorter, bottom-anchored inside the lane */
.mirc-stage-figure[data-fit="vfx"] {
  --figure-h: 88%;
  padding-bottom: 5%;
  padding-top: 1%;
}

.mirc-stage-figure[data-fit="vfx"] .mirc-stage-portrait {
  object-position: center bottom;
}

/* FPS / grounded plates */
.mirc-stage-figure[data-fit="bottom"] {
  --figure-h: 92%;
  align-items: flex-end;
}

/* Mid-air float (Zaldine flying lotus): wide center lane + gentle lift, no clip */
.mirc-stage-figure[data-fit="float"] {
  --figure-h: 88%;
  z-index: 1;
  padding-top: 3%;
  padding-bottom: 14%;
  align-items: center;
  overflow: visible;
}

.mirc-stage-figure[data-fit="float"] .mirc-stage-portrait {
  object-position: center center;
  max-width: 96%;
}

.mirc-stage[data-mode="fighter"] .mirc-stage-figure,
.mirc-stage[data-mode="dungeon"] .mirc-stage-figure {
  z-index: 2;
}

/*
 * JRPG crawl: 2-column zigzag, left→right combat.
 * Col1 back (casters): ranks 1 / 3 / 5. Col2 front (melee): ranks 2 / 4.
 * Alternating ranks keep the blanks so nobody stacks in a tower.
 */
.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"] {
  --stage-gutter: 0.5%;
  --jrpg-sprite: 200px;
  --jrpg-slot-h: 34%;
  /* Foot lines spread down the stage; rank step leaves "blank" rows */
  --jrpg-stack-top: 34%;
  --jrpg-stack-span: 40%;
  --jrpg-back-home-left: 2%;
  --jrpg-back-forward-left: 10%;
  --jrpg-front-home-left: 22%;
  --jrpg-front-forward-left: 32%;
  --jrpg-party-width: 28%;
  /* Enemy bank: col 4 guest / col 5 mobs (art faces left toward party) */
  --jrpg-enemy-width: 24%;
  --jrpg-enemy-col4-left: 58%;
  --jrpg-enemy-col5-left: 74%;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"] .mirc-stage-figure {
  --jrpg-rank: 3;
  --jrpg-y-nudge: 0%;
  --figure-h: 100%;
  --jrpg-foot: calc(
    var(--jrpg-stack-top) + (var(--jrpg-rank) - 1) * (var(--jrpg-stack-span) / 4) +
      var(--jrpg-y-nudge)
  );
  top: calc(var(--jrpg-foot) - var(--jrpg-slot-h));
  bottom: auto;
  height: var(--jrpg-slot-h);
  width: var(--jrpg-party-width);
  padding-bottom: 0;
  align-items: flex-end;
  justify-content: flex-start;
  transition:
    left 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    width 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    top 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.2s ease;
}

/* Final vertical lock: Mary + Nietzsche up, Belvue + Adreanne down */
.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-rank="1"] {
  --jrpg-y-nudge: -5%;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-rank="2"] {
  --jrpg-y-nudge: -4%;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-rank="4"] {
  --jrpg-y-nudge: 4%;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-rank="5"] {
  --jrpg-y-nudge: 8%;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-bank="party"][data-line="back"][data-depth="home"] {
  left: var(--jrpg-back-home-left);
  z-index: 2;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-bank="party"][data-line="back"][data-depth="forward"] {
  left: var(--jrpg-back-forward-left);
  z-index: 3;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-bank="party"][data-line="front"][data-depth="home"] {
  left: var(--jrpg-front-home-left);
  z-index: 4;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-bank="party"][data-line="front"][data-depth="forward"] {
  left: var(--jrpg-front-forward-left);
  z-index: 5;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"] .mirc-stage-figure .mirc-stage-portrait {
  height: min(var(--jrpg-sprite), 100%);
  width: auto;
  max-height: calc(var(--figure-h) * var(--figure-scale));
  max-width: 100%;
  object-fit: contain;
  object-position: left bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: none;
}

/*
 * Enemy bank: col 4 (guest dancer) + col 5 (mobs), facing party (art faces left).
 * Rank foot math matches party so stacks line up across the dirt.
 */
.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"] .mirc-stage-figure[data-bank="enemy"] {
  z-index: 2;
  width: var(--jrpg-enemy-width);
  justify-content: flex-end;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-bank="enemy"][data-col="4"] {
  left: var(--jrpg-enemy-col4-left);
  z-index: 4;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-bank="enemy"][data-col="5"] {
  left: var(--jrpg-enemy-col5-left);
  z-index: 3;
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-bank="enemy"]
  .mirc-stage-portrait {
  object-position: right bottom;
}

/* Enemy foot locks: grub with Mary (rank1), armoredillo with Adre (rank5) */
.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-nick="dirt-grub"] {
  --jrpg-y-nudge: 12%;
  left: calc(var(--jrpg-enemy-col5-left) - 7%);
}

.mirc-stage[data-mode="dungeon"][data-flavor="jrpg"]
  .mirc-stage-figure[data-nick="armoredillo"] {
  --jrpg-y-nudge: 10%;
}

/* Traveling / anchored spell FX above cast */
.mirc-stage-fx {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

.mirc-stage-fx-sprite {
  position: absolute;
  width: 22%;
  height: 34%;
  transform: translate(-50%, -85%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mirc-stage-fx-sprite.is-tornado {
  width: 20%;
  height: 42%;
}

.mirc-stage-fx-sprite.is-roots {
  width: 26%;
  height: 40%;
  z-index: 7;
}

.mirc-stage-fx-sprite.is-travel {
  animation-name: mirc-fx-travel;
  animation-timing-function: cubic-bezier(0.25, 0.7, 0.3, 1);
  animation-fill-mode: forwards;
}

@keyframes mirc-fx-travel {
  0% {
    left: var(--fx-x0);
    top: var(--fx-y0);
    opacity: 0.9;
  }
  15% {
    opacity: 1;
  }
  100% {
    left: var(--fx-x1);
    top: var(--fx-y1);
    opacity: 0.95;
  }
}

.mirc-stage-fx-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
}

.mirc-stage-fx-img.is-pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Mez sparkles (blue / red) on Adreanne */
.mirc-stage-figure.has-aura-mez {
  overflow: visible;
}

.mirc-mez-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  /* JRPG Adreanne: sit the cloud on her torso (sprite is left-anchored in slot). */
  transform: translate(16%, -4%);
}

.mirc-mez-sparkle {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 7px;
  height: 7px;
  border-radius: 1px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.4);
  animation: mirc-mez-glitter var(--sd, 0.7s) ease-in-out var(--sdelay, 0s) infinite;
  box-shadow: 0 0 4px currentColor;
}

.mirc-mez-sparkle.is-blue {
  background: #6ec8ff;
  color: #6ec8ff;
}

.mirc-mez-sparkle.is-red {
  background: #ff6b8a;
  color: #ff6b8a;
}

@keyframes mirc-mez-glitter {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.35);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
  }
  70% {
    opacity: 0.55;
    transform: translate(-50%, -40%) rotate(45deg) scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mirc-stage-fx-sprite.is-travel,
  .mirc-mez-sparkle {
    animation: none !important;
  }
  .mirc-mez-sparkle {
    opacity: 0.75;
  }
}

/* Lane enter: animate from --lane-from-* to resting --lane-* */
@keyframes mirc-lane-enter {
  0% {
    left: calc(var(--stage-gutter) + (var(--lane-from-a) - 1) * var(--stage-col));
    width: calc((var(--lane-from-b) - var(--lane-from-a) + 1) * var(--stage-col));
    opacity: 0.92;
  }
  100% {
    left: calc(var(--stage-gutter) + (var(--lane-a) - 1) * var(--stage-col));
    width: calc((var(--lane-b) - var(--lane-a) + 1) * var(--stage-col));
    opacity: 1;
  }
}

.mirc-stage-figure.is-lane-entering {
  animation: mirc-lane-enter 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 1;
}

.mirc-stage-portrait:not([src]) {
  display: none;
}

.mirc-stage-portrait.is-pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Polaroid / DCC content docks in columns 4-5 (upper right) */
.mirc-stage-content {
  position: absolute;
  left: auto;
  right: var(--stage-gutter);
  top: 12px;
  z-index: 3;
  display: flex;
  width: calc(2 * var(--stage-col));
  max-width: calc(2 * var(--stage-col));
  max-height: 62%;
  min-height: 0;
  transition: opacity 0.25s ease;
}

.mirc-stage-content[hidden] {
  display: none;
}

/* Yield to the dialogue box when the two would overlap on a short stage */
.mirc-stage-content.is-yielded {
  opacity: 0;
  pointer-events: none;
}

.mirc-stage-shot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 8px 8px 10px;
  border: 1px solid #111;
  background: #f4f1e8;
  color: #20242e;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform: rotate(-1.4deg);
  cursor: zoom-in;
}

.mirc-stage-shot img {
  display: block;
  min-height: 0;
  flex: 0 1 auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
  border: 1px solid #333;
  image-rendering: auto;
}

.mirc-stage-shot-cap {
  flex: 0 0 auto;
  font: 12px "Courier New", Courier, monospace;
  text-align: center;
  color: #3a3a3a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30vw;
}

/* JRPG dialogue box pinned across the bottom of the stage */
.mirc-stage-dialogue {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  border: 2px solid color-mix(in srgb, var(--nc, #7fd7ff) 55%, #d8d4e8);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(10, 14, 26, 0.92) 0%, rgba(6, 8, 16, 0.95) 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: #eef2ff;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Mood portrait (same source as chat-log large avatar). */
.mirc-stage-dialogue-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  margin: 0;
  border: 2px solid color-mix(in srgb, var(--nc, #888) 65%, #000);
  border-radius: 8px;
  background: #0b0b12;
  object-fit: cover;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.55);
  image-rendering: auto;
  pointer-events: none;
  user-select: none;
}

.mirc-stage-dialogue-avatar[hidden] {
  display: none !important;
}

.mirc-stage-dialogue.is-presence-notice .mirc-stage-dialogue-avatar,
.mirc-stage-dialogue.is-overlay .mirc-stage-dialogue-avatar {
  display: none !important;
}

/* Speaker name tab (Alyssa-style), filled with nick color */
.mirc-stage-speaker {
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(calc(-100% + 2px));
  z-index: 1;
  display: inline-block;
  max-width: min(46%, 220px);
  padding: 4px 12px 5px 10px;
  border: 2px solid color-mix(in srgb, var(--nc, #7fd7ff) 55%, #d8d4e8);
  border-bottom: 0;
  border-radius: 8px 0 0 0;
  background: var(--nc, #7fd7ff);
  color: #0a0c12;
  font: 700 12px/1.2 "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  pointer-events: none;
  text-shadow: none;
}

.mirc-stage-speaker[hidden] {
  display: none !important;
}

.mirc-stage-dialogue::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: var(--nc, #7fd7ff);
  box-shadow: 0 0 8px color-mix(in srgb, var(--nc, #7fd7ff) 70%, transparent);
}

.mirc-stage-dialogue[hidden] {
  display: none;
}

.mirc-stage-dialogue-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 400 16px/1.45 "Segoe UI", Tahoma, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  white-space: pre-wrap;
  word-wrap: break-word;
  user-select: none;
  -webkit-user-select: none;
}

.mirc-stage-next {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  padding: 5px 10px 4px;
  border: 1px solid color-mix(in srgb, var(--nc, #7fd7ff) 55%, #eef2ff);
  border-radius: 4px;
  background: rgba(6, 10, 18, 0.72);
  color: #f4f7ff;
  font: 700 13px/1 "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 0 10px color-mix(in srgb, var(--nc, #7fd7ff) 35%, transparent);
  opacity: 1;
  animation: mirc-next-bob 1.05s ease-in-out infinite;
  pointer-events: none;
}

.mirc-stage-next-label {
  opacity: 1;
}

.mirc-stage-next-caret {
  font-size: 1.15em;
  animation: mirc-next-blink 1.05s steps(1, end) infinite;
}

.mirc-stage-dialogue.is-waiting .mirc-stage-next {
  opacity: 0.35;
  animation: none;
}

.mirc-stage-dialogue.is-waiting .mirc-stage-next-caret {
  animation: none;
}

.mirc-stage-dialogue.is-done {
  cursor: default;
}

.mirc-stage-dialogue.is-done .mirc-stage-next {
  display: none;
}

.mirc-stage-dialogue-text .stage-action {
  font-style: italic;
  color: color-mix(in srgb, var(--nc, #cdd6ff) 40%, #cdd6ff);
}

@keyframes mirc-stage-say {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.mirc-stage-dialogue.is-saying {
  animation: mirc-stage-say 0.22s ease-out 1;
}

/* Fight-announce overlay (nick.stage.dialogue.layout = overlay)
   Full stage hit area so Next stays in the normal bottom-right slot. */
.mirc-stage-dialogue.is-overlay {
  left: 12px;
  right: 12px;
  top: 0;
  bottom: 12px;
  width: auto;
  transform: none;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  pointer-events: auto;
  z-index: 12;
}

.mirc-stage-dialogue.is-overlay::before {
  display: none;
}

.mirc-stage-dialogue.is-overlay .mirc-stage-speaker {
  display: none !important;
}

.mirc-stage-dialogue.is-overlay .mirc-stage-dialogue-text {
  position: absolute;
  left: 50%;
  top: var(--dlg-top, 33%);
  width: min(94%, 820px);
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--dlg-font, Impact, "Arial Black", sans-serif);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dlg-color, var(--nc, #ffd400));
  text-shadow:
    0 2px 0 #1a0000,
    0 0 2px #000,
    0 0 14px rgba(0, 0, 0, 0.85);
}

.mirc-stage-dialogue.is-overlay.is-big .mirc-stage-dialogue-text {
  font-size: clamp(36px, 6.2vw, 72px);
}

/* Mortal Kombat-style "FIGHT" plate */
.mirc-stage-dialogue.is-overlay.is-mk .mirc-stage-dialogue-text {
  font-size: clamp(48px, 9vw, 104px);
  line-height: 0.95;
  letter-spacing: 0.08em;
  color: var(--dlg-color, #ffd400);
  -webkit-text-stroke: 3px #0a0500;
  paint-order: stroke fill;
  text-shadow:
    3px 3px 0 #000,
    6px 6px 0 #3a0000,
    0 0 18px rgba(255, 40, 20, 0.55),
    0 0 4px #000;
}

.mirc-stage-dialogue.is-overlay .mirc-stage-dialogue-text .stage-action {
  font-style: normal;
  color: inherit;
}

.mirc-stage-dialogue.is-overlay .mirc-stage-next {
  position: absolute;
  right: 4px;
  bottom: 2px;
  top: auto;
  align-self: auto;
  z-index: 2;
  border-color: rgba(255, 220, 120, 0.75);
  background: rgba(8, 6, 0, 0.78);
  color: #ffe566;
  box-shadow: 0 0 12px rgba(255, 180, 40, 0.45);
}

.mirc-stage-dialogue.is-overlay.is-saying .mirc-stage-dialogue-text {
  animation: mirc-stage-say-overlay 0.22s ease-out 1;
}

.mirc-stage-dialogue.is-overlay.is-mk.is-saying .mirc-stage-dialogue-text {
  animation: mirc-stage-say-mk 0.28s cubic-bezier(0.15, 0.9, 0.25, 1) 1;
}

@keyframes mirc-stage-say-overlay {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes mirc-stage-say-mk {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.55);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes mirc-stage-swap {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.mirc-stage-portrait.is-swapping {
  animation: mirc-stage-swap 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) 1;
}

@keyframes mirc-stage-pop {
  0% {
    opacity: 0;
    transform: rotate(-1.4deg) scale(0.82);
  }
  60% {
    opacity: 1;
    transform: rotate(-1.4deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: rotate(-1.4deg) scale(1);
  }
}

.mirc-stage-shot.is-entering {
  animation: mirc-stage-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}

/* Gated toolbar Next while a stage/mood animation is in progress */
.mirc-tool:disabled,
.mirc-tool.is-waiting {
  opacity: 0.45;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .mirc-stage-figure,
  .mirc-stage-content {
    transition: none;
  }
  .mirc-stage-portrait.is-swapping,
  .mirc-stage-shot.is-entering,
  .mirc-stage-figure.is-lane-entering,
  .mirc-stage-dialogue.is-saying,
  .mirc-stage-next,
  .mirc-stage-next-caret {
    animation: none;
  }
}

@media (max-width: 520px) {
  .mirc-stage-portrait {
    max-width: 58vw;
  }
  .mirc-stage-content {
    max-width: 58%;
  }
}

/* JRPG "click to continue" affordance, pinned inside the stage (above dialogue). */
.mirc-next-hint {
  position: absolute;
  right: 22px;
  bottom: 70px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, #7fd7ff 55%, #000);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(24, 30, 48, 0.94), rgba(12, 16, 28, 0.94));
  color: #d8ecff;
  font: 600 12px "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.4);
  animation: mirc-next-bob 1.15s ease-in-out infinite;
}

.mirc-next-hint[hidden] {
  display: none;
}

.mirc-next-hint:hover {
  color: #fff;
  border-color: #7fd7ff;
}

.mirc-next-caret {
  animation: mirc-next-blink 1.15s steps(1, end) infinite;
}

@keyframes mirc-next-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
}

@keyframes mirc-next-blink {
  0%, 55% {
    opacity: 1;
  }
  56%, 100% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mirc-next-hint,
  .mirc-next-caret {
    animation: none;
  }
}

/* Win98-style VeilNet profile browser (nicklist name click) */
.mirc-browser {
  position: fixed;
  z-index: 95;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  width: min(860px, 94vw);
  height: min(78vh, 900px);
  min-width: 320px;
  min-height: 220px;
  max-width: 98vw;
  max-height: 94vh;
  overflow: hidden;
  resize: both;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.45),
    inset 1px 1px 0 var(--mirc-hi),
    inset -1px -1px 0 var(--mirc-lo);
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
  user-select: none;
  -webkit-user-select: none;
}

.mirc-browser.is-open {
  display: flex;
}

.mirc-browser[hidden] {
  display: none !important;
}

.mirc-browser.is-dragging {
  cursor: grabbing;
}

.mirc-browser-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 6px;
  background: linear-gradient(90deg, var(--mirc-title) 0%, var(--mirc-title2) 100%);
  color: #fff;
  cursor: grab;
  touch-action: none;
}

.mirc-browser.is-dragging .mirc-browser-titlebar {
  cursor: grabbing;
}

.mirc-browser-appicon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(135deg, #fff 0 2px, transparent 2px),
    linear-gradient(45deg, #6cf 0%, #06c 55%, #003 100%);
  border: 1px solid #001a4d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.mirc-browser-title-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.mirc-browser-controls {
  display: inline-flex;
  gap: 2px;
}

.mirc-browser-controls .btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  padding: 0;
  border: 1px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: var(--mirc-face);
  color: #000;
  font: 700 10px/12px "MS Sans Serif", Tahoma, sans-serif;
  cursor: default;
}

.mirc-browser-controls .btn.close {
  cursor: pointer;
}

.mirc-browser-controls .btn.close:active {
  border-color: var(--mirc-dk) var(--mirc-hi) var(--mirc-hi) var(--mirc-dk);
}

.mirc-browser-menubar {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  padding: 2px 8px;
  background: var(--mirc-face);
  border-bottom: 1px solid var(--mirc-lo);
  color: #000;
}

.mirc-browser-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px;
  background: var(--mirc-face);
  border-bottom: 1px solid var(--mirc-lo);
}

.mirc-browser-tool {
  padding: 2px 8px;
  border: 1px solid transparent;
  color: #000;
  cursor: default;
}

.mirc-browser-tool:not(.is-disabled) {
  cursor: pointer;
}

.mirc-browser-tool:not(.is-disabled):hover {
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: #d4d0c8;
}

.mirc-browser-tool.is-disabled {
  color: #808080;
}

.mirc-browser-address {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--mirc-face);
  border-bottom: 1px solid var(--mirc-lo);
}

.mirc-browser-address-label {
  flex: 0 0 auto;
  color: #000;
}

.mirc-browser-url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 4px;
  border: 1px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: #fff;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirc-browser-view {
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px;
  border: 2px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  background: #fff;
}

.mirc-browser-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.mirc-browser-status {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-top: 1px solid var(--mirc-hi);
  background: var(--mirc-face);
  color: #000;
}

/* Log focus flash retired (no temporary highlight on new lines). */
.mirc-line.is-focused {
  outline: none;
  background: transparent;
}

.mirc-nicks .mirc-avatar {
  cursor: pointer;
}

.mirc-nicks .mirc-avatar:hover {
  border-color: #aaa;
  outline: 1px solid #7fd7ff;
}

.mirc-image-modal {
  position: fixed;
  z-index: 80;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  width: min(720px, 92vw);
  height: min(70vh, 820px);
  min-width: 280px;
  min-height: 180px;
  max-width: 96vw;
  max-height: 92vh;
  overflow: hidden;
  resize: both;
  background: var(--mirc-face);
  border: 2px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.45),
    inset 1px 1px 0 var(--mirc-hi),
    inset -1px -1px 0 var(--mirc-lo);
}

.mirc-image-modal.is-open {
  display: flex;
}

.mirc-image-modal[hidden] {
  display: none !important;
}

.mirc-image-modal.is-dragging {
  user-select: none;
  cursor: grabbing;
}

.mirc-image-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 4px 3px 8px;
  background: linear-gradient(90deg, var(--mirc-title) 0%, var(--mirc-title2) 100%);
  border-bottom: 1px solid var(--mirc-dk);
  color: #fff;
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  cursor: grab;
  touch-action: none;
}

.mirc-image-modal.is-dragging .mirc-image-bar {
  cursor: grabbing;
}

.mirc-image-bar #mirc-image-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.mirc-image-bar .mirc-profile-link {
  color: #fff;
  text-decoration: underline;
  pointer-events: auto;
}

.mirc-image-bar .mirc-profile-hint {
  opacity: 0.85;
  pointer-events: none;
}

.mirc-image-close {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 16px;
  height: 14px;
  padding: 0;
  border: 1px solid;
  border-color: var(--mirc-hi) var(--mirc-dk) var(--mirc-dk) var(--mirc-hi);
  background: var(--mirc-face);
  color: #000;
  font: 700 10px/12px "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.mirc-image-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 8px;
  background: #000;
  border: 2px solid;
  border-color: var(--mirc-lo) var(--mirc-hi) var(--mirc-hi) var(--mirc-lo);
  margin: 4px;
}

.mirc-image-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  border: 1px solid #404040;
}

.mirc-image-frame img[hidden] {
  display: none;
}

.mirc-audio-player {
  box-sizing: border-box;
  width: min(420px, 92%);
  margin: 12px auto;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #242424 100%);
  border: 1px solid #1a1a1a;
  border-top-color: #6a6a6a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #ddd;
  font: 11px Tahoma, "Segoe UI", Arial, sans-serif;
}

.mirc-audio-player[hidden] {
  display: none !important;
}

.mirc-audio-lcd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
  background: #000810;
  border: 1px solid #003308;
  color: #00ef21;
  font: 11px/1.3 "Courier New", Courier, monospace;
  text-shadow: 0 0 4px rgba(0, 239, 33, 0.35);
}

.mirc-audio-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mirc-audio-transport {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.mirc-audio-btn {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  background: linear-gradient(180deg, #6a6a6a 0%, #4a4a4a 50%, #3a3a3a 100%);
  color: #f0f0f0;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mirc-audio-btn:hover {
  background: linear-gradient(180deg, #7a7a7a 0%, #5a5a5a 50%, #4a4a4a 100%);
}

.mirc-audio-btn.is-inverted {
  background: #e8e8e8;
  color: #1a1a1a;
  border-color: #0a0a0a;
}

.mirc-audio-time {
  flex: 1;
  min-width: 0;
  color: #c8c8c8;
  font: 11px "Courier New", Courier, monospace;
}

.mirc-audio-seek {
  display: block;
  width: 100%;
  height: 14px;
  margin: 0;
  accent-color: #00c818;
  cursor: pointer;
}

.mirc-log {
  flex: 1 1 0;
  margin: 0;
  padding: 10px 12px;
  color: #d0d0d0;
  font-size: 15px;
  line-height: 1.45;
  overflow: auto;
  min-height: 0;
}

.mirc-line.msg .dcc-link,
.mirc-line.dcc .dcc-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6cf;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.mirc-line.msg .dcc-link:hover,
.mirc-line.dcc .dcc-link:hover {
  color: #9ef;
}

/* Hybrid message blocks: IRC chrome, 2026 readability */
.mirc-line {
  word-wrap: break-word;
  max-width: 40rem;
  margin: 0 0 18px;
}

.mirc-msg-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 2px;
  line-height: 1.2;
}

.mirc-msg-meta .nick {
  font-weight: 700;
  font-size: 15px;
}

.mirc-meta-sep {
  color: #3a3a3a;
  font-size: 11px;
  line-height: 1;
}

.mirc-msg-meta .ts {
  color: #3a3a3a;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: 400;
}

.mirc-msg {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mirc-msg-stack {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 1px;
}

.mirc-msg .msg-text {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--nc, #888) 55%, transparent);
  background: color-mix(in srgb, var(--nc, #888) 15%, #0c0c14);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Speech-bubble tail on the first bubble, pointing at the avatar (left) */
.mirc-msg-stack .msg-text:first-child::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -7px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-left: 0;
  border-right-color: color-mix(in srgb, var(--nc, #888) 55%, transparent);
}

/* One-shot reaction animations keyed off strong moods */
@keyframes mirc-fx-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

@keyframes mirc-fx-pop {
  0% { transform: scale(0.55); opacity: 0.2; }
  60% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes mirc-fx-glow {
  0%, 100% { box-shadow: 0 2px 7px rgba(0, 0, 0, 0.55); }
  50% {
    box-shadow: 0 0 15px 3px color-mix(in srgb, var(--nc, #888) 85%, transparent),
      0 2px 7px rgba(0, 0, 0, 0.55);
  }
}

@keyframes mirc-fx-sink {
  0% { transform: translateY(-3px); filter: saturate(1) brightness(1); }
  100% { transform: translateY(0); filter: saturate(0.3) brightness(0.78); }
}

.mirc-line[data-fx="shake"] .mirc-avatar--lg {
  animation: mirc-fx-shake 0.5s ease 1;
}

.mirc-line[data-fx="pop"] .mirc-avatar--lg {
  animation: mirc-fx-pop 0.35s ease-out 1;
}

.mirc-line[data-fx="glow"] .mirc-avatar--lg {
  animation: mirc-fx-glow 1.2s ease-in-out 1;
}

.mirc-line[data-fx="sink"] .mirc-avatar--lg {
  animation: mirc-fx-sink 0.8s ease-out 1 forwards;
}

@media (prefers-reduced-motion: reduce) {
  .mirc-line[data-fx] .mirc-avatar--lg {
    animation: none;
  }
}

.mirc-line.action .msg-action,
.mirc-msg .msg-action {
  font-style: italic;
  color: var(--mirc-emote);
  font-family: "Consolas", "Lucida Console", "Courier New", Courier, monospace;
  font-size: 13px;
}

.mirc-line--sys {
  margin: 0 0 6px;
  padding-left: 4px;
  font-size: 13px;
  line-height: 1.4;
}

.mirc-line--sys .ts {
  color: #3a3a3a;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  margin-right: 4px;
}

.mirc-line--sys .nick,
.mirc-line--sys .sys-nick {
  font-weight: 700;
  color: inherit;
}

.mirc-line--sys .mirc-avatar {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin: 0 3px;
}

/* Enter / leave */
.mirc-line--presence,
.mirc-line.join,
.mirc-line.part {
  color: var(--mirc-presence);
}

.mirc-line--presence .body,
.mirc-line.join .body,
.mirc-line.part .body {
  color: var(--mirc-presence);
}

/* Emotes, descriptors, other *** noise */
.mirc-line--emote,
.mirc-line.system,
.mirc-line.dcc {
  color: var(--mirc-emote);
}

.mirc-line--emote .body,
.mirc-line.system .body {
  color: var(--mirc-emote);
}

/* media player "now playing" plugin spam: nick-colored banner + monospace box */
.mirc-line--winamp {
  max-width: none;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.35;
  font-family: "Consolas", "Lucida Console", "Courier New", Courier, monospace;
}

.mirc-winamp-head {
  margin: 0 0 2px;
}

.mirc-winamp-head .ts {
  color: #3a3a3a;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  margin-right: 4px;
}

.mirc-winamp-banner {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mirc-ascii {
  margin: 0;
  padding: 0;
  overflow-x: auto;
  font-family: "Consolas", "Lucida Console", "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.25;
  color: inherit;
}

.mirc-ascii-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: pre;
}

.mirc-ascii-line .ts {
  flex: 0 0 auto;
  color: #3a3a3a;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
}

.mirc-ascii-text {
  flex: 0 0 auto;
  white-space: pre;
  letter-spacing: 0;
}

.mirc-status {
  flex: 0 0 auto;
  padding: 2px 36px 2px 6px;
  background: var(--mirc-face);
  border-top: 1px solid var(--mirc-hi);
  box-shadow: inset 0 1px 0 var(--mirc-lo);
  font: 11px "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
}

@media (max-width: 520px) {
  .mirc-avatar--lg {
    width: 52px;
    height: 52px;
  }

  .mirc-msg {
    gap: 8px;
  }

  .mirc-log {
    padding: 8px;
    font-size: 14px;
  }
}