/* ── 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 { display:grid; grid-template-columns:1fr 60px 1fr; gap:8px; align-items:center; background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; padding:16px; }
.fighter-panel { display:flex; flex-direction:column; align-items:center; gap:6px; }
.fighter-icon { font-size:3rem; line-height:1; }
.fighter-panel.enemy .fighter-icon { font-size:5.25rem; }
.fighter-name { font-family:var(--font-title); font-size:.75rem; color:var(--gold); text-align:center; }
.fighter-hp { font-size:.8rem; color:var(--text-dim); }
.fighter-status { min-height:20px; display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.hp-bar-wrap .bar-track { width:100%; height:10px; }
.combat-vs { font-family:var(--font-title); font-size:1.4rem; color:var(--border-gold); text-align:center; }
.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; }
  .combat-arena { grid-template-columns:1fr 40px 1fr; }
  .fighter-icon { font-size:2rem; }
  .fighter-panel.enemy .fighter-icon { font-size:3.5rem; }
}

/* Home */
.home-welcome { font-family: var(--font-title); font-size:1rem; color:var(--gold); margin-bottom:10px; }
.home-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.home-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:10px 8px; text-align:center; cursor:pointer; transition:.2s; position:relative; }
.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); }
.home-card-icon { font-size:1.6rem; display:block; margin-bottom:4px; }
.home-card-label { font-family:var(--font-title); font-size:.75rem; color:var(--text); letter-spacing:1px; }
.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; }

@media (min-width: 660px) {
  .home-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
  .home-card { padding:16px 10px; }
  .home-card-icon { font-size:2rem; margin-bottom:6px; }
  .home-card-label { font-size:.88rem; }
}

/* 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) {
  .eq-layout { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  /* Cap & center the whole mannequin column so the grid and the Auto button share width */
  .eq-mannequin-side { order:-1; width:100%; max-width:290px; margin-left:auto; margin-right:auto; }
  /* Bigger icons/text to match the larger cells */
  .eq-mannequin-cell-icon  { font-size:1.85rem; }
  .eq-mannequin-cell-name  { font-size:.7rem; }
  .eq-mannequin-cell-stats { font-size:.78rem; }
}
.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); }

/* Chat */
.chat-container { display:flex; flex-direction:column; flex:1; min-height:0; }
.chat-messages { flex:1; min-height:0; overflow-y:auto; 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; }
.chat-username { color:var(--gold); font-weight:600; }
.chat-username-btn { color:var(--gold); font-weight:600; background:none; border:none; padding:0; cursor:pointer; font-size:inherit; font-family:inherit; }
.chat-username-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); }
.chat-input-row { display:flex; gap:8px; }
.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); }
.chat-rooms { display:flex; gap:6px; margin-bottom:10px; }
.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; }

/* 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; }
}

/* 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:'⚔️ '; }
.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; }
}