/* ── Удары соратников на общей арене (рейды, гильд-рейды, война) ──────────
   Босс общий: пока ты бьёшь, по нему лупят и другие. Карточка бьющего выплывает над
   ареной, наносит удар и уходит. Играются строго по ОДНОЙ (очередь в battle-arena.js) —
   иначе при толпе карточки наложились бы друг на друга. */
.cb-ally-slot { position:absolute; left:0; right:0; top:6px; display:flex; justify-content:center; pointer-events:none; z-index:3; }
.cb-ally {
  display:flex; align-items:center; gap:7px; padding:4px 10px 4px 4px;
  border:1px solid var(--border-gold); border-radius:999px;
  background:rgba(12,14,18,.86); backdrop-filter:blur(2px);
  font-size:.8rem; white-space:nowrap;
  animation:cbAllyIn .2s ease-out both;
}
.cb-ally-av { width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.cb-ally-name { color:var(--text); max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.cb-ally-dmg { color:#ff8a80; font-weight:700; font-variant-numeric:tabular-nums; }
/* удар: карточка дёргается к врагу и гаснет */
.cb-ally.cb-ally-strike { animation:cbAllyStrike var(--cb-ally-out,.5s) ease-in forwards; }
@keyframes cbAllyIn    { from { opacity:0; transform:translateY(-10px) scale(.92); } to { opacity:1; transform:none; } }
@keyframes cbAllyStrike{ 0% { opacity:1; transform:none; }
                         35% { opacity:1; transform:translateX(26px) scale(1.06); }
                         100% { opacity:0; transform:translateX(40px) scale(.94); } }
@media (prefers-reduced-motion:reduce) {
  .cb-ally, .cb-ally.cb-ally-strike { animation:none; }
}

/* ── Combat ──────────────────────────────────────────────── */
.combat-screen { display:flex; flex-direction:column; gap:12px; }
.combat-header { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border-gold); }
.combat-timer { font-family:var(--font-title); font-size:1.6rem; color:var(--gold); min-width:40px; text-align:right; transition:color .3s; }
.combat-arena { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; min-height:340px; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; padding:14px 12px 78px; overflow:hidden; }
.fighter-status { min-height:20px; display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }

/* Новая арена: имя-плашка → HP над головой → крупный портрет на полу */
.cb-fighter { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:9px; height:100%; min-width:0; }
.cb-top { display:flex; flex-direction:column; align-items:center; gap:7px; width:100%; }
.cb-name { max-width:100%; font-family:var(--font-title); font-size:.84rem; color:var(--gold); text-align:center; padding:2px 9px; background:rgba(8,6,12,.8); border:1px solid var(--border-gold); border-radius:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 1px 3px #0007; }
.cb-name.enemy { color:#ff8080; border-color:#9d3a3a; }
.cb-hp { position:relative; width:100%; max-width:170px; height:17px; border-radius:9px; background:#180b0f; border:1px solid #000; overflow:hidden; box-shadow:0 1px 3px #0008, inset 0 1px 2px #0006; }
.cb-hp-ghost { position:absolute; left:0; top:0; bottom:0; background:#ff9a9a; }
.cb-hp-fill { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(180deg,#f0584e,#9c1818); transition:width .22s ease; box-shadow:0 0 7px #ff2b2b66; }
.cb-hp-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; font-size:.7rem; font-weight:800; color:#fff; letter-spacing:.3px; text-shadow:0 1px 2px #000, 0 0 3px #000; }
.cb-portrait { display:flex; align-items:flex-end; justify-content:center; max-width:100%; height:150px; }
.cb-portrait img { width:128px; max-height:150px; height:auto; object-fit:contain; filter:drop-shadow(0 7px 7px #000a); }
/* Аватар игрока: слегка скруглённые углы, лицом к врагу (зеркало), чуть над полом */
.cb-portrait.you img { border-radius:22px; transform:scaleX(-1); margin-bottom:8px; }
.cb-portrait .cb-emoji { font-size:5rem; line-height:1; filter:drop-shadow(0 7px 7px #000a); }
.cb-vs { display:flex; align-items:center; justify-content:center; font-family:var(--font-title); font-size:1.25rem; color:var(--border-gold); text-shadow:0 1px 3px #000; }
@keyframes cb-hit { 0%{transform:translateX(0)} 18%{transform:translateX(-7px)} 38%{transform:translateX(6px)} 58%{transform:translateX(-4px)} 78%{transform:translateX(3px)} 100%{transform:translateX(0)} }
@keyframes cb-hit-flash { 0%,100%{filter:drop-shadow(0 7px 7px #000a)} 35%{filter:drop-shadow(0 7px 7px #000a) brightness(1.7)} }
.cb-portrait.cb-hit { animation:cb-hit .4s ease; }
.cb-portrait.cb-hit img { animation:cb-hit-flash .4s ease; }
.combat-log { background:var(--bg-dark); border:1px solid var(--border); border-radius:4px; padding:10px 12px; min-height:80px; max-height:120px; overflow-y:auto; font-size:.875rem; line-height:1.8; }
.combat-actions { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.combat-action-wrap { display:flex; flex-direction:column; gap:4px; }
.combat-action-btn { width:100%; padding:10px 4px; font-size:.8rem; }
.combat-action-desc { font-size:.7rem; color:var(--text-dim); text-align:center; line-height:1.3; }
.ap-badge { background:var(--bg-dark); border:1px solid var(--gold); color:var(--gold); padding:2px 10px; border-radius:12px; font-size:.85rem; font-weight:700; }
.act-cost { font-size:.7rem; opacity:.7; margin-left:2px; }
.btn-teal { background:linear-gradient(135deg,#0d4a4a,#1a8080); border-color:#1a8080; color:#fff; }
.combat-end-log { margin:16px auto 0; width:100%; max-width:360px; background:var(--bg-dark); border:1px solid var(--border); border-radius:8px; padding:10px 14px; text-align:left; font-size:.82rem; line-height:1.8; max-height:260px; overflow-y:auto; }
@media(max-width:600px) {
  .combat-actions { grid-template-columns:1fr 1fr; }
  /* Узкий экран: 2 равные колонки (игрок | враг), HP заполняет ширину, бойцы с разрывом */
  .combat-arena { grid-template-columns:1fr 1fr; gap:20px; padding:10px 8px 78px; min-height:265px; }
  .cb-portrait { height:104px; }
  .cb-portrait img { width:92px; max-height:104px; }
  .cb-portrait .cb-emoji { font-size:3.4rem; }
  .cb-hp { max-width:160px; height:15px; }
  .cb-hp-text { font-size:.66rem; }
  .cb-name { font-size:.78rem; padding:2px 7px; }
}

/* Home */
.home-welcome { font-family: var(--font-title); font-size:1rem; color:var(--gold); margin-bottom:10px; }
/* Меню «Домой»: секции + сетка. Жёстко 3 в ряд на телефонах, 7 на ПК (auto-fill не давал
   этого одним значением: 3 на 320px требует ≤95px, а такой minmax даёт 9 колонок на 960px) */
.home-section { margin-bottom:12px; }
.home-section-title {
  font-family:var(--font-title); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); margin:0 0 6px 2px;
  display:flex; align-items:center; gap:8px;
}
.home-section-title::after { content:''; flex:1; height:1px; background:var(--border); }
.home-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.home-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:8px 3px; text-align:center; cursor:pointer; transition:.2s; position:relative; min-width:0; }
.home-card .nav-badge { position:absolute; top:4px; right:4px; margin:0; }
.home-card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 4px 15px rgba(201,162,39,0.15); }
/* иконка задаётся инлайново как 2em → её размер = 2 × font-size этого span */
.home-card-icon { font-size:1.15rem; display:block; margin-bottom:3px; line-height:1; }
.home-card-label { font-family:var(--font-title); font-size:.66rem; color:var(--text); letter-spacing:0; line-height:1.15; display:block; overflow-wrap:anywhere; }
.home-card-locked { cursor:default; border-color:rgba(255,255,255,0.06); }
.home-card-locked:hover { border-color:rgba(255,255,255,0.1); transform:none; box-shadow:none; }
.home-card-lock-badge { display:block; margin-top:5px; font-size:.65rem; color:#888; font-family:var(--font-body); }
.nav-btn-locked { opacity:0.55; }
.nav-lock-badge { position:absolute; top:2px; right:4px; font-size:.52rem; color:#888; line-height:1; }

/* 460–499px: 4 в ряд (карточка ~105px) */
@media (min-width: 460px) and (max-width: 499px) {
  .home-grid { grid-template-columns:repeat(4,1fr); }
}
/* 500–659px: 5 в ряд (на 500px карточка ~91px) */
@media (min-width: 500px) and (max-width: 659px) {
  .home-grid { grid-template-columns:repeat(5,1fr); }
}

@media (min-width: 660px) {
  .home-section { margin-bottom:14px; }
  .home-section-title { font-size:.78rem; margin-bottom:8px; }
  .home-grid { grid-template-columns:repeat(7,1fr); gap:8px; }
  .home-card { padding:10px 4px; }
  .home-card-icon { font-size:1.4rem; margin-bottom:5px; }
  .home-card-label { font-size:.74rem; letter-spacing:.3px; }
}

/* Story */
.story-quest-title { font-family:var(--font-title); font-size:1.3rem; color:var(--gold); margin-bottom:8px; }
.story-text { font-style:italic; line-height:1.8; color:var(--text); margin-bottom:16px; }
.choice-btn { width:100%; text-align:left; padding:12px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:4px; color:var(--text); font-family:var(--font-body); font-size:1rem; cursor:pointer; margin-bottom:8px; transition:.2s; }
.choice-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--border-gold); }
.story-progress { color:var(--text-dim); font-size:.85rem; margin-bottom:12px; }

/* Arena */
.arena-status { text-align:center; padding:30px; }
.arena-vs { font-family:var(--font-title); font-size:3rem; color:var(--gold); margin:20px 0; }
.arena-fighters { display:flex; justify-content:space-around; align-items:center; margin:20px 0; }
.fighter-card { text-align:center; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; min-width:120px; }
.fighter-name { font-family:var(--font-title); color:var(--gold); font-size:1rem; }
.arena-main-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; align-items:stretch; }
.arena-history-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.arena-history-wrap .table { min-width:360px; }
@media (max-width:500px) {
  .arena-main-grid { grid-template-columns:1fr; }
  .arena-history-wrap .table th, .arena-history-wrap .table td { font-size:.72rem; padding:5px 6px; }
}
@media (max-width:400px) {
  .arena-history-wrap .table th, .arena-history-wrap .table td { font-size:.65rem; padding:4px 3px; }
  .arena-history-wrap .table { min-width:280px; }
}
/* Reward line: stack victory/defeat onto separate centered lines.
   Active for very narrow phones and again in the 500–700 two-column band
   where each panel's column is too tight to fit both on one line. */
@media (max-width:350px), (min-width:500px) and (max-width:700px) {
  .arena-rewards { display:flex; flex-direction:column; align-items:center; gap:2px; }
  .arena-rewards .arena-reward-sep { display:none; }
  .arena-rewards .arena-reward-line { display:inline-block; text-align:center; }
}
/* Two-column layout: force both panels to fill the row height and pin both
   panels' bottom CTAs to the same baseline */
@media (min-width:501px) {
  .arena-main-grid > .panel {
    display:flex;
    flex-direction:column;
    height:100%;
    box-sizing:border-box;
    align-self:stretch;
  }
  .arena-main-grid > .panel > *:last-child { margin-top:auto; }
}
/* 501–710px: the "Join queue" button text barely fits — tighten padding so the energy icon stays on one line.
   Apply the SAME padding/font to "View leaders" so both buttons have identical height
   (otherwise their top edges sit on different rows even with margin-top:auto). */
@media (min-width:501px) and (max-width:710px) {
  #arena-btn, #arena-view-leaders, #duel-find-btn, #pet-view-leaders { padding:8px 12px !important; font-size:.85rem !important; white-space:nowrap; }
}
/* ≥711px: keep both buttons identical so their tops align */
@media (min-width:711px) {
  #arena-btn, #arena-view-leaders, #duel-find-btn, #pet-view-leaders { padding:8px 28px !important; font-size:.95rem !important; }
}
/* Single-column (<500px): the queue/fight button spans the full panel; the
   "View leaders" button is auto-width and centered, matching the fight button's padding */
@media (max-width:500px) {
  #arena-btn { width:100%; }
  #arena-view-leaders, #pet-view-leaders {
    width:auto; padding:8px 28px; font-size:.95rem;
    display:block; margin-left:auto; margin-right:auto;
  }
}
/* History table on very narrow screens — shrink so it fits, no horizontal scrollbar */
@media (max-width:330px) {
  .arena-history-wrap { overflow-x:hidden; }
  .arena-history-wrap .table { min-width:0; width:100%; }
  .arena-history-wrap .table th, .arena-history-wrap .table td { font-size:.58rem; padding:3px 2px; }
}

/* Training */
.training-grid { display:flex; flex-direction:row; justify-content:center; gap:12px; flex-wrap:nowrap; }
.train-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:16px 12px; text-align:center; flex:1; display:flex; flex-direction:column; align-items:stretch; }
.train-card-left { display:flex; flex-direction:column; align-items:center; }
.train-card-right { display:flex; flex-direction:column; align-items:center; flex:1; }
.train-stat-name { font-family:var(--font-title); color:var(--gold); font-size:1.05rem; margin-bottom:4px; white-space:nowrap; }
.train-stat-val { font-size:2.3rem; color:var(--text); margin:8px 0; }
.train-cost { color:var(--text-dim); font-size:.95rem; margin-bottom:8px; }
.train-bonus { margin-top:auto; margin-bottom:8px; }
.train-btn { width:100%; font-size:1rem; padding:8px; }

@media (max-width: 450px) {
  .training-grid { flex-direction:column; gap:8px; }
  .train-card { flex-direction:row; align-items:center; text-align:left; padding:10px 12px; gap:12px; flex:unset; width:100%; box-sizing:border-box; }
  .train-card-left { align-items:center; flex-shrink:0; width:72px; }
  .train-card-right { align-items:flex-start; flex:1; }
  .train-stat-val { font-size:1.6rem; margin:4px 0; }
  .train-cost { margin-bottom:4px; font-size:.88rem; }
  .train-btn { width:100%; padding:6px; font-size:.9rem; }
}

/* Equipment */
.equip-grid { display:grid; grid-template-columns:200px 1fr; gap:16px; }
.equip-slots { display:flex; flex-direction:column; gap:8px; }
.equip-slot { background:var(--bg-card); border:1px solid var(--border); border-radius:4px; padding:10px; display:flex; align-items:center; gap:10px; }
.slot-icon { font-size:1.4rem; }
.slot-name { color:var(--text-dim); font-size:.8rem; }
.slot-item { color:var(--text); font-size:.9rem; }

/* Equipment top bar */
.eq-topbar { display:flex; align-items:center; gap:12px; padding:8px 12px; background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; margin-bottom:10px; flex-shrink:0; flex-wrap:wrap; }
.eq-topbar-stats { display:flex; gap:12px; }
.eq-topbar-tabs  { margin-left:auto; display:flex; gap:6px; }
.eq-topbar-stats span { font-size:.9rem; }
.eq-topbar-tabs .btn  { padding:5px 14px; font-size:.85rem; }
@media (max-width:500px) {
  .eq-topbar { gap:8px; padding:6px 10px; }
  .eq-topbar-stats span { font-size:.8rem; }
  .eq-topbar-tabs .btn  { padding:4px 10px; font-size:.78rem; }
}
@media (max-width:350px) {
  .eq-topbar { gap:5px; padding:5px 8px; margin-bottom:6px; }
  .eq-topbar-stats { gap:8px; }
  .eq-topbar-stats span { font-size:.72rem; }
  .eq-topbar-tabs .btn  { padding:3px 8px; font-size:.72rem; }
}

/* Equipment shop layout */
.eq-shop-layout { display:grid; grid-template-columns:120px 1fr; gap:10px; flex:1; min-height:0; }
@media (max-width:400px) {
  .eq-shop-layout { grid-template-columns:90px 1fr; gap:6px; }
  .eq-shop-layout .sort-btn, .eq-shop-layout .filter-btn { font-size:.68rem !important; padding:2px 5px !important; }
}
/* Правая колонка магазина не должна переполняться */
.eq-shop-layout #shop-items { min-width:0; grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); }
.eq-shop-layout #shop-items .beast-card { padding:clamp(5px, 2vw, 14px); min-width:0; box-sizing:border-box; }

/* Equipment inventory tab */
.eq-layout { display:grid; grid-template-columns:1fr 190px; gap:12px; flex:1; min-height:0; overflow:hidden; }
.eq-inv-side { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.eq-inv-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-shrink:0; }
.eq-inv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:6px; overflow-y:auto; flex:1; align-content:start; }
.eq-inv-cell { border:2px solid var(--border); border-radius:6px; padding:7px 5px 6px; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; background:var(--bg-dark); }
.eq-inv-cell-icon { font-size:2.2rem; line-height:1; }
/* Fixed-height name slot so cards stay aligned even when a name wraps to a second line */
.eq-inv-cell-name { font-size:.85rem; line-height:1.2; min-height:calc(.85rem * 1.2 * 2); max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; }
.eq-inv-cell-stats { font-size:.95rem; color:var(--text); }
.eq-inv-cell-btn { width:100%; margin-top:auto; padding:4px 3px; font-size:.85rem; }
.eq-mannequin-side { display:flex; flex-direction:column; overflow:hidden; }
.eq-mannequin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.eq-mannequin-cell { aspect-ratio:1; border:2px solid var(--border); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px; position:relative; overflow:hidden; background:var(--bg-dark); }
/* Soft white glow around equipment icons */
.eq-mannequin-cell-icon img, .eq-inv-cell-icon img, .shop-item-icon img {
  filter: drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 3px rgba(255,255,255,.35));
}
.eq-mannequin-cell-icon { font-size:2rem; line-height:1; }
.eq-mannequin-cell-name { font-size:.78rem; color:var(--text-dim); text-align:center; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eq-mannequin-cell-stats { font-size:.92rem; color:var(--text); font-weight:600; }
@media (min-width:700px) {
  .eq-layout { grid-template-columns:1fr 280px; }
  /* Bigger gear icons on desktop — extra cell room allows it */
  .eq-mannequin-cell-icon { font-size:3.2rem; }
}
/* Tablet 600–700px: give the mannequin column ~1.2× more room and rebalance fonts */
@media (min-width:601px) and (max-width:700px) {
  .eq-layout { grid-template-columns:1fr 228px; }
  .eq-mannequin-cell-stats { font-size:.78rem; font-weight:500; }
  .eq-mannequin-cell-icon  { font-size:1.9rem; }
  .eq-mannequin-cell-name  { font-size:.7rem; }
}
/* ── Shop item cards ─────────────────────────────────────────────────── */
.shop-item { display:flex; flex-direction:column; padding:10px 10px 8px; }
.shop-item-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.shop-item-icon { font-size:2rem; line-height:1; flex-shrink:0; }
.shop-item-text { flex:1; min-width:0; }
/* Name: up to 2 lines, font-size adapts by viewport, slot fixed below.
   Fixed 2-line min-height keeps stats/buy aligned across cards even when names wrap. */
.shop-item-name { font-weight:bold; font-size:.95rem; line-height:1.2;
  min-height:calc(.95rem * 1.2 * 2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word; }
.shop-item-slot { font-size:.8rem; line-height:1.2; }
.shop-item-stats { font-size:.95rem; color:var(--text); font-weight:600; flex:1;
  min-height:1.2em; }
.shop-item-buy { margin-top:6px; }
.shop-buy-btn { width:100%; padding:5px; font-size:.92rem; }
.shop-item-owned { font-size:.85rem; color:#4c9; text-align:center; padding:4px; }
.shop-item-locked { font-size:.8rem; color:#f88; text-align:center; margin-top:3px; }

/* Shop name responsive sizing */
@media (min-width: 786px) {
  .shop-item-name { font-size:.85rem; min-height:calc(.85rem * 1.2 * 2); }
}
@media (min-width: 564px) and (max-width: 740px) {
  .shop-item-name { font-size:.7rem;  min-height:calc(.7rem  * 1.2 * 2); }
  .shop-item-slot { font-size:.65rem; }
  .shop-item-icon { font-size:1.7rem; }
}
@media (max-width: 360px) {
  .shop-item-name  { font-size:.68rem; min-height:calc(.68rem * 1.2 * 2); }
  .shop-item-slot  { font-size:.6rem; }
  .shop-item-stats { font-size:.78rem; }
  .shop-item-icon  { font-size:1.5rem; }
  .shop-buy-btn    { font-size:.78rem; padding:4px; }
}

/* Sort / filter buttons get bigger from 400px up */
@media (min-width: 400px) {
  .sort-btn, .filter-btn { font-size:.88rem !important; padding:5px 10px !important; }
}

/* Raid detail layout: stats on the left, rewards on the right at ≥600px */
@media (min-width:600px) {
  .raid-detail-grid { grid-template-columns:1fr 1fr !important; }
}

/* Phone-only: shrink the mannequin & inventory so they don't overflow narrow screens */
@media (max-width:600px) {
  .eq-mannequin-grid { gap:4px; }
  .eq-mannequin-cell { padding:2px; gap:1px; }
  .eq-mannequin-cell-icon { font-size:1.4rem; }
  .eq-mannequin-cell-name { font-size:.6rem; }
  .eq-mannequin-cell-stats { font-size:.68rem; font-weight:500; }
  .eq-inv-grid { grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); }
  .eq-inv-cell { padding:5px 3px 4px; }
  .eq-inv-cell-icon { font-size:1.7rem; }
  .eq-inv-cell-name { font-size:.7rem; min-height:calc(.7rem * 1.2 * 2); }
  .eq-inv-cell-stats { font-size:.74rem; }
  .eq-inv-cell-btn { padding:3px 2px; font-size:.7rem; }
}
@media (max-width:400px) {
  /* Стек: манекен сверху, инвентарь снизу. Манекен — КАК РАНЬШЕ (квадратные ячейки,
     без скролла и без наложений), но его зона ~в 1.7 раза меньше: max-width 290→170.
     Так он не выдавливает инвентарь — тот (строка 1fr) получает остальную высоту и
     скроллится внутри себя. */
  .eq-layout { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .eq-mannequin-side { order:-1; width:100%; max-width:170px; margin-left:auto; margin-right:auto; }
  /* Меньше ячейки — меньше иконки/текст */
  .eq-mannequin-cell-icon  { font-size:1.2rem; }
  .eq-mannequin-cell-name  { font-size:.6rem; }
  .eq-mannequin-cell-stats { font-size:.65rem; }
}
/* Узко (≤400px) И низко (≤600px): убираем подписи слотов и статы в ячейках манекена —
   оставляем только иконки, чтобы манекен был совсем компактным и не теснил инвентарь
   на коротких экранах. Суммарные атака/защита всё равно есть в шапке экрана. */
@media (max-width:400px) and (max-height:600px) {
  .eq-mannequin-cell-name,
  .eq-mannequin-cell-stats { display:none; }
}
/* Узко (≤380px): в инвентаре скрываем НАЗВАНИЯ предметов — остаются иконка, статы и
   кнопка «Надеть». На узких экранах важнее, чтобы карточки не разъезжались. */
@media (max-width:380px) {
  .eq-inv-cell-name { display:none; }
}
.inv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
.inv-item { background:var(--bg-card); border:1px solid var(--border); border-radius:4px; padding:10px; cursor:pointer; transition:.2s; }
.inv-item:hover { border-color:var(--gold); }
.item-name { font-size:.9rem; color:var(--text); margin-bottom:4px; }
.item-stats { font-size:.75rem; color:var(--text-dim); }

/* Leaderboard */
.rank-1 td:first-child { color:#ffd700; font-weight:bold; }
.rank-2 td:first-child { color:#c0c0c0; }
.rank-3 td:first-child { color:#cd7f32; }
.lb-me-row { background:rgba(240,180,40,0.08); outline:1px solid rgba(240,180,40,0.3); }
.lb-me-sep td { padding:0 !important; border:none !important; height:1px !important; background:var(--border) !important; }

/* Chat */
.chat-container { display:flex; flex-direction:column; flex:1; min-height:0; }
.chat-messages { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; background:var(--bg-dark); border:1px solid var(--border); border-radius:4px; padding:12px; margin-bottom:10px; }
.chat-msg { margin-bottom:6px; line-height:1.5; overflow-wrap:anywhere; min-width:0; }
/* Имя (styled) не ломаем по буквам — держим целым. Ломается только текст сообщения. */
.chat-msg .nm, .chat-username-btn { word-break:keep-all; white-space:normal; }
.chat-username { color:var(--gold); font-weight:600; }
/* Кликабельное имя игрока — ОДНО оформление на всю игру (чат, отряд, рапорты).
   Раньше в списках имя рисовалось голым styledNameHtml: без стиля оно выходило белым
   и никуда не вело, хотя в чате и «Друзьях» имя золотое и открывает профиль. */
.chat-username-btn, .player-name-btn { color:var(--gold); font-weight:600; background:none; border:none; padding:0; cursor:pointer; font-size:inherit; font-family:inherit; text-align:left; }
.chat-username-btn:hover, .player-name-btn:hover { text-decoration:underline; }
.clickable-row { cursor:pointer; }
.clickable-row:hover td { background:rgba(201,162,39,0.07); }
.chat-text { color:var(--text); word-break:break-all; overflow-wrap:anywhere; }
.chat-input-row { display:flex; gap:8px; }
/* Кнопка смайликов НЕ должна задавать высоту строки: её задаёт поле ввода, а кнопка
   растягивается под него (align-items:stretch у ряда). Смайлик занимает всю высоту кнопки —
   так он максимально крупный, но строка ввода остаётся ровно такой же, как была.
   Раньше картинку задавали фикс.пикселями, и стоило ей стать больше поля — она тянула
   вверх весь ряд: и кнопку, и поле, и «Отправить». */
.chat-smile-btn {
  flex:0 0 auto; width:44px; padding:0; cursor:pointer; position:relative;
  background:none; border:1px solid var(--border); border-radius:8px;
}
/* Картинка АБСОЛЮТНАЯ: так она не участвует в расчёте высоты кнопки, а значит физически
   не может раздуть строку ввода. Кнопка растягивается по высоте поля (align-items:stretch
   у ряда), а смайлик заполняет её целиком — то есть он максимально крупный из возможных
   БЕЗ изменения вёрстки. */
/* inset:0 + margin:auto — тогда обе оси центрируются честно. Отступ от краёв даём через
   max-*, а НЕ через inset: иначе max-height:100% (считается от полной высоты кнопки)
   оказывается больше урезанного inset'ом места, вёрстка переполняется, низ отбрасывается —
   и картинка съезжает вниз вместо центра. */
.chat-smile-btn img {
  position:absolute; inset:0; margin:auto;
  max-width:calc(100% - 2px); max-height:calc(100% - 2px);
  width:auto; height:auto; object-fit:contain;
}
.chat-input { flex:1; padding:10px 14px; background:var(--bg-dark); border:1px solid var(--border); border-radius:4px; color:var(--text); font-family:var(--font-body); font-size:1rem; }
.chat-input:focus { outline:none; border-color:var(--gold); }
/* contenteditable-вариант поля ввода: смайлы видны картинками прямо при наборе */
div.chat-input { white-space:nowrap; overflow-x:auto; overflow-y:hidden; line-height:1.4; min-height:1.4em; cursor:text; }
div.chat-input::-webkit-scrollbar { height:0; width:0; }
div.chat-input:empty::before { content:attr(data-placeholder); color:var(--text-dim); pointer-events:none; }
div.chat-input img { vertical-align:middle; }
.chat-rooms { display:flex; gap:6px; margin-bottom:10px; }
/* Вкладки топа — САМОСТОЯТЕЛЬНЫЙ блок, ничего общего с чатом: у него своя логика переноса,
   и цеплять её к контейнеру комнат чата незачем.
   Раскладка ровно двух видов: один ряд из шести — или два ряда строго по три. Промежуточного
   «4+2» не бывает никогда (выглядит криво). Порог 464px — не с потолка: замер показал, что
   шесть кнопок помещаются в ряд только с 465px, а ниже они вылезают за экран. */
.lb-tabs { display:flex; flex-wrap:nowrap; gap:6px; margin-bottom:10px; }
@media (max-width:464px) {
  .lb-tabs { flex-wrap:wrap; gap:4px; }
  .lb-tabs .room-btn {
    flex:0 0 calc((100% - 8px) / 3); max-width:calc((100% - 8px) / 3);
    padding:4px 2px; font-size:.72rem; text-align:center;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}
.room-btn { padding:4px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:3px; color:var(--text-dim); font-size:.85rem; cursor:pointer; }
.room-btn.active { border-color:var(--gold); color:var(--gold); }

/* Stats */
.stats-big { font-size:2rem; color:var(--gold); font-family:var(--font-title); }

/* Bestiary */
.beast-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.beast-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:14px; }
.beast-name { font-family:var(--font-title); color:var(--gold); font-size:1rem; margin-bottom:6px; }
.beast-stats { font-size:.8rem; color:var(--text-dim); line-height:1.8; }

/* Карточки локаций рейда на узких экранах (≈1 колонка): убираем фиксированную
   высоту боссовой карточки — при малом контенте она давала огромные вертикальные
   пустоты. !important перебивает inline height/aspect-ratio, заданные в JS. */
@media (max-width: 434px) {
  #loc-grid .loc-card { height:auto !important; aspect-ratio:auto !important; padding:12px !important; }
}

/* Location */
@media (max-width: 500px) {
  .loc-enemies .beast-card { padding:8px 10px; }
  .loc-enemies .beast-name { font-size:.82rem; }
  .loc-enemies .beast-stats { font-size:.73rem; line-height:1.6; }
  .loc-enemies .panel-title { font-size:.82rem; }
  .loc-enemies .enemy-icon { font-size:1.4rem !important; }
}

@media (max-width: 350px) {
  .loc-enemies .beast-name { font-size:.8rem; }
  .loc-enemies .beast-card { padding:6px 8px; }
  .loc-enemies .enemy-icon { font-size:1.1rem !important; }
}

@media (max-width: 310px) {
  /* Hide enemy name; center everything horizontally — too cramped to fit name + stats inline */
  .loc-enemies .beast-name { display:none; }
  .loc-enemies .beast-card { text-align:center; }
  /* The header row has the icon + an empty name wrapper that takes flex:1;
     hide the empty wrapper so the icon actually centers. */
  .loc-enemies .beast-card > div:first-child { justify-content:center; }
  .loc-enemies .beast-card > div:first-child > div { display:none; }
  .loc-enemies .beast-stats { justify-content:center; }
}

@media (max-width: 300px) {
  .loc-enemies .beast-stats { font-size:.6rem; letter-spacing:-.2px; }
}

@media (max-width: 400px) {
  .loc-left .panel { padding:8px 10px; }
  .loc-left .panel-title { font-size:.82rem; }
  .loc-left .btn { font-size:.78rem; padding:5px 8px; }
  .loc-left p { font-size:.82rem; }
}

/* Daily */
.daily-bonus-panel { padding:12px 14px; }
.daily-quest { padding:8px 12px; }
.daily-row { display:flex; align-items:center; gap:8px; }
.daily-dot { font-size:.8rem; flex-shrink:0; }
.daily-desc { flex:1; font-size:.9rem; line-height:1.35; }
.daily-right-col { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:3px; }
.daily-bar-row { display:flex; align-items:center; gap:6px; }
.daily-bar-wrap { width:70px; height:6px; background:var(--bg-dark); border-radius:3px; overflow:hidden; border:1px solid var(--border); flex-shrink:0; }
.daily-bar-fill { height:100%; border-radius:3px; transition:width .3s; }
.daily-prog { font-size:.75rem; color:var(--text-dim); white-space:nowrap; }
.daily-reward-row { font-size:.75rem; color:var(--gold); }
.daily-done { font-size:.9rem; color:var(--green-light); }

@media (max-width: 500px) {
  .daily-quest { padding:6px 8px; }
  .daily-desc { font-size:.78rem; }
  .daily-bar-wrap { width:44px; height:5px; }
  .daily-prog { font-size:.68rem; }
  .daily-reward-row { font-size:.68rem; }
  .daily-row { gap:5px; }
  .daily-bonus-panel { padding:10px; }
}

/* Very narrow phones: shrink bonus-claim text so the gold icon stays on one line */
@media (max-width:325px) {
  .daily-bonus-claim-text { font-size:.82rem !important; }
}

/* Guild war history row — keeps "My name SCORE Opp name DD.MM" on one line at any width */
.war-hist-row .war-hist-name  { font-size:.85rem; min-width:0; }
.war-hist-row .war-hist-score { font-size:.95rem; }
.war-hist-row .war-hist-date  { font-size:.72rem; }
@media (max-width:500px) {
  .war-hist-row .war-hist-name  { font-size:.72rem; }
  .war-hist-row .war-hist-score { font-size:.82rem; }
  .war-hist-row .war-hist-date  { font-size:.66rem; }
}
@media (max-width:380px) {
  .war-hist-row { padding:5px 6px !important; gap:4px !important; }
  .war-hist-row .war-hist-name  { font-size:.65rem; }
  .war-hist-row .war-hist-score { font-size:.75rem; }
  .war-hist-row .war-hist-date  { font-size:.6rem; }
}
@media (max-width:330px) {
  .war-hist-row .war-hist-name  { font-size:.58rem; }
  .war-hist-row .war-hist-score { font-size:.7rem; }
  .war-hist-row .war-hist-date  { font-size:.55rem; }
}

/* Gold tab — bonus plates + pack rows */
@media (max-width:520px) {
  .gold-bonus-row { grid-template-columns:1fr !important; }
}
@media (max-width:400px) {
  .gold-pack-row { padding:10px 12px !important; gap:10px !important; }
  .gold-pack-row .gold-pack-icon { width:52px !important; height:52px !important; }
  .gold-pack-row .gold-pack-icon img { width:46px !important; height:46px !important; }
  .gold-pack-row .gold-pack-name { font-size:.92rem !important; }
  .gold-pack-row .gold-pack-rewards { font-size:.82rem !important; }
  .gold-pack-row .gold-pack-action .btn { padding:8px 12px !important; font-size:.78rem !important; }
}
/* Низкая высота viewport (ландшафт телефона, маленький iframe площадки) —
   ужимаем UI чтобы помещалось без больших скроллов. */
@media (max-height:600px) {
  /* Ресурсы — паки золота/серебра/энергии */
  .gold-pack-row { padding:6px 10px !important; gap:10px !important; }
  .gold-pack-row .gold-pack-icon { width:42px !important; height:42px !important; }
  .gold-pack-row .gold-pack-icon img { width:36px !important; height:36px !important; }
  .gold-pack-row .gold-pack-name { font-size:.9rem !important; line-height:1.05 !important; }
  .gold-pack-row .gold-pack-sub { font-size:.7rem !important; margin-top:1px !important; }
  .gold-pack-row .gold-pack-rewards { font-size:.78rem !important; }
  .gold-pack-row .gold-pack-action .btn { padding:5px 10px !important; font-size:.76rem !important; }
  .gold-bonus-plate { padding:8px 12px !important; gap:4px !important; }
  .gold-bonus-plate img { width:1.6rem !important; height:1.6rem !important; }

  /* Бестиарий — сложенный header карточки монстра */
  .beast-header { padding:5px 10px !important; gap:6px !important; }
  .beast-header img { width:1.4em !important; height:1.4em !important; }
  .beast-body { padding:4px 10px 8px !important; padding-top:6px !important; }
  .beast-card { padding:8px 10px !important; }
  .beast-toggle { font-size:.65rem !important; }

  /* Топ игроков — компактные таблицы */
  .lb-panel { padding:5px !important; }
  .lb-panel .table th { font-size:.74rem !important; padding:4px 6px !important; }
  .lb-panel .table td { font-size:.82rem !important; padding:5px 6px !important; line-height:1.3 !important; }
  .lb-panel .table img { width:1em !important; height:1em !important; }

  /* Чат — сообщения и поле ввода */
  .chat-messages { padding:6px 8px !important; margin-bottom:6px !important; }
  .chat-msg { margin-bottom:3px !important; line-height:1.3 !important; font-size:.85rem !important; }
  .chat-input { padding:5px 10px !important; font-size:.9rem !important; }
  .chat-input-row { gap:5px !important; }
  .chat-rooms .room-btn { padding:4px 8px !important; font-size:.78rem !important; }

  /* Ежедневные задания — сжимаем плашки бонуса и квестов.
     Сужаем по id чтобы не задеть локации/тех у кого тот же класс daily-tab-btn. */
  #tab-quests, #tab-achievements { padding:4px 0 !important; font-size:.8rem !important; }
  .daily-bonus-panel { padding:6px 10px !important; }
  .daily-bonus-claim-text { font-size:.85rem !important; line-height:1.2 !important; }
  .daily-bonus-panel img { width:1.4rem !important; height:1.4rem !important; }
  .daily-bonus-panel > div:first-child { margin-bottom:4px !important; gap:6px !important; }

  .daily-quest { padding:5px 9px !important; }
  .daily-desc { font-size:.8rem !important; line-height:1.2 !important; }
  .daily-row { gap:6px !important; }
  .daily-bar-wrap { width:60px !important; height:5px !important; }
  .daily-prog { font-size:.7rem !important; }
  .daily-right-col { gap:2px !important; }

  /* Достижения — категории и карточки */
  .collapsible-panel { padding:5px 10px !important; }
  .collapsible-header .panel-title { font-size:.85rem !important; gap:6px !important; }
  .ach-card { padding:5px 10px !important; gap:8px !important; }
  .ach-card > div:first-child { width:36px !important; height:36px !important; }
  .ach-card > div:first-child img { width:36px !important; height:36px !important; }
  .ach-card > div:nth-child(2) > div:first-child { font-size:.82rem !important; line-height:1.1 !important; }
  .ach-card > div:nth-child(2) > div:nth-child(2) { font-size:.7rem !important; margin-top:1px !important; }
  .ach-card .btn { padding:3px 8px !important; font-size:.74rem !important; }

  /* Арена — главный экран и история */
  .arena-main-grid { gap:6px !important; }
  .arena-main-grid .panel { padding:8px 10px !important; }
  .arena-main-grid .panel-title { font-size:.82rem !important; margin-bottom:4px !important; }
  /* Стат-блоки «победы / поражения / винрейт» */
  .arena-main-grid .panel div[style*="font-size:1.4rem"] { font-size:1.05rem !important; }
  .arena-main-grid .panel div[style*="padding:4px 0"] { padding:2px 0 !important; }
  /* Иконка лиги и название */
  .arena-main-grid .panel img[style*="width:2rem"] { width:1.6rem !important; height:1.6rem !important; }
  .arena-rewards { font-size:.74rem !important; margin-bottom:4px !important; }
  #arena-btn, #arena-view-leaders { padding:6px 16px !important; font-size:.85rem !important; }
  /* История боёв */
  .arena-history-wrap .table th { font-size:.7rem !important; padding:4px 6px !important; }
  .arena-history-wrap .table td { font-size:.76rem !important; padding:4px 6px !important; line-height:1.2 !important; }

  /* Рейды — список и карточки. boss-grid это id раздела рейдов
     (внутри одного и того же класса beast-grid, чтобы не задеть бестиарий). */
  #boss-grid { gap:6px !important; }
  #boss-grid .beast-card { padding:8px 10px !important; }
  /* Каждый внутренний блок раздела имеет inline margin-bottom — ужимаем массово */
  #boss-grid .beast-card > div { margin-bottom:4px !important; }
  #boss-grid .beast-card > div:last-child { margin-bottom:0 !important; }
  /* Внутренние под-панели с inline padding */
  #boss-grid .beast-card div[style*="padding:8px"] { padding:5px 7px !important; }
  /* Уменьшаем заголовок имени босса и иконку */
  #boss-grid .beast-card span[style*="font-size:2.2rem"] { font-size:1.6rem !important; }
  #boss-grid .beast-card span[style*="font-size:2.2rem"] img { width:1.6em !important; height:1.6em !important; }

  /* Колизей — ужимаем интервалы между панелями (шрифты сохраняем — всё читается) */
  .colo-panel { margin-bottom:3px !important; padding:5px 10px !important; }
  .colo-panel > div:first-child { margin-bottom:3px !important; }

  /* Локации — карточки врагов в текущей локации */
  .loc-enemies .beast-card { padding:5px 8px !important; }
  .loc-enemies .beast-card > div[style*="margin-bottom:6px"] { margin-bottom:3px !important; }
  .loc-enemies .enemy-icon { font-size:1.4rem !important; }
  .loc-enemies .beast-name { font-size:.82rem !important; line-height:1.1 !important; }
  .loc-enemies .beast-stats { font-size:.74rem !important; line-height:1.3 !important; }
  .loc-enemies .beast-stats[style*="margin-top:2px"] { margin-top:1px !important; }

  /* Снаряжение — манекен (3×3 ячеек) + сетка инвентаря */
  .eq-topbar { padding:4px 8px !important; margin-bottom:4px !important; gap:6px !important; }
  .eq-topbar-stats span { font-size:.78rem !important; }
  .eq-topbar-tabs .btn { padding:3px 8px !important; font-size:.75rem !important; }
  /* Манекен: ломаем aspect-ratio:1 чтобы ячейки стали шире чем выше */
  .eq-mannequin-grid { gap:3px !important; overflow-y:auto !important; min-height:0 !important; flex:1 1 auto !important; }
  .eq-mannequin-cell { aspect-ratio:1.4 !important; padding:2px !important; gap:1px !important; }
  .eq-mannequin-cell-icon { font-size:1.4rem !important; }
  .eq-mannequin-cell-name { font-size:.6rem !important; }
  .eq-mannequin-cell-stats { font-size:.7rem !important; font-weight:500 !important; }
  /* Кнопка «Авто» должна оставаться видимой даже если сетка манекена скроллится */
  #auto-equip-btn { flex-shrink:0 !important; margin-top:4px !important; }

  /* Экран боя — умеренная компрессия (не слишком агрессивная) */
  .combat-screen { gap:8px !important; }
  .combat-header { padding:5px 0 !important; }
  .combat-timer { font-size:1.4rem !important; }
  .ap-badge { padding:2px 9px !important; }
  /* Арена на мобиле: портреты/HP компактнее, пол снизу */
  .combat-arena { padding:8px 6px 60px !important; gap:26px !important; min-height:210px !important; grid-template-columns:1fr 1fr !important; }
  .cb-fighter { gap:5px !important; }
  .cb-portrait { height:84px !important; }
  .cb-portrait img { width:80px !important; max-height:84px !important; }
  .cb-portrait.you img { margin-bottom:6px !important; }
  .cb-portrait .cb-emoji { font-size:3.4rem !important; }
  .cb-hp { max-width:170px !important; height:15px !important; }
  .cb-hp-text { font-size:.66rem !important; }
  .cb-name { font-size:.76rem !important; padding:2px 7px !important; }
  .cb-vs { font-size:1.05rem !important; }
  /* Лог боя — короче, но не слишком */
  .combat-log { min-height:50px !important; max-height:84px !important; padding:6px 10px !important; font-size:.8rem !important; line-height:1.55 !important; }
  /* Кнопки действий */
  .combat-actions { gap:6px !important; }
  .combat-action-wrap { gap:3px !important; }
  .combat-action-btn { padding:7px 4px !important; font-size:.78rem !important; }
  .combat-action-desc { font-size:.66rem !important; line-height:1.2 !important; }
  /* Финальный экран боя — лог максимум 3 строки, дальше вертикальный скролл.
     Высота рассчитана: 3 × (.78rem × 1.55 line-height) + 2 × 6 padding ≈ 70px. */
  .combat-end-log { padding:6px 12px !important; max-height:70px !important; font-size:.78rem !important; line-height:1.55 !important; margin-top:8px !important; overflow-y:auto !important; }

  /* Гильдия — питомец гильдии. Меняем layout с вертикального на двух-колоночный
     grid: иконка слева, инфа справа. Так все характеристики видны на широких,
     но низких экранах без скролла. */
  #guild-pet-body { padding:6px 8px !important; }
  #guild-pet-body > div {
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    column-gap:10px !important;
    row-gap:3px !important;
    align-items:center !important;
  }
  /* Иконка питомца — левая колонка, растягивается на все строки справа */
  #guild-pet-body > div > img {
    width:64px !important; height:64px !important;
    grid-row:1 / span 5 !important;
    align-self:center !important;
  }
  /* Имя — справа, верх */
  #guild-pet-body > div > div:nth-child(2) { font-size:.85rem !important; text-align:left !important; }
  /* XP-блок — заметно сжимаем */
  #guild-pet-body > div > div:nth-child(3) > div:first-child { margin-bottom:1px !important; }
  /* Статы — компактный ряд */
  #guild-pet-body > div > div:nth-child(4) { font-size:.82rem !important; gap:8px !important; justify-content:flex-start !important; }
  /* Мой вклад */
  #guild-pet-body > div > div:nth-child(5) { font-size:.65rem !important; text-align:left !important; }
  /* Кнопка/таймер */
  #guild-pet-body > div > div:nth-child(6) { margin-top:2px !important; }
  #guild-pet-feed-btn { padding:4px !important; font-size:.78rem !important; }

  /* Гильдия — состояние «без гильдии» (поиск + создание) */
  #create-collapsed,
  #create-expanded,
  #guild-find-panel { padding:8px 12px !important; margin-bottom:6px !important; }
  #create-collapsed p { margin:0 0 6px !important; font-size:.85rem !important; line-height:1.35 !important; }
  #create-collapsed .btn { padding:5px 12px !important; font-size:.85rem !important; }
  /* Форма создания */
  #create-expanded .panel-title { margin-bottom:4px !important; font-size:.9rem !important; }
  #create-expanded .input-field { padding:4px 10px !important; font-size:.85rem !important; margin-bottom:2px !important; }
  #create-expanded textarea.input-field { min-height:44px !important; }
  #create-expanded label { font-size:.74rem !important; }
  #create-expanded > div[style*="margin-bottom:8px"],
  #create-expanded > div[style*="margin-bottom:12px"] { margin-bottom:6px !important; }
  /* Выбор питомца гильдии — компактные карточки */
  #guild-pet-picker { gap:5px !important; }
  .guild-pet-pick { padding:4px !important; gap:2px !important; }
  .guild-pet-pick img { width:36px !important; height:36px !important; }
  .guild-pet-pick > div:nth-child(2) { font-size:.7rem !important; line-height:1.05 !important; }
  .guild-pet-pick > div:nth-child(3) { font-size:.6rem !important; gap:3px !important; }
  .guild-pet-pick > div:nth-child(4) { font-size:.55rem !important; line-height:1 !important; }
  /* Список гильдий — таблица */
  #guild-find-panel .panel-title { margin-bottom:4px !important; font-size:.9rem !important; }
  #guild-find-panel #guild-search { margin-bottom:6px !important; padding:4px 10px !important; font-size:.85rem !important; }
  .guild-list-table th { font-size:.7rem !important; padding:3px 4px !important; }
  .guild-list-table td { font-size:.76rem !important; padding:3px 4px !important; line-height:1.2 !important; }
  .guild-list-table .btn { padding:3px 7px !important; font-size:.72rem !important; }

  /* Магазин снаряжения (игрока + питомцев) — компактные фильтры и карточки */
  .eq-shop-layout { gap:6px !important; grid-template-columns:90px 1fr !important; }
  .eq-shop-layout .sort-btn,
  .eq-shop-layout .filter-btn { font-size:.66rem !important; padding:2px 5px !important; }
  .eq-shop-layout #shop-items { gap:5px !important; grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)) !important; }
  .eq-shop-layout #shop-items .beast-card { padding:5px 6px !important; }
  /* Карточка предмета */
  .shop-item { padding:4px 6px 5px !important; }
  .shop-item-head { gap:5px !important; margin-bottom:3px !important; }
  .shop-item-icon { font-size:1.4rem !important; }
  .shop-item-name { font-size:.74rem !important; line-height:1.15 !important; min-height:calc(.74rem * 1.15 * 1) !important; -webkit-line-clamp:1 !important; }
  .shop-item-slot { font-size:.62rem !important; }
  .shop-item-stats { font-size:.76rem !important; min-height:1em !important; margin-bottom:2px !important; }
  .shop-item-buy { margin-top:3px !important; }
  .shop-buy-btn { padding:3px !important; font-size:.74rem !important; }
  .shop-item-owned { font-size:.7rem !important; padding:2px !important; }
  .shop-item-locked { font-size:.65rem !important; margin-top:1px !important; }
  /* Инвентарь — компактные ячейки, одна строка имени вместо двух */
  .eq-inv-grid { grid-template-columns:repeat(auto-fill,minmax(68px,1fr)) !important; gap:4px !important; }
  .eq-inv-cell { padding:3px 3px 4px !important; gap:1px !important; }
  .eq-inv-cell-icon { font-size:1.5rem !important; }
  .eq-inv-cell-name { font-size:.72rem !important; line-height:1.15 !important; min-height:calc(.72rem * 1.15 * 1) !important; -webkit-line-clamp:1 !important; }
  .eq-inv-cell-stats { font-size:.78rem !important; }
  .eq-inv-cell-btn { padding:2px !important; font-size:.7rem !important; }

  /* Сюжет — ужимаем зону противника чтобы кнопка боя точно влазила */
  .story-panel > div:first-child { margin-bottom:6px !important; font-size:1rem !important; }
  .story-intro-wrap { margin-bottom:6px !important; }
  .story-enemy-box { padding:6px 8px !important; margin-bottom:6px !important; }
  .story-enemy-label { margin-bottom:4px !important; font-size:.7rem !important; }
  .story-enemy-row { gap:8px !important; margin-bottom:5px !important; }
  .story-enemy-icon { font-size:1.7rem !important; }
  .story-enemy-icon img { width:1.7em !important; height:1.7em !important; }
  .story-enemy-name { font-size:.88rem !important; line-height:1.1 !important; }
  .story-enemy-stats { font-size:.7rem !important; margin-top:1px !important; }
  .story-enemy-reward { padding-top:5px !important; gap:10px !important; font-size:.74rem !important; }
  .story-enemy-reward span { font-size:.74rem !important; }
  #btn-fight { padding:6px !important; font-size:.9rem !important; }
}

/* News */
.news-item { background:var(--bg-card); border:1px solid var(--gold); border-radius:6px; padding:16px; margin-bottom:10px; }
.news-title { font-family:var(--font-title); color:var(--gold); font-size:1.1rem; margin-bottom:6px; }
.news-content { color:var(--text); line-height:1.7; }
.news-date { color:var(--text-dim); font-size:.8rem; margin-top:8px; }
.news-type-announcement .news-title::before { content:'📢 '; }
.news-type-event .news-title::before { content:''; display:inline-block; width:1em; height:1em; background:url(/assets/icons/equipement_icons/weapon.webp) center/contain no-repeat; vertical-align:middle; margin-right:4px; }
.news-type-update .news-title::before { content:'🔔 '; }

@media (max-width: 500px) {
  .news-item { padding:10px; margin-bottom:7px; }
  .news-title { font-size:.95rem; margin-bottom:4px; }
  .news-content { font-size:.88rem; line-height:1.55; }
  .news-date { font-size:.73rem; margin-top:6px; }
  .chat-messages { padding:8px; }
  .chat-msg { font-size:.88rem; margin-bottom:4px; }
  .chat-rooms { gap:4px; }
  .room-btn { padding:3px 8px; font-size:.8rem; }
}

@media (max-width: 330px) {
  .chat-input { padding:6px 8px; font-size:.85rem; }
  .chat-input-row { gap:5px; }
  .chat-input-row .btn { padding:6px 10px; font-size:.85rem; }
}

/* Portal */
.world-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:16px; }
.world-card.locked { opacity:.6; }
.world-name { font-family:var(--font-title); color:var(--gold); font-size:1rem; margin-bottom:6px; }
.world-desc { font-size:.85rem; color:var(--text-dim); margin-bottom:10px; line-height:1.6; }

/* Bestiary */
.bestiary-grid { display:grid; grid-template-columns:200px 1fr; gap:10px; flex:1; min-height:0; }
.beast-header { display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; user-select:none; }
.beast-header:hover { background:rgba(255,255,255,0.03); border-radius:5px; }
.beast-body { padding:0 14px 12px; border-top:1px solid var(--border); padding-top:10px; }
.beast-toggle { color:var(--text-dim); font-size:.72rem; flex-shrink:0; margin-left:4px; }

@media (max-width: 530px) {
  .bestiary-grid { grid-template-columns:130px 1fr; gap:7px; }
  .bestiary-loc-label { font-size:.74rem !important; }
  .bestiary-loc-count { font-size:.64rem !important; }
  .bestiary-loc-icon { font-size:.95rem !important; }
  .bestiary-loc-btn { padding:6px 7px !important; }
  .beast-card { padding:10px; }
  .beast-emoji { font-size:1.7rem !important; }
}

@media (max-width: 420px) and (min-width:401px) {
  .bestiary-grid { grid-template-columns:100px 1fr; gap:5px; }
  .bestiary-loc-label { font-size:.66rem !important; }
  .bestiary-loc-icon { font-size:.85rem !important; }
  .bestiary-loc-btn { padding:5px 6px !important; gap:5px !important; }
  .beast-card { padding:8px; }
  .beast-name { font-size:.85rem; }
  .beast-emoji { font-size:1.4rem !important; }
  .beast-stats { font-size:.75rem; }
}

/* Narrow phones: flip the locations sidebar into a horizontal top nav (like Pets tabs) */
@media (max-width: 400px) {
  .bestiary-grid {
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    gap:6px;
  }
  .bestiary-grid > div:first-child {
    flex-direction:row !important;
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(60px, 1fr));
    gap:4px !important;
    overflow:visible !important;
  }
  .bestiary-loc-btn { padding:6px 4px !important; gap:4px !important; flex-direction:column !important; text-align:center !important; }
  .bestiary-loc-icon { font-size:1rem !important; }
  .bestiary-loc-icon img { width:1.4em !important; height:1.4em !important; }
  .bestiary-loc-label { font-size:.62rem !important; line-height:1.1; }
  .bestiary-loc-count { display:none !important; }
  .beast-card { padding:8px; }
  .beast-name { font-size:.85rem; }
  .beast-emoji { font-size:1.4rem !important; }
  .beast-stats { font-size:.75rem; }
}

@media (max-width: 350px) {
  .beast-name { font-size:.75rem; }
  .beast-emoji { font-size:1.1rem !important; }
  .beast-stats { font-size:.68rem; }
  .beast-stat-line { white-space:nowrap; }
}

/* Stats */
.stats-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  grid-template-areas:
    "season  badges"
    "char    alltime";
  gap:10px;
  align-items:stretch;
  min-width:0;
}
.stats-grid > .panel { min-width:0; overflow:hidden; }
.stats-season  { grid-area:season; }
.stats-badges  { grid-area:badges; }
.stats-char    { grid-area:char; }
.stats-alltime { grid-area:alltime; }
.stats-section .stat-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px; }
/* Combat-stats row (one row with 3 inline icon+number groups) needs full width, no ellipsis. */
.stats-section .stat-row .stats-combat-value { max-width:none; overflow:visible; white-space:nowrap; text-overflow:clip; }

/* Make Season/All-time stat-cell grids fill the panel vertically with equal-height rows */
.stats-season, .stats-alltime { display:flex; flex-direction:column; }
.stats-season > div:last-child,
.stats-alltime > div:last-child { flex:1; grid-auto-rows:1fr; }

/* 531–700px: tablet — combat stats row wraps icons under the label so HP isn't clipped */
@media (min-width:531px) and (max-width:700px) {
  .stats-section .stats-combat-row {
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .stats-section .stats-combat-value { gap:8px; }
}
/* Single-column layout below 600px — order: badges → season → alltime → char */
@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "badges"
      "season"
      "alltime"
      "char";
  }
  .stats-section .stat-value { max-width:55vw; }
}

/* Very narrow phones: tighter padding/font so rows don't overflow horizontally */
@media (max-width: 340px) {
  .stats-grid > .panel { padding:8px 6px !important; }
  .stats-grid .stat-row { padding:2px 0 !important; font-size:.74rem; gap:4px; }
  .stats-grid .stat-label { font-size:.74rem; }
  .stats-grid .stat-value { font-size:.78rem; max-width:50vw; }
  .stats-grid .stats-big { font-size:1.05rem !important; }
  .stats-grid .panel-title { font-size:.85rem; }
  .stats-grid .stat-row .stat-value span.text-dim { font-size:.62rem !important; }
  /* Stat-cell grids drop to 2 columns to keep numbers readable on tiny screens */
  .stats-season > div:last-child,
  .stats-alltime > div:last-child { grid-template-columns:repeat(2, 1fr) !important; }
}

/* ── Guild list table ────────────────────────────────────── */
@media (min-width:601px) {
  /* Bigger trophy/members icons in the header on desktop/tablet */
  .guild-list-table th img { width:2em !important; height:2em !important; }
}
@media (max-width:600px) {
  .guild-list-table { font-size:.74rem; }
  .guild-list-table th, .guild-list-table td { padding:5px 4px; }
  .guild-list-table td:nth-child(2) { max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:400px) {
  .guild-list-table { font-size:.68rem; }
  .guild-list-table th, .guild-list-table td { padding:4px 3px; }
  .guild-list-table td:nth-child(2) { max-width:70px; }
}
/* Very narrow phones: shrink everything so the "Join" button still fits */
@media (max-width:330px) {
  .guild-list-table { font-size:.58rem; }
  .guild-list-table th, .guild-list-table td { padding:3px 2px; }
  .guild-list-table td:nth-child(2) { max-width:55px; }
  /* Header icons sit on a tighter row */
  .guild-list-table th img { width:1em !important; height:1em !important; }
  /* "Join" button — minimal padding/font to fit */
  .guild-list-table .btn { padding:3px 5px !important; font-size:.6rem !important; }
}

/* ── Guild base ───────────────────────────────────────────── */
.guild-header { background:var(--bg-card); border:1px solid var(--border-gold); border-radius:6px; padding:20px; margin-bottom:16px; }
.guild-name { font-family:var(--font-title); font-size:1.8rem; color:var(--gold); }
.guild-tag { color:var(--text-dim); font-size:.9rem; margin-left:8px; }
.member-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }
.member-role { padding:2px 8px; border-radius:3px; font-size:.75rem; }
.member-role.leader { background:rgba(201,162,39,0.2); color:var(--gold); }
.member-role.member { background:var(--bg-dark); color:var(--text-dim); }

/* ── Guild grid — 3 columns, info / pet / missions / right(chat-or-members) ── */
.guild-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "info  missions  right"
    "pet   missions  right";
  grid-template-rows: auto 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.guild-info-panel     { grid-area: info; }
.guild-pet-panel      { grid-area: pet;      display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.guild-members-panel  { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.guild-missions-panel { grid-area: missions; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.guild-chat-panel     { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.guild-right-panel    { grid-area: right;    display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* Right-panel chat/members toggle (>600px only) */
.guild-right-tabs   { display:flex; gap:6px; margin-bottom:6px; flex-shrink:0; }
.guild-right-tab    { flex:1; padding:5px 8px; font-size:.82rem; border:1px solid var(--border); background:var(--bg-card); color:var(--text-dim); border-radius:4px; cursor:pointer; font-family:var(--font-body); }
.guild-right-tab.active { border-color:var(--gold); color:var(--gold); background:rgba(201,162,39,.08); }
.guild-right-body   { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.guild-right-body .guild-members-list { flex:1; min-height:0; overflow-y:auto; }
.guild-right-body .guild-chat-body { flex:1; min-height:0; display:flex; flex-direction:column; padding-top:0; }

/* Mid-panel chat (missions/war toggle) */
.guild-mid-tabs   { display:flex; gap:6px; margin-bottom:6px; flex-shrink:0; }
.guild-mid-tab    { flex:1; padding:5px 8px; font-size:.82rem; border:1px solid var(--border); background:var(--bg-card); color:var(--text-dim); border-radius:4px; cursor:pointer; font-family:var(--font-body); }
.guild-mid-tab.active { border-color:var(--gold); color:var(--gold); background:rgba(201,162,39,.08); }
.guild-mid-sub    { flex-shrink:0; margin-bottom:6px; }
.guild-mid-body   { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.guild-mid-body .guild-missions-body { flex:1; min-height:0; overflow-y:auto; }

/* Clickable panel header (members + chat panels) */
.guild-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 6px;
}

/* Toggle arrow — hidden at >600px, shown at ≤600px */
.guild-toggle-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: .8rem;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
  line-height: 1;
  transition: transform .2s;
}

/* Missions header: flex row to hold title+timer on left, toggle on right */
.guild-missions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 8px;
}

/* Collapsible body wrapper — fills remaining space in panel at >600px */
.guild-collapsible-body { flex:1; min-height:0; display:flex; flex-direction:column; }

/* Members scrollable list */
.guild-members-list { flex:1; min-height:0; overflow-y:auto; }

/* Missions scrollable body */
.guild-missions-body { flex:1; min-height:0; overflow-y:auto; }

/* Chat body */
.guild-chat-body { flex:1; min-height:0; display:flex; flex-direction:column; padding-top:6px; }

/* Chat send button / input */
.chat-input-row .btn { flex-shrink:0; }
.chat-input { min-width:0; }

/* ── Guild chat: narrow (≤800px) ─────────────────────────── */
@media (max-width:800px) {
  .guild-chat-panel .chat-messages { padding:6px 8px; }
  .guild-chat-panel .chat-msg { font-size:.82rem; margin-bottom:3px; }
  .guild-chat-panel .chat-input { padding:6px 10px; font-size:.88rem; }
  .guild-chat-panel .chat-input-row { gap:5px; }
}

/* ── Guild ≤600px: single column, collapsible sections ──── */
@media (max-width:600px) {
  .guild-main-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    grid-template-rows: auto;
    gap: 8px;
    flex: none;
    min-height: auto;
  }

  .guild-info-panel,
  .guild-members-panel,
  .guild-missions-panel,
  .guild-chat-panel,
  .guild-pet-panel { grid-area: auto; }

  .guild-info-panel,
  .guild-members-panel,
  .guild-missions-panel,
  .guild-pet-panel { display:block; overflow:visible; min-height:0; }

  .guild-name { font-size:1.2rem; }
  .guild-tag  { font-size:.8rem; }
  .member-row { gap:5px; }

  /* Show toggle arrows */
  .guild-toggle-btn { display:block; }

  /* Headers are clickable */
  .guild-panel-header,
  .guild-missions-header { cursor:pointer; user-select:none; }

  /* Collapsible body: natural height at small screen */
  .guild-collapsible-body { flex:none; display:block; }

  /* Members */
  .guild-members-list { max-height:160px; overflow-y:auto; }

  /* Missions */
  .guild-missions-header { margin-bottom:6px; }
  .guild-missions-body { max-height:220px; overflow-y:auto; }

  /* Chat */
  .guild-chat-panel { display:flex; flex-direction:column; overflow:visible; min-height:0; }
  .guild-chat-body { display:flex; flex-direction:column; padding-top:6px; }
  /* Reserve room for ~4 messages so the chat doesn't appear as a thin black strip when nearly empty */
  #guild-chat { min-height:110px; max-height:130px; overflow-y:auto; }
  .guild-chat-panel .chat-messages { padding:7px 8px; }
  .guild-chat-panel .chat-msg { font-size:.83rem; }
  .guild-chat-panel .chat-input { padding:7px 10px; font-size:.88rem; }

  /* Collapsed state: hide content, rotate arrow */
  .guild-collapsed .guild-collapsible-body { display:none; }
  .guild-collapsed .guild-toggle-btn { transform:rotate(-90deg); }
}

/* ── Generic collapsible panel (used in Friends, etc.) ───────────── */
.collapsible-header { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; flex-shrink:0; }
.collapsible-toggle { background:none; border:none; color:var(--text-dim); font-size:.8rem; cursor:pointer; padding:2px 4px; line-height:1; transition:transform .2s; flex-shrink:0; }
.collapsible-body { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.is-collapsed .collapsible-body { display:none; }
.is-collapsed .collapsible-toggle { transform:rotate(-90deg); }

/* ── Guild settings ≤450px ───────────────────────────────── */
@media (max-width:450px) {
  #guild-settings .panel { padding:10px; }
  #guild-settings h3 { font-size:.9rem; }
  #guild-settings .input-field { padding:7px 10px; margin-bottom:6px; font-size:.85rem; }
  #guild-settings .btn { padding:6px 10px; font-size:.85rem; }
  #guild-settings [id$="-emblems"] button { width:28px; height:28px; font-size:1.1rem; }
}

@media (max-width: 530px) {
  /* Leaderboard */
  .lb-panel { padding:6px 4px; overflow-x:hidden !important; }
  .lb-panel .table th { font-size:.65rem; padding:5px 4px; letter-spacing:0; }
  .lb-panel .table td { font-size:.72rem; padding:5px 4px; }
  .lb-panel .table td span { font-size:.72rem; }
  .chat-rooms .room-btn { padding:3px 6px; font-size:.72rem; }
}

/* Very narrow phones: shrink leaderboard tab font so they fit the table width */
@media (max-width:320px) {
  .chat-rooms .room-btn { font-size:.58rem; }
}

@media(max-width:600px) {
  .equip-grid { grid-template-columns:1fr; }
}

/* Promo banners */
.promo-banner { border-radius:8px; overflow:hidden; position:relative; }

/* Daily tab buttons */
.daily-tab-btn { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); }
.daily-tab-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,162,39,.08); }

/* Achievement cards */
.ach-card { display:flex; align-items:center; gap:12px; padding:10px 12px; }

/* Sub-tab badge (Достижения button) */
.daily-tab-btn { position: relative; }
.tab-badge { position:absolute; top:-6px; right:-6px; background:var(--red-light); color:#fff; font-size:.65rem; font-weight:700; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; pointer-events:none; }

/* Pet duel — damage popup animation */
@keyframes dmg-pop {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.7); }
  25%  { opacity: 1; transform: translate(-50%, -16px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -32px) scale(1); }
}

/* Pets tabs: force 2x2 between 360-480 so we don't get 3+1 wrap */
@media (min-width:360px) and (max-width:480px) {
  .pets-tabs-grid { grid-template-columns:repeat(2, 1fr) !important; }
}

/* Pets grid: 4 cards on desktop, 3 on tablet, 2 on mobile */
.pets-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:stretch; }
.pets-grid .pet-card { height:100%; }
@media (max-width: 700px) {
  .pets-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 500px) {
  .pets-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
}
/* Bigger stat numbers on tablet/desktop */
@media (min-width: 500px) {
  .pet-stats-row { font-size:1.1rem !important; gap:14px !important; }
}

/* VIP-таб (листалка со стрелками) */
.vip-arrow:disabled { opacity:.32; cursor:default; }
.vip-perk-list { display:flex; flex-direction:column; gap:7px; }
.vip-perk-row  { display:flex; gap:8px; align-items:flex-start; justify-content:flex-start; font-size:.86rem; line-height:1.42; }
/* На широких экранах (≥450px) центрируем тексты бонусов от центра */
@media (min-width: 450px) {
  .vip-perk-row { justify-content:center; text-align:left; }
}

/* Плашка «Покупай золото — копи VIP» */
.vip-intro { background:linear-gradient(135deg,rgba(240,180,41,.22),rgba(240,180,41,.04)); border:1px solid var(--gold); border-radius:10px; padding:12px 14px; text-align:center; }
.vip-intro-title { font-family:var(--font-title); color:var(--text); font-size:1rem; font-weight:700; margin-bottom:7px; }
.vip-intro-text  { font-size:.85rem; line-height:1.55; color:var(--text); }
/* Узкие экраны ≤450px: мельче шрифт и отступы, чтобы плашка не занимала полэкрана */
@media (max-width:450px) {
  .vip-intro { padding:8px 11px; }
  .vip-intro-title { font-size:.88rem; margin-bottom:4px; }
  .vip-intro-text  { font-size:.75rem; line-height:1.38; }
}


/* ── ТАВЕРНА ────────────────────────────────────────────────────────────────── */
/* Таверна: бармен и живые игроки делят ширину пополам, на узком — друг под другом. */
.tavern-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; margin-bottom:10px; }
.tavern-col { margin-bottom:0; display:flex; flex-direction:column; }
/* Топы не растягиваем по высоте ряда — их высоту равняет между собой equalizeTops()
   в tavern.js, одинаково и в две колонки, и в одну. */
.tavern-col-top { align-self:start; }
.tavern-col > #tv-live { flex:1; display:flex; flex-direction:column; }
.tavern-col .tavern-npc { flex:1; }
/* В одну колонку топы уходят вниз, оба под «Живые игроки» — это порядок из разметки,
   поэтому ничего не переставляем. */
@media (max-width:720px) { .tavern-cols { grid-template-columns:1fr; } }

/* Бармен: портрет слева, реплика и кнопки справа — обычная строка внутри .panel */
.tavern-npc { display:flex; align-items:stretch; gap:12px; }
.tavern-npc-img { width:64px; height:64px; object-fit:contain; flex:0 0 auto; align-self:center; }
.tavern-npc-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.tavern-npc-desc { font-size:.84rem; color:var(--text-dim); line-height:1.45; margin-bottom:10px; flex:1; }
.tavern-npc-btns { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; }
.tavern-npc-btns .btn { padding:6px 14px; font-size:.82rem; }

/* Живые игроки: кнопки действий + список открытых столов */
/* Навигация внутри попапа «Онлайн-столы» */
.tv-nav { display:flex; margin:0 0 12px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.tv-nav-btn { flex:1; padding:8px 4px; font-size:.82rem; background:transparent; border:0; cursor:pointer;
  color:var(--text-dim); font-family:inherit; }
.tv-nav-btn.is-on { background:rgba(237,182,74,.14); color:var(--gold); }
.tv-empty { padding:6px 2px; text-align:center; }
.tv-sort { display:flex; align-items:center; gap:8px; font-size:.76rem; margin-bottom:8px; }
.tv-sort-sel { flex:1; padding:5px 6px; font-size:.78rem; }
.tv-tables { display:flex; flex-direction:column; gap:4px; max-height:46vh; overflow-y:auto; }
.tv-table-row { display:grid; grid-template-columns:1fr auto auto; grid-template-areas:'who bet sit' 'lvl bet sit';
  align-items:center; column-gap:8px; padding:6px 8px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg-card); font-size:.8rem; }
.tv-table-who { grid-area:who; color:var(--gold); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-table-lvl { grid-area:lvl; font-size:.72rem; }
.tv-table-bet { grid-area:bet; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tv-table-row .tv-sit { grid-area:sit; padding:4px 10px; font-size:.76rem; }

/* Своя заявка: ждём соперника */
.tv-waiting { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; text-align:center; }
.tv-waiting-head { display:flex; align-items:center; justify-content:center; gap:8px; }
.tv-waiting-title { font-family:var(--font-title); color:var(--gold); font-size:.92rem; }
.tv-waiting-bet { font-size:.84rem; }
.tv-code-box { padding:6px 10px; border:1px dashed var(--border-gold); border-radius:8px;
  display:flex; align-items:center; justify-content:center; gap:8px; }
.tv-code { font-family:var(--font-title); font-size:1.3rem; color:var(--gold); letter-spacing:.2em; }
.tv-code-in { width:100%; text-align:center; font-family:var(--font-title); font-size:1.6rem;
  letter-spacing:.28em; padding:8px; }
.tv-spinner { width:18px; height:18px; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--gold); animation:tv-spin .8s linear infinite; }
@keyframes tv-spin { to { transform:rotate(360deg); } }

/* Переключатель «Публичный / По коду» */
.tv-seg { display:flex; gap:0; margin-top:10px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.tv-seg-btn { flex:1; padding:7px 4px; font-size:.8rem; background:transparent; border:0; cursor:pointer;
  color:var(--text-dim); font-family:inherit; }
.tv-seg-btn.is-on { background:rgba(237,182,74,.14); color:var(--gold); }
.tv-seg-hint { font-size:.74rem; color:var(--text-dim); line-height:1.4; margin-top:6px; min-height:2.1em; }

/* история партий — тот же приём, что у истории боёв на Арене */
.tavern-top-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tv-top { min-width:260px; }
.tv-top th, .tv-top td { padding:5px 6px; font-size:.78rem; }
/* Выравнивание задаём с УКАЗАНИЕМ тега: в main.css есть `.table th { text-align:left }`,
   он весом (0,1,1) перебивал класс (0,1,0) — шапка стояла слева, а числа под ней справа. */
.tv-top th.tv-top-rank, .tv-top td.tv-top-rank { width:1.6em; text-align:center; color:var(--text-dim); }
.tv-top th.tv-top-num,  .tv-top td.tv-top-num  { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Шапка топа держится на месте, пока список прокручивается внутри себя. */
.tv-top thead th { position:sticky; top:0; background:var(--bg-panel); z-index:1; }

/* Сворачивание топов — только на узких, где они идут друг под другом и раздел
   перестаёт влезать по высоте. На широких вместо этого внутренний скролл. */
.tv-top-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tv-top-arrow { display:none; font-size:.85rem; color:var(--text-dim); }
@media (min-width:721px) { .tavern-top-wrap { overflow-y:auto; } }   /* высоту задаёт layoutTops() */
@media (max-width:720px) {
  .tv-top-title { cursor:pointer; }
  .tv-top-arrow { display:inline; }
}
.tavern-history-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tavern-history-wrap .table { min-width:460px; }
@media (max-width:480px) { .tavern-npc { flex-direction:column; text-align:center; } .tavern-npc-btns { justify-content:center; } }

.tv-modal { position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,.74); display:flex; align-items:center; justify-content:center; padding:16px; }
.tv-modal-box { background:var(--bg-panel); border:1px solid var(--border-gold); border-radius:12px; padding:16px; max-width:380px; width:100%; max-height:86vh; overflow-y:auto; }
.tv-modal-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.tv-modal-title { font-family:var(--font-title); color:var(--gold); font-size:1.05rem; }
.tv-modal-sub { font-size:.78rem; color:var(--text-dim); line-height:1.35; }
.tv-bet-label { font-size:.78rem; color:var(--text-dim); display:block; margin-bottom:4px; }
.tv-bet-row { display:flex; align-items:center; gap:8px; }
.tv-range { flex:1; min-width:0; accent-color:var(--gold); }
.tv-num { width:104px; flex:0 0 auto; margin:0 !important; text-align:center; }
.tv-bet-meta { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:.76rem; margin-top:6px; }
.tv-bet-quick { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.tv-quick { padding:3px 10px; font-size:.74rem; }
.tv-modal-foot { display:flex; gap:6px; }
.tv-modal-foot .btn { flex:1; padding:8px 4px; font-size:.82rem; }
.tv-rules p { font-size:.82rem; line-height:1.5; color:var(--text-dim); margin-bottom:8px; }

/* ── СТОЛ КОСТЯШЕК ──────────────────────────────────────────────────────────── */
.kb-table {
  /* Клетка ограничена И шириной, И высотой: 6 клеток (две доски) + шапка/центр должны
     влезать в экран без скролла — иначе на телефоне нижний ряд обрезался. */
  --slot: clamp(28px, min(23vw, (100vh - 400px) / 6), 84px);
  --bw: calc(var(--slot) * 3 + 10px);   /* ровно ширина доски: 3 клетки + 2 промежутка */
  flex:1; min-height:0; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:6px; border-radius:12px; border:1px solid var(--border); overflow:hidden;
  background:radial-gradient(120% 80% at 50% 40%, #1d3b2a, #0e1a14 75%);
}
@supports (height: 100dvh) { .kb-table { --slot: clamp(28px, min(23vw, (100dvh - 400px) / 6), 84px); } }
.kb-top { width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:6px; flex:0 0 auto; }
.kb-leave, .kb-rules-btn { padding:4px 12px; font-size:.76rem; flex:0 0 auto; }
.kb-bet { font-size:.8rem; flex:1; text-align:center; }
/* строка «имя … общий счёт» — одинаковая у бармена и у игрока, над своей сеткой */
.kb-side { width:var(--bw); max-width:100%; display:flex; align-items:center; justify-content:space-between; padding:0 2px; flex:0 0 auto; }
.kb-who { font-size:.76rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.kb-total { font-family:var(--font-title); font-size:1.15rem; color:var(--gold); font-variant-numeric:tabular-nums; }

.kb-board { display:grid; grid-template-columns:repeat(3, var(--slot)); gap:5px; justify-content:center; flex:0 0 auto; }
.kb-col { display:flex; flex-direction:column; gap:3px; }
.kb-slots { display:flex; flex-direction:column; gap:3px; border-radius:8px; }
/* Подсветка выбираемого столбца — outline, а не border: border съедал бы ширину и кости
   вылезали за столбец (обводка «наезжала»). Outline рисуется вне потока, ровно по клеткам. */
.kb-col-open { cursor:pointer; }
.kb-col-open .kb-slots { outline:2px solid rgba(237,182,74,.5); background:rgba(237,182,74,.08); }
.kb-col-open:hover .kb-slots { outline-color:var(--gold); background:rgba(237,182,74,.16); }
.kb-col-score { font-size:.72rem; color:var(--text-dim); text-align:center; font-variant-numeric:tabular-nums; transition:color .2s ease, transform .2s ease; }
.kb-slot { width:var(--slot); height:var(--slot); border-radius:6px; background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; }
.kb-die { width:86%; height:86%; display:block; }
/* приземление после полёта */
.kb-die.kb-land { animation:kb-land .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes kb-land { 0% { transform:scale(1.18); } 60% { transform:scale(.94); } 100% { transform:none; } }

/* кость в полёте (клон поверх страницы) */
.kb-fly {
  position:fixed; z-index:10050; pointer-events:none; opacity:.98;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));
}
/* Комбо: кости, усиливающие друг друга, ПОСТОЯННО в золотой обводке (не гаснет). */
.kb-slot.kb-combo  { box-shadow:inset 0 0 0 2px var(--gold), 0 0 9px rgba(237,182,74,.35); }
.kb-slot.kb-combo3 { box-shadow:inset 0 0 0 2px #ffd76a, 0 0 15px rgba(255,215,106,.6); }
/* разовая вспышка в момент, когда комбо собралось */
.kb-slot.kb-combo-hit .kb-die { animation:kb-combo .46s ease; }
@keyframes kb-combo { 0%,100% { transform:none; } 40% { transform:scale(1.16); } 70% { transform:scale(.97); } }
.kb-col-score.kb-score-pop { color:var(--gold); transform:scale(1.4); transition:transform .18s ease; }

/* выбивание костей противника */
.kb-slot.kb-bust .kb-die { animation:kb-bust .34s ease-in forwards; }
@keyframes kb-bust {
  0%   { transform:none; opacity:1; }
  35%  { transform:translateX(-3px) rotate(-9deg); }
  60%  { transform:translateX(3px) rotate(9deg); }
  100% { transform:scale(.4) rotate(24deg); opacity:0; }
}

/* грань кости: 3×3 пипса */
.dp-face {
  width:100%; height:100%; box-sizing:border-box; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding:12%;
  border-radius:6px; background:linear-gradient(160deg,#f4efe2,#cfc6ae); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.dp-pip { border-radius:50%; background:transparent; }
.dp-pip.on { background:#2a2016; box-shadow:inset 0 -1px 1px rgba(255,255,255,.35); }

/* Зона броска. Высота фиксирована: кнопка «Бросить кость» то появляется, то исчезает, и
   без этого доски прыгали и уезжали за край экрана. */
.kb-mid { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:2px 0; flex:0 0 auto; height:var(--mid,118px); }
.kb-roll-btn { padding:5px 18px; font-size:.82rem; flex:0 0 auto; }
.kb-hint { display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.98rem; color:var(--text-dim); min-height:1.3em; flex:0 0 auto; }
/* Таймер хода — жёлтым и слева от подсказки; на последних секундах краснеет. */
.kb-timer { color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; }
.kb-timer:empty { display:none; }
.kb-timer-hot { color:var(--red-light); }
/* Пока ждём чужой ход, куб не показываем — иначе подсказка съезжает ниже центра. */
.kb-mid.is-wait .kb-roll { display:none; }
.kb-roll { position:relative; width:64px; height:64px; perspective:520px; perspective-origin:50% 30%;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
/* тень: сплющивается на ударах о стол — от неё читается «упал и покатился» */
.kb-shadow { position:absolute; left:50%; bottom:2px; width:44px; height:9px; margin-left:-22px; border-radius:50%;
  background:radial-gradient(50% 50%, rgba(0,0,0,.75), rgba(0,0,0,0) 70%); opacity:0; pointer-events:none; }
.d3d { position:relative; width:52px; height:52px; transform-style:preserve-3d; }
.d3d-face { position:absolute; inset:0; backface-visibility:hidden; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.3); }
.d3d-1 { transform:translateZ(26px); }
.d3d-6 { transform:rotateY(180deg) translateZ(26px); }
.d3d-2 { transform:rotateY(90deg)  translateZ(26px); }
.d3d-5 { transform:rotateY(-90deg) translateZ(26px); }
.d3d-3 { transform:rotateX(90deg)  translateZ(26px); }
.d3d-4 { transform:rotateX(-90deg) translateZ(26px); }

@media (max-height:700px) {
  .kb-table { --mid:96px; }
  .kb-roll { width:52px; height:52px; }
  .d3d { width:42px; height:42px; }
  .d3d-1 { transform:translateZ(21px); } .d3d-6 { transform:rotateY(180deg) translateZ(21px); }
  .d3d-2 { transform:rotateY(90deg) translateZ(21px); } .d3d-5 { transform:rotateY(-90deg) translateZ(21px); }
  .d3d-3 { transform:rotateX(90deg) translateZ(21px); } .d3d-4 { transform:rotateX(-90deg) translateZ(21px); }
}
@media (max-height:560px) {
  .kb-table { --mid:82px; }
  .kb-roll { width:44px; height:44px; }
  .d3d { width:36px; height:36px; }
  .d3d-1 { transform:translateZ(18px); } .d3d-6 { transform:rotateY(180deg) translateZ(18px); }
  .d3d-2 { transform:rotateY(90deg) translateZ(18px); } .d3d-5 { transform:rotateY(-90deg) translateZ(18px); }
  .d3d-3 { transform:rotateX(90deg) translateZ(18px); } .d3d-4 { transform:rotateX(-90deg) translateZ(18px); }
}

/* ── Инфо-попап гильдии ────────────────────────────────────────────────────── */
/* Рейтинг и участники — одной строкой */
.gp-two { display:flex; gap:8px; }
.gp-two-cell { flex:1; display:flex; align-items:center; gap:6px; min-width:0; font-size:.86rem; }
.gp-two-val { margin-left:auto; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.gp-two-val img { width:1em; height:1em; object-fit:contain; vertical-align:middle; }

.gp-sec { border-top:1px solid var(--border); padding-top:10px; margin-top:10px; }
.gp-sec-title { font-size:.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.gp-sec-title img { width:1em; height:1em; object-fit:contain; vertical-align:middle; }

/* Город гильдии: витрина. Уровень над головой здания, названий нет, кликов нет. */
.gp-yard-frame { border:1px solid var(--border); border-radius:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.gp-yard {
  display:flex; gap:4px; align-items:flex-end; justify-content:space-between;
  min-width:max-content; height:112px; padding:20px 8px 4px;
  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;
}
.gp-house { position:relative; display:flex; align-items:flex-end; justify-content:center; flex:0 0 auto; }
.gp-house img { max-width:56px; max-height:74px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.gp-house-lvl {
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  font-size:.7rem; font-weight:700; color:var(--gold); text-shadow:0 1px 3px #000; pointer-events:none;
}

/* Питомец гильдии */
.gp-pet { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px;
  display:flex; flex-direction:column; align-items:center; gap:4px; }
.gp-pet-img { width:72px; height:72px; object-fit:contain; }
.gp-pet-name { font-family:var(--font-title); color:var(--gold); font-size:1rem; text-align:center; line-height:1.1; }
.gp-pet-stats { font-size:.88rem; color:var(--text); display:flex; gap:12px; margin-top:2px; }
.gp-pet-stats img { width:1em; height:1em; object-fit:contain; vertical-align:middle; }

/* Стрелка «раскрыть» — тем же приёмом, что расписание аббатства */
.gp-toggle { background:none; border:none; color:var(--gold); font-size:.78rem; cursor:pointer;
  padding:6px 0 0; text-align:center; width:100%; font-family:inherit; }