/* Доска, клетки, подсветка ходов и сами девочки-фигуры */
.board-wrap{position:relative;border:4px solid var(--line);border-radius:6px;background:var(--line);box-shadow:8px 8px 0 var(--shadow)}
.board{
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  aspect-ratio:1;width:100%;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;
}
.sq{position:relative;background:var(--sq-l)}
/* 3D-вид рисуется поверх: 2D-доска остаётся под ним невидимой, чтобы держать размер и принимать клавиатуру */
.board-wrap.is3d .board{opacity:0}
.board3d-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:20;display:block;touch-action:none;cursor:grab}
.board3d-canvas:active{cursor:grabbing}
.sq.dk{background:var(--sq-d)}
.sq::before{content:"";position:absolute;inset:0;pointer-events:none}
.sq.last::before{background:var(--last)}
.sq.sel::before{background:var(--sel)}
.sq.check::before{background:radial-gradient(circle, var(--danger) 0 22%, color-mix(in srgb, var(--danger) 55%, transparent) 42%, transparent 72%)}
.sq.mv::after,.sq.cap::after{content:"";position:absolute;pointer-events:none;z-index:4;border-radius:50%}
.sq.mv::after{left:37%;top:37%;width:26%;height:26%;background:var(--dot)}
.sq.cap::after{inset:4%;box-shadow:inset 0 0 0 5px var(--dot)}
/* Ладья, на которую можно поставить короля для рокировки */
.sq.rk::after{content:"";position:absolute;pointer-events:none;z-index:4;inset:6%;border-radius:22%;border:3px dashed var(--dot)}
/* Часы над и под доской; активные подсвечены цветом команды, последние 20 секунд — красным */
.clock{
  --team:var(--dawn);
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:5px 6px 5px 6px;border:3px solid var(--line);border-radius:10px;
  background:var(--surface);box-shadow:4px 4px 0 var(--shadow);
}
.clock[data-c="b"]{--team:var(--dusk)}
#clockTop{margin-bottom:14px}
#clockBot{margin-top:18px}
.ck-face{width:34px;height:34px;border:2px solid var(--line)}
.ck-name{flex:1;min-width:0;font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-time{
  flex:none;min-width:5.2em;text-align:center;
  font-family:var(--font-mono);font-weight:700;font-size:22px;line-height:1;font-variant-numeric:tabular-nums;
  padding:7px 10px;border-radius:7px;background:color-mix(in srgb, var(--ink) 8%, var(--surface));
}
.clock.on{background:color-mix(in srgb, var(--team) 16%, var(--surface))}
.clock.on .ck-time{background:var(--ink);color:var(--surface)}
.clock.low .ck-time{color:var(--danger)}
.clock.on.low .ck-time{background:var(--danger);color:#FFFFFF}
/* Ширина доски: столько, чтобы доска вошла в окно по высоте, умноженное на выбранный размер (ползунок «Размер доски»),
   но не шире, чем помещается рядом с правой колонкой. С часами над и под доской места по высоте меньше. */
body{--bfit:calc(100vh - 240px);--bw:max(320px, min(calc(var(--bfit) * var(--bscale, 1)), calc(100vw - 430px)))}
body.timed{--bfit:calc(100vh - 370px)}

.sq.hover{box-shadow:inset 0 0 0 4px var(--accent)}
.board:focus-visible .sq.cursor{box-shadow:inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--surface)}
.cr,.cf{position:absolute;z-index:5;font-family:var(--font-mono);font-weight:700;font-size:clamp(8px, 1.5vw, 11px);line-height:1;pointer-events:none;color:var(--coord-l)}
.sq.dk .cr,.sq.dk .cf{color:var(--coord-d)}
.cr{left:5%;top:5%}
.cf{right:6%;bottom:5%}

.piece{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:center}
.board.mine-w .piece[data-c="w"],.board.mine-b .piece[data-c="b"]{cursor:grab}
.piece .art{
  width:96%;height:96%;max-width:none;display:block;object-fit:contain;object-position:50% 100%;
  pointer-events:none;user-select:none;-webkit-user-drag:none;transform-origin:50% 100%;
  filter:drop-shadow(0 1px 1.5px rgba(42,26,44,.35));
}
.piece.dragging{z-index:30;cursor:grabbing;pointer-events:none}
.piece.dragging .art{filter:drop-shadow(0 10px 6px rgba(42,26,44,.35))}
/* «Живые» фигуры: дыхание с покачиванием (у каждой своя фаза), разворот по ходу; тяжёлые ладьи дышат медленнее */
.piece[data-face="l"] .art{scale:-1 1}
.piece:not(.dragging) .art{animation:breathe var(--br, 2.9s) ease-in-out var(--ph, 0s) infinite}
.piece[data-t="r"]{--br:4.4s}
.piece[data-t="p"]{--br:2.4s}
@keyframes breathe{0%,100%{transform:scale(1,1) skewX(0deg)}25%{transform:scale(.992,1.018) skewX(-.9deg)}75%{transform:scale(1.006,.994) skewX(.9deg)}}
.sq.sel .piece:not(.dragging) .art{animation:hop 1s ease-in-out infinite}
.piece.appear .art{animation:appear .34s cubic-bezier(.2,.9,.3,1.3)}

/* Подпись фигуры русской буквой нотации; цвета команды одинаковы в обеих темах */
.badge{position:absolute;top:4%;right:4%;z-index:3;font-family:var(--font-mono);font-weight:700;font-size:clamp(7px, 1.4vw, 10px);line-height:1;padding:2px 3px;border-radius:3px;border:1px solid #2A1A2C}
.badge.w{background:#FFFFFF;color:#2A1A2C}
.badge.b{background:#2A1A2C;color:#FFFFFF}
.board.no-badges .badge{display:none}

.piece.alarm::after{
  content:"!";position:absolute;top:3%;left:6%;z-index:6;width:30%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--danger);color:#FFFFFF;border:2px solid #2A1A2C;
  font-family:var(--font-display);font-size:clamp(10px, 2.2vw, 17px);line-height:1;
  animation:shake .45s ease-in-out infinite alternate;
}

@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-7%)}}
@keyframes appear{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes shake{from{transform:rotate(-12deg)}to{transform:rotate(12deg) scale(1.08)}}