/* Заголовочный шрифт. В файле ровно одно начертание — Black, поэтому лицо
   объявлено весом 900. Просить у него 700 или 800 бессмысленно: браузер всё
   равно возьмёт единственное имеющееся, а с font-synthesis: none подделки не
   будет. Диапазон весов здесь указывать нельзя — это статический файл. */
@font-face {
  font-family: "BDAB Display";
  src: url("/assets/fonts/nunito-black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* Основной текстовый шрифт — переменный, ось насыщенности 250…900.
   Одно лицо честно закрывает все веса, которыми пользуется интерфейс. */
@font-face {
  font-family: "BDAB Sans";
  src: url("/assets/fonts/tilda-sans-vf.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 250 900;
  font-display: swap;
}

:root {
  /* Design tokens: change these first before editing component rules. */
  color-scheme: dark;
  --bg: #0c0c0f;
  --bg-soft: #161116;
  --surface: rgba(28, 28, 34, 0.86);
  --surface-strong: rgba(35, 35, 42, 0.92);
  --surface-plain: #19191f;
  --text: #f8f4f4;
  --muted: #a9a1a4;
  --line: rgba(255, 255, 255, 0.13);
  --layer-bg: rgba(255, 255, 255, 0.052);
  --layer-bg-strong: rgba(255, 255, 255, 0.078);
  --layer-line: rgba(255, 255, 255, 0.17);
  --layer-shadow: 0 8px 18px rgba(0, 0, 0, 0.055);
  --accent: #ef4444;
  --accent-deep: #991b1b;
  --accent-soft: rgba(239, 68, 68, 0.15);
  --discord-blurple: #5865f2;
  --green: #22c55e;
  --amber: #f59e0b;
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  --radius: 22px;
  --radius-control: 16px;
  --radius-compact: 12px;
  --icon-radius: var(--radius-control);
  --radius-pill: 999px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --top-icon-size: 48px;
  --top-edge-icon-size: 56px;
  --top-theme-size: 42px;
  --top-nav-gap: 12px;
  --top-actions-gap: 12px;
  --top-actions-width: calc(var(--top-theme-size) * 2 + var(--top-edge-icon-size) + var(--top-actions-gap) * 2);
  --content-width: 1180px;
  --topbar-width: 1320px;
  --font-ui: "BDAB Sans", "Avenir Next", "Trebuchet MS", sans-serif;
  --font-display: "BDAB Display", "BDAB Sans", "Arial Rounded MT Bold", sans-serif;
  --control-height: 44px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
}

:root[data-theme="light"] {
  /* Light theme mirrors the same token names to keep components theme-agnostic. */
  color-scheme: light;
  --bg: #f6f2f0;
  --bg-soft: #efe6e3;
  --surface: rgba(255, 255, 255, 0.76);
  --surface-strong: rgba(255, 255, 255, 0.88);
  --surface-plain: #ffffff;
  --text: #191315;
  --muted: #6e6265;
  --line: rgba(74, 38, 38, 0.3);
  /* На светлой теме внутренние слои должны быть темнее подложки, иначе белое
     на белом сливается и панели внутри карточек исчезают. */
  --layer-bg: rgba(74, 38, 38, 0.055);
  --layer-bg-strong: rgba(74, 38, 38, 0.085);
  --layer-line: rgba(74, 38, 38, 0.28);
  --layer-shadow: 0 8px 18px rgba(80, 35, 35, 0.07);
  --accent: #dc2626;
  --accent-deep: #7f1d1d;
  --accent-soft: rgba(220, 38, 38, 0.12);
  --green: #16a34a;
  --amber: #b86b00;
  --shadow: 0 9px 22px rgba(80, 35, 35, 0.11);
}

* {
  box-sizing: border-box;
}

/* Горизонтальное переполнение режется на html, а не на body: на body оно
   превращало его в контейнер прокрутки, и липкая шапка прилипала к нему —
   то есть уезжала вместе со страницей вместо того, чтобы остаться на экране. */
html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background:
    radial-gradient(ellipse 95rem 48rem at 18% -12rem, rgba(239, 68, 68, 0.2), transparent 72%),
    radial-gradient(ellipse 78rem 44rem at 86% -10rem, rgba(245, 158, 11, 0.12), transparent 74%),
    radial-gradient(ellipse 85rem 58rem at 50% 115%, rgba(239, 68, 68, 0.08), transparent 72%),
    linear-gradient(145deg, var(--bg), var(--bg-soft));
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: transparent;
  font-family: var(--font-ui);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.005em;
  text-rendering: optimizeLegibility;
}

button,
input,
select {
  color: inherit;
  font-family: var(--font-ui);
  font-synthesis: none;
  appearance: none;
}

h1,
h2,
h3,
.brand strong,
.nav-item strong,
.project-card strong,
button {
  font-family: var(--font-display);
}

button {
  min-height: var(--control-height);
}

.app-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* Движением на сайте управляет кнопка в шапке. Системная настройка задаёт
   только начальное положение переключателя — дальше решает человек, поэтому
   гасит анимации именно атрибут, а не медиазапрос. */
:root[data-motion="off"] .page {
  animation: none;
}

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}

.topbar {
  /* Top navigation keeps brand/actions independent from centered project nav. */
  position: sticky;
  top: 14px;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(var(--topbar-width), calc(100% - 28px));
  min-height: 84px;
  margin: 14px auto 0;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.glass-panel {
  position: relative;
  overflow: hidden;
}

.glass-panel::before {
  display: none;
  content: none;
}

.glass-panel > *,
.topbar > * {
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 184px;
  padding: 6px 8px;
  border-radius: var(--radius-control);
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: grid;
  flex: 0 0 var(--top-edge-icon-size);
  place-items: center;
  overflow: hidden;
  width: var(--top-edge-icon-size);
  min-width: var(--top-edge-icon-size);
  max-width: var(--top-edge-icon-size);
  height: var(--top-edge-icon-size);
  min-height: var(--top-edge-icon-size);
  max-height: var(--top-edge-icon-size);
  border-radius: var(--radius-control);
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.96), rgba(153, 27, 27, 0.9)),
    var(--accent);
  color: white;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 7px 16px rgba(239, 68, 68, 0.2);
}

.brand-mark img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.brand strong,
.brand small,
.nav-item strong,
.nav-item small {
  display: block;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand > span:not(.brand-mark),
.nav-item > span:not(.nav-icon) {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.nav-item > span:not(.nav-icon) {
  min-height: var(--top-icon-size);
}

.brand small,
.nav-item small,
.metric span,
.command-row small,
.timeline small,
.wiki-link span,
p {
  color: var(--muted);
}

.nav-list {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--top-nav-gap);
  max-width: calc(100% - 420px);
  transform: translateX(-50%);
}

.nav-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 194px;
  min-width: 194px;
  max-width: 194px;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  padding: 0 14px 0 9px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  outline: none;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.nav-item:focus-visible {
  border-color: color-mix(in srgb, var(--project-color, var(--accent)) 28%, var(--line));
  outline: none;
}

.nav-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--project-color, var(--accent)) 18%, var(--line));
  background: color-mix(in srgb, var(--project-color, var(--accent)) 5%, var(--surface));
}

.nav-item.active {
  border-color: color-mix(in srgb, var(--project-color, var(--accent)) 30%, var(--line));
  background: color-mix(in srgb, var(--project-color, var(--accent)) 7%, var(--surface-strong));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.nav-item > *,
.subnav button > *,
.wiki-link > * {
  position: relative;
  z-index: 1;
}

.nav-icon,
.action-icon {
  display: grid;
  flex: 0 0 var(--top-icon-size);
  place-items: center;
  width: var(--top-icon-size);
  min-width: var(--top-icon-size);
  max-width: var(--top-icon-size);
  height: var(--top-icon-size);
  min-height: var(--top-icon-size);
  max-height: var(--top-icon-size);
  border-radius: var(--icon-radius);
  color: var(--project-color, var(--accent));
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.nav-icon {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.action-icon {
  border: 1.5px solid var(--layer-line);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.action-icon {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
}

.nav-icon img {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: inherit;
  object-fit: cover;
}

.nav-item[data-section="discord"] .nav-icon img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: var(--top-actions-gap);
  flex-shrink: 0;
  min-width: max-content;
  z-index: 2;
}

.profile-menu-wrap {
  position: relative;
  display: grid;
  flex: 0 0 var(--top-edge-icon-size);
  place-items: center;
}

.search-button,
.theme-button,
.motion-button,
.discord-login-button {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
  line-height: 0;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.search-button,
.theme-button,
.motion-button {
  flex: 0 0 var(--top-theme-size);
  width: var(--top-theme-size);
  min-width: var(--top-theme-size);
  max-width: var(--top-theme-size);
  height: var(--top-theme-size);
  min-height: var(--top-theme-size);
  max-height: var(--top-theme-size);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

.search-button svg,
.theme-button span,
.theme-button svg,
.motion-button svg {
  display: block;
}

.theme-button span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.search-button svg,
.theme-button svg {
  width: 22px;
  height: 22px;
}

@media (hover: hover) and (pointer: fine) {
  .search-button:hover,
  .theme-button:hover,
  .motion-button:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: color-mix(in srgb, var(--text) 82%, var(--accent));
}
}

.search-button:active,
.theme-button:active {
  background: color-mix(in srgb, var(--text) 9%, transparent);
}

.discord-login-button {
  flex: 0 0 var(--top-edge-icon-size);
  width: var(--top-edge-icon-size);
  min-width: var(--top-edge-icon-size);
  max-width: var(--top-edge-icon-size);
  height: var(--top-edge-icon-size);
  min-height: var(--top-edge-icon-size);
  max-height: var(--top-edge-icon-size);
  border: 0 !important;
  background: color-mix(in srgb, var(--discord-blurple) 12%, transparent);
  box-shadow: none;
}

.discord-login-button:hover {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--discord-blurple) 18%, transparent);
}

.discord-login-button.authenticated {
  background: var(--layer-bg);
}

.discord-login-button img {
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 100%;
  border-radius: inherit;
  object-fit: cover;
}

.discord-login-button .avatar-letter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--discord-blurple) 84%, white);
  color: white;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 40;
  width: min(340px, calc(100vw - 28px));
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.profile-menu[hidden] {
  display: none;
}

.profile-menu::before {
  content: "";
  position: absolute;
  right: 24px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid var(--line);
  border-left: 1.5px solid var(--line);
  background: inherit;
  transform: rotate(45deg);
}

.profile-menu-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
}

.profile-menu-avatar {
  display: grid;
  flex: 0 0 48px;
  place-items: center;
  overflow: hidden;
  width: 48px;
  height: 48px;
  border-radius: var(--icon-radius);
  background: color-mix(in srgb, var(--discord-blurple) 18%, transparent);
  color: white;
  font-weight: 900;
}

.profile-menu-avatar img,
.profile-menu-avatar .avatar-letter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.profile-menu-head strong,
.profile-menu-head small {
  display: block;
  line-height: 1.2;
}

.profile-menu-head small {
  margin-top: 5px;
  color: var(--muted);
}

.profile-menu-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.profile-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.profile-menu-row span {
  color: var(--muted);
}

.profile-menu-row strong {
  text-align: right;
}

.profile-menu-logout {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 34%, var(--layer-line));
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--accent) 12%, var(--layer-bg));
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.profile-menu-logout:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--layer-line));
  background: color-mix(in srgb, var(--accent) 18%, var(--layer-bg));
}

.profile-menu-logout:active {
  transform: translateY(1px);
}

.theme-fade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  will-change: opacity;
}

:root.theme-switching *:not(.theme-fade),
:root.theme-switching *:not(.theme-fade)::before,
:root.theme-switching *:not(.theme-fade)::after {
  transition: none !important;
}

.theme-fade.to-light {
  background:
    radial-gradient(ellipse 95rem 48rem at 18% -12rem, rgba(220, 38, 38, 0.14), transparent 72%),
    radial-gradient(ellipse 78rem 44rem at 86% -10rem, rgba(184, 107, 0, 0.1), transparent 74%),
    linear-gradient(145deg, #f6f2f0, #efe6e3);
}

.theme-fade.to-dark {
  background:
    radial-gradient(ellipse 95rem 48rem at 18% -12rem, rgba(239, 68, 68, 0.2), transparent 72%),
    radial-gradient(ellipse 78rem 44rem at 86% -10rem, rgba(245, 158, 11, 0.12), transparent 74%),
    linear-gradient(145deg, #0c0c0f, #161116);
}

.theme-fade.active {
  opacity: 0.92;
}

.theme-fade.done {
  opacity: 0;
}

.workspace {
  width: min(var(--content-width), calc(100% - 28px));
  margin: 0 auto;
}

.page-stage {
  padding: 26px 0 54px;
  overflow-anchor: none;
}

.page {
  display: grid;
  gap: 18px;
}

.page.page-enter {
  animation: page-in 170ms ease both;
}

@keyframes page-in {
  from {
  opacity: 0;
  transform: translateY(8px);
}
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 18px;
  align-items: stretch;
}

.hero-discord {
  grid-template-columns: 1fr;
}

.hero-discord .hero-copy {
  min-height: 210px;
}

.hero-discord h1 {
  max-width: none;
  font-size: clamp(36px, 4.3vw, 58px);
}

.hero-discord .visual-board {
  display: none;
}

.hero-copy,
.panel,
.metric,
.command-row,
.shot-tile,
.visual-board,
.subnav {
  /* Shared panel layer. Nested layers use --layer-* tokens. */
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 338px;
  padding: clamp(24px, 4vw, 38px);
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-pill);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
  color: var(--muted);
  font-size: 13px;
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 14%, transparent);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  max-width: 760px;
  font-size: clamp(35px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: 0;
}

h2 {
  font-size: 22px;
  letter-spacing: 0;
}

h3 {
  font-size: 16px;
}

p {
  line-height: 1.5;
}

.hero-copy p {
  max-width: 700px;
  margin-top: 18px;
  font-size: 16px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-control);
  border: 1.5px solid var(--layer-line);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.primary-button {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  color: color-mix(in srgb, var(--accent) 22%, var(--text));
  font-weight: 800;
}

.secondary-button {
  color: var(--text);
}

.primary-button:hover,
.secondary-button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-strong));
}

.visual-board {
  position: relative;
  min-height: 338px;
  background: var(--surface);
}

.mock-window {
  position: absolute;
  inset: 26px;
  display: grid;
  grid-template-rows: 44px 1fr;
  overflow: hidden;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.mock-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.mock-title span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.mock-title span:nth-child(2) {
  background: var(--amber);
}

.mock-title span:nth-child(3) {
  background: var(--green);
}

.mock-content {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding: 16px;
}

.mock-rail,
.mock-main,
.mock-card {
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.mock-main {
  display: grid;
  grid-template-rows: 68px repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}

.mock-card {
  opacity: 0.9;
}

.grid-3,
.grid-2 {
  display: grid;
  gap: 14px;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.project-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
  color: inherit;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.project-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--project-color) 38%, var(--line));
  background: color-mix(in srgb, var(--project-color) 8%, var(--surface));
}

.project-card-icon {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  border-radius: var(--icon-radius);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--project-color);
  font-weight: 900;
}

.project-card-icon img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.project-card[data-jump-section="discord"] .project-card-icon img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.project-card strong,
.project-card small {
  display: block;
  line-height: 1.18;
}

