/* base */
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/26px var(--font-body); }
.ds-pad { padding: var(--space-5); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.ds-stack { display: grid; gap: var(--space-4); }
.ds-caption { font: 600 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.ds-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* screen: every surface that shows product numbers, dark in both themes */
.ds-screen { background: var(--screen-900); color: var(--screen-ink); border: 1px solid var(--screen-line); border-radius: var(--radius-md); }
.ds-dots { background-image: radial-gradient(var(--screen-line) 1px, transparent 1.6px); background-size: var(--space-4) var(--space-4); }
.ds-screen .ds-caption { color: var(--screen-muted); }

/* Eyebrow */
.ds-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 600 13px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.ds-eyebrow .ds-icon { width: 14px; height: 14px; }
.ds-eyebrow--coin { border-color: var(--coin-ink); color: var(--coin-ink); }
.ds-eyebrow--fan { border-style: dashed; }
.ds-screen .ds-eyebrow, .ds-hero .ds-eyebrow { border-color: var(--screen-line); color: var(--screen-muted); }
.ds-screen .ds-eyebrow--coin, .ds-hero .ds-eyebrow--coin { border-color: var(--coin); color: var(--coin); }

/* Button and the download block */
.ds-btn { display: inline-flex; align-items: center; gap: var(--space-3); height: 52px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-sm); font: 700 18px/20px var(--font-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.ds-btn--primary { background: var(--coin); color: var(--on-coin); }
.ds-btn--primary:hover { filter: brightness(1.07); }
.ds-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.ds-btn--ghost:hover { background: var(--surface-raised); }
.ds-hero .ds-btn--ghost, .ds-screen .ds-btn--ghost { color: var(--screen-ink); border-color: var(--screen-line); }
.ds-hero .ds-btn--ghost:hover, .ds-screen .ds-btn--ghost:hover { background: var(--screen-700); }
.ds-btn:focus-visible, .ds-btn.is-focus { outline: none; box-shadow: var(--focus-ring); }
.ds-btn .ds-win-glyph { width: 18px; height: 18px; fill: currentColor; }
.ds-download { display: grid; gap: var(--space-3); justify-items: start; }
.ds-download__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ds-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font: 400 14px/22px var(--font-body); color: var(--ink-muted); }
.ds-facts code { font: 400 13px/20px var(--font-mono); padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); }
.ds-hero .ds-facts { color: var(--screen-muted); }
.ds-hero .ds-facts code { background: var(--screen-700); color: var(--screen-ink); }

/* FightBar */
.ds-fight { display: grid; gap: var(--space-2); }
.ds-fight__nums { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline; font: 700 22px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.ds-fight__nums small { margin-right: var(--space-1); font: 600 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--screen-muted); }
.ds-fight__win { color: var(--win); }
.ds-fight__tie { color: var(--screen-ink); }
.ds-fight__loss { color: var(--loss); }
.ds-fight__bar { display: flex; gap: 2px; height: 6px; }
.ds-fight__bar i { display: block; min-width: 2px; border-radius: var(--radius-xs); }
.ds-fight__bar .w { background: var(--win); }
.ds-fight__bar .t { background: var(--tie); }
.ds-fight__bar .l { background: var(--loss); }
/* stacked: подписи над числами — вариант панели, где русские подписи не помещаются в строку */
.ds-fight--stacked .ds-fight__nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--space-3); }
.ds-fight--stacked .ds-fight__nums small { display: block; margin: 0; }
.ds-fight--xl { gap: var(--space-4); }
.ds-fight--xl .ds-fight__nums { gap: var(--space-6); font-size: 64px; line-height: 64px; }
.ds-fight--xl .ds-fight__nums small { display: block; margin: 0 0 var(--space-2); }
.ds-fight--xl .ds-fight__bar { height: 14px; }

