/* Battle rooms: the ROOM panel in the battle window, and the invite cards that
   pop up wherever the app is open when somebody opens one. Loaded by both
   pages, so it carries its own fallbacks for the battle-window variables. */
:root {
  --bzn-glass: rgba(10, 18, 30, 0.9);
  --bzn-line: rgba(127, 178, 229, 0.22);
  --bzn-line-strong: rgba(127, 178, 229, 0.5);
  --bzn-text: #dfe9f5;
  --bzn-dim: rgba(180, 205, 230, 0.62);
  --bzn-blue: #4da3ff;
  --bzn-gold: #6eb0ff;
  --bzn-red: #ff4455;
  --bzn-green: #5ad28c;
  --bzn-font: "Segoe UI", system-ui, sans-serif;
}

/* ---------- topbar launcher ---------- */
.bz-room-btn.is-live {
  color: #06101c;
  background: var(--bzn-green);
  border-color: var(--bzn-green);
}
.bz-room-btn.is-open { border-color: var(--bzn-line-strong); }

/* ---------- the panel ---------- */
.bz-room-panel {
  position: fixed; top: 52px; right: 12px; width: 280px; z-index: 60;
  padding: 12px;
  background: var(--bzn-glass);
  border: 1px solid var(--bzn-line);
  backdrop-filter: blur(8px);
  color: var(--bzn-text);
  font-family: var(--bzn-font); font-size: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.bz-room-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bz-room-title { font-size: 10px; letter-spacing: 0.22em; color: var(--bzn-dim); }
.bz-room-chip {
  font-size: 9px; letter-spacing: 0.14em; padding: 2px 6px;
  border: 1px solid var(--bzn-line-strong); color: var(--bzn-dim);
}
.bz-room-chip.is-live { color: #06101c; background: var(--bzn-green); border-color: var(--bzn-green); }
.bz-room-chip.is-wait { color: var(--bzn-gold); border-color: var(--bzn-gold); }
.bz-room-chip.is-error { color: var(--bzn-red); border-color: var(--bzn-red); }
.bz-room-close {
  margin-left: auto; width: 20px; height: 20px; line-height: 1;
  background: none; border: 1px solid var(--bzn-line);
  color: var(--bzn-dim); cursor: pointer; font-size: 14px;
}
.bz-room-close:hover { color: var(--bzn-text); border-color: var(--bzn-line-strong); }

.bz-room-field { display: block; margin-bottom: 8px; }
.bz-room-field span {
  display: block; font-size: 9px; letter-spacing: 0.14em;
  color: var(--bzn-dim); margin-bottom: 4px;
}
.bz-room-panel input[type="text"] {
  width: 100%; padding: 6px 8px;
  background: rgba(8, 16, 27, 0.9);
  border: 1px solid var(--bzn-line);
  color: var(--bzn-text); font-family: var(--bzn-font); font-size: 12px;
  letter-spacing: 0.08em;
}
.bz-room-panel input[type="text"]:focus { outline: none; border-color: var(--bzn-blue); }

.bz-room-transport { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.bz-room-transport button,
.bz-room-join button,
.bz-room-code-row button {
  background: rgba(8, 16, 27, 0.9);
  border: 1px solid var(--bzn-line);
  color: var(--bzn-dim);
  font-family: var(--bzn-font); font-size: 10px; letter-spacing: 0.1em;
  padding: 6px 8px; cursor: pointer;
}
.bz-room-transport button:hover,
.bz-room-join button:hover,
.bz-room-code-row button:hover { color: var(--bzn-text); border-color: var(--bzn-line-strong); }
.bz-room-transport button.is-on { color: var(--bzn-blue); border-color: var(--bzn-blue); }

.bz-room-primary {
  width: 100%; padding: 8px;
  background: rgba(30, 58, 92, 0.85);
  border: 1px solid var(--bzn-line-strong);
  color: var(--bzn-text);
  font-family: var(--bzn-font); font-size: 11px; letter-spacing: 0.14em;
  cursor: pointer;
}
.bz-room-primary:hover { background: rgba(45, 82, 126, 0.9); }
.bz-room-primary:disabled { opacity: 0.5; cursor: default; }

.bz-room-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0; font-size: 9px; letter-spacing: 0.14em; color: var(--bzn-dim);
}
.bz-room-divider::before, .bz-room-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--bzn-line);
}
.bz-room-join { display: grid; grid-template-columns: 1fr auto; gap: 4px; }

.bz-room-code-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.bz-room-code {
  flex: 1; padding: 6px 8px; text-align: center;
  font-size: 17px; letter-spacing: 0.28em; color: var(--bzn-gold);
  background: rgba(8, 16, 27, 0.9); border: 1px solid var(--bzn-line-strong);
}
.bz-room-sub { font-size: 10px; color: var(--bzn-dim); margin-bottom: 8px; }

.bz-room-roster { list-style: none; margin: 0 0 8px; padding: 0; }
.bz-room-roster li {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0; font-size: 11px; border-bottom: 1px solid rgba(127, 178, 229, 0.1);
}
.bz-room-roster i {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 6px currentColor;
}
.bz-room-roster b { font-size: 8px; letter-spacing: 0.12em; color: var(--bzn-gold); }
.bz-room-roster em { font-size: 9px; font-style: normal; color: var(--bzn-dim); }

