@import "https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&display=swap";

/* src/style.css */
:root {
  color-scheme: dark;
  --bg-deep: #07131f;
  --bg-mid: #12344f;
  --bg-glow: rgba(29, 181, 243, 0.22);
  --panel: rgba(8, 22, 36, 0.76);
  --panel-strong: rgba(7, 18, 30, 0.92);
  --panel-border: rgba(255, 255, 255, 0.14);
  --text-main: #f2f8ff;
  --text-soft: rgba(242, 248, 255, 0.74);
  --accent: #12f0a7;
  --accent-deep: #ffb340;
  --danger: #ff5d73;
  --arena-bg-0: #070f1c;
  --arena-bg-1: #0c1b33;
  --arena-bg-2: #122849;
  --glass-card-bg: rgba(255, 255, 255, 0.06);
  --glass-card-border: rgba(255, 255, 255, 0.14);
  --glow-cyan: rgba(107, 229, 255, 0.58);
  --glow-green: rgba(109, 255, 198, 0.54);
  --mode-gold: #ffc756;
  --mode-violet: #a181ff;
  --mode-cyan: #4ee8ff;
  --mode-amber: #ffb95f;
  --mode-purple: #a970ff;
  --mode-red: #ff8a6a;
  --radius-shell-lg: 30px;
  --radius-shell-md: 20px;
  --radius-shell-sm: 14px;
  --ui-shell-margin: 16px;
  --ui-shell-radius: 28px;
  --ui-shell-padding: 20px;
  --ui-shell-gap: 20px;
  --ui-shell-height: calc(100dvh - 32px);
  --ui-shell-header-height: 92px;
  --ui-shell-footer-height: 172px;
  --ui-shell-main-min: clamp(360px, 54vh, 520px);
  --ui-shell-safe-width: calc(100% - (var(--ui-shell-margin) * 2));
  --ui-shell-safe-height: calc(100dvh - (var(--ui-shell-margin) * 2));
  font-family:
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}
@media (max-width: 1439px) and (min-width: 1280px) {
  :root {
    --ui-shell-margin: 12px;
    --ui-shell-radius: 24px;
    --ui-shell-padding: 16px;
    --ui-shell-gap: 16px;
    --ui-shell-header-height: 84px;
    --ui-shell-footer-height: 156px;
    --ui-shell-main-min: clamp(320px, 50vh, 460px);
  }
}
@media (max-width: 1279px) and (min-width: 1024px) {
  :root {
    --ui-shell-margin: 12px;
    --ui-shell-radius: 24px;
    --ui-shell-padding: 16px;
    --ui-shell-gap: 16px;
    --ui-shell-header-height: 84px;
    --ui-shell-footer-height: 156px;
    --ui-shell-main-min: clamp(300px, 46vh, 420px);
  }
}
@media (max-width: 1023px) {
  :root {
    --ui-shell-margin: 10px;
    --ui-shell-radius: 20px;
    --ui-shell-padding: 14px;
    --ui-shell-gap: 14px;
    --ui-shell-header-height: 78px;
    --ui-shell-footer-height: 148px;
    --ui-shell-main-min: clamp(280px, 44vh, 360px);
  }
}
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 179, 64, 0.12),
      transparent 28%),
    radial-gradient(
      circle at top right,
      rgba(18, 240, 167, 0.12),
      transparent 25%),
    linear-gradient(
      145deg,
      #05101a 0%,
      #0c2030 45%,
      #091826 100%);
  color: var(--text-main);
}
body {
  position: relative;
}
button,
input {
  font: inherit;
}
button {
  border: none;
  cursor: pointer;
}
.lobby-svg-icon {
  width: 100%;
  height: 100%;
  display: block;
}
.app-root,
.game-mount,
.overlay-mount {
  position: relative;
  width: 100%;
  height: 100%;
}
.overlay-mount {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.game-session,
.game-world {
  position: absolute;
  inset: 0;
}
.game-session {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(15, 255, 184, 0.14),
      transparent 16%),
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 180, 67, 0.1),
      transparent 15%),
    linear-gradient(
      180deg,
      rgba(6, 15, 26, 0.78),
      rgba(7, 19, 31, 0.95));
}
.game-hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.hud-panel,
.hud-action-button {
  backdrop-filter: blur(12px);
  background: rgba(7, 18, 30, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
}
.hud-stats {
  position: absolute;
  top: 18px;
  left: 18px;
  min-width: 180px;
  padding: 16px 18px;
  border-radius: 18px;
}
.hud-score {
  font-size: 26px;
  font-weight: 800;
}
.hud-mass,
.hud-fps {
  margin-top: 6px;
  color: var(--text-soft);
}
.hud-timer {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 22px;
  border-radius: 999px;
}
.hud-timer-value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.hud-timer-mode {
  margin-top: 4px;
  text-align: center;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.hud-action-bar {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.hud-action-button {
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--text-main);
  font-weight: 700;
}
.hud-action-button:hover {
  transform: translateY(-1px);
}
.hud-action-button--secondary {
  background: rgba(255, 255, 255, 0.08);
}
.game-hud[data-hud-emphasis=competitive] .hud-timer {
  border-color: rgba(255, 212, 145, 0.42);
}
.game-hud[data-hud-emphasis=elite] .hud-timer {
  border-color: rgba(179, 153, 255, 0.46);
}
.game-hud[data-hud-emphasis=rush] .hud-timer {
  border-color: rgba(255, 171, 125, 0.46);
}
.game-hud[data-hud-emphasis=team] .hud-timer {
  border-color: rgba(181, 157, 255, 0.42);
}
.game-hud[data-hud-emphasis=survival] .hud-timer {
  border-color: rgba(255, 138, 102, 0.5);
}
.hud-team-summary {
  position: absolute;
  left: 18px;
  top: 150px;
  min-width: 228px;
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}
.hud-team-summary-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(180, 216, 255, 0.86);
}
.hud-team-summary-mass {
  font-size: 15px;
  font-weight: 700;
  color: #e8f7ff;
}
.hud-team-summary-delta,
.hud-team-summary-members {
  font-size: 12px;
  color: rgba(196, 226, 252, 0.82);
}
.hud-zone-alert {
  position: absolute;
  left: 50%;
  top: 112px;
  transform: translateX(-50%);
  min-width: 252px;
  border-radius: 999px;
  padding: 8px 14px;
  text-align: center;
  display: grid;
  gap: 2px;
  border-color: rgba(255, 156, 127, 0.38);
  box-shadow: 0 14px 30px rgba(80, 15, 2, 0.36);
}
.hud-zone-alert-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 199, 167, 0.9);
}
.hud-zone-alert-status {
  font-size: 14px;
  font-weight: 700;
  color: #ffe2d4;
}
.hud-zone-alert-damage {
  font-size: 12px;
  color: rgba(255, 202, 173, 0.86);
}
.match-result-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--ui-shell-margin);
  background:
    radial-gradient(
      circle at 50% 32%,
      rgba(65, 185, 255, 0.26),
      rgba(3, 12, 24, 0.88)),
    rgba(2, 8, 14, 0.74);
  pointer-events: auto;
  overflow: hidden;
}
.match-result-overlay[data-settlement-style=ranked] .match-result-kicker {
  color: #ffe7a8;
}
.match-result-overlay[data-settlement-style=peak] .match-result-kicker {
  color: #cab6ff;
}
.match-result-overlay[data-settlement-style=classic] .match-result-kicker {
  color: #b9f5ff;
}
.match-result-overlay[data-settlement-style=speed] .match-result-kicker {
  color: #ffd197;
}
.match-result-overlay[data-settlement-style=team] .match-result-kicker {
  color: #cfbcff;
}
.match-result-overlay[data-settlement-style=battleRoyale] .match-result-kicker {
  color: #ffb199;
}
.match-result-overlay[data-settlement-style=battleRoyale] .match-result-panel {
  border-color: rgba(255, 141, 96, 0.38);
  box-shadow: 0 28px 90px rgba(130, 18, 5, 0.35);
}
.match-result-overlay[data-settlement-style=team] .match-result-panel {
  border-color: rgba(173, 147, 255, 0.34);
}
.match-result-overlay[data-settlement-style=peak] .match-result-panel {
  border-color: rgba(171, 131, 255, 0.34);
  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(143, 119, 250, 0.22),
      rgba(7, 18, 34, 0.96)),
    linear-gradient(
      145deg,
      rgba(10, 18, 40, 0.92),
      rgba(4, 10, 20, 0.95));
}
.mode-hall-overlay {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--ui-shell-margin);
  pointer-events: none;
}
.mode-hall-overlay.is-visible {
  display: flex;
  pointer-events: auto;
}
.mode-hall-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 16% 12%,
      rgba(125, 235, 255, 0.18),
      transparent 32%),
    radial-gradient(
      circle at 84% 6%,
      rgba(255, 196, 108, 0.17),
      transparent 34%),
    linear-gradient(
      180deg,
      rgba(6, 15, 27, 0.92),
      rgba(4, 11, 21, 0.96));
  backdrop-filter: blur(6px);
}
.mode-hall-shell {
  position: relative;
  width: min(1520px, var(--ui-shell-safe-width));
  height: var(--ui-shell-height);
  max-height: var(--ui-shell-safe-height);
  display: grid;
  grid-template-rows: var(--ui-shell-header-height) minmax(var(--ui-shell-main-min), 1fr) var(--ui-shell-footer-height);
  gap: var(--ui-shell-gap);
  padding: var(--ui-shell-padding);
  border-radius: var(--ui-shell-radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(
      circle at 8% -20%,
      rgba(255, 255, 255, 0.08),
      transparent 44%),
    linear-gradient(
      180deg,
      rgba(10, 24, 42, 0.92),
      rgba(6, 17, 32, 0.92));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.mode-hall-header {
  display: grid;
  grid-template-columns: 160px 1fr 220px;
  align-items: center;
  gap: 16px;
  min-height: 0;
}
.mode-hall-header-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(240, 249, 255, 0.92);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
  min-height: 42px;
}
.mode-hall-header-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.34);
}
.mode-hall-header-btn--highlight {
  background:
    linear-gradient(
      120deg,
      #2ef4c3,
      #ffd26a);
  color: #07131f;
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 8px 22px rgba(52, 242, 191, 0.3);
}
.mode-hall-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.mode-hall-title-wrap {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 68px;
  text-align: center;
}
.mode-hall-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(191, 214, 241, 0.78);
  line-height: 1.15;
  max-height: 18px;
}
.mode-hall-title-wrap h2 {
  margin: 4px 0 0;
  font-size: clamp(34px, 4.3vw, 56px);
  line-height: 1;
  color: #eef7ff;
  max-height: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-hall-main {
  display: grid;
  grid-template-columns: var(--mode-main-columns, 8fr 10fr 7fr);
  gap: 20px;
  min-height: 0;
  overflow: hidden;
}
.mode-hall-hero,
.mode-hall-operation,
.mode-hall-intel {
  border-radius: clamp(16px, 1.5vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03));
  padding: 16px;
  display: grid;
  gap: 16px;
  min-height: 0;
}
.mode-hall-hero {
  grid-template-rows: var(--mode-left-rows, auto minmax(0, 1fr) auto);
}
.mode-hall-operation {
  grid-template-rows: var(--mode-center-rows, 96px 0px minmax(0, 1fr) 84px);
}
.mode-hall-intel {
  grid-template-rows: var( --mode-right-rows, 84px minmax(0, 1fr) 44px minmax(0, 1fr) );
}
.mode-hall-panel-head {
  display: grid;
  gap: 3px;
  min-height: 0;
  align-content: center;
}
.mode-hall-panel-head strong {
  font-size: 18px;
  color: #f3fbff;
}
.mode-hall-panel-head small {
  font-size: 13px;
  color: rgba(191, 215, 239, 0.84);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mode-hall-hero-stage {
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
}
.mode-hall-hero-footnote {
  min-height: 0;
  color: rgba(194, 220, 246, 0.86);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mode-hall-hero-canvas {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(84, 198, 255, 0.26),
      transparent 56%),
    linear-gradient(
      180deg,
      rgba(5, 20, 38, 0.86),
      rgba(5, 15, 30, 0.9));
}
.mode-hall-overlay[data-hero-state=loading] .mode-hall-hero {
  position: relative;
}
.mode-hall-overlay[data-hero-state=loading] .mode-hall-hero::after {
  content: "3D舞台加载中...";
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(181, 229, 255, 0.38);
  background: rgba(6, 16, 29, 0.72);
  color: #d5efff;
  letter-spacing: 0.06em;
  font-size: 12px;
  pointer-events: none;
}
.mode-hall-overlay[data-hero-state=fallback] .mode-hall-hero::after {
  content: "已使用占位主视觉";
}
.mode-hall-room-strip {
  min-height: 0;
  display: grid;
  gap: 10px;
  overflow: hidden;
}
.mode-hall-room-box {
  display: grid;
  gap: 10px;
  min-height: 0;
  align-content: start;
  overflow: hidden;
}
.mode-hall-room-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 10px;
}
.mode-hall-room-line span {
  color: rgba(196, 219, 241, 0.8);
  font-size: 12px;
}
.mode-hall-room-line strong {
  color: #f6fbff;
  font-size: 13px;
}
.mode-hall-room-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mode-hall-room-actions button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(236, 246, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease;
}
.mode-hall-room-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.34);
}
.mode-hall-room-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}
.mode-hall-room-members {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  padding: 8px;
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}
.mode-hall-room-member {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.mode-hall-room-member strong {
  font-size: 13px;
  color: #f2f8ff;
}
.mode-hall-room-member span,
.mode-hall-room-member em {
  font-style: normal;
  font-size: 12px;
  color: rgba(200, 222, 245, 0.84);
}
.mode-hall-room-member--empty {
  text-align: center;
  color: rgba(178, 206, 234, 0.82);
  font-size: 12px;
}
.mode-hall-room-tip {
  font-size: 12px;
  color: rgba(194, 220, 246, 0.86);
  align-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-hall-intel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  overflow: auto;
  min-height: 0;
}
.mode-hall-intel-list li {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(224, 241, 255, 0.92);
  font-size: 13px;
}
.mode-hall-social-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}
.mode-hall-social-tabs button {
  border-radius: 999px;
  border: 1px solid rgba(160, 207, 249, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(208, 231, 252, 0.86);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  cursor: pointer;
}
.mode-hall-social-tabs button.is-active {
  color: #e8f7ff;
  border-color: rgba(122, 238, 255, 0.5);
  background:
    linear-gradient(
      135deg,
      rgba(94, 232, 255, 0.24),
      rgba(89, 165, 255, 0.2));
  box-shadow: 0 10px 18px rgba(20, 100, 180, 0.22);
}
.mode-hall-social-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(4, 13, 25, 0.5);
  padding: 10px;
}
.mode-hall-social-row {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 9px;
  display: grid;
  gap: 2px;
}
.mode-hall-social-row strong {
  font-size: 13px;
  color: #eef9ff;
}
.mode-hall-social-row span {
  font-size: 12px;
  color: rgba(188, 214, 240, 0.84);
}
.mode-hall-footer {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  padding: 14px;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}
.mode-hall-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
}
.mode-hall-tab {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(227, 242, 255, 0.9);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  height: 40px;
}
.mode-hall-tab.is-active {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.18);
  color: #071728;
}
.mode-hall-tab-content {
  display: grid;
  grid-template-columns: var( --mode-footer-columns, repeat(3, minmax(0, 1fr)) );
  gap: 16px;
  min-height: 0;
  overflow: auto;
  align-content: start;
}
.mode-hall-tab-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  padding: 10px;
  display: grid;
  gap: 4px;
}
.mode-hall-tab-card strong {
  color: rgba(164, 214, 255, 0.9);
  font-size: 16px;
}
.mode-hall-tab-card span {
  color: rgba(230, 243, 255, 0.92);
  font-size: 13px;
  line-height: 1.45;
}
.mode-hall-overlay[data-mode-theme=gold] .mode-hall-header-btn--highlight {
  background:
    linear-gradient(
      120deg,
      #ffe189,
      #ffc16c);
}
.mode-hall-overlay[data-mode-theme=violet] .mode-hall-header-btn--highlight {
  background:
    linear-gradient(
      120deg,
      #d19dff,
      #8d72ff);
}
.mode-hall-overlay[data-mode-theme=cyan] .mode-hall-header-btn--highlight {
  background:
    linear-gradient(
      120deg,
      #58f2e2,
      #52afff);
}
.mode-hall-overlay[data-mode-theme=amber] .mode-hall-header-btn--highlight {
  background:
    linear-gradient(
      120deg,
      #ffd67d,
      #ff9d5c);
}
.mode-hall-overlay[data-mode-theme=purple] .mode-hall-header-btn--highlight {
  background:
    linear-gradient(
      120deg,
      #cb8bff,
      #67beff);
}
.mode-hall-overlay[data-mode-theme=red] .mode-hall-header-btn--highlight {
  background:
    linear-gradient(
      120deg,
      #ff8e74,
      #ffbf77);
}
@media (max-width: 1439px) and (min-width: 1280px) {
  .mode-hall-shell {
    width: min(100%, var(--ui-shell-safe-width));
  }
  .mode-hall-header {
    grid-template-columns: 148px 1fr 208px;
    gap: 14px;
  }
  .mode-hall-main {
    gap: 16px;
  }
}
@media (max-width: 1279px) and (min-width: 1024px) {
  .mode-hall-shell {
    width: min(100%, calc(100% - 24px));
    height: calc(100dvh - 24px);
    grid-template-rows: 84px minmax(420px, 1fr) 156px;
    gap: 16px;
    padding: 16px;
    border-radius: 24px;
  }
  .mode-hall-main {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "hero operation" "intel intel";
  }
  .mode-hall-hero {
    grid-area: hero;
  }
  .mode-hall-operation {
    grid-area: operation;
  }
  .mode-hall-intel {
    grid-area: intel;
  }
}
@media (max-width: 1023px) {
  .mode-hall-overlay {
    padding: 10px;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
  }
  .mode-hall-shell {
    width: min(100%, calc(100% - 20px));
    height: auto;
    min-height: calc(100dvh - 20px);
    max-height: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-radius: 20px;
    padding: 14px;
    padding-bottom: 96px;
    gap: 14px;
    overflow: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mode-hall-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mode-hall-header-actions {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 4;
    justify-content: stretch;
    gap: 10px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(6, 17, 31, 0.92);
    backdrop-filter: blur(10px);
  }
  .mode-hall-header-actions .mode-hall-header-btn {
    flex: 1 1 0;
  }
  .mode-hall-main {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "operation" "intel";
    gap: 14px;
    overflow: visible;
    padding-right: 2px;
  }
  .mode-hall-hero,
  .mode-hall-operation,
  .mode-hall-intel {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
  }
  .mode-hall-room-strip {
    display: none;
  }
  .mode-hall-room-tip {
    display: none;
  }
  .mode-hall-social-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mode-hall-hero-canvas {
    min-height: 220px;
  }
  .mode-hall-tab-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .stitch-auth-btn {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }
  .mode-hall-overlay {
    padding: 6px;
    align-items: flex-start;
  }
  .mode-hall-shell {
    width: min(100%, calc(100% - 8px));
    min-height: calc(100dvh - 12px);
    border-radius: 18px;
    padding: 10px;
    padding-bottom: 92px;
    gap: 12px;
  }
  .mode-hall-title-wrap h2 {
    font-size: clamp(28px, 8vw, 42px);
  }
  .mode-hall-footer {
    grid-template-rows: 48px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .mode-hall-tab-content {
    grid-template-columns: 1fr;
  }
}
.match-result-overlay.is-visible {
  display: flex;
}
.match-result-panel {
  --result-fit-scale: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, calc(var(--ui-shell-safe-width) - 4px));
  max-width: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(12px, var(--ui-shell-padding), 24px) clamp(14px, calc(var(--ui-shell-padding) + 4px), 26px) clamp(14px, calc(var(--ui-shell-padding) + 2px), 24px);
  border-radius: var(--ui-shell-radius);
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(255, 211, 115, 0.16),
      transparent 44%),
    radial-gradient(
      circle at 100% 10%,
      rgba(81, 226, 255, 0.2),
      transparent 42%),
    linear-gradient(
      160deg,
      rgba(7, 22, 38, 0.96),
      rgba(4, 13, 24, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
  transform: translate3d(-50%, -50%, 0) scale(var(--result-fit-scale));
  transform-origin: center center;
  will-change: transform;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 320ms ease,
    filter 320ms ease,
    box-shadow 220ms ease;
}
.match-result-panel.is-fit-scaled {
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.match-result-kicker {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cee4ff;
  position: relative;
  z-index: 2;
  opacity: 0.9;
}
.match-result-title {
  margin: 4px 0 0;
  font-size: clamp(34px, 5.8vw, 62px);
  letter-spacing: 0.05em;
  line-height: 1;
  color: #ffe7ad;
  text-shadow: 0 0 24px rgba(255, 204, 93, 0.5), 0 10px 30px rgba(255, 182, 81, 0.28);
  position: relative;
  z-index: 2;
}
.match-result-rank-main-headline {
  font-size: clamp(36px, 6vw, 70px);
  font-weight: 900;
  line-height: 1;
  color: #fff4ce;
  text-shadow: 0 0 26px rgba(255, 220, 126, 0.58);
  margin-top: 2px;
  position: relative;
  z-index: 2;
}
.match-result-subtitle {
  color: var(--text-soft);
  margin: 8px 0 10px;
  position: relative;
  z-index: 2;
}
.match-result-cinematic-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.match-result-bg-particle {
  position: absolute;
  width: 160px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(86, 229, 255, 0.9),
      transparent);
  opacity: 0.35;
  animation: resultFlowLine 2.6s linear infinite;
}
.match-result-bg-particle:nth-child(1) {
  top: 22%;
  left: -18%;
  animation-delay: 0s;
}
.match-result-bg-particle:nth-child(2) {
  top: 34%;
  left: -22%;
  animation-delay: -0.8s;
}
.match-result-bg-particle:nth-child(3) {
  top: 66%;
  left: -16%;
  animation-delay: -1.1s;
}
.match-result-bg-particle:nth-child(4) {
  top: 78%;
  left: -24%;
  animation-delay: -1.8s;
}
.match-result-rank-splash {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px 24px 24px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.94);
  transition: opacity 360ms ease, transform 360ms ease;
}
.match-result-rank-splash::before,
.match-result-rank-splash::after {
  content: "";
  position: absolute;
  inset: 3% 8%;
  border-radius: 50%;
  pointer-events: none;
}
.match-result-rank-splash::before {
  background:
    radial-gradient(
      circle,
      rgba(255, 233, 158, 0.24),
      transparent 45%),
    radial-gradient(
      circle at center,
      rgba(88, 198, 255, 0.16),
      transparent 62%);
  filter: blur(28px);
  opacity: 0.95;
}
.match-result-rank-splash::after {
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: scale(1.08);
}
.match-result-rank-splash-inner {
  position: relative;
  width: min(100%, 1180px);
  display: grid;
  justify-items: center;
  gap: 14px;
}
.match-result-rank-splash-kicker {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(236, 245, 255, 0.82);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.16);
  margin-top: 4px;
}
.match-result-rank-splash-stage {
  position: relative;
  width: 100%;
  min-height: 460px;
  display: grid;
  place-items: center;
}
.match-result-rank-splash-stage::before,
.match-result-rank-splash-stage::after {
  content: "";
  position: absolute;
  inset: 8% 8%;
  border-radius: 50%;
  pointer-events: none;
}
.match-result-rank-splash-stage::before {
  background:
    radial-gradient(
      circle,
      rgba(120, 222, 255, 0.2),
      transparent 44%),
    radial-gradient(
      circle,
      rgba(255, 237, 166, 0.14),
      transparent 62%);
  filter: blur(18px);
  animation: resultRankHaloPulse 3.4s ease-in-out infinite;
}
.match-result-rank-splash-stage::after {
  border: 1px dashed rgba(255, 255, 255, 0.12);
  animation: resultRankHaloSpin 10s linear infinite;
}
.match-result-rank-splash-rays {
  position: absolute;
  inset: 2%;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.14),
      transparent 46%),
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0.14) 0deg 4deg,
      transparent 4deg 14deg);
  mask-image:
    radial-gradient(
      circle at center,
      transparent 0 18%,
      rgba(0, 0, 0, 0.96) 48%,
      transparent 76%);
  opacity: 0.62;
  filter: blur(0.4px);
  animation: resultRankRaySpin 18s linear infinite;
}
.match-result-rank-splash-wings {
  position: absolute;
  left: 50%;
  top: 24px;
  width: min(92vw, 940px);
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.match-result-rank-splash-wings span {
  width: clamp(176px, 28vw, 308px);
  height: clamp(72px, 10vw, 116px);
  border-radius: 18% 82% 24% 76%;
  opacity: 0.9;
  filter: drop-shadow(0 0 24px rgba(255, 219, 129, 0.52));
}
.match-result-rank-splash-wings span:first-child {
  animation: resultSplashWingOpenLeft 0.82s cubic-bezier(0.2, 0.86, 0.16, 1) both, resultSplashWingFloat 2.8s ease-in-out infinite 0.82s;
}
.match-result-rank-splash-wings span:last-child {
  transform: scaleX(-1);
  animation: resultSplashWingOpenRight 0.82s cubic-bezier(0.2, 0.86, 0.16, 1) both, resultSplashWingFloatMirror 2.8s ease-in-out infinite 0.82s;
}
.match-result-rank-splash-medal-shell {
  position: absolute;
  top: 4px;
  left: 50%;
  width: clamp(102px, 11vw, 142px);
  height: clamp(102px, 11vw, 142px);
  transform: translateX(-50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #0b1525;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 26px rgba(255, 215, 126, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  z-index: 3;
  animation: resultSplashMedalDrop 0.72s cubic-bezier(0.2, 0.85, 0.22, 1) both;
}
.match-result-rank-splash-medal-icon {
  width: 58%;
  height: 58%;
  filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.16));
}
.match-result-rank-splash-number {
  position: relative;
  z-index: 2;
  font-size: clamp(220px, 34vw, 430px);
  line-height: 0.72;
  font-weight: 900;
  letter-spacing: -0.08em;
  text-shadow: 0 0 38px rgba(255, 255, 255, 0.16), 0 20px 46px rgba(0, 0, 0, 0.38);
  animation: resultRankSplashNumberPop 0.76s cubic-bezier(0.16, 0.93, 0.18, 1.05) both;
}
.match-result-rank-splash-title {
  position: relative;
  z-index: 2;
  margin-top: -36px;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.match-result-rank-splash-caption {
  position: relative;
  z-index: 2;
  margin-top: -2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(226, 237, 255, 0.82);
}
.match-result-overlay.rank-theme-gold .match-result-rank-splash-medal-shell {
  background:
    linear-gradient(
      145deg,
      #fff0b3,
      #f7b748 60%,
      #e88431);
  box-shadow:
    0 0 28px rgba(255, 211, 110, 0.45),
    0 0 60px rgba(255, 162, 74, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.match-result-overlay.rank-theme-gold .match-result-rank-splash-number,
.match-result-overlay.rank-theme-gold .match-result-rank-splash-title {
  color: #ffe8a5;
  text-shadow: 0 0 30px rgba(255, 221, 132, 0.42), 0 18px 36px rgba(0, 0, 0, 0.34);
}
.match-result-overlay.rank-theme-gold .match-result-rank-splash-wings span {
  background:
    linear-gradient(
      135deg,
      rgba(255, 242, 176, 0.96),
      rgba(255, 176, 84, 0.58));
}
.match-result-overlay.rank-theme-gold .match-result-rank-splash-rays {
  opacity: 0.76;
}
.match-result-overlay.rank-theme-silver .match-result-rank-splash-medal-shell,
.match-result-overlay.rank-theme-normal .match-result-rank-splash-medal-shell {
  background:
    linear-gradient(
      145deg,
      #fbfeff,
      #bfd9f3 60%,
      #7e98c6);
  box-shadow:
    0 0 26px rgba(202, 230, 255, 0.34),
    0 0 56px rgba(153, 187, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.match-result-overlay.rank-theme-silver .match-result-rank-splash-number,
.match-result-overlay.rank-theme-silver .match-result-rank-splash-title,
.match-result-overlay.rank-theme-normal .match-result-rank-splash-number,
.match-result-overlay.rank-theme-normal .match-result-rank-splash-title {
  color: #eff6ff;
  text-shadow: 0 0 30px rgba(216, 234, 255, 0.28), 0 18px 36px rgba(0, 0, 0, 0.3);
}
.match-result-overlay.rank-theme-silver .match-result-rank-splash-wings span,
.match-result-overlay.rank-theme-normal .match-result-rank-splash-wings span {
  background:
    linear-gradient(
      135deg,
      rgba(243, 250, 255, 0.92),
      rgba(157, 193, 236, 0.5));
  filter: drop-shadow(0 0 14px rgba(180, 219, 255, 0.36));
}
.match-result-overlay.rank-theme-normal .match-result-rank-splash::before {
  background:
    radial-gradient(
      circle,
      rgba(214, 231, 255, 0.16),
      transparent 60%);
}
.match-result-overlay.rank-theme-normal .match-result-rank-splash-wings span {
  opacity: 0.48;
}
.match-result-overlay.rank-theme-normal .match-result-rank-splash-caption {
  color: rgba(220, 233, 248, 0.78);
}
.match-result-overlay.rank-theme-normal .match-result-rank-splash-rays {
  opacity: 0.42;
}
.match-result-overlay.rank-theme-bronze .match-result-rank-splash-medal-shell {
  background:
    linear-gradient(
      145deg,
      #ffd8bb,
      #d99254 60%,
      #995226);
  box-shadow:
    0 0 26px rgba(255, 194, 150, 0.34),
    0 0 52px rgba(189, 109, 54, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.match-result-overlay.rank-theme-bronze .match-result-rank-splash-number,
.match-result-overlay.rank-theme-bronze .match-result-rank-splash-title {
  color: #ffd7bc;
  text-shadow: 0 0 28px rgba(255, 186, 136, 0.28), 0 18px 36px rgba(0, 0, 0, 0.32);
}
.match-result-overlay.rank-theme-bronze .match-result-rank-splash-wings span {
  background:
    linear-gradient(
      135deg,
      rgba(255, 220, 190, 0.94),
      rgba(210, 124, 72, 0.52));
  filter: drop-shadow(0 0 14px rgba(255, 181, 132, 0.3));
}
.match-result-rank-stage {
  margin-bottom: 10px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03));
  position: relative;
  z-index: 2;
}
.match-result-rank-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.match-result-rank-head span {
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.match-result-rank-head-icon {
  width: 14px;
  height: 14px;
  color: #ffe2a4;
}
.match-result-rank-head strong {
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1;
  color: #fef3cc;
}
.match-result-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.match-result-podium-item {
  position: relative;
  min-height: 118px;
  padding: 10px 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.match-result-podium-item.is-gold {
  min-height: 138px;
  transform: translateY(-8px) scale(1.04);
  border-color: rgba(255, 222, 126, 0.7);
  box-shadow: 0 18px 32px rgba(255, 200, 98, 0.25);
}
.match-result-podium-item.is-player {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(74, 231, 169, 0.24);
  border-color: rgba(94, 255, 184, 0.52);
}
.match-result-podium-item.is-gold.is-player {
  transform: translateY(-8px) scale(1.04);
}
.match-result-podium-item.is-empty {
  opacity: 0.7;
}
.match-result-podium-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #0d1424;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.1);
}
.match-result-podium-icon {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.28));
}
.match-result-podium-meta {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.match-result-podium-meta strong {
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.match-result-podium-meta span {
  font-size: 12px;
  color: var(--text-soft);
}
.match-result-podium-item.is-gold .match-result-podium-badge {
  background:
    linear-gradient(
      135deg,
      #ffe79b,
      #ffc14f);
}
.match-result-podium-item.is-silver .match-result-podium-badge {
  background:
    linear-gradient(
      135deg,
      #f1f8ff,
      #b8d0ef);
}
.match-result-podium-item.is-bronze .match-result-podium-badge {
  background:
    linear-gradient(
      135deg,
      #ffd1ac,
      #ce7d46);
}
.match-result-phoenix-wings {
  position: absolute;
  inset: 2px -30px auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.match-result-phoenix-wings span {
  width: 38px;
  height: 22px;
  border-radius: 60% 80% 30% 90%;
  background:
    linear-gradient(
      135deg,
      rgba(255, 238, 154, 0.9),
      rgba(255, 160, 90, 0.4));
  filter: drop-shadow(0 0 11px rgba(255, 206, 104, 0.72));
  animation: resultWingFlap 1.4s ease-in-out infinite;
}
.match-result-phoenix-wings span:last-child {
  transform: scaleX(-1);
  animation-name: resultWingFlapMirror;
  animation-delay: -0.7s;
}
.match-result-player-rank-card {
  margin-top: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.match-result-player-rank-card span {
  font-size: 12px;
  color: var(--text-soft);
}
.match-result-player-rank-card strong {
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1;
}
.match-result-player-rank-card em {
  font-style: normal;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.86);
}
.match-result-player-rank-card.is-gold strong {
  color: #ffe79a;
}
.match-result-player-rank-card.is-silver strong {
  color: #e0ecff;
}
.match-result-player-rank-card.is-bronze strong {
  color: #ffcfab;
}
.match-result-ball-stage {
  position: relative;
  min-height: 228px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  z-index: 2;
}
.match-result-ball {
  --result-ball-size: 180px;
  --result-ball-glow: 0.65;
  --result-ball-energy: 0.7;
  width: var(--result-ball-size);
  height: var(--result-ball-size);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 28% 28%,
      #9ce9ff 0%,
      #47abff 45%,
      #2348ff 100%);
  box-shadow: 0 0 68px rgba(82, 174, 255, var(--result-ball-glow));
  border: 3px solid rgba(255, 255, 255, 0.38);
  animation: resultBallPulse 1.8s ease-in-out infinite;
  position: relative;
  z-index: 3;
}
.match-result-burst {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.match-result-burst::before,
.match-result-burst::after {
  content: "";
  position: absolute;
  inset: 11% 18%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.26);
  animation: resultBurstRotate 5s linear infinite;
}
.match-result-burst::after {
  inset: 4% 10%;
  border-color: rgba(255, 206, 99, 0.34);
  animation-direction: reverse;
  animation-duration: 7s;
}
.match-result-energy-lines {
  position: absolute;
  inset: 20px 36px;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(102, 241, 255, 0) 0,
      rgba(102, 241, 255, 0) 12px,
      rgba(102, 241, 255, 0.26) 13px,
      rgba(102, 241, 255, 0.26) 14px);
  mask-image:
    radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.95) 28%,
      transparent 76%);
  animation: resultEnergyScan 2.2s linear infinite;
  z-index: 2;
}
.match-record-badge {
  position: absolute;
  right: 8%;
  top: 18%;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #101826;
  font-weight: 900;
  font-size: 13px;
  background:
    linear-gradient(
      140deg,
      #ffe27e,
      #ff9858);
  box-shadow: 0 8px 20px rgba(255, 168, 97, 0.35);
  z-index: 4;
}
.match-result-record-icon {
  width: 15px;
  height: 15px;
  color: #13233f;
}
.match-result-overlay.is-record .match-record-badge {
  display: inline-flex;
  animation: resultRecordPop 0.65s ease;
}
.match-result-overlay.is-level-up .match-record-badge.is-level-up {
  box-shadow: 0 10px 26px rgba(111, 255, 206, 0.45);
}
.match-result-rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
  position: relative;
  z-index: 2;
}
.match-result-reward-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.match-result-reward-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(208, 228, 255, 0.78);
  font-size: 12px;
}
.match-result-reward-icon {
  width: 14px;
  height: 14px;
  color: rgba(220, 236, 255, 0.92);
}
.match-result-reward-card strong {
  display: block;
  font-size: 20px;
  margin-top: 4px;
  color: #f8fdff;
}
.match-result-mode-stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 220ms ease, transform 220ms ease;
}
.match-result-mode-stat-card strong {
  font-size: 17px;
  letter-spacing: 0.01em;
}
.match-result-growth {
  margin-top: 11px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 2;
}
.match-result-growth-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.match-result-growth-level {
  font-size: 22px;
  font-weight: 800;
  color: #cffff2;
}
.match-result-growth-meta {
  font-size: 12px;
  color: rgba(208, 230, 255, 0.86);
}
.match-result-growth-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.match-result-growth-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #45f4cb,
      #53afff);
  box-shadow: 0 0 14px rgba(87, 219, 255, 0.42);
  transition: width 180ms linear;
}
.match-record-banner {
  display: none;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background:
    linear-gradient(
      120deg,
      #ffd56b,
      #ff8b4e);
  color: #0d1424;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.match-result-actions {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.match-result-replay {
  background:
    linear-gradient(
      135deg,
      #12f0a7,
      #ffca62);
  color: #07131f;
}
.match-result-actions .hud-action-button:disabled {
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(0.4);
}
.match-result-overlay.is-win .match-result-title {
  color: #d4ffe7;
}
.match-result-overlay.rank-theme-gold .match-result-rank-head strong {
  color: #ffeaa2;
}
.match-result-overlay.rank-theme-silver .match-result-rank-head strong {
  color: #e3eeff;
}
.match-result-overlay.rank-theme-bronze .match-result-rank-head strong {
  color: #ffcfaa;
}
.match-result-overlay.rank-theme-normal .match-result-rank-head strong {
  color: #cce3ff;
}
.match-result-overlay.is-team-mode .match-result-rank-head span {
  color: rgba(255, 214, 133, 0.86);
}
.match-result-overlay[data-settlement-stage=intro] .match-result-rank-splash,
.match-result-overlay[data-settlement-stage=rank] .match-result-rank-splash {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.match-result-overlay[data-settlement-stage=intro] .match-result-panel,
.match-result-overlay[data-settlement-stage=rank] .match-result-panel {
  opacity: 0;
  visibility: hidden;
  filter: blur(14px);
  pointer-events: none;
}
.match-result-rank-stage,
.match-result-ball-stage,
.match-result-rewards,
.match-result-growth,
.match-result-actions {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 220ms ease, transform 220ms ease;
}
.match-result-overlay[data-settlement-stage=rank] .match-result-rank-stage,
.match-result-overlay[data-settlement-stage=hero] .match-result-rank-stage,
.match-result-overlay[data-settlement-stage=rewards] .match-result-rank-stage,
.match-result-overlay[data-settlement-stage=actions] .match-result-rank-stage {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.match-result-overlay[data-settlement-stage=hero] .match-result-ball-stage,
.match-result-overlay[data-settlement-stage=rewards] .match-result-ball-stage,
.match-result-overlay[data-settlement-stage=actions] .match-result-ball-stage {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.match-result-overlay[data-settlement-stage=rewards] .match-result-rewards,
.match-result-overlay[data-settlement-stage=rewards] .match-result-mode-stats,
.match-result-overlay[data-settlement-stage=rewards] .match-result-growth,
.match-result-overlay[data-settlement-stage=actions] .match-result-rewards,
.match-result-overlay[data-settlement-stage=actions] .match-result-mode-stats,
.match-result-overlay[data-settlement-stage=actions] .match-result-growth {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.match-result-overlay[data-settlement-stage=rewards] .match-result-reward-card strong,
.match-result-overlay[data-settlement-stage=actions] .match-result-reward-card strong,
.match-result-overlay[data-settlement-stage=rewards] .match-result-mode-stat-card strong,
.match-result-overlay[data-settlement-stage=actions] .match-result-mode-stat-card strong {
  animation: resultRewardTick 280ms ease-out;
}
.match-result-overlay[data-settlement-stage=actions] .match-result-actions {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.match-result-overlay[data-settlement-stage=intro] .match-result-title,
.match-result-overlay[data-settlement-stage=intro] .match-result-rank-main-headline {
  animation: resultIntroBlast 260ms ease-out;
}
.match-result-overlay[data-settlement-stage=rank] .match-result-rank-main-headline {
  animation: resultRankPop 420ms cubic-bezier(0.19, 0.89, 0.21, 1.11);
}
.match-result-overlay[data-settlement-stage=hero] .match-result-rank-splash,
.match-result-overlay[data-settlement-stage=rewards] .match-result-rank-splash,
.match-result-overlay[data-settlement-stage=actions] .match-result-rank-splash {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
}
.match-result-overlay[data-settlement-stage=hero] .match-result-ball,
.match-result-overlay[data-settlement-stage=rewards] .match-result-ball {
  animation: resultHeroPulse 620ms ease-out 1, resultBallPulse 1.8s ease-in-out infinite 620ms;
}
@keyframes resultBallPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}
@keyframes resultHeroPulse {
  0% {
    transform: scale(1);
  }
  38% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1.03);
  }
}
@keyframes resultBurstRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.05);
  }
}
@keyframes resultFlowLine {
  0% {
    transform: translateX(0) translateY(0) rotate(-12deg);
    opacity: 0;
  }
  20% {
    opacity: 0.42;
  }
  100% {
    transform: translateX(130%) translateY(-10px) rotate(-12deg);
    opacity: 0;
  }
}
@keyframes resultEnergyScan {
  0% {
    transform: translateX(-8px);
  }
  100% {
    transform: translateX(9px);
  }
}
@keyframes resultIntroBlast {
  0% {
    transform: scale(0.84);
    opacity: 0.35;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes resultRankPop {
  0% {
    transform: scale(0.72) translateY(6px);
    opacity: 0;
  }
  75% {
    transform: scale(1.08) translateY(-2px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
@keyframes resultRankHaloPulse {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.62;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}
@keyframes resultRankRaySpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.04);
  }
}
@keyframes resultRankHaloSpin {
  0% {
    transform: rotate(0deg) scale(0.98);
  }
  100% {
    transform: rotate(-360deg) scale(1.04);
  }
}
@keyframes resultSplashWingOpenLeft {
  0% {
    opacity: 0;
    transform: translateX(58px) translateY(12px) scale(0.42) rotate(12deg);
  }
  100% {
    opacity: 0.94;
    transform: translateX(0) translateY(0) scale(1) rotate(-4deg);
  }
}
@keyframes resultSplashWingOpenRight {
  0% {
    opacity: 0;
    transform: scaleX(-1) translateX(58px) translateY(12px) scale(0.42) rotate(12deg);
  }
  100% {
    opacity: 0.94;
    transform: scaleX(-1) translateX(0) translateY(0) scale(1) rotate(-4deg);
  }
}
@keyframes resultSplashWingFloat {
  0%, 100% {
    transform: translateX(0) translateY(0) scale(1) rotate(-4deg);
  }
  50% {
    transform: translateX(-6px) translateY(-4px) scale(1.02) rotate(3deg);
  }
}
@keyframes resultSplashWingFloatMirror {
  0%, 100% {
    transform: scaleX(-1) translateX(0) translateY(0) scale(1) rotate(-4deg);
  }
  50% {
    transform: scaleX(-1) translateX(-6px) translateY(-4px) scale(1.02) rotate(3deg);
  }
}
@keyframes resultSplashMedalDrop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.7);
  }
  78% {
    opacity: 1;
    transform: translateX(-50%) translateY(4px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes resultRankSplashNumberPop {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
  72% {
    opacity: 1;
    transform: scale(1.08) translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes resultRewardTick {
  0% {
    transform: scale(0.86);
    opacity: 0.64;
  }
  70% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes resultRecordPop {
  0% {
    transform: scale(0.75);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes resultWingFlap {
  0%, 100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-3px) rotate(10deg);
  }
}
@keyframes resultWingFlapMirror {
  0%, 100% {
    transform: scaleX(-1) translateY(0) rotate(-8deg);
  }
  50% {
    transform: scaleX(-1) translateY(-3px) rotate(10deg);
  }
}
.hud-leaderboard {
  position: absolute;
  top: 86px;
  right: 18px;
  width: 240px;
  padding: 16px;
  border-radius: 20px;
}
.hud-leaderboard-title {
  font-size: 14px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.hud-leaderboard-list {
  display: grid;
  gap: 8px;
}
.hud-leaderboard-entry {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
}
.hud-leaderboard-entry.is-player {
  background: rgba(18, 240, 167, 0.18);
  border: 1px solid rgba(18, 240, 167, 0.22);
}
.hud-leaderboard-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  margin: 6px 0 2px;
}
.hud-minimap {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 168px;
  height: 168px;
  padding: 9px;
  border-radius: 18px;
}
.hud-minimap canvas {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.hud-debug {
  position: absolute;
  left: 18px;
  top: 134px;
  width: min(440px, calc(100% - 36px));
  max-height: min(72vh, 760px);
  padding: 16px;
  border-radius: 18px;
  pointer-events: auto;
  overflow: auto;
}
.hud-debug-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}
.hud-debug-title--small {
  margin-bottom: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.hud-debug-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}
.hud-debug-row--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hud-debug-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}
.hud-debug-button {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(18, 240, 167, 0.2);
  color: var(--text-main);
  font-weight: 700;
}
.hud-debug-divider {
  height: 1px;
  margin: 14px 0;
  background: rgba(255, 255, 255, 0.14);
}
.hud-debug-tip {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.76);
  margin-top: -2px;
}
.hud-toolbox-host {
  display: grid;
  gap: 10px;
}
.tuning-toolbox {
  display: grid;
  gap: 10px;
}
.tuning-toolbox-head {
  display: grid;
  gap: 8px;
}
.tuning-version-field {
  display: grid;
  gap: 6px;
  color: var(--text-soft);
  font-size: 12px;
}
.tuning-version-field input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}
.tuning-action-row {
  display: flex;
  gap: 8px;
}
.tuning-action-button {
  flex: 1;
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
}
.tuning-status,
.tuning-derived {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft);
}
.tuning-toolbox-body {
  display: grid;
  gap: 8px;
}
.tuning-group {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.tuning-group summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #d6ebff;
  background: rgba(255, 255, 255, 0.03);
}
.tuning-group summary::-webkit-details-marker {
  display: none;
}
.tuning-group-list {
  display: grid;
  gap: 10px;
  padding: 10px;
}
.tuning-control-row {
  display: grid;
  gap: 6px;
}
.tuning-control-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-main);
}
.tuning-control-value {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tuning-control-row small {
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.4;
}
.tuning-control-inputs {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 8px;
}
.tuning-control-inputs input[type=range] {
  width: 100%;
  accent-color: var(--accent);
}
.tuning-control-inputs input[type=number] {
  width: 100%;
  padding: 7px 8px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  font-size: 12px;
}
.tuning-preview {
  width: 100%;
  min-height: 180px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(2, 8, 14, 0.55);
  color: #9ad7ff;
  resize: vertical;
  font-size: 11px;
  line-height: 1.45;
  font-family:
    "Consolas",
    "JetBrains Mono",
    "SFMono-Regular",
    monospace;
}
.lobby-overlay {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: absolute;
  inset: 0;
  display: grid;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
  overflow: hidden;
  overscroll-behavior: contain;
}
.lobby-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.matchmaking-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--ui-shell-margin);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
  z-index: 26;
  overflow: hidden;
}
.matchmaking-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.matchmaking-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 18% 22%,
      rgba(255, 193, 86, 0.26),
      transparent 30%),
    radial-gradient(
      circle at 80% 16%,
      rgba(77, 145, 255, 0.26),
      transparent 32%),
    radial-gradient(
      circle at 50% 78%,
      rgba(18, 240, 167, 0.2),
      transparent 34%),
    linear-gradient(
      145deg,
      rgba(5, 14, 24, 0.9),
      rgba(8, 20, 33, 0.9));
}
.matchmaking-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.6px);
  opacity: 0.75;
  animation: matchOrbFloat 9s ease-in-out infinite;
}
.matchmaking-orb--a {
  width: 190px;
  height: 190px;
  top: 8%;
  left: 10%;
  background:
    radial-gradient(
      circle,
      rgba(98, 190, 255, 0.6),
      rgba(46, 112, 255, 0.12));
}
.matchmaking-orb--b {
  width: 150px;
  height: 150px;
  top: 66%;
  left: 16%;
  background:
    radial-gradient(
      circle,
      rgba(23, 236, 173, 0.64),
      rgba(10, 138, 112, 0.1));
  animation-delay: 1.4s;
}
.matchmaking-orb--c {
  width: 230px;
  height: 230px;
  top: 20%;
  right: 9%;
  background:
    radial-gradient(
      circle,
      rgba(255, 194, 98, 0.62),
      rgba(255, 120, 73, 0.1));
  animation-delay: 2.1s;
}
.matchmaking-shell {
  position: relative;
  width: min(880px, var(--ui-shell-safe-width));
  max-height: var(--ui-shell-safe-height);
  padding: var(--ui-shell-padding);
  border-radius: var(--ui-shell-radius);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(
      circle at 50% -30%,
      rgba(83, 166, 255, 0.25),
      transparent 58%),
    linear-gradient(
      180deg,
      rgba(9, 26, 43, 0.95),
      rgba(7, 16, 29, 0.96));
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.46);
  text-align: center;
  isolation: isolate;
}
.matchmaking-shell > * {
  position: relative;
  z-index: 1;
}
.matchmaking-flow-field {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.matchmaking-flow-line {
  position: absolute;
  left: -28%;
  width: 156%;
  height: 2px;
  border-radius: 999px;
  opacity: 0.42;
  background:
    linear-gradient(
      90deg,
      rgba(32, 131, 255, 0),
      rgba(68, 195, 255, 0.9),
      rgba(118, 254, 207, 0.92),
      rgba(255, 205, 120, 0.86),
      rgba(32, 131, 255, 0));
  filter: blur(0.2px);
  animation: matchFlowRun 2.8s linear infinite;
}
.matchmaking-flow-line--1 {
  top: 18%;
  animation-delay: 0s;
}
.matchmaking-flow-line--2 {
  top: 38%;
  animation-delay: -1s;
}
.matchmaking-flow-line--3 {
  top: 60%;
  animation-delay: -0.5s;
}
.matchmaking-flow-line--4 {
  top: 79%;
  animation-delay: -1.7s;
}
.matchmaking-flow-arc {
  position: absolute;
  inset: 14% 16%;
  border-radius: 50%;
  border: 1px solid rgba(124, 210, 255, 0.2);
  filter: blur(0.2px);
  opacity: 0.24;
  animation: matchRingRotate 12s linear infinite;
}
.matchmaking-flow-arc--a {
  inset: 12% 18%;
  border-color: rgba(122, 238, 201, 0.22);
}
.matchmaking-flow-arc--b {
  inset: 18% 12%;
  border-color: rgba(255, 204, 122, 0.2);
  animation-direction: reverse;
  animation-duration: 15s;
}
.matchmaking-flow-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(194, 245, 255, 0.96),
      rgba(95, 173, 255, 0));
  box-shadow: 0 0 18px rgba(113, 212, 255, 0.8);
  opacity: 0;
  animation: matchSparkDrift 2.5s ease-in-out infinite;
}
.matchmaking-flow-spark--1 {
  left: 16%;
  top: 28%;
  animation-delay: 0s;
}
.matchmaking-flow-spark--2 {
  right: 20%;
  top: 44%;
  animation-delay: -0.9s;
}
.matchmaking-flow-spark--3 {
  left: 34%;
  bottom: 18%;
  animation-delay: -1.6s;
}
.matchmaking-cancel {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  color: rgba(241, 248, 255, 0.86);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 700;
}
.matchmaking-kicker {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(196, 223, 255, 0.86);
  margin-top: 2px;
}
.matchmaking-title {
  margin: 8px 0 6px;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.12;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.matchmaking-title-prefix {
  color: rgba(233, 245, 255, 0.86);
}
.matchmaking-title-mode {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #6be5ff;
}
.matchmaking-mode-icon-shell {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #a8f2ff;
  background:
    linear-gradient(
      145deg,
      rgba(104, 229, 255, 0.2),
      rgba(31, 103, 182, 0.3));
  border: 1px solid rgba(145, 231, 255, 0.4);
  box-shadow: 0 10px 22px rgba(27, 118, 189, 0.3);
}
.matchmaking-mode-icon {
  width: 100%;
  height: 100%;
}
.matchmaking-overlay[data-mode-theme=gold] .matchmaking-title-mode {
  color: #ffd68a;
}
.matchmaking-overlay[data-mode-theme=gold] .matchmaking-mode-icon-shell {
  color: #ffe9b5;
  background:
    linear-gradient(
      145deg,
      rgba(255, 212, 117, 0.28),
      rgba(175, 105, 26, 0.32));
  border-color: rgba(255, 221, 162, 0.5);
}
.matchmaking-overlay[data-mode-theme=violet] .matchmaking-title-mode {
  color: #ccb6ff;
}
.matchmaking-overlay[data-mode-theme=violet] .matchmaking-mode-icon-shell {
  color: #dfd2ff;
  background:
    linear-gradient(
      145deg,
      rgba(187, 144, 255, 0.28),
      rgba(85, 44, 153, 0.35));
  border-color: rgba(202, 171, 255, 0.54);
}
.matchmaking-overlay[data-mode-theme=amber] .matchmaking-title-mode {
  color: #ffd0a1;
}
.matchmaking-overlay[data-mode-theme=amber] .matchmaking-mode-icon-shell {
  color: #ffe3c8;
  background:
    linear-gradient(
      145deg,
      rgba(255, 191, 116, 0.3),
      rgba(161, 82, 24, 0.34));
  border-color: rgba(255, 208, 159, 0.54);
}
.matchmaking-overlay[data-mode-theme=purple] .matchmaking-title-mode {
  color: #d3b9ff;
}
.matchmaking-overlay[data-mode-theme=purple] .matchmaking-mode-icon-shell {
  color: #e4d2ff;
  background:
    linear-gradient(
      145deg,
      rgba(180, 116, 255, 0.3),
      rgba(93, 34, 158, 0.36));
  border-color: rgba(216, 176, 255, 0.56);
}
.matchmaking-overlay[data-mode-theme=red] .matchmaking-title-mode {
  color: #ffc1ae;
}
.matchmaking-overlay[data-mode-theme=red] .matchmaking-mode-icon-shell {
  color: #ffd7cd;
  background:
    linear-gradient(
      145deg,
      rgba(255, 146, 113, 0.3),
      rgba(150, 48, 22, 0.35));
  border-color: rgba(255, 183, 165, 0.56);
}
.matchmaking-stage {
  color: var(--text-soft);
  font-size: 15px;
}
.matchmaking-ring-stage {
  position: relative;
  width: min(360px, 76vw);
  aspect-ratio: 1;
  margin: 20px auto 12px;
  display: grid;
  place-items: center;
  overflow: visible;
  z-index: 2;
}
.matchmaking-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  animation: matchRingRotate 10s linear infinite;
}
.matchmaking-ring--outer {
  inset: 0;
  border-style: dashed;
  border-color: rgba(88, 174, 255, 0.35);
}
.matchmaking-ring--mid {
  inset: 12%;
  border-color: rgba(25, 236, 173, 0.34);
  animation-direction: reverse;
  animation-duration: 8s;
}
.matchmaking-ring--inner {
  inset: 24%;
  border-color: rgba(255, 196, 94, 0.36);
  animation-duration: 6.8s;
}
.matchmaking-core {
  width: 49%;
  height: 49%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(152, 225, 255, 0.88),
      rgba(47, 121, 255, 0.88)),
    linear-gradient(
      145deg,
      rgba(29, 81, 161, 0.82),
      rgba(15, 38, 80, 0.84));
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 40px rgba(84, 173, 255, 0.45);
  animation: matchCorePulse 1.6s ease-in-out infinite;
}
.matchmaking-core strong {
  font-size: clamp(32px, 7vw, 56px);
  line-height: 1;
}
.matchmaking-core span {
  font-size: 11px;
  color: rgba(241, 248, 255, 0.82);
}
.matchmaking-success-ripple {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  opacity: 0;
  border: 2px solid rgba(153, 255, 218, 0.78);
  box-shadow: 0 0 24px rgba(95, 220, 255, 0.52), inset 0 0 20px rgba(140, 248, 212, 0.3);
  pointer-events: none;
  transform: scale(0.34);
}
.matchmaking-success-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.matchmaking-success-beam {
  position: absolute;
  width: min(220px, 42vw);
  height: 2px;
  top: 31%;
  border-radius: 999px;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      rgba(89, 195, 255, 0),
      rgba(122, 232, 255, 0.96),
      rgba(183, 255, 221, 0.9),
      rgba(89, 195, 255, 0));
  filter: drop-shadow(0 0 12px rgba(116, 224, 255, 0.72));
}
.matchmaking-success-beam--left {
  left: 8%;
  transform-origin: left center;
}
.matchmaking-success-beam--right {
  right: 8%;
  transform-origin: right center;
}
.matchmaking-success-label {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%) scale(0.55);
  font-size: clamp(52px, 11vw, 124px);
  font-weight: 900;
  letter-spacing: 0.08em;
  padding-left: 0.08em;
  color: rgba(206, 255, 226, 0.98);
  text-shadow:
    0 0 16px rgba(104, 227, 255, 0.76),
    0 0 38px rgba(83, 255, 193, 0.62),
    0 0 84px rgba(76, 173, 255, 0.5);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  filter: blur(2px);
  text-transform: none;
}
.matchmaking-success-label-echo {
  position: absolute;
  left: 50%;
  top: 33%;
  transform: translate(-50%, -50%) scale(0.8);
  font-size: clamp(42px, 9vw, 92px);
  font-weight: 900;
  letter-spacing: 0.08em;
  padding-left: 0.08em;
  color: rgba(180, 230, 255, 0.2);
  text-shadow: 0 0 32px rgba(103, 217, 255, 0.45);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  filter: blur(4px);
}
.matchmaking-count-line {
  font-size: 15px;
  color: rgba(232, 243, 255, 0.88);
  margin-bottom: 10px;
}
.matchmaking-count-line strong {
  color: #7ce9ff;
}
.matchmaking-progress-track {
  position: relative;
  width: min(520px, 100%);
  height: 14px;
  margin: 0 auto;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.matchmaking-progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #21e7b0 0%,
      #67d0ff 48%,
      #ffc25a 100%);
  box-shadow: 0 0 18px rgba(104, 209, 255, 0.48);
  transition: width 200ms ease;
}
.matchmaking-progress-meta {
  width: min(520px, 100%);
  margin: 7px auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(224, 239, 255, 0.8);
}
.matchmaking-status {
  margin-top: 13px;
  color: rgba(229, 242, 255, 0.8);
  font-size: 14px;
}
.matchmaking-overlay.is-confirming .matchmaking-stage {
  color: #8bffc8;
}
.matchmaking-overlay.is-confirming .matchmaking-core {
  animation-duration: 0.9s;
  box-shadow: 0 0 54px rgba(126, 241, 172, 0.52);
}
.matchmaking-overlay.is-confirming .matchmaking-shell {
  animation: matchSuccessZoomFade 1.26s cubic-bezier(0.2, 0.78, 0.16, 1) forwards;
}
.matchmaking-overlay.is-confirming .matchmaking-success-ripple {
  animation: matchSuccessRipple 1.14s ease-out forwards;
}
.matchmaking-overlay.is-confirming .matchmaking-success-label {
  animation: matchSuccessLabel 1.14s cubic-bezier(0.16, 0.82, 0.3, 1) forwards;
}
.matchmaking-overlay.is-confirming .matchmaking-success-label-echo {
  animation: matchSuccessLabelEcho 1.3s ease-out forwards;
}
.matchmaking-overlay.is-confirming .matchmaking-success-beam {
  animation: matchSuccessBeam 1.2s ease-out forwards;
}
.lobby-backdrop,
.settings-overlay {
  position: absolute;
  inset: 0;
}
.lobby-backdrop {
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 186, 92, 0.28),
      transparent 22%),
    radial-gradient(
      circle at 78% 14%,
      rgba(18, 240, 167, 0.18),
      transparent 20%),
    radial-gradient(
      circle at 52% 88%,
      rgba(77, 140, 255, 0.14),
      transparent 18%),
    linear-gradient(
      140deg,
      rgba(5, 16, 26, 0.88),
      rgba(9, 24, 38, 0.8));
}
.lobby-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 26px;
  width: min(1380px, calc(100% - 40px));
  height: min(960px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  margin: 20px auto;
  padding: 26px 28px;
  border-radius: 32px;
  background:
    linear-gradient(
      180deg,
      rgba(8, 22, 36, 0.85),
      rgba(7, 18, 30, 0.74));
  border: 1px solid var(--panel-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.lobby-overlay.is-modal-only .lobby-shell {
  display: none;
}
.lobby-topbar,
.lobby-footer,
.lobby-grid {
  position: relative;
  z-index: 2;
}
.lobby-topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}
.lobby-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lobby-brand-mark {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  font-size: 24px;
  font-weight: 900;
  color: #07131f;
  background:
    linear-gradient(
      135deg,
      #12f0a7,
      #4bd8ff);
  box-shadow: 0 18px 28px rgba(18, 240, 167, 0.22);
}
.lobby-brand-title {
  font-size: 30px;
  font-weight: 800;
}
.lobby-brand-subtitle {
  color: var(--text-soft);
  margin-top: 4px;
}
.lobby-topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lobby-player-pill,
.lobby-resource-card,
.lobby-highlight-card,
.lobby-mode-card,
.lobby-side-card,
.lobby-footer {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
}
.lobby-player-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
}
.lobby-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #ffb340,
      #ff6d3a);
  color: #07131f;
  font-weight: 900;
}
.lobby-player-name {
  font-weight: 700;
}
.lobby-player-status,
.lobby-mode-meta,
.lobby-side-card p,
.lobby-footer-copy small {
  color: var(--text-soft);
}
.lobby-resource-strip {
  display: flex;
  gap: 10px;
}
.lobby-resource-card {
  min-width: 104px;
  padding: 10px 14px;
  border-radius: 16px;
}
.lobby-resource-card span {
  display: block;
  color: var(--text-soft);
  font-size: 12px;
  margin-bottom: 4px;
}
.lobby-ghost-button {
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--text-main);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.lobby-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.8fr;
  gap: 18px;
  min-height: 0;
  overflow: hidden;
}
.lobby-hero,
.lobby-mode-panel,
.lobby-side-panel {
  min-height: 0;
}
.lobby-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 10px 8px 10px 4px;
}
.lobby-badge {
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 179, 64, 0.18);
  color: #ffd18a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.lobby-hero h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(34px, 3.8vw, 62px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.lobby-hero p {
  margin: 0;
  max-width: 640px;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.7;
}
.lobby-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.lobby-highlight-card {
  padding: 16px;
  border-radius: 20px;
}
.lobby-highlight-card span {
  display: block;
  color: var(--text-soft);
  font-size: 13px;
  margin-bottom: 8px;
}
.lobby-highlight-card strong {
  font-size: 18px;
}
.lobby-mode-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}
.lobby-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px;
  color: var(--text-soft);
}
.lobby-section-heading strong {
  color: var(--text-main);
}
.lobby-mode-card {
  position: relative;
  padding: 18px;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
  will-change: transform;
}
.lobby-mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255, 255, 255, 0.12) 50%,
      transparent 80%);
  transform: translateX(-130%);
  transition: transform 320ms ease;
  pointer-events: none;
}
.lobby-mode-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.24);
}
.lobby-mode-card:hover::after {
  transform: translateX(120%);
}
.lobby-mode-card.is-active {
  background:
    linear-gradient(
      180deg,
      rgba(18, 240, 167, 0.15),
      rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.05);
  border-color: rgba(18, 240, 167, 0.35);
  box-shadow: 0 18px 34px rgba(18, 240, 167, 0.16);
}
.lobby-mode-card.is-disabled {
  opacity: 0.75;
}
.lobby-mode-card:focus-visible {
  outline: 2px solid rgba(18, 240, 167, 0.9);
  outline-offset: 2px;
}
.lobby-mode-status {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lobby-mode-title {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 800;
}
.lobby-mode-card ul {
  padding-left: 18px;
  margin: 14px 0 0;
  color: var(--text-soft);
  line-height: 1.7;
}
.lobby-side-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}
.lobby-side-card {
  padding: 18px;
  border-radius: 22px;
}
.lobby-side-card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.lobby-side-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-soft);
  line-height: 1.8;
}
.lobby-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border-radius: 26px;
}
.lobby-footer-copy span {
  display: block;
  color: var(--text-soft);
  font-size: 13px;
}
.lobby-footer-copy strong {
  display: block;
  font-size: 28px;
  margin: 4px 0;
}
.lobby-footer-actions {
  display: flex;
  gap: 12px;
}
.lobby-start-button {
  min-width: 168px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  color: #07131f;
  background:
    linear-gradient(
      135deg,
      #12f0a7,
      #ffca62);
  box-shadow: 0 18px 28px rgba(18, 240, 167, 0.22);
  position: relative;
  overflow: hidden;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}
.lobby-start-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  animation: sweep 2.8s ease-in-out infinite;
}
.lobby-start-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 34px rgba(18, 240, 167, 0.26);
}
.lobby-start-button:active {
  transform: translateY(1px) scale(0.992);
}
.lobby-start-button.is-disabled,
.lobby-start-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  box-shadow: none;
}
.lobby-start-button.is-disabled::after,
.lobby-start-button:disabled::after {
  animation: none;
}
.lobby-start-button--small {
  min-width: 120px;
  padding: 12px 18px;
  font-size: 15px;
}
.settings-overlay {
  display: grid;
  place-items: center;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  background: rgba(3, 9, 16, 0.48);
  transition: opacity 180ms ease, visibility 180ms ease;
  pointer-events: none;
}
.lobby-overlay.is-settings-open .settings-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.settings-panel {
  width: min(560px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  padding: 24px;
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      rgba(9, 22, 34, 0.98),
      rgba(7, 18, 30, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  overflow: auto;
}
.settings-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}
.settings-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.settings-header h2 {
  margin: 0;
  font-size: 28px;
}
.settings-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  font-size: 28px;
  line-height: 1;
}
.settings-field {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  color: var(--text-soft);
}
.settings-field input {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.settings-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.settings-toggle:has(input:checked) {
  border-color: rgba(18, 240, 167, 0.35);
  background: rgba(18, 240, 167, 0.1);
}
.settings-toggle--wide {
  grid-column: 1 / -1;
}
.settings-toggle input {
  width: 18px;
  height: 18px;
}
.settings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
}
.settings-footer p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.6;
}
.lobby-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  animation: floaty 8s ease-in-out infinite;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
  transition: transform 120ms linear;
}
.lobby-orb--one {
  top: 12%;
  left: 8%;
  width: 220px;
  height: 220px;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(18, 240, 167, 0.55),
      rgba(18, 240, 167, 0.06));
}
.lobby-orb--two {
  top: 18%;
  right: 12%;
  width: 300px;
  height: 300px;
  animation-duration: 10s;
  background:
    radial-gradient(
      circle at 40% 35%,
      rgba(255, 179, 64, 0.44),
      rgba(255, 179, 64, 0.05));
  transform: translate3d(calc(var(--parallax-x) * -0.7), calc(var(--parallax-y) * -0.7), 0);
}
.lobby-orb--three {
  bottom: 10%;
  left: 40%;
  width: 180px;
  height: 180px;
  animation-duration: 7s;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(77, 140, 255, 0.42),
      rgba(77, 140, 255, 0.04));
  transform: translate3d(calc(var(--parallax-x) * 0.45), calc(var(--parallax-y) * 0.45), 0);
}
@keyframes floaty {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -18px, 0) scale(1.03);
  }
}
@keyframes sweep {
  0% {
    left: -120%;
  }
  60%, 100% {
    left: 150%;
  }
}
.lobby-overlay.is-mode-locked .lobby-start-button {
  animation: modeLockedShake 220ms ease;
}
@keyframes modeLockedShake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes lobbyStatusPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}
@keyframes matchRingRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes matchCorePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
@keyframes matchOrbFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -22px, 0);
  }
}
@keyframes matchFlowRun {
  0% {
    transform: translateX(-18%) scaleX(0.88);
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.48;
  }
  100% {
    transform: translateX(18%) scaleX(1.04);
    opacity: 0;
  }
}
@keyframes matchSparkDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(0.3);
    opacity: 0;
  }
  28% {
    opacity: 0.9;
    transform: translate3d(0, -6px, 0) scale(1);
  }
  70% {
    opacity: 0.55;
  }
  100% {
    transform: translate3d(0, -18px, 0) scale(0.2);
    opacity: 0;
  }
}
@keyframes matchSuccessRipple {
  0% {
    opacity: 0;
    transform: scale(0.26);
  }
  28% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}
