/* =====================================================================
   improve.css — ПОЛНЫЙ РЕДИЗАЙН (превью-слой поверх боевого styles.css).
   Тот же DOM/раскладка — новый визуальный язык. Подключается только в
   preview.html. На прод не идёт.
   Направление: премиальный тёмный MMO — «обсидиан + золото», панели с
   градиентной рамкой и внутренним свечением, дисплей-типографика,
   кинематографичная шапка.
   ===================================================================== */

/* ---------- 0 · ТОКЕНЫ (ре-скин всего приложения разом) ---------- */
:root{
  --bg:#070a10;
  --surface:#0f141d;
  --surface-2:#151c27;
  --surface-3:#1e2735;
  --surface-soft:rgba(255,255,255,.04);
  --text:#eef3f9;
  --muted:#9aabbf;
  --faint:#5e6b7c;
  --line:rgba(140,170,210,.14);
  --line-strong:rgba(160,190,230,.28);
  --gold:#f1c878;
  --gold-deep:#c79a4e;
  --green:#5fd6a0;
  --red:#ef7070;
  --blue:#6fb0ec;
  --violet:#b78cf0;
  --orange:#f0995e;
  --rarity-rare:#6fb0ec;
  --rarity-epic:#b78cf0;
  --rarity-legendary:#f1c878;
  --rarity-mythic:#ff79b8;
  --radius:13px;
  --shadow:0 22px 50px rgba(0,0,0,.55);
  --shadow-soft:0 12px 30px rgba(0,0,0,.36);

  --imp-display:"Bahnschrift","Segoe UI Variable Display","Segoe UI Semibold",system-ui,sans-serif;
  --imp-hair:inset 0 1px 0 rgba(255,255,255,.07);
  --imp-ring:color-mix(in srgb,var(--section-accent,var(--gold)) 42%,transparent);
  --imp-glass:saturate(140%) blur(12px);
}

/* атмосферный фон во весь экран */
body.browser-mode{
  background:
    radial-gradient(900px 520px at 84% -8%, color-mix(in srgb,var(--section-accent,var(--gold)) 16%,transparent), transparent 60%),
    radial-gradient(760px 460px at 8% -4%, rgba(111,176,236,.12), transparent 58%),
    radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.5), transparent 60%),
    linear-gradient(180deg,#0a0f17 0%,#070a10 60%,#04060a 100%) !important;
}

/* ---------- 1 · ТИПОГРАФИКА ---------- */
.top-panel h1,.section-title,.hub-card strong,.stat strong,.meters strong,
.primary-nav button,.chat-topbar strong,.tabs.bot-keyboard button,
.tower-panel strong,.quick-action strong,.item-row strong{
  font-family:var(--imp-display);letter-spacing:.2px;
}
.meters strong,.stat strong,.tower-panel strong,.item-row .item-value,
.leaderboard-rank,.hub-card em b{font-variant-numeric:tabular-nums}
.section-title{letter-spacing:.1em;color:#b6c3d4;font-size:11.5px}
.section-title::before{content:"";flex:0 0 auto;width:3px;height:13px;border-radius:2px;margin-right:2px;
  background:linear-gradient(180deg,var(--section-accent,var(--gold)),transparent);}

/* ---------- 2 · ШАПКА (кинематографичная) ---------- */
body.browser-mode .top-panel{
  border:1px solid color-mix(in srgb,var(--section-accent,var(--gold)) 30%,var(--line)) !important;
  border-radius:16px !important;
  background:
    radial-gradient(130% 180% at 88% -40%, color-mix(in srgb,var(--section-accent,var(--gold)) 20%,transparent), transparent 60%),
    linear-gradient(180deg, rgba(16,22,32,.55), rgba(8,11,17,.82)) !important;
  backdrop-filter:var(--imp-glass);
  box-shadow:var(--imp-hair),0 0 0 1px rgba(0,0,0,.4),0 26px 56px rgba(0,0,0,.6) !important;
  overflow:hidden;
}
body.browser-mode .top-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35));border-radius:inherit;
}
/* герб класса — в золотой оправе со свечением */
body.browser-mode:not(.auth-error-mode):not(.setup-mode):not(.development-mode) .class-art{
  border-radius:14px !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 60%,transparent),
    0 0 22px color-mix(in srgb,var(--section-accent,var(--gold)) 35%,transparent),
    0 12px 22px rgba(0,0,0,.5) !important;
  filter:none !important;
}
body.browser-mode .top-panel h1{
  color:#fbfdff !important;font-weight:700;letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
body.browser-mode .hero-status{
  border:1px solid color-mix(in srgb,var(--section-accent,var(--gold)) 36%,var(--line-strong)) !important;
  background:color-mix(in srgb,var(--section-accent,var(--gold)) 14%,rgba(10,14,20,.6)) !important;
  color:#eaf2ff !important;border-radius:999px !important;font-weight:800;
}
/* метрики — стеклянные капсулы, HP/Опыт с градиент-баром и свечением */
body.browser-mode .meters div{
  border:1px solid var(--line) !important;border-radius:11px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(12,17,25,.7) !important;
  box-shadow:var(--imp-hair);
}
body.browser-mode .meters div::after{height:5px !important;border-radius:3px !important}
body.browser-mode .meters div:first-child::after{
  background:linear-gradient(90deg,#4fc78f,#9be8b8) !important;
  box-shadow:0 0 12px rgba(95,214,160,.6) !important;
}
body.browser-mode .meters strong{color:#fff !important}

/* кнопка чата в шапке */
body.browser-mode .top-panel .chat-open-button{
  border-radius:13px !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 22%,rgba(20,26,36,.8)),rgba(12,17,25,.8)) !important;
  box-shadow:var(--imp-hair),0 8px 18px rgba(0,0,0,.45) !important;
  border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line)) !important;
}

