/* Layout: шапка с силуэтом города → сцена (постер героя | затар) → прокачка → правила → текст.
   Стиль по официальной странице обновления City Never Sleeps: угольный фон с зерном,
   кремовый текст, наклонные плашки-стикеры, пилюли линий, выделенное слово в заголовке. */
:root {
  --bg: #100e0e;
  --bg-2: #1a1716;
  --night: #131f22;
  --line: rgba(247, 233, 213, .14);
  --fg: #f7e9d5;
  --muted: rgba(247, 233, 213, .58);
  --ink: #070707;
  --orange: #dd6638;
  --teal: #60cde3;
  --green: #97da79;
  --yellow: #ffe14d;
  --mint: #8de3c4;
  --weapon: #e0913c;
  --spirit: #a77fe6;
  --vitality: #7cc04c;
  --hero: #dd6638;
  --f-display: 'Alegreya', Georgia, 'Times New Roman', serif;
  --f-tag: 'Rubik', 'Arial Black', Impact, sans-serif;
  --f-body: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'Rubik', ui-monospace, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); }
body {
  margin: 0;
  font: 17px/1.55 var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background:
    var(--grain),
    radial-gradient(900px 420px at 22% 120px, color-mix(in srgb, var(--hero) 16%, transparent), transparent 70%),
    var(--bg);
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
a { color: var(--teal); }

.wrap { max-width: 1180px; margin: 0 auto; }

/* --- Выделенное слово в заголовке, как «updated» на официальной странице --- */
mark {
  background: var(--orange); color: var(--ink); padding: 0 .16em; margin: 0 .04em;
  display: inline-block; line-height: 1.05; transform: rotate(-1.5deg);
}

/* --- Плашка-стикер (MAJOR UPDATE / BLUE LANE) --- */
.tag {
  display: inline-block; font: 900 13px/1 var(--f-tag); text-transform: uppercase; letter-spacing: .02em;
  padding: 6px 9px 5px; background: var(--orange); color: var(--ink); transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink);
}