@keyframes matchSuccessLabel {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58);
    filter: blur(4px);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
    filter: blur(0.3px);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -56%) scale(1.26);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -72%) scale(1.86);
    filter: blur(5px);
  }
}
@keyframes matchSuccessLabelEcho {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    filter: blur(8px);
  }
  36% {
    opacity: 0.62;
    transform: translate(-50%, -60%) scale(1.36);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -78%) scale(2.2);
    filter: blur(9px);
  }
}
@keyframes matchSuccessBeam {
  0% {
    opacity: 0;
    transform: scaleX(0.16);
  }
  30% {
    opacity: 0.95;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.26);
  }
}
@keyframes matchSuccessZoomFade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  46% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
[data-reduced-motion=true] .lobby-orb,
html[data-reduced-motion=true] .lobby-orb {
  animation: none;
  transform: translate3d(0, 0, 0);
}
[data-reduced-motion=true] .matchmaking-orb,
html[data-reduced-motion=true] .matchmaking-orb,
[data-reduced-motion=true] .matchmaking-ring,
html[data-reduced-motion=true] .matchmaking-ring,
[data-reduced-motion=true] .matchmaking-flow-line,
html[data-reduced-motion=true] .matchmaking-flow-line,
[data-reduced-motion=true] .matchmaking-flow-arc,
html[data-reduced-motion=true] .matchmaking-flow-arc,
[data-reduced-motion=true] .matchmaking-flow-spark,
html[data-reduced-motion=true] .matchmaking-flow-spark,
[data-reduced-motion=true] .matchmaking-core,
html[data-reduced-motion=true] .matchmaking-core,
[data-reduced-motion=true] .matchmaking-success-ripple,
html[data-reduced-motion=true] .matchmaking-success-ripple,
[data-reduced-motion=true] .matchmaking-success-label,
html[data-reduced-motion=true] .matchmaking-success-label,
[data-reduced-motion=true] .matchmaking-success-label-echo,
html[data-reduced-motion=true] .matchmaking-success-label-echo,
[data-reduced-motion=true] .matchmaking-success-beam,
html[data-reduced-motion=true] .matchmaking-success-beam,
[data-reduced-motion=true] .matchmaking-overlay.is-confirming .matchmaking-shell,
html[data-reduced-motion=true] .matchmaking-overlay.is-confirming .matchmaking-shell {
  animation: none;
}
[data-reduced-motion=true] .matchmaking-success-ripple,
html[data-reduced-motion=true] .matchmaking-success-ripple,
[data-reduced-motion=true] .matchmaking-success-label-echo,
html[data-reduced-motion=true] .matchmaking-success-label-echo,
[data-reduced-motion=true] .matchmaking-success-beam,
html[data-reduced-motion=true] .matchmaking-success-beam {
  opacity: 0;
}
[data-reduced-motion=true] .matchmaking-success-label,
html[data-reduced-motion=true] .matchmaking-success-label {
  opacity: 0;
  filter: none;
  transform: translate(-50%, -50%) scale(1);
}
[data-reduced-motion=true] .matchmaking-overlay.is-confirming .matchmaking-success-label,
html[data-reduced-motion=true] .matchmaking-overlay.is-confirming .matchmaking-success-label {
  opacity: 1;
}
[data-reduced-motion=true] .lobby-start-button::after,
html[data-reduced-motion=true] .lobby-start-button::after {
  animation: none;
}
@media (max-width: 1023px) {
  .lobby-shell {
    width: min(100%, calc(100% - 20px));
    height: min(960px, calc(100dvh - 20px));
    max-height: calc(100dvh - 20px);
    margin: 10px auto;
    padding: 20px;
  }
  .matchmaking-shell {
    width: min(100%, calc(100% - 20px));
    border-radius: 22px;
    padding: 20px 16px 18px;
  }
  .matchmaking-ring-stage {
    width: min(300px, 80vw);
  }
  .lobby-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "hero hero" "modes side";
    overflow: auto;
  }
  .lobby-hero {
    grid-area: hero;
  }
  .lobby-mode-panel {
    grid-area: modes;
  }
  .lobby-side-panel {
    grid-area: side;
  }
  .lobby-topbar,
  .lobby-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .lobby-topbar-actions,
  .lobby-footer-actions {
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .lobby-shell {
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    padding: 16px;
    border-radius: 24px;
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    margin: 6px auto;
  }
  .lobby-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "modes" "side";
    overflow-y: auto;
    padding-bottom: 76px;
  }
  .lobby-highlights,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .lobby-topbar-actions,
  .lobby-resource-strip,
  .lobby-footer-actions,
  .settings-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .lobby-brand {
    align-items: start;
  }
  .lobby-brand-title {
    font-size: 22px;
  }
  .lobby-hero h1 {
    font-size: 30px;
    max-width: none;
    line-height: 1.18;
  }
  .lobby-hero p {
    font-size: 15px;
    line-height: 1.65;
  }
  .lobby-footer {
    position: sticky;
    bottom: 0;
  }
  .lobby-start-button,
  .lobby-ghost-button {
    width: 100%;
  }
  .match-result-panel {
    width: min(100%, calc(100% - 10px));
    padding: 18px 14px 16px;
    border-radius: 18px;
  }
  .match-result-rank-splash {
    padding: 18px;
  }
  .match-result-rank-splash-stage {
    min-height: 320px;
  }
  .match-result-rank-splash-kicker,
  .match-result-rank-splash-caption {
    letter-spacing: 0.2em;
  }
  .match-result-rank-splash-number {
    font-size: clamp(168px, 34vw, 280px);
  }
  .match-result-rank-splash-title {
    margin-top: -18px;
    font-size: clamp(20px, 6vw, 30px);
  }
  .match-result-rank-splash-wings {
    top: 22px;
    width: min(94vw, 620px);
  }
  .match-result-rank-splash-wings span {
    width: clamp(112px, 24vw, 182px);
    height: clamp(44px, 10vw, 68px);
  }
  .match-result-title {
    font-size: clamp(28px, 9vw, 44px);
  }
  .match-result-rank-main-headline {
    font-size: clamp(30px, 10vw, 50px);
  }
  .match-result-rank-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .match-result-podium {
    grid-template-columns: 1fr;
  }
  .match-result-phoenix-wings {
    display: none;
  }
  .match-result-player-rank-card {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .match-result-rewards {
    grid-template-columns: 1fr;
  }
  .match-result-mode-stats {
    grid-template-columns: 1fr;
  }
  .match-result-ball-stage {
    min-height: 176px;
  }
  .match-result-growth-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .match-result-actions {
    flex-direction: column;
  }
  .hud-stats,
  .hud-debug,
  .hud-leaderboard,
  .hud-team-summary,
  .hud-zone-alert,
  .hud-action-bar {
    left: 12px;
    right: 12px;
    width: auto;
  }
  .hud-action-bar {
    top: auto;
    bottom: 12px;
    justify-content: flex-end;
  }
  .hud-leaderboard {
    top: auto;
    bottom: 92px;
  }
  .hud-team-summary {
    top: auto;
    bottom: 236px;
  }
  .hud-zone-alert {
    top: 72px;
    transform: none;
    min-width: 0;
  }
  .hud-minimap {
    left: auto;
    right: 12px;
    bottom: 228px;
  }
  .hud-debug {
    top: auto;
    bottom: 392px;
  }
  .hud-timer {
    top: 12px;
    padding: 10px 18px;
  }
  .hud-timer-value {
    font-size: 24px;
  }
}
@media (max-height: 860px) {
  .lobby-shell {
    width: min(100%, calc(100% - 16px));
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px auto;
    padding: 14px 16px;
    border-radius: 22px;
    gap: 14px;
  }
  .lobby-topbar {
    gap: 12px;
  }
  .lobby-topbar-actions {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .lobby-brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 18px;
  }
  .lobby-brand-title {
    font-size: 24px;
  }
  .lobby-grid {
    gap: 12px;
    overflow: auto;
  }
  .lobby-hero {
    gap: 12px;
  }
  .lobby-hero h1 {
    font-size: clamp(24px, 4.8vh, 40px);
    line-height: 1.16;
  }
  .lobby-hero p {
    font-size: 15px;
    line-height: 1.55;
  }
  .lobby-mode-card,
  .lobby-side-card,
  .lobby-highlight-card {
    padding: 14px;
    border-radius: 16px;
  }
  .lobby-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(7, 18, 30, 0.94);
    backdrop-filter: blur(8px);
  }
  .lobby-footer-copy strong {
    font-size: 22px;
  }
  .lobby-start-button {
    min-width: 148px;
    padding: 12px 18px;
    font-size: 16px;
  }
  .match-result-overlay {
    padding: 10px;
  }
  .match-result-panel {
    padding: 14px 14px 16px;
    border-radius: 18px;
  }
  .match-result-rank-splash {
    padding: 16px;
  }
  .match-result-rank-splash-stage {
    min-height: 300px;
  }
  .match-result-rank-splash-number {
    font-size: clamp(176px, 28vh, 280px);
  }
  .match-result-rank-splash-title {
    margin-top: -20px;
    font-size: clamp(18px, 3.2vh, 28px);
  }
  .match-result-rank-splash-wings {
    top: 22px;
    width: min(88vw, 640px);
  }
  .match-result-title {
    font-size: clamp(26px, 5vh, 46px);
  }
  .match-result-rank-main-headline {
    font-size: clamp(30px, 6.2vh, 54px);
  }
  .match-result-ball-stage {
    min-height: 160px;
  }
  .match-record-badge {
    right: 6%;
    top: 14%;
  }
  .match-result-reward-card strong {
    font-size: 18px;
  }
}
@media (max-height: 700px) {
  .match-result-overlay {
    align-items: center;
    padding: 6px;
  }
  .match-result-panel {
    width: min(100%, calc(100% - 4px));
    padding: 12px 12px 14px;
  }
  .match-result-rank-splash {
    padding: 10px;
  }
  .match-result-rank-splash-stage {
    min-height: 248px;
  }
  .match-result-rank-splash-kicker,
  .match-result-rank-splash-caption {
    font-size: 11px;
    letter-spacing: 0.16em;
  }
  .match-result-rank-splash-number {
    font-size: clamp(148px, 24vh, 224px);
  }
  .match-result-rank-splash-title {
    margin-top: -14px;
    font-size: clamp(18px, 3.4vh, 26px);
  }
  .match-result-rank-splash-rays,
  .match-result-rank-splash-wings {
    opacity: 0.72;
  }
  .match-result-rank-stage {
    margin-bottom: 8px;
    padding: 10px 10px 8px;
  }
  .match-result-ball-stage {
    min-height: 134px;
    margin-bottom: 6px;
  }
  .match-result-energy-lines,
  .match-result-phoenix-wings {
    display: none;
  }
  .match-result-actions {
    margin-top: 10px;
  }
}
.lobby-shell--v2 {
  display: grid;
  grid-template-rows: var(--ui-shell-header-height) minmax(var(--ui-shell-main-min), 1fr) var(--ui-shell-footer-height);
  gap: var(--ui-shell-gap);
  width: min(1520px, var(--ui-shell-safe-width));
  height: var(--ui-shell-height);
  max-height: var(--ui-shell-safe-height);
  margin: var(--ui-shell-margin) auto;
  padding: var(--ui-shell-padding);
  border-radius: var(--ui-shell-radius);
  background:
    radial-gradient(
      circle at 14% -12%,
      rgba(255, 194, 98, 0.16),
      transparent 38%),
    radial-gradient(
      circle at 84% -4%,
      rgba(93, 165, 255, 0.18),
      transparent 36%),
    linear-gradient(
      180deg,
      rgba(8, 21, 34, 0.9),
      rgba(7, 17, 29, 0.86));
  border: 1px solid var(--glass-card-border);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.36);
}
.lobby-topbar--v2 {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto minmax(280px, 0.9fr);
  gap: 18px;
  align-items: stretch;
}
.lobby-brand--v2 {
  align-items: center;
  justify-self: center;
}
.lobby-right-widgets {
  display: grid;
  gap: 10px;
  align-content: start;
}
.lobby-mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lobby-mini-card-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background:
    linear-gradient(
      145deg,
      rgba(86, 178, 255, 0.2),
      rgba(33, 101, 179, 0.28));
  color: #b8eeff;
  box-shadow: 0 8px 18px rgba(24, 109, 173, 0.24);
}
.lobby-mini-card-icon-svg {
  width: 18px;
  height: 18px;
}
.lobby-mini-card strong {
  display: block;
  font-size: 14px;
}
.lobby-mini-card small {
  color: var(--text-soft);
  font-size: 12px;
}
.lobby-profile-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-shell-md);
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  min-width: min(560px, 64vw);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lobby-profile-card--home {
  min-width: 0;
}
.lobby-avatar-button {
  border: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--text-soft);
  cursor: pointer;
}
.lobby-avatar-upload-text {
  font-size: 12px;
  color: var(--text-soft);
}
.lobby-avatar-slot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      140deg,
      #ffb350,
      #ff6f4f);
  color: #051321;
  font-weight: 900;
  border: 2px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}
