/* V1.105 — lobby create/join requests are one visible, bounded transaction. */
body:not(.maintenance-mode) .app.solo .lobby-panel[data-room-transaction]:not([data-room-transaction="idle"]) {
  --lobby-transaction-accent: #77cfff;
}

body:not(.maintenance-mode) .app.solo .lobby-panel[data-room-transaction="practice"] {
  --lobby-transaction-accent: #f4ca68;
}

body:not(.maintenance-mode) .app.solo .lobby-panel button:is(#createBotRoom, #joinRoom, [data-mode])[data-pending="true"] {
  position: relative !important;
  isolation: isolate;
  cursor: wait !important;
  filter: saturate(0.88) brightness(0.96) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--lobby-transaction-accent) 58%, transparent),
    0 0 24px color-mix(in srgb, var(--lobby-transaction-accent) 30%, transparent) !important;
}

body:not(.maintenance-mode) .app.solo .lobby-panel button:is(#createBotRoom, #joinRoom, [data-mode])[data-pending="true"]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 5;
  top: 50% !important;
  right: 14px !important;
  width: 18px !important;
  height: 18px !important;
  margin: -9px 0 0 !important;
  border: 2px solid color-mix(in srgb, var(--lobby-transaction-accent) 32%, transparent) !important;
  border-top-color: var(--lobby-transaction-accent) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--lobby-transaction-accent) 44%, transparent) !important;
  animation: lobby-room-transaction-spin 760ms linear infinite !important;
  pointer-events: none;
}

body:not(.maintenance-mode) .app.solo .lobby-panel[data-room-transaction]:not([data-room-transaction="idle"]) :is(.mode-select button, #createBotRoom, #joinRoom):disabled:not([data-pending="true"]) {
  opacity: 0.52 !important;
  filter: grayscale(0.3) saturate(0.62) !important;
  cursor: wait !important;
}

body:not(.maintenance-mode) .app.solo #joinCode[data-room-code-state="ready"] {
  border-color: rgba(80, 191, 154, 0.82) !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 225, 178, 0.18),
    0 0 14px rgba(72, 187, 150, 0.14) !important;
}

body:not(.maintenance-mode) .app.solo #joinCode[data-room-code-state="invalid"] {
  border-color: rgba(226, 91, 91, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 124, 109, 0.22),
    0 0 16px rgba(211, 62, 62, 0.18) !important;
  animation: lobby-room-code-invalid 220ms ease-out both;
}

body:not(.maintenance-mode) .app.solo #joinCode:disabled {
  cursor: wait;
  opacity: 0.72;
}

@keyframes lobby-room-transaction-spin {
  to { transform: rotate(1turn); }
}

@keyframes lobby-room-code-invalid {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

@media (max-width: 560px) {
  body:not(.maintenance-mode) .app.solo .lobby-panel button:is(#createBotRoom, #joinRoom, [data-mode])[data-pending="true"]::after {
    right: 10px !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.maintenance-mode) .app.solo .lobby-panel button:is(#createBotRoom, #joinRoom, [data-mode])[data-pending="true"]::after,
  body:not(.maintenance-mode) .app.solo #joinCode[data-room-code-state="invalid"] {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  body:not(.maintenance-mode) .app.solo .lobby-panel button:is(#createBotRoom, #joinRoom, [data-mode])[data-pending="true"],
  body:not(.maintenance-mode) .app.solo #joinCode[data-room-code-state="ready"],
  body:not(.maintenance-mode) .app.solo #joinCode[data-room-code-state="invalid"] {
    border: 2px solid Highlight !important;
    box-shadow: none !important;
  }

  body:not(.maintenance-mode) .app.solo .lobby-panel button:is(#createBotRoom, #joinRoom, [data-mode])[data-pending="true"]::after {
    border-color: ButtonText !important;
    border-top-color: Highlight !important;
    box-shadow: none !important;
  }
}