/* =============================================================
 *  亮剑 · 平安县城 —— 大屏群聊提词
 *  16:9 大屏优先，字号跟着 vw 走，1920×1080 上是设计基准
 * ============================================================= */

:root {
  /* 微信绿主题 */
  --bubble-left:  #ffffff;
  --bubble-right: #95ec69;
  --bubble-text:  #16181a;
  --name-color:   rgba(255, 255, 255, .70);
  --system-bg:    rgba(0, 0, 0, .48);
  --system-text:  rgba(255, 255, 255, .88);
  --host-bg:      rgba(20, 26, 22, .82);
  --host-accent:  #95ec69;
  --header-bg:    rgba(14, 16, 15, .72);

  /* 大屏字号：1920 宽时 ≈ 50px */
  --fs-bubble: clamp(26px, 2.60vw, 54px);
  --fs-name:   clamp(15px, 1.30vw, 27px);
  --fs-system: clamp(17px, 1.55vw, 32px);
  --fs-host:   clamp(20px, 2.00vw, 42px);
  --fs-header: clamp(16px, 1.45vw, 30px);

  --avatar:    clamp(46px, 4.0vw, 84px);
  --col-width: min(1440px, 80vw);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #0b0d0c;
  font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}
body.playing { cursor: none; }   /* 演出中藏鼠标 */

kbd {
  display: inline-block;
  padding: .18em .55em; margin: 0 .25em;
  border: 1px solid rgba(255,255,255,.30); border-radius: 5px;
  background: rgba(255,255,255,.08);
  font-family: inherit; font-size: .92em;
}

/* ---------------- 开场遮罩 ---------------- */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, #2a2f26 0%, #0b0d0c 72%);
  transition: opacity .7s ease;
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; color: #e8e6df; }
.splash-kicker {
  font-size: clamp(14px, 1.3vw, 26px); letter-spacing: .5em;
  color: rgba(232,230,223,.55); margin-bottom: 1.6em;
}
.splash-title {
  font-size: clamp(64px, 9vw, 190px); font-weight: 800;
  letter-spacing: .18em; text-indent: .18em;
  color: #f2efe6;
  text-shadow: 0 0 60px rgba(180, 200, 130, .22);
}
.splash-sub {
  font-size: clamp(18px, 1.9vw, 40px); letter-spacing: .35em;
  text-indent: .35em; color: rgba(232,230,223,.62); margin-top: .8em;
}
.start-btn {
  margin-top: 2.6em; padding: .7em 3.2em;
  font-size: clamp(16px, 1.5vw, 30px); font-family: inherit;
  letter-spacing: .3em; text-indent: .3em;
  color: #0b0d0c; background: #95ec69;
  border: none; border-radius: 999px; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 40px rgba(149, 236, 105, .28);
}
.start-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 52px rgba(149,236,105,.42); }
.splash-tip {
  margin-top: 3em; font-size: clamp(12px, 1.0vw, 20px);
  color: rgba(232,230,223,.42); line-height: 2.2;
}

/* ---------------- 舞台 ---------------- */
.stage { position: fixed; inset: 0; overflow: hidden; }
.stage.shake { animation: shake .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translate3d(-4px, 2px, 0); }
  20%, 80% { transform: translate3d(8px, -4px, 0); }
  30%, 50%, 70% { transform: translate3d(-14px, 5px, 0); }
  40%, 60% { transform: translate3d(14px, -5px, 0); }
}

