/* Noto Sans Mono 400–700, self-hosted subsets from Google Fonts (OFL-1.1). */
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/noto-sans-mono/noto-sans-mono-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/noto-sans-mono/noto-sans-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/noto-sans-mono/noto-sans-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/noto-sans-mono/noto-sans-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* /new/ — Interoves shell (tokens drive accent; avoid Wordle/SaaS defaults) */
:root {
  --bg: #f5f7f6;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #5c6560;
  --accent: #1f6f5e;
  --accent-hover: #185849;
  --border: #d0d5d2;
  --tile: #e6ebe8;
  --danger: #b61f1f;
  --danger-soft: rgba(182, 31, 31, 0.1);
  --success-soft-bg: rgba(31, 111, 94, 0.12);
  --success-soft-border: rgba(31, 111, 94, 0.35);
  /* Таблица результатов: фон + цвет текста в ячейках (согласовано с accent/warning) */
  --results-cell-full-bg: #d7ebe4;
  --results-cell-full-fg: var(--text);
  --results-cell-some-bg: #f3e8c8;
  --results-cell-some-fg: var(--text);
  --results-cell-partial-bg: #dce8f0;
  --results-cell-partial-fg: var(--text);
  --results-cell-zero-bg: #f5d6d6;
  --results-cell-zero-fg: var(--text);
  --results-cell-no-bg: #e8eef0;
  --results-cell-no-fg: var(--text);
  --results-row-me-border: var(--accent);
  /* Якоря / scrollIntoView: запас под sticky-шапку (.new-nav) */
  --new-ui-scroll-margin-top: 5.5rem;
  /* Responsive new UI — источник правды; см. agents/AGENTS.md */
  --new-break-wide: 920px;
  --new-wrap-narrow: 36rem;
  --new-wrap-wide: 60rem;
  --raddle-ladder-max: 26rem;
  --raddle-clues-min: 12rem;
  --raddle-layout-stack: 40rem;
  /* Список .new-task: колонка «сложность / Результаты», если карточка уже */
  --new-task-actions-stack: 30rem;
  --raddle-before: #c9a227;
  --raddle-focus: var(--accent);
  --raddle-after: #3b6ea5;
  /* У Noto/DejaVu заглавная кириллическая Г — простой угол без нижней полки. Arial — безопасный немоноширинный fallback. */
  --new-font-mono: "Noto Sans Mono", "DejaVu Sans Mono", Arial, sans-serif;
  /* Buttons / focus / shared controls (new UI chrome) */
  --focus-ring: color-mix(in srgb, var(--accent) 45%, transparent);
  --btn-radius: 6px;
  --btn-height: 2.375rem;
  --btn-height-mini: 2rem;
  --btn-pad-x: 1rem;
  --btn-pad-x-mini: 0.75rem;
  --btn-font: 0.9rem;
  --btn-font-mini: 0.85rem;
  --btn-weight: 600;
  --control-radius: var(--btn-radius);
  --control-height: var(--btn-height);
  --card-radius: 8px;
  --warning: #b8953d;
  --warning-hover: #a18232;
  --difficulty-icon: #d85c8a;
  --success: var(--accent);
  font-size: 16px;
}

/* Тёмная палитра: только при классе .new-ui-dark (ставится скриптом из меню / системы) */
html.new-ui-dark {
  --bg: #121413;
  --surface: #1a1c1b;
  --text: #d7dadc;
  --muted: #9aa3a0;
  --accent: #3fb89a;
  --accent-hover: #5ec9ad;
  --border: #3a3f3d;
  --tile: #2a2e2c;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --success-soft-bg: rgba(63, 184, 154, 0.18);
  --success-soft-border: rgba(63, 184, 154, 0.42);
  --results-cell-full-bg: #1a3028;
  --results-cell-full-fg: #c8f0e0;
  --results-cell-some-bg: #3d3518;
  --results-cell-some-fg: #f5e7a8;
  --results-cell-partial-bg: #243040;
  --results-cell-partial-fg: #c5d8eb;
  --results-cell-zero-bg: #3d2226;
  --results-cell-zero-fg: #f8c4c8;
  --results-cell-no-bg: #1c2624;
  --results-cell-no-fg: #b8d4cc;
  --results-row-me-border: var(--accent);
  --focus-ring: color-mix(in srgb, var(--accent) 50%, transparent);
  --warning: #d4b45c;
  --warning-hover: #e0c574;
  --difficulty-icon: #f08eb3;
  --success: var(--accent);
  --raddle-before: #d4b45c;
  --raddle-after: #6b9fd4;
}

*, *::before, *::after { box-sizing: border-box; }

.new-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.new-ui {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

html.new-ui-dark body.new-ui {
  color-scheme: dark;
}

.new-wrap {
  max-width: var(--new-wrap-narrow);
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
}

/* min-width must match --new-break-wide (lint: scripts/lint_new_ui_responsive.sh) */
@media (min-width: 920px) {
  .new-wrap {
    max-width: var(--new-wrap-wide);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Nav */
.new-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
}

.new-nav__inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (min-width: 920px) {
  .new-nav__inner {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.new-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
  transition: color 0.14s ease;
}

.new-nav__logo {
  height: 22px;
  width: auto;
  vertical-align: middle;
  display: inline-block;
}

.new-nav__brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.new-nav__brand-text {
  line-height: 1;
}

.new-nav__brand:hover {
  color: var(--accent);
}

.new-nav__brand:focus {
  outline: none;
}

.new-nav__brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--control-radius);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: center;
}

.new-nav__focused {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-left: auto;
}

.new-nav__focused > a {
  color: var(--text);
  font-size: 0.92rem;
  text-decoration: none;
}

.new-nav__focused > a:hover {
  color: var(--accent);
}

.new-clock {
  color: var(--muted);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  line-height: 1.2;
}

/* Переключатель темы: light / dark / system */
.new-theme-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  overflow: hidden;
  background: var(--surface);
}

.new-theme-switch__btn {
  appearance: none;
  margin: 0;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.new-theme-switch__btn .ph {
  display: block;
  width: 1em;
  text-align: center;
  font-size: 1.05em;
  line-height: 1;
}

.new-theme-switch__btn:last-child {
  border-right: none;
}

.new-theme-switch__btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.new-theme-switch__btn.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}

.new-theme-switch__btn:focus {
  outline: none;
}

.new-theme-switch__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

.new-nav__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.35rem 0;
  border-radius: var(--control-radius);
}

.new-nav__loginbtn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.35rem 0;
  cursor: pointer;
  border-radius: var(--control-radius);
}

.new-nav__loginbtn:hover {
  color: var(--accent);
}

.new-nav__links a:hover,
.new-nav__links a[aria-current="page"] {
  color: var(--accent);
}

.new-nav__links a:focus,
.new-nav__loginbtn:focus {
  outline: none;
}

.new-nav__links a:focus-visible,
.new-nav__loginbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
  color: var(--accent);
}

.new-mode-toggle,
.new-nav__links a.new-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--btn-height-mini);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.2rem 0.6rem;
  line-height: 1.2;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
}

.new-mode-toggle:hover,
.new-nav__links a.new-mode-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-mode-toggle:focus,
.new-nav__links a.new-mode-toggle:focus {
  outline: none;
}

.new-mode-toggle:focus-visible,
.new-nav__links a.new-mode-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: none;
  z-index: 1;
  position: relative;
}

.new-mode-toggle--locked {
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
}

/* Tiles / cards */
.new-tile {
  display: block;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--control-radius);
  padding: 1.25rem 1rem;
  margin-bottom: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.1s;
}

.new-tile:hover {
  border-color: var(--accent);
}

.new-tile h2 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.new-tile p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Баннер «Заказать игру» на главной */
.new-hub-order-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.new-hub-order-banner__text {
  flex: 1 1 14rem;
  min-width: 0;
}

.new-hub-order-banner__kicker {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.new-hub-order-banner__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
}

.new-hub-order-banner__cta {
  flex-shrink: 0;
  margin: 0;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .new-hub-order-banner__cta {
    width: 100%;
    text-align: center;
  }
}

/* Группы разделов на главной */
.new-hub-group {
  margin-bottom: 1.5rem;
}

