/* ===== Дизайн «Первый» (v.5.10) — плоский, почти ретро =====
   Включается атрибутом html[data-design="first"] (структура — как у «Классики», data-layout="top").
   Правила: никаких теней, градиентов, скруглений, размытия и плавных переходов; жёсткие рамки 1–2px,
   моноширинные подписи, заливка вместо эффектов. Остальные дизайны не затрагиваются. */

html[data-design="first"]:not([data-theme="light"]){
  --bg:#0b0b0c !important;
  --bg-elev:#131314 !important;
  --bg-elev-2:#1a1a1c !important;
  --border:#2c2c30 !important;
  --text:#ececec !important;
  --muted:#8e8e96 !important;
  --orange:#ff6a00 !important;
  --orange-rgb:255,106,0 !important;
  --orange-text:#ff8a2a !important;
  --on-accent:#0b0b0c !important;
  --logo-tv-color:#ff6a00 !important;
  --topbar-grad-a:#0b0b0c !important;
  --topbar-grad-b:#0b0b0c !important;
  --ticker-bg:#0b0b0c !important;
  --hover-1:#1a1a1c !important;--hover-2:#1a1a1c !important;--hover-3:#1a1a1c !important;
}
html[data-design="first"] body{background:var(--bg)}

/* ---- общий «плоский» сброс ---- */
html[data-design="first"] *,
html[data-design="first"] *::before,
html[data-design="first"] *::after{
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  transition:none !important;
}
/* все углы прямые; круглыми остаются только аватары и кольца составов */
html[data-design="first"] *:not(.avatar):not(.avatar-fallback):not(.roster-photo-wrap),
html[data-design="first"] *:not(.avatar):not(.avatar-fallback):not(.roster-photo-wrap)::before,
html[data-design="first"] *:not(.avatar):not(.avatar-fallback):not(.roster-photo-wrap)::after{border-radius:0 !important}
/* никаких «подъёмов» и увеличений при наведении */
html[data-design="first"] *:hover{transform:none !important}

/* ---- шапка ---- */
html[data-design="first"] .topbar{background:var(--bg);border-bottom:2px solid var(--accent)}
html[data-design="first"] .topbar .logo{font-family:var(--font-mono);font-weight:800;letter-spacing:.02em}
html[data-design="first"] .topbar .version-label,
html[data-design="first"] body .version-label{background:transparent !important;border:1px solid var(--border) !important;color:var(--muted) !important;
  font-family:var(--font-mono) !important;text-shadow:none !important;text-decoration:none !important}

/* меню в шапке: плоские вкладки, активная — сплошная оранжевая заливка */
html[data-design="first"][data-layout="top"] #mainNav{background:transparent;border:0;padding:0;gap:0;backdrop-filter:none}
html[data-design="first"][data-layout="top"] #mainNav .nav-item{font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:9px 12px;border:0;border-bottom:2px solid transparent;opacity:1;color:var(--muted);background:transparent}
html[data-design="first"][data-layout="top"] #mainNav .nav-item:hover{background:var(--bg-elev-2);color:var(--text)}
html[data-design="first"][data-layout="top"] #mainNav .nav-item.active{background:var(--accent);color:#0b0b0c;border-bottom-color:var(--accent)}

/* ссылки Awards / Зал славы / ... — плоские рамки без градиентов */
html[data-design="first"][data-layout="top"] #awardsLink,
html[data-design="first"][data-layout="top"] #hofLink,
html[data-design="first"][data-layout="top"] #mappoolLink{background:transparent;background-image:none;border:1px solid var(--border);color:var(--text);
  font-family:var(--font-mono);font-size:11.5px;height:34px}
html[data-design="first"][data-layout="top"] #awardsLink:hover,
html[data-design="first"][data-layout="top"] #hofLink:hover,
html[data-design="first"][data-layout="top"] #mappoolLink:hover{border-color:var(--accent);color:var(--accent-text)}

/* кнопка смены дизайна */
html[data-design="first"] .layout-toggle{background:transparent !important;background-image:none !important;border:1px solid var(--border) !important;
  color:var(--text) !important;font-family:var(--font-mono) !important}

