/* CSTV — обновление интерфейса: лента матчей, достижения, мобильная версия.
   Подключается ПОСЛЕ styles.css и переопределяет его. */

/* ===================== Лента «Последние матчи» ===================== */
.ticker-wrap{ align-items:stretch; }
.ticker-wrap .tag{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:0 14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:12px;
  position:relative; z-index:2;
}
.ticker-wrap .tag .tk-tag-short{ display:none; }
.tk-live{ width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:tkPulse 1.8s infinite; flex:0 0 auto; }
@keyframes tkPulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)} 70%{box-shadow:0 0 0 7px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }

.ticker-track{ align-items:center; }
.ticker-track:hover, .ticker-track:active{ animation-play-state:paused; }
.ticker-track .tk-item{
  display:inline-flex; align-items:center; gap:8px; margin:0 6px; padding:5px 12px;
  border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.03);
  color:var(--text); text-decoration:none; white-space:nowrap; font-size:13px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ticker-track .tk-item:hover{ border-color:var(--accent); background:rgba(var(--accent-rgb),.10); }
.tk-team{ font-weight:700; opacity:.85; }
.tk-team.win{ opacity:1; color:var(--text); }
.tk-team.lose{ opacity:.55; }
.tk-score{ display:inline-flex; align-items:center; gap:3px; font-family:var(--font-mono, monospace); font-weight:800; }
.tk-score i{ font-style:normal; opacity:.5; }
.tk-score b{ opacity:.6; }
.tk-score b.win{ opacity:1; color:var(--accent-text, var(--accent)); }
.tk-stage{ color:var(--muted); font-size:11.5px; padding-left:8px; border-left:1px solid var(--border); }

