/* ============================================================
   《英歌·出阵》联机系统 — 全局共享主题
   见 BUILD-SPEC §5：变量名固定，沿用现有 demo 红金深色氛围
   所有站点页 / H5 / 看板均 <link> 本文件
   ============================================================ */

/* 本地化书法标题字(SIL OFL, 子集 208KB woff2, 断网可用;仅新增不改 --font-title) */
@font-face{
  font-family:'CuoyuanCal';
  src:url('/assets/fonts/mashanzheng-subset.woff2?v=bm4') format('woff2');
  font-display:swap;
}

:root{
  /* —— 固定变量(勿改名),值取自现有 demo —— */
  --bg:#1a0e0c; --panel:#2a1512; --panel2:#331a15; --line:#5a3226;
  --red:#c8342a; --red2:#a02620; --gold:#e8b04b; --gold2:#f5d488;
  --ink:#f3e4cf; --ink2:#c9ab8c; --ok:#7fc97f; --bad:#e07a5f;

  /* —— 品牌增量 token(新增,站点页不引用即惰性,零回归) —— */
  --font-cal:'CuoyuanCal',"Ma Shan Zheng","Kaiti SC","STKaiti",serif;  /* 书法标题 */
  --imperial:#f4b60c; --imperial-deep:#d99a00;   /* 帝王黄品牌点睛 */
  --teal:#1e5c4f; --teal2:#2d5233; --teal-hi:#6fbdad; /* 取自地图水域,做 map↔UI 呼应 */

  /* —— 派生 token —— */
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --shadow:0 4px 18px rgba(0,0,0,.5);
  --font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  /* 标题字更迭:全站标题/名牌统一走本地书法字(子集已覆盖静态显示文本),楷体兜底 */
  --font-title:'CuoyuanCal',"Kaiti SC","STKaiti","KaiTi",serif;
  --font-kai:"Kaiti SC","STKaiti","KaiTi","PingFang SC",serif;  /* 需清晰楷体处的兜底(数字/小标签) */

  /* 绘朱颜玩法状态光晕(由 yingge-fx.js / 各站 JS 写入 0..1) */
  --anger-glow:0;
  --pressure-glow:0;
  --clarity-glow:0;
}

/* ---------- 基础重置 ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body{
  min-height:100%;
  min-height:100dvh;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(200,52,42,.14), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(232,176,75,.08), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:var(--gold2); text-decoration:none;}
a:hover{color:var(--gold);}
::selection{background:var(--red2); color:#fff;}

/* ---------- 排版辅助 ---------- */
.title-font{font-family:var(--font-title); letter-spacing:2px;}
.muted{color:var(--ink2);}
.gold{color:var(--gold);}
.center{text-align:center;}

/* ============================================================
   .kiosk —— 全屏居中容器(站点页主壳)
   ============================================================ */
