html{scrollbar-gutter: stable both-edges;}
/* ========== CORE LAYOUT ========== */
.cw-game-root{max-width:1000px;margin:20px auto;padding:12px;border-radius:16px}
.cw-topbar,.cw-bottombar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;position:relative;z-index:10;overflow:visible}

/* --- CW GRAFIKA: bottom bar wrapping ---
   "Pod użytkownikiem" means a new row under the player bar.
   The base layout used flex with no wrapping, which could place controls
   in the same row as the user. Wrapping + full-width user row guarantees
   controls render below.
*/
.cw-bottombar{flex-wrap:wrap;}
.cw-bottombar .cw-player--bottom{flex:0 0 100%; width:100%;}
.cw-bottombar .cw-captures-slot--white{flex:0 0 100%; width:100%;}
/* The anchors live inside the flex bar; they must also be full-width so left/center/right alignment works when controls are appended inside. */
.cw-bottombar .cw-controls-anchor{flex:0 0 100%; width:100%;}

.cw-bottombar .cw-controls-slot{flex:0 0 100%; width:100%; display:flex;}

/* Controls slot (wrapper) is the alignment surface (ONE TRUTH).
   It must be a full-width flex-row so left/center/right works consistently,
   especially when placed "under user" within .cw-bottombar. */
.cw-controls-slot{width:100%; display:flex;}
.cw-player{display:flex;align-items:center;gap:10px}
.cw-player--top{width:100%;justify-content:var(--cw-top-player-justify, flex-start)}
.cw-player--bottom{width:100%;justify-content:var(--cw-bottom-player-justify, flex-start)}
.cw-avatar{width:46px;height:46px;object-fit:cover}
.cw-avatar--circle{border-radius:50%}
.cw-avatar--rounded{border-radius:12px}
.cw-avatar--square{border-radius:0}

