/* Landing-only styles. Tokens come from tokens.css. */

/* ---------- HERO ---------- */

.hero {
  position: relative;
  padding-block: var(--s-10) var(--s-11);
  overflow: clip;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-9) var(--s-10);
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-9); }
}

.hero-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent-strong) 18%, transparent);
}
.hero-eyebrow span + span::before {
  content: "·";
  margin-right: var(--s-3);
  color: var(--border-strong);
}

.hero h1 {
  /* Нижняя граница 40px (была 48): «живёт персонаж.» при 48px вылезала за
     360px-вьюпорт. Средний наклон не тронут — десктоп идентичен. (kenku-9pjl) */
  font-size: clamp(40px, 6.2vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-weight: 380;
  font-variation-settings: "opsz" 144;
}
.hero h1 em {
  font-style: italic;
  color: var(--fg);
  font-weight: 420;
}
.hero h1 .gold {
  color: var(--accent-strong);
  font-style: italic;
  font-weight: 460;
}

.hero-lead {
  margin-top: var(--s-7);
  max-width: 56ch;
  font-size: var(--fs-body-lg);
  color: var(--fg-soft);
  line-height: var(--lh-body);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.hero-meta {
  margin-top: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .check { width: 12px; height: 12px; color: var(--accent-strong); }

/* ---------- d20 stage ---------- */

.dice-stage {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: var(--r-4);
  background:
    radial-gradient(120% 80% at 50% 0%,
      color-mix(in oklch, var(--surface-ink) 88%, var(--accent-strong) 12%) 0%,
      var(--surface-ink) 60%);
  overflow: hidden;
  isolation: isolate;
  color: var(--on-ink);
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--fg) 8%, transparent),
    0 40px 80px -40px color-mix(in oklch, var(--surface-ink) 80%, transparent);
}
/* Felt texture, low-noise — no glassmorphism */
.dice-stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 30%, color-mix(in oklch, var(--on-ink) 10%, transparent), transparent 60%),
    radial-gradient(1px 1px at 78% 18%, color-mix(in oklch, var(--on-ink) 8%, transparent), transparent 60%),
    radial-gradient(1.4px 1.4px at 42% 72%, color-mix(in oklch, var(--on-ink) 9%, transparent), transparent 60%),
    radial-gradient(1px 1px at 88% 64%, color-mix(in oklch, var(--on-ink) 7%, transparent), transparent 60%);
  pointer-events: none;
  opacity: 0.7;
}
/* Subtle ruled lines suggesting a game mat */
.dice-stage::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent 49.85%, color-mix(in oklch, var(--on-ink) 6%, transparent) 49.85%, color-mix(in oklch, var(--on-ink) 6%, transparent) 50.15%, transparent 50.15%),
    linear-gradient(to bottom, transparent 49.85%, color-mix(in oklch, var(--on-ink) 6%, transparent) 49.85%, color-mix(in oklch, var(--on-ink) 6%, transparent) 50.15%, transparent 50.15%);
  pointer-events: none;
  opacity: 0.5;
  mask-image: radial-gradient(70% 70% at 50% 55%, var(--surface-ink) 30%, transparent 75%);
}

/* Interactive d20: large gold die centred on the felt mat, rolled by the
   «Бросить» button in the caption. States: idle / rolling / done / crit / fail. */
.dice-d20 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 8%));
  width: 46%;
  max-width: 200px;
  aspect-ratio: 1;
  z-index: 1;
  filter: drop-shadow(0 12px 22px color-mix(in oklch, var(--surface-ink) 70%, transparent));
  transition: transform var(--dur-3) var(--ease-out-deep);
}
.dice-d20 svg { width: 100%; height: 100%; overflow: visible; }
.dice-d20 .d20-body { fill: var(--accent); }
.dice-d20 .d20-dark { fill: color-mix(in oklch, var(--accent) 62%, var(--surface-ink) 38%); }
.dice-d20 .d20-mid  { fill: color-mix(in oklch, var(--accent) 82%, var(--surface-ink) 18%); }
.dice-d20 .d20-edge { fill: color-mix(in oklch, var(--accent) 90%, white 10%); }
.dice-d20 .d20-num {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: 40px;
  fill: var(--on-accent);
  font-variation-settings: "opsz" 72;
}
.dice-d20[data-state="rolling"] { animation: d20shake 140ms var(--ease-in-out) infinite; }
.dice-d20[data-state="crit"] {
  filter: drop-shadow(0 0 26px color-mix(in oklch, var(--crit) 80%, transparent));
}
.dice-d20[data-state="crit"] .d20-body { fill: var(--crit); }
.dice-d20[data-state="fail"] .d20-body { fill: var(--danger); }
.dice-d20[data-state="fail"] .d20-num { fill: oklch(96% 0.02 30); }
@keyframes d20shake {
  0%, 100% { transform: translate(-50%, calc(-50% - 8%)) rotate(0deg); }
  25% { transform: translate(-51%, calc(-50% - 9%)) rotate(-4deg); }
  75% { transform: translate(-49%, calc(-50% - 7%)) rotate(4deg); }
}

.dice-caption {
  position: absolute;
  left: var(--s-7);
  right: var(--s-7);
  bottom: var(--s-7);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-5);
  z-index: 2;
  pointer-events: none;
}
.dice-readout {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  display: grid;
  gap: 4px;
}
.dice-readout strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--on-ink);
}
.dice-roll-btn { pointer-events: auto; }
.dice-roll-btn .dice-roll-ico { width: 15px; height: 15px; }
/* ---------- Principles strip (ink section) ---------- */

.principles {
  background: var(--surface-ink);
  color: var(--on-ink);
}
.principles .shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-9) var(--s-10);
  align-items: start;
}
@media (max-width: 980px) {
  .principles .shell { grid-template-columns: 1fr; }
}
.manifesto {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 380;
  color: var(--on-ink);
  font-variation-settings: "opsz" 72;
}
.manifesto em {
  font-style: italic;
  color: var(--crit);
  font-weight: 460;
}
.manifesto small {
  display: block;
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  font-style: normal;
}

.principle-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--s-7);
  counter-reset: pr;
}
.principle-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-4);
  counter-increment: pr;
  align-items: baseline;
}
.principle-list li::before {
  content: counter(pr, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-ink-soft);
  letter-spacing: 0.16em;
  padding-top: 6px;
}
.principle-list h4 {
  color: var(--on-ink);
  margin-bottom: 6px;
  font-weight: 500;
}
.principle-list p {
  color: var(--on-ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}

/* ---------- Demo sheet (legacy) ---------- */
/* Старый статичный лист удалён: демо-блок теперь интерактивная лаборатория
   (.demo-lab / .dp-* / demo.js), стили ниже в секции «Demo lab». */

/* ---------- Compare (Free vs Pro) ---------- */

.compare {
  margin-top: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  overflow: hidden;
}
.compare-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--border);
  gap: var(--s-4);
}
.compare-row:first-child { border-top: 0; }
.compare-row.head {
  background: var(--surface-sunk);
  padding-block: var(--s-3);
}
.compare-row.head .col {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare-row.head .col.pro { color: var(--accent-strong); }
.compare-row.foot {
  background: var(--surface-sunk);
  padding-block: var(--s-5);
}
.compare-row.foot .col {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.compare-row.foot .col.pro { color: var(--accent-strong); font-style: italic; }
.compare-row .feature {
  font-weight: 500;
  color: var(--fg);
  font-size: 15.5px;
}
.compare-row .feature small {
  display: block;
  font-weight: 400;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0;
}
.compare-row .col {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-soft);
}
.compare-row .yes::before { content: "·"; color: var(--accent-strong); font-size: 22px; margin-right: 8px; vertical-align: -3px; }
.compare-row .no { color: var(--muted); }
.compare-row .no::before { content: "—"; margin-right: 6px; color: var(--border-strong); }

/* Mobile: 3-колоночная таблица не вмещается — длинные значения («Полный
   доступ», «Входит в Pro», «Базовая тема») рвут сетку и дают «кривую» картинку.
   Перестройка: фича на всю ширину, под ней Free и Pro двумя подписанными
   колонками. Шапка-строка прячется (подписи теперь у каждого значения). (kenku-9pjl) */
@media (max-width: 560px) {
  .compare { margin-top: var(--s-6); }
  .compare-row.head { display: none; }
  .compare-row {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-5);
    row-gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    align-items: start;
  }
  .compare-row .feature { grid-column: 1 / -1; margin-bottom: 2px; }
  .compare-row .col { font-size: 14px; }
  /* Мини-подпись колонки над значением. Спецификas nth-child перебивает
     .yes/.no ::before, поэтому маркеры-точки/тире на мобиле уступают подписи. */
  .compare-row > .col::before {
    display: block;
    margin: 0 0 1px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--muted);
    vertical-align: baseline;
  }
  .compare-row > .col:nth-child(2)::before { content: "Free"; }
  .compare-row > .col:nth-child(3)::before { content: "Pro"; color: var(--accent-strong); }
  /* foot: «Сколько стоит» — заголовок строки на всю ширину; цены ниже под Free/Pro. */
  .compare-row.foot > .col:first-child {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 2px;
  }
  .compare-row.foot > .col:first-child::before { content: none; }
  .compare-row.foot .col { font-size: 18px; }
}

/* ---------- Marketplace teaser ---------- */

.market-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--s-4);
}
@media (max-width: 980px) {
  .market-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .market-grid { grid-template-columns: 1fr; }
}

.market-card {
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  padding: var(--s-6);
  display: grid;
  align-content: space-between;
  gap: var(--s-5);
  min-height: 220px;
  transition:
    transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.market-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 20px 40px -28px color-mix(in oklch, var(--fg) 35%, transparent);
}
.market-card .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.market-card h4 {
  font-size: 22px;
  font-weight: 460;
  font-style: italic;
  color: var(--fg);
  line-height: 1.15;
}
.market-card p {
  font-size: 14px;
  color: var(--fg-soft);
  line-height: 1.5;
}
.market-card .foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.market-card .price {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--fg);
}
.market-card .price small {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  display: block;
}

.market-card.featured {
  grid-row: span 2;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface) 60%, color-mix(in oklch, var(--accent-soft) 55%, var(--surface) 45%) 100%);
  border-color: var(--border-strong);
}
.market-card.featured h4 {
  font-size: 30px;
  letter-spacing: -0.015em;
}

/* Theme swatch */
.swatch {
  --c1: var(--accent);
  --c2: var(--fg);
  --c3: var(--surface-sunk);
  height: 88px;
  border-radius: var(--r-2);
  background:
    linear-gradient(110deg, var(--c1) 0%, var(--c1) 38%, var(--c2) 38%, var(--c2) 70%, var(--c3) 70%, var(--c3) 100%);
  position: relative;
  overflow: hidden;
}
.swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, color-mix(in oklch, var(--surface-ink) 35%, transparent));
  pointer-events: none;
}

/* Mini-dice for shop cards */
.dice-row {
  display: flex;
  gap: 10px;
  align-items: end;
  height: 88px;
}
.mini-die {
  --c: var(--accent);
  width: 38px; height: 44px;
  position: relative;
  filter: drop-shadow(0 4px 8px color-mix(in oklch, var(--fg) 15%, transparent));
}
.mini-die svg { width: 100%; height: 100%; }
.mini-die svg .body { fill: var(--c); }
.mini-die svg .body-dark { fill: color-mix(in oklch, var(--c) 70%, var(--fg) 30%); }
.mini-die svg .body-mid { fill: color-mix(in oklch, var(--c) 85%, var(--fg) 15%); }
.mini-die svg .stroke { stroke: color-mix(in oklch, var(--fg) 50%, transparent); stroke-width: 1; fill: none; }
.mini-die.big { width: 52px; height: 58px; }

/* ---------- Download + community ---------- */

.download {
  background: var(--surface-sunk);
}
.download-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s-9);
  align-items: end;
}
@media (max-width: 820px) {
  .download-grid { grid-template-columns: 1fr; }
}
.download-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--s-9);
  display: grid;
  gap: var(--s-5);
}
.download-card h3 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 420;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
}
.download-card .specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.community {
  display: grid;
  gap: var(--s-4);
}
.community a {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  text-decoration: none;
  align-items: center;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.community a:hover { border-color: var(--fg); transform: translateX(2px); }
.community .icon { width: 22px; height: 22px; color: var(--accent-strong); }
.community .who { font-weight: 500; color: var(--fg); }
.community .who small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.community .arrow { color: var(--muted); }

/* ---------- Footer (unified — used on landing AND /pro/, kenku-l5xs) ----------
   Класс `legal-footer` намеренно общий: pro-смоук селектит footer.legal-footer
   с реквизитами ИП. Определение живёт здесь (landing.css грузят обе страницы);
   pro.css его больше не переопределяет. */

.legal-footer {
  background: var(--surface-ink);
  color: var(--on-ink);
  padding-block: var(--s-9) var(--s-7);
}
.legal-footer .grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: var(--s-7) var(--s-9);
}
@media (max-width: 720px) {
  .legal-footer .grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
.legal-footer .foot-brand .brand { color: var(--on-ink); }
.legal-footer .foot-brand .brand-mark { color: var(--accent); }
.legal-footer .foot-brand p {
  color: var(--on-ink-soft);
  max-width: 38ch;
  margin-top: var(--s-4);
  font-size: 14px;
  line-height: 1.55;
}
.legal-footer h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  margin: 0 0 var(--s-3);
  font-weight: 500;
}
.legal-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.legal-footer a { color: var(--on-ink); text-decoration: none; font-size: 14px; }
.legal-footer a:hover { color: var(--crit); }
.legal-footer .note {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  color: var(--on-ink-soft);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* ========================================================== */
/*  Demo lab — интерактивные кусочки Play (kenku-l5xs)         */
/* ========================================================== */

.demo-lab {
  /* Demo-scoped palette echoing the product sheet (wine prof, green HP, gold). */
  --demo-wine: oklch(45% 0.13 25);
  --demo-good: oklch(52% 0.12 150);
  --demo-gold: var(--accent-strong);
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  position: relative; /* anchor for .demo-toast */
}
[data-theme="dark"] .demo-lab {
  --demo-wine: oklch(64% 0.15 25);
  --demo-good: oklch(70% 0.13 150);
}
@media (max-width: 860px) {
  .demo-lab { grid-template-columns: 1fr; }
}

.demo-fallback {
  grid-column: 1 / -1;
  color: var(--fg-soft);
  font-size: var(--fs-body);
  max-width: 56ch;
}

/* ---- Left: tab menu ---- */
.demo-tabs {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  /* #9 — меню залипает вместе с лотком кубов при скролле длинных панелей. */
  position: sticky;
  top: var(--demo-tray-top, 96px);
  align-self: start;
}
@media (max-width: 860px) {
  .demo-tabs {
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: var(--s-2);
    position: static; /* на мобиле меню горизонтальное — sticky не нужен */
  }
}
.demo-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  text-align: left;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  color: var(--fg);
  transition: border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.demo-tab:hover { border-color: var(--border-strong); transform: translateX(2px); }
.demo-tab[aria-selected="true"] {
  border-color: var(--demo-gold);
  background: color-mix(in oklch, var(--accent-soft) 40%, var(--surface));
}
.demo-tab-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding-top: 2px;
}
.demo-tab[aria-selected="true"] .demo-tab-k { color: var(--accent-strong); }
.demo-tab-body { display: grid; gap: 2px; min-width: 0; }
.demo-tab-t { font-weight: 600; font-size: 15px; }
.demo-tab-d {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

/* ---- Right: stage ---- */
.demo-stage {
  position: relative;
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

/* ===== Реальный лоток кубов чарника (kenku-xhe9) =====
   3D dice-box + roll-log + adv/dis/crit toggles — тот же движок, что и /play.
   Sticky: на длинных панелях (18 навыков) лоток виден при скролле. top учитывает
   высоту топнава (#7: лоток больше не подлезает под полупрозрачную шапку). */
.demo-tray {
  position: sticky;
  top: var(--demo-tray-top, 96px);
  z-index: 3;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-3);
  background:
    radial-gradient(120% 140% at 100% 0%,
      color-mix(in oklch, var(--surface-ink) 92%, var(--accent-strong) 8%),
      var(--surface-ink));
  color: var(--on-ink);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--fg) 8%, transparent),
              0 18px 38px -28px color-mix(in oklch, var(--surface-ink) 80%, transparent);
}
.demo-tray__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.demo-tray__title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--on-ink-soft);
}
.demo-tray__toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.demo-tgl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--on-ink-soft);
  background: color-mix(in oklch, var(--on-ink) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--on-ink) 16%, transparent);
  border-radius: var(--r-1); padding: 4px 9px; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.demo-tgl:hover { background: color-mix(in oklch, var(--on-ink) 14%, transparent); color: var(--on-ink); }
.demo-tgl[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.demo-tray__canvas {
  position: relative; width: 100%; height: 240px;
  border-radius: var(--r-2); overflow: hidden;
  background: color-mix(in oklch, var(--surface-ink) 78%, #000 22%);
}
.demo-tray__canvas > canvas { width: 100% !important; height: 100% !important; display: block; }
.demo-tray__text {
  font-size: 13.5px; line-height: 1.45; color: var(--on-ink);
  background: color-mix(in oklch, var(--on-ink) 6%, transparent);
  border-radius: var(--r-2); padding: var(--s-3) var(--s-4); min-height: 1.4em;
}
.demo-tray__buttons { display: flex; gap: var(--s-2); }
.demo-tray__buttons .dp-step { flex: 1 1 auto; }
/* dp-step внутри тёмного лотка — светлый вариант */
.demo-tray .dp-step {
  color: var(--on-ink-soft);
  background: color-mix(in oklch, var(--on-ink) 8%, transparent);
  border-color: color-mix(in oklch, var(--on-ink) 16%, transparent);
}
.demo-tray .dp-step:hover:not(:disabled) { color: var(--on-ink); background: color-mix(in oklch, var(--on-ink) 14%, transparent); }
.demo-tray .dp-step:disabled { opacity: 0.45; cursor: default; }

/* Roll log внутри лотка — рендерится KenkuRollLog.renderEntry (как в /play). */
.demo-rolllog { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-height: 170px; overflow-y: auto; }
.demo-rolllog .roll-log__item {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-3);
  align-items: baseline; padding: 7px 2px;
  border-bottom: 1px solid color-mix(in oklch, var(--on-ink) 12%, transparent);
  font-size: 13px;
}
.demo-rolllog .roll-log__item:last-child { border-bottom: none; }
.demo-rolllog .roll-log__label { color: var(--on-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-rolllog .roll-log__formula { font-family: var(--font-mono); font-size: 11px; color: var(--on-ink-soft); }
.demo-rolllog .roll-log__result { font-family: var(--font-display); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.demo-rolllog .roll-log__empty { color: var(--on-ink-soft); font-style: italic; font-size: 13px; padding: 4px 2px; }
.demo-rolllog .roll-log__badge {
  display: inline-block; margin-left: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 999px; vertical-align: middle;
}
.demo-rolllog .roll-log__badge--crit { color: var(--on-accent); background: var(--crit); }
.demo-rolllog .roll-log__badge--fumble { color: oklch(96% 0.02 30); background: var(--danger); }
.demo-rolllog .roll-log__item--new { animation: demoRollIn 360ms var(--ease-out) both; }
@keyframes demoRollIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .demo-rolllog .roll-log__item--new { animation: none; } }

/* Panels */
.demo-panels {
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  padding: var(--s-6);
  min-width: 0;
}
.demo-panel { display: grid; gap: var(--s-3); }
.demo-panel[hidden] { display: none; }

.dp-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 600;
  margin-top: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed var(--border);
}
.demo-panel > .dp-head:first-child { margin-top: 0; }
.dp-mark { color: var(--demo-gold); font-size: 13px; }
.dp-hint { font-size: 12.5px; color: var(--muted); font-style: italic; }
.dp-mini-lab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.dp-mute { color: var(--muted); }

/* HP */
.dp-hp { display: grid; gap: var(--s-3); }
.dp-hp-num { font-family: var(--font-display); display: flex; align-items: baseline; gap: 6px; }
.dp-hp-num strong { font-size: 40px; font-weight: 460; color: var(--demo-good); line-height: 1; transition: color var(--dur-2) var(--ease-out); }
.dp-hp-num strong.is-low { color: var(--danger); }
.dp-hp-num span { font-size: 20px; color: var(--muted); }
.dp-hp-track { height: 6px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.dp-hp-track span { display: block; height: 100%; background: var(--demo-wine); border-radius: inherit; transition: width var(--dur-3) var(--ease-out); }
.dp-hp-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dp-step {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1);
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  color: var(--fg);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.dp-step:hover { border-color: var(--fg); }
.dp-step.dp-bad:hover { border-color: var(--danger); color: var(--danger); }
.dp-step.dp-heal { background: color-mix(in oklch, var(--demo-good) 16%, var(--surface)); border-color: color-mix(in oklch, var(--demo-good) 50%, var(--border)); color: color-mix(in oklch, var(--demo-good) 75%, var(--fg)); }

/* Two-box row (hit dice / pact) */
.dp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 460px) { .dp-grid2 { grid-template-columns: 1fr; } }
.dp-box {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  display: grid;
  gap: 6px;
  background: var(--surface-sunk);
}
.dp-link {
  justify-self: start;
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--accent-strong) 40%, transparent);
  text-underline-offset: 3px;
}
.dp-link:hover { text-decoration-color: currentColor; }
.dp-slot {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
}
.dp-slot-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--demo-wine);
  background: var(--demo-wine);
  transition: background-color var(--dur-1) var(--ease-out);
}
.dp-slot[aria-pressed="true"] .dp-slot-dot { background: transparent; }

