/* puzzle.css — доска задач Lichess в кабинете (puzzle.js). */
.pz-dialog {
  width: min(100vw - 24px, 560px); max-width: none; max-height: calc(100dvh - 24px);
  padding: 0; border: 0; border-radius: var(--r-lg, 16px);
  background: var(--surface, #fff); color: var(--ink); overflow: auto;
}
.pz-dialog::backdrop { background: rgba(20, 21, 26, .55); }
@media (max-width: 560px) {
  .pz-dialog { width: 100vw; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
}
.pz-head { display: flex; align-items: center; gap: var(--s2, 8px); padding: var(--s4, 16px) var(--s4, 16px) 0; }
.pz-head h2 { flex: 1; margin: 0; font-size: 1.125rem; }
.pz-body, .pz-connect { padding: var(--s3, 12px) var(--s4, 16px) var(--s4, 16px); }
.pz-body[hidden], .pz-connect[hidden] { display: none; }
.pz-connect p { margin: 0 0 var(--s3, 12px); }
.pz-side { margin: 0 0 var(--s3, 12px); font-weight: 600; }

.pz-board-wrap { position: relative; }
.pz-board {
  display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1;
  width: 100%; border-radius: 6px; overflow: hidden; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none;
}
.pz-sq {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; margin: 0;
  border: 0; border-radius: 0; min-height: 0; cursor: pointer;
}
.pz-light { background: #f0d9b5; }
.pz-dark { background: #b58863; }
.pz-last.pz-light { background: #cdd26a; }
.pz-last.pz-dark { background: #aaa23a; }
.pz-sel { box-shadow: inset 0 0 0 4px rgba(20, 85, 30, .6); }
.pz-check { background: radial-gradient(circle, #ff3b30 0%, rgba(255, 59, 48, .6) 35%, transparent 75%) !important; }
.pz-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 28%; height: 28%;
  transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20, 85, 30, .45);
}
.pz-take::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 5px rgba(20, 85, 30, .45); border-radius: 50%; }
.pz-sq:focus-visible { outline: 3px solid var(--focus, #2f6fed); outline-offset: -3px; }
.pz-pc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pz-pc.pz-lifted { opacity: .25; }
.pz-ghost { position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none; }
.pz-coord { position: absolute; font-size: .625rem; font-weight: 700; line-height: 1; pointer-events: none; }
.pz-rank { left: 2px; top: 2px; }
.pz-file { right: 3px; bottom: 2px; }
.pz-light .pz-coord { color: #b58863; }
.pz-dark .pz-coord { color: #f0d9b5; }

.pz-promo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  display: flex; gap: 6px; padding: 8px; border-radius: 12px; background: var(--surface, #fff);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
.pz-promo[hidden] { display: none; }
.pz-promo-btn { width: 56px; height: 56px; padding: 4px; border: 1px solid var(--line, #ddd); border-radius: 10px; background: #f0d9b5; cursor: pointer; }
.pz-promo-btn img { width: 100%; height: 100%; }

.pz-status { min-height: 1.5em; margin: var(--s3, 12px) 0 0; font-weight: 600; }
.pz-status[data-kind="ok"] { color: var(--ok, #1f7a3a); }
.pz-status[data-kind="err"] { color: var(--danger, #b3261e); }
.pz-acts { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); margin-top: var(--s3, 12px); }
.pz-acts .btn[hidden] { display: none; }
.pz-acts .btn-primary { margin-left: auto; }
.pz-count { margin: 0 0 var(--s2, 8px); padding: var(--s2, 8px) var(--s3, 12px); border-radius: var(--r-md, 12px); background: var(--accent-soft, #fbe9e7); color: var(--accent-ink, #8f1219); font-weight: 700; }
.pz-count[hidden] { display: none; }
.pz-rex { margin: 0 0 var(--s3, 12px); }
.pz-rex[hidden] { display: none; }
.pz-rex p { margin: 0 0 6px; font-size: .9375rem; }
.pz-rex-next { color: var(--muted, #666); }
.pz-rex-bar { height: 8px; border-radius: 999px; background: var(--surface-2, #f3efe7); overflow: hidden; }
.pz-rex-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: #f5a021; transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .pz-rex-bar span { transition: none; } }

.pz-nav { display: flex; align-items: center; gap: var(--s2, 8px); margin-top: var(--s3, 12px); }
.pz-nav[hidden] { display: none; }
.pz-nav-btn { min-width: 44px; min-height: 44px; font-size: 1rem; }
.pz-nav-btn[disabled] { opacity: .4; }
.pz-nav-text { flex: 1; min-width: 0; text-align: center; font-weight: 600; }