/* ==========================================================================
   军训十九天 · 一营四连三排 —— 样式表
   --------------------------------------------------------------------------
   这一版的视觉核心是「被注意度」这一个连续量：
     body 上的 --susp（0~1）由引擎实时写入，画面里几乎所有恐怖效果都用它驱动 ——
     天色变暗、去色、暗角收缩、扫描线变密、正文开始抖、教官剪影一步步走到你面前。
   ========================================================================== */

:root{
  --ink:#0b0f0d;
  --army:#2f3b32;
  --sand:#d9cbb0;
  --paper:#e8e2d4;
  --red:#b3252b;
  --red-2:#e0453c;
  --sky-day:#7f97a8;
  --sky-dusk:#4a5568;
  --sky-night:#161d26;
  --radius:14px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --font:"Noto Serif SC","Songti SC","SimSun",Georgia,serif;
  --font-ui:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --susp:0;      /* 被注意度 0~1，由 game.js 写入 */
  --san:0.7;

  /* 由被注意度推导出来的一组观感参数 */
  --dim:calc(1 - var(--susp) * .52);            /* 亮度 */
  --fade:calc(1 - var(--susp) * .88);           /* 饱和度 */
  --vig:calc(.10 + var(--susp) * .78);          /* 暗角 */
  --scan:calc(var(--susp) * .55);               /* 扫描线 */
  --noise:calc(.03 + var(--susp) * .12);        /* 噪点 */
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font); color:var(--paper); background:var(--ink);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
button{font-family:var(--font-ui); cursor:pointer;}
.hidden{display:none !important;}
.dim{opacity:.55;}
.small{font-size:12px; line-height:1.7;}

/* ==========================================================================
   背景与氛围层
   ========================================================================== */

#bg{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(200,208,215,.20), transparent 60%),
    linear-gradient(180deg,var(--sky-day) 0%, #8b9a86 40%, #4d5a49 68%, #232a23 100%);
  filter:saturate(var(--fade)) brightness(var(--dim));
  transition:filter 1.1s linear, background 2s ease;
}
#vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:var(--vig); transition:opacity 1s linear;
  background:radial-gradient(circle at 50% 44%, transparent 26%, rgba(0,0,0,.88) 92%);
}
#scan{
  position:fixed; inset:0; z-index:4; pointer-events:none; mix-blend-mode:overlay;
  opacity:var(--scan); transition:opacity 1s linear;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.09) 0 1px, transparent 1px 4px);
}
#grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:var(--noise); transition:opacity 1.2s linear;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain 1s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}
/* 心跳脉冲：被注意度越高越明显 */
#pulse{
  position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,.55) 88%);
  transition:opacity .8s linear;
}
body.horror-3 #pulse{opacity:.35; animation:pulseBeat 3.4s ease-in-out infinite;}
body.horror-4 #pulse{opacity:.55; animation:pulseBeat 2.2s ease-in-out infinite;}
body.horror-5 #pulse{opacity:.75; animation:pulseBeat 1.4s ease-in-out infinite;}
@keyframes pulseBeat{
  0%,100%{transform:scale(1); opacity:.25}
  8%{transform:scale(1.03); opacity:.7}
  16%{transform:scale(1); opacity:.3}
  24%{transform:scale(1.02); opacity:.6}
}

/* 屏幕右边那行不属于你的字 */
.margin-whisper{
  position:fixed; top:14%; right:6px; z-index:6; margin:0; pointer-events:none;
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:12.5px; letter-spacing:.34em; color:rgba(233,182,174,.0);
  text-shadow:0 0 12px rgba(224,69,60,.5);
  transition:color .8s ease;
  max-height:60vh; overflow:hidden;
}
body.horror-2 .margin-whisper,body.horror-3 .margin-whisper{color:rgba(233,182,174,.22);}
body.horror-4 .margin-whisper{color:rgba(233,182,174,.42); animation:whisperFlicker 5s steps(1) infinite;}
body.horror-5 .margin-whisper{color:rgba(240,160,138,.62); animation:whisperFlicker 2.6s steps(1) infinite;}
@keyframes whisperFlicker{
  0%,42%{opacity:.9} 43%,46%{opacity:.15} 47%,70%{opacity:.85} 71%,74%{opacity:.2} 75%,100%{opacity:.8}
}

