/* Embedded-content overlay (whiteboard) */
  #embedOverlay {
    position: fixed; inset: 4%; z-index: 60; display: flex; flex-direction: column;
    background: #0c1320; border: 1px solid #2a3a5e; border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.6);
  }
  #embedBar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-bottom: 1px solid #1b2742; font-weight: 700; color: #cfe0ff;
  }
  #embedHint { font-weight: 500; font-size: 11px; color: #8aa0c8; margin-right: auto; font-family: ui-monospace, monospace; user-select: all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
  #embedTab { white-space: nowrap; }
  #embedFrame { flex: 1; border: 0; width: 100%; background: #fff; }
  /* Bulletin board overlay */
  #boardOverlay {
    position: fixed; inset: 0; z-index: 65; display: flex; align-items: center;
    justify-content: center; background: rgba(6,10,20,0.6);
  }
  .board-card {
    width: min(460px, 92vw); max-height: 80vh; background: #0e1726; border: 1px solid #2a3a5e;
    border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.6);
  }
  .board-head { display: flex; align-items: center; justify-content: space-between; color: #cfe0ff; }
  #boardPins { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
  #boardPins .pin { background: #0b1322; border: 1px solid #223255; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
  #boardPins .pin img { max-width: 100%; max-height: 180px; border-radius: 6px; display: block; }
  #boardPins .pin a { color: #79b8ff; word-break: break-all; }
  #boardPins .empty { color: #6b7aa0; font-size: 13px; text-align: center; padding: 10px; }
  #boardForm { display: flex; gap: 8px; }
  #boardForm input { flex: 1; padding: 9px 11px; border-radius: 8px; border: 1px solid #2a3a5e; background: #0b1322; color: #fff; font-size: 14px; }
  #boardForm input:focus { outline: none; border-color: #5aa6ff; }
  /* Spin-the-wheel overlay */
  #wheelOverlay {
    position: fixed; inset: 0; z-index: 65; display: flex; align-items: center;
    justify-content: center; background: rgba(6,10,20,0.6);
  }
  .wheel-card {
    background: #0e1726; border: 1px solid #2a3a5e; border-radius: 16px; padding: 18px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.6);
  }
  #wheelResult { font-size: 16px; font-weight: 800; color: #ffd45a; min-height: 20px; }
  .wheel-actions { display: flex; gap: 8px; }
  /* Styled input modal (replaces window.prompt) */
  #promptModal {
    position: fixed; inset: 0; z-index: 70; display: flex; align-items: center;
    justify-content: center; background: rgba(6,10,20,0.55);
  }
  .modal-card {
    width: min(440px, 90vw); background: #0e1726; border: 1px solid #2a3a5e;
    border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.6);
  }
  .modal-title { font-size: 15px; font-weight: 700; color: #cfe0ff; }
  .modal-field {
    width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid #2a3a5e;
    background: #0b1322; color: #fff; font-size: 15px; font-family: inherit; resize: vertical;
  }
  .modal-field:focus { outline: none; border-color: #5aa6ff; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
  #toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    background: #16233f; border: 1px solid #2f4673; color: #e8eefc;
    padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
    box-shadow: 0 8px 28px rgba(0,0,0,.5); z-index: 50;
  }
  #minimap {
    position: absolute; right: 14px; bottom: 14px; z-index: 16; cursor: pointer;
    border: 1px solid #2a3a5e; border-radius: 8px; background: rgba(10,16,28,0.82);
    box-shadow: 0 6px 18px rgba(0,0,0,.5);
  }
  #flash { position: fixed; inset: 0; z-index: 49; pointer-events: none; background: #5aa6ff; opacity: 0; }
  #flash.on { animation: flashPulse 0.6s ease; }
  @keyframes flashPulse { 0%, 100% { opacity: 0; } 25% { opacity: 0.22; } 60% { opacity: 0.08; } }
  .tile { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 4/3; }
  .tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tile .cap {
    position: absolute; left: 8px; bottom: 6px; font-size: 12px; font-weight: 600;
    background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 999px;
  }
  .tile.local { outline: 2px solid #5aa6ff; }
  .tile.camoff video { visibility: hidden; }
  .tile.camoff::after {
    content: "📷 Camera off"; position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center; color: #8fa3c8; font-size: 13px;
    background: #0b1322;
  }
  #videos .empty { color: #6b7aa0; font-size: 13px; text-align: center; margin-top: 8px; }

/* ── Avatar customizer (join screen + in-game 🙂) ──────────────────────── */
#avatarOverlay {
  position: fixed; inset: 0; z-index: 67; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(6,10,20,0.66);
  backdrop-filter: blur(6px);
}
.modal-card.avatar-modal {
  width: min(600px, 96vw); padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #111c30, #0b1422);
  border: 1px solid #2f4673; border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  animation: avatarPop .22s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes avatarPop { from { opacity: 0; transform: scale(.93) translateY(10px); } to { opacity: 1; transform: none; } }
.av-head {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  border-bottom: 1px solid #1c2840;
  background: linear-gradient(180deg, rgba(90,166,255,.10), transparent);
}
.av-title { font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: #eaf1ff; }
.av-title::before { content: "🎨 "; }
.av-random {
  margin-left: auto; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #cfe0ff; font-family: inherit;
  background: #16233f; border: 1px solid #2f4673;
  transition: transform .1s ease, background .15s, border-color .15s;
}
.av-random:hover { background: #1c2c4d; border-color: #4774b8; transform: translateY(-1px); }
.av-random:active { transform: scale(.96) rotate(-8deg); }
.av-body { display: flex; gap: 20px; padding: 20px 18px; align-items: flex-start; flex-wrap: wrap; }
.av-stage {
  flex: none; width: 168px; height: 168px; border-radius: 22px; display: grid; place-items: center;
  background: radial-gradient(110% 90% at 50% 12%, #2a4a7e 0%, #11223e 55%, #0a1322 100%);
  border: 1px solid #34528a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 40px rgba(90,166,255,.12), 0 8px 24px rgba(0,0,0,.45);
}
#avatarPreview { width: 160px; height: 160px; }
.av-body .opts { flex: 1 1 280px; min-width: 244px; display: flex; flex-direction: column; gap: 13px; }
.av-body .opt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.av-body .opt-row > .lbl {
  width: 72px; flex: none; font-size: 11px; font-weight: 700; color: #8aa0c8;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.sw-grid, .chip-row { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; }
/* colour swatches */
.avatar-modal .sw {
  width: 27px; height: 27px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .12s ease, box-shadow .12s ease;
}
.avatar-modal .sw:hover { transform: scale(1.22); }
.avatar-modal .sw.sel { box-shadow: 0 0 0 3px #5aa6ff, 0 1px 4px rgba(0,0,0,.5); transform: scale(1.08); }
/* chips (hair / eyes / hat / pet) */
.avatar-modal .chip {
  min-width: 38px; height: 38px; padding: 0 11px; border-radius: 11px; cursor: pointer;
  border: 1px solid #2a3a5e; background: #0e1828; color: #e8eefc; font-size: 19px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s ease, border-color .12s, background .12s, box-shadow .12s;
}
.avatar-modal .chip:hover { transform: translateY(-2px); border-color: #3f5d92; background: #14223c; }
.avatar-modal .chip.sel { border-color: #5aa6ff; background: #18335c; box-shadow: inset 0 0 0 1px #5aa6ff; }
#hairOpts .chip, #eyesOpts .chip { font-size: 14px; font-weight: 600; }
/* Pixel-character thumbnail grid: 40 sprites in a 5-wide grid, each thumb
   shows only the top-left 20×32 cell (down/idle) at 2× zoom. The full sheet
   is 60×128 (3 cols × 4 rows of 20×32) → at 2× the image becomes 120×256, so
   a 40×64 thumb at background-position 0 0 lands exactly on that cell. */
.avatar-modal .char-grid {
  display: grid; grid-template-columns: repeat(5, 40px); gap: 8px; flex: 1;
  justify-content: start; max-height: 280px; overflow-y: auto; padding: 6px;
  background: #0a1322; border: 1px solid #1f2d4a; border-radius: 10px;
}
.avatar-modal .char-thumb {
  width: 40px; height: 64px; padding: 0; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; background: #14223c no-repeat;
  background-size: 120px 256px; background-position: 0 0; image-rendering: pixelated;
}
.avatar-modal .char-thumb:hover { border-color: #3f5d92; }
.avatar-modal .char-thumb.sel { border-color: #5aa6ff; box-shadow: 0 0 0 2px rgba(90,166,255,.35); }
.avatar-modal .modal-actions { padding: 0 18px 18px; }
.avatar-modal .modal-actions .primary { padding: 11px 24px; border-radius: 11px; }
/* compact preview on the join card (explicit size beats the global canvas{100%}) */
#joinAvatarPreview {
  width: 120px; height: 120px; flex: none; cursor: pointer;
  border-radius: 18px; border: 1px solid #34528a;
  background: radial-gradient(110% 90% at 50% 12%, #2a4a7e, #0a1322);
  transition: transform .12s ease, border-color .12s, box-shadow .12s;
}
#joinAvatarPreview:hover { transform: scale(1.05); border-color: #4774b8; box-shadow: 0 6px 20px rgba(90,166,255,.25); }

/* ── Mic / camera settings ─────────────────────────────────────────────── */
#settingsOverlay {
  position: fixed; inset: 0; z-index: 67; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(6,10,20,0.66); backdrop-filter: blur(6px);
}
.modal-card.settings-modal {
  width: min(440px, 94vw); padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #111c30, #0b1422);
  border: 1px solid #2f4673; border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.6);
  animation: avatarPop .22s cubic-bezier(.2,.9,.3,1.2) both;
}
.set-title { font-size: 17px; font-weight: 800; color: #eaf1ff; }
.set-title::before { content: "⚙️ "; }
.set-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.set-row { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: #8aa0c8; text-transform: uppercase; letter-spacing: .04em; }
.set-row select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid #2a3a5e; background: #0e1726;
  color: #fff; font-size: 14px; font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.set-row select:focus { outline: none; border-color: #5aa6ff; }
.set-hint { margin: 0; font-size: 12px; color: #6b7aa0; }
.settings-modal .modal-actions { padding: 0 18px 18px; }

/* ── Top-bar "More" popover ────────────────────────────────────────────── */
.more-wrap { position: relative; display: inline-flex; }
.more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  display: flex; flex-direction: column; gap: 3px; padding: 6px;
  background: #0e1726; border: 1px solid #2a3a5e; border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.6); min-width: 212px;
  animation: avatarPop .14s ease both;
}
.more-menu .icon {
  width: 100%; height: 40px; justify-content: flex-start; gap: 12px; padding: 0 12px;
  font-size: 18px; border-color: transparent; background: transparent;
}
.more-menu .icon:hover { background: #1a2c4d; border-color: #2a3a5e; }
.more-menu .icon.act { background: #16335c; border-color: #5aa6ff; }
.more-menu .icon::before { display: none; }              /* no tooltip arrow in the menu */
.more-menu .icon::after {                                 /* show the label inline instead */
  content: attr(data-label); position: static; transform: none; inset: auto;
  opacity: 1; pointer-events: none; transition: none; white-space: nowrap;
  background: none; border: 0; box-shadow: none; padding: 0;
  font-size: 13.5px; font-weight: 600; color: #dce7fb;
}

/* ── Participant actions popover (per-person ⋯) ────────────────────────── */
.row-menu {
  position: fixed; z-index: 71; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: #0e1726; border: 1px solid #2a3a5e; border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.6); min-width: 170px;
  animation: avatarPop .12s ease both;
}
.rm-item {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: #e8eefc;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
}
.rm-item:hover { background: #1a2c4d; border-color: #2a3a5e; }
.rm-ico { font-size: 17px; width: 20px; text-align: center; flex: none; }

/* DTLN noise-cancellation controls inside the settings modal */
.set-row.row-inline { flex-direction: row; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; color: #e8eefc; font-weight: 600; cursor: pointer; }
.set-row.row-inline input[type="checkbox"] { width: 17px; height: 17px; flex: none; accent-color: #5aa6ff; }
#nsStrength { width: 100%; accent-color: #5aa6ff; cursor: pointer; }
#nsStrengthVal { color: #cfe0ff; }

/* Active-speaker glow on the video tiles (green = talking) */
.tile.speaking { outline: 3px solid #39d98a !important; box-shadow: 0 0 0 2px rgba(57,217,138,.30), 0 0 18px rgba(57,217,138,.55); }

/* Live mic-level meter in the settings modal */
.mic-meter { width: 100%; height: 12px; border-radius: 999px; background: #0b1322; border: 1px solid #2a3a5e; overflow: hidden; }
#micLevelBar { height: 100%; width: 0; background: #33476e; border-radius: 999px; transition: width .06s linear, background .12s; }

/* Pre-join camera check inside the settings modal (mirrored like a selfie view) */
#setPreview { width: 100%; max-height: 180px; border-radius: 10px; background: #0b1322; border: 1px solid #2a3a5e; object-fit: cover; transform: scaleX(-1); margin: 6px 0 2px; }

/* New-version banner — pinned top-center, above everything (a deploy happened;
   this page is running stale assets until reloaded) */
#updateBanner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 10px;
  background: #14223c; border: 1px solid #3d5a96; border-radius: 12px;
  padding: 10px 14px; font-size: 14px; color: #e8eefc;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
#updateBanner button {
  border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
#updateReloadBtn { background: #4f8cff; color: #fff; font-weight: 600; }
#updateLaterBtn { background: transparent; color: #9fb3d9; }

/* ── Manage editors modal (Phase A UI) ─────────────────────────────────── */
#editorsOverlay {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 22, 0.62); backdrop-filter: blur(2px);
}
.modal-card.editors-modal { width: min(92vw, 480px); padding: 18px 20px 14px; }
.editors-modal .ed-hint { margin: 4px 0 12px; color: #9fb0d0; font-size: 12.5px; line-height: 1.45; }
.editors-modal .ed-add { display: flex; gap: 8px; margin-bottom: 12px; }
.editors-modal .ed-add input {
  flex: 1; padding: 8px 11px; border-radius: 8px; border: 1px solid #2a3a5e;
  background: #0b1322; color: #dce7fb; font: inherit;
}
.editors-modal .ed-add input:focus { outline: none; border-color: #5aa6ff; }
.editors-modal .ed-list { list-style: none; padding: 0; margin: 0; max-height: 38vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.editors-modal .ed-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  background: #11203a; border: 1px solid #1b2742; border-radius: 8px;
}
.editors-modal .ed-email { flex: 1; font-size: 13px; color: #dce7fb; }
.editors-modal .ed-del { width: 28px; height: 28px; padding: 0; font-size: 16px; line-height: 1; }
.editors-modal .ed-empty { color: #8aa0c8; font-size: 12.5px; font-style: italic; padding: 8px 4px; }

/* ── Zone settings popover ─────────────────────────────────────────────── */
.zone-popover { min-width: 260px; padding: 10px 12px; }
.zone-popover .zp-title { font-weight: 700; color: #cfe0ff; margin-bottom: 8px; font-size: 14px; }
.zone-popover .zp-sec { margin-bottom: 10px; }
.zone-popover .zp-sec:last-child { margin-bottom: 0; }
.zone-popover .zp-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; color: #8aa0c8; margin-bottom: 5px; }
.zone-popover .zp-radios { display: flex; flex-direction: column; gap: 4px; }
.zone-popover .zp-radio { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #dce7fb; cursor: pointer; }
.zone-popover .zp-radio input { accent-color: #5aa6ff; }
.zone-popover .zp-add { display: flex; gap: 6px; margin-top: 6px; }
.zone-popover .zp-add input { flex: 1; padding: 5px 8px; border-radius: 6px; border: 1px solid #2a3a5e; background: #0b1322; color: #dce7fb; font-size: 12.5px; }
.zone-popover .zp-add button { padding: 5px 10px; }
.zone-popover .zp-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 3px; }
.zone-popover .zp-row { display: flex; align-items: center; gap: 6px; padding: 4px 7px; background: #11203a; border-radius: 6px; font-size: 12px; }
.zone-popover .zp-row .zp-email { flex: 1; color: #dce7fb; overflow: hidden; text-overflow: ellipsis; }
.zone-popover .zp-row .zp-del { padding: 2px 6px; font-size: 12px; line-height: 1; }
.zone-popover .zp-empty { font-size: 11.5px; color: #8aa0c8; font-style: italic; padding: 2px 0; }