/* ===========================================================================
   HOLLOW VEIL — LOBBY
   Owned by: client/js/ui/lobby.js

   Builds on the design system in ui.css. Nothing here forks the palette or
   redefines a primitive; every colour is a --v-* / --r-* token, and .v-panel,
   .v-btn, .v-bar, .v-hdr, .v-tag, .v-input, .logo are used as authored.

   Composition: the menu is weighted hard to the left over a scrim, the world
   vista breathes through the middle, and the intel column hugs the right edge.
   =========================================================================== */

#lobby-root {
  --lob-pad: clamp(20px, 3.2vw, 54px);
  --lob-gap: clamp(10px, 1.1vw, 18px);
  --lob-ticker-dur: 30s;
  background: transparent;
}

/* --------------------------------------------------------------- backdrop */
.lob-fx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 0;
}
.lob-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(101deg,
      rgba(5,7,10,.95) 0%, rgba(5,7,10,.88) 24%, rgba(5,7,10,.44) 46%,
      rgba(5,7,10,.10) 62%, rgba(5,7,10,.28) 84%, rgba(5,7,10,.72) 100%),
    linear-gradient(0deg, rgba(5,7,10,.88) 0%, rgba(5,7,10,0) 32%),
    linear-gradient(180deg, rgba(5,7,10,.72) 0%, rgba(5,7,10,0) 16%);
}

/* ----------------------------------------------------------------- stage */
.lob-stage {
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  grid-template-columns: minmax(380px, 34vw) 1fr minmax(290px, 23vw);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "ident ident ident"
    "brand .     side"
    "menu  .     side"
    "foot  foot  foot";
  column-gap: var(--lob-pad);
  row-gap: clamp(14px, 2vh, 30px);
  padding: 0 var(--lob-pad) var(--lob-pad);
}

/* --------------------------------------------------------------- identity */
.lob-ident {
  grid-area: ident;
  display: flex; align-items: flex-end; gap: clamp(16px, 2.4vw, 40px);
  padding: 14px 0 12px;
  border-bottom: var(--bord);
  margin: 0 calc(var(--lob-pad) * -1); padding-left: var(--lob-pad); padding-right: var(--lob-pad);
  background: linear-gradient(180deg, rgba(9,12,17,.82), rgba(9,12,17,.30));
}
.lob-ident-cap, .lob-cap {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--v-text-faint);
}
.lob-ident-name { width: min(220px, 22vw); }
.lob-ident-name .lob-ident-cap { margin-bottom: 5px; }
.lob-callsign {
  text-transform: uppercase; letter-spacing: .18em; padding: 6px 9px;
}
.lob-ident-prog { flex: 1; max-width: 420px; min-width: 160px; }
.lob-ident-line {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.lob-rank {
  font-family: var(--f-mono); font-size: var(--t-sm); color: var(--v-star-bright);
  letter-spacing: .2em; text-transform: uppercase;
}
.lob-level { font-size: var(--t-xs); color: var(--v-text-dim); letter-spacing: .16em; }
.lob-xp { margin-bottom: 5px; }
.lob-xp > i { background: linear-gradient(90deg, var(--v-star-dim), var(--v-star)); }
.lob-ident-cred { text-align: right; }
.lob-cred-val {
  font-size: var(--t-lg); color: var(--v-flare); letter-spacing: .06em; margin-top: 3px;
}

.lob-conn-pill {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  padding: 5px 11px; border: var(--bord);
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--v-text-dim);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.lob-dot {
  width: 6px; height: 6px; background: var(--v-text-faint); flex: none;
  box-shadow: 0 0 8px currentColor;
}
.lob-conn-pill.is-ok  { color: var(--v-ok); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .lob-conn-pill.is-ok { border-color: color-mix(in srgb, var(--v-ok) 32%, var(--v-line)); }
}
.lob-conn-pill.is-ok .lob-dot { background: var(--v-ok); }
.lob-conn-pill.is-warn { color: var(--v-warn); }
.lob-conn-pill.is-warn .lob-dot { background: var(--v-warn); animation: v-pulse 1s infinite ease-in-out; }
.lob-conn-pill.is-bad { color: var(--v-bad); }
.lob-conn-pill.is-bad .lob-dot { background: var(--v-bad); }
.lob-conn-ping { color: var(--v-text-faint); }

/* ------------------------------------------------------------------ brand */
.lob-brand { grid-area: brand; align-self: end; padding-top: clamp(18px, 5vh, 70px); }
.lob-brand-head { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); }

