:root {
  --purple: #ff5968;
  --purple2: #c92740;
  --teal: #ff6b78;
  --danger: #ff6472;
}

.lobby {
  background:
    radial-gradient(ellipse at 15% 65%, #3b1b25 0%, transparent 42%),
    radial-gradient(ellipse at 85% 18%, #29202b 0%, transparent 46%),
    #12151f;
}

.glow-a {
  background: #d63d53;
}

.glow-b {
  background: #8e3544;
}

.brand-mark,
.rail-brand {
  background: linear-gradient(135deg, #ff9aa1, #db354b);
}

.eyebrow,
.section-eyebrow,
.twinkle,
.section-title svg,
.screen-overlay svg,
.stage-helper svg {
  color: #ff8791;
}

.eyebrow-line {
  background: #f04b5d;
}

.rail-room.active {
  border-left-color: #ff5968;
  background: #40232b;
  color: #ff9aa1;
}

.room-symbol {
  background: #40232b;
  color: #ff8791;
}

.outline-button {
  border-color: #75414a;
  background: #38242a;
  color: #ffd8db;
}

.share-settings-button {
  border-color: #65404a;
  background: #302127;
}

.share-settings-button:hover,
.share-settings-button[aria-expanded='true'] {
  border-color: #ff5968;
}

.stage-scroll {
  scrollbar-color: #70434b transparent;
}

.camera-tile .avatar {
  background: linear-gradient(145deg, #713b46, #a24a58);
  color: #ffb4bb;
}

.stage-helper strong,
.chat-byline strong {
  color: #ff9aa1;
}

.share-tool {
  background: #742d3a;
}

.share-tool:hover {
  background: #963849;
}

.chat-intro-icon {
  color: #ff8791;
}

.chat-compose button {
  background: #a83247;
}

.chat-compose button:hover {
  background: #c34155;
}

.toast {
  border-color: #70434b;
}

/* Red and black brand system */
:root {
  --bg: #09090b;
  --rail: #0d0a0c;
  --panel: #160e11;
  --deep: #0f090b;
  --line: #3a1c23;
  --text: #fff5f5;
  --muted: #b79da2;
  --purple: #ff3b4e;
  --purple2: #b5152d;
  --teal: #ff6b78;
  --danger: #ff5968;
}

.brand-mark,
.join-logo,
.rail-brand {
  overflow: hidden;
  background: linear-gradient(135deg, #ff5262, #a90f28);
  color: #fff;
}

.brand-mark img,
.join-logo img,
.rail-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}

.brand-gamepad {
  display: inline-flex;
  width: 30px;
  height: 25px;
  margin: 0 2px;
  vertical-align: -4px;
}

.brand-gamepad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}

.group-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.group-entry-row .compact-button {
  min-width: 112px;
  height: 40px;
  align-self: stretch;
}

/* The base layout reserves the input with width: 0 for flexbox. In the
   red theme the row becomes a grid, so keep the field stretched across the
   first grid column instead of collapsing it to a few pixels. */
.group-entry-row input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 520px) {
  .group-entry-row {
    display: flex;
    flex-direction: row;
  }

  .group-entry-row input {
    width: 0;
    flex: 1;
  }
}

.lobby {
  background:
    radial-gradient(ellipse at 15% 65%, #3a111b 0%, transparent 42%),
    radial-gradient(ellipse at 85% 18%, #241116 0%, transparent 46%),
    #09090b;
}

.lobby-header,
.lobby-footer,
.join-card,
.call-header,
.side-panel,
.rail,
.toolbar,
.group-entry,
.stage,
.camera-tile,
.chat-panel,
.people-panel {
  border-color: #3a1c23;
}

.join-card {
  background: linear-gradient(135deg, #1c0f13, #120b0d 58%, #180c11);
  box-shadow: 0 25px 100px #000, 0 0 60px #d7193f18;
}

.join-card input,
.server-config input {
  border-color: #4d202b;
  background: #0f090b;
}

.join-card input:focus,
.server-config input:focus {
  border-color: #ff3b4e;
  box-shadow: 0 0 0 3px #ff3b4e18;
}

.primary-button,
.share-tool {
  color: #fff;
  background: linear-gradient(110deg, #ff5262, #c51b38);
  box-shadow: 0 7px 28px #d7193f30;
}

.primary-button:hover,
.share-tool:hover {
  background: linear-gradient(110deg, #ff6a77, #df2948);
}

.secondary-button,
.outline-button,
.tool-button,
.toolbar {
  background-color: #211014;
  border-color: #542431;
}

.secondary-button:hover,
.outline-button:hover,
.tool-button:hover {
  background-color: #35151e;
}

.entry-divider:before,
.entry-divider:after,
.section-divider,
.rail-divider {
  background: #48212a;
}

.group-entry-icon,
.room-symbol,
.rail-room.active,
.tab-count,
.share-settings-menu,
.invite-card {
  background: #35151e;
  color: #ff8791;
}

.stage,
.call-app {
  background-color: #0b090a;
}

.stage {
  background: radial-gradient(ellipse at 48% 16%, #241017 0%, #10090c 53%, #0b090a 100%);
}

.feature-chip,
.scene-floating,
.camera-tile,
.screen-tile {
  border-color: #51232e;
  background-color: #120b0e;
}

.camera-tile .avatar {
  background: linear-gradient(145deg, #ff5262, #951b34);
  color: #fff0f1;
}

.camera-tile:nth-child(4n+2) .avatar,
.camera-tile:nth-child(4n+3) .avatar,
.camera-tile:nth-child(4n+4) .avatar {
  background: linear-gradient(130deg, #df4054, #741326);
}

.chat-compose button,
.leave-tool {
  background: #b5152d;
}

.chat-compose button:hover,
.leave-tool:hover {
  background: #db2945;
}

/* Accounts replace the retired groups flow. */
.group-entry {
  display: none !important;
}

.auth-entry {
  margin: 20px 0 16px;
  padding: 15px;
  border: 1px solid #3a1c23;
  border-radius: 14px;
  background: #17182766;
}

.auth-entry-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.auth-entry-heading > div {
  min-width: 0;
  flex: 1;
}

.auth-entry-heading strong {
  display: block;
  color: #fff0f1;
  font-size: 12px;
}

.auth-entry-heading small {
  display: block;
  color: #b79da2;
  font-size: 10px;
  line-height: 1.4;
  margin-top: 4px;
}

.auth-entry form {
  display: grid;
  gap: 8px;
}

.auth-entry input {
  width: 100%;
  height: 40px;
  border: 1px solid #4d202b;
  border-radius: 9px;
  background: #0f090b;
  color: #fff5f5;
  padding: 0 11px;
  font-size: 11px;
}

.auth-entry input::placeholder {
  color: #9e777e;
}

.auth-entry input:focus {
  outline: none;
  border-color: #ff3b4e;
  box-shadow: 0 0 0 3px #ff3b4e18;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.auth-actions button {
  min-height: 38px;
  font-size: 10px;
}

.auth-actions #auth-logout {
  grid-column: 1 / -1;
}

.recent-rooms {
  margin: 0 0 16px;
  padding: 12px 15px;
  border: 1px solid #3a1c23;
  border-radius: 12px;
  background: #120b0e;
}

.recent-rooms-heading {
  color: #fff0f1;
}

.recent-rooms-heading button {
  color: #ff8791;
}

.recent-room-join,
.recent-room-copy {
  border-color: #51232e;
  background: #1c0f13;
  color: #ffe5e7;
}

.recent-room-join:hover,
.recent-room-copy:hover {
  border-color: #ff5968;
  background: #35151e;
}

.check-updates-button {
  border: 1px solid #51232e;
  border-radius: 7px;
  background: #1c0f13;
  color: #ffb4bb;
  padding: 6px 9px;
  font-size: 10px;
  cursor: pointer;
}

.check-updates-button:hover {
  border-color: #ff5968;
  background: #35151e;
}

.check-updates-button:disabled {
  opacity: .7;
  cursor: wait;
}