/* --- Шапка --- */
.top {
  position: relative; z-index: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 22px 46px;
}
.top > * { position: relative; z-index: 1; }
.top::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%); height: 54px; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22%23131f22%22%3E%3Crect%20x%3D%220%22%20y%3D%2261%22%20width%3D%2238%22%20height%3D%2229%22/%3E%3Crect%20x%3D%2238%22%20y%3D%2218%22%20width%3D%2222%22%20height%3D%2272%22/%3E%3Crect%20x%3D%2262%22%20y%3D%2267%22%20width%3D%2255%22%20height%3D%2223%22/%3E%3Crect%20x%3D%22118%22%20y%3D%2265%22%20width%3D%2220%22%20height%3D%2225%22/%3E%3Crect%20x%3D%22138%22%20y%3D%2265%22%20width%3D%2233%22%20height%3D%2225%22/%3E%3Crect%20x%3D%22171%22%20y%3D%2263%22%20width%3D%2254%22%20height%3D%2227%22/%3E%3Crect%20x%3D%22229%22%20y%3D%2234%22%20width%3D%2221%22%20height%3D%2256%22/%3E%3Crect%20x%3D%22250%22%20y%3D%2268%22%20width%3D%2232%22%20height%3D%2222%22/%3E%3Crect%20x%3D%22283%22%20y%3D%2244%22%20width%3D%2236%22%20height%3D%2246%22/%3E%3Crect%20x%3D%22299%22%20y%3D%2235%22%20width%3D%224%22%20height%3D%2230%22/%3E%3Crect%20x%3D%22323%22%20y%3D%2235%22%20width%3D%2237%22%20height%3D%2255%22/%3E%3Crect%20x%3D%22361%22%20y%3D%2233%22%20width%3D%2224%22%20height%3D%2257%22/%3E%3Crect%20x%3D%22386%22%20y%3D%2264%22%20width%3D%2241%22%20height%3D%2226%22/%3E%3Crect%20x%3D%22427%22%20y%3D%2267%22%20width%3D%2254%22%20height%3D%2223%22/%3E%3Crect%20x%3D%22484%22%20y%3D%2243%22%20width%3D%2252%22%20height%3D%2247%22/%3E%3Crect%20x%3D%22539%22%20y%3D%2241%22%20width%3D%2255%22%20height%3D%2249%22/%3E%3Crect%20x%3D%22595%22%20y%3D%2226%22%20width%3D%2229%22%20height%3D%2264%22/%3E%3Crect%20x%3D%22624%22%20y%3D%2251%22%20width%3D%2254%22%20height%3D%2239%22/%3E%3Crect%20x%3D%22680%22%20y%3D%2252%22%20width%3D%2246%22%20height%3D%2238%22/%3E%3Crect%20x%3D%22726%22%20y%3D%2238%22%20width%3D%2225%22%20height%3D%2252%22/%3E%3Crect%20x%3D%22753%22%20y%3D%2239%22%20width%3D%2227%22%20height%3D%2251%22/%3E%3Crect%20x%3D%22780%22%20y%3D%2234%22%20width%3D%2253%22%20height%3D%2256%22/%3E%3Crect%20x%3D%22835%22%20y%3D%2226%22%20width%3D%2239%22%20height%3D%2264%22/%3E%3Crect%20x%3D%22877%22%20y%3D%2219%22%20width%3D%2255%22%20height%3D%2271%22/%3E%3Crect%20x%3D%22932%22%20y%3D%2240%22%20width%3D%2235%22%20height%3D%2250%22/%3E%3Crect%20x%3D%22967%22%20y%3D%2224%22%20width%3D%2221%22%20height%3D%2266%22/%3E%3Crect%20x%3D%22992%22%20y%3D%2252%22%20width%3D%2246%22%20height%3D%2238%22/%3E%3Crect%20x%3D%221040%22%20y%3D%2241%22%20width%3D%2219%22%20height%3D%2249%22/%3E%3Crect%20x%3D%221063%22%20y%3D%2239%22%20width%3D%2225%22%20height%3D%2251%22/%3E%3Crect%20x%3D%221073%22%20y%3D%2219%22%20width%3D%224%22%20height%3D%2230%22/%3E%3Crect%20x%3D%221090%22%20y%3D%2223%22%20width%3D%2226%22%20height%3D%2267%22/%3E%3Crect%20x%3D%221119%22%20y%3D%2265%22%20width%3D%2249%22%20height%3D%2225%22/%3E%3Crect%20x%3D%221141%22%20y%3D%2251%22%20width%3D%224%22%20height%3D%2230%22/%3E%3Crect%20x%3D%221172%22%20y%3D%2214%22%20width%3D%2235%22%20height%3D%2276%22/%3E%3Crect%20x%3D%221187%22%20y%3D%220%22%20width%3D%224%22%20height%3D%2230%22/%3E%3C/g%3E%3C/svg%3E") bottom / 1200px 54px repeat-x;
  opacity: .9;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); flex-wrap: wrap; }
.brand b { font: 900 clamp(24px, 3.4vw, 34px)/1 var(--f-tag); text-transform: uppercase; letter-spacing: .01em; text-shadow: 3px 3px 0 var(--ink); }
.brand b em { font-style: normal; color: var(--orange); }
.top-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.patch a { color: var(--fg); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 7px; box-shadow: 0 0 10px var(--green); }
.dot.stale { background: var(--yellow); box-shadow: none; }
.seg { display: inline-flex; border: 2px solid var(--fg); }
.seg button { background: none; border: 0; padding: 4px 10px; cursor: pointer; color: var(--fg); font: 900 12px var(--f-tag); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--ink); }

