/* Стили игры, часть «modes»: курсор, окно талантов, подсказки способностей и предметов, аккаунт, список лобби, счётчик кадров. Порядок подключения частей (index.html) важен: поздние правила перекрывают ранние. */
/* ───────────── Курсор в стиле игры ───────────── */
:root {
  --cur: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f6d27a%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%23d9a441%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%238a5a1c%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%20%3Cpath%20d%3D%27M3%202%20L3%2025%20L9%2019%20L13.5%2029%20L18%2027%20L13.5%2017%20L22%2017%20Z%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%232a1608%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M5%206%20L5%2019%20L8.5%2015.5%27%20fill%3D%27none%27%20stroke%3D%27%23fff8dc%27%20stroke-opacity%3D%27.7%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%20%3C%2Fsvg%3E") 3 2, default;
  --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3c0%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%23f0c060%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%238a5a1c%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%20%3Cpath%20d%3D%27M3%202%20L3%2025%20L9%2019%20L13.5%2029%20L18%2027%20L13.5%2017%20L22%2017%20Z%27%20fill%3D%27none%27%20stroke%3D%27%23ffd870%27%20stroke-opacity%3D%27.55%27%20stroke-width%3D%275%27%20stroke-linejoin%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M3%202%20L3%2025%20L9%2019%20L13.5%2029%20L18%2027%20L13.5%2017%20L22%2017%20Z%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%232a1608%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M5%206%20L5%2019%20L8.5%2015.5%27%20fill%3D%27none%27%20stroke%3D%27%23fff8dc%27%20stroke-opacity%3D%27.7%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Ccircle%20cx%3D%276%27%20cy%3D%2722%27%20r%3D%270%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E") 3 2, pointer;
  --cur-text: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M11%204%20H21%20M16%204%20V28%20M11%2028%20H21%27%20stroke%3D%27%232a1608%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M11%204%20H21%20M16%204%20V28%20M11%2028%20H21%27%20stroke%3D%27%23f6d27a%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20fill%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%271.6%27%20fill%3D%27%23fff3c0%27%2F%3E%3C%2Fsvg%3E") 16 16, text;
  --cur-aim: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%20%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%279%27%20fill%3D%27none%27%20stroke%3D%27%232a1608%27%20stroke-width%3D%274%27%2F%3E%20%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%279%27%20fill%3D%27none%27%20stroke%3D%27%23f0c060%27%20stroke-width%3D%272%27%2F%3E%20%3Cpath%20d%3D%27M16%201%20V8%20M16%2024%20V31%20M1%2016%20H8%20M24%2016%20H31%27%20stroke%3D%27%232a1608%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M16%202%20V8%20M16%2024%20V30%20M2%2016%20H8%20M24%2016%20H30%27%20stroke%3D%27%23f6d27a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%272%27%20fill%3D%27%23fff3c0%27%20stroke%3D%27%232a1608%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 16 16, crosshair;
}
html, body { cursor: var(--cur); }
button, a, select, summary, label.check, [data-act], .class-card, .cat-card, .slot.filled, .ap-card, .init-p, .rate-stars .star { cursor: var(--cur-hand); }
button:disabled, .ab-btn.off { cursor: not-allowed; }
/* текст: свой курсор-«балка» вместо системного */
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, [contenteditable] { cursor: var(--cur-text); }
input[type=checkbox], input[type=radio], input[type=range] { cursor: var(--cur-hand); }
#map { cursor: var(--cur-aim); }
#map.grabbing { cursor: grabbing; }

/* Таланты — из одной ветки: остальные ветки закрыты */
.tw-tree { position: relative; }
.tw-tree.shut { opacity: .5; filter: grayscale(.7); }
.tw-shut { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 6px 12px; border-radius: var(--radius);
  background: rgba(20,14,8,.92); border: 1px solid var(--line); color: var(--muted); font-weight: 700; white-space: nowrap; pointer-events: none; }