.lob-mark { width: clamp(56px, 5vw, 82px); height: auto; flex: none; overflow: visible; }
.lob-mark-swarm circle {
  fill: none; stroke: var(--v-text-faint); stroke-width: 1;
  transform-origin: 36px 36px;
}
.lob-mark-swarm { animation: lob-spin 96s linear infinite; transform-origin: 36px 36px; }
.lob-mark-swarm circle:nth-child(2) { stroke: var(--v-line-hot); }
.lob-mark-corona {
  fill: none; stroke: var(--v-star-dim); stroke-width: 1;
  animation: v-pulse 5.5s infinite ease-in-out;
}
.lob-mark-star {
  fill: var(--v-star);
  filter: drop-shadow(0 0 12px var(--v-star-dim));
}
.lob-mark-veil { stroke: var(--v-hollow-dim); stroke-width: 1; opacity: .5; }
.lob-mark-veil--b { stroke: var(--v-star-dim); opacity: .35; }
@keyframes lob-spin { to { transform: rotate(360deg); } }

.lob-brand .logo { justify-content: flex-start; gap: .22em; line-height: .92; }
.lob-brand-sub {
  margin-top: 10px; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .38em; text-transform: uppercase; color: var(--v-text-faint);
}
.lob-motd {
  margin-top: 14px; padding: 8px 12px;
  border-left: 2px solid var(--v-star-dim);
  background: rgba(13,17,23,.72);
  font-family: var(--f-mono); font-size: var(--t-sm); color: var(--v-text-dim);
  letter-spacing: .04em; max-width: 46ch;
}
.lob-motd[hidden] { display: none; }

/* ------------------------------------------------------------------- menu */
.lob-menu {
  grid-area: menu; align-self: start; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  max-width: 540px; padding-top: clamp(12px, 2.4vh, 30px);
}
.lob-menu-rule {
  height: 1px; background: var(--v-line); margin: 12px 0 10px; opacity: .8;
}

.lob-row {
  --lob-accent: var(--v-line-hot);
  appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 12px;
  background: linear-gradient(90deg, rgba(18,24,34,.78), rgba(13,17,23,.20));
  border: 1px solid transparent; border-left: 2px solid var(--v-line);
  transition: background .14s var(--ease), border-color .14s var(--ease),
              transform .14s var(--ease-snap);
}
.lob-row:hover:not(:disabled) {
  background: linear-gradient(90deg, rgba(24,32,44,.94), rgba(13,17,23,.30));
  border-left-color: var(--lob-accent);
  transform: translateX(3px);
}
.lob-row:focus-visible { outline: 1px solid var(--lob-accent); outline-offset: 2px; }
.lob-row:active:not(:disabled) { transform: translateX(1px); }
.lob-row:disabled { opacity: .34; cursor: not-allowed; }
.lob-row--primary { --lob-accent: var(--v-star); }
.lob-row--accent { --lob-accent: var(--v-anchor); }