/* --- Сцена --- */
.stage {
  display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: 36px;
  padding-block: 34px 8px;
}
@media (max-width: 820px) { .stage { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* постер героя в кремовой рамке, как карточки героев на странице обновления */
.hero { display: grid; gap: 18px; align-content: start; }
.hero-art {
  aspect-ratio: 3 / 4; max-width: 100%; position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hero) 55%, #000), #120f0e);
  border: 6px solid #e9dcc5; box-shadow: 0 0 0 2px var(--ink), 8px 10px 0 rgba(0,0,0,.45);
  transform: rotate(-1.2deg);
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-info { display: grid; gap: 10px; align-content: start; min-width: 0; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 18px; }
}
.eyebrow { font: 800 18px/1 var(--f-display); color: var(--muted); }
.hero-name { font: 800 clamp(40px, 5.4vw, 58px)/.95 var(--f-display); margin: 0; text-wrap: balance; }
.hero-role { color: var(--muted); font-size: 16px; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 12px 10px; align-items: center; }
.complex { font-size: 14px; color: var(--muted); }
.complex b { color: var(--fg); letter-spacing: .1em; font-weight: 500; }

/* пилюля линии: чёрная с толстой цветной обводкой и буквой в круге */
.lane-pill {
  --lc: var(--teal);
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px 3px 3px; border-radius: 99px;
  background: var(--ink); border: 3px solid var(--lc); color: var(--fg);
  font: 900 15px/1 var(--f-tag); text-transform: uppercase; letter-spacing: .02em; transform: rotate(-1.5deg);
}
.lane-pill i {
  font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fg); color: var(--ink); box-shadow: inset 0 0 0 3px var(--lc); font-size: 14px;
}

/* бейдж «Новинка», как на экране выбора героя в игре */
.new-badge {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; text-align: center;
  background: #3fd6a4; color: var(--ink); font: 900 12px/1 var(--f-tag); text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 4px 4px;
}
.hp .new-badge { font-size: 8px; padding: 2px 1px; }

