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}
.cw-player{display:flex;align-items:center;gap:10px}
.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:center;position:relative}
.cw-board{width:520px;max-width:90vw}
.cw-controls{display:flex;gap:8px}
.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%);
}
}