/* ============================================================
   M3 — 回放端末（全站唯一的手机竖屏风格）
   ============================================================ */

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:#000;
  color:#9fe8b0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",
              "Microsoft YaHei","PingFang SC",sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:22px 12px;
  min-height:100dvh;
}

/* ---------- 手机机身 ---------- */
.phone{
  position:relative;
  width:min(400px, 90vw);
  height:min(742px, 82vh);
  background:#050505;
  border:1px solid #1d1d1d;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 0 0 1px #000, 0 18px 60px rgba(0,0,0,.9);
}

/* ---------- 顶部 ---------- */
.topbar{
  flex:0 0 auto;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  font-size:10px;
  letter-spacing:.16em;
  color:#6f8f78;
  border-bottom:1px solid #141414;
  background:#070707;
}
.topbar .cam{ color:#a8d8b6; }
.topbar .sig{ display:flex; align-items:center; gap:5px; }
.topbar .sig i{
  width:5px; height:5px; border-radius:50%;
  background:#2f8f4f; display:inline-block;
  animation:sigblink 2.4s steps(1) infinite;
}
@keyframes sigblink{ 0%,70%{opacity:1} 71%,100%{opacity:.25} }

/* ---------- 画面 ---------- */
.screen{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;
  background:#000;
}
.screen .frame{
  position:absolute;
  inset:0;
  transition:opacity .12s linear;
}
.screen .frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.18) brightness(.72) sepia(.28) hue-rotate(58deg) saturate(1.6);
}
.screen .frame.glitch{ opacity:0; }

/* 异常帧里叠的剪影 */
.screen .figure{
  position:absolute;
  pointer-events:none;
  opacity:.92;
  filter:blur(.4px);
}
.screen .figure.stand{
  left:50%;
  bottom:34%;
  width:7.5%;
  transform:translateX(-50%);
}
.screen .figure.crouch{
  left:31%;
  bottom:19%;
  width:15%;
}

/* 黑场 + 插字 */
.blackout{
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .1s linear;
  z-index:6;
}
.blackout span{
  font-size:15px;
  letter-spacing:.24em;
  color:#d8e8dc;
  opacity:.92;
}
.blackout.on{ opacity:1; }
.blackout .zh-dark{
  display:block;
  font-style:normal;
  font-size:12px;
  letter-spacing:.14em;
  color:#7f9a88;
  margin-top:10px;
}

/* 扫描线 */
.scan{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.22) 0px,
    rgba(0,0,0,.22) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:multiply;
}

/* 噪点 */
.noise{
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index:5;
  opacity:.16;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grainmove .6s steps(2) infinite;
}
@keyframes grainmove{
  0%{ transform:translate(0,0) }
  50%{ transform:translate(-3%,2%) }
  100%{ transform:translate(2%,-2%) }
}

/* 暗角 */
.vign{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 34%, rgba(0,0,0,.62) 100%);
}

/* HUD */
.hud{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.1em;
  color:#b5e3c2;
  text-shadow:0 0 6px rgba(0,0,0,.9);
}
.hud-row{ display:flex; justify-content:space-between; align-items:flex-start; }
.rec{
  display:flex;
  align-items:center;
  gap:5px;
  color:#e8584c;
  letter-spacing:.18em;
}
.rec i{
  width:6px; height:6px; border-radius:50%;
  background:#e0342b;
  animation:recblink 1.4s steps(1) infinite;
}
@keyframes recblink{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }
.ts{
  font-family:"SF Mono",Consolas,monospace;
  font-size:10px;
  letter-spacing:.02em;
  color:#9ed0ad;
}
.camtag{
  font-family:"SF Mono",Consolas,monospace;
  font-size:9px;
  color:#6fae83;
}

