/* ============================================================
   РПЛ Лига прогнозов — «вечерний матч»
   Палитра: газон под прожекторами + янтарное табло
   ============================================================ */
:root {
  --pitch-deep: #0b1f15;   /* фон — тёмный газон */
  --pitch:      #0f2a1c;   /* карточки */
  --pitch-up:   #143523;   /* приподнятые элементы */
  --line:       #23503a;   /* меловые линии разметки */
  --chalk:      #f1efe2;   /* мел, основной текст */
  --chalk-dim:  #9db3a4;   /* приглушённый текст */
  --board:      #ffc53d;   /* янтарь табло */
  --board-deep: #b57f00;
  --live:       #ff5643;
  --win:  #37c26e;
  --draw: #c9b458;
  --loss: #e05a4e;
  --radius: 14px;
  --font-display: "Russo One", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-board: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
/* Атрибут hidden должен перебивать любые display в классах —
   иначе скрытые элементы остаются на экране. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 50% -200px, var(--glow, #17402a) 0%, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 120px,
      var(--stripes, rgba(255,255,255,.015)) 120px 240px),
    var(--pitch-deep);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap { width: min(1060px, 100% - 2rem); margin: 0 auto; flex: 1; padding-bottom: 3rem; }
.foot {
  text-align: center; color: var(--chalk-dim); font-size: .78rem;
  padding: 1.2rem; border-top: 1px solid var(--line); margin-top: 2rem;
}

/* ---------------- top bar ---------------- */
.topbar {
  display: flex; align-items: center; gap: 1.2rem;
  width: min(1060px, 100% - 2rem); margin: 0 auto;
  padding: .9rem 0 .8rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--chalk); }
.brand-badge {
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .04em;
  background: var(--board); color: #201500;
  padding: .3rem .5rem; border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(255,197,61,.25), 0 4px 14px rgba(255,197,61,.18);
}
.brand-name { font-family: var(--font-display); font-size: 1rem; letter-spacing: .02em; }
.mainnav { display: flex; gap: .2rem; margin-left: auto; }
.mainnav a {
  color: var(--chalk-dim); text-decoration: none; font-weight: 600;
  padding: .45rem .8rem; border-radius: 10px; transition: color .15s, background .15s;
}
.mainnav a:hover { color: var(--chalk); background: var(--pitch-up); }
.mainnav a.active { color: var(--board); background: var(--pitch-up); }
.userbox { display: flex; align-items: center; gap: .6rem; }
.uname { font-weight: 600; font-size: .9rem; color: var(--chalk-dim); }
.logout { color: var(--chalk-dim); text-decoration: none; font-size: 1.1rem; }
.logout:hover { color: var(--live); }

/* ---------------- typography ---------------- */
.display {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: .02em; margin: .2rem 0 .3rem;
  text-shadow: 0 2px 24px rgba(55,194,110,.25);
}
.round-head { margin: .8rem 0 1rem; }
.round-note { color: var(--chalk-dim); font-size: .85rem; margin: 0; }
.round-note b { color: var(--board); }

