/* site-theme.css — оформление в стиле unmatched.kz.
 *
 * Подключается ПОСЛЕ style.css и применяется только к экранам вне партии.
 * Игровой стол (#tableScreen) и его окна намеренно не трогаются: там своя
 * плотная вёрстка, завязанная на масштабирование и перетаскивание.
 *
 * Решения по итогам правок владельца:
 *   окна и кнопки  — скруглённые, как было раньше: срез углов оставлен
 *                    только надзаголовкам и ярлыкам, где он читается как приём;
 *   заголовки      — курсив, заглавные, скошенная плашка;
 *   переключатели  — прежние, «айфоновские», тема их не трогает;
 *   фон            — серая сетка, без синевы;
 *   опасные кнопки — красные, розового в теме нет.
 *
 * Шрифт остаётся прежним (Bebas Neue Pro).
 */

/* Скоуп темы: перечисляем экраны явно, чтобы случайно не зацепить стол. */
#homeScreen, #adminScreen, #ladderScreen, #rosterScreen,
#lobbyScreen, #setupScreen, #mulliganScreen,
#authModal, #profileModal, #boardPickerModal, #heroViewModal, #boardPreviewModal {
  --s-bg:#05060a;
  --s-surface:#0d1017;
  --s-surface2:#131826;
  --s-text:#eef1f8;
  --s-muted:#8b93a7;
  --s-line:rgba(255,255,255,.10);
  --s-accent:#1f56ff;          /* синее, чем на сайте — по просьбе владельца */
  --s-accent-hi:#5b8cff;
  --s-cyan:#35e0ff;
  --s-danger:#e2453f;          /* вместо розового */
  --s-shadow:0 25px 60px rgba(0,0,0,.55);
  --s-r:14px;                  /* скругление карточек и окон */
  --s-r-btn:10px;              /* скругление кнопок */
  --s-cut:8px;                 /* срез только у надзаголовков и ярлыков */
}

/* ---------- фон: серая сетка и лёгкое синее свечение сверху ---------- */
#homeScreen, #adminScreen, #ladderScreen, #rosterScreen,
#lobbyScreen, #setupScreen, #mulliganScreen {
  background:
    radial-gradient(1100px 520px at 80% -12%, rgba(31,86,255,.12), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.028) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.028) 39px 40px),
    var(--s-bg);
  color:var(--s-text);
}

/* ---------- верхняя плашка ---------- */
#homeScreen .apphead, #adminScreen .apphead,
#ladderScreen .apphead, #rosterScreen .apphead {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--s-line);
  background:linear-gradient(180deg, #0a0f1a, #070a12);
  padding:10px 22px;
}
#homeScreen .apphead-left, #adminScreen .apphead-left,
#ladderScreen .apphead-left, #rosterScreen .apphead-left {
  display:flex; align-items:center; gap:22px; min-width:0;
}
#homeScreen .apphead-right, #adminScreen .apphead-right,
#ladderScreen .apphead-right, #rosterScreen .apphead-right {
  display:flex; align-items:center; gap:12px;
}

/* логотип: «ED» подсвечено акцентом */
.brandmark{
  font-size:19px; font-weight:800; letter-spacing:.16em; color:var(--s-text);
  white-space:nowrap; user-select:none;
}
.brandmark b{ color:var(--s-accent-hi); font-weight:800 }

/* пункты навигации */
.appnav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.navbtn{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:0; border-radius:var(--s-r-btn);
  color:var(--s-muted); font-family:inherit; font-size:14px; font-weight:700;
  letter-spacing:.02em; padding:8px 14px; cursor:pointer;
  transition:background .15s, color .15s;
}
.navbtn .ni{ font-size:14px; opacity:.85 }
.navbtn:hover{ background:rgba(255,255,255,.06); color:var(--s-text) }
.navbtn.on{ background:var(--s-accent); color:#fff }
.navbtn.on:hover{ background:var(--s-accent); filter:brightness(1.1) }

/* профиль в правой части плашки */
#homeScreen .userchip, #adminScreen .userchip,
#ladderScreen .userchip, #rosterScreen .userchip {
  display:flex; align-items:center; gap:10px;
}
#homeScreen .uav, #adminScreen .uav, #ladderScreen .uav, #rosterScreen .uav {
  border-radius:50%; border:1px solid var(--s-line);
}
#homeScreen .ulogin, #adminScreen .ulogin,
#ladderScreen .ulogin, #rosterScreen .ulogin {
  border:1px solid var(--s-line); border-radius:999px;
  padding:2px 10px; font-size:12px; color:var(--s-muted);
}

