/* ── Удары соратников на общей арене (рейды, гильд-рейды, война) ──────────
   Босс общий: пока ты бьёшь, по нему лупят и другие. Карточка бьющего выплывает над
   ареной, наносит удар и уходит. Играются строго по ОДНОЙ (очередь в 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-portrait.enemy { position:relative; }
/* Обёртка ровно по картинке врага: от неё и пляшет шапка, поэтому на любом размере портрета
   она садится на голову. Селектор с тегом — общее правило `.cb-portrait img` иначе перебивает. */
.cb-foe-wrap { position:relative; display:inline-block; line-height:0; }
/* Место и размер приходят в inline-стиле — они свои у каждого врага (см. utils/hat-anchors.js). */
.cb-portrait img.cb-hol-hat, .loc-hol-hat { position:absolute; height:auto;
  transform:translateX(-50%) rotate(-12deg); pointer-events:none; z-index:2;
  filter:drop-shadow(0 3px 4px #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; }
/* Новая боёвка: панель способностей — сама иконка навыка целиком является кнопкой, поверх неё
   накладываются мана (сверху-справа), инфо (сверху-слева) и название (снизу). Без рамки/фона. */
.nf-abils { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:2px 0; }
.nf-abil { position:relative; width:88px; height:88px; border:none; background:none; padding:0; cursor:pointer; overflow:hidden; border-radius:10px; transition:transform .12s, filter .12s; }
.nf-abil:hover { transform:translateY(-2px) scale(1.04); filter:drop-shadow(0 5px 10px #000b); }
.nf-abil:active { transform:translateY(0) scale(1); }
/* Нехватку маны НЕ затемняем — только бейдж маны краснеет; тап выдаёт красную надпись «не хватает маны». */
.nf-abil-ic { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
/* Удар — единственная плитка без арта: даём ей лёгкий фон-рамку и центрируем меч, чтобы не висел в пустоте. */
.nf-abil.basic { background:radial-gradient(circle at 50% 42%, #2c2415, #130e07); box-shadow:inset 0 0 0 1.5px var(--border-gold); }
.nf-abil.basic .nf-abil-ic { inset:auto; top:50%; left:50%; width:48px; height:48px; transform:translate(-50%,-58%); filter:drop-shadow(0 1px 2px #000); }
.nf-abil-name { position:absolute; left:0; right:0; bottom:0; padding:9px 3px 3px; font-size:.58rem; line-height:1.05; color:#fff; text-align:center; text-shadow:0 1px 2px #000,0 0 3px #000; background:linear-gradient(transparent, rgba(0,0,0,.8) 62%); pointer-events:none; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.nf-abil-mana { position:absolute; top:2px; right:3px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:linear-gradient(180deg,#3a72c4,#1b4a9c); color:#fff; font-size:.66rem; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px #000,0 0 0 1px #0007; pointer-events:none; z-index:2; }
.nf-abil.low .nf-abil-mana { background:linear-gradient(180deg,#c85454,#8a2f2f); }
/* Инфо-кнопка — родная картинка info.webp (не самодельный кружок с «i»). */
.nf-abil-i { position:absolute; top:2px; left:2px; width:18px; height:18px; z-index:3; cursor:help; line-height:0; }
.nf-abil-i img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 1px 2px #000); }
.nf-abil-i:hover { filter:brightness(1.2); }
/* Красная надпись «не хватает маны» — вместо затемнения плитки. */
.nf-manawarn { position:fixed; left:50%; bottom:24%; transform:translateX(-50%); z-index:75; color:#ff6b6b; font-family:var(--font-title); font-weight:800; font-size:1.02rem; text-shadow:0 2px 6px #000,0 0 3px #000; opacity:0; pointer-events:none; white-space:nowrap; }
.nf-manawarn.show { animation:nfmanawarn 1.35s ease forwards; }
@keyframes nfmanawarn { 0%{opacity:0;transform:translate(-50%,10px)} 15%{opacity:1;transform:translate(-50%,0)} 70%{opacity:1;transform:translate(-50%,-4px)} 100%{opacity:0;transform:translate(-50%,-14px)} }
.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; }
/* В обучении крупная жёлтая рамка спотлайта — постоянный индикатор цели, поэтому hover-рамку карточек глушим (в обычной игре она остаётся). */
body.tut-active .home-card:hover { border-color:var(--border); 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; position:relative; }
.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(98px,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; }
/* Бонус сета: на широких (>400) — ПОД манекеном (.eq-setb-wide в eq-mannequin-side, после манекена);
   .eq-mann-inner=display:contents → манекен ведёт себя как раньше. Узкий (≤400) — абсолютом top-right. */
.eq-mann-inner { display:contents; }
.eq-setb-wide { flex:0 0 auto; }
.eq-setb-narrow { display:none; }
.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(84px,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 auto 1fr; }
  .eq-mannequin-side { order:-1; width:100%; max-width:170px; margin-left:auto; margin-right:auto; }
  /* ≤400: бонус сета — во всю ширину НАД манекеном (order:-2 → первым в стеке). */
  .eq-setb-wide { display:none; }
  .eq-setb-narrow { display:block; order:-2; width:100%; }
  .eq-setb-narrow > div { margin-top:0; }
  /* Меньше ячейки — меньше иконки/текст */
  .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; }
  .nf-abils { gap:8px !important; }
  .nf-abil { width:74px !important; height:74px !important; }
  .nf-abil.basic .nf-abil-ic { width:42px !important; height:42px !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(80px,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; white-space:pre-wrap; }
.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,minmax(0,1fr)); gap:10px; align-items:stretch; }
.pets-grid .pet-card { height:100%; min-width:0; }
.pet-creator { font-size:.62rem; color:var(--text-dim); text-align:center; line-height:1.15; margin-bottom:2px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pet-creator .player-name-btn { font-size:.62rem; text-decoration:underline dotted; }
@media (max-width: 700px) {
  .pets-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 500px) {
  .pets-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
}
/* 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; }
/* Доска НЕ тянет ряд вверх: событий бывает много (они накладываются — несколько идёт, ещё
   несколько анонсировано), и панель уезжала бы на два экрана, а рядом стоит бармен. Свой
   вертикальный скролл, как у топов и списков наград. Отступ справа — под полосу прокрутки,
   чтобы она не наезжала на кнопки карточек. */
/* Доска выравнивается по гостю (обе колонки ряда тянутся до одной нижней границы) и
   ЗАПОЛНЯЕТ свою панель (flex:1) — под контентом не зияет пустота, при переполнении свой скролл. */
#tv-events { flex:1; min-height:0; max-height:40vh; overflow-y:auto; padding-right:2px; }
/* Свернуть доску дают только в ОДНУ колонку: там она стоит над барменом и костями и отжимает
   их вниз. В две колонки она соседствует с барменом, ряд держит он — складывать нечего, и
   стрелку прячем, чтобы не предлагать бесполезное. Само сворачивание — общий .collapsible-*
   (тот же, что у достижений): скрытие тела и поворот стрелки уже написаны там. */
@media (max-width:720px) {
  #tv-ev-head { cursor:pointer; user-select:none; margin-bottom:12px; }
  #tv-ev-panel.is-collapsed #tv-events { display:none; }
  #tv-ev-panel.is-collapsed #tv-ev-head { margin-bottom:0; }
}
@media (min-width:721px) {
  #tv-ev-fold { display:none; }        /* в две колонки складывать нечего */
  #tv-ev-panel.is-collapsed #tv-events { display:block; }   /* и свёрнутость не действует */
}
/* В одну колонку топы уходят вниз, оба под «Живые игроки» — это порядок из разметки,
   поэтому ничего не переставляем. */
@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); } }

/* Трюки за столом Шулера: маленькая затемнённая табличка в правом верхнем углу стола.
   Именно поверх, а не строкой в потоке — иначе она сдвигала бы «Сдаться» и «Правила». */
.kb-st-tricks { position:absolute; right:8px; top:48px; z-index:3; max-width:46%;
  display:flex; flex-direction:column; gap:3px; padding:6px 9px; border-radius:8px;
  background:rgba(0,0,0,.62); border:1px solid var(--border); pointer-events:none; }
.kb-st-row { display:flex; flex-direction:column; line-height:1.25; }
.kb-st-who { font-size:.6rem; color:var(--text-dim); }
.kb-st-name { font-size:.74rem; font-weight:700; }
.kb-st-note { font-size:.6rem; color:var(--text-dim); }

/* Переключатель «Публичный / По коду» */
.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; }

/* ── Кубок Большой Шестёрки ──────────────────────────────────────────────── */
/* Кубок крупно, у его подножия справа — пара костей, будто только что брошенных. */
.tv-cup-art { position:relative; display:flex; align-items:flex-end; justify-content:center;
  margin:2px 0 12px; min-height:132px; }
.tv-cup-img { width:132px; height:132px; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(0,0,0,.6)); }
/* Кости лежат ПОВЕРХ кубка, у его правого нижнего края: начинаются от середины трофея
   и уходят вправо, поэтому частично закрывают венок — будто брошены рядом. */
.tv-cup-dice { position:absolute; left:50%; bottom:-2px; transform:translateX(2px); z-index:2;
  display:flex; align-items:flex-end; gap:8px; perspective:520px; perspective-origin:50% 40%; }
/* Кости лежат на «столе»: лёгкий наклон и тень под каждой — те же кубики, что в игре.
   display:flex обязателен: .d3d — строчный span, без флекс-контекста его размеры не применяются
   (на игровом столе он лежит внутри флексового .kb-roll, оттого и работает там). */
.tv-cup-die { display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
/* Размер куба меняем вместе с вылетом граней: translateZ = половина стороны, иначе куб «раскроется». */
.tv-cup-die .d3d { width:35px; height:35px; }
.tv-cup-die .d3d-1 { transform:translateZ(17.5px); }
.tv-cup-die .d3d-6 { transform:rotateY(180deg) translateZ(17.5px); }
.tv-cup-die .d3d-2 { transform:rotateY(90deg)  translateZ(17.5px); }
.tv-cup-die .d3d-5 { transform:rotateY(-90deg) translateZ(17.5px); }
.tv-cup-die .d3d-3 { transform:rotateX(90deg)  translateZ(17.5px); }
.tv-cup-die .d3d-4 { transform:rotateX(-90deg) translateZ(17.5px); }
.tv-cup-die:first-child { transform:rotate(-8deg); }
.tv-cup-die:last-child  { transform:rotate(7deg) translateY(3px); }
/* Список чемпионов: имена текут по строкам и центрируются, поэтому неполная последняя
   строка стоит по середине, а не липнет к левому краю. Все имена равны между собой. */
/* Имена ложатся по ДВА в ряд на узких и по ТРИ на широких — доля ширины у элемента жёсткая,
   поэтому в ряд не влезет больше, сколько бы места ни было. Неполная строка встаёт по центру. */
.tv-cup-names { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:7px 10px; padding:0 2px; margin:0 auto; }
/* Имена сохраняют свою ширину и строка центрируется целиком: в жёстких колонках короткие
   ники «плавали» внутри ячейки и казались съехавшими. Число в ряду задают разделители. */
.tv-cup-item { display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font-size:.84rem; line-height:1.35; min-width:0; cursor:pointer; }
/* Невидимый разделитель = принудительный перенос строки во flex-раскладке. */
.tv-cup-br { flex-basis:100%; height:0; margin:0; }
.tv-cup-br.br3 { display:none; }          /* до 600px переносим по два имени */
.tv-cup-av { width:24px; height:24px; flex:0 0 auto; border-radius:5px; object-fit:cover;
  border:1px solid var(--border-gold); background:var(--bg-dark); }
.tv-cup-who { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gold); }
.tv-cup-wins { color:var(--text-dim); margin-left:4px; font-variant-numeric:tabular-nums; }
/* На широких экранах панель просторнее — имена и аватарки крупнее, и в ряд помещается три. */
/* От 600px в ряду три имени: включаем разделители после каждого третьего и гасим «по два».
   Заодно крупнее шрифт и аватарки — места хватает. */
@media (min-width:600px) {
  .tv-cup-names { gap:10px 18px; }
  .tv-cup-item { font-size:.95rem; gap:8px; }
  .tv-cup-av { width:30px; height:30px; border-radius:6px; }
  .tv-cup-br.br3 { display:block; }
  .tv-cup-br.br2 { display:none; }
}

/* ── Меч всевластия ──────────────────────────────────────────────────────── */
/* Печати стоят кольцом и связаны линиями — вместе это фигура, что держит меч. Меч и его
   статы лежат В ЦЕНТРЕ фигуры. Линия горит, только когда вскрыты обе печати на её концах. */
/* Кольцо квадратное, но печати стоят по радиусу 34% — снизу и сверху оставалась пустая
   полоса. Подрезаем её отрицательными полями, иначе до кнопки зияет воздух. */
.tv-relic-ring { position:relative; width:100%; max-width:351px; aspect-ratio:1; margin:-6% auto -8%; }
.tv-relic-links { position:absolute; inset:0; width:100%; height:100%; }
/* Половина ребра красится цветом СВОЕЙ руны и загорается вместе с ней. */
.tv-link { stroke:#31313d; stroke-width:1.5; vector-effect:non-scaling-stroke; transition:.35s ease;
  stroke-linecap:round; }
.tv-link.is-lit { stroke:var(--c); stroke-width:2.5;
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--c) 70%, transparent)); }

/* Печать в кольце: блок РАЗМЕРОМ С ПЛИТУ, его центр и есть вершина кольца — оттуда растут
   линии. Подпись висит под плитой абсолютом, чтобы не смещать этот центр.
   Место печати считает CSS из направления (--cx/--cy) и радиуса --r: радиус меняется одним
   классом, и фигура сжимается целиком, без пересборки разметки. */
.tv-relic-ring { --r:34%; }
.tv-seal { position:absolute; transform:translate(-50%, -50%); width:46px; height:46px;
  left:calc(50% + var(--cx) * var(--r)); top:calc(50% + var(--cy) * var(--r)); }
/* Линии нарисованы под радиус 34 — при меньшем радиусе группу ужимаем к центру. */
.tv-seal-glow { display:block; }
.tv-seal.is-open .tv-seal-glow {
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--seal) 70%, transparent))
         drop-shadow(0 0 11px color-mix(in srgb, var(--seal) 35%, transparent)); }