.project-card small {
  color: var(--muted);
  margin-top: 3px;
}

.project-card-arrow {
  color: var(--muted);
  font-size: 24px;
}

.games-showcase {
  --project-color: var(--amber);
}

.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.game-card {
  display: grid;
  align-content: space-between;
  gap: 28px;
  min-height: 210px;
  padding: 16px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius);
  background: var(--layer-bg);
  color: inherit;
  text-align: left;
  box-shadow: var(--layer-shadow);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.game-card.featured {
  min-height: 250px;
  background: var(--layer-bg-strong);
}

.game-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--project-color) 42%, var(--line));
}

.game-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.game-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-control);
  border: 1.5px solid var(--layer-line);
  background: var(--layer-bg-strong);
  color: var(--project-color);
  font-weight: 900;
}

.game-status {
  padding: 6px 9px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-pill);
  background: var(--layer-bg);
  color: color-mix(in srgb, var(--project-color) 82%, var(--text));
  font-size: 12px;
  font-weight: 800;
}

.game-card strong,
.game-card small {
  display: block;
  line-height: 1.18;
}

.game-card strong {
  font-size: 22px;
}

.game-card small {
  max-width: 42ch;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.55;
}

.alias-preview {
  display: grid;
  grid-template-columns: minmax(150px, 0.46fr) minmax(0, 1fr);
  gap: 12px;
}

.alias-word,
.alias-rules,
.reward-list {
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.alias-word {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 16px;
  text-align: center;
}

.alias-word small {
  color: var(--muted);
  font-weight: 700;
}

.alias-word strong {
  font-size: 32px;
}

.alias-rules {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 12px;
}

.layer-panel {
  border-color: var(--layer-line);
  box-shadow: var(--layer-shadow);
}

.layer-chip {
  border: 1.5px solid var(--layer-line);
  box-shadow: var(--layer-shadow);
}

.alias-rules .layer-chip,
.reward-list .layer-chip {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
}

.alias-rules .layer-chip {
  font-weight: 750;
}

.reward-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.reward-list .layer-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reward-list span {
  color: var(--muted);
  text-align: right;
}

.panel,
.metric {
  padding: 18px;
}

.metric {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 92px;
}

.metric strong {
  font-size: 26px;
  line-height: 1.08;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.panel-header p {
  max-width: 64ch;
}

.tag {
  display: none;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 6px 10px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-pill);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
  color: color-mix(in srgb, var(--accent) 84%, var(--text));
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.command-list {
  display: grid;
  gap: 10px;
}

.account-panel {
  --project-color: var(--discord-blurple);
}

.birthday-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.birthday-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-compact);
  background: color-mix(in srgb, #f472b6 15%, var(--layer-bg-strong));
  font-size: 21px;
}

.birthday-control > span:nth-child(2) {
  min-width: 0;
}

.birthday-control > span:nth-child(2) > strong,
.birthday-status {
  display: block;
}

.birthday-status {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.compact-button,
.inventory-toggle {
  min-height: 40px;
  padding: 9px 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.compact-button:hover,
.inventory-toggle:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--discord-blurple) 38%, var(--layer-line));
  background: color-mix(in srgb, var(--discord-blurple) 11%, var(--layer-bg-strong));
}

.birthday-form {
  grid-column: 2 / -1;
  display: grid;
  align-items: end;
  gap: 10px;
}

.birthday-form label {
  display: grid;
  gap: 6px;
}

.birthday-form label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.birthday-form input,
.command-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  outline: none;
  background: var(--layer-bg-strong);
  color: var(--text);
  font: inherit;
}

.birthday-form input:focus,
.command-search input:focus {
  border-color: color-mix(in srgb, var(--discord-blurple) 58%, var(--layer-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--discord-blurple) 13%, transparent);
}

.command-catalog {
  --project-color: var(--discord-blurple);
}

.command-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
}

.command-search > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.command-categories {
  display: grid;
  gap: 9px;
}

.command-category {
  overflow: hidden;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.command-category[hidden],
.catalog-command[hidden] {
  display: none;
}

.command-category summary {
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 13px;
  list-style: none;
  cursor: pointer;
}

.command-category summary::-webkit-details-marker {
  display: none;
}

.command-category summary::after {
  content: "↓";
}


.command-category summary small {
  order: 2;
  min-width: 29px;
  margin-left: 10px;
  color: var(--muted);
  text-align: right;
}

.command-catalog-list {
  display: grid;
  gap: 1px;
  padding: 0 8px 8px;
}

.catalog-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, auto);
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 10px;
  border-top: 1px solid var(--layer-line);
}

.catalog-command p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.command-forms {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.command-forms code {
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--discord-blurple) 24%, var(--layer-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--discord-blurple) 8%, var(--layer-bg-strong));
  color: color-mix(in srgb, var(--discord-blurple) 46%, var(--text));
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap;
}

.command-empty {
  margin-top: 12px;
  color: var(--muted);
  font-weight: 750;
}

.discord-server-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

.news-panel,
.news-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.news-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: hidden auto;
  padding: 2px 8px 8px 2px;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.news-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.news-item.featured:has(.news-image) {
  grid-template-columns: minmax(170px, 0.65fr) minmax(0, 1.35fr);
}

.news-image {
  display: block;
  overflow: hidden;
  min-height: 160px;
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
}

.news-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: cover;
}

.news-date {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.news-item h3 {
  margin-top: 5px;
  font-size: 18px;
}

.news-item p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 7px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.text-link {
  display: inline-flex;
  margin-top: 9px;
  color: color-mix(in srgb, var(--discord-blurple) 62%, var(--text));
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.role-cloud {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
}

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--role-color) 38%, var(--layer-line));
  border-radius: var(--radius-compact);
  background: color-mix(in srgb, var(--role-color) 9%, var(--layer-bg));
  font-size: 12px;
  font-weight: 780;
}

.role-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--role-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-color) 14%, transparent);
}

.account-card {
  display: grid;
  grid-template-columns: auto minmax(150px, 0.42fr) minmax(0, 1.58fr);
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.account-identity {
  min-width: 0;
}

.account-economy {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  margin-left: 0;
}

.account-economy > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 11px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
  text-align: right;
}

.account-economy small,
.account-economy-status {
  color: var(--muted);
}

.account-economy-status {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
}

.account-loading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--discord-blurple);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--discord-blurple) 18%, transparent);
  animation: account-pulse 1.4s ease-in-out infinite;
}

@keyframes account-pulse {
  50% {
  opacity: 0.45;
  transform: scale(0.82);
}
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.profile-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--stat-color) 20%, transparent), transparent 48%),
    var(--surface);
  box-shadow: var(--shadow);
}

.profile-stat-level {
  --stat-color: var(--amber);
}

.profile-stat-streak {
  --stat-color: #fb6a2a;
}

.profile-stat-family {
  --stat-color: #f472b6;
}

.profile-stat-inventory {
  --stat-color: #38bdf8;
}

.profile-stat.is-burned {
  --stat-color: var(--muted);
}

/* Шапка приклеена к верху карточки, остальное — к низу. Одинаковый первый ряд
   у всех карточек не зависит от того, сколько строк идёт ниже. */
.profile-stat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: auto;
}

.profile-stat-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--stat-color) 45%, var(--layer-line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--stat-color) 16%, var(--layer-bg));
  font-size: 22px;
}

.profile-stat small,
.profile-stat-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.profile-stat strong {
  display: block;
  overflow: hidden;
  font-size: 21px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-stat-note {
  overflow: hidden;
  margin-top: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Нижняя строка: XP и место в рейтинге в одной линии. */
.profile-stat-foot {
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}

.profile-stat-foot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-stat-foot .profile-stat-rank {
  flex: none;
  color: var(--amber);
}

.profile-progress {
  overflow: hidden;
  height: 7px;
  margin-top: 4px;
  border-radius: var(--radius-pill);
  background: var(--layer-bg-strong);
}

.profile-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), #facc15);
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr);
  gap: 14px;
  align-items: start;
}

.current-activity-panel {
  --project-color: var(--discord-blurple);
}

.current-activity-grid {
  display: grid;
}

.current-activity-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.current-activity-card > span:nth-child(2) {
  min-width: 0;
}

.current-activity-card small,
.activity-line small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.current-activity-card strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-activity-card > p,
.current-activity-list {
  grid-column: 1 / -1;
}

.current-activity-card > p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.current-activity-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-compact);
  background: color-mix(in srgb, var(--discord-blurple) 15%, var(--layer-bg));
  font-size: 20px;
}

.current-activity-list {
  display: grid;
  gap: 7px;
}

.activity-line {
  display: grid;
  align-items: center;
  min-width: 0;
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
  color: inherit;
  text-decoration: none;
}

.activity-line b {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-line i,
.activity-line em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.activity-line[href]:hover {
  background: color-mix(in srgb, var(--discord-blurple) 13%, var(--layer-bg-strong));
}

.operations-panel,
.inventory-panel {
  min-width: 0;
}

.operation-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.operation-summary > span {
  display: grid;
  gap: 5px;
  padding: 11px 13px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
}

.operation-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.amount-positive {
  color: var(--green);
}

.amount-negative {
  color: var(--accent);
}

.operation-list,
.inventory-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.operation-row,
.inventory-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
}

.operation-row > span:nth-child(2),
.inventory-row > span:nth-child(2) {
  min-width: 0;
}

.operation-row strong,
.inventory-row strong {
  display: block;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-row small,
.inventory-row small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-sign,
.inventory-emoji {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--layer-bg-strong);
  font-weight: 900;
}

.operation-sign.positive {
  color: var(--green);
}

.operation-sign.negative {
  color: var(--accent);
}

.inventory-emoji {
  overflow: hidden;
  font-size: 20px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

.inventory-emoji img,
.inventory-emoji .unicode-emoji {
  display: block;
  width: 24px;
  height: 24px;
  transform: none;
}

.inventory-emoji img {
  object-fit: contain;
}

.inventory-emoji .unicode-emoji {
  width: auto;
  height: auto;
  margin: 0;
  line-height: 1;
  text-align: center;
}

.inventory-toggle {
  width: 100%;
  margin-top: 10px;
}

.inventory-more,
.empty-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .profile-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .profile-detail-grid {
  grid-template-columns: 1fr;
}
}

.account-avatar {
  display: grid;
  flex: 0 0 48px;
  place-items: center;
  overflow: hidden;
  width: 48px;
  height: 48px;
  border-radius: var(--icon-radius);
  background: color-mix(in srgb, var(--discord-blurple) 18%, transparent);
  color: white;
  font-weight: 900;
}