/* ===================== Достижения ===================== */
.up-ach-summary{ margin-bottom:10px; color:var(--muted); font-size:13px; }
.up-ach-summary b{ color:var(--text); }
.up-ach-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.up-ach{
  position:relative; display:flex; gap:12px; align-items:flex-start; padding:12px 12px 12px 12px;
  border:1px solid var(--border); border-radius:12px; background:var(--bg-elev-2, rgba(255,255,255,.03));
  overflow:hidden;
}
.up-ach-ico{ flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; font-size:22px; border-radius:10px; background:rgba(255,255,255,.06); }
.up-ach-body{ min-width:0; flex:1; }
.up-ach-title{ font-weight:700; font-size:14px; line-height:1.25; }
.up-ach-desc{ color:var(--muted); font-size:12px; margin-top:2px; line-height:1.35; }
.up-ach-pips{ position:absolute; top:10px; right:10px; display:flex; gap:3px; }
.up-ach-pips i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); }
.up-ach-pips i.on{ background:currentColor; }
.up-ach-prog{ height:5px; margin-top:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.up-ach-prog>div{ height:100%; border-radius:99px; background:var(--accent); }
.up-ach-hint{ margin-top:3px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.up-ach.tier-bronze{ color:#cd8b4f; border-color:rgba(205,139,79,.45); }
.up-ach.tier-silver{ color:#c9d3e0; border-color:rgba(201,211,224,.45); }
.up-ach.tier-gold  { color:#f0b93b; border-color:rgba(240,185,59,.6); box-shadow:0 0 18px rgba(240,185,59,.12); }
.up-ach.tier-bronze .up-ach-ico{ background:rgba(205,139,79,.16); }
.up-ach.tier-silver .up-ach-ico{ background:rgba(201,211,224,.14); }
.up-ach.tier-gold   .up-ach-ico{ background:rgba(240,185,59,.18); }
.up-ach.tier-bronze .up-ach-title, .up-ach.tier-silver .up-ach-title, .up-ach.tier-gold .up-ach-title{ color:var(--text); }
.up-ach.locked{ opacity:.6; color:var(--muted); }
.up-ach.locked .up-ach-ico{ filter:grayscale(1); opacity:.7; }

/* Кнопка меню — только на телефоне */
#mobileMenuBtn{ display:none; }

/* ===================== Мобильная версия ===================== */
@media (max-width: 820px){
  html{ -webkit-text-size-adjust:100%; }
  body{ padding-bottom:env(safe-area-inset-bottom); overflow-x:hidden; }
  input, select, textarea{ font-size:16px !important; }          /* iOS не зумит поля */
  .btn, button, .btn-sm{ min-height:38px; }

  .topbar-inner{ flex-wrap:wrap; gap:8px; padding:8px 10px; }
  .brand-block{ flex:1 1 auto; min-width:0; gap:8px; flex-wrap:nowrap; }
  .logo{ font-size:26px; }
  #mobileMenuBtn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; order:2; margin-left:auto; }
  #gsearchWrap{ order:5; flex:1 1 100%; width:100%; }
  .gsearch-box, .gsearch-input{ width:100%; }
  .notif-wrap{ order:3; }
  .authbox{ order:4; flex:1 1 100%; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; font-size:12px; }

  /* второстепенное прячется под кнопку ☰ */
  #discordLink, #telegramLink,
  #themeToggleBtn, #colorStyleToggleBtn, #langSwitcher{ display:none !important; }
  body.mob-tools-open #discordLink, body.mob-tools-open #telegramLink,
  body.mob-tools-open #themeToggleBtn, body.mob-tools-open #colorStyleToggleBtn,
  body.mob-tools-open #langSwitcher{ display:inline-flex !important; margin:0 !important; order:6; }


  /* лента результатов */
  .ticker-wrap .tag{ padding:0 10px; font-size:11px; }
  .ticker-wrap .tag .tk-tag-full{ display:none; }
  .ticker-wrap .tag .tk-tag-short{ display:inline; }
  .ticker-track .tk-item{ padding:4px 10px; font-size:12px; margin:0 4px; }
  .tk-stage{ display:none; }

  /* контент */
  main, .container, .content{ padding-left:10px !important; padding-right:10px !important; }
  table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  img, video, iframe{ max-width:100%; height:auto; }
  .up-ach-grid{ grid-template-columns:1fr; }
  .modal, .overlay > div{ max-width:100vw !important; width:100% !important; max-height:92vh; border-radius:16px 16px 0 0; overflow-y:auto; }
  .overlay{ align-items:flex-end !important; }
}

@media (max-width: 420px){
  .logo{ font-size:22px; }
  .version-label{ display:none; }
}


/* ===================== Кнопки: единый современный стиль ===================== */
:root{ --btn-r:12px; --btn-h:40px; }

/* базовые кнопки сайта */
.btn{ border-radius:var(--btn-r); transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.btn:not(:disabled):hover{ transform:translateY(-1px); }
.btn:not(:disabled):active{ transform:translateY(0) scale(.98); }
.btn:focus-visible, button:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }


/* квадратные иконки-кнопки */
#discordLink, #telegramLink, #themeToggleBtn, #colorStyleToggleBtn, .notif-bell-btn{
  width:var(--btn-h); height:var(--btn-h); padding:0 !important; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--btn-r) !important; border:1px solid var(--border) !important;
  background:rgba(255,255,255,.05) !important; color:var(--text);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .15s ease, border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
#themeToggleBtn:hover, #colorStyleToggleBtn:hover, .notif-bell-btn:hover{
  transform:translateY(-2px); border-color:var(--accent) !important; background:rgba(var(--accent-rgb),.14) !important; color:var(--accent-text, var(--accent)); box-shadow:0 6px 16px rgba(var(--accent-rgb),.25);
}
#discordLink:hover{ transform:translateY(-2px); border-color:#5865F2 !important; background:rgba(88,101,242,.20) !important; color:#8B96FF; box-shadow:0 6px 16px rgba(88,101,242,.30); }
#telegramLink:hover{ transform:translateY(-2px); border-color:#29A9EB !important; background:rgba(41,169,235,.18) !important; color:#5CC3F5; box-shadow:0 6px 16px rgba(41,169,235,.30); }

/* «Поддержать» */
#supportBtn{
  height:var(--btn-h); padding:0 18px !important; border:0 !important; border-radius:var(--btn-r) !important; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(135deg,#19d3c5,#12a8d8) !important; color:#04252a !important;
  box-shadow:0 6px 18px rgba(25,211,197,.30);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
#supportBtn:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 10px 24px rgba(25,211,197,.42); }

/* переключатель языка */
.lang-switcher{ position:relative; }
.lang-switch-btn{
  height:var(--btn-h); padding:0 12px; display:inline-flex; align-items:center; gap:7px; font-weight:700; letter-spacing:.05em;
  border-radius:var(--btn-r); border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text);
  backdrop-filter:blur(8px); transition:border-color .2s ease, background-color .2s ease;
}
.lang-switch-btn:hover{ border-color:var(--accent); background:rgba(var(--accent-rgb),.12); }
.lang-switch-menu{
  margin-top:8px; padding:6px; min-width:150px; border-radius:14px; border:1px solid var(--border);
  background:var(--bg-elev, #101720); box-shadow:0 16px 40px rgba(0,0,0,.55);
  transform-origin:top right; animation:menuPop .16s ease;
}
.lang-switch-item{ padding:9px 12px; border-radius:9px; cursor:pointer; font-size:14px; display:flex; align-items:center; gap:8px; transition:background-color .15s ease; }
.lang-switch-item:hover{ background:rgba(255,255,255,.07); }
.lang-switch-item.active{ background:rgba(var(--accent-rgb),.16); color:var(--accent-text, var(--accent)); font-weight:700; }
.lang-switch-item.active::after{ content:'✓'; margin-left:auto; font-size:12px; }
@keyframes menuPop{ from{ opacity:0; transform:translateY(-6px) scale(.97);} to{ opacity:1; transform:none; } }

/* переключатель игры: CSTV <-> OWTV с логотипами */
.game-switch-btn{
  height:44px; padding:0 10px 0 8px; display:inline-flex; align-items:center; gap:8px;
  border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px); transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.game-switch-btn:hover{ transform:translateY(-1px); border-color:var(--accent); box-shadow:0 6px 16px rgba(var(--accent-rgb),.25); }
.game-switch-btn .gs-chevron{ opacity:.7; transition:transform .2s ease; }
.game-switch-menu.open ~ *, .game-switch-btn[aria-expanded="true"] .gs-chevron{ transform:rotate(180deg); }
.game-logo{ display:block; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.game-logo-cs{ border-radius:8px; }
.game-logo-ow{ border-radius:50%; background:#fff; padding:1px; }
.game-switch-menu{
  padding:6px; border-radius:16px; border:1px solid var(--border); background:var(--bg-elev, #101720);
  box-shadow:0 18px 44px rgba(0,0,0,.6); min-width:230px; transform-origin:top left;
}
.game-switch-menu.open{ animation:menuPop .16s ease; }
.game-switch-item{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:11px; cursor:pointer;
  border:1px solid transparent; transition:background-color .15s ease, border-color .15s ease;
}
.game-switch-item:hover{ background:rgba(255,255,255,.06); }
.game-switch-item.active{ background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.45); }
.game-switch-item b{ display:block; font-size:14px; letter-spacing:.04em; }
.game-switch-item span{ font-size:12px; color:var(--muted); }


/* поиск и блок аккаунта */
.gsearch-box{ border-radius:var(--btn-r); height:var(--btn-h); }
.authbox .btn{ height:34px; border-radius:10px; }

@media (max-width: 820px){
  .game-switch-btn{ height:42px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ===================== Профиль в шапке ===================== */
.authbox{ position:relative; }
.ab-wrap{ position:relative; display:flex; align-items:center; gap:8px; }
.ab-chip{
  display:flex; align-items:center; gap:10px; max-width:340px; min-height:46px; padding:5px 12px 5px 6px; cursor:pointer;
  border-radius:14px; border:1px solid var(--border); color:var(--text); text-align:left; font:inherit;
  background:color-mix(in srgb, var(--bg-elev, #101720) 82%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.ab-chip:hover, .ab-chip[aria-expanded="true"]{ border-color:var(--accent); box-shadow:0 6px 18px rgba(var(--accent-rgb),.22); }
.ab-chip:hover{ transform:translateY(-1px); }
.ab-ava{ flex:0 0 auto; display:flex; border-radius:50%; padding:2px; background:linear-gradient(135deg,var(--accent),rgba(var(--accent-rgb),.25)); }
.ab-ava .avatar, .ab-ava .avatar-fallback{ border-radius:50%; display:block; border:2px solid var(--bg-elev, #101720); }
.ab-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ab-name{ font-size:14px; font-weight:800; line-height:1.1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ab-roles{ display:flex; flex-wrap:nowrap; gap:4px; overflow:hidden; }
.ab-roles .admin-pill, .ab-roles .role-pill{ font-size:9.5px !important; padding:1px 6px !important; margin:0 !important; white-space:nowrap; }
.ab-chev{ flex:0 0 auto; opacity:.6; transition:transform .2s ease; }
.ab-chip[aria-expanded="true"] .ab-chev{ transform:rotate(180deg); }

.ab-coins{
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 13px; cursor:pointer; font-weight:800; font-variant-numeric:tabular-nums;
  border-radius:12px; border:1px solid rgba(240,185,59,.45); color:#f0b93b; font-family:inherit;
  background:rgba(240,185,59,.10); transition:transform .15s ease, background-color .2s ease;
}
.ab-coins:hover{ transform:translateY(-1px); background:rgba(240,185,59,.18); }

.ab-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:210px; padding:6px; display:none;
  border-radius:14px; border:1px solid var(--border); background:var(--bg-elev, #101720);
  box-shadow:0 18px 44px rgba(0,0,0,.6); transform-origin:top right;
}
.ab-menu.open{ display:block; animation:menuPop .16s ease; }
.ab-menu button{
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border:0; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--text); font:inherit; font-size:14px; text-align:left; transition:background-color .15s ease;
}
.ab-menu button:hover{ background:rgba(255,255,255,.07); }
.ab-menu button span{ width:18px; text-align:center; }
.ab-menu button.ab-danger{ color:#ff6b6b; }
.ab-menu button.ab-danger:hover{ background:rgba(255,107,107,.12); }

@media (max-width: 820px){
  .authbox{ flex:1 1 100%; }
  .ab-wrap{ width:100%; }
  .ab-chip{ flex:1 1 auto; max-width:none; min-width:0; }
  .ab-menu{ left:0; right:0; }
}

/* ===== H2H на странице матча ===== */
.h2h-box{ margin-top:8px; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:var(--bg-elev); }
.h2h-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.h2h-side{ display:flex; align-items:center; gap:6px; font-size:15px; min-width:0; }
.h2h-side.right{ justify-content:flex-end; }
.h2h-score{ font-size:26px; font-weight:800; letter-spacing:.02em; }
.h2h-bar{ display:flex; height:8px; margin-top:10px; border-radius:99px; overflow:hidden; background:var(--bg-elev-2); }
.h2h-bar .a{ background:var(--accent); }
.h2h-bar .b{ background:var(--accent-2); }
.h2h-bar .d{ background:var(--border); }
.h2h-pcts{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; font-size:13px; font-weight:700; }
.h2h-form{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
.h2h-chip{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; font-size:12px; font-weight:800; color:#fff; }
.h2h-chip.w{ background:var(--green); }
.h2h-chip.l{ background:var(--red); }
.h2h-chip.d{ background:var(--muted); }

/* ===== Состав команды: панель действий ===== */
.squad-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; flex-wrap:wrap; }
.squad-actions{ display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }

/* ===== Добавить в календарь (страница турнира) ===== */
.addcal{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; }
.addcal-menu{ display:none; gap:6px; flex-wrap:wrap; }
.addcal.open .addcal-menu{ display:flex; }

/* ===== ЧаВо / ЧаПи / FAQ ===== */
.faq-modal{ max-width:760px; }
.faq-search input{ width:100%; }
.faq-cats{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 4px; }
.faq-cat{ padding:6px 12px; border:1px solid var(--border); border-radius:99px; background:transparent; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; }
.faq-cat:hover{ color:var(--text); }
.faq-cat.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.faq-group{ margin:16px 0 6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.faq-item{ border:1px solid var(--border); border-radius:12px; background:var(--bg-elev); margin-bottom:8px; overflow:hidden; }
.faq-item summary{ cursor:pointer; padding:12px 14px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:20px; line-height:1; color:var(--muted); flex:none; }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-a{ padding:0 14px 14px; line-height:1.55; color:var(--text); }
.faq-a a{ color:var(--accent-2-text); }
.faq-more{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }