/* ═══════════════════════════════════════════════════════════════════
   responsive-fix.css — мобилно и таблет поправки (390 / 768 / 1024)
   Зарежда се ПОСЛЕДЕН, след home-v3.css.
   Само преливане, застъпване и отрязан текст. Дизайнът не се променя:
   няма нови цветове, шрифтове или размери на карти.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. ХЕДЪР 721–1239 px: на два реда
   Проблем: home-v3.css (min-width:721) дава flex-wrap:nowrap и
   височина 74px, а дясната част (онлайн · търсене · VT · приятели ·
   фокус · профил · изход) е 516px. При 768 → 339px извън екрана,
   при 1024 → 182px. Менюто и профилът се отрязват.
   Решение: менюто минава на втори ред (както е заложено в inline
   стила на index.html за 901–1450), нищо не се крие и не се свива.
   ───────────────────────────────────────────────────────────────── */
@media (min-width:721px) and (max-width:1239px){
  body.hv3 header.top{
    display:flex; flex-wrap:wrap; align-items:center;
    height:auto; min-height:74px; row-gap:0;
    padding:9px 20px 0; gap:0 18px;
  }
  body.hv3 header.top .brand{order:1; padding-bottom:9px}
  body.hv3 header.top .topright{
    order:2; margin-left:auto; gap:14px;
    flex-wrap:nowrap; padding-bottom:9px;
  }
  body.hv3 header.top nav.nav{
    order:3; flex:1 1 100%; width:100%;
    margin:0; padding:7px 0 8px;
    border-left:0; border-top:1px solid rgba(242,233,216,.1);
    justify-content:flex-start; gap:24px;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  }
  body.hv3 header.top nav.nav::-webkit-scrollbar{display:none}

  /* тъч-цели: в плоската лента бутоните бяха 10px високи */
  body.hv3 header.top .topright .ghost,
  body.hv3 header.top .topright button,
  body.hv3 header.top .topright .authbox .logout,
  body.hv3 header.top .topright .authbox #logoutBtn{
    display:inline-flex; align-items:center; min-height:38px;
  }
  body.hv3 header.top .topright .findbtn{min-width:34px; justify-content:center}
  body.hv3 header.top nav.nav .tab{min-height:34px; display:inline-flex; align-items:center}
}

/* ─────────────────────────────────────────────────────────────────
   2. ПАНЕЛЪТ С КОЛЕЛОТО: 16px по-широк от колоната
   Проблем: .mini е <select> с дълги опции („Общество и институции“),
   min-width:auto го държи на 322px, а grid клетката е 344px →
   панелът излиза 360px и стърчи извън .wrap (при 390 px: 18→378).
   Решение: позволяваме на клетката и на select-а да се свият.
   ───────────────────────────────────────────────────────────────── */
body.hv3 .grid > .panel,
body.hv3 .wheelpanel{min-width:0}
body.hv3 .wheelpanel .panelhead{min-width:0; flex-wrap:wrap}
body.hv3 .wheelpanel .mini{min-width:0; max-width:100%}
body.hv3 .wheelwrap{min-width:0}
/* едноколонната подредба при ≤1100 е с „1fr“, т.е. minmax(auto,1fr):
   клетката расте до min-content на панела вместо да се свие до 344px */
@media (max-width:1100px){
  body.hv3 .grid{grid-template-columns:minmax(0,1fr)}
}

/* ─────────────────────────────────────────────────────────────────
   3. АРЕНА, кръговете под 480px: „✓ ПОВТОРИ“ беше отрязано
   (етикетът иска 56px в 51px кутия при 5 колони по 60px;
   arena-deco.css:746 вдига шрифта на 9.5px !important и го чупи —
   базовият размер там е 7px). Мрежата остава 5×2, стяга се само
   надписът в кръгчето, за да се събере цял.
   ───────────────────────────────────────────────────────────────── */
