:root {
  --brand-50: #fffbeb;
  --brand-100: #fef3c7;
  --brand-300: #fcd34d;
  --brand-500: #f59e0b;
  --brand-600: #d97706;
  --brand-700: #b45309;
  --ink-950: #020617;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --surface: #ffffff;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
}

body {
  color: var(--ink-900);
  background: #f8fafc;
}

.brand-heading {
  letter-spacing: -0.02em;
  color: var(--ink-950);
}

.brand-muted {
  color: var(--ink-500);
}

.brand-panel {
  border: 1px solid rgb(226 232 240 / 0.9);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  box-shadow: 0 16px 48px -28px rgb(15 23 42 / 0.35);
}

.brand-panel-dark {
  border: 1px solid rgb(51 65 85 / 0.55);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgb(15 23 42 / 0.9), rgb(2 6 23 / 0.92));
  box-shadow: 0 20px 50px -30px rgb(2 6 23 / 0.9);
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgb(251 191 36 / 0.35);
  background: rgb(251 191 36 / 0.1);
  color: var(--brand-700);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-btn-primary {
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 24px -14px rgb(180 83 9 / 0.9);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.brand-btn-primary:hover {
  filter: brightness(0.98);
  box-shadow: 0 16px 28px -16px rgb(180 83 9 / 0.95);
}

.brand-btn-primary:active {
  transform: translateY(1px);
}

.brand-btn-ghost {
  border: 1px solid rgb(203 213 225 / 0.9);
  border-radius: var(--radius-xl);
  background: rgb(248 250 252 / 0.95);
  color: var(--ink-700);
  transition: all 120ms ease;
}

.brand-btn-ghost:hover {
  border-color: rgb(251 191 36 / 0.6);
  background: rgb(255 251 235 / 0.8);
  color: var(--brand-700);
}

.brand-input {
  border: 1px solid rgb(203 213 225);
  border-radius: 0.8rem;
  background: #fff;
  color: var(--ink-900);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.brand-input:focus {
  border-color: rgb(217 119 6);
  box-shadow: 0 0 0 3px rgb(251 191 36 / 0.22);
}

.brand-table th {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Барабан игры (зона гостя /me) */
.revo-wrap { display: flex; justify-content: center; margin-top: 1rem; }
.revo-stack { display: flex; flex-direction: column; align-items: center; }
.revo { width: 190px; height: 190px; border-radius: 50%; background: conic-gradient(from -90deg, #1e293b, #0f172a, #1e293b); border: 8px solid #0b1120; box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px #1e293b; position: relative; cursor: pointer; outline: none; }
.revo:focus-visible { box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 4px #fbbf24; }
.revo-wheel { position: absolute; inset: 0; transition: transform 3.4s cubic-bezier(.16, .84, .24, 1); }
.chamber { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: #0f172a; border: 2px solid #334155; top: 50%; left: 50%; transform-origin: 0 0; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3); }
.chamber.bullet { background: radial-gradient(circle at 40% 34%, #fb7185, #e11d48 76%); border-color: #fecdd3; box-shadow: 0 8px 20px rgba(225, 29, 72, .5); }
.revo-center { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fbbf24; color: #1c1006; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; text-align: center; z-index: 2; }
.revo-pin { position: absolute; top: -3px; left: 50%; width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 13px solid #fbbf24; z-index: 3; filter: drop-shadow(0 2px 3px rgba(251, 191, 36, .5)); }
@media (prefers-reduced-motion: reduce) {
    .revo-wheel { transition: none; }
}
.chamber { cursor: pointer; }
.chamber.empty { background: radial-gradient(circle at 40% 34%, #6ee7b7, #10b981 76%); border-color: #a7f3d0; }