.new-hub-group__title {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.new-hub-group__intro {
  margin: -0.35rem 0 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Серверный onboarding для посетителя без game_start: разметка сразу занимает
   итоговое место, поэтому проверка прогресса не вызывает layout shift. */
.new-first-visit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.new-first-visit__body {
  min-width: 0;
}

.new-first-visit__kicker {
  margin: 0 0 0.15rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.new-first-visit__title {
  margin: 0 0 0.25rem;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.3;
}

.new-first-visit__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.new-first-visit__cta {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 560px) {
  .new-first-visit {
    align-items: stretch;
    flex-direction: column;
  }

  .new-first-visit__cta {
    text-align: center;
  }
}

/* Карточки разделов на главной */
.new-hub-sections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0;
}

.new-hub-sections-grid--daily-primary {
  margin-bottom: 1.5rem;
}

.new-hub-section__badge-new {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .12rem .45rem;
  background: #d92d20;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .04em;
}

/* max-width must stay one below --new-break-wide (lint: scripts/lint_new_ui_responsive.sh). */
@media (max-width: 919px) {
  .new-hub-sections-grid--daily {
    grid-template-columns: 1fr;
  }
}

/* На широком .new-wrap Салатик и Алфавитка идут рядом. */
@media (min-width: 920px) {
  .new-hub-sections-grid--daily-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .new-hub-sections-grid {
    grid-template-columns: 1fr;
  }
}

.new-hub-sections-grid > .new-hub-section--wide {
  grid-column: 1 / -1;
  margin-bottom: 0; /* gap сетки, не margin у --wide (он для Десяточек вне грида) */
}

.new-hub-section {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 1.15rem 1rem;
  margin-bottom: 0;
  background: var(--surface);
}

.new-hub-section--wide {
  margin-bottom: 1.5rem;
}

.new-hub-section--today {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: inset 3px 0 0 var(--accent);
}

.new-hub-section--recommended {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.new-hub-section__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.new-hub-section__onboarding-badge {
  display: inline-flex;
  margin: 0 0 0.7rem;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

/* Landing /start/: те же токены, карточки и responsive-границы, что у главной. */
.new-start-page {
  padding-top: 0.35rem;
}

.new-start-hero {
  max-width: 42rem;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.new-start-hero__kicker {
  margin: 0 0 0.25rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.new-start-hero .new-heading--page {
  margin-bottom: 0.55rem;
}

.new-start-hero__lead {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.new-start-games {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-bottom: 2rem;
}

.new-start-game {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.2rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
}

.new-start-game--recommended {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.new-start-game__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.new-start-game__icon {
  color: var(--accent);
  font-size: 1.45rem;
}

.new-start-game__title {
  margin: 0;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1.3;
}

.new-start-game__badge {
  margin: 0 0 0.75rem;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-start-game__desc {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.new-start-game__duration {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.8rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.new-start-game__cta {
  width: 100%;
  margin: auto 0 0;
  text-align: center;
}

.new-start-advanced {
  padding-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.new-start-advanced .new-heading {
  margin-bottom: 0.35rem;
}

.new-start-advanced > p {
  margin: 0 0 0.65rem;
  color: var(--muted);
}

.new-start-advanced__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
}

/* min-width must match --new-break-wide (lint: scripts/lint_new_ui_responsive.sh) */
@media (min-width: 920px) {
  .new-start-games {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Second onboarding pass: one dominant first action, then compact alternatives. */
.new-start-page {
  max-width: 46rem;
  margin: 0 auto;
  padding-top: 0.1rem;
}

.new-start-hero {
  margin-bottom: 1rem;
}

.new-start-hero__lead {
  max-width: 42rem;
  margin: 0 auto;
}

.new-start-hero__value {
  margin: 0.7rem 0 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
}

.new-start-primary {
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.new-start-primary__head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.new-start-primary__icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--accent);
  font-size: 1.7rem;
}

.new-start-primary__badge {
  margin: 0 0 0.35rem;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-start-primary__title {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.25;
}

.new-start-primary__desc {
  margin: 0.7rem 0 0.45rem;
  color: var(--muted);
}

.new-start-primary__duration {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.new-start-primary__cta {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.8rem 1.25rem;
  font-size: 1.02rem;
  text-align: center;
}

.new-start-alternatives {
  margin-top: 1.5rem;
}

.new-start-alternatives__title {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
}

.new-start-alternatives__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.new-start-alternative {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
}

.new-start-alternative__body {
  min-width: 0;
}

.new-start-alternative__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.new-start-alternative__head > i {
  color: var(--accent);
  font-size: 1.15rem;
}

.new-start-alternative__head h3 {
  margin: 0;
  font-size: 1rem;
}

.new-start-alternative__head .new-pill {
  margin-left: auto;
}

.new-start-alternative p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.new-start-alternative > .new-btn {
  margin: auto 0 0;
}

.new-start-all-games {
  margin: 1.1rem 0 0;
  text-align: center;
}

@media (max-width: 560px) {
  .new-nav__focused {
    gap: 0.75rem;
  }

  .new-nav__focused > a,
  .new-nav__focused .new-nav__loginbtn {
    font-size: 0.84rem;
  }

  .new-start-hero {
    margin-bottom: 0.85rem;
    text-align: left;
  }

  .new-start-hero .new-heading--page {
    margin-bottom: 0.35rem;
    font-size: 1.65rem;
  }

  .new-start-hero__lead {
    font-size: 0.92rem;
    line-height: 1.42;
  }

  .new-start-hero__value {
    margin-top: 0.5rem;
    font-size: 0.81rem;
  }

  .new-start-primary {
    padding: 1rem;
  }

  .new-start-primary__badge {
    font-size: 0.72rem;
  }

  .new-start-primary__title {
    font-size: 1.22rem;
  }

  .new-start-primary__desc {
    margin-top: 0.55rem;
    font-size: 0.9rem;
  }

  .new-start-primary__duration {
    margin-bottom: 0.65rem;
  }

  .new-start-alternatives__grid {
    grid-template-columns: 1fr;
  }

  .new-start-alternative {
    flex-direction: row;
    align-items: center;
  }

  .new-start-alternative > .new-btn {
    flex: 0 0 auto;
    margin: 0;
  }
}

@media (max-width: 360px) {
  .new-start-hero__kicker {
    display: none;
  }

  .new-start-alternative {
    align-items: stretch;
    flex-direction: column;
  }

  .new-start-alternative > .new-btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .new-start-alternatives__grid {
    grid-template-columns: 1fr;
  }
}

.new-onboarding-followup {
  margin: 1.5rem 0;
  padding: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.new-onboarding-followup__kicker {
  margin: 0 0 0.15rem;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.new-onboarding-followup__title {
  margin: 0 0 0.8rem;
  font-size: 1.25rem;
}

.new-onboarding-followup__next-label {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.new-onboarding-followup__primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
}

.new-onboarding-followup__primary strong,
.new-onboarding-followup__primary span {
  display: block;
}

.new-onboarding-followup__primary span {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.new-onboarding-followup__primary .new-btn {
  flex: 0 0 auto;
  margin: 0;
}

.new-onboarding-followup__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin-top: 0.8rem;
  font-size: 0.9rem;
}

.new-hub-section__rules-cta {
  margin: 0 0 0 auto;
}

.new-onboarding-social {
  position: relative;
  margin-top: 0.9rem;
  padding: 0.85rem 2.5rem 0.9rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  min-width: 0;
}

.new-onboarding-social[hidden] {
  display: none !important;
}

.new-onboarding-social__title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  overflow-wrap: break-word;
}

.new-onboarding-social__text {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.new-onboarding-social .new-btn {
  margin: 0;
}

.new-onboarding-social__secondary {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow-wrap: break-word;
}

.new-onboarding-social__close {
  appearance: none;
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.new-onboarding-social__close:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.new-onboarding-social__close:focus {
  outline: none;
}

.new-onboarding-social__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .new-onboarding-followup__primary {
    align-items: stretch;
    flex-direction: column;
  }

  .new-onboarding-followup__primary .new-btn {
    text-align: center;
  }

  .new-onboarding-social .new-btn {
    width: 100%;
  }
}

.new-hub-section__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.new-hub-section__title-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  transition: color 0.14s ease;
}

.new-hub-section__title-link:hover {
  color: var(--accent);
}

.new-hub-section__title-link:focus {
  outline: none;
}

.new-hub-section__title-link:focus-visible {
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: 2px;
}

/*
 * Phosphor semantic colors
 * - danger: error / wrong / dislike-active
 * - warning: tips (lightbulb), caution
 * - accent: success / ok / hub section icons / like-active
 * - muted: idle chrome (nav, rules, eye, bug, arrows) → accent on hover/active
 */
.new-ph--danger { color: var(--danger); }
.new-ph--warning { color: var(--warning); }
.new-ph--accent { color: var(--accent); }
.new-ph--muted { color: var(--muted); }

/* Hub section icons (incl. week-task star) — accent, not warning-yellow */
.new-section-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.1em;
  text-align: center;
  color: var(--accent);
  opacity: 0.9;
}

.new-hub-section__icon {
  font-size: 0.95em;
}

.new-nav__section {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.35rem 0.3rem;
}

/* Section shortcuts: icon-only; name via title/aria-label */
.new-nav__section-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.new-nav__section .new-section-icon {
  color: inherit;
  opacity: 0.85;
  font-size: 1.15em;
}

.new-nav__section:hover .new-section-icon,
.new-nav__section[aria-current="page"] .new-section-icon {
  color: var(--accent);
  opacity: 1;
}

.new-nav__sections {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  min-width: 0;
}

.new-nav__end {
  display: flex;
  align-items: center;
  gap: 0.35rem 1rem;
  margin-left: auto;
}

.new-nav__quick {
  appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
}

.new-nav__quick .ph {
  font-size: 1.15rem;
  line-height: 1;
}

.new-nav__quick:hover,
.new-nav__quick[aria-expanded="true"],
.new-nav__quick[aria-current="page"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-nav__quick:focus {
  outline: none;
}

.new-nav__quick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-nav__drawer {
  display: none;
}

.new-nav__drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 1rem 0.85rem;
}

.new-nav__drawer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.new-nav__drawer-link .ph {
  opacity: 0.85;
  font-size: 1.1em;
}

.new-nav__drawer-link:hover,
.new-nav__drawer-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}

.new-nav__drawer-link--muted {
  color: var(--muted);
}

.new-nav__drawer-link--btn {
  font: inherit;
}

.new-clock--drawer {
  align-self: flex-start;
  margin-bottom: 0.15rem;
}

.new-theme-switch--drawer {
  align-self: flex-start;
  margin-bottom: 0.35rem;
}

@media (max-width: 919px) {
  :root {
    --new-ui-scroll-margin-top: 3.5rem;
  }
  .new-nav {
    position: sticky;
    padding: 0.5rem 0.65rem;
  }
  .new-nav__inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
  }
  .new-nav__brand-text {
    display: none;
  }
  .new-nav__sections {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.1rem 0;
  }
  .new-nav__sections::-webkit-scrollbar {
    display: none;
  }
  .new-nav__section {
    flex: 0 0 auto;
    padding: 0.4rem 0.45rem;
  }
  .new-nav__end {
    flex: 0 0 auto;
    gap: 0.3rem;
    margin-left: 0;
  }
  .new-nav__quick {
    display: inline-flex;
  }
  .new-nav__links {
    display: none;
  }
  .new-nav__drawer {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 9;
    max-height: calc(100vh - 3.5rem);
    max-height: calc(100dvh - 3.5rem);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 10%, transparent);
  }

  .new-nav__drawer-inner {
    gap: 0.25rem;
    padding: 0.5rem 0.65rem 0.65rem;
  }

  .new-nav__drawer-link {
    padding: 0.5rem 0.55rem;
  }

  .new-nav__drawer.is-open {
    display: block;
  }
}

.new-mode-toggle .ph {
  opacity: 0.85;
}

.new-hub-section__badge-today {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.new-hub-section__desc {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}

.new-hub-section__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.new-hub-section__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0 0 0.5rem;
}

.new-hub-section__cta {
  margin: 0;
}

.new-hub-section__ctas .new-hub-section__cta {
  margin-bottom: 0;
}

.new-hub-section__solved {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  line-height: 1;
  cursor: default;
}

/* display: inline-flex выше иначе перебивает атрибут hidden */
.new-hub-section__solved[hidden] {
  display: none !important;
}

.new-hub-section__solved .ph {
  font-size: 2rem;
}

.new-tooltip--above {
  left: 50%;
  bottom: calc(100% + 0.35rem);
  transform: translateX(-50%) translateY(0.15rem);
}

.new-floating-tooltip {
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(26rem, calc(100vw - 1rem));
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.12);
  font-size: 0.8rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.15rem);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.new-floating-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.new-hub-section__solved-tip {
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.new-hub-section__streak {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.new-hub-section__streak .ph {
  font-size: 1.1rem;
}

.new-hub-section__streak--active {
  color: #e53924;
  filter: drop-shadow(0 0 5px color-mix(in srgb, #ff3b20 62%, transparent));
}

.new-hub-section__streak--active .ph-fire {
  color: #f0442d;
  animation: daily-solve-flame-flicker 1.15s ease-in-out infinite alternate;
}

html.new-ui-dark .new-hub-section__streak--active .ph-fire {
  color: #ff6248;
}

@media (prefers-reduced-motion: reduce) {
  .new-hub-section__streak--active .ph-fire { animation: none; }
}

.new-hub-section__solved:hover .new-hub-section__solved-tip,
.new-hub-section__solved:focus-visible .new-hub-section__solved-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.new-hub-section__soon {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.new-hub-section__soon--announce {
  color: var(--danger);
  font-weight: 600;
}

.new-hub-section__footer {
  margin: 0.35rem 0 0;
}

.new-hub-section__chat {
  margin: 0.35rem 0 0;
}

.new-hub-section__announce {
  margin-top: 0.85rem;
}

.new-hub-section__announce .new-game-card {
  margin-bottom: 0;
}

/* Лесенка дня (главная) — алиасы для совместимости с .new-hub-section */
.new-daily-ladder {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 1.15rem 1rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
}

.new-daily-ladder--today {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: inset 3px 0 0 var(--accent);
}

.new-daily-ladder__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.new-daily-ladder__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.new-daily-ladder__badge-today {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.new-daily-ladder__desc {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}

.new-daily-ladder__cta {
  margin: 0 0 0.5rem;
}

.new-daily-ladder__cta--solved {
  background: color-mix(in srgb, var(--accent) 75%, var(--surface));
  border-color: var(--accent);
}

.new-daily-ladder__status {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.new-daily-ladder__soon {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.new-daily-ladder__footer {
  margin: 0.35rem 0 0;
}

.new-task.new-task--today {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, var(--border));
  outline-offset: 2px;
}

/* Shared archive calendar for scheduled daily games. */
.daily-archive { position: relative; }
.daily-archive__month-nav {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: .7rem; min-height: 2.75rem; margin: 0 0 .7rem;
}
.daily-archive__month-arrow, .daily-archive__month-picker {
  min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center;
  justify-content: center; border: 0; background: transparent; color: var(--text);
  text-decoration: none; border-radius: .5rem; font: inherit; cursor: pointer;
}
.daily-archive__month-arrow:hover,
.daily-archive__month-arrow:focus-visible { background: var(--surface); color: var(--accent); }
.daily-archive__month-picker {
  appearance: none; -webkit-appearance: none; padding: 0;
}
.daily-archive__month-picker[aria-expanded="true"] {
  background: var(--surface); color: var(--accent);
}
.daily-archive__month-picker:focus { outline: none; }
.daily-archive__month-picker:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.daily-archive__month-arrow.is-disabled { color: var(--muted); opacity: .45; }
.daily-archive__month-picker { font-weight: 700; gap: .45rem; }
.daily-archive__months {
  position: absolute; z-index: 3; top: calc(100% - .15rem); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem;
  width: min(14rem, calc(100vw - 2rem)); padding: .45rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: .65rem; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.14);
}
.daily-archive__months[hidden] { display: none; }
.daily-archive__months a { padding: .55rem .65rem; border-radius: .4rem; color: var(--text); text-decoration: none; }
.daily-archive__months a:hover, .daily-archive__months a:focus-visible, .daily-archive__months a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.daily-archive__calendar { display: grid; gap: .2rem; width: min(100%, 22rem); margin: 0 auto 1.1rem; }
.daily-archive__weekdays, .daily-archive__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; }
.daily-archive__weekdays { color: var(--muted); font-size: .72rem; text-align: center; }
.daily-archive__day { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; color: var(--muted); }
.daily-archive__day > a, .daily-archive__day > span { width: 2.35rem; height: 2.35rem; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; }
.daily-archive__day > a { color: var(--text); text-decoration: none; font-weight: 650; background: var(--surface); }
.daily-archive__day--partial > a { background: color-mix(in srgb, var(--warning) 22%, var(--surface)); }
.daily-archive__day--solved > a { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.daily-archive__day--available > a:hover, .daily-archive__day--available > a:focus-visible { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent); }
.daily-archive__day--today > a, .daily-archive__day--today > span { box-shadow: 0 0 0 2px var(--accent); }
.daily-archive__day--completed > a { color: var(--text); }
.daily-archive__day--locked > a { background: color-mix(in srgb, var(--warning) 26%, var(--surface)); color: #5b4700; font-weight: 750; }
.club-lock-icon { position: absolute; right: -.2rem; bottom: -.2rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--warning); color: #1a1a1a; font-size: .68rem; }
.daily-archive__day .ph-check-circle { position: absolute; right: -.15rem; bottom: -.15rem; font-size: 1rem; background: var(--surface); border-radius: 50%; }
html.new-ui-dark .daily-archive__day--locked > a { color: #17130a; font-weight: 850; }
.daily-archive__day.is-outside { visibility: hidden; }
.daily-archive__day.is-disabled { opacity: .42; }
.daily-archive__pager { margin-top: .75rem; }
.daily-archive__card { min-height: 5rem; padding-top: 1.05rem; padding-bottom: 1.05rem; scroll-margin-top: calc(var(--new-ui-scroll-margin-top) + 5px); }
.daily-archive__card--focus { outline: 3px solid var(--accent); outline-offset: 2px; transition: outline-color .3s; }
.daily-archive__card:target { outline: 3px solid var(--accent); outline-offset: 2px; }
.club-lock-badge { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; border-radius: 50%; background: var(--warning); color: #1a1a1a; font-size: .85rem; }
.new-task__body.is-archive-locked { cursor: pointer; }
.new-daily-game-header__nav-button.is-archive-locked { color: #6b5500; background: color-mix(in srgb, var(--warning) 24%, var(--surface)); }
.new-tg-pager__link:has(.ph-lock-key) { color: #6b5500; }
.new-hub-group__heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.new-hub-group__heading-row .new-hub-group__title { margin-bottom: .85rem; }
.club-subscription-cta {
  width: var(--btn-height-mini);
  min-width: var(--btn-height-mini);
  height: var(--btn-height-mini);
  min-height: var(--btn-height-mini);
  padding: 0;
  flex: 0 0 var(--btn-height-mini);
  font-size: 1.1rem;
  line-height: 1;
  white-space: nowrap;
}
.club-member-chat { margin-top: 1rem; }
body.new-modal-open { overflow: hidden; }
@media (max-width: 560px) {
  .daily-archive__day > a, .daily-archive__day > span { width: 2.2rem; height: 2.2rem; }
  .daily-archive__month-nav { margin-left: -.35rem; margin-right: -.35rem; }
}

/* Mobile hub: keep the three daily-game blocks evenly spaced. */
@media (max-width: 640px) {
  .new-hub-sections-grid--daily-primary {
    margin-bottom: .75rem;
  }

  .new-hub-group__heading-row--with-subscription {
    margin-bottom: .75rem;
  }
}

.new-heading {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.5rem 0 0.85rem;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.25;
}

/* Page H1 — larger than mid-page section headings */
.new-heading--page {
  font-size: 1.55rem;
  margin-top: 0;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.new-category {
  margin-bottom: 1.5rem;
}

.new-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  min-width: 0;
  container-type: inline-size;
  container-name: new-task;
}

.new-task__body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-decoration: none;
  color: inherit;
}

.new-task:hover {
  border-color: var(--accent);
}

.new-task small {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8rem;
}

.new-task__date {
  display: block;
  margin-top: 0.2rem;
}

.new-task__action {
  flex: 0 0 auto;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.new-task__action:empty {
  display: none;
}

.new-task__actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.65rem;
}

.new-task__actions:empty {
  display: none;
}

.new-task__results {
  flex: 0 0 auto;
  padding: 0.25rem 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.new-task__results:hover {
  color: var(--accent);
}

.new-task__results:focus {
  outline: none;
}

.new-task__results:focus-visible {
  color: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-task__action .new-pill {
  font-size: 0.75rem;
  text-transform: lowercase;
}

/* A solved daily task gets a small flame before its OK badge. */
.daily-solve-flame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #f2a34a;
  font-size: 1.08rem;
  line-height: 1;
  cursor: help;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, #f2a34a 34%, transparent));
}

.daily-solve-flame--late {
  color: var(--muted);
  filter: none;
}

.daily-solve-flame--streak {
  color: #f0442d;
  filter: drop-shadow(0 0 5px color-mix(in srgb, #ff3b20 72%, transparent));
  animation: daily-solve-flame-flicker 1.15s ease-in-out infinite alternate;
}

.daily-solve-flame--streak::before,
.daily-solve-flame--streak::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0.08rem;
  width: 0.9rem;
  height: 1rem;
  border-radius: 50% 50% 45% 45%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 75%, rgba(255, 91, 27, .58), rgba(255, 48, 27, .2) 48%, transparent 74%);
  transform: translateX(-50%);
  filter: blur(2px);
}

.daily-solve-flame--streak::before {
  animation: daily-solve-fire-glow 900ms ease-in-out infinite alternate;
}

.daily-solve-flame--streak::after {
  width: 1.25rem;
  height: 1.35rem;
  opacity: .72;
  animation: daily-solve-fire-glow 1.2s ease-in-out infinite alternate-reverse;
}

@keyframes daily-solve-flame-flicker {
  from { transform: translateY(1px) scale(.96) rotate(-3deg); }
  to { transform: translateY(-1px) scale(1.08) rotate(3deg); }
}

@keyframes daily-solve-fire-glow {
  from { transform: translateX(-50%) scale(.78, .82) translateY(2px); opacity: .52; }
  to { transform: translateX(-50%) scale(1.12, 1.16) translateY(-2px); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-solve-flame--streak,
  .daily-solve-flame--streak::before,
  .daily-solve-flame--streak::after { animation: none; }
}

/* Узкая карточка (телефон): шкала и «Результаты» друг под другом.
   Литерал 30rem must match --new-task-actions-stack (@container + var() не везде). */
@container new-task (max-width: 30rem) {
  .new-task__body,
  .new-task__actions {
    align-self: flex-start;
  }

  .new-task__actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
  }
}

/* Forms — heights/radius aligned with .new-btn */
.new-form label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 1rem 0 0.35rem;
}

.new-form input[type="text"],
.new-form input[type="email"],
.new-form input[type="url"],
.new-form input[type="password"],
.new-form select,
.new-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--btn-height);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.35;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.new-form textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.new-form select {
  cursor: pointer;
}

/* Profile: compact name fields */
.new-profile-names input[type="text"] {
  min-height: var(--btn-height-mini);
  padding: 0.4rem 0.65rem;
  font-size: 1rem;
}

.new-profile-timezone {
  margin-top: 0.75rem;
}

.new-profile-accounts-lead {
  margin-top: 0;
}

.new-profile-accounts-row {
  margin-top: 0.5rem;
}

.new-profile-accounts-row > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.new-profile-accounts-foot {
  margin-bottom: 0.5rem;
}

.new-account-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.new-account-row {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--tile) 28%, var(--surface));
}

.new-account-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.7rem;
  font-size: 1.25rem;
  background: var(--surface);
  color: var(--text);
}

.new-account-icon--google { color: #4285f4; }
.new-account-icon--yandex {
  color: #FC3F1D;
  font-weight: 700;
  font-size: 1.05rem;
}
.new-account-icon--vk { color: #2787f5; }
.new-account-icon--telegram { color: #229ed9; }

.new-account-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  min-width: 0;
}

.new-account-main strong { flex: 0 0 auto; }
.new-account-meta {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.88rem;
}

.new-account-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.new-account-status--ok { color: var(--accent); }
.new-account-action {
  margin-left: auto;
  padding: 0.2rem 0.45rem;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.new-account-action:hover { text-decoration: underline; }
.new-account-action--danger { color: var(--danger); }

@media (max-width: 559px) {
  .new-account-action { margin-left: 0; }
}

.new-profile-hint {
  margin: 0.35rem 0 0;
}

.new-profile-avatar-hint {
  margin: 0.5rem 0 0;
}

.new-form input:focus,
.new-form select:focus,
.new-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-form input:disabled,
.new-form select:disabled,
.new-form textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--tile) 50%, var(--surface));
}

@media (prefers-reduced-motion: reduce) {
  .new-form input[type="text"],
  .new-form input[type="email"],
  .new-form input[type="url"],
  .new-form input[type="password"],
  .new-form select,
  .new-form textarea {
    transition: none;
  }
}

.new-field-error {
  display: block;
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.new-two {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .new-two {
    grid-template-columns: 1fr 1fr;
  }
}

.new-profile-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.new-profile-names {
  flex: 1 1 16rem;
  min-width: 16rem;
}

.new-nav__badge,
.new-nav__inline-badge {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
}

.new-nav__badge {
  position: absolute;
  top: 0.22rem;
  right: 0.22rem;
}

.new-cabinet {
  margin: 1.5rem 0 0;
  min-width: 0;
}

.new-cabinet-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.new-cabinet-links li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  min-width: 0;
}

.new-cabinet-links a {
  font-weight: 650;
  overflow-wrap: break-word;
}

.new-cabinet-links__hint {
  color: var(--muted);
  font-size: 0.88rem;
}

.new-feedback-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.new-feedback-card {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  padding: 0.85rem 1rem;
  min-width: 0;
}

.new-feedback-card--unread {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.new-feedback-card__link {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.new-feedback-card__link:hover .new-feedback-card__preview {
  color: var(--text);
}

.new-feedback-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  min-width: 0;
}

.new-feedback-card__top strong {
  min-width: 0;
  overflow-wrap: break-word;
}

.new-feedback-unread {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 650;
}

.new-feedback-card__meta,
.new-feedback-card__preview {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

.new-feedback-card__task {
  display: inline-block;
  margin-top: 0.45rem;
}

.new-feedback-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.5rem;
  min-width: 0;
}

.new-feedback-thread {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  gap: 0.7rem;
}

.new-feedback-msg {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 0.75rem 0.9rem;
  min-width: 0;
  background: color-mix(in srgb, var(--tile) 35%, var(--surface));
}

.new-feedback-msg--admin {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-feedback-msg__meta {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}

.new-feedback-msg__text {
  margin: 0;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.new-feedback-reply {
  margin: 1rem 0 1.5rem;
}

.new-feedback-reply textarea {
  min-width: 0;
  max-width: 100%;
}

.new-avatar {
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--tile);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.new-avatar:hover {
  border-color: var(--accent);
}

.new-avatar span {
  font-size: 0.85rem;
}

/*
 * Buttons — shared chrome for <button class="new-btn"> and <a class="new-btn">.
 * Variants: primary (default), --secondary, --outline / --ghost (alias),
 * --text (quiet), --danger, --yellow (warning / ticket CTA), --mini, --icon,
 * --loading. Prefer one primary per block.
 */
.new-btn {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    opacity 0.14s ease;
}

/* Keep the native hidden state effective despite the button display rule. */
.new-btn[hidden] {
  display: none !important;
}

.new-btn:hover {
  background: var(--accent-hover);
  color: #fff;
}

.new-btn:active {
  background: color-mix(in srgb, var(--accent-hover) 88%, #000);
}

.new-btn:focus {
  outline: none;
}

.new-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.new-btn.is-copied {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.new-btn--ghost.is-copied {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}

/* Anchors/spans cannot use :disabled — block interaction explicitly */
a.new-btn[aria-disabled="true"],
a.new-btn.is-disabled,
span.new-btn.is-disabled,
span.new-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Stacked submit under .new-form fields (replaces old default margin-top on all .new-btn) */
.new-form > .new-btn {
  margin-top: 1rem;
}

/* secondary — solid surface, low competition with primary */
.new-btn--secondary {
  background: var(--tile);
  color: var(--text);
  border-color: var(--border);
}

.new-btn--secondary:hover {
  background: color-mix(in srgb, var(--tile) 70%, var(--border));
  color: var(--text);
}

.new-btn--secondary:active {
  background: color-mix(in srgb, var(--tile) 55%, var(--border));
}

/* outline — bordered; --ghost kept as historical alias (most templates) */
.new-btn--outline,
.new-btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.new-btn--outline:hover,
.new-btn--ghost:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text);
}

.new-btn--outline:active,
.new-btn--ghost:active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

/* text / quiet ghost — no chrome; for cancel / back links */
.new-btn--text {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.new-btn--text:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

.new-btn--text:active {
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

/* destructive */
.new-btn--danger {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}

.new-btn--danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.new-btn--danger:active {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface));
}

.new-btn--danger:focus-visible {
  outline-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent);
}

/* warning / ticket & donate CTAs */
.new-btn--yellow {
  background: var(--warning);
  color: #1a1a1a;
  border-color: var(--warning);
}

.new-btn--yellow:hover {
  background: var(--warning-hover);
  border-color: var(--warning-hover);
  color: #1a1a1a;
}

.new-btn--yellow:active {
  background: color-mix(in srgb, var(--warning-hover) 88%, #000);
  color: #1a1a1a;
}

/* sizes */
.new-btn--mini {
  min-height: var(--btn-height-mini);
  padding: 0 var(--btn-pad-x-mini);
  font-size: var(--btn-font-mini);
  font-weight: 600;
}

.new-btn--icon {
  width: var(--btn-height);
  min-width: var(--btn-height);
  padding: 0;
  gap: 0;
}

.new-btn--icon.new-btn--mini {
  width: var(--btn-height-mini);
  min-width: var(--btn-height-mini);
}

/* loading: keep width stable; pair with aria-busy="true" when possible */
.new-btn--loading,
.new-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
}

.new-btn--loading::after,
.new-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  /* The button text is transparent while loading, so currentColor cannot
     provide a visible track here. Use the foreground explicitly. */
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #fff;
  border-radius: 50%;
  animation: new-btn-spin 0.65s linear infinite;
}

.new-btn--outline.new-btn--loading::after,
.new-btn--ghost.new-btn--loading::after,
.new-btn--secondary.new-btn--loading::after,
.new-btn--text.new-btn--loading::after,
.new-btn--outline.is-loading::after,
.new-btn--ghost.is-loading::after,
.new-btn--secondary.is-loading::after,
.new-btn--text.is-loading::after {
  border-color: color-mix(in srgb, var(--text) 25%, transparent);
  border-top-color: var(--text);
}

.new-btn--danger.new-btn--loading::after,
.new-btn--danger.is-loading::after {
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
  border-top-color: var(--danger);
}

.new-btn--yellow.new-btn--loading::after,
.new-btn--yellow.is-loading::after {
  border-color: rgba(26, 26, 26, 0.25);
  border-top-color: #1a1a1a;
}

@keyframes new-btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .new-btn {
    transition: none;
  }
  .new-btn--loading::after,
  .new-btn.is-loading::after {
    animation: none;
    border-top-color: transparent;
    opacity: 0.7;
  }
}

/* Hub section CTAs — semantic states on top of .new-btn */
.new-btn.new-hub-section__cta {
  margin-top: 0;
}

.new-btn.new-hub-section__cta--today {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.new-btn.new-hub-section__cta--today:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.new-btn.new-hub-section__cta--latest {
  background: transparent;
  color: var(--text);
  border-color: var(--accent);
}

.new-btn.new-hub-section__cta--latest:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text);
  border-color: var(--accent);
}

.new-btn.new-hub-section__cta--solved {
  background: color-mix(in srgb, var(--accent) 75%, var(--surface));
  border-color: var(--accent);
  color: var(--text);
}

.new-btn.new-hub-section__cta--solved:hover {
  background: color-mix(in srgb, var(--accent) 65%, var(--surface));
  color: var(--text);
}

/* Empty states — short copy + optional one CTA */
.new-empty {
  margin: 1rem 0;
  padding: 0.15rem 0;
}

.new-empty__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.new-empty__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

.new-empty__actions {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.new-messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.new-messages li {
  padding: 0.55rem 0.8rem;
  border-radius: var(--btn-radius);
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.4;
  border: 1px solid transparent;
}

.new-messages .success {
  background: var(--success-soft-bg);
  color: var(--text);
  border-color: var(--success-soft-border);
}

.new-messages .error {
  background: var(--danger-soft);
  color: var(--text);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
}

.new-messages .warning {
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  color: var(--text);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.new-team-block {
  margin-bottom: 1.75rem;
}

.new-team-details {
  margin-top: 1.25rem;
}

.new-team-details__summary {
  cursor: pointer;
  color: var(--muted);
  list-style-position: outside;
}

.new-team-details__summary:hover {
  color: var(--text);
}

.new-team-details__summary:focus {
  outline: none;
}

.new-team-details__summary:focus-visible {
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: 2px;
}

.new-team-details__body {
  margin-top: 0.75rem;
}

.new-team-pass-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.new-team-pass {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: var(--btn-height-mini);
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.35;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.new-team-pass:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-team-pass:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--tile) 50%, var(--surface));
}

.new-team-details__hint {
  margin: 0.75rem 0 0;
}

.new-team-details--tickets {
  margin: 1rem 0;
}

.new-form--inline {
  margin: 0;
  display: inline;
}

.new-team-hub-intro {
  margin: 0 0 1rem;
}

.new-team-hub-actions {
  margin: 0.5rem 0 0.75rem;
}

.new-team-hub-pay {
  margin: 0.75rem 0 0;
}

.new-team-quit-form {
  margin-top: 1rem;
}

.new-team-quit-form--secondary {
  margin-top: 0.75rem;
}

.new-team-hub-heading--secondary {
  font-size: 1.1rem;
}

.new-team-secondary-note {
  margin: 0 0 0.75rem;
}

.new-team-block > h2:first-child {
  margin-top: 0;
}

.new-team-block > .new-login-hint:first-of-type {
  margin-bottom: 1rem;
}

.new-team-field-hint {
  margin-top: 0.35rem;
}

.new-team-primary-lead {
  margin-top: 0.75rem;
  line-height: 1.5;
}

.new-team-primary-question {
  margin-top: 0.5rem;
}

.new-team-primary-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.new-confirm-lead {
  margin-top: 0;
}

/* Страница «Мои команды»: крупные блоки (не тонкие линии между секциями) */
.new-team-hub-section {
  margin-top: 1.35rem;
  padding: 1.2rem 1.15rem;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.new-team-hub-section:first-of-type {
  margin-top: 0;
}
.new-team-hub-section__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
  color: var(--muted);
  line-height: 1.35;
}
/* Переключатель команд: активная — отдельный подблок сверху */
.new-team-switcher-active-box {
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
html.new-ui-dark .new-team-switcher-active-box {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.new-team-switcher-subheading {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.new-team-switcher-active-row {
  font-size: 1.05rem;
  line-height: 1.35;
}
.new-team-switcher-others-box {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}
.new-team-switcher-others-label {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}
/* Список остальных команд — разделитель только между строками */
.new-team-switcher-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.new-team-switcher-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
}
.new-team-switcher-list > li:first-child {
  padding-top: 0;
}
.new-team-switcher-list > li + li {
  border-top: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
}
/* Активная команда — акцент слева; неактивные — нейтральная полоса */
.new-team-hub-section--primary {
  border-left: 3px solid var(--accent);
}
.new-team-hub-section--secondary {
  border-left: 3px solid color-mix(in srgb, var(--muted) 50%, var(--border));
}
.new-team-hub-heading {
  margin: 0 0 0.65rem;
  font-size: 1.25rem;
  line-height: 1.3;
}
.new-team-hub-heading--solo {
  margin-bottom: 0.35rem;
}

.new-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 760px) {
  .new-team-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Segmented control — team subnav, replacements mode, theme-like chrome */
.new-segmented,
.new-team-switch,
.new-replacements-mode-bar__btns {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  overflow: hidden;
  background: var(--surface);
}

.new-team-switch {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0.75rem 0 1rem;
}

.new-team-subnav {
  margin: 0 0 1.25rem;
}

.new-segmented__btn,
.new-switchbtn,
.new-replacements-mode-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.new-switchbtn {
  flex: 1 1 0;
}

.new-segmented__btn:last-child,
.new-switchbtn:last-child,
.new-replacements-mode-btn:last-child {
  border-right: none;
}

.new-segmented__btn:hover,
.new-switchbtn:hover,
.new-replacements-mode-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.new-segmented__btn.is-active,
.new-switchbtn.is-active,
.new-replacements-mode-btn.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}

.new-segmented__btn:focus,
.new-switchbtn:focus,
.new-replacements-mode-btn:focus {
  outline: none;
}

.new-segmented__btn:focus-visible,
.new-switchbtn:focus-visible,
.new-replacements-mode-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

.new-team-panels {
  margin-top: 0.25rem;
}

.new-inline-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.new-checkmark {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}

.new-checkmark.ok {
  border-color: var(--accent);
  color: var(--accent);
}

.new-checkmark.bad {
  border-color: color-mix(in srgb, var(--danger) 75%, var(--border));
  color: var(--danger);
}

.new-link-muted {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 0;
  margin-top: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  font-size: 0.95rem;
}

.new-link-muted:hover {
  color: var(--text);
}

.new-link-muted:focus {
  outline: none;
}

.new-link-muted:focus-visible {
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: 2px;
}

.new-link-dotted {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  font-size: 0.95rem;
  transition: color 0.14s ease;
}

.new-link-dotted:hover {
  color: var(--accent);
}

.new-link-dotted:focus {
  outline: none;
}

.new-link-dotted:focus-visible {
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: 2px;
}

.new-hub-bottom-grid {
  margin-top: 2rem;
}

.new-hub-bottom-col > .new-heading:first-child {
  margin-top: 0;
}

.new-hub-bottom-grid--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  align-items: start;
}

@media (max-width: 640px) {
  .new-hub-bottom-grid--split {
    grid-template-columns: 1fr;
  }
}

.new-community-links{
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.new-community-link{
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  width: fit-content;
  flex-wrap: wrap;
}

.new-community-link .ph {
  color: var(--accent);
  opacity: 0.92;
}

.new-community-link__note {
  color: var(--muted);
  font-weight: 400;
}

.new-create-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.new-join-actions {
  margin-top: 0.75rem;
}

.new-team-block h2 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.new-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.new-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.new-list .new-btn--mini {
  margin: 0;
}

.new-login-hint {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0.85rem 0;
}

.new-author-completion-note {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--success-soft-border);
  border-radius: 8px;
  background: var(--success-soft-bg);
  color: var(--text);
  line-height: 1.5;
}

.new-author-completion-note__title {
  font-weight: 700;
}

.new-author-completion-note p {
  margin: 0.35rem 0 0;
}

.new-author-completion-note__hint {
  color: var(--muted);
  font-size: 0.9rem;
}

.new-login-hint--flush-top {
  margin-top: 0;
}

.new-theme-line {
  margin: 0.35rem 0 0;
}

.new-stack-gap {
  margin-top: 0.75rem;
}

.new-stack-gap--after-button {
  margin-bottom: 1.25rem;
}

.new-stack-gap--lg {
  margin-top: 1.5rem;
}

.new-stack-gap--xl {
  margin-top: 1.75rem;
}

.new-text-danger {
  color: var(--danger);
  font-weight: 700;
}

/* New UI: карточки заданий/описаний */
.new-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 0.9rem 1rem;
  margin: 0.75rem 0 1.25rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.new-card__title {
  color: var(--text);
}

.new-card__text {
  color: var(--text);
}

.new-card__text--flush {
  margin: 0;
}

.new-card__text--spaced {
  margin-top: 0.6rem;
}

.new-card--inset {
  margin-top: 0.6rem;
}

.new-pill--actor {
  margin-right: 0.35rem;
}

.new-heading--section {
  margin-top: 1.75rem;
}

.new-card--after-heading {
  margin-top: 0.75rem;
}

.new-meta-kicker {
  margin: 0;
}

.new-meta-line {
  margin: 0.25rem 0 0.75rem;
}

.new-meta-line--loose {
  margin: 0.25rem 0 1rem;
}

.new-task-group-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.new-task-group-meta-row > .new-meta-line {
  min-width: 0;
  overflow-wrap: anywhere;
}

.new-task-group-meta-row > .new-daily-timer {
  flex: 0 0 auto;
  margin-left: auto;
}

.new-daily-timer {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.new-daily-timer[hidden] {
  display: none;
}
.new-daily-timer--quiet {
  display: none !important;
}

.new-daily-timer__toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font: inherit;
  line-height: 1;
}

.new-daily-timer__toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-tooltip {
  position: absolute;
  z-index: 6;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.12);
  width: max-content;
  max-width: min(26rem, calc(100vw - 1rem));
  font-size: 0.8rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.15rem);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.new-tooltip--below {
  top: calc(100% + 0.45rem);
  right: 0;
  transform: translateY(-0.15rem);
}

.new-hub-section__solved:hover .new-tooltip--above,
.new-hub-section__solved:focus-visible .new-tooltip--above {
  transform: translateX(-50%) translateY(0);
}

.new-daily-timer__tooltip {
  white-space: nowrap;
}

.new-daily-timer__toggle:hover + .new-daily-timer__tooltip,
.new-daily-timer__toggle:focus-visible + .new-daily-timer__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.new-daily-timer__toggle:focus-visible,
.new-daily-game-header__nav-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-daily-timer.is-paused .new-daily-timer__toggle {
  color: var(--accent);
  font-weight: 650;
}

.new-daily-timer.is-completed .new-daily-timer__time {
  color: var(--text);
}

.new-daily-timer__time {
  font-weight: 600;
  color: var(--text);
}

.new-daily-timer__popover {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.45rem);
  right: 0;
  width: max-content;
  min-width: 10rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.new-daily-timer__popover[hidden] {
  display: none;
}

.new-daily-timer__popover-title {
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.new-daily-timer__popover .new-daily-timer__time {
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
}

.new-daily-timer__error {
  margin: 0 0 0.65rem;
  color: var(--danger, #b42318);
  font-size: 0.8rem;
}

.new-daily-timer__popover .new-btn {
  width: 100%;
}

/* Compact first row shared by daily ladder, salad and alphabetty pages. */
.new-daily-game-header {
  margin: 0 0 0.85rem;
  min-width: 0;
}

.new-daily-game-header__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.new-daily-game-header__title-wrap,
.new-daily-game-header__controls,
.new-daily-game-header__nav {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.new-daily-game-header__title-wrap {
  gap: 0.35rem;
}

.new-daily-game-header__title-wrap .new-heading {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}

.new-daily-game-header__controls {
  flex: 0 0 auto;
  gap: 0.5rem;
}

.new-replay-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.new-replay-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.new-replay-controls[hidden] {
  display: none;
}

.new-replay-controls--standalone {
  margin: 0 0 0.85rem;
}

.new-replay-control__button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.new-replay-control__button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-replay-control__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-replay-control__tooltip > span {
  color: var(--muted);
  font-size: 0.75rem;
}

.new-replay-control:hover .new-replay-control__tooltip,
.new-replay-control:focus-within .new-replay-control__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .new-tooltip,
  .new-floating-tooltip {
    transition: none;
  }
}

.new-daily-game-header__nav {
  gap: 0.1rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  overflow: hidden;
}

.new-daily-game-header__nav-button {
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.new-daily-game-header__nav-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.new-daily-game-header__nav-button:disabled {
  color: var(--muted);
  opacity: 0.38;
  cursor: not-allowed;
}

.new-daily-game-header__date {
  padding: 0 0.25rem;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
}

.new-daily-game-header__date-compact { display: none; }

.new-daily-game-header__description {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.new-rules-trigger--compact {
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .new-daily-game-header__topline {
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
  }

  .new-daily-game-header__title-wrap {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .new-daily-game-header__title-wrap .new-heading {
    font-size: clamp(0.9rem, 4.2vw, 1.2rem);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .new-daily-game-header__controls {
    flex: 0 0 auto;
    gap: 0.25rem;
  }

  .new-daily-game-header .new-daily-game-header__nav-button {
    width: 1.75rem;
    min-height: 2.25rem;
  }

  .new-daily-game-header .new-daily-game-header__date {
    padding: 0 0.05rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
  }

  .new-daily-game-header__date-full { display: none; }
  .new-daily-game-header__date-compact { display: inline; }

  .new-daily-game-header .new-daily-timer__toggle,
  .new-daily-game-header .new-replay-control__button { min-width: 2.25rem; min-height: 2.25rem; }

  .new-daily-game-header__description {
    font-size: 0.84rem;
  }
}

.new-daily-solve {
  position: relative;
}

.new-daily-solve__stage {
  position: relative;
  isolation: isolate;
}

.new-daily-solve__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
}

/* Keep salad empty-cell octagons (z-index 4) and similar widget layers
   inside the board so they cannot paint above the pause overlay. */
.new-daily-solve [data-daily-solve-board] {
  position: relative;
  z-index: 0;
}

.new-daily-solve__overlay[hidden] {
  display: none;
}

.new-daily-solve__overlay-card {
  max-width: 22rem;
  text-align: center;
}

.new-daily-solve__overlay-title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.new-daily-solve[data-daily-paused] [data-daily-solve-board] {
  pointer-events: none;
  user-select: none;
}

.new-difficulty {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  line-height: 1;
}

.new-difficulty__brains {
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  color: var(--difficulty-icon);
  font-size: 0.96rem;
}

.new-difficulty__brain--empty {
  opacity: 0.38;
}

.new-taskcard__meta-bar .new-difficulty__brains {
  font-size: 0.88rem;
}

.new-pay-card {
  margin-top: 0.75rem;
}

.new-pay-card + .new-pay-card {
  margin-top: 1rem;
}

.new-pay-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding-left: 0.65rem;
  border-left: 3px solid var(--accent);
  margin: -0.1rem 0 0.5rem;
  color: var(--text);
}

.new-pay-meta {
  margin: 0.35rem 0;
}

.new-pay-note {
  margin: 0.5rem 0 0;
}

.new-pay-form {
  margin-top: 0.75rem;
}

.new-pay-form .ym-products {
  margin-top: 0;
}

.new-pay-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.new-pay-history__title {
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.new-pay-history__hint {
  margin: 0 0 0.5rem;
}

.new-pay-history__list {
  display: grid;
  gap: 0.25rem;
}

.new-pay-history__row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.new-pay-card .new-btn:disabled {
  margin-top: 0.75rem;
}

.new-pay-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.new-pay-link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.2;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.new-pay-link:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-pay-link:focus {
  outline: none;
}

.new-pay-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* «скидка?» рядом с ценой билета по умолчанию (2000 ₽) */
.new-pay-line--price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0.35rem 0;
}

/* Открывается по клику (details), чтобы успеть нажать ссылку внутри */
.new-pay-discount {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.new-pay-discount > summary.new-pay-discount__trigger {
  list-style: none;
}

.new-pay-discount > summary.new-pay-discount__trigger::-webkit-details-marker {
  display: none;
}

.new-pay-discount__trigger {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--control-radius);
  border: 1px dashed var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  line-height: 1.25;
}

.new-pay-discount[open] .new-pay-discount__trigger {
  border-color: var(--accent);
  border-style: solid;
}

.new-pay-discount__tip {
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  z-index: 20;
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.55rem 0.65rem;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--text) 10%, transparent);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}

.new-pay-discount__tip a {
  color: var(--accent);
  font-weight: 700;
}

.new-pay-discount__trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.new-pay-total {
  font-size: 1rem;
  margin: 0.75rem 0 0;
}

.new-pay-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
  max-width: 26rem;
}

.new-pay-method-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  margin-top: 0;
  width: 100%;
  min-height: 2.75rem;
  text-align: left;
  line-height: 1.25;
  white-space: normal;
}

.new-pay-method-btn__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
}

.new-pay-method-btn__icon svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.new-pay-method-btn__label {
  flex: 1 1 auto;
}

.new-pay-method-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.new-pay-widget-host {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.new-pay-widget-host[hidden] {
  display: none !important;
}

/* Public checkout: product first, legal/payment details stay compact. */
.new-pay-checkout {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  min-width: 0;
}

.new-pay-checkout__header {
  margin-bottom: 1rem;
}

.new-pay-checkout__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.new-pay-checkout__lead {
  max-width: 38rem;
  margin: 0.5rem 0 0;
  line-height: 1.55;
  color: var(--muted);
}

.new-pay-order-card,
.new-pay-payment-card,
.new-pay-history {
  margin-bottom: 0.9rem;
  padding: 1rem;
  min-width: 0;
}

.new-pay-order {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.new-pay-order > * {
  min-width: 0;
}

.new-pay-order__name {
  font-size: 1.1rem;
  font-weight: 800;
}

.new-pay-order__name--club {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--text);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}

.new-pay-order__name--club-icons {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--warning);
  font-size: 1.6em;
  line-height: 1;
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--warning) 25%, transparent));
}

.new-pay-order__name--club-icons i:last-child {
  margin-left: -.25rem;
  transform: translateY(.18em);
  font-size: .72em;
}

.new-pay-order__meta {
  margin-top: 0.3rem;
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: break-word;
}

.new-pay-order__also {
  margin-top: .7rem;
  font-weight: 700;
}

.new-pay-order__benefits {
  display: grid;
  gap: .35rem;
  margin: .75rem 0 0;
  padding: 0;
  color: var(--text);
  line-height: 1.4;
  list-style: none;
}

.new-pay-order__benefits li {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  min-width: 0;
  overflow-wrap: break-word;
}

.new-pay-order__benefits li > i {
  flex: 0 0 auto;
  margin-top: .12em;
}

.new-pay-order__benefits .ph-crown {
  color: var(--warning);
}

.new-pay-order__benefits .ph-check-circle {
  color: var(--accent);
}

.new-sub-gift-buy,
.new-sub-gift-list {
  display: grid;
  gap: .8rem;
}

.new-sub-gift-section {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--border);
}

.new-sub-gift-section__header {
  display: grid;
  gap: .35rem;
}

.new-sub-gift-section__header h2 {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1.1;
}

.new-sub-gift-section__header > p:last-child {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.new-sub-gift-offer,
.new-sub-gift-item {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}

.new-sub-gift-item > div:first-child {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.new-sub-gift-offer__term {
  text-align: center;
  min-width: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}

.new-sub-gift-method-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.new-sub-gift-code-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.new-sub-gift-code-row code {
  font-size: 1rem;
  letter-spacing: .08em;
}

.new-sub-gift-code-row code.is-blurred {
  filter: blur(.32em);
  user-select: none;
}

.new-sub-gift-code-row code.is-revealed {
  filter: none;
  user-select: text;
}

@media (max-width: 560px) {
  .new-sub-gift-item {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .new-sub-gift-method-grid {
    grid-template-columns: 1fr;
  }

  .new-sub-gift-code-row {
    justify-content: flex-start;
  }
}

.new-pay-team-select {
  width: min(100%, 24rem);
  margin-top: 0.3rem;
}

.new-pay-quantity {
  display: grid;
  gap: 0.45rem;
  flex: 0 0 12rem;
  min-width: 0;
}

.new-pay-quantity__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
}

.new-pay-quantity__heading > span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.new-pay-quantity__heading label {
  white-space: nowrap;
}

.new-pay-stepper {
  display: grid;
  grid-template-columns: 2.75rem minmax(3.4rem, 1fr) 2.75rem;
  align-items: stretch;
  min-width: 0;
  min-height: 2.9rem;
  overflow: hidden;
  border: 1.5px solid var(--border);
  border-radius: calc(var(--control-radius) + 2px);
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.new-pay-stepper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-pay-stepper__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
  transition: color 0.14s ease, background-color 0.14s ease, transform 0.08s ease;
}

.new-pay-stepper__button--plus {
  border-right: 0;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.new-pay-stepper__button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-hover);
}

.new-pay-stepper__button:active:not(:disabled) {
  transform: scale(0.92);
}

.new-pay-stepper__button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.new-pay-stepper__button:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.42;
}

.new-pay-stepper__input {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 0.35rem;
  border: 0;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  appearance: textfield;
  -moz-appearance: textfield;
}

.new-pay-stepper__input::-webkit-inner-spin-button,
.new-pay-stepper__input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.new-pay-quantity__hint {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 550;
  line-height: 1.3;
  text-align: right;
}

.new-pay-discount-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1rem 0 0;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  font-size: 0.92rem;
  line-height: 1.45;
}

.new-pay-discount-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 2.2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  color: var(--warning-hover);
  font-size: 1.15rem;
}

.new-pay-discount-note > div {
  min-width: 0;
}

.new-pay-discount-note__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}

.new-pay-discount-note__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.05rem 0.42rem;
  border-radius: 999px;
  background: var(--warning);
  color: #1a1a1a;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.new-pay-discount-note p {
  margin: 0.25rem 0;
  color: var(--muted);
}

.new-pay-discount-note p b {
  color: var(--text);
}

.new-pay-discount-note__link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.86rem;
  font-weight: 750;
}

.new-pay-section-title {
  margin: 0 0 0.65rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
}

.new-pay-method-selector {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.new-pay-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.new-pay-method:has(input:disabled),
.new-pay-method--unavailable {
  cursor: not-allowed;
  opacity: 0.62;
}

.new-pay-method:has(input:disabled):hover {
  border-color: var(--border);
}

.new-pay-method {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.new-pay-method--primary {
  grid-column: 1 / -1;
}

.new-pay-method:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.new-pay-method.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent);
}

.new-pay-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.new-pay-method:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 2px;
}

.new-pay-method__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
  background: var(--tile);
  font-size: 1.15rem;
}

.new-pay-method__body {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  line-height: 1.3;
}

.new-pay-method__body strong,
.new-pay-method__body span,
.new-pay-method__body b {
  overflow-wrap: break-word;
}

.new-pay-method__body span {
  color: var(--muted);
  font-size: 0.86rem;
}

.new-pay-telegram-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

.new-pay-telegram-link:hover {
  color: color-mix(in srgb, var(--accent) 78%, #000);
}

.new-pay-telegram-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.15rem;
}

.new-pay-method__body b {
  margin-top: 0.2rem;
}

.new-pay-method__body b small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.new-pay-crypto-option {
  margin-top: 0.75rem;
}

.new-pay-crypto-option > summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
}

