/* ===== 基础 ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:#1b1114;}
/* 转发分享缩略图：必须真正渲染出来（≥300px）微信才会抓，但用户不可见 */
.share-thumb{position:absolute;left:0;top:0;width:300px;height:300px;opacity:0;pointer-events:none;z-index:-1;}
body{
  font-family:"PingFang SC","Noto Sans SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;
  -webkit-text-size-adjust:100%;
}
input{font-family:inherit;-webkit-appearance:none;appearance:none;border:0;outline:0;background:transparent;}

#viewport{position:fixed;inset:0;overflow:hidden;background:#1b1114;}

/* 舞台：铺满整个屏幕（设计稿 844x1496 的宽度基准），桌面端最宽 520px */
#stage{
  position:absolute;left:50%;top:0;
  transform:translateX(-50%);
  width:100%;max-width:520px;height:100%;
  overflow:hidden;
  background:#1b1114;          /* 兜底底色：深色，切页瞬间不会闪出纯红 */
}

/* ===== 页面 ===== */
.page{
  position:absolute;inset:0;
  background:#1b1114;
  opacity:0;
  transition:opacity .32s ease;
  will-change:opacity;
}
.page.on{opacity:1;}

/* 背景层：按屏幕高度铺满，左右超出的裁掉 */
.pg-bg{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;pointer-events:none;
}

/* 内容层：按屏幕宽度缩放，按段锚定（顶部贴顶 / 底部贴底 / 中部居中） */
.pg-part{position:absolute;left:0;width:100%;}
.pg-clip{position:absolute;left:0;top:0;width:100%;overflow:hidden;}
.pg-ct{position:absolute;left:0;top:0;width:100%;display:block;pointer-events:none;}

/* 动态层：整幅设计稿坐标系，跟随主内容段 */
.canvas{position:absolute;left:0;top:0;width:100%;}

/* 点击热区 */
.hot{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;}
body.debug .hot{background:rgba(0,200,255,.28);outline:1px solid rgba(0,220,255,.9);}
body.debug .hot::after{
  content:attr(data-label);position:absolute;left:2px;top:2px;
  font-size:8px;line-height:1;color:#005;background:rgba(255,255,255,.85);
  padding:1px 2px;white-space:nowrap;
}

/* ===== 文字层（按设计稿坐标覆盖） ===== */
.ov{position:absolute;white-space:nowrap;line-height:1;}
.ov-c{transform:translateX(-50%);text-align:center;}

/* ===== 加载页进度条 ===== */
.bar{position:absolute;overflow:hidden;}
.bar i{position:absolute;left:0;top:0;height:100%;display:block;border-radius:99px;
  background:#ffd97a;width:0;transition:width .16s linear;}

/* ===== 登录页输入 ===== */
.login-input{
  position:absolute;color:#333;font-weight:400;
  padding:0;margin:0;
}
.login-input::placeholder{color:#d3d3d3;}
.login-hit{position:absolute;background:transparent;border:0;}

/* ===== 轮播 ===== */
.carousel{position:absolute;left:0;right:0;overflow:hidden;touch-action:pan-y;}
.track{position:absolute;top:0;height:100%;display:flex;align-items:stretch;will-change:transform;}
.slot{flex:0 0 auto;height:100%;overflow:hidden;background:rgba(0,0,0,.18);}
.slot img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;opacity:0;transition:opacity .28s ease;}
.slot img.on{opacity:1;}
/* 页数小圆点：底部居中，当前页用橙色，其余按页面底色取灰/半透明白 */
.dots{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;}
/* 直径 / 间距 / 颜色由 JS 按 H5_CONFIG.CAROUSEL.DOT 写成 inline，这里只管形状 */
.dots i{position:relative;display:block;border-radius:50%;box-sizing:border-box;
  transition:background .2s,transform .2s;-webkit-tap-highlight-color:transparent;}
/* 视觉直径小，用伪元素把可点区域撑到 25px 左右 */
.dots i::after{content:"";position:absolute;left:-9px;right:-9px;top:-9px;bottom:-9px;}
.dots i.on{transform:scale(var(--dot-scale,1.25));}

/* 海报左右箭头：半透明圆形按钮 */
.arrow{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:opacity .2s,background .2s;-webkit-tap-highlight-color:transparent;}
.arrow svg{width:56%;height:56%;display:block;pointer-events:none;}
.arrow:active{opacity:.62;}

/* ===== 提示条 ===== */
.toast{
  position:absolute;left:50%;bottom:76px;transform:translate(-50%,10px);
  max-width:300px;padding:9px 16px;border-radius:99px;
  background:rgba(0,0,0,.78);color:#fff;font-size:13px;line-height:1.4;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:60;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ===== 弹窗（今日已签到等） ===== */
.modal{position:fixed;left:0;top:0;width:100%;height:100%;z-index:70;}
.modal[hidden]{display:none;}
.modal-mask{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);}
.modal-card{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:203px;min-height:150px;border-radius:14px;background:#fff;
  padding:22px 16px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,.28);
  animation:pop .22s ease-out;
}
@keyframes pop{
  from{transform:translate(-50%,-50%) scale(.9);opacity:.5}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.modal-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.modal-icon svg{width:26px;height:26px;}
.modal-title{font-size:17px;font-weight:700;color:#c8102e;letter-spacing:.5px;}
.modal-desc{font-size:11px;color:#9a9a9a;margin-top:5px;text-align:center;line-height:1.5;}

/* 无海报占位 */
.empty-tip{
  position:absolute;left:0;right:0;text-align:center;color:rgba(255,255,255,.82);
  font-size:14px;letter-spacing:1px;
}