.account-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar .avatar-letter {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.account-card strong,
.account-card small {
  display: block;
  line-height: 1.2;
}

.account-card small {
  margin-top: 4px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .account-card {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

  .account-economy {
  width: 100%;
  margin-left: 0;
}

  .account-economy > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  text-align: left;
}

  .account-economy-status {
  width: 100%;
  margin-left: 0;
}

  .profile-stat-grid {
  grid-template-columns: 1fr;
}

  .current-activity-grid {
  grid-template-columns: 1fr;
}

  .profile-stat {
  min-height: 118px;
}

  .operation-row {
  grid-template-columns: auto minmax(0, 1fr);
}

  .operation-row > strong:last-child {
  grid-column: 2;
}
}


/* Unified dashboard rhythm: independent stacks prevent empty grid rows. */
.dashboard-columns {
  display: grid;
  gap: var(--space-4);
}


.current-activity-grid {
  gap: var(--space-3);
}


.character-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Choice lists float over the page and scroll inside their own fixed viewport. */


.economy-hub {
  display: grid;
  gap: var(--space-3);
}

.economy-tabs {
  gap: var(--space-2);
}

.economy-pane {
  min-width: 0;
}

.economy-balance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.economy-balance-grid > span,
.economy-action-card,
.economy-list-row {
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
}

.economy-balance-grid > span {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.economy-balance-grid small,
.economy-action-card small,
.economy-row-copy small,
.economy-note,
.pixel-tools small {
  color: var(--muted);
}


.economy-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.economy-action-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.economy-action-card > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.economy-action-card input,
.stock-actions input {
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
  color: var(--text);
  font: inherit;
}

.economy-note {
  margin: var(--space-3) 0 0;
}

.economy-scroll {
  display: grid;
  gap: var(--space-2);
  max-height: min(520px, 58vh);
  overflow-y: auto;
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.economy-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}

.economy-row-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

.economy-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.economy-row-copy strong,
.economy-row-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-actions {
  display: grid;
  grid-template-columns: 72px auto auto;
  gap: var(--space-2);
}


.slot-preview.is-spinning {
  animation: slot-spin 170ms ease-in-out infinite alternate;
}


.card-preview,
.playing-card {
  font-family: "Apple Symbols", "Segoe UI Symbol", serif;
}

.playing-card {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 3 / 4;
  border: 5px solid #e9e5df;
  border-radius: var(--radius-control);
  background: #faf8f4;
  color: #17171b;
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.24);
  font-size: 34px;
  font-weight: 850;
}

.card-result,
.card-choice-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.pixel-panel {
  margin-top: var(--space-4);
}

/* Полотно во всю ширину, инструменты полосой под ним: в колонке на сто
   девяносто пикселей палитра из семнадцати плашек не помещалась никак. */
.pixel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.pixel-canvas-wrap {
  overflow: hidden;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: #fff;
  box-shadow: var(--layer-shadow);
}

.pixel-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  /* Порядок важен: crisp-edges стоял последним и перебивал pixelated, а в
     части браузеров он равнозначен обычному сглаживанию — отсюда мыло на
     телефоне, где холст растянут вшестеро. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.pixel-tools {
  display: grid;
  gap: var(--space-3);
}

.pixel-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.pixel-palette button {
  min-height: 36px;
  border: 2px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--pixel-color);
  cursor: pointer;
}

.pixel-palette button.active {
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--discord-blurple) 32%, transparent);
}

.pixel-instant {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.pixel-instant input {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--layer-line);
  border-radius: 6px;
  background: var(--layer-bg);
}

.pixel-instant input:checked {
  border-color: var(--discord-blurple);
  background: var(--discord-blurple);
  box-shadow: inset 0 0 0 4px var(--surface-plain);
}

@media (max-width: 760px) {
  .dashboard-columns,
  .pixel-layout {
  grid-template-columns: 1fr;
}

  .current-activity-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .pixel-tools {
  grid-template-columns: minmax(0, 1fr) auto;
}
}

@media (max-width: 760px) {
  .current-activity-grid,
  .economy-balance-grid,
  .economy-actions-grid {
  grid-template-columns: 1fr;
}

  .economy-list-row {
  grid-template-columns: auto minmax(0, 1fr);
}

  .economy-list-row > button,
  .stock-actions {
  grid-column: 1 / -1;
}

  .stock-actions {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

  .pixel-tools {
  grid-template-columns: 1fr;
}

  .card-result,
  .card-choice-buttons {
  gap: var(--space-2);
}
}

.command-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-color: var(--layer-line);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
  text-align: left;
  line-height: 1.25;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.command-row strong,
.command-row small {
  line-height: 1.22;
}

.command-row:hover {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.command-row > small:last-child {
  justify-self: end;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.fake-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
  color: var(--muted);
}

.fake-input span,
.fake-input strong {
  line-height: 1.2;
}

.timeline {
  display: grid;
  gap: 12px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 58px;
  padding: 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
}

.timeline-item::before {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.subnav {
  display: flex;
  width: 188px;
  gap: 8px;
  padding: 6px;
  border-color: var(--layer-line);
  box-shadow: var(--layer-shadow);
}

.subnav button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 46px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: var(--radius-compact);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.subnav button.active {
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--layer-line));
  background: var(--layer-bg-strong);
  box-shadow: var(--layer-shadow);
  color: var(--text);
  font-weight: 800;
}

.minecraft-tab-content {
  display: grid;
  gap: 18px;
  min-height: 520px;
  will-change: transform, opacity;
}

.minecraft-tab-content.tab-exit-down {
  animation: tab-exit-down 180ms ease both;
}

.minecraft-tab-content.tab-enter-up {
  animation: tab-enter-up 230ms ease both;
}

.minecraft-tab-content.tab-exit-up {
  animation: tab-exit-down 180ms ease both;
}

.minecraft-tab-content.tab-enter-down {
  animation: tab-enter-up 230ms ease both;
}

@keyframes tab-exit-down {
  to {
  opacity: 0;
  transform: translateY(26px);
}
}

@keyframes tab-enter-up {
  from {
  opacity: 0;
  transform: translateY(28px);
}
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.shot-tile {
  position: relative;
  display: grid;
  grid-template-rows: 72px auto auto;
  gap: 8px;
  align-content: end;
  min-height: 150px;
  padding: 14px;
  border-color: var(--layer-line);
  box-shadow: var(--layer-shadow);
  text-align: left;
  background: var(--layer-bg);
}

.shot-tile strong,
.shot-tile p {
  position: relative;
  z-index: 1;
}

.shot-frame {
  display: block;
  min-height: 64px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 34%, var(--layer-line));
  border-radius: var(--radius-control);
  background: var(--layer-bg-strong);
  box-shadow: var(--layer-shadow);
}

.wiki-list {
  display: grid;
  gap: 10px;
}

.wiki-link {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 70px;
  padding: 14px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  box-shadow: var(--layer-shadow);
  color: inherit;
  text-align: left;
}

.wiki-link strong,
.wiki-link span {
  line-height: 1.18;
}

.wiki-link span {
  max-width: 64ch;
  text-align: left;
}

.wiki-link.active {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--layer-line));
  background: var(--layer-bg-strong);
  box-shadow: var(--layer-shadow);
}

.wiki-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.35fr) minmax(0, 1fr);
  gap: 14px;
}

.wiki-sidebar {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
}

.wiki-article {
  min-height: 520px;
}

.wiki-article-body {
  display: grid;
  gap: 12px;
  max-width: 760px;
  text-align: left;
}

@media (max-width: 1200px) {
  :root {
  --top-icon-size: 48px;
  --top-nav-gap: 8px;
  --top-actions-gap: 8px;
}

  .topbar,
  .workspace {
  width: min(100% - 20px, var(--content-width));
}

  .topbar {
  position: sticky;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

  .brand {
  flex: 0 0 var(--top-edge-icon-size);
  min-width: 0;
  padding: 0;
}

  .brand > span:not(.brand-mark),
  .nav-item > span:not(.nav-icon),
  .nav-item strong,
  .nav-item small {
  display: none;
}

  .brand-mark,
  .nav-list > .nav-item,
  .nav-list > .nav-item > .nav-icon,
  .theme-button,
  .discord-login-button {
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box;
}

  .nav-list {
  position: absolute;
  left: 50%;
  flex: 0 0 auto;
  justify-content: center;
  gap: var(--top-nav-gap);
  max-width: none;
  overflow: visible;
  padding-bottom: 0;
  transform: translateX(-50%);
}

  .top-actions {
  gap: var(--top-actions-gap);
}

  .nav-item {
  display: flex;
  flex: 0 0 var(--top-icon-size);
  place-items: center;
  align-items: center;
  justify-content: center;
  width: var(--top-icon-size);
  min-width: var(--top-icon-size);
  max-width: var(--top-icon-size);
  height: var(--top-icon-size);
  min-height: var(--top-icon-size);
  max-height: var(--top-icon-size);
  padding: 0;
  border-color: transparent;
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: none;
}

  .nav-list > .nav-item:hover,
  .nav-list > .nav-item.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

  .nav-list > .nav-item > .nav-icon,
  .nav-list > .nav-item > .nav-icon > img {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  inline-size: 100% !important;
  min-inline-size: 100% !important;
  max-inline-size: 100% !important;
  block-size: 100% !important;
  min-block-size: 100% !important;
  max-block-size: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

  .nav-list > .nav-item > .nav-icon {
  border-radius: inherit;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

  .nav-list > .nav-item > .nav-icon > img {
  display: block;
  object-fit: cover !important;
}

  .hero,
  .grid-2,
  .grid-3,
  .project-grid,
  .game-grid,
  .wiki-layout {
  grid-template-columns: 1fr;
}

  .shot-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 620px) {
  :root {
  --top-icon-size: 48px;
  --top-edge-icon-size: clamp(52px, 13.4vw, 56px);
  --top-theme-size: 42px;
  --top-nav-gap: 8px;
  --top-actions-gap: 8px;
  --top-actions-width: calc(var(--top-theme-size) + var(--top-edge-icon-size) + var(--top-actions-gap));
  --radius: 18px;
  --radius-control: 16px;
  --radius-compact: 10px;
}

  .topbar,
  .workspace {
  width: min(100% - 8px, var(--content-width));
}

  .topbar {
  top: 10px;
  display: grid;
  grid-template-columns: var(--top-edge-icon-size) auto minmax(var(--top-actions-width), 1fr);
  align-items: center;
  justify-content: initial;
  gap: 8px;
  min-height: 74px;
  margin-top: 10px;
  padding: 7px;
}

  .brand {
  flex: 0 0 var(--top-edge-icon-size);
  min-width: 0;
  padding: 0;
}

  .brand > span:not(.brand-mark),
  .nav-item > span:not(.nav-icon),
  .nav-item strong,
  .nav-item small {
  display: none;
}

  .brand-mark {
  width: var(--top-edge-icon-size);
  min-width: var(--top-edge-icon-size);
  max-width: var(--top-edge-icon-size);
  height: var(--top-edge-icon-size);
  min-height: var(--top-edge-icon-size);
  max-height: var(--top-edge-icon-size);
  aspect-ratio: 1;
  border-radius: var(--radius-control);
  font-size: 15px;
}

  .nav-list {
  position: static;
  flex: 0 0 auto;
  justify-self: start;
  justify-content: flex-start;
  gap: var(--top-nav-gap);
  max-width: none;
  overflow: visible;
  padding-bottom: 0;
  transform: none;
}

  .nav-item {
  display: flex;
  flex: 0 0 var(--top-icon-size);
  place-items: center;
  align-items: center;
  justify-content: center;
  width: var(--top-icon-size);
  min-width: var(--top-icon-size);
  max-width: var(--top-icon-size);
  height: var(--top-icon-size);
  min-height: var(--top-icon-size);
  max-height: var(--top-icon-size);
  aspect-ratio: 1;
  padding: 0;
  border-color: transparent;
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: none;
}

  .nav-list > .nav-item:hover,
  .nav-list > .nav-item.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

  .nav-icon {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  border-radius: inherit;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  overflow: hidden;
}

  .nav-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  .theme-button {
  width: var(--top-theme-size);
  min-width: var(--top-theme-size);
  max-width: var(--top-theme-size);
  height: var(--top-theme-size);
  min-height: var(--top-theme-size);
  max-height: var(--top-theme-size);
  aspect-ratio: 1;
  border-radius: var(--radius-control);
}

  .discord-login-button {
  width: var(--top-edge-icon-size);
  min-width: var(--top-edge-icon-size);
  max-width: var(--top-edge-icon-size);
  height: var(--top-edge-icon-size);
  min-height: var(--top-edge-icon-size);
  max-height: var(--top-edge-icon-size);
  aspect-ratio: 1;
  border-radius: var(--radius-control);
}

  .top-actions {
  justify-self: end;
}

  .brand-mark,
  .discord-login-button {
  width: var(--top-edge-icon-size) !important;
  min-width: var(--top-edge-icon-size) !important;
  max-width: var(--top-edge-icon-size) !important;
  height: var(--top-edge-icon-size) !important;
  min-height: var(--top-edge-icon-size) !important;
  max-height: var(--top-edge-icon-size) !important;
  inline-size: var(--top-edge-icon-size) !important;
  min-inline-size: var(--top-edge-icon-size) !important;
  max-inline-size: var(--top-edge-icon-size) !important;
  block-size: var(--top-edge-icon-size) !important;
  min-block-size: var(--top-edge-icon-size) !important;
  max-block-size: var(--top-edge-icon-size) !important;
  flex: 0 0 var(--top-edge-icon-size) !important;
}

  .nav-list > .nav-item,
  .nav-list > .nav-item > .nav-icon {
  width: var(--top-icon-size) !important;
  min-width: var(--top-icon-size) !important;
  max-width: var(--top-icon-size) !important;
  height: var(--top-icon-size) !important;
  min-height: var(--top-icon-size) !important;
  max-height: var(--top-icon-size) !important;
  inline-size: var(--top-icon-size) !important;
  min-inline-size: var(--top-icon-size) !important;
  max-inline-size: var(--top-icon-size) !important;
  block-size: var(--top-icon-size) !important;
  min-block-size: var(--top-icon-size) !important;
  max-block-size: var(--top-icon-size) !important;
  flex: 0 0 var(--top-icon-size) !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box;
}

  .theme-button {
  width: var(--top-theme-size) !important;
  min-width: var(--top-theme-size) !important;
  max-width: var(--top-theme-size) !important;
  height: var(--top-theme-size) !important;
  min-height: var(--top-theme-size) !important;
  max-height: var(--top-theme-size) !important;
  inline-size: var(--top-theme-size) !important;
  min-inline-size: var(--top-theme-size) !important;
  max-inline-size: var(--top-theme-size) !important;
  block-size: var(--top-theme-size) !important;
  min-block-size: var(--top-theme-size) !important;
  max-block-size: var(--top-theme-size) !important;
  flex: 0 0 var(--top-theme-size) !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box;
}

  .nav-list > .nav-item > .nav-icon,
  .nav-list > .nav-item > .nav-icon > img {
  inline-size: 100% !important;
  min-inline-size: 100% !important;
  max-inline-size: 100% !important;
  block-size: 100% !important;
  min-block-size: 100% !important;
  max-block-size: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

  .nav-list > .nav-item > .nav-icon > img {
  display: block;
  object-fit: cover !important;
}

  .page-stage {
  padding-top: 18px;
}

  .minecraft-tab-content {
  min-height: 760px;
}

  .hero-copy,
  .visual-board {
  min-height: 290px;
}

  .mock-window {
  inset: 14px;
}

  .command-row {
  grid-template-columns: 38px minmax(0, 1fr);
}

  .command-row > small {
  grid-column: 2;
}

  .shot-grid {
  grid-template-columns: 1fr;
}

  .alias-preview {
  grid-template-columns: 1fr;
}

  .game-card,
  .game-card.featured {
  min-height: 180px;
}

  .reward-list .layer-chip {
  display: grid;
  align-items: start;
}

  .reward-list span {
  text-align: left;
}

  .wiki-link {
  display: grid;
}

  .wiki-link span {
  max-width: none;
  text-align: left;
}
}

@media (max-width: 760px) {
  .discord-server-grid {
  grid-template-columns: 1fr;
}

  .news-panel {
  height: auto;
  min-height: 0;
}

  .catalog-command {
  grid-template-columns: 1fr;
}

  .command-forms {
  justify-content: flex-start;
}
}

@media (max-width: 760px) {
  .birthday-control {
  grid-template-columns: auto minmax(0, 1fr);
}

  .birthday-control > .compact-button,
  .birthday-form {
  grid-column: 1 / -1;
}

  .birthday-form {
  grid-template-columns: 1fr;
}

  .birthday-form .primary-button {
  width: 100%;
}

  .command-search {
  grid-template-columns: 1fr;
  gap: 6px;
}

  .command-forms {
  display: grid;
  grid-template-columns: 1fr;
}

  .command-forms code {
  overflow: hidden;
  text-overflow: ellipsis;
}

  .news-item.featured:has(.news-image) {
  grid-template-columns: 1fr;
}

  .news-image {
  min-height: 150px;
}

}

.discord-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: start;
  gap: 18px;
}

.discord-community-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.character-editor,
.family-panel,
.leaderboard-panel,
.people-finder,
.casino-panel {
  min-width: 0;
}

.character-editor-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  gap: 18px;
  align-items: start;
}

/* Ровно тот цвет, который выбран, и ничего сверху. Раньше поверх лежал белый
   блик: сама картинка приходит от бота с плотной заливкой и закрывала его в
   середине, а выше неё блик оставался виден — сверху фон казался светлее.
   В Discord тот же образ заливается сплошным цветом, так что и здесь никакой
   подсветки быть не должно. */
.character-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 390px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--character-bg);
}

.character-preview img {
  display: block;
  width: min(100%, 360px);
  height: auto;
  object-fit: contain;
}

.character-controls,
.character-controls fieldset {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.character-controls fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.character-controls legend,
.color-control > span,
.people-role-select > span,
.casino-bet > span {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.choice-chips,
.segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.choice-chips label {
  cursor: pointer;
}

.choice-chips input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-chips span,
.segmented-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 9px 14px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 820;
}

.segmented-control button {
  cursor: pointer;
}

.choice-chips input:checked + span,
.segmented-control button.active {
  border-color: color-mix(in srgb, var(--discord-blurple) 48%, var(--layer-line));
  background: color-mix(in srgb, var(--discord-blurple) 18%, var(--layer-bg-strong));
  color: var(--text);
}

.color-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.color-control > span {
  grid-column: 1 / -1;
  margin: 0;
}

.color-control input[type="color"] {
  width: 52px;
  height: 42px;
  padding: 3px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
}

.color-control code {
  color: var(--muted);
  font-size: 12px;
}

.clothing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 310px;
  overflow: auto;
  padding-right: 3px;
}

.clothing-grid label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.clothing-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.clothing-grid label > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-height);
  padding: 9px 11px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
  font-size: 12px;
  font-weight: 780;
}

.clothing-grid input:checked + span {
  border-color: color-mix(in srgb, var(--discord-blurple) 48%, var(--layer-line));
  background: color-mix(in srgb, var(--discord-blurple) 17%, var(--layer-bg));
}

.clothing-grid span img,
.clothing-grid .unicode-emoji {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  object-fit: contain;
  line-height: 1;
  transform: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

.clothing-grid .unicode-emoji {
  width: auto;
  height: auto;
  min-width: 22px;
  text-align: center;
}

.family-roster,
.leaderboard-list,
.people-list {
  display: grid;
  gap: 8px;
}

.operation-list,
.inventory-list,
.clothing-grid,
.family-roster,
.leaderboard-list,
.people-list,
.news-list,
.role-cloud-scroll,
.permission-grid {
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.operation-list,
.inventory-list {
  padding: 0;
  border-radius: var(--radius-compact);
  scrollbar-gutter: stable;
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--fade-top, 0px),
    #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%);
}

.family-roster,
.leaderboard-list,
.people-list {
  max-height: min(520px, 58vh);
  overflow-y: auto;
  padding: 0;
  border-radius: var(--radius-compact);
  scrollbar-gutter: stable;
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--fade-top, 0px),
    #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%);
}

