:root {
  --bg-dark:    #0a0a0f;
  --bg-panel:   #12121a;
  --bg-card:    #1a1a26;
  --gold:       #c9a227;
  --gold-light: #e8c84a;
  --red:        #8b1a1a;
  --red-light:  #c0392b;
  --green:      #1a6b3c;
  --green-light:#27ae60;
  --blue:       #1a3a6b;
  --blue-light: #3498db;
  --purple:     #4a1a6b;
  --text:       #d4c5a9;
  --text-dim:   #7a6e5e;
  --border:     #2a2a3a;
  --border-gold:#3a2a0a;
  --font-title: 'Cinzel', serif;
  --font-body:  'Crimson Text', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
*:focus { outline: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
html, body { height: 100%; background: var(--bg-dark); color: var(--text); font-family: var(--font-body); font-size: 16px; overflow: hidden; -ms-touch-action: none; touch-action: pan-y; overscroll-behavior: none; -webkit-touch-callout: none; }

/* iOS swipe-to-refresh / overscroll-bounce фикс — ПОКА ТОЛЬКО ЯНДЕКС (тест на iOS,
   потом раскатаем везде). position:fixed «приколачивает» body → нет pull-to-refresh
   на уровне страницы; вложенный скролл разделов (#app-контейнеры с overflow:auto)
   работает как прежде. data-platform ставит yandex/platform.js на старте. */
html[data-platform="yandex"] body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
/* Требования площадок: картинки нельзя перетаскивать / вызывать на них меню «сохранить» */
img { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4a4a60; border-radius: 2px; }

/* Nav scrollbar — почти невидимый */
.main-nav::-webkit-scrollbar { height: 2px; }
.main-nav::-webkit-scrollbar-thumb { background: var(--border); }

/* Loading screen */
.loading-screen {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(10,10,15,.6), rgba(10,10,15,.85)),
    url('/assets/decor/Cover.webp') center/cover no-repeat,
    radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0f 70%);
  transition: opacity .4s ease;
}
.loading-screen.fade-out { opacity: 0; pointer-events: none; }
.loading-box { text-align: center; padding: 0 20px; }
.loading-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.loading-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); opacity: .2;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-pulse {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50%       { opacity: 1;  transform: scale(1.2); }
}

/* Auth */
/* Двуязычные элементы в админ-плашках (и не только): любой элемент с lang=""
   которое не совпадает с текущим html[lang] — скрыт. Совпадает — отображается
   как обычно. */
html[lang="ru"] [lang="en"], html[lang="en"] [lang="ru"] { display: none !important; }

.auth-screen {
  /* Pin to viewport so the cover background doesn't re-compute when the form
     shrinks/grows between Login/Register tabs. Content scrolls inside. */
  position: fixed; inset: 0;
  z-index: 9999;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(rgba(10,10,15,.7), rgba(10,10,15,.9)),
    url('/assets/decor/Cover.webp') center/cover no-repeat,
    radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0f 70%);
  padding: 20px;
  overflow-y: auto;
}
/* margin:auto центрирует бокс по вертикали, когда он влезает, и схлопывается в 0 при
   переполнении → высокий бокс (логин+соц-кнопки) скроллится с верха, а не режется. */
.auth-box { background: var(--bg-panel); border: 1px solid var(--border-gold); border-radius: 8px; padding: 40px; width: 100%; max-width: 580px; box-shadow: 0 0 40px rgba(201,162,39,0.15); margin: auto; }
/* VK OneTap: когда виджет схлопывается в компактный размер, он прижимается влево — центрируем.
   text-align наследуется внутрь виджета (инлайновая кнопка), margin:auto ловит случай, когда
   компактный враппер уже узкий. На полноширинном виде оба нейтральны — обычную кнопку не меняют. */
#vk-auth, #link-vk-widget { text-align: center; }
#vk-auth > *, #link-vk-widget > * { margin-left: auto; margin-right: auto; }
.game-title { font-family: var(--font-title); font-size: 2.5rem; color: var(--gold); text-align: center; letter-spacing: 6px; text-shadow: 0 0 20px rgba(201,162,39,0.5); margin-bottom: 6px; }
.game-subtitle { text-align:center; color: var(--text-dim); font-style:italic; margin-bottom: 24px; }
.game-icon {
  display:block;
  width:140px; height:140px;
  margin: 0 auto 14px;
  object-fit: contain;
  border-radius: 22px;
  filter: drop-shadow(0 0 18px rgba(201,162,39,.45));
}
/* Developer credit: bottom-right on wide screens, bottom-center on narrow ones */
.dev-credit {
  position: absolute;
  bottom: 24px; right: 32px;
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim); font-size: .85rem; letter-spacing: 1px;
  opacity: .85;
  pointer-events: none;
}
.dev-credit img {
  height: 115px; width: auto; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.25));
}
@media (min-width:481px) and (max-width:800px) {
  .dev-credit {
    bottom: 14px; right: auto;
    left: 50%; transform: translateX(-50%);
    gap: 8px;
  }
  .dev-credit img { height: 94px; }
  /* Compact auth box on tablets */
  .auth-box  { padding:22px 26px; }
  .auth-box .game-icon { width:110px; height:110px; margin-bottom:10px; border-radius:18px; }
  .auth-box .game-subtitle { margin-bottom:14px; font-size:.9rem; }
  .auth-box .auth-tabs { margin-bottom:14px; }
  .auth-box .input-field { padding:10px 12px; margin-bottom:9px; }
  .auth-box .btn-primary { padding:11px; }
}
@media (max-width:480px) {
  .game-icon { width:96px; height:96px; margin-bottom: 8px; border-radius: 16px; }
  .auth-box  { padding:18px 22px; }
  /* Tighter form on tiny screens so the logo at the bottom isn't squeezed */
  .auth-box .input-field { padding:9px 12px; margin-bottom:8px; }
  .auth-box .btn-primary { padding:11px; }
  .auth-box .game-subtitle { margin-bottom:14px; font-size:.85rem; }
  .auth-box .auth-tabs { margin-bottom:14px; }
  .dev-credit {
    bottom: 8px; right: auto;
    left: 50%; transform: translateX(-50%);
    gap: 6px;
  }
  .dev-credit img { height: 92px; }
}
/* НИЗКИЕ экраны (альбомная ориентация, небольшие окна): ужимаем окно входа, чтобы оно
   ВЛЕЗАЛО без вертикального скролла. Идут ПОСЛЕ max-width — при совпадении обоих
   побеждают по порядку. Главные пожиратели высоты — иконка и резерв снизу под лого. */
