:root { --ink:#17251f; --jade:#385f4d; --gold:#e0bd67; --paper:#f6efdf; --red:#a95242; font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; color:#fff; }
* { box-sizing:border-box; } html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#101b16; } button,a { font:inherit; } button { cursor:pointer; } [hidden] { display:none !important; }
.portrait-gate { display:none; }
.world-game { position:relative; width:100vw; height:100dvh; min-width:640px; overflow:hidden; background:#17251f; isolation:isolate; }
.viewport { position:absolute; inset:0; overflow:hidden; background:#1c3026; }
.zone { --camera:0px; position:absolute; inset:0; width:1400px; display:none; transform:translateX(var(--camera)); will-change:transform; }
.zone.active { display:block; }
.far,.mid,.ground,.foreground { position:absolute; inset:0; pointer-events:none; }
.courtyard-far { background:linear-gradient(#d9a478 0 25%,#9fb09d 42%,#2a493b 100%); }
.courtyard-far::after { content:"万广通城"; position:absolute; right:110px; top:45px; color:rgba(255,255,255,.3); font:700 34px serif; letter-spacing:12px; }
.courtyard-mid { background:linear-gradient(90deg,transparent 0 6%,rgba(13,33,25,.22) 6% 7%,transparent 7% 100%),url("images/courtyard-main-v1.png") center 54%/cover no-repeat; filter:saturate(.9) brightness(.78); }
.courtyard-ground { top:58%; background:linear-gradient(175deg,transparent 0 15%,rgba(31,45,39,.28) 16%),repeating-linear-gradient(90deg,#7f806f 0 74px,#686b5f 75px 78px); clip-path:polygon(0 8%,100% 0,100% 100%,0 100%); opacity:.78; }
.courtyard-front::before,.courtyard-front::after { content:""; position:absolute; bottom:-38px; width:280px; height:180px; border-radius:50%; background:radial-gradient(ellipse,#315a43 15%,#1d372a 45%,transparent 70%); filter:blur(1px); }
.courtyard-front::before { left:-70px; }.courtyard-front::after { right:-60px; }
.street-sky { background:linear-gradient(#e1ac80 0 28%,#b7a28a 53%,#53655b 100%); }
.locked-city { position:absolute; right:80px; top:44px; color:rgba(255,255,255,.45); font:600 18px serif; letter-spacing:6px; }
.street-buildings { background:linear-gradient(90deg,#243c32 0 5%,transparent 5% 11%,#573e31 11% 24%,transparent 24% 28%,#334c40 28% 44%,transparent 44% 48%,#584032 48% 65%,transparent 65% 69%,#30483c 69% 85%,transparent 85%),linear-gradient(180deg,transparent 0 20%,rgba(22,34,29,.85) 20% 62%,transparent 62%); }
.street-buildings::after { content:"柳灯街"; position:absolute; left:565px; top:70px; color:rgba(255,235,185,.42); font:700 42px serif; letter-spacing:20px; }
.street-road { top:55%; background:repeating-linear-gradient(92deg,#777569 0 100px,#62645b 101px 104px); clip-path:polygon(0 8%,100% 0,100% 100%,0 100%); }
.street-road::after { content:""; position:absolute; left:0; right:0; top:48%; height:6px; background:repeating-linear-gradient(90deg,#dfbd68 0 34px,transparent 34px 67px); opacity:.5; }
.street-front { background:linear-gradient(0deg,rgba(10,24,18,.75),transparent 16%); }
.world-hud { position:absolute; z-index:20; left:0; right:0; top:0; height:70px; padding:max(8px,env(safe-area-inset-top)) 14px 6px; display:flex; align-items:flex-start; justify-content:space-between; pointer-events:none; background:linear-gradient(180deg,rgba(9,18,14,.78),transparent); }
.world-hud button,.world-hud a,.player-card { pointer-events:auto; }
.player-card { min-width:210px; display:flex; align-items:center; gap:9px; padding:7px 12px 7px 7px; border:1px solid rgba(255,255,255,.16); border-radius:15px; background:rgba(18,35,28,.82); box-shadow:0 9px 25px rgba(0,0,0,.24); }
.portrait { width:42px; height:42px; display:grid; place-items:center; border:2px solid #e1c275; border-radius:50%; color:#fff7dc; background:#73483d; font-family:serif; }
.player-card div:nth-child(2) { display:grid; gap:2px; }.player-card b { font-family:serif; font-size:14px; }.player-card span { color:#d9d8cf; font-size:9px; }.player-card span i { font-style:normal; }.player-card em { color:#f0d187; font-style:normal; }
.xp { width:120px; height:3px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.15); }.xp i { display:block; width:70%; height:100%; background:var(--gold); }
.growth-hud { display:flex; gap:6px; }.growth-hud button,.world-actions button,.world-actions a { min-width:66px; padding:8px 11px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.15); border-radius:14px; color:white; background:rgba(19,36,29,.82); text-decoration:none; }
.growth-hud small { font-size:8px; opacity:.65; }.growth-hud b { color:#f0d187; font-size:14px; }.world-actions { display:flex; gap:6px; }.world-actions button,.world-actions a { min-width:auto; font-size:10px; }
.world-entity { --entity-scale:1; position:absolute; z-index:5; left:var(--x); bottom:23%; min-width:78px; padding:0; display:grid; place-items:center; border:0; color:#fff; background:transparent; transform:translateX(-50%) scale(var(--entity-scale)); text-shadow:0 2px 8px #000; transition:filter .2s,transform .2s; }
.world-entity:focus-visible,.world-entity.nearby { outline:0; filter:drop-shadow(0 0 14px #ffe099) brightness(1.15); --entity-scale:1.05; }
.world-entity b { padding:3px 8px; border-radius:7px; background:rgba(13,27,21,.8); font-size:10px; white-space:nowrap; }.world-entity small { color:#f4d67f; font-size:8px; white-space:nowrap; }
.npc-body { width:44px; height:70px; display:grid; place-items:start center; padding-top:9px; border:2px solid rgba(255,228,164,.7); border-radius:24px 24px 16px 16px; color:#3b291f; background:linear-gradient(#f3d8ad 0 38%,#6f9a7f 39%); box-shadow:0 13px 20px rgba(0,0,0,.32); font-family:serif; font-size:16px; }
.xiaoman .npc-body { background:linear-gradient(#edd1ae 0 38%,#b96c62 39%); }.busker .npc-body { background:linear-gradient(#e5c59c 0 38%,#62617a 39%); }
.building-art { position:relative; width:160px; height:105px; display:block; border:3px solid #b98e50; border-radius:60px 60px 8px 8px; background:linear-gradient(150deg,#345947,#172f25); box-shadow:0 18px 28px rgba(0,0,0,.4); }
.building-art::before { content:""; position:absolute; left:56px; bottom:0; width:48px; height:50px; border-radius:24px 24px 2px 2px; background:#252b26; }.building-art i { position:absolute; inset:16px; border-radius:35px 35px 3px 3px; background:rgba(243,198,99,.13); transition:background .6s,box-shadow .6s; }
.workshop.lit .building-art i { background:#ffd681; box-shadow:0 0 35px #ffce6a; }.workshop.lit .building-art::after { content:"新设施：暖灯工作台"; position:absolute; left:18px; right:18px; top:-19px; color:#432f18; background:#f3d88d; border-radius:8px; font-size:8px; padding:3px; text-shadow:none; }
.gate span { width:62px; height:74px; display:grid; place-items:center; border:4px solid #c7a65d; border-radius:33px 33px 4px 4px; color:#f4d680; background:rgba(31,53,43,.86); font-family:serif; font-size:20px; }.locked-gate { opacity:.65; }
.shop-art,.bookshop-art { width:120px; height:84px; display:grid; place-items:center; border:3px solid #bb9553; border-radius:18px 18px 5px 5px; color:#ffe8a5; background:linear-gradient(150deg,#815247,#3f312d); box-shadow:0 14px 24px rgba(0,0,0,.38); font:700 25px serif; }.bookshop-art { background:linear-gradient(150deg,#446450,#263a30); }
.bookshop.awake .bookshop-art { box-shadow:0 0 27px rgba(255,205,104,.58),0 14px 24px rgba(0,0,0,.38); }
.player-avatar { position:absolute; z-index:10; left:50%; bottom:20%; width:46px; height:82px; transform:translateX(-50%); pointer-events:none; transition:filter .3s; }
.player-avatar span { width:46px; height:76px; display:grid; place-items:start center; padding-top:9px; border:2px solid #f1d084; border-radius:25px 25px 16px 16px; color:#402d23; background:linear-gradient(#efd4b0 0 38%,#3e7058 39%); box-shadow:0 14px 25px rgba(0,0,0,.42); font:16px serif; }.player-avatar i { position:absolute; left:3px; right:3px; bottom:-5px; height:8px; border-radius:50%; background:rgba(0,0,0,.35); filter:blur(2px); }
.player-avatar.walking { animation:walk .34s linear infinite alternate; }.player-avatar.facing-left { transform:translateX(-50%) scaleX(-1); }.player-avatar.facing-left span { transform:scaleX(-1); }
.proximity-prompt { position:absolute; z-index:15; left:50%; bottom:20%; transform:translate(-50%,-92px); padding:7px 10px; display:flex; align-items:center; gap:7px; border:1px solid rgba(255,230,167,.45); border-radius:12px; color:#fff; background:rgba(13,28,21,.9); font-size:10px; pointer-events:none; }.proximity-prompt kbd { padding:3px 6px; border-radius:6px; color:#362613; background:#f2d68d; font:700 10px inherit; }
.story-guide { position:absolute; z-index:18; left:14px; bottom:14px; max-width:310px; padding:9px 12px; display:grid; gap:2px; border-left:3px solid var(--gold); border-radius:5px 13px 13px 5px; background:rgba(13,29,22,.84); pointer-events:none; }.story-guide small { color:#e5c577; font-size:8px; }.story-guide b { font-size:11px; }.story-guide span { opacity:.68; font-size:8px; }
.touch-controls { position:absolute; z-index:19; left:max(16px,env(safe-area-inset-left)); bottom:65px; display:flex; gap:10px; }.touch-controls button,.interact-button { border:1px solid rgba(255,255,255,.28); color:#fff; background:rgba(20,42,32,.78); backdrop-filter:blur(7px); box-shadow:0 9px 22px rgba(0,0,0,.3); touch-action:none; }.touch-controls button { width:56px; height:56px; border-radius:50%; font-size:18px; }
.interact-button { position:absolute; z-index:19; right:max(20px,env(safe-area-inset-right)); bottom:48px; width:74px; height:74px; display:grid; place-items:center; border-radius:50%; }.interact-button span { font:700 22px serif; }.interact-button small { font-size:8px; opacity:.7; }.interact-button:disabled { opacity:.35; }
.dialogue { position:fixed; z-index:50; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); width:min(720px,calc(100vw - 120px)); transform:translateX(-50%); display:grid; grid-template-columns:70px 1fr; align-items:end; pointer-events:none; }.speaker-avatar { width:78px; height:100px; display:grid; place-items:start center; padding-top:16px; border:3px solid #ddbc6e; border-radius:40px 40px 20px 20px; background:linear-gradient(#efd3aa 0 38%,#668d76 39%); color:#3e2a20; font:26px serif; box-shadow:0 15px 30px rgba(0,0,0,.4); pointer-events:auto; }.dialogue-card { min-height:122px; padding:15px 18px; border:1px solid rgba(231,204,137,.48); border-radius:18px; color:#2b372f; background:linear-gradient(145deg,#fff9e9,#e9dfca); box-shadow:0 18px 50px rgba(0,0,0,.48); pointer-events:auto; }.dialogue-card > small { color:#995843; font-weight:700; }.dialogue-card p { min-height:34px; margin:8px 0; font-size:13px; line-height:1.6; }.dialogue-actions { display:flex; flex-wrap:wrap; gap:7px; }.dialogue-actions button { padding:7px 12px; border:0; border-radius:10px; color:#fff; background:#3b6652; font-size:10px; }.dialogue-actions button.secondary { color:#47564e; background:#ddd5c4; }.skip-dialogue { position:absolute; right:12px; top:10px; border:0; color:#6c746e; background:transparent; font-size:9px; }
.panel-backdrop { position:fixed; z-index:40; inset:0; background:rgba(7,13,10,.52); backdrop-filter:blur(3px); }.world-panel { position:fixed; z-index:41; left:50%; top:50%; width:min(660px,calc(100vw - 60px)); max-height:80dvh; overflow:auto; transform:translate(-50%,-50%); padding:20px; border-radius:22px; color:#25352d; background:linear-gradient(145deg,#fff9e9,#e6dcc7); box-shadow:0 25px 70px rgba(0,0,0,.55); }.panel-close { position:absolute; right:12px; top:12px; width:30px; height:30px; border:0; border-radius:50%; background:#d8cebb; }.world-panel h2 { margin:0 0 14px; font:600 22px serif; }
.dimension-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.dimension-grid article { padding:13px; display:grid; grid-template-columns:30px 1fr; align-items:center; border-radius:14px; background:rgba(255,255,255,.55); }.dimension-grid article > span { grid-row:1/3; font:20px serif; }.dimension-grid b { font-size:11px; }.dimension-grid small { color:#727d75; font-size:8px; }
.world-inventory { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.world-inventory article { min-height:90px; padding:12px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.56); text-align:center; }.world-inventory span { font:24px serif; }.world-inventory small { color:#748078; font-size:8px; }.empty-state { padding:25px; color:#758077; text-align:center; }
.journal { padding:14px; border-radius:14px; background:rgba(255,255,255,.5); }.journal p { margin:8px 0; font-size:11px; }.aux-note,.map-note { margin-top:12px; padding:11px; border-radius:11px; color:#68736c; background:rgba(57,95,76,.09); font-size:9px; line-height:1.5; }
.city-map { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.city-map button { min-height:80px; display:grid; place-items:center; border:1px dashed #9da49e; border-radius:13px; color:#788179; background:rgba(255,255,255,.36); }.city-map button.open { border-style:solid; color:#fff; background:#466b58; }.city-map small { font-size:8px; opacity:.7; }
.world-toast { position:absolute; z-index:30; left:50%; top:80px; transform:translateX(-50%); padding:9px 14px; border-radius:11px; color:#fff; background:rgba(19,39,30,.92); box-shadow:0 8px 25px rgba(0,0,0,.35); font-size:10px; pointer-events:none; animation:toast .25s ease-out; }
@keyframes walk { to { transform:translateY(-4px); } } @keyframes toast { from { opacity:0; transform:translate(-50%,-7px); } }
@media (hover:hover) and (pointer:fine) { .touch-controls { opacity:.5; }.touch-controls:hover { opacity:1; } }
@media (orientation:portrait) and (max-width:700px) { .portrait-gate { position:fixed; z-index:100; inset:0; display:grid; place-content:center; justify-items:center; color:#fff; background:radial-gradient(circle at 50% 40%,#3b6652,#101c16 70%); text-align:center; }.portrait-gate span { width:74px; height:48px; display:grid; place-items:center; border:2px solid #e2c577; border-radius:12px; font:26px serif; transform:rotate(90deg); }.portrait-gate h1 { margin:25px 0 5px; font:24px serif; }.portrait-gate p { opacity:.66; font-size:12px; }.world-game { visibility:hidden; } }
@media (max-height:470px) { .world-hud { height:58px; }.player-card { transform:scale(.88); transform-origin:left top; }.growth-hud,.world-actions { transform:scale(.88); transform-origin:right top; }.world-entity { bottom:20%; }.player-avatar { bottom:17%; }.story-guide { bottom:8px; }.touch-controls { bottom:48px; }.interact-button { bottom:28px; }.dialogue { bottom:8px; }.dialogue-card { min-height:102px; padding:11px 15px; }.dialogue-card p { margin:5px 0; }.speaker-avatar { height:86px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }