/* Общее оформление страницы команд и штаба.

   Светлая тема в светло-синих тонах по пожеланию заказчика. Все цвета
   собраны в переменных :root, поэтому гамму можно сменить в одном месте. */

:root {
  --ink:        #eef4fb;   /* фон страницы */
  --ink-2:      #ffffff;   /* карточки */
  --ink-3:      #e4eef9;   /* вторичные кнопки и заливки */
  --edge:       #cbdaeb;   /* рамки */
  --edge-soft:  #e1e9f3;

  --brass:      #3b82d6;   /* акцент: активные вкладки, рамки, номера */
  --brass-hi:   #1f5ea8;   /* акцентный текст и вывеска */
  --brass-dim:  #9fc2ec;   /* светлая акцентная рамка */

  --parchment:  #1b2a3b;   /* основной текст */
  --smoke:      #5b6b7d;   /* второстепенный текст */

  --moss:       #2f8a56;   /* зачтено */
  --moss-bg:    #e4f4ea;
  --rust:       #c0432b;   /* не зачтено, штраф */
  --rust-bg:    #fbeae6;
  --dusk:       #a8660a;   /* ждёт проверки */
  --dusk-bg:    #fdf2de;

  --accent:     var(--brass);
  --accent-bg:  #e3effc;

  --on-accent:  #ffffff;
  --field:      #f8fbfe;
  --head-top:   #ffffff;
  --head-bot:   #f2f7fd;
  --overlay:    rgba(24, 44, 70, .45);
  --shadow:     0 1px 2px rgba(27, 55, 90, .06), 0 8px 22px rgba(27, 55, 90, .07);

  --display: "Cormorant Garamond", "Georgia", serif;
  --body:    "PT Serif", "Georgia", serif;
  --mono:    "JetBrains Mono", "Consolas", ui-monospace, monospace;

  --r: 4px;
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ink);
  background-image:
    radial-gradient(760px 440px at 50% -170px, rgba(59, 130, 214, .10), transparent 72%),
    radial-gradient(560px 380px at 108% 104%, rgba(120, 180, 240, .14), transparent 70%);
  background-attachment: fixed;
  color: var(--parchment);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.52;
  -webkit-text-size-adjust: 100%;
}

::selection { background: rgba(59, 130, 214, .25); color: var(--parchment); }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; text-wrap: balance; color: var(--parchment); }
h1 { font-size: 34px; line-height: 1.05; }
h2 { font-size: 26px; line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.2; }
p  { margin: 0; }
a  { color: var(--brass-hi); }
ol, ul { margin: 0; }

.wrap { max-width: 600px; margin: 0 auto; padding: 0 16px 72px; }
.wrap.wide { max-width: 1040px; }

.stack   { display: flex; flex-direction: column; gap: 14px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.row     { display: flex; gap: 8px; align-items: stretch; }
.row.wrap-row { flex-wrap: wrap; }
.grow    { flex: 1; min-width: 0; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hidden  { display: none !important; }
.muted   { color: var(--smoke); }
.small   { font-size: 14.5px; }
.center  { text-align: center; }

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* ---------- вывеска ---------- */

.sign { text-align: center; padding: 40px 0 26px; }
.sign .feather { display: block; margin: 0 auto 12px; }
.wordmark {
  font-family: var(--display);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--brass-hi);
}
.sign .under {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--smoke);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--edge);
}

.team-name { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--brass-hi); line-height: 1.15; }

/* ---------- латунный счётчик ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -16px 18px;
  padding: 10px 16px 12px;
  background: linear-gradient(180deg, var(--head-top) 0%, var(--head-bot) 100%);
  border-bottom: 1px solid var(--brass-dim);
  box-shadow: 0 8px 22px rgba(27, 55, 90, .10);
}
.top-title { text-align: center; min-width: 0; }
.top .title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--parchment);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meter {
  margin-top: 9px;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 8px 12px 10px;
  background: var(--ink);
}
.clock {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.12;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--parchment);
}
.split {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--smoke);
  border-top: 1px solid var(--edge);
  margin-top: 7px;
  padding-top: 7px;
}
.split b { font-weight: 500; color: var(--parchment); }
.split .pen b { color: var(--rust); }
.split .bon b { color: var(--brass-hi); }

.total {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--brass-hi);
  line-height: 1.1;
}

/* метрики для совместимости */
.metrics { display: flex; gap: 16px; margin-top: 6px; }
.metric .v { font-family: var(--mono); font-size: 19px; font-variant-numeric: tabular-nums; }
.metric .k { font-size: 11px; color: var(--smoke); }
.metric.pts .v { color: var(--brass-hi); }