/* PlaceScale */
.ds-place { display: grid; gap: var(--space-2); }
.ds-place__value { font: 700 22px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.ds-place__track { position: relative; height: 20px; }
.ds-place__rail { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: var(--radius-xs); background: var(--screen-line); }
.ds-place__top { position: absolute; left: 0; width: 50%; top: 4px; height: 12px; border-radius: var(--radius-xs); background: var(--place-top); }
.ds-place__mark { position: absolute; top: 2px; width: 16px; height: 16px; margin-left: -8px; border-radius: var(--radius-full); background: var(--coin); box-shadow: 0 0 0 3px var(--screen-900); }
.ds-place__ticks { display: flex; justify-content: space-between; font: 600 12px/16px var(--font-display); font-variant-numeric: tabular-nums; color: var(--screen-muted); }

/* Panel: the product in the game */
.ds-panel { box-sizing: border-box; width: var(--panel-width); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-3); background: var(--screen-glass); color: var(--screen-ink); border: 1px solid var(--screen-line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); font: 500 14px/20px var(--font-body); }
.ds-panel__row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.ds-panel__label { font: 600 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--screen-muted); }
.ds-panel__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); font: 700 22px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.ds-panel__sub { font: 500 14px/20px var(--font-body); color: var(--screen-muted); }
.ds-panel .ds-fight__nums { gap: var(--space-2); }
.ds-panel__status { font: 500 14px/20px var(--font-body); color: var(--screen-muted); }
.ds-panel__status b { display: block; margin-bottom: 2px; font: 600 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--screen-ink); }
.ds-panel.is-combat .ds-fight, .ds-panel.is-combat .ds-panel__value, .ds-panel.is-combat .ds-panel__sub { opacity: var(--combat-dim); }
.ds-chip { display: inline-block; padding: 2px 6px; border-radius: var(--radius-xs); font: 700 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.ds-chip--lethal { background: var(--loss); color: var(--on-loss); }
.ds-chip--combat { border: 1px solid var(--screen-line); color: var(--screen-muted); }

/* Hero */
.ds-hero { position: relative; min-height: var(--hero-min); display: grid; align-items: center; overflow: hidden; background: var(--screen-900); color: var(--screen-ink); }
.ds-hero__capture { position: absolute; inset: 0; background-size: cover; background-position: center right; }
.ds-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--screen-900) 32%, transparent 72%); }
.ds-hero__inner { position: relative; box-sizing: border-box; width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--space-8) var(--space-6); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; }
.ds-hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
.ds-hero__title { margin: 0; font: 800 72px/68px var(--font-display); letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.ds-hero__title em { font-style: normal; color: var(--coin); }
.ds-hero__lead { margin: 0; max-width: 46ch; font: 400 19px/30px var(--font-body); color: var(--screen-muted); }
.ds-hero__stage { justify-self: end; }
.ds-slot-note { position: absolute; right: var(--space-4); bottom: var(--space-4); font: 400 13px/20px var(--font-mono); color: var(--screen-muted); }

/* FeatureRow */
.ds-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; }
.ds-feature--flip .ds-feature__media { order: 2; }
.ds-feature__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; padding: var(--space-6); box-sizing: border-box; }
.ds-feature__copy { display: grid; gap: var(--space-4); justify-items: start; }
.ds-feature__title { margin: 0; font: 800 48px/48px var(--font-display); text-transform: uppercase; text-wrap: balance; }
.ds-feature__body { margin: 0; max-width: 52ch; color: var(--ink-muted); }
.ds-feature__fact { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); font: 400 14px/22px var(--font-body); color: var(--ink); }

/* DataNotice */
.ds-data { display: grid; gap: var(--space-5); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ds-data__head { display: grid; gap: var(--space-3); justify-items: start; }
.ds-data__title { margin: 0; font: 800 48px/48px var(--font-display); text-transform: uppercase; }
.ds-data__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.ds-data h3 { margin: 0 0 var(--space-3); font: 700 28px/30px var(--font-display); text-transform: uppercase; }
.ds-data ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ds-data li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); }
.ds-data li .ds-icon { margin-top: 4px; color: var(--ink-muted); }
.ds-data__foot { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); font: 400 14px/22px var(--font-body); color: var(--ink-muted); }
.ds-data__foot b { color: var(--ink); font-weight: 600; }