.family-member,
.leaderboard-row,
.person-card {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
}


.family-member-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.family-preview {
  overflow: hidden;
  margin: 0 0 18px;
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
}

.family-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 3099 / 1523;
  object-fit: cover;
}

.family-preview figcaption {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.family-avatar,
.leader-avatar,
.person-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--layer-bg-strong);
}

.family-avatar img,
.leader-avatar img,
.person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-member small,
.family-member strong,
.person-card small,
.person-card strong {
  display: block;
}

.family-member small,
.person-card small,
.person-card p {
  color: var(--muted);
  font-size: 11px;
}

.family-settings {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--layer-line);
}

.family-background {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.family-background label,
.family-background-select {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.family-background input:not([type="color"]),
.family-background-select select,
.people-role-select select,
.casino-bet input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
  color: var(--text);
  font: inherit;
  font-weight: 750;
}

.choice-menu {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.choice-menu > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.choice-menu details {
  position: relative;
  min-width: 0;
}


.choice-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--control-height);
  padding: 9px 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  outline: none;
  background: var(--layer-bg-strong);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.choice-menu summary::-webkit-details-marker {
  display: none;
}

.choice-menu summary:focus-visible,
.choice-menu details[open] summary {
  border-color: color-mix(in srgb, var(--discord-blurple) 52%, var(--layer-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--discord-blurple) 12%, transparent);
}

.choice-menu summary > span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.choice-menu summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice-menu summary i {
  display: grid;
  flex: 0 0 26px;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--muted);
  font-style: normal;
  line-height: 1;
}

.choice-menu summary i::before {
  line-height: 1;
}

.choice-menu details[open] summary i::before {
  content: "↑";
}

.family-panel:has(.choice-menu details[open]),
.people-finder:has(.choice-menu details[open]) {
  z-index: 4;
  overflow: visible;
}

.choice-menu-options {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  scrollbar-gutter: stable;
}

.choice-menu details:not([open]) > .choice-menu-options {
  display: none;
}

.choice-menu-options button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: var(--control-height);
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-compact);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.choice-menu-options button:hover,
.choice-menu-options button.active {
  border-color: color-mix(in srgb, var(--discord-blurple) 34%, var(--layer-line));
  background: color-mix(in srgb, var(--discord-blurple) 14%, var(--layer-bg-strong));
}

.choice-menu-options button > span,
.choice-menu summary .unicode-emoji,
.choice-menu-options .unicode-emoji {
  display: grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  line-height: 1;
}

.choice-menu-options button > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice-menu-options button > small {
  color: var(--muted);
  white-space: nowrap;
}

select option {
  background: var(--surface-plain);
  color: var(--text);
}

.family-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.danger-button,
.icon-button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--layer-line));
  border-radius: var(--radius-compact);
  background: color-mix(in srgb, var(--accent) 11%, var(--layer-bg));
  color: var(--text);
  font: inherit;
  font-weight: 820;
  cursor: pointer;
}

.icon-button {
  min-width: 40px;
  padding: 6px;
  border-color: var(--layer-line);
  background: var(--layer-bg-strong);
}

.leaderboard-tabs,
.people-tabs,
.operation-filters {
  margin-bottom: 12px;
}

.leaderboard-row {
  grid-template-columns: 34px auto minmax(0, 1fr) auto;
}

.leaderboard-row.is-you {
  border-color: color-mix(in srgb, var(--discord-blurple) 46%, var(--layer-line));
  background: color-mix(in srgb, var(--discord-blurple) 10%, var(--layer-bg));
}

.leaderboard-row > strong:first-child {
  color: var(--muted);
  text-align: center;
}

.leaderboard-row > b {
  white-space: nowrap;
}

.people-role-select {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.people-role-select > span {
  margin: 0;
}

.people-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.person-card {
  grid-template-columns: auto minmax(0, 1fr);
}

.person-card p {
  margin-top: 4px;
  line-height: 1.45;
}

.activity-action {
  width: 100%;
  margin-top: 2px;
}

.inline-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.games-page {
  width: min(100%, 1040px);
  margin: 0 auto;
}

/* Поле у панели игр было своё, до тридцати пикселей, и она заметно отличалась
   от соседей. Оставляем общее панельное. */
.games-shell {
  position: relative;
}

.games-balance {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--muted);
  font-size: 17px;
}

.casino-tabs {
  display: grid;
  margin-bottom: 18px;
}

.casino-tabs button {
  display: grid;
  place-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 70px;
  padding: 10px 8px;
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.casino-tabs button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--amber) 38%, var(--layer-line));
  color: var(--text);
}

.casino-tabs button.active {
  border-color: color-mix(in srgb, var(--amber) 62%, var(--layer-line));
  background: color-mix(in srgb, var(--amber) 13%, var(--layer-bg));
  color: var(--text);
}

.casino-tabs button > span {
  font-size: 21px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  line-height: 1;
}

.casino-tabs button > strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.casino-board {
  display: grid;
  gap: 16px;
}

.casino-stage {
  display: grid;
  place-items: center;
  min-height: 250px;
  padding: 26px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 55%),
    var(--layer-bg);
  text-align: center;
}

.casino-stage > strong {
  font-size: clamp(34px, 6vw, 68px);
  letter-spacing: 0.06em;
}

.casino-stage > span {
  margin-top: 12px;
  font-weight: 850;
}

.casino-stage > small {
  margin-top: 5px;
  color: var(--muted);
}

.coin-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 30px);
}

.coin-preview i {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.coin-side {
  display: grid;
  gap: 9px;
  place-items: center;
  width: clamp(110px, 18vw, 154px);
  color: var(--text);
}

.coin-side img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.22));
}

.coin-side.result {
  width: clamp(142px, 23vw, 188px);
}

.coin-side strong {
  font-size: 14px;
  line-height: 1;
}

.choice-coin {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: contain;
}

.dice-preview,
.race-preview {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  letter-spacing: 0.04em;
}

.cockfight-preview {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 5vw, 54px);
  width: min(100%, 480px);
  min-height: 150px;
  padding: 22px clamp(18px, 5vw, 42px);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--layer-line));
  border-radius: var(--radius-control);
}

.cockfight-preview > span {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: clamp(54px, 9vw, 84px);
  line-height: 1;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2));
}

.cockfight-preview > span:first-child {
  transform: scaleX(-1);
}

.cockfight-preview > i {
  align-self: center;
  color: var(--accent);
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.cockfight-result {
  display: grid;
  gap: 10px;
  place-items: center;
}

.cockfight-result > span {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: clamp(76px, 13vw, 116px);
  line-height: 1;
}

.cockfight-result.won > span {
  filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--green) 30%, transparent));
}

.cockfight-result.lost > span {
  filter: grayscale(0.2) drop-shadow(0 12px 18px color-mix(in srgb, var(--accent) 26%, transparent));
}

.cockfight-result > strong {
  font-size: 18px;
}

.slot-preview {
  color: var(--amber);
}

