/* =========================================================
   熬夜 · 凌晨三点  ——  v2 UI
   ========================================================= */
:root{
  --bg:#06050b;
  --panel:#0b0916;
  --ink:#e9e3d4;
  --dim:#8d85a8;
  --gold:#ffd479;
  --cyan:#7fd4ff;
  --line:#2e2748;
  --line2:#3d3560;
  --font:"Zpix","Fusion Pixel 12px monospaced zh_hans","SimSun","宋体","Microsoft YaHei",monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:radial-gradient(1200px 700px at 50% 0%, #131024 0%, #08060e 55%, #05040a 100%);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:none;
  font-smooth:never;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:16px 12px;
  overflow-x:hidden;overflow-y:auto;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(120,110,180,.10) 1px, transparent 1px);
  background-size:4px 4px;opacity:.5;
}
.frame{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;}

.stage{
  position:relative;
  width:min(1080px, 97vw, 168vh);
  aspect-ratio:16/9;
  background:#05040a;
  border:3px solid #292449;
  box-shadow:0 0 0 3px #0a0812,0 0 0 5px #14101f,
    0 0 90px rgba(90,130,255,.13),0 30px 90px rgba(0,0,0,.75);
  overflow:hidden;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;}

.fx{position:absolute;inset:0;pointer-events:none;}
.scanlines{
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.30) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity:.42;mix-blend-mode:multiply;
}
.grain{
  background:
    repeating-linear-gradient(to right, rgba(255,0,80,.020) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(to bottom, rgba(80,255,200,.012) 0 3px, transparent 3px 7px);
  opacity:.7;
}
.vig{background:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 46%, rgba(0,0,0,.6) 100%);}

