/* ТРОПА — оформление.
   Мобильный экран первичен: крупные цели для пальца, ничего не липнет к краям
   (safe-area), игровое поле всегда остаётся видимым. */

:root{
  --bg:#0d0b0a; --bg2:#15120f; --panel:#191512; --panel2:#221c17;
  --line:#332a22; --line2:#4a3c30;
  --ink:#efe6da; --ink2:#b4a695; --ink3:#7d7266;
  --acc:#d9a441; --acc2:#f0c46a; --acc3:#8a5f21;
  --hp:#c8402f; --hp2:#e8604a; --mp:#3f6fd8; --xp:#9fd356;
  --ok:#63d471; --bad:#ff4d6d;
  --r-common:#b9c2cc; --r-uncommon:#63d471; --r-rare:#4aa3ff;
  --r-epic:#c06cff; --r-legendary:#ffa42e; --r-mythic:#ff4d6d;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --fs:15px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font:var(--fs)/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
body{position:fixed;inset:0;width:100%}
canvas{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit}

#cv{position:absolute;inset:0;width:100%;height:100%;background:#000;z-index:0}
#fxlayer{position:absolute;inset:0;pointer-events:none;z-index:1}

/* ─────────────────── Экраны ─────────────────── */
.screen{position:absolute;inset:0;z-index:40;display:none;overflow:hidden}
.screen.show{display:block}
.menuBg{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a1f16 0%, transparent 60%),
    radial-gradient(90% 60% at 20% 110%, #1a2418 0%, transparent 55%),
    linear-gradient(180deg,#0f0d0b,#080706)}
.menuBg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 20% 30%, rgba(217,164,65,.06) 0 1px, transparent 1px),
                   radial-gradient(circle at 70% 60%, rgba(217,164,65,.05) 0 1px, transparent 1px);
  background-size:90px 90px,140px 140px}

#boot{background:var(--bg);z-index:60}
.bootWrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.bootBar{width:min(60vw,260px);height:4px;border-radius:4px;background:#241d17;overflow:hidden}
.bootBar i{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--acc3),var(--acc2));
  animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}
.bootMsg{color:var(--ink3);font-size:13px;letter-spacing:.04em}

.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.22em;font-size:22px}
.logo b{font-weight:800}
.logo.big{flex-direction:column;gap:6px;font-size:34px;text-align:center}
.logo.big i{font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--ink3);font-weight:500}
.logoMark{width:34px;height:34px;flex:none;
  background:conic-gradient(from 45deg,var(--acc2),var(--acc3),var(--acc2));
  clip-path:polygon(50% 0,66% 46%,50% 100%,34% 46%);filter:drop-shadow(0 0 12px rgba(217,164,65,.5))}
.logo.big .logoMark{width:56px;height:56px}

.menuWrap,.createWrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--sat) + 22px) 16px calc(var(--sab) + 16px);gap:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.menuWrap{justify-content:flex-start}
/* Центрируем автополями, а не justify-content: при центрировании то, что не
   влезло, уезжает вверх за край и доскроллить до него нельзя. */
