:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0a1728; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button:disabled { cursor: default; }
#game { position: relative; width: min(100vw, calc(100vh * .4621)); height: min(100vh, calc(100vw * 2.164)); max-width: 520px; margin: auto; overflow: hidden; overflow: clip; background: #cad8f3; box-shadow: 0 0 60px #000a; user-select: none; touch-action: none; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; }
#world { cursor: grab; }
#world:active { cursor: grabbing; }
.top-ui { position: absolute; top: 0; left: 0; right: 0; height: 129px; color: white; background: linear-gradient(#245d91 0 45px, #123c6c 45px 78px, #548fc8 78px 108px, #2b5d93 108px 111px, transparent 111px); text-shadow: 0 2px 2px #072745; pointer-events: none; }
.brand { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-weight: 1000; font-size: 25px; font-style: italic; letter-spacing: -2px; color: #f4fbff; filter: drop-shadow(0 4px 0 #87a7c5); white-space: nowrap; }
.system-pill { position: absolute; right: 9px; top: 7px; width: 102px; height: 35px; border-radius: 20px; background: #142b4866; display: flex; align-items: center; justify-content: center; gap: 5px; }
.system-pill i { width: 4px; height: 4px; background: #edf6ff; border-radius: 50%; }
.system-pill span { width: 19px; height: 19px; border: 3px solid #edf6ff; border-radius: 50%; margin-left: 18px; box-shadow: inset 0 0 0 3px #142b48; }
.avatar { pointer-events: auto; position: absolute; top: 50px; left: 4px; width: 50px; height: 47px; border: 3px solid white; border-radius: 9px; overflow: hidden; background: linear-gradient(150deg,#dde9f3,#6ba0c1); box-shadow: 0 2px 3px #0c2f57; }
.avatar-head { position: absolute; width: 20px; height: 22px; border-radius: 45% 45% 50% 50%; background: #e0a57e; left: 15px; top: 8px; box-shadow: inset 0 -5px #c27b57; }
.avatar-head:before { content:""; position:absolute; width:25px; height:11px; top:-4px; left:-2px; background:#3b2726; clip-path: polygon(0 80%,20% 5%,38% 52%,65% 0,100% 30%,84% 86%); }
.avatar-body { position:absolute; width:34px; height:18px; left:8px; top:30px; background:#274f69; border-radius:50% 50% 0 0; }
.avatar b { position:absolute; left:4px; right:4px; bottom:2px; height:4px; border-radius:4px; background:#12df37; }
.resources { position:absolute; left:56px; right:5px; top:50px; height:28px; display:flex; align-items:center; justify-content:space-between; }
.res { height:23px; min-width:61px; padding:0 5px; display:flex; align-items:center; gap:3px; border-right:1px solid #7190af; font-size:12px; }
.res:last-child { border-right:0; }
.res svg { width:17px; height:17px; fill:#d6b49e; stroke:#16334c; stroke-width:1.3; }
.res strong { font-size:13px; white-space:nowrap; }
.power { position:absolute; top:82px; left:55px; height:25px; display:flex; align-items:center; gap:3px; font-size:15px; }
.fist { width:16px; height:16px; background:#d5f4ff; clip-path:polygon(45% 0,60% 24%,88% 13%,81% 43%,100% 58%,69% 68%,61% 100%,42% 73%,10% 84%,19% 52%,0 35%,32% 31%); filter:drop-shadow(0 2px #1c4e79); }
.temperature { pointer-events:auto; position:absolute; top:76px; left:50%; transform:translateX(-50%); width:66px; height:51px; color:#1c5f91; background:linear-gradient(#a8efff,#4ec2ed); border:4px solid #2c6ba0; border-radius:12px 12px 16px 16px; box-shadow:0 3px #143d6f; text-shadow:0 1px white; }
.temperature strong { font-size:18px; }
.temperature small { font-size:10px; }
.temperature span { display:flex; gap:3px; justify-content:center; margin-top:3px; }
.temperature i { width:5px; height:9px; background:#ffc44d; border-radius:2px; box-shadow:0 0 4px #ffb32e; }
.toast { position:absolute; top:136px; left:50%; transform:translate(-50%,-10px); opacity:0; padding:8px 18px; border-radius:6px; background:#174b7eea; color:#fff; font-weight:800; font-size:13px; border:1px solid #a6d9ff; transition:.2s; pointer-events:none; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.map-hint { position:absolute; top:126px; left:50%; transform:translateX(-50%); height:25px; padding:4px 12px; border-radius:14px; color:#eaf7ff; background:#173e68b8; border:1px solid #8bc8ee88; font-size:11px; display:flex; align-items:center; gap:6px; pointer-events:none; transition:.25s; }
.map-hint span { width:17px; height:9px; border-left:2px solid white; border-right:2px solid white; position:relative; }
.map-hint span:after,.map-hint span:before { content:""; position:absolute; top:1px; width:6px; height:6px; border-top:2px solid white; border-left:2px solid white; transform:rotate(-45deg); }
.map-hint span:before { left:-4px; }.map-hint span:after { right:-4px; transform:rotate(135deg); }
.wild-hud { position:absolute; z-index:7; top:119px; left:8px; right:8px; height:55px; padding:8px 9px 8px 13px; border-radius:9px; background:linear-gradient(90deg,#123f70ed,#1b79a9e8); border:2px solid #8fd7ee; color:white; display:flex; align-items:center; box-shadow:0 4px 12px #15345166; }
.wild-hud.hidden { display:none; }
.wild-hud div { min-width:0; display:flex; flex-direction:column; }
.wild-hud strong { font-size:15px; }.wild-hud span { font-size:10px; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wild-hud button { margin-left:auto; padding:8px 12px; color:white; font-weight:800; background:linear-gradient(#25c7ff,#087fca); border:2px solid #e9fbff; border-radius:8px; box-shadow:0 2px #07538c; white-space:nowrap; }
.quest-chip { position:absolute; left:8px; bottom:76px; width:250px; height:43px; display:flex; align-items:center; gap:8px; color:white; background:linear-gradient(90deg,#10bdec 0,#00a3ee 55%,#1685d111 100%); border-radius:22px 0 0 22px; text-shadow:0 1px 2px #064f7d; box-shadow:inset 0 0 0 2px #91efff,0 0 10px #59d9ff; text-align:left; }
.quest-chip:active { transform:scale(.98); }
.scroll-icon { width:34px; height:34px; border-radius:8px; background:#fff7d8; border:3px solid #b89658; transform:rotate(-8deg); position:relative; }
.scroll-icon:after { content:""; position:absolute; inset:8px 7px; border-top:2px solid #9e7b3b; border-bottom:2px solid #9e7b3b; }
.quest-chip b { position:absolute; left:31px; top:-4px; min-width:16px; height:16px; padding:0 4px; background:#dc182b; border:2px solid white; border-radius:10px; font-size:10px; text-align:center; }
.quest-chip strong { font-size:16px; }
.mail-btn { position:absolute; right:14px; bottom:78px; width:48px; height:48px; border-radius:12px; background:linear-gradient(#6ba8df,#3474b1); border:3px solid #2a5f91; box-shadow:inset 0 0 0 2px #a9d1f3; }
.mail-btn span { position:absolute; inset:13px 9px; border:3px solid #eff8ff; border-top:0; }
.mail-btn span:after,.mail-btn span:before { content:""; position:absolute; width:20px; height:3px; background:#eff8ff; top:2px; }
.mail-btn span:before { left:-1px; transform:rotate(32deg); }
.mail-btn span:after { right:-1px; transform:rotate(-32deg); }
.mail-btn b { position:absolute; right:-4px; top:-5px; width:17px; height:17px; background:#d81225; border:2px solid #fff; border-radius:50%; font-size:9px; }
.bottom-nav { position:absolute; left:0; right:0; bottom:0; height:71px; display:flex; justify-content:flex-end; align-items:center; background:linear-gradient(90deg,#3378adcc 0,#3378ad66 65%,#23669e 100%); border-top:3px solid #7ec5ef; pointer-events:none; }
.bottom-nav button { flex:1; height:100%; background:none; position:relative; border-right:1px solid #4e86b5; }
.bottom-nav .active { pointer-events:auto; flex:0 0 88px; background:#f9fbff; color:#173d6a; clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 10%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.bottom-nav b { font-size:13px; }
.lock { display:block; width:15px; height:13px; border:3px solid #b8e2f4; border-radius:3px; margin:auto; box-shadow:0 2px #215f91; position:relative; }
.lock:before { content:""; position:absolute; width:9px; height:9px; border:3px solid #b8e2f4; border-bottom:0; border-radius:9px 9px 0 0; top:-10px; left:0; }
.map-icon { display:block; width:38px; height:25px; background:linear-gradient(120deg,#fff1c9 0 33%,#77aee5 34% 66%,#ffe6ae 67%); border:3px solid #d9992b; transform:skewY(-8deg); border-radius:3px; box-shadow:0 2px 0 #365d81; position:relative; }
.map-icon i { position:absolute; width:10px; height:13px; background:#ff9d13; border-radius:50% 50% 50% 0; transform:rotate(-45deg); left:15px; top:-10px; }
.tutorial { position:absolute; width:82px; height:104px; pointer-events:none; z-index:8; }
.tutorial.hidden { display:none; }
.tutorial .hand { position:absolute; width:48px; height:60px; background:linear-gradient(110deg,#e4bd99,#ae7359); border:3px solid #251b19; border-radius:28px 24px 30px 14px; transform:rotate(18deg); filter:drop-shadow(0 3px 2px #0007); }
.tutorial .hand:after { content:""; position:absolute; width:18px; height:34px; background:#e4bd99; border:3px solid #251b19; border-bottom:0; border-radius:12px 12px 0 0; top:-24px; left:2px; transform:rotate(-25deg); }
.tutorial i { position:absolute; left:12px; top:51px; width:34px; height:34px; border:3px solid #ffe893; border-radius:50%; animation:pulse 1s infinite; }
@keyframes pulse { 50% { transform:scale(1.35); opacity:.25; } }
.sheet,.modal { position:absolute; inset:0; z-index:20; pointer-events:none; opacity:0; transition:.2s; }
.sheet.open,.modal.open { pointer-events:auto; opacity:1; }
.sheet-backdrop,.modal-backdrop { position:absolute; inset:0; background:#101b2c99; backdrop-filter:blur(2px); }
.sheet-card { position:absolute; left:0; right:0; bottom:0; max-height:65%; min-height:280px; background:linear-gradient(#d7e9fb,#b8d3ee); transform:translateY(100%); transition:.25s ease-out; color:#234767; border-top:4px solid #75b9e5; }
.sheet.open .sheet-card { transform:translateY(0); }
.sheet-card header,.task-card header { height:48px; display:flex; align-items:center; padding:0 16px; color:#fff; background:linear-gradient(#63a0d4,#397db9); text-shadow:0 2px #244d73; }
.sheet-card h2,.task-card h2 { margin:0; font-size:20px; }
.close { margin-left:auto; background:none; font-size:31px; font-weight:900; color:#e9f9ff; text-shadow:0 2px #316187; }
.sheet-body { padding:14px 16px 24px; overflow-y:auto; max-height:calc(65vh - 48px); }
.building-summary { display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:center; }
.building-picture { height:70px; border:5px solid white; border-radius:8px; background:linear-gradient(145deg,#daeaff,#7898b3); position:relative; box-shadow:0 2px 4px #49668166; overflow:hidden; }
.building-picture:before { content:""; position:absolute; left:12px; right:11px; bottom:12px; height:23px; background:#9f642f; transform:skewY(-15deg); box-shadow:0 -10px #f4f7fa,9px -2px #6f4026; }
.building-picture:after { content:""; position:absolute; width:14px; height:18px; left:29px; bottom:9px; background:#3d2d2a; border:2px solid #e5b066; }
.building-picture.kitchen:after { width:18px; height:18px; left:27px; bottom:8px; border-radius:50% 50% 4px 4px; background:#ff8b25; box-shadow:0 -8px 10px #ffdc55; }
.building-picture.sawmill:before { background:#9a683e; box-shadow:0 -8px #e4edf5,16px 6px #74452c; }
.building-picture.sawmill:after { width:34px; height:7px; left:19px; bottom:8px; border:0; border-radius:5px; background:#8c512d; box-shadow:0 -8px #9f5c32,0 -16px #b56b36; }
.building-picture.hunter:after { width:24px; height:24px; left:25px; bottom:11px; background:transparent; border:3px solid #663d27; border-left:0; border-bottom:0; transform:rotate(45deg); }
.building-picture.infirmary:after { width:20px; height:7px; left:25px; bottom:17px; border:0; background:#dcefff; box-shadow:7px 7px #dcefff; }
.building-picture.coalmine:before { left:7px; right:7px; height:35px; bottom:5px; border-radius:50% 50% 0 0; background:#3c4858; transform:none; box-shadow:inset 0 0 0 7px #718094; }
.building-picture.coalmine:after { width:37px; height:4px; left:14px; bottom:8px; border:0; background:#8a5937; box-shadow:0 -9px #8a5937; }
.building-summary h3 { margin:0 0 4px; font-size:20px; color:#173d64; }
.building-summary p { margin:0; color:#58718b; font-size:13px; }
.info-grid { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.info-grid div { background:#eef7ff; border-radius:5px; padding:7px 9px; display:flex; justify-content:space-between; font-size:13px; }
.info-grid strong { color:#334e67; }
.action { width:100%; margin-top:14px; min-height:50px; border-radius:12px; color:white; font-size:18px; font-weight:900; background:linear-gradient(#28c9ff,#0792e1); border:2px solid #076cae; box-shadow:inset 0 2px #a6ecff,0 3px #07518c; text-shadow:0 2px #07558c; }
.action.green { background:linear-gradient(#16ed53,#00ad2c); border-color:#087624; box-shadow:inset 0 2px #9dffb9,0 3px #096520; }
.action:disabled { filter:grayscale(.9); opacity:.65; }
.status-panel { width:100%; margin-top:14px; min-height:46px; border-radius:10px; color:#eaf5ff; background:#66839d; border:2px solid #4c6982; display:flex; align-items:center; justify-content:center; font-weight:800; box-shadow:inset 0 2px #94aec5; }
.cost { display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; margin-top:10px; }
.cost .log-shape { width:28px; height:13px; border-radius:7px; background:#b8652a; border:2px solid #713d1f; position:relative; }
.cost .log-shape:after { content:""; position:absolute; right:-2px; top:-2px; width:13px; height:13px; border-radius:50%; background:#f0c46f; border:2px solid #713d1f; }
.worker-row { margin-top:15px; padding:10px; background:#7ba6ce; color:white; border-radius:8px; display:flex; align-items:center; gap:10px; }
.worker-row span { width:34px; height:34px; border-radius:50%; background:#e0a780; border:3px solid white; box-shadow:inset 0 -12px #3a566d; }
.worker-row button { width:34px; height:30px; background:#1b5f91; color:#fff; border-radius:7px; font-size:22px; font-weight:bold; }
.worker-row strong { margin-right:auto; }
.progress { height:18px; margin-top:14px; border-radius:10px; background:#36536d; overflow:hidden; box-shadow:inset 0 2px 3px #13273b; position:relative; }
.progress i { display:block; height:100%; width:0; background:linear-gradient(#20ef61,#00ad2b); transition:width .2s; }
.progress b { position:absolute; inset:0; color:white; text-align:center; line-height:18px; font-size:11px; text-shadow:0 1px #000; }
.task-card { position:absolute; left:12px; right:12px; top:50%; transform:translateY(-45%) scale(.96); max-height:86%; background:#cbe2f7; color:#244663; border-radius:8px; overflow:hidden; transition:.2s; }
.modal.open .task-card { transform:translateY(-50%) scale(1); }
.task-card header { justify-content:center; }
.task-card header .close { position:absolute; right:10px; }
.chapter-tabs { height:36px; display:flex; background:#8bb8dc; padding:4px 6px 0; gap:4px; }
.chapter-tabs button { flex:1; border-radius:7px 7px 0 0; background:#6398c4; color:#dff3ff; font-weight:800; font-size:12px; }
.chapter-tabs button.active { background:#174d80; color:#fff; }
.chapter-tabs button:disabled { filter:grayscale(1); opacity:.55; }
.chapter-art { height:96px; padding:20px; background:linear-gradient(160deg,#113d70,#356da3); position:relative; color:white; text-align:right; }
.chapter-art.chapter-2 { background:linear-gradient(150deg,#173f56,#397869); }
.chapter-art.chapter-3 { background:linear-gradient(150deg,#29324f,#794c50); }
.chapter-art.chapter-2 .mini-fire { background:linear-gradient(145deg,#d4f0ff 10%,#70aeb1 42%,#355d58 72%,transparent 73%); filter:drop-shadow(0 0 14px #8bd8cb); }
.chapter-art.chapter-3 .mini-fire { background:linear-gradient(145deg,#fff8a0 10%,#ff902c 42%,#772725 72%,transparent 73%); filter:drop-shadow(0 0 18px #ff7825); }
.chapter-art strong,.chapter-art span { display:block; position:relative; z-index:2; font-size:18px; }
.chapter-art span { font-size:15px; }
.mini-fire { position:absolute; left:65px; bottom:18px; width:50px; height:52px; background:linear-gradient(145deg,#fff35b 10%,#ff8511 42%,#d32312 72%,transparent 73%); clip-path:polygon(51% 0,73% 33%,92% 60%,78% 100%,22% 100%,8% 60%,37% 36%); filter:drop-shadow(0 0 14px #ff8a1d); }
.task-list { max-height:265px; overflow-y:auto; padding:8px; }
.task-item { background:#a9cdea; margin-bottom:7px; padding:10px; border-radius:8px; display:grid; grid-template-columns:1fr auto; gap:4px 8px; }
.task-item h3 { margin:0; font-size:14px; font-weight:500; }
.task-item p { margin:0; color:#355c7a; font-size:12px; }
.task-item button { grid-column:2; grid-row:1/3; min-width:79px; border-radius:12px; background:linear-gradient(#24d7ff,#0697e3); color:#fff; font-weight:bold; border:2px solid #1078b6; text-shadow:0 1px #075384; }
.task-status { grid-column:2; grid-row:1/3; min-width:79px; border-radius:12px; background:#718597; color:#e8f4ff; font-weight:bold; border:2px solid #536574; display:flex; align-items:center; justify-content:center; font-size:12px; }
.task-item button.claim { background:linear-gradient(#15ed4b,#00a72b); border-color:#087626; }
.task-item button.done { background:#718597; border-color:#536574; }
.chapter-reward { padding:8px 12px 12px; border-top:2px solid #8fb7db; text-align:center; }
.chapter-reward h3 { margin:0 0 7px; font-size:15px; }
.chapter-reward>div { display:flex; justify-content:center; gap:8px; }
.reward { display:flex; flex-direction:column; align-items:center; justify-content:center; width:54px; height:47px; border:3px solid white; border-radius:8px; color:white; text-shadow:0 1px #133; }
.reward i { display:block; width:16px; height:16px; background:#fff; }
.reward.gem i { transform:rotate(45deg); border-radius:2px; }
.reward.meat i { border-radius:50% 45% 50% 35%; }
.reward.log i { width:23px; height:9px; border-radius:5px; transform:rotate(-8deg); }
.reward b { font-size:10px; }
.reward.gem { background:#a13eda; }.reward.meat { background:#b95452;}.reward.log { background:#697b89; }
.chapter-reward button { float:right; margin-top:-43px; width:82px; height:35px; border-radius:11px; color:white; font-weight:bold; background:linear-gradient(#14e849,#00aa2a); border:2px solid #087124; }
.chapter-reward button:disabled { background:#6e7e8e; border-color:#53616d; }
.dialogue { position:absolute; inset:0; z-index:25; background:#1b26334d; }
.dialogue.hidden { display:none; }
.dialogue>button { position:absolute; inset:0; width:100%; background:none; }
.elder { position:absolute; right:-16px; bottom:158px; width:180px; height:275px; filter:drop-shadow(0 8px 5px #0005); }
.elder .hood { position:absolute; left:24px; top:0; width:125px; height:110px; border-radius:55% 55% 40% 40%; background:#ece8e1; box-shadow:inset 0 -22px #b8b5b2; }
.elder .face { position:absolute; left:52px; top:45px; width:72px; height:75px; border-radius:45%; background:#c98765; box-shadow:inset 0 -22px #765049; }
.elder .body { position:absolute; left:12px; top:98px; width:150px; height:170px; background:#654238; border-radius:40% 38% 12% 12%; box-shadow:inset 0 0 0 12px #c0b5a6; clip-path:polygon(18% 0,80% 0,100% 100%,0 100%); }
.dialogue-box { position:absolute; left:0; right:0; bottom:0; height:190px; background:linear-gradient(#78a9d8,#3f7fba); border-top:8px solid #f8fcff; color:white; text-align:left; padding:55px 30px 20px; }
.dialogue-box strong { position:absolute; top:-24px; left:50%; transform:translateX(-50%); width:150px; padding:10px; border-radius:50%; background:white; color:#315f86; text-align:center; font-size:22px; }
.dialogue-box p { margin:0; font-size:17px; line-height:1.8; }
.dialogue-box i { position:absolute; right:24px; bottom:18px; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:15px solid white; filter:drop-shadow(0 0 4px white); animation:bob .8s infinite alternate; }
@keyframes bob { to { transform:translateY(5px); } }
@media (min-aspect-ratio: 1/1) { #game { border-radius:18px; height:96vh; width:calc(96vh * .4621); margin-top:2vh; } }