/* 2. Лаборатория правил */
/* minmax(0, …): ряд готовых наборов прокручивается внутри панели, а не распирает её на узком экране */
.lab-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
#lab-err:empty, #lab-err:has(> .error[hidden]) { display: none; }
.lab .preset { min-height: 44px; }
.lab-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
/* В кнопке обе надписи в одной клетке сетки, видна одна: ширина одинаковая и ряд не перестраивается */
.lab-two { font-weight: 700; display: inline-grid; place-items: center; white-space: nowrap; }
.lab-two > span { grid-area: 1 / 1; }
.lab-two > span + span, .lab-two.off > span:first-child { visibility: hidden; }
.lab-two.off > span + span { visibility: visible; }
.lab-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.lab-n { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 15rem; min-width: 0; }
.lab-n label { white-space: nowrap; }
.lab-n input[type="range"] { flex: 1; min-width: 6rem; height: 44px; margin: 0; cursor: pointer; }
.lab-n output { min-width: 2.2em; font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; text-align: right; }

.lab-main { display: grid; gap: 1rem; margin-top: 0.4rem; }
.lab-board { min-width: 0; display: grid; gap: 0.5rem; align-content: start; }
.lab-side { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
@media (min-width: 900px) {
  .lab-main { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
  .lab-side { position: sticky; top: 4rem; }
}
@media (max-width: 899px) {
  .lab-info { order: -1; }
}

/* Строка «что изменилось» — над лентой и сводкой во всю ширину; кнопка «Убрать ▲▼» — в конце текста */
.lab-diff { display: flex; align-items: center; min-height: 44px; margin-top: 0.6rem; font-size: 1.05rem; }
.lab-diff p { margin: 0; }
.lab-diff .set { font-weight: 700; white-space: nowrap; }
.nw { white-space: nowrap; }
.dl { color: var(--lose); font-weight: 800; white-space: nowrap; }
.dw { color: var(--win); font-weight: 800; white-space: nowrap; }
.lab-clear { position: relative; display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 0.85rem; white-space: nowrap; cursor: pointer; vertical-align: 0.05em; }
.lab-clear:hover { border-color: var(--muted); }
.lab-clear[hidden] { display: none; }
.lab-clear::before { content: ""; position: absolute; inset: -9px -4px; } /* зона нажатия не меньше 44px */
.lab-cap { margin: 0; font-size: 0.95rem; }

/* Лента: обёртка с прокруткой для широкого периода; поля — под значки ▲▼, выступающие за клетку */
.lab-grid { overflow-x: auto; padding: 0.7rem 0.6rem; margin: -0.7rem -0.6rem; isolation: isolate; }
.lab-grid .strip.by-cols,
.res-head { grid-template-columns: repeat(var(--cols), minmax(2.2rem, 3.2rem)); justify-content: start; overflow: visible; }
.lab-grid .strip.by-cols .cell { height: 2.4rem; }
.res-head { display: grid; gap: 4px; margin-bottom: 4px; }
.res-head[hidden] { display: none; }
.res-head span { text-align: center; font: 600 0.8rem var(--mono); color: var(--muted); }
.res-head span.l { color: var(--lose); font-weight: 800; }

/* Отметки клеток: ▲ стала В, ▼ стала П — значок на углу клетки.
   Значок выше рамки выбранной клетки (z-index 2), поэтому у самих клеток z-index нет. */
.cell.to-w, .cell.to-l { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9); }
.lab .cell.ring { z-index: 2; }
.cell.to-w::after, .cell.to-l::after {
  position: absolute; z-index: 3; top: -0.6rem; right: -0.5rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1.5px currentColor; font-size: 0.8rem; line-height: 1.15rem;
  text-align: center; font-weight: 900;
}
.cell.to-w::after { content: "▲"; color: var(--win); }
.cell.to-l::after { content: "▼"; color: var(--lose); }
/* Волна: новая буква и значок появляются вместе с новым цветом (после задержки --d), не раньше.
   Для ▲ и ▼ разные имена анимаций — тогда они перезапускаются, когда клетка меняется обратно. */
.cell.to-w { animation: lab-pop-w 0.45s ease var(--d, 0ms) backwards; }
.cell.to-l { animation: lab-pop-l 0.45s ease var(--d, 0ms) backwards; }
.cell.to-w .cl, .cell.to-w::after { animation: lab-rev-w 0.2s step-end var(--d, 0ms) backwards; }
.cell.to-l .cl, .cell.to-l::after { animation: lab-rev-l 0.2s step-end var(--d, 0ms) backwards; }
@keyframes lab-pop-w { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes lab-pop-l { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes lab-rev-w { from { opacity: 0; } }
@keyframes lab-rev-l { from { opacity: 0; } }

/* Предпериод — бледные клетки (тёмный текст, чтобы читалось), исключения — пунктир */
.cell.pre.win { background: var(--win-soft); color: #1e40af; }
.cell.pre.lose { background: var(--lose-soft); color: #9a3412; }
.cell.pre.to-w, .cell.pre.to-l { box-shadow: inset 0 0 0 2px currentColor; }
.cell.exc { outline: 2px dashed var(--ink); outline-offset: -5px; }
.cell.ring.to-w, .cell.ring.to-l { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 3px #fff, 0 0 0 6px var(--ink); }
/* Фокус с клавиатуры — белая рамка внутри клетки, чтобы не путать с чёрной рамкой выбранной */
.lab-grid .cell { cursor: pointer; }
.lab-grid .cell:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.lab-grid .cell.pre:focus-visible { outline-color: var(--ink); }

/* Сводка: период, предпериод, П-остатки, доля П */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; }
.stat { background: var(--panel); border-radius: var(--radius); padding: 0.45rem 0.7rem; display: flex; flex-direction: column; min-width: 0; }
.stat .k { font-size: 0.8rem; color: var(--muted); }
.stat .v { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.stat .v.long { font-size: 1.15rem; line-height: 1.3; }
.stat .was { font-size: 0.8rem; color: var(--muted); }
.stat.changed { box-shadow: inset 0 0 0 2px var(--ink); }

/* Позиция по клику */
.lab-info { display: grid; gap: 0.4rem; align-content: start; }
.lab-info h2 { margin: 0; font-size: 1.35rem; }
.lab-info h2:focus { outline: none; }
.lab-info p { margin: 0; }
.tag { display: inline-block; min-width: 1.4em; padding: 0 0.35em; border-radius: 6px; color: #fff; font-weight: 800; text-align: center; }
.tag.win { background: var(--win); }
.tag.lose { background: var(--lose); }
.lab-moves { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.lab-moves .btn { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.4rem 0.7rem; font-variant-numeric: tabular-nums; }
.lab-moves .btn.good:focus-visible { box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--ink); }
.lab-small { font-size: 0.85rem; }

/* Таблица правила хода */
.rule-wrap { overflow-x: auto; }
.rule-table { border-collapse: collapse; }
.rule-table th, .rule-table td { text-align: left; padding: 0.35rem 0.8rem; border-bottom: 1px solid var(--line); }
.rule-table th { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.rule-table th:first-child { white-space: nowrap; }
.rule-table td:first-child { font-family: var(--mono); font-weight: 700; text-align: center; }
.rule-table tr.cur td { background: #fff4bf; }

/* Крупный шрифт (проектор): панель плотнее — лента начинается выше */
html.big .lab-controls { padding: 0.6rem 0.9rem; gap: 0.5rem; }
html.big .lab-tools > .btn { padding-top: 0.2rem; padding-bottom: 0.2rem; }
html.big .lab-diff { margin-top: 0.3rem; }
/* Клетки ленты ниже, шрифт тот же: на 1024×768 лента после смены ходов видна целиком (телефон — ниже, 44px) */
@media (min-width: 641px) {
  html.big .lab .strip:not(.by-cols) { grid-template-columns: repeat(auto-fill, minmax(2.3rem, 1fr)); }
  html.big .lab .strip:not(.by-cols) .cell { height: 2.5rem; }
}

@media (max-width: 640px) {
  /* Две кнопки делят первый ряд, ползунок — второй */
  .lab-tools > .btn { flex: 1 1 0; align-self: stretch; padding-left: 0.6rem; padding-right: 0.6rem; }
  .lab-n { flex-basis: 100%; }
  /* Готовые наборы — одной строкой с прокруткой */
  .lab .presets { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 4px; margin: -2px -2px -4px; }
  .lab .preset { flex: none; }
  /* Клетки — не меньше 44px под палец */
  .lab .strip { grid-template-columns: repeat(auto-fill, minmax(max(44px, 2.3rem), 1fr)); }
  .lab .cell { height: max(44px, 2.6rem); }
  .lab-grid .strip.by-cols,
  .res-head { grid-template-columns: repeat(var(--cols), minmax(max(44px, 2.2rem), 3.2rem)); }
  .lab-grid .strip.by-cols .cell { height: max(44px, 2.4rem); }
  .rule-table th, .rule-table td { padding: 0.35rem 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cell.to-w, .cell.to-l, .cell.to-w .cl, .cell.to-l .cl, .cell.to-w::after, .cell.to-l::after { animation: none; }
}