.new-pay-method--secondary {
  margin-top: 0.6rem;
}

.new-pay-summary {
  margin-top: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.new-pay-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.new-pay-summary strong {
  font-size: 1.35rem;
  text-align: right;
}

.new-pay-summary__label {
  display: grid;
  gap: 0.1rem;
  font-weight: 750;
}

.new-pay-summary__label small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 550;
}

.new-pay-summary p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.new-pay-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.9rem;
  line-height: 1.45;
}

.new-pay-consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

.new-pay-seller {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.new-pay-security,
.new-pay-message,
.new-pay-auth-note {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.new-pay-tribute-note__important {
  color: var(--accent);
  font-weight: 800;
}

.new-pay-message:empty {
  display: none;
}

.new-pay-submit {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  margin-top: 1rem;
  text-align: center;
}

.new-pay-submit:disabled,
.new-pay-submit.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
  pointer-events: none;
}

.new-pay-submit--unavailable,
.new-pay-submit--unavailable:hover,
.new-pay-submit--unavailable:active {
  min-height: var(--btn-height);
  height: auto;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  white-space: normal;
}

.new-pay-submit--unavailable:focus-visible {
  outline-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent);
}

.new-pay-refund-summary {
  margin: 0.5rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.new-pay-history__row {
  min-width: 0;
}

/* must match --new-break-wide */
@media (max-width: 919px) {
  .new-pay-method-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .new-pay-order {
    flex-direction: column;
  }

  .new-pay-quantity {
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }

  .new-pay-stepper {
    grid-template-columns: 3rem minmax(4rem, 1fr) 3rem;
  }

  .new-pay-quantity__hint {
    text-align: left;
  }
}

.new-legal-page {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  min-width: 0;
}

.new-legal-lead {
  margin: 0.6rem 0 1.25rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.new-legal-kicker {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.new-legal-seller,
.new-legal-contact {
  margin-bottom: 0.9rem;
  padding: 1rem;
  scroll-margin-top: var(--new-ui-scroll-margin-top);
}

.new-legal-seller h2,
.new-legal-contact h2 {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
}

.new-legal-details {
  display: grid;
  gap: 0;
  margin: 1rem 0;
}

.new-legal-details > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.new-legal-details dt {
  color: var(--muted);
  font-weight: 700;
}

.new-legal-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.new-legal-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.new-legal-choice {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}

.new-legal-choice:hover {
  border-color: var(--accent);
}

.new-legal-choice span {
  color: var(--muted);
  line-height: 1.45;
}

.new-legal-document {
  line-height: 1.65;
}

.new-legal-document h2 {
  margin: 1.6rem 0 0.45rem;
  font-size: 1.16rem;
}

.new-legal-document p,
.new-legal-document li {
  overflow-wrap: break-word;
}

.new-legal-document ul {
  padding-left: 1.4rem;
}

.new-legal-review {
  padding: 0.8rem 0.9rem;
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  color: var(--muted);
  font-size: 0.9rem;
}

.new-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}

.new-legal-footer {
  width: min(100% - 2rem, var(--new-wrap-narrow));
  margin: 2.5rem auto 0;
  padding: 1rem 0 1.75rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.84rem;
}

.new-legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
}

.new-legal-footer a {
  color: inherit;
}

/* Shared site footer. /pay/ replaces this block with the checkout legal footer. */
.new-site-footer {
  width: min(100% - 2rem, var(--new-wrap-narrow));
  margin: 1.5rem auto 0;
  padding: 0.7rem 0 0.9rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.new-site-footer__inner {
  display: grid;
  grid-template-columns: minmax(2.75rem, 1fr) auto minmax(6.25rem, 1fr);
  align-items: center;
  gap: 0.4rem;
}

.new-site-footer__about {
  justify-self: start;
  color: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.new-site-footer__about:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.new-site-footer__about:focus {
  outline: none;
}

.new-site-footer__about:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
  color: var(--accent);
}

.new-site-footer__sponsor {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}

.new-site-footer__sponsor-link {
  position: relative;
  display: flex;
  width: 3.5rem;
  height: 2.95rem;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.25rem;
  border: 1px solid color-mix(in srgb, #3aaa48 32%, var(--border));
  border-radius: 0.45rem;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.new-site-footer__sponsor-link:hover,
.new-site-footer__sponsor-link:focus-visible {
  border-color: #3aaa48;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.new-site-footer__sponsor-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.new-site-footer__sponsor-name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.3rem);
  z-index: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 0.3rem;
  background: var(--text);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.2rem);
  transition: opacity 140ms ease, transform 140ms ease;
}

.new-site-footer__sponsor-link:hover .new-site-footer__sponsor-name,
.new-site-footer__sponsor-link:focus-visible .new-site-footer__sponsor-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.new-site-footer__sponsor-caption {
  font-size: 0.64rem;
  line-height: 1.2;
}

.new-site-footer__client {
  display: flex;
  width: 7rem;
  min-height: 2.95rem;
  align-items: center;
  justify-content: center;
}

.new-site-footer__client img {
  display: block;
  width: 100%;
  height: auto;
}

.new-site-footer__socials {
  display: flex;
  justify-self: end;
  gap: 0.25rem;
}

.new-site-footer__socials a {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.05rem;
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.new-site-footer__socials a:hover,
.new-site-footer__socials a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* must match --new-break-wide */
@media (min-width: 920px) {
  .new-legal-footer,
  .new-site-footer {
    width: min(100% - 2rem, var(--new-wrap-wide));
  }
}

/* must match --new-break-wide */
@media (max-width: 919px) {
  .new-legal-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .new-legal-details > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.new-donate-panel {
  width: 100%;
  max-width: 26rem;
  margin-top: 0.25rem;
}

.new-donate-panel[hidden] {
  display: none !important;
}

.new-donate-yoomoney {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
}

.new-donate-yoomoney .new-btn {
  margin-top: 0;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.new-donate-yoomoney__hint {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}

.new-donate-lead {
  margin: 0.35rem 0 0;
  max-width: 36rem;
}

.new-donate-methods {
  margin-top: 1rem;
}

.new-donate-crypto-form .new-donate-yoomoney__hint {
  margin-top: 0.5rem;
}

.new-donate-msg {
  margin: 0.5rem 0 0;
}

.new-donate-recent__hint {
  margin: 0 0 0.5rem;
}

.new-donate-crypto {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: auto;
  margin-top: 0.75rem;
}

.new-donate-crypto iframe {
  display: block;
  max-width: 100%;
  border: 0;
}

.new-donate-crypto-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.new-donate-crypto-form__label {
  font-weight: 600;
  font-size: 0.95rem;
}

.new-donate-crypto-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.new-donate-crypto-form__input {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font: inherit;
  background: var(--bg, #fff);
  color: inherit;
}

.new-donate-crypto-warn {
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
}

.new-donate-pay-host {
  margin-top: 0.85rem;
}

.new-donate-pay-host[hidden] {
  display: none !important;
}

.new-donate-recent {
  width: 100%;
  max-width: 26rem;
  margin-top: 1.25rem;
  padding-top: 0.25rem;
}

.new-donate-recent__title {
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.new-donate-recent[hidden] {
  display: none !important;
}

.new-donate-recent__list {
  display: grid;
  gap: 0.5rem;
}

.new-donate-recent__row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.new-donate-recent__marker {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}

.new-donate-recent__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.new-donate-recent__kind {
  font-weight: 700;
  font-size: 0.92rem;
}

.new-donate-recent__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.new-donate-recent__status {
  color: inherit;
}

.new-payment-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  max-width: 26rem;
}

.new-payment-status[hidden] {
  display: none;
}

.new-payment-status__text {
  font-weight: 650;
  line-height: 1.35;
}

.new-payment-status__meta {
  width: 100%;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}

.new-payment-status--ok {
  border-color: var(--success-soft-border);
  background: var(--success-soft-bg);
}

.new-payment-status--err {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: var(--danger-soft);
}

.new-payment-status__check {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
}

.new-payment-status__spinner {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2.5px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--accent);
  animation: new-payment-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes new-payment-spin {
  to { transform: rotate(360deg); }
}

#new-yookassa-widget,
#new-nowpayments-widget {
  width: 100%;
  max-width: 410px;
  display: flex;
  justify-content: center;
}

#new-nowpayments-widget iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.new-taskcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: var(--new-ui-scroll-margin-top);
  /* В grid/flex иначе min-content ширины ломают колонку и контент вылезает */
  min-width: 0;
}

/* Жёлтый жук без чипа (как раньше с 🐞): только Phosphor-иконка. */
.new-taskcard__bug-btn {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.25rem;
  border: none;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--warning);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.78;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.new-taskcard__bug-btn .ph {
  color: inherit;
}

.new-taskcard__bug-btn:hover,
.new-taskcard__bug-btn:focus-visible {
  opacity: 1;
  color: var(--warning-hover);
  background: color-mix(in srgb, var(--tile) 55%, transparent);
  outline: none;
}

.new-taskcard__bug-btn:focus {
  outline: none;
}

.new-taskcard__bug-btn:focus-visible {
  outline: 2px solid var(--warning);
  outline-offset: 2px;
}

.new-bug-report-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 7rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: inherit;
  font: inherit;
  resize: vertical;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.new-bug-report-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-bug-report-error {
  margin: 0.5rem 0 0;
  color: var(--danger);
  font-size: 0.92rem;
}

.new-bug-report-success {
  margin: 0.5rem 0 0;
  color: var(--success);
  font-size: 0.92rem;
}

.new-bug-report-success a {
  color: inherit;
  font-weight: 650;
}

.new-taskgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

/* Table views for TaskGroup.view: show tasks as 3 or 4 per row on wide screens. */
@media (min-width: 640px) {
  .new-taskgrid--3,
  .new-taskgrid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 800px) {
  .new-taskgrid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .new-taskgrid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* In grid mode, cards shouldn't have their own vertical margin. */
.new-taskgrid .new-taskcard {
  margin-bottom: 0;
}

/* Мета-полоса карточки (как в пропорциях): номер, баллы, попытки, подсказки, ответ, лайки.
   Справа оставляем место под абсолютную кнопку багрепорта (.new-taskcard__bug-btn). */
.new-taskcard__meta-bar.new-proportions-compact-bar {
  margin: 0 0 0.65rem;
  padding: 0.3rem 1.75rem 0.3rem 0.5rem;
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--tile) 28%, var(--surface));
  border: 1px solid var(--border);
  min-width: 0;
}

.new-taskcard__body {
  min-width: 0;
}

.new-taskcard__text {
  margin: 0 0 0.75rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.new-taskcard__text img,
.new-card img {
  max-width: 100%;
  height: auto;
}

.new-taskcard__img {
  margin: 0.35rem 0 0.65rem;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Не задавать width/max-width в CSS так, чтобы перебить атрибут width и get_image_width() */
.new-taskcard__img img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--tile);
}

.new-taskcard__points {
  color: var(--muted);
  font-size: 0.9rem;
  margin: -0.1rem 0 0.65rem;
}

.new-taskcard__penalty {
  margin-left: 0.35rem;
  color: var(--muted);
}

.new-max-points {
  font-weight: 800;
}

.new-max-points--reduced {
  color: var(--danger);
}

.new-hint-safe {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.new-taskcard__answer {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--success-soft-bg);
  border: 1px solid var(--success-soft-border);
  border-radius: var(--control-radius);
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.new-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.18rem 0.5rem;
  background: color-mix(in srgb, var(--tile) 40%, var(--surface));
}

.new-pill--danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.new-card--warn {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
  color: var(--text);
}

.new-pill--ok {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.new-pill--partial {
  color: color-mix(in srgb, var(--warning-hover) 70%, #1a1a1a);
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
}

.new-pill--wrong {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: var(--danger-soft);
}

.new-pill .ph {
  font-size: 0.95em;
  line-height: 1;
}

/* Back / forward chrome with Phosphor arrows */
.new-back,
.new-fwd {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.new-back .ph,
.new-fwd .ph {
  font-size: 1.05em;
  line-height: 1;
}

.new-action-link {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.new-action-link:hover {
  color: var(--text);
}

.new-action-link:focus {
  outline: none;
}

.new-action-link:focus-visible {
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: 2px;
}

.new-action-muted {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Likes/dislikes — similar to old UI, aligned right */
.new-like-dislike {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-left: auto;
  position: relative;
}

.new-likebtn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--control-radius);
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
}

.new-likebtn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
}

.new-likebtn:disabled {
  cursor: wait;
  opacity: 0.65;
}

.new-likebtn:focus {
  outline: none;
}

.new-likebtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-likebtn--dislike:hover {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  color: var(--danger);
}

.new-likebtn.is-active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

.new-likebtn--dislike.is-active {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border));
  color: var(--danger);
  background: var(--danger-soft);
}

.new-likebtn__count {
  font-weight: 700;
  color: inherit;
}

.new-like-dislike__status {
  position: absolute;
  z-index: 4;
  top: calc(100% + 0.25rem);
  right: 0;
  max-width: min(18rem, 80vw);
  padding: 0.25rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--danger);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--text) 10%, transparent);
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
}

.new-attempt-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.new-attempt-row input[type="text"] {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 100%;
  min-height: var(--control-height);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.35;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.new-attempt-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-attempt-row input[type="text"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--tile) 50%, var(--surface));
}

