/* ============================================================
   UNCLAIMED — 直播页
   ============================================================ */

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:#0d0d0d;
  color:#e6e6e6;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",
              "Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  font-size:13px;
  line-height:1.6;
  overflow:hidden;
}

a{ color:#3ea6ff; text-decoration:none; }

.app{
  display:flex;
  height:100dvh;
  width:100%;
}

/* ---------- 左侧主区 ---------- */
.main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}

.bar{
  flex:0 0 auto;
  height:46px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 16px;
  background:#181818;
  border-bottom:1px solid #262626;
  font-size:12px;
}
.brand{
  font-weight:bold;
  letter-spacing:.08em;
  color:#ddd;
}
.brand small{
  font-weight:normal;
  font-size:10px;
  color:#7a7a7a;
  margin-left:8px;
  letter-spacing:.12em;
}
.live{
  display:flex;
  align-items:center;
  gap:5px;
  color:#ff3b30;
  font-size:11px;
  letter-spacing:.14em;
  border:1px solid #4a1c19;
  background:#1e0f0e;
  padding:2px 7px;
}
.live i{
  width:6px; height:6px; border-radius:50%;
  background:#ff3b30;
  animation:lb 1.6s steps(1) infinite;
}
@keyframes lb{ 0%,58%{opacity:1} 59%,100%{opacity:.2} }
.viewers{ color:#8a8a8a; font-size:11px; }
.bar .spacer{ flex:1 1 auto; }
.bar .clock{ font-family:"SF Mono",Consolas,monospace; font-size:11px; color:#6f6f6f; }

/* ---------- 画面 ---------- */
.stage{
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.stage video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.94) contrast(1.06) saturate(.42);
  display:block;
}
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%);
}
.stage-hud{
  position:absolute;
  inset:10px 12px auto 12px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-size:10px;
  letter-spacing:.12em;
  color:#d8d8d8;
  text-shadow:0 1px 4px #000;
  z-index:3;
  pointer-events:none;
}
.stage-hud .rec{ color:#ff6b60; display:flex; align-items:center; gap:5px; }
.stage-hud .rec i{
  width:5px; height:5px; border-radius:50%;
  background:#ff3b30;
  animation:lb 1.4s steps(1) infinite;
}
.stage-hud .place{ color:#b9b9b9; font-size:9.5px; }

/* 飘屏弹幕 */
.danmaku{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}
.dm{
  position:absolute;
  left:100%;
  white-space:nowrap;
  font-size:14px;
  color:#f2f2f2;
  text-shadow:0 0 3px #000, 0 0 8px #000;
  will-change:transform;
  animation:dmrun linear forwards;
}
.dm.me{ color:#7fe0a8; }
@keyframes dmrun{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-100% - 100vw)); }
}

/* ---------- 标题区 ---------- */
.under{
  flex:1 1 auto;
  padding:14px 18px 18px;
  min-width:0;
}
.title{
  font-size:15px;
  line-height:1.5;
  color:#eee;
  margin:0 0 10px;
  letter-spacing:.03em;
}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  font-size:11px;
  color:#8a8a8a;
  margin:0 0 14px;
  letter-spacing:.06em;
}
.meta b{ color:#c9c9c9; font-weight:normal; }
.actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.btn{
  border:1px solid #333;
  background:#1c1c1c;
  color:#ddd;
  font-size:11px;
  letter-spacing:.1em;
  padding:7px 14px;
  cursor:pointer;
  font-family:inherit;
}
.btn:hover{ background:#262626; }
.btn.good.on{ border-color:#3f6b52; color:#7fe0a8; background:#132018; }

.note-live{
  margin:16px 0 0;
  padding-top:13px;
  border-top:1px solid #1f1f1f;
  font-size:11px;
  line-height:1.9;
  color:#6c6c6c;
  letter-spacing:.03em;
}
.note-live b{ color:#9a9a9a; font-weight:normal; }

/* ---------- 右侧聊天 ---------- */
.side{
  flex:0 0 336px;
  display:flex;
  flex-direction:column;
  border-left:1px solid #262626;
  background:#141414;
  min-height:0;
}
.chat-head{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid #262626;
  font-size:11px;
  letter-spacing:.12em;
  color:#9a9a9a;
}
.chat-head .slow{
  font-size:9.5px;
  color:#5f5f5f;
  border:1px solid #2e2e2e;
  padding:1px 6px;
}
.chat-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:10px 14px 16px;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:#333 #141414;
}
.chat-body::-webkit-scrollbar{ width:7px; }
.chat-body::-webkit-scrollbar-thumb{ background:#333; }
.chat-body::-webkit-scrollbar-track{ background:#141414; }

.msg{
  display:flex;
  gap:8px;
  margin:0 0 7px;
  font-size:12.5px;
  line-height:1.55;
  animation:fadein .3s ease-out 1;
}
@keyframes fadein{ from{opacity:0} to{opacity:1} }
.msg .nm{
  flex:0 0 auto;
  color:#6f9fc4;
  font-size:11.5px;
}
.msg .tx{ color:#dcdcdc; word-break:break-word; }
.msg .sub{
  display:block;
  font-size:11px;
  line-height:1.5;
  color:#7f8791;
  margin-top:1px;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  letter-spacing:.02em;
}
.msg.key .sub{ color:#a08a6a; }
.msg.me .sub{ color:#6f9c82; }
.msg.sys .sub{ color:#5f5f5f; font-style:normal; }
.msg.me .nm{ color:#7fe0a8; }
.msg.sys .tx{ color:#7a7a7a; font-style:italic; }
.msg.key .nm{ color:#e0a05a; }
.msg.key .tx{ color:#f0d3ab; }

.chat-form{
  flex:0 0 auto;
  display:flex;
  gap:0;
  border-top:1px solid #262626;
  background:#101010;
}
.chat-form input{
  flex:1 1 auto;
  background:transparent;
  border:0;
  color:#e6e6e6;
  font-size:12px;
  padding:12px 14px;
  font-family:inherit;
  outline:none;
}
.chat-form input::placeholder{ color:#555; }
.chat-form button{
  flex:0 0 auto;
  background:transparent;
  border:0;
  color:#7a7a7a;
  font-size:11px;
  letter-spacing:.14em;
  padding:0 16px;
  cursor:pointer;
  font-family:inherit;
}
.chat-form button:hover{ color:#ddd; }

/* ---------- 窄屏 ---------- */
@media (max-width:860px){
  body{ overflow:auto; }
  .app{ flex-direction:column; height:auto; min-height:100dvh; }
  .main{ overflow:visible; }
  .stage{ max-height:none; }
  .side{
    flex:1 1 auto;
    width:100%;
    border-left:0;
    border-top:1px solid #262626;
    height:56vh;
  }
  .chat-body{ min-height:180px; }
}


/* ---------- 尊重「减少动态效果」 ---------- */
@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;
}