:root{
  --bg:#0D0B09;
  --ink:#EDE6D8;
  --dim:#948A7A;
  --coffee:#C9873B;
  --foam:#F3E9D2;
  --line:rgba(237,230,216,.16);
  --line-strong:rgba(237,230,216,.34);
  --paper:#171310;
  --mono:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Общая шапка домена вешает shell-offset и сама задаёт padding-top:57px.
   Без шапки (локально) отступа нет — страница начинается сверху. */

.micro{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
}
.micro .dot{opacity:.5;margin:0 6px}
.micro .dim{opacity:.6;letter-spacing:.14em;margin-left:8px}
.micro b{color:var(--ink);font-weight:600}

.hint{
  font-size:11px;
  letter-spacing:.04em;
  color:var(--dim);
  opacity:.75;
}

/* ---------- экран старта ---------- */

.start{
  position:fixed;
  inset:0;
  z-index:40;
  background:var(--bg);
  display:flex;
  /* Не align-items:center: при нехватке высоты (телефон в ландшафте, 812×375)
     центрированный flex выталкивает верх контента в отрицательную область
     прокрутки — к нему не доскроллить, и шапка домена накрывает заголовок.
     Центр даёт margin:auto на .start-inner: при переполнении auto-поля
     обнуляются, контент прижимается к началу и уважает padding под шапку. */
  align-items:flex-start;
  justify-content:center;
  padding:calc(var(--eto-head-h,0px) + 24px) 16px 24px;
  overflow-y:auto;
}
.start[hidden]{display:none}
.start-inner{
  width:100%;
  max-width:520px;
  margin:auto 0;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.wordmark{
  font-size:clamp(44px,14vw,84px);
  font-weight:700;
  letter-spacing:.12em;
  line-height:.95;
  text-transform:uppercase;
  color:var(--foam);
}
.wordmark.small{font-size:clamp(26px,7vw,36px);letter-spacing:.18em}

.lede{
  color:var(--dim);
  font-size:13px;
  line-height:1.65;
  max-width:52ch;
}

/* ---------- каркас ---------- */

.shell{
  max-width:560px;
  margin:0 auto;
  padding:20px 16px 48px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.shell[hidden]{display:none}

.head{display:flex;flex-direction:column;gap:10px}

.panel{
  border:1px solid var(--line);
  background:rgba(255,255,255,.015);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.lbl{display:flex;align-items:baseline;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:10px}
.sub{opacity:.85}

/* ---------- чипы ---------- */

.chips{display:flex;flex-wrap:wrap;gap:8px}

.chip{
  appearance:none;
  min-height:44px;
  padding:10px 13px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--dim);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--foam);outline-offset:3px}
.chip[aria-checked="true"]{
  color:#14100A;
  background:var(--coffee);
  border-color:var(--coffee);
}

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

.go,.btn{
  appearance:none;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .1s ease;
  -webkit-tap-highlight-color:transparent;
}
.go{
  border:1px solid var(--coffee);
  background:var(--coffee);
  color:#14100A;
}
.go.big{min-height:60px;font-size:13px;width:100%}
.go:hover:not(:disabled){background:var(--foam);border-color:var(--foam)}
.go:active:not(:disabled){transform:translateY(1px)}
.go:focus-visible{outline:2px solid var(--foam);outline-offset:3px}
.go:disabled{background:transparent;border-color:var(--line);color:var(--dim);cursor:not-allowed}
.go.playing{background:var(--foam);border-color:var(--foam)}

.btn{
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  width:100%;
}
.btn:hover:not(:disabled){border-color:var(--coffee);color:var(--coffee)}
.btn:focus-visible{outline:2px solid var(--foam);outline-offset:3px}
.btn:disabled{color:var(--dim);border-color:var(--line);cursor:not-allowed}
.btn[aria-pressed="true"],.btn[aria-expanded="true"]{
  background:var(--ink);
  border-color:var(--ink);
  color:#14100A;
}
.btn.ghost{border-style:dashed;color:var(--dim);font-weight:500;letter-spacing:.14em}
.btn.ghost:hover:not(:disabled){color:var(--coffee)}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.actions .mut{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.actions .ghost{grid-column:1 / -1}

/* ---------- ползунки ---------- */

.slider{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-height:48px;
  padding:4px 10px;
  border:1px solid var(--line);
}
.slider.wide{width:100%}
.slider input[type=range]{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:44px;
  margin:-8px 0;
  background:transparent;
  cursor:pointer;
}
.slider input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-strong)}
.slider input[type=range]::-moz-range-track{height:2px;background:var(--line-strong)}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;margin-top:-8px;
  background:var(--coffee);border:0;border-radius:0;
}
.slider input[type=range]::-moz-range-thumb{
  width:18px;height:18px;background:var(--coffee);border:0;border-radius:0;
}
.slider input[type=range]:focus-visible{outline:2px solid var(--foam);outline-offset:3px}