/* ---------- who is on the map, and the one button that brings them here ---- */
.bz-room-friends {
  margin-bottom: 10px; padding: 8px;
  background: rgba(8, 16, 27, 0.7);
  border: 1px solid var(--bzn-line);
  border-left: 2px solid var(--bzn-green);
}
.bz-room-friends.is-empty { border-left-color: var(--bzn-line); }
.bz-room-friends-head {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 9px; letter-spacing: 0.18em; color: var(--bzn-dim); margin-bottom: 6px;
}
.bz-room-friends-head span { margin-left: auto; letter-spacing: 0.2em; color: var(--bzn-gold); }
.bz-room-friends-none { font-size: 10px; line-height: 1.45; color: var(--bzn-dim); }
.bz-room-friends-list { list-style: none; margin: 0 0 8px; padding: 0; }
.bz-room-friends-list li {
  display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 11px;
}
.bz-room-friends-list i {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 6px currentColor;
}
.bz-room-friends-list b { font-size: 8px; letter-spacing: 0.12em; color: var(--bzn-gold); }
.bz-room-friends-list em { font-size: 9px; font-style: normal; color: var(--bzn-dim); }
.bz-room-invite {
  width: 100%; padding: 7px;
  background: rgba(90, 210, 140, 0.14);
  border: 1px solid var(--bzn-green); color: #c9f5da;
  font-family: var(--bzn-font); font-size: 10px; letter-spacing: 0.14em; cursor: pointer;
}
.bz-room-invite:hover { background: rgba(90, 210, 140, 0.28); color: #fff; }
.bz-room-invite.is-ghost {
  margin-top: 8px;
  background: none; border-color: var(--bzn-line-strong); color: var(--bzn-dim);
}
.bz-room-invite.is-ghost:hover { color: var(--bzn-text); background: rgba(30, 58, 92, 0.6); }
.bz-room-friends-note { margin-top: 6px; font-size: 9px; line-height: 1.45; color: var(--bzn-dim); }

/* Somebody is on the map waiting to be pulled in. */
.bz-room-btn.has-friends { border-color: var(--bzn-green); color: #c9f5da; }

.bz-room-note { font-size: 10px; line-height: 1.45; color: var(--bzn-dim); margin-bottom: 8px; }
.bz-room-error {
  font-size: 10px; line-height: 1.4; color: #ffb0b8;
  border-left: 2px solid var(--bzn-red); padding-left: 7px; margin-bottom: 8px;
}
.bz-room-leave {
  width: 100%; padding: 7px;
  background: none; border: 1px solid var(--bzn-red); color: #ffb0b8;
  font-family: var(--bzn-font); font-size: 10px; letter-spacing: 0.14em; cursor: pointer;
}
.bz-room-leave:hover { background: rgba(255, 68, 85, 0.14); }

/* ---------- invite cards + room toasts ---------- */
.battle-invite-host {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
  font-family: var(--bzn-font);
}
.battle-invite, .battle-toast {
  pointer-events: auto;
  animation: bzn-in 0.22s ease-out;
}
.battle-invite.is-out, .battle-toast.is-out { opacity: 0; transform: translateY(6px); transition: 0.2s ease; }
@keyframes bzn-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.battle-invite {
  width: 268px; padding: 10px 12px;
  background: var(--bzn-glass);
  border: 1px solid var(--bzn-line-strong);
  border-left: 2px solid var(--bzn-green);
  backdrop-filter: blur(8px);
  color: var(--bzn-text); font-size: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.battle-invite-head { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.battle-invite-head b { color: var(--bzn-blue); }
.battle-invite-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--bzn-green);
  box-shadow: 0 0 8px var(--bzn-green); flex: 0 0 auto;
  animation: bzn-pulse 1.6s ease-in-out infinite;
}
@keyframes bzn-pulse { 50% { opacity: 0.35; } }
.battle-invite-close {
  margin-left: auto; width: 18px; height: 18px; line-height: 1;
  background: none; border: none; color: var(--bzn-dim); cursor: pointer; font-size: 14px;
}
.battle-invite-close:hover { color: var(--bzn-text); }
.battle-invite-piece {
  margin: 6px 0 8px; font-size: 11px; color: var(--bzn-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.battle-invite-foot { display: flex; align-items: center; gap: 8px; }
.battle-invite-code {
  font-size: 13px; letter-spacing: 0.2em; color: var(--bzn-gold);
}
.battle-invite-join {
  margin-left: auto; padding: 5px 14px;
  background: rgba(90, 210, 140, 0.16);
  border: 1px solid var(--bzn-green); color: #c9f5da;
  font-family: var(--bzn-font); font-size: 10px; letter-spacing: 0.16em; cursor: pointer;
}
.battle-invite-join:hover { background: rgba(90, 210, 140, 0.3); color: #fff; }

/* A room that is still open after the card has had its minute: it collapses to
   a pill rather than disappearing, because the invitation is still valid. */
.battle-invite.is-mini {
  width: auto; padding: 6px 10px; cursor: pointer;
  transition: width 0.2s ease, padding 0.2s ease;
}
.battle-invite.is-mini .battle-invite-head b,
.battle-invite.is-mini .battle-invite-piece,
.battle-invite.is-mini .battle-invite-code { display: none; }
.battle-invite.is-mini .battle-invite-head {
  font-size: 0;    /* the loose text between the dot and the close button */
  gap: 8px;
}
.battle-invite.is-mini .battle-invite-foot { margin-top: 0; }
.battle-invite.is-mini .battle-invite-join { margin-left: 0; padding: 4px 10px; }

.battle-toast {
  max-width: 268px; padding: 7px 11px;
  background: rgba(10, 18, 30, 0.92);
  border: 1px solid var(--bzn-line);
  border-left: 2px solid var(--bzn-blue);
  color: var(--bzn-text); font-size: 11px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.battle-toast.ok { border-left-color: var(--bzn-green); }
.battle-toast.warn { border-left-color: var(--bzn-gold); }