.menuWrap > :first-child{margin-top:auto}
.menuWrap > :last-child{margin-bottom:auto}
.charList{width:min(100%,440px);display:flex;flex-direction:column;gap:10px}
.charCard{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  transition:transform .12s,border-color .12s;text-align:left;width:100%}
.charCard:active{transform:scale(.985)}
.charCard .ccAv{width:52px;height:52px;border-radius:12px;flex:none;background:#0f0c0a;border:1px solid var(--line)}
.charCard .ccN{flex:1;min-width:0}
.charCard .ccN b{display:block;font-size:16px}
.charCard .ccN span{font-size:12px;color:var(--ink2)}
.charCard .ccL{font-size:12px;color:var(--acc);font-weight:700}
.charCard .ccDel{width:34px;height:34px;border-radius:9px;color:var(--ink3);font-size:16px}
/* Заметка на экране выбора: «привяжите аккаунт», «прежний вход не признан».
   Гость держится на localStorage, а Safari чистит его после недели простоя —
   без такого предупреждения человек просто теряет героев. */
.menuNote{width:min(100%,440px);padding:11px 13px;border-radius:13px;font-size:12.5px;line-height:1.45;
  background:rgba(25,21,18,.78);border:1px solid var(--line2);color:var(--ink2);text-align:left}
.menuNote b{color:var(--ink)}
.menuNote.warn{border-color:var(--acc3);background:rgba(46,33,18,.8);color:#e8cfa8}
.menuNote .btn{margin-top:9px;width:100%}
.menuBtns{display:flex;gap:10px;width:min(100%,440px)}
.menuFoot{color:var(--ink3);font-size:12px}

.btn{padding:12px 18px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);
  font-weight:600;letter-spacing:.02em;transition:transform .1s,filter .15s;flex:1;text-align:center}
.btn:active{transform:scale(.97);filter:brightness(1.15)}
.btn.danger{background:linear-gradient(180deg,#a8352a,#7a241c);border-color:#c05244;color:#fff2ee}
.askRow{padding:6px 2px;font-size:14px;line-height:1.45;color:var(--ink2)}
.btn.primary{background:linear-gradient(180deg,#e0ad4c,#a8761f);border-color:#f0c46a;color:#221704;
  box-shadow:0 6px 18px rgba(217,164,65,.22)}
.btn.big{padding:15px 20px;font-size:16px}
.btn.ghost{background:transparent}
.btn.danger{background:#3a1418;border-color:#6a2028;color:#ffb0b8}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}

.iconBtn{width:42px;height:42px;border-radius:11px;background:rgba(25,21,18,.82);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:18px;backdrop-filter:blur(6px)}
.iconBtn:active{filter:brightness(1.3)}
.iconBtn.sm{width:36px;height:36px;font-size:15px;border-radius:9px}

/* ─────────────────── Создание персонажа ─────────────────── */
.crHead{display:flex;align-items:center;gap:12px;width:min(100%,460px);font-size:17px;font-weight:700}
.crPreview{width:min(100%,460px);height:min(34vh,260px);border-radius:16px;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 40%,#1d1813,#0c0a09);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
#crCanvas{width:100%;height:100%}
.crClasses{display:flex;gap:8px;width:min(100%,460px);overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.crClasses::-webkit-scrollbar{display:none}
.clsCard{flex:none;width:96px;padding:10px 8px;border-radius:13px;background:var(--panel);
  border:1px solid var(--line);text-align:center;transition:.15s}
.clsCard.on{border-color:var(--acc);background:var(--panel2);box-shadow:0 0 0 1px var(--acc) inset}
.clsCard b{display:block;font-size:14px}
.clsCard span{font-size:11px;color:var(--ink3)}
.clsCard .clsGlyph{width:34px;height:34px;margin:0 auto 6px}
.crInfo{width:min(100%,460px);min-height:64px;padding:12px;border-radius:13px;background:rgba(25,21,18,.6);
  border:1px solid var(--line);font-size:13px;color:var(--ink2)}
.crInfo b{color:var(--ink);display:block;margin-bottom:3px}
.crInfo .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.crInfo .tag{font-size:11px;padding:3px 8px;border-radius:20px;background:#2a221b;color:var(--acc2)}
.crLook{display:flex;gap:8px;width:min(100%,460px);flex-wrap:wrap;justify-content:center}
.lookRow{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}
.swatch{width:26px;height:26px;border-radius:8px;border:2px solid transparent}
.swatch.on{border-color:var(--acc2)}
.crName{display:flex;gap:8px;width:min(100%,460px)}
.crName input{flex:1;padding:13px 14px;border-radius:12px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line2);outline:none;font-size:16px}
.crName input:focus{border-color:var(--acc)}
.crErr{color:var(--bad);font-size:13px;min-height:18px}
.crErr.good{color:var(--ok)}
.crErr.wait{color:var(--ink3)}
.crName input.busy{border-color:var(--bad)}
.crName input.free{border-color:var(--ok)}
#crGo{width:min(100%,460px)}

/* ─────────────────── HUD ─────────────────── */
.hud{position:absolute;inset:0;z-index:10;display:none;pointer-events:none}
.hud.show{display:block}
.hud button,.hud input{pointer-events:auto}

.hTop{position:absolute;left:calc(var(--sal) + 8px);top:calc(var(--sat) + 8px);display:flex;flex-direction:column;gap:6px;max-width:56vw}
.pPanel{display:flex;gap:8px;align-items:center;padding:6px 10px 6px 6px;border-radius:14px;
  background:linear-gradient(180deg,rgba(28,23,19,.9),rgba(16,13,11,.82));border:1px solid var(--line);
  backdrop-filter:blur(8px)}
.pPort{width:44px;height:44px;border-radius:11px;position:relative;overflow:hidden;flex:none;
  background:#0e0c0a;border:1px solid var(--line2)}
#portCv{width:100%;height:100%}
.pLvl{position:absolute;right:-1px;bottom:-1px;background:var(--acc);color:#231704;font-size:10px;
  font-weight:800;padding:1px 4px;border-radius:6px 0 8px 0}
.pBars{flex:1;min-width:110px;display:flex;flex-direction:column;gap:3px}
.pName{font-size:12px;font-weight:700;line-height:1;display:flex;gap:5px;align-items:center}
.pName i{font-style:normal;font-size:10px;color:var(--acc2);font-weight:500}
.bar{height:9px;border-radius:5px;background:#241d18;overflow:hidden;position:relative;border:1px solid #0000004d}
.bar i{display:block;height:100%;width:100%;border-radius:4px;transition:width .18s ease-out}
.bar b{position:absolute;inset:0;font-size:8px;text-align:center;line-height:9px;font-weight:700;
  color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.02em}
.bar.hp i{background:linear-gradient(180deg,var(--hp2),var(--hp))}
.bar.mp{height:6px}.bar.mp i{background:linear-gradient(180deg,#5f8fee,var(--mp))}
.bar.xp{height:4px}.bar.xp i{background:linear-gradient(180deg,#bfe87a,var(--xp))}
.bar .shield{position:absolute;top:0;left:0;height:100%;background:linear-gradient(180deg,#cfe6ff,#7fb0e8);opacity:.85}

.party{display:flex;flex-direction:column;gap:4px}
.pm{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 5px;border-radius:10px;
  background:rgba(20,17,14,.78);border:1px solid var(--line);backdrop-filter:blur(6px);font-size:11px}
.pm .pmDot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.pm.off .pmDot{background:#555}
.pm.dead .pmDot{background:var(--bad)}
.pm b{max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm .pmBar{width:52px;height:5px;border-radius:3px;background:#2a221c;overflow:hidden}
.pm .pmBar i{display:block;height:100%;background:linear-gradient(180deg,var(--hp2),var(--hp))}
.pm .pmZ{color:var(--ink3);font-size:10px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.hTopR{position:absolute;right:calc(var(--sar) + 8px);top:calc(var(--sat) + 8px);
  display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.zoneTag{padding:5px 10px;border-radius:11px;background:rgba(20,17,14,.8);border:1px solid var(--line);
  backdrop-filter:blur(6px);text-align:right;line-height:1.25}
.zoneTag b{display:block;font-size:12px}
.zoneTag i{display:block;font-style:normal;font-size:10px;color:var(--ink3)}
/* По мини-карте можно просто ткнуть — она открывает карту целиком. Раньше для
   этого была кнопка 32×32 в углу: для пальца это мало, палец промахивался. */
.miniWrap{position:relative;width:88px;height:88px;border-radius:12px;overflow:hidden;
  background:rgba(12,10,9,.8);border:1px solid var(--line);pointer-events:auto;cursor:pointer}
.miniWrap:active{filter:brightness(1.25)}
#mini{width:100%;height:100%}
.miniBtns{position:absolute;right:2px;bottom:2px}
.topBtns{display:flex;gap:6px;align-items:center}
.netDot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px currentColor;
  transition:background .2s}
.netDot.slow{background:var(--acc)}
.netDot.bad{background:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}

/* Одна колонка сверху: что бы в ней ни появилось, оно встаёт следующей
   строкой, а не поверх соседа. */
/* Ниже верхнего угла с портретом: на телефоне без выреза (--sat = 0) вести
   ложились прямо на полоски здоровья, и крестик оказывался под ними. */
.topFeed{position:absolute;left:50%;top:calc(var(--sat) + 72px);transform:translateX(-50%);
  display:flex;flex-direction:column;gap:7px;align-items:center;width:min(92vw,520px);z-index:6;
  pointer-events:none}
.banners{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}
/* Задача новичка. Живёт только первые минуты и уходит навсегда, как только
   человек освоился: висящая полоса раздражает быстрее, чем помогает. */
.goalBar{display:none;align-items:center;gap:9px;padding:8px 14px;border-radius:13px;
  background:linear-gradient(180deg,rgba(46,36,20,.96),rgba(26,20,13,.96));
  border:1px solid var(--acc3);box-shadow:0 6px 22px #0008;pointer-events:auto;
  max-width:100%;animation:drop .3s ease-out}
.goalBar.show{display:flex}
.goalBar b{font-size:13px;color:var(--acc2);white-space:nowrap}
.goalBar span{font-size:11.5px;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banner{padding:8px 14px;border-radius:12px;font-size:12px;font-weight:600;text-align:center;
  background:linear-gradient(180deg,rgba(58,38,16,.95),rgba(30,21,12,.95));border:1px solid var(--acc3);
  color:var(--acc2);box-shadow:0 6px 22px #0008;animation:drop .3s ease-out;pointer-events:auto}
.banner.evt{border-color:#7a3ea8;color:#e0b0ff;background:linear-gradient(180deg,rgba(46,22,58,.95),rgba(24,14,30,.95))}
.banner .bnGo{margin-left:8px;color:var(--acc2);text-decoration:underline}
.banner{cursor:pointer;pointer-events:auto}
/* Крестик у вести. Был размером с букву — на телефоне в него не попасть.
   Держим не меньше тридцати четырёх точек: столько занимает подушечка пальца. */
.banner{position:relative;padding-right:40px}
.banner .bnX{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:#b4a695;font-size:15px;line-height:1;cursor:pointer}
.banner .bnX:active{color:#fff}
.toast{cursor:pointer;pointer-events:auto}
@keyframes drop{from{transform:translateY(-14px);opacity:0}}

.bossBar{width:min(100%,470px);display:none;flex-direction:column;gap:3px}
.bossBar.show{display:flex}
.bbName{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;padding:0 3px;
  text-shadow:0 1px 3px #000}
.bbName b{font-weight:700;letter-spacing:.05em}
.bbName i{font-style:normal;color:var(--ink2);font-size:10px}
.bbBar{height:12px;border-radius:7px;background:#1c1512;border:1px solid #5a2a22;overflow:hidden;
  box-shadow:0 3px 14px #0009}
.bbBar u{display:block;height:100%;background:linear-gradient(180deg,#ff7a5e,#a8231a);transition:width .2s}
.bossBar.imm .bbBar u{background:linear-gradient(180deg,#8ab6ff,#3f6fd8)}

.useHint{position:absolute;left:50%;bottom:calc(var(--sab) + 190px);transform:translateX(-50%);z-index:7;
  display:none;align-items:center;gap:8px;padding:9px 16px;border-radius:24px;
  background:rgba(24,20,16,.92);border:1px solid var(--acc3);pointer-events:auto;font-size:13px}
.useHint.show{display:flex;animation:drop .2s}
.useHint b{width:26px;height:26px;border-radius:8px;background:var(--acc);color:#231704;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}

/* ─────────────────── Управление ─────────────────── */
/* Зона джойстика кончается над нижней панелью. Иначе выходило так: панель
   «Сумка · Герой · Дела…» лежит поверх зоны и занимает нижние полсотни точек —
   ровно там, где большой палец естественно ложится, чтобы вести героя. Игрок
   пытался пойти и открывал сумку. */
.stickZone{position:absolute;left:0;bottom:calc(var(--sab) + 52px);width:46%;height:46%;
  pointer-events:auto;touch-action:none}
.stick{position:absolute;width:118px;height:118px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.05),rgba(255,255,255,.02) 60%,transparent 70%);
  border:2px solid rgba(239,230,218,.16);transition:opacity .18s;transform:translate(-50%,-50%)}
.stick.on{opacity:1}
.stick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(240,196,106,.9),rgba(160,110,30,.75));
  border:1px solid rgba(255,225,160,.5);box-shadow:0 4px 16px #0008}

.actZone{position:absolute;right:calc(var(--sar) + 10px);bottom:calc(var(--sab) + 62px);
  pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.actRow2{display:flex;gap:10px;align-items:center;pointer-events:auto;position:relative}
/* ульта и зелье живут в строке, а не в дуге — им абсолютное позиционирование не нужно */
.actRow2 .ab{position:relative;right:auto;bottom:auto;left:auto;top:auto;flex:none}
.abArc{position:relative;width:196px;height:150px;pointer-events:none}
.ab{position:absolute;border-radius:17px;pointer-events:auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#30414bdd,#101e28f5 70%);border:1px solid #8a9d9d80;
  box-shadow:inset 0 1px 0 #d9e3d333,inset 0 -3px 0 #07131bb3,0 4px 10px #0006;overflow:hidden;
  transition:transform .1s,filter .1s,border-color .15s;isolation:isolate}
.ab::before{content:'';position:absolute;inset:4px;border:1px solid #b9c4af20;border-radius:13px;pointer-events:none}
.ab:active{transform:translateY(2px) scale(.95);filter:brightness(1.2)}
.ab:focus-visible{outline:2px solid #fff0c6;outline-offset:3px}
.ab .abIco{position:absolute;inset:2px;display:block;pointer-events:none}
.ab u{position:absolute;inset:0;border-radius:inherit;background:transparent;clip-path:none;pointer-events:none;font-style:normal;text-decoration:none;
  display:flex;align-items:center;justify-content:center;color:#fff3da;font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 4px #000,0 0 5px #000}
.ab.ready{border-color:var(--ability-accent,#d6bc7f)}
.ab.counterReady{border-color:#d4ffec;box-shadow:0 0 0 2px #8aceb666,inset 0 1px 0 #d9e3d333,0 4px 10px #0006}
/* Заряды приёма: цифра в углу кнопки. Кольцо показывает, когда вернётся
   следующий, цифра — сколько на руках сейчас. */
.ab .chg{position:absolute;right:2px;top:1px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:rgba(217,164,65,.92);color:#221704;
  font:800 11px/15px system-ui,sans-serif;font-style:normal;text-align:center;
  box-shadow:0 1px 4px #0009;pointer-events:none;z-index:2}
.ab .chg.empty{background:rgba(60,52,44,.9);color:#8a7d6e}
/* Полоска связки обычных ударов: три засечки внизу кнопки атаки. */
.cmbBar{position:absolute;left:0;right:0;bottom:7px;display:flex;gap:4px;
  justify-content:center;pointer-events:none;font-style:normal;z-index:2}
.cmbBar u{position:static;inset:auto;background:rgba(255,255,255,.16);
  width:13px;height:3px;border-radius:2px;clip-path:none;display:block;
  transition:background .12s}
.cmbBar u.on{background:#ffd9a0}
.cmbBar u.on.hot{background:#ffb35c;box-shadow:0 0 6px rgba(255,179,92,.9)}
.ab.atk{right:0;bottom:0;width:86px;height:86px;border-radius:24px;border-color:#d3ae77;
  background:linear-gradient(145deg,#866345ed,#342b29f5 75%)}
.ab.atk::before{border-color:#dfc18b40;border-radius:20px}
.ab.a0{right:78px;bottom:66px;width:58px;height:58px}
.ab.a1{right:24px;bottom:96px;width:58px;height:58px}
.ab.a2{right:104px;bottom:8px;width:58px;height:58px}
.ab.dash{right:150px;bottom:44px;width:50px;height:50px;
  border-color:rgba(120,200,180,.55)}
.ab.ult{width:60px;height:60px;border-color:rgba(200,110,255,.7);
  background:linear-gradient(145deg,#4e435fed,#222331f5)}
.ab.ult.full{animation:ultGlow 1.6s ease-in-out infinite}
@keyframes ultGlow{50%{border-color:#eee0ff;box-shadow:inset 0 1px 0 #e8dbff55,0 4px 12px #0006}}
.ab.pot{width:48px;height:48px;border-color:rgba(200,70,70,.5)}
/* Кнопка действия: поговорить, войти, открыть. Появляется, только когда есть
   с чем взаимодействовать, — на телефоне клавиши E нет. */
/* overflow у кнопок обрезан ради круга перезарядки — а подпись торчит выше
   кнопки, и её бы срезало. У этой кнопки перезарядки нет, обрезать нечего. */
.ab.use{width:58px;height:58px;overflow:visible;border-color:rgba(126,220,150,.85);
  background:radial-gradient(circle at 40% 32%,rgba(80,140,95,.5),rgba(20,28,20,.82));
  display:none;animation:usePop .18s}
.ab.use.show{display:flex}
.ab.use em{position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:.2px;color:#cdeacb;
  white-space:nowrap;text-shadow:0 1px 4px #000b,0 0 2px #000;pointer-events:none}
@keyframes usePop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.ab .cnt{position:absolute;right:-2px;bottom:-2px;font-style:normal;font-size:10px;font-weight:800;
  background:#241d18;border:1px solid var(--line2);border-radius:8px;padding:0 4px;color:var(--ink2)}
.ab.locked{opacity:.4;filter:grayscale(.7)}
.ab.aiming{box-shadow:0 0 0 3px var(--acc2),0 4px 14px #0007}

/* Зелёный треугольник на плитке: эта вещь лучше того, что надето. */
.cell .better{position:absolute;left:3px;top:3px;font-style:normal;font-size:11px;font-weight:800;
  color:#0e1a10;background:#8fe0a0;border-radius:6px;padding:0 4px;line-height:15px;
  box-shadow:0 2px 6px #0007}
/* Вещь не по уровню: видно на плитке, а не только всплывашкой после нажатия. */
.cell .needLvl{position:absolute;left:3px;top:3px;font-style:normal;font-size:10px;font-weight:800;
  color:#2a1010;background:#ff9a8a;border-radius:6px;padding:0 4px;line-height:15px;
  white-space:nowrap;box-shadow:0 2px 6px #0007}
.cell.locked{opacity:.55}
.cell.locked canvas{filter:grayscale(.8)}
/* Построчная разница с надетым: сразу видно, что именно изменится. */
.cmpRow{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  padding:3px 8px;border-radius:7px;margin-top:3px;background:rgba(255,255,255,.03)}
.cmpRow.up{color:#8fe0a0}
.cmpRow.dn{color:#ff9a8a}
.cmpRow.same{color:#b4a695;justify-content:center}
.needRow{margin-top:6px;padding:6px 8px;border-radius:9px;font-size:12px;font-weight:700;
  color:#ffb0a2;background:rgba(120,40,32,.35);border:1px solid rgba(200,90,70,.5)}

.bBar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;
  padding:5px calc(var(--sal) + 6px) calc(var(--sab) + 5px) calc(var(--sar) + 6px);
  background:linear-gradient(180deg,rgba(12,10,9,0),rgba(12,10,9,.9) 45%);pointer-events:auto}
/* Высота под палец: было сорок точек, для нижнего ряда это впритык. */
.bb{position:relative;flex:1;max-width:78px;min-height:46px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
  font-size:9.5px;color:var(--ink3);padding:5px 2px;border-radius:10px}
.bb span{font-size:17px;line-height:1;color:var(--ink2)}
.bb:active{background:rgba(255,255,255,.06)}
.bb .dot{position:absolute;top:2px;right:calc(50% - 18px);width:7px;height:7px;border-radius:50%;
  background:var(--acc);display:none}
.bb .dot.on{display:block}

.quickBar{position:absolute;left:50%;bottom:calc(var(--sab) + 58px);transform:translateX(-50%);
  display:none;gap:6px;flex-wrap:wrap;justify-content:center;width:min(94vw,460px);pointer-events:auto;z-index:5}
.quickBar.show{display:flex}
.qb{padding:9px 13px;border-radius:20px;background:rgba(30,25,20,.94);border:1px solid var(--line2);font-size:13px}

/* ─────────────────── Вести ─────────────────── */
.toasts{display:flex;flex-direction:column;align-items:center;width:100%;pointer-events:none}
body>.toasts{position:fixed;top:calc(var(--sat) + 80px);left:50%;transform:translateX(-50%);width:min(92vw,420px);z-index:55}
.toast{padding:9px 14px;border-radius:12px;font-size:13px;text-align:center;
  background:linear-gradient(180deg,rgba(34,28,23,.96),rgba(20,17,14,.96));border:1px solid var(--line2);
  box-shadow:0 6px 20px #0008;animation:toastIn .3s ease-out;max-width:100%}
.toast b{color:var(--acc2)}
.toast.good{border-color:#3d6b3f}
.toast.danger{border-color:#d87564;color:#ffe4c9;font-weight:700;background:rgba(55,22,18,.96)}
.toast.big{font-size:15px;font-weight:700;border-color:var(--acc);color:var(--acc2)}
.toast.tip{border-color:var(--acc3);color:#e8cfa8;background:linear-gradient(180deg,rgba(44,34,22,.96),rgba(24,19,14,.96))}
.toast{max-height:112px;overflow:auto;min-height:36px;line-height:1.35}
.toast:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
.noticeCount{white-space:nowrap;color:var(--ink3)}
.combat-focus #goalBar,.combat-focus #banners,.combat-focus #lootFeed,.combat-focus #useHint{display:none}
.combat-focus .toast{font-size:12px;padding:7px 12px;max-height:52px;max-width:360px}
.combat-focus .toast br{display:none}
@media(max-width:600px){.combat-focus .toasts{align-items:flex-start}.combat-focus .toast{max-width:calc(100% - 90px);text-align:left}}
@keyframes toastIn{from{transform:translateY(12px) scale(.94);opacity:0}}

.lootFeed{position:absolute;right:calc(var(--sar) + 10px);top:calc(var(--sat) + 190px);
  display:flex;flex-direction:column;gap:4px;align-items:flex-end;pointer-events:none;z-index:5}
.lootRow{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:9px;font-size:11px;
  background:rgba(18,15,12,.86);border:1px solid var(--line);animation:lootIn .35s ease-out}
/* Годится или нет — сразу в ленте добычи. */
.lootRow .lrUp,.lootRow .lrDn{font-style:normal;font-size:10px;padding:1px 5px;border-radius:6px}
.lootRow .lrUp{background:rgba(99,212,113,.2);color:#9fe8b0}
.lootRow .lrDn{background:rgba(120,110,100,.18);color:#8a7f72}

/* Журнал боя: четыре столбца одной строкой, чтобы читалось сверху вниз. */
.clogList{gap:3px}
.clogRow{display:flex;align-items:baseline;gap:8px;padding:6px 10px;border-radius:9px;
  background:rgba(24,20,17,.7);border:1px solid var(--line);font-size:12px}
.clogRow b{min-width:44px;text-align:right;font-weight:800}
.clogRow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.clogRow i{font-style:normal;color:var(--ink3);font-size:11px;white-space:nowrap}
.clogRow u{text-decoration:none;color:var(--ink3);font-size:11px;min-width:28px;text-align:right}

/* Самоцветы: мешочек и гнёзда. */
.gemBag{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.gemChip{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11.5px;
  padding:4px 9px;border-radius:20px;background:rgba(24,20,17,.8);border:1px solid var(--line2)}
.gemChip u{width:9px;height:9px;border-radius:50%;text-decoration:none;display:block}
.gemRow{align-items:center}
.socRow{display:flex;gap:6px;flex:none}
.socBtn{width:30px;height:30px;border-radius:9px;background:var(--panel2);
  border:1px dashed var(--line2);color:var(--ink3);font-size:14px;line-height:1}
.socBtn.on{border-style:solid;background:rgba(0,0,0,.35)}
.socBtn:active{transform:scale(.92)}
@keyframes lootIn{from{transform:translateX(20px);opacity:0}}

.deadScreen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:20;
  background:radial-gradient(70% 60% at 50% 50%,rgba(90,10,10,.35),rgba(6,4,4,.86));pointer-events:auto}
.deadScreen.show{display:flex;animation:fadeIn .5s}
@keyframes fadeIn{from{opacity:0}}
.dsBox{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
/* Вторая строка подсказки на экране смерти — тише основной. */
.dsBox #dsHint i{display:block;margin-top:4px;font-style:normal;font-size:12px;color:#9d8f80}
.dsBox b{font-size:30px;letter-spacing:.14em;color:#ffb0a8;text-shadow:0 3px 20px #000}
.dsBox span{color:var(--ink2);font-size:14px}
.dsBox u{color:var(--acc2);text-decoration:none;font-weight:700}

/* ─────────────────── Панели ─────────────────── */
.panel{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#100e0c,#0a0908);
  animation:panelIn .18s ease-out;pointer-events:auto}
.panel.noAnim{animation:none}
@keyframes panelIn{from{transform:translateY(18px);opacity:0}}
.pHead{display:flex;align-items:center;gap:10px;padding:calc(var(--sat) + 10px) 14px 10px;
  border-bottom:1px solid var(--line);flex:none}
.pHead b{font-size:17px;flex:1}
.pHead .pCur{display:flex;gap:10px;font-size:12px;color:var(--ink2);align-items:center}
.pCur i{font-style:normal;display:flex;align-items:center;gap:3px}
/* Пять вкладок в «Людях» не помещались в 375 точек: последняя уезжала за край,
   а что полоса прокручивается, догадаться было неоткуда. Ужали отступы, и
   у правого края добавили затемнение — видно, что дальше что-то есть. */
.pTabs{display:flex;gap:5px;padding:10px 12px 0;overflow-x:auto;flex:none;scrollbar-width:none;
  position:relative;-webkit-overflow-scrolling:touch}
.pTabs::-webkit-scrollbar{display:none}
.pTabsWrap{position:relative;flex:none}
.pTabsWrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:26px;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,13,11,0),rgba(16,13,11,.92))}
.pTabsWrap.fit::after{display:none}
.pTab{flex:none;padding:10px;border-radius:11px;background:var(--panel);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink2);transition:background .16s,border-color .16s,color .16s,transform .1s}
.pTab:active{transform:scale(.96)}
.pTab.on{background:var(--panel2);border-color:var(--acc);color:var(--acc2)}
.pBody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px calc(var(--sab) + 20px)}
.pFoot{flex:none;padding:10px 12px calc(var(--sab) + 10px);border-top:1px solid var(--line);display:flex;gap:8px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px}
.cell{position:relative;aspect-ratio:1;border-radius:12px;background:var(--panel);border:1.5px solid var(--line);
  overflow:hidden;display:flex;align-items:center;justify-content:center;transition:.12s}
.cell:active{transform:scale(.94)}
.cell canvas{width:100%;height:100%}
.cell .up{position:absolute;left:3px;top:2px;font-size:10px;font-weight:800;color:var(--acc2);text-shadow:0 1px 2px #000}
.cell .nw{position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.cell.sel{box-shadow:0 0 0 2px var(--acc2) inset}
.cell.empty{opacity:.5}
.cell .slotName{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;color:var(--ink3)}
.r-common{border-color:var(--r-common)}.r-uncommon{border-color:var(--r-uncommon)}
.r-rare{border-color:var(--r-rare)}.r-epic{border-color:var(--r-epic)}
.r-legendary{border-color:var(--r-legendary);box-shadow:0 0 12px rgba(255,164,46,.28)}
.r-mythic{border-color:var(--r-mythic);box-shadow:0 0 14px rgba(255,77,109,.32)}
.c-common{color:var(--r-common)}.c-uncommon{color:var(--r-uncommon)}.c-rare{color:var(--r-rare)}
.c-epic{color:var(--r-epic)}.c-legendary{color:var(--r-legendary)}.c-mythic{color:var(--r-mythic)}

.gearLay{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;align-items:center;margin-bottom:14px}
.gearCol{display:flex;flex-direction:column;gap:8px}
.heroBox{border-radius:16px;background:radial-gradient(70% 70% at 50% 35%,#1d1813,#0c0a09);
  border:1px solid var(--line);aspect-ratio:.8;position:relative;overflow:hidden}
.heroBox canvas{width:100%;height:100%}
.heroBox .hbPow{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;color:var(--acc2)}

.statRow{display:flex;justify-content:space-between;padding:7px 10px;border-radius:9px;background:var(--panel);
  margin-bottom:5px;font-size:13px;align-items:center}
.statRow span{color:var(--ink2)}
.statRow b{font-weight:700}
.statRow .plus{width:26px;height:26px;border-radius:8px;background:var(--acc3);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-left:8px}
/* «+5» шире обычного плюса, но той же высоты — палец не путается. */
.statRow .plus.wide{width:auto;min-width:34px;padding:0 8px;font-size:12px}

.itemCard{padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);margin-bottom:10px}
.itemCard .icHead{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.itemCard .icIco{width:54px;height:54px;border-radius:12px;border:1.5px solid var(--line);flex:none;overflow:hidden}
.itemCard .icIco canvas{width:100%;height:100%}
.itemCard .icName b{display:block;font-size:15px}
.itemCard .icName span{font-size:11px;color:var(--ink3)}
.affRow{font-size:12.5px;color:#a8d0a0;padding:1px 0}
.powRow{font-size:12.5px;color:var(--r-legendary);padding:3px 0;line-height:1.35}
.setRow{font-size:12px;color:var(--r-epic);padding:2px 0}
.cmp{font-size:11px;color:var(--ink3);margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.cmp .up{color:var(--ok)}.cmp .dn{color:var(--bad)}

.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:10px;padding:11px;border-radius:12px;background:var(--panel);
  transition:background .15s,border-color .15s,transform .1s;
  border:1px solid var(--line)}
.row .rIco{width:40px;height:40px;border-radius:10px;flex:none;overflow:hidden;background:#12100e;
  display:flex;align-items:center;justify-content:center;font-size:18px}
.row .rTx{flex:1;min-width:0}
.row .rTx b{display:block;font-size:14px}
.row .rTx span{font-size:11.5px;color:var(--ink2);display:block;line-height:1.35}
.row .rEnd{text-align:right;font-size:12px;color:var(--acc2);flex:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px}
/* Ступени приёма: ромбики читаются быстрее числа «3/5» и не занимают строку. */
.abMeta{font-style:normal;font-weight:500;font-size:11px;color:var(--ink3);
  white-space:nowrap;margin-left:7px}
.abPips{font-size:10px;letter-spacing:1px;color:var(--acc);margin-left:6px;font-style:normal}
.abPips u{color:#4a3c30;text-decoration:none}
.abGain{display:block;font-style:normal;font-size:11px;color:var(--xp);margin-top:3px}
.abCost{font-size:10.5px;color:var(--ink3);white-space:nowrap}
.abNums{display:block;font-style:normal;font-size:10.5px;color:var(--ink3);margin-top:3px}
.abRow.on{border-color:var(--acc3);background:linear-gradient(180deg,rgba(42,33,21,.9),var(--panel))}
.hintLine{font-size:11.5px;color:var(--ink3);line-height:1.4;margin:-4px 0 10px}
/* Набор: сколько частей собрано и что даёт каждая ступень. */
.setRow{padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);margin-bottom:8px}
.setHead{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.setHead i{font-style:normal;font-size:12px;color:var(--acc2)}
.setBar{display:flex;gap:4px;margin:7px 0}
.setPip{flex:1;height:5px;border-radius:3px;background:#2a231c}
.setPip.on{background:linear-gradient(90deg,#a8761f,#e0ad4c)}
.setPip.key{box-shadow:0 0 0 1px var(--line2) inset}
.setStep{font-size:11.5px;color:var(--ink3);line-height:1.45}
.setStep.on{color:var(--xp)}
.setStep b{color:var(--ink2)}
/* Счёт захода: у каждого своя полоска вклада — видно вклад, а не только числа. */
.scoreTbl{margin-top:6px;border-top:1px solid var(--line);padding-top:8px}
.scoreHead,.scoreRow{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 2px}
.scoreHead{color:var(--ink3);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.scoreHead span,.scoreRow span{flex:1;min-width:0;position:relative}
.scoreHead i,.scoreRow i{width:58px;text-align:right;font-style:normal}
.scoreRow{border-top:1px solid rgba(51,42,34,.6)}
.scoreRow b{display:block;font-size:13px}
.scoreRow u{display:block;height:3px;border-radius:2px;margin-top:3px;text-decoration:none;
  background:linear-gradient(90deg,#a8761f,#e0ad4c)}
.scoreRow i{color:var(--ink2)}
/* Три ячейки под приём: видно, что стоит и куда можно поставить. */
.slotPick{display:flex;gap:4px}
.slotBtn{width:26px;height:26px;border-radius:8px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--ink2);font-size:12px;font-weight:700;transition:background .15s,border-color .15s,transform .1s}
.slotBtn.on{background:linear-gradient(180deg,#e0ad4c,#a8761f);border-color:#f0c46a;color:#221704}
.slotBtn:disabled{opacity:.75}
.slotBtn.shut{opacity:.4;border-style:dashed}
.slotBtn:not(:disabled):active{transform:scale(.92)}
.row.done{opacity:.55}
.row.on{border-color:var(--acc)}
.row.off{opacity:.5}

.qStep{font-size:12px;color:var(--ink2);margin-top:4px}
.qBar{height:5px;border-radius:3px;background:#241d18;overflow:hidden;margin-top:5px}
.qBar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc3),var(--acc2))}

.talTree{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.talBranch{flex:1;min-width:130px}
.talBranch h4{margin:0 0 8px;font-size:13px;text-align:center;letter-spacing:.05em}
.talNode{padding:9px;border-radius:11px;background:var(--panel);border:1px solid var(--line);margin-bottom:8px;
  position:relative}
.talNode.can{border-color:var(--acc3)}
.talNode.max{border-color:var(--ok)}
.talNode.lock{opacity:.45}
.talNode b{font-size:12.5px;display:block}
.talNode span{font-size:11px;color:var(--ink3);display:block;line-height:1.35;margin-top:2px}
.talNode .tRank{position:absolute;right:7px;top:7px;font-size:10px;color:var(--acc2);font-weight:700}

.chatBox{display:flex;flex-direction:column;height:100%}
.chatLog{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding:4px 2px}
.cmsg{font-size:13px;line-height:1.4;word-break:break-word}
.cmsg b{color:var(--acc2)}
.cmsg.zone b{color:#8ab6ff}.cmsg.party b{color:#7de3b3}.cmsg.guild b{color:#c98cff}
.cmsg.sys{color:var(--ink3);font-style:italic;font-size:12px}
.chatIn{display:flex;gap:8px;padding-top:8px}
.chatIn input{flex:1;padding:12px;border-radius:11px;background:var(--panel);border:1px solid var(--line2);
  color:var(--ink);outline:none;font-size:16px}

.modal{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(5,4,3,.7);pointer-events:auto;animation:fadeIn .15s}
.mBox{width:min(100%,520px);max-height:88vh;border-radius:20px 20px 0 0;background:var(--bg2);
  border:1px solid var(--line);border-bottom:0;display:flex;flex-direction:column;overflow:hidden;
  animation:sheetIn .22s cubic-bezier(.2,.9,.3,1);padding-bottom:var(--sab)}
@keyframes sheetIn{from{transform:translateY(60px)}}
.modal.out{animation:fadeOutM .16s ease-in forwards}
.modal.out .mBox{animation:sheetOut .16s ease-in forwards}
@keyframes fadeOutM{to{opacity:0}}
@keyframes sheetOut{to{transform:translateY(50px)}}
.mHead{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.mHead b{flex:1;font-size:16px}
.mBody{overflow-y:auto;padding:14px 16px;flex:1}
.mFoot{padding:12px 16px;display:flex;gap:8px;border-top:1px solid var(--line)}
.grab{width:36px;height:4px;border-radius:3px;background:var(--line2);margin:8px auto 0}

.npcTalk{position:absolute;left:50%;bottom:calc(var(--sab) + 130px);transform:translateX(-50%);
  width:min(94vw,540px);z-index:22;pointer-events:auto}
.ntBox{background:linear-gradient(180deg,rgba(30,25,20,.97),rgba(16,13,11,.97));border:1px solid var(--acc3);
  border-radius:16px;padding:14px;box-shadow:0 10px 40px #000a}
.ntBox .ntName{color:var(--acc2);font-weight:700;font-size:13px;margin-bottom:4px}
.ntBox .ntLine{font-size:14px;line-height:1.45;color:var(--ink)}
.ntBtns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

.hint{position:absolute;z-index:24;pointer-events:none;padding:9px 14px;border-radius:12px;font-size:13px;
  background:rgba(24,20,16,.95);border:1px solid var(--acc3);color:var(--ink);max-width:74vw;
  box-shadow:0 6px 24px #0009;animation:drop .25s}
.hint b{color:var(--acc2)}

.empty2{text-align:center;color:var(--ink3);padding:36px 12px;font-size:13px}
.sectionT{font-size:12px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;margin:14px 0 8px}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:#241d18;
  font-size:11px;color:var(--ink2)}

/* Значки валют рисуем глифами, а не эмодзи: эмодзи в разных системах выглядят
   по-разному и часто подменяются на что-то неуместное. */
.cGold::before{content:'◉';color:#e8c356;margin-right:4px;font-size:.95em}
.cCry::before{content:'◆';color:#8ad4ff;margin-right:4px;font-size:.9em}
.cShard::before{content:'◇';color:#9fd8ff;margin-right:4px}
.cEss::before{content:'✦';color:#c98cff;margin-right:4px}
.cGold,.cCry,.cShard,.cEss{white-space:nowrap}
.mats{display:flex;gap:10px;font-size:12px;color:var(--ink2);flex-wrap:wrap}

/* Планшет и десктоп: панели не во весь экран, а карточкой */
@media (min-width:820px) and (min-height:560px){
  :root{--fs:15px}
  .panel{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,860px);height:min(88vh,720px);
    border-radius:20px;border:1px solid var(--line);box-shadow:0 30px 80px #000c}
  .pHead{padding-top:14px;border-radius:20px 20px 0 0}
  .modal{align-items:center}
  .mBox{border-radius:20px;border-bottom:1px solid var(--line)}
  .stickZone{display:none}
  .actZone{bottom:calc(var(--sab) + 20px)}
  .bBar{left:auto;right:8px;bottom:auto;top:calc(var(--sat) + 190px);flex-direction:column;width:64px;
    background:none;gap:4px}
  .bb{max-width:none}
}
/* Низкий экран (телефон в альбоме): всё компактнее */
@media (max-height:460px){
  .hTopR{flex-direction:row;align-items:flex-start}
  .hTopR .zoneTag{display:none}
  .hTopR .topBtns{order:-1}
  .hTop{max-width:40vw}
  .miniWrap{width:66px;height:66px}
  .abArc{width:172px;height:128px}
  .ab.atk{width:74px;height:74px}
  .ab.a0{right:68px;bottom:56px}.ab.a1{right:20px;bottom:82px}.ab.a2{right:92px;bottom:6px}
  .ab.dash{right:132px;bottom:38px;width:44px;height:44px}
  .bBar{padding-bottom:2px}
  .bb{font-size:9px}.bb span{font-size:15px}
}

/* ═══════════ Описание игры на экране входа ═══════════
   Единственный текст, который видит поисковик: всё остальное рисуется
   на canvas уже после входа. Держим его ниже кнопок и неброским. */
.about{width:min(100%,460px);margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--ink2);font-size:13.5px;line-height:1.65;text-align:left}
.about h1{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.about p{margin:0 0 12px}
.about details{border-top:1px solid var(--line);padding:10px 0}
.about summary{cursor:pointer;color:var(--ink);font-weight:600;list-style:none;padding:2px 0}
.about summary::-webkit-details-marker{display:none}
.about summary::after{content:'+';float:right;color:var(--acc)}
.about details[open] summary::after{content:'–'}
.about details p,.about details ul{margin:10px 0 2px}
.about ul{padding-left:18px}
.about li{margin-bottom:6px}
.aboutFoot{margin-top:16px;color:var(--ink3);font-size:12.5px}
.about a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--acc3)}

/* Кому системой выключены движения — их не мучаем. Игра остаётся играбельной,
   просто без выездов и затуханий. */
@media (prefers-reduced-motion: reduce) {
  .panel, .panel.out, .panel.bodyIn .pBody, .modal, .mBox, .toast, .banner,
  .lootRow, .useHint.show { animation:none !important }
  * { transition-duration:.01ms !important }
}

/* 1.1 — Дыхание леса: холодный камень, тёплая латунь, свободное игровое поле. */
:root{--bg:#0b1215;--bg2:#111d21;--panel:#142126;--panel2:#1b2b2e;--line:#2b3c3e;--line2:#435350;--ink:#eee9dc;--ink2:#b5c1bb;--ink3:#849791;--acc:#d4b87a;--acc2:#f0d59b;--acc3:#887444}
.menuBg{background:#091719 url('../assets/forest-gate.svg') center 38%/cover no-repeat}
.menuBg::after{background:linear-gradient(90deg,rgba(5,13,16,.82),rgba(5,13,16,.12) 72%),linear-gradient(0deg,#0b1215,transparent 70%);opacity:1}
.menuWrap{align-items:flex-start;max-width:1440px;margin:auto;padding:70px clamp(24px,6vw,96px) 36px;gap:22px}
.menuWrap>.logo.big{align-items:flex-start;text-align:left;margin-top:0;gap:8px}
.menuWrap .logo.big b{font-family:Georgia,'Times New Roman',serif;font-size:clamp(52px,7vw,88px);font-weight:500;letter-spacing:.16em;line-height:1.15}
.menuWrap .logoMark{width:28px;height:42px;margin-bottom:4px}
.logo.big i{color:#b8c8bd;font-size:12px;letter-spacing:.12em}
.menuTagline{max-width:380px;font:italic 24px/1.35 Georgia,serif;color:#e5d8b6;margin:0}
.releasePill{display:inline-flex;align-items:center;gap:9px;border:1px solid #72827666;border-radius:30px;padding:7px 12px;color:#c7d5c5;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:#162727a8}
.releasePill:before{content:'';width:5px;height:5px;border-radius:50%;background:#dfc687}
.menuWrap .charList,.menuWrap .menuBtns{max-width:420px}
.charCard{background:linear-gradient(120deg,#1d3030ed,#112023ed);border-color:#68726066;box-shadow:0 8px 24px #0003}
.charCard:hover{border-color:var(--acc);transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,#ead39e,#b99a5f);border-color:#f1dba6;color:#192322;box-shadow:0 5px 18px #0003}
.btn.ghost{background:#101d20a6;border-color:#50605a}
.about{margin-top:28px!important;max-width:620px;background:#0c171aca;padding:22px;border-radius:18px;border:1px solid #31443e66}
.about h1{font-family:Georgia,serif;font-size:22px;font-weight:400;line-height:1.3}
.about p,.about li{color:#aabbb3;line-height:1.75}
.createWrap{background:linear-gradient(180deg,#0a171cb3,#0b1215f7)}
.crPreview{border-radius:24px;background:radial-gradient(ellipse at 50% 74%,#8da78625,transparent 62%);position:relative}
.crHead{border-color:#63736555}
.crClasses button{background:#142226;border-color:#364c47}
.crClasses button.on{background:linear-gradient(130deg,#33473d,#192a29);border-color:#c8b37b}
.panel{background:linear-gradient(160deg,#18272c,#101a1f);border:1px solid #57655866;box-shadow:0 24px 100px #0009}
.pHead{background:linear-gradient(100deg,#223432,#16252a);border-bottom:1px solid #72827055}
.pTabs{background:#0f1c20}
.pTabs button.on{background:#c5b17c18;border-color:#b7a16a;color:#f0dba8}
.itemCard,.row{border-color:#344841;background-color:#17272a}
.iconBtn{background:#17262bbf;border-color:#53615866}
.attackToggle{position:absolute;right:3px;bottom:99px;padding:7px 10px;min-height:34px;border:1px solid #6d7d7077;border-radius:16px;background:#112229e8;color:#b7c5bc;font-size:11px;pointer-events:auto;z-index:3}
.attackToggle.on{color:#e4d499;border-color:#d5bd80;background:#334337}
#perfBadge{position:fixed;left:12px;bottom:calc(12px + var(--sab));z-index:30;padding:5px 9px;border-radius:7px;background:#081416df;color:#a7cdbb;font:10px ui-monospace,monospace;pointer-events:none}
.volumeRow{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px 4px;color:var(--ink2)}
.volumeRow input{grid-column:1/-1;width:100%;accent-color:#d6bc7f;min-height:28px;touch-action:pan-y}
.volumeRow output{font-variant-numeric:tabular-nums;color:var(--acc2)}
@media(min-width:900px){.menuWrap .about{margin-top:46px!important}.menuTagline{font-size:29px}.menuWrap{padding-top:54px}}
@media(max-width:600px){.menuWrap{padding:calc(var(--sat) + 28px) 20px 26px;gap:16px}.menuWrap .logo.big b{font-size:54px}.menuBg{background-position:61% top;background-size:auto 680px}.menuBg::after{background:linear-gradient(0deg,#0b1215 0%,#0b1215ba 40%,#0b12154d 100%)}.menuTagline{font-size:21px;max-width:260px}.menuWrap .charList{margin-top:12px}.about{padding:17px;margin-top:24px!important}.panel{border-radius:0}.attackToggle{bottom:91px;right:0;min-height:34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
body.reducedMotion *,body.reducedMotion *::before,body.reducedMotion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}

.actRow2 .attackToggle{position:static;flex:none;min-width:46px;min-height:38px;align-self:center;margin-right:2px}
@media(max-width:600px){#perfBadge{bottom:calc(64px + env(safe-area-inset-bottom));font-size:10px}}

#netHint{position:fixed;top:155px;left:50%;transform:translateX(-50%);z-index:35;width:max-content;max-width:88vw;padding:10px 14px;border:1px solid #b6a77b;border-radius:12px;background:#17232dee;color:#f3dfb4;font:12px system-ui;pointer-events:none}
#netHint[hidden]{display:none}

/* Horizon: readable progression, branch navigation and an atlas of distinct lands. */
.growthHeader{padding:22px 24px;margin:0 0 20px;border:1px solid #93bbba35;border-radius:18px;background:radial-gradient(ellipse at 95% 0,#699a9633,transparent 65%),#17262e}
.growthHeader>span{font-size:10px;letter-spacing:.22em;color:#9dc3bd}.growthHeader h3{font:600 28px Georgia,serif;color:#f0e8d5;margin:8px 0}.growthHeader p{font-size:13px;line-height:1.6;color:#b1bebd;margin:0;max-width:580px}.growthHeader progress{width:100%;height:6px;margin-top:18px;accent-color:#cdb57c}
.talentNav{display:flex;gap:8px;overflow:auto;padding:0 0 14px;scrollbar-width:thin}.talentTab{flex:0 0 150px;text-align:left;padding:12px;border:1px solid #ffffff18;border-radius:12px;background:#172329;color:#becbc7;font:600 12px inherit;cursor:pointer}.talentTab small{display:block;color:#97a6a5;font-size:10px;margin-top:7px}.talentTab.on{border-color:var(--branch);background:linear-gradient(145deg,#304148,#19272d);color:#fff0d7}.talentTab:focus-visible{outline:2px solid var(--branch);outline-offset:2px}
.talentNodes,.loreGrid,.worldAtlas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.talentCard{border:1px solid #ffffff16;border-radius:15px;background:#142229;padding:17px;position:relative}.talentCard.available{border-color:color-mix(in srgb,var(--branch) 55%,transparent);background:linear-gradient(140deg,#21363b,#15232c)}.talentCard.complete{border-color:#d3b97b88}.talentTop{display:flex;align-items:center;justify-content:space-between;color:var(--branch)}.talentTop>span{font-size:10px;letter-spacing:.15em}.talentTop strong{font-size:25px}.talentTop small{font-size:12px;color:#99aaa9}.talentCard h4,.loreCard h4,.atlasCard h4{font-size:16px;color:#eee6d6;margin:10px 0}.talentCard p,.loreCard p,.atlasCard p{font-size:12px;line-height:1.6;color:#b2c0bd;margin:0 0 10px}.talentReason{display:block;min-height:28px;color:#8fa39f;font-size:10px;line-height:1.5}.talentControls{display:flex;gap:8px;margin-top:10px}.talentControls button{min-height:36px;flex:1}.talentCard.locked .talentTop{opacity:.6}
.loreCard{padding:18px;border:1px dashed #adc7c532;border-radius:14px;background:#142229}.loreCard.found{border-style:solid;border-color:#d7bb7770;background:linear-gradient(140deg,#3e3b2b55,#182931)}.lorePlace{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#b6b88a}.loreCard small,.loreReference{font-size:11px;color:#c6b98f}.loreReference{padding:0 20px 18px}
.atlasCard{border:1px solid #ffffff1b;border-radius:15px;padding:20px;min-height:158px;background:radial-gradient(ellipse at 105% -25%,color-mix(in srgb,var(--land) 32%,transparent),transparent 70%),#15232b}.atlasCard.current{border-color:var(--land)}.atlasCard>span{font-size:9px;letter-spacing:.13em;color:var(--land)}.atlasCard strong{font-size:11px;color:var(--land)}
.crClasses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;width:min(100%,540px);gap:7px}.clsCard{width:auto;min-width:0;padding:10px 4px}.clsCard b{font-size:11px}.clsCard span{font-size:10px}
@media(max-width:560px){.growthHeader{padding:18px}.growthHeader h3{font-size:24px}.talentNodes,.loreGrid,.worldAtlas{grid-template-columns:1fr}.crClasses{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.clsCard b{font-size:9px}.clsCard span{font-size:8px}.clsCard .clsGlyph{width:28px;height:28px}.talentTab{flex-basis:138px}}

.clsCard b{overflow-wrap:anywhere;line-height:1.25;min-height:28px}
@media(max-width:560px){.crClasses{grid-template-columns:repeat(3,minmax(0,1fr))}.clsCard b{font-size:12px;min-height:16px}.clsCard span{font-size:10px}}

.atlasMap{max-width:100%;height:auto!important;aspect-ratio:1}.atlasExits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 24px}.atlasExit{display:flex;gap:9px;align-items:center;font-size:11px;color:#bbcac6}.atlasExit b{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;border:1px solid #b99ce266;color:#c6adeb}.atlasExit small{margin-left:auto;color:#8d9f9b;white-space:nowrap}@media(max-width:560px){.atlasExits{grid-template-columns:1fr}}

.fpsOptions{display:flex;gap:8px;padding:8px 0 12px}.fpsOptions .btn{flex:1;min-height:44px;min-width:0}

/* Discovery journal: filters stay usable without crowding the cards. */
.loreFilters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:18px 0 8px}
.loreFilters label{display:flex;flex:1 1 145px;flex-direction:column;gap:6px;font-size:11px;color:#a8bcb9}
.loreFilters select{width:100%;min-height:42px;border:1px solid #a8c4bd38;border-radius:10px;background:#16262d;color:#eee6d6;padding:8px;font:inherit;font-size:13px}
.loreFilters button{min-height:42px}.loreCount{font-size:12px;color:#a8bcb9;margin:12px 0}
@media(max-width:560px){.loreFilters label{flex-basis:calc(50% - 10px)}.loreFilters button{flex:1 1 145px}}

/* Экран создания: блоки держат свой размер, лист прокручивается.

   `.createWrap` — колоночный флекс во весь экран. Пока классов было семь,
   содержимое влезало и сжимать было нечего. С десятью сетка классов выросла
   на четыре ряда, места перестало хватать — и флекс добрал недостающее с
   того, что готово сжиматься: окно с героем ужалось с 260 точек до двух, а
   холст внутри до нуля. Ничего не «съезжало» — просто предпросмотр исчез, и
   всё под ним поехало вверх.

   `flex:none` запрещает сжатие: у блока остаётся его высота, а лишнее уходит
   в прокрутку, которая у `.createWrap` и так включена (`overflow:auto`).
   На телефоне заодно делаем окно героя пониже — иначе до имени и кнопки
   приходится листать вдвое дольше. */
.createWrap > *{flex:none}
@media(max-width:560px){.crPreview{height:min(24vh,190px)}}

/* Arrival and a journal of experiences, without undiscovered collectible spoilers. */
.arrival p{font-size:15px;line-height:1.75;color:#d5dfd8}.arrival small,.chroniclePage small{color:#b7a578;letter-spacing:.16em;font-size:10px}.arrival .arrivalHelp,.journalEmpty{color:#9eafa8;font-size:13px;line-height:1.7}.chroniclePages{display:grid;gap:16px;margin:20px 0 28px}.chroniclePage{border-left:2px solid #ac9461;padding:4px 0 4px 20px}.chroniclePage h4{font-size:19px;margin:8px 0;color:#f0e5ce}.chroniclePage p{font-size:14px;line-height:1.8;color:#bbcac3;margin:0;max-width:68ch}
.goalBar{flex-wrap:wrap}.goalBar span{white-space:normal;overflow:visible;flex:1 1 180px}.goalBar b{white-space:normal}.goalBar button{border:0;background:transparent;color:#b5c2ba;font:11px inherit;padding:9px 6px;cursor:pointer}.goalBar button:focus-visible{outline:2px solid #dcc48c}.combat-focus #goalBar.show{display:flex}
@media(max-width:560px){.goalBar{gap:3px 9px;padding:8px 10px}.goalBar b{flex:1 1 180px}.goalBar span{order:3;flex-basis:100%}.goalBar button{min-height:36px}.chroniclePage{padding-left:14px}}