/* ---------- 3 · САЙДБАР-НАВИГАЦИЯ ---------- */
body.browser-mode .primary-nav{
  border:1px solid var(--line) !important;border-radius:16px !important;
  background:linear-gradient(180deg,rgba(16,22,32,.6),rgba(8,11,17,.72)) !important;
  backdrop-filter:var(--imp-glass);
  box-shadow:var(--imp-hair),0 18px 40px rgba(0,0,0,.4) !important;
  gap:6px !important;padding:10px !important;
}
body.browser-mode .primary-nav button{
  position:relative;border:1px solid transparent !important;border-radius:11px !important;
  color:var(--muted) !important;font-weight:700;justify-content:center;text-align:center;
  transition:background .15s,color .15s,box-shadow .15s,transform .1s;
}
body.browser-mode .primary-nav button:hover{
  background:rgba(255,255,255,.04) !important;color:#dce6f2 !important;
}
body.browser-mode .primary-nav button.active{
  color:#1c1505 !important;
  background:linear-gradient(180deg,#ffd98a,var(--gold)) !important;
  border-color:transparent !important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 50%,transparent),0 10px 22px color-mix(in srgb,var(--gold) 30%,transparent) !important;
}

/* ---------- 4 · HUB-КАРТОЧКИ (градиентная рамка + ring + ховер) ---------- */
.hub-card{
  border:1px solid var(--line) !important;border-radius:var(--radius) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--section-accent,var(--blue)) 16%,transparent), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(14,20,29,.96) !important;
  box-shadow:var(--imp-hair),0 12px 28px rgba(0,0,0,.36) !important;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease !important;
  overflow:hidden;
}
.hub-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%, color-mix(in srgb,var(--section-accent,var(--blue)) 22%,transparent), transparent 42%);
  opacity:.0;transition:opacity .15s;
}
.hub-card:hover{
  z-index:2;
  border-color:color-mix(in srgb,var(--section-accent,var(--blue)) 58%,var(--line)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 38px rgba(0,0,0,.5),
    0 0 0 1px color-mix(in srgb,var(--section-accent,var(--blue)) 40%,transparent),
    0 0 26px color-mix(in srgb,var(--section-accent,var(--blue)) 22%,transparent) !important;
}
.hub-card:hover::before{opacity:1}
.hub-card:active{transform:scale(.99)}
/* иконки в оправе */
body[data-route="profile"] .profile-hub .hub-icon,
.hub-card.city-section-card .hub-icon--section,
.hub-card .hub-icon{
  border-radius:10px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
/* рекомендованная карточка — золотой бейдж заметнее */
.hub-card.recommended-card::after{
  box-shadow:0 6px 16px color-mix(in srgb,var(--gold) 45%,transparent) !important;
}

/* ---------- 5 · СТРОКИ ХАРАКТЕРИСТИК ---------- */
body[data-route="profile"] .stat{
  border:1px solid var(--line) !important;border-radius:12px !important;
  background:
    linear-gradient(135deg, rgba(111,176,236,.10), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent),
    rgba(14,20,29,.96) !important;
  box-shadow:var(--imp-hair),0 10px 22px rgba(0,0,0,.26);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
body[data-route="profile"] .stat:hover{
  z-index:2;
  border-color:rgba(111,176,236,.45) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 28px rgba(0,0,0,.38);
}
body[data-route="profile"] .stat strong{font-size:21px;color:#fff}
body[data-route="profile"] .stat-icon{filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}

/* ---------- 6 · ЧАТ-ДОК ---------- */
body.browser-mode .chat-shell{
  border:1px solid var(--line) !important;border-radius:16px !important;
  background:linear-gradient(180deg,rgba(16,22,32,.6),rgba(8,11,17,.78)) !important;
  backdrop-filter:var(--imp-glass);
  box-shadow:var(--imp-hair),0 20px 44px rgba(0,0,0,.5) !important;
  overflow:hidden;
}
body.browser-mode .chat-topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent) !important;
  border-bottom:1px solid var(--line);
}
body.browser-mode .chat-tabs button{border-radius:999px !important}

/* ---------- 7 · КАРТОЧКИ-СПИСКИ + КНОПКИ ---------- */
body.browser-mode .item-row,
body.browser-mode .tower-panel,
body.browser-mode .stat,
body.browser-mode .account-settings-card{
  border-radius:12px !important;
  box-shadow:var(--imp-hair),0 9px 22px rgba(0,0,0,.24);
}
body.browser-mode .item-row{transition:box-shadow .12s,border-color .12s}
body.browser-mode .item-row:hover{
  z-index:2;
  border-color:color-mix(in srgb,var(--section-accent,var(--blue)) 34%,var(--line)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 26px rgba(0,0,0,.32);
}
/* акцентные кнопки действий — золотой объёмный стиль */
body.browser-mode .primary-action,
body.browser-mode .quick-action-button,
body.browser-mode .chat-compose button[type="submit"]{
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent) !important;
  background:linear-gradient(180deg,#ffd98a,var(--gold)) !important;
  color:#1c1505 !important;font-weight:800;border-radius:11px !important;
  box-shadow:var(--imp-hair),0 10px 22px color-mix(in srgb,var(--gold) 28%,transparent) !important;
  transition:transform .1s,box-shadow .15s,filter .15s;
}
body.browser-mode .primary-action:hover,
body.browser-mode .quick-action-button:hover,
body.browser-mode .chat-compose button[type="submit"]:hover{
  filter:brightness(1.05);box-shadow:var(--imp-hair),0 14px 28px color-mix(in srgb,var(--gold) 36%,transparent) !important;
}
body.browser-mode .primary-action:active{transform:translateY(1px)}

/* лёгкая анимация появления контента раздела */
@keyframes impFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
body.browser-mode .view.active{animation:impFade .22s ease both}

/* ---------- 8 · ЗАПОЛНЕНИЕ ПРОСТРАНСТВА (без пустоты) ---------- */
@media (min-width:1100px){
  /* снимаем базовый cap max-width:760 (он и создаёт пустоту рядом с чатом)
     и разворачиваем каталожные списки по всей ширине main.

     ВАЖНО: grid-template-columns — БЕЗ !important. У многих списков в боевом
     styles.css есть собственные выверенные гриды с ID-специфичностью
     (#market/#auction/#inventory/#equipmentSlotList/#locationList/коллекции:
     minmax(280–300px)). Раньше наш !important их перебивал на 265px → лишняя
     3-я колонка → карточки с колонкой действий (миниатюра+контент+кнопки 160px)
     схлопывались, текст рвался по буквам (баг «Вещей» и «Покупки на рынке»).
     Без !important эти гриды побеждают по специфичности и сохраняют свою
     раскладку, а наш дефолт получают только «плоские» списки без своего грида.
     300px — безопасный минимум, чтобы колонка действий не давила контент. */
  body.browser-mode .view.active .list{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    max-width:none !important;
    margin-left:0 !important;margin-right:0 !important;
    /* align-items:stretch — карточки в одном ряду выравниваются по высоте самой
       высокой → плитки одного размера, без рваных промежутков. !important нужен,
       т.к. боевой styles.css ставит align-items:start на карточные списки с
       ID-специфичностью (#crafting/#inventory/#craftingAlchemyList и т.п.),
       из-за чего соседние плитки оставались разной высоты (мастерская/зелья). */
    align-items:stretch !important;
    gap:12px;
  }
  /* эти списки оставляем одной колонкой (последовательные/диалоговые/логи) */
  body.browser-mode #chatLog,
  body.browser-mode #chatDialogList,
  body.browser-mode #mailPreviewList,
  body.browser-mode #exploreResultList,
  body.browser-mode #dungeonResultList,
  body.browser-mode #worldBossLogList,
  body.browser-mode #titanEventLogList{
    grid-template-columns:1fr !important;
  }
}
/* Городские магазинные под-виды (Алхимик → «Купить зелья» и т.п.):
   панель .city-pane — это грид «контент | боковая колонка 280px» (styles.css:9236).
   В магазинных под-видах боковая колонка пустая → дыра справа. Схлопываем такую
   панель в одну колонку, НО только если её единственный видимый контент — список
   (всё прочее route-scoped-hidden). Панели с реальным боковым блоком (Таверна —
   .tower-panel в колонке 2) и с хабом (Гильдия) под условие не попадают и не меняются. */
@media (min-width:1100px){
  body.browser-mode #city .city-pane.active:has(> .list:not(.route-scoped-hidden)):not(:has(> *:not(.route-scoped-hidden):not(.list))){
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* секции дышат ровнее */
body.browser-mode .view.active{gap:14px}
body.browser-mode .section-title{margin-top:10px}

/* список не растягивался на родителя (justify-self/fit-content) — тянем на всю ширину */
@media (min-width:1100px){
  body.browser-mode .view.active .city-pane,
  body.browser-mode .view.active > .list,
  body.browser-mode .view.active .list{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;margin-right:0 !important;
    justify-self:stretch !important;
    align-self:stretch !important;
  }
}

/* ===================================================================
   9 · 2-КОЛОНОЧНЫЕ ВЬЮ С УЗКОЙ БОКОВОЙ ПАНЕЛЬЮ
   Боевой styles.css раскладывает экспедиции/таверну как «контент | боковая
   колонка 280–340px». Когда в боковой колонке только маленький блок статуса,
   получается высокая пустая колонка, заголовок секции уезжает в неё, а в
   таверне узкий блок статуса перекрывается текстом. Делаем одну колонку.
   =================================================================== */
@media (min-width:1100px){
  /* Экспедиции (Маршруты / Профессия) — одна колонка во всю ширину.
     ВАЖНО: дети (#expeditionBusyPanel, заголовки) в боевом styles.css явно
     поставлены в grid-column:2 — при одной явной колонке это создаёт неявную
     2-ю колонку. Поэтому сбрасываем grid-column у всех детей в auto.
     Блок со временем экспедиции (#expeditionBusyPanel) уводим в самый низ. */
  body.browser-mode[data-view="expeditions"] #expeditions.view.active{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body.browser-mode[data-view="expeditions"] #expeditions.view.active > *{
    grid-column:auto !important;grid-row:auto !important;
  }
  body.browser-mode[data-view="expeditions"] #expeditions.view.active > #expeditionBusyPanel{
    order:5;
  }

  /* Таверна — одна колонка; статус отдыха и опции во всю ширину (без перекрытия).
     Дети тоже могут быть в grid-column:2 → сбрасываем. */
  body.browser-mode #city .city-pane[data-city-pane="tavern"].active{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body.browser-mode #city .city-pane[data-city-pane="tavern"].active > *{
    grid-column:auto !important;grid-row:auto !important;
  }

  /* Зачарование — одна колонка: панель кристаллов сверху во всю ширину, ниже
     поиск и список предметов. Кнопки +1/+2/−1 получают полную ширину
     (раньше в узкой колонке они были обрезаны), пропадает пустота слева-сверху. */
  body.browser-mode[data-view="enchanting"] #enchanting.view.active{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body.browser-mode[data-view="enchanting"] #enchanting.view.active > *{
    grid-column:auto !important;grid-row:auto !important;
  }
  /* Доска почёта — одна колонка. DOM-порядок уже семантичен:
     «Текущая неделя» (баннер) → «Моя неделя» (твои недельные счётчики-плитки)
     → «Топы» (список рейтингов). Сбрасываем grid-row/column у детей. */
  body.browser-mode[data-route="leaderboardsRoot"] #leaderboards.view.active{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body.browser-mode[data-route="leaderboardsRoot"] #leaderboards.view.active > *{
    grid-column:auto !important;grid-row:auto !important;
  }

  /* Кости — поле ставки и кнопка «Бросить» на всю строку.
     Боевой стиль делает #diceActions гридом из фикс-колонок 240px (сумма ~736px,
     не во всю ширину), а .tower-actions button обрезает max-width:320px. */
  body.browser-mode #diceActions{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body.browser-mode #diceActions .dice-stake-panel{
    grid-column:1 / -1 !important;
    width:100% !important;
  }
  body.browser-mode #diceActions .dice-stake-panel .dice-stake-input,
  body.browser-mode #diceActions .dice-stake-panel button{
    width:100% !important;
    max-width:none !important;
  }

  /* Мир / Исследование — кнопки «Исследовать» и «В город» на всю ширину,
     поровну в одну строку (flex:1 на каждую). Снимаем кэп max-width:320px,
     которым .tower-actions ограничивает кнопки. */
  body.browser-mode #exploreActions{
    display:flex !important;
    gap:8px;
  }
  body.browser-mode #exploreActions > button{
    flex:1 1 0 !important;
    width:auto !important;
    max-width:none !important;
  }

  /* Арена — кнопки (Записаться / В бой / Забрать награду / Набор зелий) ровным
     рядом во всю ширину, а не 3+1 с пустотой справа (боевой стиль даёт фикс-
     колонки 220px). На узких окнах — авто-перенос с растяжением. */
  body.browser-mode #arenaActions{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  @media (max-width:1340px){
    body.browser-mode #arenaActions{
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
    }
  }

  /* Башня — итоги этажа: #towerPreview раскладывает блоки (Этаж / Раунд / Награда)
     в 2 колонки, и кнопка «Дальше» садилась в ячейку рядом с наградой. Делаем её
     отдельной строкой во всю ширину снизу (grid-column 1/-1), а сам стрип —
     одноколоночным, чтобы кнопка растянулась на всю ширину (а не 240px). */
  body.browser-mode #towerPreview .tower-floor-summary-actions{
    grid-column:1 / -1 !important;
    grid-template-columns:1fr !important;
  }

  /* Гильдия (Сюжет / Хроники) — одна колонка. В DOM управление главой
     (заголовок + кнопки «Следующая глава / Продолжить / Хроники») идёт ПЕРЕД
     текстом → получаем «управление сверху, история во всю ширину» вместо
     высокой пустой боковой колонки 340px. */
  body.browser-mode:is([data-route="cityGuildStory"],[data-route="cityGuildChronicles"]) #city .city-pane[data-city-pane="guild"].active{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body.browser-mode:is([data-route="cityGuildStory"],[data-route="cityGuildChronicles"]) #city .city-pane[data-city-pane="guild"].active > *{
    grid-column:auto !important;grid-row:auto !important;
  }
  /* кнопки управления главой — в строку, не растянуты на всю ширину каждая */
  body.browser-mode:is([data-route="cityGuildStory"],[data-route="cityGuildChronicles"]) #storyActions{
    display:flex;flex-wrap:wrap;gap:8px;
  }
  body.browser-mode:is([data-route="cityGuildStory"],[data-route="cityGuildChronicles"]) #storyActions > *{
    flex:0 1 auto;
  }

  /* Почта — предпросмотр письма: 5 однотипных плиток-сводки в один ровный ряд
     (раньше 4+1 с одинокой плиткой во второй строке — выглядело рвано).
     #mail в селекторе — чтобы перебить боевое правило #mailPreviewList по
     специфичности (2 id > 1 id). */
  body.browser-mode #mail #mailPreviewList{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:8px;
  }
  body.browser-mode #mail #mailPreviewList > .item-row{
    min-height:0 !important;
  }
  /* на узких экранах — перенос, чтобы плитки не сплющивало */
  @media (max-width:1340px){
    body.browser-mode #mail #mailPreviewList{
      grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;
    }
  }

  /* Профиль (#overview): вью был overflow:visible / max-height:none (это расчёт
     на 2-колоночную раскладку со скроллом внутри панели аккаунта). В текущей
     одноколоночной раскладке развёрнутый блок «Аккаунт» уходил за нижний край
     без возможности доскроллить → нельзя поменять данные. Даём вью обычный
     внутренний скролл, как у остальных вью. */
  body.browser-mode[data-route="profile"] #overview.view.active{
    max-height:var(--browser-main-height,calc(100vh - 180px)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
}