/* ============================================================
   燃剧 BlazeReel · 全局样式
   字体引入、重置、关键帧动画、手机外框、可复用组件类
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Serif+SC:wght@400;500;700;900&display=swap');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: #161618;
  font-family: 'Noto Sans SC', sans-serif;
}

input, textarea { font-family: 'Noto Sans SC', sans-serif; }

/* 隐藏滚动条 */
.scr::-webkit-scrollbar { display: none; }
.scr { scrollbar-width: none; }

/* ---------- 动画 ---------- */
.anim { animation: rjIn .26s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rjIn   { from { transform: translateY(10px); } to { transform: none; } }
@keyframes rjSheet{ from { transform: translateY(100%); } to { transform: none; } }
@keyframes rjFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rjPop  { from { opacity: 0; transform: translate(-50%,-50%) scale(.9); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes rjToast{ 0%{opacity:0;transform:translate(-50%,10px);} 12%{opacity:1;transform:translate(-50%,0);} 86%{opacity:1;transform:translate(-50%,0);} 100%{opacity:0;transform:translate(-50%,-6px);} }
@keyframes rjHeart{ 0%{transform:scale(1);} 40%{transform:scale(1.45);} 100%{transform:scale(1);} }

/* ---------- 手机外框 ---------- */
.stage {
  position: fixed; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, #26201d, #161618);
  display: flex; align-items: center; justify-content: center;
}
.phone {
  width: 390px; height: 844px; max-height: 100vh;
  background: #0B0A0A; border-radius: 44px; border: 8px solid #050505;
  overflow: hidden; position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; font: 600 13px 'Noto Sans SC'; color: #fff;
  pointer-events: none;
}
.statusbar .batt {
  display: inline-block; width: 20px; height: 10px;
  border: 1px solid #fff; border-radius: 2px; position: relative;
}
.statusbar .batt::after {
  content: ''; position: absolute; top: 1px; bottom: 1px; left: 1px; right: 5px;
  background: #fff; border-radius: 1px;
}

/* ---------- 屏幕容器 ---------- */
.screen { position: absolute; inset: 0; overflow-y: auto; }          /* 滚动屏 */
.screen-fixed { position: absolute; inset: 0; overflow: hidden; }    /* 不滚动屏（播放/落地/支付结果） */

/* ---------- 底部导航 ---------- */
.nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62px; z-index: 40;
  border-top: 1px solid rgba(255,255,255,.07); background: rgba(10,9,9,.96);
  display: flex; align-items: flex-start; justify-content: space-around;
  padding-top: 8px; font: 500 10px 'Noto Sans SC';
}
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.nav-item .ico { width: 18px; height: 18px; border-radius: 5px; border: 2px solid currentColor; }
.nav-fab {
  width: 42px; height: 42px; border-radius: 50%; margin-top: -20px;
  background: linear-gradient(135deg,#E5342A,#E8B85C);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(229,52,42,.5);
}
.nav-fab i {
  width: 0; height: 0; margin-left: 3px;
  border-left: 12px solid #250d04; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}

/* ---------- 弹层 / 浮层 ---------- */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); animation: rjFade .2s; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; background: #141012;
  border-radius: 20px 20px 0 0; border-top: 1px solid rgba(232,184,92,.3);
  animation: rjSheet .3s cubic-bezier(.2,.7,.3,1);
}
.modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 300px; background: #141012; border: 1px solid rgba(232,184,92,.3);
  border-radius: 18px; padding: 22px;
  animation: rjPop .26s cubic-bezier(.2,.7,.3,1);
}
.toast {
  position: absolute; z-index: 90; left: 50%; bottom: 120px; transform: translateX(-50%);
  background: rgba(20,16,18,.96); border: 1px solid rgba(232,184,92,.4); color: #F3EFE8;
  font: 600 13px 'Noto Sans SC'; padding: 11px 20px; border-radius: 22px;
  white-space: nowrap; animation: rjToast 1.8s ease forwards;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}

/* ---------- 可复用按钮 ---------- */
.btn-primary {
  background: linear-gradient(90deg,#E5342A,#E8B85C); color: #250d04;
  text-align: center; border-radius: 24px; cursor: pointer; font-weight: 700;
}
.btn-ghost {
  border: 1px solid rgba(255,255,255,.14); color: #cfc8be;
  text-align: center; border-radius: 24px; cursor: pointer; font-weight: 600;
}
.btn-gold {
  border: 1px solid rgba(232,184,92,.4); color: #E8B85C;
  text-align: center; border-radius: 24px; cursor: pointer; font-weight: 600;
}

/* 占位封面纹理（剧集卡片统一质感） */
.cover {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg,#241419,#0e0b0c);
}
.cover::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 7px, transparent 7px 14px);
}

/* ============================================================
   H5 移动端适配：窄屏(真机)下手机壳铺满全屏，桌面端保留居中样机
   ============================================================ */
@media (max-width: 600px) {
  html, body { height: 100%; background: #0B0A0A; }
  .stage { background: #0B0A0A; padding: 0; }
  .phone {
    width: 100%;
    height: 100vh;          /* 老浏览器回退 */
    height: 100dvh;         /* 动态视口高，避免移动端地址栏遮挡 */
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* 真机自带系统状态栏，隐藏模板里的假状态栏(时间/5G/电池)；各屏顶部 36px 留白即可 */
  .statusbar { display: none; }
  /* 底部导航避让全面屏底部手势条 */
  .nav {
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}