:root{
  --container-max: 1680px;
  --container-pad-x: clamp(12px, 1.2vw, 24px);
  --container-pad-y: clamp(12px, 1.2vw, 24px);
  --panel-radius: clamp(12px, .9vw, 18px);
  --panel-gap: clamp(12px, 1vw, 18px);
  --title-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.45rem);
  --text-size: clamp(0.92rem, 0.88rem + 0.12vw, 1.05rem);
  --small-size: clamp(0.78rem, 0.76rem + 0.08vw, 0.9rem);
  --card-min: 160px;
  --stats-col-left: minmax(300px, 1fr);
  --stats-col-mid: minmax(340px, 1.1fr);
  --stats-col-right: minmax(300px, 1fr);

  /* fixed desktop composition for info page */
  --info-layout-width: 1416px;
  --info-left-col: 500px;
  --info-center-col: 610px;
  --info-right-col: 270px;

  /* search area */
  --search-area-max: 1040px;
  --search-gap: 14px;
  --search-top-space: clamp(14px, 2.2vh, 30px);
  --search-bottom-space: clamp(8px, 1.2vh, 16px);
  --search-input-height: clamp(56px, 3.4vw, 64px);
  --search-button-width: clamp(180px, 16vw, 240px);

  --ach-grid-width: 416px;
  --ach-card-width: 86px;
  --ach-card-height: 116px;
  --ach-grid-gap-x: 12px;
  --ach-grid-gap-y: 10px;
}

html{
  zoom:1 !important;
  transform:none !important;
}

body{
  transform:none !important;
  transform-origin:initial !important;
  font-size:var(--text-size);
  overflow-x:hidden;
}

.container{
  width:min(100%, var(--container-max)) !important;
  margin-inline:auto !important;
  padding:var(--container-pad-y) var(--container-pad-x) !important;
}

.container h1,
.container h2,
.container h3{
  font-size:var(--title-size);
}

/* =====================================================================
   SEARCH / HERO SECTION TOP FIX
   ===================================================================== */

.search-block-wrapper{
  width:100%;
  max-width:100%;
  margin-top:0 !important;
  padding-top:var(--search-top-space);
  padding-bottom:var(--search-bottom-space);
  padding-inline:clamp(12px, 2vw, 24px);
  box-sizing:border-box;
  display:flex;
  justify-content:center;
}

.welcome-message{
  margin-top:0 !important;
  margin-bottom:15px !important;
  padding-inline:12px;
  font-size:clamp(1rem, .95rem + .22vw, 1.15rem);
  text-align:center;
}

.search-form{
  display:grid !important;
  grid-template-columns:minmax(360px, 1fr) var(--search-button-width) !important;
  align-items:center !important;
  width:min(100%, var(--search-area-max)) !important;
  max-width:var(--search-area-max) !important;
  margin:0 auto !important;
  min-height:var(--search-input-height) !important;
  padding-left:0 !important;
  justify-content:center !important;
  gap:var(--search-gap) !important;
}

.search-form input[type="text"]{
  min-width:0;
  width:100% !important;
  max-width:none !important;
  min-height:var(--search-input-height) !important;
}

.search-form button,
.search-btn{
  width:100% !important;
  min-width:0 !important;
  min-height:var(--search-input-height) !important;
}

.tabs-wrapper{
  gap:clamp(12px, 1vw, 20px) !important;
  align-items:flex-start !important;
}

.tabs{
  width:clamp(160px, 10vw, 220px) !important;
  min-width:clamp(160px, 10vw, 220px) !important;
}

.tabs li{
  padding:clamp(10px, .7vw, 14px) clamp(12px, .8vw, 16px) !important;
  font-size:clamp(.9rem, .85rem + .12vw, 1rem) !important;
}

.stats-summary{
  width:100% !important;
  max-width:100% !important;
  grid-template-columns: var(--stats-col-left) clamp(10px, 1vw, 20px) var(--stats-col-mid) clamp(10px, 1vw, 20px) var(--stats-col-right) !important;
}

.stats-summary > div{
  min-height:clamp(72px, 6vw, 92px) !important;
  padding:clamp(10px, .8vw, 16px) clamp(12px, .9vw, 18px) !important;
  border-radius:var(--panel-radius);
}

.stats-summary > div p:first-child,
.stats-summary > div .label{
  font-size:clamp(.72rem, .7rem + .08vw, .84rem) !important;
}

.stats-summary > div p:last-child,
.stats-summary > div .value{
  font-size:clamp(1.2rem, 1.1rem + .45vw, 1.8rem) !important;
}