.lobby-avatar-slot.has-avatar {
  border-color: rgba(255, 255, 255, 0.45);
}
.lobby-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.lobby-avatar-img.is-visible {
  display: block;
}
.lobby-avatar-fallback {
  display: none;
  font-size: 22px;
}
.lobby-avatar-fallback.is-visible {
  display: inline;
}
.lobby-profile-meta {
  display: grid;
  gap: 7px;
}
.lobby-profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  flex-wrap: wrap;
}
.lobby-profile-name-row strong {
  font-size: 17px;
}
.lobby-rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #ffe7ab;
  background:
    linear-gradient(
      145deg,
      rgba(255, 210, 116, 0.24),
      rgba(172, 95, 24, 0.26));
  border: 1px solid rgba(255, 225, 162, 0.38);
}
.lobby-rank-chip-icon {
  width: 14px;
  height: 14px;
  color: #ffde95;
}
.lobby-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9deed3;
}
.lobby-status-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #32e2a0;
  box-shadow: 0 0 10px rgba(50, 226, 160, 0.8);
  animation: lobbyStatusPulse 1.8s ease-in-out infinite;
}
.lobby-profile-growth-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lobby-coin-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 212, 127, 0.24),
      rgba(165, 94, 21, 0.24));
  border: 1px solid rgba(255, 220, 156, 0.35);
  color: #ffe8b4;
  font-size: 12px;
  font-weight: 700;
}
.lobby-coin-chip strong {
  font-size: 13px;
  color: #fff3cf;
}
.lobby-coin-chip-icon {
  width: 14px;
  height: 14px;
  color: #ffd874;
}
.lobby-growth-meta {
  font-size: 12px;
  color: rgba(211, 231, 255, 0.82);
}
.lobby-quick-name-wrap {
  display: grid;
  gap: 4px;
  color: var(--text-soft);
  font-size: 12px;
}
.lobby-quick-name-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  padding: 8px 10px;
}
.lobby-xp-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.lobby-xp-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #4ff4d8,
      #5fb8ff);
  box-shadow: 0 0 12px rgba(80, 227, 255, 0.45);
  transition: width 260ms ease;
}
.lobby-xp-text {
  margin-top: -2px;
  font-size: 11px;
  color: rgba(204, 227, 255, 0.84);
  letter-spacing: 0.01em;
}
.lobby-ghost-button--compact {
  padding: 10px 13px;
  font-size: 13px;
}
.lobby-main--v2 {
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(400px, 1.08fr);
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}
.lobby-preview-panel--v2,
.lobby-mode-panel--v2 {
  min-height: 0;
  border-radius: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 12px;
}
.lobby-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.lobby-panel-head strong {
  font-size: 19px;
}
.lobby-panel-head small {
  color: var(--text-soft);
  display: block;
  margin-top: 3px;
}
.lobby-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(18, 240, 167, 0.2);
  color: #c8ffe9;
}
.lobby-tag--muted {
  background: rgba(255, 255, 255, 0.12);
  color: #d7e7ff;
}
.lobby-tag--muted.is-open {
  background: rgba(89, 255, 189, 0.16);
  color: #bdffe2;
}
.lobby-tag--muted.is-testing {
  background: rgba(255, 193, 108, 0.18);
  color: #ffe0b4;
}
.lobby-tag--muted.is-locked {
  background: rgba(255, 132, 132, 0.18);
  color: #ffd0d0;
}
.lobby-tag-icon {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ddf6ff;
  display: grid;
  place-items: center;
}
.lobby-tag-icon-svg {
  width: 100%;
  height: 100%;
}
.lobby-preview-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  border-radius: 16px;
  background: rgba(7, 17, 29, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lobby-skin-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.lobby-skin-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 700;
}
.lobby-skin-chip-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      var(--skin-a),
      var(--skin-b));
  box-shadow: 0 0 10px var(--skin-glow);
}
.lobby-skin-chip.is-active {
  border-color: rgba(18, 240, 167, 0.5);
  background: rgba(18, 240, 167, 0.14);
}
.lobby-mode-panel--v2 {
  overflow: hidden;
}
.lobby-mode-grid--v2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}
.lobby-mode-card--v2 {
  --mode-accent: rgba(117, 230, 255, 0.66);
  --mode-surface: rgba(255, 255, 255, 0.06);
  --mode-glow: rgba(73, 216, 255, 0.24);
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius-shell-sm);
  cursor: pointer;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--mode-accent) 16%, transparent),
      transparent 48%),
    var(--mode-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background-color 170ms ease,
    box-shadow 170ms ease;
  position: relative;
  overflow: hidden;
}
.lobby-mode-card--v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent,
      color-mix(in srgb, var(--mode-accent) 34%, transparent),
      transparent);
  transform: translateX(-140%);
  transition: transform 330ms ease;
  pointer-events: none;
}
.lobby-mode-card--v2:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mode-accent) 56%, rgba(255, 255, 255, 0.24));
  box-shadow: 0 16px 28px color-mix(in srgb, var(--mode-glow) 74%, transparent);
}
.lobby-mode-card--v2:hover::after {
  transform: translateX(140%);
}
.lobby-mode-card--v2.is-active {
  border-color: color-mix(in srgb, var(--mode-accent) 65%, rgba(255, 255, 255, 0.24));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode-accent) 45%, transparent), 0 18px 30px color-mix(in srgb, var(--mode-glow) 85%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--mode-accent) 28%, transparent),
      transparent 55%),
    rgba(255, 255, 255, 0.07);
}
.lobby-mode-card--v2.is-disabled {
  opacity: 0.78;
}
.lobby-mode-card--v2:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--mode-accent) 74%, white);
  outline-offset: 2px;
}
.lobby-mode-card--v2.is-theme-gold {
  --mode-accent: rgba(255, 202, 101, 0.75);
  --mode-glow: rgba(255, 189, 103, 0.3);
}
.lobby-mode-card--v2.is-theme-violet {
  --mode-accent: rgba(182, 144, 255, 0.74);
  --mode-glow: rgba(156, 119, 255, 0.3);
}
.lobby-mode-card--v2.is-theme-cyan {
  --mode-accent: rgba(92, 233, 255, 0.72);
  --mode-glow: rgba(73, 224, 255, 0.3);
}
.lobby-mode-card--v2.is-theme-amber {
  --mode-accent: rgba(255, 179, 102, 0.76);
  --mode-glow: rgba(255, 160, 88, 0.32);
}
.lobby-mode-card--v2.is-theme-purple {
  --mode-accent: rgba(178, 117, 255, 0.75);
  --mode-glow: rgba(154, 97, 255, 0.32);
}
.lobby-mode-card--v2.is-theme-red {
  --mode-accent: rgba(255, 144, 116, 0.76);
  --mode-glow: rgba(255, 115, 94, 0.32);
}
.lobby-mode-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.lobby-mode-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lobby-mode-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--mode-accent) 30%, transparent),
      rgba(255, 255, 255, 0.08));
  color: color-mix(in srgb, var(--mode-accent) 78%, #f6faff);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--mode-glow) 70%, transparent);
}
.lobby-mode-icon-svg {
  width: 16px;
  height: 16px;
}
.lobby-mode-card-head strong {
  font-size: 17px;
}
.lobby-mode-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #dcf0ff;
}
.lobby-mode-status-badge.is-open {
  color: #c1ffe2;
  border-color: rgba(105, 255, 193, 0.5);
  background: rgba(71, 255, 176, 0.14);
}
.lobby-mode-status-badge.is-testing {
  color: #ffe0b8;
  border-color: rgba(255, 201, 139, 0.46);
  background: rgba(255, 188, 103, 0.14);
}
.lobby-mode-status-badge.is-locked {
  color: #ffd3d3;
  border-color: rgba(255, 151, 151, 0.46);
  background: rgba(255, 132, 132, 0.14);
}
.lobby-mode-card--v2 p {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
.lobby-bottom--v2 {
  display: grid;
  gap: 10px;
  border-radius: 20px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lobby-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.lobby-feature-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 700;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}
.lobby-feature-button:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.lobby-feature-button.is-active {
  border-color: rgba(108, 240, 255, 0.58);
  background:
    linear-gradient(
      145deg,
      rgba(92, 233, 255, 0.18),
      rgba(71, 173, 255, 0.14));
  box-shadow: 0 12px 22px rgba(69, 176, 255, 0.24);
}
.lobby-feature-icon {
  width: 18px;
  height: 18px;
  color: #bfefff;
}
.lobby-feature-button span {
  line-height: 1;
}
.lobby-feature-button:focus-visible {
  outline: 2px solid rgba(136, 239, 255, 0.85);
  outline-offset: 2px;
}
.lobby-footer-actions--v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.lobby-selection-copy {
  display: grid;
  gap: 3px;
}
.lobby-selection-copy span {
  font-size: 12px;
  color: var(--text-soft);
}
.lobby-selection-copy strong {
  font-size: 24px;
  line-height: 1.1;
}
.lobby-selection-copy small {
  color: var(--text-soft);
}
.lobby-action-buttons {
  display: flex;
  gap: 10px;
}
.lobby-overlay[data-mode-theme=gold] .lobby-start-button {
  background:
    linear-gradient(
      135deg,
      #ffd77a,
      #ffac58);
  box-shadow: 0 18px 30px rgba(255, 185, 86, 0.28);
}
.lobby-overlay[data-mode-theme=violet] .lobby-start-button {
  background:
    linear-gradient(
      135deg,
      #cca3ff,
      #7b6bff);
  box-shadow: 0 18px 30px rgba(144, 106, 255, 0.28);
}
.lobby-overlay[data-mode-theme=cyan] .lobby-start-button {
  background:
    linear-gradient(
      135deg,
      #74f3ff,
      #4abfff);
  box-shadow: 0 18px 30px rgba(77, 204, 255, 0.3);
}
.lobby-overlay[data-mode-theme=amber] .lobby-start-button {
  background:
    linear-gradient(
      135deg,
      #ffd07a,
      #ff9962);
  box-shadow: 0 18px 30px rgba(255, 163, 94, 0.3);
}
.lobby-overlay[data-mode-theme=purple] .lobby-start-button {
  background:
    linear-gradient(
      135deg,
      #d89aff,
      #a86eff);
  box-shadow: 0 18px 30px rgba(168, 110, 255, 0.28);
}
.lobby-overlay[data-mode-theme=red] .lobby-start-button {
  background:
    linear-gradient(
      135deg,
      #ffb08b,
      #ff7e75);
  box-shadow: 0 18px 30px rgba(255, 129, 112, 0.3);
}
.lobby-inline-tip {
  min-height: 18px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.8;
  transition: color 140ms ease, opacity 140ms ease;
}
.lobby-overlay.is-inline-tip-active .lobby-inline-tip {
  color: #d3ffef;
  opacity: 1;
}
.lobby-hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.settings-panel--v2 {
  width: min(620px, calc(100% - 28px));
  display: grid;
  gap: 14px;
}
.settings-avatar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.settings-avatar-slot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(
      140deg,
      #ffb350,
      #ff6f4f);
}
.settings-avatar-actions {
  display: flex;
  gap: 10px;
}
.settings-skin-area {
  display: grid;
  gap: 8px;
}
.settings-field-title {
  color: var(--text-soft);
  font-size: 13px;
}
.lobby-skin-strip--settings {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-reduced-motion=true] .lobby-mode-card--v2,
html[data-reduced-motion=true] .lobby-mode-card--v2 {
  transition: none;
}
[data-reduced-motion=true] .lobby-feature-button,
html[data-reduced-motion=true] .lobby-feature-button {
  transition: none;
}
[data-reduced-motion=true] .match-result-ball,
html[data-reduced-motion=true] .match-result-ball,
[data-reduced-motion=true] .match-result-burst::before,
html[data-reduced-motion=true] .match-result-burst::before,
[data-reduced-motion=true] .match-result-burst::after,
html[data-reduced-motion=true] .match-result-burst::after,
[data-reduced-motion=true] .match-result-bg-particle,
html[data-reduced-motion=true] .match-result-bg-particle,
[data-reduced-motion=true] .match-result-rank-splash-rays,
html[data-reduced-motion=true] .match-result-rank-splash-rays,
[data-reduced-motion=true] .match-result-rank-splash-stage::after,
html[data-reduced-motion=true] .match-result-rank-splash-stage::after,
[data-reduced-motion=true] .match-result-rank-splash-wings span,
html[data-reduced-motion=true] .match-result-rank-splash-wings span,
[data-reduced-motion=true] .match-result-rank-splash-medal-shell,
html[data-reduced-motion=true] .match-result-rank-splash-medal-shell,
[data-reduced-motion=true] .match-result-rank-splash-number,
html[data-reduced-motion=true] .match-result-rank-splash-number,
[data-reduced-motion=true] .match-result-energy-lines,
html[data-reduced-motion=true] .match-result-energy-lines,
[data-reduced-motion=true] .match-result-phoenix-wings span,
html[data-reduced-motion=true] .match-result-phoenix-wings span,
[data-reduced-motion=true] .match-record-badge,
html[data-reduced-motion=true] .match-record-badge {
  animation: none;
}
@media (max-width: 1150px) {
  .lobby-shell--v2 {
    width: min(100%, calc(100% - 20px));
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px auto;
    padding: 16px;
    gap: 14px;
  }
  .lobby-topbar--v2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lobby-profile-card {
    min-width: 0;
  }
  .lobby-brand--v2 {
    justify-self: start;
  }
  .lobby-right-widgets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lobby-main--v2 {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    overflow: hidden;
    padding-bottom: 0;
  }
  .lobby-preview-panel--v2,
  .lobby-mode-panel--v2 {
    min-height: 0;
  }
  .lobby-preview-canvas {
    max-height: 300px;
    object-fit: cover;
  }
  .lobby-mode-grid--v2 {
    max-height: none;
    overflow: auto;
  }
}
@media (max-width: 980px) {
  .lobby-main--v2 {
    grid-template-columns: 1fr;
    overflow: auto;
    padding-bottom: 8px;
  }
  .lobby-preview-panel--v2,
  .lobby-mode-panel--v2 {
    min-height: auto;
  }
  .lobby-mode-grid--v2 {
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 767px) {
  .lobby-overlay {
    overflow: hidden;
  }
  .lobby-shell--v2 {
    border-radius: 20px;
    padding: 12px;
    gap: 12px;
    height: auto;
    min-height: calc(100dvh - 12px);
    max-height: none;
    overflow-y: auto;
  }
  .lobby-brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 18px;
  }
  .lobby-brand-title {
    font-size: 22px;
  }
  .lobby-brand-subtitle {
    font-size: 13px;
  }
  .lobby-profile-card {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .lobby-right-widgets {
    grid-template-columns: 1fr;
  }
  .lobby-profile-card .lobby-ghost-button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .lobby-skin-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lobby-mode-grid--v2 {
    grid-template-columns: 1fr;
  }
  .lobby-main--v2 {
    overflow: visible;
    min-height: auto;
    padding-bottom: 8px;
  }
  .lobby-feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lobby-footer-actions--v2 {
    flex-direction: column;
    align-items: stretch;
  }
  .lobby-bottom--v2 {
    position: sticky;
    bottom: 0;
    z-index: 4;
    backdrop-filter: blur(10px);
  }
  .lobby-action-buttons {
    width: 100%;
    flex-direction: column;
  }
  .lobby-start-button,
  .lobby-ghost-button {
    width: 100%;
  }
  .matchmaking-shell {
    width: calc(100% - 12px);
    border-radius: 18px;
    padding: 18px 12px 16px;
  }
  .matchmaking-cancel {
    right: 10px;
    top: 10px;
    padding: 7px 10px;
    font-size: 12px;
  }
  .matchmaking-title {
    margin-top: 10px;
    font-size: clamp(24px, 8vw, 32px);
  }
  .matchmaking-title-mode {
    gap: 8px;
  }
  .matchmaking-mode-icon-shell {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    padding: 7px;
  }
  .matchmaking-stage {
    font-size: 13px;
  }
  .matchmaking-ring-stage {
    width: min(250px, 76vw);
    margin-top: 16px;
    margin-bottom: 8px;
  }
  .matchmaking-success-label {
    font-size: clamp(42px, 13vw, 72px);
  }
  .matchmaking-success-label-echo {
    font-size: clamp(34px, 10vw, 58px);
  }
  .matchmaking-count-line,
  .matchmaking-progress-meta,
  .matchmaking-status {
    font-size: 12px;
  }
  .settings-avatar-row {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-avatar-actions {
    flex-direction: column;
  }
  .lobby-skin-strip--settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
:root {
  --stitch-bg: #060e20;
  --stitch-surface-low: rgba(15, 25, 48, 0.7);
  --stitch-surface-high: rgba(25, 37, 64, 0.5);
  --stitch-surface-bright: rgba(31, 43, 73, 0.6);
  --stitch-primary: #81ecff;
  --stitch-secondary: #c37fff;
  --stitch-tertiary: #ffe483;
  --stitch-primary-dim: #00d4ec;
  --stitch-border-soft: rgba(255, 255, 255, 0.14);
  --stitch-border-strong: rgba(129, 236, 255, 0.34);
  --stitch-glass:
    linear-gradient(
      
      180deg,
      rgba(31, 43, 73, 0.45),
      rgba(15, 25, 48, 0.48) );
  --stitch-card-glow: 0 0 24px rgba(129, 236, 255, 0.16);
  --stitch-panel-glow: 0 20px 48px rgba(0, 0, 0, 0.35);
  --stitch-radius-xl: 24px;
  --stitch-radius-lg: 16px;
  --stitch-radius-md: 12px;
  --stitch-headline-font:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  --stitch-body-font:
    "Be Vietnam Pro",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
}
body {
  font-family: var(--stitch-body-font);
  background:
    radial-gradient(
      circle at 22% 18%,
      rgba(129, 236, 255, 0.08),
      transparent 36%),
    radial-gradient(
      circle at 84% 74%,
      rgba(195, 127, 255, 0.07),
      transparent 34%),
    linear-gradient(
      160deg,
      #040a18 0%,
      var(--stitch-bg) 58%,
      #081126 100%);
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  font-variation-settings:
    "FILL" 0,
    "wght" 500,
    "GRAD" 0,
    "opsz" 24;
  -webkit-font-smoothing: antialiased;
}
.lobby-brand-title,
.lobby-selection-copy strong,
.lobby-mode-card-head strong,
.mode-hall-title-wrap h2,
.mode-hall-panel-head strong {
  font-family: var(--stitch-headline-font);
}
.lobby-backdrop,
.mode-hall-backdrop {
  background:
    radial-gradient(
      circle at 16% 20%,
      rgba(129, 236, 255, 0.16),
      transparent 40%),
    radial-gradient(
      circle at 84% 10%,
      rgba(195, 127, 255, 0.14),
      transparent 42%),
    radial-gradient(
      circle at 50% 90%,
      rgba(255, 228, 131, 0.1),
      transparent 45%),
    linear-gradient(
      180deg,
      rgba(6, 14, 32, 0.94),
      rgba(6, 14, 32, 0.98));
}
.lobby-backdrop::before,
.mode-hall-backdrop::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(
      circle at 18% 30%,
      rgba(129, 236, 255, 0.12),
      transparent 42%),
    radial-gradient(
      circle at 80% 66%,
      rgba(195, 127, 255, 0.12),
      transparent 36%);
  animation: stitchNebulaDrift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.lobby-backdrop::after,
.mode-hall-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      160deg,
      transparent 0 20%,
      rgba(129, 236, 255, 0.16) 36%,
      transparent 44%),
    linear-gradient(
      160deg,
      transparent 0 62%,
      rgba(195, 127, 255, 0.12) 74%,
      transparent 82%);
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: stitchStreakDrift 12s linear infinite;
  pointer-events: none;
}
.lobby-shell--v2,
.mode-hall-shell {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background:
    radial-gradient(
      circle at 12% -8%,
      rgba(129, 236, 255, 0.12),
      transparent 42%),
    radial-gradient(
      circle at 92% 2%,
      rgba(195, 127, 255, 0.12),
      transparent 34%),
    var(--stitch-glass);
  border-color: var(--stitch-border-soft);
  box-shadow: var(--stitch-panel-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lobby-profile-card,
.lobby-mini-card,
.lobby-preview-panel--v2,
.lobby-mode-panel--v2,
.lobby-bottom--v2,
.mode-hall-hero,
.mode-hall-operation,
.mode-hall-intel,
.mode-hall-footer,
.mode-hall-room-line,
.mode-hall-room-members,
.mode-hall-social-list,
.mode-hall-social-row {
  background: var(--stitch-glass);
  border-color: var(--stitch-border-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lobby-mode-card--v2,
.mode-hall-tab-card,
.mode-hall-social-row,
.mode-hall-room-member {
  position: relative;
  overflow: hidden;
}
.lobby-mode-card--v2::before,
.mode-hall-tab-card::before,
.mode-hall-social-row::before,
.mode-hall-room-member::before {
  content: "";
  position: absolute;
  inset: -60% -160%;
  background:
    linear-gradient(
      120deg,
      transparent 0 42%,
      rgba(129, 236, 255, 0.24) 50%,
      rgba(195, 127, 255, 0.2) 56%,
      transparent 64% 100%);
  transform: rotate(8deg);
  opacity: 0.36;
  animation: stitchFlowBorder 6.4s linear infinite;
  pointer-events: none;
}
.lobby-mode-card--v2:hover,
.mode-hall-tab-card:hover,
.mode-hall-social-row:hover {
  transform: translateY(-2px) scale(1.01);
}
.lobby-mode-card--v2.is-active,
.mode-hall-tab.is-active,
.lobby-feature-button.is-active,
.mode-hall-header-btn--highlight {
  border-color: var(--stitch-border-strong);
  box-shadow: var(--stitch-card-glow), 0 0 36px rgba(129, 236, 255, 0.16);
}
.lobby-start-button,
.mode-hall-header-btn--highlight {
  position: relative;
  overflow: hidden;
}
.lobby-start-button::before,
.mode-hall-header-btn--highlight::before {
  content: "";
  position: absolute;
  top: -26%;
  left: -180%;
  width: 170%;
  height: 152%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.42) 0%,
      transparent 68%);
  transform: skewX(-20deg);
  animation: stitchShimmerSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}
.lobby-status-dot::before {
  box-shadow: 0 0 10px rgba(50, 226, 160, 0.8), 0 0 16px rgba(129, 236, 255, 0.34);
}
.mode-hall-tab {
  border-color: rgba(129, 236, 255, 0.26);
  background: rgba(25, 37, 64, 0.52);
}
.mode-hall-tab.is-active {
  color: #021022;
  background:
    linear-gradient(
      135deg,
      rgba(129, 236, 255, 0.9),
      rgba(195, 127, 255, 0.74));
  border-color: rgba(255, 255, 255, 0.46);
}
.mode-hall-header-btn {
  background: rgba(31, 43, 73, 0.52);
  border-color: rgba(129, 236, 255, 0.2);
}
.mode-hall-header-btn:hover {
  border-color: rgba(129, 236, 255, 0.4);
  box-shadow: 0 8px 20px rgba(129, 236, 255, 0.14);
}
.lobby-feature-button:hover,
.mode-hall-room-actions button:hover:not(:disabled),
.mode-hall-social-tabs button:hover {
  box-shadow: 0 10px 22px rgba(129, 236, 255, 0.18);
}
@keyframes stitchNebulaDrift {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(1);
  }
  100% {
    transform: translate3d(4%, 3%, 0) scale(1.05);
  }
}
@keyframes stitchStreakDrift {
  0% {
    transform: translateX(-8%);
    opacity: 0.2;
  }
  50% {
    opacity: 0.42;
  }
  100% {
    transform: translateX(10%);
    opacity: 0.22;
  }
}
@keyframes stitchFlowBorder {
  0% {
    transform: translate3d(-44%, 0, 0) rotate(8deg);
  }
  100% {
    transform: translate3d(44%, 0, 0) rotate(8deg);
  }
}
@keyframes stitchShimmerSweep {
  0% {
    left: -180%;
  }
  55% {
    left: 160%;
  }
  100% {
    left: 160%;
  }
}
[data-reduced-motion=true] .lobby-backdrop::before,
html[data-reduced-motion=true] .lobby-backdrop::before,
[data-reduced-motion=true] .lobby-backdrop::after,
html[data-reduced-motion=true] .lobby-backdrop::after,
[data-reduced-motion=true] .mode-hall-backdrop::before,
html[data-reduced-motion=true] .mode-hall-backdrop::before,
[data-reduced-motion=true] .mode-hall-backdrop::after,
html[data-reduced-motion=true] .mode-hall-backdrop::after,
[data-reduced-motion=true] .lobby-mode-card--v2::before,
html[data-reduced-motion=true] .lobby-mode-card--v2::before,
[data-reduced-motion=true] .mode-hall-tab-card::before,
html[data-reduced-motion=true] .mode-hall-tab-card::before,
[data-reduced-motion=true] .mode-hall-social-row::before,
html[data-reduced-motion=true] .mode-hall-social-row::before,
[data-reduced-motion=true] .mode-hall-room-member::before,
html[data-reduced-motion=true] .mode-hall-room-member::before,
[data-reduced-motion=true] .lobby-start-button::before,
html[data-reduced-motion=true] .lobby-start-button::before,
[data-reduced-motion=true] .mode-hall-header-btn--highlight::before,
html[data-reduced-motion=true] .mode-hall-header-btn--highlight::before {
  animation: none;
}
@media (max-width: 1023px) {
  .mode-hall-shell {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
.lobby-shell--v2 {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  width: min(1480px, var(--ui-shell-safe-width));
  height: var(--ui-shell-height);
  max-height: var(--ui-shell-safe-height);
  margin: var(--ui-shell-margin) auto;
  padding: 14px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(129, 236, 255, 0.12),
      transparent 34%),
    radial-gradient(
      circle at 100% 0%,
      rgba(195, 127, 255, 0.12),
      transparent 36%),
    linear-gradient(
      180deg,
      rgba(10, 18, 39, 0.94),
      rgba(6, 12, 28, 0.98));
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.lobby-dashboard-topbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(360px, 460px) auto;
  align-items: center;
  gap: 14px;
}
.lobby-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.lobby-dashboard-brand-mark {
  display: none;
}
.lobby-dashboard-brand-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.lobby-dashboard-brand-kicker {
  color: rgba(183, 216, 255, 0.78);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lobby-brand-title {
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.04;
}
.lobby-brand-subtitle {
  color: rgba(188, 215, 247, 0.72);
  font-size: 12px;
}
.lobby-resource-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(17, 28, 55, 0.94),
      rgba(12, 20, 40, 0.96));
  box-shadow: inset 0 0 0 1px rgba(119, 152, 205, 0.2), 0 12px 28px rgba(0, 0, 0, 0.16);
}
.lobby-resource-chip {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}
.lobby-resource-chip-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      180deg,
      rgba(255, 232, 130, 0.22),
      rgba(129, 236, 255, 0.08));
  color: #fff2a2;
  box-shadow: 0 0 18px rgba(129, 236, 255, 0.12);
}
.lobby-resource-chip + .lobby-resource-chip {
  border-left: 1px solid rgba(120, 154, 206, 0.14);
}
.lobby-resource-symbol {
  font-size: 15px;
}
.lobby-resource-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.lobby-resource-copy small {
  color: rgba(176, 198, 236, 0.62);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lobby-resource-copy strong {
  color: #f5fbff;
  font-family: var(--stitch-headline-font);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.lobby-icon-button {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  color: rgba(215, 236, 255, 0.88);
  background: rgba(21, 33, 61, 0.9);
  box-shadow: inset 0 0 0 1px rgba(120, 156, 202, 0.18);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}
.lobby-icon-button:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.28), 0 10px 22px rgba(0, 0, 0, 0.16);
}
.lobby-icon-button-symbol {
  font-size: 18px;
}
.lobby-top-avatar-button {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
}
.lobby-top-avatar-button .lobby-avatar-slot {
  width: 42px;
  height: 42px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(129, 236, 255, 0.18);
}
.lobby-top-avatar-online {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #31d98a;
  box-shadow: 0 0 0 2px rgba(5, 14, 29, 0.92);
}
.lobby-main--v2.lobby-dashboard-main {
  display: grid;
  grid-template-columns: 282px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}
.lobby-hero-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 0;
}
.lobby-hero-card,
.lobby-dashboard-panel,
.lobby-dock-shell {
  position: relative;
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(20, 32, 63, 0.9),
      rgba(12, 21, 43, 0.92));
  box-shadow: inset 0 0 0 1px rgba(123, 151, 198, 0.15), 0 18px 40px rgba(0, 0, 0, 0.16);
}
.lobby-hero-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 18px 18px 20px;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 34%,
      rgba(129, 236, 255, 0.12),
      transparent 54%),
    linear-gradient(
      180deg,
      rgba(18, 29, 56, 0.98),
      rgba(8, 18, 36, 0.98));
}
.lobby-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(129, 236, 255, 0.14),
      transparent 58%);
  pointer-events: none;
}
.lobby-hero-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      rgba(129, 236, 255, 0.88),
      rgba(195, 127, 255, 0.72),
      rgba(129, 236, 255, 0.88));
  pointer-events: none;
}
.lobby-hero-card-head {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.lobby-hero-rankline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lobby-hero-kicker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lobby-hero-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #7fe9ff;
  box-shadow: 0 0 10px rgba(129, 236, 255, 0.65);
}
.lobby-hero-kicker {
  color: rgba(150, 191, 239, 0.8);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lobby-rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.3);
  background:
    linear-gradient(
      180deg,
      rgba(129, 236, 255, 0.18),
      rgba(35, 70, 92, 0.24));
  color: #aef3ff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 16px rgba(129, 236, 255, 0.16);
}
.lobby-rank-chip-symbol {
  font-size: 16px;
}
.lobby-hero-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lobby-hero-name-row strong {
  color: #eff9ff;
  font-family: var(--stitch-headline-font);
  font-size: 38px;
  font-weight: 900;
  font-style: italic;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-shadow: 0 0 14px rgba(129, 236, 255, 0.26), 0 0 24px rgba(129, 236, 255, 0.18);
}
.lobby-hero-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lobby-hero-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(26, 53, 93, 0.92);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.16);
  color: #dcf7ff;
  font-size: 12px;
  font-weight: 700;
}
.lobby-hero-mode-glyph {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(129, 236, 255, 0.12);
  color: #81ecff;
}
.lobby-hero-mode-symbol {
  font-size: 16px;
}
.lobby-growth-meta {
  color: rgba(188, 215, 247, 0.76);
  font-size: 12px;
}
.lobby-hero-stage-shell {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 50% 36%,
      rgba(129, 236, 255, 0.12),
      transparent 42%),
    linear-gradient(
      180deg,
      rgba(9, 18, 38, 0.98),
      rgba(6, 14, 28, 0.98));
  box-shadow: inset 0 0 0 1px rgba(100, 131, 178, 0.12), 0 16px 36px rgba(0, 0, 0, 0.22);
}
.lobby-hero-stage-ring,
.lobby-hero-stage-scanline {
  position: absolute;
  pointer-events: none;
}
.lobby-hero-stage-ring {
  border-radius: 50%;
}
.lobby-hero-stage-ring--outer {
  inset: 17% 15%;
  border: 1px solid rgba(129, 236, 255, 0.16);
  animation: stitchRingSpin 14s linear infinite;
}
.lobby-hero-stage-ring--mid {
  inset: 11% 9%;
  border: 1px solid rgba(195, 127, 255, 0.14);
  animation: stitchRingSpinReverse 18s linear infinite;
}
.lobby-hero-stage-ring--inner {
  inset: 23% 21%;
  border: 1.5px solid rgba(129, 236, 255, 0.26);
  box-shadow: 0 0 18px rgba(129, 236, 255, 0.12), inset 0 0 18px rgba(129, 236, 255, 0.06);
}
.lobby-hero-stage-axis {
  position: absolute;
  background: rgba(129, 236, 255, 0.32);
  pointer-events: none;
}
.lobby-hero-stage-axis--v-top,
.lobby-hero-stage-axis--v-bottom {
  left: 50%;
  width: 1px;
  height: 18px;
  transform: translateX(-50%);
}
.lobby-hero-stage-axis--v-top {
  top: 12%;
}
.lobby-hero-stage-axis--v-bottom {
  bottom: 12%;
}
.lobby-hero-stage-axis--h-left,
.lobby-hero-stage-axis--h-right {
  top: 50%;
  height: 1px;
  width: 18px;
  transform: translateY(-50%);
}
.lobby-hero-stage-axis--h-left {
  left: 12%;
}
.lobby-hero-stage-axis--h-right {
  right: 12%;
}
.lobby-hero-stage-scanline {
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 0 20%,
      rgba(129, 236, 255, 0.06) 50%,
      transparent 80%);
  animation: stitchStageScan 7s linear infinite;
}
.lobby-hero-stage-badge {
  position: absolute;
  right: 18px;
  top: 26%;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(129, 236, 255, 0.12);
  border: 1px solid rgba(129, 236, 255, 0.28);
  box-shadow: 0 0 22px rgba(129, 236, 255, 0.18);
}
.lobby-hero-stage-badge-symbol {
  font-size: 20px;
  color: #8cebff;
}
.lobby-preview-canvas {
  width: 100%;
  height: 100%;
  min-height: 304px;
  border-radius: 28px;
  background: transparent;
}
.lobby-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  position: relative;
  z-index: 1;
}
.lobby-hero-stat-card {
  padding: 14px 12px 12px;
  border-radius: 20px;
  background: rgba(25, 37, 64, 0.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(118, 151, 202, 0.16);
  display: grid;
  gap: 6px;
  text-align: center;
}
.lobby-hero-stat-card small {
  color: rgba(176, 198, 236, 0.64);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lobby-hero-stat-card strong {
  font-family: var(--stitch-headline-font);
  font-size: 24px;
  color: #eff9ff;
  line-height: 1;
}
.lobby-hero-stat-card.is-primary strong {
  color: #81ecff;
  text-shadow: 0 0 16px rgba(129, 236, 255, 0.16);
}
.lobby-hero-stat-card.is-secondary strong {
  color: #c37fff;
  text-shadow: 0 0 16px rgba(195, 127, 255, 0.14);
}
.lobby-hero-actions {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.lobby-start-button--compact {
  min-height: 58px;
  font-size: 14px;
  letter-spacing: 0.24em;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 227, 253, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.lobby-season-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 12px 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(13, 22, 42, 0.92);
  color: #eefaff;
  box-shadow: inset 0 0 0 1px rgba(117, 150, 202, 0.12);
  text-align: left;
}
.lobby-season-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      180deg,
      rgba(129, 236, 255, 0.16),
      rgba(129, 236, 255, 0.04));
  color: #81ecff;
}
.lobby-season-card-symbol {
  font-size: 18px;
}
.lobby-season-card-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.lobby-season-card-copy strong {
  color: #ffe483;
  font-size: 10px;
  letter-spacing: 0.14em;
}
.lobby-season-card-copy small {
  color: rgba(183, 214, 247, 0.68);
  font-size: 11px;
}
@keyframes stitchRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes stitchRingSpinReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.lobby-skin-drawer {
  display: grid;
  gap: 12px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 220ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    margin-top 180ms ease;
}
.lobby-shell.is-skin-drawer-open .lobby-skin-drawer {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 2px;
}
.lobby-skin-drawer-head {
  display: grid;
  gap: 2px;
}
.lobby-skin-drawer-head strong {
  font-size: 15px;
}
.lobby-skin-drawer-head small {
  color: rgba(188, 215, 247, 0.74);
  font-size: 12px;
}
.lobby-dashboard-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.lobby-dashboard-stack > * {
  flex: 0 0 auto;
}
.lobby-dashboard-panel {
  padding: 14px 16px;
  min-height: 0;
}
.lobby-panel-head--dashboard {
  margin-bottom: 8px;
}
.lobby-panel-head--dashboard strong {
  font-size: 14px;
}
.lobby-panel-head--dashboard small {
  color: rgba(185, 214, 247, 0.72);
  font-size: 11px;
}
.lobby-mini-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(223, 239, 255, 0.84);
  font-size: 11px;
  font-weight: 700;
}
.lobby-mode-grid--dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding-right: 0;
}
.lobby-mode-panel--v2 {
  min-height: 244px;
}
.lobby-mode-card--v2 {
  display: grid;
  gap: 10px;
  min-height: 82px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 0;
  background:
    linear-gradient(
      180deg,
      rgba(29, 41, 73, 0.96),
      rgba(22, 32, 58, 0.96)),
    linear-gradient(
      135deg,
      rgba(129, 236, 255, 0.05),
      transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(112, 143, 191, 0.14), 0 14px 28px rgba(0, 0, 0, 0.12);
  transform-origin: center;
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    background 170ms ease;
}
.lobby-mode-card--v2.is-primary {
  min-height: 88px;
}
.lobby-mode-card--v2.is-wide {
  grid-column: span 2;
}
.lobby-mode-card--v2::before,
.lobby-mode-card--v2::after {
  content: none;
}
.lobby-mode-card--v2:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.22), 0 18px 34px rgba(0, 0, 0, 0.16);
}
.lobby-mode-card--v2.is-active {
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.34), 0 0 32px rgba(129, 236, 255, 0.14);
}
.lobby-mode-title-wrap {
  gap: 10px;
}
.lobby-mode-icon {
  width: 38px;
  height: 38px;
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.lobby-mode-icon-symbol {
  font-size: 20px;
}
.lobby-mode-card--v2.is-theme-gold .lobby-mode-icon,
.lobby-mode-card--v2.is-theme-gold.is-active {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 228, 131, 0.18),
      rgba(255, 228, 131, 0.04));
}
.lobby-mode-card--v2.is-theme-violet .lobby-mode-icon,
.lobby-mode-card--v2.is-theme-violet.is-active {
  background-image:
    linear-gradient(
      180deg,
      rgba(195, 127, 255, 0.18),
      rgba(195, 127, 255, 0.04));
}
.lobby-mode-card--v2.is-theme-cyan .lobby-mode-icon,
.lobby-mode-card--v2.is-theme-cyan.is-active {
  background-image:
    linear-gradient(
      180deg,
      rgba(129, 236, 255, 0.18),
      rgba(129, 236, 255, 0.04));
}
.lobby-mode-card--v2.is-theme-amber .lobby-mode-icon,
.lobby-mode-card--v2.is-theme-amber.is-active {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 194, 98, 0.18),
      rgba(255, 194, 98, 0.04));
}
.lobby-mode-card--v2.is-theme-purple .lobby-mode-icon,
.lobby-mode-card--v2.is-theme-purple.is-active {
  background-image:
    linear-gradient(
      180deg,
      rgba(170, 112, 255, 0.18),
      rgba(170, 112, 255, 0.04));
}
.lobby-mode-card--v2.is-theme-red .lobby-mode-icon,
.lobby-mode-card--v2.is-theme-red.is-active {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 145, 115, 0.18),
      rgba(255, 145, 115, 0.04));
}
.lobby-mode-card-head strong {
  font-size: 14px;
}
.lobby-mode-card--v2 p {
  margin: 0;
  color: rgba(211, 230, 252, 0.8);
  font-size: 11px;
  line-height: 1.4;
}
.lobby-insight-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.92fr);
  gap: 14px;
  min-height: 158px;
}
.lobby-task-card,
.lobby-friends-card,
.lobby-cta-panel {
  overflow: hidden;
}
.lobby-friends-card {
  min-height: 158px;
}
.lobby-task-list {
  display: grid;
  gap: 10px;
}
.lobby-task-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(10, 21, 42, 0.82);
  box-shadow: inset 0 0 0 1px rgba(116, 150, 204, 0.1);
}
.lobby-task-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(129, 236, 255, 0.09);
  color: #81ecff;
}
.lobby-task-symbol {
  font-size: 18px;
}
.lobby-task-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.lobby-task-copy strong {
  font-size: 11px;
  color: #f3fbff;
}
.lobby-task-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.lobby-task-progress-fill {
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #81ecff,
      #34dff1);
  box-shadow: 0 0 16px rgba(129, 236, 255, 0.34);
}
.lobby-task-meta {
  color: rgba(183, 206, 243, 0.76);
  font-size: 10px;
  font-weight: 700;
}
.lobby-link-button {
  border: 0;
  background: transparent;
  color: #c37fff;
  font-size: 12px;
  font-weight: 700;
}
.lobby-friends-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.lobby-friend-pill {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 58px;
}
.lobby-friend-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--friend-accent) 32%, rgba(255, 255, 255, 0.08)),
      rgba(18, 29, 56, 0.94));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--friend-accent) 42%, rgba(255, 255, 255, 0.16)), 0 0 18px color-mix(in srgb, var(--friend-accent) 28%, transparent);
  color: #f4fbff;
  font-family: var(--stitch-headline-font);
  font-size: 18px;
  font-weight: 800;
}
.lobby-friend-pill strong {
  font-size: 11px;
}
.lobby-friend-pill small {
  font-size: 10px;
  color: rgba(183, 206, 243, 0.72);
}
.lobby-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy copy" "actions social";
  column-gap: 12px;
  row-gap: 8px;
  align-content: start;
  min-height: 0;
  padding: 12px 16px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(129, 236, 255, 0.08),
      transparent 40%),
    linear-gradient(
      180deg,
      rgba(18, 29, 56, 0.92),
      rgba(11, 20, 42, 0.94));
}
.lobby-cta-copy {
  grid-area: copy;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-items: start;
  text-align: left;
}
.lobby-cta-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(129, 236, 255, 0.08);
  color: rgba(223, 241, 255, 0.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.lobby-cta-copy strong {
  font-family: var(--stitch-headline-font);
  font-size: 16px;
  color: #f5fbff;
}
.lobby-cta-copy small {
  display: none;
}
.lobby-cta-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.lobby-dashboard-cta {
  width: 100%;
  min-height: 56px;
  justify-self: stretch;
  border-radius: 999px;
  font-family: var(--stitch-headline-font);
  font-size: 16px;
  font-weight: 800;
  color: #07101d;
  background:
    linear-gradient(
      90deg,
      #81ecff 0%,
      #b79dff 52%,
      #16d9ef 100%);
  box-shadow: 0 18px 34px rgba(38, 190, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.lobby-cta-invite-button {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      180deg,
      rgba(28, 39, 71, 0.96),
      rgba(15, 24, 44, 0.94));
  color: #81ecff;
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.18), 0 14px 30px rgba(0, 0, 0, 0.2);
}
.lobby-cta-invite-symbol {
  font-size: 22px;
}
.lobby-cta-social {
  grid-area: social;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.lobby-cta-avatar-cluster {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(13, 22, 42, 0.88);
  box-shadow: inset 0 0 0 1px rgba(117, 150, 202, 0.12);
}
.lobby-cta-avatar {
  width: 30px;
  height: 30px;
  margin-left: -8px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(8, 16, 32, 0.96);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--friend-accent) 32%, rgba(255, 255, 255, 0.08)),
      rgba(18, 29, 56, 0.94));
  color: #f4fbff;
  font-family: var(--stitch-headline-font);
  font-size: 13px;
  font-weight: 800;
}
.lobby-cta-avatar:first-child {
  margin-left: 0;
}
.lobby-cta-social-button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 26, 50, 0.94);
  color: #dff6ff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.18), 0 10px 24px rgba(0, 0, 0, 0.16);
}
.lobby-dock-shell {
  display: grid;
  gap: 10px;
  padding: 10px 14px 12px;
}
.lobby-highlight-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.lobby-highlight-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 10px 12px;
  border: 0;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(18, 29, 56, 0.92),
      rgba(12, 21, 43, 0.94));
  color: #eff9ff;
  box-shadow: inset 0 0 0 1px rgba(123, 151, 198, 0.12);
  text-align: left;
}
.lobby-highlight-card.is-active {
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.26), 0 0 22px rgba(129, 236, 255, 0.12);
}
.lobby-highlight-icon {
  width: 36px;
  height: 36px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.lobby-highlight-symbol {
  font-size: 18px;
}
.lobby-highlight-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.lobby-highlight-copy small,
.lobby-highlight-copy em {
  font-style: normal;
  color: rgba(190, 216, 247, 0.72);
  font-size: 11px;
}
.lobby-highlight-copy strong {
  font-size: 13px;
  color: #f4fbff;
}
.lobby-highlight-card.is-theme-violet .lobby-highlight-icon {
  background:
    linear-gradient(
      180deg,
      rgba(195, 127, 255, 0.18),
      rgba(195, 127, 255, 0.04));
}
.lobby-highlight-card.is-theme-gold .lobby-highlight-icon {
  background:
    linear-gradient(
      180deg,
      rgba(255, 228, 131, 0.18),
      rgba(255, 228, 131, 0.04));
}
.lobby-highlight-card.is-theme-cyan .lobby-highlight-icon {
  background:
    linear-gradient(
      180deg,
      rgba(129, 236, 255, 0.18),
      rgba(129, 236, 255, 0.04));
}
.lobby-feature-strip--dock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.lobby-feature-button {
  min-height: 48px;
  border-radius: 16px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: transparent;
  box-shadow: inset 0 0 0 1px transparent;
}
.lobby-feature-button.is-active {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(129, 236, 255, 0.12),
      transparent 65%),
    rgba(20, 32, 63, 0.56);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.24), 0 0 24px rgba(129, 236, 255, 0.12);
}
.lobby-feature-symbol {
  font-size: 18px;
  line-height: 1;
}
.lobby-feature-button span:last-child {
  font-size: 11px;
  font-weight: 700;
}
.lobby-inline-tip {
  display: none;
}
.mode-hall-shell {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(129, 236, 255, 0.08),
      transparent 34%),
    radial-gradient(
      circle at 100% 0%,
      rgba(195, 127, 255, 0.08),
      transparent 38%),
    linear-gradient(
      180deg,
      rgba(10, 18, 39, 0.94),
      rgba(6, 12, 28, 0.98));
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mode-hall-header {
  grid-template-columns: auto 1fr auto;
  gap: 12px;
}
.mode-hall-title-wrap {
  justify-items: start;
  text-align: left;
  padding-left: 4px;
}
.mode-hall-kicker {
  color: rgba(183, 216, 255, 0.64);
  font-size: 11px;
  letter-spacing: 0.18em;
}
.mode-hall-title-wrap h2 {
  margin-top: 6px;
  font-family: var(--stitch-headline-font);
  font-size: clamp(26px, 3.1vw, 38px);
  max-height: none;
  white-space: normal;
}
.mode-hall-header-btn,
.mode-hall-tab,
.mode-hall-room-actions button,
.mode-hall-social-tabs button {
  box-shadow: inset 0 0 0 1px rgba(123, 151, 198, 0.12);
  background: rgba(20, 32, 63, 0.9);
}
.mode-hall-header-btn,
.mode-hall-tab {
  border: 0;
}
.mode-hall-header-btn--highlight {
  background:
    linear-gradient(
      90deg,
      #81ecff 0%,
      #b79dff 52%,
      #16d9ef 100%);
  color: #07101d;
  box-shadow: 0 18px 34px rgba(38, 190, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.mode-hall-hero,
.mode-hall-operation,
.mode-hall-intel,
.mode-hall-footer {
  border: 0;
  background:
    linear-gradient(
      180deg,
      rgba(20, 32, 63, 0.9),
      rgba(12, 21, 43, 0.92));
  box-shadow: inset 0 0 0 1px rgba(123, 151, 198, 0.12), 0 18px 40px rgba(0, 0, 0, 0.12);
}
.mode-hall-panel-head strong {
  font-family: var(--stitch-headline-font);
  font-size: 15px;
}
.mode-hall-panel-head small,
.mode-hall-room-tip,
.mode-hall-hero-footnote,
.mode-hall-social-row span,
.mode-hall-intel-list li {
  color: rgba(188, 215, 247, 0.74);
}
.mode-hall-hero-canvas {
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(129, 236, 255, 0.18),
      transparent 56%),
    linear-gradient(
      180deg,
      rgba(6, 16, 31, 0.96),
      rgba(5, 12, 24, 0.98));
}
.mode-hall-room-line,
.mode-hall-room-member,
.mode-hall-intel-list li,
.mode-hall-social-list,
.mode-hall-social-row,
.mode-hall-tab-card {
  box-shadow: inset 0 0 0 1px rgba(123, 151, 198, 0.1);
  border: 0;
  background: rgba(10, 21, 42, 0.82);
}
.mode-hall-tab.is-active,
.mode-hall-social-tabs button.is-active {
  background:
    linear-gradient(
      90deg,
      rgba(129, 236, 255, 0.18),
      rgba(195, 127, 255, 0.18));
  color: #eefaff;
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.24), 0 0 20px rgba(129, 236, 255, 0.1);
}
@keyframes stitchStageScan {
  0% {
    transform: translateY(-110%);
    opacity: 0.1;
  }
  40% {
    opacity: 0.34;
  }
  100% {
    transform: translateY(110%);
    opacity: 0.08;
  }
}
@media (max-width: 1280px) {
  .lobby-dashboard-topbar {
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 420px) auto;
  }
  .lobby-main--v2.lobby-dashboard-main {
    grid-template-columns: 276px minmax(0, 1fr);
  }
  .lobby-mode-grid--dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lobby-mode-card--v2.is-wide {
    grid-column: span 1;
  }
  .lobby-highlight-strip {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1080px) {
  .lobby-shell--v2 {
    width: min(100%, calc(100% - 16px));
    height: auto;
    min-height: calc(100dvh - 16px);
    max-height: none;
    padding: 14px;
    gap: 14px;
    overflow-y: auto;
  }
  .lobby-dashboard-topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .lobby-resource-strip {
    justify-content: flex-start;
  }
  .lobby-top-actions {
    justify-content: flex-start;
  }
  .lobby-main--v2.lobby-dashboard-main {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .lobby-hero-card {
    grid-template-rows: auto minmax(320px, 1fr) auto auto;
  }
  .lobby-dashboard-stack {
    display: grid;
    grid-template-rows: auto auto auto auto;
  }
  .lobby-insight-row {
    grid-template-columns: 1fr;
  }
  .lobby-mode-grid--dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lobby-cta-actions {
    grid-template-columns: 1fr;
  }
  .lobby-cta-invite-button {
    display: none;
  }
  .lobby-cta-panel {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "actions" "social";
  }
}
@media (max-width: 767px) {
  .lobby-shell--v2 {
    width: min(100%, calc(100% - 8px));
    min-height: calc(100dvh - 8px);
    border-radius: 20px;
    padding: 10px;
    gap: 12px;
  }
  .lobby-dashboard-brand-mark {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: 20px;
  }
  .lobby-resource-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .lobby-resource-chip + .lobby-resource-chip {
    border-left: 0;
    border-top: 1px solid rgba(120, 154, 206, 0.14);
  }
  .lobby-hero-name-row strong {
    font-size: 22px;
  }
  .lobby-main--v2.lobby-dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lobby-hero-card {
    gap: 8px;
    padding: 12px;
  }
  .lobby-hero-stage-shell,
  .lobby-hero-stats,
  .lobby-season-card,
  .lobby-highlight-strip {
    display: none;
  }
  .lobby-mode-grid--dashboard,
  .lobby-feature-strip--dock,
  .lobby-insight-row {
    grid-template-columns: 1fr;
  }
  .lobby-dashboard-stack {
    display: flex;
    flex-direction: column;
  }
  .lobby-mode-panel--v2 {
    order: 2;
  }
  .lobby-insight-row {
    order: 3;
  }
  .lobby-cta-panel {
    order: 1;
  }
  .lobby-hero-stats {
    grid-template-columns: 1fr 1fr;
  }
  .lobby-dock-shell {
    position: static;
    z-index: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .lobby-dashboard-cta {
    min-height: 56px;
    font-size: 17px;
  }
  .lobby-cta-social {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .lobby-inline-tip {
    display: none;
  }
  .lobby-feature-button {
    min-height: 42px;
  }
  .lobby-feature-button span:last-child {
    font-size: 10px;
  }
  .mode-hall-title-wrap h2 {
    font-size: clamp(22px, 8vw, 30px);
  }
}
[data-reduced-motion=true] .lobby-hero-stage-scanline,
html[data-reduced-motion=true] .lobby-hero-stage-scanline {
  animation: none;
}
.lobby-overlay .lobby-shell--v2.lobby-stitch-shell {
  width: min(1680px, calc(100vw - 30px));
  height: calc(100dvh - 30px);
  max-height: calc(100dvh - 30px);
  margin: 15px auto;
  padding: 16px 18px 14px;
  gap: 14px;
  border-radius: 32px;
  border: 1px solid rgba(118, 150, 202, 0.26);
  background:
    radial-gradient(
      circle at 14% 18%,
      rgba(129, 236, 255, 0.12),
      transparent 30%),
    radial-gradient(
      circle at 86% 12%,
      rgba(195, 127, 255, 0.1),
      transparent 34%),
    linear-gradient(
      180deg,
      rgba(9, 18, 39, 0.98),
      rgba(4, 10, 24, 0.98));
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.lobby-overlay .lobby-dashboard-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px) auto;
  align-items: center;
  gap: 16px;
  min-height: 76px;
}
.lobby-overlay .lobby-dashboard-brand-copy {
  display: grid;
  gap: 3px;
}
.lobby-overlay .lobby-dashboard-brand-kicker {
  color: rgba(150, 187, 238, 0.72);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.lobby-overlay .lobby-brand-title {
  color: #eef8ff;
  font-family: var(--stitch-headline-font);
  font-size: clamp(38px, 3.4vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-shadow: 0 0 26px rgba(129, 236, 255, 0.22);
}
.lobby-overlay .lobby-brand-subtitle {
  color: rgba(183, 210, 247, 0.72);
  font-size: 16px;
}
.lobby-overlay .lobby-resource-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 12px;
  border-radius: 22px;
  background: rgba(10, 20, 44, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(116, 151, 206, 0.24), 0 14px 30px rgba(0, 0, 0, 0.24);
}
.lobby-overlay .lobby-resource-chip {
  padding: 9px 18px;
}
.lobby-overlay .lobby-resource-chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}
.lobby-overlay .lobby-resource-chip + .lobby-resource-chip {
  border-left: 1px solid rgba(120, 154, 206, 0.18);
}
.lobby-overlay .lobby-resource-copy small {
  font-size: 10px;
  letter-spacing: 0.12em;
}
.lobby-overlay .lobby-resource-copy strong {
  font-size: 34px;
  line-height: 0.9;
  font-weight: 900;
}
.lobby-overlay .lobby-resource-add {
  margin-left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: rgba(129, 236, 255, 0.15);
  color: #81ecff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.3);
  transition: transform 160ms ease, filter 160ms ease;
}
.lobby-overlay .lobby-resource-add:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}
.lobby-overlay .lobby-resource-add-symbol {
  font-size: 20px;
}
.lobby-overlay .lobby-top-actions {
  gap: 12px;
}
.lobby-overlay .lobby-icon-button {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(12, 24, 50, 0.78);
}
.lobby-overlay .lobby-top-avatar-button .lobby-avatar-slot {
  width: 52px;
  height: 52px;
}
.lobby-overlay .lobby-main--v2.lobby-dashboard-main {
  display: grid;
  grid-template-columns: 334px minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}
.lobby-overlay .lobby-left-pane {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
}
.lobby-overlay .lobby-hero-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 12px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 50% 34%,
      rgba(129, 236, 255, 0.18),
      transparent 52%),
    linear-gradient(
      180deg,
      rgba(14, 26, 56, 0.96),
      rgba(8, 17, 37, 0.98));
  box-shadow: inset 0 0 0 1px rgba(123, 151, 198, 0.18), 0 18px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.lobby-overlay .lobby-hero-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      #81ecff,
      #c37fff,
      #81ecff);
}
.lobby-overlay .lobby-hero-rankline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lobby-overlay .lobby-rank-chip {
  padding: 7px 14px;
  border-radius: 12px;
  color: #9deeff;
  background: rgba(129, 236, 255, 0.15);
  border: 1px solid rgba(129, 236, 255, 0.35);
}
.lobby-overlay .lobby-hero-name-row strong {
  font-size: 58px;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.lobby-overlay .lobby-hero-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lobby-overlay .lobby-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9ffff0;
}
.lobby-overlay .lobby-status-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #30d88b;
  box-shadow: 0 0 12px rgba(48, 216, 139, 0.6);
  animation: lobbyStatusPulse 1.9s ease-in-out infinite;
}
.lobby-overlay .lobby-hero-mode-pill {
  background: rgba(18, 43, 80, 0.9);
  border-radius: 999px;
  padding: 6px 10px;
}
.lobby-overlay .lobby-growth-meta {
  color: rgba(190, 217, 250, 0.76);
  font-size: 12px;
}
.lobby-overlay .lobby-hero-stage-shell {
  border-radius: 24px;
  min-height: 280px;
  background:
    linear-gradient(
      180deg,
      rgba(12, 24, 49, 0.95),
      rgba(7, 15, 31, 0.97));
}
.lobby-overlay .lobby-hero-stage-ring--outer {
  animation-duration: 9.5s;
}
.lobby-overlay .lobby-hero-stage-ring--mid {
  animation-duration: 14s;
}
.lobby-overlay .lobby-preview-canvas {
  min-height: 292px;
}
.lobby-overlay .lobby-hero-stats {
  gap: 10px;
  margin-top: -8px;
}
.lobby-overlay .lobby-hero-stat-card {
  padding: 13px 10px 11px;
  border-radius: 16px;
}
.lobby-overlay .lobby-hero-stat-card strong {
  font-size: 44px;
  letter-spacing: -0.03em;
}
.lobby-overlay .lobby-start-button--compact {
  min-height: 54px;
}
.lobby-overlay .lobby-hero-actions,
.lobby-overlay .lobby-skin-drawer {
  display: none;
}
.lobby-overlay .lobby-season-card {
  min-height: 78px;
  border-radius: 18px;
}
.lobby-overlay .lobby-right-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.lobby-overlay .lobby-dashboard-panel {
  border-radius: 24px;
  padding: 14px 16px;
  background:
    linear-gradient(
      180deg,
      rgba(16, 30, 60, 0.92),
      rgba(10, 20, 42, 0.94));
}
.lobby-overlay .lobby-mode-panel--v2 {
  min-height: 290px;
}
.lobby-overlay .lobby-mode-grid--dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.lobby-overlay .lobby-mode-card--v2 {
  position: relative;
  overflow: hidden;
  min-height: 144px;
  padding: 14px;
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 255, 255, 0.06),
      transparent 44%),
    linear-gradient(
      180deg,
      rgba(26, 42, 78, 0.92),
      rgba(18, 30, 58, 0.94));
  box-shadow: inset 0 0 0 1px rgba(123, 151, 198, 0.2), 0 12px 24px rgba(0, 0, 0, 0.2);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}
