/* ── ARCANE-STEEL THEME TOKENS ─────────────
   One committed visual world (deep-blue arcane steel), not a light/dark
   toggle — the game itself has no daylight setting, so there is no second
   theme to design for. New/hand-tuned rules should read off these; the bulk
   of the older rules below were algorithmically re-hued into this same family
   (see the class-select and stat-bar overrides for where hues were then
   hand-picked back apart for per-class identity).
   The token NAMES still read gold/leather/iron from the earlier torch-lit
   palette — they are used in hundreds of rules, so the hues moved and the
   names stayed. Read them as roles: --gold is the frame accent, --leather the
   panel body, --void the backdrop. Warm accents (--ember, --blood, --moss,
   --gold-hi) are deliberately still warm/saturated: they mark loot, danger
   and the action cluster against the blue chrome. */
:root {
  --void:#0a121b;
  --void-2:#0f1a29;
  --leather:#152438;
  --leather-hi:#1c314c;
  --leather-lo:#0f1a29;
  --iron:#336a91;
  --iron-dim:#29476e;
  --gold:#5c9ac6;
  --gold-hi:#a9daff;
  --gold-dim:#346c95;
  --blood:#9c2a3a;
  --blood-hi:#d2495a;
  --ember:#d97f3f;
  --ember-hi:#f4a662;
  --moss:#6f9c4a;
  --parchment:#ccd7e1;
  --parchment-dim:#8fa3bd;
  --panel-line:#1f3654;
  --ink:#0c1521;
  --font-display:Georgia,"Iowan Old Style","Palatino Linotype",serif;

  /* ── высота нижней навигации ─────────────────────────────────────────────
     Одно число на всё. Раньше их было четыре: три `62px` здесь (сама полоса,
     верх выдвижных панелей и их высота) и NAV_H в js/constants.js — а от
     NAV_H отсчитывается ВСЯ нижняя половина игры: веер действий, джойстик,
     дуга бафов, нижняя граница мира. Разъехались бы они молча: полоса стала
     бы ниже, а веер продолжал бы держаться от старой высоты, оставив под
     собой пустую ленту.

     JS читает именно её (NAV_H, js/constants.js), поэтому расходиться им
     теперь нечем. Уменьшить навигацию — это правка вот этой строки.

     56 → 50: снова просили на 10% ниже (56 сама уже была таким же шагом от
     62). Иконки и подписи уменьшены во столько же — ниже по файлу и в
     разметке вкладок. */
  --nav-h:50px;
}

* {
  margin:0; padding:0; box-sizing:border-box;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
a, img { -webkit-touch-callout:none; pointer-events:none; }
a[href] { pointer-events:auto; }
input, textarea { user-select:text; -webkit-user-select:text; }
html, body { height:100%; overflow:hidden; }
body {
  background:#0c1622;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  display:flex; justify-content:center; align-items:center;
}
#app {
  position:relative;
  width:min(430px, 100%);
  height:100vh; height:100dvh;         /* мобильный: весь экран */
  max-height:932px;                    /* десктоп: не выше телефона */
  overflow:hidden; background:#000000;
  flex-shrink:0;
}
canvas { display:block; width:100%; height:100%; }

/* ── SPLASH / LOADING SCREEN ─────────────── */
#login-screen {
  position:absolute; inset:0;
  background:#070c13;
  display:flex; align-items:center; justify-content:center;
  color:#c1ccd5; z-index:200; overflow:hidden;
}
.splash-bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  /* contain, а не cover: на узких телефонах cover срезал края логотипа
     LIBERTY. Поля по краям — под тёмный фон самой картинки. */
  object-fit:contain; object-position:center; background:#070504;
  pointer-events:none;
}

.splash-content {
  position:absolute; left:0; right:0;
  bottom:9%;
  z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:0; text-align:center;
  animation:splash-fadein 0.8s ease both;
}
@keyframes splash-fadein { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

.splash-dots {
  display: flex; gap: 10px; align-items: center;
}
.splash-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #d8a54c;
  animation: splash-dot 1.4s ease-in-out infinite;
}
.splash-dots span:nth-child(2) { animation-delay: 0.22s; }
.splash-dots span:nth-child(3) { animation-delay: 0.44s; }
@keyframes splash-dot {
  0%,80%,100%{transform:scale(0.7);opacity:0.3}
  40%        {transform:scale(1.2);opacity:1}
}

