/* ============================================================================
   ТЕМА «ОСКОЛКИ СУДЬБЫ» — пробник нового визуального языка (arena-160)
   ----------------------------------------------------------------------------
   Подключается ПОСЛЕ style.css и переопределяет пока только экран входа.
   Смысл файла — показать, что ажурная рамка из макета собирается на CSS+SVG и
   тянется на любой размер, в отличие от текущих PNG-панелей на 2.5 МБ, из-за
   которых боевой экран прибит к макету 1366x496.
   Здесь нет ни одного !important и ни одной фиксированной координаты.
   ========================================================================== */

:root{
  --sf-void:#070512;
  --sf-deep:#0c0a1c;
  --sf-panel:#151038;
  --sf-gold:#c9a44c;
  --sf-gold-lit:#f0d68f;
  --sf-gold-dim:#7d6130;
  --sf-gem:#7c4ddb;
  --sf-gem-lit:#b389ff;
  --sf-text:#ece8fa;
  --sf-muted:#9a92b8;

  --sf-c-tl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%280%2C0%29%20scale%281%2C1%29%22%3E%3Cpath%20d%3D%22M3%2024%20Q3%203%2024%203%20L44%203%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M8%2028%20Q8%208%2028%208%20L38%208%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M14%2032%20Q14%2014%2032%2014%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%22.9%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M3%2044%20L3%2050%20Q3%2057%2010%2057%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M44%203%20L50%203%20Q57%203%2057%2010%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M19%2021%20L26%2014%20L33%2021%20L26%2028%20Z%22%20fill%3D%22%232f6fd0%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M23%2021%20L26%2018%20L29%2021%20L26%2024%20Z%22%20fill%3D%22%238fc4ff%22%20opacity%3D%22.95%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sf-c-tr:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%2864%2C0%29%20scale%28-1%2C1%29%22%3E%3Cpath%20d%3D%22M3%2024%20Q3%203%2024%203%20L44%203%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M8%2028%20Q8%208%2028%208%20L38%208%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M14%2032%20Q14%2014%2032%2014%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%22.9%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M3%2044%20L3%2050%20Q3%2057%2010%2057%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M44%203%20L50%203%20Q57%203%2057%2010%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M19%2021%20L26%2014%20L33%2021%20L26%2028%20Z%22%20fill%3D%22%232f6fd0%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M23%2021%20L26%2018%20L29%2021%20L26%2024%20Z%22%20fill%3D%22%238fc4ff%22%20opacity%3D%22.95%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sf-c-bl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%280%2C64%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M3%2024%20Q3%203%2024%203%20L44%203%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M8%2028%20Q8%208%2028%208%20L38%208%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M14%2032%20Q14%2014%2032%2014%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%22.9%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M3%2044%20L3%2050%20Q3%2057%2010%2057%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M44%203%20L50%203%20Q57%203%2057%2010%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M19%2021%20L26%2014%20L33%2021%20L26%2028%20Z%22%20fill%3D%22%232f6fd0%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M23%2021%20L26%2018%20L29%2021%20L26%2024%20Z%22%20fill%3D%22%238fc4ff%22%20opacity%3D%22.95%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sf-c-br:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%2864%2C64%29%20scale%28-1%2C-1%29%22%3E%3Cpath%20d%3D%22M3%2024%20Q3%203%2024%203%20L44%203%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M8%2028%20Q8%208%2028%208%20L38%208%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M14%2032%20Q14%2014%2032%2014%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%22.9%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M3%2044%20L3%2050%20Q3%2057%2010%2057%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M44%203%20L50%203%20Q57%203%2057%2010%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M19%2021%20L26%2014%20L33%2021%20L26%2028%20Z%22%20fill%3D%22%232f6fd0%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M23%2021%20L26%2018%20L29%2021%20L26%2024%20Z%22%20fill%3D%22%238fc4ff%22%20opacity%3D%22.95%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sf-edge-h:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2014%22%20fill%3D%22none%22%3E%3Cline%20x1%3D%220%22%20y1%3D%223%22%20x2%3D%2248%22%20y2%3D%223%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.3%22%2F%3E%3Cline%20x1%3D%220%22%20y1%3D%226%22%20x2%3D%2248%22%20y2%3D%226%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%22.7%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M12%203%20L16%207%20L20%203%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M28%203%20L32%207%20L36%203%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20opacity%3D%22.85%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%223%22%20r%3D%221.8%22%20fill%3D%22%232f6fd0%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%223%22%20r%3D%221.2%22%20fill%3D%22%238a6a2f%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%223%22%20r%3D%221.2%22%20fill%3D%22%238a6a2f%22%2F%3E%3C%2Fsvg%3E");
  --sf-edge-v:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2048%22%20fill%3D%22none%22%3E%3Cline%20x1%3D%223%22%20y1%3D%220%22%20x2%3D%223%22%20y2%3D%2248%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.3%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%220%22%20x2%3D%226%22%20y2%3D%2248%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%22.7%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M3%2012%20L7%2016%20L3%2020%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M3%2028%20L7%2032%20L3%2036%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20opacity%3D%22.85%22%2F%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2224%22%20r%3D%221.8%22%20fill%3D%22%232f6fd0%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%223%22%20cy%3D%220%22%20r%3D%221.2%22%20fill%3D%22%238a6a2f%22%2F%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2248%22%20r%3D%221.2%22%20fill%3D%22%238a6a2f%22%2F%3E%3C%2Fsvg%3E");
  --sf-edge-w:11px;
  --sf-gem-img:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M14%201%20L21%2014%20L14%2027%20L7%2014%20Z%22%20fill%3D%22%232a1e52%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.3%22%2F%3E%3Cpath%20d%3D%22M14%205%20L18%2014%20L14%2023%20L10%2014%20Z%22%20fill%3D%22%237c4ddb%22%2F%3E%3Cpath%20d%3D%22M14%205%20L18%2014%20L14%2014%20Z%22%20fill%3D%22%23b389ff%22%20opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E");
  --sf-corner:38px;
}

/* ── Ажурная рамка ──────────────────────────────────────────────────────────
   Углы — четыре зеркальные копии одного вектора, самоцветы — по серединам
   верхней и нижней сторон. Всё на псевдоэлементах, поэтому применяется к любой
   панели одним классом и корректно тянется на любой размер.                  */
.sf-framed{position:relative}
/* Края повторяются вдоль сторон, углы кладутся поверх них (::after рисуется
   выше ::before), поэтому стыки закрыты и рамка тянется на любой размер. */
.sf-framed::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;z-index:3;
  background-image:var(--sf-edge-h),var(--sf-edge-h),var(--sf-edge-v),var(--sf-edge-v),
                   var(--sf-gem-img),var(--sf-gem-img);
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y,no-repeat,no-repeat;
  background-position:top left,bottom left,left top,right top,top center,bottom center;
  background-size:auto var(--sf-edge-w),auto var(--sf-edge-w),
                  var(--sf-edge-w) auto,var(--sf-edge-w) auto,17px 17px,17px 17px;
  opacity:.9;
}
.sf-framed::after{
  content:"";position:absolute;inset:-2px;pointer-events:none;z-index:4;
  background-image:var(--sf-c-tl),var(--sf-c-tr),var(--sf-c-bl),var(--sf-c-br);
  background-repeat:no-repeat;
  background-size:var(--sf-corner) var(--sf-corner);
  background-position:left top,right top,left bottom,right bottom;
}

/* ── Экран входа ────────────────────────────────────────────────────────── */
.auth-layer{
  background:
    radial-gradient(ellipse at 26% 38%,rgba(124,77,219,.22),transparent 52%),
    radial-gradient(ellipse at 74% 68%,rgba(47,111,208,.15),transparent 52%),
    linear-gradient(160deg,var(--sf-deep),var(--sf-void));
  color:var(--sf-text);
}
.auth-shell{
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(21,16,56,.72),rgba(10,8,24,.86));
  box-shadow:inset 0 0 0 1px rgba(201,164,76,.1),0 30px 80px rgba(0,0,0,.6);
}