/* ---------------- round chips ---------------- */
.round-nav {
  display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0 .4rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.round-chip {
  flex: 0 0 auto; min-width: 2.4rem; text-align: center;
  font-family: var(--font-board); font-weight: 700; font-size: .85rem;
  color: var(--chalk-dim); text-decoration: none;
  padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--pitch); transition: all .15s;
}
.round-chip:hover { color: var(--chalk); border-color: var(--chalk-dim); }
.round-chip.cur { border-color: var(--board-deep); color: var(--board); }
.round-chip.sel { background: var(--board); border-color: var(--board); color: #201500; }

/* ---------------- layout ---------------- */
.round-grid { display: grid; grid-template-columns: 1fr 280px; gap: 1.4rem; align-items: start; }
@media (max-width: 860px) { .round-grid { grid-template-columns: 1fr; } .sidebar { order: -1; } }

/* ---------------- match card ---------------- */
.matches { display: flex; flex-direction: column; gap: 1rem; }
.match {
  background: linear-gradient(180deg, var(--pitch-up) 0%, var(--pitch) 90px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1.1rem 1rem;
}
.match.is-live { border-color: rgba(255,86,67,.55); box-shadow: 0 0 24px rgba(255,86,67,.12); }
.match-meta { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.kickoff { font-size: .8rem; color: var(--chalk-dim); font-variant-numeric: tabular-nums; }
.tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 99px; margin-left: auto;
}
.tag.live { background: var(--live); color: #fff; animation: pulse 1.6s infinite; }
.tag.done { background: var(--pitch-deep); color: var(--chalk-dim); border: 1px solid var(--line); }
.tag.open { background: rgba(55,194,110,.15); color: var(--win); border: 1px solid rgba(55,194,110,.4); }
.tag.closed, .tag.pst { background: var(--pitch-deep); color: var(--chalk-dim); border: 1px solid var(--line); }
@keyframes pulse { 50% { opacity: .55; } }

.match-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .8rem;
}
.team { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.team.home { justify-content: flex-end; text-align: right; }
.tname { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; }
.tlogo { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto;
         filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.tlogo.ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pitch-deep); border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--font-display); font-size: .75rem; color: var(--chalk-dim);
}

/* табло — фирменный элемент */
.board {
  display: flex; align-items: center; gap: .25rem;
  background: #0a120d; border: 1px solid #000; border-radius: 10px;
  padding: .35rem .6rem;
  box-shadow: inset 0 0 12px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05);
}
.digit {
  font-family: var(--font-board); font-weight: 700; font-size: 1.5rem;
  color: var(--board); min-width: 1.15em; text-align: center;
  text-shadow: 0 0 10px rgba(255,197,61,.55);
}
.digit.dim { color: #3d4a40; text-shadow: none; }
.colon { color: #3d4a40; font-family: var(--font-board); font-size: 1.2rem; }

/* ---------------- prediction ---------------- */
.predict-zone { margin-top: .8rem; border-top: 1px dashed var(--line); padding-top: .7rem; }
.predict-form, .myline { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.pf-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--chalk-dim); }
.pf-colon { font-family: var(--font-board); color: var(--chalk-dim); }
.predict-form input[type=number] {
  width: 3.2rem; text-align: center;
  font-family: var(--font-board); font-weight: 700; font-size: 1.15rem;
  color: var(--board); background: #0a120d;
  border: 1px solid var(--line); border-radius: 8px; padding: .35rem .2rem;
}
.predict-form input[type=number]:focus { outline: 2px solid var(--board); outline-offset: 1px; }
.mypred { font-family: var(--font-board); font-weight: 700; font-size: 1.1rem; color: var(--chalk); }
.pts { font-family: var(--font-board); font-weight: 700; font-size: .85rem;
       padding: .1rem .45rem; border-radius: 7px; }
.pts.p3 { background: var(--win); color: #06150c; }
.pts.p2 { background: var(--draw); color: #1c1704; }
.pts.p1 { background: var(--pitch-up); color: var(--chalk); border: 1px solid var(--line); }
.pts.p0 { background: transparent; color: var(--chalk-dim); border: 1px solid var(--line); }
.hidden-note { font-size: .78rem; color: var(--chalk-dim); margin: .6rem 0 0; }
.muted { color: var(--chalk-dim); }

/* ---------------- folds ---------------- */
.fold { margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
.fold summary {
  cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--chalk-dim);
  text-transform: uppercase; letter-spacing: .06em; list-style: none;
}
.fold summary::before { content: "▸ "; color: var(--board); }
.fold[open] summary::before { content: "▾ "; }
.fold summary::-webkit-details-marker { display: none; }
.preview { font-size: .86rem; color: var(--chalk); margin: .5rem 0; }
.forms { display: flex; flex-direction: column; gap: .35rem; }
.formline { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.fname { min-width: 9rem; color: var(--chalk-dim); }
.badges { display: flex; gap: .25rem; }
.fb {
  width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: .68rem; font-weight: 700; cursor: default;
}
.fb.В { background: var(--win); color: #06150c; }
.fb.Н { background: var(--draw); color: #1c1704; }
.fb.П { background: var(--loss); color: #fff; }

.predlist { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.predlist li {
  display: flex; align-items: center; gap: .7rem;
  padding: .3rem .55rem; border-radius: 8px; background: var(--pitch-deep);
}
.predlist li.me { outline: 1px solid var(--board-deep); }
.pl-name { flex: 1; font-size: .85rem; }
.pl-score { font-family: var(--font-board); font-weight: 700; }

/* ---------------- sidebar / tables ---------------- */
.sidebar { position: sticky; top: 1rem; }
.side-title { font-family: var(--font-display); font-weight: 400; font-size: 1rem;
              letter-spacing: .03em; margin: 0 0 .6rem; }
.mini-table, .big-table, .matrix {
  width: 100%; border-collapse: collapse; font-size: .86rem;
  background: var(--pitch); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.mini-table th, .big-table th, .matrix th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--chalk-dim); text-align: left; font-weight: 600;
  padding: .5rem .6rem; border-bottom: 1px solid var(--line); background: var(--pitch-up);
}
.mini-table td, .big-table td, .matrix td { padding: .45rem .6rem; border-bottom: 1px solid rgba(35,80,58,.4); }
.mini-table tr:last-child td, .big-table tr:last-child td, .matrix tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num a { color: inherit; text-decoration: none; }
th.num a.curlink { color: var(--board); }
.left { text-align: left; }
.strong { font-family: var(--font-board); font-weight: 700; color: var(--board); }
.dim { color: var(--chalk-dim); }
tr.me td { background: rgba(255,197,61,.07); }
tr.leader td { background: rgba(55,194,110,.08); }
.crown { color: var(--board); }
.pname { font-weight: 600; }
.table-scroll { overflow-x: auto; border-radius: var(--radius); }
.matrix td.num, .matrix th { padding: .4rem .45rem; }

/* ---------------- buttons, forms, flash ---------------- */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: .85rem;
  border-radius: 10px; padding: .5rem .95rem; cursor: pointer;
  border: 1px solid transparent; transition: all .15s; text-decoration: none;
  display: inline-block; text-align: center;
}
.btn.primary { background: var(--board); color: #201500; }
.btn.primary:hover { background: #ffd670; }
.btn.primary:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--chalk-dim); border-color: var(--line); }
.btn.ghost:hover { color: var(--chalk); border-color: var(--chalk-dim); }
.btn.wide { width: 100%; margin-top: .7rem; }
.flash { border-radius: 10px; padding: .55rem .9rem; margin: .6rem 0; font-size: .85rem; font-weight: 600; }
.flash.ok { background: rgba(55,194,110,.15); color: var(--win); border: 1px solid rgba(55,194,110,.4); }
.flash.err { background: rgba(224,90,78,.15); color: var(--loss); border: 1px solid rgba(224,90,78,.4); }
.empty { color: var(--chalk-dim); }

input[type=text], input[type=password], input[type=number], select, input[type=file] {
  background: var(--pitch-deep); color: var(--chalk);
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem;
  font-family: var(--font-body); font-size: .9rem;
}
input:focus, select:focus { outline: 2px solid var(--board); outline-offset: 1px; }

/* ---------------- login ---------------- */
.login-stage { display: flex; justify-content: center; padding: 8vh 0 4rem; }
.login-card {
  width: min(360px, 100%); background: var(--pitch);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: .8rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.login-crest {
  align-self: center; font-family: var(--font-display); font-size: 1.3rem;
  background: var(--board); color: #201500; padding: .5rem .8rem; border-radius: 12px;
  box-shadow: 0 0 30px rgba(255,197,61,.35);
}
.login-title { font-family: var(--font-display); font-weight: 400; text-align: center;
               font-size: 1.4rem; margin: .2rem 0 0; }
.login-sub { text-align: center; color: var(--chalk-dim); font-size: .82rem; margin: 0 0 .4rem; }
.login-card label { display: flex; flex-direction: column; gap: .3rem;
                    font-size: .78rem; font-weight: 600; color: var(--chalk-dim);
                    text-transform: uppercase; letter-spacing: .05em; }
.login-rules { text-align: center; color: var(--chalk-dim); font-size: .74rem; margin: .4rem 0 0; }

/* ---------------- admin ---------------- */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.panel { background: var(--pitch); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.kv { margin: .25rem 0; font-size: .88rem; }
.errtext { color: var(--loss); font-size: .8rem; word-break: break-all; }
.userlist { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.userlist li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .88rem; }
.inline-form { display: flex; gap: .4rem; }
.inline-form input { width: 9rem; }
.stack-form { display: flex; flex-direction: column; gap: .55rem; margin-top: .4rem; }
.mini-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
              color: var(--chalk-dim); margin: .4rem 0 0; }
.score-inline { display: flex; align-items: center; gap: .5rem; }
.score-inline input { width: 4rem; text-align: center; font-family: var(--font-board); }
code { background: var(--pitch-deep); padding: .1rem .35rem; border-radius: 6px; font-size: .82em; }

/* ---------------- misc ---------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ---------------- v2: кружки формы, вероятности, таблица РПЛ ---------------- */
.fb {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font-size: .66rem;
}
.fb.Н { background: #ff9a3c; color: #241300; }

.viewtabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.vt {
  text-decoration: none; color: var(--chalk-dim); font-weight: 600; font-size: .85rem;
  padding: .38rem .8rem; border: 1px solid var(--line); border-radius: 99px;
  background: var(--pitch); transition: all .15s;
}
.vt:hover { color: var(--chalk); border-color: var(--chalk-dim); }
.vt.sel { background: var(--board); border-color: var(--board); color: #201500; }

.clubwrap { display: inline-flex; align-items: center; gap: .5rem; }
.clublogo { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }

/* v3: выравнивание числовых заголовков по правому краю, как и значений */
.mini-table th.num, .big-table th.num, .matrix th.num { text-align: right; }

/* v3: панель эмблем в админке */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
             gap: .4rem; margin-bottom: .9rem; }
.logo-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem;
             background: var(--pitch-deep); border: 1px solid var(--line);
             border-radius: 8px; padding: .35rem .5rem; }
.logo-item img { width: 24px; height: 24px; object-fit: contain; }
.logo-item .ph { width: 24px; height: 24px; border-radius: 50%; background: var(--pitch-up);
                 display: inline-flex; align-items: center; justify-content: center;
                 font-size: .6rem; color: var(--chalk-dim); }

/* v4: числовые колонки — узкие, заголовок и значение строго друг под другом */
th.num { text-align: right; }
.big-table th.num, .big-table td.num,
.mini-table th.num, .mini-table td.num {
  width: 3.4rem; min-width: 3.4rem; white-space: nowrap;
}
.big-table th.left, .big-table td.left,
.mini-table th:nth-child(2), .mini-table td:nth-child(2) { width: auto; }
.big-table th:first-child, .big-table td:first-child,
.mini-table th:first-child, .mini-table td:first-child { width: 2.2rem; }
.matrix th.num, .matrix td.num { min-width: 2rem; }

/* v5: лого лиги */
.brand-img { height: 34px; width: auto; object-fit: contain;
             filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.league-head { display: flex; align-items: center; gap: .7rem; }
.league-logo { height: 44px; width: auto; object-fit: contain; }

/* v6: блокировка входа */
.lockbox { text-align: center; background: rgba(224,90,78,.1);
           border: 1px solid rgba(224,90,78,.35); border-radius: 12px;
           padding: 1rem .8rem; }
.lockbox p { margin: .4rem 0 0; font-size: .86rem; color: var(--chalk); }
.lockbox b { color: var(--loss); }
.lockicon { font-size: 1.6rem; }

/* ============================================================
   МОБИЛЬНАЯ ВЁРСТКА
   ============================================================ */

/* планшеты и крупные телефоны */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .wrap { width: 100%; padding: 0 .7rem 2.5rem; }
  .topbar { width: 100%; padding: .6rem .7rem .5rem; gap: .5rem; flex-wrap: wrap; }
  .admin-grid { grid-template-columns: 1fr; gap: .9rem; }
  .panel { padding: .9rem 1rem; }
  .sidebar { position: static; }
}

/* телефоны */
@media (max-width: 560px) {
  /* --- шапка: логотип + имя слева, меню отдельной строкой --- */
  .topbar {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand user" "nav nav";
    row-gap: .5rem; align-items: center;
    padding: .55rem .7rem .5rem;
  }
  .brand { grid-area: brand; gap: .45rem; }
  .brand-img { height: 28px; }
  .brand-name { display: inline; font-size: .85rem; }
  .userbox { grid-area: user; justify-self: end; }
  .uname { font-size: .8rem; max-width: 7rem; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
  .mainnav {
    grid-area: nav; margin-left: 0; width: 100%;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem;
  }
  .mainnav a {
    text-align: center; padding: .5rem .2rem; font-size: .82rem;
    background: var(--pitch); border: 1px solid var(--line);
  }

  /* --- заголовки --- */
  .display { font-size: 1.55rem; }
  .league-head { gap: .5rem; }
  .league-logo { height: 32px; }
  .round-note { font-size: .8rem; }

  /* --- чипы туров: крупнее для пальца --- */
  .round-nav { gap: .35rem; padding: .5rem 0 .3rem;
               scroll-snap-type: x proximity; }
  .round-chip { min-width: 2.7rem; padding: .5rem .55rem; scroll-snap-align: center; }

  /* --- карточка матча: имена под логотипами, крупное табло --- */
  .match { padding: .8rem .7rem .85rem; border-radius: 12px; }
  .match-row { gap: .4rem; align-items: start; }
  /* имя всегда над эмблемой: у гостей разметка «логотип → имя»,
     поэтому колонку для них разворачиваем */
  .team { flex-direction: column; gap: .3rem; text-align: center;
          align-items: center; }
  .team.away { flex-direction: column-reverse; }
  .team.home, .team.away { justify-content: flex-start; text-align: center; }
  .tname {
    font-size: .8rem; line-height: 1.15; white-space: normal;
    overflow: visible; text-overflow: clip; max-width: 6.5rem;
  }
  .tlogo { width: 40px; height: 40px; }
  .board { padding: .3rem .45rem; margin-top: .35rem; }
  .digit { font-size: 1.35rem; min-width: 1em; }

  /* --- ввод прогноза: крупные поля, кнопка на всю ширину --- */
  .predict-form { gap: .45rem; }
  .predict-form input[type=number] {
    width: 3.6rem; font-size: 1.25rem; padding: .5rem .2rem;
  }
  .predict-form .btn { flex: 1 1 100%; padding: .6rem; margin-top: .15rem; }
  .pf-label { font-size: .72rem; }

  /* --- превью и форма --- */
  .formline { flex-wrap: wrap; gap: .3rem; }
  .fname { min-width: 100%; font-size: .78rem; }
  .fb { width: 1.55rem; height: 1.55rem; font-size: .7rem; }
  .preview { font-size: .84rem; }

  /* --- список чужих прогнозов --- */
  .predlist li { padding: .4rem .55rem; }
  .pl-name { font-size: .84rem; }

  /* --- таблицы: компактнее, с горизонтальной прокруткой --- */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .big-table, .mini-table, .matrix { font-size: .82rem; }
  .big-table th, .big-table td,
  .mini-table th, .mini-table td { padding: .42rem .4rem; }
  .big-table th.num, .big-table td.num,
  .mini-table th.num, .mini-table td.num { width: 2.7rem; min-width: 2.7rem; }
  .big-table th:first-child, .big-table td:first-child { width: 1.8rem; }
  .clublogo { width: 20px; height: 20px; }

  /* --- вкладки игроков в таблице РПЛ --- */
  .viewtabs { gap: .3rem; }
  .vt { padding: .42rem .7rem; font-size: .82rem; }

  /* --- формы админки --- */
  .userlist li { flex-direction: column; align-items: stretch; gap: .35rem; }
  .inline-form { width: 100%; }
  .inline-form input { flex: 1; width: auto; }
  .logo-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  select, input[type=text], input[type=password], input[type=number],
  input[type=file] { max-width: 100%; }

  /* --- логин --- */
  .login-stage { padding: 4vh 0 3rem; }
  .login-card { padding: 1.6rem 1.2rem; }

  .foot { font-size: .72rem; padding: 1rem .7rem; }
}

/* очень узкие экраны (iPhone SE и подобные) */
@media (max-width: 380px) {
  .brand-name { display: none; }
  .mainnav a { font-size: .78rem; padding: .45rem .15rem; }
  .tname { font-size: .74rem; max-width: 5.2rem; }
  .tlogo { width: 34px; height: 34px; }
  .digit { font-size: 1.2rem; }
  .display { font-size: 1.35rem; }
}

/* горизонтальная прокрутка таблиц с подсказкой края */
@media (hover: none) {
  .table-scroll { position: relative; }
}

/* убрать зум при фокусе в поля на iOS: минимум 16px */
@media (max-width: 760px) {
  input[type=text], input[type=password], input[type=number],
  input[type=file], select { font-size: 16px; }
  .predict-form input[type=number] { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   v7: мобильная версия
   ============================================================ */
.navtoggle, .burger { display: none; }
.navuser, .navexit { display: none; }
.pw-form {
  display: flex; flex-direction: column; gap: .8rem;
  max-width: 380px; background: var(--pitch); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem;
}
.pw-form label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .78rem; font-weight: 600; color: var(--chalk-dim);
  text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .wrap { width: min(1060px, 100% - 1.4rem); }
  .topbar { width: min(1060px, 100% - 1.4rem); padding: .7rem 0 .6rem;
            flex-wrap: wrap; gap: .6rem; }
  .brand-name { display: inline; font-size: .9rem; }
  .brand-img { height: 28px; }
  .userbox { display: none; }

  /* бургер */
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    margin-left: auto; width: 42px; height: 42px; padding: 9px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--pitch);
    cursor: pointer;
  }
  .burger span { display: block; height: 2px; background: var(--chalk); border-radius: 2px; }
  .mainnav {
    display: none; order: 3; width: 100%; margin: 0;
    flex-direction: column; gap: .15rem;
    background: var(--pitch); border: 1px solid var(--line);
    border-radius: 12px; padding: .4rem;
  }
  .navtoggle:checked ~ .mainnav { display: flex; }
  .mainnav a { padding: .7rem .8rem; border-radius: 8px; font-size: .95rem; }
  .navuser, .navexit { display: block; border-top: 1px solid var(--line);
                       margin-top: .2rem; padding-top: .7rem !important; }
  .navexit { color: var(--loss); }

  /* заголовки и отступы */
  .display { font-size: 1.5rem; }
  .round-head { margin: .5rem 0 .7rem; }
  .round-note { font-size: .8rem; }

  /* туры: крупные кнопки под палец */
  .round-chip { min-width: 2.8rem; padding: .55rem .5rem; font-size: .9rem; }

  /* таблица тура — после матчей */
  .round-grid { gap: 1rem; }
  .sidebar { order: 2; position: static; }
  .matches { order: 1; }

  /* карточка матча */
  .match { padding: .75rem .8rem .85rem; }
  .match-meta { gap: .5rem; }
  .kickoff { font-size: .76rem; }
  .tag { font-size: .62rem; padding: .16rem .42rem; }
  .match-row { gap: .5rem; }
  .tlogo { width: 34px; height: 34px; }
  .tname { font-size: .8rem; }
  .digit { font-size: 1.25rem; }
  .board { padding: .3rem .45rem; }

  /* ставка: крупные поля и кнопка на всю ширину */
  .predict-form { gap: .45rem; }
  .predict-form input[type=number] {
    width: 3.6rem; height: 2.8rem; font-size: 1.25rem;
  }
  .predict-form .btn { flex: 1 1 100%; min-height: 2.75rem; }
  .pf-label { font-size: .72rem; }

  /* превью */
  .formline { flex-wrap: wrap; gap: .3rem .5rem; }
  .fname { min-width: 100%; font-size: .78rem; }
  .preview { font-size: .82rem; }

  /* таблицы */
  .big-table, .mini-table, .matrix { font-size: .8rem; }
  .big-table th, .big-table td, .mini-table th, .mini-table td { padding: .45rem .4rem; }
  .big-table th.num, .big-table td.num,
  .mini-table th.num, .mini-table td.num { width: 2.7rem; min-width: 2.7rem; }
  .clublogo { width: 18px; height: 18px; }
  .league-logo { height: 32px; }

  /* вкладки игроков в таблице РПЛ — горизонтальная лента */
  .viewtabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem;
              scrollbar-width: thin; }
  .vt { flex: 0 0 auto; }

  /* админка */
  .admin-grid { grid-template-columns: 1fr; gap: .9rem; }
  .panel { padding: .9rem 1rem; }
  .userlist li { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .inline-form { width: 100%; }
  .inline-form input { flex: 1; width: auto; }
  .stack-form input, .stack-form select, .stack-form button { width: 100%; }
  .score-inline input { flex: 1; }

  /* кнопки удобны для пальца */
  .btn { min-height: 2.6rem; padding: .55rem 1rem; }

  .login-stage { padding: 4vh 0 2rem; }
  .pw-form { max-width: none; }
}

/* очень узкие экраны: название команды под эмблемой */
@media (max-width: 430px) {
  .match-row { gap: .35rem; }
  .team, .team.home { flex-direction: column; text-align: center; gap: .3rem; }
  .team.away { flex-direction: column-reverse; }
  .team.home, .team.away { align-items: center; }
  .tname { font-size: .74rem; line-height: 1.2; }
  .tlogo { width: 38px; height: 38px; }
  .digit { font-size: 1.15rem; }
  .round-nav { gap: .3rem; }
  .display { font-size: 1.35rem; }
  .foot { font-size: .7rem; }
  .predlist li { gap: .5rem; padding: .35rem .45rem; }
  .pl-name { font-size: .8rem; }
}

/* v8: панель Telegram */
.panel-wide { grid-column: 1 / -1; }
textarea {
  background: var(--pitch-deep); color: var(--chalk);
  border: 1px solid var(--line); border-radius: 8px; padding: .6rem;
  font-family: var(--font-board); font-size: .82rem; line-height: 1.45;
  width: 100%; resize: vertical; min-height: 8rem;
}
textarea:focus { outline: 2px solid var(--board); outline-offset: 1px; }
.chk { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem;
       color: var(--chalk); text-transform: none; letter-spacing: 0; }
.chk input { width: 1.1rem; height: 1.1rem; margin-top: .1rem; accent-color: var(--board); }

/* v9: PWA — безопасные зоны в установленном приложении */
@media (display-mode: standalone) {
  /* в установленном приложении учитываем «чёлку» и жестовую полосу */
  .topbar { padding-top: calc(.7rem + env(safe-area-inset-top)); }
  .netbar { bottom: calc(.7rem + env(safe-area-inset-bottom)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
  /* подвал оставляем: по нему видно версию приложения */
  .foot { font-size: .68rem; padding: .8rem .8rem calc(.8rem + env(safe-area-inset-bottom)); }
}

/* v9: офлайн-очередь ставок */
.netbar {
  position: fixed; left: .7rem; right: .7rem; bottom: .7rem; z-index: 60;
  border-radius: 12px; padding: .65rem .85rem; font-size: .84rem; font-weight: 600;
  background: var(--pitch-up); border: 1px solid var(--line); color: var(--chalk);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.netbar.wait { border-color: var(--board-deep); color: var(--board); }
.netbar.ok { border-color: rgba(55,194,110,.5); color: var(--win); }
.queued-note {
  margin: .5rem 0 0; font-size: .78rem; color: var(--board);
  background: rgba(255,197,61,.08); border: 1px dashed var(--board-deep);
  border-radius: 8px; padding: .35rem .5rem;
}

/* v12: страница правил */
.rules { max-width: 780px; }
.rules-h {
  font-family: var(--font-display); font-weight: 400; font-size: 1.05rem;
  letter-spacing: .02em; margin: 1.6rem 0 .6rem; color: var(--board);
}
.rules-h:first-child { margin-top: .4rem; }
.rules-p { font-size: .9rem; margin: .4rem 0; }
.rules-list { font-size: .9rem; padding-left: 1.2rem; margin: .4rem 0; }
.rules-list li { margin: .35rem 0; }
.rules-list b { color: var(--chalk); }
.rules-note {
  white-space: pre-line; font-size: .9rem;
  background: rgba(255,197,61,.08); border: 1px solid var(--board-deep);
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1.2rem;
}
.score-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin: .6rem 0; }
.score-card {
  background: var(--pitch); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .9rem; display: flex; flex-direction: column; gap: .25rem;
}
.sc-num { font-family: var(--font-board); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.score-card.s3 { border-color: rgba(55,194,110,.5); } .score-card.s3 .sc-num { color: var(--win); }
.score-card.s2 { border-color: rgba(201,180,88,.5); } .score-card.s2 .sc-num { color: var(--draw); }
.score-card.s1 .sc-num { color: var(--chalk); }
.score-card.s0 .sc-num { color: var(--chalk-dim); }
.sc-t { font-weight: 700; font-size: .88rem; }
.sc-d { font-size: .78rem; color: var(--chalk-dim); }

/* v13: диагностика */
.diag { background: var(--pitch); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.diag-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
            padding: .6rem .9rem; border-bottom: 1px solid rgba(35,80,58,.4); font-size: .88rem; }
.diag-row:last-child { border-bottom: 0; }
.diag-row span { color: var(--chalk-dim); }
.diag-row b { text-align: right; }
.diag-row b.ok { color: var(--win); }
.diag-row b.warn { color: var(--board); }
.diag-row b.bad { color: var(--loss); }
.diag-queue { margin-top: .7rem; background: var(--pitch-deep); border: 1px dashed var(--board-deep);
              border-radius: var(--radius); padding: .6rem .8rem; font-size: .82rem; }
.diag-queue .qi { padding: .15rem 0; color: var(--board); }
.diag-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }

/* v15: баннер обновления приложения */
.updbar {
  position: fixed; left: .7rem; right: .7rem; z-index: 70;
  bottom: calc(.7rem + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: .6rem;
  background: var(--pitch-up); border: 1px solid var(--board);
  border-radius: 12px; padding: .6rem .7rem .6rem .9rem;
  font-size: .86rem; font-weight: 600; color: var(--chalk);
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.updbar span { flex: 1; }
.updbar .btn { min-height: 2.2rem; padding: .4rem .8rem; }
.updbar .upd-x {
  background: transparent; border: 0; color: var(--chalk-dim);
  font-size: 1rem; cursor: pointer; padding: .2rem .35rem;
}

/* v16: баннер обновления показывается только классом .show */
.updbar.show { display: flex; }

/* v18: кто поставил ставку */
.betstatus { margin: .6rem 0 .3rem; }
.bs-head {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--chalk-dim); margin-bottom: .35rem;
}
.bs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .22rem; }
.bs-list li {
  display: flex; align-items: center; gap: .5rem;
  padding: .28rem .5rem; border-radius: 8px; background: var(--pitch-deep);
  font-size: .84rem;
}
.bs-list li.me { outline: 1px solid var(--board-deep); }
.bs-icon { font-size: .8rem; }
.bs-name { flex: 1; }
.bs-val { font-size: .76rem; color: var(--chalk-dim); }
.bs-list li.yes .bs-val { color: var(--win); }
.bs-list li.no .bs-val { color: var(--board); }

/* v19: оформление */
.appear-form { max-width: 780px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.theme-card {
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  background: var(--pitch); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .9rem; cursor: pointer; transition: border-color .15s;
}
.theme-card:hover { border-color: var(--chalk-dim); }
.theme-card.sel { border-color: var(--board); box-shadow: 0 0 0 1px var(--board); }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.tc-swatch { display: flex; gap: .25rem; margin-bottom: .2rem; }
.tc-swatch i { width: 1.4rem; height: 1.4rem; border-radius: 6px; border: 1px solid rgba(0,0,0,.3); }
.tc-title { font-weight: 700; font-size: .9rem; }
.tc-hint { font-size: .76rem; color: var(--chalk-dim); }

.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .55rem; }
.bg-card {
  position: relative; display: block; height: 82px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  background: var(--pitch-deep);
}
.bg-card.sel { border-color: var(--board); box-shadow: 0 0 0 1px var(--board); }
.bg-card input { position: absolute; opacity: 0; pointer-events: none; }
.bg-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-none { display: flex; align-items: center; justify-content: center;
           height: 100%; font-size: .82rem; color: var(--chalk-dim); }
.dim-row { display: flex; align-items: center; gap: .8rem; }
.dim-row input[type=range] { flex: 1; accent-color: var(--board); }
.dim-val { font-family: var(--font-board); font-weight: 700; color: var(--board); min-width: 3rem; }

.bg-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: .5rem; margin-bottom: .8rem; }
.bg-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bg-item img { width: 100%; height: 70px; object-fit: cover; display: block; }
.bg-item .btn { width: 100%; border-radius: 0; font-size: .74rem; min-height: 2rem; }
@media (max-width: 760px) { .navdesk { display: none; } }

/* v20: карточки выбора оформления — явная кликабельность и отклик */
.theme-card, .bg-card { user-select: none; -webkit-tap-highlight-color: transparent; }
.theme-card:active, .bg-card:active { transform: scale(.985); }
.theme-card:has(input:checked), .bg-card:has(input:checked) {
  border-color: var(--board); box-shadow: 0 0 0 1px var(--board);
}
.theme-card:focus-within, .bg-card:focus-within { outline: 2px solid var(--board); outline-offset: 2px; }
.theme-card input, .bg-card input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: auto;   /* важно: не блокируем клики */
}
.appear-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
#preview-note { margin: 0; }

/* v21: своя палитра */
.custom-editor {
  margin: .8rem 0 .4rem; padding: .9rem 1rem;
  background: var(--pitch); border: 1px solid var(--line); border-radius: var(--radius);
}
.custom-editor.folded { display: none; }
.color-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.color-row {
  display: flex; align-items: center; gap: .5rem;
  background: var(--pitch-deep); border: 1px solid var(--line);
  border-radius: 10px; padding: .4rem .55rem; cursor: pointer;
}
.cr-title { flex: 1; font-size: .82rem; }
.cr-hex { font-family: var(--font-board); font-size: .72rem; color: var(--chalk-dim); }
.color-row input[type=color] {
  width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; background: transparent; cursor: pointer;
}
.color-row input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-row input[type=color]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.preset-row { display: flex; gap: .45rem; flex-wrap: wrap; }
.preset {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: var(--pitch-deep); border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem .6rem; cursor: pointer; color: var(--chalk); font-family: var(--font-body);
}
.preset:hover { border-color: var(--board); }
.p-dots { display: flex; gap: .18rem; }
.p-dots i { width: .85rem; height: .85rem; border-radius: 4px; border: 1px solid rgba(0,0,0,.3); }
.p-title { font-size: .74rem; font-weight: 600; }
.custom-card .tc-swatch i { transition: background .15s; }

/* v22: загрузка фонов игроками */
.bg-upload { max-width: 780px; margin-top: 1.6rem;
             border-top: 1px solid var(--line); padding-top: .4rem; }
.upload-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.upload-row input[type=file] { flex: 1; min-width: 12rem; }
.bg-card { position: relative; }
.bg-tag {
  position: absolute; left: .3rem; bottom: .3rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  background: rgba(0,0,0,.65); color: var(--chalk);
  padding: .1rem .35rem; border-radius: 5px;
}
.bg-tag:empty { display: none; }
.bg-mine, .bg-admin { display: grid; gap: .6rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.bg-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
           background: var(--pitch-deep); display: flex; flex-direction: column; }
.bg-item.is-shared { border-color: var(--board-deep); }
.bg-item img { width: 100%; height: 84px; object-fit: cover; display: block; }
.bg-meta { padding: .4rem .5rem 0; font-size: .78rem; display: flex;
           flex-direction: column; gap: .1rem; }
.bg-meta .dim { font-size: .72rem; }
.bg-item-row { display: flex; gap: .3rem; padding: .45rem .5rem; margin-top: auto; }
.bg-item-row form { flex: 1; }
.bg-item-row .btn { width: 100%; font-size: .72rem; min-height: 2.1rem; padding: .35rem .4rem; }
.bg-item-row .dim { align-self: center; font-size: .72rem; }

/* v23: удаление своего фона прямо на миниатюре */
.bg-slot { position: relative; }
.bg-del {
  position: absolute; top: .25rem; right: .25rem; z-index: 2;
  width: 1.6rem; height: 1.6rem; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(0,0,0,.72); color: var(--chalk);
  font-size: .8rem; cursor: pointer; transition: background .15s, color .15s;
}
.bg-del:hover { background: var(--loss); color: #fff; border-color: var(--loss); }
.bg-rename { display: flex; gap: .3rem; padding: .3rem .5rem 0; }
.bg-rename input { flex: 1; min-width: 0; font-size: .76rem; padding: .3rem .4rem; }
.bg-rename .btn { min-height: 1.9rem; padding: .25rem .5rem; font-size: .72rem; }