/* moment酒吧 · H5 真机适配层
   作用：覆盖原型里的「手机外壳」样式，让页面在真实手机上全屏运行。
   必须在 style.css 和页面内联样式之后加载。 */

html,body{height:100%}
body{background:var(--bg);overflow:hidden;overscroll-behavior:none}

/* 外壳撑满视口，去掉桌面演示用的居中留白 */
.phone-stage{display:block;padding:0;min-height:0;height:100%}

/* 手机壳 → 全屏容器：去圆角/阴影/边框，锁定视口高度 */
.phone{
  width:100%;max-width:480px;
  height:100vh;height:100dvh;min-height:0;
  margin:0 auto;border-radius:0;box-shadow:none;border:none;
}

/* 隐藏原型里的假状态栏（9:41 / 信号 / 电池） */
.phone-status{display:none}

/* 内容区：顶部避开刘海，保留 iOS 惯性滚动 */
.phone-content{
  padding-top:calc(10px + env(safe-area-inset-top));
  -webkit-overflow-scrolling:touch;
}

/* 桌面浏览器里给个侧边界，看起来像手机 */
@media (min-width:520px){
  .phone{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* ===== 交互与动效（专业打磨层） ===== */

/* 页面进入：轻微上浮淡入，模拟原生切换感 */
@keyframes h5pagein{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.phone-content{animation:h5pagein .28s ease both;overscroll-behavior-y:contain}

/* 按钮按压反馈（全站统一） */
.btn{transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-pop) ease,box-shadow var(--dur-pop) ease}
.btn:active{transform:scale(.965)}

/* 可点卡片按压反馈 */
a.card,.singer-card,.func,.drink-card{transition:transform var(--dur-press) var(--ease-out),box-shadow var(--dur-pop) ease}
a.card:active{transform:scale(.98)}
.drink-card:active{transform:scale(.985)}

/* 礼物格按压与选中 */
.gift{will-change:transform}
.gift:active{transform:scale(.93)}

/* 底部导航图标按压 */
.tabbar a .ti{transition:transform var(--dur-press) var(--ease-out)}
.tabbar a:active .ti{transform:scale(.88)}

/* 数量加减按钮按压 */
.qty button:active{transform:scale(.9)}

/* 减少动态效果偏好：去掉入场时的位移与呼吸这类「动起来」的动画；
   按下时 3.5% 的缩放保留 —— 它是反馈，幅度小，帮用户确认操作已生效 */
@media (prefers-reduced-motion: reduce){
  .phone-content{animation:none}
  .float-ball{animation:none}
}