/* ============================================================
   Comic Reader (WordPress-safe CSS, fully scoped)
   Root container requirement: wrap your markup with <div id="xw-comic"> ... </div>
   This prevents interference with the site's theme styles.
   ============================================================ */

/* ---------- CSS Variables (scoped) ---------- */
#xw-comic{
  --gap: clamp(4px, 1.2vw, 10px);
  --btn-min: clamp(36px, 8.5vw, 44px);
  --btn-pad: clamp(6px, 1.8vw, 10px);
  --btn-radius: 12px;
  --font: clamp(14px, 3.6vw, 16px);
  --counter-w: clamp(58px, 16vw, 72px);
  --topbar: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --panel: #151517;
  --border:#282a2e;
  --text:#e9e9ec;
  --bg:#000;
  --muted:#9aa0a6;
}

@media (max-width: 480px){
  #xw-comic{ --btn-radius: 10px; }
}
@media (max-width: 360px){
  #xw-comic{
    --gap: clamp(2px, 1.2vw, 6px);
    --btn-min: clamp(32px, 10vw, 40px);
    --font: clamp(13px, 3.8vw, 15px);
    --counter-w: clamp(52px, 18vw, 64px);
  }
}

/* ---------- Reset (scoped) ---------- */
#xw-comic, #xw-comic * { box-sizing: border-box; }
#xw-comic img { max-width: 100%; height: auto; }

/* ---------- Layout wrappers (scoped) ---------- */
#xw-comic .page-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(8px,2vw,16px);
  color:var(--text);
}

/* ---------- Gallery (scoped) ---------- */
#xw-comic .cg-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
#xw-comic .cg-gallery img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  background:#111;
}
#xw-comic .cg-gallery a{
  display:block;
  position:relative;
  overflow:hidden;
  text-decoration:none;
}
#xw-comic .cg-gallery a::after{
  content:"Tap to open";
  position:absolute;
  inset:auto 6px 6px 6px;
  color:#fff;
  background:#000a;
  padding:4px 6px;
  border-radius:6px;
  font-size:12px;
  opacity:0;
  transform:translateY(4px);
  transition:.2s;
  pointer-events:none;
}
#xw-comic .cg-gallery a:hover::after{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Reader overlay (scoped) ---------- */
#xw-comic #reader{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
  background:#000;
  grid-template-rows:auto 1fr;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",Arial,sans-serif;
}
#xw-comic #reader[aria-hidden="false"]{ display:grid; }

/* Topbar */
#xw-comic #reader .topbar{
  display:block;
  padding:calc(8px + var(--safe-top)) 8px 8px 8px;
  background:#0b0b0cd9;
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  min-height:var(--topbar);
}
#xw-comic #reader .toolbar{
  display:flex;
  align-items:center;
  gap:var(--gap);
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:0 2px;
}
#xw-comic #reader .toolbar::-webkit-scrollbar{ display:none; }
#xw-comic #reader .left,
#xw-comic #reader .right{
  display:inline-flex;
  align-items:center;
  gap:var(--gap);
}
#xw-comic #reader .left{ margin-right:var(--gap); }
#xw-comic #reader .counter{
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--muted);
  min-width:var(--counter-w);
  text-align:center;
}
#xw-comic #reader .btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:var(--btn-radius);
  cursor:pointer;
  font-size:var(--font);
  min-width:var(--btn-min);
  min-height:var(--btn-min);
  padding:var(--btn-pad);
  display:inline-grid;
  place-items:center;
  touch-action:manipulation;
}
#xw-comic #reader .btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}

/* Scroll mode container */
#xw-comic #reader .scroll-body{
  min-height:0;
  overflow:auto;
  scroll-behavior:smooth;
}
#xw-comic #reader .pages{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:12px 10px calc(120px + var(--safe-bottom));
}
#xw-comic #reader .sv-page{
  width:min(100%,1600px);
  height:auto;
  object-fit:contain;
  background:#111;
  border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.55);
  user-select:none;
  -webkit-user-drag:none;
  touch-action:pan-y;
}
#xw-comic #reader .pages.fit-width .sv-page{ width:min(100%,1600px); }
#xw-comic #reader .pages.contain .sv-page{
  width:auto;
  max-width:min(100%,1600px);
  max-height:96vh;
}

/* Pager mode container */
#xw-comic #reader .pager-body{ display:grid; min-height:0; }
#xw-comic #reader .viewer{
  position:relative;
  min-height:0;
  display:grid;
  place-items:center;
  padding:8px;
  touch-action:pan-y;
}
#xw-comic #reader .page{
  max-width:min(100%,1800px);
  max-height:calc(100vh - var(--topbar) - 20px - var(--safe-bottom));
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 8px 40px rgba(0,0,0,.55);
  user-select:none;
  -webkit-user-drag:none;
}

/* Mode toggles (scoped) */
#xw-comic #reader[data-mode="scroll"] .scroll-body{ display:block; }
#xw-comic #reader[data-mode="scroll"] .pager-body{ display:none; }
#xw-comic #reader[data-mode="pager"]  .scroll-body{ display:none; }
#xw-comic #reader[data-mode="pager"]  .pager-body{ display:grid; }