/* Палитра из макетов: экраны команды светлые, бумажные; тёмное — только то, что
   идёт на проекцию (что в мире и разбор). Метафора та же: у тебя на столе бумага,
   новости — на экране в переговорной. */
:root {
  --paper: #f2ece0; --card: #fbf8f1; --ink: #211f1a; --accent: #b4552f;
  --gold: #e0a15f; --muted: #6b6454; --faint: #8a8271; --line: #d8cfbb;
  --line2: #ddd4c0; --dark: #211f1a; --dark2: #33302a; --dim: #a39c8d;
  --ok: #4f7a4a; --no: #9a3b2c;
  /* Просроченный таймер. Отдельный красный, а не --no: тот тёмный и на почти
     чёрном фоне проекции из глубины зала не читается, а таймер на стене должен
     читаться в первую очередь. Этот же цвет годится и на светлом экране
     ведущего. */
  --late: #e0402a;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans);
       font-size: 15px; -webkit-text-size-adjust: 100%; }
body.dark { background: var(--dark); color: var(--paper); }
button { font: inherit; color: inherit; }
a { color: var(--accent); }
.num { font-family: var(--serif); font-weight: 700; }
.big { font-family: var(--serif); font-weight: 900; }
.kicker { font-size: 10px; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.accent { color: var(--accent); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }

/* --- шапка ------------------------------------------------------------- */
.bar { background: var(--dark); color: var(--paper); padding: 9px 18px;
       display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bar .name { font-family: var(--serif); font-weight: 700; font-size: 15px;
             letter-spacing: 0.04em; }
.bar .who { flex: 1 1 auto; font-size: 12px; color: var(--dim); min-width: 0; }
.bar .chip { padding: 4px 10px; background: var(--dark2); border-radius: 2px;
             font-size: 12px; font-weight: 500; color: var(--gold); white-space: nowrap; }

/* факты: только то, что уже есть. Прогноз — в блоке плана, диапазонами. */
.facts { background: var(--card); border-bottom: 1px solid var(--line);
         padding: 9px 18px; display: flex; gap: 22px; flex-wrap: wrap; align-items: stretch; }
.facts .group { display: flex; flex-direction: column; gap: 4px; }
.facts .group + .group { border-left: 1px solid var(--line2); padding-left: 22px; }
.facts .row { display: flex; align-items: flex-end; gap: 14px; }
.facts .v { font-family: var(--serif); font-size: 19px; font-weight: 700; line-height: 1; }
.facts .v.lead { font-size: 29px; font-weight: 900; color: var(--accent); }
.facts .l { font-size: 11px; color: var(--muted); margin-top: 2px; }
.facts .op { font-size: 17px; color: #c9bda3; padding-bottom: 4px; }

/* --- сетка экрана ------------------------------------------------------ */
.cols { display: flex; align-items: flex-start; gap: 0; }
.cols > .main { flex: 1 1 auto; padding: 14px 18px; min-width: 0; }
/* Боковая колонка начинается там же, где основная: без отступа она прилипала
   к шапке и читалась её продолжением. */
.cols > .side { width: 336px; flex: 0 0 336px; padding: 14px 18px;
                background: var(--card); border-left: 1px solid var(--line);
                align-self: stretch; }
.cols > .side > *:first-child { margin-top: 0; }
.cols { padding-top: 6px; }
.step { display: flex; align-items: center; gap: 9px; margin: 2px 0 8px; }
.step .no { width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%;
            background: var(--dark); color: var(--paper); font-size: 12px;
            font-weight: 600; text-align: center; line-height: 21px; }
.step h2 { font-family: var(--serif); font-size: 18px; font-weight: 700; margin: 0; }
.step .note { flex: 1 1 auto; font-size: 11px; color: var(--muted); text-align: right; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.stack { display: flex; flex-direction: column; gap: 5px; }

/* Полоса ресурсов под шапкой: тратятся они, и сверяться с ними приходится на
   каждый выбор, а в шапке рядом стоят очки и известность — число терялось. */
.money { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
         margin: 10px 0 12px; padding: 8px 12px; background: var(--card);
         border-left: 3px solid var(--accent); border-radius: 2px; }
.money .k { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--faint); }
.money b { font-family: var(--serif); font-size: 24px; color: var(--no); }
.money.spent-all { border-left-color: var(--ok); }
.money.spent-all b { color: var(--ok); }
.money .u { font-size: 12px; color: var(--muted); }
.money .spent { margin-left: auto; font-size: 11px; color: var(--faint); }

/* строка действия: работа, канал, вариант в списке */
.item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
        padding: 7px 10px; background: var(--card); border: 1px solid var(--line2);
        border-radius: 2px; cursor: pointer; }
.item:hover { border-color: var(--accent); }
.item.flat { cursor: default; }
.item.flat:hover { border-color: var(--line2); }
.item.on { background: #fff; border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.item.off { opacity: 0.55; cursor: not-allowed; background: transparent; }
.item .t { flex: 1 1 auto; min-width: 0; }
.item .t b { display: block; font-size: 13px; font-weight: 600;
             overflow-wrap: break-word; }
.item .t span { display: block; font-size: 10px; color: var(--faint); margin-top: 1px; }
.item .pts { width: 78px; text-align: right; flex: 0 0 auto; }
.item .pts.wide { width: 104px; }
.item .chan { width: 156px; flex: 0 0 auto; text-align: right; font-size: 12px; }
.item .chan .tiny { display: block; }
.item .pts b { display: block; font-family: var(--serif); font-size: 15px; font-weight: 700; }
/* цена — тем же кеглем, что очки, и акцентом: её сравнивают с бюджетом */
.item .pts.cost b { color: var(--accent); }
.item .pts.dim b { color: var(--muted); font-weight: 400; }
.item .pts span { display: block; font-size: 10px; color: var(--faint); }
.count { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.count button { width: 22px; height: 22px; border: 1px solid var(--line2);
                background: #fff; border-radius: 2px; cursor: pointer; line-height: 1; }
.count button:disabled { opacity: 0.35; cursor: not-allowed; }
.count .n { width: 15px; text-align: center; font-size: 13px; font-weight: 600; }

.total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
         padding: 7px 2px 0; margin-top: 8px; border-top: 1px solid var(--line2);
         font-size: 12px; color: var(--muted); }
.total b { font-size: 13px; color: var(--ink); }

.btn { display: block; width: 100%; padding: 11px; margin-top: 10px; border: 0;
       border-radius: 2px; background: var(--accent); color: #fff; font-size: 14px;
       font-weight: 600; cursor: pointer; }
.btn:hover { background: #8f3f20; }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line2); }
.btn.ghost:hover { background: var(--card); color: var(--ink); }
.btn.on { background: var(--ok); }
.btn.wide { display: inline-block; width: auto; padding: 8px 14px; margin: 0; }

/* --- карточки --------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line2); border-radius: 2px;
        padding: 10px 12px; }
.card + .card { margin-top: 7px; }
.card h3 { font-family: var(--serif); font-size: 15px; margin: 0 0 4px; }
.card p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.card.accent { border-left: 3px solid var(--accent); }
/* Итог года и прогноз — то, ради чего в боковую колонку и смотрят: белее фоном
   и с акцентной чертой, чтобы не тонуть среди пояснений. */
.card.lead { background: #fff; border-color: var(--accent); }
.card.lead .kicker { color: var(--accent); }
/* Цепочка «известность → бюджет»: по шагу на строку, как в макете. Одной
   строкой во флексе она переносилась как попало и читалась набором чисел — а
   это единственное место, где игрок видит, откуда берутся деньги на год. */
.steps { background: var(--card); border-radius: 3px; padding: 10px 12px; margin-top: 6px; }
.steps .s { display: flex; align-items: baseline; gap: 9px; padding: 3px 0; }
.steps .n { flex: 0 0 12px; font-size: 11px; font-weight: 600; color: var(--accent); }
.steps .t { flex: 1 1 auto; font-size: 11px; color: var(--muted); line-height: 1.4; }
.steps .v { flex: 0 0 auto; font-family: var(--serif); font-size: 15px; font-weight: 700; }
.steps .v.small-v { font-family: var(--sans); font-size: 13px; font-weight: 600; }
.steps .sum { display: flex; align-items: baseline; gap: 9px; margin-top: 7px;
              padding-top: 7px; border-top: 1px solid var(--line); }
.steps .total { display: flex; align-items: baseline; gap: 9px; margin-top: 4px; }
.steps .total .t { font-size: 12px; font-weight: 600; color: var(--ink); }
.steps .total .v { font-size: 22px; font-weight: 900; }

/* --- таблица положения ------------------------------------------------ */
.board { width: 100%; border-collapse: collapse; font-size: 13px; }
.board th { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
            color: var(--faint); font-weight: 500; text-align: right; padding: 3px 7px; }
.board th:nth-child(-n+2) { text-align: left; }
.board td { padding: 5px 7px; border-top: 1px solid var(--line2); text-align: right; }
.board td:nth-child(-n+2) { text-align: left; }
.board .me { background: rgba(180, 85, 47, 0.09); }
.board .me td { font-weight: 600; }
.board .flag { font-size: 10px; color: var(--faint); margin-left: 4px; }
.board th { white-space: nowrap; }
.board .sc { font-family: var(--serif); font-weight: 700; }
body.dark .board td { border-top-color: #3a372f; }
body.dark .board th { color: var(--dim); }
body.dark .board .me { background: rgba(224, 161, 95, 0.14); }

/* --- проекция и «что в мире» (тёмный экран) --------------------------- */
.world { max-width: 1240px; margin: 0 auto; padding: 16px 18px 26px; }
.world header h1 { font-family: var(--serif); font-size: 30px; font-weight: 900;
                   margin: 0 0 4px; }
.world header p { margin: 0; color: var(--dim); font-size: 13px; }
.world .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 18px; margin-top: 16px; }
.world .two.uneven { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 8px; margin: 0 0 10px; }
/* широкая таблица на телефоне прокручивается вбок, а не ломает полосу */
.scroll { max-width: 100%; overflow-x: auto; }
.world h2 { font-family: var(--serif); font-size: 17px; margin: 0 0 8px;
            letter-spacing: 0.02em; }
.feed { display: flex; flex-direction: column; gap: 7px; }
/* Каждая лента — своим блоком вместе с заголовком: две колонки карточек без
   разделения читались как один поток, и «вышло» путалось с «говорят».

   Разделение — фоном, а не рамкой. У карточек уже есть и фон, и рамка того же
   цвета; рамка вокруг них давала линию поверх линии. Три уровня тона — страница,
   блок, карточка — дают ту же группировку, но без единой черты. */
.world .pane.frame { background: #2a2721; border-radius: 4px; padding: 12px 12px 14px; }
.world .pane.frame > h2 { margin-bottom: 10px; }
.world .pane.frame .post { background: #38332c; border-color: transparent; }
.world .pane.frame .tabs button { background: #38332c; border-color: transparent; }
/* все сюжеты оформлены одинаково: отдельный блок или другой цвет для неважного —
   это подпись «сюда не смотри», и тогда читать не приходится */
.post { background: #2a2721; border: 1px solid #3a372f; border-radius: 2px; padding: 9px 11px; }
.post .kicker { color: var(--dim); }
.post .h { font-family: var(--serif); margin: 2px 0; line-height: 1.25; }
.post.w1 .h { font-size: 14px; } .post.w2 .h { font-size: 17px; } .post.w3 .h { font-size: 21px; }
.post .note { font-size: 12px; color: #bdb5a4; }
.tabs { display: none; gap: 6px; margin: 14px 0 0; }
.tabs button { flex: 1 1 0; padding: 9px; background: #2a2721; border: 1px solid #3a372f;
               color: var(--dim); border-radius: 2px; cursor: pointer; }
.tabs button.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* --- разбор ----------------------------------------------------------- */
/* Черта на тёмном: тот же элемент, что в шапке ведущего, но светлая линия на
   почти чёрном фоне била бы по глазам. */
.world hr.rule { border-top-color: #3a372f; margin: 16px 0 12px; }

/* Каждый материал отдельной карточкой в две колонки: разбор должен отвечать не
   «сколько», а «почему», а для этого к каждому нужна строка пояснения. */
.wide-h { font-family: var(--serif); font-size: 17px; margin: 0 0 8px; }
/* Материалы идут полосой во всю ширину и раскладываются по месту, а не по
   заранее заданному числу колонок: окно бывает и в полэкрана, и во весь экран. */
.mats { display: grid; gap: 6px;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mat { background: #2a2721; border-radius: 3px; padding: 7px 9px; }
.mat .w { font-size: 12px; font-weight: 600; line-height: 1.3; }
.mat .n { font-size: 11px; line-height: 1.35; margin-top: 2px; }
.mat .y { font-size: 10px; color: #6f685c; margin-top: 2px; }
/* Неудача и ошибка разведены цветом: провал на своём уровне командой не
   заслужен, и красным его красить нельзя — это учило бы неправде. */
.mat .n.ok { color: #7fae74; }
.mat .n.luck { color: var(--gold); }
.mat .n.low { color: var(--dim); }
.mat .n.unlucky { color: var(--dim); }
.mat .n.miss { color: var(--late); }

/* Выводы — полосой во всю ширину под колонками. */
.ends { display: grid; gap: 8px; margin-top: 18px;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Пометки таблицы — плашками под ней: в строке они растягивали столбец с
   названием, и таблица ехала. */
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.badge { font-size: 11px; padding: 3px 8px; border-radius: 2px;
         background: #2a2721; color: var(--gold); }
.badge.me { background: rgba(224, 161, 95, 0.14); color: var(--dim); }
.matrix { display: grid; gap: 2px; font-size: 12px; }
.matrix div { padding: 6px 4px; text-align: center; border-radius: 1px; }
.matrix .lab { background: #2a2721; color: #e8e3d8; text-align: left; padding-left: 8px; }
.matrix .head { background: #2a2721; color: var(--dim); font-size: 10px;
                letter-spacing: 0.06em; text-transform: uppercase; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12px;
          color: var(--dim); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; }

/* --- ведущий ---------------------------------------------------------- */
.host { max-width: 1100px; margin: 0 auto; padding: 16px 18px; }
.host h1 { font-family: var(--serif); font-size: 24px; margin: 0 0 2px; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.acts .btn { width: auto; margin: 0; padding: 10px 16px; }
.teams { width: 100%; border-collapse: collapse; font-size: 13px; }
.teams th { text-align: left; font-size: 10px; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--faint); font-weight: 500; padding: 4px 8px; }
.teams td { padding: 7px 8px; border-top: 1px solid var(--line2); }
.teams .r-yes { color: var(--ok); font-weight: 600; }
.teams .r-no { color: var(--faint); }
.join { max-width: 420px; margin: 8vh auto; padding: 0 18px; }
.join h1 { font-family: var(--serif); font-size: 26px; margin: 0 0 6px; }
.join input { width: 100%; padding: 11px; margin-top: 8px; border: 1px solid var(--line2);
              border-radius: 2px; background: #fff; font: inherit; }
.code { font-family: var(--serif); font-size: 40px; font-weight: 900;
        letter-spacing: 0.1em; color: var(--accent); }

/* Ссылка-приглашение в лабораторию. Шрифтом заголовков её набирать нельзя: там
   случайный ключ, а в такой гарнитуре не отличить регистр от регистра. Моноширинный
   и с переносом по символам — чтобы и прочитать вслух, и не порвать на телефоне. */
.invite { display: inline-block; margin-top: 4px; font-family: ui-monospace,
          "Cascadia Mono", Consolas, monospace; font-size: 14px;
          word-break: break-all; color: var(--accent); }

/* Таймер. Цвет живёт в стилях, а не в шаблоне: клиент только вешает класс. */
.timer { color: var(--gold); }
.late, .timer.late { color: var(--late); }

/* Пояснения на экране ведущего крупнее, чем служебная мелочь на остальных
   экранах: ведущий читает их в спешке, между фазами, и часть из них — правила,
   которые он произносит вслух. Правка через область, а не через сами .small и
   .tiny: на экранах команд и на проекции размеры остаются прежними. */
.host .small { font-size: 13px; }
/* Что прямо сейчас перед залом — крупнее соседних пояснений: это единственное
   место, где ведущий об этом узнаёт, а оглянуться на стену он может не всегда. */
.host .proj { font-size: 15px; margin: 6px 0 0; }
.host .tiny { font-size: 12px; }

/* План года у ведущего: по строке на работу, пометка уровня — цветом, потому
   что ведущий читает таблицу глазами по диагонали, а не построчно. */
.plan div { margin: 1px 0; }
.plan span { font-size: 11px; white-space: nowrap; }
/* Шкала от провала к оптимуму. Ярче и жирнее — хуже; «ниже» серым, потому что
   это не ошибка, а уценка: такой канал срабатывает всегда, просто очков мало. */
.m-none { color: var(--late); font-weight: 600; }
.m-over2 { color: var(--no); }
.m-over1 { color: var(--gold); }
.m-match { color: var(--ok); }
.m-under { color: var(--muted); }

/* Строки ботов приглушены: они декорация, а следит ведущий за живыми командами.
   Цветные пометки плана задают свой цвет и остаются яркими. */
.teams tr.bot td { color: var(--faint); }

/* Отчёркивает техническую шапку ведущего от самой партии. */
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0 14px; }

/* Переключатель полного экрана на проекции. Живёт в углу и приглушён: на
   стене он не нужен, нужен ведущему на секунду при настройке. Всегда виден, а не
   всплывает по движению мыши, — выход из полного экрана не должен искаться. */
.fs { position: fixed; right: 12px; bottom: 12px; z-index: 5; cursor: pointer;
      font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 4px;
      background: rgba(0, 0, 0, 0.35); color: #a39c8d; opacity: 0.45;
      border: 1px solid rgba(255, 255, 255, 0.18); }
.fs:hover { opacity: 1; color: #f2ece0; }

/* Список работ переходит в одну колонку раньше телефона: в двух колонках
   строка «Международная конференция · 5 ресурсов · 5 очков · − 0 +» не влезает,
   и название наезжает на числа. */
@media (max-width: 1150px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* --- телефон ---------------------------------------------------------- */
@media (max-width: 900px) {
  .cols { flex-direction: column; }
  .cols > .side { width: 100%; flex: 1 1 auto; border-left: 0;
                  border-top: 1px solid var(--line); }
  .facts .group + .group { border-left: 0; padding-left: 0; }
  .facts { gap: 12px; }
  .grid2 { grid-template-columns: 1fr; }
  .world .two, .world .two.uneven { grid-template-columns: 1fr; }
  .world .two .pane.hide { display: none; }
  /* на телефоне название колонки дублирует вкладку — вкладка и есть заголовок */
  .world .two .pane > h2:first-child { display: none; }
  .tabs { display: flex; }
  .world header h1 { font-size: 22px; }
  .post.w3 .h { font-size: 18px; } .post.w2 .h { font-size: 16px; }
  .item { gap: 7px; padding: 7px 8px; }
  .item .pts { width: 68px; }
  .item .pts.wide { width: 88px; }
  .matrix { font-size: 11px; }
  .matrix div { padding: 6px 2px; }
  .matrix .lab { padding-left: 5px; }
  .board { font-size: 12px; }
  .board td, .board th { padding: 5px 4px; }
}