/*
 * au.css — скин полевой игры (Among Us) поверх mc.
 *
 * Это СЛОЙ, а не второй дизайн: разметка и компоненты остаются от `mc`, здесь переопределяются
 * токены и несколько узнаваемых форм. Поэтому скин кладётся на любую страницу двумя строчками —
 * `class="mc au"` на body и эта таблица ПОСЛЕ mc.css, — и ничего не надо переверстывать.
 *
 * Порядок подключения несущий: селекторы вида `body.au .panel` и `body.mc .panel` имеют ОДИНАКОВУЮ
 * специфичность (0,2,0), и при равной выигрывает то, что ниже. Эта таблица обязана идти после
 * mc.css — иначе блочные грани Minecraft перекроют скруглённые. (Та самая ловушка каскада, из-за
 * которой серая кнопка однажды перекрыла .btn--danger.)
 *
 * ШРИФТ НЕ МЕНЯЕТСЯ, и это не лень. У «толстых круглых» шрифтов, которыми пишут Among Us, нет
 * иврита, а на иврите здесь бывает всё: ник, название роли, объявление. Тот же урок, что с
 * Press Start 2P, где в одной строке выходили пиксельные цифры и системные буквы.
 */

body.au {
  /* ── космос вместо земли ──────────────────────────────────────────────
   * Контрасты посчитаны на --panel: текст ≥ 4.5:1, акценты для крупного и для значков.
   */
  --bg-page: #0b0f1c;
  --frame-outer: #2b3755;
  --panel: #1b2338;          /* основная поверхность */
  --panel-2: #141b2c;
  --row-top: #232c45;
  --row-bot: #171f33;
  --slot-bg: #0f1526;
  --bar-olive: #23304d;
  --bar-olive-text: #bcd0ff;  /* 7.4:1 на --bar-olive */
  --edge-light: rgba(255, 255, 255, 0.12);
  --edge-dark: rgba(0, 0, 0, 0.55);
  --border-dark: #05070e;     /* у Among Us всё обведено почти чёрным — это его подпись */
  --text-primary: #f2f6ff;    /* 14.9:1 на --panel */
  --text-secondary: #b9c4e0;  /* 8.1:1 */
  --text-muted: #93a0c2;      /* 5.3:1 */
  --accent-gold: #f5d547;     /* 10.2:1 */
  --accent-emerald: #4ade80;  /* 9.1:1 */
  --accent-purple: #b388ff;   /* 6.3:1 */
  --accent-red: #ff6b5e;      /* 5.9:1 */
  --text-sh: none;            /* пиксельная тень под буквами — язык mc, здесь она грязь */
  --btn-top: #32406a;
  --btn-bot: #222c4a;
  --btn-label: #ffffff;
  --slot-focus-bg: #18203a;
  --slot-edge-light: rgba(255, 255, 255, 0.1);
  --focus-ring: rgba(74, 222, 128, 0.55);

  /*
   * ЦВЕТА РОЛЕЙ — С БУМАЖНЫХ ЗАПИСОК ИЗ ТЗ, а не из вкуса: «Голубая — механик, Розовая — врач,
   * Жёлтая — предатель», белая — экипаж. Ребёнок держит записку в руке и видит тот же цвет на
   * экране; расходиться им нельзя.
   */
  --au-crew: #d6e0f0;
  --au-traitor: #f5f557;
  --au-doctor: #ed54ba;
  --au-mechanic: #6cc8ff;
  --au-visor: #9fd3ff;

  --au-round: 18px;
  --au-round-sm: 12px;
}

/*
 * Светлая тема существует и здесь: кнопка в шапке не должна оказаться мёртвой. Но это «день на
 * станции», а не бумага — поверхности остаются холодными, иначе скин перестаёт быть собой.
 * Специфичность (0,3,0) перебивает `body.au` — токены темы стоят на :root, а body ближе.
 */
