:root {
  --xr-gold: #f2d69b;
  --xr-gold-muted: #bfa16b;
  --xr-border: #573340;
  --xr-text-muted: #c3aeb3;
}
.xr-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--xr-gold);
  text-decoration: none;
  flex-shrink: 0;
}
.xr-brand__icon {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px rgb(185 81 29 / 20%));
}
.xr-brand__wordmark {
  display: block;
  margin: 0;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 1px;
  white-space: nowrap;
}
.xr-brand__wordmark small {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3.5px;
  color: var(--xr-gold-muted);
}
.xr-auth {
  background:
    radial-gradient(
      ellipse at 50% 25%,
      #451621 0%,
      #200d15 38%,
      #0c090d 85%);
  color: #fff1e4;
}
.xr-auth .login-box {
  width: 420px;
  padding: 32px;
  border: 1px solid var(--xr-border);
  background:
    linear-gradient(
      160deg,
      rgb(45 19 29 / 95%),
      rgb(18 12 18 / 98%));
  box-shadow: 0 24px 70px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 219 152 / 7%);
}
.xr-brand--auth {
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto 18px;
  text-align: center;
}
.xr-brand--auth .xr-brand__wordmark {
  font-size: 32px;
}
.xr-brand--auth .xr-brand__wordmark small {
  font-size: 10px;
  letter-spacing: 4px;
}
.xr-auth .subtitle,
.xr-auth .register,
.xr-auth .field-help,
.xr-auth .field-optional {
  color: var(--xr-text-muted);
}
.xr-auth label {
  color: #e9d4d9;
}
.xr-auth input {
  background: #160e15;
  border-color: #56323e;
  color: #fff1e4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.xr-auth input::placeholder {
  color: #9e838d;
}
.xr-auth input:focus {
  border-color: #d4af68;
  box-shadow: 0 0 0 3px rgb(212 175 104 / 10%);
}
.xr-auth #submitButton,
.xr-lobby .game-btn {
  background:
    linear-gradient(
      115deg,
      #ecc987,
      #bc8a42);
  color: #291509;
  box-shadow: 0 4px 15px rgb(180 102 31 / 15%);
}
.xr-auth #submitButton:hover,
.xr-lobby .game-btn:hover {
  background:
    linear-gradient(
      115deg,
      #f9dba0,
      #d0a05a);
}
.xr-auth .register .mode-switch {
  color: var(--xr-gold);
}
.xr-lobby {
  background:
    radial-gradient(
      ellipse at 70% 0%,
      #3d1420 0%,
      #1d0d15 38%,
      #0c090d 90%);
  color: #fff1e4;
}
.xr-lobby .header {
  min-height: 78px;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgb(18 10 16 / 93%);
  border-bottom-color: var(--xr-border);
}
.xr-lobby .username {
  color: var(--xr-gold);
}
.xr-lobby .logout-btn {
  border: 1px solid var(--xr-border);
  background: #321a24;
  color: #efdbd4;
}
.xr-lobby .logout-btn:hover {
  background: #4a2532;
}
.xr-lobby .welcome p,
.xr-lobby .game-content p,
.xr-lobby .lobby-balances span,
.xr-lobby .lobby-game-balances,
.xr-lobby #lobbyBalanceMessage {
  color: var(--xr-text-muted);
}
.xr-lobby .lobby-wallet {
  border-color: var(--xr-border);
  background:
    linear-gradient(
      115deg,
      #391d2a,
      #1b111a);
}
.xr-lobby .lobby-balances strong {
  color: var(--xr-gold);
}
.xr-lobby .lobby-balances .frozen strong,
.xr-lobby .lobby-game-balances strong {
  color: #ead1d9;
}
.xr-lobby .lobby-game-balances {
  border-top-color: var(--xr-border);
}
.xr-lobby .wallet-links a {
  color: #f2dedc;
  border-color: #69414c;
  background: #452530;
}
.xr-lobby .wallet-links a:first-child {
  color: #291509;
  border-color: #e5be78;
  background: #dfba73;
}
.xr-lobby .game-card {
  border-color: var(--xr-border);
  background:
    linear-gradient(
      165deg,
      #2a1720,
      #140d13);
}
.xr-lobby .game-content h2 {
  color: #f7dfb5;
}
.xr-brand:focus-visible,
.xr-auth button:focus-visible,
.xr-lobby button:focus-visible,
.xr-lobby .wallet-links a:focus-visible {
  outline: 2px solid var(--xr-gold);
  outline-offset: 4px;
}
@media (max-width: 620px) {
  .xr-auth .login-box {
    padding: 26px 24px;
  }
  .xr-brand--auth .xr-brand__icon {
    width: 74px;
    height: 74px;
  }
  .xr-brand--auth .xr-brand__wordmark {
    font-size: 29px;
  }
  .xr-lobby .header {
    padding: 14px 16px;
  }
  .xr-brand--header .xr-brand__icon {
    width: 42px;
    height: 42px;
  }
  .xr-brand--header .xr-brand__wordmark {
    font-size: 23px;
  }
}