@media (max-width:480px){
  body.hv3 .dc-card{padding-left:1px !important; padding-right:1px !important}
  body.hv3 .dc-card .dc-cta,
  body.hv3 .dc-card .dc-cta span{
    font-size:9px !important;
    letter-spacing:0 !important;
    padding-left:1px !important;
    padding-right:1px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   4. ТЕЛЕФОНЕН ХЕДЪР (≤720): „v…“ вместо име + застъпване на „Изход“
   Проблем: .userchip е 150px, а вътре има 4 неща (чип 68 + аватар
   част, VIP лента 32, VIP значка 12, „Изход“ 49). Flex е nowrap без
   shrink → лентата и значката излизат върху „Изход“, а b.nm-gold
   получава 21px и име от 8 букви се показва като „v…“.
   Решение: на телефон в чипа остават аватар · име · изход (VIP се
   вижда в профила и върху картите), а името получава реална ширина
   с многоточие, вместо да се свива до един знак.
   ───────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  /* логото не бива да се свива под собствената си дума: с overflow:hidden
     grid колоната падаше до 0 и „кръгозор“ се режеше по средата */
  body.hv3 header.top .brand{flex:0 0 auto; min-width:max-content}
  body.hv3 header.top .topright .authbox .userchip{
    max-width:none; gap:8px; padding:4px 6px 4px 10px; overflow:visible;
  }
  body.hv3 header.top .topright .authbox .userchip .vip-ribbon,
  body.hv3 header.top .topright .authbox .userchip .vip-badge,
  body.hv3 header.top .topright .authbox .userchip .vip-badg{
    display:none !important;
  }
  body.hv3 header.top .topright .authbox .chipid{
    max-width:none; overflow:hidden;
  }
  body.hv3 header.top .topright .authbox .chipid b.nm-gold{
    min-width:0; flex:1 1 auto; max-width:72px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  body.hv3 header.top .topright .authbox #logoutBtn{
    flex:0 0 auto; align-self:center;
  }
}

/* 4b. Под 480px мястото стига само за цяло лого: махаме монетата във
   VT хапчето (числото и „+N“ остават) и свиваме отстъпите. Отстъпите
   на хедъра са с !important в arena-deco.css (≤640), затова и тук. */
@media (max-width:480px){
  body.hv3 header.top{padding:4px 8px !important; column-gap:2px}
  body.hv3 header.top .topright{gap:4px !important; flex-wrap:nowrap}
  body.hv3 header.top .topright .vt-pill{gap:3px; padding:5px 5px}
  body.hv3 header.top .topright .vt-pill .vt-coin{display:none!important}
  body.hv3 header.top .brand{gap:6px}
  body.hv3 header.top .brand div{font-size:12px; letter-spacing:.02em}
  body.hv3 header.top .topright .authbox{padding:0 !important}
  body.hv3 header.top .topright .authbox .userchip{padding:4px 2px 4px 6px; gap:6px}
  body.hv3 header.top .topright .authbox #logoutBtn{padding:2px 6px !important; margin-left:0}
  body.hv3 header.top .topright .authbox .chipid{padding:0 6px 0 4px; gap:5px}
  body.hv3 header.top .topright .authbox .chipid b.nm-gold{max-width:56px}
}

/* 4c. Под 400px: име 46px („veliza…“) — пак се чете, нищо не застъпва. */
@media (max-width:400px){
  body.hv3 header.top{padding:4px 6px !important}
  body.hv3 header.top .topright{gap:3px !important}
  body.hv3 header.top .topright .authbox .chipid b.nm-gold{max-width:46px}
}

/* 4d. Под 350px (iPhone SE 320): остава само знакът на логото —
   думата не се побира заедно с чипа и „Изход“. */
@media (max-width:350px){
  body.hv3 header.top .brand div{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   5. ТАБЛЕТ 721–1239: хедърът излизаше на ТРИ реда (169 px)
   Проблем: правило 1 по-горе слага логото и дясната част на първи ред
   и навигацията на втори. При 768 обаче логото е 229px (знак 26 +
   лозунг на един ред 192) и с дясната част 504px + 40px отстъпи сборът
   е 791 > 768, т.е. .topright пада на втори ред и навигацията — на
   трети: хедърът става 169px, 22% от екрана.
   Решение: лозунгът се пренася в две къси строки и отстъпите се
   свиват с 8px — първият ред се събира в 768 и хедърът пак е 2 реда.
   ───────────────────────────────────────────────────────────────── */
@media (min-width:721px) and (max-width:1239px){
  body.hv3 header.top{padding-left:14px; padding-right:14px; column-gap:10px}
  body.hv3 header.top .brand .tag{white-space:normal; max-width:152px; line-height:1.2}
}

/* 5b. 721–767: при 721 първият ред пак не се събираше (732 > 721) —
   още по-тесни отстъпи и по-къс лозунг. */
@media (min-width:721px) and (max-width:767px){
  body.hv3 header.top{padding-left:10px; padding-right:10px; column-gap:6px}
  body.hv3 header.top .brand{gap:8px}
  body.hv3 header.top .brand .tag{max-width:118px}
  body.hv3 header.top .topright{gap:10px !important}
}

/* ═══════════════════════════════════════════════════════════════════
   6. ТЪЧ-ЦЕЛИ < 44 px (WCAG 2.5.5) на началната, Арената, Форума, профила
   Замерено: #findBtn 32×32, #friendsBtn 63×24, #focusBtn 40×24,
   .tab 34, #logoutBtn 40, #bgChip 160×30, #dailyBandBtn 60×33,
   .pathmore 322×34, #haPlay 296×38, #openTopic 156×41,
   #dailyHeroBtn 132×26, #newThreadBtn 174×32, .am-tourney-btn 40,
   .lb-tab 41×44, .modebtn 43, .pv-btn 32, .pv-x 34×34.
   Вдигаме само височината/ширината на самата цел — шрифт, цвят и
   подредба не се пипат.
   ───────────────────────────────────────────────────────────────── */
@media (max-width:1239px){
  body.hv3 #findBtn,
  body.hv3 #friendsBtn,
  body.hv3 #focusBtn,
  body.hv3 #logoutBtn,
  body.hv3 #bgChip,
  body.hv3 #dailyBandBtn,
  body.hv3 #haPlay,
  body.hv3 #openTopic,
  body.hv3 .pathmore,
  body.hv3 #dailyHeroBtn,
  body.hv3 #newThreadBtn,
  body.hv3 .am-tourney-btn,
  body.hv3 .am-season-btn,
  body.hv3 .lb-tab,
  body.hv3 .modebtn,
  body.hv3 nav.nav .tab,
  body.hv3 .pv-btn,
  body.hv3 .pv-tab{
    min-height:44px;
  }
  body.hv3 #findBtn,
  body.hv3 .pv-x,
  body.hv3 .lb-tab,
  body.hv3 .modebtn{
    min-width:44px;
  }
  body.hv3 .pv-x{display:inline-flex; align-items:center; justify-content:center}
  body.hv3 .pv-btn, body.hv3 .pv-tab, body.hv3 .am-tourney-btn, body.hv3 .lb-tab{
    display:inline-flex; align-items:center; justify-content:center;
  }
}
/* лозунгът под логото беше 8.5 px — на таблет не се чете */
@media (min-width:721px){
  body.hv3 header.top .brand .tag{font-size:10px}
}

/* ═══════════════════════════════════════════════════════════════════
   7. „ПЪТЕКИ“ (дясната колона на началната) при 360: редовете излизат
   с 17 px извън екрана
   Проблем: .paths е grid с една колона auto. Редът .pathrow иска
   340px min-content (номер 40 + текст 259 + стрелка 13 + 28 gap), а
   колоната е 288 → track-ът става 340 и всеки ред се отрязва вдясно
   (стрелката „→“ не се вижда).
   Решение: колоната се стяга до наличната ширина, а текстът в реда
   се пренася на втори ред, вместо да бута стрелката извън екрана.
   ───────────────────────────────────────────────────────────────── */
@media (max-width:480px){
  body.hv3 .paths{grid-template-columns:minmax(0,1fr)}
  body.hv3 .paths > .panelhead,
  body.hv3 .paths .pathrow,
  body.hv3 .paths .pathmore,
  body.hv3 .paths .pb,
  body.hv3 .paths .pn{min-width:0}
}

/* ═══════════════════════════════════════════════════════════════════
   8. ПРОФИЛ (profile-v3.css, ≤900): затварящият „✕“ е 44×34, табовете
   слизат на 8.5–9 px и не се четат на телефон.
   Замерено на 360/390/414/768: .pv-x 44×34, .pv-tab 33×44 („Дуели“),
   .pv-tab 8.5px, .pv-meta 9px, .pv-lvl 8px.
   ───────────────────────────────────────────────────────────────── */
@media (max-width:1239px){
  body.hv3 .pv-x{min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center}
  body.hv3 .pv-tab{min-width:44px}
}
@media (max-width:900px){
  body.hv3 .pv-tab{font-size:10px}
  body.hv3 .pv-meta{font-size:10.5px}
  body.hv3 .pv-lvl{font-size:9.5px}
  body.hv3 .pv-rib{font-size:9.5px}
}

/* 8b. Името в профила е блок, който стигаше под затварящия „✕“ (при
   дълъг ник текстът минава под бутона). Оставяме му отстъп и вдигаме
   най-дребните етикети от 8.5 px. */
@media (max-width:900px){
  body.hv3 #profV3 .pv-name{padding-right:46px}
  body.hv3 #profV3 .t-lbl{font-size:9.5px}
  body.hv3 #profV3 .pv-btn{font-size:10.5px}
}