/* ---------------- 状态栏 ---------------- */
.hud{
  position:absolute;top:0;left:0;right:0;height:8.2%;min-height:30px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 12px;
  background:linear-gradient(180deg, rgba(9,7,16,.96) 0%, rgba(9,7,16,.66) 100%);
  border-bottom:2px solid #221d38;
  font-size:clamp(10px,1.02vw,13px);
  z-index:3;transition:opacity .3s ease;
}
.hud-left{display:flex;align-items:center;gap:8px;min-width:96px;}
.moon{color:var(--cyan);font-size:1.15em;opacity:.85;text-shadow:0 0 8px rgba(127,212,255,.5);}
.clock{
  color:var(--gold);font-size:1.75em;letter-spacing:.10em;
  text-shadow:0 0 10px rgba(255,212,121,.35),2px 2px 0 #2a1c10;
  font-variant-numeric:tabular-nums;
}
.bars{display:flex;gap:clamp(8px,1.3vw,18px);flex:1;justify-content:flex-end;flex-wrap:nowrap;overflow:visible;}
.bar{position:relative;display:flex;align-items:center;gap:5px;color:var(--dim);white-space:nowrap;}
.bar b{font-weight:400;font-size:.94em;letter-spacing:.04em;}
.track{position:relative;width:clamp(28px,4vw,52px);height:7px;background:#15102a;border:1px solid #2c2446;box-shadow:inset 0 1px 0 rgba(0,0,0,.7);}
.fill{position:absolute;left:0;top:0;bottom:0;width:50%;transition:width .45s ease;}
.fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to right, rgba(255,255,255,.18) 0 1px, transparent 1px 3px);}
.floater{
  position:absolute;left:50%;top:130%;transform:translateX(-50%);
  font-size:11px;white-space:nowrap;pointer-events:none;
  text-shadow:0 1px 0 #000, 0 0 8px currentColor;
  animation:floatUp 1.25s ease-out forwards;
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,4px)}
  18%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-20px)}
}
.hud-right{display:flex;gap:4px;}
.mini{
  font-family:inherit;font-size:.92em;line-height:1;color:#7d7599;
  background:transparent;border:1px solid #241f3c;padding:5px 7px;cursor:pointer;
}
.mini:hover{color:var(--gold);border-color:#5a4a2a;background:rgba(255,212,121,.06);}
.mini.off{color:#4a4460;text-decoration:line-through;}

/* ---------------- 章节卡 ---------------- */
.chapter{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:radial-gradient(ellipse at 50% 50%, rgba(4,3,10,.72) 0%, rgba(4,3,10,.94) 100%);
}
.chapter.show{animation:chapterIn 2.1s ease forwards;}
@keyframes chapterIn{
  0%{opacity:0}
  14%{opacity:1}
  70%{opacity:1}
  100%{opacity:0}
}
.ch-time{
  font-size:clamp(26px,4.4vw,52px);color:var(--gold);letter-spacing:.12em;
  text-shadow:4px 4px 0 #2a1c10,0 0 30px rgba(255,212,121,.3);
  font-variant-numeric:tabular-nums;
}
.ch-label{font-size:clamp(13px,1.7vw,19px);letter-spacing:.55em;color:#d8d0e8;text-indent:.55em;}
.ch-sub{font-size:clamp(10px,1.05vw,12px);letter-spacing:.22em;color:#7d7599;margin-top:6px;}

/* ---------------- 对话框 ---------------- */
.dialog{
  position:absolute;left:0;right:0;bottom:0;min-height:21%;
  padding:clamp(10px,1.4vw,15px) clamp(14px,2vw,24px) clamp(12px,1.6vw,18px);
  background:linear-gradient(180deg, rgba(8,6,14,.42) 0%, rgba(8,6,14,.90) 24%, rgba(6,5,11,.97) 100%);
  border-top:3px solid #2a2444;
  box-shadow:inset 0 2px 0 rgba(90,80,140,.18),0 -16px 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;z-index:2;transition:opacity .3s ease;
}
.who{
  align-self:flex-start;font-size:clamp(10px,.92vw,12px);color:#a79dc6;
  border:1px solid #302852;background:#100c1e;padding:2px 9px;letter-spacing:.14em;margin-bottom:8px;
}
.text{
  font-size:clamp(14px,1.5vw,19px);line-height:1.75;color:var(--ink);
  text-shadow:0 2px 0 rgba(0,0,0,.55);min-height:3.4em;letter-spacing:.02em;
}
.text .thought{color:#b6add2;}
.caret{display:inline-block;width:.52em;height:1em;margin-left:3px;background:var(--gold);vertical-align:-.12em;opacity:0;}
.caret.on{animation:blink 1s steps(1,end) infinite;}
@keyframes blink{0%,49%{opacity:.9}50%,100%{opacity:0}}

.choices{margin-top:9px;display:flex;flex-direction:column;gap:4px;}
.choice{
  font:inherit;font-size:clamp(13px,1.32vw,17px);text-align:left;color:#cfc7e3;background:transparent;
  border:1px solid transparent;border-left:2px solid #3a3358;padding:4px 10px;cursor:pointer;
  display:flex;gap:10px;align-items:baseline;
  transition:background .12s,color .12s,transform .12s,border-color .12s,box-shadow .12s;
}
.choice .k{color:#6f6690;font-size:.9em;}
.choice:hover,.choice.sel{
  background:linear-gradient(90deg, rgba(255,212,121,.13), rgba(255,212,121,0));
  border-color:#4a3f6e;border-left-color:var(--gold);color:#fff8e6;
  transform:translateX(3px);box-shadow:-6px 0 18px -8px rgba(255,212,121,.5);
}
.choice:hover .k,.choice.sel .k{color:var(--gold);}

.next-hint{position:absolute;right:clamp(14px,2vw,24px);bottom:clamp(8px,1.2vw,12px);color:var(--gold);font-size:12px;opacity:0;}
.next-hint.on{opacity:.9;animation:bob 1.1s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(3px);opacity:1}}

/* ---------------- 覆盖层 ---------------- */
.overlay{
  position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(4,3,9,.30) 0%, rgba(4,3,9,.80) 42%, rgba(4,3,9,.97) 100%);
  padding:3%;animation:fadeIn .35s ease;
}
.overlay.hidden{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay.is-title{place-items:end start;padding:0 0 3.4% 2.6%;}
.overlay.is-title .card{max-width:470px;}
.overlay.is-title{background:linear-gradient(105deg, rgba(4,3,9,.95) 0%, rgba(4,3,9,.86) 42%, rgba(4,3,9,.35) 74%, rgba(4,3,9,.15) 100%);}

.card{
  width:100%;max-width:640px;
  background:linear-gradient(180deg,#0c0a18 0%,#08060f 100%);
  border:3px solid var(--line2);
  box-shadow:0 0 0 3px #08060f,0 24px 70px rgba(0,0,0,.85),inset 0 0 0 1px rgba(120,100,190,.10);
  padding:clamp(16px,2.2vw,26px) clamp(18px,2.5vw,32px);
  position:relative;animation:pop .32s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes pop{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.card::before,.card::after{content:"";position:absolute;width:6px;height:6px;background:var(--gold);opacity:.55;}
.card::before{left:-2px;top:-2px;}
.card::after{right:-2px;bottom:-2px;}

.title-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;}
.logo{image-rendering:pixelated;display:block;filter:drop-shadow(5px 5px 0 #241a3c) drop-shadow(0 0 24px rgba(255,212,121,.20));}
.subtitle{color:var(--dim);letter-spacing:.16em;font-size:clamp(10px,1.1vw,13px);text-align:center;margin:2px 0 4px;}
.tagline{
  color:#6f6690;font-size:clamp(10px,1.02vw,12px);letter-spacing:.06em;text-align:center;
  border-top:1px dashed #241f3c;padding-top:8px;margin-top:2px;line-height:1.8;
}
.title-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
.btn{
  font:inherit;font-size:clamp(12px,1.25vw,15px);letter-spacing:.14em;color:var(--ink);
  background:#171226;border:2px solid var(--line2);padding:10px 20px;cursor:pointer;
  box-shadow:0 3px 0 #08060f,inset 0 1px 0 rgba(160,140,220,.15);
  transition:transform .1s,color .15s,border-color .15s,box-shadow .1s;
}
.btn:hover{color:var(--gold);border-color:#6a5a30;transform:translateY(-1px);box-shadow:0 4px 0 #08060f;}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #08060f;}
.btn.primary{border-color:#6a5a30;color:var(--gold);background:#1d1626;}

.end-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.end-kicker{font-size:clamp(10px,1vw,12px);color:#6f6690;letter-spacing:.24em;}
.end-title{font-size:clamp(20px,2.4vw,30px);color:var(--gold);letter-spacing:.12em;text-shadow:3px 3px 0 #2a1c10,0 0 24px rgba(255,212,121,.25);}
.badge{font-size:clamp(9px,.92vw,11px);letter-spacing:.14em;padding:2px 7px;border:1px solid currentColor;color:#9d94c0;}
.badge.good{color:#7fe0b8;}
.badge.warm{color:#ffb07a;}
.badge.warn{color:#ff7a7a;}
.end-lines{margin:12px 0 4px;}
.end-lines p{margin:.42em 0;line-height:1.85;color:#ded6c8;font-size:clamp(13px,1.36vw,17px);}
.epilogue{margin-top:10px;padding-left:12px;border-left:2px solid #3a3358;color:#a99fc8;font-size:clamp(12px,1.2vw,15px);line-height:1.8;}
.ledger{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding-top:10px;border-top:1px dashed #241f3c;font-size:clamp(10px,.92vw,12px);color:#7d7599;letter-spacing:.05em;}
.ledger b{color:#cfc7e3;font-weight:400;}

.gal-title{font-size:clamp(16px,1.85vw,22px);color:var(--gold);letter-spacing:.18em;margin-bottom:4px;}
.gal-sub{color:#6f6690;font-size:clamp(10px,1vw,12px);margin-bottom:14px;letter-spacing:.06em;}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.g-item{border:1px solid #241f3c;padding:8px 10px;background:#0a0813;display:flex;flex-direction:column;gap:2px;min-height:52px;}
.g-item .n{font-size:clamp(11px,1.1vw,13px);color:#4f4867;letter-spacing:.06em;}
.g-item .d{font-size:clamp(9px,.88vw,11px);color:#3b3552;letter-spacing:.05em;}
.g-item.on{border-color:#3d3560;background:#100c1c;}
.g-item.on .n{color:#ded6c8;}
.g-item.on .d{color:#7d7599;}
.g-item .dot{display:inline-block;width:5px;height:5px;background:#2a2444;margin-right:6px;vertical-align:middle;}
.g-item.on .dot{background:var(--gold);box-shadow:0 0 6px var(--gold);}

.footer{width:min(1080px,97vw);display:flex;justify-content:space-between;gap:12px;color:#4a4460;font-size:11px;letter-spacing:.08em;padding:0 4px;}
.foot-right{color:#332e46;}

/* 截图模式：关掉一切动画，保证稳定输出 */
body.still *,body.still *::before,body.still *::after{
  animation:none !important;transition:none !important;
}
body.still .chapter{opacity:0 !important;}

@media (max-width:720px){
  body{padding:8px 4px;}
  .stage{width:100%;}
  .bars .bar b{display:none;}
  .track{width:24px;}
  .footer{font-size:9px;}
  .hud-right .mini{padding:4px 5px;}
  .dialog{min-height:36%;}
}
@media (max-height:560px){
  .dialog{min-height:40%;}
  .text{font-size:13px;min-height:2.6em;}
}

/* ---------------- 聊天面板（凌晨的消息） ---------------- */
.chat{
  position:absolute;left:0;right:0;bottom:0;height:56%;z-index:5;
  display:none;flex-direction:column;
  background:linear-gradient(180deg, rgba(7,11,14,0) 0, rgba(7,11,14,.94) 12px, #060a0d 100%);
  border-top:3px solid #24323a;
  box-shadow:inset 0 2px 0 rgba(90,160,140,.14), 0 -18px 44px rgba(0,0,0,.55);
}
.chat.on{display:flex;animation:chatIn .22s ease;}
@keyframes chatIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.chat-head{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  border-bottom:1px solid #1b262c;font-size:12px;color:#7f9b96;letter-spacing:.12em;
}
.ch-who{color:#9fe0c8;}
.chat-when{color:#5d7a75;font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.06em;}
.ch-tag{margin-left:auto;color:#4c6662;font-size:11px;letter-spacing:.08em;}
.chat-body{flex:1;overflow-y:auto;padding:12px 14px 6px;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin;}
.chat-body::-webkit-scrollbar{width:6px;}
.chat-body::-webkit-scrollbar-thumb{background:#22303a;}
.msg{max-width:76%;padding:7px 11px;font-size:clamp(13px,1.28vw,16px);line-height:1.6;}
.msg.other{align-self:flex-start;background:#16232a;border-left:2px solid #2f6a5a;color:#cfe6dd;}
.msg.me{align-self:flex-end;background:#1a2038;border-right:2px solid #4a5a9a;color:#d8dcf0;}
.msg.sys{align-self:center;color:#5d6a7a;font-size:11px;letter-spacing:.1em;background:transparent;}
.msg.typing{padding:9px 12px;}
.msg.typing i{display:inline-block;width:4px;height:4px;margin-right:4px;background:#5d8a80;animation:dotp 1.1s infinite;}
.msg.typing i:nth-child(2){animation-delay:.18s}
.msg.typing i:nth-child(3){animation-delay:.36s}
@keyframes dotp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.chat-foot{display:flex;gap:8px;padding:10px 14px;border-top:1px solid #1b262c;align-items:center;}
#chatInput{
  flex:1;background:#0b1116;border:1px solid #24323a;color:#d8e6e0;
  font:inherit;font-size:14px;padding:8px 10px;outline:none;
}
#chatInput:focus{border-color:#3f6a5a;box-shadow:0 0 0 2px rgba(90,200,160,.08);}
.btn.small{padding:8px 14px;font-size:12px;letter-spacing:.1em;}

/* ---------------- 结局里的「第二天」 ---------------- */
.nextday{
  margin-top:14px;padding:12px 14px;
  border:1px solid #24323a;
  background:linear-gradient(180deg,rgba(18,28,32,.55),rgba(9,13,17,.55));
}
.nd-label{display:inline-block;font-size:10px;letter-spacing:.26em;color:#7f9b96;}
.nd-line{margin:7px 0 0;font-size:clamp(13px,1.32vw,16px);line-height:1.85;color:#dff0e8;opacity:0;transition:opacity .55s ease;}
.nd-line.in{opacity:1;}
.nd-wait{color:#4c6662;letter-spacing:.14em;}
.nd-wait i{display:inline-block;width:4px;height:4px;margin-right:4px;background:#4c6662;animation:dotp 1.1s infinite;}
.nd-wait i:nth-child(2){animation-delay:.18s}
.nd-wait i:nth-child(3){animation-delay:.36s}

/* 选项里的 AI 标记 */
.choice .ai{
  font-style:normal;font-size:.72em;letter-spacing:.1em;
  color:#7fe0b8;border:1px solid #2f6a5a;background:rgba(60,160,130,.10);
  padding:1px 5px;margin-left:10px;vertical-align:1px;white-space:nowrap;
}