.am-filters { align-items: center; flex-wrap: wrap; }
.am-filters button[style*="--tc"] { border-color: var(--tc); }
.am-filters button[style*="--tc"].active { box-shadow: 0 0 8px var(--tc); }
.am-filters .am-gap { margin-left: 10px; }
.shop-card .lock.no { color: #e8906f; font-size: 11.5px; line-height: 1.25; white-space: normal; text-align: left; }

/* ───────── Окно талантов: характеристики и черновик ───────── */
.pts-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(217,164,65,.14); border-color: var(--gold); }
.pts-top button { padding: 3px 10px; flex: none; }
.tw-stats { border: 1px solid var(--line); padding: 10px; margin-bottom: 12px; }
.tw-sh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tw-sh > b { font-family: var(--font-display); font-size: 15px; color: var(--gold2); }
.tw-sh .hint { flex: 1 1 360px; margin: 0; }
.tw-srow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tw-stat { border: 1px solid var(--line); padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.tw-stat.draft { box-shadow: 0 0 0 1px #6fd06a inset; }
.tw-sn { font-size: 12px; color: var(--muted); }
.tw-stat.main .tw-sn { color: var(--gold2); }
.tw-sv { display: flex; align-items: center; gap: 6px; }
.tw-sv b { font-size: 20px; }
.tw-sb { width: 24px; height: 24px; padding: 0; border-radius: 50%; line-height: 1; font-size: 14px; }
.tw-sb.plus { margin-left: auto; background: var(--green); border-color: #8fd98a; color: #fff; }
.tw-stat small { font-size: 11px; color: #b8ad98; line-height: 1.3; }
.tal.draft { border-color: #6fd06a; border-style: dashed; box-shadow: 0 0 12px rgba(111,208,106,.55); }
.tal-add { position: absolute; top: -8px; left: -8px; padding: 0 4px; border-radius: var(--radius); font-size: 11px; font-weight: 700; background: #2c5a28; color: #d8ffd2; border: 1px solid #6fd06a; }
.tw-foot { flex-wrap: wrap; }
@media (max-width: 900px) { .tw-srow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Карточка предмета: подвал; бой: провокация */
.sc-foot { align-items: center; gap: 8px; }

.wb-hint.taunt { color: #ff9a6a; font-weight: 600; }
.wb-hint.summon-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #f4e6c0; }
.wb-hint.summon-hint b { color: var(--gold2); }
.wb-hint.summon-hint button { padding: 2px 10px; font-size: 11.5px; min-height: 0; }

/* Подсказка способности: источники бонусов */
.tt-srcs { margin-top: 6px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 5px; }
.tt-sh { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #8a94aa; margin-bottom: 3px; }
.tt-s { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.3; margin-top: 3px; }
.tt-s > div > div { color: #cfe8c8; }
.tt-s.talent b { color: #9fe39a; }
.tt-s.item b { color: #8ad8ff; }
.tt-s.stat b, .tt-s.level b { color: var(--gold2); }
.tt-si { width: 18px; text-align: center; flex: none; }
.abr-src { font-size: 11px; color: var(--muted); margin-top: 2px; }
.abr-src b { color: var(--text); font-weight: 600; }
.sc-help { font-size: 11.5px; line-height: 1.35; color: #b8ad98; display: flex; flex-direction: column; gap: 3px; }
.inv-item .sc-help { margin-top: 3px; }
/* предмет упирается в потолок характеристики героя */
.sc-cap { font-size: 11.5px; line-height: 1.35; color: #f0c070; background: rgba(240,160,40,.1); border-left: 2px solid #e0a040; border-radius: 4px; padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; }
.sc-cap.none { color: #ff9a8a; background: rgba(230,70,50,.12); border-left-color: #e05040; }

.stat-row.cap-full b { color: #f0c070; }
.stat-row.cap-over b { color: #ff8a70; }

.mt-box h4 { margin: 12px 0 4px; color: var(--gold2); }
.mt-head { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 6px; }

.mt-row.k-ability { --mc: #c8862a; } .mt-row.k-dot { --mc: #9a3ac8; } .mt-row.k-gear { --mc: #3a8ac8; }
.mt-row.k-pet { --mc: #3aa860; } .mt-row.k-oa { --mc: #a83a3a; }
.mt-detail { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 10px 8px; font-size: 12.5px; color: var(--muted); }
.mt-detail b { color: var(--text); }




/* ── Аккаунт: профиль, друзья, подтверждение почты ── */
button.link { background: none; border: 0; box-shadow: none; padding: 0; color: inherit; font: inherit; text-decoration: underline dotted rgba(240,192,96,.5); text-underline-offset: 3px; }
button.link:hover:not(:disabled) { background: none; color: var(--gold2); border: 0; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); background: #1a1510; flex: none; display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--gold2); }
.avatar.ph { background: radial-gradient(circle at 35% 30%, #5a4428, #2a1e12); font-size: 20px; }
.avatar.small { width: 26px; height: 26px; font-size: 13px; border-width: 1px; }
.avatar.big { width: 84px; height: 84px; font-size: 36px; }
.pf-box { width: min(720px, 100%); }
.pf-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.pf-main { flex: 1; min-width: 200px; }
.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pf-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.badge.gm { border-color: var(--purple); color: #d9c0ff; }
.badge.lock { border-color: #6fb36a; color: #b8e8b0; font-size: 11px; vertical-align: middle; }

.pf-bio { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.15); margin-bottom: 12px; }
.pf-edit { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: rgba(0,0,0,.15); margin-bottom: 12px; }
.pf-edit .grow { flex: 1 1 200px; }
.pf-edit input[type=file] { width: auto; }
.pf-review { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 10px; }
.pf-reviews { max-height: 320px; overflow: auto; }
.friends-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.friends-side { display: flex; flex-direction: column; gap: 16px; }
.friend-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,.15); margin-top: 8px; }
.fc-main { flex: 1; min-width: 0; }
.fc-where { color: var(--muted); font-size: 12.5px; }
.fc-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; text-align: center; margin-left: 4px; }
.lobby-card.friend { background: rgba(79,154,74,.12); box-shadow: inset 3px 0 0 #6fb36a; }
.lc-friend { font-size: 14px; }
.verify-win { z-index: 60; background: rgba(0,0,0,.8); }
.verify-box { width: min(440px, 100%); }
.verify-box p { margin: 10px 0 14px; }
.verify-links { margin-top: 8px; }
.verify-foot { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 800px) { .friends-wrap { grid-template-columns: 1fr; } }

/* ── Список лобби: кнопки и подгрузка ── */
.lc-btns { flex-wrap: wrap; justify-content: flex-end; }

.more-sentinel { color: var(--muted); text-align: center; padding: 14px; font-size: 13px; }

.sc-cap-math { white-space: pre-line; }


.pf-page { max-width: 760px; }

/* счётчик кадров (settings.js fpsTick): везде — слева вверху экрана; в игре карточки отряда — ниже */
.fps { position: fixed; top: 8px; left: 8px; z-index: 9000; padding: 2px 8px; border-radius: var(--radius); background: rgba(15, 12, 9, .78); border: 1px solid rgba(214, 178, 106, .45); font: 600 12px/18px ui-monospace, Consolas, monospace; color: #8fdc7a; pointer-events: none; }
.fps[data-lvl="mid"] { color: #f0c860; }
.fps[data-lvl="low"] { color: #ff7a5a; }
#map-wrap.with-fps .party-cards { top: 34px; }