/* ========= BASE ========= */
.pgm-wrap{
  display:flex;
  gap:16px;
  align-items:flex-start;
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;
  overflow-x:hidden;
}
.pgm-grid{ flex:1 1 0; min-width:0; touch-action:none; }
.pgm-side{ flex:0 0 360px; max-width:360px; }

.pgm-grid canvas{
  display:block;
  width:1000px !important;
  height:1000px !important;
  max-width:none !important;
  max-height:none !important;
  image-rendering:pixelated;
  border:1px solid #ddd;
  transform-origin:0 0;
  touch-action:none;

  /* --- DELIKATNA SIATKA skorelowana z DPI --- */
/* JS ustawi: --pgm-tile i --pgm-dpr */
--pgm-grid-color: rgba(0,0,0,.015);       /* delikatna szarość (możesz zmienić alfa) */
--pgm-dpr: 1;                             /* uzupełnia JS */
--pgm-line: calc(1px / var(--pgm-dpr));   /* 1 piksel fizyczny */

background-image:
  repeating-linear-gradient(
    to right,
    var(--pgm-grid-color) 0 var(--pgm-line),
    transparent var(--pgm-line) var(--pgm-tile)
  ),
  repeating-linear-gradient(
    to bottom,
    var(--pgm-grid-color) 0 var(--pgm-line),
    transparent var(--pgm-line) var(--pgm-tile)
  );
background-size: var(--pgm-tile) var(--pgm-tile);
background-clip: padding-box;
backface-visibility: hidden;
will-change: transform;
}

