/* ============================================================
   Шахматы — доска, часы и витрина
   ============================================================ */

.chess-stage{display:grid;grid-template-columns:1fr 300px;gap:0;min-height:560px}
.chess-board-side{display:flex;flex-direction:column;gap:12px;padding:22px 26px;align-items:center}
.chess-side{display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-left:1px solid var(--line);background:var(--surface-2)}

/* ---------- Игроки и часы ---------- */
.chess-player{width:min(560px,100%);display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-sm)}
.chess-player div{display:flex;flex:1;min-width:0;flex-direction:column}
.chess-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.chess-player small{min-height:18px;color:var(--muted);font-size:15px;line-height:1.2;letter-spacing:-1px}
.chess-avatar{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#f2f0ff;color:var(--ink);font-size:14px;font-weight:700;box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--line-strong)}
.chess-avatar.black-side{background:var(--ink);color:#fff}
.chess-clock{min-width:78px;padding:6px 0;border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;transition:background .2s,color .2s}
.chess-clock.active{background:var(--ink);color:#fff}
.chess-clock.low{background:var(--coral);color:#fff}

/* ---------- Доска ---------- */
.chess-board-wrap{position:relative;width:min(560px,100%)}
/* Деревянная рамка: два кольца тени вместо картинки, чтобы ничего не грузить. */
.chess-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;overflow:hidden;border-radius:10px;box-shadow:0 0 0 7px #6b4a35,0 0 0 9px #9a7a5e,0 22px 40px rgba(28,32,48,.3);margin:9px}
.chess-cell{position:relative;display:grid;place-items:center;border:0;padding:0;line-height:1;cursor:pointer;transition:background .12s;overflow:visible}
.chess-cell.light{background:#f0e6d6}
.chess-cell.dark{background:#b58863}
.chess-cell.last{background:#f4e08a}
.chess-cell.dark.last{background:#d8c05c}
.chess-cell.selected{background:#9fd48f}
.chess-cell.dark.selected{background:#7cb96c}
.chess-cell.check{background:#ff8b7c;animation:chessCheck 1s ease-in-out infinite}
@keyframes chessCheck{50%{background:#ffb8ad;box-shadow:inset 0 0 0 4px rgba(229,72,77,.55)}}
/* Подсказка хода: точка на пустой клетке, кольцо на клетке со взятием. */
.chess-cell.move:after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(28,32,48,.28);animation:chessHint .3s cubic-bezier(.2,.9,.3,1.4)}
.chess-cell.capture:after{content:"";position:absolute;inset:6%;border-radius:50%;border:4px solid rgba(28,32,48,.32);animation:chessHint .3s cubic-bezier(.2,.9,.3,1.4)}
@keyframes chessHint{from{scale:.4;opacity:0}}
.chess-piece{width:86%;height:86%;overflow:visible;transition:transform .18s;pointer-events:none}
.chess-cell.selected .chess-piece{transform:translateY(-6%) scale(1.08)}
.cp-white{fill:#f7f3ea;stroke:#3b352e;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 3px 2px rgba(0,0,0,.28))}
.cp-black{fill:#2e2b36;stroke:#121118;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.cp-detail{fill:none;stroke-width:1.5}
.cp-white .cp-detail{stroke:#3b352e}
.cp-black .cp-detail{stroke:#8a869c}
.cp-cross{fill:none;stroke-width:2.6}
.cp-white .cp-eye{fill:#3b352e;stroke:none}
.cp-black .cp-eye{fill:#cfcbe0;stroke:none}
/* Съеденная фигура растворяется на месте взятия. */
.chess-capture-ghost{position:fixed;z-index:50;display:grid;place-items:center;pointer-events:none;animation:chessCaptured .45s ease-out forwards}
.chess-capture-ghost .chess-piece{width:86%;height:86%}
@keyframes chessCaptured{to{scale:.2;opacity:0;rotate:25deg}}
/* Номер горизонтали в левой колонке клеток, буквы — полосой под доской. */
.chess-cell:before{content:attr(data-file);position:absolute;left:3px;top:2px;font-size:10px;font-weight:700;opacity:.45}
.chess-files{display:grid;grid-template-columns:repeat(8,1fr);width:100%;margin-top:4px;padding:0 9px;color:var(--muted);font-size:11px;font-weight:700;text-align:center}
.chess-overlay{position:absolute;z-index:10;inset:0;display:grid;place-items:center;padding:16px;background:rgba(240,242,245,.78);border-radius:var(--r)}
.chess-player small .chess-piece{width:15px;height:15px;vertical-align:-3px;filter:none;margin-right:-3px}
.chess-player small .cp-white,.chess-player small .cp-black{filter:none;stroke-width:2}
.chess-clock.low.active{animation:chessLow 1s ease-in-out infinite}
@keyframes chessLow{50%{background:#ff9a8a}}

/* ---------- Боковая колонка ---------- */
.chess-status{padding:12px 14px;border-radius:var(--r);background:#fff;font-size:15px;font-weight:600;box-shadow:var(--shadow-sm)}
.chess-status.my-turn{background:var(--green-soft);color:var(--green-ink)}
.chess-draw-offer{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--r);background:var(--amber-soft);font-size:13px;font-weight:600}
.chess-draw-offer div{display:flex;align-items:center;gap:12px}
.chess-draw-offer .primary-link{min-height:36px;padding:0 14px;font-size:13px}
.chess-history{flex:1;min-height:160px;max-height:320px;overflow-y:auto;padding:10px;border-radius:var(--r);background:#fff}
.chess-history-empty{color:var(--faint);font-size:13px;text-align:center;padding:20px 0}
.chess-history-row{display:grid;grid-template-columns:32px 1fr 1fr;gap:6px;padding:4px 6px;border-radius:8px;font-size:13px}
.chess-history-row:nth-child(odd){background:var(--surface-2)}
.chess-history-row i{color:var(--faint);font-style:normal;font-size:12px}
.chess-history-row b{font-weight:700}
.chess-controls{display:flex;flex-direction:column;gap:8px}
.chess-controls .ghost-button{width:100%;justify-content:center}

/* ---------- Диалог превращения ---------- */
.chess-promotion{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.chess-promotion-choice{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;cursor:pointer;transition:border-color .15s}
.chess-promotion-choice:hover{border-color:var(--accent)}
.chess-promotion-choice span{display:block;width:44px;height:44px}
.chess-promotion-choice .chess-piece{width:100%;height:100%}
.chess-promotion-choice small{color:var(--muted);font-size:11px}

/* ---------- Витрина на странице игры ---------- */
.chess-hero-visual{position:relative;display:grid;place-items:center;min-height:400px;padding:30px;border-radius:var(--r-lg);background:linear-gradient(160deg,#efe7dc,#d9c6ae)}
.chess-hero-board{display:grid;grid-template-columns:repeat(8,1fr);width:min(320px,100%);aspect-ratio:1;overflow:hidden;border-radius:14px;box-shadow:0 20px 34px rgba(28,32,48,.3);transform:rotateX(12deg) rotateZ(-3deg)}
.chess-hero-board i{display:grid;place-items:center;font-size:26px;font-style:normal;line-height:1}
.chess-hero-board i.light{background:#f0e6d6}
.chess-hero-board i.dark{background:#b58863}
.chess-hero-board i.w{color:#fff;text-shadow:0 0 1px #2a2a2a,0 1px 0 #2a2a2a,1px 0 0 #2a2a2a,-1px 0 0 #2a2a2a,0 -1px 0 #2a2a2a}
.chess-hero-board i.b{color:#1d1d22}
.chess-hero-clock{position:absolute;right:26px;top:26px;padding:10px 16px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.chess-hero-clock small{display:block;color:rgba(255,255,255,.6);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:900px){
  .chess-stage{grid-template-columns:1fr}
  .chess-side{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .chess-board-side{padding:14px 10px}
  .chess-player{padding:8px 10px;gap:9px}
  .chess-player strong{font-size:13px}
  .chess-avatar{width:32px;height:32px;font-size:12px}
  .chess-clock{min-width:64px;font-size:17px}
  .chess-history{max-height:200px}
}