@property --h { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  --paper: #F3ECDD;
  --paper-2: #FBF7EE;
  --line: #D9CDB4;
  --ink: #2B2A28;
  --ink-2: #6B6558;
  --brick: #B24A32;
  --brick-2: #C9634A;
  --brick-dark: #7A2E22;
  --lamp: #F2C46D;
  --night: #14161C;
  --serif: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --panel-w: 400px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }

/* ---------- 地图舞台 ---------- */
#stage { position: fixed; inset: 0; perspective: 1400px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #23262E 0%, var(--night) 70%); }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; will-change: transform; }
#world > * { position: absolute; left: 0; top: 0; }
#basemap { display: block; filter: brightness(.82) saturate(.9); user-select: none; -webkit-user-drag: none; }
.detail { opacity: 0; transition: opacity .8s ease; filter: brightness(.86) saturate(.92); pointer-events: none; }
.detail.on { opacity: 1; }
#ground { overflow: visible; pointer-events: none; }
#blocks { transform-style: preserve-3d; pointer-events: none; }
#stage { transition: filter .5s; }
#stage.sectioned { filter: blur(3px) brightness(.55); }

/* 路线 */
.route-base { fill: none; stroke: #FFF4DE; stroke-opacity: .9; stroke-width: 4; stroke-dasharray: 10 9; stroke-linecap: round; stroke-linejoin: round; }
.route-done { fill: none; stroke: var(--brick); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.route-halo { fill: none; stroke: #000; stroke-opacity: .45; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.node-mark circle.ring { fill: rgba(20,22,28,.6); stroke: #FFF4DE; stroke-width: 3; }
.node-mark text { fill: #FFF4DE; font: 600 15px var(--sans); text-anchor: middle; dominant-baseline: central; }
.node-mark.done circle.ring { fill: var(--brick); stroke: #FFF4DE; }
.node-mark.current circle.ring { fill: var(--lamp); stroke: #fff; }
.node-mark.current text { fill: var(--ink); }
.node-mark { transition: opacity .4s; }
.node-mark.hidden { opacity: 0; }
.me-pulse { fill: var(--lamp); fill-opacity: .25; transform-box: fill-box; transform-origin: center; animation: pulse 2.2s ease-out infinite; }
.me-dot { fill: #fff; stroke: var(--lamp); stroke-width: 4; }
@keyframes pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .me-pulse { animation: none; } }

/* 分析图层 */
.layer { opacity: 0; transition: opacity .6s ease; }
.layer.on { opacity: 1; }
.focus-ring { fill: none; stroke: var(--lamp); opacity: 0; transition: opacity .6s; }
.focus-ring.on { opacity: .9; }

/* ---------- 3D 体块 ---------- */
.box { position: absolute; transform-style: preserve-3d; --h: 0px; transition: --h 1.1s var(--ease); }
.box > i { position: absolute; display: block; backface-visibility: visible; }
.box .top { inset: 0; transform: translateZ(var(--h)); background: var(--roof, #D9C7AE); box-shadow: inset 0 0 0 1px rgba(43,42,40,.35); }
.box .wn, .box .ws { left: 0; width: 100%; height: var(--h); transform-origin: 0 0; transform: rotateX(90deg); }
.box .wn { top: 0; }
.box .ws { top: 100%; }
.box .we, .box .ww { top: 0; height: 100%; width: var(--h); transform-origin: 0 0; transform: rotateY(-90deg); }
.box .ww { left: 0; }
.box .we { left: 100%; }
.box .ws, .box .wn { background: var(--wall, var(--brick)); }
.box .we, .box .ww { background: var(--wall2, var(--brick-dark)); }
.box.win .ws, .box.win .wn { background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(242,196,109,.75) 5px 7px, transparent 7px 11px), repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 9px); }
.box.arch .ws, .box.arch .wn { background-image: radial-gradient(ellipse 5px 9px at 50% 100%, rgba(20,12,10,.85) 98%, transparent 100%); background-size: 13px 100%; background-position: 0 0; }
.box.saw .top { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, transparent 2px 10px); }
.box.ghost .top, .box.ghost > i { background: rgba(255,244,222,.08) !important; box-shadow: inset 0 0 0 1px rgba(255,244,222,.35); }
.box.ghost .top { background-image: none; }

.chimney { position: absolute; transform-style: preserve-3d; --h: 0px; transition: --h 1.6s var(--ease); }
.chimney > i { position: absolute; left: 0; top: 0; height: var(--h); transform-origin: 50% 0; background: var(--ch, linear-gradient(180deg, #9C3D2B, #B24A32 60%, #8E3626)); }
.chimney > i.cap { height: 4px; background: var(--lamp); }
.tree { position: absolute; transform-origin: 50% 100%; background: radial-gradient(circle at 50% 38%, #6F8F4E 0 45%, #4E6E3A 46% 62%, transparent 63%), linear-gradient(90deg, transparent 46%, #4A3426 46% 54%, transparent 54%); }
.box.cdwall .ws { background: #A8402C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Ctext x='50' y='31' text-anchor='middle' font-size='28' font-weight='900' fill='%23F3ECDD' font-family='serif'%3E%E6%88%90%E9%83%BD%3C/text%3E%3C/svg%3E") center / 92% auto no-repeat; }
.box.glass .ws, .box.glass .wn, .box.glass .we, .box.glass .ww { background: rgba(160,200,215,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.box.deck .top { background: #E8E2D4; }
.box.deck > i:not(.top) { background: #B8B0A0; }
.box.pipe .top { background: #9AA3A8; }
.box.pipe > i:not(.top) { background: #6E777C; }
.person { position: absolute; width: 2px; height: 5px; transform-origin: 50% 100%; background: var(--c, #FFF4DE); border-radius: 1px 1px 0 0; }

/* ---------- HUD ---------- */
#hud { position: fixed; left: 16px; top: 16px; right: calc(var(--panel-w) + 32px); display: flex; align-items: flex-start; gap: 12px; pointer-events: none; z-index: 5; transition: opacity .5s; }
#hud.hidden { opacity: 0; }
.hud-card { pointer-events: auto; background: rgba(20,22,28,.62); color: #FFF4DE; border: 1px solid rgba(255,244,222,.16); border-radius: 10px; padding: 10px 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#hud-title { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: .04em; }
#hud-sub { font-size: 12px; color: #C9C4B8; margin-top: 2px; }
#meter { margin-left: auto; text-align: right; min-width: 150px; }
#meter b { font: 600 22px var(--serif); font-variant-numeric: tabular-nums; }
#meter span { font-size: 12px; color: #C9C4B8; }
.bar { height: 3px; background: rgba(255,244,222,.18); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--brick-2); transition: width .3s; }
#deck-btn { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#deck-btn .stack { width: 22px; height: 28px; border-radius: 3px; background: var(--paper); box-shadow: 3px -3px 0 -1px var(--brick), 6px -6px 0 -2px rgba(255,244,222,.4); }
#deck-btn b { font: 600 16px var(--serif); }

#layer-bar { position: fixed; left: 16px; bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 5; max-width: calc(100vw - var(--panel-w) - 48px); }
.chip { pointer-events: auto; font-size: 13px; padding: 7px 13px; border-radius: 999px; color: #FFF4DE; background: rgba(20,22,28,.62); border: 1px solid rgba(255,244,222,.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, color .2s; }
.chip.on { background: var(--lamp); color: #412402; border-color: var(--lamp); }
.chip.cut { border-style: dashed; }
.chip.cut.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }

#credit { position: fixed; right: calc(var(--panel-w) + 16px); bottom: 6px; font-size: 10px; color: rgba(255,244,222,.45); z-index: 4; pointer-events: none; }

/* ---------- 调查面板 ---------- */
#panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w); background: var(--paper); z-index: 10; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .6s var(--ease); box-shadow: -10px 0 40px rgba(0,0,0,.35); }
#panel.open { transform: none; }
#panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; opacity: .28; }
#panel-grip { display: none; }
#panel-scroll { position: relative; flex: 1; overflow-y: auto; padding: 28px 26px 32px; -webkit-overflow-scrolling: touch; }
.p-kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); letter-spacing: .06em; }
.p-kicker .no { font: 700 13px var(--serif); color: #fff; background: var(--brick); padding: 3px 8px; border-radius: 3px; }
.p-title { font: 700 24px/1.35 var(--serif); text-wrap: balance; margin: 12px 0 4px; letter-spacing: .02em; }
.p-line { font-size: 14px; color: var(--brick); margin: 0 0 16px; }
.p-intro { font-size: 15px; line-height: 1.85; margin: 0 0 22px; }
.p-h { font: 600 13px var(--sans); letter-spacing: .1em; color: var(--ink-2); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.p-h::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.obs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.obs-card { position: relative; perspective: 800px; text-align: left; cursor: pointer; }
.obs-in { position: relative; display: grid; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.obs-card.flipped .obs-in { transform: rotateY(180deg); }
.obs-face { grid-area: 1 / 1; min-height: 150px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.obs-card.seen .obs-face.front { border-color: var(--brick); box-shadow: 0 0 0 1px var(--brick); }
.obs-face.back { transform: rotateY(180deg); padding: 0; overflow: hidden; background: #222; }
.obs-face.back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.obs-face.back .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.obs-tag { font: 600 12px var(--sans); color: var(--brick); display: flex; align-items: center; gap: 6px; }
.obs-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brick); }
.obs-card.seen .obs-tag::before { background: var(--lamp); box-shadow: 0 0 0 2px var(--brick); }
.obs-name { font: 700 16px var(--serif); margin: 6px 0 6px; }
.obs-text { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); flex: 1; }
.obs-hint { font-size: 11px; color: #9B9384; margin-top: 6px; display: flex; justify-content: space-between; }
.obs-flip { font-size: 11px; color: var(--brick); text-decoration: underline; text-underline-offset: 2px; }

.q { font: 600 16px/1.6 var(--serif); margin: 0 0 12px; }
.q-locked { font-size: 13px; color: #9B9384; padding: 14px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; }
.opt { display: flex; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); font-size: 14px; line-height: 1.55; transition: border-color .2s, background .2s, transform .15s; }
.opt:hover:not([disabled]) { border-color: var(--brick-2); transform: translateX(2px); }
.opt .k { font: 700 14px var(--serif); color: var(--brick); flex: none; }
.opt[disabled] { cursor: default; }
.opt.picked { border-color: var(--brick); background: #FBEFE9; box-shadow: 0 0 0 1px var(--brick); }
.opt.best:not(.picked) { border-style: dashed; border-color: var(--brick-2); }
.opt .fb { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.opt .badge { font-size: 11px; color: #fff; background: var(--brick); padding: 1px 6px; border-radius: 3px; margin-left: 6px; }

.evi { margin-top: 18px; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 16px 18px; position: relative; overflow: hidden; animation: rise .6s var(--ease); }
.evi::after { content: attr(data-no); position: absolute; right: -6px; bottom: -22px; font: 800 72px var(--serif); color: rgba(255,244,222,.07); }
.evi small { color: var(--lamp); font-size: 12px; letter-spacing: .08em; }
.evi p { font: 600 16px/1.6 var(--serif); margin: 6px 0 0; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.p-foot { position: relative; padding: 14px 26px; border-top: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-foot .hint { font-size: 12px; color: var(--ink-2); }
.btn { font: 600 15px var(--sans); padding: 11px 20px; border-radius: 8px; background: var(--brick); color: #fff; transition: background .2s, transform .15s, opacity .2s; white-space: nowrap; }
.btn:hover { background: var(--brick-dark); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

/* ---------- 剖面 ---------- */
#section { position: fixed; left: 0; top: 0; bottom: 0; right: var(--panel-w); z-index: 6; display: flex; align-items: center; justify-content: center; padding: 80px 32px 70px; pointer-events: none; opacity: 0; transition: opacity .5s; }
#section.on { opacity: 1; pointer-events: auto; }
#section .sheet { width: 100%; max-width: 920px; background: var(--paper); border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.45); padding: 18px 20px 14px; position: relative; }
#section .sheet::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 20px 20px; opacity: .3; pointer-events: none; }
#section h3 { position: relative; font: 700 15px var(--serif); margin: 0 0 8px; display: flex; justify-content: space-between; }
#section h3 span { font: 400 12px var(--sans); color: var(--ink-2); }
#section svg { position: relative; display: block; width: 100%; height: auto; }
.sx-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.sx-cut { fill: var(--ink); }
.sx-thin { fill: none; stroke: var(--ink); stroke-width: .7; }
.sx-brick { fill: #E7C9B9; stroke: var(--ink); stroke-width: 1.2; }
.sx-shade { fill: var(--ink); fill-opacity: .14; }
.sx-sun { fill: none; stroke: #D7A23A; stroke-width: 1.2; stroke-dasharray: 5 4; }
.sx-label { font: 12px var(--sans); fill: var(--ink); }
.sx-label.r { fill: var(--brick); font-weight: 600; }
.sx-anno { fill: none; stroke: var(--brick); stroke-width: 1; }
.sx-draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
#section.on .sx-draw { animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- 全屏层：封面/章节/旁白/结局 ---------- */
.screen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.screen.on { opacity: 1; pointer-events: auto; }

#cover { background: radial-gradient(ellipse at 50% 120%, rgba(178,74,50,.35), transparent 60%), rgba(14,15,19,.55); color: #FFF4DE; text-align: center; padding: 24px; }
#cover .eyebrow { font-size: 13px; letter-spacing: .4em; color: var(--lamp); }
#cover h1 { font: 900 clamp(44px, 9vw, 96px)/1.1 var(--serif); margin: 18px 0 10px; letter-spacing: .08em; }
#cover h1 em { font-style: normal; color: var(--brick-2); }
#cover p { font-size: 15px; color: #C9C4B8; margin: 0 auto 34px; max-width: 30em; line-height: 1.8; }
#cover .btn { font-size: 17px; padding: 14px 34px; }
#cover .meta { margin-top: 26px; font-size: 12px; color: #8A8F9C; letter-spacing: .1em; }

#narrate { pointer-events: none; align-items: flex-end; padding-bottom: 12vh; }
#narrate.on { pointer-events: auto; }
#narrate .box2 { max-width: 560px; margin: 0 16px; background: rgba(20,22,28,.78); color: #FFF4DE; border-radius: 12px; padding: 22px 26px; text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,244,222,.15); }
#narrate p { font: 600 19px/1.75 var(--serif); margin: 0 0 18px; }

#chapter { background: rgba(14,15,19,.72); color: #FFF4DE; text-align: center; cursor: pointer; }
#chapter .c-no { font-size: 13px; letter-spacing: .5em; color: var(--lamp); }
#chapter .c-title { font: 900 clamp(40px, 8vw, 76px)/1.2 var(--serif); margin: 14px 0 8px; letter-spacing: .12em; }
#chapter .c-sub { font-size: 14px; color: #C9C4B8; }
#chapter .c-line { width: 0; height: 2px; background: var(--brick-2); margin: 20px auto 0; transition: width 1.2s var(--ease); }
#chapter.on .c-line { width: 120px; }

#deck { background: rgba(14,15,19,.82); padding: 24px; }
#deck .wrap, #ending .wrap { width: 100%; max-width: 980px; max-height: 100%; overflow-y: auto; }
#deck h2, #ending h2 { font: 700 24px var(--serif); color: #FFF4DE; margin: 0 0 6px; }
#deck .sub, #ending .sub { color: #C9C4B8; font-size: 13px; margin: 0 0 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.card { background: var(--paper); border-radius: 8px; padding: 12px 14px 14px; position: relative; min-height: 132px; }
.card .no { font: 700 12px var(--serif); color: var(--brick); }
.card .t { font: 700 13px var(--serif); color: var(--ink-2); margin-top: 2px; }
.card p { font: 600 13.5px/1.6 var(--serif); margin: 8px 0 0; }
.card.empty { background: rgba(255,244,222,.06); border: 1px dashed rgba(255,244,222,.25); }
.card.empty .no { color: rgba(255,244,222,.4); }
.card .pick { font-size: 11.5px; color: var(--ink-2); margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.close-x { position: absolute; top: 18px; right: 22px; color: #FFF4DE; font-size: 28px; line-height: 1; }

#ending { background: rgba(14,15,19,.86); padding: 28px 24px; align-items: flex-start; overflow-y: auto; }
#ending .wrap { margin: auto; }
.end-top { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; margin-bottom: 22px; }
.end-map { background: var(--paper); border-radius: 10px; padding: 10px; }
.end-map svg { display: block; width: 100%; height: auto; }
.end-stats { color: #FFF4DE; }
.end-stats .big { font: 900 54px var(--serif); color: var(--lamp); line-height: 1; }
.end-stats .row { display: flex; gap: 28px; margin: 16px 0; }
.end-stats .row div b { display: block; font: 700 24px var(--serif); }
.end-stats .row div span { font-size: 12px; color: #C9C4B8; }
.end-strategy { background: var(--brick); color: #fff; border-radius: 10px; padding: 14px 16px; font: 600 15px/1.6 var(--serif); }
.end-strategy small { display: block; font: 400 12px var(--sans); opacity: .8; margin-bottom: 4px; }
.end-chain { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: #C9C4B8; font-size: 13px; margin: 14px 0 0; }
.end-chain b { color: #FFF4DE; background: rgba(255,244,222,.1); padding: 4px 10px; border-radius: 4px; font-weight: 500; }
.end-actions { margin-top: 22px; display: flex; gap: 10px; }
.end-actions .btn.ghost { color: #FFF4DE; border-color: #FFF4DE; }

/* ---------- 手机 ---------- */
@media (max-width: 760px) {
  :root { --panel-w: 0px; }
  #hud { right: 12px; left: 12px; top: 12px; gap: 8px; }
  #hud-title { font-size: 15px; }
  #meter { min-width: 0; }
  #meter b { font-size: 18px; }
  #deck-btn span { display: none; }
  .hud-card { padding: 8px 10px; }
  #panel { top: auto; left: 0; width: 100%; height: 56vh; transform: translateY(100%); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.35); transition: transform .6s var(--ease), height .45s var(--ease); }
  #panel.open { transform: none; }
  #panel.tall { height: 88vh; }
  #panel-grip { display: block; position: relative; height: 22px; flex: none; }
  #panel-grip::after { content: ''; position: absolute; left: 50%; top: 9px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #C8BBA0; }
  #panel-scroll { padding: 4px 18px 20px; }
  .p-title { font-size: 22px; }
  .p-foot { padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
  #layer-bar { bottom: calc(56vh + 10px); left: 12px; max-width: calc(100vw - 24px); }
  #layer-bar.lower { bottom: 16px; }
  #credit { right: 8px; bottom: calc(56vh + 2px); }
  #section { right: 0; bottom: 56vh; padding: 70px 10px 54px; }
  .end-top { grid-template-columns: 1fr; }
}