.pgm-side .box{ border:1px solid #e2e2e2; border-radius:8px; padding:12px; }
.pgm-side .row{ margin:12px 0; }
.pgm-side .big{ font-size:22px; font-weight:600; }
.pgm-buttons{ display:block; }
.pgm-buttons button{
  width:100%; margin:8px 0; padding:12px 16px;
  border:1px solid #ddd; border-radius:6px; background:#f7f7f7; cursor:pointer;
}
.pgm-buttons button:hover{ background:#efef; }

html,body{ overflow-x:hidden; }

/* ========= DESKTOP ≥1280 ========= */
@media (min-width:1280px){
  .pgm-wrap{ display:flex; flex-wrap:nowrap; gap:16px; }
  .pgm-grid{ flex:0 0 1000px; min-width:1000px; }
  .pgm-side{
    flex:0 0 clamp(160px,18vw,220px); max-width:clamp(160px,18vw,220px);
    margin-top:-1px;
  }
  .pgm-buttons{ display:grid; gap:10px; justify-content:start; }
  .pgm-buttons button{ width:160px; padding:10px 14px; }

  .pgm-side{
    flex-basis: calc(clamp(160px,18vw,220px) + 4px);
    max-width:  calc(clamp(160px,18vw,220px) + 4px);
  }
  .pgm-side .row, .pgm-side .row .pgm-price, .pgm-side [data-price]{ white-space:nowrap; }

  .pgm-side .pgm-close{ display:none !important; }
}

/* ========= TABLET 768–1279 ========= */
@media (max-width:1279.98px) and (min-width:768px){
  .pgm-wrap{ display:block; }
  .pgm-grid{ max-width:100%; overflow:auto; }
  .pgm-side{
    position:fixed; right:10px; top:10px; bottom:10px;
    width:clamp(180px,28vw,260px);
    background:#fff; border:1px solid #e5e5e5; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:12px; z-index:10000;
    transform:translateX(0); transition:transform .25s ease;
  }
  .pgm-side .pgm-close{
    display:inline-flex; position:absolute; top:8px; right:8px;
    border:1px solid #ddd; background:#f7f7f7; padding:6px 10px; border-radius:6px; cursor:pointer;
  }
  .pgm-side .pgm-close:hover{ background:#efef; }
}

/* ========= PHONE <768 ========= */
@media (max-width:767.98px){
  .pgm-wrap{ display:block; padding:0; }
  .pgm-grid{ max-width:100%; }

  .pgm-side{
    position:fixed; right:10px; top:10px; bottom:10px;
    width:clamp(180px,70vw,260px);
    background:#fff; border:1px solid #e5e5e5; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:12px; z-index:10000;
    transform:translateX(calc(100% + 12px)); transition:transform .25s ease;
  }
  .pgm-side.pgm-open{ transform:translateX(0); }
  .pgm-side .pgm-close{
    display:inline-flex; position:absolute; top:8px; right:8px;
    border:1px solid #ddd; background:#f7f7f7; padding:6px 10px; border-radius:6px; cursor:pointer;
  }
  .pgm-side .pgm-close:hover{ background:#efef; }

  .pgm-grid{
    width:calc(100svmin - 24px) !important;
    height:calc(100svmin - 24px) !important;
    margin:12px auto !important;
    padding:1px !important;           /* miejsce na ramkę canvasa */
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .pgm-grid canvas{ width:100% !important; height:100% !important; }

  .pgm-buy-chip{
    display:inline-flex !important;
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
    padding:14px 20px; border-radius:999px; border:1px solid #e5e5e5;
    background:#111; color:#fff; font-size:18px; font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,.2); z-index:10001;
  }
}

/* ========= Uniwersalne: wygląd chipa ========= */
.pgm-buy-chip:hover{ filter:brightness(1.08); }

/* ========= TOUCH LAYOUT: PHONE + TABLET (≤1279.98px) ========= */
@media (max-width:1279.98px){
  .pgm-wrap{ display:block; padding:0; }
  .pgm-grid{ max-width:100%; }

  /* Kwadratowa plansza dopasowana do krótszego boku ekranu,
     z miejscem na ramkę canvasa (1px) i lekkim oddechem */
  .pgm-grid{
    width: min(100%, calc(100svmin - 24px)) !important;
    height: calc(100svmin - 24px) !important;
    margin:12px auto !important;
    padding:1px !important;            /* miejsce na ramkę canvasa */
    box-sizing:border-box !important;
    overflow:hidden !important;        /* nie wychodź poza ramkę */
  }
  .pgm-grid canvas{ width:100% !important; height:100% !important; }

  /* Panel po prawej jako overlay — domyślnie schowany,
     otwierany klasą .pgm-open (masz to już w JS) */
  .pgm-side{
    position:fixed; right:10px; top:10px; bottom:10px;
    width:clamp(180px, 65vw, 320px);
    background:#fff; border:1px solid #e5e5e5; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:12px; z-index:10000;
    transform:translateX(calc(100% + 12px));
    transition:transform .25s ease;
  }
  .pgm-side.pgm-open{ transform:translateX(0); }
  .pgm-side .pgm-close{
    display:inline-flex; position:absolute; top:8px; right:8px;
    border:1px solid #ddd; background:#f7f7f7; padding:6px 10px;
    border-radius:6px; cursor:pointer;
  }
  .pgm-side .pgm-close:hover{ background:#efefef; }

  /* Chip "Kup" zawsze widoczny na touch layout */
  .pgm-buy-chip{
    display:inline-flex !important;
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
    padding:14px 20px; border-radius:999px; border:1px solid #e5e5e5;
    background:#111; color:#fff; font-size:18px; font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,.2); z-index:10001;
  }
}
/* ===== PHONE — tylko poziomo (urządzenia dotykowe) ===== */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px){

  /* układ */
  .pgm-wrap{ display:block; padding:0; }

  /* większa plansza: wypełnia wysokość ekranu (z oddechem) */
  .pgm-grid{
    width:  min(calc(100svw - 24px), calc(100dvh - 24px)) !important;
    height: calc(100dvh - 24px) !important;
    margin: 12px auto !important;
    padding: 1px !important;                 /* miejsce na ramkę canvasa */
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .pgm-grid canvas{ width:100% !important; height:100% !important; }

  /* panel jako overlay po prawej — domyślnie schowany */
  .pgm-side{
    --panelW: clamp(200px, 42vw, 360px);
    position: fixed; right: 10px; top: 10px; bottom: 10px;
    width: var(--panelW);
    background:#fff; border:1px solid #e5e5e5; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:12px; z-index:10000;
    transform: translateX(calc(100% + 12px));
    transition: transform .25s ease;
  }
  .pgm-side.pgm-open{ transform: translateX(0); }
  .pgm-side .pgm-close{ display:inline-flex; position:absolute; top:8px; right:8px; }

  /* chip "Kup" zawsze widoczny */
  .pgm-buy-chip{
    display: inline-flex !important;
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom,0px) + 10px);
    z-index: 10001;
  }
}
/* ====== UNIWERSALNE: ukryj "Rezerwuj" (1. przycisk) ====== */
.pgm-buttons button:first-child{ display:none !important; }

/* ====== DESKTOP ≥1280px ====== */
@media (min-width:1280px){
  /* panel: auto szerokość do treści, limit maksymalny, widoczna górna krawędź */
  .pgm-side{
    flex: 0 0 auto;
    max-width: clamp(240px, 26vw, 360px);
    margin-top: 0; /* było -1px – to ucinało górną ramkę */
  }

  /* zawijanie długich liczb/kwot zamiast wychodzenia poza box */
  .pgm-side .row,
  .pgm-side .row .pgm-price,
  .pgm-side [data-price]{
    white-space: normal !important;
    word-break: break-word;
  }

  /* mały "Kup" niepotrzebny na desktopie */
  .pgm-buy-chip{ display:none !important; }
}

/* ====== TOUCH LAYOUT: PHONE + TABLET ≤1279.98px ====== */
@media (max-width:1279.98px){
  /* panel krótszy i wyśrodkowany w pionie; wysuwa się z prawej */
  .pgm-side{
    top: 50%;
    bottom: auto;
    height: min(70svh, 520px);
    transform: translate(calc(100% + 4px), -50%); /* start: schowany na prawo i wyśrodkowany */
    overflow: auto;
  }
  .pgm-side.pgm-open{
    transform: translate(0, -50%); /* po otwarciu: w połowie ekranu */
  }
}
/* ====== AUTO SKALOWANIE DLA DESKTOPA ====== */
@media (min-width: 1280px) {
  .pgm-wrap {
    justify-content: center; /* wyśrodkuj poziomo */
    align-items: center;     /* wyśrodkuj pionowo (jeśli jest miejsce) */
    height: 100vh;           /* dopasuj do wysokości okna */
    overflow: hidden;
  }

  .pgm-grid {
    flex: 0 1 auto;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pgm-grid canvas {
    width: min(99vw, 99vh) !important;  /* dopasuj do okna przeglądarki */
    height: min(99vw, 99vh) !important; /* zachowaj proporcje */
    border: 1px solid #ddd;
  }
}
/* ====== NAPRAWA POZYCJI PANELU PO PRAWEJ ====== */
@media (min-width: 1280px) {
  .pgm-wrap {
    align-items: flex-start !important; /* zamiast centrowania w pionie */
    height: auto !important;            /* nie wymuszaj 100vh */
  }

  .pgm-side {
    align-self: flex-start !important;  /* ustaw panel do góry */
    margin-top: 0 !important;           /* bez przesunięcia */
  }
}
/* ====== ZMNIEJSZENIE ODSTĘPU MIĘDZY PLANSZĄ A PANELEM ====== */
@media (min-width: 1280px) {
  .pgm-wrap {
    gap: 5px !important; /* wcześniej było 16px */
  }
}
/* ====== DESKTOP: sklej panel z planszą i zostaw 2px odstępu ====== */
@media (min-width:1280px){
  /* Kontener obu kolumn bez dodatkowych odstępów i bez centrowania */
  .pgm-wrap{
    justify-content: flex-start !important;
    align-items: flex-start !important;
    height: auto !important;
    gap: 2px !important;             /* dokładnie 2 px między planszą a panelem */
  }

  /* Najważniejsze: .pgm-grid NIE może trzymać 1000px */
  .pgm-grid{
    flex: 0 0 auto !important;        /* nie rozciągaj w poziomie */
    min-width: auto !important;       /* skasuj min-width:1000px */
    width: auto !important;           /* szerokość = szerokość canvasu */
    display: inline-flex !important;  /* dopnij się do rozmiaru zawartości */
  }

  /* Panel po prawej bez sztucznych marginesów */
  .pgm-side{
    align-self: flex-start !important;
    margin: 0 !important;             /* zeruj ewentualne marginesy */
  }
}

/* ====== RESET MOTYWU: usuń wewnętrzne paddingi i wycentruj zawartość ====== */
.site-main,
.content-area { padding-left:0 !important; padding-right:0 !important; }

.site, #page, #primary {
  margin-left:auto; margin-right:auto;
  max-width:100%;
}

/* ========= BASE ========= */
.pgm-wrap{
  display:flex;
  gap:16px;                       /* mobile/tablet: większy oddech; na desktopie nadpisujemy na 2px */
  align-items:flex-start;
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;
  overflow-x:hidden;
}
.pgm-grid{ flex:1 1 0; min-width:0; touch-action:none; }
.pgm-side{ flex:0 0 360px; max-width:360px; }

.pgm-grid canvas{
  display:block;
  width:1000px !important;        /* BAZA – na desktopie nadpisujemy poniżej min(99vw,99vh) */
  height:1000px !important;
  max-width:none !important;
  max-height:none !important;
  image-rendering:pixelated;
  border:1px solid #ddd;
  transform-origin:0 0;
  touch-action:none;

  /* --- delikatna siatka --- */
  --pgm-grid-color: rgba(0,0,0,.015);
  --pgm-dpr: 1;
  --pgm-line: calc(1px / var(--pgm-dpr));
  background-image:
    repeating-linear-gradient(to right, var(--pgm-grid-color) 0 var(--pgm-line), transparent var(--pgm-line) var(--pgm-tile)),
    repeating-linear-gradient(to bottom, var(--pgm-grid-color) 0 var(--pgm-line), transparent var(--pgm-line) var(--pgm-tile));
  background-size: var(--pgm-tile) var(--pgm-tile);
  background-clip: padding-box;
  backface-visibility: hidden;
  will-change: transform;
}

.pgm-side .box{ border:1px solid #e2e2e2; border-radius:8px; padding:12px; }
.pgm-side .row{ margin:12px 0; }
.pgm-side .big{ font-size:22px; font-weight:600; }
.pgm-buttons{ display:block; }
.pgm-buttons button{
  width:100%; margin:8px 0; padding:12px 16px;
  border:1px solid #ddd; border-radius:6px; background:#f7f7f7; cursor:pointer;
}
.pgm-buttons button:hover{ background:#efef; }

html,body{ overflow-x:hidden; }

/* ========= TABLET 768–1279 ========= */
@media (max-width:1279.98px) and (min-width:768px){
  .pgm-wrap{ display:block; }
  .pgm-grid{ max-width:100%; overflow:auto; }

  .pgm-side{
    position:fixed; right:10px; top:10px; bottom:10px;
    width:clamp(180px,28vw,260px);
    background:#fff; border:1px solid #e5e5e5; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:12px; z-index:10000;
    transform:translateX(0); transition:transform .25s ease;
  }
  .pgm-side .pgm-close{
    display:inline-flex; position:absolute; top:8px; right:8px;
    border:1px solid #ddd; background:#f7f7f7; padding:6px 10px; border-radius:6px; cursor:pointer;
  }
  .pgm-side .pgm-close:hover{ background:#efef; }
}

/* ========= PHONE <768 ========= */
@media (max-width:767.98px){
  .pgm-wrap{ display:block; padding:0; }
  .pgm-grid{ max-width:100%; }

  .pgm-side{
    position:fixed; right:10px; top:10px; bottom:10px;
    width:clamp(180px,70vw,260px);
    background:#fff; border:1px solid #e5e5e5; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:12px; z-index:10000;
    transform:translateX(calc(100% + 12px)); transition:transform .25s ease;
  }
  .pgm-side.pgm-open{ transform:translateX(0); }
  .pgm-side .pgm-close{
    display:inline-flex; position:absolute; top:8px; right:8px;
    border:1px solid #ddd; background:#f7f7f7; padding:6px 10px; border-radius:6px; cursor:pointer;
  }
  .pgm-side .pgm-close:hover{ background:#efef; }

  .pgm-grid{
    width:calc(100svmin - 24px) !important;
    height:calc(100svmin - 24px) !important;
    margin:12px auto !important;
    padding:1px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .pgm-grid canvas{ width:100% !important; height:100% !important; }

  .pgm-buy-chip{
    display:inline-flex !important;
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
    padding:14px 20px; border-radius:999px; border:1px solid #e5e5e5;
    background:#111; color:#fff; font-size:18px; font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,.2); z-index:10001;
  }
}

/* ========= TOUCH LAYOUT: PHONE + TABLET (≤1279.98px) – wersja ogólna ========= */
@media (max-width:1279.98px){
  .pgm-wrap{ display:block; padding:0; }
  .pgm-grid{ max-width:100%; }

  .pgm-grid{
    width: min(100%, calc(100svmin - 24px)) !important;
    height: calc(100svmin - 24px) !important;
    margin:12px auto !important;
    padding:1px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .pgm-grid canvas{ width:100% !important; height:100% !important; }

  .pgm-side{
    position:fixed; right:10px; top:10px; bottom:10px;
    width:clamp(180px, 65vw, 320px);
    background:#fff; border:1px solid #e5e5e5; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:12px; z-index:10000;
    transform:translateX(calc(100% + 12px)); transition:transform .25s ease;
  }
  .pgm-side.pgm-open{ transform:translateX(0); }
  .pgm-side .pgm-close{
    display:inline-flex; position:absolute; top:8px; right:8px;
    border:1px solid #ddd; background:#f7f7f7; padding:6px 10px;
    border-radius:6px; cursor:pointer;
  }
  .pgm-side .pgm-close:hover{ background:#efefef; }

  .pgm-buy-chip{
    display:inline-flex !important;
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
    padding:14px 20px; border-radius:999px; border:1px solid #e5e5e5;
    background:#111; color:#fff; font-size:18px; font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,.2); z-index:10001;
  }
}

/* ===== PHONE — tylko poziomo (urządzenia dotykowe) ===== */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px){
  .pgm-wrap{ display:block; padding:0; }
  .pgm-grid{
    width:  min(calc(100svw - 24px), calc(100dvh - 24px)) !important;
    height: calc(100dvh - 24px) !important;
    margin: 12px auto !important;
    padding: 1px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .pgm-grid canvas{ width:100% !important; height:100% !important; }

  .pgm-side{
    --panelW: clamp(200px, 42vw, 360px);
    position: fixed; right: 10px; top: 10px; bottom: 10px;
    width: var(--panelW);
    background:#fff; border:1px solid #e5e5e5; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:12px; z-index:10000;
    transform: translateX(calc(100% + 12px));
    transition: transform .25s ease;
  }
  .pgm-side.pgm-open{ transform: translateX(0); }
  .pgm-side .pgm-close{ display:inline-flex; position:absolute; top:8px; right:8px; }

  .pgm-buy-chip{
    display: inline-flex !important;
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom,0px) + 10px);
    z-index: 10001;
  }
}

/* ====== UNIWERSALNE: ukryj "Rezerwuj" (1. przycisk) ====== */
.pgm-buttons button:first-child{ display:none !important; }

/* ====== DESKTOP ≥1280px – finalne ustawienia ====== */
@media (min-width:1280px){
  /* Sklej panel z planszą i zostaw 2px odstępu */
  .pgm-wrap{
    justify-content:flex-start !important;
    align-items:flex-start !important;
    height:auto !important;
    gap:2px !important;                /* dokładnie 2 px */
    overflow:visible;                  /* już nie ucinaj */
  }

  /* Canvas dopasowany do okna – nadpisuje bazowe 1000x1000 */
  .pgm-grid{
    flex:0 0 auto !important;
    min-width:auto !important;
    width:auto !important;
    display:inline-flex !important;
  }
  .pgm-grid canvas{
    width:min(99vw, 99vh) !important;
    height:min(99vw, 99vh) !important;
    border:1px solid #ddd;
  }

  /* Panel po prawej przyklejony do górnej krawędzi (sticky) */
  .pgm-side{
    position:sticky; top:20px;        /* odległość od górnej krawędzi */
    flex:0 0 auto;
    max-width: clamp(240px, 26vw, 360px);
    margin:0 !important;
    align-self:flex-start !important;
  }

  /* zawijanie długich liczb/kwot zamiast wychodzenia poza box */
  .pgm-side .row,
  .pgm-side .row .pgm-price,
  .pgm-side [data-price]{
    white-space:normal !important;
    word-break:break-word;
  }

  /* mały "Kup" niepotrzebny na desktopie */
  .pgm-buy-chip{ display:none !important; }
}