.achievements-row{
  width:100% !important;
  max-width:100% !important;
  gap:var(--panel-gap) !important;
  align-items:start !important;
  grid-template-columns:minmax(280px, 360px) minmax(420px, 1fr) minmax(260px, 320px) !important;
}

.left-section,
.favorite-hero-container,
.favorites-on-main,
.weekly-top{
  width:100% !important;
  max-width:100% !important;
}

.achievements-grid{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  justify-self:stretch !important;
  gap:clamp(10px, .8vw, 14px) !important;
  padding:clamp(12px, 1vw, 18px) !important;
  grid-template-columns:repeat(4, minmax(72px, 1fr)) !important;
}

.achievement-card{
  width:auto !important;
  aspect-ratio:1 / 1;
  height:auto !important;
  min-width:0 !important;
}

.heroes-grid{
  width:100%;
  max-width:1400px;
  margin-inline:auto;
  grid-template-columns:repeat(auto-fit, minmax(var(--card-min), 1fr)) !important;
  gap:clamp(12px, .9vw, 18px) !important;
  padding:clamp(12px, 1vw, 18px) !important;
}

.hero-card{
  min-height:clamp(260px, 20vw, 320px);
  padding:clamp(12px, .9vw, 16px) !important;
  border-radius:clamp(12px, .9vw, 18px);
}

.hero-card .hero-avatar,
.hero-card .hero-img{
  width:clamp(72px, 5vw, 90px) !important;
  height:clamp(72px, 5vw, 90px) !important;
}

.hero-card .hero-name{
  font-size:clamp(.92rem, .88rem + .15vw, 1.02rem) !important;
}

.hero-card .hero-stat,
.hero-rating,
.hero-wr,
.hero-games{
  font-size:clamp(.82rem, .8rem + .1vw, .96rem) !important;
}

.hero-card .card-details-btn{
  min-height:clamp(38px, 3vw, 44px);
  font-size:clamp(.84rem, .82rem + .08vw, .92rem) !important;
}

.matches-grid{
  width:100%;
  max-width:1400px;
  margin-inline:auto;
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:clamp(12px, .9vw, 16px) !important;
  padding:clamp(12px, 1vw, 16px) !important;
}

.match-card{
  padding:clamp(10px, .8vw, 14px) !important;
  border-radius:clamp(12px, .9vw, 16px);
}

.match-card img{
  width:clamp(52px, 4vw, 64px) !important;
  height:clamp(52px, 4vw, 64px) !important;
}

.match-card .mode,
.match-card .win-loss,
.match-card .rating{
  font-size:clamp(.74rem, .72rem + .08vw, .88rem) !important;
}

.match-card a{
  min-height:clamp(34px, 2.8vw, 38px);
  font-size:clamp(.76rem, .74rem + .08vw, .86rem) !important;
}

.win-loss-chart{
  width:min(100%, clamp(260px, 20vw, 360px)) !important;
  height:min(100%, clamp(260px, 20vw, 360px)) !important;
  margin-inline:auto !important;
}

.win-loss-chart canvas{
  width:100% !important;
  height:100% !important;
}

.server-tops-on-main{
  width:min(320px, 22vw) !important;
}

.server-top-art{
  width:clamp(180px, 12vw, 240px) !important;
  height:auto !important;
}

.modal-window{
  width:min(92vw, 920px);
  max-height:88vh;
}

.modal-window--rating{
  width:min(96vw, 1180px) !important;
  max-width:1180px !important;
}

@media (max-width: 1600px){
  :root{
    --container-max: 1440px;
    --stats-col-left: minmax(280px, 1fr);
    --stats-col-mid: minmax(320px, 1.05fr);
    --stats-col-right: minmax(280px, 1fr);
    --search-area-max: 920px;
  }
  .matches-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)) !important; }
  .achievements-row{ grid-template-columns:minmax(260px, 330px) minmax(380px, 1fr) minmax(240px, 300px) !important; }
}

@media (max-width: 1366px){
  .stats-summary{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:12px !important; }
  .stats-summary > :nth-child(1), .stats-summary > :nth-child(2), .stats-summary > :nth-child(3){ grid-column:auto !important; }
  .stats-summary > :nth-child(4){ grid-column:1 / -1 !important; max-width:min(520px, 100%) !important; justify-self:center !important; margin-top:0 !important; }
  .achievements-row{ grid-template-columns:1fr 1fr !important; gap:14px !important; }
  .left-section{ grid-column:1 !important; }
  .achievements-grid{ grid-column:2 !important; }
  .favorite-hero-container, .favorites-on-main, .weekly-top{ grid-column:span 2 !important; }
  .matches-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 1921px){
  :root{
    --container-max: 1820px;
    --container-pad-x: 22px;
    --container-pad-y: 22px;
    --card-min: 175px;
    --search-area-max: 1080px;
  }
  .container{ width:min(94vw, 1820px) !important; }
  .tabs{ width:220px !important; min-width:220px !important; }
  .tabs li{ font-size:1rem !important; padding:14px 16px !important; }
  .stats-summary > div{ min-height:88px !important; }
  .stats-summary > div p:last-child,
  .stats-summary > div .value{ font-size:1.75rem !important; }
  .heroes-grid{ max-width:1560px; grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)) !important; }
  .matches-grid{ max-width:1560px; grid-template-columns:repeat(6, minmax(0, 1fr)) !important; }
}

@media (min-width: 2560px){
  :root{
    --container-max: 2280px;
    --container-pad-x: 26px;
    --container-pad-y: 26px;
    --card-min: 190px;
    --search-area-max: 1160px;
  }
  body{ font-size:17px; }
  .container{ width:min(92vw, 2280px) !important; }
  .tabs{ width:240px !important; min-width:240px !important; }
  .tabs li{ font-size:1.05rem !important; padding:15px 18px !important; }
  .stats-summary > div{ min-height:96px !important; padding:16px 18px !important; }
  .stats-summary > div p:first-child,
  .stats-summary > div .label{ font-size:.84rem !important; }
  .stats-summary > div p:last-child,
  .stats-summary > div .value{ font-size:1.95rem !important; }
  .heroes-grid{ max-width:1760px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)) !important; gap:18px !important; }
  .hero-card{ min-height:330px; }
  .hero-card .hero-avatar, .hero-card .hero-img{ width:92px !important; height:92px !important; }
  .matches-grid{ max-width:1760px; gap:18px !important; }
  .match-card img{ width:64px !important; height:64px !important; }
  .win-loss-chart{ width:380px !important; height:380px !important; }
  .modal-window{ width:min(90vw, 1040px); }
  .modal-window--rating{ width:min(94vw, 1320px) !important; max-width:1320px !important; }
}


@media (max-width: 992px){
  :root{
    --search-area-max: 100%;
    --search-button-width: 100%;
    --search-top-space: 12px;
    --search-bottom-space: 8px;
    --search-input-height: 52px;
  }

  .container{ width:100% !important; max-width:100% !important; padding:10px 10px 70px !important; }
  .search-block-wrapper{ padding-inline:10px !important; }
  .search-form{ grid-template-columns:1fr !important; gap:10px !important; }
  .search-block-wrapper{
    padding-top:18px;
    padding-bottom:12px;
  }
  .search-form{
    grid-template-columns:1fr !important;
    max-width:680px !important;
    gap:10px !important;
  }
  .tabs-wrapper{ flex-direction:column !important; align-items:stretch !important; }
  .tabs{ flex-direction:row !important; width:100% !important; min-width:0 !important; overflow-x:auto !important; gap:8px !important; }
  .tabs li{ flex:0 0 auto; white-space:nowrap; }
  .stats-summary{ grid-template-columns:1fr !important; gap:10px !important; }
  .stats-summary > :nth-child(1), .stats-summary > :nth-child(2), .stats-summary > :nth-child(3), .stats-summary > :nth-child(4){ grid-column:1 !important; max-width:100% !important; margin-top:0 !important; }
  .achievements-row{ grid-template-columns:1fr !important; gap:12px !important; }
  .left-section, .achievements-grid, .favorite-hero-container, .favorites-on-main, .weekly-top{ grid-column:1 !important; max-width:100% !important; }
  .matches-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
  .server-tops-on-main{ position:static !important; width:100% !important; max-width:100% !important; margin:12px auto 0 !important; }
}

@media (max-width: 768px){
  .heroes-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  .achievements-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
  .matches-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 520px){
  .achievements-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
  .matches-grid, .user-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  #fav-main-list, #fav-tab-list{ grid-template-columns:1fr !important; }
}

/* =====================================================================
   BUILDER INFO LAYOUT - FIXED DESKTOP COMPOSITION
   НИЧЕГО НЕ ТЯНЕМ НА ДЕСКТОПЕ
   ===================================================================== */

@media (min-width: 1201px){
  [data-builder-page="info"]{
    position:relative !important;
    display:grid !important;
    grid-template-columns:var(--info-left-col) var(--info-center-col) var(--info-right-col) !important;
    grid-template-areas:
      "profile profile profile"
      "stats stats stats"
      "top achievements tophero"
      "top achievements favorite"
      "top achievements statbox" !important;
    gap:18px !important;
    min-height:0 !important;
    width:min(100%, var(--info-layout-width)) !important;
    max-width:var(--info-layout-width) !important;
    margin-inline:auto !important;
    align-items:start !important;
    justify-content:center !important;
  }

  [data-builder-page="info"] > [data-builder-id]{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }

  [data-builder-page="info"] [data-builder-id="profile_header"]{ grid-area:profile !important; }
  [data-builder-page="info"] [data-builder-id="stats_summary"]{ grid-area:stats !important; }
  [data-builder-page="info"] [data-builder-id="top_players"]{ grid-area:top !important; }
  [data-builder-page="info"] [data-builder-id="achievements_section"]{ grid-area:achievements !important; }
  [data-builder-page="info"] [data-builder-id="top_hero"]{ grid-area:tophero !important; }
  [data-builder-page="info"] [data-builder-id="favorite_hero"]{ grid-area:favorite !important; }
  [data-builder-page="info"] [data-builder-id="stats_frame"]{ grid-area:statbox !important; }

  [data-builder-page="info"] [data-builder-id="content_panel"]{
    display:none !important;
  }

  [data-builder-page="info"] .builder-shell,
  [data-builder-page="info"] .builder-shell--scroll,
  [data-builder-page="info"] .favorite-hero-container,
  [data-builder-page="info"] .stats-frame,
  [data-builder-page="info"] .weekly-top{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    height:auto !important;
    overflow:hidden !important;
  }

  [data-builder-page="info"] [data-builder-id="top_players"] .builder-shell{
    min-height:685px !important;
    height:685px !important;
    max-height:685px !important;
  }

  [data-builder-page="info"] [data-builder-id="achievements_section"] .builder-shell{
    width:var(--info-center-col) !important;
    min-width:var(--info-center-col) !important;
    max-width:var(--info-center-col) !important;
    min-height:685px !important;
    height:685px !important;
    max-height:685px !important;
    margin:0 auto !important;
    border-radius:22px !important;
  }

  [data-builder-page="info"] [data-builder-id="top_hero"] .builder-shell,
  [data-builder-page="info"] [data-builder-id="favorite_hero"] .builder-shell,
  [data-builder-page="info"] [data-builder-id="stats_frame"] .builder-shell{
    width:var(--info-right-col) !important;
    min-width:var(--info-right-col) !important;
    max-width:var(--info-right-col) !important;
    min-height:128px !important;
  }

  [data-builder-page="info"] .achievements,
  [data-builder-page="info"] .achievements-layout,
  [data-builder-page="info"] .achievements-content,
  [data-builder-page="info"] .achievements-row{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  [data-builder-page="info"] .achievements-grid{
    display:grid !important;
    grid-template-columns:repeat(4, var(--ach-card-width)) !important;
    grid-auto-rows:var(--ach-card-height) !important;
    justify-content:center !important;
    justify-items:center !important;
    align-content:start !important;
    gap:var(--ach-grid-gap-y) var(--ach-grid-gap-x) !important;
    width:var(--ach-grid-width) !important;
    min-width:var(--ach-grid-width) !important;
    max-width:var(--ach-grid-width) !important;
    margin:20px auto 0 !important;
    padding:0 !important;
  }

  [data-builder-page="info"] .achievement-card{
    width:var(--ach-card-width) !important;
    min-width:var(--ach-card-width) !important;
    max-width:var(--ach-card-width) !important;
    height:var(--ach-card-height) !important;
    min-height:var(--ach-card-height) !important;
    max-height:var(--ach-card-height) !important;
    margin:0 !important;
  }

  [data-builder-page="info"] .weekly-top-list{
    max-height:520px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
}

@media (min-width: 1201px) and (max-width: 1520px){
  :root{
    --info-layout-width: 1298px;
    --info-left-col: 448px;
    --info-center-col: 580px;
    --info-right-col: 234px;
    --ach-grid-width: 392px;
    --ach-card-width: 80px;
    --ach-card-height: 110px;
    --ach-grid-gap-x: 8px;
    --ach-grid-gap-y: 8px;
    --search-area-max: 960px;
    --search-button-width: 220px;
  }

  [data-builder-page="info"]{
    gap:16px !important;
  }

  [data-builder-page="info"] [data-builder-id="top_players"] .builder-shell{
    min-height:640px !important;
    height:640px !important;
    max-height:640px !important;
  }

  [data-builder-page="info"] [data-builder-id="achievements_section"] .builder-shell{
    min-height:640px !important;
    height:640px !important;
    max-height:640px !important;
  }
}