.bg-layer {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 15%, rgba(120,110,80,.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(90,70,50,.28) 0%, transparent 60%),
    linear-gradient(165deg, #23281f 0%, #14170f 45%, #0d0f0b 100%);
  background-size: cover; background-position: center;
}
.bg-dim { position: absolute; inset: 0; background: #000; opacity: .58; }

/* ---------------- 群聊主体 ---------------- */
.chat-frame {
  position: absolute; inset: 0; z-index: 10;   /* 必须低于 .fullscreen，
     否则 header 的 backdrop-filter 在某些显卡上会被提升到整屏字幕之上 */
  display: flex; flex-direction: column; align-items: center;
  padding: 0 0 3.2vh;
}

.chat-header {
  flex: 0 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 1.6em;
  padding: 1.5vh 0;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: var(--fs-header);
  color: rgba(255,255,255,.92);
  letter-spacing: .06em;
}
.group-name { font-weight: 600; }
.scene-name {
  padding: .2em .9em; border-radius: 999px;
  background: rgba(149,236,105,.14); color: #b9f39a;
  font-size: .82em; letter-spacing: .12em;
}

.chat-flow {
  flex: 1 1 auto; width: var(--col-width);
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2.2vh; padding: 4vh 0 0;
  overflow: hidden;
  /* 顶部渐隐，旧消息自然消失，不会有生硬的切断 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%);
}

/* ---------------- 消息行 ---------------- */
.row {
  display: flex; align-items: flex-start; gap: 1.1vw;
  animation: enter .42s cubic-bezier(.2,.9,.25,1) both;
}
.row.no-anim { animation: none; }
@keyframes enter {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.row.right { flex-direction: row-reverse; }

.avatar {
  flex: 0 0 auto;
  width: var(--avatar); height: var(--avatar);
  border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--avatar) * .52); font-weight: 600;
  color: #fff; letter-spacing: 0;
  box-shadow: 0 2px 14px rgba(0,0,0,.45);
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.stack { display: flex; flex-direction: column; max-width: 74%; min-width: 0; }
.row.right .stack { align-items: flex-end; }

.name {
  font-size: var(--fs-name); color: var(--name-color);
  margin: 0 0 .5em .35em; letter-spacing: .04em;
  /* 角色名是唯一直接压在背景图上的文字，背景亮处（天空）要靠描边保证可读 */
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.75);
}

.bubble {
  position: relative;
  padding: .62em .85em;
  border-radius: 12px;
  background: var(--bubble-left);
  color: var(--bubble-text);
  font-size: var(--fs-bubble);
  line-height: 1.52;
  letter-spacing: .02em;
  word-break: break-word;
  box-shadow: 0 4px 26px rgba(0,0,0,.34);
}
/* 气泡小尖角 */
.bubble::before {
  content: ''; position: absolute; top: .62em; left: -9px;
  border: 9px solid transparent;
  border-right-color: var(--bubble-left); border-left: 0;
}
.row.right .bubble { background: var(--bubble-right); }
.row.right .bubble::before {
  left: auto; right: -9px;
  border-right: 0; border-left: 9px solid var(--bubble-right);
  border-right-color: transparent;
}

/* "正在输入…" */
.bubble.typing { padding: .95em 1.15em; }
.dots { display: flex; gap: .32em; align-items: center; }
.dots i {
  width: .30em; height: .30em; border-radius: 50%;
  background: #8d9298; font-size: var(--fs-bubble);
  animation: blink 1.25s infinite ease-in-out;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .28; } 30% { opacity: 1; } }

/* ---------------- 系统提示（舞台动作） ---------------- */
.row.system { justify-content: center; }
.system-pill {
  max-width: 78%;
  padding: .48em 1.5em; border-radius: 999px;
  background: var(--system-bg);
  backdrop-filter: blur(8px);
  color: var(--system-text);
  font-size: var(--fs-system); line-height: 1.5;
  letter-spacing: .1em; text-align: center;
}

/* ---------------- 主持人公告条 ---------------- */
.row.host { justify-content: center; }
.host-card {
  max-width: 92%;
  padding: 1.05em 1.6em;
  border-radius: 14px;
  border-left: 5px solid var(--host-accent);
  background: var(--host-bg);
  backdrop-filter: blur(12px);
  color: #f0efe9;
  font-size: var(--fs-host); line-height: 1.66; letter-spacing: .03em;
}
.host-card .who {
  display: block; margin-bottom: .5em;
  font-size: .62em; letter-spacing: .3em;
  color: var(--host-accent); opacity: .9;
}

/* ---------------- 整屏字幕 ---------------- */
.fullscreen {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: #070806;
  opacity: 0; pointer-events: none;
  transition: opacity .85s ease;
}
.fullscreen.show { opacity: 1; }
.fullscreen-body { text-align: center; color: #f2efe6; padding: 0 6vw; }
.fs-title {
  font-size: clamp(14px, 1.25vw, 25px); letter-spacing: .5em;
  color: rgba(242,239,230,.48); margin-bottom: 1.8em;
}
.fs-main {
  font-size: clamp(56px, 8vw, 165px); font-weight: 800;
  letter-spacing: .2em; text-indent: .2em;
  text-shadow: 0 0 70px rgba(180,200,130,.20);
}
.fs-sub {
  font-size: clamp(17px, 1.8vw, 38px); letter-spacing: .32em;
  text-indent: .32em; color: rgba(242,239,230,.60); margin-top: 1.1em;
}
/* 致敬页：庄重，宋体，逐行 */
.fs-tribute {
  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  font-size: clamp(30px, 4.2vw, 88px); font-weight: 600;
  line-height: 2.05; letter-spacing: .22em; text-indent: .22em;
  color: #f0ece0;
}
.fs-tribute span { display: block; opacity: 0; animation: riseIn 1.5s ease forwards; }
.fs-tribute span:nth-child(2) { animation-delay: .9s; }
.fs-tribute span:nth-child(3) { animation-delay: 1.8s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------------- 操作员提示条（按 H） ---------------- */
.hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: 2em;
  padding: .7em 1.6em;
  background: rgba(0,0,0,.80);
  border-top: 1px solid rgba(149,236,105,.28);
  font-size: clamp(12px, 1.05vw, 21px);
  color: rgba(255,255,255,.80);
}
.hud.show { display: flex; }
.hud-pos {
  flex: 0 0 auto; padding: .16em .8em; border-radius: 5px;
  background: rgba(149,236,105,.18); color: #b9f39a;
  font-variant-numeric: tabular-nums;
}
.hud-note { flex: 1 1 auto; color: #ffd479; }
.hud-next { flex: 0 0 auto; color: rgba(255,255,255,.52); }

/* ---------------- 进度条 ---------------- */
.progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
  height: 3px; background: rgba(255,255,255,.07);
}
.progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #6fb84a, #95ec69);
  transition: width .35s ease;
}

/* ---------------- 黑屏 ---------------- */
.blackout {
  position: fixed; inset: 0; z-index: 200; background: #000;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.blackout.on { opacity: 1; pointer-events: auto; }