/* 《渡》的样子：宣纸、墨、朱砂、石青。舞台按 1600×900 设计，整体缩放。 */
@font-face { font-family: "WenKai"; src: url("../assets/fonts/lxgw-wenkai-ui.woff2") format("woff2"); font-display: swap; }
:root {
--paper: #f2ead8; --paper-2: #e9dfc8; --paper-3: #d9ccae;
--ink: #1d1b17; --ink-2: #3b372f; --ink-3: #6b6558; --ink-4: #9a927f;
--red: #b23a2b; --red-2: #8f2a1f; --green: #2f6b5e; --blue: #2d4f7a; --gold: #b88a3a;
--kai: "WenKai", "霞鹜文楷", "LXGW WenKai", "KaiTi", "STKaiti", "楷体", "Songti SC", serif;
--grain: url("data:image/svg+xml;utf8,");
--fiber: url("data:image/svg+xml;utf8,");
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #0f0e0c; overflow: hidden; }
body { font-family: var(--kai); color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
#frame { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 40%, #24211c 0%, #0f0e0c 75%); }
#stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; margin: -450px 0 0 -800px; transform-origin: 50% 50%; overflow: clip; background: var(--paper); box-shadow: 0 0 80px rgba(0,0,0,.6); }
.paper { background-color: var(--paper); background-image: var(--grain), var(--fiber); }
/* ---------- 背景 */
#bg { position: absolute; inset: 0; background: #2a2823; }
.bgl { position: absolute; inset: -3%; background-size: cover; background-position: center; opacity: 0; will-change: opacity, transform; }
.bgl.on { opacity: 1; }
.bgl { filter: saturate(.9) brightness(var(--bgb, 1)); transition: opacity 1.1s ease, filter .8s ease; }
#stage[data-tone="night"] { --bgb: 1.4; }
#stage[data-tone="dusk"] { --bgb: 1.08; }
#stage.talk .bgl { filter: blur(3px) saturate(.8) brightness(calc(var(--bgb, 1) * .96)); }
.bgl.drift { animation: drift 46s ease-in-out infinite alternate; }
.bgl.drift2 { animation: drift2 52s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.0) translate(0,0); } to { transform: scale(1.045) translate(-0.8%, -0.6%); } }
@keyframes drift2 { from { transform: scale(1.04) translate(0.7%, -0.4%); } to { transform: scale(1.0) translate(-0.3%, 0.3%); } }
#bg::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .55; mix-blend-mode: multiply; pointer-events: none; }
#stage[data-tone="night"] #bg::after { opacity: .35; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#windowframe { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s; background:
linear-gradient(#17120d, #17120d) left/110px 100% no-repeat, linear-gradient(#17120d, #17120d) right/110px 100% no-repeat,
linear-gradient(#17120d, #17120d) top/100% 70px no-repeat, linear-gradient(#1b150f, #1b150f) bottom/100% 250px no-repeat,
linear-gradient(#17120d, #17120d) center/26px 100% no-repeat, linear-gradient(#17120d, #17120d) center 38%/100% 22px no-repeat;
box-shadow: inset 0 0 180px rgba(0,0,0,.75); }
#windowframe.on { opacity: 1; }
/* ---------- 人物 */
#chars { position: absolute; inset: 0; pointer-events: none; }
.char { position: absolute; bottom: 0; left: 50%; width: 600px; height: 760px; margin-left: -300px; opacity: 0; transform: translateX(var(--x, 0px)) translateY(24px) scale(var(--s, 1)); transform-origin: 50% 100%; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; filter: brightness(.74) saturate(.8); }
.char.rive { width: 620px; height: 930px; margin-left: -310px; bottom: -150px; }
.char.img { width: 600px; height: 760px; margin-left: -300px; bottom: 96px; }
.char.on { opacity: 1; transform: translateX(var(--x, 0px)) translateY(0) scale(var(--s, 1)); }
.char.speaking { filter: none; --s: 1.03; z-index: 2; }
.char canvas, .char img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; }
.char.rive canvas { -webkit-mask-image: linear-gradient(#000 62%, transparent 79%); mask-image: linear-gradient(#000 62%, transparent 79%); }
.char.img img { -webkit-mask-image: linear-gradient(#000 70%, transparent 96%); mask-image: linear-gradient(#000 70%, transparent 96%); }
.char .body { position: absolute; inset: 0; animation: breathe 5.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.008) translateY(-2px); } }
.char .blush { position: absolute; width: 26%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(214,92,80,.42), transparent); opacity: 0; transition: opacity .5s; mix-blend-mode: multiply; }
.char.f-shy .blush { opacity: 1; }
.char .mark { position: absolute; left: 68%; top: 6%; font-size: 54px; color: var(--ink); opacity: 0; text-shadow: 0 0 6px #fff8; }
.char.f-start .body { animation: start .5s ease 1, breathe 5.2s ease-in-out .5s infinite; }
.char.f-laugh .body { animation: laugh .9s ease 1, breathe 5.2s ease-in-out .9s infinite; }
.char.f-nod .body { animation: nod .7s ease 1, breathe 5.2s ease-in-out .7s infinite; }
.char.f-shake .body { animation: headshake .8s ease 1, breathe 5.2s ease-in-out .8s infinite; }
.char.f-sink .body { animation: sink 1.4s ease 1 forwards; }
.char.f-sway .body { animation: sway 1.6s ease 1, breathe 5.2s ease-in-out 1.6s infinite; }
@keyframes start { 0% { transform: translateY(0); } 25% { transform: translateY(-16px) scale(1.012); } 100% { transform: translateY(0); } }
@keyframes laugh { 0%,100% { transform: translateY(0); } 20%,60% { transform: translateY(-9px) rotate(-.6deg); } 40%,80% { transform: translateY(0) rotate(.6deg); } }
@keyframes nod { 0%,100% { transform: translateY(0); } 40% { transform: translateY(10px); } }
@keyframes headshake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-9px); } 75% { transform: translateX(9px); } }
@keyframes sink { to { transform: translateY(9px) scale(.992); } }
@keyframes sway { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-1.2deg) translateX(-5px); } 70% { transform: rotate(.9deg) translateX(4px); } }
/* ---------- 插画、黑场 */
#cg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
#cg.on { opacity: 1; animation: drift 60s ease-in-out infinite alternate; }
#veil { position: absolute; inset: 0; background: #0b0a09; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
#veil.on { opacity: 1; }
#veil.white { background: #f6f1e4; }
#stage { transform: var(--fit, scale(1)); }
#stage.shake { animation: quake .5s linear 1; }
@keyframes quake { 0%,100% { transform: var(--fit) translate(0,0); } 20% { transform: var(--fit) translate(-9px, 5px); } 40% { transform: var(--fit) translate(8px,-6px); } 60% { transform: var(--fit) translate(-6px,-4px); } 80% { transform: var(--fit) translate(5px, 6px); } }
/* ---------- 左上右上 */
#hud { position: absolute; left: 0; right: 0; top: 0; padding: 22px 28px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; opacity: 0; transition: opacity .5s; z-index: 20; }
#stage[data-screen="play"] #hud, #stage[data-screen="map"] #hud { opacity: 1; }
#hud-left, #hud-right { display: flex; gap: 10px; pointer-events: auto; }
.chip { display: inline-block; padding: 7px 16px 6px; font-size: 21px; letter-spacing: 2px; color: var(--paper); background: rgba(24,22,18,.72); border: 1px solid rgba(242,234,216,.28); border-radius: 2px; backdrop-filter: blur(3px); }
.chip:empty { display: none; }
.chip b { color: #f0b9a6; font-weight: normal; margin-left: 10px; }
#hud-date { border-left: 5px solid var(--red); }
.hbtn { padding: 7px 15px 6px; font-size: 19px; letter-spacing: 3px; color: var(--paper); background: rgba(24,22,18,.6); border: 1px solid rgba(242,234,216,.28); border-radius: 2px; transition: background .2s, color .2s; }
.hbtn:hover { background: rgba(242,234,216,.92); color: var(--ink); }
.hbtn.on { background: var(--red); border-color: var(--red); color: #fff5e6; }
/* 手机上：画面缩小到四成左右，按钮和字放大一点，手指点得到、看得清 */
body.touch .hbtn { padding: 13px 22px 11px; font-size: 28px; }
body.touch .chip { padding: 10px 20px 9px; font-size: 27px; }
body.touch #text { font-size: 35px; }
body.touch #name { font-size: 31px; }
body.touch .hbtn:hover { background: rgba(24,22,18,.6); color: var(--paper); }
body.touch .hbtn.on:hover { background: var(--red); color: #fff5e6; }
/* ---------- 戏名 */
#banner { position: absolute; left: 0; right: 0; top: 330px; height: 150px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; z-index: 30;
background: linear-gradient(90deg, transparent 0%, rgba(20,18,15,.0) 8%, rgba(20,18,15,.86) 26%, rgba(20,18,15,.92) 50%, rgba(20,18,15,.86) 74%, rgba(20,18,15,0) 92%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 62%, transparent 100%); }
#banner.show { animation: banner 2.6s ease 1; }
#banner-text { font-size: 58px; letter-spacing: 22px; color: var(--paper); padding-left: 22px; text-shadow: 0 0 18px rgba(0,0,0,.5); }
#banner-text::before, #banner-text::after { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--red); transform: rotate(45deg); margin: 0 34px 12px; }
@keyframes banner { 0% { opacity: 0; transform: scaleX(.6); } 16% { opacity: 1; transform: scaleX(1); } 78% { opacity: 1; } 100% { opacity: 0; } }
/* ---------- 对话 */
#dialog { position: absolute; left: 130px; right: 130px; bottom: 34px; min-height: 216px; padding: 40px 64px 36px 70px; opacity: 0; transform: translateY(18px); transition: opacity .35s, transform .35s; z-index: 10; cursor: pointer;
background-color: #f3ecdc; background-image: var(--grain), var(--fiber);
border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 0 60px rgba(160,130,80,.16); }
#dialog::before, #dialog::after { content: ""; position: absolute; top: -9px; bottom: -9px; width: 20px; background: linear-gradient(90deg, #2a211a, #6a5034 45%, #2a211a); border-radius: 6px; box-shadow: 0 0 10px rgba(0,0,0,.5); }
#dialog::before { left: -14px; } #dialog::after { right: -14px; }
#dialog.show { opacity: 1; transform: none; }
#name { position: absolute; left: 60px; top: -30px; padding: 9px 26px 7px; font-size: 27px; letter-spacing: 8px; color: #fff7e8; background: var(--ink-2); box-shadow: 3px 4px 0 rgba(0,0,0,.25); display: none; }
#name.show { display: block; }
#name::after { content: ""; position: absolute; right: -9px; top: 0; bottom: 0; width: 9px; background: var(--red); }
#text { font-size: 31px; line-height: 1.72; letter-spacing: 1.5px; color: var(--ink); min-height: 108px; white-space: pre-wrap; }
#text.inner { color: var(--ink-3); }
#text.narr { color: var(--ink-2); text-indent: 2em; }
#text .dim { opacity: 0; }
#next { position: absolute; right: 44px; bottom: 26px; width: 17px; height: 17px; background: var(--red); transform: rotate(45deg); opacity: 0; }
#next.show { opacity: 1; animation: nextb 1.1s ease-in-out infinite; }
@keyframes nextb { 0%,100% { transform: translateY(0) rotate(45deg); opacity: 1; } 50% { transform: translateY(7px) rotate(45deg); opacity: .5; } }
/* ---------- 选择 */
#choices { position: absolute; left: 0; right: 0; top: 150px; bottom: 270px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 40; }
#choices.show { display: flex; }
#choices::before { content: ""; position: absolute; inset: -150px 0 -270px; background: radial-gradient(ellipse at 50% 45%, rgba(15,13,10,.62), rgba(15,13,10,.18) 70%); pointer-events: none; }
.opt { position: relative; width: 880px; min-height: 76px; padding: 18px 40px 16px 92px; font-size: 29px; letter-spacing: 1.5px; text-align: left; color: var(--ink); border: none; border-left: 8px solid var(--red);
background-color: var(--paper); background-image: var(--grain), var(--fiber); box-shadow: 0 8px 26px rgba(0,0,0,.4); opacity: 0; transform: translateX(-40px); animation: optin .5s cubic-bezier(.2,.8,.2,1) forwards; transition: transform .18s ease, box-shadow .18s ease, background-color .18s; }
.opt:nth-child(2) { animation-delay: .08s; } .opt:nth-child(3) { animation-delay: .16s; } .opt:nth-child(4) { animation-delay: .24s; } .opt:nth-child(5) { animation-delay: .32s; }
@keyframes optin { to { opacity: 1; transform: none; } }
.opt::before { content: attr(data-n); position: absolute; left: 26px; top: 50%; width: 42px; height: 42px; margin-top: -21px; line-height: 42px; text-align: center; font-size: 23px; color: var(--red); border: 2px solid var(--red); border-radius: 3px; }
.opt:hover, .opt.focus { transform: translateX(14px); box-shadow: 0 12px 34px rgba(0,0,0,.5); background-color: #fbf5e6; }
.opt:hover::before, .opt.focus::before { background: var(--red); color: #fff5e6; }
.opt.picked { animation: picked .6s ease forwards; }
.opt.gone { animation: gone .4s ease forwards; }
@keyframes picked { 30% { transform: scale(1.03); } 100% { transform: scale(1.03); opacity: 0; } }
@keyframes gone { to { opacity: 0; transform: translateX(40px); } }
/* 一炷香 */
#incense { position: relative; width: 880px; height: 64px; margin-bottom: 4px; }
#incense .stick { position: absolute; left: 0; right: 0; top: 38px; height: 7px; border-radius: 4px; background: #3a2c1e; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
#incense .left { position: absolute; left: 0; top: 38px; height: 7px; border-radius: 4px; background: linear-gradient(#b08b54, #7b5a30); width: 100%; }
#incense .ash { position: absolute; top: 38px; right: 0; height: 7px; background: #9c968a; border-radius: 4px; opacity: .65; }
#incense .ember { position: absolute; top: 31px; width: 21px; height: 21px; margin-left: -10px; border-radius: 50%; background: radial-gradient(#fff3c8 0%, #ff8a3a 35%, #c5341c 60%, transparent 72%); box-shadow: 0 0 22px 6px rgba(255,120,40,.55); }
#incense .smoke { position: absolute; top: -34px; width: 60px; height: 70px; margin-left: -30px; background: radial-gradient(ellipse at 50% 100%, rgba(240,235,225,.5), transparent 70%); filter: blur(6px); animation: smoke 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
#incense .label { position: absolute; left: 0; top: 0; font-size: 21px; letter-spacing: 6px; color: var(--paper); text-shadow: 0 0 8px #000; }
#incense.urgent .ember { animation: ember .42s ease-in-out infinite; }
#incense.urgent .label { color: #ffb9a0; }
@keyframes smoke { 0% { transform: translateY(0) scaleX(.6) rotate(-6deg); opacity: .0; } 30% { opacity: .9; } 100% { transform: translateY(-34px) scaleX(1.5) rotate(9deg); opacity: 0; } }
@keyframes ember { 50% { transform: scale(1.5); } }
/* ---------- 小提示 */
#toasts { position: absolute; right: 30px; top: 86px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 50; pointer-events: none; }
.toast { padding: 7px 18px 6px; font-size: 20px; letter-spacing: 2px; color: var(--paper); background: rgba(24,22,18,.78); border-right: 4px solid var(--red); animation: toast 3.2s ease forwards; }
.toast b { font-weight: normal; color: #f3c0a8; }
@keyframes toast { 0% { opacity: 0; transform: translateX(30px); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
/* ---------- 各个全屏画面 */
.screen { position: absolute; inset: 0; display: none; z-index: 60; overflow: clip; }
.screen.show { display: block; }
/* 载入 */
#loading { background-color: var(--paper); background-image: var(--grain), var(--fiber); z-index: 100; }
.load-box { position: absolute; left: 50%; top: 50%; width: 520px; transform: translate(-50%, -54%); text-align: center; }
.load-title { width: 220px; height: 220px; margin: 0 auto 6px; font-size: 0; color: transparent; background: url('../assets/ui/title_du.png') center/contain no-repeat; }
.load-sub { font-size: 30px; letter-spacing: 20px; color: var(--ink-3); margin: 6px 0 56px 20px; }
.load-bar { height: 5px; background: var(--paper-3); position: relative; overflow: hidden; border-radius: 3px; }
.load-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--ink), var(--ink-2)); transition: width .3s; }
.load-msg { margin-top: 20px; font-size: 22px; letter-spacing: 6px; color: var(--ink-3); }
/* 标题 */
#title { background: #1b1915; z-index: 90; }
#title .art { position: absolute; inset: 0; background-size: cover; background-position: center; animation: drift 70s ease-in-out infinite alternate; }
#title .wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(242,234,216,0) 35%, rgba(242,234,216,.72) 62%, rgba(242,234,216,.96) 100%), linear-gradient(0deg, rgba(20,18,14,.5), transparent 30%); }
#title .grain { position: absolute; inset: 0; background-image: var(--grain); mix-blend-mode: multiply; opacity: .8; }
#title .name { position: absolute; right: 196px; top: 40px; width: 300px; height: 300px; font-size: 0; color: transparent; background: url('../assets/ui/title_du.png') center/contain no-repeat; filter: drop-shadow(0 0 26px rgba(242,234,216,.95)); animation: inkin 2.2s ease both; }
#title .sub { position: absolute; right: 136px; top: 76px; writing-mode: vertical-rl; font-size: 38px; letter-spacing: 16px; color: var(--ink-2); animation: inkin 2.2s ease .5s both; }
#title .seal { position: absolute; right: 124px; top: 396px; width: 62px; padding: 9px 0 7px; writing-mode: vertical-rl; text-align: center; font-size: 28px; line-height: 62px; letter-spacing: 3px; color: #fff3e6; background: var(--red); border-radius: 5px; box-shadow: inset 0 0 0 3px rgba(255,240,220,.35); animation: stamp .5s ease 1.6s both; }
#title .line { position: absolute; right: 470px; top: 70px; writing-mode: vertical-rl; font-size: 27px; letter-spacing: 10px; line-height: 2.1; color: var(--ink-2); animation: inkin 2.4s ease 1.1s both; }
#title .menu { position: absolute; right: 150px; bottom: 54px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; animation: inkin 1.6s ease 1.8s both; }
#title .menu button { background: none; border: none; font-size: 31px; letter-spacing: 12px; line-height: 1.25; padding: 5px 4px 5px 30px; color: var(--ink); position: relative; transition: color .2s, transform .2s; }
#title .menu button::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -8px; background: var(--red); transform: rotate(45deg) scale(0); transition: transform .2s; }
#title .menu button:hover:not(:disabled) { color: var(--red-2); transform: translateX(-8px); }
#title .menu button:hover:not(:disabled)::before { transform: rotate(45deg) scale(1); }
#title .menu button:disabled { color: var(--ink-4); cursor: default; }
#title .menu small { font-size: 20px; letter-spacing: 3px; color: var(--ink-3); }
#title .foot { position: absolute; left: 36px; bottom: 26px; font-size: 18px; letter-spacing: 2px; color: rgba(242,234,216,.8); text-shadow: 0 0 6px #000; }
@keyframes inkin { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: none; } }
@keyframes stamp { from { opacity: 0; transform: scale(1.8) rotate(-8deg); } to { opacity: 1; transform: none; } }
/* 黄历页 */
#daycard { background-color: var(--paper); background-image: var(--grain), var(--fiber); z-index: 70; cursor: pointer; }
#daycard .ridge { position: absolute; left: 0; right: 0; bottom: 0; height: 420px; opacity: .9; background:
radial-gradient(ellipse 46% 95% at 22% 100%, rgba(40,52,48,.38), transparent 70%), radial-gradient(ellipse 40% 80% at 58% 100%, rgba(40,52,48,.28), transparent 70%), radial-gradient(ellipse 50% 60% at 86% 100%, rgba(40,52,48,.2), transparent 70%); filter: blur(2px); }
#daycard .date { position: absolute; right: 270px; top: 96px; height: 760px; white-space: nowrap; writing-mode: vertical-rl; font-size: 122px; letter-spacing: 0; line-height: 1.1; color: var(--ink); animation: inkin 1.1s ease both; }
#daycard .note { position: absolute; right: 210px; top: 150px; writing-mode: vertical-rl; padding: 14px 7px; font-size: 34px; letter-spacing: 8px; color: #fff3e6; background: var(--red); border-radius: 4px; animation: stamp .45s ease .7s both; }
#daycard .count { position: absolute; left: 150px; bottom: 150px; font-size: 32px; letter-spacing: 6px; line-height: 2; color: var(--ink-2); animation: inkin 1.2s ease .5s both; }
#daycard .count b { font-weight: normal; color: var(--red-2); font-size: 44px; margin: 0 6px; }
#daycard .rule { position: absolute; left: 150px; bottom: 132px; width: 420px; height: 2px; background: var(--ink); opacity: .6; }
#daycard.out { animation: fadeout .7s ease forwards; }
@keyframes fadeout { to { opacity: 0; } }
/* 地图 */
#map { background: #14120f; z-index: 55; }
#map .img { position: absolute; inset: 0; background-size: cover; background-position: center; animation: mapin 1.2s ease both; }
#map .shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(12,10,8,.4) 100%), linear-gradient(180deg, rgba(12,10,8,.6) 0%, transparent 20%, transparent 76%, rgba(12,10,8,.6) 100%); pointer-events: none; }
#map .grain { position: absolute; inset: 0; background-image: var(--grain); mix-blend-mode: multiply; opacity: .6; pointer-events: none; }
#map canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#map .ask { position: absolute; left: 0; right: 0; top: 78px; text-align: center; font-size: 34px; letter-spacing: 12px; color: var(--paper); text-shadow: 0 2px 12px #000; pointer-events: none; }
#map .tip { position: absolute; left: 0; right: 0; top: 132px; text-align: center; font-size: 22px; letter-spacing: 4px; color: rgba(242,234,216,.85); text-shadow: 0 1px 8px #000; pointer-events: none; }
@keyframes mapin { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.leads line { stroke: rgba(246,240,224,.9); stroke-width: 2; filter: drop-shadow(0 0 3px #000); }
.pdot { position: absolute; width: 15px; height: 15px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--red); border: 2px solid var(--paper); box-shadow: 0 0 10px rgba(0,0,0,.8); cursor: pointer; z-index: 2; }
.pdot.quiet { background: var(--ink-4); }
.pdot.sel { box-shadow: 0 0 0 7px rgba(178,58,43,.4), 0 0 10px #000; }
.pdot.hot { animation: hot 1.5s ease-in-out infinite; }
@keyframes hot { 0%,100% { box-shadow: 0 0 0 0 rgba(178,58,43,.75), 0 0 10px #000; } 50% { box-shadow: 0 0 0 13px rgba(178,58,43,0), 0 0 10px #000; } }
.ptag { position: absolute; display: flex; gap: 6px; align-items: flex-start; cursor: pointer; z-index: 3; animation: pinin .5s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes pinin { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
.ptag .tag { writing-mode: vertical-rl; padding: 12px 8px 10px; font-size: 25px; line-height: 30px; letter-spacing: 6px; white-space: nowrap; color: var(--ink); background-color: var(--paper); background-image: var(--grain); border-top: 4px solid var(--red); box-shadow: 0 5px 16px rgba(0,0,0,.55); transition: transform .18s, background-color .18s; }
.ptag .who { display: flex; flex-direction: column; gap: 5px; }
.ptag .who i { display: block; width: 34px; height: 34px; line-height: 33px; text-align: center; font-style: normal; font-size: 21px; color: #fff3e6; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,240,220,.3); }
.ptag.quiet .tag { background-color: #cfc5ad; color: var(--ink-3); border-top-color: var(--ink-4); }
.ptag:hover .tag, .ptag.sel .tag { transform: translateY(-5px); background-color: #fffaf0; }
#mapinfo { position: absolute; left: 50%; bottom: 40px; width: 900px; margin-left: -450px; padding: 26px 210px 24px 46px; min-height: 130px; background-color: rgba(243,236,220,.96); background-image: var(--grain), var(--fiber); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.5); opacity: 0; transform: translateY(16px); transition: opacity .25s, transform .25s; }
#mapinfo.show { opacity: 1; transform: none; }
#mapinfo h3 { margin: 0 0 6px; font-size: 32px; font-weight: normal; letter-spacing: 8px; }
#mapinfo h3 small { font-size: 21px; letter-spacing: 3px; color: var(--ink-3); margin-left: 14px; }
#mapinfo p { margin: 0; font-size: 25px; line-height: 1.6; color: var(--ink-2); }
#mapgo { position: absolute; right: 44px; top: 50%; width: 120px; height: 120px; margin-top: -60px; border-radius: 9px; border: none; font-size: 54px; color: #fff3e6; background: var(--red); box-shadow: inset 0 0 0 4px rgba(255,240,220,.35), 0 6px 16px rgba(0,0,0,.35); transition: transform .15s; }
#mapgo:hover { transform: scale(1.06) rotate(-3deg); }
/* 回看 */
#log { background: rgba(12,10,8,.6); z-index: 95; }
#log .panel { position: absolute; right: 0; top: 0; bottom: 0; width: 820px; padding: 60px 56px 40px; overflow-y: auto; background-color: var(--paper); background-image: var(--grain), var(--fiber); box-shadow: -10px 0 50px rgba(0,0,0,.5); }
#log h2 { margin: 0 0 26px; font-size: 40px; font-weight: normal; letter-spacing: 14px; }
#log .row { margin-bottom: 16px; font-size: 24px; line-height: 1.65; color: var(--ink-2); }
#log .row b { font-weight: normal; color: var(--red-2); margin-right: 12px; }
#log .row.sep { margin: 26px 0 16px; padding-top: 14px; border-top: 1px solid var(--paper-3); color: var(--ink-3); letter-spacing: 4px; font-size: 20px; }
#log .row.pick { color: var(--green); }
#log .close { position: absolute; right: 30px; top: 26px; background: none; border: none; font-size: 30px; color: var(--ink-3); }
/* 结局 */
#ending { background: #14120f; z-index: 80; }
#ending .art { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 2.4s ease; animation: drift 80s ease-in-out infinite alternate; }
#ending .art.on { opacity: .9; }
#ending .dark { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,12,10,.2), rgba(14,12,10,.2) 30%, rgba(14,12,10,.72) 100%); }
#ending .sign { position: absolute; left: 112px; top: 70px; width: 66px; padding: 24px 0 18px; writing-mode: vertical-rl; text-align: center; line-height: 66px; font-size: 33px; letter-spacing: 6px; white-space: nowrap; color: var(--red-2); background-color: #e6d2a0; background-image: var(--grain); border-radius: 43px 43px 6px 6px; box-shadow: 0 10px 30px rgba(0,0,0,.6); opacity: 0; transform: translateY(-220px) rotate(-8deg); transition: opacity .6s, transform .9s cubic-bezier(.3,1.4,.4,1); }
#ending .sign.on { opacity: 1; transform: rotate(-4deg); }
#ending .head { position: absolute; left: 214px; top: 96px; font-size: 96px; letter-spacing: 18px; white-space: nowrap; color: var(--paper); text-shadow: 0 4px 30px #000; opacity: 0; transition: opacity 1.6s ease .6s; }
#ending .head.on { opacity: 1; }
#ending .letter { position: absolute; right: 90px; top: 70px; bottom: 70px; width: 760px; padding: 54px 58px 50px; overflow-y: auto; background-color: #f3ead6; background-image: repeating-linear-gradient(180deg, transparent 0, transparent 53px, rgba(178,58,43,.22) 53px, rgba(178,58,43,.22) 54px), var(--grain), var(--fiber); box-shadow: 0 16px 60px rgba(0,0,0,.6); opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
#ending .letter.on { opacity: 1; transform: none; }
#ending .letter p { margin: 0; font-size: 27px; line-height: 54px; letter-spacing: 1.5px; color: var(--ink); text-indent: 2em; animation: inkin .9s ease both; }
#ending .letter p.lead { color: var(--ink-3); text-indent: 0; }
#ending .letter p.salute { text-indent: 0; }
#ending .letter p.sig { text-align: right; text-indent: 0; margin-top: 10px; }
#ending .hint { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 20px; letter-spacing: 6px; color: rgba(242,234,216,.7); }
#ending .result { position: absolute; left: 112px; top: 330px; width: 540px; padding: 22px 26px 20px; background: rgba(14,12,10,.5); backdrop-filter: blur(3px); color: var(--paper); opacity: 0; transition: opacity 1.2s; pointer-events: none; }
#ending .result.on { opacity: 1; pointer-events: auto; }
#ending .result h4 { margin: 0 0 12px; font-size: 26px; font-weight: normal; letter-spacing: 8px; color: #e8c9a0; }
#ending .bar { display: flex; align-items: center; gap: 14px; margin: 7px 0; font-size: 23px; letter-spacing: 4px; }
#ending .bar span { width: 76px; }
#ending .bar i { flex: 1; height: 9px; background: rgba(242,234,216,.2); border-radius: 5px; overflow: hidden; }
#ending .bar i u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d9a66a, #f0d9a8); transition: width 1.6s ease .4s; }
#ending .notes { margin: 16px 0 0; padding: 0; list-style: none; font-size: 20px; line-height: 1.7; color: rgba(242,234,216,.88); max-height: 172px; overflow-y: auto; }
#ending .notes li::before { content: "·"; color: var(--red); margin-right: 10px; }
#ending .btns { margin-top: 22px; display: flex; gap: 16px; }
#ending .btns button { padding: 10px 26px 8px; font-size: 24px; letter-spacing: 6px; color: var(--paper); background: rgba(242,234,216,.1); border: 1px solid rgba(242,234,216,.5); transition: background .2s, color .2s; }
#ending .btns button:hover { background: var(--paper); color: var(--ink); }
#ending .seen { margin-top: 14px; font-size: 20px; letter-spacing: 3px; color: rgba(242,234,216,.65); }
/* 结局册 */
#gallery { position: absolute; inset: 0; z-index: 96; display: none; background: rgba(12,10,8,.72); }
#gallery.show { display: block; }
#gallery .panel { position: absolute; left: 50%; top: 50%; width: 1100px; transform: translate(-50%,-50%); padding: 50px 60px; background-color: var(--paper); background-image: var(--grain), var(--fiber); box-shadow: 0 20px 80px rgba(0,0,0,.7); }
#gallery h2 { margin: 0 0 26px; font-size: 40px; font-weight: normal; letter-spacing: 14px; }
#gallery .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
#gallery .cell { height: 190px; padding: 18px 10px; text-align: center; border: 1px solid var(--paper-3); background: rgba(255,255,255,.3); }
#gallery .cell .s { display: inline-block; writing-mode: vertical-rl; font-size: 22px; letter-spacing: 6px; padding: 10px 4px; color: var(--red-2); border: 1px solid var(--red); border-radius: 14px 14px 3px 3px; }
#gallery .cell .t { margin-top: 10px; font-size: 24px; letter-spacing: 3px; }
#gallery .cell.no { color: var(--ink-4); } #gallery .cell.no .s { color: var(--ink-4); border-color: var(--ink-4); }
#gallery .close { position: absolute; right: 26px; top: 18px; background: none; border: none; font-size: 30px; color: var(--ink-3); }