/* =====================================================================
 * 剧场（舞台剧 / 音乐剧 / 脱口秀）—— 整场观看浮层 + 卡片角标
 * =====================================================================
 * ★ 为什么单独一个文件：这套 UI 与播放页（`.stage`）**没有任何共用语义** ——
 *   那里是"我们自己的 <video> + 音质/原声/伴唱/弹幕"，这里是"B 站官方外链播放器"。
 *   混进 player.css 会让"哪些规则属于我们自己的播放器"彻底说不清。
 *
 * ★ 老引擎口径（Android 9 自带 Chromium 66，全站铁律）：
 *   · 不用 `inset`（展开四向长写）；
 *   · 不用 `min() / max() / clamp()`（前置定值兜底）；
 *   · 不用 `color-mix()`（用 rgba 或 var 直接给）；
 *   · flex 的 `gap` **语法合法但无效** ⇒ 间距一律 `.parent > * + * { margin-left }`；
 *   · 16:9 用 `padding-top: 56.25%` 占位，不用 `aspect-ratio`。
 * ===================================================================== */

/* ------------------------------- 卡片 ------------------------------- */
/* 时长在剧场里是"能不能完整看完"的关键信息，所以直接印在封面上、且不省略 */
.th-card .card-media-wide { position: relative; }
.th-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a1206;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.36);
}
.th-long { color: var(--dim); font-weight: 600; }

/* ------------------------------- 浮层 ------------------------------- */
.theater {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 130; /* 高于 #modal(120) 与 #stage(110)：剧场是从 MV 页直接打开的 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.theater-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.theater-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair);
  background: var(--glass-2);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

/* 头部 */
.theater-head {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.theater-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
}

/* 播放区：16:9 占位 + 绝对定位的 iframe（老引擎也认的一种写法） */
.theater-stage {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  flex: none;
}
.theater-stage iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.theater-loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.66);
  pointer-events: none;
}

/* 底部：来源说明 + 外链 */
.theater-foot {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  flex: none;
  border-top: 1px solid var(--line);
}
.theater-meta {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--mute);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
}
.theater-foot .btn { flex: none; }

/* ------------------------------- 手机端 ------------------------------- */
@media (max-width: 767px) {
  .theater { padding: 10px; align-items: flex-start; padding-top: 56px; }
  .theater-card { max-height: 88vh; border-radius: 16px; }
  .theater-head { padding: 10px 12px; }
  .theater-title { font-size: 12.5px; }
  .theater-foot { padding: 8px 12px; }
  .theater-meta { font-size: 11px; }
  /* 竖屏下 16:9 只有 219px 高，横过来看更舒服 —— 提示写清楚，别让用户自己猜 */
  .theater-foot .btn { height: 30px; padding: 0 10px; font-size: 11.5px; }
}