:root[data-mc-theme="light"] body.au {
  color-scheme: light;
  --bg-page: #aab6d4;
  --frame-outer: #41517c;
  --panel: #e6ebf8;
  --panel-2: #d6ddf0;
  --row-top: #eef2fc;
  --row-bot: #dbe2f3;
  --slot-bg: #f6f8fe;
  --bar-olive: #c9d6f2;
  --bar-olive-text: #22305a;  /* 8.9:1 */
  --edge-light: rgba(255, 255, 255, 0.85);
  --edge-dark: rgba(0, 0, 0, 0.3);
  --border-dark: #2a3450;
  --text-primary: #101829;    /* 16.1:1 на --panel */
  --text-secondary: #2d3850;  /* 9.6:1 */
  --text-muted: #46536f;      /* 6.1:1 */
  --accent-gold: #8a6500;     /* 5.0:1 */
  --accent-emerald: #1a7a3c;  /* 4.9:1 */
  --accent-purple: #6a3fb5;   /* 6.4:1 */
  --accent-red: #b3251a;      /* 6.5:1 */
  --btn-top: #f2f5fd;
  --btn-bot: #dde4f4;
  --btn-label: #101829;
  --slot-focus-bg: #ffffff;
  --slot-edge-light: rgba(255, 255, 255, 0.9);
  --focus-ring: rgba(26, 122, 60, 0.45);
  --au-crew: #5c6c88;
  --au-traitor: #8a7a00;
  --au-doctor: #a81e74;
  --au-mechanic: #1a5f8a;
  --au-visor: #2f6ea8;
}

/* ── звёздное небо ────────────────────────────────────────────────────────
 * Чистым CSS, без картинок и без анимации: страницу держат открытой в парке полчаса, и мигающие
 * точки стоили бы батареи ровно ни за что. Слой `fixed` позади содержимого и прозрачен для тапов.
 */
body.au::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(2px 2px at 34% 62%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 54%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 86%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(2px 2px at 64% 38%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 48%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(60% 40% at 80% 85%, rgba(107, 47, 187, 0.22), transparent 70%),
    radial-gradient(50% 35% at 10% 10%, rgba(19, 46, 209, 0.18), transparent 70%);
}

/* На светлой теме звёзды — чёрные точки на бумаге, то есть мусор. Остаётся только дымка. */
:root[data-mc-theme="light"] body.au::before {
  background-image:
    radial-gradient(60% 40% at 80% 85%, rgba(107, 47, 187, 0.12), transparent 70%),
    radial-gradient(50% 35% at 10% 10%, rgba(19, 46, 209, 0.1), transparent 70%);
}

/* ── формы: вместо блочных граней — скругления и толстая обводка ───────── */

body.au .panel {
  border: 3px solid var(--border-dark);
  border-radius: var(--au-round);
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 10px 24px rgba(0, 0, 0, 0.45);
}

body.au .btn {
  border: 3px solid var(--border-dark);
  border-radius: var(--au-round-sm);
  /* Плита с падающей тенью и «нажатием» вниз: у Among Us кнопки именно такие, и это читается
     как нажимаемость без подписи. */
  box-shadow: 0 4px 0 var(--border-dark), 0 6px 10px rgba(0, 0, 0, 0.35);
  text-shadow: none;
  transform: translateY(0);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

body.au .btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--border-dark), 0 2px 6px rgba(0, 0, 0, 0.35);
}

body.au .btn:disabled {
  /* Выключенная кнопка обязана выглядеть выключенной: прозрачность на цветной плите всё ещё
     читается как живая — этим уже обожглись на «Крафт собран». */
  filter: grayscale(1);
  box-shadow: 0 2px 0 var(--border-dark);
  transform: none;
}

body.au input,
body.au select,
body.au textarea {
  border: 3px solid var(--border-dark);
  border-radius: var(--au-round-sm);
  box-shadow: none;
}

body.au .message {
  border: 3px solid var(--border-dark);
  border-radius: var(--au-round-sm);
}

