/* ===== Chesswood History Panel (final: linia po linii jak WHITE) ===== */

.cw-history-panel{
  margin-top: 30px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 10px;

  max-width: var(--cw-board-width, 520px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  overflow-x: hidden; /* twardo przeciw poziomemu scrollowi */
}

@media (max-width: 768px){
  .cw-history-panel{ margin-top: 22px; }
}

@media (min-width: 769px){
  .cw-history-panel{ max-width: var(--cw-board-maxw, 90vw); }
}

.cw-history-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cw-history-header h2,
.cw-history-header h3{
  margin:0;
  font-size:16px;
  font-weight:600;
}
.cw-history-buttons{
  display:flex;
  gap:6px;
  align-items:center;
}
.cw-btn{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#f5f5f5;
  cursor:pointer;
  font-size:13px;
  line-height:1;
}
.cw-history-panel .cw-history-buttons .cw-btn-live{
  color:#1e7cff !important;
  font-weight:600;
}

/* MOVELIST */
#cw-movelist{
  list-style:none;
  margin:0;
  padding:0;
  max-height:260px;
  overflow-y:auto;
  overflow-x:hidden;
}

/* 1 półruch = 1 linia */
#cw-movelist li.cw-move-line{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:transparent;
  width:100%;
  box-sizing:border-box;
  cursor:pointer;
  user-select:none;
  min-width:0;
}
#cw-movelist li.cw-move-line:hover{
  background:rgba(0,0,0,.03);
}

/* kiedy fokus jest na wierszu, niech wygląda jak interaktywny element */
#cw-movelist li.cw-move-line:focus{
  outline:2px solid #0b82ff;
  outline-offset:2px;
}

/* wewnętrzny przycisk jest tylko „etykietą” — klik łapie cały <li> */
#cw-movelist li.cw-move-line .cw-move{
  pointer-events:none;
}

/* numer "1." / "1..." */
#cw-movelist li.cw-move-line .mv-no{
  min-width:44px;
  color:#666;
  opacity:.8;
  flex:0 0 auto;
}

/* ruch jako tekst-klikalny */
#cw-movelist li.cw-move-line .cw-move{
  appearance:none;
  -webkit-appearance:none;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;

  font:inherit !important;
  font-weight:400 !important; /* niewytłuszczone */
  color:inherit !important;
  cursor:pointer;

  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:left;
}
#cw-movelist li.cw-move-line .cw-move:hover{
  text-decoration:underline;
}

/* czas po prawej */
#cw-movelist li.cw-move-line .mv-clk{
  margin-left:auto;
  color:#666;
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}

/* aktywny ruch */
#cw-movelist li.cw-move-line .cw-move.is-active{
  text-decoration:underline;
  font-weight:600 !important;
}

/* eval */
.cw-eval{
  width:100%;
  height:60px;
  display:block;
  margin-top:8px;
  border-radius:6px;
  background:linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.005));
}

/* tip */
.cw-hist-tip{
  position:absolute;
  left:100%;
  top:50%;
  transform:translate(8px, -50%);
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  padding:4px;
  z-index:99;
}
.cw-hist-tip img{
  display:block;
  width:auto;
  height:auto;
  max-width:160px;
  max-height:160px;
  border-radius:6px;
}

/* a11y focus */
#cw-movelist li:focus{
  outline:2px solid #0b82ff;
  outline-offset:2px;
}
#cw-movelist li.cw-move-line .mv-ev{
  margin-left: auto;            /* eval pierwsze od prawej */
  min-width: 64px;
  text-align: right;
  color: #0b82ff;               /* możesz zostawić neutralny jeśli wolisz */
  font-variant-numeric: tabular-nums;
}

#cw-movelist li.cw-move-line .mv-clk{
  min-width: 56px;
  text-align: right;
  color: #666;
  font-variant-numeric: tabular-nums;
}

/* ===== REPLAY MODE (ONLY): stabilny rozmiar planszy podczas podglądu historii =====
   Cel: replay ma wyglądać jak normalna plansza (gra / koniec gry),
   ale NIE ruszamy solo/PvP ani endgame overlay.
   Aktywujemy wyłącznie gdy cw.history.js doda html.cw-replay-mode.
*/
html.cw-replay-mode{
  /* desktop: jak standard (520px), mobile: płynnie, ale bez "giganta" */
  --board-size: clamp(320px, 90vw, 520px);
}