【立绘】忘川· 常夜市酒保叙事

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Courier+Prime:wght@400;700&family=VT323&family=Press+Start+2P&family=Silkscreen&display=swap');
*,*::before,*::after{box-sizing:border-box;}

/* ── 字体变量 ── */
:root{
  --font-body: 'VT323','Share Tech Mono',monospace;
  --font-ui: 'Press Start 2P','Share Tech Mono',monospace;
  --font-mono: 'Share Tech Mono','Courier Prime',monospace;
}

/* ═══════════════════════════════════════════
   1. 思维链：彻底隐藏
═══════════════════════════════════════════ */
.wc-think{display:none !important;}

/* ═══════════════════════════════════════════
   2. 立绘 + 对白框（唯一定义）
   独立使用时：95% / max-width 620px / 居中
═══════════════════════════════════════════ */
.magic-wrapper{
  --char:#ffffff;
  position:relative!important;
  width:95%!important;
  max-width:620px!important;
  margin:24px auto!important;
}

.emotion-img{
  width:90.3%!important;
  margin:0 auto -1px auto!important;
  aspect-ratio:1664/1300!important;
  border:1px solid rgba(160,200,240,0.2)!important;
  border-bottom:none!important;
  border-radius:8px 8px 0 0!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center 0%!important;
  background-color:#0f0c14!important;
}

.dialog-box{
  width:100%!important;
  padding:16px 18px!important;
  background:rgba(10,14,32,0.97)!important;
  border:1px solid rgba(160,200,240,0.15)!important;
  border-top:none!important;
  border-radius:0 0 8px 8px!important;
  color:#ffffff!important;
  font-family:'ZCOOL KuaiLe','Noto Serif SC',Georgia,serif!important;
  font-size:15.5px!important;
  line-height:1.85!important;
  position:relative!important;
}

.dialog-box::before{
  content:''!important;
  position:absolute!important;
  top:0!important;left:16px!important;right:16px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(160,200,240,0.12),transparent)!important;
}

.role-name{
  display:block!important;
  font-family:'Noto Sans SC',sans-serif!important;
  font-size:13.5px!important;
  font-weight:700!important;
  letter-spacing:0.1em!important;
  margin-bottom:5px!important;
}

.name-xl{color:#c8a878!important}

/* ═══════════════════════════════════════════
   3. 正文容器 VA-11 风格
   外层 620px（对齐夏梨 xl-nar-wrap）
   magic-wrapper 用负边距突破 padding，还原 620px 全宽
═══════════════════════════════════════════ */
.wc-narrative{
  position:relative;
  width:95%;
  max-width:620px;
  margin:0 auto 2px;
  background:#0f0c14;
  border:1px solid #231c38;
  border-left:3px solid #a04870;
  border-radius:0;
  padding:0;
  overflow:hidden;
  font-family:'VT323','Share Tech Mono',monospace;
}
.wc-narrative::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(0,0,0,.12) 3px,rgba(0,0,0,.12) 4px);
  pointer-events:none;z-index:0;
}
.wc-narrative::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(160,72,112,.04) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}
.wc-narrative-inner{
  position:relative;
  z-index:1;
  padding:20px 24px 16px;
}

/* 叙事区内：magic-wrapper 用负边距突破 padding
   内容区 = 620 - 48(padding) = 572px
   负边距 = 572 + 48 = 620px → 和夏梨独立 magic-wrapper 完全一致 */
.wc-narrative .magic-wrapper{
  width:calc(100% + 48px)!important;
  max-width:none!important;
  margin:16px -24px!important;
}
.wc-narrative .emotion-img{
  width:90.3%!important;
  margin:0 auto -1px auto!important;
}
.wc-narrative .dialog-box{
  width:100%!important;
  max-width:none!important;
}

/* 叙事段落 */
.wc-narrative p{margin:0 0 .9em;color:#ddd5c4;font-family:'VT323','Share Tech Mono',monospace;font-size:16px;line-height:1.75;}
.wc-narrative p:last-child{margin-bottom:0;}

/* 系统/动作文本 */
.wc-sys{display:block;font-family:'VT323','Share Tech Mono',monospace;font-size:15px;color:#3d8878;letter-spacing:.03em;margin:3px 0;padding-left:4px;line-height:1.6;}
.wc-sys::before{content:'// ';color:#3a7870;}
.wc-action{display:block;font-family:'VT323','Share Tech Mono',monospace;font-size:15px;color:#7a6888;font-style:normal;margin:6px 0;letter-spacing:.02em;}

/* ═══════════════════════════════════════════
   4. 酒卡
═══════════════════════════════════════════ */
.wc-drink-wrap{width:168px;background:#0d0b12;border:1px solid #231c38;border-top:2px solid rgba(90,176,168,.7);position:relative;overflow:hidden;margin:16px auto;display:flex;flex-direction:column;align-items:center;padding:18px 14px 0;animation:wc-slide .5s cubic-bezier(.22,1,.36,1) forwards;box-shadow:0 0 30px rgba(0,0,0,.6);}
@keyframes wc-slide{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.wc-drink-wrap::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px);pointer-events:none;z-index:0;}
.wc-glass-svg{position:relative;z-index:1;display:block;opacity:0;filter:brightness(1.18) saturate(1.1);animation:wc-reveal .7s cubic-bezier(.22,1,.36,1) 3.2s forwards;}
@keyframes wc-reveal{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.wc-nameplate{position:relative;z-index:1;width:100%;padding:11px 2px 14px;opacity:0;animation:wc-reveal .7s cubic-bezier(.22,1,.36,1) 3.2s forwards;text-align:center;}
.wc-nameplate::before{content:'';display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(90,176,168,.5) 30%,rgba(160,72,112,.5) 70%,transparent);box-shadow:0 0 8px rgba(90,176,168,.2);margin-bottom:12px;}
.wc-nameplate-tag{display:block;font-size:10px;color:#4a7870;letter-spacing:.28em;text-transform:uppercase;margin-bottom:10px;}
.wc-nameplate-mood{display:block;font-size:21px;color:#e8e0f0;letter-spacing:.04em;line-height:1.15;margin-bottom:11px;text-shadow:0 0 20px rgba(160,72,112,.35),0 0 40px rgba(160,72,112,.15);}
.wc-nameplate-rule{display:block;width:28px;height:1px;background:linear-gradient(90deg,transparent,#302848,transparent);margin:0 auto 9px;}
.wc-nameplate-meta{display:block;font-size:10px;color:#3a3050;letter-spacing:.14em;line-height:1.9;text-transform:uppercase;white-space:pre-line;}

/* shaker 遮罩 */
.wc-shaker{position:absolute;inset:0;z-index:10;background:#0f0c14;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;animation:wc-shaker-hide .6s ease 3.5s forwards;}
@keyframes wc-shaker-hide{from{opacity:1;}to{opacity:0;pointer-events:none;}}
.wc-shaker-svg{animation:wc-shake .35s ease-in-out infinite alternate;transform-origin:50% 80%;}
.wc-shaker-text{font-size:10px;color:#3d8878;letter-spacing:.12em;font-family:'Share Tech Mono',monospace;animation:wc-blink-txt 1.2s ease-in-out infinite;}
.wc-glass-svg{opacity:0;animation:wc-glass-show .6s ease 3.5s forwards;}
.wc-drink-footer{opacity:0;animation:wc-glass-show .6s ease 3.5s forwards;}
@keyframes wc-glass-show{from{opacity:0;}to{opacity:1;}}
@keyframes wc-shake{from{transform:rotate(-16deg);}to{transform:rotate(16deg);}}
@keyframes wc-blink-txt{0%,100%{opacity:.7;}50%{opacity:.2;}}
.wc-glass,.wc-mood,.wc-drink,.wc-drink-info,.wc-ice{display:none;}

/* ═══════════════════════════════════════════
   5. 酒卡颜色主题
═══════════════════════════════════════════ */
[data-color="amber"]  { --wc-liq-a:#f0a030; --wc-liq-b:#d07818; --wc-liq-c:#904010; --wc-liq-d:#501800; --wc-rim:rgba(255,235,160,.45); }
[data-color="crimson"] { --wc-liq-a:#e03040; --wc-liq-b:#b01828; --wc-liq-c:#780010; --wc-liq-d:#3a0008; --wc-rim:rgba(255,160,160,.45); }
[data-color="neon"]    { --wc-liq-a:#3cdae6; --wc-liq-b:#28cdd8; --wc-liq-c:#5037c8; --wc-liq-d:#0a0618; --wc-rim:rgba(60,218,230,.55); }
[data-color="toxic"]   { --wc-liq-a:#80e840; --wc-liq-b:#50c020; --wc-liq-c:#208000; --wc-liq-d:#0a1800; --wc-rim:rgba(160,240,80,.45); }
[data-color="murky"]   { --wc-liq-a:#706050; --wc-liq-b:#504030; --wc-liq-c:#302010; --wc-liq-d:#180800; --wc-rim:rgba(160,140,100,.35); }
[data-color="clear"]   { --wc-liq-a:rgba(220,235,255,.85); --wc-liq-b:rgba(200,220,255,.65); --wc-liq-c:rgba(160,190,240,.5); --wc-liq-d:rgba(100,130,200,.4); --wc-rim:rgba(200,220,255,.6); }
[data-color="ink"]     { --wc-liq-a:#3020a0; --wc-liq-b:#201880; --wc-liq-c:#100860; --wc-liq-d:#080420; --wc-rim:rgba(120,100,220,.5); }
[data-color="milk"]    { --wc-liq-a:rgba(245,240,230,.95); --wc-liq-b:rgba(235,228,215,.85); --wc-liq-c:rgba(210,200,185,.75); --wc-liq-d:rgba(180,168,148,.65); --wc-rim:rgba(245,240,220,.7); }
[data-color="rose"]    { --wc-liq-a:#f07aaa; --wc-liq-b:#d05088; --wc-liq-c:#901858; --wc-liq-d:#400028; --wc-rim:rgba(255,190,215,.5); }
[data-color="gold"]    { --wc-liq-a:#f8d060; --wc-liq-b:#e0b030; --wc-liq-c:#b07800; --wc-liq-d:#604000; --wc-rim:rgba(255,225,120,.5); }
[data-color="violet"]  { --wc-liq-a:#7840d0; --wc-liq-b:#5522a8; --wc-liq-c:#380080; --wc-liq-d:#180038; --wc-rim:rgba(170,130,255,.5); }
.wc-drink-wrap .wc-glass-svg stop:nth-child(3){ stop-color:var(--wc-liq-a,#f0a030) !important; }
.wc-drink-wrap .wc-glass-svg stop:nth-child(4){ stop-color:var(--wc-liq-b,#d07818) !important; }
.wc-drink-wrap .wc-glass-svg stop:nth-child(5){ stop-color:var(--wc-liq-c,#904010) !important; }
.wc-drink-wrap .wc-glass-svg stop:nth-child(6){ stop-color:var(--wc-liq-d,#501800) !important; }
.wc-drink-wrap .wc-glass-svg line:last-of-type { stroke:var(--wc-rim,rgba(255,235,160,.45)) !important; }

/* ═══════════════════════════════════════════
   6. 状态栏（对齐叙事区宽度 620px）
   VT323 像素字体实际渲染约 1.5x，所有字号缩小
═══════════════════════════════════════════ */
.wc-status {
  margin: 8px auto 0 !important;
  max-width: 620px !important;
  width: 95% !important;
  background: #09080e !important;
  border: 1px solid #1c162c !important;
  border-top: 2px solid #a04870 !important;
  font-family: 'VT323','Share Tech Mono',monospace !important;
  font-size: 13px !important;
  color: #c8c0d8 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}

/* 顶部总览 */
.wc-tonight {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
  padding: 7px 12px 6px !important;
  background: linear-gradient(90deg,#0d0b16 0%,#0f0c18 100%) !important;
  border-bottom: 1px solid #1c162c !important;
}
.wc-tonight-left {
  font-family: 'VT323','Share Tech Mono',monospace !important;
  color: #d0c8e0 !important;
  font-size: 12.5px !important;
  letter-spacing: .03em !important;
  flex: 1 1 auto !important;
  min-width: 140px !important;
}
.wc-tonight-right {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  align-items: center !important;
}

/* 状态芯片 */
.wc-stat-chip {
  font-family: 'VT323','Share Tech Mono',monospace !important;
  font-size: 11.5px !important;
  letter-spacing: .04em !important;
  padding: 2px 7px !important;
  border: 1px solid !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}
.wc-stat-chip.money { color:#f8d080 !important; border-color:#6a5020 !important; background:rgba(90,70,30,.18) !important; }
.wc-stat-chip.rent  { color:#ff9090 !important; border-color:#6a2020 !important; background:rgba(90,25,25,.18) !important; }
.wc-stat-chip.rev   { color:#80f0b0 !important; border-color:#1a5030 !important; background:rgba(25,55,35,.18) !important; }
.wc-stat-chip.flow  { color:#90e8d8 !important; border-color:#1a4848 !important; background:rgba(25,55,55,.18) !important; }

/* details 通用 */
.wc-status details { border-top: 1px solid #141020 !important; }
.wc-status details:first-of-type { border-top: none !important; }
.wc-status summary {
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  font-family: 'VT323','Share Tech Mono',monospace !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6ab0a8 !important;
  transition: color .15s !important;
  user-select: none !i

/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。