.roulette-wheel {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(142px, 25vw, 190px);
  aspect-ratio: 1;
  border: 10px solid #6f4616;
  border-radius: 50%;
  /* Один зелёный сектор — это и есть зеро: без него колесо обещало только
     красное и чёрное, хотя ставка на ноль в игре есть. */
  background:
    conic-gradient(from -5deg, #1f9d55 0 9deg, transparent 9deg),
    repeating-conic-gradient(
      from 4deg,
      #c52a31 0 9deg,
      #17171b 9deg 18deg
    );
  box-shadow:
    inset 0 0 0 8px #d9a54d,
    0 18px 34px rgba(0, 0, 0, 0.25);
}

.roulette-wheel::before {
  content: "";
  width: 42%;
  aspect-ratio: 1;
  border: 6px solid #d9a54d;
  border-radius: 50%;
  background: #17693c;
}

.roulette-wheel i {
  position: absolute;
  top: -18px;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #f4d180;
  border-left: 10px solid transparent;
}

.roulette-number {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border: 6px solid #d9a54d;
  border-radius: 50%;
  color: #fff;
  font-size: 44px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.roulette-number > span {
  display: block;
  line-height: 1;
}

.roulette-number.red {
  background: #c52a31;
}

.roulette-number.black {
  background: #17171b;
}

.roulette-number.green {
  background: #17693c;
}

.casino-bet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.casino-bet > span {
  grid-column: 1 / -1;
  margin: 0;
}

.casino-choice {
  justify-content: center;
}

.roulette-choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roulette-choice label,
.roulette-choice span {
  width: 100%;
}

.race-choice {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.race-choice label,
.race-choice span {
  width: 100%;
}

.casino-play {
  width: 100%;
}

@media (max-width: 760px) {
  .discord-tools-grid,
  .discord-community-grid,
  .character-editor-layout {
  grid-template-columns: 1fr;
}

  .character-preview {
  min-height: 320px;
}

  .casino-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 760px) {
  .people-list,
  .clothing-grid {
  grid-template-columns: 1fr;
}

  .family-background {
  grid-template-columns: 1fr;
}

  .family-member {
  grid-template-columns: auto minmax(0, 1fr);
}

  .family-member-actions {
  grid-column: 1 / -1;
  justify-content: stretch;
}

  .family-member-actions button {
  flex: 1 1 170px;
}

  .leaderboard-row {
  grid-template-columns: 28px auto minmax(0, 1fr);
}

  .leaderboard-row > b {
  grid-column: 3;
}

  .games-balance {
  position: static;
  margin: -8px 0 16px;
}

  

  .roulette-choice,
  .race-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .casino-stage {
  min-height: 220px;
  padding: 20px 12px;
}

  .coin-preview {
  gap: 10px;
}
}

/* Final component overrides must stay after the legacy component block. */
.choice-menu-options {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  left: 0;
  max-height: min(300px, 48vh);
  margin-top: 0;
  overflow-y: auto;
}

.choice-chips.character-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.character-choice-grid label,
.character-choice-grid span {
  width: 100%;
  min-width: 0;
}

.casino-tabs {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: var(--space-2);
}

.cockfight-preview {
  align-items: center;
  background: var(--layer-bg);
}

.roulette-number,
.roulette-number > span {
  display: grid;
  place-items: center;
  line-height: 1;
  font-family: var(--font-ui);
}

.roulette-number > span {
  width: 100%;
  height: 100%;
  transform: none;
}

@media (max-width: 760px) {
  .casino-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

/* Shared interaction layout: keep menus stable, opaque and independently scrollable. */
.search-button {
  flex: 0 0 var(--top-theme-size);
  width: var(--top-theme-size);
  min-width: var(--top-theme-size);
  max-width: var(--top-theme-size);
  height: var(--top-theme-size);
  min-height: var(--top-theme-size);
  max-height: var(--top-theme-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
}

body.search-open {
  overflow: hidden;
}

.site-search-backdrop {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: min(15vh, 140px) var(--space-4) var(--space-4);
  background: rgba(5, 5, 8, 0.68);
}

.site-search-backdrop[hidden] {
  display: none;
}

.site-search-dialog {
  width: min(620px, 100%);
  max-height: min(680px, 76vh);
  padding: var(--space-4);
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius);
  background: var(--surface-plain);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.site-search-heading,
.site-search-input,
.site-search-results button {
  display: flex;
  align-items: center;
}

.site-search-heading {
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.site-search-heading strong,
.site-search-heading small {
  display: block;
}

.site-search-heading strong {
  font-family: var(--font-display);
  font-size: 24px;
}

.site-search-heading small,
.site-search-results small {
  color: var(--muted);
}

.site-search-input {
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg-strong);
}

.site-search-input:focus-within {
  border-color: color-mix(in srgb, var(--discord-blurple) 56%, var(--layer-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--discord-blurple) 12%, transparent);
}

.site-search-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.site-search-results {
  display: grid;
  gap: var(--space-2);
  max-height: min(500px, 58vh);
  margin-top: var(--space-3);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.site-search-results button {
  gap: var(--space-2);
  width: 100%;
  min-height: 50px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.site-search-results button:hover {
  border-color: color-mix(in srgb, var(--discord-blurple) 42%, var(--layer-line));
  background: color-mix(in srgb, var(--discord-blurple) 11%, var(--layer-bg));
}

.site-search-results button span {
  flex: 1;
  min-width: 0;
  font-weight: 800;
}

.site-search-results button i {
  font-style: normal;
}

.birthday-form {
  grid-template-columns: minmax(0, 1fr);
}

.birthday-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.birthday-status.is-error,
.inline-status.is-error {
  color: var(--accent);
}

/* Отступ под заголовком уже задан самим заголовком: собственный gap добавлял
   его второй раз, и у прав сверху получалась полоса вдвое шире, чем у всех
   остальных панелей. */
.permission-section {
  display: grid;
  gap: 0;
}

.permission-section h3 {
  font-size: 17px;
}

.role-cloud-scroll {
  max-height: 220px;
  overflow-y: auto;
  padding-right: var(--space-1);
  scrollbar-gutter: stable;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.permission-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.permission-chip i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: var(--layer-bg-strong);
  font-style: normal;
}

.permission-chip.is-granted {
  border-color: color-mix(in srgb, var(--green) 38%, var(--layer-line));
  color: var(--text);
}

.permission-chip.is-granted i {
  background: color-mix(in srgb, var(--green) 18%, var(--layer-bg-strong));
  color: var(--green);
}

.current-activity-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


.current-activity-card strong,
.activity-line b {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.activity-line {
  padding: var(--space-2) var(--space-3);
}

.activity-action {
  align-self: end;
  min-height: 44px;
  white-space: normal;
}

.discord-community-grid {
  align-items: stretch;
}

.leaderboard-panel,
.people-finder {
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: min(680px, 78vh);
  min-height: 560px;
}

.leaderboard-list,
.people-list {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.choice-menu details {
  isolation: auto;
}

.choice-menu details[open] {
  z-index: 42;
}

.choice-menu:has(details[open]) {
  z-index: 44;
}

.panel:has(.choice-menu details[open]) {
  z-index: 40;
  overflow: visible;
}

.choice-menu-options {
  z-index: 43;
  overflow: hidden auto;
  border-color: color-mix(in srgb, var(--discord-blurple) 24%, var(--layer-line));
  background: var(--surface-plain);
  opacity: 1;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.48);
}

.choice-menu-options button {
  background: var(--surface-plain);
}

.operations-panel,
.inventory-panel {
  display: flex;
  flex-direction: column;
  height: min(610px, 72vh);
  min-height: 500px;
}


.pixel-countdown {
  min-height: 18px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
  .leaderboard-panel,
  .people-finder,
  .operations-panel,
  .inventory-panel {
  height: auto;
  min-height: 0;
}

  .leaderboard-list,
  .people-list,
  .operation-list,
  .inventory-list {
  max-height: min(540px, 64vh);
}
}

@media (max-width: 760px) {
  .current-activity-grid,
  .permission-grid {
  grid-template-columns: 1fr;
}

  .birthday-form-actions {
  display: grid;
  grid-template-columns: 1fr;
}

  .site-search-backdrop {
  padding: var(--space-3);
}

  .site-search-dialog {
  max-height: calc(100vh - var(--space-5));
}
}

/* Dashboard invariants: live updates must not shift surrounding panels. */
.site-search-backdrop {
  backdrop-filter: none;
}

/* Сообщение переносится по словам: обрезка многоточием прятала как раз ту
   часть, ради которой сообщение и показывают. Место под две строки
   зарезервировано заранее, поэтому панель от него не прыгает. */
.inline-status {
  display: block;
  min-height: 18px;
  margin: 0;
  line-height: 18px;
  overflow-wrap: anywhere;
}

/* Пустая строка состояния схлопывается: место под неё держалось всегда, и внизу
   панели оставалась полоса, которой там быть не должно. Сообщения появляются
   редко и короткие — сдвиг при их показе незаметнее, чем постоянный воздух. */
.inline-status.is-empty {
  display: none;
}

.current-activity-card {
  grid-template-rows: auto auto;
}

.current-activity-card.is-empty > span:nth-child(2) {
  align-self: center;
}

.current-activity-card > .activity-action {
  grid-column: 1 / -1;
}

.dashboard-columns {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: start;
}

.dashboard-stack {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

.character-editor,
.family-panel,
.operations-panel,
.inventory-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
}

.character-editor-layout {
  min-height: 0;
}

.operation-list,
.inventory-list {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(680px, 72vh);
  overflow-y: auto;
}

.character-controls {
  min-height: 0;
}

.character-controls > .primary-button {
  align-self: end;
}

.family-preview-media {
  position: relative;
}

.family-scene-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.family-scene-hotspot {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: auto;
}

.family-scene-hotspot i {
  z-index: 2;
  overflow: hidden;
  width: max-content;
  padding: 7px 9px;
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--surface-plain);
  box-shadow: var(--layer-shadow);
  color: var(--text);
  font-style: normal;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 130ms ease, transform 130ms ease;
  pointer-events: none;
}

.family-scene-hotspot:hover i {
  opacity: 1;
}

.family-scene-hotspots.layout-trio .slot-left {
  left: 2.5%;
  width: 33.3%;
}

.family-scene-hotspots.layout-trio .slot-center {
  left: 35.8%;
  width: 28.4%;
}

.family-scene-hotspots.layout-trio .slot-right {
  left: 64.2%;
  width: 33.3%;
}

.family-scene-hotspots.layout-pair .slot-left {
  left: 16.7%;
  width: 33.3%;
}

.family-scene-hotspots.layout-pair .slot-right {
  left: 50%;
  width: 33.3%;
}

.family-scene-hotspots.layout-adult-child .slot-left {
  left: 19.2%;
  width: 33.3%;
}

.family-scene-hotspots.layout-adult-child .slot-center {
  left: 52.5%;
  width: 28.4%;
}

.family-roster {
  min-height: 0;
  overflow: hidden auto;
  overflow-x: hidden;
}

.family-member {
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.family-member-copy,
.person-card > span:last-child,
.profile-menu-head > span:last-child,
.leaderboard-row > span:nth-child(3) {
  min-width: 0;
  overflow: hidden;
}

.family-member-copy strong,
.person-card strong,
.person-card small,
.leaderboard-row > span:nth-child(3),
.account-identity strong,
.account-identity small,
.profile-menu-head strong,
.profile-menu-head small {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-member.has-actions .family-member-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
  margin-top: var(--space-1);
}

.family-member.has-actions .family-member-actions button {
  min-width: 0;
  white-space: normal;
}

.people-list,
.person-card,
.person-card > span:last-child,
.person-card p {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.people-list {
  width: 100%;
  overflow-x: hidden;
}

.person-card p {
  overflow: hidden;
  overflow-wrap: anywhere;
}

.account-card,
.account-economy,
.profile-stat,
.leaderboard-row,
.person-card {
  min-width: 0;
}

.account-identity {
  flex: 1 1 180px;
  overflow: hidden;
}

.account-economy {
  flex: 0 1 auto;
}

.profile-stat strong,
.profile-stat-note {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Обычные панели: заголовок и список под ним. Раньше здесь была сетка
   «заголовок + остаток высоты» под фиксированную обёртку — из-за неё список
   растягивался на всю панель, и при пяти ролях внутри висел воздух. */
.role-section,
.permission-section {
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.permission-section {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.roles-login-panel {
  grid-row: 1 / -1;
}

/* Список занимает столько, сколько нужно содержимому, и прокручивается,
   когда его много, — как все остальные списки на сайте. */
.role-cloud-scroll,
.permission-grid {
  align-content: start;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: min(320px, 44vh);
  overflow-y: auto;
}

/* Роли — облако плашек по ширине названия, а не столбик во всю панель:
   столбик остался от времён, когда список был сеткой в одну колонку. */
.role-cloud-scroll {
  display: flex;
  flex-flow: row wrap;
}

.role-cloud-scroll .role-chip {
  flex: 0 1 auto;
  width: auto;
}

.role-chip,
.permission-chip {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: flex-start;
  overflow: hidden;
  text-align: left;
}

.role-chip {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .dashboard-columns {
  grid-template-columns: 1fr;
}

  .family-roster {
  max-height: min(360px, 48vh);
}
}

@media (max-width: 760px) {
  .role-cloud-scroll,
  .permission-grid,
  .family-member.has-actions .family-member-actions {
  grid-template-columns: 1fr;
}
}

/* Discord dashboard: paired geometry and consistent live cards. */

.salary-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
}

/* Тире должно читаться как тире. Отдельный крупный кегль в тяжёлом начертании
   превращал его в толстую низкую полосу, неотличимую от подчёркивания. */
.salary-separator {
  color: var(--muted);
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
}

.salary-suffix {
  color: var(--muted);
}

.current-activity-card {
  /* Высота по содержимому: принудительный минимум и растягивающийся ряд
     оставляли под коротким текстом пустую половину карточки. */
  grid-template-rows: auto auto;
}

.current-activity-card > span:nth-child(2) small {
  font-size: 12px;
  line-height: 1.25;
}

.current-activity-card > span:nth-child(2) strong {
  margin-top: var(--space-1);
  line-height: 1.18;
}

.current-activity-list {
  align-self: start;
}

.current-activity-list > p,
.activity-line {
  box-sizing: border-box;
  margin: 0;
}

.current-activity-list > p {
  display: flex;
  align-items: center;
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
  color: var(--muted);
  font-weight: 750;
}

.activity-line {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
}

.activity-line > span {
  min-width: 0;
}


.activity-line em {
  font-size: 12px;
}

.activity-first {
  overflow: hidden;
  margin-top: var(--space-2);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-line-leading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.operations-panel {
  min-height: 560px;
}

/* Список занимает всю свободную высоту панели и прокручивается внутри себя.
   Снятый предел растягивал панель на всю историю: с двумя тысячами записей она
   выходила в двадцать семь тысяч пикселей. Все операции при этом на месте —
   просто до дальних надо доскроллить. */
.operations-panel .operation-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.operations-panel:not(.is-collapsed) {
  height: min(610px, 72vh);
}

.family-roster {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  flex: 0 1 auto;
  max-height: min(280px, 36vh);
  padding-right: var(--space-2);
  padding-bottom: var(--space-3);
  touch-action: pan-y;
  scrollbar-gutter: stable;
  mask-image: none;
}

.family-roster::-webkit-scrollbar,
.operation-list::-webkit-scrollbar,
.inventory-list::-webkit-scrollbar,
.news-list::-webkit-scrollbar,
.role-cloud-scroll::-webkit-scrollbar,
.permission-grid::-webkit-scrollbar {
  width: 8px;
}

.family-roster::-webkit-scrollbar-thumb,
.operation-list::-webkit-scrollbar-thumb,
.inventory-list::-webkit-scrollbar-thumb,
.news-list::-webkit-scrollbar-thumb,
.role-cloud-scroll::-webkit-scrollbar-thumb,
.permission-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 26%, transparent);
}

.family-scene-hotspot i {
  position: fixed;
  right: auto;
  bottom: auto;
  left: 0;
  top: 0;
  max-width: 220px;
  font-size: 12px;
  transform: none;
}

.family-scene-hotspot:hover i {
  transform: none;
}

@media (max-width: 980px) {
  .operations-panel {
  min-height: 0;
}

  .account-card {
  grid-template-columns: auto minmax(0, 1fr);
}

  .account-economy {
  grid-column: 1 / -1;
}
}

@media (max-width: 760px) {
  .account-economy {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: 1fr;
}

  .current-activity-card {
  min-height: 0;
}

  .family-roster {
  max-height: min(380px, 52vh);
}
}

/* ── Уведомления ─────────────────────────────────────────────────────────── */

.notifications-panel {
  --project-color: var(--discord-blurple);
}

.notification-list {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-1);
  max-height: min(560px, 68vh);
  overflow-y: auto;
  padding: 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.notification-list::-webkit-scrollbar {
  width: 8px;
}

.notification-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 26%, transparent);
}

.notification-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
}

.notification-row-master {
  margin-top: var(--space-2);
  border-color: color-mix(in srgb, var(--discord-blurple) 40%, var(--layer-line));
  background: color-mix(in srgb, var(--discord-blurple) 10%, var(--layer-bg));
}

.notification-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
  font-size: 18px;
}

.notification-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notification-copy strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.notification-toggle {
  flex: none;
  min-width: 116px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.notification-toggle.is-on {
  border-color: color-mix(in srgb, var(--green) 45%, var(--layer-line));
  background: color-mix(in srgb, var(--green) 18%, var(--layer-bg));
  color: var(--text);
}

.notification-toggle.is-off {
  border-color: var(--layer-line);
  background: var(--layer-bg-strong);
  color: var(--muted);
}

.notification-toggle:disabled {
  cursor: default;
  opacity: 0.55;
}

.notification-toggle:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--discord-blurple) 55%, var(--layer-line));
}

@media (max-width: 620px) {
  .notification-row {
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: var(--space-2);
}

  .notification-toggle {
  grid-column: 1 / -1;
  width: 100%;
}
}

/* ── Единый вид прокручиваемых списков и подписей ────────────────────────── */

/* Полоса появляется только когда есть что листать. Раньше у семьи стоял
   принудительный `scroll` и на двух участниках висел мёртвый жёлоб. */
.family-roster {
  overflow-y: auto;
}

/* Мягкий уход в прозрачность с обоих концов — одинаково у всех списков внутри
   панелей. Выпадающие меню и диалог поиска сюда намеренно не входят. */
.news-list,
.role-cloud-scroll,
.permission-grid,
.notification-list,
.economy-scroll,
.family-roster {
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top, 0px),
    #000 calc(100% - var(--fade-bottom, 0px)),
    transparent 100%
  );
}

/* Короткие подписи — та же гарнитура, что у заголовков. Иначе внутри одной
   панели соседствуют две разные гарнитуры, и текст «скачет». */
.color-control span,
.profile-stat small,
.current-activity-card small,
.notification-copy strong,
.panel-header h2 {
  font-family: var(--font-display);
}

/* Стрелка выпадающего меню: треугольник как у бегунка прокрутки, только
   крупнее. Рисуем бордерами — не зависит от наличия глифа в шрифте. */
.choice-menu summary i::before,
.command-category summary::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 9px solid currentColor;
  border-bottom: 0;
}

.choice-menu details[open] summary i::before,
.command-category[open] summary::after {
  border-top: 0;
  border-bottom: 9px solid currentColor;
}

/* Канон: стрелка меняется без вращения и смещения. Поворот на 180° убран. */
.command-category summary::after {
  color: var(--muted);
  transition: none;
}

.command-category[open] summary::after {
  transform: none;
}

.activity-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.command-short {
  border-style: dashed;
  opacity: 0.85;
}

/* ── Админ-панель ────────────────────────────────────────────────────────── */

.nav-item-admin {
  --project-color: var(--accent);
}

.nav-icon-glyph {
  display: grid;
  place-items: center;
  font-size: 20px;
}

.admin-queue {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
  max-height: min(760px, 74vh);
  overflow-y: auto;
  padding: 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top, 0px),
    #000 calc(100% - var(--fade-bottom, 0px)),
    transparent 100%
  );
}

.admin-queue-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
}

.admin-queue-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.admin-queue-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.admin-queue-facts div {
  display: grid;
  gap: 2px;
}

.admin-queue-facts dt {
  color: var(--muted);
  font-size: 11px;
}

.admin-queue-facts dd {
  margin: 0;
  font-size: 14px;
}

.admin-queue-use {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.admin-queue-gif {
  max-width: min(320px, 100%);
  border-radius: var(--radius-compact);
}

.admin-queue-actions,
.admin-reject-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.admin-reject-form input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg-strong);
}

.admin-setting {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
}

.admin-cooldown-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.admin-cooldown-form input {
  width: 110px;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg-strong);
  text-align: center;
}

.compact-button.is-success {
  border-color: color-mix(in srgb, var(--green) 45%, var(--layer-line));
  background: color-mix(in srgb, var(--green) 18%, var(--layer-bg));
}

.compact-button.is-danger {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--layer-line));
  background: color-mix(in srgb, var(--accent) 16%, var(--layer-bg));
}

/* Кнопка личного задания занимает такую же рамку, как блоки соседних карточек:
   та же высота, отступы, фон и радиус, без тонкой обводки. */
.current-activity-card > .activity-action {
  border-color: transparent;
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
}

/* Подсветка — только у кнопки: рядом той же меркой сверстана подпись
   «Новые розыгрыши появятся здесь», и нажимать там нечего. */
.current-activity-card > button.activity-action:hover {
  border-color: color-mix(in srgb, var(--discord-blurple) 38%, var(--layer-line));
}

.activity-line-famous i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 15px;
}

.admin-subhead {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 14px;
}

.admin-famous-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
}

.admin-famous-form input {
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg-strong);
}

.admin-famous-form input[name="name"] {
  flex: 1 1 220px;
  min-width: 0;
}

.admin-famous-form input[name="date"] {
  width: 100px;
  text-align: center;
}

.admin-birthday-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-4);
}

.admin-birthday-list {
  display: grid;
  gap: var(--space-1);
  max-height: min(420px, 52vh);
  overflow-y: auto;
  padding: 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top, 0px),
    #000 calc(100% - var(--fade-bottom, 0px)),
    transparent 100%
  );
}

.admin-birthday-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
}

.admin-birthday-date {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.admin-birthday-name {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .admin-birthday-columns {
  grid-template-columns: 1fr;
}
}

/* ── Создание предмета с сайта ───────────────────────────────────────────── */

.create-item-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.create-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.create-field-wide {
  grid-column: 1 / -1;
}

.create-field-emoji input {
  text-align: center;
}

.create-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.create-field input,
.create-field select {
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg-strong);
  color: var(--text);
  font: inherit;
}

.create-field input[type="file"] {
  padding: 9px var(--space-3);
}

.create-submit {
  grid-column: 1 / -1;
  margin-top: var(--space-1);
}

@media (max-width: 620px) {
  .create-item-form {
  grid-template-columns: 1fr;
}
}

.admin-moderation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.admin-moderation-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

@media (max-width: 620px) {
  .admin-moderation-form {
  grid-template-columns: 1fr;
}
}

/* Полное число участников вместе с ботами — приглушённая приписка,
   выровненная по базовой линии основного числа, а не свисающая под ним. */
.metric-extra {
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.5em;
  font-weight: 750;
  letter-spacing: 0;
  vertical-align: baseline;
}