/* ---------- попытка ---------- */

.attempt-head{display:flex;flex-direction:column;gap:6px}
.attempt-title{
  font-size:clamp(15px,4.4vw,18px);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--foam);
  font-variant-numeric:tabular-nums;
}
.attempt-meta{letter-spacing:.12em}

/* полосы весов */
.bars{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:4px;
  height:118px;
}
.bar{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.bar .col{
  flex:1;
  position:relative;
  border:1px solid var(--line);
  background:transparent;
  overflow:hidden;
}
.bar .fill{
  position:absolute;
  left:0;right:0;bottom:0;
  height:0%;
  background:var(--coffee);
  transition:height .18s ease;
}
.bar .g{
  text-align:center;
  font-size:12px;
  color:var(--dim);
  line-height:1;
}
.bar .v{
  text-align:center;
  /* 8.5px с opacity .65 давали ≈3:1 контраста и сливались в серую крошку на
     телефоне — а это единственное место с точным значением веса без легенды.
     Колонка при 375px ≈ 22px, две цифры в 10px (≈12px) влезают. */
  font-size:10px;
  letter-spacing:0;
  color:var(--dim);
  opacity:.9;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
/* На совсем узких экранах цифрам не хватает колонки — лучше спрятать,
   чем снова уменьшать до нечитаемого. Полосы и глифы остаются. */
@media (max-width:360px){.bar .v{display:none}}

/* осциллограф */
.scope-wrap{position:relative;border:1px solid var(--line);height:76px}
.scope{display:block;width:100%;height:100%}
.scope-tag{position:absolute;right:8px;top:6px;opacity:.7;letter-spacing:.16em}
.scope-wrap.live .scope-tag{color:var(--coffee);opacity:1}

/* легенда */
.legend{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 12px;
  padding-top:14px;
  border-top:1px dashed var(--line-strong);
  font-size:11.5px;
  line-height:1.45;
}
.legend[hidden]{display:none}
.legend dt{
  color:var(--coffee);
  font-weight:700;
  white-space:nowrap;
  letter-spacing:.06em;
}
.legend dd{color:var(--ink)}
.legend dd .desc{display:block;color:var(--dim);font-size:10.5px}
.legend .note{grid-column:1 / -1;font-size:10.5px;color:var(--dim);letter-spacing:.06em}

/* ---------- полка ---------- */

.pins{display:flex;flex-wrap:wrap;gap:8px;min-height:24px}
.pin{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--coffee);
  min-height:44px;
}
.pin .pin-play,.pin .pin-x{
  appearance:none;
  background:transparent;
  border:0;
  color:var(--foam);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  padding:0 12px;
  min-width:44px;
  cursor:pointer;
}
.pin .pin-x{border-left:1px solid var(--coffee);color:var(--dim)}
.pin .pin-play:hover,.pin .pin-x:hover{color:var(--coffee)}
.pin.current{background:rgba(201,135,59,.18)}
/* Роль в МЕЖДУ прямо на плашке: иначе при 3–6 закреплённых связь между рядом
   «№0001 × №0002 ×» и селектами A/B приходилось вычитывать по номерам. */
.pin[data-role]::before{
  content:attr(data-role);
  display:flex;
  align-items:center;
  padding:0 8px;
  color:#14100A;
  background:var(--coffee);
  font-size:11px;
  font-weight:700;
}

.between{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px dashed var(--line-strong)}
.between[hidden]{display:none}
.between-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.between-row label{display:flex;flex-direction:column;gap:4px}
.between select{
  appearance:none;
  -webkit-appearance:none;
  min-height:44px;
  border:1px solid var(--line-strong);
  /* appearance:none снимает системную стрелку, и на телефоне селект выглядел
     как статичный текст в рамке — непонятно, что A/B можно менять. Стрелку
     возвращаем своей, в цвете «кофе», без скруглений. */
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9873B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  padding:0 28px 0 10px;
  border-radius:0;
}
.between select:focus-visible{outline:2px solid var(--foam);outline-offset:2px}

/* ---------- карта ---------- */

.map-frame{position:relative;width:100%;aspect-ratio:1 / 1;border:1px solid var(--line)}
.map{display:block;width:100%;height:100%;touch-action:manipulation;cursor:crosshair}
.axis{position:absolute;pointer-events:none;opacity:.6;font-size:9.5px;letter-spacing:.14em}
.axis-x{right:8px;bottom:6px}
.axis-y{left:6px;top:8px;transform-origin:left top;transform:rotate(90deg) translateY(-100%);white-space:nowrap}

/* ---------- протокол: кассовая лента ---------- */

.tape-wrap{display:flex;flex-direction:column;gap:10px}
.tape{
  position:relative;
  background:var(--paper);
  color:var(--foam);
  padding:18px 14px 26px;
  font-size:11.5px;
  line-height:1.5;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line);
}
.tape::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-8px;
  height:8px;
  background:
    linear-gradient(-45deg,transparent 5.6px,var(--paper) 0) 0 0 / 16px 8px repeat-x,
    linear-gradient(45deg,transparent 5.6px,var(--paper) 0) 8px 0 / 16px 8px repeat-x;
}
.tape-head,.tape-foot{text-align:center;text-transform:uppercase;letter-spacing:.12em;font-size:10.5px}
.tape-head p,.tape-foot p{margin:0}
.dashed{border-top:1px dashed rgba(243,233,210,.4);height:0;margin:10px 0 !important}

.entry{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 0;
  border-bottom:1px dashed rgba(243,233,210,.25);
}
.entry.current{background:rgba(201,135,59,.1);margin:0 -6px;padding:10px 6px}
.entry-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.entry .num{font-weight:700;letter-spacing:.14em}
.entry .num.pinned::before{content:"◆ ";color:var(--coffee)}
.entry .time{color:var(--dim)}
.entry .order{text-transform:uppercase;letter-spacing:.1em}
.entry .origin{color:var(--dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.entry .seed{color:var(--dim);font-size:10px;letter-spacing:.06em}

.mini{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:16px;
}
.mini i{
  flex:1;
  display:block;
  background:var(--coffee);
  min-height:1px;
  opacity:.9;
}

.entry-actions{display:flex;gap:8px}
.tbtn{
  appearance:none;
  min-height:44px;
  flex:1;
  border:1px solid rgba(243,233,210,.3);
  background:transparent;
  color:var(--foam);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.tbtn:hover{border-color:var(--coffee);color:var(--coffee)}
.tbtn[aria-pressed="true"]{background:var(--coffee);border-color:var(--coffee);color:#14100A}

/* ---------- плашка хода ---------- */

/* Закреплена внизу, как тост, но ниже него по z-index: тост должен ложиться
   поверх. Пока идёт ХОД, кнопка #walk в панели попытки за кадром — здесь
   виден и сам факт хода, и способ его остановить. */
.walk-bar{
  position:fixed;
  left:16px;right:16px;bottom:16px;
  z-index:65;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 0 0 14px;
  border:1px solid var(--coffee);
  background:var(--bg);
  color:var(--foam);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  max-width:528px;
  margin:0 auto;
  -webkit-tap-highlight-color:transparent;
}
.walk-bar[hidden]{display:none}
.walk-bar-stop{
  display:flex;align-items:center;align-self:stretch;
  padding:0 16px;
  background:var(--coffee);
  color:#14100A;
}
.walk-bar:hover .walk-bar-stop{background:var(--foam)}
.walk-bar:focus-visible{outline:2px solid var(--foam);outline-offset:3px}

/* ---------- подвал, тост ---------- */

.foot{display:flex;justify-content:space-between;gap:12px;opacity:.55;padding-top:6px}

.toast{
  position:fixed;
  left:50%;bottom:22px;
  transform:translate(-50%,8px);
  z-index:70;
  padding:12px 16px;
  background:var(--foam);
  color:#14100A;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  max-width:calc(100% - 32px);
  text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (min-width:480px){
  .actions{grid-template-columns:repeat(3,1fr)}
  .actions .mut{grid-column:1 / -1;grid-template-columns:1fr 2fr}
}

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