:root {
  --ink: #2f2924;
  --muted: #85776b;
  --paper: #f7f0e6;
  --panel: rgba(255, 251, 244, 0.84);
  --brick: #a55342;
  --brick-dark: #763b35;
  --green: #657a63;
  --line: rgba(72, 53, 38, 0.13);
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at top right, #eadbc5 0, transparent 38%), linear-gradient(135deg, #f4e7d6, #e3d6c2); min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
.onboarding { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(50, 38, 28, .42); backdrop-filter: blur(7px); }
.onboarding.hidden { display: none; }
.onboarding-card { width: min(760px, 100%); max-height: min(92vh, 760px); overflow-y: auto; padding: 34px; border-radius: 24px; background: #fff8ef; box-shadow: 0 25px 70px rgba(45, 28, 18, .25); }
.onboarding-card h2 { font: 500 32px Georgia, "Noto Serif SC", serif; margin: 12px 0 8px; }
.onboarding-card > p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.onboarding-lead { max-width: 650px; font-size: 15px !important; }
.experience-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 20px 0 14px; }
.experience-summary > div { padding: 13px; border: 1px solid #ead5c4; border-radius: 13px; background: #fffdf9; }
.experience-summary span, .experience-summary strong, .experience-summary small { display: block; }
.experience-summary span { color: var(--brick); font-size: 10px; letter-spacing: .1em; }
.experience-summary strong { margin: 6px 0; font-size: 13px; }
.experience-summary small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.onboarding-storyline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 13px; border-radius: 11px; background: #f3e5d8; color: var(--brick-dark); font-size: 11px; }
.onboarding-storyline span { color: var(--muted); margin-right: 4px; }
.onboarding-storyline i { color: #c29a82; font-style: normal; }
.onboarding-storyline b { font-weight: 600; }
.identity-title { margin: 22px 0 2px; font-size: 16px; }
.identity-note { font-size: 12px !important; }
.identity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.identity-option { text-align: left; border: 1px solid #e1cdbc; border-radius: 14px; padding: 14px; background: #fffdf9; color: var(--ink); min-height: 120px; }
.identity-option.selected { border-color: var(--brick); background: #f4e2d6; box-shadow: 0 0 0 3px rgba(165,83,66,.1); }
.identity-option strong, .identity-option small { display: block; } .identity-option strong { font-size: 14px; margin-bottom: 8px; } .identity-option small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.enter-button { width: 100%; }
.app-shell { max-width: 1180px; margin: 0 auto; padding: 38px 24px 24px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; }
.eyebrow, .section-label { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--brick); font-weight: 700; }
h1, h2, p { margin: 0; }
h1 { font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(36px, 6vw, 64px); font-weight: 500; letter-spacing: -.05em; line-height: 1; margin-top: 10px; }
.subtitle { margin-top: 10px; color: var(--muted); font-size: 16px; }
.time-card { min-width: 170px; text-align: right; padding: 12px 0; color: var(--muted); }
.experience-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:-7px 0 20px; border:1px solid rgba(126,94,68,.16); border-radius:14px; overflow:hidden; background:rgba(126,94,68,.12); }
.experience-strip div { padding:11px 13px; background:rgba(255,250,242,.68); }
.experience-strip span,.experience-strip strong { display:block; }
.experience-strip span { color:var(--brick); font-size:10px; letter-spacing:.08em; margin-bottom:4px; }
.experience-strip strong { font-size:12px; line-height:1.45; }
.time-card strong { display: block; font-family: Georgia, serif; color: var(--brick-dark); font-size: 32px; font-weight: 500; }
.time-card small { display: block; margin-top: 4px; font-size: 11px; }
.demo-badge, .mode-badge { display:inline-block; margin-top:7px; padding:4px 8px; border-radius:100px; font-size:9px; letter-spacing:.04em; }
.demo-badge { color:#8d4a32; background:#f2d4bf; }
.mode-badge { color:#496149; background:#dce9d9; }
.top-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; } .top-actions button { border: 1px solid #dbc9b8; border-radius: 8px; background: transparent; color: var(--muted); padding: 4px 8px; font-size: 11px; } .top-actions button:hover { background: #f2e5d7; color: var(--brick-dark); }
.guide-modal { position:fixed; inset:0; z-index:28; display:grid; place-items:center; padding:20px; background:rgba(42,31,24,.5); backdrop-filter:blur(6px); }
.guide-modal.hidden { display:none; }
.guide-card { position:relative; width:min(680px,100%); padding:32px; border:1px solid #e3cdbc; border-radius:20px; background:#fff8ef; box-shadow:0 24px 70px rgba(45,28,18,.28); }
.guide-close { position:absolute; right:18px; top:18px; width:28px; height:28px; border:1px solid #d8c2b2; border-radius:50%; color:var(--muted); background:transparent; font-size:20px; line-height:20px; }
.guide-card h2 { margin:12px 0 8px; font:500 28px Georgia,"Noto Serif SC",serif; }
.guide-card > p { color:var(--muted); font-size:14px; line-height:1.8; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:20px 0 14px; }
.guide-grid div { padding:11px 12px; border-radius:11px; background:#f5e8da; }
.guide-grid span,.guide-grid strong { display:block; }
.guide-grid span { color:var(--brick); font-size:10px; letter-spacing:.08em; }
.guide-grid strong { margin-top:5px; font-size:12px; line-height:1.5; }
.guide-flow { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:11px 12px; border:1px dashed #d5b8a3; border-radius:10px; color:var(--brick-dark); font-size:12px; }
.guide-flow i { color:#bf967e; font-style:normal; }
.intro-banner, .panel { background: var(--panel); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 18px 45px rgba(85, 54, 30, .08); backdrop-filter: blur(9px); }
.intro-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border-radius: 20px; margin-bottom: 18px; }
.intro-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.guide-inline { border:1px solid #d8b8a3; border-radius:12px; padding:11px 14px; color:var(--brick-dark); background:#fff8ef; font-size:12px; }
.guide-inline:hover { background:#f3dfd1; }
.scene-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 0 0 18px; } .scene-tabs button { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.7); border-radius: 13px; padding: 10px 14px; background: rgba(255,251,244,.58); color: var(--ink); text-align: left; } .scene-tabs button span { color: var(--brick); font: 16px Georgia,serif; } .scene-tabs button strong { font-size: 12px; } .scene-tabs button.active { background: #fff7ec; border-color: #d8bba4; box-shadow: 0 8px 24px rgba(85,54,30,.08); }
.tag { display: inline-block; padding: 5px 9px; background: #ead5c9; color: var(--brick-dark); border-radius: 100px; font-size: 11px; font-weight: 700; }
.intro-banner h2 { font-family: Georgia, "Noto Serif SC", serif; font-weight: 500; font-size: 25px; margin: 10px 0 6px; }
.intro-banner p { color: var(--muted); font-size: 14px; }
.notice-detail { position: fixed; inset: 4vh 50% auto; transform: translateX(-50%); z-index: 24; width: min(900px, calc(100vw - 34px)); max-height: 92vh; overflow-y: auto; padding: 28px clamp(20px,5vw,58px) 22px; border: 1px solid #d7c6b5; border-radius: 3px; background: #fffdf7; box-shadow: 0 25px 80px rgba(42,26,17,.34); font-family: "SimSun", "Songti SC", serif; }
.notice-detail:before { content: ""; position: fixed; inset: -100vh; z-index: -1; background: rgba(38,27,20,.48); backdrop-filter: blur(3px); }
.notice-detail.hidden { display: none; }
.notice-close { position: sticky; float: right; top: 0; z-index: 2; width: 29px; height: 29px; border: 1px solid #d7c6b5; border-radius: 50%; color: #7c6d62; background: #fffdf7; font: 22px/24px Arial,sans-serif; cursor: pointer; }
.notice-close:hover { color: #a11f1b; border-color: #c88b83; }
.notice-reader-trigger { position: fixed; right: 16px; top: 42%; z-index: 12; border: 1px solid #cda99a; border-right: 0; border-radius: 9px 0 0 9px; padding: 11px 12px 11px 10px; color: #8b3f37; background: rgba(255,248,238,.95); box-shadow: 0 8px 20px rgba(73,44,28,.12); font-size: 11px; writing-mode: vertical-rl; letter-spacing: .08em; }
.notice-reader-trigger:hover { background: #f3e1d5; }
.fiction-watermark { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%) rotate(-18deg); color: rgba(173,35,31,.045); font: 700 clamp(42px,8vw,88px)/1 "Microsoft YaHei",sans-serif; white-space: nowrap; pointer-events: none; }
.redhead-header { position: relative; text-align: center; }
.fiction-label { display: inline-block; margin-bottom: 14px; padding: 4px 9px; border: 1px solid #dfb2ad; color: #9f2825; background: #fff4f0; font-family: "Microsoft YaHei",sans-serif; font-size: 10px; letter-spacing: .06em; }
.redhead-header h3 { color: #bc1f1b; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(25px,4vw,38px); font-weight: 700; letter-spacing: .12em; line-height: 1.2; }
.redhead-rule { height: 3px; margin: 13px 0 5px; background: #bc1f1b; }
.document-number { text-align: left; color: #4e4640; font-size: 11px; }
.redhead-body { position: relative; color: #28231f; font-size: 13px; line-height: 1.9; }
.redhead-body h4 { margin: 22px 0 18px; text-align: center; font-size: clamp(19px,3vw,26px); line-height: 1.55; font-weight: 700; }
.redhead-body p { margin: 8px 0; text-align: justify; text-indent: 2em; }
.redhead-body .addressee { text-indent: 0; }
.redhead-body b { font-weight: 700; }
.redhead-body .important-note { margin: 13px 0; padding: 8px 12px; border: 1px solid #dbb1ac; color: #8e2421; background: #fff7f4; font-weight: 700; text-indent: 0; }
.redhead-footer { position: relative; min-height: 88px; display: flex; justify-content: flex-end; align-items: center; text-align: right; margin-top: 10px; font-size: 12px; line-height: 1.8; }
.fiction-seal { position: absolute; right: 118px; top: 0; width: 78px; height: 78px; display: grid; place-items: center; align-content: center; border: 3px double rgba(187,31,27,.7); border-radius: 50%; color: rgba(187,31,27,.78); transform: rotate(-11deg); font-family: "Microsoft YaHei",sans-serif; }
.fiction-seal span { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.fiction-seal small { font-size: 9px; }
.document-distribution { border-top: 1px solid #302a25; border-bottom: 1px solid #302a25; padding: 6px 0; font-size: 10px; color: #605750; }
.notice-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: -5px 0 18px; overflow: hidden; border: 1px solid rgba(126,94,68,.16); border-radius: 14px; background: rgba(126,94,68,.12); }
.notice-facts div { padding: 12px 14px; background: rgba(255,250,242,.72); }
.notice-facts span, .notice-facts strong { display: block; }
.notice-facts span { color: var(--brick); font-size: 10px; letter-spacing: .08em; margin-bottom: 4px; }
.notice-facts strong { font-size: 12px; font-weight: 600; line-height: 1.45; }
.primary { border: 0; color: #fff8ef; background: var(--brick); padding: 12px 18px; border-radius: 12px; box-shadow: 0 7px 16px rgba(165,83,66,.2); transition: transform .2s, background .2s; } .primary:disabled { cursor: wait; opacity: .65; transform: none; }
.primary:hover { transform: translateY(-2px); background: var(--brick-dark); }
.game-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .8fr); gap: 18px; }
.panel { border-radius: 20px; padding: 22px; }
.panel-heading, .dialogue-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.panel-heading h2, .dialogue-header h2 { font-family: Georgia, "Noto Serif SC", serif; font-size: 23px; font-weight: 500; margin-top: 5px; }
.compact { align-items: center; margin-bottom: 15px; }
.compact h2 { font-size: 20px; margin: 0; }
.compact > span { color: var(--muted); font-size: 12px; }
.status-dot { color: var(--green); font-size: 12px; white-space: nowrap; }
.status-dot i { display: inline-block; width: 7px; height: 7px; background: #7aa477; border-radius: 50%; margin-right: 5px; }
.lane-scene { height: 440px; position: relative; overflow: hidden; border-radius: 14px; margin-top: 18px; background: #c5b5a0; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(90,58,39,.18), inset 0 -26px 42px rgba(48,34,27,.16); }
#three-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; cursor:grab; } #three-canvas:active { cursor:grabbing; }
.scene-loading { position:absolute; z-index:5; inset:50% auto auto 50%; transform:translate(-50%,-50%); padding:9px 13px; border-radius:100px; color:#fff8ed; background:rgba(36,30,25,.7); font-size:11px; backdrop-filter:blur(5px); transition:.3s; } .scene-loading.hidden { opacity:0; pointer-events:none; }
.orbit-hint { position:absolute; left:50%; bottom:12px; z-index:3; transform:translateX(-50%); padding:5px 9px; border:1px solid rgba(255,255,255,.45); border-radius:100px; color:rgba(255,248,237,.86); background:rgba(44,37,31,.42); font-size:10px; letter-spacing:.05em; pointer-events:none; transition:opacity .35s; }
.lane-scene:hover .orbit-hint { opacity:.32; }
.scene-interaction-hint { position:absolute; left:12px; top:12px; z-index:4; padding:6px 9px; border-radius:8px; color:rgba(255,248,237,.9); background:rgba(37,31,27,.62); box-shadow:0 4px 14px rgba(24,17,13,.2); font-size:10px; pointer-events:none; }
.scene-dialogue { position:absolute; left:14px; right:14px; bottom:14px; z-index:6; padding:11px; border:1px solid rgba(255,255,255,.3); border-radius:14px; background:rgba(39,31,26,.8); box-shadow:0 12px 30px rgba(20,14,10,.24); backdrop-filter:blur(10px); color:#fff8ef; transition:transform .25s, opacity .25s; }
.scene-dialogue.collapsed { transform:translateY(calc(100% - 38px)); opacity:.92; }
.scene-dialogue-top { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.scene-dialogue-kicker { color:#e0b39a; font-size:9px; letter-spacing:.12em; }
.scene-dialogue-top strong { font-size:12px; font-weight:600; }
.scene-dialogue-actions { display:flex; align-items:center; gap:5px; margin-left:auto; }
.scene-dialogue-top button { width:22px; height:22px; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#fff8ef; background:transparent; line-height:16px; }
.scene-tool { width:auto !important; height:22px; padding:0 7px; border-radius:100px !important; font-size:9px; line-height:20px !important; }
.scene-dialogue-log { max-height:82px; overflow:auto; }
.scene-dialogue-log .message { display:flex; gap:7px; max-width:100%; margin-bottom:7px; }
.scene-dialogue-log .message.player-message { margin-left:auto; flex-direction:row-reverse; }
.scene-dialogue-log .message-avatar { width:26px; height:26px; font-size:12px; }
.scene-dialogue-log .message p { font-size:11px; line-height:1.45; }
.scene-dialogue-log .message-meta { font-size:9px !important; color:#d9c6b8; }
.scene-dialogue-log .npc-message p:not(.message-meta) { background:#f0d7c7; color:#3e3028; padding:6px 8px; border-radius:4px 8px 8px 8px; }
.scene-dialogue-log .player-message p:not(.message-meta) { background:#d5e2d3; color:#283b2b; padding:6px 8px; border-radius:8px 4px 8px 8px; }
.scene-dialogue-log .annotation { font-size:9px; margin-top:3px; padding-top:3px; }
.scene-quick-replies { display:flex; gap:5px; flex-wrap:wrap; margin:7px 0; }
.scene-quick-replies button { border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:6px 8px; color:#fff8ef; background:rgba(255,248,239,.12); font-size:10px; }
.scene-quick-replies button:hover { background:rgba(213,142,111,.55); }
.scene-composer { display:flex; gap:6px; }
.scene-composer input { flex:1; min-width:0; border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:8px 9px; color:#fff8ef; background:rgba(27,21,18,.46); outline:0; font-size:11px; }
.scene-composer input:focus { border-color:#e6b48f; box-shadow:0 0 0 2px rgba(230,180,143,.2); }
.scene-composer input::placeholder { color:rgba(255,248,239,.62); }
.scene-composer button { border:0; border-radius:8px; padding:0 11px; color:#fff8ef; background:#a55342; font-size:11px; }
.scene-hotspot { display:none !important; }
.lane-scene:before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(43,31,24,.46), rgba(43,31,24,.06) 46%, rgba(43,31,24,.32)), linear-gradient(180deg,#a9b9b3 0%,#d4c2a6 42%,#8b6c58 43%,#6f5549 100%); filter: saturate(.78) sepia(.12); transform: scale(1.03); }
.lane-scene:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(214,235,227,.16), rgba(53,42,33,.28)); pointer-events: none; }
.lane-scene.scene-dusk:after { background: linear-gradient(180deg, rgba(223,148,91,.17), rgba(78,45,39,.5)); } .lane-scene.scene-night:after { background: linear-gradient(180deg, rgba(37,54,77,.5), rgba(25,26,37,.72)); }
.weather-layer { position:absolute; inset:0; pointer-events:none; z-index:1; background: radial-gradient(circle at 76% 19%, rgba(255,232,176,.38), transparent 19%); mix-blend-mode: screen; }
.lane-sky { position: absolute; inset: 0 0 46% 0; background: linear-gradient(rgba(173,194,188,.22), rgba(222,209,182,.06)); mix-blend-mode: screen; pointer-events:none; }
.lane-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 47%; background: repeating-linear-gradient(102deg, #b8a18b 0 17px, #aa927e 18px 19px); }
.building { display:none; position: absolute; bottom: 37%; width: 31%; height: 45%; background: linear-gradient(90deg, rgba(182,110,88,.84), rgba(120,69,56,.65)), url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=700&q=75") center/cover; border-radius: 5px 5px 0 0; box-shadow: inset -12px 0 rgba(98, 55, 44, .22), 0 14px 18px rgba(60,39,27,.16); }
.building span { position: absolute; bottom: 10px; left: 10px; color: #fff1dd; font-size: 11px; writing-mode: vertical-rl; }
.building-a { left: 5%; } .building-b { right: 7%; background: linear-gradient(90deg, rgba(208,160,102,.82), rgba(114,91,62,.58)), url("https://images.unsplash.com/photo-1445116572660-236099ec97a0?auto=format&fit=crop&w=700&q=75") center/cover, #c89f6c; }
.awning,.wutong,.lane-ground { display:none; }
.wutong { position: absolute; bottom: 40%; width: 13px; height: 56%; background: #675442; }
.wutong:before { content: ""; position: absolute; width: 110px; height: 90px; left: -38px; top: -38px; background: #68785e; border-radius: 50%; box-shadow: 37px 11px #788568, 62px -13px #5d725a, 83px 18px #81906d; }
.wutong-a { left: 34%; } .wutong-b { right: 29%; height: 48%; }
.character-model { display:none; position:absolute; z-index:2; bottom:23%; width:55px; height:116px; cursor:pointer; filter:drop-shadow(0 10px 8px rgba(25,20,17,.35)); transition:.25s; } .character-model:hover { transform:translateY(-4px) scale(1.03); } .character-model em { position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); color:#fff8ed; background:rgba(40,34,29,.7); border-radius:20px; padding:3px 7px; white-space:nowrap; font-size:9px; font-style:normal; } .model-face { position:absolute; left:13px; top:0; width:30px; height:34px; border-radius:45% 45% 48% 48%; background-position:center; background-size:cover; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); } .model-body { position:absolute; left:5px; top:29px; width:47px; height:85px; border-radius:20px 20px 9px 9px; clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); } .apo-model { left:21%; } .apo-model .model-face { background-image:url("https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=180&q=85"); } .apo-model .model-body { background:linear-gradient(90deg,#694a45,#a56c5b 47%,#5c413d); } .chen-model { right:21%; } .chen-model .model-face { background-image:url("https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=180&q=85"); } .chen-model .model-body { background:linear-gradient(90deg,#304b41,#687d6f 48%,#293f38); }
.notice-hotspot { left: 18%; top: 46%; } .apo-hotspot { left: 12%; bottom: 29%; } .chen-hotspot { right: 13%; bottom: 30%; } .cat-hotspot { left: 55%; bottom: 18%; background: #9e6c43; } .cat-hotspot.found { background: var(--green); cursor: default; }
.photo-hotspot { left: 28%; top: 49%; background: rgba(107, 79, 54, .66); } .clothes-hotspot { right: 34%; top: 35%; background: rgba(102, 122, 99, .7); }
.shoe-hotspot { right: 27%; bottom: 18%; background: rgba(71, 87, 77, .78); }
.hidden { display: none; }
.scene-caption { color: var(--muted); margin-top: 13px; font-size: 13px; min-height: 19px; }
.side-column { display: flex; flex-direction: column; gap: 18px; }
.npc-card { width: 100%; border: 1px solid transparent; background: transparent; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 11px 6px; border-radius: 12px; color: var(--ink); }
.npc-card:hover, .npc-card.active { background: #f2e5d7; border-color: #e7d0c1; }
.npc-card strong, .npc-card small, .npc-card em { display: block; } .npc-card strong { font-size: 14px; } .npc-card small { color: var(--muted); font-size: 11px; margin-top: 3px; } .npc-card em { color: var(--muted); font-size: 10px; font-style: normal; text-align: right; }
.avatar, .message-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff6e9; font-family: Georgia, serif; font-size: 17px; background-position: center; background-size: cover; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), 0 3px 9px rgba(63,39,24,.18); }
.apo-avatar { background-image: linear-gradient(rgba(116,66,55,.22),rgba(116,66,55,.4)), url("https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=160&q=80"); } .chen-avatar { background-image: linear-gradient(rgba(46,83,67,.18),rgba(46,83,67,.4)), url("https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=160&q=80"); }
.quest-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); } .quest-icon { color: var(--brick); font-size: 22px; } .quest-item strong { font-size: 13px; } .quest-item p { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 4px; } .act-copy { display:block; margin-top:7px; color:var(--brick-dark); font-size:10px; letter-spacing:.03em; }
.mainline-hint { display: block; margin-top: 8px; color: #8a7666; font-size: 10px; letter-spacing: .02em; }
.quest-steps { display: flex; align-items: center; gap: 5px; margin-top: 9px; } .quest-steps span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #d8c4b2; color: var(--muted); font-size: 10px; } .quest-steps span.done, .quest-steps span.current { background: var(--brick); border-color: var(--brick); color: white; } .quest-steps i { width: 16px; height: 1px; background: #d8c4b2; }
.memory-list { padding-top: 12px; } .empty-memory, .memory-entry { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; } .memory-entry { color: var(--brick-dark); padding: 5px 0; }
.records-fold { margin-top: 4px; }
.records-fold summary { cursor:pointer; list-style:none; color:var(--brick-dark); font-size:12px; font-weight:600; padding:10px 0 2px; }
.records-fold summary::-webkit-details-marker { display:none; }
.records-fold summary:before { content:"▸"; display:inline-block; margin-right:6px; color:var(--brick); transition:transform .2s; }
.records-fold[open] summary:before { transform:rotate(90deg); }
.records-fold summary span { float:right; color:var(--muted); font-size:10px; font-weight:400; }
.side-quest { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.side-quest-heading { display: flex; align-items: flex-start; gap: 9px; }
.side-quest-heading .quest-icon { font-size: 18px; color: var(--green); }
.side-quest-heading strong { font-size: 12px; }
.side-quest-heading p { color: var(--muted); font-size: 11px; line-height: 1.55; margin-top: 4px; }
.side-quest-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 27px; }
.side-quest-actions button { border: 1px solid #c7d4c4; border-radius: 8px; background: #f4f8f1; color: #496149; padding: 6px 8px; font-size: 10px; }
.side-quest-actions button:hover { background: #e0ebdc; }
footer { display: flex; justify-content: space-between; gap: 15px; color: #8d7f73; font-size: 11px; margin-top: 16px; padding: 0 4px; }
.footer-action { border: 1px solid #dbc9b8; border-radius: 8px; background: transparent; color: var(--muted); padding: 4px 8px; font-size: 11px; margin-right: 8px; } .footer-action.local { color: var(--brick-dark); background: #f2e5d7; }
.ending-summary { position: fixed; inset: auto 20px 20px auto; z-index: 15; width: min(350px, calc(100% - 40px)); padding: 18px; border-radius: 18px; background: #fff8ef; border: 1px solid #e4cfbd; box-shadow: 0 15px 45px rgba(64, 40, 23, .18); } .ending-summary.hidden { display: none; } .ending-summary h3 { font: 500 22px Georgia, "Noto Serif SC", serif; margin: 0 0 8px; } .ending-summary p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 5px 0; } .ending-summary button { margin-top: 10px; border: 1px solid #d7bfaa; border-radius: 9px; background: #fff; padding: 7px 10px; color: var(--brick-dark); }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #3f3831; color: #fff8ef; border-radius: 100px; padding: 10px 16px; font-size: 12px; transition: .25s; } .toast.show { transform: translate(-50%, 0); opacity: 1; }
.scene-photo-credit { position: absolute; right: 10px; top: 10px; z-index: 3; color: rgba(255,248,237,.82); font-size: 9px; letter-spacing: .05em; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.demo-button { border: 1px solid #d2b29b; color: var(--brick-dark); background: #fff8ef; padding: 11px 15px; border-radius: 12px; font-size: 12px; }
.demo-button:hover { background: #f3dfd1; }
.enter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
@media (max-width: 520px) { .enter-actions { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .app-shell { padding: 25px 14px; } .topbar { flex-direction: column; } .time-card { text-align: left; padding: 0; } .top-actions { justify-content: flex-start; } .intro-banner { align-items: flex-start; flex-direction: column; padding: 20px; } .notice-facts { grid-template-columns: repeat(2, 1fr); } .scene-tabs { grid-template-columns:1fr; } .game-grid { grid-template-columns: 1fr; } .lane-scene { height: 420px; } footer { flex-direction: column; } .identity-grid { grid-template-columns: 1fr; } .identity-option { min-height: 0; } .experience-summary { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .scene-dialogue-top { align-items:flex-start; } .scene-dialogue-actions { flex-wrap:wrap; justify-content:flex-end; } .scene-tool { font-size:8px; padding:0 5px; } .intro-actions { width:100%; } .intro-actions > button { flex:1; } }
body.exhibit-mode { background:linear-gradient(135deg,#d9c4a7,#ad8b73); }
body.exhibit-mode .app-shell { max-width:1440px; padding:28px 34px 30px; }
body.exhibit-mode .topbar { margin-bottom:20px; }
body.exhibit-mode .experience-strip { margin-bottom:14px; }
body.exhibit-mode .lane-scene { height:clamp(500px,62vh,760px); }
body.exhibit-mode .scene-dialogue { left:22px; right:22px; bottom:22px; padding:15px; }
body.exhibit-mode .scene-dialogue-log { max-height:120px; }
body.exhibit-mode .scene-dialogue-log .message p { font-size:13px; }
body.exhibit-mode .scene-composer input, body.exhibit-mode .scene-composer button { min-height:42px; font-size:14px; }
body.exhibit-mode .scene-quick-replies button { padding:9px 12px; font-size:12px; }
body.exhibit-mode .top-actions { display:none; }
@media (max-width: 780px) { .experience-strip { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px) { .guide-card { padding:25px 20px; } .guide-grid { grid-template-columns:1fr; } }
@media (max-width: 560px) { .notice-detail { padding: 22px 17px 18px; } .redhead-body { font-size: 12px; } .fiction-seal { right: 96px; width: 68px; height: 68px; } }