/* Главный переключатель ЛС выделяется цветом, но не размером: одинаковая
   высота строки со всеми остальными пунктами. */


.leaderboard-privacy {
  margin-top: var(--space-3);
}

/* Строка появляется, только когда заданы цена и тираж. Место под неё держим
   всегда, иначе панель подпрыгивает прямо во время набора цены. */
.create-fee {
  min-height: 16px;
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 16px;
}

.hero-admin-button {
  --project-color: var(--accent);
}

.activity-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

/* Подпись категории в справочнике команд. */
.command-category summary small.category-hint {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Текст кнопки личного задания совпадает по кеглю с содержимым соседних
   блоков — крупная рамка не должна нести мелкую подпись. */
.current-activity-card > .activity-action {
  font-weight: 800;
}

/* Панель создания идёт во всю ширину под колонками: сбоку от неё пусто быть
   не должно. */
.create-item-panel {
  --project-color: var(--discord-blurple);
}


.create-item-panel .create-submit {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 980px) {
  .create-item-panel .create-item-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 620px) {
  .create-item-panel .create-item-form,
  .create-item-panel .create-field-wide {
  grid-template-columns: 1fr;
  grid-column: 1 / -1;
}
}

/* ── Единый вид раскрывающихся заголовков ────────────────────────────────── */

/* Порядок в строке: название, описание, стрелка справа. Никаких перестановок
   через order — иначе стрелка уезжает в середину строки. */
.command-category summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.command-category summary small.category-hint {
  order: 0;
  flex: 1 1 auto;
  margin-left: 0;
}

.command-category summary::after {
  order: 1;
  flex: 0 0 auto;
  margin-left: 0;
}

/* Ровно одна стрелка справа, меняется сменой стороны бордера. */
.choice-menu summary i {
  font-size: 0;
}

.choice-menu summary i::before {
  content: "";
  font-size: 0;
}

/* ── Пропорции: крупная рамка не несёт мелкий текст ──────────────────────── */


.current-activity-list > p,
.activity-line {
  padding: var(--space-2) var(--space-3);
}

.current-activity-card > .activity-action {
  min-height: 44px;
  align-self: start;
  width: 100%;
  padding: 0 var(--space-4);
  font-size: 14px;
  letter-spacing: 0;
}

.profile-stat {
  min-height: 118px;
}

/* Обязательные поля помечаются звёздочкой, необязательные — ничем. */
.create-field span .req {
  margin-left: 4px;
  color: var(--accent);
  font-style: normal;
}

.create-templates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.create-templates a {
  padding: 4px var(--space-2);
  border: 1px solid var(--layer-line);
  border-radius: var(--radius-compact);
  color: var(--text);
  text-decoration: none;
}

.create-templates a:hover {
  border-color: color-mix(in srgb, var(--discord-blurple) 45%, var(--layer-line));
}

/* Приватность: подпись занимает всю свободную ширину до кнопки. */
.leaderboard-privacy .notification-copy {
  align-self: center;
}

.leaderboard-privacy .notification-copy strong {
  font-size: 14px;
}

/* Главный переключатель ЛС — только цвет, размеры общие. */
.notification-row-master {
  padding: var(--space-2) var(--space-3);
}

.notification-row-master .notification-copy small {
  font-size: 12px;
}

/* Панель создания и уведомления делят строку поровну. */
.create-item-panel .create-item-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.create-item-panel .create-field-wide {
  grid-column: 1 / -1;
}

.create-item-panel .create-submit {
  min-width: 0;
  width: 100%;
}

.treasury-amount {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 26px;
}

.admin-birthday-date.is-positive {
  color: var(--green);
}

.admin-birthday-date.is-negative {
  color: var(--accent);
}

/* Уведомления и создание предмета делят строку: обе панели тянутся на общую
   высоту, а внутренние списки прокручиваются, а не растягивают карточку. */
.notifications-panel,
.create-item-panel {
  display: flex;
  flex-direction: column;
}

.notifications-panel .notification-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.create-item-panel .create-item-form {
  flex: 1 1 auto;
  align-content: start;
}


/* ── Гарнитуры ───────────────────────────────────────────────────────────── */

/* У заголовочного шрифта единственное начертание. Просим ровно его, чтобы
   правило веса совпадало с тем, что реально лежит в файле. */
h1,
h2,
h3,
.brand strong,
.nav-item strong,
.project-card strong,
.panel-header h2,
.admin-subhead,
.treasury-amount,
.current-activity-card > span:nth-child(2) strong,
.profile-stat strong,
button {
  font-weight: 900;
}

/* Короткие подписи остаются на заголовочной гарнитуре — иначе внутри одной
   панели снова соседствуют две разные и текст читается как скачущий. */
.color-control span,
.profile-stat small,
.current-activity-card small,
.notification-copy strong {
  font-family: var(--font-display);
  font-weight: 900;
}

/* Галочка рисуется бордерами: символа ✓ нет ни в одной из наших гарнитур,
   и он подтягивал системный шрифт отдельным глифом. */
.permission-chip .check-mark {
  flex: none;
  width: 9px;
  height: 5px;
  margin-right: 2px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ── Соразмерность текста и панелей ──────────────────────────────────────── */

/* Пустые состояния занимают строку, а не половину карточки. */
.current-activity-list > p {
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
}

/* Карточка «Сейчас на сервере»: заголовок, содержимое, ничего лишнего. */
.current-activity-card {
  gap: var(--space-2);
  padding: var(--space-3);
}

.current-activity-card > span:nth-child(2) strong {
  font-size: 16px;
}

.current-activity-card small {
  font-size: 11px;
}

.activity-line b {
  font-size: 13px;
  line-height: 1.35;
}

/* Ряд карточек не выравнивается по самой высокой. */
.current-activity-grid {
  align-items: start;
}

/* ── Экономика: одинаковый отступ у всех вкладок ─────────────────────────── */

/* Вкладки открывались на разной высоте: у «Банка» первый элемент шёл без
   отступа, а у «Работы» подпись несла собственный верхний. Теперь расстояние
   от кнопок вкладок задаёт сама область, а не содержимое конкретной вкладки. */
.economy-pane {
  margin-top: var(--space-2);
}

.economy-pane > *:first-child {
  margin-top: 0;
}

.economy-note {
  margin: var(--space-3) 0 0;
}

.economy-balance-grid {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* ── Портфель ────────────────────────────────────────────────────────────── */

.portfolio-position {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
  white-space: nowrap;
}

.portfolio-position strong {
  font-size: 15px;
}

.portfolio-position small {
  font-size: 12px;
  font-weight: 750;
}

/* ── Парные карточки «Сейчас на сервере» ─────────────────────────────────── */

/* Соседние карточки в ряду выравниваются по высоте, но содержимое остаётся
   вверху: карточка тянется, элементы внутри — нет. */
.current-activity-grid {
  align-items: stretch;
}

/* ── Единый вид полос прокрутки ──────────────────────────────────────────── */

/* Раньше часть списков красила бегунок в синий, часть оставляла системным —
   отсюда разнобой. Один нейтральный серый на все прокручиваемые области. */
* {
  scrollbar-color: color-mix(in srgb, var(--text) 26%, transparent) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 26%, transparent);
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text) 38%, transparent);
}

/* ── Поиск по акциям ─────────────────────────────────────────────────────── */

.stock-search {
  margin-bottom: var(--space-2);
}

/* Превышение длины подсвечивается прямо во время ввода. */
.create-field input.is-over-limit {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--layer-bg-strong));
}

.field-limit {
  margin-top: 2px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
}

/* ── Числовые поля ───────────────────────────────────────────────────────── */

/* Общий `appearance: none` для input снимал и нативные стрелки счётчика —
   нажимать было не на что. Возвращаем их именно числовым полям. */
input[type="number"] {
  appearance: auto;
  -webkit-appearance: auto;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
  height: 100%;
}

/* ── Выбор цвета ─────────────────────────────────────────────────────────── */

/* Цвет заливает всю кнопку, а не сидит скруглённым квадратом внутри рамки. */
.color-control input[type="color"] {
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

.color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-control input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 0;
}

.color-control input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 0;
}

/* ── Ошибки не растягивают панель ────────────────────────────────────────── */

/* Строка ошибки под полем занимает заранее отведённое место: панель не должна
   прыгать в высоте от того, что человек ошибся. */
.create-field {
  position: relative;
  padding-bottom: 18px;
}