.lob-row-idx {
  font-size: var(--t-xs); color: var(--v-text-faint); letter-spacing: .1em;
  width: 2ch; flex: none;
}
.lob-row-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.lob-row-label {
  font-family: var(--f-mono); font-size: var(--t-lg);
  letter-spacing: .16em; text-transform: uppercase; color: var(--v-text-hot);
  line-height: 1.1;
}
.lob-row--primary .lob-row-label { color: var(--v-star-bright); }
.lob-row--accent .lob-row-label { color: var(--v-anchor); }
.lob-row-sub {
  font-size: var(--t-sm); color: var(--v-text-dim); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lob-row-mark {
  width: 7px; height: 12px; flex: none; background: var(--v-line-hot);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: background .14s var(--ease);
}
.lob-row:hover:not(:disabled) .lob-row-mark { background: var(--lob-accent); }

.lob-spacer { flex: 1; }

/* ------------------------------------------------------------------ queue */
.lob-queue {
  margin-top: 14px; padding: 12px 14px;
  border: var(--bord); border-left: 2px solid var(--v-anchor);
  background: rgba(13,17,23,.88);
}
.lob-queue[hidden] { display: none; }
.lob-queue.is-found { border-left-color: var(--v-star); }
.lob-queue-head { display: flex; align-items: center; gap: 10px; }
.lob-queue-state {
  font-family: var(--f-mono); font-size: var(--t-sm);
  letter-spacing: .22em; text-transform: uppercase; color: var(--v-anchor);
}
.lob-queue.is-found .lob-queue-state { color: var(--v-star-bright); animation: v-pulse 1.1s infinite; }
.lob-queue-mode { color: var(--v-text-faint); }
.lob-queue-stats {
  display: flex; gap: 18px; margin: 9px 0 8px;
  font-size: var(--t-xs); color: var(--v-text-dim); letter-spacing: .12em;
}
.lob-queue-bar > i { background: var(--v-anchor); }
.lob-queue.is-found .lob-queue-bar > i { background: var(--v-star); }
.lob-queue-count {
  margin-top: 7px; font-size: var(--t-sm); letter-spacing: .18em;
  color: var(--v-star-bright); text-transform: uppercase;
}
.lob-queue-count[hidden] { display: none; }

.lob-notice {
  margin-top: 10px; padding: 7px 11px;
  border-left: 2px solid var(--v-info); background: rgba(13,17,23,.9);
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--v-text-dim);
  animation: v-rise .24s var(--ease-snap) both;
}
.lob-notice[hidden] { display: none; }
.lob-notice.is-warn { border-color: var(--v-warn); color: var(--v-warn); }
.lob-notice.is-bad { border-color: var(--v-bad); color: #ffc3cd; }
.lob-notice.is-info { border-color: var(--v-info); }

/* ------------------------------------------------------------------- side */
/* min-width:0 is load-bearing: the ticker is white-space:nowrap, and a grid
   item's automatic minimum size would otherwise let it widen the whole column
   past the viewport. */
.lob-side {
  grid-area: side; align-self: start; min-width: 0;
  display: flex; flex-direction: column; gap: var(--lob-gap);
  padding-top: clamp(18px, 5vh, 70px);
  max-height: 100%; overflow: hidden;
}
.lob-side > .v-panel { background-color: rgba(13,17,23,.9); }

/* ---- veil report ticker */
.lob-ticker-vp { overflow: hidden; padding: 9px 0; }
.lob-ticker-track {
  display: flex; width: max-content; white-space: nowrap;
  animation: lob-ticker var(--lob-ticker-dur) linear infinite;
}
.lob-ticker-copy {
  font-family: var(--f-mono); font-size: var(--t-sm); color: var(--v-text-dim);
  letter-spacing: .1em; padding: 0 0 0 12px;
}
@keyframes lob-ticker { to { transform: translateX(-50%); } }

/* ---- last raid */
.lob-last-body { padding: 11px 12px 12px; }
.lob-last .v-tag { color: var(--v-text-faint); }
.lob-last .v-tag.is-good { color: var(--v-ok); }
.lob-last .v-tag.is-bad { color: var(--v-bad); }
.lob-last-anchor {
  font-size: var(--t-sm); color: var(--v-text-dim); margin-bottom: 10px;
  letter-spacing: .03em;
}
.lob-last-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px;
  border-top: var(--bord); border-bottom: var(--bord); padding: 9px 0;
}
.lob-last-cell .lob-cap { font-size: 9px; letter-spacing: .18em; }
.lob-last-val { font-size: var(--t-md); color: var(--v-text-hot); margin-top: 2px; }
.lob-last-items { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; }
.lob-last-item { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-sm); }
.lob-last-item[hidden] { display: none; }
.lob-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lob-item-qty { color: var(--v-text-faint); }
.lob-last-lost {
  margin-top: 9px; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--v-echo);
}
.lob-last-lost[hidden] { display: none; }