/* New: Десяточки list */
.new-games-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/*
 * --- Кастомный скроллбар списка игр (отключён; вернуть вместе с разметкой и JS в folder_games.html) ---
.new-games-list-wrap {
  display: grid;
  grid-template-columns: 1fr 18px;
  gap: 0.75rem;
  align-items: start;
}

.new-smart-scrollbar-container {
  position: sticky;
  top: 4.25rem;
}

.new-smart-scrollbar {
  width: 12px;
  height: 220px;
  background: var(--tile);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}

.new-smart-scrollbar-track {
  width: 100%;
  background: var(--accent);
  border-radius: 999px;
  position: absolute;
  left: 0;
  top: 0;
  height: 10%;
  z-index: 0;
  pointer-events: none;
}

.new-smart-scrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 22px;
  background: var(--accent-hover);
  border-radius: 999px;
  cursor: grab;
  z-index: 1;
}

.new-smart-scrollbar-thumb:active { cursor: grabbing; }

@media (max-width: 720px) {
  .new-games-list-wrap { grid-template-columns: 1fr; }
  .new-smart-scrollbar-container { display: none; }
}

html.new-ui-dark .new-smart-scrollbar-track {
  background: color-mix(in srgb, var(--accent) 42%, var(--tile));
}

html.new-ui-dark .new-smart-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 88%, #1a1a1a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
}
--- конец закомментированного кастомного скролла ---
*/

.new-games-list {
  display: grid;
  gap: 0.75rem;
}

.new-game-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 0.85rem 0.9rem;
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 0.85rem;
  transition: border-color 0.14s ease;
}

.new-game-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.new-game-card__time {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: left;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.new-game-card__logo img {
  width: 144px;
  height: 144px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--tile);
}

.new-game-card__title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 0.25rem;
  color: var(--text);
}

.new-game-card__meta {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.new-game-card__actions {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem 0.45rem;
  align-items: center;
}

.new-game-card__rowactions {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.new-game-card__actions .new-btn--mini {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  .new-game-card {
    transition: none;
  }
}

.new-games-list-footer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.new-scrollbar-info {
  color: var(--muted);
  font-size: 0.85rem;
  /* при кастомном скролле в колонке справа: margin-top: 0.5rem; white-space: nowrap; */
}

.new-loading {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .new-game-card { grid-template-columns: 1fr; }
}

.new-attempt-msg {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.9rem;
  min-height: 1.2em;
}

.new-attempt-msg--wrong {
  color: var(--danger);
  font-weight: 700;
}

.new-attempt-msg--partial {
  color: color-mix(in srgb, var(--warning-hover) 75%, var(--text));
  font-weight: 700;
}

.new-attempt-msg--pending {
  color: var(--muted);
  font-weight: 700;
}

.new-hints {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  scroll-margin-top: var(--new-ui-scroll-margin-top);
}

.new-hints__title {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.new-hints__title .new-action-link{
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.new-hints__body{
  margin-top: 0.25rem;
}

.new-hint {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  scroll-margin-top: var(--new-ui-scroll-margin-top);
}

.new-hint.is-just-revealed {
  --new-hint-highlight: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  animation: new-hint-reveal-flash 1.8s ease-out;
}

@keyframes new-hint-reveal-flash {
  0%, 35% { background: color-mix(in srgb, var(--new-hint-highlight) 16%, var(--surface)); }
  100% { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
}

@media (prefers-reduced-motion: reduce) {
  .new-hint.is-just-revealed { animation: none; }
}

.new-hint__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.new-hint__penalty{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--control-radius);
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
}

.new-hint__text {
  margin-top: 0.5rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Wall (порт из старого интерфейса, чуть адаптирован) */
.wall{
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.wall-tiles{
  display: grid;
  grid-template-columns: repeat(var(--wall-cols, 4), 148px);
  gap: 0.5rem;
  width: max-content;
  margin: 0 auto;
}
.wall-explanations{
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.new-wall-explanation-form {
  width: 100%;
  display: grid;
  gap: 0.55rem;
  text-align: left;
}
.new-wall-explanation__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  color: var(--text);
  font-size: 0.86rem;
}
.new-wall-explanation__heading span {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
.new-wall-explanation__controls {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
}
.new-wall-explanation__field {
  flex: 1 1 auto;
  min-width: 0;
}
.new-wall-explanation__field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--btn-height-mini);
  padding: 0.42rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  /* Keep mobile Safari from zooming the page when this field receives focus. */
  font-size: 1rem;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.new-wall-explanation__field input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}
.new-wall-explanation__field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.new-wall-explanation__controls .new-btn {
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .new-wall-explanation__controls {
    flex-direction: column;
  }
  .new-wall-explanation__controls .new-btn {
    width: 100%;
  }
}
.wall-tile{
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 0.4rem 0.35rem;
  background: var(--surface);
  color: var(--text);
  min-height: 74px;
  display: grid;
  place-items: center;
}
.wall-tile-not-guessed{
  background: color-mix(in srgb, var(--tile) 70%, var(--surface));
  cursor: pointer;
}
.wall-tile-not-guessed:hover{
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.wall-tile-stop-guessing{
  cursor: default;
  opacity: 0.75;
}
.wall-tile-selected{
  background: color-mix(in srgb, var(--warning) 42%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 65%, var(--border));
}
.wall-tile-selected:hover{
  background: color-mix(in srgb, var(--warning) 55%, var(--surface));
}
/* Guessed groups: accent scale (not neon Wordle greens) */
.wall-tile-guessed-0{
  background: color-mix(in srgb, var(--accent) 22%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
  color: var(--text) !important;
}
.wall-tile-guessed-1{
  background: color-mix(in srgb, var(--accent) 34%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border)) !important;
  color: var(--text) !important;
}
.wall-tile-guessed-2{
  background: color-mix(in srgb, var(--accent) 48%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
  color: var(--text) !important;
}
.wall-tile-guessed-3{
  background: color-mix(in srgb, var(--accent) 62%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border)) !important;
  color: #fff !important;
}
.wall-tile-guessed-4{
  background: var(--accent) !important;
  border-color: var(--accent-hover) !important;
  color: #fff !important;
}
img.wall-tile-image{ max-height: 90px; max-width: 140px; }
img.wall-attempt-image{ max-height: 45px; max-width: 70px; }

@media (max-width: 720px){
  /* На телефоне две плитки должны помещаться в ширину .new-wrap без
     обязательного горизонтального скролла. На более широких экранах
     сохраняем прежний максимум 148px на плитку. */
  .wall-tiles{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 19rem);
  }
}

.new-attempts {
  margin: 0.5rem 0 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
}

.new-attempts__summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
  list-style: none;
}

.new-attempts__summary::-webkit-details-marker { display: none; }

.new-attempts__list {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.5rem;
}

.new-wall-attempts-list__boundary {
  border-top: 2px solid #000;
  padding-top: 0.45rem;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
}

.new-attempts__row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
}

.new-attempts__row--just-submitted {
  --new-attempt-highlight: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 65%, var(--border));
  animation: new-attempt-row-flash 1.8s ease-out;
}

.new-attempts__row--just-submitted[data-attempt-mark="partial"] {
  --new-attempt-highlight: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 70%, var(--border));
}

.new-attempts__row--just-submitted[data-attempt-mark="pending"] {
  --new-attempt-highlight: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 65%, var(--border));
}

@keyframes new-attempt-row-flash {
  0%, 35% { background: color-mix(in srgb, var(--new-attempt-highlight) 16%, var(--surface)); }
  100% { background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  .new-attempts__row--just-submitted { animation: none; }
}

.new-attempts__meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.new-attempts__points {
  font-weight: 800;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.15rem 0.5rem;
  background: rgba(0, 0, 0, 0.03);
}

.new-attempts__text {
  font-weight: 600;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.new-attempts__comment {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.new-tg-back {
  margin: 0 0 0.75rem;
}

.new-tg-back--footer {
  margin-top: 2rem;
  margin-bottom: 0;
}

.new-tg-back__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.new-tg-back__link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.new-tg-back__link:focus {
  outline: none;
}

.new-tg-back__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--control-radius);
  box-shadow: 0 0 0 3px var(--focus-ring);
  color: var(--accent);
}

.new-tg-back__link .ph {
  font-size: 1.05em;
  line-height: 1;
}

.new-tg-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
  margin-top: 2rem;
}

.new-tg-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.new-tg-pager__link:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.new-tg-pager__link:focus {
  outline: none;
}

.new-tg-pager__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-tg-pager__link--next {
  text-align: right;
  align-items: flex-end;
}

.new-tg-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.new-tg-pager__dir .ph {
  font-size: 1.1em;
  line-height: 1;
}