.auth-error { color:#ee6676; font-size:12px; min-height:16px; text-align:center; margin-top:16px; }
.auth-chat-link {
  display:inline-block;
  margin-top:14px;
  padding:10px 22px;
  border-radius:10px;
  background:linear-gradient(180deg,#2fa5e0,#1c7fbf);
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.auth-chat-link:active { filter:brightness(0.92); }
#login-screen.splash-out {
  animation: splash-out 0.4s ease both;
  pointer-events: none;
}
@keyframes splash-out { to { opacity:0; transform:scale(1.04); } }

/* ── CHARACTER SELECT ─────────────────── */
#char-select {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 20%,#111d2e 0%,#080e15 100%);
  display:flex; flex-direction:column;
  align-items:center; color:#c1ccd5; z-index:100;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  touch-action:pan-y; padding-bottom:24px;
}

/* Class dots — replaces the old wide tab row; the carousel below is the nav */
.cs-dots {
  display:flex; justify-content:center; gap:9px;
  width:100%; flex-shrink:0; padding:14px 0 0;
}
.cs-dot {
  width:22px; height:22px; padding:0; border:none; background:none;
  cursor:pointer; touch-action:manipulation;
  display:flex; align-items:center; justify-content:center;
}
.cs-dot::after {
  content:''; width:8px; height:8px; border-radius:50%;
  background:rgba(193,204,213,.18); transition:all .25s ease;
}
.cs-dot:hover::after { background:rgba(193,204,213,.32); }
.cs-dot.active::after { width:22px; border-radius:5px; }
.cs-dot-lev.active::after         { background:#90a4b5; }
.cs-dot-deathknight.active::after { background:#a077c9; }
.cs-dot-ranger.active::after      { background:#7fa855; }
.cs-dot-mage.active::after        { background:#6f9adb; }
.cs-dot-warlock.active::after     { background:#c05a70; }
.cs-dot-runefighter.active::after { background:#c98a4a; }
.cs-dot-assassin.active::after    { background:#6a5578; }

/* Character carousel: active class centered, neighbors peeking at the edges */
.cs-stage {
  position:relative; width:100%; height:220px;
  margin:14px 0 0; flex-shrink:0;
  overflow:hidden; touch-action:pan-y;
}
.cs-track { position:absolute; inset:0; }
.cs-card {
  position:absolute; top:50%; left:50%; width:220px; height:220px;
  /* No negative margin here — the JS-driven transform below already carries
     the translate(-50%,-50%) half-size centering offset, on top of which it
     adds the carousel's translateX/scale per card. */
  transition:transform .38s cubic-bezier(.22,.9,.32,1), opacity .38s ease;
  will-change:transform;
}
.cs-card.cs-peek { cursor:pointer; }
.cs-canvas {
  position:absolute; inset:0;
  width:220px; height:220px;
  display:block;
  image-rendering:pixelated; image-rendering:crisp-edges;
  pointer-events:none;
}
.cs-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%; z-index:20;
  background:rgba(11,19,30,.5); border:1px solid rgba(193,204,213,.12);
  color:#8197ab; font-size:16px; line-height:1; font-family:var(--font-display);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s,color .15s;
  touch-action:manipulation;
}
.cs-nav:hover { background:rgba(11,19,30,.75); color:#ccd7e1; }
.cs-nav-prev { left:2px; }
.cs-nav-next { right:2px; }

/* Name + type badge */
.cs-charinfo {
  display:flex; flex-direction:column; align-items:center;
  gap:4px; margin:6px 0 10px; flex-shrink:0;
}
.cs-name { font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:1px; color:var(--parchment); text-shadow:0 2px 0 rgba(0,0,0,0.6); }
.cs-badge {
  font-size:11px; color:#8197ab; letter-spacing:.8px;
  background:rgba(193,204,213,.05);
  border:1px solid rgba(193,204,213,.08);
  border-radius:20px; padding:3px 10px;
}

/* Stat bars */
.cs-statbars {
  display:flex; flex-direction:column; gap:6px;
  width:100%; padding:0 16px; box-sizing:border-box; flex-shrink:0;
}
.cs-sbar { display:flex; align-items:center; gap:8px; }
.cs-sbl { font-size:10px; font-weight:700; color:#8197ab; letter-spacing:.5px; width:36px; text-align:right; flex-shrink:0; }
.cs-sbtrack {
  flex:1; height:6px; border-radius:3px;
  background:rgba(193,204,213,.06);
  overflow:hidden;
}
.cs-sbfill { height:100%; border-radius:3px; transition:width .35s ease; }
.cs-sbv { font-size:11px; font-weight:700; color:#a1b2c1; width:36px; flex-shrink:0; }
.cs-bar-hp  { background:linear-gradient(90deg,#597d3a,#85b957); }
.cs-bar-atk { background:linear-gradient(90deg,#84333c,#e15868); }
.cs-bar-def { background:linear-gradient(90deg,#3d5566,#7fa4bd); }
.cs-bar-spd { background:linear-gradient(90deg,#31678d,#e3a649); }
.cs-bar-as  { background:linear-gradient(90deg,#5c4270,#9a78bf); }

/* Skills section */
.cs-skills-section {
  width:100%; padding:12px 16px 0; box-sizing:border-box; flex-shrink:0;
}
.cs-skills-hdr {
  font-size:9px; font-weight:700; color:#5797c4; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:8px;
}
.cs-skills-list { display:flex; flex-direction:column; gap:6px; }
.cs-skill {
  display:flex; align-items:flex-start; gap:8px;
  background:rgba(193,204,213,.03);
  border:1px solid rgba(193,204,213,.06);
  border-radius:10px; padding:8px 10px;
}
.cs-skill-key {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 28%, var(--leather-hi), var(--leather-lo) 80%);
  border:1px solid var(--gold-dim);
  font-size:11px; font-weight:700; color:var(--gold-hi);
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.cs-skill-body { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.cs-skill-name { font-size:13px; font-weight:700; color:#b1bfcb; }
.cs-skill-desc { font-size:11px; color:#8197ab; }
.cs-skill-cd   { font-size:10px; color:#285372; margin-top:1px; }

/* Select button */
.cs-btn {
  display:block; margin:14px 16px 0; width:calc(100% - 32px);
  padding:13px 8px; border:1px solid var(--gold-dim); border-radius:3px;
  font-family:var(--font-display); text-transform:uppercase;
  font-size:13px; font-weight:700; cursor:pointer;
  transition:all .15s; user-select:none; touch-action:manipulation;
  letter-spacing:1.5px; flex-shrink:0;
}
.cs-btn-lev         { background:linear-gradient(135deg,#344151,#5d7492); color:#dde3e9; box-shadow:0 4px 18px rgba(93,116,146,.35); }
.cs-btn-deathknight { background:linear-gradient(135deg,#382a4a,#6d4d8f); color:#e2d3f2; box-shadow:0 4px 18px rgba(109,77,143,.35); }
.cs-btn-ranger      { background:linear-gradient(135deg,#2c3f1e,#527a3a); color:#d3e8b8; box-shadow:0 4px 18px rgba(82,122,58,.35); }
.cs-btn-mage        { background:linear-gradient(135deg,#1e2e4a,#3d6d9f); color:#cfe2f5; box-shadow:0 4px 18px rgba(61,109,159,.35); }
.cs-btn-warlock     { background:linear-gradient(135deg,#3a1a28,#8a3a4a); color:#f0cdd9; box-shadow:0 4px 18px rgba(138,58,74,.35); }
.cs-btn-runefighter { background:linear-gradient(135deg,#3a2712,#a86b3f); color:#f2ddc4; box-shadow:0 4px 18px rgba(168,107,63,.35); }
.cs-btn-assassin    { background:linear-gradient(135deg,#18131c,#4a3a52); color:#d9cfe0; box-shadow:0 4px 18px rgba(74,58,82,.35); }
.cs-btn:hover  { opacity:.88; transform:translateY(-1px); }
.cs-btn:active { transform:scale(.98); opacity:.75; }
/* Row holding cs-btn-active and its "Опробовать персонажа" sibling
   (js/charselect.js's _csSwitchChar) — the row supplies the width/margin
   .cs-btn normally carries on its own, so both buttons share it evenly. */
.cs-btn-row { display:flex; gap:8px; margin:14px 16px 0; }
.cs-btn-row .cs-btn { flex:1.4; margin:0; width:auto; }
.cs-btn-trial {
  flex:1; margin:0; padding:13px 8px; border-radius:3px;
  border:1px solid rgba(193,204,213,.35); background:rgba(193,204,213,.08);
  color:#c1ccd5; font-family:var(--font-display); text-transform:uppercase;
  font-size:11px; font-weight:700; letter-spacing:1px; cursor:pointer;
  transition:all .15s; user-select:none; touch-action:manipulation;
}
.cs-btn-trial:hover  { opacity:.88; background:rgba(193,204,213,.14); }
.cs-btn-trial:active { transform:scale(.98); opacity:.75; }
.cs-btn.cs-resume {
  background:linear-gradient(135deg,#142337,#1f3553) !important;
  color:#e69419 !important;
  border:1px solid rgba(230,148,25,.3);
  box-shadow:0 4px 18px rgba(230,148,25,.18) !important;
}

/* Loading overlay */
#cs-loading {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 40%,#111d2e 0%,#070c13 100%);
  display:flex; align-items:center; justify-content:center; z-index:110;
}
.csl-box  {
  position:absolute; left:0; right:0; bottom:9%;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:0 24px; z-index:1;
}
.csl-emoji {
  font-size:80px; line-height:1; display:block;
  animation:csl-float 2.4s ease-in-out infinite;
}
@keyframes csl-float {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-10px) scale(1.05); }
}
.csl-name {
  font-size:24px; font-weight:900; color:#e69419; letter-spacing:3px;
  text-shadow:0 0 20px rgba(230,148,25,.4);
}
/* ── экран загрузки ──────────────────────────────────────────────────────
   Арт во весь экран, полоса внизу. Полоса показывает НАСТОЯЩИЙ прогресс:
   сколько листов спрайтов и файлов орнамента уже разобрано, плюс ответ
   сервера — см. csLoadProgress (js/charselect.js). Раньше здесь крутились три
   точки, которые не значили ничего: они анимировались одинаково и на быстрой
   сети, и на зависшей загрузке. */
.csl-art {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; background:#070504;
  /* Никаких pointer-events: под ним нет ничего, что можно нажать, а перехват
     касания на экране загрузки читается как зависание. */
  pointer-events:none; user-select:none;
}
/* Затемнение снизу, чтобы полоса и текст читались поверх любой части арта:
   картинка внизу светлеет (лава), и белый процент на ней терялся. */
#cs-loading::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(to bottom, rgba(8,6,4,0) 0%, rgba(8,6,4,0.86) 62%, rgba(8,6,4,0.97) 100%);
  pointer-events:none;
}
.csl-bar {
  position:relative; width:min(280px, 68vw); height:8px;
  background:rgba(10,8,5,0.85);
  border:1px solid rgba(203,161,89,0.45); border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.6);
}
.csl-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,#6b4a17,#e5aa52 60%,#f4d8a7);
  border-radius:999px;
  /* Плавно, но не настолько, чтобы полоса врала: 180мс догоняют шаг, а не
     рисуют движение там, где ничего не грузится. */
  transition:width .18s linear;
}
.csl-pct {
  font-size:13px; font-weight:800; color:#f0d8a8; letter-spacing:.5px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.csl-dots { display:flex; gap:10px; margin-top:-4px; }
.csl-dot {
  width:9px; height:9px; border-radius:50%;
  background:#223b5b; animation:csl-blink 1.4s ease-in-out infinite;
}
.csl-dot:nth-child(2) { animation-delay:.25s; }
.csl-dot:nth-child(3) { animation-delay:.5s; }
@keyframes csl-blink {
  0%,70%,100% { background:#223b5b; transform:scale(.85); }
  35%          { background:#e69419; transform:scale(1.25); box-shadow:0 0 8px #e6941944; }
}
.csl-status { font-size:12px; color:#294870; letter-spacing:2px; text-transform:uppercase; }

/* ── MONSTER LIST (flat, accordion) ────── */
.mon-list { display:flex; flex-direction:column; gap:5px; }
.mon-item {
  border:1px solid rgba(193,204,213,.07); border-radius:12px;
  background:rgba(193,204,213,.03); overflow:hidden;
}
.mon-item.open { border-color:rgba(230,148,25,.25); }
.mon-hdr {
  display:flex; align-items:center; gap:8px;
  padding:11px 12px; cursor:pointer; touch-action:manipulation; user-select:none;
}
.mon-hdr:active { background:rgba(193,204,213,.05); }
.mon-hdr .dot {
  display:inline-block; width:9px; height:9px; border-radius:50%;
  flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
.mon-titles { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mon-lvl {
  font-size:9px; color:#637b9b; letter-spacing:.4px; text-transform:uppercase;
}
.mon-name-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mon-name { font-size:14px; font-weight:700; color:#c1ccd5; }
.mon-chevron {
  font-size:16px; color:#8197ab; transition:transform .15s; flex-shrink:0;
}
.mon-item.open .mon-chevron { transform:rotate(90deg); color:#e69419; }
.mon-body {
  display:none; padding:0 12px 14px;
}
.mon-variant + .mon-variant {
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(193,204,213,.07);
}
.mon-variant-hdr {
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:#b1bfcb; margin-bottom:6px;
}
.mon-variant-hdr .dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
.fi-boss-tag {
  font-size:9px; font-weight:700; color:#ed5a6b; letter-spacing:1px;
  background:rgba(235,73,92,.15); border:1px solid rgba(235,73,92,.3);
  border-radius:4px; padding:2px 6px;
}
.fi-mstats {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px;
}
.fi-mstats span {
  font-size:11px; color:#8197ab;
  background:rgba(193,204,213,.04); border-radius:6px; padding:3px 7px;
}
.fi-mstats b { color:#c1ccd5; }
.fi-drops-hdr { font-size:9px; color:#5797c4; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:5px; }
.fi-drops { display:flex; flex-direction:column; gap:3px; }
.fi-drop {
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; padding:3px 0; border-bottom:1px solid rgba(193,204,213,.04);
}
.fi-drop:last-child { border-bottom:none; }
.fi-drop-lbl { color:#91a5b6; flex:1; }
.fi-drop-val { color:#b1bfcb; font-weight:600; }
.fi-drop-icon { width:20px; flex-shrink:0; display:flex; align-items:center; margin-right:4px; }

/* ── NPC TALK BUTTON ──────────────────── */
/* Sits above the joystick (its top edge is at H-250, see updateJoyCenter in
   js/input.js) rather than on the bottom strip: the action fan now owns that
   strip out to x = W-182, and a centred prompt is ~134px wide, so on any
   phone width it would have covered — and, being a DOM button, swallowed
   taps on — the fan's lowest skill button. */
#npc-talk-btn {
  position:absolute; bottom:256px; left:50%; transform:translateX(-50%);
  background:rgba(26,45,70,0.95); border:1px solid #5797c4;
  border-radius:20px; padding:10px 22px;
  color:#e69419; font-size:14px; font-weight:bold;
  /* Above the chat widgets (#chat-preview 61, #chat-btn 62, index.html): the
     preview bubble sits on the same bottom strip and is wide enough to cover
     most of this button, so at the old z-index:30 walking up to an NPC left
     the "Поговорить" prompt hidden behind a chat message. The button is
     hidden outright while the chat panel is open (see the display rule in
     js/game.js), so winning here never means covering the chat input. */
  z-index:63; cursor:pointer; user-select:none;
  box-shadow:0 4px 20px rgba(93,154,198,0.4);
  transition:opacity 0.15s;
  touch-action:manipulation;
}
#npc-talk-btn:active { opacity:0.7; }

/* ── DEATH MODAL ──────────────────────── */
#death-modal {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.88);
  display:flex; align-items:center; justify-content:center; z-index:200;
  backdrop-filter:blur(4px);
}
.death-panel {
  position:relative;
  background:
    radial-gradient(ellipse 200px 140px at 50% -10%, rgba(156,42,58,0.18), transparent 65%),
    linear-gradient(175deg,var(--leather-hi),var(--leather-lo) 85%);
  border:1px solid var(--gold-dim);
  border-radius:2px;
  padding:32px 24px 24px;
  text-align:center;
  width:min(88%, 290px);
  box-shadow:0 0 0 1px #000, 0 30px 50px -15px rgba(0,0,0,0.8), 0 0 40px rgba(156,42,58,0.15);
}
.death-panel::before, .death-panel::after {
  content:""; position:absolute; width:14px; height:14px;
  border:1.5px solid var(--gold);
}
.death-panel::before { top:8px; left:8px; border-right:none; border-bottom:none; }
.death-panel::after  { bottom:8px; right:8px; border-left:none; border-top:none; }
.death-skull {
  font-size:44px; margin-bottom:8px;
  filter:grayscale(0.2) drop-shadow(0 0 10px rgba(156,42,58,0.6));
  animation:deathSkullPulse 2s ease-in-out infinite;
}
@keyframes deathSkullPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.75; transform:scale(0.95); }
}
.death-title {
  font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--blood-hi);
  text-transform:uppercase;
  margin-bottom:16px; letter-spacing:3px;
  text-shadow:0 2px 0 rgba(0,0,0,0.7);
}
.death-info {
  margin-bottom:16px; line-height:2;
  display:flex; flex-direction:column; gap:2px;
}
.death-stat {
  display:block; font-size:13px; color:var(--parchment-dim);
}
.death-lbl { color:#37739d; }
.death-penalty {
  background:rgba(156,42,58,0.22);
  border:1px solid var(--blood);
  border-radius:2px;
  color:#e08a94; font-size:12px; font-weight:600;
  padding:7px 12px; margin-bottom:18px;
  display:none;
}
.death-btn-respawn {
  width:100%; padding:13px; margin-bottom:10px;
  background:linear-gradient(180deg,var(--blood-hi),var(--blood) 75%);
  border:1.5px solid var(--gold); border-radius:2px;
  clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);
  padding-left:20px;
  font-family:var(--font-display); text-transform:uppercase;
  color:var(--parchment); font-size:14px; font-weight:700; cursor:pointer;
  letter-spacing:1.2px;
  transition:opacity .15s, filter .15s;
}
.death-btn-respawn:active { opacity:.7; }
.death-btn-respawn:hover { filter:brightness(1.1); }

/* ── NPC OVERLAY & DIALOG ─────────────── */
#npc-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.82);
  z-index:160; align-items:flex-end; justify-content:center;
  padding-bottom:70px;
}
#npc-dialog {
  background:#0e1927;
  border:1px solid rgba(78,145,193,0.5);
  border-radius:18px;
  width:min(380px,96vw);
  max-height:74vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.npc-hdr {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px 12px;
  border-bottom:1px solid #17283e;
  position:sticky; top:0; background:#0e1927; z-index:2;
}
.npc-name { font-size:17px; font-weight:bold; color:#e69419; }
.npc-subdesc { font-size:11px; color:#8197ab; margin-top:3px; }
.npc-close {
  margin-left:auto; background:none; border:none;
  color:#4086b7; font-size:22px; cursor:pointer; padding:0 4px;
  line-height:1;
}
.npc-close:hover { color:#a1b2c1; }
.npc-body { padding:12px 14px 20px; }

/* ── SHOP STYLES ─────────────────────── */
.shop-gold {
  font-size:13px; color:#a1b2c1; padding:6px 0 10px;
}
.shop-gold b { color:#ebab4b; }
.shop-sec {
  font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:#2d5e81; margin:8px 0 8px;
}
.shop-list { display:flex; flex-direction:column; gap:7px; }
.shop-row {
  display:flex; align-items:center; gap:10px;
  background:rgba(193,204,213,0.03);
  border:1px solid #192b43; border-radius:10px;
  padding:9px 12px;
}
.shop-item-icon { font-size:22px; width:28px; text-align:center; flex-shrink:0; }
.shop-item-info { flex:1; min-width:0; }
.shop-item-name { font-size:13px; font-weight:600; color:#c1ccd5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:-1px -1px 0 #000000aa,1px -1px 0 #000000aa,-1px 1px 0 #000000aa,1px 1px 0 #000000aa; }
.shop-item-stat { font-size:11px; color:#8197ab; margin-top:2px; }
.shop-btn {
  padding:7px 12px; border:none; border-radius:8px;
  background:linear-gradient(135deg,#346c94,#4187b9);
  color:#c1ccd5; font-size:12px; font-weight:bold; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
  transition:transform 0.1s, box-shadow 0.1s, background 0.1s;
  touch-action:manipulation;
  box-shadow:0 3px 8px rgba(52,108,148,0.5);
}
.shop-btn:active {
  transform:scale(0.88);
  box-shadow:0 1px 3px rgba(52,108,148,0.3);
  background:linear-gradient(135deg,#254e6a,#346c94);
}
.shop-btn.disabled { background:#17283e; color:#223c5d; pointer-events:none; box-shadow:none; }
.shop-btn-qty { color:#f0dcb0; }
/* Quantity picker at the merchant — how many potions one tap buys. */
.shop-qty { display:flex; gap:6px; flex-wrap:wrap; }
.shop-qty-btn {
  flex:1; min-width:44px;
  padding:7px 4px; border-radius:8px;
  background:rgba(193,204,213,0.03);
  border:1px solid #192b43;
  color:#8197ab; font-size:12px; font-weight:600; cursor:pointer;
  touch-action:manipulation;
  transition:background 0.1s, color 0.1s, border-color 0.1s;
}
.shop-qty-btn.on {
  background:rgba(235,171,75,0.15);
  border-color:#346c94;
  color:#ebab4b;
}
.shop-qty-btn:active { transform:scale(0.94); }
.shop-msg {
  background:rgba(236,87,104,0.15); border:1px solid #eb4e61;
  border-radius:8px; padding:8px 12px;
  color:#f17e8b; font-size:12px; text-align:center;
  margin-bottom:10px;
}
.shop-msg-ok {
  background:rgba(144,214,83,0.12); border:1px solid #90d653;
  border-radius:8px; padding:8px 12px;
  color:#90d653; font-size:12px; text-align:center;
  margin-bottom:10px;
  animation:shopMsgPop 0.2s ease;
}
@keyframes shopMsgPop { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} }
.inv-msg-err {
  position:absolute; bottom:70px; left:50%; transform:translateX(-50%);
  background:rgba(235,73,92,0.92); border:1px solid #eb4e61;
  border-radius:10px; padding:8px 18px;
  color:#c1ccd5; font-size:13px; font-weight:600;
  white-space:nowrap; pointer-events:none; z-index:20;
  animation:shopMsgPop 0.2s ease;
}
.craft-mats-info {
  font-size:11px; color:#2d5e81; padding:4px 0 10px;
}
.craft-tabs {
  display:flex; gap:6px; margin:8px 0 10px;
}
.craft-tab {
  flex:1; padding:7px 0; border:1px solid #243e61; border-radius:8px;
  background:#0e1927; color:#4086b7; font-size:12px; font-weight:600;
  cursor:pointer; transition:all 0.15s; touch-action:manipulation;
}
.craft-tab.active {
  background:linear-gradient(135deg,#346c94,#4187b9);
  color:#c1ccd5; border-color:#4187b9;
}
.craft-group-hdr {
  font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:#2d5e81; margin:10px 0 5px; padding-left:2px;
}

/* ── Craft item grid ─────────────────────────── */
.craft-items-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:4px;
}
.craft-item-cell {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 4px; border-radius:8px; border:1px solid #192c45;
  background:rgba(193,204,213,0.03); cursor:pointer;
  transition:background 0.15s;
  touch-action:manipulation;
}
.craft-item-cell:active { background:rgba(193,204,213,0.08); }
.craft-item-cell.craftable { background:rgba(127,181,79,0.07); }
.craft-item-cell-icon { line-height:1; }
.craft-item-cell-name {
  font-size:8px; font-weight:600; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  width:100%; max-width:60px;
}

/* ── Craft detail modal (inside npc-body) ────── */
.craft-back-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 10px; margin-bottom:12px;
  border:1px solid #243e61; border-radius:7px;
  background:#0e1927; color:#5797c4; font-size:12px;
  cursor:pointer; touch-action:manipulation;
}
.craft-back-btn:active { opacity:0.7; }
.craft-detail-header {
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.craft-detail-icon { flex-shrink:0; }
.craft-detail-name { font-size:15px; font-weight:700; margin-bottom:4px; }
.craft-detail-stats { font-size:11px; color:#5797c4; }
.craft-reqs-title {
  font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:#2d5e81; margin-bottom:8px;
}
/* Pet candidates in the craft modal — tapping one opens the same item card
   the inventory uses (openPetStatsModal, js/npc.js). */
.pet-pick {
  flex:1; text-align:center; padding:6px 2px; border-radius:10px;
  cursor:pointer; touch-action:manipulation;
}
.pet-pick:active { opacity:0.75; }
.pet-preview-hint { font-size:11px; color:#2d5e81; text-align:center; margin-bottom:12px; }
.craft-reqs-list { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.craft-req-row {
  display:flex; align-items:center; gap:8px;
  padding:5px 8px; background:rgba(193,204,213,0.03);
  border:1px solid #192c45; border-radius:7px;
}
.craft-req-icon { flex-shrink:0; line-height:1; }
.craft-req-name { flex:1; font-size:11px; color:#a1b2c1; }
.craft-req-count { font-size:12px; font-weight:700; flex-shrink:0; }
.craft-chance-row {
  font-size:12px; color:#8197ab; text-align:center; margin-bottom:10px;
}
.craft-do-btn { width:100%; text-align:center; padding:10px; font-size:13px; }

/* ── INVENTORY ITEM MODAL ──────────────────── */
.imod-overlay {
  position:absolute; inset:0; z-index:170;
  background:rgba(0,0,0,0.65);
  display:flex; align-items:center; justify-content:center;
}
.imod-box {
  /* Цвет текста по умолчанию. Его тут не было вовсе, а ни body, ни #app его
     не задают — то есть всё, что не покрашено явно, наследовало ЧЁРНЫЙ на
     тёмно-синем фоне и было попросту невидимым. Заметили это на пояснении
     под характеристиками руны, но касалось оно любого текста в любой
     карточке, который забыли покрасить. Дочерние блоки со своим color
     (.imod-sub, .imod-stats) перебивают это как и раньше. */
  color:#b1bfcb;
  background:#0e1927;
  border:1px solid rgba(78,145,193,0.5);
  border-radius:16px;
  width:min(310px,92vw);
  padding:16px;
  display:flex; flex-direction:column; gap:12px;
}
.imod-hdr { display:flex; align-items:center; gap:12px; }
.imod-big-icon { flex-shrink:0; }
.imod-title-block { flex:1; min-width:0; }
.imod-name { font-size:15px; font-weight:bold; line-height:1.2; }
.imod-sub { font-size:11px; color:#8197ab; margin-top:3px; }
.imod-stats {
  font-size:13px; color:#b1bfcb; line-height:1.8;
  background:rgba(193,204,213,0.04);
  border-radius:8px; padding:8px 12px;
}
.imod-enh-block {
  background:rgba(230,148,25,0.06);
  border:1px solid rgba(230,148,25,0.15);
  border-radius:8px; padding:10px 12px;
  display:flex; flex-direction:column; gap:4px;
}
.imod-enh-title { font-size:12px; font-weight:bold; color:#e69419; }
.imod-enh-preview { font-size:11px; color:#b1bfcb; }
.imod-enh-chance { font-size:11px; color:#a1b2c1; }
.imod-btns { display:flex; gap:8px; }
.imod-btn {
  flex:1; padding:10px; border:none; border-radius:10px;
  font-size:14px; font-weight:bold; cursor:pointer;
  touch-action:manipulation;
}
.imod-equip { background:linear-gradient(135deg,#274469,#31658b); color:#eec276; }
.imod-equip:active { opacity:0.8; }
.imod-sell { background:linear-gradient(135deg,#3a1f1f,#5e3232); color:#e5a546; }
.imod-sell:active { opacity:0.8; }
.imod-enhance-btn { background:linear-gradient(135deg,#3a2a12,#5e4520); color:#e69419; }
.imod-enhance-btn:active { opacity:0.8; }

/* ── ЗАТОЧКА: выбор камня, анимация попытки, результат ─────────────────── */
/* Two option cards — обычная/безопасная — replacing what used to be a pair
   of small buttons whose only difference was a title= tooltip nobody on a
   touch screen ever sees (see the comment this replaced, git blame). Each
   card carries its own always-visible explanation instead. */
.enh-opt-card {
  background:rgba(209,204,197,0.04); border:1px solid rgba(209,204,197,0.12);
  border-radius:10px; padding:10px 12px;
  display:flex; flex-direction:column; gap:6px;
}
.enh-opt-card.enh-opt-safe { background:rgba(78,145,193,0.07); border-color:rgba(78,145,193,0.25); }
.enh-opt-hdr { display:flex; align-items:center; gap:8px; }
.enh-opt-title { font-size:13px; font-weight:bold; color:#e69419; flex:1; }
.enh-opt-safe .enh-opt-title { color:#7fb3e0; }
.enh-opt-qty { font-size:11px; color:#a3957c; }
.enh-opt-desc { font-size:11px; color:#a3957c; line-height:1.4; }
.enh-opt-btn { padding:8px; font-size:13px; background:linear-gradient(135deg,#274469,#31658b); color:#eec276; }
.enh-opt-safe .enh-opt-btn { background:linear-gradient(135deg,#17293f,#294870); color:#efc680; }
/* Шкала звёздных осколков у безопасной заточки: +10% за 100 осколков, до 90%. */
.enh-boost { display:flex; flex-direction:column; gap:7px; padding:9px 10px; border-radius:9px;
  background:rgba(80,200,240,0.06); border:1px solid rgba(80,200,240,0.25); }
.enh-boost-hdr { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#7fdcf5; }
.enh-boost-have { margin-left:auto; font-weight:600; color:#8fa3b3; }
.enh-boost-bar { display:grid; grid-template-columns:repeat(9, 1fr); gap:3px; }
.enh-boost-cell { height:9px; border-radius:3px; background:rgba(193,204,213,.10); }
.enh-boost-cell.is-base { background:#e69419; }
.enh-boost-cell.is-boost { background:#5fd3f5; box-shadow:0 0 6px rgba(95,211,245,.55); }
.enh-boost-ctl { display:flex; align-items:center; gap:10px; }
.enh-boost-btn { width:34px; height:30px; border-radius:8px; border:1px solid rgba(95,211,245,.4);
  background:rgba(95,211,245,.12); color:#bff0ff; font-size:18px; font-weight:800; cursor:pointer; touch-action:manipulation; }
.enh-boost-btn.disabled { opacity:.35; pointer-events:none; }
.enh-boost-val { flex:1; display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.enh-boost-val b { font-size:18px; color:#7fdcf5; }
.enh-boost-val span { font-size:10.5px; color:#8fa3b3; text-align:center; }
.enh-opt-btn:active { opacity:0.8; }
.enh-opt-btn.disabled { opacity:0.4; pointer-events:none; }

.enh-anim-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 10px; }
.enh-anim-ring {
  position:relative; width:72px; height:72px;
  display:flex; align-items:center; justify-content:center;
}
.enh-anim-ring::before {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:3px solid rgba(230,148,25,0.2); border-top-color:#e69419;
  animation: enh-spin 0.9s linear infinite;
}
@keyframes enh-spin { to { transform:rotate(360deg); } }
.enh-anim-lbl { font-size:13px; color:#e69419; font-weight:bold; }

.enh-result-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px 6px; }
.enh-result-icon { line-height:1; animation:enh-result-pop 0.35s ease; }
@keyframes enh-result-pop { from { transform:scale(0.4); opacity:0; } to { transform:scale(1); opacity:1; } }
.enh-result-lbl { font-size:15px; font-weight:800; }
.enh-result-lbl.success { color:#98e456; }
.enh-result-lbl.fail { color:#f17e8b; }
.enh-result-lbl.burn { color:#eb4e61; }

/* ── LOOT BOX ODDS ──────────────────────── */
.box-odds-list { display:flex; flex-direction:column; gap:8px; }
.box-odds-row {
  background:rgba(193,204,213,0.03); border:1px solid #192c45;
  border-radius:9px; padding:8px 10px;
}
.box-odds-hdr { font-size:12px; font-weight:700; margin-bottom:5px; }
.box-odds-icons { display:flex; flex-wrap:wrap; gap:2px; }

/* ── BOTTOM PANELS ─────────────────────── */
.bpanel {
  position:absolute; left:0; right:0; bottom:var(--nav-h);
  height:0; overflow:hidden;
  background:linear-gradient(175deg,var(--void-2),var(--void) 60%);
  border-top:2px solid var(--gold-dim);
  z-index:40;
  transition:height 0.28s cubic-bezier(.4,0,.2,1);
  display:none;
}
.bpanel.open { height:calc(100% - var(--nav-h)); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.bpanel.open *, #npc-dialog *, #char-select * { touch-action:pan-y; }
.bpanel.open, #npc-dialog, #char-select { touch-action:pan-y; }
/* ── оверлеи поверх игры, которым нужна прокрутка ──────────────────────────
   Правило `* { touch-action:none }` в начале файла выключает прокрутку
   пальцем ВЕЗДЕ — иначе палец, ведущий джойстик, таскал бы страницу. Всё,
   что должно прокручиваться, выведено из него поимённо, строкой выше.

   Новый оверлей об этом правиле не знает, и узнаёт о нём от игрока. Список
   наград «Письма» открывался, показывал обе награды и не прокручивался ни на
   миллиметр; кнопка «Забрать» при этом работала — то есть со стороны это
   выглядело как зависшая панель, а не как забытая строчка в CSS.

   Класс, а не ещё один id: следующему оверлею достаточно его повесить, и он
   не станет третьим случаем той же истории. */
.ov-scroll { touch-action:pan-y; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.ov-scroll * { touch-action:pan-y; }
.panel-hdr {
  padding:13px 16px 11px; border-bottom:1px solid var(--panel-line, #1f3654);
  font-family:var(--font-display); text-transform:uppercase;
  font-size:15px; font-weight:700; letter-spacing:0.06em; color:var(--parchment);
  position:sticky; top:0; background:var(--void-2); z-index:2;
  display:flex; align-items:center; justify-content:space-between;
}
.panel-body { padding:14px 16px 24px; }
.sec-title  { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold-dim); margin-bottom:8px; }

/* disable button styling inside modal when disabled */
#pt-modal-use:disabled, #pt-modal-hud:disabled { opacity:0.4; pointer-events:none; }

/* ── INVENTORY (redesigned) ─────────────── */
.inv-char-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 16px 10px;
  border-bottom:1px solid #17283e;
  background:rgba(193,204,213,0.02);
}
.eq-grid-5col {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}
/* ── Кольцо снаряжения (вкладка «Персонаж») ──────────────────────────────
   Квадрат, в центре портрет, одиннадцать слотов по окружности —
   updateInvUI ставит каждому left/top в процентах, здесь только центровка. */
#panel-inv #inv-tab-content-0 {
  background:radial-gradient(ellipse 110% 520px at 50% 260px, #2a2214 0%, #14100b 55%, transparent 100%);
}
.eq-ring-head { text-align:center; padding:14px 16px 0; }
.eq-ring-name { font-family:var(--font-display); font-size:26px; color:#f1e3c2; line-height:1.05; }
.eq-ring-sub  {
  display:flex; align-items:center; justify-content:center; gap:6px; margin-top:5px;
  font-size:11px; color:#a89a7c; letter-spacing:.14em; text-transform:uppercase;
}
.eq-ring-hint { text-align:center; color:#7a6a4a; font-size:9px; margin:6px 0 0; }
.eq-ring {
  position:relative; width:100%; max-width:380px; aspect-ratio:1; margin:0 auto;
}
.eq-ring-line {
  position:absolute; inset:10%; border-radius:50%; border:1px solid rgba(201,160,78,.35);
}
.eq-ring-line.inner { inset:18%; border:1px dashed rgba(201,160,78,.18); }
.eq-ring-glow {
  position:absolute; inset:22%; border-radius:50%;
  background:radial-gradient(circle, rgba(243,207,114,.20), transparent 70%);
}
.eq-ring-pedestal {
  position:absolute; left:32%; right:32%; top:66%; height:5%; border-radius:50%;
  background:radial-gradient(ellipse, rgba(243,207,114,.30), transparent 70%);
}
.eq-ring canvas {
  position:absolute; left:24%; top:20%; width:52%; height:52%;
  image-rendering:pixelated; image-rendering:crisp-edges; pointer-events:none;
}
.eq-rslot {
  position:absolute; width:15%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; border:1.5px solid #3a3222; background:#0e121a;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  cursor:default; user-select:none;
}
.eq-rslot.filled {
  cursor:pointer; border:2px solid var(--rc);
  background:radial-gradient(circle, color-mix(in srgb, var(--rc) 35%, transparent), #0d1320 70%);
  box-shadow:0 0 14px color-mix(in srgb, var(--rc) 45%, transparent);
}
.eq-rslot.filled:active { transform:translate(-50%,-50%) scale(.94); }
.eq-rslot-enh {
  position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  background:#0b0f18; border:1px solid #f3cf72; border-radius:8px; padding:0 5px;
  font-size:10px; font-weight:700; color:#f3cf72; line-height:14px; white-space:nowrap;
}
#eq-ring-info { padding:0 12px 14px; text-align:center; }
.eq-ring-orn { height:1px; margin:0 14px; background:linear-gradient(90deg, transparent, #c9a04e, transparent); }
.eq-ring-bm-lbl { margin-top:9px; font-size:10px; color:#a88b4e; letter-spacing:.3em; }
.eq-ring-bm {
  font-family:var(--font-display); font-size:38px; line-height:1.05; color:#f3cf72;
  text-shadow:0 0 18px rgba(243,207,114,.35); margin-bottom:8px;
}
.gsb {
  margin:0 12px 6px; padding:10px 10px 9px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--rc) 45%, #2a2418);
  background:linear-gradient(180deg, color-mix(in srgb, var(--rc) 12%, #0d1320), #0b0f18 75%);
  transition:box-shadow .3s, border-color .3s;
}
.gsb.active { border-color:var(--rc); box-shadow:0 0 16px color-mix(in srgb, var(--rc) 40%, transparent), inset 0 0 18px color-mix(in srgb, var(--rc) 14%, transparent); }
.gsb-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.gsb-title { font-family:var(--font-display); font-size:15px; white-space:nowrap; color:#f3cf72; letter-spacing:.04em; }
.gsb-sub { font-size:10px; color:#a88b4e; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
.gsb-tabs { display:flex; gap:5px; margin:8px 0 9px; }
.gsb-tab {
  flex:1; min-width:0; padding:4px 2px; border-radius:7px; font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; cursor:pointer;
  color:color-mix(in srgb, var(--rc) 70%, #8a7f70); background:#0b0f18;
  border:1px solid color-mix(in srgb, var(--rc) 30%, #1d1a14); position:relative;
}
.gsb-tab.on { color:#0b0f18; background:var(--rc); border-color:var(--rc); }
.gsb-tab.live::after {
  content:''; position:absolute; top:3px; right:4px; width:5px; height:5px; border-radius:50%;
  background:#7dff9a; box-shadow:0 0 6px #7dff9a;
}
.gsb-pips { display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; margin-bottom:9px; }
.gsb-pip {
  position:relative; aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center;
  border:1px dashed #2f2a20; background:#0a0d14;
}
.gsb-pip.on { border:1px solid var(--rc); background:radial-gradient(circle, color-mix(in srgb, var(--rc) 28%, transparent), #0a0d14 72%); }
.gsb-pip-enh {
  position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
  font-size:8px; font-weight:700; color:#f3cf72; background:#0b0f18; border-radius:6px; padding:0 3px; line-height:11px;
}
.gsb-tiers { display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; }
.gsb-tier {
  text-align:center; padding:5px 0 4px; border-radius:8px; background:#0a0d14;
  border:1px solid #1f1c16; opacity:.55; transition:opacity .3s, box-shadow .3s;
}
.gsb-tier-lamp {
  width:8px; height:8px; margin:0 auto 4px; border-radius:50%;
  background:#2a261e; border:1px solid #3a3428;
}
.gsb-tier-enh { font-size:12px; font-weight:700; color:#cfc0ad; }
.gsb-tier-pct { font-size:9px; color:#8a7f70; margin-top:1px; }
.gsb-tier.on { opacity:1; border-color:color-mix(in srgb, var(--rc) 55%, transparent); }
.gsb-tier.on .gsb-tier-lamp { background:var(--rc); border-color:#fff8; box-shadow:0 0 8px var(--rc); }
.gsb-tier.on .gsb-tier-pct { color:var(--rc); }
.gsb-tier.cur { box-shadow:0 0 10px color-mix(in srgb, var(--rc) 55%, transparent); }
.gsb-tier.cur .gsb-tier-lamp { animation:gsbPulse 1.6s ease-in-out infinite; }
@keyframes gsbPulse { 0%,100% { box-shadow:0 0 6px var(--rc); } 50% { box-shadow:0 0 14px var(--rc), 0 0 4px #fff; } }
.gsb-status { margin-top:8px; font-size:10px; text-align:center; color:#a89a86; }
.gsb.active .gsb-status { color:var(--rc); font-weight:700; }
.eq-cell {
  aspect-ratio:1; border:2px solid #192b43; border-radius:8px;
  background:rgba(193,204,213,0.02);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer; transition:border-color 0.15s;
  user-select:none; padding:2px;
  /* Without this, a label too long to fit at this width (e.g. two-line
     wraps in a narrow cell) grows the box past its
     aspect-ratio-derived height instead of being clipped — a flex item's
     default min-height:auto lets content override aspect-ratio unless
     overflow isn't visible. */
  overflow:hidden;
}
.eq-cell:active { opacity:0.7; }
.eq-cell.filled { border-color:#294870; background:rgba(193,204,213,0.05); }
.eq-cell .cell-icon { font-size:18px; line-height:1.1; }
.eq-cell .cell-lbl  {
  font-size:7px; color:#294870; margin-top:2px; text-align:center;
  line-height:1.2; max-width:100%; overflow:hidden;
  white-space:normal; word-break:break-word; padding:0 1px;
}
.eq-cell.filled .cell-lbl { color:#b1986e; }

.inv-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:5px;
}
.inv-cell {
  aspect-ratio:1; border:2px solid #192b43; border-radius:7px;
  background:rgba(193,204,213,0.02);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer; transition:border-color 0.15s;
  user-select:none; padding:2px;
}
.inv-cell:active { opacity:0.7; }
.inv-cell.filled { border-color:#294870; background:rgba(193,204,213,0.04); }

/* ── PROFILE ──────────────────────────── */
.prof-hero  { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.prof-emoji { font-size:52px; line-height:1; }
.prof-cls   { font-size:20px; font-weight:bold; }
.prof-lvl   { font-size:13px; color:#91a5b6; margin-top:3px; }
.xp-lbl     { font-size:11px; color:#8197ab; margin-bottom:5px; }
.xp-bg      { height:8px; background:#0a111a; border-radius:4px; overflow:hidden; margin-bottom:18px; }
.xp-fill    { height:100%; background:linear-gradient(90deg,#e9b151,#efc680); border-radius:4px; }
.stat-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px; }
.stat-card  { background:rgba(193,204,213,0.03); border:1px solid #17283e; border-radius:10px; padding:12px 8px; text-align:center; }
.stat-ic    { font-size:18px; margin-bottom:4px; }
.stat-vl    { font-size:18px; font-weight:bold; color:#c1ccd5; }
.stat-nm    { font-size:10px; color:#2d5e81; margin-top:3px; }

/* ── QUESTS ───────────────────────────── */
.quest-item       { border-radius:10px; padding:12px 14px; margin-bottom:10px; border:1px solid #192b43; }
.quest-done       { background:rgba(50,57,43,0.35); border-color:#2b3622; }
.quest-current    { background:rgba(29,50,78,0.7); border-color:#32688f; }
.quest-locked     { background:rgba(14,25,39,0.4); opacity:0.5; }
.quest-header     { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:4px; }
.quest-title      { font-size:13px; font-weight:700; color:#c1ccd5; }
.quest-current .quest-title { color:#f3d5a1; }
.quest-done .quest-title    { color:#8197ab; }
.quest-reward     { font-size:10px; color:#e69419; white-space:nowrap; }
.quest-desc       { font-size:11px; color:#91a5b6; margin-bottom:6px; }
.quest-current .quest-desc  { color:#a1b2c1; }
.quest-prog       { font-size:10px; color:#b1bfcb; margin-top:2px; }
.quest-bar-bg     { height:4px; background:#192b43; border-radius:2px; margin-top:3px; overflow:hidden; }
.quest-bar-fill   { height:100%; background:linear-gradient(90deg,#d8a54c,#e8c481); border-radius:2px; transition:width .3s; }
.quest-claim-btn  { margin-top:10px; width:100%; padding:10px 0; border:none; border-radius:10px; background:linear-gradient(135deg,#d8a54c,#dfb362); color:#c1ccd5; font-size:14px; font-weight:700; cursor:pointer; letter-spacing:0.02em; }
.quest-claim-btn:active { opacity:0.8; }
.quest-floor-hdr    { font-size:12px; font-weight:700; color:#b6a281; padding:8px 0 4px; margin-bottom:4px; border-bottom:1px solid #192b43; }

/* ── CLAN PANEL ───────────────────────── */
/* Хранилище клана — pooled Осколки and the leader's allocations */
.clan-storage-gate {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.35;
  background: rgba(230,148,25,.10); border: 1px solid rgba(230,148,25,.28); color: #e6af5e;
}
.clan-storage-list { display: flex; flex-direction: column; gap: 6px; }
.clan-storage-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.06);
}
.clan-storage-img  { width: 22px; height: 22px; image-rendering: pixelated; flex: 0 0 auto; }
.clan-storage-name { flex: 1 1 auto; font-size: 12.5px; color: #bfcdda; min-width: 0;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-storage-who  { color: #8fbf7a; }
.clan-storage-qty  { font-size: 13px; font-weight: 700; color: #e6c88a; flex: 0 0 auto; }
/* Unlock button while the leader can't afford it — still readable, clearly
   inert, and it carries no onclick either (see _clanStorageHTML). */
.clan-btn-disabled { opacity: .45; cursor: default; }

.clan-empty        { display:flex; flex-direction:column; align-items:center; padding:28px 16px; gap:10px; }
.clan-empty-icon   { opacity:0.6; margin-bottom:4px; }
.clan-empty-title  { font-size:17px; font-weight:800; color:#eece94; }
.clan-empty-sub    { font-size:12px; color:#2e5f83; text-align:center; max-width:220px; }
.clan-btn          { display:block; width:100%; padding:11px 0; border:none; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; touch-action:manipulation; margin-top:4px; }
.clan-btn-create   { background:linear-gradient(135deg,#3a79a5,#d8a54c); color:#c1ccd5; }
.clan-btn-search   { background:rgba(193,204,213,0.06); border:1px solid rgba(193,204,213,0.1); color:#91a5b6; }
.clan-btn-leave    { background:rgba(173,67,80,0.18); border:1px solid rgba(193,87,100,0.3); color:#ee6676; width:100%; padding:11px 0; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; }
.clan-btn-danger   { background:rgba(169,41,56,0.25); border:1px solid rgba(209,71,87,0.4); color:#ed5a6b; width:100%; padding:11px 0; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; }
.clan-btn-sm       { padding:5px 10px; border:none; border-radius:7px; background:rgba(78,145,193,0.3); border:1px solid rgba(234,181,89,0.4); color:#eece94; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; touch-action:manipulation; }
.clan-btn-sm.clan-btn-danger { background:rgba(171,49,64,0.25); border-color:rgba(209,79,94,0.4); color:#f17e8b; }
.clan-btn-sm:disabled { opacity:.6; cursor:default; }
.clan-form         { padding:0 0 16px; }
.clan-back         { background:none; border:none; color:#be9f68; font-size:13px; cursor:pointer; padding:0 0 12px; touch-action:manipulation; }
.clan-form-title   { font-size:16px; font-weight:800; color:#eece94; margin-bottom:14px; }
.clan-form-label   { font-size:11px; color:#37739d; margin-bottom:6px; }
.clan-input        { width:100%; padding:10px 14px; border:1px solid rgba(78,145,193,0.4); border-radius:10px; background:rgba(193,204,213,0.05); color:#c6d0d9; font-size:14px; outline:none; box-sizing:border-box; }
.clan-input:focus  { border-color:rgba(234,181,89,0.7); }
.clan-icon-preview { display:flex; align-items:center; gap:12px; cursor:pointer; padding:10px 12px; border:1px solid rgba(78,145,193,0.3); border-radius:10px; background:rgba(193,204,213,0.04); }
.clan-icon-change  { font-size:12px; color:#be9f68; }
.clan-icon-grid    { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:10px; }
.clan-icon-cell    { display:flex; align-items:center; justify-content:center; padding:6px; border-radius:8px; border:1px solid rgba(193,204,213,0.06); background:rgba(193,204,213,0.03); cursor:pointer; touch-action:manipulation; }
.clan-icon-cell.clan-icon-sel { border-color:#d8a54c; background:rgba(216,165,76,0.25); }
.clan-err          { color:#ee6676; font-size:12px; margin-top:8px; min-height:16px; }
.clan-search-row   { display:flex; gap:8px; margin-bottom:12px; }
.clan-result       { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(193,204,213,0.05); }
.clan-result-icon  { flex-shrink:0; }
.clan-result-info  { flex:1; min-width:0; }
.clan-result-name  { font-size:13px; font-weight:700; color:#c1ccd5; }
.clan-result-meta  { font-size:11px; color:#37739d; margin-top:2px; }
.clan-nores        { color:#294870; font-size:13px; text-align:center; padding:20px 0; }
.clan-home         { padding-bottom:20px; }
.clan-hdr          { display:flex; align-items:center; gap:12px; padding:4px 0 14px; border-bottom:1px solid rgba(193,204,213,0.06); margin-bottom:12px; }
.clan-hdr-icon     { flex-shrink:0; }
.clan-hdr-name     { font-size:18px; font-weight:900; color:#c1ccd5; }
.clan-hdr-level    { font-size:11px; color:#5797c4; margin-top:2px; }
.clan-bonus-row    { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.clan-bonus-tag    { font-size:10px; padding:2px 7px; border-radius:12px; background:rgba(216,165,76,0.25); border:1px solid rgba(234,181,89,0.35); color:#e8c481; }
.clan-bonus-none   { color:#294870; background:none; border-color:rgba(193,204,213,0.06); }
.clan-xp-block     { margin-bottom:14px; }
.clan-xp-label     { font-size:11px; color:#5797c4; margin-bottom:5px; }
.clan-xp-bar-bg    { height:6px; background:#192b43; border-radius:3px; overflow:hidden; }
.clan-xp-bar-fill  { height:100%; background:linear-gradient(90deg,#d8a54c,#e69419); border-radius:3px; transition:width .5s; }
.clan-desc         { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; margin-bottom:14px; border:1px solid rgba(193,204,213,0.08); border-radius:10px; background:rgba(193,204,213,0.03); }
.clan-desc-empty   { color:#294870; }
.clan-desc-text    { flex:1; font-size:13px; line-height:1.5; color:#b1bfcb; white-space:pre-wrap; word-break:break-word; }
.clan-desc-empty .clan-desc-text { color:#2e5f83; font-style:italic; }
.clan-desc-edit-btn { flex-shrink:0; background:none; border:none; color:#5797c4; font-size:14px; cursor:pointer; padding:0 2px; touch-action:manipulation; }
.clan-desc-edit-btn:active { color:#e8c481; }
.clan-desc-edit    { margin-bottom:14px; }
.clan-desc-input   { resize:vertical; min-height:64px; font-family:inherit; }
.clan-desc-actions { display:flex; gap:8px; margin-top:8px; }
.clan-section-hdr  { font-size:11px; font-weight:700; color:#2e5f83; letter-spacing:1px; text-transform:uppercase; margin-bottom:7px; }
.clan-member       { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid rgba(193,204,213,0.04); }
.clan-member-me    { background:rgba(234,181,89,0.08); border-radius:6px; padding-left:6px; }
.clan-member-role  { flex-shrink:0; font-size:14px; }
.clan-member-name  { flex:1; font-size:13px; color:#b1bfcb; }
.inv-tabs          { display:flex; border-bottom:1px solid rgba(193,204,213,0.07); margin-bottom:4px; }
.inv-tab           { flex:1; text-align:center; padding:8px 0; font-size:12px; font-weight:700; color:#2e5f83; cursor:pointer; border-bottom:2px solid transparent; touch-action:manipulation; transition:color .15s; }
.inv-tab.active    { color:#e7b765; border-bottom-color:#e0aa4b; }
.clan-tabs         { display:flex; border-bottom:1px solid rgba(193,204,213,0.07); margin-bottom:12px; }
.clan-tab          { flex:1; text-align:center; padding:8px 0; font-size:12px; font-weight:700; color:#2e5f83; cursor:pointer; border-bottom:2px solid transparent; touch-action:manipulation; transition:color .15s; }
.clan-tab.active   { color:#e8c481; border-bottom-color:#d8a54c; }
.clan-member-bm    { font-size:10px; color:#eaa742; font-weight:700; white-space:nowrap; margin-right:4px; }
.clan-my-bm        { font-size:13px; color:#5797c4; padding:6px 0; }
.clan-my-bm span   { color:#eaa742; font-weight:800; }
.clan-perks        { display:flex; flex-direction:column; gap:6px; }
.clan-perk         { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; }
.clan-perk.unlocked{ background:rgba(59,124,169,0.2); border:1px solid rgba(234,181,89,0.3); }
.clan-perk.locked  { background:rgba(19,33,52,0.25); border:1px solid rgba(193,204,213,0.04); opacity:0.45; }
.clan-perk-icon    { font-size:20px; width:28px; text-align:center; flex-shrink:0; }
.clan-perk-body    { flex:1; min-width:0; }
.clan-perk-name    { font-size:13px; font-weight:700; color:#c1ccd5; }
.clan-perk-lvl     { font-size:10px; color:#be9f68; font-weight:700; margin-left:4px; }
.clan-perk-desc    { font-size:11px; color:#5797c4; margin-top:2px; }

/* ── MAP PANEL ────────────────────────── */
#map-canvas { display:block; margin:0 auto; }
.map-legend { display:flex; justify-content:center; gap:18px; padding:8px 16px 4px; font-size:12px; color:#2d5e81; }
.floor-section { padding:0 10px 16px; }
.floor-section .sec-title { padding:8px 0 8px; }

/* ── BOTTOM NAV ────────────────────────── */
#bottom-nav {
  position:absolute; bottom:0; left:0; right:0; height:var(--nav-h);
  background:linear-gradient(0deg,#060b13,#101d2e 70%);
  border-top:1px solid rgba(96,170,235,.45);
  box-shadow:0 -6px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(140,200,255,.10);
  z-index:50; display:none;
}
.nav-tabs { display:flex; height:100%; }
.nav-tab  {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer; color:#275270; gap:2.7px;
  position:relative;
  transition:color 0.15s;
  user-select:none;
}
.nav-tab:active { opacity:0.7; }
.nav-tab.active { color:#bfe4ff; }
/* The lit plate under the active tab, not just a hairline: it is the one
   piece of the nav that has to read at a glance while the thumb is on the
   action fan at the other end of the screen. */
.nav-tab.active::before {
  content:""; position:absolute; inset:3px 6px 3px 6px;
  border-radius:7px;
  background:linear-gradient(180deg, rgba(58,126,196,.34), rgba(20,44,76,.30));
  border:1px solid rgba(122,196,255,.55);
  box-shadow:0 0 12px rgba(86,170,255,.28), inset 0 1px 0 rgba(178,224,255,.18);
}
.nav-tab.active::after {
  content:""; position:absolute; top:0; left:24%; right:24%; height:2px;
  background:#9ad4ff; box-shadow:0 0 8px #6cc0ff;
}
.nav-tab.active .ni, .nav-tab.active .nl { position:relative; }
.nav-tab.active .ni { filter:drop-shadow(0 0 5px rgba(122,196,255,.65)); }
.nav-tab .ni { font-size:15.3px; line-height:1; }
.nav-tab .nl { font-size:7.65px; letter-spacing:0.3px; text-transform:uppercase; }

/* ── UPGRADE PANEL ────────────────────── */
.upg-section-hdr {
  font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:#2d5e81; padding:10px 16px 8px;
  border-top:1px solid #17283e;
}
.upg-section-hdr span { color:#ebab4b; font-size:12px; text-transform:none; letter-spacing:0; }
.upg-grid {
  display:flex; flex-direction:column; gap:6px;
  padding:0 16px 24px;
}
.upg-row {
  display:flex; align-items:center; gap:10px;
  background:rgba(193,204,213,0.03);
  border:1px solid #192b43; border-radius:10px;
  padding:9px 12px;
}
.upg-info { flex:1; min-width:0; }
.upg-label { display:block; font-size:13px; font-weight:600; color:#c1ccd5; }
.upg-meta  { display:block; font-size:10px; color:#2d5e81; margin-top:2px; }
.upg-btn {
  padding:7px 12px; border:none; border-radius:8px;
  background:linear-gradient(135deg,#346c94,#4187b9);
  color:#c1ccd5; font-size:12px; font-weight:bold; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
  transition:opacity 0.15s;
  touch-action:manipulation;
}
.upg-btn:active { opacity:0.7; }
.upg-btn.disabled { background:#17283e; color:#223c5d; pointer-events:none; }

/* Reset-upgrades button — deliberately quieter than .upg-btn: it undoes
   progress and costs Liberty, so it shouldn't compete with the buy buttons. */
.upg-reset-btn {
  width:100%; padding:11px; border:1px solid rgba(229,170,82,0.35);
  border-radius:10px; background:rgba(229,170,82,0.07);
  color:#e5aa52; font-size:13px; font-weight:700; cursor:pointer;
  transition:opacity 0.15s; touch-action:manipulation;
}
.upg-reset-btn:active { opacity:0.7; }
.upg-reset-btn.disabled { border-color:#17283e; background:#101b2a; color:#294870; pointer-events:none; }
.upg-reset-hint { margin-top:6px; font-size:11px; color:#37739d; text-align:center; }

/* ── SKILL UPGRADE PANEL ────────────────── */
#skill-upgrade-panel {
  display:flex; flex-direction:column; gap:10px;
  padding:12px 14px 28px;
  overflow-y:auto; max-height:calc(100vh - 120px);
}
.skill-upg-header {
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:#495b72; padding:0 2px 4px;
  border-bottom:1px solid #17283e;
}
.skill-upg-header span:first-child { color:#ebab4b; font-size:13px; font-weight:700; }
.skill-upg-hint { font-size:10px; color:#2d5e81; }
.skill-upg-card {
  background:rgba(193,204,213,0.03);
  border:1px solid #192b43; border-radius:12px;
  padding:12px 13px 10px;
  display:flex; flex-direction:column; gap:7px;
}
.skill-upg-top { display:flex; align-items:flex-start; gap:11px; }
.skill-upg-icon { flex-shrink:0; padding-top:2px; }
.skill-upg-info { flex:1; min-width:0; }
.skill-upg-name {
  font-size:14px; font-weight:700; color:#c6d3de;
}
.skill-upg-lvl {
  font-size:11px; font-weight:600; color:#e3941d; margin-left:4px;
}
.skill-upg-desc { font-size:11px; color:#3c7caa; margin-top:2px; }
.skill-upg-type { font-size:10px; color:#c19c5d; margin-top:3px; font-weight:600; letter-spacing:0.3px; }
.sk-dots {
  display:flex; gap:4px; flex-wrap:wrap;
}
.sk-dot {
  width:14px; height:6px; border-radius:3px;
  background:#192b43; border:1px solid #233d5f;
  transition:background 0.2s;
}
.sk-dot.filled {
  background:linear-gradient(90deg,#4187b9,#e3941d);
  border-color:#e3941d44;
}
.sk-bonus-row {
  display:flex; gap:8px; align-items:center; min-height:16px;
}
.sk-bonus-now {
  font-size:11px; font-weight:700; color:#90d653;
  background:rgba(144,214,83,0.1); border-radius:5px;
  padding:1px 6px;
}
.sk-bonus-next {
  font-size:11px; color:#5797c4;
}
.skill-upg-btn {
  width:100%; padding:9px; border:none; border-radius:9px;
  background:linear-gradient(135deg,#306387,#4187b9);
  color:#c1ccd5; font-size:13px; font-weight:700; cursor:pointer;
  touch-action:manipulation; transition:opacity 0.15s;
}
.skill-upg-btn:active { opacity:0.7; }
.skill-upg-btn.disabled {
  background:#17283e; color:#223c5d; pointer-events:none;
}

/* ── Advanced skills ("вторая профессия") — nested inside .skill-upg-card,
   only rendered once that slot is maxed (level 10) ────────────────────── */
.adv-skill-box {
  margin-top:2px; padding:10px 11px 9px;
  background:rgba(245,197,66,0.05);
  border:1px solid rgba(245,197,66,0.25); border-radius:10px;
  display:flex; flex-direction:column; gap:8px;
}
.adv-skill-box.active {
  background:rgba(245,197,66,0.1);
  border-color:rgba(245,197,66,0.5);
}
.adv-skill-hdr {
  display:flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; color:#f5c542;
  letter-spacing:0.3px; text-transform:uppercase;
}
.adv-skill-active-badge {
  margin-left:auto; font-size:9px; font-weight:700;
  color:#141920; background:#f5c542;
  border-radius:5px; padding:1px 6px; text-transform:none;
}
.adv-btn { background:linear-gradient(135deg,#2a5677,#f5c542); color:#141920; }

/* ── пятый слот: заимствованная способность (джекпот переработки
   ОРУЖЕЙНОЙ легендарной руны, RUNE_REROLL_BONUS_SKILL_CHANCE) ────────────
   .foreign-skill-card is its own .skill-upg-card, appended after the four
   real slots — never nested inside one of them, since it never occupies
   Q/W/E/R. Only ever drawn once a bonusSkill is actually attached — no
   "book available" state, since acquiring it is never a player choice. */
.foreign-skill-card {
  border-color: rgba(192,132,252,0.3);
  background: rgba(192,132,252,0.04);
}
.foreign-btn { background: linear-gradient(135deg,#6b3fa0,#c084fc); color: #1a1024; }
.sk-foreign-note {
  margin-top: 2px; font-size: 10px; line-height: 1.4; color: #8a7fa3;
}

/* ── GRAM Wallet (Profile tab) ──────────────────────────────── */
.gram-balance-card {
  position: relative;
  background: linear-gradient(135deg, #0e1927, #192c45);
  border: 1px solid rgba(236,187,103,0.2);
  border-radius: 18px;
  padding: 20px 20px 22px;
  text-align: center;
  margin-bottom: 14px;
  overflow: hidden;
}
/* A soft bloom behind the mark, so the card reads as the one thing on the tab
   worth looking at first. Pointer-events off — it covers the whole card. */
.gram-balance-card::before {
  content: '';
  position: absolute; inset: -40% 20% auto 20%; height: 120px;
  background: radial-gradient(ellipse at center, rgba(48,161,245,.22), transparent 70%);
  pointer-events: none;
}
.gram-balance-chip {
  position: relative;
  width: 46px; height: 46px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(48,161,245,0.12);
  border: 1px solid rgba(48,161,245,0.28);
}
.gram-balance-label {
  font-size: 12px;
  color: #3d7eac;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gram-balance-amount {
  position: relative;
  font-size: 34px;
  font-weight: 800;
  color: #c1ccd5;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.gram-bal-whole { color: #f5dbae; }
/* Seven decimals of GRAM is real money (per-kill drops are tiny) and is never
   dropped — it is just made quiet, so the eye lands on the whole number. */
.gram-bal-frac { font-size: 19px; font-weight: 700; color: #96876c; }
.gram-unit {
  font-size: 16px;
  font-weight: 600;
  color: #eab559;
  vertical-align: middle;
}
.gram-section {
  background: rgba(193,204,213,0.03);
  border: 1px solid rgba(193,204,213,0.07);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.gram-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #f4d7a7;
  margin-bottom: 12px;
}
.lang-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.lang-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(193,204,213,0.1);
  background: rgba(193,204,213,0.03);
  color: #c1ccd5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
}
.lang-card.active { border-color: #90d653; background: rgba(144,214,83,0.1); color: #90d653; }
.lang-card-flag { font-size: 20px; line-height: 1; }
.lang-card-name { flex: 1; text-align: left; }
.lang-card-check { color: #90d653; font-weight: 700; }

/* First-launch language prompt — see index.html for when this shows */
#first-lang-select {
  position: absolute; inset: 0; z-index: 150;
  background: radial-gradient(ellipse at 50% 20%,#111d2e 0%,#080e15 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
}
.fls-card {
  width: 100%; max-width: 360px;
  background: rgba(193,204,213,0.04);
  border: 1px solid rgba(193,204,213,0.12);
  border-radius: 16px;
  padding: 22px 18px;
}
.fls-title {
  font-size: 15px; font-weight: 700; color: #f4d7a7;
  text-align: center; margin-bottom: 16px;
}
.gram-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(193,204,213,0.1);
  border-radius: 10px;
  padding: 10px 13px;
  color: #f4d9aa;
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
}
.gram-input:focus { border-color: rgba(234,181,89,0.5); }
.gram-input-addr { font-size: 12px; font-family: monospace; letter-spacing: 0.3px; }
.gram-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: opacity 0.15s;
}
.gram-btn:active { opacity: 0.7; }
/* Anything full-width in a sheet is a primary action and gets a real
   target: these were 41px. */
.gram-dep-panel .gram-btn { min-height: 46px; }
.gram-dep-again { min-height: 40px; }
.gram-btn-green {
  background: linear-gradient(135deg, #29361e, #486133);
  color: #90d653;
}
.gram-btn-orange {
  background: linear-gradient(135deg, #142337, #243e61);
  color: #e5a546;
}
.gram-hint {
  font-size: 11px;
  color: #2b5a7b;
  margin-top: 8px;
}
.gram-msg {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin-top: 6px;
}
.gram-msg-err { background: rgba(189,51,67,0.15); color: #f17e8b; border: 1px solid rgba(189,51,67,0.3); }
.gram-msg-ok  { background: rgba(116,178,62,0.12);  color: #98e456; border: 1px solid rgba(116,178,62,0.3); }

/* ── GRAM tx history & modals ───────────────────────────── */
.gram-tx-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(193,204,213,0.05);
}
.gram-tx-row:last-child { border-bottom: none; }
.gram-tx-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.gram-tx-dep { color: #90d653; background: rgba(144,214,83,0.12); }
.gram-tx-wd  { color: #e5a546; background: rgba(229,165,70,0.12); }
/* min-width:0 is load-bearing: a flex child defaults to min-width:auto, so the
   date+code line refuses to shrink below its text and shoves the amount out of
   the row entirely. The code is the part that gives — the amount and its
   status are what the row is for. */
.gram-tx-info { flex: 1; min-width: 0; }
.gram-tx-type { font-size: 13px; font-weight: 600; color: #f5dbae; }
.gram-tx-date {
  font-size: 11px; color: #346c94; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gram-tx-amount { font-size: 13px; font-weight: 700; }
.gram-tx-status { font-size: 10px; margin-top: 3px; font-weight: 600; }
/* Per-row status, ported from the Rewardix wallet's rowStatus. The row is
   tinted as a whole rather than labelled in one corner, so a list of six can
   be read without reading it. .gram-tx-dim is the case the old two-way test
   had no answer for: an intent that expired, or a withdrawal that was
   forfeited, both used to render identically to one still being processed. */
.gram-tx-right { text-align: right; flex-shrink: 0; white-space: nowrap; }
.gram-tx-icon svg { display: block; }
.gram-tx-dim { opacity: .5; }
.gram-tx-ok .gram-tx-icon.gram-tx-dep { background: rgba(144,214,83,0.16); }
.gram-st-ok   { color: #90d653; }
.gram-st-no   { color: #e46070; }
.gram-st-wait { color: #e5a546; }
.gram-st-dim  { color: #7c7364; }
.gram-copy-box {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(193,204,213,0.1);
  border-radius: 10px; padding: 10px 14px; cursor: pointer;
  word-break: break-all; gap: 8px;
  font-size: 12px; color: #d2c1a4; font-family: monospace;
  transition: border-color 0.15s;
}
.gram-copy-box:active { border-color: rgba(199,166,124,0.4); }
.gram-copy-icon { color: #eab559; flex-shrink: 0; font-size: 16px; }
.gram-warn {
  background: rgba(216,139,24,0.1); border: 1px solid rgba(216,139,24,0.25);
  border-radius: 8px; padding: 8px 12px; font-size: 12px;
  color: #5797c4; margin-top: 10px;
}

/* ── GRAM wallet: actions, wallet card, credited moment ──────────────────── */
.gram-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.gram-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 10px; border-radius: 13px; border: 1px solid transparent;
  font-size: 13px; font-weight: 700; cursor: pointer;
  touch-action: manipulation; transition: filter .15s, border-color .15s;
}
.gram-action:active { filter: brightness(1.25); }
.gram-action-ico { display: flex; align-items: center; }
.gram-action-dep {
  background: linear-gradient(135deg, #29361e, #486133);
  border-color: rgba(144,214,83,0.3); color: #90d653;
}
.gram-action-wd {
  background: linear-gradient(135deg, #342206, #5f3d0b);
  border-color: rgba(229,165,70,0.28); color: #e5a546;
}

.gram-wallet-card {
  background: rgba(209,204,197,0.035);
  border: 1px solid rgba(209,204,197,0.1);
  border-radius: 14px;
  padding: 14px;
}
.gram-wallet-card-off { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.gram-wallet-head { display: flex; align-items: center; gap: 11px; }
.gram-wallet-head-txt { min-width: 0; flex: 1; }
.gram-wallet-chip {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(209,204,197,0.07); color: #a3957c;
}
.gram-wallet-chip-on {
  background: rgba(144,214,83,0.13); color: #90d653;
  border: 1px solid rgba(144,214,83,0.28);
}
.gram-wallet-status { font-size: 13px; font-weight: 700; color: #90d653; }
.gram-wallet-short {
  font-size: 12px; color: #a3957c; font-family: monospace;
  margin-top: 2px; letter-spacing: .2px;
}
.gram-wallet-off-txt { flex: 1; min-width: 140px; font-size: 12px; color: #b2a288; line-height: 1.45; }
.gram-wallet-addr { margin-top: 12px; }

.gram-connect-btn {
  width: 100%; padding: 12px; border-radius: 11px;
  background: rgba(48,161,245,0.12); border: 1px solid rgba(48,161,245,0.35);
  color: #8ec9fb; font-size: 13px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.gram-connect-btn:active { background: rgba(48,161,245,0.2); }

/* «Отвязать». A real bordered control, not the underlined word it used to be:
   unbinding a wallet is a deliberate, irreversible-feeling action and it has
   to look like a button you decide to press, while staying visibly quieter
   than the two things above it that move money.

   Word only — the broken-chain glyph is gone (see _gramIconUnlink's epitaph in
   js/ui.js). With nothing beside it the label has to hold the button on its
   own, so it is centred, tracked out slightly and given the same 12px of
   breathing room top and bottom that the two action buttons have. */
.gram-unlink-btn {
  width: 100%; margin-top: 12px; padding: 12px;
  display: block; text-align: center;
  border-radius: 11px; cursor: pointer; touch-action: manipulation;
  background: rgba(238,102,118,0.06);
  border: 1px solid rgba(238,102,118,0.28);
  color: #ee8b97; font-size: 13px; font-weight: 600; letter-spacing: .3px;
  font-family: inherit;
  transition: background .15s;
}
.gram-unlink-btn:active { background: rgba(238,102,118,0.16); }

/* Copy rows — label above, value on its own line so a 48-character address can
   wrap without shoving the copy control off the row. */
.gram-copy-row { margin-bottom: 10px; }
.gram-copy-row-lbl {
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: #82745b; margin-bottom: 5px;
}
.gram-copy-row-body {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(209,204,197,0.1);
  border-radius: 11px; padding: 10px 10px 10px 13px;
}
.gram-copy-row-val {
  flex: 1; min-width: 0; word-break: break-all;
  font-family: monospace; font-size: 12.5px; line-height: 1.45;
  color: #d2c1a4; transition: color .2s;
}
.gram-copy-chip {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer; touch-action: manipulation;
  background: rgba(209,204,197,0.08); border: none; color: #d2c1a4;
}
.gram-copy-chip:active { background: rgba(234,181,89,0.24); color: #f4d9aa; }

/* Deposit sheet */
.gram-sheet {
  width: 100%; max-width: 500px; background: #16120a;
  border-radius: 18px 18px 0 0; border-top: 1px solid rgba(209,204,197,.1);
  padding: 20px 18px 34px; max-height: 88vh; overflow-y: auto;
}
.gram-sheet-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.gram-sheet-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 9px;
}
.gram-sheet-ico-dep { background: rgba(144,214,83,0.13); color: #90d653; }
.gram-sheet-ico-wd  { background: rgba(229,165,70,0.13); color: #e5a546; }
.gram-sheet-title { flex: 1; font-size: 16px; font-weight: 800; color: #f5dbae; }
.gram-sheet-close {
  position: relative;
  width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: 50%;
  background: rgba(209,204,197,.08); color: #968a7a; cursor: pointer;
  touch-action: manipulation;
}
/* The circle stays small; the TARGET is 46×46. A thumb is about 45px wide
   and none of these controls were half that. */
.gram-sheet-close::after { content: ''; position: absolute; inset: -7px; }
.gram-sheet-close:active { background: rgba(234,181,89,.22); color: #f4d9aa; }

/* The deposit code's deadline. It was the last line of the sheet in the
   dimmest colour on the panel; it is now a card of its own, directly under
   the code, in the amber this interface uses for «mind this». */
.gram-dep-deadline {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 12px;
  background: rgba(229,165,70,0.07);
  border: 1px solid rgba(229,165,70,0.26);
  border-radius: 12px;
}
.gram-dep-deadline:empty { display: none; }
.gram-dep-deadline-ico { flex-shrink: 0; color: #e5a546; }
.gram-dep-deadline-txt { flex: 1; min-width: 0; }
.gram-dep-deadline-main {
  font-size: 13.5px; font-weight: 700; color: #f0c98a;
}
.gram-dep-deadline-left {
  font-size: 11.5px; color: #a3957c; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* Ran out: red-brown rather than amber, and it grows a button. */
.gram-dep-deadline-out {
  align-items: flex-start;
  background: rgba(196,86,72,0.08); border-color: rgba(196,86,72,0.3);
}
.gram-dep-deadline-out .gram-dep-deadline-ico { color: #d9705f; }
.gram-dep-deadline-out .gram-dep-deadline-main { color: #e8a396; }
.gram-dep-deadline-out .gram-dep-deadline-left { line-height: 1.5; }
.gram-dep-refresh {
  margin-top: 9px; width: 100%; min-height: 42px; padding: 10px 14px;
  border: 1px solid rgba(229,165,70,0.4); border-radius: 10px;
  background: rgba(229,165,70,0.12); color: #f0c98a;
  font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.gram-dep-refresh:active { background: rgba(229,165,70,0.24); }

.gram-dep-panel {
  background: rgba(209,204,197,0.035);
  border: 1px solid rgba(209,204,197,0.09);
  border-radius: 14px; padding: 18px 16px; margin-top: 10px;
}
.gram-dep-panel-center { text-align: center; }
.gram-dep-panel-sub { font-size: 12px; color: #a3957c; margin-top: 6px; line-height: 1.5; }

/* The waiting state. It says the window can be closed on purpose: the credit
   arrives on a socket push that does not care whether anyone is looking, and a
   player who thinks they must stand here is a player who reads a two-minute
   chain confirmation as a hang. */
.gram-dep-watch {
  display: flex; align-items: flex-start; gap: 11px;
  background: rgba(48,161,245,0.07);
  border: 1px solid rgba(48,161,245,0.2);
  border-radius: 12px; padding: 12px 14px; margin-top: 12px;
}
.gram-dep-watch-title { font-size: 13px; font-weight: 700; color: #8ec9fb; }
.gram-dep-watch-sub { font-size: 11.5px; color: #a3957c; margin-top: 3px; line-height: 1.45; }

.gram-spinner {
  display: block; width: 26px; height: 26px; margin: 0 auto;
  border-radius: 50%; border: 2.5px solid rgba(209,204,197,.18);
  border-top-color: #eab559; animation: gram-spin .8s linear infinite;
}
.gram-spinner-sm { width: 17px; height: 17px; border-width: 2px; margin: 2px 0 0; flex-shrink: 0; border-top-color: #8ec9fb; }
@keyframes gram-spin { to { transform: rotate(360deg); } }

/* Signed, not yet credited — the panel between the wallet and the money. It
   is deliberately BLUE and not green: green is what the credited state owns,
   and a player who has just sent real money must not be able to mistake one
   for the other at a glance. Same chip/title/amount rhythm as the success
   panel so the flip from this to that reads as one thing progressing. */
.gram-dep-wait { border-color: rgba(48,161,245,0.24); background: rgba(48,161,245,0.05); }
.gram-wait-chip {
  width: 58px; height: 58px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(48,161,245,0.13); color: #8ec9fb;
  border: 1px solid rgba(48,161,245,0.3);
}
/* Past GRAM_DEPOSIT_SLOW_MS the panel stops promising "any second now". Amber,
   not red: nothing is wrong, it is late — and the copy says the code stays
   good for days. Red here would send a player looking for someone to blame. */
.gram-dep-wait-slow { border-color: rgba(229,165,70,0.26); background: rgba(229,165,70,0.05); }
.gram-wait-chip-slow {
  background: rgba(229,165,70,0.13); color: #e5a546;
  border-color: rgba(229,165,70,0.32);
}
.gram-dep-sent-amount { font-size: 24px; font-weight: 800; color: #f5dbae; margin-top: 4px; line-height: 1.1; }
.gram-dep-sent-memo {
  font-family: monospace; font-size: 12px; color: #a3957c;
  margin-top: 4px; word-break: break-all;
}

/* The credited moment — the whole point of the redesign. Green, large, and
   carrying the number, because it is the only confirmation there is. */
.gram-dep-ok { border-color: rgba(144,214,83,0.28); background: rgba(144,214,83,0.06); }
.gram-dep-ok-title { font-size: 15px; font-weight: 800; color: #f5dbae; margin-top: 10px; }
.gram-dep-ok-amount { font-size: 26px; font-weight: 800; color: #98e456; margin-top: 4px; line-height: 1.1; }
.gram-dep-ok-hash { font-size: 11px; color: #6c6354; font-family: monospace; margin-top: 8px; word-break: break-all; }
.gram-dep-again {
  width: 100%; margin-top: 10px; padding: 9px; background: none; border: none;
  color: #a3957c; font-size: 12.5px; font-weight: 600; cursor: pointer;
  text-decoration: underline; touch-action: manipulation;
}

.gram-credit-chip {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(144,214,83,0.15); color: #98e456;
  border: 1px solid rgba(144,214,83,0.3);
}
.gram-credit-chip-lg { width: 58px; height: 58px; margin: 0 auto; }

/* In-tab banner: what a player sees when they open the wallet after a deposit
   landed while they were somewhere else. */
.gram-credit-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(144,214,83,0.14), rgba(144,214,83,0.05));
  border: 1px solid rgba(144,214,83,0.32);
  border-radius: 15px; padding: 14px; margin-bottom: 14px;
  animation: gram-credit-in .32s ease-out;
}
.gram-credit-txt { flex: 1; min-width: 0; }
.gram-credit-title { font-size: 12px; font-weight: 700; color: #b7d69a; letter-spacing: .2px; }
.gram-credit-amount { font-size: 22px; font-weight: 800; color: #98e456; line-height: 1.15; margin-top: 1px; word-break: break-all; }
.gram-credit-sub { font-size: 11.5px; color: #a3957c; margin-top: 2px; }
.gram-credit-card { cursor: pointer; }
.gram-credit-close {
  position: relative; flex-shrink: 0; align-self: flex-start;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(0,0,0,0.3); color: #b7a98c; cursor: pointer; font-size: 13px;
  touch-action: manipulation;
}
.gram-credit-close::after { content: ''; position: absolute; inset: -8px; }
.gram-credit-close:active { background: rgba(234,181,89,.24); color: #f4d9aa; }
.gram-credit-mark { flex-shrink: 0; opacity: .85; }
/* The toast's own cross. Same target, on a card that is floating over the
   world and had no way off the screen but waiting eight seconds. */
.gram-credit-x {
  position: relative; flex-shrink: 0; align-self: center;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(0,0,0,0.34); color: #b7a98c; cursor: pointer; font-size: 13px;
  touch-action: manipulation;
}
.gram-credit-x::after { content: ''; position: absolute; inset: -8px; }
.gram-credit-x:active { background: rgba(234,181,89,.24); color: #f4d9aa; }

/* Floating confirmation, for a credit that lands while the player is in the
   world. z-index sits above the panels (400) and below nothing that matters —
   this is the one message in the tab that must never be missed. */
.gram-credit-toast {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: 88vw;
  background: rgba(22,18,10,.97);
  border: 1px solid rgba(144,214,83,0.45);
  border-radius: 15px; padding: 12px 15px;
  box-shadow: 0 6px 26px rgba(0,0,0,.6);
  z-index: 500; cursor: pointer;
  /* Its own keyframes, not the card's: this one is centred with
     translateX(-50%), and an animation that sets transform: translateY() would
     drop that and slam the toast to the left edge for its first frames. */
  animation: gram-credit-toast-in .32s ease-out;
}
@keyframes gram-credit-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gram-credit-toast-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Airdrop promo — a real card with the artwork, no longer a parachute emoji.
   images/airdrop.png is a 192px cut; 60px here keeps it inside the 2x budget
   the coordinator sized it for. */
.gram-airdrop-card {
  display: flex; align-items: center; gap: 13px;
  background: linear-gradient(135deg, rgba(230,148,25,0.14), rgba(230,148,25,0.04));
  border: 1px solid rgba(230,148,25,0.28);
  border-radius: 15px; padding: 12px 14px; margin-bottom: 14px;
}
.gram-airdrop-img { width: 60px; height: 60px; flex-shrink: 0; object-fit: contain; }
.gram-airdrop-txt { min-width: 0; }
.gram-airdrop-title {
  font-size: 15px; font-weight: 800; color: #e6ac19;
  letter-spacing: .03em; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.gram-airdrop-soon {
  font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #1a1a1a; background: #e6ac19; border-radius: 5px; padding: 2px 6px;
}
.gram-airdrop-sub { font-size: 11.5px; color: #b2a288; margin-top: 3px; line-height: 1.45; }

/* ── Profile tabs ─────────────────────────────────────────────────────────── */
.profile-tabs {
  display: flex;
  gap: 0;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(193,204,213,.07);
  flex-shrink: 0;
}
.profile-tab {
  flex: 1;
  background: none;
  border: none;
  color: #899eb1;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.profile-tab.active {
  color: #eec379;
  border-bottom-color: #eec379;
}

/* ── Friends tab ──────────────────────────────────────────────────────────── */
.ref-card {
  background: rgba(238,195,121,.08);
  border: 1px solid rgba(238,195,121,.18);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.ref-card-title { font-size: 11px; color: #899eb1; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.ref-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.25);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f4daac;
  word-break: break-all;
}
.ref-copy-btn {
  background: rgba(238,195,121,.18);
  border: none;
  border-radius: 6px;
  color: #eec379;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.ref-copy-btn:active { background: rgba(238,195,121,.35); }
.ref-stats-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.ref-stat-box {
  flex: 1;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(193,204,213,.07);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.ref-stat-num { font-size: 22px; font-weight: 700; color: #eec379; }
.ref-stat-lbl { font-size: 11px; color: #899eb1; margin-top: 2px; }
.ref-friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(193,204,213,.05);
}
.ref-friend-row:last-child { border-bottom: none; }
.ref-friend-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,#356e97,#294870);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #eec379; flex-shrink: 0;
}
.ref-friend-name { flex: 1; font-size: 14px; color: #f5dbae; }
.ref-friend-bonus { font-size: 12px; color: #89ba5f; font-weight: 600; }
.ref-friend-lvl {
  font-size: 11px; font-weight: 700; color: #f3cf72; white-space: nowrap;
  padding: 2px 7px; border-radius: 8px; border: 1px solid rgba(243,207,114,.45); background: rgba(243,207,114,.08);
}
.ref-empty { text-align: center; padding: 30px 0; color: #3c7caa; font-size: 13px; }

.pvp-hist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(193,204,213,.05);
}
.pvp-hist-row:last-child { border-bottom: none; }
.pvp-hist-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(193,204,213,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.pvp-hist-info { flex: 1; min-width: 0; }
.pvp-hist-text { font-size: 14px; font-weight: 600; }
.pvp-hist-meta { font-size: 11px; color: #3c7caa; margin-top: 2px; }
.pvp-hist-kill { color: #89ba5f; }
.pvp-hist-death { color: #ee6676; }
.pvp-hist-win { color: #e6ac19; }
.pvp-hist-lose { color: #a3957c; }

/* ── Tournament button — solid gold pill inline in the player plate's own
   name row, right-aligned (see _positionTournamentBtn, js/ui.js). Not a
   column entry and not a bare corner badge: a live daily event gets a
   legible label, the one clearly-different-colour thing on the plate. ── */
#tournament-hud-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffd54a, #f0b400);
  border: 1px solid #a97600;
  color: #241a03;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  cursor: pointer;
  z-index: 53;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55);
}
#tournament-hud-btn:active { background: linear-gradient(180deg, #f0b400, #d99e00); }

/* ── HUD menu toggle — folds the Рейтинг/VIP/.../Кодекс column away ────────── */
#hud-menu-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  background: rgba(9,15,23,.90);
  border: 1px solid rgba(193,204,213,.08);
  border-left: 3px solid #5797c4;
  border-radius: 6px;
  color: #b1bfcb;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  z-index: 51;
  box-shadow: 0 2px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(193,204,213,.04);
}
#hud-menu-btn:active { background: rgba(18,31,48,.96); }
#hud-menu-btn.expanded { border-left-color: #ebaa49; color: #e5a546; }
.hud-menu-icon { transition: transform .18s ease; }
#hud-menu-btn.expanded .hud-menu-icon { transform: rotate(90deg); }

/* ── Rating button ────────────────────────────────────────────────────────── */
#rating-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  background: rgba(9,15,23,.90);
  border: 1px solid rgba(193,204,213,.08);
  border-left: 3px solid #d18717;
  border-radius: 6px;
  color: #e5a546;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(193,204,213,.04);
}
#rating-btn:active { background: rgba(18,31,48,.96); border-left-color: #ebaa49; }

/* ── Rating panel overlay ─────────────────────────────────────────────────── */
#rating-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(8,13,20,.97);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rating-header {
  display: flex;
  align-items: center;
  padding: 14px 16px 0;
  flex-shrink: 0;
}
.rating-title {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: #ebaa49;
}
.rating-close {
  background: rgba(193,204,213,.08);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: #5797c4;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rating-tabs {
  display: flex;
  gap: 0;
  margin: 12px 16px 0;
  background: rgba(0,0,0,.3);
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 0;
}
.rating-tab {
  flex: 1;
  background: none;
  border: none;
  color: #899eb1;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rating-tab.active {
  background: rgba(235,170,73,.15);
  color: #ebaa49;
}
.rating-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px 20px;
}
/* Allow touch scroll over all child elements — without this they inherit
   the global touch-action:none reset and silently block scroll gestures. */
#rating-panel, #rating-panel * { touch-action: pan-y; pointer-events: auto; }
.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgba(193,204,213,.04);
  border: 1px solid rgba(193,204,213,.05);
}
.rating-row.rating-me {
  background: rgba(235,170,73,.08);
  border-color: rgba(235,170,73,.25);
}
.rating-rank {
  font-size: 13px;
  font-weight: 800;
  color: #3c7caa;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.rating-rank-1 { color: #e69419; }
.rating-rank-2 { color: #a6b5c3; }
.rating-rank-3 { color: #4a8ebf; }
.rating-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,#294870,#223b5b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #eec379;
  flex-shrink: 0;
}
.rating-clan-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg,#223b5b,#17293f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rating-name {
  flex: 1;
  font-size: 14px;
  color: #f5dbae;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating-sub {
  font-size: 11px;
  color: #5797c4;
  margin-top: 2px;
}
.rating-bm {
  text-align: right;
  flex-shrink: 0;
}
.rating-bm-val {
  font-size: 14px;
  font-weight: 700;
  color: #ebaa49;
}
.rating-bm-lbl {
  font-size: 10px;
  color: #5797c4;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.rating-empty {
  text-align: center;
  color: #2e5f83;
  padding: 40px 0;
  font-size: 13px;
}
.rating-loading {
  text-align: center;
  color: #495b72;
  padding: 40px 0;
  font-size: 13px;
}

.rating-gap {
  text-align: center;
  color: #28456c;
  font-size: 16px;
  letter-spacing: 4px;
  padding: 6px 0;
}

/* ── Турнир panel — same shell as #rating-panel, own id so both can exist ─── */
#tournament-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(8,13,20,.97);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#tournament-panel, #tournament-panel * { touch-action: pan-y; pointer-events: auto; }

/* ── Турнир · Сетка tab — real bracket columns, one per round, each match
   showing the two actual players (see _tournamentBracketBodyHTML, js/ui.js).
   Only rounds that have actually been dealt appear — a round nobody has
   reached yet has no real pairing to show. Horizontal scroll rather than
   shrinking to fit: ten rounds of real names do not fit one phone width at
   any readable size. ──────────────────────────────────────────────────── */
.tour-cols { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
/* Same fix, and same reason, as .market-cat-tabs below: touch-action is
   resolved from the EXACT element a touch starts on, not inherited from a
   scrolling ancestor. A swipe on this strip almost always starts on a
   .tour-match card (they fill the whole column), not on the bare .tour-cols
   flex container — so the first attempt at this fix, which only overrode
   .tour-cols itself, left every card underneath it at the blanket
   touch-action:pan-y from #tournament-panel's rule above, and horizontal
   swipe stayed dead. The override has to cover the actual touch targets. */
#tournament-panel .tour-cols,
#tournament-panel .tour-cols * { touch-action: pan-x pan-y; }
.tour-col { flex: 0 0 138px; display: flex; flex-direction: column; gap: 8px; }
.tour-col-hd {
  font-size: 12px; font-weight: 800; color: #5797c4; text-align: center;
  padding-bottom: 4px; border-bottom: 1px solid rgba(193,204,213,.12);
}
.tour-col.live .tour-col-hd { color: #ffb020; border-bottom-color: rgba(255,176,32,.35); }
.tour-match {
  display: flex; flex-direction: column; gap: 3px; padding: 8px 9px;
  border-radius: 10px; background: rgba(193,204,213,.04);
  border: 1px solid rgba(193,204,213,.05);
}
.tour-tag {
  display: inline-flex; align-items: center; width: fit-content;
  font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px;
  margin-bottom: 2px;
}
.tour-tag-ub { background: rgba(95,208,255,.14); color: #5fd0ff; }
.tour-tag-lb { background: rgba(255,146,87,.14); color: #ff9257; }
.tour-tag-gf { background: rgba(255,176,32,.16); color: #ffb020; }
.tour-side {
  font-size: 12.5px; color: #b3c1cd; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.tour-side.win { color: #f5dbae; font-weight: 700; }
.tour-side.lose { color: #5b6472; text-decoration: line-through; }
.tour-vs { font-size: 9px; color: #3c5570; text-align: center; text-transform: uppercase; letter-spacing: .06em; }

/* ── VIP button ───────────────────────────────────────────────────────────── */
#vip-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  background: rgba(9,15,23,.90);
  border: 1px solid rgba(193,204,213,.08);
  border-left: 3px solid #d0a24c;
  border-radius: 6px;
  color: #e8c481;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(193,204,213,.04);
}
#vip-btn:active { background: rgba(18,31,48,.96); border-left-color: #eac47e; }

/* ── VIP panel overlay ────────────────────────────────────────────────────── */
#vip-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(8,13,20,.97);
  overflow: hidden;
}
.vip-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: rgba(8,13,20,.97);
  z-index: 1;
}
.vip-title {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: #eac47e;
}
.vip-close {
  background: rgba(193,204,213,.08);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: #5797c4;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip-body {
  position: absolute;
  top: 50px; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px 24px;
}
/* Allow touch scroll over all child elements (including images) */
#vip-panel, #vip-panel * { touch-action: pan-y; pointer-events: auto; }
.vip-level-badge {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #eac47e, #e69419);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}
.vip-progress-wrap { margin-bottom: 14px; }
.vip-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #899eb1;
  margin-bottom: 5px;
}
.vip-progress-bar {
  height: 6px;
  background: rgba(193,204,213,.08);
  border-radius: 3px;
  overflow: hidden;
}
.vip-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #5495c3, #eac47e);
  border-radius: 3px;
  transition: width .4s ease;
}
.vip-max-badge {
  text-align: center;
  font-size: 13px;
  color: #e69419;
  font-weight: 700;
  padding: 8px 0 14px;
}
.vip-bonuses {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vip-bonus-item {
  flex: 1;
  min-width: 80px;
  background: rgba(229,182,94,.1);
  border: 1px solid rgba(229,182,94,.2);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #eac47e;
}
.vip-bonus-dim {
  color: #3c4a5d;
  background: rgba(193,204,213,.03);
  border-color: rgba(193,204,213,.06);
}
.vip-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #3c7caa;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.vip-levels { display: flex; flex-direction: column; gap: 8px; }
.vip-card {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(193,204,213,.06);
  background: rgba(193,204,213,.03);
}
.vip-card-done {
  border-color: rgba(229,182,94,.2);
  background: rgba(229,182,94,.06);
}
.vip-card-pending {
  border-color: rgba(235,170,73,.35);
  background: rgba(235,170,73,.08);
  animation: vip-pulse 2s ease-in-out infinite;
}
.vip-card-locked { opacity: .5; }
@keyframes vip-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(235,170,73,0); }
  50%      { box-shadow: 0 0 8px 2px rgba(235,170,73,.2); }
}
.vip-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.vip-card-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(229,182,94,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #eac47e;
  flex-shrink: 0;
  text-align: center;
  line-height: 24px;
}
.vip-card-title { font-size: 13px; font-weight: 800; color: #eece94; flex: 1; }
.vip-card-gram  { font-size: 11px; font-weight: 700; color: #5797c4; }
.vip-card-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.vip-card-bonuses span {
  font-size: 11px;
  background: rgba(229,182,94,.1);
  border-radius: 5px;
  padding: 2px 7px;
  color: #eac47e;
}
.vip-items-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.vip-ri {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(193,204,213,.05);
  border: 1px solid rgba(193,204,213,.1);
  border-radius: 8px;
  padding: 6px 7px 5px;
  min-width: 44px;
}
.vip-ri-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}
.vip-ri-label {
  font-size: 9px;
  color: #91a5b6;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}
.vip-ri-uncommon { border-color: rgba(144,214,83,.35);  background: rgba(144,214,83,.07);  }
.vip-ri-rare     { border-color: rgba(93,163,234,.35);  background: rgba(93,163,234,.07);  }
/* #8a5cc2 — RARITY_COLOR.epic (js/definitions.js), not the gold this used
   to share with the VIP panel's own accent: an epic pet/wings/rune/weapon
   reads purple everywhere else in the game, and a shop card is not the
   place to teach players a second color for the same rarity. Currency/
   bonus reward rows (bonusSP, nexum, skill books, gold) moved to the
   dedicated 'gold' class instead of leaning on this one — see
   _shopExtraRewardRows/_gramShopPkgHtml, js/ui.js. */
.vip-ri-epic     { border-color: rgba(138,92,194,.4);   background: rgba(138,92,194,.08);   }
.vip-ri-legendary{ border-color: rgba(230,148,25,.4);    background: rgba(230,148,25,.08);   }
.vip-ri-gold     { border-color: rgba(230,148,25,.35);   background: rgba(230,148,25,.07);   }
.vip-claim-btn {
  width: 100%;
  padding: 9px 0;
  background: linear-gradient(135deg, #5495c3, #d9b36a);
  border: none;
  border-radius: 8px;
  color: #c1ccd5;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .3px;
  margin-top: 4px;
}
.vip-claim-btn:active { opacity: .85; }

/* ── Market button ────────────────────────────────────────────────────────── */
#market-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  background: rgba(9,15,23,.90);
  border: 1px solid rgba(193,204,213,.08);
  border-left: 3px solid #598f2a;
  border-radius: 6px;
  color: #8fc95c;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(193,204,213,.04);
}
#market-btn:active { background: rgba(18,31,48,.96); border-left-color: #8fc95c; }

/* ── Market panel overlay (reuses .vip-header / .vip-body / .rating-tab*) ──── */
#market-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(8,13,20,.97);
  overflow: hidden;
}
#market-panel, #market-panel * { touch-action: pan-y; pointer-events: auto; }
/* Category tab strip scrolls horizontally — the blanket pan-y above blocks
   that gesture on touch devices. A touch on the strip almost always starts
   on one of the tab buttons (they fill nearly the whole row), so the
   override has to cover the buttons themselves too, not just their
   container — touch-action is resolved from the exact element the touch
   started on, not inherited from an ancestor. */
#market-panel .market-cat-tabs,
#market-panel .market-cat-tabs * { touch-action: pan-x; }

.market-add-btn {
  width: 100%;
  padding: 11px 0;
  background: linear-gradient(135deg, #5a8b30, #90d653);
  border: none;
  border-radius: 10px;
  color: #131d0a;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .2px;
  margin-bottom: 12px;
}
.market-add-btn:active { opacity: .85; }

.market-cat-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(193,204,213,.08);
}
.market-cat-tabs::-webkit-scrollbar { display: none; }
/* A mouse has no flick gesture and no horizontal wheel, and the hidden
   scrollbar above left nothing to grab — so on a PC every category past the
   visible width was unreachable. Give fine-pointer devices a slim scrollbar
   back (the wheel/drag handling that goes with it is in
   _ensureMarketStripScroll, js/ui.js). */
@media (hover: hover) and (pointer: fine) {
  .market-cat-tabs {
    scrollbar-width: thin;
    scrollbar-color: rgba(193,204,213,.22) transparent;
    padding-bottom: 6px;
    cursor: grab;
  }
  .market-cat-tabs:active { cursor: grabbing; }
  .market-cat-tabs::-webkit-scrollbar { display: block; height: 6px; }
  .market-cat-tabs::-webkit-scrollbar-track { background: transparent; }
  .market-cat-tabs::-webkit-scrollbar-thumb {
    background: rgba(193,204,213,.22);
    border-radius: 3px;
  }
  .market-cat-tabs::-webkit-scrollbar-thumb:hover { background: rgba(193,204,213,.35); }
}

/* «Показано перші N лотів» — стоїть НАД пошуком, а не під списком, бо це
   попередження про те, чому пошук і лічильники категорій нижче можуть
   збрехати: вони рахуються по завантаженому шматку ринку. Приглушене й
   некликабельне: це стан, а не дія. Показується тільки коли видача справді
   уперлася в стелю (_renderMarketLots, js/ui.js). */
.market-truncated {
  margin-bottom: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(235,170,73,.22);
  border-radius: 8px;
  background: rgba(235,170,73,.06);
  color: #b2a288;
  font-size: 11.5px;
  text-align: center;
}

/* Search + rarity/sort selects above the category strip. The input takes a
   full row of its own: at 430px the three side by side left it too narrow to
   read a query in. */
.market-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.market-search {
  flex: 1 1 100%;
  min-width: 0;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(193,204,213,.12);
  border-radius: 8px;
  color: #c1ccd5;
  font-family: inherit;
  font-size: 12.5px;
  padding: 8px 10px;
}
.market-search::placeholder { color: #336a91; }
.market-search:focus { outline: none; border-color: rgba(235,170,73,.35); }
.market-select {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(193,204,213,.12);
  border-radius: 8px;
  color: #899eb1;
  font-family: inherit;
  font-size: 12px;
  padding: 8px 6px;
  cursor: pointer;
}
.market-cat-tab {
  flex-shrink: 0;
  background: rgba(193,204,213,.05);
  border: 1px solid rgba(193,204,213,.08);
  color: #899eb1;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.market-cat-tab.active {
  background: rgba(235,170,73,.15);
  border-color: rgba(235,170,73,.35);
  color: #ebaa49;
}
.market-cat-count {
  font-weight: 700;
  opacity: .7;
  margin-left: 2px;
}
.market-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgba(193,204,213,.04);
  border: 1px solid rgba(193,204,213,.05);
}
.market-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.market-row-info { flex: 1; min-width: 0; }
.market-row-name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-row-sub {
  font-size: 10.5px;
  color: #a3957c;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-row-price {
  font-size: 13px;
  font-weight: 800;
  color: #90d653;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
.market-buy-btn {
  margin-top: 4px;
  padding: 5px 12px;
  background: rgba(144,214,83,.15);
  border: 1px solid rgba(144,214,83,.4);
  border-radius: 7px;
  color: #90d653;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.market-buy-btn:active { background: rgba(144,214,83,.3); }
/* Свой лот. Не прячем, а гасим: строка остаётся на своём месте в списке, и
   видно, что это твой товар, а не что он куда-то делся. */
.market-buy-btn.disabled,
.market-buy-btn[disabled] {
  opacity:.42; cursor:default; pointer-events:none;
  border-color:rgba(174,165,153,.25); color:#8d8579;
  background:rgba(174,165,153,.06);
}
.market-cancel-btn {
  margin-top: 4px;
  padding: 5px 12px;
  background: rgba(227,84,101,.12);
  border: 1px solid rgba(227,84,101,.35);
  border-radius: 7px;
  color: #ee6676;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.market-cancel-btn:active { background: rgba(227,84,101,.25); }
.market-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.market-compare-btn {
  margin-top: 4px;
  padding: 5px 12px;
  background: rgba(193,204,213,.08);
  border: 1px solid rgba(193,204,213,.25);
  border-radius: 7px;
  color: #c9bfab;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.market-compare-btn:active { background: rgba(193,204,213,.16); }

.market-hist-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  display: inline-block;
}
.market-hist-buy  { background: rgba(234,182,93,.15); color: #eec379; }
.market-hist-sell { background: rgba(144,214,83,.15); color: #90d653; }
.market-hist-cancelled { background: rgba(131,153,172,.15); color: #899eb1; }

/* ── Market: sell picker & buy confirm modals ───────────────────────────────── */
.market-modal-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
}
/* These modals are appended straight to <body>, outside #market-panel, so
   they miss that panel's touch-action override and inherit the global
   touch-action:none reset — which silently blocks scroll gestures. */
.market-modal-overlay, .market-modal-overlay * { touch-action: pan-y; pointer-events: auto; }
.market-modal-sheet {
  width: 100%; max-width: 500px;
  max-height: 82vh;
  background: #0c1420;
  border-radius: 18px 18px 0 0;
  border-top: 1px solid rgba(193,204,213,.1);
  padding: 18px 16px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Market: item compare modal (two cards — the equipped item vs the lot) ─── */
.compare-grid {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr: a grid item's default min-width is auto,
     i.e. its content's min-content size — so the two cards would size
     unevenly by name length and, when both names were long enough, overflow
     the sheet, clipping the losing card's stat values off the right edge
     of the screen with no scrollbar to reveal them. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
@media (max-width: 420px) {
  .compare-grid { grid-template-columns: 1fr; }
}
.compare-card {
  background: rgba(193,204,213,.04);
  border: 1px solid rgba(193,204,213,.08);
  border-radius: 12px;
  padding: 12px;
}
.compare-card-hdr {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a3957c;
  margin-bottom: 8px;
}
.compare-card-name {
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-card-empty {
  font-size: 12px;
  color: #776d5d;
  padding: 10px 0;
  text-align: center;
}
.compare-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  padding: 4px 0;
  border-top: 1px solid rgba(193,204,213,.06);
}
.compare-stat-row:first-of-type { border-top: none; margin-top: 8px; }
.compare-stat-lbl { color: #a3957c; }
/* Base color, overridden by .better/.worse below when there's something to
   diff against (the two-card compare modal). openPeerItemModal — a single
   card, nothing to compare — never adds either class, and neither this rule
   nor any ancestor set a color before this: the value fell through to the
   browser default (black) on the dark sheet, unreadable — "характеристики
   питомца написаны чёрным" (reported on a peer's equipped pet, but this hits
   every stat value shown through this one-card path, pets included only
   because that's the equipment slot that was open when it was noticed). */
.compare-stat-val { font-weight: 700; white-space: nowrap; color: #b1bfcb; }
.compare-stat-val.better { color: #90d653; }
.compare-stat-val.worse  { color: #ee6676; }

/* ── Peer profile / item-detail modal (clicking an equipped item) ──────────── */
.item-detail-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: rgba(193,204,213,.04);
  border-radius: 10px;
  margin-bottom: 14px;
}

/* ── "What's new" login modal — centered dialog, not a bottom sheet ────────── */
.whatsnew-modal-overlay { align-items: center; z-index: 401; }
.whatsnew-modal-sheet {
  width: calc(100% - 32px); max-width: 400px; max-height: 78vh;
  border-radius: 18px;
  border-top: none;
  border: 1px solid rgba(193,204,213,.1);
  padding: 0;
  overflow: hidden;
}
.whatsnew-hero {
  position: relative;
  padding: 30px 24px 4px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% -15%, rgba(139,92,246,.20), transparent 60%);
}
.whatsnew-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: rgba(193,204,213,.08); color: #5797c4; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.whatsnew-badge {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(139,92,246,.22), rgba(6,10,15,.55));
  border: 1px solid rgba(139,92,246,.5);
  box-shadow: 0 0 22px rgba(139,92,246,.32), inset 0 1px 0 rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
}
.whatsnew-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #a684f2; margin-bottom: 6px;
}
.whatsnew-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--parchment); line-height: 1.3;
}
.whatsnew-body { padding: 14px 22px 22px; }
.whatsnew-desc { font-size: 13px; line-height: 1.65; color: #a3957c; text-align: center; margin-bottom: 20px; }
.whatsnew-cta {
  width: 100%; padding: 13px 0; border: none; border-radius: 11px;
  background: linear-gradient(135deg, #8b5cf6, #c9a6f0);
  color: #0b131d; font-size: 14px; font-weight: 800; cursor: pointer;
}
.whatsnew-cta:active { filter: brightness(1.08); }

.market-pick-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 12px 0;
}
.market-pick-cell {
  aspect-ratio: 1;
  border-radius: 9px;
  background: rgba(193,204,213,.04);
  border: 1px solid rgba(193,204,213,.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
}
.market-pick-cell.selected { border-color: #90d653; background: rgba(144,214,83,.12); }

/* ── GRAM Shop ─────────────────────────────────────────────── */
#gram-shop-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  background: rgba(9,15,23,.90);
  border: 1px solid rgba(193,204,213,.08);
  border-left: 3px solid #336a91;
  border-radius: 6px;
  color: #e9a135;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(193,204,213,.04);
}
#gram-shop-btn:active { background: rgba(18,31,48,.96); border-left-color: #ecae52; }

/* ── Events button (События) ──────────────────────────────── */
#events-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  background: rgba(9,15,23,.90);
  border: 1px solid rgba(193,204,213,.08);
  border-left: 3px solid #e14c5d;
  border-radius: 6px;
  color: #f07886;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(193,204,213,.04);
}

#events-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(8,13,20,.97);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#events-panel, #events-panel * { touch-action: pan-y; pointer-events: auto; }
/* The panel reuses .vip-header/.vip-body, both of which are absolutely
   positioned — so the tab list has to be placed under the 50px header
   explicitly, rather than relying on flex order (which would just put it
   behind the header).
   Two views, toggled by the .events-detail class on #events-panel (see
   openEventDetail/showEventsList, js/ui.js):
     • list (default) — .event-tab-list is the whole panel: one row per
       event, each with its own SVG icon and a tint of that location's
       actual world colour (--cc, set inline per button — race10's is its
       corridor's blood red, coop's its grass green, etc.) via the same
       --cc + color-mix() pattern .profp-card/.profp-banner-icon already use
       for the profession codex. Replaced a plain row of .rating-tab buttons
       (the pattern every other panel with 2-3 tabs uses) that stopped
       fitting once this panel grew to 7 events — labels clipped or wrapped.
     • detail — tapping a row navigates to that event's own page instead of
       swapping content in place under a still-visible tab strip: the list
       hides, the header grows a back arrow and swaps its title/icon to the
       open event's (via the matching #etitle-<tab> span), and .vip-body
       takes the full area below the header. */
.event-tab-list {
  position: absolute;
  top: 54px; left: 16px; right: 16px; bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 1;
  padding-bottom: 8px;
}
/* Each card's own themed art (images/events/<key>.jpg — a crop of just the
   hexagon-icon + scene, no text baked in, see the upload that prompted this)
   sits under a left-to-right fade via mask-image on ::before, so real DOM
   text (translatable, i18n'd, reflows with content) always renders on top
   of it rather than the art carrying baked-in copy. --art is set inline per
   button (style="--cc:#4caf6b; --art:url('/images/events/coop.jpg')"),
   same convention --cc already uses for per-tab theming. */
.event-tab-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
  min-height: 86px;
  padding: 10px 14px 10px 132px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--cc) 38%, rgba(193,204,213,.12));
  background: #070c13;
  color: #c2cdd6;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.event-tab-item::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 140px;   /* art stays in its own column — never under the title */
  background-image: var(--art);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
  z-index: 0;
}
.event-tab-item.active {
  border-color: var(--cc);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc) 35%, transparent), 0 4px 14px rgba(0,0,0,.4);
}
.event-tab-text { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.event-tab-label { font-size: 15px; font-weight: 700; color: var(--cc); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.event-tab-sub { font-size: 11px; font-weight: 500; line-height: 1.35; color: #a9b8c5; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.event-tab-sched { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: #4b8fc0; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.event-tab-sched svg { flex-shrink: 0; opacity: .85; }
.event-tab-arrow { position: relative; z-index: 1; flex-shrink: 0; color: var(--cc); opacity: .6; }
.event-tab-item.active .event-tab-arrow { opacity: 1; }
/* Cards the player can't use right now fade back so the playable ones lead. */
.event-tab-item.evt-off { opacity: .62; }
.event-tab-item.evt-live, .event-tab-item.evt-mine, .event-tab-item.evt-open { border-color: color-mix(in srgb, var(--cc) 70%, transparent); }

/* List sections: «Доступно сейчас» / «Скоро» / «Пока недоступно». */
.evt-sec-hdr {
  flex-shrink: 0;
  margin: 6px 2px 0;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: #6f8597;
}
.evt-sec-hdr:first-child { margin-top: 0; }
.evt-sec-now { color: #8fd65c; }

/* Status pill — one colour per state, same on the card and on the page. */
.evt-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.3;
  background: rgba(125,138,150,.16); color: #b5c0ca;
  border: 1px solid rgba(125,138,150,.3);
  white-space: nowrap;
}
.evt-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.evt-pill-open { background: rgba(143,214,92,.14); color: #a6e57a; border-color: rgba(143,214,92,.4); }
.evt-pill-mine { background: rgba(255,207,138,.14); color: #ffcf8a; border-color: rgba(255,207,138,.45); }
.evt-pill-live { background: rgba(255,107,94,.16); color: #ff8c80; border-color: rgba(255,107,94,.5); }
.evt-pill-live i { animation: evtPulse 1.2s ease-in-out infinite; }
.evt-pill-soon { background: rgba(111,168,214,.13); color: #8fc2ea; border-color: rgba(111,168,214,.35); }
.evt-pill-off  { background: rgba(125,138,150,.12); color: #8e9aa5; border-color: rgba(125,138,150,.28); }
@keyframes evtPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .evt-pill-live i { animation: none; } }

/* ── Логово боссов: one card per boss (_lairBossCardsHTML, js/ui.js) ── */
.lair-list { display: flex; flex-direction: column; gap: 8px; }
.lair-boss {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--bc) 7%, rgba(0,0,0,.25));
  border: 1px solid color-mix(in srgb, var(--bc) 32%, rgba(193,204,213,.08));
}
.lair-boss.is-locked { opacity: .55; }
.lair-boss.is-fighting { border-color: #ffcf8a; box-shadow: 0 0 0 1px rgba(255,207,138,.35); }
.lair-ico {
  position: relative; flex-shrink: 0;
  width: 60px; height: 60px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--bc) 30%, transparent), rgba(0,0,0,.35) 70%);
  border: 1px solid color-mix(in srgb, var(--bc) 40%, transparent);
  overflow: hidden;
}
.lair-sprite { display: block; background-repeat: no-repeat; image-rendering: pixelated; }
.lair-badge {
  position: absolute; right: 2px; bottom: 2px;
  min-width: 20px; padding: 1px 4px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; text-align: center;
  color: #1a0c0c; background: #ffcf8a;
}
.lair-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lair-name { font-size: 13.5px; font-weight: 800; color: var(--bc); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lair-lvl { font-size: 11px; font-weight: 700; color: #a8bccb; }
.lair-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: #8fa3b3; }
.lair-stats b { color: #e3e9ee; }
.lair-rew { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; font-weight: 700; color: #ffcf8a; }
.lair-rew-lbl { font-weight: 600; color: #8fa3b3; }
.lair-rew-it { display: inline-flex; align-items: center; gap: 2px; }
.lair-rew-it img, .lair-rew-it svg { width: 18px; height: 18px; }
.lair-act { flex-shrink: 0; }
.lair-go {
  padding: 8px 12px; border-radius: 9px;
  border: 1px solid rgba(229,72,77,.55);
  background: linear-gradient(180deg, rgba(229,72,77,.28), rgba(229,72,77,.12));
  color: #ffc2b8; font-size: 12px; font-weight: 800;
  cursor: pointer; touch-action: manipulation; white-space: nowrap;
}
.lair-go:disabled { opacity: .45; cursor: default; }
.lair-lock {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 66px; text-align: center; line-height: 1.2;
  font-size: 10.5px; font-weight: 700; color: #8e9aa5;
}

/* ── Event page (_evtPageHTML, js/ui.js) ── */
.evp { display: flex; flex-direction: column; gap: 12px; }
.evp-hero {
  position: relative;
  min-height: 112px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--cc) 45%, rgba(193,204,213,.12));
  background: #070c13;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 12px 14px 12px 136px;
}
.evp-hero::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 150px;
  background-image: var(--art); background-repeat: no-repeat;
  background-position: left center; background-size: cover;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
}
.evp-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.evp-title { font-size: 18px; font-weight: 800; color: var(--cc); text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.evp-sub { font-size: 12px; line-height: 1.35; color: #b8c5d0; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.evp-pill-row { display: flex; justify-content: center; }
.evp-pill-row .evt-pill { align-self: auto; }

.evp-status {
  text-align: center;
  padding: 12px 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cc) 9%, rgba(0,0,0,.25));
  border: 1px solid color-mix(in srgb, var(--cc) 25%, rgba(193,204,213,.08));
}
.evp-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8197ab; }
.evp-stat-value {
  margin-top: 2px;
  font-size: 32px; font-weight: 800; letter-spacing: 1px;
  color: #ffcf8a; font-variant-numeric: tabular-nums;
}
.evp-stat-value.is-text { font-size: 19px; letter-spacing: 0; line-height: 1.3; margin-top: 4px; }
.evp-stat-note { margin-top: 3px; font-size: 12.5px; color: #a8bccb; }

.evp-action { display: flex; flex-direction: column; gap: 8px; }
.evp-action .coop-grp-box { margin-bottom: 0; }
.evp-sub-hdr { margin-top: 6px; font-size: 11px; font-weight: 700; color: #8197ab; letter-spacing: .05em; text-transform: uppercase; }
.evp-action .coop-open-list { margin-top: 0; }
.evp-hint {
  font-size: 12px; line-height: 1.45; color: #a8bccb;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(111,168,214,.08); border: 1px solid rgba(111,168,214,.2);
}

.evp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evp-fact {
  min-width: 0;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(193,204,213,.04); border: 1px solid rgba(193,204,213,.09);
}
.evp-fact-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6f8597; }
.evp-fact-v { margin-top: 2px; font-size: 13px; font-weight: 700; color: #e3e9ee; line-height: 1.3; overflow-wrap: anywhere; }

.evp-section { margin-top: 4px; }
.evp-sec-hdr { font-size: 13px; font-weight: 800; color: #ffcf8a; margin-bottom: 8px; }
.evp-section .db-rewards { margin-bottom: 0; }
.evp-steps { margin: 0; padding: 0; list-style: none; counter-reset: evp; display: flex; flex-direction: column; gap: 7px; }
.evp-steps li {
  counter-increment: evp;
  position: relative;
  padding-left: 28px;
  font-size: 12.5px; line-height: 1.45; color: #b3c1cd;
}
.evp-steps li::before {
  content: counter(evp);
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  color: var(--cc); background: color-mix(in srgb, var(--cc) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent);
}

.vip-back {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-right: 8px;
  background: rgba(193,204,213,.08);
  border: none;
  border-radius: 50%;
  color: #5797c4;
  cursor: pointer;
}
#events-panel.events-detail .vip-back { display: flex; }
#events-panel.events-detail .event-tab-list { display: none; }
#events-panel:not(.events-detail) .vip-body { display: none; }
#events-panel.events-detail .vip-body { display: block; top: 50px; }

#gram-shop-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(8,13,20,.97);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#gram-shop-panel, #gram-shop-panel * { touch-action: pan-y; pointer-events: auto; }

#gram-shop-body {
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 20px;
}

.gram-shop-card {
  background: rgba(230,148,25,0.04);
  border: 1px solid rgba(230,148,25,0.15);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.gram-shop-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.gram-shop-title {
  font-size: 14px;
  font-weight: 800;
}
.gram-shop-price {
  font-size: 11px;
  color: #a3957c;
  margin-top: 2px;
  font-weight: 600;
}
.gram-shop-buy-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.gram-shop-buy-btn.disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── DEATH BATTLE (Битва на смерть) ───────────────────── */
/* Lives inside the Events panel now; only the shared bits below are left.
   Battle registration being open highlights the Events button itself. */
/* ── Season button (Сезон) ─────────────────────────────────── */
#season-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  background: rgba(9,15,23,.90);
  border: 1px solid rgba(193,204,213,.08);
  border-left: 3px solid #50af95;
  border-radius: 6px;
  color: #7ee0c0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(193,204,213,.04);
}
#season-btn:active { background: rgba(16,35,28,.96); border-left-color: #7ee0c0; }

/* Season panel — same overlay geometry as the events panel it sits under. */
#season-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(8,13,20,.97);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#season-panel, #season-panel * { touch-action: pan-y; pointer-events: auto; }
/* Same reasoning as #season-panel above. */
#gram-shop-panel .rating-tabs {
  position: absolute;
  top: 54px; left: 16px; right: 16px;
  margin: 0;
  z-index: 1;
}
#gram-shop-panel .vip-body { top: 100px; }
/* Season panel's own 3-way tab strip (Сезон / Задания / Рейтинг) — same
   "tabs float over the header, body pushed below" geometry as the gram shop
   above, just with 3 buttons instead of 2. */
#season-panel .rating-tabs {
  position: absolute;
  top: 54px; left: 16px; right: 16px;
  margin: 0;
  z-index: 1;
}
#season-panel .vip-body { top: 100px; }

/* "Сезон" tab: description + rewards, framed like the old victory-card
   parchment (.db-win-panel) but sized to sit inline in the scroll body. */
.season-card {
  position: relative;
  margin: 8px auto 0;
  max-width: 320px;
  background:
    radial-gradient(ellipse 200px 140px at 50% -10%, rgba(255,180,84,0.16), transparent 65%),
    linear-gradient(175deg, var(--leather-hi), var(--leather-lo) 85%);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  padding: 26px 20px 22px;
  text-align: center;
  box-shadow: 0 0 0 1px #000, 0 20px 40px -15px rgba(0,0,0,0.7);
}
.season-card::before, .season-card::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1.5px solid var(--gold);
}
.season-card::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.season-card::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.season-card-title { font-size: 20px; font-weight: 800; letter-spacing: .5px; color: #f5dbae; margin-bottom: 4px; }
.season-card-sub { font-size: 12.5px; color: #8197ab; margin-bottom: 6px; }
.season-card-rule {
  display: flex; align-items: center; gap: 10px;
  color: #ffcf8a; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  margin: 18px 0 10px;
}
.season-card-rule:first-child { margin-top: 0; }
.season-card-rule::before, .season-card-rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

/* "Рейтинг" tab rows — place/name/points, top-3 places colored gold/silver/
   bronze, the current player's own row highlighted green. */
.season-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(193,204,213,.07);
  margin-bottom: 6px;
}
.season-row.me { border-color: rgba(80,175,149,.55); background: rgba(80,175,149,.10); }
.season-place { width: 30px; font-weight: 800; color: #c1ccd5; font-size: 13px; }
.season-place.p1 { color: #ffd35c; } .season-place.p2 { color: #ced7de; } .season-place.p3 { color: #d99a5c; }
.season-name { flex: 1; color: #c1ccd5; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Round class portrait badge (classBadgeHTML, js/icons.js) — a compact
   "whose class is this" marker next to a username. Shared by the season
   rating list, the regular BM rating list and the clan member list; each
   caller sets its own width/height inline (default 20px), this only fixes
   the shape. */
.class-icon-badge {
  border-radius: 50%; flex-shrink: 0; vertical-align: middle;
  object-fit: contain; padding: 3px; box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.35);
}
.season-pts { color: #7ee0c0; font-weight: 800; font-size: 12.5px; }
.season-prize { color: #ffd35c; font-weight: 800; font-size: 12.5px; white-space: nowrap; }

/* "Задания" tab — one row per book stack the player is holding. */
.season-book-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(193,204,213,.07);
  margin-bottom: 6px;
  font-size: 12.5px;
}
.season-book-row .season-book-name { flex: 1; color: #c1ccd5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-book-row .season-book-qty { color: #a3957c; }

#events-btn.db-open {
  color: #ffd18a;
  border-left-color: #ffb454;
  animation: dbPulse 1.6s ease-in-out infinite;
}
@keyframes dbPulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(193,204,213,.04); }
  50%      { box-shadow: 0 2px 12px rgba(0,0,0,.55), 0 0 12px rgba(255,180,84,.55), inset 0 1px 0 rgba(193,204,213,.04); }
}
@media (prefers-reduced-motion: reduce) {
  #events-btn.db-open { animation: none; }
}

.db-countdown {
  font-size: 30px;
  font-weight: 800;
  color: #ffcf8a;
  text-align: center;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
.db-phase {
  text-align: center;
  font-size: 12px;
  color: #8197ab;
  margin-bottom: 14px;
}
.db-count {
  text-align: center;
  font-size: 13px;
  color: #8fc95c;
  font-weight: 700;
  margin-bottom: 14px;
}
.db-action {
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  border: 1px solid rgba(232,87,79,.5);
  background: linear-gradient(180deg, rgba(232,87,79,.24), rgba(232,87,79,.10));
  color: #ffb9a6;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.db-action:disabled { opacity: .45; cursor: default; }
.db-action.db-leave {
  border-color: rgba(193,204,213,.22);
  background: rgba(193,204,213,.05);
  color: #b3c1cd;
}
.db-rules {
  margin-top: 16px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #3c7caa;
}
.db-rules li { margin-left: 14px; }

/* Сотрудничество (Coop) group lobby — the leader/member panel and the
   joinable-groups list shown in place of the plain single db-action button. */
.coop-grp-box {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(193,204,213,.08);
  border-radius: 10px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.coop-grp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(193,204,213,.05);
}
.coop-grp-row:last-child { border-bottom: none; }
.coop-grp-empty .coop-grp-name { color: #3c7caa; font-style: italic; }
.coop-grp-name { font-size: 13.5px; color: #f5dbae; }
.coop-grp-tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8fc95c;
  font-weight: 700;
}
.coop-grp-kick {
  border: 1px solid rgba(232,87,79,.4);
  background: rgba(232,87,79,.12);
  color: #ffb9a6;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
  touch-action: manipulation;
}
.coop-open-list { margin-top: 10px; }
.coop-open-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(193,204,213,.07);
  border-radius: 10px;
  margin-bottom: 6px;
}
.coop-join-btn {
  border: 1px solid rgba(143,214,255,.4);
  background: rgba(143,214,255,.12);
  color: #8fd6ff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  touch-action: manipulation;
}
.coop-open-empty {
  text-align: center;
  font-size: 12px;
  color: #3c7caa;
  margin-top: 10px;
  padding: 10px 0;
}

/* Victory modal — same framing as the death modal, gold instead of blood. */
/* The 3v3 and race10 result modals reuse .db-win-panel and its children
   wholesale — only the icon/title/subtitle text differ between outcomes. */
#a3-result-modal, #race10-result-modal, #lair-result-modal, #coop-result-modal {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center; z-index: 260;
  backdrop-filter: blur(4px);
}
.db-win-panel {
  position: relative;
  background:
    radial-gradient(ellipse 200px 140px at 50% -10%, rgba(255,180,84,0.20), transparent 65%),
    linear-gradient(175deg, var(--leather-hi), var(--leather-lo) 85%);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  padding: 28px 22px 22px;
  text-align: center;
  width: min(90%, 320px);
  box-shadow: 0 0 0 1px #000, 0 30px 50px -15px rgba(0,0,0,0.8), 0 0 40px rgba(255,180,84,0.15);
}
.db-win-panel::before, .db-win-panel::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1.5px solid var(--gold);
}
.db-win-panel::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.db-win-panel::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.db-win-crown { font-size: 42px; margin-bottom: 6px; }
.db-win-title {
  font-size: 21px; font-weight: 800; letter-spacing: 3px;
  color: #ffcf8a; margin-bottom: 4px;
}
.db-win-sub { font-size: 12px; color: #8197ab; margin-bottom: 16px; }
/* Prize list — shared by the panel's preview and the winner's modal, so the
   two always show the same thing (see _dbRewardRows in js/ui.js). */
.db-rewards {
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 18px; text-align: left;
}
.db-rewards-hdr {
  margin-top: 16px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700;
  color: #ffcf8a;
}
.db-reward-row {
  display: flex; align-items: center; gap: 9px;
  background: rgba(193,204,213,.04);
  border: 1px solid rgba(193,204,213,.09);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: #c2cdd7;
}
.db-reward-row img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; image-rendering: pixelated; }
.db-reward-fallback { font-size: 18px; width: 22px; text-align: center; flex: 0 0 auto; }
.db-reward-row .db-reward-qty { margin-left: auto; color: #ffcf8a; font-weight: 700; font-variant-numeric: tabular-nums; }
.db-win-btn {
  width: 100%; padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,180,84,.5);
  background: linear-gradient(180deg, rgba(255,180,84,.24), rgba(255,180,84,.10));
  color: #ffcf8a; font-size: 13.5px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}

/* Death-battle pre-fight countdown. pointer-events:none matters: it covers the
   joystick area, and the freeze lifts mid-touch. */
#db-freeze {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 240;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(232,87,79,.16), transparent 60%);
}
.db-freeze-num {
  font-size: 92px;
  font-weight: 800;
  line-height: 1;
  color: #ffcf8a;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(232,87,79,.65), 0 4px 18px rgba(0,0,0,.8);
}
.db-freeze-lbl {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #f0937e;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}

/* 3v3 match round clock — small, out of the way of the joystick/skill buttons,
   just under the header. Text-only, doesn't intercept touches. */
#a3-match-timer {
  position: fixed;
  top: 68px; left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 235;
  pointer-events: none;
  padding: 3px 12px;
  border-radius: 8px;
  background: rgba(9,16,25,.72);
  border: 1px solid rgba(203,161,89,.4);
  color: #ffcf8a;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}

/* ── Профессия panel — second-profession codex ──────────────────────────────
   Same overlay geometry as the other HUD panels (rating/vip/events/season),
   reached instead from the canvas-drawn button under Мир/ПК (drawProfession-
   Button, js/ui.js) rather than a top-right DOM button. */
#profession-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: radial-gradient(ellipse 640px 420px at 50% -6%, rgba(165,143,196,.08), transparent 60%), rgba(8,13,20,.97);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#profession-panel, #profession-panel * { touch-action: pan-y; pointer-events: auto; }

.profp-body { padding: 14px 14px 26px; }

.profp-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 14%, transparent), rgba(193,204,213,.03));
  border: 1px solid color-mix(in srgb, var(--cc) 40%, rgba(193,204,213,.12));
  border-radius: 14px;
}
.profp-banner-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(6,10,15,.6);
  border: 1px solid color-mix(in srgb, var(--cc) 55%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--cc) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.profp-banner-cls { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--parchment); }
.profp-banner-sub { font-size: 11.5px; color: #5797c4; margin-top: 2px; }

.profp-cards { display: flex; flex-direction: column; gap: 10px; }
.profp-card {
  background: rgba(193,204,213,.03);
  border: 1px solid rgba(193,204,213,.1);
  border-radius: 14px;
  padding: 14px 14px 12px;
  position: relative;
}
.profp-card.learned {
  border-color: color-mix(in srgb, var(--cc) 55%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 8%, transparent), rgba(193,204,213,.03));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc) 18%, transparent), 0 4px 18px rgba(0,0,0,.35);
}
.profp-card-key {
  position: absolute; top: 12px; right: 14px;
  width: 20px; height: 20px; border-radius: 5px;
  background: rgba(6,10,15,.7); border: 1px solid rgba(193,204,213,.15);
  color: #b5a684; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.profp-flow { display: flex; align-items: center; gap: 4px; padding-right: 26px; }
.profp-node { flex: 1; min-width: 0; text-align: center; }
.profp-node-icon {
  width: 44px; height: 44px; margin: 0 auto 6px;
  border-radius: 11px;
  background: rgba(6,10,15,.55);
  border: 1px solid rgba(193,204,213,.14);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.profp-card.learned .profp-node.adv .profp-node-icon {
  border-color: color-mix(in srgb, var(--cc) 60%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cc) 45%, transparent);
}
.profp-node-icon.dim { opacity: .38; filter: grayscale(.6); }
.profp-node-lockbadge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,10,15,.35); border-radius: 11px;
}
.profp-icon-img { width: 24px; height: 24px; image-rendering: pixelated; border-radius: 4px; }
.profp-node-name { font-size: 11px; font-weight: 600; color: #b1bfcb; line-height: 1.25; min-height: 28px; display: flex; align-items: center; justify-content: center; }
.profp-bar { height: 4px; border-radius: 2px; background: rgba(6,10,15,.6); overflow: hidden; margin-top: 2px; }
.profp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-hi)); border-radius: 2px; }

.profp-connector { flex-shrink: 0; width: 30px; height: 44px; display: flex; align-items: center; justify-content: center; }
.profp-fx { position: relative; width: 22px; height: 22px; display: block; }
.profp-fx::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 2px;
  background: color-mix(in srgb, var(--fx) 70%, transparent);
  transform: translate(-50%, -50%);
}
.profp-fx::after { content: '▸'; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); color: var(--fx); font-size: 11px; }
.profp-fx-classic::before { opacity: .5; }
.profp-fx-pulse::before { animation: profpPulseLine 1.6s ease-in-out infinite; }
@keyframes profpPulseLine {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scaleX(.9); }
  50% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.08); }
}

.profp-descs { margin: 9px 0 10px; display: flex; flex-direction: column; gap: 5px; }
.profp-desc-row {
  font-size: 12px; color: #5797c4; line-height: 1.5;
  padding-left: 8px; border-left: 2px solid rgba(193,204,213,.14);
  transition: opacity .15s, color .15s;
}
.profp-desc-row.dim { opacity: .5; }
.profp-desc-row.lit { color: #b1bfcb; border-left-color: var(--cc); }
.profp-desc-tag {
  display: inline-block; min-width: 46px; margin-right: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #336a91;
}
.profp-desc-row.lit .profp-desc-tag { color: var(--cc); }

.profp-lockrow { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #468cbe; }
.profp-learn-btn {
  width: 100%; padding: 9px 0; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--cc), color-mix(in srgb, var(--cc) 70%, #2a1030));
  color: #0b131d; font-size: 13px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.profp-learn-btn:active { filter: brightness(1.1); }

.profp-toggle {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.profp-toggle-opt { flex: 1; font-size: 11.5px; font-weight: 600; color: #38749f; text-align: center; transition: color .15s; }
.profp-toggle-opt.on { color: #c1ccd5; }
.profp-toggle-opt.on[style*="--cc"] { color: var(--cc); }
.profp-toggle-switch {
  flex-shrink: 0; width: 40px; height: 22px; border-radius: 11px;
  background: rgba(6,10,15,.7); border: 1px solid rgba(193,204,213,.18);
  position: relative;
}
.profp-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #b1bfcb; transition: left .16s ease, background .16s ease;
}
.profp-toggle-switch.adv { border-color: color-mix(in srgb, var(--cc) 60%, transparent); }
.profp-toggle-switch.adv .profp-toggle-knob { left: 20px; background: var(--cc); box-shadow: 0 0 8px var(--cc); }

.profp-hint { margin-top: 16px; font-size: 11px; color: #336a91; text-align: center; line-height: 1.5; }

/* ── Codex button ──────────────────────────────────────────────────────────── */
#codex-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  background: rgba(9,15,23,.90);
  border: 1px solid rgba(193,204,213,.08);
  border-left: 3px solid #8b5cf6;
  border-radius: 6px;
  color: #c9a6f0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(193,204,213,.04);
}
#codex-btn:active { background: rgba(28,16,35,.96); border-left-color: #c9a6f0; }

/* ── Codex panel overlay ───────────────────────────────────────────────────── */
#codex-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(8,13,20,.97);
  overflow: hidden;
}
#codex-panel, #codex-panel * { touch-action: pan-y; pointer-events: auto; }
.codex-hint { font-size: 11.5px; color: #5797c4; line-height: 1.5; margin-bottom: 12px; }
.codex-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 12px;
  background: rgba(139,92,246,.10); border: 1px solid rgba(139,92,246,.30);
}
.codex-total-label { font-size: 12px; font-weight: 700; color: #c9a6f0; }
.codex-total-stats { font-size: 13px; font-weight: 800; color: #c1ccd5; text-align: right; }

/* ── Бонусы за число наборов ───────────────────────────────────────────────── */
.codex-ms {
  padding: 12px 14px; border-radius: 10px; margin-bottom: 12px;
  background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.30);
}
.codex-ms-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.codex-ms-title { font-size: 12px; font-weight: 700; color: #c9a6f0; }
.codex-ms-count { font-size: 11px; font-weight: 800; color: #9d8cc0; }
.codex-ms-next { font-size: 12.5px; color: #e2d6f5; line-height: 1.35; }
.codex-ms-next b { color: #fff; }
.codex-ms-bar { height: 6px; border-radius: 4px; background: rgba(0,0,0,.35); margin-top: 8px; overflow: hidden; }
.codex-ms-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8b5cf6, #c084fc); }
.codex-ms-prog { font-size: 10.5px; color: #9d8cc0; text-align: right; margin-top: 3px; }
.codex-ms-toggle {
  display: block; width: 100%; margin-top: 8px; padding: 6px 0; border-radius: 8px; cursor: pointer;
  background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25);
  color: #c9a6f0; font-size: 11.5px; font-weight: 700;
}
.codex-ms-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.codex-ms-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px;
  background: rgba(0,0,0,.22); font-size: 12px; color: #a99fbd;
}
.codex-ms-n {
  flex: 0 0 40px; text-align: center; padding: 3px 0; border-radius: 6px;
  font-weight: 800; font-size: 11.5px; background: rgba(255,255,255,.06); color: #9d8cc0;
}
.codex-ms-txt { flex: 1; min-width: 0; line-height: 1.3; }
.codex-ms-row.done { color: #b8f0d2; }
.codex-ms-row.done .codex-ms-n { background: rgba(80,175,149,.25); color: #7ee0c0; }
.codex-ms-row.next { background: rgba(139,92,246,.18); color: #f0e8ff; border: 1px solid rgba(192,132,252,.45); }
.codex-ms-row.next .codex-ms-n { background: rgba(192,132,252,.30); color: #fff; }
.codex-ms-row.locked { opacity: .65; }

/* ── Offline farm: panel ─────────────────────────────────────────── */
#offline-farm-panel {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(8,13,20,.97);
  overflow: hidden;
}
#offline-farm-panel, #offline-farm-panel * { touch-action: pan-y; pointer-events: auto; }
.ofarm-hint { font-size: 11.5px; color: #5797c4; line-height: 1.5; margin-bottom: 12px; }
.ofarm-err {
  font-size: 12px; color: #f17e8b; background: rgba(241,126,139,.08);
  border: 1px solid rgba(241,126,139,.3); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px;
}
.ofarm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 8px; }
.ofarm-items.lost .ofarm-tile { opacity: .55; }
.ofarm-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  padding: 6px 4px 5px; border-radius: 8px; border: 1px solid rgba(193,204,213,.15);
  background: rgba(193,204,213,.06);
}
.ofarm-tile-ico { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.ofarm-tile-qty {
  position: absolute; right: -10px; bottom: -4px; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 6px; background: rgba(10,18,28,.9); color: #e6f0fa;
}
.ofarm-tile-name {
  width: 100%; font-size: 9.5px; line-height: 1.2; color: #a9b8c6; text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ofarm-drop {
  margin: -4px 0 10px; padding: 10px 10px 4px; border-radius: 0 0 10px 10px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(74,143,212,.2); border-top: none;
}
.ofarm-drop-note { font-size: 11px; color: #899eb1; line-height: 1.45; margin-bottom: 8px; }

/* Карточки, шкалы и итог — оформление окна оффлайн-фарма. */
#offline-farm-panel .vip-body { padding-bottom: 24px; }
.of-svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.of-hero {
  position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden;
  padding: 14px; border-radius: 14px; margin-bottom: 10px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(74,143,212,.28), rgba(20,32,48,.6) 55%, rgba(12,18,28,.8));
  border: 1px solid rgba(127,180,232,.25);
}
.of-hero-moon {
  position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #cfe3f7;
  background: radial-gradient(circle at 35% 35%, rgba(127,180,232,.35), rgba(29,74,122,.5));
  box-shadow: 0 0 22px rgba(127,180,232,.35), inset 0 0 0 1px rgba(207,227,247,.25);
  animation: ofGlow 3.2s ease-in-out infinite;
}
.of-hero-moon i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e6f0fa;
  animation: ofTwinkle 2.4s ease-in-out infinite;
}
.of-hero-moon i:nth-of-type(1) { top: 4px; right: 2px; }
.of-hero-moon i:nth-of-type(2) { bottom: 6px; left: -2px; animation-delay: .8s; }
.of-hero-moon i:nth-of-type(3) { top: 16px; left: -6px; width: 2px; height: 2px; animation-delay: 1.6s; }
@keyframes ofGlow { 50% { box-shadow: 0 0 32px rgba(127,180,232,.55), inset 0 0 0 1px rgba(207,227,247,.35); } }
@keyframes ofTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.of-hero-t { font-size: 14px; font-weight: 800; color: #e6f0fa; }
.of-hero-s { font-size: 11.5px; color: #8fb0cf; line-height: 1.45; margin-top: 3px; }

.of-limit {
  padding: 12px 12px 10px; border-radius: 12px; margin-bottom: 10px;
  background: rgba(14,22,34,.85); border: 1px solid rgba(74,143,212,.25);
}
.of-limit-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #c1ccd5; }
.of-limit-head span { display: flex; align-items: center; gap: 6px; }
.of-limit-head b { font-size: 15px; color: #7fb4e8; }
.of-segs { display: flex; gap: 4px; margin-top: 10px; }
.of-seg {
  flex: 1; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.of-seg.on {
  color: #e6f0fa; background: linear-gradient(180deg, #4a8fd4, #275e9c);
  box-shadow: 0 0 10px rgba(74,143,212,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.of-seg.tk { color: rgba(232,193,90,.55); background: rgba(232,193,90,.05); border: 1px dashed rgba(232,193,90,.35); }
.of-seg.used { color: rgba(230,240,250,.35); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); text-decoration: line-through; }
.of-limit-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: #899eb1; }
.of-limit-legend span { display: flex; align-items: center; gap: 5px; }
.of-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.of-dot.on { background: #4a8fd4; box-shadow: 0 0 6px rgba(74,143,212,.6); }
.of-dot.tk { border: 1px dashed rgba(232,193,90,.7); }
.of-dot.rest { background: rgba(193,204,213,.25); }
.of-dot.lim { background: transparent; border: 1px solid #7fb4e8; }
.of-dot.over { background: #e0a35a; }
.of-ticket {
  display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 9px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.35;
}
.of-ticket.yes { color: #b4eb84; background: rgba(144,214,83,.08); border: 1px solid rgba(144,214,83,.3); }
.of-ticket.no { color: #efc680; background: rgba(232,193,90,.07); border: 1px solid rgba(232,193,90,.3); }

.of-steps { display: flex; gap: 6px; margin-bottom: 4px; }
.of-steps div {
  flex: 1; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 9px;
  font-size: 10.5px; line-height: 1.2; color: #a9b8c6; background: rgba(193,204,213,.04); border: 1px solid rgba(193,204,213,.08);
}
.of-steps b {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #e6f0fa; background: rgba(74,143,212,.35);
}
.of-group {
  display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; color: #7fb4e8;
  letter-spacing: 1.2px; text-transform: uppercase; margin: 16px 2px 8px;
}
.of-group::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(127,180,232,.35), transparent); }
.of-group span { color: #e6f0fa; background: rgba(74,143,212,.25); border-radius: 8px; padding: 1px 7px; letter-spacing: 0; }
.of-group.lost { color: #e0a35a; }

.of-card {
  position: relative; padding: 12px; border-radius: 14px; margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(24,36,52,.9), rgba(14,22,34,.9));
  border: 1px solid rgba(193,204,213,.1);
}
.of-card.best {
  border-color: rgba(127,180,232,.6);
  box-shadow: 0 0 0 1px rgba(127,180,232,.15), 0 6px 22px rgba(74,143,212,.18);
}
.of-card.locked { opacity: .62; }
.of-card.tough { border-color: rgba(241,126,139,.25); }
.of-card-top { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.of-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
}
.of-ico.k-zone { color: #9fd0ff; background: linear-gradient(135deg, rgba(74,143,212,.45), rgba(29,74,122,.35)); }
.of-ico.k-high { color: #d9b8ff; background: linear-gradient(135deg, rgba(150,100,220,.45), rgba(70,40,120,.35)); }
.of-ico.k-corr { color: #a9e0b9; background: linear-gradient(135deg, rgba(80,170,120,.4), rgba(30,80,60,.35)); }
.of-card.locked .of-ico { color: #899eb1; background: rgba(193,204,213,.08); }
.of-card.tough .of-ico { color: #f17e8b; background: rgba(241,126,139,.12); }
.of-card-info { flex: 1; min-width: 0; }
.of-card-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 800; color: #e6f0fa; }
.of-card-sub { font-size: 11.5px; color: #6fa6d6; margin-top: 2px; }
.of-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  color: #1a2a3c; background: linear-gradient(180deg, #f5d27a, #d9a63a); border-radius: 6px; padding: 2px 6px;
}
.of-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 11px; }
.of-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 9px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(193,204,213,.07);
}
.of-stat b { font-size: 13px; color: #e6f0fa; white-space: nowrap; }
.of-stat span { font-size: 9.5px; color: #7d90a2; }
.of-stat.s-kill .of-svg { color: #f17e8b; }
.of-stat.s-xp .of-svg { color: #b4eb84; }
.of-stat.s-gold .of-svg { color: #e8c15a; }
.of-meter { margin-top: 9px; }
.of-meter-lbl { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: #899eb1; }
.of-meter-lbl span { display: flex; align-items: center; gap: 5px; }
.of-meter-lbl b { color: #c1ccd5; }
.of-meter-bar { height: 5px; border-radius: 3px; background: rgba(193,204,213,.1); margin-top: 4px; overflow: hidden; }
.of-meter-bar > div { height: 100%; border-radius: 3px; transition: width .4s; }
.of-meter.m-xp .of-meter-bar > div { background: linear-gradient(90deg, #5fae3a, #b4eb84); }
.of-meter.m-ok .of-meter-bar > div { background: linear-gradient(90deg, #2f6aa8, #7fb4e8); }
.of-meter.m-warn .of-meter-bar > div { background: linear-gradient(90deg, #b8742a, #efc680); }
.of-meter.m-lock .of-meter-bar > div { background: linear-gradient(90deg, #56687a, #8fa3b6); }
.of-warn {
  display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 10px; border-radius: 9px;
  font-size: 11.5px; color: #f17e8b; background: rgba(241,126,139,.07); border: 1px solid rgba(241,126,139,.2);
}
.of-card-foot { display: flex; gap: 8px; margin-top: 11px; }
.of-btn-ghost, .of-btn-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; font-family: inherit; font-size: 12px; font-weight: 800; padding: 9px 12px; cursor: pointer;
}
.of-btn-ghost { flex: none; color: #9fc6ec; background: rgba(74,143,212,.08); border: 1px solid rgba(127,180,232,.28); }
.of-btn-ghost.open { color: #e6f0fa; background: rgba(74,143,212,.22); }
.of-btn-go {
  flex: 1; color: #fff; border: 1px solid rgba(160,205,245,.5);
  background: linear-gradient(180deg, #3d82c9, #1f5590);
  box-shadow: 0 3px 12px rgba(47,106,168,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.of-btn-go:active { transform: translateY(1px); }
.of-btn-go.confirm {
  background: linear-gradient(180deg, #d08a35, #93581a); border-color: rgba(245,200,120,.6);
  box-shadow: 0 3px 14px rgba(208,138,53,.4); animation: ofPulse 1s ease-in-out infinite;
}
@keyframes ofPulse { 50% { box-shadow: 0 3px 22px rgba(208,138,53,.7); } }
.of-card .ofarm-drop { margin: 10px -4px -2px; border-radius: 10px; border-top: 1px solid rgba(74,143,212,.2); }
.of-foot-note { font-size: 10.5px; color: #64778a; line-height: 1.5; margin-top: 6px; text-align: center; }

.of-sum-head {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; margin-bottom: 10px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(74,143,212,.22), rgba(14,22,34,.9) 60%);
  border: 1px solid rgba(127,180,232,.25);
}
.of-ring { position: relative; flex: none; width: 132px; height: 132px; }
.of-ring svg { transform: rotate(-90deg); }
.of-ring-bg { fill: none; stroke: rgba(193,204,213,.1); stroke-width: 10; }
.of-ring-fg { fill: none; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(127,180,232,.55)); animation: ofRing 1.1s ease-out; }
@keyframes ofRing { from { stroke-dashoffset: 327; } }
.of-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.of-ring-c b { font-size: 17px; color: #e6f0fa; }
.of-ring-c span { font-size: 11px; color: #7d90a2; margin-top: 2px; }
.of-time-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.of-time-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #a9b8c6; }
.of-time-row span { flex: 1; }
.of-time-row b { color: #e6f0fa; }
.of-time-row.over b { color: #e0a35a; }
.of-time-where { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #6fa6d6; line-height: 1.35; margin-top: 2px; }
.of-capped {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 9px; margin-bottom: 10px;
  font-size: 11.5px; color: #efc680; background: rgba(232,193,90,.07); border: 1px solid rgba(232,193,90,.28);
}
.of-res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.of-res {
  position: relative; overflow: hidden; padding: 9px 10px; border-radius: 12px;
  display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center;
  background: linear-gradient(180deg, rgba(24,36,52,.9), rgba(14,22,34,.9)); border: 1px solid rgba(193,204,213,.1);
}
.of-res-ico {
  grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
}
.of-res-v { font-size: 15.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; color: #e6f0fa; white-space: nowrap; }
.of-res-l { font-size: 10.5px; color: #7d90a2; margin-top: 1px; }
.of-res.r-kill .of-res-ico { color: #f17e8b; background: rgba(241,126,139,.14); }
.of-res.r-xp   .of-res-ico { color: #b4eb84; background: rgba(144,214,83,.14); }
.of-res.r-xp   .of-res-v { color: #c9f3a3; }
.of-res.r-gold .of-res-ico { color: #e8c15a; background: rgba(232,193,90,.14); }
.of-res.r-gold .of-res-v { color: #f5d98a; }
.of-res.r-lib  .of-res-ico { background: rgba(232,193,90,.14); }
.of-res.r-gram .of-res-ico { color: #7fd7e8; background: rgba(127,215,232,.14); }
.of-res.r-lvl  .of-res-ico { color: #c9a6f0; background: rgba(201,166,240,.14); }
.of-res.r-lvl  .of-res-v { color: #dcc4f7; }
.of-ok { width: 100%; margin-top: 16px; padding: 12px; font-size: 14px; }

/* ── Filter toolbar ────────────────────────────────────────────────────────── */
.codex-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.codex-search {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,.3); border: 1px solid rgba(193,204,213,.12); border-radius: 8px;
  color: #c1ccd5; font-family: inherit; font-size: 12.5px; padding: 8px 10px;
}
.codex-search::placeholder { color: #336a91; }
.codex-select {
  background: rgba(0,0,0,.3); border: 1px solid rgba(193,204,213,.12); border-radius: 8px;
  color: #899eb1; font-family: inherit; font-size: 12px; padding: 8px 6px; max-width: 96px;
}
.codex-status-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.codex-status-tab {
  flex: 1; background: rgba(193,204,213,.05); border: 1px solid rgba(193,204,213,.08);
  color: #899eb1; font-size: 11.5px; font-weight: 600; padding: 7px 0; border-radius: 8px; cursor: pointer;
}
.codex-status-tab.active { background: rgba(139,92,246,.16); border-color: #8b5cf6; color: #c9a6f0; }
.codex-set-list-meta { font-size: 10.5px; color: #336a91; margin: 8px 2px 6px; }

/* ── Set rows ──────────────────────────────────────────────────────────────── */
.codex-set-list { display: flex; flex-direction: column; gap: 6px; }
.codex-set-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 10px;
  background: rgba(193,204,213,.04); border: 1px solid rgba(193,204,213,.05);
}
.codex-set-row.done { background: rgba(232,185,62,.06); border-color: rgba(232,185,62,.2); }
.codex-set-star { flex-shrink: 0; }
.codex-set-main { flex-shrink: 0; width: 108px; min-width: 0; }
.codex-set-name { font-size: 11.5px; font-weight: 700; color: #c1ccd5; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.codex-set-bonus { font-size: 10px; color: #90d653; font-weight: 700; margin-top: 3px; }
.codex-set-slots { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.codexslot {
  position: relative; width: 32px; height: 32px; border-radius: 7px;
  background: rgba(0,0,0,.35); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.codexslot.filled { border-color: #90d653; background: rgba(144,214,83,.12); cursor: default; }
.codexslot:not(.filled) { opacity: .68; }
.codexslot:not(.filled):active { opacity: 1; }
/* Ready = the inventory already holds a matching item for this slot —
   pulses gold so it reads as "tap this" at a glance among the dimmed rest. */
.codexslot.ready {
  opacity: 1;
  border-color: #e69419;
  box-shadow: 0 0 0 1px rgba(230,148,25,.35), 0 0 9px rgba(230,148,25,.55);
  animation: codexReadyPulse 1.6s ease-in-out infinite;
}
@keyframes codexReadyPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(230,148,25,.35), 0 0 9px rgba(230,148,25,.55); }
  50%      { box-shadow: 0 0 0 1px rgba(230,148,25,.6), 0 0 15px rgba(230,148,25,.85); }
}
@media (prefers-reduced-motion: reduce) {
  .codexslot.ready { animation: none; }
}
.codexslot-enh {
  position: absolute; left: -2px; bottom: -3px; font-size: 8px; font-weight: 800;
  color: #e69419; background: rgba(6,11,17,.9); border-radius: 4px; padding: 0 2px; line-height: 1.3;
}
.codexslot-check {
  position: absolute; right: -3px; top: -3px; width: 13px; height: 13px; border-radius: 50%;
  background: #90d653; color: #12210a; font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.codex-set-frac {
  flex-shrink: 0; font-size: 12px; font-weight: 800; color: #a3957c;
  background: rgba(0,0,0,.3); border-radius: 8px; padding: 4px 8px; min-width: 30px; text-align: center;
}
.codex-set-frac.done { color: #12210a; background: #90d653; }
.codex-more-btn {
  width: 100%; margin-top: 10px; padding: 10px 0;
  background: rgba(193,204,213,.06); border: 1px solid rgba(193,204,213,.1); border-radius: 10px;
  color: #899eb1; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.codex-more-btn:active { background: rgba(193,204,213,.12); }


/* ── HUD SIDE COLUMN ───────────────────────────────────────────────────────
   Меню + Рейтинг/VIP/Маркет/Магазин/События/Сезон/Кодекс. One shell for the
   whole column: each button's own rule above still owns its accent (the left
   edge and the text colour), this restyles only the plate they sit on —
   glass-navy with a lit frame, the same language as the canvas HUD. The
   left border is deliberately not touched, and the height stays 28px: the
   column is laid out top-down from _positionHudMenuBtn (js/ui.js), which
   chains each button off the one above it in steps of that height. */
#hud-menu-btn, #rating-btn, #vip-btn, #market-btn,
#gram-shop-btn, #events-btn, #season-btn, #codex-btn {
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(23,43,70,.93), rgba(10,20,33,.95));
  border-top: 1px solid rgba(108,182,240,.34);
  border-right: 1px solid rgba(108,182,240,.34);
  border-bottom: 1px solid rgba(108,182,240,.34);
  box-shadow: 0 2px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(150,210,255,.12);
  letter-spacing: .3px;
}
#hud-menu-btn:active, #rating-btn:active, #vip-btn:active, #market-btn:active,
#gram-shop-btn:active, #events-btn:active, #season-btn:active, #codex-btn:active {
  background: linear-gradient(180deg, rgba(40,76,118,.95), rgba(16,32,52,.96));
}
/* Ползунок прозрачности джойстика (Профиль → Звук). Дорожка тёмная, а
   заполнение синее — чтобы значение читалось без числа рядом. */
.joy-alpha-row { display: flex; align-items: center; gap: 12px; padding: 4px 2px; }
.joy-alpha-row input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 26px;
  background: transparent; touch-action: manipulation;
}
.joy-alpha-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #1b3350, #5c9ac6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}
.joy-alpha-row input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #1b3350, #5c9ac6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}
/* 26px, а не 14: пальцем по шестнадцати попадают через раз. */
.joy-alpha-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8ecff, #3f7ea8);
  box-shadow: 0 0 0 1.5px #16283c, 0 2px 6px rgba(0,0,0,.7); cursor: pointer;
}
.joy-alpha-row input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8ecff, #3f7ea8);
  box-shadow: 0 0 0 1.5px #16283c, 0 2px 6px rgba(0,0,0,.7); cursor: pointer;
}
.joy-alpha-row input[type="range"]:focus-visible { outline: 2px solid #a9daff; outline-offset: 2px; }
.joy-alpha-val {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 700;
  color: #a9daff; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums;
}

/* ── Хранилище: сортировка и окно количества (js/npc.js) ─────────────── */
.storage-sort-bar { align-items: center; margin: 0 0 6px; }
.storage-sort-lbl { font-size: 12px; color: #899eb1; flex: 0 0 auto; }
#storage-qty-modal {
  position: fixed; inset: 0; z-index: 520;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
}
.stq-panel {
  width: min(90%, 320px); padding: 18px 16px 16px;
  background: linear-gradient(175deg, var(--leather-hi), var(--leather-lo) 85%);
  border: 1px solid var(--gold-dim); border-radius: 10px;
  box-shadow: 0 0 0 1px #000, 0 30px 50px -15px rgba(0,0,0,0.8);
  color: #c1ccd5;
}
.stq-title { font-size: 16px; font-weight: 800; color: #ffcf8a; text-align: center; margin-bottom: 12px; letter-spacing: 1px; }
.stq-item { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.stq-icon { width: 48px; height: 48px; border: 1px solid; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); flex: 0 0 auto; }
.stq-name { font-size: 13px; font-weight: 700; }
.stq-have { font-size: 12px; color: #899eb1; margin-top: 2px; }
.stq-row { display: flex; gap: 8px; align-items: center; }
.stq-step {
  width: 44px; height: 40px; flex: 0 0 auto; font-size: 20px; font-weight: 700;
  background: #0e1927; color: #c1ccd5; border: 1px solid #243e61; border-radius: 8px; cursor: pointer;
  touch-action: manipulation;
}
.stq-input {
  flex: 1 1 auto; min-width: 0; height: 40px; text-align: center; font-size: 17px; font-weight: 700;
  background: rgba(0,0,0,.35); color: #ffcf8a; border: 1px solid rgba(193,204,213,.15); border-radius: 8px;
  font-family: inherit;
}
.stq-input:focus { outline: none; border-color: rgba(235,170,73,.5); }
.stq-range { width: 100%; margin: 14px 0 10px; accent-color: #ebab4b; }
.stq-quick { display: flex; gap: 6px; margin-bottom: 14px; }
.stq-quick button {
  flex: 1; padding: 7px 0; font-size: 12px; font-weight: 600; cursor: pointer;
  background: rgba(193,204,213,.05); color: #899eb1; border: 1px solid rgba(193,204,213,.12); border-radius: 8px;
  touch-action: manipulation;
}
.stq-actions { display: flex; gap: 8px; }
.stq-actions button { flex: 1; padding: 11px 0; font-size: 13px; font-weight: 700; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.stq-cancel { background: #0e1927; color: #899eb1; border: 1px solid #243e61; }
.stq-ok { background: linear-gradient(135deg, #b8782c, #ebab4b); color: #1a1208; border: 1px solid #ebab4b; }

/* ── Сезон 4: вкладки «Сезон», «Задания», «Рейтинг» ─────────────────────── */
.s4-wrap { padding: 14px 14px 24px; max-width: 460px; margin: 0 auto; }
.s4-empty { text-align: center; color: #8197ab; font-size: 13px; padding: 24px 0; }
.s4-sec-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 20px 2px 10px; padding-bottom: 6px;
  color: #ffcf8a; font-size: 13px; font-weight: 800; letter-spacing: .4px;
  border-bottom: 1px solid rgba(201,162,92,.28);
}
.s4-sec-meta { color: #8197ab; font-size: 11px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }

/* очки сезона */
.s4-hero {
  position: relative; text-align: center; padding: 18px 12px 14px; margin-top: 2px;
  border: 1px solid rgba(201,162,92,.45); border-radius: 14px;
  background:
    radial-gradient(ellipse 220px 120px at 50% 0%, rgba(255,190,90,.22), transparent 70%),
    linear-gradient(175deg, rgba(48,36,22,.95), rgba(20,16,12,.95));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 10px 26px -14px rgba(0,0,0,.8);
}
.s4-hero-num {
  font-size: 38px; font-weight: 900; line-height: 1; color: #ffd36b;
  text-shadow: 0 0 18px rgba(255,190,80,.45), 0 2px 0 #3a2508;
}
.s4-hero-lbl { margin-top: 6px; color: #c9b48d; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

/* карточка задания */
.s4-task {
  display: flex; gap: 11px; align-items: center;
  padding: 10px 12px; margin-bottom: 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(34,40,48,.92), rgba(20,24,30,.92));
  border: 1px solid rgba(193,204,213,.09);
}
.s4-task.perm { border-color: rgba(80,175,149,.35); }
.s4-ico {
  flex: 0 0 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: radial-gradient(circle at 35% 30%, rgba(255,207,138,.18), rgba(0,0,0,.25));
  border: 1px solid rgba(201,162,92,.35);
}
.s4-task-body { flex: 1; min-width: 0; }
.s4-task-top { display: flex; align-items: flex-start; gap: 8px; }
.s4-task-name { flex: 1; color: #e2d6c1; font-size: 12.5px; line-height: 1.3; }
.s4-reward {
  flex-shrink: 0; padding: 2px 8px; border-radius: 20px;
  background: rgba(255,207,86,.13); border: 1px solid rgba(255,207,86,.45);
  color: #ffd35c; font-size: 11.5px; font-weight: 800;
}
.s4-bar { margin-top: 7px; height: 7px; border-radius: 6px; background: rgba(0,0,0,.45); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.s4-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2f8f74, #6fe0bd); }
.s4-task-prog { margin-top: 4px; color: #8197ab; font-size: 10.5px; font-weight: 700; text-align: right; }
.s4-task.done { border-color: rgba(126,224,192,.45); background: linear-gradient(180deg, rgba(24,52,44,.9), rgba(16,32,28,.9)); }
.s4-task.done .s4-ico { color: #7ee0c0; font-size: 20px; font-weight: 900; border-color: rgba(126,224,192,.55); }
.s4-task.done .s4-bar-fill { background: linear-gradient(90deg, #7ee0c0, #c8ffe9); }
.s4-task.done .s4-task-prog { color: #7ee0c0; }

/* строки списков (победители, рейтинг) */
.s4-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin-bottom: 6px; border-radius: 10px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(193,204,213,.08);
}
.s4-row.top { background: linear-gradient(90deg, rgba(255,200,90,.10), rgba(255,255,255,.03)); border-color: rgba(201,162,92,.35); }
.s4-row.me { border-color: rgba(80,175,149,.7); background: rgba(80,175,149,.13); }
.s4-place { width: 28px; text-align: center; font-weight: 900; font-size: 14px; color: #c1ccd5; flex-shrink: 0; }
.s4-place.p4 { font-size: 12.5px; color: #8fa1b2; }
.s4-name { flex: 1; min-width: 0; color: #d5dde3; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s4-gram, .s4-pts { color: #ffd35c; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.s4-pts { color: #7ee0c0; }
.s4-claim {
  margin-left: 4px; padding: 5px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid #ffcf56; background: linear-gradient(180deg, #f2b84b, #b97a1f);
  color: #2a1a05; font-size: 11.5px; font-weight: 900;
}
.s4-claim:disabled { opacity: .5; }
.s4-me-sep { text-align: center; color: #5d6b78; letter-spacing: 4px; margin: 2px 0 6px; }

/* пьедестал топ-3 */
.s4-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 6px 0 14px; }
.s4-pod {
  flex: 1; max-width: 132px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 0; border-radius: 12px 12px 0 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(193,204,213,.12); border-bottom: none;
}
.s4-pod.p1 { border-color: rgba(255,211,92,.6); background: linear-gradient(180deg, rgba(255,205,90,.20), rgba(255,205,90,.04)); }
.s4-pod.p2 { border-color: rgba(206,215,222,.45); }
.s4-pod.p3 { border-color: rgba(217,154,92,.5); }
.s4-pod.me { box-shadow: 0 0 0 2px rgba(80,175,149,.7); }
.s4-pod.empty { opacity: .35; min-height: 60px; justify-content: flex-end; }
.s4-pod-medal { font-size: 24px; line-height: 1; }
.s4-pod.p1 .s4-pod-medal { font-size: 30px; }
.s4-pod-name { max-width: 100%; color: #e2d6c1; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s4-pod-pts { color: #7ee0c0; font-size: 12px; font-weight: 800; }
.s4-pod-base {
  align-self: stretch; margin-top: 6px; text-align: center; font-weight: 900; color: rgba(0,0,0,.55);
  font-size: 18px; padding: 6px 0;
  background: linear-gradient(180deg, #9aa7b2, #5d6b78);
}
.s4-pod.p1 .s4-pod-base { padding: 16px 0; background: linear-gradient(180deg, #ffd96b, #b98a22); }
.s4-pod.p2 .s4-pod-base { padding: 10px 0; background: linear-gradient(180deg, #e3e9ee, #8f9ba5); }
.s4-pod.p3 .s4-pod-base { padding: 4px 0; background: linear-gradient(180deg, #e8ab70, #9c6331); }

.s4-ends { margin-top: 10px; color: #7ee0c0; font-size: 12px; font-weight: 800; letter-spacing: .3px; }

/* ── Элитный монстр: панель (openElitePanel, js/ui.js) ───────────────────── */
.elp-ov { position: fixed; inset: 0; z-index: 240; background: rgba(0,0,0,.78); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px; touch-action: pan-y; pointer-events: auto; }
.elp-ov * { pointer-events: auto; }
.elp-card { position: relative; width: 100%; max-width: 400px; max-height: 88vh; display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 50% 0%, #3a0d10 0%, #160a0e 45%, #0c1018 100%);
  border: 1px solid rgba(255,70,60,.35); border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255,90,70,.08), 0 10px 40px rgba(255,40,30,.18), inset 0 1px 0 rgba(255,140,120,.12); overflow: hidden; }
.elp-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); color: #e8c9c5; font-size: 14px; cursor: pointer; }
.elp-scroll { overflow-y: auto; padding: 0 16px 18px; -webkit-overflow-scrolling: touch; }

.elp-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 0 6px; }
.elp-hero-aura { position: absolute; top: 22px; width: 150px; height: 70px; left: 50%; transform: translateX(-50%) translateY(46px);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,40,30,.75), rgba(255,40,30,.25) 55%, transparent);
  filter: blur(2px); animation: elpPulse 2.2s ease-in-out infinite; }
.elp-hero .elp-mon-img { position: relative; filter: drop-shadow(0 0 10px rgba(255,50,40,.7)); }
.elp-title { margin-top: 2px; font-size: 21px; font-weight: 900; letter-spacing: .5px; color: #ff5a4a;
  text-shadow: 0 0 14px rgba(255,60,40,.55), 0 2px 0 #3a0806; text-transform: uppercase; }
.elp-timer-box { margin-top: 10px; width: 100%; text-align: center; padding: 12px 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,70,60,.12), rgba(255,70,60,.04)); border: 1px solid rgba(255,90,70,.25); }
.elp-timer-lbl { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #d79a92; }
.elp-timer-lbl.elp-on { color: #7ef08a; }
.elp-timer { margin-top: 4px; font: 900 32px/1.1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #fff;
  letter-spacing: 1px; text-shadow: 0 0 16px rgba(255,80,60,.6); font-variant-numeric: tabular-nums; }
.elp-timer-sub { margin-top: 4px; font-size: 12px; color: #a98e8a; }
.elp-live { margin-top: 8px; font-size: 12.5px; color: #f2d6d2; }
.elp-live b { color: #ffb4a8; }
.elp-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #ff3b30;
  box-shadow: 0 0 8px #ff3b30; vertical-align: 1px; animation: elpPulse 1s ease-in-out infinite; }

.elp-sec-hdr { margin: 18px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  color: #e07a6e; display: flex; align-items: center; gap: 8px; }
.elp-sec-hdr::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,90,70,.35), transparent); }

.elp-rews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.elp-rew { display: flex; flex-direction: column; align-items: center; padding: 12px 6px 10px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); text-align: center; }
.elp-rew-img { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(80,180,255,.6)); }
.elp-rew-emo { font-size: 28px; line-height: 34px; }
.elp-rew-val { margin-top: 6px; font-size: 17px; font-weight: 900; color: #fff; }
.elp-rew-lbl { margin-top: 2px; font-size: 11px; color: #9aa7b3; }
.elp-rew-gram { background: linear-gradient(160deg, rgba(48,161,245,.18), rgba(48,161,245,.04)); border-color: rgba(80,180,255,.35); }
.elp-rew-gram .elp-rew-val { color: #8fd2ff; }
.elp-rew-drop .elp-rew-val { color: #ffd76a; }
.elp-rew-hp .elp-rew-val { color: #ff7a6e; }
.elp-rew-size .elp-rew-val { color: #e6a8ff; }

.elp-mons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.elp-mon { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 2px 8px;
  border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,80,70,.14); overflow: hidden; }
.elp-mon-glow { position: absolute; top: 52px; left: 50%; width: 60px; height: 20px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,40,30,.55), transparent); }
.elp-mon .elp-mon-img { position: relative; }
.elp-mon-name { margin-top: 2px; font-size: 11px; font-weight: 700; color: #e9d3cf; text-align: center; }
.elp-mon-img { background-repeat: no-repeat; background-position: 0 0; image-rendering: auto; }
.elp-anim { animation: elpFrames .9s steps(var(--cols)) infinite; }
@keyframes elpFrames { to { background-position-x: calc(var(--w) * var(--cols) * -1); } }
@keyframes elpPulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

.elp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.elp-chip { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #f1d9d5;
  background: rgba(255,70,60,.10); border: 1px solid rgba(255,90,70,.25); }

.elp-rules { margin: 0; padding: 0 0 0 18px; color: #c5ced6; font-size: 12.5px; line-height: 1.6; }
.elp-rules li::marker { color: #ff5a4a; }

.elp-me { margin-bottom: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #ffd9d3;
  background: rgba(255,70,60,.08); border: 1px solid rgba(255,90,70,.2); }

/* ── Война гильдий: панель вышек (updateGuildWarHpBar, js/ui.js) ─────────── */
.gwp { position: fixed; top: 108px; left: 8px; width: 118px; z-index: 340;
  pointer-events: none; display: none; padding: 5px 6px 6px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(14,18,32,.82), rgba(8,10,18,.76)); border: 1px solid rgba(140,160,255,.22);
  box-shadow: 0 4px 14px rgba(0,0,0,.45); font-family: system-ui, -apple-system, Arial; }
.gwp-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 4px; }
.gwp-title { font-size: 10px; font-weight: 900; letter-spacing: .3px; color: #b9c6ff; white-space: nowrap; }
.gwp-left { font-size: 10px; font-weight: 800; color: #ffe0b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gwp-towers { display: flex; flex-direction: column; gap: 4px; }
.gwp-t { display: flex; align-items: center; gap: 5px; min-width: 0; }
.gwp-gem { flex: 0 0 auto; width: 16px; height: 19px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; color: #fff;
  background: var(--c); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); filter: drop-shadow(0 0 4px var(--c)); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.gwp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gwp-own { max-width: 100%; font-size: 10px; line-height: 1.1; font-weight: 700; color: #cfd6e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gwp-mine .gwp-own { color: #7dffb0; } .gwp-enemy .gwp-own { color: #ff8a80; }
.gwp-bar { width: 100%; height: 3px; border-radius: 2px; background: rgba(0,0,0,.55); overflow: hidden; }
.gwp-bar i { display: block; height: 100%; border-radius: 2px; transition: width .18s linear; }
.gwp-hold { margin-top: 5px; padding: 3px 4px; border-radius: 6px; font-size: 9.5px; line-height: 1.2; font-weight: 800; text-align: center;
  color: #c8d2e0; background: rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
.gwp-hold-mine { color: #0b2a17; background: linear-gradient(90deg, #4fe08e, #2fbf6b); animation: gwpPulse 1s ease-in-out infinite; }
.gwp-hold-enemy { color: #fff; background: linear-gradient(90deg, #e2483d, #a8261d); animation: gwpPulse 1s ease-in-out infinite; }
@keyframes gwpPulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.gwp-banner { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 350; pointer-events: none; display: none;
  max-width: 88vw; padding: 9px 16px; border-radius: 12px; font: 800 13px system-ui, -apple-system, Arial; text-align: center;
  background: rgba(14,18,32,.95); border: 1px solid rgba(160,180,255,.4); color: #e6ebff; box-shadow: 0 6px 22px rgba(0,0,0,.55); }
.gwp-banner-mine { border-color: #40c878; color: #b9ffd6; }
.gwp-banner-enemy { border-color: #eb463c; color: #ffc2bc; }
.gwp-banner-win { border-color: #ffd37a; color: #ffe7b0; font-size: 14px; }

/* ── Война гильдий: страница события (_guildWarModel, js/ui.js) ──────────── */
.gwf { display: flex; gap: 12px; align-items: center; }
.gwf-map { width: 54%; max-width: 220px; flex: 0 0 auto; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.gwf-bg { fill: #0d1020; stroke: rgba(140,160,255,.25); stroke-width: 1.5; }
.gwf-room { fill: #262a3c; stroke: #3a4058; stroke-width: 1.2; }
.gwf-hall { stroke: #2e3348; stroke-width: 7; stroke-linecap: square; fill: none; }
.gwf-entry { fill: #4cc3ff; opacity: .85; }
.gwf-castle { font-size: 20px; text-anchor: middle; dominant-baseline: middle; }
.gwf-num { font: 900 10px system-ui, Arial; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 3px; }
.gwf-mine polygon:first-of-type { filter: drop-shadow(0 0 4px #40c878); }
.gwf-enemy polygon:first-of-type { filter: drop-shadow(0 0 4px #eb463c); }
.gwf-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gwf-leg { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 9px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06); font-size: 12px; min-width: 0; }
.gwf-leg i { width: 10px; height: 12px; flex: 0 0 auto; clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); }
.gwf-leg b { color: #8fa0c8; font-weight: 900; }
.gwf-leg span { color: #c9d1dc; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gwf-leg-mine { border-color: rgba(64,200,120,.4); background: rgba(64,200,120,.08); } .gwf-leg-mine span { color: #7dffb0; }
.gwf-leg-enemy { border-color: rgba(235,70,60,.4); background: rgba(235,70,60,.08); } .gwf-leg-enemy span { color: #ff8a80; }

.gwh { margin-top: 10px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; text-align: center; }
.gwh-idle { color: #aab6c6; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12); font-weight: 700; }
.gwh-mine { color: #b9ffd6; background: rgba(64,200,120,.12); border: 1px solid rgba(64,200,120,.45); }
.gwh-enemy { color: #ffc2bc; background: rgba(235,70,60,.12); border: 1px solid rgba(235,70,60,.45); }
.gwh-bar { margin-top: 7px; height: 7px; border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; }
.gwh-bar i { display: block; height: 100%; border-radius: 4px; background: currentColor; transition: width .9s linear; }

.gwo { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(138,92,246,.16), rgba(255,255,255,.03)); border: 1px solid rgba(138,92,246,.35); }
.gwo-mine { background: linear-gradient(135deg, rgba(64,200,120,.18), rgba(255,255,255,.03)); border-color: rgba(64,200,120,.45); }
.gwo-ico { width: 42px; height: 42px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 26px;
  border-radius: 10px; background: rgba(0,0,0,.3); }
.gwo-k { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a79bd6; }
.gwo-v { margin-top: 2px; font-size: 15px; font-weight: 900; color: #fff; overflow-wrap: anywhere; }
.gwo-note { margin-top: 2px; font-size: 11.5px; color: #c6b8ef; }

.gwr { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px;
  background: rgba(255,207,138,.06); border: 1px solid rgba(255,207,138,.22); }
.gwr-shards { display: grid; grid-template-columns: repeat(3, 22px); gap: 3px; flex: 0 0 auto; }
.gwr-shards img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(255,200,120,.35)); }
.gwr-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gwr-txt b { color: #ffcf8a; font-size: 13px; }
.gwr-txt span { color: #b9a990; font-size: 11.5px; line-height: 1.35; }

/* ── Кодекс самоцветов (_gemCodexHtml, js/ui.js) ─────────────────────────── */
.gemcx {
  padding: 12px 14px; border-radius: 10px; margin-bottom: 12px;
  background: rgba(46,190,120,.07); border: 1px solid rgba(46,190,120,.28);
}
.gemcx .codex-ms-title { color: #8fe8b8; }
.gemcx-hint { font-size: 11px; color: #8fae9c; line-height: 1.4; margin-bottom: 10px; }
.gemcx-card { padding: 10px; border-radius: 9px; background: rgba(0,0,0,.24); margin-top: 8px; }
.gemcx-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gemcx-img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.gemcx-main { flex: 1; min-width: 0; }
.gemcx-name { font-size: 13px; font-weight: 800; color: #e6f5ec; }
.gemcx-bonus { font-size: 11.5px; color: #9fe0bb; margin-top: 2px; }
.gemcx-count { font-size: 11px; color: #8fae9c; white-space: nowrap; }
.gemcx-count b { font-size: 15px; color: #fff; }
.gemcx-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.gemcx-have { flex: 1; font-size: 11px; color: #8fae9c; min-width: 70px; }
.gemcx-btn {
  padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 11.5px; font-weight: 800;
  background: linear-gradient(180deg, #34c27e, #23935c); border: 1px solid #1d7a4c; color: #fff;
}
.gemcx-btn.all { background: linear-gradient(180deg, #8b5cf6, #6d3fd8); border-color: #5631b0; }
.gemcx-btn:disabled { opacity: .4; cursor: default; }
.gemcx-actions .codex-ms-toggle { display: inline-block; width: auto; margin-top: 0; padding: 6px 10px; }

/* ── Обновления: кнопка слева от «Турнира» и панель с patches.html ───────── */
#updates-hud-btn {
  position: absolute; display: none; align-items: center; justify-content: center; gap: 5px; padding: 0 6px;
  border-radius: 6px; cursor: pointer; z-index: 51; white-space: nowrap;
  font-family: system-ui, -apple-system, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(180deg, #3d8fe0, #2266b8); border: 1px solid #1b4f8f; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
#updates-hud-btn:active { background: linear-gradient(180deg, #2266b8, #1b5296); }
#updates-hud-btn .upd-dot {
  display: none; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: #ff4d4d; box-shadow: 0 0 0 2px rgba(8,13,20,.9);
}
#updates-hud-btn.has-new .upd-dot { display: block; }
#updates-panel {
  position: absolute; inset: 0; z-index: 120; background: rgba(8,13,20,.98);
  display: flex; flex-direction: column; overflow: hidden;
}
#updates-panel, #updates-panel * { touch-action: pan-y; pointer-events: auto; }
#updates-frame { flex: 1; width: 100%; border: 0; background: #0b0805; }