/* ---- instances */
.lob-inst-list { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.lob-inst {
  display: grid; grid-template-columns: 6ch 1fr auto auto; gap: 10px;
  align-items: center; padding: 5px 4px; border-bottom: 1px solid rgba(30,40,54,.5);
}
.lob-inst[hidden] { display: none; }
.lob-inst-code { font-size: var(--t-sm); color: var(--v-text-faint); letter-spacing: .16em; }
.lob-inst-code.is-private { color: var(--v-anchor); }
.lob-inst.is-mine { background: rgba(99,232,255,.05); }
.lob-inst.is-mine .lob-inst-phase { color: var(--v-anchor); }
.lob-inst-pop { font-size: var(--t-xs); color: var(--v-text-dim); }
.lob-inst-phase {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .18em;
  color: var(--v-text-faint); text-transform: uppercase;
}
.lob-inst .v-btn[hidden] { display: none; }
.lob-inst-empty {
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em;
  color: var(--v-text-faint); text-transform: uppercase; padding: 4px 0;
}
.lob-inst-empty[hidden] { display: none; }

/* ------------------------------------------------------------------- foot */
.lob-foot {
  grid-area: foot; display: flex; align-items: center; gap: 10px;
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--v-text-faint); padding-top: 6px; border-top: var(--bord);
}
.lob-foot-sep { opacity: .5; }

/* ============================================================== modals === */
.lob-modal {
  position: absolute; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
}
.lob-modal[hidden] { display: none; }
.lob-modal-scrim {
  position: absolute; inset: 0; background: rgba(5,7,10,.78);
  backdrop-filter: blur(3px);
}
.lob-modal-body { position: relative; z-index: 1; max-height: 88vh; }
.lob-panel {
  width: min(680px, 92vw);
  display: flex; flex-direction: column; max-height: 88vh;
  background-color: var(--v-panel);
  animation: v-rise .26s var(--ease-snap) both;
}
.lob-panel[hidden] { display: none; }
.lob-panel--wide { width: min(880px, 94vw); }
.lob-panel-body { padding: 16px 18px 18px; overflow-y: auto; }
.lob-panel-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-top: var(--bord);
}
.lob-panel-msg {
  margin-top: 12px; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--v-text-dim);
}
.lob-panel-msg[hidden] { display: none; }
.lob-panel-msg.is-warn { color: var(--v-warn); }
.lob-panel-msg.is-bad { color: var(--v-bad); }

.lob-note {
  margin: 0 0 16px; font-size: var(--t-sm); line-height: 1.55;
  color: var(--v-text-dim); border-left: 2px solid var(--v-line-hot);
  padding-left: 11px; max-width: 62ch;
}
.lob-or {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 10px;
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .22em;
  text-transform: uppercase; color: var(--v-text-faint);
}
.lob-or::before, .lob-or::after {
  content: ''; height: 1px; background: var(--v-line); flex: 1;
}
.lob-coderow { display: flex; gap: 8px; }
.lob-codein {
  text-align: center; font-size: var(--t-xl); letter-spacing: .55em;
  text-indent: .55em; padding: 10px; text-transform: uppercase;
}
.lob-codein::placeholder { letter-spacing: .4em; font-size: var(--t-md); }

