:root{
  --toolbar-h: 56px;
  --bottombar-h: 48px;

  --bg: #1f1f1f;
  --panel: #111;
  --line: #2a2a2a;
  --text: #eaeaea;

  --stage-pad: 12px;
  --pan-pad: 64px; /* bufor scrolla w pan-mode */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden; /* scroll tylko w .stage */
}

/* ===== TOOLBAR ===== */
.toolbar{
  position: fixed;
  left:0; right:0; top:0;
  height: var(--toolbar-h);
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}

.toolbar__left, .toolbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.toolbar__center{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  z-index: 2;
}

.btn{
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #151515;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}
.btn:hover{ background:#1f1f1f; }

.pageinfo{
  font-size:14px;
  opacity:.95;
  white-space: nowrap;
}

.jump{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}
.jump input{
  width: 90px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #0f0f0f;
  color: var(--text);
}

/* ===== BOTTOMBAR ===== */
.bottombar{
  position: fixed;
  left:0; right:0; bottom:0;
  height: var(--bottombar-h);
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  z-index: 50;
}

/* Slider wyśrodkowany */
#pageSlider{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 70vw);
}

/* ===== STAGE ===== */
.stage{
  position: fixed;
  left:0; right:0;
  top: var(--toolbar-h);
  bottom: var(--bottombar-h);

  overflow: auto;
  display:flex;
  align-items:center;
  justify-content:center;

  background: var(--bg);
  padding: var(--stage-pad);
}

/* ===== WRAP =====
   JS ustawia width/height na rozmiar WIZUALNY rozkładówki.
   #book jest absolute i renderuje w większej rozdzielczości (sharp).
*/
#bookWrap{
  position: relative;          /* konieczne dla absolute #book */
  display: block;
  margin: 0;                   /* <-- ważne: NIE auto, żeby nie psuć scrolla */
  min-width: 320px;
  min-height: 240px;

  filter: drop-shadow(0 14px 40px rgba(0,0,0,0.65));

  /* płynny zoom */
  transform-origin: 50% 50%;   /* zoom wokół środka */
  will-change: transform;
}

/* ===== BOOK ===== */
#book.book{
  position: absolute;
  left: 0;
  top: 0;

  transform-origin: 0 0;
  background: transparent;
  will-change: transform;

  /* jeśli sterujesz klikami z wrappera, to book może być auto */
  pointer-events: auto;
}

/* Canvas wypełnia książkę */
#book canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* UX */
.stage, #bookWrap, #book{
  user-select:none;
  -webkit-user-select:none;
}

/* overlay */
#reinitCover{
  position:absolute;
  inset:0;
  background: var(--bg);
  z-index:9999;
  opacity:1;
  transition: opacity 120ms ease;
  pointer-events:none;
}
#reinitCover.hidden{ opacity:0; }

/* dotyk */
#bookWrap, #book{
  touch-action: none;
}

/* ===== pan mode (zoom>1) ===== */
.stage.pan-mode{
  align-items:flex-start;
  justify-content:flex-start;
  cursor: grab;

  /* klucz: duży bufor scrolla, żeby dało się dojechać do LEWEJ i GÓRNEJ */
  padding: var(--pan-pad);
}

.stage.pan-mode.panning{ cursor: grabbing; }

/* w pan-mode wrap nie może być centrowany przez margin auto */
.stage.pan-mode #bookWrap{
  margin: 0; /* nic auto */
}

/* gdy zoom>1: chowamy hinty */
.stage.pan-mode .edge-hints{
  display:none !important;
}

/* ===== Strzałki tylko przy krawędziach ===== */
.edge-hints{
  position:absolute;
  inset:0;
  z-index: 99999;
  pointer-events: none;
}

.edge-hit{
  position:absolute;
  top:0; bottom:0;
  width: min(200px, 14%);
  pointer-events: auto;
  opacity: 0;
}

.edge-hit--prev{ left:0; }
.edge-hit--next{ right:0; }

.edge-hit::after{
  content:"";
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  font-size: clamp(44px, 5.5vw, 88px);
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  text-shadow:
    0 2px 6px rgba(0,0,0,0.6),
    0 0 18px rgba(0,0,0,0.35);

  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
  user-select: none;
  pointer-events: none;
}

.edge-hit--prev{
  background: linear-gradient(to right, rgba(0,0,0,0.42), rgba(0,0,0,0));
}
.edge-hit--prev::after{
  content:"←";
  left: 18px;
}

.edge-hit--next{
  background: linear-gradient(to left, rgba(0,0,0,0.42), rgba(0,0,0,0));
}
.edge-hit--next::after{
  content:"→";
  right: 18px;
}

.edge-hit:hover{ opacity: 1; }
.edge-hit:hover::after{
  opacity: 1;
  transform: translateY(-50%) scale(1.02);
}

@media (hover: none){
  .edge-hit{ display:none; }
}

/* ===== Ikonowe przyciski ===== */
.btn-icon{
  padding: 6px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.btn-icon:hover svg{ opacity: 0.9; }

/* ===== Zoom reset jako napis ===== */
.zoom-reset{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text);
  opacity: 0.85;

  cursor: pointer;
  user-select: none;

  padding: 4px 6px;
  border-radius: 6px;

  transition: opacity 120ms ease, background 120ms ease;
}

.zoom-reset:hover{
  opacity: 1;
  background: rgba(255,255,255,0.08);
}

.zoom-reset:active{
  background: rgba(255,255,255,0.14);
}

/* ===== MOBILE ===== */
@media (max-width: 680px){
  :root{ --toolbar-h: 108px; }
  .toolbar{ flex-wrap: wrap; height: var(--toolbar-h); gap: 8px; }
  .toolbar__center{ position: static; transform:none; margin: 0 auto; }
  #pageSlider{ width: 65vw; }

  :root{ --stage-pad: 10px; --pan-pad: 40px; }
}

/* StPageFlip – zabij “zagięcie”/cienie tylko po LEWEJ stronie */


/* --- PRAWY RÓG: strefa aktywacji dragu --- */
#bookWrap { position: relative; }

/* domyślnie: book nie łapie myszy (żeby nie psuł klikania/pan) */
#book.book { pointer-events: none; }

/* strefa po prawej, która pozwala “złapać róg” */
.corner-hit{
  position:absolute;
  top:0;
  bottom:0;
  width: min(180px, 14%);      /* szerokość strefy rogu */
  z-index: 10000;
  pointer-events: auto;
  background: transparent;
}

/* tylko prawa strona */
.corner-hit--right{ right:0; }

/* gdy zoom > 1 nie chcemy żadnych interakcji flip */
.stage.pan-mode .corner-hit{ display:none !important; }

/* PRAWY „ZAGIĘTY RÓG” (hint) – tylko przy prawej krawędzi */
.edge-hit--next::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width: 0;
  height: 0;

  /* trójkąt zagięcia */
  border-top: 78px solid rgba(255,255,255,0.14);
  border-left: 78px solid transparent;

  /* delikatny cień */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.edge-hit--next:hover::before{
  opacity: 1;
  transform: translateY(0);
}

/* LEWY RÓG – wyłączamy całkowicie */
.edge-hit--prev::before{ content:none !important; }