/* =====================================================================
   «Забытые Земли» — тёмная тема.
   Палитра: чернильно-графитовый фон, пергаментный текст, тусклое золото
   как акцент, кровь — для HP и опасности.
   ===================================================================== */

:root {
  --bg:        #0e1012;
  --bg-2:      #14171a;
  --panel:     #181b1f;
  --panel-2:   #1e2227;
  --line:      #2b3036;
  --line-2:    #3a4048;
  --text:      #d9d3c3;
  --text-dim:  #8d8a80;
  --gold:      #c9a44a;
  --gold-dim:  #8a7235;
  --blood:     #b03a32;
  --kinovar:   #b8321f;              /* киноварь — красный славянской росписи */
  /* «Рушник»: тканый орнамент из ромбов, им отмечены швы интерфейса */
  --rushnik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Crect width='24' height='8' fill='%23180f0b'/%3E%3Crect width='24' height='1' fill='%23c9a44a' fill-opacity='.7'/%3E%3Crect y='7' width='24' height='1' fill='%23c9a44a' fill-opacity='.7'/%3E%3Cpath d='M12 1.5 16 4 12 6.5 8 4Z' fill='none' stroke='%23b8321f' stroke-width='1.2'/%3E%3Cpath d='M12 3 13 4 12 5 11 4Z' fill='%23c9a44a'/%3E%3Cpath d='M0 1.5 4 4 0 6.5M24 1.5 20 4 24 6.5' fill='none' stroke='%23b8321f' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 24px 8px repeat-x;
  --blood-dim: #5e211d;
  --moss:      #6f9a5c;
  --sky:       #6b8fb3;
  --map-bg:    #121512;
  --contour:   #2f3a2c;
  --contour-2: #3f4d3a;

  /* Полупрозрачные поверхности поверх фоновой иллюстрации */
  --glass:      rgba(22, 25, 29, .86);
  --glass-2:    rgba(14, 16, 18, .78);
  --glass-blur: blur(6px);

  --radius: 6px;
  --font: 'PT Sans', system-ui, sans-serif;
  --font-head: 'Old Standard TT', 'PT Serif', Georgia, serif;   /* дореволюционная книжная антиква */
  --font-brand: 'Ruslan Display', 'Old Standard TT', Georgia, serif;  /* стилизация под старорусскую вязь */
  --font-mono: 'PT Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); }
body {
  background: transparent;
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* ---------- Фон: иллюстрация из assets/img/backgrounds ----------
   Отдельный фиксированный слой (а не background-attachment: fixed — он не
   работает на iOS). Поверх картинки — затемнение, чтобы читался интерфейс.
   Чтобы сменить фон, замените main.jpg и main.webp в той же папке. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  background-image: var(--bg-shade), url('../img/backgrounds/main.jpg');
  background-image: var(--bg-shade), image-set(url('../img/backgrounds/main.webp') type('image/webp'), url('../img/backgrounds/main.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
/* Игровой экран: фон приглушён сильнее — главное здесь интерфейс */
.page-game {
  --bg-shade: linear-gradient(180deg, rgba(10, 12, 14, .70) 0%, rgba(10, 12, 14, .82) 60%, rgba(10, 12, 14, .92) 100%);
}
/* Страница входа: иллюстрация видна почти полностью */
.page-auth {
  --bg-shade: radial-gradient(ellipse at 50% 55%, rgba(10, 12, 14, .82) 0%, rgba(10, 12, 14, .55) 45%, rgba(10, 12, 14, .25) 100%);
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 1.6rem; color: #eee6d2; }
h2 { font-size: 1.15rem; color: var(--gold); letter-spacing: .02em; }
.panel > h2::before, .chat-head h2::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin: 0 10px 2px 2px;
  transform: rotate(45deg);
  background: var(--kinovar);
  box-shadow: 0 0 0 2px rgba(201, 164, 74, .35);
}
h3 { font-size: .85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font); }
p { margin: 0 0 .75em; }
.muted { color: var(--text-dim); }
.mono { font-family: var(--font-mono); }
.small { font-size: .85em; }
.lvl { color: var(--text-dim); font-family: var(--font-mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Панели, кнопки, формы ---------- */

.panel {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.btn {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--gold-dim); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--gold); border-color: var(--gold); color: #1a1508; font-weight: 700; }
.btn-primary:hover:not(:disabled) { background: #dbb75a; color: #1a1508; }
.btn-danger { background: var(--blood-dim); border-color: var(--kinovar); }
.btn-danger:hover:not(:disabled) { background: var(--blood); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 3px 10px; font-size: .88rem; }
.btn-lg { padding: 10px 28px; font-size: 1.05rem; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--gold); cursor: pointer; }
.linklike:hover { text-decoration: underline; }

input, select {
  font: inherit;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 8px 10px;
  width: 100%;
}
input:focus, select:focus { border-color: var(--gold-dim); outline: none; }
input[type=radio], input[type=checkbox] { width: auto; accent-color: var(--gold); margin: 0 6px 0 0; }
select { width: auto; }

.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 5px; font-size: .92rem; }
.form .hint { color: var(--text-dim); font-size: .82rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.radio-group { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.radio-group legend { font-size: .92rem; padding: 0; margin-bottom: 5px; width: 100%; }
.radio, .check { display: flex !important; align-items: center; gap: 0; cursor: pointer; }
.captcha-row { display: flex; gap: 8px; }
.form-error { color: #e98a80; background: var(--blood-dim); border: 1px solid var(--blood); border-radius: var(--radius); padding: 10px 14px; }

/* ---------- Полосы ---------- */

.bar {
  position: relative;
  height: 18px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  overflow: hidden;
  min-width: 120px;
}
.bar-fill { height: 100%; transition: width .4s ease; }
.bar-hp .bar-fill    { background: linear-gradient(90deg, #7d241e, var(--blood)); }
.bar-exp .bar-fill   { background: linear-gradient(90deg, #5e4b1d, var(--gold-dim)); }
.bar-skill .bar-fill { background: linear-gradient(90deg, #2c3f52, var(--sky)); }
.bar-mp .bar-fill    { background: linear-gradient(90deg, #121f73, #3554d8); }
.bar-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 12px/1 var(--font-mono);
  color: #f3eee2;
  text-shadow: 0 1px 2px #000;
}

/* ---------- Страница входа ---------- */

.page-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.page-auth .brand-title { text-shadow: 0 2px 12px #000, 0 0 2px #000; }
.page-auth .auth-head .muted { color: #cfc8b6; text-shadow: 0 1px 6px #000; }
.auth { width: 100%; max-width: 480px; display: grid; gap: 14px; }
.auth-head { text-align: center; }
.brand-title { font-family: var(--font-brand); font-weight: 400; font-size: 2.6rem; color: var(--gold); letter-spacing: .06em; margin-bottom: .2em; }
.auth-tabs { display: flex; gap: 4px; }
.auth-tabs .tab { flex: 1; }

.tab {
  font: inherit;
  background: var(--glass-2);
  border: 1px solid var(--line);
  color: #a7a293;
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold); border-color: var(--gold-dim); background: var(--glass); box-shadow: inset 0 -2px 0 var(--kinovar); }

/* ---------- Игровой экран ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background: rgba(14, 16, 18, .88);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid #000;
  position: sticky; top: 0; z-index: 10;
}
.topbar::after {               /* рушник под шапкой */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 8px;
  background: var(--rushnik);
  pointer-events: none;
}
.brand { font-family: var(--font-brand); font-size: 1.25rem; letter-spacing: .05em; color: var(--gold); white-space: nowrap; }
.me-summary { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.me-name { font-weight: 700; white-space: nowrap; }
.me-bars { display: grid; gap: 4px; width: min(320px, 100%); }
.me-bars .bar { height: 15px; }
.money { display: flex; gap: 14px; font-family: var(--font-mono); }
.coin::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.coin.gold::before { background: var(--gold); }
.coin.crystal::before { background: var(--sky); border-radius: 2px; transform: rotate(45deg); }

.layout {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr) 300px;
  gap: 16px;
  padding: 22px 20px 16px;
  max-width: 1600px;
  margin: 0 auto;
  align-items: start;
}
.main-col { display: grid; gap: 12px; min-width: 0; align-content: start; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs .tab { padding: 8px 16px; }
.tab-combat { color: #e98a80; border-color: var(--blood); }
.view { min-width: 0; }
.tab-pane { display: grid; gap: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Локация */
.loc-head { border-left: 3px solid var(--kinovar); }
.eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin-bottom: 4px; }
.loc-desc { color: #bdb7a7; max-width: 70ch; margin: 0; }
.banner { background: #2a2414; border: 1px solid var(--gold-dim); color: var(--gold); padding: 8px 14px; border-radius: var(--radius); }

.list { list-style: none; margin: 0; padding: 0; }
.list-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.list-row:last-child { border-bottom: 0; }
.list-row.locked .name { color: var(--text-dim); }
/* Поле брани */
.loc-head.loc-pvp {
  border-left-color: var(--kinovar);
  background:
    radial-gradient(ellipse at 100% 0, rgba(184, 50, 31, .22), transparent 60%),
    var(--glass);
}
.loc-pvp .eyebrow { color: #e0907f; }
.rival .name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.why-not { flex-basis: 100%; font-size: .8rem; color: #b98d72; }
.sub-h { margin: 16px 0 4px; }
.node-swords { fill: none; stroke: var(--kinovar); stroke-width: 2.4; stroke-linecap: round; opacity: .9; }
.node-pvp .node-dot { fill: #8f2a1c; }
.node-pvp.reachable .node-dot { fill: #d2452c; }
.lg-pvp { background: var(--kinovar); border-radius: 2px; transform: rotate(45deg); }

.tag { font-size: .72rem; color: #e98a80; border: 1px solid var(--blood); border-radius: 3px; padding: 0 5px; margin-left: 6px; }

/* Карта */
.map-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.map-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 10px; }
.world-map { display: block; width: 100%; height: auto; }
.map-bg { fill: var(--map-bg); }
.contour { fill: none; stroke: var(--contour); stroke-width: 1; }
.contour.major { stroke: var(--contour-2); stroke-width: 1.6; }
.road { stroke: #4a463a; stroke-width: 2; stroke-dasharray: 6 6; }
.road.active { stroke: var(--gold-dim); }
.node { cursor: default; }
.node-dot { fill: #6b675c; stroke: var(--map-bg); stroke-width: 3; }
.node-city .node-dot { fill: #a49c86; }
.node-dungeon .node-dot { fill: #7c4a44; }
.node-label { fill: #a29c8b; font: 15px var(--font-head); paint-order: stroke; stroke: var(--map-bg); stroke-width: 4px; }
.node.reachable { cursor: pointer; }
.node.reachable .node-dot { fill: var(--gold); }
.node.reachable .node-label { fill: #eee6d2; }
.node.reachable:hover .node-dot, .node.reachable:focus .node-dot { stroke: var(--gold); stroke-width: 6; stroke-opacity: .35; }
.node.locked { opacity: .45; }
.node.current .node-dot { fill: var(--blood); }
.node.current .node-label { fill: #fff; font-weight: 700; }
.node-halo { fill: none; stroke: var(--blood); stroke-width: 2; animation: pulse 2s ease-out infinite; transform-origin: center; }
@keyframes pulse { from { opacity: .9; r: 12; } to { opacity: 0; r: 30; } }
.legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 18px; color: var(--text-dim); font-size: .88rem; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.lg-current { background: var(--blood); }
.lg-reach { background: var(--gold); }
.lg-locked { background: #6b675c; opacity: .5; }

/* Персонаж */
.stats { list-style: none; padding: 0; margin: 0 0 10px; }
.stat-row { display: grid; grid-template-columns: 1fr 60px auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.stat-row .value { text-align: right; font-size: 1.05rem; }
.plus { color: var(--moss); }
.stepper { display: flex; gap: 4px; }
.free-points b { color: var(--gold); font-family: var(--font-mono); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.derived { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 14px; }
.derived dt { color: var(--text-dim); }
.derived dd { margin: 0; text-align: right; }
.hint-box { font-size: .88rem; color: #b5ae9c; border-left: 2px solid var(--gold-dim); padding-left: 10px; margin: 0; }
.skills { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.skill-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; }

/* Инвентарь */
.inv-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.inv-toolbar input { flex: 1; min-width: 160px; }
.weight { margin-left: auto; color: var(--text-dim); }
.weight.over { color: #e98a80; }
.item.equipped .name { color: var(--gold); }
.tag-on { color: var(--gold); border-color: var(--gold-dim); }
.inv-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; font-size: .9rem; color: var(--text-dim); }
.inv-filter b { color: var(--gold); }

/* Бой */
.combat-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.combat-head h1 { margin: 0; }
.timer { font-size: 1.4rem; color: var(--gold); }
.timer.urgent { color: #e98a80; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .5; } }
.combat-head .check { margin-left: auto; }
.arena { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
.controls { min-width: 0; }
.side { display: grid; gap: 10px; }
.fighter { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; }
.fighter.me { border-color: var(--gold-dim); }
.fighter.dead { opacity: .45; filter: grayscale(1); }
.fighter-name { font-weight: 700; }
.move-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.move-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin: 0; }
.move-form legend { color: var(--gold); padding: 0 4px; font-family: var(--font-head); }
.radio-col { display: grid; gap: 2px; }
.radio-col .radio { padding: 4px 6px; border-radius: 4px; }
.radio-col .radio.checked, .radio-col .radio:has(input:checked) { background: var(--panel-2); color: #fff; }
.action-pick { display: flex; align-items: center; gap: 8px; margin: 12px 0; min-width: 0; }
/* min-width: 0 и width: 100% — иначе длинные названия заклинаний растягивают список за край панели */
.action-pick select { flex: 1 1 0; min-width: 0; width: 100%; text-overflow: ellipsis; }
.waiting { text-align: center; }
.combat-result { text-align: center; }
.combat-result.win h2 { color: var(--gold); font-size: 1.6rem; }
.combat-result.lose h2 { color: #e98a80; font-size: 1.6rem; }
.combat-log { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow-y: auto; font-size: .93rem; }
.combat-log li { padding: 3px 0; border-bottom: 1px solid #1f2328; }
.combat-log .round-sep { color: var(--gold-dim); font-family: var(--font-head); border: 0; padding-top: 10px; }

/* Чат */
.chat { position: sticky; top: 72px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; height: calc(100vh - 210px); min-height: 420px; padding: 14px; }
.chat-head h2 { margin: 0; }
.players { list-style: none; padding: 0; margin: 0; max-height: 140px; overflow-y: auto; font-size: .92rem; }
.players li { padding: 2px 0; }
.chat-log { list-style: none; padding: 0; margin: 0; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 8px; font-size: .92rem; min-height: 0; }
.msg { padding: 3px 0; overflow-wrap: anywhere; }
.msg time { margin-right: 6px; font-size: .8rem; }
.msg-name { margin-right: 6px; font-weight: 700; }
.msg-name::after { content: ':'; color: var(--text-dim); }
.msg.mine .msg-name { color: var(--sky); }
.msg.mention { background: #2a2414; border-radius: 3px; }
.chat-form { display: flex; gap: 6px; }

/* Уведомления */
#toasts { position: fixed; right: 16px; bottom: 140px; display: grid; gap: 8px; z-index: 100; }
.toast { background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 10px 14px; max-width: 340px; box-shadow: 0 6px 20px #0009; transition: opacity .4s, transform .4s; }
.toast-error { border-left-color: var(--blood); }
.toast-ok { border-left-color: var(--moss); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* =====================================================================
   HUD: шары здоровья и маны
   Собственная CSS-графика: железная оправа с заклёпками и золотым кантом,
   тёмная стеклянная колба, жидкость с волной и блик стекла.
   Уровень жидкости — переменная --level (0–100%), её ставит game.js.
   ===================================================================== */

.page-game { padding-bottom: 128px; }

.hud {
  --orb: 124px;
  --orb-inner: calc(var(--orb) - 18px);
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: var(--orb) minmax(0, 520px) var(--orb);
  justify-content: center;
  align-items: end;
  gap: 22px;
  padding: 0 16px 8px;
  pointer-events: none;            /* пустые места полосы не перехватывают клики */
}
.hud > * { pointer-events: auto; }

/* Рушник по краю полки */
.hud::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 64px;
  height: 8px;
  z-index: -1;
  background: var(--rushnik);
  pointer-events: none;
}
/* Каменная полка, на которой стоят шары */
.hud::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, .35) 46px 48px),
    linear-gradient(180deg, #2b2520 0%, #1a1612 45%, #0c0a08 100%);
  border-top: 1px solid #5c4b28;
  box-shadow: 0 -1px 0 #000, 0 -14px 30px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(201, 164, 74, .3);
}

.orb {
  --level: 100%;
  position: relative;
  width: var(--orb);
  height: var(--orb);
  margin-bottom: 4px;
}

/* Оправа: кованое кольцо, золотой кант, четыре заклёпки */
.orb-socket {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 9px;
  background:
    conic-gradient(from 200deg, #6a5d4f, #2a251f 12%, #776a59 25%, #221e19 38%, #6a5d4f 50%, #2a251f 62%, #776a59 75%, #221e19 88%, #6a5d4f);
  box-shadow:
    0 0 0 2px #0a0907,
    0 0 0 3px #7a6432,
    0 0 0 5px #0a0907,
    0 10px 26px rgba(0, 0, 0, .85),
    0 0 26px var(--glow),
    inset 0 2px 3px rgba(255, 255, 255, .18),
    inset 0 -3px 4px rgba(0, 0, 0, .6);
  transition: box-shadow .6s;
}
.orb-socket::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  pointer-events: none;
  --rivet: radial-gradient(circle, #d9c18a 0 1.2px, #8a744a 1.8px, #2a2218 2.8px, transparent 3.4px);
  background:
    var(--rivet) 50% 0 / 8px 8px no-repeat,
    var(--rivet) 50% 100% / 8px 8px no-repeat,
    var(--rivet) 0 50% / 8px 8px no-repeat,
    var(--rivet) 100% 50% / 8px 8px no-repeat;
}

/* Стеклянная колба: тёмная пустота сверху */
.orb-glass {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: translateZ(0);        /* корректная обрезка по кругу в Safari */
  background: var(--empty);
  box-shadow: inset 0 0 0 1px #000, inset 0 6px 14px rgba(0, 0, 0, .9);
}

/* Жидкость: свет идёт от поверхности, поэтому даже 10% остаются яркими */
.orb-liquid {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--level);
  background:
    radial-gradient(ellipse 75% 60px at 38% 0, var(--liquid-light), transparent 75%),
    linear-gradient(180deg, var(--liquid-top) 0%, var(--liquid-mid) 55%, var(--liquid-deep) 100%);
  transition: height .4s ease-out;   /* уровень просто опускается; уберите строку, чтобы менялся мгновенно */
}
/* Блик стекла и затемнение к краям — объём сферы */
.orb-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 22% at 36% 22%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 70%, transparent 72%),
    radial-gradient(ellipse 60% 22% at 50% 96%, rgba(255, 255, 255, .14), transparent 70%),
    radial-gradient(circle at 50% 46%, transparent 52%, rgba(0, 0, 0, .55) 100%);
}
.orb-shine::after {
  content: '';
  position: absolute;
  top: 19%; left: 29%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .7);
}

/* Цифры поверх шара */
.orb-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--font-mono);
  color: #f6efe0;
  text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 8px #000;
  pointer-events: none;
  line-height: 1.1;
}
.orb-cur { font-size: 1.25rem; }
.orb-max { font-size: .72rem; opacity: .8; }

.orb-hp {
  --liquid-light: rgba(255, 150, 120, .55);
  --liquid-top: #e2301f;
  --liquid-mid: #a8130d;
  --liquid-deep: #5c0606;
  --empty: radial-gradient(circle at 50% 35%, #1d0f0e 0%, #0b0505 70%);
  --glow: rgba(200, 30, 20, .28);
}
.orb-mp {
  --liquid-light: rgba(150, 175, 255, .55);
  --liquid-top: #3d5cf0;
  --liquid-mid: #1c2bb0;
  --liquid-deep: #0a1060;
  --empty: radial-gradient(circle at 50% 35%, #0f1120 0%, #05060c 70%);
  --glow: rgba(50, 80, 240, .28);
}

/* Мало здоровья/маны (меньше 25%) — оправа тревожно пульсирует */
.orb.low .orb-socket { animation: orb-alarm 1.1s ease-in-out infinite; }
@keyframes orb-alarm { 50% { box-shadow: 0 0 0 2px #0a0907, 0 0 0 3px #7a6432, 0 0 0 5px #0a0907, 0 10px 26px rgba(0,0,0,.85), 0 0 34px 6px var(--glow-hot, rgba(255, 40, 30, .7)); } }
.orb-mp.low { --glow-hot: rgba(70, 110, 255, .7); }

/* Табличка между шарами */
.hud-plate {
  display: grid;
  gap: 5px;
  padding: 0 4px 6px;
  align-self: end;
}
.hud-title {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  color: #e9dab4;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-plate .bar { height: 13px; border-color: #4a3e28; }
.hud-plate .bar-text { font-size: 10px; }
.hud-legend { display: flex; justify-content: space-between; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.hud-hp { color: #d9544a; }
.hud-mp { color: #6e88f0; }

@media (prefers-reduced-motion: reduce) {
  .orb.low .orb-socket { animation: none; }
  .orb-liquid { transition: none; }
}

/* =====================================================================
   ОКНО ГЕРОЯ — всегда на экране слева
   Тёмное дерево, рушники сверху и снизу, аватар под аркой-наличником,
   уровень на киноварном медальоне. Слоты: пустые — тёмные с золотым
   кантом, надетые — янтарные, «на вырост» — приглушённые.
   ===================================================================== */

.hero {
  --slot: 58px;
  position: sticky;
  top: 72px;
  align-self: start;
  max-height: calc(100vh - 212px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #5a4126 transparent;
  padding: 18px 12px 16px;
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .012) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, rgba(46, 31, 19, .94), rgba(22, 16, 12, .96));
  border: 1px solid #5e4428;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 34px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .5);
}
.hero::before, .hero::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  height: 8px;
  background: var(--rushnik);
  pointer-events: none;
}
.hero::before { top: 5px; }
.hero::after  { bottom: 5px; }

.hero-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.hero-name { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: #f2e4c2; line-height: 1.15; }
.hero-class { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.hero-toggle { display: none; }
.hero-bars { display: grid; gap: 4px; margin: 8px 0 12px; }
.hero-bars .bar { height: 16px; border-color: #4a3620; }

.hero-doll {
  display: grid;
  grid-template-columns: var(--slot) minmax(0, 1fr) var(--slot);
  grid-template-areas:
    "neck   head   shoulders"
    "weapon avatar body"
    "gloves avatar cloak"
    "belt   avatar shield"
    "legs   rings  feet";
  gap: 7px;
  align-items: center;
  justify-items: center;
}
.pslot-neck { grid-area: neck; }       .pslot-head { grid-area: head; }     .pslot-shoulders { grid-area: shoulders; }
.pslot-weapon { grid-area: weapon; }   .pslot-body { grid-area: body; }
.pslot-gloves { grid-area: gloves; }   .pslot-cloak { grid-area: cloak; }
.pslot-belt { grid-area: belt; }       .pslot-shield { grid-area: shield; }
.pslot-legs { grid-area: legs; }       .pslot-feet { grid-area: feet; }

/* Аватар под аркой-наличником */
.hero-avatar {
  grid-area: avatar;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: calc(var(--slot) * 3 + 14px);
  border-radius: 50% 50% 6px 6px / 20% 20% 6px 6px;
  overflow: hidden;
  background: #120d0a;
  border: 2px solid #8a6a36;
  box-shadow: 0 0 0 2px #120c08, 0 0 0 3px var(--kinovar), inset 0 0 24px #000;
}
.hero-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-level {
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #e45a40, #951b10 58%, #4c0905);
  border: 2px solid #d9b45c;
  box-shadow: 0 0 0 2px #1a0e08, 0 3px 10px rgba(0, 0, 0, .75);
  font: 700 1.1rem/1 var(--font-head);
  color: #fff3d6;
  text-shadow: 0 1px 2px #000;
}

/* Слот */
.pslot {
  position: relative;
  width: var(--slot);
  height: var(--slot);
  padding: 0;
  display: grid;
  place-items: center;
  font: inherit;
  color: #7f6849;
  cursor: pointer;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 38%, #2d2119, #130e0b 75%);
  border: 1px solid #6e5432;
  box-shadow: inset 0 0 0 2px #0d0907, inset 0 0 0 3px rgba(201, 164, 74, .22), 0 2px 5px rgba(0, 0, 0, .6);
  transition: border-color .15s, color .15s, box-shadow .15s, opacity .15s;
}
.pslot::after {                         /* ромбик-навершие, как на резном наличнике */
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: #6e5432;
  border: 1px solid #0d0907;
}
.pslot:hover, .pslot:focus-visible { border-color: var(--gold); color: var(--gold); }
.pslot.filled {
  color: #f3d58c;
  border-color: #c9a44a;
  background: radial-gradient(circle at 50% 32%, #8a5414, #3d230a 78%);
  box-shadow: inset 0 0 0 2px #1a0f06, inset 0 0 0 3px rgba(255, 214, 120, .35), 0 0 10px rgba(201, 120, 30, .25), 0 2px 5px rgba(0, 0, 0, .6);
}
.pslot.filled::after { background: #c9a44a; }
.pslot.later { opacity: .5; cursor: help; }
.pslot.later:hover { opacity: .8; }
.pslot img { width: 86%; height: 86%; object-fit: contain; }
.slot-glyph { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pslot-fallback { display: grid; justify-items: center; gap: 2px; width: 100%; padding: 0 3px; }
.pslot-fallback .slot-glyph { width: 26px; height: 26px; }
.pslot-name { max-width: 100%; font-size: .56rem; line-height: 1.05; color: #fbe6b2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pslot.small, .pslot.mid { width: 100%; height: auto; aspect-ratio: 1; }
.pslot.small .slot-glyph { width: 62%; height: 62%; }
.pslot.small::after { width: 5px; height: 5px; top: -3px; }

.hero-rings { grid-area: rings; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; align-self: center; }

.hero-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #a8895a;
}
.hero-row-title::before, .hero-row-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #6e5432, transparent); }
.hero-belt { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hero-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: .78rem; font-family: var(--font-mono); }

/* Портрет противника в бою: та же резная рамка, что у окна героя, но без слотов */
.foe {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 18px 12px 16px;
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .012) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, rgba(52, 24, 18, .94), rgba(22, 13, 11, .96));
  border: 1px solid #6a3a26;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 34px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .5);
}
.foe::before, .foe::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  height: 8px;
  background: var(--rushnik);
  pointer-events: none;
}
.foe::before { top: 5px; }
.foe::after  { bottom: 5px; }
.foe-head { margin-top: 4px; }
.foe .hero-bars { margin: 0; }
.foe-avatar { grid-area: auto; justify-self: center; width: 100%; max-width: 210px; min-height: 0; aspect-ratio: 3 / 4; border-color: #8a4a2a; }   /* без grid-area из окна героя */
.foe-fallen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 4, 3, .6);
  font: 700 1.2rem var(--font-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e7c48a;
  text-shadow: 0 1px 3px #000;
}
.foe.dead .foe-avatar img { filter: grayscale(1) brightness(.6); }

/* ---------- Выбор класса ---------- */

.class-field { border: 0; padding: 0; margin: 0; }
.class-field legend { font-size: .92rem; padding: 0; margin-bottom: 6px; }
.class-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
.class-chip {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px;
  font: inherit;
  font-size: .85rem;
  color: var(--text-dim);
  background: var(--glass-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.class-chip:hover { color: var(--text); border-color: var(--gold-dim); }
.class-chip.active { color: var(--gold); border-color: var(--gold); background: rgba(201, 164, 74, .1); box-shadow: inset 0 0 12px rgba(201, 164, 74, .15); }
.sigil { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sigil-lg { width: 30px; height: 30px; color: var(--gold); }
.class-card { margin-top: 10px; padding: 12px 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-radius: var(--radius); }
.class-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.class-card-head h3 { margin: 0; font-family: var(--font-head); font-size: 1.15rem; color: #eee6d2; text-transform: none; letter-spacing: 0; }
.class-desc { color: #bdb7a7; font-size: .92rem; margin-bottom: 8px; }
.class-facts { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 3px; font-size: .88rem; }
.class-facts li { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.c-hp { color: #e06b5f; }
.c-mp { color: #7d95f5; }
.class-passive { margin: 0; font-size: .9rem; color: var(--gold); border-left: 2px solid var(--gold-dim); padding-left: 10px; }
.class-hint { font-size: .88rem; margin: 10px 0 0; }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 7, .72); }
.modal-card { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 12px; }
.modal-card .actions { justify-content: flex-end; }

/* =====================================================================
   РЕМЁСЛА И ТОРГОВЛЯ: лавки, кузница, рудная жила
   ===================================================================== */

.modal-wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h1 { margin: 0; }
.modal-x { font-size: 1rem; line-height: 1; padding: 6px 10px; }
.modal-body { display: grid; gap: 12px; }

.item-props { display: block; font-size: .8rem; margin-top: 1px; }
.shop-desc { margin: 0; color: #bdb7a7; }
.shop-desc b { color: var(--gold); font-weight: 700; }
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tabs-inline { display: flex; gap: 6px; }
.shop-list .list-row, .smelt-row, .shop-entry { grid-template-columns: minmax(0, 1fr) auto auto; }
.shop-row .price { color: var(--gold); white-space: nowrap; }
.shop-row.too-dear .price { color: #b98d72; }
.shop-act { display: flex; align-items: center; gap: 6px; }
input.qty { width: 64px; padding: 4px 6px; text-align: center; font-family: var(--font-mono); }

.forge-skills { display: flex; gap: 22px; flex-wrap: wrap; color: var(--text-dim); }
.forge-skills b { color: var(--gold); }
.forge-sec { border-top: 1px solid var(--line); padding-top: 12px; }
.forge-sec h2 { margin-bottom: 4px; }
.recipes { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.recipe {
  display: grid; gap: 4px; align-content: start;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.recipe.ready { border-color: var(--gold-dim); box-shadow: inset 0 0 14px rgba(201, 164, 74, .08); }
.recipe.too-hard { opacity: .6; }
.recipe-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.recipe-head .name { font-weight: 700; color: #eee6d2; }
.recipe-chance { color: var(--gold); }
.recipe-req { color: var(--text-dim); }
.recipe-req.bad { color: #b98d72; }
.mats { list-style: none; padding: 0; margin: 2px 0 6px; font-size: .85rem; }
.mats .ok b { color: var(--moss); }
.mats .bad b { color: #e0907f; }
.recipe .btn { justify-self: start; }

.mine-panel { display: grid; gap: 10px; align-content: start; border-left: 3px solid #4f7a52; }
.forest-panel { border-left-color: #6b8f3a; background: radial-gradient(ellipse at 0 0, rgba(70, 110, 40, .18), transparent 60%), var(--glass); }
.forest-panel .mine-log .ore { color: #c8d99b; }
.mine-btn { justify-self: start; min-width: 200px; }
.mine-log { list-style: none; padding: 0; margin: 0; font-size: .9rem; display: grid; gap: 2px; }
.mine-log li { padding: 2px 0; border-bottom: 1px dashed var(--line); }
.mine-log li:first-child { color: #eee6d2; }
.mine-log .ore { color: #a9d39b; }
.mine-log .miss { color: var(--text-dim); }
.mine-log .ambush { color: #e98a80; font-weight: 700; }
.tag-way { color: #a9d39b; border-color: #4f7a52; }
.exit-sub .name { color: #cfe3c6; }

/* ---------- Адаптивность ---------- */

@media (max-width: 1180px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr); }
  .chat { grid-column: 1 / -1; position: static; height: 460px; }
  .arena { grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr); }
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .me-summary { order: 3; flex-basis: 100%; }
  .layout { grid-template-columns: 1fr; padding: 18px 16px 12px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .hero { position: relative; top: auto; max-height: none; }
  .hero-toggle { display: inline-block; }
  .hero.collapsed .hero-body { display: none; }
  .hero.collapsed .hero-bars { margin-bottom: 0; }
  .hud::after { bottom: 50px; }
  .tabs .tab { white-space: nowrap; }
  .grid2, .row2, .move-cols { grid-template-columns: 1fr; }
  .shop-list .list-row, .smelt-row, .shop-entry { grid-template-columns: 1fr; gap: 6px; }
  .mine-btn { justify-self: stretch; }
  .arena { grid-template-columns: 1fr; }
  .side-enemy { order: -1; }                       /* на телефоне противник над панелью хода */
  .foe { grid-template-columns: 96px 1fr; align-items: center; }
  .foe > * { grid-column: 2; }
  .foe-avatar { grid-column: 1; grid-row: 1 / span 2; }
  .skill-row { grid-template-columns: 1fr; gap: 4px; }
  .node-label { font-size: 30px; stroke-width: 6px; }
  .page-game { padding-bottom: 100px; }
  .hud { --orb: 88px; gap: 10px; padding: 0 8px 6px; }
  .hud::before { height: 50px; }
  .hud-legend { display: none; }
  .hud-title { font-size: .85rem; }
  .orb-cur { font-size: 1rem; }
  #toasts { bottom: 110px; }   /* карта масштабируется — подписи крупнее */
  .node-dot { r: 14px; }
}

/* =====================================================================
   Админ-панель в игре: ссылка «Управа» и баннер событий (миграция 005).
   Если вы правили style.css у себя — просто допишите этот блок в конец.
   ===================================================================== */
.staff-link { color: var(--gold); border-color: var(--gold-dim); text-decoration: none; }
.events-bar {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 16px 20px 0;
}
.event-chip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(201, 164, 74, .1); border: 1px solid var(--gold-dim);
  font-size: .9rem;
}
.event-chip b { color: var(--gold); font-family: var(--font-head); }
.event-mult { color: var(--moss); font-weight: 700; }

/* =====================================================================
   Карта-картинка (assets/img/map/world.webp). Этот блок перекрывает
   прежние правила раздела «Карта»: светлый пергамент вместо тёмной
   подложки, поэтому метки — тёмные чернила. Размеры — в пикселях картинки
   (1920×1080), на экране они уменьшаются вместе с картой.
   ===================================================================== */
.map-head .map-toggle { margin-left: auto; }
.map-wrap { background: #74675a; }
.map-bg { fill: #74675a; }
.road { stroke: #4b3b28; stroke-width: 4; stroke-dasharray: 12 10; stroke-linecap: round; opacity: .75; }
.road.active { stroke: var(--kinovar); opacity: .95; }
.node-dot { fill: #3f3a31; stroke: #efe6cf; stroke-width: 5; }
.node-city .node-dot { fill: #26231e; }
.node-dungeon .node-dot { fill: #5e2a24; }
.node-label {
  fill: #2a231a; font: 700 30px var(--font-head);
  paint-order: stroke; stroke: rgba(239, 230, 207, .92); stroke-width: 8px; stroke-linejoin: round;
}
.node.reachable .node-dot { fill: #b8862a; }
.node.reachable .node-label { fill: #120d06; }
.node.reachable:hover .node-dot, .node.reachable:focus .node-dot { stroke: #b8862a; stroke-width: 12; stroke-opacity: .45; }
.node.reachable:focus { outline: none; }
.node.locked { opacity: .5; }
.node.current .node-dot { fill: var(--kinovar); }
.node.current .node-label { fill: #5a160c; font-weight: 700; }
.node-halo { stroke: var(--kinovar); stroke-width: 4; animation: map-pulse 2s ease-out infinite; }
@keyframes map-pulse { from { opacity: .9; r: 18; } to { opacity: 0; r: 50; } }
@media (prefers-reduced-motion: reduce) { .node-halo { animation: none; opacity: .6; } }
.node-swords { stroke-width: 5; }
.node-pvp .node-dot { fill: #8f2a1c; }
.node-pvp.reachable .node-dot { fill: #d2452c; }

/* Развёрнутая карта — поверх всего экрана */
.map-panel.map-full {
  position: fixed; inset: 12px; z-index: 60;
  display: flex; flex-direction: column;
  background: rgba(14, 16, 18, .97);
}
.map-full .map-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.map-full .world-map { width: 100%; height: 100%; }
body.map-open { overflow: hidden; }

/* Расписная карта: дороги светлыми штрихами с тёмной каймой — видны и на лесе, и на песке */
.roads { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .85)); }
.road { stroke: #f3e7c8; opacity: .8; }
.road.active { stroke: #ff6b4a; opacity: 1; }
.roads { display: none; }

/* Правка точек на карте (только админ): перетаскивание мышкой */
.map-tools { margin-left: auto; display: flex; gap: 8px; }
.map-head .map-tools .map-toggle { margin-left: 0; }
.map-coord { color: var(--gold); font-size: .9rem; }
.world-map.editing { touch-action: none; cursor: crosshair; }
.world-map.editing .node { cursor: grab; }
.world-map.editing .node.dragging { cursor: grabbing; }
.world-map.editing .node-dot { stroke: var(--gold); stroke-width: 6; }
.world-map.editing .node-halo { display: none; }
/* Широкая карта (1916×821) в узкой колонке: подписи и точки крупнее */
.node-label { font-size: 40px; stroke-width: 10px; }
.node-dot { stroke-width: 6; }

/* =====================================================================
   Личные сообщения: конверт в шапке, кнопка «написать» в чате, окно грамот
   ===================================================================== */
.money { align-items: center; }
.mail-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 34px; height: 30px; padding: 0; cursor: pointer;
  color: var(--text-dim); background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius);
}
.mail-btn:hover, .mail-btn:focus-visible { color: var(--gold); border-color: var(--gold-dim); }
.mail-btn.has-mail { color: var(--gold); }
.mail-badge {
  position: absolute; top: -7px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #d2311f; color: #fff; box-shadow: 0 0 0 2px #0e1012;
  font: 700 11px/18px var(--font); text-align: center;
}
.pm-write {
  display: inline-grid; place-items: center; vertical-align: -2px; margin-left: 6px; padding: 2px 3px;
  color: var(--text-dim); background: none; border: 0; border-radius: 4px; cursor: pointer; opacity: .7;
}
.pm-write:hover, .pm-write:focus-visible { color: var(--gold); opacity: 1; background: rgba(201, 164, 74, .1); }
.chat-log .pm-write { margin-left: 2px; margin-right: 4px; }

.mail-modal { max-width: 900px; }
.mail-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; min-height: 420px; }
.mail-side { border-right: 1px solid var(--line); padding-right: 12px; min-width: 0; }
.mail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.mail-dialog {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; cursor: pointer;
  font: inherit; color: var(--text); background: none; border: 1px solid transparent; border-radius: var(--radius);
}
.mail-dialog:hover { background: rgba(255, 255, 255, .03); }
.mail-dialog.active { border-color: var(--gold-dim); background: rgba(201, 164, 74, .08); }
.mail-dialog.unread b { color: var(--gold); }
.mail-dialog-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mail-dialog-head time { margin-left: auto; font-size: .78rem; white-space: nowrap; }
.mail-preview { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d2311f; color: #fff; font: 700 11px/18px var(--font); text-align: center; }
.mail-thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; min-width: 0; max-height: 64vh; }
.mail-thread-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mail-thread-head b { font-family: var(--font-head); font-size: 1.1rem; }
.mail-msgs { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.mail-msg { max-width: 78%; align-self: flex-start; display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px 10px 10px 2px; background: var(--panel-2); border: 1px solid var(--line); }
.mail-msg.mine { align-self: flex-end; border-radius: 10px 10px 2px 10px; background: rgba(201, 164, 74, .12); border-color: var(--gold-dim); }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-msg time { font-size: .75rem; justify-self: end; }
.mail-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.mail-form textarea {
  font: inherit; color: var(--text); background: var(--bg-2); resize: vertical; min-height: 44px;
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 10px;
}
.mail-form textarea:focus { border-color: var(--gold-dim); outline: none; }
.mail-empty, .mail-none { padding: 12px 4px; }
.adm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
.adm-dot.on { background: var(--moss); box-shadow: 0 0 0 3px rgba(111, 154, 92, .2); }
@media (max-width: 700px) {
  .mail-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mail-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; }
  .mail-list { max-height: 26vh; }
  .mail-thread { max-height: none; }
  .mail-msgs { max-height: 40vh; }
}

/* =====================================================================
   Смайлы: кнопка у поля ввода и панель над ней (чат и личные сообщения)
   ===================================================================== */
.emoji-wrap { position: relative; display: inline-flex; align-self: stretch; }
.emoji-btn {
  font-size: 1.15rem; line-height: 1; padding: 0 8px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  filter: grayscale(.6); opacity: .85;
}
.emoji-btn:hover, .emoji-btn[aria-expanded="true"] { filter: none; opacity: 1; border-color: var(--gold-dim); }
.emoji-panel {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 70;
  width: 284px; max-width: calc(100vw - 32px); max-height: 300px; overflow-y: auto;
  padding: 10px; display: grid; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 10px 30px #000c;
}
.emoji-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-dim); margin-bottom: 2px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji {
  font-size: 1.25rem; line-height: 1; padding: 5px 0; cursor: pointer;
  background: none; border: 0; border-radius: 4px;
}
.emoji:hover, .emoji:focus-visible { background: rgba(201, 164, 74, .15); outline: none; }
.emoji-hint { font-size: .78rem; }
.mail-form { grid-template-columns: minmax(0, 1fr) auto auto; }

/* =====================================================================
   Обмен на Базаре: значок лавки у имени и окно обмена
   ===================================================================== */
.trade-btn { margin-left: 2px; }
.trade-btn:hover, .trade-btn:focus-visible { color: #e0b552; }
.trade-modal { max-width: 860px; }
.trade-help { font-size: .86rem; margin: 0; }
.trade-note { margin: 0; padding: 8px 12px; border-left: 3px solid var(--kinovar); background: rgba(184, 50, 31, .1); border-radius: 4px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trade-col { display: grid; gap: 10px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0, 0, 0, .18); min-width: 0; }
.trade-col.theirs { border-color: rgba(201, 164, 74, .35); }
.trade-col h3 { margin: 0; color: var(--gold); }
.trade-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: slot; }
.trade-slot {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px;
  border: 1px dashed var(--line-2); border-radius: var(--radius); font-size: .9rem;
}
.trade-slot::before { counter-increment: slot; content: counter(slot); color: var(--text-dim); font: .75rem var(--font-mono); width: 12px; }
.trade-slot.filled { border-style: solid; background: var(--panel-2); }
.trade-item-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.trade-qty { color: var(--gold); font-family: var(--font-mono); }
.trade-remove { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: .9rem; padding: 2px 6px; border-radius: 4px; }
.trade-remove:hover { color: #f0a090; background: rgba(184, 50, 31, .15); }
.trade-gold { display: flex; align-items: center; gap: 10px; }
.trade-gold-input { width: 110px; font-family: var(--font-mono); }
.trade-flag { font-size: .88rem; }
.trade-flag.ok { color: var(--gold); }
.trade-flag.accept { color: var(--moss); font-weight: 700; }
.trade-bag h3 { margin: 0; }
.trade-inv { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; max-height: 210px; overflow-y: auto; }
.trade-inv li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.trade-inv input.qty { width: 70px; }
.trade-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.trade-check { display: flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 700; }
.trade-check input { width: 18px; height: 18px; }
.trade-go { min-width: 140px; }
.trade-actions .btn-ghost { margin-left: auto; }
.trade-final { display: grid; gap: 10px; justify-items: start; padding: 10px 0; font-size: 1.05rem; }
.trade-final.done p:first-child { color: var(--moss); font-weight: 700; }
@media (max-width: 700px) {
  .trade-cols { grid-template-columns: minmax(0, 1fr); }
  .trade-actions .btn-ghost { margin-left: 0; }
}

/* =====================================================================
   БАШНЯ МАГА: сбор отряда, лабиринт, элита в бою
   ===================================================================== */
.raid-panel h3.sub-h { margin-top: 14px; }
.raid-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.raid-last { margin: 8px 0; padding: 8px 12px; border-radius: 4px; border-left: 3px solid var(--gold-dim); background: rgba(201, 164, 74, .08); }
.raid-last.failed, .raid-last.expired { border-color: var(--kinovar); background: rgba(184, 50, 31, .1); }
.raid-last.done { border-color: var(--moss); background: rgba(111, 154, 92, .12); }
.raid-members { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.raid-member { display: grid; gap: 3px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.raid-member:last-child { border-bottom: 0; }
.raid-member.me .raid-mname { color: #f2e4c2; }
.raid-crown { color: var(--gold); margin-right: 4px; }
.tag.tag-idle { color: var(--gold); border-color: var(--gold-dim); }
.raid-log { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: .88rem; max-height: 260px; overflow-y: auto; }
.raid-log time { font-size: .78rem; }

.raid-maze-wrap { display: grid; gap: 16px; }
.raid-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin-bottom: 12px; }
.raid-floor { font-family: var(--font-head); font-size: 1.25rem; }
.raid-floor b { color: var(--gold); }
.raid-clock { font-size: 1.1rem; color: var(--text); }
.raid-clock .urgent { color: #f0a090; }
.raid-win { color: var(--moss); font-weight: 700; }

.maze-box { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.maze {
  display: grid; width: min(100%, 420px); aspect-ratio: 1;
  background: #0a0b0c; border: 2px solid var(--line-2); border-radius: 4px; padding: 3px; gap: 0;
}
.maze .cell {
  position: relative; display: grid; place-items: center; min-width: 0;
  border: 2px solid transparent; font-size: clamp(.9rem, 4vw, 1.4rem); line-height: 1;
}
.maze .cell.unknown { background: transparent; }
.maze .cell.fog { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 7px); }
.maze .cell.seen { background: #2e3338; }
.maze .cell.wn { border-top-color: var(--gold-dim); }
.maze .cell.we { border-right-color: var(--gold-dim); }
.maze .cell.ws { border-bottom-color: var(--gold-dim); }
.maze .cell.ww { border-left-color: var(--gold-dim); }
.maze .cell.here { background: #3a3220; box-shadow: inset 0 0 0 1px var(--gold); }
.maze .cell.step { cursor: pointer; }
.maze .cell.step:hover { background: #2f3a2c; }
.maze .mk-party { color: var(--gold); }
.maze .mk-pack { color: #e98a80; }
.maze .mk-boss { color: #ff6b5a; text-shadow: 0 0 8px rgba(255, 80, 60, .6); }
.maze .mk-stairs { color: var(--sky); }

.raid-side { display: grid; gap: 12px; justify-items: center; }
.raid-pad { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); gap: 4px; }
.raid-dir { padding: 0; font-size: 1.1rem; }
.raid-n { grid-column: 2; grid-row: 1; }
.raid-w { grid-column: 1; grid-row: 2; }
.raid-e { grid-column: 3; grid-row: 2; }
.raid-s { grid-column: 2; grid-row: 3; }
.raid-note { margin: 12px 0 0; padding: 8px 12px; border-radius: 4px; }
.raid-note.fight { border-left: 3px solid var(--kinovar); background: rgba(184, 50, 31, .12); }
.raid-note.win { border-left: 3px solid var(--moss); background: rgba(111, 154, 92, .12); }
.raid-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }

/* Элитные монстры и боссы в бою: золотая (у босса — огненная) рамка */
.foe.foe-elite { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 164, 74, .35), 0 0 18px rgba(201, 164, 74, .2); }
.foe.foe-elite .hero-name { color: #f3cf6e; }
.foe.foe-elite .hero-class { color: #f3cf6e; }
.foe.foe-boss { border-color: #d0452f; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(208, 69, 47, .5), 0 0 24px rgba(208, 69, 47, .32); }
.foe.foe-boss .hero-name { color: #ff8a70; }
.foe.foe-boss .hero-class { color: #ff8a70; letter-spacing: .3em; }

/* Союзники в групповом бою */
.allies { margin-top: 16px; }
.ally-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.ally-list li { display: grid; gap: 3px; }
.ally-list li.dead { opacity: .5; }

@media (max-width: 560px) {
  .maze-box { flex-direction: column; align-items: stretch; }
  .maze { width: 100%; }
}

/* =====================================================================
   БОЛЬШИЕ ЭКРАНЫ (2K, 4K): весь интерфейс пропорционально увеличивается.
   За основу взят Full HD (1920 точек): на 2560×1440 игра выглядит так же,
   как на 1920×1080, только крупнее и чётче. Множитель --z хранится в
   переменной, чтобы высоты «по экрану» (vh) не вылезали за край.
   Старые браузеры без поддержки zoom просто покажут обычный размер.
   ===================================================================== */
:root { --z: 1; }
@media (min-width: 2100px) { :root { --z: 1.1; } }
@media (min-width: 2300px) { :root { --z: 1.2; } }
@media (min-width: 2500px) { :root { --z: 1.333; } }   /* 2560×1440 → как 1920×1080 */
@media (min-width: 3000px) { :root { --z: 1.5; } }
@media (min-width: 3400px) { :root { --z: 1.75; } }
@media (min-width: 3800px) { :root { --z: 2; } }        /* 3840×2160 (4K) → как 1920×1080 */

@media (min-width: 2100px) {
  body { zoom: var(--z); }
  /* Всё, что считается от высоты окна, делим на множитель */
  .page-auth { min-height: calc(100vh / var(--z)); }
  .hero { max-height: calc(100vh / var(--z) - 212px); }
  .chat { height: calc(100vh / var(--z) - 210px); }
  .modal-card { max-height: calc(100vh / var(--z) - 32px); }
  .mail-list { max-height: calc(60vh / var(--z)); }
  .mail-thread { max-height: calc(64vh / var(--z)); }
}
/* =====================================================================
   ОКНО ГЕРОЯ: узорные полосы сверху и снизу всегда у края окна.
   Раньше они стояли на месте, а содержимое при прокрутке наезжало на нижнюю
   полосу. Теперь полосы «прилипают» к краям, а слоты уезжают под них.
   ===================================================================== */
.hero::before, .hero::after {
  position: sticky;
  display: block;
  left: auto; right: auto;
  margin-left: -4px; margin-right: -4px;
  z-index: 3;
}
.hero::before { top: -13px; margin-top: -13px; margin-bottom: 5px; }   /* -13 = 5 px от края минус отступ окна 18 px */
.hero::after  { bottom: -11px; margin-top: 8px; margin-bottom: -11px; } /* -11 = 5 px от края минус отступ окна 16 px */

/* =====================================================================
   КАРТОЧКА ХАРАКТЕРИСТИК
   ===================================================================== */
.stat-row { grid-template-columns: 1fr auto auto; }
.stat-row .value { white-space: nowrap; min-width: 60px; }
.mods { list-style: none; margin: 10px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; }
.mods li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--line); font-size: .9rem; }
.mods-label { color: var(--text-dim); }
.mods b { color: var(--gold); font-weight: 400; white-space: nowrap; }
.mods li.wide { grid-column: 1 / -1; }
.mods li.wide b { white-space: normal; text-align: right; }

/* Шапка без имени персонажа: на телефоне пустой разделитель не занимает строку */
@media (max-width: 760px) {
  .me-summary:empty { display: none; }
}

/* =====================================================================
   КАЛЕНДАРЬ СОБЫТИЙ
   ===================================================================== */
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-head h2 { margin: 0; min-width: 9em; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font: 700 11px var(--font, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  padding: 6px 0; background: linear-gradient(180deg, rgba(201, 164, 74, .18), rgba(201, 164, 74, .06)); border-radius: 3px; }
.cal-wd.cal-weekend { color: #d9a090; }
.cal-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 78px; padding: 5px 6px;
  text-align: left; color: var(--text); font: inherit; cursor: pointer;
  background: linear-gradient(160deg, #2a241a, #1f1b14); border: 1px solid #3a3122; border-radius: 4px; }
.cal-cell:hover, .cal-cell:focus-visible { border-color: var(--gold-dim); outline: none; }
.cal-empty { background: rgba(255, 255, 255, .02); border-color: transparent; cursor: default; }
.cal-before { opacity: .55; }
.cal-num { font: 700 13px var(--font, sans-serif); color: #d8c89c; }
.cal-weekend .cal-num { color: #d9a090; }
.cal-today { border: 2px solid #c9c1a8; box-shadow: 0 0 0 1px #000, inset 0 0 12px rgba(201, 193, 168, .25); }
.cal-picked { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.cal-live::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, var(--kinovar) 6px 12px); }
.cal-stripe { display: flex; gap: 3px; }
.cal-names { display: grid; gap: 2px; min-width: 0; }
.cal-name { font-size: 11px; line-height: 1.25; padding: 1px 4px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(0, 0, 0, .35); border-left: 2px solid currentColor; }
.cal-more { font-size: 10.5px; color: var(--text-dim); }
.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; vertical-align: 0; margin-right: 5px; }
.cal-stripe .cal-dot { margin: 0; }
.cal-exp { color: #e8904a; }
.cal-gold { color: #f1d36b; }
.cal-drop { color: #8fbf6a; }
.cal-skill { color: #7fa8d6; }
.cal-announce { color: #e07a62; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.cal-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cal-event { padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid currentColor; border-radius: 4px; color: var(--text); }
.cal-event.cal-exp { border-left-color: #e8904a; } .cal-event.cal-gold { border-left-color: #f1d36b; }
.cal-event.cal-drop { border-left-color: #8fbf6a; } .cal-event.cal-skill { border-left-color: #7fa8d6; }
.cal-event.cal-announce { border-left-color: #e07a62; }
.cal-event p { margin: 4px 0 0; }
.cal-event-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cal-event.cal-live .cal-state { color: var(--moss); border-color: var(--moss); }
.cal-event.cal-past { opacity: .6; }
.event-chip { cursor: pointer; }
@media (max-width: 640px) {
  .cal-cell { min-height: 48px; padding: 3px; }
  .cal-names { display: none; }
}

/* =====================================================================
   ПЛАШКА СОБЫТИЙ В ВЕРХНЕМ БАРЕ (по середине)
   ===================================================================== */
.topbar .events-bar {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0; flex-wrap: nowrap; max-width: 46%; overflow: hidden; z-index: 1;
}
.topbar .event-chip { flex-wrap: nowrap; white-space: nowrap; padding: 4px 14px; font-size: .85rem; min-width: 0; }
.topbar .event-chip > * { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  /* узкий экран: плашка уходит отдельной строкой под название и кнопки */
  .topbar { flex-wrap: wrap; }
  .topbar .events-bar { position: static; transform: none; order: 5; flex-basis: 100%; max-width: none; justify-content: center; flex-wrap: wrap; }
  .topbar .event-chip { flex-wrap: wrap; white-space: normal; }
}


* =====================================================================
   РЕГИСТРАЦИЯ: только имя и пароль; выбор пола при первом входе
   ===================================================================== */
.pass-row { display: flex; gap: 6px; }
.pass-row input { flex: 1; min-width: 0; }
.pass-row .btn { padding-inline: 12px; }
.pass-row .btn.active { color: var(--gold); border-color: var(--gold-dim); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gender-pick { display: flex; gap: 8px; justify-content: center; margin: 4px 0 12px; }

/* =====================================================================
   ОБРАТНАЯ СВЯЗЬ: кнопка в верхнем баре и окно
   ===================================================================== */
.fb-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.fb-ico { font-size: 1rem; line-height: 1; }
.fb-dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--kinovar); box-shadow: 0 0 0 2px #0e1012; }
.fb-modal { max-width: 640px; }
.fb-body { display: grid; gap: 10px; }
.fb-body textarea { width: 100%; resize: vertical; min-height: 120px; }
.fb-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-send { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fb-h { margin: 8px 0 0; }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fb-item { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; }
.fb-item.fb-new { border-color: var(--gold-dim); background: rgba(201, 164, 74, .06); }
.fb-item.fb-done { opacity: .75; }
.fb-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.fb-msg { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-reply { margin-top: 6px; padding: 6px 10px; border-left: 2px solid var(--gold-dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-reply b { color: var(--gold); }
@media (max-width: 1100px) {
  .fb-text { display: none; }            /* на узком экране — только значок */
}
/* Поля для длинного текста и кнопки-«фишки» (выбор категории, пола) — как в остальной игре */
textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--radius, 6px); padding: 8px 10px;
}
textarea:focus { border-color: var(--gold-dim); outline: none; }
textarea::placeholder { color: var(--text-dim); font-family: inherit; }
.chip-btn {
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: 4px 12px; border-radius: 999px;
  color: var(--text-dim); background: transparent; border: 1px solid var(--line-2);
}
.chip-btn:hover { color: var(--text); }
.chip-btn.active { color: var(--gold); border-color: var(--gold-dim); background: rgba(201, 164, 74, .08); }

/* =====================================================================
   БАННЕР О COOKIE (страница входа)
   ===================================================================== */
.cookie-banner {
  position: fixed; z-index: 50; left: 50%; bottom: 20px; transform: translateX(-50%);
  width: min(640px, calc(100% - 32px)); max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 16px 20px; display: grid; gap: 10px;
  background: rgba(18, 20, 23, .97); border: 1px solid var(--gold-dim); box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  animation: cookie-in .35s ease-out;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner h2 { margin: 0; font-size: 1.1rem; }
.cookie-banner p { margin: 0; font-size: .92rem; line-height: 1.5; }
.cookie-more summary { cursor: pointer; color: var(--gold); font-size: .9rem; }
.cookie-more ul { margin: 8px 0 0; padding-left: 20px; font-size: .88rem; color: var(--text-dim); display: grid; gap: 4px; }
.cookie-more b { color: var(--text); font-family: var(--font-mono); font-weight: 400; }
.cookie-actions { display: flex; justify-content: flex-end; }
@keyframes cookie-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } }


/* Цвет статусов в журнале заданий */ .q-entry.q-done .q-status { color: #a9d39b; border-color: #4f7a52; } /* выполнено — зелёный */ .q-entry.q-active .q-status { color: var(--gold); border-color: var(--gold-dim); } /* в пути — золотой */ .q-entry.q-new .q-status { color: var(--text-dim); border-color: var(--line-2); } /* доступно — серый */

/* =====================================================================
   СТРАНИЦА ВХОДА: вход + «Об игре» с каруселью + новости
   На широком экране: слева «Об игре», справа вход и новости.
   На телефоне: вход → об игре → новости.
   ===================================================================== */
.landing {
  width: 100%; max-width: 1180px;
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "auth" "about" "news" "foot";

}
.landing-head  { grid-area: head; }
.landing-auth  { grid-area: auth; max-width: none; align-self: start; }
.landing-about { grid-area: about; display: grid; gap: 12px; }
.landing-news  { grid-area: news; display: grid; gap: 10px; }
.landing-about > h2, .landing-news > h2 { margin: 0; }
.landing [hidden] { display: none !important; }
@media (min-width: 960px) {
  .landing {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    grid-template-areas: "head head" "about auth" "about news" "foot foot";
    grid-template-rows: auto auto 1fr auto;
    column-gap: 20px;
  }
}

/* ---------- Об игре ---------- */
.about-lead { margin: 0; font-size: 1.02rem; line-height: 1.55; color: #e6dfcd; }
.about-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.about-list li { position: relative; padding-left: 20px; line-height: 1.5; }
.about-list li::before { content: '◆'; position: absolute; left: 2px; top: .1em; font-size: .7em; color: var(--kinovar); }
.about-list b { color: var(--gold); font-weight: 700; }
.about-note { margin: 0; }
@media (min-width: 700px) { .about-list { grid-template-columns: 1fr 1fr; column-gap: 20px; } }

/* ---------- Карусель скриншотов ---------- */
.carousel { position: relative; border: 1px solid var(--line-2); border-radius: var(--radius); background: #0b0c0e; overflow: hidden; }
.car-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.car-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative; }
.car-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.car-slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #0b0c0e; }
.car-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 30px;
  background: linear-gradient(transparent, rgba(8, 9, 10, .88) 55%);
  color: #eee6d2; font-size: .92rem; text-shadow: 0 1px 3px #000; pointer-events: none;
}
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 54px; display: grid; place-items: center;
  font: 700 28px/1 var(--font-head); color: #eee6d2;
  background: rgba(10, 12, 14, .62); border: 1px solid rgba(201, 164, 74, .35); border-radius: var(--radius);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.car-btn:hover, .car-btn:focus-visible { background: rgba(10, 12, 14, .85); border-color: var(--gold); }
.car-prev { left: 8px; }
.car-next { right: 8px; }
.car-dots { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; justify-content: center; gap: 7px; z-index: 2; }
.car-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--gold-dim); background: rgba(10, 12, 14, .7); cursor: pointer; }
.car-dot.active { background: var(--gold); border-color: var(--gold); }
@media (max-width: 600px) {
  .car-btn { width: 30px; height: 44px; font-size: 22px; }
  /* на телефоне подпись под картинкой, а не поверх неё */
  .car-slide figcaption { position: static; background: none; font-size: .84rem; padding: 6px 10px 28px; }
  .car-btn { top: calc(50% - 22px); }
}

/* Скриншот во весь экран */
.shot-view {
  width: min(1600px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px);
  padding: 0; border: 1px solid var(--gold-dim); border-radius: var(--radius); background: #0b0c0e; color: var(--text);
  overflow: hidden;
}
.shot-view::backdrop { background: rgba(5, 6, 7, .86); }
.shot-view figure { margin: 0; }
.shot-view img { display: block; width: 100%; max-height: calc(100vh - 70px); object-fit: contain; }
.shot-view figcaption { padding: 10px 56px 12px 14px; font-size: .92rem; color: #d9d3c3; }
.shot-close { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 4px 10px; background: rgba(10, 12, 14, .75); }

/* ---------- Новости ---------- */
.news-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.news-item { padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); }
.news-item:last-child { padding-bottom: 0; border-bottom: 0; }
.news-head { display: flex; align-items: center; gap: 8px; }
.news-date { font-size: .8rem; color: var(--text-dim); letter-spacing: .02em; }
.news-new { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #1a1508; background: var(--gold); border-radius: 3px; padding: 1px 6px; }
.news-title { margin: 4px 0 6px; font-family: var(--font-head); font-size: 1.12rem; color: #eee6d2; text-transform: none; letter-spacing: .01em; }
.news-body p { margin: 0 0 .6em; line-height: 1.5; white-space: pre-line; overflow-wrap: break-word; }
.news-body p:last-child { margin-bottom: 0; }
#news-more { justify-self: start; }

/* =====================================================================
   ЖИТЕЛИ МИРА (ИИ): тихая отметка у имени
   ===================================================================== */
.bot-mark { margin-left: 4px; font-size: .75em; color: var(--sky); opacity: .8; cursor: help; vertical-align: 1px; }


/* =====================================================================
   РАЗВИТИЕ: подсказка «что даёт характеристика» (по нажатию на название)
   ===================================================================== */
.stat-help-tip { margin: -4px 0 6px; }
.stat-help-btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  display: inline-flex; align-items: center; gap: 6px; text-align: left; cursor: pointer; justify-self: start;
}
.stat-help-btn:hover, .stat-help-btn:focus-visible { color: var(--gold); }
.stat-help-btn:focus-visible { outline: 1px dashed var(--gold-dim); outline-offset: 2px; }
.stat-help-mark {
  display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--text-dim); font: 700 10px/1 var(--font);
}
.stat-row.help-open .stat-help-mark, .stat-help-btn:hover .stat-help-mark { border-color: var(--gold-dim); color: var(--gold); }
.stat-hint {
  grid-column: 1 / -1; margin: 2px 0 2px; padding: 7px 10px;
  font-size: .86rem; line-height: 1.45; color: #cfc8b6;
  background: rgba(201, 164, 74, .06); border-left: 2px solid var(--gold-dim); border-radius: 0 4px 4px 0;
}

/* =====================================================================
   БИНТЫ: две кнопки в строке рюкзака («Перевязаться» и «Снять»)
   ===================================================================== */
.inv-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* =====================================================================
   СТРАНИЦА ВХОДА: подвал с кнопкой рейтинга RPG TOP
   ===================================================================== */
.landing-foot {
  grid-area: foot;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  padding: 4px 0 8px;
}
.landing-foot-label { font-size: .8rem; color: #a7a293; letter-spacing: .04em; text-shadow: 0 1px 4px #000; }
.rpgtop { display: flex; align-items: center; min-height: 60px; }
.rpgtop-pixel { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.rpgtop a { display: block; line-height: 0; border: 1px solid var(--line-2); border-radius: 3px; padding: 2px;
  background: rgba(10, 12, 14, .6); opacity: .8; transition: opacity .15s, border-color .15s; }
.rpgtop a:hover, .rpgtop a:focus-visible { opacity: 1; border-color: var(--gold-dim); }


/* ОКНО ГЕРОЯ: без лишней полосы прокрутки */
.hero { padding-bottom: 5px; }
.hero::after { bottom: 5px; margin-top: 8px; margin-bottom: 0; }

/* ===== Зелья в окне боя (миграция 029) ===== */
.potion-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.potion-bar > .muted { flex-basis: 100%; }
.potion-btn { white-space: nowrap; }
.potion-btn.potion-hp:not(:disabled) { border-color: #a33a2c; }
.potion-btn.potion-mp:not(:disabled) { border-color: #2f5f9e; }
.potion-btn:disabled { opacity: .5; cursor: default; }


/* ===== Достижения и титулы (миграция 031) ===== */
.ach-top h2 { margin-bottom: 8px; }
.ach-title-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ach-title-pick select { max-width: 280px; }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ach { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: rgba(255, 255, 255, .02); }
.ach p { margin: 0; }
.ach-head { display: flex; align-items: baseline; gap: 6px; }
.ach-head .muted { margin-left: auto; }
.ach-mark { color: var(--text-dim); }
.ach-done { border-color: var(--gold-dim); background: rgba(201, 164, 74, .07); }
.ach-done .ach-mark, .ach-done .ach-name { color: var(--gold); }
.ach-reward { font-style: italic; }
.pl-title { color: var(--gold-dim); font-size: .85em; }
.char-title { margin: -4px 0 6px; color: var(--gold); font-style: italic; }


/* ===== Жалобы и модерация чата (миграция 032) ===== */
.msg-act { background: none; border: 0; padding: 0 3px; margin-left: 4px; font-size: .8rem; line-height: 1; color: var(--text-dim); opacity: .35; cursor: pointer; border-radius: 3px; }
.msg:hover .msg-act, .msg-act:focus-visible { opacity: .9; }
.msg-report:hover, .msg-report:focus-visible { color: var(--gold); background: rgba(201, 164, 74, .1); }
.msg-hide:hover, .msg-hide:focus-visible { color: var(--blood); background: rgba(160, 50, 40, .12); }
@media (hover: none) { .msg-act { opacity: .6; } }
.report-modal { max-width: 460px; }
.report-quote { margin: 0 0 12px; padding: 8px 10px; border-left: 3px solid var(--gold-dim); background: rgba(255, 255, 255, .03); overflow-wrap: anywhere; }


/* ===== Катакомбы: плата за вход кристаллами (миграция 033) ===== */
.raid-cost { margin: 6px 0 10px; padding: 6px 10px; border-left: 3px solid #5f8fc9; background: rgba(95, 143, 201, .08); font-size: .9rem; }
.raid-cost.short { border-left-color: var(--blood); background: rgba(176, 58, 50, .08); }



/* ===== Анкета игрока (player.html, миграция 034) ===== */
/* Кружок «i» перед именем в чате и в списке «Здесь сейчас» */
.pf-info {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 4px; vertical-align: 1px;
  border-radius: 50%; background: #b8402f; color: #fff; font: 700 11px/1 var(--font-head); font-style: italic; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.pf-info:hover, .pf-info:focus-visible { background: #d9573f; }
/* Страница анкеты */
.page-player .topbar a.brand { text-decoration: none; }
.page-player .topbar { justify-content: space-between; }
.player-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }
.pf-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.pf-hero { position: sticky; top: 16px; max-height: none; }
.pf-main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.pf-panel { margin: 0; }
.pf-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-bottom: 4px; }
.pf-nick { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; color: #f2e4c2; }
.pf-online { color: #7fbf7f; font-size: .85rem; }
.pf-motto { margin: 8px 0 12px; padding: 8px 14px; border: 2px solid var(--gold-dim); border-radius: 6px; background: rgba(201, 164, 74, .08); font-style: italic; color: #eee6d2; overflow-wrap: anywhere; }
.pf-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; align-items: center; padding: 3px 0; }
.pf-label { color: var(--text-dim); }
.pf-value { overflow-wrap: anywhere; }
.pf-about p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-about h3, .pf-panel h3 { margin-top: 12px; }
.pf-stats, .pf-items, .pf-skills, .pf-ach { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-stats li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--line); padding-bottom: 3px; }
.pf-skills li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; align-items: center; }
.pf-items li { padding: 4px 6px; border-radius: 4px; transition: background .4s; overflow-wrap: anywhere; }
.pf-items li.flash { background: rgba(201, 164, 74, .25); }
.pf-ach li { overflow-wrap: anywhere; }
/* Форма своей анкеты во вкладке «Развитие» */
.pf-edit { display: grid; gap: 10px; }
.pf-field { display: grid; gap: 4px; }
.pf-field input, .pf-field textarea { width: 100%; }
@media (max-width: 1180px) { .pf-main { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .pf-layout { grid-template-columns: 1fr; }
  .pf-hero { position: relative; top: auto; }
  .pf-row, .pf-skills li { grid-template-columns: 110px minmax(0, 1fr); }
}

/* ===== Меняла кристаллов (миграция 035) ===== */
.crystal-entry .name { color: #9cc3f0; }
.crystal-modal { max-width: 480px; }
.crystal-offer { padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 6px; margin-bottom: 10px; }
.crystal-offer h3 { margin-bottom: 6px; }
.crystal-offer p { margin: 0 0 8px; }
.crystal-offer.off { opacity: .6; }
.crystal-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.crystal-buy input { width: 80px; }


/* ===== Значок анкеты: обычная «i» (чуть жирнее) в кружке, серый контур, прозрачный — как конверт у имени ===== */
.pf-info {
  display: inline-grid; place-items: center; width: 12px; height: 12px; padding: 0; margin-right: 4px; vertical-align: -1px;
  border: 1.25px solid currentColor; border-radius: 50%; background: none; box-shadow: none;
  color: var(--text-dim); opacity: .7; font: 700 11px/1 var(--font); font-style: normal; text-decoration: none;
}
.pf-info:hover, .pf-info:focus-visible { color: var(--gold); opacity: 1; background: none; }



/* ===== Страж — ИИ-модератор чата: его замечания выделены, у имени щит ===== */
.msg-guard { margin: 2px 0; padding: 4px 8px; border-left: 2px solid var(--gold); background: rgba(201, 164, 74, .07); border-radius: 0 4px 4px 0; }
.msg-guard .msg-name { color: var(--gold); }
.msg-guard .msg-text { color: var(--text); }
.guard-mark { margin: 0 4px 0 2px; color: var(--gold); opacity: .85; }


/* ===== Облик героя: выбор аватара ===== */
.hero-avatar.can-pick { cursor: pointer; }
.hero-avatar.can-pick:hover, .hero-avatar.can-pick:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.avatar-modal { max-width: 640px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.avatar-card { position: relative; display: block; padding: 0; aspect-ratio: 3 / 4; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .25); overflow: hidden; cursor: pointer; }
.avatar-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-card:hover, .avatar-card:focus-visible { border-color: var(--gold); }
.avatar-card.active { border: 2px solid var(--gold); box-shadow: 0 0 0 2px rgba(201, 164, 74, .25); }
.avatar-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; font-size: .75rem; text-align: center; color: #fbe6b2; background: rgba(0, 0, 0, .6); }
.avatar-now { display: flex; gap: 14px; align-items: center; }
.avatar-now img { width: 72px; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; flex: none; }
.avatar-now p { margin: 0 0 8px; }


/* ===== Окно героя (в игре и в анкете): без кружка с уровнем на портрете. В бою кружки остаются ===== */
#hero .hero-level, .pf-hero .hero-level { display: none; }

/* ===== Еда и питьё: строка под именем в нижней панели («Еда: +18 HP, ещё 36 с») ===== */
.hud-food { text-align: center; font-size: .78rem; color: #b9d79a; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ===== Пароль: «Забыли пароль?», сообщение об отправке, панель «Учётная запись» ===== */
.forgot-link { justify-self: start; font-size: .9rem; }
.form-ok { color: #b9d79a; background: rgba(90, 140, 70, .12); border: 1px solid rgba(120, 170, 90, .45); border-radius: var(--radius); padding: 10px 14px; }
.account-part { display: grid; gap: 8px; align-content: start; }
.account-part h3 { margin: 0; }
.account-panel .warn { color: #e9b26a; }

/* ===== «Летопись Забытых Земель» — ссылки на вики (страница входа и верхняя панель игры) ===== */
.wiki-link { color: var(--gold); border-color: var(--gold-dim); text-decoration: none; white-space: nowrap; }
.wiki-link .wl-short { display: none; }
@media (max-width: 760px) {
  .wiki-link .wl-full { display: none; }
  .wiki-link .wl-short { display: inline; }
}
.wiki-btn { display: inline-block; margin-top: 12px; color: var(--gold); border: 1px solid var(--gold-dim); background: rgba(14, 16, 18, .65); text-decoration: none; font-family: var(--font-head); letter-spacing: .02em; }
.wiki-btn:hover, .wiki-btn:focus-visible { border-color: var(--gold); background: rgba(201, 164, 74, .12); }