body.au .divider {
  border: 0;
  border-top: 2px solid var(--border-dark);
  opacity: 0.8;
}

/* ── карточка роли и шкала команды ────────────────────────────────────── */

body.au .game-card {
  border-width: 4px;
  border-radius: var(--au-round);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.45);
}

body.au .game-bar,
body.au .game-admin-bar {
  border: 3px solid var(--border-dark);
  border-radius: 999px;
  box-shadow: none;
  overflow: hidden;
}

body.au .game-bar__fill {
  border-radius: 999px;
  background: linear-gradient(180deg, #8affb0, var(--accent-emerald));
}

body.au .game-card.is-crew .au-crewmate { color: var(--au-crew); }
body.au .game-card.is-traitor .au-crewmate { color: var(--au-traitor); }
body.au .game-card.is-doctor .au-crewmate { color: var(--au-doctor); }
body.au .game-card.is-mechanic .au-crewmate { color: var(--au-mechanic); }

/* Роль ещё не открыта: силуэт без цвета — тот самый «кто-то из нас». */
body.au .au-crewmate.is-unknown { color: #46536f; }

body.au .game-hero__title {
  letter-spacing: 0.01em;
  font-weight: 700;
}

body.au .au-crewmate.is-crew { color: var(--au-crew); }
body.au .au-crewmate.is-traitor { color: var(--au-traitor); }

/*
 * Рамка карточки красится ЦВЕТОМ РОЛИ, а не опасности.
 *
 * В базовых правилах страницы `is-traitor` — это красный (цвет тревоги), и рядом с жёлтой
 * фигурой предателя выходило две разные подсказки об одном. Здесь цвет один и тот же, и это
 * цвет бумажной записки, которую ребёнок держит в руке.
 */
body.au .game-card.is-crew { border-color: var(--au-crew); }
body.au .game-card.is-traitor { border-color: var(--au-traitor); }
body.au .game-card.is-doctor { border-color: var(--au-doctor); }
body.au .game-card.is-mechanic { border-color: var(--au-mechanic); }

/*
 * На экране фигура — КОСТЮМ, не цвет бумажной записки.
 *
 * Записка в руке остаётся жёлтой / розовой / голубой (токены выше). Сосед, глядя в телефон,
 * должен видеть шляпу, маску, штаны — то, чем роли различаются на площадке.
 */
body.au .game-card.is-traitor .au-crewmate__hat,
body.au .au-crewmate.is-traitor .au-crewmate__hat {
  display: inline;
}

body.au .game-card.is-doctor .au-crewmate__cap,
body.au .game-card.is-doctor .au-crewmate__mask,
body.au .au-crewmate.is-doctor .au-crewmate__cap,
body.au .au-crewmate.is-doctor .au-crewmate__mask {
  display: inline;
}

body.au .game-card.is-traitor { border-color: #c17a3a; }
body.au .game-card.is-traitor .au-crewmate,
body.au .au-crewmate.is-traitor { color: #c17a3a; }
body.au .au-crewmate__hat-crown { fill: currentColor; }
body.au .au-crewmate__hat-brim { fill: #6e3f1c; }
body.au .au-crewmate__hat-band { fill: #3a2314; }

body.au .game-card.is-doctor { border-color: #4db887; }
body.au .game-card.is-doctor .au-crewmate,
body.au .au-crewmate.is-doctor { color: #4db887; }
body.au .au-crewmate__mask { fill: #eaf6fa; }
body.au .au-crewmate__cap { fill: currentColor; }

body.au .game-card.is-mechanic { border-color: #f0c43a; }
body.au .game-card.is-mechanic .au-crewmate,
body.au .au-crewmate.is-mechanic { color: #f0c43a; }
body.au .game-card.is-mechanic .au-crewmate__legs,
body.au .au-crewmate.is-mechanic .au-crewmate__legs { fill: #3a6fc4; }