: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;
}
.auth-box { background: var(--bg-panel); border: 1px solid var(--border-gold); border-radius: 8px; padding: 40px; width: 100%; max-width: 480px; box-shadow: 0 0 40px rgba(201,162,39,0.15); }
.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; }
  /* Reserve space at the bottom so the auth/loading box doesn't overlap the logo */
  .auth-screen, .loading-screen { padding-bottom: 126px; }
  /* 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; }
  .auth-screen, .loading-screen { padding-bottom: 116px; }
}
.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; }
}

/* ─── Зал Славы: ордена героев ───────────────────────────────────────────── */
/* Сетка как у питомцев: 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; }
}

/* Инфо-строка гильдии над двором: одной строкой, а если не влезает — переносится
   на второй ряд (казна). Без горизонтального скролла. */
.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 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-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;
}