.lobby-overlay .lobby-mode-card--v2.is-wide {
  min-height: 104px;
  grid-column: span 2;
}
.lobby-overlay .lobby-mode-card--v2::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 290deg,
      var(--flow-color) 334deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: lobbyFlowSpin 4.2s linear infinite;
  opacity: 0.8;
  pointer-events: none;
}
.lobby-overlay .lobby-mode-card--v2::after {
  content: "";
  position: absolute;
  top: 0;
  left: -160%;
  width: 140%;
  height: 100%;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 48%,
      transparent 100%);
  transform: skewX(-20deg);
  animation: lobbySurfaceSweep 4.8s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.42;
}
.lobby-overlay .lobby-mode-card--v2.is-theme-gold {
  --flow-color: rgba(255, 228, 131, 0.92);
}
.lobby-overlay .lobby-mode-card--v2.is-theme-violet {
  --flow-color: rgba(195, 127, 255, 0.9);
}
.lobby-overlay .lobby-mode-card--v2.is-theme-cyan {
  --flow-color: rgba(129, 236, 255, 0.92);
}
.lobby-overlay .lobby-mode-card--v2.is-theme-amber {
  --flow-color: rgba(255, 194, 98, 0.9);
}
.lobby-overlay .lobby-mode-card--v2.is-theme-purple {
  --flow-color: rgba(170, 112, 255, 0.9);
}
.lobby-overlay .lobby-mode-card--v2.is-theme-red {
  --flow-color: rgba(255, 145, 115, 0.9);
}
.lobby-overlay .lobby-mode-card--v2:hover {
  transform: translateY(-3px) scale(1.012);
  filter: brightness(1.06);
}
.lobby-overlay .lobby-mode-card--v2.is-active {
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.45), 0 0 28px rgba(129, 236, 255, 0.22);
}
.lobby-overlay .lobby-mode-card-corner {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(201, 220, 255, 0.32);
  line-height: 1;
}
.lobby-overlay .lobby-mode-corner-symbol {
  font-size: 46px;
}
.lobby-overlay .lobby-mode-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.lobby-overlay .lobby-mode-card-body {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: grid;
  gap: 3px;
}
.lobby-overlay .lobby-mode-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flow-color);
}
.lobby-overlay .lobby-mode-card-body strong {
  font-size: 32px;
  font-family: var(--stitch-headline-font);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.lobby-overlay .lobby-mode-card-body p {
  margin: 0;
  font-size: 12px;
  color: rgba(204, 226, 255, 0.8);
}
.lobby-overlay .lobby-insight-row {
  grid-template-columns: minmax(0, 1.46fr) minmax(0, 1fr);
  gap: 12px;
}
.lobby-overlay .lobby-task-row {
  min-height: 56px;
}
.lobby-overlay .lobby-task-copy strong {
  font-size: 14px;
}
.lobby-overlay .lobby-friends-strip {
  gap: 14px;
  align-items: flex-start;
}
.lobby-overlay .lobby-friend-pill {
  position: relative;
  min-width: 72px;
}
.lobby-overlay .lobby-friend-avatar {
  width: 54px;
  height: 54px;
}
.lobby-overlay .lobby-friend-online-dot {
  position: absolute;
  right: 8px;
  top: 42px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2dd889;
  box-shadow: 0 0 0 2px rgba(8, 16, 30, 0.98);
}
.lobby-overlay .lobby-friend-add {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px dashed rgba(129, 236, 255, 0.34);
  background: rgba(10, 23, 46, 0.82);
  color: #81ecff;
  display: grid;
  place-items: center;
  margin-top: 4px;
}
.lobby-overlay .lobby-friend-add-symbol {
  font-size: 22px;
}
.lobby-overlay .lobby-cta-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy copy" "actions social";
  row-gap: 10px;
}
.lobby-overlay .lobby-cta-copy strong {
  font-size: 20px;
}
.lobby-overlay .lobby-dashboard-cta {
  min-height: 66px;
  font-size: 28px;
  letter-spacing: 0.08em;
  position: relative;
  overflow: hidden;
}
.lobby-overlay .lobby-dashboard-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -160%;
  width: 140%;
  height: 100%;
  transform: skewX(-18deg);
  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent);
  animation: lobbyCtaSweep 3.6s ease-in-out infinite;
}
.lobby-overlay .lobby-cta-social-button {
  min-height: 42px;
}
.lobby-overlay .lobby-dock-shell {
  padding: 6px 6px 4px;
  border-radius: 22px;
  background: rgba(8, 18, 38, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lobby-overlay .lobby-highlight-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
.lobby-overlay .lobby-highlight-strip::-webkit-scrollbar {
  display: none;
}
.lobby-overlay .lobby-highlight-card {
  flex: 0 0 340px;
  min-height: 82px;
}
.lobby-overlay .lobby-feature-strip--dock {
  margin-top: 2px;
  gap: 10px;
}
.lobby-overlay .lobby-feature-button {
  min-height: 56px;
  border-radius: 14px;
}
.lobby-overlay .lobby-feature-button.is-active {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(129, 236, 255, 0.14),
      transparent 65%),
    rgba(18, 31, 61, 0.56);
}
.lobby-overlay .lobby-inline-tip {
  display: block;
  min-height: 20px;
  color: rgba(173, 201, 240, 0.78);
  font-size: 12px;
  padding: 0 4px 2px;
}
@keyframes lobbyFlowSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes lobbySurfaceSweep {
  0% {
    left: -160%;
  }
  50% {
    left: 140%;
  }
  100% {
    left: 140%;
  }
}
@keyframes lobbyCtaSweep {
  0% {
    left: -160%;
  }
  52% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}
@keyframes lobbyStatusPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.72;
  }
}
@media (max-width: 1366px) {
  .lobby-overlay .lobby-shell--v2.lobby-stitch-shell {
    width: min(100%, calc(100vw - 18px));
    height: calc(100dvh - 18px);
    max-height: calc(100dvh - 18px);
    margin: 6px auto;
    padding: 12px;
  }
  .lobby-overlay .lobby-main--v2.lobby-dashboard-main {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .lobby-overlay .lobby-mode-grid--dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lobby-overlay .lobby-mode-card--v2.is-wide {
    grid-column: span 1;
  }
}
@media (max-width: 1100px) {
  .lobby-overlay .lobby-shell--v2.lobby-stitch-shell {
    height: auto;
    max-height: none;
    min-height: calc(100dvh - 8px);
    overflow-y: auto;
  }
  .lobby-overlay .lobby-dashboard-topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .lobby-overlay .lobby-main--v2.lobby-dashboard-main {
    grid-template-columns: 1fr;
  }
  .lobby-overlay .lobby-right-pane {
    gap: 10px;
  }
  .lobby-overlay .lobby-insight-row {
    grid-template-columns: 1fr;
  }
  .lobby-overlay .lobby-mode-grid--dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lobby-overlay .lobby-cta-panel {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "actions" "social";
  }
  .lobby-overlay .lobby-cta-actions {
    grid-template-columns: 1fr;
  }
  .lobby-overlay .lobby-cta-invite-button {
    display: none;
  }
}
@media (max-width: 767px) {
  .lobby-overlay .lobby-shell--v2.lobby-stitch-shell {
    width: min(100%, calc(100% - 6px));
    min-height: calc(100dvh - 6px);
    padding: 8px;
    gap: 10px;
  }
  .lobby-overlay .lobby-brand-title {
    font-size: clamp(26px, 9vw, 34px);
  }
  .lobby-overlay .lobby-brand-subtitle {
    font-size: 12px;
  }
  .lobby-overlay .lobby-resource-strip {
    width: 100%;
    flex-wrap: wrap;
    gap: 2px;
  }
  .lobby-overlay .lobby-resource-chip {
    flex: 1 1 calc(50% - 3px);
    padding: 8px 10px;
  }
  .lobby-overlay .lobby-resource-copy strong {
    font-size: 21px;
  }
  .lobby-overlay .lobby-resource-add {
    margin-left: auto;
  }
  .lobby-overlay .lobby-hero-name-row strong {
    font-size: 40px;
  }
  .lobby-overlay .lobby-hero-stage-shell {
    min-height: 242px;
  }
  .lobby-overlay .lobby-preview-canvas {
    min-height: 236px;
  }
  .lobby-overlay .lobby-hero-stat-card strong {
    font-size: 26px;
  }
  .lobby-overlay .lobby-mode-grid--dashboard {
    grid-template-columns: 1fr;
  }
  .lobby-overlay .lobby-mode-card--v2,
  .lobby-overlay .lobby-mode-card--v2.is-wide {
    min-height: 98px;
    grid-column: span 1;
  }
  .lobby-overlay .lobby-mode-corner-symbol {
    font-size: 34px;
  }
  .lobby-overlay .lobby-mode-kicker {
    font-size: 9px;
  }
  .lobby-overlay .lobby-mode-card-body strong {
    font-size: 22px;
  }
  .lobby-overlay .lobby-mode-card-body p {
    font-size: 11px;
  }
  .lobby-overlay .lobby-dashboard-cta {
    font-size: 19px;
    min-height: 56px;
  }
  .lobby-overlay .lobby-highlight-card {
    flex-basis: min(300px, 90vw);
  }
  .lobby-overlay .lobby-inline-tip {
    display: none;
  }
}
[data-reduced-motion=true] .lobby-overlay .lobby-mode-card--v2::before,
html[data-reduced-motion=true] .lobby-overlay .lobby-mode-card--v2::before,
[data-reduced-motion=true] .lobby-overlay .lobby-mode-card--v2::after,
html[data-reduced-motion=true] .lobby-overlay .lobby-mode-card--v2::after,
[data-reduced-motion=true] .lobby-overlay .lobby-dashboard-cta::before,
html[data-reduced-motion=true] .lobby-overlay .lobby-dashboard-cta::before,
[data-reduced-motion=true] .lobby-overlay .lobby-status-dot::before,
html[data-reduced-motion=true] .lobby-overlay .lobby-status-dot::before {
  animation: none;
}
.lobby-overlay.lobby-stitch-exact {
  --stitch-bg: #060e20;
  --stitch-surface-low: rgba(9, 19, 40, 0.84);
  --stitch-surface-mid: rgba(15, 25, 48, 0.82);
  --stitch-surface-high: rgba(25, 37, 64, 0.74);
  --stitch-primary: #81ecff;
  --stitch-secondary: #c37fff;
  --stitch-tertiary: #ffe483;
  --stitch-primary-dim: #00d4ec;
  --stitch-outline: rgba(109, 117, 140, 0.48);
  --stitch-border-soft: rgba(255, 255, 255, 0.1);
  --stitch-border-strong: rgba(129, 236, 255, 0.36);
  --stitch-shadow-soft: 0 18px 42px rgba(0, 0, 0, 0.38);
  --stitch-shadow-glow: 0 0 26px rgba(129, 236, 255, 0.2);
  --stitch-skin-a: #81ecff;
  --stitch-skin-b: #4f7dff;
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.lobby-overlay.lobby-stitch-exact.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.lobby-overlay.lobby-stitch-exact .stitch-root {
  position: absolute;
  inset: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
  display: block;
  gap: 10px;
  padding: 12px 14px 10px;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(129, 236, 255, 0.08) 0%,
      transparent 40%),
    radial-gradient(
      circle at 79% 72%,
      rgba(195, 127, 255, 0.08) 0%,
      transparent 40%),
    linear-gradient(
      140deg,
      #050d1c 0%,
      #081226 54%,
      #0a1630 100%);
  font-family:
    "Be Vietnam Pro",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  box-sizing: border-box;
}
.lobby-overlay.lobby-stitch-exact .stitch-scale-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  width: calc(100% / var(--stitch-fit-scale, 1));
  transform: scale(var(--stitch-fit-scale, 1));
  transform-origin: top left;
}
.lobby-overlay.lobby-stitch-exact .stitch-root::-webkit-scrollbar {
  display: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-bg-streaks {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.3;
}
.lobby-overlay.lobby-stitch-exact .stitch-streak {
  position: absolute;
  height: 1px;
  width: 120vw;
  left: -10vw;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(129, 236, 255, 0.6),
      transparent);
  transform: rotate(-38deg);
}
.lobby-overlay.lobby-stitch-exact .stitch-streak--one {
  top: 18vh;
  animation: stitchExactStreakOne 7s ease-in-out infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-streak--two {
  top: 62vh;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(195, 127, 255, 0.6),
      transparent);
  animation: stitchExactStreakTwo 9s ease-in-out infinite;
}
.lobby-overlay.lobby-stitch-exact .glass-panel {
  background:
    linear-gradient(
      180deg,
      rgba(24, 35, 62, 0.64),
      rgba(10, 20, 40, 0.72));
  border: 1px solid var(--stitch-border-soft);
  border-radius: 22px;
  box-shadow: var(--stitch-shadow-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.lobby-overlay.lobby-stitch-exact .shimmer {
  position: relative;
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background:
    linear-gradient(
      105deg,
      transparent 20%,
      rgba(255, 255, 255, 0.14) 50%,
      transparent 80%);
  animation: stitchExactShimmer 4.8s linear infinite;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .flowing-border {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}
.lobby-overlay.lobby-stitch-exact .flowing-border::before {
  content: none;
}
.lobby-overlay.lobby-stitch-exact .flowing-border::after {
  content: none;
}
.lobby-overlay.lobby-stitch-exact .btn-sweep {
  position: relative;
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .btn-sweep::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.45),
      transparent 70%);
  transform: skewX(-20deg);
  animation: stitchExactButtonSweep 4.2s ease-in-out infinite;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .btn-neon-glow {
  animation: stitchExactButtonGlow 2.3s ease-in-out infinite;
}
.lobby-overlay.lobby-stitch-exact .ball-glow {
  filter: drop-shadow(0 0 28px rgba(129, 236, 255, 0.5));
}
.lobby-overlay.lobby-stitch-exact .stitch-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-brand-title {
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 2vw, 44px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background:
    linear-gradient(
      90deg,
      #81ecff,
      #c37fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lobby-overlay.lobby-stitch-exact .stitch-resource-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  padding: 8px 14px;
  border: 1px solid rgba(129, 236, 255, 0.26);
  background: rgba(11, 20, 39, 0.78);
  box-shadow: var(--stitch-shadow-glow);
}
.lobby-overlay.lobby-stitch-exact .stitch-resource-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 190px;
}
.lobby-overlay.lobby-stitch-exact .stitch-resource-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}
.lobby-overlay.lobby-stitch-exact .stitch-resource-symbol {
  font-size: 18px;
  color: var(--stitch-primary);
}
.lobby-overlay.lobby-stitch-exact .stitch-resource-copy {
  display: grid;
  gap: 2px;
}
.lobby-overlay.lobby-stitch-exact .stitch-resource-copy small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(190, 208, 235, 0.7);
  font-weight: 700;
}
.lobby-overlay.lobby-stitch-exact .stitch-resource-copy strong {
  color: #f3f8ff;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}
.lobby-overlay.lobby-stitch-exact .stitch-resource-add {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.36);
  background: rgba(129, 236, 255, 0.16);
  color: var(--stitch-primary);
}
.lobby-overlay.lobby-stitch-exact .stitch-top-actions {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-btn {
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(129, 236, 255, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(18, 31, 60, 0.92),
      rgba(11, 22, 43, 0.96));
  color: #d8f6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.1), 0 8px 18px rgba(0, 0, 0, 0.2);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(129, 236, 255, 0.46);
  box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.18), 0 12px 22px rgba(0, 0, 0, 0.24);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-btn:active {
  transform: translateY(0);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-btn-label {
  white-space: nowrap;
  line-height: 1;
}
.lobby-overlay.lobby-stitch-exact[data-auth-state=loggedIn] .stitch-auth-btn {
  border-color: rgba(109, 240, 176, 0.42);
  background:
    linear-gradient(
      180deg,
      rgba(15, 48, 57, 0.9),
      rgba(10, 32, 40, 0.94));
  color: #c9ffe9;
  box-shadow: inset 0 0 0 1px rgba(109, 240, 176, 0.16), 0 10px 22px rgba(7, 28, 32, 0.26);
}
.lobby-overlay.lobby-stitch-exact .stitch-rename-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.22);
  background: rgba(11, 20, 39, 0.78);
  color: #dff7ff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
}
.lobby-overlay.lobby-stitch-exact .stitch-rename-btn-symbol {
  font-size: 18px;
}
.lobby-overlay.lobby-stitch-exact .stitch-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: rgba(198, 212, 234, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 20, 39, 0.68);
}
.lobby-overlay.lobby-stitch-exact .stitch-avatar-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  padding: 3px;
  border: 2px solid rgba(129, 236, 255, 0.68);
  background: rgba(16, 28, 52, 0.8);
}
.lobby-overlay.lobby-stitch-exact .stitch-avatar-slot {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  overflow: hidden;
  background:
    linear-gradient(
      140deg,
      #ffb15e,
      #ff8b44);
}
.lobby-overlay.lobby-stitch-exact .stitch-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-avatar-img.is-visible {
  display: block;
}
.lobby-overlay.lobby-stitch-exact .stitch-avatar-fallback {
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-size: 30px;
  color: #101a33;
  font-weight: 900;
  display: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-avatar-fallback.is-visible {
  display: inline-flex;
}
.lobby-overlay.lobby-stitch-exact .stitch-avatar-online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #22c55e;
  border: 2px solid #081125;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
}
.lobby-overlay.lobby-stitch-exact .stitch-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: start;
  gap: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-left-col {
  min-height: 0;
  flex: 0 0 316px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-profile-card {
  min-height: 0;
  padding: 11px;
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, auto);
  gap: 7px;
  border-radius: 24px;
}
.lobby-overlay.lobby-stitch-exact .stitch-profile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lobby-overlay.lobby-stitch-exact .stitch-profile-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(160, 183, 214, 0.86);
  font-size: 12px;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  letter-spacing: 0.02em;
  font-weight: 800;
}
.lobby-overlay.lobby-stitch-exact .stitch-profile-kicker-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--stitch-primary);
}
.lobby-overlay.lobby-stitch-exact .stitch-level-chip {
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.34);
  color: var(--stitch-primary);
  background: rgba(129, 236, 255, 0.12);
}
.lobby-overlay.lobby-stitch-exact .stitch-profile-name {
  margin: 0;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-size: clamp(30px, 1.8vw, 48px);
  line-height: 1;
  color: #f2f8ff;
  font-weight: 900;
}
.lobby-overlay.lobby-stitch-exact .stitch-profile-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(189, 207, 235, 0.9);
  font-weight: 700;
  font-size: 11px;
}
.lobby-overlay.lobby-stitch-exact .stitch-online-state {
  color: #57f6b1;
  position: relative;
  padding-left: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-online-state::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 999px;
  background: #57f6b1;
  box-shadow: 0 0 9px rgba(87, 246, 177, 0.8);
}
.lobby-overlay.lobby-stitch-exact .stitch-current-mode {
  border: 1px solid rgba(129, 236, 255, 0.25);
  border-radius: 999px;
  padding: 4px 10px;
  color: #d4f4ff;
  background: rgba(129, 236, 255, 0.08);
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
  position: relative;
  min-height: 164px;
  border-radius: 22px;
  border: 1px solid rgba(129, 236, 255, 0.14);
  background:
    radial-gradient(
      circle at 48% 35%,
      rgba(129, 236, 255, 0.22),
      rgba(7, 18, 36, 0.9) 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .stitch-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.24);
}
.lobby-overlay.lobby-stitch-exact .stitch-ring--outer {
  width: 82%;
  height: 82%;
  animation: stitchExactRotate 16s linear infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-ring--mid {
  width: 68%;
  height: 68%;
  border-color: rgba(195, 127, 255, 0.24);
  border-style: dashed;
  animation: stitchExactRotateReverse 18s linear infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-ring--inner {
  width: 54%;
  height: 54%;
  border-color: rgba(129, 236, 255, 0.34);
}
.lobby-overlay.lobby-stitch-exact .stitch-crosshair {
  position: absolute;
  background: rgba(129, 236, 255, 0.34);
}
.lobby-overlay.lobby-stitch-exact .stitch-crosshair--h {
  width: 100%;
  height: 1px;
}
.lobby-overlay.lobby-stitch-exact .stitch-crosshair--v {
  width: 1px;
  height: 100%;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-core {
  position: relative;
  width: 122px;
  height: 122px;
  border-radius: 999px;
  background:
    linear-gradient(
      150deg,
      var(--stitch-skin-a),
      var(--stitch-skin-b));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.14),
    inset -18px -22px 34px rgba(14, 23, 43, 0.24),
    0 0 44px color-mix(in srgb, var(--stitch-skin-glow, var(--stitch-skin-a)) 58%, transparent);
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-surface,
.lobby-overlay.lobby-stitch-exact .stitch-ball-highlight,
.lobby-overlay.lobby-stitch-exact .stitch-ball-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-surface {
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255, 255, 255, 0.45),
      transparent 22%),
    radial-gradient(
      circle at 50% 110%,
      rgba(8, 16, 32, 0.42),
      transparent 48%),
    linear-gradient(
      150deg,
      var(--stitch-skin-a),
      var(--stitch-skin-b));
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-highlight {
  inset: 10px 18px auto 18px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.34),
      transparent 70%);
  filter: blur(6px);
  opacity: 0.78;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-sheen {
  inset: auto 10px 16px auto;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.22),
      transparent 72%);
  filter: blur(8px);
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-skin-name {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.24);
  background: rgba(7, 18, 36, 0.72);
  color: #d8f4ff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.lobby-overlay.lobby-stitch-exact .stitch-stage-bolt {
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -16px;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(129, 236, 255, 0.38);
  background: rgba(129, 236, 255, 0.15);
  color: var(--stitch-primary);
}
.lobby-overlay.lobby-stitch-exact .stitch-stage-bolt-symbol {
  width: 100%;
  font-size: 18px;
}
.lobby-overlay.lobby-stitch-exact .stitch-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.lobby-overlay.lobby-stitch-exact .stitch-stat-tile {
  border-radius: 16px;
  border: 1px solid rgba(129, 236, 255, 0.16);
  background: rgba(11, 21, 40, 0.7);
  padding: 8px;
  display: grid;
  gap: 3px;
}
.lobby-overlay.lobby-stitch-exact .stitch-stat-tile small {
  color: rgba(171, 190, 216, 0.85);
  font-size: 10px;
  letter-spacing: 0.09em;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-weight: 700;
}
.lobby-overlay.lobby-stitch-exact .stitch-stat-tile strong {
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 1.15vw, 30px);
  color: var(--stitch-primary);
  line-height: 1;
}
.lobby-overlay.lobby-stitch-exact .stitch-stat-tile.is-secondary strong {
  color: var(--stitch-secondary);
}
.lobby-overlay.lobby-stitch-exact .stitch-skins-btn {
  width: 100%;
  border-radius: 999px;
  min-height: 44px;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #0d1e3a;
  background:
    linear-gradient(
      90deg,
      #81ecff,
      #00d4ec);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease, margin-top 220ms ease;
}
.lobby-overlay.lobby-stitch-exact.is-skin-drawer-open .stitch-skin-drawer {
  margin-top: 8px;
  max-height: 180px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer-head {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer-head strong {
  color: #ecf5ff;
  font-size: 13px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer-head small {
  color: rgba(170, 191, 220, 0.82);
  font-size: 11px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-chip {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(13, 24, 44, 0.82);
  color: #d6ebff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(
      140deg,
      var(--skin-a),
      var(--skin-b));
  box-shadow: 0 0 8px color-mix(in srgb, var(--skin-a) 55%, transparent);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-chip.is-active {
  border-color: rgba(129, 236, 255, 0.56);
  box-shadow: 0 0 12px rgba(129, 236, 255, 0.24);
}
.lobby-overlay.lobby-stitch-exact .stitch-season-card {
  width: 100%;
  min-height: 60px;
  border-radius: 16px;
  border: 1px solid rgba(129, 236, 255, 0.2);
  background: rgba(9, 20, 40, 0.78);
  color: #dbedff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.lobby-overlay.lobby-stitch-exact .stitch-season-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(129, 236, 255, 0.12);
  border: 1px solid rgba(129, 236, 255, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lobby-overlay.lobby-stitch-exact .stitch-season-copy {
  display: grid;
  gap: 2px;
}
.lobby-overlay.lobby-stitch-exact .stitch-season-copy strong {
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  letter-spacing: 0.02em;
  font-size: 13px;
}
.lobby-overlay.lobby-stitch-exact .stitch-season-copy small {
  color: rgba(170, 191, 220, 0.82);
  font-size: 11px;
}
.lobby-overlay.lobby-stitch-exact .stitch-right-col {
  min-height: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-panel {
  padding: 10px;
  border-radius: 22px;
}
.lobby-overlay.lobby-stitch-exact .stitch-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-panel-head strong {
  display: block;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  color: #eef6ff;
  font-size: 16px;
  font-weight: 800;
}
.lobby-overlay.lobby-stitch-exact .stitch-panel-head small {
  color: rgba(169, 191, 223, 0.82);
  font-size: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-status,
.lobby-overlay.lobby-stitch-exact .stitch-mini-chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.3);
  background: rgba(129, 236, 255, 0.12);
  color: #bcf5ff;
  font-size: 11px;
  font-weight: 700;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 120px;
  border-radius: 16px;
  padding: 11px;
  background:
    linear-gradient(
      180deg,
      rgba(21, 34, 61, 0.96),
      rgba(14, 24, 45, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  gap: 6px;
  transition:
    transform 160ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-cyan {
  --flow-color: #81ecff;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-violet {
  --flow-color: #c37fff;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-gold {
  --flow-color: #ffe483;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-red {
  --flow-color: #ff7d66;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-neutral {
  --flow-color: #8ca4c6;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card::before,
.lobby-overlay.lobby-stitch-exact .stitch-mode-card::after {
  content: none !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--flow-color) 48%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 12px 28px rgba(4, 10, 22, 0.28);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active {
  border-color: rgba(129, 236, 255, 0.45);
  box-shadow: 0 0 24px rgba(129, 236, 255, 0.28);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card > *:not(.stitch-mode-edge) {
  position: relative;
  z-index: 1;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge {
  position: absolute;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--flow-color) 100%, white 10%),
      transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--flow-color) 72%, transparent));
  opacity: 0;
  z-index: 0;
  border-radius: 999px;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--top,
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--bottom {
  width: 24%;
  height: 3px;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--left,
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--right {
  width: 3px;
  height: 24%;
  background:
    linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb, var(--flow-color) 100%, white 10%),
      transparent);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--top {
  top: -2px;
  left: 0;
  animation: stitchEdgeTop 4.8s linear infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--right {
  top: 0;
  right: -2px;
  animation: stitchEdgeRight 4.8s linear infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--bottom {
  right: 0;
  bottom: -2px;
  animation: stitchEdgeBottom 4.8s linear infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--left {
  bottom: 0;
  left: -2px;
  animation: stitchEdgeLeft 4.8s linear infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-icon {
  justify-self: end;
  color: rgba(200, 219, 244, 0.38);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-icon-symbol {
  font-size: 38px;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card-status {
  justify-self: end;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(225, 235, 248, 0.86);
  background: rgba(255, 255, 255, 0.08);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card-status.is-open {
  color: #9dffe0;
  border-color: rgba(87, 246, 177, 0.35);
  background: rgba(87, 246, 177, 0.12);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card-status.is-testing {
  color: #ffe5ab;
  border-color: rgba(255, 228, 131, 0.35);
  background: rgba(255, 228, 131, 0.12);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card-kicker {
  color: color-mix(in srgb, var(--flow-color) 70%, #ffffff 30%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card strong {
  color: #f2f8ff;
  font-size: clamp(20px, 1.8vw, 48px);
  line-height: 1;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-weight: 900;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card p {
  margin: 0;
  color: rgba(172, 193, 224, 0.9);
  font-size: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-info-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-panel {
  padding: 9px 10px;
  min-height: 0;
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .stitch-task-list {
  display: grid;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-task-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.lobby-overlay.lobby-stitch-exact .stitch-task-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(129, 236, 255, 0.12);
  border: 1px solid rgba(129, 236, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lobby-overlay.lobby-stitch-exact .stitch-task-icon.is-theme-violet {
  background: rgba(195, 127, 255, 0.12);
  border-color: rgba(195, 127, 255, 0.32);
}
.lobby-overlay.lobby-stitch-exact .stitch-task-copy strong {
  display: block;
  font-size: 13px;
  color: #edf6ff;
}
.lobby-overlay.lobby-stitch-exact .stitch-task-bar {
  margin-top: 5px;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(129, 153, 185, 0.22);
}
.lobby-overlay.lobby-stitch-exact .stitch-task-fill {
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #81ecff,
      #00d4ec);
}
.lobby-overlay.lobby-stitch-exact .stitch-task-fill.is-theme-violet {
  background:
    linear-gradient(
      90deg,
      #d79cff,
      #a267ff);
}
.lobby-overlay.lobby-stitch-exact .stitch-task-progress {
  color: rgba(186, 205, 232, 0.92);
  font-size: 12px;
  font-weight: 700;
}
.lobby-overlay.lobby-stitch-exact .stitch-link-btn {
  color: var(--stitch-secondary);
  font-size: 11px;
  font-weight: 700;
  background: transparent;
}
.lobby-overlay.lobby-stitch-exact .stitch-friend-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-friend-item {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 19, 38, 0.6);
  padding: 8px 6px;
  text-align: center;
  display: grid;
  gap: 4px;
  justify-items: center;
  min-height: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-friend-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid var(--friend-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--friend-accent) 42%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ebf6ff;
  font-weight: 800;
}
.lobby-overlay.lobby-stitch-exact .stitch-friend-item strong {
  font-size: 12px;
  color: #ecf5ff;
}
.lobby-overlay.lobby-stitch-exact .stitch-friend-item small {
  color: rgba(166, 187, 217, 0.86);
  font-size: 11px;
}
.lobby-overlay.lobby-stitch-exact .stitch-friend-add {
  cursor: pointer;
  color: var(--stitch-primary);
}
.lobby-overlay.lobby-stitch-exact .stitch-cta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.lobby-overlay.lobby-stitch-exact .stitch-main-cta {
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(129, 236, 255, 0.3);
  background:
    linear-gradient(
      90deg,
      #81ecff,
      #c37fff,
      #00d4ec);
  color: #062041;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-size: 26px;
  letter-spacing: 0.12em;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 160ms ease, filter 160ms ease;
}
.lobby-overlay.lobby-stitch-exact .stitch-main-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.lobby-overlay.lobby-stitch-exact .stitch-main-cta-symbol {
  font-size: 24px;
}
.lobby-overlay.lobby-stitch-exact .stitch-main-cta--small {
  min-height: 44px;
  font-size: 18px;
  border-radius: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-invite-strip {
  min-height: 54px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  align-self: stretch;
}
.lobby-overlay.lobby-stitch-exact .stitch-invite-avatars {
  display: inline-flex;
  align-items: center;
}
.lobby-overlay.lobby-stitch-exact .stitch-invite-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  margin-right: -9px;
  border: 2px solid var(--friend-accent);
  background: rgba(8, 18, 35, 0.92);
  color: #f0f8ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.lobby-overlay.lobby-stitch-exact .stitch-invite-btn {
  border-radius: 999px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(129, 236, 255, 0.36);
  background: rgba(129, 236, 255, 0.14);
  color: #b8f7ff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}
.lobby-overlay.lobby-stitch-exact .stitch-cta-note {
  grid-column: 1 / -1;
  color: rgba(180, 201, 230, 0.86);
  font-size: 12px;
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}
.lobby-overlay.lobby-stitch-exact .stitch-cta-note strong {
  color: #eef7ff;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  font-size: 15px;
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-card {
  min-height: 60px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 21, 40, 0.74);
  color: #eff7ff;
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-card.is-violet {
  background:
    linear-gradient(
      135deg,
      rgba(195, 127, 255, 0.2),
      rgba(11, 21, 40, 0.86));
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-card.is-gold {
  background:
    linear-gradient(
      135deg,
      rgba(255, 228, 131, 0.2),
      rgba(11, 21, 40, 0.86));
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-card.is-cyan {
  background:
    linear-gradient(
      135deg,
      rgba(129, 236, 255, 0.2),
      rgba(11, 21, 40, 0.86));
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-copy {
  display: grid;
  gap: 2px;
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-copy small {
  font-size: 11px;
  color: rgba(184, 205, 234, 0.84);
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-copy strong {
  font-size: 16px;
  font-weight: 800;
  color: #edf6ff;
}
.lobby-overlay.lobby-stitch-exact .stitch-activity-copy em {
  font-size: 11px;
  font-style: normal;
  color: rgba(157, 255, 224, 0.95);
}
.lobby-overlay.lobby-stitch-exact .stitch-dock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
}
.lobby-overlay.lobby-stitch-exact .stitch-dock-item {
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 18, 37, 0.72);
  color: rgba(184, 205, 234, 0.88);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
}
.lobby-overlay.lobby-stitch-exact .stitch-dock-item.is-active,
.lobby-overlay.lobby-stitch-exact .stitch-dock-item:hover {
  color: #bff7ff;
  border-color: rgba(129, 236, 255, 0.35);
  box-shadow: 0 0 18px rgba(129, 236, 255, 0.24);
}
.lobby-overlay.lobby-stitch-exact .stitch-inline-tip {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 12;
  max-width: min(90vw, 760px);
  border-radius: 12px;
  border: 1px solid rgba(129, 236, 255, 0.24);
  background: rgba(9, 20, 40, 0.92);
  color: rgba(170, 191, 220, 0.92);
  font-size: 12px;
  padding: 8px 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.lobby-overlay.lobby-stitch-exact.is-inline-tip-active .stitch-inline-tip {
  opacity: 1;
}
.lobby-overlay.lobby-stitch-exact .stitch-hidden-file-input {
  display: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 9, 19, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 6;
  padding: 18px;
}
.lobby-overlay.lobby-stitch-exact.is-settings-open .stitch-settings-overlay {
  display: flex;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-panel {
  width: min(560px, 100%);
  max-height: min(88vh, 840px);
  overflow: auto;
  border-radius: 24px;
  border: 1px solid rgba(129, 236, 255, 0.24);
  background:
    linear-gradient(
      165deg,
      rgba(15, 25, 48, 0.95),
      rgba(8, 17, 34, 0.96));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-head small {
  color: rgba(170, 191, 220, 0.82);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-head h2 {
  margin: 4px 0 0;
  font-size: 24px;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #d9ebff;
  font-size: 22px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-avatar-slot--settings {
  width: 72px;
  height: 72px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-avatar-actions {
  display: grid;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-ghost-btn {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(129, 236, 255, 0.32);
  background: rgba(129, 236, 255, 0.1);
  color: #bdf6ff;
  padding: 0 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-field {
  display: grid;
  gap: 6px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-field span,
.lobby-overlay.lobby-stitch-exact .stitch-settings-title {
  color: rgba(181, 202, 231, 0.88);
  font-size: 12px;
  font-weight: 700;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-field input[type=text] {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 17, 34, 0.9);
  color: #edf7ff;
  padding: 0 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-field input[type=password] {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 17, 34, 0.9);
  color: #edf7ff;
  padding: 0 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-section {
  display: grid;
  gap: 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-section-head small {
  color: rgba(162, 188, 225, 0.82);
  font-size: 11px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-toggle {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 20, 39, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #d7ebff;
  font-size: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-toggle--wide {
  grid-column: 1 / -1;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-foot small {
  color: rgba(168, 191, 223, 0.82);
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-metric,
.lobby-overlay.lobby-stitch-exact .stitch-devtool-card,
.lobby-overlay.lobby-stitch-exact .stitch-devtool-row {
  border-radius: 14px;
  border: 1px solid rgba(129, 236, 255, 0.14);
  background: rgba(8, 17, 34, 0.82);
  padding: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-metric {
  display: grid;
  gap: 4px;
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-metric strong {
  font-size: 22px;
  color: #f2fbff;
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-metric span,
.lobby-overlay.lobby-stitch-exact .stitch-devtool-card span,
.lobby-overlay.lobby-stitch-exact .stitch-devtool-row span {
  color: rgba(176, 201, 233, 0.84);
  font-size: 12px;
  line-height: 1.45;
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-card,
.lobby-overlay.lobby-stitch-exact .stitch-devtool-row {
  display: grid;
  gap: 4px;
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-card strong,
.lobby-overlay.lobby-stitch-exact .stitch-devtool-row strong {
  color: #f3fbff;
  font-size: 14px;
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-card--empty,
.lobby-overlay.lobby-stitch-exact .stitch-devtool-row--empty {
  border-style: dashed;
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-list {
  display: grid;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-devtool-status {
  color: rgba(164, 191, 227, 0.84);
  font-size: 12px;
  line-height: 1.5;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(68, 231, 255, 0.18),
      transparent 32%),
    radial-gradient(
      circle at 86% 10%,
      rgba(255, 198, 104, 0.16),
      transparent 34%),
    linear-gradient(
      180deg,
      rgba(3, 9, 19, 0.9),
      rgba(3, 9, 19, 0.82));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 7;
  padding: 22px;
  overflow-y: auto;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-overlay::before,
.lobby-overlay.lobby-stitch-exact .stitch-auth-overlay::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-overlay::before {
  top: 8%;
  left: 7%;
  width: min(48vw, 540px);
  height: min(48vw, 540px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(43, 226, 255, 0.16),
      rgba(43, 226, 255, 0));
  filter: blur(10px);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-overlay::after {
  right: 4%;
  bottom: 6%;
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 177, 84, 0.14),
      rgba(255, 177, 84, 0));
  filter: blur(10px);
}
.lobby-overlay.lobby-stitch-exact.is-auth-open .stitch-auth-overlay {
  display: flex;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-shell {
  position: relative;
  width: min(1240px, 100%);
  height: min(760px, calc(100dvh - 44px));
  max-height: calc(100dvh - 44px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  gap: 22px;
  align-items: stretch;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-showcase,
.lobby-overlay.lobby-stitch-exact .stitch-auth-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(133, 237, 255, 0.18);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-showcase {
  padding: 24px;
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  gap: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(10, 20, 40, 0.96),
      rgba(6, 16, 31, 0.92)),
    rgba(10, 20, 40, 0.92);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.06),
      transparent 32%),
    radial-gradient(
      circle at 80% 18%,
      rgba(255, 198, 91, 0.14),
      transparent 28%);
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-showcase-top,
.lobby-overlay.lobby-stitch-exact .stitch-auth-feature-grid,
.lobby-overlay.lobby-stitch-exact .stitch-auth-stage {
  position: relative;
  z-index: 1;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-showcase-top {
  display: grid;
  gap: 12px;
  align-content: start;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-scene-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.22);
  background: rgba(12, 29, 56, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #bff3ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-showcase-brand {
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 0.96;
  letter-spacing: 0.04em;
  color: #f3fbff;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  font-family:
    "Bahnschrift",
    "Microsoft YaHei UI",
    sans-serif;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-showcase-copy {
  margin: 0;
  max-width: 520px;
  color: rgba(201, 222, 248, 0.9);
  font-size: 15px;
  line-height: 1.72;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-stage {
  min-height: 308px;
  border-radius: 28px;
  border: 1px solid rgba(136, 231, 255, 0.14);
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(75, 194, 255, 0.22),
      rgba(8, 18, 34, 0) 54%),
    linear-gradient(
      180deg,
      rgba(9, 19, 36, 0.92),
      rgba(4, 13, 25, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-stage-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(45, 231, 255, 0.22),
      rgba(45, 231, 255, 0) 68%);
  filter: blur(8px);
  animation: stitchAuthPulse 4.8s ease-in-out infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(138, 239, 255, 0.2);
  box-shadow: inset 0 0 26px rgba(88, 200, 255, 0.08), 0 0 26px rgba(59, 178, 255, 0.08);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-orbit--outer {
  width: 320px;
  height: 320px;
  animation: stitchAuthOrbitSpin 18s linear infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-orbit--mid {
  width: 250px;
  height: 250px;
  border-style: dashed;
  animation: stitchAuthOrbitSpinReverse 13s linear infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-orbit--inner {
  width: 176px;
  height: 176px;
  border-color: rgba(255, 197, 102, 0.24);
  animation: stitchAuthOrbitSpin 9s linear infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #fff,
      rgba(255, 255, 255, 0));
  box-shadow: 0 0 16px rgba(162, 232, 255, 0.65);
  animation: stitchAuthSparkFloat 4.6s ease-in-out infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-spark--one {
  top: 24%;
  left: 29%;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-spark--two {
  top: 34%;
  right: 29%;
  animation-delay: -1.3s;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-spark--three {
  bottom: 24%;
  left: 50%;
  margin-left: -6px;
  animation-delay: -2.4s;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-core {
  position: relative;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: stitchAuthFloat 5.2s ease-in-out infinite;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-core-surface,
.lobby-overlay.lobby-stitch-exact .stitch-auth-core-highlight,
.lobby-overlay.lobby-stitch-exact .stitch-auth-core-grid {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-core-surface {
  background:
    radial-gradient(
      circle at 28% 26%,
      rgba(255, 255, 255, 0.52),
      rgba(255, 255, 255, 0) 26%),
    radial-gradient(
      circle at 72% 70%,
      rgba(0, 255, 194, 0.22),
      rgba(0, 255, 194, 0) 34%),
    linear-gradient(
      145deg,
      #6eefff 0%,
      #29bdff 42%,
      #5b78ff 78%,
      #73ffe5 100%);
  box-shadow:
    inset 0 -16px 30px rgba(2, 37, 78, 0.34),
    0 0 38px rgba(73, 214, 255, 0.34),
    0 24px 36px rgba(2, 10, 19, 0.42);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-core-highlight {
  inset: 16px 20px auto 24px;
  height: 34px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0));
  filter: blur(2px);
  opacity: 0.74;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-core-grid {
  inset: 10px;
  opacity: 0.24;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16) 0,
      rgba(255, 255, 255, 0.16) 2px,
      transparent 2px,
      transparent 18px),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0,
      rgba(255, 255, 255, 0.1) 2px,
      transparent 2px,
      transparent 18px);
  mix-blend-mode: screen;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-signal-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(141, 237, 255, 0.18);
  background:
    linear-gradient(
      135deg,
      rgba(6, 18, 36, 0.82),
      rgba(9, 26, 50, 0.9));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-signal-card small {
  color: rgba(189, 214, 242, 0.76);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-signal-card strong {
  color: #f2fbff;
  font-size: 22px;
  line-height: 1.15;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-signal-card span {
  color: rgba(192, 217, 243, 0.88);
  font-size: 13px;
  line-height: 1.6;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-feature-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 106px;
  padding: 14px 12px;
  border-radius: 20px;
  border: 1px solid rgba(136, 234, 255, 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.03));
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      rgba(96, 233, 255, 0.2),
      rgba(255, 181, 88, 0.18));
  color: #eefbff;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-feature-symbol {
  font-size: 22px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-feature-card small {
  color: rgba(182, 206, 235, 0.82);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-feature-card strong {
  color: #eff9ff;
  font-size: 15px;
  line-height: 1.5;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-panel {
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 197, 96, 0.16),
      transparent 30%),
    linear-gradient(
      165deg,
      rgba(14, 26, 50, 0.97),
      rgba(7, 15, 30, 0.98));
  padding: 20px;
  display: grid;
  gap: 12px;
  align-content: start;
  overflow-y: auto;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-panel-topline {
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #4feaff,
      #ffd36c 52%,
      #75ffdd);
  opacity: 0.94;
}
.lobby-overlay.lobby-stitch-exact.is-auth-required .stitch-root {
  opacity: 0.04;
  pointer-events: none;
  filter: blur(8px) saturate(0.7);
}
.lobby-overlay.lobby-stitch-exact.is-auth-required .stitch-auth-panel,
.lobby-overlay.lobby-stitch-exact.is-auth-required .stitch-auth-showcase {
  border-color: rgba(255, 219, 109, 0.24);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 219, 109, 0.05);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-head-copy {
  display: grid;
  gap: 6px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-head small {
  color: rgba(170, 191, 220, 0.82);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-head h2 {
  margin: 0;
  font-size: clamp(28px, 2vw, 36px);
  line-height: 1.05;
  color: #f5fbff;
  font-family:
    "Bahnschrift",
    "Microsoft YaHei UI",
    sans-serif;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-close-btn {
  flex: 0 0 auto;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-intro {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(129, 236, 255, 0.14);
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 212, 121, 0.14),
      transparent 46%),
    linear-gradient(
      180deg,
      rgba(14, 27, 52, 0.94),
      rgba(8, 17, 34, 0.9));
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-intro-copy-wrap {
  display: grid;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-intro strong {
  color: #f4fbff;
  font-size: 18px;
  line-height: 1.25;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-intro p {
  margin: 0;
  color: rgba(191, 211, 238, 0.84);
  font-size: 13px;
  line-height: 1.7;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-intro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-intro-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(213, 234, 255, 0.88);
  font-size: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-tab {
  min-height: 48px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 17, 34, 0.78);
  color: rgba(213, 234, 255, 0.82);
  font-size: 14px;
  font-weight: 700;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-tab:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(149, 237, 255, 0.3);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-tab.is-active {
  border-color: rgba(129, 236, 255, 0.46);
  color: #effbff;
  background:
    linear-gradient(
      135deg,
      rgba(129, 236, 255, 0.2),
      rgba(92, 124, 255, 0.18));
  box-shadow: 0 10px 24px rgba(52, 156, 255, 0.16);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-error {
  min-height: 22px;
  padding: 0 4px;
  color: #ffb5c8;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 180ms ease;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-error.is-visible {
  opacity: 1;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-form {
  display: grid;
  gap: 14px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-form-grid {
  display: grid;
  gap: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-form-grid--register {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-field {
  display: grid;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(187, 209, 238, 0.88);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-field-symbol {
  color: #93ebff;
  font-size: 17px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-field input[type=text],
.lobby-overlay.lobby-stitch-exact .stitch-auth-field input[type=password] {
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(137, 235, 255, 0.16);
  background:
    linear-gradient(
      180deg,
      rgba(7, 18, 34, 0.96),
      rgba(9, 24, 45, 0.92));
  color: #edf7ff;
  padding: 0 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-field input::placeholder {
  color: rgba(144, 171, 204, 0.68);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-field input:focus {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(144, 238, 255, 0.56);
  box-shadow: 0 0 0 4px rgba(79, 234, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-form-foot {
  display: grid;
  gap: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-form-note {
  margin: 0;
  color: rgba(181, 202, 229, 0.84);
  font-size: 12px;
  line-height: 1.7;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-submit-btn,
.lobby-overlay.lobby-stitch-exact .stitch-auth-logout-btn {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-account-view {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(129, 236, 255, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(11, 24, 45, 0.92),
      rgba(8, 18, 34, 0.9));
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-account-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(134, 239, 255, 0.16);
  background: rgba(129, 236, 255, 0.1);
  color: #bdf5ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-account-view strong {
  font-size: 24px;
  color: #f3fbff;
  line-height: 1.12;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-account-view small {
  color: rgba(176, 200, 232, 0.82);
  font-size: 13px;
  line-height: 1.65;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-bottom-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  color: rgba(171, 194, 226, 0.82);
  font-size: 12px;
  line-height: 1.6;
}
.lobby-overlay.lobby-stitch-exact .stitch-auth-bottom-note-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #63eeff,
      #ffcf74);
  box-shadow: 0 0 14px rgba(95, 235, 255, 0.42);
  flex: 0 0 auto;
}
.lobby-overlay.lobby-stitch-exact.is-auth-busy .stitch-auth-panel {
  cursor: progress;
}
.lobby-overlay.lobby-stitch-exact .stitch-ghost-btn:disabled,
.lobby-overlay.lobby-stitch-exact .stitch-auth-tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.lobby-overlay.lobby-stitch-exact.is-modal-only .stitch-root {
  opacity: 0.08;
  pointer-events: none;
  filter: blur(2px);
}
@media (max-height: 920px) and (min-width: 721px) {
  .lobby-overlay.lobby-stitch-exact .stitch-auth-overlay {
    padding: 16px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-shell {
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
    gap: 16px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-showcase,
  .lobby-overlay.lobby-stitch-exact .stitch-auth-panel {
    border-radius: 24px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-stage {
    min-height: 268px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-showcase-brand {
    font-size: clamp(34px, 3.6vw, 50px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-signal-card strong {
    font-size: 18px;
  }
}
@media (max-width: 1180px) {
  .lobby-overlay.lobby-stitch-exact .stitch-auth-shell {
    height: auto;
    max-height: none;
    grid-template-columns: 1fr;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-showcase {
    grid-template-rows: auto minmax(260px, 1fr) auto;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-stage {
    min-height: 320px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .lobby-overlay.lobby-stitch-exact .stitch-auth-overlay {
    padding: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-shell {
    gap: 14px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-showcase,
  .lobby-overlay.lobby-stitch-exact .stitch-auth-panel {
    border-radius: 24px;
    padding: 18px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-showcase-brand {
    font-size: 34px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-stage {
    min-height: 280px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-orbit--outer {
    width: 260px;
    height: 260px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-orbit--mid {
    width: 206px;
    height: 206px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-orbit--inner {
    width: 144px;
    height: 144px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-core {
    width: 124px;
    height: 124px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-signal-card {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-signal-card strong {
    font-size: 18px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-feature-grid,
  .lobby-overlay.lobby-stitch-exact .stitch-auth-form-grid--register {
    grid-template-columns: 1fr;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-tab {
    min-height: 44px;
    font-size: 13px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-head h2 {
    font-size: 26px;
  }
}
@media (max-width: 1280px) {
  .lobby-overlay.lobby-stitch-exact .stitch-left-col {
    flex-basis: 280px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lobby-overlay.lobby-stitch-exact .stitch-devtool-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .lobby-overlay.lobby-stitch-exact .stitch-settings-grid,
  .lobby-overlay.lobby-stitch-exact .stitch-devtool-summary {
    grid-template-columns: 1fr;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-settings-section-head,
  .lobby-overlay.lobby-stitch-exact .stitch-settings-foot {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-height: 900px) and (min-width: 1025px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    gap: 8px;
    padding: 10px 12px 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-topbar {
    gap: 10px;
    padding: 9px 11px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-left-col {
    flex-basis: 292px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-card,
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel,
  .lobby-overlay.lobby-stitch-exact .stitch-panel {
    padding: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
    min-height: 152px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-core {
    width: 110px;
    height: 110px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-skin-name {
    font-size: 10px;
    bottom: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card {
    min-height: 108px;
    padding: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta {
    min-height: 52px;
    font-size: 22px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-invite-strip {
    min-height: 50px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-activity-card {
    min-height: 54px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-dock-item {
    min-height: 48px;
  }
}
@media (max-height: 820px) and (min-width: 1025px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    padding: 10px 12px 8px;
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-topbar {
    gap: 12px;
    padding: 10px 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-brand-title {
    font-size: clamp(24px, 1.7vw, 36px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-resource-bar {
    gap: 10px;
    padding: 6px 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-resource-chip {
    min-width: 170px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main {
    gap: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-left-col {
    flex-basis: 280px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-left-col,
  .lobby-overlay.lobby-stitch-exact .stitch-right-col {
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-card,
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel,
  .lobby-overlay.lobby-stitch-exact .stitch-panel {
    padding: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-card {
    gap: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-name {
    font-size: clamp(24px, 1.7vw, 40px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-meta {
    gap: 8px;
    font-size: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
    min-height: 148px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-core {
    width: 108px;
    height: 108px;
    padding: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-stage-bolt {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-stat-tile {
    padding: 7px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-stat-tile strong {
    font-size: clamp(18px, 1vw, 24px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-skins-btn {
    min-height: 42px;
    font-size: 16px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-season-card {
    min-height: 58px;
    padding: 8px 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-season-copy strong {
    font-size: 13px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-season-copy small {
    font-size: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head {
    margin-bottom: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head strong {
    font-size: 15px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head small {
    font-size: 11px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card {
    min-height: 108px;
    padding: 10px;
    gap: 4px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card strong {
    font-size: clamp(18px, 1.45vw, 30px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card p {
    font-size: 11px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-info-grid {
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-list {
    gap: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-row {
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-cta-row {
    grid-template-columns: minmax(0, 1fr) 214px;
    gap: 8px;
    margin-bottom: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta {
    min-height: 54px;
    font-size: 22px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta-symbol {
    font-size: 21px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-invite-strip {
    min-height: 54px;
    padding: 6px 9px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-invite-avatar {
    width: 30px;
    height: 30px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-activity-row {
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-activity-card {
    min-height: 58px;
    padding: 7px 9px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-activity-copy strong {
    font-size: 14px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-dock {
    gap: 8px;
    padding: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-dock-item {
    min-height: 50px;
    font-size: 11px;
  }
}
@media (max-height: 760px) and (min-width: 1025px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    padding: 8px 10px 6px;
    gap: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-topbar {
    padding: 8px 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main {
    gap: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-left-col {
    flex-basis: 260px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
    min-height: 132px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-core {
    width: 96px;
    height: 96px;
    padding: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card {
    min-height: 96px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-info-grid {
    grid-template-columns: 1.45fr 1fr;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta {
    min-height: 50px;
    font-size: 20px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-invite-strip {
    min-height: 50px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-activity-card {
    min-height: 52px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-dock-item {
    min-height: 46px;
  }
}
@media (max-width: 1024px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    display: block;
    overflow: auto;
    padding-bottom: 88px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-scale-frame {
    width: 100%;
    transform: none;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main {
    display: block;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-left-col,
  .lobby-overlay.lobby-stitch-exact .stitch-right-col {
    width: auto;
    display: block;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-card,
  .lobby-overlay.lobby-stitch-exact .stitch-season-card,
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel,
  .lobby-overlay.lobby-stitch-exact .stitch-info-grid,
  .lobby-overlay.lobby-stitch-exact .stitch-cta-row,
  .lobby-overlay.lobby-stitch-exact .stitch-activity-row {
    margin-top: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-info-grid,
  .lobby-overlay.lobby-stitch-exact .stitch-cta-row,
  .lobby-overlay.lobby-stitch-exact .stitch-activity-row {
    display: block;
  }
}
@media (max-width: 720px) {
  .lobby-overlay.lobby-stitch-exact .stitch-topbar {
    grid-template-columns: 1fr;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-resource-bar {
    width: 100%;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-resource-chip {
    min-width: 0;
    flex: 1;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-right-col,
  .lobby-overlay.lobby-stitch-exact .stitch-info-grid,
  .lobby-overlay.lobby-stitch-exact .stitch-activity-row {
    grid-template-columns: 1fr;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
    grid-template-columns: 1fr;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-name {
    font-size: 42px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta {
    font-size: 34px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-dock {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@keyframes stitchExactRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
@keyframes stitchExactRotateReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes stitchExactShimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
@keyframes stitchExactButtonSweep {
  0% {
    left: -150%;
  }
  55% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}
@keyframes stitchExactButtonGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 227, 253, 0.38);
  }
  50% {
    box-shadow: 0 0 24px rgba(0, 227, 253, 0.7), 0 0 42px rgba(195, 127, 255, 0.34);
  }
}
@keyframes stitchExactStreakOne {
  0%, 100% {
    transform: rotate(-38deg) translateY(0);
    opacity: 0.16;
  }
  50% {
    transform: rotate(-38deg) translateY(16px);
    opacity: 0.38;
  }
}
@keyframes stitchExactStreakTwo {
  0%, 100% {
    transform: rotate(-38deg) translateY(0);
    opacity: 0.16;
  }
  50% {
    transform: rotate(-38deg) translateY(-16px);
    opacity: 0.35;
  }
}
@keyframes stitchAuthPulse {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.52;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.94;
  }
}
@keyframes stitchAuthOrbitSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes stitchAuthOrbitSpinReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes stitchAuthFloat {
  0%, 100% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(10px);
  }
}
@keyframes stitchAuthSparkFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.9);
    opacity: 0.56;
  }
  50% {
    transform: translate3d(0, -10px, 0) scale(1.18);
    opacity: 1;
  }
}
@keyframes stitchEdgeTop {
  0%, 24% {
    transform: translateX(-135%);
    opacity: 0;
  }
  4%, 20% {
    opacity: 1;
  }
  24.1%, 100% {
    transform: translateX(320%);
    opacity: 0;
  }
}
@keyframes stitchEdgeRight {
  0%, 24% {
    transform: translateY(-135%);
    opacity: 0;
  }
  25%, 49% {
    opacity: 1;
  }
  49.1%, 100% {
    transform: translateY(320%);
    opacity: 0;
  }
}
@keyframes stitchEdgeBottom {
  0%, 49% {
    transform: translateX(135%);
    opacity: 0;
  }
  50%, 74% {
    opacity: 1;
  }
  74.1%, 100% {
    transform: translateX(-320%);
    opacity: 0;
  }
}
@keyframes stitchEdgeLeft {
  0%, 74% {
    transform: translateY(135%);
    opacity: 0;
  }
  75%, 99% {
    opacity: 1;
  }
  99.1%, 100% {
    transform: translateY(-320%);
    opacity: 0;
  }
}
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .shimmer::after,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .flowing-border::before,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-mode-edge,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .btn-sweep::before,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .btn-neon-glow,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-ring--outer,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-ring--mid,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .shimmer::after,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .flowing-border::before,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-mode-edge,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .btn-sweep::before,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .btn-neon-glow,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-ring--outer,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-ring--mid,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-auth-stage-glow,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-auth-orbit,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-auth-core,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-auth-spark,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-auth-stage-glow,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-auth-orbit,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-auth-core,
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-auth-spark {
  animation: none !important;
}
.mode-hall-overlay {
  --mode-accent: #7ff4ff;
  --mode-accent-2: #5f98ff;
  --mode-accent-soft: rgba(127, 244, 255, 0.2);
  --mode-glow: rgba(127, 244, 255, 0.22);
  --mode-outline: rgba(141, 191, 255, 0.18);
  --mode-surface: rgba(9, 18, 38, 0.82);
  --mode-surface-strong: rgba(7, 14, 30, 0.94);
  --mode-text-strong: #f4fbff;
  --mode-text-muted: rgba(199, 224, 255, 0.72);
  --mode-text-dim: rgba(172, 201, 238, 0.56);
}
.mode-hall-overlay[data-mode-theme=gold] {
  --mode-accent: #ffe07a;
  --mode-accent-2: #ff9954;
  --mode-accent-soft: rgba(255, 208, 112, 0.2);
  --mode-glow: rgba(255, 178, 88, 0.22);
}
.mode-hall-overlay[data-mode-theme=violet] {
  --mode-accent: #cfabff;
  --mode-accent-2: #8a78ff;
  --mode-accent-soft: rgba(199, 144, 255, 0.2);
  --mode-glow: rgba(173, 116, 255, 0.24);
}
.mode-hall-overlay[data-mode-theme=cyan] {
  --mode-accent: #76f3ff;
  --mode-accent-2: #59a7ff;
  --mode-accent-soft: rgba(118, 243, 255, 0.18);
  --mode-glow: rgba(79, 191, 255, 0.22);
}
.mode-hall-overlay[data-mode-theme=amber] {
  --mode-accent: #ffc566;
  --mode-accent-2: #ff7e4f;
  --mode-accent-soft: rgba(255, 171, 98, 0.22);
  --mode-glow: rgba(255, 125, 90, 0.22);
}
.mode-hall-overlay[data-mode-theme=purple] {
  --mode-accent: #b58eff;
  --mode-accent-2: #ff77d2;
  --mode-accent-soft: rgba(181, 142, 255, 0.2);
  --mode-glow: rgba(255, 119, 210, 0.22);
}
.mode-hall-overlay[data-mode-theme=red] {
  --mode-accent: #ff9c8b;
  --mode-accent-2: #ff4d71;
  --mode-accent-soft: rgba(255, 126, 144, 0.2);
  --mode-glow: rgba(255, 90, 120, 0.22);
}
.mode-hall-overlay .mode-hall-backdrop {
  background:
    radial-gradient(
      circle at 18% 22%,
      var(--mode-glow),
      transparent 28%),
    radial-gradient(
      circle at 82% 10%,
      rgba(255, 255, 255, 0.08),
      transparent 26%),
    radial-gradient(
      circle at 74% 82%,
      var(--mode-accent-soft),
      transparent 22%),
    linear-gradient(
      180deg,
      rgba(4, 10, 23, 0.94),
      rgba(4, 10, 20, 0.98));
}
.mode-hall-overlay .mode-hall-backdrop::before,
.mode-hall-overlay .mode-hall-backdrop::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.65;
  pointer-events: none;
}
.mode-hall-overlay .mode-hall-backdrop::before {
  width: 340px;
  height: 340px;
  top: -80px;
  right: -70px;
  background:
    radial-gradient(
      circle at 34% 34%,
      rgba(255, 255, 255, 0.34),
      transparent 24%),
    radial-gradient(
      circle at 50% 50%,
      var(--mode-accent-soft),
      transparent 64%);
  animation: modeHallFloatA 18s ease-in-out infinite;
}
.mode-hall-overlay .mode-hall-backdrop::after {
  width: 280px;
  height: 280px;
  left: -30px;
  bottom: -40px;
  background:
    radial-gradient(
      circle at 36% 36%,
      rgba(255, 255, 255, 0.22),
      transparent 20%),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.08),
      transparent 58%),
    radial-gradient(
      circle at 50% 50%,
      var(--mode-accent-soft),
      transparent 72%);
  animation: modeHallFloatB 21s ease-in-out infinite;
}
.mode-hall-overlay .mode-hall-shell--orb {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  width: min(1680px, calc(100vw - 28px));
  height: calc(100dvh - 28px);
  margin: 14px auto;
  padding: 20px;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid var(--mode-outline);
  background:
    radial-gradient(
      circle at 16% 16%,
      rgba(255, 255, 255, 0.06),
      transparent 26%),
    radial-gradient(
      circle at 84% 0%,
      var(--mode-accent-soft),
      transparent 30%),
    linear-gradient(
      180deg,
      rgba(9, 18, 38, 0.95),
      rgba(4, 9, 22, 0.97));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--mode-text-strong);
}
.mode-hall-overlay .mode-hall-shell--orb::before,
.mode-hall-overlay .mode-hall-shell--orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.mode-hall-overlay .mode-hall-shell--orb::before {
  width: 220px;
  height: 220px;
  top: 18%;
  right: 26%;
  background:
    radial-gradient(
      circle at 34% 34%,
      rgba(255, 255, 255, 0.26),
      transparent 22%),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.08),
      transparent 58%),
    radial-gradient(
      circle at 50% 50%,
      var(--mode-accent-soft),
      transparent 72%);
  opacity: 0.7;
}
.mode-hall-overlay .mode-hall-shell--orb::after {
  inset: 0;
  border-radius: 34px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1),
      transparent 12%,
      transparent 86%,
      rgba(255, 255, 255, 0.06));
  opacity: 0.8;
}
.mode-hall-overlay .mode-hall-header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) auto;
  gap: 16px;
  align-items: center;
}
.mode-hall-overlay .mode-hall-header-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.mode-hall-overlay .mode-hall-title-wrap {
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 0;
}
.mode-hall-overlay .mode-hall-kicker {
  color: var(--mode-text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.mode-hall-overlay .mode-hall-title-wrap h2 {
  margin: 0;
  font-family: var(--stitch-headline-font);
  font-size: clamp(32px, 3.4vw, 54px);
  line-height: 0.96;
  text-shadow: 0 0 28px var(--mode-glow);
}
.mode-hall-overlay .mode-hall-title-caption {
  margin: 0;
  color: var(--mode-text-muted);
  font-size: 14px;
}
.mode-hall-overlay .mode-hall-header-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mode-hall-overlay .mode-hall-ribbon-chip {
  display: grid;
  gap: 6px;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 22px;
  border: 1px solid var(--mode-outline);
  background:
    linear-gradient(
      180deg,
      rgba(19, 31, 58, 0.94),
      rgba(10, 18, 36, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 28px rgba(0, 0, 0, 0.18);
}
.mode-hall-overlay .mode-hall-ribbon-chip span {
  color: var(--mode-text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.mode-hall-overlay .mode-hall-ribbon-chip strong {
  font-size: 18px;
  letter-spacing: -0.02em;
}
.mode-hall-overlay .mode-hall-header-actions {
  display: flex;
  justify-content: flex-end;
}
.mode-hall-overlay .mode-hall-header-btn,
.mode-hall-overlay .mode-hall-room-actions button,
.mode-hall-overlay .mode-hall-social-tabs button,
.mode-hall-overlay .mode-hall-tab,
.mode-hall-overlay .mode-hall-room-copy {
  border: 0;
  border-radius: 999px;
  font-family:
    "Plus Jakarta Sans",
    "Segoe UI",
    "PingFang SC",
    sans-serif;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}
.mode-hall-overlay .mode-hall-header-btn,
.mode-hall-overlay .mode-hall-room-copy,
.mode-hall-overlay .mode-hall-tab,
.mode-hall-overlay .mode-hall-social-tabs button {
  padding: 12px 18px;
  color: var(--mode-text-strong);
  background: rgba(15, 27, 50, 0.94);
  box-shadow: inset 0 0 0 1px rgba(151, 197, 255, 0.12);
}
.mode-hall-overlay .mode-hall-header-btn:hover,
.mode-hall-overlay .mode-hall-room-copy:hover,
.mode-hall-overlay .mode-hall-tab:hover,
.mode-hall-overlay .mode-hall-social-tabs button:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(151, 197, 255, 0.16), 0 12px 24px rgba(0, 0, 0, 0.18);
}
.mode-hall-overlay .mode-hall-header-btn--highlight {
  padding: 14px 24px;
  color: #071220;
  font-weight: 800;
  background:
    linear-gradient(
      135deg,
      var(--mode-accent),
      var(--mode-accent-2));
  box-shadow: 0 18px 36px var(--mode-glow), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.mode-hall-overlay .mode-hall-surface-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: 30px;
  border: 1px solid var(--mode-outline);
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255, 255, 255, 0.06),
      transparent 32%),
    linear-gradient(
      180deg,
      rgba(16, 28, 55, 0.92),
      rgba(9, 17, 34, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.22);
}
.mode-hall-overlay .mode-hall-surface-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.06),
      transparent 18%,
      transparent 82%,
      rgba(255, 255, 255, 0.02));
  pointer-events: none;
}
.mode-hall-overlay .mode-hall-section-label {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--mode-accent-soft);
  color: var(--mode-text-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mode-hall-overlay .mode-hall-panel-head {
  display: grid;
  gap: 6px;
}
.mode-hall-overlay .mode-hall-panel-head strong {
  margin: 0;
  font-family: var(--stitch-headline-font);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.mode-hall-overlay .mode-hall-panel-head small {
  color: var(--mode-text-muted);
  font-size: 13px;
}
.mode-hall-overlay .mode-hall-main {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.96fr) minmax(320px, 0.82fr);
  gap: 18px;
  min-height: 0;
}
.mode-hall-overlay .mode-hall-hero,
.mode-hall-overlay .mode-hall-operation,
.mode-hall-overlay .mode-hall-intel,
.mode-hall-overlay .mode-hall-social-panel,
.mode-hall-overlay .mode-hall-footer {
  padding: 18px;
}
.mode-hall-overlay .mode-hall-hero {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
}
.mode-hall-overlay .mode-hall-hero-summary {
  margin: 0;
  color: var(--mode-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.mode-hall-overlay .mode-hall-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mode-hall-overlay .mode-hall-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(160, 203, 255, 0.12);
  color: var(--mode-text-strong);
  font-size: 12px;
  font-weight: 700;
}
.mode-hall-overlay .mode-hall-hero-stage-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  min-height: 0;
}
.mode-hall-overlay .mode-hall-hero-stage {
  position: relative;
  min-height: 380px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(168, 212, 255, 0.16);
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255, 255, 255, 0.08),
      transparent 28%),
    radial-gradient(
      circle at 50% 54%,
      var(--mode-accent-soft),
      transparent 54%),
    linear-gradient(
      180deg,
      rgba(7, 16, 32, 0.98),
      rgba(7, 14, 29, 1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 42px rgba(0, 0, 0, 0.18);
}
.mode-hall-overlay .mode-hall-stage-aura,
.mode-hall-overlay .mode-hall-stage-grid,
.mode-hall-overlay .mode-hall-stage-orbit,
.mode-hall-overlay .mode-hall-stage-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mode-hall-overlay .mode-hall-stage-aura {
  background:
    radial-gradient(
      circle at 50% 50%,
      var(--mode-glow),
      transparent 34%),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.08),
      transparent 54%);
}
.mode-hall-overlay .mode-hall-stage-grid {
  background-image:
    linear-gradient(rgba(140, 210, 255, 0.06) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(140, 210, 255, 0.06) 1px,
      transparent 1px);
  background-size: 40px 40px;
  mask-image:
    linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.7) 18%,
      rgba(0, 0, 0, 0.7) 82%,
      transparent);
}
.mode-hall-overlay .mode-hall-stage-orbit {
  margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(188, 225, 255, 0.14);
}
.mode-hall-overlay .mode-hall-stage-orbit--outer {
  width: 82%;
  height: 82%;
  animation: modeHallRotate 22s linear infinite;
}
.mode-hall-overlay .mode-hall-stage-orbit--inner {
  width: 56%;
  height: 56%;
  animation: modeHallRotateReverse 15s linear infinite;
}
.mode-hall-overlay .mode-hall-stage-scanline {
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255, 255, 255, 0.16),
      transparent);
  transform: translateY(-100%);
  animation: modeHallScan 8s linear infinite;
}
.mode-hall-overlay .mode-hall-hero-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
}
.mode-hall-overlay .mode-hall-hero-stats {
  display: grid;
  gap: 12px;
  align-content: stretch;
}
.mode-hall-overlay .mode-hall-hero-stat {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(154, 204, 255, 0.12);
  background:
    linear-gradient(
      180deg,
      rgba(15, 25, 47, 0.96),
      rgba(10, 18, 36, 0.94));
}
.mode-hall-overlay .mode-hall-hero-stat span {
  color: var(--mode-text-dim);
  font-size: 12px;
  font-weight: 700;
}
.mode-hall-overlay .mode-hall-hero-stat strong {
  font-size: 22px;
  line-height: 1.1;
}
.mode-hall-overlay .mode-hall-hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.mode-hall-overlay .mode-hall-hero-footnote {
  color: var(--mode-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.mode-hall-overlay .mode-hall-cta-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mode-hall-overlay .mode-hall-main-cta {
  min-width: 164px;
  min-height: 54px;
}
.mode-hall-overlay .mode-hall-cta-note {
  display: grid;
  gap: 4px;
}
.mode-hall-overlay .mode-hall-cta-note strong {
  font-size: 15px;
}
.mode-hall-overlay .mode-hall-cta-note span {
  color: var(--mode-text-muted);
  font-size: 12px;
}
.mode-hall-overlay .mode-hall-operation {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
}
.mode-hall-overlay .mode-hall-room-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mode-hall-overlay .mode-hall-room-line {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(160, 205, 255, 0.12);
  background: rgba(8, 17, 35, 0.78);
}
.mode-hall-overlay .mode-hall-room-line span {
  color: var(--mode-text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.mode-hall-overlay .mode-hall-room-line strong {
  font-size: 18px;
}
.mode-hall-overlay .mode-hall-room-entry {
  display: grid;
  gap: 8px;
}
.mode-hall-overlay .mode-hall-room-entry-label {
  color: var(--mode-text-dim);
  font-size: 12px;
  font-weight: 700;
}
.mode-hall-overlay .mode-hall-room-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.mode-hall-overlay .mode-hall-room-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(160, 205, 255, 0.12);
  background: rgba(7, 16, 33, 0.92);
  color: var(--mode-text-strong);
  font: inherit;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mode-hall-overlay .mode-hall-room-input:focus {
  border-color: rgba(178, 230, 255, 0.26);
  box-shadow: 0 0 0 3px rgba(127, 244, 255, 0.12);
}
.mode-hall-overlay .mode-hall-room-input:disabled,
.mode-hall-overlay .mode-hall-room-copy:disabled,
.mode-hall-overlay .mode-hall-room-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.mode-hall-overlay .mode-hall-room-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mode-hall-overlay .mode-hall-room-actions button {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-height: 78px;
  padding: 14px 16px;
  text-align: left;
  color: var(--mode-text-strong);
  background:
    linear-gradient(
      180deg,
      rgba(19, 31, 58, 0.96),
      rgba(11, 20, 40, 0.92));
  box-shadow: inset 0 0 0 1px rgba(151, 197, 255, 0.12);
}
.mode-hall-overlay .mode-hall-room-actions button span {
  font-size: 15px;
  font-weight: 800;
}
.mode-hall-overlay .mode-hall-room-actions button small {
  color: var(--mode-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.mode-hall-overlay .mode-hall-room-actions button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(184, 224, 255, 0.18), 0 16px 28px rgba(0, 0, 0, 0.16);
}
.mode-hall-overlay .mode-hall-room-members,
.mode-hall-overlay .mode-hall-intel-list,
.mode-hall-overlay .mode-hall-social-list,
.mode-hall-overlay .mode-hall-tab-content {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}
.mode-hall-overlay .mode-hall-room-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  padding-right: 4px;
}
.mode-hall-overlay .mode-hall-room-member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(160, 205, 255, 0.12);
  background: rgba(10, 19, 38, 0.82);
}
.mode-hall-overlay .mode-hall-room-member.is-ready,
.mode-hall-overlay .mode-hall-room-member.is-self {
  box-shadow: inset 0 0 0 1px rgba(192, 235, 255, 0.18), 0 18px 34px rgba(0, 0, 0, 0.16);
}
.mode-hall-overlay .mode-hall-room-member.is-self {
  background:
    linear-gradient(
      180deg,
      rgba(23, 42, 72, 0.96),
      rgba(12, 21, 40, 0.92));
}
.mode-hall-overlay .mode-hall-room-member--empty {
  opacity: 0.88;
}
.mode-hall-overlay .mode-hall-room-member-orb,
.mode-hall-overlay .mode-hall-social-orb {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(255, 255, 255, 0.32),
      transparent 22%),
    linear-gradient(
      135deg,
      var(--mode-accent),
      var(--mode-accent-2));
  color: #081220;
  font-size: 14px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px var(--mode-glow);
}
.mode-hall-overlay .mode-hall-room-member-copy,
.mode-hall-overlay .mode-hall-social-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.mode-hall-overlay .mode-hall-room-member-copy strong,
.mode-hall-overlay .mode-hall-social-copy strong {
  font-size: 14px;
  line-height: 1.2;
}
.mode-hall-overlay .mode-hall-room-member-copy span,
.mode-hall-overlay .mode-hall-social-copy span {
  color: var(--mode-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.mode-hall-overlay .mode-hall-room-member em,
.mode-hall-overlay .mode-hall-social-row em {
  font-style: normal;
  color: var(--mode-text-strong);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.mode-hall-overlay .mode-hall-room-tip {
  color: var(--mode-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.mode-hall-overlay .mode-hall-side-column {
  display: grid;
  gap: 18px;
  min-height: 0;
}
.mode-hall-overlay .mode-hall-intel,
.mode-hall-overlay .mode-hall-social-panel {
  display: grid;
  gap: 14px;
  min-height: 0;
}
.mode-hall-overlay .mode-hall-intel-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 4px 0 0;
  list-style: none;
}
.mode-hall-overlay .mode-hall-intel-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(160, 205, 255, 0.12);
  background: rgba(10, 19, 38, 0.76);
}
.mode-hall-overlay .mode-hall-intel-list li strong {
  color: var(--mode-accent);
  font-family: var(--stitch-headline-font);
  font-size: 20px;
  line-height: 1;
}
.mode-hall-overlay .mode-hall-intel-list li span {
  color: var(--mode-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.mode-hall-overlay .mode-hall-social-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mode-hall-overlay .mode-hall-social-tabs button.is-active,
.mode-hall-overlay .mode-hall-tab.is-active {
  background:
    linear-gradient(
      135deg,
      var(--mode-accent-soft),
      rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(184, 224, 255, 0.2), 0 14px 24px rgba(0, 0, 0, 0.16);
}
.mode-hall-overlay .mode-hall-social-list {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-right: 4px;
}
.mode-hall-overlay .mode-hall-social-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(160, 205, 255, 0.12);
  background: rgba(10, 19, 38, 0.76);
}
.mode-hall-overlay .mode-hall-footer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}
.mode-hall-overlay .mode-hall-footer-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.mode-hall-overlay .mode-hall-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mode-hall-overlay .mode-hall-tab-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-right: 4px;
}
.mode-hall-overlay .mode-hall-tab-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  min-height: 118px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(160, 205, 255, 0.12);
  background:
    linear-gradient(
      180deg,
      rgba(16, 28, 55, 0.92),
      rgba(10, 18, 35, 0.9));
}
.mode-hall-overlay .mode-hall-tab-index {
  color: var(--mode-accent);
  font-family: var(--stitch-headline-font);
  font-size: 26px;
  line-height: 1;
}
.mode-hall-overlay .mode-hall-tab-copy {
  display: grid;
  gap: 6px;
}
.mode-hall-overlay .mode-hall-tab-copy strong {
  font-size: 15px;
}
.mode-hall-overlay .mode-hall-tab-copy span {
  color: var(--mode-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.mode-hall-overlay[data-hero-state=loading] .mode-hall-hero-stage::after,
.mode-hall-overlay[data-hero-state=fallback] .mode-hall-hero-stage::after {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  text-align: center;
  color: var(--mode-text-strong);
  background: rgba(7, 16, 33, 0.84);
  box-shadow: inset 0 0 0 1px rgba(151, 197, 255, 0.12);
}
.mode-hall-overlay[data-hero-state=loading] .mode-hall-hero-stage::after {
  content: "英雄球体加载中...";
}
.mode-hall-overlay[data-hero-state=fallback] .mode-hall-hero-stage::after {
  content: "已切换到回退舞台";
}
@keyframes modeHallRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes modeHallRotateReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes modeHallScan {
  0% {
    transform: translateY(-100%);
    opacity: 0.08;
  }
  35% {
    opacity: 0.2;
  }
  100% {
    transform: translateY(120%);
    opacity: 0.04;
  }
}
@keyframes modeHallFloatA {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-16px, 14px, 0);
  }
}
@keyframes modeHallFloatB {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(18px, -12px, 0);
  }
}
@media (max-width: 1440px) {
  .mode-hall-overlay .mode-hall-main {
    grid-template-columns: minmax(0, 1.16fr) minmax(330px, 0.92fr) minmax(300px, 0.86fr);
  }
  .mode-hall-overlay .mode-hall-hero-stage-shell {
    grid-template-columns: minmax(0, 1fr) 196px;
  }
}
@media (max-width: 1200px) {
  .mode-hall-overlay .mode-hall-shell--orb {
    width: min(100%, calc(100vw - 16px));
    height: auto;
    min-height: calc(100dvh - 16px);
    margin: 8px auto;
    padding: 16px;
  }
  .mode-hall-overlay .mode-hall-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mode-hall-overlay .mode-hall-header-ribbon {
    grid-column: 1 / -1;
  }
  .mode-hall-overlay .mode-hall-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mode-hall-overlay .mode-hall-hero {
    grid-column: 1 / -1;
  }
  .mode-hall-overlay .mode-hall-side-column {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mode-hall-overlay .mode-hall-tab-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .mode-hall-overlay .mode-hall-header {
    grid-template-columns: 1fr;
  }
  .mode-hall-overlay .mode-hall-header-actions {
    justify-content: flex-start;
  }
  .mode-hall-overlay .mode-hall-main,
  .mode-hall-overlay .mode-hall-side-column,
  .mode-hall-overlay .mode-hall-hero-stage-shell,
  .mode-hall-overlay .mode-hall-room-strip,
  .mode-hall-overlay .mode-hall-room-members,
  .mode-hall-overlay .mode-hall-tab-content {
    grid-template-columns: 1fr;
  }
  .mode-hall-overlay .mode-hall-footer-head,
  .mode-hall-overlay .mode-hall-hero-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .mode-hall-overlay .mode-hall-cta-cluster {
    flex-direction: column;
    align-items: stretch;
  }
  .mode-hall-overlay .mode-hall-main-cta {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .mode-hall-overlay {
    padding: 6px;
  }
  .mode-hall-overlay .mode-hall-shell--orb {
    width: min(100%, calc(100vw - 8px));
    min-height: calc(100dvh - 8px);
    padding: 12px;
    gap: 14px;
    border-radius: 24px;
  }
  .mode-hall-overlay .mode-hall-shell--orb::after {
    border-radius: 24px;
  }
  .mode-hall-overlay .mode-hall-title-wrap h2 {
    font-size: clamp(24px, 8vw, 34px);
  }
  .mode-hall-overlay .mode-hall-header-ribbon {
    grid-template-columns: 1fr;
  }
  .mode-hall-overlay .mode-hall-hero,
  .mode-hall-overlay .mode-hall-operation,
  .mode-hall-overlay .mode-hall-intel,
  .mode-hall-overlay .mode-hall-social-panel,
  .mode-hall-overlay .mode-hall-footer {
    padding: 14px;
    border-radius: 24px;
  }
  .mode-hall-overlay .mode-hall-hero-stage {
    min-height: 300px;
  }
  .mode-hall-overlay .mode-hall-room-entry-row,
  .mode-hall-overlay .mode-hall-room-actions {
    grid-template-columns: 1fr;
  }
  .mode-hall-overlay .mode-hall-social-tabs {
    grid-template-columns: 1fr 1fr;
  }
}
[data-reduced-motion=true] .mode-hall-backdrop::before,
html[data-reduced-motion=true] .mode-hall-backdrop::before,
[data-reduced-motion=true] .mode-hall-backdrop::after,
html[data-reduced-motion=true] .mode-hall-backdrop::after,
[data-reduced-motion=true] .mode-hall-stage-orbit--outer,
html[data-reduced-motion=true] .mode-hall-stage-orbit--outer,
[data-reduced-motion=true] .mode-hall-stage-orbit--inner,
html[data-reduced-motion=true] .mode-hall-stage-orbit--inner,
[data-reduced-motion=true] .mode-hall-stage-scanline,
html[data-reduced-motion=true] .mode-hall-stage-scanline {
  animation: none;
}
.mode-hall-overlay {
  align-items: center;
  overflow: hidden;
}
.mode-hall-overlay .mode-hall-shell--orb {
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100dvh - 28px);
  max-height: calc(100dvh - 28px);
  min-height: 0;
  overflow: hidden;
  padding: 16px;
  gap: 14px;
}
.mode-hall-overlay .mode-hall-main {
  align-items: start;
  gap: 14px;
}
.mode-hall-overlay .mode-hall-header-actions {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mode-hall-overlay .mode-hall-hero {
  align-content: start;
}
.mode-hall-overlay .mode-hall-hero-stage-shell {
  align-items: start;
  gap: 12px;
}
.mode-hall-overlay .mode-hall-hero-stage {
  min-height: clamp(220px, 30vh, 300px);
}
.mode-hall-overlay .mode-hall-hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mode-hall-overlay .mode-hall-header {
  gap: 12px;
}
.mode-hall-overlay .mode-hall-header-ribbon {
  gap: 10px;
}
.mode-hall-overlay .mode-hall-ribbon-chip {
  min-height: 58px;
  padding: 10px 12px;
}
.mode-hall-overlay .mode-hall-ribbon-chip strong {
  font-size: 16px;
}
.mode-hall-overlay .mode-hall-hero,
.mode-hall-overlay .mode-hall-operation,
.mode-hall-overlay .mode-hall-intel,
.mode-hall-overlay .mode-hall-social-panel {
  padding: 14px;
}
.mode-hall-overlay .mode-hall-hero-summary {
  font-size: 14px;
  line-height: 1.55;
}
.mode-hall-overlay .mode-hall-hero-stat {
  gap: 6px;
  padding: 12px;
}
.mode-hall-overlay .mode-hall-hero-stat strong {
  font-size: 18px;
}
.mode-hall-overlay .mode-hall-room-line {
  min-height: 68px;
  padding: 12px;
}
.mode-hall-overlay .mode-hall-room-actions button {
  min-height: 64px;
  padding: 12px 14px;
}
.mode-hall-overlay .mode-hall-room-actions button span {
  font-size: 14px;
}
.mode-hall-overlay .mode-hall-room-actions button small {
  font-size: 11px;
}
.mode-hall-overlay .mode-hall-room-member,
.mode-hall-overlay .mode-hall-social-row {
  min-height: 62px;
  padding: 12px;
}
.mode-hall-overlay .mode-hall-intel-list li {
  padding: 12px;
}
.mode-hall-overlay .mode-hall-operation {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  align-content: start;
}
.mode-hall-overlay .mode-hall-room-members,
.mode-hall-overlay .mode-hall-intel-list,
.mode-hall-overlay .mode-hall-social-list {
  overflow: hidden;
  max-height: none;
}
.mode-hall-overlay .mode-hall-room-members {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mode-hall-overlay .mode-hall-side-column {
  align-content: start;
}
@media (max-width: 1200px) and (min-width: 901px) {
  .mode-hall-overlay .mode-hall-shell--orb {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    min-height: 0;
    margin: 8px auto;
    padding: 12px;
    gap: 10px;
  }
  .mode-hall-overlay .mode-hall-main {
    grid-template-columns: minmax(250px, 0.84fr) minmax(320px, 1.08fr) minmax(210px, 0.64fr);
  }
  .mode-hall-overlay .mode-hall-hero,
  .mode-hall-overlay .mode-hall-side-column {
    grid-column: auto;
  }
  .mode-hall-overlay .mode-hall-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .mode-hall-overlay .mode-hall-header-ribbon {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .mode-hall-overlay .mode-hall-title-wrap h2 {
    font-size: clamp(26px, 3vw, 36px);
  }
  .mode-hall-overlay .mode-hall-ribbon-chip {
    min-height: 52px;
    padding: 8px 10px;
  }
  .mode-hall-overlay .mode-hall-section-label {
    display: none;
  }
  .mode-hall-overlay .mode-hall-hero-stage-shell {
    grid-template-columns: minmax(0, 1fr) 172px;
  }
  .mode-hall-overlay .mode-hall-hero-stage {
    min-height: 240px;
  }
  .mode-hall-overlay .mode-hall-hero-summary {
    display: none;
  }
  .mode-hall-overlay .mode-hall-room-members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .mode-hall-overlay .mode-hall-side-column {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mode-hall-overlay .mode-hall-room-member,
  .mode-hall-overlay .mode-hall-social-row {
    min-height: 56px;
    padding: 10px;
  }
  .mode-hall-overlay .mode-hall-room-member-copy strong,
  .mode-hall-overlay .mode-hall-social-copy strong {
    font-size: 13px;
  }
  .mode-hall-overlay .mode-hall-room-member-copy span,
  .mode-hall-overlay .mode-hall-social-copy span {
    font-size: 11px;
    line-height: 1.4;
  }
  .mode-hall-overlay .mode-hall-room-line strong {
    font-size: 15px;
  }
  .mode-hall-overlay .mode-hall-room-actions button small {
    display: none;
  }
  .mode-hall-overlay .mode-hall-social-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mode-hall-overlay .mode-hall-intel-list li {
    gap: 10px;
    padding: 10px;
  }
}
@media (max-width: 900px) {
  .mode-hall-overlay {
    overflow: auto;
    align-items: flex-start;
  }
  .mode-hall-overlay .mode-hall-shell--orb {
    height: auto;
    max-height: none;
    min-height: calc(100dvh - 16px);
    overflow: auto;
  }
  .mode-hall-overlay .mode-hall-hero-stats {
    grid-template-columns: 1fr;
  }
  .mode-hall-overlay .mode-hall-room-members {
    grid-template-columns: 1fr;
  }
}
.online-room-session {
  position: relative;
  width: 100%;
  height: 100%;
  color: #eef7ff;
}
.online-room-session__shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;
}
.online-room-session__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(150, 205, 255, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(9, 19, 34, 0.92),
      rgba(17, 33, 56, 0.86));
  box-shadow: 0 24px 60px rgba(1, 10, 20, 0.28);
}
.online-room-session__kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(180, 221, 255, 0.68);
}
.online-room-session__room {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
}
.online-room-session__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.online-room-session__btn {
  border: 1px solid rgba(160, 212, 255, 0.26);
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(8, 20, 34, 0.72);
  color: #edf8ff;
  font: inherit;
  cursor: pointer;
}
.online-room-session__btn--primary {
  background:
    linear-gradient(
      135deg,
      #56c9ff,
      #8df0c9);
  color: #082030;
  border-color: transparent;
  font-weight: 700;
}
.online-room-session__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  min-height: 0;
}
.online-room-session__canvas {
  width: 100%;
  height: 100%;
  min-height: 560px;
  border-radius: 28px;
  border: 1px solid rgba(166, 216, 255, 0.16);
  background: #0f1d2c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.online-room-session__panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(166, 216, 255, 0.16);
  background:
    linear-gradient(
      160deg,
      rgba(6, 16, 28, 0.92),
      rgba(17, 34, 56, 0.88));
  box-shadow: 0 24px 60px rgba(1, 10, 20, 0.24);
}
.online-room-session__timer {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}
.online-room-session__status,
.online-room-session__player,
.online-room-session__hint {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(227, 243, 255, 0.86);
}
.online-room-session__leaderboard {
  display: grid;
  gap: 10px;
  min-height: 0;
  align-content: start;
}
.online-room-leaderboard-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(235, 246, 255, 0.9);
}
.online-room-leaderboard-row.is-self {
  background: rgba(116, 214, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(129, 223, 255, 0.2);
}
.online-room-leaderboard-row strong,
.online-room-leaderboard-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.online-room-leaderboard-row em {
  font-style: normal;
  color: rgba(255, 233, 170, 0.94);
}
.online-room-session__result {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 28px;
  background: rgba(3, 9, 16, 0.56);
  backdrop-filter: blur(8px);
}
.online-room-session__result-card {
  width: min(420px, 100%);
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(166, 216, 255, 0.18);
  background:
    linear-gradient(
      160deg,
      rgba(10, 20, 36, 0.96),
      rgba(20, 39, 64, 0.94));
  box-shadow: 0 24px 60px rgba(1, 10, 20, 0.28);
  text-align: center;
}
.online-room-session__result-card h2 {
  margin: 12px 0 8px;
  font-size: 28px;
}
.online-room-session__result-card p {
  margin: 0;
  color: rgba(226, 241, 255, 0.8);
  line-height: 1.6;
}
.online-room-session__result-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
@media (max-width: 1080px) {
  .online-room-session__stage {
    grid-template-columns: 1fr;
  }
  .online-room-session__canvas {
    min-height: 440px;
  }
}
@media (max-width: 720px) {
  .online-room-session__shell {
    padding: 12px;
  }
  .online-room-session__header {
    flex-direction: column;
    align-items: stretch;
  }
  .online-room-session__header-actions {
    justify-content: stretch;
  }
  .online-room-session__header-actions > * {
    flex: 1 1 0;
  }
  .online-room-session__canvas {
    min-height: 360px;
  }
}

/* src/mode-hall-v2.css */
.mode-hall-overlay--v2 {
  --mode-hall-fit-scale: 1;
  --mode-accent: #66d7ff;
  --mode-accent-strong: #8ef1ff;
  --mode-accent-soft: rgba(102, 215, 255, 0.22);
  --mode-bg: #08111f;
  --mode-bg-soft: rgba(10, 18, 34, 0.92);
  --mode-panel: rgba(10, 18, 34, 0.76);
  --mode-panel-strong: rgba(12, 24, 44, 0.92);
  --mode-border: rgba(146, 220, 255, 0.18);
  --mode-text: #edf7ff;
  --mode-text-soft: rgba(237, 247, 255, 0.74);
  --mode-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding: 14px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
.mode-hall-overlay--v2.is-visible {
  pointer-events: auto;
  opacity: 1;
}
.mode-hall-overlay--v2[data-mode-theme=gold] {
  --mode-accent: #ffcb66;
  --mode-accent-strong: #ffe6a6;
  --mode-accent-soft: rgba(255, 203, 102, 0.22);
}
.mode-hall-overlay--v2[data-mode-theme=violet] {
  --mode-accent: #b487ff;
  --mode-accent-strong: #dcc7ff;
  --mode-accent-soft: rgba(180, 135, 255, 0.24);
}
.mode-hall-overlay--v2[data-mode-theme=cyan] {
  --mode-accent: #6ddfff;
  --mode-accent-strong: #a6f2ff;
  --mode-accent-soft: rgba(109, 223, 255, 0.22);
}
.mode-hall-overlay--v2[data-mode-theme=amber] {
  --mode-accent: #ff9f4d;
  --mode-accent-strong: #ffd0a4;
  --mode-accent-soft: rgba(255, 159, 77, 0.24);
}
.mode-hall-overlay--v2[data-mode-theme=purple] {
  --mode-accent: #9f8aff;
  --mode-accent-strong: #cec5ff;
  --mode-accent-soft: rgba(159, 138, 255, 0.24);
}
.mode-hall-overlay--v2[data-mode-theme=red] {
  --mode-accent: #ff7b6e;
  --mode-accent-strong: #ffc0b8;
  --mode-accent-soft: rgba(255, 123, 110, 0.24);
}
.mode-hall-overlay--v2 .mode-hall-backdrop--v2 {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 16% 20%,
      var(--mode-accent-soft),
      transparent 28%),
    radial-gradient(
      circle at 78% 16%,
      rgba(255, 255, 255, 0.08),
      transparent 22%),
    radial-gradient(
      circle at 70% 76%,
      rgba(255, 255, 255, 0.04),
      transparent 22%),
    linear-gradient(
      180deg,
      rgba(6, 12, 24, 0.98),
      rgba(3, 8, 18, 0.99));
}
.mode-hall-overlay--v2 .mode-hall-shell--scene {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(1680px, 100%);
  min-height: 0;
  height: auto;
  padding: 14px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      180deg,
      rgba(10, 16, 30, 0.84),
      rgba(6, 11, 22, 0.92)),
    linear-gradient(
      135deg,
      var(--mode-accent-soft),
      transparent 34%);
  box-shadow: var(--mode-shadow);
  overflow: hidden;
  backdrop-filter: blur(24px);
  transform: scale(var(--mode-hall-fit-scale));
  transform-origin: top center;
}
.mode-hall-overlay--v2 .mode-hall-shell--scene::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.06),
      transparent);
  opacity: 0.4;
}
.mode-hall-overlay--v2 .mode-hall-surface-card {
  border-radius: 24px;
  border: 1px solid var(--mode-border);
  background: rgba(11, 20, 37, 0.45);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 40px rgba(0, 0, 0, 0.5);
}
.mode-hall-overlay--v2 .mode-hall-header--scene {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.mode-hall-overlay--v2 .mode-hall-header-main,
.mode-hall-overlay--v2 .mode-hall-title-wrap,
.mode-hall-overlay--v2 .mode-hall-header-actions {
  min-width: 0;
}
.mode-hall-overlay--v2 .mode-hall-title-wrap h2 {
  margin: 0;
  color: var(--mode-text);
  font-size: clamp(28px, 2.2vw, 42px);
  line-height: 1;
}
.mode-hall-overlay--v2 .mode-hall-title-caption,
.mode-hall-overlay--v2 .mode-hall-stage-copy p,
.mode-hall-overlay--v2 .mode-hall-sidebar-summary p,
.mode-hall-overlay--v2 .mode-hall-party-copy p,
.mode-hall-overlay--v2 .mode-hall-tray-head p {
  margin: 0;
  color: var(--mode-text-soft);
  line-height: 1.55;
}
.mode-hall-overlay--v2 .mode-hall-kicker,
.mode-hall-overlay--v2 .mode-hall-panel-kicker,
.mode-hall-overlay--v2 .mode-hall-stage-overline,
.mode-hall-overlay--v2 .mode-hall-cta-kicker {
  color: var(--mode-accent-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mode-hall-overlay--v2 .mode-hall-header-ribbon,
.mode-hall-overlay--v2 .mode-hall-header-main,
.mode-hall-overlay--v2 .mode-hall-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mode-hall-overlay--v2 .mode-hall-header-ribbon {
  justify-content: center;
  flex-wrap: wrap;
}
.mode-hall-overlay--v2 .mode-hall-ribbon-chip,
.mode-hall-overlay--v2 .mode-hall-mini-chip,
.mode-hall-overlay--v2 .mode-hall-stage-notch,
.mode-hall-overlay--v2 .mode-hall-spotlight-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mode-text);
  gap: 8px;
}
.mode-hall-overlay--v2 .mode-hall-ribbon-chip span,
.mode-hall-overlay--v2 .mode-hall-mini-chip,
.mode-hall-overlay--v2 .mode-hall-stage-notch {
  font-size: 12px;
}
.mode-hall-overlay--v2 .mode-hall-ribbon-chip strong,
.mode-hall-overlay--v2 .mode-hall-hud-stat strong,
.mode-hall-overlay--v2 .mode-hall-stage-stat strong,
.mode-hall-overlay--v2 .mode-hall-list-copy strong,
.mode-hall-overlay--v2 .mode-hall-tray-card strong,
.mode-hall-overlay--v2 .mode-hall-party-copy strong {
  color: var(--mode-text);
}
.mode-hall-overlay--v2 .mode-hall-header-btn,
.mode-hall-overlay--v2 .mode-hall-segment,
.mode-hall-overlay--v2 .mode-hall-cta-button,
.mode-hall-overlay--v2 .mode-hall-room-copy,
.mode-hall-overlay--v2 .mode-hall-party-actions button,
.mode-hall-overlay--v2 .mode-hall-list-row {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mode-text);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
.mode-hall-overlay--v2 .mode-hall-header-btn:hover,
.mode-hall-overlay--v2 .mode-hall-segment:hover,
.mode-hall-overlay--v2 .mode-hall-room-copy:hover,
.mode-hall-overlay--v2 .mode-hall-party-actions button:hover,
.mode-hall-overlay--v2 .mode-hall-list-row:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}
.mode-hall-overlay--v2 .mode-hall-header-btn:active,
.mode-hall-overlay--v2 .mode-hall-segment:active,
.mode-hall-overlay--v2 .mode-hall-cta-button:active,
.mode-hall-overlay--v2 .mode-hall-room-copy:active,
.mode-hall-overlay--v2 .mode-hall-party-actions button:active,
.mode-hall-overlay--v2 .mode-hall-list-row:active {
  transform: scale(0.985);
}
.mode-hall-overlay--v2 .mode-hall-segment,
.mode-hall-overlay--v2 .mode-hall-header-btn,
.mode-hall-overlay--v2 .mode-hall-room-copy {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
}
.mode-hall-overlay--v2 .mode-hall-segment.is-active {
  border-color: color-mix(in srgb, var(--mode-accent) 55%, white);
  background: color-mix(in srgb, var(--mode-accent-soft) 85%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.2);
}
.mode-hall-overlay--v2 .mode-hall-scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-content: center;
  gap: 14px;
  min-height: 0;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.mode-hall-overlay--v2 .mode-hall-hud-left,
.mode-hall-overlay--v2 .mode-hall-sidebar-right,
.mode-hall-overlay--v2 .mode-hall-stage-shell,
.mode-hall-overlay--v2 .mode-hall-party-panel,
.mode-hall-overlay--v2 .mode-hall-bottom-tray {
  min-height: 0;
  padding: 14px;
}
.mode-hall-overlay--v2 .mode-hall-hud-left,
.mode-hall-overlay--v2 .mode-hall-sidebar-right {
  display: grid;
  gap: 14px;
}
.mode-hall-overlay--v2 .mode-hall-hud-headline {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.mode-hall-overlay--v2 .mode-hall-hud-headline strong,
.mode-hall-overlay--v2 .mode-hall-stage-copy h3,
.mode-hall-overlay--v2 .mode-hall-sidebar-summary strong,
.mode-hall-overlay--v2 .mode-hall-tray-head strong {
  font-size: clamp(22px, 1.45vw, 30px);
  margin: 0;
}
.mode-hall-overlay--v2 .mode-hall-hud-headline p,
.mode-hall-overlay--v2 .mode-hall-list-copy span,
.mode-hall-overlay--v2 .mode-hall-hud-stat small,
.mode-hall-overlay--v2 .mode-hall-stage-stat small,
.mode-hall-overlay--v2 .mode-hall-party-member em,
.mode-hall-overlay--v2 .mode-hall-party-tip {
  color: var(--mode-text-soft);
  margin: 0;
}
.mode-hall-overlay--v2 .mode-hall-hud-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      var(--mode-accent-soft),
      rgba(255, 255, 255, 0.04));
  color: var(--mode-accent-strong);
}
.mode-hall-overlay--v2 .mode-hall-hud-svg {
  width: 28px;
  height: 28px;
}
.mode-hall-overlay--v2 .mode-hall-hud-badge {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--mode-accent-strong);
  font-size: 12px;
  font-weight: 700;
}
.mode-hall-overlay--v2 .mode-hall-hud-chips,
.mode-hall-overlay--v2 .mode-hall-sidebar-chips,
.mode-hall-overlay--v2 .mode-hall-stage-notches,
.mode-hall-overlay--v2 .mode-hall-stage-spotlights,
.mode-hall-overlay--v2 .mode-hall-queue-tabs,
.mode-hall-overlay--v2 .mode-hall-sidebar-tabs,
.mode-hall-overlay--v2 .mode-hall-tray-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mode-hall-overlay--v2 .mode-hall-hud-stats,
.mode-hall-overlay--v2 .mode-hall-stage-rail,
.mode-hall-overlay--v2 .mode-hall-sidebar-list,
.mode-hall-overlay--v2 .mode-hall-party-members {
  display: grid;
  gap: 10px;
}
.mode-hall-overlay--v2 .mode-hall-hud-stat,
.mode-hall-overlay--v2 .mode-hall-stage-stat,
.mode-hall-overlay--v2 .mode-hall-tray-card,
.mode-hall-overlay--v2 .mode-hall-party-chip {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.mode-hall-overlay--v2 .mode-hall-stage-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: 100%;
}
.mode-hall-overlay--v2 .mode-hall-stage-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.mode-hall-overlay--v2 .mode-hall-stage-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  gap: 10px;
}
.mode-hall-overlay--v2 .mode-hall-stage-watermark {
  position: absolute;
  inset: 18px 18px auto auto;
  display: flex;
  gap: 8px;
  opacity: 0.14;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.mode-hall-overlay--v2 .mode-hall-stage-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 204px;
  gap: 12px;
  min-height: 0;
}
.mode-hall-overlay--v2 .mode-hall-stage-hero {
  position: relative;
  min-height: 286px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(
      circle at 50% 42%,
      var(--mode-accent-soft),
      transparent 40%),
    linear-gradient(
      180deg,
      rgba(5, 10, 20, 0.98),
      rgba(8, 14, 26, 1));
}
.mode-hall-overlay--v2 .mode-hall-stage-aura,
.mode-hall-overlay--v2 .mode-hall-stage-gridline,
.mode-hall-overlay--v2 .mode-hall-stage-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mode-hall-overlay--v2 .mode-hall-stage-aura {
  background:
    radial-gradient(
      circle at 50% 50%,
      var(--mode-accent-soft),
      transparent 38%),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.08),
      transparent 54%);
}
.mode-hall-overlay--v2 .mode-hall-stage-gridline {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px);
  background-size: 36px 36px;
  mask-image:
    linear-gradient(
      180deg,
      transparent,
      black 16%,
      black 84%,
      transparent);
}
.mode-hall-overlay--v2 .mode-hall-stage-orbit {
  margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.mode-hall-overlay--v2 .mode-hall-stage-orbit--outer {
  width: 78%;
  height: 78%;
  animation: modeHallV2Rotate 24s linear infinite;
}
.mode-hall-overlay--v2 .mode-hall-stage-orbit--inner {
  width: 54%;
  height: 54%;
  animation: modeHallV2RotateReverse 16s linear infinite;
}
.mode-hall-overlay--v2 .mode-hall-hero-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.mode-hall-overlay--v2 .mode-hall-stage-spotlights {
  position: absolute;
  inset: auto 18px 18px 18px;
  z-index: 2;
}
.mode-hall-overlay--v2 .mode-hall-stage-stat span,
.mode-hall-overlay--v2 .mode-hall-hud-stat span,
.mode-hall-overlay--v2 .mode-hall-party-chip span,
.mode-hall-overlay--v2 .mode-hall-tray-card span {
  display: block;
  color: var(--mode-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mode-hall-overlay--v2 .mode-hall-stage-stat strong,
.mode-hall-overlay--v2 .mode-hall-hud-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
}
.mode-hall-overlay--v2 .mode-hall-stage-statusbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
}
.mode-hall-overlay--v2 .mode-hall-stage-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.mode-hall-overlay--v2 .mode-hall-cta-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.mode-hall-overlay--v2 .mode-hall-cta-button {
  min-width: 176px;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--mode-accent) 60%, white);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mode-accent) 76%, white),
      var(--mode-accent));
  color: #05111f;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 40px var(--mode-accent-soft);
  animation: modeHallV2Breath 2.8s ease-in-out infinite;
}
.mode-hall-overlay--v2 .mode-hall-party-head,
.mode-hall-overlay--v2 .mode-hall-party-entry-row,
.mode-hall-overlay--v2 .mode-hall-party-strip,
.mode-hall-overlay--v2 .mode-hall-party-actions {
  display: grid;
  gap: 10px;
}
.mode-hall-overlay--v2 .mode-hall-party-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.mode-hall-overlay--v2 .mode-hall-party-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mode-hall-overlay--v2 .mode-hall-party-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mode-hall-overlay--v2 .mode-hall-party-actions button,
.mode-hall-overlay--v2 .mode-hall-list-row {
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 18px;
  text-align: left;
}
.mode-hall-overlay--v2 .mode-hall-room-input {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--mode-text);
}
.mode-hall-overlay--v2 .mode-hall-party-member,
.mode-hall-overlay--v2 .mode-hall-list-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.mode-hall-overlay--v2 .mode-hall-list-orb {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(
      180deg,
      var(--mode-accent-soft),
      rgba(255, 255, 255, 0.05));
  color: var(--mode-accent-strong);
  font-weight: 800;
}
.mode-hall-overlay--v2 .mode-hall-party-member.is-ready,
.mode-hall-overlay--v2 .mode-hall-party-member.is-self {
  border-color: color-mix(in srgb, var(--mode-accent) 55%, white);
}
.mode-hall-overlay--v2 .mode-hall-party-member.is-empty {
  opacity: 0.72;
}
.mode-hall-overlay--v2 .mode-hall-sidebar-right {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.mode-hall-overlay--v2 .mode-hall-sidebar-list {
  min-height: 0;
  overflow: hidden;
}
.mode-hall-overlay--v2 .mode-hall-bottom-tray {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 200px;
}
.mode-hall-overlay--v2 .mode-hall-tray-content,
.mode-hall-overlay--v2 .mode-hall-tray-cards {
  min-height: 0;
}
.mode-hall-overlay--v2 .mode-hall-tray-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mode-hall-overlay--v2 .mode-hall-tray-card p {
  margin: 8px 0 0;
  color: var(--mode-text-soft);
  line-height: 1.55;
}
@media (max-width: 1439px) {
  .mode-hall-overlay--v2 .mode-hall-scene-grid {
    grid-template-columns: minmax(230px, 0.68fr) minmax(0, 1.45fr) minmax(280px, 0.8fr);
  }
  .mode-hall-overlay--v2 .mode-hall-stage-view {
    grid-template-columns: minmax(0, 1fr) 196px;
  }
  .mode-hall-overlay--v2 .mode-hall-cta-button {
    min-width: 174px;
  }
}
@media (max-width: 1279px) {
  .mode-hall-overlay--v2 .mode-hall-shell--scene {
    padding: 14px;
  }
  .mode-hall-overlay--v2 .mode-hall-scene-grid {
    grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.3fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .mode-hall-overlay--v2 .mode-hall-sidebar-right {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }
  .mode-hall-overlay--v2 .mode-hall-stage-view {
    grid-template-columns: minmax(0, 1fr) 180px;
  }
  .mode-hall-overlay--v2 .mode-hall-tray-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1023px) {
  .mode-hall-overlay--v2 {
    padding: 10px;
    overflow: auto;
  }
  .mode-hall-overlay--v2 .mode-hall-shell--scene {
    width: 100%;
    transform: none;
    height: auto;
    min-height: calc(100vh - 20px);
    overflow: visible;
  }
  .mode-hall-overlay--v2 .mode-hall-header--scene,
  .mode-hall-overlay--v2 .mode-hall-scene-grid,
  .mode-hall-overlay--v2 .mode-hall-stage-topline,
  .mode-hall-overlay--v2 .mode-hall-stage-view,
  .mode-hall-overlay--v2 .mode-hall-stage-statusbar,
  .mode-hall-overlay--v2 .mode-hall-party-strip,
  .mode-hall-overlay--v2 .mode-hall-party-actions,
  .mode-hall-overlay--v2 .mode-hall-tray-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .mode-hall-overlay--v2 .mode-hall-header--scene,
  .mode-hall-overlay--v2 .mode-hall-stage-statusbar {
    display: grid;
  }
  .mode-hall-overlay--v2 .mode-hall-header-ribbon,
  .mode-hall-overlay--v2 .mode-hall-header-actions {
    justify-content: flex-start;
  }
  .mode-hall-overlay--v2 .mode-hall-stage-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .mode-hall-overlay--v2 .mode-hall-cta-button {
    width: 100%;
    min-width: 0;
  }
  .mode-hall-overlay--v2 .mode-hall-sidebar-list,
  .mode-hall-overlay--v2 .mode-hall-bottom-tray {
    overflow: visible;
  }
}
@media (max-height: 900px) and (min-width: 1024px) {
  .mode-hall-overlay--v2 {
    padding: 10px;
  }
  .mode-hall-overlay--v2 .mode-hall-shell--scene {
    gap: 10px;
    padding: 12px;
  }
  .mode-hall-overlay--v2 .mode-hall-header--scene {
    gap: 12px;
  }
  .mode-hall-overlay--v2 .mode-hall-title-wrap h2 {
    font-size: clamp(24px, 2vw, 34px);
  }
  .mode-hall-overlay--v2 .mode-hall-stage-hero {
    min-height: 254px;
  }
  .mode-hall-overlay--v2 .mode-hall-stage-view {
    grid-template-columns: minmax(0, 1fr) 186px;
  }
  .mode-hall-overlay--v2 .mode-hall-party-actions button,
  .mode-hall-overlay--v2 .mode-hall-list-row {
    min-height: 52px;
  }
}
@media (max-height: 780px) and (min-width: 1024px) {
  .mode-hall-overlay--v2 .mode-hall-ribbon-chip,
  .mode-hall-overlay--v2 .mode-hall-mini-chip,
  .mode-hall-overlay--v2 .mode-hall-stage-notch,
  .mode-hall-overlay--v2 .mode-hall-spotlight-chip {
    min-height: 32px;
    padding: 0 12px;
  }
  .mode-hall-overlay--v2 .mode-hall-hud-left,
  .mode-hall-overlay--v2 .mode-hall-sidebar-right,
  .mode-hall-overlay--v2 .mode-hall-stage-shell,
  .mode-hall-overlay--v2 .mode-hall-party-panel {
    padding: 12px;
  }
  .mode-hall-overlay--v2 .mode-hall-hud-headline strong,
  .mode-hall-overlay--v2 .mode-hall-stage-copy h3,
  .mode-hall-overlay--v2 .mode-hall-sidebar-summary strong {
    font-size: clamp(18px, 1.3vw, 24px);
  }
  .mode-hall-overlay--v2 .mode-hall-stage-view {
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 10px;
  }
  .mode-hall-overlay--v2 .mode-hall-stage-hero {
    min-height: 224px;
  }
  .mode-hall-overlay--v2 .mode-hall-stage-stat strong,
  .mode-hall-overlay--v2 .mode-hall-hud-stat strong {
    font-size: 18px;
  }
}
[data-reduced-motion=true] .mode-hall-overlay--v2 .mode-hall-stage-orbit--outer,
html[data-reduced-motion=true] .mode-hall-overlay--v2 .mode-hall-stage-orbit--outer,
[data-reduced-motion=true] .mode-hall-overlay--v2 .mode-hall-stage-orbit--inner,
html[data-reduced-motion=true] .mode-hall-overlay--v2 .mode-hall-stage-orbit--inner,
[data-reduced-motion=true] .mode-hall-overlay--v2 .mode-hall-cta-button,
html[data-reduced-motion=true] .mode-hall-overlay--v2 .mode-hall-cta-button {
  animation: none;
}
@keyframes modeHallV2Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes modeHallV2RotateReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes modeHallV2Breath {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 16px 40px var(--mode-accent-soft);
  }
  50% {
    transform: translateY(-2px);
    box-shadow: 0 20px 54px var(--mode-accent-soft);
  }
}
.mode-hall-overlay--v2 .mode-hall-drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(4, 9, 20, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.mode-hall-overlay--v2[data-active-drawer=hud] .mode-hall-drawer-backdrop,
.mode-hall-overlay--v2[data-active-drawer=sidebar] .mode-hall-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.mode-hall-overlay--v2 .mode-hall-drawer {
  position: absolute;
  top: 90px;
  bottom: 110px;
  width: 340px;
  z-index: 60;
  border-radius: 28px;
  background: rgba(14, 21, 38, 0.55) !important;
  backdrop-filter: blur(36px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(140%) !important;
  border: 1px solid rgba(82, 115, 255, 0.25) !important;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1) !important;
  transition:
    transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease,
    visibility 0.4s ease;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  display: flex;
  flex-direction: column;
}
.mode-hall-overlay--v2 .mode-hall-drawer.is-left {
  left: 20px;
  transform: translateX(-140%) scale(0.9) skewX(-2deg);
  transform-origin: left center;
}
.mode-hall-overlay--v2 .mode-hall-drawer.is-right {
  right: 20px;
  transform: translateX(140%) scale(0.9) skewX(2deg);
  transform-origin: right center;
}
.mode-hall-overlay--v2[data-active-drawer=hud] .mode-hall-drawer.is-left[data-drawer-name=hud] {
  transform: translateX(0) scale(1) skewX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mode-hall-overlay--v2[data-active-drawer=sidebar] .mode-hall-drawer.is-right[data-drawer-name=sidebar] {
  transform: translateX(0) scale(1) skewX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mode-hall-overlay--v2 .mode-hall-floating-dock {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(14, 22, 42, 0.45) !important;
  border-radius: 99px;
  border: 1px solid rgba(135, 175, 255, 0.25) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
}
.mode-hall-overlay--v2 .mode-hall-dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 80px;
  height: 64px;
  border-radius: 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}
.mode-hall-overlay--v2 .mode-hall-dock-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--mode-accent-strong);
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.mode-hall-overlay--v2 .mode-hall-dock-btn:active {
  transform: translateY(2px) scale(0.92);
  transition-duration: 0.1s;
}
.mode-hall-overlay--v2 .mode-hall-dock-symbol {
  font-size: 28px;
  pointer-events: none;
  transition: filter 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mode-hall-overlay--v2 .mode-hall-dock-btn:hover .mode-hall-dock-symbol {
  filter: drop-shadow(0 0 10px var(--mode-accent));
  transform: scale(1.15) translateY(-2px);
}
.mode-hall-overlay--v2 .mode-hall-dock-btn span:not(.mode-hall-dock-symbol) {
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

/* src/lobby-stitch-hotfix.css */
.lobby-overlay.lobby-stitch-exact .stitch-root {
  position: relative;
  isolation: isolate;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-items: stretch;
}
.lobby-overlay.lobby-stitch-exact .stitch-root::before,
.lobby-overlay.lobby-stitch-exact .stitch-root::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-root::before {
  background:
    linear-gradient(
      90deg,
      transparent 0 11.5%,
      rgba(72, 235, 255, 0.08) 11.7%,
      transparent 11.95% 87%,
      rgba(87, 110, 255, 0.08) 87.2%,
      transparent 87.45%),
    linear-gradient(
      142deg,
      transparent 0 48.5%,
      rgba(94, 110, 255, 0.075) 49%,
      transparent 49.4%),
    linear-gradient(
      142deg,
      transparent 0 67%,
      rgba(80, 238, 255, 0.055) 67.4%,
      transparent 67.8%),
    repeating-linear-gradient(
      90deg,
      transparent 0 134px,
      rgba(104, 128, 255, 0.05) 134px 136px,
      transparent 136px 268px),
    repeating-linear-gradient(
      0deg,
      transparent 0 96px,
      rgba(86, 234, 255, 0.028) 96px 98px,
      transparent 98px 196px);
  opacity: 0.72;
}
.lobby-overlay.lobby-stitch-exact .stitch-root::after {
  inset: 12% 0 0;
  background:
    linear-gradient(
      180deg,
      transparent 0 62%,
      rgba(76, 95, 255, 0.055) 62.3%,
      transparent 62.7%),
    linear-gradient(
      90deg,
      transparent 0 24%,
      rgba(69, 240, 255, 0.05) 24.1%,
      transparent 24.35% 73%,
      rgba(76, 95, 255, 0.05) 73.15%,
      transparent 73.4%),
    radial-gradient(
      circle at 50% 34%,
      rgba(74, 96, 255, 0.16),
      transparent 34%),
    radial-gradient(
      circle at 78% 76%,
      rgba(0, 230, 255, 0.08),
      transparent 22%),
    radial-gradient(
      circle at 22% 78%,
      rgba(84, 255, 200, 0.055),
      transparent 18%);
  opacity: 0.82;
}
.lobby-overlay.lobby-stitch-exact .stitch-root::-webkit-scrollbar {
  display: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-scale-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  min-height: 100%;
  width: calc(100% / var(--stitch-fit-scale, 1));
  transform: scale(var(--stitch-fit-scale, 1));
  transform-origin: top left;
}
.lobby-overlay.lobby-stitch-exact .stitch-main {
  flex: 0 0 auto;
  min-height: auto;
}
.lobby-overlay.lobby-stitch-exact .stitch-rename-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(129, 236, 255, 0.22);
  background: rgba(11, 20, 39, 0.78);
  color: #dff7ff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
}
.lobby-overlay.lobby-stitch-exact .stitch-rename-btn-symbol {
  font-size: 18px;
}
.lobby-overlay.lobby-stitch-exact .stitch-profile-kicker {
  letter-spacing: 0.02em;
}
.lobby-overlay.lobby-stitch-exact .stitch-profile-name {
  letter-spacing: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-right-col {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
  min-height: 164px;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-core {
  position: relative;
  width: 122px;
  height: 122px;
  border-radius: 999px;
  background:
    linear-gradient(
      150deg,
      var(--stitch-skin-a),
      var(--stitch-skin-b));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.14),
    inset -18px -22px 34px rgba(14, 23, 43, 0.24),
    0 0 44px color-mix(in srgb, var(--stitch-skin-glow, var(--stitch-skin-a)) 58%, transparent);
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-core img {
  display: none !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-surface,
.lobby-overlay.lobby-stitch-exact .stitch-ball-highlight,
.lobby-overlay.lobby-stitch-exact .stitch-ball-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-surface {
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255, 255, 255, 0.45),
      transparent 22%),
    radial-gradient(
      circle at 50% 110%,
      rgba(8, 16, 32, 0.42),
      transparent 48%),
    linear-gradient(
      150deg,
      var(--stitch-skin-a),
      var(--stitch-skin-b));
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-highlight {
  inset: 10px 18px auto 18px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.34),
      transparent 70%);
  filter: blur(6px);
  opacity: 0.78;
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-sheen {
  inset: auto 10px 16px auto;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.22),
      transparent 72%);
  filter: blur(8px);
}
.lobby-overlay.lobby-stitch-exact .stitch-ball-skin-name {
  letter-spacing: 0.01em;
}
.lobby-overlay.lobby-stitch-exact .stitch-skins-btn {
  font-size: 14px;
  letter-spacing: 0.04em;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(
      180deg,
      rgba(21, 34, 61, 0.96),
      rgba(14, 24, 45, 0.98));
  --flow-primary: var(--flow-color, #8ca4c6);
  --flow-secondary: color-mix(in srgb, var(--flow-primary) 68%, #ffffff 32%);
  --flow-tertiary: color-mix(in srgb, var(--flow-primary) 72%, #ffcb7a 28%);
  transition:
    transform 160ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-cyan {
  --flow-primary: #76f0ff;
  --flow-secondary: #9dfdff;
  --flow-tertiary: #52b7ff;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-violet {
  --flow-primary: #c290ff;
  --flow-secondary: #e2b6ff;
  --flow-tertiary: #7f8eff;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-gold {
  --flow-primary: #ffd27f;
  --flow-secondary: #ffe8a9;
  --flow-tertiary: #ffb35f;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-red {
  --flow-primary: #ff8664;
  --flow-secondary: #ffb267;
  --flow-tertiary: #ff5d5d;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-neutral {
  --flow-primary: #8ca4c6;
  --flow-secondary: #bdd1ef;
  --flow-tertiary: #6f86ad;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 248deg,
      color-mix(in srgb, var(--flow-tertiary) 100%, white 8%) 266deg,
      color-mix(in srgb, var(--flow-secondary) 100%, white 16%) 281deg,
      rgba(255, 255, 255, 0.92) 291deg,
      color-mix(in srgb, var(--flow-primary) 100%, white 10%) 304deg,
      color-mix(in srgb, var(--flow-secondary) 100%, white 16%) 320deg,
      transparent 344deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transform-origin: center;
  animation: stitchBorderOrbit 3.9s linear infinite;
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--flow-primary) 24%, rgba(255, 255, 255, 0.1));
  background:
    radial-gradient(
      circle at 10% 4%,
      color-mix(in srgb, var(--flow-secondary) 48%, transparent),
      transparent 44%),
    radial-gradient(
      circle at 92% 100%,
      color-mix(in srgb, var(--flow-tertiary) 44%, transparent),
      transparent 48%);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--flow-primary) 20%, transparent), 0 0 14px color-mix(in srgb, var(--flow-secondary) 16%, transparent);
  opacity: 0.72;
  animation: stitchGlowBreath 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card:hover {
  transform: translateY(-2px);
  filter: none;
  border-color: color-mix(in srgb, var(--flow-primary) 54%, rgba(255, 255, 255, 0.16));
  box-shadow: 0 14px 30px rgba(4, 10, 22, 0.3), 0 0 22px color-mix(in srgb, var(--flow-secondary) 24%, transparent);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card > *:not(.stitch-mode-edge) {
  position: relative;
  z-index: 1;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge {
  display: block !important;
  opacity: 0.28;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--flow-secondary) 100%, white 8%),
      color-mix(in srgb, var(--flow-primary) 100%, white 8%),
      transparent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--flow-primary) 70%, transparent));
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card:hover .stitch-mode-edge,
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active .stitch-mode-edge {
  opacity: 0.95;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active {
  border-color: color-mix(in srgb, var(--flow-secondary) 66%, rgba(255, 255, 255, 0.18));
  box-shadow: 0 0 28px color-mix(in srgb, var(--flow-primary) 28%, transparent), 0 12px 28px rgba(4, 10, 22, 0.3);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--top,
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--bottom {
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--flow-secondary) 100%, white 12%),
      color-mix(in srgb, var(--flow-primary) 100%, white 8%),
      transparent);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--left,
.lobby-overlay.lobby-stitch-exact .stitch-mode-edge--right {
  background:
    linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb, var(--flow-secondary) 100%, white 12%),
      color-mix(in srgb, var(--flow-primary) 100%, white 8%),
      transparent);
}
.lobby-overlay.lobby-stitch-exact .stitch-panel,
.lobby-overlay.lobby-stitch-exact .stitch-friend-list,
.lobby-overlay.lobby-stitch-exact .stitch-friend-item {
  min-height: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-panel {
  overflow: hidden;
}
@media (max-height: 900px) and (min-width: 1025px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    gap: 8px;
    padding: 10px 12px 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-topbar {
    gap: 10px;
    padding: 9px 11px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-left-col {
    flex-basis: 292px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-card,
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel,
  .lobby-overlay.lobby-stitch-exact .stitch-panel {
    padding: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
    min-height: 152px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-core {
    width: 110px;
    height: 110px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta {
    min-height: 52px;
    font-size: 22px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-invite-strip {
    min-height: 50px;
    padding: 7px 9px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-activity-card {
    min-height: 54px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-dock-item {
    min-height: 48px;
  }
}
@media (max-width: 1366px) and (min-width: 1025px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    gap: 6px;
    padding: 8px 10px 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-scale-frame {
    gap: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-topbar {
    gap: 8px;
    padding: 8px 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-brand-title {
    font-size: clamp(26px, 1.8vw, 36px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-resource-chip {
    min-width: 150px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-resource-copy strong {
    font-size: 22px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-left-col {
    flex-basis: 250px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-card,
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel,
  .lobby-overlay.lobby-stitch-exact .stitch-panel {
    padding: 9px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-name {
    font-size: clamp(24px, 2vw, 34px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-meta {
    gap: 6px;
    font-size: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
    min-height: 132px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-core {
    width: 96px;
    height: 96px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-skin-name {
    bottom: 8px;
    font-size: 10px;
    padding: 3px 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-stat-tile {
    padding: 7px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-stat-tile strong {
    font-size: clamp(16px, 1vw, 22px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-skins-btn {
    min-height: 42px;
    font-size: 13px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
    gap: 7px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card {
    min-height: 96px;
    padding: 9px;
    gap: 4px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-icon-symbol {
    font-size: 30px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card strong {
    font-size: clamp(17px, 1.35vw, 24px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card p,
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card-kicker {
    font-size: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head {
    gap: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head strong {
    font-size: 14px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head small {
    font-size: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-row {
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-icon {
    width: 28px;
    height: 28px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-copy strong,
  .lobby-overlay.lobby-stitch-exact .stitch-task-progress,
  .lobby-overlay.lobby-stitch-exact .stitch-friend-item strong,
  .lobby-overlay.lobby-stitch-exact .stitch-friend-item small {
    font-size: 11px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-friend-list {
    gap: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-friend-item {
    padding: 7px 5px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-friend-avatar,
  .lobby-overlay.lobby-stitch-exact .stitch-invite-avatar {
    width: 30px;
    height: 30px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-cta-row {
    gap: 6px;
    margin-bottom: 2px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta {
    min-height: 48px;
    font-size: 21px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-invite-strip {
    min-height: 46px;
    padding: 6px 8px;
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-invite-btn {
    min-height: 34px;
    font-size: 11px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-activity-row {
    display: none;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-activity-card {
    min-height: 50px;
    padding: 7px 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-activity-copy strong {
    font-size: 14px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-dock {
    gap: 6px;
    padding: 5px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-dock-item {
    min-height: 44px;
    font-size: 10px;
  }
}
@media (max-width: 1024px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    overflow: auto;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-scale-frame {
    width: 100%;
    transform: none;
  }
}
@media (max-width: 720px) {
  .lobby-overlay.lobby-stitch-exact .stitch-dock {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@keyframes stitchEdgeTop {
  0%, 24% {
    transform: translateX(-135%);
    opacity: 0;
  }
  4%, 20% {
    opacity: 1;
  }
  24.1%, 100% {
    transform: translateX(360%);
    opacity: 0;
  }
}
@keyframes stitchEdgeRight {
  0%, 24% {
    transform: translateY(-135%);
    opacity: 0;
  }
  25%, 49% {
    opacity: 1;
  }
  49.1%, 100% {
    transform: translateY(360%);
    opacity: 0;
  }
}
@keyframes stitchEdgeBottom {
  0%, 49% {
    transform: translateX(135%);
    opacity: 0;
  }
  50%, 74% {
    opacity: 1;
  }
  74.1%, 100% {
    transform: translateX(-360%);
    opacity: 0;
  }
}
@keyframes stitchEdgeLeft {
  0%, 74% {
    transform: translateY(135%);
    opacity: 0;
  }
  75%, 99% {
    opacity: 1;
  }
  99.1%, 100% {
    transform: translateY(-360%);
    opacity: 0;
  }
}
@keyframes stitchGlowBreath {
  0%, 100% {
    opacity: 0.62;
    filter: brightness(0.96);
  }
  50% {
    opacity: 0.9;
    filter: brightness(1.08);
  }
}
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-mode-card::before,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-mode-card::before {
  animation: none !important;
}
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-mode-card::after,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-mode-card::after {
  animation: none !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-amber {
  --card-glow: rgba(255, 159, 77, 0.42);
  --card-edge: rgba(255, 194, 133, 0.86);
  --card-fill:
    linear-gradient(
      180deg,
      rgba(58, 36, 18, 0.94),
      rgba(28, 19, 11, 0.98));
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-theme-purple {
  --card-glow: rgba(159, 138, 255, 0.42);
  --card-edge: rgba(203, 193, 255, 0.86);
  --card-fill:
    linear-gradient(
      180deg,
      rgba(31, 26, 61, 0.94),
      rgba(18, 14, 39, 0.98));
}
@media (max-width: 1280px) {
  .lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-mode-edge,
html[data-reduced-motion=true] .lobby-overlay.lobby-stitch-exact .stitch-mode-edge {
  animation: none !important;
}
@keyframes stitchBorderOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-root {
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(38, 26, 74, 0.8) 0%,
      rgba(10, 11, 20, 0.98) 60%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.03)"/></svg>') repeat;
}
.lobby-overlay.lobby-stitch-exact .glass-panel {
  background: rgba(18, 22, 41, 0.45) !important;
  backdrop-filter: blur(28px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(120%) !important;
  border: 1px solid rgba(135, 175, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px;
}
.lobby-overlay.lobby-stitch-exact .btn-neon-glow {
  background:
    linear-gradient(
      135deg,
      #a16bff,
      #4d8aff) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 24px rgba(161, 107, 255, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  border-radius: 99px !important;
  transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}
.lobby-overlay.lobby-stitch-exact .btn-neon-glow:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 36px rgba(161, 107, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
  filter: brightness(1.15);
}
.lobby-overlay.lobby-stitch-exact .stitch-task-bar {
  background: rgba(0, 0, 0, 0.4) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-task-fill {
  box-shadow: 0 0 10px currentColor !important;
  position: relative;
  overflow: hidden;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lobby-overlay.lobby-stitch-exact .stitch-task-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  animation: stitchTaskSweep 2s linear infinite;
}
@keyframes stitchTaskSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-resource-chip {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(135, 175, 255, 0.1) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05);
}
.lobby-overlay.lobby-stitch-exact .stitch-settings-section--social {
  display: grid;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-social-summary {
  margin-bottom: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-social-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.lobby-overlay.lobby-stitch-exact .stitch-social-search-field {
  margin: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-social-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lobby-overlay.lobby-stitch-exact .stitch-social-actions-inline .stitch-ghost-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
}
@media (min-width: 1025px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: none;
    padding: 12px 14px 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-scale-frame {
    flex: 1 1 auto;
    min-height: 0;
    gap: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-topbar {
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-resource-chip {
    min-width: 148px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-rename-btn span,
  .lobby-overlay.lobby-stitch-exact .stitch-auth-btn-label {
    max-width: 132px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-left-col {
    min-height: 0;
    min-width: 0;
    gap: 0;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-card {
    height: 100%;
    grid-template-rows: auto auto auto minmax(138px, 1fr) auto auto;
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
    min-height: 170px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-right-col {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "mode rail" "cta rail";
    gap: 12px;
    align-items: stretch;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel {
    grid-area: mode;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel .stitch-panel-head {
    margin-bottom: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(132px, 1fr);
    gap: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card {
    min-height: 132px;
    padding: 14px;
    border-radius: 22px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card strong {
    font-size: clamp(22px, 1.8vw, 34px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card p {
    max-width: 18ch;
    font-size: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-info-grid {
    grid-area: rail;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    align-content: stretch;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel {
    min-height: 0;
    padding: 11px;
    display: flex;
    flex-direction: column;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head {
    margin-bottom: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-list {
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-icon {
    width: 28px;
    height: 28px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-copy strong,
  .lobby-overlay.lobby-stitch-exact .stitch-task-progress,
  .lobby-overlay.lobby-stitch-exact .stitch-friend-item strong,
  .lobby-overlay.lobby-stitch-exact .stitch-friend-item small {
    font-size: 11px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-friend-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-friend-item {
    padding: 8px 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-friend-avatar {
    width: 32px;
    height: 32px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-cta-row {
    grid-area: cta;
    display: block;
    margin: 0;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta {
    width: 100%;
    min-height: 62px;
    border-radius: 24px !important;
    font-size: 26px;
    letter-spacing: 0.08em;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-season-card,
  .lobby-overlay.lobby-stitch-exact .stitch-invite-strip,
  .lobby-overlay.lobby-stitch-exact .stitch-activity-row,
  .lobby-overlay.lobby-stitch-exact .stitch-dock {
    display: none !important;
  }
}
@media (min-width: 1025px) and (max-height: 860px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    padding: 10px 12px 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-scale-frame,
  .lobby-overlay.lobby-stitch-exact .stitch-main,
  .lobby-overlay.lobby-stitch-exact .stitch-right-col,
  .lobby-overlay.lobby-stitch-exact .stitch-info-grid {
    gap: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main {
    grid-template-columns: 274px minmax(0, 1fr);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-right-col {
    grid-template-columns: minmax(0, 1fr) 252px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-card,
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel,
  .lobby-overlay.lobby-stitch-exact .stitch-panel {
    padding: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
    min-height: 154px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-core {
    width: 108px;
    height: 108px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
    grid-auto-rows: minmax(118px, 1fr);
    gap: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card {
    min-height: 118px;
    padding: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta {
    min-height: 56px;
    font-size: 23px;
  }
}
@media (min-width: 1025px) and (max-height: 740px) {
  .lobby-overlay.lobby-stitch-exact .stitch-root {
    padding: 8px 10px 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-topbar {
    gap: 8px;
    padding: 8px 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-brand-title {
    font-size: clamp(24px, 1.7vw, 34px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main {
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-right-col {
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: 8px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-card,
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel,
  .lobby-overlay.lobby-stitch-exact .stitch-panel {
    padding: 9px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-profile-name {
    font-size: clamp(24px, 1.8vw, 32px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
    min-height: 136px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-core {
    width: 96px;
    height: 96px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
    gap: 8px;
    grid-auto-rows: minmax(102px, 1fr);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card {
    min-height: 102px;
    padding: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card strong {
    font-size: clamp(19px, 1.45vw, 28px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card p,
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card-kicker,
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head small {
    font-size: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-list {
    gap: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-row {
    gap: 6px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-task-icon {
    width: 24px;
    height: 24px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main-cta {
    min-height: 52px;
    font-size: 21px;
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(4, 9, 20, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.lobby-overlay.lobby-stitch-exact[data-active-drawer=tasks] .stitch-drawer-backdrop,
.lobby-overlay.lobby-stitch-exact[data-active-drawer=friends] .stitch-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.lobby-overlay.lobby-stitch-exact .stitch-side-drawer {
  position: absolute;
  top: 76px;
  bottom: 96px;
  width: 320px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  gap: 12px;
  background:
    linear-gradient(
      180deg,
      rgba(14, 21, 38, 0.85),
      rgba(7, 11, 22, 0.95)) !important;
  border: 1px solid rgba(82, 115, 255, 0.25) !important;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(36px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(140%) !important;
  border-radius: 20px;
  transition: transform 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-drawer-content {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}
.lobby-overlay.lobby-stitch-exact .stitch-drawer-content::-webkit-scrollbar {
  display: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-side-drawer.is-left {
  left: 20px;
  transform: translateX(-120%) scale(0.95);
  transform-origin: left center;
}
.lobby-overlay.lobby-stitch-exact .stitch-side-drawer.is-right {
  right: 20px;
  transform: translateX(120%) scale(0.95);
  transform-origin: right center;
}
.lobby-overlay.lobby-stitch-exact[data-active-drawer=tasks] .stitch-side-drawer.is-left[data-drawer-name=tasks] {
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.lobby-overlay.lobby-stitch-exact[data-active-drawer=friends] .stitch-side-drawer.is-right[data-drawer-name=friends] {
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.lobby-overlay.lobby-stitch-exact .stitch-side-drawer .stitch-panel-head {
  border-bottom: 1px solid color-mix(in srgb, var(--stitch-skin-a, rgba(255,255,255,0.1)) 40%, transparent);
  padding-bottom: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-floating-dock {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(14, 22, 42, 0.55) !important;
  border-radius: 99px;
  border: 1px solid rgba(135, 175, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
}
.lobby-overlay.lobby-stitch-exact .stitch-dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  height: 56px;
  border-radius: 16px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: none;
  transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1);
  cursor: pointer;
}
.lobby-overlay.lobby-stitch-exact .stitch-dock-btn span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-dock-symbol {
  font-size: 26px;
  pointer-events: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.lobby-overlay.lobby-stitch-exact .stitch-dock-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.lobby-overlay.lobby-stitch-exact .stitch-dock-btn:hover .stitch-dock-symbol {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}
.lobby-overlay.lobby-stitch-exact .stitch-dock-btn:active {
  transform: translateY(-1px) scale(0.95);
}
.lobby-overlay.lobby-stitch-exact .stitch-topbar.stitch-hud-top {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: center;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  padding-left: 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-server-ping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 8px;
  border-radius: 4px 10px 4px 10px;
  border: 1px solid rgba(0, 255, 128, 0.2);
  box-shadow: 0 0 10px rgba(0, 255, 128, 0.1);
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-server-ping .ping-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff80;
  box-shadow: 0 0 8px #00ff80;
  animation: pingFlash 2s infinite ease-in-out;
}
@keyframes pingFlash {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.8);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-server-ping .ping-ms {
  font-size: 10px;
  font-weight: 700;
  color: #4df0a9;
  letter-spacing: 0.05em;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-brand .stitch-brand-title {
  font-size: 32px;
  font-style: italic;
  font-weight: 900;
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #a3bfff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(135, 175, 255, 0.4));
  letter-spacing: -0.02em;
  transform: skewX(-8deg);
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-resources {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-resources .stitch-resource-chip {
  background:
    linear-gradient(
      90deg,
      rgba(8, 12, 28, 0.7),
      rgba(4, 8, 18, 0.9)) !important;
  border-radius: 4px 16px 4px 16px;
  border: 1px solid rgba(82, 115, 255, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 8px 20px rgba(0, 0, 0, 0.4) !important;
  min-width: 160px;
  position: relative;
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-resources .stitch-resource-chip::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.15),
      transparent);
  transform: skewX(-20deg);
  animation: hudGlint 6s infinite;
}
@keyframes hudGlint {
  0%, 80% {
    transform: skewX(-20deg) translateX(0);
  }
  100% {
    transform: skewX(-20deg) translateX(400%);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-btn,
.lobby-overlay.lobby-stitch-exact .stitch-hud-btn-text {
  background: transparent;
  border: none;
  outline: none;
  color: #aebce6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  cursor: pointer;
  font-weight: 700;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-btn-text {
  padding: 6px 14px;
  border-radius: 4px 14px 4px 14px;
  border: 1px solid transparent;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-btn-text--accent {
  color: #ffd874;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-btn:hover,
.lobby-overlay.lobby-stitch-exact .stitch-hud-btn-text:hover {
  color: #ffffff;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
  transform: translateY(-2px) scale(1.05);
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-btn-text:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-btn-symbol {
  font-size: 24px;
}
.lobby-overlay.lobby-stitch-exact .stitch-cta-row {
  position: absolute;
  right: 42px;
  bottom: 32px;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-main-cta {
  pointer-events: auto;
  width: auto;
  padding: 0 46px;
  box-shadow: 0 20px 48px rgba(161, 107, 255, 0.45), inset 0 2px 2px rgba(255, 255, 255, 0.4) !important;
  border-radius: 999px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.lobby-overlay.lobby-stitch-exact .stitch-main-cta > span {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card {
  border-radius: 18px;
  background:
    linear-gradient(
      150deg,
      rgba(20, 26, 46, 0.5),
      rgba(12, 16, 28, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-bg-icon {
  position: absolute;
  right: -32px;
  bottom: -46px;
  font-size: 220px;
  color: var(--flow-secondary);
  opacity: 0.05;
  transform: rotate(-10deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  filter: drop-shadow(0 0 30px var(--flow-primary));
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.018) 0,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px,
      transparent 6px);
  opacity: 0.9;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-glow-orb {
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background:
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--flow-primary) 100%, white) 0%,
      transparent 60%);
  opacity: 0.12;
  filter: blur(48px);
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active .stitch-mode-bg-icon {
  opacity: 0.15;
  transform: rotate(0deg) scale(1.1) translateY(-14px);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active .stitch-mode-glow-orb {
  opacity: 0.45;
  transform: scale(1.3) translate(-30px, -30px);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active {
  background:
    linear-gradient(
      150deg,
      rgba(28, 44, 88, 0.7),
      rgba(16, 24, 48, 0.95));
  box-shadow:
    inset 0 0 40px color-mix(in srgb, var(--flow-primary) 30%, transparent),
    inset 0 2px 2px rgba(255, 255, 255, 0.1),
    0 14px 44px rgba(0, 0, 0, 0.6);
}
.lobby-overlay.lobby-stitch-exact .stitch-main {
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.lobby-overlay.lobby-stitch-exact .stitch-right-col,
.lobby-overlay.lobby-stitch-exact .stitch-stage-col {
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-sidebar {
  position: relative;
  width: 64px;
  flex-shrink: 0;
  transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 10;
  margin-right: 12px;
  align-self: stretch;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-sidebar:hover {
  width: 392px;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-drawer {
  position: absolute;
  top: 0;
  left: 0;
  width: 392px;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      rgba(10, 15, 30, 0.8) 0%,
      rgba(10, 15, 30, 0) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-left: 2px solid rgba(82, 115, 255, 0.6);
  display: flex;
  overflow: hidden;
  min-height: 100%;
  transform: translateX(calc(-100% + 64px));
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), background 0.3s;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-sidebar:hover .stitch-tac-drawer {
  transform: translateX(0);
  background:
    linear-gradient(
      90deg,
      rgba(10, 15, 30, 0.95) 0%,
      rgba(15, 25, 45, 0.6) 100%);
  box-shadow: 20px 0 40px rgba(0, 0, 0, 0.5);
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-collapsed {
  width: 64px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.4);
  order: 2;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-badge {
  background: var(--flow-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-online-dot {
  width: 8px;
  height: 8px;
  background-color: #00ff80;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff80, inset 0 0 4px #ffffff;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-vert-name {
  writing-mode: vertical-lr;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-expanded {
  flex: 1;
  order: 1;
  padding: 24px 22px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-sidebar:hover .stitch-tac-expanded {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.1s;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--flow-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-kicker-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--flow-secondary);
  border-radius: 50%;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-name {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-model-stage {
  position: relative;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-model-stage .stitch-ball-stage {
  min-height: 198px;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-model-stage .stitch-ball-core {
  width: 146px;
  height: 146px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.16),
    inset -18px -22px 34px rgba(14, 23, 43, 0.24),
    0 0 56px color-mix(in srgb, var(--stitch-skin-glow, var(--stitch-skin-a)) 68%, transparent);
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-model-stage .stitch-ball-skin-name {
  bottom: 10px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-profile {
  display: grid;
  gap: 12px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(129, 236, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(13, 22, 40, 0.92),
      rgba(8, 15, 30, 0.82)),
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--stitch-skin-a) 24%, transparent),
      transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 14px 28px rgba(0, 0, 0, 0.16);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-profile-head {
  display: grid;
  gap: 4px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-profile-head small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--stitch-skin-a) 72%, white 20%);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-profile-head strong {
  font-size: 20px;
  line-height: 1;
  color: #f5fbff;
  letter-spacing: -0.03em;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-profile-head span {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(224, 237, 255, 0.72);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-spectrum {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.16);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-swatch--a {
  background: var(--stitch-skin-a);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-swatch--b {
  background: var(--stitch-skin-b);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-spectrum-copy {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(237, 246, 255, 0.84);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-meta-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-meta-card small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(198, 219, 244, 0.54);
  text-transform: uppercase;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-meta-card strong {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-radar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-radar small {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.05em;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-radar strong {
  font-size: 18px;
  font-weight: 900;
  font-family:
    "Courier New",
    Courier,
    monospace;
  color: #ffffff;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-radar.is-accent strong {
  color: #ffd874;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-radar span {
  font-size: 11px;
  color: #4df0a9;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-action-btn {
  margin-top: 2px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--stitch-skin-a) 20%, rgba(255, 255, 255, 0.03)),
      rgba(255, 255, 255, 0.04));
  border: 1px solid color-mix(in srgb, var(--stitch-skin-a) 34%, rgba(255, 255, 255, 0.18));
  color: #fff;
  padding: 13px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  border-radius: 14px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer {
  margin-top: auto;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer-head {
  margin-bottom: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer-head strong {
  font-size: 12px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer-head small {
  font-size: 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer .stitch-skin-list {
  gap: 8px;
}
.lobby-overlay.lobby-stitch-exact .stitch-skin-drawer .stitch-skin-chip {
  min-height: 38px;
  justify-content: flex-start;
  padding: 0 10px;
  font-size: 10px;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-top: 2vh;
  padding-bottom: 120px;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  perspective: 1400px;
  min-height: 480px;
  margin-top: 20px;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card {
  flex: 0 0 180px;
  height: 380px;
  transform: rotateY(18deg) scale(0.85) translateZ(-80px);
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0.5;
  filter: grayscale(40%) brightness(0.7);
  overflow: hidden;
  cursor: pointer;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card:not(.is-active) strong,
.lobby-overlay.lobby-stitch-exact .stitch-mode-card:not(.is-active) p,
.lobby-overlay.lobby-stitch-exact .stitch-mode-card:not(.is-active) .stitch-mode-card-kicker,
.lobby-overlay.lobby-stitch-exact .stitch-mode-card:not(.is-active) .stitch-mode-card-status,
.lobby-overlay.lobby-stitch-exact .stitch-mode-card:not(.is-active) .stitch-mode-glow-orb {
  opacity: 0;
  transition: opacity 0.3s;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active {
  flex: 0 0 580px;
  height: 450px;
  transform: rotateY(0deg) scale(1) translateZ(0);
  opacity: 1;
  filter: grayscale(0%) brightness(1);
  z-index: 5;
  outline: 1px solid rgba(82, 115, 255, 0.3);
  outline-offset: 8px;
  cursor: default;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active strong {
  font-size: 40px;
  letter-spacing: 0.05em;
  margin-top: auto;
  opacity: 1;
  transition: all 0.6s 0.1s;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  opacity: 1;
  transition: all 0.6s 0.15s;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 440px;
  background:
    linear-gradient(
      180deg,
      rgba(8, 12, 28, 0.75),
      rgba(4, 6, 15, 0.95));
  backdrop-filter: blur(48px) saturate(120%);
  -webkit-backdrop-filter: blur(48px) saturate(120%);
  z-index: 100;
  display: flex;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s;
  opacity: 0;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-drawer-backdrop.is-active {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: grayscale(80%) blur(4px) !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-drawer.is-left {
  left: 0;
  transform: translateX(-100%);
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-drawer.is-left.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-drawer.is-right {
  right: 0;
  transform: translateX(100%);
  flex-direction: row;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-drawer.is-right.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-glow-edge {
  width: 2px;
  height: 100%;
  background:
    linear-gradient(
      to bottom,
      transparent,
      #5273ff,
      transparent);
  box-shadow: 0 0 20px 2px rgba(82, 115, 255, 0.8);
  flex-shrink: 0;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-content {
  flex: 1;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow-y: auto;
  overflow-x: hidden;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-headline strong {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.05em;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-kicker {
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 800;
  color: var(--flow-secondary);
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 20px;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-counter {
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  font-weight: 800;
  font-family: monospace;
  color: #ffd874;
  border-radius: 4px;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-link {
  background: none;
  border: none;
  outline: none;
  color: #4df0a9;
  font-size: 12px;
  cursor: pointer;
  font-weight: 700;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-link:hover {
  color: #fff;
  text-shadow: 0 0 8px #4df0a9;
}
.lobby-overlay.lobby-stitch-exact .stitch-z4-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lobby-overlay.lobby-stitch-exact .stitch-floating-dock {
  display: none !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-base-tray {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160px;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .stitch-base-tray::before,
.lobby-overlay.lobby-stitch-exact .stitch-base-tray::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-base-tray::before {
  left: 2.6%;
  right: 2.6%;
  top: 14px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(65, 95, 255, 0.1) 0 4%,
      transparent 4.2% 15%,
      rgba(76, 236, 255, 0.26) 15.2% 30%,
      transparent 30.2% 70%,
      rgba(76, 236, 255, 0.26) 70.2% 85%,
      transparent 85.2% 96%,
      rgba(65, 95, 255, 0.1) 96.2% 100%);
  box-shadow: 0 0 12px rgba(76, 236, 255, 0.22);
  opacity: 0.95;
}
.lobby-overlay.lobby-stitch-exact .stitch-base-tray::after {
  left: 3.2%;
  right: 3.2%;
  top: 26px;
  bottom: 12px;
  background:
    linear-gradient(
      90deg,
      rgba(76, 236, 255, 0.06),
      transparent 10% 90%,
      rgba(87, 110, 255, 0.08)),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      transparent 26%);
  clip-path: polygon(2% 0, 98% 0, 100% 20%, 100% 100%, 0 100%, 0 20%);
  border: 1px solid rgba(104, 134, 255, 0.12);
  opacity: 0.85;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-plate {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(255, 255, 255, 0.015) 5px,
      rgba(255, 255, 255, 0.015) 8px),
    linear-gradient(
      to top,
      rgba(5, 8, 20, 0.98) 20%,
      rgba(5, 8, 20, 0.6) 60%,
      transparent);
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-plate::before,
.lobby-overlay.lobby-stitch-exact .stitch-tray-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-plate::before {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 168px,
      rgba(110, 136, 255, 0.08) 168px 170px,
      transparent 170px 336px),
    linear-gradient(
      90deg,
      transparent 0 12%,
      rgba(88, 120, 255, 0.12) 12.1% 12.4%,
      transparent 12.5% 29%,
      rgba(88, 120, 255, 0.1) 29.1% 29.35%,
      transparent 29.45% 68%,
      rgba(0, 242, 255, 0.12) 68.1% 68.35%,
      transparent 68.45% 100%);
  opacity: 0.7;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-plate::after {
  inset: 18px 6% 10px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(94, 114, 255, 0.14),
      transparent 22%),
    linear-gradient(
      90deg,
      transparent 32%,
      rgba(90, 240, 255, 0.12) 32.2% 32.4%,
      transparent 32.6% 67%,
      rgba(94, 114, 255, 0.1) 67.2% 67.4%,
      transparent 67.6%),
    repeating-linear-gradient(
      90deg,
      transparent 0 144px,
      rgba(255, 255, 255, 0.045) 144px 146px,
      transparent 146px 288px);
  mask:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.92),
      transparent 86%);
  opacity: 0.7;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-glowline::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(96, 238, 255, 0.55),
      transparent);
  opacity: 0.7;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-glowline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(82, 115, 255, 0.8),
      transparent);
  box-shadow: 0 0 15px rgba(82, 115, 255, 0.9);
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-nav {
  display: flex;
  gap: 60px;
  padding-bottom: 28px;
  position: relative;
  z-index: 41;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-btn {
  background: transparent;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-symbol {
  font-size: 38px;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  font-family:
    "Material Symbols Rounded",
    "Material Icons",
    sans-serif !important;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-btn span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-family: monospace;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-btn:hover {
  color: #fff;
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-btn:hover .stitch-tray-symbol {
  transform: translateY(-8px) scale(1.2);
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.7));
  color: var(--flow-secondary);
}
.lobby-overlay.lobby-stitch-exact .stitch-cta-row {
  display: none !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-core-launch-stage {
  position: absolute;
  right: 80px;
  bottom: 140px;
  z-index: 60;
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-btn {
  position: relative;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  width: 280px;
  height: 84px;
  clip-path: polygon(10% 0, 100% 0, 100% 75%, 90% 100%, 0 100%, 0 25%);
  transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-btn:active {
  transform: scale(0.92) translateZ(-20px);
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-border {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(82, 115, 255, 0.9),
      rgba(0, 255, 128, 0.9));
  z-index: 1;
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-inner {
  position: absolute;
  inset: 2px;
  background: rgba(10, 15, 30, 0.95);
  clip-path: polygon(10% 0, 100% 0, 100% 75%, 90% 100%, 0 100%, 0 25%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-btn:hover .stitch-launch-inner {
  background: rgba(82, 115, 255, 0.2);
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 160%;
  background:
    radial-gradient(
      circle,
      rgba(82, 115, 255, 0.6) 0%,
      transparent 60%);
  filter: blur(24px);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  animation: launchPulse 2s infinite alternate;
}
@keyframes launchPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.7;
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-text {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.25em;
  text-shadow: 0 0 12px rgba(82, 115, 255, 1);
  transform: skewX(-12deg);
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-ms {
  font-size: 11px;
  color: #00ff80;
  letter-spacing: 0.3em;
  font-family: monospace;
  margin-top: 4px;
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-flare {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent);
  transform: skewX(-20deg);
  z-index: 3;
  pointer-events: none;
  animation: launchFlare 3s infinite 2s;
}
@keyframes launchFlare {
  0%, 75% {
    transform: skewX(-20deg) translateX(0);
  }
  100% {
    transform: skewX(-20deg) translateX(500%);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-top {
  animation: hudDropIn 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
}
@keyframes hudDropIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-sidebar {
  animation: tacSlideIn 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.15s both;
}
@keyframes tacSlideIn {
  0% {
    transform: translateX(-150px);
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-base-tray {
  animation: trayRiseUp 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.3s both;
}
@keyframes trayRiseUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
    filter: drop-shadow(0 20px 20px rgba(82, 115, 255, 0.8));
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-panel {
  animation: stageZoomIn 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.4s both;
}
@keyframes stageZoomIn {
  0% {
    transform: scale(1.6) translateZ(300px);
    opacity: 0;
    filter: blur(40px);
  }
  100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
    filter: blur(0);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-core-launch-stage {
  animation: coreLaunchIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}
@keyframes coreLaunchIn {
  0% {
    transform: scale(0.2) translateX(300px) rotate(40deg);
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    transform: scale(1) translateX(0) rotate(0deg);
    opacity: 1;
    filter: blur(0);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-asset-val,
.lobby-overlay.lobby-stitch-exact .stitch-z4-counter,
.lobby-overlay.lobby-stitch-exact .stitch-main-cta span,
.lobby-overlay.lobby-stitch-exact .stitch-tray-btn span,
.lobby-overlay.lobby-stitch-exact .stitch-launch-text,
.lobby-overlay.lobby-stitch-exact .stitch-launch-ms,
.lobby-overlay.lobby-stitch-exact .stitch-profile-kicker,
.lobby-overlay.lobby-stitch-exact .stitch-z4-kicker {
  font-family:
    "Teko",
    "Impact",
    sans-serif !important;
  letter-spacing: 0.08em;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-assets {
  border-radius: 0 !important;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active strong {
  font-weight: 900 !important;
  transform: skewX(-8deg);
  letter-spacing: -0.02em;
}
.lobby-overlay.lobby-stitch-exact .stitch-hud-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #10B981;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 12px #10B981;
  animation: pingBlink 2s infinite;
}
@keyframes pingBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.6);
  }
}
.lobby-overlay.lobby-stitch-exact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px);
  background-size: 100px 100px;
  background-position: center bottom;
  mask-image:
    radial-gradient(
      circle at center 60%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 0) 80%);
  -webkit-mask-image:
    radial-gradient(
      circle at center 60%,
      rgba(0, 0, 0, 1) 10%,
      rgba(0, 0, 0, 0) 80%);
}
.lobby-overlay.lobby-stitch-exact .stitch-task-row,
.lobby-overlay.lobby-stitch-exact .stitch-friend-row {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  position: relative;
  padding: 16px 12px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
}
.lobby-overlay.lobby-stitch-exact .stitch-tac-text,
.lobby-overlay.lobby-stitch-exact .stitch-profile-name {
  font-size: 15px !important;
  letter-spacing: 0.3em !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-task-row::before,
.lobby-overlay.lobby-stitch-exact .stitch-friend-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #3B82F6;
  box-shadow: 0 0 12px #3B82F6;
  transform: scaleY(0);
  transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: center;
  z-index: 10;
}
.lobby-overlay.lobby-stitch-exact .stitch-task-row:hover,
.lobby-overlay.lobby-stitch-exact .stitch-friend-row:hover {
  background:
    linear-gradient(
      90deg,
      rgba(59, 130, 246, 0.15),
      transparent) !important;
  padding-left: 24px !important;
  border-bottom-color: transparent !important;
}
.lobby-overlay.lobby-stitch-exact .stitch-task-row:hover::before,
.lobby-overlay.lobby-stitch-exact .stitch-friend-row:hover::before {
  transform: scaleY(1);
}
.lobby-overlay.lobby-stitch-exact .stitch-mode-card,
.lobby-overlay.lobby-stitch-exact .stitch-z4-drawer,
.lobby-overlay.lobby-stitch-exact .stitch-launch-btn {
  will-change:
    transform,
    opacity,
    filter;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-btn {
  animation: ctaBreath 3s ease-in-out infinite alternate !important;
}
@keyframes ctaBreath {
  0% {
    filter: drop-shadow(0 0 8px rgba(82, 115, 255, 0.4));
  }
  100% {
    filter: drop-shadow(0 0 24px rgba(82, 115, 255, 0.9));
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-launch-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      transparent 20%,
      rgba(255, 255, 255, 0.8) 50%,
      transparent 80%);
  transform: translateX(-150%) skewX(-15deg);
  animation: scanLightWipe 4s cubic-bezier(0.19, 1, 0.22, 1) infinite;
  z-index: 10;
}
@keyframes scanLightWipe {
  0%, 60% {
    transform: translateX(-150%) skewX(-15deg);
  }
  100% {
    transform: translateX(150%) skewX(-15deg);
  }
}
.lobby-overlay.lobby-stitch-exact .stitch-tray-btn:active,
.lobby-overlay.lobby-stitch-exact .stitch-link-btn:active {
  transform: scale(0.9) translateY(4px);
  transition: transform 0.05s;
}
@media (min-width: 1025px) {
  .lobby-overlay.lobby-stitch-exact {
    --stitch-bottom-wall-offset: 389px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-topbar.stitch-hud-top {
    position: relative;
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 92px;
    padding: 10px 18px 0 10px;
    gap: 16px;
    overflow: visible;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-hud-brand {
    flex: 0 0 auto;
    gap: 8px;
    padding-left: 6px;
    min-width: 0;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-hud-brand .stitch-brand-title {
    display: block;
    white-space: nowrap;
    line-height: 1;
    font-size: clamp(32px, 2.2vw, 44px);
    letter-spacing: -0.04em;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-hud-resources {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    justify-content: center;
    min-width: 590px;
    max-width: 680px;
    padding: 8px 12px;
    gap: 10px;
    z-index: 2;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-hud-resources .stitch-resource-chip {
    min-width: 0 !important;
    flex: 0 0 auto;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-hud-resources .stitch-resource-chip:first-of-type {
    width: 160px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-hud-resources .stitch-resource-chip:nth-of-type(2) {
    width: 320px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-resource-copy strong {
    white-space: nowrap;
    font-size: clamp(20px, 1.7vw, 31px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-top-actions,
  .lobby-overlay.lobby-stitch-exact .stitch-hud-actions {
    flex: 0 0 auto;
    margin-left: auto;
    padding-top: 14px;
    gap: 14px;
    white-space: nowrap;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-hud-btn-text,
  .lobby-overlay.lobby-stitch-exact .stitch-auth-btn {
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-hud-btn-text span,
  .lobby-overlay.lobby-stitch-exact .stitch-auth-btn-label {
    white-space: nowrap;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-auth-btn-label {
    max-width: none !important;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-main {
    gap: 30px !important;
    padding-top: 20px;
    align-items: stretch;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-left-col {
    flex: 0 0 404px !important;
    width: 404px;
    min-width: 404px;
    min-height: calc(100dvh - 218px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-sidebar {
    width: 404px !important;
    min-width: 404px;
    margin-right: 0;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-sidebar:hover {
    width: 404px !important;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-drawer {
    position: relative;
    width: 100%;
    height: 100%;
    transform: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(11, 18, 36, 0.96),
        rgba(9, 14, 28, 0.9)),
      linear-gradient(
        90deg,
        rgba(79, 107, 255, 0.08),
        transparent 20%);
    border-left: 2px solid rgba(82, 115, 255, 0.8);
    border-right: 1px solid rgba(129, 236, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.04), 18px 0 40px rgba(0, 0, 0, 0.28);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-sidebar:hover .stitch-tac-drawer {
    transform: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(11, 18, 36, 0.96),
        rgba(9, 14, 28, 0.9)),
      linear-gradient(
        90deg,
        rgba(79, 107, 255, 0.08),
        transparent 20%);
    box-shadow: inset 0 0 0 1px rgba(129, 236, 255, 0.04), 18px 0 40px rgba(0, 0, 0, 0.28);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-collapsed {
    width: 72px;
    padding: 18px 0;
    gap: 18px;
    background: rgba(0, 0, 0, 0.24);
    border-right: 1px solid rgba(129, 236, 255, 0.08);
    box-shadow: inset -12px 0 24px rgba(0, 0, 0, 0.36);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-expanded {
    padding: 24px 24px 24px 28px;
    gap: 18px;
    opacity: 1;
    transform: none;
    min-height: 100%;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-sidebar:hover .stitch-tac-expanded {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-kicker {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-name {
    font-size: clamp(34px, 2vw, 40px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-meta {
    gap: 12px;
    font-size: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-ball-stage {
    min-height: 212px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-model-stage .stitch-ball-core {
    width: 152px;
    height: 152px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-skin-profile {
    padding: 16px 16px 18px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-skin-profile-head strong {
    font-size: 21px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-skin-meta-card strong {
    font-size: 12px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-skin-drawer {
    padding-top: 14px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-skin-drawer .stitch-skin-chip {
    min-height: 40px;
    font-size: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-data-grid {
    gap: 10px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tac-radar strong {
    font-size: clamp(28px, 1.8vw, 34px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-right-col,
  .lobby-overlay.lobby-stitch-exact .stitch-stage-col {
    position: relative;
    overflow: visible;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel {
    max-width: 1340px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 0 164px !important;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel .stitch-panel-head {
    margin: 0 10px 20px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head strong {
    font-size: clamp(28px, 1.55vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-panel-head small {
    font-size: clamp(14px, 0.92vw, 16px);
    line-height: 1.45;
    letter-spacing: 0.01em;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-panel .stitch-mode-status {
    font-size: 14px;
    padding: 8px 14px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-grid {
    min-height: 474px;
    margin-top: 0;
    padding-right: 296px;
    gap: 20px !important;
    align-items: stretch;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card {
    justify-items: start;
    height: 388px;
    border-radius: 24px !important;
    transform: rotateY(15deg) scale(0.9) translateZ(-58px) !important;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card:not(.is-active) .stitch-mode-icon {
    position: absolute;
    top: 22px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    justify-self: auto;
    color: rgba(210, 223, 245, 0.16);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    flex-basis: 612px !important;
    height: 456px;
    padding: 32px 28px 26px !important;
    transform: rotateY(0deg) scale(1) translateZ(0) !important;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active .stitch-mode-icon {
    position: absolute;
    top: 18px;
    right: 22px;
    left: auto;
    transform: none;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active .stitch-mode-card-status {
    position: absolute;
    top: 62px;
    right: 18px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active .stitch-mode-card-kicker {
    position: absolute;
    top: 96px;
    left: 28px;
    font-size: 13px;
    letter-spacing: 0.04em;
    opacity: 1;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active strong {
    margin-top: auto;
    font-size: clamp(52px, 4vw, 66px) !important;
    line-height: 0.92;
    letter-spacing: -0.03em;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-mode-card.is-active p {
    margin-top: 8px;
    max-width: 16ch;
    font-size: 14px !important;
    line-height: 1.35;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-core-launch-stage {
    right: 86px !important;
    bottom: calc(92px - var(--stitch-bottom-wall-offset, 0px)) !important;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-launch-btn {
    width: 274px;
    height: 84px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-launch-text {
    font-size: 24px;
    letter-spacing: 0.2em;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-base-tray {
    bottom: calc(-1 * var(--stitch-bottom-wall-offset, 0px));
    height: 238px;
    align-items: flex-end;
    padding: 12px clamp(240px, 18vw, 340px) 0 clamp(72px, 5vw, 132px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tray-nav {
    width: min(100%, 1160px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: clamp(24px, 2vw, 40px);
    padding-bottom: 0;
    transform: translate(-54px, 18px);
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tray-btn {
    min-width: 0;
    width: 100%;
    min-height: 108px;
    padding: 14px 18px 8px;
    justify-content: center;
    gap: 16px;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tray-symbol {
    font-size: clamp(34px, 2.2vw, 44px) !important;
    line-height: 1;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-tray-btn span:not(.stitch-tray-symbol) {
    font-size: clamp(14px, 0.95vw, 17px) !important;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
  }
  .lobby-overlay.lobby-stitch-exact .stitch-inline-tip {
    display: none !important;
  }
  .lobby-overlay.lobby-stitch-exact[data-active-drawer=tasks] .stitch-drawer-backdrop,
  .lobby-overlay.lobby-stitch-exact[data-active-drawer=friends] .stitch-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .lobby-overlay.lobby-stitch-exact[data-active-drawer=tasks] .stitch-z4-drawer.is-left {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  .lobby-overlay.lobby-stitch-exact[data-active-drawer=friends] .stitch-z4-drawer.is-right {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
}
/*# sourceMappingURL=app.css.map */