/* Палитра и типографика взяты из mockups/fashinada-mockups.html без изменений:
   известняк, бирюза Боки, латунь, Канли Кула. Цвет означает состояние. */
:root{
  --paper:#EDE7DA; --paper-2:#E3DCCB; --ink:#131C1F; --ink-2:#4A585C;
  --fog:#8D9A9B; --sea:#2F7A78; --sea-deep:#1D5250; --brass:#A9762B;
  --oxblood:#7B2222; --line:#C9C0AC;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* touch-action:manipulation убирает приближение по двойному тапу. Оно тут
   ни за чем: экран и так свёрстан по ширине телефона, а попадать пальцем
   приходится часто и подряд — в буквы, в плашки, в кнопки ряда, — и второе
   касание в ту же секунду масштабировало лист вместо нажатия. Щипок двумя
   пальцами остаётся: разглядеть мелкое всё ещё можно, случайно — уже нет. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.5;padding-bottom:84px;overscroll-behavior-y:none}
.wrap{max-width:560px;margin:0 auto;padding:0 18px}

.masthead{padding:20px 0 14px;border-bottom:2px solid var(--oxblood)}
.eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-bottom:7px}
.masthead h1{font-family:var(--display);font-size:30px;letter-spacing:.1em;margin:0;font-weight:700}
.bar{margin-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2)}
.bar strong{font-family:var(--display);font-size:18px;color:var(--ink)}
.ducats{font-family:var(--mono);font-size:13px;color:var(--brass);white-space:nowrap}
.bwrap{border-bottom:1px solid var(--line)}
.brow{display:flex;gap:12px;align-items:center;padding:12px 0}
.bhouse{width:104px;flex:none;font-size:14.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bletters{flex:1;display:flex;flex-wrap:wrap;gap:5px}
.bl{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:44% 56% 50% 50%/52% 48% 54% 46%;
  font-family:var(--display);font-size:16px;color:var(--ink-2);background:transparent;cursor:pointer}
/* Буква, которую просят, — тем же языком, что и доска: залита, если слову
   её не хватает, пунктиром, если не нужна. В своей строке это единственная
   проверка набранного: дом печатает букву по памяти, и ОСТРОВ, попросивший
   А, ничем себя не выдавал. Не кликается: своя просьба — не действие. */
.bl.asked{cursor:default}
/* Правило одно на все буквы экрана, отдаваемую тоже: залита — слову её не
   хватает, пунктир — не нужна. У отдаваемой пунктир и есть норма: отдают
   лишнее. Заливка там — предупреждение, что дом выставил нужное себе. */
.bl.нужна{background:var(--sea-deep);border-color:var(--sea-deep);color:var(--paper)}
.bl.лишняя{border-style:dashed;border-color:var(--sea-deep);color:var(--sea-deep)}
body.night .bl.нужна{background:#2F7A78;border-color:#2F7A78;color:#0F1518}
body.night .bl.лишняя{border-color:#3E8C86;color:#3E8C86}
.bza{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);align-self:center}
.bform .form{margin-top:0;padding-bottom:14px}
.group{padding:14px 0;border-bottom:1px solid var(--line)}
.group-h{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-bottom:8px}
.group-h .bl{width:28px;height:28px;font-size:14px;cursor:default}
.group .btn.ghost{margin-top:10px}
.wait{color:var(--brass)}

/* Состязание и его правила — один предмет, а не две строки подряд. Их
   связывает не отступ, а общая линия слева: отступом связать нельзя, рядом
   стоят ещё три строки того же вида. Размер один, разница только в цвете —
   название темнее, правила светлее. */
.contest{border-left:2px solid var(--sea);padding:1px 0 1px 11px;margin:10px 0}
.contest-h{font-size:13px;color:var(--ink);font-weight:600}
.contest-rules{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
body.night .contest{border-left-color:#3E8C86}
body.night .contest-h{color:#E7E1D2}
body.night .contest-rules{color:#9BA8A6}
/* Итог дуэли — тот же блок, но латунью: состязание впереди, исход позади. */
.contest.итог{border-left-color:var(--brass)}
/* Ожидание — пунктиром: ход не наш, и нажимать нечего. */
.contest.ждём{border-left-style:dashed;border-left-color:var(--fog)}
.contest.ждём .contest-h{color:var(--ink-2)}
body.night .contest.ждём{border-left-color:#4E5C5A}
body.night .contest.ждём .contest-h{color:#C0BAAC}
body.night .contest.итог{border-left-color:#9C7A38}
.meet{border-bottom:1px solid var(--line);padding:14px 0}
/* Закрытое — итог, а не дело: воздуха вокруг него меньше, чем у карточки,
   с которой ещё что-то делают. Внутренний отступ блока итога тут лишний:
   его роль играет отступ самой карточки. */
.meet.итог{padding:9px 0}
.meet.итог .contest{margin:0}
.meet-house{font-family:var(--display);font-size:19px}
/* Строка под именем дома идёт в один поток с подсказками ниже — значит и
   размер у них один. Мельче она была без причины, и разница в полпикселя
   читалась как небрежность. */
.meet-sub{font-size:13px;color:var(--fog);margin-top:2px}
.meet-sub b{color:var(--oxblood)}
/* Подсказка под подписью отступает от неё, а снизу отступ даёт сам блок:
   иначе строки слипаются сверху и зияют пустотой снизу. */
.meet .hint,.meet-sub + .hint,.offer-note + .hint{margin-top:8px}
.meet > .hint:last-child,.meet > .flash:last-child,
.lot > .hint:last-child{margin-bottom:0}
.code{font-family:var(--mono);font-size:38px;letter-spacing:.22em;text-align:center;
  background:var(--paper-2);border:1px solid var(--line);padding:16px 0;margin:12px 0 8px;color:var(--ink)}
/* цифры живут у брокера — своей стороне они не показываются */
.code.locked{border-style:dashed;color:var(--fog)}
/* Пара решений — друг под другом и во всю ширину. Рядом они спорят за место
   с длинными названиями («Откупиться за 2»), жмутся и на узком экране
   переносятся вразнобой; столбиком выбор читается сверху вниз. */
/* Столбик кнопок отбит скромнее, чем был: 10 сверху и 12 снизу давали под
   кнопками двадцать пикселей до подсказки — вдвое больше, чем у форм на
   бирже, и карточка выглядела разъехавшейся. */
.broker{display:flex;flex-direction:column;gap:8px;padding:8px 0 4px}
.broker + .hint{margin-top:6px}
.broker .btn{margin:0;width:100%}
/* Кнопка во всю ширину читается наравне с чёрной, значит и кегль тот же:
   тише её делает вид плашки, а не мелкий шрифт. */
.broker .chip-btn,.dlg-act .chip-btn{width:100%;text-align:center;padding:12px;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase}
/* Недоступный откуп должен быть видно как недоступный, а не отсутствовать:
   иначе непонятно, почему у соседа выход был, а у нас нет. */
.btn.ghost[disabled]{background:none;color:var(--fog);border-color:var(--line);cursor:default}
body.night .btn.ghost[disabled]{background:none;color:#4E5C5A;border-color:#26312F}
/* «Ваш ход»: список-указатель наверху экрана сделок. Строка — кнопка, но
   выглядит строкой: она никуда не отправляет, а прокручивает к карточке.
   Черта слева сплошная у долга и пунктирная у чужой просьбы — тем же языком,
   каким на бирже различаются нужная и лишняя буква. */
/* Своей нижней черты у списка нет: снизу его закрывает черта всего блока
   (#todoWrap), а когда групп две — черта заголовка «Можно взяться». Была —
   и обе пары вставали двойной полосой: одна вплотную к последней строке,
   вторая через отступ. */
.ход-строка{display:flex;align-items:center;gap:11px;width:100%;padding:11px 0;
  border:none;border-top:1px solid var(--line);background:none;font:inherit;
  color:inherit;text-align:left;cursor:pointer}
.ход-строка:first-child{border-top:none}
.ход-строка:active{background:var(--paper-2)}
.ход-метка{width:2px;align-self:stretch;background:var(--brass);flex:none}
.ход-строка.можно .ход-метка{background:repeating-linear-gradient(
  var(--fog) 0 3px,transparent 3px 6px)}
.ход-текст{flex:1;min-width:0}
.ход-текст b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.ход-текст span{font-size:12.5px;color:var(--fog)}
.ход-стрелка{color:var(--fog);font-size:17px;flex:none}
/* Число прижато к уголку: посреди заголовка оно висело само по себе и
   читалось как часть названия. margin-left:auto забирает свободное место
   до себя — заголовок остаётся слева, число с уголком уходят вправо. */
.sec .счёт{font-family:var(--mono);font-size:13.5px;color:var(--brass);
  letter-spacing:0;margin-left:auto}
/* Подзаголовок внутри складки: чужие просьбы — часть раздела, а не раздел.
   Тише заголовка складки и не спорит с ним за внимание. */
.подзаголовок{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:16px 0 6px}
/* Куда привели: карточка коротко подсвечивается, иначе глаз её не находит. */
.подсвечено{animation:нашлось 1.8s ease-out}
@keyframes нашлось{from{background:var(--paper-2)}to{background:transparent}}
@media (prefers-reduced-motion: reduce){.подсвечено{animation:none;background:var(--paper-2)}}
body.night .ход-текст b{color:#D8D2C4}
body.night .ход-строка:active{background:#0E1416}
body.night .подсвечено{animation-name:нашлосьНочью}
@keyframes нашлосьНочью{from{background:#0E1416}to{background:transparent}}

.ping{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.ping-main{flex:1;min-width:0;font-size:14.5px}
.ping-sub{font-size:12px;color:var(--fog);margin-top:2px}
.secret-card{border:1.5px solid var(--oxblood);background:#F2E7E2;padding:15px;margin:14px 0 8px}
.secret-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--oxblood);margin-bottom:7px}
.secret-body{margin:0;font-size:14px}
/* Приписка под итогом — вторая мысль, а не продолжение первой. */
.secret-card .hint{margin:7px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip-btn{font:inherit;font-size:11.5px;letter-spacing:.02em;padding:7px 11px;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);
  cursor:pointer;align-self:flex-start}
.chip-btn:active{background:var(--line)}
.btn.ghost{background:none;color:var(--oxblood);border:1px solid var(--oxblood)}
.lot{border-bottom:1px solid var(--line);padding:14px 0}
.lot-head{display:flex;gap:13px;align-items:center;cursor:pointer}
/* Кружок отвечает на один вопрос: стоит ли строка вашего внимания. Три
   вида, и различаются они не оттенком, а формой — на солнце и на качке
   оттенок не читается, а заливка против пунктира читается всегда. */
.lot-letter{width:40px;height:40px;flex:none;border-radius:44% 56% 50% 50%/52% 48% 54% 46%;
  font-family:var(--display);font-size:20px;
  display:flex;align-items:center;justify-content:center}
/* Нужна вашему слову: залита. Такую видно поперёк экрана. */
.lot-letter.нужна{background:var(--sea-deep);color:var(--paper);
  border:1.5px solid var(--sea-deep)}
/* Отдают, но вам не нужна: пунктир. Строка не пустая, но и не про вас. */
.lot-letter.лишняя{background:transparent;color:var(--sea-deep);
  border:1.5px dashed var(--sea-deep)}
/* Здесь букву не отдают, а ищут: сплошная обводка без заливки. */
.lot-letter.ищет{background:transparent;color:var(--sea-deep);
  border:1.5px solid var(--sea-deep)}
body.night .lot-letter.ищет,
body.night .lot-letter.лишняя{color:#3E8C86;border-color:#3E8C86}
.lot-main{flex:1;min-width:0}
.lot-who{font-size:15px}
.lot-bids{font-size:12px;color:var(--fog);margin-top:2px}
.lot-bids b{color:var(--oxblood)}
/* Строка биржи собрана как в макетах: буква — что отдают, под именем дома —
   что просят. Правый край отдан действию. Раскрывать её нечего, поэтому
   палец над ней не превращается в указатель. */
.lot-act{flex:none}
#board .lot-head{cursor:default}
.lot-under{padding:2px 0 0 53px}
.lot-under .pick{margin:2px 0 4px}
.lot-body{display:none;padding:12px 0 0 53px}
.lot.open .lot-body{display:block}
.bid{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px dashed var(--line)}
.bid-what{flex:1;min-width:0;font-size:14px}
.bid-from{font-size:11.5px;color:var(--fog);margin-top:2px}
.coin{font-family:var(--mono);font-size:13px;color:var(--brass);white-space:nowrap}
.coin b{font-size:15px;color:var(--ink)}
.guess{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.guess-h{flex:1;min-width:0}
.guess-mark{width:26px;flex:none;text-align:center;font-family:var(--display);font-size:16px;color:var(--sea-deep)}
/* ---- номинации ---- */
/* Домов двадцать два, за себя нельзя — в каждой номинации двадцать один дом,
   а номинаций три. Показывать все шестьдесят три кнопки разом нельзя, и
   раздел устроен бюллетенем: отданный голос сворачивается в строку, открытой
   остаётся одна номинация — та, где сейчас выбирают. */
.nom{padding:14px 0;border-bottom:1px solid var(--line)}
/* Номер вынесен влево висячей строкой: названия у всех трёх встают по одной
   вертикали, и по ней же выстраивается всё, что под ними. Кнопка, которая
   раскрывает и закрывает плашку, стоит в этой же строке справа: она не уезжает
   с раскрытием, и нажимают её дважды в одно и то же место. */
.nom-h{display:flex;gap:10px;align-items:baseline;font-family:var(--display);font-size:17px}
.nom-h i{font-style:normal;font-size:12px;letter-spacing:.1em;color:var(--brass);
  width:20px;flex:none;text-align:right}
.nom-h span{flex:1;min-width:0}
.nom-h .перевыбрать{flex:none}
.nom-s{font-size:12.5px;color:var(--fog);margin:6px 0 10px;padding-left:30px}
/* Счёт отданного: без него число голосов приходилось искать пролистыванием
   всего раздела. Час закрытия стоит справа, тем же моноширинным, что и
   кошелёк в шапке, — это метка времени, а не фраза. */
.голосов{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0 11px;border-bottom:1px solid var(--line)}
.голосов-н{font-family:var(--display);font-size:14px;color:var(--ink-2)}
.голосов-н b{font-size:17px;color:var(--ink)}
.голосов-к{font-family:var(--mono);font-size:11.5px;color:var(--brass);white-space:nowrap}
/* Отданный голос: имя дома морским — тем же, чем на всех экранах отмечено
   то, что уже ваше. Строка стоит и в закрытой плашке, и в раскрытой: имя —
   то, ради чего в неё и заглядывают. */
.выбрано{padding-left:30px;margin-top:3px}
.выбрано b{font-family:var(--display);font-size:16px;font-weight:600;color:var(--sea-deep)}
.выбрано.пусто span{font-size:13.5px;color:var(--fog)}
/* Свой голос после закрытия — предложением, а не именем в полный рост.
   Имя, стоящее в плашке само по себе, читается как победитель — а
   победителей приложение не называет вовсе, их оглашают на вечеринке.
   Строка одного кегля, дом выделен только шрифтом и цветом. */
.выбрано span{font-size:13.5px;color:var(--ink-2)}
.выбрано span b{font-size:15px}
/* Подчёркнутое слово мелкое, а нажимают его пальцем на качающейся палубе:
   зона захвата растянута отступами и убрана обратно отрицательными полями —
   на вид строка стоит там же, попасть в неё стало вдвое легче. */
.перевыбрать{font:inherit;font-size:12px;background:none;border:none;
  padding:10px 2px 10px 16px;margin:-10px 0;
  color:var(--fog);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Имена двумя столбцами и сверху вниз: алфавит идёт по столбцу, и своё имя
   находится одним проходом глазом. Змейкой по строкам его искали по всей
   ширине экрана. */
.имена{column-count:2;column-gap:14px;padding-left:30px}
.имя{display:flex;width:100%;align-items:center;gap:8px;font:inherit;font-size:13.5px;
  background:none;border:none;border-bottom:1px solid rgba(201,192,172,.55);
  padding:8px 2px;text-align:left;color:var(--ink-2);cursor:pointer;break-inside:avoid}
.имя i{width:13px;height:13px;flex:none;border:1px solid var(--line);border-radius:50%}
.имя.on{color:var(--ink)}
.имя.on span{font-weight:600}
.имя.on i{border-color:var(--sea-deep);background:var(--sea-deep);
  box-shadow:inset 0 0 0 2.5px var(--paper)}
/* Оглашение победителей ушло из приложения целиком (11 сентября 2026): их
   называют на финальной вечеринке, и экран, читающий имена за три часа до
   неё, отменял сам выход. Вместе с ним ушли стили строк оглашения. */
.opt{font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink-2);cursor:pointer}
.opt.on{background:var(--sea-deep);border-color:var(--sea-deep);color:var(--paper)}
.guess-mark.ok{color:var(--sea-deep)}
.bid-what em{font-style:italic;color:var(--ink-2)}
.locked-note{border:1px dashed var(--line);padding:14px;text-align:center;font-size:13.5px;color:var(--fog)}
.rank{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.debt{border-bottom:1px solid var(--line);padding:12px 0;display:flex;gap:12px;align-items:center}
/* Обещание — со шрамом слева: это обязательство со сроком, а не строка
   списка. Латунь, как у всего, что про долги и плату: тревожный цвет здесь
   был бы неправдой, пока срок не вышел. Только обещания: на том же классе
   живёт журнал, и там черта не значила бы ничего. */
/* Два обещания подряд читались как одно: латунные черты смыкались встык,
   а волосяная линия между ними терялась среди строк. Каждое обещание —
   отдельная сделка со своим сроком и своими кнопками, поэтому между ними
   воздух, а не шов: две черты видно как две. */
.debt.обещание{border-left:2px solid var(--brass);border-bottom:none;
  padding:10px 0 12px 12px;margin-bottom:20px}
.debt.обещание:last-child{margin-bottom:0}
body.night .debt.обещание{border-left-color:#9C7A38}
/* Кружок с буквой остался только в журнале, где буква — вид записи. Из
   обещаний он убран: там «Я» и «В» не значили ничего. */
.debt-mark{width:34px;height:34px;flex:none;border-radius:44% 56% 50% 50%/52% 48% 54% 46%;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:15px;
  border:1.5px dashed var(--oxblood);color:var(--oxblood)}
.debt-mark.theirs{border-style:solid;border-color:var(--sea-deep);color:var(--sea-deep)}
.debt-main{flex:1;min-width:0}
.debt-what{font-size:14.5px}
.debt-who{font-size:12px;color:var(--fog);margin-top:2px}
/* Значок устройства — марка, а не слово. Слово «якорь» в конце строки стояло
   вровень с датой и видом записи и читалось как ещё одно слово, хотя это
   подпись. Марку не читают, её узнают: та же марка стоит у имени дома в
   шапке, и дом сводит их сам — объяснять словами нечего. Рисунки лежат в
   index.html, набор — двенадцать, по числу людей на борту (db.ts).
   Не кружок: кружок в этой строке уже занят видом записи, два кружка подряд
   читались бы как два предмета. */
.марка{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;
  color:var(--fog)}
/* В шапке марка — про дом, и цвет у неё домовый, не подписи. Отступ
   держит точка-разделитель со своими пробелами, своего у марки нет. */
.марка.вшапке{width:18px;height:18px;color:var(--ink-2);vertical-align:-4px}
/* Курсива в разделителе быть не должно: <i> здесь — место для марки,
   а не выделение. */
#houseBadge{font-style:normal}
.сМаркой{white-space:nowrap}
body.night .марка{color:#66757A}
body.night .марка.вшапке{color:#8D9A9B}
.ducats b{font-size:19px;color:var(--ink)}

/* Линия идёт над заголовком, а не под ним: она отделяет раздел от того, что
   было выше, а не заголовок от собственного содержимого. Первый заголовок
   на экране линии не получает — над ним уже пунктир шапки. */
h2.sec{font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);font-weight:600;margin:22px 0 12px;padding-top:16px;
  border-top:1px solid var(--line)}
/* Первый по счёту, а не первый элемент: перед ним может стоять плашка
   взлома — она скрыта, но в разметке есть, и :first-child мимо неё промахивался. */
.screen > h2.sec:first-of-type,
/* А на вкладках технички первый заголовок лежит внутри своего контейнера
   («Итоги» рисуются целиком в #orgFinal), и до него правило выше не
   доставало: над «Словами» стояли две черты подряд — шапки и заголовка. */
.screen > div:first-child > h2.sec:first-child{border-top:none;padding-top:0;margin-top:18px}
/* «Ваш ход» открывает экран сделок: сверху черты нет — она отделяла бы его
   от шапки дома, — а снизу есть, и она же служит чертой первой складке. */
#todoWrap > h2.sec:first-of-type{border-top:none;padding-top:0;margin-top:18px}
#todoWrap{border-bottom:1px solid var(--line);padding-bottom:16px}
#todoWrap + h2.sec{border-top:none;padding-top:16px;margin-top:0}
/* Заголовок-складка: стрелка справа, поворачивается при раскрытии. Раздел,
   который читают, не должен занимать экран, пока его не открыли. */
h2.sec.складка{display:flex;align-items:center;justify-content:space-between;
  gap:15px;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Уголок стоит с отступом от правого края: вплотную к линии он читается
   как сбой вёрстки, а не как знак. По высоте его держит выравнивание строки —
   своего сдвига у него нет, иначе он не сходится с числом рядом. */
h2.sec.складка::after{content:'';width:9px;height:9px;flex:none;
  margin:0 6px 0 0;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease}
h2.sec.складка.открыт::after{transform:rotate(-135deg) translate(-1px,-1px)}
.hint{font-size:13px;color:var(--fog);margin:0 0 10px}
/* Пустая подсказка не должна оставлять после себя отступ: на «Заданиях» она
   пуста все дни регаты, и десять пикселей висели бы под заголовком просто так. */
.hint:empty{display:none}
.hint b{color:var(--ink-2);font-weight:600}
.hint a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Строка про политику — внизу экрана, над вкладками, а не сразу под
   заданиями: в субботу задание одно, и строка висела посреди пустого места.
   Заданий много — она за ними; место под неё держит отступ экрана. */
.wrap:has(#s-days.on){position:relative;min-height:calc(100dvh - 84px)}
#s-days{padding-bottom:64px}
.hint.политика{position:absolute;left:18px;right:18px;bottom:14px;margin:0;font-size:11px}

/* ---- слово ---- */
/* Отступ сверху тот же, что снизу: слово стоит между картинкой острова и
   строкой о нём, и с четырьмя пикселями сверху буквы липли к рамке. */
.word{display:flex;gap:7px;margin:10px 0}
.slot{flex:1 1 0;height:54px;border:1.5px solid var(--line);background:var(--paper-2);
  border-radius:44% 56% 50% 50%/52% 48% 54% 46%;
  font-family:var(--display);font-size:23px;display:flex;align-items:center;justify-content:center;
  color:var(--fog);transition:background .3s ease,color .3s ease,border-color .3s ease}
.slot.filled{background:var(--sea-deep);border-color:var(--sea-deep);color:var(--paper)}
/* Закрытая, но обещанная буква приглушена — тем же, чем приглушены обещанные
   в руке. Слово выглядит собранным, а камень вот-вот уедет: разница должна
   быть видна на самом слове, а не в час, когда слот опустеет. */
.slot.filled.обещан{opacity:.42}

/* ---- рука ---- */
.hand{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 6px}
.chip{font-family:var(--display);font-size:19px;min-width:40px;height:40px;padding:0 9px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ink);border-radius:44% 56% 50% 50%/52% 48% 54% 46%;background:transparent}
.chip.spare{border-style:dashed;border-color:var(--fog);color:var(--ink-2)}
/* Камень на полке — кнопка. Выбранный заливается латунью: на воде видно,
   что именно сейчас купится, без чтения поля. */
button.chip{color:inherit;cursor:pointer;-webkit-appearance:none}
.chip.picked{background:var(--brass);border-color:var(--brass);color:var(--paper)}
/* Нужная слову буква на полке — тем же цветом, что и на бирже: одно правило
   на всю игру, а не два похожих. Выбранная латунь перебивает её: там речь
   уже не о том, нужна ли буква, а о том, что дом её берёт. */
.chip.нужна{background:var(--sea-deep);border-color:var(--sea-deep);color:var(--paper)}
.chip.нужна.picked{background:var(--brass);border-color:var(--brass)}
body.night .chip.нужна{background:#2F7A78;border-color:#2F7A78;color:#0F1518}

/* ---- остров ---- */
.island-frame{margin:14px 0 0;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.island-frame svg{display:block;width:100%;height:auto}
.island-caption{padding:9px 13px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2);
  display:flex;justify-content:space-between}
.island-caption b{color:var(--ink)}

/* ---- служебное ---- */
.quote{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.qrow{display:flex;align-items:center;gap:9px;font-size:13px}
.qletter{font-family:var(--display);font-size:18px;text-align:center;width:26px;flex:none}
.qbar{flex:1 1 auto;height:9px;background:var(--paper-2);border:1px solid var(--line);position:relative}
.qbar i{position:absolute;top:0;bottom:0;left:0;background:var(--sea);display:block}
.qbar i.hot{background:var(--oxblood)}
.qnum{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right;width:30px;flex:none}

/* ---- заявки ---- */
.offer{border-bottom:1px solid var(--line);padding:13px 0;display:flex;gap:14px;align-items:center}
.offer-swap{display:flex;align-items:center;gap:7px;flex:none;font-family:var(--display);font-size:19px}
.offer-swap span{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:44% 56% 50% 50%/52% 48% 54% 46%}
.give{background:var(--sea-deep);color:var(--paper)}
.want{border:1.5px dashed var(--oxblood);color:var(--oxblood)}
.arrow{font-size:14px;color:var(--fog);font-family:var(--body)}
.offer-main{flex:1;min-width:0}
.offer-who{font-size:14px}
.offer-note{font-size:12px;color:var(--fog);margin-top:2px}
.take{font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:none;padding:9px 13px;cursor:pointer;white-space:nowrap}
.take[disabled]{background:transparent;color:var(--fog);border:1px solid var(--line);cursor:default}
.take.mine{background:transparent;color:var(--oxblood);border:1px solid var(--oxblood)}
.empty{color:var(--fog);font-size:14px;padding:14px 0;border-bottom:1px solid var(--line)}

.form{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.row{display:flex;gap:8px}
.form select,.form input{font:inherit;font-size:16px;line-height:1.2;padding:11px 12px;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink);
  border-radius:0;width:100%;min-width:0}
/* Стрелка списка своя, а не системная: родная синяя пара шевронов принадлежит
   другому оформлению и спорит со всем остальным. Рисуем одну, в цвете текста. */
.form select{
  -webkit-appearance:none;appearance:none;
  padding-right:36px;
  background-color:var(--paper-2);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%234A585C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
}
body.night .form select{
  background-color:#0E1416;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%2377868A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* flex:1 1 0 распоряжается размером вдоль оси. Форма выложена колонкой, и там
   это высота: у списка схлопывалось содержимое, и выбранное переставало быть
   видно — сам список при этом работал. Растягиваем по ширине только в строке. */
.row select,.row input{flex:1 1 0}
.btn{font:inherit;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);
  color:var(--paper);border:none;padding:13px;cursor:pointer;width:100%}
.btn:active{background:var(--sea-deep)}
/* Место под сообщение резервируется, чтобы текст под кнопкой не прыгал. Но
   пустая строка в конце формы — просто дыра: раздел ниже отъезжает на два
   десятка пикселей ни за чем. Пустую схлопываем. */
.flash{font-size:13px;color:var(--oxblood);min-height:19px;margin-top:2px}
.flash:empty{min-height:0;margin-top:0}
/* Принятая буква отвечает в той же строке, что и отказ, но не тревожным
   цветом: красное — «не приняли», бирюза — «приняли», как заливка нужной
   буквы на всех экранах. */
.flash.принято{color:var(--sea-deep)}

/* Последняя строка списка не подчёркивается: под ней и так идёт черта
   следующего раздела, и две линии в двух пикселях друг от друга читаются
   как сбой. */
.bwrap:last-child,.group:last-child,.meet:last-child,.ping:last-child,
.lot:last-child,.guess:last-child,.nom:last-child,.debt:last-child,
.offer:last-child,.empty:last-child,.day:last-child,.rule:last-child{
  border-bottom:none}
/* Внутри формы поля выложены гибко, и нижний отступ последней подсказки
   не схлопывается с отступом следующего заголовка, как это происходит
   в обычном потоке. Снаружи выглядит как лишний провал — снимаем. */
.form > .hint:last-child,.form > p:last-child{margin-bottom:0}
/* Кнопка после формы — уже другое решение, а не последний шаг заполнения:
   вплотную к «Подтвердить» она читается как её пара. */
.form + .btn{margin-top:16px}

/* ---- дни ---- */
.day{border-bottom:1px solid var(--line);padding:15px 0}
.day-head{display:flex;gap:12px;align-items:baseline;cursor:pointer}
.day-num{font-family:var(--mono);font-size:12px;color:var(--brass);min-width:22px;padding-top:3px}
.day-main{flex:1}
.day-place{font-family:var(--display);font-size:20px}
.day-meta{font-size:12px;color:var(--fog);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.day-state{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);padding-top:4px}
.day-state.now{color:var(--oxblood)}
.day-body{display:none;padding:13px 0 2px 34px}
.day.open .day-body{display:block}
.coords{font-family:var(--mono);font-size:13px;color:var(--sea-deep);background:var(--paper-2);
  border:1px solid var(--line);padding:6px 9px;display:inline-block;margin-bottom:13px}
.riddle{font-family:var(--display);font-size:17px;line-height:1.62;border-left:2px solid var(--oxblood);
  padding-left:14px;margin:0 0 13px;white-space:pre-line}
.label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:13px 0 5px}
/* Переносы в условии — часть условия: у «Семнадцати» и «Пяти морских»
   это список из пяти строк, а без pre-line он склеивался в один абзац
   и читался сплошняком. Загадка (.riddle) так стоит с самого начала. */
.task{font-size:15px;margin:0;white-space:pre-line}
/* Названный ответ — итог, а не строка списка: под ним нужен воздух, иначе
   подпись про снимок читается его продолжением. */
.task.ответ{margin-bottom:8px}
.pay{margin-top:11px;font-family:var(--mono);font-size:12px;color:var(--brass)}
/* Карточка события дышит одинаково с обеих сторон. Снизу отступа не было
   вовсе, и подпись «живёт до полуночи» прилипала к цветной плашке вплотную,
   а сверху был зазор в девять пикселей. Внутри на пиксель меньше снизу:
   над прописными буквы всегда меньше пустоты, чем под базовой линией, и
   равные числа читаются неравными. */
.event{margin:9px 0;border-left:2px solid var(--oxblood);background:#F2E7E2;
  padding:10px 12px 9px;font-size:13.5px;color:var(--ink)}
.reveal{margin-top:13px;background:none;border:1px solid var(--line);color:var(--ink-2);
  font:inherit;font-size:13px;padding:8px 14px;cursor:pointer;width:100%}
.answer{display:none;margin-top:12px;font-size:15px;color:var(--ink-2);
  border-top:1px dashed var(--line);padding-top:12px}
.answer.shown{display:block}
.locked .day-place,.locked .day-meta{opacity:.42}

.rule{padding:13px 0;border-bottom:1px solid var(--line)}
.rule h3{font-family:var(--display);font-size:17px;margin:0 0 6px;font-weight:600}
.rule ul{margin:0;padding-left:18px;font-size:15px}
.rule li{margin-bottom:6px}
.rule b{color:var(--oxblood)}
.rule.danger{border:1px solid var(--oxblood);background:#F2E7E2;padding:14px;margin-top:15px}
.rule.danger h3{color:var(--oxblood)}

/* Безопасная зона внизу: система называет её высоту не в первом кадре, и
   панель, нарисованная до этого, подрастает на глазах. Поэтому берётся то из
   двух, что больше: названное системой или запомненное с прошлого запуска
   (--низ ставит app.js). Мерка ниже — чтобы прочитать чистое значение зоны. */
.низ-проба{position:fixed;left:0;bottom:0;width:0;height:env(safe-area-inset-bottom);
  visibility:hidden;pointer-events:none}
/* transform нужен не для вида: он поднимает панель в свой слой, и айфон
   перестаёт таскать её за прокруткой. Без него при разгоне пальцем панель
   уезжает вместе со страницей и встаёт на место, только когда прокрутка
   останавливается, — на длинных списках админки это видно каждый раз. */
nav{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);
  display:flex;padding-bottom:max(env(safe-area-inset-bottom),var(--низ,0px));z-index:20;
  transform:translateZ(0);will-change:transform}
/* Первый запуск на телефоне: высоты зоны ещё никто не называл. Панель ждёт
   долю секунды, но выходит сразу нужной. */
nav.ждёт{visibility:hidden}
nav button{flex:1;background:none;border:none;font:inherit;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fog);padding:14px 4px 15px;cursor:pointer;
  border-top:2px solid transparent;margin-top:-1px;
  /* «Супер-игра» длиннее прочих: у рано собравшего слово вкладок шесть, и
     она ломалась на две строки, поднимая всю панель. Подпись не переносится;
     вкладка, которой тесно, берёт место у соседей, а когда места хватает
     всем, ширина у всех одна, как была. */
  white-space:nowrap;min-width:max-content}
nav button.on{color:var(--ink);border-top-color:var(--oxblood)}
/* Набирают в поле — панели нет: клавиатура ужимает окно, и она встаёт
   полосой посреди экрана поверх формы. Ставит и снимает класс app.js. */
body.печатают nav{display:none}
/* nav объявляет свой display, и он сильнее того, что даёт разметке атрибут
   hidden: панель, спрятанная скриптом, оставалась на экране. Дом прячет её
   на экране входа, админка организатора — когда ссылка погасла. */
nav[hidden]{display:none}
.screen{display:none}
.screen.on{display:block}
footer{padding:24px 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog);text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--sea);outline-offset:2px}

/* Поля для цифр: код набирают в темноте, на качающейся палубе. */
.pin{font-family:var(--mono);font-size:24px;letter-spacing:.18em;text-align:center}
.form .pin{padding:13px 12px}

/* Ночной прилавок — та же вёрстка в тёмной палитре. Цвета взяты из макетов:
   днём за товар отвечают, ночью нет, и это должно быть видно, не читая. */
.screen.night{background:#11181A;color:#D8D2C4;margin:0 -18px;padding:2px 18px 18px}
body.night .sec{color:#9C7A38;border-bottom-color:#26312F}
body.night .hint{color:#77868A}
body.night .hint b{color:#D8D2C4}
body.night .chip{border-color:#33403E;color:#C7C0B0;background:transparent}
body.night .chip.picked{background:#9C7A38;border-color:#9C7A38;color:#11181A}
body.night .form input,
body.night .form select{background:#0E1416;border-color:#33403E;color:#D8D2C4}
body.night .btn{background:#9C7A38;color:#11181A}
body.night .btn.ghost{background:none;color:#B9583F;border-color:#6A2323}
body.night .ping{border-bottom-color:#26312F}
body.night .ping-sub{color:#66757A}
body.night .flash{color:#B9583F}
body.night .flash.принято{color:#3E8C86}


/* Поля не меньше 16 пикселей: Safari на айфоне приближает страницу, если
   шрифт в поле мельче, и после ввода буквы всё едет. */
input,select,textarea{font-size:16px}

/* Строка сообщений живёт отдельно от кошелька: тот не переносится, и длинный
   текст в нём делал страницу шире экрана. */
/* Вопрос про уведомления: один раз при первом входе, над экраном. Латунная
   черта слева, как у обещаний, — это просьба, а не тревога. */
.ask{margin:14px 0 4px;border-left:2px solid var(--brass);background:var(--paper-2);
  padding:12px 14px 10px}
.ask-h{font-family:var(--display);font-size:15px;color:var(--ink);margin-bottom:4px}
.ask .hint{margin:0 0 6px}
.notice{margin:10px 0 0;font-size:13px;color:var(--brass);min-height:0}
.notice:empty{display:none}
/* Срок с ценой — не то же, что «действие ждёт связи»: два часа, и не успел —
   буква ушла, а сам до конца дня не ставишь. Цвет и черта те же, что у метки. */
.notice.тревога{color:var(--oxblood);border-left:2px solid var(--oxblood);
  background:#F2E7E2;padding:8px 11px;font-size:13.5px}

/* «Выбрать» — решающее действие на бирже: владелец берёт одно предложение
   и закрывает строку. Оно должно выглядеть как выбор, а не как ссылка. */
/* Решающее действие внутри строки: по ширине содержимого, как в макетах.
   Во всю ширину идут только кнопки формы — там ширина означает «это конец
   заполнения», а отдельно стоящая кнопка такой ширины выглядит тяжелее,
   чем весит. */
.pick{font:inherit;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 14px;border:none;background:var(--brass);color:var(--paper);
  cursor:pointer;white-space:nowrap;flex:none;align-self:flex-start}
.pick:active{background:var(--sea-deep)}
/* Кнопка внутри строки на доске и в своей строке не должна упираться
   в разделитель под собой. */
/* Кнопка, стоящая сама по себе после текста, должна от него отступить. */
.lot .pick,#myLot .pick{display:inline-block;margin:10px 0 4px}
/* Переход к сделке — шаг дальше по всему делу, а не выбор внутри строки. */
.lot-under .btn,#myLot .btn{margin:10px 0 4px}
#wordAct{margin:10px 0 4px}
/* Снятие строки — решение про всю строку целиком, поэтому во всю ширину,
   как «Выставить», а не как выбор внутри неё. */
#myLot .btn{margin-top:10px}
.pick[disabled]{background:var(--line);color:var(--fog)}

/* Числовое поле без крутилок. Родная пара стрелок принадлежит браузеру,
   а не оформлению; вводить число это не мешает, а на телефоне их и нет. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Потянуть вниз, чтобы обновить. В отдельном окне приложения родного жеста
   нет, а обновиться руками иначе нечем: адресной строки тоже нет. */
/* Полоса стоит в потоке, а не поверх страницы: тянут — она раздвигает
   экран сверху и уводит его вниз, как это делает родной жест; отпустили —
   экран возвращается вместе с ней. Поверх страницы она накрывала шапку
   дома, и выходило, что экран не сдвинулся, а его чем-то заслонили.
   Черта снизу появляется только вместе с полосой: у нулевой высоты она
   осталась бы висеть волоском над шапкой. Своей заливки у полосы нет — тот
   же лист, что и весь экран: чужой оттенок сверху читался как чужая плашка,
   а ночью и вовсе светился белым на тёмном. */
.pull{display:flex;align-items:flex-end;justify-content:center;
  height:0;overflow:hidden;background:transparent;
  border-bottom:0 solid var(--line);
  transition:height .18s ease}
.pull.тянут,.pull.крутится{border-bottom-width:1px}
/* Круг не жмётся к нижнему краю полосы: девяти пикселей под ним было мало,
   и он выглядел обрезанным. */
.pull i{display:block;width:17px;height:17px;margin-bottom:17px;
  border:2px solid var(--line);border-top-color:var(--brass);border-radius:50%}
.pull.тянут{transition:none}
.pull.крутится i{animation:вертится .7s linear infinite}
@keyframes вертится{to{transform:rotate(360deg)}}


/* Пока приложение не разобралось, свой это дом или вход, не показываем ни то,
   ни другое: экран входа, мелькнувший у своего дома, выглядит как потеря
   доступа. Вместо него — тот же круг, что и при обновлении. */
/* Выше нижнего ряда вкладок: пока состояния нет, экраны пусты, и нажимать
   там нечего. z-index у ряда — 20. */
/* Всплывающий ответ. Поверх всего, у верхнего края: это отклик на жест,
   и искать его глазами в потоке не должно быть нужно. */
.toast{position:fixed;left:12px;right:12px;top:12px;z-index:40;
  background:var(--ink);color:var(--paper);padding:12px 14px;font-size:14px;
  line-height:1.45;box-shadow:0 6px 24px rgba(0,0,0,.25);cursor:pointer}
.toast[hidden]{display:none}
.toast b{color:#E7C77A}
/* Стрелка смотрит на ту букву, по которой нажали: полоса во всю ширину,
   и без неё непонятно, о каком камне речь. */
.toast::before{content:'';position:absolute;top:-6px;left:var(--стрелка,24px);
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:6px solid var(--ink)}
.toast.снизу::before{top:auto;bottom:-6px;border-bottom:none;
  border-top:6px solid var(--ink)}
body.night .toast{background:#0E1416;color:#D8D2C4;border:1px solid #33403E}
body.night .toast::before{border-bottom-color:#0E1416}
body.night .toast.снизу::before{border-top-color:#0E1416}

.boot{position:fixed;inset:0;z-index:30;background:var(--paper);
  display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;
  padding:0 28px}
.boot-note{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  max-width:22em;text-align:center}
.boot-note:empty{display:none}
.boot[hidden]{display:none}
.boot i[hidden]{display:none}
.boot i{display:block;width:22px;height:22px;border:2px solid var(--line);
  border-top-color:var(--brass);border-radius:50%;animation:вертится .7s linear infinite}

/* Вопрос перед необратимым. Системное окно спрашивало чужим голосом: белая
   карточка, синие кнопки и «ОК» посреди листа известняка читались как сбой
   приложения, а не как решение дома. Спрашиваем сами — тем же листом, тем же
   шрифтом и теми же кнопками, что и на экранах.
   Прокручивается задник, а не карточка: длинный вопрос на маленьком экране
   должен листаться, а страница под ним при этом стоять на месте. */
.dlg{position:fixed;inset:0;z-index:50;display:flex;
  background:rgba(19,28,31,.52);overflow-y:auto;overscroll-behavior:contain;
  padding:14px 12px;padding-bottom:max(14px,env(safe-area-inset-bottom));
  animation:задник .16s ease-out}
.dlg[hidden]{display:none}
/* Карточка посреди экрана. Держат её отступы auto, а не justify-content:
   тот на прокручиваемом ряду срезал бы верх у вопроса, который выше экрана,
   а отступы в этом случае просто становятся нулевыми. */
.dlg-card{width:100%;max-width:420px;margin:auto;background:var(--paper);
  border:1.5px solid var(--ink);padding:17px 16px 15px;
  box-shadow:0 14px 44px rgba(19,28,31,.34);animation:всплыла .2s ease-out}
.dlg-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);margin-bottom:7px}
/* Имя дома — антиквой, как в списке встреч: с него вопрос и начинается. */
.dlg-title{font-family:var(--display);font-size:21px;margin:0 0 7px}
.dlg-title:empty{display:none}
.dlg-text p{margin:0 0 7px;font-size:14.5px;line-height:1.5}
.dlg-text p:last-child{margin-bottom:0}
/* Приписка — не условия, а то, что будет дальше: тише текста и отбита от
   него, как подсказка под формой. */
.dlg-note p{margin:11px 0 0;font-size:13px;line-height:1.45;color:var(--fog)}
/* Столбиком и во всю ширину, как выбор у брокера: рядом «Выбрать» и
   «Отменить» жмутся друг к другу, а на качке мимо не промахиваются. */
.dlg-act{display:flex;flex-direction:column;gap:8px;margin-top:15px}
.dlg-act .btn{margin:0}
@keyframes задник{from{opacity:0}to{opacity:1}}
@keyframes всплыла{from{transform:translateY(10px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dlg,.dlg-card{animation:none}}
body.night .dlg-card{background:#11181A;border-color:#33403E;color:#D8D2C4}
body.night .dlg-kicker{color:#9C7A38}
body.night .dlg-note p{color:#77868A}

/* Недоступное действие должно быть видно как недоступное, а не отбиваться
   отказом после нажатия. */
.btn[disabled],.chip-btn[disabled]{background:var(--line);color:var(--fog);
  border-color:var(--line);cursor:default}
select[disabled],input[disabled]{color:var(--fog);background:var(--paper)}

/* Обещанный камень: виден, но приглушён — он ещё твой, но уже не свободен. */
.chip.обещан{opacity:.42}

/* Камень, про который таможня уже сказала. Отметка приватная: её видит
   только заплативший дом. Подделка перечёркнута, проверенная настоящая —
   обведена морской линией. */
/* Черта идёт наискось через весь камень, а не по глазку буквы: горизонтальная
   line-through на одной букве читается как другая буква — С превращалась в Є. */
.chip.липа{border-color:var(--oxblood);color:var(--oxblood);position:relative}
.chip.липа::after,.slot.липа::after{content:'';position:absolute;left:14%;right:14%;
  top:50%;height:1.5px;background:currentColor;opacity:.85;transform:rotate(-38deg)}
.chip.проверен{border-color:var(--sea)}
button.slot{font:inherit;font-family:var(--display);cursor:pointer;-webkit-appearance:none}
.slot.липа{background:var(--oxblood);border-color:var(--oxblood);color:var(--paper);
  position:relative}
/* Проверенная таможней буква в слове ничем не отличается от прочих
   (10 сентября 2026). Кольцо вокруг неё читалось как свойство самой буквы —
   «эта откуда-то не оттуда», — а значило всего лишь, что за неё платили.
   В слове важно другое: подделка, и она перечёркнута. Среди лишних отметка
   остаётся: там дом решает, что сбывать, и знание, за которое заплачено,
   стоит у камня. */
body.night .slot.липа{background:#6A2323;border-color:#6A2323;color:#E7E1D2}
body.night .chip.липа{border-color:#B9583F;color:#B9583F}
body.night .chip.проверен{border-color:#3E8C86}

/* Вторая кнопка живёт внутри формы: расстояние между ними задаёт сама
   раскладка, а не отдельное правило, которое легко потерять. */


/* Раздел, который ещё грузится: тот же круг, что при запуске и обновлении.
   Показывается только пока в разделе пусто — на повторных обновлениях экран
   не должен мигать. */
.грузится{display:flex;justify-content:center;padding:26px 0}
.грузится i{display:block;width:18px;height:18px;border:2px solid var(--line);
  border-top-color:var(--brass);border-radius:50%;animation:вертится .7s linear infinite}
body.night .грузится i{border-color:#33403E;border-top-color:#9C7A38}


/* ── Ночь: прилавок после темноты и взломанная биржа ──────────────────────
   Темнеет весь экран, а не отдельный блок: днём за товар отвечают, ночью нет,
   и это должно быть видно, не читая. Палитра взята из макетов. */
/* Красится и лист под страницей. Фон <html> задан отдельной строкой в
   index.html, чтобы первый кадр не был белым, — и он же закрывает собой
   фон body на канве. Пока эта строка оставалась светлой, под коротким
   экраном до самой панели вкладок лежала полоса известняка. */
html.night{background:#11181A}
body.night{background:#11181A;color:#D8D2C4}
body.night .masthead{background:#0E1416;border-bottom-color:#6A2323;
  margin:0 -18px;padding-left:18px;padding-right:18px}
body.night .masthead h1{color:#E7E1D2}
body.night .eyebrow{color:#8A6B33}
body.night .bar{color:#8D9A9B}
body.night .bar strong,body.night .ducats b{color:#E7E1D2}
body.night .sec{color:#9C7A38;border-bottom-color:#26312F}
body.night .hint{color:#77868A}
body.night .hint b{color:#D8D2C4}
body.night .task,body.night .meet-house,body.night .lot-who{color:#D8D2C4}
body.night .meet-sub,body.night .lot-bids,body.night .debt-who{color:#66757A}
body.night .chip{border-color:#33403E;color:#C7C0B0;background:transparent}
body.night .chip.picked{background:#9C7A38;border-color:#9C7A38;color:#11181A}
body.night .slot{background:#1A2426;border-color:#2C3A3B;color:#C7C0B0}
body.night .slot.filled{background:#3E8C86;border-color:#3E8C86;color:#0E1416}
body.night .bl{border-color:#33403E;color:#9BA8A6}
body.night .bwrap,body.night .meet,body.night .lot,body.night .group,
body.night .ping,body.night .debt,body.night .guess{border-bottom-color:#26312F}
body.night .form input,body.night .form select,body.night .code{
  background:#0E1416;border-color:#33403E;color:#D8D2C4}
body.night .btn{background:#9C7A38;color:#11181A}
body.night .btn.ghost{background:none;color:#B9583F;border-color:#6A2323}
body.night .btn[disabled],body.night .chip-btn[disabled]{background:#1A2426;color:#4E5C5A;
  border-color:#26312F}
body.night .chip-btn{background:#1A2426;border-color:#33403E;color:#9BA8A6}
body.night .pick{background:#9C7A38;color:#11181A}
body.night nav{background:#0E1416;border-top-color:#26312F}
body.night nav button{color:#5E6E6C}
body.night nav button.on{color:#D8D2C4;border-top-color:#B9583F}
/* Красная плашка наверху ночью: днём это оксблад по кремовому, а на чёрном
   рынке та же карточка светилась кремовым прямоугольником посреди тёмного
   экрана — единственным светлым пятном на нём. Ночная пара та же, что
   у тайной карточки: тёмный бордовый фон, кирпичная черта, светлый текст. */
body.night .notice{color:#9C7A38}
body.night .notice.тревога{background:#22181A;border-left-color:#B9583F;color:#E0B3A4}
body.night .island-frame{background:#0E1416;border-color:#26312F}
body.night .island-caption{border-top-color:#26312F;color:#77868A}
/* Экран сделок ночью показывает то, чего дневная палитра не покрывала:
   тёмная подпись группы и надстрочник тайны сливались с фоном. */
body.night .group-h{color:#8D9A9B}
body.night .lot-letter.нужна{color:#E7E1D2}
body.night .offer-note{color:#77868A}
body.night .secret-kicker{color:#B9583F}
body.night .secret-card{background:#22181A;border-color:#6A2323}
body.night .secret-body{color:#D8D2C4}

/* Взломанная биржа: тот же экран, но чужой замок. Заголовок двоится, рамка
   рвётся пунктиром, надстрочник переходит на машинописный. */
body.hacked .masthead{border-bottom-style:dashed}
body.hacked .masthead h1{position:relative}
body.hacked .masthead h1::after{content:"ФАШИНАДА";position:absolute;left:2px;top:-1px;
  color:#B9583F;opacity:.55;mix-blend-mode:screen;letter-spacing:.1em}
body.hacked .eyebrow{font-family:var(--mono);letter-spacing:.14em;color:#7FA9A4}
.breach{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:#B9583F;
  border:1px dashed #6A2323;padding:7px 9px;margin:14px 0 14px;background:#1B1315}

/* «К у вас есть» — не часть фразы про чужую строку, а отдельная пометка:
   в кружке слева стоит другая буква, и без своего цвета эта подсказка
   прочитывается про неё. */
.offer-note .есть{color:var(--sea)}

/* Подпись под рукой — своей строкой под буквами, а не рядом с ними: .hand
   выложена флексом, и абзац вставал в тот же ряд, прочитываясь как подпись
   к последней букве. */
.hand .hint{flex:0 0 100%;margin:5px 0 0}

/* Кнопка под строкой биржи — во всю ширину строки, а не по текстовой
   колонке. .lot-under отступает на 53px (кружок 40 плюс зазор 13), чтобы
   подпись читалась продолжением текста над собой. Кнопке этот отступ
   вреден: она про строку целиком, и обрезанная слева ровно на ширину
   кружка выглядела частью абзаца, а не действием. */
.lot-under .btn{margin-left:-53px;width:calc(100% + 53px)}

/* Доска делится надвое: сначала те, кто отдаёт букву, потом те, кто ищет.
   Подпись негромкая — это не два раздела, а шов внутри одного списка:
   заголовок в полный голос разорвал бы доску на две страницы. */
.board-split{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog);padding:16px 0 6px;border-top:1px solid var(--line)}
.board-split.первая{padding-top:4px;border-top:none}

/* «Брокера так и нет» — со шрамом слева у самой фразы. Полоса вдоль всего
   блока обводила заодно код и кнопку, будто тревожны и они; тревожна только
   новость, а дальше идёт обычная работа. */
.group.сами .group-h{border-left:2px solid var(--oxblood);padding-left:10px;
  color:var(--oxblood)}
body.night .group.сами .group-h{border-left-color:#B9583F;color:#B9583F}

/* Чёрная метка — чёрная. Единственная карточка в игре, залитая тёмным:
   наказание должно быть видно с другого конца палубы, и цвет здесь говорит
   быстрее, чем текст. Ночью чернее фона уже некуда — держим на рамке. */
.secret-card.метка{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.secret-card.метка .secret-kicker{color:var(--paper-2)}
.secret-card.метка .secret-body{color:var(--paper)}
.secret-card.метка .secret-body + .secret-body{margin-top:8px;color:var(--paper-2);font-size:13.5px}
body.night .secret-card.метка{background:#05090A;border-color:#3A3330}
body.night .secret-card.метка .secret-body{color:#E7E1D2}

/* ===== ТЕХНИЧЕСКАЯ АДМИНКА ==================================================
   Экраны суперадмина: часы, правки руками, входы. Смотрят в них не с палубы
   впопыхах, а сидя и на трезвую голову, — поэтому тут можно плотнее и мельче,
   чем в доме. Отдельного файла не заводим: палитра, кнопки и формы те же,
   здесь только то, чего в доме нет. */

/* Кнопка в строке делит ширину поровну с соседями и тянется на их высоту.
   Без этого каждая занимала столько, сколько в ней букв: «+13 ч» выходила с
   напёрсток, «Настоящее время» переносилось на две строки и становилось выше
   соседних — ряд получался рваный, а промахнуться мимо нужной кнопки на
   качающейся палубе тем легче, чем они разнокалибернее. */
.row{align-items:stretch}
.row .btn{flex:1 1 0;width:auto;display:flex;align-items:center;
  justify-content:center;text-align:center}
/* Отступы кнопке в ряду не нужны: их даёт сам ряд. У призрачной кнопки внутри
   `.group` есть свой верхний в десять пикселей — он для той, что стоит одна
   под формой, а в ряду он растягивал ряд на эти десять и ронял кнопку ниже
   соседнего поля. Второй селектор не для красоты: `.group .btn.ghost` весом
   выше `.row .btn`, и перебить его можно только равным. */
.row .btn,.row .btn.ghost{margin:0}

/* Поле на одну букву шириной в весь экран обещает строку, а принимает знак.
   Сжимаем до своего размера и ставим соседом тому, что при нём: причине
   выдачи или кнопке. */
.row .однобуквенное{flex:0 0 96px;text-align:center;letter-spacing:.1em}

/* Дата и час — пара, но веса у них разные: в дате «9 окт. 2026 г.», в часе
   пять знаков. Поделённая поровну строка жала дату до многоточия, а часу
   оставляла пустое поле в полэкрана. */
.row.часы input[type=date]{flex:1.8 1 0}
.row.часы input[type=time]{flex:1 1 0}

/* Слово, от которого зависит решение: проверочные часы, лишнее устройство,
   пропавшая копия базы. Красным — и больше ничем: цвет означает состояние,
   а не выделяет важное. */
.danger{color:var(--oxblood)}
/* Подсказка и подпись красят свой полужирный сами (.hint b, .ping-sub), и по
   весу правил класс из одного слова им уступает: без этой пары «проверочный
   режим» и лишнее устройство выходили серыми — ровно тем цветом, от которого
   их надо отличить. */
.hint b.danger,.ping-sub b.danger,.ping-main b.danger{color:var(--oxblood)}
body.night .danger,body.night .hint b.danger,
body.night .ping-sub b.danger,body.night .ping-main b.danger{color:#B9583F}

/* Флажок стоит в строке со своей подписью, а не над ней: подпись тут короче
   самого флажка, и в столбик они читались двумя разными вопросами. */
.opt-line{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);
  padding:2px 0;cursor:pointer}
.opt-line input{width:18px;height:18px;flex:none;accent-color:var(--sea-deep);margin:0}

/* Час и имя правившего — одним столбцом справа: «когда и кто». Имя мельче
   часа и не в разрядку — час ищут глазами, имя дочитывают. */
#orgLog .bza{align-self:flex-start;text-align:right;flex:none;line-height:1.5}
#orgLog .bza i{display:block;font-style:normal;letter-spacing:.04em;
  text-transform:none;font-size:11px}

/* Первая строка экрана. Все прочие экраны открываются заголовком, и отступ
   сверху приходит от него; здесь сверху объяснение, и без своего отступа оно
   прилипало к пунктиру шапки. */
.hint.первая{margin-top:20px}

/* Вход в списке ключей: имя с действием в строке, под ними числа и код.
   Черта одна и сверху — раньше каждый вход был `.group` с собственными
   отступами, а внутри него `.ping` со своей нижней границей, и на стыке двух
   входов черты вставали парой, с пустой полосой между ними. */
.ключи{padding-bottom:4px}
.вход{padding:15px 0;border-top:1px solid var(--line)}
.вход:first-child{border-top:none;padding-top:2px}
.вход-верх{display:flex;align-items:baseline;gap:14px}
.вход-имя{flex:1;min-width:0;font-size:15px}
/* Перевыпуск и удаление стоят парой справа от имени. Разделены воздухом, а не
   чертой: черта между двумя строчками читалась бы третьей кнопкой. */
.вход-дела{display:flex;gap:14px;flex:none}
/* Устройства таблицей: значок, первый заход, последний. Шапка над ними —
   один раз на вход и мелко: она называет столбцы, а не говорит новость.
   Над столбцом значков подписи нет: слово «устройство» шире самого столбца
   и налезало на соседнее, а картинка в подписи не нуждается. */
.вход-шапка{display:flex;align-items:center;gap:10px;margin-top:11px;padding-bottom:5px;
  border-bottom:1px solid var(--line);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.вход-шапка .вход-значок{flex:none;width:20px}
.вход-уст{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--line)}
.вход-уст .марка{flex:none;width:20px;height:20px;vertical-align:0}
/* Часы моноширинные: столбцы стоят столбцами, и строки сравниваются взглядом,
   а не чтением. */
.вход-когда{flex:1;min-width:0;font-family:var(--mono);font-size:12px;
  letter-spacing:.01em;color:var(--ink-2)}
.вход-когда.справа{text-align:right}
/* Третье устройство и дальше: телефон и компьютер — это два, остальное
   и есть повод спросить. */
.вход-уст.лишнее .вход-когда{color:var(--oxblood)}
.вход-уст.лишнее .марка{color:var(--oxblood)}
body.night .вход-уст.лишнее .вход-когда,
body.night .вход-уст.лишнее .марка{color:#B9583F}
.вход-пусто{font-size:12.5px;color:var(--fog);margin-top:9px}

/* Перевыпуск гасит чужой вход, и первой, на что падает палец, ему быть
   незачем: серой коробкой он тянул на себя весь взгляд и повторялся под
   каждым из двадцати двух домов. Строчка с тонкой чертой — то же нажатие,
   но на своём месте; красным отзывается на касание, по тому, что делает. */
.вход-снять{font:inherit;font-size:11.5px;letter-spacing:.04em;flex:none;
  padding:1px 0;border:none;border-bottom:1px solid var(--line);
  background:none;color:var(--fog);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.вход-снять:active{color:var(--oxblood);border-bottom-color:var(--oxblood)}

/* Код — по центру и в разрядку: его сверяют по знакам и диктуют вслух.
   Рамка пунктиром говорит, что это не просто текст, но и не кнопка действия:
   нажатие уносит ссылку в буфер и ничего не меняет. */
.вход-код{font:inherit;font-family:var(--mono);font-size:15px;letter-spacing:.16em;
  margin-top:10px;padding:9px 10px;width:100%;text-align:center;cursor:pointer;
  color:var(--ink-2);background:none;border:1px dashed var(--line);
  -webkit-tap-highlight-color:transparent}
.вход-код:active{border-style:solid;border-color:var(--sea-deep);color:var(--sea-deep)}
/* Ссылка в подвале входа — длинная строка, и переносить её надо по любому
   знаку: иначе она вылезает за край экрана вместе со скроллом всей страницы. */
.вход .flash{margin-top:7px;text-align:center;word-break:break-all;line-height:1.4}

/* Заведение стоит последним в своей складке и отделено от списка так же,
   как входы друг от друга: это её часть, а не новый раздел. */
.завести{border-top:1px solid var(--line);margin-top:4px;padding-top:16px}
.завести-h{font-family:var(--display);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);font-weight:600;margin:0 0 8px}

/* ===== камера =====================================================
   Экран во всю высоту, поверх всего. Снимают на палубе и на солнце,
   и приложение под кадром только мешает: видно должно быть то, что
   в объективе, а не биржу под ним.
   Тёмный, в отличие от всего приложения: на светлой бумаге кадр с
   камеры выглядит вырезанным из другого приложения, а тут он и есть
   всё, что показывает экран. */
.cam{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:var(--ink);color:var(--paper);
  padding-top:max(10px,env(safe-area-inset-top));
  padding-bottom:max(12px,env(safe-area-inset-bottom))}
.cam[hidden]{display:none}
.cam-h{display:flex;align-items:center;gap:10px;padding:4px 14px 10px}
.cam-task{font-size:13px;color:var(--paper);flex:1;line-height:1.3}
.cam-x{font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid rgba(237,231,218,.42);color:var(--paper);
  padding:8px 12px;-webkit-tap-highlight-color:transparent}

/* Кадр занимает всё, что осталось между шапкой и кнопками. contain, а не
   cover: обрезать кадр, который дом сейчас отправит организатору, нельзя —
   в срезанной половине окажется ровно то, за чем ходили. */
.cam-view{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:#000;overflow:hidden}
.cam-view > *{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cam-view > [hidden]{display:none}

.cam-note{font-size:13px;color:rgba(237,231,218,.72);text-align:center;
  margin:0;padding:10px 16px 0;min-height:19px}

/* Режим съёмки. Две вкладки над кнопкой: в одном ряду с ней они не влезали
   на экране в 375 точек и переносились второй строкой. */
.cam-режим{display:flex;justify-content:center;gap:0;padding:12px 16px 0}
.cam-режим[hidden]{display:none}
.cam-таб{font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid rgba(237,231,218,.42);color:rgba(237,231,218,.72);
  padding:9px 18px;-webkit-tap-highlight-color:transparent}
.cam-таб + .cam-таб{border-left:none}
.cam-таб.on{background:rgba(237,231,218,.16);color:var(--paper);
  border-color:rgba(237,231,218,.7)}

.cam-bar{display:flex;align-items:stretch;justify-content:center;gap:10px;
  padding:12px 16px 0}
/* Обе кнопки одного роста и одного начертания: «Переснять» и «Отправить»
   стоят рядом, и разный кегль с разным регистром читались как разные по
   важности. Отличаются только заливкой — этого хватает, чтобы понять, какая
   из них главная.

   Рамка есть у обеих, в том числе у залитой, — иначе она была бы на два
   пикселя ниже соседки. */
.cam-bar .btn,
.cam-bar .chip-btn{flex:1;font:inherit;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;padding:13px 10px;align-self:auto;cursor:pointer}
/* Кнопки на тёмном: обычные светлые тут исчезают. */
.cam-bar .btn{background:var(--paper);color:var(--ink);border:1px solid var(--paper)}
.cam-bar .btn:active{background:var(--paper-2);border-color:var(--paper-2)}
.cam-bar .chip-btn{background:none;color:var(--paper);
  border:1px solid rgba(237,231,218,.42)}
.cam-bar .chip-btn:active{background:rgba(237,231,218,.12)}
.cam-bar [hidden]{display:none}
/* «Сохранить себе» — строчкой под кнопками, без рамки: это не третье
   равноправное действие, а то, что делают заодно с отправкой. */
.cam-себе{display:block;margin:10px auto 0;font:inherit;font-size:13px;
  background:none;border:none;color:rgba(237,231,218,.72);
  border-bottom:1px solid rgba(237,231,218,.42);padding:2px 0;
  -webkit-tap-highlight-color:transparent}
.cam-себе[hidden]{display:none}
.cam-себе:active{color:var(--paper);border-bottom-color:var(--paper)}
/* Идёт запись. Красная кнопка — единственное место в приложении, где цвет
   означает «сейчас пишется», и спутать её с обычной нельзя. */
.cam-bar .btn.пишет{background:var(--oxblood);color:var(--paper)}
.cam-bar .btn.пишет:active{background:#5E1A1A}

/* ===== снятое по заданию ==========================================
   Строка под заданием: что приложено и где оно сейчас. */
.снято{display:flex;align-items:center;gap:10px;margin-top:9px}
.снято img,.снято video{width:62px;height:62px;object-fit:cover;
  border:1px solid var(--line);background:var(--paper-2);flex:none}
.снято-текст{font-size:13px;color:var(--ink-2);line-height:1.4;flex:1}
.снято-текст b{color:var(--ink);font-weight:600}
/* Второй путь под кнопкой: снять здесь же, в приложении. Строчкой и мельче —
   он нужен редко, когда ролик из библиотеки слишком тяжёл для связи на воде. */
.снять-здесь{display:block;margin:10px 0 0;font:inherit;font-size:13px;
  background:none;border:none;padding:2px 0;color:var(--fog);
  border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent}
.снять-здесь:active{color:var(--sea-deep);border-bottom-color:var(--sea-deep)}

/* Ждёт отправки — то же латунное предупреждение, что и у очереди действий:
   дом должен понять, что дело не закончено. */
.снято-текст .ждёт{color:var(--brass)}
.снято-текст .отказ{color:var(--oxblood)}

/* ===== зачёты в техничке =====
   Список домов с отметкой, по два в ряд: двадцать два имени россыпью кнопок
   складывались в неровные ряды, и найти нужный дом значило прочитать все. */
.зачёты{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-top:4px}
.зачёт{display:flex;align-items:center;gap:8px;width:100%;padding:7px 0;
  font:inherit;font-size:13px;text-align:left;background:none;border:none;
  color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.зачёт i{width:19px;height:19px;flex:none;display:flex;align-items:center;
  justify-content:center;border:1.5px solid var(--line);color:transparent}
/* Зачтено — морская заливка и белая галка. Тот же цвет, что у отметок
   в админке организатора: одно действие, один знак. */
.зачёт.on{color:var(--ink)}
.зачёт.on i{background:var(--sea);border-color:var(--sea);color:var(--paper)}
.зачёт:active i{border-color:var(--sea-deep)}
.зачёт span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== супер-игра: мелодия флота (4.10) =====
   Отрывки на обороте камней, своя строчка, строчки флота по местам. Вёрстка
   из макета mockups/гимн-флота.html, цвет по-прежнему значит состояние:
   нажатый камень светлее, неверный порядок красный, строчка не на своём
   месте красная, соседи по мелодии связаны бирюзовой скобой. */
.slot.нота{position:relative;font-family:var(--body);line-height:1}
.slot.нота svg{display:block}
/* Номер нажатия — внизу справа и с отступом: вверху справа он прилипал к краю
   камня, а отступ вглубь сталкивал его с ребром двух нот. */
.slot.нота small{position:absolute;bottom:8px;right:13px;font-family:var(--mono);font-size:10px;
  line-height:1;color:#E6CD9C}
.slot.нота.нажат{background:var(--sea);border-color:var(--sea)}
.slot.нота.звучит{transform:translateY(-3px)}
.word.верно .slot.нота{background:var(--sea-deep);border-color:var(--sea-deep)}
.slot.нота.играет,.word.верно .slot.нота.играет{background:var(--sea);border-color:var(--sea);
  transform:translateY(-5px)}
.word.мимо .slot.нота{background:var(--oxblood);border-color:var(--oxblood)}
.slot.нота[disabled]{cursor:default}
.мел-след{display:flex;justify-content:flex-end;align-items:center;min-height:30px;margin:-4px 0 6px}
.мел-след .мимо-т{margin-right:auto;font-size:13px;color:var(--oxblood)}
.мел-след .заново{margin-left:auto;background:none;border:none;font:inherit;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sea-deep);cursor:pointer;padding:6px 0}
.мел-след.мимо .заново{color:var(--oxblood)}
.мел-след .заново[disabled]{color:var(--fog);cursor:default}
/* Кнопки — друг под другом и во всю ширину: вдвоём в строку подписи
   переносились на две строки и читались хуже. */
.мел-ряд{display:flex;flex-direction:column;gap:8px}
.мел-ряд .btn{width:100%;margin:0}
#s-melody .btn[disabled]{opacity:.35;cursor:default}

.мел-собрана{border:1.5px solid var(--sea-deep);padding:12px 14px;margin:14px 0 4px;
  font-family:var(--display);font-size:18px;color:var(--sea-deep)}
/* Полученные строчки — по две в ряд на всю ширину: россыпью плашек разной
   длины имена стояли неровно, и искать нужное приходилось глазами по строкам. */
.мел-лоток{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 6px}
.мел-лоток button{font:inherit;font-size:13.5px;padding:10px 8px;border:1px solid var(--sea-deep);
  background:none;color:var(--sea-deep);cursor:pointer;border-radius:2px;width:100%;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.мел-лоток button.новая{background:#DCE8E3}
.мел-лоток button.выбран{background:var(--sea-deep);color:var(--paper)}
.мел-строки{border-top:1px solid var(--line)}
.мел-строка{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;
  padding:6px 4px;background:none;border:none;border-bottom:1px solid var(--line);
  font:inherit;text-align:left;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent}
.мел-строка .нм{width:112px;flex:none;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.мел-строка .нм small{color:var(--fog);font-size:12px}
.мел-строка .ролл{flex:1;position:relative;height:26px}
.мел-строка .ролл i{position:absolute;height:6px;border-radius:3px;background:var(--sea-deep)}
.мел-строка.пусто{cursor:default}
.мел-строка.пусто .ролл::before{content:'';position:absolute;left:0;right:0;top:12px;
  border-top:1.5px dashed var(--line)}
.мел-строка.цель.пусто .ролл::before{border-top-color:var(--brass)}
.мел-строка.свой .ролл i{background:var(--sea)}
/* Серая — строчку поставили, а на этом месте она ещё не звучала: верно ли
   стоит, экран скажет, когда до неё дойдёт «Сыграть мелодию». */
.мел-строка.тихо .ролл i{background:var(--fog)}
.мел-строка.выбран{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--brass)}
/* Скоба: две строчки, которые в мелодии идут подряд, связаны слева — от
   середины одной до середины другой. Верного места она не называет, только
   то, что эти двое соседи. */
.мел-строка.дальше::before,.мел-строка.раньше::after{content:'';position:absolute;left:-9px;
  width:3px;background:var(--sea)}
.мел-строка.дальше::before{top:50%;bottom:-1px}
.мел-строка.раньше::after{top:0;height:50%}
.мел-строка.дальше{border-bottom-color:#D9D3C3}
.мел-строка.мимо .нм{color:var(--oxblood)}
.мел-строка.мимо .ролл i{background:var(--oxblood)}
.мел-строка.звучит .ролл i{background:var(--brass)}

.мел-выбор{position:fixed;left:0;right:0;z-index:21;background:var(--ink);color:var(--paper);
  bottom:calc(47px + max(env(safe-area-inset-bottom),var(--низ,0px)))}
.мел-выбор .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px;font-size:13px}
.мел-выбор span{flex:1}
.мел-выбор button{background:none;border:1px solid #6B7A7C;color:var(--paper);padding:6px 10px;
  font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

.мел-покров{position:fixed;inset:0;background:rgba(19,28,31,.45);z-index:40;display:flex;align-items:flex-end}
.мел-лист{background:var(--paper);width:100%;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.мел-лист .wrap{padding-top:18px;display:grid;gap:12px}
.мел-лист h3{font-family:var(--display);font-size:20px;margin:0}
.мел-код{font-family:var(--mono);font-size:32px;letter-spacing:.12em;color:var(--ink)}
.мел-ярлык{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--fog)}
.мел-лист input{font-family:var(--mono);font-size:22px;letter-spacing:.12em;padding:10px 12px;
  border:1px solid var(--line);background:#F6F2E9;width:100%;color:var(--ink);box-sizing:border-box}
.мел-лист .flash.принято{color:var(--sea-deep)}
@media (prefers-reduced-motion:reduce){.slot.нота,.мел-строка{transition:none}}
#s-melody h2 .счёт{text-transform:none}
/* Поле названия — финиш супер-игры: латунная рамка, как всё, что зовёт
   к действию; названное — морская. */
.мел-имя{border:1.5px solid var(--brass);padding:14px;margin:4px 0 14px}
.мел-имя.названо{border-color:var(--sea-deep)}
.мел-маска{font-family:var(--mono);font-size:18px;letter-spacing:.16em;word-spacing:.3em;
  color:var(--ink);margin:6px 0 10px;overflow-wrap:anywhere}
.мел-имя.названо .мел-маска{letter-spacing:.04em;word-spacing:0;font-family:var(--display);color:var(--sea-deep)}
.мел-имя .form{margin-top:4px}
.мел-браво{font-size:14px;line-height:1.45;color:var(--ink-2);margin:0}
.мел-браво b{display:block;font-family:var(--display);font-weight:400;font-size:17px;
  color:var(--ink);margin-bottom:3px}