/* ---------- карточки ---------- */

.card {
  background: var(--ink-2);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 16px;
}
.card.flat { background: var(--ink); border-color: var(--edge-soft); }
.card.solved { border-color: rgba(47, 138, 86, .45); }
.card.waiting { border-color: rgba(168, 102, 10, .45); }

.qtop { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.qtop .n {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--brass);
  min-width: 26px;
}
.card.solved .qtop .n { color: var(--moss); }
.qtext { white-space: pre-wrap; }
.qimg {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--edge);
  margin: 8px 0;
}

.rules h3 { font-size: 20px; margin-bottom: 8px; }
.rules ul { padding-left: 19px; }
.rules li { margin-bottom: 6px; }

/* ---------- анонсы ---------- */

.announce { display: flex; gap: 16px; align-items: flex-start; }
.announce-date {
  flex: none;
  width: 92px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 14px;
  border-right: 1px solid var(--edge);
}
.announce-date .label { letter-spacing: .08em; line-height: 1.35; }
.announce-time { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--brass-hi); }

/* ---------- пьедестал ---------- */

.podium { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.podium li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r);
  background: var(--ink);
}
.podium .medal {
  flex: none;
  width: 30px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: var(--smoke);
}
.podium .place-1 { border-color: var(--brass-dim); background: var(--accent-bg); }
.podium .place-1 .medal { color: var(--brass-hi); }
.podium .place-2 .medal { color: #8a97a6; }
.podium .place-3 .medal { color: #a86a3c; }
.podium-time { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--parchment); }

/* ---------- значки ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  color: var(--smoke);
  white-space: nowrap;
}
.pill.ok   { color: var(--moss);  border-color: rgba(47, 138, 86, .40); background: var(--moss-bg); }
.pill.warn { color: var(--dusk);  border-color: rgba(168, 102, 10, .40); background: var(--dusk-bg); }
.pill.bad  { color: var(--rust);  border-color: rgba(192, 67, 43, .40);   background: var(--rust-bg); }
.pill.acc  { color: var(--brass); border-color: var(--brass-dim);         background: var(--accent-bg); }
.pill.neu  { color: var(--smoke); border-color: var(--edge);              background: transparent; }

/* ---------- поля ---------- */

input[type=text], input[type=password], input[type=number],
input[type=datetime-local], textarea, select {
  width: 100%;
  padding: 12px 13px;
  font-family: var(--body);
  font-size: 16.5px;
  color: var(--parchment);
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  outline: none;
  color-scheme: light;
}
input::placeholder, textarea::placeholder { color: #8a99aa; }
input:focus, textarea:focus, select:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(59, 130, 214, .22);
}
textarea { resize: vertical; min-height: 80px; line-height: 1.45; }
select option { background: var(--ink-2); color: var(--parchment); }

/* ---------- кнопки ---------- */

button {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 13px 16px;
  color: var(--parchment);
  background: var(--ink-3);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s, background .15s, filter .15s;
}
button:hover:not(:disabled) { border-color: var(--brass-dim); background: #d7e6f7; }
button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }

.btn-primary {
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  border-color: var(--brass);
  color: var(--on-accent);
  font-weight: 500;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  border-color: var(--brass-hi);
  filter: brightness(1.07);
}
.btn-ok  { background: #2f8a56; border-color: var(--moss); color: #ffffff; }
.btn-ok:hover:not(:disabled)  { background: #27744a; border-color: var(--moss); }
.btn-bad { background: #c0432b; border-color: var(--rust); color: #ffffff; }
.btn-bad:hover:not(:disabled) { background: #a63823; border-color: var(--rust); }
.btn-ghost, .btn-quiet { background: transparent; }
.btn-wide { width: 100%; }
.btn-mini { padding: 8px 12px; font-size: 10.5px; }

.mic {
  flex: none;
  width: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  letter-spacing: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.mic.live { background: var(--rust); border-color: var(--rust); color: #fff; }

/* ---------- сообщения ---------- */

.note {
  padding: 10px 12px;
  border-radius: var(--r);
  font-size: 14.5px;
  border: 1px solid var(--edge);
  background: var(--ink);
}
.note.bad  { border-color: rgba(200, 90, 60, .5);   background: var(--rust-bg); color: #9c3522; }
.note.ok   { border-color: rgba(47, 138, 86, .45); background: var(--moss-bg); color: #236b42; }
.note.warn { border-color: rgba(168, 102, 10, .45); background: var(--dusk-bg); color: #7d4c07; }

/* ---------- фото ---------- */

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--edge);
  background: var(--ink);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button {
  position: absolute;
  top: 3px; right: 3px;
  width: 22px; height: 22px;
  padding: 0;
  border-radius: 50%;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  border: none;
}
.shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.shots a { display: block; width: 104px; height: 104px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--edge); }
.shots img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- вкладки ---------- */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--edge); overflow-x: auto; }
.tabs button {
  border: none;
  background: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  color: var(--smoke);
  padding: 11px 12px;
  white-space: nowrap;
}
.tabs button:hover:not(:disabled) { background: none; color: var(--parchment); }
.tabs button.on { color: var(--brass-hi); border-bottom-color: var(--brass); }

/* ---------- таблицы ---------- */

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 9px 8px; border-bottom: 1px solid var(--edge-soft); text-align: left; vertical-align: middle; }
th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 400;
  white-space: nowrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13.5px; }
tr:last-child td { border-bottom: none; }
table.race tr.me td { background: var(--accent-bg); }

/* ---------- гоночная трасса после финиша ---------- */

body.is-race .wrap { max-width: 980px; }
.track {
  position: relative;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  background-color: #3b3d40;
  background-image:
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(180deg, #45474a, #36383b);
  background-size: 5px 5px, 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 6px 18px rgba(27, 55, 90, .18);
}
.track .lanes { flex: 1; min-width: 0; position: relative; padding: 4px 0; --reserve: 290px; }
.track .lane {
  position: relative;
  height: 48px;
  /* пунктир разметки между полосами */
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 22px, transparent 22px 44px);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.track .lane:last-child { background-image: none; }
.track .racer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 6px;
  white-space: nowrap;
  transition: left 1.4s cubic-bezier(.25, .8, .3, 1);
}
.track .car { width: 58px; height: 29px; flex: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.track .racer.moving .car { animation: rumble .5s ease-in-out infinite alternate; }
@keyframes rumble { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
.track .rname {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--body);
  font-size: 16px;
  color: #eceff3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.track .racer.me .rname { color: #ffb347; font-weight: 700; }
.track .flag { font-size: 13px; }
.track .rsolved { font-family: var(--mono); font-size: 12px; color: #9aa6b2; }
.track .finish {
  width: 12px;
  flex: none;
  background-image: repeating-conic-gradient(#f4f4f4 0 25%, #1c1c1c 0 50%);
  background-size: 12px 12px;
  opacity: .85;
}
.track .times {
  flex: none;
  min-width: 108px;
  padding: 4px 12px;
  background: #1f2124;
  border-left: 1px solid rgba(0, 0, 0, .5);
}
.track .ttime {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: #e6e8eb;
}
.track .ttime.me { color: #ffb347; }
.track .ttime.live { color: #b9c2cc; }
.track .ttime.me.live { color: #ffb347; }
@media (max-width: 560px) {
  .track .lanes { --reserve: 150px; }
  .track .car { width: 44px; height: 22px; }
  .track .rname { max-width: 96px; font-size: 14px; }
  .track .times { min-width: 84px; padding: 4px 8px; }
  .track .ttime { font-size: 17px; }
}
table.race td .pill { white-space: nowrap; }

table.grid td.cell, table.grid th.cell { text-align: center; padding: 6px 3px; min-width: 30px; }
td.cell span {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
}
td.cell .s-accepted { background: var(--moss-bg); color: var(--moss); }
td.cell .s-pending  { background: var(--dusk-bg); color: var(--dusk); }
td.cell .s-rejected { background: var(--rust-bg); color: var(--rust); }
td.cell .s-none     { background: var(--ink); color: #9aa8b8; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--smoke); }

/* ---------- конструктор ---------- */

.qbuild {
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 14px;
  background: var(--ink);
}
.qbuild .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.qbuild .no { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--brass); }

.check { display: flex; align-items: center; gap: 9px; font-size: 15px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--brass); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- шапка панели организатора ---------- */

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--edge);
}
.admin-bar .mark { display: flex; align-items: center; gap: 12px; }
.admin-bar .wordmark { font-size: 32px; }

.foot {
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 28px;
}

/* ---------- стартовая раскладка ----------

   Телефон: одна колонка — сначала вход, под ним анонсы и результаты.
   Планшет: вход слева, анонсы и результаты столбиком справа.
   Компьютер: анонсы слева, вход в центре, результаты справа. */

body.is-home .wrap { max-width: 1340px; }

.home {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main" "left" "right";
  align-items: start;
}
.home-main  { grid-area: main; }
.side-left  { grid-area: left; }
.side-right { grid-area: right; }
.home .section-head { margin-top: 0; }

@media (min-width: 760px) {
  .home {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    grid-template-areas:
      "main left"
      "main right";
    column-gap: 30px;
    row-gap: 30px;
  }
}

@media (min-width: 1120px) {
  .home {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 460px) minmax(0, 1fr);
    grid-template-areas: "left main right";
    column-gap: 34px;
  }
  body.is-home .sign { padding: 34px 0 30px; }
}

@media (max-width: 540px) {
  .grid2 { grid-template-columns: 1fr; }
  .wordmark { font-size: 44px; }
  .clock { font-size: 32px; }
  .announce { flex-direction: column; gap: 10px; }
  .announce-date { width: auto; flex-direction: row; align-items: baseline; gap: 10px; border-right: none; padding-right: 0; }
}

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

/* ---------- гайды ---------- */

.guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.guide-btn .q {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
  letter-spacing: 0;
}

dialog.guide {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--brass-dim);
  border-radius: 6px;
  background: var(--ink-2);
  color: var(--parchment);
  box-shadow: 0 24px 70px rgba(20, 45, 80, .28);
  overflow: hidden;
}
dialog.guide.wide { width: min(1080px, calc(100vw - 24px)); }
dialog.guide::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
dialog.guide[open] { display: flex; flex-direction: column; }

.guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--head-top), var(--head-bot));
}
.guide-head h2 { font-size: 26px; }

.guide-toc {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 18px;
  border-bottom: 1px solid var(--edge);
  background: var(--ink);
}
.guide-toc a {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--smoke);
  padding: 6px 10px;
  border: 1px solid var(--edge);
  border-radius: 999px;
}
.guide-toc a:hover, .guide-toc a:focus-visible { color: var(--brass-hi); border-color: var(--brass-dim); outline: none; }

.guide-layout { display: flex; min-height: 0; flex: 1; }
.guide-side {
  display: none;
  flex: none;
  width: 230px;
  padding: 16px 12px;
  border-right: 1px solid var(--edge);
  background: var(--ink);
  overflow-y: auto;
}
.guide-side a {
  display: block;
  padding: 7px 10px;
  border-radius: 4px;
  color: var(--smoke);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.3;
}
.guide-side a:hover, .guide-side a:focus-visible { background: var(--ink-3); color: var(--parchment); outline: none; }
.guide-side .label { display: block; padding: 0 10px 8px; }

.guide-body {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 22px 34px;
  scroll-behavior: smooth;
}
.guide-body section { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--edge-soft); scroll-margin-top: 12px; }
.guide-body section:last-child { border-bottom: none; margin-bottom: 0; }
.guide-body h3 { font-size: 23px; margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; }
.guide-body h3 .step {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  color: var(--brass);
  min-width: 24px;
}
.guide-body h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brass-hi);
  margin: 18px 0 8px;
}
.guide-body p { margin-bottom: 10px; max-width: 66ch; }
.guide-body ul, .guide-body ol { padding-left: 20px; margin-bottom: 12px; max-width: 66ch; }
.guide-body li { margin-bottom: 6px; }
.guide-body b { color: var(--brass-hi); font-weight: 700; }

