/* dotora v3 — "lane" visual language, перенесён из React-прототипа:
   оливково-зелёная военная палитра, Manrope/Oswald, панели-карточки,
   большое поле боя с формацией, комбинации постоянной правой колонкой. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;450;500;550;600;650;700;750;800&family=Oswald:wght@500;600;700&display=swap');

:root {
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  color: #dbe1da;
  background: #101512;
  font-synthesis: none;
  font-weight: 500;
  font-size: 15px;
  --bg: #101512;
  --panel: #171e19;
  --border: #2b352d;
  --muted: #869187;
  --mint: #a2c7a3;
  --gold: #ddb17a;
  --blue: #86afc7;
  --danger: #d1806c;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 360px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; transition: background .18s, border-color .18s, transform .18s, color .18s; color: inherit; background: none; border: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:not(:disabled):active { transform: translateY(1px); }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
svg { flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }
::selection { background: #647552; color: #fff; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #435045; border-radius: 6px; }
::-webkit-scrollbar-track { background: #161d18; }
kbd { font-family: inherit; font-size: 10px; border: 1px solid #405038; border-radius: 3px; padding: 1px 4px; color: #839575; line-height: 1.2; }
.mint { color: var(--mint) !important; }
.gold { color: var(--gold) !important; }
.blue { color: var(--blue) !important; }
.mint-bg { background: #8cb19a !important; }
.blue-bg { background: #719eb8 !important; }
.full-width { width: 100%; }

.app, #app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 75% 35%, #1b271c35, transparent 65%); }

/* ---------- topbar ---------- */
.topbar { height: 64px; padding: 0 3.2%; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--border); background: #141a16; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 12px; color: #e3e4d9; cursor: pointer; }
.brand svg { height: 28px; width: 28px; color: #d39b65; }
.brand > span { font-family: 'Oswald', sans-serif; letter-spacing: 2px; font-size: 29px; font-weight: 600; }
.brand-dot { color: var(--gold); }
.brand-divider { width: 1px; height: 22px; background: var(--border); margin-left: 1px; }
.brand-caption { color: #7b897e; font-size: 9px; line-height: 1.8; letter-spacing: 1.15px; font-weight: 750; }
.main-nav { display: flex; align-self: stretch; align-items: stretch; gap: 29px; margin-left: auto; margin-right: auto; }
.main-nav button { font-size: 14px; color: #8d998f; position: relative; display: flex; gap: 8px; align-items: center; padding: 0 2px; white-space: nowrap; }
.main-nav button.active { color: #dce3d8; }
.main-nav button.active:after { content: ''; position: absolute; height: 2px; bottom: 0; left: 0; right: 0; background: var(--gold); }
.main-nav button:hover { color: #e7eada; }
.header-right { display: flex; align-items: center; gap: 17px; }
.version { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: #a8b1a2; border: 1px solid #384033; border-radius: 4px; padding: 5px 7px; }
.version span { color: #71816f; margin-left: 4px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; color: #89968b; width: 30px; height: 30px; border-radius: 5px; }
.icon-button:hover { background: #ffffff0b; color: #d8dfd5; }
.icon-button.small { width: 21px; height: 21px; }

/* ---------- topbar run meta (run-bar слит в шапку) ---------- */
.page-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 22px 0; max-width: 1900px; margin: 0 auto; width: 100%; }
.run-meta { display: flex; align-items: center; gap: 8px; }
.run-id { font-size: 11px; color: #677469; white-space: nowrap; }
.act-pill { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #a1b798; background: #263025; border: 1px solid #394936; border-radius: 4px; display: flex; align-items: center; gap: 6px; padding: 4px 7px; white-space: nowrap; }
.autosave { display: flex; align-items: center; gap: 5px; color: #647569; font-size: 11px; white-space: nowrap; }
.subtle-button { display: flex; gap: 7px; align-items: center; color: #9aa398; font-size: 12px; white-space: nowrap; }
.subtle-button:hover { color: var(--gold); }

/* ---------- layout: sidebar | scene | context (всё на одном экране) ---------- */
.game-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 244px minmax(0, 1fr) 292px; gap: 18px; align-items: stretch; margin-bottom: 12px; }
.game-layout.two { grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
.panel { background: linear-gradient(125deg, #1b221c, #171e19); border: 1px solid var(--border); border-radius: 8px; }
.section-label { font-size: 10px; font-weight: 750; letter-spacing: 1.45px; display: flex; align-items: center; justify-content: space-between; color: #8d9b8d; gap: 7px; }
.section-label > span:first-child, .section-label.gold, .section-label.mint { display: flex; gap: 7px; align-items: center; justify-content: flex-start; }
.section-label.mint { color: var(--mint); }
.section-label.gold { color: var(--gold); }

/* ---------- sidebar: HUD забега ---------- */
.run-panel { padding: 14px 15px 6px; }
.run-panel .section-label { margin-bottom: 13px; }
.wave-badge { font-size: 10px; letter-spacing: .2px; border: 1px solid #364032; padding: 2px 5px; border-radius: 4px; color: #a6b3a1; white-space: nowrap; }
.act-steps { display: flex; gap: 7px; align-items: center; padding-bottom: 12px; }
.act-steps > span { display: flex; align-items: center; gap: 4px; color: #4d6145; font-size: 10px; font-weight: 750; letter-spacing: .3px; }
.act-steps .current { color: #b3bb8d; }
.act-steps .complete { color: #83ac80; }
.act-steps i { width: 11px; height: 1px; background: #3a4b30; margin-left: 4px; flex-shrink: 0; }
.run-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid #26302a; }
.run-row > span { font-size: 12px; color: #9aa798; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.run-row strong { font-size: 20px; line-height: 1.2; font-weight: 750; letter-spacing: -.5px; white-space: nowrap; }
.run-row strong small { font-size: 11px; color: #a89269; font-weight: 600; letter-spacing: 0; }
.effects-panel { padding: 12px 15px 13px; }
.effect-row { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: #8fa085; padding-top: 10px; line-height: 1.5; }
.effect-row svg { flex-shrink: 0; color: #8fa085; }
.effect-row.momentum, .effect-row.momentum svg { color: #e0b478; }
.effect-row.none { color: #5e6d58; }
.effect-row.none svg { color: #5e6d58; }
.effect-row small { display: block; color: #7d8b72; font-size: 9.5px; }
.resource-pips { display: flex; gap: 4px; flex: 1; max-width: 92px; }
.resource-pips i { height: 4px; flex: 1; background: #313b30; border-radius: 2px; }
.lives { display: flex; gap: 3px; color: #394537; }
.lives .alive { color: #97ac88; }
.journal-panel { padding: 12px 14px 14px; }
.journal-panel .section-label { font-size: 9px; letter-spacing: 1.1px; }
.journal-tools { display: flex; gap: 3px; align-items: center; }
.journal-panel .chevron-btn svg { transform: rotate(90deg); transition: transform .18s; }
.journal-panel.open .chevron-btn svg { transform: rotate(-90deg); }
.journal-entries { padding-top: 11px; display: flex; flex-direction: column; gap: 10px; }
.journal-entries > div { display: flex; gap: 8px; align-items: flex-start; color: #677566; }
.journal-entries > div.latest { color: #a0ad98; }
.log-dot { width: 4px; height: 4px; flex-shrink: 0; margin-top: 5px; border-radius: 50%; background: #667c5c; }
.journal-entries p { font-size: 11.5px; line-height: 1.75; }
.text-button { display: flex; align-items: center; gap: 6px; color: #889981; font-size: 10px; margin-top: 14px; padding: 0; }
.text-button:hover { color: var(--gold); }
.combo-guide { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid #30392c; border-radius: 7px; text-align: left; background: #1a2018; }
.guide-icon { width: 31px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid #3d442f; background: #2b2f20; color: #b8b087; }
.combo-guide > span { flex: 1; }
.combo-guide strong { display: block; font-size: 12px; color: #b9bda6; font-weight: 650; }
.combo-guide small { display: block; font-size: 10px; color: #76836d; margin-top: 4px; }
.combo-guide > svg { color: #718168; }
.combo-guide:hover { border-color: #6d7553; }

/* ---------- inventory (полоса билда внизу / карточки в лавке) ---------- */
.play-area { min-width: 0; display: flex; flex-direction: column; gap: 17px; overflow-y: auto; min-height: 0; }
.inventory-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.inventory-heading .section-label { gap: 14px; }
.slot-count { font-size: 12px; color: #c8d4c1; letter-spacing: 0; }
.slot-count > span { color: #5e705c; }
.inventory-help { font-size: 10px; color: #697c65; display: flex; align-items: center; gap: 6px; }
.inventory-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.item-slot { display: flex; position: relative; align-items: center; gap: 7px; border: 1px solid #46513a; border-radius: 5px; background: linear-gradient(120deg, #30352380, #222b1e50); height: 53px; text-align: left; padding: 6px; min-width: 0; }
.item-slot:hover { border-color: #9a9d62; background: #303924; }
.item-art { width: 41px; height: 35px; flex-shrink: 0; overflow: hidden; background: radial-gradient(#64653250, transparent); display: flex; align-items: center; justify-content: center; }
.item-art .item-gem { background: none; border: none; box-shadow: none; width: 100%; height: 100%; }
.item-art .item-gem img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.item-slot > span:not(.item-slot-dot) { min-width: 0; }
.item-slot strong { font-size: 11px; display: block; font-weight: 750; color: #d0d3bb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-slot small { display: block; font-size: 9px; color: #8d9b74; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-slot-dot { position: absolute; top: 5px; right: 5px; width: 3px; height: 3px; background: #b4b779; border-radius: 50%; }
.empty-slot { border: 1px dashed #35432f; background: #1b241935; justify-content: center; gap: 7px; color: #51674c; }
.empty-slot span { font-size: 10px; }
.empty-slot:hover { background: #263122; border-color: #566a47; }
.item-slot.legendary { border-color: #867044; background: linear-gradient(120deg, #342f2166, #222b1e50); }

/* ---------- нижняя полоса: билд + рука во всю ширину ---------- */
.bottom-band { flex-shrink: 0; padding: 9px 16px 8px; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(125deg, #161d17, #131914); display: flex; flex-direction: column; gap: 7px; }
.bottom-band.shop { gap: 10px; }
.band-top { display: flex; align-items: center; gap: 12px; margin: 0 1px; }
.band-top .spacer { flex: 1; }
.band-hand-title { font-size: 15px; font-weight: 750; display: flex; align-items: center; gap: 8px; white-space: nowrap; margin: 0; }
.band-hand-title > span { font-size: 12px; color: #b1bfa7; border: 1px solid #354431; border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.band-hand-title small { color: #66795f; font-weight: 500; }
.band-build { display: flex; align-items: center; gap: 8px; }
.band-label { font-size: 10px; font-weight: 750; letter-spacing: 1.45px; color: #8d9b8d; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.build-strip { display: flex; gap: 7px; }
.build-icon { position: relative; width: 46px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid #46513a; border-radius: 5px; background: linear-gradient(120deg, #30352380, #222b1e50); color: #b4b779; padding: 3px; }
.build-icon .item-gem { background: none; border: none; box-shadow: none; width: 100%; height: 100%; }
.build-icon .item-gem img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.build-icon:hover { border-color: #9a9d62; background: #303924; }
.build-icon.empty { border-style: dashed; color: #51674c; background: #1b241935; }
.build-icon.legendary { border-color: #867044; }
.bottom-band .hero-hand, .bottom-band .under-hand { max-width: 1340px; width: 100%; margin-left: auto; margin-right: auto; }
.bottom-band .hero-hand { padding: 0; }
.bottom-band .hero-art { height: 100px; }
.bottom-band .hero-card-bottom { min-height: 54px; }
.bottom-band .hero-card.selected, .bottom-band .hero-card:hover { transform: translateY(-6px); }

/* ---------- battle scene: центр = место принятия решения ---------- */
.battle-scene { position: relative; isolation: isolate; overflow: hidden; border-radius: 8px; border: 1px solid #435039; background: #26352b url('images/battlefield.jpg') center 42% / cover; min-height: 0; display: flex; flex-direction: column; }
.battle-scene:after { content: ''; position: absolute; inset: 5px; border: 1px solid #afc8a115; border-radius: 4px; pointer-events: none; }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #0d1a12e6 0%, #0d1a12c0 42%, #0d1a1266 72%, #14261d99 100%), linear-gradient(0deg, #0f1d14d5, transparent 52%); z-index: -1; }
.scene-inner { padding: 14px 20px 16px; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.scene-target { display: flex; align-items: center; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid #afc8a116; flex-shrink: 0; }
.scene-emblem { width: 46px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #d1ae6f; background: linear-gradient(140deg, #3d42263b, #2b312123); border: 1px solid #695e3344; border-radius: 9px; transform: rotate(45deg); }
.scene-emblem > svg { transform: rotate(-45deg); filter: drop-shadow(0 2px 8px #d8bb5438); }
.scene-emblem.boss { color: var(--danger); border-color: #6b4038; }
.scene-title { min-width: 0; }
.scene-title .section-label { justify-content: flex-start; }
.scene-title h2 { font-size: 21px; font-weight: 750; letter-spacing: -.6px; color: #e2e8d8; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-hp { margin-left: auto; }
.scene-hp-num { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; color: #9aae8d; font-size: 12px; }
.scene-hp-num svg { align-self: center; }
.scene-hp-num strong { font-family: 'Oswald', sans-serif; font-size: 33px; line-height: 1; font-weight: 600; color: #d9e2cf; letter-spacing: -.5px; }
.scene-hp-num > span { color: #6d7f66; font-size: 12px; }
.scene-hp .health-track { width: 280px; margin: 8px 0 0 auto; }
.health-track { position: relative; height: 12px; border-radius: 4px; background: #232a22; overflow: hidden; box-shadow: inset 0 1px 3px #0007; }
.health-track > div { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.health-track .hp-base { left: 0; background: #4e6047; opacity: .55; transition: width .5s; }
.health-track .hp-remain { left: 0; background: linear-gradient(90deg, #7c9a70, #a5b78c); transition: width .45s; }
.health-track .hp-damage { min-width: 7px; background: repeating-linear-gradient(-55deg, #c95841 0 6px, #a53f2c 6px 12px); box-shadow: 0 0 10px #c9584155; transition: left .35s, width .35s; }
.health-track.dead .hp-remain { width: 0 !important; }
.health-track.dead .hp-damage { left: 0 !important; width: 100% !important; animation: deadPulse .9s ease-in-out infinite alternate; }
@keyframes deadPulse { from { filter: brightness(.92); } to { filter: brightness(1.25); } }
.scene-reward { text-align: right; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; padding-left: 16px; border-left: 1px solid #afc8a116; align-self: stretch; justify-content: center; }
.scene-reward > span { font-size: 10px; letter-spacing: 1px; color: #828976; font-weight: 700; }
.scene-reward b { display: flex; align-items: center; gap: 5px; font-size: 17px; color: var(--gold); }

/* правила волны — чипы, читаются перед каждым боем */
.rule-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* «Вторая попытка»: откат выбора тропы (маршрут #80) */
.undo-route-row { display: flex; justify-content: flex-end; padding: 0 14px; margin-top: 6px; }
.undo-route-row .secondary-button { font-size: 11px; padding: 4px 10px; }
.rule-chip { font-size: 11px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 5px; border: 1px solid #3a4a30; background: #141d15d0; color: #a9b8a0; position: relative; }
.rule-chip b { font-weight: 700; color: #cbd8bf; }
.rule-chip svg { color: #8fae82; flex-shrink: 0; }
/* Чипы живут у верхней кромки сцены — тултип разворачиваем вниз, иначе
   он обрезается краем панели. */
.rule-chip .pop { bottom: auto; top: calc(100% + 8px); }
.rule-chip .pop:after { top: auto; bottom: 100%; border-width: 0 5px 5px; }
.rule-chip.danger { color: #d99281; border-color: #5a3a30; }
.rule-chip.danger svg { color: #d1806c; }
.rule-chip.done { color: #5e6d58; text-decoration: line-through; border-color: #2c382b; }
.rule-chip.done svg { color: #5e6d58; }
.rule-chip.elite { color: #e0b478; border-color: #6b5430; }
.rule-chip.elite svg { color: #d3b06a; }
.rule-chip.pulse { animation: chipPulse 1.8s ease-in-out infinite alternate; }
@keyframes chipPulse { from { box-shadow: 0 0 0 #d1806c00; } to { box-shadow: 0 0 14px #d1806c38; } }

/* сцена: слева формация + формула, справа приговор + CTA */
.scene-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; flex: 1; min-height: 0; padding-top: 2px; }
.scene-play { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.scene-formation { display: flex; gap: 14px; align-items: center; }
.formation-cards { display: flex; gap: 8px; }
.formation-slot { width: 48px; height: 58px; display: flex; align-items: center; justify-content: center; border: 1px dashed #9ab48045; border-radius: 5px; background: #18271d73; position: relative; color: #6a855c; }
.formation-slot.occupied { cursor: grab; }
.formation-slot.occupied:active { cursor: grabbing; }
.formation-slot { user-select: none; -webkit-user-select: none; }
.formation-slot img { -webkit-user-drag: none; pointer-events: none; }
.formation-slot.dragging { opacity: .4; }
.formation-slot.drag-over { border-color: #d6b782 !important; box-shadow: 0 0 0 1px #d6b78266, 0 0 16px #d4ab6244; }
.formation-slot .slot-idx { position: absolute; top: 3px; left: 5px; color: #a9bd90; font-size: 9px; z-index: 2; font-weight: 800; text-shadow: 0 1px 3px #000; }
.formation-slot.occupied { border: 1px solid #a7b68d77; box-shadow: 0 3px 12px #0003; background: #29332a; }
.formation-slot .hero-art { position: absolute; inset: 0; height: 100%; border-radius: 4px; }
.formation-slot .hero-art .sigil { opacity: .5; }
.formation-slot .slot-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 2px 4px 3px; background: #111b13d4; color: #dfe7d2; font-size: 8.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
.formation-note { font-size: 10px; line-height: 1.8; color: #7f9474; }
.arena-label { position: absolute; top: 18px; right: 21px; display: flex; align-items: center; gap: 6px; font-size: 8px; letter-spacing: 1.45px; color: #c3cbb099; text-shadow: 0 1px 5px #000; }
.radial-dot { width: 6px; height: 6px; border: 1px solid #c3cbb0; border-radius: 50%; }
.attacking { animation: shake .35s; }
.damage-burst { position: absolute; top: 46%; right: 24%; color: #f1d79e; font-size: 58px; font-family: 'Oswald', sans-serif; font-weight: 600; text-shadow: 0 3px 5px #10160c, 0 0 22px #ebc47770; animation: damage 1s ease-out forwards; z-index: 4; pointer-events: none; }
.damage-burst small { display: block; font-family: 'Manrope', sans-serif; font-size: 9px; letter-spacing: 3px; text-align: center; }
.crit-burst { position: absolute; top: 30%; right: 22%; color: #ff5340; font-size: 54px; font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 2px; text-shadow: 0 3px 5px #10160c, 0 0 26px #ff2d1470; animation: critPop 1.4s ease-out forwards; z-index: 5; pointer-events: none; }
.crit-burst small { display: block; font-family: 'Manrope', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 1.6px; text-align: center; color: #ffb0a3; }
@keyframes critPop { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 18% { transform: scale(1.25) rotate(2deg); opacity: 1; } 30% { transform: scale(1) rotate(0deg); } 78% { opacity: 1; } 100% { transform: scale(1.06); opacity: 0; } }

/* ---------- рука в нижней полосе ---------- */
.hand-instruction { font-size: 10px; color: #74866b; white-space: nowrap; }
.hand-tools { display: flex; align-items: center; gap: 5px; }
.hand-tools > span { font-size: 9px; color: #63785b; margin-right: 4px; }
.sort-button { font-size: 10px; color: #889d7d; padding: 4px 7px; display: flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 4px; }
.sort-button.active, .sort-button:hover { background: #293824; border-color: #475b3d; color: #c1ceb4; }
.deck-button { display: flex; align-items: center; gap: 5px; border-left: 1px solid #34482c; padding-left: 12px; margin-left: 7px; color: #92a584; font-size: 12px; }
.hero-hand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; align-items: start; padding: 0 1px; }
.hero-card { padding: 0; min-width: 0; position: relative; border: 1px solid var(--card-border); border-bottom-width: 3px; border-radius: 6px; background: #1e2821; box-shadow: 0 6px 9px #0003; text-align: left; transition: transform .2s, border .2s, box-shadow .2s; --attr: #aaa; }
.hero-card.str, .collection-hero.str { --attr: #d58b76; --card-border: #6b4038; --card-bg: #382622; }
.hero-card.agi, .collection-hero.agi { --attr: #acc778; --card-border: #52663c; --card-bg: #293220; }
.hero-card.int, .collection-hero.int { --attr: #85b6d7; --card-border: #3b5b71; --card-bg: #1e2e3a; }
.hero-card.uni, .collection-hero.uni { --attr: #b5a1cf; --card-border: #665478; --card-bg: #2e253d; }
.hero-card.selected { transform: translateY(-9px); border-color: #d6b782; box-shadow: 0 0 0 1px #d6b78222, 0 5px 17px #d4ab6220; }
.hero-card:hover { transform: translateY(-9px); box-shadow: 0 8px 24px #0005; z-index: 3; border-color: var(--attr); }
.hero-card.selected:hover { transform: translateY(-13px); border-color: #f0d4a0; }
.hero-card.mined { cursor: not-allowed; filter: grayscale(.5) brightness(.65); }
.hero-card.mined:hover { transform: none; border-color: var(--card-border); box-shadow: 0 6px 9px #0003; }
.hero-art { height: 109px; position: relative; overflow: hidden; border-radius: 5px 5px 0 0; background: radial-gradient(ellipse at 40% 30%, var(--card-border), #1e2521); isolation: isolate; }
.hero-card .hero-art > .hero-art, .collection-portrait .hero-art, .formation-slot .hero-art { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.hero-art img { height: 100%; width: 100%; object-fit: cover; object-position: 48% center; position: absolute; inset: 0; filter: saturate(.73) brightness(.82); transition: filter .2s, transform .3s; }
.hero-card:hover .hero-art img, .hero-card.selected .hero-art img { filter: saturate(.95) brightness(1.03); }
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, #10161140, transparent 40%, #0e1516b5 83%, var(--card-bg)), linear-gradient(90deg, #0b12193d, transparent 45%); z-index: 1; }
.hero-rank { position: absolute; left: 7px; top: 4px; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 31px; color: #f0e9d8; text-shadow: 0 2px 6px #000c; line-height: 1.2; z-index: 2; }
.attribute-icon { position: absolute; right: 6px; top: 8px; color: var(--attr); font-size: 15px; text-shadow: 0 1px 4px #000; z-index: 2; cursor: help; }
.hero-name { position: absolute; bottom: 8px; left: 7px; right: 3px; font-size: 12px; line-height: 1.3; font-weight: 800; color: #e5e6dc; text-shadow: 0 1px 5px #000; letter-spacing: -.1px; z-index: 2; }
.hero-card-bottom { background: linear-gradient(var(--card-bg), #1c2420); padding: 1px 7px 5px; min-height: 59px; border-radius: 0 0 5px 5px; }
.hero-attribute { color: var(--attr); font-size: 8px; display: block; font-weight: 650; }
.hero-ability { display: block; font-size: 8.5px; margin-top: 6px; color: #a3aaa0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 9px; color: #9da88e; }
.card-foot > span { display: flex; align-items: center; gap: 2px; }
.card-foot kbd { font-size: 8px; background: #0e16114f; border-color: #74816b28; min-width: 12px; height: 13px; line-height: 11px; padding: 0; text-align: center; color: #718068; }
.selection-order { position: absolute; top: -11px; right: -5px; height: 20px; min-width: 30px; border: 2px solid #141c14; border-radius: 5px; background: #dac292; color: #313425; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 9px; font-weight: 800; }
.mine-mark { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; z-index: 5; display: flex; align-items: center; justify-content: center; color: #e08a7a; background: rgba(8, 12, 9, .82); border: 1.5px solid #a3544455; border-radius: 50%; box-shadow: 0 0 14px #0009; cursor: help; }
/* поповер бейджа (мина Techies, усталость) должен перекрывать тултип героя:
   бейдж держит свой стек на z-index:5, и вложенный .pop (z-60) без этого
   не поднимался над тултипом (z-40) — окно способностей его прятало */
.hero-card .mine-mark:hover, .hero-card .fatigue-mark:hover, .hero-card .augh-mark:hover { z-index: 45; }

/* мягкий тултип над картой: особенность героя без системного title */
.hero-tooltip { display: none; position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 208px; padding: 12px 13px; background: linear-gradient(150deg, #2b352c, #222b24); border: 1px solid #5b6b52; border-radius: 10px; box-shadow: 0 12px 30px #000a; z-index: 95; pointer-events: none; text-align: left; }
.hero-tooltip:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #5b6b52; }
.hero-card:hover .hero-tooltip { display: block; animation: tooltipIn .16s ease-out; }
@keyframes tooltipIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%); } }
.hero-tooltip strong { display: block; font-size: 13px; font-weight: 750; color: var(--attr); }
.hero-tooltip p { font-size: 9.5px; line-height: 1.7; color: #b5c2ab; margin-top: 5px; }
.hero-tooltip small { display: block; font-size: 7.5px; letter-spacing: .3px; color: #7d8b72; margin-top: 8px; padding-top: 7px; border-top: 1px solid #3a4738; }
/* крайние карты не дают тултипу вылезти за экран */
.hero-hand .hero-card:nth-child(-n+2) .hero-tooltip { left: 0; transform: none; }
.hero-hand .hero-card:nth-child(-n+2) .hero-tooltip:after { left: 26px; margin-left: 0; }
.hero-hand .hero-card:nth-child(-n+2):hover .hero-tooltip { animation: tooltipInL .16s ease-out; }
@keyframes tooltipInL { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hero-hand .hero-card:nth-child(n+6) .hero-tooltip { left: auto; right: 0; transform: none; }
/* правым крайним картам — анимация без translateX(-50%): общая tooltipIn
   дёргала тултип в конце открытия (прыжок у двух последних героев). */
.hero-hand .hero-card:nth-child(n+6):hover .hero-tooltip { animation: tooltipInL .16s ease-out; }
.hero-hand .hero-card:nth-child(n+6) .hero-tooltip:after { left: auto; right: 26px; margin-left: 0; }

/* универсальный мягкий тултип: контейнер с data-tip + вложенный .pop */
[data-tip] { position: relative; }
.pop { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 224px; padding: 11px 12px; background: linear-gradient(150deg, #2b352c, #222b24); border: 1px solid #5b6b52; border-radius: 9px; box-shadow: 0 12px 30px #000a; z-index: 95; pointer-events: none; text-align: left; }
.pop:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #5b6b52; }
[data-tip]:hover .pop { display: block; animation: tooltipIn .16s ease-out; }
.pop strong { display: block; font-size: 12.5px; font-weight: 750; color: #dfe5d2; }
.pop p { font-size: 10.5px; line-height: 1.65; color: #b5c2ab; margin-top: 4px; }
.pop small { display: block; font-size: 8.5px; letter-spacing: .3px; color: #8a987d; margin-top: 7px; padding-top: 6px; border-top: 1px solid #3a4738; }
.pop.side { left: auto; right: 2px; transform: none; }
.pop.side:after { left: auto; right: 24px; margin-left: 0; }
/* вверх места нет (якорь у верхней кромки) — разворот вниз; класс ставит
   клампер тултипов в ui.js */
.pop.flip-down { bottom: auto; top: calc(100% + 10px); }
.pop.flip-down:after { top: auto; bottom: 100%; border-width: 0 6px 6px; border-top-color: transparent; border-bottom-color: #5b6b52; }

/* состояние обновилось без смены коллекции — ничего не «всплывает» заново */
.no-anim .hero-card, .no-anim .shop-card, .no-anim .item-slot,
.no-anim .recruit-card, .no-anim .route-card { animation: none !important; }
.under-hand { display: flex; align-items: center; justify-content: space-between; margin: 11px 2px 0; color: #6b8062; font-size: 10px; gap: 10px; }
.under-hand > span { display: flex; align-items: center; gap: 5px; }
.selection-dot { width: 4px; height: 4px; background: #9eaf88; border-radius: 50%; margin-right: 2px; }
.under-hand strong { font-weight: 600; color: #b0bea3; }
.under-hand button { font-size: 9px; padding: 0 0 0 8px; color: #929976; }
.under-hand button:hover { color: var(--gold); }
.keyboard-divider { padding: 0 4px; }

/* ---------- сцена: формула (главное число экрана), приговор, CTA ---------- */
.combo-preview { text-align: left; padding: 0; align-self: flex-start; }
.combo-preview .section-label { font-size: 9px; letter-spacing: 1.3px; color: #859c78; justify-content: flex-start; }
.combo-preview > strong { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 750; letter-spacing: -.6px; color: #dde6cd; margin: 6px 0 4px; }
.combo-preview > strong svg { color: #80956b; }
.combo-preview > small { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #879978; }
.combo-preview:hover > strong { color: #ffffff; }
.score-formula { display: flex; align-items: center; gap: 12px; }
.score-block { width: 70px; height: 60px; border: 1px solid; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.score-block strong { font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.5px; }
.score-block > span { font-size: 9px; letter-spacing: 1.2px; font-weight: 700; }
.score-block.power { border-color: #4a6a56; background: #344e3f; color: #b5d9b8; }
.score-block.multiplier { background: #5d422a; border-color: #82633f; color: #efd0a0; }
.score-formula > svg, .equals { color: #74886a; }
.times { display: flex; }
.equals { font-size: 22px; }
.total-score { text-align: center; min-width: 96px; }
.total-score strong { font-family: 'Oswald', sans-serif; font-size: 46px; line-height: 1; color: #e3e7ca; font-weight: 600; letter-spacing: -.5px; }
.total-score > span { display: flex; justify-content: center; gap: 3px; font-size: 9px; color: #97a27f; letter-spacing: 1.4px; margin-top: 6px; }
.scene-side { display: flex; flex-direction: column; gap: 8px; min-width: 246px; }
.scene-verdict { display: flex; flex-direction: column; gap: 3px; padding: 10px 13px; border-radius: 7px; border: 1px solid #3a4a30; background: #1d2719d9; }
.scene-verdict > b { display: flex; align-items: center; gap: 8px; font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 1.1px; color: #b7c2ab; }
.scene-verdict > small { font-size: 10px; line-height: 1.5; color: #7d8b72; }
.scene-verdict.kill { border-color: #4d6a3b; background: #26371fd9; }
.scene-verdict.kill > b { color: #a9d29d; }
.scene-verdict.kill > small { color: #93a67f; }
.scene-verdict.harass { border-color: #7a6437; background: #322a17d9; }
.scene-verdict.harass > b { color: #e9c98f; }
.scene-verdict.harass > small { color: #a8946a; }
.scene-verdict.blocked { border-color: #6b4038; background: #33221dd9; }
.scene-verdict.blocked > b { color: #d99281; }
.scene-verdict.blocked > small { color: #a97f70; }
.scene-verdict.normal { border-color: #3d4a44; background: #1c2622d9; }
.scene-verdict.normal > b { color: #a8bfb4; }
.scene-verdict.normal > small { color: #7e938a; }
.scene-verdict.idle { border-style: dashed; background: #1a231bd0; }
.scene-verdict.idle > b { color: #6d7f66; }
.commit-row { display: flex; gap: 6px; flex-wrap: wrap; }
.commit-chip { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #e9c98f; border: 1px solid #7a6437; background: #3c331d; border-radius: 4px; padding: 4px 8px; white-space: nowrap; }
.commit-chip.neutral { color: #9aa88b; border-color: #3d4a35; background: #242d20; }
.commit-chip.momentum { color: #e0a470; border-color: #7d5230; background: #38281a; }
.action-buttons { display: flex; flex-direction: column; gap: 7px; }
.primary-button { background: linear-gradient(120deg, #e3be83, #d7aa72); color: #312b1d; border: 1px solid #edcd98; border-bottom: 3px solid #9c7748; border-radius: 5px; padding: 11px 19px; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 3px 12px #060d0640; }
.primary-button:hover:not(:disabled) { background: linear-gradient(120deg, #f0cf9b, #e6bb85); box-shadow: 0 4px 14px #d2b37617; }
.primary-button:disabled { opacity: .5; }
.attack-button { padding: 10px 14px; font-size: 16px; }
.attack-button kbd { border-color: #5a4b293d; color: #685336; margin-left: 16px; font-size: 12px; }
.discard-button { display: flex; justify-content: center; align-items: center; gap: 8px; color: #a7b09a; font-size: 12.5px; padding: 4px 10px; }
.discard-button kbd { font-size: 9px; margin-left: 15px; color: #99a185; }
.discard-button:hover:not(:disabled) { color: #d6e4cb; }

/* ---------- context panel (правая колонка: контекст решения) ---------- */
.context-panel { min-width: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.context-inner { padding: 12px 13px; flex-shrink: 0; }
.context-inner .section-label { font-size: 9.5px; }
.active-formation { padding-top: 12px; }
.active-formation strong { display: block; font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: .4px; color: #e6edcf; }
.active-formation > small { display: block; font-size: 10.5px; color: #879978; margin-top: 5px; line-height: 1.6; }
.active-value { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.active-value b { font-family: 'Oswald', sans-serif; font-size: 25px; font-weight: 600; line-height: 1; }
.active-value b.mint { color: var(--mint); }
.active-value b.gold { color: var(--gold); }
.active-value > span { color: #6a7c60; font-size: 13px; }
.active-value em { font-style: normal; margin-left: auto; font-size: 12px; color: #97a27f; }
.inner-label { margin-top: 14px; font-size: 9px; letter-spacing: 1.1px; }
.bond-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.bond-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; background: #33422a66; border: 1px solid #7a916055; border-radius: 5px; padding: 7px 9px; }
.bond-row strong { color: #d5dec1; font-weight: 650; }
.bond-row span { color: #b8ca96; white-space: nowrap; }
.context-empty { padding: 14px 4px 8px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; color: #6d7f66; }
.context-empty svg { color: #55674d; }
.context-empty p { font-size: 11px; line-height: 1.7; }
.context-all { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border: 1px solid #30392c; border-radius: 7px; background: #1a2018; color: #a9b39a; font-size: 12px; font-weight: 650; }
.context-all:hover { border-color: #6d7553; color: #dde6cd; }
.next-target { padding-top: 12px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.next-emblem { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: #d1ae6f; background: linear-gradient(140deg, #3d42263b, #2b312123); border: 1px solid #695e3344; border-radius: 8px; }
.next-emblem.boss { color: var(--danger); border-color: #6b4038; }
.next-target strong { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 600; color: #e6edcf; letter-spacing: .3px; }
.next-hp { display: flex; align-items: baseline; gap: 5px; }
.next-hp b { font-family: 'Oswald', sans-serif; font-size: 23px; font-weight: 600; }
.next-hp span { font-size: 11px; color: #6d7f66; }
.next-target small { font-size: 10.5px; line-height: 1.7; color: #8fa085; }
.combo-rows { display: flex; flex-direction: column; margin-top: 10px; }
.combo-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 9px; border-radius: 5px; border: 1px solid transparent; border-left: 2px solid #2c382b; margin-bottom: 3px; transition: background .15s, border-color .15s; }
.combo-row:nth-child(odd) { background: #1d261c66; }
.combo-row.hit { background: #33422a; border-color: #7a9160; border-left: 2px solid #c9d8a0; box-shadow: 0 0 12px #a5c17a22; }
.combo-row.ready { border-left-color: #5c7a4d; }
.combo-row-name strong { display: block; font-size: 11px; font-weight: 750; color: #ccd5bd; letter-spacing: -.1px; }
.combo-row.hit .combo-row-name strong { color: #e6edcf; }
.combo-row-name small { display: block; font-size: 8.5px; color: #7d8b72; margin-top: 2px; }
.combo-row-value { display: flex; align-items: center; gap: 4px; font-size: 9px; color: #6a7c60; align-self: start; }
.combo-row-value b { font-size: 15px; font-weight: 800; }
.combo-row-value .mint { color: var(--mint); }
.combo-row-value .gold { color: var(--gold); }
.combo-legend { display: flex; gap: 14px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #2a352a; font-size: 9px; color: #6d7f66; }
.combo-legend > span { display: flex; align-items: center; gap: 5px; }
.combo-legend .dot { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.combo-legend .dot.hit { background: #a9c284; }
.combo-legend .dot.ready { background: #556b47; }
.combo-legend .dot.penalized { background: #a05244; }
/* Подсказка «до цели один обмен»: ненавязчивая строка под блоком формации,
   мятный акцент = цвет прогресса, tooltip объясняет суть решения. */
.swap-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; padding: 7px 9px; font-size: 10.5px; line-height: 1.45; color: #a9c284; background: #1c261c; border: 1px solid #33422e; border-radius: 6px; cursor: help; }
.swap-hint b { color: #cfe0b8; }
.swap-hint .gold { color: var(--gold); }
.swap-hint svg { flex-shrink: 0; margin-top: 1px; }
/* Подсказки «в руке собирается формация»: ряд пилюль над рукой. Каждая —
   кнопка: клик выставляет отряд в готовом порядке, hover — правило и «почему».
   Та же мятная семья, что у swap-hint; главная пилюля чуть ярче. */
.formation-hints { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 auto 9px; padding: 0 2px; max-width: 1340px; width: 100%; }
.formation-hints .fh-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #74866b; white-space: nowrap; }
.formation-hints .fh-label svg { flex-shrink: 0; }
.form-hint { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; font-size: 11px; line-height: 1.2; color: #a9c284; background: #1c261c; border: 1px solid #33422e; border-radius: 999px; cursor: pointer; transition: border .15s, background .15s, transform .15s; }
.form-hint:hover { border-color: #58744a; background: #223021; transform: translateY(-1px); }
.form-hint.primary { border-color: #4d6b3f; background: #20301e; }
.form-hint b { color: #cfe0b8; font-weight: 700; }
.form-hint .fh-chain { color: #93a87e; font-size: 10.5px; white-space: nowrap; }
.form-hint .gold { color: var(--gold); font-weight: 700; }
.form-hint svg { flex-shrink: 0; }
/* Герои, из которых собирается подсказанная формация: пунктирное кольцо —
   «эти можно взять», исчезает после боя/смены руки вместе с пилюлями. */
.hero-card.hinted { outline: 1px dashed #6d8f56; outline-offset: 2px; }
.hero-card.hinted.selected { outline-style: solid; }
/* Правило цели на комбинациях: красная связь «чип башни ↔ строка комбо».
   Цвет бейджа = цвет rule-chip.danger в шапке сцены (#d99281 на #3a241e). */
.combo-row.penalized { border-left-color: #a05244; }
.combo-row.penalized .combo-row-name strong { color: #d9a394; }
.combo-row.hit.penalized { border-left-color: #c96a52; }
.combo-mult-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 8.5px; font-weight: 800; color: #d99281; background: #3a241e; border: 1px solid #6b4038; border-radius: 4px; padding: 1px 5px; margin-left: 4px; cursor: help; white-space: nowrap; }
.active-rule-mults, .formula-mults { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.formula-mults { justify-content: center; }
.formula-mults .combo-mult-badge { font-size: 9.5px; padding: 2px 7px; }

/* ---------- shop ---------- */
.shop { padding: 20px 24px 30px; overflow-y: auto; min-height: 0; }
.shop-banner { display: flex; align-items: center; gap: 17px; padding-bottom: 25px; border-bottom: 1px solid var(--border); }
.shop-emblem { background: #3b3424; border: 1px solid #625136; border-radius: 12px; color: var(--gold); width: 60px; height: 64px; display: flex; justify-content: center; align-items: center; }
.shop-banner h2 { font-size: 31px; letter-spacing: -.7px; margin: 5px 0; }
.shop-banner p { font-size: 12px; color: #8e9b85; line-height: 1.8; }
.shop-next { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #a8b58f; margin-top: 7px; }

/* ---------- стартовые архетипы (титул + новый забег) ---------- */
/* minmax(0,1fr), а не 1fr: длинные строки трио («Phantom Assassin · Sven ·
   Dawnbreaker») иначе распирают колонки из min-width:auto — карточка «Магия»
   вылезала за контейнер и резалась панелью обучения. */
.starter-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
.starter-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 9px; border: 1px solid var(--border); border-radius: 9px; background: #1a221b; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; min-width: 0; }
.starter-card:hover { border-color: #5b6b52; transform: translateY(-1px); }
.starter-card.active { border-color: var(--accent, #97a39b); background: #212b21; box-shadow: 0 0 0 1px var(--accent, #97a39b) inset; }
.starter-emoji { font-size: 21px; line-height: 1.2; }
.starter-name { font-family: 'Oswald', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: #dfe5d2; }
.starter-card.active .starter-name { color: var(--accent, #dfe5d2); }
.starter-trio { font-size: 8.5px; color: #8a987d; line-height: 1.5; text-align: center; min-height: 13px; max-width: 100%; overflow-wrap: break-word; }
.starter-perk { font-size: 8.5px; color: #b8a468; line-height: 1.5; text-align: center; max-width: 100%; overflow-wrap: break-word; }
/* Базовые герои режима видны и в модалке «Новый забег» — подпись компактнее,
   но не прячется: выбор стартовых условий всегда читается до клика. */
.starter-card .starter-trio b { color: #aab796; font-weight: 700; }
/* В модалке «Новый забег» пикер компактнее — кнопки не уезжают за скролл. */
.modal .starter-picker { gap: 6px; }
.modal .starter-card { padding: 7px 5px 6px; }
.modal .starter-emoji { font-size: 17px; }
.modal .starter-name { font-size: 10.5px; letter-spacing: .8px; }
.modal .starter-trio { font-size: 8px; min-height: 0; }
.modal .starter-perk { font-size: 8px; }
/* Тумблер «Оставить базовых героев» в шапке секции стартового отряда. */
.starter-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.keep-base-toggle { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: .4px; color: #8d9b8d; background: #1a221b; border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.keep-base-toggle:hover { border-color: #5b6b52; color: #b5c2ab; }
.keep-base-toggle.on { color: #cfe0b4; border-color: #5c7a4d; background: #222b1f; }
.kb-track { flex: 0 0 auto; width: 22px; height: 12px; border-radius: 7px; background: #2c382b; border: 1px solid #4a5a48; position: relative; transition: background .15s; }
.kb-track i { position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%; background: #7d8b72; transition: left .15s, background .15s; }
.keep-base-toggle.on .kb-track { background: #3d5230; }
.keep-base-toggle.on .kb-track i { left: 11px; background: #c9d8a0; }
.keep-base-toggle .pop { width: 250px; }

/* ---------- лимит предметов (слоты и классы) ---------- */
.cap-chips { display: flex; gap: 5px; }
.cap-chip { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; color: #9aa88b; border: 1px solid #3d4a35; background: #242d20; border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.cap-chip.full { color: #d99281; border-color: #6b4038; background: #33221d; }
.slot-class-tag { display: inline-block; font-size: 8.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #8a987d; border: 1px solid #3a4738; border-radius: 4px; padding: 2px 6px; margin-top: 7px; }
.shop-next b { color: #dfe5d2; }
.shop-gold { display: flex; align-items: center; gap: 9px; font-size: 33px; font-weight: 800; color: var(--gold); margin-left: auto; }
.shop-section-title { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 16px; }
.shop-section-title h3 { font-size: 14px; }
.secondary-button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; background: #283423; border: 1px solid #4b5a3d; border-bottom: 2px solid #35442d; border-radius: 5px; color: #b5c0a3; font-size: 12px; font-weight: 650; }
.secondary-button > span { display: flex; align-items: center; gap: 4px; color: var(--gold); margin-left: 5px; }
.secondary-button:hover:not(:disabled) { background: #35472c; border-color: #7c8c60; }
.shop-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; min-height: 241px; }
.shop-card { border: 1px solid #40503a; border-radius: 7px; padding: 13px; background: radial-gradient(ellipse at 50% 32%, #3b49323d, transparent 65%), #20291e; display: flex; flex-direction: column; align-items: center; }
.shop-card-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.rarity { font-size: 8px; text-transform: uppercase; letter-spacing: 1.2px; color: #8b9d7c; }
.lock-btn { font-size: 12px; }
/* Залоченное состояние должно читаться с первого взгляда: раньше 🔒/🔓 при
   12px были неотличимы, и клик по уже зафиксированному товару выглядел
   как «кнопка не работает». */
.lock-btn.locked { color: #ffd97a; background: #6b5a2a; box-shadow: inset 0 0 0 1px #ac9054; }
.shop-card.has-locked { border-color: #ac9054; box-shadow: 0 0 0 1px #ac905455, 0 0 14px #ac905422; }
.shop-card.has-locked .rarity { color: #d1ae71; }
.shop-card-art { width: 86px; height: 67px; display: flex; align-items: center; justify-content: center; margin: 9px auto; background: radial-gradient(#64653233, transparent 70%); }
.shop-card-art .item-gem { background: none; border: none; box-shadow: none; width: 100%; height: 100%; }
.shop-card-art .item-gem img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.shop-card h3 { font-size: 13px; text-align: center; color: #d4dcc7; }
.shop-card p { font-size: 10px; line-height: 1.7; color: #91a185; text-align: center; margin: 9px 0 14px; flex: 1; }
.buy-button { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid #695f3b; border-radius: 4px; background: #4c4329; color: #d8c791; font-size: 12px; font-weight: 700; padding: 8px; }
.buy-button > span:last-child { display: flex; gap: 5px; align-items: center; }
.buy-button:hover:not(:disabled) { background: #635532; border-color: #ac9054; }
.shop-card.legendary { border-color: #867044; background-color: #342f21; }
.shop-card.legendary .rarity { color: #d1ae71; }
.empty-shop { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; color: #aab497; font-size: 14px; }
.shop-bottom { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 23px; }
.shop-hint-row { font-size: 10.5px; color: #738566; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.shop-hint { text-align: center; font-size: 9px; color: #738566; margin-top: 18px; }

/* ---------- end screen ---------- */
.end-screen { flex: 1; min-height: 555px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; background: linear-gradient(#152419b0, #192117f5), url('images/battlefield.jpg') center / cover; }
.end-emblem { color: var(--gold); margin-bottom: 30px; }
.end-screen h2 { font-size: 33px; margin: 15px 0; max-width: 530px; letter-spacing: -.9px; }
.end-screen > p { font-size: 14px; color: #8e9e82; line-height: 1.8; max-width: 450px; }
.end-stats { display: flex; gap: 50px; margin: 35px 0; }
.end-stats strong { display: block; font-size: 29px; color: #c0d4a9; }
.end-stats span { font-size: 12px; display: block; color: #819875; margin-top: 5px; }

/* ---------- title ---------- */
.title-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; overflow: hidden; }
.title-bg { position: absolute; inset: 0; background: #1a241d url('images/battlefield.jpg') center / cover; z-index: -2; }
.title-bg:after { content: ''; }
.title-screen:before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, #0d1711f2 30%, #101a12c9 60%, #16241766); z-index: -1; }
.title-inner { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.brand.big svg { height: 52px; width: 52px; }
.brand.big > span { font-size: 60px; letter-spacing: 4px; }
.title-caption { color: #8b9a86; font-size: 13px; letter-spacing: 3.5px; line-height: 2; font-weight: 750; }
.title-formula { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.title-formula.left { justify-content: flex-start; }
.seed-row { display: flex; gap: 10px; margin-top: 6px; }
.seed-row input { background: #141c15e6; border: 1px solid #3e5134; color: #c6d0ba; padding: 11px 14px; border-radius: 5px; font-size: 15px; width: 240px; outline: none; }
.seed-row input:focus { border-color: var(--gold); }
.title-links { display: flex; align-items: center; gap: 12px; }
/* Низкие окна (ноутбуки 720p): «Начать забег» не должна уходить под обрез —
   декоративную формулу прячем, отступы жмём, титул скроллится явно. */
@media (max-height: 820px) {
  .title-screen { overflow-y: auto; align-items: flex-start; }
  .title-inner { padding: 12px 16px 18px; gap: 6px; }
  .title-formula, .title-rules, .rank-detail { display: none; }
  .brand.big { font-size: 34px; }
  .title-caption { font-size: 11px; line-height: 1.5; letter-spacing: 2.5px; }
  .starter-picker { gap: 6px; }
  .starter-card { padding: 7px 6px 6px; }
  .seed-row { margin-top: 2px; }
  .seed-row input { padding: 8px 12px; font-size: 13px; width: 200px; }
}
.title-hint { font-size: 10px; color: #6d8066; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: #2b3727; border: 1px solid #667855; color: #d1dbc3; border-radius: 7px; box-shadow: 0 10px 30px #0007; padding: 14px 17px; display: flex; align-items: center; gap: 10px; z-index: 100; font-size: 13px; max-width: calc(100vw - 30px); width: max-content; animation: toast .2s ease-out; }
.toast > svg { color: var(--gold); }
.toast button { display: flex; padding: 4px; color: #a7b896; }

/* ---------- modals ---------- */
.modal-backdrop { position: fixed; inset: 0; background: #080e0bd4; backdrop-filter: blur(8px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 25px; animation: fade .15s; }
.modal { position: relative; background: linear-gradient(145deg, #202b20, #171f18); border: 1px solid #49553e; box-shadow: 0 25px 100px #0008; border-radius: 12px; padding: 32px; width: 480px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
.wide-modal { width: 850px; }
.modal-close { position: absolute; top: 13px; right: 13px; }
.modal > .section-label { justify-content: flex-start; font-size: 10px; }
.modal h2 { font-size: 29px; line-height: 1.35; font-weight: 750; letter-spacing: -.7px; margin: 13px 0 14px; }
.modal-description { font-size: 14px; line-height: 1.9; color: #9cab92; }
.outcome-emblem { width: 76px; height: 76px; margin: 4px auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid; }
.outcome-emblem.win { color: var(--mint); border-color: #4d6a3b; background: #26371f; }
.outcome-emblem.lose { color: var(--danger); border-color: #6b4038; background: #33221d; }
.modal .outcome-emblem + .section-label { justify-content: center; }
.modal h2 { text-align: center; }
.outcome-rows { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 22px; }
.outcome-rows > div { display: flex; justify-content: space-between; align-items: center; background: #232e21; border: 1px solid #3a4a30; border-radius: 5px; padding: 11px 14px; font-size: 13px; color: #93a385; }
.outcome-rows b { display: flex; align-items: center; gap: 6px; color: #d5debd; font-size: 15px; }
.momentum-text { color: #e0a470 !important; }
.lose-text { color: #d99281 !important; }
.modal-actions { display: flex; gap: 12px; margin-top: 28px; }
.modal-actions > * { flex: 1; font-size: 12px; padding: 10px; }
.reset-icon { height: 55px; width: 55px; background: #3f3b27; border: 1px solid #6c603c; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--gold); margin: 6px 0 23px; }
.seed-modal-input { width: 100%; margin-top: 16px; background: #151e15; border: 1px solid #3e5134; border-radius: 4px; padding: 11px 12px; color: #c6d0ba; font-size: 14px; outline: none; }
.seed-modal-input:focus { border-color: var(--gold); }
.muted-note { font-size: 12px; color: #839778; display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 16px; line-height: 1.7; }

/* help */
.help-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
.help-steps > div { padding: 15px; background: #273023; border: 1px solid #394730; border-radius: 6px; }
.help-steps > div > span { display: block; font-family: 'Oswald', sans-serif; font-size: 25px; color: #bfb889; margin-bottom: 10px; }
.help-steps strong { font-size: 14px; }
.help-steps p { font-size: 12px; color: #94a086; line-height: 1.8; margin-top: 8px; }
.combo-table { border: 1px solid #3a4832; border-radius: 6px; overflow: hidden; }
.combo-table > div { display: grid; grid-template-columns: 1fr 1.3fr 125px; gap: 10px; padding: 10px 14px; align-items: center; font-size: 12px; background: #1c281d; }
.combo-table > div:nth-child(odd) { background: #243021; }
.combo-table > div + div { border-top: 1px solid #34442f; }
.combo-table .table-head { background: #303b28; font-size: 9px; letter-spacing: 1px; color: #a4b193; padding: 11px 14px; }
.combo-table strong { font-size: 13px; font-weight: 650; }
.combo-table small { display: block; font-size: 9px; color: #819376; margin-top: 3px; }
.combo-table > div > span:nth-child(2) { color: #a0af93; font-size: 12px; }
.combo-table > div > span:last-child { display: flex; align-items: center; gap: 12px; }
.combo-table b { font-size: 16px; }
.table-x { color: #6a7c60; font-size: 10px; }
.help-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 13px; background: #343624; border: 1px solid #505438; border-radius: 5px; color: #bbb788; }
.help-note p { font-size: 12px; line-height: 1.9; color: #a4ac8b; }

/* collection */
.collection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0; }
.tabs { display: flex; gap: 5px; }
.tabs button { padding: 9px 13px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; color: #8ea180; display: flex; gap: 7px; align-items: center; }
.tabs button.active { border-color: #566748; background: #35432b; color: #d2ddbe; }
.tabs button span { font-size: 9px; opacity: .6; }
.collection-toolbar input { background: #151e15; border: 1px solid #3e5134; border-radius: 4px; padding: 9px 11px; width: 190px; color: #c6d0ba; font-size: 12px; outline: none; }
.collection-toolbar input::placeholder { color: #6c8061; }
.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.collection-hero { display: flex; align-items: stretch; background: #222b1e; border: 1px solid #3b4933; border-radius: 6px; overflow: hidden; gap: 12px; min-height: 130px; position: relative; }
.collection-portrait { width: 96px; flex-shrink: 0; position: relative; background: var(--card-bg); overflow: hidden; }
.collection-portrait .hero-art { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.collection-portrait > b { position: absolute; top: 6px; left: 8px; color: #e4e8d5; font-size: 28px; font-family: 'Oswald', sans-serif; text-shadow: 0 1px 6px #000; z-index: 2; }
.collection-hero > div:last-child { padding: 12px 12px 12px 0; flex: 1; min-width: 0; }
.collection-hero strong { font-size: 14px; display: block; margin-bottom: 4px; }
.collection-hero .hero-attribute { font-size: 10px; }
.collection-hero p { font-size: 10px; line-height: 1.8; color: #9ba88f; margin-top: 8px; }
.collection-hero small { font-size: 9px; color: var(--gold); display: block; margin-top: 7px; }
.collection-item { display: flex; text-align: left; align-items: center; gap: 12px; border: 1px solid #435038; border-radius: 6px; padding: 13px; background: #252e20; min-height: 115px; }
.collection-item:hover { border-color: #8c9d71; background: #303f27; }
.collection-item-art { width: 68px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(#64653233, transparent 70%); }
.collection-item-art .item-gem { background: none; border: none; box-shadow: none; width: 100%; height: 100%; }
.collection-item-art .item-gem img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.collection-item > div { flex: 1; min-width: 0; }
.collection-item strong { font-size: 13px; }
.collection-item p { font-size: 10px; line-height: 1.8; color: #99aa89; margin: 6px 0; }
.collection-item small { font-size: 9px; }
.deck-summary { display: flex; gap: 20px; padding: 12px; margin-bottom: 15px; background: #2b3726; border: 1px solid #415638; border-radius: 5px; font-size: 12px; color: #95aa84; }
.deck-summary b { color: #d0daba; margin-left: 6px; }
.empty-search { padding: 40px; text-align: center; color: #9aad88; grid-column: 1 / -1; }

/* item detail */
.item-detail-image { width: 110px; height: 95px; margin: 8px 0 20px; background: radial-gradient(#75724177, transparent 70%); display: flex; align-items: center; }
.item-detail-image .item-gem { background: none; border: none; box-shadow: none; width: 100%; height: 100%; }
.item-detail-image .item-gem img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.detail-synergies { margin: 18px 0 4px; padding: 13px 14px; background: #26311f; border: 1px solid #3d4c2f; border-radius: 6px; }
.detail-synergies .section-label { margin-bottom: 9px; }
.inspect-line { font-size: 10.5px; color: #aab894; line-height: 1.7; display: flex; gap: 7px; align-items: baseline; }
.detail-tip { display: flex; gap: 10px; margin: 18px 0; padding: 14px; background: #303b29; border: 1px solid #47543b; border-radius: 5px; color: #c2c197; }
.detail-tip p { font-size: 12px; line-height: 1.8; color: #a8b09a; }

/* settings / history */
.setting-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid #374730; }
.setting-row strong { font-size: 14px; }
.setting-row p { font-size: 12px; color: #8fa180; line-height: 1.7; margin-top: 5px; }
.toggle { width: 37px; height: 22px; border-radius: 20px; background: #3a4234; border: 1px solid #56614a; flex-shrink: 0; padding: 3px; display: flex; align-items: center; }
.toggle > span { width: 14px; height: 14px; border-radius: 50%; background: #8f9c81; transition: transform .2s; }
.toggle.on { background: #627b4d; border-color: #94ac77; }
.toggle.on > span { transform: translateX(14px); background: #d6e2bc; }
.settings-shortcuts { padding: 22px 0 8px; }
.settings-shortcuts h3 { font-size: 13px; margin-bottom: 14px; }
.settings-shortcuts p { display: flex; justify-content: space-between; font-size: 12px; color: #93a385; margin: 12px 0; }
.history-summary { display: flex; gap: 15px; margin: 22px 0; }
.history-summary > span { background: #2a3723; border: 1px solid #3c5233; border-radius: 5px; padding: 13px; font-size: 12px; color: #95aa83; flex: 1; }
.history-summary strong { display: block; font-size: 28px; color: #d0e0bb; margin-top: 5px; }
.full-history > div { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid #35482d; }
.full-history > div > span { font-size: 10px; color: #6a825e; }
.full-history p { font-size: 13px; color: #b0bfa0; line-height: 1.8; }

/* score breakdown */
.score-breakdown { margin-top: 25px; }
.score-breakdown > div { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 12px 0; border-bottom: 1px solid #35462d; color: #becdaf; }
.score-breakdown > div > span { font-size: 13px; width: 22px; height: 22px; border: 1px solid #4c603f; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #a4b78c; flex-shrink: 0; }
.score-breakdown p { flex: 1; line-height: 1.7; }
.breakdown-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding: 17px; background: #304327; border: 1px solid #4d6a3b; border-radius: 6px; }
.breakdown-total > span { font-size: 12px; color: #b7cda0; }
.breakdown-total strong { font-size: 29px; color: #e0e8c3; }
.breakdown-total small { font-size: 10px; font-weight: 500; color: #a7b68b; }

/* ---------- onboarding ---------- */
.onboarding-modal { width: 640px; }
.onboarding-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: center; margin-top: 6px; }
.onboarding-demo { background: #1c261c; border: 1px solid #37452e; border-radius: 8px; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 210px; justify-content: center; }
.modal-description { text-align: left; }
.onboarding-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; gap: 14px; }
.dots { display: flex; gap: 7px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #3a4a34; transition: background .2s; }
.dots i.on { background: var(--gold); }
.dots i.done { background: #6c8a55; }
.onboarding-actions { display: flex; gap: 10px; }
.demo-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.demo-card { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 58px; border-radius: 5px; border: 1px solid var(--dc-border, #555); border-bottom-width: 3px; background: var(--dc-bg, #222); font-family: 'Oswald', sans-serif; }
.demo-card b { font-size: 21px; color: #f0e9d8; line-height: 1.1; }
.demo-card i { font-style: normal; font-size: 12px; color: var(--dc-attr, #aaa); }
.demo-card em { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 6.5px; color: #7d8b72; white-space: nowrap; font-family: 'Manrope', sans-serif; }
.demo-card.str { --dc-attr: #d58b76; --dc-border: #6b4038; --dc-bg: #382622; }
.demo-card.agi { --dc-attr: #acc778; --dc-border: #52663c; --dc-bg: #293220; }
.demo-card.int { --dc-attr: #85b6d7; --dc-border: #3b5b71; --dc-bg: #1e2e3a; }
.demo-card.uni { --dc-attr: #b5a1cf; --dc-border: #665478; --dc-bg: #2e253d; }
.demo-card.dim { opacity: .55; }
.demo-row .demo-card em { display: none; }
.demo-eq { color: #74886a; font-size: 16px; padding: 0 2px; }
.demo-combo { display: flex; flex-direction: column; }
.demo-combo { font-size: 13px; font-weight: 750; color: #dde6cd; }
.demo-combo small { font-size: 9px; color: #879978; font-weight: 500; margin-top: 3px; }
.demo-attrs { display: flex; flex-direction: column; gap: 6px; }
.demo-attr { font-size: 9.5px; padding: 7px 10px; border-radius: 4px; border: 1px solid; }
.demo-attr.str { color: #d58b76; border-color: #6b4038; background: #38262266; }
.demo-attr.agi { color: #acc778; border-color: #52663c; background: #29322066; }
.demo-attr.int { color: #85b6d7; border-color: #3b5b71; background: #1e2e3a66; }
.demo-attr.uni { color: #b5a1cf; border-color: #665478; background: #2e253d66; }
.demo-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 8px 7px; border: 1px dashed #9ab48045; border-radius: 5px; background: #18271d60; font-size: 10px; color: #a9bd90; min-width: 62px; }
.demo-slot em { font-style: normal; font-size: 8px; color: #93b57e; }
.demo-slot.empty { color: #4d6145; }
.demo-note { font-size: 9.5px; color: #8fa080; line-height: 1.7; }
.demo-risk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-risk-item { display: flex; align-items: center; gap: 8px; background: #242f20; border: 1px solid #3c4c31; border-radius: 5px; padding: 9px 11px; color: #93b57e; }
.demo-risk-item.gold { color: #e0a470; border-color: #6b5430; background: #322718; }
.demo-risk-item b { font-size: 10.5px; color: #d5debd; }
.demo-risk-item em { font-style: normal; font-size: 8.5px; display: block; color: #879978; }

/* ---------- debug ---------- */
.debug-panel { position: fixed; right: 14px; bottom: 14px; width: 340px; max-height: 55vh; overflow-y: auto; background: #10141a; border: 1px solid #3a2a4a; padding: 12px 14px; z-index: 80; box-shadow: 0 0 30px #0008; border-radius: 8px; }
.debug-title { color: #b8a0e0; font-weight: 700; font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
.debug-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.debug-buttons .btn { background: #1e2430; border: 1px solid #34405a; color: #aab4c4; padding: 4px 9px; border-radius: 4px; font-size: 12px; }
.debug-deck { font-size: 13px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.debug-log { font-size: 13px; color: #8a94a8; line-height: 1.5; border-top: 1px solid #2a3446; padding-top: 6px; max-height: 220px; overflow-y: auto; }

/* ---------- fight overlay ---------- */
.fight-overlay { position: fixed; inset: 0; background: rgba(6, 10, 7, .88); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 100; cursor: pointer; }
.fight-box { width: 540px; max-width: 92vw; max-height: 86vh; overflow: hidden; text-align: center; }
.fight-combo { font-size: 30px; font-weight: 800; color: #e2e8d8; margin-bottom: 16px; letter-spacing: 1px; font-family: 'Oswald', sans-serif; }
.fight-steps { display: flex; flex-direction: column; gap: 7px; min-height: 200px; align-items: center; }
.fight-steps .preview-step { font-size: 14.5px; }
.preview-step { display: flex; gap: 7px; font-size: 12.5px; color: #b8c2d4; align-items: baseline; }
.fight-steps .preview-step { color: #b8c8ae; }
.step-icon { width: 16px; text-align: center; flex-shrink: 0; }
.preview-step.appear { animation: stepIn .22s ease-out; }
.fight-hint { color: var(--muted); font-size: 13px; margin-top: 18px; letter-spacing: 3px; text-transform: uppercase; }

/* ---------- animations ---------- */
@keyframes shake { 0%, 100% { transform: translate(0); } 25% { transform: translate(-3px, 1px); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-2px, 0); } }
@keyframes damage { 0% { opacity: 0; transform: translateY(12px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast { from { opacity: 0; bottom: 15px; } to { opacity: 1; bottom: 25px; } }
@keyframes stepIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.reduced-motion * { animation: none !important; transition: none !important; }

/* ---------- responsive ---------- */
@media (min-width: 1500px) {
  .topbar { padding-left: 28px; padding-right: 28px; }
  .page-shell { padding: 14px 28px 0; }
  .game-layout { grid-template-columns: 256px minmax(0, 1fr) 308px; gap: 20px; }
  .game-layout.two { grid-template-columns: 256px minmax(0, 1fr); }
  .scene-inner { padding: 16px 24px 18px; }
  .scene-title h2 { font-size: 23px; }
  .scene-hp-num strong { font-size: 37px; }
  .scene-hp .health-track { width: 330px; }
  .formation-slot { width: 52px; height: 62px; }
  .score-block { width: 76px; height: 64px; }
  .score-block strong { font-size: 32px; }
  .total-score strong { font-size: 50px; }
  .combo-preview > strong { font-size: 20px; }
  .scene-side { min-width: 262px; }
  .bottom-band .hero-art { height: 108px; }
  .bottom-band .hero-name { font-size: 13px; }
  .bottom-band .hero-ability { font-size: 9px; }
  .item-slot { height: 56px; }
  .item-slot strong { font-size: 12px; }
  .item-slot small { font-size: 9.5px; }
}
@media (max-width: 1420px) {
  .brand-caption { display: none; }
  .game-layout { grid-template-columns: 208px minmax(0, 1fr) 244px; gap: 14px; }
  .game-layout.two { grid-template-columns: 208px minmax(0, 1fr); }
  .page-shell { padding: 10px 16px 0; }
  .context-inner { padding: 11px 10px; }
  .combo-row { padding: 7px 7px; }
  .scene-stage { gap: 15px; }
  .scene-side { min-width: 232px; }
  .score-block { width: 68px; height: 60px; }
  .score-block strong { font-size: 30px; }
  .total-score strong { font-size: 46px; }
  .scene-hp .health-track { width: 180px; }
  .scene-hp-num strong { font-size: 33px; }
}
@media (max-width: 1180px) {
  .topbar { gap: 15px; padding: 0 2.5%; }
  .brand-caption { font-size: 8px; }
  .main-nav { gap: 20px; }
  .header-right { gap: 10px; }
  .run-meta { gap: 6px; }
  .page-shell { padding: 10px 14px 0; }
  .game-layout { grid-template-columns: 200px minmax(0, 1fr) 218px; gap: 13px; }
  .game-layout.two { grid-template-columns: 200px minmax(0, 1fr); }
  .combo-legend { display: none; }
  .scene-stage { grid-template-columns: 1fr; }
  .scene-side { min-width: 0; }
  .scene-verdict { flex-direction: row; align-items: center; gap: 12px; }
  .scene-verdict > small { flex: 1; }
  .hand-instruction { display: none; }
  .inventory-help { font-size: 9px; }
  .item-slot { gap: 3px; padding: 5px; }
  .item-art { width: 34px; height: 31px; }
  .item-slot strong { font-size: 9.5px; }
  .item-slot small { font-size: 8px; }
  .inventory-slots { gap: 7px; }
  .hero-hand { gap: 6px; }
  .bottom-band .hero-art { height: 104px; }
  .hero-name { font-size: 10px; left: 5px; }
  .bottom-band .hero-card-bottom { min-height: 58px; }
  .hero-ability { font-size: 7px; }
  .hero-attribute { font-size: 6.5px; }
  .hero-rank { font-size: 29px; left: 5px; }
  .shop { padding: 20px; }
  .shop-items { gap: 9px; }
  .shop-card { padding: 10px; }
  .shop-card h3 { font-size: 12px; }
  .shop-card p { font-size: 9px; }
  .shop-banner p { max-width: 330px; }
  .formation-slot { width: 44px; height: 54px; }
}
@media (max-width: 980px) {
  .brand-caption, .brand-divider { display: none; }
  .topbar { height: 70px; }
  .main-nav { gap: 25px; }
  .run-meta .autosave, .run-meta .run-id { display: none; }
  .game-layout { grid-template-columns: 178px minmax(0, 1fr) 196px; gap: 12px; }
  .game-layout.two { grid-template-columns: 178px minmax(0, 1fr); }
  .sidebar { gap: 10px; }
  .play-area { gap: 14px; }
  .battle-scene { overflow-y: auto; }
  .scene-inner { padding: 16px 16px 18px; gap: 11px; }
  .scene-target { gap: 12px; }
  .scene-title h2 { font-size: 19px; }
  .scene-emblem { width: 40px; height: 42px; }
  .scene-hp-num strong { font-size: 29px; }
  .scene-hp .health-track { width: 150px; }
  .scene-reward { display: none; }
  .rule-chip { font-size: 10px; padding: 4px 7px; }
  .scene-stage { grid-template-columns: 1fr; gap: 14px; }
  .scene-verdict { flex-direction: row; align-items: center; gap: 12px; }
  .scene-verdict > small { flex: 1; }
  .formation-slot { width: 40px; height: 49px; }
  .formation-note { font-size: 9px; }
  .score-formula { gap: 9px; }
  .score-block { width: 60px; height: 54px; }
  .score-block strong { font-size: 27px; }
  .total-score { min-width: 60px; }
  .total-score strong { font-size: 38px; }
  .action-buttons { flex-direction: row; }
  .action-buttons .primary-button { flex: 1; }
  .discard-button { flex: 1; border: 1px solid #526243; border-radius: 4px; padding: 9px 10px; }
  .band-top { flex-wrap: wrap; }
  .band-hand-title { font-size: 14px; }
  .hand-tools > span { display: none; }
  .bottom-band .hero-hand { max-width: none; }
  .bottom-band .hero-art { height: 92px; }
  .hero-name { font-size: 9px; bottom: 6px; line-height: 1.4; }
  .hero-rank { font-size: 26px; }
  .attribute-icon { font-size: 13px; right: 4px; }
  .bottom-band .hero-card-bottom { min-height: 52px; padding: 1px 4px 5px; }
  .hero-attribute { font-size: 7px; }
  .hero-ability { font-size: 6.5px; margin-top: 5px; }
  .card-foot { margin-top: 6px; font-size: 8px; }
  .hero-hand { gap: 5px; }
  .under-hand { font-size: 9px; }
  .journal-entries p { font-size: 10px; }
  .combo-guide { padding: 11px 9px; gap: 7px; }
  .guide-icon { width: 28px; }
  .combo-guide strong { font-size: 10px; }
  .combo-guide small { font-size: 9px; }
  .inventory-help { display: none; }
  .item-slot { height: 47px; }
  .item-art { width: 32px; }
  .item-slot > span:not(.item-slot-dot) { display: none; }
  .item-slot { justify-content: center; }
  .empty-slot > span { display: none; }
  .shop { padding: 17px; }
  .shop-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-card { min-height: 210px; }
  .shop-banner { gap: 11px; }
  .shop-emblem { width: 43px; height: 47px; flex-shrink: 0; }
  .shop-emblem svg { width: 23px; }
  .shop-banner h2 { font-size: 26px; }
  .shop-gold { font-size: 25px; }
  .shop-gold svg { width: 19px; }
  .shop-banner p { font-size: 10px; }
  .shop-bottom { flex-wrap: wrap; }
  .shop-bottom .primary-button { width: 100%; }
  .end-screen { padding: 25px; }
  .end-screen h2 { font-size: 29px; }
  .end-stats { gap: 25px; }
  .modal { padding: 27px; }
  .collection-grid { gap: 10px; }
  .collection-portrait { width: 85px; }
  .collection-hero { gap: 10px; }
  .collection-hero strong { font-size: 13px; }
  .help-steps { grid-template-columns: 1fr 1fr; }
  .onboarding-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* мобильный режим: обычная прокрутка страницы */
  #app { height: auto; min-height: 100vh; overflow: visible; }
  .page-shell { padding: 10px 14px 0; }
  .game-layout, .game-layout.two { flex: none; }
  .topbar { height: 60px; padding: 0 18px; gap: 12px; }
  .brand > span { font-size: 28px; letter-spacing: 1.3px; }
  .brand { gap: 8px; }
  .brand svg { width: 27px; height: 27px; }
  .main-nav { gap: 16px; margin-left: auto; margin-right: 0; }
  .main-nav button { font-size: 0; gap: 0; width: 27px; justify-content: center; }
  .main-nav button svg { width: 18px; height: 18px; }
  .header-right { gap: 3px; margin-left: 4px; }
  .version { display: none; }
  .header-right .icon-button { width: 28px; }
  .header-right .subtle-button { font-size: 0; gap: 0; }
  .header-right .subtle-button svg { width: 15px; height: 15px; }
  .topbar { height: 60px; }
  .run-meta { display: none; }
  .game-layout, .game-layout.two { display: flex; flex-direction: column; gap: 14px; }
  .sidebar { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
  .run-panel { grid-row: span 2; }
  .journal-panel, .effects-panel { grid-column: 1 / -1; }
  .combo-guide { display: none; }
  .scene-inner { padding: 14px; gap: 10px; }
  .scene-target { flex-wrap: wrap; gap: 10px; }
  .scene-title { flex: 1; min-width: 130px; }
  .scene-title h2 { font-size: 16px; white-space: normal; }
  .scene-emblem { width: 34px; height: 36px; }
  .scene-emblem svg { width: 18px; height: 18px; }
  .scene-hp { margin-left: 0; width: 100%; }
  .scene-hp-num strong { font-size: 26px; }
  .scene-hp .health-track { width: 100%; margin-top: 6px; }
  .rule-chip { font-size: 9.5px; padding: 4px 7px; }
  .scene-stage { grid-template-columns: 1fr; gap: 12px; }
  .scene-formation { gap: 10px; }
  .formation-slot { width: 36px; height: 45px; }
  .formation-cards { gap: 6px; }
  .combo-preview > strong { font-size: 17px; }
  .score-formula { gap: 7px; }
  .score-block { width: 52px; height: 48px; }
  .score-block strong { font-size: 24px; }
  .total-score { min-width: 54px; }
  .total-score strong { font-size: 34px; }
  .scene-verdict { padding: 10px 12px; }
  .scene-verdict > b { font-size: 16px; }
  .arena-label { display: none; }
  .band-label { width: 100%; }
  .build-strip { flex-wrap: wrap; }
  .band-top { flex-wrap: wrap; gap: 8px; }
  .band-hand-title { font-size: 15px; gap: 8px; }
  .band-hand-title > span { font-size: 10px; }
  .sort-button { font-size: 9px; padding: 4px 5px; }
  .deck-button { padding-left: 8px; margin-left: 4px; font-size: 10px; }
  .deck-button svg { width: 15px; }
  .hero-hand { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
  .bottom-band .hero-art { height: 99px; }
  .hero-rank { font-size: 29px; left: 7px; }
  .attribute-icon { font-size: 14px; right: 7px; }
  .hero-name { font-size: 10px; left: 7px; bottom: 7px; }
  .bottom-band .hero-card-bottom { min-height: 53px; padding: 0 7px 5px; }
  .hero-attribute { font-size: 6.5px; }
  .hero-ability { font-size: 7px; }
  .card-foot { font-size: 9px; margin-top: 6px; }
  .hero-card.selected, .hero-card:hover { transform: translateY(-5px); }
  .selection-order { height: 18px; font-size: 8px; min-width: 28px; top: -9px; right: -4px; }
  .under-hand { margin-top: 12px; font-size: 9px; }
  .route-screen { padding: 20px 16px 24px; }
  .route-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop { padding: 17px 14px; }
  .shop-banner { padding-bottom: 18px; gap: 10px; position: relative; }
  .shop-banner h2 { font-size: 26px; }
  .shop-banner p { font-size: 9px; max-width: 200px; }
  .shop-banner .section-label { font-size: 8px; letter-spacing: 1px; }
  .shop-gold { font-size: 23px; gap: 5px; align-self: flex-start; margin-top: 6px; }
  .shop-gold svg { width: 15px; }
  .shop-emblem { width: 38px; height: 43px; }
  .shop-banner > div:nth-child(2) { flex: 1; }
  .shop-section-title { margin: 17px 0 13px; }
  .shop-section-title h3 { font-size: 12px; }
  .shop-section-title .secondary-button { font-size: 9px; padding: 7px 9px; }
  .shop-card { padding: 12px; min-height: 223px; }
  .shop-card h3 { font-size: 13px; }
  .shop-card p { font-size: 10px; }
  .shop-hint-row { display: none; }
  .recruit-row { grid-template-columns: 1fr; }
  .end-screen { min-height: 465px; padding: 25px 20px; }
  .end-screen h2 { font-size: 28px; }
  .end-screen p { font-size: 13px; }
  .end-stats { gap: 25px; margin: 26px 0; }
  .end-stats strong { font-size: 26px; }
  .end-stats span { font-size: 9px; }
  .toast { font-size: 12px; padding: 12px; bottom: 16px; }
  .breakdown-total > span { font-size: 10px; }
  .breakdown-total strong { font-size: 28px; }
  .onboarding-modal { width: 100%; }
  .demo-risk { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 12px; }
  .modal { padding: 26px 19px; max-height: 93vh; border-radius: 9px; }
  .modal h2 { font-size: 26px; max-width: 95%; }
  .modal > .section-label { font-size: 9px; }
  .modal-description { font-size: 13px; }
  .help-steps { gap: 8px; margin: 20px 0; }
  .help-steps > div { padding: 11px 9px; }
  .help-steps > div > span { font-size: 22px; margin-bottom: 7px; }
  .help-steps strong { font-size: 10px; }
  .help-steps p { font-size: 9px; line-height: 1.8; }
  .combo-table > div { grid-template-columns: 1fr 1fr 62px; padding: 9px; gap: 7px; }
  .combo-table .table-head { font-size: 7px; letter-spacing: .7px; padding: 9px; }
  .combo-table strong { font-size: 10px; }
  .combo-table small { font-size: 8px; }
  .combo-table > div > span:nth-child(2) { font-size: 9px; }
  .combo-table > div > span:last-child { gap: 6px; }
  .combo-table b { font-size: 14px; }
  .collection-toolbar { flex-wrap: wrap; margin: 18px 0; gap: 12px; }
  .tabs { width: 100%; }
  .tabs button { flex: 1; justify-content: center; font-size: 12px; padding: 8px; }
  .collection-toolbar input { width: 100%; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-hero { min-height: 115px; }
  .collection-portrait { width: 96px; }
  .collection-item > div .collection-item-art { width: 76px; }
  .deck-summary { gap: 12px; font-size: 10px; justify-content: center; padding: 11px; }
  .deck-summary b { margin-left: 3px; }
}
/* ---------- v0.4: развилка маршрутов ---------- */
.route-screen { padding: 26px 28px 30px; text-align: center; }
.route-screen h2 { font-size: 33px; font-weight: 700; letter-spacing: -1.15px; color: #e2e8d8; margin: 12px 0 8px; }
.route-sub { font-size: 13px; color: #9dad95; margin-bottom: 22px; }
.route-sub b { color: #dde6cd; }
.route-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.route-card { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 22px 16px 18px; border: 1px solid #40503a; border-bottom-width: 3px; border-radius: 9px; background: radial-gradient(ellipse at 50% 20%, #2c3827, #1d261c); text-align: center; transition: transform .18s, border-color .18s, box-shadow .18s; animation: routeIn .3s ease-out backwards; }
.route-card:nth-child(2) { animation-delay: .07s; }
.route-card:nth-child(3) { animation-delay: .14s; }
@keyframes routeIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.route-card:hover:not(:disabled) { transform: translateY(-6px); border-color: var(--rc, var(--gold)); box-shadow: 0 12px 30px #0005, 0 0 24px var(--rc-glow, transparent); }
.route-card.normal { --rc: #9ab480; --rc-glow: #9ab48022; }
.route-card.elite { --rc: #d1806c; --rc-glow: #d1806c26; }
.route-card.camp { --rc: #86afc7; --rc-glow: #86afc722; }
.route-card.combat { --rc: #d1806c; --rc-glow: #d1806c26; }
.route-card.economy { --rc: #d8b24f; --rc-glow: #d8b24f22; }
.route-card.hand { --rc: #a678e0; --rc-glow: #a678e022; }
.route-card strong { font-size: 15.5px; }
.route-card:nth-child(4) { animation-delay: .21s; }
.route-card.disabled { opacity: .45; cursor: not-allowed; }
.route-emoji { font-size: 46px; filter: drop-shadow(0 2px 10px #0008); }
.route-card strong { font-size: 18px; font-weight: 800; color: #e6edcf; letter-spacing: -.3px; }
.route-lines { display: flex; flex-direction: column; gap: 5px; min-height: 74px; }
.route-lines span { font-size: 9.5px; line-height: 1.6; color: #93a385; background: #141d14a8; border: 1px solid #2e3c28; border-radius: 4px; padding: 4px 9px; }
/* desc — подпись-пояснение под строками фактов, не отдельный эффект */
.route-lines span.route-desc { background: none; border: none; padding: 3px 4px 0; color: #6d7f66; font-size: 9px; font-style: italic; }
.route-card small { font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: #6d7f66; }
.route-card.elite .route-lines span:nth-child(2) { color: #d99281; border-color: #5a3a30; }
.route-card.camp .route-lines span:nth-child(2) { color: #a8c2da; }
.route-curse { margin-top: 18px; padding: 12px 16px; background: #33231d; border: 1px dashed #6b4038; border-radius: 6px; font-size: 12px; color: #c9a294; line-height: 1.8; }
.route-curse b { color: #e0a08c; }

/* ---------- фаза F: улучшения лавки ---------- */
.shop-upgrades { margin-top: 18px; padding: 13px 15px; background: #202a1e; border: 1px solid #42503a; border-radius: 7px; }
.upgrade-title h3 { display: flex; align-items: center; gap: 7px; font-size: 14px; color: #c8d4b8; }
.upgrade-note { font-size: 9px; font-weight: 400; letter-spacing: .4px; color: #74866b; text-transform: none; }
.upgrade-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 13px; background: #2b3527; border: 1px solid #4d5c42; border-radius: 5px; cursor: default; }
.upgrade-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 9px; }
.upgrade-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 9px 11px; background: #26301f; border: 1px solid #46533a; border-left-width: 3px; border-radius: 7px; transition: border-color .15s; }
.upgrade-head { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.upgrade-card:hover { border-color: #6d7f5a; }
.upgrade-card.common { border-left-color: #8a987d; }
.upgrade-card.uncommon { border-left-color: #7fb069; }
.upgrade-card.rare { border-left-color: #5a9dd6; }
.upgrade-card.epic { border-left-color: #a678e0; }
.upgrade-card.mythic { border-left-color: #ffb03a; border-color: #6b5a2e; background: #2d2818; }
.upgrade-emoji { font-size: 22px; filter: drop-shadow(0 2px 6px #0006); }
/* официальная иконка дота-предмета поверх эмодзи-фолбэка (как у портретов героев) */
.upgrade-emoji img, .upg-art img { width: 30px; height: 30px; display: block; object-fit: contain; }
.upg-art { display: block; position: relative; width: 30px; height: 30px; }
.upg-fallback { font-size: 22px; line-height: 30px; display: block; text-align: center; }
.upg-art img { position: absolute; inset: 0; }

/* фолбэк-эмодзи живёт ЦЕНТРОМ под иконкой и прячется при успешной загрузке
   (onload в art.js); при недоступности CDN иконка удаляется — эмодзи остаётся */
.item-gem { position: relative; display: flex; align-items: center; justify-content: center; }
.item-gem img { position: absolute; inset: 0; }
.upgrade-info { flex: 1; min-width: 0; }
.upgrade-info strong { display: block; font-size: 12.5px; color: #dfe5d2; }
.upgrade-info small { display: block; font-size: 9.5px; line-height: 1.55; color: #93a385; margin-top: 2px; }
.upgrade-buy { margin-top: auto; width: 100%; display: inline-flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 10px; font-size: 11px; }
.luck-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #b8d48a; background: #26301f; border: 1px solid #4d5c42; border-radius: 5px; padding: 3px 8px; cursor: default; }
.upgrade-title h3 { margin-right: auto; }
.upgrade-reroll { padding: 5px 9px; font-size: 10.5px; }

/* ---------- скорборд (фаза H) ---------- */
.record-badge { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #2d2818; background: #ffb03a; border-radius: 3px; padding: 2px 6px; vertical-align: 3px; }
.score-board { margin-top: 14px; padding: 13px 15px; }
.score-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.score-tabs button { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #93a385; border: 1px solid #3d4a35; background: #242d20; border-radius: 4px; padding: 4px 9px; cursor: pointer; }
.score-tabs button.active { color: #e9c98f; border-color: #7a6437; background: #3c331d; }
.score-row { display: flex; align-items: center; gap: 10px; padding: 6px 9px; border-bottom: 1px solid #2e3c28; font-size: 11px; }
.score-row.top { background: #2d281866; border-radius: 5px; }
.score-pos { width: 16px; color: #6d7f66; font-weight: 800; }
.score-num { font-family: 'Oswald', sans-serif; font-size: 15px; color: #e9c98f; min-width: 64px; }
.score-rank { color: #a8b58f; font-weight: 800; width: 28px; }
.score-waves { flex: 1; color: #b5c2ab; }
.score-time { color: #7d8b72; }
.score-seed { color: #63755a; font-size: 10px; }
.score-empty { padding: 14px; font-size: 11px; color: #74866b; }

/* ---------- XP героев (фаза G) ---------- */
.xp-badge { display: inline-block; font-size: 8px; font-weight: 800; letter-spacing: .5px; color: #b8d48a; background: #2b3527; border: 1px solid #4d5c42; border-radius: 3px; padding: 1px 4px; margin-left: 3px; vertical-align: 1px; }

/* ---------- смена атрибута (зелье) ---------- */
.attr-change-row { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.attr-change { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; border: 1px solid #46533a; border-radius: 5px; background: #222b1f; color: #a8b58f; cursor: pointer; transition: border-color .12s, transform .12s; }
.attr-change:hover:not(:disabled) { border-color: #ac9054; transform: translateY(-1px); }
.attr-change.current { border-style: dashed; opacity: .45; cursor: default; }
.attr-change.str { color: #d99281; }
.attr-change.agi { color: #a9d29d; }
.attr-change.int { color: #86afc7; }
.attr-change.uni { color: #d8b24f; }
.attr-hint { font-size: 8.5px; color: #74866b; margin-left: 5px; }
.hero-attribute .attr-changed { font-style: normal; color: #e9c98f; cursor: help; }

/* ---------- отдельные кнопки тренировки и увольнения ---------- */
.lab-shop-actions { display: flex; gap: 7px; }
.train-button { border-color: #6b5a2e; background: #3c331d; color: #e9c98f; }
.train-button:hover:not(:disabled) { border-color: #ac9054; }
.exile-button { color: #d99281; }
.exile-button:hover:not(:disabled) { border-color: #8a5548; }
.lab-focus-banner { margin: 10px 0 12px; padding: 9px 13px; border-radius: 6px; font-size: 11.5px; line-height: 1.7; }
.lab-focus-banner.train { background: #2d2818; border: 1px solid #6b5a2e; color: #e9c98f; }
.lab-focus-banner.exile { background: #33221d; border: 1px solid #6b4038; color: #d99281; }
.modal.focus-train .lab-button:not(.danger) { border-color: #ac9054; background: #3c331d; color: #e9c98f; }
.modal.focus-exile .lab-button.danger { border-color: #8a5548; background: #33221d; }

/* ---------- v0.4: лаборатория колоды в шопе ---------- */
.shop-lab { margin-top: 21px; padding: 15px; background: #232d1f; border: 1px solid #465338; border-radius: 7px; }
.shop-lab-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.shop-lab-head h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; color: #c8d4b8; }
.recruit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recruit-card { display: flex; gap: 11px; align-items: center; padding: 11px; border: 1px solid #3b4933; border-radius: 7px; background: #20291e; --attr: #aaa; --card-bg: #222b1e; }
.recruit-card.str { --attr: #d58b76; --card-bg: #382622; }
.recruit-card.agi { --attr: #acc778; --card-bg: #293220; }
.recruit-card.int { --attr: #85b6d7; --card-bg: #1e2e3a; }
.recruit-card.uni { --attr: #b5a1cf; --card-bg: #2e253d; }
.recruit-portrait { width: 62px; height: 58px; flex-shrink: 0; position: relative; overflow: hidden; border-radius: 5px; background: var(--card-bg); }
.recruit-portrait .hero-art { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.recruit-portrait > b { position: absolute; top: 3px; left: 5px; z-index: 2; color: #e4e8d5; font-size: 22px; font-family: 'Oswald', sans-serif; text-shadow: 0 1px 5px #000; }
.recruit-info { flex: 1 1 auto; min-width: 0; text-align: left; }
.recruit-info strong { font-size: 11.5px; color: #e6e9da; display: block; }
.recruit-info .hero-attribute { font-size: 9px; color: var(--attr); font-weight: 650; display: block; margin-top: 2px; }
.recruit-info small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 8.5px; line-height: 1.6; color: #8fa085; margin-top: 5px; }
.recruit-buy { width: auto; flex: 0 0 auto; min-width: 96px; flex-direction: column; gap: 3px; align-items: center; justify-content: center; }
.recruit-buy > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lab-actions { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.lab-button { font-size: 8.5px; font-weight: 700; padding: 5px 9px; border-radius: 4px; border: 1px solid #546344; background: #34432b; color: #c1cda8; }
.lab-button:hover:not(:disabled) { background: #4b5f3b; border-color: #a5b481; }
.lab-button.danger { border-color: #6b4038; background: #33221d; color: #d9a898; }
.lab-button.danger:hover:not(:disabled) { background: #452c24; border-color: #a35444; }
.trained-badge { font-size: 9px; font-weight: 800; letter-spacing: .5px; color: #e9c98f; border: 1px solid #7a6437; background: #3c331d; border-radius: 3px; padding: 2px 5px; vertical-align: middle; }
.shop-hint.left { text-align: left; margin-top: 12px; }

/* ---------- входные анимации (плавность v0.4) ---------- */
.hero-hand .hero-card { animation: cardIn .28s ease-out backwards; }
.hero-hand .hero-card:nth-child(1) { animation-delay: .02s; }
.hero-hand .hero-card:nth-child(2) { animation-delay: .06s; }
.hero-hand .hero-card:nth-child(3) { animation-delay: .1s; }
.hero-hand .hero-card:nth-child(4) { animation-delay: .14s; }
.hero-hand .hero-card:nth-child(5) { animation-delay: .18s; }
.hero-hand .hero-card:nth-child(6) { animation-delay: .22s; }
.hero-hand .hero-card:nth-child(7) { animation-delay: .26s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.shop-card, .item-slot, .recruit-card { animation: cardIn .3s ease-out backwards; }
.shop-card:nth-child(2), .item-slot:nth-child(2), .recruit-card:nth-child(2) { animation-delay: .05s; }
.shop-card:nth-child(3), .item-slot:nth-child(3) { animation-delay: .1s; }
.shop-card:nth-child(4), .item-slot:nth-child(4) { animation-delay: .15s; }
.shop-card:nth-child(5), .item-slot:nth-child(5) { animation-delay: .2s; }
.combo-row.hit { animation: hitGlow 1.6s ease-in-out infinite alternate; }
@keyframes hitGlow { from { box-shadow: 0 0 6px #a5c17a14; } to { box-shadow: 0 0 16px #a5c17a30; } }
.modal { animation: modalIn .18s ease-out; }
@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
/* Ререндер открытой модалки (пикер отряда/ранга, поиск в коллекции):
   без повторного появления — окно не мигает на каждый клик. */
.modal-backdrop.no-anim,
.modal-backdrop.no-anim .modal { animation: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- выбор ядра скоринга (state.rules: classic | formation): титул + «Новый забег» --- */
.title-rules { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; }
.modal .title-rules { justify-content: flex-start; margin: 6px 0 14px; width: 100%; }
.rule-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 14px; border-radius: 10px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04);
  color: inherit; font: inherit;
}
.rule-choice:hover { background: rgba(255, 255, 255, 0.08); }
.rule-choice strong { font-size: 16px; }
.rule-choice small { opacity: 0.72; font-size: 13px; max-width: 240px; line-height: 1.45; }
.rule-choice.active-rule {
  border-color: rgba(110, 210, 160, 0.85);
  box-shadow: 0 0 0 1px rgba(110, 210, 160, 0.45) inset;
  background: rgba(110, 210, 160, 0.08);
}
.rule-beta { opacity: 0.65; font-size: 12px; margin-left: 6px; border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; }
.act-pill.rules-formation { color: #7ad6a0; border-color: rgba(110, 210, 160, 0.5); }

/* --- лига dotora: пикер рангов, медали, проклятия забега --- */
.rank-picker { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 620px; }
.modal .rank-picker { justify-content: flex-start; }
.rank-medal {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit;
  border: 1px solid #33402c; background: #182015a8; transition: border-color .15s, background .15s;
}
.rank-medal:hover:not(.locked) { border-color: #5b7048; background: #202b1db8; }
.rank-medal.active { border-color: var(--gold); background: #2a2f1cf0; box-shadow: 0 0 0 1px #d6b78255, 0 0 18px #d4ab6233; }
.rank-medal.locked { opacity: .38; cursor: not-allowed; }
.medal-gem {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600; color: #10160f;
  background: var(--medal, #97a39b); clip-path: polygon(50% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--medal, #97a39b) 55%, transparent));
}
.medal-gem.big { width: 42px; height: 42px; font-size: 15px; }
.medal-gem.small { width: 17px; height: 17px; font-size: 8px; clip-path: polygon(50% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%); }
.medal-gem.papochka { background: linear-gradient(160deg, #ffd76a, #ff6a3d); }
.medal-name { font-size: 9px; font-weight: 700; letter-spacing: .4px; color: #aebb9e; max-width: 74px; text-align: center; line-height: 1.2; }
.rank-medal.active .medal-name { color: #e6ecd9; }
.medal-lock { position: absolute; top: 3px; right: 4px; font-size: 9px; }
.rank-detail { margin-top: 10px; text-align: left; background: #141c13bb; border: 1px solid #313d29; border-radius: 8px; padding: 11px 14px; max-width: 620px; }
.modal .rank-detail { max-width: 100%; }
.rank-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.rank-detail-head strong { font-size: 16px; letter-spacing: -.3px; }
.rank-detail-head small { display: block; color: #8d9b7e; font-size: 10.5px; }
.rank-notes { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 3px; }
.rank-notes li { font-size: 11px; color: #97a889; line-height: 1.55; }
.rank-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 750; letter-spacing: .8px; color: var(--medal, #97a39b); }
.rank-badge.papochka { background: linear-gradient(90deg, #ffd76a, #ff6a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.run-row.rank-row { align-items: center; }
/* усталость и запретный слот */
.fatigue-mark { position: absolute; right: 6px; top: 5px; z-index: 5; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; color: #ff9a7a; background: #000000a8; border: 1px solid #a3544488; border-radius: 5px; padding: 1px 5px; }
.hero-rank.weakened { color: #ffb08a; }
.formation-slot.forbidden { border-style: solid; border-color: #a35444aa; background: #2a1712d5; }
.formation-slot.forbidden .forbidden-mark { color: #ff9a7a; font-size: 15px; font-weight: 800; }
/* проклятия забега */
.effect-row.curse { color: #d89583; }
.effect-row.curse svg { color: #d89583; }
.effect-row.curse small { color: #b07f70; }
.curse-cards { display: flex; gap: 10px; margin-top: 6px; }
.curse-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 14px 12px; border-radius: 10px; cursor: pointer; font: inherit; color: inherit;
  border: 1px solid #6b4038; background: #241713; transition: border-color .15s, transform .15s;
}
.curse-card:hover { border-color: #d89583; transform: translateY(-2px); }
.curse-card strong { font-size: 15px; }
.curse-card p { font-size: 11px; color: #b09a8f; line-height: 1.55; }
.curse-emoji { font-size: 26px; }
/* конец забега: медаль ранга + открытие */
.end-rank { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 10px 18px; border: 1px solid #3a4630; border-radius: 10px; background: #161e13cc; text-align: left; }
.end-rank small { display: block; font-size: 9px; letter-spacing: 1.2px; color: #7d8b72; font-weight: 750; }
.end-rank strong { display: block; font-size: 19px; color: var(--medal, #c0d4a9); letter-spacing: -.3px; }
.end-rank em { display: block; font-size: 10.5px; color: #819875; font-style: normal; }
.unlock-banner { display: flex; align-items: center; gap: 9px; margin: 6px 0 2px; padding: 10px 16px; border-radius: 9px; border: 1px solid #d6b78266; background: #d4ab6218; color: #e8d9ad; font-size: 12.5px; animation: deadPulse 1.4s ease-in-out infinite alternate; }
.unlock-banner b { letter-spacing: .5px; }
/* цена предмета с ранговыми эффектами */
.price-note { display: block; text-align: center; font-size: 9.5px; color: #d8a56b; margin: -4px 0 6px; }

/* аугменты Аганима (docs/AGHANIMS.md): бейджи на карточках героев и в лаборатории */
.augh-mark { display: inline-block; font-size: 9px; margin-left: 3px; vertical-align: 1px; filter: drop-shadow(0 0 3px rgba(186,104,200,.75)); cursor: help; }
.augh-lab { display: block; margin-top: 4px; padding: 6px 8px; border: 1px solid #6b4a78; border-radius: 7px; background: #221826; color: #cfa9dd; font-size: 10.5px; line-height: 1.5; }
.augh-lab b { color: #e3c6ef; }

/* аугменты в тултипе героя и на карточке лавки: серые — не куплены, свечение — куплены */
.augh-tip { display: block; text-align: left; font-size: 10px; line-height: 1.5; color: #77836f; margin-top: 4px; }
.augh-tip b { color: #87947e; font-weight: 700; }
.augh-tip.owned { color: #e4c8ff; text-shadow: 0 0 9px rgba(186,104,200,.95), 0 0 3px rgba(219,146,255,.55); }
.augh-tip.owned b { color: #f2dcff; }
.augh-lab .augh-tip { margin-top: 3px; }
.augh-kind { display: block; font-size: 9px; letter-spacing: .8px; text-transform: uppercase; color: #bb8fd4; margin-bottom: 2px; }

/* аугменты в лавке: карточки на анатомии рекрутов, акцент по виду */
.shop-aghanims { margin-top: 14px; }
.shop-aghanims .recruit-row { margin-top: 10px; }
.recruit-card.augh-card.scepter { border-color: #7a4a99; background: #231a2a; }
.recruit-card.augh-card.scepter .augh-kind { color: #cf9fe8; }
.recruit-card.augh-card.shard { border-color: #35608a; background: #16222e; }
.recruit-card.augh-card.shard .augh-kind { color: #8fb8dd; }
.augh-emoji { position: absolute; right: 3px; bottom: 2px; z-index: 2; font-size: 15px; font-style: normal; filter: drop-shadow(0 0 5px rgba(0,0,0,.9)); }
.recruit-card.augh-card.scepter .augh-emoji { filter: drop-shadow(0 0 6px rgba(186,104,200,.95)); }

/* инвентарь: честные 6 слотов в один ряд (раньше было 5 колонок при 6 слотах — шестой прыгал) */
.inventory-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .inventory-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* глоссарий в справочнике */
.glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 8px 0 14px; }
.glossary > div { border: 1px solid #33402c; border-radius: 7px; padding: 8px 10px; background: #1a231780; }
.glossary strong { display: block; font-size: 11px; color: #cdd6b8; margin-bottom: 3px; }
.glossary p { font-size: 10px; line-height: 1.55; color: #8d9b74; }

/* аугменты в тултипе: шапка вида+имя, описание отдельной строкой */
.augh-tip { margin-top: 7px; }
.augh-tip + .augh-tip { margin-top: 6px; }
.augh-tip b { display: block; }
.augh-tip .augh-desc { display: block; font-size: 9px; line-height: 1.5; margin-top: 2px; opacity: .85; }

/* ===== Улучшения v2: плитки в сайдбаре + контекстные кнопки ===== */
.upgrades-panel { display: flex; flex-direction: column; gap: 5px; }
/* Плитка-иконка: свечение = «можно применить сейчас» (клик применяет),
   тусклость = нельзя; при наведении — имя, описание и статус. */
.up-tiles { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 3px; }
.up-tile { position: relative; width: 40px; height: 40px; border-radius: 8px; border: 1px solid #40503a; background: linear-gradient(180deg, #263122, #1c261a); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; padding: 0; }
.up-tile .up-emoji { line-height: 1; filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); }
.up-tile.passive { opacity: .95; }
.up-tile.blocked { opacity: .6; }
.up-tile.blocked .up-emoji { filter: grayscale(.8) brightness(.75); }
.up-tile.ready { border-color: #d1ae71; cursor: pointer; animation: upGlow 1.5s ease-in-out infinite alternate; }
.up-tile.ready:hover { background: #31392a; }
.up-tile.blocked:hover { border-color: #566557; }
@keyframes upGlow {
  from { box-shadow: 0 0 3px #d1ae7140, inset 0 0 5px #d1ae711f; }
  to { box-shadow: 0 0 13px #d1ae71b0, inset 0 0 8px #d1ae713d; }
}
.up-lvl { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 8.5px; font-weight: 800; color: #d9b25f; background: #3a3422; border: 1px solid #695f3b; border-radius: 6px; padding: 0 3px; line-height: 11px; }
.up-badge { position: absolute; bottom: -5px; right: -4px; font-style: normal; font-size: 9px; font-weight: 700; color: #9fe0b5; background: #16241b; border: 1px solid #2c4a35; border-radius: 8px; padding: 0 4px; line-height: 12px; }
.up-badge.zero { color: #66735f; background: #1a211a; border-color: #2c3a28; }
.energy-badge { font-size: 11px; color: #ffd97a; background: #2b2413; border: 1px solid #4a3d1a; border-radius: 9px; padding: 1px 8px; white-space: nowrap; cursor: help; position: relative; }

.upg-active-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.2; padding: 6px 11px; border: 1px solid #40503a; border-radius: 8px; background: linear-gradient(180deg, #263122, #1c261a); color: #e8e4d8; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; }
.upg-active-btn small { color: #8a967f; font-size: 9.5px; }
.upg-active-btn:hover:not(:disabled) { border-color: #d9b25f; box-shadow: 0 0 14px rgba(217,178,95,.18); transform: translateY(-1px); }
.upg-active-btn:disabled { opacity: .4; cursor: not-allowed; }
.upg-acc { color: #8a967f; font-size: 10px; }

.route-actives, .wave-actives { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.route-actives { margin: 4px 0 10px; }
.wave-actives { margin-top: 9px; justify-content: center; }
.route-replace-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.route-replace { font-size: 10.5px; padding: 4px 9px; }

.item-actives { display: inline-flex; gap: 4px; margin-right: auto; }
.act-btn { position: relative; }
.act-btn:not(:disabled) { border-color: #4a5f3e; color: #ffe9b0; }

.upgrade-card.active-type .upgrade-emoji { text-shadow: 0 0 10px rgba(217,178,95,.55); }
.upgrade-reroll.free-ledger { border-color: #4a5f3e; color: #b9e4c9; }

/* фидбек 11.09: подложки под текст карточек — выделялся только аганим-блок,
   остальной текст висел на голом фоне. Одна нейтральная панель на все блоки. */
.collection-hero p, .recruit-info small { background: #1b2317; border: 1px solid #333f2a; border-radius: 6px; padding: 6px 9px; }
.collection-hero .hero-attribute, .recruit-info .hero-attribute { display: inline-block; background: #1b2317; border: 1px solid #333f2a; border-radius: 5px; padding: 2px 8px; }
.collection-hero small:not(.augh-lab) { display: inline-block; background: #1b2317; border: 1px solid #333f2a; border-radius: 5px; padding: 2px 8px; }
.end-note { display: block; text-align: center; font-size: 10.5px; color: #8fa085; margin-top: 2px; }

/* ненавязчивые подсказки способностей: точка срабатывания на карте + строка-совет в тултипе */
.abil-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-left: 4px; vertical-align: 1px; }
.abil-dot.on { background: #a8d99b; box-shadow: 0 0 4px rgba(168, 217, 155, .7); }
.abil-dot.off { background: #59644f; }
.abil-hint { display: block; font-size: 8px; line-height: 1.5; color: #93a186; margin-top: 6px; padding-top: 5px; border-top: 1px solid #3a4738; }

/* ── Аккаунты и онлайн-таблицы (server.js + net.js) ─────────────────────── */
.score-src { margin-left: auto; display: inline-flex; gap: 4px; }
.score-src button { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #93a385; border: 1px solid #3d4a35; background: transparent; border-radius: 4px; padding: 3px 8px; cursor: pointer; }
.score-src button.active { color: #e9c98f; border-color: #7a6437; background: #3c331d; }
.score-name { color: #d8e2cf; font-weight: 700; min-width: 64px; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-avatar { font-family: 'Oswald', sans-serif; font-size: 14px; color: #e9c98f; line-height: 1; }
.lb-filter { margin-bottom: 10px; }
.lb-filter select { background: #151e15; border: 1px solid #3e5134; border-radius: 4px; padding: 7px 10px; color: #c6d0ba; font-size: 12px; outline: none; cursor: pointer; }
.lb-filter select:focus { border-color: var(--gold); }

.auth-form { display: flex; flex-direction: column; gap: 12px; max-width: 340px; margin: 0 auto; }
.auth-field { display: flex; flex-direction: column; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #93a385; }
.auth-field input { background: #151e15; border: 1px solid #3e5134; border-radius: 4px; padding: 11px 12px; color: #c6d0ba; font-size: 14px; letter-spacing: normal; text-transform: none; outline: none; }
.auth-field input:focus { border-color: var(--gold); }
.auth-error { font-size: 11px; color: #ff9a7a; background: #3a221a66; border: 1px solid #6b3a2a; border-radius: 4px; padding: 8px 10px; }
.auth-note { font-size: 10px; line-height: 1.5; color: #74866b; text-align: center; }

.profile { display: flex; flex-direction: column; gap: 12px; }
.profile-head { display: flex; align-items: center; gap: 12px; }
.profile-avatar { width: 40px; height: 40px; border-radius: 6px; background: #3c331d; border: 1px solid #7a6437; color: #e9c98f; font-family: 'Oswald', sans-serif; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.profile-title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.profile-title strong { font-size: 15px; color: #e9efe4; }
.profile-title small { font-size: 10px; color: #74866b; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-stats div { flex: 1 1 64px; background: #1d261a; border: 1px solid #2e3c28; border-radius: 5px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.profile-stats strong { font-family: 'Oswald', sans-serif; font-size: 16px; color: #e9c98f; }
.profile-stats span { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: #7d8b72; }
.profile .subtle-button { align-self: center; margin-top: 4px; }

.leaders-wrap { display: flex; flex-direction: column; gap: 4px; }

/* Гостевой забег: предложение забрать его в аккаунт (экран конца забега) */
.guest-offer { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 14px; background: #2c241366; border: 1px solid #7a6437; border-radius: 6px; font-size: 11px; line-height: 1.5; color: #c9d3bd; text-align: left; }
.guest-offer > svg { flex-shrink: 0; color: #e9c98f; }
.guest-offer span { flex: 1; }
.guest-offer b { color: #e9c98f; }
.guest-offer .primary-button { padding: 8px 13px; font-size: 11px; white-space: nowrap; }

/* ── Промо-боссы (src/content/promo.js): враг = проект-партнёр ──────────── */
.promo-name { font: inherit; background: none; border: none; padding: 0; color: #e9c98f; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px dashed #7a6437; transition: color .15s, border-color .15s; }
.promo-name:hover { color: #ffd98f; border-color: #e9c98f; }
.promo-ribbon { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; padding: 9px 13px; background: #2c241399; border: 1px solid #7a6437; border-radius: 6px; cursor: pointer; }
.promo-emoji { font-size: 19px; }
.promo-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.45; color: #c9d3bd; min-width: 0; }
.promo-text b { color: #e9c98f; font-size: 11px; }
.promo-link { flex-shrink: 0; font-size: 11px; padding: 7px 11px; }