.new-tg-pager__label {
  font-size: 0.92rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.new-tg-pager__spacer {
  display: block;
  min-height: 1px;
}

@media (max-width: 560px) {
  .new-tg-pager {
    grid-template-columns: 1fr;
  }

  .new-tg-pager__link--next {
    text-align: left;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .new-tg-pager__link--next {
    text-align: left;
    align-items: flex-start;
  }
}

/*
 * Rules / content cards (.pal-*) — shared by rules modals, genre explainers, support cards.
 * Uses chrome tokens (no Inter, no blue SaaS palette, no decorative gradients).
 */
.pal-fullbleed {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 2rem 1.25rem 2.25rem;
  background: var(--bg);
  margin-bottom: 1.5rem;
  box-sizing: border-box;
}

.pal-card {
  max-width: 900px;
  margin: 0 auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: none;
  padding: 1.75rem 1.5rem;
  font-family: inherit;
}

.pal-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.pal-title {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.new-rules-modal__box .pal-title {
  margin-top: 0;
}

.pal-lead {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.new-rules-modal__box .pal-lead {
  margin-bottom: 1rem;
}

.new-login-hint--flush {
  margin: 0;
}

.new-login-hint--flush-bottom {
  margin-bottom: 0;
}

/* Pigeon VPN page */
.new-vpn-brand {
  color: inherit;
  text-decoration: none;
}

.new-vpn-brand:hover {
  color: var(--accent);
}

.new-vpn-page {
  max-width: 640px;
  display: grid;
  gap: 1.25rem;
}

.new-vpn-card {
  margin: 0;
  padding: 1.25rem 1.5rem;
}

.new-vpn-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.new-vpn-card__title .ph {
  color: var(--accent);
}

.new-vpn-card__text {
  color: var(--muted);
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.new-vpn-copy-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.new-vpn-code {
  flex: 1 1 14rem;
  min-width: 0;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  word-break: break-all;
  color: var(--text);
  line-height: 1.4;
}

.new-vpn-copy-btn {
  flex-shrink: 0;
  align-self: stretch;
  margin: 0;
}

.new-vpn-card__subtitle {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.new-vpn-steps {
  margin: 0;
  padding-left: 1.35rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.8;
}

.new-vpn-strong {
  color: var(--text);
}

.pal-rules {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.pal-rule {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: color-mix(in srgb, var(--tile) 55%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}

.pal-rule-number {
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pal-rule-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  min-width: 0;
}

.pal-example-box {
  margin-top: 0.75rem;
  background: color-mix(in srgb, var(--tile) 40%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.15rem 1.1rem;
}

.pal-example-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
  color: var(--text);
}

.pal-example-grid {
  display: grid;
  gap: 0.65rem;
}

.pal-example-item {
  background: var(--surface);
  border-radius: 6px;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
}

.pal-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.pal-text {
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text);
  font-weight: 600;
}

.pal-note {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Непростые украшения: ритм фразы и пары «загадка → ответ». */
.new-ornament-rules__rhythm {
  margin: 0 0 1.25rem;
  font-size: clamp(1.45rem, 4vw, 2.15rem);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0.015em;
  color: var(--text);
  overflow-wrap: break-word;
}

.new-ornament-rules__stress {
  position: relative;
  display: inline-block;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.16em;
}

/* Рисуем acute без символа U+0301: так глифы А/О не выпадают в fallback-шрифт. */
.new-ornament-rules__stress::before {
  content: "";
  position: absolute;
  top: -0.08em;
  width: 0.28em;
  height: 0.075em;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-25deg);
}

.new-ornament-rules__stress--a::before {
  left: 32%;
}

.new-ornament-rules__stress--o::before {
  left: 63%;
}

.new-ornament-rules__rhythm-word {
  white-space: nowrap;
}

.new-ornament-rules__rhythm-caption {
  color: var(--muted);
}

.new-ornament-rules__meter {
  white-space: nowrap;
  font-weight: 650;
}

.new-ornament-rules__examples {
  margin-top: 0;
}

.new-ornament-rules__example {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
}

.new-ornament-rules__example > div {
  min-width: 0;
}

.new-ornament-rules__example .pal-text {
  display: block;
  overflow-wrap: break-word;
}

.new-ornament-rules__answer-link {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

.new-ornament-rules__answer-link:hover {
  color: var(--accent-hover);
}

.new-ornament-rules__arrow {
  color: var(--accent);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 520px) {
  .new-ornament-rules__rhythm {
    font-size: clamp(1.15rem, 6vw, 1.4rem);
  }

  .new-ornament-rules__meter {
    white-space: normal;
  }

  .new-ornament-rules__example {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
  }

  .new-ornament-rules__arrow {
    transform: rotate(90deg);
    justify-self: start;
  }
}

.pal-after-card {
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .pal-fullbleed {
    padding: 1.25rem 1rem 1.5rem;
  }

  .pal-card {
    padding: 1.25rem 1rem;
  }

  .pal-title {
    font-size: 1.35rem;
  }
}

.new-task .new-task__meta {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
}

.new-task__squares {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.new-task.new-task--partial{
  background: color-mix(in srgb, var(--warning) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
}

.new-task.new-task--solved{
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

/* Текущий выпуск остаётся отмеченным и после появления статуса прогресса. */
.new-task.new-task--today {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, var(--border));
  outline-offset: 2px;
}

/* Заголовок раздела с кнопкой «Правила» */
.new-section-header {
  display: flex;
  /* flex-start: ?/eye напротив заголовка, не по центру блока title+theme */
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  /* spacing below was on .new-heading--page; zeroed when nested here */
  margin-bottom: 1rem;
}

.new-section-header .new-heading {
  margin: 0;
  /* shrink-wrap so ?/eye sit immediately after the title text */
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

/* Tagline is a sibling so it does not widen the title row or move ?. */
.new-section-header .new-theme-line {
  flex: 1 0 100%;
  margin: 0;
}

.new-section-header--results {
  align-items: center;
  margin-bottom: 0.75rem;
}

.new-tg-results-link {
  margin: 1.25rem 0 0;
  text-align: center;
}

.new-results-sentinel {
  height: 1px;
}

.new-source-line {
  margin: 0 0 0.5rem;
}

.new-hub-donate {
  margin: 1.25rem 0 0;
}

.new-hub-next-game-vote {
  /* Дополнительный воздух после блока ежедневных игр, включая лесенки. */
  margin: 2.25rem 0 1.5rem;
}

a.new-btn.new-hub-next-game-vote__btn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  justify-content: center;
  align-items: center;
  min-height: var(--btn-height-mini);
  height: auto;
  padding: 0.4rem 0.85rem;
  font-size: var(--btn-font-mini);
  line-height: 1.25;
  font-weight: 600;
}

.new-modal-lead {
  margin: 0.5rem 0 0;
}

.new-bug-report-lead {
  margin: 0.35rem 0 0.75rem;
}

.new-repl-confirm-preview {
  margin: 0.65rem 0 0;
}

.new-repl-confirm-preview__label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.new-repl-confirm-preview__text {
  font-weight: 600;
  word-break: break-word;
  line-height: 1.45;
  white-space: pre-wrap;
}

.new-repl-line-confirm-dont-show {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--muted);
}

.pal-rules--flush {
  margin-bottom: 0;
}

.new-field-error--spaced {
  margin-top: 1rem;
}

.new-taskcard__answer-comment {
  margin-top: 0.35rem;
}

.new-hint-gate-note {
  margin: 0.25rem 0 0;
}

.new-proportions-sheet__pool-lead {
  margin: 0.75rem 0 0.5rem;
}

.new-proportions-compact-hint {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
}

.new-proportions-touch-hint.new-login-hint {
  margin: 0.5rem 0 0;
}

.new-section-header--main-game {
  align-items: flex-start;
}

.new-section-header__meta {
  flex: 1 1 12rem;
  min-width: 0;
}

.new-game-schedule {
  margin-top: 0.7rem;
}

.new-game-schedule__when {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.new-game-lead {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
}

.new-game-lead__line {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
}

.new-game-lead__label {
  color: var(--muted);
  font-weight: 600;
}

.new-section-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.new-section-header__logo img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--tile);
  display: block;
}

.new-section-header__title {
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin-bottom: 0.1rem;
  color: var(--text);
}

.new-section-header__actions .new-pill{
  margin-top: 0;
}

.new-results-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0.15rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.new-results-pager__meta {
  min-width: 0;
}

.new-results-pager__sep {
  opacity: 0.55;
  margin: 0 0.15rem;
}

.new-results-pager__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.new-results-fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 1rem 2rem;
  display: flex;
  justify-content: center;
}

/* Aggregate pages have the table and progressive controls as two siblings;
   keep the controls on a row below the table instead of beside it. */
.new-results-fullbleed--aggregate {
  flex-direction: column;
  align-items: center;
}

.new-results-wrap{
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-height: min(72vh, 720px);
  max-height: min(72dvh, 720px);
  display: inline-block;
  isolation: isolate;
}

.new-results-table{
  /* Ширины первых колонок — переменные, на узких экранах уменьшаются (ниже). */
  --results-col-rank: 3.1rem;
  --results-col-team: 12.5rem;
  --results-col-score: calc(4.5ch + 1rem);
  --results-col-time: 4.8rem;
  --results-col-attempts: calc(3ch + 1rem);
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  font-size: 0.86rem;
}

.new-results-table th,
.new-results-table td{
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0.32rem 0.42rem;
  background: var(--surface);
  white-space: nowrap;
  text-align: center;
}

.new-results-table thead th{
  font-weight: 700;
  background: color-mix(in srgb, var(--tile) 45%, var(--surface));
  color: var(--muted);
}

/* Свою строку отмечаем рамкой, без заливки: цвета cell-* должны остаться читаемыми. */
.new-results-table tr.is-me > * {
  box-shadow:
    inset 0 2px 0 var(--results-row-me-border),
    inset 0 -2px 0 var(--results-row-me-border);
}
.new-results-table tr.is-me > :first-child {
  box-shadow:
    inset 3px 0 0 var(--results-row-me-border),
    inset 0 2px 0 var(--results-row-me-border),
    inset 0 -2px 0 var(--results-row-me-border);
}
.new-results-table tr.is-me > :last-child {
  box-shadow:
    inset -2px 0 0 var(--results-row-me-border),
    inset 0 2px 0 var(--results-row-me-border),
    inset 0 -2px 0 var(--results-row-me-border);
}
.new-results-table tr.is-me .is-sticky-left,
.new-results-table tr.is-me .is-sticky-left-2,
.new-results-table tr.is-me .is-sticky-left-3,
.new-results-table tr.is-me .is-sticky-left-4 {
  font-weight: 700;
}
.new-results-table tr.is-me .is-sticky-left-3,
.new-results-table tr.is-me .is-sticky-left-4 {
  box-shadow:
    1px 0 0 var(--border),
    inset 0 2px 0 var(--results-row-me-border),
    inset 0 -2px 0 var(--results-row-me-border);
}
.new-results-table tr.is-me .is-sticky-left-3:last-child,
.new-results-table tr.is-me .is-sticky-left-4:last-child {
  box-shadow:
    1px 0 0 var(--border),
    inset -2px 0 0 var(--results-row-me-border),
    inset 0 2px 0 var(--results-row-me-border),
    inset 0 -2px 0 var(--results-row-me-border);
}

.new-results-table td.cell-full{
  background: var(--results-cell-full-bg);
  color: var(--results-cell-full-fg);
}
.new-results-table td.cell-some{
  background: var(--results-cell-some-bg);
  color: var(--results-cell-some-fg);
}
.new-results-table td.cell-partial{
  background: var(--results-cell-partial-bg);
  color: var(--results-cell-partial-fg);
}
.new-results-table td.cell-zero{
  background: var(--results-cell-zero-bg);
  color: var(--results-cell-zero-fg);
}
.new-results-table td.cell-no{
  background: var(--results-cell-no-bg);
  color: var(--results-cell-no-fg);
}

.new-results-table .hint-numbers{
  margin-left: 0.15rem;
  font-size: 0.8em;
  color: inherit;
  opacity: 0.78;
}

.new-results-actor {
  margin-right: 0.25rem;
  opacity: 0.72;
  font-size: 0.85em;
}

.new-results-actor--club,
.aggregate-actor-icon--club {
  color: var(--accent, #d49a24);
}

/* Лесенки: узкие колонки — номер до 999, баллы до «99.5» (3–4 символа) */
.new-results-table--ladder,
.new-results-table--daily{
  --results-col-ladder: calc(4.5ch + 0.5rem);
}
.new-results-table--ladder th.col-ladder,
.new-results-table--daily th.col-ladder,
.new-results-table--ladder tbody td,
.new-results-table--daily tbody td{
  width: var(--results-col-ladder);
  min-width: var(--results-col-ladder);
  max-width: var(--results-col-ladder);
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  overflow: hidden;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
}
.new-results-table--ladder th.col-ladder a,
.new-results-table--daily th.col-ladder a{
  color: inherit;
  text-decoration: none;
}
.new-results-table--ladder th.col-ladder a:hover{
  text-decoration: underline;
}

/* Word answers in result headers must determine their own column width. */
.new-results-table--word-answers th.col-ladder,
.new-results-table--word-answers tbody td{
  width: auto;
  min-width: 2.5rem;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* Alphabetty has no score column: attempts take its sticky slot, so time
   follows immediately after attempts. */
.new-results-table--alphabetty {
  --results-col-score: var(--results-col-attempts);
}

.new-results-table th.col-score,
.new-results-table td.col-score{
  text-align: left;
}

.new-results-table th.col-team{
  text-align: left;
  max-width: var(--results-col-team);
  overflow: hidden;
  text-overflow: ellipsis;
}

.new-results-table .is-sticky-top{
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Second frozen row: top must match real height of first thead row (set via --results-sticky-row1-height in results template). */
.new-results-table .is-sticky-top-2{
  position: sticky;
  top: var(--results-sticky-row1-height, 2.15rem);
  z-index: 5;
}

.new-results-table .is-sticky-left{
  position: sticky;
  left: 0;
  z-index: 6;
  box-sizing: border-box;
  width: var(--results-col-rank);
  min-width: var(--results-col-rank);
  max-width: var(--results-col-rank);
  background-color: var(--surface);
}
.new-results-table .is-sticky-left-2{
  position: sticky;
  left: var(--results-col-rank);
  z-index: 6;
  box-sizing: border-box;
  width: var(--results-col-team);
  min-width: var(--results-col-team);
  max-width: var(--results-col-team);
  background-color: var(--surface);
}
.new-results-table .is-sticky-left-3{
  position: sticky;
  left: calc(var(--results-col-rank) + var(--results-col-team));
  z-index: 6;
  box-sizing: border-box;
  width: var(--results-col-score);
  min-width: var(--results-col-score);
  max-width: var(--results-col-score);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  background-color: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
.new-results-table .is-sticky-left-4{
  position: sticky;
  left: calc(var(--results-col-rank) + var(--results-col-team) + var(--results-col-score));
  z-index: 6;
  box-sizing: border-box;
  width: var(--results-col-time);
  min-width: var(--results-col-time);
  max-width: var(--results-col-time);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  background-color: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}

.new-results-table .results-attempts{
  width: var(--results-col-attempts);
  min-width: var(--results-col-attempts);
  max-width: var(--results-col-attempts);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.results-time-fallback {
  font-style: italic;
  opacity: 0.82;
}

.new-results-table thead .is-sticky-left,
.new-results-table thead .is-sticky-left-2,
.new-results-table thead .is-sticky-left-3,
.new-results-table thead .is-sticky-left-4{
  z-index: 7;
}

/* Keep the frozen header cells opaque as well; otherwise the scrolling
   columns can bleed through their borders in some browsers. */
.new-results-table thead .is-sticky-left,
.new-results-table thead .is-sticky-left-2,
.new-results-table thead .is-sticky-left-3,
.new-results-table thead .is-sticky-left-4{
  background-color: color-mix(in srgb, var(--tile) 45%, var(--surface));
}

/* Узкий экран: уже «замороженные» колонки, чтобы оставалось место для горизонтального скролла задач */
@media (max-width: 640px) {
  .new-results-fullbleed {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  .new-results-wrap {
    max-width: 100%;
  }
  .new-results-table {
    font-size: 0.76rem;
    --results-col-rank: 2rem;
    --results-col-team: 6.25rem;
    --results-col-score: 3.6rem;
    --results-col-time: 2.85rem;
    --results-col-attempts: 3.15rem;
  }
  .new-results-table th,
  .new-results-table td {
    padding: 0.22rem 0.28rem;
  }
}

@media (max-width: 380px) {
  .new-results-table {
    --results-col-rank: 1.75rem;
    --results-col-team: 5.25rem;
    --results-col-score: 3.25rem;
    --results-col-time: 2.6rem;
    --results-col-attempts: 2.85rem;
  }
}

.new-rules-trigger,
.new-eye-toggle {
  appearance: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
  transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
}

.new-rules-trigger .ph,
.new-eye-toggle .ph {
  font-size: 1.1em;
  line-height: 1;
}

.new-rules-trigger:hover,
.new-eye-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-rules-trigger:focus,
.new-eye-toggle:focus {
  outline: none;
}

.new-rules-trigger:focus-visible,
.new-eye-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Hide-anonymous toggle: slash over detective icon when anons are hidden */
.new-eye-toggle.is-hiding {
  position: relative;
  color: var(--muted);
}

.new-eye-toggle.is-hiding::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-35deg);
  pointer-events: none;
}

/* Shared results filter panel. Aggregate and single-game result tables use
   the same control language while keeping their own data-specific options. */
.results-filter-panel {
  display: flex;
  align-items: center;
  gap: .65rem 1.15rem;
  flex-wrap: wrap;
  margin: .8rem 0;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--tile) 28%, var(--surface));
}

.results-filter-group {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.results-filter-label {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.aggregate-actor-icon {
  margin-right: .32rem;
  color: var(--muted);
  font-size: .9em;
}

.results-filter-options {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}

.results-filter-chip,
.results-filter-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 2rem;
  padding: .28rem .62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.results-filter-chip:hover,
.results-filter-chip:focus-visible,
.results-filter-nav:hover,
.results-filter-nav:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text);
}

.results-filter-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
  font-weight: 700;
}

.results-filter-chip.new-eye-toggle {
  width: auto;
  height: auto;
  min-height: 2rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 400;
}

.results-filter-chip.new-eye-toggle.is-hiding {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.results-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin: .8rem 0 0;
  padding: .55rem .75rem;
  color: var(--muted);
  font-size: .82rem;
}

.results-load-more__status {
  font-variant-numeric: tabular-nums;
}

.results-noscript-pager {
  display: block;
  margin-top: .6rem;
  text-align: center;
}

.aggregate-pagination {
  justify-content: center;
}

.aggregate-table-wrap {
  max-width: 100%;
  overscroll-behavior-x: contain;
}

.aggregate-results-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.aggregate-results-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--tile) 45%, var(--surface));
}

.aggregate-results-table thead th.is-sticky-left,
.aggregate-results-table thead th.is-sticky-left-2,
.aggregate-results-table thead th.is-sticky-left-3,
.aggregate-results-table thead th.is-sticky-left-4 {
  z-index: 7;
}

.aggregate-place,
.aggregate-time,
.aggregate-release {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.aggregate-time {
  width: var(--results-col-time);
  min-width: var(--results-col-time);
}

.aggregate-attempts {
  width: var(--results-col-attempts);
  min-width: var(--results-col-attempts);
}

.aggregate-release {
  width: 2.25rem;
  min-width: 2.25rem;
  padding-right: .3rem !important;
  padding-left: .3rem !important;
}

.aggregate-release.aggregate-word-answer {
  width: auto;
  min-width: 2.5rem;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .results-filter-panel {
    align-items: stretch;
    gap: .65rem;
    padding: .6rem;
  }

  .results-filter-group {
    width: 100%;
    align-items: flex-start;
  }

  .results-filter-label {
    flex: 0 0 100%;
  }

}

.is-hidden {
  display: none !important;
}

/* When hiding solved tasks, keep their grid cell to avoid reflow/jumps. */
.new-taskcard.is-solved-hidden {
  visibility: hidden;
}

/* But if an entire row is solved, remove it completely. */
.new-taskcard.is-hidden-row {
  display: none !important;
}

/* Replacements: hide only the submitted line, keep the rest of the task.
   Raddle/ladder keeps solved words visible (they are still needed as references). */
tr.new-replacements-row.is-solved-hidden {
  display: none !important;
}

/* Модальное окно правил */
.new-rules-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.new-rules-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.new-rules-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.new-rules-modal__box {
  position: relative;
  z-index: 1;
  max-width:  min(900px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  margin: auto;
}

.new-rules-modal__box.pal-card {
  padding-top: 2.75rem;
}

.new-rules-modal__close {
  appearance: none;
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--tile);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.new-rules-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

.new-rules-modal__actions--flush {
  margin-top: 0;
}

.new-rules-modal__close:hover {
  background: color-mix(in srgb, var(--tile) 60%, var(--border));
  color: var(--text);
}

.new-rules-modal__close:focus {
  outline: none;
}

.new-rules-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Theme audio modal */
.new-audio-modal__title {
  margin: 0.25rem 0 0.75rem;
}

.new-audio-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.new-audio-controls__time {
  margin: 0;
}

.new-audio-controls__sep {
  opacity: 0.5;
}

.new-audio-progress {
  display: block;
  width: 100%;
  height: 0.65rem;
  margin-top: 0.75rem;
  cursor: pointer;
  appearance: none;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tile);
  color: var(--accent);
}

.new-audio-progress::-webkit-progress-bar {
  background: var(--tile);
  border-radius: 999px;
}

.new-audio-progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 999px;
}

.new-audio-progress::-moz-progress-bar {
  background: var(--accent);
  border-radius: 999px;
}

.new-audio-progress:focus {
  outline: none;
}

.new-audio-progress:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* 18+ age gate: blur page until confirmed once per game/task group (localStorage). */
body.is-age-gated .new-nav,
body.is-age-gated .new-wrap,
html.is-age-gated .new-nav,
html.is-age-gated .new-wrap {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

.new-18plus-modal {
  z-index: 200;
}

.new-18plus-overlay {
  cursor: default;
  background: rgba(0, 0, 0, 0.55);
}

.new-18plus-modal__box {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

/* Замены: переключатель режима ввода (слова / строка / весь текст) */
.new-replacements-task {
  margin-top: 0.25rem;
}
.new-replacements-mode-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}
.new-replacements-mode-bar__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.new-replacements-fill-btn {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.45rem;
  margin-left: 0.15rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.3;
}
.new-replacements-fill-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.new-replacements-fill-msg {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}
.new-replacements-fill-msg.is-error {
  color: var(--danger);
}
/* Панель «весь текст»: авторский display у textarea ломает атрибут hidden без !important */
.new-replacements-whole-panel[hidden] {
  display: none !important;
}
.new-replacements-whole-hint {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
.new-replacements-whole__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  min-height: 5rem;
}
.new-replacements-line__paste-row {
  margin-top: 0.15rem;
}
.new-replacements-line-paste-row__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.new-replacements-fill-btn--inline {
  flex-shrink: 0;
  margin-left: 0;
}
.new-replacements-line-paste-field {
  font: inherit;
  font-size: 1rem;
  flex: 1 1 12rem;
  min-width: 8rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
}

/* Замены (replacements_lines): таблица — левый и правый столбцы, строчки напротив друг друга */
.new-replacements-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  table-layout: fixed;
}
.new-replacements-table tr {
  vertical-align: top;
}
.new-replacements-table td {
  padding: 0.5rem 0.6rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.new-replacements-table tr:last-child td {
  border-bottom: none;
}
.new-replacements-table .new-replacements-col--check { width: 72px; }
.new-replacements-table .new-replacements-col--left { width: calc((100% - 72px) / 2); }
.new-replacements-table .new-replacements-col--right { width: calc((100% - 72px) / 2); }

.new-replacements-table .new-replacements-block__left {
  word-break: normal;
  overflow-wrap: normal;
  overflow-x: auto;
  max-width: 100%;
  vertical-align: top;
}
.new-replacements-table .new-replacements-block__check {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.new-replacements-table .new-replacements-block__check .new-replacements-line__attempts {
  display: block;
  margin-top: 0.2rem;
}
.new-replacements-table .new-replacements-block__check .new-repl-line-answer {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
}
.new-replacements-table .new-replacements-block__right {
  white-space: normal;
  overflow-x: auto;
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
  vertical-align: top;
}
.new-replacements-block__left--solved {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.new-replacements-block__right--solved {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}
.new-replacements-block__right form.new-replacements-line-form {
  display: inline;
}
.new-replacements-block__right form.new-replacements-line-form .new-replacements-line__meta {
  display: inline-flex;
  vertical-align: middle;
}
.new-replacements-block__right form.new-replacements-line-form .new-replacements-line-msg {
  display: none;
}
.new-replacements-line__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.25rem;
  flex-shrink: 0;
}
.new-replacements-check-btn {
  width: var(--btn-height-mini);
  height: var(--btn-height-mini);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.new-replacements-check-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-hover);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.new-replacements-check-btn--done {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: default;
}
.new-replacements-check-btn--done:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Цвет галочки по числу взятых подсказок: 0 → accent, 1 → warning, 2 → danger */
.new-raddle-check--tier1 {
  background: var(--warning);
  border-color: var(--warning);
  color: #1a1a1a;
}
.new-raddle-check--tier2 {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.new-replacements-line__attempts {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
.new-replacements-line__inputs {
  display: inline;
  white-space: normal;
  font-size: 0; /* убирает пробелы от шаблонных переносов между inline-элементами */
}
.new-replacements-line__inputs .new-replacements-static,
.new-replacements-line__inputs .new-replacements-partial-answer,
.new-replacements-line__inputs .new-replacements-input {
  font-size: 1rem;
}
.new-replacements-line__inputs input {
  margin: 0 0.15rem 0.15rem 0;
}
.new-replacements-input {
  font: inherit;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  width: auto;
  min-width: 4ch;
  max-width: 16ch;
  display: inline-block;
  margin: 0 0.15rem 0.15rem 0;
}
.new-replacements-static {
  white-space: pre-wrap;
  font-size: 1rem;
}
.new-replacements-line__solved-text {
  font-weight: 500;
  font-size: 0; /* убирает пробелы между токенами, пробелы берём из token.text */
}
.new-replacements-line__solved-text strong {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 800;
}
.new-replacements-partial-answer {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
}

.new-replacements-line-msg {
  display: none;
  width: 100%;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ─── Raddle (лестница слов) ─── */
.new-raddle-task {
  container-type: inline-size;
  container-name: raddle-task;
}
.new-raddle-task__author {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.new-raddle-task__mixed-script {
  margin: 0 0 0.75rem;
  font-size: 0.98rem;
  line-height: 1.35;
}
.new-raddle-task__credit {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.new-raddle-task__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.new-raddle-task__credit a:hover {
  color: var(--accent);
}
.new-raddle-task__intro {
  margin-bottom: 0.75rem;
}
.new-raddle-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--raddle-ladder-max)) minmax(var(--raddle-clues-min), 1fr);
  gap: 1.25rem;
  align-items: start;
}
/* Узкая карточка (multi-column grid и т.п.) — стек по ширине контейнера. */
@container raddle-task (max-width: var(--raddle-layout-stack)) {
  .new-raddle-layout {
    grid-template-columns: 1fr;
  }
}
/* До --new-break-wide .new-wrap узкий — стек по viewport (lint: scripts/lint_new_ui_responsive.sh). */
@media (max-width: 919px) {
  .new-raddle-layout {
    grid-template-columns: 1fr;
  }
}
.new-raddle-layout > * {
  min-width: 0;
}
.new-raddle-ladder__title,
.new-raddle-clues__title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.new-raddle-clue__text strong,
.new-raddle-line__solved-text strong,
.new-raddle-clue-ref {
  font-weight: 700;
}
.new-raddle-clue__nowrap {
  white-space: nowrap;
}
.new-raddle-clue-ref,
.new-raddle-clue-next,
.new-raddle-clue-before,
.new-raddle-clue-focus,
.new-raddle-clue-after {
  display: inline-block;
  /* Tight L/R so suffixes like «НАПОЛЕОНа» read as one word */
  padding: 0.05rem 0.06rem;
  margin: 0;
  border-radius: var(--control-radius);
  color: var(--text);
  letter-spacing: 0.03em;
  font-weight: 700;
}
.new-raddle-clue-ref {
  background: color-mix(in srgb, var(--raddle-before) 34%, var(--surface));
}
.new-raddle-clue-next {
  background: color-mix(in srgb, var(--accent) 36%, var(--surface));
}
.new-raddle-clue-before {
  background: color-mix(in srgb, var(--raddle-before) 36%, var(--surface));
}
.new-raddle-clue-focus {
  background: color-mix(in srgb, var(--raddle-focus) 34%, var(--surface));
}
.new-raddle-clue-after {
  background: color-mix(in srgb, var(--raddle-after) 34%, var(--surface));
}
.new-raddle-result {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem auto 0;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
  text-align: center;
}
.new-raddle-result__head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.new-raddle-result__label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
}
.new-raddle-result__copy {
  flex-shrink: 0;
}
.new-raddle-result__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.new-raddle-result__status {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  max-width: 100%;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--success-soft-border);
  border-radius: var(--btn-radius);
  background: var(--success-soft-bg);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}
.new-raddle-result__status[hidden] {
  display: none;
}
.new-share-icon {
  display: inline-flex;
  position: relative;
  width: 1.15em;
  height: 1.15em;
  align-items: center;
  justify-content: center;
}
.new-share-icon--copy-image .ph-image-square {
  font-size: 1.05em;
  line-height: 1;
}
.new-share-icon--copy-image .ph-copy {
  position: absolute;
  right: -0.3em;
  bottom: -0.32em;
  font-size: 0.62em;
  line-height: 1;
  background: var(--surface);
  border-radius: 2px;
  padding: 0.02em;
}
.new-raddle-result__share {
  line-height: 1.4;
  word-break: break-word;
}
.new-raddle-result__title {
  font-weight: 700;
}
.new-raddle-result__squares {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.new-raddle-result__link {
  font-size: 0.85rem;
  color: var(--muted);
}

.new-daily-statistics {
  margin: 1.25rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--text) 2%, var(--surface));
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.new-daily-results-layout { display: flex; flex-direction: column; align-items: stretch; gap: .8rem; }
.new-daily-results-layout > .new-raddle-result { order: 1; }
.new-daily-results-layout > .new-daily-statistics { order: 2; }
.new-daily-results-layout > .new-daily-statistics { min-width: 0; }
.new-daily-results-layout > .new-raddle-result { align-self: flex-end; margin-top: 0; }
.new-daily-statistics__title { margin: 0 0 .65rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.new-results-exclusion,
.new-daily-statistics__exclusion {
  margin: .75rem 0 0;
  padding: .55rem .75rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}
.new-daily-statistics__exclusion { margin: 0 0 .75rem; }
.new-daily-statistics__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-bottom: .8rem; }
.new-daily-statistics__metric { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; min-width: 0; padding: .6rem .3rem .5rem; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: .6rem; background: color-mix(in srgb, var(--surface) 70%, var(--accent) 5%); color: var(--muted); font-size: .76rem; line-height: 1.15; text-align: center; }
.new-daily-statistics__metric strong { color: var(--text); font-size: 1.55rem; line-height: 1; }
.new-daily-statistics__body { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(220px, 1.1fr); gap: 1.35rem; align-items: start; }
.new-daily-statistics__section { margin-top: .35rem; min-width: 0; }
.new-daily-statistics__section h3 { margin: 0 0 .55rem; color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.new-daily-statistics__hint { margin: -.1rem 0 .7rem; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.new-daily-statistics__list, .new-daily-statistics__histogram { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.new-daily-statistics__list li, .new-daily-statistics__histogram li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; min-width: 0; }
.new-daily-statistics__list li span { overflow-wrap: anywhere; }
.new-daily-statistics__list li strong, .new-daily-statistics__histogram li strong { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.new-daily-statistics__list--ladder li.is-given { color: var(--muted); }
.new-daily-statistics__list--ladder { gap: .85rem; }
/* Keep the comparison bars equally wide, independent of word length. */
.new-daily-statistics__list--ladder .new-daily-statistics__ladder-word { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "word word time last last last" "timebar timebar timebar lastbar lastbar lastbar"; gap: .35rem .6rem; align-items: center; min-width: 0; }
.new-daily-statistics__ladder-word > .new-daily-statistics__word-pill { grid-area: word; min-width: 0; border-radius: .75rem; white-space: normal; overflow-wrap: anywhere; }
.new-daily-statistics__ladder-word > strong { display: inline-flex; grid-area: time; align-items: center; justify-self: end; gap: .18rem; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.new-daily-statistics__ladder-word > .new-daily-statistics__ladder-last { display: inline-flex; grid-area: last; justify-self: start; align-items: center; gap: .18rem; color: var(--warning-hover); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.new-daily-statistics__ladder-word > .new-daily-statistics__hint-rate { display: none; }
.new-daily-statistics__ladder-bar, .new-daily-statistics__ladder-last-bar { height: .35rem; min-width: 0; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--muted) 13%, transparent); }
.new-daily-statistics__ladder-word > [data-tooltip] { cursor: help; outline: none; }
.new-daily-statistics__ladder-word > [data-tooltip]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
.new-daily-statistics__ladder-bar { grid-area: timebar; }
.new-daily-statistics__ladder-last-bar { grid-area: lastbar; }
.new-daily-statistics__ladder-bar i, .new-daily-statistics__salad-bar i { display: block; width: var(--bar-width, 0) !important; min-width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--warning))); }
.new-daily-statistics__ladder-last-bar i { display: block; width: var(--bar-width, 0) !important; min-width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 72%, var(--text)), var(--warning-hover)); }
.new-daily-statistics__ladder-bar canvas, .new-daily-statistics__salad-bar canvas { display: block; width: 100% !important; height: 100% !important; }
.new-daily-statistics__ladder-word.is-missing .new-daily-statistics__ladder-bar { opacity: .45; }
.new-daily-statistics__histogram { position: relative; height: 180px; padding: .35rem 0 0; border-bottom: 1px solid var(--border); }
.new-daily-statistics__histogram canvas { display: block; width: 100% !important; height: 100% !important; }
.new-daily-statistics__histogram [data-attempts-chart-fallback] { width: 100%; height: 100%; }
.new-daily-statistics__histogram [data-attempts-chart-fallback] svg { display: block; width: 100%; height: 100%; font-size: 11px; }
.new-daily-statistics__list--guesses { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .45rem; }
.new-daily-statistics__guess { display: block !important; min-width: 0; }
.new-daily-statistics__finding-pill, .new-daily-statistics__word-pill { position: relative; display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; width: fit-content; min-height: 1.9rem; padding: .25rem .65rem; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-hover); font-family: var(--new-font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .03em; line-height: 1.15; white-space: nowrap; }
.new-daily-statistics__word-pill.is-solved { border-color: var(--success-soft-border); background: var(--success-soft-bg); color: var(--success); }
.new-daily-statistics__finding-pill { border-color: color-mix(in srgb, var(--muted) 28%, var(--border)); background: color-mix(in srgb, var(--muted) 12%, var(--surface)); color: var(--muted); }
.new-daily-statistics__finding-pill.is-rare { border-color: color-mix(in srgb, var(--warning) 48%, var(--border)); background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: var(--warning-hover); }
.new-daily-statistics__finding-pill small { font: inherit; font-size: .78em; letter-spacing: 0; }
.new-daily-statistics__finding-pill.is-rare { cursor: help; outline: none; }
.new-daily-statistics__finding-pill.is-rare::after { content: attr(data-tooltip); position: absolute; z-index: 3; left: 0; bottom: calc(100% + .4rem); width: max-content; max-width: 15rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: .4rem; background: var(--surface); color: var(--text); box-shadow: 0 .3rem .9rem color-mix(in srgb, var(--text) 15%, transparent); font-family: inherit; font-size: .72rem; font-weight: 500; letter-spacing: 0; line-height: 1.2; white-space: normal; opacity: 0; pointer-events: none; transform: translateY(.15rem); transition: opacity .12s ease, transform .12s ease; }
.new-daily-statistics__finding-pill.is-rare:hover::after, .new-daily-statistics__finding-pill.is-rare:focus-visible::after { opacity: 1; transform: translateY(0); }
/* Share column widths across rows, including complexity and hint percentages. */
.new-daily-statistics__list--salad { grid-template-columns: minmax(6rem, 8rem) minmax(4rem, 1fr) max-content max-content; gap: .65rem .6rem; }
.new-daily-statistics__list--salad .new-daily-statistics__salad-word { display: grid !important; grid-column: 1 / -1; grid-template-columns: subgrid; gap: inherit; align-items: center; min-width: 0; }
.new-daily-statistics__salad-word > .new-daily-statistics__word-pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.new-daily-statistics__hint-rate { display: inline-flex; align-items: center; gap: .18rem; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.new-daily-statistics__hint-rate .ph { color: var(--warning); font-size: .95rem; }
.new-daily-statistics__complexity-value { position: relative; min-width: 2.1rem; color: var(--muted); cursor: help; font-size: .74rem; text-align: right; outline: none; }
.new-daily-statistics__salad-bar { height: .35rem; min-width: 0; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--muted) 13%, transparent); }
.new-daily-statistics__salad-word.is-missing .new-daily-statistics__salad-bar, .new-daily-statistics__word-pill.is-missing { opacity: .55; }
.new-daily-statistics__salad-findings { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 1rem; align-items: end; }
.new-daily-statistics__salad-findings > .new-daily-statistics__section { min-width: 0; }
.new-daily-statistics__salad-long { margin-top: 1rem; }
.new-daily-statistics__salad-long > h3 { margin: 0 0 .55rem; color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.new-daily-statistics__finding-pill.is-answer { border-color: var(--success-soft-border); background: var(--success-soft-bg); color: var(--success); }
.new-daily-statistics__finding-pill.is-missing { border-color: color-mix(in srgb, var(--muted) 28%, var(--border)); background: color-mix(in srgb, var(--muted) 12%, var(--surface)); color: var(--muted); }
@media (min-width: 920px) {
  .new-daily-statistics { margin-top: 1.25rem; }
  .new-daily-statistics__summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .new-daily-statistics__summary--alphabet,
  .new-daily-statistics__summary--censorly { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 919px) {
  .new-daily-results-layout > .new-raddle-result { align-self: center; }
  .new-daily-statistics__body { grid-template-columns: 1fr; }
  .new-daily-statistics__salad-findings { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .new-daily-statistics { padding: .8rem; }
  .new-daily-statistics__summary { gap: .45rem; }
  .new-daily-statistics__list li { gap: .4rem; }
  .new-daily-statistics__finding-pill,
  .new-daily-statistics__word-pill {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .new-daily-statistics__list--salad { grid-template-columns: minmax(5rem, 7rem) minmax(3rem, 1fr) max-content max-content; column-gap: .4rem; }
  .new-daily-statistics__list li strong { font-size: .76rem; }
  .new-daily-statistics__body { gap: .8rem; }
  .new-daily-statistics__histogram { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .new-daily-statistics__finding-pill.is-rare::after { transition: none; }
}
.new-raddle-tutorial-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
}
.new-raddle-tutorial-table th,
.new-raddle-tutorial-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
}
.new-raddle-tutorial-table thead th {
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}
.new-raddle-tutorial-table td:first-child {
  width: 40%;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .new-raddle-tutorial-table td:first-child { white-space: normal; }
}
.new-raddle-ladder__title strong {
  color: var(--text);
  letter-spacing: 0.04em;
}
.new-raddle-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.new-raddle-table tr {
  vertical-align: middle;
}
.new-raddle-table td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  height: 3rem;
}
.new-raddle-table tr:last-child td {
  border-bottom: none;
}
.new-raddle-table .new-raddle-col--check { width: 92px; }
.new-raddle-table .new-raddle-col--word { width: auto; }
.new-raddle-block__word {
  background: var(--surface);
  text-align: center;
  min-width: 0;
}
.new-raddle-word-cell {
  --raddle-len: 5;
  container-type: inline-size;
  container-name: raddle-word;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 3rem;
  min-width: 0;
  width: 100%;
  padding: 0.35rem 0.55rem;
  box-sizing: border-box;
}
/* iPadOS 16 / Safari 16 can miscompute table column widths when a table descendant
   is also a query container. Disable that optimization there and fall back to the
   surrounding media-query sizing rules. */
@supports (-webkit-touch-callout: none) {
  .new-raddle-word-cell {
    container-type: normal;
    container-name: none;
  }
  .new-raddle-line,
  .new-raddle-input,
  .new-raddle-line__mask,
  .new-raddle-line__solved-text {
    font-size: 1rem;
  }
  @media (max-width: 919px) {
    .new-raddle-line,
    .new-raddle-line__mask,
    .new-raddle-line__solved-text {
      font-size: 0.9rem;
    }
  }
  @media (max-width: 560px) {
    .new-raddle-line,
    .new-raddle-line__mask,
    .new-raddle-line__solved-text {
      font-size: 0.8rem;
    }
  }
}
/* Длинные маски (9 7 и т.п.): уменьшаем декоративную маску, чтобы N слотов + (len) влезали в ячейку. */
.new-raddle-line__mask,
.new-raddle-line__solved-text {
  font-size: clamp(
    0.7rem,
    calc((100cqi - 4rem) / (var(--raddle-len, 5) * 1.2)),
    1rem
  );
}
.new-raddle-block__check {
  text-align: center;
  white-space: nowrap;
  background: var(--surface);
  padding: 0 0.35rem;
}
.new-raddle-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-height: 3rem;
}
.new-raddle-actions form {
  display: inline-flex;
  margin: 0;
}
.new-raddle-block__check .new-raddle-word-answer,
.new-raddle-block__check .new-repl-line-answer {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1;
}
.new-raddle-row--playable .new-raddle-block__word,
.new-raddle-row--playable .new-raddle-block__check {
  background: var(--surface);
  box-shadow: none;
}
/* prev = жёлтый, next = зелёный (обычный режим) */
.new-raddle-row--as-prev .new-raddle-block__word,
.new-raddle-row--as-prev .new-raddle-block__check {
  background: color-mix(in srgb, var(--raddle-before) 20%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--raddle-before) 65%, transparent);
}
.new-raddle-row--as-next .new-raddle-block__word,
.new-raddle-row--as-next .new-raddle-block__check {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
/* Финал: А=жёлтый, Б=зелёный, В=синий */
.new-raddle-row--as-before .new-raddle-block__word,
.new-raddle-row--as-before .new-raddle-block__check {
  background: color-mix(in srgb, var(--raddle-before) 20%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--raddle-before) 70%, transparent);
}
.new-raddle-row--as-focus .new-raddle-block__word,
.new-raddle-row--as-focus .new-raddle-block__check {
  background: color-mix(in srgb, var(--raddle-focus) 20%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--raddle-focus) 65%, transparent);
}
.new-raddle-row--as-after .new-raddle-block__word,
.new-raddle-row--as-after .new-raddle-block__check {
  background: color-mix(in srgb, var(--raddle-after) 20%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--raddle-after) 70%, transparent);
}
.new-raddle-row--focus:not(.new-raddle-row--as-prev):not(.new-raddle-row--as-next):not(.new-raddle-row--as-before):not(.new-raddle-row--as-focus):not(.new-raddle-row--as-after) .new-raddle-block__word,
.new-raddle-row--focus:not(.new-raddle-row--as-prev):not(.new-raddle-row--as-next):not(.new-raddle-row--as-before):not(.new-raddle-row--as-focus):not(.new-raddle-row--as-after) .new-raddle-block__check {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
.new-raddle-row--exhausted .new-raddle-block__word,
.new-raddle-row--exhausted .new-raddle-block__check {
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
}
/* Неверный ответ (авто-режим): слегка красная строка + ✕, до смены числа букв */
.new-raddle-row--wrong .new-raddle-block__word,
.new-raddle-row--wrong .new-raddle-block__check {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface)) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger) 70%, transparent) !important;
}
.new-raddle-row--wrong .new-raddle-input {
  color: var(--danger);
  font-weight: 700;
}
.new-raddle-wrong-mark {
  display: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--danger);
}
.new-raddle-wrong-mark .ph {
  color: var(--danger);
}
.new-raddle-row--wrong .new-raddle-wrong-mark {
  display: inline-block;
}
/* Пока запрос обрабатывается — крутящийся индикатор на месте ❌ */
.new-raddle-checking-mark {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: new-raddle-spin 0.7s linear infinite;
}
.new-raddle-row--checking .new-raddle-checking-mark {
  display: inline-block;
}
.new-raddle-row--checking .new-raddle-wrong-mark {
  display: none !important;
}
@keyframes new-raddle-spin {
  to { transform: rotate(360deg); }
}
.new-raddle-retry-btn {
  appearance: none;
  margin-left: 0.15rem;
  padding: 0.15rem 0.35rem;
  border: none;
  border-radius: var(--control-radius);
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.new-raddle-retry-btn:hover {
  color: var(--accent-hover);
}
.new-raddle-retry-btn:focus {
  outline: none;
}
.new-raddle-retry-btn:focus-visible {
  color: var(--accent-hover);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  .new-raddle-checking-mark {
    animation-duration: 1.4s;
  }
}
.new-raddle-row--locked .new-raddle-block__word {
  opacity: 0.72;
}
.new-raddle-row--draft .new-raddle-block__word,
.new-raddle-row--draft .new-raddle-block__check {
  background: var(--surface);
  box-shadow: none;
}
.new-raddle-row--draft .new-raddle-block__word {
  opacity: 0.88;
}
.new-raddle-draft-mark {
  display: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  cursor: help;
}
.new-raddle-draft-mark:not([hidden]) {
  display: inline-flex;
  align-items: center;
}
.new-raddle-draft-mark .ph {
  color: var(--muted);
}
.new-raddle-block__word--solved {
  font-weight: inherit;
}
.new-raddle-line__solved-text strong {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.new-raddle-line {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  --raddle-char-gap: 0em;
  --raddle-glyph-advance: 1em;
  --raddle-slot-step: 1em;
  font-size: clamp(
    0.68rem,
    calc(
      (100cqi - 0.8rem)
      / var(--raddle-format-len, 5)
    ),
    1.35rem
  );
}
.new-raddle-line__mask {
  font-family: var(--new-font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1;
  display: block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.new-raddle-line__len {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.new-raddle-latin-flag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: -0.08em;
  cursor: help;
}
.new-raddle-latin-flag img {
  display: block;
  width: 1.25em;
  height: auto;
}
.new-raddle-script-flag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: -0.08em;
  cursor: help;
}
.new-raddle-script-flag img {
  display: block;
  width: 1.25em;
  height: auto;
}
.new-raddle-digits-flag {
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: -0.08em;
  color: var(--text);
}
.new-raddle-line__no-guesses {
  margin: 0;
  font-size: 0.78rem;
}
.new-raddle-input {
  flex: 0 1 auto;
  /* N native character cells + input padding/border. The advance is measured
     from the loaded font; 1em is only the initial fallback before calibration. */
  letter-spacing: var(--raddle-char-gap);
  text-transform: uppercase;
  /* Keep the input width and the native text grid on the same formula. */
  width: calc(
    var(--raddle-format-len, 5) * var(--raddle-glyph-advance, 1em)
    + var(--raddle-format-len, 5) * var(--raddle-char-gap)
    + 0.7rem + 2px
  );
  font-size: inherit;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.3rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--control-radius);
  position: relative;
  z-index: 2;
  background: var(--surface);
  color: var(--text);
  caret-color: var(--text);
  font-family: var(--new-font-mono);
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
  line-height: 1.2;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.new-raddle-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.new-raddle-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.new-raddle-input::placeholder {
  letter-spacing: 0.02em;
  color: transparent;
  opacity: 0.9;
  text-transform: none;
  /* Match the input metrics so the mask does not leave an artificial gap. */
  font-size: 1em;
}
.new-raddle-mask {
  position: absolute;
  z-index: 3;
  /* Match the input content box: 0.35rem padding + 1px border. */
  inset: 0.3rem calc(0.35rem + 1px);
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--new-font-mono);
  font-size: inherit;
  line-height: 1;
  pointer-events: none;
}
.new-raddle-mask__slot,
.new-raddle-mask__literal {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}
.new-raddle-mask__slot {
  flex: 1 1 0;
  font-size: 1.05em;
}
.new-raddle-mask__literal {
  /* A real space/hyphen is one monospace character cell too. */
  flex: 1 1 0;
}
.new-raddle-input:not(:placeholder-shown) + .new-raddle-mask,
.new-raddle-input.new-raddle-input--filled + .new-raddle-mask {
  display: none;
}
/* На узком .new-wrap (≤919px) чуть плотнее слоты; масштаб шрифта — через cqi выше. */
@media (max-width: 919px) {
  .new-raddle-input {
    letter-spacing: var(--raddle-char-gap);
  }
  .new-raddle-line__mask,
  .new-raddle-line__solved-text {
    font-size: clamp(
      0.68rem,
      calc((100cqi - 3.5rem) / (var(--raddle-len, 5) * 1.15)),
      1rem
    );
  }
  .new-raddle-clue__text {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}
@media (max-width: 560px) {
  .new-raddle-table .new-raddle-col--check { width: 74px; }
  .new-raddle-table .new-raddle-col--word { width: auto; }
  .new-raddle-word-cell { gap: 0.2rem; padding: 0.3rem 0.3rem; }
  .new-raddle-line__len { font-size: 0.72rem; }
  .new-raddle-input {
    letter-spacing: var(--raddle-char-gap);
  }
  .new-raddle-line__mask,
  .new-raddle-line__solved-text {
    font-size: clamp(
      0.65rem,
      calc((100cqi - 3.25rem) / (var(--raddle-len, 5) * 1.1)),
      0.95rem
    );
  }
  .new-raddle-block__check { padding: 0 0.2rem; }
}

/* Мобилка: пин выделенных ступенек под шапкой на весь скролл задания
   (включая длинный блок подсказок). Ячейки таблицы sticky не держатся
   за пределами таблицы — поэтому fixed-клон через JS. */
.new-raddle-sticky-pin {
  display: none;
  box-sizing: border-box;
  position: fixed;
  /* Вертикаль целиком за JS (positionRaddleStickyPin): отступ под шапку зависит
     от того, сколько от неё реально видно при открытой клавиатуре. */
  top: 0;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent);
  pointer-events: auto;
}
.new-raddle-sticky-pin.is-active {
  display: block;
}
/* The pin is appended to <body>, outside the daily board's pause overlay. */
body.is-daily-solve-paused .new-raddle-sticky-pin {
  display: none !important;
}
.new-raddle-sticky-pin__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}
.new-raddle-sticky-pin__table .new-raddle-col--check { width: 92px; }
.new-raddle-sticky-pin__table .new-raddle-col--word { width: calc(100% - 92px); }
.new-raddle-sticky-pin__table td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  height: 3rem;
}
.new-raddle-sticky-pin__table tr:last-child td {
  border-bottom: none;
}
@media (max-width: 560px) {
  .new-raddle-sticky-pin__table .new-raddle-col--check { width: 74px; }
  .new-raddle-sticky-pin__table .new-raddle-col--word { width: calc(100% - 74px); }
}
@media (max-width: 919px) {
  .new-taskcard__text:has(.new-raddle-task) {
    overflow: visible;
  }
  /* Пока пин показывает пару, сама строка в лесенке пустая: keyboard pan может
     вернуть её в остаток экрана прямо под пином, и одна ступенька была бы видна
     дважды. visibility — высота строки и рамки таблицы на месте, скролла нет. */
  .new-raddle-ladder .new-raddle-row.is-raddle-pin-source > td > .new-raddle-word-cell,
  .new-raddle-ladder .new-raddle-row.is-raddle-pin-source > td > .new-raddle-word-msg,
  .new-raddle-ladder .new-raddle-row.is-raddle-pin-source > td > .new-raddle-actions {
    visibility: hidden;
  }
}
@media (min-width: 920px) {
  .new-raddle-sticky-pin {
    display: none !important;
  }
}
.new-raddle-word-msg {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0 0.55rem 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}
.new-raddle-clues {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.new-raddle-clues__section {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 0.75rem 0.85rem;
  background: var(--surface);
}
.new-raddle-clues__section--used {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
}
.new-raddle-clues__subtitle {
  margin: 0.85rem 0 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}
.new-raddle-clues__section > .new-raddle-clues__subtitle:first-child {
  margin-top: 0;
}
.new-raddle-clues__section--used > .new-raddle-clues__subtitle {
  color: var(--text);
  opacity: 0.72;
}
.new-raddle-clues__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.new-raddle-clues__list--option {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  background: color-mix(in srgb, var(--text) 2%, var(--surface));
}
/* В dual-блоках подсветка только на ul (--active), не на отдельных li. */
.new-raddle-clues__list--option .new-raddle-clue--revealed,
.new-raddle-clues__list--option .new-raddle-clue--active {
  background: transparent;
  box-shadow: none;
  font-weight: inherit;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  color: inherit;
}
.new-raddle-clues__list--option .new-raddle-clue--active .new-raddle-clue__text {
  font-weight: inherit;
}
.new-raddle-clues__list--option.new-raddle-clues__list--active {
  background: color-mix(in srgb, var(--raddle-after) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--raddle-after) 45%, var(--border));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--raddle-after) 75%, transparent);
}
.new-raddle-clues__list--option.new-raddle-clues__list--active .new-raddle-clue__text {
  font-weight: 700;
  color: var(--text);
}
.new-raddle-clues__or {
  margin: 0.65rem 0;
  text-align: center;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--muted);
}
.new-raddle-clues__or::before,
.new-raddle-clues__or::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1.4rem;
  height: 1px;
  margin: 0 0.45rem;
  background: var(--border);
}
.new-raddle-clue {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.new-raddle-clue:last-child {
  border-bottom: none;
}
.new-raddle-clue__mark {
  flex: 0 0 auto;
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.28rem;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--muted) 55%, var(--border));
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  appearance: none;
}
/* Расширяем зону нажатия без визуального увеличения кружка */
.new-raddle-clue__mark::before {
  content: '';
  position: absolute;
  inset: -0.45rem;
}
.new-raddle-clue__mark:hover {
  border-color: color-mix(in srgb, var(--muted) 80%, var(--text));
}
.new-raddle-clue__mark:focus {
  outline: none;
}
.new-raddle-clue__mark:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.new-raddle-clue--struck .new-raddle-clue__mark {
  border-color: color-mix(in srgb, var(--muted) 70%, var(--text));
  background: color-mix(in srgb, var(--muted) 18%, transparent);
}
.new-raddle-clue--struck .new-raddle-clue__text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.62;
}
.new-raddle-clue--struck .new-raddle-clue-ref,
.new-raddle-clue--struck .new-raddle-clue-next,
.new-raddle-clue--struck .new-raddle-clue-before,
.new-raddle-clue--struck .new-raddle-clue-focus,
.new-raddle-clue--struck .new-raddle-clue-after {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.new-raddle-clue__text {
  min-width: 0;
  flex: 1 1 auto;
}
.new-raddle-clue--used {
  color: var(--muted);
}
.new-raddle-clues__list--used .new-raddle-clue {
  display: block;
}
.new-raddle-clue--revealed {
  background: color-mix(in srgb, var(--raddle-after) 14%, var(--surface));
  border-radius: 6px;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}
.new-raddle-clue--active {
  background: color-mix(in srgb, var(--raddle-after) 22%, var(--surface));
  border-radius: 6px;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-weight: 700;
  color: var(--text);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--raddle-after) 75%, transparent);
}
.new-raddle-clue--active .new-raddle-clue__text {
  font-weight: 700;
}
.new-raddle-assist-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  border-radius: var(--control-radius);
  padding: 0.15rem 0.35rem;
  font: inherit;
  font-size: 1rem;
  color: var(--warning);
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
}
.new-raddle-assist-btn:hover {
  border-color: color-mix(in srgb, var(--warning) 65%, var(--border));
  color: var(--warning-hover);
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
}
.new-raddle-assist-btn:focus {
  outline: none;
}
.new-raddle-assist-btn:focus-visible {
  outline: 2px solid var(--warning);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 35%, transparent);
}
.new-raddle-assist-btn--answer {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
  color: var(--warning-hover);
}
.new-raddle-assist-btn--answer:hover {
  border-color: color-mix(in srgb, var(--warning) 75%, var(--border));
  color: var(--warning-hover);
  background: color-mix(in srgb, var(--warning) 24%, var(--surface));
}
.new-raddle-assist-form {
  display: inline-flex;
  margin: 0;
}
.new-raddle-line__revealed-answer {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.new-raddle-clues__empty {
  margin: 0;
}

/* ─── Тёмная тема: тень pal-card + стена/оплата (цвет pal-* уже из токенов) ─── */
html.new-ui-dark .pal-card {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

/* Isolated tutorial shell. Board visuals intentionally reuse raddle classes. */
.tutorial-shell[hidden] { display: none; }
.tutorial-shell { z-index: 1000; padding: 0; pointer-events: none; }
.tutorial-shell__backdrop { background: transparent; pointer-events: none; }
.tutorial-shell__spotlights { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.tutorial-shell__spotlights svg { display: block; width: 100%; height: 100%; }
.tutorial-shell__callout { position: fixed; z-index: 1; display: grid; gap: .45rem; box-sizing: border-box; width: min(27rem, calc(100vw - 2rem)); max-height: min(22rem, calc(100vh - 2rem)); max-height: min(22rem, calc(100dvh - 2rem)); overflow: auto; margin: 0 !important; padding: 1rem 1.1rem; pointer-events: auto; }
.new-rules-modal__box.pal-card.tutorial-shell__callout { padding: 1rem 1.1rem; }
.tutorial-shell__top { display: flex; justify-content: space-between; align-items: center; min-height: 2rem; color: var(--muted); font-size: .82rem; }
.tutorial-shell__close { position: static; inset: auto; flex: 0 0 auto; width: 2rem; height: 2rem; margin: 0; }
.tutorial-shell__text { max-width: 34rem; margin: 0; white-space: pre-line; line-height: 1.5; }
.tutorial-shell__feedback { min-height: 1.3em; margin: 0; color: var(--accent); font-size: .9rem; }
.tutorial-shell__callout .new-rules-modal__actions { display: flex; justify-content: flex-end; align-items: center; margin-top: 0; gap: .45rem; }
.tutorial-shell__finish { display: flex; gap: .5rem; flex-wrap: wrap; }
.tutorial-shell :focus-visible,
.ladder-tutorial [data-tutorial-clue]:focus-visible { outline: 3px solid var(--warning); outline-offset: 3px; }
.ladder-tutorial__completion[hidden] { display: none; }
.ladder-tutorial__completion { margin-top: 1rem; }
.tutorial-slot--correct .new-raddle-block__word { background: color-mix(in srgb, var(--raddle-after) 24%, var(--surface)); }
.tutorial-input--locked { cursor: not-allowed; }
.ladder-tutorial .new-raddle-input { font-family: var(--new-font-mono); font-kerning: none; font-variant-ligatures: none; }
@media (max-width: 560px) {
  .tutorial-shell__callout { width: calc(100vw - 1rem); bottom: max(.5rem, env(safe-area-inset-bottom)); padding-inline: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .tutorial-shell__callout .new-rules-modal__actions { flex-wrap: wrap; }
}

/* Стена: не неоновые зелёные плитки, читаемый текст */
html.new-ui-dark .wall-tile {
  border-color: var(--border);
  color: var(--text);
}

html.new-ui-dark .wall-tile-not-guessed {
  background: color-mix(in srgb, var(--tile) 80%, var(--bg));
}

html.new-ui-dark .wall-tile-not-guessed:hover {
  background: color-mix(in srgb, var(--surface) 70%, var(--tile));
}

html.new-ui-dark .wall-tile-selected {
  background: color-mix(in srgb, var(--warning) 35%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
  color: var(--text);
}

html.new-ui-dark .wall-tile-selected:hover {
  background: color-mix(in srgb, var(--warning) 45%, var(--surface));
}

/* Accent-mix tiles from light rules; force readable fg in dark */
html.new-ui-dark .wall-tile-guessed-0,
html.new-ui-dark .wall-tile-guessed-1,
html.new-ui-dark .wall-tile-guessed-2 {
  color: var(--text) !important;
}
html.new-ui-dark .wall-tile-guessed-3,
html.new-ui-dark .wall-tile-guessed-4 {
  color: #0f1a17 !important;
}

/* Хаб / десяточки: заголовки секций чуть ярче серого */
html.new-ui-dark .new-pay-discount__tip {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  border-color: var(--border);
}

/* Контейнер виджета ЮKassa (iframe внутри не красим) */
html.new-ui-dark #new-yookassa-widget {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 2rem;
  overflow: hidden;
}

/*
 * Форма оплаты: yookassa_construct_form.css задаёт #000 / #fff.
 * Перекрываем только в тёмной теме под переменные new-ui.
 */
html.new-ui-dark body.new-ui .yoomoney-payment-form {
  color: var(--text) !important;
  font-family: inherit !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-block-title,
html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-products-title {
  color: var(--text) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-label-text {
  color: var(--muted) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-products {
  color: var(--text) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-products .ym-product:after,
html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-before-line:before {
  background: color-mix(in srgb, var(--text) 12%, transparent) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-product-description .ym-product-count {
  color: var(--muted) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-product-description,
html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-product-price {
  color: var(--text) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-input,
html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-textarea {
  background: var(--tile) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-input::placeholder,
html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-textarea::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-count-input input {
  background: var(--tile) !important;
  color: var(--text) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-count-input .ym-count-minus,
html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-count-input .ym-count-plus {
  filter: invert(1) brightness(1.15);
  opacity: 0.75;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-payment-btn-block .ym-btn-pay {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, #000) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-payment-btn-block .ym-btn-pay:hover {
  background: var(--accent-hover) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-payment-btn-block .ym-disabled-btn {
  background: var(--tile) !important;
  color: var(--muted) !important;
  opacity: 0.65 !important;
  border: 1px solid var(--border) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-input-icon-rub:after {
  color: var(--muted) !important;
}

html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-block-with-hint .ym-hint,
html.new-ui-dark body.new-ui .yoomoney-payment-form .ym-block-with-hint .ym-hint:before {
  background: var(--danger) !important;
  color: #fff !important;
}

/* Пропорции: карточка-лист — overflow не трогаем, иначе ломается sticky у пула */
.new-card.new-proportions-sheet {
  overflow: visible;
}

.new-proportions-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin-top: 0.25rem;
}

/* Липкий пул объектов под шапкой new-ui */
.new-proportions-pool-sticky {
  position: sticky;
  top: calc(var(--new-ui-scroll-margin-top, 5.5rem) + 0.35rem);
  z-index: 8;
  margin: 0 -0.35rem;
  padding: 0.5rem 0.5rem 0.65rem;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

html.new-ui-dark .new-proportions-pool-sticky {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Телефон / узкий экран: не фиксируем пул с подсказками — иначе при скролле занимает весь экран */
@media (max-width: 48rem) {
  .new-proportions-pool-sticky {
    position: static;
    top: auto;
    z-index: auto;
  }
}

button.new-proportions-pool-return-link {
  display: inline-flex;
  align-items: center;
  margin-left: 0.15rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--surface) 85%, var(--accent));
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  vertical-align: baseline;
  white-space: nowrap;
  touch-action: manipulation;
  cursor: pointer;
}

button.new-proportions-pool-return-link:hover {
  background: color-mix(in srgb, var(--surface) 70%, var(--accent));
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}

button.new-proportions-pool-return-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Proportions task group: shared pool + two drop slots per task */
.new-proportions-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--tile));
  touch-action: manipulation;
}

.new-proportions-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: grab;
  user-select: none;
  max-width: 100%;
  word-break: break-word;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
  touch-action: manipulation;
}

.new-proportions-chip:active {
  cursor: grabbing;
}

.new-proportions-chip--picked {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.new-proportions-answer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-top: 0.75rem;
}

.new-proportions-slot {
  flex: 1 1 6rem;
  min-height: var(--control-height);
  min-width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.4rem;
  border: 1px dashed var(--border);
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--tile) 35%, var(--surface));
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  touch-action: manipulation;
}

.new-proportions-slot:focus-within {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-proportions-slot--filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--success-soft-bg);
}

.new-proportions-slot .new-proportions-chip {
  width: 100%;
  text-align: center;
}

.new-proportions-slash {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--muted);
  flex: 0 0 auto;
}

.new-proportions-submit-row {
  margin-top: 0.75rem;
}

.new-proportions-submit-row .new-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.new-proportions-touch-hint {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .new-proportions-touch-hint {
    display: block;
  }
}

/* Пропорции: один лист — таблица как у «Замен» (условие | = | слоты) */
.new-proportions-sheet__intro + .new-login-hint {
  margin-top: 0.25rem;
}

.new-proportions-matrix {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.35rem;
  table-layout: fixed;
}

.new-proportions-matrix tr.new-proportions-matrix__meta-row {
  vertical-align: top;
}

.new-proportions-matrix tr.new-proportions-matrix__row {
  vertical-align: middle;
}

.new-proportions-matrix tr.new-proportions-matrix__row > td {
  vertical-align: middle;
}

.new-proportions-matrix td {
  padding: 0.35rem 0.45rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--border);
}

.new-proportions-matrix tr:last-child td {
  border-bottom: none;
}

.new-proportions-matrix__col--eq {
  width: 1.85rem;
}

.new-proportions-matrix__col--submit {
  width: 2.65rem;
}

.new-proportions-matrix__col--prompt,
.new-proportions-matrix__col--slots {
  width: calc((100% - 1.85rem - 2.65rem) / 2);
}

.new-proportions-matrix__prompt {
  word-break: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

.new-proportions-matrix__task-text {
  text-align: right;
}

.new-proportions-matrix__task-text > :first-child {
  margin-top: 0;
}

.new-proportions-matrix__task-text > :last-child {
  margin-bottom: 0;
}

.new-proportions-matrix__prompt--solved {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.new-proportions-matrix__eq {
  text-align: center;
  white-space: nowrap;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.new-proportions-matrix__equals {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1;
  position: relative;
  top: -0.26em;
}

.new-proportions-matrix__submit {
  text-align: center;
  white-space: nowrap;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.new-proportions-matrix__submit .new-replacements-check-btn,
.new-proportions-matrix__submit .new-proportions-matrix__check-done {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.95rem;
  position: relative;
  top: -0.15em;
}

.new-proportions-matrix__check-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.new-proportions-matrix__slots-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 0;
}

.new-proportions-matrix__slots-inner .new-proportions-answer-row--matrix {
  position: relative;
  top: 0.26em;
}

.new-proportions-matrix__slots--solved .new-proportions-matrix__slots-inner {
  justify-content: center;
  align-items: stretch;
}

.new-proportions-matrix__slots-inner .new-proportions-matrix__solved-answer {
  position: relative;
  top: -0.35em;
  font-weight: 700;
  text-align: left;
  width: 100%;
  line-height: 1.35;
}

.new-proportions-matrix__slots--solved {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

/* Компактная полоса: номер, попытки, баллы, подсказки, ответ, лайки */
.new-proportions-matrix__meta-row td,
.new-proportions-matrix__meta-cell {
  padding: 0.28rem 0.4rem 0.32rem;
  border-bottom: none;
  background: color-mix(in srgb, var(--tile) 35%, var(--surface));
}

.new-proportions-compact-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  font-size: 0.78rem;
  line-height: 1.2;
}

.new-proportions-compact-bar__num {
  font-weight: 700;
  color: var(--text);
}

.new-proportions-compact-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  font-variant-numeric: tabular-nums;
}

/* «ок» в пропорциях: как new-pill, но явный зелёный акцент */
.new-proportions-compact-badge--ok-strong.new-pill--ok {
  color: var(--success);
  border-width: 2px;
  border-color: var(--success-soft-border);
  background: var(--success-soft-bg);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 22%, transparent);
}

.new-proportions-compact-points-pill {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.08rem 0.2rem;
  padding: 0.22rem 0.55rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, var(--text));
  background: color-mix(in srgb, var(--tile) 50%, var(--surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent),
    0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
  font-size: 0.78rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.new-proportions-compact-stat {
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.25;
}

.new-proportions-compact-points-pill .new-proportions-compact-stat__nums,
.new-proportions-compact-stat__nums {
  font-weight: 800;
}

.new-proportions-compact-stat__sep {
  color: var(--muted);
  font-weight: 500;
}

.new-proportions-compact-stat__paren {
  color: var(--muted);
  font-weight: 500;
}

.new-proportions-compact-stat--plain {
  color: var(--muted);
  font-size: 0.78rem;
}

.new-proportions-attempts-popover {
  margin: 0 !important;
  padding: 0.5rem 0.6rem 0.55rem;
  max-width: min(24rem, calc(100vw - 1rem));
  max-height: min(70vh, 20rem);
  max-height: min(70dvh, 20rem);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--text) 18%, transparent);
  position: fixed;
  inset: auto;
  width: max-content;
  min-width: min(12rem, 100vw - 1rem);
}

.new-proportions-attempts-popover::backdrop {
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

html.new-ui-dark .new-proportions-attempts-popover::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.new-proportions-attempts-popover__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.new-proportions-attempts-popover__title {
  flex: 1 1 auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.new-proportions-attempts-popover__close {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.25rem -0.25rem -0.2rem 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.new-proportions-attempts-popover__close:hover {
  background: var(--tile);
  color: var(--text);
}

.new-proportions-attempts-popover__close:focus {
  outline: none;
}

.new-proportions-attempts-popover__close:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.new-proportions-attempts-popover__list {
  margin: 0;
}

.new-proportions-compact-textbtn {
  appearance: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.15rem 0.3rem;
  border: none;
  border-radius: var(--control-radius);
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  touch-action: manipulation;
}

.new-proportions-compact-textbtn:hover {
  color: var(--text);
}

.new-proportions-compact-textbtn:focus {
  outline: none;
}

.new-proportions-compact-textbtn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
  color: var(--text);
}

.new-proportions-compact-textbtn--success {
  color: var(--success);
  text-decoration-color: color-mix(in srgb, var(--success) 55%, transparent);
}

.new-proportions-compact-textbtn--success:hover {
  color: color-mix(in srgb, var(--success) 82%, var(--text));
  text-decoration-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.new-proportions-compact-textbtn--ok {
  color: var(--success);
  text-decoration-color: color-mix(in srgb, var(--success) 55%, transparent);
}

.new-proportions-compact-textbtn--partial {
  color: color-mix(in srgb, var(--warning-hover) 75%, var(--text));
  text-decoration-color: color-mix(in srgb, var(--warning) 65%, transparent);
}

.new-proportions-compact-textbtn--wrong {
  color: var(--danger);
  text-decoration-color: color-mix(in srgb, var(--danger) 55%, transparent);
}

.new-proportions-compact-textbtn--pending {
  color: var(--muted);
  text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent);
}

.new-like-dislike--compact-bar {
  margin-left: 0;
  gap: 0.28rem;
}

.new-like-dislike--compact-bar .new-likebtn {
  padding: 0.12rem 0.38rem;
  font-size: 0.74rem;
  gap: 0.22rem;
  border-radius: var(--control-radius);
}

.new-like-dislike--compact-bar .new-likebtn__icon {
  font-size: 0.8rem;
}

.new-like-dislike--compact-bar .new-likebtn__count {
  font-size: 0.74rem;
}

.new-proportions-compact-bar__fill {
  flex: 1 1 auto;
  min-width: 0.25rem;
}

.new-proportions-compact-bar__aside {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
}

.new-proportions-compact-img {
  margin-top: 0.35rem;
}

.new-proportions-compact-img img {
  display: block;
  max-width: 100%;
  max-height: 5rem;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}

.new-hints--compact {
  margin-top: 0.35rem;
}

.new-hints--compact .new-hints__body:not([hidden]) {
  padding: 0.35rem 0;
}

/* Компактные слоты в строке уравнения */
.new-proportions-answer-row--matrix.new-proportions-answer-row {
  margin-top: 0;
  gap: 0.35rem 0.45rem;
}

.new-attempt-row--matrix-fallback {
  margin-top: 0;
}

.new-proportions-matrix .new-proportions-slot {
  min-height: 2rem;
  min-width: 3.5rem;
  padding: 0.15rem 0.3rem;
}

.new-proportions-matrix .new-proportions-slash {
  font-size: 1rem;
}

tr.new-proportions-matrix__row.is-solved-hidden,
tr.new-proportions-matrix__meta-row.is-solved-hidden {
  display: none !important;
}

/* ——— Алфавитка (минималистичный alphaguess-like) ——— */
.new-alphabetty {
  min-width: 0;
}
.new-alphabetty .new-raddle-result[hidden] {
  display: none !important;
}

/* Три ряда фиксированной высоты: инпут всегда в середине, списки растут к нему. */
.new-alphabetty__layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.75rem;
  align-items: stretch;
  height: clamp(20rem, calc(100dvh - 14rem), 36rem);
  position: relative;
}

/* Левый rail: закрыт — узкая колонка с «+» по центру; открыт — дерево на всю высоту. */
.new-alphabetty__prefix-side {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  align-self: stretch;
  gap: 0.45rem;
  z-index: 2;
  min-width: 0;
  width: 2.1rem;
  min-height: 0;
  overflow: hidden;
}
.new-alphabetty__prefix-side.is-open {
  width: max-content;
  max-width: min(14rem, 46vw);
  max-height: 100%;
}
.new-alphabetty__prefix-side[hidden] {
  display: none !important;
}

.new-alphabetty__block--after {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.new-alphabetty__block--after[hidden],
.new-alphabetty__block--before[hidden] {
  display: none !important;
}
.new-alphabetty__block--after .new-alphabetty__block-title {
  flex: 0 0 auto;
}
.new-alphabetty__block--after .new-alphabetty__words {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.new-alphabetty__guess,
.new-alphabetty__win {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  align-self: center;
}
.new-alphabetty__block--before {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
.new-alphabetty__block--before .new-alphabetty__block-title {
  flex: 0 0 auto;
}
.new-alphabetty__block--before .new-alphabetty__words {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.new-alphabetty__block-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.new-alphabetty__block-title i {
  font-style: italic;
  font-weight: 700;
}

.new-alphabetty__words {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.new-alphabetty__word {
  margin: 0;
  font-family: var(--new-font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.45;
}
.new-alphabetty__word.is-dim { opacity: 0.42; }
.new-alphabetty__word.is-nearest {
  opacity: 1;
  font-weight: 700;
  color: var(--accent);
}
.new-alphabetty__word.is-nearest .new-alphabetty__word-known {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.06em;
  line-height: 0.95;
}

.new-alphabetty__input-wrap {
  display: flex;
  flex: 1 1 12rem;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  position: relative;
}
.new-alphabetty__input-wrap .new-alphabetty__input {
  flex: 1 1 auto;
}
.new-alphabetty__letter-hint[hidden] {
  display: none !important;
}
.new-alphabetty__hint-toast {
  position: absolute;
  left: auto;
  right: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 6;
  width: max-content;
  max-width: min(12.5rem, calc(100% - 0.25rem));
  padding: 0.5rem 1.85rem 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  box-shadow: 0 6px 22px color-mix(in srgb, var(--text) 16%, transparent);
  text-align: left;
  pointer-events: auto;
}
.new-alphabetty__hint-toast[hidden] {
  display: none !important;
}
.new-alphabetty__hint-toast__close {
  appearance: none;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.new-alphabetty__hint-toast__close:hover {
  background: color-mix(in srgb, var(--tile) 60%, var(--border));
  color: var(--text);
}
.new-alphabetty__hint-toast__close:focus {
  outline: none;
}
.new-alphabetty__hint-toast__close:focus-visible {
  outline: 2px solid var(--warning);
  outline-offset: 1px;
}
.new-alphabetty__hint-toast__line {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.new-alphabetty__hint-toast__prefix {
  margin-top: 0.2rem;
  font-family: var(--new-font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 1.3;
}
.new-alphabetty__hint-known {
  margin: 0 0 0.25rem;
  padding: 0.08rem 0.12rem;
  font-family: var(--new-font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.new-alphabetty__prefix-toggle {
  width: 2.1rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
  align-self: center;
  transition: border-color 0.14s ease, color 0.14s ease, background-color 0.14s ease;
}
.new-alphabetty__prefix-side.is-open .new-alphabetty__prefix-toggle {
  align-self: stretch;
}
.new-alphabetty__prefix-toggle:hover,
.new-alphabetty__prefix-toggle.is-open {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.new-alphabetty__prefix-toggle:focus {
  outline: none;
}
.new-alphabetty__prefix-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-alphabetty__prefix-panel {
  /* Не растягиваем пустоту: высота = контент, shrink + scroll при лимите стороны. */
  flex: 0 1 auto;
  min-height: 0;
  width: max-content;
  min-width: 2.1rem;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  padding: 0.3rem 0.35rem;
  box-shadow: none;
}
.new-alphabetty__prefix-panel[hidden] {
  display: none !important;
}

/* До первой попытки: алфавит одной колонкой, как список префиксов. */
.new-alphabetty__alpha-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.06rem;
  width: max-content;
}
.new-alphabetty__alpha-cell {
  text-align: left;
  font-family: var(--new-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.2rem;
  color: var(--muted);
  border-radius: 0.15rem;
  line-height: 1.35;
}
.new-alphabetty__alpha-cell:hover {
  background: color-mix(in srgb, var(--tile) 70%, transparent);
  color: var(--text);
}

.new-alphabetty__hint {
  --ab-depth: 0;
  padding-left: calc(var(--ab-depth) * 0.55rem);
  font-family: var(--new-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.new-alphabetty__hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  padding: 0.08rem 0.12rem;
  border-radius: 0.2rem;
  cursor: pointer;
  max-width: 100%;
}
.new-alphabetty__hint-btn:hover,
.new-alphabetty__hint-btn.is-open {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-hover);
}
.new-alphabetty__hint-mark {
  display: inline-flex;
  width: 0.85rem;
  justify-content: center;
  color: var(--accent);
  font-weight: 700;
}
.new-alphabetty__hint-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.new-alphabetty__hint-leaf {
  display: inline-block;
  padding: 0.08rem 0.12rem 0.08rem 1.1rem;
  opacity: 0.8;
}
.new-alphabetty__prefix-empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.new-alphabetty__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.new-alphabetty__input {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.new-alphabetty__input::placeholder {
  color: var(--muted);
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}
.new-alphabetty__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.new-alphabetty__input.is-shake {
  animation: alphabetty-shake 0.4s ease;
}
@keyframes alphabetty-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.new-alphabetty__submit {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: var(--control-height);
  min-height: var(--control-height);
  min-width: 7.5rem;
  padding: 0 1.25rem;
  line-height: 1;
}
.new-alphabetty__msg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin: 0.45rem 0 0;
}
.new-alphabetty__msg {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.new-alphabetty__msg.is-error { color: var(--danger); }
.new-alphabetty__msg.is-ok { color: var(--accent); }
.new-alphabetty__suggest {
  margin: 0;
  flex: 0 0 auto;
}
.new-alphabetty__msg-row[hidden],
.new-alphabetty__suggest[hidden] {
  display: none !important;
}

.new-alphabetty__win {
  min-width: 0;
  padding: 0.15rem 0;
}
.new-alphabetty__win-label {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.new-alphabetty__secret {
  font-family: var(--new-font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}
.new-alphabetty__win-text {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

@media (max-width: 560px) {
  .new-alphabetty__layout {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.5rem;
    height: clamp(18rem, calc(100dvh - 12rem), 32rem);
  }
  .new-alphabetty__block-title {
    margin-bottom: 0.18rem;
    font-size: 0.98rem;
    line-height: 1.25;
  }
  .new-alphabetty__words {
    gap: 0.12rem;
  }
  .new-alphabetty__word {
    font-size: 1rem;
    line-height: 1.32;
  }
  .new-alphabetty__form {
    gap: 0.35rem;
  }
  .new-alphabetty__msg-row {
    align-items: flex-start;
    gap: 0.28rem 0.5rem;
    margin-top: 0.3rem;
  }
  .new-alphabetty__msg {
    flex: 1 1 100%;
    font-size: 0.84rem;
    line-height: 1.22;
  }
  .new-alphabetty__suggest {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .new-alphabetty__prefix-side.is-open {
    width: max-content;
    max-width: min(10rem, 42vw);
  }
}

/* ——— Mobile UX: iOS input zoom, touch targets, rules banner ——— */
@media (max-width: 919px) {
  body.new-ui input[type="text"],
  body.new-ui input[type="search"],
  body.new-ui input[type="email"],
  body.new-ui input[type="password"],
  body.new-ui input[type="url"],
  body.new-ui input[type="tel"],
  body.new-ui input:not([type]),
  body.new-ui select,
  body.new-ui textarea {
    font-size: max(16px, 1rem);
  }
}

.new-rules-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.new-rules-banner[hidden] {
  display: none !important;
}

.new-rules-banner__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text);
}

.new-rules-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.new-rules-banner__dismiss {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.new-rules-banner__dismiss:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.new-word-salad {
  --ws-grid-max: 22rem;
  --ws-words-min: 14rem;
  --ws-layout-stack: 40rem;
  container-type: inline-size;
  container-name: word-salad;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.new-word-salad > .new-raddle-result {
  margin-top: 0;
}

.new-word-salad__intro {
  margin: 0;
  padding: 0.1rem 1rem 0.2rem;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.new-word-salad__theme-label {
  display: inline;
  margin-right: 0.3em;
  color: var(--muted);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 0.08em;
}

.new-word-salad__theme {
  font-weight: 800;
}

.new-word-salad__author {
  margin: -0.35rem 0 0;
  padding: 0 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.new-word-salad__play {
  display: grid;
  grid-template-columns: minmax(0, var(--ws-grid-max)) minmax(var(--ws-words-min), 1fr);
  gap: 1rem;
  align-items: start;
  min-width: 0;
}

.new-word-salad__play > * {
  min-width: 0;
}

.new-word-salad__words {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.new-word-salad__play .new-word-salad__band-title {
  text-align: left;
}

.new-word-salad__play .new-word-salad__pills {
  justify-content: flex-start;
}

.new-word-salad__grid-panel {
  position: relative;
  width: 100%;
  max-width: var(--ws-grid-max);
  margin-inline: 0;
  min-width: 0;
  container-type: inline-size;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  padding: 0.7rem;
}

/* Узкая карточка — стек по ширине контейнера. */
@container word-salad (max-width: var(--ws-layout-stack)) {
  .new-word-salad__play {
    grid-template-columns: 1fr;
  }

  .new-word-salad__grid-panel {
    margin-inline: auto;
  }

  .new-word-salad__play .new-word-salad__band-title {
    text-align: center;
  }

  .new-word-salad__play .new-word-salad__pills {
    justify-content: center;
  }
}

/* До --new-break-wide .new-wrap узкий — стек по viewport. */
@media (max-width: 919px) {
  .new-word-salad__play {
    grid-template-columns: 1fr;
  }

  .new-word-salad__grid-panel {
    margin-inline: auto;
  }

  .new-word-salad__play .new-word-salad__band-title {
    text-align: center;
  }

  .new-word-salad__play .new-word-salad__pills {
    justify-content: center;
  }
}

/* Empty/deleted slots scroll the page; active cells below keep letter dragging exclusive. */
.new-word-salad__grid {
  position: relative;
  display: grid;
  gap: 0.3rem;
  width: 100%;
  container-type: inline-size;
  touch-action: pan-y;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}

.new-word-salad__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
  touch-action: pan-y;
}

.new-word-salad__cell {
  appearance: none;
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 0;
  border-radius: 0;
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
  background: var(--tile);
  color: var(--text);
  font-family: var(--new-font-mono);
  font-size: clamp(1.15rem, 8cqi, 1.5rem);
  font-weight: 700;
  line-height: 1;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.new-word-salad__cell.is-active {
  cursor: pointer;
}

.new-word-salad__cell.is-active:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--tile));
  transform: translateY(-1px);
}

.new-word-salad__cell.is-selected {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, var(--border));
  transform: translateY(-1px);
}

.new-word-salad__cell:not(.is-active) {
  position: relative;
  z-index: 4;
  pointer-events: none;
  background: var(--surface);
  box-shadow: none;
  color: transparent;
}

.new-word-salad__links {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.new-word-salad__links line {
  stroke: #000;
  stroke-width: 1.5;
  stroke-linecap: round;
}

html.new-ui-dark .new-word-salad__links line {
  stroke: color-mix(in srgb, var(--muted) 40%, var(--surface));
}

.new-word-salad__path {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.new-word-salad__path polyline {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 46%, transparent);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.new-word-salad__solved {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  padding: 0.55rem 1rem;
  border: 2px solid color-mix(in srgb, var(--accent) 58%, var(--border));
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 0.55rem 1.5rem color-mix(in srgb, var(--text) 17%, transparent);
  color: var(--accent-hover);
  font-size: clamp(1.2rem, 4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(5px);
}

.new-word-salad__orientation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  grid-area: orientation;
  justify-self: end;
}

.new-word-salad__orientation[hidden] {
  display: none;
}

.new-word-salad__orientation-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--muted));
  border-radius: 0.35rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.new-word-salad__orientation-btn:hover,
.new-word-salad__orientation-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-hover);
  outline: none;
}

.new-word-salad__orientation-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-word-salad__orientation-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.new-word-salad__selection {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "word word"
    "reset orientation";
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 3.85rem;
  margin-top: 0.5rem;
}

.new-word-salad__selection-main {
  position: relative;
  display: flex;
  grid-area: word;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  min-width: 0;
}

.new-word-salad__selection-word {
  width: 100%;
  min-width: 0;
  min-height: 1.4em;
  font-family: var(--new-font-mono);
  font-size: clamp(0.92rem, 4.6cqi, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  white-space: nowrap;
  overflow-wrap: normal;
  text-align: center;
}

.new-word-salad.is-checking .new-word-salad__checking-mark {
  display: inline-block;
}

.new-word-salad__reset-wrap {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  grid-area: reset;
  justify-self: start;
}

.new-word-salad__reset-wrap.is-idle {
  visibility: hidden;
  pointer-events: none;
}

.new-word-salad__reset-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  padding: 0.12rem 0.32rem;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-bottom-width: 2px;
  border-radius: 0.28rem;
  background: color-mix(in srgb, var(--surface) 86%, var(--text));
  color: var(--muted);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  line-height: 1;
}

.new-word-salad__reset {
  appearance: none;
  min-height: 2.5rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--btn-radius);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent));
  color: var(--accent-hover);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0.15rem 0.45rem color-mix(in srgb, var(--text) 10%, transparent);
}

.new-word-salad__reset .ph {
  font-size: 1.1rem;
}

.new-word-salad__reset:hover,
.new-word-salad__reset:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 78%, var(--accent));
  color: var(--accent-hover);
  outline: none;
}

.new-word-salad__reset:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.new-word-salad__reset:disabled {
  pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
  .new-word-salad__selection {
    min-height: 5.75rem;
  }

  .new-word-salad__reset-key {
    display: none;
  }
}

.new-word-salad__band {
  min-width: 0;
}

.new-word-salad__band-title {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.new-word-salad__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  justify-content: center;
  gap: 0.38rem 0.42rem;
  min-width: 0;
}

.new-word-salad__band--extras .new-word-salad__pills {
  max-height: 8.5rem;
  overflow-x: hidden;
  overflow-y: hidden;
}

.new-word-salad__band--extras .new-word-salad__pills.is-scrollable {
  overflow-y: auto;
}

.new-word-salad__word {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.new-word-salad__len {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.new-word-salad__pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38em;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2.05rem;
  padding: 0.28rem 0.82rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tile) 70%, var(--surface));
  color: var(--text);
  font: inherit;
  font-family: var(--new-font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.new-word-salad__word .new-word-salad__pill {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  color: var(--accent-hover);
}

.new-word-salad__word.is-solved .new-word-salad__pill {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.new-word-salad__word.is-hinted .new-word-salad__pill {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 55%, transparent);
}

.new-word-salad__band--rares .new-word-salad__band-title,
.new-word-salad__rare {
  cursor: help;
}

.new-word-salad__rare {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 48%, var(--border));
  color: var(--warning-hover);
}

.new-word-salad__extra {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
  color: var(--muted);
  font-weight: 650;
}

.new-word-salad__extra.is-latest,
.new-word-salad__rare.is-latest,
.new-word-salad__word.is-latest .new-word-salad__pill {
  font-weight: 800;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 35%, var(--border));
}

.new-word-salad__extra.is-latest {
  background: color-mix(in srgb, var(--muted) 18%, var(--surface));
  color: var(--text);
}

.new-word-salad__rare.is-latest {
  background: color-mix(in srgb, var(--warning) 24%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 45%, var(--border));
}

.new-word-salad__word.is-latest .new-word-salad__pill {
  background: color-mix(in srgb, var(--accent) 26%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--border));
}

.new-word-salad__extra.is-fresh,
.new-word-salad__rare.is-fresh,
.new-word-salad__word.is-fresh .new-word-salad__pill {
  animation: new-word-salad-extra-pop 0.55s ease;
}

@keyframes new-word-salad-extra-pop {
  0% { transform: scale(0.84); opacity: 0.35; }
  55% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .new-word-salad__extra.is-fresh,
  .new-word-salad__rare.is-fresh,
  .new-word-salad__word.is-fresh .new-word-salad__pill {
    animation: none;
  }
}

.new-word-salad__hint-form {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

button.new-word-salad__hint-btn {
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

button.new-word-salad__hint-btn:hover,
button.new-word-salad__hint-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  outline: none;
}

button.new-word-salad__hint-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

button.new-word-salad__hint-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.new-word-salad__mask {
  min-width: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.08em;
  font-family: var(--new-font-mono);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0;
  text-align: center;
}

.new-word-salad__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.12em;
  height: 1.28em;
  min-width: 0;
  max-width: 1.12em;
  flex: 0 0 1.12em;
  line-height: normal;
  overflow: visible;
}

.new-word-salad__separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: pre;
}

.new-word-salad__glyph.is-blank {
  height: 1.12em;
  color: transparent;
  background: color-mix(in srgb, var(--text) 10%, var(--tile));
  border-radius: 0.22em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, var(--border));
}

@media (max-width: 560px) {
  .new-word-salad__mask {
    font-size: 0.88rem;
    gap: 0.06em;
  }

  .new-word-salad__glyph {
    width: 1.02em;
    max-width: 1.02em;
    flex-basis: 1.02em;
  }

  .new-word-salad__glyph.is-blank {
    height: 1.02em;
  }
}

.new-word-salad__toast {
  position: fixed;
  z-index: 120;
  left: 50%;
  top: 80%;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1rem;
  border: 1px solid var(--success-soft-border);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--surface) 82%, var(--accent));
  box-shadow: 0 0.45rem 1.2rem color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--accent-hover);
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, calc(-50% - 0.45rem)) scale(0.97);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.25, 1);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
}

.new-word-salad__toast.is-in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.new-word-salad__toast.is-out {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 0.45rem)) scale(0.97);
  transition-duration: 0.28s;
  transition-timing-function: ease;
}

.new-word-salad__toast-mark {
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.35rem;
  color: var(--accent);
  line-height: 1;
}

.new-word-salad__toast-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.new-word-salad__toast-word {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--new-font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.new-word-salad__toast-ok {
  color: var(--accent-hover);
  font-size: 0.95rem;
  font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
  .new-word-salad__toast,
  .new-word-salad__toast.is-in,
  .new-word-salad__toast.is-out {
    transition: none;
  }
}

.new-word-salad__word.is-solved .new-word-salad__mask {
  color: var(--accent-hover);
  font-weight: 750;
  gap: 0;
  letter-spacing: 0.01em;
  justify-content: center;
}

.new-word-salad__word.is-solved .new-word-salad__glyph {
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 1.2em;
  flex: 0 0 auto;
  height: auto;
}

.new-word-salad__toast.is-rare {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--surface) 82%, var(--warning));
  color: var(--warning-hover);
}

.new-word-salad__toast.is-rare .new-word-salad__toast-ok {
  color: var(--warning-hover);
}

@media (pointer: coarse) {
  .new-rules-trigger,
  .new-eye-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }

  .new-nav__quick {
    width: 2.75rem;
    height: 2.75rem;
  }

  .new-nav__section {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem;
    justify-content: center;
  }

  .new-btn--mini {
    min-height: 2.75rem;
    padding: 0 0.85rem;
  }

  .new-btn--icon.new-btn--mini {
    width: 2.75rem;
    min-width: 2.75rem;
  }

  .new-taskcard__bug-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem;
  }

  .new-likebtn,
  .new-raddle-retry-btn,
  .new-account-action,
  .new-replacements-fill-btn,
  .new-proportions-compact-textbtn,
  .new-alphabetty__hint-btn,
  .new-word-salad__hint-btn {
    min-height: 2.75rem;
  }

  .new-raddle-clue__mark {
    position: relative;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    margin-top: 0;
    border: 0;
    background: transparent;
  }

  .new-raddle-clue__mark::before {
    inset: 0;
  }

  .new-raddle-clue__mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.85rem;
    height: 0.85rem;
    border: 1.5px solid color-mix(in srgb, var(--muted) 55%, var(--border));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .new-raddle-clue__mark:hover::after {
    border-color: color-mix(in srgb, var(--muted) 80%, var(--text));
  }

  .new-raddle-clue--struck .new-raddle-clue__mark::after {
    border-color: color-mix(in srgb, var(--muted) 70%, var(--text));
    background: color-mix(in srgb, var(--muted) 18%, transparent);
  }

  .new-proportions-attempts-popover__close {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
  }

  .new-alphabetty__hint-toast__close,
  .new-word-salad__orientation-btn {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
  }

  .new-rules-modal__close {
    width: 2.75rem;
    height: 2.75rem;
  }

  .new-replacements-check-btn,
  .new-proportions-matrix__submit .new-replacements-check-btn,
  .new-proportions-matrix__submit .new-proportions-matrix__check-done {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .new-rules-banner__dismiss {
    width: 2.75rem;
    height: 2.75rem;
  }
}
/* ─── Grid Puzzle ─────────────────────────────────────────────────────── */
.new-grid-puzzle {
  container-type: inline-size;
  min-width: 0;
}

.new-grid-puzzle__rules {
  margin-bottom: 0.8rem;
}

.new-grid-puzzle__hint {
  margin: 0 0 0.65rem;
  color: var(--pal-muted, #667085);
  font-size: 0.9rem;
}

.new-grid-puzzle__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

.new-grid-puzzle__shade-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.new-grid-puzzle__shade-tools .new-btn.is-active {
  box-shadow: inset 0 0 0 2px var(--pal-accent, #7c3aed);
}

.new-grid-puzzle [data-grid-pan-mode].is-active {
  box-shadow: inset 0 0 0 2px var(--pal-accent, #7c3aed);
}

.new-grid-puzzle__swatch {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid #344054;
  border-radius: 0.2rem;
}

.new-grid-puzzle__swatch.is-black { background: #101828; }
.new-grid-puzzle__swatch.is-green { background: #b7e4b2; }

.new-grid-puzzle__viewport {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 0.65rem;
  background: #f7f8fa;
  padding: 0.6rem;
}

.new-grid-puzzle__viewport:fullscreen {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #f7f8fa;
}

.new-grid-puzzle__board {
  display: block;
  max-width: none;
  background: #fff;
  color: #1d2939;
  outline: none;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.new-grid-puzzle__board:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pal-accent, #7c3aed) 38%, transparent);
}

.new-grid-puzzle__base line {
  stroke: #cbd2dc;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.new-grid-puzzle__frame {
  fill: none;
  stroke: #344054;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.new-grid-puzzle__shade-black {
  fill: #101828;
  pointer-events: none;
}

.new-grid-puzzle__shade-green {
  fill: #b7e4b2;
  pointer-events: none;
}

.new-grid-puzzle__mark-o,
.new-grid-puzzle__mark-x {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.new-grid-puzzle__mark-backing {
  fill: none;
  stroke: #fff;
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.new-grid-puzzle__mark-arrow {
  fill: #fff;
  stroke: #101828;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.new-grid-puzzle__mark-star {
  fill: #101828;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.new-grid-puzzle__note,
.new-grid-puzzle__note-preview {
  stroke: #7d8797;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.new-grid-puzzle__note-preview {
  stroke: var(--pal-accent, #7c3aed);
  opacity: 0.75;
}

.new-grid-puzzle__wall-outline,
.new-grid-puzzle__wall {
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.new-grid-puzzle__wall-outline {
  stroke: #fff;
  stroke-width: 10;
}

.new-grid-puzzle__wall {
  stroke: #101828;
  stroke-width: 6;
}

.new-grid-puzzle__wall.is-recent {
  animation: grid-puzzle-wall-pop 180ms ease-out;
}

@keyframes grid-puzzle-wall-pop {
  from { stroke-width: 10; }
  to { stroke-width: 6; }
}

.new-grid-puzzle__selected-cell {
  fill: color-mix(in srgb, var(--pal-accent, #7c3aed) 10%, transparent);
  stroke: var(--pal-accent, #7c3aed);
  stroke-width: 2;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.new-grid-puzzle__edge-hit {
  stroke: transparent;
  stroke-width: 16;
  pointer-events: stroke;
  cursor: crosshair;
  touch-action: none;
}

.new-grid-puzzle__cell-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  cursor: pointer;
  touch-action: none;
}

.new-grid-puzzle__cell-hit:hover {
  fill: color-mix(in srgb, var(--pal-accent, #7c3aed) 12%, transparent);
}

.new-grid-puzzle__edge-hit:hover {
  stroke: color-mix(in srgb, var(--pal-accent, #7c3aed) 22%, transparent);
}

.new-grid-puzzle__center-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
  cursor: grab;
  touch-action: none;
}

.new-grid-puzzle__center-hit:hover {
  fill: color-mix(in srgb, #7d8797 24%, transparent);
}

.new-grid-puzzle.is-pan-mode .new-grid-puzzle__hits,
.new-grid-puzzle.is-pan-mode .new-grid-puzzle__hits * {
  pointer-events: none;
}

.new-grid-puzzle.is-pan-mode .new-grid-puzzle__board {
  cursor: grab;
  touch-action: pan-x pan-y;
}

.new-grid-puzzle__submit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.new-grid-puzzle__count {
  font-weight: 700;
}

.new-grid-puzzle__saved {
  flex: 1 1 auto;
  min-width: 8rem;
  color: var(--pal-muted, #667085);
  font-size: 0.85rem;
}

.new-grid-puzzle-answer .new-grid-puzzle {
  margin-top: 0.75rem;
}

.new-grid-puzzle-answer .new-answer-comment {
  margin-top: 0.75rem;
}

@container (max-width: 34rem) {
  .new-grid-puzzle__toolbar .new-btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-grid-puzzle__wall.is-recent { animation: none; }
}

.new-ui-dark .new-grid-puzzle__viewport {
  background: #151a23;
}

.new-ui-dark .new-grid-puzzle__board {
  background: #fff;
  color: #1d2939;
}

.new-ui-dark .new-grid-puzzle__base line { stroke: #cbd2dc; }
.new-ui-dark .new-grid-puzzle__frame { stroke: #344054; }
.new-ui-dark .new-grid-puzzle__wall { stroke: #101828; }

.ws-grid-editor {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  container-type: inline-size;
  min-width: 0;
  max-width: 16rem;
}

.ws-grid-editor__board {
  display: flex;
  flex-direction: column;
  flex: 0 1 12rem;
  gap: 0.35rem;
  min-width: 0;
}

.ws-grid-editor__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.ws-grid-editor__cell {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  aspect-ratio: 1;
  box-sizing: border-box;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--new-font-mono, ui-monospace, monospace);
  font-size: 1.15rem;
  font-weight: 700;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 0.45rem;
  background: var(--tile, #fff);
  color: var(--text, inherit);
}

.ws-grid-editor__cell:focus {
  outline: 2px solid var(--accent, #2f6fed);
  outline-offset: 1px;
}

.ws-grid-editor__controls {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 2.15rem);
  gap: 0.3rem;
}

.ws-grid-editor__control {
  align-items: center;
  appearance: none;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 0.45rem;
  color: var(--muted, #667085);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.25rem;
  height: 2.15rem;
  justify-content: center;
  padding: 0;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
  width: 2.15rem;
}

.ws-grid-editor__control:hover {
  background: var(--tile, #f8f9fb);
  border-color: color-mix(in srgb, var(--accent, #2f6fed) 45%, var(--border, #d0d5dd));
  color: var(--accent, #2f6fed);
  transform: translateY(-1px);
}

.ws-grid-editor__control:focus-visible {
  outline: 2px solid var(--accent, #2f6fed);
  outline-offset: 2px;
}

.ws-grid-editor__control:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.ws-grid-editor__cell.is-removable {
  border-color: var(--danger, #d92d20);
  background: color-mix(in srgb, var(--danger, #d92d20) 12%, transparent);
}

.ws-grid-editor__status {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

.ws-grid-editor__status.is-ok {
  color: var(--pal-ok, #067647);
}

.ws-grid-editor__status.is-error {
  color: var(--danger, #d92d20);
}

.ws-offer-kind-fields[hidden] {
  display: none !important;
}

.new-pay-checkout--subscription {
  max-width: 60rem;
}

.new-sub-checkout-card {
  padding: 1rem;
}

.new-sub-providers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.85rem;
  margin: 0.9rem 0 1rem;
  min-width: 0;
}

.new-sub-provider {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
}

.new-sub-provider--unavailable {
  border-style: dashed;
  background: var(--tile);
}

.new-sub-provider__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3rem;
}

.new-sub-provider__header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.new-sub-provider__availability {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--tile);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.new-sub-provider__header h3 {
  margin: 0;
  font-size: 1.08rem;
}

.new-sub-provider__header p,
.new-sub-provider__action p {
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.new-sub-provider__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 2.4rem;
  border-radius: 50%;
  background: var(--tile);
  font-size: 1.25rem;
}

.new-sub-provider__offers {
  display: grid;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
}

.new-sub-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--card-radius) - 0.2rem);
  background: var(--tile);
}

.new-sub-offer__term {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.new-sub-offer__price {
  font-size: 1.2rem;
  line-height: 1.25;
}

.new-sub-offer__price--regular {
  font-size: 1.05rem;
}

.new-sub-offer__price span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
}

.new-sub-offer p {
  flex: 1 1 auto;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.new-sub-offer form,
.new-sub-offer .new-btn,
.new-sub-provider__action form,
.new-sub-provider__action .new-btn {
  width: 100%;
}

.new-sub-provider__action {
  margin-top: auto;
}

.new-sub-provider__plan-actions {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.new-sub-status {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
}

.new-sub-status > div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.5rem;
  min-width: 0;
}

.new-sub-status dt {
  color: var(--muted);
  font-weight: 600;
}

.new-sub-status dd {
  margin: 0;
  overflow-wrap: break-word;
}

/* must match --new-break-wide */
@media (min-width: 920px) {
  .new-sub-providers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.censorly-random-launcher { display: grid; gap: .6rem; width: min(54rem, 100%); margin-top: .65rem; }
.censorly-random-launcher[hidden], .censorly-random-settings[hidden] { display: none !important; }
.censorly-random-launcher__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.censorly-random-launcher__actions > .new-btn { min-width: 8rem; justify-content: center; }
.censorly-random-settings-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid var(--border); border-radius: var(--btn-radius); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: .86rem; font-weight: 650; transition: border-color .15s, background .15s, color .15s; }
.censorly-random-settings-toggle:hover, .censorly-random-settings-toggle[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent); }
.censorly-random-settings-toggle__caret { margin-left: .15rem; transition: transform .15s; }
.censorly-random-settings { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); box-shadow: 0 8px 28px rgba(20, 30, 50, .08); }
.censorly-random-dialog__header { padding-right: 2rem; }
.censorly-random-dialog__header .pal-title { margin: .2rem 0 .25rem; font-size: 1.15rem; }
.censorly-random-dialog__header p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.censorly-random-dialog__eyebrow { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.censorly-random-dialog__top-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: .7rem; min-height: 0; }
.censorly-random-panel { min-width: 0; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface); padding: .75rem; }
.censorly-random-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.censorly-random-panel__heading h3 { margin: 0; font-size: .92rem; }
.censorly-random-panel__heading small { display: block; margin-top: .1rem; color: var(--muted); font-size: .72rem; }
.censorly-random-panel__quick-actions { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.censorly-random-text-button { border: 0; padding: .2rem .25rem; background: transparent; color: var(--accent); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; }
.censorly-random-text-button:hover { text-decoration: underline; }
.censorly-difficulty-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.censorly-difficulty-chip { position: relative; display: flex; align-items: center; gap: .45rem; min-width: 0; min-height: 2.45rem; padding: .45rem .55rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--tile); cursor: pointer; font-size: .8rem; line-height: 1.2; transition: border-color .15s, background .15s, box-shadow .15s; }
.censorly-difficulty-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.censorly-difficulty-chip__dot { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: #a2aaa6; }
.censorly-difficulty-chip:nth-child(1) .censorly-difficulty-chip__dot { background: #3b9b72; }
.censorly-difficulty-chip:nth-child(2) .censorly-difficulty-chip__dot { background: #d3a635; }
.censorly-difficulty-chip:nth-child(3) .censorly-difficulty-chip__dot { background: #e47b45; }
.censorly-difficulty-chip:nth-child(4) .censorly-difficulty-chip__dot { background: #cc5b68; }
.censorly-difficulty-chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.censorly-difficulty-chip:focus-within, .censorly-type-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.censorly-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; max-height: 8rem; overflow: auto; padding: .1rem .15rem .1rem 0; }
.censorly-type-chip { display: flex; align-items: center; gap: .35rem; min-width: 0; padding: .3rem .4rem; border: 1px solid transparent; border-radius: .5rem; cursor: pointer; font-size: .76rem; line-height: 1.2; }
.censorly-type-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.censorly-type-chip i { flex: 0 0 auto; color: var(--muted); font-size: 1rem; }
.censorly-type-chip span { overflow-wrap: anywhere; }
.censorly-type-chip:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.censorly-type-chip:has(input:checked) i { color: var(--accent); }
.censorly-category-panel { min-height: 0; }
.censorly-random-panel__hint { margin: -.3rem 0 .55rem; color: var(--muted); font-size: .74rem; }
.censorly-category-search { display: flex; align-items: center; gap: .4rem; width: 100%; margin-bottom: .5rem; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: .55rem; color: var(--muted); }
.censorly-category-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: .8rem; }
.censorly-category-tree { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; max-height: min(22rem, 42vh); overflow: auto; padding: .1rem .2rem .1rem 0; }
.censorly-category-tree__node { min-width: 0; align-self: start; }
.censorly-category-tree > .censorly-category-tree__node { border: 1px solid var(--border); border-radius: .6rem; background: color-mix(in srgb, var(--tile) 45%, var(--surface)); }
.censorly-category-tree__line { display: flex; align-items: center; gap: .2rem; min-width: 0; padding: .35rem .4rem; }
.censorly-category-tree__label { display: flex; align-items: center; gap: .35rem; min-width: 0; flex: 1; cursor: pointer; font-size: .78rem; line-height: 1.25; }
.censorly-category-tree__label input { flex: 0 0 auto; width: .95rem; height: .95rem; margin: 0; accent-color: var(--accent); }
.censorly-category-tree__label > i { flex: 0 0 auto; color: var(--accent); font-size: 1rem; }
.censorly-category-tree__label > span { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.censorly-category-tree__label small { margin-left: auto; flex: 0 0 auto; color: var(--muted); font-size: .65rem; }
.censorly-category-tree__expand { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; border: 0; border-radius: .4rem; background: transparent; color: var(--muted); cursor: pointer; }
.censorly-category-tree__expand:hover { background: var(--tile); color: var(--text); }
.censorly-category-tree__children { margin: 0 .45rem .4rem .8rem; padding-left: .35rem; border-left: 1px solid var(--border); }
.censorly-category-tree__children[hidden], .censorly-category-tree__node[hidden] { display: none !important; }
.censorly-category-tree__children .censorly-category-tree__line { padding: .28rem .2rem; }
.censorly-category-tree__children .censorly-category-tree__label { font-size: .74rem; font-weight: 450; }
.censorly-category-tree__children .censorly-category-tree__label > i { color: var(--muted); }
.censorly-category-tree__children .censorly-category-tree__label > span { font-weight: 450; }
.censorly-random-validation { margin: 0; color: var(--danger); font-size: .8rem; }
@media (max-width: 919px) {
  .censorly-random-dialog__top-grid { grid-template-columns: 1fr; }
  .censorly-type-options { max-height: 7rem; }
  .censorly-category-tree { grid-template-columns: 1fr; max-height: min(22rem, 42vh); }
}
@media (max-width: 480px) {
  .censorly-random-settings { padding: .75rem; }
  .censorly-random-launcher__actions > button { flex: 1 1 auto; }
  .censorly-category-tree { grid-template-columns: 1fr; }
}