.field-limit {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -16px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── Списки на телефоне короче ───────────────────────────────────────────── */

@media (max-width: 760px) {
  .operation-list,
  .inventory-list,
  .economy-scroll,
  .leaderboard-list,
  .people-list,
  .notification-list,
  .admin-queue,
  .admin-birthday-list {
    max-height: 40vh;
  }

  /* На большом экране список операций тянется во всю высоту соседней колонки,
     ради этого с него снят предел. На телефоне колонок нет, и без этой строки
     он разворачивался целиком — прокрутка страницы уходила в никуда. */
  .operations-panel .operation-list {
    max-height: 40vh;
  }

  .family-roster {
    max-height: 30vh;
  }
}

/* ── Сворачивание панелей ────────────────────────────────────────────────── */

.panel-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.panel-toggle h2 {
  margin: 0;
}

.panel.is-collapsed > *:not(.panel-header) {
  display: none;
}

.panel.is-collapsed .panel-header {
  margin-bottom: 0;
}

/* Свёрнутая панель занимает высоту своего заголовка и ни пикселем больше.
   Соседка по строке сетки тянет ряд вверх, и без этого правила на месте
   свёрнутой оставалась пустая область в её рост. */
.panel.is-collapsed {
  align-self: start;
  min-height: 0;
  height: auto;
}

/* ── Шапка на телефоне ───────────────────────────────────────────────────── */

.profile-menu-tools {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}

/* Те же значки и тот же размер, что в шапке на большом экране: человек узнаёт
   кнопку, а не читает подпись заново. */
.menu-icon-button {
  display: grid;
  place-items: center;
  width: var(--top-theme-size);
  height: var(--top-theme-size);
  padding: 0;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  color: var(--text);
  line-height: 0;
  cursor: pointer;
}

.menu-icon-button:hover {
  border-color: var(--discord-blurple);
}

.menu-icon-button[aria-pressed="false"] {
  color: var(--muted);
}

/* На узком экране поиск и тема живут внутри меню профиля: три отдельные
   кнопки в шапке занимали место, которого там нет. */
@media (max-width: 760px) {
  .search-button,
  .theme-button,
  .motion-button {
    display: none;
  }
}

@media (min-width: 761px) {
  .profile-menu-tools {
    display: none;
  }
}

/* ── Казино: фигура по центру, подпись отдельно ──────────────────────────── */

/* Раньше подпись о выигрыше делила сетку с фигурой и сдвигала её вверх.
   Теперь фигура занимает всю свободную высоту и центрируется в ней, а подпись
   живёт в отдельной строке заранее известной высоты — стол не прыгает. */
.casino-stage {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}

.casino-figure {
  display: grid;
  place-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
}

.casino-outcome {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  font-weight: 850;
}

.casino-outcome small {
  color: var(--muted);
  font-weight: 750;
}

.casino-figure > strong {
  font-size: clamp(34px, 6vw, 68px);
  letter-spacing: 0.06em;
}

/* ── Свой цвет в пиксельбатле — та же кнопка, что и везде ────────────────── */

/* ── Пиксельбатл: сетка и выбранная клетка ───────────────────────────────── */

.pixel-canvas-wrap {
  position: relative;
}
.pixel-confirm.is-hidden {
  display: none;
}

/* ── Плавность ───────────────────────────────────────────────────────────── */

/* Анимация барабанов трогала filter: blur — его браузер пересчитывает на
   каждом кадре и не может отдать композитору. Оставляем только сдвиг и
   масштаб: их кадры собираются на видеокарте. */
@keyframes slot-spin {
  from {
    transform: translateY(-5px) scale(0.98);
  }
  to {
    transform: translateY(5px) scale(1.02);
  }
}

.slot-preview.is-spinning {
  will-change: transform;
}

/* Пропуск вёрстки невидимых строк отсюда убран. Он экономил немного работы,
   но врал о высоте: браузер считал её по оценке в 64 пикселя на строку, из-за
   чего список сообщал больше, чем в нём есть, и до «конца» доскроллить было
   нельзя — нижнее угасание не гасло никогда. */

/* ── Значок валюты ───────────────────────────────────────────────────────── */

/* Та же картинка, что кастом-эмодзи БДаБика в Discord. Размер привязан к
   строке, поэтому значок растёт вместе с суммой рядом и не сбивает базовую
   линию: без этого числа в таблицах прыгали бы по вертикали. */
.coin {
  display: inline-block;
  width: 1.08em;
  height: 1.08em;
  vertical-align: -0.18em;
  object-fit: contain;
}

/* ── Суммы подстраивают кегль под свою длину ─────────────────────────────── */

/* Карточка объявляет себя контейнером, чтобы сумма внутри считала кегль от её
   собственной ширины, а не от размера окна: одно и то же число стоит и в
   широкой панели банка, и в узкой полоске профиля. */
.economy-balance-grid > span,
.account-economy > span {
  container-type: inline-size;
}

/* Задуманный размер — потолок. Если цифр столько, что строка в ширину не
   лезет, кегль опускается ровно настолько, чтобы она поместилась: 0.62em —
   средняя ширина знака в наших цифрах с разделителями. */
.money-figure {
  display: block;
  min-width: 0;
  font-size: min(var(--figure-size, 20px), calc(100cqi / (var(--len, 10) * 0.62)));
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.economy-balance-grid { --figure-size: 20px; }
.account-economy { --figure-size: 15px; }
.games-balance { --figure-size: 17px; }

/* ── Банк: перевод и вклад ───────────────────────────────────────────────── */

/* Три карточки одного роста и одного строения: подпись, поле, кнопка. Раньше
   высоту им задавала длина подсказки, и ряд выходил рваным. */
.economy-actions-grid {
  align-items: stretch;
}

.economy-action-card {
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-3);
}

.economy-action-card small {
  line-height: 1.25;
}

.economy-action-card > span {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

/* Кнопка ровно под своё слово плюс воздух по бокам, а не во всю карточку. */
.economy-action-card .compact-button,
.economy-action-card .danger-button {
  min-width: max-content;
  padding-inline: 14px;
}

/* Карточка снятого вклада живёт без поля ввода — кнопка занимает его место,
   чтобы ряд не разъезжался. */
.economy-action-static {
  align-content: space-between;
}

.economy-action-static .danger-button {
  width: 100%;
  min-height: var(--control-height);
}

/* ── Одинаковый отступ от заголовка панели до первого элемента ───────────── */

/* Раньше каждый список добавлял к отступу заголовка свой собственный, и
   расстояние до первой кнопки в разных панелях отличалось на глаз. */
.panel-header {
  margin-bottom: 14px;
}

.panel-toggle h2 {
  line-height: 1.2;
}

.panel > .panel-header + * {
  margin-top: 0;
}

/* Свёрнутая панель — полоска с заголовком: нижнее поле панели ей ни к чему. */
.panel.is-collapsed {
  padding-bottom: 18px;
}

/* ── Скачки: дорожки ─────────────────────────────────────────────────────── */

/* Пять дорожек, по одной на зверя. Позиция бегущего — доля ширины дорожки,
   поэтому шаг анимации меняет только одно число и не трогает вёрстку. */
.race-track {
  display: grid;
  gap: 10px;
  width: min(100%, 460px);
}

.race-lane {
  position: relative;
  display: block;
  height: 34px;
  border: 1.5px dashed var(--layer-line);
  border-radius: 999px;
  background: var(--layer-bg);
}

.race-runner {
  position: absolute;
  top: 50%;
  left: var(--race-progress, 0%);
  font-size: 22px;
  font-style: normal;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: left 90ms linear;
}

.race-runner.is-winner {
  filter: drop-shadow(0 0 6px var(--amber));
}

/* ── Петушиный бой ───────────────────────────────────────────────────────── */

/* Побеждает тот, кого назвал сервер, — он и налетает на соперника. Летит один
   петух, второй стоит: так сразу видно, чья взяла. */
.cockfight-fight {
  display: grid;
  grid-template-columns: auto auto;
  gap: 90px;
  align-items: center;
  font-size: 46px;
}

.fighter {
  line-height: 1;
  transition: transform 900ms cubic-bezier(0.3, 0.9, 0.4, 1);
}

.mine {
  transform: scaleX(-1);
}

.cockfight-fight.mine-wins.is-charging .mine {
  transform: scaleX(-1) translateX(-96px) rotate(-14deg);
}

.cockfight-fight.theirs-wins.is-charging .theirs {
  transform: translateX(-96px) rotate(-14deg);
}

/* При выключенных анимациях бойцы просто стоят. */
.cockfight-fight.is-calm .fighter {
  transition: none;
}

/* ── Панели заполняют освободившееся место ──────────────────────────────── */


/* ── Тесты ───────────────────────────────────────────────────────────────── */

.quiz-tabs,
.quiz-search {
  margin-bottom: var(--space-3);
}

.quiz-list {
  max-height: min(520px, 58vh);
}

.quiz-row-actions {
  display: flex;
  flex: none;
  gap: var(--space-2);
  align-items: center;
}

.quiz-import {
  margin-bottom: var(--space-3);
}

.quiz-hint,
.quiz-subhead {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

/* Конструктор собран из тех же кирпичей, что и форма создания предмета:
   .create-field для полей, панельные плашки для блоков. Своей вёрстки у него
   нет — иначе он выглядит как чужая страница внутри сайта. */
.quiz-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.quiz-editor > .segmented-control {
  grid-column: 1 / -1;
}

.quiz-editor input[type="text"],
.quiz-editor select,
.quiz-option-row input,
.quiz-result-row input {
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
  color: var(--text);
  font: inherit;
  font-weight: 750;
}

.quiz-editor input[type="text"]:focus-visible,
.quiz-editor select:focus-visible,
.quiz-option-row input:focus-visible,
.quiz-result-row input:focus-visible {
  border-color: var(--discord-blurple);
  outline: none;
}

.quiz-questions,
.quiz-results {
  display: grid;
  gap: var(--space-3);
}

.quiz-question,
.quiz-results {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
}

.quiz-question legend,
.quiz-subhead {
  padding: 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.quiz-question legend {
  padding: 0 6px;
}

/* Ответ, его роль и кнопка удаления стоят одной строкой: так видно, какой
   вариант к чему относится, без чтения подписей. */
.quiz-option-row,
.quiz-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  align-items: center;
}

.quiz-result-row {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
}

.quiz-correct {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.quiz-question-actions,
.quiz-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Прохождение теста ───────────────────────────────────────────────────── */

.quiz-play {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
}

.quiz-play-head {
  display: grid;
  gap: 2px;
}

.quiz-play-head small {
  color: var(--muted);
  font-weight: 750;
}

.quiz-progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--layer-bg);
}

.quiz-progress i {
  display: block;
  width: var(--quiz-progress, 0%);
  height: 100%;
  border-radius: 999px;
  background: var(--discord-blurple);
  transition: width 220ms ease;
}

.quiz-question-text {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
}

.quiz-image {
  max-width: min(100%, 360px);
  max-height: 220px;
  border-radius: var(--radius-control);
  object-fit: contain;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.quiz-option {
  display: grid;
  grid-auto-rows: min-content;
  gap: 8px;
  place-content: center;
  justify-items: center;
  min-height: var(--control-height);
  padding: 12px 14px;
  text-align: center;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.quiz-option img {
  max-width: 100%;
  max-height: 130px;
  border-radius: var(--radius-compact);
  object-fit: contain;
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--discord-blurple);
}

/* Верный вариант зелёный, выбранный неверный — красный. Оба видны разом,
   поэтому и понятно, где была ошибка. */
.quiz-option.is-correct {
  border-color: var(--success, #22c55e);
  background: color-mix(in srgb, var(--success, #22c55e) 18%, var(--layer-bg));
}

.quiz-option.is-wrong {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--layer-bg));
}

.quiz-score {
  font-size: 26px;
}

/* ── Каталоги в админке ──────────────────────────────────────────────────── */

.admin-catalog {
  max-height: min(460px, 52vh);
}

.admin-catalog-row {
  align-items: center;
}

.admin-catalog-edit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1.5px solid var(--discord-blurple);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
}

@media (max-width: 760px) {
  .quiz-editor,
  .admin-catalog-edit {
    grid-template-columns: 1fr;
  }

  .quiz-option-row,
  .quiz-result-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .quiz-list {
    max-height: 40vh;
  }
}

/* ── Кнопка анимаций ─────────────────────────────────────────────────────── */

/* Значок — кардиограмма: линия скачет, когда движение включено, и перечёркнута,
   когда выключено. Кнопка стоит слева от темы и повторяет её размеры. */
.motion-button {
  color: var(--text);
}

.motion-slash {
  opacity: 0;
  transition: opacity 160ms ease;
}

.motion-button[aria-pressed="false"] {
  color: var(--muted);
}

.motion-button[aria-pressed="false"] .motion-slash {
  opacity: 1;
}

/* ── Уведомления и создание предмета одной длины ─────────────────────────── */

/* Панели стоят рядом и читаются как пара, поэтому и заканчиваться должны на
   одной высоте — независимо от того, сколько строк внутри. Свёрнутая панель
   правило не касается: она сжимается до заголовка. */


/* Панели в стопке заполняют пустоту над собой сами: свернул верхнюю — нижняя
   поднялась. Ряд из двух панелей выравнивается по верху, поэтому свёрнутая
   не растягивается под рост соседки. */
.dashboard-columns {
  align-items: start;
}

/* Пара «Уведомления»/«Создать предмет» читается как одно целое и заканчивается
   на одной высоте — но только пока обе развёрнуты. */
.dashboard-pair {
  align-items: stretch;
}

.dashboard-pair .panel.is-collapsed {
  align-self: start;
}

/* ── Конструктор: понятные подписи вместо значков ────────────────────────── */

/* Радиокнопка «верный» подписана словами и меняет вид, когда выбрана: голый
   кружок рядом с полем ввода читался как непонятная деталь. */
.quiz-correct,
.quiz-score-pick {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 150px;
  height: var(--control-height);
  padding: 0 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

/* Родная радиокнопка рисовалась браузером как вытянутый овал и ломала строку.
   Кружок рисуем сами, а сам input оставляем невидимым для мыши и живым для
   клавиатуры. */
.quiz-correct input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.quiz-correct::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2px solid var(--layer-line);
  border-radius: 50%;
}

.quiz-correct.is-picked {
  border-color: var(--success, #22c55e);
  color: var(--text);
}

.quiz-correct.is-picked::before {
  border-color: var(--success, #22c55e);
  background: var(--success, #22c55e);
  box-shadow: inset 0 0 0 3px var(--layer-bg);
}

.quiz-score-pick select {
  min-height: 30px;
  padding: 0 8px;
}

/* Кнопки удаления отличаются цветом: их легко нажать по ошибке. */
.compact-button.is-remove {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--layer-line));
  color: var(--accent);
}

.quiz-option-row > *,
.quiz-result-row > * {
  height: var(--control-height);
}

.quiz-option-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.quiz-result-row {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
}

/* Блок ролей держит две панели равной высоты в фиксированной сетке. Как только
   одну сворачивают, строки должны считаться по содержимому — иначе нижняя
   панель остаётся на месте, а над ней висит пустая строка. */
/* Роли и права — две самостоятельные панели в общем потоке. Прежние правила
   держали их одной сеткой фиксированной высоты: оттуда и вид «одной странной
   панели», и невозможность подняться на освободившееся место. */


/* ── Пиксельбатл: масштаб и панорама ─────────────────────────────────────── */

/* Поле живёт в окне со своими границами: приближённый холст выходит за них и
   обрезается, как на карте, а не растягивает панель. */
.pixel-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-control);
  touch-action: none;
}

/* Обёртка больше ничего не масштабирует: приближение и сдвиг живут внутри
   холста, поэтому линии и клетки при любом увеличении остаются чёткими. */
.pixel-canvas-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Приближённое поле таскают мышью — курсор об этом и говорит. */
.pixel-viewport:has(.pixel-canvas-wrap[style*="--pixel-zoom: 1;"]) canvas {
  cursor: crosshair;
}

.pixel-zoom-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  gap: 6px;
}

.pixel-zoom-controls .compact-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  background: color-mix(in srgb, var(--surface-plain) 88%, transparent);
  font-size: 16px;
}

/* Табличка в углу поля, как на пиксельбатле реддита: координаты клетки под
   курсором и её автор. Стоит на месте и видна всегда — так за ней не надо
   следить глазами по всему полю. */
.pixel-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 5px 10px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: color-mix(in srgb, var(--surface-plain) 92%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.pixel-hint strong {
  font-size: 13px;
}

.pixel-hint small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

/* ── Пиксели одного участника в админке ──────────────────────────────────── */

.pixel-author-row {
  align-items: center;
}

/* ── Поток панелей: пустота заполняется тем, что идёт ниже ───────────────── */

/* Панели текут колонками, а не стоят в строках сетки. Порядок в разметке тот
   же, что был, поэтому расположение не меняется: первая колонка набирается
   сверху вниз, потом вторая. Разница в том, что свёрнутая панель отдаёт своё
   место следующей, а не оставляет дыру до конца строки. */
.panel-flow {
  display: block;
  columns: 2;
  column-gap: var(--space-4);
  orphans: 1;
  widows: 1;
}

.panel-flow > * {
  break-inside: avoid;
  margin-bottom: var(--space-4);
}

/* В потоке высоту задаёт содержимое, а не строка сетки. Прежние правила пары
   растягивали панели под соседку и мешали заполнять пустоту. */
.panel-flow .panel {
  height: auto;
}

.panel-flow .operations-panel:not(.is-collapsed) {
  height: min(610px, 72vh);
}

.panel-flow .inventory-panel:not(.is-collapsed) {
  max-height: min(610px, 72vh);
}

@media (max-width: 760px) {
  .panel-flow {
    columns: 1;
  }
}

/* ── Рулетка: ставка на своё число ───────────────────────────────────────── */

/* Отдельная строка во всю ширину под фишками: число от нуля до тридцати шести
   вводится руками, а не выбирается из списка на тридцать семь кнопок. */
/* Число стоит в том же ряду, что и остальные ставки, и выглядит такой же
   плашкой — просто в неё можно писать. Переключатель спрятан: его роль
   выполняет само введённое число. */
.roulette-number-bet {
  display: flex;
  width: 92px;
}

.roulette-number-bet input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Общее правило ряда прячет любой input внутри — оно рассчитано на скрытые
   переключатели. Полю ввода видимость возвращаем обратно. */
.choice-chips .roulette-number-bet input[type="number"] {
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 10px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.roulette-number-bet input[type="radio"]:checked + input[type="number"] {
  border-color: var(--discord-blurple);
}

/* Кнопка «Пройти» стоит последней и одинаковой ширины во всех строках —
   так они выстраиваются в ровный столбец у правого края. */
.quiz-row-actions {
  margin-left: auto;
}

.quiz-row-actions .quiz-start {
  min-width: 104px;
  justify-content: center;
}

/* Подпись о клетке под курсором, продублированная строкой в панели: плавающая
   подсказка может уехать за край поля, а эта видна всегда. */
.pixel-hover-line {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ── Роли и права: колонка ростом с «Новости» ────────────────────────────── */

/* Две панели делят высоту соседних «Новостей» поровну — вместе они занимают
   ровно столько же, сколько одна её панель. Списки внутри прокручиваются. */
/* Панели по содержимому, никто не растягивается: свернул роли — права встают
   на их место. */
/* ── Две колонки личного кабинета ────────────────────────────────────────── */

/* Колонки одной высоты, а последняя панель в каждой дотягивается до низа —
   поэтому обе заканчиваются на одной линии. Свернул панель посередине: те,
   что ниже, поднимаются, а нижняя забирает освободившееся место. Раньше это
   считал JavaScript и писал инлайновую высоту, из-за которой панели вообще
   переставали сворачиваться. */
/* Все панели кабинета текут одним потоком в две колонки. Свёрнутая панель
   отдаёт своё место следующей за ней — пустоты не остаётся нигде, в том числе
   между колонками. Порядок в разметке прежний, но панель может перейти в
   соседнюю колонку, если так они выравниваются по высоте: это плата за то,
   чтобы воздух заполнялся всегда.

   Ни одна панель при этом не растягивается — каждая ровно по содержимому. */
#dashboard-panels {
  display: block;
  columns: 2;
  column-gap: var(--space-4);
}

#dashboard-panels > .panel {
  break-inside: avoid;
  margin-bottom: var(--space-4);
}

/* Две колонки держатся до телефонной ширины: в горизонтальном положении
   телефона места хватает, и раскладка там такая же, как на компьютере. */
@media (max-width: 760px) {
  #dashboard-panels {
    columns: 1;
  }
}

/* ── Новости, роли и права: одинаковая невысокая мера ────────────────────── */

/* Три панели одного ряда читаются как набор, поэтому и списки внутри них
   ограничены одинаково: длинное содержимое прокручивается, а не растит панель. */
.news-list,
/* ── Полотно на весь экран ───────────────────────────────────────────────── */

/* Панель занимает треть страницы, и разглядывать чужие рисунки в ней неудобно:
   увеличение упирается в её размеры. Развёрнутое полотно ложится поверх всего
   и получает столько места, сколько есть у экрана. */
/* Анимация появления страницы оставляет на ней transform, а он делает страницу
   точкой отсчёта для position: fixed — развёрнутое полотно раскрывалось не на
   экран, а на страницу. Пока полотно открыто, transform странице не нужен. */
/* ── Страница полотна ────────────────────────────────────────────────────── */

/* Полотно живёт отдельной страницей, а не поверх кабинета: внутри панели его
   перекрывала шапка, и поднять его слоем было нельзя — шапка рисуется в корне
   страницы, а полотно внутри неё. */
.pixel-page {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.pixel-page-bar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.pixel-page-bar strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
}

.pixel-viewport.is-page {
  width: 100%;
  aspect-ratio: 96 / 64;
  max-height: calc(100vh - 220px);
  border: 1.5px solid var(--line);
}

/* Панель инструментов идёт одной полосой во всю ширину: разбивка на колонки
   сжимала ряд с палитрой до трети экрана, и семнадцать плашек не помещались
   в строку даже на большом мониторе. */
.pixel-page .pixel-tools,
.pixel-panel .pixel-tools {
  grid-template-columns: minmax(0, 1fr);
}