/* ---- squad */
.lob-squad-none[hidden], .lob-squad-has[hidden] { display: none; }
.lob-codebar {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: var(--bord); background: var(--v-void); margin-bottom: 12px;
}
.lob-codeval {
  font-size: var(--t-xl); letter-spacing: .34em; color: var(--v-anchor);
  flex: 1; text-indent: .34em;
}
.lob-members { display: flex; flex-direction: column; gap: 4px; }
.lob-member {
  display: grid; grid-template-columns: 8px 1fr auto auto auto;
  align-items: center; gap: 11px; padding: 9px 12px;
  border: var(--bord); background: var(--v-panel-2);
}
.lob-member[hidden] { display: none; }
.lob-member .lob-dot { background: var(--v-text-faint); }
.lob-member.is-ready .lob-dot { background: var(--v-ok); }
.lob-member.is-off { opacity: .45; }
.lob-member-name { font-size: var(--t-md); color: var(--v-text-hot); }
.lob-member.is-leader .lob-member-name::after {
  content: 'LEADER'; margin-left: 9px; font-family: var(--f-mono);
  font-size: 9px; letter-spacing: .2em; color: var(--v-star-bright);
  border: 1px solid var(--v-star-dim); padding: 1px 5px;
}
.lob-member-lv { font-size: var(--t-xs); color: var(--v-text-dim); letter-spacing: .1em; }
.lob-member-state {
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .18em;
  color: var(--v-text-faint); min-width: 7ch; text-align: right;
}
.lob-member.is-ready .lob-member-state { color: var(--v-ok); }
.lob-kick[hidden] { display: none; }
.lob-squad-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.lob-squad-ctrl .v-btn[hidden] { display: none; }
.lob-squad-ctrl .v-btn.is-on { border-color: var(--v-ok); color: var(--v-ok); }

/* ---- private instance */
.lob-priv-setup[hidden], .lob-code-display[hidden] { display: none; }
.lob-code-cells {
  display: flex; gap: 10px; justify-content: center; margin: 6px 0 14px;
}
.lob-code-cell {
  width: clamp(52px, 9vw, 76px); height: clamp(64px, 11vw, 92px);
  display: grid; place-items: center;
  font-size: clamp(30px, 5.6vw, 50px); font-weight: 300;
  color: var(--v-anchor); background: var(--v-void);
  border: var(--bord-hot);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  text-shadow: 0 0 22px rgba(99,232,255,.42);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .lob-code-cell { border-color: color-mix(in srgb, var(--v-anchor) 26%, var(--v-line)); }
}
.lob-code-actions { display: flex; justify-content: center; }
.lob-code-hint {
  margin: 12px auto 0; max-width: 52ch; text-align: center;
  font-size: var(--t-sm); color: var(--v-text-dim); line-height: 1.5;
}
.lob-priv-roster {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: var(--bord);
  font-size: var(--t-sm); color: var(--v-text);
}
.lob-priv-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.lob-priv-ctrl .v-btn[hidden] { display: none; }

/* ============================================================ settings === */
.lob-tabs { display: flex; border-bottom: var(--bord); }
.lob-tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 11px 16px; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--v-text-faint);
  border-bottom: 2px solid transparent; transition: color .12s var(--ease);
}
.lob-tab:hover { color: var(--v-text); }
.lob-tab.on { color: var(--v-star-bright); border-bottom-color: var(--v-star); }

.lob-panes { overflow-y: auto; flex: 1; min-height: 0; }
.lob-pane { display: none; padding: 16px 18px 20px; position: relative; }
.lob-pane.on { display: block; }

.lob-sub {
  margin: 20px 0 10px; padding-top: 12px; border-top: var(--bord);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .24em;
  text-transform: uppercase; color: var(--v-text-faint);
}
.lob-pane > .lob-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lob-hint {
  margin: 4px 0 0; font-size: var(--t-sm); color: var(--v-text-faint);
  line-height: 1.5; max-width: 66ch;
}