.shot {
  margin: 14px 0 16px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink);
}
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--smoke);
  border-top: 1px solid var(--edge);
}
.shot.phone { max-width: 320px; margin-left: auto; margin-right: auto; }
.shots-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.shots-2 .shot { margin: 0; }

.tip {
  margin: 12px 0;
  padding: 11px 14px;
  border-left: 3px solid var(--brass);
  background: var(--accent-bg);
  border-radius: 0 4px 4px 0;
  font-size: 15px;
  max-width: 66ch;
}
.tip.warn { border-left-color: var(--rust); background: var(--rust-bg); }

table.examples { margin: 10px 0 14px; font-size: 15px; }
table.examples td:first-child { font-family: var(--mono); font-size: 13.5px; }
.verdict-yes { color: var(--moss); white-space: nowrap; }
.verdict-no  { color: var(--rust); white-space: nowrap; }

dl.params { display: grid; grid-template-columns: 1fr; gap: 2px 18px; margin: 8px 0 14px; max-width: 72ch; }
dl.params dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-hi); margin-top: 10px; }
dl.params dd { margin: 0; }

@media (min-width: 720px) {
  .shots-2 { grid-template-columns: 1fr 1fr; }
  dl.params { grid-template-columns: 200px 1fr; }
  dl.params dt { margin-top: 3px; }
}
@media (min-width: 900px) {
  dialog.guide.wide .guide-side { display: block; }
  dialog.guide.wide .guide-toc { display: none; }
}