/* ---------- 底部控制 ---------- */
.bottom{
  flex:0 0 auto;
  background:#070707;
  border-top:1px solid #141414;
  padding:8px 12px 10px;
}
.controls{
  display:flex;
  align-items:center;
  gap:10px;
}
.playbtn{
  flex:0 0 auto;
  width:26px; height:26px;
  border:1px solid #2b5f3d;
  background:#0d1710;
  color:#8fd4a4;
  font-size:10px;
  line-height:1;
  cursor:pointer;
  padding:0;
  font-family:inherit;
}
.playbtn:hover{ background:#14251a; }
.playbtn:active{ background:#1c3524; }

input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  flex:1 1 auto;
  height:16px;
  background:transparent;
  cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;
  background:#1e3b28;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:9px; height:15px;
  background:#8fd4a4;
  border:0;
  margin-top:-6px;
}
input[type=range]::-moz-range-track{ height:3px; background:#1e3b28; }
input[type=range]::-moz-range-thumb{
  width:9px; height:15px; background:#8fd4a4; border:0;
}
input[type=range]:focus-visible{ outline:1px solid #4c8c63; outline-offset:3px; }

.tc{
  flex:0 0 auto;
  font-family:"SF Mono",Consolas,monospace;
  font-size:10px;
  color:#8fc9a0;
  letter-spacing:.02em;
  min-width:44px;
  text-align:right;
}

.meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
  font-size:9px;
  letter-spacing:.16em;
  color:#4f7a5c;
}
.meta .batt{ display:flex; align-items:center; gap:6px; }
.meta .batt i{
  display:inline-block;
  width:16px; height:9px;
  border:1px solid #3a6650;
  position:relative;
  margin-right:3px;
}
.meta .batt i::after{
  content:"";
  position:absolute;
  left:1px; top:1px; bottom:1px;
  width:72%;
  background:#3f7f55;
}
.meta .batt i::before{
  content:"";
  position:absolute;
  right:-3px; top:2px;
  width:2px; height:5px;
  background:#3a6650;
}
.meta .auto{ color:#3f6a4e; }

/* 命中异常时整机描边闪一下 */
.phone.hit{ animation:hitflash .5s ease-out 1; }
@keyframes hitflash{
  0%{ border-color:#8fd4a4; box-shadow:0 0 0 1px #8fd4a4, 0 0 24px rgba(143,212,164,.4); }
  100%{ border-color:#1d1d1d; box-shadow:0 0 0 1px #000, 0 18px 60px rgba(0,0,0,.9); }
}

/* ---------- 机外信息 ---------- */
.outside{
  width:min(400px, 90vw);
  font-size:10.5px;
  line-height:1.9;
  color:#4a6b53;
  letter-spacing:.06em;
}
.outside .src{ margin:0 0 8px; }
.outside .counter{
  color:#7fae8e;
  font-family:"SF Mono",Consolas,monospace;
  letter-spacing:.08em;
}
.outside .counter b{ color:#b6e6c4; font-weight:400; }
.outside a{ color:#5f8f6e; text-decoration:none; border-bottom:1px solid #294434; }
.outside a:hover{ color:#9fe8b0; }

/* ---------- 解锁文本 ---------- */
.unlock{
  width:min(400px, 90vw);
  border:1px solid #1e3b28;
  background:#050a06;
  padding:16px 16px 14px;
  display:none;
}
.unlock.on{ display:block; }
.unlock .u-label{
  margin:0 0 12px;
  font-size:9px;
  letter-spacing:.3em;
  color:#4c7a5b;
  border-bottom:1px solid #16301f;
  padding-bottom:8px;
}
.unlock .u-jp{
  margin:0 0 10px;
  font-size:13px;
  line-height:2.1;
  color:#cfe8d8;
  letter-spacing:.06em;
}
.unlock .u-zh{
  margin:0;
  font-size:11px;
  line-height:1.9;
  color:#5f7f69;
  letter-spacing:.06em;
}

@media (max-height:760px){
  .phone{ height:min(680px, 76vh); }
}

/* 真手机上：直接满屏，不再套机身 */
@media (max-width:520px){
  body{
    display:block;
    padding:0;
    gap:0;
    min-height:auto;
  }
  .phone{
    width:100%;
    height:78dvh;
    border:0;
    box-shadow:none;
  }
  .outside{
    width:auto;
    padding:16px 16px 0;
  }
  .unlock{
    width:auto;
    margin:16px 16px 24px;
  }
}


/* ---------- 尊重「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ============ 双语切换 ============ */
/* 中文版：隐藏日文 */
html[data-lang="zh"] .jp{ display:none !important; }

/* 日文版：隐藏所有中文元素 */
html[data-lang="jp"] .zh,
html[data-lang="jp"] .zh-dark,
html[data-lang="jp"] .zh-UI,
html[data-lang="jp"] .zh-hint,
html[data-lang="jp"] .sub,
html[data-lang="jp"] .zh-i{ display:none !important; }

/* 中文版：字幕样式统一回正文样式 */
html[data-lang="zh"] .zh,
html[data-lang="zh"] .sub,
html[data-lang="zh"] .zh-dark,
html[data-lang="zh"] .zh-UI,
html[data-lang="zh"] .zh-hint,
html[data-lang="zh"] .zh-i{
  font-size:inherit !important;
  line-height:inherit !important;
  color:inherit !important;
  margin-top:0 !important;
  letter-spacing:inherit !important;
  font-weight:inherit !important;
  opacity:1 !important;
}