/* ---- бегущая строка: квадратная плашка «РЕЗУЛЬТАТЫ» ---- */
html[data-design="first"] .ticker-wrap{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg)}
html[data-design="first"] .ticker-wrap .tag{font-family:var(--font-mono);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:0 10px}
html[data-design="first"] .ticker-wrap .tag .tk-live,
html[data-design="first"] .ticker-wrap .tag .tk-tag-full,
html[data-design="first"] .ticker-wrap .tag .tk-tag-short{display:none}
html[data-design="first"] .ticker-wrap .tag::after{content:"Результаты"}
html[data-design="first"] .ticker-track{font-size:12px}

/* ---- узкая колонка ---- */
html[data-design="first"][data-layout="top"] .shell>.app{max-width:800px;margin:0 auto;padding:0 20px 80px}

/* ---- заголовки ---- */
html[data-design="first"] .hero{padding:32px 0 8px}
html[data-design="first"] .hero h1{font-family:var(--font-body);font-weight:900;font-size:44px;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;color:var(--text)}
html[data-design="first"] .hero .sub{max-width:540px;font-size:13px;line-height:1.55}
html[data-design="first"] .section-title{font-family:var(--font-body);font-weight:900;font-size:22px;letter-spacing:0;margin:30px 0 4px}
html[data-design="first"] .section-title .bar{width:6px;height:20px}

/* ---- кнопки: сплошная заливка, жёсткая рамка, при наведении — инверсия ---- */
html[data-design="first"] .btn{background:transparent;background-image:none;border:2px solid var(--border);color:var(--text);
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
html[data-design="first"] .btn:hover{border-color:var(--accent);color:var(--accent-text)}
html[data-design="first"] .btn-primary{background:var(--accent);border-color:var(--accent);color:#0b0b0c}
html[data-design="first"] .btn-primary:hover{background:transparent;color:var(--accent-text);filter:none}
html[data-design="first"] .btn-ghost{background:transparent}
html[data-design="first"] .btn-green,html[data-design="first"] .btn-red,html[data-design="first"] .btn-blue{background-image:none}

/* ---- карточки ---- */
html[data-design="first"] .card,
html[data-design="first"] .panel-box{background:var(--bg-elev);background-image:none;border:1px solid var(--border)}
html[data-design="first"] .card::before{background:var(--accent);background-image:none;width:4px}
html[data-design="first"] .card.clickable:hover{border-color:var(--accent)}

/* ---- таблицы ---- */
html[data-design="first"] table{font-size:13px}
html[data-design="first"] th{font-size:9.5px;letter-spacing:.14em;padding:9px 10px;border-bottom:2px solid var(--border)}
html[data-design="first"] td{padding:8px 10px}
html[data-design="first"] .standing-row:hover td{background:var(--bg-elev-2)}
html[data-design="first"] .standing-row.is-open td{background:var(--bg-elev-2)}
html[data-design="first"] .standing-expand td{background:var(--bg-elev);background-image:none}

/* ---- состав ---- */
html[data-design="first"] .roster-strip{justify-content:flex-start;gap:18px;padding:18px 20px 20px 36px;border-left:3px solid var(--accent)}
html[data-design="first"] .roster-photo-wrap{background:var(--accent);background-image:none;padding:2px}
html[data-design="first"] .roster-card:hover{background:var(--bg-elev-2)}
html[data-design="first"] .roster-nick{font-size:11.5px}

/* ---- поля ввода ---- */
html[data-design="first"] input,
html[data-design="first"] select,
html[data-design="first"] textarea{background:var(--bg-elev) !important;border:1px solid var(--border) !important}
html[data-design="first"] input:focus,
html[data-design="first"] select:focus,
html[data-design="first"] textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent) !important}

/* ---- OWTV в «Первом»: основной цвет синий (как в самом начале) ---- */
html[data-design="first"][data-game="ow"]:not([data-theme="light"]){
  --orange:#3D7FFF !important;
  --orange-rgb:61,127,255 !important;
  --orange-text:#6B9DFF !important;
  --logo-tv-color:#3D7FFF !important;
}
html[data-design="first"][data-game="ow"][data-theme="light"]{
  --orange:#2461D9 !important;
  --orange-rgb:36,97,217 !important;
  --orange-text:#2461D9 !important;
  --logo-tv-color:#2461D9 !important;
}

@media (max-width:820px){
  html[data-design="first"][data-layout="top"] .shell>.app{padding:0 12px 64px}
  html[data-design="first"] .hero h1{font-size:32px}
  html[data-design="first"] .roster-strip{padding-left:12px;gap:12px}
}