:root {
  color-scheme: dark;
  --bg: #03050b;
  --panel: #090d18;
  --panel2: #0d1322;
  --line: #1a2638;
  --text: #f4f7ff;
  --muted: #8490a7;
  --gold: #e9c773;
  --blue: #8ba9ff;
  --green: #71e8c0;
  --radius: 20px;
}

html {
  background: #03050b;
}

body {
  background:
    radial-gradient(ellipse at 50% -20%, #142138 0, transparent 55%),
    radial-gradient(ellipse at 10% 70%, #0a1722 0, transparent 45%),
    #03050b;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background-image:
    radial-gradient(1px 1px at 8% 14%, #e9f4ff 98%, transparent),
    radial-gradient(1px 1px at 22% 61%, #8da7d5 98%, transparent),
    radial-gradient(1.5px 1.5px at 36% 29%, #fff 98%, transparent),
    radial-gradient(1px 1px at 51% 77%, #b4caef 98%, transparent),
    radial-gradient(1px 1px at 68% 18%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 81% 49%, #9eb7e7 98%, transparent),
    radial-gradient(1px 1px at 93% 83%, #fff 98%, transparent);
  background-size: 250px 220px, 300px 260px, 370px 310px, 440px 390px, 280px 350px, 510px 290px, 360px 420px;
}

.ambient {
  filter: blur(100px);
  opacity: .22;
}

.ambient-one {
  background: #3157a8;
}

.ambient-two {
  background: #764cc4;
}

.topbar {
  height: 62px;
  gap: 10px;
}

.brand-mark {
  background: linear-gradient(145deg, #c9e5ff, #607bc3 55%, #263b6a);
  color: #06101e;
  box-shadow: 0 0 22px #74a8ff50;
}

.brand-accent,
.coin,
.profile-balance span {
  color: #b7d5ff;
}

.wallet-pill {
  margin-left: auto;
  border-color: #243857;
  background: #0c1421;
  color: #d7e5ff;
}

.plus {
  background: linear-gradient(135deg, #d7e9ff, #7193d7);
  color: #07101d;
}

.chat-toggle {
  width: 39px;
  height: 39px;
  border: 1px solid #253652;
  border-radius: 14px;
  background: #0c1421;
  color: #c8dcff;
  font: 18px Manrope, sans-serif;
  cursor: pointer;
  box-shadow: inset 0 0 18px #6584c10a;
}

.chat-toggle[aria-expanded="true"] {
  border-color: #86aaff;
  color: #fff;
  box-shadow: 0 0 22px #769dff28;
}

.auth-notice {
  max-width: 760px;
  margin: 0 auto 14px;
  padding: 12px 15px;
  border: 1px solid #785c36;
  border-radius: 14px;
  background: #1b160d;
  color: #f2d69a;
  font-size: 12px;
  line-height: 1.55;
}

.welcome {
  min-height: 205px;
  border-color: #253957;
  background:
    radial-gradient(ellipse at 80% 25%, #24457555, transparent 48%),
    linear-gradient(125deg, #0b1422, #070b13 65%, #111027);
  box-shadow: inset 0 1px #d8e7ff0c, 0 22px 60px #0007;
}

.welcome h1 span {
  color: #b8d5ff;
}

.hero-emblem {
  border-color: #9cbcff5c;
  background: radial-gradient(circle, #6699e71c, #070b13 72%);
  box-shadow: 0 0 55px #4b80e52b, inset 0 0 24px #85aaff12;
}

.hero-emblem b {
  color: #c4dcff;
}

.hero-emblem i {
  border-color: #9cbcff55;
}

.live-dot {
  background: #70e8bd;
  box-shadow: 0 0 12px #70e8bd99;
}

.live-counter,
.status-chip {
  border: 1px solid #1b3440;
  background: #091719;
  color: #a4ead5;
}

.game-card {
  min-height: 205px;
  border-color: #1b2a3f;
  background:
    radial-gradient(ellipse at 100% 0, #253b5b38, transparent 58%),
    linear-gradient(150deg, #0e1725, #070a12 78%);
  box-shadow: inset 0 1px #e0edff0a, 0 16px 34px #0005;
}

.game-card:hover {
  border-color: #8caef277;
  box-shadow: inset 0 1px #e0edff14, 0 0 28px #7399e51b;
}

.game-card strong {
  margin-top: 20px;
  color: #edf4ff;
}

.game-tag {
  color: #a9bdd9;
}

.game-summary {
  display: block;
  max-width: 90%;
  margin-top: 11px;
  color: #b6c9e5;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
}

.game-arrow {
  color: #9dbbfa;
}

.durak-card,
.chess-card,
.checkers-card,
.battle-card {
  background:
    radial-gradient(ellipse at 100% 0, #314d7d35, transparent 59%),
    linear-gradient(150deg, #0d1726, #060910 78%);
}

.fair-play,
.lobby-card,
.panel,
.stat-card {
  border-color: #1a293e;
  background: linear-gradient(145deg, #0c1421f2, #070b13f5);
  box-shadow: inset 0 1px #dbeaff08, 0 12px 32px #0004;
}

.lobby-card {
  gap: 10px;
}

.lobby-card > div {
  flex: 1;
  min-width: 0;
}

.lobby-icon {
  flex: 0 0 36px;
  background: #142238;
  color: #c4d9ff;
}

.lobby-card .button {
  flex: 0 0 auto;
}

.button-primary {
  background: linear-gradient(135deg, #d8e7ff, #829fdf);
  color: #080e19;
  box-shadow: 0 6px 22px #789be52a;
}

.button-primary:hover {
  background: linear-gradient(135deg, #eff5ff, #9fb8f0);
}

.button-ghost,
.icon-button {
  border-color: #283952;
  background: #0d1522;
  color: #d3e2f8;
}

.button:disabled,
.lobby-card button:disabled {
  opacity: .48;
  cursor: default;
}

.profile-hero {
  background:
    radial-gradient(ellipse at 100% 0, #2c477333, transparent 60%),
    linear-gradient(145deg, #0d1726, #070b13);
}

.avatar {
  background: linear-gradient(145deg, #c6e1ff, #6682c6);
  color: #0a1220;
}

.profile-balance {
  color: #f0f5ff;
}

.welcome p,
.fair-play p {
  color: #aab9cf;
}

.tabbar {
  border-color: #22334c;
  background: #070c16ef;
  box-shadow: 0 -10px 38px #0008;
}

.tab.active {
  color: #b8d4ff;
}

.battle-bank strong > span,
.battle-bank strong {
  color: #eaf2ff;
}

.wheel-panel {
  background: radial-gradient(ellipse at center, #152238, #070b13 72%);
}

.proof-card,
.reveal-card {
  border-color: #26354c;
  background: #0b111c;
}

.dialog {
  border-color: #2b3d58;
  background: #080d17;
  color: var(--text);
  box-shadow: 0 24px 90px #000c;
}

.dialog::backdrop {
  background: #000b;
  backdrop-filter: blur(8px);
}

.amount-field {
  border-color: #293a55;
  background: #060a12;
}

.amount-field:focus-within {
  border-color: #91b2f4;
}

.global-chat {
  display: none;
  position: fixed;
  z-index: 30;
  right: max(14px, calc((100vw - 760px) / 2));
  bottom: calc(79px + env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 24px));
  height: min(580px, calc(100dvh - 115px));
  min-height: 300px;
  grid-template-rows: auto 1fr auto auto;
  overflow: hidden;
  border: 1px solid #2b3e5b;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 85% 0, #1a2b47, transparent 45%),
    #080d17;
  box-shadow: 0 24px 90px #000c, 0 0 40px #4363a51a;
}

.global-chat.open {
  display: grid;
  animation: appear .16s ease;
}

.chat-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 12px;
  border-bottom: 1px solid #1b293c;
}

.chat-heading > div {
  display: grid;
  gap: 3px;
}

.chat-heading b {
  color: #e9f2ff;
  font-size: 13px;
}

.chat-heading small {
  color: #8494ae;
  font-size: 10px;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding: 14px;
  overscroll-behavior: contain;
}

.chat-empty {
  margin: auto;
  color: #8290a6;
  font-size: 12px;
  text-align: center;
}

.chat-message {
  align-self: flex-start;
  max-width: 88%;
  padding: 9px 11px;
  border: 1px solid #1d2b3e;
  border-radius: 13px 13px 13px 4px;
  background: #0e1724;
}

.chat-message.mine {
  align-self: flex-end;
  border-color: #334b72;
  border-radius: 13px 13px 4px 13px;
  background: #101d30;
}

.chat-message-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-message-header b {
  color: #bfd6ff;
  font-size: 10px;
}

.chat-message-header time {
  color: #718099;
  font-size: 9px;
}

.chat-message p {
  margin: 5px 0 0;
  color: #e1e8f4;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-compose {
  display: flex;
  align-items: end;
  gap: 8px;
  margin: 0 12px;
  padding: 8px;
  border: 1px solid #263852;
  border-radius: 14px;
  background: #050911;
}

.chat-compose textarea {
  flex: 1;
  resize: none;
  max-height: 100px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eff5ff;
  font: 12px/1.45 Manrope, sans-serif;
}

.chat-compose textarea::placeholder {
  color: #718099;
}

.chat-compose button {
  min-width: 38px;
  padding: 9px 12px;
}

.chat-footnote {
  padding: 7px 15px 10px;
  color: #697890;
  font-size: 9px;
}

.auth-notice.hidden {
  display: none;
}

@media (max-width: 380px) {
  body {
    padding-right: 12px;
    padding-left: 12px;
  }

  .welcome {
    min-height: 185px;
    padding: 20px 16px;
  }

  .welcome h1 {
    font-size: 28px;
  }

  .hero-emblem {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
  }

  .game-card {
    min-height: 210px;
    padding: 12px;
  }

  .game-summary {
    max-width: 100%;
    font-size: 8px;
  }
}