/* ---------- надзаголовок и заголовки ---------- */
/* Скошенная плашка — тот приём, который владельцу понравился. */
#homeScreen .eyebrow, #adminScreen .eyebrow,
#ladderScreen .eyebrow, #rosterScreen .eyebrow, #lobbyScreen .eyebrow {
  display:inline-block;
  background:var(--s-accent);
  color:#fff;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:5px 14px;
  margin-bottom:10px;
  clip-path:polygon(var(--s-cut) 0, 100% 0, calc(100% - var(--s-cut)) 100%, 0 100%);
}
#homeScreen h1, #adminScreen h1, #ladderScreen h1, #rosterScreen h1 {
  text-transform:uppercase;
  font-style:italic;
  letter-spacing:-.01em;
  line-height:.98;
}

/* ---------- карточки: скруглённые, как раньше ---------- */
#homeScreen .card, #adminScreen .card, #ladderScreen .card,
#rosterScreen .card, #lobbyScreen .card, #mulliganScreen .card {
  background:linear-gradient(180deg, var(--s-surface2), var(--s-surface));
  border:1px solid var(--s-line);
  border-radius:var(--s-r);
  box-shadow:var(--s-shadow);
}

/* ярлык раздела внутри карточки — со срезом */
#homeScreen .pill, #adminScreen .pill, #ladderScreen .pill,
#rosterScreen .pill, #lobbyScreen .pill, #setupScreen .pill {
  background:transparent;
  border:1px solid var(--s-accent);
  color:var(--s-accent-hi);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  font-size:12px;
  border-radius:0;
  clip-path:polygon(var(--s-cut) 0, 100% 0, calc(100% - var(--s-cut)) 100%, 0 100%);
}

/* ---------- кнопки: скруглённые ---------- */
#homeScreen .btn, #adminScreen .btn, #ladderScreen .btn, #rosterScreen .btn,
#lobbyScreen .btn, #setupScreen .btn, #mulliganScreen .btn,
#authModal .btn, #profileModal .btn, #boardPickerModal .btn, #heroViewModal .btn {
  /* Один размер со всеми пунктами шапки — крупные кнопки владельцу мешали. */
  padding:8px 14px;
  font-size:14px;
  line-height:1.25;
  border-radius:var(--s-r-btn);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:800;
  background:var(--s-surface2);
  border:1px solid var(--s-line);
  color:var(--s-text);
  transition:filter .15s, border-color .15s;
}
#homeScreen .btn:hover, #adminScreen .btn:hover, #ladderScreen .btn:hover,
#rosterScreen .btn:hover, #lobbyScreen .btn:hover, #setupScreen .btn:hover,
#mulliganScreen .btn:hover, #authModal .btn:hover, #profileModal .btn:hover {
  filter:brightness(1.25);
  border-color:var(--s-accent);
}
/* главное действие */
#homeScreen .btn.gold, #adminScreen .btn.gold, #lobbyScreen .btn.gold,
#setupScreen .btn.gold, #mulliganScreen .btn.gold, #authModal .btn.gold,
#profileModal .btn.gold {
  background:var(--s-accent); border-color:transparent; color:#fff;
}
/* второстепенное */
#homeScreen .btn.ghost, #adminScreen .btn.ghost, #ladderScreen .btn.ghost,
#rosterScreen .btn.ghost, #lobbyScreen .btn.ghost, #setupScreen .btn.ghost,
#mulliganScreen .btn.ghost { background:transparent }
/* опасное — красное */
#homeScreen .btn.danger, #adminScreen .btn.danger, #ladderScreen .btn.danger,
#lobbyScreen .btn.danger, #profileModal .btn.danger {
  background:transparent; color:var(--s-danger); border-color:var(--s-danger);
}