.auth-world{
  position:relative;
  background:
    radial-gradient(circle at 50% 32%,rgba(179,137,255,.3),transparent 44%),
    linear-gradient(180deg,rgba(24,18,60,.6),rgba(7,5,18,.9));
}
.auth-world::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 22%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.6px 1.6px at 74% 15%,rgba(179,137,255,.75),transparent),
    radial-gradient(1.1px 1.1px at 40% 62%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.6px 1.6px at 86% 74%,rgba(143,196,255,.65),transparent),
    radial-gradient(1.1px 1.1px at 12% 82%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.3px 1.3px at 58% 40%,rgba(255,255,255,.45),transparent);
}
.auth-brand b{color:var(--sf-gold-lit);letter-spacing:.16em}
.auth-brand small{color:var(--sf-muted)}
.auth-brand span{
  border-color:var(--sf-gold);color:var(--sf-gold-lit);border-radius:3px;
  background:linear-gradient(145deg,#2d2159,#100c26);
  box-shadow:inset 0 0 20px rgba(124,77,219,.4);
}
.auth-world-copy>small{color:var(--sf-gold);letter-spacing:.3em}
.auth-world-copy h1{
  font-family:Georgia,serif;
  background:linear-gradient(180deg,#fdf3d2,var(--sf-gold) 58%,#8f7130);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-world-copy p{color:var(--sf-muted)}
.auth-world-facts>span{
  border:1px solid var(--sf-gold-dim);border-radius:3px;
  background:linear-gradient(180deg,rgba(28,21,68,.85),rgba(11,9,26,.85));
}
.auth-world-facts b{color:var(--sf-gold-lit);font-family:Georgia,serif}
.auth-world-facts em,.auth-world-note{color:var(--sf-muted)}

.auth-card{
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:
    linear-gradient(180deg,rgba(124,77,219,.1),transparent 36%),
    linear-gradient(180deg,var(--sf-panel),var(--sf-deep));
  box-shadow:inset 0 0 0 1px rgba(201,164,76,.12),0 24px 60px rgba(0,0,0,.55);
}
.auth-tabs{
  border:1px solid var(--sf-gold-dim);border-radius:3px;
  background:rgba(7,5,18,.65);overflow:hidden;
}
.auth-tabs button{color:var(--sf-muted);border-radius:0;transition:.18s}
.auth-tabs button:hover{color:var(--sf-gold-lit)}
.auth-tabs button.active{
  color:var(--sf-gold-lit);
  background:linear-gradient(180deg,rgba(124,77,219,.5),rgba(52,30,102,.3));
  box-shadow:inset 0 -2px 0 var(--sf-gem-lit);
}
.auth-heading small{color:var(--sf-gold);letter-spacing:.24em}
.auth-heading h2{font-family:Georgia,serif;color:var(--sf-text)}
.auth-heading p,.auth-foot span{color:var(--sf-muted)}
#authForm label>span{color:var(--sf-muted);letter-spacing:.07em}
#authForm input,#authForm textarea{
  border:1px solid #383168;border-radius:3px;
  background:rgba(7,5,18,.8);color:var(--sf-text);
  transition:border-color .18s,box-shadow .18s;
}
#authForm input::placeholder{color:#6b648c}
#authForm input:focus,#authForm textarea:focus{
  outline:0;border-color:var(--sf-gem);
  box-shadow:0 0 0 1px rgba(124,77,219,.4),0 0 20px rgba(124,77,219,.25);
}

.auth-card .primary-btn{
  border:1px solid var(--sf-gold);border-radius:3px;
  background:linear-gradient(180deg,#8a53e8 0%,#5c30a8 45%,#33195e 100%);
  color:#fbf3d8;letter-spacing:.18em;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -8px 18px rgba(0,0,0,.35),
             0 10px 26px rgba(90,45,170,.4);
  transition:.18s;
}
.auth-card .primary-btn:hover{
  background:linear-gradient(180deg,#9c66f5 0%,#6a3ac0 45%,#3d1f74 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -8px 18px rgba(0,0,0,.3),
             0 12px 32px rgba(124,77,219,.5);
}
.auth-card .secondary-btn{
  border:1px solid var(--sf-gold-dim);border-radius:3px;
  background:linear-gradient(180deg,#20406f,#132747);
  color:#d4e5ff;letter-spacing:.14em;
}
.auth-card .secondary-btn:hover{border-color:var(--sf-gold);background:linear-gradient(180deg,#27508a,#183256)}
.text-btn.auth-switch{color:var(--sf-gem-lit)}
.auth-error{color:#ff9a9a}

/* ── Плитки возможностей ────────────────────────────────────────────────── */
.sf-features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  width:min(1180px,94vw);margin:18px auto 0;
}
.sf-feature{
  display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;
  padding:16px 18px;
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(28,21,68,.82),rgba(9,7,22,.82));
  transition:.2s;
}
.sf-feature:hover{border-color:var(--sf-gold);transform:translateY(-2px)}
.sf-feature>i{font-style:normal;font-size:24px;color:var(--sf-gold-lit);display:grid;place-items:center}
.sf-feature b{display:block;font-family:Georgia,serif;font-size:13px;color:var(--sf-gold-lit);letter-spacing:.12em}
.sf-feature p{margin:5px 0 0;font-size:10px;line-height:1.5;color:var(--sf-muted)}

@media (max-width:900px){.sf-features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sf-features{grid-template-columns:1fr}}

/* ── Правки раскладки экрана входа ───────────────────────────────────────── */
.auth-layer{
  /* Плитки — второй ряд под карточкой, а не ячейка её грида. */
  grid-auto-flow:row;
  align-content:center;
  gap:20px;
  overflow:auto;
}
.auth-shell{
  /* overflow:hidden в базовых стилях срезал ажурные углы. */
  overflow:visible;
  max-height:none;
}
.sf-features{width:min(980px,96vw)}

/* Орнамент крупнее и заметнее на больших панелях. */
.auth-shell.sf-framed{--sf-corner:52px}
.sf-feature.sf-framed{--sf-corner:26px}
.sf-feature.sf-framed::after{display:none}

/* Компактнее по высоте: карточка + плитки должны помещаться в экран целиком,
   как в макете, а не уезжать под сгиб. */
.auth-layer{padding:26px 20px}
.auth-shell{min-height:0}
.auth-world{padding-block:34px}
.auth-card{padding-block:30px}
.sf-feature{padding:13px 16px}
.sf-feature p{font-size:9.5px}

@media (min-height:760px){
  .auth-world{padding-block:52px}
  .auth-card{padding-block:44px}
}

/* На узких экранах базовые 98vw у .auth-shell не оставляли места орнаменту,
   который выступает за рамку на 2px, — панели вылезали за вьюпорт. */
@media (max-width:760px){
  .auth-layer{padding:16px 12px}
  .auth-shell{width:100%}
  .sf-features{width:100%}
  .auth-shell.sf-framed{--sf-corner:40px}
}

/* ============================================================================
   ЕДИНЫЙ КАРКАС ЭКРАНА (arena-160)
   ----------------------------------------------------------------------------
   Одна раскладка на всю игру, как в макете:
     верхняя панель  → сцена (игра)  → нижний док (чат + боковая панель)
   Сцена — один прокручиваемый фрейм, в который рендерятся все 18 экранов.
   Ни одной фиксированной координаты: всё на grid и минмаксах.
   ========================================================================== */
.app-shell{
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  padding:0 12px 12px;
  background:
    radial-gradient(ellipse at 22% 0%,rgba(124,77,219,.16),transparent 55%),
    radial-gradient(ellipse at 82% 30%,rgba(47,111,208,.11),transparent 50%),
    linear-gradient(170deg,var(--sf-deep),var(--sf-void));
}

/* ── Верхняя панель ─────────────────────────────────────────────────────── */
.topbar{
  height:60px;margin:0 -12px;padding:0 22px;
  border-bottom:1px solid var(--sf-gold-dim);
  background:linear-gradient(180deg,rgba(21,16,56,.96),rgba(9,7,22,.96));
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.brand-mark{
  border-color:var(--sf-gold);color:var(--sf-gold-lit);border-radius:4px;
  background:linear-gradient(145deg,#2d2159,#100c26);
  box-shadow:inset 0 0 18px rgba(124,77,219,.4);
}
.brand-copy b{color:var(--sf-gold-lit)}
.brand-copy small{color:var(--sf-muted)}
.nav-btn{color:#a79fc4;border-radius:4px}
.nav-btn:hover,.nav-btn.active{background:rgba(124,77,219,.22);color:var(--sf-gold-lit)}
.resources>span{
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(28,21,68,.9),rgba(10,8,24,.9));
}
.resources i{color:var(--sf-gold-lit)}
.icon-btn{
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(28,21,68,.9),rgba(10,8,24,.9));
  color:var(--sf-gold-lit);
}
.icon-btn:hover{border-color:var(--sf-gold)}

/* ── Сцена: верхний фрейм с игрой ───────────────────────────────────────── */
.sf-stage{
  min-height:0;                 /* иначе grid-строка не даст ужаться */
  overflow:auto;
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:
    linear-gradient(180deg,rgba(124,77,219,.06),transparent 30%),
    linear-gradient(180deg,var(--sf-panel),var(--sf-deep));
  box-shadow:inset 0 0 0 1px rgba(201,164,76,.1),inset 0 0 60px rgba(124,77,219,.06);
  --sf-corner:44px;
}
.sf-stage > .view-stack{padding:22px}
.sf-stage .simple-view{max-width:none;padding:0}

/* ── Нижний док: чат + боковая панель ───────────────────────────────────── */
.sf-dock{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:10px;
  height:clamp(180px,26dvh,260px);
}
.global-chat,.sf-side{
  min-height:0;margin:0;width:auto;max-width:none;height:100%;
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,var(--sf-panel),var(--sf-deep));
  --sf-corner:30px;
}
.global-chat{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.chat-headline b{color:var(--sf-gold-lit)}
.chat-headline small,.chat-headline span{color:var(--sf-muted)}
.chat-tabs button{color:var(--sf-muted);background:transparent}
.chat-tabs button.active{
  color:var(--sf-gold-lit);
  background:linear-gradient(180deg,rgba(124,77,219,.4),rgba(52,30,102,.2));
  box-shadow:inset 0 -2px 0 var(--sf-gem-lit);
}
.chat-entry{border-top:1px solid var(--sf-gold-dim)}
.chat-entry input{background:rgba(7,5,18,.75);color:var(--sf-text)}
.chat-entry button{background:rgba(124,77,219,.3);color:var(--sf-gold-lit);border-left-color:var(--sf-gold-dim)}
.chat-resize-handle{display:none}

.sf-side{display:grid;grid-template-rows:auto minmax(0,1fr)}
.sf-side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--sf-gold-dim);
}
.sf-side-head b{font-family:Georgia,serif;font-size:14px;color:var(--sf-gold-lit);letter-spacing:.06em}
.sf-side-count{
  min-width:26px;text-align:center;padding:2px 8px;font-size:11px;
  border:1px solid var(--sf-gold-dim);border-radius:3px;color:var(--sf-muted);
}
.sf-side-body{overflow:auto;padding:10px 12px}

@media (max-width:900px){
  .app-shell{height:auto;min-height:100dvh;grid-template-rows:auto auto auto}
  .sf-stage{overflow:visible}
  .sf-dock{grid-template-columns:1fr;height:auto}
  .global-chat{height:260px}
  .sf-side{height:220px}
}

/* ── Локация и навигация по переходам ───────────────────────────────────── */
.section-title>span{
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(28,21,68,.9),rgba(10,8,24,.9));
  color:var(--sf-gold-lit);
}
.section-title h1{font-family:Georgia,serif;color:var(--sf-gold-lit)}
.section-title p{color:var(--sf-muted)}

/* Карточка текущей локации: сюда встаёт арт локации (--sf-loc-art). */
.city-current{
  border:1px solid var(--sf-gold-dim);border-radius:4px;padding:26px 28px;
  background:
    linear-gradient(100deg,rgba(12,10,28,.94) 0%,rgba(12,10,28,.72) 46%,rgba(12,10,28,.25) 100%),
    var(--sf-loc-art,linear-gradient(135deg,#241a52,#0d0a1e)) center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(201,164,76,.12),0 16px 44px rgba(0,0,0,.45);
}
.city-current>small{color:var(--sf-gold);letter-spacing:.24em}
.city-current h2{font-family:Georgia,serif;color:var(--sf-gold-lit)}
.city-current p{color:#c3bcdd}
.city-current-meta span{
  border:1px solid var(--sf-gold-dim);border-radius:3px;
  background:rgba(7,5,18,.6);color:var(--sf-muted);
}

.city-exits-title small{color:var(--sf-gold);letter-spacing:.22em}
.city-exits-title h3{font-family:Georgia,serif;color:var(--sf-gold-lit);margin:4px 0 0}
.city-exits-title>span{color:var(--sf-muted);font-size:11px}

/* Переходы — основная навигация. Плитка на локацию, у каждой свой набор. */
.city-exits{gap:14px}
.city-exit{
  position:relative;border-radius:4px;padding:18px;
  border:1px solid var(--sf-gold-dim);
  background:
    linear-gradient(180deg,rgba(124,77,219,.12),transparent 42%),
    linear-gradient(180deg,rgba(26,20,62,.92),rgba(10,8,24,.92));
  box-shadow:inset 0 0 0 1px rgba(201,164,76,.08);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.city-exit:hover:not(:disabled){
  transform:translateY(-3px);
  border-color:var(--sf-gold);
  box-shadow:inset 0 0 0 1px rgba(201,164,76,.2),0 16px 36px rgba(90,45,170,.32);
}
.city-exit:disabled{opacity:.45;filter:grayscale(.5)}
.city-exit small{color:var(--sf-gold);letter-spacing:.18em;font-size:8.5px}
.city-exit b{font-family:Georgia,serif;font-size:16px;color:var(--sf-gold-lit);margin:2px 0 6px}
.city-exit p{color:var(--sf-muted);font-size:11px;line-height:1.5}
.city-exit em{
  margin-top:auto;font-style:normal;font-size:10px;color:var(--sf-gem-lit);
  border-top:1px solid rgba(201,164,76,.15);padding-top:9px;width:100%;
}
.city-icon{
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(124,77,219,.25),rgba(10,8,24,.9));
  color:var(--sf-gold-lit);
}

/* ── Общие элементы внутри сцены ────────────────────────────────────────── */
.primary-btn,.secondary-btn,.shop-item button{
  border:1px solid var(--sf-gold);border-radius:3px;
  background:linear-gradient(180deg,#7b47d6,#3f2178 62%,#2a1552);
  color:#f6eecb;letter-spacing:.08em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:.18s;
}
.primary-btn:hover,.secondary-btn:hover,.shop-item button:hover{
  background:linear-gradient(180deg,#8f57ea,#4a2790 62%,#331a63);
}
.secondary-btn{
  background:linear-gradient(180deg,#20406f,#132747);color:#d4e5ff;
  border-color:var(--sf-gold-dim);
}
.secondary-btn:hover{background:linear-gradient(180deg,#27508a,#183256)}
.text-btn{color:var(--sf-gem-lit)}
.empty-state{color:var(--sf-muted)}
.online-list .online-row,.online-row{border-color:rgba(201,164,76,.14)}

/* ── Плотность сцены ────────────────────────────────────────────────────────
   Заголовок «Capital City» дублировал карточку локации, стоящую сразу под ним,
   поэтому в городе он убран: где ты находишься, уже написано в самой карточке. */
.sf-stage > .view-stack{padding:14px 16px}
.city-view > .section-title{display:none}
.section-title{margin:2px 0 14px}
.city-current{padding:18px 22px}
.city-current h2{font-size:22px;margin:4px 0 6px}
.city-current p{margin:0}
.city-exits-title{margin-top:14px}
.city-exit{min-height:0;padding:15px 16px}
.city-icon{width:34px;height:34px;margin-bottom:9px;font-size:17px}
.city-exit b{font-size:15px}

/* «Телеграф» — плавающая плашка уведомлений, ей не нужна отдельная строка. */
#telegraphBar{margin:0 0 10px}

/* ── Верхняя панель на узких экранах ────────────────────────────────────────
   Меню и ресурсы не помещаются в 375px и раздвигали страницу по горизонтали.
   Раскладываем в две строки, каждая прокручивается отдельно. */
@media (max-width:900px){
  .topbar{
    height:auto;padding:8px 10px;gap:8px;
    display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand res" "nav nav";
    align-items:center;
  }
  .brand{grid-area:brand}
  .resources{grid-area:res;justify-content:flex-end;overflow-x:auto;scrollbar-width:none}
  .resources::-webkit-scrollbar{display:none}
  .main-nav{grid-area:nav;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .main-nav::-webkit-scrollbar{display:none}
  .brand-copy{display:none}
  .app-shell{padding:0 8px 8px}
  .topbar{margin:0 -8px}
  .sf-stage > .view-stack{padding:10px}
}
@media (max-width:900px){
  /* Название локации крупно написано в самой сцене — в панели оно только
     наезжало на логотип при прокрутке ресурсов. */
  .resources>.location-pill{display:none}
}

/* ============================================================================
   ЭКРАН ВХОДА ВО ВЕСЬ ЭКРАН (arena-162)
   ----------------------------------------------------------------------------
   Как в макете: арт занимает всё окно, приветствие лежит на арте слева,
   панель входа — справа поверх него, плитки — внизу.
   Картинка задаётся переменной --sf-login-art, поэтому её можно подменить
   одной строкой, не трогая раскладку.
   ========================================================================== */
.auth-layer{
  --sf-login-art:url('/assets/ui/login-bg.webp');
  padding:0;
  grid-template-rows:minmax(0,1fr) auto;
  align-content:stretch;
  gap:0;
  background:
    /* затемнение под текст слева и под панель справа */
    linear-gradient(90deg,rgba(8,6,20,.86) 0%,rgba(8,6,20,.45) 34%,rgba(8,6,20,.30) 52%,rgba(8,6,20,.80) 74%,rgba(8,6,20,.92) 100%),
    linear-gradient(180deg,rgba(8,6,20,.65) 0%,transparent 22%,transparent 62%,rgba(8,6,20,.9) 100%),
    var(--sf-login-art,none) center/cover no-repeat,
    radial-gradient(ellipse at 32% 44%,rgba(124,77,219,.28),transparent 55%),
    linear-gradient(160deg,var(--sf-deep),var(--sf-void));
}
.auth-shell{
  width:min(1500px,94vw);
  align-self:center;
  border:0;background:none;box-shadow:none;
  grid-template-columns:minmax(0,1fr) minmax(360px,440px);
  gap:40px;
  align-items:center;
}
/* Левая половина — просто текст на арте, без своей подложки. */
.auth-world{background:none;padding:0}
.auth-world::after{display:none}
.auth-world-copy h1{font-size:clamp(34px,4.2vw,58px);line-height:1.08}
.auth-world-copy p{max-width:44ch;font-size:13px}

/* Панель входа остаётся плотной, чтобы поля читались поверх любой картинки. */
.auth-card{
  backdrop-filter:blur(6px);
  background:
    linear-gradient(180deg,rgba(124,77,219,.12),transparent 34%),
    linear-gradient(180deg,rgba(21,16,56,.94),rgba(9,7,22,.96));
}
.sf-features{
  width:min(1500px,94vw);
  margin:0 auto;
  padding:0 0 24px;
}
.sf-feature{background:linear-gradient(180deg,rgba(24,18,60,.86),rgba(8,6,20,.9));backdrop-filter:blur(4px)}

@media (max-width:900px){
  .auth-layer{
    background:
      linear-gradient(180deg,rgba(8,6,20,.72) 0%,rgba(8,6,20,.9) 55%,rgba(8,6,20,.96) 100%),
      var(--sf-login-art,none) center/cover no-repeat,
      linear-gradient(160deg,var(--sf-deep),var(--sf-void));
    padding:14px;
  }
  .auth-shell{grid-template-columns:1fr;gap:18px;width:100%}
  .sf-features{width:100%;padding-bottom:14px}
}

/* ============================================================================
   ПЛАН Б: ПРОСВЕЧИВАЮЩИЕ ПАНЕЛИ (arena-163)
   ----------------------------------------------------------------------------
   Фон страницы виден сквозь сцену и док, как в макете. Чтобы текст не терял
   читаемость, под содержимым стоит backdrop-filter: размывает текстуру и
   гасит её контраст, оставляя только цвет и глубину.

   --sf-page-art подменяется одним файлом: бесшовная текстура 1024x1024.
   Пока он не принесён, ниже лежит процедурная заглушка на градиентах — она
   тоже бесшовная, потому что каждый блик умещается внутри своей ячейки.
   ========================================================================== */
:root{
  --sf-page-art:url('/assets/ui/page-texture.webp');
  --sf-page-art-size:512px 512px;
}

.app-shell{
  background:
    var(--sf-page-art) 0 0/var(--sf-page-art-size) repeat,
    radial-gradient(ellipse at 22% 0%,rgba(124,77,219,.20),transparent 58%),
    radial-gradient(ellipse at 82% 34%,rgba(47,111,208,.14),transparent 54%),
    linear-gradient(170deg,#0b0820,#050410);
  background-attachment:fixed,fixed,fixed,fixed;
}

/* Сцена и панели дока пропускают фон. Значения альфы подобраны так, чтобы
   текстура читалась, но текст оставался контрастным. */
.sf-stage{
  background:
    linear-gradient(180deg,rgba(124,77,219,.07),transparent 34%),
    linear-gradient(180deg,rgba(21,16,56,.80),rgba(12,10,28,.86));
  backdrop-filter:blur(7px) saturate(1.1);
}
.global-chat,.sf-side{
  background:linear-gradient(180deg,rgba(21,16,56,.82),rgba(12,10,28,.88));
  backdrop-filter:blur(7px) saturate(1.1);
}
.topbar{
  /* Панель плотнее: мелкий текст и цифры ресурсов не прощают шума под собой. */
  background:linear-gradient(180deg,rgba(17,13,46,.94),rgba(8,6,20,.96));
  backdrop-filter:blur(10px);
}

/* Карточки внутри сцены остаются плотными: на них лежат таблицы и мелкий шрифт. */
.city-exit,.sf-feature,.paper-doll,.stat-card,.inventory-card,.rating-card,.clan-card,.shop-item{
  backdrop-filter:none;
}

/* Если браузер не умеет backdrop-filter — просто делаем панели плотнее,
   чтобы текст не оказался поверх голой текстуры. */
@supports not (backdrop-filter:blur(1px)){
  .sf-stage,.global-chat,.sf-side{
    background:linear-gradient(180deg,rgba(21,16,56,.95),rgba(12,10,28,.97));
  }
}

/* ── Компактные переходы (arena-164) ────────────────────────────────────────
   Было 223px на плитку: иконка отдельным блоком сверху (39), описание в три
   строки (66), время пути отдельной строкой с разделителем (22) и строка
   района, которая на большинстве плиток повторяет одно и то же.
   Стало ~76px: иконка слева, название и время в первой строке, описание —
   две строки под ними. При девяти переходах видно все, а не три.          */
.city-exits{
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:10px;
}
.city-exit{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  grid-template-areas:
    "icon name name"
    "icon desc time";
  column-gap:12px;row-gap:3px;
  align-content:center;
  padding:12px 14px;
  min-height:0;
  text-align:left;
}
.city-icon{
  grid-area:icon;align-self:center;
  width:34px;height:34px;margin:0;font-size:17px;
}
/* Район дублировался на большинстве плиток и ничего не добавлял:
   куда идёшь — написано названием, где стоишь — в карточке локации. */
.city-exit small{display:none}
.city-exit b{
  grid-area:name;align-self:end;margin:0;
  font-size:14px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.city-exit p{
  grid-area:desc;align-self:start;margin:0;
  font-size:10.5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.city-exit em{
  grid-area:time;align-self:end;justify-self:end;padding-left:8px;
  margin:0;padding:0;border:0;width:auto;
  font-size:10px;white-space:nowrap;color:var(--sf-gem-lit);
}

@media (max-width:560px){
  .city-exits{grid-template-columns:1fr}
  .city-exit p{-webkit-line-clamp:1}
}

/* ── Арт локаций ────────────────────────────────────────────────────────────
   Карточка получает data-loc с идентификатором локации, поэтому картинка
   подключается одной строкой на локацию. Файлов нет — остаётся градиент. */
/* Одна строка на локацию: подключает картинку и включает большой арт-блок.
   Пока файла нет — локация остаётся с компактной шапкой. */
.city-current[data-loc="central_square"],
.city-current[data-loc="temple_square"],
.city-current[data-loc="light_temple"],
.city-current[data-loc="dark_temple"],
.city-current[data-loc="elements_temple"],
.city-current[data-loc="arena"],
.city-current[data-loc="bank"],
.city-current[data-loc="state_store"],
.city-current[data-loc="bookshop"],
.city-current[data-loc="tavern"],
.city-current[data-loc="market_square"],
.city-current[data-loc="berezka"],
.city-current[data-loc="forge"],
.city-current[data-loc="auction"],
.city-current[data-loc="post"],
.city-current[data-loc="healer"],
.city-current[data-loc="hostel"],
.city-current[data-loc="commission"],
.city-current[data-loc="castle_square"],
.city-current[data-loc="tower_gate"],
.city-current[data-loc="clan_hall"],
.city-current[data-loc="clan_caves"]{ aspect-ratio:4 / 1; min-height:180px; max-height:min(46vh,360px); }
.city-current[data-loc="central_square"]{--sf-loc-art:url('/assets/locations/central_square.webp')}
.city-current[data-loc="temple_square"]{--sf-loc-art:url('/assets/locations/temple_square.webp')}
.city-current[data-loc="light_temple"]{--sf-loc-art:url('/assets/locations/light_temple.webp')}
.city-current[data-loc="dark_temple"]{--sf-loc-art:url('/assets/locations/dark_temple.webp')}
.city-current[data-loc="elements_temple"]{--sf-loc-art:url('/assets/locations/elements_temple.webp')}
.city-current[data-loc="arena"]{--sf-loc-art:url('/assets/locations/arena.webp')}
.city-current[data-loc="bank"]{--sf-loc-art:url('/assets/locations/bank.webp')}
.city-current[data-loc="state_store"]{--sf-loc-art:url('/assets/locations/state_store.webp')}
.city-current[data-loc="bookshop"]{--sf-loc-art:url('/assets/locations/bookshop.webp')}
.city-current[data-loc="tavern"]{--sf-loc-art:url('/assets/locations/tavern.webp')}
.city-current[data-loc="market_square"]{--sf-loc-art:url('/assets/locations/market_square.webp')}
.city-current[data-loc="berezka"]{--sf-loc-art:url('/assets/locations/berezka.webp')}
.city-current[data-loc="forge"]{--sf-loc-art:url('/assets/locations/forge.webp')}
.city-current[data-loc="auction"]{--sf-loc-art:url('/assets/locations/auction.webp')}
.city-current[data-loc="post"]{--sf-loc-art:url('/assets/locations/post.webp')}
.city-current[data-loc="healer"]{--sf-loc-art:url('/assets/locations/healer.webp')}
.city-current[data-loc="hostel"]{--sf-loc-art:url('/assets/locations/hostel.webp')}
.city-current[data-loc="commission"]{--sf-loc-art:url('/assets/locations/commission.webp')}
.city-current[data-loc="castle_square"]{--sf-loc-art:url('/assets/locations/castle_square.webp')}
.city-current[data-loc="tower_gate"]{--sf-loc-art:url('/assets/locations/tower_gate.webp')}
.city-current[data-loc="clan_hall"]{--sf-loc-art:url('/assets/locations/clan_hall.webp')}
.city-current[data-loc="clan_caves"]{--sf-loc-art:url('/assets/locations/clan_caves.webp')}

/* ============================================================================
   АРТ ВО ВСЮ КАРТОЧКУ, НАВИГАЦИЯ КОМПАКТНАЯ (arena-165)
   ----------------------------------------------------------------------------
   Раньше место делилось наоборот: карточка локации 154px, а девять кнопок
   переходов съедали остальное описаниями, которые никто не читает после
   первого раза. Теперь карточка держит пропорцию арта (4:1) и показывает его
   целиком, а переход — это иконка, название и время пути в одну строку.
   ========================================================================== */
.city-current{
  /* Без арта карточка сжимается по содержимому: пропорцию 4:1 включает только
     правило конкретной локации, у которой картинка есть. Иначе 21 локация из
     22 показывала бы 300px пустого градиента. */
  min-height:0;
  padding:0;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  /* Затемнение только снизу — верх и середина арта остаются чистыми. */
  background:
    linear-gradient(180deg,transparent 0%,transparent 38%,rgba(9,7,22,.55) 66%,rgba(9,7,22,.94) 100%),
    var(--sf-loc-art,linear-gradient(135deg,#241a52,#0d0a1e)) center/cover no-repeat;
}
.city-current>*{position:relative;z-index:2}
.city-current>small{
  position:absolute;top:16px;left:20px;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.city-current h2{
  margin:0;padding:0 20px 6px;
  font-size:clamp(20px,2.4vw,30px);
  text-shadow:0 2px 12px rgba(0,0,0,.95);
}
.city-current p{
  margin:0;padding:0 20px 10px;
  color:#d6cfee;font-size:12px;max-width:70ch;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
}
.city-current-meta{padding:0 20px 16px;gap:8px}
.city-current-meta span{background:rgba(7,5,18,.72);backdrop-filter:blur(4px)}

/* Карточка — колонка, чтобы текст лёг стопкой у нижнего края. */
.city-current{flex-direction:column;justify-content:flex-end}

/* ── Переход = иконка + название + время. Без описания. ─────────────────── */
.city-exits{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.city-exit{
  grid-template-columns:28px minmax(0,1fr) auto;
  grid-template-areas:"icon name time";
  align-items:center;
  column-gap:10px;row-gap:0;
  padding:9px 12px;
}
.city-icon{width:28px;height:28px;font-size:14px}
.city-exit b{
  grid-area:name;align-self:center;
  font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Описание и район не нужны: название говорит, куда идёшь, а подробности
   всё равно откроются на месте. Оставлены в подсказке при наведении. */
.city-exit p{display:none}
.city-exit em{grid-area:time;align-self:center;font-size:10px;padding-left:6px}

@media (max-width:560px){
  .city-current{aspect-ratio:auto;min-height:150px;max-height:none}
  .city-exits{grid-template-columns:1fr}
}

/* ── Телеграф в верхней панели (arena-165) ──────────────────────────────────
   Был отдельной строкой во всю ширину под шапкой — целая полоса экрана под
   компонент, который нужен раз в сессию. Стал иконкой со счётчиком рядом с
   остальными кнопками; список раскрывается выпадашкой. */
.telegraph-bar{
  position:relative;
  display:flex;align-items:center;
  min-height:0;padding:0;margin:0;
  border:0;background:none;z-index:60;
}
.telegraph-toggle{
  width:32px;height:32px;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(28,21,68,.9),rgba(10,8,24,.9));
  color:var(--sf-gold-lit);position:relative;
}
.telegraph-toggle:hover{border-color:var(--sf-gold)}
.telegraph-toggle span{font-size:14px;line-height:1}
/* Подпись «Телеграф» не нужна: иконка и счётчик говорят сами за себя. */
.telegraph-toggle b{display:none}
.telegraph-toggle i{
  position:absolute;top:-6px;right:-6px;
  min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;
  border-radius:9px;background:#b83a4a;color:#fff;
  font-size:9px;font-style:normal;font-weight:700;
  box-shadow:0 0 0 2px rgba(10,8,24,.9);
}
.telegraph-list{
  top:calc(100% + 8px);left:auto;right:0;
  width:min(420px,calc(100vw - 24px));
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(21,16,56,.98),rgba(10,8,24,.99));
  backdrop-filter:blur(10px);
}
.telegraph-item{border-bottom-color:rgba(201,164,76,.12)}
.telegraph-item b{color:var(--sf-gold-lit)}
.telegraph-item.unread b::before{content:"● ";color:var(--sf-gem-lit)}

/* ── Точечные исправления каскада ───────────────────────────────────────────
   1. В style.css лежит `.city-exit .city-icon{width:39px;height:39px}` — два
      класса, поэтому одиночный `.city-icon` его не перебивает.
   2. В колоночном флексе align-items управляет ГОРИЗОНТАЛЬЮ, и flex-end
      прижимал заголовок локации к правому краю. */
.city-exit .city-icon{width:26px;height:26px;font-size:13px;border-radius:4px}
.city-current{align-items:stretch}
.city-current>small{
  /* Метка района лежит поверх арта, ей нужна подложка на светлых картинках. */
  padding:3px 8px;border-radius:3px;
  background:rgba(7,5,18,.55);backdrop-filter:blur(3px);
}
.city-exit{padding:7px 11px}

/* Заголовок блока переходов был декоративным в две строки. Сжимаем в одну,
   чтобы второй ряд переходов помещался без прокрутки. */
.city-exits-title{
  display:flex;align-items:baseline;gap:10px;
  margin:12px 0 8px;padding:0 2px;
}
.city-exits-title>div{display:flex;align-items:baseline;gap:10px}
.city-exits-title small{font-size:8.5px;letter-spacing:.2em}
.city-exits-title h3{margin:0;font-size:15px}
.city-exits-title>span{margin-left:auto;font-size:10px}
.city-exit{padding:6px 10px}
.city-exit b{font-size:12.5px}
.sf-stage > .view-stack{padding:12px 14px}

/* ── Карточка локации на узких экранах ──────────────────────────────────────
   Метка района была прибита абсолютно к верху, и при короткой карточке на неё
   налезал заголовок. На мобильном возвращаем её в поток: весь текст идёт
   стопкой у нижнего края поверх усиленного затемнения. */
@media (max-width:760px){
  .city-current{
    aspect-ratio:auto;min-height:210px;max-height:none;
    background:
      linear-gradient(180deg,transparent 0%,transparent 26%,rgba(9,7,22,.72) 58%,rgba(9,7,22,.97) 100%),
      var(--sf-loc-art,linear-gradient(135deg,#241a52,#0d0a1e)) center/cover no-repeat;
  }
  .city-current>small{
    position:static;
    padding:0 14px 4px;background:none;backdrop-filter:none;
  }
  .city-current h2{padding:0 14px 4px;font-size:20px}
  .city-current p{padding:0 14px 8px;font-size:11.5px}
  .city-current-meta{padding:0 14px 12px}
}

/* ============================================================================
   ВЫРАВНИВАНИЕ РАМКИ И СОДЕРЖИМОГО (arena-166)
   ----------------------------------------------------------------------------
   Орнамент рисуется поверх панели: край 11px, самоцвет 17px, угол до 44px.
   Содержимое подходило вплотную к границе и оказывалось под узором — заметнее
   всего на кнопках переходов внизу сцены и на шапке чата.
   Заводим единый отступ --sf-inset, на который отодвигается содержимое, и
   приводим углы к одному размеру, чтобы рамки выглядели одинаково.
   ========================================================================== */
:root{ --sf-inset:15px; }

/* Один размер угла на всех панелях каркаса — раньше сцена была заметно крупнее. */
.sf-stage{--sf-corner:32px}
.global-chat,.sf-side{--sf-corner:32px}

/* Сцена: содержимое отступает от орнамента со всех сторон. */
.sf-stage > .view-stack{padding:var(--sf-inset)}

/* Чат: шапка, лента и поле ввода не залезают под верхний и нижний узор. */
.global-chat .chat-headline{padding-top:calc(var(--sf-inset) - 4px);padding-inline:var(--sf-inset)}
.global-chat .chat-tabs{margin-inline:calc(var(--sf-inset) - 6px)}
.global-chat .chat-feed{padding-inline:var(--sf-inset)}
.global-chat .chat-entry{margin-bottom:calc(var(--sf-inset) - 9px);margin-inline:calc(var(--sf-inset) - 6px)}

/* Боковая панель — так же. */
.sf-side-head{padding:calc(var(--sf-inset) - 3px) var(--sf-inset)}
.sf-side-body{padding:8px var(--sf-inset) var(--sf-inset)}

/* Самоцветы по серединам сторон уводим ровно на линию границы,
   чтобы они не висели над содержимым. */
.sf-framed::before{inset:-2px}
.sf-stage.sf-framed::before,
.global-chat.sf-framed::before,
.sf-side.sf-framed::before{background-position:top left,bottom left,left top,right top,top center,bottom center}

/* Сцена была одновременно рамкой и областью прокрутки, поэтому содержимое
   всегда проезжало под верхним и нижним узором. Разделяем: рамка остаётся на
   .sf-stage и не прокручивается, а прокрутка уходит внутрь, в поле отступа. */
.sf-stage{
  overflow:hidden;
  display:grid;
  padding:var(--sf-inset);
}
.sf-stage > .view-stack{
  overflow:auto;
  min-height:0;
  padding:0;
}
/* Чат: вкладки и кнопка отправки подходили вплотную к краю. */
.global-chat .chat-tabs{margin-inline:var(--sf-inset)}
.global-chat .chat-entry{
  margin-inline:var(--sf-inset);
  margin-bottom:calc(var(--sf-inset) - 6px);
  border:1px solid var(--sf-gold-dim);border-radius:3px;overflow:hidden;
}

/* Полосы прокрутки под тему: светлая системная резала глаз на тёмных панелях. */
.sf-stage > .view-stack,.chat-feed,.sf-side-body,.telegraph-list{
  scrollbar-width:thin;
  scrollbar-color:rgba(201,164,76,.35) transparent;
}
.sf-stage > .view-stack::-webkit-scrollbar,
.chat-feed::-webkit-scrollbar,
.sf-side-body::-webkit-scrollbar,
.telegraph-list::-webkit-scrollbar{width:8px;height:8px}
.sf-stage > .view-stack::-webkit-scrollbar-track,
.chat-feed::-webkit-scrollbar-track,
.sf-side-body::-webkit-scrollbar-track,
.telegraph-list::-webkit-scrollbar-track{background:transparent}
.sf-stage > .view-stack::-webkit-scrollbar-thumb,
.chat-feed::-webkit-scrollbar-thumb,
.sf-side-body::-webkit-scrollbar-thumb,
.telegraph-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(201,164,76,.45),rgba(124,77,219,.35));
  border-radius:8px;
}
.sf-stage > .view-stack::-webkit-scrollbar-thumb:hover,
.chat-feed::-webkit-scrollbar-thumb:hover{background:rgba(201,164,76,.6)}

/* ============================================================================
   ПЕРЕХОДЫ КАК ЧИПЫ (arena-167)
   ----------------------------------------------------------------------------
   Из 22 локаций у 18 ровно один выход — назад на площадь. Сетка карточек ради
   одной кнопки «назад» бессмысленна, поэтому переходы стали строчными чипами:
   они занимают ровно столько места, сколько есть переходов, и переносятся по
   ширине. На Центральной площади с её девятью выходами это два ряда.
   ========================================================================== */
.city-exits{
  display:flex;flex-wrap:wrap;gap:7px;
  grid-template-columns:none;
}
.city-exit{
  /* В style.css у .city-exit стоит flex-direction:column — без явного row
     чип разворачивается в столбик и вырастает втрое. */
  display:inline-flex;flex-direction:row;align-items:center;gap:8px;
  width:auto;min-height:0;
  padding:7px 13px 7px 9px;
  border:1px solid rgba(201,164,76,.28);
  border-radius:999px;
  background:rgba(28,21,68,.55);
  box-shadow:none;
  text-align:left;
  transition:border-color .16s,background .16s,transform .16s;
}
.city-exit:hover:not(:disabled){
  transform:none;
  border-color:var(--sf-gold);
  background:rgba(124,77,219,.3);
  box-shadow:none;
}
.city-exit .city-icon{
  width:22px;height:22px;font-size:12px;border-radius:50%;
  border-color:rgba(201,164,76,.3);
}
.city-exit b{
  font-size:12.5px;font-weight:600;font-family:inherit;
  color:var(--sf-text);white-space:nowrap;overflow:visible;
}
.city-exit:hover:not(:disabled) b{color:var(--sf-gold-lit)}
.city-exit em{
  font-size:10px;color:var(--sf-muted);
  padding:0;margin-left:2px;
}

.city-exits-title{margin:14px 0 9px;padding:0 2px;display:block}
.city-exits-title h3{
  margin:0;font-family:Georgia,serif;font-size:13px;
  color:var(--sf-muted);font-weight:400;letter-spacing:.04em;
}

@media (max-width:560px){
  .city-exits{gap:6px}
  .city-exit{padding:8px 14px 8px 10px}
}

/* ── Ручка растягивания нижнего дока ────────────────────────────────────── */
.sf-dock{height:var(--sf-dock-h, clamp(180px,26dvh,260px))}
.chat-resize-handle{
  display:block;position:absolute;top:-4px;left:0;right:0;height:12px;
  cursor:ns-resize;z-index:10;background:transparent;
}
.chat-resize-handle i{
  display:block;width:52px;height:3px;margin:5px auto 0;border-radius:3px;
  background:rgba(201,164,76,.35);transition:background .16s;
}
.chat-resize-handle:hover i{background:var(--sf-gold)}
body.chat-resizing{cursor:ns-resize;user-select:none}
body.chat-resizing .chat-resize-handle i{background:var(--sf-gold-lit)}
@media (max-width:900px){ .chat-resize-handle{display:none} }

/* В style.css ручка спрятана селектором `body:not(.battle-focus) .chat-resize-handle`
   — он специфичнее одиночного класса, поэтому повторяем ту же форму. Растягивать
   док можно на любом экране, а не только в бою. */
.chat-resize-handle{display:block}
@media (max-width:900px){
  .chat-resize-handle{display:none}
}
/* Чип чуть плотнее: 50px на строчную кнопку всё ещё много. */
.city-exit{padding:5px 12px 5px 7px}
.city-exit .city-icon{width:20px;height:20px;font-size:11px}
/* Чип 44px всё ещё великоват для строчной кнопки — доводим до ~34px,
   чтобы второй ряд переходов помещался без прокрутки. */
.city-exit{padding:4px 11px 4px 5px;gap:7px}
.city-exit .city-icon{width:18px;height:18px;font-size:10px}
.city-exit b{font-size:12px}
.city-exits-title{margin:12px 0 7px}

/* Действие локации лежит на арте справа внизу — картинка перестаёт быть просто
   украшением и несёт главную кнопку экрана. */
.city-current{position:relative}
.city-service-action{
  position:absolute;right:18px;bottom:16px;
  padding:11px 22px;font-size:12px;letter-spacing:.1em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.5);
}
@media (max-width:760px){
  .city-service-action{position:static;margin:0 14px 14px;align-self:flex-start}
}

/* Компактная шапка локации без арта: название, описание и действие в строку. */
.city-current:not([style*="--sf-loc-art"]){padding-block:0}
.city-current>small{margin-top:14px}
.city-current h2{margin-top:2px}
.city-current p{padding-bottom:14px}
.city-current .city-service-action{position:absolute;right:18px;bottom:16px}

/* Метка района была позиционирована абсолютно ради арт-карточки и налезала на
   заголовок, когда карточка сжалась. Возвращаем в общий поток — она одинаково
   уместна и над названием на арте, и в компактной шапке. */
.city-current>small{
  position:static;
  padding:14px 20px 0;margin:0;
  background:none;backdrop-filter:none;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.city-current{justify-content:flex-end}
.city-current h2{margin-top:0}

/* ── Экран безопасности ─────────────────────────────────────────────────── */
.security-card{
  max-width:520px;padding:26px 28px;
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(21,16,56,.9),rgba(12,10,28,.92));
  --sf-corner:28px;
}
.security-card h2{margin:0 0 6px;font-family:Georgia,serif;color:var(--sf-gold-lit);font-size:20px}
.security-card>p{margin:0 0 18px;color:var(--sf-muted);font-size:12px;line-height:1.5}
.security-card label{display:block;margin-bottom:12px}
.security-card label span{
  display:block;margin-bottom:5px;
  color:var(--sf-muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}
.security-card input{
  width:100%;padding:10px 12px;
  border:1px solid #383168;border-radius:3px;
  background:rgba(7,5,18,.8);color:var(--sf-text);
  transition:border-color .18s,box-shadow .18s;
}
.security-card input:focus{
  outline:0;border-color:var(--sf-gem);
  box-shadow:0 0 0 1px rgba(124,77,219,.4),0 0 18px rgba(124,77,219,.22);
}
.security-actions{margin-top:16px}
.security-note{margin-top:12px;font-size:12px;min-height:18px}
.security-note.ok{color:#7fd8a4}
.security-note.bad{color:#ff9a9a}

/* ── Верхняя панель: сжимается вместо того, чтобы вылезать ──────────────────
   С семью пунктами меню содержимое стало шире экрана (1772px при 1280).
   Панель теперь ужимается по частям: сначала укорачивается название локации,
   затем прячутся подписи пунктов меню — иконки остаются с подсказками. */
.topbar{overflow:hidden}
.brand{flex:0 0 auto;min-width:0}
.brand-copy b{white-space:nowrap}
.main-nav{min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.nav-btn{flex:0 0 auto}
.resources{min-width:0;flex:0 1 auto}
.resources>span{flex:0 0 auto}
.location-pill{min-width:0;max-width:190px}
.location-pill b{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media (max-width:1500px){
  .location-pill{max-width:130px}
}
@media (max-width:1320px){
  /* Подписи уходят, остаются иконки — название читается в подсказке. */
  .nav-btn b{display:none}
  .nav-btn{padding:7px 9px}
  .nav-btn span{font-size:17px}
}
@media (max-width:1120px){
  .brand-copy{display:none}
}

/* Превью последнего уведомления рассчитано на широкую полосу и в компактной
   панели растекается текстом. В верхней панели остаётся только иконка. */
.telegraph-bar .telegraph-latest{display:none}

/* ── Качество вещи цветом рамки (arena-170) ─────────────────────────────────
   Уровень предмета показывается свечением слота, а не отдельной картинкой.
   Это снимает необходимость рисовать иконку под каждый уровень: одной иконки
   на тип предмета хватает, а различает их рамка. */
.inventory-live-item[data-item-level="7"]{ --sf-rarity:#8f9aac }
.inventory-live-item[data-item-level="8"]{ --sf-rarity:#4d9a72 }
.inventory-live-item[data-item-level="9"]{ --sf-rarity:#4b79a6 }
.inventory-live-item[data-item-level="10"]{ --sf-rarity:#a06fd6 }
.inventory-live-item[data-item-level]{
  border-color:color-mix(in srgb, var(--sf-rarity, #8f9aac) 55%, transparent);
  box-shadow:inset 0 0 14px color-mix(in srgb, var(--sf-rarity, #8f9aac) 14%, transparent);
}
.inventory-live-item[data-item-level] img{
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--sf-rarity,#8f9aac) 45%, transparent));
}

/* Комнаты Башни: пропорция была 293:224 — случайное наследие старых картинок.
   Приводим к 4:3, под неё проще готовить арт. */
.tower-room-image{aspect-ratio:4 / 3;border-radius:4px;border-color:var(--sf-gold-dim)}

/* ============================================================================
   ШКАФ ЭКИПИРОВКИ (arena-171)
   ----------------------------------------------------------------------------
   Один и тот же блок рисуется и в «Снаряжении», и в бою рядом с каждым бойцом,
   поэтому раскладка «слоты вокруг фигуры» не годится — в бою фигуры нет.
   Оставляем два столбца по семь слотов, но рисуем их на CSS вместо
   wardrobe-panel.png на 2.3 МБ. Проценты позиций сохранены от прежнего макета,
   так что вид не меняется, а вес и привязка к картинке уходят.

   Пропорции слотов остаются «вещевыми»: серьги — полоса, нагрудник вытянут
   вверх, кольца — маленькие квадраты.
   ========================================================================== */
.wardrobe-art{
  position:relative;
  width:100%;height:100%;
  background:linear-gradient(180deg,rgba(20,15,52,.5),rgba(9,7,22,.6));
  border:1px solid rgba(201,164,76,.28);
  border-radius:4px;
  padding:0;
}
.wardrobe-slot{
  position:absolute;
  border:1px solid rgba(201,164,76,.3);
  border-radius:3px;
  background:linear-gradient(180deg,rgba(24,18,62,.75),rgba(10,8,26,.8));
  box-shadow:inset 0 0 8px rgba(0,0,0,.5);
  display:grid;place-items:center;
  transition:border-color .16s,box-shadow .16s;
}
.wardrobe-slot:hover{border-color:var(--sf-gold);box-shadow:0 0 10px rgba(201,164,76,.22)}
.wardrobe-slot.filled{background:linear-gradient(180deg,rgba(40,29,92,.82),rgba(13,10,32,.86))}
.wardrobe-slot.focus-slot{border-color:var(--sf-gem-lit);box-shadow:0 0 12px rgba(179,137,255,.35)}
.wardrobe-slot img{max-width:86%;max-height:86%;object-fit:contain}

/* Пустой слот помечен точкой, чтобы отличался от заполненного. */
.wardrobe-slot.empty::after{
  content:"";width:4px;height:4px;border-radius:50%;
  background:rgba(201,164,76,.25);
}

/* Контейнер шкафа в «Снаряжении» — прежняя колонка, без фоновой картинки. */
.equipped-grid{
  position:relative;
  display:block;
  padding:0;
  background:none;
  pointer-events:auto;
}

/* ============================================================================
   БОЙ: КАРКАС ПРОПУСКАЕТ СТАРУЮ РАСКЛАДКУ (arena-172)
   ----------------------------------------------------------------------------
   Боевой режим в style.css требует, чтобы .view-stack и .global-chat были
   ПРЯМЫМИ потомками .app-shell: он делает шапку флекс-колонкой и раздаёт им
   flex-basis. Мои обёртки .sf-stage и .sf-dock встали между ними, цепочка
   порвалась и весь бой схлопнулся в 16×8 пикселей.

   display:contents убирает обёртки из раскладки, не трогая разметку: их дети
   становятся прямыми потомками .app-shell, и прежние правила снова работают.
   Вне боя обёртки работают как обычно.

   Это временная мера. Когда боевой экран будет переписан, обёртки заработают
   и там, а полторы тысячи !important уйдут.
   ========================================================================== */
body.battle-focus .sf-stage,
body.battle-focus .sf-dock{
  display:contents;
}
/* Рамка сцены в бою не рисуется — обёртки нет, рисовать не на чем. */
body.battle-focus .sf-stage::before,
body.battle-focus .sf-stage::after{content:none}

/* Боковая панель «Кто онлайн» в бою не нужна: там своя колонка с расходниками.
   Оставленная в потоке, она забирала 544px и оставляла боевому экрану ноль. */
body.battle-focus .sf-side{display:none}

/* Высоту в бою раздаёт флекс, а не мои 100% из раскладки дока. */
body.battle-focus .global-chat{height:auto}

/* ── Ручка чата: видимая и удобная для захвата ───────────────────────────────
   Механизм работал, но полоска 52×3 терялась на фоне — выглядело так, будто
   тянуть нечего. Делаем шире, ярче и с курсором на всей полосе. */
.chat-resize-handle{
  height:14px;top:-7px;
  display:flex;align-items:center;justify-content:center;
}
.chat-resize-handle::before{
  content:"";position:absolute;inset:0;
}
.chat-resize-handle i{
  width:74px;height:5px;margin:0;border-radius:5px;
  background:linear-gradient(90deg,transparent,rgba(201,164,76,.75),transparent);
  box-shadow:0 0 8px rgba(201,164,76,.35);
  transition:background .16s,box-shadow .16s,width .16s;
}
.chat-resize-handle:hover i{
  width:110px;
  background:linear-gradient(90deg,transparent,var(--sf-gold-lit),transparent);
  box-shadow:0 0 14px rgba(240,214,143,.6);
}

/* ── Вкладки чата ───────────────────────────────────────────────────────────
   Были плоской полосой в 21px с заливкой на всю ячейку. Делаем нормальной
   высоты, с золотой подписью у активной и подчёркиванием вместо заливки. */
.global-chat .chat-tabs{
  height:34px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:6px;
  border:0;background:none;
  margin-top:6px;
}
.global-chat .chat-tabs button{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:100%;
  border:1px solid transparent;border-radius:4px;
  background:linear-gradient(180deg,rgba(20,15,52,.5),rgba(9,7,22,.5));
  color:var(--sf-muted);
  font-size:12px;letter-spacing:.04em;
  box-shadow:none;
  transition:color .16s,border-color .16s,background .16s;
}
.global-chat .chat-tabs button:hover{color:var(--sf-gold-lit);border-color:rgba(201,164,76,.3)}
.global-chat .chat-tabs button.active{
  color:var(--sf-gold-lit);
  border-color:var(--sf-gold-dim);
  background:linear-gradient(180deg,rgba(60,42,130,.55),rgba(20,14,52,.6));
  box-shadow:inset 0 -2px 0 var(--sf-gem-lit);
}
.global-chat .chat-tabs span{
  min-width:16px;height:16px;padding:0 5px;
  display:inline-grid;place-items:center;
  border-radius:9px;background:#b83a4a;color:#fff;
  font-size:9px;font-weight:700;margin:0;
}

/* ── Иконки шапки (arena-181) ────────────────────────────────────────────────
   Файлы белые на прозрачном фоне, поэтому кладутся не картинкой, а маской:
   виден только силуэт, а цвет берётся из currentColor. Значит золото, ховер и
   приглушённый неактивный пункт работают теми же правилами, что и у глифов,
   которые иконки заменили.                                                   */
.ui-ico{
  display:inline-block;width:18px;height:18px;flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
.ico-nav-city{--ico:url('/assets/ui/icons/nav-city.png')}
.ico-nav-character{--ico:url('/assets/ui/icons/nav-character.png')}
.ico-nav-inventory{--ico:url('/assets/ui/icons/nav-inventory.png')}
.ico-nav-clan{--ico:url('/assets/ui/icons/nav-clan.png')}
.ico-nav-mail{--ico:url('/assets/ui/icons/nav-mail.png')}
.ico-nav-rating{--ico:url('/assets/ui/icons/nav-rating.png')}
.ico-nav-security{--ico:url('/assets/ui/icons/nav-security.png')}
.ico-res-credits{--ico:url('/assets/ui/icons/res-credits.png')}
.ico-res-ekr{--ico:url('/assets/ui/icons/res-ekr.png')}
.ico-res-energy{--ico:url('/assets/ui/icons/res-energy.png')}
.ico-act-telegraph{--ico:url('/assets/ui/icons/act-telegraph.png')}
.ico-act-logout{--ico:url('/assets/ui/icons/act-logout.png')}
/* Звук выключен по умолчанию, класс .active вешает app.js при включении. */
.ico-act-sound{--ico:url('/assets/ui/icons/act-sound-off.png')}
#soundToggle.active .ico-act-sound{--ico:url('/assets/ui/icons/act-sound-on.png')}

.nav-btn .ui-ico{width:20px;height:20px}
.resources .ui-ico{width:16px;height:16px}
.telegraph-toggle .ui-ico{width:15px;height:15px}
.icon-btn{display:grid;place-items:center;padding:0}
.icon-btn .ui-ico{width:17px;height:17px}

@media (max-width:1320px){
  /* Подписи скрыты, иконка остаётся одна — ей нужен запас. */
  .nav-btn .ui-ico{width:22px;height:22px}
}


/* ============================================================================
   ВНУТРЕННИЕ ОКНА: ТРИ УРОВНЯ ГЛУБИНЫ (arena-183)
   ----------------------------------------------------------------------------
   Ажурная рамка была только у сцены, чата, «Кто онлайн» и экрана входа, а всё,
   что внутри, — плоские тёмные прямоугольники без единого признака, что это
   отдельное окно. Повесить ту же рамку на каждую панель нельзя: внутри уже
   обрамлённой сцены выйдет частокол из одинаковых узоров. Поэтому глубина
   разведена по трём уровням, и у каждого своя мера украшения:

     1. сцена, чат, «Кто онлайн», вход — полная рамка (.sf-framed, как было);
     2. панель внутри сцены — золотой волосок и четыре уголка;
     3. карточка внутри панели — волосок потоньше и отклик на наведение.

   Уголок панели нарочно проще углов сцены: дуга и две засечки, без самоцвета.
   Самоцвет — признак внешней рамки, повторённый двадцать раз он перестаёт
   что-либо значить.
   ========================================================================== */
:root{
  --sf-t-tl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%3E%3Cg%3E%3Cpath%20d%3D%22M1.6%209%20Q1.6%201.6%209%201.6%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M1.6%2013%20L1.6%2016.5%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M13%201.6%20L16.5%201.6%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sf-t-tr:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%2822%2C0%29%20scale%28-1%2C1%29%22%3E%3Cpath%20d%3D%22M1.6%209%20Q1.6%201.6%209%201.6%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M1.6%2013%20L1.6%2016.5%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M13%201.6%20L16.5%201.6%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sf-t-bl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%280%2C22%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M1.6%209%20Q1.6%201.6%209%201.6%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M1.6%2013%20L1.6%2016.5%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M13%201.6%20L16.5%201.6%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sf-t-br:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate%2822%2C22%29%20scale%28-1%2C-1%29%22%3E%3Cpath%20d%3D%22M1.6%209%20Q1.6%201.6%209%201.6%22%20stroke%3D%22%23c9a44c%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M1.6%2013%20L1.6%2016.5%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M13%201.6%20L16.5%201.6%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sf-tick:22px;
  --sf-panel-line:rgba(201,164,76,.26);
  --sf-panel-bg:linear-gradient(180deg,rgba(26,19,68,.62),rgba(11,8,28,.76));
  --sf-card-line:rgba(201,164,76,.16);
  --sf-card-bg:linear-gradient(180deg,rgba(22,16,58,.5),rgba(10,8,26,.62));
}

/* ── Уровень 2: панель ───────────────────────────────────────────────────── */
.paper-doll,.stat-card,.inventory-card,.rating-card,.clan-card,
.home-hero,.onboarding,.shop-hero,.shop-history,
.building-hero,.building-panel{
  border:1px solid var(--sf-panel-line);
  border-radius:4px;
  background:
    var(--sf-t-tl) left  top    / var(--sf-tick) var(--sf-tick) no-repeat,
    var(--sf-t-tr) right top    / var(--sf-tick) var(--sf-tick) no-repeat,
    var(--sf-t-bl) left  bottom / var(--sf-tick) var(--sf-tick) no-repeat,
    var(--sf-t-br) right bottom / var(--sf-tick) var(--sf-tick) no-repeat,
    var(--sf-panel-bg);
}

/* ── Уровень 3: карточка ─────────────────────────────────────────────────── */
.shop-item,.home-card,.inventory-live-item,.equipped-item,
.book-card,.auction-lot,.auction-inv,.mail-row,.clan-invite,.clan-member{
  border:1px solid var(--sf-card-line);
  border-radius:4px;
  background:var(--sf-card-bg);
  transition:border-color .16s,box-shadow .16s;
}
.shop-item:hover,.home-card:hover,.inventory-live-item:hover,
.book-card:hover,.auction-lot:hover,.mail-row:hover{
  border-color:rgba(201,164,76,.42);
  box-shadow:0 0 0 1px rgba(201,164,76,.08),0 6px 18px rgba(0,0,0,.35);
}

/* Заголовок панели получает золотую линию под собой: без неё «Рюкзак» и
   «Снаряжение» висели в воздухе и не читались как шапки своих окон. */
.stat-card h2,.inventory-card h2,.building-panel h2,.shop-hero h2{
  padding-bottom:8px;
  border-bottom:1px solid rgba(201,164,76,.16);
}

/* ── Пустые слоты показывают, что в них кладут ───────────────────────────── */
/* Было: четырнадцать одинаковых тёмных квадратов с точкой посередине. Новый
   боец не мог понять, где шлем, а где кольцо: подпись жила только во
   всплывающей подсказке. Теперь в пустом слоте лежит бледный силуэт своей
   вещи — те же иконки, что и в каталоге, дорисовывать ничего не нужно. */
.wardrobe-slot.empty::after{
  content:"";
  position:absolute;inset:11%;
  width:auto;height:auto;border-radius:0;
  background:var(--slot-ghost) center/contain no-repeat;
  opacity:.16;
  filter:grayscale(1) brightness(1.9);
  transition:opacity .16s;
}
.wardrobe-slot.empty:hover::after{opacity:.34}
.wardrobe-slot.empty[data-wardrobe-slot="helmet"]{--slot-ghost:url('/assets/items/generic/helmet-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="armor"]{--slot-ghost:url('/assets/items/generic/armor-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="leggings"]{--slot-ghost:url('/assets/items/generic/leggings-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="boots"]{--slot-ghost:url('/assets/items/generic/boots-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="gloves"]{--slot-ghost:url('/assets/items/generic/gloves-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="belt"]{--slot-ghost:url('/assets/items/generic/belt-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="shield"]{--slot-ghost:url('/assets/items/generic/shield-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="weapon"]{--slot-ghost:url('/assets/items/generic/weapon-sword.png')}
.wardrobe-slot.empty[data-wardrobe-slot="bracelet"]{--slot-ghost:url('/assets/items/generic/bracelet-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="earrings"]{--slot-ghost:url('/assets/items/generic/earrings-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="necklace"]{--slot-ghost:url('/assets/items/generic/necklace-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="ring1"]{--slot-ghost:url('/assets/items/generic/ring-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="ring2"]{--slot-ghost:url('/assets/items/generic/ring-warrior.png')}
.wardrobe-slot.empty[data-wardrobe-slot="ring3"]{--slot-ghost:url('/assets/items/generic/ring-warrior.png')}

/* ── Характеристики: значение не наезжает на подпись ─────────────────────── */
/* dd висел на отрицательном margin, и длинное значение («парир 0% · контр 20%
   · щит —») наползало на соседнюю строку. Обычная сетка это снимает. */
/* Строка — гибкая: пока подпись и значение помещаются, они стоят по краям
   одной строки; как только не помещаются — значение уходит на свою строку и
   прижимается вправо. Так ни одна пара не наезжает и ничего не обрезается. */
.stat-card dl{display:block}
.stat-card dl div{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:1px 14px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.stat-card dl div:last-child{border-bottom:0}
.stat-card dt,.stat-card dd{padding:0;border:0;font-size:11.5px;line-height:1.35}
.stat-card dt{flex:0 1 auto}
.stat-card dd{float:none;margin:0;flex:1 1 auto;min-width:0;text-align:right;font-weight:700}

/* ── Прилавок: вещь видно, а не угадываешь ───────────────────────────────── */
/* Иконки нарисованы в 256×256, а показывались в 64 — половина работы уходила
   впустую. Заодно подняты подписи: 7.5px не читаются ни на каком экране. */
.shop-item{grid-template-columns:96px minmax(0,1fr) auto;gap:12px;padding:12px}
.shop-item-image{height:96px;border-color:var(--sf-card-line);border-radius:3px}
.shop-item-image img{max-width:88px;max-height:88px}
.shop-item-copy h3{font-size:14px;margin:3px 0 6px}
.shop-item-copy p{font-size:9px;line-height:1.5}
.shop-item-copy>small,.shop-item-copy em{font-size:8.5px}
.inventory-live-item{grid-template-columns:56px minmax(0,1fr) auto}
.inventory-live-item img{width:56px;height:56px}
.inventory-live-item b{font-size:10.5px}
.inventory-live-item small,.inventory-live-item em{font-size:8px}

/* ── Персонаж: полезное поднято выше сгиба ───────────────────────────────── */
/* Карточка героя занимала 580px почти пустого места: портрет справа, текст
   внизу слева, между ними дыра во весь экран, а состояние бойца и Арена
   начинались уже за сгибом. Высота ограничена долей экрана, и всё, что ниже,
   попадает в первый взгляд. */

/* ── Снаряжение: фигура, шкаф и образы перестают спорить за место ─────────── */
/* Панель — сетка 408+196, но выбор образа падал в неё третьим блоком: он
   начинался под фигурой и уезжал под шкаф, а нижний ряд миниатюр срезался
   краем панели. Раскладка задана явно: верхний ряд — боец и шкаф, нижний —
   образы во всю ширину. */
.paper-doll{
  grid-template-rows:minmax(0,1fr) auto;
  align-items:stretch;justify-items:stretch;
  gap:12px;padding:12px;
}
.paper-doll .paper-doll-stage{grid-column:1;grid-row:1;width:100%;height:100%}
.paper-doll .equipped-grid{grid-column:2;grid-row:1}
.paper-doll .appearance-picker{
  grid-column:1 / -1;grid-row:2;
  width:auto;margin:0;align-self:end;
}
/* Десять образов встают одной строкой: в пять колонок они шли двумя рядами,
   и нижний срезался краем панели. */
.paper-doll .appearance-grid{grid-template-columns:repeat(10,minmax(0,1fr))}

/* ── Прилавок: до товара было 303 пикселя шапки ──────────────────────────── */
/* Заголовок раздела, карточка магазина, переключатель магазинов, панель
   инструментов, примечание и строка категорий шли шестью полосами подряд и
   съедали весь первый экран — на ноутбуке было видно два товара из сорока.
   Заголовок раздела убран как дословный повтор карточки магазина (та же пара
   «Государственный магазин» + описание), остальное ужато. Шапка стала 175px,
   видно вчетверо больше прилавка. */
.view[data-view-panel="shop"] .section-title{display:none}
.shop-hero{padding:12px 16px;margin-bottom:0}
.shop-hero h2{font-size:19px;margin:2px 0 3px}
.shop-balances>span{padding:7px 10px}
.shop-switch{margin:8px 0 0}
.shop-switch button{padding:8px;font-size:10.5px}
.shop-toolbar{margin:8px 0 0}
.shop-notice{padding:6px 10px;margin-top:8px;line-height:1.4}
.shop-categories{padding:8px 0 6px}

/* Витрина: карточки одинаковой высоты, чтобы ряд не «пилило» по нижнему краю
   из-за разной длины описаний. */
.shop-grid{gap:10px}
.shop-item{align-items:stretch}
.shop-item-copy{display:flex;flex-direction:column;justify-content:center}
.shop-item-buy{justify-content:center;min-width:96px}


/* ============================================================================
   ПЕРСОНАЖ: ЭКРАН БОЙЦА, А НЕ БАННЕР С КАРТИНКОЙ (arena-184)
   ----------------------------------------------------------------------------
   Было так: слева короткий абзац служебного текста про то, что «чат и рейтинг
   работают через один сервер», справа портрет во всю высоту, между ними пустой
   прямоугольник на треть экрана. Самое нужное — сколько у бойца HP, маны и
   энергии — лежало ПОД карточкой, отдельной полосой, и на невысоком экране
   вообще не попадало в первый взгляд. Рейтинг висел табличкой поверх сапог
   портрета.

   Стало: карточка собрана как лист персонажа. Слева сверху вниз — клуб и
   статус сервера, имя с уровнем, рейтинг со счётом, три витальные полосы,
   опыт, кнопки. Справа боец во весь рост. Служебный абзац убран: он ничего не
   говорил об этом персонаже.

   Размеры заданы долями экрана, а не пикселями: на ноутбуке карточка ужимается
   и всё равно показывает бойца целиком, на большом мониторе разворачивается,
   а не оставляет пустоту.
   ========================================================================== */
.home-hero{
  display:grid;
  /* Лист персонажа не растягивается вместе с монитором: колонка текста имеет
     потолок, а всё лишнее место достаётся бойцу. На широком экране фигура
     становится крупнее — это и есть главный герой экрана, — а не появляется
     пустое поле справа от строчек. */
  grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);
  /* Строка ограничена высотой карточки: без этого ряд разъезжался по
     собственной высоте картинки (799px) и обрезался краем. */
  grid-template-rows:minmax(0,1fr);
  align-items:stretch;
  min-height:0;
  height:clamp(300px,44vh,540px);
  gap:clamp(14px,2vw,32px);
  padding:clamp(14px,2vh,26px) clamp(18px,2vw,32px);
  overflow:hidden;
}
.home-hero .home-copy{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(8px,1.4vh,16px);min-width:0;
  /* Строки не растягиваются во всю ширину монитора: длинная строка читается
     хуже короткой, а полосы HP в полтора метра выглядят нелепо. */
  max-width:560px;
}
.home-hero h1{
  margin:0;font-family:Georgia,serif;font-weight:600;
  font-size:clamp(24px,3.2vh,38px);line-height:1.1;
}
.home-hero .profile-progress{margin:0;max-width:none}

/* Рейтинг и счёт переехали с портрета в колонку: табличка поверх сапог читалась
   плохо и мешала фигуре. */
.hero-record{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hero-record b{font:700 13px Georgia,serif;color:var(--sf-gold-lit)}
.hero-record span{font-size:10.5px;color:var(--sf-muted)}

/* ── Витальные полосы ────────────────────────────────────────────────────── */
/* Три цифры «156/156 · 0/0 · 20/20» в отдельной карточке ничего не показывали:
   чтобы понять, много это или мало, приходилось делить в уме. Полоса отвечает
   на этот вопрос сразу, а цифра остаётся рядом для точности. */
.vitals{display:grid;gap:clamp(5px,.9vh,9px)}
.vital{
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;gap:10px;
}
.vital>span{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sf-muted);
}
.vital>i{
  position:relative;height:9px;border-radius:99px;
  border:1px solid rgba(201,164,76,.24);
  background:rgba(8,6,20,.72);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
  overflow:hidden;
}
.vital>i::after{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:var(--fill,0%);border-radius:99px;transition:width .35s ease;
}
.vital.hp>i::after{background:linear-gradient(90deg,#7d2f38,#cf6265)}
.vital.mp>i::after{background:linear-gradient(90deg,#2f4f82,#5f9bd6)}
.vital.en>i::after{background:linear-gradient(90deg,#7a6a2f,#d9bd78)}
.vital>b{
  font:700 11.5px Georgia,serif;color:var(--sf-text);
  min-width:72px;text-align:right;white-space:nowrap;
}

/* ── Боец ────────────────────────────────────────────────────────────────── */
/* contain вместо «высота 105%»: при любой высоте карточки фигура видна целиком,
   от макушки до сапог, и никогда не срезается краем. Стоит на подсвеченном
   круге, а не висит в пустоте. */
.home-hero .home-character{
  position:relative;min-height:0;height:100%;
  display:grid;place-items:end center;overflow:visible;
}
/* Абсолютное позиционирование, а не height:100%: как элемент грид-сетки
   картинка считала высоту от собственной пропорции (1024×1536 → 1043px) и
   уезжала за нижний край карточки. inset:0 задаёт ей размер площадки
   однозначно, а contain вписывает бойца целиком при любой высоте. */
.home-hero .home-character img{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
}
.home-hero .character-aura{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 8% at 50% 96%,rgba(124,77,219,.45),transparent 70%),
    radial-gradient(ellipse 52% 46% at 50% 58%,rgba(124,77,219,.16),transparent 72%);
}

/* Состояние уехало наверх — в нижнем ряду осталось два блока, а не три. */
.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:900px){
  .home-hero{grid-template-columns:1fr;height:auto;gap:18px}
  .home-hero .home-character{height:clamp(220px,34vh,320px);order:-1}
  .dashboard-grid{grid-template-columns:1fr}
}

/* Карточки «Арена» и «Последний бой» держали 138px под заголовок и одну строку.
   На невысоком экране эти лишние сантиметры выталкивали их за нижний край. */
.dashboard-card{min-height:0;padding:13px 15px}

/* ── Панели приёмов не должны выпадать из общего вида (arena-189) ─────────── */
/* В arena-183 золотую рамку с уголками получили карточки снаряжения, рюкзака и
   характеристик, а «Боевые приёмы», «Развитие», расстановка слотов и библиотека
   остались в старом сине-сером виде с радиусом 13px. Рядом друг с другом это
   читалось как сломанная вёрстка. Догоняем их до второго уровня, а слоты и
   карточки библиотеки — до третьего. */
.gear-techniques-card,.development-card,
.combat-loadout-slots-panel,.combat-library-panel{
  border:1px solid var(--sf-panel-line);
  border-radius:4px;
  background:
    var(--sf-t-tl) left  top    / var(--sf-tick) var(--sf-tick) no-repeat,
    var(--sf-t-tr) right top    / var(--sf-tick) var(--sf-tick) no-repeat,
    var(--sf-t-bl) left  bottom / var(--sf-tick) var(--sf-tick) no-repeat,
    var(--sf-t-br) right bottom / var(--sf-tick) var(--sf-tick) no-repeat,
    var(--sf-panel-bg);
}
/* Вложенные панели внутри «Боевых приёмов» — на уровень тише внешней. */
.combat-loadout-slots-panel,.combat-library-panel{--sf-tick:16px}

.combat-loadout-slot,.combat-library-card{
  border:1px solid var(--sf-card-line);
  border-radius:4px;
  background:var(--sf-card-bg);
  transition:border-color .16s,box-shadow .16s;
}
.combat-loadout-slot:hover,.combat-library-card:hover{border-color:rgba(201,164,76,.42)}
.combat-loadout-slot.selected{
  border-color:var(--sf-gold);
  box-shadow:0 0 0 1px rgba(201,164,76,.25),0 0 14px rgba(201,164,76,.16);
}
.combat-loadout-slot img,.combat-library-card img{border-radius:3px}


/* ── Значки тактик (arena-189) ───────────────────────────────────────────── */
/* Шесть тактик рисуются вектором и кладутся маской, как иконки шапки: цвет
   берётся из currentColor, поэтому каждая тактика красится своим цветом, а на
   любом фоне остаётся читаемой. Раньше здесь стояли типографские знаки
   ⚔ ◆ ⬟ ↩ ◇ ◉ — они разного кегля и в строке прыгали. */
:root{
  --sf-tac-blood:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8%201.6%20L9.7%205.4%20L9.7%2010%20L6.3%2010%20L6.3%205.4%20Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M4.6%2010.4%20H11.4%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2010.8%20V14.2%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --sf-tac-crit:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8%201.5%20C8%201.5%2012.8%207.2%2012.8%2010.1%20A4.8%204.8%200%200%201%203.2%2010.1%20C3.2%207.2%208%201.5%208%201.5%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --sf-tac-guard:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8%201.6%20L13.4%203.7%20V8%20C13.4%2011.2%2010.9%2013.5%208%2014.4%20C5.1%2013.5%202.6%2011.2%202.6%208%20V3.7%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --sf-tac-counter:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M13.2%2010.6%20C13.2%206.4%2010.4%204.2%205.6%204.2%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.4%201.6%20L5%204.2%20L8.4%206.8%20Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M13.2%2010.6%20V14%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --sf-tac-parry:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2%202.4%20L8%208.2%20L14%202.4%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M2.6%2013.2%20H13.4%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%208.6%20L5.4%2012.4%20H10.6%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --sf-tac-spirit:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M8%2014%20C8%2014%201.6%209.9%201.6%205.9%20A3.6%203.6%200%200%201%208%203.8%20A3.6%203.6%200%200%201%2014.4%205.9%20C14.4%209.9%208%2014%208%2014%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
.tac{
  display:inline-block;width:12px;height:12px;flex:0 0 auto;vertical-align:-1px;
  background-color:currentColor;
  -webkit-mask:var(--tac) center/contain no-repeat;
          mask:var(--tac) center/contain no-repeat;
}
/* Двойной класс, чтобы цвет тактики перебивал `.tactics-panel i` в бою. */
.tac.tac-blood{--tac:var(--sf-tac-blood);color:#d8b86a}
.tac.tac-crit{--tac:var(--sf-tac-crit);color:#cf6265}
.tac.tac-guard{--tac:var(--sf-tac-guard);color:#7ca8d2}
.tac.tac-counter{--tac:var(--sf-tac-counter);color:#9d8fd6}
.tac.tac-parry{--tac:var(--sf-tac-parry);color:#83d5e7}
.tac.tac-spirit{--tac:var(--sf-tac-spirit);color:#e0616f}

/* В бою значок крупнее: панель тактик читается на ходу. */
.tactics-panel .tac{width:14px;height:14px}

/* Стоимость приёма в карточке библиотеки: значок тактики и число рядом. */
.tech-cost{display:inline-flex;align-items:center;gap:3px;margin-right:8px;font-size:9.5px}
.tech-cost b{font-weight:700}
/* Строка стоимости стоит сразу под названием приёма — видно, что копить. */
.tech-cost-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin:3px 0 5px}

/* ── Бой: тактики и пустые слоты (arena-190) ─────────────────────────────── */
/* Три поломки, которые видно только в бою.

   1. Цвета тактик не доходили: в battle.css правило
      `body.battle-v2 .battle-bottom .tactics-panel i` тяжелее моего `.tac.tac-*`,
      и все шесть значков красились одним золотом. Поднимаем вес.
   2. Значки и числа в боевой ленте были мельче читаемого.
   3. Силуэт в пустом слоте экипировки задан в 16% прозрачности — в «Снаряжении»
      этого хватает, а в бою слот втрое меньше, и слот выглядел просто пустым.
      Отсюда «картинки одежды пропали»: у бойца ничего не надето, а подсказки не
      видно. В бою силуэт делаем заметнее.                                     */
body.battle-v2 .battle-bottom .tactics-panel .tac.tac-blood{color:#d8b86a}
body.battle-v2 .battle-bottom .tactics-panel .tac.tac-crit{color:#cf6265}
body.battle-v2 .battle-bottom .tactics-panel .tac.tac-guard{color:#7ca8d2}
body.battle-v2 .battle-bottom .tactics-panel .tac.tac-counter{color:#9d8fd6}
body.battle-v2 .battle-bottom .tactics-panel .tac.tac-parry{color:#83d5e7}
body.battle-v2 .battle-bottom .tactics-panel .tac.tac-spirit{color:#e0616f}

body.battle-v2 .battle-bottom .tactics-panel{gap:calc(2 * var(--s))}
body.battle-v2 .battle-bottom .tactics-panel .tac{
  width:calc(11 * var(--s));height:calc(11 * var(--s));
}
body.battle-v2 .battle-bottom .tactics-panel b{
  font:700 calc(12 * var(--s))/1 Georgia,serif;
  color:#f4e8c6;text-shadow:0 1px 2px rgba(0,0,0,.85);
}

.wardrobe-panel .wardrobe-slot.empty::after,
body.battle-v2 .wardrobe-slot.empty::after{opacity:.30}
.wardrobe-panel .wardrobe-slot.empty:hover::after,
body.battle-v2 .wardrobe-slot.empty:hover::after{opacity:.5}