/* Concentration */
.dp-conc {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 4px 10px;
  background: var(--surface);
}
.dp-conc-ico { color: var(--twilight, var(--accent-strong)); }
.dp-conc input {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  padding: 6px 0;
  min-width: 0;
}
.dp-conc input:focus { outline: none; }

/* Conditions */
.dp-conds { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px;
  color: var(--fg-soft);
  background: var(--surface);
  transition: all var(--dur-1) var(--ease-out);
}
.dp-chip:hover { border-color: var(--border-strong); }
.dp-chip.is-on { background: var(--accent-soft); border-color: transparent; color: var(--on-accent); font-weight: 600; }

/* Turn economy */
.dp-turns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.dp-turn { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--fg); cursor: pointer; }
.dp-turn input { width: 15px; height: 15px; accent-color: var(--accent-strong); }
.dp-endturn {
  margin-left: auto;
  background: var(--demo-wine);
  color: oklch(96% 0.02 30);
  border-radius: var(--r-1);
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 600;
}
.dp-endturn:hover { background: color-mix(in oklch, var(--demo-wine) 82%, black 18%); }

/* Attacks table */
.dp-atks { display: grid; gap: 2px; }
.dp-atk {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.9fr 0.7fr 1fr;
  gap: var(--s-3);
  align-items: center;
  text-align: left;
  padding: 9px var(--s-3);
  border-radius: var(--r-1);
  font-size: 13.5px;
  color: var(--fg);
  background: none;
  border: 1px solid transparent;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.dp-atk:hover { background: var(--surface-sunk); border-color: var(--border); }
/* #10 — снятое оружие прячем. `.dp-atk[hidden]` перебивает `.dp-atk{display:grid}`
   по специфичности (иначе UA-правило [hidden]{display:none} проигрывает). */
.dp-atk[hidden] { display: none; }
/* Кликабельные ячейки атаки/урона — отдельные броски (как в чарнике). */
.dp-atk-roll {
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--accent-strong);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: var(--r-1);
  padding: 4px 8px;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.dp-atk-roll:hover { background: color-mix(in oklch, var(--accent) 24%, transparent); border-color: var(--accent); }
.dp-atk-h .dp-atk-cell { font: inherit; }
.dp-atk-h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: default;
}
.dp-atk-name { font-weight: 600; }
.dp-atk-cell { font-variant-numeric: tabular-nums; }
@media (max-width: 540px) {
  .dp-atk { grid-template-columns: 1.4fr 0.7fr 0.9fr; }
  .dp-atk .dp-mute { display: none; }
}