.lob-row2 { padding: 11px 0; border-bottom: 1px solid rgba(30,40,54,.55); }
.lob-row2-head { display: flex; align-items: center; gap: 12px; }
.lob-row2-label { font-size: var(--t-md); color: var(--v-text); flex: 1; }
.lob-row2-val { font-size: var(--t-sm); color: var(--v-text-dim); }

/* ---- range */
.lob-range {
  --p: 0;
  appearance: none; -webkit-appearance: none; width: 100%; height: 18px;
  background: transparent; margin: 9px 0 0; cursor: pointer; display: block;
}
.lob-range::-webkit-slider-runnable-track {
  height: 3px; background:
    linear-gradient(90deg, var(--v-star) 0 calc(var(--p) * 100%), rgba(255,255,255,.09) calc(var(--p) * 100%) 100%);
}
.lob-range::-moz-range-track {
  height: 3px; background:
    linear-gradient(90deg, var(--v-star) 0 calc(var(--p) * 100%), rgba(255,255,255,.09) calc(var(--p) * 100%) 100%);
}
.lob-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 5px; height: 15px; margin-top: -6px;
  background: var(--v-text-hot); border: 0;
  box-shadow: 0 0 10px -2px var(--v-star);
}
.lob-range::-moz-range-thumb {
  width: 5px; height: 15px; border: 0; border-radius: 0;
  background: var(--v-text-hot); box-shadow: 0 0 10px -2px var(--v-star);
}
.lob-range:focus-visible { outline: 1px solid var(--v-star-dim); outline-offset: 3px; }

/* ---- switch */
.lob-switch {
  appearance: none; cursor: pointer; flex: none; position: relative;
  width: 56px; height: 22px; padding: 0;
  background: var(--v-void); border: var(--bord); color: var(--v-text-faint);
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.lob-switch-knob {
  position: absolute; left: 3px; top: 2px; width: 6px; height: 14px;
  background: var(--v-text-faint);
  transition: background .14s var(--ease), transform .16s var(--ease-snap);
}
.lob-switch-txt {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding-left: 11px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .18em;
  transition: padding .16s var(--ease-snap);
}
.lob-switch:focus-visible { outline: 1px solid var(--v-star-dim); outline-offset: 2px; }
.lob-switch.on { border-color: var(--v-star-dim); color: var(--v-star-bright); }
.lob-switch.on .lob-switch-knob {
  background: var(--v-star); box-shadow: 0 0 10px var(--v-star-dim);
  transform: translateX(44px);
}
.lob-switch.on .lob-switch-txt { padding-left: 0; padding-right: 11px; }

/* ---- segmented */
.lob-seg { display: flex; margin-top: 9px; border: var(--bord); width: max-content; max-width: 100%; }
.lob-seg-btn {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 6px 13px; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--v-text-faint);
  border-right: 1px solid var(--v-line);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.lob-seg-btn:last-child { border-right: 0; }
.lob-seg-btn:hover { color: var(--v-text); background: var(--v-panel-2); }
.lob-seg-btn.on { color: var(--v-star-bright); background: var(--v-panel-3); }

.lob-togglegrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px;
}

/* ---- perf + fov canvases */
.lob-perf { margin-bottom: 16px; }
.lob-perf-canvas, .lob-fov-canvas {
  display: block; width: 100%; height: auto; border: var(--bord); background: var(--v-void);
}
.lob-perf-read {
  display: flex; align-items: center; gap: 14px; margin-top: 7px;
  font-size: var(--t-xs); letter-spacing: .12em; color: var(--v-text-dim);
}
.lob-perf-fps { color: var(--v-text-hot); }
.lob-perf-read .v-tag { margin-left: auto; color: var(--v-text-faint); }
.lob-fovbox { margin: 10px 0 4px; }
.lob-fov-read {
  margin-top: 6px; font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--v-text-faint);
}

