/* =========================================
   CW FIXES — Mobile FULL width board (100%)
   ========================================= */

/* Bazowe (dla wszystkich) */
#board, .board, .chessboard, .cw-board, .cw-end-stage,
[class^="board-"], [class*=" board-"],
[class^="chessboard-"], [class*=" chessboard-"]{
  display:block;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box !important;
}

/* MOBILE — FULL WIDTH */
@media (max-width: 768px){

  /* 0) Nadpisz zmienne TAM, gdzie są ustawione inline */
  .cw-game-root,
  .cw-end-root{
    --cw-board-width: 100% !important;

    --cw-board-maxw: calc(
      100vw
      - env(safe-area-inset-left, 0px)
      - env(safe-area-inset-right, 0px)
    ) !important;

    --cw-board-justify: center !important;
  }

  html, body{ margin:0 !important; padding:0 !important; }

  /* 1) Wrapy: FULL (bez paddingu) */
  #cwEndWrap, .cw-end-wrap, .cw-board-wrap{
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
    max-width:100% !important;
    overflow: visible !important;
  }

  /* 2) Board wrap flex */
  .cw-board-wrap{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }

  /* 3) Rodzice planszy */
  #cwEndStage,
  .cw-end-stage,
  #cwStage,
  .cw-stage,
  #cw-board,
  .cw-board{
    width: 100% !important;
    max-width: var(--cw-board-maxw) !important;
    margin:0 auto !important;
    overflow: visible !important;
    box-sizing:border-box !important;
  }

  /* 4) Chessboardjs wypełnia rodzica */
  #board, .board, .chessboard,
  [class^="board-"], [class*=" board-"],
  [class^="chessboard-"], [class*=" chessboard-"]{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* 5) Usuń padding/marginesy kontenerów motywu (powód “braku fulla”) */
  .cw-container,
  .cw-container .cw-app{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .site, .site-content, .content-area, .entry-content, .wp-site-blocks,
  .container, .row, .col, .elementor-container, .elementor-section,
  .wp-block-group{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
/* ===== MOBILE: full-bleed game area + board can use whole viewport ===== */
@media (max-width: 560px) {

  /* zdejmij ograniczenia motywu dla głównego contentu */
  main#content,
  #content,
  .site-content,
  .content-area,
  .entry-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* root gry: pełna szerokość viewportu */
  .cw-game-root {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* jeżeli masz jakiś “wrap/card/ramkę” dookoła gry — zdejmij */
  .cw-game-wrap,
  .cw-wrap,
  .cw-card,
  .cw-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* wyśrodkuj planszę i pozwól jej rosnąć */
  .cw-board-wrap,
  .cw-board-holder {
    display: flex !important;
    justify-content: center !important;
  }

  /* sama plansza: bez “sztucznego” ograniczania */
  #cw-board,
  .cw-board {
    width: var(--cw-board-width, 100vw) !important;
    max-width: var(--cw-board-maxw, 100vw) !important;
  }
}

/* =========================================
   /koniec — REPLAY cap TYLKO planszy (NIE root)
   Nie ruszamy #cw-end-screen, żeby nie rozwalać pucharu/tekstów/akcji.
   ========================================= */

@media (max-width: 900px){
  html.cw-replay-mode #cw-end-board,
  html.cw-replay-mode #cwEndBoard,
  html.cw-replay-mode .cw-end-board{
    width: min(90vw, 520px) !important;
    height: min(90vw, 520px) !important;
    max-width: min(90vw, 520px) !important;
    max-height: min(90vw, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   /koniec — SNAPSHOT (puchar) centrowanie + brak “uciekania”
   + brak “spadania” (layout shift)
   ========================================================= */

/* 1) Wrapper: zawsze kolumna, start od góry (bez pionowego centrowania) */
#cwEndWrap{
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;     /* poziomo */
  justify-content: flex-start !important;

  padding-top: 12px !important;       /* start “od góry” */
  min-height: 0 !important;
}

/* 2) Stage snapshotu: centrowany i większy na desktop */
#cwEndStage{
  /* mobile: do vmin, desktop: do 750 */
  width: min(750px, 92vmin) !important;
  height: min(750px, 92vmin) !important;

  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;

  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  align-self: center !important;
  text-align: center !important;
}

/* 3) Obraz snapshotu: dopnij do stage i wycentruj */
img#cwEndBoard{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}