/* bazowy klocek zegara (np. wariant kompaktowy) */
.cw-clock{min-width:120px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#fff;padding:2px 8px;border:1px solid #ddd;font-size:12px}
.cw-clock--circle{width:42px;min-width:42px;height:42px;border-radius:50%}

.cw-board-wrap{display:flex;justify-content:var(--cw-board-justify, center);position:relative;margin-top:var(--cw-board-mt, 0px)}
.cw-board{width:var(--cw-board-width, 520px);max-width:var(--cw-board-maxw, 90vw)}

.cw-controls{display:flex;gap:8px;position:relative;z-index:10;overflow:visible}
.cw-controls .cw-btn{padding:6px 12px;border:none;cursor:pointer;transition:transform .05s ease, box-shadow .05s ease}
.cw-controls--rounded .cw-btn{border-radius:10px}
.cw-controls--pill .cw-btn{border-radius:9999px}
.cw-controls--square .cw-btn{border-radius:0}
.cw-btn--solid{background:var(--cw-accent);color:#111}
.cw-btn--outline{background:transparent;border:2px solid var(--cw-accent);color:var(--cw-accent)}
.cw-btn--ghost{background:transparent;color:#333}
.cw-status{margin-top:10px;text-align:left;font-weight:600}

/* ========== HIGHLIGHTS ON BOARD ========== */
.square-legal::after,.square-capture::after,.square-lastmove::after{content:"";position:absolute;inset:0;pointer-events:none}
.square-legal.dot::after{margin:auto;width:18%;height:18%;border-radius:50%;background:var(--cw-move-color,#2aa8ff)}
.square-legal.ring::after{margin:auto;width:36%;height:36%;border:4px solid var(--cw-move-color,#2aa8ff);border-radius:50%}
.square-legal.square::after{margin:auto;width:46%;height:46%;background:var(--cw-move-color,#2aa8ff)}
.square-capture.dot::after{width:86%;height:86%;margin:auto;border-radius:50%;border:6px solid var(--cw-capture-color,#ff3b3b)}
.square-capture.ring::after{width:86%;height:86%;margin:auto;border-radius:10px;border:6px solid var(--cw-capture-color,#ff3b3b)}
.square-capture.square::after{width:86%;height:86%;margin:auto;background:var(--cw-capture-color,#ff3b3b);opacity:.35}
.square-lastmove.square::after{background:var(--cw-lastmove-color,#c8e6ff);opacity:.5}
.square-lastmove.dot::after{margin:auto;width:24%;height:24%;background:var(--cw-lastmove-color,#c8e6ff);border-radius:50%}
.square-lastmove.ring::after{margin:auto;width:46%;height:46%;border:4px solid var(--cw-lastmove-color,#c8e6ff);border-radius:50%}

/* ========== PROFILE / ACTIONS ========== */
.cw-profile-root{max-width:900px;margin:20px auto;padding:12px}
.cw-profile-root .cw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cw-actions{margin-top:16px;display:flex;gap:8px}
.cw-actions .cw-btn{padding:6px 12px;border:none;border-radius:10px}
.cw-actions .cw-btn--solid{background:var(--cw-accent,#d4b07a)}
.cw-actions .cw-btn--outline{background:transparent;border:2px solid var(--cw-accent,#d4b07a);color:var(--cw-accent,#d4b07a)}
.cw-actions .cw-btn--ghost{background:transparent}
.cw-flag{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;font-size:12px;line-height:1;border:1px solid #ddd;border-radius:10px;padding:2px 6px;background:#fff}

/* ========== PROMOTION UI ========== */
.cw-promo-wrap{
  position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(17,17,17,.35); z-index: 40;
}
.cw-promo{
  background:#fff; border-radius:16px; padding:16px 20px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  min-width: 260px; max-width: 90%; text-align:center;
}
.cw-promo__title{ font-weight:600; margin-bottom:10px; }
.cw-promo__row{ display:flex; gap:12px; justify-content:center; align-items:center; }
.cw-promo__opt{ border:none; background:#f1f5f9; padding:8px; border-radius:12px; cursor:pointer; }
.cw-promo__opt:hover{ transform: translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.cw-promo__opt img{ width:54px; height:54px; display:block; }
@media (max-width:640px){
  .cw-promo__opt img{ width:44px; height:44px; }
}

/* ========== LAYOUT ADDITIONS ========== */
.cw-game-root { --line-gap: 8px; }
.cw-topbar, .cw-bottombar, .cw-captures-row, .cw-controls {
  margin-top: var(--line-gap);
  margin-bottom: var(--line-gap);
}
.cw-align-left{ justify-content: flex-start !important; text-align: left; }
.cw-align-center{ justify-content: center !important; text-align: center; }
.cw-align-right{ justify-content: flex-end !important; text-align: right; }
.cw-captures-row{ display:flex; align-items:center; gap:12px; min-height: calc(var(--cap-size,22px) + 4px); }
.cw-controls.cw-justify-space{ justify-content: space-between; }
.cw-controls.cw-wrap{ flex-wrap: wrap; }
.cw-controls.cw-compact .cw-btn{ padding:4px 8px; font-size: 12px; }
.cw-side-controls{ display:flex; flex-direction:column; gap:8px; margin-left: 12px; }
@media (max-width: 900px){ .cw-side-controls{ margin-left: 0; } }
.cw-sticky-controls{ position: sticky; bottom: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); padding:8px 12px; border-top:1px solid #e5e7eb; z-index: 40; display:flex; justify-content:center; }
.cw-sticky-controls .cw-controls{ margin:0; }
.cw-controls-overlay{ position:absolute; z-index: 60; pointer-events: none; width: auto; display:flex; }
.cw-controls-overlay.top-right{ top: 6px; right: 6px; justify-content: flex-end; }
.cw-controls-overlay .cw-controls{ pointer-events: all; }
.cw-drawer-controls{ position: fixed; left:0; right:0; bottom:0; transform: translateY(calc(100% - 36px)); transition: transform .2s ease; background: rgba(255,255,255,.98); border-top:1px solid #ddd; z-index: 50; }
.cw-drawer-controls.open{ transform: translateY(0); }
.cw-drawer-controls .cw-drawer-toggle{ position:absolute; top:-36px; right:12px; border:none; background:#111; color:#fff; width:36px; height:36px; border-radius: 10px 10px 0 0; cursor:pointer; }
.cw-drawer-controls .cw-drawer-inner{ padding:10px 12px; }

/* === Desktop: wyłącz mobilne wymuszanie wysokości === */
@media (min-width:901px){
  html:not(.is-mobile) .cw-board-wrap{
    aspect-ratio: auto !important;
    width: fit-content !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  html:not(.is-mobile) .cw-board-wrap::before,
  html:not(.is-mobile) .cw-board-wrap::after{
    content: none !important;
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
  }
}

/* ========== CLOCK BAR (jedna prawda) ========== */
/* Kontener paska */
.cw-clock.cw-clock--bar{
  position:relative;
  height:24px;
  border-radius:12px;
  overflow:hidden;
}

/* Wypełnienie paska (tło) */
.cw-clock.cw-clock--bar .cw-line{
  position:absolute; left:0; right:0; top:0; bottom:0;
  z-index:1;
}

/* Liczniki zawsze nad paskiem */
.cw-clock.cw-clock--bar .cw-left,
.cw-clock.cw-clock--bar .cw-total{
  position:absolute;
  z-index:2 !important;
  pointer-events:none;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:var(--cw-clock-fg,#222) !important;
  line-height:1;
}

/* Duży licznik – CZAS NA RUCH (środek) */
.cw-clock.cw-clock--bar .cw-left{
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-weight:600;
}

/* Mały licznik – CZAS GRY (prawa) */
.cw-clock.cw-clock--bar .cw-total{
  right:8px; top:50%;
  transform:translateY(-50%);
  font-size:12px;
  opacity:.9;
}

/* W per_move niczego nie zamieniamy — tylko gwarantujemy widoczność */
.cw-clock[data-mode="per_move"] .cw-left,
.cw-clock[data-mode="per_move"] .cw-total{
  display:block !important;
}
/* pokaż duży per-move tylko na aktywnej stronie */
.cw-clock .cw-left{ opacity:.15; transition:opacity .12s ease; }
.cw-clock.is-turn .cw-left{ opacity:1; }

/* jeśli wolisz całkowicie ukrywać nieaktywny duży licznik, użyj tego zamiast powyższego:
.cw-clock .cw-left{ display:none; }
.cw-clock.is-turn .cw-left{ display:block; }
*/
/* Per-move pokazuj tylko na aktywnej stronie (tej, która jest na ruchu) */
.cw-clock.cw-clock--bar:not(.is-turn) .cw-left{
  display: none !important;
}
.cw-clock.cw-clock--bar.is-turn .cw-left{
  display: block !important;
}


/* Duży licznik per-move słabszy, gdy to nie jest jego tura */
.cw-clock .cw-left{ opacity:.15; transition:opacity .12s ease; }
.cw-clock.is-turn .cw-left{ opacity:1; }

/* === CENTER BOARD ON DESKTOP (centerfix 2025-09-13) ======================== */
@media (min-width: 900px){
  .cw-app, .cw-game, .cw-chess-app{ width:100%; }
  .cw-board-wrap{ margin-left:auto; margin-right:auto; } /* classic center */
  .cw-bottombar{ display:flex; justify-content:center; }
}
/* Fallback: when parent enforces left alignment */
@media (min-width: 900px){
  .cw-board-wrap.force-center{
    position:relative;
    left:50%;
    transform:translateX(-50%);
  }
}
/* ================== CHESSWOOD CLEAN OVERRIDES ================== */

/* bottom bar: bez sztucznego powietrza */
.cw-game-root .cw-bottombar{
  flex-wrap: wrap;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* elementy w bottombar na pełną szerokość (żeby „pod użytkownikiem” było realnie pod) */
.cw-bottombar .cw-player--bottom,
.cw-bottombar .cw-captures-slot--white,
.cw-bottombar .cw-controls-anchor{
  flex: 0 0 100%;
  width: 100%;
}

/* slot przycisków = powierzchnia wyrównania */
.cw-controls-slot{
  width: 100%;
  display: flex;
  margin-top: 0 !important; /* 0/4/6 px wg gustu */
}

/* usuń sztuczne separatory */
.cw-whitespace-line{ display:none !important; }
.cw-status{ display:none !important; }

/* pusta tacka nie rezerwuje miejsca */
.cw-captures-slot:empty{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* align przycisków */
.cw-align-left{ justify-content:flex-start !important; text-align:left; }
.cw-align-center{ justify-content:center !important; text-align:center; }
.cw-align-right{ justify-content:flex-end !important; text-align:right; }

/* ================== END OVERRIDES ================== */


/* TEST MOBILE GAP – wklej jako ostatnie linie pliku */
@media (max-width:640px){
  .cw-game-root{ --line-gap: 8px !important; }
  .cw-controls-slot{ margin-top:25px !important; }
}

/* ========== CONFIRM OVERLAYS: REWANŻ / NOWA GRA / PODDAJ ========== */

/* Root overlay – layout już ustawia JS, tu tylko font i bezpieczeństwo z-index */
#cw-rematch-confirm,
#cw-newgame-confirm,
#cw-resign-confirm {
  font-family: Georgia, "Times New Roman", serif;
  z-index: 9999;
}

/* Karta w środku overlaya */
#cw-rematch-confirm .cw-card,
#cw-newgame-confirm .cw-card,
#cw-resign-confirm .cw-card {
  min-width: 260px;
  max-width: 360px;
  width: calc(100% - 48px);
  padding: 20px 24px;
  border-radius: 18px;
  background: radial-gradient(circle at top, #1f2937 0%, #020617 60%, #020617 100%);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(55, 65, 81, 0.85);
  color: #e5e7eb;
  text-align: center;
  backdrop-filter: blur(6px);
  transform: translateY(0);
  animation: cwOverlayIn 160ms ease-out;
}

/* Tytuł */
#cw-rematch-confirm .cw-title,
#cw-newgame-confirm .cw-title,
#cw-resign-confirm .cw-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

/* Kontener przycisków */
#cw-rematch-confirm .cw-buttons,
#cw-newgame-confirm  .cw-buttons,
#cw-resign-confirm   .cw-buttons {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* Na wąskich ekranach przyciski jeden pod drugim */
@media (max-width: 480px) {
  #cw-rematch-confirm .cw-buttons,
  #cw-newgame-confirm  .cw-buttons,
  #cw-resign-confirm   .cw-buttons {
    flex-direction: column;
  }
}

/* Baza dla przycisków */
#cw-rematch-confirm .cw-buttons button,
#cw-newgame-confirm  .cw-buttons button,
#cw-resign-confirm   .cw-buttons button {
  flex: 1 1 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: radial-gradient(circle at top, #111827 0%, #020617 70%);
  color: #e5e7eb;
  font-size: 15px;
  line-height: 1.2;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 120ms ease-out,
    color 120ms ease-out,
    box-shadow 120ms ease-out,
    transform 80ms ease-out,
    border-color 120ms ease-out;
}

/* Przyciski główne: Rewanż / Nowa gra / Poddaj */
#cw-rematch-confirm [data-rematch-confirm="1"],
#cw-newgame-confirm  [data-newgame-confirm="1"],
#cw-resign-confirm   [data-resign-confirm="1"] {
  background: linear-gradient(135deg, #f97316 0%, #f59e0b 26%, #fbbf24 100%);
  color: #111827;
  border-color: rgba(248, 250, 252, 0.9);
  box-shadow:
    0 0 0 1px rgba(250, 250, 249, 0.4),
    0 12px 25px rgba(251, 191, 36, 0.45);
}

/* Hover główne */
#cw-rematch-confirm [data-rematch-confirm="1"]:hover,
#cw-newgame-confirm  [data-newgame-confirm="1"]:hover,
#cw-resign-confirm   [data-resign-confirm="1"]:hover {
  box-shadow:
    0 0 0 1px rgba(250, 250, 249, 0.7),
    0 14px 28px rgba(251, 191, 36, 0.6);
  transform: translateY(-1px);
}

/* Przyciski „Wróć” */
#cw-rematch-confirm [data-rematch-cancel="1"],
#cw-newgame-confirm  [data-newgame-cancel="1"],
#cw-resign-confirm   [data-resign-cancel="1"] {
  background: radial-gradient(circle at top, #020617 0%, #020617 60%);
  color: #cbd5f5;
  border-color: rgba(75, 85, 99, 0.9);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8);
}

/* Hover „Wróć” */
#cw-rematch-confirm [data-rematch-cancel="1"]:hover,
#cw-newgame-confirm  [data-newgame-cancel="1"]:hover,
#cw-resign-confirm   [data-resign-cancel="1"]:hover {
  border-color: rgba(148, 163, 184, 1);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.7),
    0 10px 20px rgba(15, 23, 42, 0.85);
  transform: translateY(-1px);
}

/* Active – lekkie wciśnięcie */
#cw-rematch-confirm .cw-buttons button:active,
#cw-newgame-confirm  .cw-buttons button:active,
#cw-resign-confirm   .cw-buttons button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Animacja wejścia karty */
@keyframes cwOverlayIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}