/* ---- bindings */
.lob-binds { margin-top: 10px; }
.lob-bind-group {
  margin: 16px 0 6px; font-family: var(--f-mono); font-size: 9px;
  letter-spacing: .26em; color: var(--v-text-faint); text-transform: uppercase;
}
.lob-binds > .lob-bind-group:first-child { margin-top: 4px; }
.lob-bind {
  display: grid; grid-template-columns: 1fr 130px 130px; gap: 8px;
  align-items: center; padding: 4px 0;
}
.lob-bind-label { font-size: var(--t-sm); color: var(--v-text); }
.lob-bind-key {
  appearance: none; cursor: pointer; padding: 6px 8px;
  background: var(--v-panel-2); border: var(--bord-hot); color: var(--v-text);
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.lob-bind-key:hover:not(:disabled) { background: var(--v-panel-3); color: var(--v-star-bright); }
.lob-bind-key.is-empty { color: var(--v-text-faint); border-color: var(--v-line); }
.lob-bind-key:disabled { opacity: .35; cursor: not-allowed; }
.lob-bind-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.lob-bind-warn { font-size: var(--t-xs); color: var(--v-warn); letter-spacing: .04em; }
.lob-bind-warn[hidden] { display: none; }

.lob-rebind {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 2);
  display: grid; place-items: center; background: rgba(5,7,10,.92);
}
.lob-rebind[hidden] { display: none; }
.lob-rebind-box { text-align: center; padding: 26px 34px; border: var(--bord-hot); background: var(--v-panel); }
.lob-rebind-what {
  font-family: var(--f-mono); font-size: var(--t-sm); letter-spacing: .2em;
  text-transform: uppercase; color: var(--v-text-dim);
}
.lob-rebind-prompt {
  margin: 12px 0 8px; font-family: var(--f-mono); font-size: var(--t-xl);
  letter-spacing: .22em; color: var(--v-star-bright); animation: v-pulse 1.3s infinite ease-in-out;
}
.lob-rebind-esc { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .2em; color: var(--v-text-faint); }

/* ---- swatches */
.lob-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
/* No `color` here on purpose: lobby.css loads after ui.css, so declaring one
   would out-order .rarity-N and silently flatten the whole rarity ramp. */
.lob-swatch {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em;
  padding: 4px 8px; border: 1px solid currentColor;
}
.lob-swatch--hollow { color: var(--v-hollow); }
.lob-swatch--bad { color: var(--v-bad); }
.lob-swatch--warn { color: var(--v-warn); }
.lob-swatch--ok { color: var(--v-ok); }
.lob-swatch--anchor { color: var(--v-anchor); }
.lob-swatch--echo { color: var(--v-echo); }

/* ============================================================== curtain === */
.lob-curtain {
  position: absolute; inset: 0; z-index: calc(var(--z-modal) + 5);
  display: grid; place-items: center; background: rgba(5,7,10,.9);
  backdrop-filter: blur(2px);
}
.lob-curtain[hidden] { display: none; }
.lob-curtain-box {
  width: min(520px, 90vw); padding: 30px 32px 26px; text-align: center;
  background-color: var(--v-panel);
}
.lob-curtain-title {
  font-family: var(--f-mono); font-size: var(--t-xl); letter-spacing: .24em;
  text-transform: uppercase; color: var(--v-star-bright); margin-bottom: 12px;
}
.lob-curtain-msg {
  font-size: var(--t-md); line-height: 1.6; color: var(--v-text-dim);
  max-width: 46ch; margin: 0 auto;
}
.lob-curtain-count {
  margin-top: 14px; font-size: var(--t-sm); letter-spacing: .2em;
  text-transform: uppercase; color: var(--v-warn);
}
.lob-curtain-count[hidden] { display: none; }
.lob-curtain-act { margin-top: 22px; }