/* Lines (speeds) */
.dp-lines { display: grid; gap: 2px; }
.dp-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dotted var(--border);
  font-size: 14.5px;
}
.dp-line span:first-child { color: var(--fg); }
.dp-line .num { color: var(--muted); }
.dp-line .num strong { color: var(--fg); font-size: 17px; font-weight: 600; }

/* Level */
.dp-level {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-sunk);
  transition: border-color var(--dur-1) var(--ease-out);
}
.dp-level:hover { border-color: var(--border-strong); }
.dp-level .dp-mini-lab { flex: 1; }
.dp-level-badge {
  background: var(--demo-wine);
  color: oklch(96% 0.02 30);
  border-radius: var(--r-1);
  padding: 2px 12px;
  font-weight: 600;
  font-size: 15px;
}
.dp-level-i {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted);
}

/* Stats grid */
.dp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 420px) { .dp-stats { grid-template-columns: 1fr; } }
.dp-stat {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-sunk);
}
.dp-stat-lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.dp-stat-val { font-family: var(--font-display); font-size: 26px; font-weight: 460; line-height: 1.1; color: var(--fg); }
.dp-stat-mod {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--demo-wine);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--demo-wine);
}

/* Roll rows (saves / skills) */
.dp-rows { display: grid; gap: 1px; }
/* Навыки — в 2 столбца ради экономии места (#3). На узких — снова в 1. */
.dp-rows--2col { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
@media (max-width: 560px) { .dp-rows--2col { grid-template-columns: 1fr; } }
.dp-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  text-align: left;
  padding: 8px var(--s-3);
  border-radius: var(--r-1);
  border-bottom: 1px dotted var(--border);
  color: var(--fg);
  transition: background-color var(--dur-1) var(--ease-out);
}
.dp-row:hover { background: var(--surface-sunk); }
.dp-row-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
}
.dp-row.is-prof .dp-row-dot { background: var(--demo-wine); border-color: var(--demo-wine); }
.dp-row-name { font-size: 14.5px; }
.dp-row-name em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); margin-left: 4px; }
.dp-row-mod { font-size: 14px; color: var(--fg-soft); font-weight: 600; }

/* Coins + inventory */
.dp-coins { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.dp-coin {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3);
  text-align: center;
  background: var(--surface-sunk);
  display: grid;
  gap: 2px;
}
.dp-coin strong { font-family: var(--font-display); font-size: 20px; font-weight: 460; color: var(--fg); }
.dp-items { display: grid; gap: 1px; }
.dp-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-3);
  border-bottom: 1px dotted var(--border);
  font-size: 14px;
}
.dp-item-name { flex: 1; min-width: 0; }
.dp-item em { font-style: italic; color: var(--muted); font-size: 12.5px; }
/* Снять/одеть — доспех меняет КБ (#4). */
.dp-equip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 3px 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.dp-equip:hover { border-color: var(--border-strong); color: var(--fg); }
.dp-equip[aria-pressed="true"] {
  color: var(--accent-strong);
  border-color: color-mix(in oklch, var(--accent) 45%, transparent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}
.dp-item.is-equipped .dp-item-name { font-weight: 600; }

/* КБ (класс брони) — пересчитывается при снятии/одевании доспеха (#4). */
.dp-ac {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-sunk);
}
.dp-ac-num { font-family: var(--font-display); font-size: 30px; font-weight: 460; line-height: 1; color: var(--fg); }
.dp-ac-note { font-size: 12.5px; color: var(--muted); text-align: right; }

/* Spells */
.dp-pact-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface-sunk);
}
.dp-spells { display: grid; gap: var(--s-2); }
.dp-spell {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  font-size: 14px;
}
.dp-spell.is-expanded { border-color: var(--border-strong); }
.dp-spell-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: 8px var(--s-3);
}
.dp-star { color: var(--demo-gold); font-size: 13px; }
.dp-spell-name em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); margin-left: 6px; }
.dp-spell-dmg { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
/* «Подробнее» — раскрыть описание (#5, как в чарнике). */
.dp-spell-more {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  padding: 3px 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.dp-spell-more:hover { color: var(--fg); border-color: var(--border); }
.dp-spell-full {
  padding: 0 var(--s-3) var(--s-3);
  border-top: 1px dotted var(--border);
  margin-top: 2px;
}
.dp-spell-props {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--s-3);
  margin: var(--s-3) 0;
  font-size: 12.5px;
}
.dp-spell-props dt { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.dp-spell-props dd { color: var(--fg-soft); margin: 0; }
.dp-spell-desc { font-size: 13.5px; line-height: 1.55; color: var(--fg-soft); margin: 0; }
@media (max-width: 540px) {
  .dp-spell-head { grid-template-columns: auto 1fr auto; }
  .dp-spell-head .dp-spell-dmg { display: none; }
}
.dp-cast {
  border: 1px solid var(--demo-wine);
  color: var(--demo-wine);
  border-radius: var(--r-1);
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dp-cast:hover { background: var(--demo-wine); color: oklch(96% 0.02 30); }

/* Toast (level-up popup) */
.demo-toast {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translate(-50%, 12px);
  background: var(--surface-ink);
  color: var(--on-ink);
  padding: 10px 18px;
  border-radius: var(--r-2);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 12px 30px -16px color-mix(in oklch, var(--surface-ink) 80%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out-deep);
  z-index: 5;
}
.demo-toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Auth slot ---------- */

.auth-slot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.auth-guest, .auth-user { display: none; align-items: center; gap: var(--s-3); }
.auth-slot[data-state="guest"] .auth-guest { display: inline-flex; }
.auth-slot[data-state="user"]  .auth-user  { display: inline-flex; }
.auth-user .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 13px;
}
.auth-user .name { font-size: 14px; color: var(--fg-soft); white-space: nowrap; }
/* «Привет,» — вежливость, но на средних ширинах съедает место под навигацию.
   Прячем приветствие, оставляя имя, чтобы топнав не переносился (kenku-l5xs). */
@media (max-width: 1180px) {
  .auth-user .name .hi { display: none; }
}
.auth-user .logout { font-size: 13px; color: var(--muted); }
.auth-user .logout:hover { color: var(--fg); }