/* ============================================
   H5 Viewer - Shared Styles (assets/viewer.css)
   ============================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  background:#111;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  height:100%;width:100%;
  overflow:hidden;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}

#app{
  position:fixed;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;
}

/* ---- Toolbar ---- */
#toolbar{
  position:absolute;top:10px;right:10px;z-index:20;
  display:flex;align-items:center;gap:4px;
  background:rgba(0,0,0,.55);border-radius:8px;padding:4px 8px;
  transition:opacity .4s;
}
#toolbar button{
  width:32px;height:32px;
  border:1px solid rgba(255,255,255,.25);border-radius:6px;
  background:rgba(255,255,255,.1);color:#fff;font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;line-height:1;
}
#toolbar button:hover{background:rgba(255,255,255,.25)}
#toolbar button:active{background:rgba(255,255,255,.35)}
#landscape-btn{font-size:12px;font-weight:500;letter-spacing:1px;width:auto;padding:0 10px}
#zoom-level{color:rgba(255,255,255,.8);font-size:12px;min-width:40px;text-align:center;user-select:none}

/* ---- Viewport ---- */
#viewport{
  flex:1;position:relative;overflow:hidden;cursor:grab;
  background:#111;
  display:flex;align-items:center;justify-content:center;
}
#viewport.grabbing{cursor:grabbing}
#viewport.zoomed{cursor:grab}

/* ---- Image Container ---- */
#img-ctn{
  position:relative;
  transform-origin:center center;
  will-change:transform;
}

/* ---- Page Image ---- */
#page-img{
  display:block;
  /* 图片按原始尺寸显示，由JS通过transform缩放 */
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  box-shadow:0 4px 30px rgba(0,0,0,.7);
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  /* 初始隐藏，onload后显示 */
  opacity:0;
  transition:opacity .2s;
}
#page-img.loaded{opacity:1}

/* ---- Nav Buttons ---- */
.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.45);border:none;
  color:#fff;font-size:30px;
  width:48px;height:80px;
  cursor:pointer;border-radius:8px;
  z-index:10;transition:background .2s,opacity .2s;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.nav-btn:hover{background:rgba(0,0,0,.7)}
.nav-btn:active{background:rgba(0,0,0,.8)}
#btn-prev{left:8px}
#btn-next{right:8px}

/* ---- Bottom Bar ---- */
#bottom-bar{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 0 16px;
  pointer-events:none;z-index:5;
}
#dots{display:flex;gap:6px;margin-bottom:6px}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.3);cursor:pointer;
  pointer-events:auto;transition:background .2s,transform .2s;
}
.dot.active{background:#fff;transform:scale(1.4)}
#counter{
  color:rgba(255,255,255,.65);font-size:12px;
  background:rgba(0,0,0,.35);padding:3px 10px;border-radius:10px;
}
#swipe-hint{
  color:rgba(255,255,255,.45);font-size:11px;margin-top:6px;
  transition:opacity .6s;
  position:fixed;bottom:4px;left:50%;transform:translateX(-50%);
  pointer-events:none;
}

/* ---- Landscape Rotation ---- */
#app.landscape{
  width:100vh!important;height:100vw!important;
  transform:rotate(90deg) translateY(-100%);
  transform-origin:top left;
}
#app.landscape #swipe-hint{display:none}
#app.landscape #toolbar{/* keeps natural position after rotation */}

/* ---- Responsive ---- */
@media(max-width:768px){
  .nav-btn{width:36px;height:60px;font-size:22px;border-radius:6px}
  #btn-prev{left:4px}
  #btn-next{right:4px}
  #toolbar{top:6px;right:6px;padding:2px 4px;gap:2px}
  #toolbar button{width:28px;height:28px;font-size:14px;border-radius:4px}
}