/* мелкие кнопки внутри карточек — ещё компактнее */
#homeScreen .btn.small, #adminScreen .btn.small, #ladderScreen .btn.small,
#rosterScreen .btn.small, #lobbyScreen .btn.small, #setupScreen .btn.small,
#profileModal .btn.small {
  padding:6px 11px; font-size:13px;
}

/* ссылка на сайт и вход/регистрация живут в шапке — размер как у пунктов */
.btn.sitelink{
  padding:8px 14px; font-size:14px; line-height:1.25;
  border-color:rgba(255,255,255,.18); color:var(--s-accent-hi);
}
.btn.sitelink:hover{ background:rgba(31,86,255,.12); border-color:var(--s-accent) }

.apphead-right .authcta{ display:flex; align-items:center; gap:8px }
.apphead-right .authcta .btn{
  padding:8px 14px; font-size:14px; line-height:1.25;
  background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--s-text);
}
.apphead-right .authcta .btn:first-child{
  background:var(--s-accent); border-color:transparent; color:#fff;
}
.apphead-right .uactions .btn{ padding:6px 11px; font-size:13px }

/* ---------- поля ввода ---------- */
#homeScreen input, #adminScreen input, #lobbyScreen input, #setupScreen input,
#authModal input, #profileModal input,
#homeScreen select, #adminScreen select, #lobbyScreen select, #setupScreen select,
#authModal select, #profileModal select {
  background:var(--s-bg);
  border:1px solid var(--s-line);
  border-radius:10px;
  color:var(--s-text);
  transition:border-color .15s;
}
#homeScreen input:focus, #adminScreen input:focus, #lobbyScreen input:focus,
#setupScreen input:focus, #authModal input:focus, #profileModal input:focus,
#homeScreen select:focus, #lobbyScreen select:focus, #setupScreen select:focus {
  border-color:var(--s-accent); outline:none;
}
#homeScreen label, #adminScreen label, #lobbyScreen label, #authModal label,
#profileModal label {
  color:var(--s-muted); text-transform:uppercase; letter-spacing:.08em; font-size:12px;
}

/* ---------- переключатель «открытое / по паролю» ---------- */
#homeScreen .seg, #lobbyScreen .seg {
  border-radius:10px; border:1px solid var(--s-line); background:var(--s-bg); overflow:hidden;
}
#homeScreen .segbtn, #lobbyScreen .segbtn {
  border-radius:0; text-transform:uppercase; letter-spacing:.06em; font-weight:800;
}
#homeScreen .segbtn.sel, #lobbyScreen .segbtn.sel { background:var(--s-accent); color:#fff }

/* Тумблеры (.tgl-ios) намеренно не трогаем — владелец просил оставить как было. */

/* ---------- список лобби ---------- */
#homeScreen .lobbycard {
  background:var(--s-surface);
  border:1px solid var(--s-line);
  border-radius:var(--s-r);
  transition:border-color .15s, transform .15s;
}
#homeScreen .lobbycard:hover { border-color:var(--s-accent); transform:translateY(-2px) }
#homeScreen .lobbycard.ingame { border-color:rgba(226,69,63,.35) }
#homeScreen .badge-live {
  background:var(--s-danger); color:#fff; border-radius:999px;
  text-transform:uppercase; letter-spacing:.1em; font-weight:800;
}
#homeScreen .lobby-rated { color:var(--s-accent-hi) }
#homeScreen .cap-dot.on { background:var(--s-accent) }

/* кнопки в карточке лобби: «Войти» и, у владельца, «Удалить» */
#homeScreen .lc-right{ display:flex; flex-direction:column; gap:6px; align-items:stretch }

/* сообщение о сборке стола на экране мулигана */
#mulliganScreen .mullnote{
  margin-top:12px; padding:10px 14px;
  border:1px solid var(--s-line); border-radius:var(--s-r-btn);
  background:var(--s-surface); color:var(--s-muted); font-size:14px;
}
#mulliganScreen .mullnote.bad{ border-color:var(--s-danger); color:var(--s-text) }
#mulliganScreen .mullnote .btn{ margin-left:8px }