/* ==========================================================================
   布局
   ========================================================================== */

#stage{position:relative; z-index:8; max-width:1140px; margin:0 auto; padding:20px 16px 40px;}
.screen{display:none; animation:fadeUp .45s ease both;}
.screen.active{display:block;}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ------------------------------ 标题页 ------------------------------ */
.title-wrap{max-width:740px; margin:5vh auto 0; text-align:center;}
.kicker{letter-spacing:.5em; font-size:13px; color:#cfd6c9; opacity:.75; margin:0 0 6px;}
.game-title{
  font-size:clamp(42px,9vw,86px); margin:0; letter-spacing:.06em; line-height:1.05; color:#f2ede0;
  text-shadow:0 6px 30px rgba(0,0,0,.65), 0 0 2px rgba(255,255,255,.2);
}
.game-title span{display:block; color:var(--red-2); font-size:.6em; letter-spacing:.28em; margin-top:8px;}
.game-sub{margin:16px 0 24px; color:#dfe5d8; opacity:.85; letter-spacing:.06em; font-size:14px;}
.name-box{
  background:rgba(11,15,13,.66); border:1px solid rgba(217,203,176,.26); border-radius:var(--radius);
  padding:16px; margin:0 auto 18px; max-width:460px; box-shadow:var(--shadow); backdrop-filter:blur(3px);
}
.name-box label{display:block; font-size:13px; letter-spacing:.18em; color:var(--sand); margin-bottom:10px;}
#playerName{
  width:100%; padding:13px 14px; font-size:18px; font-family:var(--font); text-align:center;
  color:#12180f; background:linear-gradient(180deg,#f4f0e4,#ded6c2); border:none; border-radius:10px;
  outline:2px solid transparent; transition:outline-color .25s;
}
#playerName:focus{outline-color:var(--red-2);}
.title-actions{display:flex; flex-direction:column; gap:12px; align-items:center;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}

.btn{
  border:1px solid rgba(217,203,176,.32); background:rgba(20,27,23,.72); color:var(--paper);
  padding:11px 20px; border-radius:999px; font-size:15px; letter-spacing:.06em;
  transition:transform .16s ease, background .25s, border-color .25s, box-shadow .25s;
}
.btn:hover{transform:translateY(-2px); background:rgba(48,60,50,.88);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-primary{
  background:linear-gradient(180deg,var(--red),#8d1b21); border-color:#ef7d74; font-size:18px;
  padding:14px 46px; box-shadow:0 10px 30px rgba(179,37,43,.35);
}
.btn-primary:hover{background:linear-gradient(180deg,var(--red-2),var(--red));}
.btn-ghost{background:rgba(11,15,13,.55);}
.btn-mini{padding:7px 13px; font-size:13px;}
.title-tips{margin-top:30px; font-size:13px; line-height:2; color:#e2e6dc; opacity:.82;}
.title-tips p{margin:2px 0;}
.title-tips b{color:#f0c46a; font-weight:500;}
.server-hint{font-size:12px; opacity:.5; margin-top:14px; min-height:1em;}

/* ==========================================================================
   HUD 与属性
   ========================================================================== */

.hud{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.hud-left{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.hud-name{font-size:20px; letter-spacing:.1em; color:#f4efe2;}
.hud-name::after{content:" · 一营四连三排"; font-size:12px; opacity:.55; letter-spacing:.2em;}
.hud-day{font-size:15px; color:var(--sand);}
.hud-phase{
  font-size:13px; padding:3px 10px; border-radius:999px; font-family:var(--font-ui);
  background:rgba(11,15,13,.6); border:1px solid rgba(217,203,176,.24);
  transition:border-color .6s, color .6s;
}
body.horror-4 .hud-phase,body.horror-5 .hud-phase{border-color:rgba(224,69,60,.6); color:#f0c8c0;}
.hud-right{display:flex; gap:8px; flex-wrap:wrap;}

.bars{
  display:grid; gap:8px 18px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:rgba(11,15,13,.58); border:1px solid rgba(217,203,176,.18); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:14px; backdrop-filter:blur(2px);
}
.bar{display:flex; align-items:center; gap:9px; font-family:var(--font-ui);}
.bar-label{width:34px; font-size:12px; color:var(--sand); letter-spacing:.08em; flex:none;}
.bar-track{flex:1; height:9px; border-radius:999px; background:rgba(255,255,255,.11); overflow:hidden;}
.bar-fill{display:block; height:100%; width:0; border-radius:999px; transition:width .6s cubic-bezier(.2,.9,.2,1);}
.f-skill{background:linear-gradient(90deg,#7fa88f,#bfe0c3);}
.f-fatigue{background:linear-gradient(90deg,#c9a227,#e07f3c);}
.f-san{background:linear-gradient(90deg,#5d8fb3,#9fd2e6);}
.f-injury{background:linear-gradient(90deg,#a8402f,#e0684f);}
.f-rep{background:linear-gradient(90deg,#b3252b,#f0a08a);}
.bar-num{width:26px; text-align:right; font-size:12px; opacity:.72; flex:none;}

/* ------------------------------ 被注意度 · 眼睛 ------------------------------ */
.watch{
  display:flex; align-items:center; gap:9px; font-family:var(--font-ui);
  grid-column:span 2; padding-top:6px; border-top:1px dashed rgba(217,203,176,.16);
}
@media (max-width:520px){ .watch{grid-column:span 1;} }
.watch-label{font-size:12px; color:var(--sand); letter-spacing:.1em; flex:none;}
.eye{
  width:44px; height:26px; flex:none; overflow:visible;
  transform:scaleY(var(--open,.3)); transform-origin:center;
  transition:transform .5s ease;
}
.eye-white{fill:rgba(232,226,212,.14); stroke:rgba(232,226,212,.45); stroke-width:1.2;}
.eye-pupil{fill:#0a0d0b; transition:transform .12s linear;
  transform:translate(calc(var(--ex,0) * 4px), calc(var(--ey,0) * 5px));}
.eye-glint{fill:rgba(255,255,255,.75);}
.eye-lid{fill:none;}
body.horror-3 .eye-white{fill:rgba(224,69,60,.10);}
body.horror-4 .eye-white{fill:rgba(224,69,60,.18);}
body.horror-5 .eye-white{fill:rgba(224,69,60,.3); stroke:rgba(224,69,60,.8);}
.watch-track{flex:1; height:9px; border-radius:999px; background:rgba(255,255,255,.11); overflow:hidden;}
.watch-fill{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#6f9e6a,#c9a227 55%,#e0453c);
  transition:width .5s cubic-bezier(.2,.9,.2,1);
}
.watch.hot .watch-track{box-shadow:0 0 12px rgba(201,162,39,.4);}
.watch.critical .watch-track{box-shadow:0 0 16px rgba(224,69,60,.6); animation:alarm .9s ease-in-out infinite;}
@keyframes alarm{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
.watch-num{width:26px; text-align:right; font-size:12px; opacity:.75; flex:none;}

.buff-row{grid-column:1/-1; display:flex; gap:10px; align-items:baseline; font-family:var(--font-ui);
  border-top:1px dashed rgba(217,203,176,.16); padding-top:8px;}
.buff-title{font-size:12px; color:var(--sand); letter-spacing:.1em;}
.buffs{font-size:13px; color:#e8d9b8;}
.buffs .buff{display:inline-block; margin-right:8px; padding:2px 9px; border-radius:999px;
  background:rgba(168,64,47,.28); border:1px solid rgba(224,104,79,.5); animation:pulseSoft 2.4s ease-in-out infinite;}
@keyframes pulseSoft{0%,100%{opacity:.9}50%{opacity:.5}}

/* ==========================================================================
   主区：场景 + 文本
   ========================================================================== */

.play-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr); gap:16px; align-items:start;}
@media (max-width:860px){ .play-grid{grid-template-columns:1fr;} }

/* ------------------------------ 场景 ------------------------------ */
.scene{
  position:relative; height:340px; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(217,203,176,.2); box-shadow:var(--shadow);
  background:#1d231d; transition:border-color 1s ease, box-shadow 1s ease;
}
@media (max-width:860px){ .scene{height:220px;} }
body.horror-4 .scene{border-color:rgba(224,69,60,.35);}
body.horror-5 .scene{border-color:rgba(224,69,60,.6); box-shadow:0 0 34px rgba(0,0,0,.85) inset;}

.scene .sky{
  position:absolute; inset:0 0 42% 0;
  background:linear-gradient(180deg,var(--sky-day),#a9b3a1);
  filter:saturate(var(--fade)) brightness(calc(var(--dim) + .05));
  transition:background 2s ease, filter 1s linear;
}
.scene .ground{
  position:absolute; inset:58% 0 0 0;
  background:linear-gradient(180deg,#6c7358,#343b2f);
  filter:saturate(var(--fade)) brightness(var(--dim));
  transition:filter 1s linear;
}
.scene .ground::after{
  content:""; position:absolute; inset:0; opacity:.55;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 46px);
}
.scene::after{ /* 场景自己的暗角，随被注意度收缩 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 55%, transparent calc(46% - var(--susp) * 30%), rgba(0,0,0,.92) 96%);
  transition:background 1s linear;
}
.flag{position:absolute; right:15%; bottom:52%; width:6px; height:74px; background:#4c4a44;}
.flag i{
  position:absolute; left:6px; top:4px; width:54px; height:34px; background:var(--red);
  clip-path:polygon(0 0,100% 0,86% 50%,100% 100%,0 100%);
  animation:wave 3.6s ease-in-out infinite; transform-origin:left center;
  filter:saturate(var(--fade)) brightness(var(--dim));
}
@keyframes wave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-5deg) scaleX(.94)}}

/* 全排：六个，加上多出来的那个 */
.squad{position:absolute; left:7%; bottom:9%; display:flex; gap:13px; align-items:flex-end;}
.squad span{
  width:9px; height:26px; display:block; border-radius:4px 4px 2px 2px;
  background:rgba(16,21,16,.88);
  filter:brightness(var(--dim));
}
.squad span:nth-child(even){height:23px; opacity:.85;}
.squad .extra{opacity:0; height:30px; width:10px; background:#0a0d0a; transition:opacity 1.6s ease, transform 1.6s ease;}
body.horror-3 .squad .extra{opacity:.55;}
body.horror-4 .squad .extra{opacity:.8; animation:turnToYou 5s ease-in-out infinite;}
body.horror-5 .squad .extra{opacity:1; width:13px; animation:turnToYou 2.6s ease-in-out infinite;}
@keyframes turnToYou{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.5)}}

/* 沙地上的脚印：动一次留一个 */
.footprints{position:absolute; left:9%; bottom:12%; width:60%; height:24%; pointer-events:none;}
.footprints i{
  position:absolute; width:11px; height:16px; border-radius:50% 50% 45% 45%;
  background:rgba(22,26,20,.5);
  box-shadow:inset 0 0 4px rgba(0,0,0,.6);
  left:calc(var(--k) * 9%);
  bottom:calc(var(--k) * 7%);
  transform:rotate(calc(var(--k) * 12deg - 6deg)) scale(.9);
  opacity:0; animation:stepIn .7s ease forwards;
}
@keyframes stepIn{from{opacity:0; transform:translateY(-6px) scale(.6) rotate(0)}to{opacity:.95; transform:translateY(0) scale(1)}}
body.horror-4 .footprints i{background:rgba(30,14,14,.62);}
body.horror-5 .footprints i{background:rgba(64,16,16,.7);}

/* 教官剪影：位置、大小、清晰度都由被注意度连续驱动 */
.sentry-aura{
  position:absolute; right:8%; bottom:-6%; width:150px; height:230px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 70%, rgba(0,0,0,.85), transparent 68%);
  filter:blur(14px);
  opacity:calc(var(--susp) * .95);
  transform:translateX(calc(var(--susp) * -30px)) scale(calc(.9 + var(--susp) * .8));
  transition:opacity .8s linear, transform 1.1s cubic-bezier(.3,.7,.2,1);
}
.sentry{
  position:absolute; right:8%; bottom:-4%; width:104px; height:210px; pointer-events:none;
  opacity:calc(.04 + var(--susp) * .82);
  transform:translateX(calc(var(--susp) * -48px)) scale(calc(.9 + var(--susp) * .95));
  filter:blur(calc((1 - var(--susp)) * 3px)) drop-shadow(0 0 26px rgba(0,0,0,.9));
  transition:opacity .8s linear, transform 1.1s cubic-bezier(.3,.7,.2,1), filter 1s linear;
}
.sentry .s-body,.sentry .s-head,.sentry .s-cap,.sentry .s-arm{fill:#04070a;}
.sentry .s-brim{fill:#010304;}
body.horror-5 .sentry{filter:blur(0) drop-shadow(0 0 46px #000) contrast(1.4);}

/* 第五级：浮出来的那张脸 */
.face{
  position:absolute; inset:-10% -10% -10% -10%; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 42% 58% at 50% 46%, rgba(0,0,0,.94) 42%, transparent 72%);
  transition:opacity 1.6s ease;
}
.face i{
  position:absolute; top:40%; width:9px; height:5px; border-radius:50%;
  background:rgba(232,200,190,.5); box-shadow:0 0 12px rgba(232,200,190,.4);
}
.face i:first-child{left:41%;}
.face i:last-child{left:55%;}
body.horror-5 .face{opacity:.92; animation:faceBreath 5.5s ease-in-out infinite;}
body.horror-4 .face{opacity:.35;}
@keyframes faceBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.boot-line{
  position:absolute; left:12px; bottom:36px; margin:0; font-family:var(--font-ui);
  font-size:12.5px; letter-spacing:.16em; color:#e9b6ae;
  text-shadow:0 2px 10px rgba(0,0,0,.9); opacity:calc(var(--susp) * 1.4);
  transition:opacity .7s linear;
}
.scene-caption{
  position:absolute; left:12px; bottom:10px; margin:0; font-size:12px; letter-spacing:.2em;
  color:#eae4d4; text-shadow:0 2px 8px rgba(0,0,0,.85); opacity:.85;
}

/* ------------------------------ 文本框 ------------------------------ */
.textbox{
  position:relative; border-radius:var(--radius); min-height:340px; padding:18px 20px 20px;
  background:linear-gradient(180deg,rgba(11,15,13,.88),rgba(8,11,9,.95));
  border:1px solid rgba(217,203,176,.22); box-shadow:var(--shadow); backdrop-filter:blur(3px);
  transition:border-color 1s ease, box-shadow 1s ease;
}
body.horror-4 .textbox{border-color:rgba(224,69,60,.35); box-shadow:0 0 40px rgba(0,0,0,.6), 0 0 22px rgba(224,69,60,.12) inset;}
body.horror-5 .textbox{border-color:rgba(224,69,60,.6); animation:breathe 5s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.002)}}
.textbox-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.speaker{
  margin:0; padding:3px 12px; border-radius:999px; font-family:var(--font-ui);
  font-size:12px; letter-spacing:.18em; color:#0f140f;
  background:linear-gradient(90deg,var(--sand),#b8a888);
}
.speaker.sys{background:linear-gradient(90deg,#8fa7b5,#6b8494);}
.round-tag{
  font-family:var(--font-ui); font-size:11.5px; letter-spacing:.14em; padding:2px 9px; border-radius:999px;
  color:#f0c46a; border:1px solid rgba(240,196,106,.4); background:rgba(240,196,106,.1);
  animation:roundPulse 2.4s ease-in-out infinite;
}
@keyframes roundPulse{0%,100%{opacity:.85}50%{opacity:.5}}

.story{font-size:16.5px; line-height:2.05; letter-spacing:.02em; min-height:130px; white-space:pre-wrap;}
body.horror-3 .story{text-shadow:1px 0 rgba(224,69,60,.22), -1px 0 rgba(120,200,255,.16);}
body.horror-4 .story{animation:jitter 3.6s steps(2) infinite; text-shadow:1.4px 0 rgba(224,69,60,.3), -1.4px 0 rgba(120,200,255,.22);}
body.horror-5 .story{
  animation:jitter 1.5s steps(2) infinite;
  text-shadow:2px 0 rgba(224,69,60,.42), -2px 0 rgba(120,200,255,.3), 0 0 18px rgba(224,69,60,.25);
}
@keyframes jitter{0%,100%{transform:translate(0,0)}50%{transform:translate(.7px,-.7px)}}
.caret::after{content:"▌"; margin-left:2px; opacity:.85; animation:caret .8s steps(1) infinite;}
@keyframes caret{0%,50%{opacity:.9}51%,100%{opacity:0}}

/* 多出来的那行字 */
.whisper{
  display:block; margin-top:14px; padding-left:12px;
  border-left:2px solid rgba(224,69,60,.6); color:#e9b6ae; font-size:14px; letter-spacing:.05em;
  animation:whisperIn .9s ease both, jitter 4s steps(2) infinite;
  text-shadow:0 0 12px rgba(224,69,60,.3);
}
@keyframes whisperIn{from{opacity:0; filter:blur(5px); transform:translateX(-6px)}to{opacity:1; filter:none; transform:none}}

.choices{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.choice{
  text-align:left; padding:13px 16px; font-size:15px; line-height:1.7; font-family:var(--font);
  background:rgba(31,41,33,.72); color:#eee7d6; border:1px solid rgba(217,203,176,.26);
  border-radius:12px; transition:transform .16s, background .25s, border-color .25s;
  animation:fadeUp .36s ease both;
}
.choice:hover{transform:translateX(4px); background:rgba(58,72,58,.92); border-color:var(--sand);}
.choice .tag{
  font-family:var(--font-ui); font-size:11px; letter-spacing:.12em; padding:2px 8px; border-radius:999px;
  margin-right:8px; background:rgba(217,203,176,.16); border:1px solid rgba(217,203,176,.3);
}
.choice.risk{border-color:rgba(179,37,43,.6); background:rgba(48,24,24,.66);}
.choice.risk .tag{background:rgba(179,37,43,.34); border-color:rgba(224,69,60,.6);}
.choice.final{border-color:rgba(224,69,60,.8);}
.choice small{display:block; margin-top:6px; font-size:12px; opacity:.6;}
.gain-line{margin:14px 0 0; font-family:var(--font-ui); font-size:12.5px; min-height:1.2em; color:#dfe6d6;}
.gain-line .up{color:#a9e0a0;}
.gain-line .down{color:#f0a08a;}

/* ==========================================================================
   关系面板 / 过场 / 被抓 / 结算 / 弹窗
   ========================================================================== */

.panel{
  position:fixed; top:0; right:0; height:100%; width:330px; max-width:88vw; z-index:30;
  background:linear-gradient(180deg,rgba(10,14,12,.97),rgba(7,10,8,.99));
  border-left:1px solid rgba(217,203,176,.22); padding:18px; overflow-y:auto;
  animation:slideIn .32s ease both; box-shadow:-20px 0 50px rgba(0,0,0,.55);
}
@keyframes slideIn{from{transform:translateX(40px); opacity:0}to{transform:none; opacity:1}}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px;}
.panel-head h3{margin:0; font-size:16px; letter-spacing:.12em; color:var(--sand);}
.bond-list{list-style:none; padding:0; margin:0 0 14px;}
.bond-list li{display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed rgba(217,203,176,.14);}
.bond-avatar{width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-ui); font-size:13px; color:#12180f; background:linear-gradient(180deg,#cbbf9f,#9a9078);}
.bond-main{flex:1; min-width:0;}
.bond-name{font-size:14px; letter-spacing:.06em;}
.bond-role{font-size:11px; opacity:.55; font-family:var(--font-ui);}
.bond-state{font-size:12.5px; color:#e5d7b8; margin-top:4px;}
.bond-stars{color:var(--red-2); letter-spacing:2px; font-size:11px;}

.daycard{
  position:fixed; inset:0; z-index:40; display:grid; place-content:center; text-align:center;
  background:rgba(4,6,5,.95); animation:fadeIn .35s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.dc-day{margin:0; font-size:14px; letter-spacing:.5em; color:var(--sand);}
.dc-title{margin:10px 0 6px; font-size:clamp(34px,7vw,62px); letter-spacing:.16em; color:#f2ede0; animation:fadeUp .7s ease both;}
.dc-sub{margin:0; font-size:13px; letter-spacing:.26em; opacity:.6;}

.catch{
  position:fixed; inset:0; z-index:50; background:#040605; overflow:hidden;
  display:grid; place-items:center; padding:24px;
}
.catch .sentry-big{
  position:absolute; bottom:-10%; left:50%; width:280px; height:520px; margin-left:-140px;
  opacity:0; transform:scale(.5); transform-origin:bottom center;
  animation:approach 4.2s cubic-bezier(.4,.1,.2,1) forwards;
}
.catch .s-body,.catch .s-head,.catch .s-cap,.catch .s-arm{fill:#000;}
.catch .s-brim{fill:#000;}
@keyframes approach{
  0%{opacity:0; transform:scale(.45) translateY(30px)}
  30%{opacity:.55}
  100%{opacity:.97; transform:scale(1.9) translateY(0)}
}
.catch-line{
  position:relative; max-width:660px; font-size:clamp(17px,3.2vw,25px); line-height:2.1; letter-spacing:.06em;
  text-align:center; color:#e6ded0; text-shadow:0 0 26px rgba(0,0,0,.95);
  animation:catchIn .9s ease both;
}
@keyframes catchIn{from{opacity:0; filter:blur(7px)}to{opacity:1; filter:none}}
.catch.shake{animation:shake .5s ease 3;}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,3px)}75%{transform:translate(6px,-3px)}}

.flash{position:fixed; inset:0; z-index:45; background:#f6f2e6; pointer-events:none; animation:flashOut .6s ease both;}
@keyframes flashOut{from{opacity:.85}to{opacity:0}}

.ending-card{
  max-width:780px; margin:3vh auto 0; padding:28px 26px; border-radius:18px;
  background:linear-gradient(180deg,rgba(13,18,15,.95),rgba(8,11,9,.98));
  border:1px solid rgba(217,203,176,.22); box-shadow:var(--shadow); animation:fadeUp .6s ease both;
}
.ending-kicker{margin:0; font-size:12px; letter-spacing:.5em; color:var(--red-2);}
.ending-title{margin:8px 0 4px; font-size:clamp(30px,6vw,50px); letter-spacing:.1em; color:#f6f1e4;}
.ending-sub{margin:0 0 18px; font-size:13px; letter-spacing:.22em; opacity:.6;}
.ending-story{font-size:15.5px; line-height:2.1; white-space:pre-wrap; color:#e7e2d4;}
.settle{margin-top:22px; padding-top:18px; border-top:1px solid rgba(217,203,176,.18);}
.settle h3{margin:0 0 6px; font-size:13px; letter-spacing:.22em; color:var(--sand);}
.total-score{margin:0 0 10px; font-size:52px; color:var(--red-2); font-family:var(--font-ui);}
.total-score small{font-size:14px; margin-left:6px; color:var(--paper); opacity:.7;}
.breakdown{list-style:none; padding:0; margin:0; font-family:var(--font-ui); font-size:13px;}
.breakdown li{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed rgba(217,203,176,.13);}
.breakdown li b{font-weight:500; color:#f0e7d3;}
.ending-stats{margin-top:16px; font-family:var(--font-ui); font-size:13px; line-height:2; opacity:.85;}
.board-status{font-size:12.5px; color:var(--sand); opacity:.8; min-height:1.2em;}
.ending-actions{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 6px;}

.modal{position:fixed; inset:0; z-index:60; background:rgba(3,5,4,.88); display:grid; place-items:center; padding:18px; animation:fadeIn .25s ease both;}
.modal-card{width:min(640px,100%); max-height:86vh; overflow-y:auto; padding:20px; border-radius:16px;
  background:linear-gradient(180deg,#121a15,#0a0e0c); border:1px solid rgba(217,203,176,.22); box-shadow:var(--shadow);}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.modal-head h3{margin:0; font-size:17px; letter-spacing:.14em; color:var(--sand);}
.gallery-grid{list-style:none; padding:0; margin:0;}
.gallery-grid li{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px dashed rgba(217,203,176,.13);}
.gal-icon{width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:14px;
  background:rgba(179,37,43,.28); border:1px solid rgba(224,69,60,.5);}
.gal-icon.locked{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#8b9288;}
.gal-title{font-size:14.5px;}
.gal-desc{font-size:12.5px; opacity:.65; line-height:1.8; margin-top:3px;}
.board-list{padding-left:22px; margin:6px 0 0; font-family:var(--font-ui); font-size:13.5px; line-height:2;}
.board-list li{border-bottom:1px dashed rgba(217,203,176,.12); padding:4px 0;}
.board-list .b-score{color:var(--red-2); margin-left:6px;}
.board-list .b-meta{opacity:.55; font-size:12px; margin-left:6px;}

/* ==========================================================================
   怎么玩
   ========================================================================== */
.howto-card{width:min(780px,100%); padding:22px 24px 18px;}
.howto-card h4{
  margin:22px 0 8px; font-size:15px; letter-spacing:.08em; color:var(--red-2);
  border-left:3px solid var(--red); padding-left:10px;
}
.howto-lead{margin:0 0 6px; padding:14px 16px; font-size:14.5px; line-height:1.95;
  background:rgba(217,203,176,.06); border:1px solid rgba(217,203,176,.2); border-radius:12px;}
.howto-list{margin:6px 0 0; padding-left:22px; font-size:14px; line-height:2;}
.howto-list li.danger{color:#f0a08a;}
.hl{color:#f0c46a; font-family:var(--font-ui); font-size:12.5px;}
.howto-table{width:100%; border-collapse:collapse; margin-top:8px; font-family:var(--font-ui); font-size:13px; line-height:1.75;}
.howto-table th,.howto-table td{text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px dashed rgba(217,203,176,.16);}
.howto-table th{color:var(--sand); font-weight:500; white-space:nowrap;}
.howto-table tr:last-child td{border-bottom:none;}
.howto-table td:first-child{color:#f2e9d6; white-space:nowrap;}
.howto-card code{font-family:Consolas,Monaco,monospace; font-size:12.5px; padding:1px 6px; background:rgba(255,255,255,.09); border-radius:5px;}
.howto-foot{margin-top:22px; text-align:center;}
.howto-foot .btn-primary{padding:12px 34px; font-size:16px;}