@media (max-height: 780px) {
  .auth-box { padding: 16px 26px; }
  .auth-box .game-icon { width: 76px; height: 76px; margin-bottom: 6px; border-radius: 14px; }
  .auth-box .game-subtitle { margin-bottom: 10px; font-size: .82rem; }
  .auth-box .auth-tabs { margin-bottom: 10px; }
  .auth-box .input-field { padding: 9px 12px; margin-bottom: 7px; }
  .auth-box .btn-primary { padding: 10px; }
  .dev-credit img { height: 58px; }
}
@media (max-height: 640px) {
  .auth-box { padding: 12px 24px; }
  .auth-box .game-icon { width: 52px; height: 52px; margin-bottom: 4px; border-radius: 12px; }
  .auth-box .game-subtitle { display: none; }
  .auth-box .auth-tabs { margin-bottom: 8px; }
  .auth-box .input-field { margin-bottom: 6px; }
  .dev-credit img { height: 44px; }
}
@media (max-height: 520px) {
  .auth-box .game-icon { width: 40px; height: 40px; margin-bottom: 3px; }
  .auth-box .auth-tabs { margin-bottom: 6px; }
  .dev-credit { display: none; }
}
.auth-tabs { display:flex; gap:8px; margin-bottom:20px; }
.tab-btn { flex:1; padding:10px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim); font-family:var(--font-body); font-size:1rem; cursor:pointer; border-radius:4px; transition:.2s; }
.tab-btn.active { background:var(--border-gold); border-color:var(--gold); color:var(--gold); }
.input-field { width:100%; padding:12px 14px; background:var(--bg-dark); border:1px solid var(--border); border-radius:4px; color:var(--text); font-family:var(--font-body); font-size:1rem; margin-bottom:12px; transition:.2s; }
.input-field:focus { outline:none; border-color:var(--gold); box-shadow:0 0 8px rgba(201,162,39,0.2); }
.btn-primary { width:100%; padding:14px; background:linear-gradient(135deg,#8b6914,#c9a227); border:none; border-radius:4px; color:#0a0a0f; font-family:var(--font-title); font-size:1rem; font-weight:700; letter-spacing:2px; cursor:pointer; transition:.2s; margin-top:8px; }
.btn-primary:hover { background:linear-gradient(135deg,#c9a227,#e8c84a); transform:translateY(-1px); box-shadow:0 4px 15px rgba(201,162,39,0.3); }
.error-msg { color:var(--red-light); text-align:center; padding:10px; margin-top:10px; border:1px solid var(--red); border-radius:4px; background:rgba(139,26,26,0.2); }
.label { color:var(--text-dim); font-size:.9rem; margin-bottom:10px; }
.class-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.class-card { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; background:var(--bg-dark); border:1px solid var(--border); border-radius:6px; cursor:pointer; transition:.2s; }
.class-card:hover, .class-card.active { border-color:var(--gold); background:var(--border-gold); }
.class-icon { font-size:1.5rem; }
.class-name { font-family:var(--font-title); font-size:.85rem; color:var(--gold); }
.class-desc { font-size:.75rem; color:var(--text-dim); }

/* Game layout */
.game-screen { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
.player-bar { background:var(--bg-panel); border-bottom:1px solid var(--border-gold); padding:5px 10px; display:flex; flex-direction:column; gap:3px; flex-shrink:0; overflow:hidden; }
.pb-top { display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-width:0; }
.pb-bot { display:flex; align-items:center; gap:6px; min-width:0; }
.pb-level { color:var(--text-dim); font-size:.78rem; white-space:nowrap; flex-shrink:0; }
.pb-stat { font-size:.78rem; white-space:nowrap; color:var(--text-dim); }
.pb-energy { color:var(--gold); }
.pb-energy-cd { font-size:.68rem; color:var(--text-dim); }
.pb-currency { font-size:.82rem; display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
.pb-currency-first { margin-left:auto; }
.pb-plus { background:transparent; border:1px solid var(--border-gold); color:var(--gold); border-radius:3px; padding:0 4px; font-size:.7rem; cursor:pointer; line-height:1.5; transition:background .15s; flex-shrink:0; }
.pb-plus:hover { background:rgba(201,162,39,.15); }
.pb-xp-bar { display:flex; align-items:center; gap:5px; flex:1; min-width:0; }
.pb-xp-track { flex:1; min-width:40px; height:7px; }
.pb-bar { display:flex; align-items:center; gap:4px; }
.pb-bar-label { font-size:.7rem; color:var(--text-dim); }
.pb-bar-val { font-size:.68rem; color:var(--text-dim); white-space:nowrap; flex-shrink:0; }
.bar-track { width:clamp(50px,15vw,110px); height:7px; background:var(--bg-dark); border-radius:4px; overflow:hidden; border:1px solid var(--border); flex-shrink:0; }
.pb-xp-track { width:auto; flex-shrink:1; }
.bar-fill { height:100%; border-radius:4px; transition:.5s; }
.bar-fill.hp { background:linear-gradient(90deg,#6b1a1a,#c0392b); }
.bar-fill.mana { background:linear-gradient(90deg,#1a3a8b,#3498db); }
.bar-fill.xp { background:linear-gradient(90deg,#4a6b1a,#27ae60); }
.bar-fill.energy { background:linear-gradient(90deg,#7a5a00,#f0b429); }
.pb-gold { color:var(--gold); font-size:.9rem; }
.pb-silver { color:#c0c0c0; font-size:.9rem; }
.pb-gold-premium { color:#f0b429; font-size:.9rem; }
.server-status { display:none; }

/* Bottom navigation */
.bottom-nav { background:var(--bg-panel); border-top:1px solid var(--border-gold); padding:0; flex-shrink:0; display:flex; align-items:stretch; }
.nav-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:6px 4px; background:none; border:none; border-radius:0; color:var(--text-dim); font-family:var(--font-body); font-size:.82rem; cursor:pointer; transition:background .15s, color .15s; position:relative; }
.nav-btn + .nav-btn { border-left:1px solid rgba(255,255,255,0.1); }
.nav-btn span { font-size:.65rem; font-family:var(--font-title); letter-spacing:.5px; }
.nav-btn:hover { color:var(--gold); background:rgba(201,162,39,0.06); }
.nav-btn.active { color:var(--gold); background:var(--border-gold); border-radius:0; }
.nav-badge { display:inline-flex; align-items:center; justify-content:center; background:var(--red-light); color:#fff; font-size:.6rem; font-weight:700; line-height:1; min-width:14px; height:14px; padding:0 4px; border-radius:9px; margin-left:3px; vertical-align:middle; box-sizing:border-box; }
.ach-cat-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; background:var(--red-light); color:#fff; font-size:.7rem; font-weight:700; border-radius:9px; box-shadow:0 0 6px rgba(192,57,43,.55); }

/* Guild profile modal: pet/info rows */
.gp-info-rows .member-row { font-size:.92rem; }
.gp-info-rows .member-row:last-child { border-bottom:1px solid var(--border); }
.gp-pet-row { gap:8px; }
.info-btn { background:none; border:none; cursor:pointer; font-size:1.417rem; opacity:.55; padding:0 0 0 6px; line-height:1; vertical-align:middle; transition:opacity .15s; }
.info-btn:hover { opacity:1; }

/* Content */
.app-content { flex:1; min-height:0; overflow-y:auto; padding:12px 16px; max-width:960px; margin:0 auto; width:100%; display:flex; flex-direction:column; }

/* Back button (injected into .screen-title) */
.back-btn { background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:1.1rem; padding:0 8px 0 0; line-height:1; transition:color .15s; vertical-align:middle; }
.back-btn:hover { color:var(--gold); }

/* Common UI */
.screen-title { font-family:var(--font-title); font-size:1.4rem; color:var(--gold); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border-gold); letter-spacing:2px; flex-shrink:0; }

/* Header-with-action: на широком экране кнопка справа от заголовка; на узком —
   под заголовком (полной ширины). Граница border-bottom съезжает на сам блок. */
.screen-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border-gold); }
.screen-header > .screen-title { margin:0; padding:0; border:none; flex:1; min-width:0; }
.screen-header > .screen-header-action { flex-shrink:0; }
@media (max-width:599px) {
  .screen-header { flex-direction:column; align-items:stretch; }
  .screen-header > .screen-header-action { width:100%; }
}
.panel { background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; padding:12px; margin-bottom:10px; }
/* Попап со скроллом: скроллится СОДЕРЖИМОЕ, а кнопка «Закрыть» приклеена к низу.
   Раньше overflow:auto висел на всей панели — и кнопка уезжала вниз вместе с контентом,
   до неё приходилось долистывать. Разметка: .scroll-panel > [.scroll-body, .scroll-foot]. */
/* строка «Владений»: фон — картинка захваченной зоны (задаётся инлайн), поверх — вуаль */
.hold-row {
  display:flex; align-items:center; gap:8px; padding:9px 10px; margin-bottom:5px;
  border:1px solid rgba(255,255,255,.09); border-radius:8px; font-size:.84rem;
  background-clip:padding-box;   /* иначе картинка вылезает под рамку светлой каймой */
}
.hold-go {
  font-size:.72rem; padding:4px 11px; border-radius:7px; flex-shrink:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.55); color:#e9e3d4;
}
.hold-go:hover { border-color:var(--gold); color:var(--gold); }

.scroll-panel { display:flex; flex-direction:column; overflow:hidden; }
.scroll-panel > .scroll-body { flex:1 1 auto; overflow-y:auto; min-height:0; }
.scroll-panel > .scroll-foot {
  flex:0 0 auto; padding:10px 12px 12px;
  border-top:1px solid var(--border); background:var(--bg-panel);
}
.panel-title { font-family:var(--font-title); color:var(--gold); font-size:1rem; margin-bottom:12px; letter-spacing:1px; }
.btn { padding:8px 16px; border-radius:4px; border:1px solid; cursor:pointer; font-family:var(--font-body); font-size:.95rem; transition:.2s; }
.btn-gold { background:var(--border-gold); border-color:var(--gold); color:var(--gold); }
.btn-gold:hover { background:var(--gold); color:var(--bg-dark); }
.btn-red { background:rgba(139,26,26,0.3); border-color:var(--red-light); color:var(--red-light); }
.btn-red:hover { background:var(--red-light); color:#fff; }
.btn-green { background:rgba(26,107,60,0.3); border-color:var(--green-light); color:var(--green-light); }
.btn-green:hover { background:var(--green-light); color:#fff; }
.btn-blue { background:rgba(26,58,107,0.3); border-color:var(--blue-light); color:var(--blue-light); }
.btn-blue:hover { background:var(--blue-light); color:#fff; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.stat-row:last-child { border-bottom:none; }
.stat-label { color:var(--text-dim); }
.stat-value { color:var(--text); font-weight:600; }
.hidden { display:none !important; }
.text-gold { color:var(--gold); }
.text-red { color:var(--red-light); }
.text-green { color:var(--green-light); }
.text-dim { color:var(--text-dim); }
.badge { display:inline-block; padding:2px 8px; border-radius:3px; font-size:.75rem; }
.badge-gold { background:var(--border-gold); color:var(--gold); border:1px solid var(--gold); }
.badge-green { background:rgba(26,107,60,0.3); color:var(--green-light); }
.badge-red { background:rgba(139,26,26,0.3); color:var(--red-light); }

/* Notification */
.notification { position:fixed; top:20px; right:20px; background:var(--bg-panel); border:1px solid var(--gold); border-radius:6px; padding:12px 20px; color:var(--text); font-family:var(--font-body); z-index:9999; max-width:300px; box-shadow:0 4px 20px rgba(0,0,0,0.5); animation: slideIn .3s ease; }
@keyframes slideIn { from { transform: translateX(120%); opacity:0; } to { transform: translateX(0); opacity:1; } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }

/* Combat log */
.combat-log { background:var(--bg-dark); border:1px solid var(--border); border-radius:4px; padding:12px; max-height:300px; overflow-y:auto; font-size:.9rem; line-height:1.8; }
.log-crit { color:var(--gold); font-weight:bold; }
.log-win { color:var(--green-light); }
.log-lose { color:var(--red-light); }

/* Table */
.table { width:100%; border-collapse:collapse; }
.table th { font-family:var(--font-title); color:var(--gold); font-size:.8rem; letter-spacing:1px; text-align:left; padding:8px 12px; border-bottom:1px solid var(--border-gold); }
.table td { padding:8px 12px; border-bottom:1px solid var(--border); color:var(--text); }
.table tr:hover td { background:var(--bg-card); }

@media (max-width: 600px) {
  .nav-btn { padding:4px 6px; min-width:44px; }
  .nav-btn span { font-size:.58rem; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .app-content { padding:8px 10px; }
}

/* Низкая высота viewport — компактная нижняя нав-панель */
@media (max-height: 600px) {
  .nav-btn { padding:2px 4px !important; gap:0 !important; }
  .nav-btn img { width:1.05em !important; height:1.05em !important; }
  .nav-btn span { font-size:.55rem !important; line-height:1 !important; }
  .nav-lock-badge { font-size:.55rem !important; }
  .nav-badge { font-size:.55rem !important; min-width:12px !important; height:12px !important; }
  .app-content { padding:6px 10px !important; }
}

/* Универсальное правило для всех модалок/попапов: контент-боксу даём
   max-height: 90vh и внутренний скролл. На любой высоте viewport (даже на
   мини-iframe площадок) контент модалки не вылезает наружу — если не
   помещается, появляется внутренний скроллбар. Селектор ловит все наши
   модалки — у нас id оверлеев всегда заканчиваются на -overlay или -modal,
   а прямой div-ребёнок — это панель с контентом. */
[id$="-overlay"] > div,
[id$="-modal"]   > div {
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Level-up modal — на больших экранах (шире и выше 600px) увеличиваем все
   размеры в ~1.35×. Базовые размеры заданы компактными (для маленьких
   iframe площадок), на нормальных экранах хочется покрупнее. */
@media (min-width: 601px) and (min-height: 601px) {
  .lvlup-card     { padding:19px 24px !important; max-width:486px !important; }
  .lvlup-emoji    { font-size:2.4rem !important; margin-bottom:4px !important; }
  .lvlup-title    { font-size:1.55rem !important; letter-spacing:3px !important; margin-bottom:4px !important; }
  .lvlup-number   { font-size:3.25rem !important; margin-bottom:14px !important; }
  .lvlup-grid     { gap:7px !important; margin-bottom:16px !important; }
  .lvlup-cell     { padding:7px 14px !important; font-size:1.15rem !important; line-height:1.2 !important; }
  .lvlup-share    { padding:10px !important; font-size:1.15rem !important; margin-bottom:8px !important; }
  .lvlup-continue { padding:11px !important; font-size:1.28rem !important; }
}

/* ── Game-themed toggle switch (used in Settings, etc.) ─────────────── */
.toggle { position:relative; display:inline-block; width:46px; height:24px; cursor:pointer; flex-shrink:0; }
.toggle input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.toggle span {
  position:absolute; inset:0;
  background:var(--bg-dark);
  border:1px solid var(--border);
  border-radius:24px;
  transition:background .18s, border-color .18s;
}
.toggle span::before {
  content:''; position:absolute;
  width:18px; height:18px;
  left:2px; top:2px;
  background:var(--text-dim);
  border-radius:50%;
  transition:transform .18s, background .18s;
}
.toggle input:checked + span {
  background:var(--border-gold);
  border-color:var(--gold);
}
.toggle input:checked + span::before {
  transform:translateX(22px);
  background:var(--gold);
}
.toggle input:focus-visible + span { box-shadow:0 0 0 2px rgba(201,162,39,.4); }

/* ── Game-themed range slider (volume, etc.) ────────────────────────── */
input[type="range"] {
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:var(--bg-dark);
  border:1px solid var(--border-gold);
  border-radius:4px;
  outline:none;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height:6px; background:transparent; border-radius:4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px;
  margin-top:-6px;
  border-radius:50%;
  background:var(--gold);
  border:1px solid var(--border-gold);
  box-shadow:0 0 6px rgba(201,162,39,.5);
  cursor:pointer;
  transition:transform .12s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.1); }
input[type="range"]::-moz-range-track {
  height:6px; background:transparent; border-radius:4px;
}
input[type="range"]::-moz-range-thumb {
  width:16px; height:16px;
  border-radius:50%;
  background:var(--gold);
  border:1px solid var(--border-gold);
  box-shadow:0 0 6px rgba(201,162,39,.5);
  cursor:pointer;
}

/* Phone: shrink player-bar so 3-digit HP/atk/def fit without clipping */
@media (max-width:600px) {
  .player-bar { padding:4px 8px; }
  .pb-top { gap:3px; column-gap:4px; }
  .pb-stat { font-size:.72rem; }
  .pb-currency { font-size:.72rem; }
  .pb-plus { font-size:.65rem; padding:0 3px; }
}

@media (min-width: 601px) {
  .pb-stat { font-size:1.2rem; }
  .pb-currency { font-size:1.2rem; }
  .pb-level { font-size:1rem; }
  .pb-bar-val { font-size:.82rem; }
  .pb-plus { font-size:1rem; padding:0 6px; }
  .pb-xp-track { height:9px; }
}

@media (max-width: 360px) {
  .player-bar { padding:4px 7px; }
  .pb-stat { font-size:.72rem; }
  .pb-currency { font-size:.75rem; }
  .pb-level { font-size:.72rem; }
}

/* ─── Зал Славы: ордена героев ───────────────────────────────────────────── */
/* Подзаголовок-эпоха (например «Первое десятисезонье») над группой монументов. */
.hof-subtitle {
  text-align:center; font-family:var(--font-title); color:var(--gold);
  font-size:1.02rem; letter-spacing:.04em; margin:16px auto 2px; max-width:360px;
  padding-bottom:7px; border-bottom:1px solid var(--border-gold);
}
/* Сетка как у питомцев: 4 колонки → 3 (≤700px) → 2 (≤500px). */
.hof-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px 10px;
  padding:20px 4px 26px; align-items:start; justify-items:center;
}
@media (max-width:700px) { .hof-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:500px) { .hof-grid { grid-template-columns:repeat(2,1fr); gap:18px 8px; } }

/* Орден = круглая медаль + орденская лента. Без прямоугольной панели. */
.hof-monument {
  position:relative; cursor:pointer; width:100%; max-width:168px;
  display:flex; flex-direction:column; align-items:center;
  transition:transform .18s ease, filter .18s ease;
}
.hof-monument:hover { transform:translateY(-4px); filter:brightness(1.07); }
.hof-monument:active { transform:scale(.97); }

.hof-name {
  font-family:var(--font-title); color:var(--gold); font-weight:700;
  font-size:clamp(.84rem,3.2vw,.98rem); text-align:center; line-height:1.1;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:8px; text-shadow:0 1px 3px #000;
}

/* Круглая медаль: РАВНЫЕ фиксированные width/height = идеальный круг на любом
   устройстве (без зависимости от aspect-ratio). Сплошная рамка (цвет чередуется),
   тёмный фон под прозрачными краями аватара. Размер меняется по брейкпоинтам. */
.hof-medal {
  position:relative; z-index:2; flex-shrink:0;
  width:130px; height:130px; box-sizing:border-box; border-radius:50%;
  border:4px solid #f0c040; background:#171221; overflow:hidden;
  box-shadow:0 0 0 2px #14101c, 0 3px 12px #0008, 0 0 18px #f0c04077;
}
@media (max-width:700px) { .hof-medal { width:124px; height:124px; } }
@media (max-width:500px) { .hof-medal { width:122px; height:122px; } }
@media (max-width:340px) { .hof-medal { width:104px; height:104px; } }
.hof-medal img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

/* Орденская лента — выходит ИЗ-ПОД медали: верх ленты поднят к вертикальному
   центру круга (margin-top = -радиус), круг (z-index выше) перекрывает верх ленты,
   padding-top опускает текст ниже края круга. Низ — «ласточкин хвост».
   Цвет фона/рамки перекрывается правилами чередования ниже. */
.hof-plate {
  position:relative; z-index:1; box-sizing:border-box;
  width:122px; height:124px; margin-top:-65px; padding:70px 10px 12px;
  display:flex; align-items:flex-start; justify-content:center;
  background:linear-gradient(180deg,#6c2fb0,#431a7a);
  border:1px solid #f0c040; border-top:none;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
  color:#ecd9ff; font-size:clamp(.56rem,2.2vw,.64rem); font-weight:700;
  text-shadow:0 1px 2px #000; box-shadow:0 4px 9px #0007;
}
/* На ленте — кнопка «заслуги»: текст целиком показывается в попапе (в ленту его
   влезало слишком мало). Опущена ниже середины флага, крупная, без hover-подсветки. */
.hof-cap-btn {
  margin-top:4px; padding:4px 12px; border-radius:7px; cursor:pointer;
  background:rgba(0,0,0,.28); border:1px solid #f0c040; color:#f7e6b8;
  font-family:inherit; font-size:clamp(.78rem,3.1vw,.9rem); font-weight:700;
  text-shadow:0 1px 2px #000; white-space:nowrap;
}
.hof-cap-btn:active { transform:scale(.96); }
/* Размер флага синхронизирован с медалью по брейкпоинтам (подъём = радиус) */
@media (max-width:700px) { .hof-plate { width:116px; height:121px; margin-top:-62px; padding-top:67px; } }
@media (max-width:500px) { .hof-plate { width:114px; height:120px; margin-top:-61px; padding-top:66px; } }
@media (max-width:340px) { .hof-plate { width:96px;  height:109px; margin-top:-52px; padding:57px 8px 10px; } }


/* ── Двор гильдии: фон-локация прижат к НИЗУ (пол по нижней кромке, как в боях),
   здания стоят на полу и рассредоточены по ширине. Узкие экраны — двор листается,
   здания не ужимаются. ────────────────────────────────────────────────────── */
/* Контейнер только скроллит и обрезает; фон и здания живут внутри (.gb-yard),
   поэтому на мобильных фон едет ВМЕСТЕ со зданиями, а не стоит на месте. */
#guild-buildings {
  /* экран — флекс-колонка: без flex-shrink:0 двор схлопывался в полоску на узких/низких окнах */
  flex:0 0 auto; height:230px; min-height:230px;
  margin-bottom:6px;
  border-radius:12px; border:1px solid var(--border); overflow:hidden;
}
.gb-yard {
  /* stretch, а не flex-end: плитки одной высоты — тогда подписи стоят на одной линии,
     а здания всё равно прижаты к полу (у картинки margin-top:auto). Раньше плитка была
     по высоте здания, и у высоких домов подпись уезжала вверх. */
  display:flex; gap:6px; align-items:stretch; justify-content:space-between;
  min-width:100%; height:100%;
  padding:10px 10px 2px;   /* здания стоят ниже — почти на самой кромке пола */
  background-image:linear-gradient(rgba(10,12,16,.22),rgba(10,12,16,.55)), url('/assets/locations/guild_bg.webp');
  background-size:cover, cover;
  /* картинку опускаем ниже нижней кромки: линия пола уходит вниз, дома стоят на земле,
     а не «висят» над ней (у самой картинки под полом есть запас) */
  background-position:center bottom, center bottom -46px;
  background-repeat:no-repeat, no-repeat;
}
.gb-tile {
  /* --gb-cap-top: НА КАКОЙ ВЫСОТЕ ВИСЯТ ПОДПИСИ. Одна цифра на всё — уровень, название и
     значок «есть что забрать» едут вместе. Больше значение → ниже подписи. */
  --gb-cap-top: 96px;
  position:relative; flex:1 1 0; min-width:0; max-width:132px;
  background:none; border:none; padding:0; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
/* Подпись вынесена ИЗ ПОТОКА: не отнимает высоту у здания, поэтому её можно опустить
   как угодно низко, а дома при этом не сплющиваются. */
.gb-tile-cap {
  position:absolute; left:0; right:0; top:var(--gb-cap-top); z-index:2; pointer-events:none;
}
/* > img — только здание. Значок «есть что забрать» (.gb-tile-dot) лежит в подписи и под
   это правило не попадает. */
.gb-tile > img {
  width:100%; max-width:108px; height:auto; object-fit:contain;
  filter:drop-shadow(0 5px 6px #000b); pointer-events:none;
}
/* Башня строителя стоит чуть ниже остальных (у её арта другой запас под полом) — поднимаем. */
.gb-tile[data-gb="builder_tower"] > img { margin-bottom:10px; }
.gb-tile-dot {
  position:absolute; top:-4px; right:2px; width:20px; height:20px; object-fit:contain;
  filter:drop-shadow(0 1px 3px #000a); pointer-events:none;
}
.gb-tile-lvl {
  font-size:.76rem; font-weight:700; color:var(--gold); line-height:1;
  margin-bottom:2px; text-shadow:0 1px 2px #000, 0 0 4px #000;
}
.gb-tile-name {
  /* Высота ровно под 2 строки — иначе однословные названия («Лавка») были бы короче
     двухсловных, и подписи снова разъехались бы по высоте.
     line-clamp здесь НЕ нужен: перенос задаётся <br> в разметке, а clamp лез со своим
     многоточием и резал первое слово («Шахта…»). */
  width:100%; overflow:hidden;
  height:2.2em;
  font-size:.7rem; line-height:1.1; color:#fff; text-shadow:0 1px 2px #000, 0 0 3px #000;
  overflow-wrap:anywhere;
}
/* ≤700px: 8 домов во всю ширину уже мельчают — двор (вместе с фоном) листается вбок,
   здания при этом остаются крупными, а высота зоны меньше */
@media (max-width:700px) {
  #guild-buildings {
    flex:0 0 auto; height:200px; min-height:200px;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  }
  .gb-yard { justify-content:flex-start; min-width:max-content; }
  /* Двор здесь ниже (200px вместо 230), а здания остаются крупными — значит подписям
     нужно висеть выше, иначе они лезут на крыши. Отдельная цифра под узкие экраны. */
  .gb-tile { flex:0 0 108px; max-width:108px; --gb-cap-top:56px; }
  .gb-tile > img { max-width:96px; }
}

/* ── Двор питомцев (вкладка «Питомцы», домашний экран) ─────────────────────────
   Переиспользует .gb-yard/.gb-tile гильдии; тут только отличия под 3 питомцев:
   равномерное распределение, спрайт покрупнее, подпись НАД головой (обычный поток). */
.pets-yard-wrap {
  position:relative;
  flex:0 0 auto; height:200px; min-height:200px; margin-bottom:8px;
  border-radius:12px; border:1px solid var(--border); overflow:hidden;
  cursor:pointer;
}
/* Явная кнопка «Редактировать состав» справа сверху (UI-подсказка; клик по всему двору
   и так открывает выбор состава — кнопка просто заметный элемент). */
.pets-edit-team {
  position:absolute; top:8px; right:8px; z-index:3;
  padding:5px 10px; border-radius:8px; cursor:pointer;
  font-family:var(--font-title); font-size:.72rem; line-height:1.1;
  color:var(--gold); background:rgba(0,0,0,.5); border:1px solid var(--border-gold);
}
.pets-edit-team:hover { background:rgba(0,0,0,.68); border-color:var(--gold); }
/* Кнопка-карандаш редактирования имени питомца (встроенный SVG, без ассета).
   Позиционируется АБСОЛЮТНО справа от имени — чтобы имя оставалось по центру. */
.pet-rename-btn {
  position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:5px;
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; border-radius:50%; cursor:pointer;
  color:var(--gold); background:rgba(201,159,79,.18); border:1px solid rgba(201,159,79,.55);
  line-height:0;
}
.pet-rename-btn:hover { background:rgba(201,159,79,.34); border-color:var(--gold); }
.pet-rename-btn svg { width:12px; height:12px; display:block; }
/* Составные селекторы (.gb-yard.pets-tile и т.п.) — чтобы перебить одиночные классы
   гильдии независимо от порядка в файле (этот блок стоит ВЫШЕ гильдейского). */
.gb-yard.pets-gb-yard {
  justify-content:space-around; align-items:flex-end;
  /* Не наследовать min-width:max-content из мобильного правила гильдии (у нас нет гор. скролла). */
  min-width:100%;
  /* Узкие (≤470px): без сдвига — иначе картинка (по cover едва покрывает высоту) оголяет
     верх чёрной полосой. cover + center bottom заполняет контейнер целиком. */
  background-position:center bottom, center bottom;
}
/* Широкие (>470px): двор шире, картинка по cover заметно выходит выше верха — можно вернуть
   сдвиг вниз −46px (как у гильдии), чтобы пол лёг ровно к нижней кромке, а не «висел». */
@media (min-width:471px) {
  .gb-yard.pets-gb-yard { background-position:center bottom, center bottom -46px; }
}
/* .gb-tile уже flex-column/justify-end/align-center — питомец стоит на полу.
   Подпись у нас в обычном потоке, над картинкой (не абсолютная, как у гильдии). */
.gb-tile.pets-tile { flex:0 1 33%; max-width:33%; gap:2px; }
.gb-tile.pets-tile > img {
  width:100%; height:auto; max-width:90px; max-height:110px; object-fit:contain;
  filter:drop-shadow(0 5px 6px #000b);
}
.pets-tile-cap { position:relative; display:inline-block; text-align:center; margin-bottom:4px; pointer-events:none; }
/* Бейджи стихии питомца (иконки из /assets/icons/elements/). */
.pet-elem { object-fit:contain; display:block; }
/* Список «Мои питомцы» — верх-лево карточки (верх-право занято снаряжением). */
.pet-elem-card { position:absolute; top:5px; left:5px; width:26px; height:26px; z-index:2; pointer-events:none; filter:drop-shadow(0 1px 2px #000a); }
/* Попап выбора состава — верх-лево карточки (верх-право занято номером выбора). */
.pet-elem-pick { position:absolute; top:3px; left:3px; width:20px; height:20px; z-index:1; }
/* Двор — слева от блока «уровень+имя», сам блок остаётся по центру. */
.pets-tile-elem {
  position:absolute; right:100%; top:50%; transform:translateY(-50%); margin-right:5px;
  width:26px; height:26px; pointer-events:none; filter:drop-shadow(0 1px 2px #000a);
}

/* ── Бой питомцев: как бой игроков (.combat-screen/.combat-arena), но 3 на 3 ── */
/* У пета нет кнопок действий — нижний отступ меньше, чем у боя людей. */
.combat-arena.pb-arena { min-height:clamp(250px, 44vh, 360px); }
/* Широкие экраны: разносим МОЮ и вражескую команду заметно шире, чем петов внутри команды.
   Петы (flex:1 1 0) центрируются в широких ячейках, поэтому средний зазор был ≈ расстоянию
   между своими же петами → всё читалось как одна команда. Увеличиваем column-gap между
   колонками команд (0,2,0 перебивает базовый .combat-arena{gap}). */
@media (min-width:475px) {
  .combat-arena.pb-arena { column-gap:clamp(48px, 11vw, 130px); }
}
.pb-team { display:flex; align-items:flex-end; justify-content:center; gap:clamp(2px, 1.6vw, 12px); height:100%; }
/* Узкие экраны (<475px): 3 в ряд не влезают — команду ставим ВЕРТИКАЛЬНО (друг над другом):
   моя тройка колонкой слева, вражеская — колонкой справа. */
@media (max-width:474px) {
  .pb-team { flex-direction:column; align-items:center; justify-content:center; gap:10px; }
  .pb-pet { flex:0 0 auto; max-width:100%; }
  .pb-pet-port img { width:clamp(52px, 20vw, 90px); }
}
.pb-pet {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:5px; flex:1 1 0; min-width:0; max-width:34%; transition:opacity .4s, filter .4s;
}
.pb-pet .cb-name.pb-pet-name { font-size:.6rem; padding:1px 5px; max-width:100%; }
/* Голова пета: стихия + имя. На широких экранах — стихия НАД именем (колонка), крупная (×1.5). */
.pb-pet-head { display:flex; flex-direction:column; align-items:center; gap:2px; max-width:100%; }
.pb-pet-elem { width:clamp(20px, 6.3vw, 27px); height:clamp(20px, 6.3vw, 27px); flex:0 0 auto; filter:drop-shadow(0 1px 2px #000a); }
/* Узкие (<475px): стихия СЛЕВА от имени. Правило идёт ПОСЛЕ дефолтного .pb-pet-head{column} —
   иначе оно (ниже по каскаду) перебивало ранний media-override, и стихия была «всегда сверху». */
@media (max-width:474px) {
  .pb-pet-head { flex-direction:row; gap:4px; max-width:none; }
  .pb-pet-elem { width:18px; height:18px; }
  /* Имя пета — ЦЕЛИКОМ. Раньше .cb-name{max-width:100%} упирался в ширину портрета,
     а overflow:hidden+nowrap резал имя в 1–2 буквы. Снимаем клип: имя в одну строку,
     пет расширяется под него (петы стоят столбиком — места по горизонтали хватает). */
  .pb-pet .cb-name.pb-pet-name { max-width:none; overflow:visible; text-overflow:clip; }
}
.pb-pet .cb-hp.pb-pet-hp { width:100%; max-width:66px; height:12px; }
.pb-pet .cb-hp.pb-pet-hp .cb-hp-text { font-size:.55rem; }
.pb-pet-port { position:relative; display:flex; align-items:flex-end; justify-content:center; max-width:100%; }
.pb-pet-port img { width:clamp(46px, 13vw, 104px); height:auto; object-fit:contain; filter:drop-shadow(0 6px 6px #000a); }
/* Спрайты по натуре смотрят ВЛЕВО. Мою команду (слева) зеркалим — смотрит вправо, на врага;
   вражескую (справа) не трогаем — смотрит влево, на моих. */
.pb-a .pb-pet-port img { transform:scaleX(-1); }
/* Убитый питомец — большой красный крест поверх спрайта (без прозрачности). */
.pb-dead-x { position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none; overflow:visible; }
.pb-dead-x line { stroke:#e8140c; stroke-width:12; stroke-linecap:round; filter:drop-shadow(0 1px 3px #000); }
/* Выпад атакующего к врагу — заметный рывок вперёд со «шагом». */
@keyframes pb-lunge-a { 0%{transform:translate(0,0)} 45%{transform:translate(34px,-12px) scale(1.12)} 100%{transform:translate(0,0)} }
@keyframes pb-lunge-d { 0%{transform:translate(0,0)} 45%{transform:translate(-34px,-12px) scale(1.12)} 100%{transform:translate(0,0)} }
.pb-a.pb-lunge { animation:pb-lunge-a .5s ease; }
.pb-d.pb-lunge { animation:pb-lunge-d .5s ease; }
/* Получающий урон — сильная тряска + вспышка с красным свечением. */
@keyframes pb-hit-shake { 0%{transform:translateX(0)} 15%{transform:translateX(-10px)} 35%{transform:translateX(8px)} 55%{transform:translateX(-6px)} 75%{transform:translateX(4px)} 100%{transform:translateX(0)} }
@keyframes pb-flash { 0%,100%{filter:drop-shadow(0 6px 6px #000a)} 35%{filter:brightness(2) drop-shadow(0 0 9px #ff5a5a)} }
.pb-hit { animation:pb-hit-shake .5s ease; }
.pb-hit .pb-pet-port img { animation:pb-flash .5s ease; }
/* Всплывающий урон над целью */
@keyframes pb-dmg-pop { 0%{opacity:0;transform:translate(-50%,0)} 15%{opacity:1} 100%{opacity:0;transform:translate(-50%,-34px)} }
.pb-dmg { position:absolute; left:50%; top:0; transform:translate(-50%,0); color:#fff; font-weight:800; font-size:1rem; text-shadow:0 1px 4px #000,0 0 3px #000; pointer-events:none; z-index:5; animation:pb-dmg-pop .75s ease-out forwards; }
.pb-dmg.crit { color:var(--gold); font-size:1.28rem; }
/* Подпись «Я vs Соперник» — над ареной. */
.pb-vs { text-align:center; font-family:var(--font-title); font-size:.95rem; padding:2px 0 4px; }
/* Регулятор скорости боя — под фоном арены. */
.pb-speed { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:8px 0 6px; }
.pb-speed-label { color:var(--text-dim); font-size:.8rem; letter-spacing:.02em; }
.pb-speed-btn {
  min-width:42px; padding:4px 12px; border:1px solid var(--border); border-radius:8px;
  background:rgba(0,0,0,.25); color:var(--text-dim); font-family:var(--font-title);
  font-size:.85rem; cursor:pointer; transition:border-color .12s, color .12s, background .12s;
}
.pb-speed-btn:hover { border-color:var(--gold); color:var(--text); }
.pb-speed-btn.active { border-color:var(--gold); color:#1a1206; background:var(--gold); }
/* Боевой лог — нижнее окно (кто кого и на сколько). */
.pb-log { text-align:left; }
.pb-log-line { padding:1px 0; color:var(--text-dim); font-size:.82rem; line-height:1.4; }
.pb-log-line b { color:var(--text); font-weight:600; }
.pb-log-line.crit { color:var(--gold); }
.pb-log-line.crit i { font-style:normal; font-weight:700; color:var(--gold); }
.pb-log-line.dead { color:#ff9a9a; }
.pb-log-line.round { text-align:center; opacity:.65; margin:3px 0; letter-spacing:.05em; }
/* Пометка стихийного бонуса в логе: сильная +15% зелёным, слабая −15% красным. */
.pb-log-line .pb-el-up   { color:#4c9;    font-weight:600; }
.pb-log-line .pb-el-down { color:#ff9a9a; font-weight:600; }
/* Вторая строка регуляторов (логика боя) — тонкий разделитель над ней. */
.pb-strat { border-top:1px solid var(--border); margin-top:2px; }

/* ── Колизей: предбоевой попап поверх арены (тактика + выбор усиления 1 из 3) ── */
/* Превью-арена заполняет область контента, а попап лежит АБСОЛЮТНО внутри неё (не fixed на
   весь экран) — так верхний бар и нижняя навигация остаются доступны: можно уйти и вернуться. */
.combat-screen.colo-prebattle { position:relative; min-height:100%; }
.colo-active-buffs { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; padding:6px 0 2px; }
.colo-active-buffs span { background:rgba(0,0,0,.4); border:1px solid var(--border-gold); border-radius:5px; padding:2px 7px; font-size:.76rem; color:var(--text); }
.colo-prebattle-pop { position:absolute; inset:0; z-index:20; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; padding:14px; border-radius:8px; }
.cpb-card { background:var(--bg-panel); border:2px solid var(--border-gold); border-radius:12px; padding:16px; max-width:460px; width:100%; max-height:92vh; overflow-y:auto; box-shadow:0 10px 40px #000a; }
.cpb-floor { font-family:var(--font-title); color:var(--gold); font-size:1.02rem; text-align:center; margin-bottom:10px; }
.cpb-buff-title { font-family:var(--font-title); color:var(--gold); font-size:.92rem; text-align:center; margin-bottom:8px; }
.cpb-buff-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; margin-bottom:12px; }
.cpb-buff { background:var(--bg-card); border:2px solid var(--border); border-radius:8px; padding:10px 6px; cursor:pointer; text-align:center; transition:border-color .15s, background .15s; color:var(--text); }
.cpb-buff:hover { border-color:var(--gold); }
.cpb-buff.selected { border-color:var(--gold); background:rgba(240,180,41,.14); }
.cpb-buff img { width:1.7rem; height:1.7rem; object-fit:contain; }
.cpb-buff-name { font-family:var(--font-title); color:var(--gold); font-size:.8rem; margin-top:3px; }
.cpb-buff-desc { font-size:.68rem; color:var(--text-dim); margin-top:3px; line-height:1.3; }
.cpb-tactic { margin-bottom:12px; }
.cpb-actions { display:flex; gap:8px; }
.cpb-hint { text-align:center; font-size:.72rem; color:var(--text-dim); margin-top:6px; }

/* ── Экспедиции питомцев: карта (пан/зум как в «Мире») + точки + идущие питомцы ── */
.pexp-map { position:relative; width:100%; height:min(56vh,520px); border:1px solid var(--border); border-radius:12px; overflow:hidden;
            background:radial-gradient(120% 90% at 50% 0%, #10202e, #0a0f16 70%); touch-action:none; cursor:grab; }
.pexp-map.grab { cursor:grabbing; }
.pexp-svg { width:100%; height:100%; display:block; }
.pexp-sea { fill:#0c1622; }
.pexp-zoom { position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; gap:6px; z-index:5; }
.pexp-zoom button { width:40px; height:40px; font-size:1.3rem; border-radius:9px; border:1px solid var(--border); background:rgba(12,14,18,.9); color:var(--text); cursor:pointer; }
.pexp-zoom button:active { background:rgba(198,149,66,.25); }
.pexp-silver-cap { font-size:.95rem; color:var(--text); padding:2px 4px 8px; display:flex; align-items:center; justify-content:center; gap:5px; font-family:var(--font-title); }
@media (min-width:301px) { .pexp-silver-cap { justify-content:flex-end; } }
.pexp-silver-cap img { width:1.05em; height:1.05em; object-fit:contain; }
.pexp-silver-cap.is-full { color:#e07a7a; }
.pexp-actions { margin-top:6px; }
.guild-act .pexp-tb-badge, .pexp-tb-badge { position:absolute; top:4px; right:4px; width:auto; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#c9313a; color:#fff; font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
.pexp-line { stroke:#edb64a; stroke-width:3; stroke-dasharray:14 12; opacity:.5; }
.pexp-marker { cursor:pointer; }
.pexp-halo { fill:rgba(237,182,74,.16); stroke:#edb64a; stroke-width:2; }
.pexp-eta { fill:#f0d98a; font-size:26px; font-weight:700; paint-order:stroke; stroke:#000; stroke-width:5px; }
.pexp-mname { fill:#e9e3d4; font-size:26px; font-weight:700; paint-order:stroke; stroke:#000; stroke-width:5px; }
.pexp-region-label { fill:#cdd4df; font-family:var(--font-title,serif); font-size:56px; font-weight:700; text-anchor:middle; opacity:.28; letter-spacing:3px; text-transform:uppercase; pointer-events:none; }
.pexp-city-label { fill:var(--gold); font-family:var(--font-title,serif); font-size:34px; font-weight:700; paint-order:stroke; stroke:#000; stroke-width:5px; pointer-events:none; }
.pexp-pt { cursor:pointer; }
.pexp-pt:hover { filter:brightness(1.14); }
.pexp-pt-label { fill:#fff; font-family:var(--font-title,serif); font-size:30px; font-weight:700; paint-order:stroke; stroke:#000; stroke-width:6px; pointer-events:none; }
.pexp-pt-lock { fill:#ffb3b3; font-size:28px; font-family:var(--font-title,serif); paint-order:stroke; stroke:#000; stroke-width:5px; pointer-events:none; }
.pexp-pt.locked { filter:grayscale(.7) brightness(.75); }
.pexp-chest-badge { position:absolute; top:-6px; right:-6px; background:var(--red-light); color:#fff; font-size:.65rem; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; font-family:var(--font-title); }
.pexp-active-list { display:flex; flex-direction:column; gap:8px; }
.pexp-active { display:flex; align-items:center; gap:10px; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.pexp-active-pet { width:38px; height:38px; object-fit:contain; flex:0 0 auto; }
.pexp-active-mid { flex:1; min-width:0; }
.pexp-active-line { font-size:.82rem; color:var(--text); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pexp-bar { height:6px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.pexp-bar-fill { height:100%; width:0; background:var(--gold); border-radius:3px; transition:width 1s linear; }
.pexp-active-timer { flex:0 0 auto; text-align:right; min-width:64px; }
.pexp-phase { font-size:.68rem; color:var(--text-dim); }
.pexp-remain { font-size:.82rem; color:var(--gold); font-family:var(--font-title); }
.pexp-pick:hover { border-color:var(--gold) !important; }

/* ── Инкубатор: яйца, треск (4 тапа), вылупление ── */
.inc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:18px; padding:6px 2px; justify-items:center; }
.inc-egg-card { display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
.inc-egg { position:relative; width:94px; height:112px; display:flex; align-items:center; justify-content:center; }
.inc-egg-card.ready .inc-egg { cursor:pointer; }
/* Две половинки яйца — одна и та же картинка, разрезанная зигзаг-трещиной через clip-path.
   Стуки расходят половинки, изнутри проступает свечение цвета редкости; вылупление — разлёт. */
.inc-shard { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1;
  filter:drop-shadow(0 4px 8px #000a); transition:transform .22s cubic-bezier(.34,1.3,.5,1); transform-origin:center; }
.inc-shard-l { clip-path:polygon(0 0, 52% 0, 45% 12%, 55% 25%, 44% 39%, 55% 53%, 44% 67%, 55% 81%, 47% 100%, 0 100%); }
.inc-shard-r { clip-path:polygon(52% 0, 100% 0, 100% 100%, 47% 100%, 55% 81%, 44% 67%, 55% 53%, 44% 39%, 55% 25%, 45% 12%); }
/* Свечение изнутри — проступает в трещине, когда половинки расходятся */
.inc-egg-glow { position:absolute; inset:10%; z-index:0; border-radius:50% 50% 48% 48%; opacity:0;
  background:radial-gradient(circle, var(--egg-col) 0%, transparent 62%); filter:blur(4px); transition:opacity .25s; }
/* Готовое яйцо мягко пульсирует ободком свечения */
.inc-egg-card.ready .inc-shard { animation:inc-glow 1.7s ease-in-out infinite; }
@keyframes inc-glow { 0%,100%{ filter:drop-shadow(0 4px 8px #000a) drop-shadow(0 0 3px var(--egg-col)); } 50%{ filter:drop-shadow(0 4px 8px #000a) drop-shadow(0 0 13px var(--egg-col)); } }
/* Зреющее яйцо (таймер ещё идёт) — время от времени слегка подпрыгивает */
.inc-egg-card:not(.ready) .inc-egg { animation:inc-idle-bounce 3.4s ease-in-out infinite; }
@keyframes inc-idle-bounce { 0%,80%,100%{transform:translateY(0) rotate(0)} 84%{transform:translateY(-9px) rotate(-5deg)} 88%{transform:translateY(0) rotate(4deg)} 92%{transform:translateY(-4px) rotate(-2deg)} 96%{transform:translateY(0) rotate(0)} }
/* Стуки: половинки расходятся всё сильнее, свечение ярче */
.inc-egg[data-taps="1"] .inc-shard-l { transform:translateX(-3px) translateY(-1px) rotate(-2deg); }
.inc-egg[data-taps="1"] .inc-shard-r { transform:translateX(3px) translateY(-1px) rotate(2deg); }
.inc-egg[data-taps="1"] .inc-egg-glow { opacity:.4; }
.inc-egg[data-taps="2"] .inc-shard-l { transform:translateX(-4px) translateY(-1px) rotate(-2.5deg); }
.inc-egg[data-taps="2"] .inc-shard-r { transform:translateX(4px) translateY(-1px) rotate(2.5deg); }
.inc-egg[data-taps="2"] .inc-egg-glow { opacity:.6; }
.inc-egg[data-taps="3"] .inc-shard-l { transform:translateX(-7px) translateY(-2px) rotate(-4deg); }
.inc-egg[data-taps="3"] .inc-shard-r { transform:translateX(7px) translateY(-2px) rotate(4deg); }
.inc-egg[data-taps="3"] .inc-egg-glow { opacity:.9; }
@keyframes inc-shake { 0%,100%{transform:translateX(0) rotate(0)} 20%{transform:translateX(-4px) rotate(-5deg)} 40%{transform:translateX(4px) rotate(5deg)} 60%{transform:translateX(-3px) rotate(-3deg)} 80%{transform:translateX(3px) rotate(3deg)} }
.inc-egg.inc-shake { animation:inc-shake .32s ease; }
.inc-egg-pet { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.4); z-index:2; }
.inc-egg-pet img { width:82%; height:82%; object-fit:contain; }
/* Вылупление: половинки скорлупы разлетаются в стороны, питомец проявляется, вспышка света */
.inc-egg.inc-hatch .inc-shard-l { animation:inc-fly-l .6s ease forwards; }
.inc-egg.inc-hatch .inc-shard-r { animation:inc-fly-r .6s ease forwards; }
@keyframes inc-fly-l { to{ opacity:0; transform:translateX(-42px) translateY(16px) rotate(-38deg); } }
@keyframes inc-fly-r { to{ opacity:0; transform:translateX(42px) translateY(16px) rotate(38deg); } }
.inc-egg.inc-hatch .inc-egg-glow { opacity:0; }
.inc-egg.inc-hatch .inc-egg-pet { animation:inc-reveal .7s .3s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes inc-reveal { 0%{opacity:0;transform:scale(.4)} 60%{opacity:1;transform:scale(1.12)} 100%{opacity:1;transform:scale(1)} }
/* Свечение вокруг вылупившегося питомца — держится (пульсирует), пока не нажали «Забрать» */
.inc-egg.inc-hatch .inc-egg-pet img { animation:inc-pet-glow 1.8s ease-in-out .55s infinite; }
@keyframes inc-pet-glow { 0%,100%{ filter:drop-shadow(0 0 8px var(--egg-col)) drop-shadow(0 0 15px var(--egg-col)); } 50%{ filter:drop-shadow(0 0 14px var(--egg-col)) drop-shadow(0 0 27px var(--egg-col)); } }
.inc-egg-name { font-family:var(--font-title); font-size:.82rem; }
.inc-egg-timer { font-size:.82rem; color:var(--gold); font-family:var(--font-title); }
.inc-egg-ready { font-size:.68rem; color:var(--gold); text-align:center; max-width:112px; line-height:1.25; }
/* Одиночное яйцо — крупно по центру инкубатора */
.inc-solo { display:flex; flex-direction:column; align-items:center; padding:10px 0 4px; }
.inc-egg-big .inc-egg { width:210px; height:252px; }
.inc-egg-big .inc-egg-name { font-size:1.05rem; margin-top:2px; }
.inc-egg-big .inc-egg-timer { font-size:1.1rem; }
.inc-egg-big .inc-egg-ready { font-size:.92rem; max-width:200px; }

/* ── Бестиарий питомцев: вкладки-локации + карточки открыт/не открыт ── */
.best-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:10px; }
.best-tab { flex:0 0 auto; display:flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-panel); color:var(--text-dim); cursor:pointer; font-size:.8rem; white-space:nowrap; }
.best-tab img { width:1.15em; height:1.15em; object-fit:contain; }
.best-tab.active { border-color:var(--gold); color:var(--gold); background:var(--border-gold); }
.best-pet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.best-pet-card { position:relative; background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; padding:22px 6px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.best-pet-card.locked { opacity:.85; }
.best-pet-badge { position:absolute; top:0; left:0; right:0; font-size:.6rem; text-align:center; padding:2px 0; border-radius:9px 9px 0 0; font-family:var(--font-title); letter-spacing:.02em; }
.best-pet-img { width:52px; height:52px; object-fit:contain; }
.best-pet-name { font-family:var(--font-title); font-size:.74rem; text-align:center; line-height:1.1; }
.best-pet-elem { position:absolute; top:24px; left:6px; width:18px; height:18px; z-index:2; }
.pets-tile-name {
  font-family:var(--font-title); font-size:.72rem; line-height:1.1; color:#fff;
  text-shadow:0 1px 2px #000, 0 0 3px #000;
}
/* Статы питомца — поверх низа спрайта (у ног). Чипы с тёмным фоном для читаемости. */
.pets-tile-stats {
  position:absolute; left:0; right:0; bottom:1px; z-index:2; pointer-events:none;
  display:flex; justify-content:center; gap:4px;
}
.pets-tile-stats span {
  display:inline-flex; align-items:center; gap:3px;
  padding:1px 4px; border-radius:5px; background:rgba(0,0,0,.58);
  font-size:clamp(.62rem, 2.6vw, 1.16rem); color:#fff; text-shadow:0 1px 1px #000;
}
.pets-tile-stats img { width:.9em; height:.9em; object-fit:contain; }
/* Звёздность питомца во дворе — над строкой статов (у ног спрайта). На широких экранах статы
   крупнее (clamp), поэтому звёзды поднимаем выше, чтобы не слипались. */
.pets-tile-stars { position:absolute; left:0; right:0; bottom:22px; z-index:3; display:flex; justify-content:center; pointer-events:none; }
@media (min-width:600px) { .pets-tile-stars { bottom:32px; } }
/* Сетка выбора питомцев в экспедицию: минимум 2 колонки (на узких без гиганта/скролла), на широких — 3. */
.pexp-team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
@media (min-width:440px) { .pexp-team-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* ≤350px: плитки узкие — ужимаем отступы статов, чтобы три чипа не налезали на соседа. */
@media (max-width:350px) {
  .pets-tile-stats { gap:1px; }
  .pets-tile-stats span { padding:0 2px; gap:1px; }
}
/* «+» пустого слота — поднят к вертикальному центру блока «питомец+имя+уровень». */
.pets-add-plus {
  width:60px; height:60px; margin-bottom:33px; border-radius:50%;
  border:2px dashed rgba(231,218,188,.65); background:rgba(0,0,0,.3);
  color:var(--gold); font-size:1.9rem; font-family:var(--font-title); line-height:1;
  display:flex; align-items:center; justify-content:center;
}
/* Кнопки разделов — натуральной ширины (как в гильдии), но группа выложена ОТ ЦЕНТРА
   (поля по бокам), а не от левого края и не растянута 1fr'ом во всю ширину.
   auto-fit + фикс. максимум колонки + justify-content:center. */
.guild-actions-grid.pets-actions-grid {
  grid-template-columns:repeat(auto-fit, minmax(84px, 96px));
  justify-content:center;
}

/* Инфо-строка гильдии над двором: одной строкой, а если не влезает — переносится
   на второй ряд (казна). Без горизонтального скролла. */
.guild-topbar {
  position:relative; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 10px;
  padding:7px 10px; margin-bottom:6px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg-panel);
  font-size:.82rem; text-align:center;
}
.guild-topbar > * { flex:0 0 auto; white-space:nowrap; }
.guild-topbar .guild-name { font-family:var(--font-title); color:var(--gold); font-weight:700; overflow:hidden; text-overflow:ellipsis; max-width:40vw; }
/* margin-left:8px от базового .guild-tag (screens.css) в строке не нужен — отступ даёт gap */
.guild-topbar .guild-tag  { color:var(--text-dim); margin-left:0; }
.guild-topbar-sep { width:1px; height:16px; background:var(--border); }
.guild-topbar .btn { padding:3px 10px; font-size:.75rem; }
/* Смысловые группы строки: переносятся ЦЕЛИКОМ, внутри себя не разрываются
   (иначе на узких экранах ряды делились по отдельным цифрам и палочкам). */
.guild-topbar-title,
.guild-topbar-stats,
.guild-topbar-treasury,
.guild-topbar-actions {
  display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:nowrap;
}
.guild-topbar-title { gap:5px; min-width:0; }
/* ≤410px: ровно 4 ряда — название / рейтинг-состав-очки / казна / кнопки */
@media (max-width:410px) {
  .guild-topbar-sep { display:none; }
  .guild-topbar-title,
  .guild-topbar-stats,
  .guild-topbar-treasury,
  .guild-topbar-actions { width:100%; }
  .guild-topbar { gap:5px 8px; }
}

/* ── Сетка действий гильдии (под городом): квадраты, содержимое — в попапах ── */
.guild-actions-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:6px; margin-bottom:8px;
}
.guild-act { position:relative; }
/* width:auto ОБЯЗАТЕЛЬНО: .guild-act span { width:100% } (для подписи) красит и бейдж —
   он тоже <span>, — и кружок растягивался во всю кнопку. Тут переопределяем. */
.guild-act .nav-badge { position:absolute; top:3px; right:3px; margin:0; width:auto; }
.guild-act {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:7px 3px 6px; cursor:pointer;
  background:var(--bg-panel); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-family:inherit; font-size:.74rem; line-height:1.1; text-align:center;
  transition:border-color .15s ease, transform .1s ease;
}
.guild-act img { width:34px; height:34px; object-fit:contain; }
.guild-act svg.pnav-ico { width:34px; height:34px; }
.guild-act span { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guild-act:hover  { border-color:var(--gold); }
.guild-act:active { transform:scale(.97); }
/* «Уйти» (покинуть гильдию) — та же плитка, но красноватая, и с глифом-дверью вместо картинки (#7). */
.guild-act-leave { border-color:rgba(192,57,43,.45); }
.guild-act-leave:hover { border-color:var(--red-light); }
.guild-act-leave span { color:var(--red-light); }
.guild-act-leave .ga-leave-ico { width:100%; height:34px; display:flex; align-items:center; justify-content:center; font-size:28px; line-height:1; }
@media (max-width:420px) {
  .guild-actions-grid { grid-template-columns:repeat(3, 1fr); gap:5px; }
  .guild-act { font-size:.68rem; padding:6px 2px 5px; }
  .guild-act img { width:30px; height:30px; }
  .guild-act svg.pnav-ico { width:30px; height:30px; }
}

/* Попап раздела гильдии (участники/миссии/война/чат/питомец) */
.guild-section-box {
  width:100%; max-height:84vh; display:flex; flex-direction:column;
  background:var(--bg-panel); border:1px solid var(--border-gold); border-radius:12px; padding:14px;
}
.guild-section-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
/* заголовок ОДНОГО размера во всех попапах гильдии */
.guild-section-head .panel-title {
  flex:1; min-width:0; margin:0;
  font-family:var(--font-title); font-size:1.02rem; font-weight:700; color:var(--gold);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.guild-section-close { flex:0 0 auto; padding:2px 9px; font-size:.85rem; line-height:1.2; }
.guild-section-body { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
/* чат: окно фиксированной высоты, лента занимает всё до поля ввода (без пустоты снизу).
   ВАЖНО: перебиваем узкий media-режим из screens.css (#guild-chat max-height:130px),
   из-за которого поле ввода зависало посреди окна. */
.guild-section-box.is-chat { height:min(72vh, 560px); }
.guild-section-box.is-chat .guild-section-body { overflow:hidden; }
.guild-section-box.is-chat .guild-chat-body { flex:1; min-height:0; display:flex; flex-direction:column; padding-top:0; }
.guild-section-box.is-chat #guild-chat.chat-messages {
  flex:1 1 auto; min-height:0; max-height:none; height:auto; overflow-y:auto;
}
.guild-section-box.is-chat .chat-input-row { flex:0 0 auto; }

/* Рейды/подземелья гильдии — попапы того же вида, что и остальные разделы */
.guild-popup {
  position:fixed; inset:0; z-index:10001;
  background:rgba(0,0,0,.74);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
/* ── БОЙ гильд-рейда/войны: не попап, а полноценный экран ────────────────────
   Игрок просил, чтобы бой с боссом гильдии и с питомцем чужой гильдии выглядел «как все
   остальные», а не модалкой по центру. На время боя коробка раскрывается во весь экран и
   теряет попапную отделку: без рамки, скругления и фона панели. Список рейдов и итоги —
   по-прежнему обычный попап (класс вешается ТОЛЬКО на время боя, см. setCombatView). */
.guild-popup.gr-fullscreen-ov {
  padding:0;                     /* поля вокруг модалки боем не нужны */
  background:var(--bg-dark);     /* затемнение заменяем фоном страницы — это уже экран */
  align-items:stretch; justify-content:stretch;
}
.guild-section-box.gr-fullscreen {
  width:100%; max-width:none; max-height:none; height:100%;
  background:transparent; border:none; border-radius:0;
  padding:10px 12px; overflow-y:auto;
}
.guild-popup.gr-fullscreen-ov .guild-section-box { max-height:none; }
/* шапка боя (назад/крестик) — обычная строка: без липкости, панельного фона и
   отрицательных полей попапной шапки, иначе она «выпирает» за края экрана */
.guild-popup .guild-section-box.gr-fullscreen > .guild-section-head {
  position:static; margin:0 auto 10px; padding:0 0 8px;
  width:100%; max-width:780px;
  background:none; border-radius:0; border-bottom:1px solid var(--border-gold);
}
/* на широком экране арену всё же не растягиваем на всю ширину — читается хуже */
.guild-section-box.gr-fullscreen .combat-screen { max-width:780px; margin:0 auto; width:100%; }
@media (max-width:600px) {
  .guild-section-box.gr-fullscreen { padding:8px 10px; }
  .guild-popup .guild-section-box.gr-fullscreen > .guild-section-head { margin-bottom:8px; padding-bottom:6px; }
}

/* внутри рейд/данж-попапа коробка сама скроллится, шапка липкая */
.guild-popup .guild-section-box { max-height:88vh; overflow-y:auto; }
.guild-popup .guild-section-head {
  position:sticky; top:-14px; z-index:2;
  margin:-14px -14px 10px; padding:14px 14px 8px;
  background:var(--bg-panel); border-radius:12px 12px 0 0;
}
/* мобильная посадка: попап почти во весь экран, внутренние панели компактнее */
@media (max-width:600px) {
  .guild-popup, .guild-section-modal { padding:8px; }
  .guild-section-box { padding:10px; max-height:92vh; }
  .guild-popup .guild-section-head { top:-10px; margin:-10px -10px 8px; padding:10px 10px 7px; }
  .guild-popup .panel { padding:10px; }
  .guild-popup .btn { font-size:.8rem; }
}

/* Счётчик в шапке попапа (печати / очки войны): крупно, слева от крестика */
.guild-section-count {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-title); font-size:1.02rem; font-weight:700; color:var(--gold);
  padding:2px 8px; border:1px solid var(--border-gold); border-radius:8px; background:var(--bg-dark);
  white-space:nowrap;
}