/* ---------- журнал, карточка команды, сигналы ---------- */

.alerts {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: none;
  padding: 8px 12px;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  border-color: var(--brass);
  animation: alert-pulse 1.6s ease-in-out 3;
}
.alerts:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(180deg, var(--brass-hi), var(--brass)); }
@keyframes alert-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 214, 0); } 50% { box-shadow: 0 0 0 6px rgba(59, 130, 214, .25); } }

.log-filters { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 860px) { .log-filters { grid-template-columns: 1.3fr 1fr 1.2fr auto; align-items: end; } }
.csv-link {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--parchment); border: 1px solid var(--edge); border-radius: 4px; padding: 8px 12px;
}
table.log td { font-size: 14px; vertical-align: top; }
table.log td.t { font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--smoke); }
table.log td.d { color: var(--parchment); min-width: 260px; }
.act { white-space: nowrap; }
.act.team  { color: var(--brass-hi); }
.act.admin { color: var(--dusk); }
.act.bad   { color: var(--rust); }

a.team-link { color: var(--brass-hi); text-decoration: none; border-bottom: 1px dotted var(--brass-dim); cursor: pointer; }
a.team-link:hover { color: #123f75; border-bottom-color: var(--brass); }

.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat { border: 1px solid var(--edge); border-radius: 4px; padding: 10px 12px; background: var(--ink); }
.stat .v { font-family: var(--mono); font-size: 22px; color: var(--brass-hi); font-variant-numeric: tabular-nums; }

/* Кнопки в верхней панели игры не переносятся, номера заданий — обычными цифрами */
.top button { white-space: nowrap; }
.top .btn-mini { padding: 8px 10px; }
.qtop .n, .guide-body h3 .step, .qbuild .no {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Моноширинный шрифт загружен в весах 400 и 500: жирное выделение в таблицах
   делаем весом 500 и цветом, иначе браузер рисует размытый искусственный жирный. */
td.num b, .podium-time b, .split b { font-weight: 500; color: var(--brass-hi); }
table.log td:nth-child(2) { white-space: nowrap; }

/* Шапка и оглавление гайда не сжимаются, прокручивается только текст */
.guide-head, .guide-toc { flex: none; }
/* Моноширинный шрифт только в таблице примеров ответов */
table.examples td:first-child { font-family: var(--body); font-size: 15px; }
table.examples.answers td:first-child { font-family: var(--mono); font-size: 13.5px; }

/* ---------- картинки заданий целиком и просмотр на весь экран ---------- */

.qimg {
  object-fit: contain;
  max-height: 460px;
  background: #e9f0f8;
  cursor: zoom-in;
}
.qimg-hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); margin-top: -2px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(14, 26, 42, .92);
  display: flex;
  flex-direction: column;
}
.lightbox.hidden { display: none; }
.lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(255, 255, 255, .96); }
.lightbox-scroll {
  flex: 1;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 56px 10px 20px;
  -webkit-overflow-scrolling: touch;
}
.lightbox-scroll img { max-width: 100%; height: auto; display: block; border-radius: 4px; }
@media (min-width: 900px) { .lightbox-scroll img { max-height: calc(100vh - 90px); width: auto; } }

