/* 三个概念版本共用的底:世界层、角色层、顶部字标、世界切换、版本切换。
   10-03 二稿:界面元素不常驻 —— 鼠标停 3.5s 后外壳淡出,只剩世界;状态条只在她换事做的那几秒出现。 */
:root{--ink:#0a0a0c;--paper:#f2efe8;--dim:rgba(242,239,232,.62);--amber:#e9b25a;--glass:rgba(10,10,12,.6);--line:rgba(242,239,232,.16)}
*{box-sizing:border-box;margin:0}html,body{height:100%}
body{background:var(--ink);color:var(--paper);font:14px/1.6 "Noto Sans SC",Inter,system-ui,sans-serif;overflow:hidden;cursor:default}
a{color:inherit}

/* ── 世界层 ── */
.world{position:fixed;inset:0;overflow:hidden}
.bg{position:absolute;inset:-6%;opacity:0;transition:opacity 2.4s ease;animation:drift 38s ease-in-out infinite alternate;background-size:cover;background-position:center}
.bg video{width:100%;height:100%;object-fit:cover;display:block}
.bg.on{opacity:1}
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,1%)}}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 45%,transparent 40%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,rgba(0,0,0,.3),transparent 30%,transparent 70%,rgba(0,0,0,.6))}
.sweep{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transform:translateX(-100%);pointer-events:none}
.sweep.go{animation:sweep 2.2s ease-out}
@keyframes sweep{to{transform:translateX(100%)}}

/* ── 角色层:站进画里,近大远小;远的带一点雾、少一点对比 ── */
.cast{position:absolute;inset:0}
.who{position:absolute;transform:translate(-50%,-100%);cursor:pointer;opacity:0;pointer-events:none;transition:opacity 1.2s ease .6s,left 1.8s ease,top 1.8s ease,filter .6s ease;
  filter:drop-shadow(0 calc(18px - var(--d,0)*12px) calc(24px - var(--d,0)*14px) rgba(0,0,0,.55)) contrast(calc(1 - var(--d,0)*.18)) brightness(calc(1 - var(--d,0)*.08)) blur(calc(var(--d,0)*.6px))}
.who.on{opacity:1;pointer-events:auto}
.who img,.who video{display:block;height:var(--h,42vh);width:auto;animation:breathe 4.6s ease-in-out infinite;transform-origin:50% 100%;transition:transform .5s ease;
  /* 立绘的硬底边溶进画面(VN 的老办法),不再像贴上去的一张纸 */
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.6) 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.6) 88%,transparent 100%)}
.who:nth-child(2n) img,.who:nth-child(2n) video{animation-duration:5.3s;animation-delay:-1.7s}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012) translateY(-2px)}}
.who::before{content:"";position:absolute;left:50%;bottom:4%;width:50%;height:12px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(233,178,90,.4),transparent 70%);filter:blur(4px)}
/* "她在做什么":只在换事做的那几秒 + hover 时出现 */
.pulse{position:absolute;top:-34px;left:55%;display:flex;align-items:center;gap:7px;padding:4px 10px 4px 7px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);font:11px/1.4 ui-monospace,monospace;color:var(--dim);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.pulse.show,.who:hover .pulse{opacity:1;transform:none}
.pulse i{width:6px;height:6px;border-radius:50%;background:var(--c,var(--amber));box-shadow:0 0 8px var(--c,var(--amber));animation:blink 1.8s ease-in-out infinite}
.pulse b{font-weight:500;color:var(--c,var(--amber));margin-right:2px}
.pulse.you{color:var(--paper);border-color:rgba(233,178,90,.6);background:rgba(233,178,90,.14)}
@keyframes blink{50%{opacity:.25}}
/* 场外角色:地点上一个很小的呼吸点,说话时才有气泡 */
.off{position:absolute;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--paper);opacity:0;transition:opacity 1.2s ease .6s;box-shadow:0 0 0 0 rgba(242,239,232,.5);animation:offring 3s ease-out infinite;pointer-events:none}
.off.on{opacity:.75}
@keyframes offring{to{box-shadow:0 0 0 12px rgba(242,239,232,0)}}

/* ── 外壳:鼠标停住就淡出 ── */
.chrome{transition:opacity .7s ease}
body.idle .chrome{opacity:0;pointer-events:none}
body.idle .top{opacity:.72}
.top{position:fixed;top:22px;left:28px;z-index:6;max-width:min(560px,60vw);transition:opacity 1.2s ease}
.top b{font-family:"Young Serif",Georgia,serif;font-size:19px;letter-spacing:.01em}
.top h1{margin-top:10px;text-wrap:balance;font-size:clamp(20px,2.4vw,30px);line-height:1.3;font-weight:600;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.top p{margin-top:6px;font-size:12.5px;color:var(--dim);max-width:52ch;text-shadow:0 1px 12px rgba(0,0,0,.7)}

/* ── 底部:世界名 + 世界切换(都是外壳,会淡出) ── */
.wname{position:fixed;left:28px;bottom:30px;z-index:6;font:11px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.wname b{color:var(--paper);font-weight:500}
.dots{position:fixed;right:28px;bottom:100px;z-index:6;display:flex;gap:10px;align-items:center;font:11px ui-monospace,monospace;color:var(--dim)}
.dots button{height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font:11px ui-monospace,monospace;transition:all .25s ease}
.dots button.on,.dots button:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.dots .discover{margin-left:6px;padding:0 10px;height:22px;line-height:20px;border-radius:999px;border:1px dashed rgba(233,178,90,.6);color:var(--amber);text-decoration:none;font:11px ui-monospace,monospace;white-space:nowrap}
.dots .discover:hover{background:rgba(233,178,90,.15)}
.dots .discover.soon{opacity:.45;cursor:not-allowed;filter:grayscale(.7)}.dots .discover.soon:hover{background:transparent}


/* ── 通用卡片/面板 ── */
.glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(16px);border-radius:14px}
.btn{font:12.5px ui-monospace,monospace;padding:9px 13px;border:1px solid var(--line);border-radius:8px;color:var(--paper);text-decoration:none;white-space:nowrap;background:transparent;cursor:pointer}
.btn.main{background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:700}
.k{font:10.5px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}