/* --- Затар --- */
.build { display: grid; gap: 16px; align-content: start; min-width: 0; }
.build-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.build-head h2, .block h2 { font: 800 clamp(30px, 3.6vw, 40px)/1.1 var(--f-display); margin: 0; text-wrap: balance; }
/* ценник как в магазине игры: чёрная плашка с мятными цифрами */
.souls {
  font: 900 26px/1 var(--f-tag); color: var(--mint); background: var(--ink); padding: 8px 14px 7px;
  font-variant-numeric: tabular-nums; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.souls small { font: 600 13px var(--f-body); color: var(--muted); margin-left: 6px; text-transform: lowercase; }
/* Слоты нумеруются как в игре: сверху вниз, затем следующий столбец */
.slots { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
/* на телефоне 3 столбца по 4 слота: каждый столбец — одна фаза игры */
@media (max-width: 640px) { .slots { grid-template-rows: repeat(4, auto); grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* номер слота в очереди покупки */
.slot-tile .num {
  position: absolute; right: 4px; bottom: 4px; min-width: 18px; text-align: center;
  font: 900 11px/1 var(--f-tag); padding: 3px 4px; background: var(--fg); color: var(--ink);
}
.slot-tile .num.ph-early { background: var(--green); }
.slot-tile .num.ph-mid { background: var(--yellow); }
.slot-tile .num.ph-late { background: var(--orange); }

/* подписи фаз над сеткой: каждая фаза — два столбца по 2 слота */
.phase-head { display: flex; gap: 12px; margin-bottom: -6px; }
.phase-head span {
  flex: 1; font: 900 12px/1 var(--f-tag); text-transform: uppercase; letter-spacing: .02em;
  padding: 6px 8px 5px; color: var(--ink); display: flex; justify-content: space-between; gap: 6px;
}
.phase-head small { font: 700 11px var(--f-tag); opacity: .7; }
.phase-head .ph-early { background: var(--green); }
.phase-head .ph-mid { background: var(--yellow); }
.phase-head .ph-late { background: var(--orange); }
@media (max-width: 640px) { .phase-head small { display: none; } .phase-head span { font-size: 11px; justify-content: center; text-align: center; } }

/* переключатель порядка покупки под героем */
.hero-opts { display: grid; gap: 14px; min-width: 0; }
.order-switch { display: grid; gap: 8px; }
@media (max-width: 820px) { .hero-opts { grid-column: 1 / -1; } .seg-order { max-width: none; } }
.order-switch .lbl { font: 800 20px/1.1 var(--f-display); }
.order-switch .hint { font-size: 14px; color: var(--muted); }
.seg-order { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--fg); max-width: 420px; }
.seg-order button {
  background: none; border: 0; padding: 9px 6px 8px; cursor: pointer; color: var(--fg); min-width: 0;
  font: 900 11px/1.15 var(--f-tag); text-transform: uppercase; letter-spacing: .02em; text-align: center;
}
.seg-order button + button { border-left: 2px solid var(--fg); }
.seg-order button:hover { background: rgba(247, 233, 213, .1); }
.seg-order button[aria-pressed="true"] { background: var(--teal); color: var(--ink); }

.slot { --c: var(--fg); position: relative; display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; min-width: 0; }
.slot-tile {
  aspect-ratio: 1; max-width: 100%; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--c) 35%, var(--bg-2));
  border: 2px solid var(--c); box-shadow: 3px 3px 0 rgba(0,0,0,.55);
  transition: transform .15s;
}
.slot:hover .slot-tile { transform: translateY(-3px) rotate(-1deg); }
.slot-tile img { width: 100%; height: 100%; object-fit: cover; }
/* тир как в игре: треугольник цвета категории в правом верхнем углу */
.slot-tile .tier {
  position: absolute; top: 0; right: 0; width: 36%; aspect-ratio: 1;
  background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%);
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: 3px 5px 0 0; font: 900 clamp(10px, 1.1vw, 13px)/1 var(--f-tag); color: var(--tier-ink, var(--ink));
}
.spirit .slot-tile .tier { --tier-ink: #fff; }
.slot-tile .act {
  position: absolute; top: 4px; left: 4px; font: 900 10px/1 var(--f-tag);
  padding: 3px 5px; background: var(--ink); color: var(--yellow);
}
.slot-name { font: 600 14px/1.2 var(--f-body); color: var(--fg); overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 640px) { .slot-name { font-size: 13px; } }
.slot-cost { font: 700 12px var(--f-tag); color: var(--mint); font-variant-numeric: tabular-nums; }
.slot .reroll {
  position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--yellow); color: var(--ink); display: grid; place-items: center; font: 900 13px var(--f-tag);
  opacity: 0; transition: opacity .15s; box-shadow: 2px 2px 0 var(--ink);
}
.slot:hover .reroll, .slot:focus-visible .reroll { opacity: 1; }
@media (hover: none) { .slot .reroll { opacity: .9; } }
.weapon { --c: var(--weapon); }
.spirit { --c: var(--spirit); }
.vitality { --c: var(--vitality); }

.split { display: flex; height: 6px; overflow: hidden; background: var(--line); }
.split span { display: block; height: 100%; transition: flex-grow .4s; }
.legend-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.legend-row b { font: 900 14px var(--f-tag); color: var(--fg); }
.sw { width: 10px; height: 10px; display: inline-block; margin-right: 6px; vertical-align: -1px; }