.lob-spinner { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
.lob-spinner[hidden] { display: none; }
.lob-spinner > i {
  width: 4px; height: 16px; background: var(--v-star-dim);
  animation: lob-bounce 1.05s infinite var(--ease);
}
.lob-spinner > i:nth-child(2) { animation-delay: .13s; }
.lob-spinner > i:nth-child(3) { animation-delay: .26s; }
@keyframes lob-bounce {
  0%, 100% { transform: scaleY(.4); background: var(--v-star-dim); }
  40% { transform: scaleY(1); background: var(--v-star); }
}

.lob-copybuf {
  position: fixed; top: -200px; left: -200px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ============================================================ captions === */
#hv-captions {
  position: absolute; left: 50%; bottom: 15vh; transform: translateX(-50%);
  z-index: var(--z-modal); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: min(760px, 88vw);
}
#hv-captions[hidden] { display: none; }
.hv-cap {
  padding: 5px 14px; background: rgba(5,7,10,.86);
  border-left: 2px solid var(--v-text-faint);
  font-family: var(--f-mono); font-size: var(--t-md);
  letter-spacing: .16em; text-transform: uppercase; color: var(--v-text-hot);
  animation: v-rise .18s var(--ease-snap) both;
  max-width: 100%; text-align: center;
}
#hv-captions.sz-sm .hv-cap { font-size: var(--t-sm); padding: 4px 11px; }
#hv-captions.sz-lg .hv-cap { font-size: var(--t-xl); padding: 8px 20px; letter-spacing: .12em; }
.hv-cap--flare { border-color: var(--v-star); color: var(--v-flare); }
.hv-cap--anchor { border-color: var(--v-anchor); color: var(--v-anchor); }
.hv-cap--echo { border-color: var(--v-echo); color: var(--v-echo); }
.hv-cap--hollow { border-color: var(--v-hollow); color: var(--v-hollow-glow); }

/* ==================================================== accessibility flags */
body.hv-reduced-flash.flare #ui-root { animation: none !important; }
body.hv-reduced-flash #ui-root::after { opacity: .3 !important; }
body.hv-reduced-flash .v-flicker,
body.hv-reduced-flash .lob-queue.is-found .lob-queue-state,
body.hv-reduced-flash .lob-rebind-prompt,
body.hv-reduced-flash .lob-mark-corona,
body.hv-reduced-flash .lob-conn-pill.is-warn .lob-dot { animation: none !important; }
body.hv-reduced-flash .lob-mark-swarm { animation-duration: 480s !important; }

/* ============================================================ responsive */
@media (max-width: 1180px) {
  .lob-stage { grid-template-columns: minmax(340px, 44vw) 1fr minmax(250px, 28vw); }
  .lob-bind { grid-template-columns: 1fr 110px 110px; }
}
@media (max-width: 900px) {
  .lob-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ident" "brand" "menu" "side" "foot";
    grid-template-rows: repeat(5, auto);
    align-content: start;
    overflow-y: auto;
  }
  .lob-side { padding-top: 6px; max-height: none; overflow: visible; }
  .lob-ident { flex-wrap: wrap; gap: 14px; }
  .lob-ident-name { width: 150px; }
  .lob-ident-prog { min-width: 140px; }
  .lob-ident-cred { flex: none; text-align: left; }
  .lob-conn-pill { margin-left: 0; }
  .lob-scrim { background: linear-gradient(0deg, rgba(5,7,10,.95) 30%, rgba(5,7,10,.62) 100%); }
  .lob-togglegrid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* Scoped to the lobby subtree — the shared scale in ui.css is untouched. */
  #lobby-root { --t-3xl: 30px; --t-2xl: 22px; }
  .lob-brand .logo { flex-wrap: wrap; }
  .lob-brand-sub { letter-spacing: .22em; }
  .lob-mark { width: 46px; }
  .lob-bind { grid-template-columns: 1fr 92px 92px; }
  .lob-tab { padding: 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lob-ticker-track, .lob-mark-swarm { animation: none !important; }
}