/* Switch: a setting on or off, in the app window; neutral, sharp corners */
.ds-switch { appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative; box-sizing: border-box; width: 40px; height: 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.ds-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: var(--radius-xs); background: var(--ink-muted); }
.ds-switch:hover { border-color: var(--ink-muted); }
.ds-switch:checked { background: var(--ink); border-color: var(--ink); }
.ds-switch:checked::after { left: 21px; background: var(--page); }
.ds-switch:disabled { opacity: .4; cursor: default; }
.ds-switch:disabled:hover { border-color: var(--line); }
.ds-switch:focus-visible, .ds-switch.is-focus { outline: none; box-shadow: var(--focus-ring); }

/* AppWindow: the Tavern Seer window instead of the tray menu; no product numbers in it */
.ds-app { box-sizing: border-box; width: 460px; display: flex; flex-direction: column; background: var(--page); color: var(--ink); font: 400 16px/26px var(--font-body); }
.ds-app__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); }
.ds-app__name { margin: 0; font: 700 28px/30px var(--font-display); text-transform: uppercase; }
.ds-app__version { margin-left: auto; font: 400 13px/20px var(--font-mono); color: var(--ink-muted); }
.ds-app__main { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-5) var(--space-5); flex-grow: 1; }
.ds-app__now { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ds-app__state { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.ds-app__state > span { flex-grow: 1; min-width: 0; }
.ds-app__state.is-quiet { font-weight: 400; }
.ds-app__section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.ds-app__section:last-child { padding-bottom: 0; border-bottom: 0; }
.ds-app__row { display: flex; align-items: center; gap: var(--space-4); }
.ds-app__label { display: grid; flex-grow: 1; min-width: 0; }
label.ds-app__row { cursor: pointer; }
.ds-app__note, .ds-app__at { margin: 0; font: 400 14px/22px var(--font-body); color: var(--ink-muted); }
.ds-app__state .ds-app__at { flex-grow: 0; font-weight: 400; }
.ds-app__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: 400 14px/22px var(--font-body); }
.ds-app__field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.ds-app__field .ds-app__row { gap: var(--space-3); }
.ds-app__path { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface-raised); font: 400 13px/24px var(--font-mono); }
.ds-app__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); font: 400 14px/22px var(--font-body); color: var(--ink-muted); }
.ds-app__fan { margin-left: auto; }
.ds-mono { font: 400 13px/20px var(--font-mono); }
.ds-link { padding: 0; border: 0; background: none; font: inherit; color: var(--coin-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ds-link:hover { text-decoration-thickness: 2px; }
.ds-link:focus-visible, .ds-link.is-focus { outline: none; border-radius: var(--radius-xs); box-shadow: var(--focus-ring); }
.ds-select { min-width: 200px; height: 36px; padding: 0 var(--space-2); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 400 14px/22px var(--font-body); cursor: pointer; }
.ds-select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-btn:disabled { opacity: .4; cursor: default; filter: none; }
.ds-btn--ghost:disabled:hover { background: transparent; }

@media (max-width: 760px) {
  .ds-hero__inner { grid-template-columns: 1fr; padding: var(--space-7) var(--space-4); }
  .ds-hero__title { font-size: 44px; line-height: 44px; }
  .ds-hero__stage { justify-self: start; }
  .ds-feature { grid-template-columns: 1fr; gap: var(--space-5); }
  .ds-feature--flip .ds-feature__media { order: 0; }
  .ds-feature__title, .ds-data__title { font-size: 32px; line-height: 34px; }
  .ds-data__cols { grid-template-columns: 1fr; }
}