/* Вариант 1 «Сначала сыграй»: куча камней, ходы, ход партии, закономерность */
.play {
  --me: #111827;          /* ваши ходы */
  --cpu: #7c3aed;         /* ходы компьютера */
  --cpu-soft: #ede9fe;
  --s: clamp(1.2rem, 7vw, min(2.6rem, 46px));   /* размер камня */
  --gap: max(4px, calc(var(--s) * 0.16));
}
.play [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Настройки: одна строка; на телефоне свёрнуты под кнопку «Настройки» */
.setup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem 1.6rem; margin-bottom: 1rem; }
.fields { display: contents; }
.setup-toggle { display: none; }
.field { display: grid; gap: 0.3rem; min-width: 0; }
.flabel { font-size: 0.9em; font-weight: 600; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.seg .btn { padding: 0.5rem 0.75rem; white-space: nowrap; }
.seg .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper { display: flex; align-items: center; gap: 0.35rem; }
.stepper .btn.sq { width: 44px; padding: 0; font-size: 1.3rem; font-weight: 700; line-height: 1; }
.stepper input { width: 4.4rem; height: 44px; text-align: center; font-size: 1.15rem; font-weight: 700; }
.new-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; }
.pending { font-size: 0.9em; }
/* Проектор (А+): настройки помельче, чтобы уместились в одну строку */
html.big .setup { font-size: 0.86rem; gap: 0.6rem 1.1rem; padding: 0.7rem 1rem; }
html.big .seg .btn { padding: 0.45rem 0.6rem; }
html.big .stepper input { width: 3.6rem; }

/* Партия */
/* Куча слева, ходы справа; если не помещаются рядом — ходы уходят под кучу */
.game { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: flex-start; }
.game-top { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.3rem 1rem; }
.game-top p { margin: 0; }
.rules-line { font-weight: 600; }
.score { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; font-size: 1.05rem; }
.score b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.score .who-cpu { color: var(--cpu); }
.btn.small { min-height: 44px; padding: 0.3rem 0.7rem; font-size: 0.85rem; color: var(--muted); }

