.village-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 0 23px; }
#app .village-heading .eyebrow { font-size:10px; letter-spacing:.16em; color:#8a7970; }
.village-heading h1 { font-size:29px; font-weight:760; letter-spacing:-.045em; color:#3d493e; }
.village-heading h1 > span { color:#71835d; }
.village-heading > div > p:last-child { color:#8a8c7d; font-size:13px; margin-top:8px; }
.village-count { display:block; font-size:17px; color:#9b9b8b; line-height:1.3; text-align:right; padding-right:3px; }
.village-count b { font-size:33px; color:#657853; font-weight:760; }
.village-count small { display:block; font-size:11px; margin-top:5px; color:#929585; }
.village-layout { display:grid; grid-template-columns:minmax(0,1fr) 274px; align-items:stretch; gap:19px; }
.village-scene-wrap { position:relative; border:1px solid #d9dfd1; border-radius:17px; overflow:hidden; min-width:0; background:#d8e4da; display:flex; flex-direction:column; }
.village-scene { flex:1; min-height:0; display:flex; align-items:center; position:relative; }
.village-world-svg { display:block; width:100%; height:auto; min-height:460px; max-height:680px; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.village-world-svg:active { cursor:grabbing; }
.village-building,.village-map-label { cursor:pointer; }
.village-building:focus-visible { outline:none; filter:drop-shadow(0 0 6px #fff4b5); }
.village-building.is-selected { filter:drop-shadow(0 2px 4px #545b3510); }
.village-world-title { position:absolute; z-index:2; display:flex; align-items:center; gap:8px; top:19px; left:21px; font-size:13px; color:#53634e; pointer-events:none; }
.village-world-title small { margin-left:5px; color:#7d8c75; font-size:10px; }
.village-live-dot { width:6px; height:6px; background:#839b6d; border-radius:50%; box-shadow:0 0 0 3px #839b6d16; }
.village-world-tools { position:absolute; top:14px; right:16px; display:flex; align-items:center; gap:9px; z-index:3; }
.village-tool { background:#fcfdf4cc; border:1px solid #c6d0b9; color:#718368; border-radius:7px; min-width:36px; min-height:36px; font-size:19px; display:inline-grid; place-items:center; box-shadow:0 2px 4px #3f54380a; }
.village-tool:hover { background:#fffef5; border-color:#8b9e78; }
.village-tool.theme-tool { font-size:11px; padding:7px 11px; }
.village-zoom-tools { display:flex; gap:4px; }
.village-scene-caption { position:absolute; bottom:17px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; pointer-events:none; color:#6b7a62; font-size:10px; }
.village-scene-caption > span:first-child { padding:6px 10px; border:1px solid #bdcab57a; background:#fafcf3b3; border-radius:6px; }
.village-dusk { border-color:#7a8694; background:#4c6274; }
.village-dusk .village-world-title { color:#eee3cb; }
.village-dusk .village-world-title small,.village-dusk .village-scene-caption { color:#d9d9c9; }
.village-dusk .village-scene-caption > span:first-child { color:#d9e1db; background:#425d73b3; border-color:#9cb2b04a; }
.village-dusk .village-tool { background:#607589df; border-color:#8c9fa58a; color:#f2e2b8; }
.village-island.at-dusk { filter:brightness(.79) saturate(.88); }
.village-detail { background:#fffef9; border:1px solid #e2dfd3; border-radius:15px; padding:21px; display:flex; flex-direction:column; min-width:0; }
.village-card-label { display:flex; justify-content:space-between; align-items:center; color:#8a8b76; font-size:10px; }
.village-card-label > span:last-child { font-family:Georgia,serif; color:#c0b49c; font-style:italic; font-size:15px; }
.village-blueprint { height:127px; display:grid; place-items:center; position:relative; overflow:hidden; margin:17px 0 21px; border-radius:10px; background:#f0f0e3; border:1px solid #e8e7d5; }
.village-blueprint-grid { position:absolute; inset:0; opacity:.35; background:linear-gradient(30deg,transparent 48%,#ccd1ba 49%,#ccd1ba 50%,transparent 51%),linear-gradient(-30deg,transparent 48%,#ccd1ba 49%,#ccd1ba 50%,transparent 51%); background-size:30px 19px; }
.village-blueprint-glyph { position:relative; z-index:1; font:46px var(--glyph); color:#7b8767; transform:rotate(-5deg); border:1px solid #c3cbb3; padding:6px 12px; border-radius:8px; background:#fffef7; box-shadow:5px 5px 0 #c9cdb04d; }
.village-blueprint.library { background:#e9ecf1; }.village-blueprint.library .village-blueprint-glyph { color:#6a7fa3; border-color:#c1cada; }
.village-blueprint.observatory { background:#e6edf0; }.village-blueprint.observatory .village-blueprint-glyph { color:#6c8694; }
.village-blueprint.plaza { background:#f4ecdb; }.village-blueprint.plaza .village-blueprint-glyph { color:#aa8956; }
.village-detail h2 { font-size:22px; color:#555e49; }
.village-detail > p:not(.village-detail-note) { color:#8a8b7b; font-size:12px; margin-top:8px; }
.village-recipe-label { color:#9d9984; font-size:10px; margin:25px 0 10px; }
.village-recipe { display:flex; align-items:center; justify-content:center; gap:12px; }
.village-recipe > div { flex:1; min-width:0; text-align:center; background:#fafaf2; border:1px solid #e6e6d5; border-radius:9px; padding:12px 3px; }
.village-recipe b { display:block; font:36px var(--glyph); color:#737b5e; }
.village-recipe > div > span { display:block; margin-top:6px; font-size:10px; color:#969480; }
.village-recipe > div strong { color:#7b8962; }
.village-recipe-plus { color:#b7b19d; font-size:17px; }
.village-word-definition { display:flex; flex-direction:column; gap:6px; margin:17px 0 24px; padding:13px 0; border-top:1px solid #eeeddf; border-bottom:1px solid #eeeddf; }
.village-word-definition > strong { color:#6a725b; font-size:13px; }
.village-word-definition > span { color:#8d8d7a; font-size:12px; }
.village-detail .button { margin-top:auto; width:100%; font-size:13px; min-height:46px; border-radius:8px; padding:12px 8px; }
.village-detail .village-build-button { background:#6f8355; color:#fff; box-shadow:0 3px 0 #56673f; }
.village-detail .village-build-button:hover { background:#64784b; }
.village-detail .village-learn-button { color:#71805c; background:#eef1e3; border:1px solid #d4dcc4; }
.village-detail .village-learn-button:hover { background:#e6edda; }
.village-detail-note { font-size:10px; color:#929680; text-align:center; margin-top:12px; line-height:1.7; }
.village-buildings-section { margin-top:24px; }
.village-buildings-section .section-head h2 { color:#59644d; font-size:18px; }
.village-buildings { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.village-building-card { display:flex; gap:9px; align-items:center; text-align:left; background:white; border:1px solid #e2e4da; border-radius:11px; padding:15px 12px; position:relative; min-height:92px; }
.village-building-card.selected { border-color:#a0b38b; background:#f4f7ed; box-shadow:0 0 0 1px #c2cfb366; }
.village-building-icon { display:grid; place-items:center; width:36px; height:39px; font:23px var(--glyph); color:var(--building-color); border:1px solid #e4e4d6; background:#fffef7; border-radius:7px; flex-shrink:0; }
.village-building-card > span > strong { font-size:12px; color:#6b735d; display:block; white-space:nowrap; }
.village-building-card small { font-size:10px; display:block; color:#969984; margin-top:5px; }
.village-building-state { position:absolute; right:10px; bottom:8px; font-size:9px; color:#9f9e88; }
.village-building-state.ready { color:#ad8840; }.village-building-state.built { color:#6c8854; }
.village-how { margin-top:22px; color:#92937f; font-size:12px; }
.village-how summary { cursor:pointer; padding:12px 0; min-height:44px; }
.village-how p { margin:8px 0; max-width:850px; line-height:1.8; }
.village-toast { position:absolute; bottom:52px; left:50%; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:12px; background:#fffdf0ee; border:1px solid #d8c692; border-radius:11px; box-shadow:0 7px 25px #4a574217; padding:15px 22px; min-width:280px; pointer-events:none; }
.village-toast > span { color:#b7a566; font-size:27px; }
.village-toast strong { color:#747348; font-size:14px; display:block; }.village-toast div > span { display:block; font-size:11px; color:#95916f; margin-top:4px; }
.village-arrived { animation:village-build .65s cubic-bezier(.2,.8,.2,1); transform-box:fill-box; transform-origin:50% 100%; }
@keyframes village-build { from { opacity:.25; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
.village-windmill { animation:village-wind 30s linear infinite; }
@keyframes village-wind { to { transform:rotate(360deg); } }
.village-teaser { display:flex; align-items:center; gap:17px; width:100%; margin:0 0 18px; padding:15px 20px; background:linear-gradient(115deg,#f0f2e8,#f7f6eb); border:1px solid #dce2cf; border-radius:12px; color:#6d7858; text-align:left; }
.village-teaser small { font-size:10px; color:#8b947c; display:block; margin-bottom:4px; }
.village-teaser strong { font-size:15px; font-weight:650; }
.village-teaser-art { display:flex; align-items:flex-end; gap:4px; width:65px; height:41px; padding:0 0 2px 3px; position:relative; }
.village-teaser-art:before { content:""; position:absolute; width:58px; height:28px; transform:skewY(-16deg); background:#c4d2a7; bottom:0; left:0; border-radius:3px; border-bottom:5px solid #b4bb91; }
.village-teaser-art > i { display:block; position:relative; z-index:1; width:16px; height:22px; background:#edddbe; border-right:5px solid #d2bd98; border-top:7px solid #b68768; margin-bottom:10px; }
.village-teaser-art > i:nth-child(2) { height:30px; border-top-color:#8699ae; margin-bottom:9px; }
.village-teaser-cta { margin-left:auto; font-size:11px; color:#8b947c; white-space:nowrap; }.village-teaser-cta b { margin-left:12px; font-size:20px; font-weight:400; color:#8d9c70; }
#app .village-detail > p,#app .village-word-definition > span,#app .village-recipe-label,
#app .village-recipe > div > span,#app .village-detail-note,#app .village-card-label,
#app .village-how,#app .village-heading > div > p:last-child,#app .village-building-card small { color:#74765f; }
.village-recipe > div > span { font-size:12px; }
.village-word-definition > span { font-size:13px; }
@media(max-width:1100px) { .village-layout { grid-template-columns:minmax(0,1fr) 240px; gap:14px; }.village-detail { padding:18px; }.village-world-title small { display:none; }.village-building-card { padding:13px 9px; gap:7px; }.village-building-icon { width:30px; height:34px; font-size:21px; }.village-building-card > span > strong { font-size:11px; }.village-buildings { gap:8px; } }
@media(max-width:760px) {
  .village-heading { padding:22px 0 20px; }.village-heading h1 { font-size:25px; }.village-layout { grid-template-columns:1fr; gap:15px; }
  .village-scene-wrap { min-height:420px; }.village-world-svg { min-height:420px; max-height:570px; }.village-detail { display:grid; grid-template-columns:120px 1fr; column-gap:20px; padding:20px; }
  .village-card-label { grid-column:1/-1; margin-bottom:18px; }.village-blueprint { grid-column:1; grid-row:2/5; height:135px; margin:0; }.village-blueprint-glyph { font-size:32px; padding:8px; }
  .village-detail h2 { grid-column:2; font-size:20px; }.village-detail > p:not(.village-detail-note) { grid-column:2; font-size:12px; margin-top:4px; }.village-recipe-label { grid-column:2; margin:13px 0 7px; }
  .village-recipe { grid-column:2; gap:10px; }.village-recipe > div { padding:7px 2px; }.village-recipe b { font-size:28px; }.village-recipe > div > span { font-size:10px; margin-top:2px; }
  .village-word-definition { grid-column:1/-1; margin:16px 0; padding:11px 0; flex-direction:row; align-items:center; gap:12px; }.village-word-definition > strong { flex-shrink:0; }.village-word-definition > span { font-size:12px; }
  .village-detail .button { grid-column:1/-1; font-size:14px; }.village-detail-note { grid-column:1/-1; margin-top:10px; }
  .village-buildings { grid-template-columns:repeat(3,minmax(0,1fr)); }.village-building-card { min-height:93px; padding:12px; gap:9px; }.village-building-card > span > strong { font-size:12px; }
}
@media(max-width:600px) {
  .village-heading { gap:10px; padding:21px 0 18px; }.village-heading h1 { font-size:23px; line-height:1.4; }.village-heading h1 > span { display:block; }.village-heading > div > p:last-child { font-size:12px; margin-top:7px; }
  #app .village-heading .eyebrow { font-size:8px; letter-spacing:.12em; margin-bottom:8px; }.village-count b { font-size:29px; }.village-count { font-size:14px; }.village-count small { font-size:9px; }
  .village-scene-wrap { min-height:370px; border-radius:13px; }.village-world-svg { width:100%; min-height:370px; max-height:440px; }
  .village-world-title { left:13px; top:17px; font-size:11px; gap:6px; }.village-world-tools { right:10px; top:10px; gap:5px; }
  .village-tool { min-width:36px; min-height:44px; font-size:19px; }.village-tool.theme-tool { font-size:10px; padding:7px 8px; }.village-zoom-tools { gap:3px; }
  .village-scene-caption { left:11px; right:11px; bottom:11px; font-size:8px; gap:8px; }.village-scene-caption > span:first-child { padding:6px 7px; }.village-scene-caption > span:last-child { text-align:right; }
  .village-detail { grid-template-columns:95px 1fr; gap:0 16px; padding:18px; border-radius:12px; }.village-blueprint { height:126px; }.village-blueprint-glyph { font-size:28px; padding:7px; }
  .village-card-label { font-size:10px; margin-bottom:16px; }.village-detail h2 { font-size:20px; }.village-detail > p:not(.village-detail-note) { font-size:11px; }.village-recipe-label { font-size:9px; margin:11px 0 6px; }
  .village-recipe > div { padding:6px 2px; }.village-recipe b { font-size:27px; }.village-recipe > div > span { font-size:11px; }.village-recipe-plus { font-size:14px; }
  .village-word-definition { margin:14px 0; }.village-word-definition > span { font-size:11px; }.village-detail-note { font-size:9px; }
  .village-buildings-section { margin-top:23px; }.village-buildings-section .section-head h2 { font-size:17px; }.village-buildings-section .muted { font-size:10px; }
  .village-buildings { grid-template-columns:1fr 1fr; gap:9px; }.village-building-card { min-height:87px; gap:8px; padding:12px 10px; }.village-building-icon { width:31px; height:34px; }.village-building-card > span > strong { font-size:12px; }.village-building-card small { font-size:9px; margin-top:4px; }.village-building-state { font-size:9px; bottom:7px; }
  .village-toast { min-width:0; width:calc(100% - 30px); bottom:45px; padding:12px; gap:9px; }.village-toast strong { font-size:12px; }.village-toast div > span { font-size:9px; }
  .village-teaser { gap:12px; padding:13px 14px; }.village-teaser-art { flex-shrink:0; width:50px; transform:scale(.85); transform-origin:left center; margin-right:-6px; }.village-teaser strong { font-size:12px; }.village-teaser small { font-size:9px; }.village-teaser-cta { font-size:9px; }.village-teaser-cta b { margin-left:3px; font-size:17px; }
  .nav > button { font-size:10px; }.nav .ui-icon { width:18px; height:18px; }
}
@media(prefers-reduced-motion:reduce) { .village-windmill,.village-arrived { animation:none; } }