/* Плита печати: восьмигранник с фаской, внутри пентаграмма линиями. */
/* Условия печатей — во всплывающей подсказке: наведение на ПК, нажатие на телефоне.
   Своя подсказка, а не системная: title= в игре не используем. */
.tv-seal { cursor:pointer; }
.tv-relic-lead { text-align:center; font-family:var(--font-title); color:var(--gold);
  font-size:.95rem; letter-spacing:.5px; line-height:1.3; margin:0 0 2px; }
.tv-relic-hint { text-align:center; font-size:.76rem; line-height:1.35; margin:0 0 2px; }
.tv-tip { position:fixed; z-index:60; max-width:230px; background:var(--bg-dark);
  border:1px solid var(--border-gold); border-radius:4px; padding:8px 11px;
  box-shadow:0 6px 22px #000b; font-size:.78rem; line-height:1.45; color:var(--text); }
.tv-tip .h { font-family:var(--font-title); margin-bottom:3px; }
.tv-tip .tt { margin-top:4px; color:var(--gold); font-size:.74rem; }

.tv-seal-mark { display:block; position:relative; width:46px; height:46px; margin:0 auto; transition:.35s ease;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:linear-gradient(160deg, #34343f, #191921 65%); box-shadow:inset 0 0 0 2px rgba(0,0,0,.5);
  --pentagram:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 L79.4 94.5 L2.4 38.6 L97.6 38.6 L20.6 94.5 Z' fill='none' stroke='black' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tv-seal-mark::before { content:''; position:absolute; inset:5px; transition:.35s ease;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:linear-gradient(160deg, #2b2b36, #15151d); }
.tv-seal-mark::after { content:''; position:absolute; left:50%; top:50%; width:26px; height:26px;
  margin:-13px 0 0 -13px; transition:.35s ease; background:rgba(255,255,255,.22);
  -webkit-mask:var(--pentagram) center/contain no-repeat;
          mask:var(--pentagram) center/contain no-repeat; }
.tv-seal.is-open .tv-seal-mark {
  background:linear-gradient(160deg, color-mix(in srgb, var(--seal) 88%, #fff),
                                     color-mix(in srgb, var(--seal) 82%, #000)); }
.tv-seal.is-open .tv-seal-mark::after { background:var(--seal);
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--seal) 90%, transparent)); }
/* Центр фигуры: меч и статы помещаются ВНУТРИ кольца, не наезжая на печати. */
.tv-relic-center { position:absolute; left:50%; top:48%; transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:3px; width:38%; }
/* Меч масштабируется ВМЕСТЕ с кольцом: раньше ширина упиралась в 96px, и на узких экранах
   он оставался прежним, когда фигура вокруг уже сжалась. */
.tv-relic-sword { width:63%; max-width:96px; object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.tv-relic-stats { display:flex; gap:10px; font-size:.86rem; font-weight:700; color:var(--gold);
  white-space:nowrap; }
/* На узких кольцо мельче — вместе с ним ужимаются статы и подпись под мечом. */
/* Узкий ЭКРАН (телефон): кольцо поджимается, печати и подписи мельче — иначе восемь подписей
   вокруг фигуры наезжают друг на друга. На десктопе ничего из этого не включается. */
@media (max-width:420px) {
  .tv-relic-ring { --r:27%; }
  .tv-relic-stats { font-size:.74rem; gap:6px; }
  .tv-relic-note { font-size:.58rem; }
  .tv-seal, .tv-seal-mark { width:32px; height:32px; }
  .tv-seal-mark::after { width:18px; height:18px; margin:-9px 0 0 -9px; }
  .tv-link-group { transform:scale(.794); transform-origin:50% 50%; transform-box:view-box; }
}
.tv-relic-stats span { display:inline-flex; align-items:center; gap:3px; }
.tv-relic-ico { width:1em; height:1em; object-fit:contain; vertical-align:middle; }
.tv-relic-note { font-size:.66rem; color:var(--text-dim); }

/* Призыв внизу — тем же золотом и шрифтом, что заголовки панелей. */
.tv-relic-call { margin-top:2px; text-align:center; font-family:var(--font-title);
  color:var(--gold); font-size:1rem; letter-spacing:1px; line-height:1.35; }
.tv-relic-done { margin-top:2px; text-align:center; font-family:var(--font-title);
  color:var(--gold); font-size:1rem; letter-spacing:1px; }
.tv-relic-take { width:100%; margin-top:2px; font-size:.95rem; }

/* история партий — тот же приём, что у истории боёв на Арене */
.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-legend { border:1px solid var(--border); border-radius:10px; padding:11px 12px; margin-bottom:10px; background:rgba(255,255,255,.03); }
.tv-legend-text { font-size:.9rem; line-height:1.45; margin-bottom:9px; }
.tv-legend-votes { display:flex; gap:8px; }
.tv-vote { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border); background:rgba(255,255,255,.04); font-family:inherit; color:var(--text); }
.tv-vote img { width:17px; height:17px; object-fit:contain; }
.tv-vote b { font-size:.86rem; font-variant-numeric:tabular-nums; }
.tv-vote:hover { filter:brightness(1.14); }
.tv-vote-yes.is-on { border-color:#5fbf6a; background:rgba(95,191,106,.16); }
.tv-vote-no.is-on  { border-color:#e0666d; background:rgba(224,102,109,.16); }
/* крестик нарисован CSS (не эмодзи, не отсутствующий ассет) */
.tv-cross { position:relative; width:15px; height:15px; display:inline-block; flex:0 0 auto; }
.tv-cross::before, .tv-cross::after { content:''; position:absolute; top:50%; left:0; width:100%; height:2px; margin-top:-1px; background:#e0666d; border-radius:2px; }
.tv-cross::before { transform:rotate(45deg); }
.tv-cross::after  { transform:rotate(-45deg); }
/* ── Хмельной пропуск ── */
#ap-root { display:flex; flex-direction:column; max-height:84vh; }
.ap-wrap { display:flex; flex-direction:column; min-height:0; }
.ap-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ap-hd-l { display:flex; align-items:center; gap:8px; }
.ap-title { font-family:var(--font-title); font-size:1.5rem; background:linear-gradient(180deg,#ffe6a0,#f0c040 55%,#c9873a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ap-rom { font-family:var(--font-title); font-size:1.5rem; color:#f0c040; text-shadow:0 0 10px rgba(240,192,64,.4); }
.ap-hd-r { display:flex; align-items:center; gap:10px; flex:1; min-width:210px; justify-content:flex-end; }
.ap-lvlb { font-size:.8rem; font-weight:700; color:#f0c040; background:rgba(240,192,64,.12); border:1px solid rgba(240,192,64,.4); border-radius:20px; padding:3px 12px; white-space:nowrap; }
.ap-xp { position:relative; flex:1; max-width:220px; height:16px; border-radius:10px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); overflow:hidden; }
.ap-xp-fill { height:100%; background:linear-gradient(90deg,#c9873a,#f0c040); box-shadow:0 0 10px rgba(240,192,64,.6); transition:width .5s; }
.ap-xp-t { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; text-shadow:0 1px 2px #000; }
.ap-timer { font-size:1.15rem; font-weight:800; color:#f0c040; white-space:nowrap; text-shadow:0 0 8px rgba(240,192,64,.4); }
.ap-rep-n { font-size:.85rem; color:var(--text-dim); white-space:nowrap; }
.ap-rep-n b { color:#f0c040; font-size:1rem; }
.ap-rep-ic { width:17px; height:17px; object-fit:contain; vertical-align:-4px; }
.ap-btn-badge { position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#c9313a; color:#fff; font-size:.7rem; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.5); border:1.5px solid #1a1206; box-sizing:border-box; }
.ap-hd-info { padding:0; border:none; background:none; cursor:pointer; display:inline-flex; align-items:center; width:26px; height:26px; }
.ap-hd-info img { width:22px; height:22px; object-fit:contain; opacity:.85; }
.ap-hd-info:hover img { opacity:1; }
.ap-help-list { display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.ap-help-row { border-left:3px solid var(--gold); padding-left:10px; }
.ap-help-h { font-weight:700; color:var(--gold); font-size:.92rem; margin-bottom:2px; }
.ap-help-b { font-size:.84rem; color:var(--text); line-height:1.45; }
.ap-body { position:relative; }
.ap-strip { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding:4px 2px 10px; scroll-behavior:smooth; }
.ap-strip::-webkit-scrollbar { height:8px; } .ap-strip::-webkit-scrollbar-thumb { background:rgba(240,192,64,.4); border-radius:4px; }
.ap-col { position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; width:86px; }
.ap-col::after { content:''; position:absolute; top:109px; left:50%; width:calc(100% + 8px); height:3px; background:rgba(255,255,255,.14); z-index:0; }
.ap-col:last-child::after { display:none; }
.ap-col.is-on::after { background:linear-gradient(90deg,#f0c040,#c9873a); box-shadow:0 0 8px rgba(240,192,64,.4); }
.ap-node { position:relative; z-index:1; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.58rem; line-height:1; text-align:center; background:#2a2620; border:2px solid rgba(255,255,255,.15); color:var(--text-dim); }
.ap-node.reached { background:linear-gradient(180deg,#f0c040,#c9873a); border-color:#ffe6a0; color:#1a1206; box-shadow:0 0 12px rgba(240,192,64,.5); }
.ap-node.cur { box-shadow:0 0 0 3px rgba(240,192,64,.35), 0 0 16px rgba(240,192,64,.7); transform:scale(1.12); }
.ap-cell { position:relative; width:82px; height:82px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:3px; padding:5px; overflow:hidden; background:rgba(255,255,255,.03); border:1.5px solid var(--ck,rgba(255,255,255,.14)); box-shadow:0 0 16px -9px var(--ck,transparent); transition:transform .15s, box-shadow .2s; }
.ap-cell.is-clock { opacity:.82; }
.ap-cell.is-plock { opacity:.9; }
.ap-cell.is-can { cursor:pointer; border-color:var(--ck,#f0c040); animation:ap-pulse 1.6s ease-in-out infinite; }
.ap-cell.is-can:hover { transform:translateY(-3px) scale(1.05); }
@keyframes ap-pulse { 0%,100%{ box-shadow:0 0 10px -3px var(--ck),0 0 0 1px var(--ck);} 50%{ box-shadow:0 0 22px 1px var(--ck),0 0 0 1px var(--ck);} }
.ap-cell.collect { animation:ap-collect .3s ease forwards; }
@keyframes ap-collect { 40%{ transform:scale(1.18); box-shadow:0 0 26px rgba(240,192,64,.9);} 100%{ transform:scale(.6); opacity:0; } }
.ap-rwd { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; max-width:100%; }
.ap-rwd-ic { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.ap-rwd-a { font-size:.72rem; font-weight:700; text-align:center; max-width:100%; line-height:1.12; }
.ap-rwd-lbl .ap-rwd-t { font-size:.62rem; font-weight:700; text-align:center; line-height:1.08; color:var(--text); }
.ap-rwd-empty { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.12); }
/* уникальные награды крупнее (аватар/мебель); превью стиля ника */
.ap-av .ap-rwd-ic { width:46px; height:46px; border-radius:6px; }
.ap-furn .ap-rwd-ic { width:46px; height:46px; }
.ap-rv-item .ap-av .ap-rwd-ic, .ap-rv-item .ap-furn .ap-rwd-ic { width:58px; height:58px; }
.ap-style { display:flex; flex-direction:column; align-items:center; gap:3px; }
.ap-style-prev { font-size:1.5rem; line-height:1.1; display:inline-block; }
.ap-rv-item .ap-style-prev { font-size:1.9rem; }
.ap-style .ap-rwd-a { font-size:.6rem; font-weight:700; color:var(--text-dim); }
.ap-ck-orb { width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffffffcc, var(--ck) 45%, #00000066); box-shadow:0 0 12px var(--ck), inset 0 -3px 6px #00000066; }
.ap-ck-common { --ck:#aeb6c0; } .ap-ck-rare { --ck:#5aa9e6; } .ap-ck-epic { --ck:#c07be0; } .ap-ck-legendary { --ck:#f0c040; } .ap-ck-mythic { --ck:#e5484d; }
.ap-rar-silver { --ck:#cfd3d8; } .ap-rar-gold,.ap-rar-vip_points { --ck:#f0c040; } .ap-rar-energy { --ck:#7ec8e3; }
.ap-rar-rune { --ck:#c07be0; } .ap-rar-raid_seals,.ap-rar-dungeon_seals,.ap-rar-main_raid_runs { --ck:#e0a86e; }
.ap-rar-avatar,.ap-rar-name_style,.ap-rar-furniture { --ck:#7bc47f; } .ap-rar-reputation { --ck:#e0666d; }
.ap-ck .ap-rwd-a { color:var(--ck); }
.ap-cell.is-claimed::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.3); z-index:1; }
.ap-done-ic { position:absolute; top:4px; right:4px; z-index:3; width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 1px 2px #000); }
.ap-info { position:absolute; top:2px; left:2px; z-index:3; width:26px; height:26px; padding:0; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ap-info img { width:19px; height:19px; object-fit:contain; opacity:.95; filter:drop-shadow(0 1px 2px #000); }
.ap-lk { position:absolute; top:5px; right:5px; width:20px; height:20px; object-fit:contain; opacity:.95; filter:drop-shadow(0 1px 2px #000); }
.ap-ft { display:flex; gap:8px; align-items:center; margin-top:12px; }
.ap-ft .btn { flex:1; }
.ap-prem-on { flex:1; text-align:center; color:#5fbf6a; font-weight:700; }
.ap-dr-h { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ap-dr-h .ap-ck-orb { width:46px; height:46px; }
.ap-dr-ttl { font-weight:700; font-size:1rem; color:var(--gold); }
.ap-dr-sub { font-size:.74rem; color:var(--text-dim); }
.ap-dr-list { display:flex; flex-direction:column; gap:1px; max-height:52vh; overflow-y:auto; }
.ap-dr-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px solid rgba(255,255,255,.06); }
.ap-dr-nm { display:flex; align-items:center; gap:6px; font-size:.86rem; }
.ap-dr-nm img { width:19px; height:19px; object-fit:contain; }
.ap-dr-pct { font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
.ap-rv { position:fixed; inset:0; z-index:11000; background:rgba(0,0,0,.82); display:flex; align-items:center; justify-content:center; padding:20px; animation:ap-fade .2s; }
@keyframes ap-fade { from{opacity:0} to{opacity:1} }
.ap-rv-box { position:relative; text-align:center; max-width:420px; width:100%; padding:30px 20px; }
.ap-rv-glow { position:absolute; left:50%; top:90px; width:280px; height:280px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, var(--ck) 0%, transparent 62%); opacity:0; animation:ap-glow 2s ease-in-out .85s infinite; }
@keyframes ap-glow { 0%,100%{opacity:.28; transform:translate(-50%,-50%) scale(.9)} 50%{opacity:.5; transform:translate(-50%,-50%) scale(1.1)} }
/* Кружка (заглушка): падает сверху, содержимое выпивается */
/* ×1.2 крупнее; left:16px — центрируем ТЕЛО кружки (ручка справа в центровку не входит) */
.ap-mug { position:relative; z-index:1; width:161px; height:170px; left:16px; margin:0 auto 4px; animation:ap-fall .75s cubic-bezier(.3,.7,.4,1.05) both; }
@keyframes ap-fall { 0%{transform:translateY(-118vh) rotate(-12deg);} 66%{transform:translateY(12px) rotate(5deg);} 82%{transform:translateY(-5px) rotate(-2deg);} 100%{transform:translateY(0) rotate(0);} }
/* слои: напиток (ЗАД, сквозь прозрачное окно кружки) → кружка (перёд) → стекло (верх, screen) */
.ap-mug-cup { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.ap-mug-liq { position:absolute; z-index:1; left:8%; right:24%; top:14%; bottom:14%; overflow:hidden; }
.ap-mug-liq .ap-mug-fill { width:100%; height:100%; object-fit:cover; animation:ap-drink .85s ease-in .95s both; }
/* Стекло совпадает с областью напитка (по стеклянной части кружки). У glass_mask прозрачные
   поля (~23% по бокам, содержимое = 53%×79% картинки) — компенсируем неравномерным зумом
   фона 187%×127%, чтобы стекло по ширине было как кружка, а не вдвое уже. */
.ap-mug-glass { position:absolute; z-index:3; left:8%; right:24%; top:14%; bottom:14%; background:url(/assets/icons/tavern/glass_mask.webp) center/187% 127% no-repeat; mix-blend-mode:screen; opacity:.7; pointer-events:none; }
@keyframes ap-drink { 0%{clip-path:inset(0 0 0 0);} 100%{clip-path:inset(100% 0 0 0);} }
/* мини-кружка коктейля в ячейке ленты (статичная) */
.ap-ckm { position:relative; width:38px; height:40px; }
.ap-ckm-c { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; }
.ap-ckm-liq { position:absolute; z-index:1; left:8%; right:24%; top:14%; bottom:14%; overflow:hidden; }
.ap-ckm-liq .ap-ckm-f { width:100%; height:100%; object-fit:cover; }
.ap-ckm-glass { position:absolute; z-index:3; left:8%; right:24%; top:14%; bottom:14%; background:url(/assets/icons/tavern/glass_mask.webp) center/187% 127% no-repeat; mix-blend-mode:screen; opacity:.7; pointer-events:none; }
.ap-rv-ttl { font-family:var(--font-title); font-size:1.5rem; color:#f0c040; text-shadow:0 0 14px rgba(240,192,64,.5); margin:16px 0 14px; opacity:0; transform:scale(.6); animation:ap-drunk .5s cubic-bezier(.2,.8,.3,1.5) 1.5s both; }
@keyframes ap-drunk { to{opacity:1; transform:scale(1);} }
.ap-rv-items { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:18px; min-height:64px; }
.ap-rv-item { opacity:0; transform:scale(.4) translateY(10px); animation:ap-pop .45s cubic-bezier(.2,.8,.3,1.5) forwards; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px; }
@keyframes ap-pop { to{opacity:1; transform:scale(1) translateY(0)} }
.ap-rv-item .ap-rwd-ic { width:40px; height:40px; } .ap-rv-item .ap-ck-orb { width:40px; height:40px; }
.ap-rv-ok { min-width:170px; }
.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 { position:relative;
  /* Клетка ограничена И шириной, И высотой: 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-table — tbl-* (стол) + die-* (кубик, каскад на грань/пипы) ═══ */
/* Стол: фон в --tbl-bg (общий для стола и превью). 30 фонов: фелты, дерево, камень, сцены, паттерны. */
/* — Фелты (мягкий радиальный) — */
.tbl-normal  { --tbl-bg: radial-gradient(120% 92% at 50% 28%, #2a6e46, #0c3320 82%); }
.tbl-crimson { --tbl-bg: radial-gradient(120% 92% at 50% 28%, #8e2436, #3a0c14 82%); }
.tbl-azure   { --tbl-bg: radial-gradient(120% 92% at 50% 28%, #2a5aa0, #0c1f45 82%); }
.tbl-violet  { --tbl-bg: radial-gradient(120% 92% at 50% 28%, #5a3a86, #241040 82%); }
.tbl-noir    { --tbl-bg: radial-gradient(120% 92% at 50% 32%, #2b2b32, #0a0a0e 82%); }
/* — Дерево (волокна) — */
.tbl-oak      { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Cpath d='M0 5C16 3 28 7 44 5M0 13C16 11 28 15 44 13M0 21C16 19 28 23 44 21' stroke='%23000000' stroke-width='0.9' stroke-opacity='0.16' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#b5824a,#7a5730); }
.tbl-mahogany { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Cpath d='M0 5C16 3 28 7 44 5M0 13C16 11 28 15 44 13M0 21C16 19 28 23 44 21' stroke='%23000000' stroke-width='0.9' stroke-opacity='0.22' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#7c3024,#3a130d); }
.tbl-walnut   { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Cpath d='M0 5C16 3 28 7 44 5M0 13C16 11 28 15 44 13M0 21C16 19 28 23 44 21' stroke='%23000000' stroke-width='0.9' stroke-opacity='0.25' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#5a3d28,#281910); }
/* — Камень — */
.tbl-marble     { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 16C18 24 28 6 46 15C54 19 58 13 64 17M0 42C14 35 30 48 42 39C50 33 58 41 64 37' stroke='%23a8a4b0' stroke-width='1' stroke-opacity='0.55' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#f3f1f4,#cdc9d2); }
.tbl-onyxmarble { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 16C18 24 28 6 46 15C54 19 58 13 64 17M0 42C14 35 30 48 42 39C50 33 58 41 64 37' stroke='%23d4af37' stroke-width='1' stroke-opacity='0.5' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#26262e,#0c0c12); }
.tbl-granite    { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='5' cy='7' r='1.1' fill='%23ffffff' fill-opacity='0.13'/%3E%3Ccircle cx='19' cy='4' r='0.9' fill='%23000000' fill-opacity='0.25'/%3E%3Ccircle cx='23' cy='18' r='1' fill='%23ffffff' fill-opacity='0.1'/%3E%3Ccircle cx='11' cy='21' r='0.8' fill='%23000000' fill-opacity='0.22'/%3E%3C/svg%3E"), linear-gradient(160deg,#5c5c64,#33333a); }
/* — Небо / сцены — */
.tbl-starry  { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='8' cy='10' r='0.9' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='30' cy='7' r='0.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='40' cy='26' r='0.8' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='18' cy='34' r='0.7' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='44' cy='44' r='0.5' fill='%23fff' fill-opacity='0.4'/%3E%3C/svg%3E"), radial-gradient(120% 95% at 50% 12%, #1e2f5c, #06091a 82%); }
.tbl-aurora  { --tbl-bg: radial-gradient(80% 55% at 28% 18%, rgba(80,255,180,0.30), transparent 60%), radial-gradient(75% 55% at 76% 32%, rgba(160,90,255,0.24), transparent 60%), linear-gradient(180deg,#07202e,#0a1030); }
.tbl-sunset  { --tbl-bg: linear-gradient(180deg, #ff9a4d 0%, #ff5f7e 46%, #8a3b9a 100%); }
.tbl-dawn    { --tbl-bg: linear-gradient(180deg, #ffe3b8 0%, #ffb8c8 48%, #b9c4ee 100%); }
.tbl-abyss   { --tbl-bg: radial-gradient(110% 100% at 50% 0%, #1a6a9a, #041428 78%); }
.tbl-lava    { --tbl-bg: radial-gradient(58% 44% at 50% 78%, rgba(255,110,30,0.6), transparent 66%), radial-gradient(120% 90% at 50% 40%, #4a160c, #120402 82%); }
.tbl-glacier { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M6 0L14 16L4 30M30 4L24 22L38 34M46 10L34 26L44 46' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.3' fill='none'/%3E%3C/svg%3E"), radial-gradient(120% 95% at 50% 18%, #d0eaff, #7fb0d6 82%); }
.tbl-forest  { --tbl-bg: radial-gradient(120% 95% at 50% 22%, #216040, #0a2616 82%); }
.tbl-desert  { --tbl-bg: linear-gradient(180deg, #e8c48a 0%, #c99a5a 52%, #9c6c3a 100%); }
.tbl-nebula  { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='10' cy='12' r='0.8' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='34' cy='9' r='0.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='42' cy='30' r='0.7' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='16' cy='38' r='0.5' fill='%23fff' fill-opacity='0.45'/%3E%3C/svg%3E"), radial-gradient(85% 65% at 28% 26%, rgba(150,60,200,0.55), transparent 55%), radial-gradient(85% 65% at 76% 62%, rgba(50,90,200,0.5), transparent 55%), linear-gradient(160deg,#190d33,#080416); }
/* — Роскошь / тема — */
.tbl-royal   { --tbl-bg: linear-gradient(160deg, rgba(212,175,55,0.20), transparent 46%), radial-gradient(120% 92% at 50% 28%, #4d2b80, #1e0e38 82%); }
.tbl-emerald { --tbl-bg: linear-gradient(150deg, rgba(212,175,55,0.16), transparent 46%), radial-gradient(120% 92% at 50% 28%, #1a7a54, #08321f 82%); }
.tbl-sakura  { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='%23ffffff' fill-opacity='0.22'%3E%3Cellipse cx='12' cy='14' rx='3' ry='1.6' transform='rotate(25 12 14)'/%3E%3Cellipse cx='38' cy='30' rx='3' ry='1.6' transform='rotate(-40 38 30)'/%3E%3Cellipse cx='22' cy='44' rx='2.6' ry='1.4' transform='rotate(60 22 44)'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(170deg, #ffd9e6, #efa9c4 70%); }
/* — Паттерны — */
.tbl-hive    { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24'%3E%3Cpath d='M7 1L14 5V13L7 17L0 13V5Z M21 1L28 5V13L21 17L14 13' fill='none' stroke='%235ad0ff' stroke-width='0.7' stroke-opacity='0.22'/%3E%3C/svg%3E"), linear-gradient(160deg,#1a2230,#0a1018); }
.tbl-argyle  { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 0L40 20L20 40L0 20Z' fill='none' stroke='%23c9a24b' stroke-width='0.8' stroke-opacity='0.28'/%3E%3C/svg%3E"), linear-gradient(160deg,#2a2a3a,#141420); }
.tbl-chevron { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cpath d='M0 12L12 4L24 12M0 4L12 -4M12 -4L24 4' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.1' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#243040,#101820); }
.tbl-polka   { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='7' cy='7' r='2.4' fill='%23ffffff' fill-opacity='0.12'/%3E%3Ccircle cx='22' cy='22' r='2.4' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 50% 32%, #3a2a4a, #1a1226 82%); }
.tbl-waves   { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20'%3E%3Cpath d='M0 10C8 2 16 18 24 10C32 2 40 18 48 10' stroke='%23aef0ff' stroke-width='1' stroke-opacity='0.18' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#134a5a,#06202a); }
.tbl-deco    { --tbl-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg stroke='%23d4af37' stroke-width='0.7' stroke-opacity='0.3' fill='none'%3E%3Cpath d='M24 48L4 12M24 48L14 8M24 48L24 6M24 48L34 8M24 48L44 12'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(160deg,#1a1a22,#0a0a10); }
.kb-table[class*="tbl-"] { background: var(--tbl-bg); }
/* Кубик: грань (цвет/узор/блик/свечение) + пипы (цвет/форма/свечение). 30 стилей. Формы пипов — в переменных. */
:root {
  --pip-diamond: polygon(50% 3%, 97% 50%, 50% 97%, 3% 50%);
  --pip-star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  --pip-cross: polygon(36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%, 64% 64%, 64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%);
  --pip-tri: polygon(50% 3%, 95% 93%, 5% 93%);
  --pip-hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
/* ─ Металлы (диагональный блик) ─ */
.die-gold   .dp-face { background: linear-gradient(135deg, rgba(255,255,255,.5) 0 14%, transparent 34%), linear-gradient(160deg,#ffe7a0,#c9962e); box-shadow: inset 0 0 0 1px rgba(120,80,0,.45); }
.die-gold   .dp-pip.on { background:#5a3d0e; box-shadow: inset 0 -1px 1px rgba(255,255,255,.4); }
.die-silver .dp-face { background: linear-gradient(135deg, rgba(255,255,255,.6) 0 14%, transparent 34%), linear-gradient(160deg,#f4f6f8,#aeb4bd); box-shadow: inset 0 0 0 1px rgba(90,100,110,.4); }
.die-silver .dp-pip.on { background:#3a4048; }
.die-copper .dp-face { background: linear-gradient(135deg, rgba(255,240,220,.5) 0 14%, transparent 34%), linear-gradient(160deg,#e6a06a,#8a4a24); box-shadow: inset 0 0 0 1px rgba(90,40,10,.45); }
.die-copper .dp-pip.on { background:#3a1c0c; }
/* ─ Кость / жемчуг / камень ─ */
.die-bone   .dp-face { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 7L9 11M15 4L17 9M6 18L11 15M19 14L15 20' stroke='%237a6a48' stroke-width='0.7' stroke-opacity='0.45' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#ece0c4,#c8b791); box-shadow: inset 0 0 0 1px rgba(120,100,60,.5); }
.die-bone   .dp-pip.on { background:#5c4a2c; box-shadow: inset 0 -1px 1px rgba(255,255,255,.25); }
.die-pearl  .dp-face { background: linear-gradient(125deg,#ffffff,#f0e6ff 30%,#e6f6ff 55%,#fff0f6 80%); box-shadow: inset 0 0 0 1px rgba(160,150,180,.4); }
.die-pearl  .dp-pip.on { background:#9a8fb0; }
.die-obsidian .dp-face { background: linear-gradient(130deg, rgba(180,190,220,.35) 0 12%, transparent 32%), linear-gradient(160deg,#2c2c34,#0c0c11); box-shadow: inset 0 0 0 1px rgba(180,180,200,.3); }
.die-obsidian .dp-pip.on { background:#f0f0f6; clip-path: var(--pip-diamond); border-radius:0; }
.die-onyx   .dp-face { background: linear-gradient(160deg,#26262c,#0a0a0e); box-shadow: inset 0 0 0 1px rgba(120,120,130,.35); }
.die-onyx   .dp-pip.on { background:#eef0f4; }
/* ─ Самоцветы (гранёный блик) ─ */
.die-ruby     .dp-face { background: linear-gradient(140deg, rgba(255,255,255,.4) 0 12%, transparent 30%), linear-gradient(160deg,#d1465c,#7c0f22); box-shadow: inset 0 0 0 1px rgba(255,180,190,.35); }
.die-ruby     .dp-pip.on { background:#ffe0e6; }
.die-sapphire .dp-face { background: linear-gradient(140deg, rgba(255,255,255,.4) 0 12%, transparent 30%), linear-gradient(160deg,#4a86dc,#123a72); box-shadow: inset 0 0 0 1px rgba(190,215,255,.35); }
.die-sapphire .dp-pip.on { background:#e2edff; }
.die-emerald  .dp-face { background: linear-gradient(140deg, rgba(255,255,255,.4) 0 12%, transparent 30%), linear-gradient(160deg,#42b374,#0e5c36); box-shadow: inset 0 0 0 1px rgba(190,255,215,.32); }
.die-emerald  .dp-pip.on { background:#e6fff0; }
.die-amethyst .dp-face { background: linear-gradient(140deg, rgba(255,255,255,.42) 0 12%, transparent 30%), linear-gradient(160deg,#b06fd6,#5a2a8a); box-shadow: inset 0 0 0 1px rgba(230,200,255,.35); }
.die-amethyst .dp-pip.on { background:#f2e4ff; }
.die-jade   .dp-face { background: linear-gradient(160deg,#6fbf94,#2c6a4e); box-shadow: inset 0 0 0 1px rgba(20,80,50,.5); }
.die-jade   .dp-pip.on { background:#f2ffe9; clip-path: var(--pip-tri); border-radius:0; }
/* ─ Лёд / огонь / лава ─ */
.die-ice    .dp-face { background: linear-gradient(120deg, rgba(255,255,255,.5) 0 18%, transparent 38%), linear-gradient(160deg,#e3f2ff,#a9d3ef); box-shadow: inset 0 0 0 1px rgba(90,140,180,.4); }
.die-ice    .dp-pip.on { background:#2a5f82; border-radius:22%; }
.die-fire   .dp-face { background: radial-gradient(80% 60% at 50% 90%, rgba(255,230,120,.5), transparent 60%), linear-gradient(160deg,#ff9f3d,#d6371a); box-shadow: inset 0 0 0 1px rgba(120,40,0,.5), 0 0 5px rgba(255,120,40,.5); }
.die-fire   .dp-pip.on { background:#3a1000; clip-path: var(--pip-diamond); border-radius:0; }
.die-lava   .dp-face { background: radial-gradient(60% 45% at 50% 80%, rgba(255,120,30,.55), transparent 62%), linear-gradient(160deg,#4a2018,#160705); box-shadow: inset 0 0 0 1px rgba(120,50,20,.5); }
.die-lava   .dp-pip.on { background:#ff8a2a; box-shadow: 0 0 3px #ff6a10, 0 0 6px #ff6a10; }
/* ─ Неон / токсик / кибер / пустота ─ */
.die-neon   .dp-face { background: repeating-linear-gradient(0deg, rgba(90,220,255,.13) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, rgba(90,220,255,.13) 0 1px, transparent 1px 6px), linear-gradient(160deg,#1b1233,#0c0820); box-shadow: inset 0 0 0 1px rgba(120,90,255,.55); }
.die-neon   .dp-pip.on { background:#2ef0ff; box-shadow: 0 0 3px #2ef0ff, 0 0 7px #2ef0ff; }
.die-toxic  .dp-face { background: radial-gradient(70% 55% at 50% 40%, rgba(160,255,60,.35), transparent 65%), linear-gradient(160deg,#3f6a12,#12280a); box-shadow: inset 0 0 0 1px rgba(150,230,60,.45); }
.die-toxic  .dp-pip.on { background:#c8ff3a; clip-path: var(--pip-diamond); border-radius:0; box-shadow: 0 0 4px #a6f000; }
.die-cyber  .dp-face { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M0 6H8V0M14 0V6H22M22 16H14V22M8 22V16H0' stroke='%2300e0a0' stroke-width='0.8' stroke-opacity='0.4' fill='none'/%3E%3Ccircle cx='11' cy='11' r='1.4' fill='%2300e0a0' fill-opacity='0.5'/%3E%3C/svg%3E"), linear-gradient(160deg,#0f2230,#06121a); box-shadow: inset 0 0 0 1px rgba(0,224,160,.45); }
.die-cyber  .dp-pip.on { background:#25ffc0; clip-path: var(--pip-hex); border-radius:0; box-shadow: 0 0 4px #00e0a0; }
.die-void   .dp-face { background: radial-gradient(closest-side at 50% 50%, #1a0a2e, #060310 70%), radial-gradient(closest-side at 50% 50%, transparent 52%, rgba(150,80,255,.4) 60%, transparent 66%); box-shadow: inset 0 0 0 1px rgba(120,60,200,.5); }
.die-void   .dp-pip.on { background:#e8d6ff; clip-path: var(--pip-cross); border-radius:0; box-shadow: 0 0 4px #a066ff; }
/* ─ Космос / королевские (звёзды) ─ */
.die-galaxy .dp-face { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='6' cy='8' r='0.9' fill='%23ffffff' fill-opacity='0.7'/%3E%3Ccircle cx='22' cy='6' r='0.7' fill='%23ffffff' fill-opacity='0.5'/%3E%3Ccircle cx='16' cy='20' r='0.8' fill='%23ffffff' fill-opacity='0.6'/%3E%3Ccircle cx='26' cy='24' r='0.6' fill='%23ffffff' fill-opacity='0.45'/%3E%3C/svg%3E"), linear-gradient(150deg,#3a1a6a,#0e0b2a 70%); box-shadow: inset 0 0 0 1px rgba(150,120,255,.4); }
.die-galaxy .dp-pip.on { background:#fff3c0; clip-path: var(--pip-star); border-radius:0; }
.die-royal  .dp-face { background: linear-gradient(140deg, rgba(255,220,120,.28) 0 14%, transparent 34%), linear-gradient(160deg,#5a3aa0,#2a1550); box-shadow: inset 0 0 0 1px rgba(212,175,55,.5); }
.die-royal  .dp-pip.on { background:#ffd766; clip-path: var(--pip-star); border-radius:0; }
/* ─ Розовый / леденцы / океан / мята ─ */
.die-rose   .dp-face { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 18C13 18 8 14 8 10.6C8 9.2 9 8.4 10.1 8.4C10.9 8.4 12 9 13 10C14 9 15.1 8.4 15.9 8.4C17 8.4 18 9.2 18 10.6C18 14 13 18 13 18Z' fill='%23ffffff' fill-opacity='0.2'/%3E%3C/svg%3E"), linear-gradient(160deg,#ff9ec4,#e0619a); box-shadow: inset 0 0 0 1px rgba(180,60,110,.4); }
.die-rose   .dp-pip.on { background:#7a1e46; }
.die-candy  .dp-face { background: repeating-linear-gradient(45deg, #ff8fb0 0 6px, #7ec8ff 6px 12px, #ffe08a 12px 18px); box-shadow: inset 0 0 0 1px rgba(120,90,140,.35); }
.die-candy  .dp-pip.on { background:#ffffff; box-shadow: inset 0 -1px 1px rgba(0,0,0,.2), 0 0 2px rgba(0,0,0,.3); }
.die-ocean  .dp-face { background: radial-gradient(90% 70% at 50% 20%, #2f9bd6, #073a66 78%); box-shadow: inset 0 0 0 1px rgba(120,190,240,.35); }
.die-ocean  .dp-pip.on { background:#eaf6ff; }
.die-mint   .dp-face { background: linear-gradient(160deg,#c4f2da,#7ecfa6); box-shadow: inset 0 0 0 1px rgba(40,120,90,.4); }
.die-mint   .dp-pip.on { background:#1f5a42; border-radius:22%; }
/* ─ Дерево / мрамор / закат / кровь ─ */
.die-wood   .dp-face { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M2 5C10 4 16 6 24 5M2 12C10 11 16 13 24 12M2 19C10 18 16 20 24 19' stroke='%233a2510' stroke-width='0.8' stroke-opacity='0.35' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#a5713f,#6b4423); box-shadow: inset 0 0 0 1px rgba(60,40,15,.5); }
.die-wood   .dp-pip.on { background:#2a1808; }
.die-marble .dp-face { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 8C8 12 12 4 20 9C24 11 26 8 28 10M0 18C6 15 14 22 20 17C24 14 27 18 28 16' stroke='%23a8a4b0' stroke-width='0.9' stroke-opacity='0.5' fill='none'/%3E%3C/svg%3E"), linear-gradient(160deg,#f2f0f2,#cfcbd4); box-shadow: inset 0 0 0 1px rgba(120,116,130,.4); }
.die-marble .dp-pip.on { background:#3a3742; }
.die-sunset .dp-face { background: linear-gradient(180deg,#ffb15a,#ff6b7e 55%,#a44b8f); box-shadow: inset 0 0 0 1px rgba(140,60,90,.4); }
.die-sunset .dp-pip.on { background:#4a1830; }
.die-blood  .dp-face { background: radial-gradient(70% 90% at 50% 0%, rgba(255,40,40,.4), transparent 55%), linear-gradient(160deg,#7a0e12,#2a0406); box-shadow: inset 0 0 0 1px rgba(180,30,30,.45); }
.die-blood  .dp-pip.on { background:#ffd6d6; }

/* Пикер «Вид игры» */
.dsk-cat { margin-bottom:14px; }
.dsk-cat-t { font-size:.82rem; color:var(--text-dim); margin-bottom:7px; }
.dsk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
.dsk-item { display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 6px; border:1px solid var(--border); border-radius:9px; background:var(--bg-dark); cursor:pointer; color:var(--text); }
.dsk-item.is-cur { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
.dsk-item.is-locked { opacity:.5; cursor:default; }
.dsk-prev { width:40px; height:40px; display:block; border-radius:7px; }
.dsk-prev .dp-face { width:100%; height:100%; }
.dsk-prev-tbl { background: var(--tbl-bg); border:1px solid rgba(0,0,0,.3); }
.dsk-name { font-size:.74rem; text-align:center; line-height:1.1; }
.dsk-note { font-size:.64rem; color:var(--text-dim); }

/* Зона броска. Высота фиксирована: кнопка «Бросить кость» то появляется, то исчезает, и
   без этого доски прыгали и уезжали за край экрана. */
.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; }

/* Таверна: репутация у бармена и карточка гостя */
.tv-bar-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tv-rep { font-family:inherit; font-size:.74rem; color:var(--text-dim); letter-spacing:0; text-transform:none; white-space:nowrap; }
.tv-rep b { color:var(--gold); }
.tv-guest-name { font-family:var(--font-title); color:var(--gold); font-size:.95rem; margin-bottom:4px; }
.tv-guest-left { font-size:.74rem; white-space:nowrap; align-self:center; }
/* Пришедший гость: вертикальная центрированная карточка — имя, портрет, текст, кнопка. */
.tavern-guest-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:2px 0; }
.tavern-guest-card .tv-guest-name { margin:0; font-size:1.05rem; }
.tavern-guest-img { width:104px; height:104px; object-fit:contain; border-radius:10px; }
.tavern-guest-desc { font-size:.86rem; color:var(--text-dim); line-height:1.5; max-width:340px; }
.tavern-guest-btn { min-width:170px; padding:8px 20px; }

/* ── Кости онлайн: отдельный экран ─────────────────────────────────────────── */
.to-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.to-actions .btn { padding:6px 14px; font-size:.82rem; }
.to-panel { margin-bottom:10px; }
.to-count { margin-left:auto; }
.to-tables { max-height:none; }
.to-code { max-width:320px; margin:0 auto; text-align:center; }

/* Своя заявка — строкой в шапке действий, чтобы не уходить со списка ради отмены */
.to-mine { display:flex; align-items:center; gap:8px; font-size:.8rem; flex-wrap:wrap; }
.to-mine:empty { display:none; }
.to-mine .btn { padding:4px 10px; font-size:.76rem; }
.tv-code-inline b { color:var(--gold); letter-spacing:.14em; }

/* Идущие партии */
.to-runs { display:flex; flex-direction:column; gap:4px; }
.to-run {
  display:grid; grid-template-columns:1fr auto 1fr auto auto auto; align-items:center; gap:8px;
  padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); font-size:.8rem;
}
.to-run-side { color:var(--gold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.to-run-right { text-align:right; }
.to-run-score { font-variant-numeric:tabular-nums; color:var(--text-dim); white-space:nowrap; }
.to-run-bet { font-variant-numeric:tabular-nums; white-space:nowrap; }
.to-run-eyes { font-variant-numeric:tabular-nums; white-space:nowrap; }
.to-run-eyes img { width:1em; height:1em; object-fit:contain; vertical-align:middle; margin-right:3px; opacity:.7; }

.to-run .to-watch { padding:4px 10px; font-size:.76rem; }
@media (max-width:560px) {
  .to-run { grid-template-columns:1fr auto auto; row-gap:2px; }
  .to-run-side { grid-column:1; }
  .to-run-right { grid-column:1; grid-row:2; text-align:left; }
  .to-run-score { grid-column:2; grid-row:1; }
  .to-run-bet { grid-column:2; grid-row:2; text-align:right; }
  .to-run-eyes { grid-column:3; grid-row:1; }
  .to-run .to-watch { grid-column:3; grid-row:2; }
}

/* Стол зрителя */
.tw-table .kb-slot { cursor:default; }
.tw-leave { padding:4px 12px; font-size:.76rem; flex:0 0 auto; }
.tw-eyes { font-size:.76rem; color:var(--text-dim); white-space:nowrap; flex:0 0 auto; }

/* Сколько человек смотрит партию — в шапке стола, рядом со ставкой */
.kb-eyes { color:var(--text-dim); white-space:nowrap; }
.kb-eyes:empty { display:none; }

/* ── Окно в окне ───────────────────────────────────────────────────────────── */
/* Живёт в <body>, а не в #app: навигация перерисовывает #app целиком. */
.pip {
  position:fixed; z-index:9000; width:240px;
  background:var(--bg-panel); border:1px solid var(--border-gold); border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.55); overflow:hidden;
  font-size:.82rem; user-select:none;
}
.pip.is-wide { width:min(360px, calc(100vw - 24px)); }
.pip.is-drag { opacity:.92; box-shadow:0 12px 34px rgba(0,0,0,.7); }
.pip-head {
  display:flex; align-items:center; gap:6px; padding:6px 8px; cursor:grab;
  background:rgba(237,182,74,.1); border-bottom:1px solid var(--border);
}
.pip.is-drag .pip-head { cursor:grabbing; }
.pip-title { font-family:var(--font-title); color:var(--gold); font-size:.8rem; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pip-short { display:none; flex:1; color:var(--text-dim); font-size:.78rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.pip-btn { background:none; border:0; color:var(--text-dim); cursor:pointer; font-size:1rem;
  line-height:1; padding:2px 5px; font-family:inherit; }
.pip-btn:hover { color:var(--gold); }
.pip-body { padding:8px; display:flex; flex-direction:column; gap:6px; }

/* Свёрнутое: только строка состояния и кнопки в шапке */
.pip.is-folded { width:auto; max-width:min(280px, calc(100vw - 24px)); }
.pip.is-folded .pip-body { display:none; }
.pip.is-folded .pip-title { display:none; }
.pip.is-folded .pip-short { display:block; }

.pip-row { display:flex; align-items:center; gap:6px; }
.pip-btns { display:flex; gap:6px; margin-top:2px; }
.pip-btns .btn { flex:1; padding:5px 8px; font-size:.76rem; }

/* Стол, переехавший в окно: без своих отступов и фона — рамку даёт само окно */
.pip .kb-table { height:min(52vh, 380px); border:0; border-radius:0; padding:4px; }
.pip .kb-top { font-size:.72rem; }
.pip .kb-rules-btn, .pip .kb-leave { padding:2px 8px; font-size:.68rem; }

/* ── Шулер: полоса трюка над столом ────────────────────────────────────────── */
.kb-trick {
  width:100%; box-sizing:border-box; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:4px 8px; border:1px solid var(--border-gold); border-radius:8px;
  background:rgba(237,182,74,.07); font-size:.74rem; flex:0 0 auto;
}
.kb-trick-name { font-family:var(--font-title); color:var(--gold); white-space:nowrap; }
.kb-trick-hint { color:var(--text-dim); flex:1; min-width:120px; line-height:1.3; }
.kb-stake { white-space:nowrap; }
.kb-tbtn { padding:3px 9px; font-size:.72rem; flex:0 0 auto; }
/* Кривой стол: заколоченная клетка — в неё не лечь. Красная штриховка. */
.kb-slot-dead { background:repeating-linear-gradient(45deg,
  rgba(200,40,40,.5) 0 6px, rgba(110,18,18,.32) 6px 12px); box-shadow:inset 0 0 0 1px rgba(220,60,60,.55); }
.tv-trick-box { padding:8px; border:1px dashed var(--border-gold); border-radius:8px;
  font-size:.8rem; line-height:1.4; margin-bottom:10px; text-align:center; }

/* Итог партии глазами зрителя: кто победил, а не просто счёт */
.tw-final { display:flex; align-items:center; justify-content:center; gap:8px; font-size:.9rem;
  font-variant-numeric:tabular-nums; flex-wrap:wrap; }
/* Отсчёт до смены гостя — в заголовке плитки, а не у кнопки */
.tv-bar-title .tv-guest-left { font-size:.72rem; letter-spacing:0; text-transform:none; }

/* Кнопка «раскрыть на весь экран» в окне в окне.
   Был крестик — читался как «закрыть», хотя он возвращает за стол целиком. Готовой
   иконки в проекте нет, поэтому рисуем: рамка и стрелка из угла наружу. */
.pip-expand { position:relative; width:20px; height:18px; }
.pip-expand::before {
  content:''; position:absolute; left:4px; top:3px; width:9px; height:9px;
  border:1px solid currentColor; border-radius:2px;
}
.pip-expand::after {
  content:''; position:absolute; right:2px; top:2px; width:7px; height:7px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
}
/* Свёрнутая строка: чей ход и сколько секунд — главное в окне, пишем золотом */
.pip.is-folded .pip-short { color:var(--gold); font-weight:700; }

/* ── Чёрный торговец: прилавок ─────────────────────────────────────────────── */
.tv-goods { display:flex; flex-direction:column; gap:5px; max-height:52vh; overflow-y:auto; }
.tv-good {
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:8px;
  padding:6px 8px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg-card); font-size:.8rem;
}
.tv-good.is-sold { opacity:.45; }
.tv-good-img { width:32px; height:32px; object-fit:contain; flex:0 0 auto; }
/* Чертёж у торговца: крупно сам чертёж + меньшей картинкой снаряжение, чей он. */
.tv-good-bp { position:relative; display:inline-block; }
.tv-bp-base { width:100%; height:100%; object-fit:contain; display:block; }
.tv-bp-gear {
  position:absolute; right:-6px; bottom:-6px; width:24px; height:24px; object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75));
}
.tv-good-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-good-price { font-variant-numeric:tabular-nums; white-space:nowrap; }
.tv-good .tv-buy { padding:4px 10px; font-size:.76rem; }
@media (max-width:480px) {
  .tv-good { grid-template-columns:auto 1fr auto; row-gap:2px; }
  .tv-good-img { grid-row:1 / 3; }
  .tv-good-name { grid-column:2; }
  .tv-good-price { grid-column:2; grid-row:2; }
  .tv-good .tv-buy { grid-column:3; grid-row:1 / 3; }
}

/* ── Сундук наград гильдии: одна награда = одна горизонтальная ячейка ───────── */
.grw-row { display:flex; align-items:center; gap:9px; padding:6px 9px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:8px; }
.grw-ic { flex:0 0 auto; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; }
.grw-ic img { width:30px; height:30px; object-fit:contain; }
.grw-nm { flex:1; min-width:0; font-size:.9rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
.grw-take { flex:0 0 auto; padding:4px 14px; font-size:.82rem; }

/* ── Доска временных событий ───────────────────────────────────────────────── */
.te-tabs { display:flex; gap:6px; margin:0; flex-shrink:0; }
.te-tabs .daily-tab-btn { padding:3px 12px; font-size:.74rem; border-radius:4px; }
.te-card { border:1px solid var(--border); border-radius:8px; padding:8px; margin-bottom:8px; background:var(--bg-card); }
.te-card.is-past { opacity:.85; }
.tr-reward { justify-content:center; }
.te-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.te-ico { width:36px; height:36px; object-fit:contain; flex:0 0 auto; border-radius:6px; }
.te-title { font-family:var(--font-title); color:var(--gold); font-size:.88rem; flex:0 1 auto; min-width:0;
  line-height:1.2; overflow-wrap:anywhere; word-break:break-word; }
/* Кнопка «инфо» — сразу за названием, открывает правила события */
.te-info { flex:0 0 auto; width:22px; height:22px; padding:0; background:none; border:none; cursor:pointer;
  opacity:.6; display:inline-flex; align-items:center; justify-content:center; }
.te-info:hover { opacity:1; }
.te-info img { width:15px; height:15px; object-fit:contain; }
.te-desc { font-size:.78rem; color:var(--text-dim); line-height:1.4; margin:-2px 0 8px; }
/* Сколько осталось до конца — крупно и золотом; уводим вправо, инфо остаётся у названия */
.te-left { font-size:.9rem; color:var(--gold); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; margin-left:auto; }
/* Анонс: время начала, а не обратный отсчёт — человеку нужна дата, чтобы прикинуть планы */
.te-starts { display:flex; align-items:center; gap:6px; font-size:.82rem; }
.te-starts-at { color:var(--gold); font-size:.95rem; font-variant-numeric:tabular-nums; }
/* Нижний ряд карточки — ОДИН: слева вход в механику (у анонса вместо него время начала),
   справа «Награды». Кнопки одного размера: на одном уровне разнобой сразу видно. */
.te-acts { display:flex; align-items:center; gap:8px; margin-top:8px; }
.te-acts .btn { padding:4px 12px; font-size:.76rem; white-space:nowrap; }
/* Анонс: время начала слева, «Награды» прижаты вправо */
.te-acts > .te-starts { flex:1; min-width:0; }
/* Идёт: вход и «Награды» — две РАВНЫЕ кнопки по центру. Тянуть их по всей доске незачем:
   на широком экране это две полосы через пол-карточки. Ужимаются только на узкой. */
.te-acts.is-pair { justify-content:center; }
.te-acts.is-pair > * { flex:0 1 150px; text-align:center; }

/* Босс */
.te-boss { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.te-boss-img { width:48px; height:48px; object-fit:contain; flex:0 0 auto; }
.te-boss-body { flex:1; min-width:0; }
.te-boss-name { font-size:.84rem; margin-bottom:4px; }
.te-hp { position:relative; height:16px; border-radius:8px; overflow:hidden;
  background:rgba(0,0,0,.45); box-shadow:inset 0 0 0 1px var(--border); }
.te-hp-fill { height:100%; background:linear-gradient(90deg,#8b1a1a,#e05555); transition:width .3s ease; }
.te-hp-txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-variant-numeric:tabular-nums; text-shadow:0 1px 2px #000; }
/* Стоит в нижнем ряду на месте кнопки входа — бить уже некого */
.te-killed { color:var(--gold); font-size:.84rem; padding:4px 0; }

/* ── Турнир костей: карточка на доске ──────────────────────────────────────── */
.tt-info { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.78rem; margin-bottom:6px; }
.tt-sub { margin-bottom:0; }
.tt-my { font-size:.8rem; }
.tt-my:empty { display:none; }
.tt-wait { font-size:.78rem; text-align:center; }

/* ── Турнир костей: сетка ──────────────────────────────────────────────────────
   Раунды — колонками слева направо. На узком экране их больше, чем влезает, поэтому
   сетка едет вбок; вертикально матчи не жмём — счёт должен читаться. */
/* Мой матч — над сеткой: вход, ожидание соперника и с кем играю. Это главное, зачем
   игрок сюда зашёл, поэтому стоит выше и выделено. */
.tr-me { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-bottom:10px; padding:8px 10px; font-size:.82rem;
  border:1px solid var(--border-gold); border-radius:8px; background:rgba(237,182,74,.07); }
.tr-me .btn { padding:5px 14px; font-size:.78rem; white-space:nowrap; }
.tr-grid { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; align-items:stretch; }
.tr-col { flex:0 0 auto; width:190px; display:flex; flex-direction:column; gap:8px; }
/* Матчи следующего круга встают ПО ЦЕНТРУ между питающими — как в настоящей сетке: колонки
   одной высоты (stretch), а матчи распределяем space-around: 4 матча равномерно, 2 центрируются
   в половинах, 1 — по центру. Так финал оказывается напротив середины полуфиналов и т.д. */
.tr-matches { flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:8px; min-height:0; }
.tr-col-t { font-size:.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; text-align:center; }
.tr-col-t.is-now { color:var(--gold); }
.tr-m { position:relative; display:flex; flex-direction:column; gap:3px; padding:6px;
  border:1px solid var(--border); border-radius:7px; background:var(--bg-card); }
.tr-m.is-live { border-color:var(--gold); }
.tr-p { display:flex; align-items:center; gap:6px; font-size:.78rem; min-height:22px; }
.tr-p.is-none { color:var(--text-dim); justify-content:center; }
.tr-p.is-loss { opacity:.45; }
.tr-av { width:20px; height:20px; border-radius:4px; object-fit:cover; flex-shrink:0; border:1px solid var(--border); }
.tr-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-p.is-win .tr-name { color:var(--green-light); font-weight:700; }
.tr-p.is-win .tr-score { color:var(--green-light); }
.tr-score { flex-shrink:0; font-variant-numeric:tabular-nums; font-weight:700; }
.tr-tag { align-self:center; font-size:.62rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
.tr-tag.is-live { color:var(--gold); }
.tr-watch { align-self:center; padding:1px 9px; font-size:.62rem; margin-top:2px; }
.tr-dl { color:var(--gold); font-variant-numeric:tabular-nums; }
.tr-champ { display:flex; align-items:center; gap:8px; justify-content:center; margin-bottom:10px;
  font-family:var(--font-title); font-size:.95rem; }
.tr-champ b { color:var(--gold); }

/* Топ участников */

/* Награды ждут, пока за ними придут */
.te-rewards { border:1px solid var(--border-gold); border-radius:8px; padding:8px; margin-bottom:8px;
  background:rgba(237,182,74,.07); }
.te-rw-title { font-family:var(--font-title); color:var(--gold); font-size:.8rem; margin-bottom:5px; }
.te-rw-row { display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center;
  font-size:.78rem; padding:3px 0; }
.te-rw-row .btn { padding:3px 10px; font-size:.74rem; }

/* ── Бой с мировым боссом ──────────────────────────────────────────────────────
   Сам бой рисует общая арена (классы .combat-… и .cb-… выше), как в рейде. Своего тут
   только шапка (выход + остаток пачки) и кнопка удара. */
.bf-head { flex:1; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bf-leave { font-size:1.4rem; padding:2px 6px 2px 0; flex:0 0 auto; }
/* Оставшиеся удары точками — видно, сколько ещё, не читая цифру */
.bf-hits { display:flex; gap:5px; }
.bf-dot { width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px rgba(237,182,74,.6); }
.bf-dot.is-out { background:transparent; box-shadow:inset 0 0 0 1px var(--border); }
/* .combat-actions — сетка под четыре действия боя; удар тут один, во всю ширину */
.bf-hit { grid-column:1/-1; padding:10px; font-size:.9rem; }

/* ── Награды события: таблица мест и полоса вклада ─────────────────────────── */
.rw-sec-title { font-size:.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px;
  margin:12px 0 6px; }
.rw-sec-title:first-of-type { margin-top:0; }
.rw-mine-top { display:flex; align-items:center; gap:10px; font-size:.8rem; margin-bottom:4px; flex-wrap:wrap; }

/* ── Мой вклад: дорожка вех ──────────────────────────────────────────────────
   Вехи стоят через равные промежутки (пропорционально значению они слиплись бы у левого
   края), поэтому дорожка длиннее экрана — её листают вбок. */
.rw-track-wrap { overflow-x:auto; overflow-y:hidden; padding:26px 4px 46px; -webkit-overflow-scrolling:touch; }
.rw-track { position:relative; height:12px; width:100%; }
.rw-bar { position:absolute; inset:0; border-radius:6px; background:rgba(0,0,0,.4);
  box-shadow:inset 0 0 0 1px var(--border); overflow:hidden; }
.rw-bar-fill { height:100%; background:linear-gradient(90deg,#c9a227,#f0d060); transition:width .3s ease; }
.rw-mark { position:absolute; top:0; bottom:0; transform:translateX(-50%); display:flex;
  align-items:center; justify-content:center; }
.rw-mark-min { position:absolute; bottom:calc(100% + 7px); font-size:.72rem; color:var(--text-dim);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.rw-mark-dot { width:14px; height:14px; border-radius:50%; background:var(--bg-panel);
  box-shadow:inset 0 0 0 2px var(--border); }
.rw-mark.is-done .rw-mark-dot { background:var(--gold); box-shadow:0 0 9px rgba(237,182,74,.75); }
/* Награда под вехой — крупно: её и приходят рассматривать */
.rw-mark-card { position:absolute; top:calc(100% + 7px); display:flex; align-items:center; gap:4px; }
.rw-mark-icon { width:26px; height:26px; object-fit:contain; }
.rw-mark-rep { font-family:var(--font-title); font-size:1rem; color:var(--text-dim); font-variant-numeric:tabular-nums; }
/* Непройденная веха приглушена — сразу видно, что уже твоё, а что ещё нет */
.rw-mark:not(.is-done) .rw-mark-icon { filter:grayscale(1); opacity:.45; }
.rw-mark.is-done .rw-mark-rep { color:var(--gold); }
.rw-next { font-size:.76rem; }

/* ── Ступени за место — квадратами: место, значок репутации, сколько дадут ───
   Ужимаются, а не уезжают за край: так ряд остаётся по центру на любой ширине. */
.rw-sq-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.rw-sq { flex:0 1 84px; aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; padding:4px;
  border:1px solid var(--border); border-radius:8px; background:var(--bg-card); }
/* Ступень с двумя наградами (репутация + серебро) — квадрат тот же, содержимое мельче */
.rw-sq.has-2 { gap:1px; }
.rw-sq.has-2 .rw-sq-icon { width:20px; height:20px; }
.rw-sq.has-2 .rw-sq-n { font-size:.86rem; }
.rw-sq-place { font-size:.62rem; color:var(--text-dim); text-align:center; line-height:1.2; }
.rw-sq-row2 { display:flex; align-items:center; gap:4px; }
.rw-sq-icon { width:28px; height:28px; object-fit:contain; }
.rw-sq-n { font-family:var(--font-title); color:var(--gold); font-size:1.05rem; font-variant-numeric:tabular-nums; }
/* Значок репутации в строку с текстом — у бармена и в «заработано» */
.rw-inline-icon { width:1.15em; height:1.15em; object-fit:contain; vertical-align:middle; }
.rw-table { max-height:34vh; overflow-y:auto; }
.rw-table .table th, .rw-table .table td { padding:4px 6px; font-size:.76rem; }
.rw-table th.rw-num, .rw-table td.rw-num { text-align:right; font-variant-numeric:tabular-nums; }
.rw-table tr.is-me td { background:rgba(237,182,74,.1); }

/* Лидеры события — списком в стиле игры (как онлайн и друзья): аватар, имя, уровень */
.rw-list { display:flex; flex-direction:column; max-height:46vh; overflow-y:auto; margin-top:8px; }
.rw-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--border); padding:7px 6px; color:var(--text);
  font-family:inherit; font-size:.82rem; }
.rw-row:hover { background:var(--bg-card); }
.rw-row.is-me { background:rgba(237,182,74,.1); }
.rw-row img { width:34px; height:34px; border-radius:7px; object-fit:cover; flex-shrink:0; border:1px solid var(--border); }
.rw-place-n { width:1.6em; text-align:center; color:var(--text-dim); font-variant-numeric:tabular-nums; flex-shrink:0; }
.rw-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gold); }
.rw-lvl { flex-shrink:0; font-size:.74rem; }
.rw-score { flex-shrink:0; font-variant-numeric:tabular-nums; }

/* Очень узкие экраны — плитки навыков в бою мельче, чтобы в ряд влезало по 3 (первый ряд 3, второй 2). */
@media (max-width:360px) {
  .nf-abils { gap:6px !important; }
  .nf-abil { width:66px !important; height:66px !important; }
  .nf-abil.basic .nf-abil-ic { width:38px !important; height:38px !important; }
  .nf-abil-name { font-size:.52rem !important; }
  .nf-abil-mana { min-width:16px !important; height:16px !important; font-size:.6rem !important; padding:0 3px !important; }
  .nf-abil-i { width:16px !important; height:16px !important; }
}