.kiosk{
  position:relative;
  z-index:2;
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* safe center：矮内容居中，超高内容从顶部起滚（避免中心裁切） */
  justify-content:safe center;
  justify-content:flex-start;
  padding:max(24px, env(safe-area-inset-top, 0px)) 16px max(28px, env(safe-area-inset-bottom, 0px));
  gap:18px;
  overflow-x:hidden;
  overflow-y:visible;
}
@supports (justify-content:safe center){
  .kiosk{ justify-content:safe center; }
}
.kiosk__head{
  width:100%;
  max-width:820px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.kiosk__title{font-family:var(--font-title); color:var(--gold); font-size:26px; letter-spacing:3px; text-align:center;}
.kiosk__sub{color:var(--ink2); font-size:12px; margin-top:2px; text-align:center;}
.kiosk__body{
  width:100%;
  max-width:820px;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* HUD 芯片(军功 / 虎符) */
.hud{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center;}
.chip{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:4px 12px; font-size:12px; color:var(--gold2); white-space:nowrap;
}
.chip b{color:var(--gold);}
.tokens{letter-spacing:3px; font-size:15px;}

/* ============================================================
   .card —— 通用面板
   ============================================================ */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.card h3{
  font-family:var(--font-title); color:var(--gold);
  font-size:17px; letter-spacing:1px; margin-bottom:6px;
}
.card p{font-size:13px; color:var(--ink2); line-height:1.7;}
.card--center{text-align:center;}
.card--soft{background:var(--panel2);}

/* ============================================================
   .btn / .btn-pri —— 按钮
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--panel); color:var(--ink2);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 18px; font-size:14px; font-family:var(--font-body);
  cursor:pointer; transition:transform .08s, border-color .15s, color .15s;
  user-select:none;
}
.btn:hover{color:var(--gold); border-color:var(--gold);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-pri{
  background:linear-gradient(180deg,#d2382c,#8f1c14); color:#fff;
  border-color:var(--gold); font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,214,120,.35), 0 3px 10px rgba(0,0,0,.4);
}
.btn-pri:hover{background:linear-gradient(180deg,#e2483a,#a02218); border-color:var(--gold2);}
.btn-gold{
  background:linear-gradient(180deg,#f2d386,#d99a2e); color:#3a2008;
  border-color:#fff0b8; font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.35);
}
.btn-gold:hover{background:linear-gradient(180deg,#ffe6a8,#e8b04b);}
.btn-block{display:flex; width:100%;}
.btn-lg{padding:14px 26px; font-size:16px;}
.btn-ghost{background:transparent;}

/* 输入框 */
.field{
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--radius-sm); padding:11px 13px; font-size:15px;
  outline:none; font-family:var(--font-body); width:100%;
}
.field:focus{border-color:var(--gold);}
.inputrow{display:flex; gap:8px;}
.inputrow .field{flex:1;}

/* ============================================================
   .chat / .msg —— 对话式站点(独眼鲨 / 揪内应 等)
   ============================================================ */
.chat{
  height:340px; overflow-y:auto;
  background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px;
  display:flex; flex-direction:column; gap:8px;
}
.msg{
  max-width:82%; padding:8px 13px; border-radius:12px;
  font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word;
}
.msg.npc{
  align-self:flex-start; position:relative;
  background:linear-gradient(180deg,#48221b,#341711);
  border:1px solid #6b3a2a; border-left:3px solid var(--red);
  border-bottom-left-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.msg.npc .who{font-family:var(--font-cal,"Kaiti SC"); font-size:12px; color:var(--gold); margin-bottom:3px; letter-spacing:1px; font-weight:600;}
.msg.me{
  align-self:flex-end;
  background:linear-gradient(180deg,#3a2a12,#2a1d0c);
  border:1px solid var(--gold); border-right:3px solid var(--gold2);
  color:var(--ink); border-bottom-right-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.msg.sys{
  align-self:center; background:transparent; border:1px dashed var(--line);
  color:var(--ink2); font-size:12px; padding:5px 12px;
}
.msg.clue{
  align-self:center; position:relative;
  background:linear-gradient(180deg,#4a3316,#3a2812);
  border:1px solid var(--gold); border-radius:6px;
  color:var(--gold2); font-size:13px; letter-spacing:.5px;
  box-shadow:inset 0 0 0 1px rgba(244,182,12,.2), 0 3px 12px rgba(0,0,0,.45);
}
.typing-caret::after{content:"▋"; color:var(--gold); animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

/* ============================================================
   进度环 —— SVG conic 进度圈(结算 / 闪现页共用)
   ============================================================ */
.ring{
  --pct:0;            /* 0..100，由 JS 设置 */
  --size:200px;
  width:var(--size); height:var(--size);
  border-radius:50%;
  display:grid; place-items:center;
  background:
    radial-gradient(closest-side, var(--panel) 70%, transparent 71%),
    conic-gradient(var(--gold) calc(var(--pct)*1%), var(--panel2) 0);
  position:relative;
}
.ring::before{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:1px solid var(--line);
}
.ring__inner{text-align:center; z-index:1;}
.ring__num{font-family:var(--font-title); font-size:44px; color:var(--gold); line-height:1;}
.ring__label{font-size:12px; color:var(--ink2); margin-top:4px;}

/* ============================================================
   闪现页 FLASH —— 结算后全屏进度总览，8s 自动回 IDLE
   ============================================================ */
.flash{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:20px; padding:max(28px, env(safe-area-inset-top, 0px)) 18px max(28px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(ellipse at 50% 30%, rgba(200,52,42,.28), transparent 60%),
    var(--bg);
  animation:flashin .4s ease;
  cursor:pointer;
  overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  box-sizing:border-box;
}
.flash::before,.flash::after{ content:""; flex:1 0 0; min-height:0; pointer-events:none; }
@keyframes flashin{from{opacity:0; transform:scale(.97);} to{opacity:1; transform:none;}}
.flash__title{font-family:var(--font-title); color:var(--gold2); font-size:22px; letter-spacing:2px;}
.flash__next{
  font-size:15px; color:var(--ink);
  background:var(--panel); border:1px solid var(--gold); border-radius:20px;
  padding:8px 20px;
}
.flash__next b{color:var(--gold);}
.flash__hint{font-size:12px; color:var(--ink2);}
.flash__count{color:var(--gold);}
.flash__stamps{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:520px;}
.stampdot{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:14px;
  border:1px solid var(--line); background:var(--panel2); color:var(--ink2);
}
.stampdot.on{background:var(--red2); color:#fff; border-color:var(--gold); box-shadow:0 0 8px rgba(232,176,75,.5);}

/* ============================================================
   结算飘条 / 奖励条目
   ============================================================ */
.reward{
  display:flex; align-items:center; gap:10px;
  background:#3a2a14; border:1px solid #6b4c1e; border-radius:var(--radius-sm);
  padding:10px 14px; font-size:14px; color:var(--gold2);
  animation:rewardin .45s ease both;
}
.reward .em{font-size:20px;}
@keyframes rewardin{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.reward--card{border-color:var(--gold); background:#43301a;}
.event-banner{
  text-align:center; font-size:14px; color:var(--gold2);
  border:1px dashed var(--gold); border-radius:var(--radius-sm);
  padding:10px 14px; background:rgba(232,176,75,.08);
  animation:rewardin .5s ease both;
}
.event-banner.lowpoint{border-color:var(--bad); color:var(--bad); background:rgba(224,122,95,.08);}

/* ============================================================
   toast
   ============================================================ */
.toast{
  position:fixed; bottom:8%; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--gold); color:#2a1512;
  padding:10px 20px; border-radius:20px; font-size:14px; font-weight:600;
  box-shadow:var(--shadow); z-index:120; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.bad{background:var(--bad); color:#2a1512;}

/* ============================================================
   扫码 / 输码兜底面板(IDLE 状态)
   摄像头放进定高画框,避免 <video> 作 flex 子项撑出大黑块
   ============================================================ */
.scan{
  width:100%; max-width:420px; margin:0 auto;
  display:flex; flex-direction:column; gap:12px; text-align:center;
  min-width:0;
  background:transparent;
}
.scan__view{
  position:relative; display:none;
  width:min(100%, 260px); aspect-ratio:1/1; margin:0 auto;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--gold);
  background:var(--panel2);
  box-shadow:inset 0 0 0 1px rgba(232,176,75,.18), 0 4px 18px rgba(0,0,0,.35);
}
.scan__view.is-live{ display:block; }
.scan__view video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:transparent;
}
.scan__reticle{
  position:absolute; inset:14%; z-index:2; pointer-events:none;
  border:1.5px solid rgba(245,212,136,.75); border-radius:8px;
  background:transparent; box-shadow:none;
}
.scan__hint{font-size:12px; color:var(--ink2); text-shadow:0 1px 6px rgba(0,0,0,.65);}
.kiosk[data-state="IDLE"] .scan .field{
  background:rgba(51,26,21,.52);
  border-color:rgba(232,176,75,.28);
  backdrop-filter:blur(4px);
}
.pulse{animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.55;}}

/* ---------- 站点玩法挂载点 ---------- */
.mount{width:100%; display:flex; flex-direction:column; gap:12px;}

/* ---------- 通用网格 ---------- */
.grid{display:grid; gap:10px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}

/* ---------- 首页导航专用 ---------- */
.nav-hero{text-align:center; margin-bottom:8px;}
.nav-hero h1{font-family:var(--font-title); color:var(--gold); font-size:32px; letter-spacing:6px;}
.nav-hero p{color:var(--ink2); font-size:13px; margin-top:6px;}
.nav-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
}
.nav-item{
  display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; transition:border-color .15s, transform .08s;
}
.nav-item:hover{border-color:var(--gold); transform:translateY(-2px);}
.nav-item .idx{
  font-family:var(--font-title); color:var(--gold); font-size:13px;
  border:1px solid var(--line); border-radius:6px; padding:1px 7px; margin-right:8px;
}
.nav-item .nm{font-family:var(--font-title); color:var(--ink); font-size:16px; letter-spacing:1px;}
.nav-item .npc{color:var(--ink2); font-size:12px; margin-top:6px;}
.nav-item .kind{
  display:inline-block; margin-top:8px; font-size:11px; color:var(--gold2);
  background:#3a2a14; border:1px solid #6b4c1e; border-radius:10px; padding:1px 8px;
}
.section-label{
  font-family:var(--font-title); color:var(--gold2); font-size:14px;
  letter-spacing:2px; margin:22px 0 10px; border-left:3px solid var(--red);
  padding-left:10px;
}

/* ---------- code 展示 ---------- */
.codebox{
  font-family:"SF Mono","Menlo",monospace; letter-spacing:2px;
  font-size:22px; color:var(--gold); background:var(--panel2);
  border:1px dashed var(--gold); border-radius:var(--radius-sm);
  padding:12px 18px; display:inline-block;
}

/* ---------- 响应式 ---------- */
@media (max-width:560px){
  .kiosk__title{font-size:22px;}
  .nav-hero h1{font-size:24px; letter-spacing:3px;}
  .chat{height:300px;}
  .ring{--size:170px;}
  .ring__num{font-size:38px;}
}

/* ============================================================
   W2 站点视听层 —— 视频进场 / 循环待机 / 立绘 / Ken Burns 降级
   ============================================================ */
.kiosk{ overflow-x:hidden; overflow-y:visible; }
.station-backdrop{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.station-backdrop::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(26,14,12,calc(.48 + var(--anger-glow,0)*.08)) 0%,
    rgba(26,14,12,.86) 55%,
    rgba(26,14,12,.92) 100%
  );
  transition:background .35s ease;
}
/* 候场/扫码时几乎不压暗,立绘直接透出;避免中央半透明黑板 */
.kiosk[data-state="ATTRACT"] .station-backdrop::after,
.kiosk[data-state="IDLE"] .station-backdrop::after{
  background:linear-gradient(
    180deg,
    rgba(26,14,12,.08) 0%,
    rgba(26,14,12,.18) 55%,
    rgba(26,14,12,.32) 100%
  );
}
.kiosk[data-state="ATTRACT"] .station-portrait:not(.station-portrait--head),
.kiosk[data-state="IDLE"] .station-portrait:not(.station-portrait--head){ opacity:.72; }
.kiosk[data-state="ATTRACT"] .station-video--bg,
.kiosk[data-state="IDLE"] .station-video--bg{ opacity:.78; }
.kiosk[data-state="IDLE"] .station-portrait--head{
  /* 头顶小立绘保持清晰,不被待机压暗规则带灰 */
  opacity:1; filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.kiosk[data-state="ATTRACT"],
.kiosk[data-state="IDLE"]{
  justify-content:flex-start;
  padding-top:18px;
}
.station-video{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none;   /* 不接受交互,浏览器不再叠控件 */
}
/* 抹掉所有原生视频控件浮标(中央播放钮/画中画/全屏那个小方块) */
.station-video::-webkit-media-controls,
.station-video::-webkit-media-controls-enclosure,
.station-video::-webkit-media-controls-panel,
.station-video::-webkit-media-controls-start-playback-button,
.station-video::-webkit-media-controls-overlay-play-button{
  display:none !important; -webkit-appearance:none !important; opacity:0 !important;
}
.station-video--bg{
  opacity:.45; filter:saturate(.9) contrast(1.05);
}
.station-portrait{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  opacity:.35;
}
.station-portrait--head{
  width:56px; height:72px; object-fit:contain; object-position:center bottom;
  opacity:1; flex-shrink:0; margin-right:12px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.kiosk__head{ position:relative; z-index:2; display:flex; align-items:center; }
.kiosk__body{ position:relative; z-index:2; }
.station-idle-card{
  background:transparent; backdrop-filter:none;
  border:none; box-shadow:none; padding:4px 8px 0;
}
.station-idle-card h3{
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.station-idle-card p{
  text-shadow:0 1px 8px rgba(0,0,0,.7);
  color:var(--ink);
}

/* Ken Burns 缓推镜(无视频降级) */
@keyframes kenBurns{
  0%{ transform:scale(1) translate(0,0); }
  50%{ transform:scale(1.08) translate(-1.5%,-1%); }
  100%{ transform:scale(1) translate(0,0); }
}
.ken-burns{ animation:kenBurns 18s ease-in-out infinite; opacity:.4; }
.station-portrait--play{ opacity:.46; object-position:center center; }

/* 候场缓推:alternate = 倒放衔接(正推到头再平滑倒推回来),GPU 合成,永远连贯无接缝 */
@keyframes kenHero{
  0%  { transform:scale(1.05) translate(-1.1%,-0.7%); }
  100%{ transform:scale(1.12) translate(1.1%, 0.7%); }
}
.ken-hero{
  animation:kenHero 26s ease-in-out infinite alternate;
  transform-origin:center center; will-change:transform;
}
@media (prefers-reduced-motion:reduce){ .ken-hero{ animation:none; } }

/* INTRO 候场视频 —— 全景铺底,字幕/按钮压在底部(路径始终可见) */
.station-intro-video{
  position:relative; width:100%; max-width:880px; margin:0 auto;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
}
.station-intro-video .station-video{
  width:100%; aspect-ratio:16/9; max-height:min(62vh,560px); object-fit:cover; display:block;
  background:var(--panel2);
}
.station-intro-video__scrim{
  position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(180deg, transparent, rgba(10,6,4,.35) 40%, rgba(10,6,4,.72));
  pointer-events:none;
}
/* 候场:视频铺满 kiosk,不要居中小卡片两侧留黑边 */
.kiosk[data-state="ATTRACT"]{
  padding:0; justify-content:stretch;
}
.kiosk[data-state="ATTRACT"] .kiosk__head{
  position:relative; z-index:3; padding:18px 16px 0;
}
.kiosk[data-state="ATTRACT"] .kiosk__body,
.kiosk[data-state="ATTRACT"] .mount{
  position:absolute; inset:0; max-width:none; width:100%; height:100%;
  margin:0; padding:0; display:block;
}
.station-intro-video.station-attract{
  position:absolute; inset:0; max-width:none; width:100%; height:100%;
  margin:0; border-radius:0; border:none; background:transparent;
  display:block; overflow:hidden;
}
.station-intro-video.station-attract .station-video{
  position:absolute; inset:0; width:100%; height:100%;
  min-height:0; max-height:none; aspect-ratio:auto; object-fit:cover;
}
.station-intro-video.station-attract .station-intro-video__scrim{
  /* 后场窥视:更薄压暗,影像主体清晰,不像「屏上字幕条」 */
  height:28%;
  background:linear-gradient(180deg, transparent, rgba(10,6,4,.18) 50%, rgba(10,6,4,.55));
}
.station-intro-video__overlay{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 16px max(24px, env(safe-area-inset-bottom, 0px) + 16px); text-align:center;
  z-index:2;
}
.station-attract__peek{
  font-size:11px; letter-spacing:4px; color:rgba(232,176,75,.75);
  text-shadow:0 1px 8px rgba(0,0,0,.7); margin-bottom:2px;
}
.station-subtitle{
  min-height:28px; font-size:15px; line-height:1.65; color:var(--ink);
  text-align:center; text-shadow:0 1px 8px rgba(0,0,0,.75); max-width:560px;
  opacity:.95;
}
.station-subtitle__who{
  color:var(--gold); font-weight:600; font-size:13px; letter-spacing:3px;
  text-shadow:0 1px 6px rgba(0,0,0,.85);
}
.station-intro-video__ctrl{
  justify-content:center; margin-top:2px;
}
/* 后场候场:轻量「推门入场」,避免厚 HUD / 屏感边框 */
.station-attract__cta{ display:flex; justify-content:center; margin-top:6px; }
.btn-attract{
  font-family:var(--font-cal,"Kaiti SC"); letter-spacing:4px; font-size:15px;
  padding:8px 28px; border-radius:4px;
  background:rgba(20,10,8,.55); border:1px solid rgba(232,176,75,.55);
  box-shadow:none;
}
.station-attract .station-subtitle{ font-size:14px; }

/* 终局揭晓 · 大屏全屏浮层(出阵斩倭结算后播「你的三结局」) */
.ending-reveal{
  position:fixed; inset:0; z-index:80; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  opacity:0; transition:opacity .45s ease; text-align:center;
  padding:max(24px, env(safe-area-inset-top, 0px)) 24px max(28px, env(safe-area-inset-bottom, 0px));
  background:radial-gradient(ellipse at 50% 28%, rgba(60,20,12,.42), rgba(10,6,4,.96));
  overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  box-sizing:border-box;
}
.ending-reveal.show{ opacity:1; }
.ending-reveal::before,.ending-reveal::after{ content:""; flex:1 0 0; min-height:0; pointer-events:none; }
.ending-reveal .er-media{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.ending-reveal .er-media video{ width:100%; height:100%; object-fit:cover; opacity:.5; pointer-events:none; }
.ending-reveal .er-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,6,4,.45), rgba(10,6,4,.86)); }
.ending-reveal .er-body{ position:relative; z-index:2; max-width:640px; flex:0 0 auto; animation:rise-in .6s cubic-bezier(.22,1,.36,1) both; }
.ending-reveal .er-kicker{ font-family:var(--font-cal); color:var(--imperial); letter-spacing:6px; font-size:15px; }
.ending-reveal .er-title{ font-family:var(--font-cal); font-size:clamp(34px,8vw,60px); letter-spacing:6px; margin:10px 0 4px;
  background:linear-gradient(180deg,#ffe8b0,#e8b04b 55%,#c8862a);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
  filter:drop-shadow(0 3px 20px rgba(200,52,42,.6)); }
.ending-reveal.end-spy .er-title{ background:linear-gradient(180deg,#ffb0a0,#e07a5f 55%,#a02620);
  -webkit-background-clip:text; background-clip:text; }
.ending-reveal .er-who{ color:var(--gold2); font-size:16px; letter-spacing:2px; margin-bottom:14px; }
.ending-reveal .er-desc{ color:var(--ink); font-size:16px; line-height:1.9; max-width:520px; margin:0 auto 22px;
  text-shadow:0 1px 6px rgba(0,0,0,.8); }
.ending-reveal .er-ctrl{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* VoiceKit — 语音盘问/审讯共用 */
.vk-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
.vk-btn{ flex:0 0 auto; padding:8px 12px; font-size:13px; }
.vk-btn.rec{ color:var(--bad); border-color:var(--bad); }
.vk-meter{
  flex:1; min-width:90px; height:8px; border-radius:6px;
  background:var(--panel); border:1px solid var(--line); overflow:hidden;
}
.vk-meter > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold2),var(--red2));
  transition:width .08s linear;
}
.vk-tag{ font-size:11px; color:var(--ink2); white-space:nowrap; }
.vk-note{
  font-size:11px; color:var(--gold2); text-align:center; margin-top:2px;
}
.tactic-row{ display:flex; gap:8px; flex-wrap:wrap; margin:4px 0; }
/* 审讯手段 → 骨签木牌:立体、金边,选中盖朱印 */
.tactic-chip{
  position:relative;
  border:1px solid #6b4a2e; color:var(--ink2);
  background:linear-gradient(180deg,#3a2416,#241009);
  border-radius:7px; padding:8px 15px; font-size:13px; letter-spacing:1px; cursor:pointer;
  font-family:var(--font-cal,"Kaiti SC");
  box-shadow:inset 0 1px 0 rgba(244,182,12,.18), 0 2px 5px rgba(0,0,0,.4);
  transition:transform .1s, border-color .15s, color .15s, box-shadow .15s;
}
.tactic-chip:hover{ color:var(--gold2); border-color:var(--gold); transform:translateY(-1px); }
.tactic-chip.on{
  border-color:var(--gold); color:#fff2cf;
  background:linear-gradient(180deg,#8f2018,#5a1210);
  box-shadow:inset 0 1px 0 rgba(255,214,120,.35), 0 0 12px rgba(200,52,42,.5), 0 2px 6px rgba(0,0,0,.5);
  padding-left:26px;
}
.tactic-chip.on::before{
  content:"印"; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; border-radius:3px; display:grid; place-items:center;
  font-size:9px; color:#ffe6c0; background:#a82a1d; border:1px solid rgba(246,223,189,.6);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.evidence-panel{
  display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px;
}
.evidence-chip{
  font-size:11px; color:var(--gold2); border:1px solid var(--line);
  background:var(--panel2); border-radius:12px; padding:4px 10px;
}
.evidence-chip.key{ border-color:var(--ok); color:var(--ok); }

/* ============================================================
   动效 & 按钮精修层(国潮 · 全站)
   ============================================================ */

/* —— 按钮:鎏金扫光 + 弹性按压 —— */
.btn{
  position:relative; overflow:hidden;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.btn::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,246,224,.34), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn:hover::after{ animation:btn-sheen .72s ease; }
@keyframes btn-sheen{ from{ left:-130%; } to{ left:150%; } }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.96); }
.btn-pri:hover{ box-shadow:inset 0 1px 0 rgba(255,220,150,.4), 0 5px 18px rgba(200,52,42,.42); }
.btn-gold:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 5px 18px rgba(232,176,75,.4); }
.btn-lg{ letter-spacing:2px; }

/* —— 入场:面板缓升、消息滑入、奖励弹入 —— */
@keyframes rise-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes msg-in{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes reward-pop{ 0%{ opacity:0; transform:translateX(-14px); } 60%{ transform:translateX(3px); } 100%{ opacity:1; transform:none; } }
.card{ animation:rise-in .5s cubic-bezier(.22,1,.36,1) both; }
.msg{ animation:msg-in .34s cubic-bezier(.22,1,.36,1) both; }
.reward{ animation:reward-pop .5s cubic-bezier(.22,1,.36,1) both; }

/* —— 悬停微动:交互卡片轻抬 —— */
.tactic-chip, .stn, .h5-card, .hublink{ transition:transform .12s, border-color .18s, box-shadow .18s, color .18s, background .18s; }

/* —— 光晕呼吸(标题/线索金光) —— */
@keyframes soft-glow{ 0%,100%{ filter:drop-shadow(0 0 2px rgba(244,182,12,.25)); } 50%{ filter:drop-shadow(0 0 10px rgba(244,182,12,.55)); } }
.msg.clue{ animation:msg-in .34s cubic-bezier(.22,1,.36,1) both, soft-glow 2.6s ease-in-out infinite; }

/* —— 尊重"减少动态" —— */
@media (prefers-reduced-motion: reduce){
  .btn:hover::after{ animation:none; }
  .card, .msg, .reward, .msg.clue{ animation:none !important; }
}