/* --- Оценка затара --- */
.verdict {
  --vc: var(--teal);
  display: grid; gap: 12px; padding: 16px 18px; background: rgba(0,0,0,.35);
  border: 2px solid var(--vc); box-shadow: 4px 4px 0 var(--ink); min-width: 0;
}
.verdict.v-meta { --vc: var(--green); }
.verdict.v-solid { --vc: var(--teal); }
.verdict.v-risky { --vc: var(--yellow); }
.verdict.v-challenge { --vc: var(--orange); }
.verdict.v-troll { --vc: #ff5a4a; }
.verdict.none { --vc: var(--line); }
.v-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v-label { font: 800 22px/1 var(--f-display); }
.v-tag { background: var(--vc); font-size: 15px; }
.v-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.v-chance { display: grid; }
.v-chance b { font: 900 34px/1 var(--f-tag); color: var(--vc); font-variant-numeric: tabular-nums; }
.v-chance span { font-size: 13px; color: var(--muted); }
.v-meter {
  flex: 1 1 200px; min-width: 0; height: 10px; position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
}
/* 5 зон = 5 вердиктов, цвета как у плашек вердиктов */
.v-meter span { display: block; height: 100%; opacity: .35; }
.v-meter .z-troll { background: #ff5a4a; }
.v-meter .z-challenge { background: var(--orange); }
.v-meter .z-risky { background: var(--yellow); }
.v-meter .z-solid { background: var(--teal); }
.v-meter .z-meta { background: var(--green); }
/* зона текущего вердикта горит ярко */
.v-troll .z-troll, .v-challenge .z-challenge, .v-risky .z-risky, .v-solid .z-solid, .v-meta .z-meta { opacity: 1; }
.v-meter i {
  position: absolute; top: -6px; width: 6px; height: 22px; margin-left: -3px; background: var(--fg);
  box-shadow: 0 0 0 2px var(--ink); transition: left .4s cubic-bezier(.2,.8,.3,1.2);
}
.v-sub { margin: 0; font-size: 14px; color: var(--muted); max-width: 70ch; }

/* --- Кнопки --- */
/* Кнопки сгруппированы по назначению: крутка | перекрутить | забрать */
.actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: center; padding-top: 10px; }
.act-main { grid-row: span 2; }
.act-main { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.act-group { display: grid; gap: 7px; min-width: 0; }
.act-lbl { font: 800 17px/1 var(--f-display); color: var(--muted); }
/* кнопки группы склеены в одну плашку, как переключатели */
.btn-row { display: flex; flex-wrap: wrap; box-shadow: 4px 4px 0 var(--ink); }
.btn-row .btn + .btn { border-left-width: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--fg); background: rgba(16, 14, 14, .6); padding: 10px 14px 9px; cursor: pointer;
  font: 900 13px/1 var(--f-tag); text-transform: uppercase; letter-spacing: .02em; color: var(--fg);
  transition: background .12s, color .12s, transform .12s;
}
.btn .ico { width: 17px; height: 17px; flex: none; }
.btn:hover { background: var(--fg); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-game { background: var(--teal); color: var(--ink); }
.btn-game:hover { background: var(--yellow); color: var(--ink); }

.btn-main {
  gap: 12px; font-size: 26px; padding: 16px 30px 14px; background: var(--orange); border: 3px solid var(--ink); color: var(--ink);
  transform: rotate(-2deg); box-shadow: 5px 5px 0 var(--ink);
}
.btn-main .ico { width: 28px; height: 28px; transition: transform .35s cubic-bezier(.2,.8,.3,1.3); }
.btn-main:hover { background: var(--yellow); color: var(--ink); transform: rotate(-2deg) translateY(-2px); }
.btn-main:hover .ico { transform: rotate(90deg); }
.btn-main:active { transform: rotate(-2deg) translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.kbd {
  font: 900 10px/1 var(--f-tag); color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 4px 8px 3px; border-radius: 3px;
}
@media (hover: none) { .kbd { display: none; } }
@media (max-width: 640px) {
  .actions { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .act-main { grid-row: auto; }
  .act-main, .act-group { width: 100%; }
  .btn-main { width: 100%; justify-content: center; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* --- Блоки --- */
section.block { padding-block: 34px 6px; border-top: 2px dashed var(--line); margin-top: 30px; }
.block .sub { color: var(--muted); font-size: 16px; margin: 6px 0 18px; max-width: 65ch; }

/* прокачка: тёмная дорожка как в игре */
.skills-scroll { overflow-x: auto; padding-bottom: 6px; }
.skills { display: grid; grid-template-columns: minmax(180px, 240px) repeat(16, 38px); row-gap: 8px; align-items: center; min-width: max-content; }
.skills .ab { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 15px var(--f-body); padding-right: 10px; }
.skills .ab img { width: 30px; height: 30px; flex: none; padding: 2px; filter: invert(1); background: #10190d; }
.skills .ab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skills .num { font: 700 11px var(--f-tag); color: var(--muted); text-align: center; }
.cell { height: 34px; background: rgba(0,0,0,.55); display: grid; place-items: center; }
.cell.first { border-radius: 4px 0 0 4px; }
.cell.last { border-radius: 0 4px 4px 0; }
.pip { display: inline-flex; align-items: center; gap: 3px; height: 23px; padding: 0 6px; border-radius: 6px; font: 700 12px var(--f-tag); }
.pip .gem { width: 12px; height: 12px; }
.pip.open { background: #3b2c55; padding: 0 7px; }
.pip.open .gem path { fill: #b48cff; }
.pip.open .gem .gem-in { fill: #3b2c55; }
.pip.up { background: #3a3a37; color: var(--fg); }
.pip.up .gem path { fill: #cfc8b8; }
.pip.up .gem .gem-in { fill: #3a3a37; }
@media (max-width: 640px) { .skills { grid-template-columns: minmax(130px, 160px) repeat(16, 36px); } }

/* --- Настройки --- */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px 32px; }
.opt { display: grid; gap: 10px; align-content: start; min-width: 0; }
.opt > label, .opt > .lbl { font: 800 20px/1.1 var(--f-display); color: var(--fg); }
.opt .hint { font-size: 14px; color: var(--muted); }
.range { display: flex; align-items: center; gap: 12px; }
.range input { flex: 1; accent-color: var(--orange); min-width: 0; }
.range output { font: 900 18px var(--f-tag); min-width: 2.5ch; text-align: right; color: var(--yellow); }
.toggle-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tog {
  border: 2px solid var(--line); background: transparent; padding: 6px 11px 5px; cursor: pointer;
  font: 900 12px/1 var(--f-tag); text-transform: uppercase; letter-spacing: .02em; color: var(--muted);
}
.tog:hover { border-color: var(--fg); color: var(--fg); }
.tog[aria-pressed="true"] { color: var(--ink); background: var(--teal); border-color: var(--teal); }
.heroes-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.hp { border: 2px solid transparent; padding: 0; background: var(--bg-2); cursor: pointer; overflow: hidden; position: relative; aspect-ratio: 1; max-width: 100%; }
.hp:hover { border-color: var(--fg); }
.hp img { width: 100%; height: 100%; object-fit: cover; }
.hp[aria-pressed="false"] img { filter: grayscale(1) brightness(.35); }
.hp[aria-pressed="false"]::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--orange); font: 900 24px var(--f-tag); }

/* --- Текст --- */
.about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 820px) { .about { grid-template-columns: minmax(0, 1fr); } }
.about p { color: var(--muted); max-width: 65ch; margin: 0 0 12px; }
.about strong { color: var(--fg); font-weight: 600; }
.about h3 { font: 800 26px/1.1 var(--f-display); margin: 0 0 10px; color: var(--fg); }
.about a { color: var(--teal); }
footer { padding-block: 26px 44px; color: var(--muted); font-size: 13px; border-top: 2px dashed var(--line); margin-top: 30px; }

/* --- Тост --- */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px) rotate(-1.5deg);
  background: var(--yellow); color: var(--ink); padding: 10px 16px 9px; font: 900 14px var(--f-tag); text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink); opacity: 0; pointer-events: none; transition: .25s; z-index: 20; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-1.5deg); }

/* --- Анимации --- */
@keyframes deal { from { transform: translateY(12px) rotate(-4deg); opacity: .1; } to { transform: none; opacity: 1; } }
.dealt .slot { animation: deal .35s cubic-bezier(.2,.8,.3,1.25) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes flash { 0% { filter: brightness(2.2) saturate(0); } 100% { filter: none; } }
.hero.flash .hero-art img { animation: flash .5s ease-out; }
.loading { padding: 80px 0; text-align: center; color: var(--muted); font: 900 14px var(--f-tag); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}