/* Матч&мяч v52 — mobile rating / CRM tabs / messages rail / controls polish */

/* ===================== Mobile play ball: requested seam geometry ===================== */
@media (max-width: 960px) {
  .mobile-play-ball::before {
    left: -34px !important;
    top: -7px !important;
    transform: rotate(11deg) !important;
  }
  .mobile-play-ball::after {
    right: -34px !important;
    bottom: -7px !important;
    transform: rotate(191deg) !important;
  }
}

/* ===================== Rating: podium -> controls -> leaderboard ===================== */
.page-rating .visual-page-hero-rating {
  min-height: 210px !important;
}
.page-rating .rating-controls-panel {
  display: grid;
  grid-template-columns: minmax(260px,.85fr) minmax(420px,1.15fr);
  align-items: center;
  gap: 22px;
  margin: 14px 0 16px;
  padding: 15px 16px 15px 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,.022);
}
.page-rating .rating-controls-copy {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.page-rating .rating-controls-copy > .visual-page-eyebrow {
  margin: 0 !important;
  padding: 7px 9px;
  border: 1px solid rgba(200,255,61,.15);
  border-radius: 999px;
  background: rgba(200,255,61,.055);
  color: var(--accent) !important;
  white-space: nowrap;
}
.page-rating .rating-controls-copy b,
.page-rating .rating-controls-copy small { display:block; }
.page-rating .rating-controls-copy b { font-size: 12.5px; color: var(--text); }
.page-rating .rating-controls-copy small { margin-top:3px; color:var(--text-faint); font-size:10px; line-height:1.4; }
.page-rating .rating-controls-panel .rating-hero-controls {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.page-rating .rating-controls-panel .visual-sort-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.page-rating .rating-controls-panel .visual-sort-actions .btn {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 10px !important;
}
.page-rating .rating-controls-panel .rating-elo-mode {
  flex: 0 0 auto;
}
.page-rating .rank-mobile-stats { display:none; }

@media (max-width: 900px) {
  .page-rating .visual-page-hero-rating { min-height: 180px !important; }
  .page-rating .rating-controls-panel {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 14px;
    margin-top: 12px;
    border-radius: 18px;
  }
  .page-rating .rating-controls-panel .rating-hero-controls {
    width: 100%;
    justify-content: space-between;
    align-items: stretch;
  }
  .page-rating .rating-controls-panel .visual-sort-actions {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .page-rating .visual-page-hero-rating {
    min-height: 164px !important;
    padding-bottom: 21px !important;
    margin-bottom: 12px !important;
  }
  .page-rating .visual-page-hero-rating h1 { font-size: clamp(32px,10vw,40px) !important; }
  .page-rating .visual-page-hero-rating p { font-size: 11.5px !important; line-height:1.5 !important; }

  .page-rating .podium-shell {
    margin-bottom: 10px !important;
    padding: 15px 10px 0 !important;
    border-radius: 22px !important;
  }
  .page-rating .podium-head { padding-inline:5px; }
  .page-rating .podium-head > b { font-size: 18px !important; }
  .page-rating .podium-head > small { font-size: 9.5px !important; }
  .page-rating .podium {
    display:grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
    padding: 6px 0 0 !important;
  }
  .page-rating .podium-place { min-width:0 !important; padding-inline:3px !important; }
  .page-rating .podium-name { font-size: 10px !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .page-rating .podium-caption { display:none !important; }
  .page-rating .podium-metric { font-size: 9px !important; white-space:nowrap; }
  .page-rating .podium-step { min-height:48px !important; font-size:18px !important; }
  .page-rating .podium-place-1 .podium-step { min-height:66px !important; }

  .page-rating .rating-controls-panel {
    margin: 10px 0 12px;
    padding: 12px;
    gap: 11px;
    border-radius: 17px;
    background: var(--card);
  }
  .page-rating .rating-controls-copy { grid-template-columns:1fr; gap:6px; }
  .page-rating .rating-controls-copy > .visual-page-eyebrow { justify-self:start; }
  .page-rating .rating-controls-copy small { max-width:34ch; }
  .page-rating .rating-controls-panel .rating-hero-controls {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .page-rating .rating-controls-panel .visual-sort-actions {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    width:100%;
    overflow:visible !important;
  }
  .page-rating .rating-controls-panel .visual-sort-actions .btn {
    min-width:0 !important;
    width:100%;
    padding-inline:5px !important;
    font-size:9px !important;
  }
  .page-rating .rating-controls-panel .rating-elo-mode {
    width:100%;
    display:grid;
    grid-template-columns:auto 1fr 1fr;
    padding:3px;
  }
  .page-rating .rating-controls-panel .rating-elo-mode > span { align-self:center; }
  .page-rating .rating-controls-panel .rating-elo-mode button { width:100%; }

  /* Mobile leaderboard is a rich card instead of a stripped desktop row. */
  .page-rating .leaderboard-grid { gap:8px !important; }
  .page-rating .rank-card {
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) !important;
    grid-template-areas:
      "rank person"
      "stats stats" !important;
    column-gap:10px !important;
    row-gap:12px !important;
    min-height:0 !important;
    padding:13px !important;
    border-radius:18px !important;
  }
  .page-rating .rank-card > .rank-badge,
  .page-rating .rank-card > .rank-num { grid-area:rank !important; align-self:start !important; }
  .page-rating .rank-card > .rank-identity { grid-area:person !important; align-items:flex-start !important; }
  .page-rating .rank-identity .avatar { width:42px !important; height:42px !important; }
  .page-rating .rank-identity .name { font-size:12.5px !important; line-height:1.25 !important; }
  .page-rating .rank-card .rank-subrow { margin-top:3px !important; }
  .page-rating .rank-card .rank-subrow .text-faint { font-size:9px !important; }
  .page-rating .rank-card > .rank-col-ntrp,
  .page-rating .rank-card > .rank-col-elo,
  .page-rating .rank-card > .rank-col-delta,
  .page-rating .rank-card > .rank-col-form { display:none !important; }
  .page-rating .rank-mobile-stats {
    grid-area:stats;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--border);
    border-left:1px solid var(--border);
    border-radius:13px;
    overflow:hidden;
    background:rgba(255,255,255,.015);
  }
  .page-rating .rank-mobile-stats > div {
    min-width:0;
    min-height:52px;
    padding:9px 8px 8px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .page-rating .rank-mobile-stats > div:nth-child(n+4) { border-bottom:0; }
  .page-rating .rank-mobile-stats span { color:var(--text); font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; min-height:17px; }
  .page-rating .rank-mobile-stats .is-accent > span { color:var(--accent); }
  .page-rating .rank-mobile-stats small { margin-top:2px; color:var(--text-faint); font-size:7.5px; font-weight:750; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; }
  .page-rating .rank-mobile-form > span { display:flex; align-items:center; min-height:17px; overflow:hidden; }
  .page-rating .rank-mobile-form .form-strip { transform:scale(.82); transform-origin:left center; }
}

/* ===================== Clubs price range: labels above, thumb below ===================== */
.page-clubs .filter-price .rangewrap {
  height: 48px !important;
  padding-inline: 8px !important;
}
.page-clubs .filter-price .range-labels {
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  top:0 !important;
  margin:0 !important;
  height:16px;
  align-items:flex-start;
  line-height:1;
  pointer-events:none;
}
.page-clubs .filter-price .range-labels span {
  display:inline-flex;
  align-items:center;
  min-height:16px;
  color:var(--text-dim);
  font-size:10px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
}
.page-clubs .filter-price .range-track {
  left:8px !important;
  right:8px !important;
  top:31px !important;
  height:5px !important;
}
.page-clubs .filter-price .rangewrap input[type="range"] {
  left:8px !important;
  width:calc(100% - 16px) !important;
  top:25px !important;
  height:17px !important;
}
.page-clubs .filter-price .rangewrap input[type="range"]::-webkit-slider-thumb {
  width:16px !important;
  height:16px !important;
  border:3px solid #11150f !important;
  box-shadow:0 0 0 1px rgba(200,255,61,.24),0 3px 8px rgba(0,0,0,.45) !important;
}
.page-clubs .filter-price .rangewrap input[type="range"]::-moz-range-thumb {
  width:16px !important;
  height:16px !important;
  border:3px solid #11150f !important;
  box-shadow:0 0 0 1px rgba(200,255,61,.24),0 3px 8px rgba(0,0,0,.45) !important;
}
.page-clubs #f-price-min { z-index:3; }
.page-clubs #f-price-max { z-index:4; }

/* ===================== Achievements: reserve space for earned check ===================== */
.achievement-card.is-earned .achievement-copy { padding-right:24px !important; min-width:0; }
.achievement-card .achievement-meta {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:4px 8px !important;
  min-width:0;
}
.achievement-card .achievement-meta time {
  color:var(--text-faint);
  font:600 8.5px/1.2 var(--font-mono);
  white-space:nowrap;
}
@media(max-width:480px){
  .achievement-card.is-earned .achievement-copy{padding-right:20px!important}
  .achievement-card .achievement-meta time{flex-basis:100%}
}

/* ===================== Studio mobile: every tab is visible ===================== */
@media(max-width:620px){
  .page-studio .cab-nav { overflow:visible !important; }
  .page-studio .cab-tabs {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    overflow:visible !important;
    padding:0 !important;
    scroll-snap-type:none !important;
  }
  .page-studio .cab-tab {
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    padding:8px 9px !important;
    justify-content:flex-start !important;
    border:1px solid transparent !important;
    border-radius:12px !important;
  }
  .page-studio .cab-tab-label {
    min-width:0;
    flex:1 !important;
    font-size:10px;
    line-height:1.2;
    white-space:normal;
  }
  .page-studio .cab-tab-ic { flex:0 0 auto; }
  .page-studio .cab-tab.is-active { border-color:rgba(200,255,61,.18) !important; }
  .page-studio .cab-tab .pro-badge { margin-left:auto; }
}

/* ===================== Messages mobile: keep conversation rail visible ===================== */
@media(max-width:760px){
  .page-messages .messages-page-grid,
  .page-messages .messages-page-grid.chat-open {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    overflow:visible !important;
  }
  .page-messages .messages-page-grid .messenger-list,
  .page-messages .messages-page-grid.chat-open .messenger-list {
    display:flex !important;
    flex-direction:row !important;
    gap:7px !important;
    max-height:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:1px 1px 6px !important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .page-messages .messages-page-grid .messenger-list::-webkit-scrollbar { display:none; }
  .page-messages .messages-page-grid .conversation-row {
    flex:0 0 min(220px,72vw) !important;
    min-width:0;
    min-height:66px;
    padding:9px 10px !important;
    gap:9px !important;
    scroll-snap-align:start;
    background:rgba(255,255,255,.022) !important;
  }
  .page-messages .messages-page-grid .conversation-row.active {
    background:rgba(200,255,61,.075) !important;
    border-color:rgba(200,255,61,.2) !important;
  }
  .page-messages .messages-page-grid .conversation-row .avatar { width:36px !important; height:36px !important; }
  .page-messages .conversation-row-name { font-size:11.5px !important; }
  .page-messages .conversation-row-preview { margin-top:3px; font-size:9.5px !important; }
  .page-messages .conversation-row-date { font-size:8px !important; }
  .page-messages .messages-page-grid .chat-panel,
  .page-messages .messages-page-grid.chat-open .chat-panel,
  .page-messages .messages-page-grid:not(.chat-open) .chat-panel {
    display:flex !important;
    height:calc(100dvh - 330px) !important;
    min-height:410px !important;
    max-height:650px !important;
    padding-top:2px;
  }
}

/* ===================== Coaches hero CTA: one arrow, split-button language ===================== */
.page-coaches .coaches-split-cta {
  min-width:238px;
  height:58px;
  padding:4px 4px 4px 20px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:0;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  font:850 12.5px/1 var(--font-body);
  cursor:pointer;
  box-shadow:none;
  transition:transform .2s ease,background .2s ease;
}
.page-coaches .coaches-split-cta::before,
.page-coaches .coaches-split-cta::after { content:none !important; display:none !important; }
.page-coaches .coaches-split-cta > b {
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#111610;
  color:var(--accent);
  transition:transform .22s ease;
}
.page-coaches .coaches-split-cta:hover { transform:translateY(-2px); background:var(--accent-2); }
.page-coaches .coaches-split-cta:hover > b { transform:rotate(-45deg); }
@media(max-width:620px){
  .page-coaches .coaches-split-cta { width:100%; min-width:0; height:56px; }
  .page-coaches .coaches-split-cta > b { width:46px; height:46px; flex-basis:46px; }
}