.pill.soon { color: var(--brass-hi); border-color: var(--brass-dim); background: var(--accent-bg); }

/* ---------- предпросмотр задания в штабе ---------- */
dialog.preview { width: min(440px, calc(100vw - 24px)); }
dialog.preview .guide-body { padding: 16px; }
.preview-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }


/* ---------- светлая тема: доводка ---------- */

.card { box-shadow: var(--shadow); }
.card.flat, .qbuild, .podium li, .stat, .shot { box-shadow: none; }

.btn-primary,
.btn-primary:hover:not(:disabled),
.alerts,
.alerts:hover:not(:disabled) {
  background: linear-gradient(180deg, #4a8fdc, #2f6fc0);
  border-color: #2f6fc0;
  color: var(--on-accent);
}
.btn-primary:hover:not(:disabled), .alerts:hover:not(:disabled) { filter: brightness(1.06); }

.podium .place-1 .medal { color: #c08a1c; }
.thumb button { background: rgba(27, 42, 59, .72); }
.lightbox-close { color: var(--parchment); }
table.log td.t { color: var(--smoke); }

/* Шапка штаба: название не переносится, кнопки справа переносятся аккуратно */
.admin-bar { flex-wrap: wrap; row-gap: 10px; }
.admin-bar .mark { flex: none; }
.admin-bar .wordmark { white-space: nowrap; line-height: 1.05; }
.admin-bar > .row { flex: 1 1 auto; justify-content: flex-end; }
.wrap.wide { max-width: 1200px; }
/* Действия штаба в журнале отдельным цветом: янтарный занят под «ждёт проверки» */
.act.admin { color: #6a55b8; }


/* ---------- основные и бонусные задания, пауза ---------- */

.qtop .kind {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--smoke);
}
.card.bonus { border-style: dashed; border-color: var(--brass-dim); }
.card.bonus .qtop .kind { color: var(--brass-hi); }
.card.bonus.solved { border-style: solid; border-color: rgba(47, 138, 86, .45); }
.card.skipped { opacity: .72; }
.card.skipped .qtop .n { color: var(--smoke); }
#pauseBar { padding: 10px 14px; gap: 12px; }
#pauseBar p { margin: 0; }
#pauseCard { border-color: var(--brass-dim); background: var(--accent-bg); }
#pauseCard p { margin: 0; }

.qbuild.bonus { border-style: dashed; border-color: var(--brass-dim); }
td.cell .s-skipped { background: var(--ink-3); color: var(--smoke); }
td.cell .here { box-shadow: 0 0 0 2px var(--brass); }
.legend .here-mark { color: var(--brass); }
table.grid th.cell sup { color: var(--brass-hi); font-size: 9px; margin-left: 1px; }