/* Кнопки на полотне: на телефоне мельче, чтобы не закрывать сам рисунок. */
@media (max-width: 760px) {
  .pixel-zoom-controls {
    right: 6px;
    bottom: 6px;
    gap: 4px;
  }

  .pixel-zoom-controls .compact-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .pixel-hint {
    top: 6px;
    left: 6px;
    padding: 3px 7px;
  }

  .pixel-hint strong {
    font-size: 12px;
  }
}

/* ── Края гаснут только там, где есть что прокручивать ───────────────────── */

/* Оба края ведут себя одинаково: верхний появляется, когда список уже сдвинут,
   нижний — пока внизу что-то осталось. Домотал до конца — угасания снизу нет,
   как и сверху в самом начале. У списка, который помещается целиком, краёв не
   появляется вовсе. Переходов нет: это не анимация, а состояние прокрутки. */
.is-scrolled-top {
  --fade-top: 14px;
}

.is-scrolled-bottom {
  --fade-bottom: 18px;
}

/* Стрелки у полосы прокрутки уезжали под то же угасание и выглядели обрубками.
   Полоса и без них понятна. Чтобы правило подействовало, у полосы должен быть
   задан и собственный размер: иначе браузер оставляет системный вид целиком. */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:start,
*::-webkit-scrollbar-button:end,
*::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}


/* ── Управление полотном одной строкой ───────────────────────────────────── */

/* Палитра, свой цвет и тумблеры стоят в одном ряду под холстом: раньше цвета
   занимали сетку, а тумблеры уезжали ниже — на телефоне до них надо было
   долистывать. */
.pixel-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

/* Палитра — ряд квадратов. Раньше она была сеткой в четыре колонки, и на
   узком экране плашки растягивались в прямоугольники. */
.pixel-controls .pixel-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}

.pixel-controls .pixel-palette button {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--swatch, 28px);
  height: var(--swatch, 28px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  aspect-ratio: 1;
}

/* Свой цвет подписан и стоит отдельной плашкой: без подписи было непонятно,
   что этот квадрат вообще делает. */
.pixel-own-color {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.pixel-own-color i {
  display: block;
  flex: 0 0 auto;
  width: var(--swatch, 28px);
  height: var(--swatch, 28px);
  overflow: hidden;
  border: 1.5px dashed var(--layer-line);
  border-radius: var(--radius-compact);
}

.pixel-own-color input[type="color"] {
  display: block;
  width: 200%;
  height: 200%;
  margin: -25%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pixel-switches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.pixel-status {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 26px;
}

/* Размер плашки подбирается под ширину: на большом экране все семнадцать
   помещаются одной строкой, на телефоне переносятся в две-три. */
.pixel-controls {
  --swatch: 28px;
}

@media (max-width: 980px) {
  .pixel-controls {
    --swatch: 26px;
  }
}

@media (max-width: 560px) {
  .pixel-controls {
    --swatch: 24px;
  }
}

/* Кнопки масштаба тоже квадратные: без явной ширины они растягивались по
   содержимому и выходили прямоугольниками. */
.pixel-zoom-controls .compact-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  aspect-ratio: 1;
}

/* ── Одинаковые поля у всех панелей ──────────────────────────────────────── */

/* Расстояние от края панели до содержимого задаёт только сама панель. Списки
   раньше добавляли своё несимметричное поле (слева два пикселя, справа восемь),
   и в соседних панелях содержимое стояло по-разному.

   Место под полосу прокрутки резервируется отдельно: в macOS полоса рисуется
   поверх содержимого и наезжала на строки, а в Windows занимала место — из-за
   этого один и тот же список выглядел на двух системах по-разному. */
.news-list,
.role-cloud-scroll,
.permission-grid,
.notification-list,
.economy-scroll,
.family-roster,
.leaderboard-list,
.people-list,
.operation-list,
.inventory-list,
.admin-queue,
.admin-birthday-list,
.quiz-list,
.admin-catalog {
  padding: 0;
  scrollbar-gutter: stable;
}

/* Полоса всегда своя и всегда занимает место, а не всплывает поверх строк. */
.news-list::-webkit-scrollbar,
.role-cloud-scroll::-webkit-scrollbar,
.permission-grid::-webkit-scrollbar,
.notification-list::-webkit-scrollbar,
.economy-scroll::-webkit-scrollbar,
.family-roster::-webkit-scrollbar,
.leaderboard-list::-webkit-scrollbar,
.people-list::-webkit-scrollbar,
.operation-list::-webkit-scrollbar,
.inventory-list::-webkit-scrollbar,
.admin-queue::-webkit-scrollbar,
.admin-birthday-list::-webkit-scrollbar,
.quiz-list::-webkit-scrollbar,
.admin-catalog::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

/* Стрелка выпадающего меню стоит по центру своей строки. Раньше её рисовал
   пустой элемент без выравнивания, и треугольник прижимался к верху. */
.choice-menu summary i {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 100%;
  min-height: 20px;
  color: var(--muted);
}

/* ── Окно полотна ────────────────────────────────────────────────────────── */

/* Окно повторяет пропорции полотна, поэтому пустых полей вокруг него нет:
   раньше окно было выше поля, и рабочей оставалась лишь его середина, а на
   телефоне «холст» выглядел заметно больше того, куда можно ткнуть.

   Ширина ограничена так, чтобы поле влезало и по высоте — в горизонтальном
   положении телефона оно не уходит за экран. */
.pixel-viewport {
  --pixel-room: min(56vh, 520px);
  width: min(100%, calc(var(--pixel-room) * 96 / 64));
  aspect-ratio: 96 / 64;
  height: auto;
  margin-inline: auto;
}

.pixel-viewport.is-page {
  --pixel-room: calc(100vh - 230px);
}

@media (max-width: 980px) {
  .pixel-viewport {
    --pixel-room: min(46vh, 420px);
  }

  .pixel-viewport.is-page {
    --pixel-room: calc(100vh - 250px);
  }
}

/* Горизонтальное положение телефона: экран низкий, под полотно отдаётся почти
   всё, а управление ужимается. */
@media (max-height: 560px) and (orientation: landscape) {
  .pixel-viewport,
  .pixel-viewport.is-page {
    --pixel-room: calc(100vh - 140px);
  }

  .pixel-controls {
    --swatch: 22px;
    gap: var(--space-2);
  }
}

/* ── Смахивание шапки ────────────────────────────────────────────────────── */

/* Шапку можно убрать движением вверх по ней самой и вернуть движением от
   верхней кромки экрана вниз. Полоса у кромки остаётся всегда, чтобы жест было
   за что начать. */
.topbar {
  transition: transform 240ms cubic-bezier(0.3, 0.8, 0.4, 1);
}

:root.topbar-hidden .topbar {
  transform: translateY(calc(-100% - 20px));
}

:root[data-motion="off"] .topbar {
  transition: none;
}

:root.topbar-hidden::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  height: 22px;
}

/* ── Одинаковые отступы у всех панелей ───────────────────────────────────── */

/* Панель-сетка добавляет свой промежуток к отступу заголовка, и под ним
   выходит вдвое больше, чем у соседей. Отступ задаёт только заголовок. */
.economy-hub {
  gap: 0;
}

.economy-hub > .panel-header {
  margin-bottom: 14px;
}

/* Инвентарь держал пятьсот пикселей высоты независимо от содержимого: при
   коротком списке снизу оставалась пустая полоса в четыре раза шире, чем поле
   у остальных панелей. Высоту задаёт список, предел остаётся. */
.inventory-panel,
.operations-panel {
  min-height: 0;
}

.panel-flow .operations-panel:not(.is-collapsed) {
  height: auto;
}

/* Список операций прокручивается внутри панели, а не растит её на всю историю:
   без предела панель вытягивалась на все полторы тысячи записей. */
.panel-flow .operations-panel:not(.is-collapsed) .operation-list,
.operations-panel .operation-list {
  max-height: min(560px, 64vh);
}

/* Именинники прокручиваются: карточка держит высоту двух строк, сколько бы их
   ни было, и соседние карточки ряда не разъезжаются. Края гаснут по тем же
   правилам, что у остальных списков: сверху — когда список сдвинут, снизу —
   пока внизу кто-то ещё остался. */
.current-activity-scroll {
  max-height: 104px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top, 0px),
    #000 calc(100% - var(--fade-bottom, 0px)),
    transparent 100%
  );
}

.current-activity-scroll::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

/* ── Низ панелей с кнопкой в конце ───────────────────────────────────────── */

/* Поле под строку ошибки нужно только тем полям, у которых эта строка есть.
   Последний ряд формы получал его просто так, и под кнопкой отправки
   оставалась лишняя полоса. */
.create-field {
  padding-bottom: 0;
}

.create-field:has(.field-limit) {
  padding-bottom: 18px;
}

/* Строка со стоимостью появляется только вместе с ценой и тиражом: место под
   неё держать незачем, кнопка и так последняя. */
.create-fee:empty {
  display: none;
}

/* У панели игр снизу оставался отступ формы поверх поля самой панели. */
.casino-board {
  margin-bottom: 0;
}

.casino-board > .casino-play {
  margin-bottom: 0;
}

/* ── Магазин и рынок ─────────────────────────────────────────────────────── */

.economy-subtabs {
  margin-bottom: var(--space-3);
}

.shop-actions {
  grid-template-columns: 72px auto;
}

.market-actions {
  grid-template-columns: auto;
}

/* Форма лота: предмет тянется, цена и количество узкие, кнопка по краю. */
.market-sell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px auto;
  align-items: end;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
}

.market-sell label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.market-sell label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.market-sell input,
.market-sell select {
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 12px;
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
  color: var(--text);
  font: inherit;
}

@media (max-width: 720px) {
  .market-sell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .market-sell button {
    grid-column: 1 / -1;
  }
}

/* ── Реакции под новостью ────────────────────────────────────────────────── */

.news-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.news-reaction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1.5px solid var(--layer-line);
  border-radius: 999px;
  background: var(--layer-bg-strong);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 13px;
  line-height: 1.2;
}

.news-reaction img {
  display: block;
  width: 18px;
  height: 18px;
}

.news-reaction b {
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
}

/* ── Настройки ───────────────────────────────────────────────────────────── */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

.settings-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.settings-card h3 {
  font-size: 14px;
}

/* Внутри карточки рамка уже своя — вложенная выглядела бы коробкой в коробке. */
.settings-card .birthday-control,
.settings-card .notification-row {
  margin-top: 0;
}

/* ── Сохранёнки ──────────────────────────────────────────────────────────── */

.saved-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  max-height: min(560px, 64vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top, 0px),
    #000 calc(100% - var(--fade-bottom, 0px)),
    transparent 100%
  );
}

.saved-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1.5px solid var(--layer-line);
  border-radius: var(--radius-control);
  background: var(--layer-bg);
}

.saved-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.saved-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.saved-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.saved-meta strong,
.saved-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-meta small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.saved-text {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.saved-image img {
  display: block;
  width: 100%;
  max-height: 220px;
  border-radius: var(--radius-compact);
  object-fit: cover;
}

.saved-remove {
  color: var(--muted);
}

/* ── Кнопки говорят одним шрифтом ────────────────────────────────────────── */

/* Часть кнопок наследовала текстовый шрифт через `font: inherit`, и рядом с
   заголовочным он читался как чужой — особенно «Виден» рядом с «Изменить».
   Здесь и семейство, и кегль сведены к одному виду. */
.compact-button,
.inventory-toggle,
.primary-button,
.secondary-button,
.danger-button,
.icon-button,
.notification-toggle,
.profile-menu-logout,
.segmented-control button,
.choice-chips span {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}

/* ── Настройки: день рождения, приватность, уведомления ──────────────────── */

.settings-notifications {
  margin-top: var(--space-3);
}

.settings-notifications h3 {
  margin-bottom: var(--space-2);
  font-size: 14px;
}

/* Панель во всю ширину, поэтому категории идут в две колонки: одной строкой
   на всю ширину получалась бы дорожка из пустоты между текстом и кнопкой. */
.settings-notification-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-2);
  max-height: none;
  overflow: visible;
  mask-image: none;
}

/* Кнопка даты — такая же узкая, как переключатель рейтингов. */
.birthday-control .notification-toggle {
  min-width: 116px;
}

.settings-card .birthday-status {
  margin-top: 0;
}

/* ── Строка эмодзи и названия в создании предмета ────────────────────────── */

/* Эмодзи ровно одно — широкое поле под него выглядело ошибкой, а названию
   места не хватало. Заодно поля перестали растягиваться по высоте соседа:
   у названия под ним живёт строка ошибки, и она тянула эмодзи вниз. */
.create-row-head {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.create-field {
  align-content: start;
}

/* ── Строка дня рождения ─────────────────────────────────────────────────── */

/* Карточка живёт рядом со строкой уведомлений и должна выглядеть так же:
   раньше у неё были своя рамка потолще и закругление покрупнее. */
.settings-card .birthday-control,
.birthday-nudge {
  padding: var(--space-2) var(--space-3);
  border-width: 1px;
  border-radius: var(--radius-compact);
  box-shadow: none;
}

/* Ввод даты: слева поле, справа кнопки — строка не растёт вниз. */
.birthday-control.is-editing {
  grid-template-columns: auto minmax(0, 1fr);
}

.birthday-form {
  grid-column: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.birthday-form input {
  flex: 1 1 120px;
  min-width: 0;
}

.birthday-form .notification-toggle {
  min-width: 104px;
}

.birthday-delete {
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

/* ── Кастом-эмодзи в тексте ──────────────────────────────────────────────── */

/* Картинка эмодзи приходит размером 64px — без размера по кеглю она была
   больше самой строки. */
.discord-emoji {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  object-fit: contain;
}

/* ── Пустая карточка розыгрышей ──────────────────────────────────────────── */

/* Рядом стоит кнопка «Получить личное задание», и подпись должна попадать
   с ней в одну линию — иначе карточки выглядят разной высоты. */
.activity-note {
  display: grid;
  place-items: center;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-compact);
  background: var(--layer-bg-strong);
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

/* На телефоне поле занимает строку целиком, а кнопки делят следующую поровну:
   в одну строку они там не помещаются и разъезжались по одной. */
@media (max-width: 620px) {
  .birthday-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .birthday-form input {
    grid-column: 1 / -1;
  }

  /* Переключатели уведомлений на телефоне занимают строку целиком — здесь
     это кнопки формы, и растягиваться им не нужно. */
  .birthday-form .notification-toggle {
    min-width: 0;
    grid-column: auto;
  }

  .birthday-form .birthday-delete {
    grid-column: 1 / -1;
  }
}

/* ── Вкладки поиска людей ────────────────────────────────────────────────── */

/* Пять кнопок не помещались в ряд буквально на несколько пикселей и
   сваливались во вторую строку. Теперь они делят ширину поровну: пока
   колонка шире сотни пикселей, ряд остаётся одним, а на узкой панели
   аккуратно распадается на две строки одинаковых кнопок — вместо обрезанных
   подписей. */
.people-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

.people-tabs button {
  min-width: 0;
  padding: 9px 10px;
  font-size: 13px;
  white-space: nowrap;
}

/* Кнопка сохранения образа стоит под обеими колонками редактора: раньше она
   заканчивала правый столбец и оказывалась выше нижнего края превью. */
.character-actions {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
}