.pile-area { flex: 0 0 auto; display: grid; gap: 0.4rem; justify-items: start; }
.count { margin: 0; display: flex; align-items: baseline; gap: 0.45rem; font-size: 1.2rem; font-weight: 600; }
.count .big-number { min-width: 2ch; text-align: right; }
.pile { display: grid; align-content: start; gap: var(--gap); min-width: calc(10.45 * var(--s) + 8 * var(--gap)); min-height: calc(var(--rows, 1) * var(--s) + (var(--rows, 1) - 1) * var(--gap)); }
.pile.empty { min-height: 0; }
.prow { display: flex; gap: calc(var(--s) * 0.45); }
.grp { display: flex; gap: var(--gap); }
.stone {
  display: block; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #e1e5ea 0, #98a1ad 52%, #6b7480 100%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.15s;
}
.stone.new { animation: stone-in 0.35s ease backwards; animation-delay: var(--d, 0ms); }
@keyframes stone-in { from { transform: scale(0.2); opacity: 0; } }
.stone.pick { transform: translateY(-4px); }
.stone.pick.me { background: radial-gradient(circle at 34% 30%, #9ca3af 0, #374151 55%, #111827 100%); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--me); }
.stone.pick.cpu { background: radial-gradient(circle at 34% 30%, #ddd6fe 0, #8b5cf6 55%, #6d28d9 100%); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cpu); }
.stone.gone { opacity: 0; }
.stone.gone.me { transform: translateY(1.6rem) scale(0.3); }
.stone.gone.cpu { transform: translateY(-1.6rem) scale(0.3); }

.side { flex: 1 1 15rem; display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.side > p { margin: 0; }
.status { font-size: 1.2rem; font-weight: 700; min-height: 1.45em; }
.controls { display: grid; gap: 0.6rem; }
.controls[hidden] { display: none; }
.turn { margin: 0; font-weight: 600; color: var(--ok); min-height: 1.45em; }
.turn.cpu { color: var(--cpu); }
.moves { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(3.2rem, 6rem)); gap: 0.5rem; }
.btn.move { display: grid; justify-items: center; gap: 0; padding: 0.35rem 0.2rem; min-height: 4rem; line-height: 1.1; }
.btn.move small { font-size: 0.85rem; color: var(--muted); }
.btn.move b { font-size: 1.7rem; }
.btn.move[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.btn.move:disabled { opacity: 0.25; }
.btn.move.good { outline-width: 4px; background: #effaf2; }
.hint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.btn.toggle[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); background: #effaf2; font-weight: 600; }
.btn.toggle[aria-pressed="true"]::before { content: "✓ "; }
.hint { margin: 0; flex: 1 1 14rem; font-weight: 600; color: var(--ok); }
.hint.none { color: var(--bad); }
.end-title { font-size: 2.2rem; font-weight: 800; line-height: 1.15; }
.end-title:empty, .end-note:empty { display: none; }
.end-title.me { color: var(--ok); }
.end-title.cpu { color: var(--cpu); }

/* Ход партии: позиции и ходы между ними */
.trail-area { flex: 1 1 100%; min-width: 0; }
h2.sub { font-size: 1rem; margin: 0.4rem 0 0.4rem; color: var(--muted); }
.trail { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.25rem; }
.trail .pos {
  display: grid; place-items: center; min-width: 2.7rem; height: 2.9rem; padding: 0 0.25rem;
  border: 2px solid var(--line); border-radius: 7px; background: #fff; line-height: 1.05;
  transition: background-color 0.35s, border-color 0.35s, color 0.35s, opacity 0.2s;
}
.trail .pos b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.trail .pos .pl { font-size: 0.9rem; font-weight: 800; color: var(--muted); }
.trail .pos.win { background: var(--win); border-color: var(--win); color: #fff; }
.trail .pos.lose { background: var(--lose); border-color: var(--lose); color: #fff; }
.trail .pos.win .pl, .trail .pos.lose .pl { color: #fff; }
.trail .pos.mark { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cpu); }
.trail .pos.dim { opacity: 0.35; }
.trail .mv { display: inline-flex; align-items: center; gap: 0.1rem; font-weight: 700; font-size: 0.95rem; color: var(--me); padding: 0 0.1rem; }
.trail .mv.cpu { color: var(--cpu); }
.trail .mv.start { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }
.trail-legend .lg-me { color: var(--me); }
.trail-legend .lg-cpu { color: var(--cpu); }
.trail-legend .ico { vertical-align: -0.12em; }

/* Закономерность */
.reveal { margin-top: 1.4rem; scroll-margin-top: 4rem; }
.reveal > h2 { margin-top: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.steps .btn[aria-current="step"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.steps .btn:disabled { opacity: 0.4; }
.reveal-body { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.reveal-body[hidden] { display: none; }
.reveal-body > p { margin: 0; }
#p-reveal-err:empty { display: none; }
#p-reveal-err .error { margin: 0 0 0.4rem; }
.caption { font-size: 1.2rem; font-weight: 700; }
.caption-sub[hidden] { display: none; }
.reveal-grid { display: grid; gap: 1rem 2rem; align-items: start; min-width: 0; }
.reveal-grid.by-period { display: flex; flex-wrap: wrap; }
.reveal-grid.by-period .strip-wrap { flex: 0 1 auto; max-width: 100%; }
.reveal-grid.by-period .rule-box { flex: 0 0 auto; }
.strip-wrap { min-width: 0; overflow-x: auto; padding: 7px; margin: -7px; }
.strip-wrap .strip.by-cols { overflow: visible; min-width: min-content; }
.strip-wrap .strip.by-cols .cell { height: 2.5rem; }
.col-cap { margin: 0 0 0.2rem; font-size: 0.85rem; }
.col-cap[hidden], .col-head[hidden], .rule-box[hidden] { display: none; }
.col-head { display: grid; grid-template-columns: repeat(var(--cols), minmax(2.6rem, 3.4rem)); gap: 4px; justify-content: start; min-width: min-content; margin-bottom: 4px; }
.col-head span { text-align: center; font-weight: 700; color: var(--muted); border-radius: 6px; padding: 0.1rem 0; }
.col-head span.l { background: var(--lose-soft); color: #9a3412; }
.reveal .cell.ring.cr { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cpu); }
.legend .rg { border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.legend .rg.cr { box-shadow: 0 0 0 2px var(--cpu); }
.rule-table { border-collapse: collapse; font-size: 1.1rem; }
.rule-table caption { text-align: left; font-weight: 700; padding-bottom: 0.3rem; white-space: nowrap; }
.rule-table th { text-align: left; font-size: 0.9rem; color: var(--muted); font-weight: 600; padding: 0.2rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rule-table td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rr { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 7px; color: #fff; font-weight: 800; }
.rr.win { background: var(--win); }
.rr.lose { background: var(--lose); }

/* Телефон (и лёжа): настройки свёрнуты под кнопку «Настройки», кнопки ходов делят ширину поровну */
@media (max-width: 640px), (max-height: 500px) {
  .setup { display: grid; gap: 0.8rem; padding: 0.6rem 0.8rem; }
  html.big .setup { padding: 0.6rem 0.8rem; }
  .new-wrap { order: -1; }
  .setup-toggle { display: inline-block; }
  .setup-toggle::after { content: " ▾"; }
  .setup-toggle[aria-expanded="true"]::after { content: " ▴"; }
  .fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem 1rem; }
  .setup:not(.open) .fields { display: none; }
  .moves { grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); }
}
/* Телефон лёжа: камни мельче, ходы рядом с кучей — всё на одном экране */
@media (max-height: 500px) {
  .play { --s: clamp(1.2rem, 8vh, min(2.6rem, 46px)); }
  .game { column-gap: 1rem; }
  .side { flex-basis: 11rem; }
}
@media (max-width: 640px) {
  .game.panel { padding: 0.8rem; }
  .end-title { font-size: 1.8rem; }
  /* Узкие колонки: 7 столбцов по остатку влезают в ширину телефона и с «А+» */
  .col-head, .strip-wrap .strip.by-cols { grid-template-columns: repeat(var(--cols), minmax(1.8rem, 3.4rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .stone, .trail .pos { transition: none; }
  .stone.new { animation: none; }
}