/* ---------- ладдер ---------- */
#ladderScreen .lad-row { border-bottom:1px solid var(--s-line) }
#ladderScreen .lad-row.lad-head {
  color:var(--s-muted); text-transform:uppercase; letter-spacing:.1em; font-size:12px;
}
#ladderScreen .lad-row.me { background:rgba(31,86,255,.12); border-left:3px solid var(--s-accent) }
#ladderScreen .lad-rating { color:var(--s-accent-hi); font-weight:800 }
#ladderScreen .lad-vsbar i, #ladderScreen .lad-wr { color:var(--s-accent-hi) }

/* ---------- ростер и выбор персонажей ---------- */
#rosterScreen .rostercard, #setupScreen .herocard {
  background:var(--s-surface);
  border:1px solid var(--s-line);
  border-radius:var(--s-r);
  transition:border-color .15s, transform .15s;
}
#rosterScreen .rostercard:hover, #setupScreen .herocard:hover {
  border-color:var(--s-accent); transform:translateY(-2px);
}
#setupScreen .herocard.sel, #setupScreen .herocard.picked { border-color:var(--s-accent-hi) }
#setupScreen .hp-search, #setupScreen .hp-filters select {
  background:var(--s-bg); border:1px solid var(--s-line); border-radius:10px;
}
#setupScreen .hp-bar { padding-bottom:4px; border-bottom:1px solid var(--s-line) }

/* ---------- слоты лобби ---------- */
#lobbyScreen .slot {
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--s-r);
  transition:border-color .15s;
}
#lobbyScreen .slot:hover { border-color:var(--s-accent) }
#lobbyScreen .slot .nm { font-weight:700 }

/* ---------- модальные окна вне партии ---------- */
#authModal .modalbox, #profileModal .modalbox, #boardPickerModal .modalbox,
#heroViewModal .modalbox, #boardPreviewModal .modalbox {
  background:linear-gradient(180deg, var(--s-surface2), var(--s-surface));
  border:1px solid var(--s-line);
  border-radius:16px;
  box-shadow:var(--s-shadow);
}
#authModal .modalhead, #profileModal .modalhead, #boardPickerModal .modalhead,
#heroViewModal .modalhead { border-bottom:1px solid var(--s-line) }

/* ---------- прочие карточки ---------- */
#mulliganScreen .mullcard, #lobbyScreen .bpcard, #boardPickerModal .bpcard,
#heroViewModal .vh-card, #rosterScreen .vh-card {
  background:var(--s-surface);
  border:1px solid var(--s-line);
  border-radius:12px;
  transition:border-color .15s, transform .15s;
}
#lobbyScreen .bpcard:hover, #boardPickerModal .bpcard:hover { border-color:var(--s-accent) }
#lobbyScreen .bpcard.sel, #boardPickerModal .bpcard.sel { border-color:var(--s-accent-hi) }

#lobbyScreen .team { border:1px solid var(--s-line); border-radius:12px; background:rgba(19,24,38,.6) }
#lobbyScreen .chip, #setupScreen .chip {
  border-radius:999px; text-transform:uppercase; letter-spacing:.08em; font-weight:800;
}
#setupScreen .pickrow, #setupScreen .picklist {
  border:1px solid var(--s-line); border-radius:12px; background:var(--s-surface);
}
#setupScreen .pickorder .chip.active { background:var(--s-accent); color:#fff }

/* ---------- мелочи ---------- */
#homeScreen .divider, #adminScreen .divider, #lobbyScreen .divider { background:var(--s-line) }
#homeScreen .muted, #adminScreen .muted, #ladderScreen .muted,
#rosterScreen .muted, #lobbyScreen .muted, #setupScreen .muted { color:var(--s-muted) }

/* Узкие экраны: навигация переносится, логотип не сжимаем. */
@media (max-width: 900px){
  .appnav{ gap:2px }
  .navbtn{ padding:7px 10px; font-size:13px }
  .navbtn .ni{ display:none }
}